:root {
  color-scheme: light dark;
  --cream: #FDF4EB;
  --surface: #FFFBF4;
  --ink: #2A1712;
  --muted: #6F5646;
  /* --faint was #B7A08E, roughly 2.1:1 on cream. It is used for footer
     headings, the cart Remove control and the secure-checkout line, so it
     carries real content and has to clear AA, not just decorate. */
  --faint: #7A6250;
  --line: #EBDAC7;
  --red: #D91F58;        /* fill red: white text on it clears AA */
  --red-ink: #C21456;    /* red used AS text on cream, needs to be deeper */
  --red-deep: #A80C49;   /* hover/pressed */
  --orange: #FC3C12;
  /* Text that sits on a --red fill. In dark mode --red lightens to #F04A86,
     where cream text drops to ~2.6:1, so the pairing has to flip with the
     theme rather than being hardcoded per rule. */
  --on-red: #FFF8F0;
  --stick: 80px;            /* sticky offset: header height + breathing room */
  --serif: "Fraunces", "Playfair Display", "Hoefler Text", "Georgia", serif;
  --sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 68px);
}
/* Dark palette, defined once and reused by both the media query and the
   explicit [data-theme] override so the two can never drift apart. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) {
    --cream:#1A100C; --surface:#22140E; --ink:#F7ECE0; --muted:#C3A794;
    --faint:#A08B7A; --line:#3A2419; --red:#F04A86; --red-ink:#F04A86; --red-deep:#D63A78;
    --on-red:#24120E;
  }
}
:root[data-theme="light"]{
  --cream:#FDF4EB; --surface:#FFFBF4; --ink:#2A1712; --muted:#6F5646;
  --faint:#7A6250; --line:#EBDAC7; --red:#D91F58; --red-ink:#C21456; --red-deep:#A80C49;
  --on-red:#FFF8F0;
}
:root[data-theme="dark"]{
  --cream:#1A100C; --surface:#22140E; --ink:#F7ECE0; --muted:#C3A794;
  --faint:#A08B7A; --line:#3A2419; --red:#F04A86; --red-ink:#F04A86; --red-deep:#D63A78;
  --on-red:#24120E;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.eyebrow { font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--red); font-weight:700; }

/* Announcement */
.marquee { background:var(--red); color:var(--on-red); text-align:center; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; padding:10px 16px; }

/* Nav */
header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--line); }
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:14px; }
.nav-links { display:flex; gap:26px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.nav-links a { color:var(--muted); transition:color .2s; }
.nav-links a:hover { color:var(--red); }
.brand-lockup { justify-self:center; height:34px; }
.brand-lockup img { height:100%; width:auto; }
.nav-utils { display:flex; gap:18px; justify-content:flex-end; align-items:center; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
.nav-utils a:hover { color:var(--red); }
.bag { background:var(--red); color:var(--on-red); padding:8px 15px; border-radius:100px; }
@media (max-width:860px){ .nav-links{ display:none; } .brand-lockup{ height:28px; } }

/* Hero */
.hero { text-align:center; padding-top:clamp(34px,5vw,60px); padding-bottom:clamp(30px,4vw,52px); }
.hero .mark { max-width:min(548px, 78%); margin:0 auto; }
.hero .tagline { font-family:var(--serif); font-style:italic; font-size:clamp(22px,3.4vw,34px); color:var(--ink); margin:26px 0 0; }
.hero p { color:var(--muted); max-width:46ch; margin:16px auto 26px; font-size:16.5px; }
.btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; padding:14px 26px; border-radius:100px; transition:transform .16s, background .2s, color .2s; cursor:pointer; }
.btn-1 { background:var(--red); color:var(--on-red); }
.btn-1:hover { transform:translateY(-2px); background:var(--red-deep); }
.btn-2 { border:1.5px solid var(--ink); color:var(--ink); }
.btn-2:hover { background:var(--ink); color:var(--cream); }

/* Feature strip */
.feature { position:relative; border-block:1px solid var(--line); background:var(--surface); }
.feature .row { display:grid; grid-template-columns:1fr 1fr 1fr; }
.feature .cell { aspect-ratio:1/1; position:relative; overflow:hidden; border-left:1px solid var(--line); }
.feature .cell:first-child { border-left:0; }
.feature .cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature .cap { position:absolute; left:14px; bottom:14px; z-index:2; background:var(--cream); color:var(--red); font-weight:700; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
@media (max-width:720px){ .feature .row{ grid-template-columns:1fr 1fr; } .feature .cell:nth-child(3){ display:none; } }

/* Section head */
section { padding-block:clamp(44px,6vw,80px); }
.sec-head { text-align:center; margin-bottom:36px; }
.sec-head h2 { font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.3vw,38px); margin:8px 0 0; letter-spacing:-0.01em; }
.sec-head p { color:var(--muted); margin:10px auto 0; max-width:42ch; }

/* Product grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px); }
.grid.four { grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .grid, .grid.four { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid, .grid.four { grid-template-columns:1fr; } }
.card { display:block; }
.card .frame { position:relative; aspect-ratio:4/5; border:1.5px solid var(--ink); border-radius:8px; overflow:hidden; background:var(--surface); }
.card .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .frame img { transform:scale(1.04); }
.card .badge { position:absolute; top:12px; left:12px; z-index:2; background:var(--red); color:var(--on-red); font-weight:700; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.card .badge.orange { background:var(--orange); }
.card .meta { display:flex; justify-content:space-between; align-items:baseline; padding-top:15px; gap:12px; }
.card .name { font-family:var(--serif); font-weight:600; font-size:20px; }
.card .sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.card .price { font-weight:700; font-size:15px; color:var(--red); font-variant-numeric:tabular-nums; }
.card:hover .name { color:var(--red); }
.cta-row { text-align:center; margin-top:40px; }

/* Seal band */
.seal { background:var(--surface); border-block:1px solid var(--line); text-align:center; }
.seal img { width:clamp(140px,18vw,190px); margin:0 auto 8px; }
.seal h3 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.9vw,34px); margin:14px 0 12px; }
.seal p { color:var(--muted); max-width:48ch; margin:0 auto; }
.vals { display:flex; justify-content:center; gap:clamp(20px,5vw,64px); margin-top:32px; flex-wrap:wrap; }
.vals div { text-align:center; }
.vals .k { font-family:var(--serif); font-weight:600; font-size:18px; }
.vals .d { font-size:12.5px; color:var(--muted); margin-top:3px; }

/* Editorial split */
.editorial { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.editorial .panel { padding:clamp(40px,5vw,84px) var(--pad); display:flex; flex-direction:column; justify-content:center; }
.editorial h3 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.9vw,34px); line-height:1.08; margin:14px 0 18px; }
.editorial p { color:var(--muted); max-width:44ch; margin:0 0 24px; }
.editorial .visual { position:relative; overflow:hidden; min-height:420px; border-left:1px solid var(--line); }
.editorial .visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.link { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--red); border-bottom:1.5px solid var(--red); padding-bottom:5px; align-self:flex-start; }
@media (max-width:820px){ .editorial{ grid-template-columns:1fr; } .editorial .visual{ min-height:320px; border-left:0; border-top:1px solid var(--line); order:-1; } }

/* Newsletter */
.signup { background:var(--red); color:var(--on-red); text-align:center; }
.signup h2 { font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.5vw,40px); margin:0 auto; max-width:16ch; }
.signup .tag { font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.4vw,24px); opacity:.95; margin-top:6px; }
.signup p { margin:14px auto 26px; max-width:40ch; opacity:.92; }
.field { display:flex; gap:8px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.field input { flex:1; min-width:200px; background:#FFFBF4; border:0; border-radius:100px; padding:14px 18px; color:#2A1712; font-family:var(--sans); font-size:15px; }
.field input:focus { outline:3px solid var(--ink); }
.field button { background:var(--ink); color:var(--cream); border:0; border-radius:100px; padding:14px 24px; font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; }
.field button:hover { background:#000; }

/* Footer */
footer { background:var(--surface); border-top:1px solid var(--line); }
.foot { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-block:56px 34px; align-items:start; }
.foot .flogo { height:56px; margin-bottom:12px; }
.foot .flogo img { height:100%; width:auto; }
.foot .about { color:var(--muted); font-size:13px; max-width:28ch; }
.foot h5 { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; font-weight:700; }
.foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot ul a { color:var(--muted); font-size:13.5px; }
.foot ul a:hover { color:var(--red); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-block:20px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); gap:16px; flex-wrap:wrap; }
@media (max-width:720px){ .foot{ grid-template-columns:1fr 1fr; gap:28px; } }

.note { position:fixed; right:14px; bottom:14px; z-index:90; background:var(--ink); color:var(--cream); font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:9px 14px; border-radius:100px; }
.note a { color:var(--red); }
@media (max-width:620px){ .note{ display:none; } }

/* ===== Multi-page components ===== */
/* Page subhead */
.subhead { border-bottom:1px solid var(--line); background:var(--surface); }
.subhead .in { padding-block:clamp(26px,4vw,44px); }
.crumb { font-size:11.5px; letter-spacing:0.05em; color:var(--muted); text-transform:uppercase; font-weight:600; }
.crumb a:hover { color:var(--red); }
.crumb i { color:var(--faint); font-style:normal; margin:0 8px; }
.subhead h1 { font-family:var(--serif); font-weight:600; font-size:clamp(27px,3.7vw,42px); margin:12px 0 0; letter-spacing:-0.01em; }
.subhead .lead { color:var(--muted); margin:8px 0 0; max-width:52ch; }

/* Toolbar */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1.5px solid var(--line); border-radius:100px; padding:8px 15px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; background:transparent; font-family:var(--sans); }
.chip:hover { border-color:var(--ink); color:var(--ink); }
.chip.on { background:var(--red); color:var(--on-red); border-color:var(--red); }
.sort { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); font-weight:600; }
.sort select { font-family:var(--sans); font-size:12.5px; border:1.5px solid var(--line); border-radius:100px; padding:8px 14px; background:var(--surface); color:var(--ink); cursor:pointer; }
.count { font-size:12.5px; color:var(--faint); }

/* Pagination */
.pager { display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pager a { width:40px; height:40px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:50%; font-weight:700; font-size:13px; color:var(--muted); }
.pager a.on, .pager a:hover { background:var(--red); color:var(--on-red); border-color:var(--red); }

/* PDP */
.pdp { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(24px,4vw,56px); padding-block:clamp(28px,4vw,52px); align-items:start; }
.gallery .main { position:relative; aspect-ratio:4/5; border:1.5px solid var(--ink); border-radius:10px; overflow:hidden; background:var(--surface); }
.gallery .main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery .main .badge { position:absolute; top:14px; left:14px; z-index:2; background:var(--red); color:var(--on-red); font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.thumbs img { aspect-ratio:1/1; object-fit:cover; border:1.5px solid var(--line); border-radius:8px; cursor:pointer; }
.thumbs img:hover, .thumbs img.on { border-color:var(--red); }
.pdp-info { position:sticky; top:92px; }
.pdp-info h1 { font-family:var(--serif); font-weight:600; font-size:clamp(25px,3.1vw,38px); margin:8px 0 0; letter-spacing:-0.01em; }
.pdp-info .price { font-size:21px; font-weight:700; color:var(--red); margin-top:12px; font-variant-numeric:tabular-nums; }
.pdp-info .stars { color:var(--orange); font-size:14px; letter-spacing:2px; margin-top:8px; }
.pdp-info .stars b { color:var(--muted); font-weight:500; font-size:12.5px; letter-spacing:0; margin-left:6px; }
.pdp-info .desc { color:var(--muted); margin:18px 0 26px; max-width:46ch; }
.opt-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 10px; }
.opt-label span { color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; margin-left:6px; }
.swatch-row { display:flex; gap:10px; margin-bottom:24px; }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid var(--ink); cursor:pointer; }
.swatch.on { outline:2px solid var(--ink); outline-offset:2px; }
.size-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.size { min-width:50px; padding:11px 0; text-align:center; border:1.5px solid var(--line); border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; background:transparent; color:var(--ink); font-family:var(--sans); }
.size:hover { border-color:var(--ink); }
.size.on { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.size.out { color:var(--faint); text-decoration:line-through; cursor:not-allowed; }
.add { width:100%; background:var(--red); color:var(--on-red); border:0; border-radius:100px; padding:17px; font-weight:700; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; }
.add:hover { background:var(--red-deep); }
.reassure { display:flex; gap:20px; margin-top:18px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; justify-content:center; }
.acc { margin-top:28px; }
.acc details { border-top:1px solid var(--line); }
.acc details:last-child { border-bottom:1px solid var(--line); }
.acc summary { cursor:pointer; padding:16px 0; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; color:var(--red); font-size:20px; line-height:1; }
.acc details[open] summary::after { content:"\2013"; }
.acc p { color:var(--muted); font-size:13.5px; margin:0 0 16px; max-width:56ch; }
@media (max-width:820px){ .pdp{ grid-template-columns:1fr; } .pdp-info{ position:static; } }

/* Cart */
.cartgrid { display:grid; grid-template-columns:1.5fr 0.9fr; gap:clamp(24px,4vw,48px); padding-block:clamp(26px,4vw,48px); align-items:start; }
.line { display:grid; grid-template-columns:90px 1fr auto; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center; }
.line:first-child { border-top:1px solid var(--line); }
.line .thumb { aspect-ratio:1/1; border:1.5px solid var(--line); border-radius:8px; overflow:hidden; }
.line .thumb img { width:100%; height:100%; object-fit:cover; }
.line .nm { font-family:var(--serif); font-weight:600; font-size:18px; }
.line .attr { font-size:12.5px; color:var(--muted); margin-top:3px; }
.line .rm { font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:0.04em; margin-top:8px; cursor:pointer; }
.line .rm:hover { color:var(--red); }
.qty { display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:100px; }
.qty button { background:transparent; border:0; width:32px; height:32px; font-size:16px; cursor:pointer; color:var(--ink); }
.qty span { min-width:24px; text-align:center; font-weight:600; font-size:14px; }
.line .pr { font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; white-space:nowrap; }
.summary { background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:26px; position:sticky; top:92px; }
.summary h3 { font-family:var(--serif); font-weight:600; font-size:22px; margin:0 0 18px; }
.summary .r { display:flex; justify-content:space-between; font-size:14px; margin-bottom:12px; color:var(--muted); }
.summary .r.total { color:var(--ink); font-weight:700; font-size:17px; border-top:1px solid var(--line); padding-top:14px; margin-top:6px; }
.checkout { width:100%; background:var(--red); color:var(--on-red); border:0; border-radius:100px; padding:16px; font-weight:700; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; margin-top:10px; }
.checkout:hover { background:var(--red-deep); }
.summary .note-sm { font-size:12px; color:var(--faint); text-align:center; margin-top:14px; }
@media (max-width:820px){ .cartgrid{ grid-template-columns:1fr; } .summary{ position:static; } }

@media (prefers-reduced-motion: no-preference){
  .reveal { opacity:0; transform:translateY(16px); animation:rise 1.15s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1{ animation-delay:.08s;} .d2{ animation-delay:.24s;} .d3{ animation-delay:.40s;}
  @keyframes rise { to { opacity:1; transform:none; } }
}

/* ===== Refinement pass: states, focus, elevation, rhythm, motion ===== */
/* Consistent, on-brand transitions for all interactive elements */
.btn, .add, .checkout, .chip, .size, .swatch, .field button, .qty button, select,
.nav-links a, .nav-utils a, .foot ul a, .link, .crumb a, .pager a, .thumbs img {
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
/* Tactile press feedback */
.btn:active, .add:active, .checkout:active, .field button:active,
.chip:active, .size:active { transform: translateY(1px) scale(.99); }
/* Card elevation on hover (motion already scales the image) */
.card .frame { transition: box-shadow .25s ease, border-color .2s ease; }
.card:hover .frame { box-shadow: 0 16px 34px -18px rgba(42,23,18,.5); }
.summary { box-shadow: 0 12px 34px -22px rgba(42,23,18,.42); }
.gallery .main { box-shadow: 0 16px 40px -26px rgba(42,23,18,.4); }

/* Visible keyboard focus (a11y) without hurting mouse users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px;
}
.swatch:focus-visible { outline-offset: 4px; }

/* Typographic rhythm: balanced headline wrapping, Fraunces optical sizing */
.sec-head h2, .subhead h1, .hero .tagline, .seal h3, .editorial h3,
.pdp-info h1, .signup h2 { text-wrap: balance; }
h1, h2, h3, .name, .tagline { font-optical-sizing: auto; }

/* Full reduced-motion coverage (overrides hover transforms too) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .card:hover .frame img { transform: none; }
}

/* =====================================================================
   PASS 3 / audit remediation + storefront components
   Fixes carried out against a 50 item audit, grouped by what they solve
   so the next person can tell intent from accident.
   ===================================================================== */

/* --- Skip link. There was no way past the sticky nav by keyboard. --- */
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--cream);
        padding:12px 20px; font-weight:700; font-size:13px; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

/* --- Sticky offsets share one token instead of two magic 92px values --- */
.pdp-info, .summary { top:var(--stick); }

/* --- Touch targets. Everything interactive clears 44px. --- */
.nav-links a { display:inline-flex; align-items:center; min-height:44px; }
.nav-utils a { display:inline-flex; align-items:center; min-height:44px; }
.bag { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; }
.chip { min-height:44px; display:inline-flex; align-items:center; padding:10px 18px; }
.sort select { min-height:44px; padding:10px 16px; }
.pager a { width:44px; height:44px; }
.qty button { width:44px; height:44px; font-size:18px; }
.line .rm { display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; font-size:12px; }
.size { min-width:56px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; }
.acc summary { min-height:48px; }

/* --- Mobile navigation. Was display:none below 860px with no replacement.
       Built on <details> so it stays keyboard operable with zero JS. --- */
.menu { display:none; position:relative; }
.menu > summary { list-style:none; cursor:pointer; width:44px; height:44px;
                  display:grid; place-items:center; border-radius:10px; color:var(--ink); }
.menu > summary::-webkit-details-marker { display:none; }
.menu .bars { position:relative; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; }
.menu .bars::before, .menu .bars::after { content:""; position:absolute; left:0;
  display:block; width:20px; height:2px; background:currentColor; border-radius:2px; }
.menu .bars::before { top:-6px; }
.menu .bars::after  { top:6px; }
.menu[open] > summary { background:var(--line); }
.menu-panel { position:absolute; left:0; top:calc(100% + 10px); z-index:120; min-width:220px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 20px 44px -22px rgba(42,23,18,.45); }
.menu-panel a { display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:9px;
  font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.menu-panel a:hover { background:var(--cream); color:var(--red); }
.menu-panel a[aria-current="page"] { color:var(--red); }
@media (max-width:860px){ .menu { display:block; } }

/* --- Active states. Previously conveyed by colour alone. --- */
.nav-links a[aria-current="page"], .nav-utils a[aria-current="page"] { color:var(--red); }
.chip[aria-pressed="true"] { background:var(--red); color:var(--on-red); border-color:var(--red); }
.size[aria-pressed="true"] { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.pager a[aria-current="page"] { background:var(--red); color:var(--on-red); border-color:var(--red); }

/* --- Real buttons for swatches and thumbs. Were span and img, unfocusable. --- */
.swatch { width:44px; height:44px; padding:0; background:none; border:2px solid var(--ink);
  border-radius:50%; cursor:pointer; }
.swatch[aria-pressed="true"] { outline:2px solid var(--ink); outline-offset:3px; }
.thumbs button { padding:0; background:none; border:1.5px solid var(--line); border-radius:8px;
  overflow:hidden; cursor:pointer; aspect-ratio:1/1; }
.thumbs button[aria-current="true"], .thumbs button:hover { border-color:var(--red); }
.thumbs button img { width:100%; height:100%; object-fit:cover; }

/* --- Sold out sizes are genuinely disabled, not just struck through --- */
.size[disabled] { color:var(--faint); text-decoration:line-through; cursor:not-allowed; opacity:.65; }
.size[disabled]:hover { border-color:var(--line); }

/* --- Sandals category no longer disappears on small screens --- */
@media (max-width:720px){ .feature .cell:nth-child(3){ display:block; } }
@media (max-width:520px){ .feature .row{ grid-template-columns:1fr; } }

/* --- Accordion glyph: a true minus, not an en dash --- */
.acc details[open] summary::after { content:"\2212"; }

/* --- Retire the legacy :focus outline that beat :focus-visible on click --- */
.field input:focus { outline:none; }
.field input:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* --- Sale and compare-at pricing. Shopify compare_at_price now has a home. --- */
.price .was { color:var(--faint); text-decoration:line-through; font-weight:500; margin-right:8px; }
.price .now { color:var(--red); }
.badge.save { background:var(--orange); color:var(--on-red); }

/* --- Stock and delivery signals in the buy box --- */
.stock { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-top:14px; }
.stock::before { content:""; width:8px; height:8px; border-radius:50%; background:#2E7D4F; }
.stock.low { color:var(--orange); }
.stock.low::before { background:var(--orange); }
.deliver { font-size:13px; color:var(--muted); margin-top:8px; }

/* --- Search. Was a bare link pointing at the shop page. --- */
.searchbar { border-bottom:1px solid var(--line); background:var(--surface); }
.searchbar form { display:flex; gap:10px; align-items:center; padding-block:14px; }
.searchbar input { flex:1; min-height:48px; border:1.5px solid var(--line); border-radius:100px;
  padding:12px 20px; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:15px; }
.searchbar button { min-height:48px; padding:12px 24px; border:0; border-radius:100px;
  background:var(--red); color:var(--on-red); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }

/* --- Empty states. Cart had none, shop had no no-results case. --- */
.empty { text-align:center; padding-block:clamp(48px,8vw,96px); }
.empty h2 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,38px); margin:0 0 10px; }
.empty p { color:var(--muted); max-width:44ch; margin:0 auto 26px; }

/* --- Promo code and free shipping progress in the cart --- */
.promo { display:flex; gap:8px; margin:18px 0 6px; }
.promo input { flex:1; min-height:44px; border:1.5px solid var(--line); border-radius:100px;
  padding:10px 16px; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:14px; }
.promo button { min-height:44px; padding:10px 18px; border:1.5px solid var(--ink); border-radius:100px;
  background:transparent; color:var(--ink); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
.promo button:hover { background:var(--ink); color:var(--cream); }
.ship-bar { height:8px; border-radius:100px; background:var(--line); overflow:hidden; margin:10px 0 6px; }
.ship-bar > span { display:block; height:100%; background:var(--red); border-radius:100px; }

/* --- Trust row at the point of purchase --- */
.pay { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.pay span { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border:1.5px solid var(--line); border-radius:6px; padding:5px 9px; }

/* --- Facets on the shop page --- */
.facets { display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding-block:16px; }
.facets fieldset { border:0; margin:0; padding:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.facets legend { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); float:left; margin-right:10px; line-height:44px; }
.applied { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.applied .tag { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 12px;
  border-radius:100px; background:var(--surface); border:1.5px solid var(--line);
  font-size:12.5px; font-weight:600; }
.applied .tag button { background:none; border:0; cursor:pointer; color:var(--muted); font-size:15px; line-height:1; }
.applied .tag button:hover { color:var(--red); }

/* --- 404 --- */
.oops { text-align:center; padding-block:clamp(60px,10vw,130px); }
.oops .code { font-family:var(--serif); font-weight:600; font-size:clamp(64px,14vw,150px);
  line-height:.9; color:var(--red); margin:0; }
.oops h1 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.0vw,36px); margin:18px 0 12px; }
.oops p { color:var(--muted); max-width:46ch; margin:0 auto 28px; }

/* --- Breadcrumb list semantics --- */
.crumb ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; padding:0; }
.crumb li { display:inline-flex; align-items:center; }
.crumb li + li::before { content:"/"; color:var(--faint); margin:0 8px; }
.crumb [aria-current="page"] { color:var(--ink); }

/* --- Quantity is a real number input now, not a span --- */
.qty input { width:48px; min-height:44px; text-align:center; border:0; background:transparent;
  color:var(--ink); font-family:var(--sans); font-weight:600; font-size:14px;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* --- Screen reader only helper --- */
.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; }

/* --- Red used AS text on cream needs the deeper value to clear AA.
       #E62864 on cream was 3.98:1. Fills keep the brighter --red. --- */
.eyebrow,
.card .price,
.pdp-info .price,
.price .now,
.feature .cap,
.link,
.card:hover .name,
.nav-links a:hover,
.nav-utils a:hover,
.foot ul a:hover,
.crumb a:hover,
.line .rm:hover,
.menu-panel a:hover,
.menu-panel a[aria-current="page"],
.nav-links a[aria-current="page"],
.acc summary::after,
.stock.low,
.applied .tag button:hover { color: var(--red-ink); }
.link { border-bottom-color: var(--red-ink); }

/* --- Footer column headings. Were <h5> under <h2> content, which skipped two
       levels. They are now <h2>, so the styling has to follow the new tag
       rather than the old one. --- */
.foot h2, .foot h3 { font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 14px; font-weight:700; font-family:var(--sans); }

/* =====================================================================
   PASS 4 / scroll motion
   Products fade in as they enter the viewport, and discount badges count
   up from zero. Both are pure CSS scroll-driven animation, so the
   concept keeps its zero JavaScript rule.
   ===================================================================== */

/* --- Products fade and lift in as they scroll into view --------------
   Uses animation-timeline: view(), so progress is tied to the card's
   position in the viewport rather than to a timer. Where it is
   unsupported the animation has no duration, resolves straight to its
   end state, and every card simply renders visible and in place. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .feature .cell,
    .vals div {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }
    @keyframes fade-up {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }

    /* A card sitting in the first screenful would otherwise start
       mid-fade, because part of its range is already scrolled past on
       load. Shifting the range earlier lets it settle immediately. */
    .grid > .card:nth-child(-n + 4) {
      animation-range: entry 0% cover 18%;
    }
  }
}

/* --- Discount badges count up from zero ------------------------------
   An integer custom property is animatable once registered with
   @property, so a CSS counter can render it. Each badge sets its target
   inline as --to, e.g. style="--to:17".

   The literal text stays in the markup inside .lit so the number is
   always present for assistive tech and for engines without support.
   Only when the animation can actually run do we hide it and swap in
   the counter. */

@property --pct {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.badge.save { counter-reset: pct var(--pct); }

@supports (animation-timeline: view()) {
  .badge.save .lit {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .badge.save::after { content: counter(pct) "% off"; }

  @media (prefers-reduced-motion: no-preference) {
    .badge.save {
      animation: count-up 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      animation-timeline: view();
      animation-range: entry 15% cover 38%;
    }
    @keyframes count-up { to { --pct: var(--to); } }
  }

  /* Reduced motion: show the final figure with no counting. */
  @media (prefers-reduced-motion: reduce) {
    .badge.save { --pct: var(--to); }
  }
}

/* =====================================================================
   Policy pages: shipping, returns, FAQ, size guide.
   These are long-form prose, which the site had no styles for. Without
   them the pages needed roughly 45 inline style attributes, so the rules
   live here instead.
   ===================================================================== */

.policy { max-width: 80ch; }

.policy h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(23px, 2.7vw, 31px);
  letter-spacing: -0.01em; margin: 8px 0 14px;
}
.policy h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.01em; margin: 22px 0 10px;
}
.policy p { margin: 14px 0 0; }
.policy p:first-of-type { margin-top: 0; }
.policy ul, .policy ol { margin: 14px 0 0; padding-left: 22px; }
.policy li { margin-bottom: 8px; }
.policy .lead-in { font-weight: 600; margin-top: 18px; }

/* Inline links need to be visible: the global rule strips underlines and
   inherits colour, which is right for nav and wrong for prose. */
.policy a {
  color: var(--red-ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.policy a:hover { color: var(--red-deep); }

/* Callout for the legally load-bearing lines, e.g. "All sales are final".
   Conspicuousness is the point, so it gets the brand red border. */
.policy-callout {
  background: var(--surface); border: 2px solid var(--red);
  border-radius: 14px; padding: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.policy-callout .k {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.1; margin: 12px 0 0;
}

/* Size table. border-spacing rather than cell padding, because the
   stylesheet has no cell padding rule and per-cell inline styles would
   have meant sixty attributes. */
.policy-table-wrap { overflow-x: auto; margin-top: 18px; }
.policy-table {
  width: 100%; min-width: 30rem;
  border-collapse: separate; border-spacing: 16px 8px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.policy-table th[scope="col"] {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); font-weight: 700;
}
.policy-table th[scope="row"] { font-weight: 700; }
.policy-table td { color: var(--muted); }

.policy-foot {
  border-top: 1px solid var(--line);
  margin-top: clamp(32px, 5vw, 52px); padding-top: 24px;
  color: var(--muted); font-size: 13.5px;
}