/* ==========================================================================
   DRIP Wear design system — see DESIGN-SYSTEM.md and styleguide.html
   Rule: components NEVER hardcode colour, type size, tracking, spacing step,
   motion or z-index. They reference the tokens below. Add a token before
   adding a one-off value.
   Modeled on the Jacquemus storefront measurements. Font: Jost (Futura PT stand-in).
   ========================================================================== */
:root {
  /* Colour — semantic roles. Values below are the LIGHT fallback; the theme block after :root
     redefines every one of them once as light-dark(light, dark). Photography supplies all other colour. */
  --paper: #ffffff;                     /* page background; inverse text on ink fills */
  --ink: #2e2e2e;                       /* text, primary button, active states, icon fill */
  --surface: #f4f4f4;                   /* image / tile placeholder background */
  --line: #d9d9d9;                      /* every 1px divider and outline */
  --muted: #6b6b6b;                     /* secondary text (AA on paper and surface) */
  --disabled: #c0c0c0;                  /* unavailable (sold-out sizes) — always with strike-through */
  --error: #b00020;                     /* validation only */
  --overlay: rgba(255, 255, 255, .7);   /* backdrop behind drawers / modals */
  --ring: rgba(0, 0, 0, .1);            /* hairline around colour swatches, so any swatch is visible on any theme */
  --header-scrim: transparent;          /* header background once it floats over imagery */
  /* Theme-independent constants */
  --on-image: #fff;        /* text placed on editorial photography (always with the shadow below) */
  --photo-ink: #2e2e2e;    /* text/icons placed on product photography, whose backdrop is always light grey */
  --shadow-on-image: 0 0 12px rgba(0, 0, 0, .25);
  --scrim: linear-gradient(to top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 35%);  /* legibility gradient under photo captions */

  /* Typography — one family, two weights (400 / 500). Sizes are a closed scale. */
  --font: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --fs-2xs: 8px;    /* badges, counts */
  --fs-xs: 9px;     /* field labels, legal micro-copy */
  --fs-sm: 10px;    /* BASE: body, tile name/price, captions */
  --fs-md: 12px;    /* UI text, buttons, headings of sections */
  --fs-lg: 14px;    /* nav, inputs, toolbar, PDP title */
  --fs-xl: 16px;    /* listing title */
  --fs-2xl: 18px;   /* drawer menu, thank-you line */
  --fs-3xl: 22px;   /* statements / quotes */
  --fs-logo: 26px;  /* wordmark */
  --lh-xs: 14px; --lh-sm: 16px; --lh-md: 18px; --lh-base: 20px; --lh-lg: 24px; --lh-xl: 28px; --lh-2xl: 32px;
  --fw-regular: 400; --fw-medium: 500;   /* the only non-regular weight: buttons, wordmark, uppercase headings */
  --ls-base: .56px;   /* default tracking */
  --ls-1: 1px;        /* badges, small caps, wordmark */
  --ls-2: 1.5px;      /* uppercase labels (accordions, filters) */
  --ls-3: 2.4px;      /* buttons and uppercase headings */

  /* Spacing — 4/8 based, closed scale. Use these for margin, padding, gap. */
  --sp-1: 2px;   /* grid gap between tiles */
  --sp-2: 4px;   --sp-3: 8px;   --sp-4: 12px;  --sp-5: 16px;
  --sp-6: 20px;  /* page side padding (inner pages) */
  --sp-7: 24px;  --sp-8: 30px;  /* header side padding */
  --sp-9: 40px;  --sp-10: 60px; --sp-11: 80px; --sp-12: 120px;
  --gut: 14px;   /* side gutter for full-bleed grids, toolbars, captions */

  /* Layout */
  --bar-h: 32px; --header-h: 82px;
  --drawer-w: 43vw; --drawer-min: 400px; --drawer-max: 640px;
  --content-w: 1100px; --content-w-narrow: 640px;
  --btn-pad-x: 48px;
  --control-h: 50px; --control-h-sm: 40px; --control-h-xs: 30px;

  /* Shape — sharp. No border-radius (only true circles: dots, radios, swatch rings) and no shadow except --shadow-on-image. */
  --border: 1px solid var(--line);

  /* Motion — opacity / transform only, never bounce. */
  --t-fast: .2s; --t-base: .3s; --t-slow: .35s ease;

  /* Stacking */
  --z-raised: 2; --z-dropdown: 20; --z-header: 50; --z-backdrop: 60;
  --z-drawer: 70; --z-modal: 100; --z-cookie: 101;

  /* Breakpoints (reference only; CSS media queries can't read vars) */
  /* sm 544 · md 769 · lg 1024 · xl 1200 */
}
/* ==========================================================================
   Theme — light by default, follows the system, and can be forced with <html data-theme="light|dark">.
   Every colour token is defined ONCE here as light-dark(light, dark). Never write a theme-specific
   rule in a component; if a component looks wrong in one theme the token role is wrong.
   ========================================================================== */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --paper: light-dark(#ffffff, #121212);
    --ink: light-dark(#2e2e2e, #ededed);
    --surface: light-dark(#f4f4f4, #1c1c1c);
    --line: light-dark(#d9d9d9, #333333);
    --muted: light-dark(#6b6b6b, #a1a1a1);
    --disabled: light-dark(#c0c0c0, #4d4d4d);
    --error: light-dark(#b00020, #ff7a8a);
    --overlay: light-dark(rgba(255, 255, 255, .7), rgba(18, 18, 18, .72));
    --ring: light-dark(rgba(0, 0, 0, .1), rgba(255, 255, 255, .2));
    --header-scrim: light-dark(transparent, rgba(18, 18, 18, .92));
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}
@media print { :root, :root[data-theme] { color-scheme: light; } }   /* paper and PDF are always light */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); font-size: var(--fs-sm); line-height: var(--lh-base); letter-spacing: var(--ls-base);
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
body.noscroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 400; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.link, .u { text-decoration: underline; text-underline-offset: 3px; }
button.link { font-size: var(--fs-sm); color: var(--muted); }

/* Accessibility baseline (both themes) */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .search__bar input:focus-visible { outline: 0; }   /* fields show a 2px underline instead */
.tile__link:focus-visible, .hero__cell:focus-visible, .edit__cell:focus-visible { outline-offset: -4px; }
::selection { background: var(--ink); color: var(--paper); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 100px var(--paper) inset; }   /* keeps browser autofill from painting yellow/blue */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Announcement bar + header ---------- */
.bar { height: var(--bar-h); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); text-align: center; padding: 0 var(--sp-4); }
.header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--sp-7) var(--sp-8) var(--sp-8); background: var(--paper); transition: background var(--t-base);
}
.header.is-clear { background: var(--header-scrim); }
.header:hover { background: var(--paper); }
.header__left { display: flex; align-items: center; gap: var(--sp-9); }
.logo { font-size: var(--fs-logo); line-height: var(--lh-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-1); text-transform: uppercase; }
.nav { display: flex; gap: var(--sp-7); }
.nav a { font-size: var(--fs-lg); line-height: var(--lh-md); display: block; padding: var(--sp-2) 0; }
.nav > li > a:hover { opacity: .55; }
.header__right { display: flex; align-items: center; gap: var(--sp-7); font-size: var(--fs-lg); line-height: var(--lh-md); padding-top: var(--sp-2); }
.header__right svg, .burger svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; display: block; }
.header__right button, .header__right a { display: flex; align-items: center; font-size: var(--fs-lg); }
/* Small icons keep their look; the tap area grows to at least 32 x 44 px (WCAG 2.5.8 asks for 24 x 24). */
.header__right button, .header__right a, .burger { position: relative; }
.header__right button::before, .header__right a::before, .burger::before { content: ''; position: absolute; inset: -14px -8px; }
.cart-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); margin-left: var(--sp-3); }
.cart-dot.on { background: transparent; width: auto; height: auto; margin-left: var(--sp-3); }
.cart-dot.on::after { content: attr(data-n); }
.burger { display: none; }
.header--min { justify-content: space-between; align-items: center; padding: 0 var(--sp-8); height: 70px; border-bottom: var(--border); }
.header--min .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.header--min .back, .header--min .secure { font-size: var(--fs-md); display: flex; gap: var(--sp-3); align-items: center; }
.header--min svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: var(--border);
  padding: var(--sp-8) var(--sp-8) var(--sp-9); display: grid; grid-template-columns: repeat(3, 1fr) 1fr 2fr; gap: var(--sp-8);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base);
}
.nav > li:hover .mega, .nav > li:focus-within .mega { opacity: 1; visibility: visible; }
.mega .mega__t { font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-3); text-transform: uppercase; margin-bottom: var(--sp-4); }
.mega li a { font-size: var(--fs-md); padding: var(--sp-1) 0; }
.mega li a sup, .count { font-size: var(--fs-2xs); margin-left: var(--sp-2); color: var(--muted); }
.mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.mega__card { position: relative; aspect-ratio: 3/4; max-height: 260px; background: var(--surface); }
.mega__card span { position: absolute; left: 12px; bottom: 12px; color: var(--on-image); font-size: var(--fs-md); text-shadow: var(--shadow-on-image); }

/* ---------- Drawers / search / backdrop ---------- */
.backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity var(--t-base); }
.backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: var(--drawer-w); min-width: var(--drawer-min); max-width: var(--drawer-max);
  background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--t-slow);
  box-shadow: -1px 0 0 var(--line);
}
.drawer--left { right: auto; left: 0; transform: translateX(-100%); box-shadow: 1px 0 0 var(--line); }
.drawer.open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-8) var(--sp-7) var(--sp-5); font-size: var(--fs-sm); }
.x { font-size: var(--fs-lg); line-height: var(--lh-xs); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-7) var(--sp-7); }
.drawer__foot { padding: var(--sp-5) var(--sp-7) var(--sp-7); }
.sum { display: flex; justify-content: space-between; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.btnrow { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.btnrow .btn { flex: 1; padding: var(--sp-2) var(--sp-4); }
.mnav li a { display: block; font-size: var(--fs-2xl); line-height: var(--lh-xl); padding: var(--sp-3) 0; border-bottom: var(--border); }
.search {
  position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-drawer); background: var(--paper); max-height: 100vh; overflow-y: auto;
  transform: translateY(-100%); transition: transform var(--t-slow); box-shadow: 0 1px 0 var(--line);
}
.search.open { transform: none; }
.search__bar { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-7) var(--sp-8); border-bottom: var(--border); }
.search__bar input { flex: 1; border: 0; outline: 0; font-size: var(--fs-2xl); line-height: var(--lh-xl); background: transparent; }
.search__body { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-8); padding: var(--sp-8); min-height: 260px; }
.search .search__t { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin-bottom: var(--gut); text-transform: uppercase; letter-spacing: var(--ls-2); }
.search__pop a { display: block; font-size: var(--fs-lg); line-height: var(--lh-xl); }
.search__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-6); }
.recent { margin-top: var(--sp-10); }
.recent h6 { font-size: var(--fs-sm); font-weight: 400; margin-bottom: var(--sp-4); }
.recent__row { display: flex; gap: var(--sp-1); }
.recent__row a { width: 100px; aspect-ratio: 3/4; background: var(--surface); }
.line { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: var(--border); }
.line__img { background: var(--surface); aspect-ratio: 3/4; }
.line__info { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.line__nm { font-size: var(--fs-md); }
.line__info > span:not(.line__nm) { color: var(--muted); }
.line__price { text-align: right; font-size: var(--fs-md); display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.qty { display: inline-flex; align-items: center; gap: var(--gut); border: var(--border); height: var(--control-h-xs); padding: 0 var(--sp-4); margin-top: var(--sp-4); width: fit-content; }
.qty button { font-size: var(--fs-lg); line-height: var(--lh-xs); }
.line--big { grid-template-columns: 130px 1fr auto; padding: var(--sp-7) 0; }
.line--big .line__nm, .line--big .line__price { font-size: var(--fs-lg); }

/* ---------- Buttons / fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: var(--control-h); padding: var(--sp-2) var(--btn-pad-x);
  background: var(--ink); color: var(--paper); font-size: var(--fs-md); line-height: var(--lh-lg); font-weight: var(--fw-medium); letter-spacing: var(--ls-3); text-transform: uppercase;
  border: 1px solid var(--ink); transition: background var(--t-base), color var(--t-base); text-align: center; cursor: pointer;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.field { position: relative; display: block; margin-bottom: var(--gut); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; outline: 0; border-radius: 0;
  padding: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-lg); line-height: var(--lh-base); appearance: none;
}
.field textarea { min-height: 110px; resize: vertical; }
.field span { position: absolute; left: 0; top: 14px; font-size: var(--fs-md); color: var(--muted); pointer-events: none; transition: all var(--t-fast); }
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span,
.field select + span { top: 2px; font-size: var(--fs-xs); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-width: 2px; }
.field--sel::after { content: "⌄"; position: absolute; right: 2px; bottom: 6px; pointer-events: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.chk { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-md); margin: var(--sp-4) 0; cursor: pointer; }
.chk input { appearance: none; width: 14px; height: 14px; border: 1px solid var(--ink); flex: none; margin: 0; display: grid; place-content: center; }
.chk input[type=radio] { border-radius: 50%; }
.chk input:checked::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.chk input[type=radio]:checked::before { border-radius: 50%; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; height: calc(100vh - var(--header-h) - var(--bar-h)); min-height: 520px; }
.hero__cell, .edit__cell { position: relative; overflow: hidden; display: block; background: var(--surface); }
.cap { position: absolute; left: 14px; bottom: 28px; color: var(--on-image); font-size: var(--fs-md); line-height: var(--lh-xs); text-shadow: var(--shadow-on-image); }

/* ---------- Tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--sp-1); padding: var(--sp-1); }
.tile { position: relative; background: var(--paper); }
.tile__link { position: relative; display: block; aspect-ratio: 3/4; background: var(--surface); overflow: hidden; }
.tile__link img { object-fit: cover; object-position: 50% 30%; transition: opacity var(--t-base); }
.tile__link img.alt { position: absolute; inset: 0; opacity: 0; }
.tile:hover .tile__link img.alt { opacity: 1; }
.tile__badge { position: absolute; top: 14px; left: 14px; font-size: var(--fs-2xs); letter-spacing: var(--ls-1); text-transform: uppercase; }
.tile__sw { position: absolute; top: 14px; right: 14px; display: flex; gap: var(--sp-2); }
.tile__sw i { width: 9px; height: 9px; background: var(--c); display: block; box-shadow: 0 0 0 1px var(--ring); }
.tile__arrow { position: absolute; top: 50%; font-size: var(--fs-2xl); opacity: 0; transition: opacity var(--t-base); transform: translateY(-50%); }
.tile__arrow.l { left: 12px; } .tile__arrow.r { right: 12px; }
.tile:hover .tile__arrow { opacity: 1; }
.tile__meta { display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-xs); }
.tile__meta a { display: block; }
.tile__meta .nm, .tile__meta .price { display: block; }
.tile__meta .price { color: var(--muted); }
.heart { width: 24px; height: 24px; margin: -4px; flex: none; position: relative; z-index: 2; display: grid; place-items: center; }   /* 24 px box (WCAG 2.5.8), the icon stays 14 px */
.heart svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.heart.on svg { fill: var(--ink); }
.tile--hover .tile__meta { position: absolute; left: 14px; right: 14px; bottom: 12px; opacity: 0; transition: opacity var(--t-base); pointer-events: none; }
.tile--hover:hover .tile__meta { opacity: 1; pointer-events: auto; }
.tile--hover .tile__meta .price { color: var(--ink); }
.tile--plp .tile__meta { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
.tile--plp .tile__meta .price { margin-top: var(--sp-1); }

/* ---------- Editorial ---------- */
.edit, .edit-half { display: grid; grid-template-columns: 1fr 1fr; }
.edit__cell { aspect-ratio: 4/5; }
.edit--tall .edit__cell { aspect-ratio: 3/4; }
.full { position: relative; aspect-ratio: 16/8; overflow: hidden; background: var(--surface); display: block; }

/* ---------- Service strip / footer ---------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: var(--border); border-bottom: var(--border); margin-top: var(--sp-10); padding: var(--sp-10) var(--sp-8) var(--sp-10); }
.strip .strip__t { font-size: var(--fs-md); line-height: var(--lh-xs); font-weight: 400; color: var(--ink); max-width: none; margin: 0 auto var(--sp-6); }
.strip p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-xs); max-width: 220px; margin: 0 auto; }
.footer__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--border); }
.footer__news, .footer__help { padding: var(--sp-7) var(--gut) var(--sp-7); }
.footer__news .footer__t, .footer__help .footer__t { font-size: var(--fs-sm); font-weight: 400; color: var(--ink); margin-bottom: var(--sp-6); max-width: none; }
.footer__news p { max-width: 300px; margin-bottom: var(--sp-6); }
.footer__help { border-left: var(--border); }
.footer__help p { color: var(--muted); margin-bottom: var(--sp-10); }
.footer__help a, .footer__soc a, .footer__bottom a.u { text-decoration: underline; text-underline-offset: 3px; margin-right: var(--sp-5); }
.footer__links { display: flex; justify-content: space-between; padding: var(--sp-7) var(--gut) var(--sp-9); border-bottom: var(--border); }
.footer__links .grp { display: flex; gap: var(--sp-12); align-items: flex-start; }
.footer__links summary { list-style: none; cursor: pointer; display: flex; gap: var(--gut); align-items: center; }
.footer__links summary::after { content: "⌄"; }
.footer__links details[open] summary::after { content: "⌃"; }
.footer__links details a { display: block; color: var(--muted); }
.footer__links details a:hover { color: var(--ink); }
.footer__soc span { display: block; margin-bottom: var(--sp-4); text-align: right; }
.footer__soc a:last-child { margin-right: 0; }
.footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--sp-9) var(--sp-6) var(--sp-8); }
.footer__bottom .logo { font-size: var(--fs-3xl); text-align: center; }
.footer__bottom .r { text-align: right; line-height: var(--lh-lg); }
.footer__bottom .r a { margin: 0; display: block; }
.footer--min { display: flex; justify-content: center; gap: var(--sp-8); padding: var(--sp-9) 0; border-top: var(--border); margin-top: var(--sp-10); }

/* ---------- Modals / cookie ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; align-items: center; justify-content: center; }
.modal__box { background: var(--paper); width: min(92vw, 420px); padding: var(--sp-9) var(--sp-9) var(--sp-8); box-shadow: 0 0 0 1px var(--line); position: relative; max-height: 90vh; overflow-y: auto; }
.modal__box h2 { font-size: var(--fs-md); letter-spacing: var(--ls-3); margin-bottom: var(--sp-6); }
.modal__box p { font-size: var(--fs-sm); line-height: var(--lh-sm); margin-bottom: var(--sp-4); }
.modal__x { position: absolute; top: 24px; right: 22px; font-size: var(--fs-lg); }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie); background: var(--paper); border-top: var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding: var(--sp-7) var(--sp-5); font-size: var(--fs-xs); line-height: var(--lh-xs); align-items: center; }
.cookie .row { display: flex; gap: var(--sp-4); }
.cookie .btn { flex: 1; height: var(--control-h-sm); padding: 0; font-size: var(--fs-sm); }

/* ---------- Generic page layout (account / cart / contact style) ---------- */
.pagehead { padding: var(--sp-9) var(--sp-6) 0; border-bottom: var(--border); height: 130px; font-size: var(--fs-md); }
.pagehead h1 { font-size: var(--fs-md); line-height: var(--lh-xs); letter-spacing: var(--ls-base); }
.pagehead .sub { margin-top: var(--sp-4); color: var(--muted); }
.wrap { max-width: var(--content-w); margin: 0 auto; padding: var(--sp-10) var(--sp-6) 0; }
.wrap--n { max-width: var(--content-w-narrow); }
.wrap h2, .sect h2 { font-size: var(--fs-md); line-height: var(--lh-xs); margin-bottom: var(--sp-6); font-weight: 400; }
.wrap p { font-size: var(--fs-md); line-height: var(--lh-base); margin-bottom: var(--gut); }
.cols { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-11); align-items: flex-start; }
.sect { margin-bottom: var(--sp-10); }
.sect--num h2::before { content: attr(data-n) "  "; color: var(--muted); }
.rows > div { display: flex; justify-content: space-between; font-size: var(--fs-md); line-height: var(--lh-md); padding: var(--sp-3) 0; }
.rows .tot { border-top: 1px solid var(--ink); margin-top: var(--sp-3); padding-top: var(--gut); font-size: var(--fs-lg); }
.promo { display: flex; gap: var(--sp-4); align-items: flex-end; margin: var(--sp-7) 0 var(--sp-3); }
.promo .field { flex: 1; margin: 0; }
.promo .btn { height: var(--control-h-sm); padding: 0 var(--sp-6); font-size: var(--fs-sm); }
.socials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.socials .btn { height: 46px; padding: 0; font-size: var(--fs-md); }
.sticky { position: sticky; top: calc(var(--header-h) + 20px); }
.opt { display: flex; justify-content: space-between; align-items: center; border: var(--border); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-md); cursor: pointer; }
.opt input { appearance: none; width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; margin-right: var(--gut); display: grid; place-content: center; flex: none; }
.opt input:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.opt:has(input:checked) { border-color: var(--ink); }
.opt > label { display: flex; align-items: center; cursor: pointer; flex: 1; }
.opt small { color: var(--muted); font-size: var(--fs-sm); display: block; }
.empty { padding: var(--sp-11) 0; text-align: center; }
.empty p { color: var(--muted); font-size: var(--fs-md); margin-bottom: var(--sp-8); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); padding: 0 0 var(--sp-4); border-bottom: var(--border); }
.tbl td { padding: var(--sp-5) 0; border-bottom: var(--border); }
.pill { border: 1px solid var(--ink); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--ls-1); text-transform: uppercase; }

/* ---------- Listing ---------- */
.subnav { display: flex; gap: var(--sp-8); padding: var(--sp-7) var(--sp-6) var(--sp-6); border-top: var(--border); border-bottom: var(--border); overflow-x: auto; white-space: nowrap; }
.subnav a { font-size: var(--fs-lg); line-height: var(--lh-md); color: var(--muted); }
.subnav a.on, .subnav a:hover { color: var(--ink); }
.subnav a.on { text-decoration: underline; text-underline-offset: 6px; }   /* state is never colour alone */
.plp-title { padding: var(--sp-7) var(--gut) var(--sp-7); }
.plp-title h1 { font-size: var(--fs-xl); line-height: var(--lh-sm); letter-spacing: var(--ls-1); }
.plp-title sup { font-size: var(--fs-2xs); margin-left: var(--sp-2); color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 var(--gut); border-top: var(--border); font-size: var(--fs-lg); }
.toolbar .l, .toolbar .r { display: flex; align-items: center; gap: var(--sp-7); }
.viewby button { font-size: var(--fs-lg); margin-left: var(--sp-4); color: var(--muted); }
.viewby button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.toolbar > .r > button, .sortwrap > button { font-size: var(--fs-lg); }
.sortwrap { position: relative; }
.sortmenu { position: absolute; right: 0; top: 30px; background: var(--paper); border: var(--border); z-index: var(--z-dropdown); min-width: 190px; display: none; }
.sortmenu.open { display: block; }
.sortmenu button, .sortmenu a { display: block; width: 100%; text-align: left; font-size: var(--fs-md); padding: var(--sp-4) var(--sp-5); }
.sortmenu button.on, .sortmenu button:hover, .sortmenu a.on, .sortmenu a:hover { background: var(--surface); }
.chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; padding: 0 var(--gut) var(--sp-6); }
.chips button, .chips a { border: var(--border); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-1); }
.chips button::after, .chips a::after { content: " ✕"; }
.chips a:hover { border-color: var(--ink); }
.more { text-align: center; padding: var(--sp-10) 0 var(--sp-4); }
.more p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--gut); }
.bar-prog { width: 180px; height: 1px; background: var(--line); margin: 0 auto var(--sp-7); position: relative; }
.bar-prog i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); }
.listing [hidden] { display: none !important; }
.listing.is-loading .grid { opacity: .5; transition: opacity var(--t-base); }
.toolbar > .r > button sup { font-size: var(--fs-2xs); margin-left: var(--sp-1); }
.drawer__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tile__meta .price del { color: var(--muted); margin-right: var(--sp-2); }
.tile__meta .price ins { text-decoration: none; }
.acc { border-top: var(--border); }
.acc > summary, .acc__h { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-2); }
.acc > summary::after { content: "⌄"; font-size: var(--fs-lg); }
.acc[open] > summary::after { content: "⌃"; }
.acc__b { padding: 0 0 var(--sp-7); }
.acc__b p { font-size: var(--fs-md); line-height: var(--lh-base); margin-bottom: var(--sp-4); }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.cgrid label { display: flex; align-items: center; gap: var(--sp-3); border: var(--border); height: var(--control-h-xs); padding: 0 var(--sp-4); font-size: var(--fs-xs); letter-spacing: var(--ls-1); text-transform: uppercase; cursor: pointer; }
.cgrid label:has(input:checked) { border-color: var(--ink); }
.cgrid input { display: none; }
.cgrid i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ring); }
.sgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.sgrid label { display: flex; align-items: center; justify-content: center; border: var(--border); height: 34px; font-size: var(--fs-md); cursor: pointer; }
.sgrid label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sgrid input { display: none; }
.drawer__foot .btnrow { margin-top: 0; }
.fchk { display: flex; gap: var(--sp-9); padding: var(--sp-3) 0 var(--sp-7); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 58fr 42fr; align-items: flex-start; }
.pdp__gal { position: relative; }
.pdp__gal img { aspect-ratio: 4/5; background: var(--surface); height: auto; }
.pdp__dots { position: sticky; top: 55vh; height: 0; z-index: var(--z-raised); display: flex; justify-content: flex-end; padding-right: var(--gut); }
.pdp__dots div { display: flex; flex-direction: column; gap: var(--gut); align-self: flex-start; }
.pdp__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--disabled); display: block; }
.pdp__dots i.on { background: var(--ink); }
.pdp__info { position: sticky; top: var(--header-h); padding: var(--sp-11) 8% var(--sp-9) 9%; min-height: calc(100vh - var(--header-h)); }
.pdp__info h1 { font-size: var(--fs-lg); line-height: var(--lh-md); margin-bottom: var(--sp-4); }
.pdp__info .desc { font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 280px; margin-bottom: var(--sp-7); }
.pdp__col { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.pdp__sw { display: flex; gap: 0; margin-left: -5px; padding-bottom: var(--gut); border-bottom: var(--border); margin-bottom: var(--sp-7); }
.pdp__sw a { width: 24px; height: 24px; display: block; position: relative; }   /* 24 px target, 14 px swatch */
.pdp__sw a::before { content: ""; position: absolute; inset: 5px; background: var(--c); box-shadow: 0 0 0 1px var(--ring); }
.pdp__sw a.on::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -2px; height: 1px; background: var(--ink); }
.pdp__sz { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.sizes { display: flex; gap: var(--sp-3) var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.sizes button { font-size: var(--fs-md); color: var(--ink); font-weight: var(--fw-medium); letter-spacing: var(--ls-1); padding: var(--sp-1) 0; border-bottom: 1px solid transparent; }
.sizes button.on { border-bottom-color: var(--ink); }
.sizes button.is-out { color: var(--muted); text-decoration: line-through; font-weight: 400; }   /* selectable (opens notify), so it keeps AA contrast; the strike-through says sold out */
.sizes button.is-out.on { color: var(--muted); }
.atc { width: 100%; height: var(--control-h); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); font-size: var(--fs-sm); letter-spacing: var(--ls-3); text-transform: uppercase; position: relative; }
.atc svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.atc .l { display: flex; gap: var(--sp-4); align-items: center; }
.atc.need { color: var(--muted); }
.atc.need::before { content: attr(data-need); position: absolute; left: 0; right: 0; top: 7px; text-align: center; color: var(--ink); }
.atc.need .l { margin-top: var(--gut); }
.atc.need .p { margin-top: var(--gut); }
.atc.ready { background: var(--ink); color: var(--paper); }
.pdp__info.is-tabs .tabpane > h2 { display: none; }
.tabpane > h2 { margin-bottom: var(--sp-3); }
.wishbtn { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.wishbtn .heart.on svg { fill: var(--ink); }

/* Product page on phones and tablets: 44 px tap targets, and a bottom bar with the sizes and Add to cart (pdp.js) while the real buy block is off screen */
.sbar { display: none; }
@media (max-width: 1024px) {
  .pdp__info .sizes { gap: var(--sp-3); }
  .pdp__info .sizes button { min-width: 44px; height: 44px; padding: 0 var(--sp-4); border: var(--border); }
  .pdp__info .sizes button.on { border-color: var(--ink); }
  .pdp__sw { margin-left: -11px; }
  .pdp__sw a { width: 44px; height: 44px; }
  .pdp__sw a::before { inset: 11px; }
  .pdp__sw a.on::after { left: 11px; right: 11px; bottom: 4px; }
  .wishbtn { min-height: 44px; margin-top: var(--sp-3); }

  .sbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--paper); border-top: var(--border); padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .sbar.is-on { transform: none; visibility: visible; transition: transform .22s ease; }
  .sbar__sizes { display: flex; gap: var(--sp-3); overflow-x: auto; margin-bottom: var(--sp-3); scrollbar-width: none; }
  .sbar__sizes:empty { display: none; }
  .sbar__sizes button { flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 var(--sp-4); border: var(--border); font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-1); color: var(--ink); }
  .sbar__sizes button.on { border-color: var(--ink); }
  .sbar__sizes button.is-out { color: var(--muted); text-decoration: line-through; font-weight: 400; }
  .sbar__atc { width: 100%; height: 48px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); font-size: var(--fs-sm); letter-spacing: var(--ls-3); text-transform: uppercase; color: var(--ink); }
  .sbar__atc.ready { background: var(--ink); color: var(--paper); }
  .sbar__atc:disabled { opacity: .6; }
  .sbar__p del { opacity: .5; margin-right: var(--sp-3); }
  .sbar__p ins { text-decoration: none; }
}
.tabs { display: flex; justify-content: space-between; margin-top: var(--sp-11); border-top: var(--border); }
.tabs button { padding: var(--sp-5) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--muted); border-bottom: 1px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabpane { padding: var(--sp-5) 0 0; font-size: var(--fs-md); line-height: var(--lh-md); }
.tabpane ul { list-style: disc; padding-left: var(--sp-5); }
.sect-label { padding: var(--sp-11) var(--gut) var(--gut); font-size: var(--fs-sm); }
.thin-head { padding: var(--sp-11) var(--gut) var(--gut); font-size: var(--fs-sm); display: flex; justify-content: space-between; }

/* ---------- Editorial text pages ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; }
.story__txt { padding: 15% 12%; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); }
.story__txt h2 { font-size: var(--fs-md); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: var(--fw-medium); }
.story__txt p { font-size: var(--fs-md); line-height: var(--lh-base); }
.story__img { aspect-ratio: 4/5; background: var(--surface); }
.quote { padding: var(--sp-12) var(--sp-6); text-align: center; font-size: var(--fs-3xl); line-height: var(--lh-2xl); letter-spacing: var(--ls-base); max-width: 760px; margin: 0 auto; }
.faq summary { padding: var(--sp-6) 0; font-size: var(--fs-md); cursor: pointer; list-style: none; display: flex; justify-content: space-between; border-top: var(--border); }
.faq summary::after { content: "+"; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--sp-6); max-width: 560px; }
.faq h2 { margin: var(--sp-10) 0 var(--gut); }
.legal h2 { margin-top: var(--sp-8); }
.timeline { display: flex; justify-content: space-between; margin: var(--sp-9) 0 var(--sp-4); font-size: var(--fs-sm); text-align: center; }
.timeline div { flex: 1; position: relative; padding-top: var(--sp-6); color: var(--muted); }
.timeline div::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--line); }
.timeline div::after { content: ""; position: absolute; top: 0; left: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: var(--border); }
.timeline .on { color: var(--ink); }
.timeline .on::after { background: var(--ink); border-color: var(--ink); }
.acct { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-10); }
.acct nav a, .acct nav button { display: block; font-size: var(--fs-md); line-height: var(--lh-md); padding: var(--sp-3) 0; color: var(--muted); text-align: left; }
.acct nav a.on, .acct nav a:hover { color: var(--ink); }
.acct section { display: none; }
.acct section.on { display: block; }
.addr { border: var(--border); padding: var(--sp-6); font-size: var(--fs-md); line-height: var(--lh-base); }
.nf { text-align: center; padding: var(--sp-12) var(--sp-6); }
.nf h1 { font-size: var(--fs-md); margin-bottom: var(--sp-6); }
.nf p { color: var(--muted); margin-bottom: var(--sp-8); font-size: var(--fs-md); }

/* ---------- Small components that used to be inline ---------- */
.btn--compact { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--ls-2); }
.actions { display: flex; gap: var(--sp-4); }
.lead { font-size: var(--fs-2xl); line-height: var(--lh-xl); margin-bottom: var(--sp-4); }
.form-error { color: var(--error); font-size: var(--fs-md); min-height: var(--lh-md); }
.form-narrow { max-width: 520px; }
.two--tight { gap: var(--sp-2); }
.opt__panel { padding: var(--sp-4) var(--sp-5) var(--sp-6); border: var(--border); border-top: 0; margin: calc(var(--sp-3) * -1) 0 var(--sp-3); }
.range { width: 100%; accent-color: var(--ink); }
.grid__empty { grid-column: 1 / -1; padding: var(--sp-11) var(--gut); font-size: var(--fs-md); color: var(--muted); }
.modal__box--wide { width: min(92vw, 520px); }
.modal__img { display: block; width: 100%; height: auto; }
.full--short { aspect-ratio: 16 / 7; }
.grid--flush { margin-top: var(--sp-1); }
.btn sup { font-size: var(--fs-2xs); margin-left: var(--sp-2); }

/* ---------- Utilities (token-only; never add a raw px value here) ---------- */
.mt-1 { margin-top: var(--sp-1); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mt-8 { margin-top: var(--sp-8); } .mt-9 { margin-top: var(--sp-9); } .mt-10 { margin-top: var(--sp-10); }
.pt-8 { padding-top: var(--sp-8); } .pt-10 { padding-top: var(--sp-10); } .pt-11 { padding-top: var(--sp-11); }
.pb-9 { padding-bottom: var(--sp-9); }
.t-2xs { font-size: var(--fs-2xs); } .t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); } .t-2xl { font-size: var(--fs-2xl); } .t-3xl { font-size: var(--fs-3xl); }
.t-ink { color: var(--ink); } .t-muted { color: var(--muted); } .t-error { color: var(--error); } .t-center { text-align: center; }
.self-start { align-self: flex-start; }

/* ---------- Validation (per field) ---------- */
.field--error input, .field--error select, .field--error textarea { border-bottom-color: var(--error); }
.field--error > span { color: var(--error); }
.field small, .chk-wrap small { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--error); margin-top: var(--sp-2); }
.chk--error { color: var(--error); }
.chk--error input { border-color: var(--error); }
.chk-wrap { margin: var(--sp-3) 0; }
.chk-wrap .chk { margin-bottom: 0; }

/* ---------- Reviews, fit, notify ---------- */
.rating { display: inline-flex; gap: var(--sp-1); vertical-align: middle; }
.rating i { width: var(--sp-3); height: var(--sp-3); border: 1px solid var(--ink); display: block; }
.rating i.on { background: var(--ink); }
.rating--input i { width: var(--sp-5); height: var(--sp-5); cursor: pointer; }
.reviews__sum { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); padding-bottom: var(--sp-5); }
.reviews__avg { font-size: var(--fs-3xl); line-height: var(--lh-xl); }
.review { border-top: var(--border); padding: var(--sp-5) 0; font-size: var(--fs-md); line-height: var(--lh-base); }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.review__meta { color: var(--muted); font-size: var(--fs-sm); }
.review h4 { font-weight: var(--fw-medium); font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-1); }
.fit { margin: var(--sp-5) 0 var(--sp-3); }
.fit__track { position: relative; height: 1px; background: var(--line); margin: var(--sp-4) 0 var(--sp-3); }
.fit__dot { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.fit__labels { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.notify { border: var(--border); padding: var(--sp-5); margin-bottom: var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-md); }
.notify .field { margin: var(--sp-3) 0 var(--sp-4); }
.finder { border-top: var(--border); margin-top: var(--sp-6); padding-top: var(--sp-5); }
.finder__res { margin-top: var(--sp-4); font-size: var(--fs-md); }

/* ---------- Pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: var(--sp-6); padding: var(--sp-10) var(--gut) var(--sp-5); font-size: var(--fs-md); }
.pager a, .pager span, .pager button { color: var(--muted); padding: var(--sp-2) 0; border-bottom: 1px solid transparent; }
.pager a:hover, .pager button:hover { color: var(--ink); }
.pager .on { color: var(--ink); border-bottom-color: var(--ink); }
.pager .dis { color: var(--disabled); pointer-events: none; }

/* ---------- Locale switcher ---------- */
.locale .field { margin-bottom: var(--sp-5); }
.locale__note { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-sm); margin: 0 0 var(--sp-5); }

/* ---------- Print (invoices, order pages) ---------- */
@media print {
  .bar, .header, .drawer, .backdrop, .search, .cookie, .modal, .strip, footer, .no-print { display: none !important; }
  body { font-size: var(--fs-md); }
}

/* ---------- On-photo elements: photography is never theme-inverted, so its overlays use fixed colours ---------- */
.tile__badge, .tile__arrow, .tile--hover .tile__meta, .tile--hover .tile__meta .price { color: var(--photo-ink); }
.tile--hover .heart.on svg { fill: var(--photo-ink); }
.pdp__dots i { background: var(--photo-ink); opacity: .3; }
.pdp__dots i.on { background: var(--photo-ink); opacity: 1; }
.hero__cell::before, .edit__cell::before, .full::before { content: ""; position: absolute; inset: 0; background: var(--scrim); pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav, .mega { display: none; }
  .burger { display: block; }
  .header__left { gap: var(--sp-6); }
  .grid { --cols: 2 !important; }
  .strip { grid-template-columns: 1fr; gap: var(--sp-9); }
  .footer__row { grid-template-columns: 1fr; }
  .footer__help { border-left: 0; border-top: var(--border); }
  .footer__links { flex-direction: column; gap: var(--sp-8); }
  .footer__links .grp { flex-direction: column; gap: var(--sp-5); }
  .footer__bottom { grid-template-columns: 1fr; gap: var(--sp-5); text-align: center; }
  .footer__bottom .r { text-align: center; }
  .cols { grid-template-columns: 1fr; gap: var(--sp-9); }
  .pdp { grid-template-columns: 1fr; }
  .pdp__info { position: static; padding: var(--sp-8) var(--sp-6); min-height: 0; }
  .pdp__dots { display: none; }
  .story { grid-template-columns: 1fr; }
  .acct { grid-template-columns: 1fr; gap: var(--sp-6); }
  .search__body { grid-template-columns: 1fr; }
  .search__grid { grid-template-columns: repeat(2, 1fr); }
  .toolbar .viewby { display: none; }
}
@media (max-width: 769px) {
  .header { padding: var(--sp-6) var(--sp-5); }
  .header__right { gap: var(--sp-5); }
  .header__right .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }  /* hidden, but still the button's name */
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero__cell { height: 75vh; }
  .edit, .edit-half { grid-template-columns: 1fr; }
  .cookie { grid-template-columns: 1fr; }
  .drawer { width: 100vw; min-width: 0; max-width: none; }
  .two { grid-template-columns: 1fr; gap: 0; }
  .socials { grid-template-columns: 1fr; }
  .cgrid { grid-template-columns: repeat(2, 1fr); }
  .tabs { flex-wrap: wrap; gap: var(--gut); }
}

/* ==========================================================================
   WordPress / WooCommerce base (theme only; not part of the static prototype)
   ========================================================================== */
.screen-reader-text { 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: absolute; left: -9999px; top: var(--sp-3); z-index: var(--z-cookie); background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); }
.skip:focus { left: var(--sp-3); }
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }
body.admin-bar .drawer, body.admin-bar .search { top: 32px; }
@media (max-width: 782px) { body.admin-bar .drawer, body.admin-bar .search { top: 46px; } }
.mega .mega__t a { font-size: inherit; line-height: inherit; padding: 0; display: inline; }
.mega .mega__t a:hover { opacity: .55; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border: var(--border); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-md); list-style: none; }
.woocommerce-error { border-color: var(--error); color: var(--error); }
.woocommerce-message a.button, .woocommerce-info a.button { float: right; text-decoration: underline; text-underline-offset: 3px; }
.wp-block-image img, .entry-content img { height: auto; }

/* ==========================================================================
   Elementor bridge: Elementor widgets follow the design tokens (and therefore dark mode).
   Selectors start with html body.drip to win over the kit CSS without !important.
   An editor who sets an explicit colour on a widget still overrides this on purpose.
   ========================================================================== */
html body.drip { color: var(--ink); background: var(--paper); font-family: var(--font); font-size: var(--fs-sm); line-height: var(--lh-base); letter-spacing: var(--ls-base); }
html body.drip .elementor-widget { font-family: var(--font); }
html body.drip .elementor-heading-title { color: var(--ink); font-family: var(--font); font-weight: var(--fw-regular); letter-spacing: var(--ls-base); }
html body.drip h1.elementor-heading-title { font-size: var(--fs-xl); line-height: var(--lh-sm); letter-spacing: var(--ls-1); }
html body.drip h2.elementor-heading-title, html body.drip h3.elementor-heading-title { font-size: var(--fs-md); line-height: var(--lh-md); }
html body.drip h4.elementor-heading-title, html body.drip h5.elementor-heading-title, html body.drip h6.elementor-heading-title { font-size: var(--fs-sm); line-height: var(--lh-base); }
html body.drip .elementor-widget-text-editor, html body.drip .elementor-widget-text-editor p { color: var(--ink); font-size: var(--fs-md); line-height: var(--lh-base); }
html body.drip .elementor-widget-text-editor a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
html body.drip .elementor-button { background: var(--ink); color: var(--paper); fill: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; font-family: var(--font); font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-3); line-height: var(--lh-lg); text-transform: uppercase; padding: var(--sp-4) var(--btn-pad-x); transition: background var(--t-base), color var(--t-base); }
html body.drip .elementor-button:hover, html body.drip .elementor-button:focus { background: var(--paper); color: var(--ink); fill: var(--ink); }
html body.drip .elementor-image img, html body.drip .elementor img { border-radius: 0; box-shadow: none; }
html body.drip .elementor-field-group .elementor-field-textual { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-lg); font-family: var(--font); }
html body.drip .elementor-field-group .elementor-field-textual:focus { border-bottom-width: 2px; outline: 0; box-shadow: none; }
html body.drip .elementor-field-label { color: var(--muted); font-size: var(--fs-xs); font-family: var(--font); }
html body.drip .elementor-message { font-size: var(--fs-md); }
html body.drip .elementor-message-danger { color: var(--error); }

/* ==========================================================================
   Phase 5: WooCommerce forms (checkout, account) and cart. The rows keep WooCommerce's own markup (its scripts
   depend on it) and look like .field: a floating label over an underlined control.
   ========================================================================== */
.form-row { position: relative; margin: 0 0 var(--gut); }
.form-row > label:where(:not(.chk, .checkbox)) { position: absolute; left: 0; top: 14px; z-index: 1; font-size: var(--fs-md); color: var(--muted); pointer-events: none; transition: all var(--t-fast); }
.form-row .woocommerce-input-wrapper { display: block; }
.form-row input.input-text, .form-row input[type=text], .form-row input[type=email], .form-row input[type=tel], .form-row input[type=password], .form-row select, .form-row textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; outline: 0; border-radius: 0; color: var(--ink);
  padding: var(--sp-7) 0 var(--sp-3); font-size: var(--fs-lg); line-height: var(--lh-base); appearance: none;
}
.form-row:focus-within > label:where(:not(.chk, .checkbox)), .form-row:has(input:not(:placeholder-shown)) > label:where(:not(.chk, .checkbox)), .form-row:has(select) > label:where(:not(.chk, .checkbox)), .form-row:has(textarea:not(:placeholder-shown)) > label:where(:not(.chk, .checkbox)) { top: 2px; font-size: var(--fs-xs); }
.form-row input::placeholder, .form-row textarea::placeholder { color: transparent; }   /* WooCommerce sets locale placeholders; the label is the hint */
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-bottom-width: 2px; }
.form-row:has(select:not(.select2-hidden-accessible))::after { content: "⌄"; position: absolute; right: 2px; bottom: 6px; pointer-events: none; }
.form-row abbr.required { text-decoration: none; border: 0; color: inherit; }
.form-row .optional { display: none; }
.form-row.field--error input, .form-row.field--error select, .form-row.field--error textarea { border-bottom-color: var(--error); }
.form-row.field--error > label { color: var(--error); }
.form-row small.field__msg { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--error); margin-top: var(--sp-2); }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
.woocommerce-billing-fields__field-wrapper .form-row, .woocommerce-shipping-fields__field-wrapper .form-row, .woocommerce-address-fields__field-wrapper .form-row { grid-column: 1 / -1; }
/* Rows by field, not by WooCommerce's per-country classes: names, country/phone, address, apartment, postcode/city, state. */
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_first_name_field"] { grid-row: 1; grid-column: 1; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_last_name_field"] { grid-row: 1; grid-column: 2; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_country_field"] { grid-row: 2; grid-column: 1; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_phone_field"] { grid-row: 2; grid-column: 2; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_address_1_field"] { grid-row: 3; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_address_2_field"] { grid-row: 4; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_postcode_field"] { grid-row: 5; grid-column: 1; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_city_field"] { grid-row: 5; grid-column: 2; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > [id$="_state_field"] { grid-row: 6; }
.woocommerce-checkout .chk.checkbox, .woocommerce-form__label-for-checkbox.chk { margin: var(--sp-4) 0; }
.woocommerce-checkout .chk.checkbox input, .woocommerce-form__label-for-checkbox.chk input { appearance: none; width: 14px; height: 14px; border: 1px solid var(--ink); flex: none; margin: 0; display: grid; place-content: center; background: transparent; }
.woocommerce-checkout .chk.checkbox input:checked::before, .woocommerce-form__label-for-checkbox.chk input:checked::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.woocommerce-terms-and-conditions-wrapper { margin: var(--sp-6) 0; }
.woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; text-underline-offset: 3px; }
.wc_payment_method .opt { margin-bottom: var(--sp-3); }
.wc_payment_method .opt__panel { margin-top: calc(var(--sp-3) * -1); }
.payment_box p { margin: 0; font-size: var(--fs-md); }
.payment_box ul { list-style: none; padding: 0; }
.place-order { margin-top: var(--sp-4); }
.checkout_coupon.promo { margin: 0 0 var(--sp-8); max-width: 420px; }
.woocommerce-NoticeGroup, .woocommerce-notices-wrapper { margin-bottom: var(--sp-6); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; }
.blockUI.blockOverlay { background: var(--paper) !important; opacity: .6 !important; }
.cart-lines .line--big { align-items: flex-start; }
.t-3xl { font-size: var(--fs-3xl); line-height: var(--lh-xl); }
.drip-login [hidden], .drip-back[hidden] { display: none !important; }
.drip-login h2 { margin-bottom: var(--sp-4); }
.woocommerce-MyAccount-content h2 { margin-bottom: var(--sp-6); }
.woocommerce-MyAccount-content .sect { margin-top: var(--sp-9); }
.woocommerce-MyAccount-content .pager { justify-content: flex-start; padding-left: 0; }
.order-tracking h2 { margin-bottom: var(--sp-4); }

/* ==========================================================================
   Phase 6: editorial pages built from block patterns (inc/editorial.php). The blocks carry the design system's
   own classes; these rules only neutralise the block editor's wrappers and keep whole cells clickable.
   ========================================================================== */
.hero figure, .edit figure, .edit-half figure, .story figure, figure.full, .hero__cell, .edit__cell, .story__img { margin: 0; }
.hero__cell a, .edit__cell a, figure.full a { display: block; width: 100%; height: 100%; }
.hero__cell a::after, .edit__cell a::after, figure.full a::after { content: ""; position: absolute; inset: 0; }   /* the whole cell is the link, caption included */
.cap.wp-element-caption { margin: 0; text-align: left; pointer-events: none; }
.is-focus-top img { object-position: 50% 25%; }
.hero > *, .edit > *, .edit-half > *, .story > *, .quote > *, .pagehead > * { margin-block: 0; }
.quote p { margin: 0; }
.edit__empty { background: transparent; }
.edit__empty p { display: none; }
.pagehead.wp-block-group { height: auto; min-height: 130px; padding-bottom: var(--sp-6); }
.pagehead p.sub { margin: var(--sp-4) 0 0; font-size: var(--fs-md); }
p.sect-label { margin: 0; }
.story__txt .wp-block-buttons { margin-top: var(--sp-2); }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; height: var(--control-h); padding: var(--sp-2) var(--btn-pad-x); background: transparent; color: var(--ink); font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-3); text-transform: uppercase; border: 1px solid var(--ink); text-decoration: none; transition: background var(--t-base), color var(--t-base); }
.wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.faq details.wp-block-details summary { border-top: var(--border); }
.faq .wp-block-details { margin: 0; }
.faq h2.wp-block-heading { margin: var(--sp-10) 0 var(--gut); }
.faq h2.wp-block-heading:first-child { margin-top: 0; }
.drip-contact h2 { margin-bottom: var(--sp-6); }
.cols > .wp-block-group, .cols > .wp-block-column { margin: 0; }
@media (max-width: 769px) { .quote { padding: var(--sp-10) var(--sp-5); } }

/* ===== Phase 7: printable invoice (template-parts/invoice.php) ===== */
.inv { max-width: 794px; margin: var(--sp-9) auto var(--sp-11); padding: var(--sp-10) var(--sp-9); border: var(--border); font-size: var(--fs-md); line-height: var(--lh-md); }
.inv__top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--sp-8); border-bottom: 1px solid var(--ink); }
.inv__top .logo { font-size: var(--fs-logo); }
.inv__title { text-align: right; }
.inv__title h1 { font-size: var(--fs-md); letter-spacing: var(--ls-3); text-transform: uppercase; font-weight: var(--fw-medium); }
.inv__meta { color: var(--muted); font-size: var(--fs-sm); }
.inv__parties { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-8); padding: var(--sp-8) 0; }
.inv__parties h2 { font-size: var(--fs-sm); color: var(--muted); letter-spacing: var(--ls-2); text-transform: uppercase; font-weight: 400; margin-bottom: var(--sp-2); }
.inv table { width: 100%; border-collapse: collapse; }
.inv th { text-align: left; font-weight: 400; font-size: var(--fs-sm); color: var(--muted); letter-spacing: var(--ls-2); text-transform: uppercase; padding: 0 0 var(--sp-3); border-bottom: var(--border); }
.inv td { padding: var(--sp-4) 0; border-bottom: var(--border); vertical-align: top; }
.inv .r { text-align: right; }
.inv__sum { width: 55%; margin: var(--sp-6) 0 0 auto; }
.inv__sum td { border: 0; padding: var(--sp-1) 0; }
.inv__sum tr:last-child td { border-top: 1px solid var(--ink); padding-top: var(--sp-4); font-size: var(--fs-lg); }
.inv__foot { margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: var(--border); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.inv__actions { max-width: 794px; margin: var(--sp-8) auto 0; padding: 0 var(--sp-6); display: flex; justify-content: flex-end; }
.inv__actions .btn { max-width: 100%; padding: var(--sp-2) var(--sp-8); }
@page { size: A4; margin: 16mm; }
@media print { .inv { border: 0; margin: 0; padding: 0; max-width: none; } }
@media (max-width: 769px) { .inv { padding: var(--sp-6); } .inv__parties { grid-template-columns: 1fr; } .inv__sum { width: 100%; } }

/* ===== Phase 9: legible text on phones ===== */
/* Google and WCAG-minded audits want text of at least 12 px on a phone. The design's 10 px base stays on larger screens;
   on a phone the small steps move up one notch. */
@media (max-width: 769px) {
  :root { --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --lh-xs: 16px; --lh-sm: 18px; }
}

/* Stacked text links (contact page, quick links) get a 24 px high target. */
.contact-aside a.u { display: inline-block; padding: 3px 0; }

/* Euro note (phase 5b): shown only when the head script sets data-eur on <html> (visitors from abroad). */
.eur-note { display: none; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 400; }
html[data-eur] .eur-note { display: block; }
.eur-line { margin: var(--sp-2) 0 0; text-align: right; }
.eur-line:empty { margin: 0; }

/* ---------- Video (inc/editorial.php, [drip_video]): a silent loop in a hero cell, played by main.js while it is on screen ---------- */
.vid, .vid__el { display: block; width: 100%; height: 100%; }
.vid__el { object-fit: cover; object-position: 50% 30%; background: var(--surface); }
.hero__cell .cap { pointer-events: none; }