@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
/* ============================================================================
   MEGA MENU - storefront
   Desktop: hover / focus-within reveal, CSS Grid multi-column panels.
   Mobile (<=768px): accordion / slide-out, single column, JS-toggled.
   Progressive enhancement: desktop hover works with zero JS; JS only adds
   tap-toggle, aria sync, Esc-to-close and keyboard roving focus.
   ============================================================================ */

/* sticky so the bar pins to the top of the viewport once the announcement bar
   scrolls away. Sticky still establishes the containing block for the absolutely
   positioned .ss-mm-panel, and still works when foster-parented out of #Main.
   Solid background so page content doesn't show through the flex gaps while stuck. */
.ss-megamenu{ position:sticky; top:0; z-index:1000; font-size:15px; background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.08);
  font-family:'Poppins','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; }
.ss-mm-bar{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.ss-mm-item{ position:static; }                 /* static so full-width panels can span the bar */
.ss-mm-toggle{ display:none; }                  /* hamburger: hidden on desktop, shown on mobile below */

.ss-mm-trigger{
  display:inline-flex; align-items:center; gap:6px;
  padding:14px 18px; text-decoration:none;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  color:var(--mm-bar-fg,inherit); background:var(--mm-bar,transparent);
  border-bottom:2px solid transparent;
  border-radius:var(--mm-radius,0);            /* per-menu square (0) or rounded corners */
}
.ss-mm-item:hover > .ss-mm-trigger,
.ss-mm-item:focus-within > .ss-mm-trigger,
.ss-mm-trigger[aria-expanded="true"]{ border-bottom-color:currentColor; }

.ss-mm-caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.6; transition:transform .18s ease; }
.ss-mm-item:hover .ss-mm-caret,
.ss-mm-trigger[aria-expanded="true"] .ss-mm-caret{ transform:rotate(180deg); }

/* ---- Panel (desktop) ---- */
.ss-mm-panel{
  position:absolute; left:0; right:0; z-index:900; top:100%;
  background:var(--mm-bg,#fff); border:1px solid #e5e7eb; border-top:2px solid currentColor;
  border-radius:var(--mm-radius,0);
  box-shadow:0 18px 40px -12px rgba(15,23,42,.25);
  visibility:hidden; opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ss-mm-item:hover > .ss-mm-panel,
.ss-mm-item:focus-within > .ss-mm-panel,
.ss-mm-trigger[aria-expanded="true"] + .ss-mm-panel{
  visibility:visible; opacity:1; transform:none; transition-delay:0s;
}
.ss-mm-panel--container > .ss-mm-row{ max-width:1200px; margin:0 auto; }
/* Auto-width panels drop directly UNDER their trigger, not at the bar's left edge. Make the
   item the positioning context ONLY when it holds an auto panel (full/container panels stay
   nav-relative so they can span the whole bar). Unsupported :has() browsers keep the old
   behavior harmlessly. */
.ss-mm-item:has(> .ss-mm-panel--auto){ position:relative; }
/* "Auto (fit content)": the panel sizes to its content and GROWS with it - a single-column
   department stays compact, while a multi-column categories/taxonomy tree expands wide (up to
   a viewport-safe cap) instead of being crushed into a fixed 420px. */
.ss-mm-panel--auto{ left:0; right:auto; width:max-content; min-width:240px; max-width:min(960px,92vw); }

/* ---- Grid rows / columns ---- */
/* minmax(180px,1fr): every column keeps a readable floor so nested links never overlap; the
   panel (auto/container/full) widens to accommodate the columns rather than crushing them. */
.ss-mm-row{ display:grid; grid-template-columns:repeat(var(--cols,3), minmax(180px,1fr)); gap:28px; padding:24px 28px; }
.ss-mm-row + .ss-mm-row{ border-top:1px solid #f1f5f9; }
.ss-mm-col{ min-width:0; }

.ss-mm-heading{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mm-fg,#64748b); opacity:.85; }
/* Breathing room ABOVE a sub-category heading that follows earlier content, so a heading never
   sits flush against the product/link above it. Consecutive headings stay tighter. */
.ss-mm-heading:not(:first-child){ margin-top:20px; }
.ss-mm-heading + .ss-mm-heading{ margin-top:12px; }
.ss-mm-links + .ss-mm-links{ margin-top:12px; }
.ss-mm-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ss-mm-links a{ text-decoration:none; color:var(--mm-fg,#1e293b); }
.ss-mm-links a:hover,
.ss-mm-links a:focus{ text-decoration:underline; opacity:.8; }
/* Nested items (products/sub-departments shown UNDER a category) get a small arrow marker so
   the hierarchy stands out. Applied only to indented (level>0) lists via the --nested modifier. */
.ss-mm-links--nested > li > a{ position:relative; }
.ss-mm-links--nested > li > a::before{ content:"\203A"; margin-right:7px; color:var(--mm-fg,#94a3b8); opacity:.55; font-weight:600; }

/* "View all <Department>" cap link shown when a department has more items than fit */
.ss-mm-viewall{ display:inline-block; margin-top:10px; font-weight:600; text-decoration:none; color:var(--mm-fg,#1e293b); }
.ss-mm-viewall::after{ content:" \2192"; }
.ss-mm-viewall:hover,
.ss-mm-viewall:focus{ text-decoration:underline; opacity:.8; }

.ss-mm-promo{ display:block; }
.ss-mm-promo img{ width:100%; height:auto; display:block; border-radius:8px; }
.ss-mm-html{ font-size:14px; color:var(--mm-fg,#334155); }

@media (prefers-reduced-motion:reduce){
  .ss-mm-panel, .ss-mm-caret,
  .ss-mm-burger, .ss-mm-burger::before, .ss-mm-burger::after{ transition:none; }
}

/* ============================ Mobile ============================ */
@media (max-width:768px){
  /* Hamburger toggle: the whole bar collapses behind it; tap "Menu" to reveal the list. */
  .ss-mm-toggle{ display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    padding:15px 16px; border:0; background:transparent; color:var(--mm-bar-fg,inherit);
    font:600 15px/1 'Poppins','Segoe UI',system-ui,-apple-system,sans-serif; letter-spacing:.01em;
    cursor:pointer; text-align:left; }
  .ss-mm-burger{ position:relative; display:inline-block; width:22px; height:2px; background:currentColor;
    border-radius:2px; transition:background .15s ease; }
  .ss-mm-burger::before, .ss-mm-burger::after{ content:""; position:absolute; left:0; width:22px; height:2px;
    background:currentColor; border-radius:2px; transition:transform .2s ease, top .2s ease; }
  .ss-mm-burger::before{ top:-7px; }
  .ss-mm-burger::after{ top:7px; }
  .ss-megamenu.ss-mm-open .ss-mm-burger{ background:transparent; }        /* animate to an X when open */
  .ss-megamenu.ss-mm-open .ss-mm-burger::before{ top:0; transform:rotate(45deg); }
  .ss-megamenu.ss-mm-open .ss-mm-burger::after{ top:0; transform:rotate(-45deg); }

  .ss-mm-bar{ flex-direction:column; gap:0; display:none; }              /* hidden until the toggle opens it */
  .ss-megamenu.ss-mm-open .ss-mm-bar{ display:flex; }
  .ss-mm-item{ border-bottom:1px solid #eef2f7; }
  .ss-mm-trigger{ width:100%; justify-content:space-between; padding:14px 4px; }
  .ss-mm-item:hover > .ss-mm-trigger{ border-bottom-color:transparent; }

  /* On mobile hover must NOT open panels - only the JS-driven aria-expanded does */
  .ss-mm-panel{
    position:static; box-shadow:none; border:0; border-top:0;
    visibility:visible; opacity:1; transform:none; display:none;
    transition:none;
  }
  .ss-mm-item:hover > .ss-mm-panel,
  .ss-mm-item:focus-within > .ss-mm-panel{ display:none; }        /* override desktop rules */
  .ss-mm-trigger[aria-expanded="true"] + .ss-mm-panel{ display:block; }

  .ss-mm-row{ grid-template-columns:1fr; gap:14px; padding:6px 10px 16px; }
  .ss-mm-panel--auto{ width:auto; min-width:0; max-width:none; }
}