/* ---------- shop masthead ----------
   The scroll story moved to the homepage; this page opens on the
   products. A short masthead carries the h1 and hands straight to
   the filter bar. (Story styles live in shop-story.css, loaded by
   index.html.) */
.shop-head{
  background:url('img/texture-dunes-bone.webp') center/cover no-repeat,var(--bg-2);
  padding:clamp(118px,16vh,170px) 0 clamp(30px,4.5vh,46px)}
.shop-head__grid{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(280px,.9fr);gap:clamp(32px,5vw,84px);align-items:end}
/* The copy sits centred against the visual, not pinned to its baseline.
   With align-items:end the 575px image left ~390px of dead space above
   the crumb at 1440. The figure keeps its end alignment. Single-column
   below 900px puts each item in its own row, so this is a no-op there. */
.shop-head__copy{align-self:center}
.shop-head__visual{margin:0;align-self:end}
.shop-head__visual{width:min(100%,460px);margin-left:auto;overflow:hidden;border-radius:var(--radius-panel);box-shadow:var(--e3)}
.shop-head__visual img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .shop-head__grid{grid-template-columns:1fr}
  .shop-head__visual img{margin-left:0;width:min(100%,420px)}
}
.shop-head .crumb{display:block;margin-bottom:clamp(18px,2.6vh,30px);color:var(--sage-label)}
.shop-head h1{margin:0;font-size:clamp(2.7rem,5.2vw,4.6rem);line-height:.96;letter-spacing:-.04em}
.shop-head__note{margin:clamp(16px,2.2vh,24px) 0 0;max-width:34em;color:var(--ivory-dim);font-size:clamp(.9rem,1.1vw,1.05rem)}

.shop-bar{
  position:sticky;top:64px;z-index:9;background:rgba(239,233,222,.86);
  background:color-mix(in srgb, var(--ground, #EFE9DE) 86%, transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline-2);
}
.shop-bar-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 0;
  width:min(1160px,calc(100% - 48px));margin-inline:auto}
.filter{
  font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(33,29,24,.16);border-radius:999px;padding:9px 15px;color:var(--ivory-dim);
  min-height:44px;display:inline-flex;align-items:center;   /* WCAG 2.5.8 target size */
  background:var(--bg-2);box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .4s var(--ease-soft),box-shadow .4s,border-color .4s,background .4s,color .4s;
}
.filter:hover{transform:translateY(-2px);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.5)}
.filter.active{background:var(--sage-fill);border-color:var(--sage-fill);color:var(--ivory)}
.cart-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:11px 18px;background:var(--pine);color:var(--bone);
  box-shadow:var(--e2)}
.cart-btn .count{background:var(--sage-fill);color:var(--ivory);border-radius:999px;padding:2px 8px;font-size:.75rem}

.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding:clamp(40px,7vh,80px) 0;perspective:1400px;
}
.p-card{
  display:flex;flex-direction:column;
  border:1px solid rgba(33,29,24,.14);border-radius:18px;overflow:hidden;
  background:var(--bg-2);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .5s;
}
.p-card:hover{transform:translateY(-6px);border-color:rgba(124,131,112,.55);
  box-shadow:var(--e4),0 24px 56px -22px rgba(124,131,112,.45),inset 0 1px 0 rgba(255,255,255,.55)}
.p-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.p-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.p-card:hover .p-media img{transform:scale(1.06)}
.p-brand{
  position:absolute;top:14px;left:14px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(247,244,238,.9);color:var(--ivory);border-radius:999px;padding:6px 10px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.p-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-body h3{font-size:1.1rem}
.p-body p{color:var(--ivory-dim);font-size:.9rem;line-height:1.5;flex:1}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.p-price{font-family:'JetBrains Mono',monospace;font-size:.9rem;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--ivory)}
.p-add{
  font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:11px 16px;background:var(--sage-fill);color:var(--ivory);
  box-shadow:0 2px 4px rgba(33,29,24,.08),0 10px 24px -10px rgba(124,131,112,.7),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .4s var(--ease-soft),box-shadow .4s;
}
.p-add:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(33,29,24,.1),0 16px 32px -10px rgba(124,131,112,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.p-add:active{transform:scale(.97)}

/* vouchers: separate surface, NOT the cart (Stripe B) */
.voucher{
  margin:0 0 clamp(50px,8vh,90px);border-radius:22px;overflow:hidden;position:relative;
  background:var(--pine);color:var(--bone);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:center;
  padding:clamp(34px,4.5vw,58px);
  border:1px solid rgba(33,29,24,.16);box-shadow:var(--e3),inset 0 1px 0 rgba(247,244,238,.14);
}
.voucher::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(65% 140% at 88% 50%,rgba(124,131,112,.3),transparent 62%)}
.voucher > *{position:relative}
.voucher h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:12px}
.voucher p{color:rgba(247,244,238,.8);max-width:34em}
.voucher .btn{margin-top:22px}
@media (max-width:900px){.voucher{grid-template-columns:1fr}}

@media (max-width:1000px){.products-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.products-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .shop-bar{top:56px}}
@media (max-width:460px){.products-grid{grid-template-columns:1fr}}

/* ---------- Snipcart cart, branded to the palette ---------- */
#snipcart{
  --color-default: #211D18;
  --color-alt: #4A443B;
  --color-icon: #4A443B;
  --color-link: #7C8370;
  --color-link-hover: #211D18;
  --color-buttonPrimary: #F7F4EE;
  --color-buttonPrimary-hover: #F7F4EE;
  --color-buttonPrimary-active: #F7F4EE;
  --bgColor-default: #EFE9DE;
  --bgColor-alt: #F7F4EE;
  --bgColor-buttonPrimary: #858C79;
  --bgColor-buttonPrimary-hover: #7C8370;
  --bgColor-buttonPrimary-active: #6E7563;
  --bgColor-buttonSecondary: #E4DCCC;
  --borderColor-default: rgba(33,29,24,.16);
  --borderColor-focus: #7C8370;
  --shadow-buttonPrimary: 0 10px 24px -10px rgba(124,131,112,.7);
  --borderRadius-lg: 999px;
  --borderRadius-md: 12px;
  --font-default: 'Bespoke Sans', sans-serif;
}

.price-tbc{color:var(--ivory-dim);font-size:.76rem}
.p-add[disabled]{background:var(--bg-3);color:var(--ivory-dim);box-shadow:var(--e1);cursor:not-allowed}
.p-add[disabled]:hover{transform:none}

.filter-div{width:1px;height:22px;background:var(--hairline);margin:0 6px}

@media (hover:hover) and (pointer:fine){
  .p-card:hover,.p-card:hover .p-media img,.filter:hover{transition-duration:.2s}
}

/* ============================================================
   SHOP FILTERS
   Three axes - range, step, concern - plus search. Multi-select
   within an axis, so buttons are toggles and carry aria-pressed
   rather than behaving like radio buttons.
   ============================================================ */
.shop-bar-in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s4) var(--s5);
}
.shop-search{
  flex:1 1 240px;min-width:0;
  padding:12px 18px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:var(--bg-2);
  font:inherit;font-size:.95rem;color:var(--ivory);
  min-height:44px;
}
.shop-search::placeholder{color:var(--ivory-dim);opacity:1}
.shop-search:focus-visible{
  outline:2px solid var(--sage-label);outline-offset:2px;
  border-color:var(--sage-label);
}
.fset{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fset-label{color:var(--sage-label);flex:none}

.filter{
  min-height:40px;padding:9px 16px;
  border:1px solid var(--hairline);border-radius:999px;
  background:transparent;color:var(--ivory-dim);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--dur-state) var(--ease-soft),
             border-color var(--dur-state) var(--ease-soft),
             color var(--dur-state) var(--ease-soft);
}
.filter:hover{border-color:var(--sage-label);color:var(--ivory)}
.filter.active{
  background:var(--sage-fill);border-color:var(--sage-fill);color:var(--ivory);
}
.filter:focus-visible{outline:2px solid var(--sage-label);outline-offset:2px}
.filter-clear{border-style:dashed}

.shop-count{color:var(--sage-label);margin-bottom:var(--s5)}
.shop-empty{
  padding:var(--sec-sm) 0;color:var(--ivory-dim);text-align:center;
}
.p-card[hidden]{display:none}
.p-step{color:var(--sage-label)}
.p-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.p-price{font-variant-numeric:tabular-nums;color:var(--ivory)}

@media (max-width:760px){
  .shop-bar-in{gap:10px var(--s4)}
  /* the three axes become their own scroll rails rather than
     wrapping into a wall of pills */
  .fset{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    width:100%;padding-bottom:2px;
  }
  .fset::-webkit-scrollbar{display:none}
  .filter{flex:none}
}
@media (prefers-reduced-motion:reduce){ .filter{transition:none} }

/* ===== shop bar layout — must come after the base .shop-bar-in rule ===== */
/* One row. The chip wall is gone: 19 pills across three groups is a
   wall at any width, and the horizontal-scroll version that replaced
   it was worse — chips vanished mid-word at the right edge with no
   sign there was more. Each group is now a dropdown.

   The chips themselves are untouched inside the panels, so the filter
   script keeps working exactly as before — this is presentation only. */
.shop-bar-in{flex-wrap:nowrap;gap:12px;align-items:center}
.shop-bar-top{display:contents}

/* The search was spanning most of the bar for no reason. Capped, and
   it no longer grows past a comfortable reading width. */
.shop-search{flex:1 1 260px;max-width:340px;min-width:0}

.shop-facets{display:flex;align-items:center;gap:10px;flex:0 0 auto}
#shopClear{margin-left:auto;flex:0 0 auto}

/* The sticky bar must not clip an open panel. */
.shop-bar{overflow:visible}
.facet{position:relative}
.facet-btn{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(33,29,24,.16);border-radius:999px;
  padding:9px 15px;min-height:44px;color:var(--ivory-dim);
  background:var(--bg-2);box-shadow:var(--e1),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform var(--dur-state) var(--ease-soft),
             box-shadow var(--dur-state),border-color var(--dur-state);
  white-space:nowrap;
}
.facet-btn::-webkit-details-marker{display:none}
.facet-btn:hover{transform:translateY(-2px);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.5)}
.facet-btn:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.facet-btn svg{width:10px;height:6px;flex:none;transition:transform var(--dur-state) var(--ease-soft)}
.facet[open] > .facet-btn{border-color:var(--champagne);background:var(--bg-3)}
.facet[open] > .facet-btn svg{transform:rotate(180deg)}
/* A group with an active filter reads as on, the same sage the chips use. */
.facet:has(.filter.active) > .facet-btn{
  background:var(--sage-fill);border-color:var(--sage-fill);color:var(--ivory);
}

.facet-pop{
  position:absolute;top:calc(100% + 10px);left:0;z-index:20;
  display:flex;flex-wrap:wrap;gap:8px;
  width:max-content;max-width:min(520px,calc(100vw - 48px));
  padding:14px;border-radius:var(--radius-panel);
  background:var(--bg-2);border:1px solid var(--hairline-2);
  box-shadow:var(--e3);
}
@media (prefers-reduced-motion:no-preference){
  .facet[open] .facet-pop{animation:facet-in var(--dur-state) var(--ease-out) both}
  @keyframes facet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
/* Near the right edge the panel would run off screen. */
.facet:last-of-type .facet-pop{left:auto;right:0}

@media (max-width:700px){
  .shop-bar-in{flex-wrap:wrap}
  .shop-search{max-width:none;flex:1 1 100%}
  #shopClear{margin-left:0}
}

/* author display on .filter was defeating the [hidden] attribute —
   the Clear-all button showed before any filter was chosen */
.filter[hidden]{display:none}

/* ---- phone shelves (built by shop-mobile.js at <=760) ---- */
.products-grid.is-shelves{display:block;background:var(--pine);border:1px solid rgba(239,233,222,.16);border-radius:14px;overflow:hidden}
.shop-shelf{border-bottom:1px solid rgba(239,233,222,.16)}
.shop-shelf:last-child{border-bottom:0}
.shop-shelf__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 16px 4px}
.shop-shelf__head h2{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#EFE9DE;margin:0}
.shop-shelf__count{color:#9ca38f;font-size:12px;letter-spacing:.06em}
.shop-shelf__rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shop-shelf__rail::-webkit-scrollbar{display:none}
.products-grid.is-shelves .p-card{flex:0 0 58%;scroll-snap-align:start;border-bottom:0 !important}
.products-grid.is-shelves .p-card:last-child{border-right:0 !important}