:root{--ink:#161616;--plum:#46305f;--tile:#f1f0f3;--lav:#e8e4f8;--mut:#6b6b73;--line:#e3e2e8}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font:15px/1.55 Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}a{color:inherit;text-decoration:none}
.serif,h1,h2,h3.s{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.01em}
.btn{display:inline-block;background:#111;color:#fff;padding:16px 30px;font-weight:500}.btn:hover{background:var(--plum)}
.ann{background:var(--plum);color:#fff;text-align:center;padding:10px 16px;font-size:14px}
header{position:sticky;top:0;z-index:30;background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px;padding:0 28px}
nav{display:flex;gap:28px}nav a:hover{text-decoration:underline;text-underline-offset:6px}
.logo{font-size:24px;letter-spacing:.55em;margin-right:-.55em;font-weight:500}
.ic{justify-self:end;display:flex;gap:18px;align-items:center}.ic svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.6}
.cb{position:relative}.cb i{position:absolute;top:-7px;right:-9px;background:var(--plum);color:#fff;font:600 11px/18px Inter;min-width:18px;text-align:center;border-radius:9px;font-style:normal}
#mb{display:none}
.hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:540px;background:#f6f3f0}
.hero .t{padding:70px 7%;align-self:center}.hero .e{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:clamp(40px,5vw,66px);line-height:1.05;margin:14px 0 20px}.hero p{font-size:18px;margin-bottom:30px;max-width:30ch}
.hero .a{background:linear-gradient(135deg,#d9d2f5,#b9b0ec 60%,#46305f);position:relative;overflow:hidden}
.hero .a svg{position:absolute}
.cats{display:flex;gap:18px;padding:44px 28px 36px;overflow-x:auto;scrollbar-width:none}
.cat{flex:0 0 96px;text-align:center;font-size:14px}.cat .b{width:96px;height:96px;border-radius:16px;display:grid;place-items:center;background:var(--tile);margin-bottom:8px;border:2px solid transparent;outline:2px solid transparent;outline-offset:2px}
.cat .b svg{width:78px}.cat.on .b{outline-color:#111}
.bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar div{display:flex;gap:14px;align-items:center}.bar input,.bar select{border:1px solid var(--line);padding:9px 12px;font:inherit;background:#fff}
.dens button{width:22px;height:22px;opacity:.35}.dens button.on{opacity:1}.dens svg{width:22px;fill:#111}
.grid{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:1px;background:var(--line)}
.card{background:#fff;display:flex;flex-direction:column}
.img{background:var(--tile);aspect-ratio:1/1.02;display:grid;place-items:center;position:relative;padding:8%}
.img svg{width:78%;max-height:100%}
.tag{position:absolute;top:18px;left:18px;background:#fff;font-size:12px;letter-spacing:.04em;padding:5px 9px;text-transform:uppercase}
.info{padding:18px 22px 22px;display:flex;flex-direction:column;gap:3px;flex:1}
.chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.chip{border:1px solid #bbb;padding:7px 13px;font-size:14px}.chip.on{border-color:#111;background:#f4f4f6}
.info h3{font-size:17px;font-weight:600}.info p{color:var(--mut)}
.pr{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px}
.pr small{color:var(--mut)}.add{border:1px solid #111;padding:8px 14px;font-size:14px;font-weight:500}.add:hover{background:#111;color:#fff}
.ed{grid-column:span 2;background:var(--lav);display:grid;place-items:center;text-align:center;padding:40px}
.ed h2{font-size:clamp(30px,3.4vw,46px);margin:10px 0 14px}.ed p{max-width:34ch;margin:0 auto 26px;font-size:17px}
.empty{padding:70px 28px;text-align:center;grid-column:1/-1;background:#fff;color:var(--mut)}
section.pad{padding:84px 28px}.ttl{text-align:center;margin-bottom:44px}.ttl small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.ttl h2{font-size:clamp(32px,4vw,48px);margin-top:8px}
.jg{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1300px;margin:auto}
.j .im{height:230px;margin-bottom:18px}.j small{font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.j h3{font-size:26px;line-height:1.15;margin:12px 0}.j p{color:#333}
.ab{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding:84px 28px;max-width:1300px;margin:auto}
.ab h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1}.ab p+p{margin-top:16px}
.ben{background:#2a2a2a;color:#d9d9de;display:grid;grid-template-columns:repeat(4,1fr)}
.ben div{padding:44px 26px;text-align:center;border-left:1px solid #444;font-size:16px}.ben div:first-child{border:0}
.ben svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.4;margin-bottom:14px}
footer{background:#1d1d1f;color:#bdbdc4;padding:56px 28px 28px}.fg{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;margin-bottom:12px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}footer a{display:block;padding:3px 0}footer a:hover{color:#fff}
.cp{max-width:1300px;margin:36px auto 0;padding-top:20px;border-top:1px solid #333;font-size:13px}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.25s;z-index:60}.ov.on{opacity:1;pointer-events:auto}
.dr{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:61;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column}.dr.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.dh h3{font-size:24px}
.db{flex:1;overflow:auto;padding:20px 24px}.df{padding:18px 24px;border-top:1px solid var(--line)}
.ln{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.ln .th{background:var(--tile);height:64px;display:grid;place-items:center}.ln .th svg{width:46px}
.q{display:inline-flex;border:1px solid var(--line);margin-top:6px}.q button{width:28px;height:28px}.q span{width:28px;text-align:center;line-height:28px}
.row{display:flex;justify-content:space-between;padding:4px 0}.tot{font-weight:600;font-size:18px;padding-top:10px}
.f label{display:block;font-size:13px;font-weight:500;margin:14px 0 5px}.f input,.f select,.f textarea{width:100%;padding:12px;border:1px solid #bbb;font:inherit;background:#fff}
.f small{color:var(--mut)}.err{color:#b3261e;font-size:13px;margin-top:10px}
.pay{width:100%;background:#2e7d32;color:#fff;padding:16px;font-weight:600;margin-top:6px}.pay:hover{background:#256528}.pay:disabled{opacity:.6}
.lk{text-decoration:underline;text-underline-offset:4px;font-size:14px}
.st{text-align:center;padding:50px 10px}.st .sp{width:44px;height:44px;border:4px solid var(--line);border-top-color:#2e7d32;border-radius:50%;margin:0 auto 20px;animation:r 1s linear infinite}@keyframes r{to{transform:rotate(360deg)}}
.chat{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:10px;flex-direction:row-reverse}
.chat a{width:56px;height:56px;border-radius:50%;background:var(--plum);display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.3)}.chat svg{width:26px;stroke:#fff;fill:none;stroke-width:1.8}
.chat p{background:var(--lav);padding:13px 38px 13px 18px;border-radius:14px;position:relative;font-size:15px;max-width:250px}.chat p button{position:absolute;right:8px;top:6px;font-size:18px}
@media(max-width:900px){header{padding:0 16px;grid-template-columns:auto 1fr auto}.logo{justify-self:center;font-size:20px}#nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 16px 16px;border-bottom:1px solid var(--line)}#nav.on{display:flex}#nav a{padding:12px 0}#mb{display:block}
.hero{grid-template-columns:1fr}.hero .a{min-height:320px;order:-1}.hero .t{padding:44px 24px}.grid{--c:2!important}.ed{grid-column:span 2}.jg,.ab,.fg{grid-template-columns:1fr}.ben{grid-template-columns:1fr 1fr}.dens{display:none}.info{padding:14px}}

.ph{padding:56px 28px 28px;max-width:1300px;margin:auto}.ph h1{font-size:clamp(40px,5vw,64px);line-height:1.05}.ph p{color:var(--mut);margin-top:10px;max-width:60ch}
.crumb{font-size:13px;color:var(--mut);margin-bottom:14px}.crumb a:hover{text-decoration:underline}
nav a.on{text-decoration:underline;text-underline-offset:6px}
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;max-width:1300px;margin:0 auto;padding:30px 28px 70px}
.pd .img{aspect-ratio:1/1;min-height:420px}.pd h1{font-size:clamp(34px,4vw,52px);line-height:1.08}.pd .sb{font-size:18px;color:var(--mut);margin:6px 0 18px}.pd .pp{font-size:24px;margin-bottom:22px}
.qty{display:inline-flex;border:1px solid #bbb}.qty button{width:44px;height:52px;font-size:20px}.qty span{width:44px;text-align:center;line-height:52px}
.buy{display:flex;gap:12px;margin:22px 0}.buy .btn{flex:1;text-align:center}.nt{font-size:14px;color:var(--mut)}
details.ac{border-top:1px solid var(--line);padding:16px 0}details.ac:last-of-type{border-bottom:1px solid var(--line)}details.ac summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}details.ac summary::after{content:'+'}details.ac[open] summary::after{content:'\2212'}details.ac p{margin-top:10px;color:#333}
.tabs{display:flex;gap:28px;padding:0 28px;border-bottom:1px solid var(--line);overflow-x:auto;max-width:1300px;margin:auto}.tabs button{padding:16px 0;white-space:nowrap;color:var(--mut)}.tabs button.on{border-bottom:2px solid #111;font-weight:600;color:#111}
a.j{display:block}a.j:hover h3{text-decoration:underline}
.art{max-width:760px;margin:auto;padding:30px 28px 70px}.art h1{font-size:clamp(34px,4.4vw,54px);line-height:1.08;margin:12px 0 28px}.art .im{height:340px;margin-bottom:34px}.art p{font-size:18px;line-height:1.75;margin-bottom:20px;color:#222}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1300px;margin:auto;padding:30px 28px 80px}
.co{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;max-width:1200px;margin:auto;padding:20px 28px 80px}.box{background:var(--tile);padding:28px}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1300px;margin:auto;padding:0 28px 80px}.vals div{border-top:2px solid #111;padding-top:16px}.vals h3{font-size:22px;margin-bottom:8px}
.edb{background:var(--lav);text-align:center;padding:90px 24px}.edb h2{font-size:clamp(32px,4vw,52px);margin:10px 0 14px}.edb p{max-width:40ch;margin:0 auto 26px;font-size:18px}
.cmt{padding:0 0 4px}.ph+.cats{padding-top:10px}
@media(max-width:900px){.pd,.two,.co{grid-template-columns:1fr;gap:28px}.vals{grid-template-columns:1fr}.pd .img{min-height:300px}.ph{padding:36px 16px 16px}.tabs{padding:0 16px}}

.pg{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:64px;flex-wrap:wrap}
.pg button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.pg button:hover{background:var(--tile)}.pg button.on{background:#111;color:#fff}
.pg .ar{background:#ececf0}.pg .prev svg{transform:scaleX(-1)}.pg svg{width:20px;stroke:#111;fill:none;stroke-width:1.6}
.pg span{width:34px;text-align:center;color:var(--mut)}

/* Tatcha-style product cards: every page except the home page */
.grid{background:#e8e7ec}
.card .img{aspect-ratio:1/1;padding:6%;background:#f1f0f3}
.card .img svg{width:60%;max-height:88%;transition:transform .35s}
.card .img:hover svg{transform:scale(1.04)}
.card .tag{top:20px;left:20px;padding:5px 9px;font-size:12px;letter-spacing:.03em}
.card .info{padding:20px 20px 26px;gap:2px}
.card .chips{gap:8px;margin-bottom:16px}
.card .chip,.card .chips>span{border:1px solid #d3d2d9;background:#fff;padding:8px 14px;font-size:13px!important;color:var(--ink)!important;border-radius:2px}
.card .chip.on,.card .chips>span{border-color:#4b4a52}
.card .info h3{font-size:16px;font-weight:600}
.card .info p{font-size:15px;color:#2b2b30}
.card .pr{padding-top:14px;font-size:16px}
.card .add{border:0;padding:0;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.card .add:hover{background:none;color:var(--plum)}
@media(max-width:900px){
 .card .tag{top:10px;left:10px;font-size:10px;padding:4px 7px}
 .card .info{padding:14px 12px 18px}
 .card .chip,.card .chips>span{font-size:12px!important;padding:6px 10px}
 .card .chips{margin-bottom:12px}
 .card .info h3{font-size:15px}
 .card .info p{font-size:13px}
 .card .pr{flex-wrap:wrap;gap:6px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.card .img svg{transition:none}}

/* home page story banner (sits above the footer) */
.qb{position:relative;overflow:hidden;display:grid;place-items:center;min-height:clamp(480px,76vh,720px);padding:72px 24px;background:#16301f}
.qb .bg{position:absolute;inset:0;width:100%;height:100%}
.qb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.qb .box{position:relative;z-index:1;max-width:720px;background:rgba(244,244,242,.88);padding:40px 44px 44px;text-align:center}
.qb .box p{font-size:clamp(24px,3vw,36px);line-height:1.2;margin-bottom:28px}
.qb .box .btn{background:#161412;padding:16px 42px}.qb .box .btn:hover{background:var(--plum)}
@media(max-width:900px){.qb{padding:48px 16px}.qb .box{padding:28px 22px 30px}}

/* product card hover: cream + add to bag */
.iw{position:relative}.card .img svg{transition:opacity .35s,transform .35s}
.card .cr{position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse 70% 32% at 28% 26%,#fffaf0,transparent 70%),radial-gradient(ellipse 60% 38% at 72% 60%,color-mix(in srgb,var(--k) 20%,#f1e6d0),transparent 72%),radial-gradient(ellipse 80% 28% at 40% 90%,#f9f1e1,transparent 70%),#efe4cf}
.card .cr::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 62% 38%,rgba(255,255,255,.32) 0 7px,rgba(190,170,130,.12) 7px 15px)}
.card .tag{z-index:2}
.iw:hover .cr,.iw:focus-within .cr{opacity:1}.iw:hover .img svg,.iw:focus-within .img svg{opacity:0}
.card .iw .add{position:absolute;left:20px;right:20px;bottom:20px;z-index:3;background:#fff;border:1px solid #111;padding:16px;font-size:15px;font-weight:500;text-decoration:none;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s,background .2s,color .2s}
.iw:hover .add,.card .iw .add:focus-visible{opacity:1;transform:none}.card .iw .add:hover{background:#111;color:#fff}
@media(hover:none){.card .iw .add{opacity:1;transform:none;left:12px;right:12px;bottom:12px;padding:12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.card .cr,.card .iw .add,.card .img svg{transition:none}}

/* home: feature cards */
.fe{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1400px;margin:0 auto;padding:90px 28px}
.fe .fi{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:30px}
.fe .fi div{position:absolute;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}.fe .fi svg{width:100%;display:block}
.fe .a1{left:12%;top:12%;width:46%}.fe .a2{right:12%;bottom:8%;width:34%}
.fe h3{font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin-bottom:16px}
.fe p{font-size:18px;line-height:1.55;color:#2b2b30;margin-bottom:22px;max-width:44ch}
.fe .lk{font-size:18px}
@media(max-width:900px){.fe{grid-template-columns:1fr;gap:48px;padding:56px 16px}}

/* shop density toggle */
.dens{display:flex;gap:8px}.dens button{width:42px;height:42px;border:1px solid var(--line);display:grid;place-items:center;opacity:1;background:#fff}.dens button:hover{border-color:#999}.dens button.on{border-color:#111}
.dens svg{width:18px;height:18px;fill:#bdbcc4}.dens button.on svg{fill:#111}
@media(max-width:900px){.dens{display:none}}

/* shop about */
.ab2{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;max-width:1400px;margin:0 auto;padding:100px 28px 90px;align-items:center}
.ab2 h2{font-size:clamp(32px,3.8vw,54px);line-height:1.08}.ab2 p{font-size:16px;line-height:1.6;color:#2b2b30;max-width:78ch}.ab2 p+p{margin-top:24px}
@media(max-width:900px){.ab2{grid-template-columns:1fr;gap:20px;padding:56px 16px}}

/* strip inside footer */
footer{padding-top:0}footer .ben{background:none;margin:0 -28px 56px;border-bottom:1px solid #3a3a3e}footer .ben div{border-left-color:#3a3a3e}
@media(max-width:900px){footer .ben{margin:0 -28px 40px}footer .ben div{border-left:0}}

/* product page */
.pd .rt{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--mut)}.stars{color:#111;letter-spacing:2px}.stars i{color:#d3d2d9;font-style:normal}
.pd .sz{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:22px 0 14px}.pd .sz .pp{margin:0;font-size:22px;font-weight:600}
.pd .buy .btn{background:var(--plum)}.pd .buy .btn:hover{background:#352347}
.pb{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;max-width:1300px;margin:0 auto;padding:30px 28px 70px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}.gt{aspect-ratio:1/1;position:relative;overflow:hidden;display:grid;place-items:center}
.gt.a{background:#f1f0f3}.gt.a svg{width:70%}.gt.b2{background:linear-gradient(135deg,#ece8f8,#cfc6ee)}
.gt.t1{background:repeating-linear-gradient(104deg,color-mix(in srgb,var(--k) 60%,#5a4b96) 0 16px,color-mix(in srgb,var(--k) 70%,#fff) 16px 24px,color-mix(in srgb,var(--k) 40%,#fff) 24px 27px)}
.gt.t2{background:radial-gradient(ellipse 70% 32% at 28% 26%,#fffaf0,transparent 70%),radial-gradient(ellipse 60% 38% at 72% 60%,color-mix(in srgb,var(--k) 25%,#f1e6d0),transparent 72%),#efe4cf}
.det h3{font-size:19px;font-weight:600;margin-bottom:12px}.det p{font-size:17px}.det hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.fs{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;margin-bottom:16px}.fs .th{background:var(--tile);height:110px;display:grid;place-items:center}.fs .th svg{width:80px}.fs small{color:var(--mut)}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ig>div{background:var(--tile);padding:18px;text-align:left}.io{width:70px;height:70px;border-radius:50%;margin-bottom:14px}.ig p{font-size:14px;color:var(--mut)}
.pq{background:#f0efed;padding:30px;margin-top:34px;border-radius:6px}.pq h3{font-size:30px;margin-bottom:20px}
.qc{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.qc button{background:#fff;border:1px solid #e3e2e8;border-radius:6px;padding:12px 16px;font-size:15px}.qc button:hover{border-color:#111}
.qi{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #bbb;border-radius:30px;padding:6px 8px 6px 20px}.qi input{flex:1;border:0;outline:0;font:inherit;padding:10px 0;background:none}.qi button{width:34px;height:34px;border-radius:50%;background:#666;color:#fff}
.bn{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1300px;margin:0 auto;padding:30px 28px 80px;align-items:center}
.bn small{font-size:13px;letter-spacing:.14em;text-transform:uppercase}.bn h2{font-size:clamp(34px,4.4vw,60px);line-height:1.05;margin:10px 0 40px}
.bn ul{list-style:none;border-top:1px solid var(--line)}.bn li{display:flex;align-items:center;gap:16px;padding:30px 0;border-bottom:1px solid var(--line);font-size:19px}.bn li svg{width:28px;stroke:#111;fill:none;stroke-width:1.4;flex:none}
.bn .bi{aspect-ratio:1/1;min-height:420px}
.rs{max-width:1300px;margin:0 auto;padding:30px 28px 70px}.rsum{display:flex;align-items:center;justify-content:center;gap:22px;padding:30px 0 50px}.rsum .big{font:400 78px/1 Newsreader,Georgia,serif}.rsum .btn{border-radius:30px;padding:14px 28px}
.rf{display:flex;gap:12px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}.rf input,.rf select{border:1px solid #bbb;border-radius:30px;padding:13px 20px;font:inherit;background:#fff;min-width:200px}
.rv{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line)}
.rw{display:grid;grid-template-columns:48px 1fr;gap:12px;align-content:start}.av{width:48px;height:48px;border-radius:50%;background:var(--lav);color:var(--plum);display:grid;place-items:center;font-weight:600}.rl{font-size:13px;color:var(--mut)}
.rw dl{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin-top:8px}.rw dt{color:var(--mut)}
.rh{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.rh h3{font-size:26px}.rh time{margin-left:auto;font-size:14px}.rb p{font-size:17px;margin-top:12px;max-width:70ch}
.sbr{position:fixed;right:96px;bottom:18px;width:min(900px,calc(100% - 200px));background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:14px 24px;z-index:35;transform:translateY(150%);transition:transform .3s}.sbr.on{transform:none}
.sbr .th{background:var(--tile);width:64px;height:64px;display:grid;place-items:center;flex:none}.sbr .th svg{width:48px}.sbr .si{flex:1;display:flex;flex-direction:column;font-size:14px;color:var(--mut)}.sbr .si b{letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:500}.sbr .si em{font-style:normal}
.sbr .btn{background:#fff;color:#111;border:1px solid #111;padding:14px 40px}.sbr .btn:hover{background:#111;color:#fff}
@media(max-width:900px){.pb,.bn{grid-template-columns:1fr;gap:28px;padding:16px}.ig{grid-template-columns:1fr}.rv{grid-template-columns:1fr;gap:14px}.rs{padding:16px}.rsum{flex-wrap:wrap}.sbr{left:12px;right:12px;width:auto;bottom:90px;padding:10px 12px;gap:12px}.sbr .btn{padding:12px 18px}}

/* home: new sets to gift */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e8e7ec}
.sg .sb{grid-column:span 2;grid-row:span 2;position:relative;overflow:hidden;background:linear-gradient(180deg,#efebfa,#d8d0f1);min-height:640px}
.sg .sbt{position:relative;z-index:2;text-align:center;padding:64px 8% 0}
.sg .sbt h2{font-size:clamp(34px,4.4vw,60px);line-height:1.05;margin-bottom:18px}.sg .sbt p{font-size:18px;max-width:34ch;margin:0 auto 26px}
.sg .sbt .btn{padding:18px 40px}
.sg .sbv div{position:absolute;filter:drop-shadow(0 20px 26px rgba(40,20,70,.25))}.sg .sbv svg{width:100%;display:block}
.sg .s1{left:4%;bottom:-3%;width:52%}.sg .s2{left:46%;bottom:4%;width:24%}.sg .s3{right:4%;bottom:0;width:30%}.sg .s4{left:36%;bottom:26%;width:18%}
@media(max-width:900px){.sg{grid-template-columns:1fr 1fr}.sg .sb{grid-row:auto;min-height:520px}.sg .sbt{padding:44px 20px 0}}

/* home: shop by skin type */
.sk{padding:30px 0 70px}.sk h2{font-size:clamp(34px,4.4vw,56px);line-height:1.05;padding:0 28px 44px}
.skg{display:grid;grid-template-columns:repeat(4,1fr)}
.skc{position:relative;aspect-ratio:1/1;overflow:hidden;display:block}
.skc::before,.skc::after{content:"";position:absolute;inset:0;transition:transform .5s}.skc:hover::before,.skc:hover::after{transform:scale(1.05)}
.skc span{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:2;background:#fff;padding:24px 46px;white-space:nowrap;font-size:17px;transition:background .2s,color .2s}.skc:hover span{background:#111;color:#fff}
.skc.c1::before{background:repeating-linear-gradient(104deg,#8d82c6 0 16px,#a79ddb 16px 24px,#c3bbea 24px 27px,#8d82c6 27px 40px)}
.skc.c1::after{background:radial-gradient(ellipse at 22% 30%,rgba(255,255,255,.35),transparent 45%),radial-gradient(ellipse at 15% 70%,rgba(70,48,95,.35),transparent 50%)}
.skc.c2::before{background:radial-gradient(ellipse 60% 40% at 30% 25%,#fffaf0,transparent 70%),radial-gradient(ellipse 50% 50% at 75% 60%,#efe6d2,transparent 70%),radial-gradient(ellipse 70% 40% at 40% 85%,#f8f1e1,transparent 70%),#e9dfc9}
.skc.c2::after{background:repeating-radial-gradient(ellipse at 60% 40%,rgba(255,255,255,.35) 0 6px,rgba(200,185,150,.18) 6px 14px)}
.skc.c3::before{background:linear-gradient(160deg,#f1d8d4 0%,#f6e6d4 28%,#e5c3a5 55%,#d1a98b 100%)}
.skc.c3::after{background:radial-gradient(ellipse 70% 14% at 40% 45%,rgba(255,255,255,.55),transparent 70%),radial-gradient(ellipse 60% 12% at 65% 72%,rgba(255,255,255,.4),transparent 70%),radial-gradient(ellipse 40% 90% at 15% 40%,rgba(255,240,230,.5),transparent 70%)}
.skc.c4::before{background:linear-gradient(120deg,#e4e4e6,#d6d6d9)}
.skc.c4::after{background:radial-gradient(ellipse 55% 90% at 38% 45%,#fff 0,#f7f7f6 60%,transparent 72%),radial-gradient(ellipse 12% 80% at 62% 45%,rgba(255,255,255,.9),transparent 70%)}
@media(max-width:900px){.skg{grid-template-columns:1fr 1fr}.sk h2{padding:0 16px 28px}.skc span{padding:16px 24px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.skc::before,.skc::after,.skc span{transition:none}}

/* home: how-to-use slider */
.hw{display:grid;grid-template-columns:1.05fr 1fr;gap:0;max-width:1400px;margin:0 auto;padding:30px 28px 90px;align-items:stretch}
.hw .hv{position:relative;min-height:600px;overflow:hidden}
.hw .hs{position:absolute;left:10%;top:20%;width:56%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}.hw .hs svg{width:100%;display:block}
.hw .hs2{left:auto;top:auto;right:8%;bottom:12%;width:34%}
.hw .ht{display:flex;flex-direction:column;justify-content:center;padding:20px 6% 20px 7%}
.hw .hc small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.hw .hc h2{font-size:clamp(32px,4.2vw,58px);line-height:1.05;margin:14px 0 30px}
.hw .hc h3{font-size:18px;font-weight:600;margin-bottom:8px}.hw .hc p{font-size:17px;line-height:1.55;margin-bottom:22px;max-width:46ch;color:#2b2b30}
.hw .hc,.hw .hv{transition:opacity .18s}.hw.out .hc,.hw.out .hv{opacity:0}
.hw .hn{display:flex;align-items:center;gap:14px;margin-top:10px}.hw .hn span{font-size:14px;color:var(--mut);min-width:44px;text-align:center}
.hw .hn button{width:40px;height:40px;border-radius:50%;border:1px solid #111;display:grid;place-items:center}.hw .hn button:hover{background:#111}.hw .hn button:hover svg{stroke:#fff}
.hw .hn svg{width:18px;stroke:#111;fill:none;stroke-width:1.6}.hw .hn .prev svg{transform:scaleX(-1)}
@media(max-width:900px){.hw{grid-template-columns:1fr;padding:16px 16px 56px}.hw .hv{min-height:380px}.hw .ht{padding:28px 4px 0}}
@media(prefers-reduced-motion:reduce){.hw .hc,.hw .hv{transition:none}}

/* ===== Header v2: logo + search + bag, nav row, mega menu ===== */
.hd{display:block;height:auto;padding:0;grid-template-columns:none;background:#fff;border-bottom:1px solid var(--line)}
.hd1{width:min(1320px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,560px) 1fr;gap:40px;align-items:center;height:84px}
.hd .logo{justify-self:start}
.hd #mb{display:none;background:none;border:0;padding:6px;cursor:pointer;place-items:center}
.sf{display:flex;background:var(--tile);height:48px;border:1px solid var(--line)}
.sf input{flex:1;min-width:0;border:0;background:transparent;padding:0 16px;font:inherit;outline:0}
.sf:focus-within{outline:2px solid var(--plum);outline-offset:2px}
.sf button{width:48px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.sf svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6}
.hd .cb{background:none;border:0;padding:6px;cursor:pointer}
.hd2{position:relative;border-top:1px solid var(--line)}
.hd #nav{width:min(1320px,100% - 48px);margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:48px;gap:0}
.nl,.nr{display:flex;align-items:center;gap:28px}
.nr a{color:var(--mut);font-size:14px}
.hd #nav .nl>a,.hd #nav .nr>a,.hd #nav .nv>a{height:48px;display:flex;align-items:center;position:relative}
.hd #nav a:hover,.hd #nav a.on{text-decoration:none}
.hd #nav .nl>a::after,.hd #nav .nr>a::after,.hd #nav .nv>a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--plum);transform:scaleX(0);transition:transform .2s}
.hd #nav .nl>a:hover::after,.hd #nav .nr>a:hover::after,.hd #nav .nv>a:hover::after,.hd #nav a.on::after,.nv.open>a::after{transform:scaleX(1)}
.nv{display:flex;align-items:center;gap:2px;height:48px;position:static}
.nvb{background:none;border:0;padding:6px;cursor:pointer;display:grid;place-items:center}
.chv{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.8;transition:transform .2s}
.nv.open .chv{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fdfcfb;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);max-height:calc(100vh - 160px);overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s}
.nv.open .mega{opacity:1;visibility:visible;transform:none}
.mg{width:min(1320px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:230px 1fr;gap:44px;padding:28px 0 44px;position:relative}
.mt{display:flex;flex-direction:column;gap:14px}.mt:hover .mtc{color:var(--plum)}
.mtv{display:block;aspect-ratio:1.15;background:linear-gradient(135deg,#e4dcf8,#b9b0ec 80%);position:relative;overflow:hidden}
.mtv svg{position:absolute;left:12%;top:8%;width:76%;height:84%}
.mtl{font-size:28px;line-height:1.1;color:var(--plum)}
.mtc{font-size:14px;display:inline-flex;gap:6px;align-items:center;border-bottom:1px solid currentColor;width:max-content;padding-bottom:2px}
.mtc svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.mtabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:28px;padding-right:48px}
.mtabs button{background:none;border:0;font:500 15px Inter,sans-serif;color:var(--mut);padding:10px 0 14px;cursor:pointer;position:relative}
.mtabs button[aria-selected=true]{color:var(--plum)}
.mtabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--plum)}
.mlist[hidden]{display:none}
.mlist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px}
.mlist a{font-size:16px;padding:4px 0;width:max-content}.mlist a:hover{text-decoration:underline;text-underline-offset:5px}
.mx{position:absolute;right:0;top:28px;background:none;border:0;padding:8px;cursor:pointer}
.mx svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;display:block}
@media(max-width:900px){
 .hd1{width:100%;padding:10px 16px;grid-template-columns:auto 1fr auto;grid-template-areas:"mb logo ic" "sf sf sf";gap:10px 8px;height:auto}
 .hd #mb{display:grid;grid-area:mb}.hd .logo{grid-area:logo;justify-self:center;font-size:20px}.hd .ic{grid-area:ic}.hd .sf{grid-area:sf;height:44px}
 .hd #nav{display:none;position:static;width:100%;height:auto;max-height:60vh;overflow:auto;padding:4px 16px 16px;flex-direction:column;align-items:stretch;background:#fff}
 .hd #nav.on{display:flex}
 .nl,.nr{flex-direction:column;align-items:stretch;gap:0}
 .hd #nav .nl>a,.hd #nav .nr>a,.hd #nav .nv>a{height:auto;padding:14px 0}.hd #nav .nl>a::after,.hd #nav .nr>a::after,.hd #nav .nv>a::after{display:none}
 .nv{flex-wrap:wrap;height:auto;justify-content:space-between}
 .mega{position:static;flex-basis:100%;max-height:0;overflow:hidden;opacity:1;transform:none;box-shadow:none;border:0;background:transparent;transition:max-height .3s,visibility .3s}
 .nv.open .mega{max-height:700px}
 .mg{width:100%;grid-template-columns:1fr;gap:12px;padding:0 0 12px}.mt,.mx{display:none}
 .mtabs{margin-bottom:12px;gap:20px;padding-right:0}.mlist{grid-template-columns:1fr 1fr;gap:6px 16px}
}

/* ===== Hero carousel ===== */
.hz{width:min(1320px,100% - 48px);margin:24px auto 0}
.hz .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hzs{display:grid}
.hzl{grid-area:1/1;display:grid;grid-template-columns:1.25fr 1fr;min-height:clamp(340px,35vw,470px);background:var(--bg);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.hzl.on{opacity:1;visibility:visible}
.hza{position:relative;overflow:hidden;background:var(--pa)}
.hza svg{display:block;width:100%}
.hz1,.hz2{position:absolute;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.hz1{left:12%;bottom:-8%;width:58%;transform:scale(1.06)}
.hz2{right:9%;top:9%;width:36%;transform:scale(1.1)}
.hzl.on .hz1,.hzl.on .hz2{transform:none}
.hzo{position:absolute;left:10%;bottom:6%;width:62%;height:5%;background:rgba(0,0,0,.14);filter:blur(14px);border-radius:50%}
.hzt{align-self:center;padding:0 9%;color:var(--ink2)}
.hz h2{font:600 clamp(34px,4.4vw,62px)/1 Inter,system-ui,sans-serif;letter-spacing:-.04em;margin:0 0 20px}
.hzt p{font-size:clamp(15px,1.35vw,19px);margin-bottom:28px;max-width:30ch}
.hzb{display:inline-flex;gap:14px;align-items:center;background:var(--ink2);color:#fff;padding:16px 22px;font-weight:600;font-size:15px;transition:filter .2s}
.hzb:hover{filter:brightness(1.18)}
.hzb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.hzt>*{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.hzl.on .hzt>*{opacity:1;transform:none}
.hzl.on .hzt>:nth-child(2){transition-delay:.08s}.hzl.on .hzt>:nth-child(3){transition-delay:.16s}
.hzc{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:13px}
.hzn{display:flex;gap:24px;flex-wrap:wrap}
.hzn button{display:flex;align-items:center;gap:8px;background:none;border:0;font:inherit;color:var(--mut);cursor:pointer;padding:4px 0}
.hzn button::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0}
.hzn button[aria-current=true]{color:var(--ink);font-weight:600}.hzn button[aria-current=true]::before{opacity:1}
.hzr{display:flex;align-items:center;gap:10px}
.hzk{font-variant-numeric:tabular-nums;color:var(--mut);margin:0 6px}
.hzr button{width:34px;height:34px;display:grid;place-items:center;background:none;border:0;border-radius:50%;cursor:pointer}
.hzr button:hover{background:var(--tile)}
.hzr svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8}
.hzp svg{fill:var(--ink);stroke:var(--ink)}
.hzn button:focus-visible,.hzr button:focus-visible,.hzb:focus-visible,.nvb:focus-visible,.mtabs button:focus-visible,.mx:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
@media(max-width:900px){
 .hz{width:100%;margin-top:0}
 .hzl{grid-template-columns:1fr}.hza{min-height:280px;order:-1}.hzt{padding:28px 20px 36px}
 .hzc{padding:12px 16px}.hzn{gap:14px}
}
@media(prefers-reduced-motion:reduce){
 .hzl,.hz1,.hz2,.hzt>*,.mega,.chv,.hd #nav a::after{transition:none}
 .hz1,.hz2{transform:none}.hzt>*{transform:none}
}

/* ===== New Sets to Gift: left panel stays pinned under the header while the cards scroll past ===== */
.sg .sb{position:sticky;top:var(--hh,134px);align-self:start;height:calc(100vh - var(--hh,134px));min-height:560px}
.sg .card .img{aspect-ratio:5/6}
@media(max-width:900px){.sg .sb{position:relative;height:auto;min-height:520px}.sg .card .img{aspect-ratio:1/1}}

/* ===== Bestsellers: bordered cards, side arrow, scroll-progress line ===== */
.bs{position:relative;margin:0 -28px;container-type:inline-size}
.bst{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.bst::-webkit-scrollbar{display:none}
.bst .card{flex:0 0 25%;scroll-snap-align:start;border-right:1px solid var(--line);min-width:0}
.bst:focus-visible{outline:2px solid var(--plum);outline-offset:-2px}
.bsn{position:absolute;top:calc(12.5cqw - 22px);width:44px;height:44px;border-radius:50%;border:0;background:rgba(236,236,240,.92);display:grid;place-items:center;cursor:pointer;z-index:3;transition:opacity .2s,background .2s}
.bsn:hover{background:#dcdae3}
.bsn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6}
.bsn1{right:24px}.bsp1{left:24px}
.bsn.off{opacity:0;pointer-events:none}
.bsp{position:relative;width:min(160px,40%);height:2px;background:var(--line);margin:30px auto 0}
.bsp i{position:absolute;top:0;height:100%;background:var(--ink);transition:left .15s linear}
section.pad:has(.bs){padding-bottom:56px}
@media(max-width:900px){.bs{margin:0 -16px}.bst .card{flex-basis:62%}.bsn{top:calc(31cqw - 22px)}.bsn1{right:12px}.bsp1{left:12px}}
@media(prefers-reduced-motion:reduce){.bsp i,.bsn{transition:none}}

/* product photos */
.pi{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.gt.b2 .pi{object-fit:cover;transform:scale(1.25)}
.img .pi~.cr{display:none}