@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap"); /* ═══════════════════════════════════════════════════════════ PATHWAY — the design's own stylesheet. Generated by scripts/design-to-theme-css.py from /Users/tony/Code/astrocart-ptb-rig/design/home.html. The rules below are the design's, verbatim; only the :root block is rewritten (tokens read --ac-* with the design's value as fallback). Edit the design or this file — never paste another theme's base underneath it. ═══════════════════════════════════════════════════════════ */ /* ═══ DESIGN TOKENS ═══ Each token READS its platform equivalent and falls back to the design's own value, so the Design panel restyles the theme and an unset token still renders exactly as designed. Never define --ac-* from these (resolution cycle — both sides go invalid). */ :root { --ink: var(--ac-color-text, #2a2115); --ink-soft: var(--ac-color-text-secondary, #57493a); --muted: var(--ac-color-text-muted, #95886f); --accent: var(--ac-color-primary, #b98a3f); --accent-hi: #d8ab5f; --sage: #7a8a6e; --sale: var(--ac-color-sale, #a4553a); --bg: var(--ac-color-background, #f6efe4); --surface: #ece2cf; --surface-sand: #e3d5ba; --surface-dark: #58674f; --surface-deeper: #46533e; --surface-deep: #65745b; --hero-dark: #3b4633; --hero-deeper: #2d3627; --on-dark: #f6efe4; --on-dark-body: #eae4d8; --on-dark-soft: #e2dccd; --on-dark-muted: #bab29e; --border: var(--ac-color-border, rgba(42,33,21,.12)); --border-dark: rgba(246,239,228,.14); --font-heading: var(--ac-font-heading, 'Marcellus',serif); --font-body: var(--ac-font-body, 'DM Sans',sans-serif); --radius-card: var(--ac-border-radius-card, 16px); --radius-image: var(--ac-border-radius-image, 14px); --radius-button: var(--ac-border-radius-button, 999px); --radius-input: var(--ac-border-radius-input, 999px); --shadow-card: 0 20px 40px -20px rgba(42,33,21,.24); --shadow-raised: 0 40px 80px -20px rgba(0,0,0,.5); --max-width: var(--container-width, 1360px); --gutter: 28px; /* aliases for platform-chrome rules not yet rebuilt from the design — see PLATFORM CHROME at the foot of this file */ --ink-muted: var(--ink-soft); --line-soft: var(--border); --r-card: var(--radius-card); --r-btn: var(--radius-button); --r-input: var(--radius-input); --container: var(--max-width); --font: var(--font-body); --inv-text: var(--on-dark); --star: var(--accent); } /* PATH WAY TO BALANCE — Astrocart theme Sage-green surfaces (moss hero) · warm cream paper · antique-gold accent. Two Google Fonts. No JS. */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none;transition:color .15s} a:hover{color:var(--accent)} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4,h5,h6{margin:0;font-weight:400} p{text-wrap:pretty} summary::-webkit-details-marker{display:none} summary{list-style:none;cursor:pointer} .wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)} .kicker{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px} .kicker::before{content:"";width:20px;height:1px;background:currentColor} .kicker.plain::before{content:none} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ico{display:inline-grid;place-items:center;flex-shrink:0} /* fixed-ratio image slot */ .ph{position:relative;overflow:hidden;background:var(--surface-sand)} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ── band: topbar ── */ .topbar{background:var(--surface-dark);color:var(--on-dark)} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:9px;padding-bottom:9px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase} .topbar .l,.topbar .r{display:flex;gap:26px;align-items:center} .topbar .l b{color:var(--accent-hi);font-weight:500;display:inline-flex;align-items:center;gap:8px} .topbar .r a{color:var(--on-dark);opacity:.82} .topbar .r a:hover{opacity:1;color:var(--accent-hi)} /* ── band: header ── */ .site-head{background:var(--bg);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--border)} .hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 0;gap:24px} .hdr-l,.hdr-r{display:flex;align-items:center;gap:24px} .hdr-r{justify-content:flex-end;font-size:13px} .search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);padding:9px 14px;width:100%;max-width:300px;border-radius:var(--radius-input);transition:border-color .2s} .search:focus-within{border-color:var(--ink)} .search svg{flex-shrink:0;color:var(--ink-soft)} .search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);min-width:0} .search input::placeholder{color:var(--muted)} .logo{text-align:center;line-height:1;display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink)} .logo:hover{color:var(--ink)} .logo .mark{width:36px;height:36px;display:grid;place-items:center;color:var(--accent)} .logo .brand{font-family:var(--font-heading);font-size:22px;letter-spacing:.18em;text-transform:uppercase} .logo .brand em{font-style:italic;letter-spacing:0;color:var(--accent);text-transform:none;font-size:20px} .logo small{font-size:9px;font-weight:500;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-top:2px} .cart-chip{border:1px solid var(--ink);border-radius:var(--radius-button);padding:8px 16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:all .18s} .cart-chip:hover{background:var(--ink);color:var(--on-dark)} .cart-chip::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%} .msearch{display:none;align-items:center;gap:10px;border-top:1px solid var(--border);background:var(--bg);padding:11px var(--gutter);color:var(--muted)} .msearch input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);min-width:0} .msearch input::placeholder{color:var(--muted)} .mainnav{background:var(--bg);border-top:1px solid var(--border)} .mainnav ul{display:flex;gap:4px;justify-content:center;flex-wrap:wrap} .mainnav a{display:block;padding:14px 18px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;border-bottom:2px solid transparent} .mainnav a.is-active{border-bottom-color:var(--accent);color:var(--accent)} .mainnav a.is-feature{color:var(--accent)} .mmenu{display:none} .mmenu__btn{width:40px;height:40px;display:grid;place-items:center;color:var(--ink)} .mmenu__panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow-raised);z-index:70;padding:6px 0 18px} .mmenu__panel a{display:block;padding:14px var(--gutter);font-family:var(--font-heading);font-size:21px;border-bottom:1px solid var(--border)} .mmenu__panel a em{font-style:italic;color:var(--accent)} .mmenu__foot{padding:18px var(--gutter) 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.9} /* buttons */ .btn{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:15px 26px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid currentColor;border-radius:var(--radius-button);transition:all .2s;text-align:center} .btn-gold{background:var(--accent);color:var(--ink);border-color:var(--accent)} .btn-gold:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--ink)} .btn-ghost{color:var(--on-dark)} .btn-ghost:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)} .btn-dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink)} .btn-dark:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} .btn-line{color:var(--ink);border-color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--on-dark)} .btn-block{width:100%} .btn-lg{padding:18px 30px} .btn .arrow{transition:transform .2s} .btn:hover .arrow{transform:translateX(3px)} .more{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:13px 22px;border:1px solid currentColor;border-radius:var(--radius-button);display:inline-flex;gap:10px;align-items:center;white-space:nowrap;transition:all .18s} .more:hover{background:var(--ink);color:var(--on-dark);border-color:var(--ink)} .tlink{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;color:var(--accent)} /* badges */ .badge{position:absolute;top:14px;left:14px;background:var(--surface-dark);color:var(--on-dark);padding:5px 11px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;z-index:2;border-radius:var(--radius-button)} .badge.is-gold{background:var(--accent);color:var(--ink)} .badge.is-sage{background:var(--sage);color:var(--on-dark)} .badge.is-sale{background:var(--sale);color:var(--on-dark)} /* ── band: usp-ticker — the theme's single ambient effect ── */ .ticker{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;overflow:hidden} .ticker__track{display:flex;width:max-content;gap:52px;animation:tick 45s linear infinite;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)} .ticker__track span{display:inline-flex;align-items:center;gap:14px;white-space:nowrap} .ticker__track span::before{content:"✦";color:var(--accent);font-size:10px} @keyframes tick{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker__track{animation:none}} /* section shells */ .sec{padding:100px 0;background:var(--bg)} .sec.on-surface{background:var(--surface)} .sec.on-dark{background:var(--surface-dark);color:var(--on-dark)} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:24px;flex-wrap:wrap} .sec-head .kicker{margin-bottom:14px} .sec-head h2{font-family:var(--font-heading);font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:-.01em;max-width:780px} .sec-head h2 em{font-style:italic;color:var(--accent)} .sec.on-dark .sec-head h2 em,.sec.on-dark .kicker{color:var(--accent-hi)} .sec.on-dark .more{color:var(--on-dark);border-color:var(--border-dark)} .sec.on-dark .more:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} /* ── band: hero-split ── */ .hero{background:var(--hero-dark);color:var(--on-dark);overflow:hidden;position:relative} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img{object-position:68% 50%} .hero__bg::before{content:"";position:absolute;inset:0;background:var(--hero-dark);opacity:.38} .hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--hero-dark) 96%,transparent) 0%,color-mix(in srgb,var(--hero-dark) 86%,transparent) 34%,color-mix(in srgb,var(--hero-dark) 38%,transparent) 60%,color-mix(in srgb,var(--hero-dark) 6%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--hero-deeper) 60%,transparent),transparent 42%)} .hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;min-height:680px} .hero__copy{padding:80px 60px 80px max(var(--gutter),calc((100vw - var(--max-width))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:space-between;position:relative} .hero__copy::before{content:"";position:absolute;inset:0 0 0 -200px;background:radial-gradient(ellipse at 30% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),radial-gradient(ellipse at 70% 80%,color-mix(in srgb,var(--sage) 16%,transparent),transparent 65%);pointer-events:none} .hero__copy>*{position:relative} .eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-hi);display:flex;align-items:center;gap:14px;margin-bottom:28px} .eyebrow::before{content:"";width:30px;height:1px;background:var(--accent)} .eyebrow b{color:var(--on-dark);font-weight:600} .hero h1{font-family:var(--font-heading);font-size:clamp(48px,6.4vw,92px);line-height:1;letter-spacing:-.01em;margin-bottom:28px;color:var(--on-dark)} .hero h1 em{font-style:italic;color:var(--accent-hi)} .hero__sub{font-size:17px;line-height:1.6;color:var(--on-dark-body);margin:0 0 38px;max-width:480px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px} .hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:26px;border-top:1px solid var(--border-dark)} .hero__stats .k{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-muted);display:block;margin-bottom:4px} .hero__stats .v{font-family:var(--font-heading);font-size:24px;color:var(--on-dark)} .hero__stats .v em{font-style:italic;color:var(--accent-hi)} .hero__shot{position:relative} .hero__card{position:absolute;left:32px;bottom:32px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);color:var(--ink);padding:18px 22px 18px 18px;border-radius:var(--radius-card);max-width:340px;z-index:3;display:flex;gap:14px;align-items:center} .hero__card:hover{color:var(--ink)} .hero__card .ph{width:60px;height:60px;border-radius:8px;flex-shrink:0} .hero__card .k{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:3px} .hero__card .name{font-family:var(--font-heading);font-size:19px;line-height:1.1} .hero__card .meta{font-size:12px;color:var(--ink-soft);margin-top:3px} /* ── band: category-cards ── */ .intents{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .intent{position:relative;aspect-ratio:3/4;border-radius:var(--radius-image);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:var(--on-dark);background:var(--surface-dark);transition:transform .25s} .intent:hover{transform:translateY(-4px);color:var(--on-dark)} .intent .ph{position:absolute;inset:0;z-index:0} .intent::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-dark) 10%,transparent) 40%,color-mix(in srgb,var(--surface-deeper) 85%,transparent));z-index:1} .intent>*:not(.ph){position:relative;z-index:2} .intent .sym{font-family:var(--font-heading);font-size:26px;color:var(--accent-hi);margin-bottom:auto} .intent h3{font-family:var(--font-heading);font-size:21px;line-height:1.1;margin-bottom:4px} .intent small{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-body)} /* ── product card (one design, used everywhere) ── */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .pgrid.cols-3{grid-template-columns:repeat(3,1fr)} .pcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .pcard__shot{display:block;aspect-ratio:4/5;position:relative} .pcard__shot .ph{position:absolute;inset:0} .pcard__shot .ph img{transition:transform .5s} .pcard:hover .pcard__shot .ph img{transform:scale(1.05)} .pcard__quick{position:absolute;left:12px;right:12px;bottom:12px;background:color-mix(in srgb,var(--surface-dark) 92%,transparent);color:var(--on-dark);padding:12px;text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-radius:var(--radius-button);opacity:0;transform:translateY(8px);transition:all .22s;z-index:3} .pcard:hover .pcard__quick{opacity:1;transform:translateY(0)} .pcard__wish{position:absolute;top:14px;right:14px;width:34px;height:34px;background:color-mix(in srgb,var(--bg) 92%,transparent);border-radius:50%;display:grid;place-items:center;color:var(--ink);z-index:3;transition:all .18s} .pcard__wish:hover{background:var(--accent);color:var(--ink)} .pcard__body{padding:22px 22px 20px;flex:1;display:flex;flex-direction:column;gap:8px} .pcard__tag{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)} .pcard h3{font-family:var(--font-heading);font-size:21px;line-height:1.12} .pcard h3 em{font-style:italic} .pcard__specs{font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;flex-wrap:wrap} .pcard__specs span::after{content:"·";margin-left:8px;color:var(--accent)} .pcard__specs span:last-child::after{content:none} .pcard__stars{font-size:11px;color:var(--muted)} .pcard__stars i{color:var(--accent);font-style:normal;letter-spacing:.04em} .pcard__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border)} .pcard__price{font-family:var(--font-heading);font-size:22px} .pcard__price .was{font-family:var(--font-body);font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:8px} .pcard__price.is-sale{color:var(--sale)} .pcard__add{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:8px 14px;border:1px solid currentColor;border-radius:var(--radius-button);transition:all .15s} .pcard:hover .pcard__add,.pcard__add:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)} /* ── band: app-showcase ── */ .app{background:linear-gradient(165deg,var(--ink) 0%,var(--surface-deep) 100%);color:var(--on-dark);position:relative;overflow:hidden} .app::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 12% 18%,color-mix(in srgb,var(--accent-hi) 18%,transparent),transparent 55%),radial-gradient(ellipse at 80% 80%,color-mix(in srgb,var(--sage) 18%,transparent),transparent 60%);pointer-events:none} .app__in{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding:110px 0} .app .kicker{color:var(--accent-hi);margin-bottom:18px} .app h2{font-family:var(--font-heading);font-size:clamp(38px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;margin-bottom:22px} .app h2 em{font-style:italic;color:var(--accent-hi)} .app__lede{font-size:17px;line-height:1.65;color:var(--on-dark-body);margin:0 0 34px;max-width:520px} .feats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 26px;margin-bottom:40px} .feat{display:flex;gap:14px;align-items:flex-start} .feat .ico{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent-hi) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-hi) 30%,transparent);color:var(--accent-hi)} .feat strong{display:block;font-family:var(--font-heading);font-size:19px;font-weight:400;margin-bottom:4px} .feat span{font-size:13.5px;color:var(--on-dark-soft);line-height:1.55} .app__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .pill-note{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;background:color-mix(in srgb,var(--on-dark) 8%,transparent);border:1px solid var(--border-dark)} .pill-note b{font-family:var(--font-heading);font-weight:400;font-size:17px;color:var(--accent-hi)} .pill-note small{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft)} .app__visual{position:relative;aspect-ratio:4/5;max-width:560px;width:100%;margin-left:auto} .orbit{position:absolute;border:1px dashed color-mix(in srgb,var(--accent-hi) 28%,transparent);border-radius:50%;pointer-events:none} .orbit.o1{inset:8%}.orbit.o2{inset:-2%} .gem{position:absolute;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-raised);outline:2px solid color-mix(in srgb,var(--accent-hi) 25%,transparent)} .gem.g1{width:110px;height:110px;top:4%;left:4%} .gem.g2{width:90px;height:90px;right:2%;top:16%;z-index:3} .gem.g3{width:120px;height:120px;bottom:4%;right:8%;z-index:3} .phone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52%;aspect-ratio:9/19.5;background:var(--surface-deeper);border-radius:44px;padding:10px;box-shadow:var(--shadow-raised),0 0 0 2px color-mix(in srgb,var(--accent-hi) 22%,transparent);z-index:2} .phone__screen{width:100%;height:100%;background:linear-gradient(170deg,var(--surface-deep),var(--surface-deeper) 60%,var(--ink));border-radius:36px;overflow:hidden;color:var(--on-dark);padding:48px 20px 20px;display:flex;flex-direction:column;gap:12px} .phone__k{font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi)} .phone__h{font-family:var(--font-heading);font-size:22px;line-height:1.15;margin-bottom:4px} .phone__h em{font-style:italic;color:var(--accent-hi)} .ptile{background:color-mix(in srgb,var(--on-dark) 7%,transparent);border:1px solid var(--border-dark);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px} .ptile.is-hi{background:linear-gradient(140deg,color-mix(in srgb,var(--accent-hi) 22%,transparent),color-mix(in srgb,var(--surface-deep) 40%,transparent));border-color:color-mix(in srgb,var(--accent-hi) 30%,transparent)} .ptile .dot{width:38px;height:38px;border-radius:50%;background:var(--accent);flex-shrink:0;display:grid;place-items:center;color:var(--ink)} .ptile b{display:block;font-family:var(--font-heading);font-weight:400;font-size:14px;line-height:1.15} .ptile small{font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)} .ptiles{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ptiles .ptile{flex-direction:column;align-items:flex-start;gap:4px} /* ── band: events ── */ .circles{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:stretch} .cbig{position:relative;border-radius:18px;overflow:hidden;min-height:520px;color:var(--on-dark);display:flex;flex-direction:column;justify-content:flex-end;padding:40px;background:var(--surface-dark)} .cbig:hover{color:var(--on-dark)} .cbig .ph{position:absolute;inset:0;z-index:0} .cbig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--surface-deeper) 88%,transparent));z-index:1} .cbig>*:not(.ph){position:relative;z-index:2} .cbig .kicker{color:var(--accent-hi);margin-bottom:14px} .cbig h3{font-family:var(--font-heading);font-size:42px;line-height:1;margin-bottom:14px} .cbig h3 em{font-style:italic;color:var(--accent-hi)} .cbig p{margin:0 0 22px;max-width:460px;color:var(--on-dark-body);line-height:1.55} .cmeta{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px} .cmeta .mk{display:block;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-soft)} .cmeta .mv{font-family:var(--font-heading);font-size:20px} .cmeta .mv em{font-style:italic;color:var(--accent-hi)} .cbig .btn{align-self:flex-start} .clist{display:flex;flex-direction:column;gap:14px} .citem{display:flex;gap:14px;padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:14px;align-items:center;transition:all .2s} .citem:hover{transform:translateX(4px);border-color:var(--accent);color:var(--ink)} .citem__date{flex-shrink:0;width:60px;text-align:center;padding:8px 4px;background:var(--surface-dark);color:var(--on-dark);border-radius:10px} .citem__date .d{font-family:var(--font-heading);font-size:22px;line-height:1} .citem__date .m{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-top:2px;color:var(--accent-hi)} .citem__info{flex:1;min-width:0} .citem__info b{font-family:var(--font-heading);font-size:17px;font-weight:400;line-height:1.15;display:block} .citem__meta{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap} .citem__meta .live{color:var(--sage)} .citem__meta .live::before{content:"●";margin-right:4px} .citem__go{color:var(--accent);font-size:18px} .cfoot{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;gap:14px;align-items:center} .avs{display:flex} .avs .ph{width:38px;height:38px;border-radius:50%;border:2px solid var(--bg);margin-right:-10px} .cfoot b{font-family:var(--font-heading);font-size:17px;font-weight:400;display:block} .cfoot small{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .cfoot .tlink{margin-left:auto} /* ── band: story-split (feature of the month) ── */ .feature{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:20px;overflow:hidden;border:1px solid var(--border)} .feature__shot{position:relative;aspect-ratio:4/5} .feature__shot .ph{position:absolute;inset:0} .stamp{position:absolute;top:22px;left:22px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--surface-dark) 80%,transparent);color:var(--on-dark);display:grid;place-items:center;text-align:center;padding:12px;backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--accent-hi) 32%,transparent);font-size:8px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1.5;z-index:2} .stamp b{font-family:var(--font-heading);font-weight:400;font-size:15px;color:var(--accent-hi);display:block;letter-spacing:.1em;margin:4px 0} .feature__copy{padding:56px 52px;display:flex;flex-direction:column;justify-content:center} .feature__copy .kicker{margin-bottom:14px} .feature__copy h2{font-family:var(--font-heading);font-size:48px;line-height:1;margin-bottom:10px} .feature__copy h2 em{font-style:italic;color:var(--accent)} .feature__latin{font-family:var(--font-heading);font-style:italic;color:var(--ink-soft);margin-bottom:22px;font-size:16px} .feature__copy p{margin:0 0 18px;color:var(--ink-soft);max-width:460px;line-height:1.65} .props{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 28px;padding-top:22px;border-top:1px solid var(--border)} .props .pk{display:block;font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .props .pv{font-family:var(--font-heading);font-size:18px} .props .pv em{font-style:italic;color:var(--accent)} .feature__row{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .feature__price{font-family:var(--font-heading);font-size:32px} /* ── band: steps ── */ .steps-band{background:var(--bg)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .step{background:var(--bg);padding:38px 28px;display:flex;flex-direction:column;gap:14px;min-height:230px;justify-content:space-between} .step__n{font-family:var(--font-heading);font-size:48px;line-height:1;color:var(--accent);font-style:italic} .step h3{font-family:var(--font-heading);font-size:22px;line-height:1.15;margin-bottom:8px} .step p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.6} /* ── band: reviews ── */ .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rcard{background:var(--surface-deep);border:1px solid var(--border-dark);border-radius:var(--radius-card);padding:32px;display:flex;flex-direction:column;gap:14px;color:var(--on-dark)} .rcard .stars{color:var(--accent-hi);letter-spacing:.08em;font-size:14px} .rcard h3{font-family:var(--font-heading);font-size:22px;line-height:1.2} .rcard h3 em{font-style:italic;color:var(--accent-hi)} .rcard p{margin:0;color:var(--on-dark-soft);line-height:1.65;flex:1} .rcard__sig{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border-dark)} .rcard__sig .ph{width:38px;height:38px;border-radius:50%} .rcard__sig b{font-family:var(--font-heading);font-size:16px;font-weight:400;display:block} .rcard__sig small{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)} /* ── band: newsletter ── */ .news{padding:100px 0;background:var(--surface);border-top:1px solid var(--border);position:relative;overflow:hidden} .news::before{content:"";position:absolute;top:-100px;left:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)} .news::after{content:"";position:absolute;bottom:-80px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sage) 20%,transparent),transparent 70%)} .news__in{max-width:660px;margin:0 auto;text-align:center;position:relative;z-index:1} .news .kicker{justify-content:center;margin-bottom:14px} .news .kicker::before{content:none} .news h2{font-family:var(--font-heading);font-size:clamp(34px,4vw,52px);letter-spacing:-.01em;margin-bottom:14px;line-height:1.04} .news h2 em{font-style:italic;color:var(--accent)} .news p{color:var(--ink-soft);margin:0 auto 32px;max-width:480px;line-height:1.65} .news form{display:flex;max-width:460px;margin:0 auto;border:1px solid var(--ink);background:var(--bg);border-radius:var(--radius-input);overflow:hidden;padding:4px} .news input{flex:1;border:0;padding:14px 22px;font:inherit;font-size:14px;background:transparent;outline:none;color:var(--ink);min-width:0} .news input::placeholder{color:var(--muted)} .news button{background:var(--ink);color:var(--on-dark);padding:0 26px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-radius:var(--radius-button);transition:background .2s} .news button:hover{background:var(--accent);color:var(--ink)} .news .tiny{margin-top:16px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} /* ── band: footer ── */ .site-foot{background:var(--surface-dark);color:var(--on-dark-soft);padding:90px 0 30px;border-top:3px solid var(--accent)} .foot__top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:44px;padding-bottom:44px;border-bottom:1px solid var(--border-dark)} .foot__brand .logo{align-items:flex-start;color:var(--on-dark)} .foot__brand .logo .mark{color:var(--accent-hi)} .foot__brand .logo .brand{font-size:20px} .foot__brand p{margin:18px 0;font-size:13.5px;line-height:1.7;max-width:340px} .foot__join{display:inline-flex;flex-direction:column;padding:10px 16px;background:color-mix(in srgb,var(--on-dark) 6%,transparent);border:1px solid var(--border-dark);color:var(--on-dark);border-radius:12px;transition:all .18s} .foot__join:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} .foot__join small{font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.75} .foot__join b{font-family:var(--font-heading);font-weight:400;font-size:15px} .foot__col h4{color:var(--on-dark);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px} .foot__col ul{display:flex;flex-direction:column;gap:10px} .foot__col a{font-size:13.5px;color:var(--on-dark-soft)} .foot__col a:hover{color:var(--accent-hi)} .foot__bot{display:flex;justify-content:space-between;align-items:center;margin-top:30px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;flex-wrap:wrap;gap:14px;color:var(--on-dark-muted)} .foot__cards{display:flex;gap:10px;flex-wrap:wrap} .foot__cards span{background:color-mix(in srgb,var(--on-dark) 6%,transparent);padding:4px 10px;border:1px solid var(--border-dark);color:var(--on-dark);font-weight:600;border-radius:4px} /* breadcrumb */ .crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:26px 0 0;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--accent)} .crumb .cur{color:var(--ink-soft)} /* ── band: page-head ── */ .phead{padding:0 0 40px;background:var(--bg);border-bottom:1px solid var(--border)} .phead__in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding-top:32px} .phead .kicker{margin-bottom:16px} .phead h1{font-family:var(--font-heading);font-size:clamp(42px,5.4vw,72px);line-height:1;letter-spacing:-.01em;margin-bottom:16px} .phead h1 em{font-style:italic;color:var(--accent)} .phead p{margin:0;font-size:15.5px;color:var(--ink-soft);max-width:620px;line-height:1.65} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px} .chips a{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-button);color:var(--ink-soft);transition:all .15s} .chips a:hover{border-color:var(--accent);color:var(--accent)} .chips a.is-active{background:var(--surface-dark);border-color:var(--ink);color:var(--on-dark)} .phead--dark{background:var(--surface-dark);color:var(--on-dark);padding:0 0 90px;border-bottom:0;position:relative;overflow:hidden} .phead--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 55%),radial-gradient(ellipse at 80% 90%,color-mix(in srgb,var(--sage) 16%,transparent),transparent 60%);pointer-events:none} .phead--dark .wrap{position:relative} .phead--dark .crumb,.phead--dark .crumb a{color:var(--on-dark-soft)} .phead--dark .crumb .cur{color:var(--on-dark)} .phead--dark .phead__in{padding-top:70px} .phead--dark .kicker{color:var(--accent-hi)} .phead--dark h1{color:var(--on-dark)} .phead--dark h1 em{color:var(--accent-hi)} .phead--dark p{color:var(--on-dark-body);font-size:17px} /* ── band: collection-grid ── */ .collection{background:var(--bg)} .fbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;border-bottom:1px solid var(--border)} .fbar__l{display:flex;align-items:center;gap:14px} .fbtn{display:none;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--ink);border-radius:var(--radius-button);cursor:pointer} .fbtn:hover{background:var(--ink);color:var(--on-dark)} .rcount{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .sortsel{font:inherit;font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:10px 36px 10px 16px;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2395886f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;min-width:200px} .ftoggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .clayout{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:36px 0 90px;align-items:start} .clayout .pgrid{grid-template-columns:repeat(3,1fr)} .fside{position:sticky;top:150px} .fgroup{border-bottom:1px solid var(--border);padding:20px 0} .fgroup:first-child{padding-top:0} .fgroup>summary{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase} .fgroup>summary svg{color:var(--muted);transition:transform .2s} .fgroup[open]>summary svg{transform:rotate(180deg)} .fgroup__body{padding-top:14px} .fitem{display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer;font-size:13.5px;color:var(--ink-soft)} .fitem:hover{color:var(--ink)} .fitem input{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;cursor:pointer} .fitem .cnt{font-size:11px;color:var(--muted);margin-left:auto} .swatches{display:flex;flex-wrap:wrap;gap:9px} .swatches input{position:absolute;opacity:0;width:0;height:0} .swatches label{width:26px;height:26px;border-radius:50%;cursor:pointer;outline:2px solid transparent;outline-offset:2px;border:1px solid var(--border);display:block;transition:outline-color .15s} .swatches input:checked+label{outline-color:var(--accent)} .prange{display:flex;gap:8px;align-items:center} .prange input{width:100%;padding:9px 12px;font:inherit;font-size:13px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--bg);outline:none;color:var(--ink)} .prange input:focus{border-color:var(--accent)} .prange span{color:var(--muted)} .fpromo{background:var(--surface-dark);color:var(--on-dark);padding:24px;margin-top:22px;border-radius:var(--radius-card)} .fpromo .kicker{color:var(--accent-hi);margin-bottom:10px;font-size:9px} .fpromo h3{font-family:var(--font-heading);font-size:24px;line-height:1.05;margin-bottom:10px} .fpromo h3 em{font-style:italic;color:var(--accent-hi)} .fpromo p{font-size:12.5px;color:var(--on-dark-soft);line-height:1.55;margin:0 0 14px} .fpromo .tlink{color:var(--accent-hi)} .pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border)} .pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;font-size:12px;font-weight:600;border:1px solid transparent;border-radius:var(--radius-button);padding:0 14px} .pager a:hover{border-color:var(--border);color:var(--ink)} .pager a.is-active{background:var(--surface-dark);color:var(--on-dark);border-color:var(--ink)} .pager .gap{color:var(--muted)} /* ── band: product-buybox ── */ .pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;padding:28px 0 90px;align-items:start} .gallery{position:sticky;top:150px} .gallery__sel{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .gallery__main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-sand);border-radius:var(--radius-image)} .gallery__main .ph{position:absolute;inset:0;opacity:0;transition:opacity .25s} .gallery__main .badge{z-index:3} .gallery__thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;scrollbar-width:none} .gallery__thumbs::-webkit-scrollbar{display:none} .gallery__thumbs label{width:84px;aspect-ratio:4/5;flex-shrink:0;border:1px solid var(--border);border-radius:10px;cursor:pointer;overflow:hidden;position:relative;display:block;background:var(--surface-sand)} .gallery__thumbs label img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #shot-1:checked~.gallery__main .s1,#shot-2:checked~.gallery__main .s2,#shot-3:checked~.gallery__main .s3,#shot-4:checked~.gallery__main .s4{opacity:1} #shot-1:checked~.gallery__thumbs .t1,#shot-2:checked~.gallery__thumbs .t2,#shot-3:checked~.gallery__thumbs .t3,#shot-4:checked~.gallery__thumbs .t4{border-color:var(--accent);outline:1px solid var(--accent)} .buybox{display:flex;flex-direction:column;gap:22px} .buybox .kicker{margin-bottom:14px} .buybox h1{font-family:var(--font-heading);font-size:clamp(38px,4.2vw,56px);line-height:1;letter-spacing:-.01em} .buybox h1 em{font-style:italic;color:var(--accent)} .buybox__rating{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .buybox__rating i{color:var(--accent);font-style:normal;letter-spacing:.06em} .buybox__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .buybox__price .now{font-family:var(--font-heading);font-size:38px;color:var(--sale)} .buybox__price .was{font-size:18px;color:var(--muted);text-decoration:line-through} .buybox__price .save{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;background:var(--sale);color:var(--on-dark);padding:5px 10px;border-radius:var(--radius-button)} .buybox__lede{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0} .variant__label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:flex;justify-content:space-between} .variant__label span{color:var(--muted);letter-spacing:.12em} .opts{display:flex;flex-wrap:wrap;gap:8px} .opts input{position:absolute;opacity:0;width:0;height:0} .opts input+label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-button);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:8px} .opts input+label:hover{border-color:var(--accent)} .opts input:checked+label{border-color:var(--ink);background:var(--surface-dark);color:var(--on-dark)} .opts input:disabled+label{color:var(--muted);text-decoration:line-through;cursor:not-allowed} .gems{display:flex;flex-wrap:wrap;gap:12px} .gems input{position:absolute;opacity:0;width:0;height:0} .gems input+label{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer} .gems .sw{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s} .gems .nm{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} .gems input:checked+label .sw{outline-color:var(--accent)} .qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-input);height:52px;flex-shrink:0} .qty button{width:44px;height:100%;display:grid;place-items:center;font-size:17px;color:var(--ink-soft);border-radius:var(--radius-input)} .qty button:hover{color:var(--accent)} .qty .n{min-width:28px;text-align:center;font-size:14px;font-weight:600} .qty.sm{height:38px} .qty.sm button{width:34px;font-size:15px} .atc{display:flex;gap:10px;align-items:stretch} .atc .btn{flex:1} .atc__wish{width:52px;flex-shrink:0;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:all .15s} .atc__wish:hover{background:var(--ink);color:var(--on-dark)} .perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .perk{background:var(--surface);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-soft);line-height:1.4} .perk .ico{color:var(--accent)} .perk b{font-family:var(--font-heading);font-weight:400;font-size:15px;color:var(--ink)} .acc{border-bottom:1px solid var(--border)} .acc:first-child{border-top:1px solid var(--border)} .acc>summary{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase} .acc>summary svg{color:var(--muted);transition:transform .2s;flex-shrink:0} .acc[open]>summary svg{transform:rotate(180deg)} .acc__body{padding:0 0 20px;font-size:14px;line-height:1.75;color:var(--ink-soft)} .acc__body ul{display:flex;flex-direction:column;gap:6px;margin-top:8px} .acc__body li{display:flex;gap:10px;align-items:baseline} .acc__body li::before{content:"✦";color:var(--accent);font-size:9px;flex-shrink:0} /* ── band: cart-lines ── */ .cartpage{padding:0 0 100px;background:var(--bg)} .cartpage__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:32px 0 28px} .cartpage__head h1{font-family:var(--font-heading);font-size:clamp(42px,4.8vw,64px);line-height:1;letter-spacing:-.01em} .cartpage__head h1 em{font-style:italic;color:var(--accent)} .cart__grid{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:start} .ship{background:var(--surface);border-radius:var(--radius-card);padding:18px 22px;margin-bottom:24px} .ship__row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-soft);margin-bottom:12px} .ship__row b{color:var(--ink);font-weight:600} .ship__bar{height:4px;background:var(--surface-sand);border-radius:4px;overflow:hidden} .ship__bar i{display:block;height:100%;background:var(--accent);border-radius:4px} .cart__list{border-top:1px solid var(--border)} .cline{display:grid;grid-template-columns:110px 1fr auto auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--border);align-items:center} .cline__shot{width:110px;aspect-ratio:4/5;border-radius:12px} .cline__tag{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:5px} .cline__name{font-family:var(--font-heading);font-size:22px;line-height:1.12;display:block;margin-bottom:6px} .cline__name em{font-style:italic} .cline__opt{font-size:12.5px;color:var(--ink-soft);margin-bottom:12px} .cline__rm{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .cline__rm:hover{color:var(--sale)} .cline__price{font-family:var(--font-heading);font-size:22px;text-align:right;min-width:90px} .cline__price .was{display:block;font-family:var(--font-body);font-size:12px;color:var(--muted);text-decoration:line-through} .summary{background:var(--surface);border-radius:var(--radius-card);padding:32px;position:sticky;top:150px} .summary h2{font-family:var(--font-heading);font-size:28px;margin-bottom:18px} .srow{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:10px 0;color:var(--ink-soft);border-bottom:1px solid var(--border)} .srow .v{font-weight:600;color:var(--ink)} .srow .v.is-save{color:var(--sale)} .srow.total{border-bottom:0;padding:18px 0 22px;align-items:center} .srow.total .l{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .srow.total .v{font-family:var(--font-heading);font-weight:400;font-size:34px} .promo{display:flex;gap:8px;padding:18px 0 6px} .promo input{flex:1;font:inherit;font-size:13px;padding:12px 18px;border:1px solid var(--border);border-radius:var(--radius-input);background:var(--bg);outline:none;color:var(--ink);min-width:0} .promo input:focus{border-color:var(--accent)} .promo .btn{padding:12px 20px} .summary__trust{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} .summary__trust span{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)} .summary__trust .ico{color:var(--accent)} .summary__pay{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px} .summary__pay span{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--border);border-radius:4px;color:var(--ink-soft);background:var(--bg)} /* ── content pages ── */ .story{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .story__shot{aspect-ratio:4/5;border-radius:20px} .story .kicker{margin-bottom:16px} .story h2{font-family:var(--font-heading);font-size:clamp(34px,4vw,52px);line-height:1.04;margin-bottom:24px} .story h2 em{font-style:italic;color:var(--accent)} .story p{margin:0 0 16px;color:var(--ink-soft);line-height:1.75;max-width:540px} .story p.lede{font-family:var(--font-heading);font-size:22px;line-height:1.5;color:var(--ink)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;padding-top:26px;border-top:1px solid var(--border)} .stats .n{font-family:var(--font-heading);font-size:36px;line-height:1} .stats .n em{font-style:italic;color:var(--accent)} .stats .l{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:8px} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:36px 32px;display:flex;flex-direction:column;gap:12px} .vcard .sym{font-family:var(--font-heading);font-size:30px;color:var(--accent);line-height:1} .vcard h3{font-family:var(--font-heading);font-size:26px;line-height:1.1} .vcard h3 em{font-style:italic;color:var(--accent)} .vcard p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.65} .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .ccard{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s} .ccard:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)} .ccard .ico{width:44px;height:44px;border-radius:12px;background:var(--surface);color:var(--accent);margin-bottom:8px} .ccard h3{font-family:var(--font-heading);font-size:24px} .ccard p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6} .ccard .big{font-family:var(--font-heading);font-size:20px;color:var(--accent);margin-top:auto;padding-top:8px;word-break:break-word} .formsplit{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start} .formsplit h2{font-family:var(--font-heading);font-size:clamp(32px,3.6vw,46px);line-height:1.05;margin:14px 0 12px} .formsplit h2 em{font-style:italic;color:var(--accent)} .formsplit .intro{margin:0 0 28px;color:var(--ink-soft)} .field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .field label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase} .field input,.field textarea,.field select{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-input);padding:14px 20px;outline:none;width:100%} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2395886f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center} .field textarea{min-height:160px;resize:vertical;border-radius:var(--radius-card)} .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .aside-card{background:var(--surface);border-radius:var(--radius-card);padding:32px} .aside-card h3{font-family:var(--font-heading);font-size:26px;margin:12px 0 18px} .aside-card h3 em{font-style:italic;color:var(--accent)} .hours{border-top:1px solid var(--border);margin-bottom:26px} .hours div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--ink-soft)} .hours div b{color:var(--ink);font-weight:600} /* ══ RESPONSIVE ══ */ @media (max-width:1180px){ .intents{grid-template-columns:repeat(3,1fr)} .pgrid{grid-template-columns:repeat(2,1fr)} .clayout .pgrid,.pgrid.cols-3{grid-template-columns:repeat(2,1fr)} .foot__top{grid-template-columns:1fr 1fr 1fr;gap:32px} .foot__brand{grid-column:1/-1} } @media (max-width:960px){ :root{--gutter:18px} .topbar .l>:nth-child(n+2),.topbar .r a:not(:last-child){display:none} .hdr{grid-template-columns:auto 1fr auto;padding:12px 0;gap:12px} .mmenu{display:block} .search{display:none} .msearch{display:flex} .hdr-r>a:not(.cart-chip){display:none} .logo{gap:4px} .logo .mark{width:28px;height:28px} .logo .mark svg{width:24px;height:24px} .logo .brand{font-size:16px;letter-spacing:.1em} .logo .brand em{font-size:15px} .logo small{display:none} .cart-chip{padding:7px 12px;font-size:12px} .mainnav{display:none} .sec{padding:64px 0} .sec-head{margin-bottom:32px} .hero__in{grid-template-columns:1fr;min-height:0} .hero__copy{padding:52px var(--gutter) 44px} .hero__shot{min-height:400px} .hero__bg img{object-position:50% 60%} .hero__bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-dark) 96%,transparent) 0%,color-mix(in srgb,var(--hero-dark) 88%,transparent) 48%,color-mix(in srgb,var(--hero-dark) 22%,transparent) 72%,color-mix(in srgb,var(--hero-deeper) 70%,transparent) 100%)} .hero__card{left:16px;right:16px;bottom:16px;max-width:none} .app__in{grid-template-columns:1fr;gap:48px;padding:72px 0} .app__visual{max-width:400px;margin:0 auto;aspect-ratio:3/4} .phone{width:66%} .phone__screen{padding:40px 14px 14px;gap:9px} .phone__h{font-size:19px} .ptile{padding:9px;gap:8px} .ptile .dot{width:30px;height:30px} .ptile b{font-size:13px} .feats{grid-template-columns:1fr} .circles{grid-template-columns:1fr} .cbig{min-height:480px;padding:28px} .cbig h3{font-size:34px} .feature{grid-template-columns:1fr} .feature__copy{padding:36px 24px} .feature__copy h2{font-size:38px} .steps{grid-template-columns:1fr 1fr} .rgrid,.vgrid,.cgrid{grid-template-columns:1fr} .news{padding:64px 0} .site-foot{padding:64px 0 28px} .foot__top{grid-template-columns:1fr 1fr} .phead__in{grid-template-columns:1fr;gap:20px} .phead--dark{padding-bottom:60px} .phead--dark .phead__in{padding-top:40px} /* filters live behind the Filter button on mobile */ .fbtn{display:inline-flex} .clayout{grid-template-columns:1fr;gap:0;padding-top:0} .fside{display:none;position:static;padding:22px 0 10px} .ftoggle:checked~.clayout .fside{display:block} .clayout .pgrid{margin-top:24px} .pdp{grid-template-columns:1fr;gap:28px;padding-bottom:64px} .gallery{position:static} .cart__grid{grid-template-columns:1fr;gap:28px} .summary{position:static} .cline{grid-template-columns:88px 1fr;gap:6px 16px;align-items:start} .cline__shot{width:88px;grid-row:span 3} .cline__price{text-align:left} .story{grid-template-columns:1fr;gap:36px} .formsplit{grid-template-columns:1fr;gap:40px} } @media (max-width:600px){ .intents{grid-template-columns:repeat(2,1fr)} .pgrid,.pgrid.cols-3,.clayout .pgrid{grid-template-columns:repeat(2,1fr);gap:12px} .pcard__body{padding:14px 14px 14px;gap:6px} .pcard h3{font-size:17px} .pcard__specs{display:none} .pcard__foot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:12px} .pcard__price{font-size:19px} .pcard__add{width:100%;text-align:center} .pcard__quick{display:none} .hero__stats{grid-template-columns:1fr 1fr 1fr;gap:12px} .hero__stats .v{font-size:18px} .gem{display:none} .steps{grid-template-columns:1fr} .step{min-height:0} .props{grid-template-columns:1fr 1fr 1fr;gap:10px} .props .pv{font-size:15px} .perks{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr 1fr;gap:12px} .stats .n{font-size:28px} .field-row{grid-template-columns:1fr} .news form{flex-direction:column;border-radius:var(--radius-card);gap:4px} .news button{padding:14px} .cfoot{flex-wrap:wrap} .foot__bot{flex-direction:column;align-items:flex-start} .sortsel{min-width:0} .rcount{display:none} } /* app store buttons */ .stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .store{display:inline-flex;align-items:center;gap:12px;padding:11px 20px;border-radius:12px;background:var(--on-dark);color:var(--ink);border:1px solid var(--on-dark);transition:all .2s} .store:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} .store svg{width:24px;height:24px;flex-shrink:0} .store small{display:block;font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:1px} .store b{font-family:var(--font-heading);font-weight:400;font-size:17px;line-height:1;display:block} .foot__stores{display:flex;gap:10px;flex-wrap:wrap} .foot__stores .store{background:color-mix(in srgb,var(--on-dark) 6%,transparent);border-color:var(--border-dark);color:var(--on-dark);padding:9px 14px} .foot__stores .store:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)} .foot__stores .store b{font-size:14px} .pill-note .stars{color:var(--accent-hi);font-size:13px;letter-spacing:.04em} /* ── band: cart-drawer — opens via :target (#bag), no JS ── */ body{overflow-x:clip} .drw{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--bg);z-index:91;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s linear .42s;box-shadow:var(--shadow-raised)} .drw:target,.drw.is-open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s} .drw-scrim{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--surface-deeper) 55%,transparent);opacity:0;pointer-events:none;transition:opacity .35s} .drw:target+.drw-scrim,.drw.is-open+.drw-scrim{opacity:1;pointer-events:auto} .drw__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)} .drw__head h2{font-family:var(--font-heading);font-size:26px;line-height:1} .drw__head h2 em{font-style:italic;color:var(--accent)} .drw__head h2 small{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-left:8px;vertical-align:middle} .drw__close{width:40px;height:40px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:all .15s} .drw__close:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)} .drw__added{display:flex;align-items:center;gap:10px;background:var(--surface-dark);color:var(--on-dark);padding:12px 24px;font-size:13px} .drw__added .ico{color:var(--accent-hi)} .drw__added b{font-weight:600} .drw__ship{padding:16px 24px;border-bottom:1px solid var(--border)} .drw__ship .ship__row{font-size:12.5px;margin-bottom:10px} .drw__body{flex:1;overflow-y:auto;padding:0 24px} .dline{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--border);align-items:start} .dline__shot{width:76px;aspect-ratio:4/5;border-radius:10px} .dline__tag{font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:3px} .dline__name{font-family:var(--font-heading);font-size:17px;line-height:1.15;display:block} .dline__name em{font-style:italic} .dline__opt{font-size:12px;color:var(--ink-soft);margin:3px 0 10px} .dline__acts{display:flex;align-items:center;gap:14px} .dline__price{font-family:var(--font-heading);font-size:17px;text-align:right} .dline__price .was{display:block;font-family:var(--font-body);font-size:11.5px;color:var(--muted);text-decoration:line-through} .dline__price.is-sale{color:var(--sale)} .drw__up{padding:22px 0 24px} .drw__up .kicker{margin-bottom:14px} .dup{display:flex;flex-direction:column;gap:10px} .dup__item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--surface);border-radius:12px;padding:8px 12px 8px 8px} .dup__item .ph{width:52px;aspect-ratio:1/1;border-radius:8px} .dup__item b{font-family:var(--font-heading);font-weight:400;font-size:15px;line-height:1.15;display:block} .dup__item small{font-size:12px;color:var(--ink-soft)} .drw__foot{padding:18px 24px 24px;border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:10px} .drw__foot .srow{border-bottom:0;padding:0} .drw__foot .srow .l{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)} .drw__foot .srow .v{font-family:var(--font-heading);font-weight:400;font-size:28px} .drw__note{font-size:12px;color:var(--muted);margin:0 0 4px} /* ═══ PAGE BANDS ═══ Statements from the other design pages that the home stylesheet doesn't contain (merged by --pages, verbatim). */ /* ── page bands: category.html ── */ .hero{background:var(--surface-dark);color:var(--on-dark);overflow:hidden} .hero__in{display:grid;grid-template-columns:1fr 1.1fr;min-height:680px} .hero__shot{position:relative;overflow:hidden} .hero__shot .ph{position:absolute;inset:0} .hero__shot .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--surface-dark) 35%,transparent),transparent 40%)} .hero__tag{position:absolute;top:32px;right:32px;background:color-mix(in srgb,var(--surface-dark) 72%,transparent);backdrop-filter:blur(8px);color:var(--on-dark);padding:10px 16px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-radius:var(--radius-button);z-index:3;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-dark)} .hero__tag::before{content:"";width:7px;height:7px;background:var(--accent-hi);border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-hi) 28%,transparent)} @media (max-width:960px){ :root{--gutter:18px} .topbar .l>:nth-child(n+2),.topbar .r a:not(:last-child){display:none} .hdr{grid-template-columns:auto 1fr auto;padding:12px 0;gap:12px} .mmenu{display:block} .search{display:none} .msearch{display:flex} .hdr-r>a:not(.cart-chip){display:none} .logo{gap:4px} .logo .mark{width:28px;height:28px} .logo .mark svg{width:24px;height:24px} .logo .brand{font-size:16px;letter-spacing:.1em} .logo .brand em{font-size:15px} .logo small{display:none} .cart-chip{padding:7px 12px;font-size:12px} .mainnav{display:none} .sec{padding:64px 0} .sec-head{margin-bottom:32px} .hero__in{grid-template-columns:1fr;min-height:0} .hero__copy{padding:52px var(--gutter) 44px} .hero__shot{min-height:440px} .hero__card{left:16px;right:16px;bottom:16px;max-width:none} .hero__tag{top:16px;right:16px} .app__in{grid-template-columns:1fr;gap:48px;padding:72px 0} .app__visual{max-width:400px;margin:0 auto;aspect-ratio:3/4} .phone{width:66%} .phone__screen{padding:40px 14px 14px;gap:9px} .phone__h{font-size:19px} .ptile{padding:9px;gap:8px} .ptile .dot{width:30px;height:30px} .ptile b{font-size:13px} .feats{grid-template-columns:1fr} .circles{grid-template-columns:1fr} .cbig{min-height:480px;padding:28px} .cbig h3{font-size:34px} .feature{grid-template-columns:1fr} .feature__copy{padding:36px 24px} .feature__copy h2{font-size:38px} .steps{grid-template-columns:1fr 1fr} .rgrid,.vgrid,.cgrid{grid-template-columns:1fr} .news{padding:64px 0} .site-foot{padding:64px 0 28px} .foot__top{grid-template-columns:1fr 1fr} .phead__in{grid-template-columns:1fr;gap:20px} .phead--dark{padding-bottom:60px} .phead--dark .phead__in{padding-top:40px} .fbtn{display:inline-flex} .clayout{grid-template-columns:1fr;gap:0;padding-top:0} .fside{display:none;position:static;padding:22px 0 10px} .ftoggle:checked~.clayout .fside{display:block} .clayout .pgrid{margin-top:24px} .pdp{grid-template-columns:1fr;gap:28px;padding-bottom:64px} .gallery{position:static} .cart__grid{grid-template-columns:1fr;gap:28px} .summary{position:static} .cline{grid-template-columns:88px 1fr;gap:6px 16px;align-items:start} .cline__shot{width:88px;grid-row:span 3} .cline__price{text-align:left} .story{grid-template-columns:1fr;gap:36px} .formsplit{grid-template-columns:1fr;gap:40px} } /* ═══ PLATFORM ADAPTATIONS ═══ From platform-adapt.css — reconciliations between the design's markup assumptions and the platform's. Keep this list short; each entry should name why the design rule needs scoping. */ /* ── CHROME ZONES (header / footer are the zone builders: rows / columns / widgets rendered as #block- with data-sub-element hooks). The rules below map that DOM onto the Pathway design's .topbar / .site-head / .hdr / .mainnav / .msearch / .site-foot anatomy so the zones stay merchant-editable AND match the design. The logos, the top-bar lines, App · Community and the footer brand are html blocks carrying the design's own markup, so .logo / .foot__brand / .foot__stores rules land on them as-is. The design's header collapses at 960px; the zone compiler's mobile key is 768px, so the 769–960px band is restated here. ── */ /* .site-head */ #site-header{background:var(--bg);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--border)} #site-header .v3-custom-section{position:relative} /* .topbar */ #block-hdr-row-topbar{background:var(--surface-dark);color:var(--on-dark);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-top:9px;padding-bottom:9px} #block-hdr-topbar-l,#block-hdr-topbar-r{display:flex;align-items:center;gap:26px} #block-hdr-topbar-l b{color:var(--accent-hi);font-weight:500;display:inline-flex;align-items:center;gap:8px} #block-hdr-topbar-r a{color:var(--on-dark);opacity:.82} #block-hdr-topbar-r a:hover{opacity:1;color:var(--accent-hi)} /* .hdr — search | logo | App · Community · Bag */ #block-hdr-row-main{padding-top:18px;padding-bottom:18px} #block-hdr-search{width:100%;max-width:300px} #block-hdr-search [data-sub-element="search-form"]{display:flex;align-items:center;gap:10px;margin:0;border:1px solid var(--border);border-radius:var(--radius-input);background:transparent;padding:9px 14px;width:100%;max-width:300px;transition:border-color .2s} #block-hdr-search [data-sub-element="search-form"]:focus-within{border-color:var(--ink)} #block-hdr-search [data-sub-element="icon"]{position:static!important;display:inline-flex;flex:0 0 auto;color:var(--ink-soft);transform:none!important} #block-hdr-search [data-sub-element="icon"] svg{width:14px;height:14px;stroke-width:2} #block-hdr-search [data-sub-element="input"]{flex:1;min-width:0;border:0!important;outline:0;background:transparent!important;padding:0!important;font:inherit;font-size:13px;color:var(--ink);box-shadow:none!important} #block-hdr-search [data-sub-element="input"]::placeholder{color:var(--muted)} #block-hdr-col-r{font-size:13px} #block-hdr-links{display:flex;align-items:center;gap:24px} #block-hdr-links a{color:var(--ink)} #block-hdr-links a:hover{color:var(--accent)} /* .cart-chip */ #block-hdr-cart [data-sub-element="container"],#block-hdr-mob-cart [data-sub-element="container"]{color:var(--ink);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;border:1px solid var(--ink);border-radius:var(--radius-button);padding:8px 16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;background:transparent;transition:all .18s} #block-hdr-cart [data-sub-element="container"]::before,#block-hdr-mob-cart [data-sub-element="container"]::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%} #block-hdr-cart [data-sub-element="container"]:hover,#block-hdr-mob-cart [data-sub-element="container"]:hover{background:var(--ink);color:var(--on-dark)} #block-hdr-cart [data-sub-element="icon"],#block-hdr-cart [data-sub-element="badge"],#block-hdr-mob-cart [data-sub-element="icon"],#block-hdr-mob-cart [data-sub-element="badge"]{display:none} /* .mainnav */ #block-hdr-row-nav{background:var(--bg);border-top:1px solid var(--border);padding-top:0;padding-bottom:0} #block-hdr-menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;position:static} #block-hdr-menu>[data-nav-item]{display:flex;align-items:center;position:relative} #block-hdr-menu [data-sub-element^="menu-link"],#block-hdr-menu a[data-nav-parent]{display:block!important;padding:14px 18px;font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid transparent} #block-hdr-menu [data-sub-element^="menu-link"]:hover,#block-hdr-menu a[data-nav-parent]:hover{color:var(--accent)} #block-hdr-menu [data-sub-element^="menu-link"][aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)} /* the design's gold feature link (.mainnav a.is-feature) is the menu's last item */ #block-hdr-menu>[data-nav-item]:last-of-type [data-sub-element^="menu-link"]{color:var(--accent)} #block-hdr-menu [data-sub-element="menu-badge"],#mobile-drawer [data-sub-element="menu-badge"]{display:none!important} #block-hdr-menu svg[data-nav-chevron]{display:none} #block-hdr-menu>details[data-nav-accordion]{display:none} /* mobile rows (.hdr ≤960 + .msearch) */ #block-hdr-row-mobile{padding-top:12px;padding-bottom:12px} #block-hdr-row-mobile [data-block-type="header-hamburger"] [data-sub-element="toggle"]{width:40px;height:40px;display:grid;place-items:center;color:var(--ink);background:none;border:0;padding:0} #block-hdr-row-mobile [data-block-type="header-hamburger"] svg{width:22px;height:22px;stroke-width:1.6} #block-hdr-mob-logo .logo{gap:4px} #block-hdr-mob-logo .logo .mark{width:28px;height:28px} #block-hdr-mob-logo .logo .mark svg{width:24px;height:24px} #block-hdr-mob-logo .logo .brand{font-size:16px;letter-spacing:.1em} #block-hdr-mob-logo .logo .brand em{font-size:15px} #block-hdr-mob-logo .logo small{display:none} #block-hdr-mob-cart [data-sub-element="container"]{padding:7px 12px;font-size:12px} #block-hdr-row-mobile-search{border-top:1px solid var(--border);background:var(--bg)} #block-hdr-mob-search{width:100%} #block-hdr-mob-search [data-sub-element="search-form"]{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:11px var(--gutter);background:transparent;border:0;border-radius:0;color:var(--muted)} #block-hdr-mob-search [data-sub-element="input"]{flex:1;min-width:0;border:0!important;background:transparent!important;padding:0!important;font:inherit;font-size:14px;color:var(--ink);outline:none;box-shadow:none!important} #block-hdr-mob-search [data-sub-element="input"]::placeholder{color:var(--muted)} #block-hdr-mob-search [data-sub-element="icon"]{position:static!important;transform:none!important;display:inline-flex;color:var(--muted)} #block-hdr-mob-search [data-sub-element="icon"] svg{width:14px;height:14px} #block-hdr-row-mobile [data-sub-element="label"]{display:inline} @media (max-width:960px){ #site-header #block-hdr-row-main,#site-header #block-hdr-row-nav{display:none!important} #site-header #block-hdr-row-mobile,#site-header #block-hdr-row-mobile-search{display:flex!important} #block-hdr-topbar-l>:nth-child(n+2),#block-hdr-topbar-r a:not(:last-child){display:none} } /* mobile drawer (platform mobile-drawer.js) styled like the design's .mmenu__panel */ #mobile-drawer[data-menu-drawer]{background:var(--bg)!important;color:var(--ink)} #mobile-drawer a[data-nav-accordion-child],#mobile-drawer summary[data-nav-accordion-summary]{display:block;padding:14px var(--gutter);font-family:var(--font-heading);font-size:21px;font-weight:400;color:var(--ink);border-bottom:1px solid var(--border)} #mobile-drawer a[data-nav-accordion-child]:hover{color:var(--accent)} /* .site-foot */ footer[data-zone="footer"]{background:var(--surface-dark)!important;color:var(--on-dark-soft);border-top:3px solid var(--accent)} #block-ftr-row-main{border-bottom:1px solid var(--border-dark)} @media (max-width:1180px){#block-ftr-col-brand{grid-column:1/-1}} footer[data-zone="footer"] .foot__brand .logo{align-items:flex-start;color:var(--on-dark)} footer[data-zone="footer"] [data-block-type="footer-links"] :is(h2,h3,h4,h5,[data-sub-element="footer-links-title"]){display:block;color:var(--on-dark)!important;font-family:var(--font-body)!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.24em!important;text-transform:uppercase!important;margin:0 0 18px!important} footer[data-zone="footer"] [data-block-type="footer-links"] ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none} footer[data-zone="footer"] [data-sub-element="footer-links-link"]{font-size:13.5px!important;color:var(--on-dark-soft)!important;text-decoration:none!important;font-weight:400!important} footer[data-zone="footer"] [data-sub-element="footer-links-link"]:hover{color:var(--accent-hi)!important} #block-ftr-row-bottom{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)} #block-ftr-copyright [data-sub-element="copy-text"],#block-ftr-credit [data-sub-element="credit"]{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)} #block-ftr-credit [data-sub-element="credit"] a{color:inherit;text-decoration:none} #block-ftr-credit [data-sub-element="credit"] a:hover{color:var(--accent-hi)} /* ── CATEGORY BROWSE (Alpine listing app rendered in the design's .collection anatomy). The design's filter toggle / swatches are checkbox hacks; ours are Alpine, so the interactive states are restated on our hooks. ── */ .fbar__r{display:flex;align-items:center;gap:14px} .fbtn{background:none;cursor:pointer} .fbtn--always{display:flex} .fchip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--surface);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer} .fchip__x{color:var(--muted)} .filter-clear{background:none;border:0;padding:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .fgroup summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)} .fgroup summary::-webkit-details-marker{display:none} .fgroup summary svg{width:12px;height:12px;color:var(--muted);transition:transform .2s} .swatches{position:relative} .swatches .fswatch{width:26px;height:26px;border-radius:50%;cursor:pointer;outline:2px solid transparent;outline-offset:2px;border:1px solid rgba(0,0,0,.15);display:block;padding:0;background:var(--sw,var(--surface));transition:outline-color .15s;overflow:hidden} .swatches .fswatch img{width:100%;height:100%;object-fit:cover;display:block} .swatches .fswatch.is-active{outline-color:var(--accent)} .optbtns{display:flex;flex-wrap:wrap;gap:8px} .optbtn{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-button);background:var(--bg);font-size:12px;color:var(--ink-soft);cursor:pointer} .optbtn.is-active{border-color:var(--accent);color:var(--accent)} .cempty h2{font-family:var(--font-heading);font-size:32px;margin-bottom:8px} .cempty p{color:var(--ink-soft);margin-bottom:18px} .clayout--nofilters{grid-template-columns:1fr} .filter-drawer-backdrop{position:fixed;inset:0;background:rgba(26,23,20,.5);z-index:80} @media (max-width:1000px){.fside.is-mobile-open{display:block}} .fside--drawer{position:fixed;top:0;left:0;bottom:0;width:min(88vw,360px);background:var(--bg);z-index:90;overflow:auto;padding:24px;transform:translateX(-100%);transition:transform .25s;display:block} .fside--drawer.is-mobile-open{transform:none} /* pager: the design's .pager a / a.is-active, restated on the listing app's buttons */ .pager .page-btn{min-width:42px;height:42px;display:grid;place-items:center;font:inherit;font-size:12px;font-weight:600;border:1px solid transparent;border-radius:var(--radius-button);padding:0 14px;background:none;color:var(--ink);cursor:pointer} .pager .page-btn:hover{border-color:var(--border)} .pager .page-btn.is-active{background:var(--surface-dark);color:var(--on-dark);border-color:var(--ink)} /* ── PRODUCT PAGE (pdp-buy renders the design's .pdp / .gallery / .buybox anatomy with Alpine controls). The design's star-sign radios become