/* cliviasforsale.com design system.
   Structure, type and components only; colour tokens come from the theme files
   (theme-a Gallery White, theme-b Specimen Room). Everything here reads from
   CSS variables so a theme is a palette swap, nothing more.
   Fonts are self-hosted (no external requests): a classical serif to echo the
   logo wordmark, a quiet grotesque for the interface, a mono for pedigree data. */

/* ---- fonts --------------------------------------------------------------- */
@font-face { font-family:"Cormorant"; src:url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Spline Mono"; src:url("/assets/fonts/spline-sans-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Spline Mono"; src:url("/assets/fonts/spline-sans-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* ---- design tokens (structure; palette lives in the theme files) --------- */
:root{
  --serif:"Cormorant", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"Spline Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step-0:.95rem; --step-1:1.0625rem; --step-2:1.35rem; --step-3:1.8rem;
  --step-4:2.6rem; --step-5:4rem; --step-6:5.5rem;

  --sp-1:.5rem; --sp-2:.9rem; --sp-3:1.4rem; --sp-4:2.2rem; --sp-5:3.4rem;
  --sp-6:5rem; --sp-7:7.5rem;

  --wrap:1180px; --wrap-narrow:820px;
  --radius:14px; --radius-sm:9px; --radius-pill:999px;
  --hair:1px; --hairline:var(--line-2);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* sensible light defaults so the base renders even with no theme file */
  --bg:#FAFAFB; --surface:#FFFFFF; --surface-2:#F4F5F6;
  --ink:#14171A; --ink-soft:#5B6167; --ink-mute:#6E747A;
  --forest:#123A2A; --forest-ink:#FFFFFF; --bloom:#E8622A;
  --line:#ECEDEF; --line-2:#E2E4E7;
  --shadow:0 10px 40px rgba(20,23,26,.08); --shadow-sm:0 2px 10px rgba(20,23,26,.06);
  --tile:#FCFCFD;

  /* status colours: light values here, theme-b lifts them for dark-ground
     contrast (>= 4.5:1). --*-bg is the base a subtle tint mixes from. */
  --danger:#9a3512; --danger-bg:#E8622A;
  --ok:#1c6b45;
  --warn:#9a5a12; --warn-bg:#c07a1e;
}

/* ---- reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-1); line-height:1.6;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:600; line-height:1.08; letter-spacing:-.01em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; border-radius:3px; }

/* ---- layout helpers ----------------------------------------------------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem, 4vw, 2.4rem); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
main{ display:block; }
.section{ padding-block:var(--sp-6); }
.eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.serif{ font-family:var(--serif); }
.lede{ font-size:var(--step-2); line-height:1.5; color:var(--ink-soft); font-weight:400; }

/* ---- header ------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:var(--hair) solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:var(--sp-4); height:72px; }
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand img{ height:26px; width:auto; }
.brand .brand-name{ font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:.01em; color:var(--forest); }
.brand .brand-tld{ color:color-mix(in srgb, var(--forest) 55%, var(--ink-mute)); }
.nav{ display:flex; align-items:center; gap:var(--sp-3); }
.nav a{ font-size:.92rem; color:var(--ink-soft); transition:color .2s var(--ease); }
.nav a:hover{ color:var(--ink); }
.nav .nav-cart{ color:var(--forest); font-weight:500; }
.nav-logout{ display:inline; }
.nav-logout button{ background:none; border:0; color:var(--ink-mute); font-size:.86rem; padding:0; }
.nav-logout button:hover{ color:var(--ink); }

/* ---- buttons ------------------------------------------------------------ */
.btn,.btn--accent,button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.95rem; font-weight:500; line-height:1;
  padding:.85rem 1.5rem; border-radius:var(--radius-pill); border:var(--hair) solid transparent;
  background:var(--forest); color:var(--forest-ink); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px color-mix(in srgb, var(--forest) 30%, transparent); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--surface-2); box-shadow:none; }
.btn--block{ width:100%; }
.link-quiet{ color:var(--ink-soft); border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.link-quiet:hover{ color:var(--ink); border-color:var(--ink-mute); }

/* ---- hero --------------------------------------------------------------- */
.hero{ padding-block:clamp(2.5rem,6vw,var(--sp-6)) var(--sp-6); }
.hero-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(1.5rem,5vw,var(--sp-6)); align-items:center; }
.hero-copy .eyebrow{ margin-bottom:1.1rem; }
.hero-title{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem, 6.5vw, var(--step-6)); line-height:.98; letter-spacing:-.015em; }
.hero-title em{ font-style:italic; color:var(--forest); }
.hero-copy .lede{ margin-top:1.4rem; max-width:44ch; }
.hero-actions{ margin-top:2rem; display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; }
.hero-media{ position:relative; border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow); border:var(--hair) solid var(--line); aspect-ratio:16/9; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:contain; background:#fff; }

/* ---- framed image tile (keeps mixed photo backgrounds looking uniform) --- */
.tile{ position:relative; background:var(--tile); border:var(--hair) solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; }
.tile img,.tile video{ width:100%; height:100%; object-fit:cover; }
.tile--contain{ padding:8%; }
.tile--contain img{ object-fit:contain; }
.tile-empty{ display:grid; place-items:center; color:var(--ink-mute); background:
  radial-gradient(120% 90% at 50% 20%, var(--surface) 0%, var(--surface-2) 100%); }
.tile-empty svg{ width:44%; opacity:.5; }
.tile-empty span{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; margin-top:.6rem; }

/* ---- specimen grid + card ---------------------------------------------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:var(--sp-4); }
.section-head h2{ font-family:var(--serif); font-size:var(--step-4); font-weight:600; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:clamp(1.2rem, 3vw, 2.4rem) clamp(1.1rem,2.5vw,2rem); }
.card{ display:flex; flex-direction:column; }
.card .tile{ box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover .tile{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card-body{ padding-top:1rem; display:flex; flex-direction:column; gap:.35rem; }
.card-tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.card-title{ font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.05; }
.card-title a:hover{ color:var(--forest); }
.pedigree{ font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); line-height:1.5; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; gap:.6rem; }
.price{ font-family:var(--mono); font-size:1rem; font-weight:500; color:var(--ink); letter-spacing:-.01em; }
.card form{ margin-top:.7rem; }

/* ---- badges ------------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.34rem .6rem; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--ink-soft); border:var(--hair) solid var(--line); }
.badge--ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,var(--surface)); border-color:color-mix(in srgb,var(--ok) 20%,var(--line)); }
.badge--warn{ color:var(--warn); background:color-mix(in srgb,var(--warn-bg) 10%,var(--surface)); border-color:color-mix(in srgb,var(--warn-bg) 24%,var(--line)); }
.badge--show{ color:var(--bloom); border-color:color-mix(in srgb,var(--bloom) 34%,var(--line)); background:color-mix(in srgb,var(--bloom) 7%,var(--surface)); }
.badge--sold{ color:var(--ink-mute); }

/* ---- product dossier ---------------------------------------------------- */
.dossier{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,var(--sp-6)); align-items:start; }
.dossier-media{ display:flex; flex-direction:column; gap:1rem; }
.dossier-media .tile{ box-shadow:var(--shadow); }
.dossier-media .thumbs{ display:flex; gap:.7rem; }
.dossier-media .thumbs .tile{ width:74px; aspect-ratio:1; box-shadow:none; }
.dossier-info{ position:sticky; top:96px; }
.dossier-info .eyebrow{ margin-bottom:.8rem; }
.dossier-title{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,var(--step-5)); font-weight:600; line-height:1; }
.dossier-price{ font-family:var(--mono); font-size:1.3rem; margin-top:1rem; }
.dossier-buy{ margin-top:1.6rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.dossier-desc{ margin-top:1.8rem; max-width:52ch; color:var(--ink-soft); }
.spec{ margin-top:2rem; border-top:var(--hair) solid var(--line); }
.spec-row{ display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.75rem 0; border-bottom:var(--hair) solid var(--line); font-size:.92rem; }
.spec-row dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.spec-row dd{ margin:0; color:var(--ink); }

/* ---- forms -------------------------------------------------------------- */
.field{ display:block; margin-bottom:1.1rem; }
.field > label,.field-label{ display:block; font-size:.82rem; font-weight:500; color:var(--ink-soft); margin-bottom:.4rem; }
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--ink); background:var(--surface);
  border:var(--hair) solid var(--line-2); border-radius:var(--radius-sm); padding:.72rem .9rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 16%, transparent); }
.form-errors{ background:color-mix(in srgb,var(--danger-bg) 8%, var(--surface)); border:var(--hair) solid color-mix(in srgb,var(--danger-bg) 24%,var(--line)); color:var(--danger); border-radius:var(--radius-sm); padding:.8rem 1rem; font-size:.9rem; margin-bottom:1.2rem; }

/* ---- tables (cart, admin) ---------------------------------------------- */
.data-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.data-table th,.data-table td{ text-align:left; padding:.85rem 1rem; border-bottom:var(--hair) solid var(--line); }
.data-table th{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }

/* ---- footer ------------------------------------------------------------- */
.site-footer{ margin-top:var(--sp-7); background:var(--forest); color:color-mix(in srgb,#EFEBDD 90%, var(--forest)); }
.site-footer .wrap{ padding-block:var(--sp-5); }
.footer-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:center; }
.footer-brand{ display:inline-flex; align-items:center; gap:.7rem; }
.footer-brand img{ height:38px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.footer-wordmark{ font-family:var(--serif); font-size:1.6rem; font-weight:600; letter-spacing:.01em; color:#EFEBDD; }
.footer-tld{ color:color-mix(in srgb,#EFEBDD 60%, var(--forest)); }
.site-footer nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.site-footer nav a{ color:color-mix(in srgb,#EFEBDD 80%, var(--forest)); font-size:.9rem; }
.site-footer nav a:hover{ color:#fff; }
.footer-note{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid color-mix(in srgb,#EFEBDD 18%, var(--forest)); font-size:.82rem; color:color-mix(in srgb,#EFEBDD 62%, var(--forest)); }

/* ---- generic prose sections (about, privacy, terms) -------------------- */
.prose{ max-width:var(--wrap-narrow); }
.prose h1{ font-family:var(--serif); font-size:var(--step-5); margin-bottom:1rem; }
.prose h2{ font-family:var(--serif); font-size:var(--step-3); margin:2.2rem 0 .8rem; }
.prose p{ margin-bottom:1rem; color:var(--ink-soft); }
.prose a{ color:var(--forest); border-bottom:1px solid color-mix(in srgb,var(--forest) 30%,transparent); }

/* ---- motion + responsive ------------------------------------------------ */
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.reveal{ animation:rise .7s var(--ease) both; }
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; } .hero-media{ aspect-ratio:16/9; order:-1; }
  .dossier{ grid-template-columns:1fr; } .dossier-info{ position:static; }
  .site-header .wrap{ gap:1rem; } .nav{ gap:1rem; } .nav a{ font-size:.86rem; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}
/* True mobile: the brand and the nav no longer share a row. The brand keeps
   line one; the nav wraps to its own full-width row so nothing collides. */
@media (max-width:600px){
  .site-header .wrap{ height:auto; flex-wrap:wrap; padding-block:.6rem; gap:.2rem 1rem; }
  .brand .brand-name{ font-size:1.15rem; }
  .nav{ width:100%; flex-wrap:wrap; gap:1.15rem; row-gap:.2rem; font-size:.92rem; }
  .nav a,.nav-logout button{ white-space:nowrap; padding-block:.3rem; }
  .nav .nav-logout{ margin-left:auto; }
  .spec-row{ grid-template-columns:1fr; gap:.15rem; padding:.65rem 0; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- inline table actions (cart line Update / Remove) ------------------- */
.btn--sm{ padding:.5rem 1rem; font-size:.86rem; }
.btn-link{ background:none; border:0; padding:0; font-family:var(--sans); font-size:.86rem; color:var(--ink-mute); transition:color .2s var(--ease); }
.btn-link:hover{ color:var(--bloom); }

/* ---- selectable rows (delivery chooser; reusable radio/checkbox set) ---- */
.choices{ display:flex; flex-direction:column; gap:.7rem; border:0; padding:0; margin:0 0 var(--sp-3); min-width:0; }
.choice{ display:flex; align-items:flex-start; gap:.8rem; padding:1rem 1.1rem; background:var(--surface); border:var(--hair) solid var(--line-2); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.choice:hover{ border-color:var(--ink-mute); }
.choice:has(input:checked){ border-color:var(--forest); box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 14%, transparent); }
.choice input{ width:auto; margin-top:.25rem; accent-color:var(--forest); }
.choice-main{ display:flex; flex-direction:column; gap:.25rem; }
.choice-title{ font-weight:500; color:var(--ink); }
.choice-note{ font-size:.82rem; color:var(--ink-mute); line-height:1.5; }

/* ---- mobile nav toggle (shop.js) ----------------------------------------
   The button is server-rendered in the header but hidden by default: it only
   appears on small screens once shop.js stamps body[data-nav-js], so with
   JavaScript off the nav keeps its always-visible wrap fallback (<=600px)
   untouched. At >=821px the desktop nav always shows and the button never
   does. */
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:40px; padding:0; background:transparent; border:var(--hair) solid var(--line-2); border-radius:var(--radius-sm); transition:border-color .2s var(--ease); }
.nav-toggle:hover{ border-color:var(--ink-mute); }
.nav-toggle-icon{ position:relative; display:block; width:18px; height:2px; background:var(--ink); border-radius:1px; }
.nav-toggle-icon::before,.nav-toggle-icon::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:1px; transition:transform .2s var(--ease), top .2s var(--ease); }
.nav-toggle-icon::before{ top:-6px; }
.nav-toggle-icon::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }
@media (max-width:820px){
  body[data-nav-js] .nav-toggle{ display:inline-flex; }
  body[data-nav-js] .site-header .wrap{ height:64px; flex-wrap:nowrap; padding-block:0; gap:1rem; }
  body[data-nav-js] .nav{ display:none; }
  body[data-nav-js] .nav[data-open]{
    display:flex; position:absolute; top:100%; left:0; right:0; z-index:39;
    flex-direction:column; align-items:stretch; gap:0; width:auto;
    padding:.4rem clamp(1.1rem, 4vw, 2.4rem) 1rem;
    background:var(--bg); border-bottom:var(--hair) solid var(--line-2); box-shadow:var(--shadow);
  }
  body[data-nav-js] .nav[data-open] a{ padding-block:.85rem; font-size:1.02rem; border-top:var(--hair) solid var(--line); }
  body[data-nav-js] .nav[data-open] a:first-child{ border-top:0; }
  body[data-nav-js] .nav[data-open] .nav-logout{ margin-left:0; border-top:var(--hair) solid var(--line); }
  body[data-nav-js] .nav[data-open] .nav-logout button{ padding-block:.85rem; font-size:1.02rem; }
}

/* ---- scroll-solid header (shop.js sets body[data-scrolled] past 24px) ---- */
body[data-scrolled] .site-header{
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom-color:var(--line-2);
  box-shadow:var(--shadow-sm);
}

/* ---- product gallery thumbs (buttons; shop.js swaps the hero image) ------ */
.thumbs button.tile{ padding:0; cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.thumbs button.tile:hover{ border-color:var(--ink-mute); }
.thumbs button.tile[aria-current="true"]{ border-color:var(--forest); box-shadow:0 0 0 2px color-mix(in srgb, var(--forest) 35%, transparent); }

/* ---- cart quantity stepper (buttons injected by shop.js) ----------------- */
.qty-stepper{ display:inline-flex; align-items:center; gap:.4rem; }
.qty-stepper input[type=number]{ text-align:center; appearance:textfield; -moz-appearance:textfield; }
.qty-stepper input[type=number]::-webkit-outer-spin-button,
.qty-stepper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-btn{ display:inline-grid; place-items:center; width:32px; height:32px; padding:0; background:var(--surface); color:var(--ink-soft); border:var(--hair) solid var(--line-2); border-radius:var(--radius-pill); font-size:1.05rem; line-height:1; transition:border-color .2s var(--ease), color .2s var(--ease); }
.qty-btn:hover{ border-color:var(--ink-mute); color:var(--ink); }

/* ---- catalogue facet rail (native details/summary; no JS needed) --------- */
.filter-rail{ margin-top:.9rem; }
.filter-rail > summary{
  display:inline-flex; align-items:center; gap:.55rem; list-style:none; cursor:pointer; user-select:none;
  font-family:var(--sans); font-size:.95rem; font-weight:500; line-height:1; color:var(--ink);
  padding:.85rem 1.5rem; background:transparent; border:var(--hair) solid var(--line-2); border-radius:var(--radius-pill);
  transition:background .2s var(--ease);
}
.filter-rail > summary::-webkit-details-marker{ display:none; }
.filter-rail > summary:hover{ background:var(--surface-2); }
.filter-rail > summary::after{
  content:""; width:.45em; height:.45em; margin-top:-.2em;
  border-right:1.5px solid var(--ink-mute); border-bottom:1.5px solid var(--ink-mute);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.filter-rail[open] > summary::after{ transform:rotate(-135deg); margin-top:.2em; }
.filter-body{ margin-top:1rem; padding:1.2rem 1.3rem; background:var(--surface); border:var(--hair) solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.filter-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.9rem 1rem; }
.filter-grid .field{ margin-bottom:0; }

/* ---- active facet pills (server-rendered removal links) ------------------ */
.filter-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-3); }
.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem;
  border-radius:var(--radius-pill); background:var(--surface-2); border:var(--hair) solid var(--line);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover{ border-color:var(--ink-mute); color:var(--ink); }
.pill-x{ position:relative; width:.6em; height:.6em; flex:none; }
.pill-x::before,.pill-x::after{ content:""; position:absolute; left:50%; top:50%; width:100%; height:1.5px; background:currentColor; }
.pill-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.pill-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ---- show banner (product page, WS1) ------------------------------------- */
.banner-show{
  margin-top:1.2rem; padding:1.1rem 1.3rem;
  background:color-mix(in srgb, var(--bloom) 7%, var(--surface));
  border:var(--hair) solid color-mix(in srgb, var(--bloom) 26%, var(--line));
  border-left:3px solid var(--bloom); border-radius:var(--radius-sm);
}
.banner-show .banner-lead{ font-family:var(--serif); font-size:var(--step-2); line-height:1.35; color:var(--ink); }

/* ---- print (cart / order pages print cleanly) --------------------------- */
@media print{
  .site-header,.site-footer{ display:none; }
  body{ background:#fff; color:#000; }
  main{ display:block; }
  .wrap{ max-width:none; margin-inline:0; padding-inline:0; }
  *{ box-shadow:none !important; }
  .tile,.hero-media,.choice,.badge,.form-errors,input,select,textarea,.site-header,.card .tile{ background:#fff !important; }
  a{ color:#000; }
}

/* ---- accessibility utilities ------------------------------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:.6rem; top:-4rem; z-index:100; background:var(--forest); color:var(--forest-ink); padding:.6rem 1rem; border-radius:var(--radius-sm); font-size:.9rem; transition:top .15s var(--ease); }
.skip-link:focus{ top:.6rem; }

/* ---- Admin analytics charts (SVG): colour lives here, never in markup ---- */
.chart{ width:100%; height:auto; display:block; margin-top:var(--sp-3); }
.chart-bar-a{ fill:var(--forest); }
.chart-bar-b{ fill:var(--bloom); }
.chart-grid{ stroke:var(--line); }
.chart-axis{ stroke:var(--line-2); }
.chart-label{ fill:var(--ink-mute); font-family:var(--mono); font-size:10px; }
.chart-empty{ fill:var(--ink-mute); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-3); font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.chart-key{ display:inline-flex; align-items:center; gap:.5rem; }
.chart-key::before{ content:""; display:inline-block; width:.75rem; height:.75rem; border-radius:2px; }
.chart-key--a::before{ background:var(--forest); }
.chart-key--b::before{ background:var(--bloom); }
/* Journal in-article media: video loops and photos from the licensed
   stock pack; decorative, never product evidence. */
.journal-media{ margin:0 0 1.4rem; }
.journal-media video, .journal-media img{ width:100%; border-radius:12px; display:block; }
.journal-media figcaption{ font-size:.85rem; color:var(--ink-soft); margin-top:.45rem; }

/* Cart line items: gallery cards instead of a spreadsheet. Tokens only. */
.cart-lines{ display:flex; flex-direction:column; gap:1rem; margin-top:var(--sp-3); }
.cart-line{ display:grid; grid-template-columns:88px 1fr auto; gap:1rem 1.2rem; align-items:center;
  padding:1rem; border:1px solid var(--hairline, #E4E0D8); border-radius:14px; background:var(--surface, transparent); }
.cart-line .tile{ width:88px; height:88px; border-radius:10px; overflow:hidden; }
.cart-line .tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-line-main{ min-width:0; }
.cart-line-title{ font-size:1rem; line-height:1.35; margin:0; }
.cart-line-meta{ font-size:.85rem; color:var(--ink-soft, #5D6660); margin-top:.25rem; }
.cart-line-end{ display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; }
.cart-line-qty{ display:flex; align-items:center; gap:.5rem; }
.cart-line-qty input{ width:4.2rem; text-align:center; }
@media (max-width:560px){
  .cart-line{ grid-template-columns:64px 1fr; }
  .cart-line .tile{ width:64px; height:64px; }
  .cart-line-end{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
}

/* ---- perfection-wave additions ------------------------------------------ */
/* Sold cards read as archival: the photograph steps back a little while the
   page behind it stays the specimen's record. */
.card--sold .tile img{ filter:saturate(.55); }
.card--sold .card-title a{ color:var(--ink-soft); }

/* Eyebrows inside prose keep their token: .prose p (0,1,1) out-specifies
   .eyebrow (0,1,0), so restate the colour at equal weight. */
.prose .eyebrow{ color:var(--ink-mute); }

/* The catalogue search owns its own row on phones so the placeholder is
   never clipped. */
@media (max-width:600px){
  .filters input[type="search"]{ flex-basis:100%; }
}

/* Product gallery arrows: built by shop.js only when there is more than one
   photograph, overlaid on the main tile. Quiet circles that strengthen on
   hover; generous hit areas for thumbs. */
.gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:var(--hair) solid var(--line);
  background:rgba(255,255,255,.86); color:var(--ink); font-size:1.15rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s var(--ease), box-shadow .15s var(--ease); }
.gallery-nav:hover{ background:#fff; box-shadow:var(--shadow); }
.gallery-nav:focus-visible{ outline:2px solid var(--forest); outline-offset:2px; }
.gallery-nav--prev{ left:.7rem; }
.gallery-nav--next{ right:.7rem; }

/* Small hint text under a form control (promotes the repeated inline
   p.choice-note margin idiom to one utility). */
.field-hint{ margin:.35rem 0 0; font-size:.85rem; color:var(--ink-mute); }

/* Cart summary block under the line items. */
.cart-summary{ display:flex; justify-content:space-between; align-items:baseline;
  border-top:var(--hair) solid var(--line-2, var(--line)); margin-top:1.2rem; padding-top:1rem; }
.cart-summary .price{ font-size:1.15rem; }