:root{
--ink:#1b1819;--ink-2:#3d3739;--muted:#6e6668;--line:#ebe5e3;--line-2:#d9d1cf;
--blush:#e9bbae;--blush-ink:#7a4337;--blush-soft:#f8e8e3;--sale:#b42318;--ok:#1f7a4d;--warn:#9a5b00;
--wrap:1280px;--gut:24px;--r:6px;
--f:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:140px}
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.5 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:22px;height:22px;flex:none;fill:currentColor}
.ic-s{width:18px;height:18px}
/* top strip */
.strip{background:var(--blush);color:var(--ink);font-size:13px;font-weight:500}
.strip .wrap{display:flex;justify-content:center;gap:32px;min-height:36px;align-items:center;text-align:center}
.strip a{text-decoration:underline;text-underline-offset:3px}
.strip .s2{display:none}
@media(min-width:900px){.strip .s2{display:inline}}
/* header */
.hdr{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.hdr-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;height:76px}
.logo img{width:180px;height:auto}
.search{position:relative;max-width:620px;width:100%;justify-self:center}
.search input{width:100%;height:46px;border:1px solid var(--line-2);border-radius:999px;padding:0 48px 0 20px;background:#fff;font-size:15px}
.search input::placeholder{color:#8c8486}
.search input:focus{outline:none;border-color:var(--ink)}
.search .go{position:absolute;right:6px;top:6px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.search .go .ic{width:18px;height:18px}
.acts{display:flex;align-items:center;gap:6px}
.act{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:500}
.act:hover{background:var(--blush-soft)}
.act .n{min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;padding:0 6px}
.act .n[data-n="0"]{display:none}
.menu-btn{display:none}
.nav{border-top:1px solid var(--line)}
.nav ul{list-style:none;margin:0 auto;padding:0 var(--gut);max-width:var(--wrap);display:flex;gap:4px;justify-content:center}
.nav li{position:static}
.nav>ul>li>a{display:flex;align-items:center;gap:4px;height:46px;padding:0 14px;font-size:14px;font-weight:500;letter-spacing:.01em}
.nav>ul>li>a:hover,.nav>ul>li.open>a{color:var(--blush-ink)}
.nav .sale>a{color:var(--sale)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(27,24,25,.35);display:none}
.nav li.open .mega{display:block}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:28px var(--gut) 32px;display:grid;grid-template-columns:repeat(5,1fr);gap:28px 32px}
.mega h4{margin:0 0 10px;font-size:14px;font-weight:600}
.mega h4 a:hover{color:var(--blush-ink)}
.mega ul{display:block;padding:0;margin:0}
.mega ul a{display:block;padding:4px 0;font-size:14px;color:var(--muted)}
.mega ul a:hover{color:var(--ink)}
.mega .all{grid-column:1/-1;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* suggestions */
.sugg{position:absolute;left:0;right:0;top:52px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -28px rgba(27,24,25,.45);padding:8px;display:none;z-index:60;max-height:70vh;overflow:auto}
.sugg.on{display:block}
.sugg .hd{font-size:12px;font-weight:600;color:var(--muted);padding:8px 10px 4px;text-transform:uppercase;letter-spacing:.06em}
.sugg a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px}
.sugg a:hover,.sugg a.sel{background:var(--blush-soft)}
.sugg img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:6px}
.sugg .t{font-size:14px;line-height:1.3}
.sugg .t b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sugg .p{margin-left:auto;font-weight:600;font-size:14px;white-space:nowrap}
.sugg .more{justify-content:center;font-weight:600;font-size:14px}
/* drawer (mobile menu + cart) */
.scrim{position:fixed;inset:0;background:rgba(27,24,25,.38);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;width:min(420px,100%);background:#fff;z-index:80;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.drawer.right{right:0;transform:translateX(100%)}
.drawer.left{left:0;transform:translateX(-100%)}
.drawer.on{transform:none}
.dr-hd{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;border-bottom:1px solid var(--line)}
.dr-hd h2{margin:0;font-size:18px;font-weight:600}
.x{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.x:hover{background:var(--blush-soft)}
.dr-bd{flex:1;overflow:auto;padding:8px 20px 20px}
.dr-ft{border-top:1px solid var(--line);padding:16px 20px 20px}
.mnav a,.mnav button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500;text-align:left}
.mnav .sub{display:none;padding:4px 0 8px 12px}
.mnav .sub a{font-size:15px;font-weight:400;color:var(--ink-2);border:0;padding:9px 0}
.mnav .o>.sub{display:block}
.mnav .o>button .ic{transform:rotate(180deg)}
/* cart lines */
.cl{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cl img{width:72px;height:72px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.cl .b{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.cl .t{display:block;font-size:14px;line-height:1.35;margin:2px 0 8px}
.cl .pr{font-weight:600;font-size:15px;text-align:right}
.cl .rm{font-size:13px;color:var(--muted);text-decoration:underline;margin-top:8px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;height:36px}
.qty button{width:36px;height:34px;display:grid;place-items:center}
.qty button .ic{width:16px;height:16px}
.qty input{width:34px;border:0;text-align:center;font-weight:600;background:transparent;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.ship{font-size:14px;margin:4px 0 14px}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.tot{display:flex;justify-content:space-between;font-size:17px;font-weight:600;margin:6px 0 4px}
.fine{font-size:13px;color:var(--muted)}
.empty{text-align:center;padding:56px 12px;color:var(--muted)}
.empty .ic{width:44px;height:44px;margin:0 auto 12px;color:var(--line-2)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;border:1px solid var(--ink);transition:background .15s}
.btn:hover{background:#000}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* hero */
.hero{padding:28px 0 8px}
.hero-g{display:grid;grid-template-columns:1.02fr 1fr;gap:0;border-radius:18px;overflow:hidden;min-height:520px;border:1px solid var(--line)}
.hero-t{padding:56px 56px 48px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(36px,4.4vw,58px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:0 0 18px}
.hero p{font-size:18px;color:var(--ink-2);margin:0 0 30px;max-width:30em}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-i{position:relative;background:#f3eeee}
.hero-i img{width:100%;height:100%;object-fit:cover}
.hero-facts{display:flex;gap:28px;margin-top:40px;flex-wrap:wrap}
.hero-facts div{font-size:14px;color:var(--muted)}
.hero-facts b{display:block;font-size:22px;color:var(--ink);font-weight:600}
/* sections */
.sec{padding:56px 0 8px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-h h2{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0}
.sec-h a{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
/* category circles */
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:18px}
.cat{text-align:center}
.cat .ph{aspect-ratio:1;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:border-color .15s}
.cat .ph img{width:74%;height:74%;object-fit:contain}
.cat:hover .ph{border-color:var(--ink)}
.cat b{display:block;margin-top:10px;font-size:14px;font-weight:500;line-height:1.25}
.cat span{display:block;font-size:12px;color:var(--muted)}
/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 20px}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;display:flex;flex-direction:column}
.card .im{position:relative;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;place-items:center}
.card .im img{width:86%;height:86%;object-fit:contain;transition:transform .35s ease}
.card:hover .im img{transform:scale(1.04)}
.card .noimg{font-size:12px;color:var(--muted);padding:12px;text-align:center}
.card .tag{position:absolute;left:8px;top:8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.card .tag.sale{color:#fff;background:var(--sale);border-color:var(--sale)}
.card .tag.out{color:var(--muted)}
.card .b{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.card .t{font-size:14px;line-height:1.35;margin:3px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.card .pr{font-weight:600;font-size:15px}
.card .add{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;background:#fff;transition:all .15s}
.card .add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.card .add .ic{width:18px;height:18px}
.card .add.done{background:var(--ok);border-color:var(--ok);color:#fff}
.card a.cover{position:absolute;inset:0;z-index:1}
.card .add{position:relative;z-index:2}
/* brand logos */
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand{height:104px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;padding:10px 18px;text-align:center;font-weight:600;font-size:15px;transition:border-color .15s}
.brand img{width:100%;height:100%;object-fit:contain}
.brand:hover{border-color:var(--ink)}
/* promo tiles */
.promos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.promo{position:relative;border-radius:16px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;border:1px solid var(--line)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo .tx{position:relative;margin:20px;background:#fff;border-radius:12px;padding:18px 20px;max-width:360px}
.promo .tx b{display:block;font-size:20px;font-weight:600;line-height:1.2;margin-bottom:6px}
.promo .tx span{font-size:14px;color:var(--ink-2)}
.promo .tx em{display:block;margin-top:10px;font-style:normal;font-weight:600;text-decoration:underline;text-underline-offset:4px;font-size:14px}
/* stores */
.stores-g{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
.stores-ph{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:320px}
.stores-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.store-list{align-content:start}
.store-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.store{border:1px solid var(--line);border-radius:14px;padding:18px}
.store h3{margin:0 0 6px;font-size:17px;font-weight:600}
.store p{margin:0;font-size:14px;color:var(--ink-2)}
.store .now{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin:10px 0 2px}
.store [data-today]{margin:0}
.store .now i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.store .now.open{color:var(--ok)} .store .now.open i{background:var(--ok)}
.store .acts2{display:flex;gap:14px;margin-top:10px;font-size:14px;font-weight:600}
.store .acts2 a{text-decoration:underline;text-underline-offset:4px}
.hours{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.hours td{padding:3px 0;color:var(--ink-2)} .hours td:last-child{text-align:right}
.hours tr.today td{color:var(--ink);font-weight:600}
/* trust row */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;margin-top:56px}
.trust div{display:flex;gap:12px;align-items:flex-start;padding:20px 22px;border-left:1px solid var(--line)}
.trust div:first-child{border-left:0}
.trust .ic{color:var(--blush-ink);margin-top:2px}
.trust b{display:block;font-size:15px;font-weight:600}
.trust span{font-size:13px;color:var(--muted)}
/* listing */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--line-2)}
.lh{padding:10px 0 18px}
.lh h1{font-size:34px;font-weight:600;letter-spacing:-.015em;margin:0}
.lh .c{color:var(--muted);font-size:15px;margin-top:4px}
.lh .d{max-width:760px;color:var(--ink-2);font-size:15px;margin-top:10px}
.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 0 18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 6px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
.chip img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff}
.chip.noi{padding-left:18px}
.chip:hover{border-color:var(--ink)}
.lay{display:grid;grid-template-columns:232px 1fr;gap:36px;align-items:start}
.filters{position:sticky;top:150px;max-height:calc(100vh - 170px);overflow:auto;padding-right:6px}
.fg{border-top:1px solid var(--line);padding:14px 0}
.fg h3{margin:0 0 10px;font-size:14px;font-weight:600}
.fg label{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;cursor:pointer}
.fg label span{margin-left:auto;color:var(--muted);font-size:12px}
.fg input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);margin:0}
.fg .more{font-size:13px;font-weight:600;text-decoration:underline;margin-top:6px}
.fg .find{width:100%;height:36px;border:1px solid var(--line-2);border-radius:8px;padding:0 10px;margin-bottom:8px;font-size:14px}
.tb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tb .cnt{font-size:14px;color:var(--muted)}
.tb select{height:42px;border:1px solid var(--line-2);border-radius:999px;padding:0 36px 0 16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center/14px;-webkit-appearance:none;appearance:none;font-size:14px}
.fbtn{display:none}
.active-f{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}
.active-f button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--blush-soft);font-size:13px;font-weight:500}
.active-f button .ic{width:14px;height:14px}
.morewrap{text-align:center;margin:36px 0 8px}
.morewrap p{font-size:13px;color:var(--muted);margin:0 0 12px}
/* product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding:16px 0 8px;align-items:start}
.pdp-im{position:sticky;top:150px;border:1px solid var(--line);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;background:#fff;overflow:hidden}
.pdp-im img{width:88%;height:88%;object-fit:contain}
.pdp .b{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pdp .b:hover{color:var(--ink)}
.pdp h1{font-size:32px;line-height:1.15;font-weight:500;letter-spacing:-.015em;margin:8px 0 14px}
.pdp .pr{font-size:26px;font-weight:600}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:14px 0 22px}
.stock i{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.stock.low{color:var(--warn)} .stock.low i{background:var(--warn)}
.stock.out{color:var(--muted)} .stock.out i{background:var(--muted)}
.stock.in{color:var(--ok)}
.vars{margin:0 0 22px}
.vars h3{font-size:14px;font-weight:600;margin:0 0 10px}
.vars .opts{display:flex;flex-wrap:wrap;gap:8px}
.vars button{min-height:42px;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;font-size:14px}
.vars button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.vars button.out{color:var(--muted);text-decoration:line-through}
.buy{display:flex;gap:12px;align-items:center}
.buy .qty{height:50px}
.buy .qty button{height:48px;width:44px}
.buy .btn{flex:1}
.perks{list-style:none;padding:0;margin:24px 0 0;border:1px solid var(--line);border-radius:14px}
.perks li{display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--line);font-size:14px}
.perks li:first-child{border-top:0}
.perks .ic{color:var(--blush-ink)}
.perks b{font-weight:600}
.desc{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.desc h2{font-size:18px;font-weight:600;margin:0 0 10px}
.desc .tx{color:var(--ink-2);font-size:15px}
.desc .tx p{margin:0 0 12px}
.desc .tx h2,.desc .tx h3,.desc .tx h4{font-size:15px;margin:16px 0 6px;color:var(--ink)}
.desc .tx ul{padding-left:20px}
.codes{font-size:13px;color:var(--muted);margin-top:14px}
/* text pages */
.page{max-width:780px;padding:12px 0 40px}
.page h1{font-size:36px;font-weight:600;letter-spacing:-.015em;margin:0 0 18px}
.page h2{font-size:20px;font-weight:600;margin:32px 0 10px}
.page p,.page li{color:var(--ink-2);font-size:16px}
/* footer */
.ftr{margin-top:80px;border-top:1px solid var(--line);padding:48px 0 28px;font-size:14px}
.ftr-g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ftr .logo img{width:150px;margin-bottom:14px}
.ftr p{color:var(--muted);margin:0 0 6px}
.ftr h4{font-size:14px;font-weight:600;margin:0 0 12px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{padding:4px 0}
.ftr li a{color:var(--ink-2)} .ftr li a:hover{color:var(--ink);text-decoration:underline}
.soc{display:flex;gap:10px;margin-top:14px}
.soc a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.soc a:hover{border-color:var(--ink)}
.ftr-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;color:var(--muted);font-size:13px}
/* toast + checkout overlay */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font-size:14px;font-weight:500;z-index:90;transition:all .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.co{position:fixed;inset:0;background:rgba(255,255,255,.96);z-index:95;display:none;place-items:center;text-align:center;padding:24px}
.co.on{display:grid}
.co h2{font-size:24px;font-weight:600;margin:16px 0 8px}
.co p{color:var(--muted);max-width:420px;margin:0 auto 18px}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);margin:0 auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.preview-note{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:6px 12px}
/* chat */
.ch-btn{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;box-shadow:0 14px 30px -14px rgba(27,24,25,.6)}
.ch-btn:hover{background:#000}
#chat{position:fixed;right:20px;bottom:84px;width:min(400px,calc(100vw - 24px));height:min(620px,calc(100vh - 120px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(27,24,25,.55);z-index:66;display:none;flex-direction:column;overflow:hidden}
#chat.on{display:flex}
.ch-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 14px 18px;border-bottom:1px solid var(--line)}
.ch-hd b{font-size:16px;font-weight:600}.ch-hd span{display:block;font-size:12px;color:var(--muted)}
.ch-hd .tools{display:flex;gap:2px}
.ch-new{font-size:13px;font-weight:600;padding:0 10px;height:36px;border-radius:999px}.ch-new:hover{background:var(--blush-soft)}
.ch-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.msg.bot{background:#f6f2f1;border-top-left-radius:6px;align-self:flex-start}
.msg.user{background:var(--ink);color:#fff;border-top-right-radius:6px;align-self:flex-end}
.typing{display:flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bl 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25}}
.ch-prods{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.ch-p{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px}
.ch-p>a:first-child{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ch-p img{width:56px;height:56px;object-fit:contain;flex:none}
.ch-p span{font-size:13px;line-height:1.3;min-width:0}.ch-p b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ch-p em{display:block;font-style:normal;font-weight:600;margin-top:2px}
.ch-p .add{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.ch-p .add .ic{width:16px;height:16px}.ch-p .add.done{background:var(--ok);color:#fff;border-color:var(--ok)}
.ch-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.ch-sugg button{font-size:13px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px}
.ch-sugg button:hover{border-color:var(--ink)}
#chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
#chat input{flex:1;height:44px;border:1px solid var(--line-2);border-radius:999px;padding:0 16px;font-size:15px}
#chat input:focus{outline:none;border-color:var(--ink)}
#chat form button{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
/* v2: strip rotation */
.strip .rot{display:flex;gap:40px;justify-content:center;width:100%}
.strip .rot>span{white-space:nowrap}
/* v2: hero highlights */
.hero-t{position:relative}
.hero .slide{display:none}
.hero .slide.on{display:block;animation:fadeup .6s cubic-bezier(.2,.8,.2,1)}
.hero .slide .h{font-size:clamp(36px,4.4vw,58px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:0 0 18px;color:var(--ink)}
.hero-i{overflow:hidden}
.hero-i img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 6.5s ease}
.hero-i img.on{opacity:1;transform:scale(1)}
.hero-ctl{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:40px;flex-wrap:wrap}
.hero-ctl .hero-facts{margin:0}
.dots{display:flex;gap:8px}
.dots button{width:34px;height:24px;display:grid;place-items:center}
.dots i{display:block;width:100%;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;position:relative}
.dots button.on i::after,.dots button[aria-selected=true] i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:none}
.playing .dots button[aria-selected=true] i::after{animation:prog 6s linear}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* v2: reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* v2: mega menu with brands */
.mega-in{grid-template-columns:1fr 240px!important}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 28px}
.mega-side{border-left:1px solid var(--line);padding-left:28px}
.mega-side ul a{color:var(--ink-2)}
.mega-side .all{display:inline-block;margin-top:14px}
/* v2: category tiles */
.tiles{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:16px;margin:0 0 34px}
.tile{display:block}
.tile .ph{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s}
.tile .ph img{width:78%;height:78%;object-fit:contain;transition:transform .35s ease}
.tile:hover .ph{border-color:var(--ink)} .tile:hover img{transform:scale(1.05)}
.tile b{display:block;margin-top:10px;font-size:14px;font-weight:600;line-height:1.25}
.tile span{font-size:12px;color:var(--muted)}
/* v2: sticky buy bar (phones) */
.sbar{display:none}
@media(max-width:980px){
.strip .rot{display:block;position:relative;height:36px;overflow:hidden}
.strip .rot>span{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:all .4s}
.strip .rot>span.on{opacity:1;transform:none}
.strip .rot a{text-decoration:none}
.hero-ctl{margin-top:24px}
.tiles{grid-template-columns:repeat(3,1fr)!important;gap:12px 10px;margin-bottom:24px}
.tile b{font-size:13px}
.sbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:64;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;transform:translateY(110%);transition:transform .25s}
.sbar.on{transform:none}
.sbar .t{flex:1;min-width:0;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbar .p{font-weight:700;font-size:16px}
.sbar .btn{height:46px;padding:0 20px}
body:has(.sbar.on) .ch-btn{bottom:84px!important;top:auto!important}
}
@media(min-width:981px){.strip .rot>span:not(:first-child)::before{content:"";display:inline-block;width:1px;height:12px;background:rgba(27,24,25,.25);margin-right:40px;vertical-align:-1px}}
/* responsive */
@media(max-width:1180px){.grid{grid-template-columns:repeat(4,1fr)}.grid.g4{grid-template-columns:repeat(3,1fr)}.cats{grid-template-columns:repeat(6,1fr)}.cats .cat:nth-child(n+7){display:none}.mega-in{grid-template-columns:repeat(4,1fr)}}
@media(max-width:980px){
:root{--gut:16px}
main{padding-bottom:64px}
.ftr{padding-bottom:84px}
.perks{margin-bottom:8px}
.ch-btn{right:14px;bottom:14px;width:54px;height:54px;padding:0;justify-content:center;font-size:0;gap:0}
.ch-btn .ic{width:24px;height:24px}
body:has([data-pdp]) .ch-btn{bottom:auto;top:calc(100dvh - 190px);width:48px;height:48px}
body:has([data-pdp]) .ch-btn.low{top:auto;bottom:14px}
.tb{flex-wrap:wrap}
.tb .cnt{order:3;width:100%;font-size:13px}
#chat{right:0;left:0;bottom:0;width:100%;height:88vh;border-radius:18px 18px 0 0}
.nav{display:none}
.menu-btn{display:flex}
.hdr-row{grid-template-columns:auto 1fr auto;grid-template-rows:60px auto;height:auto;gap:0 8px}
.logo{justify-self:center}
.logo img{width:132px}
.hdr .search{grid-column:1/-1;grid-row:2;max-width:none;margin:0 0 12px}
.hdr .search input{height:44px}
.act .lbl{display:none}
.act{padding:0 10px}
.hero{padding:14px 0 0}
.hero .cta .btn{flex:1;padding:0 14px}
.hero-i{aspect-ratio:4/3!important}
.hero-g{grid-template-columns:1fr;min-height:0}
.hero-i{aspect-ratio:1/1;order:-1}
.hero-t{padding:26px 20px 28px}
.hero p{font-size:16px;margin-bottom:22px}
.hero-facts{margin-top:26px;gap:22px}
.hero-facts b{font-size:19px}
.sec{padding:40px 0 4px}
.sec-h h2{font-size:21px}
.cats{grid-template-columns:repeat(4,1fr);gap:14px 10px}
.cats .cat:nth-child(n+7){display:block}
.cat b{font-size:13px}
.grid,.grid.g4{grid-template-columns:repeat(2,1fr);gap:22px 12px}
.brands{grid-template-columns:repeat(3,1fr);gap:10px}
.brand{height:76px;padding:12px}
.promos{grid-template-columns:1fr}
.promo{min-height:300px}
.stores-g{grid-template-columns:1fr}
.stores-ph{aspect-ratio:4/3;min-height:0}
.store-list{grid-template-columns:1fr}
.trust{grid-template-columns:1fr 1fr;margin-top:40px}
.trust div{border-left:0;border-top:1px solid var(--line);padding:16px}
.trust div:nth-child(-n+2){border-top:0}
.trust div:nth-child(even){border-left:1px solid var(--line)}
.lay{grid-template-columns:1fr}
.filters{position:fixed;top:0;bottom:0;left:0;width:min(380px,92%);max-height:none;background:#fff;z-index:80;padding:0 20px 90px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.filters.on{transform:none}
.filters .dr-hd{margin:0 -20px 0;position:sticky;top:0;background:#fff;z-index:2}
.fbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:500}
.lh h1{font-size:26px}
.pdp{grid-template-columns:1fr;gap:22px}
.pdp-im{position:relative;top:0}
.pdp h1{font-size:24px}
.ftr-g{grid-template-columns:1fr 1fr}
.ftr-g>div:first-child{grid-column:1/-1}
}
@media(min-width:981px){.filters .dr-hd,.filters .apply{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ================= v3: magazine layer ================= */
:root{--wrap:1320px;--r:4px;--serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif}
.disp{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.6vw,88px);line-height:.98;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink)}
.disp-s{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.1vw,44px);line-height:1.05;letter-spacing:-.015em;margin:0}
.disp em,.disp-s em{font-style:italic;font-weight:400}
.sec{padding:80px 0 0}
.sec-h{margin-bottom:28px;align-items:flex-end}
.sec-h a{font-size:14px}
.card .im,.tile .ph{border-radius:var(--r)}
.btn{border-radius:2px;height:52px;letter-spacing:.02em}
.card .tag{border-radius:2px}
.card .tag.best{background:var(--ink);color:#fff;border-color:var(--ink)}
.lead{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:30em;margin:0 0 28px}
/* hero (home) */
.hx{position:relative;overflow:hidden;background:#fff}
.hx-media{position:relative;height:min(86vh,880px);min-height:560px}
.hx-media picture{position:absolute;inset:0}
.hx-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:0;transition:opacity 1s ease}
.hx-media img.on{opacity:1;animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.hx-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-100%);animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hx-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-top:140px;pointer-events:none}
.hx-in .slide{max-width:620px;pointer-events:auto}
.hx-in .cta{display:flex;gap:12px;flex-wrap:wrap}
.hx-ctl{position:absolute;left:var(--gut);bottom:32px;pointer-events:auto}
.hx .slide{display:none}.hx .slide.on{display:block;animation:fadeup .7s cubic-bezier(.2,.8,.2,1)}
body.home .hdr{position:fixed;left:0;right:0;top:36px;background:transparent;border-bottom-color:transparent;transition:background .25s,top .25s,border-color .25s}
body.home .hdr .nav{border-top-color:transparent}
body.home .hdr .search input{background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
body.home .hdr.solid{top:0;background:#fff;border-bottom-color:var(--line)}
body.home .hdr.solid .nav{border-top-color:var(--line)}
.playing .dots button[aria-selected=true] i::after{animation:prog 6s linear}
/* search band */
.sband{padding:72px 0 0;text-align:center}
.sband-f{display:flex;gap:10px;max-width:760px;margin:24px auto 18px}
.sband-f input{flex:1;height:58px;border:1px solid var(--line-2);border-radius:2px;padding:0 20px;font-size:17px}
.sband-f input:focus{outline:none;border-color:var(--ink)}
.sband-f .btn{height:58px}
.qchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:0 auto}
.qchips a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.qchips a:hover{border-color:var(--ink)}
/* category mosaic */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ccard{position:relative;display:block;overflow:hidden;background:#fff;border:1px solid var(--line)}
.ccard.big{grid-column:span 2;grid-row:span 2}
.ccard .ph{display:block;aspect-ratio:3/2}
.ccard.big .ph{aspect-ratio:auto;height:100%}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ccard:hover img{transform:scale(1.04)}
.ccard .lab{position:absolute;left:16px;bottom:14px;right:16px}
.ccard .lab b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1}
.ccard.big .lab b{font-size:34px}
.ccard .lab span{font-size:13px;color:var(--ink-2)}
/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 24px}
.tabs button{height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* featured brands */
.bfeat{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px}
.bcard .ph{position:relative;display:block;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2}
.bcard.lead .ph{aspect-ratio:auto;height:calc(100% - 0px)}
.bcard img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bcard .ph:hover img{transform:scale(1.04)}
.bcard .lab{position:absolute;left:18px;bottom:14px}
.bcard .lab b{display:block;font-family:var(--serif);font-weight:500;font-size:30px;line-height:1}
.bcard .lab span{font-size:13px;color:var(--ink-2)}
.bcard{display:flex;flex-direction:column;gap:12px}
.bcard.lead{grid-row:span 1}
.mini{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mini a{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border:1px solid var(--line);padding:8px;min-width:0}
.mini img{grid-row:span 2;width:56px;height:56px;object-fit:contain}
.mini span{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini b{font-size:13px}
/* techniques */
.tech{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tcard .ph{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);margin-bottom:14px}
.tcard .ph img,.tcard .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tcard .ph video{z-index:1;opacity:0;transition:opacity .4s}
.tcard .ph:hover video.ready,.tcard .ph video.ready.auto{opacity:1}
.tcard h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:0 0 8px}
.tcard ol{margin:0 0 10px;padding-left:18px;font-size:14px;color:var(--ink-2)}
.tcard ol li{margin:2px 0}
.tcard .link{font-size:14px}
/* video band */
.vband{position:relative;display:block;overflow:hidden;aspect-ratio:21/8;background:#f6f3f2}
.vband video,.vband::before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vband video{opacity:1}
.vband .tx{position:absolute;left:48px;top:50%;transform:translateY(-50%);max-width:440px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:rgba(255,255,255,.88);padding:28px 30px}
.vband .tx>span:nth-child(2){color:var(--ink-2)}
/* pros */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pros .ph{overflow:hidden;aspect-ratio:4/3}
.pros .ph img{width:100%;height:100%;object-fit:cover}
.facts{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.facts b{display:block;font-family:var(--serif);font-weight:500;font-size:40px;line-height:1}
.facts span{font-size:14px;color:var(--muted)}
.pros p{color:var(--ink-2);font-size:16px;max-width:34em}
.pros .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* kits */
.kits{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kit{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;border:1px solid var(--line);padding:18px}
.kit a{display:flex;flex-direction:column;gap:4px;min-width:0}
.kit .im{aspect-ratio:1;display:grid;place-items:center}
.kit .im img{width:80%;height:80%;object-fit:contain}
.kit .b{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kit .t{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kit .plus{font-family:var(--serif);font-size:34px;color:var(--blush-ink)}
/* brand logos: never overflow the box */
.brands{grid-template-columns:repeat(6,minmax(0,1fr))}
.brand{display:flex;align-items:center;justify-content:center;height:108px;padding:14px 18px;overflow:hidden;min-width:0;border-radius:var(--r)}
.brand img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain}
/* reviews + instagram */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{margin:0;border:1px solid var(--line);padding:22px}
.rev .stars{color:#b8860b;letter-spacing:2px;font-size:14px}
.rev blockquote{margin:10px 0 14px;font-family:var(--serif);font-size:19px;line-height:1.35}
.rev figcaption{font-size:13px;font-weight:600}.rev figcaption span{color:var(--muted);font-weight:400}
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.igrid a{aspect-ratio:1;overflow:hidden}.igrid img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.igrid a:hover img{transform:scale(1.05)}
.store-list.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.tech{grid-template-columns:repeat(3,1fr)}.cgrid{grid-template-columns:repeat(3,1fr)}.ccard.big{grid-column:span 3;grid-row:span 1}.ccard.big .ph{aspect-ratio:21/9}.bfeat{grid-template-columns:1fr 1fr}.bcard.lead{grid-column:span 2}.bcard.lead .ph{aspect-ratio:21/9;height:auto}.brands{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){
.sec{padding-top:56px}
.disp{font-size:clamp(36px,10vw,52px)}
.disp-s{font-size:clamp(26px,7vw,34px)}
.lead{font-size:16px;margin-bottom:20px}
body.home .hdr,body.home .hdr.solid{position:sticky;top:0;background:#fff;border-bottom-color:var(--line)}
.hx-media{height:auto;min-height:0;aspect-ratio:4/5}
.hx-media img{object-position:center 75%}
.hx-in{position:static;padding:22px var(--gut) 0;display:block}
.hx-in .cta .btn{flex:1}
.hx-ctl{position:static;margin-top:18px}
.sband{padding-top:52px}
.sband-f{flex-direction:column}
.sband-f .btn{width:100%}
.qchips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
.qchips a{flex:none}
.cgrid{grid-template-columns:1fr 1fr;gap:10px}
.ccard.big{grid-column:span 2}.ccard.big .ph{aspect-ratio:3/2}
.ccard .lab{left:10px;bottom:8px}.ccard .lab b{font-size:17px}.ccard.big .lab b{font-size:26px}.ccard .lab span{font-size:12px}
.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-8px calc(var(--gut) * -1) 20px;padding:0 var(--gut)}
.tabs button{flex:none}
.bfeat{grid-template-columns:1fr}.bcard.lead{grid-column:auto}.bcard.lead .ph{aspect-ratio:3/2}
.tech{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:none}
.tcard{scroll-snap-align:start}
.vband{aspect-ratio:4/5}
.vband video{object-position:40% center}
.vband .tx{left:16px;right:16px;top:auto;bottom:16px;transform:none;max-width:none;padding:18px}
.pros{grid-template-columns:1fr;gap:24px}
.facts b{font-size:32px}
.kits{grid-template-columns:1fr}
.brands{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand{height:84px;padding:10px 12px}
.revs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);scrollbar-width:none}
.rev{scroll-snap-align:start}
.igrid{grid-template-columns:repeat(3,1fr)}
.store-list.four{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.store-list.four{grid-template-columns:1fr}.mini{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hx-light{display:none}.hx-media img.on{animation:none}}
/* v3: listing banner (text inside the campaign image) */
.lban{position:relative;margin:0 calc(var(--gut) * -1) 28px;overflow:hidden;min-height:340px;display:flex;align-items:center}
.lban picture,.lban img{position:absolute;inset:0;width:100%;height:100%}
.lban img{object-fit:cover;object-position:right center}
.lban-t{position:relative;padding:28px var(--gut) 32px;max-width:560px}
.lban-t .crumbs{padding:0 0 14px}
.lban .disp{font-size:clamp(38px,4.6vw,68px);margin-bottom:12px}
.lban .d{margin:0;font-size:15px;color:var(--ink-2)}
/* v3: product page */
.pdp-g{position:sticky;top:150px;align-self:start}
.pdp-g .pdp-im{position:relative;top:0;border-radius:var(--r)}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.thumbs button{flex:none;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.thumbs button[aria-current=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.pdp h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.8vw,40px);line-height:1.08}
.goodfor{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 0;font-size:13px}
.goodfor span{color:var(--muted)}
.goodfor a{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.goodfor a:hover{border-color:var(--ink)}
.acc{border-top:1px solid var(--line);padding:4px 0}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:600;font-size:15px}
.acc summary::after{content:"+";font-size:20px;font-weight:300}
.acc[open] summary::after{content:"\2212"}
.acc ol{margin:0 0 10px;padding-left:20px;color:var(--ink-2);font-size:15px}
.faq{margin:0 0 14px;font-size:14px}.faq dt{font-weight:600;margin-top:10px}.faq dd{margin:2px 0 0;color:var(--ink-2)}
.pdp .desc{margin-top:22px}
@media(max-width:980px){
.lban{min-height:0;display:block;margin-bottom:20px}
.lban picture{position:relative;display:block;aspect-ratio:3/2}
.lban img{position:absolute;object-position:center}
.lban-t{padding:18px var(--gut) 0}
.pdp-g{position:relative;top:0}
}
.lamp{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blush-ink);background:var(--blush-soft);padding:6px 10px;border-radius:2px;margin:0 0 16px}
/* v3: touch targets and strip on small phones */
@media(max-width:980px){
.logo{display:flex;align-items:center;min-height:44px;padding:0 4px}
.search .go{width:40px;height:40px;top:2px;right:2px}
.card .add{width:44px;height:44px}
.ch-p .add{width:44px;height:44px}
.dots button{width:44px;height:44px}
.pdp .b{display:inline-flex;align-items:center;min-height:44px}
.strip .rot>span{white-space:normal;font-size:12px;line-height:1.25;padding:0 12px;text-align:center}
}
.brand img{max-height:72px}
@media(max-width:980px){.brand img{max-height:56px}}
@media(max-width:980px){.pdp .b{min-width:44px;padding-right:8px}}
/* v3 fix: solid header on home, hero starts below it; labels on white chips */
body.home .hdr,body.home .hdr.solid{position:sticky;top:0;background:#fff;border-bottom-color:var(--line)}
body.home .hdr .nav{border-top-color:var(--line)}
@media(min-width:981px){.hx-media{height:min(56.25vw,800px);min-height:520px}.hx-in{padding-top:0}.hx-media img{object-position:right center}}
.ccard .lab,.bcard .lab{background:rgba(255,255,255,.94);padding:10px 14px;right:auto;max-width:calc(100% - 32px)}
.ccard .ph,.bcard .ph{background:#f1f0f0}
.ccard img,.bcard img{object-position:center}
[hidden]{display:none!important}
.perks2{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px;font-size:15px}.perks2 li{display:flex;gap:10px;align-items:center}.perks2 .ic{color:var(--blush-ink)}
/* v3 r1 fixes */
.sec-h h2.disp-s,.sec-h .disp-s{font-size:clamp(30px,3.3vw,46px);font-weight:400}
.disp{font-weight:400}
.ccard .lab b,.bcard .lab b,.tcard h3,.facts b,.rev blockquote{font-weight:400}
.desc h2,.acc summary{font-family:var(--serif);font-weight:400;font-size:20px}
.vars button,.tabs button,.qchips a,.goodfor a,.chip{border-radius:2px}
.ch-btn{width:56px;height:56px;padding:0;justify-content:center;font-size:0;gap:0}
.ch-btn .ic{width:24px;height:24px}
.ftr{padding-bottom:96px}
.pdp-info .acc summary{padding-right:64px}
.strip .rot>span{max-width:100%}
@media(max-width:980px){
.strip .rot>span{font-size:12px}
.hx-media{height:auto!important;min-height:0!important;aspect-ratio:4/5;width:100%}
.hx-in{padding-top:20px}
.hx-in .slide{max-width:none}
.disp{font-size:clamp(34px,9vw,52px)}
.grid{grid-template-columns:repeat(3,1fr)}
.rail{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:44%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;scrollbar-width:none}
.rail>*{scroll-snap-align:start}
.pdp{grid-template-columns:1fr 1fr;gap:24px}
.pdp-im{aspect-ratio:1}
}
@media(max-width:760px){
.grid,.grid.g4{grid-template-columns:repeat(2,1fr)}
.rail{grid-auto-columns:62%}
.pdp{grid-template-columns:1fr}
.pdp-im{aspect-ratio:4/3}
.pdp-im img{width:70%;height:90%}
}
@media(max-width:380px){.disp{font-size:32px}.hx-in .cta{flex-direction:column}}
.howimg{width:100%;height:auto;margin:4px 0 12px;border-radius:var(--r)}
/* r2: closed drawers never widen the page; hero buttons keep their height */
html,body{overflow-x:clip}
.drawer:not(.on){visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
.drawer.on{visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
@media(max-width:380px){.hx-in .cta .btn{flex:none;width:100%}}
.pdp>*,.pdp-g,.pdp-info,.lay>*{min-width:0}
.sec-h{flex-wrap:wrap;row-gap:8px}.sec-h h2{overflow-wrap:anywhere;min-width:0}
/* r2 fixes */
.ch-btn.later{opacity:0;pointer-events:none;transform:translateY(12px)}
.ch-btn{transition:opacity .25s,transform .25s}
.lamp{margin:16px 0 0}
.brand img{filter:contrast(1.25) saturate(1.2)}
.pdp~.sec .revs,.wrap>.sec .revs{margin-left:0;margin-right:0}
@media(min-width:761px) and (max-width:980px){.hx-media{aspect-ratio:16/9!important}.hx-media img{object-position:right center}}
@media(max-width:980px){
.pdp-info .acc summary{padding-right:64px}
.ftr{padding-bottom:110px}
.kits.rail{display:grid;grid-auto-columns:88%}
.pdp h1{font-size:24px;margin:4px 0 8px}
.pdp .pr{font-size:22px}
.stock{margin:8px 0 14px}
}
/* r3 fixes */
.bname{font-family:var(--serif);font-size:19px;line-height:1.1;text-align:center;color:var(--ink)}
@media(min-width:981px){.hx-in .slide{max-width:520px}.hx .disp{font-size:clamp(44px,5vw,76px)}}
@media(max-width:380px){.pdp-im{aspect-ratio:16/10}.crumbs:has(+ .pdp){display:none}.pdp h1{font-size:21px}}
.pdp-im{position:relative}.pdp-im img{position:absolute;inset:6%;width:88%!important;height:88%!important;object-fit:contain}
/* r4 fixes */
.sband-f input{flex:none;width:100%;min-height:58px}
@media(min-width:981px){.sband-f input{flex:1;width:auto}}
.bname{overflow-wrap:anywhere;font-size:17px}
@media(min-width:981px) and (max-width:1280px){.hx-in .slide{max-width:38vw}.hx .disp{font-size:clamp(40px,4.4vw,60px)}.hx .lead{font-size:16px;max-width:34ch}}
@media(max-width:380px){.pdp-im{aspect-ratio:2/1}.pdp h1{font-size:19px;line-height:1.15}.pdp .pr{font-size:20px}.stock{margin:4px 0 10px;font-size:13px}}
@media(max-width:760px){.hx-media img.mfd{object-position:80% 55%}}
@media(max-width:480px){.strip .rot{height:44px}.strip .rot>span{line-height:1.2}}
/* r7 fixes */
.chat-act{display:none}
@media(max-width:1024px){.chat-act{display:flex}.ch-btn{display:none!important}}
@media(max-width:980px){.strip .rot{height:44px}.strip .rot>span{line-height:1.2}}
@media(max-width:980px){.acts a[aria-label="My account"]{display:none}}
@media(max-width:400px){.acts a[href="/stores/"]{display:none}}
/* checkout */
.co-page{padding:20px 0 60px}.co-page h1{font-size:34px;font-weight:600;margin:0 0 20px}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.co-form{display:grid;gap:26px}.co-step{display:grid;gap:12px}
.co-step h2{font-size:19px;font-weight:600;margin:0;display:flex;align-items:center;gap:10px}
.co-step h2 span{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px}
.co-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.co-form input:not([type=checkbox]):not([type=radio]){height:50px;border:1px solid #d9d2cf;border-radius:10px;padding:0 14px;font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff}
.co-form input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.co-row3{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:12px}
.co-ship{display:grid;gap:10px}.co-opt{display:flex!important;align-items:center;gap:12px;border:1px solid #d9d2cf;border-radius:12px;padding:14px 16px;cursor:pointer;font-weight:500!important;color:var(--ink)!important}
.co-opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.co-opt span{flex:1}.co-opt input{accent-color:var(--ink);width:18px;height:18px}
.co-check{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;line-height:1.4}.co-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.co-err{background:#fdecea;color:#8a1f11;border-radius:10px;padding:12px 14px;margin:0}
.co-sum{background:#f7f3f1;border-radius:16px;padding:22px;position:sticky;top:100px}.co-sum h2{font-size:18px;margin:0 0 14px}
.co-items{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}.co-items li{display:flex;gap:12px;align-items:center;font-size:14px}
.co-items img{width:50px;height:50px;object-fit:contain;background:#fff;border-radius:8px}.co-items span{flex:1;display:grid}.co-items small{color:var(--muted)}
.co-line{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}.co-total{border-top:1px solid #e3dcd9;margin-top:6px;padding-top:12px;font-size:18px;font-weight:700}
@media (max-width:860px){.co-grid{grid-template-columns:1fr;gap:24px}.co-sum{position:static;order:-1}.co-row3{grid-template-columns:1fr 1fr}.co-row3 label:first-child{grid-column:1/-1}}
/* account + rewards */
.ac-page{padding:20px 0 60px}.ac-page h1{font-size:34px;font-weight:600;margin:0 0 20px}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px}
.ac-card{border:1px solid #e3dcd9;border-radius:18px;padding:24px;display:grid;gap:12px;align-content:start}
.ac-card h2{font-size:20px;margin:0;display:flex;gap:10px;align-items:center}.ac-card p{margin:0;color:var(--ink-2)}
.ac-form{display:grid;gap:12px}.ac-form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.ac-form input{height:50px;border:1px solid #d9d2cf;border-radius:10px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.ac-msg{margin:0;background:#fdecea;color:#8a1f11;border-radius:10px;padding:12px 14px}.ac-msg.good{background:#e8f5ec;color:#1d5b33}
.ac-order{background:#f7f3f1;border-radius:14px;padding:18px}.ac-order h3{margin:0 0 4px;display:flex;gap:10px;align-items:center}.ac-order ul{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}.ac-order li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.pill{font-size:12px;font-weight:600;background:var(--ink);color:#fff;border-radius:999px;padding:4px 10px}
.rw-list{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rw-list li{border:1px solid #e3dcd9;border-radius:18px;padding:22px;display:grid;gap:6px}.rw-list .ic{width:30px;height:30px}.rw-list b{font-size:18px}.rw-list span{color:var(--muted);font-size:14px}
@media (max-width:860px){.ac-grid{grid-template-columns:1fr}.rw-list{grid-template-columns:1fr 1fr}}
/* ============ The Studio v4 theme (23/out/2026) ============
Fonts: Satoshi (everything you read at a glance) + Helvetica Neue (long reading).
Shapes: round. Cards 28px, photos 22px, pills everywhere you click.
Color: ink, a deep berry (the brand's signature), the store's blush, warm white. */
@font-face{font-family:"Satoshi";src:url(/assets/satoshi.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/satoshi-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
:root{
--ink:#1a1216;--ink-2:#3b3036;--muted:#6f6469;--line:#efe5e2;--line-2:#e2d6d2;
--plum:#4a1838;--plum-2:#6d2a55;--plum-soft:#f3e6ee;
--blush:#ecc4ba;--blush-ink:#8a3f53;--blush-soft:#f8ecea;--petal:#fbf4f2;--cream:#fffaf8;--tile:#f5eeec;
--sale:#b42345;--ok:#1d7a52;
--f:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--serif:"Satoshi",ui-sans-serif,system-ui,sans-serif;
--read:"Helvetica Neue",Helvetica,Arial,sans-serif;
--r:22px;--rc:28px;--rl:36px;--wrap:1320px;
--ease:cubic-bezier(.2,.8,.2,1);
--shadow:0 1px 2px rgba(26,18,22,.04),0 12px 32px -18px rgba(74,24,56,.28);
}
body{font:400 15.5px/1.55 var(--f);background:var(--cream);letter-spacing:-.003em}
::selection{background:var(--plum);color:#fff}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:8px}
/* type */
.sec-h h2,h2.disp-s,p.disp-s,.disp-s,.sec-h h2.disp-s,.sec-h .disp-s{font-weight:800}
h1.disp,p.disp,.disp{font-weight:800}
.disp{font-family:var(--f);font-weight:800;font-size:clamp(42px,6vw,92px);line-height:.95;letter-spacing:-.045em}
.disp-s{font-family:var(--f);font-weight:800;font-size:clamp(30px,3.4vw,50px);line-height:1;letter-spacing:-.035em}
.disp em,.disp-s em{font-style:italic;font-weight:500;color:var(--plum);letter-spacing:-.03em}
.sec{padding:96px 0 0}
.sec-h{margin-bottom:30px;gap:24px}
.sec-h a,.link{font-weight:700;font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line-2);transition:background .2s,border-color .2s,color .2s}
.sec-h a:hover,.link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);background:var(--plum-soft);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.lead{font-size:18.5px;line-height:1.5;color:var(--ink-2)}
/* buttons */
.btn{height:54px;padding:0 30px;border-radius:999px;background:var(--ink);border-color:var(--ink);font-weight:700;font-size:15.5px;letter-spacing:0;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.btn:hover{background:var(--plum);border-color:var(--plum);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(74,24,56,.6)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:#fff;border-color:var(--ink);color:var(--ink);box-shadow:none}
.btn.light{background:#fff;color:var(--plum);border-color:#fff}
.btn.light:hover{background:var(--blush);border-color:var(--blush);color:var(--ink)}
/* top strip */
.strip{background:var(--plum);color:#fff;font-weight:600;font-size:13px;letter-spacing:.01em}
.strip a{color:#fff}
/* header */
.hdr{background:rgba(255,250,248,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hdr.solid,.hdr:hover{border-bottom-color:var(--line)}
body.home .hdr{position:sticky;top:0;background:rgba(255,250,248,.86)}
body.home .hdr .nav{border-top-color:transparent}
body.home .hdr.solid{background:rgba(255,250,248,.92)}
.hdr-row{height:78px}
.search input{height:48px;border-radius:999px;border:1px solid var(--line-2);background:#fff;padding-left:22px;transition:border-color .2s,box-shadow .2s}
.search input:focus{border-color:var(--plum);box-shadow:0 0 0 4px var(--plum-soft)}
.search .go{background:var(--plum);width:36px;height:36px;top:6px}
.act{font-weight:600;border-radius:999px}
.act:hover{background:var(--plum-soft);color:var(--plum)}
.act .n{background:var(--plum)}
.nav{border-top:0}
.nav ul{position:relative;gap:2px;padding-bottom:10px}
.nav>ul>li>a{position:relative;z-index:1;height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14.5px;letter-spacing:-.005em;transition:color .25s}
.nav>ul>li>a:hover,.nav>ul>li.open>a{color:#fff}
.nav .sale>a{color:var(--sale)}
.nav .pill{position:absolute;z-index:0;top:0;left:0;height:40px;border-radius:999px;background:var(--ink);opacity:0;transform:translateX(0);transition:transform .38s var(--ease),width .38s var(--ease),opacity .2s;pointer-events:none}
.nav .pill.on{opacity:1}
.nav .sale.open>a,.nav .sale>a:hover{color:#fff}
.mega{display:block;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s .3s;background:transparent;border:0;box-shadow:none;padding:0 var(--gut)}
.nav li.open .mega{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s}
.mega-in{max-width:var(--wrap);margin:6px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--rl);box-shadow:0 30px 60px -30px rgba(26,18,22,.35);padding:32px 34px 34px}
.mega h4{font-weight:800;font-size:15px;letter-spacing:-.01em}
.mega h4 a:hover,.mega ul a:hover{color:var(--plum)}
.mega ul a{transition:color .15s,transform .2s var(--ease)}
.mega ul a:hover{transform:translateX(3px)}
.mega-side{background:var(--petal);border-radius:var(--rc);padding:22px}
.mega .all{text-decoration:none;display:inline-flex;padding:10px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;justify-self:start}
/* home hero: rounded stage */
.hx{background:transparent;padding:10px var(--gut) 0;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto}
.hx-stage{position:relative;border-radius:var(--rl);overflow:hidden;background:linear-gradient(120deg,var(--petal) 0%,#f6e1dc 55%,#efd3cc 100%)}
.hx-media{height:min(74vh,720px);min-height:540px}
.hx-media img{object-position:72% center}
.hx-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,244,242,.94) 0%,rgba(251,244,242,.78) 34%,rgba(251,244,242,0) 60%);pointer-events:none}
.hx-in{padding:0 0 0 clamp(28px,5vw,72px);z-index:2}
.hx-in .slide{max-width:600px}
.hx-ctl{left:clamp(28px,5vw,72px);bottom:30px;z-index:3}
.hx-stats{position:absolute;right:28px;bottom:28px;z-index:3;display:flex;gap:10px}
.hx-stats span{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow)}
.hx-stats b{color:var(--plum);font-weight:800;margin-right:4px}
.hx-light{display:none}
.dots button i{background:rgba(26,18,22,.16);border-radius:9px}
.dots button i::after{background:var(--plum)}
/* search band */
.sband{padding:72px 0 0}
.sband-f input{height:60px;border-radius:999px;padding:0 26px;border:1px solid var(--line-2);background:#fff}
.sband-f input:focus{border-color:var(--plum);box-shadow:0 0 0 5px var(--plum-soft)}
.sband-f .btn{height:60px}
.qchips a{border-radius:999px;background:#fff;border-color:var(--line-2);font-weight:600;padding:10px 18px;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.qchips a:hover{background:var(--plum);color:#fff;border-color:var(--plum);transform:translateY(-2px)}
/* category bento */
.cgrid{gap:14px}
.ccard{border:0;border-radius:var(--rc);background:var(--tile);isolation:isolate}
.ccard .ph{border-radius:inherit;overflow:hidden}
.ccard img{transition:transform 1s var(--ease)}
.ccard:hover img{transform:scale(1.05)}
.ccard .lab{left:14px;right:auto;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:999px;padding:9px 18px 9px 20px;display:flex;align-items:baseline;gap:10px;box-shadow:var(--shadow);transition:background .25s,color .25s}
.ccard:hover .lab{background:var(--ink);color:#fff}
.ccard .lab b,.ccard.big .lab b{font-family:var(--f);font-weight:800;font-size:17px;letter-spacing:-.02em;display:inline}
.ccard.big .lab b{font-size:22px}
.ccard .lab span{font-size:12.5px;opacity:.7;font-weight:600}
/* product cards: photo fills the card, no square box, no repeated badges */
.grid{gap:28px 18px}
.card{border-radius:var(--rc);transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card .im{aspect-ratio:4/5;border:0;border-radius:var(--rc);background:var(--tile);overflow:hidden;padding:0;display:block}
.card .im img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;transition:transform .8s var(--ease)}
.card:hover .im img{transform:scale(1.06)}
.card .noimg{background:var(--tile)}
.card .tag{top:12px;left:12px;border-radius:999px;border:0;padding:5px 11px;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:none;background:#fff;color:var(--ink)}
.card .tag.sale{background:var(--sale);color:#fff}
.card .tag.out{background:rgba(255,255,255,.9);color:var(--muted)}
.card .tag.best{display:none}
.card .b{margin-top:14px;font-size:11.5px;letter-spacing:.08em;font-weight:700;color:var(--plum)}
.card .t{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.card .pr{font-weight:800;font-size:16px;letter-spacing:-.01em}
.card .add{width:42px;height:42px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow);color:var(--ink);transition:background .2s,color .2s,transform .25s var(--ease)}
.card .add:hover{background:var(--plum);color:#fff;transform:scale(1.06)}
.card .add.done{background:var(--ok);color:#fff}
.rail{scroll-padding:0 var(--gut)}
/* tabs and chips */
.tabs{gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;display:inline-flex;margin-bottom:26px}
.tabs button{border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;color:var(--muted);transition:background .25s,color .25s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.chip,.tile{border-radius:999px}
.tiles .tile{border-radius:var(--rc);border:0;background:var(--tile)}
.tiles .tile .ph{border-radius:var(--r);overflow:hidden;background:#fff}
.tiles .tile .ph img{mix-blend-mode:multiply}
.tiles .tile b{font-weight:800;letter-spacing:-.015em}
/* brand band: berry stage */
.bstage{background:var(--plum);color:#fff;border-radius:var(--rl);padding:64px clamp(24px,4vw,56px) 56px;margin:0 auto}
.bstage .disp-s{color:#fff}.bstage .disp-s em{color:var(--blush)}
.bstage .sec-h a{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.bstage .sec-h a:hover{background:#fff;color:var(--plum)}
.bfeat{gap:16px}
.bcard{border:0}
.bcard .ph{border-radius:var(--rc);overflow:hidden}
.bcard .lab{background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:10px 20px;left:16px;bottom:16px;right:auto}
.bcard .lab b,.bcard.lead .lab b{font-family:var(--f);font-weight:800;font-size:20px;letter-spacing:-.02em;display:inline;margin-right:8px}
.mini a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#fff;transition:background .2s}
.mini a:hover{background:rgba(255,255,255,.16)}
.mini img{background:#fff;border-radius:14px;mix-blend-mode:normal}
.mini b{color:#fff}
/* technique cards */
.tcard .ph{border-radius:var(--rc);overflow:hidden}
.tcard h3{font-family:var(--f);font-weight:800;font-size:22px;letter-spacing:-.02em}
.tcard ol li::marker{color:var(--plum);font-weight:800}
.vband{border-radius:var(--rl);overflow:hidden}
.vband .tx{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:var(--rc)}
/* pros, kits, brands, reviews, stores */
.pros{background:var(--petal);border-radius:var(--rl);padding:28px;gap:40px}
.pros .ph{border-radius:var(--rc);overflow:hidden}
.facts b{font-family:var(--f);font-weight:800;letter-spacing:-.04em;color:var(--plum)}
.kit{background:#fff;border:1px solid var(--line);border-radius:var(--rc)}
.kit .im{background:var(--tile);border-radius:18px}
.kit .im img{mix-blend-mode:multiply}
.kit .plus{font-family:var(--f);font-weight:300;color:var(--plum)}
.brands{gap:12px}
.brand{background:#fff;border:1px solid var(--line);border-radius:22px;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.brand:hover{border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow)}
.bname{font-family:var(--f);font-weight:800;letter-spacing:-.02em}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--rc)}
.rev blockquote{font-family:var(--f);font-weight:500;letter-spacing:-.01em}
.store{background:#fff;border:1px solid var(--line);border-radius:var(--rc)}
.store h3{font-weight:800;letter-spacing:-.02em}
.store .acts2 a{border-radius:999px}
.trust{border-radius:var(--rc);background:#fff;border:1px solid var(--line);overflow:hidden}
.igrid a{border-radius:20px;overflow:hidden}
/* listing pages */
.lban{border-radius:var(--rl);overflow:hidden;margin-top:12px}
.lban-t{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-radius:var(--rc)}
.lh h1{font-family:var(--f);font-weight:800;letter-spacing:-.04em}
.filters .fg{border-color:var(--line)}
.fg h3{font-weight:800}
.fbtn,.tb select{border-radius:999px}
.active-f button{border-radius:999px;background:var(--plum-soft);color:var(--plum);border:0}
.crumbs{font-weight:500}
.crumbs a:hover{color:var(--plum)}
/* product page */
.pdp{gap:56px}
.pdp-im{background:var(--tile);border:0;border-radius:var(--rl);overflow:hidden}
.pdp-im img{width:100%;height:100%;object-fit:cover}
.thumbs button,.thumbs img{border-radius:16px}
.pdp .b{color:var(--plum);font-weight:800;letter-spacing:.08em}
.pdp h1{font-family:var(--f);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.pdp .pr{font-weight:800;letter-spacing:-.02em}
.vars button{border-radius:999px;font-weight:600}
.vars button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.buy .qty{border-radius:999px}
.perks{background:var(--petal);border:0;border-radius:var(--rc)}
.lamp{background:var(--plum-soft);color:var(--plum);border-radius:999px;font-weight:600}
.acc{border-color:var(--line)}
.acc summary{font-family:var(--f);font-weight:700;letter-spacing:-.01em}
.desc h2{font-family:var(--f);font-weight:800}
.desc .tx,.acc ol,.faq{font-family:var(--read)}
.goodfor a{border-radius:999px}
.sbar{border-radius:999px;margin:0 12px 12px;box-shadow:var(--shadow)}
/* footer */
.ftr{background:var(--ink);color:#e9dfe3;border-radius:var(--rl) var(--rl) 0 0;margin-top:110px}
.ftr .logo img{filter:invert(1) brightness(2)}
.ftr h4{color:#fff;font-weight:800}
.ftr li a{color:#cbbec4}.ftr li a:hover{color:#fff}
.ftr-b{border-top-color:rgba(255,255,255,.12);color:#a99aa2}
/* drawers, chat, toast */
.drawer{border-radius:0}
.drawer.right{border-radius:var(--rl) 0 0 var(--rl)}
.drawer.left{border-radius:0 var(--rl) var(--rl) 0}
.ch-btn{background:var(--plum);border-radius:999px}
#chat{border-radius:var(--rc)}
.msg.user{background:var(--plum)}
.toast{border-radius:999px}
.co>div{border-radius:var(--rc)}
/* text pages + blog */
.page h1{font-family:var(--f);font-weight:800;letter-spacing:-.04em}
.page p,.page li{font-family:var(--read)}
/* mobile */
@media(max-width:980px){
.hx{padding:8px 12px 0}
.hx-media{height:auto;min-height:0}
.hx-media::after{background:linear-gradient(0deg,rgba(251,244,242,.98) 38%,rgba(251,244,242,0) 70%)}
.hx-stats{display:none}
.card .im{border-radius:22px}
.grid{gap:22px 12px}
.bstage{padding:44px 18px 36px;border-radius:28px}
.pros{padding:16px;border-radius:28px}
.ftr{border-radius:28px 28px 0 0}
.nav .pill{display:none}
}
@media(prefers-reduced-motion:reduce){.nav .pill,.mega,.card,.card .im img,.ccard img{transition:none!important}}
.kit .im img,.mini img,.tiles .tile .ph img,.cl img,.sugg img,.ch-p img{object-fit:cover;mix-blend-mode:normal}
.mini img{width:52px;height:52px;border-radius:14px}
.pdp-im{aspect-ratio:4/5}
.pdp-im img{object-position:center}
/* blog: index cards */
.blog-hd{padding:28px 0 8px;max-width:820px}
.blog-hd .lead{max-width:40em}
.blog-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.blog-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font-weight:700;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.blog-nav a span{font-size:12px;background:var(--plum-soft);color:var(--plum);border-radius:999px;padding:2px 8px}
.blog-nav a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.agrid.lead3{grid-template-columns:1.4fr 1fr 1fr;margin-top:40px}
.acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.acard .ph{position:relative;display:block;aspect-ratio:16/10;background:var(--tile);overflow:hidden}
.acard.big .ph{aspect-ratio:16/11}
.acard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.acard:hover .ph img{transform:scale(1.05)}
.acard .cl{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--plum)}
.acard .tx{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.acard .tx b{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.acard.big .tx b{font-size:26px}
.acard .tx span{color:var(--muted);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard .tx i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--plum);margin-top:auto}
/* blog: article */
.art-hd{max-width:860px;margin:18px auto 0;text-align:center}
.art-hd h1{font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em;margin:0 0 18px}
.art-dek{font-size:19px;color:var(--ink-2);max-width:42em;margin:0 auto 18px}
.art-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.art-meta span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--muted)}
.art-cover{margin:34px 0 0;border-radius:var(--rl);overflow:hidden;aspect-ratio:21/9;background:var(--tile)}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-g{display:grid;grid-template-columns:260px minmax(0,720px);gap:64px;justify-content:center;margin-top:48px}
.art-toc{position:sticky;top:150px;align-self:start;background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:22px}
.art-toc b{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
.art-toc ol{margin:12px 0 0;padding-left:18px;display:grid;gap:8px;font-size:14px;font-weight:600}
.art-toc a:hover{color:var(--plum)}
.art-body{font-family:var(--read);font-size:18px;line-height:1.7;color:#2a2227}
.art-body h2{font-family:var(--f);font-weight:800;font-size:clamp(25px,2.4vw,32px);letter-spacing:-.03em;line-height:1.12;margin:52px 0 14px;color:var(--ink);scroll-margin-top:150px}
.art-body h3{font-family:var(--f);font-weight:700;font-size:21px;letter-spacing:-.015em;margin:32px 0 8px;color:var(--ink)}
.art-body p{margin:0 0 18px}
.art-body ul,.art-body ol{padding-left:22px;margin:0 0 20px}
.art-body li{margin:6px 0}
.art-body a{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.art-body strong{color:var(--ink)}
.art-body table{width:100%;border-collapse:separate;border-spacing:0;margin:8px 0 24px;font-size:15.5px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.art-body th{background:var(--petal);font-family:var(--f);font-weight:800;text-align:left}
.art-body th,.art-body td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.art-body tr:last-child td{border-bottom:0}
.art-body .tip{background:var(--plum-soft);border-radius:20px;padding:16px 20px;margin:0 0 20px}
.art-body .warn{background:#fff4ec;border-radius:20px;padding:16px 20px;margin:0 0 20px}
.answer{background:var(--ink);color:#f6eef2;border-radius:var(--rc);padding:24px 28px;margin-bottom:8px}
.answer b{font-family:var(--f);display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blush);margin-bottom:8px}
.answer p{margin:0;font-size:19px;line-height:1.55}
.art-shop .grid{grid-template-columns:repeat(2,1fr)}
.art-src ol{font-size:15px}
.faq-a{padding:0 0 16px;font-family:var(--read)}
.art-store{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--petal);border-radius:var(--rc);padding:24px 28px;margin-top:48px;font-family:var(--f)}
.art-store b{display:block;font-size:18px;font-weight:800}
.art-store span{color:var(--muted);font-size:15px}
.near-g{display:grid;grid-template-columns:420px 1fr;gap:40px;margin-top:36px;align-items:start}
.near-tx{font-family:var(--read);font-size:17.5px;line-height:1.65}
.near-tx .qchips{justify-content:flex-start;margin-top:22px}
@media(max-width:980px){
.agrid,.agrid.lead3{grid-template-columns:1fr}
.art-g{grid-template-columns:1fr;gap:28px}
.art-toc{position:static}
.art-cover{aspect-ratio:16/10;border-radius:28px}
.art-body{font-size:17px}
.art-shop .grid{grid-template-columns:repeat(2,1fr)}
.art-store{flex-direction:column;align-items:flex-start}
.near-g{grid-template-columns:1fr}
}
.pdp-g .pdp-im,.pdp-im{position:sticky;top:150px;aspect-ratio:4/5!important;border:0;border-radius:var(--rl);background:var(--tile)}
.pdp-im img{position:absolute;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;padding:0}
@media(max-width:980px){.pdp-g .pdp-im,.pdp-im{position:relative;top:0;aspect-ratio:4/5!important;max-height:72vh;margin:0 auto;border-radius:28px}}
@media(max-width:980px){
.strip{font-size:12.5px}
.strip .wrap{min-height:34px}
.strip .rot>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92vw}
.hx-media::after{display:none}
.ccard .lab{left:10px;bottom:10px;padding:7px 14px;gap:6px;max-width:calc(100% - 20px)}
.ccard .lab b,.ccard.big .lab b{font-size:15px;white-space:nowrap}
.ccard:not(.big) .lab span{display:none}
.ccard.big .lab b{font-size:18px}
}
/* brand marquee */
.marq{overflow:hidden;padding:34px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:flex;width:max-content;animation:marq 48s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-g{display:flex;align-items:center;gap:56px;padding-right:56px}
.marq a{display:flex;align-items:center;height:44px;opacity:.62;filter:grayscale(1);transition:opacity .25s,filter .25s}
.marq a:hover{opacity:1;filter:none}
.marq img{height:34px;width:auto;max-width:150px;object-fit:contain}
.marq .bname{font-size:20px;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq-t{animation:none}}
.acard .cl{white-space:nowrap}
/* v4-1 header: solid, opaque, never lets page text show through */
.hdr,body.home .hdr,body.home .hdr.solid{position:sticky;top:0;left:auto;right:auto;z-index:900;background:var(--cream,#fffaf8);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:none;transition:none;isolation:isolate}
.hdr.solid,.hdr:hover{box-shadow:0 1px 0 rgba(27,24,25,.04)}
.hdr .nav,body.home .hdr .nav,body.home .hdr.solid .nav{background:var(--cream,#fffaf8);border-top:1px solid var(--line)}
.hdr .search input,body.home .hdr .search input{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.strip{position:relative;z-index:901}
.hdr .sugg{z-index:910}
html{scroll-padding-top:150px}
@media(max-width:980px){
.hdr .wrap.hdr-row,.hdr-row{padding-left:16px;padding-right:16px;box-sizing:border-box;width:100%;max-width:100%}
.hdr-row{grid-template-rows:60px auto;height:auto;row-gap:0;overflow:visible}
.hdr .search{position:relative;margin:0 0 12px;width:100%;min-width:0}
.hdr .search input{width:100%;box-sizing:border-box}
.hdr{overflow:visible}
}
/* v4-2 hero: card = photo block + text block, nothing overlaps */
.hx{padding:12px 16px 0!important}
@media(min-width:761px){.hx{padding:10px var(--gut) 0!important}}
.hx .hx-stage{display:grid;grid-template-columns:1fr;grid-template-areas:"media" "in" "stats";background:#fbf4f2;border-radius:var(--rl);overflow:hidden;position:relative}
.hx .hx-media{grid-area:media;position:relative;height:auto!important;min-height:0!important;aspect-ratio:4/3;width:100%;border-radius:var(--rl) var(--rl) 0 0;overflow:hidden}
.hx .hx-media::after{display:none!important}
.hx .hx-media img{object-fit:cover;object-position:center}
.hx .hx-media img.mfd{object-position:80% 55%}
.hx .hx-in{grid-area:in;position:static!important;display:grid!important;padding:24px!important;margin:0;max-width:none;width:100%;box-sizing:border-box;pointer-events:auto;z-index:1}
.hx .hx-in .slide{grid-area:1/1;display:block!important;visibility:hidden;opacity:0;max-width:none!important;animation:none!important;transition:opacity .5s ease}
.hx .hx-in .slide.on{visibility:visible;opacity:1}
.hx-eye{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin:0 0 10px}
.hx .disp{font-size:clamp(30px,10vw,40px)!important;line-height:1.08;margin:0 0 12px}
.hx .lead{font-size:16px;line-height:1.45;margin:0 0 20px;max-width:none}
.hx .hx-in .cta{display:flex;flex-direction:column;gap:10px;margin:0}
.hx .hx-in .cta .btn{width:100%;flex:none;box-sizing:border-box;justify-content:center;text-align:center}
.hx .hx-ctl{grid-area:2/1;position:static!important;margin:0!important;align-self:end;padding-top:16px}
.hx .hx-in{grid-template-rows:auto auto}
.hx .hx-ctl .dots{display:flex;gap:8px;justify-content:center}
.hx .hx-stats{grid-area:stats;position:static!important;display:none!important}
@media(min-width:761px){
.hx .hx-stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto;grid-template-areas:"in media" "stats media";gap:0 32px;padding:16px;min-height:560px}
.hx .hx-media{aspect-ratio:auto;height:100%!important;min-height:480px!important;border-radius:var(--rl)}
.hx .hx-media img{object-position:right center}
.hx .hx-in{padding:48px 0 0 48px!important;align-content:center;grid-template-rows:auto auto}
.hx .disp{font-size:clamp(40px,4.4vw,64px)!important}
.hx .lead{font-size:18px;max-width:34ch}
.hx .hx-in .cta{flex-direction:row;flex-wrap:wrap}
.hx .hx-in .cta .btn{width:auto;padding-left:28px;padding-right:28px}
.hx .hx-ctl .dots{justify-content:flex-start}
.hx .hx-stats{display:flex!important;flex-wrap:wrap;gap:10px;padding:0 0 40px 48px;align-self:end}
.hx .hx-stats span{backdrop-filter:none;background:#fff}
}
@media(min-width:1100px){.hx .hx-in{padding-left:64px!important}.hx .hx-stats{padding-left:64px}}
/* v4-3 sections: one spacing system for the home below the hero.
margin 16 phone / 20 tablet / wrap desktop; section top 72/112; heading->content 20/28; stacked 12/16; card padding 20-24 */
:root{--sp-m:24px;--sp-sec:112px;--sp-h:28px;--sp-i:16px;--sp-card:24px}
@media(max-width:980px){:root{--gut:20px;--sp-m:20px;--sp-sec:88px;--sp-h:24px;--sp-i:14px}}
@media(max-width:760px){:root{--gut:16px;--sp-m:16px;--sp-sec:72px;--sp-h:20px;--sp-i:12px;--sp-card:20px}}
/* rhythm */
.sec{padding:var(--sp-sec) 0 0}
.sband{padding:var(--sp-sec) 0 0}
.sec-h{margin-bottom:var(--sp-h);gap:12px 20px;flex-wrap:wrap}
.sec-h h2{margin:0}
.wrap{padding-left:var(--sp-m);padding-right:var(--sp-m);box-sizing:border-box}
.sband .disp-s{margin:0 0 var(--sp-h)}
.sband-f{margin:0 auto var(--sp-i)}
.cgrid{gap:var(--sp-i)}
.grid{gap:calc(var(--sp-i)*1.5) var(--sp-i)}
.tabs{margin-bottom:var(--sp-h)}
.bfeat{gap:var(--sp-i)}
.tech{gap:var(--sp-i)}
.tcard{display:flex;flex-direction:column;gap:12px}
.tcard .ph{margin-bottom:0}
.tcard h3{margin:0}
.tcard ol{margin:0;padding-left:22px;display:grid;gap:6px}
.tcard ol li{margin:0}
.tcard .link{align-self:flex-start;margin-top:4px}
.agrid,.agrid.lead3{gap:var(--sp-i)}
.agrid.lead3{margin-top:0}
.kits{gap:var(--sp-i)}
.kit{padding:var(--sp-card)}
.brands{gap:var(--sp-i)}
.revs{gap:var(--sp-i)}
.rev{padding:var(--sp-card)}
.rev blockquote{margin:12px 0 16px}
.store-list,.store-list.four{gap:var(--sp-i)}
.store{padding:var(--sp-card)}
.store h3{margin:0 0 8px}
.store .acts2{margin-top:14px;gap:16px}
.stores-g{gap:var(--sp-h)}
.trust{margin-top:var(--sp-h)}
.trust div{padding:var(--sp-card)}
/* brand stage */
.bstage{padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px)}
.bstage .sec-h{margin-bottom:var(--sp-h)}
.bcard .lab{left:16px;bottom:16px}
/* pros block */
.pros{padding:clamp(20px,3vw,40px);gap:clamp(24px,4vw,56px)}
.pros .tx{display:flex;flex-direction:column;gap:20px}
.pros .tx>*{margin:0}
.pros .facts{margin:0;gap:16px 20px}
.pros .perks2{margin:0;gap:12px}
.pros .tx>p{margin:0}
.pros .cta{margin-top:4px;gap:10px}
/* phone */
@media(max-width:760px){
/* horizontal rails: 16px start/end, first card on the margin */
body .rail,body .grid.rail,body .tech,body .revs,body .tabs,body .qchips,body .kits.rail{
margin-left:calc(var(--sp-m)*-1);margin-right:calc(var(--sp-m)*-1);
padding-left:var(--sp-m);padding-right:var(--sp-m);
scroll-padding-left:var(--sp-m);scroll-padding-right:var(--sp-m);
scroll-snap-type:x mandatory;box-sizing:border-box;max-width:none;width:auto;
-webkit-overflow-scrolling:touch}
.tech>*,.revs>*,.rail>*,.tabs>*,.qchips>*{scroll-snap-align:start}
.tech{grid-auto-columns:78%;gap:var(--sp-i)}
.revs{grid-auto-columns:86%}
.rail{grid-auto-columns:46%;gap:var(--sp-i)}
.rail.tabp{grid-auto-columns:46%}
.kits.rail{grid-auto-columns:90%}
.tabs{display:flex;background:transparent;border:0;border-radius:0;padding-top:0;padding-bottom:0;gap:8px;margin-bottom:var(--sp-h)}
.tabs button{background:#fff;border:1px solid var(--line)}
.tabs button[aria-selected=true]{border-color:var(--ink)}
.qchips{margin-top:0}
.tcard{padding:0 4px 4px}
.tcard h3,.tcard ol,.tcard .link{padding:0 var(--sp-card)}
.tcard .link{padding:10px 18px;margin-left:var(--sp-card)}
.tcard h3{padding-top:4px}
.bstage{padding:28px var(--sp-card) 24px;border-radius:28px}
.bfeat{grid-template-columns:1fr}
.mini{grid-template-columns:1fr;gap:10px;margin-top:4px}
.mini a{padding:12px}
.pros{padding:var(--sp-card);gap:var(--sp-h);border-radius:28px}
.pros .tx{gap:var(--sp-h)}
.pros .facts{grid-template-columns:1fr 1fr;gap:20px 16px}
.pros .cta{flex-direction:column;gap:10px;margin-top:0}
.pros .cta .btn,.pros .cta a{width:100%;flex:none;justify-content:center;box-sizing:border-box}
.store-list,.store-list.four{grid-template-columns:1fr}
.trust{grid-template-columns:1fr;margin-top:var(--sp-h)}
.trust div,.trust div:nth-child(even){border-left:0;border-top:1px solid var(--line);padding:16px var(--sp-card)}
.trust div:first-child{border-top:0}
.sec-h{align-items:flex-start;flex-direction:column;gap:12px}
.sband-f{flex-direction:column}
.sband-f .btn{width:100%}
}
@media(min-width:761px) and (max-width:980px){
body .rail,body .tech,body .revs{margin-left:calc(var(--sp-m)*-1);margin-right:calc(var(--sp-m)*-1);padding-left:var(--sp-m);padding-right:var(--sp-m);scroll-padding-left:var(--sp-m);scroll-padding-right:var(--sp-m)}
}
/* v4-4 product page (Mellow-style): big rounded gallery, bold buy column, full-width panels below */
.pdp{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)!important;gap:56px!important;padding:12px 0 8px!important;align-items:start}
.pdp-g{position:sticky;top:130px}
.pdp-g .pdp-im{aspect-ratio:1!important;border:0!important;border-radius:36px!important;background:linear-gradient(160deg,var(--plum-soft),var(--blush-soft))!important;display:block}
.pdp-g .pdp-im img{position:absolute!important;inset:5%!important;width:90%!important;height:90%!important;object-fit:contain;mix-blend-mode:multiply}
.pdp-g .thumbs{gap:10px;margin-top:14px;padding-bottom:2px}
.pdp-g .thumbs button{width:84px;height:84px;border:0;border-radius:20px;background:var(--plum-soft);box-shadow:none;opacity:.8;transition:opacity .2s,box-shadow .2s}
.pdp-g .thumbs button img{mix-blend-mode:multiply;padding:6px}
.pdp-g .thumbs button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--plum)}
.pdp-info .b{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:var(--plum-soft);color:var(--plum);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pdp-info .b:hover{background:var(--plum);color:#fff}
.pdp h1{font-family:var(--f);font-weight:800;font-size:clamp(28px,2.7vw,38px);line-height:1.08;letter-spacing:-.03em;margin:14px 0 10px;color:var(--plum)}
.pdp .pr{font-size:clamp(34px,3.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1}
.pdp .stock{margin:12px 0 18px;padding:6px 14px 6px 12px;border-radius:999px;background:#e8f4ee;font-size:13.5px}
.pdp .stock.low{background:#fbeede}.pdp .stock.out{background:var(--tile)}
.pdp .perks{border:0;border-radius:0;margin:0 0 22px;display:grid;gap:10px}
.pdp .perks li{border:0;padding:0;align-items:center;font-size:15px;gap:12px;color:var(--ink-2)}
.pdp .perks li .ic{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--plum-soft);color:var(--plum)}
.pdp .perks li.lamp{display:flex;background:none;border-radius:0;padding:0;margin:0;text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;color:var(--ink-2)}
.pdp .vars{margin:0 0 20px}
.pdp .vars h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pdp .vars button{border-radius:999px;border:1.5px solid var(--line-2);background:#fff;min-height:44px;padding:8px 20px;transition:all .15s}
.pdp .vars button:hover{border-color:var(--plum)}
.pdp .vars button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:none}
.pdp .vars button[aria-pressed=true] .fine{color:#fff}
.pdp .buy{gap:12px}
.pdp .buy .qty{height:58px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff}
.pdp .buy .qty button{height:56px;width:46px}
.pdp .buy .btn{height:58px;border-radius:999px;font-size:16px;font-weight:700;background:var(--plum);border-color:var(--plum);color:#fff;letter-spacing:.01em;width:100%}
.pdp .buy .btn:hover{background:var(--plum-2)}
.pdp .buy .btn:disabled{background:var(--line-2);border-color:var(--line-2);color:var(--muted)}
.ptrust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:18px 0 0;font-size:13px;font-weight:600;color:var(--ink-2)}
.ptrust span{display:inline-flex;align-items:center;gap:6px}
.ptrust .ic{width:16px;height:16px;color:var(--plum)}
.pdp .codes{text-align:center;margin:14px 0 0}
.pdp-more{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:72px;align-items:start}
.pdp-more .desc{margin:0;background:var(--plum-soft);border-radius:36px;padding:44px 44px 40px}
.pdp-more .desc h2{font-family:var(--f);font-weight:800;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;color:var(--plum);margin:0 0 16px}
.pdp-more .desc .tx{font-family:var(--read);color:var(--ink-2);line-height:1.65}
.pdp-accs{display:grid;gap:12px}
.pdp-accs .acc{background:#fff;border:0!important;border-radius:22px;padding:0 24px;box-shadow:var(--shadow)}
.pdp-accs .acc summary{padding:20px 0!important;font-family:var(--f);font-weight:700;font-size:18px;color:var(--plum);letter-spacing:-.01em;gap:14px;justify-content:flex-start}
.pdp-accs .acc summary::-webkit-details-marker{display:none}
.pdp-accs .acc summary::after{content:"+";order:2;margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:400;line-height:1;transition:transform .25s var(--ease)}
.pdp-accs .acc[open] summary::after{content:"+";transform:rotate(45deg)}
.pdp-accs .acc>*:not(summary){padding-bottom:20px}
.pdp-accs .goodfor{margin:0;padding-bottom:22px}
.pdp-accs .goodfor span{display:none}
.pdp-accs .goodfor a{border:0;background:var(--plum-soft);color:var(--plum);font-weight:600;padding:9px 16px;border-radius:999px;font-size:14px}
.pdp-accs .goodfor a:hover{background:var(--plum);color:#fff}
.pdp-accs .howimg{width:100%;border-radius:20px;margin-bottom:14px}
.pdp-accs .faq dt{font-weight:700;margin-top:10px}.pdp-accs .faq dd{margin:2px 0 0;color:var(--ink-2)}
.bundle{padding-top:80px}
.bnd-card{background:var(--plum-soft);border-radius:36px;padding:32px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.btiles{display:flex;align-items:center;gap:16px;min-width:0}
.bplus{font-style:normal;flex:none;width:40px;height:40px;border-radius:50%;background:var(--plum);color:#fff;display:grid;place-items:center;font-size:24px;line-height:1}
.bt{flex:1;min-width:0;background:#fff;border-radius:26px;padding:12px 12px 16px;display:grid;gap:8px;max-width:240px;transition:transform .25s var(--ease)}
.bt:hover{transform:translateY(-3px)}
.bt.cur{box-shadow:0 0 0 2px var(--plum)}
.bt .bi{aspect-ratio:1;border-radius:18px;background:var(--tile);overflow:hidden;display:grid;place-items:center}
.bt .bi img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.bt .bn{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 4px}
.bt .bp{font-weight:800;padding:0 4px}
.bsum{display:grid;gap:6px;justify-items:start;min-width:200px}
.bsum b{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bsum .btn{margin-top:8px;border-radius:999px;height:54px;padding:0 28px;background:var(--plum);border-color:var(--plum);color:#fff;font-weight:700}
@media(max-width:980px){
.pdp{grid-template-columns:1fr!important;gap:20px!important}
.pdp-g{position:relative;top:0}
.pdp-g .pdp-im{border-radius:28px!important;aspect-ratio:1!important}
.pdp-g .thumbs button{width:68px;height:68px;border-radius:16px}
.pdp-more{grid-template-columns:1fr;gap:16px;margin-top:40px}
.pdp-more .desc{padding:28px 22px;border-radius:28px}
.pdp-accs .acc{border-radius:20px;padding:0 18px}
.pdp-accs .acc summary{font-size:16px}
.bundle{padding-top:56px}
.bnd-card{grid-template-columns:1fr;padding:18px;border-radius:28px;gap:20px}
.btiles{gap:8px}.bplus{width:28px;height:28px;font-size:18px}
.bt{border-radius:18px;padding:8px 8px 12px}.bt .bn{font-size:12px}.bt .bp{font-size:13px}
.bsum{grid-template-columns:1fr;min-width:0}.bsum .btn{width:100%}
.pdp h1{font-size:26px!important}.pdp .pr{font-size:34px!important}
body:has([data-pdp]){padding-bottom:78px}
}
@media(max-width:380px){.pdp h1{font-size:22px!important}}
.pdp .perks{background:none!important;box-shadow:none}
.pdp .perks li{background:none!important}
.pdp .perks .link{display:inline;background:none;border:0;padding:0;min-height:0;color:var(--plum);font-weight:700;text-decoration:underline}
.pdp-more:not(:has(.desc)){grid-template-columns:minmax(0,820px);justify-content:center}
@media(max-width:980px){.pdp-more:not(:has(.desc)){grid-template-columns:1fr}}
/* the photo fills the frame and each thumbnail, edge to edge */
.pdp-g .pdp-im{aspect-ratio:4/5!important;overflow:hidden}
.pdp-g .pdp-im img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;mix-blend-mode:normal!important;padding:0!important}
.pdp-g .thumbs button{padding:0!important;overflow:hidden}
.pdp-g .thumbs button img{width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important;margin:0!important;border-radius:inherit;mix-blend-mode:normal!important}
@media(max-width:980px){.pdp-g .pdp-im{aspect-ratio:4/5!important}}
/* v4-5 pages: listing, blog, article, city, stores, footer. Phone rhythm: 16px gutters, 64px section gaps, 16/24 heading gaps */
.near-g>*,.art-g>*,.agrid>*,.grid>*,.ftr-g>*,.stores-g>*{min-width:0}
.near-tx,.art-body,.acc,.faq-a{overflow-wrap:anywhere}
.art-body .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:#fff;margin:8px 0 24px;max-width:100%}
.art-body .tbl-scroll table{border:0;border-radius:0;margin:0;min-width:520px}
@media(max-width:980px){
:root{--gut:16px}
.wrap{padding-left:16px;padding-right:16px;box-sizing:border-box;max-width:100%}
.sec{padding-top:64px}
.sec-h{margin-bottom:24px;row-gap:16px}
.sec-h h2,.sec h2{margin:0 0 16px}
.sec-h h2{margin-bottom:0}
.lban{margin:12px 0 24px;border-radius:24px}
.lban-t{padding:20px 20px 24px}
.lban .disp{margin-bottom:16px}
.tiles{gap:12px}
.tile{box-sizing:border-box}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px;padding:0}
.tools>*{min-width:0;max-width:100%}
.tools select{max-width:100%}
.grid.g4,.grid{gap:12px;padding:0}
.card .tx,.card .info,.card .bd{padding:20px}
.card{overflow:hidden}
.acard .tx,.acard .bd,.acard>div:last-child{padding:20px}
.agrid{gap:24px}
.blog-hd{padding-top:24px;margin-bottom:24px}
.blog-nav{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 -16px 24px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.blog-nav::-webkit-scrollbar{display:none}
.blog-nav>*{flex:none}
.art-hd{padding-top:24px}
.art-hd h1{margin:16px 0}
.art-cover{margin:24px 0 0;border-radius:24px}
.art-g{margin-top:24px;gap:24px}
.art-toc{box-sizing:border-box;width:100%;padding:20px;border-radius:20px}
.art-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:18px}
.art-body table th,.art-body table td{min-width:120px}
.art-body .answer,.answer{padding:20px;border-radius:20px;box-sizing:border-box}
.art-shop{margin-top:64px}
.art-shop .grid{gap:12px}
.art-store{gap:16px;padding:20px;border-radius:20px;box-sizing:border-box}
.near-g{gap:24px;margin-top:24px}
.near-g .store,.store{padding:20px;box-sizing:border-box;max-width:100%}
.near-tx{font-size:17px}
.acc{margin-top:0}
.acc summary,.acc button{padding-left:0;padding-right:0}
.ftr{padding-left:0;padding-right:0}
.ftr-g{grid-template-columns:1fr;gap:32px}
.ftr-g>div:first-child{grid-column:auto}
.ftr-g ul{margin:0;padding:0}
.ftr-b{flex-direction:column;align-items:flex-start;gap:12px;padding-top:24px}
}
@media(min-width:981px){.sec{padding-top:96px}}
@media(max-width:980px){
.strip .wrap{min-height:34px;padding:0 12px}
.strip .rot,.strip .rot>span{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.strip,.strip a{font-size:12px!important;line-height:1.2}
.bstage .mini a:nth-child(n+3){display:none}
}
/* checkout: sign in with the store account (points, gift cards) + promo/reward code */
.co-acct{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 18px;padding:18px 22px;margin:0 0 22px;border:1px solid var(--line-2);border-radius:22px;background:#fff}
.co-acct .ic{width:26px;height:26px;color:var(--ink)}
.co-acct b{display:block;font-size:16px}
.co-acct span{display:block;color:var(--muted);font-size:14.5px;line-height:1.45}
.co-acct .btn{height:46px;padding:0 22px;font-size:14.5px;white-space:nowrap}
@media (max-width:700px){.co-acct{grid-template-columns:auto minmax(0,1fr)}.co-acct .btn{grid-column:1/-1;width:100%}}
.co-code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:18px 0 6px}
.co-code label{margin:0}
.co-code .btn{height:48px;padding:0 22px;font-size:14.5px}
.co-code-msg{margin:4px 0 14px;font-size:14px;color:#a3262b}
.co-code-msg.good{color:#146b40}
.co-disc span:last-child{color:#146b40;font-weight:700}
/* checkout fields never wider than the screen */
.co-form,.co-sum,.co-step,.co-form label{min-width:0}
.co-form input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0}
.co-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.co-row3{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr)}
@media (max-width:860px){.co-grid{grid-template-columns:minmax(0,1fr)}.co-row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ac-grid > *,.ac-card,.ac-form,.ac-form label{min-width:0}
.ac-form input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0;box-sizing:border-box}
@media (max-width:860px){.ac-grid{grid-template-columns:minmax(0,1fr)}}
/* 26/out/2026: fixes after Bao's review (Safari on iPhone 15 Pro Max and Mac, "reduce motion" on). Loaded last. */
/* 1. Nothing is hidden unless the reveal script is running; reduce motion = always visible */
html:not(.rv-on) .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}
/* 2. Cart, menu and chat sit above the sticky header (header is z 900) */
.scrim{z-index:950}.drawer{z-index:960}#chat{z-index:940}
/* 3. One rule for every product photo: the photo (already in its own shape, no white bars) FILLS its frame,
edge to edge. No padding, no second background, so there is never a lighter rectangle inside the frame. */
.card .im{background:#fff;border:0;padding:0}
.card .im img,.kit .im img,.bt .bi img,.cl img,.sugg img,.ch-p img,.rc img{object-fit:cover!important;object-position:center;mix-blend-mode:normal!important;background:#fff;padding:0!important}
.card .im img{width:100%;height:100%}
.card:hover .im img{transform:scale(1.04)}
.cl img{background:#fff;border:1px solid var(--line);border-radius:12px}
.sugg img{background:#fff;border:1px solid var(--line);border-radius:10px}
/* 4. "Often bought together": no card inside a card. Two photos, a plus, the names. */
.kits{gap:28px 24px}
.kit{border:0;background:transparent;padding:0;gap:14px;align-items:start}
.kit a{gap:6px}
.kit .im{position:relative;width:100%;aspect-ratio:4/5;background:#fff;border:0;border-radius:var(--rc);overflow:hidden;display:block}
.kit .im img{position:absolute;inset:0;width:100%;height:100%}
.kit .plus{align-self:center;margin-top:0;padding-top:28%;font-size:28px}
.kit .b{margin-top:8px}
/* 5. Product page bundle: soft band + photos, no white tiles */
.bt{background:transparent;padding:0;box-shadow:none;border-radius:0}
.bt:hover{transform:none}
.bt.cur{box-shadow:none}
.bt.cur .bi{outline:2px solid var(--plum);outline-offset:-2px}
.bt .bi{aspect-ratio:4/5;border-radius:22px;background:#fff;border:0;position:relative;overflow:hidden}
.bt .bi img{position:absolute;inset:0;width:100%;height:100%}
.bt .bn,.bt .bp{padding:0 2px}
/* 6. Labels that were too small to read on a phone */
.acard .cl{font-size:14px;padding:8px 14px}
.ccard .lab b,.ccard.big .lab b{font-size:19px}
.ccard.big .lab b{font-size:24px}
.ccard .lab span{font-size:13px}
@media(max-width:760px){.acard .cl{font-size:13px}.ccard .lab b,.ccard.big .lab b{font-size:17px}.ccard.big .lab b{font-size:21px}}
/* 7. Cart: second way to pay, for people with an account, points or a gift card */
.dr-ft .acct-co{margin-top:10px;height:48px;font-size:14.5px}
.dr-ft .acct-note{margin:8px 0 0;text-align:center}
/* 8. Bundle tiles line up at the top even when one name takes two lines */
.btiles{align-items:center}
.bt .bn{min-height:calc(1.3em * 2)}
.bplus{align-self:center;margin-bottom:calc(1.3em * 2 + 8px + 1.5em)}
/* 9. Saved items (heart), compare, product reviews: what the old theme offered, now inside the new site */
.card .sv{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s}
.card .sv .ic{width:18px;height:18px}
.card .sv:hover{transform:scale(1.08)}
.card .sv.on{background:var(--plum);color:#fff}
.card .sv.on .ic{fill:currentColor}
.act .n[hidden]{display:none}
.pdp-tools{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.pdp-tools .tool{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pdp-tools .tool .ic{width:17px;height:17px}
.pdp-tools .tool:hover{border-color:var(--ink)}
.pdp-tools .tool.on{background:var(--plum);border-color:var(--plum);color:#fff}
.reviews .rv-sum{display:flex;align-items:center;gap:12px;margin:-10px 0 22px;font-size:17px}
.reviews .rv-sum b{font-size:22px;font-weight:800}
.stars{display:inline-flex;gap:2px}
.stars .st{width:18px;height:18px;color:var(--line-2)}
.stars .st.on{color:#e3a23a;fill:#e3a23a}
.rv-list{display:grid;gap:16px;max-width:820px}
.rv-item{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:22px 24px}
.rv-item p{margin:10px 0 12px;font-family:var(--read);line-height:1.55}
.rv-item footer{display:flex;gap:12px;align-items:baseline}
.rv-form{max-width:640px;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:26px 28px;display:grid;gap:14px}
.rv-form h3{margin:0 0 4px}
.rv-form label{display:grid;gap:6px;font-weight:600;font-size:14px}
.rv-form input,.rv-form textarea{height:auto;min-height:46px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;font:inherit;font-weight:400}
.rv-form textarea{resize:vertical}
.rv-stars{display:flex;gap:4px;position:relative}
.rv-stars label{cursor:pointer;display:inline-grid}
.rv-stars input{position:absolute;opacity:0;width:0;height:0}
.rv-stars .ic{width:30px;height:30px;color:#e3a23a;fill:#e3a23a;transition:color .15s}
.rv-stars label:has(input:checked) ~ label .ic{color:var(--line-2);fill:none}
.rv-act{display:flex;gap:10px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* compare page */
.cmp-g{display:grid;gap:0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--rc);background:#fff}
.cmp-r{display:grid;grid-template-columns:140px repeat(var(--n),minmax(170px,1fr));border-top:1px solid var(--line)}
.cmp-r.cmp-top{border-top:0}
.cmp-top::before{content:""}
.cmp-h{padding:16px 18px;font-weight:700;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cmp-c{padding:16px 18px;min-width:0;font-size:15px}
.cmp-c .btn{height:44px;padding:0 20px;font-size:14px}
.cmp-im{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);margin-bottom:10px}
.cmp-im img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.cmp-r{grid-template-columns:96px repeat(var(--n),minmax(150px,1fr))}.cmp-h,.cmp-c{padding:12px}.pdp-tools .tool{height:38px;padding:0 13px;font-size:13.5px}}
/* 10. Accessibility (axe, 26/out): footer text readable on the dark footer; scrolling rails reachable by keyboard */
.ftr p,.ftr a,.ftr-b span{color:#d9cfd4}
.ftr p a{color:#f3ebee;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35)}
.ftr h4{color:#fff}
/* 11. Product page: the extra blocks never sit in half a row */
.pdp-more:not(:has(.desc)){grid-template-columns:1fr}
.pdp-more:not(:has(.desc)) .pdp-accs{max-width:760px}
.art-store .btn,.art-store .btn:hover{color:#fff}
/* 27/out: o botao de acessibilidade nao cobre os botoes do carrinho no celular */
body:has(#cart.on) .va11y-fab{display:none}
/* 27/out: foto da cesta nas lojas e na home; no Safari a caixa com proporção fixa encolhia dentro da grade */
.stores-ph{width:100%;justify-self:stretch}
.stores-ph img,.pros .ph img{object-position:24% 50%}
/* 27/out: card de subcategoria com respiro por dentro; nome e contagem nunca encostam ou saem da borda */
.tiles .tile{box-sizing:border-box;padding:10px 10px 16px;overflow:hidden;min-width:0}
.tiles .tile .ph{border-radius:calc(var(--rc) - 10px)}
.tiles .tile b{margin-top:12px;padding:0 6px;overflow-wrap:anywhere}
.tiles .tile>span:not(.ph){display:block;padding:0 6px;margin-top:2px}
@media (max-width:760px){.tiles .tile{padding:8px 8px 12px}.tiles .tile .ph{border-radius:calc(var(--rc) - 14px)}.tiles .tile b{padding:0 4px}.tiles .tile>span:not(.ph){padding:0 4px}}