/* =========================================================
   TNG Cosmetics — Storefront v2 · "Glow Club v3"  (Gen Z · Arabic-first · RTL)
   ========================================================= */
@font-face{font-family:"Alexandria";src:url(fonts/alexandria-arabic-wght-normal.woff2) format("woff2");font-weight:100 900;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
@font-face{font-family:"Alexandria";src:url(fonts/alexandria-latin-wght-normal.woff2) format("woff2");font-weight:100 900;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-21FF}
@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");font-weight:200 800}

:root{
  --o:#F4A04B;        /* TNG orange — brand fills */
  --o-deep:#A84F00;   /* text-safe orange (5.5:1 on white) */
  --o-mid:#EE7A12;    /* decorative only, never text */
  --o-soft:#FFE6C9;   /* tints */
  --o-wash:#FFF5EA;   /* section washes */
  --ink:#111111;      /* text + primary buttons */
  --ink-2:#4A4A4A;
  --mut:#666666;
  --line:#ECECEC;
  --bg:#FFFFFF;
  --bg-2:#F6F6F4;     /* product stage */
  --lilac:#CBB8FF;    /* Gen Z accent 1 */
  --lilac-soft:#EFE9FF;
  --lime:#DCF46A;     /* Gen Z accent 2 */
    --sale:#D12B10;
  --ok:#11703A;
  --lime-soft:#F3FAD6;
  --wa:#25D366;
  --r-sm:12px;--r:20px;--r-lg:28px;--r-xl:36px;--pill:999px;
  --sh-1:0 2px 10px rgba(17,17,17,.06);
  --sh-2:0 12px 30px rgba(17,17,17,.10);
  --sh-3:0 24px 50px -16px rgba(17,17,17,.25);
  --f:"Alexandria",system-ui,sans-serif;
  --f-en:"Bricolage","Alexandria",sans-serif;
  --f-fun:"Alexandria",sans-serif;
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--f);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.en{font-family:var(--f-en);direction:ltr;unicode-bidi:isolate}
.fun{font-family:var(--f-fun);font-weight:800}

/* type */
.d1{font-weight:800;font-size:64px;line-height:1.12;letter-spacing:-.01em}
.d2{font-weight:800;font-size:40px;line-height:1.2}
.d3{font-weight:800;font-size:26px;line-height:1.3}
.h4{font-weight:800;font-size:17px;line-height:1.4}
.lead{font-size:17px;color:var(--ink-2);line-height:1.75}
.small{font-size:13px;color:var(--mut)}
.mut{color:var(--mut)}
.hl{background:var(--o);padding:0 12px;border-radius:14px;display:inline-block;transform:rotate(-1.5deg);line-height:1.25}
.hl-l{background:var(--lime);padding:0 12px;border-radius:14px;display:inline-block;transform:rotate(1.5deg);line-height:1.25}
.hl-p{background:var(--lilac);padding:0 12px;border-radius:14px;display:inline-block;transform:rotate(-1deg);line-height:1.25}
.uline{background:linear-gradient(transparent 62%,var(--o-soft) 62%)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;background:var(--bg-2);border-radius:var(--pill);padding:6px 14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--pill);font-weight:800;font-size:15px;border:2px solid transparent;white-space:nowrap;cursor:pointer}
.btn-ink{background:var(--ink);color:#fff}
.btn-o{background:var(--o);color:var(--ink)}
.btn-w{background:#fff;color:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-sm{height:40px;padding:0 16px;font-size:13px}
.btn-lg{height:58px;font-size:16px}
.btn-wa{background:var(--wa);color:var(--ink)}
.btn .ar{font-family:var(--f-en);font-size:18px;line-height:1}
.link{font-weight:800;font-size:14px;display:inline-flex;gap:6px;align-items:center;border-bottom:2px solid var(--o);padding-bottom:1px}

/* chips & badges */
.chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:var(--pill);border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .n{font-size:12px;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:var(--pill);font-size:12px;font-weight:800;white-space:nowrap}
.t-hot{background:var(--ink);color:#fff}
.t-sale{background:var(--sale);color:#fff}
.t-new{background:var(--lime);color:var(--ink)}
.t-tt{background:var(--lilac);color:var(--ink)}
.t-out{background:#E6E6E6;color:var(--ink-2)}
.t-ok{background:#E3F6EA;color:var(--ok)}
.stars{color:#FFB000;letter-spacing:1px;font-size:13px}

/* stickers */
.stk{position:absolute;display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:14px;padding:10px 16px;border-radius:var(--pill);box-shadow:var(--sh-2);white-space:nowrap;z-index:5}
.stk.l{background:var(--lime)}.stk.p{background:var(--lilac)}.stk.w{background:#fff}.stk.k{background:var(--ink);color:#fff}
.burst{position:absolute;width:104px;height:104px;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.05;z-index:6;font-size:13px}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst span{position:relative}
.burst b{display:block;font-family:var(--f-en);font-size:30px;font-weight:800}

/* announcement + header */
.announce{background:var(--o);color:var(--ink);font-size:13px;font-weight:700;height:38px;display:flex;align-items:center;justify-content:center;gap:28px}
.announce .sep{opacity:.5}
.header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.header .wrap{display:flex;align-items:center;height:76px;gap:30px}
.logo{display:inline-flex;flex-direction:column;align-items:center;background:var(--o);color:#fff;border-radius:12px;padding:6px 12px 5px;line-height:1;direction:ltr;flex:none}
.logo b{font-family:var(--f-en);font-weight:800;font-size:26px;letter-spacing:-.02em}
.logo small{font-size:5px;letter-spacing:.14em;font-weight:700;margin-top:2px;font-family:var(--f-en)}
.nav{display:flex;gap:20px;font-weight:700;font-size:15px;white-space:nowrap}
.nav a{position:relative;padding:6px 0}
.nav a.on{color:var(--o-deep)}
.nav a.on:after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:3px;border-radius:3px;background:var(--o)}
.nav .hot{font-size:12px;background:var(--sale);color:#fff;border-radius:6px;padding:1px 5px;margin-inline-start:4px;vertical-align:3px}
.hd-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:10px;height:46px;width:250px;white-space:nowrap;overflow:hidden;padding:0 16px;border-radius:var(--pill);background:var(--bg-2);color:var(--mut);font-size:14px}
.ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);position:relative;flex:none}
.ic svg{width:21px;height:21px}
.ic .cnt{position:absolute;top:-3px;inset-inline-end:-3px;background:var(--o);color:var(--ink);font-size:12px;font-weight:900;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;border:2px solid #fff;font-family:var(--f-en)}
.lang{font-size:13px;font-weight:800;padding:0 4px;white-space:nowrap}
.burger{display:none}

/* stories */
.stories{display:flex;gap:22px;padding:18px 0 6px;overflow:hidden}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;flex:none;width:76px;text-align:center}
.story .ring{width:72px;height:72px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--o),var(--sale),var(--lilac),var(--o))}
.story .ring.seen{background:var(--line)}
.story .in{width:100%;height:100%;border-radius:50%;border:3px solid #fff;overflow:hidden;background:var(--bg-2);display:grid;place-items:center;font-size:26px}
.story .in img{width:100%;height:100%;object-fit:cover}
.story .in img.pk{object-fit:contain;mix-blend-mode:multiply;width:84%;height:84%}

/* hero */
.hero{padding:18px 0 10px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;height:500px}
.hero-copy{background:var(--o-wash);border-radius:var(--r-xl);padding:34px 44px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero-copy .d1{margin:14px 0 10px;font-size:50px;line-height:1.25}
.hero-copy .lead{max-width:470px}
.ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.proof{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13px;font-weight:700}
.avs{display:flex}
.avs i{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--o-wash);margin-inline-start:-10px;background-size:cover;background-position:center;display:block}
.avs i:first-child{margin-inline-start:0}
.hero-vis{background:var(--o);border-radius:var(--r-xl);position:relative;overflow:hidden}
.hero-vis .blob{position:absolute;width:420px;height:420px;border-radius:50%;background:#FFC37F;inset-inline-start:50%;top:56%;transform:translate(50%,-50%)}
.hero-vis img.p{position:absolute;mix-blend-mode:multiply}
.reel-mini{position:absolute;width:150px;height:210px;border-radius:22px;overflow:hidden;border:4px solid #fff;box-shadow:var(--sh-3);z-index:6;background:#000}
.reel-mini img{width:100%;height:100%;object-fit:cover}
.reel-mini .pl{position:absolute;top:10px;inset-inline-end:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.reel-mini .pl:after,.play:after{content:"";border-inline-start:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-inline-start:2px;transform:scaleX(-1)}
.reel-mini .cap{position:absolute;inset-inline:8px;bottom:8px;background:#fff;border-radius:12px;padding:6px 8px;font-size:12px;font-weight:800;line-height:1.3}
.hero-dots{display:flex;gap:6px;position:absolute;bottom:20px;inset-inline-start:50%;transform:translateX(50%)}
.hero-dots i{width:8px;height:8px;border-radius:8px;background:rgba(17,17,17,.25)}
.hero-dots i.on{width:26px;background:var(--ink)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.trust div{display:flex;align-items:center;gap:12px;background:var(--bg-2);border-radius:var(--r);padding:14px 18px;font-size:13px;font-weight:700}
.trust .e{font-size:22px}
.trust span{display:block;font-weight:500;color:var(--mut);font-size:12px}

/* sections */
.sec{padding:64px 0}
.sec-sm{padding:44px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.sh .d2 .e{font-size:34px}
.wash{background:var(--o-wash)}
.grey{background:var(--bg-2)}
.tabs{display:flex;gap:6px;background:var(--bg-2);padding:5px;border-radius:var(--pill)}
.tabs span{padding:8px 18px;border-radius:var(--pill);font-weight:800;font-size:13px;color:var(--ink-2)}
.tabs span.on{background:var(--ink);color:#fff}
.arrows{display:flex;gap:8px}
.arrows span{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--f-en);font-weight:700;background:#fff}
.arrows span.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* concern chips row */
.concern-row{display:flex;gap:10px;flex-wrap:wrap}
.concern-row .chip{height:50px;font-size:15px;padding:0 20px;background:var(--bg-2);border-color:transparent}
.concern-row .chip .e{font-size:20px}
.concern-row .chip.on{background:var(--ink);color:#fff}

/* categories */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat{position:relative;height:220px;border-radius:var(--r-lg);overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.cat b{font-size:19px;font-weight:900;line-height:1.3;position:relative;z-index:2}
.cat .n{font-size:12px;font-weight:700;position:relative;z-index:2}
.cat img{position:absolute;mix-blend-mode:multiply;width:74%;inset-inline-end:-8%;bottom:-10%}
.cat .go{position:absolute;top:16px;inset-inline-end:16px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:800;z-index:3}

/* product card */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.card{position:relative;display:flex;flex-direction:column;gap:12px}
.card .media{position:relative;background:var(--bg-2);border-radius:var(--r-lg);aspect-ratio:1/1.06;display:grid;place-items:center;overflow:hidden}
.card .media img{width:86%;mix-blend-mode:multiply}
.card .tags{position:absolute;top:12px;inset-inline-start:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2}
.card .tags .tag:nth-child(1){transform:rotate(-3deg)}
.card .wish{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:2}
.card .wish svg{width:18px;height:18px}
.card .quick{position:absolute;inset-inline:12px;bottom:12px;height:46px;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;z-index:2}
.card .meta{display:flex;flex-direction:column;gap:3px;padding:0 4px}
.card .brand{font-size:12px;font-weight:800;color:var(--o-deep);letter-spacing:.06em;font-family:var(--f-en)}
.card .name{font-weight:800;font-size:15px;line-height:1.45}
.card .rate{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mut);font-weight:600}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.price{font-weight:800;font-size:18px;white-space:nowrap}
.price .c{font-size:12px;font-weight:700}
.price s{font-weight:500;font-size:13px;color:var(--mut);margin-inline-start:6px}
.card .add{height:40px;padding:0 14px;border-radius:var(--pill);background:var(--o);display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px}
.card.hover .media{box-shadow:inset 0 0 0 2px var(--ink)}
.card .sold{font-size:12px;font-weight:700;color:var(--sale)}

/* promo banner (compact) */
.promo{position:relative;height:300px;border-radius:var(--r-xl);overflow:hidden;background:var(--o);display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.promo .copy{padding:0 48px;position:relative;z-index:3}
.promo .d2{font-size:44px}
.timer{display:flex;gap:8px;margin:16px 0 20px;direction:ltr;justify-content:flex-end}
.timer div{background:#fff;border-radius:14px;width:62px;padding:8px 0;text-align:center}
.timer b{display:block;font-family:var(--f-en);font-size:24px;line-height:1;font-weight:800}
.timer span{font-size:12px;font-weight:700;color:var(--mut)}
.promo .vis{position:relative;height:100%}
.promo .vis img{position:absolute;mix-blend-mode:multiply}
.promo .circle{position:absolute;width:300px;height:300px;border-radius:50%;background:#FFC37F;inset-inline-start:50%;top:50%;transform:translate(50%,-50%)}

/* reels (UGC) */
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.reel{position:relative;aspect-ratio:9/14;border-radius:var(--r-lg);overflow:hidden;background:#000}
.reel>img{width:100%;height:100%;object-fit:cover}
.reel .top{position:absolute;top:12px;inset-inline:12px;display:flex;justify-content:space-between;align-items:center}
.reel .who{display:flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.reel .who i{width:26px;height:26px;border-radius:50%;border:2px solid #fff;background-size:cover;display:block}
.play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.reel .views{position:absolute;bottom:84px;inset-inline-start:12px;color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.6);direction:ltr}
.reel .shop{position:absolute;inset-inline:10px;bottom:10px;background:#fff;border-radius:16px;padding:8px;display:flex;align-items:center;gap:8px}
.reel .shop .th{width:46px;height:46px;border-radius:10px;background:var(--bg-2);flex:none;overflow:hidden}
.reel .shop .th img{mix-blend-mode:multiply}
.reel .shop b{font-size:12px;display:block;line-height:1.35}
.reel .shop .pl{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;background:var(--o);display:grid;place-items:center;font-weight:900;flex:none}

/* quiz banner */
.quiz{position:relative;height:260px;border-radius:var(--r-xl);background:var(--lilac);overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:0 48px}
.quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:2}
.quiz .opts span{background:#fff;border-radius:16px;padding:14px 16px;font-weight:800;font-size:14px;display:flex;gap:8px;align-items:center}
.quiz .opts span.on{background:var(--ink);color:#fff}

/* reviews */
.revgrid{display:grid;grid-template-columns:300px 1fr;gap:20px}
.rsum{background:var(--o);border-radius:var(--r-xl);padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.rsum .big{font-family:var(--f-en);font-size:76px;font-weight:800;line-height:1}
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rc{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px}
.rc .ph{height:150px;border-radius:16px;overflow:hidden;background:var(--bg-2);display:grid;place-items:center}
.rc .ph img{width:100%;height:100%;object-fit:cover}
.rc .ph img.pk{object-fit:contain;mix-blend-mode:multiply;width:70%}
.rc p{font-size:14px;font-weight:600;line-height:1.6}
.rc .who{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.ver{color:var(--ok);font-weight:800;font-size:12px}

/* blog cards */
.post{display:flex;flex-direction:column;gap:12px}
.post .pi{height:200px;border-radius:var(--r-lg);position:relative;overflow:hidden;display:grid;place-items:center}
.post .pi img{height:180px;width:auto;mix-blend-mode:multiply}
.post .pi .tag{position:absolute;top:12px;inset-inline-start:12px}
.post h4{font-weight:800;font-size:17px;line-height:1.5}
.post .dt{font-size:12px;color:var(--mut);font-weight:600}

/* footer (simple) */
.footer{border-top:1px solid var(--line);padding:44px 0 22px;margin-top:20px}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.4fr;gap:30px}
.f-top h6{font-size:14px;font-weight:900;margin-bottom:12px}
.f-top ul{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.soc{display:flex;gap:8px;margin-top:14px}
.soc span{width:38px;height:38px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-size:12px;font-weight:900;font-family:var(--f-en)}
.mini-news{display:flex;background:var(--bg-2);border-radius:var(--pill);padding:5px;margin-top:6px}
.mini-news input{flex:1;border:0;background:none;padding:0 14px;font:inherit;font-size:13px;outline:0;min-width:0}
.f-bot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:12px;color:var(--mut);gap:20px;flex-wrap:wrap}
.pay{display:flex;gap:6px;direction:ltr}
.pay span{border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-weight:800;font-size:12px;color:var(--ink);font-family:var(--f-en)}

/* floating whatsapp */
.fab{position:fixed;bottom:22px;inset-inline-end:22px;width:58px;height:58px;border-radius:50%;background:var(--wa);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-2);z-index:50}
.fab svg{width:28px;height:28px}

/* ---------- category ---------- */
.cbanner{position:relative;height:280px;border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;margin-top:18px}
.cbanner .copy{padding:0 44px;position:relative;z-index:3}
.cbanner .d1{font-size:52px;margin:8px 0 8px}
.crumbs{font-size:13px;font-weight:700;color:var(--ink);display:flex;gap:6px}
.cbanner .vis{position:relative;height:100%}
.cbanner .vis img{position:absolute;mix-blend-mode:multiply}
.cbanner .circle{position:absolute;width:290px;height:290px;border-radius:50%;inset-inline-start:50%;top:56%;transform:translate(50%,-50%);background:rgba(255,255,255,.45)}
.subnav{display:flex;gap:8px;margin:18px 0 0;overflow:hidden}
.filterbar{position:sticky;top:0;z-index:5;background:#fff;display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.filterbar .chip{height:40px;font-size:13px}
.filterbar .sel{margin-inline-start:auto}
.dd:after{content:"▾";font-size:12px;margin-inline-start:2px}
.inline-promo{grid-column:span 2;border-radius:var(--r-lg);background:var(--lime);padding:28px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:100%}
.inline-promo img{position:absolute;mix-blend-mode:multiply;width:46%;max-width:230px;inset-inline-start:-2%;bottom:-6%}
.loadmore{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:34px}
.progress{width:220px;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;width:40%;background:var(--o);margin-inline-start:auto}
.pager{display:flex;justify-content:center;gap:6px;margin-top:34px}
.pager span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--bg-2);font-family:var(--f-en)}
.pager span.on{background:var(--ink);color:#fff}
.strip{border-radius:var(--r-xl);padding:28px 34px;display:flex;align-items:center;gap:24px}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;padding:20px 0 50px}
.gal{display:grid;grid-template-columns:1fr 84px;gap:12px;align-self:start}
.gal .main{position:relative;border-radius:var(--r-xl);background:var(--bg-2);aspect-ratio:1/1.02;display:grid;place-items:center;overflow:hidden}
.gal .main img{width:78%;mix-blend-mode:multiply}
.gal .main .tags{position:absolute;top:18px;inset-inline-start:18px;display:flex;gap:6px}
.gal .thumbs{display:flex;flex-direction:column;gap:10px;order:-1}
.gal .thumbs div{width:84px;height:92px;border-radius:16px;background:var(--bg-2);border:2px solid transparent;overflow:hidden;display:grid;place-items:center}
.gal .thumbs div.on{border-color:var(--ink)}
.gal .thumbs img{width:84%;mix-blend-mode:multiply}
.gal .thumbs img.full{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.buy h1{font-weight:900;font-size:36px;line-height:1.3;margin:10px 0 8px}
.buy .pr{display:flex;align-items:center;gap:12px;margin:18px 0 4px}
.buy .pr b{font-size:32px;font-weight:900}
.buy .pr s{color:var(--mut);font-size:17px}
.ol{font-size:14px;font-weight:900;margin:20px 0 10px;display:flex;justify-content:space-between}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes span{height:46px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:14px}
.sizes span.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sizes span.off{color:var(--mut);background:var(--bg-2);text-decoration:line-through}
.buyrow{display:flex;gap:10px;margin-top:20px}
.qty{display:flex;align-items:center;gap:16px;height:56px;border-radius:var(--pill);background:var(--bg-2);padding:0 20px;font-weight:900;font-family:var(--f-en)}
.buyrow .btn{flex:1;height:56px}
.ship{background:var(--o-wash);border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13px;font-weight:700}
.bar{height:8px;border-radius:8px;background:#fff;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--o);border-radius:8px;margin-inline-start:0}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.perks div{background:var(--bg-2);border-radius:14px;padding:12px;font-size:12px;font-weight:700;display:flex;gap:8px;align-items:center}
.perks .e{font-size:18px}
.acc{border-top:1px solid var(--line);margin-top:20px}
.qa{border-bottom:1px solid var(--line);padding:16px 0}
.qa .q{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;gap:14px}
.qa .tg{width:30px;height:30px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;flex:none;font-family:var(--f-en);font-weight:800}
.qa.open .tg{background:var(--o)}
.qa p{margin-top:10px;color:var(--ink-2);font-size:14px}
.ugcstrip{display:flex;gap:10px;margin-top:16px;align-items:center}
.ugcstrip .r{width:64px;height:84px;border-radius:14px;overflow:hidden;position:relative;flex:none}
.ugcstrip .r img{width:100%;height:100%;object-fit:cover}
.fbt{background:var(--o-wash);border-radius:var(--r-xl);padding:30px;display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:center}
.fbt .items{display:flex;align-items:center;gap:12px}
.fbt .it{background:#fff;border-radius:var(--r);padding:12px;flex:1;text-align:center}
.fbt .it .im{height:130px;display:grid;place-items:center;background:var(--bg-2);border-radius:14px;margin-bottom:8px}
.fbt .it img{height:88%;mix-blend-mode:multiply}
.fbt .pl{font-family:var(--f-en);font-size:30px;font-weight:800}
.sticky-buy{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.06);z-index:10}

/* ---------- cart / checkout ---------- */
.cart{display:grid;grid-template-columns:1fr 400px;gap:34px;padding:10px 0 50px;align-items:start}
.line{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.line .im{width:110px;height:116px;border-radius:18px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.line .im img{width:86%;mix-blend-mode:multiply}
.line .qty{height:40px;gap:12px;padding:0 14px}
.summary{background:var(--bg-2);border-radius:var(--r-xl);padding:26px;position:sticky;top:20px}
.sr{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.sr.tot{border-top:1px solid #E2E2E2;margin-top:8px;padding-top:14px;font-weight:900;font-size:20px}
.code{display:flex;gap:8px;margin:14px 0}
.code div{flex:1;height:46px;border-radius:14px;border:1.5px dashed #CFCFCF;display:flex;align-items:center;padding:0 14px;color:var(--mut);font-size:13px;background:#fff}
.steps{display:flex;align-items:center;gap:10px;margin:6px 0 26px}
.steps .s{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.steps .s i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--bg-2);font-family:var(--f-en)}
.steps .s.done i{background:var(--ok);color:#fff}
.steps .s.on i{background:var(--ink);color:#fff}
.steps .ln{flex:0 0 40px;height:2px;background:var(--line)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:span 2}
.inp{display:flex;flex-direction:column;gap:6px}
.inp label{font-size:12px;font-weight:800}
.inp>div{height:52px;border-radius:14px;background:var(--bg-2);border:1.5px solid transparent;display:flex;align-items:center;padding:0 16px;font-size:14px;gap:8px}
.inp>div.ph{color:var(--mut)}
.inp>div.focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px var(--o-soft)}
.opts{display:grid;gap:10px}
.opts>div{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;font-weight:800;font-size:14px}
.opts>div.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--o-wash)}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid #CFCFCF;flex:none}
.on .radio{border:6px solid var(--ink)}
.opts .r{margin-inline-start:auto;font-size:12px;color:var(--mut);font-weight:600}
.mline{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.mline .im{width:60px;height:60px;border-radius:12px;background:#fff;position:relative;display:grid;place-items:center}
.mline .im img{width:84%;mix-blend-mode:multiply}
.mline .im b{position:absolute;top:-6px;inset-inline-end:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;display:grid;place-items:center;font-family:var(--f-en)}

/* ---------- generic ---------- */
.pbanner{border-radius:var(--r-xl);padding:44px;position:relative;overflow:hidden;margin-top:18px;min-height:240px;display:flex;flex-direction:column;justify-content:center}
.pbanner .d1{font-size:52px;margin:8px 0}
.stat{border-radius:var(--r-lg);padding:22px;background:var(--bg-2)}
.stat b{font-family:var(--f-en);font-size:44px;font-weight:800;line-height:1;display:block}
.fc{border-radius:var(--r-lg);padding:24px;background:var(--bg-2);display:flex;flex-direction:column;gap:10px}
.fc .e{width:52px;height:52px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:26px}
.num{width:44px;height:44px;border-radius:50%;background:var(--o);display:grid;place-items:center;font-family:var(--f-en);font-weight:800;font-size:18px}
.tier{border-radius:var(--r-lg);padding:26px;border:1.5px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tier.hot{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier .pct{font-family:var(--f-en);font-size:60px;font-weight:800;line-height:1}
.tier.hot .pct{color:var(--o)}
.tier ul{list-style:none;display:grid;gap:8px;font-size:14px}
.tier li:before{content:"✓";color:var(--o-deep);font-weight:900;margin-inline-end:8px}
.toc{position:sticky;top:20px;display:grid;gap:4px;font-size:13px;align-self:start}
.toc a{padding:9px 14px;border-inline-start:3px solid var(--line);font-weight:700;color:var(--ink-2)}
.toc a.on{border-color:var(--o);color:var(--ink);background:var(--o-wash)}
.prose p{font-size:17px;line-height:1.95;margin-bottom:18px;color:#2a2a2a}
.prose h2{font-weight:900;font-size:26px;margin:32px 0 12px}
.callout{background:var(--lime);border-radius:var(--r-lg);padding:22px;margin:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:6px 0 24px;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th{background:var(--o);text-align:start;padding:12px 16px;font-size:13px}
.tbl td{padding:12px 16px;border-top:1px solid var(--line)}
.map{height:130px;border-radius:16px;background:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/26px 26px,var(--o-wash);position:relative;overflow:hidden}
.map:before{content:"";position:absolute;left:-10%;right:-10%;top:55%;height:16px;background:#fff;transform:rotate(-8deg)}
.pin{position:absolute;left:46%;top:26%;width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--o);z-index:2}
.pin:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}

/* overlays */
.overlay{position:absolute;inset:0;background:rgba(17,17,17,.45);z-index:30}
.mega{position:absolute;inset-inline:0;top:114px;z-index:40;background:#fff;border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:var(--sh-3)}
.mega .wrap{display:grid;grid-template-columns:repeat(5,1fr) 1.2fr;gap:24px;padding-top:30px;padding-bottom:32px}
.mega h6{font-size:14px;font-weight:900;margin-bottom:10px;display:flex;gap:6px;align-items:center}
.mega ul{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink-2);font-weight:600}
.drawer{position:absolute;inset-inline-end:0;top:0;bottom:0;width:440px;background:#fff;z-index:40;box-shadow:var(--sh-3);padding:24px;display:flex;flex-direction:column;border-radius:0 var(--r-xl) var(--r-xl) 0}

/* ---------- mobile ---------- */
@media (max-width:760px){
  body{overflow-x:hidden}
  .wrap{padding:0 16px}
  .announce{font-size:12px;height:32px;gap:10px}.announce .x{display:none}
  .header .wrap{height:62px;gap:8px}
  .nav,.search,.lang,.hd-hide{display:none}
  .burger{display:grid}
  .ic{width:40px;height:40px}
  .logo b{font-size:20px}
  .stories{gap:12px;padding-top:12px}.story{width:64px;font-size:12px}.story .ring{width:62px;height:62px}
  .d1{font-size:36px}.d2{font-size:27px}.d3{font-size:21px}
  .hero-grid{grid-template-columns:1fr;height:auto;gap:10px}
  .hero-copy{padding:24px 20px}
  .hero-copy .lead{font-size:15px}
  .ctas .btn{flex:1}
  .hero-vis{height:260px}
  .hero-vis .blob{width:260px;height:260px}
  .reel-mini{width:96px;height:136px}.reel-mini .cap{display:none}
  .trust{grid-template-columns:1fr 1fr}
  .sec{padding:40px 0}.sec-sm{padding:28px 0}
  .sh{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}
  .concern-row{flex-wrap:nowrap;overflow:hidden}
  .cats{grid-template-columns:repeat(2,1fr);gap:10px}.cat{height:160px;padding:14px}.cat b{font-size:15px}
  .cats .cat:last-child{grid-column:span 2}
  .grid4,.grid3{grid-template-columns:1fr 1fr;gap:12px}
  .grid5,.reels{grid-template-columns:repeat(2,1fr)}
  .reels .reel:nth-child(n+3){display:none}
  .card .name{font-size:13px}.price{font-size:15px}.card .add{height:34px;padding:0 10px;font-size:12px}
  .card .add .tx{display:none}
  .promo{grid-template-columns:1fr;height:auto}.promo .copy{padding:26px 22px 0}.promo .d2{font-size:30px}.promo .vis{height:180px}.promo .circle{width:180px;height:180px}
  .timer{justify-content:flex-start}
  .quiz{grid-template-columns:1fr;height:auto;padding:26px 22px;gap:18px}
  .revgrid{grid-template-columns:1fr}.rcards{grid-template-columns:1fr}.rcards .rc:nth-child(n+2){display:none}
  .f-top{grid-template-columns:1fr 1fr;gap:22px}.f-top>div:first-child,.f-top>div:last-child{grid-column:span 2}
  .f-bot{flex-direction:column;align-items:flex-start}
  .cbanner{grid-template-columns:1fr;height:auto}.cbanner .copy{padding:22px 20px 0}.cbanner .d1{font-size:32px}.cbanner .vis{height:170px}.cbanner .circle{width:170px;height:170px}
  .filterbar{overflow:hidden;flex-wrap:nowrap}
  .inline-promo{grid-column:span 2}
  .pdp{grid-template-columns:1fr;gap:18px;padding-top:8px}
  .gal{grid-template-columns:1fr}.gal .thumbs{flex-direction:row;order:2}.gal .thumbs div{width:64px;height:70px}
  .buy h1{font-size:26px}
  .perks{grid-template-columns:1fr}
  .cart{grid-template-columns:1fr}
  .line{grid-template-columns:84px 1fr}.line .im{width:84px;height:90px}
  .fab{width:52px;height:52px;bottom:16px}

  html{overflow-x:hidden}
  .trust,.grid4,.grid3,.cats,.reels,.grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust>div{padding:12px;font-size:12px}
  .strip{flex-wrap:wrap;padding:22px}
  .strip .btn{flex:1}
  .builder{grid-template-columns:1fr!important;padding:22px!important}
  .builder .btn{white-space:normal;height:auto;padding:10px 14px}
  .fbt{grid-template-columns:1fr;padding:20px}
  .fbt .items{gap:6px}.fbt .pl{font-size:20px}.fbt .it .im{height:90px}
  .buy .pr{flex-wrap:wrap}
  .rsum .big{font-size:56px}

  .hero-copy .d1{font-size:38px}
  .trust span{display:none}.trust>div{gap:8px}
  .cat .go{display:none}.cat b{font-size:14px}.cat img{width:66%}
  .card .tags .tag{font-size:12px;height:22px;padding:0 7px}
  .card .quick{display:none}.card.hover .media{box-shadow:none}
  .card .wish{width:32px;height:32px}
  .buyrow{flex-wrap:wrap}.buyrow .qty{flex:0 0 auto}.buyrow .ic{display:none}.buyrow .btn{flex:1 1 200px}
  .hero-vis .stk.w{display:none}
}
/* ===== v3 additions ===== */
.shoptiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px}
.g3s{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.featpost{display:grid;grid-template-columns:1.3fr 1fr;border-radius:var(--r-xl);overflow:hidden;background:var(--o);height:320px}
.ingr-old{position:absolute;bottom:12px;inset-inline-start:12px;background:#fff;border-radius:var(--pill);padding:4px 10px;font-size:12px;font-weight:800;z-index:2}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 28px;margin-top:18px}
.brandrow .lbl{font-size:13px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.brandrow img{height:44px;width:auto}
.brandrow .wm{font-family:var(--f-en);font-weight:800;font-size:22px}
.logo-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:var(--pill);padding:6px 14px 6px 10px;font-size:12px;font-weight:800}
.logo-chip img{height:22px;width:auto}
.pdp-logo{height:40px;width:auto}
/* auth */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 0 50px;align-items:stretch}
.auth .panel{border-radius:var(--r-xl);padding:40px;background:var(--bg-2)}
.auth .vis{border-radius:var(--r-xl);background:var(--o);position:relative;overflow:hidden;min-height:560px}
.seg{display:flex;background:#fff;border-radius:var(--pill);padding:5px;gap:4px;margin:18px 0}
.seg span{flex:1;text-align:center;padding:10px;border-radius:var(--pill);font-weight:800;font-size:14px}
.seg span.on{background:var(--ink);color:#fff}
.otp{display:flex;gap:10px;direction:ltr;justify-content:flex-end}
.otp span{width:56px;height:62px;border-radius:14px;background:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:800;font-size:24px;border:1.5px solid var(--line)}
.otp span.on{border-color:var(--ink);box-shadow:0 0 0 4px var(--o-soft)}
.or{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:13px;font-weight:700;margin:16px 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:#DDD}
/* account */
.acct{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:24px 0 50px}
.side{background:var(--bg-2);border-radius:var(--r-xl);padding:22px;align-self:start}
.side a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-weight:700;font-size:14px}
.side a.on{background:#fff;box-shadow:var(--sh-1)}
.order{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.order .ims{display:flex;gap:8px}
.order .ims div{width:56px;height:56px;border-radius:12px;background:var(--bg-2);overflow:hidden}
.order .ims img{mix-blend-mode:multiply}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;border-radius:var(--pill);padding:4px 10px}
.st.ship{background:var(--lilac-soft)}.st.done{background:#E3F6EA;color:var(--ok)}.st.prep{background:var(--o-soft)}
.points{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:24px;display:flex;justify-content:space-between;align-items:center}
.points b{font-family:var(--f-en);font-size:44px;color:var(--o)}
/* tracking timeline */
.tl{display:grid;gap:0;margin-top:10px}
.tl>div{display:grid;grid-template-columns:36px 1fr auto;gap:14px;position:relative;padding-bottom:22px}
.tl>div:before{content:"";position:absolute;inset-inline-start:17px;top:34px;bottom:0;width:2px;background:var(--line)}
.tl>div:last-child:before{display:none}
.tl i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--bg-2);font-weight:800;font-family:var(--f-en);position:relative;z-index:1}
.tl .done i{background:var(--ok);color:#fff}.tl .now i{background:var(--o);box-shadow:0 0 0 6px var(--o-soft)}
.tl .done:before{background:var(--ok)}
/* quiz */
.qwrap{max-width:860px;margin:0 auto;padding:30px 0 50px}
.qbar{height:8px;border-radius:8px;background:var(--bg-2);overflow:hidden;margin:14px 0 26px}
.qbar i{display:block;height:100%;width:50%;background:var(--o)}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qopts>div{border:2px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;gap:14px;align-items:center;font-weight:800;font-size:16px}
.qopts>div .e{font-size:32px}
.qopts>div.on{border-color:var(--ink);background:var(--o-wash)}
.qopts small{display:block;font-weight:500;color:var(--mut);font-size:13px}
/* viewer */
.viewer{background:#161616;border-radius:var(--r-xl);padding:30px;display:flex;justify-content:center;align-items:center;gap:30px;position:relative}
.phone-v{width:360px;height:640px;border-radius:28px;overflow:hidden;position:relative;background:#000}
.phone-v>img{width:100%;height:100%;object-fit:cover}
.prog{position:absolute;top:12px;inset-inline:12px;display:flex;gap:4px}
.prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
.prog i.on{background:#fff}
.vtop{position:absolute;top:24px;inset-inline:14px;display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vtop i{width:32px;height:32px;border-radius:50%;border:2px solid var(--o);background-size:cover;display:block}
.vtop .x{margin-inline-start:auto;font-size:20px}
.vprod{position:absolute;inset-inline:12px;bottom:12px;background:#fff;border-radius:18px;padding:10px;display:flex;align-items:center;gap:10px}
.vprod .th{width:56px;height:56px;border-radius:12px;background:var(--bg-2);overflow:hidden;flex:none}
.vprod .th img{mix-blend-mode:multiply}
.vside{position:absolute;inset-inline-end:12px;bottom:100px;display:grid;gap:14px;color:#fff;text-align:center;font-size:12px;font-weight:800;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.vside span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.35);font-size:18px;margin:0 auto 2px}
.navbtn{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:800;font-size:20px}
/* states */
.state{border:1.5px solid var(--line);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.state .big{font-size:56px;line-height:1}
.skel{background:linear-gradient(90deg,#EFEFED 0,#F7F7F5 50%,#EFEFED 100%);border-radius:14px}
.err>div{border-color:var(--sale)!important;background:#FFF4F2!important}
.errtx{color:var(--sale);font-size:12px;font-weight:700}
.banner-err{background:#FFF4F2;border:1.5px solid var(--sale);border-radius:16px;padding:14px 16px;font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center}
.e404{font-family:var(--f-en);font-size:160px;font-weight:800;line-height:1;letter-spacing:-.04em}
.co-grid{display:grid;grid-template-columns:1fr 400px;gap:40px}
.vsplit{grid-template-columns:1fr 1fr}
.split{display:grid;grid-template-columns:1fr 1.3fr;gap:30px}
.split2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.split3{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.art{display:grid;grid-template-columns:220px 1fr 280px;gap:40px;padding:36px 0 30px}
@media (max-width:760px){
  .brandrow{flex-wrap:wrap;justify-content:center;padding:14px;gap:14px 22px}.brandrow .lbl{width:100%;text-align:center}.brandrow img{height:32px}
  .auth,.acct,.co-grid,.split,.split2,.split3,.g3s{grid-template-columns:1fr}
  .shoptiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featpost{grid-template-columns:1fr;height:auto}.featpost>div:last-child{height:200px}
  .art{grid-template-columns:1fr;gap:20px;padding-top:20px}.art .toc{display:none}
  .auth .vis{min-height:200px;order:-1}.auth .panel{padding:22px}
  .otp span{width:46px;height:54px}
  .side{display:flex;overflow:hidden;padding:8px;gap:4px}.side a{white-space:nowrap;padding:10px}
  .qopts{grid-template-columns:1fr}
  .viewer{padding:0;background:none}.viewer .navbtn{display:none}.phone-v{width:100%;height:640px}
  .e404{font-size:110px}
  .order{grid-template-columns:1fr}
  .pbanner{padding:24px 20px}.pbanner .d1{font-size:32px}
  .cbanner .copy .timer{justify-content:flex-start}
  .summary{position:static}
  .tbl{font-size:12px}
  .steps{gap:6px}.steps .s{font-size:12px;gap:5px}.steps .s i{width:26px;height:26px}.steps .ln{flex:0 0 12px}
  .auth .vis{display:none}
  .grid4,.grid3{grid-auto-flow:dense}
  .inline-promo{grid-column:span 2!important}
  .shophead{flex-direction:column;align-items:flex-start!important}
  .shophead .d1{font-size:32px!important}
  .pbanner .d1,.cbanner .d1{font-size:32px!important}
  .tag .dsk{display:none}
  .card .tags{max-width:calc(100% - 52px)}
  .co-grid>div>div[style*="justify-content:space-between"]{flex-wrap:wrap;gap:10px}
}

/* ===== v3.2 polish ===== */
.price .off{font-size:12px;font-weight:800;color:var(--sale);margin-inline-start:6px;direction:ltr;unicode-bidi:isolate}
.card .rate{flex-wrap:wrap;row-gap:0}
.cat{padding-inline-end:20px}
.cat b{font-size:17px;line-height:1.35;display:block;padding-inline-end:44px}
.soc span svg{width:18px;height:18px}
.stk{border:1.5px solid rgba(17,17,17,.10)}
@media print{
  *{box-shadow:none!important;text-shadow:none!important}
  .stk{border:1.5px solid rgba(17,17,17,.14)}
  .reel-mini{border-color:#fff}
  .fab{display:none}
}
@media (max-width:760px){ .cat b{font-size:14px;padding-inline-end:0} }

/* ===== v3.4 Stage — packshots on a white podium disc (native render shadows) ===== */
.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:1;height:84%;max-width:94%;z-index:2}
.stage.big{height:80%}
.stage.login{height:50%;top:70%}
.stage.cover{height:68%;top:57%}
.stage .disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 46%,#fff 0 55%,var(--tint) 100%);box-shadow:0 0 0 10px var(--ring)}
.stage .disc:after{content:"";position:absolute;inset:-24px;border-radius:50%;border:1.5px solid var(--ring)}
.stage .grp{position:absolute;inset:0 9%;display:flex;align-items:flex-end;justify-content:center;gap:1%;padding-bottom:19%;direction:ltr}
.stage .grp img{position:relative;width:auto;max-width:44%;flex:none;mix-blend-mode:multiply}
.stage .grp.n2 img{max-width:58%}
.stage .grp.n1 img{max-width:66%}
.cbanner .vis,.promo .vis{overflow:visible}
.cbanner{overflow:hidden}
.card .media .bgrp{position:absolute;inset:0 8%;display:flex;align-items:flex-end;justify-content:center;gap:1%;padding-bottom:15%;direction:ltr}
.card .media .bgrp img{width:auto;max-width:36%;flex:none;mix-blend-mode:multiply}
.cat img.tp,.cats .cat img.tp{position:absolute;width:auto;height:56%;max-width:62%;left:50%;transform:translateX(-50%);bottom:8%;inset-inline-start:auto;right:auto;mix-blend-mode:multiply}
@media (max-width:760px){
  .stage{height:90%}
  .cbanner .vis,.promo .vis{height:250px}
  .hero-vis .reel-mini{width:84px!important;height:118px!important;inset-inline-start:10px!important;bottom:10px!important}
  .cbanner .vis .stk{display:none}
  .cat img.tp{height:50%}
}
.stage.cs{height:76%}
.cbanner .vis .stage.mid{height:76%}
@media (max-width:760px){.stage.cs,.cbanner .vis .stage.mid{height:88%}}
@media (max-width:760px){.stage.cs,.cbanner .vis .stage.mid{height:78%}}

/* ===== v3.5 Podium stage: white sun-disc, cylinder podium, natural leaf light ===== */
.stage .disc{background:radial-gradient(circle at 50% 42%,#fff 0 58%,#FFF6EC 74%,var(--tint) 100%)}
.stage .podium{position:absolute;left:17%;right:17%;bottom:13%;height:15%;z-index:1}
.stage .podium:before{content:"";position:absolute;inset:22% 0 0 0;border-radius:0 0 50% 50%/0 0 42% 42%;background:linear-gradient(90deg,#EFE3D3 0%,#FBF4EA 38%,#FFFDF9 52%,#F1E5D6 100%);box-shadow:0 18px 28px -14px rgba(90,55,20,.35)}
.stage .podium i{position:absolute;left:0;right:0;top:0;height:44%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#FFFFFF 0,#FFFBF5 60%,#F4EADC 100%);box-shadow:inset 0 -2px 0 rgba(150,110,60,.12)}
.stage .grp{inset:0 14%;padding-bottom:calc(13% + 15%*0.78);gap:.5%;z-index:2}
.stage .grp img{max-width:42%}
.stage .grp.n2 img{max-width:50%}
.stage .leaves{position:absolute;inset:-6%;width:112%;height:112%;opacity:.10;mix-blend-mode:multiply;pointer-events:none;z-index:4;border-radius:50%}
.card .media .bgrp img{max-width:34%}
@media print{.stage .leaves{opacity:.08}}
.stage.cs{height:84%}.cbanner .vis .stage.mid{height:84%}

/* v4 unified packshots */
.card .media img.u{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .media img.u,.card.hover .media img.u{transform:scale(1.04)}

/* ================= v4: illustration system + real-content components ================= */
.ill{display:block;flex:none;overflow:visible}
.card .meta .rate{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.card .meta .rate .ing{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-2);margin-inline-end:2px}
.card .meta .rate .ing .ill{width:17px;height:17px}
.rc-n{color:var(--ink-2);font-weight:700}
.card .media .bplus{position:absolute;bottom:12px;inset-inline-start:12px;z-index:3;background:#fff;border-radius:var(--pill);padding:4px 10px;font-size:12px;font-weight:800;box-shadow:0 0 0 1.5px var(--ink)}
.card .media .bill{display:flex;gap:6px;align-items:flex-end;justify-content:center;padding-bottom:6%}
.card.is-out .media>*:not(.tags):not(.bplus){opacity:.55;filter:grayscale(.6)}
/* shop by ingredient */
.ingx{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ingt{background:var(--bg-2);border-radius:var(--r-lg);padding:18px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .25s,background .25s;cursor:pointer}
.ingt b{font-size:15px}.ingt .small{color:var(--ink-2)}
.ingt:nth-child(4n+1){background:var(--o-wash)}.ingt:nth-child(4n+2){background:var(--lime-soft)}.ingt:nth-child(4n+3){background:var(--lilac-soft)}
.ingt:hover{transform:translateY(-4px) rotate(-1.5deg)}
@media(max-width:760px){.ingx{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ingt{padding:12px 6px}.ingt .ill{width:44px;height:44px}.ingt b{font-size:13px}}
/* PDP real content */
.sizes span{display:flex;flex-direction:column;gap:0;height:auto;min-height:46px;padding:6px 18px;line-height:1.3}
.sizes span small{font-size:12px;font-weight:700;color:var(--ink-2)}
.concerns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:16px}
.concerns .chip{height:32px;font-size:13px;padding:0 12px;background:var(--o-wash);border-color:transparent}
.acc .qa.open p{margin-bottom:6px}
.ticks{list-style:none;padding:0;margin:6px 0 4px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.ticks li{font-size:14px;font-weight:700;display:flex;gap:8px;align-items:flex-start}
.ticks li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.howto{counter-reset:h;list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:8px}
.howto li{counter-increment:h;display:flex;gap:10px;font-size:14px;font-weight:600;align-items:flex-start}
.howto li:before{content:counter(h);flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:800 12px/24px var(--f-en);text-align:center}
.ingrow{display:flex;gap:12px;align-items:center;background:var(--o-wash);border-radius:16px;padding:10px 14px;margin:4px 0 8px}
.ingrow p{font-size:14px;font-weight:700;margin:0}
.rc.vid .ph.tall{height:230px;position:relative}
.rc.vid .pl{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92)}
.rc.vid .pl:after{content:"";position:absolute;left:18px;top:14px;border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.rc.empty{background:var(--lime-soft);border-color:transparent;justify-content:center;gap:12px}
@media(max-width:760px){.ticks{grid-template-columns:1fr}}

.gal{grid-template-columns:84px minmax(0,1fr)}.gal .thumbs{grid-column:1;grid-row:1}.gal .main{grid-column:2;grid-row:1}
@media(max-width:760px){.gal{grid-template-columns:1fr}.gal .thumbs,.gal .main{grid-column:auto;grid-row:auto}}
@media(max-width:760px){.card .meta .rate .it{display:none}.card .meta .rate .rc-n{display:none}}
.chip .ci{margin-inline-end:6px;width:22px;height:22px}
.chip.on .ci g[stroke]{stroke:#fff}
.price .from{font-size:12px;font-weight:700;color:var(--ink-2);margin-inline-end:4px}