/* ============================================================
   Puff Paradise — shared site shell (subpages)
   Theme tokens, base, nav, footer, age gate, buttons, helpers.
   Paths are relative to /assets/ (hence ../img/...).
   ============================================================ */
:root{ --gold:#C6A15B; --gold-bright:#E3C988; --gold-deep:#9A7636; --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,sans-serif; --maxw:1280px; }
html[data-theme="dark"]{ --bg:#0B100C; --bg-2:#10180F; --panel:rgba(255,255,255,.04); --panel-line:rgba(198,161,91,.22); --ink:#F3EEE2; --muted:#A9B0A0; --card:rgba(255,255,255,.035); --float-shadow:drop-shadow(0 26px 40px rgba(0,0,0,.55)); }
/* B·RUST repurposed → AANUKO sand-tan & deep-blue (Deep Blue + Tan palette) */
html[data-theme="rust"]{ --bg:#E1B382; --bg-2:#D7A66E; --panel:rgba(255,248,236,.5); --panel-line:rgba(18,52,59,.22); --ink:#12343B; --muted:#2D545E; --gold:#2D545E; --gold-bright:#3A6B78; --gold-deep:#12343B; --card:rgba(255,248,236,.46); --float-shadow:drop-shadow(0 22px 30px rgba(70,40,15,.28)); }
/* C·SAGE — soft sage & cream (light) · #778873 #A1BC98 #DCCFC0 #FDF6ED */
html[data-theme="c"]{ --bg:#FDF6ED; --bg-2:#ECE1D0; --panel:rgba(255,255,255,.58); --panel-line:rgba(119,136,115,.34); --ink:#2b332a; --muted:#5f6b57; --gold:#778873; --gold-bright:#A1BC98; --gold-deep:#5b6a55; --card:rgba(255,253,248,.64); --float-shadow:drop-shadow(0 22px 30px rgba(70,85,60,.20)); }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden;transition:background .6s ease,color .6s ease}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;padding:14px 26px;border-radius:100px;background:var(--gold);color:#F8EFDD;border:1px solid var(--gold);transition:transform .25s,background .25s;cursor:pointer}
.btn:hover{transform:translateY(-2px);background:var(--gold-bright)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--panel-line)}
.btn.ghost:hover{background:var(--panel)}

/* ---- AGE GATE ---- */
#gate{position:fixed;inset:0;z-index:1000;background:#070A07;display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .5s}
#gate.hide{opacity:0;pointer-events:none}
#gate .bgwall{position:absolute;inset:0;background:url('../img/bg/wall-rust.webp') center/cover;opacity:.16;filter:saturate(.9)}
#gate .card{position:relative;width:min(440px,92vw);background:linear-gradient(180deg,#11180F,#0B100C);border:1px solid rgba(198,161,91,.28);border-radius:22px;padding:42px 34px;text-align:center;color:#F3EEE2;box-shadow:0 40px 90px rgba(0,0,0,.6)}
#gate .logo{width:108px;height:108px;margin:0 auto 18px;border-radius:50%;background:#fff center/72% no-repeat url('../img/brand/logo.png');box-shadow:0 0 0 1px rgba(198,161,91,.3)}
#gate h2{font-size:26px;margin-bottom:8px}
#gate p{color:#A9B0A0;font-size:14px;margin-bottom:26px}
#gate .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gstep{display:none}.gstep.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chip{padding:13px 20px;border-radius:12px;border:1px solid rgba(198,161,91,.3);background:rgba(255,255,255,.03);color:#F3EEE2;font-weight:600;font-size:14px;cursor:pointer;transition:.2s}
.chip:hover{background:rgba(198,161,91,.14);border-color:var(--gold)}
#gate .deny{color:#E6B4A6}
.gold{color:var(--gold)}

/* ============ TWO-TIER SITE HEADER (persistent, all pages) ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:300;font-family:var(--sans)}
/* --- top utility bar --- */
.hdr-util{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg);border-bottom:1px solid var(--panel-line);padding:0 24px;min-height:44px}
.util-left{display:flex;align-items:center;gap:14px;min-width:0}
.util-right{display:flex;align-items:center;gap:8px}
.util-pill{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);border:1px solid var(--panel-line);background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:7px;padding:7px 13px;transition:.2s;white-space:nowrap}
.util-pill:hover{border-color:var(--gold);color:var(--gold)}
/* Locations dropdown (top utility bar) */
.util-dd{position:relative}
.util-pill-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--sans)}
.util-pill-btn .dd-chev{width:11px;height:11px;transition:transform .2s}
.util-dd.open>.util-pill-btn{border-color:var(--gold);color:var(--gold)}
.util-dd.open .dd-chev{transform:rotate(180deg)}
.util-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:228px;background:var(--bg-2);border:1px solid var(--panel-line);border-radius:10px;box-shadow:0 24px 44px rgba(18,52,59,.22);overflow:hidden;display:none;z-index:6}
.util-dd.open .util-dd-menu{display:block}
.util-dd-menu a{display:block;padding:12px 16px;color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--panel-line)}
.util-dd-menu a:last-child{border-bottom:0}
.util-dd-menu a:hover{background:var(--panel);color:var(--gold)}
.util-dd-menu a small{display:block;margin-top:3px;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.hdr-store{position:relative;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--sans);padding:11px 0;text-align:left}
.us-pin{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.us-loc{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.us-badge{font-size:9px;font-weight:800;letter-spacing:.05em;color:#F8EFDD;background:var(--gold-bright);border-radius:5px;padding:3px 6px;text-transform:uppercase;flex-shrink:0}
.us-hours{font-size:12.5px;color:var(--muted);white-space:nowrap}
.us-chev{width:12px;height:12px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.hdr-store.open .us-chev{transform:rotate(180deg)}
.st-menu{position:absolute;top:100%;left:0;min-width:252px;background:var(--bg-2);border:1px solid var(--panel-line);z-index:5;display:none;box-shadow:0 24px 44px rgba(0,0,0,.45);border-radius:0 0 10px 10px;overflow:hidden}
.hdr-store.open .st-menu{display:block}
.st-menu a{display:block;padding:13px 18px;color:var(--ink);font-size:13.5px;font-weight:600;border-bottom:1px solid var(--panel-line)}
.st-menu a:last-child{border-bottom:0}
.st-menu a:hover{background:var(--panel);color:var(--gold)}
.st-menu a small{display:block;color:var(--muted);font-size:11px;margin-top:3px;font-weight:400}
.hdr-toggle{display:flex;border:1px solid var(--panel-line);border-radius:7px;overflow:hidden;font-size:10px;font-weight:700;flex-shrink:0}
.hdr-toggle button{padding:6px 9px;background:transparent;color:var(--muted);border:0;cursor:pointer;transition:.2s}
.hdr-toggle button.active{background:var(--gold);color:#F8EFDD}
/* --- main bar --- */
.hdr-main{display:flex;align-items:center;gap:16px;background:var(--bg-2);border-bottom:1px solid var(--panel-line);padding:0 20px;min-height:72px}
.hdr-logo{display:flex;flex-direction:row;align-items:center;gap:11px;flex-shrink:0}
.hdr-mark{width:42px;height:42px;border-radius:50%;background:#F8EFDD center/74% no-repeat url('../img/brand/logo.png');box-shadow:0 0 0 1px var(--panel-line);flex-shrink:0}
.logo-text{display:flex;flex-direction:column;justify-content:center;line-height:.98;gap:4px}
@media(max-width:700px){.hdr-mark{width:36px;height:36px}}
.logo-word{font-family:'Anton',var(--sans);font-weight:400;font-size:clamp(22px,2.4vw,31px);letter-spacing:.012em;text-transform:uppercase;color:var(--ink)}
.logo-sub{font-size:9.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.hdr-nav{display:flex;align-items:center;gap:clamp(7px,1.05vw,15px);flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
.hdr-nav::-webkit-scrollbar{display:none}
.hdr-nav a{font-size:12.5px;font-weight:700;letter-spacing:.022em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:color .2s;padding:7px 0;border-bottom:2px solid transparent}
.hdr-nav a:hover{color:var(--gold)}
.hdr-nav a.active{color:var(--gold);border-bottom-color:var(--gold)}
.hdr-cta{flex-shrink:0;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#F8EFDD;background:var(--gold);border:1px solid var(--gold);border-radius:9px;padding:13px 26px;transition:background .2s,transform .2s;white-space:nowrap}
.hdr-cta:hover{background:var(--gold-bright);transform:translateY(-1px)}
/* --- mobile --- */
.hdr-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;margin-left:auto}
.hdr-burger span{width:23px;height:2px;background:var(--ink);display:block;border-radius:2px}
.hdr-mobile{display:none}
@media(max-width:1100px){
  .hdr-nav,.util-right,.hdr-toggle{display:none}
  .hdr-burger{display:flex}
  .us-hours{display:none}
  .hdr-main{gap:12px;min-height:64px;padding:0 14px}
  .hdr-cta{padding:9px 14px;font-size:11.5px}
  .hdr-mobile{display:none;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--panel-line);padding:6px 0}
  .hdr-mobile.open{display:flex}
  .hdr-mobile a{padding:13px 24px;color:var(--ink);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
  .hdr-mobile a:hover{color:var(--gold)}
}

/* ---- GENERIC PAGE HERO (text, faint botanical wallpaper) ---- */
.page-hero{position:relative;padding:168px 0 72px;overflow:hidden;border-bottom:1px solid var(--panel-line)}
.page-hero .ph-wall{position:absolute;inset:0;z-index:0;background:url('../img/bg/wall-rust.webp') center top/cover no-repeat;opacity:.10}
html[data-theme="dark"] .page-hero .ph-wall{filter:brightness(.5) saturate(.6) contrast(1.04) hue-rotate(-12deg);opacity:.18}
.page-hero::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent,var(--bg))}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(40px,6.6vw,80px);letter-spacing:-.02em}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero .sub{color:var(--muted);max-width:600px;margin-top:18px;font-size:clamp(15px,2vw,18px)}

/* ---- HELPERS ---- */
.pad{padding:92px 0}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,4.6vw,50px);margin:12px 0}
.sec-head p{color:var(--muted)}
/* .reveal entrance handled by Motion (assets/motion.js); visible by default = safe fallback */
/* hero entrance — subtle staggered fade-up on load (page-hero + shop-hero) */
@media (prefers-reduced-motion:no-preference){
  .page-hero .wrap>*,.shop-hero .wrap>*{animation:ppRise .85s both cubic-bezier(.22,.61,.36,1)}
  .page-hero .wrap>*:nth-child(2),.shop-hero .wrap>*:nth-child(2){animation-delay:.08s}
  .page-hero .wrap>*:nth-child(3),.shop-hero .wrap>*:nth-child(3){animation-delay:.16s}
  .shop-hero .wrap>*:nth-child(4){animation-delay:.24s}
  .shop-hero .wrap>*:nth-child(5){animation-delay:.32s}
}
@keyframes ppRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.card{border:1px solid var(--panel-line);background:var(--card);border-radius:18px;padding:30px}

/* ===== MEGA FOOTER (Sunrise-style — dark anchor + cream legal strip) ===== */
.site-footer{background:#0A0F0A;color:#E8E4D8;margin-top:64px;border-top:3px solid var(--gold);font-family:var(--sans)}
.foot-top{display:grid;grid-template-columns:1.35fr 1.5fr 1fr 1.15fr;gap:48px;padding:74px 28px 64px}
.foot-brand .fb-logo{display:flex;align-items:center;gap:14px}
.foot-brand .fb-mark{width:62px;height:62px;border-radius:50%;background:#fff center/72% no-repeat url('../img/brand/logo.png');box-shadow:0 0 0 1px rgba(198,161,91,.4);flex-shrink:0}
.foot-brand .fb-name{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:#F3EEE2}
.foot-brand .fb-name span{color:var(--gold)}
.foot-brand .fb-tag{color:#9aa39a;font-size:14px;line-height:1.65;margin:20px 0 22px;max-width:310px}
.foot-social{display:flex;gap:12px}
.foot-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(198,161,91,.12);border:1px solid rgba(198,161,91,.3);color:var(--gold-bright);transition:.25s}
.foot-social a:hover{background:var(--gold);color:#F8EFDD;transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}
.foot-col h4{font-family:var(--serif);font-style:italic;font-weight:600;font-size:21px;color:var(--gold-bright);letter-spacing:.01em;margin-bottom:22px}
.foot-links{display:flex;flex-direction:column;gap:14px}
.foot-shop .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.foot-links a{color:#C7CCC3;font-size:15px;transition:color .2s}
.foot-links a:hover{color:var(--gold-bright)}
.foot-contact p{color:#C7CCC3;font-size:14.5px;line-height:1.6;margin-bottom:16px}
.foot-contact .fc-label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;font-weight:600}
.foot-contact a{color:#C7CCC3}.foot-contact a:hover{color:var(--gold-bright)}
.foot-contact .fc-phone{color:#F3EEE2;font-weight:600}
.foot-bottom{background:#F3E7D6;color:#3a2a1c}
.foot-bottom-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 28px}
.foot-bottom .fb-copy{font-size:13px;color:#5e4a38}
.foot-bottom .fb-legal{display:flex;align-items:center;gap:18px;font-size:13px;flex-wrap:wrap}
.foot-bottom .fb-legal a{color:#5e4a38}.foot-bottom .fb-legal a:hover{color:#241009}
.foot-bottom .fb-by{color:#8a6a48}
.foot-bottom .fb-by b{color:var(--gold-deep);font-weight:700}
.foot-bottom .fb-by-link{color:inherit;text-decoration:none}
.foot-bottom .fb-by-link b{transition:color .2s}
.foot-bottom .fb-by-link:hover b{color:var(--gold-bright);text-decoration:underline}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr;gap:40px 32px;padding:56px 22px 48px}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:36px}.foot-bottom-in{flex-direction:column;align-items:flex-start;gap:12px}}