/* ============================================================
   SHOP PAGE: hero banner + grouped category sidebar + 2-col layout
   Mirrors the homepage .hero pattern (photo layer + frosted left wash + solid card).
   Fully token-driven so it themes across Invisible / Workshop / Field.
   ============================================================ */

/* ---------------------------------------------------------------
   1. SHOP HERO (compact banner above the department list)
   --------------------------------------------------------------- */
.shop-hero{position:relative;background:var(--bg);--shop-photo-h:clamp(320px,30vw,400px);overflow:hidden}
.shop-hero__bg{position:absolute;top:0;left:0;right:0;height:100%;overflow:hidden;z-index:0}
.shop-hero__photo{position:absolute;inset:0;background-image:var(--shop-hero-img);background-size:cover;background-position:50% 50%;transform-origin:50% 50%;animation:shopKenburns 28s var(--ease) forwards}
/* Frosted WHITE wash over the left ~55% of the hero photo: white tint + backdrop blur, masked so the
   left (where the card sits) is calm/legible and the photo stays sharp on the right (same trick as home). */
.shop-hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.40);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 30%,transparent 62%);mask-image:linear-gradient(to right,#000 0%,#000 30%,transparent 62%)}
/* Soft bottom fade into the page background so the band reads as part of the page, not a hard banner */
.shop-hero__fade{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 56%);mask-image:linear-gradient(to bottom,transparent,#000 56%)}
.shop-hero__inner{position:relative;z-index:2;display:flex;align-items:center;min-height:var(--shop-photo-h);padding-block:var(--s48)}
/* Solid cream card (not frosted glass) for high processing fluency over the bright photo */
.shop-hero__card{position:relative;background:rgba(255,253,249,.97);border:1px solid var(--border);border-radius:14px;padding:var(--s32);flex:0 0 56%;max-width:600px;box-shadow:0 16px 44px rgba(12,16,10,.26)}
.shop-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--honey-deep);margin-bottom:var(--s12)}
.shop-hero__eyebrow svg{width:15px;height:15px;flex:none}
.shop-hero__card h1{font-size:clamp(24px,2.6vw,32px);line-height:1.15;margin-bottom:var(--s12);text-wrap:pretty}
.shop-hero__card>p{font-size:16px;color:var(--text-secondary);margin-bottom:var(--s20);max-width:46ch;text-wrap:pretty}
/* Search + "help me choose" affordance row */
.shop-hero__find{display:flex;gap:var(--s12);flex-wrap:wrap;align-items:center}
.shop-hero__search{flex:1;min-width:240px;display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-card)}
.shop-hero__search input{flex:1;min-width:0;border:0;background:transparent;padding:13px 16px;font:400 15px var(--font);color:var(--text);outline:none}
.shop-hero__search button{border:0;background:var(--primary);color:#fff;padding:0 18px;cursor:pointer;display:grid;place-items:center;transition:background var(--dur) var(--ease)}
.shop-hero__search button svg{width:18px;height:18px}
.shop-hero__search button:hover{background:var(--primary-dark)}
.shop-hero__search:focus-within{border-color:var(--primary)}
.shop-hero__choose{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--primary);white-space:nowrap;padding:6px 2px}
.shop-hero__choose svg{width:17px;height:17px;flex:none}
.shop-hero__choose:hover{color:var(--primary-dark)}

@keyframes shopKenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.shop-hero__photo{animation:none}}

/* ---------------------------------------------------------------
   2. TWO-COLUMN LAYOUT (sidebar + department grid)
   --------------------------------------------------------------- */
/* Department grid (main) on the left, category sidebar on the right (desktop).
   Source order keeps the sidebar FIRST so it collapses to an accordion ABOVE the
   departments on mobile; `order` flips it to the right column on wide screens. */
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s48);align-items:start}
.shop-layout>.shop-aside{order:2}
.shop-layout>.shop-main{order:1}

/* ---------------------------------------------------------------
   3. GROUPED CATEGORY SIDEBAR (sticky on desktop · accordion always)
   ~6 goal-ordered collapsible parents with on-demand children + counts (R6 keystone)
   --------------------------------------------------------------- */
.shop-aside{position:sticky;top:152px;align-self:start}
.shop-nav{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.shop-nav__title{font:700 12px var(--font);text-transform:uppercase;letter-spacing:.09em;color:#fff;background:var(--primary);padding:14px 18px;display:flex;align-items:center;gap:9px}
.shop-nav__title svg{width:16px;height:16px;flex:none}

.shop-cat{border-top:1px solid var(--border)}
.shop-cat:first-of-type{border-top:0}
/* Parent row = the disclosure button (whole row is the toggle) */
.shop-cat__head{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:0;cursor:pointer;padding:13px 16px;text-align:left;font:600 15px var(--font-display);color:var(--text);transition:background var(--dur) var(--ease)}
.shop-cat__head:hover{background:var(--surface)}
.shop-cat__head:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.shop-cat__icon{width:20px;height:20px;flex:none;color:var(--primary)}
.shop-cat__icon svg{width:100%;height:100%;display:block}
.shop-cat__name{flex:1;line-height:1.25}
.shop-cat__count{font:700 11px var(--font);font-variant-numeric:tabular-nums;color:var(--honey-deep);background:var(--surface);border-radius:999px;padding:2px 9px;letter-spacing:.02em;flex:none}
.shop-cat__chev{width:16px;height:16px;flex:none;color:var(--text-secondary);transition:transform var(--dur) var(--ease)}
.shop-cat.is-open .shop-cat__chev{transform:rotate(180deg)}
.shop-cat.is-open .shop-cat__head{color:var(--primary-dark)}

/* Children: collapsed by default, expand on toggle (max-height transition, on-demand depth).
   State lives on the .shop-cat container (a class) rather than the button's [aria-expanded]
   adjacent-sibling selector (the latter fails to re-invalidate computed max-height on dynamic
   attribute change in some engines, leaving panels stuck). Class on the parent is rock-solid. */
.shop-cat__panel{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease);background:var(--surface)}
.shop-cat.is-open .shop-cat__panel{max-height:520px}
.shop-cat__list{padding:var(--s4) 0 var(--s12)}
.shop-cat__list li{margin:0}
.shop-cat__list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 18px 8px 46px;font:500 13.5px var(--font);color:var(--text-secondary);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.shop-cat__list a:hover{color:var(--primary-dark);background:rgba(255,255,255,.6)}
.shop-cat__list a span{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary);opacity:.85;flex:none}

/* "Talk to an expert" foot of the sidebar: carries the north star into the nav */
.shop-aside__help{margin-top:var(--s16);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s16);text-align:center}
.shop-aside__help p{font-size:13px;color:var(--text-secondary);margin-bottom:var(--s8);line-height:1.45}
.shop-aside__help a{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--primary-dark)}
.shop-aside__help a svg{width:16px;height:16px;flex:none;color:var(--primary)}
.shop-aside__help a:hover{color:var(--primary)}

/* The department-grid column keeps the existing .gstore stacked panels.
   On desktop the first panel's top divider/padding is dropped (the sidebar already frames it). */
.shop-main>.gstore>.gstore__panel:first-child{margin-top:0;padding-top:0;border-top:0}

/* ---------------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1000px){
  /* Sticky offset shrinks once the header collapses to the single green bar */
  .shop-aside{top:92px}
}
@media (max-width:900px){
  /* Collapse to one column: sidebar becomes a full-width accordion ABOVE the departments
     (reset the desktop `order` so the source-first sidebar leads) */
  .shop-layout{grid-template-columns:1fr;gap:var(--s32)}
  .shop-layout>.shop-aside{order:0}
  .shop-layout>.shop-main{order:0}
  .shop-aside{position:static;top:auto}
  .shop-aside__help{max-width:560px;margin-inline:auto}
}
@media (max-width:768px){
  .shop-hero{--shop-photo-h:auto}
  .shop-hero__bg{display:none}
  /* The photo becomes the card-band's own background; card overlays a frosted-left wash (matches home) */
  .shop-hero__inner{display:block;min-height:auto;padding-block:var(--s32);background-image:var(--shop-hero-img);background-size:cover;background-position:62% 50%}
  .shop-hero__inner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 26%,transparent 60%);mask-image:linear-gradient(to right,#000 0%,#000 26%,transparent 60%)}
  .shop-hero__card{flex-basis:auto;max-width:88%;padding:var(--s24)}
  .shop-hero__find{flex-direction:column;align-items:stretch}
  .shop-hero__search{min-width:0}
  .shop-hero__choose{justify-content:center;padding-top:var(--s4)}
}
@media (max-width:560px){
  .shop-hero__card{max-width:100%}
}