html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
:root{
color-scheme:light;
--page:#ffffff; --ground:#f2f2f0; --tile:#e9e9e7; --ink:#141614; --muted:#6c716d; --line:#e4e5e2;
--green:#1f4b3d; --green-2:#2c6452; --green-soft:#e7efeb; --gold:#b48a45; --bad:#b0392f; --warn:#9a6a10; --wa:#1f9e55;
--serif:"Cormorant Garamond","Didot",Georgia,serif;
--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--r-lg:22px; --r-md:14px;
}
*{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}
img{display:block}
/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:16px}
.menu-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;border:0;background:none;font-size:14px;font-weight:500;padding:6px 0}
.burger{display:grid;gap:4px}.burger i{display:block;width:18px;height:1.8px;background:var(--ink);border-radius:2px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.01em;margin:0;line-height:1;white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none;color:var(--green)}
.top-right{justify-self:end;display:flex;gap:8px;align-items:center}
.pill-dark{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.pill-dark .count{background:#fff;color:var(--ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;padding:0 5px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.top .wrap{grid-template-columns:auto 1fr auto;gap:10px}.logo{font-size:21px;justify-self:center}.logo svg{display:none}.menu-btn span.lbl{display:none}.pill-dark{padding:7px 12px;font-size:13px}}
@media (max-width:640px){.hero{align-items:flex-end}.hero img.bg{object-position:72% center}.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.8) 100%)}}
.menu-pop{position:absolute;top:calc(100% - 4px);left:24px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.10);padding:8px;display:grid;min-width:220px;z-index:30}
.menu-pop button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;font-weight:500}
.menu-pop button:hover{background:var(--ground)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
/* hero */
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0b0b0c;min-height:clamp(420px,58vw,620px);display:flex;align-items:center;color:#fff}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 100%)}
/* Gigi: portrait model on the right, fading into a solid panel behind the headline */
.hero{background:#1c1c1e}
.hero img.bg{left:auto;width:64%;object-position:center 25%}
.hero::after{background:linear-gradient(90deg,#1c1c1e 0%,#1c1c1e 36%,rgba(28,28,30,.6) 46%,rgba(28,28,30,0) 64%)}
@media (max-width:640px){.hero img.bg{width:100%;object-position:60% 20%}.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.85) 100%)}}
.hero .inner{position:relative;z-index:1;padding:40px clamp(24px,6vw,72px);display:grid;gap:22px;max-width:620px}
.tag{justify-self:start;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 12px;font-size:12.5px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.04)}
.hero h2{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(34px,5.4vw,62px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.hero p{margin:0;color:rgba(255,255,255,.72);max-width:44ch}
.cta{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);border:0;border-radius:999px;padding:7px 7px 7px 20px;font-weight:600;font-size:14px}
.cta .arr{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.cta.green{background:var(--green);color:#fff}.cta.green .arr{background:#fff;color:var(--green)}
.cta.sm{padding:4px 4px 4px 14px;font-size:12.5px;gap:10px}.cta.sm .arr{width:28px;height:28px}
.arr svg{width:16px;height:16px}
/* rail */
.rail-sec{padding-block:36px 8px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,calc((100% - 3*22px)/4));gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
@media (max-width:900px){.rail{grid-auto-columns:minmax(200px,44%)}}
@media (max-width:520px){.rail{grid-auto-columns:72%}}
.rail-item{scroll-snap-align:start;display:grid;gap:12px;text-align:center;border:0;background:none;padding:0}
.rail-item .ph{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--tile);transition:border-radius .35s ease}
.rail-item:hover .ph,.rail-item:focus-visible .ph{border-radius:48% 48% var(--r-md) var(--r-md)/32% 32% var(--r-md) var(--r-md)}
.rail-item .ph img{width:100%;height:100%;object-fit:cover}
.rail-item span{font-size:14px;font-weight:500}
.rail-ctl{display:flex;align-items:center;gap:18px;padding-top:26px}
.track{flex:1;height:3px;background:var(--line);border-radius:3px;position:relative;overflow:hidden;margin-inline:clamp(0px,5vw,60px)}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:3px;transition:left .2s,width .2s}
.circ{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;flex:none}
.circ.fill{background:var(--green);border-color:var(--green);color:#fff}
.circ svg{width:17px;height:17px}
/* categories */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-block:48px 8px}
@media (max-width:640px){.cats{grid-template-columns:1fr}}
.cat{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-height:620px;width:100%;color:#fff;display:flex;align-items:flex-end;justify-content:center;text-align:center;background:#1a1b1a}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6) 100%)}
.cat .inner{position:relative;z-index:1;padding:28px;display:grid;gap:10px;justify-items:center}
.cat h3{margin:0;font-weight:400;font-size:26px;letter-spacing:-.01em}
.cat p{margin:0;font-size:13.5px;color:rgba(255,255,255,.78);max-width:34ch}
/* section head */
.shead{display:grid;justify-items:center;gap:14px;text-align:center;padding-block:72px 32px}
.eyebrow{border:1px solid var(--line);background:var(--ground);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--muted);font-weight:500}
.shead h2{margin:0;font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance;max-width:20ch}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);background:#fff;padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.search{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;min-width:0;width:220px;max-width:100%}
/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}}
.pc{display:grid;gap:10px;align-content:start}
.pc .ph{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--tile);border:0;padding:0;width:100%}
.pc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pc .ph:hover img{transform:scale(1.035)}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:#fff}
.badge.low{color:var(--warn)}.badge.out{color:var(--bad)}
.pc h3{margin:0;font-size:15px;font-weight:600}
.pc .desc{margin:0;font-size:13px;color:var(--muted);min-height:3.1em;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pc .buy{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.price s{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.addc{width:36px;height:36px;border-radius:50%;border:0;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.addc:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.addc svg{width:16px;height:16px}
.empty{padding:40px 0;color:var(--muted);text-align:center}
/* feature */
.feature{position:relative;margin-top:80px;border-radius:var(--r-lg);overflow:hidden;background:#101112;color:#fff;aspect-ratio:16/9;max-height:640px;width:100%}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(10,20,16,.35),rgba(10,20,16,.82))}
.callout{position:absolute;z-index:1;max-width:210px;display:grid;gap:4px;font-size:12.5px;color:rgba(255,255,255,.7)}
.callout b{color:#fff;font-weight:600;font-size:13.5px}
.callout::before{content:"";position:absolute;height:1px;background:rgba(255,255,255,.45);width:clamp(40px,8vw,120px);top:9px}
.callout.l{left:6%;top:14%}.callout.l::before{left:100%;margin-left:12px}
.callout.r{right:5%;top:14%;text-align:right}.callout.r::before{right:100%;margin-right:12px}
.feature .ftitle{position:absolute;z-index:1;left:6%;bottom:10%;display:grid;gap:10px;max-width:40%}
.feature .ftitle h3{margin:0;font-weight:300;font-size:clamp(22px,3vw,38px);line-height:1.1;letter-spacing:-.01em}
@media (max-width:720px){.feature{aspect-ratio:auto;min-height:560px}.feature img{object-position:30% center}.callout.l{top:6%;left:6%}.callout.r{bottom:auto;top:6%;right:6%}.callout::before{display:none}.feature .ftitle{max-width:88%;bottom:6%}}
/* statement */
.statement{display:grid;justify-items:center;gap:16px;text-align:center;padding-block:88px 72px}
.statement p{margin:0;font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.3;max-width:30ch;font-weight:400;text-wrap:balance}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:900px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--ground);border-radius:var(--r-md);padding:18px;text-align:left;display:grid;gap:4px}
.step b{font-size:12px;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
.step span{font-size:14px;color:var(--muted)}
.foot{border-top:1px solid var(--line);padding-block:24px 40px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.number{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;user-select:all}
/* drawers & modals */
.scrim{position:fixed;inset:0;background:rgba(10,12,11,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:41;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.12);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer h3,.modal h3{font-weight:400;font-size:26px;margin:0;letter-spacing:-.01em}
.drawer .scroll{overflow:auto;padding:18px 22px;flex:1;display:grid;gap:16px;align-content:start}
.drawer footer{border-top:1px solid var(--line);padding:16px 22px;display:grid;gap:10px}
.x{border:0;background:var(--ground);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;color:var(--ink)}
.line-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.thumb{width:56px;height:70px;border-radius:10px;overflow:hidden;background:var(--tile)}
.thumb img{width:100%;height:100%;object-fit:cover}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.qty button{border:0;background:none;width:30px;height:30px;font-size:16px}
.qty span{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.sum{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between}
.sum .total{font-weight:700;font-size:18px;border-top:1px dashed var(--line);padding-top:6px;margin-top:4px}
.field{display:grid;gap:5px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--ground);border-radius:10px;padding:10px 12px;width:100%}
.field textarea{min-height:70px;resize:vertical}
.hint{font-size:12px;color:var(--muted)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{flex:1 1 140px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.seg label:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.btn{border:1px solid var(--line);background:#fff;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.danger{color:var(--bad)}
.btn.sm{padding:6px 12px;font-size:13px;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.modal{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100% - 32px));max-height:calc(100% - 48px);overflow:auto;background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.2)}
.detail{display:grid;grid-template-columns:1fr 1fr}
.detail .ph{background:var(--tile);aspect-ratio:4/5}
.detail .ph img{width:100%;height:100%;object-fit:cover}
.detail .info{padding:26px;display:grid;gap:14px;align-content:start}
.pyramid{display:grid;gap:8px;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:12px}
.pyramid div{display:grid;grid-template-columns:64px 1fr;gap:8px;font-size:14px}
.pyramid dt{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;padding-top:2px}
.pyramid dd{margin:0}
@media (max-width:680px){.detail{grid-template-columns:1fr}.detail .ph{aspect-ratio:1/1}}
.msg-preview{white-space:pre-wrap;font-size:13px;background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.notice{border-left:3px solid var(--green);background:var(--green-soft);padding:10px 12px;border-radius:8px;font-size:14px}
/* admin */
.admin{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;padding-block:24px 90px;align-items:start}
@media (max-width:920px){.admin{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:grid;gap:14px}
.panel h3{margin:0;font-size:17px;font-weight:600}
.panel h3 + p{margin:-8px 0 0;color:var(--muted);font-size:14px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;padding:8px;border-bottom:1px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--ground)}
.pill.in{color:var(--green)}.pill.low{color:var(--warn)}.pill.out{color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:14px;display:flex;gap:14px;align-items:center;background:var(--ground)}
.drop .thumb{width:64px;height:80px;flex:none}
.banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.banners{grid-template-columns:1fr}}
.banner{display:grid;gap:6px}
.banner .thumb{width:100%;height:90px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:60;font-size:14px;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ---------- Shopfront platform ---------- */
body.tint{background:var(--ground)}
a.logo{color:inherit;text-decoration:none}
.menu-pop a{display:block;padding:10px 12px;border-radius:10px;font-weight:500;color:inherit;text-decoration:none}
.menu-pop a:hover{background:var(--ground)}
.hero.plain{background:radial-gradient(120% 140% at 90% 10%,color-mix(in srgb,var(--green) 70%,#1c1c1e) 0%,#1c1c1e 62%)}
.hero.plain::after{display:none}
.feature.plain{background:radial-gradient(120% 140% at 80% 20%,color-mix(in srgb,var(--green) 55%,#101112) 0%,#101112 65%)}
.feature.plain::after{display:none}
.notice.bad{border-left-color:var(--bad);background:#f8e9e7}
.flabel{font-size:13px;font-weight:600}
.danger-zone{border-color:#efd3cf}
.danger-zone h3{color:var(--bad)}
.cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);padding:12px 20px;text-decoration:none}
a.cta{text-decoration:none}
/* platform header */
.pnav{justify-self:start;display:flex;gap:4px;flex-wrap:wrap}
.pnav a{padding:7px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.pnav a:hover{background:var(--ground)}
.pnav a[aria-current="page"]{background:var(--ink);color:#fff}
.top-right .pill-dark{text-decoration:none}
.who-email{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.who-email{display:none}.pnav a{padding:6px 9px;font-size:13px}}
@media (max-width:560px){.top .wrap{grid-template-columns:1fr auto}.top .logo{grid-row:1;grid-column:1;justify-self:start}.top .top-right{grid-row:1;grid-column:2}.pnav{grid-row:2;grid-column:1/-1}}
/* home */
.phero{margin-top:20px;border-radius:var(--r-lg);color:#fff;padding:clamp(40px,7vw,96px) clamp(24px,6vw,72px);display:grid;gap:22px;justify-items:start;
background:radial-gradient(110% 130% at 90% 0%,#2c6452 0%,#163a2f 38%,#111312 80%)}
.phero h2{margin:0;font-weight:300;font-size:clamp(36px,6vw,70px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;max-width:13ch;text-wrap:balance}
.phero p{margin:0;color:rgba(255,255,255,.75);max-width:54ch;font-size:16px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.scard{display:grid;gap:8px;align-content:start;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;color:inherit;text-decoration:none;background:#fff;transition:transform .2s,box-shadow .2s}
a.scard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.scard h3{margin:4px 0 0;font-size:18px;font-weight:600}
.scard p{margin:0;color:var(--muted);font-size:13.5px}
.scard .meta{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.scard .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent,var(--green));margin-top:4px}
.scard .go svg{width:14px;height:14px}
.sicon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--accent,var(--green));color:#fff;flex:none}
.sicon svg{width:28px;height:28px}
.sicon.sm{width:36px;height:36px;border-radius:10px}.sicon.sm svg{width:20px;height:20px}
/* forms on platform pages */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.types label{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;cursor:pointer;font-size:14px;background:#fff}
.types label:has(input:checked){border-color:var(--green);background:var(--green-soft);font-weight:600}
.types svg{width:22px;height:22px;flex:none;color:var(--green)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches label{width:34px;height:34px;border-radius:50%;cursor:pointer;position:relative}
.swatches input{position:absolute;opacity:0;pointer-events:none}
.swatches label:has(input:checked){outline:2px solid var(--ink);outline-offset:3px}
.btn.green{text-decoration:none}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;display:grid;gap:2px}
.stat b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
/* admin chrome (shared by shop admin pages) */
.abar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:25}
.abar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px}
.abar .logo{font-size:24px}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.who .btn{text-decoration:none}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-top:20px}
.tabs .chip .n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;margin-left:6px;padding:0 5px}
.signin{max-width:440px;margin:12vh auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;gap:16px;text-align:center;justify-items:center}
.signin h2{margin:0;font-family:var(--serif);font-weight:400;font-size:32px}
.signin p{margin:0;color:var(--muted)}
.signin .big-icon svg{width:44px;height:44px;color:var(--green)}
.gbtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 20px;font-weight:600}
.gbtn svg{width:18px;height:18px}
.ocards{display:none}
@media (max-width:760px){
.otable{display:none}
.ocards{display:grid;gap:12px}
.ocard{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:6px;background:#fff}
.ocard .row{display:flex;justify-content:space-between;gap:10px;align-items:center}
}
.cat:not(:has(img)){background:radial-gradient(120% 120% at 80% 0%,color-mix(in srgb,var(--green) 65%,#1a1b1a) 0%,#1a1b1a 70%)}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* ---------- Landing look (home and platform pages) ---------- */
body.land{background:#f1f1ef}
.ptop{position:sticky;top:0;z-index:25;background:color-mix(in srgb,#f1f1ef 88%,transparent);backdrop-filter:blur(12px)}
body.tint .ptop{background:color-mix(in srgb,var(--ground) 88%,transparent)}
.ptop .wrap{display:flex;align-items:center;gap:20px;padding-block:18px}
.plogo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:24px;letter-spacing:-.03em}
.plogo svg{width:32px;height:32px;color:#fff;background:var(--green);border-radius:9px;padding:5px;stroke-width:2.2}
.ptop .pnav{margin-right:auto}
.ptop .top-right{display:flex;align-items:center;gap:10px}
.plink{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:8px 10px}
.pbtn{background:#000;color:#fff;text-decoration:none;font-weight:600;font-size:16px;border-radius:999px;padding:13px 26px;white-space:nowrap}
.pbtn:hover{background:#222}
@media (max-width:640px){.ptop .wrap{flex-wrap:wrap;gap:10px}.plink,.who-email{display:none}.pbtn{padding:10px 18px;font-size:14px}.ptop .pnav{order:3;width:100%}}
.lhero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:clamp(40px,7vw,90px) clamp(40px,6vw,70px)}
.lhero h1{margin:0;font-weight:400;font-size:clamp(40px,5.6vw,72px);line-height:1.04;letter-spacing:-.035em;color:#000;text-wrap:balance}
.lhero .lead{margin:22px 0 32px;font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:#555;max-width:40ch}
.signup{background:linear-gradient(180deg,#1b1b1b,#050505);color:#fff;border-radius:36px;padding:34px 30px 30px;max-width:640px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.signup .s1{margin:0;font-size:21px;font-weight:500}
.signup .s2{margin:4px 0 0;font-size:21px;color:rgba(255,255,255,.72)}
.signup .s3{margin:12px 0 0;font-size:13.5px;color:rgba(255,255,255,.6)}
.signup-field{margin-top:18px;display:flex;align-items:center;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:999px;padding:5px 5px 5px 26px}
.signup-field:focus-within{border-color:#777}
.signup-field input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-size:18px;padding:12px 0}
.signup-field input::placeholder{color:#e8e8e8}
.signup-field button{width:58px;height:58px;border-radius:50%;border:0;background:#fff;color:#000;display:grid;place-items:center;flex:none;transition:transform .2s}
.signup-field button:hover{transform:translateX(2px)}
.signup-field button svg{width:24px;height:24px}
.signup .s-err{margin:10px 0 0;color:#ff9b8f;font-size:14px}
.signup-go{margin-top:18px;display:inline-flex;align-items:center;gap:14px;background:#fff;color:#000;text-decoration:none;border-radius:999px;padding:8px 8px 8px 24px;font-weight:600}
.signup-go span{width:42px;height:42px;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
.signup-go svg{width:18px;height:18px}
/* storefront mock-up */
.mock{position:relative;aspect-ratio:600/460;width:100%;max-width:680px;justify-self:end}
.mock-lines{position:absolute;inset:-6% -4%;width:108%;height:112%;stroke:#c9c9c4;stroke-width:1.3}
.mock-win{position:absolute;left:4%;top:8%;width:72%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.25)}
.mock-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;font-size:12px}
.mock-bar i{font-family:var(--serif);font-size:15px;font-style:italic}
.mock-dash{width:22px;height:3px;background:#ddd;border-radius:2px}
.mock-icons{display:flex;gap:4px}.mock-icons b{width:6px;height:6px;border:1.3px solid #666;border-radius:50%}
.mock-hero{position:relative;aspect-ratio:16/7.2;overflow:hidden}
.mock-hero img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.mock-hero div{position:absolute;left:5%;bottom:10%;color:#fff;display:grid;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.mock-hero strong{font-size:clamp(16px,2.2vw,28px);font-weight:600;letter-spacing:-.02em}
.mock-hero small{font-size:9px;opacity:.85}
.mock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 6% 14px}
.mock-grid div{display:grid;gap:4px}
.mock-grid img{aspect-ratio:1/1;width:100%;object-fit:cover}
.mock-grid i{height:3px;background:#e5e5e2;border-radius:2px}.mock-grid i.short{width:55%}
.mock-card{position:absolute;right:2%;top:20%;width:30%;background:#fff;border-radius:10px;padding:8px;display:grid;gap:7px;box-shadow:0 24px 50px -18px rgba(0,0,0,.3)}
.mock-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.mock-qty{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:4px;padding:4px 10px;font-size:11px}
.mock-cart{border:1.3px solid #222;border-radius:5px;display:grid;place-items:center;padding:5px}
.mock-cart svg{width:14px;height:14px}
.mock-swatches{position:absolute;right:3%;top:72%;display:flex;gap:6px;background:#fff;border-radius:8px;padding:7px 9px;box-shadow:0 12px 30px -12px rgba(0,0,0,.25)}
.mock-swatches i{width:15px;height:15px;border-radius:50%;border:1px solid #ddd}
@media (max-width:900px){.lhero{grid-template-columns:1fr}.mock{justify-self:center;max-width:560px}}
/* scrolling band */
.band{padding-block:30px 60px;overflow:hidden}
.band h2{font-weight:400;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;margin:0 auto 40px;color:#000}
.band-track{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.band-row{display:flex;align-items:center;gap:clamp(40px,6vw,90px);width:max-content;animation:band 40s linear infinite}
.band-track:hover .band-row{animation-play-state:paused}
@keyframes band{to{transform:translateX(-50%)}}
.bw{white-space:nowrap;color:#000;font-size:clamp(28px,3.4vw,46px);line-height:1}
.bw0{font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.bw1{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(32px,3.8vw,52px)}
.bw2{font-weight:800;letter-spacing:-.06em;text-transform:uppercase;transform:scaleY(1.15)}
.bw3{font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px)}
.bw4{font-family:Georgia,serif;font-weight:700}
.bw5{font-weight:600;letter-spacing:-.03em}
@media (prefers-reduced-motion:reduce){.band-row{animation:none}}
.lsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lsteps .step{background:#fff}
@media (max-width:720px){.lsteps{grid-template-columns:1fr}}
body.land .scard{border-color:#e4e4e0}
/* landing fixes */
body.land main{overflow-x:clip}
@media (max-width:900px){.lhero{grid-template-columns:minmax(0,1fr)}}
.ptop .pnav a[aria-current="page"]{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:0;padding-inline:2px;margin-inline:8px}
.mock-swatches{top:auto;bottom:6%}
.empty a{color:var(--green);font-weight:600}
@media (max-width:640px){.signup{padding:26px 20px 22px;border-radius:28px}.signup .s1,.signup .s2{font-size:18px}.signup-field{padding-left:18px}.signup-field input{font-size:16px}.signup-field button{width:50px;height:50px}}
/* rotating example shops in the mock-up */
.mock-wrap{justify-self:end;width:100%;max-width:680px;display:grid;gap:14px}
.mock-wrap .mock{justify-self:stretch;max-width:none}
.mock-set{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.mock-set.on{opacity:1;transform:none}
.mock-nav{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;color:var(--muted)}
.mock-label{font-weight:600;color:var(--ink);min-width:15ch;text-align:right}
.mock-dots{display:flex;gap:6px}
.mock-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:#cfcfca;transition:width .3s,background .3s}
.mock-dot[aria-pressed="true"]{width:22px;background:var(--ink)}
@media (max-width:900px){.mock-wrap{justify-self:center;max-width:560px}}
@media (prefers-reduced-motion:reduce){.mock-set{transition:none}}
.mock-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 70%)}
.mock-hero div{z-index:1}
/* ---------- preview bar & design picker ---------- */
.theme-preview{background:#111;color:#fff;text-align:center;font-size:13.5px;padding:9px 16px}
.theme-preview a{color:#fff;font-weight:600}
.designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.design{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:grid;gap:8px;align-content:start;background:#fff}
.design.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}
.design h4{margin:4px 0 0;font-size:16px}
.design p{margin:0;font-size:13px;color:var(--muted)}
.dthumb{aspect-ratio:4/3;border-radius:10px;background:#fff;border:1px solid var(--line);padding:8px;display:grid;gap:6px;align-content:start;overflow:hidden}
.dthumb i{display:flex;gap:5px;font-style:normal}.dthumb b{flex:1;border-radius:3px;background:#e7e7e3}
.dthumb .t-dark{height:44px;border-radius:6px;background:#1c1c1e}.dthumb .t-row4 b,.dthumb .t-row3 b{height:30px}.dthumb .t-row2 b{height:26px}
.dthumb-boutique{background:#faf7f2}.dthumb .t-split{height:52px}.dthumb .t-cream{background:#efe7da}.dthumb .t-photo{background:color-mix(in srgb,var(--green) 55%,#bbb)}
.dthumb .t-line{height:3px;width:50%;margin:0 auto;background:#ccc;border-radius:2px}.dthumb .t-row3 b{height:40px;border-radius:0}
.dthumb .t-accent{height:50px;border-radius:8px;background:var(--green);justify-content:flex-end;padding:6px}.dthumb .t-circle{flex:0 0 38px;border-radius:50%;background:#ffd166}
.dthumb .t-stripe{height:10px;background:#111;border-radius:2px}.dthumb .t-tints b:nth-child(1){background:#ffe1d1}.dthumb .t-tints b:nth-child(2){background:#d6eeff}.dthumb .t-tints b:nth-child(3){background:#e2f6d6}.dthumb .t-tints b:nth-child(4){background:#fff0b3}
.dthumb .t-search{height:10px;border-radius:999px;border:1.5px solid #ccc;width:70%;margin:0 auto}.dthumb .t-chips b{height:7px;border-radius:999px;background:var(--green-soft)}
.dthumb .t-banner{height:30px}.dthumb .t-banner b:first-child{flex:2.2;background:color-mix(in srgb,var(--green) 70%,#222)}.dthumb .t-row5 b{height:22px;border:1px solid #e3e3df;background:#fff}
/* ---------- product search page ---------- */
.psearch{text-align:center;padding-block:clamp(30px,5vw,60px) 20px;display:grid;justify-items:center;gap:12px}
.psearch h1{margin:0;font-weight:400;font-size:clamp(34px,4.6vw,58px);letter-spacing:-.035em;color:#000}
.psearch p{margin:0;color:#555;font-size:17px}
.psearch-box{display:flex;align-items:center;gap:10px;width:min(720px,100%);background:#fff;border:1px solid #ddd;border-radius:999px;padding:6px 6px 6px 22px;box-shadow:0 10px 30px -18px rgba(0,0,0,.3);margin-top:10px}
.psearch-box:focus-within{border-color:#999}
.psearch-box svg{width:20px;height:20px;flex:none;color:#666}
.psearch-box input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:17px;padding:12px 0}
.psearch-box .pbtn{border:0;padding:12px 22px;font-size:15px;cursor:pointer}
.ptools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:18px}
.ptools-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.ptools-right select{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:#fff}
.tick{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.xcard{text-decoration:none;color:inherit;background:#fff;border-radius:var(--r-md);padding:10px 10px 14px;border:1px solid #e6e6e2;transition:transform .2s,box-shadow .2s}
.xcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.xcard .ph{display:block;border-radius:10px}
.xcard .nophoto{display:grid;place-items:center;height:100%;color:var(--muted);font-size:13px}
.xshop{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.sicon.xs{width:20px;height:20px;border-radius:6px}.sicon.xs svg{width:13px;height:13px}
.xgo{font-size:12px;font-weight:700;color:var(--accent,var(--green));white-space:nowrap}
.xcard .buy{flex-wrap:wrap}
.hsearch{text-align:center;display:grid;justify-items:center;gap:8px;padding-block:70px 10px}
.hsearch h2{margin:0;font-weight:400;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;color:#000}
.hsearch p{margin:0;color:#555}
/* ---------- Design: Boutique ---------- */
body.theme-boutique{background:#faf7f2}
.theme-boutique .top{background:rgba(250,247,242,.94)}
.theme-boutique .logo{font-size:34px}
.b-announce{background:var(--green);color:#fff;text-align:center;font-size:12.5px;letter-spacing:.06em;padding:8px 16px}
.b-hero{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(380px,48vw,600px);margin-top:8px}
.b-hero-copy{background:#efe7da;display:grid;align-content:center;justify-items:start;gap:18px;padding:clamp(28px,5vw,70px)}
.b-tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);font-weight:700}
.b-hero h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.01em}
.b-hero p{margin:0;color:#6b6257;max-width:36ch;font-size:16px}
.b-hero-img{background:color-mix(in srgb,var(--green) 45%,#cbbfae);overflow:hidden}
.b-hero-img img{width:100%;height:100%;object-fit:cover}
.b-btn{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:13px 26px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer}
.b-btn:hover{background:var(--green);border-color:var(--green)}
.b-cats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;padding-block:34px 10px}
.b-cats button{border:0;background:none;font-family:var(--serif);font-size:22px;color:#6b6257;padding:4px 0;border-bottom:1px solid transparent}
.b-cats button[aria-pressed="true"],.b-cats button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.b-tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-block:30px}
.b-tile{border:0;background:none;padding:0;text-align:center;display:grid;gap:8px;justify-items:center}
.b-tile-img{width:100%;aspect-ratio:4/3;overflow:hidden;background:color-mix(in srgb,var(--green) 30%,#e6dccd)}
.b-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.b-tile:hover img{transform:scale(1.04)}
.b-tile h3{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:28px}
.b-tile p{margin:0;color:#6b6257;font-size:14px}
.b-link{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:2px}
.b-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:50px 26px;border-bottom:1px solid #e3dccf;margin-bottom:30px}
.b-head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px)}
.theme-boutique .search{background:transparent;border-color:#d9d0c1}
.b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 30px}
.b-card{display:grid;gap:6px;justify-items:center;text-align:center}
.b-card .ph{position:relative;width:100%;aspect-ratio:3/4;border:0;padding:0;overflow:hidden;background:#ece5d9}
.b-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.b-card:hover .ph img{transform:scale(1.04)}
.b-card h3{margin:10px 0 0;font-family:var(--serif);font-weight:500;font-size:22px}
.b-meta{font-size:12px;color:#8b8274;letter-spacing:.06em;text-transform:uppercase}
.b-add{margin-top:6px;border:0;background:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border-bottom:1px solid currentColor;padding:2px 0;cursor:pointer}
.b-add:disabled{color:var(--muted);cursor:not-allowed}
.b-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;padding-block:90px 20px}
.b-feature-img{aspect-ratio:4/5;overflow:hidden;background:#ece5d9}.b-feature-img img{width:100%;height:100%;object-fit:cover}
.b-feature-copy{display:grid;gap:16px;justify-items:start}
.b-feature-copy h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px)}
.b-feature-copy p{margin:0;color:#6b6257}
.b-feature-copy .pyramid{width:100%}
.b-statement{text-align:center;display:grid;justify-items:center;gap:30px;padding-block:90px 60px}
.b-statement p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,36px);max-width:30ch}
.theme-boutique .step{background:#fff;border-radius:0}
.theme-boutique .foot{border-top-color:#e3dccf}
@media (max-width:760px){.b-hero,.b-tiles,.b-feature{grid-template-columns:1fr}.b-hero-img{min-height:320px;order:-1}.b-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}.b-card h3{font-size:18px}}
/* ---------- Design: Bold ---------- */
body.theme-bold{background:#fffdf7}
.theme-bold .logo{font-family:var(--sans);font-weight:800;letter-spacing:-.04em}
.theme-bold .pill-dark{background:var(--green)}
.o-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;background:var(--green);color:#fff;border-radius:32px;padding:clamp(28px,5vw,64px);margin-top:8px;overflow:hidden;position:relative}
.o-hero h2{margin:14px 0;font-weight:800;font-size:clamp(42px,6.4vw,92px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.o-hero p{margin:0 0 24px;font-size:18px;opacity:.85;max-width:34ch}
.o-sticker{display:inline-block;background:#ffd166;color:#111;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;transform:rotate(-3deg)}
.o-btn{display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;border:0;border-radius:999px;padding:15px 26px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:4px 4px 0 #ffd166;transition:transform .15s,box-shadow .15s}
.o-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #ffd166}
.o-btn svg{width:18px;height:18px}.o-btn.sm{padding:10px 18px;font-size:13px}
.o-hero-img{aspect-ratio:1/1;border-radius:46% 54% 42% 58%/52% 44% 56% 48%;overflow:hidden;border:6px solid #fff;transform:rotate(3deg);background:#ffd166;display:grid;place-items:center}
.o-hero-img img{width:100%;height:100%;object-fit:cover;transform:rotate(-3deg) scale(1.08)}
.o-blob svg{width:40%;height:40%;color:#111}.o-blob{display:grid;place-items:center;width:100%;height:100%}
.o-band{background:#111;color:#fff;overflow:hidden;margin-block:28px;transform:rotate(-1.2deg)}
.o-band-row{display:flex;align-items:center;gap:22px;width:max-content;padding:14px 0;animation:band 30s linear infinite;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.o-band-row i{color:#ffd166;font-style:normal}
.o-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.o-tile{border:0;border-radius:28px;background:var(--tint);padding:26px;display:grid;grid-template-columns:1fr 42%;gap:16px;align-items:center;text-align:left;overflow:hidden;cursor:pointer}
.o-tile h3{margin:0 0 6px;font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.o-tile p{margin:0 0 16px;color:#333;font-size:14px}
.o-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;transform:rotate(4deg)}
.o-head{display:grid;justify-items:center;gap:16px;text-align:center;padding-block:60px 30px}
.o-head h2{margin:0;font-weight:800;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.045em;line-height:1}
.theme-bold .chip{font-weight:700;border-width:2px;border-color:#111}
.theme-bold .chip[aria-pressed="true"]{background:#111;border-color:#111}
.o-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.o-card{background:var(--tint);border-radius:24px;padding:10px;display:grid;gap:10px;align-content:start;transition:transform .2s}
.o-card:hover{transform:rotate(-1deg) translateY(-3px)}
.o-card .ph{position:relative;width:100%;aspect-ratio:1/1;border:0;padding:0;border-radius:18px;overflow:hidden;background:#fff}
.o-card .ph img{width:100%;height:100%;object-fit:cover}
.o-body{padding:0 6px 6px;display:grid;gap:4px}
.o-body h3{margin:0;font-weight:800;font-size:17px;letter-spacing:-.02em}
.o-meta{font-size:12.5px;color:#444}
.o-buy{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.theme-bold .price{font-size:20px;font-weight:800}
.o-add{width:44px;height:44px;border-radius:50%;border:0;background:#111;color:#fff;display:grid;place-items:center;flex:none;cursor:pointer;transition:transform .15s}
.o-add:hover{transform:scale(1.1) rotate(-8deg)}.o-add:disabled{background:#bbb;cursor:not-allowed}
.o-add svg{width:18px;height:18px}
.o-feature{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:#111;color:#fff;border-radius:32px;padding:clamp(24px,4vw,50px);margin-top:70px}
.o-feature-img{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:#333}.o-feature-img img{width:100%;height:100%;object-fit:cover}
.o-feature-copy{display:grid;gap:14px;justify-items:start}
.o-feature-copy h3{margin:0;font-weight:800;font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1}
.o-feature-copy p{margin:0;opacity:.8}
.o-feature .o-btn{background:#ffd166;color:#111;box-shadow:4px 4px 0 #fff}
.theme-bold .step{background:#fff;border:2px solid #111;border-radius:18px}
.theme-bold .step b{color:#111}
@media (max-width:900px){.o-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.o-hero,.o-tiles,.o-feature{grid-template-columns:1fr}.o-hero-img{max-width:320px;justify-self:center}.o-tile{grid-template-columns:1fr 38%}}
@media (prefers-reduced-motion:reduce){.o-band-row{animation:none}}
/* ---------- Design: Market ---------- */
body.theme-market{background:#f4f5f7}
.m-header{background:#fff;border-bottom:1px solid #e6e7ea}
.m-headrow{display:flex !important;align-items:center;gap:18px;padding-block:12px !important}
.theme-market .logo{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.03em}
.m-search{flex:1;display:flex;align-items:center;gap:10px;background:#f1f2f4;border:1px solid #e3e4e8;border-radius:12px;padding:0 14px;max-width:640px;margin-inline:auto}
.m-search:focus-within{border-color:var(--green);background:#fff}
.m-search svg{width:18px;height:18px;color:#777;flex:none}
.m-search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:11px 0;font-size:15px}
.theme-market .pill-dark{background:var(--green)}
.m-catbar{border-top:1px solid #eef0f2}
.m-catbar .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.m-catbar .chip{white-space:nowrap;border-radius:8px;background:#f4f5f7;border-color:transparent}
.m-catbar .chip[aria-pressed="true"]{background:var(--green);color:#fff}
.m-top{display:grid;grid-template-columns:2.2fr 1fr;gap:14px;padding-top:18px}
.m-banner{position:relative;border-radius:14px;overflow:hidden;min-height:280px;display:flex;align-items:center;background:#222;color:#fff}
.m-banner.plain{background:linear-gradient(110deg,var(--green),color-mix(in srgb,var(--green) 40%,#000))}
.m-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.05) 70%)}
.m-banner.plain::after{display:none}
.m-banner > div{position:relative;z-index:1;padding:clamp(20px,4vw,44px);display:grid;gap:10px;justify-items:start;max-width:520px}
.m-tag{background:#ffd23f;color:#111;font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.m-banner h2{margin:0;font-weight:800;font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em}
.m-banner p{margin:0;opacity:.85}
.m-cta{border:0;background:var(--green);color:#fff;font-weight:700;padding:12px 22px;border-radius:10px;cursor:pointer}
.m-banner .m-cta{background:#fff;color:#111}
.m-promos{display:grid;gap:14px}
.m-promo{position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--green) 70%,#222);color:#fff;text-align:left;cursor:pointer;min-height:120px}
.m-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-promo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 60%)}
.m-promo div{position:absolute;left:14px;bottom:12px;z-index:1;display:grid}
.m-promo b{font-size:18px}.m-promo span{font-size:12.5px;opacity:.9}
.m-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.m-perks span{background:#fff;border-radius:10px;padding:12px 14px;font-size:13.5px;font-weight:600;text-align:center;border:1px solid #e9eaed}
.m-sec{padding-top:34px}
.m-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.m-sec-head h2{margin:0;font-weight:800;font-size:22px;letter-spacing:-.02em}
.m-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.m-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.m-card{background:#fff;border:1px solid #e6e7ea;border-radius:12px;overflow:hidden;display:grid;align-content:start;transition:box-shadow .2s}
.m-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.08)}
.m-card .ph{position:relative;aspect-ratio:1/1;border:0;padding:0;background:#f4f5f7;width:100%}
.m-card .ph img{width:100%;height:100%;object-fit:cover}
.m-off{position:absolute;top:8px;right:8px;background:#e53935;color:#fff;font-size:11.5px;font-weight:800;padding:3px 7px;border-radius:6px}
.m-body{padding:10px 12px 12px;display:grid;gap:4px}
.m-body h3{margin:0;font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.m-meta{font-size:12px;color:var(--muted)}
.theme-market .price{font-size:17px;font-weight:800}
.m-add{margin-top:6px;border:0;border-radius:8px;background:var(--green);color:#fff;font-weight:700;font-size:13px;padding:9px;cursor:pointer}
.m-add:hover{filter:brightness(1.1)}.m-add:disabled{background:#d7d8dc;color:#777;cursor:not-allowed}
.theme-market .step{background:#fff;border:1px solid #e6e7ea}
@media (max-width:1000px){.m-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:800px){.m-top{grid-template-columns:1fr}.m-promos{grid-template-columns:1fr 1fr}.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.m-perks{grid-template-columns:1fr}}
@media (max-width:560px){.m-headrow{flex-wrap:wrap}.m-search{order:3;flex-basis:100%}}
body.shop main{overflow-x:clip}
/* ---------- Sign-in & message screens ---------- */
.auth{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-block:28px 70px;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -40px rgba(0,0,0,.35);min-height:560px}
.auth-side{position:relative;background:radial-gradient(120% 120% at 0% 0%,#2c6452 0%,#163a2f 45%,#0e1a15 100%);color:#fff;padding:clamp(28px,4vw,52px);display:grid;align-content:start;gap:20px;overflow:hidden}
.auth-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.auth-logo svg{width:30px;height:30px;padding:5px;border-radius:9px;background:rgba(255,255,255,.14)}
.auth-side h2{margin:6px 0 0;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.03em;max-width:15ch}
.auth-side ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;color:rgba(255,255,255,.85)}
.auth-side li{display:flex;gap:10px;align-items:center}
.auth-side li svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;background:#ffd166;color:#163a2f}
.auth-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;transform:rotate(-4deg) translate(6%,4%);width:105%}
.auth-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.auth-photos img:nth-child(even){transform:translateY(18px)}
.auth-main{display:grid;place-items:center;padding:clamp(28px,5vw,60px);background:linear-gradient(180deg,#fff,#f7f7f4)}
.auth-box{width:min(380px,100%);display:grid;gap:14px;justify-items:center;text-align:center}
.auth-icon svg{width:46px;height:46px;padding:9px;border-radius:14px;color:#fff;background:var(--green)}
.auth-box h1{margin:4px 0 0;font-weight:500;font-size:clamp(28px,3vw,36px);letter-spacing:-.03em}
.auth-text{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.auth-actions{display:grid;gap:12px;width:100%;justify-items:center;margin-top:8px}
.auth-actions .gbtn{width:100%;justify-content:center;padding:14px 20px;font-size:15px;border-color:#d9d9d4;box-shadow:0 2px 0 rgba(0,0,0,.03);transition:background .2s,border-color .2s}
.auth-actions .gbtn:hover{background:#f6f6f3;border-color:#bbb}
.auth-actions .hint{margin:0}
.auth-actions .btn{text-decoration:none}
.auth-err{margin:0;color:var(--bad);font-size:14px}
.auth-back{font-size:13.5px;color:var(--muted);text-decoration:none;margin-top:6px}
.auth-back:hover{color:var(--ink)}
@media (max-width:820px){.auth{grid-template-columns:1fr;min-height:0;margin-block:16px 40px}.auth-side{order:2;padding:26px}.auth-photos{display:none}.auth-main{padding:36px 22px}}
/* ---------- Platform footer ---------- */
.pfoot{background:#0f1512;color:rgba(255,255,255,.72);margin-top:60px;padding-top:56px}
.pfoot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;padding-bottom:44px}
.pfoot .plogo{color:#fff}
.pfoot .plogo svg{background:#2c6452}
.pfoot-brand{display:grid;gap:16px;justify-items:start}
.pfoot-brand p{margin:0;max-width:36ch;font-size:14.5px;line-height:1.6}
.pbtn.light{background:#fff;color:#000;font-size:14px;padding:11px 22px}
.pbtn.light:hover{background:#e9e9e6}
.pfoot nav{display:grid;gap:10px;align-content:start}
.pfoot h4{margin:0 0 4px;color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.pfoot nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px}
.pfoot nav a:hover{color:#fff}
.pfoot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-block:20px 28px;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-width:820px){.pfoot-grid{grid-template-columns:1fr 1fr}.pfoot-brand{grid-column:1/-1}}
body.land .pfoot,body.tint .pfoot{margin-top:70px}
/* ---------- FAQs ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,70px);padding-top:90px;align-items:start}
.faq-head{display:grid;gap:14px;justify-items:start;position:sticky;top:100px}
.faq-head h2{margin:0;font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.035em;color:#000}
.faq-head p{margin:0;color:#555;max-width:32ch}
.faq-list{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid #e4e4e0;border-radius:18px;padding:0 22px;transition:box-shadow .2s}
.faq details[open]{box-shadow:0 14px 34px -22px rgba(0,0,0,.35)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:16.5px;color:#000}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:#f1f1ef;display:grid;place-items:center;font-size:20px;font-weight:400;transition:transform .25s,background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--green);color:#fff}
.faq details > div{padding:0 0 20px;color:#555;line-height:1.65}
.faq details > div p{margin:0}
@media (max-width:820px){.faq{grid-template-columns:1fr;padding-top:60px}.faq-head{position:static}}
.auth{width:min(1192px,calc(100% - 48px));margin-inline:auto}
@media (max-width:520px){.auth{width:calc(100% - 32px)}}
/* ---------- FAQ page ---------- */
.faq-hero{text-align:center;display:grid;justify-items:center;gap:14px;padding-block:clamp(40px,6vw,80px) 10px}
.faq-hero h1{margin:0;font-weight:400;font-size:clamp(36px,5vw,62px);letter-spacing:-.035em;line-height:1.04;color:#000}
.faq-hero p{margin:0;color:#555;font-size:17px;max-width:52ch}
.faq.faq-page{display:block;max-width:860px;padding-top:36px}
.faq-cta{margin-top:70px;background:radial-gradient(120% 140% at 100% 0%,#2c6452 0%,#163a2f 45%,#0e1a15 100%);color:#fff;border-radius:28px;padding:clamp(28px,4vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;max-width:860px}
.faq-cta h2{margin:0 0 6px;font-weight:400;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
.faq-cta p{margin:0;color:rgba(255,255,255,.75)}
.faq-more{display:inline-block;margin-top:16px;font-weight:600;color:var(--green);text-decoration:none}
.faq-more:hover{text-decoration:underline}
.pbtn.ghost{background:transparent;color:#000;box-shadow:inset 0 0 0 1.5px #000}
.pbtn.ghost:hover{background:#000;color:#fff}
/* ---------- Shop cards with the shop's blurred banner behind ---------- */
.scard{position:relative;overflow:hidden;isolation:isolate;border:0;color:#fff;min-height:230px;align-content:end;padding:22px;
background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--accent,var(--green)) 85%,#fff) 0%,var(--accent,var(--green)) 45%,color-mix(in srgb,var(--accent,var(--green)) 55%,#000) 100%)}
.scard-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(7px) saturate(1.15);z-index:-2;transition:transform .6s ease}
.scard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.78) 100%)}
a.scard:hover .scard-bg{transform:scale(1.06)}
a.scard:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.scard h3{color:#fff;font-size:20px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.scard .meta{color:rgba(255,255,255,.75)}
.scard p,.scard .hint{color:rgba(255,255,255,.85)}
.scard .go{color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:999px;padding:7px 14px;justify-self:start;margin-top:6px}
.scard .go svg{width:14px;height:14px}
.scard .btn{background:rgba(255,255,255,.92);border-color:transparent;color:var(--ink)}
.scard .btn.green{background:#fff;color:var(--ink)}
body.land .scard{border:0}
/* ---------- Pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;padding-top:30px}
.price-card{position:relative;background:#fff;border:1px solid #e4e4e0;border-radius:24px;padding:28px;display:grid;gap:14px}
.price-card.popular{border:2px solid var(--green);box-shadow:0 26px 60px -34px rgba(0,0,0,.45);transform:translateY(-8px)}
.price-badge{position:absolute;top:-13px;left:28px;background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.price-card h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.price-blurb{margin:0;color:#666;font-size:14.5px;min-height:2.6em}
.price-amount{display:flex;align-items:baseline;gap:8px}
.price-amount b{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1}
.price-amount span{color:#666;font-size:14px}
.price-card .pbtn{text-align:center;justify-self:stretch}
.price-card ul{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid #eee;display:grid;gap:10px;font-size:14.5px}
.price-card li{display:flex;gap:10px;align-items:flex-start}
.price-card li svg{width:18px;height:18px;flex:none;color:var(--green);margin-top:2px}
.pay-steps{padding-top:70px;max-width:1000px}
.pay-steps h2{text-align:center;margin:0 0 22px;font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.pay-steps .step{background:#fff}
.pay-steps .step a,.pay-steps .hint a{color:var(--green);font-weight:600}
@media (max-width:900px){.prices{grid-template-columns:1fr;max-width:480px}.price-card.popular{transform:none}}
/* plan status on My shops */
.plan-card{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r-md);padding:18px 22px;max-width:760px;margin:0 auto 24px}
.plan-card.ended{border-left-color:var(--bad);background:#fdf6f5}
.plan-card h3{margin:6px 0 4px;font-size:20px}
.plan-card p{margin:0;color:#555;font-size:14.5px}
.plan-actions{display:flex;gap:8px;flex-wrap:wrap}
.plan-actions .btn{text-decoration:none}
.bad-text{color:var(--bad)}
.notice a{color:inherit;font-weight:700}
/* security-check notice (App Check failed) */
.check-note{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:90;width:min(620px,calc(100% - 32px));display:flex;gap:14px;align-items:center;justify-content:space-between;background:#1c1c1e;color:#fff;border-radius:16px;padding:14px 16px 14px 20px;box-shadow:0 18px 40px rgba(0,0,0,.3);font-size:14px;line-height:1.5}
.check-note button{flex:none;border:0;border-radius:999px;background:#fff;color:#000;font-weight:700;padding:9px 16px;cursor:pointer}
@media (max-width:520px){.check-note{flex-direction:column;align-items:stretch;text-align:center}}