/* ═══════════════════════════════════════════════════════════════════
   The category drawer — a drill-down (UI_UX §9.8 + CLAUDE.md §9.1).

   The accordion this replaces expanded a group in place and made an
   already-long list longer. This keeps ONE screen of choices visible:
   panels sit stacked on top of each other and slide sideways, so the
   customer's sense of "where am I" comes from depth, not from scroll
   position.

   The panel that is leaving does not just disappear — it drifts left and
   fades, which is the cue that it is still THERE, one step back. That
   parallax is the whole reason the gesture reads as "deeper" rather than
   "different page".
   ═══════════════════════════════════════════════════════════════════ */

/* LONGHANDS BEFORE THE SHORTHAND, here and in shop.css/overlays.css.
   `inset` is Safari 14.1+ and Chromium 87+; below that the declaration
   is dropped and a position:fixed/absolute box with no offsets falls
   back to shrink-to-fit at its static position. For .dnav-panel that
   collapsed the drill-down panels to nothing, and for this scrim it
   meant no backdrop at all AND no tap-outside-to-close. The shorthand
   still wins wherever it parses. */
.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:var(--scrim);
  z-index:calc(var(--z-drawer) - 1);opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s}
.backdrop.open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:var(--z-drawer);
  width:min(88vw,360px);max-width:100vw;
  background:var(--menu-bg);color:var(--menu-fg);
  transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
  /* The panels scroll individually, so the drawer itself must not. */
  overflow:hidden;overscroll-behavior:contain;
}
.drawer.open{transform:translateX(0)}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--menu-rule);
  padding-top:calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  flex:0 0 auto;
}
.drawer-head .brand{margin-inline:0}
.drawer-head .icon-btn{color:var(--menu-fg)}
.drawer-head .icon-btn:hover{background:var(--menu-rule)}

/* ── The panel stack ────────────────────────────────────────────── */
/* overflow:clip, with hidden as the fallback. `hidden` still makes this
   a scroll container — scriptable, and scrolled by focus() to "reveal"
   its target. That is how Safari ended up with the track scrolled a
   full panel-width to the right and the customer looking at a blank
   drawer (drawer.js, focusQuiet). `clip` is not a scroll container at
   all, so nothing can move it. Safari 16 / Chrome 90 / Firefox 81;
   older engines keep `hidden` and are covered by the JS guard. */
.dnav{flex:1 1 auto;position:relative;overflow:hidden;overflow:clip;padding:0}

.dnav-panel{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--menu-bg);
  padding-block:var(--sp-2) var(--sp-4);
  transition:transform .24s ease,opacity .24s ease;
}
.dnav-panel[data-state="active"]{transform:translateX(0);opacity:1}
/* One step back: parked just off to the left, still implied. */
.dnav-panel[data-state="behind"]{transform:translateX(-28%);opacity:0;pointer-events:none}
/* Not reached yet, or on its way back out. */
.dnav-panel[data-state="ahead"]{transform:translateX(100%);opacity:1}

/* ── Rows ───────────────────────────────────────────────────────── */
.dnav-grp{border-top:1px solid var(--menu-rule)}
.dnav-grp:first-child{border-top:0}

.dnav-row{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:var(--tap);padding:var(--sp-2) var(--sp-4);
  color:var(--menu-fg);font-weight:600;font-size:1rem;text-align:left;
}
.dnav-row .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
/* §9.3 — an icon beside a 16px label runs large or it is decoration. */
.dnav-row>.ico{width:26px;height:26px;flex:0 0 auto;color:var(--brand)}
.dnav-row .chev{width:22px;height:22px;flex:0 0 auto;color:var(--menu-fg-muted)}
.dnav-row:hover{background:var(--menu-rule)}
.dnav-row:hover .chev{color:var(--brand)}
.dnav-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Waiting for the tree, NOT "there are no categories". base.css's
   .skeleton is built for the light surfaces; the drawer is the dark one,
   so the shimmer runs on the menu tokens. @keyframes shimmer is global.
   Rows keep the real .dnav-row height so nothing jumps when the actual
   categories replace them. */
.dnav-row.is-skel{pointer-events:none}
.dnav-row.is-skel .bar{display:block;height:14px;width:62%;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--menu-rule) 25%,var(--menu-bg-deep) 37%,var(--menu-rule) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.dnav-row.is-skel:nth-child(2n) .bar{width:48%}
.dnav-row.is-skel:nth-child(3n) .bar{width:71%}

/* "Shop all X" — the parent category's own page. The accordion buried
   this in a split tap target; here it is the first thing in the panel. */
.dnav-row.is-all{color:var(--brand);font-weight:700}
.dnav-row.is-all .chev{color:var(--brand)}

/* ── Back row and title ─────────────────────────────────────────── */
.dnav-back{
  display:flex;align-items:center;gap:var(--sp-2);width:100%;
  min-height:var(--tap);padding:var(--sp-2) var(--sp-4);
  color:var(--menu-fg-muted);font-size:.9375rem;font-weight:600;text-align:left;
}
.dnav-back .ico{width:22px;height:22px;flex:0 0 auto}
.dnav-back:hover{color:var(--brand)}
.dnav-back:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.dnav-title{
  padding:var(--sp-3) var(--sp-4) var(--sp-2);
  font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--menu-fg-muted);font-weight:700;
}

/* ── Foot ───────────────────────────────────────────────────────────
   Fixed, and outside .dnav, so nothing in it moves when a panel slides.
   `flex:0 0 auto` against the .dnav track's `flex:1 1 auto` is what
   pins it: the panels give up height, the foot never does.

   It carries "Browse all categories" as well as the contact block. That
   row used to be the last thing in the level-0 panel, so it scrolled
   away under eighteen ranges and disappeared altogether one drill down.
   Here it is the one destination that is always on screen. */
.drawer-foot{
  flex:0 0 auto;
  border-top:1px solid var(--menu-rule);
  font-size:.875rem;color:var(--menu-fg-muted);
}

/* Same shape as .dnav-row.is-all, which is what it replaces — full
   bleed, ≥44px, 16px label (§9.2), amber and bold rather than amber
   alone. It is a link, not a row in a scroller, so it is styled here
   rather than reusing .dnav-row: nothing in the foot belongs to a panel. */
.drawer-all{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:var(--tap);padding:var(--sp-2) var(--sp-4);
  color:var(--brand);font-weight:700;font-size:1rem;
}
.drawer-all .t{flex:1 1 auto;min-width:0}
.drawer-all .chev{width:22px;height:22px;flex:0 0 auto;color:var(--brand)}
.drawer-all:hover{background:var(--menu-rule)}
.drawer-all:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.drawer-contact{
  padding:var(--sp-4);border-top:1px solid var(--menu-rule);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
.drawer-contact a{display:inline-flex;align-items:center;gap:var(--sp-2);
  color:var(--brand);font-weight:700;min-height:var(--tap)}
.drawer-contact a .ico{width:24px;height:24px}