/* BAZARVILLE — brand: acid lime (#c6f000) + ink black, bold rounded, 3D-tilt interactions */
:root{
  --lime:#c6f000; --lime-deep:#9fc400; --ink:#1a1a1a; --ink-soft:#3a3a38;
  --paper:#ffffff; --surface:#ffffff; --text:#1a1a1a;
  --soft:#f6f8ee; --soft2:#eef6d8; --card:#ffffff; --line:#e7e9dd; --muted:#63685f;
  --on-accent:var(--ink);
  --r-sm:12px; --r-md:20px; --r-lg:30px;
  --shadow:0 20px 44px -18px rgba(26,26,26,.35);
  --wa:#25D366;
  /* admin-editable: brand font + hover/3D animation intensity (script.js applyBrandFont/applyAnimationLevel) */
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-heading:"Plus Jakarta Sans","Inter",sans-serif;
  --tilt-mult:1;
  color-scheme:light;
  transition:background .35s ease,color .35s ease;
}
*{box-sizing:border-box}
/* overflow-x:hidden on body alone isn't enough — <html> is the actual root
   scrolling box in standards mode, and off-canvas elements positioned just
   outside the viewport (the mobile nav drawer below: position:fixed;
   right:0; transform:translateX(100%) when closed) were still inflating
   its scrollable width, causing real horizontal scroll/wobble on phones
   even though nothing was visibly overflowing. This was very likely
   Vikas's vague "site is kinda improper on mobile" WhatsApp feedback. */
html{scroll-behavior:smooth;overflow-x:hidden}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s ease,color .35s ease,font-family .2s ease}
h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:-.01em;margin:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1220px,92%);margin:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
::selection{background:var(--lime);color:var(--ink)}

/* ---- topbar ---- */
.topbar{background:var(--ink);color:var(--lime);font-size:12.5px;font-weight:600;padding:9px 0;overflow:hidden}
.topbar .ticker{display:flex;gap:38px;white-space:nowrap;width:max-content;animation:tick 24s linear infinite}
.topbar:hover .ticker{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- nav ---- */
.nav{height:82px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(10px);position:sticky;top:0;z-index:60}
.navin{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.brand img{width:42px;height:42px}
.brand b{font-family:"Plus Jakarta Sans";font-weight:700;font-size:21px;letter-spacing:-.02em}
.links{display:flex;gap:30px;font-size:14.5px;font-weight:600}
.links a{position:relative;padding:8px 0}
.links a:after{content:"";position:absolute;left:0;bottom:2px;height:3px;width:0;background:var(--lime);border-radius:2px;transition:width .25s ease}
.links a:hover:after{width:100%}
.navactions{display:flex;align-items:center;gap:14px}
/* Pill search bar (replaces the old click-to-reveal icon) — one rounded
   container with the input and the submit icon both inside it, matching the
   curved search-bar look used on most shopping apps. Persistently visible
   from tablet width up; on narrow phones it stays collapsed to just the
   round icon (there isn't room for brand + links + a full bar + icons) and
   expands on tap, same interaction as before, just restyled. */
.nav-search{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;transition:border-color .22s ease,width .25s ease,padding .25s ease,box-shadow .22s ease,transform .22s ease}
.nav-search:hover{border-color:#c9cabd;box-shadow:0 4px 14px -8px rgba(26,26,26,.18)}
.nav-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(198,240,0,.3),0 6px 18px -10px rgba(26,26,26,.3);transform:translateY(-1px)}
.nav-search-input{min-width:0;border:none;background:none;font:inherit;font-size:13.5px;color:var(--text);outline:none}
.searchbtn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:16px;cursor:pointer;transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.searchbtn:hover{background:var(--lime-deep);color:var(--ink);transform:scale(1.12) rotate(-8deg);box-shadow:0 6px 16px -4px rgba(159,196,0,.55)}
.searchbtn:active{transform:scale(.94) rotate(0)}
@media(min-width:641px){
  .nav-search{width:230px;padding:4px 4px 4px 16px}
  .nav-search-input{flex:1;padding:6px 0}
}
@media(min-width:641px) and (max-width:1180px){.nav-search{width:170px}}
@media(max-width:640px){
  .nav-search{width:40px;padding:2px;overflow:hidden}
  .nav-search-input{width:0;flex:none;padding:0;opacity:0;transition:width .25s ease,opacity .2s ease}
  .nav-search.open{width:150px;padding:4px 4px 4px 14px}
  .nav-search.open .nav-search-input{width:auto;flex:1;opacity:1;padding:6px 0}
}
.menu-btn{display:none;font-size:22px;cursor:pointer}
.cartbtn{position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:17px;cursor:pointer;transition:.2s;text-decoration:none;color:inherit}
.cartbtn:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.cart-count{position:absolute;top:-4px;right:-4px;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 4px;font-family:"Plus Jakarta Sans"}
.enqbtn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;font-size:17px;cursor:pointer;transition:.2s;text-decoration:none;color:inherit;font-family:inherit}
.enqbtn:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 26px;font-weight:600;font-size:14.5px;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,opacity .2s ease;font-family:"Plus Jakarta Sans"}
.btn-primary{background:var(--ink);color:var(--lime);box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px -8px rgba(0,0,0,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 28px -10px rgba(0,0,0,.45)}
.btn-primary:active{transform:translateY(0) scale(.98);opacity:.92}
.btn-lime{background:var(--lime);color:var(--on-accent);box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 22px -10px rgba(159,196,0,.55)}
.btn-lime:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 28px -10px rgba(159,196,0,.6)}
.btn-lime:active{transform:translateY(0) scale(.98);opacity:.92}
.btn-outline{border:2px solid var(--ink);background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--lime)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 18px -8px rgba(37,211,102,.5)}
.btn-wa:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 24px -8px rgba(37,211,102,.55)}
.btn-wa:active{transform:translateY(0) scale(.98);opacity:.92}
.btn-sm{padding:9px 14px;font-size:12.5px;border-radius:9px}

/* ---- hero with 3D floating stack ---- */
.hero{padding:52px 0 30px;perspective:1400px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--lime);font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:30px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.hero h1{font-size:56px;line-height:1.03;margin:18px 0 16px;font-weight:700}
.hero h1 .hl{background:var(--lime);padding:0 10px;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p{font-size:17.5px;color:var(--muted);line-height:1.65;max-width:520px}
.searchbar{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 40px -20px rgba(26,26,26,.25);max-width:560px}
.searchbar input{border:0;outline:0;flex:1;padding:12px 14px;font-size:15px;font-family:inherit;background:transparent}
.searchbar button{border:0;background:var(--lime);color:var(--on-accent);border-radius:12px;padding:0 20px;font-weight:700;cursor:pointer;font-family:"Plus Jakarta Sans"}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;max-width:520px}
.hero-actions .btn{border-radius:30px;flex:1 1 auto;white-space:nowrap}
.quicktags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.qtag{font-size:12.5px;font-weight:600;border:1.5px solid var(--line);padding:7px 13px;border-radius:30px;color:var(--ink-soft);transition:.2s}
.qtag:hover{border-color:var(--ink);background:var(--ink);color:var(--lime)}

.hero-stack{position:relative;height:420px;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.stack-card{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(26,26,26,.4);border:6px solid #fff;transform-style:preserve-3d;will-change:transform}
.stack-card img{width:100%;height:100%;object-fit:cover}
.sc1{width:230px;height:290px;top:10px;left:30px;transform:rotateY(-16deg) rotateX(6deg) translateZ(40px);animation:floatA 7s ease-in-out infinite;z-index:3}
.sc2{width:200px;height:250px;top:120px;right:10px;transform:rotateY(14deg) rotateX(-4deg) translateZ(10px);animation:floatB 8s ease-in-out infinite;z-index:2}
.sc3{width:180px;height:220px;bottom:0;left:110px;transform:rotateY(-6deg) rotateX(2deg);animation:floatC 6.5s ease-in-out infinite;z-index:1}
@keyframes floatA{0%,100%{transform:rotateY(-16deg) rotateX(6deg) translateZ(40px) translateY(0)}50%{transform:rotateY(-12deg) rotateX(4deg) translateZ(40px) translateY(-18px)}}
@keyframes floatB{0%,100%{transform:rotateY(14deg) rotateX(-4deg) translateZ(10px) translateY(0)}50%{transform:rotateY(10deg) rotateX(-2deg) translateZ(10px) translateY(-14px)}}
@keyframes floatC{0%,100%{transform:rotateY(-6deg) rotateX(2deg) translateY(0)}50%{transform:rotateY(-3deg) rotateX(1deg) translateY(-10px)}}
.orb{position:absolute;border-radius:50%;background:var(--lime);filter:blur(50px);opacity:.5;z-index:0}
.orb1{width:220px;height:220px;top:-30px;right:40px}
.orb2{width:180px;height:180px;bottom:20px;left:-20px;background:#ffd400;opacity:.35}

/* ---- hero v2 — single flat photo instead of the floating 3D stack ---- */
.eyebrow-plain{font-family:"Plus Jakarta Sans";font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lime-deep)}
.hero-v2 h1{margin-top:14px}
.hero-photo{border-radius:28px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 30px 60px -20px rgba(26,26,26,.3);background:var(--soft)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- homepage "Questions" hero replacement — quick-question ticker + search ---- */
.hq-section{padding:52px 0 10px;text-align:center}
.hq-head h1{font-size:40px;line-height:1.12;font-weight:700;margin-bottom:10px}
.hq-head p{font-size:16.5px;color:var(--muted);max-width:560px;margin:0 auto}
.hq-tickerwrap{overflow:hidden;margin:30px 0 26px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hq-tickerwrap .hq-ticker{display:flex;gap:14px;width:max-content;animation:tick 28s linear infinite}
.hq-tickerwrap:hover .hq-ticker{animation-play-state:paused}
.hq-chip{display:inline-flex;align-items:center;white-space:nowrap;font-weight:600;font-size:14px;padding:11px 20px;border-radius:30px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:.2s;font-family:inherit}
.hq-chip:hover{border-color:var(--ink);background:var(--ink);color:var(--lime)}
.hq-search{position:relative;display:flex;align-items:center;gap:10px;max-width:620px;margin:0 auto;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 40px -20px rgba(26,26,26,.2);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.hq-search:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 26px 46px -18px rgba(26,26,26,.25)}
.hq-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 5px rgba(198,240,0,.28),0 26px 46px -18px rgba(26,26,26,.3);transform:translateY(-2px)}
.hq-search-icon{flex-shrink:0;width:22px;text-align:center;font-size:17px;padding-left:6px;color:var(--muted);transition:color .25s ease,transform .25s ease}
.hq-search:focus-within .hq-search-icon{color:var(--ink);transform:scale(1.15)}
.hq-search-input{flex:1;border:0;outline:0;padding:12px 14px 12px 4px;font-size:15px;font-family:inherit;background:transparent}
.hq-search .btn{border-radius:11px;padding:0 24px;white-space:nowrap;position:relative;overflow:hidden}
.hq-search .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .55s ease}
.hq-search .btn:hover::after{transform:translateX(120%)}
.hq-banner{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(26,26,26,.3);background:linear-gradient(135deg,var(--ink) 0%,#2d2d2a 100%);padding:64px 40px;text-align:center}
.hq-banner img{width:100%;max-height:420px;object-fit:cover;display:block}
.hq-banner.has-photo{padding:0;background:var(--soft)}
.hq-banner.has-photo .hq-banner-inner{display:none}
.hq-banner-inner{max-width:640px;margin:0 auto}
.hq-banner-inner h2{color:#fff;font-size:30px;line-height:1.28;margin-bottom:14px;font-weight:700}
.hq-banner-inner p{color:#d8d8d2;font-size:15.5px;line-height:1.65;margin-bottom:26px}
.hq-banner-inner .btn{border-radius:30px}
@media (max-width:640px){
  .hq-head h1{font-size:28px}
  .hq-chip{font-size:13px;padding:9px 16px}
  .hq-search{flex-wrap:wrap;border-radius:14px}
  /* The base .hq-search .btn rule (above) zeroes out vertical padding so the
     button reads as a small inline pill next to the input on desktop — but
     here it drops to its own full-width row, and that same zero padding
     collapsed it into a ~17px sliver, which is what looked broken/unprofessional
     on a phone. Give it real button proportions now that it's a standalone row. */
  .hq-search .btn{flex:1 1 100%;width:100%;margin-top:8px;padding:14px 24px;border-radius:12px}
  .hq-banner img{max-height:220px}
}

/* ---- trusted-by strip ---- */
.trusted{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trusted p{text-align:center;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.03em;margin-bottom:22px}
.logostrip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;opacity:.75}
.logochip{font-family:"Plus Jakarta Sans";font-weight:700;font-size:19px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.logochip .dot{width:9px;height:9px;border-radius:3px;background:var(--lime-deep)}

/* ---- section basics ---- */
.section{padding:72px 0}
.section.alt{background:var(--soft)}
.title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.title h2{font-size:33px;font-weight:700}
.title p{margin:8px 0 0;color:var(--muted);max-width:480px}

/* ---- discovery gates (profession / purpose / occasion) ---- */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gate{border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.gate:hover{transform:translateY(-7px);box-shadow:0 26px 48px -16px rgba(26,26,26,.25)}
.gate:hover .gate-icon{transform:scale(1.15) rotate(8deg)}
.gate:hover .go{gap:10px}
.gate h3{font-size:23px;font-weight:700;margin-bottom:6px}
.gate p{color:var(--ink-soft);font-size:14px;margin:0 0 14px}
.gate .go{font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;transition:gap .3s ease}
.gate.g1{background:linear-gradient(155deg,#eaffb0,var(--lime))}
.gate.g1 h3,.gate.g1 p,.gate.g1 .go{color:var(--on-accent)}
.gate.g2{background:linear-gradient(155deg,var(--surface),var(--soft));border:1px solid var(--line)}
.gate.g3{background:linear-gradient(155deg,var(--ink),#333)}
.gate.g3 h3,.gate.g3 .go{color:#fff}
.gate.g3 p{color:#c9c9c6}
.gate-icon{position:absolute;top:24px;right:24px;font-size:34px;opacity:.8;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}

/* ---- collections — horizontally swipeable slider (Vikas's WhatsApp
   feedback: "Ye bhi slide wala chahiye" on the Trending Products section) ----
   Scroll-snap gives native touch-swipe on mobile for free; the prev/next
   arrows (hidden on touch-only screens, see .coll-arrow below) are a
   desktop/mouse convenience that scroll the same track via initCollSlider()
   in script.js. */
.coll-slider-wrap{position:relative}
.collections{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 10px;scrollbar-width:none}
.collections::-webkit-scrollbar{display:none}
.coll{flex:0 0 260px;scroll-snap-align:start;border-radius:var(--r-md);overflow:hidden;position:relative;height:230px;box-shadow:0 8px 20px rgba(26,26,26,.08);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;perspective:800px}
.coll:hover{box-shadow:0 26px 50px -16px rgba(26,26,26,.3);transform:translateY(-6px) rotateX(3deg) rotateY(-2deg)}
.coll img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.coll:hover img{transform:scale(1.1)}
.coll .ov{transition:background .3s ease}
.coll .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff}
.coll .ov b{font-family:"Plus Jakarta Sans";font-size:16.5px}
.coll .ov span{font-size:12px;color:var(--lime);font-weight:700}
.coll-arrow{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -8px rgba(26,26,26,.25);transition:.2s;z-index:2}
.coll-arrow:hover{background:var(--ink);color:var(--lime);border-color:var(--ink);transform:translateY(-50%) scale(1.08)}
.coll-arrow-prev{left:-21px}
.coll-arrow-next{right:-21px}
.coll-arrow.hide{display:none}
@media(max-width:860px){.coll-arrow{display:none} /* touch screens get native swipe instead */}
@media(max-width:640px){.coll{flex-basis:76vw}}

/* ---- new arrivals / product grid ---- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard-wrap{perspective:1000px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .35s ease,border-color .35s ease;position:relative;will-change:transform}
.pcard:hover{box-shadow:0 26px 48px -18px rgba(26,26,26,.28);border-color:transparent;transform:translateY(-6px)}
.pcard .badge-stock{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:20px;z-index:2;font-family:"Plus Jakarta Sans"}
.badge-stock.in{background:var(--lime);color:var(--on-accent)}
.badge-stock.out{background:var(--ink);color:#fff}
.pimg{height:210px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);position:relative}
/* object-fit:contain (not cover) — a fixed-height box + cover always crops
   whichever edge doesn't match the box's aspect ratio, cutting corners off
   portrait/square/odd-shaped product photos. contain always shows the WHOLE
   photo, letting the soft background pad the gap instead of cropping — so
   this never needs revisiting for future products of any shape. White bg +
   a thin bottom hairline (instead of the old flat soft-green fill) reads
   closer to Myntra/e-comm listing cards, where the photo sits on clean
   white with a crisp edge into the info block below. */
.pimg img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box;transform:translateZ(0) scale(1);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pimg img{transform:scale(1.06)}
.pbody{padding:16px;transform:translateZ(30px)}
.pcat{display:block;font-size:10.5px;font-weight:800;color:var(--lime-deep);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.pbody h3{font-size:15.5px;margin:0 0 7px;line-height:1.35;font-weight:600;font-family:"Inter"}
/* Price row in Myntra's compact pattern: bold current price + a small
   orange "(Save X%)" annotation on the same line — see productCard() in
   script.js for why this is a real bulk-tier saving, not a struck-through
   fake MRP (this catalogue has no single-piece MRP to strike through). */
.pprice-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pprice{font-size:18px;font-weight:800;font-family:"Plus Jakarta Sans";color:var(--ink)}
.pprice-unit{font-size:11.5px;color:var(--muted);font-weight:600}
.poff{font-size:12px;color:#e8730a;font-weight:700}
.pprice-note{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px}
.pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.moqtag{font-size:11px;color:var(--muted);font-weight:600}
.wa-mini{width:34px;height:34px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;font-size:16px;flex:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.wa-mini:hover{transform:scale(1.15);box-shadow:0 6px 16px rgba(37,211,102,.5)}

/* ---- testimonials ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.tcard:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(26,26,26,.22)}
.tcard .stars{color:#f5a623;font-size:14px;margin-bottom:12px}
.tcard p{color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.twho{display:flex;align-items:center;gap:12px;margin-top:16px}
.tav{width:42px;height:42px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-weight:800;font-family:"Plus Jakarta Sans"}
.twho b{font-size:14px;display:block}.twho span{font-size:12px;color:var(--muted)}

/* ---- CTA banner ---- */
.cta-banner{border-radius:var(--r-lg);background:var(--ink);color:#fff;padding:50px 54px;display:flex;justify-content:space-between;align-items:center;gap:24px;position:relative;overflow:hidden}
.cta-banner:before{content:"";position:absolute;width:280px;height:280px;background:var(--lime);border-radius:50%;filter:blur(70px);opacity:.4;right:-60px;top:-90px}
.cta-banner h2{font-size:29px;position:relative}
.cta-banner p{color:#bdbdbd;margin-top:8px;position:relative}

/* ---- footer ---- */
.footer{background:#101010;color:#c9c9c4;margin-top:0;padding:60px 0 24px;border-top:3px solid var(--lime)}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px}
.footer h4{color:#fff;font-size:14.5px;margin-bottom:14px}
.footer a,.footer p{font-size:13.5px;line-height:2;color:#9d9d97}
.footer a:hover{color:var(--lime)}
.fbrand{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.fbrand img{width:34px}
.fbrand b{color:#fff;font-family:"Plus Jakarta Sans";font-size:18px}
.ffirst p{max-width:280px}
.fsocial{display:flex;gap:10px;margin-top:16px}
.fsocial-ic{width:36px;height:36px;border-radius:50%;border:1.5px solid #2c2c2a;display:grid;place-items:center;color:#c9c9c4;transition:.2s}
.fsocial-ic:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
#footerWaLink{color:#25D366}
#footerWaLink:hover{color:var(--lime)}
.footmini{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.footmini .fsocial{justify-content:center}
.copyright{border-top:1px solid #262626;margin-top:40px;padding-top:18px;text-align:center;font-size:12px;color:#7a7a74}

/* ================= PRODUCTS / FILTER PAGE ================= */
.pagehead{padding:48px 0 30px}
.pagehead h1{font-size:34px;font-weight:700}
.pagehead p{color:var(--muted);margin-top:8px}
.shell{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:start}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;position:sticky;top:100px}
.fgroup{margin-bottom:22px}
.fgroup:last-child{margin-bottom:0}
.fgroup h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;font-family:"Plus Jakarta Sans"}
.fgroup select,.fgroup input[type=number]{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;outline:none}
.fgroup select:focus,.fgroup input:focus{border-color:var(--ink)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1.5px solid var(--line);padding:7px 12px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s}
.fchip.active{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.range-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.resultbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.resultbar .count{font-weight:700;font-family:"Plus Jakarta Sans"}
.resultbar select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit}
.filter-toggle{display:none}

/* ---- mobile bottom action bar (Sort / Filter) — Myntra-style, replaces
   the old inline "⚙ Filters" button + always-visible sort dropdown, which
   on a phone sat above the fold and pushed the actual products down. Shown
   only ≤1000px (see .mobile-actionbar{display:flex} in that media block);
   .mab-btn reuses .filter-toggle's class on the Filter button so the
   existing JS toggle (initFilters() in script.js) wires it for free. ---- */
.mobile-actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(26,26,26,.18);padding:6px 0;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
.mab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink);padding:8px 4px;cursor:pointer}
.mab-ic{font-size:17px;line-height:1}
.mab-sep{width:1px;background:var(--line);margin:6px 0}

/* bottom sheet for Sort */
.sort-sheet-backdrop{position:fixed;inset:0;background:rgba(15,15,13,.5);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s ease}
.sort-sheet-backdrop.show{opacity:1;pointer-events:auto}
.sort-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:#fff;border-radius:18px 18px 0 0;padding:6px 6px calc(10px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 30px -10px rgba(0,0,0,.25)}
.sort-sheet.show{transform:translateY(0)}
.sort-sheet-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;padding:12px 14px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sort-sheet-close{border:0;background:none;font-size:16px;cursor:pointer;color:var(--muted);padding:4px}
.sort-sheet-opt{padding:13px 14px;font-size:14.5px;font-weight:600;cursor:pointer;border-radius:10px;transition:background .15s ease}
.sort-sheet-opt:hover{background:var(--soft)}
.sort-sheet-opt.active{color:var(--lime-deep);font-weight:800}
.sort-sheet-opt.active::after{content:"✓";float:right}

/* ================= PRODUCT DETAIL ================= */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
/* The gallery column is usually shorter than the options/description column
   next to it, which with align-items:start just left a big empty gap below
   the photos as the page scrolled past them. Making it sticky keeps the
   photos in view alongside whatever the customer is reading/choosing on the
   right instead of leaving that blank space. */
.pd-layout .reveal-left{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
@media (max-width:1000px){
  .pd-layout .reveal-left{position:static;max-height:none;overflow-y:visible}
}

/* ---- Myntra-style photo grid: every image shown big, side by side, not a
   single hero + a row of small thumbnails. Odd one out (last image, when the
   count is odd) spans both columns so the grid never ends on a lonely half
   row. Each cell zooms slightly on hover with a magnifier hint, and opens
   the full-screen lightbox below on click. ---- */
.pd-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-gallery-cell{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--soft);cursor:zoom-in;aspect-ratio:4/5}
.pd-gallery-cell.span2{grid-column:1/-1;aspect-ratio:16/10}
/* object-fit:contain — the whole photo always shows, letterboxed on a neutral
   background if its proportions don't exactly match the cell, instead of
   object-fit:cover cropping/zooming into it to fill the box edge-to-edge
   (that cropping was cutting off large parts of taller/wider product
   photos). The hover effect is now a gentle scale of the whole image, not a
   crop-in zoom. */
.pd-gallery-cell img{width:100%;height:100%;object-fit:contain;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pd-gallery-cell:hover img{transform:scale(1.03)}
.pd-gallery-zoom{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:13px;opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pd-gallery-cell:hover .pd-gallery-zoom{opacity:1;transform:scale(1)}

/* ---- full-screen lightbox ---- */
.pd-lightbox{position:fixed;inset:0;background:rgba(17,17,15,.94);display:none;align-items:center;justify-content:center;z-index:999;padding:40px}
.pd-lightbox.show{display:flex}
.pd-lightbox img{max-width:min(900px,90vw);max-height:86vh;object-fit:contain;border-radius:8px}
.pd-lightbox-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:none;font-size:18px;cursor:pointer;transition:background .2s ease}
.pd-lightbox-close:hover{background:rgba(255,255,255,.25)}
.pd-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:none;font-size:26px;cursor:pointer;transition:background .2s ease;display:grid;place-items:center}
.pd-lightbox-nav:hover{background:rgba(255,255,255,.25)}
.pd-lightbox-nav.prev{left:18px}
.pd-lightbox-nav.next{right:18px}
/* ---- mobile product gallery: one-photo-per-screen swipe slider instead of
   the 2-column grid (PrintX|Bazarville DTF's WhatsApp feedback: "product
   page image slide in mobile"). Scroll-snap gives native touch swipe; the
   dots row below (built in renderPdGallery, script.js) shows which photo
   you're on and is tappable to jump. ---- */
@media (max-width:640px){
  .pd-gallery-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:0;scrollbar-width:none;border-radius:var(--r-md)}
  .pd-gallery-grid::-webkit-scrollbar{display:none}
  .pd-gallery-cell,.pd-gallery-cell.span2{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5;border-radius:0;border-width:0}
  .pd-gallery-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .pd-gallery-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s ease,transform .2s ease}
  .pd-gallery-dot.active{background:var(--ink);transform:scale(1.3)}
}
@media (min-width:641px){ .pd-gallery-dots{display:none} }
@media (max-width:560px){
  .pd-gallery-grid{gap:6px}
  .pd-lightbox{padding:16px}
  .pd-lightbox-nav{width:40px;height:40px;font-size:22px}
}
.pd-cat{font-size:12px;color:var(--lime-deep);font-weight:800;text-transform:uppercase}
.pd-title{font-size:23px;line-height:1.3;margin:8px 0 10px;font-weight:700}
.pd-rating{color:var(--muted);font-size:14px;margin-bottom:14px}
.pd-price-box{background:var(--soft);border-radius:var(--r-md);padding:20px;margin:16px 0}
.pd-price{font-size:30px;font-weight:800;font-family:"Plus Jakarta Sans"}
.pd-price span{font-size:13px;color:var(--muted);font-weight:600}
.tier-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
/* On the product-detail page the table is now the price box's only content
   (no separate price tag above it any more), so trim the top margin that
   used to separate it from that tag; the quick-view modal still has its own
   price tag above the table and keeps the normal margin via this override. */
.pd-price-box .tier-table{margin-top:0}
.tier-table td,.tier-table th{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line)}
.tier-table tr.active-tier{background:var(--lime);color:var(--on-accent);border-radius:8px}
.opt-title{font-weight:700;margin:18px 0 10px;font-size:14px}
.swatches{display:flex;gap:10px}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;transition:.2s}
.swatch.active{box-shadow:0 0 0 2.5px var(--ink)}
.sizerow{display:flex;gap:8px;flex-wrap:wrap}
.sizebtn{border:1.5px solid var(--line);padding:9px 15px;border-radius:10px;font-weight:600;cursor:pointer;font-size:13.5px}
.sizebtn.active{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.qtybox{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;width:fit-content}
.qtybox button{width:40px;height:42px;border:0;background:var(--soft);font-size:18px;cursor:pointer;font-weight:700}
.qtybox input{width:64px;text-align:center;border:0;font:inherit;font-weight:700}
/* Hide the browser's native up/down spinner arrows — they sat right next to
   our own +/- buttons and crowded the number off-centre. */
.qtybox input::-webkit-outer-spin-button,.qtybox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtybox input[type=number]{-moz-appearance:textfield;appearance:textfield}
.livecalc{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--surface);border:1.5px dashed var(--line);font-size:14px}
.livecalc b{font-family:"Plus Jakarta Sans";font-size:17px}
.threshold-msg{margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
.pd-specs{border-top:1px solid var(--line);margin-top:28px;padding-top:20px}
.pd-spec{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f1ea;font-size:14px}
.pd-spec span:last-child{font-weight:700}

/* "Suitable for" — a long combined purposes+occasions list reads as a messy
   wall of text as a plain comma-joined value, so it gets its own stacked
   layout: label on top, wrapped tag chips below, collapsed to a preview
   with a "+N more" toggle instead of dumping everything at once. */
.pd-spec-tags{flex-direction:column;align-items:flex-start;gap:8px}
.pd-spec-tags>span:first-child{font-weight:700;color:var(--muted);font-size:13px}
.pd-tags-wrap{display:flex;flex-wrap:wrap;gap:6px}
.pd-tag-chip{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.pd-tags-wrap[data-expanded="1"] .pd-tag-chip{display:inline-block}
.pd-tags-wrap:not([data-expanded="1"]) .pd-tag-chip:nth-child(n+7){display:none}
.pd-tag-more{align-self:flex-start;background:none;border:none;padding:0;font:inherit;font-size:12.5px;font-weight:800;color:var(--lime-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pd-tag-more:hover{opacity:.75}

/* "You may also like" — related-products section on product.html, injected
   by initProductPage() in script.js. Mirrors the .title heading pattern used
   elsewhere on the site, scoped to this section so it doesn't affect any
   other page. */
.pd-related{margin-top:56px;border-top:1px solid var(--line);padding-top:36px}
.pd-related-head{margin-bottom:24px}
.pd-related-head h2{font-size:26px;font-weight:700}
.pd-related-head p{margin:6px 0 0;color:var(--muted)}

/* ================= GALAXY (Shop by Profession) ================= */
.galaxy-hero{background:linear-gradient(180deg,#f2ffcf,var(--soft) 60%);color:var(--text);padding:56px 0 20px;text-align:center;overflow:hidden}
.galaxy-hero .tag{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--lime-deep);border:1px solid var(--line);padding:8px 16px;border-radius:30px;font-size:12.5px;font-weight:700}
.galaxy-hero h1{font-size:38px;margin:16px 0 8px}
.galaxy-hero p{color:var(--muted);max-width:560px;margin:0 auto}
/* Desktop/tablet: full interactive 3D orbit. Hidden on small screens — see .galaxy-mobile-list */
.galaxy-stage{position:relative;height:640px;margin:20px auto 0;max-width:900px}
/* A flat, 2D "fake-3D" orbit: rings are plain ellipses (no perspective/rotateX),
   and planets are positioned with elliptical trig math in JS. Real nested 3D
   transforms (perspective + preserve-3d + rotateX) rendered inconsistently
   across browsers/GPUs — thin foreshortened shapes anti-aliased into pale,
   washed-out slivers on some devices and streaked off-screen on others. This
   flat approach looks just as "orbit-like" and renders identically everywhere. */
.orbit-scene{position:absolute;inset:0;animation:galaxy-in 1s cubic-bezier(.16,1,.3,1) both}
@keyframes galaxy-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.orbit-ring{position:absolute;top:50%;left:50%;border:1.5px solid rgba(122,153,0,.3);border-radius:50%;transform:translate(-50%,-50%)}
.ring1{width:300px;height:150px}
.ring2{width:460px;height:230px}
.ring3{width:620px;height:310px}
.planet{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(26,26,26,.28);border:2.5px solid #fff;transition:box-shadow .3s ease}
.planet:hover{box-shadow:0 12px 26px rgba(26,26,26,.4)}
.planet span:first-child{display:inline-block;font-size:21px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.planet:hover span:first-child{transform:scale(1.28)}
.planet-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;font-size:11px;font-weight:700;white-space:nowrap;color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:3px 9px;border-radius:20px}
.sun{position:absolute;top:50%;left:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eaff8a,var(--lime) 60%,#8fae00);display:grid;place-items:center;box-shadow:0 0 50px 14px rgba(198,240,0,.4);z-index:5;animation:sun-breathe 4s ease-in-out infinite}
@keyframes sun-breathe{0%,100%{box-shadow:0 0 50px 14px rgba(198,240,0,.4)}50%{box-shadow:0 0 64px 22px rgba(198,240,0,.55)}}
.sun img{width:52px}
.galaxy-panel{max-width:640px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;color:var(--text);text-align:left;display:none;box-shadow:var(--shadow)}
.galaxy-panel.show{display:block}
.galaxy-panel h3{font-size:22px;color:var(--lime-deep)}
.galaxy-panel p{color:var(--muted);margin-top:8px;font-size:14.5px}
.galaxy-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;padding-bottom:50px}
.leg{font-size:12.5px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:20px;font-weight:600}

/* Mobile-safe alternative: nested 3D perspective/preserve-3d transforms render
   inconsistently across mobile GPUs/browsers (planets stretching into streaks,
   flying off-screen). Below a breakpoint we skip 3D entirely and show a plain,
   reliable card grid with the exact same data and click behaviour instead. */
.galaxy-mobile-list{display:none}
.gm-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}
.gm-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gm-card .gm-icon{width:44px;height:44px;border-radius:12px;background:var(--soft2);display:grid;place-items:center;font-size:20px;flex:none}
.gm-card b{font-size:14.5px;display:block}
.gm-card span{font-size:12px;color:var(--muted)}

/* ================= THEME TOGGLE ================= */
/* (theme-toggle removed — light theme only, per client feedback) */

/* ================= SCROLL REVEAL =================
   Hidden-by-default state only applies once JS confirms it will also reveal
   (body.js-reveal, added by script.js). If JS fails to load or run, content
   simply stays visible — this is progressive enhancement, not a dependency. */
body.js-reveal .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.js-reveal .reveal.in{opacity:1;transform:translateY(0)}
body.js-reveal .reveal-zoom{opacity:0;transform:perspective(1000px) scale(.92) rotateX(6deg);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
body.js-reveal .reveal-zoom.in{opacity:1;transform:perspective(1000px) scale(1) rotateX(0)}
body.js-reveal .reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease}
body.js-reveal .reveal-left.in{opacity:1;transform:translateX(0)}
body.js-reveal .reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease}
body.js-reveal .reveal-right.in{opacity:1;transform:translateX(0)}
.stagger .reveal:nth-child(1){transition-delay:.02s}
.stagger .reveal:nth-child(2){transition-delay:.09s}
.stagger .reveal:nth-child(3){transition-delay:.16s}
.stagger .reveal:nth-child(4){transition-delay:.23s}
.stagger .reveal:nth-child(5){transition-delay:.30s}
.stagger .reveal:nth-child(6){transition-delay:.37s}
.stagger .reveal:nth-child(7){transition-delay:.44s}
.stagger .reveal:nth-child(8){transition-delay:.51s}

/* parallax scroll layers on hero */
.parallax-layer{will-change:transform}

/* ================= STAT COUNTER BAND ================= */
.counterband{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:44px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;overflow:hidden}
.counterband:before{content:"";position:absolute;width:320px;height:320px;background:var(--lime);border-radius:50%;filter:blur(90px);opacity:.35;top:-140px;left:-60px}
.counter-item{text-align:center;position:relative}
.counter-num{font-family:"Plus Jakarta Sans";font-weight:700;font-size:42px;color:var(--lime)}
.counter-label{font-size:13.5px;color:#c9c9c2;margin-top:4px}

/* ================= HOW IT WORKS (journey) ================= */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.jstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 18px;text-align:center;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.jstep:hover{transform:translateY(-7px);box-shadow:0 22px 40px -18px rgba(26,26,26,.2)}
.jstep .jicon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.jstep:hover .jicon{transform:scale(1.15) rotate(6deg)}
.jstep .jicon{width:52px;height:52px;border-radius:16px;background:var(--soft2);display:grid;place-items:center;font-size:24px;margin:0 auto 14px}
.jstep h4{font-size:14.5px;margin-bottom:6px}
.jstep p{font-size:12.5px;color:var(--muted);margin:0}

/* ================= FAQ ACCORDION ================= */
.faq{max-width:800px;margin:0 auto}
.faqitem{border-bottom:1px solid var(--line);padding:20px 0}
.faqq{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-family:"Plus Jakarta Sans";font-size:15.5px}
.faqq .plus{font-size:22px;transition:transform .3s ease;flex:none;margin-left:12px}
.faqitem.open .faqq .plus{transform:rotate(45deg)}
.faqa{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted);font-size:14.5px;line-height:1.7}
.faqitem.open .faqa{max-height:200px;margin-top:12px}

/* ================= ABOUT PAGE ================= */
.about-hero{padding:60px 0 20px;position:relative;overflow:hidden}
.timeline{position:relative;padding-left:34px;border-left:3px solid var(--line)}
.tl-item{position:relative;padding-bottom:38px}
.tl-item:last-child{padding-bottom:0}
.tl-item:before{content:"";position:absolute;left:-42px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid var(--ink)}
.tl-item h4{font-size:16.5px;margin-bottom:4px}
.tl-item p{color:var(--muted);font-size:14px;margin:0}
.tl-item span{font-size:12px;font-weight:800;color:var(--lime-deep);text-transform:uppercase}
.value-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;text-align:center;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.value-card:hover{transform:translateY(-7px);box-shadow:0 22px 40px -18px rgba(26,26,26,.2)}
.value-card .vi{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.value-card:hover .vi{transform:scale(1.2) rotate(-6deg)}
.value-card .vi{font-size:32px;margin-bottom:12px}

/* ================= DASHBOARD (Super Admin demo) ================= */
.dash-shell{background:var(--soft);min-height:100vh}
.dash-topbar{background:var(--ink);color:#fff;padding:16px 0}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.dash-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(26,26,26,.2)}
.dash-card .dlabel{font-size:12.5px;color:var(--muted);font-weight:700}
.dash-card .dnum{font-family:"Plus Jakarta Sans";font-size:30px;font-weight:700;margin-top:6px}
.dash-card .dtrend{font-size:12px;font-weight:700;margin-top:6px}
.dtrend.up{color:#3a9d3a}.dtrend.down{color:#c0392b}
.dash-panels{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.panel h3{font-size:16.5px;margin-bottom:18px}
.barchart{display:flex;align-items:flex-end;gap:14px;height:200px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-fill{width:100%;max-width:38px;background:linear-gradient(180deg,var(--lime),var(--lime-deep));border-radius:8px 8px 0 0;transition:height 1s cubic-bezier(.2,.8,.2,1);height:0}
.bar-label{font-size:11px;color:var(--muted);margin-top:8px;text-align:center}
.bar-val{font-size:12px;font-weight:700;margin-bottom:4px}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut{width:150px;height:150px;border-radius:50%;flex:none;transition:background 1.2s ease}
.donut-legend{font-size:13px}
.donut-legend div{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-weight:600}
.donut-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.activity-feed{display:flex;flex-direction:column;gap:14px}
.afeed-item{display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.afeed-icon{width:34px;height:34px;border-radius:50%;background:var(--soft2);display:grid;place-items:center;flex:none;font-size:15px}
.afeed-item b{display:block;font-size:13.5px}
.afeed-item span{color:var(--muted);font-size:12px}

/* ================= TRACK ENQUIRY ================= */
.track-box{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;text-align:center}
.track-box input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;margin:16px 0;text-align:center;font-weight:700;letter-spacing:.04em}
.tstep-row{display:flex;justify-content:space-between;margin-top:34px;position:relative}
.tstep-row:before{content:"";position:absolute;top:17px;left:6%;right:6%;height:2px;background:var(--line)}
.tstep{text-align:center;position:relative;flex:1}
.tstep .tdot{width:36px;height:36px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;margin:0 auto 10px;font-size:15px;position:relative;z-index:1}
.tstep.done .tdot{background:var(--lime);border-color:var(--lime)}
.tstep span{font-size:11.5px;font-weight:700;color:var(--muted)}
.tstep.done span{color:var(--text)}

/* ================= COLLECTION PAGE ================= */
.collection-hero{border-radius:var(--r-lg);overflow:hidden;position:relative;height:280px;margin-top:6px}
.collection-hero img{width:100%;height:100%;object-fit:cover}
.collection-hero .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.1));display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:#fff}
.collection-hero .ov span{color:var(--lime);font-weight:700;font-size:13px}
.collection-hero .ov h1{font-size:32px;margin-top:6px}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .links{display:none}.menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr}.hero-stack{height:340px;margin-top:20px;overflow:hidden}
  .gates,.grid4,.grid3,.tgrid{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:1fr}
  .filters{position:static;display:none}
  .filters.open{display:block}
  .filter-toggle{display:inline-flex}
  .pd-layout{grid-template-columns:1fr}
  /* Sort moves into the bottom action bar's sheet on mobile — the resultbar
     keeps just the product count. */
  .resultbar #sortSelect{display:none}
  .mobile-actionbar{display:flex}
  /* clearance so the fixed bottom bar never covers the footer/last row —
     scoped to pages that actually have the bar (products.html's <body
     class="has-mobile-actionbar">), not every page at this width. */
  body.has-mobile-actionbar{padding-bottom:62px}
  .galaxy-stage{height:480px}
  .ring1{width:180px;height:180px}.ring2{width:300px;height:300px}.ring3{width:410px;height:410px}
  .counterband{grid-template-columns:1fr 1fr}
  .journey{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr 1fr}
  .dash-panels{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* The 3D orbit relies on nested perspective/preserve-3d transforms that many
     mobile browsers/GPUs render inconsistently (stretched "streak" artifacts,
     planets escaping the visible stage). Below this width we swap it entirely
     for a plain, reliable list — same data, same tap behaviour, zero 3D. */
  .galaxy-stage{display:none}
  .galaxy-mobile-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
}
@media(max-width:420px){
  .galaxy-mobile-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero h1{font-size:38px}
  /* the floating hero-stack photos use fixed px positions sized for a 420px-tall
     desktop box — at phone widths that overflows the container sideways and the
     cards clip/overlap ("ajeeb" on mobile). Scale everything down and clip it. */
  .hero-stack{height:230px;overflow:hidden;margin-top:18px}
  .stack-card{border-width:4px;border-radius:16px}
  .sc1{width:140px;height:175px;top:4px;left:6px}
  .sc2{width:120px;height:150px;top:64px;right:4px}
  .sc3{display:none}
  .hero-actions{max-width:none}
  .hero-actions .btn{flex:1 1 calc(50% - 6px);padding:12px 16px;font-size:13px}
  .logostrip{justify-content:center;gap:12px 22px}
  .logochip{font-size:14.5px}
  .gates,.grid3,.tgrid,.footgrid{grid-template-columns:1fr}
  /* .grid4 (product cards) deliberately stays 2-column even at phone width —
     Myntra-style compact cards (see the mobile pcard tuning below) — instead
     of collapsing to 1 huge full-width card per row, which was the main
     reason the products page felt endlessly long on mobile. */
  .grid4{gap:10px}
  .pimg{height:130px}
  .pbody{padding:10px}
  .pcat{font-size:9.5px;margin-bottom:2px}
  .pbody h3{font-size:12.5px;margin:0 0 5px;line-height:1.3;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .pprice-row{gap:4px}
  .pprice{font-size:14.5px}
  .pprice-unit{font-size:9px}
  .poff{font-size:9.5px}
  .pprice-note{font-size:8.5px}
  .pfoot{margin-top:6px}
  .moqtag{font-size:9.5px}
  .wa-mini{width:28px;height:28px;font-size:13px}
  .pcard .badge-stock,.pcard .badge-signal{font-size:9px;padding:4px 8px;top:8px}
  .pcard .badge-stock{left:8px}
  .pcard .badge-signal{right:8px}
  .cta-banner{flex-direction:column;text-align:left;align-items:flex-start;padding:34px}
  .section{padding:48px 0}
  .pagehead h1{font-size:27px}
  .galaxy-stage{height:420px}
  .ring1{width:130px;height:130px}.ring2{width:220px;height:220px}.ring3{width:300px;height:300px}
  .sun{width:80px;height:80px;margin:-40px 0 0 -40px}.sun img{width:38px}
  .planet{width:48px;height:48px;margin-left:-24px;margin-top:-24px}
  .counterband{grid-template-columns:1fr 1fr;padding:30px 20px}
  .counter-num{font-size:32px}
  .journey{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .donut-wrap{flex-direction:column}
  .tstep span{display:none}
}

/* ---------- admin-controlled animation intensity (Settings → Animation intensity) ----------
   "off": kills hover-tilt/motion for speed/accessibility. "full": adds extra tilt depth
   (via --tilt-mult, read by script.js's attachTilt/initHeroTilt) plus a real idle 3D
   float on product cards. Default ("subtle") is today's existing behaviour — no class needed. */
body.anim-off .tilt,body.anim-off .hero-stack,body.anim-off .pcard{transition:none!important;transform:none!important;animation:none!important}
body.anim-off .reveal,body.anim-off .reveal-left,body.anim-off .reveal-right,body.anim-off .reveal-zoom{transition:none!important}

body.anim-full .pcard.tilt{animation:pcard-float3d 5.5s ease-in-out infinite}
body.anim-full .pcard.tilt:hover{animation-play-state:paused}
@keyframes pcard-float3d{
  0%,100%{transform:perspective(700px) translateY(0) rotateX(0deg) rotateY(0deg)}
  50%{transform:perspective(700px) translateY(-7px) rotateX(3deg) rotateY(-3deg)}
}

/* ================= PHASE 1 — UX: badges, wishlist, quick view, compare, mobile nav, cart breakdown, qty slider ================= */

/* ---- product card: signal badge + wishlist/quick-view buttons + compare checkbox ---- */
.pcard .badge-signal{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:20px;z-index:2;font-family:"Plus Jakarta Sans";background:#fff;color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.pcard-actions{position:absolute;top:48px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:3;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease}
.pcard:hover .pcard-actions,.pcard:focus-within .pcard-actions{opacity:1;transform:translateX(0)}
.wish-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;font-size:15px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;flex:none;padding:0}
.wish-btn:hover{transform:scale(1.12)}
.wish-btn.active{border-color:#e8546b;box-shadow:0 4px 10px rgba(232,84,107,.35)}
.qv-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;font-size:14px;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease;flex:none;padding:0}
.qv-btn:hover{background:var(--ink);color:var(--lime);transform:scale(1.08)}
.cmp-check{position:absolute;bottom:14px;right:12px;z-index:3;display:flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:5px 10px 5px 8px;font-size:11px;font-weight:700;color:var(--ink-soft);cursor:pointer;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.pcard:hover .cmp-check,.pcard:focus-within .cmp-check{opacity:1;transform:translateY(0)}
.cmp-check input{accent-color:var(--ink);cursor:pointer;margin:0}
/* Always visible on touch/small screens — no hover to rely on there */
@media(max-width:820px),(pointer:coarse){
  .pcard-actions,.cmp-check{opacity:1;transform:none}
}
/* The "Compare" checkbox is absolutely positioned at the card's
   bottom-right and was overlapping the compact 2-up mobile pfoot row (MOQ +
   WhatsApp button) now that cards are half as wide (see .grid4/.pimg/.pfoot
   tuning above). Compare is still reachable from the product/quick-view
   page, so just hide it on these narrow cards instead of cramming a third
   control into an already tight footer row. Placed after the base
   .cmp-check{display:flex} rule above so it actually wins the cascade. */
@media(max-width:600px){ .cmp-check{display:none} }
/* product-detail / quick-view "big" wishlist button (has an icon + text label) */
.wish-btn.pd-wish,.wish-btn.qv-wish{position:static;width:auto;height:auto;border-radius:10px;padding:12px 18px;gap:8px;display:inline-flex;align-items:center;font-weight:700;font-size:14px;font-family:inherit;color:var(--ink)}
.wish-btn.pd-wish.active,.wish-btn.qv-wish.active{border-color:#e8546b;color:#c2334c;background:#fff0f2}

/* ---- wishlist / cart nav icons ---- */
.wishbtn{position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:16px;cursor:pointer;transition:.2s;text-decoration:none;color:inherit}
.wishbtn:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.wish-count{position:absolute;top:-4px;right:-4px;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 4px;font-family:"Plus Jakarta Sans"}

/* ---- quick view modal ---- */
.qv-modal{position:fixed;inset:0;z-index:200;display:none}
.qv-modal.show{display:block}
.qv-backdrop{position:absolute;inset:0;background:rgba(15,15,13,.55);backdrop-filter:blur(2px);animation:qvFade .2s ease}
@keyframes qvFade{from{opacity:0}to{opacity:1}}
.qv-box{position:relative;max-width:920px;width:92%;max-height:88vh;overflow:auto;margin:5vh auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:0 40px 80px -20px rgba(0,0,0,.45);padding:34px;animation:qvUp .25s cubic-bezier(.16,1,.3,1)}
@keyframes qvUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.qv-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:15px;cursor:pointer;z-index:2}
.qv-close:hover{background:var(--ink);color:var(--lime)}
.qv-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:34px}
.qv-gallery-main{border-radius:var(--r-md);overflow:hidden;height:300px;border:1px solid var(--line);background:var(--soft);display:flex;align-items:center;justify-content:center}
.qv-gallery-main img{width:100%;height:100%;object-fit:contain}
.qv-thumbs{display:flex;gap:8px;margin-top:10px}
.qv-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:2px solid var(--line);cursor:pointer}
.qv-thumbs img.active{border-color:var(--ink)}
.qv-info h2{font-size:23px;font-weight:700;margin:6px 0 4px}
body.qv-open{overflow:hidden}
@media(max-width:700px){
  .qv-grid{grid-template-columns:1fr}
  .qv-box{padding:22px;width:94%;margin:4vh auto}
}

/* ---- header "WhatsApp Enquiry" form (shares the .qv-modal shell above) ---- */
.enq-field{margin-bottom:14px}
.enq-field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.enq-field input,.enq-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;font:inherit;font-size:14px;color:var(--text);background:var(--surface);outline:none;transition:border-color .2s ease;resize:vertical}
.enq-field input:focus,.enq-field textarea:focus{border-color:var(--ink)}

/* ---- compare checkbox → floating "Compare (N)" bar ---- */
.compare-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);z-index:150;background:var(--ink);color:#fff;border-radius:40px;padding:12px 12px 12px 22px;display:flex;align-items:center;gap:14px;box-shadow:0 20px 44px -14px rgba(0,0,0,.5);font-size:13.5px;font-weight:600;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.compare-bar.show{transform:translateX(-50%) translateY(0)}
.compare-clear{width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:13px}
.compare-clear:hover{background:rgba(255,255,255,.3)}
.compare-table-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse}
.compare-table th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:700;padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--line)}
.compare-table td{padding:12px 14px;border-bottom:1px solid var(--line);min-width:180px;font-size:13.5px}

/* ---- mobile hamburger nav drawer ---- */
.mnav-overlay{position:fixed;inset:0;background:rgba(15,15,13,.5);z-index:120;opacity:0;pointer-events:none;transition:opacity .25s ease}
.mnav-overlay.show{opacity:1;pointer-events:auto}
.mnav-drawer{position:fixed;top:0;right:0;bottom:0;width:82%;max-width:340px;background:var(--surface);z-index:121;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);padding:22px;overflow-y:auto;box-shadow:-20px 0 50px -20px rgba(0,0,0,.3)}
.mnav-drawer.open{transform:translateX(0)}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mnav-close{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:transparent;font-size:15px;cursor:pointer}
.mnav-close:hover{background:var(--ink);color:var(--lime)}
.mnav-links{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
.mnav-links a{padding:13px 10px;font-weight:700;font-size:15px;border-radius:10px;transition:background .2s ease}
.mnav-links a:hover{background:var(--soft)}
.mnav-icons{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:18px}
.mnav-icons a,.mnav-icons button{padding:13px 10px;font-weight:600;font-size:14.5px;border-radius:10px;display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;font-family:inherit;cursor:pointer;color:inherit}
.mnav-icons a:hover,.mnav-icons button:hover{background:var(--soft)}
body.mnav-lock{overflow:hidden}
@media(min-width:1001px){.mnav-overlay,.mnav-drawer{display:none}}

/* ---- cart totals breakdown (subtotal / GST / shipping / estimated total) ---- */
.cart-total-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14.5px}
.cart-total-row.sub{color:var(--muted);font-size:13.5px}
.cart-total-row.grand{border-top:1.5px dashed var(--line);margin-top:8px;padding-top:12px;font-size:16px}
.cart-total-row.grand b{font-family:"Plus Jakarta Sans";font-size:19px}

/* ---- shared empty-state block (cart / wishlist / compare) ---- */
.empty-cart{text-align:center;padding:60px 20px;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md)}
.empty-cart p{color:var(--muted);margin-bottom:18px;font-size:15px}

/* ---------- broken image fallback (Task: image safety) ----------
   Applied by imgFallback() in script.js when a product image URL fails to
   load. Keeps the placeholder visually calm/neutral but still legible so a
   stale link is obvious rather than an invisible blank gap. */
.img-fallback{object-fit:contain!important;background:var(--soft);padding:14%;opacity:.85}

/* ===== Account page (redesigned) =====
   Pure visual upgrade for account.html / initAccountPage() in script.js —
   every element ID the JS binds to (li_email, li_password, loginSubmit,
   loginError, su_name, su_company, su_phone, su_email, su_password,
   signupSubmit, signupError) is unchanged, along with the .acct-tab /
   .acct-form tab-switching structure. */
.acct-page{padding-top:44px;padding-bottom:70px}
.acct-card{display:grid;grid-template-columns:1fr 1.25fr;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,26,26,.28);border:1px solid var(--line)}
.acct-visual{background:var(--ink);color:#fff;padding:44px 38px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.acct-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% -10%, rgba(198,240,0,.28), transparent 55%)}
.acct-visual-badge{width:56px;height:56px;border-radius:16px;background:var(--lime);display:grid;place-items:center;margin-bottom:22px;position:relative}
.acct-visual-badge img{width:32px;height:32px}
.acct-visual h3{font-size:24px;margin-bottom:10px;position:relative}
.acct-visual p{color:#c9c9c4;font-size:14px;line-height:1.6;margin-bottom:22px;position:relative}
.acct-visual-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;position:relative}
.acct-visual-points li{font-size:13.5px;color:#e6e6e2;padding-left:26px;position:relative}
.acct-visual-points li:before{content:"✓";position:absolute;left:0;top:0;color:var(--lime);font-weight:800}
.acct-panel{padding:44px 42px}
.acct-tabs{display:flex;gap:6px;background:var(--soft);border-radius:14px;padding:5px;margin-bottom:26px}
.acct-tab{flex:1;border:none;background:transparent;padding:11px 14px;border-radius:10px;font:inherit;font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.acct-tab.active{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(26,26,26,.25)}
.acct-form{animation:acctFadeIn .35s ease}
@keyframes acctFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.acct-input-group .acct-input-wrap{position:relative}
.acct-input-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.acct-input-wrap input{padding-left:38px!important}
@media(max-width:820px){
  .acct-card{grid-template-columns:1fr}
  .acct-visual{padding:34px 30px}
  .acct-panel{padding:34px 26px}
}