/* UN STORE - self-hosted Google Fonts (latin + latin-ext only) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/playfair-display-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/playfair-display-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/playfair-display-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ================= UN STORE — Global Styles (v2) ================= */
:root{
  --gold:#c9a227;
  --gold-light:#e6c65c;
  --red:#e23b3b;
  --green:#1aa863;
  --radius:14px;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Playfair Display',Georgia,serif;

  /* LIGHT THEME */
  --black:#0d0d0f;
  --text:#0d0d0f;
  --text-2:#4a4a55;
  --grey:#8a8a94;
  --line:#e8e8ec;
  --bg:#ffffff;
  --card:#ffffff;
  --soft:#f6f6f8;
  --dark-sec:#0d0d0f;
  --dark-sec-tx:#ffffff;
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --logo:#0d0d0f;
}
/* DARK THEME */
[data-theme="dark"]{
  --black:#ffffff;
  --text:#ececf1;
  --text-2:#b4b4c0;
  --grey:#8a8a99;
  --line:#2a2a33;
  --bg:#0e0e12;
  --card:#16161c;
  --soft:#1a1a21;
  --dark-sec:#16161c;
  --dark-sec-tx:#ececf1;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --logo:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden;
  max-width:100vw;position:relative;transition:background .3s,color .3s}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:14px;outline:none;color:var(--text)}
input,select,textarea{background:var(--card)}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
.sec{padding:70px 0}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head h2{font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.5px}
.sec-head p{color:var(--grey);margin-top:8px;font-size:15px}
.sec-head .line{width:70px;height:3px;background:var(--gold);margin:14px auto 0;border-radius:3px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:50px;border:none;
  cursor:pointer;font-weight:600;font-size:14px;transition:.28s;letter-spacing:.3px}
.btn-dark{background:var(--black);color:var(--bg)}
.btn-dark:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--black);color:var(--bg);transform:translateY(-2px)}
.btn-out{background:transparent;border:1.6px solid var(--black);color:var(--black)}
.btn-out:hover{background:var(--black);color:var(--bg)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1da851;transform:translateY(-2px)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:9px 18px;font-size:13px}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}

/* ---------- Announcement ---------- */
.announce{background:#0d0d0f;color:#fff;font-size:12.5px;letter-spacing:.6px;overflow:hidden;padding:9px 0}
[data-theme="dark"] .announce{background:#000}
.announce .track{display:flex;gap:60px;width:max-content;animation:marquee 26s linear infinite;white-space:nowrap}
.announce span{display:flex;align-items:center;gap:60px}
.announce b{color:var(--gold-light);font-weight:600}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:900;background:var(--bg);border-bottom:1px solid var(--line);transition:.3s}
header.scrolled{box-shadow:0 6px 26px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:20px}
.logo{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:8px;color:var(--logo);white-space:nowrap;flex:none}
.logo span{color:var(--gold)}
.logo small{display:block;font-family:var(--font);font-size:8.5px;letter-spacing:3px;color:var(--grey);font-weight:500;margin-top:-6px;white-space:nowrap}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:14px;font-weight:500;position:relative;padding:6px 0;transition:.2s}
.menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:.3s}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a:hover{color:var(--gold)}
.nav-ico{display:flex;gap:8px;align-items:center}
.ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:.25s;position:relative;background:var(--soft);font-size:17px;border:none;color:var(--text)}
.ico:hover{background:var(--black);color:var(--bg)}
.ico svg{width:19px;height:19px;fill:currentColor}
.ico .badge{position:absolute;top:-2px;right:-2px;background:var(--gold);color:#fff;font-size:10px;
  min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-weight:700}
.burger{display:none;font-size:22px;cursor:pointer}

/* theme toggle */
.tgl{width:56px;height:30px;border-radius:50px;background:var(--soft);border:1px solid var(--line);
  position:relative;cursor:pointer;transition:.3s;flex:none}
.tgl .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--gold);
  display:grid;place-items:center;font-size:12px;transition:.3s;color:#fff}
[data-theme="dark"] .tgl .knob{left:28px}

.mnav{position:fixed;inset:0 30% 0 0;background:var(--bg);z-index:1000;transform:translateX(-100%);
  transition:.35s;padding:26px;box-shadow:var(--shadow);overflow-y:auto}
.mnav.open{transform:translateX(0)}
.mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500}
.mnav .close{font-size:24px;text-align:right;cursor:pointer;margin-bottom:10px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:950;opacity:0;visibility:hidden;transition:.3s}
.overlay.show{opacity:1;visibility:visible}

/* ---------- Hero (cinematic) ---------- */
.hero{position:relative;height:640px;overflow:hidden;background:#08080a}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease;display:flex;align-items:center}
.slide.on{opacity:1;visibility:visible}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);will-change:transform}
/* Ken Burns — video jaisa slow zoom + pan */
.slide.on img{animation:kb 9s ease-out forwards}
@keyframes kb{
  0%{transform:scale(1.16) translate3d(2.2%,1.2%,0)}
  100%{transform:scale(1.02) translate3d(-1.6%,-1%,0)}
}
.slide:nth-child(even).on img{animation:kb2 9s ease-out forwards}
@keyframes kb2{
  0%{transform:scale(1.02) translate3d(-2%,-1%,0)}
  100%{transform:scale(1.16) translate3d(1.8%,1.2%,0)}
}
.slide::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.35) 100%)}
/* cinematic vignette + film grain */
.hero::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 55% 50%,transparent 42%,rgba(0,0,0,.55) 100%)}
.hero::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(2%,-1%)}}
/* light sweep — shine guzarti hui */
.hero .sweep{position:absolute;top:0;bottom:0;width:38%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.10) 45%,rgba(230,198,92,.16) 52%,transparent);
  filter:blur(6px);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%{left:-45%}55%{left:120%}100%{left:120%}}
/* floating golden particles */
.hero .dust{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hero .dust i{position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:rgba(230,198,92,.85);box-shadow:0 0 8px rgba(230,198,92,.9);opacity:0;
  animation:float linear infinite}
@keyframes float{
  0%{transform:translateY(0) translateX(0) scale(.6);opacity:0}
  12%{opacity:.85}
  85%{opacity:.5}
  100%{transform:translateY(-680px) translateX(50px) scale(1.15);opacity:0}
}
.slide .container{position:relative;z-index:5}
.slide-txt{max-width:600px;color:#fff}
.slide-txt>*{opacity:0;transform:translateY(28px)}
.slide.on .slide-txt>*{animation:rise .85s cubic-bezier(.22,1,.36,1) forwards}
.slide.on .slide-txt>*:nth-child(1){animation-delay:.25s}
.slide.on .slide-txt>*:nth-child(2){animation-delay:.45s}
.slide.on .slide-txt>*:nth-child(3){animation-delay:.65s}
.slide.on .slide-txt>*:nth-child(4){animation-delay:.85s}
@keyframes rise{to{opacity:1;transform:none}}
.slide-txt .small{color:var(--gold-light);letter-spacing:5px;font-size:11.5px;font-weight:600;margin-bottom:16px;
  display:inline-flex;align-items:center;gap:11px}
.slide-txt .small::before{content:'';width:40px;height:1.5px;background:var(--gold);display:inline-block}
.slide-txt h1{font-family:var(--display);font-size:60px;line-height:1.08;font-weight:700;margin-bottom:18px;
  text-shadow:0 4px 40px rgba(0,0,0,.6)}
.slide-txt h1 em{font-style:normal;color:var(--gold-light)}
.slide-txt p{opacity:.9;font-size:16.5px;margin-bottom:30px;max-width:450px;line-height:1.75}
.slide-txt .btn{box-shadow:0 12px 40px rgba(201,162,39,.35)}
.hero-nav{position:absolute;bottom:30px;left:0;right:0;z-index:7;display:flex;justify-content:center;gap:10px}
.hero-nav i{width:34px;height:3px;background:rgba(255,255,255,.28);border-radius:3px;cursor:pointer;
  transition:.4s;position:relative;overflow:hidden}
.hero-nav i.on{width:64px;background:rgba(255,255,255,.28)}
.hero-nav i.on::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform-origin:left;animation:prog 6s linear forwards}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);
  color:#fff;display:grid;place-items:center;cursor:pointer;font-size:19px;transition:.28s}
.hero-arrow:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.hero-arrow.prev{left:24px}.hero-arrow.next{right:24px}
/* scroll cue */
.hero .cue{position:absolute;bottom:26px;right:30px;z-index:7;color:rgba(255,255,255,.5);font-size:10.5px;
  letter-spacing:3px;display:flex;flex-direction:column;align-items:center;gap:7px}
.hero .cue span{writing-mode:vertical-rl}
.hero .cue::after{content:'';width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;height:20px}50%{opacity:1;height:38px}}
@media(prefers-reduced-motion:reduce){
  .slide.on img,.hero .sweep,.hero::after,.hero .dust i{animation:none!important}
  .slide.on .slide-txt>*{animation:none!important;opacity:1;transform:none}
}

.strip{background:var(--gold);color:#fff;padding:12px 0;overflow:hidden}
.strip .track{display:flex;gap:44px;width:max-content;animation:marquee 22s linear infinite;
  font-weight:600;font-size:13.5px;letter-spacing:2px;text-transform:uppercase}

/* ---------- Categories ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cat{position:relative;border-radius:var(--radius);overflow:hidden;height:300px;cursor:pointer}
.cat img{width:100%;height:100%;object-fit:cover;transition:.6s}
.cat:hover img{transform:scale(1.1)}
.cat::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.8))}
.cat-info{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;color:#fff}
.cat-info h3{font-size:19px;font-weight:600}
.cat-info span{font-size:12.5px;opacity:.8}

/* ---------- Product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);transition:.35s;position:relative}
.card:hover{box-shadow:var(--shadow);transform:translateY(-6px);border-color:transparent}
.card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.55s}
.card-img .alt{position:absolute;inset:0;opacity:0}
.card:hover .alt{opacity:1}
.card:hover .main{transform:scale(1.06)}
.tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:20px;z-index:3;letter-spacing:.4px}
.tag.badge2{top:auto;bottom:12px;background:#0d0d0f;color:#fff}
.tag.vid{left:auto;right:12px;top:12px;background:rgba(0,0,0,.72);display:flex;align-items:center;gap:5px}
.card-act{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:3;
  opacity:0;transform:translateX(12px);transition:.3s}
.card:hover .card-act{opacity:1;transform:translateX(0)}
.card-act button{width:38px;height:38px;border-radius:50%;border:none;background:var(--card);cursor:pointer;color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,.18);transition:.22s;display:grid;place-items:center;font-size:14px}
.card-act button svg{width:17px;height:17px;fill:currentColor}
.card-act button:hover{background:var(--gold);color:#fff}
.card-body{padding:16px}
.card-body .cat-name{font-size:11.5px;color:var(--grey);letter-spacing:1.2px;text-transform:uppercase}
.card-body h3{font-size:15px;font-weight:600;margin:5px 0 8px;min-height:44px}
.stars{color:var(--gold);font-size:12px;margin-bottom:7px}
.price{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.price .now{font-size:17px;font-weight:700}
.price .was{font-size:13px;color:var(--grey);text-decoration:line-through}
.oos{position:absolute;inset:0;background:rgba(255,255,255,.75);display:grid;place-items:center;z-index:4;
  font-weight:700;letter-spacing:1px;font-size:13px;color:#0d0d0f}
[data-theme="dark"] .oos{background:rgba(0,0,0,.7);color:#fff}

/* ---------- Features ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat-i{text-align:center;padding:32px 18px;border:1px solid var(--line);border-radius:var(--radius);transition:.3s;background:var(--card)}
.feat-i:hover{background:var(--black);color:var(--bg);border-color:var(--black)}
.feat-i .ic{font-size:30px;margin-bottom:12px;color:var(--gold)}
.feat-i h4,
.feat-i h3{font-size:15.5px;font-weight:600;margin-bottom:5px}
.feat-i p{font-size:13px;color:var(--grey)}

.cta{background:#0d0d0f;color:#fff;padding:80px 0;text-align:center;position:relative;overflow:hidden}
[data-theme="dark"] .cta:not(.cta--video){background:#16161c;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta h2{font-family:var(--display);font-size:42px;margin-bottom:14px}
.cta p{opacity:.75;max-width:520px;margin:0 auto 26px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-i{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:var(--card)}
.faq-q{padding:17px 20px;font-weight:600;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-q i{transition:.3s;color:var(--gold)}
.faq-i.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:.35s;padding:0 20px;color:var(--grey);font-size:14px}
.faq-i.open .faq-a{max-height:260px;padding:0 20px 18px}

/* ---------- Reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.3s;background:var(--card)}
.rev:hover{box-shadow:var(--shadow)}
.rev .stars{font-size:14px}
.rev p{font-size:14px;color:var(--text-2);margin:10px 0 16px}
.rev .who{display:flex;align-items:center;gap:11px}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--black);color:var(--gold);display:grid;place-items:center;font-weight:700}
.rev .who b{font-size:14px;display:block}
.rev .who span{font-size:12px;color:var(--grey)}

.news{background:var(--soft);padding:56px 0}
.news-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.news h3{font-family:var(--display);font-size:30px}
.news p{color:var(--grey);font-size:14px}
.news form{display:flex;gap:10px;flex:1;max-width:460px}
.news input{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:50px}

/* ---------- Footer ---------- */
footer{background:#0d0d0f;color:#c9c9d2;padding:64px 0 0}
[data-theme="dark"] footer{background:#0a0a0e;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px;padding-bottom:44px}
footer h4,
footer .ftr-h{color:#fff;font-size:15px;margin-bottom:18px;font-weight:600}
footer a{font-size:14px;display:block;padding:6px 0;transition:.2s}
footer a:hover{color:var(--gold);padding-left:5px}
footer p{font-size:14px;line-height:1.9}
.f-logo{font-family:var(--display);font-size:26px;color:#fff;font-weight:800;margin-bottom:12px}
.f-logo span{color:var(--gold)}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;padding:0}
.socials a svg{width:17px;height:17px;fill:#c9c9d2}
.socials a:hover{background:var(--gold);padding:0}
.socials a:hover svg{fill:#fff}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:13px}

/* ---------- Cart drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--bg);z-index:1000;
  transform:translateX(100%);transition:.35s;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.drawer.open{transform:translateX(0)}
.dr-head{padding:20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.dr-head h3{font-size:17px}
.dr-head .dr-title{font-size:17px}
.dr-body{flex:1;overflow-y:auto;padding:18px}
.dr-foot{padding:20px;border-top:1px solid var(--line)}
.ci{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.ci img{width:74px;height:74px;object-fit:cover;border-radius:9px;background:var(--soft)}
.ci .in{flex:1}
.ci h4{font-size:14px;font-weight:600}
.ci .p{color:var(--gold);font-weight:700;font-size:14px;margin:3px 0 6px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:50px;overflow:hidden}
.qty button{width:30px;height:30px;border:none;background:transparent;cursor:pointer;font-size:15px;color:var(--text)}
.qty button:hover{background:var(--soft)}
.qty span{width:32px;text-align:center;font-size:13px;font-weight:600}
.rm{background:none;border:none;color:var(--red);cursor:pointer;font-size:12px;margin-left:8px}
.empty{text-align:center;padding:50px 20px;color:var(--grey)}
.empty .ic{font-size:44px;margin-bottom:12px;opacity:.3}
.row-line{display:flex;justify-content:space-between;padding:7px 0;font-size:14px}
.row-line.total{font-size:18px;font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}

/* ---------- WhatsApp float (real icon) ---------- */
.wa{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;
  display:grid;place-items:center;z-index:800;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:.3s;animation:pulse 2.4s infinite}
.wa svg{width:32px;height:32px;fill:#fff}
.wa:hover{transform:scale(1.1)}
@keyframes pulse{0%,100%{box-shadow:0 8px 26px rgba(37,211,102,.4)}50%{box-shadow:0 8px 34px rgba(37,211,102,.9)}}

.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,140px);background:#0d0d0f;color:#fff;
  padding:13px 26px;border-radius:50px;z-index:2000;transition:.35s;font-size:14px;font-weight:500}
[data-theme="dark"] .toast{background:#2a2a35;border:1px solid var(--line)}
.toast.show{transform:translate(-50%,0)}

.phead{background:var(--soft);padding:44px 0;text-align:center}
.phead h1{font-family:var(--display);font-size:38px}
.phead .phead-t{font-family:var(--display);font-size:38px}
.phead .crumb{font-size:13.5px;color:var(--grey);margin-top:6px}
.phead .crumb a:hover{color:var(--gold)}

/* ---------- Shop ---------- */
.shop{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.filter{border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:96px;background:var(--card)}
.filter h4,
.filter .filter-h{font-size:15px;margin-bottom:14px;font-weight:600;letter-spacing:0}
.filter label{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;cursor:pointer;color:var(--text-2)}
.filter label:hover{color:var(--gold)}
.filter hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.shop-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.shop-top select,.shop-top input{padding:10px 15px;border:1px solid var(--line);border-radius:50px}
.grid.g3{grid-template-columns:repeat(3,1fr)}

/* ================= PRODUCT PAGE ================= */
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:48px}

/* gallery */
.gal-main{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:1/1;
  cursor:zoom-in;border:1px solid var(--line)}
.gal-main img{width:100%;height:100%;object-fit:cover;transition:transform .18s ease-out}
.gal-main.zooming img{transform:scale(2.3)}
.gal-main video,.gal-main iframe{width:100%;height:100%;border:0;object-fit:cover;background:#000}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#0d0d0f;border:none;cursor:pointer;display:grid;place-items:center;
  font-size:18px;z-index:4;transition:.22s;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.gal-arrow:hover{background:var(--gold);color:#fff}
.gal-arrow.l{left:12px}.gal-arrow.r{right:12px}
.gal-hint{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;
  padding:5px 11px;border-radius:20px;z-index:4;display:flex;align-items:center;gap:6px;pointer-events:none}
.gal-expand{position:absolute;bottom:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;z-index:4;font-size:15px}
.gal-expand:hover{background:var(--gold)}
.thumbs{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.thumbs .th{width:84px;height:84px;border-radius:10px;cursor:pointer;border:2px solid transparent;
  overflow:hidden;background:var(--soft);position:relative;flex:none}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
.thumbs .th.on{border-color:var(--gold)}
.thumbs .th.video::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.45);color:#fff;font-size:19px}

/* lightbox */
.lbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:2000;display:none;align-items:center;justify-content:center}
.lbox.on{display:flex}
.lbox img{max-width:92vw;max-height:86vh;object-fit:contain;transition:transform .25s;cursor:zoom-in}
.lbox img.zoom{transform:scale(2);cursor:zoom-out}
.lbox video,.lbox iframe{width:min(92vw,900px);height:min(86vh,520px);border:0;background:#000}
.lbox .x{position:absolute;top:20px;right:24px;color:#fff;font-size:32px;cursor:pointer;background:none;border:none}
.lbox .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;background:rgba(255,255,255,.12);
  border:none;width:50px;height:50px;border-radius:50%;font-size:24px;cursor:pointer}
.lbox .nav:hover{background:var(--gold)}
.lbox .nav.l{left:22px}.lbox .nav.r{right:22px}
.lbox .cnt{position:absolute;bottom:22px;color:#fff;font-size:13px;opacity:.75}

/* product info */
.pdp h1{font-family:var(--display);font-size:33px;margin:6px 0 10px}
.p-price{display:flex;align-items:center;gap:12px;margin:14px 0;flex-wrap:wrap}
.p-price .now{font-size:29px;font-weight:700;color:var(--red)}
.p-price .was{text-decoration:line-through;color:var(--grey);font-size:17px}
.p-price .save{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:6px}
.viewers{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-2);
  background:var(--soft);padding:10px 15px;border-radius:10px;margin:14px 0}
.viewers b{color:var(--text)}
.viewers svg{width:19px;height:19px;fill:var(--gold);flex:none}
.opts{margin:20px 0}
.opts b.lbl{display:block;font-size:13.5px;margin-bottom:9px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:9px 18px;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;font-size:13.5px;transition:.2s;background:var(--card)}
.chip.on{border-color:var(--black);background:var(--black);color:var(--bg)}
.chip:hover{border-color:var(--gold)}
.buy{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap}
.stockbar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0 4px}
.stockbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}
.info-list{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.info-list div{display:flex;gap:11px;padding:7px 0;font-size:14px;color:var(--text-2)}
.info-list i{color:var(--gold);width:20px;font-style:normal}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.trust span{font-size:12px;background:var(--soft);padding:7px 13px;border-radius:8px;color:var(--text-2)}

/* details tabs */
.dtabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:22px;overflow-x:auto}
.dtab{padding:13px 22px;cursor:pointer;font-weight:600;font-size:14.5px;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--grey)}
.dtab.on{color:var(--text);border-bottom-color:var(--gold)}
.dpane{display:none;animation:fade .3s}
.dpane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dpane ul{margin:12px 0 0 0}
.dpane ul li{padding:8px 0 8px 28px;position:relative;font-size:14.5px;color:var(--text-2);border-bottom:1px solid var(--line)}
.dpane ul li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}
.spec-t{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-t td{padding:11px 14px;border-bottom:1px solid var(--line)}
.spec-t td:first-child{font-weight:600;width:38%;background:var(--soft)}

/* checkout */
.co{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:start}
.form-g{margin-bottom:15px}
.form-g label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.form-g input,.form-g textarea,.form-g select{width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:10px}
.form-g input:focus,.form-g textarea:focus{border-color:var(--gold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.summary{border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:96px;background:var(--soft)}
.pay-opt{border:1.5px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;cursor:pointer;display:flex;gap:11px;align-items:center;background:var(--card)}
.pay-opt.on{border-color:var(--gold)}

@media(max-width:1024px){
  .grid,.cats{grid-template-columns:repeat(3,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .slide-txt h1{font-size:44px}
  .shop{grid-template-columns:1fr}
  .filter{position:static}
  .pdp,.co{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .menu{display:none}.burger{display:block}
  .hero{height:470px}
  .slide-txt h1{font-size:33px}
  .sec-head h2{font-size:28px}
  .grid,.cats,.feat,.grid.g3{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr}
  .cat{height:210px}
  .sec{padding:48px 0}
  .form-row{grid-template-columns:1fr}
  .cta h2{font-size:30px}
  .news-in{flex-direction:column;align-items:flex-start}
  .news form{max-width:100%;width:100%}
  .pdp h1{font-size:26px}
  .thumbs .th{width:66px;height:66px}
}
@media(max-width:480px){
  .grid,.grid.g3{grid-template-columns:1fr 1fr;gap:14px}
  .card-body h3{font-size:13.5px;min-height:38px}
  .price .now{font-size:15px}
  .f-grid{grid-template-columns:1fr}
  .hero-arrow{display:none}
  .buy .btn{width:100%}
  .nav{gap:8px;height:66px}
  .logo{font-size:19px;letter-spacing:.5px}
  .logo small{font-size:7px;letter-spacing:1.6px}
  .ico{width:36px;height:36px;font-size:15px}
  .ico svg{width:17px;height:17px}
  .nav-ico{gap:5px}
  .tgl{width:46px;height:26px}
  .tgl .knob{width:20px;height:20px;font-size:10px}
  [data-theme="dark"] .tgl .knob{left:23px}
  .burger{font-size:20px}
}
@media(max-width:360px){
  .logo{font-size:17px}
  .logo small{display:none}
}

/* ================= AI CHATBOT ================= */
.chat-fab{position:fixed;right:20px;bottom:88px;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#0d0d0f,#3a3a45);color:#fff;display:grid;place-items:center;
  z-index:801;cursor:pointer;border:1.5px solid rgba(201,162,39,.5);
  box-shadow:0 8px 28px rgba(0,0,0,.35);transition:.3s}
.chat-fab:hover{transform:scale(1.08);border-color:var(--gold)}
.chat-fab svg{width:27px;height:27px;fill:var(--gold-light)}
.chat-fab .dot{position:absolute;top:1px;right:1px;width:13px;height:13px;border-radius:50%;
  background:var(--green);border:2px solid #0d0d0f;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.chat-fab.hide{transform:scale(0);opacity:0;pointer-events:none}

.chatbox{position:fixed;right:20px;bottom:20px;width:378px;max-width:calc(100vw - 32px);
  height:min(560px,calc(100vh - 40px));background:var(--bg);border-radius:20px;z-index:1100;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);
  border:1px solid var(--line);transform:translateY(24px) scale(.94);opacity:0;visibility:hidden;
  transition:.34s cubic-bezier(.22,1,.36,1)}
.chatbox.open{transform:none;opacity:1;visibility:visible}
.ch-head{background:linear-gradient(135deg,#0d0d0f,#25252e);color:#fff;padding:15px 17px;
  display:flex;align-items:center;gap:11px;flex:none}
.ch-head .av{width:40px;height:40px;border-radius:50%;background:var(--gold);display:grid;place-items:center;
  font-size:19px;flex:none;position:relative}
.ch-head .av::after{content:'';position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;
  background:var(--green);border:2px solid #16161c}
.ch-head b{font-size:14.5px;display:block;line-height:1.3}
.ch-head span{font-size:11.5px;opacity:.65}
.ch-head .x{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;width:31px;height:31px;
  border-radius:50%;cursor:pointer;font-size:15px;transition:.2s}
.ch-head .x:hover{background:rgba(255,255,255,.28)}
.ch-body{flex:1;overflow-y:auto;padding:16px;background:var(--soft);display:flex;flex-direction:column;gap:11px}
.ch-body::-webkit-scrollbar{width:5px}
.ch-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:13.8px;line-height:1.62;
  animation:pop .3s cubic-bezier(.22,1,.36,1);word-wrap:break-word}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
.msg.bot{background:var(--card);color:var(--text);align-self:flex-start;border-bottom-left-radius:5px;
  border:1px solid var(--line)}
.msg.me{background:var(--black);color:var(--bg);align-self:flex-end;border-bottom-right-radius:5px}
.msg b{font-weight:600}
.msg a{color:var(--gold);text-decoration:underline}
.msg .pcard{display:flex;gap:10px;align-items:center;background:var(--soft);border-radius:11px;
  padding:8px;margin-top:8px;border:1px solid var(--line);transition:.2s}
.msg .pcard:hover{border-color:var(--gold)}
.msg .pcard img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none}
.msg .pcard div{flex:1;min-width:0}
.msg .pcard .n{font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .pcard .pr{font-size:12.5px;color:var(--gold);font-weight:700}
.typing{display:flex;gap:4px;padding:14px 16px;background:var(--card);border-radius:16px;
  border-bottom-left-radius:5px;align-self:flex-start;border:1px solid var(--line)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--grey);animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
.ch-chips{display:flex;gap:7px;padding:0 16px 11px;flex-wrap:wrap;background:var(--soft);flex:none}
.ch-chips button{background:var(--card);border:1px solid var(--line);border-radius:50px;padding:7px 13px;
  font-size:12.2px;cursor:pointer;transition:.2s;color:var(--text)}
.ch-chips button:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.ch-foot{padding:11px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--bg);flex:none}
.ch-foot input{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:50px;font-size:13.5px;
  background:var(--soft)}
.ch-foot input:focus{border-color:var(--gold)}
.ch-foot button{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#fff;border:none;
  cursor:pointer;font-size:16px;flex:none;transition:.2s;display:grid;place-items:center}
.ch-foot button:hover{background:var(--black);color:var(--bg)}
.ch-foot button svg{width:18px;height:18px;fill:currentColor}
@media(max-width:480px){
  .chatbox{right:8px;left:8px;bottom:8px;width:auto;height:min(78vh,540px)}
  .chat-fab{right:16px;bottom:84px;width:52px;height:52px}
  .wa{right:16px;bottom:16px;width:52px;height:52px}
  .wa svg{width:28px;height:28px}
}

/* ---------- Video hero ---------- */
.hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;z-index:1}
.hero iframe.hv{width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-slide{opacity:1!important;visibility:visible!important}
.video-slide::after{content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.2) 74%,rgba(0,0,0,.42) 100%)}
.video-slide .slide-txt>*{animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
.v-mute{position:absolute;bottom:26px;left:26px;z-index:7;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;font-size:16px;transition:.25s}
.v-mute:hover{background:var(--gold);border-color:var(--gold)}
@media(max-width:768px){.v-mute{bottom:20px;left:16px;width:38px;height:38px;font-size:14px}}

/* ================= BRAND LOGO ================= */
.logo{padding:4px 0}
.logo-img{height:60px;width:auto;display:block;object-fit:contain;transition:.25s}
.logo-img--dark{display:none}
[data-theme="dark"] .logo-img{display:none}
[data-theme="dark"] .logo-img--dark{display:block}
.logo:hover .logo-img{transform:scale(1.03)}

.f-logo img{height:60px;width:auto;object-fit:contain;margin-bottom:4px}

@media(max-width:768px){
  .logo-img{height:46px}
  .f-logo img{height:52px}
}
@media(max-width:480px){
  .logo-img{height:40px}
}

/* ==========================================================
   SCROLL ANIMATIONS
   Elements start hidden and animate in when scrolled into view.
   Driven by IntersectionObserver in assets/js/animate.js
   ========================================================== */

/* ---- base states ---- */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim].in{opacity:1}

[data-anim="up"]{transform:translateY(60px)}
[data-anim="down"]{transform:translateY(-42px)}
[data-anim="left"]{transform:translateX(-70px)}
[data-anim="right"]{transform:translateX(70px)}
[data-anim="zoom"]{transform:scale(.82)}
[data-anim="zoom-out"]{transform:scale(1.12)}
[data-anim="flip"]{transform:perspective(900px) rotateX(-22deg);transform-origin:50% 100%}
[data-anim="fade"]{transform:none}
[data-anim="blur"]{filter:blur(11px);transform:scale(1.03)}

[data-anim].in{
  transform:none!important;
  filter:none!important;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1),
             filter .9s ease;
}

/* ---- stagger children (product grids, category tiles…) ---- */
[data-stagger] > *{opacity:0;transform:translateY(48px) scale(.97)}
[data-stagger].in > *{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),
             transform .75s cubic-bezier(.22,1,.36,1);
}
[data-stagger].in > *:nth-child(1){transition-delay:0.06s}
[data-stagger].in > *:nth-child(2){transition-delay:0.15s}
[data-stagger].in > *:nth-child(3){transition-delay:0.24s}
[data-stagger].in > *:nth-child(4){transition-delay:0.33s}
[data-stagger].in > *:nth-child(5){transition-delay:0.42s}
[data-stagger].in > *:nth-child(6){transition-delay:0.51s}
[data-stagger].in > *:nth-child(7){transition-delay:0.6s}
[data-stagger].in > *:nth-child(8){transition-delay:0.69s}
[data-stagger].in > *:nth-child(n+9){transition-delay:0.76s}

/* ---- section heading underline draws itself ---- */
.sec-head .line{transform:scaleX(0);transform-origin:center;transition:transform .7s cubic-bezier(.22,1,.36,1) .22s}
.sec-head.in .line,[data-anim].in .line{transform:scaleX(1)}

/* ---- animated number counters ---- */
[data-count]{font-variant-numeric:tabular-nums}

/* ==========================================================
   MICRO-INTERACTIONS
   ========================================================== */

/* buttons: sheen sweep on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(1px) scale(.985)}

/* product card lift + image zoom */
.card{transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease,border-color .3s}
.card:hover{transform:translateY(-9px)}
.card-img img{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.card:hover .main{transform:scale(1.09)}

/* discount tag pops in */
.card .tag{animation:tagPop .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tagPop{from{opacity:0;transform:scale(.55) translateY(-6px)}to{opacity:1;transform:none}}

/* category tile caption slides up */
.cat-info{transform:translateY(6px);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cat:hover .cat-info{transform:translateY(-4px)}
.cat::after{transition:opacity .45s ease}

/* nav underline grows from centre */
.menu a::after{left:50%;transform:translateX(-50%)}

/* feature tiles */
.feat-i{transition:transform .4s cubic-bezier(.22,1,.36,1),background .35s,color .35s,border-color .35s}
.feat-i:hover{transform:translateY(-7px)}
.feat-i .ic{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.feat-i:hover .ic{transform:scale(1.18) rotate(-7deg)}

/* review cards */
.rev{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.rev:hover{transform:translateY(-6px)}

/* FAQ chevron + smoother open */
.faq-i{transition:border-color .3s,box-shadow .3s}
.faq-i.open{border-color:var(--gold)}
.faq-a{transition:max-height .42s cubic-bezier(.22,1,.36,1),padding .42s ease}

/* thumbnails on the product page */
.thumbs .th{transition:border-color .25s,transform .25s}
.thumbs .th:hover{transform:translateY(-3px)}

/* footer links */
footer a{transition:color .25s,padding-left .25s}

/* scroll progress bar */
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  box-shadow:0 0 10px rgba(201,162,39,.6);transition:width .1s linear}

/* back-to-top */
.to-top{position:fixed;right:20px;bottom:150px;width:46px;height:46px;border-radius:50%;
  background:var(--black);color:var(--bg);border:none;cursor:pointer;z-index:790;
  display:grid;place-items:center;font-size:17px;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.32s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:#fff;transform:translateY(-3px)}

/* page fade-in on load */
body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

@media(max-width:480px){
  .to-top{right:16px;bottom:142px;width:40px;height:40px;font-size:15px}
}

/* Respect the OS "reduce motion" setting — but only when the site has not
   been told to force animations on (html[data-motion="on"]). */
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) [data-anim],
  html:not([data-motion="on"]) [data-stagger] > *{opacity:1!important;transform:none!important;filter:none!important}
  html:not([data-motion="on"]) .sec-head .line{transform:scaleX(1)!important}
  html:not([data-motion="on"]) body{animation:none}
  html:not([data-motion="on"]) .btn::after{display:none}
}
/* Site setting explicitly OFF — no motion for anyone. */
html[data-motion="off"] [data-anim],
html[data-motion="off"] [data-stagger] > *{opacity:1!important;transform:none!important;filter:none!important}
html[data-motion="off"] .sec-head .line{transform:scaleX(1)!important}
html[data-motion="off"] .btn::after{display:none}

/* ---------- Animated stats band ---------- */
.stats-band{background:#0d0d0f;padding:56px 0;position:relative;overflow:hidden}
[data-theme="dark"] .stats-band{background:#16161c;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 50%,rgba(201,162,39,.16),transparent 55%),
             radial-gradient(circle at 80% 50%,rgba(201,162,39,.11),transparent 55%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2}
.stat-box{text-align:center;color:#fff}
.stat-box b{display:block;font-family:var(--display);font-size:44px;font-weight:700;
  line-height:1.1;color:var(--gold-light);margin-bottom:4px}
.stat-box span{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;opacity:.72}
@media(max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .stat-box b{font-size:34px}
  .stats-band{padding:42px 0}
}
@media(max-width:380px){.stat-box span{font-size:11px;letter-spacing:1px}}

/* ---------- CTA band with light background video ---------- */
.cta--video{position:relative;overflow:hidden;isolation:isolate;padding:120px 0;
  background:#efece6;color:#12121a}
.cta__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Cream wash: strong behind the text, clear on the right so the
   footage stays visible. */
.cta__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(252,250,246,.95) 0%,
    rgba(252,250,246,.90) 26%,
    rgba(252,250,246,.62) 45%,
    rgba(252,250,246,.18) 62%,
    rgba(252,250,246,0) 78%)}
.cta--video::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 66% 50%,transparent 46%,rgba(120,110,95,.16) 100%)}
.cta--video .container{position:relative;z-index:2;text-align:left;max-width:1280px}
.cta--video .cta-inner{max-width:620px}
.cta--video h2{color:#12121a;text-shadow:0 1px 16px rgba(252,250,246,.85)}
.cta--video h2 em{font-style:normal;color:var(--gold)}
.cta--video p{color:#3f3f4a;opacity:1;margin-left:0;text-shadow:0 1px 12px rgba(252,250,246,.85)}
.cta--video .small-label{color:var(--gold)!important}
@media(max-width:900px){
  .cta--video .container{text-align:center}
  .cta--video .cta-inner{max-width:none;margin:0 auto}
  .cta__veil{background:linear-gradient(180deg,rgba(252,250,246,.92),rgba(252,250,246,.75))}
}
@media(max-width:768px){.cta--video{padding:80px 0}}

/* ==========================================================
   MOBILE FIXES
   ----------------------------------------------------------
   Problem found by testing the live site on real phone sizes:
   the three floating buttons (WhatsApp, chatbot, back-to-top)
   sat on top of the "Add to Cart" button in the right-hand
   product column. On a 360px Galaxy and a 390px iPhone the
   button was literally unclickable — elementFromPoint returned
   the chat bubble instead of the button.

   Fixes below:
     1. Smaller floating buttons on phones, stacked tighter.
     2. Extra bottom padding on product grids so the last row
        can always scroll clear of them.
     3. Tap targets raised to ~44px, which is the size Apple
        and Google both recommend for a finger.
   ========================================================== */
@media (max-width: 640px) {

  /* 1. Tighter, smaller floating stack */
  .wa        { right: 12px; bottom: 12px;  width: 48px; height: 48px; }
  .wa svg    { width: 25px; height: 25px; }
  .chat-fab  { right: 12px; bottom: 68px;  width: 48px; height: 48px; }
  .chat-fab svg { width: 24px; height: 24px; }
  .to-top    { right: 12px; bottom: 124px; width: 40px; height: 40px; font-size: 14px; }

  /* 2. Let the last row of cards scroll past the floating buttons */
  .grid, .cats, .feat { padding-bottom: 76px; }

  /* 3. Comfortable finger targets */
  .card .btn,
  .card-body .btn      { min-height: 46px; }
  .nav-ico .ico        { width: 42px; height: 42px; }
  /* Keep the original flex row — only make the row taller so it is
     easy to tap. Switching to display:block put the radio button on
     its own line and broke the filter list. */
  .filter label        { padding: 10px 0; }
  .thumbs .th          { width: 62px; height: 62px; }

  /* Form controls: 16px stops iOS Safari zooming in on focus */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  textarea { min-height: 92px; }
}

/* Very narrow phones (Galaxy A-series, older Androids) */
@media (max-width: 380px) {
  .wa       { width: 44px; height: 44px; }
  .chat-fab { width: 44px; height: 44px; bottom: 62px; }
  .to-top   { bottom: 112px; }
  .grid, .cats, .feat { gap: 12px; }
}

/* The mobile menu's theme switch used to be an <a> with no href, which
   search engines report as an uncrawlable link. It is a button now, so
   give it the same appearance as the surrounding menu links. */
.mnav .mnav-btn{
  display:block;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);padding:14px 0;font-weight:500;
  font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;
}

/* ----------------------------------------------------------
   Touch targets on the product card's floating shortcuts.

   The three round buttons over each product image (view, add to cart,
   WhatsApp) were 38px. Google's guidance and every accessibility audit
   ask for 44px, and on a phone a 38px circle sitting next to two others
   is genuinely easy to miss — a customer aiming for "add to cart" hits
   "WhatsApp" and leaves the shop instead of buying.

   The full-width "Add to Cart" under each card is already 46px, so this
   only affects the shortcuts.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .card-act        { gap: 10px; right: 10px; bottom: 10px; }
  .card-act button { width: 46px; height: 46px; }
  .card-act button svg { width: 19px; height: 19px; }
  /* They fade in on hover, which never happens on a touch screen —
     show them permanently instead of leaving a dead-looking image. */
  .card-act        { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   Skip to content
   ----------------------------------------------------------
   Someone navigating by keyboard would otherwise have to tab through
   the announcement bar, the logo and every menu item on every single
   page before reaching the products. This link is the first thing in
   the tab order and jumps straight past all of it. It stays invisible
   until focused, so nothing changes visually for anyone else.
---------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--black,#111);color:#fff;padding:12px 20px;
  border-radius:0 0 8px 0;font-size:14px;font-weight:600;
}
.skip-link:focus{left:0}