/* =====================================================================
   ৯ এ Naru — Premium Storefront Theme
   Palette taken from the brand logo: indigo → magenta → orange on ivory
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --ink:#171310;
  --ink-2:#3d3630;
  --ink-3:#7a6f66;
  --cream:#f6f2e7;
  --cream-2:#fbf9f3;
  --paper:#ffffff;
  --line:rgba(23,19,16,.10);
  --line-2:rgba(23,19,16,.06);

  --indigo:#2b2a9c;
  --violet:#6a2bb0;
  --magenta:#c4197c;
  --rose:#e8306a;
  --orange:#f2652a;
  --amber:#f6a723;
  --gold:#c9a227;
  --green:#2f8f5b;

  --grad: linear-gradient(115deg,var(--indigo) 0%,var(--violet) 22%,var(--magenta) 48%,var(--rose) 66%,var(--orange) 84%,var(--amber) 100%);
  --grad-soft: linear-gradient(115deg,rgba(43,42,156,.10),rgba(196,25,124,.10),rgba(242,101,42,.10));

  /* type */
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Inter","Noto Sans Bengali","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-bn:"Noto Serif Bengali","Playfair Display",serif;
  --f-hi:"Noto Serif Devanagari","Playfair Display",serif;

  /* layout */
  --wrap:1240px;
  --r-sm:10px; --r:16px; --r-lg:26px; --r-xl:38px;
  --sh-1:0 2px 10px rgba(23,19,16,.05);
  --sh-2:0 14px 40px -14px rgba(23,19,16,.18);
  --sh-3:0 30px 70px -25px rgba(23,19,16,.30);
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --header-h:76px;
}

/* language-aware display font */
html[lang="bn"]{ --f-display:var(--f-bn); }
html[lang="hi"]{ --f-display:var(--f-hi); }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* `clip` — NOT `hidden`. overflow-x:hidden on body turns it into a scroll
     container, which silently kills position:sticky on the header (the menu
     then scrolls away on mobile and you have to scroll back up to reach it).
     overflow-x:clip stops sideways scrolling without that side effect. */
  overflow-x:clip;
}
@supports not (overflow-x: clip){
  body{overflow-x:hidden;}   /* pre-2021 browsers only */
}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}
::selection{background:var(--magenta);color:#fff;}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--cream-2);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--magenta),var(--orange));border-radius:20px;border:3px solid var(--cream-2);}

/* ---------- 3. UTILITIES ---------- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;}
.wrap-lg{width:min(100% - 40px,1440px);margin-inline:auto;}
.sec{padding:clamp(56px,7vw,110px) 0;}
.center{text-align:center;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hide{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.12;letter-spacing:-.015em;}
h1{font-size:clamp(2.4rem,5.6vw,4.6rem);}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem);}
h3{font-size:clamp(1.25rem,2vw,1.7rem);}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px;}
.sec-head{max-width:660px;margin:0 auto clamp(34px,4vw,60px);text-align:center;}
.sec-head p{color:var(--ink-3);margin-top:12px;font-size:1.03rem;}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-size:.93rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .3s;
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-2);color:#fff;}
.btn:hover::before{transform:translateY(0);}
.btn:active{transform:translateY(-1px) scale(.99);}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px rgba(196,25,124,.65);}
.btn-grad::before{background:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn-ghost:hover{color:#fff;}
.btn-light{background:#fff;color:var(--ink);}
.btn-sm{padding:10px 20px;font-size:.85rem;}
.btn-lg{padding:18px 40px;font-size:1rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;pointer-events:none;}
.btn .ico{width:18px;height:18px;flex:none;}

/* arrow slide */
.btn .arw{transition:transform .4s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}

/* ---------- 5. PRELOADER ---------- */
#preloader{
  position:fixed;inset:0;z-index:9999;background:var(--cream);
  display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden;}
.pre-inner{text-align:center;}
.pre-logo{width:130px;margin:0 auto 22px;animation:preFloat 2.4s ease-in-out infinite;}
@keyframes preFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.03)}}
.pre-bar{width:190px;height:3px;background:var(--line);border-radius:9px;overflow:hidden;margin:0 auto;}
.pre-bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;transition:width .3s linear;}
.pre-txt{margin-top:14px;font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- 6. CURSOR ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;mix-blend-mode:multiply;}
.cursor-dot{width:7px;height:7px;background:var(--magenta);transform:translate(-50%,-50%);}
.cursor-ring{width:38px;height:38px;border:1.5px solid rgba(196,25,124,.45);transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,border-color .3s;}
.cursor-ring.grow{width:64px;height:64px;background:rgba(196,25,124,.10);border-color:transparent;}
@media (hover:none),(max-width:1024px){.cursor-dot,.cursor-ring{display:none;}}

/* ---------- 7. ANNOUNCEMENT BAR ---------- */
.announce{background:var(--ink);color:#f4ece2;font-size:.78rem;letter-spacing:.06em;overflow:hidden;position:relative;contain:content;}
.announce .track{
  display:flex;gap:60px;white-space:nowrap;padding:9px 0;width:max-content;
  animation:marq 60s linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);
}
.announce span{display:inline-flex;align-items:center;gap:10px;}
.announce span::after{content:"✦";color:var(--amber);}
/* No pause-on-hover: while you scroll, the strip slides under a stationary
   pointer and :hover flips on and off, restarting the animation each time. */

/* translate3d keeps it on the GPU — translateX alone re-rasterises the text
   every frame on some browsers, which reads as flicker. */
@keyframes marq{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}

/* ---------- 8. HEADER ---------- */
.header{position:sticky;top:0;z-index:900;transition:box-shadow .4s,background .4s;}
.header-in{
  background:rgba(246,242,231,.72);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.header.stuck .header-in{background:rgba(251,249,243,.92);box-shadow:0 6px 30px -18px rgba(23,19,16,.5);}
.nav{display:flex;align-items:center;gap:28px;height:var(--header-h);flex-wrap:nowrap;min-width:0;}
.brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;}
.brand img{height:46px;width:auto;transition:transform .5s var(--ease-back);}
.brand:hover img{transform:scale(1.06) rotate(-2deg);}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.brand-txt b{font-family:var(--f-display);font-size:1.12rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-txt small{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.menu{display:flex;align-items:center;gap:4px;margin-inline:auto;}
.menu a{
  position:relative;padding:9px 15px;border-radius:100px;font-size:.92rem;font-weight:500;
  transition:color .3s,background .3s;
}
.menu a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.menu a:hover::after,.menu a.active::after{transform:scaleX(1);}
.menu a.active{color:var(--magenta);}

.nav-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  transition:background .3s,transform .35s var(--ease-back);
}
.icon-btn:hover{background:rgba(23,19,16,.06);transform:translateY(-2px);}
.icon-btn svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.6;fill:none;}
.cart-count{
  position:absolute;top:2px;right:1px;min-width:19px;height:19px;padding:0 5px;
  background:var(--grad);color:#fff;font-size:.66rem;font-weight:700;
  border-radius:20px;display:grid;place-items:center;box-shadow:0 3px 10px -3px rgba(196,25,124,.9);
}
.cart-count.bump{animation:bump .55s var(--ease-back);}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}

/* language switcher */
.lang{position:relative;}
.lang-btn{
  display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:100px;
  box-shadow:inset 0 0 0 1.4px var(--line);font-size:.84rem;font-weight:600;
  transition:box-shadow .3s,transform .3s var(--ease-back);
}
.lang-btn:hover{box-shadow:inset 0 0 0 1.4px var(--magenta);transform:translateY(-2px);}
.lang-btn .globe{width:16px;height:16px;stroke:var(--magenta);stroke-width:1.7;fill:none;}
.lang-btn .chev{width:11px;height:11px;stroke:var(--ink-3);stroke-width:2;fill:none;transition:transform .35s;}
.lang.open .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 12px);right:0;min-width:186px;padding:8px;
  background:var(--paper);border-radius:var(--r);box-shadow:var(--sh-3);border:1px solid var(--line-2);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.96);transform-origin:top right;
  transition:opacity .35s var(--ease),transform .45s var(--ease-back),visibility .35s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.lang-menu a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:.92rem;
  transition:background .25s,transform .25s;
}
.lang-menu a:hover{background:var(--grad-soft);transform:translateX(3px);}
.lang-menu a.on{background:var(--grad-soft);font-weight:600;}
.lang-menu .tag{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;
}
.lang-menu .tick{margin-left:auto;color:var(--magenta);font-size:.9rem;}

/* burger — flex column so the three bars centre reliably inside the circle */
.burger{
  display:none;flex:none;width:42px;height:42px;border-radius:50%;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;transition:background .3s;
}
.burger:hover{background:rgba(23,19,16,.06);}
.burger i{display:block;width:19px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s;}
.burger.on i:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.burger.on i:nth-child(2){opacity:0;}
.burger.on i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* mobile drawer */
.mnav{
  /* `top` is set by JS to the header's real bottom edge, because the
     announcement bar above it scrolls away. This value is only the fallback. */
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:880;background:var(--cream-2);
  padding:24px 24px 40px;transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.mnav.on{opacity:1;visibility:visible;transform:none;}
.mnav a{display:block;padding:16px 4px;font-family:var(--f-display);font-size:1.6rem;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(16px);}
.mnav.on a{animation:mIn .55s var(--ease) forwards;}
@keyframes mIn{to{opacity:1;transform:none;}}

/* ---------- 9. LANGUAGE MORPH OVERLAY ---------- */
#langfx{position:fixed;inset:0;z-index:9500;pointer-events:none;display:grid;place-items:center;opacity:0;visibility:hidden;}
#langfx.on{opacity:1;visibility:visible;pointer-events:all;}
#langfx .veil{position:absolute;inset:0;background:var(--cream);clip-path:circle(0% at var(--fx-x,50%) var(--fx-y,50%));transition:clip-path .85s var(--ease);}
#langfx.on .veil{clip-path:circle(150% at var(--fx-x,50%) var(--fx-y,50%));}
#langfx .word{
  position:relative;font-family:var(--f-display);font-size:clamp(2.2rem,7vw,5rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(26px) scale(.94);filter:blur(8px);
}
#langfx.on .word{animation:fxWord 1s .18s var(--ease) forwards;}
@keyframes fxWord{50%{opacity:1;transform:none;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
#langfx .sparks{position:absolute;inset:0;overflow:hidden;}
#langfx .sparks i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--grad);opacity:0;}
#langfx.on .sparks i{animation:spark 1.1s var(--ease) forwards;}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.5)}}

/* soft language swap on text nodes */
.lang-swap{animation:langSwap .75s var(--ease) both;}
@keyframes langSwap{
  0%{opacity:0;transform:translateY(14px);filter:blur(6px);}
  100%{opacity:1;transform:none;filter:blur(0);}
}

/* ---------- 10. HERO ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(50px,7vw,96px) 0 clamp(60px,8vw,120px);}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;will-change:transform;}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle,#c4197c,transparent 68%);top:-160px;left:-140px;animation:float1 18s ease-in-out infinite;}
.blob.b2{width:470px;height:470px;background:radial-gradient(circle,#f2652a,transparent 68%);bottom:-180px;right:-110px;animation:float2 22s ease-in-out infinite;}
.blob.b3{width:380px;height:380px;background:radial-gradient(circle,#2b2a9c,transparent 70%);top:32%;right:24%;opacity:.24;animation:float1 26s ease-in-out infinite reverse;}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,40px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-36px)}}
.grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;}
.hero h1{margin-bottom:20px;}
/* The mask that makes each line slide up. The padding/negative-margin pair
   widens the clip box WITHOUT changing layout, so Bengali matras and Latin
   descenders are no longer sliced off by overflow:hidden. */
.hero h1 .ln{display:block;overflow:hidden;padding:.14em .08em;margin:-.14em -.08em;}
.hero h1 .ln>span{display:block;transform:translateY(125%);animation:lineUp .95s var(--ease) forwards;}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s;}
.hero h1 .ln:nth-child(3)>span{animation-delay:.2s;}
@keyframes lineUp{to{transform:none;}}
.hero p.lede{font-size:clamp(1rem,1.25vw,1.14rem);color:var(--ink-2);max-width:52ch;
  opacity:0;animation:fadeUp .9s .38s var(--ease) forwards;}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;opacity:0;animation:fadeUp .9s .5s var(--ease) forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hero-trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s .62s var(--ease) forwards;}
.hero-trust div{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--ink-2);}
.hero-trust svg{width:19px;height:19px;stroke:var(--magenta);stroke-width:1.7;fill:none;flex:none;}

/* hero visual */
.hero-art{position:relative;}
.hero-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  aspect-ratio:4/4.4;background:var(--grad-soft);
  opacity:0;transform:translateY(34px) scale(.96);animation:fadeUp 1.1s .3s var(--ease) forwards;
}
.hero-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease);}
.hero-card:hover img{transform:scale(1);}
.hero-ring{
  position:absolute;inset:-26px;border-radius:50%;border:1px dashed rgba(196,25,124,.32);
  animation:spin 42s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-chip{
  position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-radius:100px;padding:11px 18px;box-shadow:var(--sh-2);font-size:.83rem;font-weight:600;
  display:flex;align-items:center;gap:9px;
}
/* Pinned to the actual corners of the photo, just outside it, so they never
   sit on top of the product. */
.hero-chip.c1{top:-16px;left:-16px;animation:bob 5s ease-in-out infinite;}
.hero-chip.c2{bottom:-16px;right:-16px;animation:bob 6.4s ease-in-out .8s infinite;}
.hero-chip b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1rem;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* hero slider dots */
.hero-dots{display:flex;gap:8px;margin-top:26px;}
.hero-dots button{width:26px;height:4px;border-radius:6px;background:var(--line);transition:background .4s,width .4s;}
.hero-dots button.on{width:46px;background:var(--grad);}

/* ---------- 11. MARQUEE STRIP ---------- */
.strip{background:var(--ink);color:#f0e7dc;padding:16px 0;overflow:hidden;contain:content;}
.strip .track{
  display:flex;gap:52px;width:max-content;
  animation:marq 55s linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);
}
.strip span{font-family:var(--f-display);font-size:1.25rem;display:flex;align-items:center;gap:52px;white-space:nowrap;}
.strip span::after{content:"◆";font-size:.7rem;color:var(--amber);}

/* ---------- 12. USP ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.usp{
  background:var(--paper);border-radius:var(--r-lg);padding:30px 26px;border:1px solid var(--line-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);position:relative;overflow:hidden;
}
.usp::after{content:"";position:absolute;inset:auto -30% -60% -30%;height:120px;background:var(--grad);
  filter:blur(50px);opacity:0;transition:opacity .5s;}
.usp:hover{transform:translateY(-8px);box-shadow:var(--sh-2);}
.usp:hover::after{opacity:.16;}
.usp .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--grad-soft);margin-bottom:18px;}
.usp .ic svg{width:25px;height:25px;stroke:var(--magenta);stroke-width:1.6;fill:none;}
.usp h3{font-size:1.08rem;margin-bottom:7px;}
.usp p{font-size:.9rem;color:var(--ink-3);}

/* ---------- 13. PRODUCT CARD ---------- */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(18px,2vw,30px);}
.card{
  position:relative;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-10px);box-shadow:var(--sh-3);}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--grad-soft);}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s;}
.card:hover .card-media img{transform:scale(1.09);}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,19,16,.42),transparent 46%);opacity:0;transition:opacity .5s;}
.card:hover .card-media::after{opacity:1;}

.badges{position:absolute;top:13px;left:13px;display:flex;flex-direction:column;gap:6px;z-index:2;}
.badge{
  padding:5px 11px;border-radius:100px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ink);color:#fff;
}
.badge.off{background:var(--grad);}
.badge.new{background:var(--green);}
.badge.oos{background:#8a8a8a;}

.wish{position:absolute;top:13px;right:13px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;opacity:0;transform:translateX(10px);
  transition:opacity .4s,transform .4s,background .3s;}
.card:hover .wish{opacity:1;transform:none;}
.wish:hover{background:#fff;}
.wish svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.7;fill:none;}
.wish.on svg{fill:var(--rose);stroke:var(--rose);}

.quick{
  position:absolute;left:13px;right:13px;bottom:13px;z-index:2;
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.card:hover .quick{opacity:1;transform:none;}

.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1;}
.card-cat{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);}
.card h3{font-size:1.07rem;line-height:1.3;}
.card h3 a{background-image:var(--grad);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease);}
.card:hover h3 a{background-size:100% 2px;}
.card-short{font-size:.85rem;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.price{display:flex;align-items:baseline;gap:8px;}
.price b{font-size:1.16rem;font-family:var(--f-display);}
.price s{font-size:.85rem;color:var(--ink-3);}
.stars{display:flex;gap:1px;font-size:.82rem;}
.star{color:var(--line);}
.star.on,.star.half{color:var(--amber);}

.add-btn{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease-back),background .4s;
}
.add-btn:hover{transform:scale(1.12) rotate(90deg);background:var(--magenta);}
.add-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;}

/* ---------- 14. CATEGORY TILES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;}
.cat{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/3.6;
  display:flex;align-items:flex-end;padding:22px;color:#fff;isolation:isolate;
  transition:transform .6s var(--ease);
}
.cat:hover{transform:translateY(-8px);}
.cat img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.cat:hover img{transform:scale(1.1);}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(23,19,16,.85),rgba(23,19,16,.15) 62%);}
.cat h3{font-size:1.2rem;}
.cat span{font-size:.78rem;opacity:.8;display:block;margin-top:3px;}

/* ---------- 15. STORY ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;}
.story-img{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--sh-3);}
.story-img img{width:100%;height:100%;object-fit:cover;}
.story-badge{
  position:absolute;bottom:-22px;right:-14px;background:var(--paper);border-radius:22px;padding:18px 22px;
  box-shadow:var(--sh-2);text-align:center;
}
.story-badge b{display:block;font-family:var(--f-display);font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.story-badge span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- 16. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;text-align:center;}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2.1rem,4vw,3.2rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- 17. TESTIMONIALS ---------- */
.tst-wrap{position:relative;overflow:hidden;}
.tst-track{display:flex;gap:22px;transition:transform .8s var(--ease);}
.tst{
  flex:0 0 calc(33.333% - 15px);background:var(--paper);border-radius:var(--r-lg);padding:32px 28px;
  border:1px solid var(--line-2);position:relative;
}
.tst::before{content:"”";position:absolute;top:6px;right:24px;font-family:var(--f-display);font-size:5rem;color:var(--line);line-height:1;}
.tst p{font-size:.96rem;color:var(--ink-2);margin:14px 0 18px;}
.tst .who{display:flex;align-items:center;gap:12px;}
.tst .av{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;}
.tst .who b{display:block;font-size:.93rem;}
.tst .who span{font-size:.76rem;color:var(--ink-3);}
.tst-nav{display:flex;gap:9px;justify-content:center;margin-top:30px;}
.tst-nav button{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--line);display:grid;place-items:center;transition:background .3s,transform .3s;}
.tst-nav button:hover{background:var(--ink);transform:translateY(-2px);}
.tst-nav button:hover svg{stroke:#fff;}
.tst-nav svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.8;fill:none;transition:stroke .3s;}

/* ---------- 18. NEWSLETTER ---------- */
.news{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--ink);color:#f5ede3;padding:clamp(40px,6vw,72px);text-align:center;}
.news::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:.22;}
.news>*{position:relative;}
.news h2{color:#fff;}
.news p{color:rgba(255,255,255,.72);max-width:46ch;margin:12px auto 28px;}
.news form{display:flex;gap:10px;max-width:470px;margin:0 auto;flex-wrap:wrap;}
.news input{flex:1;min-width:210px;padding:15px 22px;border-radius:100px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff;}
.news input::placeholder{color:rgba(255,255,255,.5);}
.news input:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.14);}

/* ---------- 19. FOOTER ---------- */
.footer{background:var(--cream-2);border-top:1px solid var(--line-2);padding-top:clamp(48px,6vw,80px);}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:46px;}
.footer h4{font-family:var(--f-body);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;}
.footer li+li{margin-top:10px;}
.footer li a{font-size:.92rem;color:var(--ink-2);transition:color .3s,padding-left .3s;}
.footer li a:hover{color:var(--magenta);padding-left:5px;}
.f-about p{font-size:.92rem;color:var(--ink-3);margin:16px 0 20px;max-width:38ch;}
.f-social{display:flex;gap:9px;}
.f-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.3px var(--line);transition:background .35s,transform .35s;}
.f-social a:hover{background:var(--grad);transform:translateY(-3px);}
.f-social a:hover svg{stroke:#fff;}
.f-social svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.6;fill:none;}
.f-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);}
.f-contact svg{width:18px;height:18px;stroke:var(--magenta);stroke-width:1.6;fill:none;flex:none;margin-top:3px;}
.f-bot{border-top:1px solid var(--line-2);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;color:var(--ink-3);}
.pay-icons{display:flex;gap:8px;align-items:center;}
.pay-icons span{padding:4px 9px;border-radius:6px;background:var(--paper);border:1px solid var(--line-2);font-size:.68rem;font-weight:600;}

/* ---------- 20. PAGE HEAD ---------- */
.phead{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(30px,4vw,50px);text-align:center;overflow:hidden;}
.phead::before{content:"";position:absolute;inset:0;background:var(--grad-soft);z-index:-1;}
.crumbs{display:flex;gap:8px;justify-content:center;font-size:.82rem;color:var(--ink-3);margin-top:12px;}
.crumbs a:hover{color:var(--magenta);}

/* ---------- 21. FORMS ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:7px;color:var(--ink-2);}
.field label .req{color:var(--rose);}
.inp{
  width:100%;padding:14px 17px;border-radius:13px;background:var(--paper);
  border:1.4px solid var(--line);transition:border-color .3s,box-shadow .3s,transform .3s;
}
.inp:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(196,25,124,.10);}
.inp.err{border-color:var(--rose);box-shadow:0 0 0 4px rgba(232,48,106,.10);}
textarea.inp{min-height:120px;resize:vertical;}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6f66' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;}
.err-msg{font-size:.78rem;color:var(--rose);margin-top:5px;display:none;}
.field.has-err .err-msg{display:block;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}

/* radio card */
.pay-opt{display:block;position:relative;cursor:pointer;margin-bottom:12px;}
.pay-opt input{position:absolute;opacity:0;}
.pay-opt .box{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);
  border:1.6px solid var(--line);background:var(--paper);transition:border-color .35s,box-shadow .35s,transform .35s;
}
.pay-opt input:checked+.box{border-color:var(--magenta);box-shadow:0 0 0 4px rgba(196,25,124,.09);transform:translateY(-2px);}
.pay-opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:2px;position:relative;transition:border-color .3s;}
.pay-opt input:checked+.box .dot{border-color:var(--magenta);}
.pay-opt input:checked+.box .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grad);}
.pay-opt b{display:block;font-size:.98rem;}
.pay-opt small{color:var(--ink-3);font-size:.84rem;}

/* ---------- 22. CART / TABLE ---------- */
.cart-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:34px;align-items:start;}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-2);align-items:center;}
.cart-row img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-sm);}
.qty{display:inline-flex;align-items:center;border-radius:100px;box-shadow:inset 0 0 0 1.4px var(--line);overflow:hidden;}
.qty button{width:36px;height:38px;display:grid;place-items:center;transition:background .3s;}
.qty button:hover{background:var(--grad-soft);}
.qty input{width:44px;height:38px;text-align:center;border:0;background:transparent;font-weight:600;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.summary{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px;position:sticky;top:calc(var(--header-h) + 18px);}
.summary h3{font-size:1.2rem;margin-bottom:18px;}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:.94rem;}
.sum-row.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:16px;font-size:1.2rem;font-family:var(--f-display);font-weight:700;}
.sum-row .free{color:var(--green);font-weight:600;}
.sum-row.disc span:last-child{color:var(--green);}
.coupon-row{display:flex;gap:8px;margin:16px 0;}
.coupon-row .inp{flex:1;}
.ship-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:6px 0 14px;}
.ship-bar i{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .8s var(--ease);}

/* ---------- 23. PRODUCT PAGE ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,58px);align-items:start;}
.pdp-media{position:sticky;top:calc(var(--header-h) + 20px);}
.pdp-main{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1;background:var(--grad-soft);box-shadow:var(--sh-2);}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;}
.pdp-thumbs button{width:74px;height:74px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s,transform .3s;}
.pdp-thumbs button.on,.pdp-thumbs button:hover{box-shadow:inset 0 0 0 2px var(--magenta);transform:translateY(-3px);}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover;}
.pdp h1{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:10px 0 12px;}
.pdp .price b{font-size:1.9rem;}
.pdp-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0;}
.pdp-meta div{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;padding:13px 16px;}
.pdp-meta span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;}
.pdp-meta b{font-size:.95rem;}
.pdp-buy{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0;}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:34px 0 20px;flex-wrap:wrap;}
.tabs button{padding:11px 18px;font-size:.92rem;font-weight:600;color:var(--ink-3);position:relative;transition:color .3s;}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .4s var(--ease);}
.tabs button.on{color:var(--ink);}
.tabs button.on::after{transform:scaleX(1);}
.tab-body{display:none;animation:fadeUp .5s var(--ease);}
.tab-body.on{display:block;}
.trust-list{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.trust-list div{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--ink-2);}
.trust-list svg{width:18px;height:18px;stroke:var(--green);stroke-width:1.8;fill:none;flex:none;}

/* ---------- 24. TRACKING TIMELINE ---------- */
.timeline{position:relative;padding-left:34px;margin:24px 0;}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line);}
.tl-item{position:relative;padding:0 0 26px;}
.tl-item::before{
  content:"";position:absolute;left:-28px;top:4px;width:20px;height:20px;border-radius:50%;
  background:var(--cream);box-shadow:inset 0 0 0 2px var(--line);
}
.tl-item.done::before{background:var(--grad);box-shadow:0 0 0 4px rgba(196,25,124,.14);}
.tl-item.now::before{background:var(--grad);box-shadow:0 0 0 5px rgba(196,25,124,.18);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(196,25,124,.18)}50%{box-shadow:0 0 0 11px rgba(196,25,124,.04)}}
.tl-item b{display:block;font-size:1rem;}
.tl-item span{font-size:.82rem;color:var(--ink-3);}
.tl-item.pending b{color:var(--ink-3);}

/* ---------- 25. TOAST ---------- */
#toasts{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:9600;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:100px;
  background:var(--ink);color:#fff;font-size:.9rem;box-shadow:var(--sh-3);
  animation:toastIn .5s var(--ease-back),toastOut .4s var(--ease) 3.1s forwards;pointer-events:all;
}
.toast.ok .dotc{background:#4ade80;}
.toast.err{background:#a11a3a;}
.toast .dotc{width:8px;height:8px;border-radius:50%;background:#fff;}
@keyframes toastIn{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.96)}}

/* ---------- 26. CART DRAWER ---------- */
#drawer{position:fixed;inset:0;z-index:950;visibility:hidden;}
#drawer.on{visibility:visible;}
#drawer .scrim{position:absolute;inset:0;background:rgba(23,19,16,.42);opacity:0;transition:opacity .45s;backdrop-filter:blur(3px);}
#drawer.on .scrim{opacity:1;}
#drawer .panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--cream-2);
  transform:translateX(102%);transition:transform .55s var(--ease);display:flex;flex-direction:column;
  box-shadow:var(--sh-3);
}
#drawer.on .panel{transform:none;}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line-2);}
.dr-body{flex:1;overflow-y:auto;padding:8px 24px;}
.dr-foot{padding:20px 24px;border-top:1px solid var(--line-2);background:var(--paper);}
.dr-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2);align-items:center;}
.dr-row img{width:64px;height:64px;object-fit:cover;border-radius:10px;}
.dr-row b{font-size:.9rem;display:block;}
.dr-row small{color:var(--ink-3);font-size:.8rem;}

/* ---------- 27. REVEAL ANIMATIONS ---------- */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-rv="left"]{transform:translateX(-38px);}
[data-rv="right"]{transform:translateX(38px);}
[data-rv="zoom"]{transform:scale(.93);}
[data-rv="mask"]{clip-path:inset(0 100% 0 0);opacity:1;transform:none;transition:clip-path 1.1s var(--ease);}
.rv-in[data-rv]{opacity:1;transform:none;}
.rv-in[data-rv="mask"]{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important;}
}

/* split text */
.split .ch{display:inline-block;opacity:0;transform:translateY(20px) rotate(4deg);}
.split.rv-in .ch{animation:chIn .7s var(--ease) forwards;}
@keyframes chIn{to{opacity:1;transform:none;}}

/* ---------- 28. EMPTY / ALERT ---------- */
.empty{text-align:center;padding:70px 20px;}
.empty svg{width:74px;height:74px;stroke:var(--line);stroke-width:1.2;fill:none;margin:0 auto 20px;}
.alert{padding:14px 18px;border-radius:13px;font-size:.92rem;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;}
.alert.ok{background:rgba(47,143,91,.1);color:#1d6b41;}
.alert.err{background:rgba(232,48,106,.1);color:#a11a3a;}
.alert.info{background:var(--grad-soft);color:var(--ink-2);}

/* ---------- 29. CHATBOT ---------- */
#chatfab{
  position:fixed;right:22px;bottom:22px;z-index:940;width:60px;height:60px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(196,25,124,.7);
  transition:transform .45s var(--ease-back);
}
#chatfab:hover{transform:scale(1.08) translateY(-3px);}
#chatfab svg{width:26px;height:26px;stroke:#fff;stroke-width:1.7;fill:none;}
#chatfab .pip{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#4ade80;border:2.5px solid var(--cream);}
#chatfab .ping{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(196,25,124,.5);animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

#chatbox{
  position:fixed;right:22px;bottom:94px;z-index:945;width:min(380px,calc(100vw - 44px));height:min(560px,calc(100vh - 140px));
  background:var(--cream-2);border-radius:24px;box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.94);transform-origin:bottom right;
  transition:opacity .4s var(--ease),transform .5s var(--ease-back),visibility .4s;
  border:1px solid var(--line-2);
}
#chatbox.on{opacity:1;visibility:visible;transform:none;}
.cb-head{background:var(--grad);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.cb-head img{width:38px;height:38px;border-radius:50%;background:#fff;padding:3px;object-fit:contain;}
.cb-head b{display:block;font-size:.98rem;}
.cb-head small{font-size:.74rem;opacity:.85;display:flex;align-items:center;gap:5px;}
.cb-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;}
.cb-head .x{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:background .3s;}
.cb-head .x:hover{background:rgba(255,255,255,.18);}
.cb-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:82%;padding:11px 15px;border-radius:17px;font-size:.9rem;line-height:1.55;animation:msgIn .45s var(--ease);}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.msg.bot{background:var(--paper);border:1px solid var(--line-2);border-bottom-left-radius:5px;align-self:flex-start;}
.msg.me{background:var(--ink);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;}
.msg a{color:var(--magenta);text-decoration:underline;}
.msg.me a{color:#ffd8ea;}
.typing{display:flex;gap:4px;align-self:flex-start;padding:13px 16px;background:var(--paper);border-radius:17px;border-bottom-left-radius:5px;border:1px solid var(--line-2);}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:tdot 1.3s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
.cb-chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 10px;}
.cb-chips button{padding:7px 13px;border-radius:100px;font-size:.79rem;background:var(--paper);border:1px solid var(--line);transition:background .3s,transform .3s,border-color .3s;}
.cb-chips button:hover{background:var(--grad-soft);border-color:var(--magenta);transform:translateY(-2px);}
.cb-foot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line-2);background:var(--paper);}
.cb-foot input{flex:1;padding:11px 16px;border-radius:100px;border:1.3px solid var(--line);background:var(--cream-2);}
.cb-foot input:focus{outline:none;border-color:var(--magenta);}
.cb-foot button{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease-back);}
.cb-foot button:hover{transform:scale(1.09);}
.cb-foot svg{width:18px;height:18px;stroke:#fff;stroke-width:1.9;fill:none;}

/* whatsapp fab */
#wafab{position:fixed;left:22px;bottom:22px;z-index:940;width:52px;height:52px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(37,211,102,.8);transition:transform .4s var(--ease-back);}
#wafab:hover{transform:scale(1.1);}
#wafab svg{width:26px;height:26px;fill:#fff;}

/* ---------- 30. SEARCH OVERLAY ---------- */
#searchbox{position:fixed;inset:0;z-index:960;background:rgba(246,242,231,.97);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;display:grid;place-items:start center;padding-top:16vh;}
#searchbox.on{opacity:1;visibility:visible;}
#searchbox form{width:min(680px,90vw);}
#searchbox input{width:100%;padding:20px 4px;font-family:var(--f-display);font-size:clamp(1.5rem,4vw,2.6rem);background:transparent;border:0;border-bottom:2px solid var(--line);}
#searchbox input:focus{outline:none;border-color:var(--magenta);}
#searchbox .hint{margin-top:16px;color:var(--ink-3);font-size:.88rem;}
#searchbox .close{position:absolute;top:26px;right:30px;font-size:1.6rem;}

/* ---------- 31. PAGINATION ---------- */
.pager{display:flex;gap:7px;justify-content:center;margin-top:44px;flex-wrap:wrap;}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:12px;display:grid;place-items:center;font-size:.9rem;box-shadow:inset 0 0 0 1.3px var(--line);transition:background .3s,color .3s,transform .3s;}
.pager a:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.pager .on{background:var(--grad);color:#fff;box-shadow:none;}

/* ---------- 32. RESPONSIVE ---------- */
@media (max-width:1080px){
  .f-grid{grid-template-columns:1fr 1fr;}
  .tst{flex:0 0 calc(50% - 11px);}
}
@media (max-width:960px){
  :root{--header-h:66px;}
  .menu{display:none;}
  .burger{display:flex;}
  .nav{gap:12px;}
  .hero-grid,.story,.pdp,.cart-layout{grid-template-columns:1fr;}
  .pdp-media,.summary{position:static;}
  .hero-art{order:-1;max-width:440px;margin-inline:auto;}
  .hero-chip{padding:9px 14px;font-size:.78rem;}
  .hero-chip.c1{top:-12px;left:-8px;}
  .hero-chip.c2{bottom:-12px;right:-8px;}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px);}
  .tst{flex:0 0 100%;}
  .f-grid{grid-template-columns:1fr;gap:30px;}
  .grid-2{grid-template-columns:1fr;}
  .p-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
  .card-body{padding:14px 15px 18px;}
  .card h3{font-size:.98rem;}
  .cart-row{grid-template-columns:72px 1fr;gap:12px;}
  .cart-row img{width:72px;height:72px;}
  .cart-row .rowend{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;}
  .pdp-meta{grid-template-columns:1fr;}
  #chatbox{right:12px;left:12px;width:auto;bottom:88px;}
  #chatfab{right:16px;bottom:16px;}
  #wafab{left:16px;bottom:16px;width:46px;height:46px;}
  .brand-txt small{display:none;}
  .nav{gap:10px;}
  .nav-actions{gap:2px;}
  .icon-btn{width:38px;height:38px;}
  .brand img{height:38px;}
  .brand-txt b{font-size:1rem;}
}
@media (max-width:520px){
  /* the account link lives in the drawer — drop the icon so the bar breathes */
  .nav-actions .icon-btn.acct{display:none;}
  .lang-btn{padding:7px 9px;font-size:.78rem;gap:5px;}
  .lang-btn .globe{width:14px;height:14px;}
  .burger{width:38px;height:38px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn svg{width:18px;height:18px;}
}
@media (max-width:400px){
  /* Very small phones: the logo mark alone is enough branding — this is what
     stops the burger being pushed past the right edge of the header. */
  .brand-txt{display:none;}
  .nav-actions{gap:0;}
  .lang-btn span{display:none;}          /* globe + chevron only */
  .lang-btn{padding:7px 8px;}
}

/* =====================================================================
   INDIC SCRIPT TYPOGRAPHY  (বাংলা / हिन्दी)
   Latin type rules do not transfer to these scripts:
   · Matras sit ABOVE and BELOW the base line, so a 1.12 line-height clips
     them — ু, ৃ, ী and the Devanagari shirorekha get cut off.
   · letter-spacing is actively harmful: it pulls vowel signs away from the
     consonant they belong to, which is why spaced-out labels looked broken.
   · text-transform:uppercase is meaningless here.
   ===================================================================== */
html[lang="bn"] h1, html[lang="hi"] h1,
html[lang="bn"] h2, html[lang="hi"] h2,
html[lang="bn"] h3, html[lang="hi"] h3,
html[lang="bn"] h4, html[lang="hi"] h4{
  line-height:1.45;
  letter-spacing:0;
  overflow-wrap:break-word;
  word-break:normal;
  padding-bottom:.08em;          /* room for descending matras */
}
/* a touch smaller: Bengali glyphs carry more detail per character */
html[lang="bn"] h1, html[lang="hi"] h1{font-size:clamp(2rem,4.4vw,3.5rem);}
html[lang="bn"] h2, html[lang="hi"] h2{font-size:clamp(1.6rem,3vw,2.5rem);}
html[lang="bn"] h3, html[lang="hi"] h3{font-size:clamp(1.15rem,1.8vw,1.5rem);}

html[lang="bn"] body, html[lang="hi"] body{line-height:1.8;}

html[lang="bn"] .eyebrow,      html[lang="hi"] .eyebrow,
html[lang="bn"] .card-cat,     html[lang="hi"] .card-cat,
html[lang="bn"] .badge,        html[lang="hi"] .badge,
html[lang="bn"] .stat span,    html[lang="hi"] .stat span,
html[lang="bn"] .footer h4,    html[lang="hi"] .footer h4,
html[lang="bn"] .pdp-meta span,html[lang="hi"] .pdp-meta span,
html[lang="bn"] .brand-txt small, html[lang="hi"] .brand-txt small,
html[lang="bn"] .pre-txt,      html[lang="hi"] .pre-txt,
html[lang="bn"] .announce,     html[lang="hi"] .announce,
html[lang="bn"] .tst .who span,html[lang="hi"] .tst .who span,
html[lang="bn"] .f-bot,        html[lang="hi"] .f-bot{
  letter-spacing:.01em;
  text-transform:none;
  line-height:1.75;
}
html[lang="bn"] .strip span, html[lang="hi"] .strip span{line-height:1.9;}
html[lang="bn"] .btn, html[lang="hi"] .btn{letter-spacing:0;line-height:1.5;}
html[lang="bn"] .menu a, html[lang="hi"] .menu a{letter-spacing:0;}
html[lang="bn"] .mnav a, html[lang="hi"] .mnav a{line-height:1.6;padding:14px 4px;}

/* the animated word chunks must not be clipped either */
html[lang="bn"] .split .ch, html[lang="hi"] .split .ch{
  line-height:1.6;
  padding-bottom:.14em;
}

/* ---------------------------------------------------------------------
   HERO HEADING — the mask is gone, for every language.

   Two things were wrong with the earlier fix:

   1. It keyed on html[lang]. But the page language and the language of the
      TEXT are different things. A Bengali product title sits happily on the
      English page (Bengali heading, English paragraph), and then no
      html[lang="bn"] rule applies at all. That is why it kept clipping.

   2. The mask itself is an overflow:hidden box the line slides up into.
      How far Bengali ink drops below the line box depends on which
      conjuncts are in the word — ড়ু and ।  reach much further than ন does.
      There is no padding value that is correct for every word at every
      screen size, so tuning the number was never going to converge.

   Headings now fade and rise instead. Same feel, nothing that can crop.
   --------------------------------------------------------------------- */
.hero h1 .ln{overflow:visible;padding:0;margin:0;}
.hero h1 .ln>span{
  transform:translateY(26px);
  opacity:0;
  animation:lineRise .95s var(--ease) forwards;
}
@keyframes lineRise{to{transform:none;opacity:1;}}

/* room under every heading, whatever script it turns out to contain */
h1, h2, h3{overflow:visible;padding-bottom:.12em;}
.hero h1{line-height:1.28;margin-bottom:clamp(22px,3.4vw,38px);}

/* Per-STRING script detection (PHP adds .indic, JS catches DB content).
   Applies wherever the text is Indic, regardless of the page language. */
.indic{
  letter-spacing:.02em !important;
  text-transform:none !important;
}
h1 .indic, h2 .indic, h3 .indic,
h1.indic, h2.indic, h3.indic{
  line-height:1.5;
  padding-bottom:.18em;
}
.hero h1 .indic{line-height:1.45;padding-bottom:.2em;}
.eyebrow.indic{gap:8px;line-height:1.7;}
.pre-txt.indic{font-size:.9rem;letter-spacing:.02em;}

/* (.indic rules live at the end of this file, with the heading fixes) */