/* Shop / catalog page */

.shop-hero {
  /* Tightened — was --s-9 / --s-7. Hero only carries the title + vial +
     eyebrow now (lede deleted), so it doesn't need vertical heroics; a
     bit of breathing room on either side is enough. */
  padding: var(--s-6) var(--gutter);
  display: grid;
  /* One row only: stage hugs the left, eyebrow (№01 — The Catalog) sits
     at the bottom-right. */
  grid-template-columns: auto 1fr;
  grid-template-areas: "stage num";
  align-items: end;
  gap: 24px 48px;
  border-bottom: 1px solid var(--rule);
}
.shop-hero__num {
  grid-area: num;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-200);
  font-size: 15px;
  justify-self: end;
  align-self: end;
  padding-bottom: 8px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-bottom-color var(--dur-fast) var(--ease);
}
.shop-hero__num:hover,
.shop-hero__num:focus-visible {
  color: var(--gold-100);
  border-bottom-color: var(--gold-300);
  outline: none;
}
.shop-hero__stage { grid-area: stage; }

/* Stage holds the title on the left and a trio of floating vials on the
   right. Each vial gets its own positioning wrapper so its halo and
   rotate-animation transforms compose without fighting siblings. Gap
   tightened from the single-vial layout (was 24/64) since the trio + title
   has four flex items now and a tighter rhythm reads as deliberate. */
.shop-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 40px) clamp(16px, 2.5vw, 40px);
  isolation: isolate;
}
.shop-hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  /* Trimmed top-end again for the two-vial composition — was 96, now 80,
     which keeps "Catalog." legible without the hero towering. */
  font-size: clamp(43px, 5.4vw, 86px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-align: left;
  color: var(--beige-50);
  margin: 0;
}
.shop-hero__title em { font-style: italic; color: var(--gold-100); }

/* Vial wrapper — establishes a positioning context for the absolute-
   positioned img + the gold halo, and a fixed aspect so the vial column
   doesn't collapse when the title gets long. Aspect tightened from 4/5
   to 1/1 so the vial column doesn't add unnecessary vertical height to
   the hero — the vial img inside is still rotated and centered. */
.shop-hero__vial-wrap {
  position: relative;
  flex-shrink: 0;
  /* Smaller now that the trio dropped to a duo — keeps the composition
     feeling like a deliberate accent rather than the page's main event. */
  width: clamp(150px, 16vw, 240px);
  aspect-ratio: 1 / 1;
  /* Each wrap is now an <a> linking to its product page. */
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}
/* Hover affordance — halo intensifies, img scales just slightly. The
   img already runs the float-bob keyframes, so we use the existing
   `--rest-rot`/`--hover-rot` custom properties + a 1.05 scale on top.
   Note: the float-bob animation overrides discrete transitions while
   running, so the scale snaps in rather than transitions — that's fine
   here, it reads as a confident click target. */
.shop-hero__vial-wrap::before {
  transition: opacity 320ms var(--ease), filter 320ms var(--ease);
}
.shop-hero__vial-wrap:hover::before,
.shop-hero__vial-wrap:focus-visible::before {
  opacity: 1.15;
  filter: blur(8px);
}
.shop-hero__vial-wrap:hover .shop-hero__vial,
.shop-hero__vial-wrap:focus-visible .shop-hero__vial {
  filter: drop-shadow(0 36px 70px rgba(0,0,0,0.7))
          drop-shadow(0 0 24px rgba(212, 175, 96, 0.35));
}
.shop-hero__vial-wrap:focus-visible {
  outline: 1px solid var(--gold-300);
  outline-offset: 12px;
}
/* Stagger the trio vertically — Wolverine high, GHK-Cu low, KPV
   mid-high. Wave pattern reads as intentional rather than misaligned.
   The translation is on the wrap, not the img, so the float-bob
   keyframes (which transform the img) compose correctly on top. */
.shop-hero__stage > .shop-hero__vial-wrap:nth-of-type(1) {
  transform: translateY(-12px);
}
.shop-hero__stage > .shop-hero__vial-wrap:nth-of-type(2) {
  transform: translateY(18px);
}
.shop-hero__stage > .shop-hero__vial-wrap:nth-of-type(3) {
  transform: translateY(-6px);
}
/* Champagne glow halo behind the vial, vertically centred on the vial body. */
.shop-hero__vial-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(170px, 18vw, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(212, 175, 96, 0.46) 0%,
    rgba(212, 175, 96, 0.24) 28%,
    rgba(212, 175, 96, 0.09) 52%,
    rgba(212, 175, 96, 0) 72%
  );
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.shop-hero__vial {
  /* Per-vial rest + hover rotation come from custom properties so each
     sibling can lean a different way while sharing the same float-bob
     keyframes. Defaults match the original Wolverine angle. */
  --rest-rot: -14deg;
  --hover-rot: -12deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, 14vw, 200px);
  height: auto;
  transform-origin: 50% 80%;
  transform: translate(-50%, -50%) rotate(var(--rest-rot));
  animation: shopHeroHover 5.5s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  z-index: 1;
}
/* GHK-Cu — leans the opposite way from Wolverine for a balanced pair. */
.shop-hero__vial--ghk {
  --rest-rot: 12deg;
  --hover-rot: 10deg;
  /* Negative delay = animation starts mid-cycle, so the bob is out of
     phase with Wolverine. */
  animation-delay: -2.2s;
}
/* KPV — fills the dark space between GHK-Cu and the №01 eyebrow. Gentle
   left-lean and a third animation phase so all three vials breathe
   independently rather than in sync. */
.shop-hero__vial--kpv {
  --rest-rot: -6deg;
  --hover-rot: -4deg;
  animation-delay: -3.8s;
}
@keyframes shopHeroHover {
  0%, 100% { transform: translate(-50%, -50%)              rotate(var(--rest-rot)); }
  50%      { transform: translate(-50%, calc(-50% - 14px)) rotate(var(--hover-rot)); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-hero__vial { animation: none; }
}

@media (max-width: 900px) {
  /* MOBILE HERO POLICY (≤900px — same breakpoint the header collapses at):
     the floating vials (Wolverine + GHK-Cu + KPV) dominated the phone
     viewport — the lone Wolverine vial was previously blown up to
     width:100% / max-width:320px and centred, pushing the catalog itself
     below the fold. On mobile we DROP all three vials entirely and slim the
     hero down to just the title + the "№ 01 — The Catalog" eyebrow so the
     products are visible immediately. Desktop (>900px) is untouched. */
  .shop-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "num";
    /* Slim it down — no vial means no need for the desktop vertical room. */
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
    gap: 12px;
  }
  .shop-hero__num {
    justify-self: start;
    padding-bottom: 0;
  }
  /* Hide the floating vials (the bulk of the hero's height) on mobile. */
  .shop-hero__vial-wrap { display: none; }
  /* With the vials gone the stage is just the title — collapse its flex
     extras so it can't reserve vial-sized vertical space. */
  .shop-hero__stage {
    display: block;
    min-height: 0;
  }
}
/* Sentinel sits between the hero/research-strip and the toolbar. When it
   scrolls above the header, the IntersectionObserver flips the toolbar into
   `.is-collapsed`, leaving only the search input visible. */
.toolbar-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}

.shop-toolbar {
  /* Vertical was 20px / 16px gap — trimmed ~20% to give the catalog
     grid more visible real estate. Horizontal padding (gutter)
     unchanged. */
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 72px; z-index: 10;
  background: rgba(7,6,10,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 12px;
  /* Ease-in-out-cubic — gentle ramp-in, gentle ramp-out, body of motion in
     the middle. Spreads the visible movement across the full duration so a
     long timer reads as long. */
  --tb-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --tb-dur: 1000ms;
  --tb-dur-fade: 560ms;
  transition:
    padding var(--tb-dur) var(--tb-ease),
    gap var(--tb-dur) var(--tb-ease);
}
.shop-toolbar__top {
  /* Animate the column tracks themselves so when sort/count collapse, the
     search input visibly expands into the freed space. Modern Chromium and
     Safari interpolate explicit `fr` values smoothly; older engines snap,
     which is acceptable. */
  transition: grid-template-columns var(--tb-dur, 460ms) var(--tb-ease, ease);
}

/* Chip rows: fade first, then collapse the height — the small lag makes the
   toolbar read as "lifting away" rather than slamming shut. */
.shop-toolbar__row {
  max-height: 100px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition:
    max-height var(--tb-dur, 720ms) var(--tb-ease, ease),
    opacity var(--tb-dur-fade, 380ms) var(--tb-ease, ease),
    margin var(--tb-dur, 720ms) var(--tb-ease, ease),
    transform var(--tb-dur, 720ms) var(--tb-ease, ease);
}

/* Sort + item-count: smooth width/opacity fade (was display:none — that
   was the abrupt step the user noticed). */
.shop-sort,
.shop-toolbar__count {
  opacity: 1;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity var(--tb-dur-fade, 380ms) var(--tb-ease, ease),
    max-width var(--tb-dur, 720ms) var(--tb-ease, ease),
    padding var(--tb-dur, 720ms) var(--tb-ease, ease),
    margin var(--tb-dur, 720ms) var(--tb-ease, ease),
    transform var(--tb-dur, 720ms) var(--tb-ease, ease);
}

/* Collapsed state — search + density + sort + count all remain. Only
   the chip rows (category, price) drop. The full top-row width is
   preserved so the search input doesn't visibly shift its right edge
   when the toolbar collapses, and the count stays anchored as a status
   indicator the user can keep referencing while they scroll the grid. */
.shop-toolbar.is-collapsed {
  /* Was 12px each — trimmed to 8px so the collapsed sticky bar takes
     even less of the viewport once the chip rows drop. */
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 0;
}
.shop-toolbar.is-collapsed .shop-toolbar__top {
  /* All four tracks keep their natural widths — no `0fr` collapse on
     scroll, so the search column's right edge stays fixed. */
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.shop-toolbar.is-collapsed .shop-toolbar__row {
  max-height: 0;
  opacity: 0;
  margin: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  /* Defer visibility:hidden until the transition completes, so the row
     stays interactive-feeling during the collapse and doesn't blink out. */
  transition:
    max-height var(--tb-dur, 720ms) var(--tb-ease, ease),
    opacity var(--tb-dur-fade, 380ms) var(--tb-ease, ease),
    margin var(--tb-dur, 720ms) var(--tb-ease, ease),
    transform var(--tb-dur, 720ms) var(--tb-ease, ease),
    visibility 0s linear var(--tb-dur, 720ms);
}

/* Honor reduced-motion: snap instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .shop-toolbar,
  .shop-toolbar__top,
  .shop-toolbar__row,
  .shop-sort,
  .shop-toolbar__count {
    transition: none !important;
  }
}
/* Top row: search + density + sort + count.
   Density sits to the right of the search input so the search shrinks to
   share the row. minmax(0, 1fr) lets the search bar compress below its
   intrinsic content width when neighbours need more space. */
.shop-toolbar__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 16px;
  align-items: center;
}
/* Below ~860px, sort + count wrap below to keep search + density together. */
@media (max-width: 860px) {
  .shop-toolbar__top { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-sort, .shop-toolbar__count {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
@media (max-width: 560px) {
  .shop-toolbar__top { grid-template-columns: 1fr; }
  .shop-density, .shop-sort, .shop-toolbar__count { justify-self: stretch; }

  /* When the toolbar is scrolled and collapses into its sticky form,
     phone viewports get a tight two-column row: search input on the
     left (flex) + density chooser on the right (auto width). Sort and
     item-count drop out entirely — they're not actionable when the
     user is mid-scroll, and they were the reason the collapsed bar
     felt cluttered before. */
  .shop-toolbar.is-collapsed .shop-toolbar__top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
  .shop-toolbar.is-collapsed .shop-sort,
  .shop-toolbar.is-collapsed .shop-toolbar__count {
    /* display: none removes them from the grid layout entirely so the
       search input truly gets the full freed space. */
    display: none;
  }
  /* Pin the search input to a comfortable phone height in the collapsed
     state and shave the density chooser slightly so they sit balanced. */
  .shop-toolbar.is-collapsed .shop-search__input {
    padding-top: 10px;
    padding-bottom: 9px;
    font-size: 15px;
  }
  .shop-toolbar.is-collapsed .shop-density {
    /* Just the segmented chooser, no label, on phones when collapsed. */
    gap: 0;
  }
  .shop-toolbar.is-collapsed .shop-density__label {
    display: none;
  }
}

/* Search */
.shop-search {
  position: relative;
  display: flex; align-items: center;
}
.shop-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fg-muted);
  pointer-events: none;
}
.shop-search__input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  /* Slightly heavier bottom edge so the underline reads as the dominant rule
     of the field — gold-on-interaction matches the nav/chip language. */
  border-bottom: 2px solid var(--rule-strong);
  color: var(--beige-50);
  font-family: var(--font-sans);
  /* 13px reads as deliberately compact on desktop. On phones we need
     ≥16px to suppress iOS focus-zoom — the 720px breakpoint below
     bumps it just for that tier. */
  font-size: 14px;
  /* Vertical padding trimmed 12/11 → 9/8 (~25% off). Horizontal kept
     so the search icon and clear button don't overlap text. */
  padding: 9px 14px 8px 42px;
  letter-spacing: 0.04em;
  transition: border-color var(--dur-fast) var(--ease);
}
.shop-search__input::placeholder { color: var(--fg-muted); letter-spacing: 0.06em; }
.shop-search__input:hover {
  border-bottom-color: var(--gold-300);
}
.shop-search__input:focus {
  outline: none;
  border-bottom-color: var(--gold-100);
}
.shop-search__clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.shop-search__clear:hover { color: var(--gold-100); }
.shop-search__clear[hidden] { display: none; }

/* Sort */
.shop-sort {
  display: inline-flex; align-items: center; gap: 12px;
}
.shop-sort__label {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-muted);
}
.shop-sort__select {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--rule-strong);
  color: var(--beige-50);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  /* Vertical 11/10 → 8/7 to match the search input's reduced height. */
  padding: 8px 36px 7px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold-200) 50%),
    linear-gradient(-45deg, transparent 50%, var(--gold-200) 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--dur-fast) var(--ease);
}
.shop-sort__select:hover { border-bottom-color: var(--gold-300); }
.shop-sort__select:focus { outline: none; border-bottom-color: var(--gold-100); }
.shop-sort__select option { background: var(--ink-1); color: var(--beige-50); }

/* Filter rows */
.shop-toolbar__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 700px) {
  .shop-toolbar__row { grid-template-columns: 1fr; gap: 8px; }
}
.shop-toolbar__rowlabel {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-muted);
  padding-top: 12px;
}
.shop-toolbar__filters { display: flex; gap: 4px; flex-wrap: wrap; }
.shop-toolbar__filters button {
  padding: 12px 16px; border: 1px solid var(--rule);
  /* 44px tap target for the category filter chips — they're how a
     phone user narrows the catalog, so they need to be easy to hit. */
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--beige-200);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.shop-toolbar__filters button:hover { border-color: var(--gold-300); color: var(--gold-100); }
.shop-toolbar__filters button.is-active { background: var(--gold-200); color: var(--ink-0); border-color: var(--gold-200); }

.shop-toolbar__count {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-muted);
  white-space: nowrap;
}

/* Empty state */
.shop-empty {
  padding: var(--s-9) var(--gutter);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.shop-empty__num {
  font-family: var(--font-serif); font-style: italic;
  color: var(--gold-200); font-size: 15px;
  margin-bottom: 16px;
}
.shop-empty h3 {
  font-family: var(--font-serif);
  font-size: clamp(39px, 5vw, 60px);
  color: var(--beige-50);
  margin: 0 0 12px;
  line-height: 1.1;
}
.shop-empty p {
  color: var(--beige-200);
  font-size: 15px;
  line-height: 1.85;
  margin: 0 auto 24px;
  max-width: 42ch;
}

.shop-grid {
  /* Outer page gutter is also fluid so the grid hugs the viewport on
     phones without losing the generous side air on desktop. */
  padding: clamp(24px, 5vw, var(--s-7)) var(--gutter);
  display: grid;
  /* Default to 2 columns. Density chooser overrides below. The
     `minmax(0, 1fr)` form prevents long words from forcing a card to
     overflow the column track. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 32px);
}
/* Density overrides — EXACT column counts at all widths above the
   mobile floor. Previous implementation used `auto-fill, minmax(...)`
   which made the density value a min-card-width hint, not a column
   count. The result was density="2" producing 4 cards on a 1440px
   viewport (1440 / 320 = 4.5 fits). Customers expect "2 per row" to
   mean two cards across; this version delivers that. */
.shop-grid[data-density="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 32px);
}
.shop-grid[data-density="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 28px);
}
.shop-grid[data-density="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 24px);
}
.shop-grid[data-density="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 16px);
}

/* Mobile cascade — the chosen density may not be legible at very narrow
   widths. Step down progressively rather than slamming straight to 1
   column from any density. */
@media (max-width: 900px) {
  /* Caps density at 3 — denser layouts would crush tap targets on
     tablets. */
  .shop-grid[data-density="4"],
  .shop-grid[data-density="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Caps density at 2 — 3 columns at <640px makes for tiny cards. */
  .shop-grid[data-density="3"],
  .shop-grid[data-density="4"],
  .shop-grid[data-density="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  /* Below 360px (iPhone SE 1st gen and similar very narrow phones) every
     density collapses to 1 column. Above 360px we keep 2 columns so the
     full catalog reads as a browsable grid on modern phones — 2 cards at
     390-428px viewport gives each card ~170-200px of width which is the
     comfort zone for tap targets while still letting the customer scan
     the catalog instead of paging through one card at a time. */
  .shop-grid,
  .shop-grid[data-density] { grid-template-columns: 1fr; }
}

/* Density segmented control — sits between search and sort. */
.shop-density {
  display: inline-flex; align-items: center; gap: 12px;
}
.shop-density__label {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-muted);
}
.shop-density__seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--rule-strong);
  background: var(--ink-2);
}
.shop-density__seg button {
  /* Width keeps the icons centered without re-flowing the segmented
     control. Height is 44px so mobile finger taps land reliably; on
     desktop the row sits next to a 44px search input so this also
     keeps the toolbar visually balanced. */
  width: 38px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--beige-200);
  border: 0;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.shop-density__seg button:last-child { border-right: 0; }
.shop-density__seg button:hover { color: var(--gold-100); }
.shop-density__seg button.is-active {
  background: var(--gold-200);
  color: var(--ink-0);
}
/* Icon: vertical bars representing card count */
.shop-density__icon {
  display: inline-flex; align-items: stretch; gap: 2px;
  height: 14px; width: 18px;
}
.shop-density__icon i {
  flex: 1;
  background: currentColor;
  display: block;
}

@media (max-width: 900px) { .shop-toolbar { top: 64px; } }

/* Mobile: bump search + sort font-size above the 16px iOS focus-zoom
   floor. Desktop keeps the tighter 13/12 sizing for density. */
@media (max-width: 720px) {
  .shop-search__input,
  .shop-sort__select { font-size: 17px; }
}

/* Submenu-view banner — names the active Shop dropdown view (Popular /
   Blends / Bundle & Save) above the grid so a filtered catalog reads as
   intentional, not broken. Hidden for the default 'all' view. It's
   inserted just before #shop-grid, so it sits above the cards. */
.shop-view-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 var(--gutter) 18px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold-200);
  background: rgba(0, 0, 0, 0.12);
}
.shop-view-banner[hidden] { display: none; }
.shop-view-banner__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige-50);
}
.shop-view-banner__clear {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: color var(--dur-fast) var(--ease);
}
.shop-view-banner__clear:hover { color: var(--gold-100); }

/* Mobile only: hide the Category + Price filter rows — they eat too much vertical
   room on phones (jay 2026-07-13). The Sort dropdown + count stay (separate container).
   Filtering defaults to Any/All so hiding the UI just shows all products. */
@media (max-width: 700px) {
  .shop-toolbar__row { display: none !important; }
}