/* ==========================================================================
   OstuGrupp — Navigation
   Desktop category mega-menu + off-canvas mobile drawer.
   Uses the design tokens from main.css.
   ========================================================================== */

/* Header gets a higher stacking context so the panel/drawer overlay content. */
.site-header { position: relative; }
.site-header.is-sticky { z-index: 200; }

/* ==========================================================================
   Sticky header polish
   ========================================================================== */
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header.is-scrolled { box-shadow: 0 4px 24px -12px rgba(15,23,42,.28); background: rgba(255,255,255,.96); }
.site-header__inner { gap: 18px; min-width: 0; }
.site-branding { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
/* A custom logo image must never blow out the row height/width. */
.site-branding .custom-logo { max-height: 40px; width: auto; height: auto; display: block; }

/* Account / cart action icons (hidden labels collapse gracefully on small). */
.header-account__icon, .header-cart__icon { display: inline-flex; }
.header-account__icon svg, .header-cart__icon svg { display: block; }
.header-cart { position: relative; }

/* Account + cart are ICON-ONLY at every width so the header row always has room
   for the full primary menu (incl. "Kontakt") next to the wider brand logo. The
   text label is kept for screen readers (accessible-hidden, not display:none). */
.header-account__label, .header-cart__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.header-account, .header-cart { gap: 4px; }

/* Phones/tablets: bottom nav already shows Account + Cart, so hide the header
   text labels (accessible-hidden, not display:none, to keep them for SR). */
@media (max-width: 1023px) {
  .header-account__label, .header-cart__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* On phones the row is toggle + logo + cart (account is hidden). The image logo
     must NOT be shrunk/clipped (that showed only the first few letters), so the
     branding keeps its intrinsic width and the logo is instead sized down per
     breakpoint below to fit. Tighter gap keeps everything inside a 320px viewport. */
  .site-header__inner { gap: 12px; }
  .site-branding { flex-shrink: 0; min-width: 0; }
  .site-logo { flex-shrink: 0; }

  /* Icon-only account/cart: trim horizontal padding but keep the 44px target. */
  .header-account, .header-cart {
    padding: 0; width: 44px; min-width: 44px; justify-content: center; gap: 0;
  }
  /* The bottom nav + drawer both expose Account, so drop the redundant header
     account icon on phones — frees ~50px for the wordmark and de-clutters the
     row. The cart stays (it opens the mini-cart dropdown). */
  .header-account { display: none; }
  .site-header__actions { gap: 6px; flex-shrink: 0; }

  /* Cart count rides as a small badge on the icon so the button stays centred. */
  .header-cart__count {
    position: absolute; top: 4px; right: 2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    font-size: 11px; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9);
  }
}

/* Very small phones (~360px and below): claw back a little more room so the
   wordmark, toggle and both action icons still fit with no horizontal scroll. */
@media (max-width: 380px) {
  .site-header__inner { gap: 10px; }
  .site-header .site-logo__img { height: 24px; }
}

/* ==========================================================================
   Desktop mega-menu  (visible on >=1024px only)
   ========================================================================== */
.og-mega { display: none; position: relative; }

@media (min-width: 1024px) {
  .og-mega { display: block; flex-shrink: 0; }

  /* Keep the sticky row tidy on mid-desktops (1024–1280px): the primary menu
     may shrink, the search trims, and the actions stay pinned right — nothing
     wraps or spills. The wordmark + category trigger never shrink. */
  /* The primary menu keeps its full content width (never shrinks below it), so
     its last item ("Kontakt") can no longer spill under the search. The SEARCH is
     the flexible element that gives up width first. */
  .site-nav { flex-shrink: 0; }
  .site-nav__menu { flex-wrap: nowrap; }
  .site-nav__menu a { white-space: nowrap; }
  .header-search { flex-shrink: 1; min-width: 0; }
}

/* Mid-desktops (1024–1440px): with the wider brand logo the row is tight, so trim
   the logo, gaps and the search input so the FULL primary menu (incl. "Kontakt")
   plus the actions stay on one line. Account/cart are already icon-only (above).
   Full spacing returns at >=1441px. */
@media (min-width: 1024px) and (max-width: 1440px) {
  .site-header .site-logo__img, .site-header .custom-logo { height: 28px; }
  .site-header__inner { gap: 12px; }
  .site-nav__menu { gap: 14px; }
  .header-search input { min-width: 80px; }
}

.og-mega__trigger {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px;
  background: var(--slate-dark); color: #fff;
  border: 1px solid var(--slate-dark); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  letter-spacing: -.01em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.og-mega__trigger:hover { background: #0f172a; transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.og-mega__trigger[aria-expanded="true"] { background: var(--green); border-color: var(--green); box-shadow: var(--shadow-green); }

.og-mega__bars { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
.og-mega__bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.og-mega__chev { font-size: 11px; transition: transform .2s ease; }
.og-mega__trigger[aria-expanded="true"] .og-mega__chev { transform: rotate(180deg); }

/* Panel */
.og-mega__panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  /* The panel is anchored to the trigger's left edge, which sits ~210px in from
     the viewport (gutter + wordmark). Subtracting that offset (plus the right
     gutter) keeps the right edge inside the viewport on narrow desktops, so the
     flyout never causes horizontal scroll between 1024px and ~1380px. */
  width: min(1120px, calc(100vw - 264px));
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover); padding: 22px;
  opacity: 0; transform: translateY(-8px) scale(.99); transform-origin: top left;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.og-mega__panel[hidden] { display: none; }
.og-mega.is-open .og-mega__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* decorative top accent */
.og-mega__panel::before {
  content: ""; position: absolute; left: 22px; top: 0; height: 3px; width: 64px;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  border-radius: 0 0 4px 4px;
}

/* Two-column layout: category flyout (main) + promo/rail (aside). */
.og-mega__layout { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 24px; }
.og-mega__main { min-width: 0; display: flex; flex-direction: column; }
.og-mega__aside {
  min-width: 0; display: flex; flex-direction: column; gap: 16px;
  padding-left: 24px; border-left: 1px solid var(--border);
}

/* --- Two-pane flyout: parent rail (left) + child panes (right) --- */
.og-mega__flyout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0;
  align-items: stretch;
  /* A comfortable minimum so the flyout always feels premium, but capped to the
     viewport so a category with many children can never push the panel below the
     fold with no way to reach the bottom rows. */
  min-height: min(320px, 60vh);
  max-height: calc(100dvh - 160px);
}

/* Left rail: vertical list of parent categories. Bounded to the flyout height
   (which is itself capped to the viewport) so the rail scrolls rather than
   stretching the panel off-screen. */
.og-mega__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding-right: 18px; border-right: 1px solid var(--border);
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
}
.og-mega__nav-item { min-width: 0; }
.og-mega__parent {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--slate-dark);
  padding: 9px 10px 9px 12px; border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.og-mega__parent-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-mega__parent-chev { font-size: 16px; line-height: 1; color: var(--slate-300); flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
.og-mega__parent:hover,
.og-mega__parent:focus-visible { background: var(--muted); color: var(--green-dark); outline: none; }
.og-mega__nav-item.is-active .og-mega__parent {
  background: var(--muted); color: var(--green-dark);
  border-left-color: var(--green); font-weight: 700;
}
.og-mega__nav-item.is-active .og-mega__parent-chev,
.og-mega__parent:hover .og-mega__parent-chev { color: var(--green); transform: translateX(2px); }

.og-mega__count { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--slate-600); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.og-mega__nav-item.is-active .og-mega__count,
.og-mega__parent:hover .og-mega__count { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.2); color: var(--green-dark); }

/* Right area: one pane per parent; only the active/hovered one shows. The pane
   scrolls independently if a category has a very long child list, keeping the
   whole flyout inside the viewport on short desktop screens. */
.og-mega__panes { position: relative; min-width: 0; padding-left: 22px; overflow-y: auto; overscroll-behavior: contain; }
.og-mega__pane { display: none; }
.og-mega__pane[hidden] { display: none; }
/* Flex column so the "Vaata kõiki" link (margin-top:auto) pins to the bottom of
   the pane, and the children block can grow naturally above it. min-height:100%
   lets short categories still fill the flyout so the link sits at the bottom. */
.og-mega__pane.is-active { display: flex; flex-direction: column; min-height: 100%; animation: og-mega-fade .18s ease; }
@keyframes og-mega-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .og-mega__pane.is-active { animation: none; } }

.og-mega__pane-head {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--slate-dark);
  transition: color .15s ease, gap .15s ease;
}
.og-mega__pane-head:hover { color: var(--green-dark); gap: 11px; }
.og-mega__pane-arrow { font-size: 14px; color: var(--green); }
/* Now a real link (it used to be a <p> that asked to be clicked and could not be). */
.og-mega__pane-empty {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13.5px; font-weight: 600; color: var(--green); margin: 0; text-decoration: none;
}
.og-mega__pane-empty:hover { text-decoration: underline; }
.og-mega__pane-empty .og-mega__pane-arrow { transition: transform .2s ease; }
.og-mega__pane-empty:hover .og-mega__pane-arrow { transform: translateX(3px); }

.og-mega__children {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px;
  align-content: start;
}
@media (min-width: 1280px) { .og-mega__children { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.og-mega__children a {
  display: block; padding: 6px 8px; border-radius: 8px;
  font-size: 13.5px; color: var(--slate-600); transition: color .15s ease, background .15s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.og-mega__children a:hover,
.og-mega__children a:focus-visible { color: var(--green); background: var(--muted); outline: none; }

.og-mega__all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-weight: 700; font-size: 14px; color: var(--green-dark);
  border-top: 1px solid var(--border); padding-top: 16px; width: 100%;
  transition: gap .2s ease, color .2s ease;
}
.og-mega__all:hover { color: var(--green); gap: 12px; }

/* --- Aside: promo card --- */
.og-mega__promo {
  background: linear-gradient(160deg, var(--slate-dark), var(--slate));
  color: #fff; border-radius: var(--radius); padding: 18px 18px 20px;
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.og-mega__promo::after {
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(5,150,105,.55), transparent 70%); pointer-events: none;
}
.og-mega__promo-eyebrow {
  display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--green-bright); margin-bottom: 8px;
}
.og-mega__promo-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: #fff; margin-bottom: 6px; }
.og-mega__promo-text { font-size: 13px; line-height: 1.5; color: #cbd5e1; margin-bottom: 14px; }
.og-mega__promo-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 9px 14px; border-radius: 10px; box-shadow: var(--shadow-green);
  transition: background .2s ease, gap .2s ease, transform .2s ease; position: relative; z-index: 1;
}
.og-mega__promo-cta:hover { background: var(--green-dark); gap: 11px; transform: translateY(-1px); }

/* --- Aside: "Populaarsed tooted" mini-rail --- */
.og-mega__rail-heading {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--slate-500); margin-bottom: 10px;
}
.og-mega__rail-list { display: flex; flex-direction: column; gap: 8px; }
.og-mega__rail-item {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.og-mega__rail-item:hover { background: var(--muted); border-color: var(--border); box-shadow: var(--shadow-card); }
.og-mega__rail-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  background: var(--muted); border: 1px solid var(--border);
}
.og-mega__rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.og-mega__rail-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.og-mega__rail-name {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--slate-dark);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.og-mega__rail-item:hover .og-mega__rail-name { color: var(--green-dark); }
.og-mega__rail-price { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.og-mega__rail-price del { color: var(--slate-500); font-weight: 500; margin-right: 5px; }
.og-mega__rail-price ins { text-decoration: none; }

/* Drop the aside on narrower desktops so the category tree keeps full width. */
@media (max-width: 1119px) {
  .og-mega__layout { grid-template-columns: 1fr; }
  .og-mega__aside { display: none; }
}

/* ==========================================================================
   Mobile drawer toggle (hamburger)  — visible <1024px only
   ========================================================================== */
.og-drawer-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; order: -1;
  background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius);
  transition: background .2s ease, border-color .2s ease;
}
.og-drawer-toggle:hover { background: #e9eef5; border-color: var(--slate-300); }
.og-drawer-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.og-drawer-toggle__bars span { display: block; height: 2px; border-radius: 2px; background: var(--slate-dark); }

@media (min-width: 1024px) {
  .og-drawer-toggle { display: none; }
}

/* Legacy stub toggle (kept hidden — replaced by the drawer). */
.mobile-menu-toggle { display: none !important; }

/* ==========================================================================
   Off-canvas mobile drawer
   ========================================================================== */
.og-drawer-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(15,23,42,.55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s ease;
}
.og-drawer-backdrop[hidden] { display: none; }
.og-drawer-backdrop.is-visible { opacity: 1; }

.og-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
  width: min(360px, 86vw);
  background: #fff; box-shadow: 0 0 60px -10px rgba(15,23,42,.4);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.og-drawer[hidden] { display: none; }
.og-drawer.is-open { transform: translateX(0); }

@media (min-width: 1024px) {
  /* Drawer is mobile-only; never show on desktop even if state lingers. */
  .og-drawer, .og-drawer-backdrop { display: none !important; }
}

.og-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.og-drawer__brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; color: var(--slate-dark); }
.og-drawer__close {
  width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--slate); background: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius); transition: background .2s ease, color .2s ease;
}
.og-drawer__close:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* Search */
.og-drawer__search { display: flex; align-items: stretch; min-height: 46px; margin: 16px 20px 4px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.og-drawer__search:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.og-drawer__search input:focus-visible { outline: none; }
.og-drawer__search input { flex: 1; border: 0; background: transparent; padding: 12px 14px; min-width: 0; outline: none; font: inherit; }
.og-drawer__search button { background: var(--green); color: #fff; border: 0; width: 46px; align-self: stretch; font-size: 18px; }
.og-drawer__search button:hover { background: var(--green-dark); }

/* Nav blocks */
.og-drawer__nav { padding: 8px 20px 28px; }
.og-drawer__heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--slate-500); margin: 20px 0 8px; }

.og-drawer__cats, .og-drawer__links { display: flex; flex-direction: column; }

.og-drawer__cat-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.og-drawer__cat-row a { flex: 1; padding: 13px 4px; font-weight: 600; color: var(--slate-dark); }
.og-drawer__cat-row a:hover { color: var(--green); }
.og-drawer__expand {
  width: 44px; flex-shrink: 0; background: transparent; border: 0; color: var(--slate-500);
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, color .2s ease;
}
.og-drawer__expand[aria-expanded="true"] { transform: rotate(180deg); color: var(--green); }

.og-drawer__subcats { padding: 4px 0 6px 10px; border-bottom: 1px solid var(--border); background: var(--muted); margin: 0 -4px; }
.og-drawer__subcats[hidden] { display: none; }
.og-drawer__subcats li a { display: block; padding: 11px 14px; font-size: 14px; color: var(--slate-600); }
.og-drawer__subcats li a:hover { color: var(--green); }

.og-drawer__links li a { display: block; padding: 12px 4px; font-weight: 600; color: var(--slate-dark); border-bottom: 1px solid var(--border); }
.og-drawer__links li a:hover { color: var(--green); }

/* Lock scroll when the drawer is open. */
body.og-drawer-open { overflow: hidden; }