/* ============================================================
   TAQUA SILKS — Ultra-Premium Luxury Silk Saree Website
   Design system: Royal Violet silk · Zari gold accents
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --violet:        #5E2B97;
  --violet-light:  #7d43bd;
  --deep-purple:   #43205C;
  --deep-purple-2: #2c1440;
  --midnight:      #1b0d2b;
  --magenta:       #9b1fb5;   /* logo bright magenta-purple */
  --magenta-deep:  #4a1068;   /* logo mid/edge purple */
  --gold:          #D4AF37;
  --gold-light:    #f3d98b;
  --gold-deep:     #a9822a;
  --ivory:         #f7f1e6;
  --white:         #ffffff;
  --soft-gold:     #e8d5a3;

  --glass-bg:      rgba(67, 32, 92, 0.35);
  --glass-border:  rgba(212, 175, 55, 0.35);
  --glass-blur:    18px;

  --font-head: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  --radius:      18px;
  --radius-lg:   28px;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.55);
  --shadow-gold: 0 10px 40px -8px rgba(212,175,55,0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ivory);
  /* Logo-matched purple layout: magenta glow at top fading into deep purple */
  background:
    radial-gradient(95% 55% at 50% 0%, rgba(155, 31, 181, 0.55) 0%, rgba(74, 16, 104, 0.25) 42%, transparent 70%),
    linear-gradient(180deg, #3a1256 0%, #2a0f42 50%, var(--midnight) 100%);
  background-attachment: fixed;
  background-color: var(--midnight);
  line-height: 1.7;
  overflow-x: hidden;
  font-weight: 300;
  letter-spacing: 0.2px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--deep-purple-2); }

/* ---------- Silk fabric background layers ---------- */
/* Woven jacquard weave (fine diagonal threads) */
.silk-weave {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px);
}

/* Global immersive body backdrop = luxury silk violet gradient + moving sheen */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(125,67,189,0.55), transparent 55%),
    radial-gradient(120% 90% at 85% 20%, rgba(94,43,151,0.55), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(27,13,43,0.9), transparent 60%),
    linear-gradient(160deg, #2c1440 0%, #43205C 40%, #3a1a52 65%, #1b0d2b 100%);
}
/* Moving silk sheen + woven texture */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(48deg, rgba(255,255,255,0.03) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-42deg, rgba(0,0,0,0.045) 0 3px, transparent 3px 8px);
  background-blend-mode: overlay;
  opacity: 0.9;
  animation: silkDrift 22s ease-in-out infinite alternate;
}
@keyframes silkDrift {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0.001deg); }
  100% { transform: translate3d(2%, 1%, 0) rotate(0.001deg); }
}

/* ---------- Traditional heritage backdrop ----------
   Jaali lattice + zari buti brocade + lotus mandala medallions,
   woven behind everything as a hand-loom saree ground. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    url("../images/motif-mandala.svg"),
    url("../images/motif-mandala.svg"),
    url("../images/pattern-buti.svg"),
    url("../images/pattern-jaali.svg");
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position:
    left -180px top -200px,
    right -180px bottom -200px,
    center center,
    center center;
  background-size:
    clamp(420px, 46vw, 700px) auto,
    clamp(420px, 46vw, 700px) auto,
    clamp(130px, 13vw, 180px) auto,
    clamp(88px, 9vw, 120px) auto;
  animation: mandalaBreathe 26s ease-in-out infinite alternate;
}

/* Kanchipuram temple (kumbam) zari borders down both edges of the page */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("../images/border-temple.svg"),
    url("../images/border-temple-right.svg");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: clamp(30px, 3.4vw, 54px) auto;
}

@keyframes mandalaBreathe {
  0%   { opacity: 0.16; background-position: left -180px top -200px, right -180px bottom -200px, center center, center center; }
  100% { opacity: 0.24; background-position: left -160px top -220px, right -160px bottom -180px, center 30px, center 20px; }
}

/* Floating gold particle canvas */
#particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before, .eyebrow.center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::before { background: linear-gradient(90deg, var(--gold), transparent); }

.section-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--white);
  margin: 14px 0 8px;
}
.section-title .accent { color: var(--gold); font-style: italic; }
.section-sub {
  max-width: 620px;
  color: rgba(247,241,230,0.75);
  font-weight: 300;
  font-size: 1.02rem;
}

/* Gold gradient text shimmer */
.gold-text {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-light) 45%, var(--gold) 60%, var(--gold-light) 80%, var(--gold-deep));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: goldShine 6s linear infinite;
}
@keyframes goldShine { to { background-position: 200% center; } }

/* ---------- Layout ---------- */
.container { width: min(92%, var(--maxw)); margin-inline: auto; }
section { position: relative; padding: clamp(70px, 9vw, 130px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* Silk divider between sections */
.silk-divider {
  height: 2px; border: none;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), var(--gold), rgba(212,175,55,0.15), transparent);
  width: min(92%, var(--maxw));
  margin: 0 auto;
  position: relative;
}
.silk-divider::after {
  content: "❖";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  color: var(--gold); font-size: 0.9rem;
  background: var(--midnight); padding: 0 14px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px;
  border-radius: 60px;
  font-family: var(--font-body);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), color 0.45s var(--ease);
  isolation: isolate;
}
.btn i { transition: transform 0.4s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn-primary {
  background: linear-gradient(120deg, var(--violet), var(--violet-light));
  color: var(--white);
  box-shadow: 0 14px 34px -12px rgba(94,43,151,0.9), inset 0 0 0 1px rgba(212,175,55,0.4);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold), var(--gold-light));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.btn-primary:hover { color: var(--deep-purple-2); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.btn-primary:hover::before { opacity: 1; }
.btn-ghost {
  border: 1px solid rgba(212,175,55,0.55);
  color: var(--soft-gold);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--gold); color: var(--deep-purple-2); transform: translateY(-3px); box-shadow: var(--shadow-gold); }

/* Ripple */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.5); animation: rippleAnim 0.6s var(--ease); pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ---------- Glass card base ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #2c1440, #1b0d2b);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.loader-mark { text-align: center; }
.loader-mark .logo-lg {
  font-family: var(--font-head); font-size: 3rem; letter-spacing: 4px;
  color: var(--white);
}
.loader-mark .logo-lg b { color: var(--gold); font-weight: 600; }
.loader-bar {
  width: 220px; height: 2px; margin: 22px auto 0;
  background: rgba(212,175,55,0.2); overflow: hidden; border-radius: 2px;
}
.loader-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: loadSlide 1.1s ease-in-out infinite; }
@keyframes loadSlide { 0%{ transform: translateX(-100%);} 100%{ transform: translateX(350%);} }
.loader-mark p { margin-top: 14px; letter-spacing: 5px; font-size: 0.7rem; text-transform: uppercase; color: var(--soft-gold); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: all 0.5s var(--ease);
  padding: 22px 0;
}
.navbar.scrolled {
  padding: 12px 0;
  background: rgba(43,20,64,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,175,55,0.22);
  box-shadow: 0 10px 40px -18px rgba(0,0,0,0.7);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; flex-direction: column; line-height: 1; }

/* Real logo image (images/logo.png) — swapped in automatically when present */
.brand-logo, .preloader-logo { display: none; }
.brand-logo { height: 56px; width: auto; border-radius: 50%; }
.footer .brand-logo { height: 72px; }
.preloader-logo { height: 150px; width: auto; border-radius: 50%; margin: 0 auto 14px; }
.logo-ready .brand-text, .logo-ready .logo-lg { display: none; }
.logo-ready .brand-logo, .logo-ready .preloader-logo { display: block; }
.brand .name { font-family: var(--font-head); font-size: 1.7rem; letter-spacing: 3px; color: var(--white); }
.brand .name b { color: var(--gold); font-weight: 600; }

/* Bilingual logo that fades between English & Tamil on a loop */
.langswap { display: inline-grid; }
.langswap .lang { grid-area: 1 / 1; white-space: nowrap; }
.langswap .lang.ta { font-family: "Noto Serif Tamil", var(--font-head); letter-spacing: 0.5px; }
.langswap .lang.en { opacity: 1; animation: brandFadeEn 7s ease-in-out infinite; }
.langswap .lang.ta { opacity: 0; animation: brandFadeTa 7s ease-in-out infinite; }
@keyframes brandFadeEn { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes brandFadeTa { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
.brand .tag { font-size: 0.55rem; letter-spacing: 5px; text-transform: uppercase; color: var(--soft-gold); margin-top: 3px; }

/* margin-left:auto pushes the links right, next to the hamburger/actions */
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a {
  position: relative; font-size: 0.82rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ivory); font-weight: 400;
  padding: 4px 0; transition: color 0.3s; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a.nav-offer { color: var(--gold); font-weight: 500; }
.nav-links a.nav-offer::before { content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.6rem; margin-right: 5px; vertical-align: middle; }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; color: var(--ivory);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.35s var(--ease);
}
.icon-btn:hover { color: var(--deep-purple-2); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.icon-btn .count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--gold); color: var(--deep-purple-2); border-radius: 10px;
  font-size: 0.62rem; font-weight: 700; display: grid; place-items: center;
  font-family: var(--font-body);
}
.nav-cta { padding: 10px 22px; font-size: 0.82rem; }
.hamburger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; }
.hamburger span { width: 20px; height: 2px; background: var(--gold); transition: 0.3s; }

/* Mobile menu panel */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1200;
  background: linear-gradient(160deg, rgba(43,20,64,0.98), rgba(27,13,43,0.99));
  backdrop-filter: blur(14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  padding: 88px 20px 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform 0.55s var(--ease);
}
/* When content is taller than the screen, align to top so nothing gets cut off. */
.mobile-menu { justify-content: safe center; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { font-family: var(--font-head); font-size: 1.9rem; color: var(--ivory); letter-spacing: 2px; }
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .close { position: absolute; top: 26px; right: 26px; font-size: 1.6rem; color: var(--gold); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 120px; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-title {
  font-size: clamp(2.8rem, 6.2vw, 5.4rem);
  color: var(--white); line-height: 1.02; margin-bottom: 22px;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-sub { max-width: 480px; color: rgba(247,241,230,0.8); font-size: 1.08rem; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; margin-top: 48px; }
.hero-stats .stat b { font-family: var(--font-head); font-size: 2.1rem; color: var(--gold); display: block; }
.hero-stats .stat span { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,241,230,0.6); }

/* Hero visual */
.hero-visual { position: relative; }
.hero-frame {
  position: relative; border-radius: 220px 220px 24px 24px; overflow: hidden;
  contain: paint; isolation: isolate;
  aspect-ratio: 3/4;
  border: 2px solid rgba(212,175,55,0.85);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.35),
    0 0 40px -6px rgba(212,175,55,0.35),
    0 40px 90px -30px rgba(0,0,0,0.7),
    inset 0 0 0 6px rgba(212,175,55,0.12);
  background: linear-gradient(160deg, var(--violet), var(--deep-purple-2));
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; animation: heroFloat 8s ease-in-out infinite; }
@keyframes heroFloat { 0%,100%{ transform: scale(1.01) translateY(0);} 50%{ transform: scale(1.035) translateY(-8px);} }
.hero-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(27,13,43,0.55));
  pointer-events: none;
}
/* floating badge over hero image */
.hero-badge {
  position: absolute; left: -34px; bottom: 22px;
  padding: 16px 20px; border-radius: 16px;
  display: flex; align-items: center; gap: 14px;
  animation: floaty 5s ease-in-out infinite;
}
.hero-badge .medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--deep-purple-2); font-size: 1.2rem; }
.hero-badge b { font-family: var(--font-head); font-size: 1.1rem; color: var(--white); display: block; }
.hero-badge span { font-size: 0.68rem; letter-spacing: 1px; color: var(--soft-gold); text-transform: uppercase; }
.hero-badge.top { top: 28px; right: -28px; left: auto; bottom: auto; animation-delay: -2.5s; }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--soft-gold);
}
.scroll-cue .mouse { width: 24px; height: 40px; border: 1.5px solid rgba(212,175,55,0.6); border-radius: 14px; position: relative; }
.scroll-cue .mouse::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: var(--gold); border-radius: 3px; transform: translateX(-50%); animation: wheel 1.6s infinite; }
@keyframes wheel { 0%{ opacity: 1; top: 8px;} 100%{ opacity: 0; top: 20px;} }

/* ============================================================
   FEATURED COLLECTIONS
   ============================================================ */
.collections-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.collection-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3/4; cursor: pointer;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: var(--shadow-soft);
}
.collection-card .media { position: absolute; inset: 0; }
.collection-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.collection-card:hover .media img { transform: scale(1.12); }
.collection-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(27,13,43,0.35) 55%, rgba(27,13,43,0.92));
}
.collection-card .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px; z-index: 2; }
.collection-card .info .kicker { font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.collection-card .info h3 { font-size: 1.8rem; color: var(--white); margin: 6px 0 2px; }
.collection-card .info .link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--soft-gold);
  opacity: 0; transform: translateY(10px); transition: all 0.5s var(--ease);
}
.collection-card:hover .info .link { opacity: 1; transform: translateY(0); }
/* gold corner frame */
.collection-card .frame {
  position: absolute; inset: 14px; border: 1px solid rgba(212,175,55,0); border-radius: 20px;
  transition: border-color 0.5s var(--ease); z-index: 2; pointer-events: none;
}
.collection-card:hover .frame { border-color: rgba(212,175,55,0.55); }

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why { background: linear-gradient(180deg, transparent, rgba(43,20,64,0.35), transparent); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  padding: 38px 30px; border-radius: var(--radius); text-align: center;
  border: 1px solid rgba(212,175,55,0.16);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.feature-card:hover { transform: translateY(-8px); border-color: rgba(212,175,55,0.5); box-shadow: var(--shadow-gold); }
.feature-card .fi {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem; color: var(--gold);
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.22), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.35);
}
.feature-card h4 { font-size: 1.5rem; color: var(--white); margin-bottom: 8px; }
.feature-card p { font-size: 0.92rem; color: rgba(247,241,230,0.7); font-weight: 300; }

/* ============================================================
   PRODUCT GRID (NEW ARRIVALS) & SLIDER (BEST SELLERS)
   ============================================================ */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card {
  border-radius: var(--radius); overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); border-color: rgba(212,175,55,0.4); }
.product-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
/* Listing pages (men/women/kids) use full-figure 2:3 portrait renders — match the
   frame to the image ratio so the whole figure shows without cropping head/feet. */
.cat-section .product-media { aspect-ratio: 2/3; }
/* Each listing section holds exactly 3 cards — use 3 columns so they span the
   centered container evenly with equal space on the left and right. */
.cat-section .products-grid { grid-template-columns: repeat(3, 1fr); }
.product-card:hover .product-media img { transform: scale(1.1); }
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 6px 12px; border-radius: 30px; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--deep-purple-2);
}
.badge.new { background: linear-gradient(120deg, var(--violet-light), var(--violet)); color: var(--white); }
.product-actions {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 10px;
}
.product-actions button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27,13,43,0.6); backdrop-filter: blur(6px); color: var(--ivory);
  border: 1px solid rgba(212,175,55,0.3);
  opacity: 0; transform: translateX(14px); transition: all 0.4s var(--ease);
}
.product-card:hover .product-actions button { opacity: 1; transform: translateX(0); }
.product-actions button:nth-child(2) { transition-delay: 0.06s; }
.product-actions button:hover { background: var(--gold); color: var(--deep-purple-2); }
.product-actions button.wished { background: var(--gold); color: var(--deep-purple-2); }
.quick-add {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3;
  padding: 12px; border-radius: 40px; text-align: center;
  background: linear-gradient(120deg, var(--violet), var(--violet-light)); color: var(--white);
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  opacity: 0; transform: translateY(18px); transition: all 0.5s var(--ease);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.4);
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.quick-add:hover { background: linear-gradient(120deg, var(--gold-deep), var(--gold)); color: var(--deep-purple-2); }
.product-body { padding: 20px 20px 24px; }
.product-body .cat { font-size: 0.66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.product-body h4 { font-family: var(--font-head); font-size: 1.35rem; color: var(--white); margin: 4px 0 8px; }
.product-body .link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--soft-gold); text-decoration: none;
  transition: gap 0.4s var(--ease), color 0.4s var(--ease);
}
.product-body .link:hover { gap: 14px; color: var(--gold-light); }
.stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 2px; }
.stars span { color: rgba(247,241,230,0.55); font-size: 0.72rem; margin-left: 6px; font-family: var(--font-body); }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.price .now { font-family: var(--font-head); font-size: 1.4rem; color: var(--gold-light); }
.price .was { font-size: 0.85rem; color: rgba(247,241,230,0.45); text-decoration: line-through; }

/* Best sellers slider */
.slider-wrap { position: relative; }
.slider {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 28px; scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider .product-card { flex: 0 0 300px; scroll-snap-align: start; }
.slider-nav { display: flex; gap: 12px; }
.slider-nav button {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(212,175,55,0.4); color: var(--gold); font-size: 1rem;
  transition: all 0.35s var(--ease);
}
.slider-nav button:hover { background: var(--gold); color: var(--deep-purple-2); }
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   BRIDAL BANNER
   ============================================================ */
.bridal {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(212,175,55,0.5);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
}
.bridal .bg { position: absolute; inset: 0; }
.bridal .bg img { width: 100%; height: 100%; object-fit: cover; }
.bridal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,20,64,0.92) 0%, rgba(43,20,64,0.6) 45%, rgba(43,20,64,0.15) 100%); }
.bridal-inner { position: relative; z-index: 2; padding: clamp(50px, 8vw, 110px) clamp(30px, 6vw, 90px); max-width: 640px; }
.bridal-inner h2 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--white); margin: 16px 0 18px; }
.bridal-inner h2 em { color: var(--gold); font-style: italic; }
.bridal-inner p { color: rgba(247,241,230,0.85); margin-bottom: 32px; max-width: 480px; }
/* ornamental temple border top */
.temple-border {
  height: 20px; width: 100%;
  background:
    repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, rgba(212,175,55,0.4), transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16px);
          mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 16px);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-media .main {
  border-radius: 24px 24px 160px 160px; overflow: hidden; aspect-ratio: 4/5;
  border: 1px solid rgba(212,175,55,0.4); box-shadow: var(--shadow-soft);
}
.about-media .main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.about-media .float-card {
  position: absolute; right: -20px; bottom: 40px; padding: 22px 26px; border-radius: 18px;
  text-align: center; animation: floaty 6s ease-in-out infinite;
}
.about-media .float-card b { font-family: var(--font-head); font-size: 2.4rem; color: var(--gold); display: block; }
.about-media .float-card span { font-size: 0.66rem; letter-spacing: 2px; text-transform: uppercase; color: var(--soft-gold); }
.about-copy h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--white); margin: 14px 0 20px; }
.about-copy h2 em { color: var(--gold); font-style: italic; }
.about-copy p { color: rgba(247,241,230,0.78); margin-bottom: 18px; font-weight: 300; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 34px; }
.about-points li { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; }
.about-points i { color: var(--gold); }
.sign { font-family: var(--font-head); font-style: italic; font-size: 1.6rem; color: var(--gold-light); margin-top: 8px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { padding: 34px 30px; border-radius: var(--radius); position: relative; transition: transform 0.5s var(--ease), border-color 0.5s; border: 1px solid rgba(212,175,55,0.16); }
.review-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.45); }
.review-card .quote { font-family: var(--font-head); font-size: 3.4rem; color: rgba(212,175,55,0.35); line-height: 0.6; }
.review-card .stars { margin: 6px 0 14px; }
.review-card p { color: rgba(247,241,230,0.82); font-weight: 300; font-style: italic; margin-bottom: 22px; }
.reviewer { display: flex; align-items: center; gap: 14px; }
.reviewer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.reviewer .avatar-mono {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.15rem; letter-spacing: 1px;
  color: var(--deep-purple-2); border: 2px solid var(--gold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
}
.reviewer b { color: var(--white); font-family: var(--font-head); font-size: 1.15rem; display: block; }
.reviewer span { font-size: 0.72rem; letter-spacing: 1px; color: var(--soft-gold); text-transform: uppercase; }

/* ============================================================
   INSTAGRAM GALLERY (masonry)
   ============================================================ */
.gallery-masonry { columns: 4; column-gap: 16px; }
.gallery-masonry .g-item {
  break-inside: avoid; margin-bottom: 16px; border-radius: 16px; overflow: hidden;
  position: relative; border: 1px solid rgba(212,175,55,0.18);
}
.gallery-masonry .g-item img { width: 100%; transition: transform 0.9s var(--ease); }
.gallery-masonry .g-item:hover img { transform: scale(1.1); }
.gallery-masonry .g-item::after {
  content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-weight: 400;
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(43,20,64,0.6); color: var(--gold); font-size: 1.6rem;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.gallery-masonry .g-item:hover::after { opacity: 1; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-card {
  border-radius: var(--radius-lg); padding: clamp(44px, 6vw, 80px); text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(130deg, rgba(94,43,151,0.55), rgba(67,32,92,0.55));
  border: 1px solid rgba(212,175,55,0.4);
}
.newsletter-card h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); color: var(--white); margin: 14px 0 12px; }
.newsletter-card p { color: rgba(247,241,230,0.8); max-width: 520px; margin: 0 auto 30px; }
.news-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; flex-wrap: wrap; }
.news-form input {
  flex: 1; min-width: 220px; padding: 16px 22px; border-radius: 60px;
  background: rgba(27,13,43,0.5); border: 1px solid rgba(212,175,55,0.35);
  color: var(--ivory); font-family: var(--font-body); outline: none; font-size: 0.9rem;
}
.news-form input::placeholder { color: rgba(247,241,230,0.5); }
.news-form input:focus { border-color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: linear-gradient(180deg, rgba(27,13,43,0.6), #160a22); padding-top: 90px; margin-top: 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 46px; padding-bottom: 60px; }
.footer .brand .name { font-size: 2rem; }
.footer-col h5 { font-family: var(--font-head); font-size: 1.4rem; color: var(--white); margin-bottom: 22px; }
.footer-col a, .footer-col li { color: rgba(247,241,230,0.7); font-size: 0.92rem; margin-bottom: 12px; display: block; transition: color 0.3s, padding-left 0.3s; }
.footer-col a:hover { color: var(--gold); padding-left: 6px; }
.footer-about p { color: rgba(247,241,230,0.7); font-weight: 300; margin: 18px 0 24px; max-width: 320px; }
.contact-line { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: rgba(247,241,230,0.8); font-size: 0.9rem; }
.contact-line i { color: var(--gold); width: 18px; }
/* tap-to-call link should look identical to the plain contact text */
.contact-line a { color: inherit; text-decoration: none; }
.contact-line a:hover { color: var(--gold-light); }
.socials { display: flex; gap: 12px; margin-top: 6px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(212,175,55,0.35); color: var(--gold); transition: all 0.35s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--deep-purple-2); transform: translateY(-3px); }
.footer-bottom {
  border-top: 1px solid rgba(212,175,55,0.15); padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(247,241,230,0.6);
}
.footer-bottom a:hover { color: var(--gold); }

/* Back to top */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--deep-purple-2);
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: var(--shadow-gold); opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: all 0.4s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* Toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 120%);
  z-index: 1500; padding: 14px 26px; border-radius: 50px;
  background: rgba(43,20,64,0.95); border: 1px solid var(--gold); color: var(--ivory);
  font-size: 0.85rem; letter-spacing: 0.5px; box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 10px; transition: transform 0.5s var(--ease);
}
.toast i { color: var(--gold); }
.toast.show { transform: translate(-50%, 0); }

/* ---------- Scroll reveal helper ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

/* ============================================================
   AADI OFFERS — announcement ribbon + festive banner
   ============================================================ */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 42px;
  display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light), var(--gold), var(--gold-deep));
  color: var(--deep-purple-2);
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.5);
}
.announce-track {
  display: flex; white-space: nowrap; will-change: transform;
  animation: marquee 28s linear infinite;
}
.announce-track span {
  padding: 0 26px; font-size: 0.78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.announce-track span i { color: var(--deep-purple); margin: 0 4px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.announce:hover .announce-track { animation-play-state: paused; }
.announce-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: var(--deep-purple-2); font-size: 0.9rem; background: rgba(255,255,255,0.35);
}
.announce-close:hover { background: rgba(255,255,255,0.7); }
body.has-announce .navbar { top: 42px; }
.navbar { top: 0; }

.aadi { padding-top: clamp(50px, 7vw, 90px); }
.aadi-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 70px) clamp(26px, 5vw, 64px); text-align: center;
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(212,175,55,0.28), transparent 60%),
    linear-gradient(150deg, rgba(94,43,151,0.6), rgba(43,32,92,0.55) 55%, rgba(27,13,43,0.7));
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(212,175,55,0.12);
}
/* rotating festive shimmer */
.aadi-card::before {
  content: ""; position: absolute; inset: -60% ; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(212,175,55,0.10) 82%, transparent 92%);
  animation: spinLight 16s linear infinite;
}
@keyframes spinLight { to { transform: rotate(360deg); } }
.aadi-card > * { position: relative; z-index: 2; }
.aadi-head h2 { font-size: clamp(2rem, 5vw, 3.6rem); color: var(--white); margin: 12px 0 12px; }
.aadi-head h2 em { color: var(--gold); font-style: italic; }
.aadi-head p { color: rgba(247,241,230,0.85); max-width: 560px; margin: 0 auto; }

.aadi-offers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 38px 0 34px; }
.offer {
  padding: 24px 16px; border-radius: var(--radius);
  background: rgba(27,13,43,0.4); border: 1px solid rgba(212,175,55,0.28);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.offer:hover { transform: translateY(-6px); border-color: rgba(212,175,55,0.6); box-shadow: var(--shadow-gold); }
.offer .big { font-family: var(--font-head); font-size: 2.4rem; line-height: 1; }
.offer .big small { font-size: 1rem; }
.offer .lbl { display: block; margin-top: 8px; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,241,230,0.75); }

/* countdown */
.countdown { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }
.countdown .box {
  min-width: 74px; padding: 12px 8px; border-radius: 14px;
  background: rgba(27,13,43,0.55); border: 1px solid rgba(212,175,55,0.35);
}
.countdown .box b { font-family: var(--font-head); font-size: 2rem; color: var(--gold-light); display: block; line-height: 1; }
.countdown .box span { font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(247,241,230,0.65); }
.countdown-note { font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--soft-gold); margin-bottom: 26px; }

.coupon {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 28px;
  padding: 12px 22px; border-radius: 12px; border: 1.5px dashed var(--gold);
  background: rgba(212,175,55,0.08); color: var(--ivory); font-size: 0.9rem; letter-spacing: 0.5px;
}
.coupon b {
  font-family: var(--font-body); font-weight: 700; letter-spacing: 3px; color: var(--gold-light);
  padding: 4px 10px; border-radius: 6px; background: rgba(212,175,55,0.15); cursor: pointer;
}
.coupon b:hover { background: var(--gold); color: var(--deep-purple-2); }

/* ============================================================
   KIDS COLLECTION
   ============================================================ */
.kids {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(125,67,189,0.30), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(212,175,55,0.10), transparent 55%),
    linear-gradient(180deg, rgba(94,43,151,0.20), rgba(43,32,92,0.12));
}
/* playful gold floral motif overlay */
.kids::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.16' stroke-width='1.4'%3E%3Cg transform='translate(40 40)'%3E%3Ccircle r='6'/%3E%3Cellipse rx='4' ry='9' transform='translate(0 -13)'/%3E%3Cellipse rx='4' ry='9' transform='translate(0 13)'/%3E%3Cellipse rx='9' ry='4' transform='translate(-13 0)'/%3E%3Cellipse rx='9' ry='4' transform='translate(13 0)'/%3E%3Cellipse rx='4' ry='9' transform='rotate(45) translate(0 -13)'/%3E%3Cellipse rx='4' ry='9' transform='rotate(45) translate(0 13)'/%3E%3Cellipse rx='9' ry='4' transform='rotate(45) translate(-13 0)'/%3E%3Cellipse rx='9' ry='4' transform='rotate(45) translate(13 0)'/%3E%3C/g%3E%3Cg transform='translate(120 120)'%3E%3Ccircle r='4'/%3E%3Cellipse rx='3' ry='7' transform='translate(0 -10)'/%3E%3Cellipse rx='3' ry='7' transform='translate(0 10)'/%3E%3Cellipse rx='7' ry='3' transform='translate(-10 0)'/%3E%3Cellipse rx='7' ry='3' transform='translate(10 0)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.kids .container { position: relative; z-index: 2; }

/* falling flower petals + sparkles */
.petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -40px; width: 16px; height: 16px; opacity: 0;
  background: radial-gradient(circle at 50% 0, var(--gold-light), var(--gold-deep));
  border-radius: 50% 0 50% 0;
  animation: petalFall linear infinite;
}
.petal.spark {
  background: none; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(212,175,55,0.9); animation-name: sparkleFall;
}
@keyframes petalFall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(105vh) translateX(60px) rotate(540deg); }
}
@keyframes sparkleFall {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  30%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(90vh) scale(0.5); }
}

.kids-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 56px; }
.kid-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; cursor: pointer;
  border: 1px solid rgba(212,175,55,0.35); box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s;
}
.kid-card:hover { transform: translateY(-8px); border-color: rgba(212,175,55,0.7); box-shadow: var(--shadow-gold); }
.kid-card .media { position: absolute; inset: 0; }
.kid-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.kid-card:hover .media img { transform: scale(1.1); }
.kid-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(27,13,43,0.45) 58%, rgba(27,13,43,0.93)); }
.kid-card .frame { position: absolute; inset: 12px; border: 1px solid rgba(212,175,55,0); border-radius: 20px; transition: border-color 0.5s var(--ease); z-index: 2; pointer-events: none; }
.kid-card:hover .frame { border-color: rgba(212,175,55,0.6); }
.kid-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 3; }
.kid-info .kicker { font-size: 0.64rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.kid-info h3 { font-size: 1.55rem; color: var(--white); margin: 4px 0 12px; }
.kid-actions { display: flex; gap: 8px; flex-wrap: wrap; opacity: 0; transform: translateY(12px); transition: all 0.5s var(--ease); }
.kid-card:hover .kid-actions { opacity: 1; transform: translateY(0); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 40px;
  font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  border: 1px solid rgba(212,175,55,0.55); color: var(--soft-gold);
  background: rgba(27,13,43,0.55); backdrop-filter: blur(6px); transition: all 0.35s var(--ease);
}
.chip:hover { background: var(--gold); color: var(--deep-purple-2); border-color: var(--gold); }
.chip.solid { background: linear-gradient(120deg, var(--violet), var(--violet-light)); color: var(--white); border-color: rgba(212,175,55,0.4); }
.chip.solid:hover { background: linear-gradient(120deg, var(--gold-deep), var(--gold)); color: var(--deep-purple-2); }

/* Kids featured banner */
.kids-banner {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(212,175,55,0.5); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
}
.kids-banner .bg { position: absolute; inset: 0; }
.kids-banner .bg img { width: 100%; height: 100%; object-fit: cover; }
.kids-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,20,64,0.9) 0%, rgba(43,20,64,0.55) 50%, rgba(212,175,55,0.12) 100%); }
.kids-banner-inner { position: relative; z-index: 2; padding: clamp(44px, 7vw, 96px) clamp(30px, 6vw, 80px); max-width: 620px; }
.kids-banner-inner h2 { font-size: clamp(2.1rem, 4.5vw, 3.6rem); color: var(--white); margin: 14px 0 16px; }
.kids-banner-inner h2 em { color: var(--gold); font-style: italic; }
.kids-banner-inner p { color: rgba(247,241,230,0.88); margin-bottom: 28px; max-width: 460px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .collections-grid, .why-grid, .reviews-grid, .kids-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-masonry { columns: 3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.74rem; letter-spacing: 1px; }
  .nav-cta { padding: 9px 16px; font-size: 0.74rem; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-visual { max-width: 460px; margin-inline: auto; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 140px; text-align: center; }
  .hero-copy .eyebrow, .hero-cta, .hero-stats { justify-content: center; }
  .hero-sub { margin-inline: auto; }
}
@media (max-width: 640px) {
  .collections-grid, .why-grid, .reviews-grid, .products-grid { grid-template-columns: 1fr; }
  /* Listing pages: keep 2 compact cards per row on mobile instead of one huge card. */
  .cat-section .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-section .product-body { padding: 12px 12px 16px; }
  .cat-section .product-body h4 { font-size: 1rem; }
  .cat-section .product-body .cat { font-size: 0.58rem; letter-spacing: 1.5px; }
  .cat-section .product-body .ph-desc { font-size: 0.76rem; line-height: 1.45; }
  .kids-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gallery-masonry { columns: 2; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-points { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .nav-actions .icon-btn.hide-sm { display: none; }
  .hero-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   NAVBAR DROPDOWNS  (Men / Women mega-menus)
   ============================================================ */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > .nav-drop-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-item > .nav-drop-toggle .caret { font-size: 0.55rem; transition: transform 0.3s var(--ease); }
.nav-item:hover > .nav-drop-toggle .caret,
.nav-item:focus-within > .nav-drop-toggle .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 12px);
  min-width: 220px; padding: 12px;
  background: var(--paper-3, #fff);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  z-index: 1300;
}
/* invisible bridge so the pointer can travel from label to panel */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown a {
  text-transform: none; letter-spacing: 0.3px; font-size: 0.86rem; font-weight: 400;
  padding: 10px 14px; border-radius: 10px;
  color: var(--ink) !important; white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.dropdown a::after { display: none; }
.dropdown a i { width: 18px; text-align: center; color: var(--gold-ink); font-size: 0.9rem; }
.dropdown a:hover { background: rgba(212,175,55,0.14); color: var(--gold-ink) !important; padding-left: 18px; }
/* group headings inside a split dropdown (e.g. Boys / Girls) */
.dropdown .drop-group {
  font-size: 0.64rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; padding: 8px 14px 4px;
}
.dropdown .drop-group + a { margin-top: 0; }
.dropdown .drop-group:not(:first-child) { margin-top: 6px; border-top: 1px solid rgba(212,175,55,0.22); padding-top: 12px; }

/* Mobile menu — grouped sub-links for Men / Women */
.mm-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mm-group > .mm-title { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold-ink); letter-spacing: 2px; cursor: pointer; }
/* Caret indicator on category titles — rotates when the dropdown is open. */
.mm-group > .mm-title::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; margin-left: 10px; display: inline-block; transition: transform 0.3s var(--ease); }
.mm-group.open > .mm-title::after { transform: rotate(180deg); }
/* Sub-categories are hidden until the parent title is tapped (accordion). */
.mm-sub { display: none; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 320px; }
.mm-group.open .mm-sub { display: flex; }
.mm-sub a { font-family: var(--font-body) !important; font-size: 0.86rem !important; letter-spacing: 0.4px !important; text-transform: uppercase; color: var(--ink-body) !important; }

/* ============================================================
   CATEGORY PAGES  (Men / Women) — placeholder swatch cards
   ============================================================ */
.cat-section { scroll-margin-top: 120px; }
.cat-section + .cat-section { margin-top: clamp(56px, 8vw, 96px); }

.ph-swatch {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 10px;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(212,175,55,0.20), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 6px),
    linear-gradient(150deg, #F6ECD9 0%, #E3CFAE 55%, #D3B98F 100%);
  color: var(--gold-ink);
  transition: transform 0.9s var(--ease);
}
.ph-swatch::after {
  content: ""; position: absolute; inset: 16px;
  border: 1px solid rgba(160,124,34,0.45); border-radius: 12px; pointer-events: none;
}
.product-card:hover .ph-swatch { transform: scale(1.06); }
.ph-swatch i { font-size: 2.6rem; }
.ph-swatch .ph-tag { font-family: var(--font-head); font-style: italic; font-size: 1.1rem; letter-spacing: 1px; color: #8a6a20; }
.ph-desc { color: var(--ink-body); font-size: 0.86rem; font-weight: 300; margin: 0; line-height: 1.55; }

/* ============================================================
   WARM ESPRESSO BACKGROUND
   Images average hue 23 deg (terracotta/gold); the old violet sat
   ~111 deg away and fought them. This moves every surface into the
   same warm family so the sarees and zari are the only saturated
   things on the page.
   Delete this whole block to return to royal violet.
   ============================================================ */
:root {
  --espresso:    #1E1712;   /* base page colour */
  --espresso-2:  #17110D;   /* deepest, for footer + vignette */
  --espresso-3:  #2A201A;   /* raised surfaces */
  --espresso-4:  #352920;   /* highest surfaces / hover */
  /* warm maroon replaces violet on CTAs so nothing stays cool */
  --brand-red:   #B23A47;
  --brand-red-2: #C24A52;

  --glass-bg:     rgba(42, 32, 26, 0.48);
  --shadow-soft:  0 20px 60px -20px rgba(0,0,0,0.7);
}

/* ---- page backdrop ---- */
body {
  background:
    radial-gradient(95% 55% at 50% 0%, rgba(212,175,55,0.13) 0%, rgba(178,58,71,0.10) 42%, transparent 70%),
    linear-gradient(180deg, #2A201A 0%, #211913 50%, var(--espresso-2) 100%);
  background-color: var(--espresso);
}
body::before {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(90, 62, 42, 0.55), transparent 55%),
    radial-gradient(120% 90% at 85% 20%, rgba(70, 48, 34, 0.55), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(15, 11, 8, 0.9), transparent 60%),
    linear-gradient(160deg, #2A201A 0%, var(--espresso) 40%, #221A14 65%, var(--espresso-2) 100%);
}

/* ---- section washes ---- */
.silk-divider::after { background: var(--espresso); }
.why { background: linear-gradient(180deg, transparent, rgba(42,32,26,0.55), transparent); }
.kids {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(120, 82, 55, 0.30), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(212, 175, 55, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(42,32,26,0.35), rgba(30,23,18,0.20));
}

/* ---- chrome ---- */
#preloader { background: linear-gradient(160deg, #2A201A, var(--espresso-2)); }
.navbar.scrolled { background: rgba(30, 23, 18, 0.80); }
.mobile-menu { background: linear-gradient(160deg, rgba(42,32,26,0.98), rgba(23,17,13,0.99)); }
.footer { background: linear-gradient(180deg, rgba(23,17,13,0.65), #120D09); }
.toast { background: rgba(42,32,26,0.96); }

/* ---- raised surfaces ---- */
.hero-frame { background: linear-gradient(160deg, var(--espresso-3), var(--espresso-2)); }
.product-actions button { background: rgba(23,17,13,0.65); }
.offer { background: rgba(23,17,13,0.42); }
.countdown .box { background: rgba(23,17,13,0.55); }
.news-form input { background: rgba(23,17,13,0.55); }
.newsletter-card { background: linear-gradient(130deg, rgba(53,41,32,0.65), rgba(30,23,18,0.65)); }
.aadi-card {
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(212,175,55,0.26), transparent 60%),
    linear-gradient(150deg, rgba(53,41,32,0.7), rgba(42,32,26,0.6) 55%, rgba(23,17,13,0.75));
}

/* ---- scrims over photographs ---- */
.collection-card::after {
  background: linear-gradient(180deg, transparent 30%, rgba(18,13,9,0.40) 55%, rgba(18,13,9,0.93));
}
.bridal::after {
  background: linear-gradient(90deg, rgba(23,17,13,0.93) 0%, rgba(23,17,13,0.62) 45%, rgba(23,17,13,0.15) 100%);
}
.hero-frame::after { background: linear-gradient(180deg, transparent 55%, rgba(18,13,9,0.55)); }
.gallery-masonry .g-item::after { background: rgba(23,17,13,0.65); }

/* ---- CTAs: warm maroon instead of violet ---- */
.btn-primary {
  background: linear-gradient(120deg, var(--brand-red), var(--brand-red-2));
  box-shadow: 0 14px 34px -12px rgba(178,58,71,0.85), inset 0 0 0 1px rgba(212,175,55,0.45);
}
.badge.new { background: linear-gradient(120deg, var(--brand-red-2), var(--brand-red)); }
.quick-add { background: linear-gradient(120deg, var(--brand-red), var(--brand-red-2)); }
.btn-primary:hover, .quick-add:hover, .icon-btn:hover, .btn-ghost:hover,
.slider-nav button:hover, .socials a:hover, .coupon b:hover,
.product-actions button:hover, .product-actions button.wished { color: #1E1712; }
.announce { color: #1E1712; }
.announce-track span i { color: #5a1f26; }
.announce-close { color: #1E1712; }
.hero-badge .medal, .badge, .icon-btn .count, .reviewer .avatar-mono, .to-top { color: #1E1712; }
::selection { background: var(--gold); color: #1E1712; }

/* kids section: card scrims, chips and banner were still cool-toned */
.kid-card::after {
  background: linear-gradient(180deg, transparent 32%, rgba(18,13,9,0.48) 58%, rgba(18,13,9,0.93));
}
.chip { background: rgba(23,17,13,0.60); }
.chip:hover { color: #1E1712; }
.kids-banner::after {
  background: linear-gradient(90deg, rgba(23,17,13,0.92) 0%, rgba(23,17,13,0.58) 50%, rgba(212,175,55,0.14) 100%);
}

/* ============================================================
   GOLD TOUCH  (1) zari weave threads  +  (2) lit-from-above aura
   All gold layers kept at or below 4% opacity — above that it
   reads cheap and starts eating text contrast.
   Delete this block to return to the plain espresso background.
   ============================================================ */

/* (1) The drifting weave now uses gold thread instead of white, so the
   whole page reads as woven zari catching the light. Rides the existing
   22s silkDrift animation. */
body::after {
  background-image:
    repeating-linear-gradient(48deg, rgba(212,175,55,0.038) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-42deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 8px);
  opacity: 1;
}
/* hero's own weave layer, matched */
.silk-weave {
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.035) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.055) 0 2px, transparent 2px 4px);
}

/* (2) Warm gold pooled at the top, a second softer pool low on the page,
   and a deepened vignette at the edges — content sits in the light,
   the page falls away at the corners. */
body {
  background:
    radial-gradient(95% 50% at 50% 0%, rgba(212,175,55,0.20) 0%, rgba(212,175,55,0.07) 38%, transparent 68%),
    radial-gradient(70% 40% at 50% 100%, rgba(212,175,55,0.09) 0%, transparent 65%),
    linear-gradient(180deg, #2A201A 0%, #211913 50%, var(--espresso-2) 100%);
}
body::before {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(110, 80, 48, 0.55), transparent 55%),
    radial-gradient(120% 90% at 85% 20%, rgba(88, 64, 40, 0.55), transparent 55%),
    radial-gradient(150% 130% at 50% 50%, transparent 45%, rgba(12, 9, 6, 0.55) 100%),
    linear-gradient(160deg, #2C221A 0%, var(--espresso) 40%, #221A14 65%, var(--espresso-2) 100%);
}

/* ============================================================
   LIGHT THEME  —  "Ivory & Zari"
   ------------------------------------------------------------
   Flips the espresso night palette into a daylight one: warm
   ivory/champagne paper, espresso ink text, and the same zari
   gold + maroon accents. Gold is dropped to --gold-ink for
   anything that is *text* on a pale surface — #D4AF37 only
   clears ~2:1 against ivory, which is unreadable.

   Anything sitting on a photograph (collection cards, kid cards,
   bridal + kids banners, gallery hover) deliberately keeps its
   dark scrim and light text — those are unchanged below.

   Delete this whole block to return to the dark espresso theme.
   ============================================================ */
:root {
  --paper:      #FBF6EC;   /* base page */
  --paper-2:    #F5EDDF;   /* section washes */
  --paper-3:    #FFFFFF;   /* raised cards */
  --paper-4:    #EFE4D2;   /* footer / deepest light surface */
  --ink:        #2B211A;   /* headings */
  --ink-body:   #4A3B2E;   /* paragraphs */
  --gold-ink:   #8A6A20;   /* gold that is legible on paper */

  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(212, 175, 55, 0.42);
  --shadow-soft:  0 20px 50px -24px rgba(74, 55, 35, 0.40);
  --shadow-gold:  0 14px 40px -12px rgba(212, 175, 55, 0.50);
}

/* ---- page backdrop: champagne light pooled top & bottom ---- */
body {
  color: var(--ink-body);
  background:
    radial-gradient(95% 50% at 50% 0%, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 38%, transparent 68%),
    radial-gradient(70% 40% at 50% 100%, rgba(178,58,71,0.06) 0%, transparent 65%),
    linear-gradient(180deg, #FDF9F2 0%, var(--paper) 50%, #F3EADB 100%);
  background-color: var(--paper);
}
body::before {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(235, 219, 194, 0.75), transparent 55%),
    radial-gradient(120% 90% at 85% 20%, rgba(240, 226, 205, 0.75), transparent 55%),
    radial-gradient(150% 130% at 50% 50%, transparent 50%, rgba(190, 168, 134, 0.30) 100%),
    linear-gradient(160deg, #FDF9F2 0%, var(--paper) 40%, #F6EEE1 65%, #F1E7D6 100%);
}
/* woven zari threads, re-cut for a pale ground */
body::after {
  background-image:
    repeating-linear-gradient(48deg, rgba(160, 122, 45, 0.055) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-42deg, rgba(90, 66, 38, 0.035) 0 3px, transparent 3px 8px);
  opacity: 1;
}
.silk-weave {
  background-image:
    repeating-linear-gradient(45deg, rgba(160, 122, 45, 0.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(90, 66, 38, 0.035) 0 2px, transparent 2px 4px);
}
/* Jaali / buti / mandala ground + the temple selvedges are drawn in bright
   #D4AF37 and #f3d98b, which all but disappear on ivory. Darkening them with
   a filter keeps the artwork intact while pushing the zari into antique
   bronze, so the motifs read as woven-in rather than washed out. */
html::before { opacity: 0.34; filter: brightness(0.58) saturate(1.35); }
html::after  { opacity: 0.62; filter: brightness(0.62) saturate(1.30); }
@keyframes mandalaBreathe {
  0%   { opacity: 0.30; background-position: left -180px top -200px, right -180px bottom -200px, center center, center center; }
  100% { opacity: 0.42; background-position: left -160px top -220px, right -160px bottom -180px, center 30px, center 20px; }
}

/* ---- section washes ---- */
.silk-divider::after { background: var(--paper); color: var(--gold-ink); }
.silk-divider { background: linear-gradient(90deg, transparent, rgba(138,106,32,0.18), var(--gold-ink), rgba(138,106,32,0.18), transparent); }
.why { background: linear-gradient(180deg, transparent, rgba(240, 230, 212, 0.75), transparent); }
.kids {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(212, 175, 55, 0.16), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(178, 58, 71, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(245, 237, 223, 0.85), rgba(251, 246, 236, 0.55));
}
.kids::before { opacity: 0.85; }

/* ---- typography ---- */
.section-title,
.hero-title,
.hero-badge b,
.feature-card h4,
.product-body h4,
.about-copy h2,
.reviewer b,
.newsletter-card h2,
.aadi-head h2,
.footer-col h5,
.brand .name,
.loader-mark .logo-lg,
.mobile-menu a { color: var(--ink); }

.section-sub,
.hero-sub,
.feature-card p,
.about-copy p,
.review-card p,
.newsletter-card p,
.aadi-head p,
.footer-about p,
.footer-col a, .footer-col li,
.contact-line,
.offer .lbl { color: var(--ink-body); }

.hero-stats .stat span,
.stars span,
.footer-bottom,
.countdown .box span { color: rgba(74, 59, 46, 0.72); }
.price .was { color: rgba(74, 59, 46, 0.55); }

/* gold text, dropped to a legible weight on paper */
.eyebrow,
.section-title .accent,
.hero-title em,
.hero-stats .stat b,
.product-body .cat,
.stars,
.about-copy h2 em,
.about-media .float-card b,
.about-points i,
.contact-line i,
.contact-line a:hover,
.footer-col a:hover,
.footer-bottom a:hover,
.socials a,
.slider-nav button,
.feature-card .fi,
.aadi-head h2 em,
.newsletter-card .accent,
.toast i,
.brand .name b,
.loader-mark .logo-lg b,
.scroll-cue,
.countdown-note,
.about-media .float-card span,
.hero-badge span,
.brand .tag,
.loader-mark p,
.mobile-menu .close,
.mobile-menu a:hover,
.nav-links a.nav-offer { color: var(--gold-ink); }

.eyebrow::before, .eyebrow.center::after { background: linear-gradient(90deg, transparent, var(--gold-ink)); }
.eyebrow.center::before { background: linear-gradient(90deg, var(--gold-ink), transparent); }
.gold-text {
  background: linear-gradient(100deg, #7a5c18, #c39a2e 45%, #a07c22 60%, #c39a2e 80%, #7a5c18);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price .now { color: #8a2f3a; }
.review-card .quote { color: rgba(138, 106, 32, 0.45); }
.sign { color: var(--gold-ink); }

/* ---- chrome ---- */
#preloader { background: linear-gradient(160deg, #FDF9F2, #F1E7D6); }
.navbar.scrolled {
  background: rgba(253, 249, 242, 0.86);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 10px 34px -20px rgba(74, 55, 35, 0.55);
}
.nav-links a { color: var(--ink); }
.nav-links a:hover { color: var(--gold-ink); }
.icon-btn { color: var(--ink); border-color: rgba(43, 33, 26, 0.16); }
.hamburger { border-color: rgba(43, 33, 26, 0.16); }
.hamburger span { background: var(--gold-ink); }
.mobile-menu { background: linear-gradient(160deg, rgba(253,249,242,0.98), rgba(241,231,214,0.99)); }
.footer {
  background: linear-gradient(180deg, rgba(245, 237, 223, 0.85), var(--paper-4));
  border-top: 1px solid rgba(212, 175, 55, 0.28);
}
.footer-bottom { border-top-color: rgba(138, 106, 32, 0.22); }
.toast { background: rgba(255, 255, 255, 0.97); color: var(--ink); box-shadow: var(--shadow-soft); }

/* ---- raised surfaces ---- */
.glass { border: 1px solid rgba(212, 175, 55, 0.30); }
.hero-frame {
  background: linear-gradient(160deg, #F6EEE1, #EADDC8);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.35),
    0 0 40px -6px rgba(212,175,55,0.45),
    0 40px 90px -34px rgba(74, 55, 35, 0.55),
    inset 0 0 0 6px rgba(212,175,55,0.18);
}
.product-card {
  background: var(--paper-3);
  border: 1px solid rgba(43, 33, 26, 0.10);
}
.product-card:hover { box-shadow: 0 22px 50px -24px rgba(74, 55, 35, 0.45); }
.product-actions button {
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  border-color: rgba(138, 106, 32, 0.35);
}
.feature-card, .review-card { border-color: rgba(212, 175, 55, 0.30); }
.feature-card:hover, .review-card:hover { border-color: rgba(212, 175, 55, 0.65); }
.feature-card .fi {
  background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.28), rgba(212,175,55,0.08));
  border-color: rgba(212, 175, 55, 0.45);
}
.collection-card, .kid-card { border-color: rgba(138, 106, 32, 0.28); }
.gallery-masonry .g-item { border-color: rgba(138, 106, 32, 0.22); }
.offer { background: rgba(255, 255, 255, 0.72); border-color: rgba(212, 175, 55, 0.40); }
.offer .big { color: #8a2f3a; }
.countdown .box { background: rgba(255, 255, 255, 0.78); border-color: rgba(212, 175, 55, 0.40); }
.countdown .box b { color: #8a2f3a; }
.newsletter-card {
  background: linear-gradient(130deg, rgba(255,255,255,0.85), rgba(244,236,224,0.85));
  border-color: rgba(212, 175, 55, 0.50);
}
.news-form input {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--ink);
}
.news-form input::placeholder { color: rgba(74, 59, 46, 0.5); }
.aadi-card {
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(212,175,55,0.28), transparent 60%),
    linear-gradient(150deg, rgba(255,255,255,0.88), rgba(247,239,227,0.85) 55%, rgba(240,229,211,0.90));
  box-shadow: 0 40px 90px -34px rgba(74, 55, 35, 0.45), inset 0 0 0 1px rgba(212,175,55,0.20);
}
.aadi-card::before { background: conic-gradient(from 0deg, transparent 0 70%, rgba(212,175,55,0.16) 82%, transparent 92%); }
.coupon { background: rgba(212, 175, 55, 0.14); color: var(--ink-body); border-color: var(--gold-ink); }
.coupon b { color: #8a2f3a; background: rgba(212, 175, 55, 0.22); }
.socials a { border-color: rgba(138, 106, 32, 0.40); }
.slider-nav button { border-color: rgba(138, 106, 32, 0.40); }

/* ---- buttons ---- */
.btn-ghost {
  border: 1px solid rgba(138, 106, 32, 0.55);
  color: #7a5c18;
  background: rgba(255, 255, 255, 0.55);
}
.btn-primary { box-shadow: 0 14px 30px -14px rgba(178,58,71,0.75), inset 0 0 0 1px rgba(212,175,55,0.55); }
.ripple { background: rgba(255, 255, 255, 0.6); }
.scroll-cue .mouse { border-color: rgba(138, 106, 32, 0.6); }
.scroll-cue .mouse::after { background: var(--gold-ink); }

/* ---- content that still sits on a photograph keeps the night palette ---- */
.bridal-inner .btn-ghost,
.kids-banner-inner .btn-ghost {
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--soft-gold);
  background: rgba(255, 255, 255, 0.04);
}
.bridal-inner .btn-ghost:hover,
.kids-banner-inner .btn-ghost:hover { color: #1E1712; background: var(--gold); }
.bridal-inner h2, .kids-banner-inner h2 { color: var(--white); }
.bridal-inner p, .kids-banner-inner p { color: rgba(247, 241, 230, 0.88); }
.bridal-inner .eyebrow, .kids-banner-inner .eyebrow,
.collection-card .info .kicker, .kid-info .kicker { color: var(--gold); }
.bridal-inner .eyebrow::before, .kids-banner-inner .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--gold));
}
.collection-card .info h3, .kid-info h3 { color: var(--white); }
.hero-frame::after { background: linear-gradient(180deg, transparent 60%, rgba(43, 33, 26, 0.42)); }

/* ---- links / small print ---- */
.product-body .link { color: var(--gold-ink); }
.product-body .link:hover { color: #8a2f3a; }
.reviewer span { color: var(--gold-ink); }
.footer-col a:hover { color: #8a2f3a; }

/* ============================================================
   BRAND MARK  —  larger logo + rebalanced navbar
   ------------------------------------------------------------
   Sizes both marks, because only one of them is ever visible:
   main.js probes images/logo.png and adds .logo-ready to <html>
   on success, which swaps the bilingual text wordmark for the
   image. Drop a logo.png in and the image sizes take over.

   The navbar grows to seat the bigger mark and shrinks it again
   on scroll, so the header still slims down once you leave the
   hero instead of staying tall the whole way down.
   ============================================================ */

/* --- image mark (shown only when images/logo.png exists) --- */
.brand-logo {
  height: 88px;
  transition: height 0.45s var(--ease);
}
.navbar.scrolled .brand-logo { height: 62px; }
.footer .brand-logo { height: 104px; }
.preloader-logo { height: 210px; margin-bottom: 20px; }

/* --- text wordmark (the current fallback) --- */
.brand .name {
  font-size: 2.4rem;
  letter-spacing: 2.5px;
  transition: font-size 0.45s var(--ease);
}
.navbar.scrolled .brand .name { font-size: 1.9rem; }
.footer .brand .name { font-size: 2.8rem; }
.loader-mark .logo-lg { font-size: 4rem; }
/* the tagline under the mark scales with it */
.brand .tag { font-size: 0.6rem; letter-spacing: 6px; margin-top: 5px; }

/* --- navbar: seat the taller mark, keep everything centred --- */
.navbar { padding: 16px 0; }
.navbar.scrolled { padding: 8px 0; }
.nav-inner { min-height: 92px; gap: 28px; }
.navbar.scrolled .nav-inner { min-height: 66px; }
.brand { justify-content: center; flex-shrink: 0; }
/* links keep their own breathing room from the mark rather than
   only being shoved right by margin-left:auto */
.nav-links { gap: 34px; padding-left: 20px; }
.nav-actions { flex-shrink: 0; }

/* hero clears the taller header */
.hero { padding-top: 150px; }
body.has-announce .hero { padding-top: 180px; }

@media (max-width: 1100px) {
  .brand-logo { height: 68px; }
  .navbar.scrolled .brand-logo { height: 54px; }
  .brand .name { font-size: 1.95rem; }
  .navbar.scrolled .brand .name { font-size: 1.7rem; }
  .nav-inner { min-height: 80px; gap: 18px; }
  .nav-links { gap: 20px; padding-left: 10px; }
}
@media (max-width: 900px) {
  /* links are gone here, so the mark can stay generous */
  .brand-logo { height: 72px; }
  .brand .name { font-size: 2.1rem; }
  .hero { padding-top: 160px; }
  body.has-announce .hero { padding-top: 190px; }
}
@media (max-width: 640px) {
  .brand-logo { height: 58px; }
  .navbar.scrolled .brand-logo { height: 48px; }
  .brand .name { font-size: 1.7rem; letter-spacing: 1.5px; }
  .navbar.scrolled .brand .name { font-size: 1.5rem; }
  .nav-inner { min-height: 68px; }
  .footer .brand .name { font-size: 2.2rem; }
  .footer .brand-logo { height: 84px; }
  .preloader-logo { height: 150px; }
  .loader-mark .logo-lg { font-size: 2.8rem; }
}

/* ============================================================
   BRIDAL BANNER  —  frame matches the photograph
   ------------------------------------------------------------
   hero4.png is 1616×973. The banner used to be sized by its text
   block, so `object-fit: cover` cropped the top and bottom of the
   shot. Locking the frame to the photo's own ratio makes cover
   fill it edge to edge with nothing trimmed.

   Below 900px the copy is taller than that ratio allows, so the
   height goes back to being content-driven (and the photo crops
   toward the bride on the right) rather than clipping the text.
   ============================================================ */
.bridal { aspect-ratio: 1616 / 973; }
.bridal .bg img { object-position: center; }

@media (max-width: 900px) {
  .bridal { aspect-ratio: auto; }
  .bridal .bg img { object-position: 70% center; }
}

/* ============================================================
   LITTLE ROYALS GROUND — APPLIED SITE-WIDE
   What settles that section is not the motif, it is the cream
   veil beneath it: a translucent scrim over the jaali/mandala
   ground that mutes the pattern so content reads forward.
   body::after is the topmost backdrop layer (z-index -2), above
   html::before/::after and body::before, so putting the veil
   here dims every pattern layer at once while leaving content
   — which sits at z-index 0 and up — untouched and crisp.
   Motif is drawn in --gold-ink, not #D4AF37: per the note above,
   bright gold all but vanishes on ivory.
   ============================================================ */
body::after {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%238A6A20' stroke-opacity='0.20' stroke-width='1.5'%3E%3Cg transform='translate(40 40)'%3E%3Ccircle r='6'/%3E%3Cellipse rx='4' ry='9' transform='translate(0 -13)'/%3E%3Cellipse rx='4' ry='9' transform='translate(0 13)'/%3E%3Cellipse rx='9' ry='4' transform='translate(-13 0)'/%3E%3Cellipse rx='9' ry='4' transform='translate(13 0)'/%3E%3Cellipse rx='4' ry='9' transform='rotate(45) translate(0 -13)'/%3E%3Cellipse rx='4' ry='9' transform='rotate(45) translate(0 13)'/%3E%3Cellipse rx='9' ry='4' transform='rotate(45) translate(-13 0)'/%3E%3Cellipse rx='9' ry='4' transform='rotate(45) translate(13 0)'/%3E%3C/g%3E%3Cg transform='translate(120 120)'%3E%3Ccircle r='4'/%3E%3Cellipse rx='3' ry='7' transform='translate(0 -10)'/%3E%3Cellipse rx='3' ry='7' transform='translate(0 10)'/%3E%3Cellipse rx='7' ry='3' transform='translate(-10 0)'/%3E%3Cellipse rx='7' ry='3' transform='translate(10 0)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(48deg, rgba(212, 175, 55, 0.038) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-42deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 8px),
    radial-gradient(60% 60% at 20% 10%, rgba(212, 175, 55, 0.16), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(178, 58, 71, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(245, 237, 223, 0.85), rgba(251, 246, 236, 0.62));
  background-size: 180px 180px, auto, auto, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, overlay, overlay, normal, normal, normal;
  opacity: 1;
}
/* The section carried its own copy of this ground. Now that the page has it,
   drop the duplicate — veiling twice would leave Little Royals visibly paler
   than everything around it, and two 180px motif tiles stacked out of phase
   would moire into a denser patch exactly where the section sits. */
.kids { background: none; }
.kids::before { content: none; }

/* ============================================================
   NAVBAR WEIGHT
   600, not 700 — the Poppins link only loads 300/400/500/600,
   so 700 would be synthesised by the browser and render as a
   smeared fake-bold next to the real weights.
   ============================================================ */
.nav-links a { font-weight: 600; }

/* ============================================================
   TIGHTER SECTION RHYTHM
   Sections stack their own top and bottom padding, so the gap
   between two of them was double the value below — up to 260px
   on a wide screen. Roughly 40% off, applied to the shared
   `section` rule so every page tightens by the same amount.
   ============================================================ */
section { padding: clamp(42px, 5.5vw, 78px) 0; }
.section-head { margin-bottom: clamp(28px, 3.6vw, 46px); }
/* Listing pages put an <hr> between sections, but keep this in step
   for any two that sit directly against each other. */
.cat-section + .cat-section { margin-top: clamp(34px, 5vw, 58px); }

/* ============================================================
   "25+ YEARS OF WEAVING TRUST" BADGE
   The caption sat at the body default (300) in 0.66rem gold on
   a near-white glass card — thin type, low contrast, small size
   all at once. Weight on both lines, and the caption moved to
   --ink so it reads as text rather than a watermark.
   ============================================================ */
.about-media .float-card b { font-weight: 700; }
.about-media .float-card span { font-weight: 600; color: var(--ink); }

/* ============================================================
   BILINGUAL LOGO — MATCHED OPTICAL SIZE
   Both halves already share one grid cell, so nothing shifts.
   They looked mismatched because the same font-size renders at
   very different scales in the two faces: Cormorant Garamond
   has an unusually small x-height, Noto Serif Tamil a large
   one, so the Tamil read markedly bigger at an identical 1.7rem.
   em-based so it holds for the navbar, footer and preloader
   marks alike. place-self pins both to the same left edge and
   centre line, so the swap is a pure cross-fade in place.
   ============================================================ */
.langswap .lang { place-self: center start; }
.langswap .lang.ta { font-size: 0.76em; }

/* ============================================================
   TESTIMONIALS — SCROLLING BAND
   Six cards no longer fit a 3-up grid, so the row scrolls.
   Two modes, and the no-JS one is the default: without the
   .is-looping class this is an ordinary swipeable scroll-snap
   row, so the section works even if main.js never runs. When JS
   clones the cards it adds .is-looping and the row becomes a
   seamless marquee, paused on hover or keyboard focus so nobody
   has to read moving text.
   ============================================================ */
.reviews-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track {
  display: flex; gap: 24px; width: max-content;
  /* room for the card's -6px hover lift, which would otherwise clip */
  padding: 10px 2px 14px;
}
.reviews-track .review-card {
  flex: 0 0 clamp(275px, 27vw, 345px);
  scroll-snap-align: start;
}
/* default / no-JS: manual swipe */
.reviews-marquee:not(.is-looping) { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.reviews-marquee:not(.is-looping)::-webkit-scrollbar { display: none; }
/* JS present: seamless loop */
.reviews-marquee.is-looping { overflow: hidden; }
.reviews-marquee.is-looping .reviews-track { animation: reviewsMarquee 60s linear infinite; }
.reviews-marquee.is-looping:hover .reviews-track,
.reviews-marquee.is-looping:focus-within .reviews-track { animation-play-state: paused; }
@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); } /* half the track + half the gap */
}
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee.is-looping { overflow-x: auto; }
  .reviews-marquee.is-looping .reviews-track { animation: none; }
}

/* ============================================================
   RAIL — HORIZONTAL SCROLLING ROW
   Six 3:4 cards over two rows is a tall block to scroll past.
   One scroll-snapping row costs a single card's height instead.
   .rail overrides the grid rules (including the responsive
   ones, which only reset grid-template-columns and are inert
   against display:flex).
   ============================================================ */
.rail {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the card shadow and hover scale, which overflow would clip */
  padding: 6px 2px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(240px, 25vw, 320px); scroll-snap-align: start; }
.rail-nav { justify-content: center; margin-top: 6px; }
/* pointer-events off as well as dimmed, so the hover fill can't fire on a
   button that does nothing at the end of the rail */
.rail-nav button:disabled { opacity: 0.3; pointer-events: none; }
/* Auto-scrolling mode, switched on by JS once the cards are duplicated.
   Both of these would sabotage a per-frame scrollLeft animation:
   mandatory snapping drags the rail back to the nearest card every frame,
   and scroll-behavior:smooth makes the browser ease each 0.5px step
   instead of applying it. Arrow clicks still animate — they pass
   behavior:"smooth" explicitly, which wins over this. */
.rail.is-auto { scroll-snap-type: none; scroll-behavior: auto; }

/* ============================================================
   CARD STACK — STICKY SCROLL PILE
   Each layer pins just under the navbar and the next one rides
   up over it. --i (set per layer in main.js) steps the resting
   offset down, so every pinned layer keeps a sliver of its top
   edge visible and the pile reads as depth rather than one card.
   Sticky is silently cancelled by an `overflow` other than
   visible on ANY ancestor — so this must never be nested inside
   a clipped wrapper, and the section itself must stay unclipped.
   ============================================================ */
.card-stack { display: block; }
.card-stack .stack-layer {
  position: sticky;
  top: calc(clamp(88px, 11vh, 120px) + var(--i, 0) * 18px);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.card-stack .stack-layer:last-child { margin-bottom: 0; }
.card-stack .stack-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px);
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px solid rgba(138, 106, 32, 0.20);
  box-shadow: 0 26px 60px -32px rgba(74, 55, 35, 0.55);
}
/* The card already carries its own surface; inside a layer it sits on the
   layer's panel instead, so drop the doubled border. */
.card-stack .product-card { border-color: transparent; }
/* 4-up down to tablet, then 2×2 inside each layer — never 3, which would
   leave an orphan card on its own row and break the block shape the stack
   depends on to read as a slab. */
@media (max-width: 900px) {
  .card-stack .stack-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-stack .stack-layer { top: calc(76px + var(--i, 0) * 12px); }
  .card-stack .stack-inner { padding: 12px; gap: 12px; }
}

/* ============================================================
   HERO ROTATOR
   Copy, photo and both floating tags swap together on one clock.
   Crossfade is opacity ONLY: the photo carries an endless
   heroFloat and the badges a floaty, both of which animate
   transform — adding a transform transition here would fight
   those keyframes and make the swap jump. Opacity is untouched
   by either, so the two compose cleanly.
   ============================================================ */
#home .hero-copy,
#home .hero-frame img,
#home .hero-badge { transition: opacity 0.45s var(--ease); }
#home.is-swapping .hero-copy,
#home.is-swapping .hero-frame img,
#home.is-swapping .hero-badge { opacity: 0; }

.hero-dots { display: flex; gap: 10px; margin-top: 30px; }
.hero-dots button {
  width: 30px; height: 4px; border-radius: 4px; padding: 0;
  background: rgba(138, 106, 32, 0.28);
  transition: background 0.35s var(--ease), width 0.35s var(--ease);
}
.hero-dots button[aria-selected="true"] { width: 52px; background: var(--gold-ink); }
.hero-dots button:hover { background: rgba(138, 106, 32, 0.6); }
@media (max-width: 900px) { .hero-dots { justify-content: center; } }

/* ============================================================
   HERO TAGS + STATS — WEIGHT
   The small caps lines sat at the body default of 300, which at
   0.68rem with wide letter-spacing reads as a watermark rather
   than a label. Styled here, not per slide, so all five
   transitions inherit it automatically.
   700 for the Cormorant lines and 600 for the Poppins ones —
   those are the heaviest weights actually loaded for each face,
   so nothing gets synthesised into a smeared fake bold.
   ============================================================ */
.hero-badge b { font-weight: 700; }
.hero-badge span { font-weight: 600; }
.hero-stats .stat b { font-weight: 700; }
.hero-stats .stat span { font-weight: 600; }

/* ============================================================
   THE TAQUA PROMISE — ZARI THREAD
   One gold thread with six medallions on it, promises alternating
   above and below. No cards, no boxes.

   The thread is the grid's own ::before, placed as a grid item in
   the medallion row and spanning every column. That makes it land
   on the node centreline by layout rather than by a magic offset,
   so it stays aligned at any column width or text length.

   Draw-on is scaleX from the left, not an animated width: width
   would relayout the grid on every frame; a transform is composited
   and touches nothing else. It rides the .reveal observer already
   in main.js, so there is no extra script to wire up or fail.
   ============================================================ */
.zari-weave { position: relative; padding: 10px 0 4px; }
.weave-list {
  display: grid;
  /* Version 2 of the SEO copy has five promises, not six. */
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: clamp(10px, 1.6vw, 24px);
}
/* children are placed directly into the list grid */
.weave-item { display: contents; }

.weave-list::before {
  content: ""; grid-column: 1 / -1; grid-row: 2; align-self: center;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-ink) 12%, var(--gold) 50%, var(--gold-ink) 88%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.7s var(--ease);
}
.zari-weave.in .weave-list::before { transform: scaleX(1); }

.w-node {
  grid-column: var(--c); grid-row: 2;
  position: relative; z-index: 1; justify-self: center;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.15rem; color: #1E1712;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 0 0 6px var(--paper), 0 10px 26px -12px rgba(74, 55, 35, 0.75);
  opacity: 0; transform: scale(0.5);
  overflow: hidden; /* clips the hover sheen to the disc */
  /* Per-property delays: only the entry pair carries the stagger. Sharing one
     blanket delay would make the hover response lag by up to a second, since
     the same delay would apply again every time the mouse arrives. */
  transition:
    opacity 0.5s var(--ease) calc(var(--i) * 0.16s + 0.25s),
    transform 0.5s var(--ease) calc(var(--i) * 0.16s + 0.25s),
    filter 0.35s var(--ease) 0s;
}
.zari-weave.in .w-node { opacity: 1; transform: none; }

/* --- hover: a sheen sweeps across the medallion ---
   The sweep is a child, so it is clipped by overflow. The travelling pulse
   below animates the node's OWN box-shadow, which overflow never clips — that
   is why the two effects can run on the same element without colliding. */
.w-node::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.9) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
  pointer-events: none;
}
.w-node:hover::after { transform: translateX(130%); }
.w-node:hover { filter: brightness(1.16) saturate(1.12); }

/* --- automatic gold pulse, travelling 01 through 06 ---
   Staggering animation-delay by --i sends one glow down the thread in order,
   then rests before the next pass. Hover uses filter and the sweep instead of
   box-shadow precisely so it can layer over this without either winning. */
@keyframes zariTravel {
  0%, 68%, 100% {
    box-shadow: 0 0 0 6px var(--paper), 0 10px 26px -12px rgba(74, 55, 35, 0.75), 0 0 0 0 rgba(212, 175, 55, 0);
  }
  78% {
    box-shadow: 0 0 0 6px var(--paper), 0 10px 26px -12px rgba(74, 55, 35, 0.75), 0 0 26px 7px rgba(212, 175, 55, 0.8);
  }
}
.zari-weave.in .w-node {
  animation: zariTravel 5s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.28s + 1.4s); /* starts after the thread has drawn */
}

.w-copy {
  grid-column: var(--c); grid-row: 1; align-self: end;
  text-align: center; padding: 0 4px 26px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i) * 0.16s + 0.4s);
}
.weave-item.below .w-copy { grid-row: 3; align-self: start; padding: 26px 4px 0; }
.zari-weave.in .w-copy { opacity: 1; transform: none; }

.w-num {
  display: block; font-family: var(--font-head); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 2px; color: var(--gold-ink); margin-bottom: 4px;
}
.w-copy h4 { font-family: var(--font-head); font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--ink); margin-bottom: 6px; }
.w-copy p { font-size: 0.86rem; font-weight: 300; color: var(--ink-body); line-height: 1.55; }

/* Six columns of prose is unreadable on a phone, so the thread turns
   vertical and the promises run down beside it. */
@media (max-width: 860px) {
  .weave-list {
    grid-template-columns: 54px 1fr;
    grid-template-rows: none;
    column-gap: 20px; row-gap: 26px;
  }
  .weave-list::before {
    grid-column: 1; grid-row: 1 / -1; justify-self: center; align-self: stretch;
    width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, var(--gold-ink) 10%, var(--gold) 50%, var(--gold-ink) 90%, transparent);
    transform: scaleY(0); transform-origin: top center;
  }
  .zari-weave.in .weave-list::before { transform: scaleY(1); }
  .w-node { grid-column: 1; grid-row: var(--r); align-self: start; }
  .w-copy,
  .weave-item.below .w-copy {
    grid-column: 2; grid-row: var(--r); align-self: start;
    text-align: left; padding: 4px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .weave-list::before, .w-node, .w-copy { transition-duration: 0.01ms; transition-delay: 0s; }
  .zari-weave.in .w-node { animation: none; }
  .w-node::after { display: none; }
}

/* ============================================================
   WHATSAPP ENQUIRY FLOW
   Category page -> product card -> WhatsApp with the item already
   named in the message. Everything past that (catalogue, video
   call, confirmation) happens in the chat, not on the site.
   ============================================================ */

/* --- floating button, bottom right --- */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 901;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff; font-size: 1.6rem;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.3s var(--ease);
  animation: waPulse 2.8s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float .wa-tip {
  position: absolute; right: calc(100% + 12px); white-space: nowrap;
  background: var(--paper-3); color: var(--ink);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.5px;
  padding: 9px 14px; border-radius: 30px;
  border: 1px solid rgba(138, 106, 32, 0.28);
  box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.wa-float:hover .wa-tip { opacity: 1; transform: none; }
@keyframes waPulse {
  0%   { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* Back-to-top shares this corner and is also fixed at bottom:26px — lift it
   clear or the two sit on top of each other the moment it fades in. */
.to-top { bottom: 96px; }
@media (max-width: 640px) {
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.45rem; }
  .wa-float .wa-tip { display: none; }
  .to-top { right: 16px; bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* --- per-product enquiry link on the card --- */
.wa-enquire {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: #1f7a45;
  border-bottom: 1px solid rgba(31, 122, 69, 0.35); padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.wa-enquire i { font-size: 1rem; }
.wa-enquire:hover { color: #25D366; border-color: #25D366; }
@media (max-width: 640px) {
  .cat-section .wa-enquire { font-size: 0.64rem; letter-spacing: 0.5px; gap: 6px; margin-top: 9px; }
}

/* ============================================================
   FOOTER CONTACT LINES — ICON COLUMN
   The icons had width:18px but, as flex items, they still had the
   default flex-shrink:1. On the long address line the row is under
   shrink pressure, so that narrow pin collapsed toward its glyph
   width and pulled its text left — while the wider envelope and
   phone glyphs held, starting their text further right. Result:
   three different left edges.

   flex:0 0 18px pins the column so every line starts at the same x,
   and text-align centres each glyph inside it whatever its natural
   width. flex-start puts the pin on the FIRST line of the wrapped
   address instead of floating between its two lines.
   ============================================================ */
.contact-line { align-items: flex-start; }
.contact-line i {
  flex: 0 0 18px;
  text-align: center;
  line-height: 1.55;
}

/* ============================================================
   FOOTER — GOOGLE MAPS CHIP
   Sits under the address in Visit Our Atelier. Indented to the
   same left edge as the contact text (18px icon column + 12px
   gap) so it lines up with the address above rather than the
   icons beside it.
   ============================================================ */
.map-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 0 16px 30px;
  padding: 7px 14px; border-radius: 30px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.6px;
  color: var(--gold-ink);
  border: 1px solid rgba(138, 106, 32, 0.45);
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.map-chip i { font-size: 0.85rem; }
.map-chip:hover {
  background: var(--gold-ink); color: #fff; border-color: var(--gold-ink);
}

/* ============================================================
   MOBILE MENU — KIDS GROUP LABELS
   The Kids items used to read "Boys - Shirts & Pants" etc. Those
   prefixes made the labels far longer than the Men/Women ones, so
   the wrapped rows came out ragged — one item per line instead of
   the neat two-and-three-up flow. Now the prefix is a heading and
   the links are short, matching the desktop dropdown.

   flex-basis:100% forces the label onto its own row and pushes the
   links after it onto the next, which is what actually creates the
   two groups inside a single wrapping flex container.
   ============================================================ */
.mm-sub .mm-label {
  flex: 0 0 100%;
  text-align: center;
  margin-top: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.mm-sub .mm-label:first-child { margin-top: 0; }