/* ============================================================================
   Storefront menus (menu-builder): dropdowns, fly-outs, mega panels, the mobile
   accordion and the footer link lists. Loaded after shop.css, uses only the
   storefront tokens (--sf-*). Behaviour: public/shop-menu.js.
   Closed panels are display:none so the pictures inside them are not fetched
   until a panel opens (they are loading="lazy").
   ============================================================================ */

/* ── link pieces ───────────────────────────────────────────────────────── */
.sf-menu__icon{display:inline-grid;place-items:center;flex:none;color:var(--sf-muted)}
.sf-menu__icon svg{width:18px;height:18px}
.sf-menu__text{min-width:0;overflow-wrap:anywhere}
.sf-menu__badge{
  display:inline-block;margin-inline-start:8px;padding:1px 7px;border-radius:999px;font-size:.66rem;font-weight:700;line-height:1.5;
  letter-spacing:.05em;text-transform:uppercase;background:var(--sf-accent);color:var(--sf-accent-ink);white-space:nowrap;vertical-align:middle;
}
.sf-menu__heading{font-weight:600;color:var(--sf-muted);cursor:default}
button.sf-menu__headbtn{border:0;background:none;font:inherit;font-weight:600;color:var(--sf-text);cursor:pointer;text-align:start;justify-content:space-between;gap:10px}
.sf-menu__chev{display:inline-grid;place-items:center;flex:none}
.sf-menu__chev svg{width:14px;height:14px;transform:rotate(-90deg);transition:transform .2s}
.sf-menu__item.is-open>.sf-menu__headbtn .sf-menu__chev svg{transform:rotate(90deg)}
button.sf-menu__headbtn:hover{background:var(--sf-accent-soft);color:var(--sf-accent-text)}
.sf-menu__desc{display:block;padding:0 12px 6px;color:var(--sf-muted);font-size:.82rem;line-height:1.4}

/* ── top-level bar ─────────────────────────────────────────────────────── */
/* the legacy `.sf-nav a:hover` grey fill of app.css lowers the contrast of the accent text on it: the underline already marks hover */
.sf-body .sf-nav a.sf-nav__link:hover,.sf-body .sf-nav a.sf-nav__link:focus-visible{background:none}
.sf-body .sf-nav button.sf-nav__link:hover{background:none}
.sf-nav__item.has-mega{position:static}
.sf-nav__link{gap:8px}
button.sf-nav__link{border:0;background:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:500;color:var(--sf-text);gap:6px}
html[data-heading="upper"] button.sf-nav__link{text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:600}
button.sf-nav__label:hover,.sf-nav__item.is-open>button.sf-nav__label{color:var(--sf-accent-text)}
.sf-nav__chev{display:inline-grid;place-items:center}
.sf-nav__chev svg{width:14px;height:14px;transition:transform .2s}
.sf-nav__item.is-open>.sf-nav__label .sf-nav__chev svg{transform:rotate(180deg)}
.sf-nav__item.is-current>.sf-nav__link::after{transform:scaleX(1)}
.sf-nav__item.has-panel>.sf-nav__toggle{margin-inline-start:-14px}
.sf-nav__item.is-open>.sf-nav__toggle svg{transform:rotate(180deg)}

/* ── panels (dropdown, fly-out, mega) ──────────────────────────────────── */
.sf-menu__panel{
  display:none;position:absolute;z-index:70;margin:0;list-style:none;
  background:var(--sf-surface);border:1px solid var(--sf-border);box-shadow:var(--sf-shadow);
}
.sf-nav__item.is-open>.sf-menu__panel,.sf-menu__item.is-open>.sf-menu__panel{display:block;animation:sf-menu-in .15s var(--sf-ease,ease-out)}
@keyframes sf-menu-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* a dropdown: under its item, right-aligned when it would leave the screen (the script sets data-align="end") */
.sf-menu__drop{inset-inline-start:0;top:100%;min-width:240px;max-width:min(340px,92vw);padding:8px;border-radius:var(--sf-radius)}
.sf-menu__drop[data-align="end"]{inset-inline-start:auto;inset-inline-end:0}
.sf-menu__drop::before,.sf-mega::before{content:"";position:absolute;inset-inline:0;top:-14px;height:14px} /* keeps the pointer inside the item while it travels to the panel */
.sf-menu__item{position:relative;display:flex;flex-wrap:wrap;align-items:center}
.sf-menu__panel .sf-menu__item>.sf-menu__link,.sf-menu__panel .sf-mega__links .sf-menu__link,.sf-body .sf-menu__panel .sf-menu__item>a{
  flex:1 1 0;display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:calc(var(--sf-radius) - 2px);color:var(--sf-text);font-size:.93rem;
}
.sf-body .sf-menu__panel a.sf-menu__link:hover,.sf-body .sf-menu__panel .sf-menu__item>a:hover{background:var(--sf-accent-soft);color:var(--sf-accent-text);text-decoration:none}
.sf-body .sf-menu__panel a[aria-current="page"]{color:var(--sf-accent-text);font-weight:600}
.sf-menu__item .sf-menu__desc{flex:0 0 100%;padding-top:0;margin-top:-6px}
.sf-menu__toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--sf-muted);cursor:pointer;border-radius:6px}
.sf-menu__toggle svg{width:14px;height:14px;transform:rotate(-90deg);transition:transform .2s}
.sf-menu__item.is-open>.sf-menu__toggle svg{transform:rotate(90deg)}
.sf-menu__fly{inset-inline-start:100%;top:-9px;min-width:230px;padding:8px;border-radius:var(--sf-radius);margin-inline-start:2px}
.sf-menu__fly::before{content:"";position:absolute;top:0;bottom:0;inset-inline-end:100%;width:8px}
.sf-menu__fly[data-align="end"]{inset-inline-start:auto;inset-inline-end:100%;margin-inline:0 2px}
.sf-menu__fly[data-align="end"]::before{inset-inline-end:auto;inset-inline-start:100%}

/* the legacy `.sf-nav a` rule of app.css (padding, grey hover) must not reach into the panels */
.sf-body .sf-nav .sf-mega a{padding:0;border-radius:0;background:none}
.sf-body .sf-nav .sf-mega a:hover{background:none}
.sf-body .sf-nav .sf-mega .sf-mega__links a{padding:0 12px 0 0;display:flex;align-items:center;min-height:40px;color:var(--sf-text);font-size:.93rem}
.sf-body .sf-nav .sf-mega .sf-mega__links a:hover{color:var(--sf-accent-text);text-decoration:underline;text-underline-offset:3px}
.sf-body .sf-nav .sf-mega a.sf-mega__head{padding:0;min-height:36px}
.sf-body .sf-nav .sf-mega a.sf-mega__thumb{display:block}
.sf-body .sf-nav .sf-mega a.sf-mega__product{padding:0;display:grid;color:var(--sf-text)}
.sf-body .sf-nav .sf-menu__drop a:hover{background:var(--sf-accent-soft)}

/* a mega menu: full width under the header, columns + an aside for a picture and a featured product */
.sf-mega{inset-inline:0;top:100%;border-radius:0 0 var(--sf-radius) var(--sf-radius);border-inline:0;max-height:calc(100vh - var(--sf-header-h) - 24px);overflow:auto;overscroll-behavior:contain}
.sf-mega__inner{display:grid;gap:28px 40px;padding-block:28px 32px}
.sf-mega__inner.has-aside{grid-template-columns:minmax(0,1fr) minmax(200px,280px)}
.sf-mega__cols{display:grid;grid-template-columns:repeat(var(--sf-mega-cols,4),minmax(0,1fr));gap:24px 32px;margin:0;padding:0;list-style:none;align-content:start}
.sf-mega__col{min-width:0}
.sf-mega__thumb{display:block;aspect-ratio:4/3;margin-bottom:12px;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-accent-soft)}
.sf-mega__img{display:block;width:100%;height:100%;object-fit:cover}
.sf-body .sf-mega__head{
  display:flex;align-items:center;gap:8px;min-height:36px;margin-bottom:4px;font-family:var(--sf-display);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sf-text);
}
.sf-body a.sf-mega__head:hover{color:var(--sf-accent-text);text-decoration:none}
.sf-mega__desc{margin:0 0 8px;color:var(--sf-muted);font-size:.85rem;line-height:1.45}
.sf-mega__links{margin:0;padding:0;list-style:none}
.sf-mega__links li{display:block}
.sf-mega__aside{display:grid;gap:16px;align-content:start;padding-inline-start:32px;border-inline-start:1px solid var(--sf-border)}
.sf-mega__promo{border-radius:var(--sf-radius);overflow:hidden}
.sf-mega__promo a{display:block;aspect-ratio:4/3;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-accent-soft)}
.sf-mega__promo .sf-mega__img{height:auto;aspect-ratio:4/3}
.sf-mega__promo .sf-mega__desc{margin-top:8px}
.sf-mega__product{display:grid;gap:8px;color:var(--sf-text)}
.sf-body .sf-mega__product{color:var(--sf-text)}
.sf-body a.sf-mega__product:hover{text-decoration:none}
.sf-body a.sf-mega__product:hover .sf-mega__pname{color:var(--sf-accent-text)}
.sf-mega__pimg{display:block;aspect-ratio:4/3;border-radius:var(--sf-radius);overflow:hidden;background:var(--sf-accent-soft);position:relative}
.sf-mega__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sf-display);font-weight:700;font-size:2.4rem;color:var(--sf-accent-text);opacity:.45}
.sf-mega__pname{font-weight:600;font-size:.95rem;line-height:1.3}
.sf-mega__pprice{font-size:.92rem;color:var(--sf-muted)}
.sf-mega__pprice .sf-price--sale{color:var(--sf-accent-text);font-weight:600}

/* no script: hover and keyboard focus still reveal the first level */
html:not(.sf-js) .sf-nav__item.has-panel>.sf-menu__panel{display:none}
html:not(.sf-js) .sf-nav__toggle[data-menu-toggle]{display:none}

/* ── mobile accordion (inside the drawer, three levels) ─────────────────── */
.sf-acc__row>a.sf-acc__main{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;font-size:1.05rem;font-weight:500;color:var(--sf-text)}
.sf-acc__toggle--wide{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;font:inherit;font-size:1.05rem;font-weight:500;color:var(--sf-text);text-align:start}
.sf-acc__toggle--wide svg{flex:none;width:18px;height:18px;margin-inline-end:17px;transition:transform .2s}
.sf-acc__toggle--wide[aria-expanded="true"] svg{transform:rotate(180deg)}
.sf-acc__main{display:inline-flex;align-items:center;gap:10px;min-width:0}
.sf-acc__sub .sf-acc__sub{padding-inline-start:12px;border-inline-start:2px solid var(--sf-border);margin-inline-start:6px}
.sf-body .sf-acc__sub .sf-acc__row>a.sf-acc__main{min-height:44px;font-size:.98rem;font-weight:500;color:var(--sf-text)}
.sf-acc__sub .sf-acc__toggle{width:44px;height:44px}
.sf-acc__sub .sf-acc__toggle--wide{min-height:44px;font-size:.98rem;width:100%}
.sf-body .sf-acc__sub .sf-acc__leaf{min-height:44px;display:flex;align-items:center;gap:10px;color:var(--sf-muted);font-size:.98rem}
.sf-body .sf-acc__sub .sf-acc__leaf:hover{color:var(--sf-accent-text)}
.sf-acc__link{gap:10px}
.sf-acc li.is-current>.sf-acc__row>a,.sf-acc li.is-current>.sf-acc__link{color:var(--sf-accent-text)}
.sf-acc__feature{padding:6px 0 4px;list-style:none}
.sf-body .sf-acc__sub .sf-acc__feature a.sf-mega__product{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:2px;min-height:0;color:var(--sf-text)}
.sf-acc__feature .sf-mega__pimg{grid-row:1/3;width:72px}
.sf-acc__feature .sf-mega__img{height:100%}
.sf-acc__feature .sf-mega__pname{grid-column:2;align-self:end}
.sf-acc__feature .sf-mega__pprice{grid-column:2;align-self:start}
.sf-body .sf-acc__sub .sf-acc__feature>a:not(.sf-mega__product){display:block;aspect-ratio:4/3;border-radius:var(--sf-radius);overflow:hidden}

/* ── footer and plain lists ─────────────────────────────────────────────── */
.sf-footer__col .sf-menu__plain,.sf-footer__col ul{margin:0;padding:0;list-style:none}
.sf-footer__col .sf-menu__nested{margin:0;padding-inline-start:14px}
.sf-footer__col .sf-menu__nested a{min-height:38px;color:var(--sf-muted);font-size:.9rem}
.sf-footer__col .sf-menu__heading{display:flex;align-items:center;min-height:38px}
.sf-menu__plain,.sf-menu__nested{list-style:none;margin:0;padding:0}
.sf-menu__plain .sf-menu__nested{padding-inline-start:14px}
.sf-menu__plain a.sf-menu__link{display:flex;align-items:center;gap:8px;min-height:44px}

@media (max-width:989px){
  .sf-nav .sf-menu__panel{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .sf-nav__item.is-open>.sf-menu__panel,.sf-menu__item.is-open>.sf-menu__panel{animation:none}
  .sf-nav__chev svg,.sf-menu__toggle svg,.sf-acc__toggle--wide svg{transition:none}
}