/* ==========================================================================
Nadège Anu — shared stylesheet
The visual system below (tokens, type, components) is the LOCKED foundation
extracted verbatim from the approved wireframe. Do not redesign.
Multi-page additions are appended in the clearly-marked section at the end
and only reuse the existing tokens.
========================================================================== */
/* ---- Self-hosted Lora (latin + latin-ext) — replaces the Google Fonts CDN link.
400/500/600 normal + 400/500 italic. Files live in assets/fonts/. ---------- */
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/lora-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/lora-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/lora-500-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url(../assets/fonts/lora-500-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/lora-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/lora-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/lora-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/lora-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/lora-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/lora-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
/* Four structural layers only */
--ground:#FDFBF7; /* Foundation — warm off-white */
--surface:#FFFFFF; /* Surface — white cards */
--charcoal:#26282B; /* Text — only approved text colour */
--gold:#B89B72; /* Accent — CTAs, hairlines, icons, borders */
--gold-ink:#8A6F45; /* Darker gold for small TEXT only — meets WCAG AA (~4.7:1) on light backgrounds; accent gold above is unchanged */
--ivory:#F6F1E7; /* footer tint — warm, subtly deeper than the page */
/* point accent, interface-only, never a field */
--rose:#D9A7A7;
--rose-ink:#B85C52; /* readable soft-red for small text (e.g. the optional add-on label) — warm, muted, harmonious with the cream/gold palette */
--line:rgba(38,40,43,.11);
--maxw:1140px;
--gutter:clamp(20px,5vw,56px);
--shadow:0 1px 2px rgba(38,40,43,.04),0 8px 26px rgba(38,40,43,.06);
--shadow-lg:0 2px 6px rgba(38,40,43,.06),0 20px 46px rgba(38,40,43,.10);
--r:14px;--r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Media never forces the document wider than its container (mobile safety). */
img{max-width:100%}
html{scroll-behavior:smooth}
body{font-family:'Lora',Georgia,serif;color:var(--charcoal);background:var(--ground);
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
@media(max-width:640px){body{font-size:16px}}
/* skip-to-content link — visually hidden until keyboard-focused (accessibility) */
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--charcoal);color:#fff;
padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;transition:top .18s}
.skip-link:focus{top:8px;outline:2.5px solid var(--gold)}
h1,h2,h3{font-weight:600;line-height:1.14;letter-spacing:-.3px}
.hero-title{font-size:clamp(34px,4.6vw,48px);line-height:1.1;letter-spacing:-.5px}
h1{font-size:clamp(27px,3.2vw,37px)}
h2{font-size:clamp(23px,2.6vw,28px);letter-spacing:-.2px}
h3{font-size:clamp(19px,2vw,22px);font-weight:500;letter-spacing:0}
p{max-width:65ch}
.caption{font-size:13px;line-height:1.5;letter-spacing:.3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(44px,5.5vw,72px) 0}
.narrow{max-width:760px}
/* signature opener */
.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.eyebrow .rule{height:1.5px;width:36px;background:var(--gold);flex:none}
.eyebrow .chip{width:31px;height:31px;border-radius:9px;background:var(--surface);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.eyebrow svg{width:17px;height:17px;stroke:var(--charcoal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eyebrow .label{font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;font-weight:500;opacity:.72}
/* header — PREMIUM unified header (shared, injected by main.js). Soft champagne
announcement bar (botanical motif + centred message + gold CTA), then one
edge-to-edge row: LARGER monogram (left) · NADÈGE ANU + descriptor (centre) ·
[Search field][Shop][Menu] (right). Hamburger = primary nav at all widths. */
/* announcement bar — soft champagne-beige; rich-charcoal text; botanical brand
motif far-left; centred message; quiet semibold GOLD CTA (no underline). */
.announce{background:#D8C3A5;color:#2F2F2F}
.announce-in{display:flex;align-items:center;justify-content:center;
gap:clamp(16px,3vw,34px);min-height:42px;padding:9px 0;flex-wrap:wrap;text-align:center}
/* the sprout sits directly beside the message with comfortable, tighter spacing */
.announce-lead{display:inline-flex;align-items:center;gap:clamp(9px,1.4vw,14px)}
.announce-botanical{display:inline-flex;align-items:center;color:var(--gold);opacity:.9;flex:none}
.announce-botanical svg{height:17px;width:auto;display:block}
.announce-text{font-size:clamp(11.5px,1.2vw,12.5px);letter-spacing:.2px;line-height:1.4;color:#2F2F2F}
.announce-cta{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.5px;
text-transform:uppercase;color:var(--gold-ink);text-decoration:none;white-space:nowrap;transition:gap .18s}
.announce-cta svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.announce-cta:hover,.announce-cta:focus-visible{gap:9px}
/* main header row (sticky) — three-part balance grid */
header.site{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.headbar-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,1.6vw,22px);height:clamp(70px,7vw,86px)}
/* left: larger monogram (links home; generous left breathing room) */
.brand-logo{justify-self:start;display:inline-flex;align-items:center}
.brandmark-logo{display:block;height:clamp(54px,6.6vw,78px);width:auto;object-fit:contain;flex:none}
.brandmark-logo.is-missing{border-radius:50%;background:rgba(184,155,114,.07);
box-shadow:inset 0 0 0 1.5px rgba(184,155,114,.4);font-size:0;color:transparent}
/* centre: brand identity — NADÈGE ANU + light-gold descriptor, stacked & centred */
.brand-identity{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:5px;
text-decoration:none;color:var(--charcoal);line-height:1.05}
.brand-name{font-family:'Lora',Georgia,serif;font-weight:600;text-transform:uppercase;white-space:nowrap;
font-size:clamp(15px,2.1vw,25px);letter-spacing:clamp(.3px,.2vw,2px)}
.brand-descriptor{font-family:'Lora',Georgia,serif;white-space:nowrap;color:var(--gold-ink);font-weight:500;
font-size:clamp(8.5px,.85vw,10.5px);letter-spacing:clamp(1px,.16vw,2px);text-transform:uppercase;opacity:.95}
/* right: actions — Search field → Shop → Menu (generous, consistent spacing) */
.head-actions{justify-self:end;display:flex;align-items:center;gap:clamp(9px,1.4vw,18px);flex:none}
/* Search field — a LINK styled like a premium search control (icon + gray
placeholder label); clicking anywhere goes to Shop. Height matches Shop button. */
.head-search{display:inline-flex;align-items:center;gap:9px;background:var(--surface);text-decoration:none;
border:1px solid var(--line);border-radius:100px;height:clamp(34px,3.8vw,40px);padding:0 clamp(15px,1.5vw,20px);
width:clamp(180px,17vw,260px);transition:border-color .18s}
.head-search:hover{border-color:var(--gold)}
.head-search:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:2px}
.hs-ico svg{display:block;width:17px;height:17px;stroke:var(--charcoal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.5;flex:none}
.hs-placeholder{font-size:14px;color:#9b968d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Shop button — matches the announcement-bar champagne (#D8C3A5) so it reads as a
natural extension of the header; charcoal text, rounded, padding, hover kept. */
.shop-btn{display:inline-flex;align-items:center;justify-content:center;height:clamp(34px,3.8vw,40px);
padding:0 clamp(12px,1.3vw,17px);background:#D8C3A5;color:var(--charcoal);border-radius:100px;
font-size:clamp(12.5px,1.05vw,14.5px);font-weight:600;text-decoration:none;white-space:nowrap;
box-shadow:0 4px 14px rgba(184,155,114,.28);transition:transform .18s,box-shadow .18s}
.shop-btn:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(184,155,114,.36)}
.shop-btn:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:2px}
.shop-btn[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--charcoal),0 4px 14px rgba(184,155,114,.28)}
/* menu button (far right) */
.burger{display:inline-flex;align-items:center;justify-content:center;width:clamp(40px,4.2vw,46px);height:clamp(40px,4.2vw,46px);background:none;border:0;cursor:pointer;color:var(--charcoal);border-radius:50%;padding:0}
.burger:hover{background:rgba(38,40,43,.06)}
.burger:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:2px}
.burger svg{width:25px;height:25px;stroke:var(--charcoal);stroke-width:2;fill:none;stroke-linecap:round}
/* wordmark — used inside the mobile menu sheet head */
.wordmark{font-size:20px;font-weight:600;letter-spacing:-.3px;text-decoration:none;color:var(--charcoal)}
/* ≤900px: the search field collapses to a compact icon-link (still → Shop) */
@media(max-width:900px){
.head-search{width:clamp(40px,4.2vw,46px);height:clamp(40px,4.2vw,46px);padding:0;border:0;
background:none;justify-content:center;border-radius:50%}
.head-search:hover{background:rgba(38,40,43,.06);border-color:transparent}
.hs-placeholder{display:none}
.hs-ico svg{width:20px;height:20px;opacity:.7}
}
/* ≤680px: announcement descriptive text collapses to its botanical + CTA (slim bar) */
@media(max-width:680px){ .announce-text{display:none} }
/* ≤360px: the descriptor is dropped (no room beside logo + name + 3 actions);
the wordmark alone anchors the centre on the very smallest phones */
@media(max-width:360px){ .brand-descriptor{display:none} }
/* smallest phones: tighten so logo + identity + search icon + Shop + menu all fit */
@media(max-width:430px){
.announce .wrap, header.site .wrap{padding-left:12px;padding-right:12px}
.headbar-in{gap:6px;height:64px}
.brand-name{font-size:12px;letter-spacing:.2px}
.brand-descriptor{font-size:7.5px;letter-spacing:.2px}
.brandmark-logo{height:42px}
.head-actions{gap:6px}
.shop-btn{height:31px;padding:0 11px;font-size:12px}
.head-search,.burger{width:36px;height:36px}
}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.4px;
padding:13px 24px;border-radius:100px;border:0;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s}
.btn:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:3px}
.btn-primary{background:var(--gold);color:var(--charcoal);box-shadow:0 6px 18px rgba(184,155,114,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(184,155,114,.40)}
.btn-secondary{background:var(--charcoal);color:#fff}
.btn-secondary:hover{transform:translateY(-2px)}
.btn-tertiary{background:var(--surface);color:var(--charcoal);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-tertiary:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{background:none;color:var(--charcoal);text-decoration:none;font-weight:500;font-size:16px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;font-family:inherit}
.btn-ghost svg{width:16px;height:16px;stroke:var(--charcoal);stroke-width:2;fill:none;transition:transform .2s}
.btn-ghost:hover svg{transform:translateX(4px)}
/* photo — used sparingly */
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#efe9e0,#f1ebe4);box-shadow:var(--shadow)}
.photo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 22px,rgba(38,40,43,.016) 22px,rgba(38,40,43,.016) 44px)}
.photo .ph-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;letter-spacing:.5px;text-transform:uppercase;background:rgba(38,40,43,.72);color:#fff;padding:4px 9px;border-radius:6px;font-weight:500}
.photo .ph-ico{position:absolute;inset:0;display:grid;place-items:center}
.photo .ph-ico svg{width:44px;height:44px;stroke:var(--charcoal);stroke-width:1.3;fill:none;opacity:.24}
.photo .ph-reason{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:13px 15px;font-size:11.5px;line-height:1.4;background:linear-gradient(transparent,rgba(38,40,43,.52));color:#fff;font-style:italic}
/* HERO — one intentional image (the founder, earns trust) */
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,58px);align-items:center;
padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(40px,5vw,66px)}
.hero .kicker{font-size:13.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.68;margin-bottom:18px;font-weight:500}
.hero p.lead{margin:20px 0 30px;font-size:clamp(17px,1.5vw,19px);line-height:1.6;opacity:.9}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:26px;display:flex;align-items:center;gap:13px;font-size:14px;opacity:.7;flex-wrap:wrap}
.hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--rose)}
.hero-photo{aspect-ratio:4/5}
.hero-photo .ph-ico svg{width:58px;height:58px}
/* text-led band (no image) */
.band h2{margin-bottom:14px}
.band .lead2{font-size:clamp(17px,1.5vw,18px);opacity:.9;max-width:62ch}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.triad .t-item{display:flex;flex-direction:column;gap:10px}
.triad .ti{width:40px;height:40px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.triad .ti svg{width:20px;height:20px;stroke:var(--charcoal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.triad h3{font-size:18px;font-weight:600}
.triad p{font-size:14.5px;opacity:.82;margin:0}
/* single content+image row */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.row.reverse .row-media{order:-1}
.row-photo{aspect-ratio:3/2}
.row h2{margin-bottom:14px}.row p{opacity:.9;margin-bottom:16px}
/* article cards — no photos; typographic list-cards keep focus on titles */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--surface);border-radius:var(--r);padding:24px 24px 26px;box-shadow:var(--shadow);
border:1px solid rgba(38,40,43,.05);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tcard .num{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.tcard .meta{font-size:12px;letter-spacing:.4px;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.tcard h3{font-size:19px;font-weight:500;margin-bottom:9px;line-height:1.28}
.tcard p{font-size:14.5px;opacity:.82;margin-bottom:16px;flex:1}
/* inline quote — compact, never full-screen */
.pq{max-width:720px;margin:0 auto;padding:4px 0 4px 22px;border-left:3px solid var(--gold)}
.pq p{font-style:italic;font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.4;margin:0}
.pq .attr{font-style:normal;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;opacity:.6;margin-top:10px}
/* start-here — text + one concrete image */
.strip{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,3.5vw,46px);align-items:center;
background:var(--surface);border-radius:16px;padding:clamp(24px,3.2vw,40px);box-shadow:var(--shadow-lg);border:1px solid rgba(184,155,114,.24)}
.strip h2{margin-bottom:12px}.strip p{opacity:.88;margin-bottom:20px}
.strip-photo{aspect-ratio:5/4;border-radius:var(--r)}
/* featured product — HORIZONTAL publishing card, one per row */
.prod-feature{display:grid;grid-template-columns:1fr;gap:22px;max-width:920px}
.prod-card{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
border:1px solid rgba(38,40,43,.05);display:grid;grid-template-columns:38% 1fr;align-items:stretch;transition:transform .2s,box-shadow .2s}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prod-cover-wrap{position:relative;background:#f1ebe4;display:flex;align-items:center;justify-content:center;padding:16px}
.prod-cover{width:100%;aspect-ratio:3/4;position:relative;border-radius:8px;background:linear-gradient(155deg,#efe9e0,#f2ece5 55%,#efe7ea);
display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow)}
.prod-cover::after{content:"";position:absolute;inset:0;box-shadow:inset -12px 0 22px -16px rgba(38,40,43,.26)}
.prod-cover .pt{position:absolute;top:9px;left:9px;z-index:2;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;
background:rgba(38,40,43,.7);color:#fff;padding:3px 6px;border-radius:5px;font-weight:500}
.prod-cover .cvmono{font-size:clamp(24px,4vw,38px);font-weight:600;color:var(--charcoal);opacity:.16;letter-spacing:-1px}
.prod-cover .cvfmt{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:1.3px;
text-transform:uppercase;opacity:.4;font-weight:500}
.prod-body{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.prod-body h3{font-size:21px;font-weight:600;line-height:1.18;margin-bottom:9px}
.prod-body .pdesc{font-size:14.5px;opacity:.82;margin-bottom:14px;line-height:1.5}
.prod-foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.prod-foot .price{font-size:13.5px;opacity:.72}.prod-foot .price strong{font-size:18px;font-weight:600}
/* premium step */
.premium{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.5vw,46px);align-items:center;
background:var(--surface);border-radius:16px;padding:clamp(26px,3.2vw,44px);box-shadow:var(--shadow-lg);border:1px solid rgba(184,155,114,.26)}
.premium-photo{aspect-ratio:3/4;border-radius:var(--r)}
.premium .opendoor{font-style:italic;font-weight:500;font-size:14.5px;opacity:.75;margin-bottom:12px}
.premium .goldrule{width:30px;height:2px;background:var(--gold);margin-bottom:16px}
.premium h2{margin-bottom:12px}
.premium .price{font-size:14.5px;opacity:.72;margin:16px 0 20px}.premium .price strong{font-weight:600;font-size:18px}
/* faq */
.faq{max-width:740px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;font-family:inherit;font-size:18px;font-weight:500;color:var(--charcoal);padding:19px 42px 19px 0;cursor:pointer;position:relative}
.faq-q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--gold)}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s}
.faq-a p{padding:0 0 19px;font-size:15px;opacity:.85}
.faq-item.open .faq-a{max-height:320px}
/* related */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:var(--surface);border-radius:var(--r-sm);padding:19px 22px;box-shadow:var(--shadow);text-decoration:none;color:var(--charcoal);display:flex;align-items:center;justify-content:space-between;gap:12px;transition:transform .2s,box-shadow .2s;border:1px solid rgba(38,40,43,.05)}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rel-card span{font-size:16px;font-weight:500}
.rel-card svg{width:18px;height:18px;stroke:var(--gold);stroke-width:2;fill:none;flex:none}
.disclaimer{max-width:720px;margin:22px auto 0;font-size:13px;line-height:1.55;opacity:.7;text-align:center;font-style:italic}
/* LIGHT FOOTER — warm ivory tint, thin gold divider */
footer.site{background:var(--ivory);padding:0}
footer.site .foot-inner{position:relative;padding:46px 0 0}
footer.site .foot-inner::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:2px;
background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);opacity:.55}
footer.site a{color:var(--charcoal);text-decoration:none;opacity:.76;font-size:15px;line-height:1.95}
footer.site a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:32px;padding-bottom:30px}
/* Footer monogram — same canonical asset as the header, sized by height with
width:auto + object-fit:contain (never cropped/stretched); kept smaller than
the header logo, left-aligned to the brand column, with whitespace below. */
.foot-logo{display:block;height:clamp(43px,4.7vw,54px);width:auto;object-fit:contain;margin-bottom:4px}
.foot-brand .wm{font-size:20px;font-weight:600;margin-bottom:6px}
.foot-brand p{font-size:13.5px;opacity:.66;max-width:42ch;line-height:1.6}
.foot-col h4{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;opacity:.5;margin-bottom:11px;font-weight:600}
.foot-col ul{list-style:none}
.foot-news input{width:100%;font-family:inherit;font-size:14.5px;padding:11px 15px;border-radius:100px;border:1.5px solid var(--line);background:var(--surface);color:var(--charcoal);margin-bottom:9px}
.foot-end{border-top:1px solid var(--line);margin-top:4px}
.foot-end .in{max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter) 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-end .caption{opacity:.58;font-size:12.5px}
.hidden-note{font-size:11px;letter-spacing:.4px;text-transform:uppercase;opacity:.5;margin-top:8px}
@media(max-width:940px){
.hero .wrap{grid-template-columns:1fr;gap:34px}
.hero-photo{max-width:420px;margin:0 auto;width:100%;aspect-ratio:16/11}
.row,.strip,.premium,.news{grid-template-columns:1fr;gap:26px}
.row.reverse .row-media{order:0}
.strip-photo,.premium-photo{max-width:440px}
.triad,.grid-3,.res-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
.prod-feature{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:640px){
.triad,.grid-3,.res-grid,.rel-grid,.foot-grid{grid-template-columns:1fr}
.prod-feature{grid-template-columns:1fr}
.prod-card{grid-template-columns:1fr}
.prod-cover-wrap{padding:20px 20px 4px}
.prod-cover{max-width:190px}
section{padding:38px 0}
.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{justify-content:center}
.news form{flex-direction:column}
.foot-end .in{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ==========================================================================
MULTI-PAGE ADDITIONS — prototype-only, built on the locked tokens above.
Nothing here overrides the approved visual language; it extends it to the
interior pages the wireframe implied (articles, legal, contact, product).
========================================================================== */
/* active nav state — dark readable text + a subtle gold underline beneath the
active item (no bold, no background block); the underline is drawn by the
shared `.navlinks a.active::after{width:100%}` rule in the header block. */
.navlinks a.active{color:var(--charcoal)}
/* mobile navigation panel (replaces the alert stub) */
.mobile-panel{position:fixed;inset:0;z-index:60;visibility:hidden}
.mobile-panel.open{visibility:visible}
.mobile-scrim{position:absolute;inset:0;background:rgba(38,40,43,.34);opacity:0;transition:opacity .25s}
.mobile-panel.open .mobile-scrim{opacity:1}
.mobile-sheet{position:absolute;top:0;right:0;height:100%;width:min(330px,86vw);background:var(--ground);
box-shadow:var(--shadow-lg);border-left:1px solid var(--line);padding:20px var(--gutter);
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s ease}
.mobile-panel.open .mobile-sheet{transform:translateX(0)}
.mobile-head{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:12px}
.mobile-close{background:none;border:0;cursor:pointer;padding:8px}
.mobile-close svg{width:24px;height:24px;stroke:var(--charcoal);stroke-width:2;fill:none;stroke-linecap:round}
.mobile-sheet nav a{display:block;color:var(--charcoal);text-decoration:none;font-size:19px;padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-sheet nav a.active{font-weight:600}
.mobile-sheet nav a:last-child{border-bottom:0}
.mobile-sheet .m-cta{margin-top:auto;padding-top:18px}
body.nav-open{overflow:hidden}
/* interior page head */
.page-head{padding-top:clamp(38px,4.5vw,58px);padding-bottom:clamp(6px,2vw,16px)}
.breadcrumb{font-size:12px;letter-spacing:.5px;text-transform:uppercase;opacity:.55;margin-bottom:14px}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumb .sep{margin:0 8px;opacity:.5}
/* long-form prose (articles, legal) */
.prose{max-width:72ch}
.prose > p{margin-bottom:20px}
.prose h2{margin:36px 0 12px}
.prose h3{margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:8px;max-width:70ch}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--charcoal);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--gold);padding:2px 0 2px 20px;margin:24px 0;font-style:italic;opacity:.9}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose strong{font-weight:600}
/* article header */
.article-head .cat{color:var(--gold);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.article-head h1{margin:12px 0 14px;max-width:26ch}
.article-head .byline{display:flex;gap:12px;align-items:center;font-size:14px;opacity:.7;flex-wrap:wrap}
.article-head .byline .dot{width:4px;height:4px;border-radius:50%;background:var(--rose)}
/* filter chips (articles index) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip-btn{font-family:inherit;font-size:14px;padding:8px 16px;border-radius:100px;border:1.5px solid var(--line);
background:var(--surface);color:var(--charcoal);cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.chip-btn:hover{border-color:var(--gold)}
.chip-btn.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.tcard[hidden]{display:none}
.tcard .tag{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
/* forms — labelled fields with local validation */
.formcard{background:var(--surface);border-radius:16px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);border:1px solid rgba(38,40,43,.05)}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:7px}
.field .req{color:var(--rose)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;padding:12px 16px;
border-radius:12px;border:1.5px solid var(--line);background:var(--ground);color:var(--charcoal)}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--rose)}
.field .err{display:none;color:#a35b5b;font-size:13px;margin-top:6px}
.field.invalid .err{display:block}
.form-note{font-size:13px;opacity:.62;margin-top:4px}
/* simulated success / error alerts */
.alert{border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.5;margin-bottom:18px;display:none}
.alert.show{display:block}
.alert.ok{background:rgba(184,155,114,.12);box-shadow:inset 0 0 0 1px rgba(184,155,114,.4)}
.alert.bad{background:rgba(217,167,167,.14);box-shadow:inset 0 0 0 1px rgba(217,167,167,.55)}
.alert b{font-weight:600}
/* callouts: legal-review flag + editorial note + text placeholder */
.callout{border-radius:12px;padding:15px 18px;font-size:14px;line-height:1.55;margin:20px 0;
background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.callout .lbl{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.callout.legal{background:rgba(217,167,167,.10);box-shadow:inset 0 0 0 1px rgba(217,167,167,.5)}
.callout.legal .lbl{color:#a35b5b}
.callout.note{background:rgba(184,155,114,.08);box-shadow:inset 0 0 0 1px rgba(184,155,114,.4)}
.callout.note .lbl{color:var(--gold-ink)}
.ph-note{border:1.5px dashed rgba(184,155,114,.6);border-radius:12px;padding:13px 16px;font-size:13px;
line-height:1.5;background:rgba(184,155,114,.05);margin:16px 0}
.ph-note b{display:block;letter-spacing:.5px;text-transform:uppercase;font-size:10.5px;color:var(--gold);margin-bottom:4px}
/* legal page layout */
.legal-toc{background:var(--surface);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);margin:0 0 30px}
.legal-toc h4{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;opacity:.5;margin-bottom:10px;font-weight:600}
.legal-toc ul{list-style:none}
.legal-toc li{margin-bottom:6px}
.legal-toc a{color:var(--charcoal);text-decoration:none;opacity:.85;font-size:15px}
.legal-toc a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.legal-meta{font-size:13px;opacity:.6;margin-bottom:8px}
/* product page */
.two-col{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,52px);align-items:start}
.buybox{background:var(--surface);border-radius:16px;padding:24px;box-shadow:var(--shadow-lg);border:1px solid rgba(184,155,114,.26);position:sticky;top:84px}
.buybox .price-lg{font-size:15px;opacity:.82;margin:6px 0 16px}
.buybox .price-lg strong{font-size:18px;font-weight:600}
.buybox .btn{width:100%;justify-content:center}
.buybox .reassure{list-style:none;margin-top:16px;display:grid;gap:9px}
.buybox .reassure li{font-size:13.5px;opacity:.8;display:flex;gap:9px;align-items:flex-start}
.buybox .reassure svg{width:16px;height:16px;stroke:var(--gold);stroke-width:2;fill:none;flex:none;margin-top:3px}
.theme-list{display:grid;gap:16px;margin-top:10px}
.theme-item{display:flex;gap:14px;align-items:flex-start}
.theme-item .n{flex:none;width:32px;height:32px;border-radius:9px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--gold-ink)}
.theme-item h3{font-size:17px;font-weight:600;margin-bottom:3px}
.theme-item p{font-size:14px;opacity:.82;margin:0}
.prod-hero-cover{max-width:300px;margin:0 auto}
/* 'Follow me' — icon-only social links (labels carried by aria-label) */
.social-icons{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.social-icons a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--charcoal);
transition:box-shadow .18s,transform .18s}
.social-icons a:hover{box-shadow:inset 0 0 0 1.5px var(--gold);transform:translateY(-2px)}
.social-icons a:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:3px}
.social-icons svg{width:22px;height:22px}
/* 404 */
.err404{min-height:54vh;display:grid;place-items:center;text-align:center}
.err404 .big{font-size:clamp(70px,13vw,130px);font-weight:600;letter-spacing:-3px;line-height:1;opacity:.13}
.err404 h1{margin:6px 0 12px}
.err404 .links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
@media(max-width:940px){
.two-col{grid-template-columns:1fr}
.buybox{position:static;max-width:460px}
}
/* ==========================================================================
HOME WELCOME — editorial refinements (typography + continuity)
Scoped to the homepage only; the type tokens above are untouched.
========================================================================== */
/* Lighten the Welcome heading: drop the 600 weight and set it in italic so it
reads as a quiet, personal greeting while the large size keeps its prominence. */
body[data-page="home"] .hero-title{font-weight:500;font-style:italic;letter-spacing:-.3px}
/* Trim the gap between the sticky header and the Welcome label — comfortable
breathing room without the large empty band above the eyebrow. */
body[data-page="home"] .hero{padding-top:clamp(10px,1.8vw,20px)}
/* Welcome is now text-only, single column; the image sits below as its own
full-width band, so the hero no longer splits into a two-column layout. */
body[data-page="home"] .hero .wrap{display:block;grid-template-columns:none;padding-top:clamp(8px,1.4vw,16px);padding-bottom:clamp(16px,2.2vw,26px)}
body[data-page="home"] .hero-copy{max-width:820px}
/* Full-width welcome image — a primary content anchor, not a floating card.
Taller ratio so it carries real vertical weight rather than reading as a strip. */
.welcome-image{padding-top:clamp(6px,1.4vw,14px);padding-bottom:clamp(6px,1.4vw,14px)}
.welcome-photo{width:100%;aspect-ratio:3/2}
.welcome-photo .ph-ico svg{width:64px;height:64px}
body[data-page="home"] .welcome-image + .band{padding-top:clamp(22px,3vw,40px)}
/* ==========================================================================
WHAT I OFFER — editorial content blocks (no cards, on the linen ground)
========================================================================== */
.offer{display:flex;flex-direction:column;gap:clamp(38px,5vw,60px);margin-top:clamp(34px,4vw,52px)}
.offer-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.offer-ill{width:clamp(116px,13vw,160px);flex:none}
.offer-ill svg{width:100%;height:auto;display:block;fill:none;stroke:var(--charcoal);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.offer-ill .disc{fill:var(--gold);stroke:none;opacity:.09}
.offer-ill .g{stroke:var(--gold)}
.offer-ill .gf{fill:var(--gold);stroke:none}
.offer-body h3{font-size:clamp(20px,2.2vw,24px);font-weight:500;letter-spacing:-.2px;margin-bottom:10px}
.offer-body p{font-size:16px;opacity:.85;line-height:1.6;max-width:58ch;margin-bottom:18px}
.offer-cta{margin-top:2px}
@media(max-width:640px){
.offer-item{grid-template-columns:1fr;gap:14px}
.offer-ill{width:104px}
}
/* Home rhythm — tighten the flow from What I Offer → newsletter → Follow me. */
body[data-page="home"] .home-offer{padding-bottom:clamp(26px,3.4vw,44px)}
body[data-page="home"] .home-news{padding-top:clamp(24px,3.2vw,40px);padding-bottom:clamp(20px,2.6vw,34px)}
body[data-page="home"] #site-social .band{padding-top:clamp(10px,2vw,24px);text-align:center}
body[data-page="home"] #site-social .social-icons{justify-content:center}
/* Supporting line: italic, understated, centred — clearly subordinate to FOLLOW ME. */
body[data-page="home"] #site-social .lead2{font-style:italic;font-size:clamp(14px,1.35vw,15.5px);
opacity:.68;max-width:46ch;margin:2px auto 0}
/* ==========================================================================
START HERE — long-form personal story (reuses .prose / .photo tokens)
========================================================================== */
.story-sub{font-size:clamp(19px,2.1vw,24px);font-style:italic;font-weight:500;
opacity:.9;margin-top:12px;letter-spacing:-.2px;max-width:26ch}
.story-intro{margin-top:22px}
.story-intro p{font-size:clamp(16px,1.4vw,18px);opacity:.9}
.story-intro > p:last-child{margin-bottom:0}
/* tighter flow: the introduction should lead naturally into My Story */
body[data-page="start-here"] .page-head{padding-bottom:clamp(2px,.8vw,8px)}
/* Shop: pull the toolbar + product grid higher (the page-head only carries the
right-aligned cart pill) so the storefront isn't pushed down the page. */
body[data-page="shop"] .page-head{padding-top:clamp(14px,2vw,24px);padding-bottom:0}
.story-body{padding-top:clamp(6px,1.2vw,12px)}
.story-body .prose > h2:first-child{margin-top:clamp(8px,1.4vw,16px)}
/* headings clear any floated image from the chapter above */
.story-body .prose h2{clear:both}
/* one editorial composition, used selectively — the opening of a chapter sits
on the left, a medium rounded portrait quietly accompanies it from the right,
and the story then continues across the full content width below. One shape,
one size, one position throughout. The text always leads.
Wider reading measure so the narrative reads like a magazine feature rather
than a narrow column; the image top-aligns with the opening sentences. */
/* The page uses the standard site grid (.wrap = --maxw) so its left edge lines up
with Home and every other page. The story prose keeps the standard readable
measure and left-aligns within that wider grid (a reading column on the left,
the floated image on its right) — never a centred narrow block or a full-width
wall of text. */
.story-body .prose{max-width:72ch}
/* The photograph floats within the article, like an image embedded in a
magazine feature: the story establishes itself first, the image enters
beside a later paragraph, the text wraps naturally alongside it, and once
the bottom of the image is reached the paragraphs reclaim the full content
width. No permanent narrow column, no empty space beneath the image. */
.story-photo-fig{float:right;width:clamp(268px,37%,292px);margin:5px 0 16px clamp(32px,3.8vw,52px)}
.story-photo-fig .photo{aspect-ratio:4/5;border-radius:16px;background:linear-gradient(160deg,#f0eae3,#efe7e5)}
.story-photo-fig .photo::after{display:none}
.story-photo-fig .photo .ph-ico svg{width:40px;height:40px}
.story-photo-fig figcaption{margin-top:10px;font-size:12.5px;font-style:italic;opacity:.55;line-height:1.5;text-align:center}
@media(max-width:760px){
.story-photo-fig{width:clamp(230px,34%,270px);margin-left:clamp(24px,3vw,40px)}
}
@media(max-width:640px){
.story-photo-fig{float:none;width:100%;max-width:300px;margin:6px auto 16px}
}
/* ==========================================================================
SHOP — premium digital storefront (transactional listing, built on tokens)
========================================================================== */
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cart-pill{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--charcoal)}
.cart-pill svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:100px;
background:var(--gold);color:var(--charcoal);font-size:12px;font-weight:600;display:grid;place-items:center;line-height:1}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.shop-card{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
border:1px solid rgba(38,40,43,.05);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.shop-cover{position:relative;aspect-ratio:4/3;background:linear-gradient(155deg,#efe9e0,#f2ece5 55%,#efe7ea);
display:grid;place-items:center;border-bottom:1px solid var(--line)}
.shop-cover .ph-tag{position:absolute;top:9px;left:9px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;
background:rgba(38,40,43,.72);color:#fff;padding:3px 8px;border-radius:6px;font-weight:500}
.shop-cover .cvmono{font-size:clamp(22px,3.4vw,34px);font-weight:600;color:var(--charcoal);opacity:.16;letter-spacing:-1px}
.shop-cover .cvfmt{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:1.3px;
text-transform:uppercase;opacity:.5}
.shop-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.shop-title{font-size:18px;font-weight:600;letter-spacing:0}
.shop-value{font-size:14px;opacity:.82;margin:0;line-height:1.5;flex:1}
.shop-price{font-size:18px;font-weight:600;margin-top:4px}
.shop-actions{display:flex;gap:10px;margin-top:12px}
.shop-actions .btn{flex:1;justify-content:center;padding:11px 14px;font-size:14px}
/* SHOP — compact numbered pagination (replaces the old "Load more" row).
Clean square page-number controls + a "Next →" that reads as navigation, not a
form button. Centred, consistent 38px height, restrained (no oversized pills).
Active page is filled charcoal (Nadège Anu palette) so it's unmistakable. */
.shop-pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:clamp(18px,2vw,26px)}
.shop-pager[hidden]{display:none}
.shop-page{font-family:inherit;font-size:14px;line-height:1;min-width:38px;height:38px;padding:0 12px;
display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;
border:1.5px solid var(--line);background:var(--surface);color:var(--charcoal);cursor:pointer;
transition:border-color .18s,color .18s,background .18s}
.shop-page:hover{border-color:var(--charcoal)}
.shop-page.is-active{background:var(--charcoal);border-color:var(--charcoal);color:#fff;font-weight:600;cursor:default}
.shop-page:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:2px}
.shop-next{padding:0 15px;font-weight:500}
.shop-next svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.shop-next[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.shop-note{margin-top:12px;min-height:0;opacity:0;transition:opacity .2s;color:var(--charcoal);font-style:italic}
.shop-note.show{opacity:1}
@media(max-width:860px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shop-grid{grid-template-columns:1fr}.shop-actions{flex-direction:column}}
/* SHOP — reassurance / trust strip (Shop page ONLY; class not used elsewhere).
Six compact line-icon items in one horizontal row on desktop with subtle
vertical dividers, wrapping to 3×2 (tablet) then 2×3 (mobile); dividers drop
when the row wraps and generous grid gaps take over. Icons are decorative
(aria-hidden in the markup); meaning is carried by the heading + text. */
.shop-trust{padding:clamp(16px,2.2vw,24px) 0 clamp(30px,4vw,50px)}
.shop-trust .trust-grid{list-style:none;margin:0 auto;padding:0;max-width:none;
display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:10px;padding:6px clamp(12px,1.5vw,20px)}
.trust-item + .trust-item{border-left:1px solid var(--line)}
.trust-ico{width:38px;height:38px;display:grid;place-items:center}
.trust-ico svg{width:27px;height:27px;stroke:var(--gold);stroke-width:1.5;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.trust-title{font-size:12px;letter-spacing:.9px;text-transform:uppercase;font-weight:600;
color:var(--gold);margin:2px 0 0}
.trust-text{font-size:13px;line-height:1.5;color:var(--charcoal);opacity:.82;margin:0;max-width:22ch}
@media(max-width:1000px){
.shop-trust .trust-grid{grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,34px) clamp(6px,2vw,18px)}
.trust-item + .trust-item{border-left:0}
}
@media(max-width:560px){
.shop-trust .trust-grid{grid-template-columns:repeat(2,1fr);gap:clamp(22px,6vw,30px) clamp(4px,3vw,14px)}
}
/* ==========================================================================
LISTING CARD SYSTEM — one shared system for the two storefront listing pages:
the Shop (#shop-grid) and Free Resources (.fr-grid on the resources page). Every
rule is gated on body[data-page="shop"] / body[data-page="resources"], so the
shared .fr-* base is only overridden ON THOSE TWO PAGES; the admin catalogue
preview (its has no data-page) and any other use are UNAFFECTED.
Both pages get: a widened content column; three EQUAL-width cards that FILL it
(2 on tablet, 1 on mobile); a square image area with the whole cover shown via
object-fit:contain (kept on the shared .fr-shot-img) — never cropped, zoomed,
clipped or distorted, a differently-shaped cover just gets symmetric breathing
room in the same frame; a compact info block (same typography/colours as the
shared base, only the vertical spacing is tightened); and a CTA pinned to the
card bottom. Cards are flex columns in a stretch grid + a two-line title reserve,
so every card shares identical width/height/image-area and a constant CTA
baseline regardless of title length or pricing — no per-product CSS. A lone card
on an incomplete final row keeps one column's width (1fr track) and never
stretches. `--shop-cover` is the single tunable image-area aspect (1/1 shipped).
Each page keeps its own content (hero, CTA wording, trust/encouragement strips). */
body[data-page="shop"] .store-wrap,
body[data-page="resources"] .store-wrap{max-width:1260px}
body[data-page="shop"] #shop-grid,
body[data-page="resources"] .fr-grid{--shop-cover:1/1;grid-template-columns:repeat(3,1fr)}
body[data-page="shop"] #shop-grid .fr-shot,
body[data-page="resources"] .fr-grid .fr-shot{aspect-ratio:var(--shop-cover)}
body[data-page="shop"] #shop-grid .fr-body,
body[data-page="resources"] .fr-grid .fr-body{padding:11px 16px 13px;gap:1px}
body[data-page="shop"] #shop-grid .fr-title,
body[data-page="resources"] .fr-grid .fr-title{min-height:2.5em}
body[data-page="shop"] #shop-grid .fr-price,
body[data-page="resources"] .fr-grid .fr-price{margin-top:2px}
body[data-page="shop"] #shop-grid .fr-actions,
body[data-page="resources"] .fr-grid .fr-actions{padding-top:9px}
/* CTA normalisation — a consistent 44px control height on BOTH listings so a Shop
"Add to Cart" (no icon) and a Resources "Download/Start" (icon) yield the SAME
total card height at every breakpoint (no 1–4px discrepancy). Width stays 100%
of the body via the shared .fr-actions .btn rule. */
body[data-page="shop"] #shop-grid .fr-actions .btn,
body[data-page="resources"] .fr-grid .fr-actions .btn{min-height:44px;line-height:1.15}
/* Reserve one consistent price row so a "$" price, a sale pair, a green "Free" or
"Price to be confirmed" never shift the card height between the two pages. A fixed
line-height plus a reserve above every price font's natural height makes the row's
computed height identical regardless of which price variant renders. */
body[data-page="shop"] #shop-grid .fr-price,
body[data-page="resources"] .fr-grid .fr-price{min-height:24px;line-height:1.4}
@media(max-width:900px){
body[data-page="shop"] #shop-grid,
body[data-page="resources"] .fr-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
body[data-page="shop"] #shop-grid,
body[data-page="resources"] .fr-grid{grid-template-columns:1fr}
}
/* Shop-only: trust strip aligns to the grid width and sits closer beneath it. */
body[data-page="shop"] .shop-trust{padding-top:clamp(8px,1.2vw,16px)}
/* SINGLE-ITEM DETAILED VIEW — when a listing has exactly ONE visible item the
renderer injects the shared Product Detail Page markup (.pdp) into the grid mount
and flags it .is-single. Turn the grid mount back into a plain block so the .pdp's
own two-column layout governs (instead of the item sitting in a 3-col track). The
.pdp/.pdp-* styling is the shared PDP system defined elsewhere — unchanged. */
body[data-page="shop"] #shop-grid.is-single,
body[data-page="resources"] .fr-grid.is-single{display:block;grid-template-columns:none;align-items:initial}
/* ==========================================================================
PERSONAL REFLECTION — calm step-by-step experience (reuses global tokens)
========================================================================== */
.reflection{padding-top:clamp(6px,1.6vw,16px)}
.pr-panel{max-width:640px}
.pr-progress{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.pr-count{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;opacity:.6;font-weight:500}
.pr-bar{height:4px;border-radius:100px;background:var(--line);overflow:hidden}
.pr-bar-fill{height:100%;width:16.66%;background:var(--gold);border-radius:100px;transition:width .35s ease}
.pr-lead{font-size:15px;opacity:.72;margin-bottom:8px}
.pr-question{font-size:clamp(21px,2.4vw,26px);font-weight:500;line-height:1.25;letter-spacing:-.2px;outline:none;max-width:30ch}
.pr-options{display:flex;flex-direction:column;gap:12px;margin:24px 0 30px}
.pr-option{position:relative;display:flex;align-items:center;gap:14px;padding:15px 18px;border:1.5px solid var(--line);
border-radius:14px;background:var(--surface);cursor:pointer;font-size:16px;line-height:1.4;
transition:border-color .18s,box-shadow .18s}
.pr-option:hover{border-color:var(--gold)}
.pr-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pr-dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;transition:border-color .18s}
.pr-option input:checked ~ .pr-dot{border-color:var(--gold)}
.pr-option input:checked ~ .pr-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold)}
.pr-option:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.pr-option:focus-within{border-color:var(--gold);outline:2.5px solid var(--charcoal);outline-offset:2px}
.pr-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pr-nav .btn{min-width:132px;justify-content:center}
.pr-nav .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none}
.pr-transition{margin-top:clamp(24px,3.5vw,38px)}
.pr-transition p:first-child{font-weight:500}
.pr-disclaimer{margin-top:clamp(26px,3.5vw,40px);border-top:1px solid var(--line);padding-top:20px;
font-size:12.5px;line-height:1.65;opacity:.66;font-style:italic;max-width:74ch}
/* ==========================================================================
FREE RESOURCES — reference-aligned storefront (built on the locked tokens).
Centred hero + gold divider, premium CSS product mockups with a format pill,
encouragement strip, and a newsletter panel. No base overrides beyond the
footer grid (its copy was updated site-wide with approval).
========================================================================== */
/* HERO — centred title, restrained gold divider with a small diamond */
.fr-hero{text-align:center;padding-top:clamp(40px,5.4vw,76px);padding-bottom:clamp(12px,2.2vw,26px)}
.fr-hero .hero-title{margin:0 auto}
.fr-divider{display:flex;align-items:center;justify-content:center;gap:11px;margin:clamp(16px,2.2vw,24px) 0 0}
.fr-divider span{width:46px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.fr-divider span + i + span{background:linear-gradient(90deg,var(--gold),transparent)}
.fr-divider i{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none;opacity:.9}
.fr-tagline{font-size:clamp(17px,1.7vw,20px);opacity:.82;margin:clamp(14px,1.8vw,18px) auto 0;max-width:46ch}
/* STOREFRONT — reusable catalogue grid (shared by Free Resources + Shop).
Responsive auto-fit: as many standard-width cards as fit (up to ~4), centred,
so partial rows keep the standard card width and never stretch to fill. */
.fr-store{padding-top:clamp(14px,2.4vw,30px);padding-bottom:clamp(6px,1.4vw,14px)}
.fr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,380px));
gap:clamp(22px,2.4vw,32px);justify-content:center;margin:0 auto;align-items:stretch}
/* wider storefront container so 3 cards sit comfortably in one row (no wrap) */
.store-wrap{max-width:1180px;--gutter:clamp(20px,2.6vw,34px)}
@media(max-width:900px){.fr-grid{grid-template-columns:repeat(2,minmax(0,380px))}}
@media(max-width:520px){.fr-grid{grid-template-columns:minmax(0,420px)}}
/* calm empty state — shown when a collection has no published products */
.fr-grid.is-empty{display:block}
.fr-empty{max-width:56ch;margin:0 auto;text-align:center;padding:clamp(26px,5vw,58px) 20px;color:var(--charcoal)}
.fr-empty-ico{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
background:rgba(184,155,114,.1);box-shadow:inset 0 0 0 1.5px rgba(184,155,114,.42)}
.fr-empty-ico svg{width:23px;height:23px;stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fr-empty p{font-size:clamp(16px,1.6vw,18px);opacity:.78;margin:0 auto;max-width:44ch;line-height:1.55}
.fr-card{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
border:1px solid rgba(38,40,43,.05);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.fr-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
/* PRODUCT MOCKUP SLOT — a permanent ![]()
slot that dominates the card. Fixed 4:5
ratio + object-fit:cover so a final Canva PNG export (recommended 1000×1250) drops
into the SAME src path with NO layout or CSS change. The CSS carries the framing
(ratio, cover, shadow, spacing); the PNG carries the visual.
Assets: assets/mockup-reflection-guide.png, assets/mockup-personal-reflection.png,
assets/mockup-coming-soon.png. */
/* Mockup shown completely unobstructed — no format-pill overlay, no inner
framing. The uploaded artwork fills the slot (4:5, object-fit:cover). */
.fr-shot{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2ebe3}
/* contain = the whole uploaded artwork is always shown (incl. its bottom edge),
at its true aspect ratio, never cropped/zoomed/stretched. The square slot fits
the current ~1:1 mockups edge-to-edge; other ratios letterbox instead of crop. */
.fr-shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* CARD BODY — Mockup → Title → Category → FREE/Price → CTA (no description) */
.fr-body{padding:12px 16px 13px;display:flex;flex-direction:column;gap:1px;flex:1}
.fr-title{font-size:clamp(17px,1.25vw,19px);font-weight:400;line-height:1.25;letter-spacing:0;min-height:2.35em}
.fr-category{font-size:13px;font-weight:500;color:var(--gold-ink);letter-spacing:0;margin:0}
.fr-price{font-size:15px;font-weight:600;color:var(--charcoal);margin-top:1px}
.fr-price-free{color:#3f7a4f;font-size:13px;font-weight:500;letter-spacing:0}
.fr-price-tbc{font-size:13px;font-weight:500;opacity:.7}
.fr-price-was{text-decoration:line-through;opacity:.5;font-weight:500;margin-right:8px}
.fr-price-now{color:var(--charcoal)}
.fr-actions{margin-top:auto;padding-top:6px}
.fr-actions .btn{width:100%;justify-content:center;padding:11px 14px;font-size:13.5px}
.fr-actions.dual{display:flex;gap:10px}
.fr-actions.dual .btn{flex:1;padding:11px 10px;font-size:13px}
/* Optional status badge (NEW / UPDATED / BUNDLE / BESTSELLER), top-left of mockup */
.fr-badge{position:absolute;top:11px;left:11px;z-index:3;font-size:10px;letter-spacing:.8px;
text-transform:uppercase;font-weight:600;background:var(--charcoal);color:#fff;
padding:5px 11px;border-radius:100px;box-shadow:var(--shadow)}
/* Coming-soon slot — a clearly-labelled placeholder card, never a real product */
.fr-title-soon{opacity:.72}
.fr-soon-note{font-size:12.5px;opacity:.6;margin:0}
/* CTA hierarchy: charcoal for downloads, warm rose for the interactive reflection */
.btn-rose{background:var(--rose);color:var(--charcoal);box-shadow:0 6px 18px rgba(217,167,167,.32)}
.btn-rose:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,167,167,.42)}
/* Pending download keeps full charcoal styling (not broken/greyed); non-navigating. */
.fr-cta-pending{cursor:default;pointer-events:none}
.fr-cta-soon{background:var(--surface);color:var(--charcoal);box-shadow:inset 0 0 0 1.5px var(--line);cursor:default;pointer-events:none}
.btn[aria-disabled="true"]:not(.fr-cta-pending):not(.fr-cta-soon){opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none}
/* ENCOURAGEMENT STRIP — one wide, shallow horizontal row on the linen ground,
three items separated by thin vertical dividers (stacks on mobile). */
.fr-strip-sec{padding-top:clamp(22px,3vw,38px);padding-bottom:clamp(22px,3vw,38px)}
.fr-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:940px;margin:0 auto}
.fr-strip-item{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:center;padding:8px clamp(16px,2.4vw,30px)}
.fr-strip-item + .fr-strip-item{border-left:1px solid var(--line)}
.fr-strip-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
background:rgba(184,155,114,.10);box-shadow:inset 0 0 0 1.5px rgba(184,155,114,.42)}
.fr-strip-ico svg{width:23px;height:23px;stroke:var(--gold);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fr-strip-item h3{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;font-weight:600;color:var(--gold-ink);margin-bottom:4px}
.fr-strip-item p{font-size:14px;opacity:.82;margin:0;line-height:1.45}
/* NEWSLETTER — full-width warm beige section (no card treatment) that flows
seamlessly into the footer (also --ivory), with no white gap between them.
The background spans the browser edges; the content stays centred inside the
standard .wrap container. Field + rose Subscribe stay grouped inline. */
.fr-news-sec{background:var(--ivory);padding:clamp(42px,5vw,64px) 0 clamp(34px,4.2vw,52px)}
.fr-news-body{text-align:center}
.fr-news h2{font-size:clamp(27px,3.2vw,38px);margin-bottom:12px}
.fr-news-body > p{opacity:.82;max-width:48ch;margin:0 auto 22px}
.fr-news-form{display:flex;gap:8px;max-width:470px;margin:0 auto}
.fr-news-form input{flex:1;min-width:0;font-family:inherit;font-size:16px;padding:14px 20px;border-radius:100px;
border:1.5px solid var(--line);background:var(--surface);color:var(--charcoal)}
.fr-news-form input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.fr-news-form .btn{flex:none}
/* Subscription status line — calm, centered, collapses when empty. */
.fr-news-body > p.fr-news-msg{margin:12px auto 0;max-width:48ch;min-height:1.1em;font-size:14px}
.fr-news-body > p.fr-news-msg:empty{min-height:0;margin:0}
.fr-news-note{margin:14px auto 0;opacity:.6}
@media(max-width:860px){
.fr-strip{grid-template-columns:1fr;gap:4px;max-width:420px}
.fr-strip-item + .fr-strip-item{border-left:0;border-top:1px solid var(--line)}
.fr-strip-item{padding:16px clamp(8px,3vw,20px)}
}
@media(max-width:640px){
.fr-news-form{flex-direction:column}
.fr-news-form .btn{width:100%;justify-content:center}
}
/* Footer — 5-block layout (Brand + Explore + Help + Connect + A Note from Nadège),
social icons in the brand block, updated site-wide with approval. */
.foot-note p{font-size:13.5px;opacity:.66;max-width:34ch;line-height:1.6}
.foot-social{display:flex;gap:11px;margin-top:15px}
.foot-social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--charcoal);
transition:box-shadow .18s,transform .18s;opacity:1}
.foot-social a:hover{box-shadow:inset 0 0 0 1.5px var(--gold);transform:translateY(-2px)}
.foot-social a:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:3px}
.foot-social svg{width:17px;height:17px}
.foot-heart{display:block;color:var(--gold);margin-bottom:8px}
.foot-heart svg{width:20px;height:20px}
/* ==========================================================================
PRODUCT DETAIL PAGE (PDP) + CHECKOUT — V1 conversion flow
Two-column desktop: gallery (left) / purchase (right). Serif headings
(Lora, inherited) with a clean system sans for body/details, scoped to
these pages only so the rest of the locked site is untouched.
========================================================================== */
body[data-page="product"],body[data-page="checkout"]{
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sale-green:#3E7A5E; /* tasteful, WCAG-AA muted green for the discount */
--heart:#E0607A; /* soft reaction red for the active heart */
}
/* ---- layout ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(26px,3.6vw,54px);align-items:start;padding-top:clamp(6px,1.6vw,16px)}
/* ---- gallery (left) ---- */
/* min-width:0 on the grid children prevents min-content (e.g. the thumbnail row
or a long word) from forcing the column — and the page — wider than the viewport. */
.pdp-gallery,.pdp-buy{min-width:0}
.pdp-gallery{position:sticky;top:84px}
.pdp-frame{position:relative;background:var(--surface);border-radius:var(--r);
overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
/* The frame's aspect-ratio is set from the hero's natural size in JS, but CLAMPED
there to ≤ 4:5 so a tall portrait mockup sizes to its content without towering
over the buy column or creating a big blank card. No fixed/min height. */
.pdp-stage{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
/* object-fit:contain preserves the complete mockup (no destructive crop); the
frame's aspect-ratio is set from the hero image's natural size in JS, so a
matching hero shows edge-to-edge with no letterbox and no forced tall height. */
.pdp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
opacity:0;transition:opacity .28s ease, transform .3s ease}
.pdp-stage img.is-active{opacity:1}
/* very slight hero hover scale (1.015) — premium, not playful */
.pdp-frame:hover .pdp-stage img.is-active{transform:scale(1.015)}
/* prev / next */
.pdp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
background:rgba(253,251,247,.86);backdrop-filter:blur(4px);
box-shadow:var(--shadow);display:grid;place-items:center;
transition:transform .18s,box-shadow .18s,opacity .18s}
.pdp-arrow:hover{transform:translateY(-50%) scale(1.06);box-shadow:var(--shadow-lg)}
.pdp-arrow:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:3px}
.pdp-arrow svg{width:20px;height:20px;stroke:var(--charcoal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pdp-prev{left:12px}.pdp-next{right:12px}
.pdp-arrow[hidden]{display:none}
/* heart reaction */
.pdp-heart{position:absolute;top:14px;right:14px;z-index:4;
width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
box-shadow:var(--shadow);display:grid;place-items:center;transition:box-shadow .2s ease,background .2s ease}
.pdp-heart:hover{box-shadow:var(--shadow-lg)}
.pdp-heart:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:3px}
.pdp-heart svg{width:22px;height:22px;stroke:var(--charcoal);stroke-width:1.9;
fill:none;transition:transform .2s,fill .2s,stroke .2s}
.pdp-heart.is-on svg{fill:var(--heart);stroke:var(--heart)}
.pdp-heart.pop svg{animation:heartPop .32s ease}
@keyframes heartPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pdp-heart.pop svg{animation:none}.pdp-stage img{transition:none}}
/* thumbnails */
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pdp-thumb{flex:0 0 auto;width:74px;height:74px;border-radius:var(--r-sm);overflow:hidden;
cursor:pointer;border:0;padding:0;background:var(--surface);
box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .18s}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumb:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.pdp-thumb.is-active{box-shadow:inset 0 0 0 2px var(--gold)}
.pdp-thumb:focus-visible{outline:2.5px solid var(--charcoal);outline-offset:2px}
/* ---- purchase column (right) ---- */
.pdp-buy{font-family:var(--sans)}
.pdp-title{font-family:'Lora',Georgia,serif;font-weight:600;letter-spacing:-.5px;
font-size:clamp(30px,3.6vw,42px);line-height:1.08;margin-bottom:14px}
.pdp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp-price .was{font-size:20px;color:rgba(38,40,43,.5);text-decoration:line-through}
.pdp-price .now{font-family:'Lora',Georgia,serif;font-size:clamp(28px,3vw,34px);font-weight:500;letter-spacing:-.4px}
.pdp-saleline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.pdp-off{color:var(--sale-green);font-weight:600;font-size:14px;letter-spacing:.3px}
.pdp-sale-ends{font-size:13px;color:rgba(38,40,43,.6)}
.pdp-price-tbc{font-family:'Lora',Georgia,serif;font-size:20px;opacity:.75}
/* CTA — full-width, charcoal, prominent */
.pdp-cta{margin-top:22px}
.pdp-cta .btn{width:100%;justify-content:center;font-size:17px;padding:16px 22px;border-radius:var(--r-sm);
transition:transform .2s ease,box-shadow .2s ease,background .25s ease}
.pdp-cta .btn:hover{transform:translateY(-2px)}
.pdp-cta .btn:active{transform:translateY(0) scale(.99)}
.pdp-cta .btn.added{background:var(--sale-green);color:#fff}
.pdp-cta .btn svg{transition:transform .2s}
.pdp-cta .btn:hover svg{transform:translateX(3px)}
/* trust strip beneath CTA */
.pdp-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;
padding-top:16px;border-top:1px solid var(--line)}
.pdp-trust li{list-style:none;display:flex;align-items:center;gap:7px;font-size:12.5px;opacity:.82}
.pdp-trust svg{width:16px;height:16px;stroke:var(--gold-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ---- accordions: Item Details + Delivery ---- */
.pdp-acc{border-top:1px solid var(--line);margin-top:8px}
.pdp-acc:first-of-type{margin-top:22px}
.pdp-acc-head{width:100%;background:none;border:0;cursor:pointer;font-family:'Lora',Georgia,serif;
font-size:19px;font-weight:600;color:var(--charcoal);padding:18px 0;
display:flex;align-items:center;justify-content:space-between;text-align:left}
.pdp-acc-head .chev{width:20px;height:20px;stroke:var(--charcoal);stroke-width:2;fill:none;
transition:transform .25s;flex:none}
.pdp-acc[open] .pdp-acc-head .chev,.pdp-acc.is-open .pdp-acc-head .chev{transform:rotate(180deg)}
/* smooth expand/collapse (JS animates max-height between 0 and content height) */
.pdp-acc-body{padding-bottom:20px;overflow:hidden;transition:max-height .3s ease}
/* highlights */
.pdp-highlights{display:grid;gap:11px;margin:0 0 16px}
.pdp-highlights li{list-style:none;display:flex;align-items:center;gap:11px;font-size:14.5px}
.pdp-highlights svg{width:19px;height:19px;stroke:var(--gold-ink);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* description preview → fade → expand in place */
.pdp-desc{position:relative;font-size:14.5px;line-height:1.65;color:rgba(38,40,43,.9);
max-height:60em;transition:max-height .3s ease}
@media(prefers-reduced-motion:reduce){.pdp-desc{transition:none}}
.pdp-desc p{margin:0 0 12px}
/* Collapsed teaser: ≤4 lines before the fade (desktop); ~3 on mobile (below).
overflow:hidden genuinely clips the rest; full text reveals via the toggle. */
.pdp-desc.clamped{max-height:6.4em;overflow:hidden}
.pdp-desc.clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.8em;
background:linear-gradient(to bottom,rgba(253,251,247,0),var(--ground));pointer-events:none}
.pdp-learn{margin-top:10px;background:none;border:0;cursor:pointer;font-family:var(--sans);
font-size:14.5px;font-weight:600;color:var(--gold-ink);display:inline-flex;align-items:center;gap:6px;padding:0}
.pdp-learn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s}
.pdp-learn:hover svg{transform:translateX(3px)}
/* delivery block */
.pdp-delivery{display:flex;gap:14px;align-items:flex-start}
.pdp-delivery .dv-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ivory);
display:grid;place-items:center}
.pdp-delivery .dv-ico svg{width:22px;height:22px;stroke:var(--gold-ink);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pdp-delivery h4{font-size:15.5px;font-weight:600;margin:2px 0 4px}
.pdp-delivery p{font-size:14px;line-height:1.6;color:rgba(38,40,43,.85);margin:0 0 4px}
.pdp-delivery .dv-nowait{color:var(--gold-ink);font-weight:600}
/* full-width trust band under the two columns. It's a , so it inherits
the large base section padding — override to a small, intentional top spacing so
the badges read as a continuation of the product info (paired with the product
section's padding-bottom:0). No bottom padding: the newsletter band supplies the
next gap. */
.trust-band{margin-top:0;padding:clamp(18px,2.6vw,26px) 0 clamp(22px,3.2vw,34px)}
/* Subtle reassurance row on the page background — no card/box/border/shadow. */
.trust-band .wrap>.tb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px)}
.tb-item{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);min-width:0}
.tb-item>div{min-width:0}
.tb-item h4,.tb-item p{overflow-wrap:break-word}
.tb-item svg{width:24px;height:24px;stroke:var(--gold-ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb-item h4{font-size:14.5px;font-weight:600;margin:0 0 3px}
.tb-item p{font-size:12.5px;opacity:.75;margin:0;line-height:1.5}
/* ---- CHECKOUT PAGE ---- */
.co{max-width:880px;margin:0 auto;font-family:var(--sans)}
.co-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow);padding:clamp(18px,2.4vw,26px);margin-bottom:18px}
.co-card h2{font-family:'Lora',Georgia,serif;font-size:20px;font-weight:600;margin:0 0 14px}
.co-line{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 0;font-size:15px}
.co-line + .co-line{border-top:1px solid var(--line)}
.co-line .ci-title{font-weight:500}
.co-line .ci-sub{font-size:12.5px;opacity:.65;margin-top:2px}
.co-line .ci-amt{font-variant-numeric:tabular-nums;white-space:nowrap}
/* order bump */
.co-bump{border:1.5px dashed var(--gold);background:rgba(184,155,114,.06);border-radius:var(--r-sm);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;
transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.co-bump.is-checked{border-style:solid;background:rgba(184,155,114,.12);box-shadow:0 0 0 1px var(--gold)}
.co-bump input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--gold-ink);cursor:pointer;transition:transform .2s ease}
.co-bump.is-checked input{transform:scale(1.08)}
.co-bump .bump-head{font-family:'Lora',Georgia,serif;font-size:15.5px;font-weight:600;margin-bottom:2px}
.co-bump .bump-title{font-weight:600;font-size:15px;margin-bottom:3px}
.co-bump .bump-copy{font-size:13.5px;opacity:.82;line-height:1.5}
.co-bump .bump-price .was{text-decoration:line-through;opacity:.55;margin-right:8px}
.co-bump .bump-price .add{color:var(--sale-green);font-weight:700}
/* Optional order-bump — deliberately COMPACT & SECONDARY. No card/shadow, no
big heading, no bright banner: a quiet recommendation between order + payment. */
.co-addon{margin:12px 0;padding:13px 16px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(184,155,114,.045)}
.addon-eyebrow{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--rose-ink);font-weight:600;margin-bottom:5px}
.addon-name{font-size:14.5px;font-weight:600;color:var(--sale-green);line-height:1.3;margin-bottom:3px}
.addon-blurb{font-size:13px;line-height:1.5;color:var(--charcoal);opacity:.82;margin-bottom:8px}
.addon-more{display:inline;background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--gold-ink);text-decoration:underline;cursor:pointer;white-space:nowrap}
.addon-details{font-size:12.5px;line-height:1.5;color:var(--charcoal);opacity:.9;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.addon-details p{margin:0 0 6px}
.addon-details p:last-child{margin-bottom:0}
.addon-details ul{margin:6px 0 0;padding-left:18px}
.addon-details li{margin:2px 0}
.addon-price{margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.addon-price .was{text-decoration:line-through;color:var(--charcoal);font-size:15px;font-weight:500;margin-right:0}
.addon-price .now{font-weight:600;color:var(--sale-green);font-size:16px}
.addon-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--charcoal);
padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:border-color .18s,background .18s}
.addon-check input{width:18px;height:18px;flex:none;accent-color:var(--gold-ink);cursor:pointer}
.addon-check.is-checked{border-color:var(--gold);background:rgba(184,155,114,.10)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;font-weight:700;padding-top:14px;margin-top:6px;border-top:1.5px solid var(--charcoal)}
.co-total .amt{font-family:'Lora',Georgia,serif;font-variant-numeric:tabular-nums}
.co-total .amt.pulse{animation:amtPulse .3s ease}
@keyframes amtPulse{0%{opacity:.4}100%{opacity:1}}
.co-cur-note{font-size:12px;opacity:.6;margin-top:4px;text-align:right}
.co-pay .btn{width:100%;justify-content:center;font-size:17px;padding:16px 22px;border-radius:var(--r-sm)}
.co-note{font-size:13px;margin-top:12px;min-height:1.2em}
.co-secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;opacity:.7;margin-top:14px}
.co-secure svg{width:15px;height:15px;stroke:var(--gold-ink);stroke-width:2;fill:none}
/* ---- Embedded single-page checkout (Payment Element) additions -------------- */
/* Order bump with a small product cover on the left (full cover, never cropped). */
.co-addon .addon-row{display:flex;gap:14px;align-items:flex-start}
.co-addon .addon-cover{width:72px;height:72px;flex:none;border-radius:8px;
overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.co-addon .addon-cover img{width:100%;height:100%;object-fit:contain;display:block}
.co-addon .addon-main{flex:1;min-width:0}
/* Your Details */
.co-fields{display:grid;gap:12px}
.co-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-field label{display:block;font-size:12.5px;font-weight:600;color:var(--charcoal);margin-bottom:5px}
.co-field input{width:100%;font-family:inherit;font-size:15px;padding:11px 13px;border-radius:var(--r-sm);
border:1.5px solid var(--line);background:var(--surface);color:var(--charcoal)}
.co-field input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.co-field.invalid input{border-color:var(--rose)}
.co-field .err{font-size:12px;color:var(--rose-ink);margin-top:4px;display:none}
.co-field.invalid .err{display:block}
/* Embedded payment */
#co-express{margin-bottom:14px}
#co-express:empty{display:none}
.co-or{display:flex;align-items:center;gap:12px;margin:2px 0 14px;color:rgba(38,40,43,.5);font-size:12px;
text-transform:uppercase;letter-spacing:.6px}
.co-or::before,.co-or::after{content:"";height:1px;background:var(--line);flex:1}
#co-payment{min-height:40px}
.pay-btn{width:100%;justify-content:center;font-size:17px;padding:16px 22px;border-radius:var(--r-sm);margin-top:16px}
.pay-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.pay-error{color:var(--rose-ink);font-size:13.5px;margin-top:12px;min-height:1.2em;display:none}
.pay-error.show{display:block}
/* required-field asterisk + Terms/Privacy consent (checkout cleanup) */
.req{color:var(--rose-ink);font-weight:600}
.co-terms{display:flex;align-items:flex-start;gap:10px;margin-top:16px}
.co-terms input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--gold-ink);cursor:pointer}
.co-terms label{font-size:13.5px;line-height:1.5;color:var(--charcoal);cursor:pointer}
.co-terms a{color:var(--gold-ink);text-decoration:underline}
.co-terms.invalid label{color:var(--rose-ink)}
.terms-error{color:var(--rose-ink);font-size:13px;margin-top:8px;display:none}
.terms-error.show{display:block}
@media(max-width:520px){.co-field-row{grid-template-columns:1fr}}
/* ---- responsive: stack gallery above purchase ---- */
@media(max-width:900px){
.pdp{grid-template-columns:1fr;gap:22px}
.pdp-gallery{position:static}
.pdp-buy{max-width:560px}
.trust-band .wrap>.tb-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
/* no forced square — the frame follows the hero image's natural ratio (set in JS) */
.pdp-thumb{width:82px;height:82px}
.trust-band .wrap>.tb-grid{grid-template-columns:1fr 1fr;gap:14px}
.pdp-title{font-size:28px}
/* shorter teaser on mobile (~3 lines) to keep the page compact */
.pdp-desc.clamped{max-height:4.9em}
.pdp-desc.clamped::after{height:2.4em}
}
/* Respect reduced-motion for all PDP/checkout micro-interactions */
@media(prefers-reduced-motion:reduce){
.pdp-acc-body,.co-bump,.co-bump input,.addon-check,.pdp-cta .btn{transition:none}
.co-total .amt.pulse{animation:none}
}
/* ---- Thank-you: lighter, more refined heading (point 12: weight only) ---- */
body[data-page="thank-you"] .hero-title{font-weight:400;letter-spacing:-.3px}