/* ================================================================
   GOOGLE FONTS — Barlow Condensed (display) + Plus Jakarta Sans (body)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  --bg:          #05070e;
  --bg-1:        #080c18;
  --bg-2:        #0b1020;
  --card:        #0e1528;
  --card-h:      #111a30;
  --lime:        #c8f400;
  --lime-d:      #9ebe00;
  --lime-glow:   rgba(200,244,0,.2);
  --lime-10:     rgba(200,244,0,.1);
  --lime-5:      rgba(200,244,0,.05);
  --orange:      #ff6535;
  --blue:        #4f8cff;
  --t1:          #f0f4ff;
  --t2:          #6e85af;
  --t3:          #2e3e5c;
  --border:      rgba(255,255,255,.07);
  --border-l:    rgba(200,244,0,.2);
  --shadow-lg:   0 32px 80px rgba(0,0,0,.55);
  --shadow-card: 0 8px 32px rgba(0,0,0,.4);
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:999px;
  --f-display:'Barlow Condensed',sans-serif;
  --f-body:'Plus Jakarta Sans',sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease-b:cubic-bezier(.34,1.56,.64,1);
}

/* ================================================================
   FOUC PREVENTION — body hidden until .site-ready added by JS
   ================================================================ */
body { visibility: hidden }
body.site-ready { visibility: visible }

/* ================================================================
   RESET
   ================================================================ */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--t1);
  line-height:1.65;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--f-display);text-transform:uppercase;line-height:1.05;color:var(--t1);letter-spacing:.01em }
a { text-decoration:none;color:inherit }
ul { list-style:none }
img { max-width:100%;display:block }
button { font-family:var(--f-body);cursor:none;border:none;background:none }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--t3);border-radius:var(--r-pill) }

/* ================================================================
   CURSOR
   ================================================================ */
#cursor {
  position:fixed;width:10px;height:10px;
  background:var(--lime);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  will-change:transform;
  transition:width .18s var(--ease),height .18s var(--ease);
  mix-blend-mode:difference;
}
#cursor-ring {
  position:fixed;width:34px;height:34px;
  border:1.5px solid rgba(200,244,0,.45);
  border-radius:50%;pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  will-change:left,top;
  transition:width .3s var(--ease),height .3s var(--ease),border-color .2s ease;
}
.cursor-grow #cursor { width:18px;height:18px }
.cursor-grow #cursor-ring { width:48px;height:48px;border-color:var(--lime-glow) }

/* ================================================================
   PAGE LOADER
   ================================================================ */
#loader {
  position:fixed;inset:0;background:var(--bg);z-index:99997;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.done { opacity:0;visibility:hidden;pointer-events:none }
.loader-logo {
  font-family:var(--f-display);font-size:3.5rem;font-weight:900;
  letter-spacing:.06em;color:var(--t1);text-transform:uppercase;
  animation:loaderPulse 1.2s ease-in-out infinite alternate;
}
.loader-logo span { color:var(--lime) }
.loader-bar {
  position:absolute;bottom:0;left:0;height:3px;
  background:var(--lime);width:0;
  animation:loaderFill .9s var(--ease) forwards;
  box-shadow:0 0 20px var(--lime-glow);
}
@keyframes loaderPulse { from{opacity:.5} to{opacity:1} }
@keyframes loaderFill  { to{width:100%} }

/* ================================================================
   UTILITY
   ================================================================ */
.label {
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);
}
.label::before { content:'';width:20px;height:2px;background:var(--lime);flex-shrink:0 }

/* Reveal on scroll — elements start invisible ONLY after JS adds .js-reveal class */
.sr {
  opacity:0;transform:translateY(30px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.sr.sr-left  { transform:translateX(-35px) }
.sr.sr-right { transform:translateX(35px) }
.sr.in { opacity:1;transform:none }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.25s}
.d4{transition-delay:.33s}.d5{transition-delay:.42s}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 2rem;font-family:var(--f-display);font-size:1.05rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);
  overflow:hidden;cursor:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s ease;
  will-change:transform;
}
.btn::after {
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
  transition:left .45s ease;
}
.btn:hover::after { left:140% }
.btn:hover { transform:translateY(-3px) }
.btn:active { transform:translateY(-1px) }
.btn-lime {
  background:var(--lime);color:var(--bg);
  box-shadow:0 4px 24px var(--lime-glow);
}
.btn-lime:hover { box-shadow:0 8px 40px rgba(200,244,0,.38) }
.btn-ghost {
  border:1.5px solid rgba(255,255,255,.15);color:var(--t1);
  background:rgba(255,255,255,.04);backdrop-filter:blur(8px);
}
.btn-ghost:hover { border-color:var(--lime);color:var(--lime);background:var(--lime-5) }
.btn-sm { padding:.55rem 1.25rem;font-size:.85rem }

/* ================================================================
   HEADER
   ================================================================ */
.hdr {
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.hdr.on {
  background:rgba(5,7,14,.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-color:var(--border);
  box-shadow:0 4px 40px rgba(0,0,0,.45);
}
.nav {
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;height:72px;max-width:1500px;margin:0 auto;
}
.logo {
  font-family:var(--f-display);font-size:2.3rem;font-weight:900;
  letter-spacing:.06em;color:var(--t1);cursor:none;line-height:1;
}
.logo span { color:var(--lime) }

.nav-list { display:flex;align-items:center;gap:.15rem }
.nav-a {
  position:relative;display:flex;align-items:center;gap:.3rem;
  padding:.48rem .9rem;font-family:var(--f-body);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t2);
  border-radius:var(--r-sm);cursor:none;
  transition:color .15s ease,background .15s ease;
}
.nav-a::after {
  content:'';position:absolute;bottom:4px;left:.9rem;right:.9rem;height:1.5px;
  background:var(--lime);border-radius:var(--r-pill);
  transform:scaleX(0);transition:transform .22s var(--ease);transform-origin:left;
}
.nav-a:hover { color:var(--t1);background:var(--border) }
.nav-a:hover::after { transform:scaleX(1) }
.nav-a i { font-size:.65rem;transition:transform .2s ease }
.nav-item:hover .nav-a i { transform:rotate(180deg) }

.nav-drop {
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:#0f1828;border:1px solid var(--border);border-radius:var(--r-md);
  min-width:210px;padding:.5rem;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:10;
}
.nav-item:hover .nav-drop,
.nav-item.drop-open .nav-drop { opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0) }
.nav-item.drop-open .nav-a i { transform:rotate(180deg) }
.nav-drop a {
  display:flex;align-items:center;gap:.72rem;
  padding:.62rem .9rem;font-size:.83rem;font-weight:600;
  color:var(--t2);border-radius:var(--r-sm);
  transition:all .14s ease;cursor:none;
}
.nav-drop a:hover { color:var(--lime);background:var(--lime-5) }
.nav-drop a i { width:16px;text-align:center }

.nav-icons { display:flex;align-items:center;gap:.2rem }
.nav-icon {
  width:42px;height:42px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);cursor:none;
  transition:color .15s ease,background .15s ease;
  position:relative;font-size:1rem;
}
.nav-icon:hover { color:var(--t1);background:var(--border) }
.cart-dot {
  position:absolute;top:7px;right:7px;
  width:16px;height:16px;border-radius:50%;
  background:var(--lime);color:var(--bg);
  font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease-b);
  font-family:var(--f-body);
}
.cart-dot.pop { animation:cartBounce .4s var(--ease-b) }
@keyframes cartBounce { 0%,100%{transform:scale(1)}50%{transform:scale(1.7)} }
.ham-btn { display:none }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  min-height:100vh;position:relative;display:flex;align-items:center;
  padding-top:72px;overflow:hidden;contain:layout style;
}
.hero-bg {
  position:absolute;inset:0;
  background:url('hero_bg.png') center/cover no-repeat;
  will-change:transform;
  /* Simple static background — no zoom animation for performance */
  transform:scale(1.04);
}
.hero-grad {
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(5,7,14,.97) 0%,rgba(5,7,14,.78) 55%,rgba(5,7,14,.45) 100%),
    linear-gradient(180deg,transparent 60%,rgba(5,7,14,.95) 100%);
}
/* Subtle static noise layer — no animation */
.hero-noise {
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.5;
}

.hero-in {
  position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 5%;width:100%;
  display:grid;grid-template-columns:1fr 420px;align-items:center;gap:3rem;
  padding-top:3rem;padding-bottom:3rem;
}
.hero-l { position:relative }
.hero-eye { margin-bottom:1.5rem }
.hero-h1 {
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(5rem,9.5vw,10.5rem);
  line-height:.9;letter-spacing:.01em;color:var(--t1);
  margin-bottom:1.75rem;
}
.hero-h1 em { font-style:normal;color:var(--lime);display:block }
.hero-sub {
  font-size:1rem;color:var(--t2);max-width:420px;
  margin-bottom:2.5rem;line-height:1.75;font-weight:400;
}
.hero-btns { display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3rem }
.hero-stats { display:flex;gap:2.5rem;flex-wrap:wrap }
.stat strong {
  display:block;font-family:var(--f-display);font-size:3rem;
  line-height:1;color:var(--lime);font-weight:900;
}
.stat span { font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t2);font-family:var(--f-body) }

/* Hero Right — Featured Card */
.hero-r { position:relative;display:flex;align-items:center;justify-content:center }
.featured-card {
  position:relative;width:100%;max-width:360px;
  background:linear-gradient(145deg,#111c32,#0d1522);
  border:1px solid rgba(200,244,0,.14);border-radius:var(--r-xl);
  overflow:hidden;will-change:transform;
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(200,244,0,.06),inset 0 1px 0 rgba(255,255,255,.05);
  /* Subtle float — GPU only, no repaints */
  animation:cardFloat 5s ease-in-out infinite;
}
@keyframes cardFloat {
  0%,100% { transform:translateY(0px) }
  50%      { transform:translateY(-14px) }
}
.fc-badge {
  position:absolute;top:1rem;left:1rem;z-index:5;
  background:var(--lime);color:var(--bg);font-family:var(--f-body);
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .72rem;border-radius:var(--r-pill);
}
.fc-img { width:100%;aspect-ratio:4/4.5;object-fit:cover;transition:transform .6s var(--ease) }
.featured-card:hover .fc-img { transform:scale(1.04) }
.fc-info { padding:1.35rem 1.5rem }
.fc-name { font-size:1.1rem;margin-bottom:.25rem }
.fc-cat  { font-size:.75rem;color:var(--t2);margin-bottom:1rem;font-family:var(--f-body) }
.fc-row  { display:flex;align-items:center;justify-content:space-between }
.fc-price { font-family:var(--f-display);font-size:1.5rem;font-weight:800;color:var(--lime) }
.fc-add {
  width:40px;height:40px;border-radius:50%;background:var(--lime);cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease-b),box-shadow .2s ease;
  border:none;will-change:transform;
}
.fc-add:hover { transform:scale(1.18) rotate(90deg);box-shadow:0 6px 24px var(--lime-glow) }
.fc-add i { color:var(--bg);font-size:.9rem }

/* Blob decorations — GPU only */
.blob { position:absolute;border-radius:50%;filter:blur(55px);pointer-events:none;will-change:opacity }
.blob1 { width:280px;height:280px;background:rgba(200,244,0,.055);top:-60px;right:-60px;animation:blobPulse 8s ease-in-out infinite alternate }
.blob2 { width:200px;height:200px;background:rgba(79,140,255,.07);bottom:-50px;left:-40px;animation:blobPulse 10s ease-in-out infinite alternate-reverse }
@keyframes blobPulse { from{opacity:.35}to{opacity:.75} }

.hero-scroll {
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:var(--t3);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--f-body);animation:scrollBounce 2.5s ease-in-out infinite;
}
.hero-scroll i { font-size:.85rem }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)} }

/* ================================================================
   MARQUEE BAND
   ================================================================ */
.marquee { background:var(--lime);padding:.8rem 0;overflow:hidden;contain:layout }
.mq-track {
  display:inline-flex;white-space:nowrap;
  will-change:transform;
  animation:mqRoll 30s linear infinite;
}
.mq-item {
  display:inline-flex;align-items:center;gap:.7rem;
  padding:0 2.5rem;font-family:var(--f-display);font-size:.88rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);
}
.mq-item i { font-size:.65rem }
@keyframes mqRoll { to { transform:translateX(-50%) } }

/* ================================================================
   FEATURES
   ================================================================ */
.features { padding:7rem 5%;background:var(--bg-1) }
.section-hd { text-align:center;margin-bottom:4rem }
.section-title {
  font-family:var(--f-display);font-size:clamp(3rem,6vw,5.5rem);
  margin-top:.6rem;font-weight:900;
}
.feat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto }
.feat {
  position:relative;padding:2.5rem 2rem;
  background:linear-gradient(145deg,var(--card),var(--card-h));
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  cursor:none;will-change:transform;
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.feat::before {
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--lime-5) 0%,transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.feat:hover { transform:translateY(-8px);border-color:var(--border-l);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px var(--border-l) }
.feat:hover::before { opacity:1 }
.feat-num {
  position:absolute;top:1.2rem;right:1.5rem;
  font-family:var(--f-display);font-size:5.5rem;font-weight:900;line-height:1;
  color:rgba(255,255,255,.03);user-select:none;pointer-events:none;
}
.feat-ico {
  width:52px;height:52px;border-radius:var(--r-md);background:var(--lime-10);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;transition:background .3s var(--ease),box-shadow .3s ease;
  font-size:1.3rem;color:var(--lime);
}
.feat:hover .feat-ico { background:var(--lime);color:var(--bg);box-shadow:0 0 28px var(--lime-glow) }
.feat h3 { font-size:1.3rem;margin-bottom:.65rem }
.feat p { color:var(--t2);font-size:.88rem;line-height:1.72 }

/* ================================================================
   SHOP
   ================================================================ */
.shop { padding:6rem 0 7rem }
.shop-hd {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:3rem;flex-wrap:wrap;gap:1.25rem;
  max-width:1500px;margin-left:auto;margin-right:auto;padding:0 5%;
}
.shop-hd .section-title { text-align:left;font-size:clamp(2.8rem,5.5vw,4.5rem) }

/* Filter pills */
.pills {
  display:flex;gap:.4rem;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.38rem;
}
.pill {
  padding:.48rem 1.4rem;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t2);cursor:none;border:none;background:none;
  transition:all .18s ease;
}
.pill:hover { color:var(--t1) }
.pill.on { background:var(--lime);color:var(--bg);box-shadow:0 2px 16px var(--lime-glow) }

.shop-body { display:flex;gap:2rem;align-items:flex-start;max-width:1500px;margin:0 auto;padding:0 5% }

/* Sidebar */
.sbar {
  width:226px;flex-shrink:0;
  background:linear-gradient(145deg,var(--card),var(--card-h));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.75rem;position:sticky;top:86px;
}
.sbar-sec { margin-bottom:1.75rem }
.sbar-sec:last-child { margin-bottom:0 }
.sbar-lbl { font-family:var(--f-body);font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:.9rem;display:block }
.sbar-div { height:1px;background:var(--border);margin:1.5rem 0 }
.cats { display:flex;flex-direction:column;gap:.28rem }
.cat {
  display:flex;align-items:center;gap:.65rem;padding:.58rem .85rem;
  border-radius:var(--r-sm);font-size:.85rem;font-weight:600;
  color:var(--t2);cursor:none;transition:all .15s ease;font-family:var(--f-body);
}
.cat i { width:15px;text-align:center;font-size:.8rem }
.cat:hover { color:var(--t1);background:var(--border) }
.cat.on { color:var(--lime);background:var(--lime-5) }
.price-row { display:flex;justify-content:space-between;font-size:.78rem;color:var(--t2);margin-bottom:.88rem;font-family:var(--f-body) }
.price-row em { font-style:normal;color:var(--t1);font-weight:700 }
input[type=range] {
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;border-radius:var(--r-pill);outline:none;cursor:none;
  background:linear-gradient(to right,var(--lime) 0%,var(--lime) var(--p,100%),var(--border) var(--p,100%));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--lime);
  cursor:none;box-shadow:0 0 10px var(--lime-glow);
  transition:transform .22s var(--ease-b);
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.4) }
.szs { display:grid;grid-template-columns:repeat(4,1fr);gap:.38rem }
.sz {
  padding:.48rem;border:1px solid var(--border);background:none;
  color:var(--t2);border-radius:var(--r-sm);
  font-size:.75rem;font-weight:800;cursor:none;
  transition:all .15s ease;letter-spacing:.04em;font-family:var(--f-body);
}
.sz:hover { border-color:var(--t2);color:var(--t1) }
.sz.on { border-color:var(--lime);background:var(--lime-10);color:var(--lime) }

/* Catalog */
.catalog { flex-grow:1;min-width:0 }
.cat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem }

/* Product Card */
.pc {
  position:relative;
  background:linear-gradient(145deg,var(--card),var(--card-h));
  border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;cursor:none;
  transition:border-color .3s ease, box-shadow .3s ease, opacity .45s var(--ease);
  will-change:transform;
  transform-style:preserve-3d;
  contain:layout style;
}
.pc:hover {
  border-color:var(--border-l);
  box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 0 1px var(--border-l);
}
.pc-badge {
  position:absolute;top:.9rem;left:.9rem;z-index:6;
  font-family:var(--f-body);font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:.28rem .68rem;border-radius:var(--r-pill);
}
.badge-f { background:var(--lime);color:var(--bg) }
.badge-c { background:var(--orange);color:#fff }
.pc-wish {
  position:absolute;top:.9rem;right:.9rem;z-index:6;
  width:32px;height:32px;border-radius:50%;
  background:rgba(5,7,14,.85);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);
  transition:opacity .22s ease,transform .22s var(--ease-b),background .15s ease;
  cursor:none;
}
.pc:hover .pc-wish { opacity:1;transform:scale(1) }
.pc-wish:hover,.pc-wish.on { background:#ef4444;border-color:#ef4444 }
.pc-wish:hover i,.pc-wish.on i { color:#fff }
.pc-wish i { font-size:.75rem;color:var(--t2);transition:color .15s ease }

.pc-imgs {
  position:relative;aspect-ratio:4/4.5;overflow:hidden;
  background:linear-gradient(145deg,#101828,#1a2540);
}
.pc-img {
  width:100%;height:100%;object-fit:cover;
  transition:opacity .4s ease,transform .55s var(--ease);
  will-change:opacity,transform;
}
.pc-img-b {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity .4s ease,transform .55s var(--ease);
  will-change:opacity,transform;
}
.pc:hover .pc-img   { opacity:0;transform:scale(1.04) }
.pc:hover .pc-img-b { opacity:1;transform:scale(1.06) }

.pc-ov {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,7,14,.85) 0%,transparent 55%);
  display:flex;align-items:flex-end;justify-content:center;padding:1.1rem;
  opacity:0;transition:opacity .28s ease;
}
.pc:hover .pc-ov { opacity:1 }
.pc-qv {
  padding:.52rem 1.4rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;cursor:none;transition:background .15s ease,color .15s ease;
}
.pc-qv:hover { background:var(--lime);border-color:var(--lime);color:var(--bg) }

.pc-info { padding:1.2rem }
.pc-cat  { font-family:var(--f-body);font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-bottom:.3rem;display:block }
.pc-name { font-size:1.05rem;margin-bottom:.85rem;line-height:1.25;transition:color .2s ease;font-weight:700 }
.pc:hover .pc-name { color:var(--lime) }
.pc-bot { display:flex;align-items:center;justify-content:space-between;gap:.75rem }
.pc-price { font-family:var(--f-display);font-size:1.25rem;font-weight:800 }
.pc-add {
  width:38px;height:38px;border-radius:50%;background:var(--lime);
  display:flex;align-items:center;justify-content:center;
  cursor:none;will-change:transform;
  transition:transform .28s var(--ease-b),box-shadow .2s ease,background .15s ease;
  border:none;flex-shrink:0;
}
.pc-add:hover { transform:scale(1.18) rotate(90deg);box-shadow:0 4px 20px var(--lime-glow) }
.pc-add.added { background:var(--t3) }
.pc-add i { font-size:.88rem;color:var(--bg) }

/* ================================================================
   TRUST STRIP
   ================================================================ */
.trust {
  padding:5.5rem 5%;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
}
.trust-in { max-width:1100px;margin:0 auto;text-align:center }
.trust h2 { font-family:var(--f-display);font-size:clamp(2.5rem,5vw,4.2rem);font-weight:900;margin-bottom:.75rem }
.trust h2 em { font-style:normal;color:var(--lime) }
.trust p  { color:var(--t2);max-width:460px;margin:0 auto 3rem;font-size:.95rem }
.trust-logos { display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap }
.trust-logo {
  font-family:var(--f-display);font-size:1.45rem;font-weight:800;letter-spacing:.04em;
  color:var(--t3);cursor:none;transition:color .2s ease,transform .2s var(--ease-b);
  will-change:transform;
}
.trust-logo:hover { color:var(--lime);transform:translateY(-3px) }

/* ================================================================
   NEWSLETTER
   ================================================================ */
.nl {
  padding:7rem 5%;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#08101f,var(--bg));
}
.nl::before {
  content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:75%;height:120%;
  background:radial-gradient(ellipse,rgba(200,244,0,.05) 0%,transparent 65%);
  pointer-events:none;
}
.nl-in { max-width:660px;margin:0 auto;text-align:center;position:relative;z-index:1 }
.nl-title { font-family:var(--f-display);font-size:clamp(3rem,6.5vw,5.5rem);font-weight:900;margin-bottom:.75rem }
.nl-title em { font-style:normal;color:var(--lime) }
.nl-sub { color:var(--t2);margin-bottom:2.5rem;line-height:1.78 }
.nl-form  { display:flex;gap:.75rem;margin-bottom:3.5rem }
.nl-input {
  flex-grow:1;padding:.92rem 1.25rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--t1);font-family:var(--f-body);font-size:.9rem;outline:none;
  transition:border-color .2s ease;
}
.nl-input::placeholder { color:var(--t3) }
.nl-input:focus { border-color:var(--lime) }
.socials { display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap }
.soc {
  display:flex;align-items:center;gap:.55rem;padding:.68rem 1.35rem;
  border:1px solid var(--border);border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.8rem;font-weight:600;
  color:var(--t2);background:var(--card);cursor:none;
  transition:all .2s ease;will-change:transform;
}
.soc i { font-size:.95rem }
.soc:hover { transform:translateY(-3px) }
.soc.ig:hover { color:#e1306c;border-color:#e1306c }
.soc.fb:hover { color:#1877f2;border-color:#1877f2 }
.soc.wa:hover { color:#25d366;border-color:#25d366 }
.soc.tw:hover { color:#1da1f2;border-color:#1da1f2 }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background:#030509;border-top:1px solid var(--border) }
.footer-t { padding:5rem 5% 3.5rem;max-width:1500px;margin:0 auto }
.footer-g { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem }
.footer-logo .logo { display:block;margin-bottom:.9rem;font-size:2.1rem }
.footer-logo p { font-size:.85rem;color:var(--t2);max-width:230px;line-height:1.78 }
.f-hl { font-family:var(--f-body);font-size:.63rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--t3);margin-bottom:1.2rem }
.f-list { display:flex;flex-direction:column;gap:.6rem }
.f-list li,.f-list a { font-size:.85rem;color:var(--t2);cursor:none;transition:color .15s ease }
.f-list a:hover { color:var(--lime) }
.f-list li i { margin-right:.45rem;color:var(--t3);width:13px }
.footer-b {
  border-top:1px solid var(--border);padding:1.5rem 5%;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;
}
.footer-b p { font-size:.76rem;color:var(--t3) }

/* ================================================================
   CART DRAWER
   ================================================================ */
.veil {
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);z-index:1800;
  opacity:0;pointer-events:none;transition:opacity .32s ease;
}
.veil.open { opacity:1;pointer-events:all }
.drawer {
  position:fixed;top:0;right:0;width:min(420px,100%);height:100vh;
  background:#0b1120;border-left:1px solid var(--border);z-index:1900;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .38s var(--ease);
  will-change:transform;
}
.drawer.open { transform:translateX(0) }
.d-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 1.75rem;border-bottom:1px solid var(--border);flex-shrink:0;
}
.d-hdr h3 { font-size:1rem;display:flex;align-items:center;gap:.55rem }
.d-hdr h3 i { color:var(--lime) }
.d-close {
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--border);
  display:flex;align-items:center;justify-content:center;cursor:none;
  transition:background .15s ease,color .15s ease;color:var(--t2);
}
.d-close:hover { background:#ef4444;color:#fff }
.d-body { flex:1;overflow-y:auto;padding:1.15rem;display:flex;flex-direction:column;gap:.8rem }
.d-empty {
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;color:var(--t3);text-align:center;padding:3rem;
}
.d-empty i { font-size:3.2rem }
.d-empty p { font-size:.86rem;font-family:var(--f-body) }
.cart-item {
  display:flex;align-items:center;gap:.9rem;padding:.95rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  animation:itemIn .28s var(--ease);
}
@keyframes itemIn { from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none} }
.ci-img { width:60px;height:68px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0;background:#131e30 }
.ci-inf { flex-grow:1;min-width:0 }
.ci-n { font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.3rem }
/* Size badge */
.ci-meta { display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem;flex-wrap:wrap }
.ci-sz-badge {
  font-size:.62rem;font-weight:700;color:var(--t2);letter-spacing:.06em;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:3px;padding:.1rem .38rem;font-family:var(--f-body);
}
.ci-p { font-size:.88rem;color:var(--lime);font-weight:800;font-family:var(--f-display) }
/* Quantity controls */
.ci-qty-row { display:flex;align-items:center;gap:.45rem }
.ci-qty-btn {
  width:22px;height:22px;border-radius:4px;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--t2);font-size:.55rem;
  display:flex;align-items:center;justify-content:center;
  cursor:none;transition:all .15s ease;
}
.ci-qty-btn:hover { background:var(--lime);color:var(--bg);border-color:var(--lime) }
.ci-qty-num { font-size:.85rem;font-weight:700;color:var(--t1);font-family:var(--f-body);min-width:18px;text-align:center }
.ci-rm {
  width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:none;display:flex;align-items:center;justify-content:center;
  cursor:none;flex-shrink:0;transition:all .15s ease;color:var(--t3);
}
.ci-rm:hover { background:#ef4444;border-color:#ef4444;color:#fff }
.d-ftr { border-top:1px solid var(--border);padding:1.5rem 1.75rem;flex-shrink:0 }
.d-total { display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem }
.d-total span:last-child { font-size:1.2rem;color:var(--lime);font-weight:800;font-family:var(--f-display) }
.d-co { width:100%;justify-content:center;padding:.95rem }

/* ================================================================
   MODAL
   ================================================================ */
.modal-veil {
  position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);
  z-index:2000;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal-veil.open { opacity:1;pointer-events:all }
.modal {
  position:relative;background:#0e1626;border:1px solid var(--border);
  border-radius:var(--r-xl);max-width:820px;width:100%;max-height:90vh;
  overflow:hidden;display:flex;
  transform:scale(.92) translateY(20px);transition:transform .38s var(--ease);
}
.modal-veil.open .modal { transform:scale(1) translateY(0) }
.m-img { width:44%;object-fit:cover;flex-shrink:0 }
.m-inf { padding:2.4rem;flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.15rem }
.m-close {
  position:absolute;top:1.2rem;right:1.2rem;z-index:5;
  width:36px;height:36px;border-radius:50%;background:rgba(5,7,14,.85);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:none;transition:all .15s ease;color:var(--t2);
}
.m-close:hover { background:#ef4444;border-color:#ef4444;color:#fff }
.m-badge { display:inline-block;font-family:var(--f-body);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--r-pill) }
.m-name  { font-family:var(--f-display);font-size:2.1rem;font-weight:900;line-height:1.05 }
.m-price { font-family:var(--f-display);font-size:1.85rem;color:var(--lime);font-weight:900 }
.m-desc  { color:var(--t2);font-size:.88rem;line-height:1.72 }
.m-szs   { display:flex;gap:.45rem;flex-wrap:wrap }
.m-lbl   { font-family:var(--f-body);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-bottom:.65rem }
.m-add   { width:100%;justify-content:center;padding:.95rem;margin-top:auto }

/* ================================================================
   TOAST
   ================================================================ */
.toast {
  position:fixed;bottom:1.75rem;left:50%;
  transform:translateX(-50%) translateY(90px);
  background:var(--card);border:1px solid var(--border-l);
  border-radius:var(--r-pill);padding:.82rem 1.4rem;
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--f-body);font-size:.86rem;font-weight:600;
  z-index:9999;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px var(--border-l);
  opacity:0;white-space:nowrap;pointer-events:none;
  will-change:transform,opacity;
  transition:transform .38s var(--ease-b),opacity .28s ease;
}
.toast.show { transform:translateX(-50%) translateY(0);opacity:1 }
.toast i { color:var(--lime);font-size:1.05rem }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:1100px) {
  .hero-in { grid-template-columns:1fr;gap:0 }
  .hero-r  { display:none }
  .cat-grid { grid-template-columns:repeat(2,1fr) }
  .footer-g { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  .feat-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  body { cursor:auto }
  #cursor,#cursor-ring { display:none }
  button { cursor:pointer }
  a { cursor:pointer }
  .nav-list {
    position:fixed;top:72px;left:-100%;width:72%;height:calc(100vh - 72px);
    background:#05070e;border-right:1px solid var(--border);
    flex-direction:column;align-items:flex-start;
    padding:2rem 1.5rem;gap:.35rem;
    transition:left .35s var(--ease);overflow-y:auto;z-index:800;
  }
  .nav-list.open { left:0 }
  .nav-drop { position:static;transform:none;opacity:1;pointer-events:all;box-shadow:none;background:transparent;border:none;padding-left:1rem;margin-top:.2rem }
  .nav-item:hover .nav-drop { transform:none }
  .nav-a { width:100% }
  .ham-btn { display:flex }
  .shop-body { flex-direction:column }
  .sbar { width:100%;position:static }
  .feat-grid { grid-template-columns:1fr }
  .nl-form { flex-direction:column }
  .footer-g { grid-template-columns:1fr 1fr }
  .footer-logo { grid-column:1/-1 }
  .modal { flex-direction:column;max-height:95vh }
  .m-img { width:100%;height:220px }
}
@media(max-width:560px) {
  .cat-grid { grid-template-columns:repeat(2,1fr);gap:.85rem }
  .footer-g { grid-template-columns:1fr }
  .pills { flex-wrap:wrap;border-radius:var(--r-md) }
  .shop-hd { flex-direction:column;align-items:flex-start }
}
@media(max-width:380px) {
  .cat-grid { grid-template-columns:1fr }
}

/* ================================================================
   WHATSAPP FLOAT BUTTON
   ================================================================ */
.wa-float {
  position:fixed;bottom:2rem;right:2rem;z-index:1700;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(37,211,102,.45);
  cursor:none;will-change:transform;
  transition:transform .3s var(--ease-b),box-shadow .2s ease;
  animation:waPulse 3s ease-in-out infinite;
  border:none;
}
.wa-float:hover { transform:scale(1.14);box-shadow:0 12px 48px rgba(37,211,102,.6) }
.wa-float i { font-size:1.7rem;color:#fff }
.wa-float-tip {
  position:absolute;right:68px;top:50%;transform:translateY(-50%);
  background:#111a30;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.4rem .9rem;font-family:var(--f-body);font-size:.72rem;font-weight:700;
  color:var(--t1);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(-50%) translateX(6px);
  transition:opacity .2s ease,transform .2s ease;
}
.wa-float:hover .wa-float-tip { opacity:1;transform:translateY(-50%) translateX(0) }
@keyframes waPulse {
  0%,100% { box-shadow:0 8px 32px rgba(37,211,102,.45) }
  50%      { box-shadow:0 8px 48px rgba(37,211,102,.65),0 0 0 8px rgba(37,211,102,.1) }
}

/* ================================================================
   WHATSAPP ORDER BUTTON (on cards + modal)
   ================================================================ */
.btn-wa {
  background:#25d366;color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,.3);
}
.btn-wa:hover { box-shadow:0 8px 36px rgba(37,211,102,.5) }

/* ================================================================
   PRODUCT CARD EXTRAS
   ================================================================ */
/* Stock badge */
.pc-stock {
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--f-body);font-size:.62rem;font-weight:700;
  letter-spacing:.06em;margin-bottom:.6rem;
}
.pc-stock.low   { color:#f97316 }
.pc-stock.hot   { color:#ef4444 }
.pc-stock.ok    { color:#22c55e }
.pc-stock i     { font-size:.58rem }

/* Star ratings */
.pc-stars {
  display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem;
}
.stars { color:#facc15;font-size:.72rem;letter-spacing:.05rem }
.pc-rev { font-family:var(--f-body);font-size:.68rem;color:var(--t2) }

/* Delivery chip */
.pc-delivery {
  display:inline-flex;align-items:center;gap:.32rem;
  font-family:var(--f-body);font-size:.65rem;color:var(--t2);margin-top:.5rem;
}
.pc-delivery i { color:var(--lime);font-size:.6rem }

/* COD badge (bottom of card) */
.pc-cod {
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .85rem .65rem;margin:0 1.2rem 1rem;
  background:var(--lime-5);border:1px solid var(--border-l);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:.58rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lime);
  gap:.4rem;flex-wrap:wrap;
}
.pc-cod span { opacity:.6;color:var(--t2);text-transform:none;font-weight:500;letter-spacing:0 }

/* WhatsApp order now on card */
.pc-wa {
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;padding:.6rem;margin-bottom:.9rem;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.25);
  border-radius:var(--r-sm);color:#25d366;
  font-family:var(--f-body);font-size:.72rem;font-weight:700;letter-spacing:.05em;
  cursor:none;transition:all .18s ease;
}
.pc-wa:hover { background:rgba(37,211,102,.18);border-color:#25d366;transform:translateY(-1px) }
.pc-wa i { font-size:.85rem }

/* ================================================================
   CART — WHATSAPP CHECKOUT SECTION
   ================================================================ */
.d-wa-co {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.88rem;margin-top:.65rem;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);
  border-radius:var(--r-sm);color:#25d366;font-weight:700;font-size:.85rem;
  cursor:none;transition:all .2s ease;font-family:var(--f-body);
}
.d-wa-co:hover { background:#25d366;color:#fff;box-shadow:0 4px 20px rgba(37,211,102,.4) }
.d-wa-co i { font-size:1rem }
.d-ftr-note { font-family:var(--f-body);font-size:.66rem;color:var(--t3);text-align:center;margin-top:.75rem }

/* ================================================================
   TRUST BADGES (conversion row near cart)
   ================================================================ */
.trust-badges {
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.tb {
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:2rem 1rem;background:var(--bg-1);text-align:center;
  transition:background .2s ease;cursor:default;
}
.tb:hover { background:var(--card) }
.tb-ico { font-size:1.5rem;color:var(--lime) }
.tb h4 { font-family:var(--f-display);font-size:1rem;font-weight:800;margin:0;line-height:1.2 }
.tb p  { font-family:var(--f-body);font-size:.72rem;color:var(--t2);line-height:1.55 }
@media(max-width:600px) {
  .trust-badges { grid-template-columns:repeat(2,1fr) }
}

/* ================================================================
   SIZE GUIDE MODAL
   ================================================================ */
.sg-veil {
  position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);
  z-index:3000;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.sg-veil.open { opacity:1;pointer-events:all }
.sg-modal {
  background:#0e1626;border:1px solid var(--border);
  border-radius:var(--r-xl);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;
  transform:scale(.93) translateY(16px);transition:transform .32s var(--ease);
}
.sg-veil.open .sg-modal { transform:scale(1) translateY(0) }
.sg-hdr {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 2rem;border-bottom:1px solid var(--border);
}
.sg-hdr h3 { font-family:var(--f-display);font-size:1.8rem;font-weight:900 }
.sg-body { padding:2rem }
.sg-body p { font-family:var(--f-body);font-size:.82rem;color:var(--t2);margin-bottom:1.5rem }
.sg-table { width:100%;border-collapse:collapse;font-family:var(--f-body);font-size:.82rem }
.sg-table th {
  background:var(--lime);color:var(--bg);padding:.75rem 1rem;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:left;
}
.sg-table td { padding:.75rem 1rem;border-bottom:1px solid var(--border);color:var(--t2) }
.sg-table tr:last-child td { border-bottom:none }
.sg-table tr:hover td { background:var(--card);color:var(--t1) }
.sg-tip {
  margin-top:1.25rem;padding:.9rem;background:var(--lime-5);border:1px solid var(--border-l);
  border-radius:var(--r-md);font-family:var(--f-body);font-size:.78rem;color:var(--t2);
  display:flex;gap:.6rem;align-items:flex-start;
}
.sg-tip i { color:var(--lime);flex-shrink:0;margin-top:.1rem }

/* ================================================================
   MODAL — WhatsApp button
   ================================================================ */
.m-wa {
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.88rem;
  background:#25d366;border-radius:var(--r-sm);color:#fff;
  font-family:var(--f-body);font-size:.88rem;font-weight:700;
  cursor:none;transition:all .2s ease;border:none;
}
.m-wa:hover { background:#1dbe5a;box-shadow:0 6px 28px rgba(37,211,102,.4);transform:translateY(-2px) }
.m-wa i { font-size:1.1rem }

/* ================================================================
   REVIEW SECTION
   ================================================================ */
.reviews { padding:6rem 5%;background:var(--bg-1) }
.rev-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:1200px;margin:2.5rem auto 0 }
.rev-card {
  background:linear-gradient(145deg,var(--card),var(--card-h));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.75rem;cursor:default;
  transition:border-color .25s ease,transform .25s var(--ease);
}
.rev-card:hover { border-color:var(--border-l);transform:translateY(-4px) }
.rev-top { display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem }
.rev-av {
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:1.1rem;font-weight:900;
  background:var(--lime-10);color:var(--lime);
}
.rev-name { font-family:var(--f-body);font-size:.88rem;font-weight:700 }
.rev-sub  { font-size:.7rem;color:var(--t2);margin-top:.08rem }
.rev-stars { color:#facc15;font-size:.75rem }
.rev-text  { font-family:var(--f-body);font-size:.83rem;color:var(--t2);line-height:1.7 }
.rev-kit   { display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-family:var(--f-body);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3) }
.rev-kit i { color:var(--lime) }
@media(max-width:768px) {
  .rev-grid { grid-template-columns:1fr }
}
@media(max-width:600px) {
  .rev-grid { grid-template-columns:1fr }
  .wa-float { bottom:1.25rem;right:1.25rem;width:52px;height:52px }
}


/* ================================================================
   SEARCH OVERLAY
   ================================================================ */
.search-overlay {
  position:fixed;inset:0;z-index:4000;
  background:rgba(3,5,10,.92);backdrop-filter:blur(18px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:clamp(4rem,12vh,8rem);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.search-overlay.open { opacity:1;pointer-events:all }
.search-box {
  width:100%;max-width:680px;padding:0 1.25rem;
  transform:translateY(-18px);
  transition:transform .32s var(--ease);
}
.search-overlay.open .search-box { transform:translateY(0) }
.search-input-wrap {
  display:flex;align-items:center;gap:.75rem;
  background:#0d1626;border:1.5px solid var(--border-l);
  border-radius:var(--r-lg);padding:1rem 1.35rem;
  box-shadow:0 32px 80px rgba(0,0,0,.65);
}
.search-ico { color:var(--lime);font-size:1.15rem;flex-shrink:0 }
.search-input {
  flex-grow:1;background:none;border:none;outline:none;
  font-family:var(--f-body);font-size:1.1rem;color:var(--t1);cursor:text;
}
.search-input::placeholder { color:var(--t3) }
.search-clear {
  color:var(--t3);font-size:.85rem;cursor:none;padding:.2rem;
  transition:color .15s ease;flex-shrink:0;
}
.search-clear:hover { color:var(--t1) }
.search-results {
  margin-top:.85rem;display:flex;flex-direction:column;gap:.5rem;
  max-height:340px;overflow-y:auto;
}
.sr-item {
  display:flex;align-items:center;gap:1rem;
  background:#0e1726;border:1px solid var(--border);border-radius:var(--r-md);
  padding:.85rem 1.1rem;cursor:none;
  transition:border-color .18s ease,background .18s ease;
}
.sr-item:hover { border-color:var(--border-l);background:#111e34 }
.sr-item-img  { width:52px;height:58px;object-fit:cover;border-radius:var(--r-sm);background:#131e30;flex-shrink:0 }
.sr-item-info { flex-grow:1;min-width:0 }
.sr-item-name { font-family:var(--f-display);font-size:1rem;font-weight:700;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sr-item-cat  { font-size:.65rem;color:var(--t2);font-family:var(--f-body);letter-spacing:.08em;text-transform:uppercase }
.sr-item-price{ font-family:var(--f-display);font-size:1rem;color:var(--lime);font-weight:800;flex-shrink:0 }
.sr-no-results { font-family:var(--f-body);font-size:.9rem;color:var(--t3);text-align:center;padding:2.5rem 0 }
.search-hints {
  margin-top:1.1rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--f-body);font-size:.72rem;color:var(--t3);
}
.search-hint {
  padding:.32rem .85rem;border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:.72rem;font-family:var(--f-body);color:var(--t2);
  cursor:none;transition:all .15s ease;
}
.search-hint:hover { border-color:var(--lime);color:var(--lime);background:var(--lime-5) }

/* ================================================================
   DISCOUNT / COUPON IN CART
   ================================================================ */
.d-coupon {
  margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.d-coupon-row { display:flex;gap:.5rem }
.coupon-input {
  flex-grow:1;padding:.6rem .9rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--t1);font-family:var(--f-body);font-size:.82rem;outline:none;
  transition:border-color .2s ease;letter-spacing:.05em;text-transform:uppercase;
}
.coupon-input::placeholder { text-transform:none;letter-spacing:0;color:var(--t3) }
.coupon-input:focus { border-color:var(--lime) }
.coupon-apply-btn {
  padding:.6rem 1.1rem;background:var(--lime);color:var(--bg);
  border:none;border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  cursor:none;transition:background .15s ease,transform .15s ease;flex-shrink:0;
}
.coupon-apply-btn:hover { background:var(--lime-d);transform:translateY(-1px) }
.coupon-msg {
  margin-top:.5rem;font-family:var(--f-body);font-size:.74rem;font-weight:600;min-height:1rem;
}
.coupon-msg.success { color:#22c55e }
.coupon-msg.error   { color:#ef4444 }
.d-savings {
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-body);font-size:.78rem;font-weight:600;
  color:#22c55e;margin-bottom:.75rem;
  padding:.4rem .65rem;background:rgba(34,197,94,.08);border-radius:var(--r-sm);
  border:1px solid rgba(34,197,94,.2);
}

/* ================================================================
   SMART WHATSAPP CHAT BUBBLE
   ================================================================ */
.wa-bubble-wrap {
  position:fixed;bottom:2rem;right:2rem;z-index:1700;
  display:flex;flex-direction:column;align-items:flex-end;gap:.85rem;
}
.wa-chat-popup {
  width:290px;background:#0e1828;
  border:1px solid rgba(37,211,102,.2);border-radius:var(--r-xl);
  box-shadow:0 24px 70px rgba(0,0,0,.65);
  overflow:hidden;
  transform:scale(.88) translateY(20px);transform-origin:bottom right;
  opacity:0;pointer-events:none;
  transition:transform .32s var(--ease),opacity .28s ease;
}
.wa-chat-popup.open { transform:scale(1) translateY(0);opacity:1;pointer-events:all }
.wa-popup-hdr {
  display:flex;align-items:center;gap:.75rem;
  background:#128c7e;padding:1rem 1.1rem;
}
.wa-popup-avatar {
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;flex-shrink:0;
}
.wa-popup-name { font-family:var(--f-body);font-size:.88rem;font-weight:700;color:#fff }
.wa-popup-status {
  display:flex;align-items:center;gap:.35rem;
  font-family:var(--f-body);font-size:.65rem;color:rgba(255,255,255,.75);margin-top:.1rem;
}
.wa-online-dot {
  width:7px;height:7px;border-radius:50%;background:#4ade80;
  display:inline-block;animation:onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse { 0%,100%{opacity:1}50%{opacity:.45} }
.wa-popup-close {
  margin-left:auto;color:rgba(255,255,255,.7);font-size:.8rem;cursor:none;
  padding:.25rem;transition:color .15s ease;flex-shrink:0;
}
.wa-popup-close:hover { color:#fff }
.wa-popup-body { padding:1.1rem }
.wa-chat-msg {
  background:#1e2f4a;border-radius:var(--r-md);padding:.75rem .95rem;
  font-family:var(--f-body);font-size:.8rem;color:var(--t1);
  margin-bottom:.9rem;line-height:1.55;
  border:1px solid var(--border);
}
.wa-quick-replies { display:flex;flex-direction:column;gap:.42rem }
.wa-qr {
  display:flex;align-items:center;gap:.55rem;
  width:100%;padding:.6rem .85rem;text-align:left;
  background:rgba(37,211,102,.07);border:1px solid rgba(37,211,102,.18);
  border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:.76rem;font-weight:600;color:#25d366;
  cursor:none;transition:all .15s ease;
}
.wa-qr:hover { background:rgba(37,211,102,.17);border-color:#25d366;transform:translateX(3px) }
.wa-bubble-wrap .wa-float {
  position:relative;bottom:auto;right:auto;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(37,211,102,.45);
  cursor:none;will-change:transform;
  transition:transform .3s var(--ease-b),box-shadow .2s ease;
  border:none;flex-shrink:0;
  animation:waPulse 3s ease-in-out infinite;
}
.wa-bubble-wrap .wa-float:hover { transform:scale(1.12);box-shadow:0 12px 48px rgba(37,211,102,.6) }
.wa-bubble-wrap .wa-float i { font-size:1.7rem;color:#fff }
.wa-float-tip {
  position:absolute;right:68px;top:50%;
  background:#111a30;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.4rem .9rem;font-family:var(--f-body);font-size:.72rem;font-weight:700;
  color:var(--t1);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(-50%) translateX(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.wa-bubble-wrap .wa-float:hover .wa-float-tip { opacity:1;transform:translateY(-50%) translateX(0) }
.wa-notif-dot {
  position:absolute;top:-3px;right:-3px;
  width:18px;height:18px;border-radius:50%;
  background:#ef4444;color:#fff;
  font-family:var(--f-body);font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  animation:notifPop .5s var(--ease-b);
  border:2px solid var(--bg);
}
@keyframes notifPop { from{transform:scale(0)}to{transform:scale(1)} }
.wa-notif-dot.hidden { display:none }
@media(max-width:600px) {
  .wa-bubble-wrap { bottom:1.25rem;right:1.25rem }
  .wa-chat-popup { width:calc(100vw - 2.5rem) }
}