/* ═══════════════════════════════════════════════════════════════════
   AIRGAS SHOP — REDESIGN LAYER (v2)
   Loads AFTER css/style.css + css/shop.css. Adds the cinematic hero,
   category showcase, product ribbon, brand marquee, and CTA + the
   scroll/animation polish. Core cart/grid/product styles stay in shop.css.
   Tokens only. Signature easing --ease-film from shop.css.
   ═══════════════════════════════════════════════════════════════════ */

/* style.css has no accessible-orange TEXT token (brand orange fails AA on
   white at body sizes) — define it here for the shop pages. Without it the
   category tiles' mono links fell back to browser link-blue (2026-08-14). */
:root { --color-accent-text: var(--orange-700); }

/* ═══════════ CINEMATIC HERO ═══════════ */
.shop-hero {
  /* the dark stage fills the whole first screen (owner request 2026-08-13) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: clamp(96px, 14vh, 160px);
  padding-bottom: 0;
  isolation: isolate;
  overflow: hidden;               /* the photo wall must never spill past the dark */
}
/* Hand-off into the light section: the DARK bleeds down into the NEXT
   section's top and fades out there. Because the hero itself is a full
   100dvh screen, this band sits entirely BELOW the fold — the first screen
   is 100% dark and the blend physically cannot appear until the user
   scrolls (owner feedback 2026-08-13, two rounds: a fade pinned to the
   hero's own bottom edge is always visible when hero == viewport). */
/* the dark stage bleeds into whatever section sits under the hero — that is
   now the catalog. catalog-head is a centred container, so the band breaks
   out to full viewport width with the 50%/-50% trick. */
.catalog-head { position: relative; }
.catalog-head::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(64px, 9vh, 110px);
  pointer-events: none;
  background: linear-gradient(180deg, var(--ink-900), transparent);
}
/* morphing liquid blobs */
.shop-hero .hb {
  position: absolute; z-index: -1; pointer-events: none;
  border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%;
  filter: blur(60px);
}
.shop-hero .hb-1 {
  width: 42rem; height: 42rem; right: -8rem; top: -10rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-500) 40%, transparent), transparent 70%);
  animation: hb-morph 17s var(--ease-film) infinite;
}
.shop-hero .hb-2 {
  width: 30rem; height: 30rem; left: -6rem; bottom: 2rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-700) 34%, transparent), transparent 68%);
  animation: hb-morph 21s var(--ease-film) 1s infinite reverse;
}
@keyframes hb-morph {
  0%,100% { border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%; transform: translate(0,0) scale(1); }
  50% { border-radius: 58% 42% 38% 62% / 55% 58% 42% 45%; transform: translate(-2.5rem,2rem) scale(1.08); }
}
/* blueprint grid */
.shop-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 79px, color-mix(in srgb, var(--white-pure) 3%, transparent) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--white-pure) 3%, transparent) 79px 80px);
  mask-image: radial-gradient(70rem 50rem at 60% 30%, rgba(0,0,0,0.85), transparent 72%);
}
/* the copy stays compact on the left — the photo wall is the highlight.
   z-index keeps the scroll cue crisp above the bottom fade. */
.shop-hero-inner { flex: 0 1 44%; min-width: 0; position: relative; z-index: 2; }
.shop-hero .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white-pure) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-pure) 14%, transparent);
}
.shop-hero .pulse-dot {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange-500) 55%, transparent);
  animation: sh-pulse 1.9s var(--ease-film) infinite;
}
@keyframes sh-pulse { to { box-shadow: 0 0 0 9px transparent; } }
.shop-hero .h2w {
  /* deliberately modest — the owner wants the PHOTOS to carry the hero */
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  margin: var(--space-lg) 0 var(--space-md);
}
.shop-hero .h2w .story-serif {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  background: linear-gradient(100deg, var(--orange-300), var(--orange-500) 55%, var(--orange-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* staggered word reveal */
.shop-hero .h2w .w { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: sh-word 0.7s var(--ease-film) forwards; }
@keyframes sh-word { to { opacity: 1; transform: none; } }
.shop-hero-lead { opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.5s forwards; }

/* count-up stats */
.shop-hero-stats { gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.7s forwards; }
.shop-hero-stats strong {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  background: linear-gradient(115deg, var(--orange-300), var(--orange-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.shop-scroll-cue {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-2xl);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--white-pure) 60%, transparent);
  text-decoration: none;
  opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.9s forwards;
}
.shop-scroll-cue:hover { color: var(--orange-300); }
.shop-scroll-cue .arr { display: inline-block; animation: cue-drop 1.8s var(--ease-film) infinite; }
@keyframes cue-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* product photo WALL — three vertical marquee columns of real photos.
   The photos are the hero's highlight (owner request 2026-08-13): columns 1
   and 3 drift downward, the middle column upward. Seamless loop: the track
   holds the item list twice (mq-dup is display:contents so margins stay
   uniform) and translates exactly -50%. */
.hero-wall {
  /* capped width → ~150px cards: bigger than the old 92px strip, calmer than
     the first 200px cut. Auto margins CENTER the wall between the end of the
     copy and the right screen edge (owner feedback 2026-08-13 — pinned right
     it left a dead gap in the middle). */
  flex: 1 1 48%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  /* fill the stage from under the navbar to the very bottom edge — an explicit
     height, because align-self:stretch let the columns' natural content height
     (~3300px) blow the hero up instead of being clipped */
  align-self: flex-end;
  height: calc(100vh - clamp(96px, 14vh, 160px));
  height: calc(100dvh - clamp(96px, 14vh, 160px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* roomier lanes so the stage reads full, not sparse */
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-wall-col { overflow: hidden; min-width: 0; }
.hero-wall-track { display: flex; flex-direction: column; animation: wall-up 46s linear infinite; }
.hero-wall-col--down .hero-wall-track { animation-name: wall-down; animation-duration: 54s; }
.hero-wall-col:nth-child(3) .hero-wall-track { animation-duration: 60s; }
.hero-wall-track .mq-dup { display: contents; }
.hero-wall:hover .hero-wall-track { animation-play-state: paused; }
@keyframes wall-up { to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero-wall-item {
  flex: 0 0 auto;
  width: 100%; aspect-ratio: 1 / 1;
  margin-bottom: clamp(var(--space-md), 2vw, var(--space-xl));
  border-radius: var(--radius-lg);
  background: var(--white-pure);
  border: 1px solid color-mix(in srgb, var(--white-pure) 14%, transparent);
  display: grid; place-items: center; padding: 10px;
  overflow: hidden;
}
.hero-wall-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ═══════════ CATEGORY SHOWCASE ═══════════ */
/* compact: heading + all seven tiles are meant to fit ONE screen
   (owner request 2026-08-14) */
.showcase-wrap { background: var(--color-bg); padding: var(--space-2xl) var(--space-lg) var(--space-xl); }
.showcase-inner { max-width: var(--container-wide); margin: 0 auto; }
.showcase-head { max-width: 46rem; margin-bottom: var(--space-lg); }
.showcase-head .h2w { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.showcase-head p { color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--leading-normal); }
.cat-showcase {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(200px, 28vh, 250px);
  gap: var(--space-md);
}
/* 7 tiles, two intentional rows: four index cards, then three wider ones */
.cat-showcase .cat-tile:nth-child(-n+4) { grid-column: span 3; }
.cat-showcase .cat-tile:nth-child(n+5) { grid-column: span 4; }

/* "index card" (redesign 2026-08-14): LIGHT, like the page it sits on — the
   old dark photo-blobs read as a copy-paste accident on a white page. The
   outlined index number is the eye-catcher, the product photo floats as a
   cut-out on a soft orange wash, and money is on the hover feel. */
.cat-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease-film), box-shadow 0.3s var(--ease-film),
              border-color 0.3s var(--ease-film);
}
.cat-tile::before {                 /* orange rule that draws across the top */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-film);
}
.cat-tile:hover, .cat-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--orange-300);
  /* orange-tinted shadow, not generic black */
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--orange-500) 30%, transparent);
}
.cat-tile:hover::before, .cat-tile:focus-visible::before { transform: scaleX(1); }
.cat-tile:active { transform: translateY(-1px) scale(0.99); }
.cat-tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.cat-tile-idx {
  position: absolute; top: var(--space-sm); left: var(--space-md); z-index: 1;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: 1;
  color: var(--color-accent-tint);                 /* fallback: solid tint */
  transition: color 0.3s var(--ease-film);
}
@supports (-webkit-text-stroke: 1px black) {
  .cat-tile-idx { color: transparent; -webkit-text-stroke: 1.5px var(--orange-300); }
  .cat-tile:hover .cat-tile-idx { color: var(--color-accent-wash); -webkit-text-stroke-color: var(--color-accent); }
}
.cat-tile-count {
  position: absolute; top: var(--space-md); right: var(--space-md); z-index: 1;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent-tint);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.cat-tile-photo {
  /* bottom inset reserves the name zone — photos were colliding with the
     category names on the first cut.
     DEFINITE grid tracks per the project's image-containment rule: auto
     tracks let percentage max-sizes fail and tall photos burst out of the
     frame (that exact bug, again, 2026-08-14). */
  position: absolute; inset: 10% 8% 36%; z-index: 0;
  display: grid; grid-template: 100% / 100%; place-items: center;
  padding: 2% 6%;
}
.cat-tile-photo::before {           /* the soft wash the cut-out floats on */
  content: ''; position: absolute; width: 72%; aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: radial-gradient(closest-side, var(--color-accent-wash), transparent);
}
/* all photos stack in the SAME grid cell (explicit grid-area — extra in-flow
   children would otherwise create implicit rows) and swipe on hover: the
   active one slides in from the right, the leaving one exits left */
.cat-tile-photo img {
  position: relative; grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--ink-900) 18%, transparent));
  opacity: 0; transform: translateX(22px);
  transition: opacity 0.4s var(--ease-film), transform 0.4s var(--ease-film);
}
.cat-tile-photo img.is-active { opacity: 1; transform: translateX(0); }
.cat-tile-photo img.is-leaving { opacity: 0; transform: translateX(-22px); }
.cat-tile-body { position: relative; z-index: 1; padding: var(--space-md); }
.cat-tile-name {
  display: block;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.15;
  color: var(--color-heading);
}
.cat-tile-go {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-text);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s var(--ease-film), transform 0.3s var(--ease-film);
}
.cat-tile:hover .cat-tile-go, .cat-tile:focus-visible .cat-tile-go { opacity: 1; transform: none; }
.cat-tile-go .arr { transition: transform 0.3s var(--ease-film); }
.cat-tile:hover .cat-tile-go .arr { transform: translateX(3px); }
.cat-tile-go svg { width: 15px; height: 15px; }

/* ═══════════ CATALOG SECTION HEADER ═══════════ */
.catalog-head { max-width: var(--container-base); margin: 0 auto;
  /* generous top padding: the heading must start below the dark hand-off band */
  padding: clamp(72px, 11vh, 130px) var(--space-lg) 0; }
.catalog-head .h2w { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: var(--space-2xs); }
.catalog-head p { color: var(--color-text-muted); }

/* staggered product-card reveal (main.js adds .visible) */
.shop-grid .p-card { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-film), transform 0.5s var(--ease-film); }
.shop-grid .p-card.visible { opacity: 1; transform: none; }

/* ═══════════ BRAND MARQUEE ═══════════ */
.brand-band { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding: var(--space-3xl) 0; overflow: clip; }
.brand-band .bm-head { max-width: var(--container-base); margin: 0 auto var(--space-xl); padding: 0 var(--space-lg); }
.brand-band .bm-head .h2w { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.brand-marquee { overflow: hidden; display: flex; }
.brand-marquee + .brand-marquee { margin-top: var(--space-md); }
.brand-track { display: flex; flex-shrink: 0; gap: var(--space-md); align-items: center; padding-right: var(--space-md); white-space: nowrap; animation: bm-scroll 46s linear infinite; }
.brand-marquee--rev .brand-track { animation-direction: reverse; animation-duration: 54s; }
@keyframes bm-scroll { to { transform: translateX(-50%); } }  /* track is 2× duplicated → one copy = 50% */
.brand-chip {
  padding: var(--space-sm) var(--space-xl);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-base); color: var(--color-heading);
  letter-spacing: var(--tracking-wide);
}
.mq-dup { display: contents; }

/* ═══════════ SHOP CTA ═══════════ */
.shop-cta {
  position: relative; overflow: clip;
  background: var(--ink-900);
  background:
    radial-gradient(48rem 30rem at 18% 0%, color-mix(in srgb, var(--orange-500) 16%, transparent), transparent 60%),
    var(--ink-900);
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
}
.shop-cta-inner { max-width: 46rem; margin: 0 auto; }
.shop-cta .h2w { color: var(--color-text-inv); font-size: clamp(1.9rem, 4vw, 3rem); }
.shop-cta .h2w .story-serif {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  background: linear-gradient(100deg, var(--orange-300), var(--orange-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-cta p { color: color-mix(in srgb, var(--white-pure) 74%, transparent); margin-bottom: var(--space-xl); }
.shop-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.shop-cta .btn-primary { box-shadow: 0 0 24px color-mix(in srgb, var(--orange-500) 45%, transparent); }
.shop-cta .btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.9rem 1.6rem; min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--white-pure) 26%, transparent);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--white-pure) 82%, transparent);
  text-decoration: none; font-weight: var(--weight-medium);
  transition: border-color 0.2s var(--ease-film), color 0.2s var(--ease-film);
}
.shop-cta .btn-ghost:hover { border-color: color-mix(in srgb, var(--white-pure) 55%, transparent); color: var(--white-pure); }
.shop-cta .btn-ghost svg { width: 17px; height: 17px; fill: var(--whatsapp); }

/* ═══════════ MOTION GUARDS ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .shop-hero .hb, .shop-hero .pulse-dot, .shop-scroll-cue .arr,
  .hero-wall-track, .brand-track { animation: none; }
  .shop-hero .h2w .w, .shop-hero-lead, .shop-hero-stats, .shop-scroll-cue { opacity: 1; animation: none; transform: none; }
  .brand-marquee { flex-wrap: wrap; justify-content: center; }
  .brand-track { white-space: normal; flex-wrap: wrap; justify-content: center; animation: none; }
  .mq-dup { display: none; }
  .cat-tile:hover { transform: none; }
  .cat-tile-photo img { transition: none; transform: none; }
  .cat-tile-photo img:not(.is-active) { opacity: 0; }
  .shop-grid .p-card { opacity: 1; transform: none; transition: none; }
  .cat-tile-go { opacity: 1; transform: none; }
  .hero-wall-track { transform: none; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .cat-showcase { grid-auto-rows: clamp(180px, 24vh, 230px); }
  .cat-showcase .cat-tile:nth-child(-n+4) { grid-column: span 6; }
  .cat-showcase .cat-tile:nth-child(n+5) { grid-column: span 4; }
}
@media (max-width: 640px) {
  .shop-hero { min-height: 0; padding-bottom: 0; }
  .cat-showcase { grid-auto-rows: 160px; gap: var(--space-xs); }
  .cat-showcase .cat-tile:nth-child(-n+4),
  .cat-showcase .cat-tile:nth-child(n+5) { grid-column: span 6; }
  .cat-tile-idx { font-size: 2rem; }
  /* deeper bottom inset: on 160px tiles the photo touched the name — and
     two-line names (Service and equipment) need the extra room */
  .cat-tile-photo { inset: 8% 4% 46%; }
  .cat-tile-name { font-size: var(--text-base); }
  /* touch has no hover — the browse affordance must simply be there */
  .cat-tile-go { opacity: 1; transform: none; }
}

/* ---------- mobile touch-target hardening (audited at 375px) ---------- */
@media (max-width: 767px) {
  .shop-scroll-cue { padding: 13px 0; }
}

/* -- mobile: the photo wall goes full-width under the hero text
      (as a flex-row sibling it would be squeezed to a sliver on phones) -- */
@media (max-width: 767px) {
  .shop-hero { flex-direction: column; align-items: stretch; justify-content: center; }
  .shop-hero-inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .hero-wall { width: 100%; flex: none; align-self: auto; margin-top: var(--space-xl);
    height: 46vh; padding-left: 0; }
}

/* anchor target for shop.html#catalog (quick-search landings): keep the
   section head clear of the fixed navbar when the browser jumps to it */
#catalog { scroll-margin-top: 84px; }

/* ═══════════ SEARCH-FIRST TOP (owner 2026-09-04) ═══════════
   "Kasi kecilkan banner… orang nak search dulu. Search lebih bold, lebih
   highlight, atas sekali." The story hero moved to the bottom (.shop-story);
   this short dark band + the bold sticky search bar own the first screen. */
.shop-top {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--ink-900);
  background:
    radial-gradient(40rem 18rem at 85% 0%, color-mix(in srgb, var(--orange-500) 16%, transparent), transparent 62%),
    var(--ink-900);
  padding: clamp(92px, 12vh, 124px) var(--space-lg) var(--space-lg);
}
.shop-top-inner { max-width: var(--container-base); margin: 0 auto; }
.shop-top .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white-pure) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-pure) 14%, transparent);
}
.shop-top .pulse-dot {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange-500) 55%, transparent);
  animation: sh-pulse 1.9s var(--ease-film) infinite;
}
.shop-top .h2w { color: var(--color-text-inv); font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: var(--space-sm) 0 var(--space-2xs); }
.shop-top-sub {
  color: color-mix(in srgb, var(--white-pure) 66%, transparent);
  max-width: 40rem; margin: 0; line-height: var(--leading-normal);
}
/* the sticky toolbar meets the band's bottom edge and carries the weight */
.shop-toolbar {
  padding-top: var(--space-md);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink-900) 55%, transparent);
}
.shop-search--bold {
  flex: 1 1 100%; max-width: 860px; min-height: 58px;
  gap: var(--space-sm); padding: 0 var(--space-md);
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-lg);
  background: var(--white-pure);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease-film), box-shadow 0.2s var(--ease-film);
}
.shop-search--bold svg { width: 22px; height: 22px; color: var(--color-accent); }
.shop-search--bold input { font-size: clamp(16px, 1.05rem, 18px); font-weight: var(--weight-medium); padding: 0.9rem 0; }
.shop-search--bold input::placeholder { color: var(--ink-500); font-weight: var(--weight-medium); opacity: 1; }
.shop-search--bold:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-tint), var(--shadow-md); }
/* the old hero's dark hand-off band has nothing to hand off any more */
.catalog-head::before { display: none; }

/* the story band: same stage as the old hero, without the full-screen height */
.shop-story {
  min-height: 0;
  padding: var(--space-4xl) var(--space-lg) 0;
  border-top: 1px solid color-mix(in srgb, var(--white-pure) 8%, transparent);
}
.shop-story .hero-wall { height: clamp(360px, 62vh, 620px); }
.shop-story .shop-scroll-cue .arr { animation-name: cue-rise; }
@keyframes cue-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .shop-top .pulse-dot, .shop-story .shop-scroll-cue .arr { animation: none; }
}
@media (max-width: 767px) {
  .shop-top { padding: clamp(84px, 11vh, 100px) var(--space-md) var(--space-md); }
  .shop-top .h2w { font-size: 1.55rem; }
  .shop-top-sub { font-size: var(--text-sm); }
  .shop-search--bold { min-height: 54px; }
  .shop-story { padding-top: var(--space-3xl); }
  .shop-story .hero-wall { height: 46vh; }
}

/* toolbar rows: [search + sort + count] then [category chips] — keeps the
   sticky bar to ~2 rows on desktop instead of three (search on its own row
   pushed the sort/count under the wrapped chips) */
.shop-toolbar-inner { row-gap: var(--space-xs); }
.shop-search--bold { flex: 1 1 420px; max-width: none; }
.shop-toolbar-inner .shop-sort { order: 1; min-height: 48px; }
.shop-toolbar-inner .shop-count { order: 2; }
.shop-toolbar-inner .cat-chips { order: 3; flex: 1 1 100%; }
@media (max-width: 767px) {
  /* one swipeable row of chips instead of a six-row wall inside the sticky bar */
  .shop-toolbar-inner .cat-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    margin: 0 calc(-1 * var(--space-md)); padding-left: var(--space-md); padding-right: var(--space-md);
    scroll-padding-left: var(--space-md);
  }
  .shop-toolbar-inner .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; white-space: nowrap; }
  .shop-toolbar-inner .shop-sort { order: 4; }
  .shop-top-count { display: none; }          /* "The Catalog" alone — the pill wrapped to two lines at 375px */
}
/* chips fit one row at 1366px inside the sticky bar */
.shop-toolbar .cat-chip { padding: 0.38rem 0.7rem; font-size: 0.84rem; }

/* story band, cleaner (Far 2026-09-07): no orange blobs, and soft hand-offs —
   light → dark at its top edge, dark → light into the brands section below —
   instead of hard cuts */
.shop-story .hb { display: none; }
.shop-story { border-top: 0; }
.shop-story::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  height: clamp(48px, 7vh, 90px);
  background: linear-gradient(180deg, var(--color-bg), transparent);
  pointer-events: none;
}
.brand-band { position: relative; border-top: 0; padding-top: clamp(112px, 14vh, 150px); }
.brand-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: clamp(64px, 9vh, 110px);
  background: linear-gradient(180deg, var(--ink-900), transparent);
  pointer-events: none;
}

/* Seam fades (Far, 2026-09-09: "faded so the background blends for all three sections"). Each fade
   sits ABOVE the blobs/photo wall (z-index 2) and the section gets enough padding that no text or
   tile is inside the fade zone. Tokens only: --color-bg (showcase), --ink-900 (story), --color-bg-alt
   (brand band), --navy (footer, = --ink-900). */
.shop-story { padding-top: clamp(96px, 12vh, 130px); }
.shop-story::before { z-index: 2; height: clamp(56px, 8vh, 84px); background: linear-gradient(180deg, var(--color-bg) 0%, transparent 100%); }
.brand-band { padding-top: clamp(104px, 13vh, 136px); padding-bottom: clamp(104px, 13vh, 136px); }
.brand-band::before { z-index: 2; height: clamp(60px, 8vh, 88px); background: linear-gradient(180deg, var(--ink-900) 0%, transparent 100%); }
.brand-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: clamp(60px, 8vh, 88px); background: linear-gradient(180deg, transparent 0%, var(--navy) 100%); pointer-events: none; }
@media (max-width: 767px) {
  .shop-story { padding-top: clamp(72px, 10vh, 96px); }
  .brand-band { padding-top: clamp(84px, 11vh, 104px); padding-bottom: clamp(84px, 11vh, 104px); }
}