/* ============================================================
   DREAM STORE — "Souk Neon" design system
   Bright marketplace · dual-accent (Retail coral ⇄ Wholesale indigo)
   Unique to the Store site — shares nothing with the other 5 builds.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#F7F6FB;          /* cool off-white base */
  --bg-2:#EFEDF7;        /* faint band */
  --surface:#FFFFFF;     /* cards */
  --surface-2:#FBFAFE;   /* nested */
  --ink:#151320;         /* text */
  --ink-2:#4A4658;
  --muted:#8A8699;
  --line:#ECEAF4;        /* hairlines */
  --line-2:#DED9EE;

  /* dual mode accents — RETAIL is the default */
  --accent:#FF4E6A;      /* coral-rose (retail) */
  --accent-2:#FF7FA0;
  --accent-ink:#B31438;  /* readable accent text on light */
  --accent-soft:#FFE7EC; /* tint fill */
  --accent-glow:rgba(255,78,106,.30);

  /* fixed pops */
  --flash:#FF7A00;       /* tangerine — urgency / countdown / sale */
  --flash-soft:#FFE9D6;
  --mint:#12B981;        /* in-stock / free-ship status */
  --mint-soft:#DCF7EE;
  --night:#141026;       /* deep indigo-black band */
  --night-2:#1E1740;

  /* type */
  --fd:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --fb:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fx:"Space Mono", ui-monospace, monospace;

  /* shape / depth */
  --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(21,19,32,.05), 0 1px 1px rgba(21,19,32,.04);
  --sh-2:0 10px 30px -12px rgba(21,19,32,.16);
  --sh-3:0 24px 60px -18px rgba(21,19,32,.22);
  --sh-pop:0 18px 40px -14px var(--accent-glow);
  --wrap:1220px;
  --ease:cubic-bezier(.22,1,.36,.08);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* WHOLESALE mode recolors the entire UI */
[data-mode="wholesale"]{
  --accent:#5B36F0;       /* electric indigo */
  --accent-2:#8A6BFF;
  --accent-ink:#3E1FB0;
  --accent-soft:#EAE4FF;
  --accent-glow:rgba(91,54,240,.30);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.55;
  font-weight:400; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}
::selection{background:var(--accent); color:#fff}

h1,h2,h3,h4{font-family:var(--fd); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.section{padding:78px 0}
.section.tight{padding:52px 0}
.band{background:var(--bg-2)}
.mono{font-family:var(--fx)}

/* eyebrow / titles */
.eyebrow{
  font-family:var(--fx); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-ink); display:inline-flex; align-items:center; gap:9px; font-weight:700;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.sec-title{font-size:clamp(26px,4vw,42px)}
.sec-title em{font-style:normal; color:var(--accent)}
.sec-sub{color:var(--muted); max-width:52ch; margin-top:10px; font-size:15px}
.link-more{font-weight:700; font-size:14px; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px}
.link-more svg{width:16px;height:16px; transition:transform .3s var(--ease-out)}
.link-more:hover svg{transform:translateX(4px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--fb); font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:var(--r-pill); background:var(--surface);
  color:var(--ink); border:1.5px solid var(--line-2);
  transition:transform .25s var(--ease-out), box-shadow .25s, background .2s, border-color .2s;
  will-change:transform;
}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn.solid{background:var(--accent); color:#fff; border-color:transparent}
.btn.solid:hover{box-shadow:var(--sh-pop)}
.btn.ink{background:var(--ink); color:#fff; border-color:transparent}
.btn.ink:hover{box-shadow:var(--sh-3)}
.btn.ghost{background:transparent}
.btn.sm{padding:9px 16px; font-size:13.5px}
.btn.lg{padding:16px 30px; font-size:16px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5; pointer-events:none}

/* chips / badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--fb); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill);
}
.badge.ready{background:var(--mint-soft); color:#0A7D57}
.badge.preorder{background:var(--accent-soft); color:var(--accent-ink)}
.badge.request{background:#EDEAFB; color:#4B37B8}
.badge.soon{background:#EEE; color:#6B6B6B}
.badge.flash{background:var(--flash); color:#fff}
.badge.dot::before{content:""; width:6px;height:6px;border-radius:50%; background:currentColor}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{
  background:var(--night); color:#EDE9FF; font-size:13px; overflow:hidden; position:relative; z-index:60;
}
.announce .atrack{display:flex; gap:44px; white-space:nowrap; padding:9px 0; width:max-content;
  animation:aScroll 30s linear infinite; font-family:var(--fx); letter-spacing:.02em; font-size:12.5px}
.announce .atrack span{display:inline-flex; align-items:center; gap:44px}
.announce b{color:var(--flash)}
.announce em{color:var(--accent-2); font-style:normal}
@keyframes aScroll{to{transform:translateX(-50%)}}
.announce:hover .atrack{animation-play-state:paused}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50; background:rgba(247,246,251,.82);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s;
}
.header.scrolled{border-color:var(--line); box-shadow:0 8px 24px -18px rgba(21,19,32,.4)}
.hbar{display:flex; align-items:center; gap:18px; height:70px}
.logo{font-family:var(--fd); font-weight:800; font-size:23px; letter-spacing:-.04em; display:flex; align-items:center; gap:9px}
.logo .lmark{width:30px;height:30px; border-radius:9px; background:var(--accent); position:relative; flex:none;
  box-shadow:var(--sh-pop); overflow:hidden; transition:background .3s}
.logo .lmark::before{content:""; position:absolute; inset:6px 6px auto 6px; height:5px; border-radius:3px; background:rgba(255,255,255,.85)}
.logo .lmark::after{content:""; position:absolute; inset:14px 6px 6px 6px; border-radius:4px; background:rgba(255,255,255,.35)}
.logo b{color:var(--accent); font-weight:800}

/* search */
.hsearch{flex:1; max-width:460px; position:relative}
.hsearch input{
  width:100%; height:44px; border:1.5px solid var(--line-2); background:var(--surface);
  border-radius:var(--r-pill); padding:0 46px 0 44px; font-family:var(--fb); font-size:14.5px; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); outline:none}
.hsearch .si{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px;height:18px; color:var(--muted)}
.hsearch .sgo{position:absolute; right:6px; top:6px; width:32px;height:32px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center}
.hsearch .sgo svg{width:16px;height:16px}

.hnav{display:flex; align-items:center; gap:4px; margin-left:auto}
.hnav .nl{padding:9px 12px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--ink-2); transition:color .2s, background .2s}
.hnav .nl:hover{color:var(--ink); background:var(--bg-2)}

.icon-btn{width:42px;height:42px; border-radius:12px; display:grid; place-items:center; color:var(--ink); position:relative; transition:background .2s}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn svg{width:21px;height:21px}
.cart-count{position:absolute; top:2px; right:2px; min-width:18px;height:18px; padding:0 4px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; font-family:var(--fb);
  transform:scale(0); transition:transform .3s var(--ease-out)}
.cart-count.show{transform:scale(1)}
.cart-count.bump{animation:bump .4s var(--ease-out)}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}

/* mode switch — the signature control */
.modesw{display:flex; align-items:center; background:var(--bg-2); border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:3px; position:relative}
.modesw button{position:relative; z-index:2; padding:7px 15px; font-size:12.5px; font-weight:800; letter-spacing:.01em; color:var(--muted); border-radius:var(--r-pill); transition:color .3s}
.modesw button[aria-pressed="true"]{color:#fff}
.modesw .thumb{position:absolute; z-index:1; top:3px; bottom:3px; border-radius:var(--r-pill); background:var(--accent);
  transition:transform .38s var(--ease-out), width .38s var(--ease-out), background .3s; box-shadow:var(--sh-pop)}
.modesw small{display:block; font-size:9.5px; font-weight:600; letter-spacing:.06em; opacity:.75; text-transform:uppercase}

.menu-toggle{display:none}
.mobile-menu{display:none}

/* ============================================================
   HERO — 3D floating parcels
   ============================================================ */
.hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.hero-fallback{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 50% at 78% 30%, var(--accent-glow), transparent 70%),
    radial-gradient(50% 60% at 22% 78%, rgba(91,54,240,.18), transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
/* CSS floating parcels — shown when WebGL is off, and as ambient depth */
.hero-fallback .fp{position:absolute; border-radius:16px; box-shadow:var(--sh-3); opacity:.9;
  transform:rotate(var(--rot,0deg)); animation:floatY var(--dur,9s) ease-in-out infinite}
.hero-fallback .fp::after{content:""; position:absolute; inset:0 0 auto 0; height:34%; background:rgba(255,255,255,.5); border-radius:16px 16px 0 0}
.hero-fallback .fp::before{content:""; position:absolute; left:50%; top:34%; width:100%; height:2px; background:rgba(255,255,255,.5); transform:translateX(-50%)}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-22px) rotate(calc(var(--rot,0deg) + 3deg))}}
.hero.webgl-on .hero-fallback .fp{opacity:0; transition:opacity 1s ease}

.hero-inner{position:relative; z-index:3; padding:70px 0}
.hero .kick{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--line-2);
  padding:7px 8px 7px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; box-shadow:var(--sh-1); margin-bottom:22px}
.hero .kick .pill{background:var(--accent); color:#fff; padding:3px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:800; letter-spacing:.02em}
.hero h1{font-size:clamp(40px,7.5vw,86px); line-height:.96; letter-spacing:-.045em; max-width:15ch}
.hero h1 .rot{color:var(--accent); position:relative; display:inline-block; min-width:5ch}
.hero .lead{font-size:clamp(16px,2vw,20px); color:var(--ink-2); max-width:46ch; margin:22px 0 30px; line-height:1.5}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero .trust{display:flex; gap:26px; margin-top:34px; flex-wrap:wrap}
.hero .trust .t{display:flex; flex-direction:column}
.hero .trust .t b{font-family:var(--fd); font-size:24px; letter-spacing:-.03em}
.hero .trust .t span{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.02em}
.scrollcue{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-family:var(--fx); font-size:10px; letter-spacing:.2em}
.scrollcue i{width:1px; height:34px; background:linear-gradient(var(--accent),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ============================================================
   MARQUEE TRUST BAR
   ============================================================ */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden}
.strip .strack{display:flex; gap:40px; width:max-content; padding:16px 0; animation:aScroll 34s linear infinite; align-items:center}
.strip .strack:hover{animation-play-state:paused}
.strip .si{display:inline-flex; align-items:center; gap:12px; color:var(--ink-2); font-weight:700; font-size:14px; white-space:nowrap}
.strip .si svg{width:20px;height:20px; color:var(--accent)}
.strip .sep{color:var(--line-2)}

/* ============================================================
   CATEGORY RAIL
   ============================================================ */
.catrail{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.catcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 14px; text-align:center;
  transition:transform .3s var(--ease-out), box-shadow .3s, border-color .3s; position:relative; overflow:hidden}
.catcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.catcard .cico{width:56px;height:56px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); transition:transform .4s var(--ease-out)}
.catcard:hover .cico{transform:scale(1.08) rotate(-4deg)}
.catcard .cico svg{width:28px;height:28px}
.catcard h4{font-size:15px; letter-spacing:-.02em}
.catcard span{font-size:12px; color:var(--muted); font-weight:600}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.pgrid.c5{grid-template-columns:repeat(5,1fr)}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative;
  transition:transform .32s var(--ease-out), box-shadow .32s, border-color .3s; display:flex; flex-direction:column}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.pcard .pmedia{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-2)}
.pcard .pmedia img{width:100%;height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
.pcard:hover .pmedia img{transform:scale(1.06)}
.pcard .pbadges{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2}
.pcard .pwish{position:absolute; top:10px; right:10px; width:34px;height:34px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; color:var(--ink-2); box-shadow:var(--sh-1); z-index:2; transition:color .2s, transform .2s}
.pcard .pwish:hover{color:var(--accent); transform:scale(1.1)}
.pcard .pwish.on{color:var(--accent)}
.pcard .pwish svg{width:17px;height:17px; fill:none; stroke:currentColor; stroke-width:2}
.pcard .pwish.on svg{fill:currentColor}
.pcard .quick{position:absolute; left:10px; right:10px; bottom:10px; z-index:2; transform:translateY(120%); opacity:0;
  transition:transform .35s var(--ease-out), opacity .3s}
.pcard:hover .quick{transform:translateY(0); opacity:1}
.pcard .pbody{padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.pcard .pbrand{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.pcard .ptitle{font-family:var(--fb); font-weight:700; font-size:14.5px; line-height:1.3; letter-spacing:-.01em; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em}
.prate{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600}
.prate .stars{color:var(--flash); letter-spacing:1px; font-size:12px}
.prate .sold{color:var(--muted)}
.pprice{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:4px; flex-wrap:wrap}
.pprice .now{font-family:var(--fd); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink)}
.pprice .cur{font-size:12px; font-weight:700; color:var(--muted); align-self:center}
.pprice .was{font-size:13px; color:var(--muted); text-decoration:line-through}
.pprice .off{font-size:11px; font-weight:800; color:var(--flash); background:var(--flash-soft); padding:2px 7px; border-radius:6px}
.pprice .moq{width:100%; font-size:11.5px; color:var(--accent-ink); font-weight:700; font-family:var(--fx); margin-top:2px}

/* ============================================================
   FLASH DEAL — dark night band
   ============================================================ */
.flashband{background:var(--night); color:#fff; position:relative; overflow:hidden}
.flashband::before{content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(50% 60% at 12% 20%, rgba(255,122,0,.28), transparent 60%),
             radial-gradient(50% 60% at 90% 90%, var(--accent-glow), transparent 60%)}
.flashband .wrap{position:relative; z-index:2}
.flash-top{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.flash-top .ft-l{display:flex; align-items:center; gap:14px}
.flash-top .bolt{width:48px;height:48px; border-radius:14px; background:var(--flash); display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(255,122,0,.6)}
.flash-top .bolt svg{width:26px;height:26px; color:#fff}
.flash-top h2{font-size:clamp(24px,3.6vw,38px); color:#fff}
.flash-top p{color:#B9B2D6; font-size:14px; margin-top:2px}
.countdown{display:flex; align-items:center; gap:8px}
.countdown .seg{background:var(--night-2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:9px 12px; text-align:center; min-width:56px}
.countdown .seg b{font-family:var(--fx); font-size:24px; font-weight:700; color:#fff; display:block; line-height:1}
.countdown .seg span{font-size:9.5px; letter-spacing:.14em; color:#9089B0; text-transform:uppercase; margin-top:4px; display:block}
.countdown .colon{font-family:var(--fx); font-size:22px; color:var(--flash)}
.flashband .pcard{background:var(--night-2); border-color:rgba(255,255,255,.08)}
.flashband .pcard .pbody .pbrand{color:#8E86AE}
.flashband .pcard .ptitle{color:#F3F0FF}
.flashband .pcard .pprice .now{color:#fff}
.flashband .pcard .pmedia{background:#2A2350}

/* ============================================================
   PROMO / SPLIT BANNERS
   ============================================================ */
.promos{display:grid; grid-template-columns:1.3fr 1fr; gap:20px}
.promo{border-radius:var(--r-xl); padding:40px; position:relative; overflow:hidden; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff}
.promo h3{font-size:clamp(24px,3vw,34px); margin-bottom:8px}
.promo p{opacity:.9; margin-bottom:18px; max-width:34ch}
.promo.retail{background:linear-gradient(135deg,#FF4E6A,#FF7A00)}
.promo.trade{background:linear-gradient(135deg,#5B36F0,#8A6BFF)}
.promo .pglyph{position:absolute; right:-20px; top:-20px; width:200px;height:200px; opacity:.16}
.promo .btn{align-self:flex-start}

/* ============================================================
   REQUEST-FROM-DUBAI CTA
   ============================================================ */
.request{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:44px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; box-shadow:var(--sh-2)}
.request .r-copy h2{font-size:clamp(26px,3.4vw,40px); margin-bottom:12px}
.request .r-copy h2 em{font-style:normal; color:var(--accent)}
.request .r-copy p{color:var(--ink-2); max-width:44ch}
.request .r-form{display:flex; flex-direction:column; gap:12px; background:var(--bg-2); border-radius:var(--r-lg); padding:22px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:.01em}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line-2); background:var(--surface); border-radius:12px; padding:12px 14px;
  font-family:var(--fb); font-size:14.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); outline:none}
.field textarea{resize:vertical; min-height:80px}

/* ============================================================
   WHY / TRUST GRID
   ============================================================ */
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.wtile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; transition:transform .3s var(--ease-out), box-shadow .3s}
.wtile:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.wtile .wico{width:50px;height:50px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:16px}
.wtile .wico svg{width:26px;height:26px}
.wtile h4{font-size:17px; margin-bottom:7px; letter-spacing:-.02em}
.wtile p{font-size:14px; color:var(--ink-2); line-height:1.5}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.rcard .stars{color:var(--flash); letter-spacing:2px; margin-bottom:12px}
.rcard q{font-family:var(--fd); font-weight:500; font-size:18px; letter-spacing:-.02em; line-height:1.35; quotes:none; display:block; margin-bottom:16px}
.rcard .who{display:flex; align-items:center; gap:12px}
.rcard .av{width:40px;height:40px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--fd)}
.rcard .who b{font-size:14px; display:block}
.rcard .who span{font-size:12px; color:var(--muted)}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{background:var(--night); color:#fff; border-radius:var(--r-xl); padding:48px; text-align:center; position:relative; overflow:hidden}
.news::before{content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(50% 80% at 50% 0%, var(--accent-glow), transparent 60%)}
.news .wrapin{position:relative; z-index:2; max-width:520px; margin:0 auto}
.news h2{font-size:clamp(26px,3.6vw,40px); margin-bottom:10px}
.news p{color:#B9B2D6; margin-bottom:22px}
.news form{display:flex; gap:10px}
.news input{flex:1; height:52px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  padding:0 20px; color:#fff; font-family:var(--fb); font-size:15px}
.news input::placeholder{color:#9089B0}
.news input:focus{outline:none; border-color:var(--accent)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--night); color:#C9C3E0; padding:60px 0 26px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .logo{color:#fff; margin-bottom:14px}
.foot-brand p{font-size:14px; max-width:34ch; line-height:1.6}
.foot-brand .pays{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.foot-brand .pays .pay{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:6px 10px; font-size:11px; font-weight:700; color:#EDE9FF}
.foot-col h5{font-family:var(--fb); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 16px}
.foot-col a{display:block; font-size:14px; padding:5px 0; color:#B4AED0; transition:color .2s}
.foot-col a:hover{color:var(--accent-2)}
.foot-bot{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:22px; font-size:13px; color:#8E86AE}
.socials{display:flex; gap:10px}
.socials a{width:38px;height:38px; border-radius:11px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#C9C3E0; transition:background .2s, color .2s}
.socials a:hover{background:var(--accent); color:#fff}
.socials svg{width:18px;height:18px}

/* ============================================================
   CART DRAWER + TOAST + BACKDROP
   ============================================================ */
.backdrop{position:fixed; inset:0; background:rgba(21,19,32,.5); backdrop-filter:blur(3px); z-index:80; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.backdrop.show{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bg); z-index:90; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease-out); box-shadow:var(--sh-3)}
.drawer.show{transform:translateX(0)}
.drawer .dhead{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.drawer .dhead h3{font-size:19px}
.drawer .dhead .x{width:38px;height:38px; border-radius:11px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line)}
.drawer .dbody{flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:14px}
.drawer .empty{text-align:center; color:var(--muted); padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:14px}
.drawer .empty svg{width:52px;height:52px; color:var(--line-2)}
.citem{display:grid; grid-template-columns:70px 1fr auto; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px}
.citem .cthumb{width:70px;height:70px; border-radius:10px; overflow:hidden; background:var(--bg-2)}
.citem .cthumb img{width:100%;height:100%;object-fit:cover}
.citem .cmid b{font-size:13.5px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3}
.citem .cmid .cmeta{font-size:11.5px; color:var(--muted); margin-top:3px}
.citem .cprice{font-family:var(--fd); font-weight:800; font-size:15px; margin-top:6px}
.citem .cright{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between}
.citem .crem{color:var(--muted); font-size:12px; font-weight:700}
.citem .crem:hover{color:var(--accent)}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; background:var(--surface)}
.qty button{width:30px;height:30px; font-size:16px; font-weight:700; color:var(--ink-2); display:grid; place-items:center}
.qty button:hover{color:var(--accent)}
.qty b{min-width:30px; text-align:center; font-size:13.5px; font-weight:800; font-family:var(--fx)}
.drawer .dfoot{border-top:1px solid var(--line); padding:18px 22px; background:var(--surface)}
.drawer .drow{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; color:var(--ink-2)}
.drawer .drow.total{font-size:18px; font-weight:800; color:var(--ink); margin:10px 0 16px; font-family:var(--fd)}
.drawer .modehint{font-size:11.5px; color:var(--accent-ink); font-weight:700; background:var(--accent-soft); padding:8px 12px; border-radius:10px; margin-bottom:14px; text-align:center}

.toast-wrap{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-pill); font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px;
  box-shadow:var(--sh-3); transform:translateY(20px); opacity:0; transition:transform .35s var(--ease-out), opacity .3s}
.toast.show{transform:translateY(0); opacity:1}
.toast svg{width:18px;height:18px; color:var(--mint)}
.toast .taccent{color:var(--accent-2); font-weight:800}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.pagehead{padding:40px 0 26px; border-bottom:1px solid var(--line); background:var(--surface)}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{color:var(--line-2)}
.pagehead h1{font-size:clamp(28px,4vw,44px)}
.pagehead p{color:var(--ink-2); margin-top:8px}

/* ---------- SHOP layout ---------- */
.shoplayout{display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start}
.filters{position:sticky; top:88px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px}
.fgroup{padding:14px 0; border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0}
.fgroup h5{font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--fb); font-weight:800; margin:0 0 12px; color:var(--ink)}
.fopt{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; color:var(--ink-2); cursor:pointer}
.fopt input{width:17px;height:17px; accent-color:var(--accent)}
.fopt .ct{margin-left:auto; font-size:12px; color:var(--muted)}
.shoptop{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 15px; border-radius:var(--r-pill); border:1.5px solid var(--line-2); background:var(--surface); font-size:13.5px; font-weight:700; color:var(--ink-2); transition:all .2s}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent); color:#fff; border-color:transparent}
.selsort{border:1.5px solid var(--line-2); background:var(--surface); border-radius:var(--r-pill); padding:9px 16px; font-family:var(--fb); font-weight:700; font-size:13.5px; color:var(--ink)}
.filter-toggle{display:none}

/* ---------- PRODUCT detail ---------- */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.pdp-media .main{aspect-ratio:1/1; border-radius:var(--r-xl); overflow:hidden; background:var(--bg-2); border:1px solid var(--line)}
.pdp-media .main img{width:100%;height:100%;object-fit:cover}
.pdp-media .thumbs{display:flex; gap:10px; margin-top:12px}
.pdp-media .thumbs button{width:74px;height:74px; border-radius:12px; overflow:hidden; border:2px solid var(--line); background:var(--bg-2)}
.pdp-media .thumbs button.on{border-color:var(--accent)}
.pdp-media .thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info .pbrand{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.pdp-info h1{font-size:clamp(26px,3.4vw,38px); margin:8px 0 12px; line-height:1.05}
.pdp-info .metarow{display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; font-size:13.5px; color:var(--muted)}
.pdp-info .metarow .stars{color:var(--flash)}
.priceblock{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin-bottom:22px}
.priceblock .prow{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.priceblock .now{font-family:var(--fd); font-weight:800; font-size:38px; letter-spacing:-.03em}
.priceblock .cur{font-size:16px; font-weight:700; color:var(--muted)}
.priceblock .was{font-size:17px; color:var(--muted); text-decoration:line-through}
.priceblock .off{font-size:12px; font-weight:800; color:var(--flash); background:var(--flash-soft); padding:3px 9px; border-radius:7px}
.priceblock .tradebar{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); font-size:13px; color:var(--ink-2); display:flex; gap:16px; flex-wrap:wrap}
.priceblock .tradebar b{color:var(--accent-ink); font-family:var(--fx)}
.buyrow{display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.qty.lg button{width:44px;height:44px; font-size:19px}
.qty.lg b{min-width:44px; font-size:15px}
.pdp-info .specs{margin-top:26px; border-top:1px solid var(--line); padding-top:22px}
.pdp-info .specs h4{font-size:15px; margin-bottom:12px}
.spectable{width:100%; border-collapse:collapse; font-size:14px}
.spectable td{padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-2)}
.spectable td:first-child{color:var(--muted); width:40%; font-weight:600}
.trust-mini{display:flex; gap:18px; margin-top:20px; flex-wrap:wrap}
.trust-mini .tm{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--ink-2)}
.trust-mini .tm svg{width:20px;height:20px; color:var(--accent)}

/* ---------- CART / CHECKOUT page ---------- */
.cartlayout{display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:start}
.cartlist{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.cartline{display:grid; grid-template-columns:90px 1fr auto; gap:16px; padding:18px; border-bottom:1px solid var(--line); align-items:center}
.cartline:last-child{border-bottom:0}
.cartline .cthumb{width:90px;height:90px; border-radius:12px; overflow:hidden; background:var(--bg-2)}
.cartline .cthumb img{width:100%;height:100%;object-fit:cover}
.cartline .cinfo b{font-size:15px; font-weight:700}
.cartline .cinfo .cmeta{font-size:12.5px; color:var(--muted); margin-top:3px}
.cartline .cinfo .clean{margin-top:10px; display:flex; gap:14px; align-items:center}
.cartline .cright{text-align:right}
.cartline .cright .lp{font-family:var(--fd); font-weight:800; font-size:18px}
.summary{position:sticky; top:88px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px}
.summary h3{font-size:19px; margin-bottom:16px}
.summary .srow{display:flex; justify-content:space-between; font-size:14px; color:var(--ink-2); padding:7px 0}
.summary .srow.total{font-size:20px; font-weight:800; color:var(--ink); font-family:var(--fd); border-top:1px solid var(--line); margin-top:8px; padding-top:14px}
.promo-in{display:flex; gap:8px; margin:14px 0}
.promo-in input{flex:1; border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:10px 16px; font-family:var(--fb); font-size:14px}
.emptybox{text-align:center; padding:70px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.emptybox svg{width:64px;height:64px; color:var(--line-2); margin-bottom:16px}
.emptybox h3{font-size:22px; margin-bottom:8px}
.emptybox p{color:var(--muted); margin-bottom:20px}

.checkout-grid{display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:start}
.cform{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; margin-bottom:20px}
.cform h3{font-size:18px; margin-bottom:18px; display:flex; align-items:center; gap:10px}
.cform h3 .n{width:28px;height:28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:800; font-family:var(--fd)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pay-opts{display:flex; flex-direction:column; gap:10px}
.pay-opt{display:flex; align-items:center; gap:14px; padding:16px; border:1.5px solid var(--line-2); border-radius:var(--r); cursor:pointer; transition:border-color .2s, background .2s}
.pay-opt:hover{border-color:var(--accent)}
.pay-opt.on{border-color:var(--accent); background:var(--accent-soft)}
.pay-opt input{width:19px;height:19px; accent-color:var(--accent)}
.pay-opt .pi{width:44px;height:30px; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; flex:none}
.pay-opt .pt b{font-size:14.5px; display:block}
.pay-opt .pt span{font-size:12px; color:var(--muted)}

/* success */
.success{text-align:center; max-width:520px; margin:0 auto; padding:40px 0}
.success .tick{width:88px;height:88px; border-radius:50%; background:var(--mint-soft); color:var(--mint); display:grid; place-items:center; margin:0 auto 22px}
.success .tick svg{width:44px;height:44px}
.success h1{font-size:34px; margin-bottom:12px}
.success p{color:var(--ink-2); margin-bottom:8px}
.success .ono{font-family:var(--fx); font-weight:700; color:var(--accent-ink); font-size:18px; background:var(--accent-soft); display:inline-block; padding:8px 18px; border-radius:var(--r-pill); margin:10px 0 24px}

/* ---------- LOGIN / ACCOUNT ---------- */
.auth{display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 70px)}
.auth-aside{background:var(--night); color:#fff; padding:60px 54px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.auth-aside::before{content:""; position:absolute; inset:0; opacity:.6;
  background:radial-gradient(50% 50% at 80% 15%, var(--accent-glow), transparent 60%),
            radial-gradient(50% 50% at 10% 90%, rgba(255,122,0,.2), transparent 60%)}
.auth-aside > *{position:relative; z-index:2}
.auth-aside h2{font-size:40px; line-height:1.05; margin:auto 0 18px}
.auth-aside .apoints{display:flex; flex-direction:column; gap:14px}
.auth-aside .ap{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#D6D0F0}
.auth-aside .ap svg{width:22px;height:22px; color:var(--accent-2); flex:none; margin-top:1px}
.auth-main{display:flex; align-items:center; justify-content:center; padding:50px 40px}
.auth-card{width:100%; max-width:420px}
.auth-tabs{display:flex; background:var(--bg-2); border-radius:var(--r-pill); padding:4px; margin-bottom:26px; position:relative}
.auth-tabs button{flex:1; padding:12px; font-weight:800; font-size:14px; color:var(--muted); border-radius:var(--r-pill); z-index:2; transition:color .3s; position:relative}
.auth-tabs button[aria-pressed="true"]{color:#fff}
.auth-tabs button small{display:block; font-size:10px; font-weight:600; opacity:.8; letter-spacing:.04em}
.auth-tabs .athumb{position:absolute; z-index:1; top:4px; bottom:4px; width:calc(50% - 4px); border-radius:var(--r-pill); background:var(--accent); transition:transform .35s var(--ease-out), background .3s; box-shadow:var(--sh-pop)}
.auth-card h1{font-size:28px; margin-bottom:6px}
.auth-card .asub{color:var(--muted); margin-bottom:24px; font-size:14.5px}
.auth-card form{display:flex; flex-direction:column; gap:14px}
.auth-card .tradenote{font-size:12.5px; color:var(--accent-ink); background:var(--accent-soft); padding:11px 14px; border-radius:10px; line-height:1.5; font-weight:600}
.auth-card .aalt{text-align:center; margin-top:18px; font-size:14px; color:var(--muted)}
.auth-card .aalt a{color:var(--accent-ink); font-weight:700}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}

/* loader */
#loader{position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; transition:opacity .6s, visibility .6s}
#loader.done{opacity:0; visibility:hidden}
#loader .lw{font-family:var(--fd); font-weight:800; font-size:34px; letter-spacing:-.04em; overflow:hidden; display:flex}
#loader .lw span{display:inline-block; opacity:0; transform:translateY(100%); animation:lwUp .6s var(--ease-out) forwards}
#loader .lw b{color:var(--accent)}
@keyframes lwUp{to{opacity:1; transform:none}}
#loader .lbar{width:160px; height:3px; background:var(--line); border-radius:3px; margin-top:16px; overflow:hidden}
#loader .lbar i{display:block; height:100%; width:40%; background:var(--accent); border-radius:3px; animation:lbar 1s var(--ease-out) infinite}
@keyframes lbar{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .catrail{grid-template-columns:repeat(3,1fr)}
  .pgrid,.pgrid.c5{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr; gap:28px}
  .request{grid-template-columns:1fr; gap:26px}
  .promos{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-aside{display:none}
}
@media(max-width:860px){
  .hsearch{display:none}
  .hnav .nl{display:none}
  .menu-toggle{display:grid}
  .mobile-menu{display:block; overflow:hidden; max-height:0; opacity:0; transition:max-height .3s var(--ease-out), opacity .25s; border-top:0}
  body.nav-open .mobile-menu{max-height:60vh; opacity:1; border-top:1px solid var(--line)}
  .mobile-menu a{display:block; padding:14px 22px; font-weight:700; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line)}
  .mobile-menu a:hover{background:var(--bg-2); color:var(--accent-ink)}
  .header{background:var(--bg)}
  .shoplayout{grid-template-columns:1fr}
  .filters{position:fixed; inset:0 0 0 auto; width:min(320px,90vw); z-index:90; border-radius:0; transform:translateX(100%); transition:transform .35s var(--ease-out); overflow-y:auto; top:0}
  .filters.show{transform:none}
  .filter-toggle{display:inline-flex}
  .cartlayout,.checkout-grid{grid-template-columns:1fr}
  .summary{position:static}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .section{padding:52px 0}
  .catrail{grid-template-columns:repeat(2,1fr)}
  .pgrid,.pgrid.c5{grid-template-columns:repeat(2,1fr); gap:12px}
  .why{grid-template-columns:1fr}
  .hero{min-height:auto; padding-top:20px}
  .hero .trust{gap:18px}
  .modesw small{display:none}
  .modesw button{padding:7px 11px}
  .flash-top{flex-direction:column; align-items:flex-start}
  .news form{flex-direction:column}
  .cartline{grid-template-columns:70px 1fr; }
  .cartline .cright{grid-column:2; text-align:left; margin-top:4px}
  .pgrid .pcard .pbody{padding:12px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}