/* ============================================================================
   THE HANGING BASKET CO. - site.css
   Design system: "Merchant's Yard". A British horticultural merchant, not a
   dropship template. Warm bone paper, botanical ink, aged brass as a marker.
   Hairlines instead of borders. Products staged on lit plinths. Outfit only.

   Section order matters: MOBILE OVERRIDES LIVE AT THE END OF THIS FILE.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* ground */
  --paper:      #fbf9f4;   /* warm bone - never pure white */
  --paper-2:    #f4efe3;   /* raised paper */
  --paper-3:    #ebe4d4;   /* pressed paper */
  --card:       #ffffff;

  /* ink */
  --ink:        #17231b;   /* botanical near-black */
  --ink-2:      #47544a;   /* secondary text */
  --ink-3:      #7d887f;   /* tertiary / micro-labels */

  /* brand */
  --forest:     #1d3a2a;   /* deep band green */
  --forest-2:   #142a1e;   /* deeper */
  --forest-3:   #0d1c14;   /* deepest */
  --moss:       #3d6b4c;   /* live green, used sparingly */
  --brass:      #a07c38;   /* the accent - a marker, never a fill */
  --brass-2:    #c9a35c;   /* brass on dark */
  --clay:       #a85c3c;   /* warm secondary, sale marks */
  --sage:       #8fa08b;

  /* on-dark */
  --on-dark:    #f3efe4;
  --on-dark-2:  rgba(243, 239, 228, 0.68);

  /* lines - hairlines, drawn with inset shadow not border */
  --hair:       rgba(23, 35, 27, 0.11);
  --hair-2:     rgba(23, 35, 27, 0.18);
  --hair-dark:  rgba(243, 239, 228, 0.16);

  /* elevation - low, wide, warm. never a hard drop shadow */
  --lift-1: 0 1px 2px rgba(23, 35, 27, 0.04), 0 8px 24px -12px rgba(23, 35, 27, 0.16);
  --lift-2: 0 2px 6px rgba(23, 35, 27, 0.05), 0 22px 48px -20px rgba(23, 35, 27, 0.24);
  --lift-3: 0 4px 10px rgba(23, 35, 27, 0.06), 0 40px 80px -32px rgba(23, 35, 27, 0.30);

  /* geometry */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-arch: 999px 999px 14px 14px;   /* the doorway arch */
  --wrap: 1240px;
  --wrap-tight: 940px;
  --wrap-read: 700px;
  --pad: 20px;
  --gap: clamp(52px, 6vw, 86px);     /* vertical section rhythm */

  /* motion */
  --ease: cubic-bezier(0.22, 0.72, 0.28, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: 'Outfit', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------- 2. reset/base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; height: auto; display: block; }
/* <picture> must not become a layout box of its own - the <img> inside is what
   the plinth/stage rules position. `display: contents` makes it transparent. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brass); color: #fff; }

h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.021em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 3.5vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
h3 { font-size: clamp(1.08rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.15em; margin: 0 0 1.05em; }
li { margin-bottom: 0.35em; }
strong, b { font-weight: 600; }
hr { border: 0; height: 1px; background: var(--hair); margin: 2rem 0; }

.lede {
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.66;
  color: var(--ink-2);
  max-width: 46ch;
}

/* focus - visible, brass, never removed */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.band-forest :focus-visible { outline-color: var(--brass-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -100px; z-index: 400;
  background: var(--ink); color: var(--on-dark);
  padding: 12px 20px; border-radius: var(--r-sm); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------- 3. layout basics */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-tight { max-width: var(--wrap-tight); }
.wrap-read  { max-width: var(--wrap-read); }
section { padding: var(--gap) 0; position: relative; }
section.tight { padding: calc(var(--gap) * 0.62) 0; }

.band-paper  { background: var(--paper); }
.band-raised { background: var(--paper-2); }
.band-card   { background: var(--card); }
.band-forest { background: var(--forest); color: var(--on-dark); }
.band-forest h1, .band-forest h2, .band-forest h3, .band-forest h4 { color: var(--on-dark); }
.band-forest p { color: var(--on-dark-2); }
.band-forest a { color: var(--on-dark); }
.band-ink    { background: var(--forest-3); color: var(--on-dark); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--on-dark); }
.band-ink p { color: var(--on-dark-2); }

/* hairline between two same-tone bands */
.band-paper + .band-paper, .band-card + .band-card { box-shadow: inset 0 1px 0 var(--hair); }

/* ------------------------------------------------- 4. signature type devices */

/* micro-label: the uppercase brass tag that opens most sections */
.micro {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.685rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 14px;
}
.micro::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.55;
  flex: 0 0 22px;
}
.band-forest .micro, .band-ink .micro { color: var(--brass-2); }
.micro-plain::before { display: none; }

/* index numeral - 01 / 02 in brass, the catalogue tic */
.idx {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--brass); font-variant-numeric: tabular-nums;
}

/* the chain drop - a fine hairline with a brass ring, echoing a basket chain.
   Purely decorative; used as a section divider. */
.chain {
  display: block; width: 1px; height: 46px; margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--hair-2) 30%, var(--hair-2));
  position: relative;
}
.chain::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brass);
  background: var(--paper);
}
.band-forest .chain, .band-ink .chain {
  background: linear-gradient(180deg, transparent, var(--hair-dark) 30%, var(--hair-dark));
}
.band-forest .chain::after, .band-ink .chain::after { background: var(--forest); box-shadow: inset 0 0 0 1.5px var(--brass-2); }

/* section head */
.shead { max-width: 60ch; margin-bottom: clamp(28px, 3vw, 44px); }
.shead p { color: var(--ink-2); margin: 0; }
.band-forest .shead p, .band-ink .shead p { color: var(--on-dark-2); }
.shead-split { display: grid; gap: 18px; align-items: end; max-width: none; }
.shead-split .shead-copy { max-width: 56ch; }
.shead-split .shead-aside { justify-self: start; }

/* rule with a centred brass diamond */
.rule-diamond { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.rule-diamond::before, .rule-diamond::after {
  content: ""; height: 1px; background: var(--hair); flex: 1;
}
.rule-diamond i {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--brass); flex: 0 0 6px; font-style: normal;
}

/* ------------------------------------------------------------- 5. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 0.94rem; letter-spacing: 0.005em; line-height: 1;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: none; border: 0; cursor: pointer; text-align: center;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  /* the wipe - a fill that rises from the bottom on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%); transition: transform 0.42s var(--ease-out);
}
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn-solid { background: var(--forest); color: var(--on-dark); }
.btn-solid::after { background: var(--brass); }
.btn-solid:hover { color: #fff; }

.btn-brass { background: var(--brass); color: #fff; }
.btn-brass::after { background: var(--forest); }

.btn-line {
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2);
}
.btn-line::after { background: var(--ink); }
.btn-line:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }

.btn-line-light {
  color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hair-dark);
}
.btn-line-light::after { background: var(--on-dark); }
.btn-line-light:hover { color: var(--forest); }

.btn-lg { min-height: 58px; padding: 0 36px; font-size: 1rem; }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* text link with an animated brass underline */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.9rem; color: var(--ink);
  padding-bottom: 3px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: right;
  transition: transform 0.42s var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink i { font-style: normal; transition: transform 0.35s var(--ease); }
.tlink:hover i { transform: translateX(4px); }
.band-forest .tlink, .band-ink .tlink { color: var(--on-dark); }
.band-forest .tlink::after, .band-ink .tlink::after { background: var(--brass-2); }

/* ---------------------------------------------------------- 6. announcement */
.announce {
  background: var(--forest-3); color: var(--on-dark);
  font-size: 0.775rem; font-weight: 500; letter-spacing: 0.045em;
  position: relative; z-index: 130;
}
.announce-in {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 38px; padding: 7px var(--pad); text-align: center;
}
.announce b { color: var(--brass-2); font-weight: 600; }
.announce .sep { opacity: 0.3; }

/* --------------------------------------------------------------- 7. header */
.hdr {
  position: sticky; top: 0; z-index: 120;
  background: rgba(251, 249, 244, 0.86);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: inset 0 -1px 0 var(--hair);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.hdr.is-stuck { box-shadow: inset 0 -1px 0 var(--hair), 0 10px 30px -18px rgba(23, 35, 27, 0.4); }
.hdr-in {
  display: flex; align-items: center; gap: 16px;
  min-height: 78px; position: relative; min-width: 0;
}

/* min-width:0 on both the row and the wordmark is what lets the brand wrap
   instead of pushing the icon cluster past the viewport on a 360px phone. */
.logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.logo img { width: 60px; height: 60px; object-fit: contain; mix-blend-mode: multiply; flex: 0 0 auto; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-txt b {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.logo-txt span {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); margin-top: 2px;
}

/* primary nav - links and mega triggers must share line-height + height */
.nav { display: none; margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > ul > li { margin: 0; }
.nav-t {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; line-height: 1; padding: 0 14px;
  font-size: 0.92rem; font-weight: 500; color: var(--ink-2);
  border-radius: 999px; cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-t:hover, .nav-t[aria-expanded="true"], .nav-t.is-here { color: var(--ink); background: var(--paper-3); }
.nav-t .caret {
  width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); opacity: 0.55;
  transition: transform 0.3s var(--ease);
}
.nav-t[aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* mega panel - anchored to .hdr, never to the <li> */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); box-shadow: inset 0 1px 0 var(--hair), var(--lift-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-out),
              visibility 0s linear 0.32s;
  z-index: 121;
}
.mega.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-out),
              visibility 0s linear 0s;
}
.mega-in { display: grid; gap: 30px; padding: 34px var(--pad) 38px; max-width: var(--wrap); margin: 0 auto; }
.mega-col h4 {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 14px; padding-bottom: 10px;
  box-shadow: inset 0 -1px 0 var(--hair);
}
.mega-col a {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  font-size: 0.92rem; color: var(--ink-2);
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}
.mega-col a:hover { color: var(--ink); transform: translateX(3px); }
.mega-col a em { font-style: normal; font-size: 0.72rem; color: var(--ink-3); }
.mega-feat {
  background: var(--paper-2); border-radius: var(--r-md); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.mega-feat .mega-feat-img {
  border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 80% at 50% 4%, #fff 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f6f2e8 0%, #e6dfcf 100%);
}
.mega-feat .mega-feat-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.mega-feat h5 { margin: 0; font-size: 0.98rem; font-weight: 600; }
.mega-feat p { margin: 0; font-size: 0.85rem; color: var(--ink-2); }

/* header actions */
.hdr-act { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
.nav + .hdr-act { margin-left: 12px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); position: relative;
  transition: background 0.25s var(--ease);
}
.icon-btn:hover { background: var(--paper-3); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bag-count {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--brass); color: #fff;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 0 0 2px var(--paper);
  transform: scale(0); transition: transform 0.3s var(--ease-out);
}
.bag-count.has { transform: scale(1); }
.bag-btn.is-bumped .bag-count { animation: bump 0.45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.4); } }

.burger { display: inline-flex; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 19px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------ 8. search bar */
/* visibility must flip INSTANTLY on open and only after the fade on close.
   A plain `transition: visibility .28s` steps the value at half-duration, so
   focus() lands while the panel is still hidden and is silently dropped. */
.searchwrap {
  position: fixed; inset: 0; z-index: 210; display: grid; align-items: start;
  background: rgba(20, 42, 30, 0.4); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}
.searchwrap.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0s;
}
.searchbox {
  background: var(--paper); padding: 26px var(--pad) 30px;
  box-shadow: var(--lift-3);
  transform: translateY(-14px); transition: transform 0.34s var(--ease-out);
}
.searchwrap.is-open .searchbox { transform: none; }
.searchbox .wrap { display: grid; gap: 16px; min-width: 0; }
.search-field { display: flex; align-items: center; gap: 12px; box-shadow: inset 0 -1px 0 var(--hair-2); padding-bottom: 12px; min-width: 0; }
.search-field svg { width: 22px; height: 22px; stroke: var(--ink-3); fill: none; stroke-width: 1.5; flex: 0 0 22px; }
.search-field input {
  flex: 1; border: 0; background: none; font-size: 1.35rem; font-weight: 400;
  letter-spacing: -0.015em; padding: 6px 0; min-width: 0;
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field input:focus { outline: none; }
.search-res { display: grid; gap: 2px; max-height: 52vh; overflow-y: auto; }
.search-hit {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center;
  padding: 9px 10px; border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.search-hit:hover { background: var(--paper-2); }
.search-hit-img {
  width: 54px; height: 54px; border-radius: var(--r-xs); overflow: hidden;
  background: linear-gradient(180deg, #f6f2e8, #e6dfcf);
}
.search-hit-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.search-hit b { font-weight: 500; font-size: 0.93rem; display: block; }
.search-hit em { font-style: normal; font-size: 0.76rem; color: var(--ink-3); }
.search-hit .price { font-weight: 600; font-size: 0.9rem; }
.search-empty { color: var(--ink-2); font-size: 0.92rem; padding: 8px 2px; }
.search-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.search-sug a {
  font-size: 0.8rem; padding: 7px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-2);
  transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.search-sug a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }

/* ------------------------------------------------------------ 9. mobile nav */
.mnav {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); z-index: 205;
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.38s var(--ease-out);
  box-shadow: var(--lift-3);
}
.mnav.is-open { transform: none; }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad); box-shadow: inset 0 -1px 0 var(--hair); flex: 0 0 auto;
}
.mnav-body { flex: 1; overflow-y: auto; padding: 8px var(--pad) 26px; -webkit-overflow-scrolling: touch; }
.mnav-grp { box-shadow: inset 0 -1px 0 var(--hair); }
.mnav-grp > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px; padding: 0; border: 0; background: none;
  font-size: 1.02rem; font-weight: 500; cursor: pointer; text-align: left;
}
.mnav-grp > button .caret {
  width: 8px; height: 8px; border-right: 1.4px solid var(--ink-3); border-bottom: 1.4px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.3s var(--ease); flex: 0 0 8px;
}
.mnav-grp > button[aria-expanded="true"] .caret { transform: rotate(-135deg); }
.mnav-sub { display: grid; overflow: hidden; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease-out); }
.mnav-grp > button[aria-expanded="true"] + .mnav-sub { grid-template-rows: 1fr; }
.mnav-sub > div { min-height: 0; }
.mnav-sub a {
  display: block; padding: 11px 0 11px 16px; font-size: 0.94rem; color: var(--ink-2);
  box-shadow: inset 2px 0 0 var(--hair);
}
.mnav-sub a:last-child { margin-bottom: 12px; }
.mnav-flat {
  display: flex; align-items: center; min-height: 56px; font-size: 1.02rem; font-weight: 500;
  box-shadow: inset 0 -1px 0 var(--hair);
}
.mnav-foot { padding: 20px 0 0; display: grid; gap: 10px; }
.mnav-foot .btn { width: 100%; }
.mnav-meta { font-size: 0.82rem; color: var(--ink-3); margin-top: 14px; }

.scrim {
  position: fixed; inset: 0; z-index: 195; background: rgba(20, 42, 30, 0.44);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.scrim.show { opacity: 1; }

/* ------------------------------------------------- 10a. TWIN HERO BANNER
   Left: auto-rotating slider. Right: fixed promo tile. Below: assurance rail.
   Both banners must resolve to the SAME height - that is what makes the pair
   read as one object rather than two boxes. */
.hero-band { padding: 16px 0; background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.hban {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 16 / 10; background: var(--forest-2); isolation: isolate; display: block;
}
.hban-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none; }
/* slide 1 is visible before JS runs; .is-live (set by JS) hands control over */
.hban > .hban-slide:first-child { opacity: 1; pointer-events: auto; }
.hban.is-live > .hban-slide:first-child:not(.on) { opacity: 0; pointer-events: none; }
.hban-slide.on { opacity: 1; pointer-events: auto; }

/* The catalogue is white-cutout supplier photography, so a cover-crop would
   look like a sticker on a wall. Each slide gets a lit botanical ground and
   the product is CONTAINED on it, blended to dissolve the white. */
.hban-bg { position: absolute; inset: 0; z-index: 0; }
.hban-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 65% at 76% 12%, rgba(160, 124, 56, 0.34), transparent 62%),
    radial-gradient(70% 60% at 8% 96%, rgba(61, 107, 76, 0.5), transparent 68%),
    linear-gradient(115deg, var(--forest-3) 0%, var(--forest-2) 52%, var(--forest) 100%);
}
.hban-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: repeating-linear-gradient(90deg, rgba(243,239,228,0.05) 0 1px, transparent 1px 78px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 82%);
}
/* THE PAPER ROUNDEL.
   These are white-background supplier cutouts. `mix-blend-mode: multiply`
   dissolves that white - but only over a LIGHT backdrop; over this dark green
   band multiply crushes the product to black. So give the product a real,
   deliberate paper plate to sit on, and multiply against that. Without the
   roundel the photo's white background renders as a hard white rectangle
   floating on the green, which is exactly how this shipped. */
.hban-shot {
  position: absolute; z-index: 1; right: 3%; top: 50%; translate: 0 -50%;
  width: 40%; aspect-ratio: 1; display: grid; place-items: center;
  /* clip to the plate: the photo is a SQUARE whose corners cross the circle's
     edge, and those corners rendered as little notches on the rim */
  border-radius: 50%; overflow: hidden;
}
.hban-shot::before {                       /* the plate */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, #fffdf8 0%, #f6f1e5 58%, #e9e1cf 100%);
  box-shadow: 0 26px 58px -22px rgba(0, 0, 0, 0.6),
              inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.hban-shot::after {                        /* contact shadow on the plate */
  content: ""; position: absolute; left: 50%; bottom: 15%;
  width: 46%; height: 6%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28, 44, 30, 0.34), transparent 70%);
  filter: blur(6px);
}
.hban-shot img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; padding: 13%; mix-blend-mode: multiply;
  transform: scale(1.04); transition: transform 8s linear;
}
.hban-slide.on .hban-shot img { transform: scale(1); }
.hban-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(6,14,9,0.86) 0%, rgba(6,14,9,0.55) 42%, rgba(6,14,9,0.02) 74%);
}
.hban-c {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 30px 32px 66px; max-width: 54%;
}
.hban-k {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-2); display: inline-flex; align-items: center; gap: 11px; margin: 0;
}
.hban-k::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.6; }
.hban-t {
  color: #fff; font-size: clamp(1.35rem, 2.3vw, 2.05rem); font-weight: 500;
  letter-spacing: -0.026em; line-height: 1.08; margin: 0; text-wrap: balance;
}
.hban-s { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin: 0; max-width: 26em; }
.hban-cta {
  align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--forest-3);
  font-size: 0.84rem; font-weight: 600; padding: 12px 22px; border-radius: 999px;
  transition: gap 0.3s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.hban-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.hban-cta:hover { gap: 14px; background: var(--brass); color: #fff; }
.hban-plate {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  background: rgba(8,16,11,0.55); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.17); border-radius: 10px;
  padding: 8px 13px; color: #fff; font-size: 0.63rem; letter-spacing: 0.17em;
  text-transform: uppercase; font-weight: 600;
}
.hban-dots { position: absolute; left: 32px; bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.hban-dots button {
  width: 26px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.hban-dots button::after {
  content: ""; display: block; width: 24px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.34); transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.hban-dots button.on::after { background: var(--brass-2); width: 38px; }
.hban-arrows {
  position: absolute; right: 18px; top: 18px; z-index: 3; display: flex; gap: 8px;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.hban:hover .hban-arrows, .hban:focus-within .hban-arrows { opacity: 1; }
.hban-arrows button {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); background: rgba(8,16,11,0.45); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.hban-arrows button:hover { background: #fff; color: var(--forest-3); }
.hban-arrows svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Right-hand promo tile: same shell, no slider furniture.
   The columns are 1.32fr / 1fr, so if the tile kept its own aspect-ratio it
   would come out ~100px shorter than the slider and the pair would read as two
   unrelated boxes. Drop the ratio and let it stretch to the grid row instead. */
.hban-static { aspect-ratio: auto; height: 100%; min-height: 240px; }
.hban-static .hban-slide::after {
  background: linear-gradient(180deg, rgba(6,14,9,0.6) 0%, rgba(6,14,9,0.12) 46%, rgba(6,14,9,0.78) 100%);
}
.hban-static .hban-c { justify-content: space-between; max-width: 100%; right: 0; padding-bottom: 30px; }
.hban-static .hban-top { display: flex; flex-direction: column; gap: 8px; }
.hban-static .hban-shot {
  left: 50%; right: auto; translate: -50% 0; top: 28%;
  height: 44%; width: auto; aspect-ratio: 1;
}

/* assurance rail - the section BELOW owns the gap, not this one */
.assure { padding: 18px 0 0; }
.assure-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
.assure-i { display: flex; align-items: center; gap: 12px; padding: 0 18px; box-shadow: inset 1px 0 0 var(--hair); }
.assure-i:first-child { box-shadow: none; padding-left: 0; }
.assure-i svg { width: 21px; height: 21px; stroke: var(--moss); fill: none; stroke-width: 1.4; flex: 0 0 21px; }
.assure-i b { display: block; font-size: 0.85rem; font-weight: 600; }
.assure-i span { display: block; font-size: 0.77rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- 10. hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--forest-2);
  padding: clamp(48px, 5.5vw, 82px) 0 clamp(56px, 6vw, 92px);
  color: var(--on-dark);
}
/* layered ground: a soft top light + a subtle vignette. no photo required. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 78% 8%, rgba(160, 124, 56, 0.30), transparent 62%),
    radial-gradient(70% 55% at 12% 96%, rgba(61, 107, 76, 0.42), transparent 66%);
}
/* fine trellis lines - the merchant's yard fence, drawn in CSS */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(243,239,228,0.055) 0 1px, transparent 1px 92px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), transparent 78%);
}
.hero-in { position: relative; z-index: 1; display: grid; gap: clamp(34px, 4vw, 56px); align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .glow { color: var(--brass-2); }
.hero .lede { color: var(--on-dark-2); font-size: clamp(1rem, 1.1vw, 1.12rem); max-width: 44ch; margin-bottom: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* trust rail under the hero copy */
.hero-rail { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--hair-dark); }
.hero-rail div { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--on-dark-2); }
.hero-rail svg { width: 16px; height: 16px; stroke: var(--brass-2); fill: none; stroke-width: 1.6; flex: 0 0 16px; }

/* hero composition: an arched product plate with a hanging chain above it */
.hero-art { position: relative; display: grid; place-items: center; }
.hero-chain {
  width: 1px; height: clamp(26px, 4vw, 54px); margin: 0 auto;
  background: linear-gradient(180deg, transparent, rgba(201, 163, 92, 0.75));
  position: relative;
}
.hero-chain::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 15px; height: 15px;
  margin-left: -7.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brass-2);
}
.hero-plate {
  position: relative; width: min(100%, 460px); aspect-ratio: 4 / 5;
  border-radius: var(--r-arch); overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 8%, #fffdf8 0%, rgba(255,253,248,0) 64%),
    linear-gradient(180deg, #f7f3e9 0%, #e5dccb 100%);
  box-shadow: var(--lift-3), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.hero-plate::before {
  content: ""; position: absolute; left: 50%; bottom: 13%; width: 54%; height: 6%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28, 44, 30, 0.32), transparent 70%);
  filter: blur(7px);
}
.hero-plate img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 12% 12% 16%; mix-blend-mode: multiply;
}
/* the floating price/label chip on the hero plate */
.hero-chip {
  position: absolute; right: -10px; bottom: 12%; z-index: 2;
  background: var(--paper); border-radius: var(--r-md); padding: 12px 16px;
  box-shadow: var(--lift-2); display: grid; gap: 2px; text-align: left;
  min-width: 152px;
}
.hero-chip .micro { margin: 0 0 3px; font-size: 0.6rem; }
.hero-chip b { font-size: 0.86rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
.hero-chip .price { color: var(--ink); }

/* --------------------------------------------------------------- 11. ticker */
.ticker {
  background: var(--paper-2); overflow: hidden; position: relative;
  box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair);
}
.ticker-track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-run {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 13px 0; font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2);
}
.ticker-run i {
  font-style: normal; margin: 0 26px; color: var(--brass);
  font-size: 0.5rem; transform: translateY(-2px); display: inline-block;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ------------------------------------------------------- 12. category tiles
   These photos are white-background supplier cutouts. Cover-cropping one onto
   a dark tile renders a white rectangle floating in a green box - which is
   exactly how this shipped. Stage it on a LIGHT plinth instead, contain it,
   and multiply the white away; the caption gets its own dark bar underneath. */
.tiles { display: grid; gap: 14px; }
.tile {
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  border-radius: var(--r-md); background: var(--card); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: transform 0.42s var(--ease-out), box-shadow 0.42s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(160,124,56,0.4), var(--lift-2); }

.tile-stage {
  position: relative; display: block; min-height: 190px; overflow: hidden;
  background-image:
    radial-gradient(120% 80% at 50% 4%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f3e9 0%, #e8e1d1 100%);
}
.tile-stage::after {                       /* contact shadow under the product */
  content: ""; position: absolute; left: 50%; bottom: 11%;
  width: 52%; height: 6%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(28,44,30,0.28), transparent 70%);
  filter: blur(6px);
}
.tile-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 12%; mix-blend-mode: multiply;
  transition: transform 0.8s var(--ease-out);
}
.tile:hover .tile-stage img { transform: translateY(-4px) scale(1.04); }
.tile-idx {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; color: var(--brass);
}

.tile-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px 16px; background: var(--forest); color: var(--on-dark);
}
.tile-txt { display: flex; flex-direction: column; min-width: 0; }
.tile-cap b {
  color: #fff; font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.22;
}
.tile-cap .tile-txt > span {
  color: rgba(243,239,228,0.66); font-size: 0.78rem; margin-top: 3px; line-height: 1.3;
}
.tile-arrow {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  display: grid; place-items: center; color: #fff;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile:hover .tile-arrow { background: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); transform: translateX(3px); }
.tile-wide .tile-stage { min-height: 260px; }

/* --------------------------------------------------- 13. product card + grid */
.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.pcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(160,124,56,0.4), var(--lift-2); }

/* THE STAGE - fixed-inset plinth. white supplier cutouts dissolve via multiply. */
.pcard-stage {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background-image:
    radial-gradient(120% 80% at 50% 4%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f3e9 0%, #e8e1d1 100%);
}
.pcard-stage::before {                       /* contact shadow, UNDER the product */
  content: ""; position: absolute; left: 50%; bottom: 13%;
  width: 54%; height: 6.5%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(28, 44, 30, 0.30), transparent 70%);
  filter: blur(6px);
  transition: width 0.5s var(--ease), opacity 0.5s var(--ease);
}
.pcard-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 11%; mix-blend-mode: multiply;
  transition: transform 0.7s var(--ease-out);
}
.pcard:hover .pcard-stage img { transform: translateY(-5px) scale(1.035); }
.pcard:hover .pcard-stage::before { width: 60%; opacity: 0.85; }

/* badge: a hairline tag, not a filled shout */
.pcard-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: rgba(251, 249, 244, 0.9);
  padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2);
  backdrop-filter: blur(4px);
}
.pcard-tag.is-brass { color: var(--brass); box-shadow: inset 0 0 0 1px rgba(160,124,56,0.45); }

.pcard-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard-cat { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); }
.pcard-name {
  font-size: 0.925rem; font-weight: 500; line-height: 1.36; color: var(--ink);
  min-height: 2.72em;                       /* two lines - keeps rows level */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard:hover .pcard-name { color: var(--forest); }
.pcard-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 4px; }

/* price as an object: mark + pence smaller, lighter, raised */
.price { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price .cur { font-size: 0.66em; font-weight: 500; transform: translateY(-0.42em); margin-right: 1px; opacity: 0.75; }
.price .pnc { font-size: 0.66em; font-weight: 500; transform: translateY(-0.42em); opacity: 0.75; }
.price .whole { font-size: 1.06rem; font-weight: 600; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.was { font-size: 0.76rem; color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.off {
  font-size: 0.7rem; font-weight: 600; color: var(--clay);
  border-bottom: 1.5px solid currentColor; line-height: 1.1; padding-bottom: 1px;
}

/* persistent action node - a hairline circle that arms to brass. never hides. */
.padd {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: none; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; position: relative;
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.pcard:hover .padd { box-shadow: inset 0 0 0 1px var(--brass); color: var(--brass); }
/* .pcard .padd:hover, not .padd:hover - the card-hover rule above is more specific
   and was painting the icon brass on the brass fill, so the + vanished. */
.pcard .padd:hover, .padd:hover { background: var(--brass); color: #fff; box-shadow: inset 0 0 0 1px var(--brass); }
.padd svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.padd .tick { display: none; }
.pcard .padd.is-done, .padd.is-done { background: var(--moss); color: #fff; box-shadow: inset 0 0 0 1px var(--moss); }
.padd.is-done .plus { display: none; }
.padd.is-done .tick { display: block; }
/* radar ping on add */
.padd.is-done::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(61, 107, 76, 0.5); animation: ping 0.7s var(--ease-out);
}
@keyframes ping { to { box-shadow: 0 0 0 14px rgba(61, 107, 76, 0); } }

/* whole card clickable, action node above it */
.pcard-link { position: absolute; inset: 0; z-index: 1; }
.pcard-stage, .padd { position: relative; z-index: 2; }
.pcard-stage { z-index: 0; }
.padd { z-index: 3; }

/* -------------------------------------------- 13b. best-sellers carousel */
.railwrap { position: relative; }
.rail-track {
  /* The track must be a SINGLE value, not minmax(0, x). With a 0 minimum the
     eight columns shrink to fit the container (25px each) instead of
     overflowing and scrolling. Mobile shows exactly one card per view. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  /* NO `scroll-behavior: smooth` here. It silently converts every programmatic
     scroll (including `el.scrollLeft = x`) into a smooth one, and smooth
     scrolling is a no-op in some embedded/non-composited views - the arrows
     then do nothing at all. site.js asks for smooth explicitly and falls back
     to an instant jump if the viewport did not move. */
  scrollbar-width: none;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch; padding-block: 4px;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; min-width: 0; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.rail-nav button:hover:not([disabled]) { background: var(--forest); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--forest); }
.rail-nav button[disabled] { opacity: 0.3; cursor: default; }
.rail-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* -------------------------------------------------- 13c. mood / colour band
   Same rule as the tiles: light plinth, product contained and multiplied, the
   caption in its own row. The swatch used to be absolutely positioned over the
   card and landed on top of the title on all four tiles. */
.moods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mood {
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  border-radius: var(--r-md); background: var(--card); text-decoration: none;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease);
}
.mood:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.mood-stage {
  position: relative; display: block; min-height: 180px; overflow: hidden;
  background-image:
    radial-gradient(120% 80% at 50% 4%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f3e9 0%, #e8e1d1 100%);
}
.mood-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 10%;
  width: 50%; height: 6%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(28,44,30,0.26), transparent 70%);
  filter: blur(6px);
}
.mood-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 11%; mix-blend-mode: multiply;
  transition: transform 0.8s var(--ease-out);
}
.mood:hover .mood-stage img { transform: translateY(-4px) scale(1.04); }
.mood-cap {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px 16px; background: var(--paper); color: var(--ink);
}
.mood-swatch {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23,35,27,0.16), 0 2px 6px rgba(23,35,27,0.14);
}
.mood-txt { display: flex; flex-direction: column; min-width: 0; }
.mood-cap b { font-size: 0.98rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.mood-cap .mood-txt > span { font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; }

/* ------------------------------------------------------------ 13d. trust rail */
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tcard {
  background: var(--card); border-radius: var(--r-md); padding: 22px 20px 20px;
  box-shadow: inset 0 0 0 1px var(--hair);
  display: flex; flex-direction: column; gap: 8px;
}
.tcard-ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(160,124,56,0.1); color: var(--brass); margin-bottom: 4px;
}
.tcard-ico svg { width: 22px; height: 22px; }
.tcard h3 { margin: 0; font-size: 0.98rem; }
.tcard p { margin: 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }

/* --------------------------------------------------- 14. collection toolbar */
.ctools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 22px;
  box-shadow: inset 0 -1px 0 var(--hair);
  position: sticky; top: 78px; z-index: 40;
  background: var(--paper);
}
.ctools-count { font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ctools-count b { color: var(--ink); font-weight: 600; }
.ctools-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; line-height: 1;
  padding: 0 15px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font-size: 0.81rem; font-weight: 500; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.chip[aria-pressed="true"], .chip.is-on {
  color: var(--forest); background: rgba(160, 124, 56, 0.1);
  box-shadow: inset 0 0 0 1px rgba(160, 124, 56, 0.5);
}
.selectwrap { position: relative; display: inline-flex; align-items: center; }
.selectwrap select {
  appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer;
  height: 36px; line-height: 1; padding: 0 34px 0 15px; border-radius: 999px;
  font-size: 0.81rem; font-weight: 500; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.selectwrap::after {
  content: ""; position: absolute; right: 14px; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.4px solid var(--ink-3); border-bottom: 1.4px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
}
.pgrid-empty {
  grid-column: 1 / -1; text-align: center; padding: 46px 20px; color: var(--ink-2);
  background: var(--paper-2); border-radius: var(--r-md);
}

/* --------------------------------------------------------- 15. editorial band */
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.split-copy { max-width: 52ch; }
.split-art { position: relative; }
.split-art .frame {
  border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 5 / 4;
  background:
    radial-gradient(120% 80% at 50% 4%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f3e9 0%, #e8e1d1 100%);
  box-shadow: var(--lift-2);
}
.split-art .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.split-art .frame::before {
  content: ""; position: absolute; left: 50%; bottom: 12%; width: 50%; height: 6%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28,44,30,0.28), transparent 70%); filter: blur(6px);
}
.split-art .frame-arch { border-radius: var(--r-arch); aspect-ratio: 4 / 5; }
/* small stacked plate offset behind/in front */
.split-art .plate-2 {
  position: absolute; right: -14px; bottom: -22px; width: 42%; aspect-ratio: 1;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--lift-2);
  background: linear-gradient(180deg, #f7f3e9, #e8e1d1);
}
.split-art .plate-2 img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.split-rev .split-art { order: -1; }

/* numbered promise list */
.steps { display: grid; gap: 2px; margin: 22px 0 26px; padding: 0; list-style: none; }
.steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  padding: 13px 0; box-shadow: inset 0 -1px 0 var(--hair); margin: 0;
}
.band-forest .steps li, .band-ink .steps li { box-shadow: inset 0 -1px 0 var(--hair-dark); }
.steps li:last-child { box-shadow: none; }
.steps b { grid-column: 1; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--brass); padding-top: 3px; }
.band-forest .steps b, .band-ink .steps b { color: var(--brass-2); }
.steps span { grid-column: 2; font-size: 0.93rem; color: var(--ink-2); }
.band-forest .steps span, .band-ink .steps span { color: var(--on-dark-2); }
.steps strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }
.band-forest .steps strong, .band-ink .steps strong { color: var(--on-dark); }

/* ------------------------------------------------------------- 16. stat band */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair-dark); }
.stat { background: var(--forest); padding: 26px 18px; text-align: center; }
.stat-n {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em;
  color: var(--brass-2); line-height: 1.05; font-variant-numeric: tabular-nums;
  /* never background-clip: text here - it slices digit descenders */
}
.stat-l { font-size: 0.755rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-2); margin-top: 8px; }

/* --------------------------------------------------------------- 17. reviews */
.rgrid { display: grid; gap: 14px; }
.rcard {
  background: var(--card); border-radius: var(--r-md); padding: 26px 24px;
  box-shadow: inset 0 0 0 1px var(--hair);
  display: flex; flex-direction: column; gap: 12px;
}
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 14px; height: 14px; fill: var(--brass); stroke: none; }
.rcard blockquote { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink); }
.rcard blockquote::before { content: '\201C'; color: var(--brass); font-size: 1.6em; line-height: 0; vertical-align: -0.28em; margin-right: 2px; }
.rcard cite { font-style: normal; font-size: 0.8rem; color: var(--ink-3); margin-top: auto; }
.rcard cite b { display: block; color: var(--ink); font-weight: 600; font-size: 0.86rem; }
.rnote { font-size: 0.8rem; color: var(--ink-3); margin-top: 18px; }

/* ------------------------------------------------------------- 18. guide cards */
.gcards { display: grid; gap: 14px; }
.gcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border-radius: var(--r-md); padding: 26px 24px 24px;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease);
  overflow: hidden;
}
.gcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s var(--ease-out);
}
.gcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--hair-2), var(--lift-2); }
.gcard:hover::before { transform: scaleY(1); }
.gcard h3 { margin: 0; }
.gcard p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.gcard .tlink { margin-top: auto; padding-top: 6px; }
.gcard-lead { background: var(--forest); color: var(--on-dark); box-shadow: none; }
.gcard-lead h3 { color: var(--on-dark); }
.gcard-lead p { color: var(--on-dark-2); }

/* ------------------------------------------------- 18b. GEO answer block
   A question as a real H2, a 40-60 word answer an engine can lift whole, and
   the same substance as bullets. Deliberately plain markup - no nested spans -
   so an extractor gets clean text. */
.geo {
  display: grid; gap: 22px; margin: 0 0 30px;
  background: var(--paper-2); border-radius: var(--r-md); padding: 26px 26px 28px;
  box-shadow: inset 2px 0 0 var(--brass);
}
.geo-q {
  font-size: 0.66rem !important; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 10px;
}
.geo-a p {
  margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--ink);
  max-width: 68ch;
}
.geo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.geo-list li {
  position: relative; padding-left: 24px; margin: 0;
  font-size: 0.92rem; color: var(--ink-2);
}
.geo-list li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 5px; height: 5px; transform: rotate(45deg); background: var(--brass);
}

/* ------------------------------------------------------------------ 19. FAQ */
.faqs { display: grid; gap: 0; }
.faq { box-shadow: inset 0 -1px 0 var(--hair); }
.faq:first-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 500; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 13px; width: 13px; height: 13px; position: relative;
  background:
    linear-gradient(var(--brass), var(--brass)) center/13px 1.4px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center/1.4px 13px no-repeat;
  transition: transform 0.34s var(--ease);
}
.faq[open] summary::after { transform: rotate(135deg); }
.faq[open] summary { color: var(--forest); }
.faq-a { padding: 0 0 22px; max-width: 68ch; }
.faq-a p { color: var(--ink-2); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------- 20. page + crumbs */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--ink-3); margin-bottom: 16px;
}
.crumbs a { color: var(--ink-3); transition: color 0.2s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs i { font-style: normal; opacity: 0.5; }
.crumbs span[aria-current] { color: var(--ink-2); }

.phead { padding: clamp(28px, 3.4vw, 46px) 0 clamp(24px, 3vw, 38px); }
.phead h1 { margin-bottom: 14px; }
.phead .lede { max-width: 60ch; }

/* --------------------------------------------------------- 21. product page */
.pdp { padding-top: 26px; }
.pdp-in { display: grid; gap: clamp(28px, 3.5vw, 56px); align-items: start; }

.pdp-gal { display: grid; gap: 12px; }
.pdp-stage {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 4%, #ffffff 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f7f3e9 0%, #e6dfcf 100%);
  box-shadow: var(--lift-1), inset 0 0 0 1px rgba(255,255,255,0.6);
  cursor: zoom-in;
}
.pdp-stage::before {
  content: ""; position: absolute; left: 50%; bottom: 12%; width: 52%; height: 6%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28,44,30,0.3), transparent 70%); filter: blur(7px);
}
.pdp-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 10%; mix-blend-mode: multiply;
  transition: transform 0.5s var(--ease-out);
}
.pdp-stage.is-zoom img { transform: scale(1.9); cursor: zoom-out; }
.pdp-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  background: rgba(251,249,244,0.86); padding: 6px 11px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair);
}

.pdp-buy h1 { margin-bottom: 12px; }
.pdp-short { color: var(--ink-2); font-size: 1rem; margin-bottom: 18px; max-width: 46ch; }
.pdp-rate { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 16px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pdp-price .price .whole { font-size: 1.85rem; font-weight: 600; }
.pdp-price .was { font-size: 0.95rem; }
.pdp-vat { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 22px; }

.pdp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.qty {
  display: inline-flex; align-items: center; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair-2); flex: 0 0 auto; overflow: hidden;
}
.qty button {
  width: 50px; height: 58px; border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--ink-2); line-height: 1;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.qty button:hover { color: var(--ink); background: var(--paper-2); }
.qty input {
  width: 44px; height: 58px; border: 0; background: none; text-align: center;
  font-size: 1rem; font-weight: 600; -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.pdp-cta .btn { flex: 1 1 220px; }

.pdp-promise { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 0; }
.pdp-promise li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; margin: 0;
  font-size: 0.88rem; color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--hair);
}
.pdp-promise li:first-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.pdp-promise svg { width: 17px; height: 17px; stroke: var(--brass); fill: none; stroke-width: 1.6; flex: 0 0 17px; }

.spec { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 6px 0 0; }
.spec th, .spec td { text-align: left; padding: 11px 0; box-shadow: inset 0 -1px 0 var(--hair); vertical-align: top; }
.spec th { font-weight: 500; color: var(--ink-3); width: 42%; }
.spec td { color: var(--ink); }

/* sticky buy bar */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  background: rgba(251, 249, 244, 0.94); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--hair), 0 -10px 34px -20px rgba(23,35,27,0.5);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(120%); transition: transform 0.4s var(--ease-out);
}
.sticky-buy.show { transform: none; }
.sticky-in { display: flex; align-items: center; gap: 14px; max-width: var(--wrap); margin: 0 auto; }
.sticky-thumb {
  width: 46px; height: 46px; border-radius: var(--r-xs); overflow: hidden; flex: 0 0 46px;
  background: linear-gradient(180deg, #f7f3e9, #e6dfcf);
}
.sticky-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.sticky-info { min-width: 0; flex: 1; }
.sticky-info b { display: block; font-size: 0.84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-in .btn { flex: 0 0 auto; min-height: 46px; padding: 0 24px; }

/* ------------------------------------------------------------- 22. articles */
.article { padding-top: clamp(24px, 3vw, 40px); }
.article-head { max-width: var(--wrap-read); margin: 0 auto clamp(26px, 3vw, 40px); }
.article-head h1 { margin-bottom: 16px; }
.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-3); }
.article-meta i { font-style: normal; opacity: 0.5; }

.prose { max-width: var(--wrap-read); margin: 0 auto; font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }
.prose > p:first-of-type { font-size: 1.1rem; color: var(--ink); }
.prose h2 {
  margin: 2em 0 0.6em; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--ink);
  padding-top: 0.7em; box-shadow: inset 0 1px 0 var(--hair);
}
.prose h3 { margin: 1.7em 0 0.5em; color: var(--ink); }
.prose strong { color: var(--ink); }
.prose a { color: var(--forest); box-shadow: inset 0 -1px 0 rgba(160,124,56,0.6); transition: box-shadow 0.25s var(--ease), color 0.25s var(--ease); }
.prose a:hover { color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }
.prose ul, .prose ol { margin: 1.1em 0; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 0.6em; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 0.66em;
  width: 5px; height: 5px; transform: rotate(45deg); background: var(--brass);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 34px; margin-bottom: 0.6em; counter-increment: n; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0.1em;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; color: var(--brass);
}
.prose blockquote {
  margin: 1.6em 0; padding: 20px 0 20px 26px; box-shadow: inset 2px 0 0 var(--brass);
  font-size: 1.06rem; color: var(--ink);
}
.prose img { border-radius: var(--r-md); margin: 1.6em 0; }
.prose > p:last-child { margin-bottom: 0; }

/* quick answer - the GEO block, upgraded */
.quick-answer {
  background: var(--paper-2); border-radius: var(--r-md); padding: 22px 24px;
  margin: 1.6em 0; box-shadow: inset 2px 0 0 var(--brass); position: relative;
}
.quick-answer::before {
  content: "Quick answer"; display: block;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 8px;
}
.quick-answer p { margin: 0; color: var(--ink); font-size: 1rem; }

/* comparison tables */
.tablewrap { overflow-x: auto; margin: 1.6em 0; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hair); }
.md-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 460px; }
.md-table th, .md-table td { padding: 13px 16px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--hair); }
.md-table th { font-weight: 600; color: var(--ink); background: var(--paper-2); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.md-table tr:last-child td { box-shadow: none; }

/* table of contents */
.toc { background: var(--paper-2); border-radius: var(--r-md); padding: 22px 24px; margin: 0 0 30px; }
.toc h2 { font-size: 0.66rem !important; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--brass); margin: 0 0 12px !important; padding: 0 !important; box-shadow: none !important; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 2px; }
.toc li { counter-increment: t; margin: 0; padding: 0; }
.toc li::before { content: none; }
.toc a { display: flex; gap: 12px; padding: 6px 0; font-size: 0.9rem; color: var(--ink-2); box-shadow: none; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--brass); font-size: 0.72rem; font-weight: 600; padding-top: 3px; }
.toc a:hover { color: var(--ink); box-shadow: none; }

/* reading progress */
.progress { position: fixed; left: 0; top: 0; height: 2px; z-index: 125; background: var(--brass); width: 0; transition: width 0.1s linear; }

.author {
  max-width: var(--wrap-read); margin: clamp(34px, 4vw, 52px) auto 0;
  background: var(--paper-2); border-radius: var(--r-md); padding: 24px 26px;
  display: grid; gap: 6px;
}
.author b { font-size: 0.95rem; }
.author p { margin: 0; font-size: 0.88rem; color: var(--ink-2); }

/* ------------------------------------------------------------ 23. newsletter */
.nl { position: relative; overflow: hidden; }
.nl-in { display: grid; gap: 26px; align-items: center; position: relative; z-index: 1; }
.nl-form { display: grid; gap: 10px; }
.nl-field {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06);
  border-radius: 999px; padding: 5px 5px 5px 22px;
  box-shadow: inset 0 0 0 1px var(--hair-dark);
  transition: box-shadow 0.25s var(--ease);
}
.nl-field:focus-within { box-shadow: inset 0 0 0 1px var(--brass-2); }
.nl-field input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--on-dark);
  font-size: 0.95rem; padding: 14px 0;
}
.nl-field input::placeholder { color: rgba(243,239,228,0.45); }
.nl-field input:focus { outline: none; }
.nl-field .btn { flex: 0 0 auto; min-height: 46px; padding: 0 24px; }
.nl-small { font-size: 0.76rem; color: var(--on-dark-2); margin: 0; }

/* --------------------------------------------------------------- 24. footer */
.ftr { background: var(--forest-3); color: var(--on-dark); padding: clamp(48px, 5vw, 72px) 0 26px; }
.ftr-grid { display: grid; gap: 32px; }
.ftr-brand { max-width: 34ch; }
.ftr-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ftr-logo img { width: 54px; height: 54px; object-fit: contain; }
.ftr-logo b { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.ftr-brand p { font-size: 0.88rem; color: var(--on-dark-2); margin: 0 0 16px; }
.ftr-uk { display: inline-flex; align-items: center; gap: 9px; font-size: 0.8rem; font-weight: 500; }
.uk-flag {
  width: 24px; height: 15px; border-radius: 2px; flex: 0 0 24px;
  background: linear-gradient(180deg, #012169 0 33%, #fff 33% 66%, #C8102E 66%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.ftr-col h4 {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--brass-2); margin: 0 0 14px; padding-bottom: 10px;
  box-shadow: inset 0 -1px 0 var(--hair-dark);
}
.ftr-col a {
  display: block; padding: 6px 0; font-size: 0.875rem; color: var(--on-dark-2);
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}
.ftr-col a:hover { color: var(--on-dark); transform: translateX(3px); }
.ftr-pay {
  margin-top: clamp(34px, 4vw, 50px); padding-top: 24px;
  box-shadow: inset 0 1px 0 var(--hair-dark);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
}
.pays { display: flex; flex-wrap: wrap; gap: 8px; }
.pays img { height: 26px; width: auto; background: #fff; border-radius: 3px; padding: 3px 6px; }
.ftr-secure { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--on-dark-2); }
.ftr-secure svg { width: 15px; height: 15px; stroke: var(--brass-2); fill: none; stroke-width: 1.6; }
.ftr-legal {
  margin-top: 20px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--hair-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 0.775rem; color: rgba(243,239,228,0.5);
}
.ftr-legal p { margin: 0; }
.ftr-legal a { color: rgba(243,239,228,0.72); }
.ftr-legal a:hover { color: var(--on-dark); }

/* ---------------------------------------------------------- 25. basket drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); z-index: 200;
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease-out);
  box-shadow: var(--lift-3);
}
.drawer.is-open { transform: none; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; box-shadow: inset 0 -1px 0 var(--hair); flex: 0 0 auto;
}
.drawer-head h2 { margin: 0; font-size: 1.12rem; }
.drawer-head .micro { margin: 0; }

.ship { padding: 15px 22px; background: var(--paper-2); flex: 0 0 auto; }
.ship p { margin: 0 0 9px; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.ship p b { color: var(--forest); font-weight: 600; }
.ship-bar { height: 3px; background: var(--hair); border-radius: 999px; overflow: hidden; }
.ship-bar span { display: block; height: 100%; width: 0; background: var(--brass); border-radius: 999px; transition: width 0.55s var(--ease-out); }
.ship-bar.is-free span { background: var(--moss); }

.drawer-items { flex: 1; overflow-y: auto; padding: 6px 22px; -webkit-overflow-scrolling: touch; }
.bline {
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start;
  padding: 16px 0; box-shadow: inset 0 -1px 0 var(--hair);
}
.bline-img {
  width: 62px; height: 62px; border-radius: var(--r-xs); overflow: hidden; flex: 0 0 62px;
  background: linear-gradient(180deg, #f7f3e9, #e6dfcf);
}
.bline-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.bline-main { min-width: 0; display: grid; gap: 7px; }
.bline-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.bline-name { font-size: 0.88rem; font-weight: 500; line-height: 1.35; }
.bline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bqty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); overflow: hidden; }
.bqty button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 0.95rem; line-height: 1; }
.bqty button:hover { background: var(--paper-2); color: var(--ink); }
.bqty span { min-width: 26px; text-align: center; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 40px hit area (not the 15px glyph) - this is a destructive control on a phone */
.bline-rm {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  width: 40px; height: 40px; margin: -10px -10px 0 0; flex: 0 0 40px;
  display: grid; place-items: center; border-radius: 50%;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.bline-rm:hover { background: var(--paper-2); }
.bline-rm:hover { color: var(--clay); }
.bline-rm svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.bempty { text-align: center; padding: 48px 16px; display: grid; gap: 14px; justify-items: center; }
.bempty-ring { width: 62px; height: 62px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-2); display: grid; place-items: center; color: var(--ink-3); }
.bempty-ring svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.bempty p { color: var(--ink-2); margin: 0; font-size: 0.94rem; }

.drawer-foot { flex: 0 0 auto; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--hair); }
.drow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.88rem; color: var(--ink-2); margin-bottom: 8px; }
.drow-total { font-size: 1rem; color: var(--ink); padding-top: 10px; box-shadow: inset 0 1px 0 var(--hair); margin-top: 12px; }
.drow-total b { font-size: 1.16rem; font-weight: 600; }
.drawer-foot .btn { margin-top: 14px; }
.drawer-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.74rem; color: var(--ink-3); margin: 12px 0 0; }
.drawer-note svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ------------------------------------------------------- 26. cookie / toast */
.cookie {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 170;
  background: var(--forest-3); color: var(--on-dark); border-radius: var(--r-md);
  padding: 20px 22px; box-shadow: var(--lift-3);
  display: grid; gap: 14px; max-width: 520px;
  transform: translateY(140%); transition: transform 0.5s var(--ease-out);
}
.cookie.show { transform: none; }
.cookie p { margin: 0; font-size: 0.85rem; color: var(--on-dark-2); }
.cookie-act { display: flex; gap: 10px; }
.cookie-act .btn { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 220;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  background: var(--forest-3); color: var(--on-dark);
  border-radius: 999px; padding: 13px 24px; font-size: 0.86rem; font-weight: 500;
  box-shadow: var(--lift-3); max-width: calc(100vw - 32px); text-align: center;
  display: inline-flex; align-items: center; gap: 10px;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; stroke: var(--brass-2); fill: none; stroke-width: 2; flex: 0 0 15px; }

/* ----------------------------------------------------------- 27. result page */
.result { min-height: 58vh; display: grid; place-items: center; text-align: center; }
.result-in { max-width: 52ch; display: grid; gap: 8px; justify-items: center; }
.result-ring {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--brass); margin-bottom: 12px;
}
.result-ring svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.result .btn { margin-top: 18px; }

/* -------------------------------------------------------- 28. reveal system */
/* Content must NEVER depend on a callback firing. .reveal only animates once
   <html> carries .js-on, which script.js sets synchronously in <head>. */
.js-on .reveal { opacity: 0; transform: translateY(22px); }
.js-on .reveal.in { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.85s var(--ease-out); }
.js-on [data-stagger] > * { opacity: 0; transform: translateY(20px); }
.js-on [data-stagger].in > * { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-out); }
.js-on [data-stagger].in > *:nth-child(1) { transition-delay: 0.00s; }
.js-on [data-stagger].in > *:nth-child(2) { transition-delay: 0.06s; }
.js-on [data-stagger].in > *:nth-child(3) { transition-delay: 0.12s; }
.js-on [data-stagger].in > *:nth-child(4) { transition-delay: 0.18s; }
.js-on [data-stagger].in > *:nth-child(5) { transition-delay: 0.24s; }
.js-on [data-stagger].in > *:nth-child(6) { transition-delay: 0.30s; }
.js-on [data-stagger].in > *:nth-child(7) { transition-delay: 0.34s; }
.js-on [data-stagger].in > *:nth-child(8) { transition-delay: 0.38s; }
.js-on [data-stagger].in > *:nth-child(n + 9) { transition-delay: 0.42s; }

/* hero entrance */
.js-on .rise { opacity: 0; transform: translateY(20px); animation: rise 0.85s var(--ease-out) forwards; }
.rise-1 { animation-delay: 0.04s; } .rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.20s; } .rise-4 { animation-delay: 0.28s; }
.rise-5 { animation-delay: 0.36s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================================
   29. RESPONSIVE - everything from here down overrides the base.
   Media queries carry no extra specificity, so they MUST stay at the bottom.
   ========================================================================== */

@media (min-width: 560px) {
  .rail-track { grid-auto-columns: calc((100% - 20px) / 2); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie { grid-template-columns: 1fr auto; align-items: center; max-width: 620px; }
  .cookie-act .btn { flex: 0 0 auto; }
}

@media (min-width: 760px) {
  :root { --pad: 28px; }
  /* NOTE: .hero-grid stays single-column until 1000px. Splitting it at 760
     leaves each banner ~395px wide, and the art-right/text-left composition
     collides at that size. */
  .assure-in { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .assure { padding-top: 22px; }
  .hban-c { padding: 34px 40px 70px; }
  .hban-dots { left: 40px; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .rail-track { grid-auto-columns: calc((100% - 40px) / 3); }
  .moods { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .geo { grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: start; padding: 30px 32px; }
  .geo-list { border-left: 1px solid var(--hair); padding-left: 30px; }
  .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .shead-split { grid-template-columns: 1fr auto; }
  .shead-split .shead-aside { justify-self: end; }
  .nl-in { grid-template-columns: 1fr 1fr; gap: 40px; }
  .nl-form { align-self: center; }
  .ftr-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px 30px; }
  .article-meta { font-size: 0.82rem; }
  .pdp-cta .btn { flex: 1 1 auto; }
}

@media (min-width: 1000px) {
  body { font-size: 17px; }
  .nav { display: block; }
  .burger { display: none; }
  .hero-grid { grid-template-columns: 1.32fr 1fr; gap: 18px; }
  /* the promo tile's caption is top-and-bottom, so its art has to sit in the
     upper third or the bottom CTA lands on the product */
  .hban-static .hban-shot { top: 28%; height: 44%; width: auto; }
  .hero-in { grid-template-columns: 1.02fr 0.98fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .split-narrow { grid-template-columns: 1.1fr 0.9fr; }
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .pdp-in { grid-template-columns: 1.04fr 0.96fr; }
  .mega-in { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
  .tiles-feature { grid-template-columns: 1.6fr 1fr 1fr; }
  .rail-track { grid-auto-columns: calc((100% - 66px) / 4); }
  .sticky-buy { display: none; }
  .hero-plate { width: min(100%, 500px); }
}

@media (min-width: 1180px) {
  .pgrid { gap: 26px; }
  .tiles { gap: 20px; }
}

/* ---- tablet + phone corrections (must come after the min-width blocks) ---- */
@media (max-width: 999.98px) {
  .ctools { top: 0; }
  .mega { display: none; }              /* desktop-only construct */
  .mega-feat { display: none; }
  .hero-chip { right: 0; }
  /* Below 1000 the hero stacks, and art-over-text was colliding at four
     different widths because the art was a fixed PERCENTAGE while the caption
     height depends on how the copy wraps. Make the slide a two-row grid: the
     caption takes the height it needs, the art gets whatever is left. They can
     no longer overlap at any width or copy length. */
  .hban, .hban-static {
    aspect-ratio: 4 / 5; height: auto; min-height: 0;
  }
  .hban-slide {
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    padding: 16px 0 0;
  }
  .hban-shot,
  .hban-static .hban-shot {
    position: relative; inset: auto; left: auto; right: auto;
    translate: none; transform: none;
    width: auto; height: 100%; max-width: 78%;
    aspect-ratio: 1; justify-self: center; align-self: center;
  }
  .hban-c,
  .hban-static .hban-c {
    position: relative; inset: auto; max-width: 100%;
    justify-content: flex-end; padding: 14px 22px 24px; gap: 7px;
  }
  .hban-static .hban-top { gap: 6px; }
  /* Slider furniture: in the stacked layout the caption occupies the bottom
     band, so the plate and the dots have to move out of the CTA's way. The
     plate goes top-left of the art row (top-right is the arrows), and the
     caption reserves bottom padding for the dot rail. */
  .hban-plate { top: 12px; left: 12px; right: auto; bottom: auto; }
  .hban-dots { bottom: 9px; left: 22px; }
  .hban-c, .hban-static .hban-c { padding-bottom: 44px; }
  .hban-static .hban-c { padding-bottom: 24px; }
}

@media (max-width: 759.98px) {
  :root { --pad: 18px; }
  html { scroll-padding-top: 78px; }
  .hdr-in { min-height: 66px; gap: 10px; }
  .logo { flex: 1 1 auto; gap: 9px; }
  .logo img { width: 44px; height: 44px; }
  .logo-txt b { font-size: 0.88rem; line-height: 1.1; }
  .logo-txt span { font-size: 0.55rem; letter-spacing: 0.16em; }
  .hdr-act { gap: 0; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .bag-count { top: 2px; right: 1px; }
  .announce-in { min-height: 34px; font-size: 0.71rem; letter-spacing: 0.03em; white-space: normal; }
  .hero { padding: 34px 0 44px; }
  .hero-plate { width: min(84%, 340px); }
  /* Twin hero on a phone: see the grid rules in the <=999 block. Only type
     sizes and chrome are tuned here. */
  .hero-band { padding: 12px 0; }
  .hban { border-radius: var(--r-md); }
  .hban-t { font-size: 1.28rem; }
  .hban-s { font-size: 0.84rem; max-width: 34em; }
  .hban-cta { width: auto; padding: 11px 18px; font-size: 0.8rem; }
  /* all four insets must be reset together - leaving right/bottom from an
     earlier rule alongside the new top/left stretches the pill to fill
     the whole banner */
  .hban-plate {
    top: 12px; left: 12px; right: auto; bottom: auto;
    font-size: 0.58rem; padding: 7px 10px;
  }
  .hban-dots { left: 22px; bottom: 18px; }
  /* touch has no hover, so the arrows must stay visible - and be 44px */
  .hban-arrows { opacity: 1; right: 12px; top: 12px; }
  .hban-arrows button { width: 44px; height: 44px; }
  .assure-i { padding: 0 12px; }
  .assure-i:nth-child(odd) { box-shadow: none; padding-left: 0; }
  /* stacked on a phone: same ratio as the slider so the pair still matches */
  .hban-static { aspect-ratio: 4 / 5; height: auto; min-height: 0; }
  .hban-cta { width: auto; padding: 11px 18px; font-size: 0.8rem; }
  /* all four insets must be reset together - leaving right/bottom from an
     earlier rule alongside the new top/left stretches the pill to fill
     the whole banner */
  .hban-plate {
    top: 12px; left: 12px; right: auto; bottom: auto;
    font-size: 0.58rem; padding: 7px 10px;
  }
  .hban-dots { left: 22px; bottom: 18px; }
  /* touch has no hover, so the arrows must stay visible - and be 44px */
  .hban-arrows { opacity: 1; right: 12px; top: 12px; }
  .hban-arrows button { width: 44px; height: 44px; }
  .assure-i { padding: 0 12px; }
  .assure-i:nth-child(odd) { box-shadow: none; padding-left: 0; }
  .hero-chip { right: 4px; bottom: 8%; min-width: 132px; padding: 10px 13px; }
  .hero-ctas .btn { width: 100%; }
  .hero-rail { gap: 8px 18px; }
  .hero-rail div { font-size: 0.78rem; }
  .pcard-body { padding: 12px 12px 14px; }
  .pcard-name { font-size: 0.875rem; }
  .price .whole { font-size: 1rem; }
  .padd { flex-basis: 34px; width: 34px; height: 34px; }
  .ctools { padding: 12px 0; margin-bottom: 16px; }
  .ctools-right { width: 100%; margin-left: 0; }
  .split-art .plate-2 { right: -6px; bottom: -14px; width: 38%; }
  .pdp-cta { flex-direction: column; align-items: stretch; }
  .pdp-cta .qty { align-self: flex-start; }
  .pdp-cta .btn { width: 100%; }
  .prose { font-size: 0.99rem; }
  .toc { padding: 18px 20px; }
  .ftr-legal { flex-direction: column; }
  .drawer { width: 100%; }
  .toast { bottom: 74px; }
  .cookie { padding: 18px; }
  /* horizontal rails: exactly one item per view, bleeding to the screen edge */
  .rail {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-padding-inline: var(--pad); -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 100%; scroll-snap-align: start; }
}

@media (max-width: 400px) {
  .stat { padding: 20px 12px; }
  .pgrid { gap: 10px; }
  .logo-txt span { display: none; }
}

/* ----------------------------------------------------- 30. reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-on .reveal, .js-on [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .js-on .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ticker-track { animation: none; }
  .padd.is-done::after { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------- 31. print */
@media print {
  .hdr, .announce, .ticker, .drawer, .scrim, .cookie,
  .sticky-buy, .toast, .nl, .searchwrap, .mnav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .prose a { box-shadow: none; }
}

/* ============================================================================
   32. SHOT TYPE — must be the LAST block so it wins over every stage rule.

   Only ~2/3 of the supplier photos are white cutouts. `mix-blend-mode: multiply`
   dissolves a white backdrop beautifully, but applied to a real photograph it
   multiplies that photo's own background into the plinth and renders a muddy
   grey rectangle (the macrame cord card shipped like that). _build/classify.php
   samples each photo's border variance and stamps data-shot on every surface.
   ========================================================================== */
[data-shot="scene"] {
  background-image: none !important;
  background: var(--paper-3);
}
[data-shot="scene"] img {
  object-fit: cover !important;
  padding: 0 !important;
  mix-blend-mode: normal !important;
  transform: none;
}
[data-shot="scene"]::before,
[data-shot="scene"]::after { display: none !important; }

/* the hero roundel is a real design object, so a scene shot keeps the plate
   and simply sits inside it as a circular crop */
.hban-shot[data-shot="scene"] { background: none; }
.hban-shot[data-shot="scene"]::before { display: block !important; }
.hban-shot[data-shot="scene"] img {
  border-radius: 50%;
  width: 88%; height: 88%;
  margin: 6%;
}

/* hover motion belongs to the staged shots only */
.pcard:hover .pcard-stage[data-shot="scene"] img,
.tile:hover .tile-stage[data-shot="scene"] img,
.mood:hover .mood-stage[data-shot="scene"] img { transform: scale(1.05); }

/* the editorial frames are shaped objects: a scene shot should FILL the arch,
   not sit inside it as a padded rectangle */
.frame[data-shot="scene"] img,
.plate-2[data-shot="scene"] img { width: 100%; height: 100%; }

/* JS-rendered thumbnails follow the same rule */
.bline-img[data-shot="scene"] img,
.search-hit-img[data-shot="scene"] img,
.sticky-thumb[data-shot="scene"] img { object-fit: cover; padding: 0; mix-blend-mode: normal; }

/* ---------------------------------------------------- 33. locations index */
.loc-index {
  display: grid; gap: 30px 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.loc-index h4 {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 12px; padding-bottom: 9px;
  box-shadow: inset 0 -1px 0 var(--hair);
}
.loc-index h4 a { color: inherit; }
.loc-index h4 a:hover { color: var(--ink); }
.loc-index a {
  display: block; padding: 5px 0; font-size: 0.88rem; color: var(--ink-2);
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
}
.loc-index nav > a:hover { color: var(--ink); transform: translateX(3px); }