:root { --club-forest:#294638; --club-cream:rgba(255,252,244,.84); --club-blue:#a9d7e8; --club-gold:#d39b31; }
html, body { min-height:100%; }
body.subscription-page { margin:0; min-height:100vh; display:flex; flex-direction:column; color:#27342e; background:#fff8e7 url("images/background.png") center top / cover fixed; }
.subscription-page .site-header { flex:0 0 auto; }
.subscription-page .brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.subscription-page .brand img { width:45px; height:45px; object-fit:contain; flex:0 0 45px; }
.subscription-page .brand span { font-family:"Italiana",Georgia,serif; font-size:1.25rem; }
.subscription-page .shop-nav { display:flex; gap:30px; margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.subscription-page .nav-btn { padding:7px 0; color:#27342e; background:transparent; border:0; border-bottom:1px solid transparent; border-radius:0; font-size:.78rem; font-style:normal; font-weight:600; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; }
.subscription-page .nav-btn:hover, .subscription-page .nav-btn.active { color:var(--club-forest); background:transparent; border-bottom-color:var(--club-forest); transform:none; }
.subscription-page .header-shop-link { justify-self:end; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px; color:#fff; background:var(--club-forest); border:1px solid var(--club-forest); border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; transition:background .2s ease,color .2s ease; }
.subscription-page .header-shop-link:hover { color:var(--club-forest); background:transparent; }
.club-main { width:min(1380px, calc(100% - 48px)); margin:0 auto; padding:clamp(42px,6vw,90px) 0; flex:1; }
.club-hero { display:grid; grid-template-columns:minmax(0,1.14fr) minmax(340px,.86fr); gap:clamp(26px,4vw,64px); padding:clamp(34px,5vw,76px); background:var(--club-cream); border:1px solid rgba(41,70,56,.18); box-shadow:0 20px 55px rgba(41,70,56,.10); }
.club-copy h1, .club-success h1 { max-width:820px; margin:.12em 0 .25em; color:#292b29; font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(3.25rem,7vw,7rem); font-weight:400; line-height:.88; letter-spacing:-.04em; }
.club-lede { max-width:680px; font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.65; }
.club-price { display:flex; align-items:center; gap:18px; margin:28px 0 8px; }
.club-price-main { font-family:"Cormorant Garamond", Georgia, serif; font-size:clamp(4.5rem,8vw,7rem); line-height:.8; color:var(--club-forest); }
.club-price-detail { padding-left:18px; border-left:1px solid rgba(41,70,56,.28); font-size:1rem; line-height:1.45; text-transform:uppercase; letter-spacing:.08em; }
.club-total { margin:0 0 25px; color:#506159; }
.club-cta, .club-secondary { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:0 28px; border:1px solid var(--club-forest); border-radius:999px; font:700 .94rem/1 Arial,sans-serif; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.club-cta { color:#fff; background:var(--club-forest); }
.club-secondary { color:var(--club-forest); background:rgba(255,255,255,.62); }
.club-cta:hover, .club-secondary:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(41,70,56,.15); }
.club-cta:disabled { opacity:.65; cursor:wait; transform:none; }
.club-status { min-height:1.4em; margin:14px 0 0; color:#984a34; }
.club-preferences { max-width:720px; margin-top:30px; }
.club-preferences fieldset { margin:0 0 18px; padding:0; border:0; }
.club-preferences legend, .preference-fields > label { display:block; margin-bottom:10px; color:var(--club-forest); font-weight:700; }
.club-preferences legend small { margin-left:8px; color:#66766e; font-size:.76rem; font-weight:400; }
.preference-choice { display:flex; align-items:flex-start; gap:11px; margin:8px 0; padding:13px 15px; background:rgba(255,255,255,.56); border:1px solid rgba(41,70,56,.14); cursor:pointer; }
.preference-choice input { margin-top:4px; accent-color:var(--club-forest); }
.preference-choice span, .preference-choice small { display:block; }
.preference-choice small { margin-top:3px; color:#5b6c64; line-height:1.4; }
.scent-options { display:flex; flex-wrap:wrap; gap:8px; }
.scent-options label { padding:9px 13px; background:rgba(255,255,255,.58); border:1px solid rgba(41,70,56,.14); border-radius:999px; cursor:pointer; }
.scent-options input { accent-color:var(--club-forest); }
.preference-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.preference-fields textarea { box-sizing:border-box; width:100%; margin-top:8px; padding:12px; resize:vertical; color:#27342e; background:rgba(255,255,255,.72); border:1px solid rgba(41,70,56,.22); border-radius:4px; font:inherit; line-height:1.4; }
.preference-fields textarea:focus { outline:2px solid rgba(41,70,56,.24); border-color:var(--club-forest); }
.preference-disclaimer { margin:4px 0 20px; color:#607068; font-size:.82rem; line-height:1.5; }
.club-box { position:relative; align-self:center; padding:clamp(30px,4vw,54px); background:rgba(169,215,232,.72); border:1px solid rgba(41,70,56,.15); }
.club-bee { position:absolute; right:28px; top:22px; font-size:2.35rem; transform:rotate(10deg); }
.club-box ul { margin:28px 0 0; padding:0; list-style:none; }
.club-box li { padding:22px 0; border-top:1px solid rgba(41,70,56,.22); }
.club-box li strong, .club-box li span { display:block; }
.club-box li strong { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.8rem; font-weight:500; }
.club-box li span { margin-top:5px; line-height:1.5; color:#4c6258; }
.club-details { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
.club-details article, .club-note { padding:30px; background:rgba(255,252,244,.72); border:1px solid rgba(41,70,56,.15); backdrop-filter:blur(2px); }
.club-details article > span { color:var(--club-gold); font-weight:800; letter-spacing:.12em; }
.club-details h2 { margin:10px 0 8px; font-family:"Cormorant Garamond", Georgia, serif; font-size:2rem; font-weight:500; }
.club-details p, .club-note { line-height:1.6; }
.club-note { margin-top:20px; }
.shop-club-callout { width:min(1280px,calc(100% - 48px)); margin:34px auto 20px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; color:#27342e; background:rgba(169,215,232,.58); border:1px solid rgba(41,70,56,.16); box-shadow:0 14px 40px rgba(41,70,56,.08); }
.shop-club-callout h2 { margin:5px 0 10px; font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(2.35rem,4vw,4rem); font-weight:400; line-height:1; }
.shop-club-callout p { max-width:760px; margin:0; line-height:1.6; }
.shop-club-callout .club-cta { white-space:nowrap; }
.club-success { max-width:1050px; margin:auto; padding:clamp(40px,7vw,90px); text-align:center; background:var(--club-cream); border:1px solid rgba(41,70,56,.18); box-shadow:0 20px 55px rgba(41,70,56,.10); }
.club-success h1 { margin-left:auto; margin-right:auto; font-size:clamp(3.1rem,6vw,6rem); }
.club-success > p:not(.eyebrow):not(.club-status) { max-width:700px; margin:20px auto; font-size:1.15rem; line-height:1.65; }
.success-mark { display:grid; place-items:center; width:86px; height:86px; margin:0 auto 24px; border-radius:50%; color:var(--club-forest); background:rgba(169,215,232,.52); border:1px solid rgba(41,70,56,.2); font-size:2.4rem; }
.success-summary { display:grid; grid-template-columns:1fr auto; gap:13px 32px; max-width:520px; margin:32px auto; padding:24px; text-align:left; background:rgba(255,255,255,.58); border:1px solid rgba(41,70,56,.14); }
.success-summary strong { color:var(--club-forest); }
.success-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@media (max-width:900px) { .subscription-page .site-header { grid-template-columns:1fr auto; } .subscription-page .shop-nav { display:none; } .club-hero { grid-template-columns:1fr; } .club-details { grid-template-columns:1fr; } .shop-club-callout { grid-template-columns:1fr; } }
@media (max-width:620px) { .preference-fields { grid-template-columns:1fr; } .subscription-page .brand img { width:38px; height:38px; flex-basis:38px; } .subscription-page .brand span { font-size:1.05rem; } .club-main { width:min(100% - 24px,1380px); padding:22px 0 36px; } .club-hero, .club-success { padding:30px 22px; } .club-copy h1 { font-size:3.45rem; } .club-price-detail { font-size:.82rem; } }