/* =====================================================================
   ZULI COSMETICS — SIGNATURE DESIGN SYSTEM  (zuli-signature.css)
   Loaded LAST on every page. Purely visual + additive — no markup or JS
   logic is touched. This is the single source of truth for the brand look,
   overriding the older clashing gold/plum/luxe layers so the whole site
   reads as ONE cohesive, premium, million-dollar cosmetics brand.

   Identity: "Chocolate Luxe" — warm ivory canvas, deep aubergine ink,
   a confident rose signature, and champagne hairline accents.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:wght@500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  /* Canvas & surface (warm latte cream) */
  --z-canvas:#F5EDE1;
  --z-canvas-2:#E9DAC6;
  --z-surface:#FFFDFA;
  /* Ink (dark chocolate) */
  --z-ink:#2A1A10;
  --z-ink-soft:#6B5445;
  --z-ink-faint:#9C8676;
  /* Primary brand = rich chocolate (drives button/section gradients) */
  --z-rose:#5A3620;
  --z-rose-deep:#3A2114;
  --z-rose-soft:#EFE3D5;
  --z-blush:#F1E7D9;
  /* Caramel — the luxury accent */
  --z-gold:#C08A4A;
  --z-gold-lt:#E3BE86;
  --z-gold-dk:#9A6A33;
  /* Lines & shadow */
  --z-line:#EBE0D6;
  --z-line-2:#E0D3C6;
  --z-sh-sm:0 2px 10px rgba(38,29,35,.06);
  --z-sh-md:0 14px 34px rgba(38,29,35,.10);
  --z-sh-lg:0 26px 60px rgba(38,29,35,.16);
  --z-ease:cubic-bezier(.22,.61,.36,1);
  /* Remap legacy tokens so any missed references stay on-brand */
  --gold-main:var(--z-gold); --gold-light:var(--z-gold-lt); --gold-dark:var(--z-gold-dk);
  --luxe-gold:var(--z-rose); --luxe-gold-dk:var(--z-rose-deep); --luxe-rose:var(--z-rose);
  --ink:var(--z-ink); --plum:var(--z-rose); --plum-deep:var(--z-rose-deep);
}

/* ---------- global foundation ---------- */
html{ scroll-behavior:smooth; }
html body{
  font-family:'Poppins',system-ui,sans-serif !important;
  background:var(--z-canvas) !important;
  color:var(--z-ink) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html body h1, html body h2, html body h3, html body h4{
  font-family:'Playfair Display',serif !important;
  color:var(--z-ink) !important;
  letter-spacing:.2px;
}
a{ color:var(--z-rose-deep); }
a:hover{ color:var(--z-rose); }
::selection{ background:rgba(192,138,74,.20); color:var(--z-ink); }

/* refined champagne scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(var(--z-gold),var(--z-gold-dk)); border-radius:10px; }
*::-webkit-scrollbar-track{ background:var(--z-canvas-2); }

/* kill the cheap glowing-button animation from older layers */
button[onclick="placeOrder()"],
.success-buttons a.track-btn,
.container button[onclick="track()"]{ animation:none !important; }

/* ============================================================
   NAVBAR — sticky glass, champagne hairline, elegant logo
   ============================================================ */
.navbar{
  background:rgba(250,246,242,.82) !important;
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--z-line) !important;
  box-shadow:0 4px 24px rgba(38,29,35,.05) !important;
}
.logo-main-text{
  font-family:'Playfair Display',serif !important;
  color:var(--z-ink) !important;
  letter-spacing:4px !important; font-weight:700 !important;
}
.logo-sub-text{
  color:var(--z-gold-dk) !important;
  letter-spacing:5px !important; font-weight:500 !important; font-size:.62rem !important;
}
.logo-line{ background:linear-gradient(90deg,var(--z-gold),transparent) !important; }
.nav-links a{ position:relative; color:var(--z-ink) !important; font-weight:500; transition:color .25s var(--z-ease); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:linear-gradient(90deg,var(--z-rose),var(--z-gold)); transition:width .3s var(--z-ease);
}
.nav-links a:hover{ color:var(--z-rose) !important; }
.nav-links a:hover::after{ width:100%; }
.search-box input, #searchInput{
  border:1px solid var(--z-line-2) !important; background:var(--z-surface) !important;
  border-radius:999px !important; transition:border-color .25s var(--z-ease), box-shadow .25s var(--z-ease);
}
.search-box input:focus, #searchInput:focus{
  border-color:var(--z-rose) !important; box-shadow:0 0 0 3px rgba(192,138,74,.12) !important; outline:none !important;
}
.cart-box{ font-weight:600 !important; color:var(--z-ink) !important; transition:transform .2s var(--z-ease); }
.cart-box:hover{ transform:translateY(-1px); color:var(--z-rose) !important; }
#loginBtn, .login-btn{
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important;
  color:#fff !important; border:none !important; border-radius:999px !important; font-weight:600 !important;
}

/* ============================================================
   OFFER BAR — solid aubergine, champagne text
   ============================================================ */
.offer-bar{
  background:var(--z-ink) !important; color:var(--z-gold-lt) !important;
  letter-spacing:1.5px !important; font-weight:500 !important; font-size:.78rem !important;
  text-transform:uppercase; animation:none !important;
}

/* ============================================================
   HERO — cinematic, editorial typography
   ============================================================ */
.hero::before{
  background:linear-gradient(180deg,rgba(38,29,35,.28),rgba(38,29,35,.55)) !important;
}
.hero-content h1{
  font-family:'Playfair Display',serif !important; font-weight:800 !important;
  letter-spacing:.5px; line-height:1.08; text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.hero-content p{ font-weight:300 !important; letter-spacing:.3px; }
.hero-tag{
  display:inline-block; letter-spacing:3.5px; text-transform:uppercase; font-size:.7rem;
  padding:7px 18px; border-radius:999px; color:var(--z-gold-lt);
  border:1px solid rgba(227,206,156,.5); background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
}

/* ============================================================
   BUTTONS — confident solid rose, subtle lift (no tacky glow)
   ============================================================ */
.btn, .hero-btn, .buy-now-btn,
button[onclick="placeOrder()"], .success-buttons a.track-btn,
.container button[onclick="track()"], #loginBtn, .sendOtpBtn{
  font-family:'Poppins',sans-serif !important; font-weight:600 !important; letter-spacing:.4px !important;
  border-radius:999px !important; border:none !important;
  transition:transform .28s var(--z-ease), box-shadow .28s var(--z-ease), filter .28s var(--z-ease) !important;
}
.hero-btn, .buy-now-btn,
button[onclick="placeOrder()"], .success-buttons a.track-btn,
.container button[onclick="track()"]{
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important;
  color:#fff !important; text-shadow:none !important;
  box-shadow:0 10px 26px rgba(42,26,16,.30) !important;
}
.hero-btn:hover, .buy-now-btn:hover,
button[onclick="placeOrder()"]:hover, .success-buttons a.track-btn:hover,
.container button[onclick="track()"]:hover{
  transform:translateY(-3px) !important; box-shadow:0 16px 36px rgba(42,26,16,.42) !important;
  filter:brightness(1.04);
}
.hero-btn-ghost{
  background:transparent !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.7) !important; border-radius:999px !important;
}
.hero-btn-ghost:hover{ border-color:var(--z-gold-lt) !important; color:var(--z-gold-lt) !important; transform:translateY(-3px); }

/* ============================================================
   SECTION HEADINGS — centered champagne hairline underline
   ============================================================ */
.products h2, .trending h2, .under-99 h2, .trust-section h2, .container h2{
  font-family:'Playfair Display',serif !important; letter-spacing:.4px; text-align:center;
}
.products h2::after, .trending h2::after, .under-99 h2::after, .trust-section h2::after{
  content:""; display:block; width:60px; height:2px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--z-gold),var(--z-rose)); border-radius:2px;
}
.products > p, .trending > p{ color:var(--z-ink-soft) !important; }

/* ============================================================
   PRODUCT CARDS — clean surface, hairline, lift + image zoom
   ============================================================ */
.card, .under-99-card, .related-card, .msearch-card{
  background:var(--z-surface) !important;
  border:1px solid var(--z-line) !important;
  border-radius:18px !important; overflow:hidden;
  box-shadow:var(--z-sh-sm) !important;
  transition:transform .38s var(--z-ease), box-shadow .38s var(--z-ease), border-color .38s var(--z-ease) !important;
}
.card:hover, .under-99-card:hover, .related-card:hover{
  transform:translateY(-8px) !important; box-shadow:var(--z-sh-md) !important;
  border-color:rgba(192,138,74,.35) !important;
}
.card img, .under-99-card img, .related-card img{ transition:transform .6s var(--z-ease) !important; }
.card:hover img, .under-99-card:hover img, .related-card:hover img{ transform:scale(1.06) !important; }
.card h3, .card-title{ font-family:'Playfair Display',serif !important; color:var(--z-ink) !important; font-weight:600 !important; }
.card p, .card small{ color:var(--z-ink-soft) !important; }
/* price hierarchy */
.price, .price-left{ color:var(--z-ink) !important; }
.price .mrp, .price s, .price del, .card s, .card del{ color:var(--z-ink-faint) !important; }
.badge{
  border-radius:999px !important; font-weight:600 !important; letter-spacing:.3px !important;
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important;
}
.badge.bestseller{ background:linear-gradient(135deg,var(--z-gold-dk),var(--z-gold)) !important; color:#2a2016 !important; }

/* card CTA hierarchy: filled Add, outline Buy */
.card .btn{
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important;
  border:1px solid transparent !important; border-radius:12px !important; font-weight:600 !important;
}
.card .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(42,26,16,.28) !important; }
.card .btn:last-of-type{ background:var(--z-surface) !important; color:var(--z-rose-deep) !important; border:1.5px solid var(--z-rose) !important; }
.card .btn:last-of-type:hover{ background:var(--z-blush) !important; }

/* ============================================================
   TRUST / FEATURE BOXES
   ============================================================ */
.trust-section{ background:var(--z-canvas-2) !important; }
.trust-box{
  background:var(--z-surface) !important; border:1px solid var(--z-line) !important;
  border-radius:16px !important; box-shadow:var(--z-sh-sm) !important;
  transition:transform .3s var(--z-ease), box-shadow .3s var(--z-ease) !important;
}
.trust-box:hover{ transform:translateY(-5px); box-shadow:var(--z-sh-md) !important; }
.trust-box span{ color:var(--z-rose) !important; }

/* ============================================================
   UNDER-99 banner
   ============================================================ */
.under-99-banner{
  background:linear-gradient(135deg,var(--z-ink),var(--z-rose-deep)) !important; color:#fff !important;
  border-radius:20px !important;
}
.under-99-banner h2, .under-99-banner p{ color:#fff !important; }
.under-99-banner button{
  background:var(--z-gold) !important; color:#2a2016 !important; border-radius:999px !important; font-weight:700 !important; border:none !important;
}

/* ============================================================
   CART DRAWER — premium surface
   ============================================================ */
#cartBox{ background:var(--z-surface) !important; border-left:1px solid var(--z-line) !important; }
.total-box{ border-top:1px solid var(--z-line) !important; }
.total-box h2{ color:var(--z-rose-deep) !important; }
.delivery-box{ background:var(--z-blush) !important; border-radius:12px !important; color:var(--z-ink) !important; }
.qty-controls button{ background:var(--z-canvas-2) !important; color:var(--z-ink) !important; border:1px solid var(--z-line-2) !important; border-radius:8px !important; }
.qty-controls button:hover{ background:var(--z-rose) !important; color:#fff !important; }
.remove-btn{ color:var(--z-rose) !important; }

/* ============================================================
   FORMS / INPUTS (login, checkout, track)
   ============================================================ */
.login-field input, .container input, input[type=text], input[type=tel], input[type=number], textarea, select{
  border:1px solid var(--z-line-2) !important; border-radius:12px !important; background:var(--z-surface) !important;
  color:var(--z-ink) !important; transition:border-color .25s var(--z-ease), box-shadow .25s var(--z-ease);
}
.login-field input:focus, .container input:focus, input:focus, textarea:focus, select:focus{
  border-color:var(--z-rose) !important; box-shadow:0 0 0 3px rgba(192,138,74,.12) !important; outline:none !important;
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filter-btn{
  border:1px solid var(--z-line-2) !important; background:var(--z-surface) !important; color:var(--z-ink-soft) !important;
  border-radius:999px !important; font-weight:500 !important; transition:all .25s var(--z-ease) !important;
}
.filter-btn:hover{ border-color:var(--z-rose) !important; color:var(--z-rose) !important; }
.filter-btn.active{ background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important; border-color:transparent !important; }

/* ============================================================
   FOOTER — deep aubergine, ivory text, champagne hairline
   ============================================================ */
.footer{ background:var(--z-ink) !important; color:#EDE3DD !important; position:relative; }
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--z-gold),var(--z-rose),transparent);
}
.footer h3, .footer h4, .footer-col h3, .footer-col h4{ color:#fff !important; }
.footer a, .footer-col a{ color:#C9B9BF !important; transition:color .25s var(--z-ease), padding-left .25s var(--z-ease); }
.footer a:hover, .footer-col a:hover{ color:var(--z-gold-lt) !important; padding-left:4px; }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.whatsapp-float{ box-shadow:0 10px 26px rgba(37,211,102,.35) !important; }

/* ============================================================
   SCROLL REVEAL (paired with zuli-reveal.js)
   ============================================================ */
.z-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--z-ease), transform .7s var(--z-ease); }
.z-reveal.z-in{ opacity:1; transform:none; }

/* ============================================================
   MOTION / ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .z-reveal{ opacity:1 !important; transform:none !important; }
}
@media (max-width:600px){
  .card:hover, .under-99-card:hover{ transform:translateY(-4px) !important; }
  .card:hover img, .under-99-card:hover img{ transform:scale(1.03) !important; }
  .hero-content h1{ letter-spacing:.3px; }
}

/* =====================================================================
   v2 PATCH — offer bar one-line + full cross-page theme unification
   (legal/info pages, success page, admin panel) + hero video wash.
   Everything below is visual-only and loads last, so it wins.
   ===================================================================== */

/* 1) OFFER BAR — force a single line on every screen size */
.offer-bar{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  flex-wrap:nowrap !important;
  padding-left:12px !important; padding-right:12px !important; /* keep mobile padding-top:60px layering intact */
  line-height:1 !important;
  font-size:clamp(.5rem, 2.7vw, .8rem) !important;
}
@media (max-width:600px){ .offer-bar{ letter-spacing:.4px !important; } }
@media (max-width:360px){ .offer-bar{ letter-spacing:.2px !important; font-size:clamp(.46rem,2.6vw,.72rem) !important; } }

/* 2) HERO VIDEO — rose-noir wash so the video matches the theme */
.hero::before{
  background:linear-gradient(180deg, rgba(38,29,35,.30) 0%, rgba(42,26,16,.34) 55%, rgba(38,29,35,.74) 100%) !important;
}
.hero-video, .hero video{ filter:saturate(.9) contrast(1.04) brightness(.96) !important; }

/* 3) LEGAL / INFO PAGES (help • returns • privacy • shipping • terms) */
.lz-logo-main{ background:none !important; -webkit-text-fill-color:var(--z-ink) !important; color:var(--z-ink) !important; letter-spacing:3px !important; }
.lz-logo-sub{ color:var(--z-gold-dk) !important; }
.lz-nav{ background:rgba(250,246,242,.86) !important; border-bottom:1px solid var(--z-line) !important; }
.lz-nav-links a:hover{ background:#fff !important; color:var(--z-rose) !important; }
.lz-nav-links a.cta{ background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important; box-shadow:0 8px 18px rgba(42,26,16,.32) !important; }
.lz-hero-icon{ background:var(--z-blush) !important; border:1px solid rgba(192,138,74,.3) !important; box-shadow:0 14px 30px rgba(42,26,16,.18) !important; }
.lz-hero h1::after{ background:linear-gradient(90deg,transparent,var(--z-rose),transparent) !important; }
.lz-breadcrumb a:hover{ color:var(--z-rose) !important; }
.lz-updated{ color:var(--z-rose-deep) !important; border:1px solid rgba(192,138,74,.35) !important; background:var(--z-blush) !important; }
.lz-toc h4{ color:var(--z-rose-deep) !important; }
.lz-toc a:hover{ background:var(--z-blush) !important; border-left-color:var(--z-rose) !important; color:var(--z-ink) !important; }
.lz-sec::before{ background:linear-gradient(180deg,var(--z-gold),var(--z-rose),var(--z-rose-deep)) !important; opacity:1 !important; }
.lz-ic, .lz-tile .em, .lz-stat .em{ background:var(--z-blush) !important; border:1px solid rgba(192,138,74,.25) !important; }
.lz-sec ul li::before, .lz-sec ol li::before{ background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important; }
.lz-callout{ background:var(--z-blush) !important; border:1px solid rgba(192,138,74,.3) !important; }
.lz-callout b{ color:var(--z-rose-deep) !important; }
.lz-tile:hover{ box-shadow:0 18px 38px rgba(42,26,16,.14) !important; }
.lz-tile .go{ color:var(--z-rose-deep) !important; }
.lz-faq summary::after{ color:var(--z-rose) !important; }
.lz-cta{ background:linear-gradient(135deg,var(--z-ink),var(--z-rose-deep)) !important; }
.lz-cta::before{ background:radial-gradient(600px 200px at 50% -20%, rgba(198,166,103,.32), transparent 70%) !important; }
.lz-btn.gold{ background:linear-gradient(135deg,var(--z-gold),var(--z-gold-dk)) !important; color:#2a2016 !important; box-shadow:0 10px 24px rgba(169,134,63,.4) !important; }
.lz-footer{ background:linear-gradient(180deg,#2a2027,#171216) !important; }
.lz-foot-brand{ color:var(--z-gold-lt) !important; }
.lz-foot-brand span{ color:var(--z-gold) !important; }
.lz-foot-links a:hover{ color:var(--z-gold-lt) !important; }

/* 4) SUCCESS / ORDER-CONFIRMATION PAGE */
.success-card::before{ background:linear-gradient(90deg,var(--z-gold),var(--z-rose),var(--z-rose-deep)) !important; }
.success-subtitle strong, #successOrderId, .delivery-card p, .thank-you-footer strong{ color:var(--z-rose-deep) !important; }
.order-info{ background:var(--z-blush) !important; border:1px solid var(--z-line) !important; }
.delivery-card{ background:var(--z-blush) !important; border:1px solid rgba(192,138,74,.28) !important; }
.delivery-icon{ border:1px solid rgba(192,138,74,.25) !important; box-shadow:0 10px 22px rgba(42,26,16,.14) !important; }
.card-title{ color:var(--z-ink) !important; }
.success-buttons a.track-btn{ background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important; border:none !important; box-shadow:0 12px 26px rgba(42,26,16,.4) !important; }
.success-buttons a.shop-btn{ background:#fff !important; color:var(--z-rose-deep) !important; border:1.5px solid var(--z-rose) !important; }

/* 5) ADMIN PANEL */
.stat-box{ background:linear-gradient(135deg,#fff,var(--z-blush)) !important; border:1px solid var(--z-line) !important; border-top:3px solid var(--z-rose) !important; }
.stat-box span{ color:var(--z-ink) !important; }
.order-card{ border:1px solid var(--z-line) !important; }
.order-card button:hover{ background:var(--z-blush) !important; border-color:var(--z-rose) !important; }

/* =====================================================================
   NOIR LUXE polish — gold accents on a near-black + cream base.
   ===================================================================== */
.nav-links a:hover, .cart-box:hover{ color:var(--z-gold-dk) !important; }
.filter-btn:hover{ border-color:var(--z-gold) !important; color:var(--z-gold-dk) !important; }
/* gold discount badges; bestseller = black w/ gold text for contrast */
.badge{ background:linear-gradient(135deg,var(--z-gold-lt),var(--z-gold-dk)) !important; color:#3a2410 !important; }
.badge.bestseller{ background:linear-gradient(135deg,var(--z-ink),#000) !important; color:var(--z-gold-lt) !important; }
/* outline CTA -> ink outline */
.card .btn:last-of-type{ color:var(--z-ink) !important; border-color:var(--z-ink) !important; }
.card .btn:last-of-type:hover{ background:var(--z-blush) !important; }
/* gold highlights where rose used to pop */
.trust-box span{ color:var(--z-gold-dk) !important; }
.total-box h2{ color:var(--z-ink) !important; }
.success-subtitle strong, #successOrderId, .delivery-card p, .thank-you-footer strong, .lz-updated, .lz-toc h4{ color:var(--z-gold-dk) !important; }
.stat-box{ border-top:3px solid var(--z-gold) !important; }
.lz-footer{ background:linear-gradient(180deg,#241610,#120b06) !important; }
/* subtle gold glow on primary CTAs for a jewel-like finish */
.hero-btn:hover, .buy-now-btn:hover{ box-shadow:0 16px 36px rgba(42,26,16,.42), 0 0 0 1px rgba(192,138,74,.35) !important; }

/* =====================================================================
   PREMIUM PAGES — million-dollar finish on checkout / track / cart /
   login / admin. CSS-only: no markup or JS hooks touched.
   ===================================================================== */
/* Elevated card surfaces */
.summary-box, .payment-card, .zuli-coupon, .total-box, .zt-track, .box{
  background:var(--z-surface) !important;
  border:1px solid var(--z-line) !important;
  border-radius:18px !important;
  box-shadow:0 12px 34px rgba(42,26,16,.08) !important;
}
/* Playfair section titles w/ caramel underline */
.section-title, .summary-header, .zt-sec-title, .zuli-coupon-title{
  font-family:'Playfair Display',serif !important;
  color:var(--z-ink) !important; letter-spacing:.3px;
}
/* Refined form fields + caramel focus ring */
.input-group input, .box input, .container input[type="text"],
.container input[type="tel"], .container input[type="email"], .container textarea, select{
  border:1.5px solid var(--z-line) !important; border-radius:12px !important;
  background:#fff !important; transition:border-color .2s, box-shadow .2s !important;
}
.input-group input:focus, .box input:focus, .container input:focus,
.container textarea:focus, select:focus{
  border-color:var(--z-gold) !important;
  box-shadow:0 0 0 3px rgba(192,138,74,.16) !important; outline:none !important;
}
/* Checkout stepper */
.ck-step-dot{ background:var(--z-line) !important; color:var(--z-ink-soft) !important; }
.ck-step.active .ck-step-dot, .ck-step-dot.active{
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important;
  color:#fff !important; box-shadow:0 4px 12px rgba(90,54,32,.3) !important;
}
.ck-step-line{ background:var(--z-line) !important; }
.ck-step-line.active{ background:var(--z-gold) !important; }
/* Trust + status pills */
.trust-badge, .zt-badge{
  background:var(--z-blush) !important; color:var(--z-ink) !important;
  border:1px solid var(--z-line) !important; border-radius:999px !important;
}
/* Payment + coupon accents */
.payment-card.active, .payment-card:hover{ border-color:var(--z-gold) !important; background:var(--z-blush) !important; }
.payment-icon{ color:var(--z-rose) !important; }
.zuli-coupon{ border:1.5px dashed var(--z-gold) !important; background:var(--z-blush) !important; }
.zuli-coupon-title{ color:var(--z-rose-deep) !important; }
/* Totals emphasis */
.summary-price, .zt-total, .total-box strong{ color:var(--z-ink) !important; font-weight:700 !important; }
/* Track timeline */
.zt-line{ background:var(--z-line) !important; }
.zt-line-fill{ background:linear-gradient(90deg,var(--z-gold),var(--z-rose)) !important; }
.zt-dot{ border-color:var(--z-gold) !important; }
.zt-step.done .zt-dot, .zt-dot.active{ background:var(--z-rose) !important; border-color:var(--z-rose) !important; }
.zt-oid, .zt-eta-val, .verified-badge, .verified-phone{ color:var(--z-gold-dk) !important; }
/* Chocolate scrollbar site-wide */
*::-webkit-scrollbar-thumb{ background:linear-gradient(var(--z-rose),var(--z-rose-deep)) !important; }
*::-webkit-scrollbar-track{ background:var(--z-canvas-2) !important; }

/* Shade swatch active indicator -> chocolate (authoritative, any page) */
.shade.active, .active-shade.active, .shade.active-shade.active{
  border:2px solid var(--z-rose) !important;
  box-shadow:0 0 0 3px rgba(192,138,74,.35) !important;
}

/* =====================================================================
   UNIFIED PREMIUM HEADER — one glassy chocolate navbar on every page.
   ===================================================================== */
.ck-topbar, .tk-head, .lz-nav, nav.product-header, .z-topbar{
  background:rgba(255,253,250,.82) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%) !important;
  backdrop-filter:blur(16px) saturate(160%) !important;
  border-bottom:1px solid rgba(90,54,32,.16) !important;
  box-shadow:0 8px 26px rgba(42,26,16,.06) !important;
}
/* Brand wordmark unified (Playfair chocolate + caramel micro-sub) */
.ck-brand-main, .tk-brand, .lz-logo-main, .z-brand-main{
  font-family:'Playfair Display',serif !important; font-weight:900 !important;
  font-size:24px !important; letter-spacing:4px !important; line-height:1 !important;
  color:var(--z-ink) !important; -webkit-text-fill-color:var(--z-ink) !important; background:none !important;
}
.ck-brand-sub, .tk-brand-sub, .lz-logo-sub, .z-brand-sub{
  font-family:'Poppins',sans-serif !important; font-size:9px !important; font-weight:500 !important;
  letter-spacing:5px !important; margin-top:3px !important; text-transform:uppercase !important;
  color:var(--z-gold-dk) !important; -webkit-text-fill-color:var(--z-gold-dk) !important;
}
/* Track header -> sticky centered bar like the rest */
.tk-head{ position:sticky !important; top:0 !important; z-index:900 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:2px !important; padding:13px 20px !important; }
/* Injected bar for cart/login (fixed so it never breaks their centering) */
.z-topbar{ position:fixed !important; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:center; }
.z-brand{ display:flex; flex-direction:column; align-items:center; line-height:1; text-decoration:none; }
body:has(.z-topbar){ padding-top:66px !important; }

/* =====================================================================
   ZULI MOTION — premium, GPU-only, mobile-first animations (additive).
   Only transform/opacity animate = no layout thrash = lag-free on phones.
   Fully reduced-motion aware; never hides content permanently.
   ===================================================================== */

/* Mobile smoothness: remove 300ms tap delay, tap highlight, scroll jank */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:contain; }
a, button, .btn, .card, [onclick], .shade, .size-btn, .filter-btn, .cart-box,
.buy-now-btn, .btn-premium, .lz-btn, .back-btn{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
/* Momentum scrolling for any scroll regions */
.related-grid, .products, .zt-items, .cart-items, .table-wrap, .pdp-thumbs{
  -webkit-overflow-scrolling:touch;
}

/* Hero entrance — staggered fade-up (CSS-only, GPU) */
.hero-content > *{ animation:zHeroUp .85s var(--z-ease) both; }
.hero-content > *:nth-child(1){ animation-delay:.05s }
.hero-content > *:nth-child(2){ animation-delay:.16s }
.hero-content > *:nth-child(3){ animation-delay:.27s }
.hero-content > *:nth-child(4){ animation-delay:.38s }
.hero-content > *:nth-child(5){ animation-delay:.49s }
@keyframes zHeroUp{ from{opacity:0; transform:translate3d(0,26px,0)} to{opacity:1; transform:none} }

/* Image fade-in (JS adds .z-img only to not-yet-loaded imgs; safety net shows) */
img.z-img{ opacity:0; }
img.z-img-in{ opacity:1; transition:opacity .55s ease; }

/* Tap / press feedback — snappy GPU transform only (mobile + PC) */
button:active, .btn:active, .hero-btn:active, .hero-btn-ghost:active, .buy-now-btn:active,
.btn-premium:active, .filter-btn:active, .login-btn:active, .track-btn:active, .shop-btn:active,
.notify-btn:active, .lz-btn:active, .back-btn:active, .size-btn:active, .shade:active,
.cart-box:active, .card:active, .under-99-card:active, .related-card:active, .z-brand:active{
  transform:scale(.955) !important; transition:transform .09s ease !important;
}
/* GPU compositing hints for the elements that move */
.card, .under-99-card, .related-card, .hero-btn, .buy-now-btn, .btn{ backface-visibility:hidden; }

/* Reduced motion: kill all motion, keep everything visible */
@media (prefers-reduced-motion:reduce){
  .hero-content > *{ animation:none !important; }
  img.z-img, img.z-img-in{ opacity:1 !important; }
  button:active, .btn:active, .card:active, .under-99-card:active,
  .related-card:active, .hero-btn:active, .shade:active, .size-btn:active{ transform:none !important; }
}

/* =====================================================================
   CART BOUNCE — pop when an item is added (GPU transform only).
   ===================================================================== */
@keyframes zCartPop{ 0%{transform:scale(1)} 28%{transform:scale(1.22)} 55%{transform:scale(.9)} 100%{transform:scale(1)} }
.cart-box.z-cart-pop, .cart-icon.z-cart-pop, .z-cart-pop{ animation:zCartPop .5s var(--z-ease); transform-origin:center; }
@keyframes zCountPop{ 0%{transform:scale(1)} 40%{transform:scale(1.55)} 100%{transform:scale(1)} }
#cartCount.z-count-pop{ display:inline-block; animation:zCountPop .5s var(--z-ease); color:var(--z-rose) !important; }
@media (prefers-reduced-motion:reduce){ .z-cart-pop, #cartCount.z-count-pop{ animation:none !important; } }

/* =====================================================================
   PREMIUM SEARCH — desktop dropdown + mobile overlay, chocolate & smooth.
   ===================================================================== */
/* Navbar input focus ring */
.navbar #searchInput:focus, .search-box input:focus, #searchInput:focus{
  border-color:var(--z-gold) !important; box-shadow:0 0 0 4px rgba(192,138,74,.16) !important;
}
/* Desktop suggestions dropdown */
#suggestionsBox{
  border:1px solid var(--z-line) !important; border-radius:18px !important;
  background:rgba(255,253,250,.98) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 22px 54px rgba(42,26,16,.16) !important; overflow:hidden;
  padding:6px !important; margin-top:10px !important; animation:zSugIn .22s var(--z-ease) both;
}
@keyframes zSugIn{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
#suggestionsBox .suggestion-item, #suggestionsBox > div{
  border:0 !important; border-radius:12px !important;
  transition:background .18s var(--z-ease), transform .18s var(--z-ease) !important;
}
#suggestionsBox .suggestion-item:hover, #suggestionsBox > div:hover{ background:var(--z-blush) !important; transform:translateX(2px); }
#suggestionsBox .suggestion-image, #suggestionsBox .suggestion-item img{ border-radius:10px !important; border:1px solid var(--z-line) !important; }
.search-highlight{ background:var(--z-gold-lt) !important; color:var(--z-ink) !important; border-radius:3px; padding:0 2px; }

/* Mobile full-screen search overlay */
#mSearchOverlay{ background:var(--z-canvas) !important; }
.msearch-top{ background:rgba(255,253,250,.92) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--z-line) !important; }
.msearch-field{ border:1.5px solid var(--z-line-2) !important; border-radius:14px !important; background:#fff !important; }
.msearch-field:focus-within{ border-color:var(--z-gold) !important; box-shadow:0 0 0 4px rgba(192,138,74,.16) !important; }
.msearch-reshead, .msearch-sec-head span{ color:var(--z-gold-dk) !important; }
.msearch-count{ color:#fff !important; background:var(--z-rose); border-radius:999px; padding:1px 9px; font-weight:700; }
.msearch-link{ color:var(--z-rose) !important; }
.msearch-chip{ background:var(--z-surface) !important; border:1px solid var(--z-line-2) !important; border-radius:999px !important; color:var(--z-ink) !important; transition:transform .12s ease, background .18s, border-color .18s !important; }
.msearch-chip:active{ transform:scale(.94); background:var(--z-blush) !important; border-color:var(--z-gold) !important; }
.msearch-cats{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; }
.msearch-cat{ background:var(--z-surface) !important; border:1px solid var(--z-line) !important; border-radius:16px !important; padding:14px 8px !important; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .14s var(--z-ease), box-shadow .18s !important; }
.msearch-cat:active{ transform:scale(.95) !important; box-shadow:0 8px 20px rgba(42,26,16,.1) !important; }
.msearch-cat-ic{ font-size:26px; }
.msearch-cat-lb{ font-size:12px; font-weight:600; color:var(--z-ink) !important; }
.msearch-card{ background:var(--z-surface) !important; border:1px solid var(--z-line) !important; border-radius:14px !important; transition:transform .14s var(--z-ease), box-shadow .18s !important; }
.msearch-card:active{ transform:scale(.96) !important; box-shadow:0 10px 24px rgba(42,26,16,.12) !important; }
.msearch-seeall{ margin:14px 4px !important; width:calc(100% - 8px); padding:14px !important; border:0 !important; border-radius:14px !important;
  background:linear-gradient(135deg,var(--z-rose),var(--z-rose-deep)) !important; color:#fff !important; font-weight:700 !important; letter-spacing:.02em;
  box-shadow:0 12px 28px rgba(90,54,32,.28) !important; transition:transform .12s ease !important; }
.msearch-seeall:active{ transform:scale(.98) !important; }
.msearch-body .suggestion-item:active{ background:var(--z-blush) !important; }
/* Smooth staggered fade-in of results/cards */
#mSearchBody .suggestion-item, #mSearchBody .msearch-card, #mSearchBody .msearch-cat, #mSearchBody .msearch-chip{ animation:zRowIn .26s var(--z-ease) both; }
@keyframes zRowIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){
  #suggestionsBox, #mSearchBody .suggestion-item, #mSearchBody .msearch-card, #mSearchBody .msearch-cat, #mSearchBody .msearch-chip{ animation:none !important; }
}

/* =====================================================================
   SKELETON SHIMMER — premium loading state on images (network-safe).
   ===================================================================== */
img.z-sk{
  background-image:linear-gradient(100deg, var(--z-canvas-2) 25%, var(--z-blush) 50%, var(--z-canvas-2) 75%) !important;
  background-size:200% 100% !important; background-repeat:no-repeat !important;
  animation:zShimmer 1.15s linear infinite;
}
img.z-sk-done{ animation:none !important; background-image:none !important; }
@keyframes zShimmer{ 0%{background-position:180% 0} 100%{background-position:-180% 0} }

/* =====================================================================
   PRODUCT IMAGE ZOOM — smooth PC magnify + mobile tap-zoom/pan.
   ===================================================================== */
.zoom-container{ overflow:hidden !important; cursor:zoom-in; }
.zoom-container.z-zoomed{ cursor:zoom-out; }
.product-detail img#productImage, #productImage{ transition:transform .25s var(--z-ease); will-change:transform; }
@media (prefers-reduced-motion:reduce){ img.z-sk{ animation:none !important; } }

/* =====================================================================
   FLY-TO-CART — premium look for the flying image clone.
   ===================================================================== */
.z-fly{ box-shadow:0 14px 34px rgba(42,26,16,.30); border:1px solid var(--z-line); background:var(--z-surface); }
@media (prefers-reduced-motion:reduce){ .z-fly{ display:none !important; } }