/* JP Custom Leatherworks — mockup design system (prototype aesthetic) */ :root{ --char:#2b2b2b; /* prototype body background */ --char-deep:#1f1f1f; --char-card:#353535; --gold:#f7b829; /* prototype accent rgb(247,184,41) */ --gold-deep:#e5a416; --white:#ffffff; --muted:rgba(255,255,255,.72); --muted-2:rgba(255,255,255,.6); --on-gold:#1f1f1f; --line:rgba(255,255,255,.14); --line-gold:rgba(31,31,31,.18); } /* Fonts are self-hosted (assets/fonts/, latin + latin-ext subsets from Google Fonts) so the first paint isn't waiting on two extra hosts. Jost is the variable file: one download covers every weight. The "Fallback" faces are Georgia/Arial re-metriced to Bevan/Jost (size-adjust + ascent/descent overrides) so if the real font hasn't arrived yet, the swap doesn't shift the layout. Preload the two latin files from each page's . */ @font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-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:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-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:'Bevan';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bevan-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:'Bevan';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bevan-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:'Bevan Fallback';src:local('Georgia');size-adjust:125.67%;ascent-override:91.93%;descent-override:35.94%;line-gap-override:0%} @font-face{font-family:'Jost Fallback';src:local('Arial');size-adjust:95.9%;ascent-override:111.58%;descent-override:39.1%;line-gap-override:0%} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Jost','Jost Fallback',system-ui,sans-serif;background:var(--char);color:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .bevan{font-family:'Bevan','Bevan Fallback',Georgia,serif;font-weight:400;line-height:1.12;letter-spacing:.01em} .wrap{max-width:1240px;margin:0 auto;padding:0 32px} .eyebrow{font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} .btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:16px 36px;border-radius:200px;transition:all .25s;cursor:pointer;border:2px solid transparent} .btn-gold{background:var(--gold);color:var(--on-gold)} .btn-gold:hover{background:var(--white)} .btn-ghost{border-color:var(--white);color:var(--white);background:transparent} .btn-ghost:hover{background:var(--white);color:var(--char)} .btn-dark{background:var(--char);color:var(--white)} .btn-dark:hover{background:#000} /* ── announcement ─────────────────────── */ .announce{background:var(--gold);color:var(--on-gold);text-align:center;font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px} /* ── header ───────────────────────────── */ header{position:sticky;top:0;z-index:50;background:rgba(31,31,31,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:86px} .logo{display:flex;align-items:center;gap:14px} .logo img{height:64px;width:auto} .logo-word{display:flex;flex-direction:column;line-height:1.1} .logo-word .bevan{font-size:19px;color:var(--gold)} .logo-word span:last-child{font-size:9.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted-2);font-weight:600} .nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .nav-links a{position:relative;padding:6px 0;white-space:nowrap} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .25s} .nav-links a:hover::after{width:100%} .nav-links a.on::after{width:100%} .nav-links .hot{color:var(--gold)} .nav-icons{display:flex;gap:18px;align-items:center;font-size:13px;font-weight:600;letter-spacing:.08em} /* keep the 6 nav links + logo + account/cart on ONE line all the way down to the 980px mobile cutoff — tighten, then shrink the logo, before giving up */ @media(max-width:1230px){.nav-links{gap:15px;font-size:12.5px;letter-spacing:.05em}} @media(max-width:1080px){.nav-links{gap:11px;font-size:12px;letter-spacing:.02em}.logo img{height:50px}.logo-word .bevan{font-size:16px}.logo{gap:10px}.nav-icons{gap:12px}} .cart-pill{border:1.5px solid var(--gold);color:var(--gold);padding:8px 18px;border-radius:200px} .cart-pill:hover{background:var(--gold);color:var(--on-gold)} .cart-pill{white-space:nowrap} /* 🔍 header product search (assets/search.js toggles #site-search + header.search-open) */ .nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:200px;background:transparent;color:var(--white);cursor:pointer;transition:border-color .2s,color .2s} .nav-search:hover,header.search-open .nav-search{border-color:var(--gold);color:var(--gold)} .nav-search:focus-visible,.ss-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .site-search{position:absolute;left:0;right:0;top:100%;background:var(--char-deep);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:18px 0 20px} .site-search[hidden]{display:none} .site-search form{display:flex;gap:10px;align-items:center} .site-search input{flex:1;min-width:0;font:inherit;font-size:17px;color:var(--white);background:var(--char-card);border:1.5px solid var(--line);border-radius:200px;padding:12px 20px;outline:none} .site-search input:focus{border-color:var(--gold)} .site-search input::placeholder{color:var(--muted-2)} .site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .ss-go{font:inherit;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:13px 24px;border:0;border-radius:200px;background:var(--gold);color:var(--on-gold);cursor:pointer} .ss-go:hover{background:var(--white)} .ss-close{width:44px;height:44px;flex:none;border:1.5px solid var(--line);border-radius:200px;background:transparent;color:var(--white);font-size:16px;cursor:pointer} .ss-close:hover{border-color:var(--white)} .ss-results{max-height:min(60vh,480px);overflow-y:auto;margin-top:6px} .ss-results:empty{display:none} .ss-item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:8px 10px;border-radius:12px} .ss-item.on,.ss-item:hover{background:rgba(255,255,255,.07)} .ss-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--char-card)} .ss-thumb img{width:100%;height:100%;object-fit:cover} .ss-name{font-weight:600;line-height:1.3} .ss-price{color:var(--gold);font-weight:600;white-space:nowrap} .ss-price s{color:var(--muted-2);font-weight:400;margin-right:6px} .ss-all{display:inline-block;margin:8px 10px 0;color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .ss-note{color:var(--muted);padding:10px} .ss-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} @media(max-width:600px){.nav-search{width:38px;height:38px}.ss-go{display:none}.site-search{padding:12px 0 14px}.site-search input{font-size:16px;padding:11px 16px}.ss-item{grid-template-columns:48px 1fr auto;gap:10px}.ss-thumb{width:48px;height:48px}} /* ☰ — shown under 980px (assets/nav.js toggles header.nav-open) */ .nav-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1.5px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;color:var(--white)} .nav-burger span,.nav-burger span::before,.nav-burger span::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s} .nav-burger span{position:relative} .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0} .nav-burger span::before{top:-6px}.nav-burger span::after{top:6px} header.nav-open .nav-burger span{background:transparent} header.nav-open .nav-burger span::before{transform:translateY(6px) rotate(45deg)} header.nav-open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)} .nav-burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ── hero (homepage) ──────────────────── */ .hero{position:relative;isolation:isolate;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:-1} .hero-bg img{width:100%;height:100%;object-fit:cover} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(31,31,31,.92) 25%,rgba(31,31,31,.62) 60%,rgba(31,31,31,.42))} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:90px;padding-bottom:150px} .hero h1{font-size:clamp(40px,5vw,68px);color:var(--white);max-width:14ch} .hero h1 em{font-style:normal;color:var(--gold)} .hero p{margin:26px 0 38px;max-width:52ch;color:var(--muted);font-size:18px} .hero-cta{display:flex;gap:16px;flex-wrap:wrap} .hero .eyebrow{display:block;margin-bottom:20px} .hero-card{position:relative;z-index:1;margin:0;justify-self:end;width:min(100%,480px);transform:rotate(2deg);border-radius:10px;overflow:hidden;border:8px solid #faf6ee;background:#faf6ee;box-shadow:0 40px 80px rgba(0,0,0,.7),0 10px 26px rgba(0,0,0,.5)} .hero-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} /* carousel (assets/hero.js swaps the photo for the slides curated in the portal) */ .hero-slides{position:relative;aspect-ratio:4/5;background:#2a2622} .hero-slides .slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .9s ease;color:var(--white)} .hero-slides .slide.on{opacity:1;z-index:1} .hero-slides .slide img{width:100%;height:100%;aspect-ratio:auto} .hero-arrow{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:rgba(250,246,238,.9);color:var(--char-deep);font-size:26px;line-height:1;padding:0 0 3px;cursor:pointer;opacity:0;transition:none;font-family:Georgia,serif} .hero-arrow.prev{left:12px}.hero-arrow.next{right:12px} .hero-arrow:hover{background:var(--gold)} .hero-card:hover .hero-arrow{opacity:1;transition:opacity .15s} .hero-arrow:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:2px} @media(hover:none){.hero-arrow{display:none}} @media(prefers-reduced-motion:reduce){.hero-slides .slide{transition:none}} /* ── page hero (interior pages) ───────── */ .page-hero{position:relative;isolation:isolate;overflow:hidden} .page-hero-bg{position:absolute;inset:0;z-index:-1} .page-hero-bg img{width:100%;height:100%;object-fit:cover} .page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,31,31,.88),rgba(31,31,31,.72))} .page-hero-inner{padding-top:74px;padding-bottom:110px;text-align:center} .page-hero h1{font-size:clamp(34px,4.2vw,56px)} .page-hero h1 em{font-style:normal;color:var(--gold)} .page-hero p{margin:18px auto 0;max-width:60ch;color:var(--muted);font-size:17px} .crumbs{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px} .crumbs a:hover{color:var(--gold)} .crumbs .sep{margin:0 10px;color:var(--gold)} .page-hero .wave-holder{position:absolute;left:0;right:0;bottom:0} /* ── wave ─────────────────────────────── */ .wave{display:block;width:100%;height:90px;margin-bottom:-1px} .wave.flip{transform:scaleY(-1);margin-bottom:0;margin-top:-1px} .hero .wave-holder{position:absolute;left:0;right:0;bottom:0} /* ── gold category band ───────────────── */ .gold-band{background:var(--gold);color:var(--on-gold);padding:10px 0 96px} .gold-band .sec-head{margin-bottom:44px} .gold-band h2{color:var(--on-gold)} .cats{display:grid;grid-template-columns:repeat(5,1fr);gap:22px} .cats-3{grid-template-columns:repeat(3,1fr)} .cat{text-align:center} .cat-img{aspect-ratio:.93;overflow:hidden;border-radius:6px;box-shadow:0 14px 30px -14px rgba(31,31,31,.5);background:var(--char)} .cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .cat:hover .cat-img img{transform:scale(1.07)} .cat .bevan{font-size:17.5px;margin-top:18px;color:var(--on-gold)} .cat small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(31,31,31,.78);margin-top:4px} /* ── marquee ──────────────────────────── */ .marquee{overflow:hidden;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--char-deep)} .marquee-track{display:flex;gap:60px;white-space:nowrap;animation:slide 28s linear infinite;width:max-content} .marquee-track span{font-family:'Bevan';font-size:44px;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)} .marquee-track span.solid{color:var(--gold);-webkit-text-stroke:0} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── sections ─────────────────────────── */ section{padding:100px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px;flex-wrap:wrap} .sec-head h2{font-size:clamp(30px,3.4vw,44px)} .sec-head p{max-width:46ch;color:var(--muted)} .sec-link{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--gold);padding-bottom:4px;white-space:nowrap} /* ── products ─────────────────────────── */ .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .prod{background:var(--char-card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .3s,box-shadow .3s} .prod:hover{transform:translateY(-5px);box-shadow:0 22px 44px -20px rgba(0,0,0,.7)} .prod-img{aspect-ratio:1;overflow:hidden;position:relative;background:#242424} .prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .prod:hover .prod-img img{transform:scale(1.06)} .tag{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--on-gold);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:200px} .tag.dark{background:var(--char-deep);color:var(--gold)} .prod-info{padding:20px 22px 24px} .prod-info h3{font-family:'Bevan';font-weight:400;font-size:15.5px;margin-bottom:6px;line-height:1.3} .prod-info .price{color:var(--gold);font-weight:600;font-size:16px} .prod-info small{display:block;font-size:13px;color:var(--muted-2);margin-top:6px} /* ── filter bar (shop) ────────────────── */ .shop-layout{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start} .shop-layout .prods{grid-template-columns:repeat(3,1fr)} .side-nav{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:20px} .side-nav .chip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .2s} .side-nav .chip:hover{color:var(--white);background:rgba(255,255,255,.07)} .side-nav .chip.on{background:var(--gold);color:var(--on-gold)} .side-nav .chip .n{font-size:10.5px;opacity:.55} .side-div{border-top:1px solid var(--line);margin:12px 12px 10px} .side-nav .count{margin:16px 12px 0;font-size:12px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase} .shop-note{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:40px} /* ── tiers ────────────────────────────── */ .tiers-sec{background:var(--char-deep)} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tier{border:1px solid var(--line);border-radius:10px;padding:44px 38px;background:var(--char);position:relative} .tier.mid{background:var(--gold);color:var(--on-gold);border-color:var(--gold)} .tier .num{font-family:'Bevan';font-size:14px;color:var(--gold)} .tier.mid .num{color:rgba(31,31,31,.65)} .tier h3{font-size:24px;margin:14px 0 8px} .tier .lead-time{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px} .tier.mid .lead-time{color:rgba(31,31,31,.78)} .tier p{font-size:15px;color:var(--muted);margin-bottom:22px} .tier.mid p{color:rgba(31,31,31,.8)} .tier ul{list-style:none;font-size:14.5px;display:grid;gap:9px} .tier li{padding-left:24px;position:relative} .tier li::before{content:"★";position:absolute;left:0;font-size:11px;top:4px;color:var(--gold)} .tier.mid li::before{color:var(--on-gold)} .tier .ribbon{position:absolute;top:-14px;right:26px;background:var(--char-deep);color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 16px;border-radius:200px;border:1px solid var(--gold)} a.tier{display:block;color:inherit;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s} a.tier:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.35)} /* ── builder teaser / option pickers ──── */ .builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .builder h2{font-size:clamp(34px,3.8vw,52px);color:var(--white)} .builder h2 em{font-style:normal;color:var(--gold)} .builder-copy>p{color:var(--muted);margin:22px 0 34px;max-width:50ch} .opt-block{margin-bottom:26px} .opt-block .opt-name{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px} .opt-block .opt-name b{color:var(--gold);font-weight:700} .swatches{display:flex;gap:10px;flex-wrap:wrap} .sw{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:transform .2s,border-color .2s} .sw:hover{transform:scale(1.12);border-color:var(--gold)} .sw.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(247,184,41,.3)} .chip{border:1.5px solid rgba(255,255,255,.3);border-radius:200px;padding:9px 20px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s} .chip:hover,.chip.on{background:var(--gold);color:var(--on-gold);border-color:var(--gold)} .builder-img{position:relative} .builder-img img{width:100%;aspect-ratio:.92;object-fit:cover;border-radius:10px;border:1px solid var(--line)} .builder-note{position:absolute;bottom:-20px;left:34px;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;border-radius:200px} /* ── heroes in action / live instagram ── */ .ig-live{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#151515;aspect-ratio:3/2} .ig-live iframe{position:absolute;top:-158px;left:0;width:100%;height:calc(100% + 300px);border:0;background:#151515} .ig-note{margin-top:22px;font-size:13px;color:var(--muted)} /* ── craft / inside-the-shop ──────────── */ .craft-sec{background:var(--char-deep);border-top:1px solid var(--line)} .craft-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:18px} .craft-grid figure{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line);margin:0} .craft-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .craft-grid figure:hover img{transform:scale(1.05)} .craft-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(transparent,rgba(31,31,31,.9));color:var(--white)} .craft-grid .tall{grid-row:span 2} .craft-grid .wide{grid-column:span 2} /* ── story (gold band) ────────────────── */ .story-band{background:var(--gold);color:var(--on-gold);position:relative;padding:90px 0} .story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center} .story-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px} .story-imgs img{aspect-ratio:.8;object-fit:cover;border-radius:8px;box-shadow:0 16px 34px -16px rgba(31,31,31,.55);width:100%;height:auto} .story-imgs img:last-child{margin-top:44px} .story-band .eyebrow{color:rgba(31,31,31,.78)} .story-band h2{font-size:clamp(30px,3.6vw,46px);margin:16px 0 24px;color:var(--on-gold)} .story-band .quote{font-size:19px;font-style:italic;font-weight:500;margin-bottom:20px;color:rgba(31,31,31,.85)} .story-band p{color:rgba(31,31,31,.8);margin-bottom:18px;max-width:58ch} /* ── reviews ──────────────────────────── */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .rev{background:var(--char-card);border:1px solid var(--line);border-radius:10px;padding:36px 34px} .stars{color:var(--gold);letter-spacing:4px;font-size:15px;margin-bottom:16px} .rev p{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden} .rev footer{margin-top:22px;font-size:14px;font-weight:600} .rev footer small{display:block;font-weight:500;color:var(--muted-2);letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-top:3px} .sample-note{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:26px} /* ── bulk ─────────────────────────────── */ .bulk{background:var(--char-deep);border-top:1px solid var(--line)} .bulk-grid{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .bulk h2{font-size:clamp(30px,3.4vw,44px);color:var(--white)} .bulk p{color:var(--muted);max-width:56ch;margin-top:14px} /* ── PDP (product detail) ─────────────── */ .pdp{padding:70px 0 100px} .pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start} .pdp-gallery{position:sticky;top:120px} .pdp-main{aspect-ratio:1;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#242424} .pdp-main img{width:100%;height:100%;object-fit:cover} .pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px} .pdp-thumbs .th{aspect-ratio:1;overflow:hidden;border-radius:6px;border:2px solid transparent;cursor:pointer;background:#242424} .pdp-thumbs .th.on{border-color:var(--gold)} .pdp-thumbs img{width:100%;height:100%;object-fit:cover} .pdp-info h1{font-size:clamp(30px,3.2vw,42px);line-height:1.15} .pdp-price{display:flex;align-items:baseline;gap:14px;margin:18px 0 6px} .pdp-price .now{font-size:30px;font-weight:600;color:var(--gold)} .pdp-price small{font-size:13px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase} .pdp-rating{font-size:13.5px;color:var(--muted);margin-bottom:24px} .pdp-rating .stars{display:inline;letter-spacing:2px;margin-right:8px} .pdp-desc{color:var(--muted);font-size:15.5px;margin-bottom:30px;max-width:56ch} .pdp-form{border:1px solid var(--line);border-radius:10px;padding:32px;background:var(--char-card)} .pdp-form .opt-block:last-of-type{margin-bottom:0} .text-in{width:100%;background:var(--char);border:1.5px solid rgba(255,255,255,.25);border-radius:8px;color:var(--white);padding:13px 16px;font-size:14.5px;font-family:'Jost';outline:none;transition:border-color .2s} .text-in:focus{border-color:var(--gold)} .pdp-form textarea.text-in{min-height:96px} select.text-in{padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23f7b829' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:11px} select.text-in option{background:var(--char-deep);color:var(--white)} .opt-name .opt-optional{color:var(--muted-2);font-weight:600} .opt-name .opt-sub{font-weight:500;letter-spacing:.1em;color:var(--muted-2);text-transform:none;font-size:11.5px} .opt-help{font-size:12.5px;line-height:1.55;color:var(--muted-2);margin-top:9px;letter-spacing:.01em} .opt-help em{color:var(--muted);font-style:italic} .sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px} .sw-item{display:flex;align-items:center;gap:9px;text-align:left;width:100%;background:transparent;font-family:'Jost';color:var(--white);border:1.5px solid rgba(255,255,255,.3);border-radius:200px;padding:7px 16px 7px 8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;cursor:pointer;transition:all .2s} .sw-item .dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)} .sw-item:hover{border-color:var(--gold)} .sw-item.on{border-color:var(--gold);background:rgba(247,184,41,.14)} .sw-item b{margin-left:auto;padding-left:8px;color:var(--gold);font-weight:700;white-space:nowrap} .chip b{font-weight:700} .chip.on b{color:var(--on-gold)} .pdp-note{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:16px;text-align:center} .size-table{width:100%;border-collapse:collapse;font-size:14px;margin:2px 0 6px} .size-table th,.size-table td{border-bottom:1px solid var(--line);padding:9px 12px 9px 0;text-align:left} .size-table th{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .size-table td:first-child{color:var(--white);font-weight:600} .pdp-details .dbody h5{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:20px 0 7px} .pdp-details .dbody p{margin-bottom:2px} .pdp-details .dbody b{color:var(--white)} .pdp-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap} .pdp-cta .btn{flex:1;justify-content:center;min-width:200px} .trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;text-align:center} .trust-row div{border:1px solid var(--line);border-radius:8px;padding:16px 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .trust-row b{display:block;color:var(--gold);font-size:16px;margin-bottom:4px} .pdp-details{margin-top:34px;display:grid;gap:10px} .pdp-details details{border:1px solid var(--line);border-radius:8px;background:var(--char-card)} .pdp-details summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;align-items:center} .pdp-details summary::after{content:"+";font-size:20px;color:var(--gold)} .pdp-details details[open] summary::after{content:"–"} .pdp-details .dbody{padding:0 22px 20px;color:var(--muted);font-size:14.5px} .pdp-details .dbody ul{padding-left:20px;display:grid;gap:6px} .chart-stack{display:grid;gap:18px;margin-top:4px} .chart-fig{margin:0} .chart-cap{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .chart-img{width:100%;display:block;border-radius:8px;border:1px solid var(--line);background:#242424} .chart-note{font-size:12.5px;line-height:1.55;color:var(--muted-2);margin-top:14px} .opt-help a,.chart-note a{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(247,184,41,.45)} .opt-help a:hover,.chart-note a:hover{border-bottom-color:var(--gold)} /* ── about page ───────────────────────── */ .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center} .about-grid .big-img{border-radius:10px;overflow:hidden;border:1px solid var(--line)} .about-grid .big-img img{width:100%;height:auto;object-fit:cover} .about-copy h2{font-size:clamp(30px,3.4vw,44px);margin:14px 0 22px} .about-copy p{color:var(--muted);margin-bottom:18px} .timeline{display:grid;gap:0;margin-top:20px} .tl{display:grid;grid-template-columns:90px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)} .tl:last-child{border-bottom:0} .tl .yr{font-family:'Bevan';color:var(--gold);font-size:20px} .tl h3{font-size:18px;margin-bottom:6px} .tl p{color:var(--muted);font-size:14.5px;max-width:64ch} .stat-band{background:var(--char-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center} .stats .bevan{font-size:42px;color:var(--gold)} .stats small{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-top:6px} /* ── forms (contact / bulk) ───────────── */ .form-card{border:1px solid var(--line);border-radius:12px;background:var(--char-card);padding:44px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .form-grid .full{grid-column:1/-1} .f-label{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px} textarea.text-in{min-height:140px;resize:vertical} select.text-in{appearance:none} .split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start} .info-list{display:grid;gap:26px;margin-top:34px} .info-list .item{display:flex;gap:18px;align-items:flex-start} .info-list .ico{width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .info-list b{display:block;font-size:15px} .info-list span{color:var(--muted);font-size:14.5px} /* ── footer ───────────────────────────── */ .foot{background:#191919;padding:80px 0 40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;padding-bottom:56px;border-bottom:1px solid var(--line)} .foot .logo img{height:84px} .foot p{font-size:14.5px;color:var(--muted-2);margin-top:16px;max-width:34ch} .foot h4{font-family:'Bevan';font-weight:400;font-size:15px;color:var(--gold);margin-bottom:18px} .foot ul{list-style:none;display:grid;gap:11px;font-size:14.5px;color:var(--muted)} .foot ul a:hover{color:var(--gold)} .news-in{display:flex;margin-top:6px;border:1.5px solid rgba(255,255,255,.3);border-radius:200px;overflow:hidden} .news-in input{flex:1;background:transparent;border:0;color:var(--white);padding:14px 20px;font-size:14px;outline:none;font-family:'Jost'} .news-in button{background:var(--gold);border:0;color:var(--on-gold);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:0 26px;cursor:pointer;border-radius:200px;margin:4px;font-family:'Jost'} .foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:32px;font-size:12.5px;color:var(--muted-2)} @media(max-width:980px){ .builder-grid,.story-grid,.pdp-grid,.about-grid,.split{grid-template-columns:1fr} .prods{grid-template-columns:repeat(2,1fr)} .tiers,.rev-grid{grid-template-columns:1fr} .cats{grid-template-columns:repeat(2,1fr)} .foot-grid,.form-grid{grid-template-columns:1fr 1fr} .nav-burger{display:inline-flex} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 32px 18px;background:rgba(31,31,31,.98);border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(0,0,0,.5);font-size:15px} .nav-links a{padding:14px 0;border-bottom:1px solid var(--line)} .nav-links a:last-child{border-bottom:0} .nav-links a::after{display:none} header.nav-open .nav-links{display:flex} .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:72px;padding-bottom:140px} .hero-card{justify-self:center;width:min(100%,400px);transform:rotate(1.5deg)} .craft-grid{grid-template-columns:repeat(2,1fr)} .shop-layout{grid-template-columns:1fr;gap:26px} .shop-layout .prods{grid-template-columns:repeat(2,1fr)} .side-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;border-right:0;padding-right:0} .side-nav .chip{border:1.5px solid rgba(255,255,255,.3);border-radius:200px;padding:7px 14px} .side-nav .chip.on{border-color:var(--gold)} .side-div,.side-nav .count{display:none} /* narrow widths: the IG embed insets its grid, so skip the crop and show the whole card */ .ig-live{aspect-ratio:auto;background:#fff} .ig-live iframe{position:static;display:block;width:100%;height:calc(66.7vw + 190px)} .stats{grid-template-columns:repeat(2,1fr)} .pdp-gallery{position:static} .trust-row{grid-template-columns:1fr} .form-card{padding:30px} } /* ── legal pages (terms / privacy / shipping / returns / gift certs) ── */ .legal{max-width:860px;margin:0 auto;padding:64px 32px 110px} .legal .updated{font-size:14px;color:var(--muted-2);margin-bottom:34px} .legal h2{font-size:20px;margin:46px 0 12px} .legal h3{font-size:16px;margin:26px 0 8px} .legal p,.legal li{color:var(--muted);font-size:16px} .legal p{margin:0 0 14px} .legal ul{margin:0 0 14px 22px} .legal li{margin-bottom:6px} .legal a:not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px} .legal .todo{color:var(--gold);font-weight:600} .legal .callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--char-card);padding:16px 22px;border-radius:8px;margin:20px 0 30px} .legal .callout p:last-child{margin-bottom:0} .foot-legal{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:26px;font-size:13.5px;color:var(--muted)} .foot-legal a:hover{color:var(--gold)} /* ---------- cart + checkout (Phase 2) ---------- */ .cart-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:16px;background:var(--char-card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:15px} .cart-toast .go{background:var(--gold);color:var(--on-gold);font-weight:700;padding:7px 14px;border-radius:7px} .cart-toast .go:hover{background:var(--gold-deep)} .cart-toast button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 4px} .cart-toast button:hover{color:#fff} .co{max-width:1080px;margin:0 auto;padding:34px 22px 70px} .co h1{margin:0 0 6px} .co .sub{color:var(--muted);margin:0 0 26px} .co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start} /* phones */ @media(max-width:600px){ .wrap{padding-left:20px;padding-right:20px} .nav{height:72px} .logo img{height:44px} .logo-word{display:none} .nav-icons{gap:10px} .cart-pill{padding:8px 14px} .account-link{font-size:12px} .nav-links{padding:4px 20px 14px} .hero-inner{gap:36px;padding-top:56px;padding-bottom:120px} .hero p{font-size:16.5px;margin:20px 0 30px} .hero-card{transform:rotate(1deg)} .cats{gap:14px} .cats-3,.stats{grid-template-columns:1fr;gap:18px} .prods{grid-template-columns:1fr 1fr;gap:14px} .foot-grid{grid-template-columns:1fr;gap:36px} .foot-grid>*{min-width:0} .news-in input{min-width:0;width:100%} .form-grid{grid-template-columns:1fr} section{padding:70px 0} .marquee-track span{font-size:34px} } @media(max-width:860px){.co-grid{grid-template-columns:1fr}} .co-card{background:var(--char-card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:18px} .co-card h2{font-size:17px;margin:0 0 14px;letter-spacing:.02em} .co-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start} .co-item:last-child{border-bottom:0} .co-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#2a2a2a} .co-item .ph{width:64px;height:64px;border-radius:8px;background:#2a2a2a} .co-item .t{font-weight:600} .co-item .opts{font-size:13px;color:var(--muted-2);margin-top:3px;line-height:1.5} /* per-option breakdown (OptionLines) — mirrors the PDP configurator's list */ .co-opts{list-style:none;margin:4px 0 0;padding:0;font-size:13px;color:var(--muted-2);max-width:340px} .co-opts li{display:flex;justify-content:space-between;gap:14px;padding:1.5px 0;line-height:1.45} .co-opts b{color:var(--muted);font-weight:600} .co-opts em{font-style:normal;color:var(--gold);white-space:nowrap} .co-item .qty{display:flex;align-items:center;gap:8px;margin-top:8px} .co-item .qty button:not(.rm){width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:none;color:#fff;cursor:pointer} .co-item .qty button:not(.rm):hover{border-color:var(--gold)} .co-item .rm{background:none;border:0;color:var(--muted-2);cursor:pointer;font:inherit;font-size:13px;padding:0;margin-left:6px;text-decoration:underline} .co-item .rm:hover{color:#fff} .co-item .amt{font-weight:700;white-space:nowrap} .co-form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .co-form .full{grid-column:1/-1} .co-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px} .co-form input,.co-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;background:#2b2b2b;border:1px solid var(--line);border-radius:8px;color:#fff;padding:10px 12px} .co-form input:focus,.co-form textarea:focus{outline:none;border-color:var(--gold)} /* accepted-card badges, right of the "Card number" label */ .co-cardlbl{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:5px} .co-form .co-cardlbl label{margin-bottom:0} .co-brands{display:flex;gap:5px;flex:0 0 auto} .co-brands svg{display:block;width:33px;height:22px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:opacity .18s} .co-brands svg.dim{opacity:.25} .co-tot{list-style:none;margin:0;padding:0} .co-tot li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px} .co-tot li:last-child{border-bottom:0;font-weight:800;font-size:17px;padding-top:12px} .co-tot li.co-disc{color:var(--gold)} /* Discount-code box in the In Your Bag sidebar */ .co-promo{margin:10px 0 4px} .co-promo-row{display:flex;gap:8px} .co-promo-row input{flex:1;min-width:0;font:inherit;font-size:14px;background:#2b2b2b;border:1px solid var(--line);border-radius:8px;color:#fff;padding:9px 12px;text-transform:uppercase} .co-promo-row input::placeholder{text-transform:none} .co-promo-row input:focus{outline:none;border-color:var(--gold)} .co-promo-row button{background:none;color:var(--gold);border:1px solid var(--gold);border-radius:8px;font:inherit;font-weight:700;font-size:14px;padding:9px 16px;cursor:pointer} .co-promo-row button:hover{background:var(--gold);color:var(--on-gold)} .co-promo-row button:disabled{opacity:.5;cursor:default} .co-promo .co-err{margin:8px 0 0} .co-pay{width:100%;background:var(--gold);color:var(--on-gold);border:0;border-radius:9px;font:inherit;font-weight:800;font-size:16px;padding:13px 18px;cursor:pointer;margin-top:16px} .co-pay:hover{background:var(--gold-deep)} .co-pay:disabled{opacity:.55;cursor:default} .co-back{width:100%;background:none;color:var(--muted);border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px;padding:10px 18px;cursor:pointer;margin-top:10px} .co-back:hover{border-color:var(--gold);color:#fff} .co-back:disabled{opacity:.55;cursor:default} .co-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);margin:14px 0 12px;cursor:pointer} .co-check input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer} .co-err{background:rgba(220,80,60,.12);border:1px solid rgba(220,80,60,.5);border-radius:8px;padding:10px 14px;margin:12px 0;font-size:14px} .co-signin{font-size:13.5px;color:var(--muted);margin:2px 0 4px;line-height:1.55} .co-signin b,.co-signin a{color:var(--gold)} .co-link{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--gold);cursor:pointer;text-decoration:underline} .co-link:hover{color:var(--white)} .co-link:disabled{color:var(--muted-2);cursor:default;text-decoration:none} .co-hint{font-size:13.5px;color:var(--muted);margin:6px 0 0} .co-sendto{margin:14px 0 4px} .co-welcome{border:1px solid rgba(247,184,41,.45);background:rgba(247,184,41,.07);border-radius:10px;padding:14px 16px;margin:12px 0 4px} /* USPS did-you-mean panel on Delivery (address_check bounce from /session) */ .co-addr{border:1px solid rgba(247,184,41,.45);background:rgba(247,184,41,.07);border-radius:10px;padding:14px 16px;margin:12px 0 4px;font-size:14px} .co-addr p{margin:0 0 8px} .co-addr .co-pay{margin-top:8px} .co-addr .co-signin{margin:10px 0 0;text-align:center} .co-addr-sug{border:1px solid var(--line);border-radius:8px;padding:10px 14px;line-height:1.6;font-weight:600} /* Google Places dropdown under the street-address field */ .co-ac-wrap{position:relative} .co-ac{position:absolute;top:100%;left:0;right:0;z-index:40;margin:4px 0 0;padding:4px 0;list-style:none;background:#2b2b2b;border:1px solid var(--gold);border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.45);max-height:262px;overflow:auto} .co-ac li{padding:9px 12px;font-size:14px;color:#fff;cursor:pointer} .co-ac li b{font-weight:700} .co-ac li span{color:var(--muted)} .co-ac li:hover,.co-ac li.hi{background:rgba(247,184,41,.14)} .co-ac .co-ac-goog{font-size:11px;color:var(--muted);text-align:right;padding:5px 12px 3px;cursor:default} .co-ac .co-ac-goog:hover{background:transparent} .co-welcome .co-pay{margin-top:8px} .co-welcome .co-signin:last-child{margin-bottom:0} /* "Continue with Google" — Google's white button spec, used on checkout's welcome-back panel and the /account sign-in card */ .google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;margin-top:10px;border:1px solid #dadce0;border-radius:8px;background:#fff;color:#1f1f1f;font:inherit;font-size:15px;font-weight:600;cursor:pointer} .google-btn:hover{background:#f5f5f5} .google-btn:disabled{opacity:.6;cursor:default} .google-btn svg{flex:0 0 auto} .co-note{font-size:12.5px;color:var(--muted-2);margin-top:12px;line-height:1.5} .co-agree{font-size:12.5px;color:var(--muted-2);margin:14px 0 10px;line-height:1.5} .co-agree a{color:inherit;text-decoration:underline} .co-done{max-width:660px;margin:60px auto;text-align:center} .co-done .ok{font-size:44px} .co-empty{max-width:660px;margin:70px auto;text-align:center} /* ---------- checkout accordion (Delivery → Payment → Review) ---------- */ .co-sec{background:var(--char-card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:18px;opacity:.55;transition:opacity .2s} .co-sec.active{opacity:1} .co-sec:has(.co-recap){opacity:1} .co-sec .hd,.co-bag .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .co-sec .hd h2,.co-bag .hd h2{margin:0} .ed{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:13.5px;text-decoration:underline;padding:0} .ed:hover{color:var(--gold)} .ed:disabled{opacity:.5;cursor:default} .co-recap{font-size:14px;color:var(--muted);line-height:1.7} .co-hide{display:none} .co-sec .co-pay{margin-top:14px} .co-minis{border-top:1px solid var(--line);margin-top:14px;padding-top:4px} .co-mini{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center} .co-mini:last-child{border-bottom:0} .co-mini img,.co-mini .ph{width:48px;height:48px;object-fit:cover;border-radius:7px;background:#2a2a2a} .co-mini .t{font-weight:600;font-size:14px} .co-mini .opts{font-size:12.5px;color:var(--muted-2)} /* ---------- sidebar cart drawer (assets/cart-pill.js) ---------- */ .cd-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s} .cd-scrim.open{opacity:1;pointer-events:auto} .cd{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--char-deep);border-left:1px solid var(--line);z-index:91;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .28s ease;box-shadow:-14px 0 40px rgba(0,0,0,.4)} .cd.open{transform:none} .cd-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)} .cd-head h2{font-size:21px;color:var(--gold)} .cd-x{background:none;border:0;color:var(--muted);font-size:19px;cursor:pointer;padding:4px 8px;border-radius:6px} .cd-x:hover{color:#fff} .cd-items{flex:1;overflow-y:auto;padding:8px 24px} .cd-empty{padding:30px 0;color:var(--muted);line-height:1.7} .cd-empty a{color:var(--gold)} .cd-foot{border-top:1px solid var(--line);padding:18px 24px 22px} .cd-sub{display:flex;justify-content:space-between;font-size:16px} .cd-note{font-size:12.5px;color:var(--muted-2);margin:4px 0 14px} .cd-go{display:block;text-align:center;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:16px;padding:13px;border-radius:9px} .cd-go:hover{background:var(--gold-deep)} /* ---------- account (src/AccountPage.tsx; nav link injected by cart-pill.js) ---------- */ .account-link{color:var(--gold);padding:6px 2px;text-transform:uppercase;letter-spacing:.1em} .account-link:hover{color:var(--white)} .acct{max-width:760px;margin:0 auto;padding:34px 22px 70px} .acct h1{margin:0 0 22px} .acct-card{background:var(--char-card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:20px} .acct-card h2{font-size:17px;margin:0 0 12px;letter-spacing:.02em} .acct-card p{margin:0 0 12px;line-height:1.6} .acct-dim{color:var(--muted)} .acct-dim a{color:var(--gold)} .acct-ok{color:var(--gold)} .acct-err{background:rgba(220,80,60,.12);border:1px solid rgba(220,80,60,.5);border-radius:8px;padding:10px 14px;margin:12px 0;font-size:14px} .acct-form{display:flex;gap:10px;margin-top:16px} .acct-form input{flex:1;font:inherit;font-size:15px;background:#2b2b2b;border:1px solid var(--line);border-radius:8px;color:#fff;padding:10px 12px} .acct-form input:focus{outline:none;border-color:var(--gold)} @media(max-width:560px){.acct-form{flex-direction:column}} .acct-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;font-size:14.5px;color:var(--muted)} .acct-order{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px} .acct-order-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .acct-order-right{display:flex;align-items:center;gap:12px} .acct-chip{border:1.5px solid var(--gold);color:var(--gold);border-radius:200px;font-size:12px;font-weight:600;letter-spacing:.05em;padding:3px 11px;white-space:nowrap} .acct-order ul{list-style:none;margin:10px 0 0;padding:0} .acct-order li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted-2)} .acct-balance{margin:10px 0 0;font-size:13.5px;color:var(--gold)} /* order cards are links into the detail view */ a.acct-order{display:block;color:inherit;text-decoration:none;transition:border-color .15s} a.acct-order:hover{border-color:var(--gold)} .acct-more{display:block;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gold)} .acct-back{background:none;border:0;color:var(--gold);font:inherit;font-size:14px;font-weight:600;letter-spacing:.04em;padding:0;margin:-6px 0 16px;cursor:pointer} .acct-back:hover{text-decoration:underline} /* four-step progress track on the order detail */ .acct-track{list-style:none;display:flex;margin:22px 0 0;padding:0;counter-reset:step} .acct-track li{flex:1;position:relative;text-align:center;font-size:12.5px;color:var(--muted-2);letter-spacing:.03em} .acct-track li::before{content:"";position:absolute;top:7px;left:-50%;right:50%;height:2px;background:var(--line)} .acct-track li:first-child::before{display:none} .acct-track li.done::before,.acct-track li.now::before{background:var(--gold)} .acct-track .dot{position:relative;display:block;width:16px;height:16px;margin:0 auto 8px;border-radius:50%;background:var(--char-card);border:2px solid var(--line)} .acct-track li.done .dot{background:var(--gold);border-color:var(--gold)} .acct-track li.now .dot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(196,163,90,.25)} .acct-track li.now .lbl{color:#fff;font-weight:700} .acct-track li.done .lbl{color:var(--muted)} .acct-track .lbl small{display:block;font-size:11px;font-weight:500;color:var(--gold);margin-top:2px} @media(max-width:480px){.acct-track li{font-size:11px}} .acct-tot{margin-top:14px;border-top:1px solid var(--line);padding-top:6px} .acct-tot li:last-child{font-weight:400;font-size:15px;padding-top:7px;color:var(--muted)} .acct-tot li.grand{font-weight:800;font-size:17px;padding-top:12px} .acct-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:560px){.acct-cols{grid-template-columns:1fr}} .acct-card address{font-style:normal;line-height:1.55;color:var(--muted-2);font-size:14.5px} .acct-card address span{display:block} .acct-card address span:first-child{color:#fff;font-weight:600} .acct-note{white-space:pre-wrap;color:var(--muted-2);font-size:14.5px;border-left:2px solid var(--gold);padding-left:12px} .acct .co-item{grid-template-columns:56px 1fr auto} .acct .co-item img,.acct .co-item .ph{width:56px;height:56px} .acct .co-item .t a{color:#fff;text-decoration:none} .acct .co-item .t a:hover{color:var(--gold)} .acct-profile{margin-top:4px} /* `.co-form label` / `.co-form input` outrank a bare `.acct-check` (class+type beats class), so these need the parent in the selector: the label must stay flex (not block, or the gap vanishes and text touches the box) and the checkbox must shed the dark-text-box input styling. */ .co-form label.acct-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);margin-bottom:0;cursor:pointer} .co-form .acct-check input{accent-color:var(--gold);width:16px;height:16px;flex:0 0 auto;padding:0;margin:0;background:transparent;border:0;border-radius:0;cursor:pointer} .acct-save{display:flex;align-items:center;gap:14px}