/* ================================================================
   GadgetGuys Catalog Menu
   Modern, clean mega menu for OpenCart stores
   ================================================================ */

.gg-catmenu-slot,
.gg-catmenu-slot *,
.gg-catmenu-slot *::before,
.gg-catmenu-slot *::after {
  box-sizing: border-box;
}

/* ---------- Slot: sits as a col-md-3 flex child in the existing navy bar ---------- */
/* Reserve 15px padding-right so the theme's `.box-search { margin-left: -15px }`
   lands in empty space rather than over the catalog button. */
.gg-catmenu-slot {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  min-height: 54px;
}

/* ----- Tablet / mobile: hide the desktop slot; the theme's own mobile
   nav (#top-fixed-mobile) stays intact and its first icon opens our
   drawer via window.open_mob_menu_left override. ----- */
@media (max-width: 991px) {
  .gg-catmenu-slot {
    display: none !important;
  }
}

/* ==================== MOBILE FIXED ICON BAR ====================
   Replaces the legacy #top-fixed-mobile bar from the megamenu. Displayed
   only below 992px. Fixed to top so it's always reachable while scrolling.
   Matches the navy theme strip so it looks native. */

/* ============================================================
   Scroll-aware mobile header
   Design principle: ONE thing animates — the search row. Top row
   (catalog / logo / account / cart) stays stable so the user's eye
   isn't pulled around. The header is direction-aware: any upward
   scroll reveals the search again, so users never have to scroll
   all the way back to the top to search. Subtle elevation shadow
   appears as soon as the page leaves the very top, echoing the
   standard app-bar pattern.
   All timings use the Material "standard" easing (0.2, 0, 0, 1)
   so the motion reads as a single, cohesive gesture.
   ============================================================ */
.gg-catmenu__mobar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  background: #122538;
  flex-direction: column;
  border-bottom-left-radius: var(--gg-radius, 0);
  border-bottom-right-radius: var(--gg-radius, 0);
  /* Flat at the top of the page — shadow fades in once user scrolls. */
  box-shadow: 0 0 0 0 rgba(15, 23, 42, 0);
  transition: box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
  will-change: box-shadow;
}
.gg-catmenu__mobar[data-elevated="true"] {
  box-shadow: 0 6px 18px -6px rgba(7, 16, 28, 0.55);
}

/* Rows */
.gg-catmenu__mobar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  flex-wrap: nowrap;
  min-width: 0;
}
.gg-catmenu__mobar-row--top { min-height: 58px; }

/* ---- Search row: the ONLY element that collapses on scroll. ----
   We animate transform + opacity + max-height together — transform
   and opacity are GPU-accelerated (no reflow), max-height drives the
   surrounding body padding so content rises/falls with the bar. */
.gg-catmenu__mobar-row--search {
  padding: 0 10px 10px;
  max-height: 62px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transform-origin: top center;
  transition: max-height 0.3s cubic-bezier(0.2, 0, 0, 1),
              opacity   0.22s cubic-bezier(0.2, 0, 0, 1),
              transform 0.3s cubic-bezier(0.2, 0, 0, 1),
              padding   0.3s cubic-bezier(0.2, 0, 0, 1);
  will-change: max-height, transform, opacity;
}
.gg-catmenu__mobar[data-scrolled="true"] .gg-catmenu__mobar-row--search {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Account button: visible in the expanded state, collapses out when
   scrolled so the compact search has room to breathe. Single coherent
   timing — width + padding + opacity + visibility all share the same
   curve so the transition reads as one gesture, matching the rest of
   the mobar motion. */
.gg-catmenu__mobar-btn--account {
  overflow: hidden;
  max-width: 44px;
  opacity: 1;
  visibility: visible;
  transition: max-width 0.3s cubic-bezier(0.2, 0, 0, 1),
              padding   0.3s cubic-bezier(0.2, 0, 0, 1),
              margin    0.3s cubic-bezier(0.2, 0, 0, 1),
              opacity   0.22s cubic-bezier(0.2, 0, 0, 1),
              visibility 0.3s step-end;
}
.gg-catmenu__mobar[data-scrolled="true"] .gg-catmenu__mobar-btn--account {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Center slot: logo and compact search share the same grid cell
   and crossfade on scroll. Neither element changes size — the slot
   itself stays the same width, so the top row reads as a stable
   anchor while the search discoverability is preserved after the
   second row collapses. */
.gg-catmenu__mobar-center {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.gg-catmenu__mobar-center > .gg-catmenu__mobar-logo,
.gg-catmenu__mobar-center > .gg-catmenu__mobar-search--compact {
  grid-area: 1 / 1;
  /* Softer, slightly longer fade so neither element pops in abruptly.
     Visibility is animated at step-end so the hidden element is fully
     invisible before flipping, avoiding a brief flicker mid-transition. */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s step-end;
}

.gg-catmenu__mobar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  height: 42px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  opacity: 1;
}
.gg-catmenu__mobar-logo img {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
.gg-catmenu__mobar-logo img[data-gg-recolor="pending"] { visibility: hidden; }
.gg-catmenu__mobar-logo--text { padding: 0 8px; white-space: nowrap; }

/* Compact search sits behind the logo when expanded, in front when
   scrolled. No width/flex animation — only opacity changes, so the
   row never reflows. */
.gg-catmenu__mobar-search--compact {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s step-end;
}
.gg-catmenu__mobar[data-scrolled="true"] .gg-catmenu__mobar-logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.gg-catmenu__mobar[data-scrolled="true"] .gg-catmenu__mobar-search--compact {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Small delay so the outgoing element fades out first, then the
     incoming one fades in — avoids a brief frame of both at 50%. */
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
              visibility 0s;
}

@media (max-width: 991px) {
  .gg-catmenu__mobar { display: flex; }
  /* Body padding below the fixed bar is controlled via --gg-mobar-h that
     JS updates based on the actual height. Falls back to 110px for the
     two-row layout. */
  body {
    padding-top: var(--gg-mobar-h, 110px) !important;
  }
  /* Override the theme's .pad-top header spacing, which reserves room for
     the top nav strip (nav#top) that's hidden on mobile. */
  header.pad-top {
    padding-top: 0 !important;
  }
}

.gg-catmenu__mobar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.gg-catmenu__mobar-btn:hover,
.gg-catmenu__mobar-btn:focus-visible,
.gg-catmenu__mobar-btn:active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
  text-decoration: none;
}

.gg-catmenu__mobar-btn--catalog {
  background: #ff9966;
  color: #fff;
}
.gg-catmenu__mobar-btn--catalog:hover,
.gg-catmenu__mobar-btn--catalog:focus-visible {
  background: #ed8551;
  color: #fff;
}

.gg-catmenu__mobar-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef2f3c;
  box-shadow: 0 0 0 2px #ff9966;
}

.gg-catmenu__mobar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #122538;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #122538;
}

.gg-catmenu__mobar-badge--accent {
  background: #ff9966;
  box-shadow: 0 0 0 2px #122538;
}
.gg-catmenu__mobar-badge[hidden] { display: none; }

/* Inline search field — takes all remaining width. White background
   in both idle and focused state so it reads clearly on the dark mobar. */
.gg-catmenu__mobar-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  height: 42px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.gg-catmenu__mobar-search:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.35);
}
.gg-catmenu__mobar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.gg-catmenu__mobar-search:focus-within .gg-catmenu__mobar-search-icon { color: #6b7b8c; }
.gg-catmenu__mobar-search input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 48px 0 38px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 14px;
  outline: none;
  border-radius: 10px;
  font-family: inherit;
}
.gg-catmenu__mobar-search input::placeholder { color: #9ca3af; }
.gg-catmenu__mobar-search-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #ff9966;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gg-catmenu__mobar-search-submit:hover { background: #ed8551; }

/* The theme's existing chat widget lives at z-index ~1000 and covers the
   drawer by default. Hide it whenever our drawer is open on mobile. */
body.gg-catmenu-drawer-open #conversationai-avatar,
body.gg-catmenu-drawer-open .chat-widget,
body.gg-catmenu-drawer-open [class*="chat"],
body.gg-catmenu-drawer-open [id*="chat"] {
  visibility: hidden !important;
}

.gg-catmenu {
  --gg-accent: #ff9966;
  --gg-accent-text: #ffffff;
  --gg-accent-dark: color-mix(in srgb, var(--gg-accent) 82%, #000 18%);
  --gg-radius: 8px;
  --gg-cols: 4;
  --gg-surface: #ffffff;
  --gg-ink: #1f2937;
  --gg-ink-soft: #4b5563;
  --gg-ink-muted: #9ca3af;
  --gg-line: #eef0f3;
  --gg-hover: #f5f7fb;
  --gg-shadow: 0 20px 60px -12px rgba(15, 23, 42, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.06);

  position: relative;
  width: auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gg-ink);
  /* Must sit above the dim (99999) so the catalog button stays sharp and
     un-blurred when the mega panel opens. Below the panel (100000) so the
     panel still renders over the button. */
  z-index: 100001;
}

/* ==================== TOP BAR ==================== */

.gg-catmenu__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  position: relative;
  z-index: 2;
}

/* Catalog trigger button — sized to fit the 54px navy bar */
.gg-catmenu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: var(--gg-radius);
  background: var(--gg-accent);
  color: var(--gg-accent-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--gg-accent) 50%, transparent);
  white-space: nowrap;
  min-width: 180px;
  max-width: 100%;
}

.gg-catmenu__toggle:hover,
.gg-catmenu__toggle:focus-visible {
  background: var(--gg-accent-dark);
  transform: translateY(-1px);
  outline: none;
}

.gg-catmenu__toggle:active {
  transform: translateY(0);
}

.gg-catmenu__toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 16px;
  height: 14px;
  position: relative;
}

.gg-catmenu__toggle-icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
  width: 100%;
}

.gg-catmenu[data-state="open"] .gg-catmenu__toggle-icon span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.gg-catmenu[data-state="open"] .gg-catmenu__toggle-icon span:nth-child(2) {
  opacity: 0;
}
.gg-catmenu[data-state="open"] .gg-catmenu__toggle-icon span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.gg-catmenu__toggle-arrow {
  transition: transform 0.2s ease;
  opacity: 0.85;
}

.gg-catmenu[data-state="open"] .gg-catmenu__toggle-arrow {
  transform: rotate(180deg);
}

/* Shortcuts — only show when there is room next to the button (>= 1600px
   viewport or when the slot itself is wide). Inside the narrow col-md-3
   slot they'd crowd the catalog button, so stay hidden by default. */
/* Quick links at the bottom of the desktop root rail — same rendering as
   a regular category row but without the icon / chevron / mega panel.
   They sit under the full category list and a thin top border separates
   them visually. Mirrors the mobile drawer layout so the extension feels
   consistent across breakpoints. */
.gg-catmenu__root--shortcut-first {
  margin-top: 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 4px;
}
/* Shortcut row only has two children (name + optional badge), so replace
   the three-column grid with a simple name-flex + badge-auto layout.
   Without this override the name falls into the 28px icon column and
   gets clipped, while the badge stretches across the 1fr slot. The
   base `.gg-catmenu__root-link` rule appears later in the file so we
   chain both classes here to raise specificity and win the cascade. */
.gg-catmenu__root-link.gg-catmenu__root-link--shortcut {
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.gg-catmenu__root-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ==================== DESKTOP PANEL ==================== */

.gg-catmenu__panel {
  /* Re-declare CSS vars here because the panel is reparented to <body>
     and no longer inherits them from .gg-catmenu. */
  --gg-accent: #ff9966;
  --gg-accent-text: #ffffff;
  --gg-accent-dark: #ed8551;
  --gg-radius: 8px;
  --gg-cols: 4;
  --gg-surface: #ffffff;
  --gg-ink: #1f2937;
  --gg-ink-soft: #4b5563;
  --gg-ink-muted: #9ca3af;
  --gg-line: #eef0f3;
  --gg-hover: #f5f7fb;
  --gg-shadow: 0 20px 60px -12px rgba(15, 23, 42, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.06);

  position: absolute;
  /* JS positions top/left after reparenting; these are only used as
     fallbacks if JS doesn't run. */
  top: 0;
  left: 0;
  width: min(1200px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  display: grid;
  /* Left rail holds the root category list — wide enough that the
     longest Ukrainian root name ("Інструменти та автотовари", ~196px
     natural) fits on one line without the ellipsis clip that appears
     at the earlier 290px width. Right column flexes. */
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr;
  height: min(640px, calc(100vh - 160px));
  background: var(--gg-surface);
  border-radius: 14px;
  box-shadow: var(--gg-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
  /* Must beat the theme's in-page stacks:
     .ukrcreditsticker z-index:99, .header-nav-links z-index:999. */
  z-index: 100000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gg-ink);
  box-sizing: border-box;
}
.gg-catmenu__panel,
.gg-catmenu__panel *,
.gg-catmenu__panel *::before,
.gg-catmenu__panel *::after { box-sizing: border-box; }

/* Page dim — full-viewport semi-transparent overlay visible when the
   desktop mega menu is open. Reparented to <body> on init. Sits just
   below the mega panel so dropdowns and stickers from the theme
   (.header-nav-links z-index:999, .ukrcreditsticker z-index:99) are
   still dimmed. Hidden below 992px since the mobile drawer has its own
   backdrop. */
.gg-catmenu__page-dim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 99999;
}

.gg-catmenu__page-dim.is-open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991px) {
  .gg-catmenu__page-dim { display: none !important; }
}

.gg-catmenu[data-state="open"] .gg-catmenu__panel,
.gg-catmenu__panel[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Left column: root categories — must have min-height: 0 in a grid cell
   so overflow-y: auto actually produces a scrollbar. */
.gg-catmenu__roots {
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fafbfd;
  border-right: 1px solid var(--gg-line);
  overflow-y: auto;
  min-height: 0;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #d5d9e0 transparent;
}

.gg-catmenu__roots::-webkit-scrollbar {
  width: 6px;
}
.gg-catmenu__roots::-webkit-scrollbar-thumb {
  background: #d5d9e0;
  border-radius: 3px;
}

.gg-catmenu__root {
  margin: 0;
}

.gg-catmenu__root-link {
  display: grid;
  grid-template-columns: 28px 1fr 12px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--gg-ink);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.gg-catmenu__root-link:hover,
.gg-catmenu__root-link:focus-visible,
.gg-catmenu__root-link.is-active {
  background: #fff;
  color: var(--gg-accent);
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.gg-catmenu__root-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--gg-ink-soft);
  flex-shrink: 0;
}

.gg-catmenu__root-icon img,
.gg-catmenu__root-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gg-catmenu__root-link:hover .gg-catmenu__root-icon,
.gg-catmenu__root-link.is-active .gg-catmenu__root-icon {
  color: var(--gg-accent);
}

.gg-catmenu__root-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-catmenu__root-chevron {
  color: var(--gg-ink-muted);
  transition: color 0.12s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.gg-catmenu__root-link:hover .gg-catmenu__root-chevron,
.gg-catmenu__root-link.is-active .gg-catmenu__root-chevron {
  color: var(--gg-accent);
  transform: translateX(2px);
}

/* Right mega panel */
.gg-catmenu__mega {
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.gg-catmenu__mega-content {
  position: absolute;
  inset: 0;
  padding: 24px 28px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d5d9e0 transparent;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.gg-catmenu__mega-content::-webkit-scrollbar {
  width: 6px;
}
.gg-catmenu__mega-content::-webkit-scrollbar-thumb {
  background: #d5d9e0;
  border-radius: 3px;
}

.gg-catmenu__mega-content:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gg-catmenu__mega-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gg-line);
}

.gg-catmenu__mega-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gg-ink);
  text-decoration: none;
  transition: color 0.12s ease;
}

.gg-catmenu__mega-title:hover,
.gg-catmenu__mega-title:focus-visible {
  color: var(--gg-accent);
  text-decoration: none;
  outline: none;
}

.gg-catmenu__mega-title svg {
  transition: transform 0.15s ease;
}

.gg-catmenu__mega-title:hover svg {
  transform: translateX(3px);
}

.gg-catmenu__mega-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gg-hover);
  color: var(--gg-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.gg-catmenu__mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--gg-cols), minmax(0, 1fr));
  gap: 22px 28px;
}

.gg-catmenu__group {
  min-width: 0;
}

.gg-catmenu__group-title {
  display: block;
  margin-bottom: 10px;
  color: var(--gg-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}

.gg-catmenu__group-title:hover,
.gg-catmenu__group-title:focus-visible {
  color: var(--gg-accent);
  text-decoration: none;
  outline: none;
}

.gg-catmenu__group-count {
  margin-left: 6px;
  color: var(--gg-ink-muted);
  font-weight: 400;
  font-size: 12px;
}

.gg-catmenu__group-list {
  margin: 0 0 8px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gg-catmenu__group-list a {
  display: block;
  padding: 3px 0;
  color: var(--gg-ink-soft);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.12s ease, padding-left 0.12s ease;
  line-height: 1.4;
}

.gg-catmenu__group-list a:hover,
.gg-catmenu__group-list a:focus-visible {
  color: var(--gg-accent);
  padding-left: 3px;
  text-decoration: none;
  outline: none;
}

.gg-catmenu__group-list small {
  margin-left: 4px;
  color: var(--gg-ink-muted);
  font-size: 11px;
}

.gg-catmenu__group-all {
  display: inline-block;
  margin-top: 2px;
  color: var(--gg-accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, transform 0.12s ease;
}

.gg-catmenu__group-all:hover {
  color: var(--gg-accent-dark);
  text-decoration: none;
  transform: translateX(2px);
}

.gg-catmenu__mega-empty {
  display: inline-block;
  padding: 10px 16px;
  color: var(--gg-accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

.gg-catmenu__mega-empty:hover {
  color: var(--gg-accent-dark);
  text-decoration: none;
}

/* ==================== MOBILE DRAWER ==================== */

.gg-catmenu__drawer {
  position: fixed;
  inset: 0;
  /* Use maximum safe z-index — above the chat widget (often 99999) and any
     third-party overlays. */
  z-index: 2147483000;
  pointer-events: none;
  visibility: hidden;
}

.gg-catmenu__drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.gg-catmenu__drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gg-catmenu__drawer.is-open .gg-catmenu__drawer-backdrop {
  opacity: 1;
}

.gg-catmenu__drawer-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(420px, 92vw);
  /* Explicit white fallback — var(--gg-surface) may not cascade when the
     drawer is reparented to document.body. */
  background: #ffffff;
  box-shadow: 0 0 40px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gg-catmenu__drawer.is-open .gg-catmenu__drawer-panel {
  transform: translateX(0);
}

.gg-catmenu__drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gg-line);
  min-height: 60px;
}

.gg-catmenu__drawer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 6px;
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}

/* Respect the HTML hidden attribute — CSS display would otherwise override
   it. This keeps the back button invisible at the root level of the stack. */
.gg-catmenu__drawer-back[hidden] { display: none !important; }

.gg-catmenu__drawer-back:hover {
  background: #f5f7fb;
}

.gg-catmenu__drawer-title {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--gg-ink);
  text-align: left;
}

.gg-catmenu__drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--gg-hover);
  color: var(--gg-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.gg-catmenu__drawer-close:hover {
  background: #e9ecf1;
  color: var(--gg-ink);
}

.gg-catmenu__drawer-search {
  position: relative;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gg-line);
}

.gg-catmenu__drawer-search svg {
  position: absolute;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  color: var(--gg-ink-muted);
  pointer-events: none;
}

.gg-catmenu__drawer-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--gg-line);
  border-radius: 10px;
  background: var(--gg-hover);
  color: var(--gg-ink);
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.gg-catmenu__drawer-search input:focus {
  border-color: var(--gg-accent);
  background: #fff;
}

.gg-catmenu__drawer-stack {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.gg-catmenu__drawer-level {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--gg-surface);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gg-catmenu__drawer-level[data-level="0"] {
  transform: translateX(0);
}

.gg-catmenu__drawer-level.is-active {
  transform: translateX(0);
}

.gg-catmenu__drawer-level.is-prev {
  transform: translateX(-20%);
  opacity: 0.4;
  pointer-events: none;
}

.gg-catmenu__drawer-list {
  margin: 0;
  padding: 6px 8px;
  list-style: none;
}

.gg-catmenu__drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--gg-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.gg-catmenu__drawer-item:hover,
.gg-catmenu__drawer-item:active {
  background: var(--gg-hover);
  text-decoration: none;
}

.gg-catmenu__drawer-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gg-ink-soft);
}

.gg-catmenu__drawer-icon img,
.gg-catmenu__drawer-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gg-catmenu__drawer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gg-catmenu__drawer-chev {
  color: var(--gg-ink-muted);
  flex-shrink: 0;
}

/* "View all in X" link at the bottom of a drawer level — matches desktop
   "Переглянути всі" styling: accent orange text with a right arrow. Placed
   after the subcategory list so users scroll through what's available
   before landing on the fallback "view all" action. */
.gg-catmenu__drawer-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px 18px;
  margin: 0;
  color: #ff9966;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.12s ease, transform 0.12s ease;
}

.gg-catmenu__drawer-all svg {
  transition: transform 0.15s ease;
}

.gg-catmenu__drawer-all:hover,
.gg-catmenu__drawer-all:focus-visible {
  color: #ed8551;
  text-decoration: none;
}
.gg-catmenu__drawer-all:hover svg {
  transform: translateX(2px);
}

/* Account / Compare / Wishlist tiles at top of the root drawer.
   3-column grid with icon on top, label below. */
.gg-catmenu__drawer-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px 8px;
}
.gg-catmenu__drawer-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border-radius: 14px;
  background: #f5f7fb;
  color: #1f2937;
  text-decoration: none;
  transition: background 0.12s ease, transform 0.12s ease;
  text-align: center;
  min-height: 80px;
}
.gg-catmenu__drawer-tile:hover,
.gg-catmenu__drawer-tile:focus-visible,
.gg-catmenu__drawer-tile:active {
  background: #e9ecf1;
  color: #1f2937;
  text-decoration: none;
  outline: none;
}
.gg-catmenu__drawer-tile:active { transform: scale(0.97); }
.gg-catmenu__drawer-tile-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #4b5563;
}
.gg-catmenu__drawer-tile-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: #1f2937;
}
.gg-catmenu__drawer-tile-count {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff9966;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #f5f7fb;
}
.gg-catmenu__drawer-tile:hover .gg-catmenu__drawer-tile-count {
  box-shadow: 0 0 0 2px #e9ecf1;
}

/* "Каталог" section heading above the categories list */
.gg-catmenu__drawer-section {
  padding: 14px 22px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 991px) {
  .gg-catmenu__panel {
    display: none;
  }
  .gg-catmenu__shortcuts {
    display: none;
  }
}

@media (max-width: 767px) {
  .gg-catmenu__toggle {
    padding: 0 16px;
    font-size: 14px;
    height: 42px;
  }
  .gg-catmenu__toggle-arrow {
    display: none;
  }
}

@media (min-width: 992px) {
  .gg-catmenu__drawer {
    display: none !important;
  }
}

/* Keep open state from briefly flashing on initial load */
.gg-catmenu:not([data-gg-ready]) .gg-catmenu__panel {
  transition: none !important;
}

/* When header is fixed to top, lift panel above page content */
.fixed-top-header .gg-catmenu__panel,
body.active-fix .gg-catmenu__panel {
  position: fixed;
  top: auto;
}

/* Print: hide the whole menu */
@media print {
  .gg-catmenu { display: none !important; }
}

/* ==========================================================================
   Desktop sticky header bar
   The theme's .menu-header-box holds the horizontal row that contains
   our Catalog button, the search field, account/compare/wishlist and
   cart. On desktop we pin it to the top of the viewport as the user
   scrolls so primary navigation + search stay one glance away.
   The native <header> above it (top links strip, banner, logos row) is
   allowed to scroll off naturally.
   ========================================================================== */
@media (min-width: 992px) {
  .menu-header-box.h-type-2,
  .menu-header-box.hide-box-menu {
    position: sticky;
    top: 0;
    /* Sit ABOVE the page dim (z: 99999) so the action row stays fully
       readable when the mega menu opens — catalog button, search,
       account/compare/wishlist and cart should not blur with the rest
       of the page. The mega panel (z: 100000) still opens above the
       header because it's rendered as a separate layer off-body. */
    z-index: 100001;
    /* Paint the navy on the OUTER wrapper, not the inner .row — the
       inner row is constrained to .container width (~1170px) and was
       leaving bright white gutters on either side while stuck. Moving
       the colour up to the full-width box lets the bar span the whole
       viewport cleanly. */
    background: #122538;
    box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.35);
  }

  /* Search pill — the theme fills the input + its submit-button
     "addon" with navy. Treat them as a single white pill with an
     orange submit button so the search reads as a clean, unified
     control on the dark header strip. */
  #searchtop #search.input-group,
  .search-top .input-group,
  .box-search .input-group {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    /* NOTE: no `overflow: hidden` here — the theme's autocomplete
       extension renders its suggestion list as an absolutely-positioned
       sibling inside this wrapper; clipping it killed live search. The
       rounded outer border is preserved with matching radii on the
       input (left-radius) and submit button (right-radius) below. */
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  #searchtop #search.input-group:focus-within,
  .search-top .input-group:focus-within,
  .box-search .input-group:focus-within {
    border-color: rgba(255, 153, 102, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.18);
  }
  #searchtop #search input.form-control.search-autocomplete,
  .search-top input.search-autocomplete,
  .box-search input.search-autocomplete {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 10px 0 0 10px !important;
  }
  #searchtop #search input.form-control.search-autocomplete::placeholder,
  .search-top input.search-autocomplete::placeholder,
  .box-search input.search-autocomplete::placeholder {
    color: #9ca3af;
  }
  #searchtop #search input.form-control.search-autocomplete:focus,
  .search-top input.search-autocomplete:focus,
  .box-search input.search-autocomplete:focus {
    outline: none !important;
  }
  /* Submit button (magnifying glass addon) — sits flush inside the
     white pill, orange brand accent so it reads as the action. */
  #searchtop .input-group .button_search,
  #searchtop .input-group .btn-search,
  .search-top .input-group .button_search,
  .search-top .input-group .btn-search,
  .box-search .input-group .button_search,
  .box-search .input-group .btn-search {
    background: #ffffff !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #searchtop .input-group .btn-search,
  .search-top .input-group .btn-search,
  .box-search .input-group .btn-search {
    background: var(--gg-accent, #ff9966) !important;
    width: 36px !important;
    height: 36px !important;
    margin: 1px 1px 1px 0;
    border-radius: 0 8px 8px 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease;
  }
  #searchtop .input-group .btn-search:hover,
  .search-top .input-group .btn-search:hover,
  .box-search .input-group .btn-search:hover {
    filter: brightness(0.95);
  }
  #searchtop .input-group .btn-search svg path,
  .search-top .input-group .btn-search svg path,
  .box-search .input-group .btn-search svg path {
    fill: #ffffff !important;
  }

  /* Catalog toggle — wider so the "Каталог товарів" label has room to
     breathe next to the hamburger icon without feeling cramped. */
  .gg-catmenu__toggle {
    min-width: 210px;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Guest account affordance: the theme pairs `.btn-account-menu` with a
     tiny bootstrap dropdown that only contains a second "Вхід" button —
     redundant with the `.login-show` handler already wired to the outer
     link. Suppress the dropdown ONLY in the guest variant (detected by
     the presence of `#button-login-popup` inside) so logged-in users
     still see their Account / Orders / Logout menu. */
  .box-account:has(#button-login-popup) .dropdown-menu.cs-dropdown {
    display: none !important;
  }

  /* Greeting → compact "Login" label, applied entirely in CSS so the
     swap is visible on first paint (no FOUC from a JS-driven rewrite).
     We hide the theme's two-line greeting (`.text-hello` + the body of
     `.name-auth`) and paint our own single word via `::before`. Scoped
     with `:has(#button-login-popup)` so it only affects guest users —
     the logged-in greeting ("Привіт, Іван") renders untouched. */
  .box-account:has(#button-login-popup) .text-hello { display: none; }
  /* Zero out the original text so the span collapses to just the
     pseudo-element's width — otherwise "Вхід" takes the footprint of
     the hidden "увійдіть до кабінету" phrase. */
  .box-account:has(#button-login-popup) .name-auth {
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }
  .box-account:has(#button-login-popup) .name-auth::before {
    display: inline-block;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
    text-decoration: none;
  }
  /* The parent anchor defaults to underlined link text; clear it so
     "Вхід" reads as a plain header label, not a hyperlink. The theme
     also draws a dashed `border-bottom` on `.name-auth` that reads as
     an underline — strip it too. */
  .box-account:has(#button-login-popup) .btn-account-menu,
  .box-account:has(#button-login-popup) .btn-account-menu:hover,
  .box-account:has(#button-login-popup) .btn-account-menu:focus {
    text-decoration: none;
  }
  .box-account:has(#button-login-popup) .name-auth {
    border-bottom: 0 !important;
  }
  html[lang|="uk"] .box-account:has(#button-login-popup) .name-auth::before,
  html[lang="ua"]  .box-account:has(#button-login-popup) .name-auth::before {
    content: 'Вхід';
  }
  html[lang|="en"] .box-account:has(#button-login-popup) .name-auth::before {
    content: 'Sign in';
  }
  html[lang|="ru"] .box-account:has(#button-login-popup) .name-auth::before {
    content: 'Вход';
  }
  /* Fallback when no recognised lang attribute is set — Ukrainian is the
     storefront default. */
  html:not([lang]) .box-account:has(#button-login-popup) .name-auth::before {
    content: 'Вхід';
  }
}

/* ==========================================================================
   Desktop "always open" mode
   When gg_catmenu_desktop_mode = always_open, the mega panel sits inline
   under the catalog slot as part of the page layout — no hover, no click,
   no page dim, no toggle button. Mobile drawer still behaves normally.
   ========================================================================== */
@media (min-width: 992px) {
  .gg-catmenu[data-desktop-mode="always_open"] .gg-catmenu__toggle {
    display: none;
  }
  .gg-catmenu[data-desktop-mode="always_open"] .gg-catmenu__bar {
    margin-bottom: 0;
  }
  .gg-catmenu[data-desktop-mode="always_open"] .gg-catmenu__page-dim,
  .gg-catmenu[data-desktop-mode="always_open"] ~ .gg-catmenu__page-dim,
  body > .gg-catmenu__page-dim[data-gg-always-open] {
    display: none !important;
  }
  /* Neutralise the floating panel styling — the panel should flow
     inline under the catalog slot as a normal block. */
  .gg-catmenu[data-desktop-mode="always_open"] .gg-catmenu__panel,
  body > .gg-catmenu__panel[data-gg-always-open] {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    max-width: 100%;
    width: 100%;
    left: auto;
    top: auto;
    pointer-events: auto;
    z-index: auto;
  }
}

/* ==========================================================================
   Mobile drawer — contact / support footer
   Pinned below the categories in the root drawer level. Contains:
     - Primary Підтримка (chat) CTA — opens AI Suite widget
     - Viber / Telegram messenger row
     - Phone list
     - Free-form working hours
   ========================================================================== */
/* Drawer contacts sits inside the root level, which itself has no
   horizontal padding — the sibling .drawer-list/.drawer-tiles each
   supply their own inset. Match that by padding inward to 16px so
   phones, the support button, and messenger pills align with every
   other drawer section instead of stretching edge to edge. */
.gg-catmenu__drawer-contacts {
  margin: 12px 0 0;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quick links rendered at the bottom of the drawer catalog as regular
   list rows (like categories) but without a chevron — they're leaf
   destinations, not drill-down groups. The accent badge sits at the
   right where the chevron would be. Visual separator from the category
   list above. */
.gg-catmenu__drawer-list--shortcuts {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.gg-catmenu__drawer-item--shortcut {
  justify-content: space-between;
}
.gg-catmenu__drawer-shortcut-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  margin-left: 8px;
}
.gg-catmenu__drawer-support {
  appearance: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  font: 600 14px/1.2 inherit;
  color: #ffffff;
  background: var(--gg-accent, #ff9966);
  border-radius: 11px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.gg-catmenu__drawer-support:hover { filter: brightness(0.95); }
.gg-catmenu__drawer-support:active { transform: translateY(1px); }
.gg-catmenu__drawer-support-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.gg-catmenu__drawer-support-icon svg { width: 20px; height: 20px; }

.gg-catmenu__drawer-msgr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gg-catmenu__drawer-msgr:has(> :only-child) { grid-template-columns: 1fr; }
.gg-catmenu__drawer-msgr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 11px;
  font: 600 12px/1.2 inherit;
  color: #ffffff;
  border-radius: 9px;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.gg-catmenu__drawer-msgr-btn:hover { filter: brightness(0.95); color: #ffffff; }
.gg-catmenu__drawer-msgr-btn svg { width: 18px; height: 18px; }
.gg-catmenu__drawer-msgr-btn--viber    { background: #7360f2; }
.gg-catmenu__drawer-msgr-btn--telegram { background: #29b6f6; }

/* Phone list: stacked card look, numbers front-and-centre. Each row is a
   pill with a muted accent icon — the number itself is the content, so we
   give it heavier weight, tabular numerals, and a subtle divider between
   rows so the list reads as "contact details", not "nav links". */
.gg-catmenu__drawer-phones {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.gg-catmenu__drawer-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: #0f172a;
  font: 700 17px/1.1 inherit;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.12s ease;
}
.gg-catmenu__drawer-phone + .gg-catmenu__drawer-phone {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.gg-catmenu__drawer-phone:hover,
.gg-catmenu__drawer-phone:focus { color: #0f172a; background: rgba(255, 153, 102, 0.08); }
.gg-catmenu__drawer-phone-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 153, 102, 0.14);
  color: var(--gg-accent, #ff9966);
  flex: 0 0 30px;
}
.gg-catmenu__drawer-phone-num { flex: 1 1 auto; }

.gg-catmenu__drawer-hours {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 2px 4px;
  color: #475569;
  font: 400 12.5px/1.45 inherit;
}
.gg-catmenu__drawer-hours svg { color: #94a3b8; flex: 0 0 auto; margin-top: 2px; }

.gg-catmenu__drawer-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  color: #334155;
  font: 500 13px/1.2 inherit;
  text-decoration: none;
}
.gg-catmenu__drawer-email:hover { color: var(--gg-accent, #ff9966); }
.gg-catmenu__drawer-email svg { color: #94a3b8; flex: 0 0 auto; }

/* Hiding .ocf-container via CSS can't win: the ocfilter stylesheet
   declares `#column-left-grid > .ocf-container.ocf-mobile-1 { display:
   block !important }` which includes an ID and therefore outranks any
   class-only rule we can write. The toggle is hidden via JS (inline
   style `display:none !important`) when the drawer opens — see
   gg_catmenu.js → openDrawer/closeDrawer. */

/* ==========================================================================
   Account drawer — slide-in info panel that opens from the account icon
   on mobile. Self-contained: no dependency on the legacy theme megamenu
   extension. Content is rendered server-side from our own controller
   (greeting, login / account links, language switcher, info pages,
   working hours).
   ========================================================================== */
.gg-catmenu__account-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  pointer-events: none;
  visibility: hidden;
}
.gg-catmenu__account-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.gg-catmenu__account-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.gg-catmenu__account-drawer.is-open .gg-catmenu__account-drawer-backdrop { opacity: 1; }
.gg-catmenu__account-drawer-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #ffffff;
  box-shadow: 8px 0 24px -8px rgba(15, 23, 42, 0.25);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gg-catmenu__account-drawer.is-open .gg-catmenu__account-drawer-panel {
  transform: translateX(0);
}

.gg-catmenu__account-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #0f172a;
  flex: 0 0 auto;
}
.gg-catmenu__account-drawer-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}
.gg-catmenu__account-drawer-close {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gg-catmenu__account-drawer-close:hover { background: rgba(15, 23, 42, 0.06); }

.gg-catmenu__account-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gg-catmenu__account-greeting {
  font-weight: 700;
  color: #0f172a;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 10px;
}
.gg-catmenu__account-login {
  display: block;
  padding: 12px 16px;
  text-align: center;
  background: var(--gg-accent, #ff9966);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.gg-catmenu__account-login:hover { filter: brightness(0.95); color: #ffffff; }

.gg-catmenu__account-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gg-catmenu__account-links li { margin: 0; }
.gg-catmenu__account-links a {
  display: block;
  padding: 11px 12px;
  color: #334155;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: background 0.12s ease, color 0.12s ease;
}
.gg-catmenu__account-links a:hover {
  background: rgba(255, 153, 102, 0.08);
  color: var(--gg-accent, #ff9966);
}
.gg-catmenu__account-links li:last-child a { border-bottom: 0; }

.gg-catmenu__account-section {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 12px;
}
.gg-catmenu__account-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.gg-catmenu__account-langs {
  display: inline-flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  padding: 3px;
}
.gg-catmenu__account-lang {
  appearance: none;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.gg-catmenu__account-lang:hover,
.gg-catmenu__account-lang:focus { color: #0f172a; text-decoration: none; }
.gg-catmenu__account-lang.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  pointer-events: none;
}

.gg-catmenu__account-info-links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.gg-catmenu__account-info-links li { margin: 0; }
.gg-catmenu__account-info-links a {
  display: block;
  padding: 11px 12px;
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.gg-catmenu__account-info-links a:hover {
  background: rgba(255, 153, 102, 0.06);
  color: var(--gg-accent, #ff9966);
}
.gg-catmenu__account-info-links li:last-child a { border-bottom: 0; }

.gg-catmenu__account-hours {
  padding-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

/* ==========================================================================
   Hide the legacy theme header (logo + phone dropdown) on mobile —
   both are duplicated by our custom mobar / drawer footer, and removing
   them prevents the mobile page from starting with a redundant block.
   ========================================================================== */
@media (max-width: 991px) {
  body #logo,
  body .logo-top,
  body .phone-box,
  body #phone { display: none !important; }
}

/* ==========================================================================
   Product page tabs — quiet tertiary navigation so the add-to-cart CTA
   stays the focal point. Sits in a clean white bar that pins under the
   mobile header while the user scrolls through long descriptions.
   ========================================================================== */
.product-page-tabs .tabs__header {
  position: sticky;
  top: var(--gg-mobar-h, 52px);
  /* Theme credit stickers (.ukrcreditsticker) ship at z-index: 99 and
     float over page content, so our tabs must sit above that to stay
     readable while pinned. The mobile bar sits even higher (600). */
  z-index: 120;
  margin: 0;
  padding: 0 0 1px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Kill the theme's decorative corner shadow pseudos that no longer match
   the new bar colour and left a light artefact on the rounded corners. */
.product-page-tabs .tabs__header::before,
.product-page-tabs .tabs__header::after { display: none !important; }

.product-page-tabs .tabs__header__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
  border-radius: 0;
}
.product-page-tabs .tabs__header__scroll::-webkit-scrollbar { display: none; }

.product-page-tabs .my-tabs,
.product-page-tabs ul.nav.nav-tabs.my-tabs {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 0;
  white-space: nowrap;
}
.product-page-tabs .my-tabs > li {
  float: none;
  margin: 0;
  display: inline-block;
}
/* Tabs are tertiary navigation — keep them quiet so the add-to-cart CTA
   stays the visual focus. Light text, normal weight, underline on active. */
.product-page-tabs .my-tabs > li > a {
  display: inline-block;
  padding: 12px 16px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #64748b;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease;
}
.product-page-tabs .my-tabs > li > a:hover,
.product-page-tabs .my-tabs > li > a:focus {
  color: #0f172a;
  background: transparent !important;
  border: 0;
}
.product-page-tabs .my-tabs > li.active > a,
.product-page-tabs .my-tabs > li.active > a:focus,
.product-page-tabs .my-tabs > li.active > a:hover {
  color: #0f172a !important;
  background: transparent !important;
  box-shadow: none;
  border: 0;
}
.product-page-tabs .my-tabs > li.active > a::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: var(--gg-accent, #ff9966);
  border-radius: 2px 2px 0 0;
}
/* The theme's animated active line fights our underline; hide it. */
.product-page-tabs .tabs__active_line { display: none !important; }

@media (min-width: 992px) {
  .product-page-tabs .tabs__header { top: 0; }
  .product-page-tabs .my-tabs > li > a { padding: 13px 20px; font-size: 15px; }
}

/* Empty-title fix: the theme ships with an empty <h1 class="h1-prod-name">
   on some product routes (heading_title is never populated by the OCMOD
   chain). Our JS fills it from breadcrumb text — while empty, hide the
   collapsed element so it doesn't leave a stray margin behind the sticky
   tabs. */
.h1-prod-name:empty { display: none; }
.h1-prod-name {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 14px;
}
@media (max-width: 991px) {
  .h1-prod-name { font-size: 19px; margin: 4px 0 10px; }
}

/* ==========================================================================
   Search autocomplete dropdown inside our mobile search forms.
   The theme's autocompleteSerach plugin renders a `<ul.dropdown-menu>`
   as a direct child of the form and positions it absolutely with its
   own `top/left` inline styles. On desktop the form wrapper is wide
   enough that the default styling works; on our 220px compact mobar
   or 370px expanded row the result rows got truncated and stacked
   awkwardly. Override the dropdown to break out to the viewport edges
   and tighten the product-row layout for narrow screens.
   ========================================================================== */
.gg-catmenu__mobar-search > .dropdown-menu {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  top: auto !important;
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  margin: 6px 0 0;
  padding: 8px 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.35);
  font-size: 14px;
  max-height: calc(100vh - var(--gg-mobar-h, 110px) - 24px);
  overflow-y: auto;
  z-index: 700;
}
/* Positioned relative to the mobar itself so it sits just below our
   header regardless of which inner form it belongs to. */
.gg-catmenu__mobar[data-scrolled="false"] .gg-catmenu__mobar-search > .dropdown-menu { top: var(--gg-mobar-h, 110px) !important; }
.gg-catmenu__mobar[data-scrolled="true"]  .gg-catmenu__mobar-search > .dropdown-menu { top: var(--gg-mobar-h, 58px)  !important; }

.gg-catmenu__mobar-search > .dropdown-menu > li { padding: 0; }
.gg-catmenu__mobar-search > .dropdown-menu > li > a {
  display: block;
  padding: 4px 10px;
  color: #0f172a;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  white-space: normal;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion.product {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.gg-catmenu__mobar-search > .dropdown-menu > li:last-child .search-suggestion {
  border-bottom: 0;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .left {
  flex: 0 0 52px;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .center {
  flex: 1 1 auto;
  min-width: 0;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .model {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .stock {
  font-size: 11px;
  margin-top: 2px;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .stock.in-stock .value  { color: #16a34a; }
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .stock.out-stock .value { color: #94a3b8; }
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .right { flex: 0 0 auto; text-align: right; }
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .price .price-old {
  font-size: 11px; color: #94a3b8; text-decoration: line-through;
}
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .price .price-new,
.gg-catmenu__mobar-search > .dropdown-menu .search-suggestion .price .price-base {
  font-size: 14px; font-weight: 700; color: var(--gg-accent, #ff9966); white-space: nowrap;
}

/* Section header rows ("Товари", "Фільтр категорій"). */
.gg-catmenu__mobar-search > .dropdown-menu > li.disabled .search-suggestion .title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding: 6px 0 4px;
}

/* Category-filter thumbnail row is inline-style; pack them in a grid. */
.gg-catmenu__mobar-search > .dropdown-menu > li.inline {
  display: inline-block;
  width: auto;
  margin: 4px;
}
.gg-catmenu__mobar-search > .dropdown-menu > li.inline .search-suggestion.category_filter img {
  width: 44px; height: 44px; border-radius: 8px; object-fit: contain;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* "Show all results" row */
.gg-catmenu__mobar-search > .dropdown-menu > li.more .more {
  text-align: center;
  padding: 8px 0;
  color: var(--gg-accent, #ff9966);
  font-weight: 600;
  font-size: 13px;
}

/* ==========================================================================
   Footer payment logos (injected by JS into .fpayment).
   The theme's default images sat at 45x35 and were visibly blurry. Our
   replacements are crisp SVGs — we size them generously and let them
   render on their own rounded-card background so they hold up against
   the dark footer.
   ========================================================================== */
.fpayment ul.gg-payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fpayment ul.gg-payments-list > li { margin: 0; padding: 0; line-height: 0; }
.fpayment ul.gg-payments-list > li > a,
.fpayment ul.gg-payments-list > li { display: inline-block; }
.fpayment ul.gg-payments-list img {
  display: block;
  width: auto;
  height: 28px;
  max-width: 64px;
  object-fit: contain;
  padding: 4px 6px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}
.fpayment ul.gg-payments-list img:hover { transform: translateY(-1px); }
/* Wordmark-heavy logos (LiqPay, plata) have wide aspect ratios — give
   them more room so they stay legible. */
.fpayment ul.gg-payments-list > li.gg-payments-item--liqpay img,
.fpayment ul.gg-payments-list > li.gg-payments-item--plata_mono img { max-width: 90px; }
@media (max-width: 767px) {
  .fpayment ul.gg-payments-list img { height: 26px; max-width: 58px; }
  .fpayment ul.gg-payments-list > li.gg-payments-item--liqpay img,
  .fpayment ul.gg-payments-list > li.gg-payments-item--plata_mono img { max-width: 82px; }
}

/* While our logos are being moved in, keep the old set hidden to avoid a
   visible flash. We can't hide `.fpayment` itself (the JS needs it as a
   mount point) so we hide any <li> that doesn't belong to our list. */
.fpayment ul:not(.gg-payments-list) { visibility: hidden; }