/* ============================================================
       PERFORMANCE FIX 5: Critical CSS inlined — fonts fallback
       stack prevents invisible text during font swap (FOIT fix)
    ============================================================ */
    :root {
      --primary: #b8860b;
      --primary-light: #d4a574;
      --primary-dark: #8b6508;
      --accent: #c5ac21;
      --accent-pale: #f0d5a3;
      --bg-cream: #fdf9f3;
      /* UNIFIED: navbar/footer excluded — sabhi baaki section-divs ab isi cream tone par set hain */
      --bg-light: #fdf9f3;
      --bg-warm: #fdf9f3;
      --white: #fdf9f3;
      --dark: #1a1a1a;
      --text: #222222;
      --text-light: #6b6b6b;
      --gold-gradient: linear-gradient(135deg, #C9A960 0%, #A67C2E 50%, #8B5500 100%);
      --gold-gradient-rev: linear-gradient(135deg, #8B5500 0%, #A67C2E 50%, #C9A960 100%);
      --shadow-sm: 0 5px 20px rgba(139, 85, 0, .12);
      --shadow-md: 0 15px 40px rgba(139, 85, 0, .2);
      --shadow-lg: 0 25px 60px rgba(139, 85, 0, .32);
      --gap: 18px;
      --radius: 16px;
      --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --nav-h: 80px;
      --nav-h-mob: 65px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* SCROLL RESTORATION FIX 1: Remove smooth scroll from html root.
       It fights with the browser's native scroll restoration.
       We apply smooth only on nav-link clicks via JS. */
    html {
      /* scroll-behavior: smooth; — REMOVED: causes scroll-to-top on refresh */
      scroll-padding-top: var(--nav-h);
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      /* fallback stack */
      background: var(--bg-cream);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      /* SCROLL RESTORATION FIX 2: Prevent body from interfering */
      overflow-anchor: none;
    }

    /* IMAGE OPTIMIZATION: prevent layout shift with aspect-ratio */
    img {
      max-width: 100%;
      display: block;
      height: auto;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    button {
      cursor: pointer;
      font-family: inherit;
      border: none;
      background: none;
    }

    /* =========================================================
       TOAST
    ========================================================= */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: #2d2d2d;
      color: #fff;
      padding: 11px 26px;
      border-radius: 50px;
      font-weight: 600;
      font-size: .85rem;
      z-index: 9999;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
      max-width: 90vw;
      text-align: center;
      pointer-events: none;
      white-space: nowrap;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
    }

    .toast.success {
      background: var(--gold-gradient);
      color: #1a1a1a;
    }

    /* =========================================================
       NAVBAR
    ========================================================= */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--nav-h);
      background: rgba(252, 252, 247, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 2px 20px rgba(158, 98, 0, .08);
      z-index: 1000;
      transition: box-shadow 0.3s ease;
      border-bottom: 1px solid rgba(191, 147, 42, .15);
      /* PERF FIX: will-change only on actively animated element */
      will-change: box-shadow;
    }

    .navbar.scrolled {
      box-shadow: 0 4px 30px rgba(158, 98, 0, .14);
    }

    .nav-container {
      height: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 clamp(14px, 3vw, 30px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      cursor: pointer;
    }

    .logo-icon {
      width: 44px;
      height: 44px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background: var(--gold-gradient);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.3rem;
      box-shadow: 0 4px 15px rgba(158, 98, 0, .35);
      transition: transform .5s, box-shadow .3s;
      flex-shrink: 0;
      overflow: hidden;
      animation: logoPulse 3s ease-in-out infinite;
    }

    @keyframes logoPulse {

      0%,
      100% {
        box-shadow: 0 4px 15px rgba(158, 98, 0, .3);
      }

      50% {
        box-shadow: 0 4px 25px rgba(158, 98, 0, .65);
      }
    }

    .logo:hover .logo-icon {
      transform: scale(1.1) rotate(360deg);
    }

    .logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .brand-name .main {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      font-weight: 800;
      color: var(--text);
      line-height: 1;
    }

    .brand-name .sub {
      font-size: .6rem;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .nav-links {
      display: flex;
      gap: clamp(.9rem, 1.5vw, 1.8rem);
      align-items: center;
    }

    .nav-links a {
      color: var(--text);
      font-weight: 500;
      font-size: .88rem;
      position: relative;
      padding: 4px 0;
      transition: color .3s;
      cursor: pointer;
      white-space: nowrap;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--gold-gradient);
      transition: width .3s;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--primary);
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }

    .contact-nav-btn {
      background: var(--gold-gradient);
      color: #fff;
      padding: .6rem 1.3rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: .84rem;
      transition: var(--transition);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .contact-nav-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(158, 98, 0, .4);
    }

    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      font-size: 1.4rem;
      color: var(--text);
      padding: 6px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* ACCESSIBILITY: min touch target */
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      background: var(--bg-cream);
      z-index: 999;
      padding: 8px 0 16px;
      box-shadow: 0 10px 30px rgba(158, 98, 0, .12);
      border-top: 1px solid rgba(191, 147, 42, .15);
      max-height: calc(100dvh - var(--nav-h));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 13px 24px;
      font-weight: 500;
      font-size: .91rem;
      border-bottom: 1px solid rgba(158, 98, 0, .06);
      transition: var(--transition);
      color: var(--text);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* ACCESSIBILITY: min touch target */
      min-height: 44px;
    }

    .mobile-nav a:hover,
    .mobile-nav a.active {
      color: var(--primary);
      background: rgba(158, 98, 0, .05);
      padding-left: 32px;
    }

    .mobile-nav a.active {
      border-left: 3px solid var(--primary);
    }

    .mob-cta {
      padding: 14px 24px;
    }

    /* =========================================================
       BUTTONS
    ========================================================= */
    .btn-gold {
      background: var(--gold-gradient);
      color: #fff;
      padding: .82rem 1.9rem;
      border-radius: 50px;
      font-weight: 600;
      font-size: .93rem;
      cursor: pointer;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
      border: none;
      -webkit-tap-highlight-color: transparent;
      /* A11Y */
      min-height: 44px;
    }

    .btn-gold::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
      transition: left .5s;
    }

    .btn-gold:hover::before {
      left: 100%;
    }

    .btn-gold:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 35px rgba(158, 98, 0, .45);
    }

    .btn-gold:active {
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent !important;
      color: var(--primary) !important;
      border: 2px solid var(--primary) !important;
    }

    .btn-outline:hover {
      background: var(--gold-gradient) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    /* =========================================================
       HERO
    ========================================================= */
    .hero {
      min-height: 100svh;
      /* FIX: use svh to avoid mobile address bar issue */
      background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-light) 50%, var(--bg-warm) 100%);
      display: flex;
      align-items: center;
      padding: calc(var(--nav-h) + 40px) clamp(16px, 4vw, 24px) 60px;
      position: relative;
      overflow: hidden;
    }

    .hero-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: orbFloat 8s ease-in-out infinite;
      /* PERF FIX: GPU-only properties */
      will-change: transform;
    }

    .hero-orb-1 {
      width: min(500px, 80vw);
      height: min(500px, 80vw);
      right: -80px;
      top: -80px;
      background: radial-gradient(circle, rgba(191, 147, 42, .22) 0%, transparent 70%);
      animation-duration: 9s;
    }

    .hero-orb-2 {
      width: min(350px, 60vw);
      height: min(350px, 60vw);
      left: -60px;
      bottom: 80px;
      background: radial-gradient(circle, rgba(158, 98, 0, .13) 0%, transparent 70%);
      animation-duration: 11s;
      animation-delay: -4s;
    }

    @keyframes orbFloat {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      33% {
        transform: translate(25px, -18px) scale(1.07);
      }

      66% {
        transform: translate(-18px, 12px) scale(.96);
      }
    }

    .floating-chip {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      animation: chipFloat var(--dur, 6s) ease-in-out infinite;
      animation-delay: var(--del, 0s);
      opacity: .12;
      font-size: var(--sz, 1.5rem);
      color: var(--primary);
      will-change: transform;
    }

    @keyframes chipFloat {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-22px) rotate(14deg);
      }
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1300px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 5vw, 60px);
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(158, 98, 0, .1);
      border: 1px solid rgba(191, 147, 42, .3);
      color: var(--primary);
      padding: .38rem 1.1rem;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: 2px;
      margin-bottom: 1rem;
      text-transform: uppercase;
    }

    .luxury-text {
      background: var(--gold-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200% auto;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-weight: 900;
      font-size: clamp(2.4rem, 5.5vw, 4.8rem);
      margin-bottom: .6rem;
      line-height: 1.05;
      letter-spacing: 1px;
      animation: textShimmer 4s linear infinite;
      /* PERF: Reduce shimmer on low-power */
    }

    @media (prefers-reduced-motion: reduce) {
      .luxury-text {
        animation: none;
      }

      .hero-orb,
      .floating-chip {
        animation: none;
      }

      .logo-icon {
        animation: none;
      }

      .ticker {
        animation: none;
      }
    }

    @keyframes textShimmer {
      0% {
        background-position: 0% center;
      }

      100% {
        background-position: 200% center;
      }
    }

    .hero-subtitle {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.05rem, 2.2vw, 1.5rem);
      margin-bottom: 1.1rem;
      font-style: italic;
      font-weight: 500;
      color: var(--text-light);
    }

    .hero-description {
      font-size: clamp(.88rem, 1.5vw, .98rem);
      margin-bottom: 2rem;
      color: var(--text-light);
      max-width: 520px;
      line-height: 1.8;
    }

    .hero-buttons {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 1.8rem;
    }

    .hero-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hero-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: #fff;
      border: 1px solid rgba(191, 147, 42, .25);
      padding: 5px 13px;
      border-radius: 50px;
      font-size: .73rem;
      font-weight: 600;
      box-shadow: 0 3px 12px rgba(158, 98, 0, .07);
    }

    .hero-chip i {
      color: var(--primary);
    }

    .hero-image-wrap {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-3d-stage {
      position: relative;
      width: 100%;
      max-width: 750px;
    }

    .hero-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 70%;
      background: radial-gradient(circle, rgba(191, 147, 42, .22) 0%, rgba(223, 197, 123, .08) 40%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      animation: glowPulse 4s ease-in-out infinite;
    }

    @keyframes glowPulse {

      0%,
      100% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
      }
    }

    /* VIDEO OPTIMIZATION: hero video */
    .hero-main-video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 22px;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 25px 50px rgba(158, 98, 0, .4)) drop-shadow(0 0 60px rgba(191, 147, 42, .12));
      animation: imgFloat 6s ease-in-out infinite;
      border: 2px solid rgba(191, 147, 42, .3);
      object-fit: cover;
      max-height: 620px;
      /* CLS FIX: explicit aspect-ratio prevents layout shift */
      aspect-ratio: 16/10;
      will-change: transform;
    }

    @keyframes imgFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-16px);
      }
    }

    .img-badge {
      position: absolute;
      background: #fff;
      border-radius: 13px;
      padding: .5rem .95rem;
      z-index: 3;
      box-shadow: 0 8px 28px rgba(158, 98, 0, .15);
      border: 1px solid rgba(191, 147, 42, .22);
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .74rem;
      font-weight: 700;
      white-space: nowrap;
      animation: badgeFloat var(--bd, 5s) ease-in-out infinite;
      animation-delay: var(--bdd, 0s);
      will-change: transform;
    }

    .img-badge i {
      color: var(--primary);
    }

    .img-badge-1 {
      top: 10%;
      right: -3%;
      --bd: 4.5s;
      --bdd: -1s;
    }

    .img-badge-2 {
      bottom: 22%;
      left: -3%;
      --bd: 5.5s;
      --bdd: -2.5s;
    }

    .img-badge-3 {
      bottom: 8%;
      right: 8%;
      --bd: 6s;
      --bdd: -4s;
    }

    @keyframes badgeFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    .scroll-indicator {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--primary);
      font-size: 1.3rem;
      animation: bounce 2s infinite;
      z-index: 3;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(-12px);
      }
    }

    /* =========================================================
       TICKER
    ========================================================= */
    .ticker-wrap {
      width: 100%;
      height: 34px;
      overflow: hidden;
      background: linear-gradient(135deg, #7a4a00, var(--primary));
      display: flex;
      align-items: center;
      border-top: 1px solid rgba(223, 197, 123, .3);
      border-bottom: 1px solid rgba(223, 197, 123, .3);
      position: relative;
      z-index: 2;
    }

    .ticker {
      display: flex;
      animation: tickScroll 60s linear infinite;
      white-space: nowrap;
      /* PERF: GPU compositing for ticker */
      will-change: transform;
    }

    @keyframes tickScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      font-size: .82rem;
      font-weight: 400;
      padding: 0 24px;
      white-space: nowrap;
    }

    .ticker-item i {
      color: var(--accent);
      font-size: .9rem;
    }

    /* =========================================================
       SECTIONS & CONTAINERS
    ========================================================= */
    section {
      /* GAP FIX: sections ke beech ka bada khaali space kam kiya */
      padding: clamp(32px, 5vw, 56px) clamp(14px, 4vw, 20px);
      position: relative;
      width: 100%;
      scroll-margin-top: var(--nav-h);
    }

    section[id],
    .stats-section {
      scroll-margin-top: var(--nav-h);
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
    }

    .section-badge {
      display: inline-block;
      background: var(--gold-gradient);
      color: #fff;
      padding: .28rem 1.1rem;
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin-bottom: .9rem;
    }

    .section-header {
      text-align: center;
      margin-bottom: clamp(1.8rem, 4vw, 3rem);
    }

    .section-title {
      background: var(--gold-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.7rem, 4.5vw, 3.2rem);
      margin-bottom: .7rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .section-subtitle {
      color: var(--text-light);
      max-width: 650px;
      margin: 0 auto;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-style: italic;
      font-size: clamp(1rem, 1.8vw, 1.12rem);
    }

    .bg-cream {
      background: var(--bg-cream);
    }

    .bg-white {
      background: var(--white);
    }

    .bg-light {
      background: linear-gradient(135deg, var(--bg-light), var(--bg-cream));
    }

    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: .9rem 0 1.3rem;
      gap: 10px;
    }

    .divider-line {
      width: 50px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--primary));
    }

    .divider-line.right {
      background: linear-gradient(90deg, var(--primary), transparent);
    }

    .divider i {
      color: var(--primary);
      font-size: 1rem;
    }

    /* =========================================================
       STATS
    ========================================================= */
    .stats-section {
      background: linear-gradient(135deg, #7a4a00, var(--primary));
      color: #fff;
      padding: clamp(24px, 4vw, 38px) clamp(14px, 4vw, 20px);
      position: relative;
      overflow: hidden;
      scroll-margin-top: var(--nav-h);
    }

    .stats-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255, 255, 255, .03) 30px, rgba(255, 255, 255, .03) 60px);
      pointer-events: none;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      aspect-ratio: 18 / 2;
      gap: clamp(14px, 3vw, 22px);
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .stat-item {
      text-align: center;
      transition: transform .3s;
    }

    .stat-item:hover {
      transform: translateY(-5px);
    }

    .stat-icon {
      font-size: 1.5rem;
      margin-bottom: .3rem;
      opacity: .9;
    }

    .stat-number {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.3rem, 3vw, 2rem);
      font-weight: 800;
      margin-bottom: .2rem;
    }

    .stat-label {
      font-size: .78rem;
      opacity: .9;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* =========================================================
       SHOWCASE / MOSAIC
    ========================================================= */
    .showcase-section {
      background: var(--bg-cream);
      overflow: hidden;
    }

    .mosaic-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 clamp(6px, 1.5vw, 16px);
    }

    .mosaic-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: clamp(130px, 22vw, 210px);
      gap: clamp(7px, 1.5vw, 13px);
    }

    .mosaic-tile:nth-child(1) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(2) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(3) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(4) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(5) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(6) {
      grid-column: span 6;
    }

    .mosaic-tile:nth-child(7) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(8) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(9) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(10) {
      grid-column: span 3;
    }

    .mosaic-tile:nth-child(11) {
      grid-column: span 3;
    }

    .mosaic-tile {
      position: relative;
      overflow: hidden;
      border-radius: clamp(10px, 2vw, 17px);
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(158, 98, 0, .1);
      background: var(--bg-warm);
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
      border: 2px solid rgba(191, 147, 42, .18);
      /* CLS FIX: contain layout */
      contain: layout style;
    }

    .mosaic-tile:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 22px 50px rgba(158, 98, 0, .3);
      z-index: 2;
    }

    .mosaic-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .8s cubic-bezier(.2, .6, .2, 1), filter .4s;
      /* IMAGE PERF: prevent sub-pixel rendering jitter */
      backface-visibility: hidden;
    }

    .mosaic-tile:hover img {
      transform: scale(1.1);
      filter: brightness(1.04);
    }

    .mosaic-tile::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .12) 50%, transparent 70%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }

    .mosaic-tile:hover::after {
      opacity: 1;
    }

    .mosaic-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: clamp(.65rem, 2vw, 1rem) clamp(.75rem, 2vw, 1.1rem);
      color: #fff;
      transform: translateY(18px);
      opacity: 0;
      transition: opacity .3s, transform .3s;
      z-index: 3;
    }

    .mosaic-tile:hover .mosaic-info {
      opacity: 1;
      transform: translateY(0);
    }

    .mosaic-cat {
      display: inline-block;
      background: rgba(191, 147, 42, .92);
      color: #1a1a1a;
      padding: .15rem .6rem;
      border-radius: 10px;
      font-size: clamp(.52rem, 1.1vw, .6rem);
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: .3rem;
    }

    .mosaic-title {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(.8rem, 1.8vw, 1.05rem);
      font-weight: 700;
      line-height: 1.25;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    }

    .mosaic-zoom {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, .95);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: .85rem;
      opacity: 0;
      transform: scale(.5);
      transition: var(--transition);
      z-index: 4;
    }

    .mosaic-tile:hover .mosaic-zoom {
      opacity: 1;
      transform: scale(1);
    }

    .mosaic-tile.text-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(122, 74, 0, .5), rgba(158, 98, 0, .3));
      z-index: 2;
    }

    .mosaic-text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - clamp(18px, 4vw, 32px));
      max-width: 340px;
      background: rgba(252, 252, 247, .93);
      backdrop-filter: blur(8px);
      border-radius: clamp(9px, 2vw, 13px);
      padding: clamp(.75rem, 2vw, 1.05rem) clamp(.95rem, 2.5vw, 1.25rem);
      text-align: center;
      z-index: 4;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
      border: 1px solid rgba(191, 147, 42, .4);
    }

    .mosaic-text-overlay .mt-eyebrow {
      display: block;
      font-size: clamp(.52rem, 1.1vw, .6rem);
      letter-spacing: 2.5px;
      color: var(--primary);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: .3rem;
    }

    .mosaic-text-overlay .mt-title {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-style: italic;
      font-size: clamp(.78rem, 1.8vw, 1rem);
      color: var(--text);
      line-height: 1.3;
      font-weight: 600;
    }

    .mosaic-text-overlay .mt-line {
      width: 28px;
      height: 2px;
      background: var(--gold-gradient);
      margin: .45rem auto 0;
      border-radius: 2px;
    }

    .mosaic-tile.text-card::after,
    .mosaic-tile.text-card .mosaic-info {
      display: none;
    }

    .showcase-cta {
      text-align: center;
      margin-top: clamp(1.4rem, 3.5vw, 2.2rem);
    }

    /* =========================================================
       QUICK GALLERY — 7 image grid (1 hero + 6 tiles)
    ========================================================= */
    .grid7-section {
      padding: clamp(1.6rem, 3vw, 2.6rem) 0;
    }

    .grid7-wrap {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 1.4rem;
    }

    .grid7-hero,
    .grid7-tile {
      position: relative;
      border-radius: var(--radius, 16px);
      overflow: hidden;
      cursor: pointer;
      background: #f0f0f0;
    }

    .grid7-hero {
      height: clamp(220px, 32vw, 360px);
    }

    .grid7-hero img,
    .grid7-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .45s ease;
    }

    .grid7-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
    }

    .grid7-tile {
      aspect-ratio: 1 / 1;
    }

    .grid7-hero:hover img,
    .grid7-tile:hover img {
      transform: scale(1.08);
    }

    .grid7-hero::after,
    .grid7-tile::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .72) 100%);
      opacity: 0;
      transition: opacity .3s;
    }

    .grid7-hero:hover::after,
    .grid7-tile:hover::after,
    .grid7-hero:focus::after,
    .grid7-tile:focus::after {
      opacity: 1;
    }

    .grid7-zoom {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--gold, #C9A227);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .25s, transform .25s;
      z-index: 2;
    }

    .grid7-hero:hover .grid7-zoom,
    .grid7-tile:hover .grid7-zoom {
      opacity: 1;
      transform: translateY(0);
    }

    .grid7-caption {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 10px;
      z-index: 2;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .25s, transform .25s;
    }

    .grid7-hero:hover .grid7-caption,
    .grid7-tile:hover .grid7-caption {
      opacity: 1;
      transform: translateY(0);
    }

    .grid7-cat {
      display: block;
      font-size: .68rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--gold, #e6c25c);
      margin-bottom: 2px;
    }

    .grid7-name {
      font-size: .84rem;
      font-weight: 600;
      color: #fff;
    }

    .grid7-hero .grid7-name {
      font-size: 1.05rem;
    }

    @media (max-width: 768px) {
      .grid7-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 480px) {
      .grid7-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .grid7-hero {
        height: 200px;
      }
    }

    /* =========================================================
       PRODUCTS CAROUSEL
    ========================================================= */
    .carousel-wrapper {
      position: relative;
      margin-top: 1.4rem;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--gold-gradient);
      color: #fff;
      cursor: pointer;
      font-size: .78rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(158, 98, 0, .4);
      transition: var(--transition);
    }

    .carousel-btn:hover {
      transform: translateY(-50%) scale(1.12);
    }

    .carousel-btn.prev {
      left: -14px;
    }

    .carousel-btn.next {
      right: -14px;
    }

    .carousel-btn:disabled {
      opacity: .35;
      cursor: default;
      transform: translateY(-50%);
    }

    .products-grid {
      display: flex;
      gap: var(--gap);
      overflow-x: auto;
      padding: 10px 4px 18px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) transparent;
      /* PERF: promote to own layer */
      will-change: scroll-position;
    }

    .products-grid::-webkit-scrollbar {
      height: 4px;
    }

    .products-grid::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 10px;
    }

    .product-card {
      flex: 0 0 clamp(175px, 22vw, 230px);
      width: clamp(175px, 22vw, 230px);
      background: #fff;
      border-radius: 17px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid rgba(191, 147, 42, .1);
    }

    .product-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .product-badge {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 3;
      color: #fff;
      padding: .28rem .8rem;
      border-radius: 20px;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    }

    .product-badge.bestseller,
    .product-badge.top {
      background: var(--gold-gradient);
      color: #1a1a1a;
    }

    .product-badge.new {
      background: linear-gradient(135deg, #DFC57B, #BF932A);
      color: #1a1a1a;
    }

    .product-badge.popular {
      background: linear-gradient(135deg, #BF932A, #9E6200);
    }

    .product-badge.hot {
      background: linear-gradient(135deg, #9E6200, #7a4a00);
    }

    .product-badge.premium {
      background: var(--gold-gradient-rev);
    }

    .product-image-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1.05 / 1;
      /* CLS FIX: stable dimensions */
      background: var(--bg-light);
      /* boxed/inset product photo — padding keeps the image away
         from the edges instead of bleeding full-bleed */
      padding: 4%;
      border-radius: 12px;
      /* reserved band above the photo so a badge (HOT/NEW/etc.)
         floats above the image instead of sitting on top of it */
      margin-top: 30px;
    }

    .product-image {
      width: 100%;
      height: 100%;
      /* SIZE-CONSISTENCY FIX: some source photos (e.g. Arduino) have a lot
         of empty white margin around the product, others are tightly
         cropped — with object-fit:contain that made the product itself
         look much smaller on some cards than others, even though every
         card's box is the same size. object-fit:cover always fills the
         box completely regardless of how much margin the source photo
         has, so every product now reads as roughly the same visual size. */
      object-fit: cover;
      object-position: center;
      transition: transform .55s;
      /* LAZY LOAD: decoded async */
    }

    .product-card:hover .product-image {
      transform: scale(1.09);
    }

    .view-overlay {
      position: absolute;
      inset: 0;
      background: rgba(158, 98, 0, .88);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 600;
      font-size: .84rem;
      opacity: 0;
      transition: opacity .3s;
      gap: 6px;
    }

    .product-card:hover .view-overlay {
      opacity: 1;
    }

    .product-body {
      padding: .95rem .85rem;
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .product-category {
      display: inline-block;
      background: var(--bg-light);
      color: var(--primary);
      padding: .2rem .75rem;
      border-radius: 20px;
      font-size: .58rem;
      font-weight: 600;
      margin-bottom: .4rem;
      border: 1px solid rgba(191, 147, 42, .25);
      align-self: center;
      text-transform: uppercase;
    }

    .product-name {
      font-size: .93rem;
      font-weight: 700;
      margin-bottom: .28rem;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--text);
    }

    .product-description {
      color: var(--text-light);
      font-size: .68rem;
      margin-bottom: .5rem;
      flex: 1;
      line-height: 1.5;
    }

    .stars {
      color: #BF932A;
      font-size: .76rem;
      margin-bottom: .55rem;
    }

    .buy-online-btn {
      width: 100%;
      background: var(--gold-gradient);
      color: #fff;
      padding: .55rem;
      border-radius: 10px;
      font-weight: 600;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: .7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: var(--transition);
      -webkit-tap-highlight-color: transparent;
      border: none;
      cursor: pointer;
      min-height: 36px;
    }

    .buy-online-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(158, 98, 0, .4);
    }

    .buy-online-btn:active {
      transform: translateY(0);
    }

    /* =========================================================
       TRENDING NOW — second slider inside "Our Collection"
       Square product images + Add to Cart & Buy Now on every card
    ========================================================= */
    .trending-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: clamp(2.4rem, 5vw, 3.4rem);
      margin-bottom: .2rem;
    }

    .trending-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--gold-gradient);
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: .35rem .85rem;
      border-radius: 20px;
      box-shadow: 0 6px 18px rgba(158, 98, 0, .3);
    }

    .trending-title {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.1rem, 2.6vw, 1.5rem);
      color: var(--text);
      margin: 0;
    }

    .trending-wrapper {
      margin-top: 1.2rem;
    }

    .trending-grid {
      display: flex;
      gap: var(--gap);
      overflow-x: auto;
      padding: 10px 4px 18px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) transparent;
    }

    .trending-grid::-webkit-scrollbar {
      height: 4px;
    }

    .trending-grid::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 10px;
    }

    .trend-card {
      flex: 0 0 clamp(190px, 24vw, 250px);
      width: clamp(190px, 24vw, 250px);
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid rgba(191, 147, 42, .12);
    }

    .trend-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .trend-image-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      background: var(--bg-light);
      /* boxed/inset product photo, same treatment as .product-image-wrap */
      padding: 4%;
      border-radius: 12px;
      margin-top: 30px;
    }

    .trend-image {
      width: 100%;
      height: 100%;
      /* Same fix as .product-image — see the comment there. */
      object-fit: cover;
      object-position: center;
      transition: transform .55s;
    }

    .trend-card:hover .trend-image {
      transform: scale(1.09);
    }

    .trend-body {
      padding: .95rem .9rem 1.05rem;
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .trend-name {
      font-size: .93rem;
      font-weight: 700;
      margin: 0 0 .28rem;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--text);
    }

    .trend-btn-row {
      display: flex;
      gap: 8px;
      margin-top: auto;
    }

    .trend-cart-btn,
    .trend-buy-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: .55rem .4rem;
      border-radius: 10px;
      font-weight: 600;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: .66rem;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      -webkit-tap-highlight-color: transparent;
      min-height: 36px;
    }

    .trend-cart-btn {
      background: #fff;
      color: var(--primary-dark, #9E6200);
      border: 1.5px solid var(--accent, #BF932A);
    }

    .trend-cart-btn:hover {
      background: var(--bg-light);
      transform: translateY(-2px);
    }

    .trend-buy-btn {
      background: var(--gold-gradient);
      color: #fff;
    }

    .trend-buy-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(158, 98, 0, .4);
    }

    @media (max-width: 480px) {
      .trend-btn-row {
        flex-direction: column;
      }
    }

    /* =========================================================
       VIDEO SHOWCASE
    ========================================================= */
    #video-showcase {
      background: linear-gradient(135deg, #3d2000 0%, #7a4a00 50%, #3d2000 100%);
      padding: clamp(60px, 10vw, 110px) clamp(14px, 4vw, 20px);
      position: relative;
      overflow: hidden;
    }

    #video-showcase::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(191, 147, 42, .2) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 50%, rgba(223, 197, 123, .08) 0%, transparent 60%);
      pointer-events: none;
    }

    .video-section-header {
      text-align: center;
      margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
      position: relative;
      z-index: 2;
    }

    .video-section-badge {
      display: inline-block;
      background: rgba(223, 197, 123, .12);
      color: #fff;
      border: 1px solid rgba(223, 197, 123, .3);
      padding: .32rem 1.2rem;
      border-radius: 50px;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin-bottom: .9rem;
    }

    .video-section-title {
      color: #fff;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.8rem, 4.5vw, 3rem);
      font-weight: 800;
      margin-bottom: .7rem;
    }

    .video-section-subtitle {
      color: rgba(255, 255, 255, .7);
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-style: italic;
      font-size: clamp(.95rem, 1.7vw, 1.1rem);
    }

    .video-grid {
      max-width: 1300px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 14px;
      position: relative;
      z-index: 2;
    }

    .video-card {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background: #111;
      cursor: pointer;
      box-shadow: 0 20px 55px rgba(0, 0, 0, .55);
      transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s;
    }

    .video-card:hover {
      transform: translateY(-7px) scale(1.013);
      box-shadow: 0 30px 70px rgba(158, 98, 0, .3);
    }

    .video-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      z-index: 3;
      border: 1.5px solid rgba(191, 147, 42, 0);
      transition: border-color .4s;
      pointer-events: none;
    }

    .video-card:hover::before {
      border-color: rgba(191, 147, 42, .4);
    }

    .video-card.featured {
      grid-column: 1;
      grid-row: 1/3;
    }

    .video-card.v2 {
      grid-column: 2;
      grid-row: 1;
    }

    .video-card.v3 {
      grid-column: 3;
      grid-row: 1;
    }

    .video-card.v4 {
      grid-column: 2;
      grid-row: 2;
    }

    .video-card.v5 {
      grid-column: 3;
      grid-row: 2;
    }

    /* VIDEO OPTIMIZATION: aspect-ratio sized to actual content, no forced extra height */
    .video-card video {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      object-fit: cover;
      display: block;
    }

    .video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .1) 50%, transparent 70%);
    }

    .video-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(.9);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(8px);
      border: 2px solid rgba(255, 255, 255, .6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.3rem;
      z-index: 4;
      transition: var(--transition);
      animation: playPulse 2.5s ease-in-out infinite;
    }

    .video-card.small .video-play-btn {
      width: 44px;
      height: 44px;
      font-size: .95rem;
    }

    .video-card:hover .video-play-btn {
      transform: translate(-50%, -50%) scale(1);
      background: rgba(191, 147, 42, .3);
      border-color: var(--accent);
    }

    .video-card.playing .video-play-btn {
      opacity: 0;
    }

    @keyframes playPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(191, 147, 42, .4);
      }

      50% {
        box-shadow: 0 0 0 10px rgba(191, 147, 42, 0);
      }
    }

    .video-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.1rem;
      z-index: 4;
    }

    .video-tag {
      display: inline-block;
      background: rgba(191, 147, 42, .9);
      color: #1a1a1a;
      padding: .16rem .6rem;
      border-radius: 9px;
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: .45rem;
    }

    .video-title {
      color: #fff;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(.9rem, 1.6vw, 1rem);
      font-weight: 700;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    }

    .video-card.featured .video-title {
      font-size: clamp(1rem, 1.8vw, 1.25rem);
    }

    .video-desc {
      color: #fff;
      font-size: .76rem;
      margin-top: 3px;
    }

    .video-card.small .video-desc {
      display: none;
    }

    /* =========================================================
       WHY US / FEATURES
    ========================================================= */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
      margin-top: 1.8rem;
      padding-bottom: 2rem;
    }

    .feature-card {
      background: #fff;
      padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.3rem, 2.5vw, 1.6rem);
      border-radius: 17px;
      text-align: center;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      border: 1px solid transparent;
    }

    .feature-card:hover {
      transform: translateY(-7px);
      border-color: var(--accent);
      box-shadow: var(--shadow-md);
    }

    .feature-icon {
      width: 68px;
      height: 68px;
      margin: 0 auto 1.2rem;
      background: linear-gradient(135deg, var(--bg-light), var(--bg-cream));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      color: var(--primary);
      transition: var(--transition);
    }

    .feature-card:hover .feature-icon {
      background: var(--gold-gradient);
      color: #fff;
      transform: rotateY(360deg);
    }

    .feature-title {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1rem, 1.7vw, 1.15rem);
      font-weight: 700;
      margin-bottom: .5rem;
    }

    .feature-desc {
      color: var(--text-light);
      font-size: .85rem;
      line-height: 1.7;
    }

    /* =========================================================
       TESTIMONIALS
    ========================================================= */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 3vw, 22px);
      margin-top: 1.8rem;
      padding-bottom: 1.5rem;
    }

    .testimonial-card {
      background: #fff;
      padding: clamp(1.3rem, 3vw, 1.8rem);
      border-radius: 17px;
      box-shadow: var(--shadow-sm);
      position: relative;
      transition: var(--transition);
      overflow: hidden;
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .testimonial-card::before {
      content: '"';
      position: absolute;
      top: 6px;
      left: 16px;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: 4rem;
      color: var(--accent);
      opacity: .3;
      line-height: 1;
    }

    .testimonial-stars {
      color: #BF932A;
      margin-bottom: .85rem;
      font-size: .9rem;
    }

    .testimonial-text {
      color: var(--text-light);
      font-style: italic;
      line-height: 1.7;
      margin-bottom: 1rem;
      font-size: .87rem;
      position: relative;
      z-index: 2;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .author-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--gold-gradient);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .author-info h4 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--text);
      font-size: .93rem;
      margin-bottom: .06rem;
    }

    .author-info span {
      color: var(--text-light);
      font-size: .74rem;
    }

    /* =========================================================
       SOCIAL / BUY ONLINE
    ========================================================= */
    .social-section {
      background: linear-gradient(135deg, var(--bg-light), var(--bg-cream));
      padding-bottom: clamp(40px, 6vw, 64px);
    }

    .social-grid {
      display: grid;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--gap);
      margin-top: 1.8rem;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 3rem;
      margin-bottom: 2rem;
      grid-template-columns: repeat(6, 1fr);
    }

    .social-card {
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* content center mein */
      background: #fff;
      padding: clamp(.9rem, 1vw, 1.4rem) 1.2rem;
      border-radius: 17px;
      text-align: center;
      box-shadow: var(--shadow-sm);
      color: var(--text);
      transition: var(--transition);
      border: 2px solid transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .social-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--shadow-md);
    }

    .social-icon-big {
      font-size: 2.1rem;
      margin-bottom: .55rem;
      display: block;
      transition: transform .3s;
    }

    .social-card:hover .social-icon-big {
      transform: scale(1.16);
    }

    .social-card.amz:hover {
      border-color: #ff9900;
    }

    .social-card.amz:hover .social-icon-big {
      color: #ff9900;
    }

    .social-card.fk:hover {
      border-color: #2874f0;
    }

    .social-card.fk:hover .social-icon-big {
      color: #2874f0;
    }

    .social-card.ms:hover {
      border-color: #f43397;
    }

    .social-card.ms:hover .social-icon-big {
      color: #f43397;
    }

    .social-card.ig:hover {
      border-color: #ee2a7b;
    }

    .social-card.ig:hover .social-icon-big {
      color: #ee2a7b;
    }

    .social-card.yt:hover {
      border-color: #ff0000;
    }

    .social-card.yt:hover .social-icon-big {
      color: #ff0000;
    }

    .social-card.im:hover {
      border-color: #ef7d1b;
    }

    .social-card.im:hover .social-icon-big {
      color: #ef7d1b;
    }

    .social-name {
      font-weight: 700;
      font-size: 1.05rem;
      margin-bottom: .3rem;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
    }

    .social-handle {
      color: var(--text-light);
      font-size: .78rem;
      margin-bottom: .8rem;
    }

    .platform-btn {
      display: inline-block;
      padding: .4rem 1rem;
      border-radius: 20px;
      font-size: .7rem;
      font-weight: 700;
      border: 2px solid var(--accent);
      color: var(--primary);
      transition: var(--transition);
    }

    .social-card:hover .platform-btn {
      background: var(--gold-gradient);
      color: #fff;
      border-color: transparent;
    }

    /* =========================================================
       CONTACT
    ========================================================= */
    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: clamp(18px, 3vw, 28px);
      max-width: 1100px;
      margin: 0 auto;
    }

    .contact-info {
      background: var(--gold-gradient);
      color: #fff;
      padding: clamp(1.6rem, 4vw, 2.2rem);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      gap: 1.3rem;
    }

    .contact-info h3 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.3rem, 3vw, 1.6rem);
      margin-bottom: .35rem;
    }

    .contact-info>p {
      opacity: .9;
      font-size: .85rem;
      line-height: 1.7;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .contact-item i {
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, .2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: .88rem;
    }

    .contact-item strong {
      display: block;
      font-size: .78rem;
      margin-bottom: .15rem;
      opacity: .85;
    }

    .contact-item a,
    .contact-item span {
      color: #fff;
      font-size: .85rem;
      word-break: break-word;
    }

    .contact-item a:hover {
      text-decoration: underline;
    }

    .contact-form {
      background: #fff;
      padding: clamp(1.6rem, 4vw, 2.2rem);
      border-radius: 20px;
      box-shadow: var(--shadow-md);
    }

    .contact-form h3 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: 1.3rem;
      color: var(--text);
      margin-bottom: 1.3rem;
    }

    .form-group {
      margin-bottom: 1rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .85rem;
    }

    .form-group label {
      display: block;
      margin-bottom: .4rem;
      font-weight: 600;
      color: var(--text);
      font-size: .78rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      padding: .75rem .95rem;
      border: 2px solid #e8e0cc;
      border-radius: 10px;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: .87rem;
      transition: var(--transition);
      background: #faf8f3;
      color: var(--text);
      -webkit-appearance: none;
      appearance: none;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(191, 147, 42, .12);
    }

    .success-message {
      background: #fef7e8;
      color: #7a4a00;
      padding: .85rem;
      border-radius: 10px;
      margin-top: .9rem;
      display: none;
      font-weight: 500;
      font-size: .85rem;
      border: 1px solid var(--accent);
    }

    /* =========================================================
       IMAGE ZOOM — plain photo popup for "A Closer Look" quick gallery
    ========================================================= */
    .img-zoom-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5000;
      background: rgba(0, 0, 0, .92);
      justify-content: center;
      align-items: center;
      padding: 20px;
      overscroll-behavior: contain;
    }

    .img-zoom-overlay.active {
      display: flex;
      animation: fadeIn .25s ease;
    }

    .img-zoom-overlay img {
      max-width: 94vw;
      max-height: 90vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 10px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
      cursor: zoom-out;
    }

    .img-zoom-close {
      position: absolute;
      top: 18px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease;
    }

    .img-zoom-close:hover {
      background: rgba(255, 255, 255, .3);
    }

    @media (max-width: 600px) {
      .img-zoom-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 22px;
      }
    }

    /* =========================================================
       LIGHTBOX
    ========================================================= */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5000;
      background: rgba(0, 0, 0, .92);
      justify-content: center;
      align-items: center;
      padding: 14px;
      /* CLS FIX: use overscroll-behavior to stop body scroll jump */
      overscroll-behavior: contain;
    }

    .lightbox.active {
      display: flex;
      animation: fadeIn .3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .lightbox-content {
      position: relative;
      max-width: 880px;
      width: 100%;
      /* BUGFIX: this was "max-height" with an implicit grid row sized to
         "auto" (content height). Grid "auto" rows do NOT shrink to fit a
         max-height — they just grow to fit content and get silently
         clipped by overflow:hidden. Once the Reviews section was added,
         total content became taller than 92dvh, so whatever sat at the
         very bottom (the Amazon/Flipkart/Meesho buttons) was cut off
         instead of being reachable by scrolling.
         Fix: give the container a definite height and a flexible
         (minmax(0,1fr)) row so the .lightbox-details column can actually
         shrink to fit and use its own overflow-y:auto to scroll. */
      height: 92dvh;
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(0, 1fr);
      animation: popIn .4s cubic-bezier(.175, .885, .32, 1.275);
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: scale(.86);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .lightbox-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* was 300px — that floor was fighting the shrink-to-fit row on
         shorter screens; 200px still looks fine and leaves more room
         for the details column so less scrolling is needed. */
      min-height: 200px;
      display: block;
      border: 2px solid rgba(191, 147, 42, .22);
    }

    .lightbox-details {
      /* tightened padding so more content fits without scrolling */
      padding: clamp(1rem, 2.4vw, 1.5rem);
      overflow-y: auto;
      /* BUGFIX: min-height:0 overrides the grid item's default
         min-height:auto, which is what was forcing this column to grow
         to full content height instead of respecting the row above and
         actually scrolling. Without this, overflow-y:auto never engages
         and the Amazon/Flipkart/Meesho row gets clipped. */
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      font-size: .92rem;
    }

    .lightbox-details .category-tag {
      display: inline-block;
      align-self: flex-start;
      background: var(--bg-light);
      color: var(--primary);
      padding: .2rem .7rem;
      border-radius: 20px;
      font-size: .62rem;
      font-weight: 600;
      margin-bottom: .5rem;
      border: 1px solid var(--accent);
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .lightbox-details h2 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      color: var(--text);
      margin-bottom: .3rem;
      line-height: 1.25;
    }

    .lightbox-details p {
      color: var(--text-light);
      margin-bottom: .6rem;
      line-height: 1.5;
      font-size: .8rem;
    }

    .lightbox-features {
      list-style: none;
      margin-bottom: .6rem;
    }

    .lightbox-features li {
      padding: .15rem 0;
      color: #555;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .77rem;
    }

    .lightbox-features li i {
      color: var(--primary);
    }

    /* ---- Image gallery thumbnail strip ---- */
    .lb-thumbs {
      display: flex;
      gap: 6px;
      padding: 8px;
      overflow-x: auto;
      background: rgba(0,0,0,.03);
    }
    .lb-thumb {
      width: 46px;
      height: 46px;
      object-fit: cover;
      border-radius: 6px;
      border: 2px solid transparent;
      cursor: pointer;
      opacity: .7;
      flex-shrink: 0;
      transition: opacity .15s, border-color .15s;
    }
    .lb-thumb:hover { opacity: 1; }
    .lb-thumb.active { opacity: 1; border-color: var(--primary, #9E6200); }

    .lb-share-btn {
      background: var(--bg-light);
      color: var(--primary);
      border: 1px solid var(--accent);
      border-radius: 20px;
      padding: .25rem .7rem;
      font-size: .68rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .lb-share-btn:hover { background: var(--accent); color: #fff; }

    .lb-specs-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: .6rem;
      font-size: .76rem;
    }
    .lb-specs-table th, .lb-specs-table td {
      text-align: left;
      padding: .3rem .5rem;
      border-bottom: 1px solid #eee;
    }
    .lb-specs-table th {
      color: #8b5500;
      font-weight: 600;
      width: 40%;
    }
    .lb-specs-table td { color: #555; }

    .lightbox-close {
      position: absolute;
      top: 11px;
      right: 11px;
      background: rgba(255, 255, 255, .95);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      transition: var(--transition);
    }

    .lightbox-close:hover {
      background: var(--primary);
      color: #fff;
      transform: rotate(90deg);
    }

    .lightbox-btn {
      padding: .65rem;
      border: none;
      border-radius: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-bottom: .3rem;
      transition: var(--transition);
      color: #fff;
      text-decoration: none;
    }

    .lightbox-buy-online {
      background: var(--gold-gradient);
    }

    .lightbox-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
    }

    .lb-platforms {
      display: flex;
      gap: 8px;
      margin-top: .3rem;
    }

    .lb-platform-btn {
      flex: 1;
      padding: .45rem .4rem;
      border-radius: 10px;
      font-weight: 700;
      font-size: .65rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: var(--transition);
      border: 2px solid transparent;
      cursor: pointer;
      text-decoration: none;
      color: #fff;
    }

    .lb-platform-btn i {
      font-size: .95rem;
    }

    .lb-platform-btn.amz {
      background: #ff9900;
      color: #1a1a1a;
    }

    .lb-platform-btn.fk {
      background: #2874f0;
    }

    .lb-platform-btn.ms {
      background: #f43397;
    }

    .lb-platform-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    }

    /* =========================================================
       POLICY MODAL
    ========================================================= */
    .policy-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 3000;
      background: rgba(0, 0, 0, .7);
      justify-content: center;
      align-items: center;
      padding: 16px;
    }

    .policy-modal.open {
      display: flex;
    }

    .policy-modal-content {
      background: #fff;
      padding: clamp(1.5rem, 4vw, 2.2rem);
      border-radius: 17px;
      max-width: 660px;
      width: 100%;
      max-height: 85dvh;
      overflow-y: auto;
      position: relative;
    }

    .policy-close {
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 1.6rem;
      cursor: pointer;
      color: #999;
      background: none;
      border: none;
      transition: color .2s;
    }

    .policy-close:hover {
      color: var(--primary);
    }

    /* =========================================================
       FLOATING BUTTONS
    ========================================================= */
    .whatsapp-float {
      position: fixed;
      bottom: 22px;
      right: 22px;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #25d366, #128c7e);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      text-decoration: none;
      box-shadow: 0 8px 25px rgba(37, 211, 102, .5);
      z-index: 999;
      animation: waPulse 2s infinite;
      transition: transform .3s;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      animation: none;
    }

    @keyframes waPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .7);
      }

      70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    .back-to-top {
      position: fixed;
      bottom: 22px;
      left: 22px;
      width: 42px;
      height: 42px;
      background: var(--gold-gradient);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      z-index: 998;
      border: none;
    }

    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
    }

    .back-to-top:hover {
      transform: translateY(-4px) scale(1.1);
    }

    /* =========================================================
       FOOTER
    ========================================================= */
    .site-footer {
      background: linear-gradient(135deg, #111111, #1e1e1e);
      color: #fff;
      padding: clamp(45px, 9vw, 65px) clamp(14px, 4vw, 20px) 20px;
    }

    .footer-container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: clamp(22px, 4vw, 38px);
    }

    .footer-logo {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--accent);
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      font-weight: 800;
      letter-spacing: 1.5px;
    }

    .footer-logo-sub {
      font-size: .58rem;
      letter-spacing: 3px;
      color: rgba(223, 197, 123, .55);
      text-transform: uppercase;
      margin: 4px 0 11px;
    }

    .brand-info p {
      font-size: .83rem;
      line-height: 1.8;
      opacity: .72;
      margin-bottom: 1.3rem;
    }

    .footer-box h4 {
      color: var(--accent);
      text-transform: uppercase;
      font-size: .78rem;
      letter-spacing: 1.5px;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .footer-links {
      padding: 0;
    }

    .footer-links li {
      margin-bottom: .6rem;
    }

    .footer-links a {
      color: #ccc;
      font-size: .82rem;
      transition: var(--transition);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .footer-links a:hover {
      color: var(--accent);
      transform: translateX(5px);
    }

    .footer-social {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .footer-social a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      transition: var(--transition);
    }

    .footer-social a:hover {
      transform: translateY(-4px);
    }

    .footer-social a.fs-ig:hover {
      background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
    }

    .footer-social a.fs-fb:hover {
      background: #1877f2;
    }

    .footer-social a.fs-yt:hover {
      background: #ff0000;
    }

    .footer-social a.fs-wa:hover {
      background: #25d366;
    }

    .footer-social a.fs-tw:hover {
      background: #1d9bf0;
    }

    .footer-social a.fs-li:hover {
      background: #0077b5;
    }

    .footer-bottom {
      max-width: 1400px;
      margin: clamp(22px, 4vw, 36px) auto 0;
      padding: clamp(16px, 3vw, 22px) 0 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      text-align: center;
    }

    .footer-bottom p {
      font-size: .78rem;
      opacity: .48;
    }

    /* =========================================================
       REVEAL ANIMATIONS
       FIX: Use will-change only during animation, not statically
    ========================================================= */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-left {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal-left.in {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal-right {
      opacity: 0;
      transform: translateX(28px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal-right.in {
      opacity: 1;
      transform: translateX(0);
    }

    /* =========================================================
       RESPONSIVE: TABLET (769px – 1024px)
    ========================================================= */
    @media screen and (min-width:769px) and (max-width:1024px) {
      .hero {
        min-height: auto;
        padding: 90px 20px 50px;
      }

      .hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
        text-align: left;
      }

      .hero-image-wrap {
        order: 2;
        max-width: 500px;
        margin: 0 auto 16px;
      }

      .hero-text {
        order: 1;
      }

      .hero-description {
        margin: 0 0 1.8rem;
      }

      .hero-buttons {
        justify-content: flex-start;
      }

      .hero-chips {
        justify-content: flex-start;
      }

      .img-badge {
        display: none;
      }

      .mosaic-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: clamp(150px, 20vw, 195px);
      }

      .mosaic-tile:nth-child(1) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(2) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(3) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(4) {
        grid-column: span 3;
        grid-row: span 2;
      }

      .mosaic-tile:nth-child(5) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(6) {
        grid-column: span 6;
      }

      .mosaic-tile:nth-child(7) {
        grid-column: span 3;
        grid-row: span 2;
      }

      .mosaic-tile:nth-child(8) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(9) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(10) {
        grid-column: span 3;
      }

      .mosaic-tile:nth-child(11) {
        grid-column: span 3;
      }

      .video-grid {
        grid-template-columns: 1fr 1fr;
      }

      .video-card.featured {
        grid-column: 1/-1;
        grid-row: auto;
      }

      .video-card.v2,
      .video-card.v3,
      .video-card.v4,
      .video-card.v5 {
        grid-column: auto;
        grid-row: auto;
      }

      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .contact-wrapper {
        grid-template-columns: 1fr;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
      }

      .brand-info {
        grid-column: 1/-1;
      }

      .nav-links {
        gap: 1rem;
      }

      .nav-links a {
        font-size: .82rem;
      }
    }

    /* =========================================================
       RESPONSIVE: TABLET (769px – 1024px) — social grid 3 cols
    ========================================================= */
    @media (min-width:769px) and (max-width:1024px) {
      .social-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap);
        max-width: 700px;
      }

      .social-card {
        flex: none;
        min-width: 0;
        max-width: none;
      }
    }

    /* =========================================================
       RESPONSIVE: MOBILE (≤ 768px)
    ========================================================= */
    @media (max-width:768px) {
      :root {
        --nav-h: var(--nav-h-mob);
      }

      html {
        scroll-padding-top: var(--nav-h-mob);
      }

      .navbar {
        height: var(--nav-h-mob);
      }

      .nav-links,
      .contact-nav-btn {
        display: none;
      }

      .mobile-menu-btn {
        display: flex;
      }

      /* These three now live in the bottom nav bar — hide them here on
         phones so they aren't shown twice. Search + Wishlist stay. */
      #trackOrderBtn,
      #accountBtn,
      .nav-icons>.icon-btn[onclick="openCart()"] {
        display: none;
      }

      /* Only Search + Wishlist remain — push them flush right (next to
         the hamburger) instead of floating in the middle of the bar.
         (Uses .navbar .nav-icons so it always wins over the later,
         non-media-query ".nav-icons { margin-left:6px }" base rule.) */
      .navbar .nav-icons {
        margin-left: auto !important;
        margin-right: 4px;
      }

      .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
      }

      .brand-name .main {
        font-size: 1rem;
      }

      .brand-name .sub {
        font-size: .55rem;
        letter-spacing: 2px;
      }

      .hero {
        min-height: auto;
        padding: calc(var(--nav-h-mob) + 30px) 16px 50px;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .hero-image-wrap {
        order: 1;
        max-width: 300px;
        margin: 0 auto;
      }

      /* FIX: prevent hero video from being too tall on mobile */
      .hero-main-video {
        max-height: 280px;
      }

      .hero-text {
        order: 2;
        text-align: center;
      }

      .hero-badge {
        font-size: .7rem;
        padding: .36rem 1rem;
        margin-bottom: .85rem;
      }

      .luxury-text {
        font-size: clamp(2rem, 8vw, 2.6rem);
        margin-bottom: .5rem;
      }

      .hero-subtitle {
        font-size: clamp(.95rem, 4vw, 1.15rem);
        margin-bottom: .95rem;
      }

      .hero-description {
        margin: 0 auto 1.6rem;
        font-size: .9rem;
        max-width: 100%;
      }

      .hero-buttons {
        justify-content: center;
        flex-direction: column;
        width: 100%;
        max-width: 340px;
        margin: 0 auto 1.3rem;
      }

      .btn-gold {
        width: 100%;
        justify-content: center;
        padding: .78rem 1.5rem;
        font-size: .9rem;
      }

      .hero-chips {
        justify-content: center;
        gap: 6px;
      }

      .hero-chip {
        font-size: .7rem;
        padding: 4px 11px;
      }

      .img-badge,
      .floating-chip,
      .scroll-indicator {
        display: none !important;
      }

      .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
      }

      .stat-icon {
        font-size: .85rem;
        margin-bottom: .1rem;
      }

      .stat-number {
        font-size: clamp(.8rem, 4.2vw, 1.05rem);
        margin-bottom: .1rem;
      }

      .stat-label {
        font-size: .44rem;
        letter-spacing: .5px;
        line-height: 1.2;
      }

      .section-header {
        margin-bottom: 2rem;
      }

      .section-badge {
        font-size: .65rem;
        padding: .25rem 1rem;
      }

      .section-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
      }

      .section-subtitle {
        font-size: .9rem;
      }

      .mosaic-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: clamp(90px, 20vw, 130px);
        gap: 6px;
      }

      .mosaic-tile:nth-child(1) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(2) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(3) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(4) {
        grid-column: span 2;
        grid-row: span 2;
      }

      .mosaic-tile:nth-child(5) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(6) {
        grid-column: span 4;
      }

      .mosaic-tile:nth-child(7) {
        grid-column: span 2;
        grid-row: span 2;
      }

      .mosaic-tile:nth-child(8) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(9) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(10) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(11) {
        grid-column: span 2;
      }

      .mosaic-cat {
        font-size: .5rem;
        padding: .12rem .5rem;
      }

      .mosaic-title {
        font-size: .75rem;
      }

      .carousel-btn.prev {
        left: -6px;
      }

      .carousel-btn.next {
        right: -6px;
      }

      .product-card {
        flex: 0 0 clamp(160px, 42vw, 200px);
        width: clamp(160px, 42vw, 200px);
      }

      .product-badge {
        font-size: .55rem;
        padding: .18rem .6rem;
      }

      .product-category {
        font-size: .54rem;
        padding: .18rem .65rem;
      }

      .product-name {
        font-size: .85rem;
      }

      .product-description {
        font-size: .64rem;
      }

      .stars {
        font-size: .7rem;
      }

      .buy-online-btn {
        padding: .5rem;
        font-size: .68rem;
      }

      .video-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .video-card.featured,
      .video-card.v2,
      .video-card.v3,
      .video-card.v4,
      .video-card.v5 {
        grid-column: 1;
        grid-row: auto;
      }

      .video-tag {
        font-size: .54rem;
      }

      .video-title {
        font-size: .82rem;
      }

      /* Phone mode: drop the description line under the featured video's
         title ("Explore our full range of premium electronic components —
         Arduino, Raspberry Pi, sensors and more.") — just the title stays. */
      .video-desc {
        display: none;
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .feature-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
      }

      .feature-title {
        font-size: .95rem;
      }

      .feature-desc {
        font-size: .78rem;
      }

      .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .testimonial-text {
        font-size: .82rem;
      }

      .author-avatar {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
      }

      .author-info h4 {
        font-size: .88rem;
      }

      .author-info span {
        font-size: .7rem;
      }

      .social-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 100%;
        padding-bottom: 1rem;
        margin-bottom: 0;
        margin-top: 1rem;
      }

      .social-card {
        flex: none;
        min-width: 0;
        max-width: none;
        padding: 1.3rem 1rem;
      }

      /* 6 cards = 3 rows of 2 on mobile — no special nth-child needed */

      .social-icon-big {
        font-size: 1.8rem;
        margin-bottom: .45rem;
      }

      .social-name {
        font-size: .95rem;
        margin-bottom: .2rem;
      }

      .social-handle {
        font-size: .72rem;
        margin-bottom: .65rem;
      }

      .platform-btn {
        font-size: .66rem;
        padding: .32rem .85rem;
      }

      .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .contact-info {
        padding: 1.4rem;
      }

      .contact-info h3 {
        font-size: 1.2rem;
      }

      .contact-form {
        padding: 1.6rem 1.1rem;
      }

      .contact-form h3 {
        font-size: 1.2rem;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
        padding: .7rem .85rem;
        font-size: .84rem;
      }

      .lightbox-content {
        grid-template-columns: 1fr;
        /* Image gets its own fixed-ish row (bounded by .lightbox-image's
           min/max-height below); the details column gets the rest of the
           space and scrolls — same fix as the desktop rule above. */
        grid-template-rows: auto minmax(0, 1fr);
        height: 92dvh;
      }

      .lightbox-image {
        /* smaller on phones so the details column (with reviews +
           marketplace buttons) has more room and needs less scrolling */
        min-height: 110px;
        max-height: 140px;
      }

      .lightbox-details {
        padding: .9rem 1rem;
        font-size: .85rem;
      }

      .lightbox-details h2 {
        font-size: 1rem;
      }

      .lightbox-details p {
        font-size: .76rem;
      }

      .lightbox-features li {
        font-size: .74rem;
      }

      .lightbox-btn {
        padding: .6rem;
        font-size: .78rem;
      }

      /* RESPONSIVE FIX: hide floating buttons on mobile to avoid overlap */
      .whatsapp-float,
      .back-to-top {
        display: none !important;
      }

      .policy-modal-content {
        padding: 1.3rem;
        max-height: 88dvh;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }

      .brand-info {
        grid-column: 1/-1;
        text-align: center;
        order: 1;
      }

      .footer-logo {
        font-size: 1.1rem;
      }

      .brand-info p {
        font-size: .8rem;
      }

      .footer-social {
        justify-content: center;
        gap: 8px;
      }

      .footer-box:nth-child(2) {
        grid-column: 1;
        order: 2;
      }

      .footer-box:nth-child(3) {
        grid-column: 2;
        order: 3;
      }

      .footer-box h4 {
        font-size: .74rem;
      }

      .footer-links a {
        font-size: .78rem;
      }

      .footer-bottom p {
        font-size: .72rem;
      }
    }

    /* =========================================================
       RESPONSIVE: SMALL MOBILE (≤ 480px)
    ========================================================= */
    @media (max-width:480px) {
      .luxury-text {
        font-size: clamp(1.8rem, 9vw, 2.2rem);
      }

      .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(85px, 22vw, 120px);
        gap: 5px;
      }

      .mosaic-tile:nth-child(1) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(2) {
        grid-column: span 1;
      }

      .mosaic-tile:nth-child(3) {
        grid-column: span 1;
      }

      .mosaic-tile:nth-child(4) {
        grid-column: span 1;
        grid-row: span 1;
      }

      .mosaic-tile:nth-child(5) {
        grid-column: span 1;
        grid-row: span 1;
      }

      .mosaic-tile:nth-child(6) {
        grid-column: span 2;
      }

      .mosaic-tile:nth-child(7) {
        grid-column: span 1;
        grid-row: span 1;
      }

      .mosaic-tile:nth-child(8) {
        grid-column: span 1;
        grid-row: span 1;
      }

      .mosaic-tile:nth-child(9) {
        grid-column: span 1;
      }

      .mosaic-tile:nth-child(10) {
        grid-column: span 1;
      }

      .mosaic-tile:nth-child(11) {
        grid-column: span 2;
      }

      .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .brand-info {
        grid-column: 1/-1;
        text-align: center;
        order: 1;
      }
    }

    /* =========================================================
       TOUCH DEVICES — reduce hover effects
    ========================================================= */
    @media (hover:none) {
      .mosaic-tile:hover {
        transform: none;
        box-shadow: 0 8px 25px rgba(158, 98, 0, .1);
      }

      .product-card:hover {
        transform: none;
      }

      .feature-card:hover {
        transform: none;
      }

      .testimonial-card:hover {
        transform: none;
      }

      .video-card:hover {
        transform: none;
      }

      /* Show overlay on touch devices always */
      .mosaic-tile::after {
        opacity: .5;
      }

      .mosaic-info {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* =========================================================
       SAFE AREA (iPhone notch / home indicator)
    ========================================================= */
    @supports (padding-bottom:env(safe-area-inset-bottom)) {
      .site-footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
      }

      .whatsapp-float {
        bottom: max(22px, env(safe-area-inset-bottom));
      }
    }

    /* =========================================================
   NAV ICONS (cart / wishlist / account)
========================================================= */
    .nav-icons {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: 6px;
    }

    .icon-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 1.05rem;
      color: var(--text);
      transition: var(--transition);
    }

    .icon-btn:hover {
      background: var(--bg-light);
      color: var(--primary-dark);
    }

    .icon-btn .icon-label {
      font-size: .8rem;
      font-weight: 600;
    }

    .icon-btn.logged-in .icon-label {
      color: var(--primary-dark);
    }

    .icon-badge {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 17px;
      height: 17px;
      padding: 0 4px;
      border-radius: 50px;
      background: var(--gold-gradient);
      color: #1a1a1a;
      font-size: .65rem;
      font-weight: 800;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    }

    @media (max-width: 992px) {
      .icon-btn .icon-label {
        display: none;
      }

      .nav-icons {
        gap: 2px;
      }
    }

    /* =========================================================
   MOBILE BOTTOM NAV — phones only (≤768px)
   5 tabs: Home / Your Order / Cart / Buy Again / Login
========================================================= */
    .mobile-bottom-nav {
      display: none;
    }

    @media (max-width: 768px) {
      body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
      }

      .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        background: #fff;
        border-top: 1px solid var(--bg-light);
        box-shadow: 0 -6px 20px rgba(139, 85, 0, .12);
        padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
      }

      .mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--text-light);
        font-size: .62rem;
        font-weight: 600;
        text-align: center;
        padding: 4px 2px;
        cursor: pointer;
        transition: color .18s ease;
      }

      .mbn-item i {
        font-size: 1.15rem;
        line-height: 1;
      }

      .mbn-item.active,
      .mbn-item:hover,
      .mbn-item.logged-in {
        color: var(--primary-dark, #8b6508);
      }

      .mbn-icon-wrap {
        position: relative;
        display: inline-flex;
      }

      .mbn-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 50px;
        background: var(--gold-gradient);
        color: #1a1a1a;
        font-size: .58rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
      }

      /* Lift the floating WhatsApp / back-to-top buttons above the bottom nav */
      .whatsapp-float {
        bottom: calc(70px + env(safe-area-inset-bottom));
      }

      .back-to-top {
        bottom: calc(70px + env(safe-area-inset-bottom));
      }

      /* Cart drawer / checkout modal etc. already use their own fixed
         positioning above this bar (higher z-index), so no change needed. */
    }

    /* =========================================================
   PRODUCT PRICE / WISHLIST BUTTON ON CARD
========================================================= */
    .product-price-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 6px 0 10px;
      flex-wrap: wrap;
    }

    .product-price {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--primary-dark);
    }

    .product-mrp {
      font-size: .85rem;
      color: var(--text-light);
      text-decoration: line-through;
    }

    .product-disc {
      font-size: .72rem;
      font-weight: 700;
      color: #1a7a3c;
      background: rgba(26, 122, 60, .1);
      padding: 2px 7px;
      border-radius: 20px;
    }

    .wishlist-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      color: #b23a3a;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
    }

    .wishlist-btn:hover,
    .wishlist-btn.active {
      background: var(--gold-gradient);
      color: #fff;
      transform: scale(1.08);
    }

    /* =========================================================
   QTY STEPPER
========================================================= */
    .qty-stepper {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--bg-warm);
      border-radius: 50px;
      overflow: hidden;
    }

    .qty-stepper button {
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--primary-dark);
      background: var(--bg-light);
    }

    .qty-stepper button:hover {
      background: var(--accent-pale);
    }

    .qty-stepper input {
      width: 40px;
      text-align: center;
      border: none;
      font-weight: 700;
      font-size: .95rem;
      background: transparent;
    }

    .qty-stepper.small button {
      width: 26px;
      height: 26px;
      font-size: .9rem;
    }

    .qty-stepper.small input {
      width: 30px;
      font-size: .8rem;
    }

    /* =========================================================
   LIGHTBOX EXTRAS
========================================================= */
    .lb-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 4px 0;
      flex-wrap: wrap;
    }

    .lb-price {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--primary-dark);
    }

    .lb-mrp {
      font-size: .85rem;
      color: var(--text-light);
      text-decoration: line-through;
    }

    .lb-disc {
      font-size: .78rem;
      font-weight: 700;
      color: #1a7a3c;
      background: rgba(26, 122, 60, .1);
      padding: 3px 9px;
      border-radius: 20px;
    }

    .lb-qty-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 6px 0;
    }

    .lb-qty-row label {
      font-weight: 600;
      font-size: .8rem;
    }

    .lb-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .lb-action-row .lightbox-btn {
      flex: 1;
      min-width: 150px;
    }

    .lightbox-btn-buynow {
      background: var(--dark);
      color: #fff;
    }

    /* =========================================================
   DRAWER OVERLAY
========================================================= */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 15, 5, .55);
      z-index: 1998;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    .drawer-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* =========================================================
   SIDE DRAWER (Cart / Wishlist)
========================================================= */
    .side-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(420px, 92vw);
      background: var(--white);
      z-index: 1999;
      box-shadow: var(--shadow-lg);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.25, .46, .45, .94);
    }

    .side-drawer.open {
      transform: translateX(0);
    }

    .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 22px;
      border-bottom: 1px solid var(--bg-light);
    }

    .drawer-header h3 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--primary-dark);
      font-size: 1.15rem;
    }

    .drawer-close {
      font-size: 1.6rem;
      color: var(--text-light);
      line-height: 1;
    }

    .drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 22px;
    }

    .drawer-footer {
      padding: 16px 22px;
      border-top: 1px solid var(--bg-light);
      display: none;
    }

    .cart-empty {
      text-align: center;
      padding: 50px 10px;
      color: var(--text-light);
    }

    .cart-empty i {
      font-size: 2.6rem;
      color: var(--accent-pale);
      margin-bottom: 14px;
      display: block;
    }

    .cart-row {
      display: flex;
      gap: 12px;
      padding: 14px 0;
      border-bottom: 1px solid var(--bg-light);
      align-items: flex-start;
    }

    .cart-row img {
      width: 62px;
      height: 62px;
      object-fit: cover;
      border-radius: 10px;
      background: var(--bg-light);
      flex-shrink: 0;
    }

    .cart-row-info {
      flex: 1;
      min-width: 0;
    }

    .cart-row-name {
      font-weight: 600;
      font-size: .92rem;
      margin-bottom: 4px;
    }

    .cart-row-price {
      font-size: .85rem;
      color: var(--primary-dark);
      font-weight: 700;
      margin-bottom: 8px;
    }

    .cart-row-x {
      color: var(--text-light);
      font-weight: 500;
    }

    .cart-row-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }

    .cart-row-total {
      font-weight: 700;
      font-size: .88rem;
    }

    .cart-row-remove {
      color: #b23a3a;
      font-size: .95rem;
    }

    .cart-sum-row {
      display: flex;
      justify-content: space-between;
      font-size: .88rem;
      margin-bottom: 6px;
      color: var(--text-light);
    }

    .cart-sum-total {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
      border-top: 1px dashed var(--bg-warm);
      padding-top: 8px;
      margin-top: 4px;
    }

    .buy-online-btn.small {
      padding: 8px 12px;
    }

    /* =========================================================
   CHECKOUT MODAL
========================================================= */
    .checkout-modal {
      position: fixed;
      inset: 0;
      z-index: 2100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(20, 15, 5, .6);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
      padding: 20px;
    }

    .checkout-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .checkout-modal-content {
      background: var(--white);
      border-radius: var(--radius);
      max-width: 900px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 34px;
      position: relative;
      box-shadow: var(--shadow-lg);
    }

    .checkout-title {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--primary-dark);
      margin-bottom: 20px;
      font-size: 1.5rem;
    }

    /* =========================================================
   LOGIN MODAL — email/password + Google (Supabase Auth)
========================================================= */
    .auth-switch {
      text-align: center;
      font-size: 13px;
      color: var(--text-light, #777);
      margin: 14px 0 0;
    }

    .auth-switch a {
      color: var(--gold, #b8860b);
      font-weight: 600;
      text-decoration: none;
      margin-left: 4px;
    }

    .auth-switch a:hover {
      text-decoration: underline;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0;
      color: #aaa;
      font-size: 12px;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e5e5e5;
    }

    .google-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #fff;
      color: #3c4043;
      border: 1px solid #dadce0;
      padding: 11px 16px;
      border-radius: var(--radius, 8px);
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background .2s ease;
    }

    .google-btn:hover {
      background: #f7f7f7;
    }

    .google-btn:disabled,
    #loginSubmitBtn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .google-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    #loginModal .err {
      color: #b3261e;
      font-size: 13px;
      margin-top: 12px;
      min-height: 18px;
      text-align: center;
    }

    .checkout-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 30px;
    }

    @media (max-width: 768px) {
      .checkout-grid {
        grid-template-columns: 1fr;
      }

      .checkout-modal-content {
        padding: 22px;
      }
    }

    .checkout-form h4 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--text);
      margin: 14px 0 10px;
      font-size: 1.05rem;
    }

    .form-field {
      margin-bottom: 12px;
    }

    .form-field label {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--text-light);
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--primary-light);
      border-radius: 10px;
      font-family: inherit;
      font-size: .92rem;
      background: #fff;
      transition: var(--transition);
    }

    .form-field input:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--primary);
      border-width: 2px;
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(184, 134, 11, .12);
    }

    .ck-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .ck-row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 480px) {

      .ck-row-2,
      .ck-row-3 {
        grid-template-columns: 1fr;
      }
    }

    .ck-pay-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ck-pay-option {
      display: flex;
      flex-direction: column;
      gap: 2px;
      border: 1.5px solid var(--bg-warm);
      border-radius: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: var(--transition);
      position: relative;
    }

    .ck-pay-option input {
      position: absolute;
      top: 14px;
      right: 14px;
    }

    .ck-pay-option div {
      font-weight: 700;
      font-size: .92rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ck-pay-option span {
      font-size: .78rem;
      color: var(--text-light);
      padding-left: 24px;
    }

    .ck-pay-option.selected {
      border-color: var(--primary);
      background: var(--bg-light);
    }

    .checkout-summary {
      background: var(--bg-cream);
      border-radius: 14px;
      padding: 20px;
      align-self: start;
    }

    .checkout-summary h4 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      margin-bottom: 12px;
      color: var(--primary-dark);
    }

    .ck-line {
      display: flex;
      justify-content: space-between;
      font-size: .86rem;
      margin-bottom: 8px;
      color: var(--text-light);
    }

    .ck-total {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text);
      border-top: 1px dashed var(--bg-warm);
      padding-top: 10px;
      margin-top: 6px;
    }

    /* =========================================================
   ORDER SUCCESS
========================================================= */
    .order-success-content {
      text-align: center;
      max-width: 460px;
    }

    .order-success-icon {
      font-size: 3.5rem;
      color: #1a7a3c;
      margin-bottom: 14px;
    }

    .order-success-content h2 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      color: var(--primary-dark);
      margin-bottom: 10px;
    }

    .order-success-id {
      font-weight: 700;
      margin: 10px 0;
    }

    .order-success-note {
      font-size: .85rem;
      color: var(--text-light);
      margin-bottom: 18px;
    }

    /* =========================================================
   MY ORDERS
========================================================= */
    .no-orders {
      color: var(--text-light);
      text-align: center;
      padding: 30px 0;
    }

    .order-card {
      border: 1px solid var(--bg-light);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 12px;
    }

    .order-card-head {
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .order-status {
      font-size: .72rem;
      background: var(--bg-light);
      color: var(--primary-dark);
      padding: 2px 10px;
      border-radius: 20px;
    }

    .order-card-date {
      font-size: .78rem;
      color: var(--text-light);
      margin-bottom: 6px;
    }

    .order-card-items {
      font-size: .86rem;
      margin-bottom: 6px;
    }

    .order-card-total {
      font-weight: 700;
      font-size: .9rem;
      color: var(--primary-dark);
    }

    /* =========================================================
   ORDER PROGRESS TRACKER (My Orders + Track Order)
========================================================= */
    .order-card-progress {
      margin: 12px 0 10px;
    }

    .order-progress {
      width: 100%;
    }

    .order-progress .op-track {
      display: flex;
      align-items: flex-start;
      width: 100%;
    }

    .order-progress .op-step {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-width: 0;
    }

    .order-progress .op-line {
      position: absolute;
      top: 14px;
      left: -50%;
      width: 100%;
      height: 3px;
      background: var(--bg-light);
      z-index: 0;
    }

    .order-progress .op-step:first-child .op-line {
      display: none;
    }

    .order-progress .op-step.done .op-line,
    .order-progress .op-step.current .op-line {
      background: var(--gold-gradient);
    }

    .order-progress .op-dot {
      position: relative;
      z-index: 1;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--bg-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .68rem;
      color: var(--text-light);
      flex-shrink: 0;
    }

    .order-progress .op-step.done .op-dot {
      background: var(--gold-gradient);
      border-color: transparent;
      color: #fff;
    }

    .order-progress .op-step.current .op-dot {
      border-color: var(--primary-dark, #8b6508);
      color: var(--primary-dark, #8b6508);
      box-shadow: 0 0 0 4px rgba(201, 169, 96, .22);
    }

    .order-progress .op-label {
      margin-top: 6px;
      font-size: .66rem;
      line-height: 1.2;
      color: var(--text-light);
      max-width: 70px;
    }

    .order-progress .op-step.done .op-label,
    .order-progress .op-step.current .op-label {
      color: var(--primary-dark, #8b6508);
      font-weight: 600;
    }

    .order-progress.cancelled {
      display: flex;
      justify-content: center;
    }

    .op-cancelled-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #fde0de;
      color: #b3261e;
      font-size: .78rem;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
    }

    @media (max-width: 480px) {
      .order-progress .op-label {
        font-size: .58rem;
        max-width: 54px;
      }

      .order-progress .op-dot {
        width: 24px;
        height: 24px;
        font-size: .6rem;
      }
    }

    /* Track Order guest result card — same visual language as .order-card */
    .track-result-card {
      border: 1px solid var(--bg-light);
      border-radius: 12px;
      padding: 14px 16px;
      margin-top: 14px;
    }

    .track-result-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      margin-bottom: 10px;
    }

    /* =========================================================
   CANCEL ORDER — button + confirmation modal
========================================================= */
    .btn-cancel-order {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      background: #fff;
      color: #b3261e;
      border: 1px solid #f0b8b4;
      cursor: pointer;
      transition: background .18s ease, color .18s ease;
    }

    .btn-cancel-order:hover {
      background: #b3261e;
      color: #fff;
      border-color: #b3261e;
    }

    .order-cancel-reason {
      margin-top: 6px;
      font-size: 12px;
    }

    .btn-danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #b3261e;
      color: #fff;
      border: none;
      padding: 11px 18px;
      border-radius: 10px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .18s ease, transform .12s ease;
    }

    .btn-danger:hover {
      opacity: .9;
    }

    .btn-danger:active {
      transform: scale(.98);
    }

    .btn-danger:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .cancel-order-content {
      text-align: center;
    }

    .cancel-order-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: #fde0de;
      color: #b3261e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
    }

    .cancel-order-id {
      font-weight: 700;
      color: var(--primary-dark);
      margin: 0 0 6px;
    }

    .cancel-order-actions {
      display: flex;
      gap: 10px;
      margin-top: 6px;
    }

    .cancel-order-actions .btn-gold,
    .cancel-order-actions .btn-danger {
      flex: 1;
      justify-content: center;
    }

    @media (max-width: 480px) {
      .cancel-order-actions {
        flex-direction: column;
      }
    }

    /* =============================================================
   SMART SEARCH (added — pro-level upgrade)
============================================================= */
    .search-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 15, 5, .55);
      backdrop-filter: blur(3px);
      z-index: 9999;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 90px 16px 16px;
    }

    .search-overlay.open {
      display: flex;
    }

    .search-box {
      width: 100%;
      max-width: 620px;
      background: #fff;
      border-radius: var(--radius, 16px);
      box-shadow: var(--shadow-lg, 0 25px 60px rgba(0, 0, 0, .3));
      display: flex;
      align-items: center;
      padding: 14px 16px;
      gap: 10px;
    }

    .search-box-icon {
      color: var(--text-light, #6b6b6b);
    }

    .search-box input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 1rem;
      font-family: inherit;
      color: var(--text, #222);
      background: transparent;
    }

    .search-close {
      border: none;
      background: var(--bg-light, #F7F2E4);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      color: var(--text, #222);
      flex-shrink: 0;
    }

    .search-results {
      width: 100%;
      max-width: 620px;
      background: #fff;
      border-radius: var(--radius, 16px);
      margin-top: 8px;
      box-shadow: var(--shadow-md, 0 15px 40px rgba(0, 0, 0, .2));
      max-height: 60vh;
      overflow-y: auto;
      display: none;
    }

    .search-results.open {
      display: block;
    }

    .search-count {
      padding: 10px 16px;
      font-size: .78rem;
      color: var(--text-light, #6b6b6b);
      border-bottom: 1px solid #eee;
    }

    .search-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background .15s;
    }

    .search-row:hover,
    .search-row:focus {
      background: var(--bg-light, #F7F2E4);
    }

    .search-row img {
      width: 44px;
      height: 44px;
      object-fit: cover;
      border-radius: 8px;
      background: #f0f0f0;
      flex-shrink: 0;
    }

    .search-row-name {
      font-weight: 600;
      font-size: .92rem;
      color: var(--text, #222);
    }

    .search-row-meta {
      font-size: .78rem;
      color: var(--text-light, #6b6b6b);
    }

    .search-more {
      text-align: center;
      padding: 10px;
      font-size: .8rem;
      color: var(--text-light, #6b6b6b);
    }

    .search-empty {
      text-align: center;
      padding: 30px 16px;
      color: var(--text-light, #6b6b6b);
    }

    .search-empty i {
      font-size: 1.6rem;
      margin-bottom: 8px;
      display: block;
    }

    .search-empty p {
      font-weight: 600;
      color: var(--text, #222);
      margin-bottom: 2px;
    }

    .search-empty span {
      font-size: .82rem;
    }

    .search-recent-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--text-light, #6b6b6b);
      border-bottom: 1px solid #eee;
    }

    .search-recent-clear {
      background: none;
      border: none;
      color: var(--gold, #C9A227);
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
    }

    .search-recent-clear:hover {
      text-decoration: underline;
    }

    .search-recent-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 16px 16px;
    }

    .search-recent-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--bg-light, #F7F2E4);
      border: 1px solid #eee;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: .82rem;
      color: var(--text, #222);
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }

    .search-recent-chip:hover,
    .search-recent-chip:focus {
      background: #fff;
      border-color: var(--gold, #C9A227);
    }

    .search-recent-chip i {
      font-size: .75rem;
      color: var(--text-light, #6b6b6b);
    }

    /* =============================================================
   CATEGORY FILTER CHIPS (added — pro-level upgrade)
============================================================= */
    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin: 0 0 28px;
    }

    .filter-chip {
      border: 1.5px solid #E4D4B0;
      background: #fff;
      color: var(--text, #222);
      padding: 8px 18px;
      border-radius: 30px;
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }

    .filter-chip:hover {
      border-color: #C9A960;
    }

    .filter-chip.active {
      background: var(--gold-gradient);
      border-color: transparent;
      color: #fff;
    }

    /* =============================================================
   CATEGORY STRIP — icon shortcuts row directly under the navbar
   (matches the reference screenshot's category rail)
============================================================= */
    .cat-strip {
      position: sticky;
      top: var(--nav-h);
      margin-top: var(--nav-h);
      z-index: 900;
      background: #fff;
      border-bottom: 1px solid rgba(191, 147, 42, .15);
      box-shadow: 0 4px 14px rgba(158, 98, 0, .06);
    }

    .cat-strip-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding: 10px clamp(6px, 2vw, 20px);
      gap: 6px;
    }

    .cat-strip-track {
      display: flex;
      gap: clamp(14px, 2vw, 28px);
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      flex: 1;
      padding: 2px 4px;
    }

    .cat-strip-track::-webkit-scrollbar {
      display: none;
    }

    .cat-chip {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      min-width: max-content;
      font-size: .78rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      opacity: .85;
      transition: var(--transition);
      background: none;
      border: none;
      padding: 4px 2px;
      cursor: pointer;
    }

    .cat-chip-icon {
      width: 44px;
      height: 44px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #efdcae;
      border: 1.5px solid var(--primary-light);
      transition: var(--transition);
      flex-shrink: 0;
    }

    .cat-chip-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .cat-chip-label {
      line-height: 1.2;
    }

    .cat-chip:hover,
    .cat-chip.active {
      opacity: 1;
      color: var(--primary);
    }

    .cat-chip:hover .cat-chip-icon,
    .cat-chip.active .cat-chip-icon {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(158, 98, 0, .3);
    }

    .cat-arrow {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--bg-light);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: .64rem;
      transition: var(--transition);
    }

    .cat-arrow:hover {
      background: var(--gold-gradient);
      color: #fff;
    }

    @media (max-width: 768px) {
      .cat-chip-icon {
        width: 36px;
        height: 36px;
      }

      .cat-chip {
        font-size: .68rem;
        gap: 6px;
      }
    }

    @media (max-width: 480px) {
      .cat-arrow {
        display: none;
      }

      .cat-strip-inner {
        padding: 8px 4px;
      }
    }

    /* =============================================================
   HOME HERO BANNER SLIDER (redesigned promo banner, matches
   the reference screenshot's dark navy comparison banner)
============================================================= */
    .rd-hero {
      padding: 18px clamp(10px, 3vw, 24px) 8px;
      background: var(--bg-cream);
    }

    .rd-banner-slider {
      position: relative;
      max-width: 1400px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      min-height: clamp(240px, 30vw, 320px);
      box-shadow: var(--shadow-md);
    }

    .rd-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .6s ease;
      background: linear-gradient(120deg, #0b1739 0%, #142a5c 55%, #1c3a7a 100%);
      display: flex;
      align-items: center;
    }

    .rd-slide.active {
      opacity: 1;
      visibility: visible;
      z-index: 1;
    }

    .rd-slide-media-full {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Lets each slide use a DIFFERENT image file on phone / tablet /
       desktop (see the <picture> markup in index.html) — the <picture>
       wrapper itself just needs to fill the same box the old lone <img>
       used to fill. */
    .rd-slide-media-full picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .rd-slide-media-full video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* FIX: banner/photo slides (unlike the video slide) have logo text and
       important content baked right up to the edges. object-fit:cover was
       center-cropping them to fill the box — on phones/tablets the box's
       aspect ratio is much narrower than the wide banner image, so ~60-70%
       of the image's width got sliced off, cutting the logo and
       "bdndelectron.com" text on the left. Combined with the <picture>
       per-device images above (each already cropped/composed to look
       right at that size), cover here now just neatly fills the box using
       whichever image was actually chosen for that screen — nothing
       important should end up outside the frame. If you ever go back to
       using a single image for all devices instead, switch this to
       object-fit: contain so nothing gets cropped instead. */
    .rd-slide-media-full picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .rd-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .92);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      font-size: .82rem;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
      transition: var(--transition);
    }

    .rd-arrow:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.08);
    }

    .rd-arrow-left {
      left: 16px;
    }

    .rd-arrow-right {
      right: 16px;
    }

    .rd-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
    }

    .rd-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(158, 98, 0, .25);
      cursor: pointer;
      transition: var(--transition);
      border: none;
    }

    .rd-dot.active {
      background: var(--gold-gradient);
      width: 22px;
      border-radius: 5px;
    }

    @media (max-width: 480px) {
      .rd-hero {
        padding-left: 0;
        padding-right: 0;
      }

      .rd-banner-slider {
        max-width: 100%;
        border-radius: 0;
        min-height: 200px;
      }

      /* Phone mode: drop the round nav arrows, edge-to-edge banner
         relies on swipe + the dots below instead */
      .rd-arrow {
        display: none;
      }

      /* Pre-contact promo slide (below "Buy on Your Favourite
         Platform") — square off the corners so it's flush edge-to-edge */
      .pc-slide-wrap {
        border-radius: 0;
      }
    }

    /* Post-hero "Customer Favourites" slider — same background as hero,
   and trimmed top/bottom spacing (it was inheriting spacing meant for
   sitting *inside* the Products section, causing oversized height here) */
    #hero-slide {
      background: var(--bg-cream);
      padding: clamp(20px, 3vw, 28px) clamp(14px, 4vw, 20px) clamp(36px, 6vw, 56px);
    }

    #hero-slide .trending-header {
      margin-top: 0;
    }

    #hero-slide .trending-wrapper {
      margin-top: 1rem;
    }

    /* Post-testimonials "Customer Favourites" slider (below "What Our
   Clients Say") — same fix: it's the only element in its section, so
   the margin-top meant for the Products page context made it too tall */
    #testimonials-slide {
      padding: clamp(20px, 3vw, 28px) clamp(14px, 4vw, 20px) clamp(36px, 6vw, 56px);
    }

    #testimonials-slide .trending-header {
      margin-top: 0;
    }

    #testimonials-slide .trending-wrapper {
      margin-top: 1rem;
    }

    /* =============================================================
   IMAGE SLIDER GRID (horizontal gallery carousel below Showcase)
============================================================= */
    .gslider-section {
      padding: 34px 0;
    }

    .gslider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
      z-index: 5;
    }

    .gslider-arrow:hover {
      background: var(--gold-gradient);
      color: #fff;
      transform: translateY(-50%) scale(1.08);
    }

    .gslider-arrow:disabled {
      opacity: .35;
      cursor: default;
    }

    .gslider-arrow-left {
      left: -6px;
    }

    .gslider-arrow-right {
      right: -6px;
    }

    .gslider-wrap {
      position: relative;
    }

    @media (max-width: 600px) {
      .gslider-arrow-left {
        left: 2px;
      }

      .gslider-arrow-right {
        right: 2px;
      }
    }

    .gslider-track {
      display: flex;
      flex-wrap: nowrap;
      gap: 16px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      padding: 6px 4px 16px;
      scrollbar-width: thin;
      scrollbar-color: #fff transparent;
    }

    .gslider-track::-webkit-scrollbar {
      height: 6px;
    }

    .gslider-track::-webkit-scrollbar-thumb {
      background: #fff;
      border-radius: 10px;
    }

    .gslide-card {
      flex: 0 0 clamp(140px, 21vw, 220px);
      width: clamp(140px, 21vw, 220px);
      scroll-snap-align: start;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      aspect-ratio: 1/1;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
    }

    .gslide-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s;
    }

    .gslide-card:hover img {
      transform: scale(1.08);
    }

    .gslide-cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
      color: #fff;
      padding: 10px 12px 8px;
      font-size: .76rem;
      font-weight: 600;
    }

    /* =============================================================
   8-IMAGE GRID (static snapshot gallery)
============================================================= */
    .grid8-section {
      padding: 14px 0 34px;
    }

    .grid8-wrap {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .grid8-tile {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 1/1;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
    }

    .grid8-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s;
    }

    .grid8-tile:hover img {
      transform: scale(1.1);
    }

    .grid8-tile .g8-cap {
      position: absolute;
      inset: auto 0 0 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
      color: #fff;
      padding: 8px 10px 6px;
      font-size: .7rem;
      font-weight: 600;
    }

    @media (max-width: 860px) {
      .grid8-wrap {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 560px) {
      .grid8-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }

    /* =============================================================
   PRE-CONTACT IMAGE SLIDE (promo banner right before Contact Us)
============================================================= */
    .pc-slide-section {
      padding: 14px 0 26px;
    }

    .pc-slide-wrap {
      position: relative;
      max-width: 1400px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      aspect-ratio: 18 / 4;
      box-shadow: var(--shadow-md);
    }

    .pc-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .8s ease;
    }

    .pc-slide.active {
      opacity: 1;
      visibility: visible;
      position: relative;
    }

    .pc-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pc-slide-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(11, 23, 57, .85) 0%, rgba(11, 23, 57, .4) 55%, transparent 100%);
      display: flex;
      align-items: center;
      padding: clamp(20px, 4vw, 50px);
      /* Hidden by default — only the image shows until the visitor clicks/taps it */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .3s ease, visibility .3s ease;
    }

    .pc-slide {
      cursor: pointer;
    }

    .pc-slide.show-text .pc-slide-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .pc-slide-content {
      color: #fff;
      max-width: 480px;
    }

    .pc-slide-content .pc-eyebrow {
      color: #dfc57b;
      font-weight: 600;
      letter-spacing: 2px;
      font-size: .68rem;
      text-transform: uppercase;
      margin-bottom: .6rem;
    }

    .pc-slide-content h3 {
      font-family: 'Poppins', 'Segoe UI', sans-serif;
      font-size: clamp(1.2rem, 2.6vw, 1.9rem);
      margin-bottom: .6rem;
      line-height: 1.25;
    }

    .pc-slide-content p {
      font-size: .84rem;
      color: rgba(255, 255, 255, .85);
      margin-bottom: 1.1rem;
      line-height: 1.6;
    }

    .pc-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
    }

    .pc-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(158, 98, 0, .25);
      cursor: pointer;
      transition: var(--transition);
      border: none;
    }

    .pc-dot.active {
      background: var(--gold-gradient);
      width: 20px;
      border-radius: 5px;
    }

    @media (max-width: 600px) {
      .pc-slide-overlay {
        background: linear-gradient(0deg, rgba(11, 23, 57, .9) 35%, rgba(11, 23, 57, .2) 100%);
        align-items: flex-end;
      }

      .pc-slide-content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
      }
    }

    /* =============================================================
   PRODUCTS-IN-ACTION IMAGE SLIDE (full-bleed 18:2 / 9:1 banner,
   right above "See Our Products in Action" — same on phone & laptop)
============================================================= */
    .poa-slide-section {
      padding: 0 0 clamp(24px, 4vw, 36px);
    }

    .poa-slide-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 18 / 2;
      overflow: hidden;
    }

    .poa-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .8s ease;
    }

    .poa-slide.active {
      opacity: 1;
      visibility: visible;
      position: relative;
    }

    .poa-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .poa-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
    }

    .poa-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(158, 98, 0, .25);
      cursor: pointer;
      transition: var(--transition);
      border: none;
    }

    .poa-dot.active {
      background: var(--gold-gradient);
      width: 20px;
      border-radius: 5px;
    }
/* ============================================================
   SITE-WIDE SCROLL ANIMATION SYSTEM (added)
   Poori website ke sections/cards ko scroll par animate karta hai.
   Navbar isme shamil nahi hai (fixed hai, hamesha visible rehta hai).
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(.98);
  transition: opacity .8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-left.in-view {
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-right.in-view {
  transform: translateX(0);
}

.reveal-zoom {
  transform: scale(.85);
}

.reveal-zoom.in-view {
  transform: scale(1);
}

/* Subtle continuous life on interactive surfaces site-wide */
.btn-gold,
button,
a.lb-platform-btn,
.icon-btn {
  transition: var(--transition), transform .25s ease;
}

.btn-gold:hover,
.icon-btn:hover {
  transform: translateY(-3px);
}

/* Page-load entrance for hero */
.rd-hero {
  animation: heroFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom,
  .rd-hero {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   TEAM STRIP — footer ke upar, 18:3 wide banner (3 photo+detail)
============================================================ */
.team-strip {
  background: var(--bg-cream);
  padding: clamp(24px, 4vw, 46px) clamp(14px, 4vw, 20px);
}

.team-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 18 / 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
}

.team-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 0 clamp(6px, 1.5vw, 18px);
  border-right: 1px solid rgba(191, 147, 42, .2);
}

.team-card:last-child {
  border-right: none;
}

.team-photo {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gold-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: var(--shadow-sm);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-detail {
  min-width: 0;
}

.team-role {
  font-size: .66rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}

.team-name {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  margin: .18rem 0;
  color: var(--text);
  line-height: 1.2;
}

.team-bio {
  font-size: .78rem;
  color: var(--text-light);
  line-height: 1.4;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 800px) {
  .team-strip-inner {
    aspect-ratio: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .team-card {
    border-right: none;
    border-bottom: 1px solid rgba(191, 147, 42, .2);
    padding: 0 0 16px;
  }

  .team-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ============================================================
   DARK SECTION VARIANT — "A Closer Look", "Swipe Through Our
   Range", "What Our Clients Say" par apply kiya, taaki ye 3
   sections baaki cream site se alag/darker dikhein.
============================================================ */
.section-dark {
  background: linear-gradient(135deg, #7a4a00, var(--primary)) !important;
  color: #fff;
}

.section-dark .section-title {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #fff;
  background-clip: initial;
  color: #fff;
}

.section-dark .section-subtitle {
  color: rgba(255, 255, 255, .82);
}

.section-dark .divider-line {
  background: linear-gradient(90deg, transparent, #fff);
}

.section-dark .divider-line.right {
  background: linear-gradient(90deg, #fff, transparent);
}

.section-dark .divider i {
  color: #fff;
}

.section-dark .section-badge {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
}

.section-dark .grid7-tile,
.section-dark .mosaic-tile {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

/* ---- 9. Image Showcase — the static "Premium Components, Modern
   Innovation" text card (with its own cream background box) sits
   permanently on top of an image; hide it in phone mode and just
   show the plain image underneath ---- */
@media (max-width: 600px) {
  .mosaic-text-overlay {
    display: none;
  }
}

/* ---- 10. Promo banner right above Contact Us ("Start Shopping" slide) —
   remove the text/eyebrow/heading/button box that sits on top of the
   image in phone mode; keep just the plain image + arrows + dots ---- */
/* (Updated Oct 2026: the promo text is now hidden by default on ALL screens and
   appears when the image is tapped/clicked, so the old phone-only display:none
   rule was removed.) */

/* ============================================================
   PHONE MODE FIXES (requested tweaks — Sept 2026)
   1. Smaller search bar so search input + close button both fit cleanly
   2. Smaller images in "A Closer Look" (Quick Gallery)
   3. Remove "Swipe Through Our Range" circle arrows on mobile
   4. Smaller images in "A Quick Look at BDND" (Snapshot Gallery)
   5-6. Stop the name/text/dark-background overlay from covering the
        "Image Showcase" photos the moment the page opens on phones
   7. Shrink the remaining image-slider circle arrows (promo banner)
============================================================ */

/* ---- 1. Search bar smaller on mobile ---- */
@media (max-width: 600px) {
  .search-overlay {
    padding: 64px 10px 10px;
  }

  .search-box {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 12px;
  }

  .search-box-icon {
    font-size: .8rem;
  }

  .search-box input {
    font-size: .82rem;
  }

  .search-close {
    width: 26px;
    height: 26px;
    font-size: .75rem;
  }

  .search-results {
    padding: 0 2px;
  }
}

/* ---- 2. "A Closer Look" (Quick Gallery) images smaller ---- */
@media (max-width: 600px) {
  .grid7-wrap {
    padding: 0 10px;
    gap: 10px;
  }

  .grid7-hero {
    height: 150px;
    border-radius: 12px;
  }

  .grid7-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .grid7-tile {
    border-radius: 10px;
  }
}

/* ---- 3. Remove "Swipe Through Our Range" circle arrows on mobile ---- */
@media (max-width: 600px) {
  .gslider-arrow {
    display: none;
  }
}

/* ---- 4. "A Quick Look at BDND" (Snapshot Gallery) images smaller ---- */
@media (max-width: 600px) {
  .grid8-wrap {
    padding: 0 10px;
    gap: 8px;
  }

  .grid8-tile {
    border-radius: 10px;
  }
}

/* ---- 5 & 6. Stop the Image Showcase name/text/background overlay from
   covering photos as soon as the page opens on phones. Same specificity
   as the ".mosaic-tile::after" / ".mosaic-info" rules inside
   "@media (hover:none)" above, and declared later, so it wins on touch
   screens narrower than 600px. Tapping a tile still opens the lightbox
   (which shows the full name/category), so nothing is lost. ---- */
@media (max-width: 600px) {

  .mosaic-tile::after {
    opacity: 0;
  }

  .mosaic-info {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ---- 7. Shrink the remaining image-slider circle arrows (promo banner
   right before Contact Us / "recently viewed" banner) further on phones ---- */
@media (max-width: 600px) {
  .rd-arrow {
    width: 22px;
    height: 22px;
    font-size: .58rem;
  }

  .rd-arrow-left {
    left: 4px;
  }

  .rd-arrow-right {
    right: 4px;
  }
}

/* ---- 8. "Customer Favourites" (all 3 copies) + "Our Collection" —
   the products/trending carousel circle arrows (.carousel-btn) load in
   quite large on phones; shrink them right away on page open ---- */
@media (max-width: 600px) {
  .carousel-btn {
    width: 26px;
    height: 26px;
    font-size: .68rem;
    box-shadow: 0 3px 10px rgba(158, 98, 0, .3);
  }

  .carousel-btn.prev {
    left: 2px;
  }

  .carousel-btn.next {
    right: 2px;
  }
}
/* =========================================================
   PHONE MODE — shrink every horizontal-scroll card row so
   3 cards sit on screen at once (with a peek of the 4th),
   and give the plain gallery slider a premium "boxed" frame.
   (Kept at the very end of the file so it overrides the
   earlier 768px tablet rules on phone-width screens.)
========================================================= */
@media (max-width: 480px) {
  .products-grid,
  .trending-grid {
    gap: 8px;
  }

  .product-card,
  .trend-card {
    flex: 0 0 clamp(100px, 29vw, 128px);
    width: clamp(100px, 29vw, 128px);
    border-radius: 12px;
  }

  .product-image-wrap,
  .trend-image-wrap {
    margin-top: 20px;
  }

  .product-badge {
    top: 5px;
    left: 6px;
    padding: .18rem .5rem;
    font-size: .46rem;
  }

  .product-body,
  .trend-body {
    padding: .5rem .4rem .55rem;
  }

  .product-name,
  .trend-name {
    font-size: .68rem;
    margin-bottom: .2rem;
  }

  .product-category {
    font-size: .48rem;
    padding: .14rem .5rem;
  }

  .product-description {
    font-size: .56rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .stars {
    font-size: .6rem;
    margin-bottom: .35rem;
  }

  .buy-online-btn,
  .trend-cart-btn,
  .trend-buy-btn {
    font-size: .54rem;
    padding: .4rem .25rem;
    min-height: 30px;
  }

  .trend-btn-row {
    gap: 5px;
  }

  .gslider-track {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .gslide-card {
    flex: 0 0 clamp(100px, 29vw, 128px);
    width: clamp(100px, 29vw, 128px);
    /* No white mat/border box on phones anymore — just a plain rounded
       photo tile, same edge-to-edge look as desktop. */
    border-radius: 12px;
  }

  .gslide-card img {
    border-radius: 12px;
  }

  .gslide-cap {
    /* Flush to the card edges again now that the white mat is gone —
       the 6px inset used to sit inside that mat; left on its own it
       floated the caption as a separate box with its own shadow/edge
       showing behind the text. */
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 12px 12px;
    font-size: .56rem;
    padding: 5px 7px 4px;
  }

  .carousel-btn.prev {
    left: -4px;
  }

  .carousel-btn.next {
    right: -4px;
  }
}

/* =========================================================
   REMOVE THE VISIBLE VERTICAL SCROLLBAR — everywhere on the site,
   on EVERY scrollable element (page, cards, modals, drawers, etc),
   in display/desktop mode AND phone mode. Scrolling itself still
   works fine with mouse wheel, trackpad, keyboard or touch — only
   the visible vertical track/thumb/arrow-button bar is hidden.
   Universal (not just html/body) so it also covers any inner
   container that scrolls, not only the page itself.
   NOTE: only "width" is zeroed (that's what controls a vertical
   scrollbar's visible thickness) — "height" is left alone on
   purpose, so the intentional horizontal scroll-progress bars
   under the product/trending rows (.products-grid etc., which
   set their own ::-webkit-scrollbar height) keep working.
========================================================= */
* {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}

*::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* Belt-and-braces: force it on the page scrollbar itself no matter what,
   since this is the one people actually see (the window/page bar), and
   it must always win over any other rule anywhere in the file. */
html,
body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* =========================================================
   PRO-LEVEL MOTION SYSTEM — site-wide
   Consistent, refined easing everywhere (matches --transition),
   smooth scroll, tasteful hover states, and a staggered
   fade-up entrance for every card grid on the site. Nothing
   here blocks interaction — it only adds polish.
========================================================= */
html {
  scroll-behavior: smooth;
}

/* ---- Refined hover lift for every card type site-wide ---- */
.product-card,
.trend-card,
.feature-card,
.testimonial-card,
.video-card,
.mosaic-tile {
  transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover,
.trend-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.product-card:hover .product-image,
.trend-card:hover .trend-image {
  transform: scale(1.05);
}

.product-image,
.trend-image {
  transition: transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover:none) {
  .product-card:hover,
  .trend-card:hover {
    transform: none;
  }
}

/* ---- Buttons & icons: soft lift + glow on hover ---- */
.btn-gold,
button,
a.lb-platform-btn,
.icon-btn,
.buy-online-btn,
.filter-chip {
  transition: var(--transition), transform .25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .25s ease;
}

.btn-gold:hover,
.icon-btn:hover,
.buy-online-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(158, 98, 0, .28);
}

.filter-chip:hover {
  transform: translateY(-2px);
}

/* ---- Nav links: smooth underline sweep ---- */
.nav-links a,
.mobile-nav a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: width .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ---- Scroll-reveal (fade + rise into view) ---- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.reveal-left {
  transform: translateX(-36px);
}

.reveal-right {
  transform: translateX(36px);
}

.reveal-zoom {
  transform: scale(.92);
}

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-zoom.in-view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.rd-hero {
  animation: heroFadeIn .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ---- Staggered fade-up entrance for card grids ---- */
@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card,
.trend-card {
  animation: cardFadeUp .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.product-card:nth-child(1), .trend-card:nth-child(1) { animation-delay: .03s; }
.product-card:nth-child(2), .trend-card:nth-child(2) { animation-delay: .08s; }
.product-card:nth-child(3), .trend-card:nth-child(3) { animation-delay: .13s; }
.product-card:nth-child(4), .trend-card:nth-child(4) { animation-delay: .18s; }
.product-card:nth-child(5), .trend-card:nth-child(5) { animation-delay: .23s; }
.product-card:nth-child(6), .trend-card:nth-child(6) { animation-delay: .28s; }
.product-card:nth-child(n+7), .trend-card:nth-child(n+7) { animation-delay: .32s; }

/* ---- Click/tap zoom pulse — plays briefly whenever a product
   or gallery image is clicked/tapped, on top of any hover zoom ---- */
@keyframes clickZoomPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.click-zoom {
  animation: clickZoomPulse .45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom, .rd-hero {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   DESKTOP-ONLY: show the page's vertical scrollbar again.
   Hidden everywhere by default (see the scrollbar-hide rules
   above); this re-enables it just for larger screens so
   desktop users get a visible right-side scroll bar, while
   phones/tablets stay scrollbar-free.
========================================================= */
@media (min-width: 1025px) {
  html,
  body {
    scrollbar-width: thin !important;
    scrollbar-color: var(--accent) var(--bg-light) !important;
    -ms-overflow-style: auto !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: var(--bg-light);
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--accent), var(--primary));
    border-radius: 8px;
  }
}
/* =============================================================
   ADMIN CONSOLE — login modal, dashboard modal, product form modal.
   IMPORTANT: these were previously rendered with NO CSS at all
   (the .admin-modal-wrap class didn't exist anywhere in this file),
   so they showed up as plain unstyled blocks stacked below the
   footer instead of being hidden overlays. This block fixes that.
============================================================= */
.admin-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 6, .65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
  padding: 20px;
}

.admin-modal-wrap.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Orders tab — shipping address column + the "View full details" modal
   (customer name/phone/email/address/city/state/pincode + items), so an
   admin can see everything a customer entered at checkout without leaving
   the dashboard. */
.admin-td-address {
  max-width: 220px;
  font-size: 12.5px;
  line-height: 1.4;
}
.admin-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-detail-table td {
  padding: 5px 8px 5px 0;
  vertical-align: top;
  border-bottom: 1px solid #f1e9d5;
}
.admin-detail-label {
  color: #8b5500;
  font-weight: 600;
  white-space: nowrap;
  width: 110px;
}
.admin-detail-value {
  word-break: break-word;
}

.admin-login-box {
  background: var(--white, #fff);
  border-radius: var(--radius, 12px);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 28px;
  position: relative;
  text-align: center;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.35));
}

.admin-login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3e3b8, #e8cf8f);
  color: #8b5500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 14px;
}

.admin-login-title {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--primary-dark, #1a1a1a);
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.admin-login-sub {
  font-size: 13px;
  color: #777;
  margin-bottom: 20px;
}

.admin-form-group {
  text-align: left;
  margin-bottom: 12px;
}

.admin-form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

/* Two-up field rows in the product form (price/mrp, category/sub, stock/badge).
   Used to be hardcoded as an inline style, which meant it never adapted to
   narrow phones — two number/select fields squeezed side by side. Now a real
   class so the phone/tablet media queries below can stack it to one column. */
.admin-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Password show/hide eye icon — wraps a password <input> so the toggle
   button can sit inside it, right-aligned. Works for both the admin login
   password field and the storefront login password field. */
.pw-field {
  position: relative;
}

.pw-field input {
  width: 100%;
  padding-right: 42px !important;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 6px 8px;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pw-toggle:hover {
  color: var(--primary, #9E6200);
}

/* FIX: some browsers (Edge/IE) draw their own built-in "reveal password"
   eye icon inside password fields automatically — that was showing up
   right next to our own custom eye button above, making the field look
   like it had two eye icons. This hides the browser's built-in one and
   keeps only our custom .pw-toggle button. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

.btn-google:hover { background: #faf6ea !important; }

/* ---------- Dashboard shell ---------- */
.admin-dashboard-box {
  background: #f7f5f0;
  border-radius: var(--radius, 12px);
  max-width: 1100px;
  width: 100%;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
}

.admin-dashboard-header {
  background: #15120c;
  color: #fff;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 8px;
}

.admin-dashboard-header h2 {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.15rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-brand-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.admin-seats-pill {
  background: rgba(201,169,96,.18);
  color: #d9b866;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.admin-dashboard-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.admin-sidebar {
  width: 190px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #eee;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.admin-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}

.admin-tab-btn:hover { background: #f3ecd8; }

.admin-tab-btn.active {
  background: #9E6200;
  color: #fff;
}

.admin-main-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.admin-section-title {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: #9E6200;
  margin: 0 0 16px;
  font-size: 1.2rem;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-loading, .admin-empty {
  color: #888;
  font-size: 14px;
  padding: 30px 0;
  text-align: center;
}

.btn-sm { padding: 8px 16px !important; font-size: 13px !important; }

/* ---------- Stat cards ---------- */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.admin-stat-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.admin-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f3ecd8;
  color: #9E6200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.admin-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
  line-height: 1.1;
}

.admin-stat-label {
  font-size: 12px;
  color: #888;
}

.admin-stat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fdecea;
  color: #b3261e;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

/* ---------- Order period pills (Overview — Today/Yesterday/15d/30d/90d/All) ---------- */
.admin-period-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.admin-period-pill {
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}

.admin-period-pill:hover { border-color: #dfc57b; }

.admin-period-pill.active {
  border-color: #9E6200;
  background: #fbf6ea;
}

.admin-period-pill-label {
  font-size: 12px;
  font-weight: 700;
  color: #9E6200;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.admin-period-pill-count {
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
}

.admin-period-pill-rev {
  font-size: 11.5px;
  color: #888;
}

/* ---------- Settings tab ---------- */
.admin-settings-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 18px;
}

.admin-settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- Tables ---------- */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

.admin-table th, .admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f0ede4;
  vertical-align: top;
}

.admin-table th {
  background: #faf7f0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #9a7c3a;
}

.admin-table select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-size: 12.5px;
  font-family: inherit;
}

.admin-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 3px;
}
.admin-pill.good { background: #e3f5e9; color: #0f7a3d; }
.admin-pill.warn { background: #fff3d6; color: #9a6b00; }
.admin-pill.danger { background: #b3261e; color: #fff; }

.admin-order-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #8b5500;
  margin: 4px 0 10px;
}

/* A row the customer themselves cancelled — flagged entirely in red so the
   admin can tell it apart from an order the admin cancelled manually. */
.admin-table tr.admin-row-cust-cancel td {
  background: #fdecea;
  color: #b3261e;
}
.admin-table tr.admin-row-cust-cancel td .muted {
  color: #c65a52;
}
.admin-table tr.admin-row-cust-cancel:hover td { background: #fbdcd9; }

.admin-icon-btn {
  border: none;
  background: #f3ecd8;
  color: #9E6200;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  cursor: pointer;
  margin-right: 6px;
}
.admin-icon-btn:hover { background: #e8dcb8; }
.admin-icon-btn.danger { background: #fdecea; color: #b3261e; }
.admin-icon-btn.danger:hover { background: #f8d3ce; }

/* ---------- Inline add-forms (coupons, admin seats) ---------- */
.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
}

.admin-inline-form input, .admin-inline-form select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}

/* ---------- Toggle switch ---------- */
.admin-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 21px;
}
.admin-switch input { opacity: 0; width: 0; height: 0; }
.admin-switch span {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ddd;
  border-radius: 21px;
  transition: .2s;
}
.admin-switch span::before {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.admin-switch input:checked + span { background: #9E6200; }
.admin-switch input:checked + span::before { transform: translateX(17px); }

/* ---- Multi-image product gallery (admin form) ---- */
.admin-img-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-img-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #eee;
  background: #f7f2e4;
  flex-shrink: 0;
}
.admin-img-thumb.is-cover { border-color: #c9a960; }
.admin-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-img-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #c3a76a; font-size: 20px;
}
.admin-img-cover-tag {
  position: absolute; top: 2px; left: 2px;
  background: #9E6200; color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  z-index: 2; letter-spacing: .02em;
}
.admin-img-thumb-actions {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent 60%);
  opacity: 0; transition: opacity .15s;
  padding-bottom: 4px;
}
.admin-img-thumb:hover .admin-img-thumb-actions,
.admin-img-thumb:focus-within .admin-img-thumb-actions { opacity: 1; }
.admin-img-thumb-actions button {
  width: 20px; height: 20px;
  border: none; border-radius: 4px;
  background: rgba(255,255,255,.92); color: #333;
  font-size: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.admin-img-thumb-actions button:disabled { opacity: .35; cursor: not-allowed; }
.admin-img-thumb-actions button:hover:not(:disabled) { background: #fff; }

.admin-oos-toggle-row {
  display: flex; align-items: flex-start; gap: 8px;
  cursor: pointer; font-size: 12.5px; color: #555; font-weight: 400;
}
.admin-oos-toggle-row input { margin-top: 3px; flex-shrink: 0; }

/* ---- Products admin table toolbar / bulk bar / quick controls ---- */
.admin-product-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 12px;
}
.admin-product-toolbar input[type="text"],
.admin-product-toolbar select {
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
}
.admin-product-toolbar input[type="text"] { flex: 1; min-width: 160px; }
.admin-bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fbf3df; border: 1px solid #e8d69f;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 600; color: #7a5a1e;
}
.admin-table-thumb {
  width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  display: block; background: #f7f2e4;
}
.admin-table-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: #c3a76a; font-size: 14px;
}
.admin-stock-stepper {
  display: flex; align-items: center; gap: 6px;
}
.admin-stock-stepper button {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid #ddd; background: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.admin-stock-stepper button:hover { background: #f3ecd8; }
.admin-stock-low { color: #9a6b00; font-weight: 700; }
.admin-switch-oos input:checked + span { background: #b3261e; }
.admin-oos-badge {
  margin-top: 3px; font-size: 9.5px; font-weight: 700;
  color: #b3261e; letter-spacing: .02em;
}
.admin-table tr.admin-row-oos td { background: #fdecea; }
.admin-table tr.admin-row-oos:hover td { background: #f8d3ce; }
.admin-table tr.admin-row-lowstock td { background: #fff8e8; }
.admin-table tr.admin-row-lowstock:hover td { background: #fbeecb; }

/* =============================================================
   ADMIN CONSOLE — responsive: tablet + phone.
   Everything an admin can do at desktop size (all 8 tabs, stat
   cards, period pills, product form, image gallery, tables,
   toolbars, bulk bar, inline add-forms, settings) stays fully
   present and usable at tablet and phone widths — nothing is
   hidden here, only reflowed so it fits and stays tappable.
============================================================= */

/* ---- Tablet (portrait tablets / small laptops, ~721–1024px) ----
   The two-pane layout (sidebar + content) still fits at this width,
   so keep it, just tighten it up a little so content has more room. */
@media (min-width: 721px) and (max-width: 1024px) {
  .admin-dashboard-box { height: 94vh; max-width: 96vw; }
  .admin-sidebar { width: 160px; padding: 12px 8px; }
  .admin-tab-btn { font-size: 12.5px; padding: 9px 10px; }
  .admin-main-area { padding: 18px; }
  .admin-stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .admin-period-pills { grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); }
}

/* ---- Phone + narrow tablet (≤720px) ----
   Sidebar becomes a horizontally-scrollable tab strip above the
   content instead of a side column, same as before, plus every
   other admin surface below gets tuned so nothing overflows,
   gets clipped, or needs a horizontal page-scroll to reach. */
@media (max-width: 720px) {
  .admin-modal-wrap { padding: 10px; }
  .admin-dashboard-box { height: 94vh; max-width: 100%; border-radius: 10px; }
  .admin-dashboard-body { flex-direction: column; }
  .admin-dashboard-header { padding: 12px 14px; }
  .admin-dashboard-header h2 { font-size: 1rem; }
  .admin-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    padding: 10px 8px;
  }
  /* BUG FIX: .admin-tab-btn's base rule has width:100% (correct for the
     desktop vertical sidebar column). Once the sidebar switches to a
     horizontal row above, that width:100% made every single tab button
     try to fill the ENTIRE row by itself — so only "Overview" ever
     rendered and Orders/Products/Coupons/Reviews/Returns/Enquiries/Admin
     Seats/Settings were pushed completely out of view instead of just
     sitting further along the scroll strip. Buttons now size to their
     own label + icon and sit inline, so all 8 tabs are reachable by
     scrolling the strip left/right. */
  .admin-tab-btn {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .admin-main-area { padding: 14px; }

  /* Login box / product-form box (both share .admin-login-box) —
     use the full width instead of the 420/580px desktop cap. */
  .admin-login-box { max-width: 100%; padding: 26px 18px; }

  /* Add/Edit Product modal: stack every 2-column row into one
     column so labels and inputs never get squeezed on a phone. */
  .admin-form-grid-2 { grid-template-columns: 1fr; }

  /* Stat cards / period pills: smaller minimum tile width so 2
     columns keep fitting on a 360–400px-wide phone instead of
     forcing 1 column or overflowing the container. */
  .admin-stat-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; }
  .admin-stat-card { padding: 12px; gap: 10px; }
  .admin-period-pills { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }

  /* Tables: every table (Orders, Products, Coupons, Reviews,
     Returns, Enquiries, Admin Seats) already scrolls horizontally
     via .admin-table-wrap — just shrink text/padding so more of
     each row is visible before that scroll kicks in. */
  .admin-table { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 8px 8px; }
  .admin-td-address { max-width: 160px; }

  /* Toolbars / inline add-forms (Products search+filter+sort row,
     Coupons/Admin Seats quick-add row, bulk-select bar) — force
     each control to share the row width instead of relying on a
     min-width that can overflow a narrow screen. */
  .admin-product-toolbar input[type="text"] { min-width: 0; flex: 1 1 100%; }
  .admin-product-toolbar select { flex: 1 1 auto; }
  .admin-inline-form { padding: 12px; gap: 8px; }
  .admin-inline-form input, .admin-inline-form select { flex: 1 1 120px; min-width: 0; }
  .admin-bulk-bar { font-size: 12px; padding: 8px 10px; }

  /* Settings rows already wrap; just tighten spacing. */
  .admin-settings-card { padding: 14px; }
  .admin-settings-row { gap: 12px; }
}

@media (max-width: 420px) {
  .admin-stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-period-pills { grid-template-columns: 1fr 1fr; }
  .admin-login-box { padding: 22px 14px; }
  .admin-img-upload img { height: 130px; }
}