/*
| Bloom Goods Store — stylesheet
|
| The funnel design system: plum and rose over blush, with sage as the
| confirming accent; Fraunces for display, Mulish for text. Section 1 is the
| approved funnel layout. Section 2 adds the surfaces the funnel prototype
| did not have — product pages, the catalog and policy pages — using the same
| tokens, so nothing new introduces a colour or a radius that is not already
| in the system.
*/

/*
| The hidden attribute is how the cart and enrolment JS shows and conceals
| blocks. Author rules that declare `display` (.card is display:flex) beat the
| browser's own [hidden]{display:none}, which silently defeated it — the
| recurring-authorisation card rendered on every order. Re-assert it once, here.
*/
[hidden]{display:none!important}

:root{
  --ink:#3A2233;
  --plum:#6E2A4E;
  --plum-2:#9A3E6E;
  --rose:#E07A97;
  --rose-soft:#F2AEC0;
  --blush:#FBEAEF;
  --sage:#6F9068;
  --sage-soft:#DCE8D6;
  --petal:#FCF5F3;
  --cloud:#FFFFFF;
  --line:#EDDCE1;
  --muted:#8A6E79;
  --radius:20px;
  --shadow:0 2px 8px rgba(58,34,51,.05), 0 14px 40px rgba(58,34,51,.06);
  --shadow-lg:0 4px 12px rgba(58,34,51,.08), 0 28px 60px rgba(58,34,51,.14);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --tb-h:70px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--petal);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);margin:0;line-height:1.08;font-optical-sizing:auto;font-weight:600}
p{margin:0}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}

/* ---------- Top bar + stepper ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(252,245,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-inner{max-width:1080px;margin:0 auto;padding:0 26px;height:var(--tb-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--serif);font-weight:700;font-size:23px;color:var(--plum);letter-spacing:-.01em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand svg{display:block}
.brand span{color:var(--rose)}
.stepper{display:flex;align-items:center;gap:4px}
.stp{display:flex;align-items:center;gap:9px;padding:0 3px}
.stp .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--cloud);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:12px;color:var(--muted);transition:.3s;flex:0 0 auto}
.stp .nm{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;transition:.3s}
.stp .bar{width:26px;height:1.5px;background:var(--line);border-radius:2px}
.stp.done .dot{background:var(--sage);border-color:var(--sage);color:#fff}
.stp.active .dot{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:0 0 0 4px var(--blush)}
.stp.active .nm{color:var(--plum);font-weight:700}
.cartbtn{display:flex;align-items:center;gap:9px;border:1.5px solid var(--plum);background:var(--plum);color:#fff;border-radius:999px;padding:9px 16px 9px 14px;font-weight:700;font-size:14px;position:relative;transition:.18s}
.cartbtn:hover{background:var(--ink);border-color:var(--ink)}
.cartbtn .cart-total{font-family:var(--serif);font-weight:600}
.cart-count{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--rose);color:#fff;font-weight:800;font-size:11.5px;display:grid;place-items:center;border:2px solid var(--petal)}
.mprog{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 80% -10%, var(--blush) 0%, var(--petal) 55%)}
.hero .bloom{position:absolute;top:-90px;right:-90px;width:420px;height:420px;z-index:0;opacity:.85}
.hero-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:70px 26px 60px;text-align:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-2);font-weight:700}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:26px;height:1px;background:var(--rose-soft)}
.hero h1{font-size:clamp(40px,7vw,74px);font-weight:600;margin:20px auto 0;max-width:16ch;letter-spacing:-.015em}
.hero h1 .accent{font-style:italic;color:var(--plum)}
.hero .sub{margin:20px auto 0;font-size:18px;max-width:52ch;color:var(--muted)}
.trust{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.trust span{background:var(--cloud);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13px;color:var(--ink);box-shadow:var(--shadow)}
.trust b{color:var(--plum);font-weight:700}

/* ---------- Section frame ---------- */
.band{padding:56px 0 8px}
.band-head{text-align:center;max-width:60ch;margin:0 auto 30px}
.band-head .kick{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);font-weight:700}
.band-head h2{font-size:clamp(28px,4vw,40px);font-weight:600;margin-top:10px;letter-spacing:-.01em}
.band-head p{color:var(--muted);margin-top:12px;font-size:16px}

/* ---------- Ritual toggle ---------- */
.toggle-wrap{display:flex;justify-content:center;margin-bottom:26px}
.rtoggle{display:inline-flex;background:var(--cloud);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow);gap:4px}
.rtoggle button{border:0;background:transparent;padding:10px 22px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted);transition:.2s;font-family:var(--sans)}
.rtoggle button.on{background:var(--plum);color:#fff}

/* ---------- Main bundles ---------- */
.bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end}
.bundle{position:relative;background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);transition:.22s;display:flex;flex-direction:column}
.bundle.mid{padding-top:38px}
.bundle:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bundle.sel{border-color:var(--rose);box-shadow:0 0 0 2px var(--rose),var(--shadow-lg)}
.bundle .ribbon{position:absolute;top:16px;right:16px;background:var(--blush);color:var(--plum);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.bundle.sel .ribbon{background:var(--rose);color:#fff}
.bundle .bundle-image{display:block;aspect-ratio:4/5;margin:-10px -8px 20px;border-radius:14px;overflow:hidden;background:var(--petal)}
.bundle .bundle-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .25s ease}
.bundle:hover .bundle-image img{transform:scale(1.025)}
.bundle .bname{font-family:var(--serif);font-size:22px;font-weight:600}
.bundle .bdisp{font-size:12px;color:var(--rose);font-weight:700;letter-spacing:.04em;margin-top:5px;text-transform:uppercase}
.bundle .bprice{font-family:var(--serif);font-weight:600;font-size:46px;color:var(--plum);margin:16px 0 2px;letter-spacing:-.02em}
.bundle .bprice small{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:600}
.bundle .ship{font-size:12.5px;color:var(--sage);font-weight:700;min-height:18px}
.bundle ul{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:11px;flex:1}
.bundle li{display:flex;gap:10px;font-size:13.5px;align-items:flex-start;color:var(--ink)}
.bundle li svg{flex:0 0 15px;margin-top:3px}
.bundle li.bonus{color:var(--rose);font-weight:600}
.bundle .pick{margin-top:20px;width:100%;border:1.5px solid var(--plum);border-radius:12px;background:transparent;color:var(--plum);font-weight:700;font-size:15px;padding:13px;transition:.18s;font-family:var(--sans)}
.bundle .pick:hover{background:var(--plum);color:#fff}
.bundle.sel .pick{background:var(--rose);border-color:var(--rose);color:#fff}

/* ---------- Order bump ---------- */
.bump{max-width:760px;margin:24px auto 0;background:var(--cloud);border:1px solid var(--line);border-left:4px solid var(--rose);border-radius:14px;padding:18px 20px;display:flex;gap:15px;align-items:flex-start;box-shadow:var(--shadow)}
.bump input{width:21px;height:21px;margin-top:2px;accent-color:var(--rose);flex:0 0 auto}
.bump label{font-size:14px;cursor:pointer;color:var(--ink)}
.bump label b{font-family:var(--serif);font-weight:600}
.bump .bp{color:var(--plum);font-weight:800}

.continue-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px}
.btn-primary{border:0;border-radius:999px;background:var(--plum);color:#fff;font-weight:700;font-size:16px;padding:16px 44px;box-shadow:0 12px 26px rgba(110,42,78,.28);transition:.18s;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans)}
.btn-primary:hover{background:var(--ink);transform:translateY(-2px)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-text{background:none;border:0;color:var(--muted);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btn-text:hover{color:var(--plum)}

/* ---------- Apothecary shelf (standalones) ---------- */
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.item{display:flex;gap:16px;background:var(--cloud);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);align-items:center}
.item .thumb{flex:0 0 88px;width:88px;height:88px;border-radius:12px;display:grid;place-items:center;overflow:hidden}
.item .thumb svg{width:38px;height:38px}
.item .info{min-width:0;flex:1}
.item .fam{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.item .nm{font-family:var(--serif);font-size:17px;font-weight:600;margin:3px 0 1px;line-height:1.15}
.item .disp{font-size:11.5px;color:var(--rose);font-weight:700;letter-spacing:.03em}
.item .dsc{font-size:12.5px;color:var(--muted);margin-top:6px}
.item .buy{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto}
.item .pr{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--plum)}
.addbtn{border:1.5px solid var(--plum);background:transparent;color:var(--plum);font-weight:700;border-radius:999px;padding:8px 16px;font-size:13px;transition:.18s;white-space:nowrap}
.addbtn:hover,.addbtn.added{background:var(--plum);color:#fff}
.stepq{display:inline-flex;align-items:center;border:1.5px solid var(--plum);border-radius:999px;overflow:hidden}
.stepq button{border:0;background:var(--plum);color:#fff;width:30px;height:32px;font-size:17px;font-weight:700;display:grid;place-items:center}
.stepq span{min-width:30px;text-align:center;font-weight:700;color:var(--plum);font-family:var(--serif)}

/* ---------- Stage screens ---------- */
.screen{display:none;padding:44px 0 8px}
.screen.show{display:block;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.up-head{text-align:center;max-width:60ch;margin:0 auto 8px}
.up-head .tag{display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);font-weight:700;margin-bottom:12px}
.up-head h2{font-size:clamp(28px,4.4vw,44px);font-weight:600;letter-spacing:-.01em}
.up-head p{color:var(--muted);margin-top:12px;font-size:16px}

/* two-column split upsell */
.up-split{display:grid;grid-template-columns:1.25fr .9fr;gap:22px;max-width:940px;margin:30px auto 0;align-items:start}
.featured{background:var(--cloud);border:1px solid var(--rose);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.featured .fbar{background:linear-gradient(100deg,var(--plum),var(--plum-2));color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-weight:600;font-size:15px}
.featured .fbar .save{background:var(--rose);border-radius:999px;font-size:12px;padding:4px 12px;font-family:var(--sans);font-weight:700}
.featured .featured-image{display:block;height:260px;overflow:hidden;background:var(--petal)}
.featured .featured-image img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
.featured .fbody{padding:26px}
.featured h3{font-size:25px;font-weight:600}
.featured .fdisp{font-size:12px;color:var(--rose);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.featured ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
.featured li{display:flex;gap:10px;align-items:center;font-size:15px}
.featured li svg{flex:0 0 17px}
.featured .fprice{display:flex;align-items:baseline;gap:12px;margin:8px 0 20px}
.featured .fprice .now{font-family:var(--serif);font-weight:600;font-size:46px;color:var(--plum)}
.featured .fprice .was{color:var(--muted);text-decoration:line-through;font-size:19px}
.featured .accept{width:100%;border:0;border-radius:12px;background:var(--plum);color:#fff;font-weight:700;font-size:16px;padding:16px;transition:.18s;font-family:var(--sans)}
.featured .accept:hover{background:var(--ink);transform:translateY(-1px)}
.up-side{display:flex;flex-direction:column;gap:14px}
.up-side .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center}
.alt{background:var(--cloud);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:106px minmax(0,1fr);gap:14px;align-items:center}
.alt .alt-image{display:block;aspect-ratio:4/5;border-radius:11px;overflow:hidden;background:var(--petal)}
.alt .alt-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.alt .alt-copy{min-width:0;padding:3px 3px 3px 0}
.alt b{font-family:var(--serif);font-size:17px;font-weight:600;display:block}
.alt .adisp{font-size:11px;color:var(--rose);font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin:2px 0 4px}
.alt span.it{font-size:12.5px;color:var(--muted);display:block}
.alt .arow{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.alt .apn{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--plum)}
.alt .aadd{border:1.5px solid var(--plum);background:transparent;color:var(--plum);font-weight:700;border-radius:999px;padding:8px 18px;font-size:13px;transition:.18s}
.alt .aadd:hover{background:var(--plum);color:#fff}
.up-skip{text-align:center;margin-top:26px}

/* subscription (light, airy) */
.sub-card{max-width:660px;margin:30px auto 0;background:var(--cloud);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;text-align:center}
.sub-card .ring{position:absolute;top:-70px;right:-70px;width:220px;height:220px;opacity:.5;z-index:0}
.sub-card>*{position:relative;z-index:1}
.sub-card .stag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);font-weight:700}
.sub-card h3{font-size:28px;font-weight:600;margin-top:6px}
.sub-card .sdisp{font-size:12.5px;color:var(--plum-2);font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-top:4px}
.sub-card .sitems{list-style:none;padding:20px 0;margin:18px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);display:grid;gap:11px}
.sub-card .sitems li{display:flex;gap:10px;font-size:15px;align-items:center;justify-content:center}
.sub-card .sprice{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 22px}
.sub-card .pb{flex:1;min-width:150px;background:var(--petal);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.sub-card .pb.rec{background:var(--blush);border-color:var(--rose-soft)}
.sub-card .pb b{display:block;font-family:var(--serif);font-weight:600;font-size:34px;color:var(--plum);line-height:1}
.sub-card .pb .pbl{font-size:12px;color:var(--muted);font-weight:600;margin-top:6px}
.sub-card .pb .pbd{display:block;font-size:11px;color:var(--rose);font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-top:4px}
.sub-card .saccept{width:100%;border:0;border-radius:12px;background:var(--plum);color:#fff;font-weight:700;font-size:16px;padding:16px;transition:.18s;font-family:var(--sans)}
.sub-card .saccept:hover{background:var(--ink);transform:translateY(-1px)}
.sub-fine{max-width:660px;margin:12px auto 0;font-size:12px;color:var(--muted);text-align:center}

/* ---------- Checkout (single stacked column) ---------- */
.checkout{max-width:640px;margin:26px auto 0;display:flex;flex-direction:column;gap:18px}
.card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{font-size:20px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.card h3 .n{width:26px;height:26px;border-radius:50%;background:var(--blush);color:var(--plum);font-family:var(--serif);font-weight:600;font-size:14px;display:grid;place-items:center}
.co-items .li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.co-items .li:last-child{border-bottom:0}
.co-items .ln b{font-weight:600;display:block}
.co-items .ln small{color:var(--muted);font-size:12px}
.co-items .ln .rm{background:none;border:0;color:var(--muted);font-size:11px;text-decoration:underline;padding:0;margin-top:3px;cursor:pointer}
.co-items .lp{font-family:var(--serif);font-weight:600;white-space:nowrap;color:var(--plum)}
.totrow{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--muted)}
.totrow.grand{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;color:var(--ink)}
.totrow.grand .g{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--plum)}
.totrow.rec{color:var(--sage);font-weight:700}
.empty{color:var(--muted);font-size:14px;padding:12px 0;text-align:center}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14.5px;font-family:inherit;background:var(--petal);color:var(--ink)}
.field input:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:var(--rose);background:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vip{background:var(--blush);border:1px solid var(--rose-soft);border-radius:14px;padding:15px 16px;display:flex;gap:13px;align-items:flex-start;margin-top:4px}
.vip input{width:21px;height:21px;margin-top:2px;accent-color:var(--rose);flex:0 0 auto}
.vip label{font-size:13.5px;cursor:pointer}
.vip label b{font-family:var(--serif);font-weight:600}
.place{width:100%;border:0;border-radius:999px;background:var(--plum);color:#fff;font-weight:700;font-size:16px;padding:17px;box-shadow:0 12px 26px rgba(110,42,78,.28);transition:.18s;font-family:var(--sans)}
.place:hover{background:var(--ink);transform:translateY(-2px)}
.guarantee{display:flex;gap:9px;align-items:center;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ---------- Confirmation ---------- */
.confirm{max-width:620px;margin:44px auto;text-align:center;background:var(--cloud);border:1px solid var(--line);border-radius:26px;padding:48px 34px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.confirm .ck{width:76px;height:76px;border-radius:50%;background:var(--blush);display:grid;place-items:center;margin:0 auto 18px;position:relative}
.confirm h2{font-size:32px;font-weight:600}
.confirm p{color:var(--muted);margin-top:10px}
.confirm .oid{margin-top:18px;display:inline-block;background:var(--petal);border:1px dashed var(--rose-soft);border-radius:12px;padding:10px 20px;font-family:var(--serif);font-weight:600;letter-spacing:.04em;color:var(--plum)}
.confirm .rc{margin-top:24px;text-align:left;border-top:1px solid var(--line);padding-top:20px}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#E8D6DE;margin-top:60px}
.foot-inner{max-width:1080px;margin:0 auto;padding:44px 26px 30px}
.foot-top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{font-family:var(--serif);font-size:24px;font-weight:700;color:#fff}
.foot-brand span{color:var(--rose-soft)}
.foot-brand p{color:rgba(232,214,222,.7);font-size:13px;margin-top:8px;max-width:34ch}
.fcol{display:flex;flex-direction:column;gap:7px}
.fcol .fh{font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-soft);margin-bottom:4px}
.fcol a{color:rgba(232,214,222,.85);text-decoration:none;font-size:13.5px}
.fcol a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fcol address{font-style:normal;color:rgba(232,214,222,.85);font-size:13.5px;line-height:1.6}
.foot-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:12px;color:rgba(232,214,222,.6)}
.legal-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.legal-links button{background:none;border:0;color:var(--rose-soft);font-weight:600;font-size:12.5px;cursor:pointer;padding:2px 4px;text-decoration:underline;text-underline-offset:3px}
.legal-links button:hover{color:#fff}
.legal-links i{color:rgba(255,255,255,.25);font-style:normal}

/* ---------- Cart panel (top-right dropdown) ---------- */
.cart-backdrop{position:fixed;inset:0;z-index:100;background:rgba(58,34,51,.4);backdrop-filter:blur(2px);animation:fade .2s ease}
.cart-backdrop[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cart-panel{position:fixed;top:12px;right:12px;width:min(410px,calc(100% - 24px));max-height:calc(100vh - 24px);background:var(--cloud);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:drop .3s cubic-bezier(.22,.61,.36,1)}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:20px;font-weight:600}
.cart-x{background:var(--petal);border:0;color:var(--ink);width:34px;height:34px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer}
.cart-x:hover{background:var(--blush)}
.cart-body{overflow-y:auto;padding:6px 22px}
.cart-body .li{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.cart-body .li:last-child{border-bottom:0}
.cart-body .ln b{font-weight:600;display:block}
.cart-body .ln small{color:var(--muted);font-size:12px}
.cart-body .ln .rm{background:none;border:0;color:var(--muted);font-size:11px;text-decoration:underline;padding:0;margin-top:4px;cursor:pointer}
.cart-body .lp{font-family:var(--serif);font-weight:600;white-space:nowrap;color:var(--plum)}
.cart-body .empty{padding:28px 0}
.cart-foot{border-top:1px solid var(--line);padding:16px 22px;background:var(--petal)}
.cart-foot .totrow.grand{border-top:2px solid var(--ink)}
.cart-foot .place{margin-top:12px}
.cart-keep{display:block;margin:10px auto 0;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}


/* ---------- Responsive ---------- */
@media (max-width:900px){
  .stepper{display:none}
  .mprog{display:flex;align-items:center;gap:10px;padding:0 26px 12px;max-width:1080px;margin:0 auto}
  .mprog .track{flex:1;height:6px;background:var(--line);border-radius:4px;overflow:hidden}
  .mprog .track i{display:block;height:100%;background:var(--plum);border-radius:4px;transition:width .35s ease}
  .mprog .lbl{font-size:12px;font-weight:700;color:var(--plum);white-space:nowrap}
  .bundles{grid-template-columns:1fr}
  .bundle.mid{padding-top:26px}
  .up-split{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .tb-inner{padding:0 16px}
  .frow{grid-template-columns:1fr}
  .brand{font-size:19px}
  .cartbtn .cart-total{display:none}
  .foot-inner{padding:34px 16px 26px}
  .featured .featured-image{height:230px}
  .alt{grid-template-columns:90px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =========================================================================
   2. SITE SURFACES — pages the funnel prototype did not have
   ========================================================================= */

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--rose);color:#FFFFFF;font-weight:700;padding:12px 18px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.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}

/* ---------- Site header (every page except the funnel) ---------- */
.site-header{background:var(--plum);color:#FFF1F5;position:sticky;top:0;z-index:50}
.site-header .bar{max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.site-brand .name{font-family:var(--serif);font-weight:800;font-size:15.5px;line-height:1.05}
.site-brand .name small{display:block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--rose-soft);text-transform:uppercase;margin-top:3px}
.site-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.site-nav a{color:rgba(255,241,245,.82);text-decoration:none;font-size:13.5px;font-weight:500}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}
.site-nav .navcta{background:var(--rose);color:#FFFFFF;font-family:var(--serif);font-weight:800;border-radius:9px;padding:9px 16px;font-size:13.5px}
.site-nav .navcta:hover{color:#FFFFFF;filter:brightness(1.06)}
.announce{background:var(--ink);color:rgba(255,241,245,.86);font-size:12.5px;text-align:center;padding:8px 18px}
.announce b{color:var(--rose-soft)}

/* ---------- Page head ---------- */
.page-head{background:var(--plum);color:#EDF3ED;position:relative;overflow:hidden}
.page-head .inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:44px 24px 118px}
.page-head .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-soft);font-weight:700}
.page-head h1{font-size:clamp(30px,5vw,50px);font-weight:900;margin-top:12px;max-width:20ch}
.page-head p{margin-top:14px;color:rgba(237,243,237,.82);max-width:60ch;font-size:16px}
.page-head .ridge{position:absolute;inset:auto 0 0 0;z-index:1;opacity:.9}

/* ---------- Catalog ---------- */
.catalog-layout{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start;margin-top:28px}
.catalog-filters{background:var(--cloud);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);position:sticky;top:16px}
.catalog-filters h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);font-weight:700;margin-bottom:12px}
.catalog-filters button{display:flex;width:100%;justify-content:space-between;gap:10px;align-items:center;background:none;border:0;border-radius:9px;padding:9px 10px;text-align:left;font-size:13.5px;font-weight:600;color:var(--ink)}
.catalog-filters button em{font-style:normal;color:var(--muted);font-size:12px}
.catalog-filters button:hover{background:var(--petal)}
.catalog-filters button[aria-pressed="true"]{background:var(--plum);color:#fff}
.catalog-filters button[aria-pressed="true"] em{color:var(--rose-soft)}
.catalog-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.catalog-top h2{font-size:22px;font-weight:800}
.catalog-top select{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13.5px;background:#fff}

/* ---------- Product card ---------- */
.card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.18s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* 4:3 rather than the source image's 4:5, so `cover` actually crops and
   object-position can hold the illustrated panel in frame. */
.card .media{display:block;position:relative;background:var(--petal);aspect-ratio:4/3;overflow:hidden}
/* The generated cards carry their own caption; crop to the illustrated
   panel so the product name is not printed twice on one tile. */
.card .media img{width:100%;height:100%;object-fit:cover;object-position:center 8%;display:block}
.card .flag{position:absolute;top:12px;left:12px;background:var(--rose);color:#FFFFFF;font-family:var(--serif);font-weight:800;font-size:11px;letter-spacing:.04em;padding:4px 10px;border-radius:7px}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card .fam{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card h3{font-size:16.5px;font-weight:700;margin:6px 0 4px;line-height:1.2}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--plum-2)}
.card .sub{font-size:13px;color:var(--muted);flex:1}
.card .card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);background:transparent;color:var(--ink)}
.card .price{font-family:var(--serif);font-weight:800;font-size:20px}
.card .price span{font-size:12px;font-weight:600;color:var(--muted)}
.card .card-actions .addbtn{background:var(--plum);border-color:var(--plum);color:#fff;min-width:72px;text-align:center}
.card .card-actions .addbtn:hover{background:var(--rose);border-color:var(--rose)}

/* ---------- Related products ---------- */
.related-products{padding:20px 0 40px}
.related-products .section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.related-products .section-head .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);font-weight:700;margin-bottom:5px}
.related-products .section-head h2{font-size:clamp(22px,3vw,30px);font-weight:800}
.related-products .section-head>a{color:var(--plum);font-weight:700;font-size:13.5px;white-space:nowrap}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.related-grid .card{height:100%}
.related-grid .card .media{aspect-ratio:4/5;padding:12px;background:var(--petal)}
.related-grid .card .media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;border-radius:10px}

/* ---------- Product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding:32px 0}
.pdp-media{background:var(--cloud);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.pdp-media img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center}
.pdp-info .back{font-size:13px;color:var(--muted);text-decoration:none}
.pdp-info .back:hover{color:var(--plum)}
.pdp-info .kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);font-weight:700;margin-top:14px}
.pdp-info h1{font-size:clamp(26px,3.6vw,38px);font-weight:900;margin-top:8px}
.pdp-info .offer-label{font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--muted);margin-top:6px}
.pdp-price{display:flex;align-items:baseline;gap:8px;margin:18px 0 6px}
.pdp-price b{font-family:var(--serif);font-weight:900;font-size:42px;letter-spacing:-.02em}
.pdp-price span{color:var(--muted);font-size:15px}
.pdp-info .tagline{font-size:17px;font-weight:600;margin-top:6px}
.pdp-info .desc{color:var(--muted);margin-top:10px;font-size:15px}
.pdp-contents{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.pdp-contents li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.pdp-contents li.bonus{color:var(--rose);font-weight:600}
.pdp-buy{width:100%;margin-top:22px;border:0;border-radius:12px;background:var(--rose);color:#FFFFFF;font-family:var(--serif);font-weight:800;font-size:17px;padding:16px;box-shadow:0 10px 24px rgba(224,145,47,.3);transition:.18s;display:flex;justify-content:center;gap:10px}
.pdp-buy:hover{transform:translateY(-2px)}
.accord{margin-top:24px;border-top:1px solid var(--line)}
.accord details{border-bottom:1px solid var(--line)}
.accord summary{list-style:none;cursor:pointer;padding:15px 0;font-family:var(--serif);font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.accord summary::-webkit-details-marker{display:none}
.accord summary i{font-style:normal;color:var(--rose);font-size:18px}
.accord details[open] summary i{transform:rotate(45deg)}
.accord p,.accord ul{color:var(--muted);font-size:14px;padding-bottom:16px;margin:0}
.accord ul{padding-left:20px}
.enrol-gate{margin-top:22px;background:var(--blush);border:1.5px dashed var(--rose);border-radius:14px;padding:18px 20px}
.enrol-gate .lede{font-family:var(--serif);font-weight:700;font-size:15.5px}
.enrol-gate p{font-size:13.5px;color:#7A3F58;margin-top:8px}
.enrol-gate a.gate-cta{display:inline-flex;gap:10px;margin-top:14px;background:var(--plum);color:#fff;text-decoration:none;font-family:var(--serif);font-weight:800;font-size:15px;padding:13px 20px;border-radius:11px}

/* ---------- Supplement / ingestible disclosure ---------- */
.ingest-panel{margin-top:22px;background:var(--cloud);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ingest-panel h3{font-family:var(--serif);font-size:15px;font-weight:800;color:var(--plum)}
.ingest-panel dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.ingest-panel dt{color:var(--muted);font-weight:600}
.ingest-panel dd{margin:0}
.fda{margin-top:14px;background:var(--blush);border-radius:10px;padding:12px 14px;color:#8A4A66;font-size:12.5px;line-height:1.5}
.fda b{display:block;font-family:var(--serif);margin-bottom:3px}

/* ---------- Legal & FAQ pages ---------- */
.legal{max-width:820px;margin:0 auto;padding:38px 0 20px}
.legal-toc{background:var(--cloud);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:28px;box-shadow:var(--shadow)}
.legal-toc p{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.legal-toc div{display:flex;flex-wrap:wrap;gap:8px 18px}
.legal-toc a{font-size:13.5px;color:var(--plum);text-decoration:none;font-weight:600}
.legal-toc a:hover{text-decoration:underline;text-underline-offset:3px}
.legal-body h2{font-family:var(--serif);font-size:19px;font-weight:800;color:var(--plum);margin:34px 0 10px;scroll-margin-top:80px}
.legal-body h3{font-family:var(--serif);font-size:16px;font-weight:700;margin:22px 0 6px}
.legal-body p,.legal-body li{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 10px}
.legal-body ul,.legal-body ol{padding-left:22px}
.legal-body b,.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--plum);font-weight:600}
.legal-updated{font-size:12.5px;color:var(--muted);font-style:italic}
.legal-callout{background:var(--cloud);border-left:3px solid var(--rose);border-radius:0 12px 12px 0;padding:16px 18px;margin:18px 0}
.legal-callout p:last-child{margin-bottom:0}
.descriptor{display:inline-block;background:var(--petal);border:1px dashed var(--line);border-radius:9px;padding:9px 16px;font-family:var(--serif);font-weight:800;letter-spacing:.05em;color:var(--ink)}
.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item:last-child{border-bottom:0}
.faq-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:12px}
.faq-contact address{font-style:normal;color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- Form validation ---------- */
.field .form-error{display:none;color:#B23A48;font-size:12px;margin-top:5px}
.field input.input-error,.field select.input-error{border-color:#B23A48;background:#FDF4F5}
.form-note{font-size:12px;color:var(--muted);margin-top:6px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:16px;display:none}
.alert.show{display:block}
.alert.error{background:#FDF4F5;border:1px solid #EBC7CE;color:#8E2436}
.alert.info{background:var(--blush);border:1px solid var(--rose-soft);color:#8A4A66}
.place[disabled],.cta[disabled]{opacity:.55;cursor:progress}

/* ---------- Recurring consent ---------- */
.consent{margin-top:6px;background:var(--cloud);border:1.5px solid var(--plum-2);border-radius:12px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--plum);flex:0 0 auto}
.consent label{font-size:13.5px;cursor:pointer}
.consent strong{display:block;font-family:var(--serif);font-size:14.5px;margin-bottom:5px}
.consent em{font-style:normal;display:block;color:var(--muted);margin-bottom:6px}
.consent small{display:block;color:var(--muted);font-size:12px}

/* ---------- Trust strip & site footer ---------- */
.trust-strip{background:var(--cloud);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:14px 22px;font-size:13px;color:var(--muted)}
.site-footer{background:var(--ink);color:rgba(255,241,245,.72);margin-top:48px}
.site-footer .inner{max-width:1100px;margin:0 auto;padding:44px 24px 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.site-footer h2{font-family:var(--serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-soft);font-weight:700;margin-bottom:12px}
.site-footer a{color:rgba(255,241,245,.72);text-decoration:none;font-size:13.5px;display:block;margin-bottom:8px}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer address{font-style:normal;font-size:13.5px;line-height:1.6}
.site-footer .brandcol .name{font-family:var(--serif);font-weight:800;font-size:17px;color:#fff}
.site-footer .brandcol p{font-size:13.5px;margin-top:10px;max-width:34ch}
.footer-signup{margin-top:16px}
.footer-signup form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.footer-signup input{flex:1;min-width:170px;border:1px solid rgba(255,241,245,.28);background:rgba(255,255,255,.06);color:#fff;border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13.5px}
.footer-signup input::placeholder{color:rgba(255,241,245,.5)}
.footer-signup button{border:0;border-radius:9px;background:var(--rose);color:#FFFFFF;font-family:var(--serif);font-weight:800;padding:10px 16px;font-size:13.5px}
.footer-signup .consent-line{font-size:11.5px;margin-top:8px;line-height:1.5}
.footer-signup .consent-line a{display:inline;margin:0}
.site-footer .fda-note{max-width:1100px;margin:0 auto;padding:18px 24px 0;font-size:12px;line-height:1.6;text-align:center;color:rgba(255,241,245,.62)}
.site-footer .fine{max-width:1100px;margin:0 auto;padding:18px 24px 34px;border-top:1px solid rgba(255,241,245,.14);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer .fine .operator{color:rgba(255,241,245,.6)}

@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:24px}
  .catalog-layout{grid-template-columns:1fr}
  .catalog-filters{position:static}
  .site-footer .inner{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .site-header .bar{flex-direction:column;align-items:flex-start;gap:12px}
  .site-footer .inner{grid-template-columns:1fr}
  .related-products .section-head{align-items:flex-start;flex-direction:column;gap:8px}
  .related-grid{grid-template-columns:1fr}
}

/* =========================================================================
   3. CART EXTRAS — what the funnel sheet does not already cover
   =========================================================================
   Bloom's own stylesheet already styles the cart panel, its trigger button
   and the "added" state on the shelf. Only the pieces the PHP build adds on
   top of the prototype live here. */

/* The cart trigger, reused in the site header on the catalog pages. */
.site-header .cartbtn{border-color:rgba(255,241,245,.4);background:rgba(255,241,245,.1)}
.site-header .cartbtn:hover{background:rgba(255,241,245,.2);border-color:rgba(255,241,245,.6)}

.cart-foot .place[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.cart-body .empty{color:var(--muted);font-size:14px;text-align:center}
.cart-body .empty a{color:var(--plum);font-weight:600}
.cart-fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* Recurring disclosure at checkout — one paragraph per commitment. */
.enrol-terms{font-size:14px;color:var(--muted);margin-bottom:14px}
.enrol-terms p{margin:0 0 10px}
.enrol-terms b{color:var(--ink)}

.recur-note{font-size:12.5px;color:var(--plum-2);margin-top:8px;line-height:1.5}

/* Product photography in the shelf thumb, and the tint behind it. */
.item .thumb{background:linear-gradient(135deg,#FBEAEF,#F7D9E1)}
.item .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 8%;display:block}
/* Built at runtime as tone-<?= $p['tone'] ?>, so these never appear
   literally in the markup. Do not treat them as unused. */
.tone-rose{background:linear-gradient(135deg,#FBEAEF,#F7D9E1)}
.tone-sage{background:linear-gradient(135deg,#E7F0E2,#D3E3CC)}
.tone-lav{background:linear-gradient(135deg,#EFE8F3,#E2D6EC)}
.tone-plum{background:linear-gradient(135deg,#F3E0EA,#E7C9D9)}
.stepq[hidden]{display:none}

/* Checkout: the pay button and its reassurance sit in the last card. */
.checkout .card .place{margin-top:6px}
.checkout .summary .co-items{margin-bottom:10px}
.checkout .checkout-recurring{font-size:12.5px;color:var(--plum-2);margin-top:10px;line-height:1.5}
.checkout .form-note a{color:var(--plum);font-weight:600}
.checkout .alert{margin-bottom:0}

/* "one-time, not a subscription" reassurance on the upsell stages. */
.up-head .wait{display:inline-block;background:var(--sage-soft);color:#3F5A3A;font-weight:700;font-size:13px;padding:7px 16px;border-radius:999px;margin-top:14px}

/* -------------------------------------------------------------------------
   Bundle grid corrections
   -------------------------------------------------------------------------
   The prototype bottom-aligns three cards of equal height. Real catalog
   data gives them one, three and six line items, so `align-items:end` left
   them staggered and the ribbon landed on top of the longest title. Equal
   heights keep the Select buttons on one line, and the title reserves the
   ribbon's corner. */
.bundles{align-items:stretch}
.bundle .bname{padding-right:96px;line-height:1.15}
.bundle.mid{padding-top:26px}