/* Luma Beauty Trading — design preview stylesheet */
@import url("fonts.css");
:root{
  --cream:#FFFAF5; --blush:#F7E0D4; --peach:#E1A58E; --brown:#54483C; --pink:#E18EA1;
  --gold:#C9A96E; --gold-d:#A9824C; --ink:#3B322A; --muted:#8A7C6E; --line:#EADCCF; --white:#fff;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --r:2px; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.65;color:var(--brown);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(40px,5.4vw,74px)} h2{font-size:clamp(32px,3.6vw,50px)} h3{font-size:26px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d);font-weight:500;display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:28px;height:1px;background:var(--gold)}
em.serif{font-family:var(--serif);font-style:italic;color:var(--peach);font-weight:500}
.section{padding:110px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.section-head p{max-width:460px;color:var(--muted);margin:0}
.center{text-align:center}
.link-u{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:4px;white-space:nowrap;transition:color .3s}
.link-u:hover{color:var(--gold-d)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;border:1px solid var(--ink);background:var(--ink);color:var(--cream);cursor:pointer;transition:all .35s var(--ease);border-radius:var(--r)}
.btn:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn.light{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.sm{height:42px;padding:0 20px;font-size:11px}
.btn.block{width:100%}
.btn svg{width:16px;height:16px}

/* Top bar */
.topbar{background:var(--ink);color:#EDE2D6;font-size:12px;letter-spacing:.06em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:20px}
.topbar .msgs{display:flex;gap:28px;align-items:center}
.topbar .msgs span{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.topbar .msgs i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.topbar .links{display:flex;gap:22px;white-space:nowrap}
.topbar .links a:hover{color:var(--gold)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,245,.94);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(84,72,60,.35)}
.head-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:86px;gap:24px}
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--ink)}
.logo .lw{font-family:var(--serif);font-size:38px;font-weight:500;letter-spacing:.42em;margin-right:-.42em}
.logo .lt{font-family:var(--serif);font-size:10.5px;letter-spacing:.52em;margin-right:-.52em;margin-top:6px;color:var(--gold-d);font-weight:600;display:flex;align-items:center;gap:8px}
.logo .lt::before,.logo .lt::after{content:"";width:14px;height:1px;background:var(--gold)}
.search{display:flex;align-items:center;border:1px solid var(--line);background:#fff;height:44px;max-width:340px;padding:0 14px;gap:10px;border-radius:40px;transition:border-color .3s}
.search:focus-within{border-color:var(--gold)}
.search input{border:0;outline:0;background:transparent;flex:1;font-size:13.5px;min-width:0}
.search svg{width:17px;height:17px;opacity:.65;flex:none}
.head-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 10px;font-size:12.5px;letter-spacing:.04em;background:none;border:0;cursor:pointer;color:var(--ink);border-radius:30px;transition:background .25s}
.icon-btn:hover{background:var(--blush)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .count{position:absolute;top:5px;left:22px;min-width:17px;height:17px;border-radius:10px;background:var(--peach);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 4px}
.burger{display:none}

/* Main nav + mega menu */
.mainnav{border-top:1px solid var(--line)}
.mainnav>.wrap>ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:6px}
.mainnav li.top>a{display:flex;align-items:center;gap:6px;height:52px;padding:0 20px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);position:relative}
.mainnav li.top>a::after{content:"";position:absolute;left:20px;right:20px;bottom:12px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mainnav li.top:hover>a::after,.mainnav li.top>a.active::after{transform:scaleX(1)}
.mainnav li.top>a .chev{width:9px;height:9px;opacity:.55;transition:transform .3s}
.mainnav li.top:hover>a .chev{transform:rotate(180deg)}
.mainnav li.hl>a{color:var(--gold-d)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(84,72,60,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease)}
.mainnav li.top:hover .mega,.mainnav li.top:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;gap:40px;padding-top:40px;padding-bottom:44px}
.mega h5{font-family:var(--sans);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-d);margin:0 0 16px;font-weight:500}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:6px 0;font-family:var(--serif);font-size:20px;color:var(--ink);transition:color .2s,padding .3s}
.mega li a:hover{color:var(--peach);padding-left:6px}
.mega .promo{position:relative;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;padding:24px;color:#fff;background:var(--brown)}
.mega .promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mega .promo:hover img{transform:scale(1.05)}
.mega .promo::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(59,50,42,.7));z-index:1}
.mega .promo div{position:relative;z-index:2}
.mega .promo strong{font-family:var(--serif);font-size:26px;font-weight:500;display:block}
.mega .promo span{font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--cream) 0%,var(--cream) 46%,var(--blush) 46%,#F3D3C3 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;min-height:660px;padding-top:40px;padding-bottom:40px}
.hero h1 em{font-style:italic;color:var(--peach)}
.hero p.lead{font-size:17px;max-width:500px;color:var(--brown);margin-bottom:34px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero .note{margin-top:30px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
.hero .note svg{width:16px;height:16px;color:var(--gold-d)}
.hero-visual{position:relative;height:580px}
.hero-visual .main{position:absolute;right:0;top:0;width:82%;height:100%;object-fit:cover;border-radius:220px 220px 2px 2px}
.hero-visual .sub{position:absolute;left:0;bottom:46px;width:42%;aspect-ratio:4/5;object-fit:cover;border:10px solid var(--cream);box-shadow:0 30px 60px -30px rgba(84,72,60,.5)}
.hero-visual .badge{position:absolute;right:-14px;bottom:70px;background:var(--cream);padding:20px 24px;border:1px solid var(--gold);max-width:230px;box-shadow:0 20px 40px -25px rgba(84,72,60,.5)}
.hero-visual .badge b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink);line-height:1.15}
.hero-visual .badge small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d)}
.hero-visual .ring{position:absolute;left:12%;top:4%;width:120px;height:120px;border:1px solid var(--gold);border-radius:50%;animation:spin 30s linear infinite}
.hero-visual .ring::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Trust strip */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .item{display:flex;gap:16px;align-items:flex-start;padding:30px 26px;border-right:1px solid var(--line)}
.trust .item:last-child{border-right:0}
.trust svg{width:34px;height:34px;flex:none;color:var(--gold-d);stroke-width:1.2}
.trust b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);line-height:1.2;margin-bottom:3px}
.trust span{font-size:13px;color:var(--muted);line-height:1.5;display:block}

/* Category tiles */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cat-tile{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;background:var(--blush)}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.cat-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(52,42,34,.72));z-index:1}
.cat-tile:hover img{transform:scale(1.06)}
.cat-tile .txt{position:relative;z-index:2;padding:34px;width:100%}
.cat-tile .num{font-family:var(--serif);font-style:italic;font-size:18px;opacity:.85}
.cat-tile h3{color:#fff;font-size:40px;margin:2px 0 8px}
.cat-tile .sub{font-size:12.5px;opacity:.9;margin-bottom:16px}
.cat-tile .go{font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:4px}
.cat-tile .go svg{width:14px;transition:transform .3s}
.cat-tile:hover .go svg{transform:translateX(5px)}

/* Brands */
.brands{background:var(--blush)}
.brands-row{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(84,72,60,.15);border-left:1px solid rgba(84,72,60,.15)}
.brand-cell{height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgba(84,72,60,.15);border-bottom:1px solid rgba(84,72,60,.15);transition:background .4s;text-align:center;padding:10px}
.brand-cell:hover{background:var(--cream)}
.brand-cell .bn{font-family:var(--serif);font-size:24px;color:var(--ink);letter-spacing:.06em}
.brand-cell .bn.caps{font-family:var(--sans);font-size:15px;letter-spacing:.35em;font-weight:500}
.brand-cell .bn.it{font-style:italic}
.brand-cell small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px}
.card{position:relative;display:flex;flex-direction:column}
.card .media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--blush)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .media img{transform:scale(1.045)}
.card .tags{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tag{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;background:var(--cream);color:var(--ink);font-weight:500}
.tag.gold{background:var(--gold);color:#fff}
.tag.pink{background:var(--pink);color:#fff}
.card .wish{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,250,245,.9);border:0;display:grid;place-items:center;cursor:pointer;z-index:2;opacity:0;transform:translateY(-6px);transition:all .3s}
.card .wish svg{width:17px;height:17px}
.card:hover .wish{opacity:1;transform:none}
.card .quick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;opacity:0;transform:translateY(10px);transition:all .35s var(--ease)}
.card:hover .quick{opacity:1;transform:none}
.card .body{padding:18px 2px 0;display:flex;flex-direction:column;flex:1}
.card .brand{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);font-weight:500}
.card h4{font-family:var(--serif);font-size:21px;font-weight:500;margin:6px 0 6px;line-height:1.2}
.card h4 a:hover{color:var(--peach)}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-bottom:14px}
.card .meta b{color:var(--brown);font-weight:500}
.price-lock{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;font-size:12.5px}
.price-lock .pl{display:flex;align-items:center;gap:8px;color:var(--ink)}
.price-lock .pl svg{width:15px;height:15px;color:var(--gold-d)}
.price-lock a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:500;border-bottom:1px solid transparent}
.price-lock a:hover{border-color:var(--gold)}

/* Split / story */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split .imgs{position:relative;height:600px}
.split .imgs img:first-child{position:absolute;left:0;top:0;width:75%;height:86%;object-fit:cover}
.split .imgs img:last-child{position:absolute;right:0;bottom:0;width:48%;height:52%;object-fit:cover;border:10px solid var(--cream)}
.checks{list-style:none;padding:0;margin:26px 0 34px;display:grid;gap:16px}
.checks li{display:flex;gap:14px;align-items:flex-start}
.checks li svg{width:22px;height:22px;flex:none;color:var(--gold-d);margin-top:2px}
.checks b{font-weight:500;color:var(--ink);display:block}
.checks span{font-size:14px;color:var(--muted)}

/* Steps */
.steps-sec{background:var(--ink);color:#E9DDD0}
.steps-sec h2{color:var(--cream)}
.steps-sec .section-head p{color:#BFAF9F}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:1px solid rgba(201,169,110,.35)}
.step{padding:36px 30px 10px 0;position:relative}
.step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.step .n{font-family:var(--serif);font-size:62px;line-height:1;color:var(--gold);font-style:italic;font-weight:400;display:block;margin-bottom:14px}
.step h4{color:var(--cream);font-family:var(--serif);font-size:25px;font-weight:500;margin:0 0 10px}
.step p{font-size:14px;color:#BFAF9F;margin:0}
.steps-cta{display:flex;gap:14px;margin-top:56px;flex-wrap:wrap}
.steps-sec .btn.ghost{color:var(--cream);border-color:rgba(255,250,245,.5)}
.steps-sec .btn.ghost:hover{background:var(--cream);color:var(--ink)}

/* Trade band */
.band{position:relative;overflow:hidden;background:var(--blush)}
.band .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding-top:90px;padding-bottom:90px}
.band .panel{background:var(--cream);padding:40px;border:1px solid var(--gold);position:relative}
.band .panel::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,169,110,.35);pointer-events:none}
.band .panel h3{font-size:30px}
.band .panel ul{padding-left:18px;margin:0 0 24px;color:var(--brown);font-size:14px}
.band .panel li{margin-bottom:6px}
.band .panel li::marker{color:var(--gold)}

/* Newsletter */
.news{text-align:center;padding:100px 0;background:var(--cream)}
.news form{display:flex;max-width:540px;margin:30px auto 14px;border-bottom:1px solid var(--brown)}
.news input{flex:1;border:0;background:transparent;height:54px;outline:0;font-size:15px;padding:0 4px}
.news button{border:0;background:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;color:var(--ink);display:flex;gap:10px;align-items:center}
.news button svg{width:16px}
.news small{color:var(--muted);font-size:12px}

/* Footer */
.site-footer{background:#2F2822;color:#CDBFB0;font-size:14px}
.site-footer .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:40px;padding-top:80px;padding-bottom:56px}
.site-footer .logo{color:var(--cream);align-items:flex-start}
.site-footer .logo .lw{margin-right:0}
.site-footer h6{font-family:var(--sans);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin:0 0 20px;font-weight:500}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a:hover{color:var(--cream)}
.site-footer .about p{margin:22px 0;max-width:300px;font-size:13.5px;line-height:1.7}
.site-footer address{font-style:normal;font-size:13px;line-height:1.75}
.site-footer address b{color:var(--cream);font-weight:500}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border:1px solid rgba(205,191,176,.3);border-radius:50%;display:grid;place-items:center;transition:all .3s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.socials svg{width:16px;height:16px}
.site-footer .bottom{border-top:1px solid rgba(205,191,176,.15);padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px}
.site-footer .legal{display:flex;gap:22px;flex-wrap:wrap}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{border:1px solid rgba(205,191,176,.3);padding:4px 9px;font-size:10.5px;letter-spacing:.12em;border-radius:3px}

/* Breadcrumb / page head */
.crumbs{font-size:12px;letter-spacing:.06em;color:var(--muted);padding:22px 0}
.crumbs a:hover{color:var(--gold-d)}
.crumbs span{margin:0 8px;color:var(--gold)}
.page-head{background:linear-gradient(110deg,var(--blush),#F4D7C9 60%,var(--cream));position:relative;overflow:hidden}
.page-head .wrap{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;min-height:290px}
.page-head p{max-width:520px;color:var(--brown);margin:0}
.page-head .ph-img{height:290px;object-fit:cover;width:100%;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.subcats{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid var(--line);border-radius:30px;font-size:13px;background:#fff;transition:all .25s;cursor:pointer;white-space:nowrap}
.chip:hover,.chip.on{border-color:var(--ink);background:var(--ink);color:var(--cream)}

/* Shop layout */
.shop{display:grid;grid-template-columns:270px 1fr;gap:48px;padding:40px 0 100px}
.filters{align-self:start;padding-right:6px}
.filter-close{display:none}
.filters .fhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.filters .fhead h4{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin:0;font-weight:500}
.filters .fhead a{font-size:12px;color:var(--muted);text-decoration:underline}
.fgroup{border-bottom:1px solid var(--line);padding:18px 0}
.fgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:500}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:20px;color:var(--gold-d)}
.fgroup[open] summary::after{content:"–"}
.fgroup .opts{display:grid;gap:9px;margin-top:14px}
.check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.check input{appearance:none;width:16px;height:16px;border:1px solid #BCAE9F;margin:0;display:grid;place-items:center;cursor:pointer;background:#fff;flex:none}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:8px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.check em{margin-left:auto;font-style:normal;color:var(--muted);font-size:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.swatches .chip{height:32px;font-size:12px;padding:0 12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap}
.toolbar .count{font-size:13px;color:var(--muted)}
.toolbar .right{display:flex;gap:12px;align-items:center}
.select{height:42px;border:1px solid var(--line);background:#fff;padding:0 36px 0 14px;font-size:13px;border-radius:var(--r);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2354483C'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.active-filters .tagx{font-size:12px;padding:6px 12px;background:var(--blush);display:inline-flex;gap:8px;align-items:center}
.active-filters .tagx b{font-weight:400;cursor:pointer;opacity:.6}
.filter-btn{display:none}
.shop .grid{grid-template-columns:repeat(3,1fr)}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:60px}
.pagination a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);font-size:13px;transition:all .25s}
.pagination a.on,.pagination a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.seo-text{border-top:1px solid var(--line);padding-top:40px;margin-top:70px;color:var(--muted);font-size:14px;columns:2;column-gap:48px}
.seo-text h3{column-span:all;color:var(--ink)}

/* Product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;padding:10px 0 90px}
.gallery{display:grid;grid-template-columns:86px 1fr;gap:16px;align-self:start;position:sticky;top:160px}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumbs button{padding:0;border:1px solid transparent;background:var(--blush);cursor:pointer;aspect-ratio:4/5;overflow:hidden;transition:border-color .25s}
.thumbs button.on,.thumbs button:hover{border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.main-img{position:relative;aspect-ratio:4/5;background:var(--blush);overflow:hidden}
.main-img img{width:100%;height:100%;object-fit:cover}
.main-img .tags{position:absolute;top:18px;left:18px;display:flex;gap:6px}
.pinfo .brand{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);font-weight:500}
.pinfo h1{font-size:clamp(34px,3.4vw,48px);margin:10px 0 14px}
.pinfo .short{color:var(--brown);font-size:15.5px;max-width:520px}
.idline{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--muted);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
.idline b{color:var(--ink);font-weight:500}
.lockbox{background:#fff;border:1px solid var(--line);padding:26px;position:relative}
.lockbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.lockbox .lt{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;color:var(--ink)}
.lockbox .lt svg{width:22px;height:22px;color:var(--gold-d)}
.lockbox p{font-size:13.5px;color:var(--muted);margin:6px 0 18px}
.lockbox .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0;border:1px solid var(--line)}
.kv div{padding:14px 16px;border-right:1px solid var(--line);background:var(--cream)}
.kv div:last-child{border-right:0}
.kv small{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kv b{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink)}
.qtyrow{display:flex;gap:12px;align-items:stretch;margin-bottom:12px}
.qty{display:flex;border:1px solid var(--line);background:#fff;height:52px}
.qty button{width:44px;border:0;background:none;cursor:pointer;font-size:18px}
.qty input{width:64px;text-align:center;border:0;outline:0;background:transparent}
.qtyrow .btn{flex:1}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.perks div{display:flex;gap:10px;align-items:center;font-size:13px}
.perks svg{width:20px;height:20px;color:var(--gold-d);flex:none}
.docs{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.docs a{font-size:12px;display:inline-flex;gap:8px;align-items:center;border:1px dashed #CDB894;padding:8px 12px;color:var(--brown)}
.docs a:hover{background:var(--blush)}
.docs svg{width:14px;height:14px}
.tabs{border-top:1px solid var(--line);margin-top:10px}
.tabnav{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabnav button{background:none;border:0;padding:20px 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;color:var(--muted);position:relative;white-space:nowrap;font-weight:500}
.tabnav button.on{color:var(--ink)}
.tabnav button.on::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;background:var(--gold)}
.tabpane{display:none;padding:40px 0;animation:fade .4s}
.tabpane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tabpane .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:42%;font-weight:500;color:var(--ink);background:rgba(247,224,212,.35)}
.spec td code{font-size:12.5px;background:var(--blush);padding:2px 6px}
.inci{font-size:14px;line-height:1.9;background:#fff;border:1px solid var(--line);padding:24px}
.note-ph{font-size:12px;color:var(--muted);font-style:italic;margin-top:10px}
.howto{counter-reset:h;list-style:none;padding:0;display:grid;gap:18px}
.howto li{display:flex;gap:16px}
.howto li::before{counter-increment:h;content:counter(h,decimal-leading-zero);font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold);line-height:1}
.feeds{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.feeds span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);background:#fff}

/* Wholesale page */
.ws-hero{background:var(--ink);color:#E9DDD0;position:relative;overflow:hidden}
.ws-hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;min-height:520px}
.ws-hero h1{color:var(--cream)}
.ws-hero p{color:#CDBFB0;font-size:17px;max-width:520px}
.ws-hero img{height:520px;width:100%;object-fit:cover;opacity:.92}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.benefit{background:#fff;padding:34px 28px;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.benefit:hover{transform:translateY(-6px);box-shadow:0 30px 50px -35px rgba(84,72,60,.5)}
.benefit svg{width:36px;height:36px;color:var(--gold-d);margin-bottom:18px}
.benefit h4{font-family:var(--serif);font-size:23px;font-weight:500;margin:0 0 8px}
.benefit p{font-size:14px;color:var(--muted);margin:0}
.apply{display:grid;grid-template-columns:1fr 1.5fr;gap:70px}
.apply aside{position:sticky;top:160px;align-self:start}
.form{background:#fff;border:1px solid var(--line);padding:44px}
.form h3{font-size:30px}
.form fieldset{border:0;padding:0;margin:0 0 28px}
.form legend{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);font-weight:500;margin-bottom:16px;padding:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
.field label{display:block;font-size:12.5px;margin-bottom:6px;color:var(--ink)}
.field label i{color:var(--peach);font-style:normal}
.field input,.field select,.field textarea{width:100%;height:48px;border:1px solid var(--line);background:var(--cream);padding:0 14px;outline:0;transition:border-color .25s;border-radius:var(--r);font-size:14px}
.field textarea{height:110px;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff}
.field .select{width:100%;height:48px;background-color:var(--cream)}
.upload{border:1px dashed #CDB894;padding:22px;text-align:center;font-size:13px;color:var(--muted);background:var(--cream)}
.upload b{color:var(--ink);font-weight:500}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chips-in label{display:inline-flex}
.chips-in input{display:none}
.chips-in span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:30px;font-size:13px;cursor:pointer;background:var(--cream);transition:all .2s}
.chips-in input:checked+span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.login-box{background:var(--blush);padding:32px;margin-top:28px}
.login-box h4{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 0 6px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:var(--serif);font-size:22px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;color:var(--gold-d)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--muted);max-width:760px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{background:#fff;border:1px solid var(--line);padding:32px}
.contact-card h4{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 0 12px}
.contact-card p,.contact-card address{font-size:14px;font-style:normal;line-height:1.8;margin:0}
.contact-card b{font-weight:500;color:var(--ink)}

/* Drawers */
.overlay{position:fixed;inset:0;background:rgba(47,40,34,.45);opacity:0;visibility:hidden;transition:all .35s;z-index:90}
.drawer{position:fixed;top:0;bottom:0;width:min(420px,92vw);background:var(--cream);z-index:100;transition:transform .45s var(--ease);display:flex;flex-direction:column}
.drawer.right{right:0;transform:translateX(100%)}
.drawer.left{left:0;transform:translateX(-100%)}
.drawer.open{transform:none}
body.lock{overflow:hidden}
body.lock .overlay{opacity:1;visibility:visible}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}
.drawer .dh h4{margin:0;font-size:24px}
.drawer .close{background:none;border:0;font-size:28px;cursor:pointer;line-height:1;color:var(--ink)}
.drawer .db{padding:26px;overflow:auto;flex:1}
.drawer .df{padding:22px 26px;border-top:1px solid var(--line);display:grid;gap:10px}
.mini-item{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.mini-item img{aspect-ratio:4/5;object-fit:cover;background:var(--blush)}
.mini-item small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.mini-item b{display:block;font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.2}
.mini-item span{font-size:12px;color:var(--muted)}
.mnav{list-style:none;margin:0;padding:0}
.mnav>li{border-bottom:1px solid var(--line)}
.mnav>li>a,.mnav summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:var(--serif);font-size:24px;color:var(--ink);cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-family:var(--sans);font-size:20px;font-weight:300;color:var(--gold-d)}
.mnav details[open] summary::after{content:"–"}
.mnav details ul{list-style:none;padding:0 0 14px 4px;margin:0;display:grid;gap:8px}
.mnav details ul a{font-size:14.5px;color:var(--brown)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal,.static .reveal{opacity:1;transform:none}
.preview-flag{position:fixed;left:16px;bottom:16px;pointer-events:none;font-size:10px!important;z-index:80;background:var(--ink);color:var(--cream);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:30px;opacity:.85}

/* Responsive */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .site-footer .top{grid-template-columns:1fr 1fr 1fr}
  .site-footer .about,.site-footer .contact-col{grid-column:span 3}
  .brands-row{grid-template-columns:repeat(3,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .shop .grid{grid-template-columns:repeat(2,1fr)}
  .mainnav li.top>a{padding:0 12px;letter-spacing:.14em}
}
@media (max-width:900px){
  .topbar .msgs span:nth-child(n+2){display:none}
  .topbar .links{display:none}
  .topbar .wrap{justify-content:center;height:36px}
  .topbar{font-size:11.5px}
  .mainnav{display:none}
  .burger{display:inline-flex}
  .head-main{grid-template-columns:auto 1fr auto;height:70px}
  .head-main .search{display:none}
  .head-main .logo{order:0;justify-self:center}
  .head-left{display:flex;align-items:center}
  .logo .lw{font-size:28px}
  .logo .lt{font-size:8.5px}
  .icon-btn .lbl{display:none}
  .hide-m{display:none!important}
  .m-search{display:flex!important;max-width:none;margin:0 0 12px}
  .section{padding:72px 0}
  .wrap{padding:0 20px}
  .hero{background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 52%,var(--blush) 52%)}
  .hero .wrap{grid-template-columns:1fr;gap:36px;min-height:0;padding-top:44px;padding-bottom:56px}
  .hero-visual{height:440px}
  .hero-visual .badge{right:0;bottom:20px}
  .hero-visual .ring{display:none}
  .trust .wrap{grid-template-columns:1fr 1fr;padding:0}
  .trust .item{padding:22px 18px;border-bottom:1px solid var(--line);flex-direction:column;gap:10px}
  .trust .item:nth-child(2n){border-right:0}
  .trust b{font-size:18px}
  .cats{grid-template-columns:1fr;gap:16px}
  .cat-tile{aspect-ratio:4/3.4}
  .cat-tile::before{background:linear-gradient(180deg,rgba(52,42,34,.05) 20%,rgba(52,42,34,.78))}
  .cat-tile .txt{padding:24px}
  .cat-tile h3{font-size:34px}
  .brand-cell .bn{font-size:19px}
  .brand-cell .bn.caps{font-size:12px;letter-spacing:.22em}
  .section-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .grid,.shop .grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .card h4{font-size:18px}
  .card .wish{opacity:1;transform:none;width:32px;height:32px}
  .card .quick{display:none}
  .price-lock{flex-direction:column;align-items:flex-start;gap:6px}
  .split,.band .wrap,.page-head .wrap,.pdp,.tabpane .cols,.apply,.ws-hero .wrap{grid-template-columns:1fr;gap:40px}
  .split .imgs{height:420px}
  .steps{grid-template-columns:1fr}
  .step{padding:30px 0 6px}
  .brands-row{grid-template-columns:repeat(2,1fr)}
  .brand-cell{height:100px}
  .site-footer .top{grid-template-columns:1fr 1fr;padding-top:60px;padding-bottom:40px;gap:32px 20px}
  .site-footer .about,.site-footer .contact-col{grid-column:span 2}
  .page-head .ph-img{display:none}
  .page-head .wrap{min-height:220px;padding-top:36px;padding-bottom:36px}
  .shop{grid-template-columns:1fr;padding-top:24px;padding-bottom:40px}
  .filters{position:fixed;inset:0 auto 0 0;width:min(360px,90vw);max-height:none;background:var(--cream);z-index:100;padding:24px;transform:translateX(-100%);transition:transform .45s var(--ease)}
  .filters.open{transform:none}
  .filter-btn{display:inline-flex}
  .filters{overflow:auto}
  .filter-close{display:flex}
  .gallery{position:static;grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2}
  .thumbs button{width:70px}
  .kv{grid-template-columns:1fr 1fr 1fr}
  .kv div{padding:12px 10px}
  .kv b{font-size:18px}
  .perks{grid-template-columns:1fr}
  .lockbox .row{grid-template-columns:1fr}
  .form{padding:26px 20px}
  .fgrid{grid-template-columns:1fr}
  .apply aside{position:static}
  .contact-grid,.benefits{grid-template-columns:1fr}
  .seo-text{columns:1}
  .ws-hero img{height:300px}
  .ws-hero .wrap{padding-top:50px;padding-bottom:50px;min-height:0}
  .band .panel{padding:28px}
}
.m-search{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---- Retail additions ---- */
.mainnav li.sm>a{font-size:11px;color:var(--muted);letter-spacing:.16em}
.price-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.price{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.price-row .add{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--ink);background:transparent;cursor:pointer;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:all .25s;border-radius:var(--r)}
.price-row .add svg{width:15px;height:15px}
.price-row .add:hover{background:var(--ink);color:var(--cream)}
.subtotal{display:flex;justify-content:space-between;padding:18px 0 4px;font-size:15px}
.subtotal b{font-family:var(--serif);font-size:22px}
.ex-note{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:-20px;margin-bottom:34px}
.pprice{display:flex;align-items:baseline;gap:14px;margin:4px 0 6px}
.pprice .price{font-size:38px}
.pprice small{font-size:12.5px;color:var(--muted)}
.unitp{font-size:12.5px;color:var(--muted);margin-bottom:22px}
.sizes{display:flex;gap:10px;margin:8px 0 22px;flex-wrap:wrap}
.sizes .chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.flabel{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.buyrow{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-bottom:12px}
.ws-hint{margin-top:22px;padding:16px 18px;border:1px solid var(--line);background:#fff;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.ws-hint a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);border-bottom:1px solid var(--gold);white-space:nowrap}
.routine{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.routine a{display:block;background:#fff;border:1px solid var(--line);padding:0 0 26px;transition:transform .4s var(--ease),box-shadow .4s}
.routine a:hover{transform:translateY(-6px);box-shadow:0 30px 50px -35px rgba(84,72,60,.5)}
.routine img{aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:22px}
.routine .n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:22px;padding:0 24px}
.routine h4{font-family:var(--serif);font-size:26px;font-weight:500;margin:2px 0 6px;padding:0 24px}
.routine p{font-size:13.5px;color:var(--muted);margin:0;padding:0 24px}
.ws-band{background:var(--ink);color:#CDBFB0}
.ws-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:44px;padding-bottom:44px;flex-wrap:wrap}
.ws-band h3{color:var(--cream);margin:0 0 4px;font-size:30px}
.ws-band p{margin:0;font-size:14px}
.ws-band .btn.ghost{color:var(--cream);border-color:rgba(255,250,245,.5)}
.ws-band .btn.ghost:hover{background:var(--cream);color:var(--ink)}
.site-footer .ws-link a{color:var(--gold)}
@media (max-width:1100px){.routine{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .routine{grid-template-columns:1fr 1fr;gap:14px}
  .routine h4{font-size:21px;padding:0 14px}.routine .n,.routine p{padding:0 14px}
  .price{font-size:19px}
  .price-row .add span{display:none}
  .price-row .add{width:36px;padding:0;justify-content:center}
  .pprice .price{font-size:32px}
  .ws-hint{flex-direction:column;align-items:flex-start}
}
.static .preview-flag{display:none}

/* ---- v2: Hero slider ---- */
.slider{position:relative;height:min(82vh,760px);min-height:600px;overflow:hidden;background:var(--ink)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s var(--ease),visibility 0s 1.2s;display:flex;align-items:center}
.slide.is-active{opacity:1;visibility:visible;transition:opacity 1.2s var(--ease),visibility 0s;z-index:1}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.slide.is-active>img{transform:scale(1)}
.slide::before{content:"";position:absolute;inset:0;z-index:1}
.slide.light::before{background:linear-gradient(90deg,rgba(255,250,245,.94) 0%,rgba(255,250,245,.82) 34%,rgba(255,250,245,.15) 62%,transparent 80%)}
.slide.dark::before{background:linear-gradient(90deg,rgba(40,33,27,.82) 0%,rgba(40,33,27,.6) 38%,rgba(40,33,27,.05) 70%,transparent)}
.slide .wrap{position:relative;z-index:2;width:100%}
.s-content{max-width:560px;padding-bottom:40px}
.s-content>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.slide.is-active .s-content>*{opacity:1;transform:none}
.slide.is-active .s-content>*:nth-child(2){transition-delay:.15s}
.slide.is-active .s-content>*:nth-child(3){transition-delay:.3s}
.slide.is-active .s-content>*:nth-child(4){transition-delay:.45s}
.s-content h1,.s-content h2{font-size:clamp(42px,5.6vw,80px);margin-bottom:20px}
.s-content h1 em,.s-content h2 em{font-style:italic;color:var(--peach)}
.s-content p{font-size:17px;max-width:470px;margin-bottom:34px}
.s-content .ctas{display:flex;gap:14px;flex-wrap:wrap}
.slide.dark .s-content h1,.slide.dark .s-content h2{color:var(--cream)}
.slide.dark .s-content h2 em{color:#EBC3B0}
.slide.dark .s-content p{color:#E9DDD0}
.slide.dark .eyebrow{color:#E6CFA0}
.slide.dark .btn.ghost{color:var(--cream);border-color:rgba(255,250,245,.6)}
.slide.dark .btn.ghost:hover{background:var(--cream);color:var(--ink)}
.s-ui{position:absolute;left:0;right:0;bottom:34px;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.s-dots{display:flex;gap:28px}
.s-dots button{background:none;border:0;padding:6px 0;cursor:pointer;text-align:left;color:var(--ink);opacity:.55;transition:opacity .3s;min-width:110px}
.s-dots button.on,.s-dots button:hover{opacity:1}
.s-dots span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:10px}
.s-dots i{display:block;height:2px;background:rgba(84,72,60,.25);position:relative;overflow:hidden}
.s-dots i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.s-dots button.on i::after{animation:sprog var(--dur,5s) linear forwards}
.slider.paused .s-dots button.on i::after{animation-play-state:paused}
.slider.static-ui .s-dots button.on i::after{animation:none;transform:scaleX(1)}
@keyframes sprog{to{transform:scaleX(1)}}
.slider.on-dark .s-dots button{color:var(--cream)}
.slider.on-dark .s-dots i{background:rgba(255,250,245,.3)}
.s-arrows{display:flex;gap:10px}
.s-arrows button{width:54px;height:54px;border-radius:50%;border:1px solid rgba(84,72,60,.35);background:rgba(255,250,245,.75);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:all .3s}
.s-arrows button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.s-arrows svg{width:20px;height:20px}
.s-arrows.dark button{width:46px;height:46px;background:#fff}
.s-arrows button[disabled]{opacity:.35;cursor:default}

/* ---- v2: New arrivals carousel ---- */
.newarr{padding-bottom:70px}
.na-ctrl{display:flex;align-items:center;gap:28px}
.na-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,22vw,290px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 max(32px,calc((100vw - var(--wrap))/2 + 32px));scroll-padding:0 max(32px,calc((100vw - var(--wrap))/2 + 32px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.na-track::-webkit-scrollbar{display:none}
.na-track .card{scroll-snap-align:start}
.na-track .reveal{opacity:1;transform:none}
.na-bar{height:2px;background:var(--line);margin-top:34px;position:relative;overflow:hidden}
.na-bar i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--gold);transition:transform .3s,width .3s}

/* ---- v2: Marquee ---- */
.marquee-sec{padding:20px 0 100px;overflow:hidden}
.marquee{overflow:hidden;position:relative}
.marquee .m-track{display:flex;width:max-content;animation:mq 70s linear infinite}
.marquee:hover .m-track{animation-play-state:paused}
.marquee.words{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:34px}
.marquee.words .m-track{animation-duration:45s;animation-direction:reverse;align-items:center}
.marquee.words span{font-family:var(--serif);font-size:34px;font-style:italic;color:var(--ink);padding:0 28px;white-space:nowrap}
.marquee.words i{font-style:normal;color:var(--gold);font-size:16px}
.marquee.imgs .m-track{gap:18px;padding-right:18px}
.marquee.imgs figure{margin:0;height:340px;flex:none;overflow:hidden;background:var(--blush)}
.marquee.imgs figure:nth-child(odd){width:270px}
.marquee.imgs figure:nth-child(even){width:340px;margin-top:40px;height:300px}
.marquee.imgs img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.marquee.imgs figure:hover img{transform:scale(1.06)}
@keyframes mq{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .slider{height:auto;min-height:0;aspect-ratio:auto}
  .slides{position:relative;height:640px}
  .slide{align-items:flex-end}
  .slide.light::before{background:linear-gradient(180deg,transparent 15%,rgba(255,250,245,.75) 48%,rgba(255,250,245,.97) 72%)}
  .slide.dark::before{background:linear-gradient(180deg,transparent 15%,rgba(40,33,27,.6) 45%,rgba(40,33,27,.92) 75%)}
  .s-content{padding-bottom:96px}
  .s-content h1,.s-content h2{font-size:42px;margin-bottom:12px}
  .s-content p{font-size:15px;margin-bottom:22px}
  .s-content .btn{height:46px;padding:0 20px}
  .s-ui{bottom:22px}
  .s-dots{gap:8px}
  .s-dots button{min-width:0;width:44px}
  .s-dots span{display:none}
  .s-arrows button{width:42px;height:42px}
  .na-ctrl .s-arrows{display:none}
  .na-track{grid-auto-columns:68%;gap:14px;padding:0 20px;scroll-padding:0 20px}
  .marquee.words span{font-size:24px;padding:0 18px}
  .marquee.imgs figure:nth-child(odd){width:190px;height:240px}
  .marquee.imgs figure:nth-child(even){width:230px;height:210px;margin-top:30px}
  .marquee-sec{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .marquee .m-track{animation:none!important}
  .marquee{overflow-x:auto}
  .slide>img{transform:none!important}
  .s-dots button.on i::after{transform:scaleX(1)}
}

/* ---- v2: real logo, socials, loader ---- */
.logo-img{display:inline-flex;align-items:center;justify-self:center}
.logo-img img{height:62px;width:auto;display:block}
.drawer .logo-img img{height:44px}
.logo-foot img{height:170px;width:auto;display:block}
.site-footer .socials{display:flex;flex-wrap:wrap;gap:10px}
.site-footer .socials a{color:var(--gold);border-color:rgba(201,169,110,.45)}
.site-footer .socials a:hover{background:var(--gold);color:#2F2822;border-color:var(--gold)}
.tb-social{display:flex;gap:12px;align-items:center;padding-right:18px;margin-right:4px;border-right:1px solid rgba(201,169,110,.35)}
.tb-social a{color:var(--gold);display:inline-flex}
.tb-social a:hover{color:var(--cream)}
.tb-social svg{width:15px;height:15px}
.topbar .links{align-items:center}
.news-mono{height:66px;width:auto;margin:0 auto 18px;opacity:.9}
.loader{position:fixed;inset:0;z-index:999;background:var(--cream);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility 0s .7s}
.loader img{width:82px;height:auto;animation:lpulse 1.6s var(--ease) infinite alternate}
@keyframes lpulse{from{opacity:.35;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.loaded .loader,.static .loader{opacity:0;visibility:hidden}
@media (max-width:900px){
  .logo-img img{height:46px}
  .logo-foot img{height:140px}
}
@media (prefers-reduced-motion:reduce){.loader{display:none}}
.slide>img.flip{transform:scaleX(-1) scale(1.08)}
.slide.is-active>img.flip{transform:scaleX(-1) scale(1)}
@media (max-width:900px){.slide>img.flip{object-position:30% 50%!important}}
@media (prefers-reduced-motion:reduce){.slide>img.flip{transform:scaleX(-1)!important}}
.site-footer .socials{gap:7px}.site-footer .socials a{width:34px;height:34px}.site-footer .socials svg{width:15px;height:15px}

/* ---- v2: CPNP badge ---- */
.media-wrap{position:relative}
.cpnp{position:absolute;top:12px;right:12px;z-index:3;width:54px;height:54px;border-radius:50%;display:none;filter:drop-shadow(0 6px 10px rgba(0,34,107,.25));cursor:help;outline:0}
[data-cpnp="true"] .cpnp,[data-cpnp="true"]>.cpnp{display:block}
.cpnp img{width:100%;height:100%;display:block;transition:transform .5s var(--ease)}
.cpnp:hover img,.cpnp:focus img{transform:rotate(-12deg) scale(1.06)}
.cpnp::after{content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);width:210px;background:var(--ink);color:var(--cream);font-size:11.5px;line-height:1.45;padding:9px 12px;letter-spacing:.02em;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .25s;pointer-events:none;z-index:5}
.cpnp:hover::after,.cpnp:focus::after{opacity:1;visibility:visible;transform:none}
.cpnp.lg{width:96px;height:96px;top:20px;right:20px}
.card[data-cpnp="true"] .wish{top:76px}
.cpnp-legend{display:none;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin:14px 0 0}
.cpnp-legend[data-cpnp="true"]{display:flex}
.cpnp-legend img{width:26px;height:26px}
.trust-cpnp{width:38px;height:38px;flex:none}
.gallery>div{min-width:0}
@media (max-width:900px){
  .cpnp{width:42px;height:42px;top:8px;right:8px}
  .card[data-cpnp="true"] .wish{top:58px}
  .cpnp.lg{width:74px;height:74px;top:14px;right:14px}
}

/* ---- v2: customer-service chat widget ---- */
.lchat{position:fixed;right:24px;bottom:24px;z-index:120;font-family:var(--sans)}
.lchat-fab{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid rgba(201,169,110,.7);background:radial-gradient(circle at 35% 30%,#4A3F35,#2F2822 70%);box-shadow:0 18px 40px -14px rgba(47,40,34,.65),0 0 0 6px rgba(201,169,110,.12);cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease),box-shadow .35s}
.lchat-fab:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(47,40,34,.7),0 0 0 8px rgba(201,169,110,.18)}
.lchat-fab img{width:30px;height:auto;transition:opacity .25s,transform .35s}
.lchat-x{position:absolute;color:var(--gold);font-size:30px;line-height:1;opacity:0;transform:rotate(-90deg);transition:all .35s}
.lchat.open .lchat-fab img{opacity:0;transform:scale(.6)}
.lchat.open .lchat-x{opacity:1;transform:none}
.lchat-dot{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:var(--pink);border:2px solid var(--cream)}
.lchat.open .lchat-dot,.lchat.seen .lchat-dot{display:none}
.lchat-panel{position:absolute;right:0;bottom:80px;width:370px;max-height:min(580px,calc(100vh - 150px));display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(47,40,34,.55);overflow:hidden;transform-origin:bottom right;animation:lchatIn .4s var(--ease)}
.lchat-panel[hidden]{display:none}
@keyframes lchatIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.lchat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#2F2822;color:#E9DDD0;border-bottom:1px solid rgba(201,169,110,.4)}
.lchat-head>img{width:34px;height:auto}
.lchat-head b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--cream);line-height:1.1}
.lchat-head span{font-size:11px;color:#BFAF9F;display:flex;align-items:center;gap:6px}
.lchat-head span i{width:7px;height:7px;border-radius:50%;background:#8DB37A;display:inline-block}
.lchat-close{margin-left:auto;background:none;border:0;color:var(--gold);font-size:26px;cursor:pointer;line-height:1}
.lchat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.lmsg{max-width:86%;padding:11px 14px;font-size:13.5px;line-height:1.55;animation:fade .35s}
.lmsg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:2px 14px 14px 14px}
.lmsg.me{align-self:flex-end;background:var(--ink);color:var(--cream);border-radius:14px 2px 14px 14px}
.lmsg .ph{display:inline-block;margin-top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);border:1px dashed #CDB894;padding:2px 6px}
.lmsg a{color:var(--gold-d);text-decoration:underline}
.lmsg .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lmsg .acts a{text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:8px 12px;border:1px solid var(--ink);color:var(--ink)}
.lmsg .acts a:hover{background:var(--ink);color:var(--cream)}
.lmsg .acts svg{width:14px;height:14px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:2px 14px 14px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.lchat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 18px 12px}
.lchat-chips button{border:1px solid var(--gold);background:#fff;color:var(--ink);font-size:12px;padding:7px 12px;border-radius:30px;cursor:pointer;transition:all .2s}
.lchat-chips button:hover{background:var(--gold);color:#fff}
.lchat-form{display:flex;border-top:1px solid var(--line);background:#fff}
.lchat-form input{flex:1;border:0;outline:0;padding:14px 16px;font-size:13.5px;background:transparent}
.lchat-form button{width:50px;border:0;background:none;color:var(--gold-d);cursor:pointer}
.lchat-form button svg{width:18px;height:18px}
.lchat-foot{margin:0;padding:6px 12px 8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;background:#fff}
@media (max-width:900px){
  .lchat{right:14px;bottom:14px}
  .lchat-fab{width:56px;height:56px}
  .lchat.open{left:0;right:0;bottom:0;top:0}
  .lchat.open .lchat-fab{position:absolute;right:14px;bottom:14px;z-index:2}
  .lchat-panel{position:fixed;inset:0;width:auto;max-height:none;bottom:0;border:0}
  .lchat.open .lchat-fab{display:none}
}
@media (prefers-reduced-motion:reduce){.lchat-panel,.lmsg{animation:none}}
.static .lchat{display:none}

/* ===== v3: real product photos + stacked 3D logo ===== */
:root{--card-bg:#F6EEE8}
.card .media{aspect-ratio:1/1;background:var(--card-bg)}
.main-img{aspect-ratio:1/1;background:var(--card-bg)}
.thumbs button{aspect-ratio:1/1;background:var(--card-bg)}
.mini-item img{aspect-ratio:1/1;background:var(--card-bg)}
.card .meta span+span::before{content:"·";margin:0 6px;opacity:.6}
.pinfo h1 .h1-size{display:block;font-size:.5em;letter-spacing:.08em;color:var(--muted);font-family:var(--sans,inherit);margin-top:6px}
/* stacked logo in header: monogram on top, LUMA + BEAUTY HOUSE beneath */
.head-main{height:108px;transition:height .35s var(--ease)}
.logo-img img{height:90px;width:auto;transition:height .35s var(--ease)}
.site-header.scrolled .head-main{height:78px}
.site-header.scrolled .logo-img img{height:64px}
.drawer .logo-img img{height:58px}
.logo-foot{display:inline-block}
.logo-foot img{height:170px;width:auto;display:block}
.loader img{width:96px}
.news-mono{height:70px}
.lchat-fab img{width:34px}
/* About: large logo panel */
.split .imgs .logo-panel{position:absolute;right:0;bottom:0;width:52%;height:58%;background:radial-gradient(120% 90% at 50% 35%,#3A3029 0%,#231C17 70%);border:10px solid var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -40px rgba(43,36,30,.8)}
.split .imgs .logo-panel img,.split .imgs .logo-panel img:first-child,.split .imgs .logo-panel img:last-child{position:static;border:0;width:72%;height:auto;max-height:86%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
@media (max-width:900px){
  .head-main{height:84px}
  .logo-img img{height:68px}
  .site-header.scrolled .head-main{height:68px}
  .site-header.scrolled .logo-img img{height:54px}
  .logo-foot img{height:150px}
  .split .imgs .logo-panel{width:56%;height:60%}
}

/* ===================== v4: dynamic widgets ===================== */
/* 1) announcement bar */
.ann{background:linear-gradient(90deg,#3B322A,#54483C 50%,#3B322A);color:var(--cream);font-size:12px;letter-spacing:.12em;overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.ann.show{max-height:60px}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:22px;height:40px;position:relative}
.ann-txt{text-transform:uppercase}.ann-txt a{color:var(--gold);border-bottom:1px solid currentColor;margin-left:8px}
.ann-cd{display:flex;gap:8px;font-variant-numeric:tabular-nums}
.ann-cd span{border:1px solid rgba(201,169,110,.45);padding:1px 7px;border-radius:2px;color:#E9DCC6}.ann-cd b{color:var(--gold);font-weight:500;margin-right:1px}
.ann-x{position:absolute;right:16px;background:none;border:0;color:var(--cream);font-size:20px;cursor:pointer;opacity:.7}
.ann.is-demo .ann-txt::before{content:"PREVIEW";background:var(--pink);color:#fff;font-size:9px;padding:2px 6px;border-radius:2px;margin-right:10px;letter-spacing:.16em}
@media(max-width:700px){.ann .wrap{height:auto;padding:8px 40px 8px 16px;flex-direction:column;gap:4px;font-size:10.5px;text-align:center}.ann.show{max-height:90px}}
/* 2) recently purchased toast (real orders only) */
.rp-toast{position:fixed;left:20px;bottom:70px;z-index:90;display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 20px 50px -25px rgba(59,50,42,.5);padding:10px 34px 10px 10px;max-width:330px;transform:translateY(20px);opacity:0;transition:all .5s var(--ease);pointer-events:none}
.rp-toast.show{opacity:1;transform:none;pointer-events:auto}
.rp-toast img{width:56px;height:56px;object-fit:cover}.rp-toast small{display:block;color:var(--muted);font-size:11px}.rp-toast a{font-family:var(--serif);font-size:16px;color:var(--ink)}
.rp-toast em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6E8B5E}.rp-toast button{position:absolute;top:4px;right:8px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted)}
/* 3) social feed */
.social-feed{padding-top:40px}
.sf-links{display:flex;gap:10px}.sf-links svg{width:16px;height:16px}
.sf-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.sf-tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--blush);display:block}
.sf-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sf-tile:hover img{transform:scale(1.06)}
.sf-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(59,50,42,.55);color:var(--cream);opacity:0;transition:opacity .4s}
.sf-tile:hover .sf-ov,.sf-tile:focus .sf-ov{opacity:1}
.sf-ov svg,.sf-in svg{width:26px;height:26px}.sf-ov b,.sf-in b{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.03em}
.sf-tile.blank{background:linear-gradient(145deg,#FBEDE4,#F3DACC);border:1px solid rgba(201,169,110,.35)}
.sf-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--gold-d);text-align:center}
.sf-in small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sf-tile.blank::after{content:"";position:absolute;inset:10px;border:1px solid rgba(201,169,110,.35);pointer-events:none}
@media(max-width:900px){.sf-grid{grid-template-columns:repeat(7,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.sf-tile{scroll-snap-align:start}.sf-ov{opacity:1;background:linear-gradient(transparent 55%,rgba(59,50,42,.6))}.sf-ov{justify-content:flex-end;padding-bottom:12px}.sf-ov svg{width:18px;height:18px}.sf-ov b{font-size:15px}.sf-links .btn{padding:0 14px}}
/* 4) brand carousel */
.brand-marquee{display:grid;gap:14px;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bm-row{overflow:hidden}
.bm-track{display:flex;width:max-content;animation:bm 240s linear infinite}
.bm-row.rev .bm-track{animation-direction:reverse;animation-duration:270s}
.brand-marquee:hover .bm-track{animation-play-state:paused}
.bm-dup{display:flex}
.bm-item{flex:none;width:190px;height:86px;display:flex;align-items:center;justify-content:center;padding:0 26px;border-right:1px solid rgba(84,72,60,.12)}
.bm-item img{max-height:40px;max-width:130px;width:auto;opacity:.78;transition:opacity .35s,transform .35s var(--ease)}
.bm-item:hover img{opacity:1;transform:scale(1.06)}
.bm-item.txt span{font-family:var(--serif);font-size:23px;font-style:italic;color:var(--ink);letter-spacing:.03em;white-space:nowrap;opacity:.82}
@keyframes bm{to{transform:translateX(-50%)}}
.brand-marquee.static .bm-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.brand-marquee.static .bm-dup{display:none}
@media(prefers-reduced-motion:reduce){.bm-track{animation:none}}
@media(max-width:700px){.bm-item{width:140px;height:70px;padding:0 16px}.bm-item img{max-height:30px;max-width:100px}.bm-item.txt span{font-size:18px}}
/* 5) quick view */
.qv-btn{position:absolute;right:12px;top:122px;z-index:2;height:38px;width:38px;border-radius:19px;border:0;background:rgba(255,250,245,.92);color:var(--ink);display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px;cursor:pointer;overflow:hidden;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:all .35s var(--ease);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.qv-btn svg{width:18px;height:18px;flex:none}
.card:hover .qv-btn{opacity:1;transform:none}
.qv-btn:hover,.qv-btn:focus-visible{width:132px;background:var(--ink);color:var(--cream)}
.card:not([data-cpnp="true"]) .qv-btn{top:58px}
@media(hover:none){.card .qv-btn{opacity:1;transform:none;top:auto;bottom:10px;right:10px;width:36px;height:36px}.card .qv-btn span{display:none}}
.qv,.quiz{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.quiz{z-index:190}
.qv-ov{position:absolute;inset:0;background:rgba(43,36,30,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.qv.open .qv-ov,.quiz.open .qv-ov{opacity:1}
.qv-box{position:relative;width:min(920px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--cream);display:grid;grid-template-columns:1fr 1fr;box-shadow:0 40px 80px -30px rgba(43,36,30,.6);transform:translateY(24px) scale(.98);opacity:0;transition:all .45s var(--ease)}
.qv.open .qv-box,.quiz.open .quiz-box{transform:none;opacity:1}
.qv-close{position:absolute;top:10px;right:12px;z-index:3;width:40px;height:40px;border:0;background:rgba(255,250,245,.9);border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.qv-img{position:relative;background:var(--card-bg)}.qv-img>img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.qv-img .cpnp{display:block;top:16px;left:16px;right:auto;width:64px;height:64px}.qv-img .cpnp[hidden]{display:none}.qv-img .cpnp::after{left:0;right:auto}
.qv-info{padding:44px 40px 36px;display:flex;flex-direction:column}
.qv-brand{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d)}
.qv-name{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.12;margin:8px 0 8px;color:var(--ink)}
.qv-meta{font-size:13px;color:var(--muted)}
.qv-pr{display:flex;align-items:baseline;gap:12px;margin:20px 0 6px}.qv-price{font-family:var(--serif);font-size:30px;color:var(--ink)}.qv-pr small{font-size:12px;color:var(--muted)}
.qv-id{font-size:12px;color:var(--muted);margin-bottom:22px}.qv-id b{color:var(--brown);font-weight:500}
.qv-buy{display:flex;gap:10px;margin-bottom:16px}.qv-buy .btn{flex:1}.qv-add.done{background:#6E8B5E;border-color:#6E8B5E}.qv-add.done span::after{content:" ✓"}
.qv-info .link-u{align-self:flex-start}
.qv-perks{list-style:none;padding:20px 0 0;margin:auto 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:12.5px}
.qv-perks li{display:flex;gap:10px;align-items:center}.qv-perks svg{width:17px;height:17px;color:var(--gold-d)}
@media(max-width:760px){.qv{place-items:end center;padding:0}.qv-box{grid-template-columns:1fr;max-height:92vh;transform:translateY(100%)}.qv-img>img{aspect-ratio:4/3;object-fit:contain}.qv-info{padding:24px 20px 26px}.qv-name{font-size:26px}}
/* 6) skin quiz */
.quiz-teaser{background:linear-gradient(120deg,#FFFAF5 0%,#F7E0D4 100%);padding:90px 0;overflow:hidden}
.quiz-teaser .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.qt-txt h2{font-size:clamp(32px,3.4vw,48px);margin:10px 0 16px}.qt-txt p{max-width:480px;margin-bottom:28px}.qt-txt .btn svg{width:18px;height:18px}
.qt-imgs{position:relative;height:380px}
.qt-imgs img{position:absolute;width:52%;box-shadow:0 30px 60px -35px rgba(84,72,60,.55);animation:qtf 7s ease-in-out infinite alternate}
.qt-imgs img:nth-child(1){left:0;top:40px;transform:rotate(-6deg)}
.qt-imgs img:nth-child(2){left:26%;top:0;z-index:2;animation-delay:-2s}
.qt-imgs img:nth-child(3){right:0;top:70px;transform:rotate(6deg);animation-delay:-4s}
@keyframes qtf{to{translate:0 -12px}}
@media(prefers-reduced-motion:reduce){.qt-imgs img{animation:none}}
@media(max-width:900px){.quiz-teaser{padding:60px 0}.quiz-teaser .wrap{grid-template-columns:1fr;gap:30px}.qt-imgs{height:230px}}
.quiz-box{position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--cream);box-shadow:0 40px 80px -30px rgba(43,36,30,.6);transform:translateY(24px);opacity:0;transition:all .45s var(--ease)}
.quiz-head{display:flex;align-items:center;gap:12px;padding:16px 64px 16px 24px;border-bottom:1px solid var(--line)}
.quiz-head img{height:34px}.quiz-head b{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink)}.quiz-head .qv-close{top:8px}
.quiz-bar{height:3px;background:var(--line)}.quiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--peach));transition:width .5s var(--ease)}
.quiz-body{padding:34px 36px 34px}
.quiz-body.fade{animation:qfade .45s var(--ease)}@keyframes qfade{from{opacity:0;transform:translateX(14px)}}
.quiz-body h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;margin:8px 0 22px;color:var(--ink)}.quiz-body h3 em{color:var(--peach)}
.quiz-opts{display:grid;gap:10px}
.quiz-opts button{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--brown);cursor:pointer;transition:all .25s}
.quiz-opts button i{width:16px;height:16px;border-radius:50%;border:1px solid var(--gold);flex:none;transition:all .25s}
.quiz-opts button:hover{border-color:var(--gold);transform:translateX(3px)}
.quiz-opts button.on{border-color:var(--ink)}.quiz-opts button.on i{background:var(--gold);box-shadow:inset 0 0 0 3px #fff}
.quiz-back{margin-top:18px;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.quiz-res{display:grid;gap:10px}
.qr{display:grid;grid-template-columns:64px 1fr 36px;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);padding:10px 12px 10px 10px;position:relative}
.qr-step{position:absolute;top:-8px;left:84px;background:var(--cream);padding:0 6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.qr img{width:64px;height:64px;object-fit:cover}.qr small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
.qr b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.2;color:var(--ink)}.qr span{font-size:12.5px;color:var(--muted)}
.qr .qv-btn.icon-sq{position:static;opacity:1;transform:none;width:36px;height:36px;justify-content:center;padding:0;font-size:20px;border:1px solid var(--line);border-radius:50%}
.qr .qv-btn.icon-sq:hover{width:36px}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 10px;flex-wrap:wrap}.quiz-foot small{display:block;font-size:11px;color:var(--muted)}.quiz-foot b{font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:500}
.quiz-note{font-size:11.5px;color:var(--muted);margin:6px 0 10px}.quiz-restart{background:none;border:0;cursor:pointer;padding:0}
@media(max-width:760px){.quiz{place-items:end center;padding:0}.quiz-box{max-height:94vh;transform:translateY(100%)}.quiz-body{padding:24px 20px}.quiz-body h3{font-size:25px}.quiz-foot .btn{width:100%}}
.quiz-link{display:flex;align-items:center;gap:10px;margin-top:14px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--gold-d);cursor:pointer;border-bottom:1px solid transparent}.quiz-link:hover{border-bottom-color:currentColor}.quiz-link svg{width:18px;height:18px}
.chip-quiz{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;border-color:var(--gold)!important;color:var(--gold-d)!important;background:transparent}.chip-quiz svg{width:15px;height:15px}
/* 7a) back to top */
.totop{position:fixed;right:34px;bottom:104px;z-index:110;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,169,110,.7);background:rgba(255,250,245,.95);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .4s var(--ease);box-shadow:0 12px 30px -16px rgba(59,50,42,.6)}
.totop.show{opacity:1;visibility:visible;transform:none}.totop:hover{background:var(--ink);color:var(--gold)}.totop svg{width:20px;height:20px}
/* 7b) sticky add to cart (mobile PDP) */
.satc{display:none}
@media(max-width:900px){
  .satc{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:115;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,250,245,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -14px 30px -20px rgba(59,50,42,.5);transform:translateY(110%);transition:transform .45s var(--ease)}
  .satc.show{transform:none}
  .satc img{width:46px;height:46px;object-fit:cover;flex:none}
  .satc-t{flex:1;min-width:0}.satc-t small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)}.satc-t b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .satc-p{font-family:var(--serif);font-size:18px;color:var(--ink)}
  .satc-add{height:44px;padding:0 14px;letter-spacing:.12em;font-size:10.5px}.satc-add svg{width:16px;height:16px}.satc-add span{display:none}.satc-add.done{background:#6E8B5E;border-color:#6E8B5E}
  body.satc-on .lchat{bottom:84px}body.satc-on .totop{bottom:160px}
  .totop{right:22px;bottom:90px;width:40px;height:40px}
}
@media(min-width:380px) and (max-width:900px){.satc-add span{display:inline}}
/* preview: widget switch panel */
.preview-flag{pointer-events:auto!important;cursor:pointer}.preview-flag span{opacity:.6}
.wpanel{position:fixed;left:16px;bottom:56px;z-index:130;width:330px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(43,36,30,.6);font-size:12.5px;padding:0 0 12px}
.wp-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:19px;color:var(--ink)}.wp-h button{border:0;background:none;font-size:20px;cursor:pointer}
.wp-list{list-style:none;margin:0;padding:6px 16px}.wp-list li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.wp-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}.wp-dot.on{background:#6E8B5E}.wp-dot.off{background:#C9B8A6}
.wp-list b{font-weight:500;color:var(--ink)}.wp-list em{font-style:normal;font-size:10px;letter-spacing:.14em;margin-left:6px;color:var(--muted)}.wp-list small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45}.wp-list a{color:var(--gold-d);text-decoration:underline}
.wpanel p{margin:6px 16px 0;color:var(--muted);font-size:11.5px}
.static .totop,.static .wpanel{display:none}
.qv[hidden],.quiz[hidden],.wpanel[hidden],.ann[hidden]{display:none!important}
/* ---- v5: category filters, brands page ---- */
.card[hidden]{display:none!important}
.cf-label{font-style:italic;font-weight:400}
.cf-empty{padding:50px 0;text-align:center;color:var(--muted)}.cf-empty[hidden]{display:none}
.filters .check span{flex:1}
.br-sec{margin-bottom:70px}
.br-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.br-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:150px;padding:18px;background:#fff;border:1px solid var(--line);transition:border-color .3s,transform .3s,box-shadow .3s}
.br-tile:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(84,72,60,.35)}
.br-tile img{max-height:52px;max-width:80%;object-fit:contain}
.br-tile.txt span{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ink)}
.br-tile small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bz-list{columns:5 170px;column-gap:28px}
.bz{display:block;padding:5px 0;font-size:14px;color:var(--muted);break-inside:avoid}
a.bz.on{color:var(--gold-d);font-weight:500}a.bz.on:hover{text-decoration:underline}
.bz:target{color:var(--ink);background:var(--blush)}
@media (max-width:700px){.br-grid{grid-template-columns:repeat(2,1fr);gap:10px}.br-tile{height:120px}.bz-list{columns:2}}
.cf-label{display:block;font-size:.5em;margin-top:6px;color:var(--peach)}

/* ---- v1.0.7: K-beauty hero slide (real product packshots; <picture> for a mobile crop) ---- */
.slide>picture{position:absolute;inset:0;display:block}
.slide>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.slide.is-active>picture>img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.slide>picture>img{transform:none!important}}