@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;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:14px; background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.08);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'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:14px; letter-spacing:normal;
  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; }

/* Current page: persistently highlight the top-level trigger this page belongs to (the "you are
   here" state). .ss-mm-trigger--current is added PER-PAGE by ss-megamenu.js - the bar HTML is cached
   site-wide, so the active state cannot be baked in server-side. Merchants can recolor via --mm-active. */
.ss-megamenu .ss-mm-trigger--current{ color:var(--mm-active,#e85d04); border-bottom-color:var(--mm-active,#e85d04); }
.ss-megamenu .ss-mm-trigger--current .ss-mm-caret{ opacity:.9; }

.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); }
/* Keep "Auto (fit content)" compact and matching the reference storefront: a 2-column panel of rich
   links (title + descriptive sub-line) sized each column to its longest UNWRAPPED description (~440px)
   and hit the 960px cap, so the dropdown was far wider than the reference's ~580px and, on a right-side
   trigger, ran past the viewport edge and widened the page. Cap each auto-panel column (~280px) so
   long descriptions WRAP to a second line instead of stretching the panel to the 960px cap; a
   2-column panel then lands near 640px. The panel opens RIGHTWARD from its trigger (left:0, the
   default - and the reference's lg:left-0) so it sits under the trigger, not shifted off to the left.
   Desktop only - mobile still collapses every row to one column (see the mobile block below). */
@media (min-width:769px){
  .ss-mm-panel--auto .ss-mm-row{ grid-template-columns:repeat(var(--cols,3), minmax(180px,280px)); }
}
/* On a NARROW desktop the rightmost trigger sits far enough right that a rightward panel would spill
   past the viewport's right edge (horizontal scrollbar). ONLY there, flip the last trigger's panel to
   open leftward. Wide screens - where the reference-style rightward panel fits - are left untouched. */
@media (min-width:769px) and (max-width:1366px){
  .ss-mm-item:last-child:has(> .ss-mm-panel--auto) > .ss-mm-panel--auto{ left:auto; right:0; }
}

/* ---- Grid rows / columns ---- */
/* minmax(180px,280px): every column keeps a readable 180px floor and is capped at 280px so the
   panel does not stretch columns to full width; it widens to fit the columns rather than crushing them. */
.ss-mm-row{ display:grid; grid-template-columns:repeat(var(--cols,3), minmax(180px,280px)); 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:11px; font-weight:700; letter-spacing:.12em; 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:6px; }
.ss-mm-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
/* Each link is a padded, rounded BLOCK: hovering highlights the whole option (like the
   reference site) and the vertical padding gives generous breathing room between options.
   The negative side margin lets the highlight reach the column edges while the link TEXT
   stays aligned with the column heading (padding-left cancels the negative margin). */
.ss-mm-links a{
  display:block; text-decoration:none; color:var(--mm-fg,#1e293b);
  font-size:13px;                 /* matches the reference panel links */
  padding:9px 12px; margin:0 -12px; border-radius:10px;
  transition:background-color .13s ease, color .13s ease;
}
.ss-mm-links a:hover,
.ss-mm-links a:focus{ background:var(--mm-hover,rgba(100,116,139,.13)); text-decoration:none; opacity:1; outline:none; }
/* Link with a descriptive sub-line: bold-ish title on top, smaller lighter text under it. */
.ss-mm-link--rich{ display:block; }
.ss-mm-link-t{ display:block; font-weight:600; font-size:12px; line-height:1.5; }
.ss-mm-link-d{ display:block; font-size:12px; line-height:1.35; margin-top:2px; color:var(--mm-fg,#64748b); opacity:.7; }
/* Small badge/pill next to a link title (e.g. "NEW"). Orange accent by default; a merchant
   theme can override via --mm-badge-bg / --mm-badge-fg. Sits inline on the title line. */
.ss-mm-badge{ display:inline-block; vertical-align:middle; margin-left:7px; padding:1px 7px;
  border-radius:999px; background:var(--mm-badge-bg,#e85d04); color:var(--mm-badge-fg,#fff);
  font-size:9px; font-weight:700; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
/* Optional per-link icon: a small rounded tile with the icon contained inside. The link becomes
   a flex row [icon][text]; a rich link (title + sub-line) aligns the icon to the title row. */
.ss-mm-links a.ss-mm-link--ico{ display:flex; align-items:center; gap:12px; }   /* beat .ss-mm-links a (0,1,1) */
.ss-mm-links a.ss-mm-link--rich.ss-mm-link--ico{ align-items:flex-start; }
.ss-mm-link-body{ display:flex; flex-direction:column; min-width:0; }
.ss-mm-ico{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; overflow:hidden; color:var(--mm-fg,#1e293b);
  display:inline-flex; align-items:center; justify-content:center; background:var(--mm-ico-bg,rgba(100,116,139,.12)); }
.ss-mm-ico img{ width:20px; height:20px; object-fit:contain; display:block; }
.ss-mm-ico i{ font-size:18px; line-height:1; }
/* Per-column background tint (reference look): padding + rounded corners wrap the column. */
.ss-mm-col--bg{ padding:16px 18px; border-radius:12px; }
/* 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; }
/* Images are CONTAINED so a large source file can never blow up the panel: never wider than
   the column, capped in height, aspect ratio preserved (medium default). Merchants pick a size
   preset (Small/Large/Full width) in the builder, stored as a class on the <img>. */
.ss-mm-promo img{ display:block; width:auto; max-width:100%; height:auto; max-height:200px; margin:0 auto; border-radius:8px; }
.ss-mm-promo img.mm-img-sm{ max-height:96px; }
.ss-mm-promo img.mm-img-lg{ max-height:300px; }
.ss-mm-promo img.mm-img-full{ width:100%; max-height:none; }
.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 14px/1 'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; letter-spacing:normal;
    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; }
}