:root {
  --rpmenu-accent: #fad505;
  --rpmenu-text: #111827;
  --rpmenu-muted: #64748b;
  --rpmenu-border: #e5e7eb;
  --rpmenu-surface: #ffffff;
  --rpmenu-soft: #f8fafc;
}

.rpmenu {
  background: var(--rpmenu-surface);
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  color: var(--rpmenu-text);
  position: relative;
  z-index: 120;
}

.rpmenu--sticky {
  position: sticky;
  top: 0;
}

.rpmenu__bar {
  align-items: center;
  display: flex;
  gap: 16px;
  min-height: 56px;
}

.rpmenu__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--rpmenu-text);
  cursor: pointer;
  display: none;
  font-weight: 700;
  gap: 10px;
  padding: 12px 0;
}

.rpmenu__toggle-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.rpmenu__toggle-lines span {
  background: currentColor;
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 22px;
}

.rpmenu__search {
  align-items: center;
  background: var(--rpmenu-soft);
  border: 1px solid var(--rpmenu-border);
  border-radius: 999px;
  display: flex;
  margin-left: auto;
  overflow: hidden;
  width: min(360px, 34vw);
}

.rpmenu__search input {
  background: transparent;
  border: 0;
  color: var(--rpmenu-text);
  flex: 1;
  min-width: 0;
  outline: 0;
  padding: 10px 14px;
}

.rpmenu__search button {
  background: var(--rpmenu-accent);
  border: 0;
  color: var(--rpmenu-text);
  cursor: pointer;
  font-weight: 700;
  padding: 10px 16px;
}

.rpmenu__panel {
  display: block;
}

.rpmenu__mobile-head {
  display: none;
}

.rpmenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rpmenu__list--level-0 {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.rpmenu__item {
  position: relative;
}

.rpmenu__list--level-0 > .rpmenu__item {
  position: static;
}

.rpmenu__link {
  align-items: center;
  border-radius: 10px;
  color: var(--rpmenu-text);
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  min-height: 54px;
  padding: 12px 13px;
  text-decoration: none;
  transition: background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.rpmenu__link:hover,
.rpmenu__link:focus,
.rpmenu__item.is-open > .rpmenu__link,
.rpmenu__item:hover > .rpmenu__link {
  background: #eef4ff;
  box-shadow: inset 0 -3px 0 #2563eb;
  color: #0f172a;
  outline: 0;
  text-decoration: none;
}

.rpmenu__image {
  border-radius: 8px;
  height: 34px;
  object-fit: cover;
  width: 34px;
}

.rpmenu__expand {
  display: none;
}

/* Hidden by default; the desktop and drawer media queries below define how
   submenus actually appear (cascading columns vs. accordion). */
.rpmenu__submenu {
  display: none;
}

/* =====================================================================
   Desktop (mouse, >=1025px): stable mega-panel (competitor style).
   Hovering a tab opens ONE fixed-size white panel under the menu:
     - a brand sidebar on the left (column A), and
     - a content area on the right showing the hovered brand's items as a
       multi-column grid (column B).
   The first brand is shown by default. The whole panel is one hover
   target (it's a descendant of the tab), so the mouse can move anywhere
   inside it without the menu collapsing. This is pure CSS - no JS hover.
   ===================================================================== */
@media (min-width: 1025px) and (pointer: fine) {
  /* centre the bar + tabs on the same container width as the theme
     (Bootstrap .container-md: 1140px on xl, 1320px on xxl - see overrides
     further down) so the tab row lines up with the logo and footer columns. */
  .rpmenu__bar,
  .rpmenu__panel {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* the desktop bar holds no controls when search is off -> collapse it */
  .rpmenu__bar {
    min-height: 0;
  }

  .rpmenu__list--level-0 {
    position: relative;
    flex-wrap: nowrap;
    gap: 0;
  }

  /* equal-width cells, so every tab gets the same size box and the dividers
     fall on even boundaries across the content width */
  .rpmenu__list--level-0 > .rpmenu__item {
    flex: 1 1 0;
    min-width: 0;
  }

  /* thin hairline between the cells */
  .rpmenu__list--level-0 > .rpmenu__item + .rpmenu__item {
    border-left: 1px solid var(--rpmenu-border);
  }

  /* bolder labels, centred both horizontally and vertically inside each cell;
     long labels wrap to two centred lines instead of overflowing */
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__link {
    justify-content: center;
    text-align: center;
    font-weight: 800;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.2;
  }

  /* ---- the stable mega-panel (a tab's submenu) ----
     NOTE: layout rules use !important so they always beat any stale CSS
     left over from previous menu versions / combined cache bundles. */
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 400px !important;
    max-height: 90vh !important;
    background: var(--rpmenu-surface);
    border: 1px solid var(--rpmenu-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease;
    z-index: 1000;
  }

  .rpmenu__list--level-0 > .rpmenu__item:hover > .rpmenu__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0.14s;
  }

  .rpmenu__submenu .rpmenu__list {
    display: block;
  }

  /* ---- column A: brand sidebar ---- */
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list--level-1 {
    position: static !important;
    width: 236px !important;
    height: auto !important;
    max-height: 100%;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
    border-right: 1px solid var(--rpmenu-border);
    box-sizing: border-box;
  }

  /* keep brand items un-positioned so column B anchors to the panel, and
     give the brand rows some vertical breathing room so they don't look
     cramped (the panel grows to fit them, so this never adds a scrollbar) */
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list--level-1 > .rpmenu__item {
    position: static !important;
    margin-bottom: 5px;
  }

  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__link {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* ---- column B: content area for a brand ---- */
  .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__submenu {
    display: block !important;
    position: absolute !important;
    left: 236px !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow-y: auto;
    padding: 12px 16px;
    margin: 0;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* The active brand's content is driven by JS hover-intent (.rpm-current)
     so sweeping the mouse across the brand list on the way to the content
     does NOT keep swapping panels (the "diagonal" problem). Without JS we
     fall back to simply showing the first brand. The show rules are gated
     behind the tab being hovered, otherwise the (transparent) content panel
     would keep pointer-events and silently block clicks on the page. */
  .rpmenu__list--level-0 > .rpmenu__item:hover .rpmenu__list--level-1 > .rpmenu__item.rpm-current > .rpmenu__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .rpmenu:not(.rpm-js) .rpmenu__list--level-0 > .rpmenu__item:hover .rpmenu__list--level-1 > .rpmenu__item:first-child > .rpmenu__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* models as a CSS grid filling the content area. Grid (not multi-column)
     keeps each cell independent so the hover/active highlight can never bleed
     into the neighbouring column. */
  .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 2px 10px;
    align-content: start;
    width: auto !important;
  }

  /* ---------------------------------------------------------------
     3-level cascade (e.g. Samsung -> A/M/S series -> models).
     When column B's items are THEMSELVES parents, column B becomes a
     single narrow list and cascades column C (the models) to its right.
     Brands whose children are leaves (e.g. iPhone -> models) are left as
     the wide grid above. Detection is done with :has().
     --------------------------------------------------------------- */
  .rpmenu__submenu--level-2:has(> .rpmenu__list--level-2 > .rpmenu__item--has-children) {
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  .rpmenu__submenu--level-2:has(> .rpmenu__list--level-2 > .rpmenu__item--has-children) > .rpmenu__list--level-2 {
    display: block !important;
    column-count: auto !important;
    column-width: auto !important;
    width: 200px !important;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }

  /* The series <li> is position:relative by default, which would make it the
     containing block for column C and collapse it to ~0px. Force it static so
     column C anchors to column B (the panel) and fills the area to its right. */
  .rpmenu__submenu--level-2:has(> .rpmenu__list--level-2 > .rpmenu__item--has-children) > .rpmenu__list--level-2 > .rpmenu__item {
    position: static !important;
    margin-bottom: 5px;
  }

  .rpmenu__submenu--level-2:has(> .rpmenu__list--level-2 > .rpmenu__item--has-children) > .rpmenu__list--level-2 > .rpmenu__item > .rpmenu__link {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* ---- column C: models of the hovered series ---- */
  .rpmenu__list--level-2 > .rpmenu__item > .rpmenu__submenu {
    display: block !important;
    position: absolute !important;
    left: 224px !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow-y: auto;
    padding: 4px 8px 4px 14px;
    margin: 0;
    box-sizing: border-box;
    border-left: 1px solid var(--rpmenu-border);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .rpmenu__list--level-0 > .rpmenu__item:hover
    .rpmenu__list--level-1 > .rpmenu__item.rpm-current > .rpmenu__submenu
    .rpmenu__list--level-2 > .rpmenu__item.rpm-current > .rpmenu__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .rpmenu:not(.rpm-js) .rpmenu__list--level-0 > .rpmenu__item:hover
    .rpmenu__list--level-1 > .rpmenu__item:first-child > .rpmenu__submenu
    .rpmenu__list--level-2 > .rpmenu__item:first-child > .rpmenu__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* column C models as a wide CSS grid (independent cells, no bleed).
     Narrow tracks pack 5+ columns so even the largest series (75 models)
     fits the panel height without any vertical scrolling. */
  .rpmenu__list--level-2 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list--level-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 10px;
    align-content: start;
    width: auto !important;
  }

  /* a 4th level (rare) is not expanded as a further fly-out here */
  .rpmenu__list--level-3 .rpmenu__submenu {
    display: none !important;
  }

  /* ---- link styling ---- */
  .rpmenu__submenu .rpmenu__link {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    min-height: 26px;
    line-height: 1.15;
    padding: 3px 9px;
    gap: 6px;
    color: var(--rpmenu-text);
    background: transparent;
    white-space: normal;
    box-shadow: none;
  }

  .rpmenu__submenu .rpmenu__link:hover {
    background: #eef5ff;
    color: #005bbb;
    box-shadow: none;
  }

  /* brand sidebar: active (first) + hovered get the dark highlight */
  .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__link {
    justify-content: space-between;
  }

  .rpmenu__list--level-1 > .rpmenu__item.rpm-current > .rpmenu__link {
    background: #eef4ff !important;
    color: #005bbb !important;
    box-shadow: inset 3px 0 0 #2563eb;
  }

  .rpmenu:not(.rpm-js) .rpmenu__list--level-1 > .rpmenu__item:first-child > .rpmenu__link {
    background: #eef4ff;
    color: #005bbb;
    box-shadow: inset 3px 0 0 #2563eb;
  }

  .rpmenu__list--level-1 > .rpmenu__item--has-children > .rpmenu__link::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.6;
    flex: none;
  }

  /* model links: lighter weight, left-aligned */
  .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__submenu .rpmenu__link {
    font-weight: 500;
    justify-content: flex-start;
  }

  /* series column (column B when it cascades): bolder, with a cascade arrow */
  .rpmenu__list--level-2 > .rpmenu__item--has-children > .rpmenu__link {
    justify-content: space-between;
    font-weight: 600;
  }

  .rpmenu__list--level-2 > .rpmenu__item--has-children > .rpmenu__link::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.6;
    flex: none;
  }

  /* series column: the active (current) series gets a light highlight */
  .rpmenu__list--level-2 > .rpmenu__item.rpm-current > .rpmenu__link {
    background: #eef5ff !important;
    color: #005bbb !important;
  }

  .rpmenu:not(.rpm-js) .rpmenu__list--level-2 > .rpmenu__item:first-child > .rpmenu__link {
    background: #eef5ff;
    color: #005bbb;
  }

  .rpmenu__submenu .rpmenu__image {
    display: none;
  }
}

.rpmenu__overlay {
  display: none;
}

body.rpmenu-open {
  overflow: hidden;
}

/* Wide desktops: there is room for the bigger, more generously spaced tabs. */
@media (min-width: 1200px) and (pointer: fine) {
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__link {
    font-size: 15px;
  }
}

/* xxl: the theme container grows to 1320px, so match it. */
@media (min-width: 1400px) and (pointer: fine) {
  .rpmenu__bar,
  .rpmenu__panel {
    max-width: 1320px;
  }
}

/* Keep the top bar aligned with the theme's centred header container at every
   width (Bootstrap .container-md: 720 / 960 / 1140 / 1320). On desktop the bar
   is empty (tabs live in the panel) so this is harmless there; on tablets and
   rotated phones it stops the "Menu" toggle from hanging against the far-left
   screen edge and lines it up under the logo. */
@media (min-width: 768px) {
  .rpmenu__bar {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 992px) {
  .rpmenu__bar {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .rpmenu__bar {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .rpmenu__bar {
    max-width: 1320px;
  }
}

@media (max-width: 1199px) {
  .rpmenu__link {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .rpmenu__search {
    width: min(300px, 30vw);
  }
}

/* Drawer + tap accordion for ALL touch devices (any width, incl. iPad Pro)
   and for narrow windows. Pointer-based mouse desktops keep the horizontal
   hover mega menu. This avoids the classic "hover menu stuck on a touch
   tablet" problem. */
@media (max-width: 1024px), (pointer: coarse) {
  .rpmenu {
    box-shadow: none;
  }

  .rpmenu--sticky {
    position: relative;
  }

  /* The theme ships its own mobile "Menú" placeholder button; this module
     provides the real menu, so hide the duplicate. */
  #_mobile_ps_menu {
    display: none !important;
  }

  .rpmenu__bar {
    justify-content: space-between;
    min-height: 52px;
  }

  .rpmenu__toggle {
    display: inline-flex;
  }

  .rpmenu__search {
    flex: 1;
    width: auto;
  }

  .rpmenu__search input {
    padding: 9px 12px;
  }

  .rpmenu__search button {
    font-size: 0;
    padding: 10px 12px;
  }

  .rpmenu__search button:before {
    content: "Go";
    font-size: 12px;
  }

  .rpmenu__overlay {
    background: rgba(15, 23, 42, 0.45);
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    z-index: 9997;
  }

  .rpmenu.is-open .rpmenu__overlay {
    opacity: 1;
    visibility: visible;
  }

  .rpmenu__panel {
    background: var(--rpmenu-surface);
    bottom: 0;
    box-shadow: 18px 0 45px rgba(15, 23, 42, 0.22);
    left: 0;
    max-width: 90vw;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    width: 390px;
    z-index: 9998;
  }

  .rpmenu.is-open .rpmenu__panel {
    transform: translateX(0);
  }

  .rpmenu__mobile-head {
    align-items: center;
    border-bottom: 1px solid var(--rpmenu-border);
    display: flex;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
  }

  .rpmenu__close {
    background: var(--rpmenu-soft);
    border: 1px solid var(--rpmenu-border);
    border-radius: 999px;
    color: var(--rpmenu-text);
    cursor: pointer;
    font-size: 24px;
    height: 36px;
    line-height: 1;
    width: 36px;
  }

  .rpmenu__list--level-0 {
    display: block;
  }

  .rpmenu__list--level-0 > .rpmenu__item {
    border-bottom: 1px solid var(--rpmenu-border);
    position: relative;
  }

  .rpmenu__link {
    border-radius: 0;
    box-shadow: none !important;
    font-size: 15px;
    justify-content: flex-start;
    min-height: 50px;
    padding: 13px 58px 13px 18px;
  }

  .rpmenu__expand {
    align-items: center;
    background: var(--rpmenu-soft);
    border: 0;
    border-left: 1px solid var(--rpmenu-border);
    bottom: auto;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .rpmenu__expand:before,
  .rpmenu__expand:after {
    background: var(--rpmenu-text);
    content: "";
    height: 2px;
    position: absolute;
    width: 16px;
  }

  .rpmenu__expand:after {
    transform: rotate(90deg);
    transition: transform 0.18s ease;
  }

  .rpmenu__item.is-open > .rpmenu__expand:after {
    transform: rotate(0);
  }

  .rpmenu__submenu,
  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu {
    background: #fbfdff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    max-height: none;
    opacity: 1;
    padding: 0 0 0 12px;
    pointer-events: auto;
    position: static;
    transform: none;
    visibility: visible;
    width: 100%;
  }

  .rpmenu__item.is-open > .rpmenu__submenu {
    display: block;
  }

  .rpmenu__list--level-0 > .rpmenu__item > .rpmenu__submenu > .rpmenu__list {
    display: block;
  }

  .rpmenu__list--level-1 > .rpmenu__item > .rpmenu__link,
  .rpmenu__list--level-2 .rpmenu__link,
  .rpmenu__list--level-3 .rpmenu__link,
  .rpmenu__list--level-4 .rpmenu__link,
  .rpmenu__list--level-5 .rpmenu__link {
    background: transparent;
    color: var(--rpmenu-text);
    font-size: 14px;
    min-height: 44px;
    padding-left: 18px;
  }
}

/* Phone layout (<768px): the theme shows its own compact gray bar with the
   search / account / cart icons. Instead of dropping our menu into a separate
   white row underneath it, collapse that row and lift the burger toggle up so
   it sits ON the gray bar, on the left of the theme icons. The toggle stays a
   descendant of .rpmenu (so the drawer JS still finds its menu); only its
   position changes. The drawer panel is a sibling of .rpmenu__bar, so
   collapsing the bar never affects it. */
@media (max-width: 767px) {
  .rpmenu--sticky {
    position: relative !important;
  }

  .rpmenu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rpmenu > .rpmenu__bar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .rpmenu > .rpmenu__bar > .rpmenu__toggle {
    position: absolute !important;
    top: -50px;
    left: 12px;
    z-index: 200;
    margin: 0 !important;
    padding: 8px 10px !important;
  }
}