:root{
  --ink:#12201d; --ink2:#1b2e2a; --teal:#4d897f; --teal-d:#2c5c53; --orange:#ef7a12; --orange-d:#c25d05;
  --cream:#f5efe6; --paper:#fbf8f3; --muted:#5b6b67; --line:#d9d1c4;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--body);color:var(--ink);background:var(--paper);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

.demo-bar{background:var(--ink);color:#d8e6e2;font-size:13px;text-align:center;padding:6px 12px}
header.top{position:sticky;top:0;z-index:40;background:rgba(251,248,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 19px/1 var(--display);letter-spacing:-.02em}
.brand img{width:40px;height:40px;border-radius:10px}
.top nav{margin-left:auto;display:flex;gap:4px}
.top nav a{text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover,.top nav a[aria-current]{background:var(--cream)}
.bag-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:0 16px;min-height:44px;font-weight:700}
.bag-btn b{background:var(--orange);color:var(--ink);min-width:24px;height:24px;border-radius:12px;display:grid;place-items:center;font-size:13px}
@media(max-width:640px){.top nav a.hide-sm{display:none}.brand span{display:none}}

/* hero */
.hero{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:min(86vh,760px);gap:20px;padding-block:40px}
.kicker{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.kicker:before{content:"";width:28px;height:2px;background:currentColor}
.hero h1{font:800 clamp(56px,11vw,138px)/.86 var(--display);letter-spacing:-.045em;margin:16px 0 18px}
.hero h1 .o{color:transparent;-webkit-text-stroke:2px var(--orange)}
.hero p.lede{font-size:clamp(17px,2vw,20px);max-width:30ch;color:#cfe0dc}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.or{background:var(--orange);color:var(--ink)}
.btn.or:hover{background:#ff8d2b}
.btn.ghost{border-color:#5e7b75;color:var(--cream)}
.btn.dark{background:var(--ink);color:#fff}
.stage{position:relative;aspect-ratio:1/1.05;width:100%;max-width:560px;justify-self:center}
.stage canvas{width:100%!important;height:100%!important;display:block;touch-action:pan-y}
.stage .fallback{position:absolute;inset:8%;border-radius:28px;object-fit:cover;width:84%;height:84%}
.stage .ring{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#2c5c53 0,#1b2e2a 55%,transparent 70%)}
.swatches{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(18,32,29,.75);padding:8px 12px;border-radius:999px;border:1px solid #2f4843}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:var(--c);padding:0}
.swatches button[aria-pressed=true]{border-color:var(--orange)}
.stage .hint{position:absolute;top:4%;right:2%;font-size:13px;color:#a9c3be;background:rgba(18,32,29,.7);padding:6px 10px;border-radius:999px}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:32px 24px}.stage{max-width:420px}}

.ticker{background:var(--orange);color:var(--ink);overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink)}
.ticker div{display:inline-flex;gap:40px;padding:12px 0;font:800 18px/1 var(--display);letter-spacing:.01em;animation:tick 28s linear infinite}
.ticker span:after{content:"✦";margin-left:40px}
@keyframes tick{to{transform:translateX(-50%)}}

section{padding:72px 0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px}
h2{font:800 clamp(34px,6vw,64px)/.95 var(--display);letter-spacing:-.035em}
h2 em{font-style:normal;color:var(--orange-d)}
.sub{color:var(--muted);max-width:46ch}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;text-decoration:none;color:#fff;transform-style:preserve-3d;transition:transform .3s}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover img{transform:scale(1.05)}
.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(18,32,29,.88))}
.cat b{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font:800 clamp(20px,2.4vw,28px)/1 var(--display)}
.cat small{display:block;font:600 14px var(--body);color:var(--orange);margin-top:6px}
@media(max-width:760px){.cats{grid-template-columns:repeat(2,1fr)}}

/* products */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px;scrollbar-width:none}
.filters button{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:700;font-size:15px}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 16px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}}
.card{display:flex;flex-direction:column;perspective:900px}
.card .ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream);aspect-ratio:2/3;transition:transform .25s ease;transform-style:preserve-3d}
.card .ph img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:10px;left:10px;background:var(--orange);color:var(--ink);font:800 13px/1 var(--body);padding:7px 10px;border-radius:999px}
.card h3{font:700 16px/1.3 var(--body);margin:12px 0 4px}
.price{display:flex;gap:8px;align-items:baseline}
.price b{font:800 20px var(--display)}
.price s{color:var(--muted);font-size:14px}
.sizes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.sizes button{min-width:44px;min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:14px}
.sizes button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.add{margin-top:auto;min-height:48px;border-radius:14px;border:0;background:var(--teal-d);color:#fff;font-weight:700}
.add:hover{background:var(--ink)}
.add.need{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.stepper{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--teal-d);border-radius:14px;min-height:48px}
.stepper button{width:48px;height:44px;border:0;background:none;font-size:22px;font-weight:700;color:var(--teal-d)}
.stepper span{font-weight:700;font-size:15px}
@media(max-width:400px){.card h3{font-size:15px}.sizes button{min-width:44px;font-size:13px}}

/* why */
.why{background:var(--teal-d);color:#fff}
.why h2 em{color:#ffb36b}
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #5d8a82}
.why-list li{list-style:none;padding:24px 20px 24px 0;border-bottom:1px solid #5d8a82}
.why-list b{display:block;font:800 26px/1.1 var(--display);margin-bottom:6px}
.why-list p{color:#e1eeeb}
@media(max-width:760px){.why-list{grid-template-columns:1fr}}
.why ul{padding:0}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.steps li{list-style:none;background:var(--cream);border-radius:var(--r);padding:26px;counter-increment:s;position:relative}
.steps li:before{content:"0" counter(s);font:800 54px/1 var(--display);color:var(--orange-d);display:block;margin-bottom:10px}
.steps b{font:800 22px/1.2 var(--display)}
.steps{padding:0}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* lookbook strip */
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.strip img{flex:none;width:min(260px,62vw);aspect-ratio:2/3;object-fit:cover;border-radius:var(--r);scroll-snap-align:start}

/* contact */
.contact{background:var(--ink);color:var(--cream)}
.contact .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.contact p{color:#cfe0dc}
.links{display:grid;gap:10px}
.links a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 20px;border:1.5px solid #3b5550;border-radius:14px;text-decoration:none;font-weight:700}
.links a:hover{border-color:var(--orange);color:var(--orange)}
@media(max-width:760px){.contact .wrap{grid-template-columns:1fr}}
footer{background:var(--ink);color:#9fb6b1;border-top:1px solid #2c403c;padding:22px 0 110px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* cart */
.cartbar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:50;width:min(560px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;border-radius:20px;padding:10px 10px 10px 20px;box-shadow:0 14px 40px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.cartbar.show{transform:translate(-50%,0)}
.cartbar b{font:800 18px var(--display)}
.cartbar button{background:var(--orange);color:var(--ink);border:0;border-radius:14px;min-height:48px;padding:0 20px;font-weight:800}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(10,18,16,.55)}
.drawer aside{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--paper);display:flex;flex-direction:column;animation:slide .3s ease}
@keyframes slide{from{transform:translateX(100%)}}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer h2{font-size:30px}
.x{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:20px}
.lines{flex:1;overflow:auto;padding:12px 20px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line img{width:64px;height:86px;object-fit:cover;border-radius:10px}
.line h4{font:700 15px/1.3 var(--body)}
.line small{color:var(--muted);font-size:14px}
.line .stepper{min-height:44px;width:120px}
.line .stepper button{width:40px}
.form{padding:14px 20px;border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.form label{font-size:14px;font-weight:700;display:grid;gap:4px}
.form input,.form textarea,.form select{font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);min-height:46px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.total{display:flex;justify-content:space-between;font:800 22px var(--display)}
.wa{min-height:54px;border:0;border-radius:14px;background:#1f7a4a;color:#fff;font-weight:800;font-size:17px}
.note{font-size:13px;color:var(--muted)}
.empty{padding:40px 0;text-align:center;color:var(--muted)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.page-hero{background:var(--ink);color:var(--cream);padding:56px 0 40px}
.page-hero h1{font:800 clamp(48px,10vw,110px)/.9 var(--display);letter-spacing:-.04em}
.page-hero p{color:#cfe0dc;margin-top:12px;max-width:50ch}
.stage .fallback{display:none}
.stage.static .fallback{display:block}
.stage.static .swatches,.stage.static .hint{display:none}