:root {
  --gold: #C9A84C;
  --gold-light: #E6C060;
  --dark: #111111;
  --darker: #0a0a0a;
  --card: #1a1a1a;
  --border: #2a2a2a;
  --cream: #F5F0E8;
  --beige: #D4C5A9;
}

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

body { background: var(--darker); color: #fff; font-family: 'DM Sans', system-ui, sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--darker); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Gold text */
.text-gold { color: var(--gold) !important; }
.border-gold { border-color: var(--gold) !important; }
.bg-gold { background: var(--gold) !important; }

/* Buttons */
.btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #000; font-weight: 600; font-size: 0.9rem;
  padding: 12px 28px; border-radius: 8px; border: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
/* Shine sweep that crosses the button on hover */
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201,168,76,0.4); }
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 4px 12px rgba(201,168,76,0.3); }

.btn-secondary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: #fff; font-weight: 600; font-size: 0.9rem;
  padding: 11px 28px; border-radius: 8px; border: 1px solid #333; cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.btn-secondary:active { transform: translateY(0) scale(0.97); }

/* Add-to-cart success bounce (toggled by JS) */
@keyframes btnPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.btn-pop { animation: btnPop 0.4s ease; }

/* Cart icon nudge inside buttons on hover */
.btn-primary:hover svg, .btn-secondary:hover svg { animation: cartNudge 0.5s ease; }
@keyframes cartNudge {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Wishlist heart button on product cards */
.wishlist-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Solid bg — no backdrop-filter (was causing 35 repaints per scroll frame) */
  background: rgba(10,10,10,0.75); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; cursor: pointer;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease;
}
.wishlist-btn svg { width: 17px; height: 17px; transition: fill 0.2s ease; }
.wishlist-btn:hover { transform: scale(1.12); background: rgba(10,10,10,0.8); color: #ff5e7a; }
.wishlist-btn.active { color: #ff3b5c; border-color: rgba(255,59,92,0.5); }
.wishlist-btn.active svg { fill: #ff3b5c; }
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.wishlist-btn.pop { animation: heartPop 0.35s ease; }

/* Wishlist count badge (navbar / sidebar) */
.wishlist-count-badge {
  display: none; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 9px; background: #ff3b5c; color: #fff;
}

/* Admin demo-reel ratio picker */
.ratio-opt {
  border: 1px solid #2a2a2a; background: #111; color: #aaa;
}
.ratio-opt:hover { border-color: #444; }
.ratio-opt.selected {
  border-color: #C9A84C; background: rgba(201,168,76,0.08); color: #fff;
}

/* Cards */
.product-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; position: relative;
  transition: transform 0.3s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.3s ease;
  /* NO will-change here — it would create a GPU layer for every single card */
}
/* Only promote to GPU layer on actual hover — one card at a time */
.product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); will-change: transform; }
/* Auto aspect-ratio — never crops, shows full image */
.product-card .card-img {
  width: 100%; display: block;
  aspect-ratio: 1 / 1;          /* square container */
  object-fit: contain;           /* full image visible, no cropping */
  background: #111;              /* dark fill for letterbox areas */
  transition: transform 0.4s;
}
.product-card:hover .card-img { transform: scale(1.04); }

/* Badge */
.discount-badge {
  position: absolute; top: 12px; left: 12px; background: #ef4444; color: #fff;
  font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em;
}
.featured-badge {
  position: absolute; top: 12px; right: 12px; color: var(--gold);
  font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 4px;
  background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.3);
}

/* Section titles */
.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 2rem; color: #fff; }
.section-sub { color: #888; font-size: 0.95rem; margin-top: 6px; }

/* Form inputs */
.form-input {
  width: 100%; padding: 10px 14px; background: #1a1a1a; border: 1px solid #2a2a2a;
  border-radius: 8px; color: #fff; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
  /* iOS: any input < 16px triggers auto-zoom. We set 16px on mobile via media query below. */
}
.form-input:focus { border-color: var(--gold); }
.form-label { display: block; font-size: 0.85rem; font-weight: 500; color: #ccc; margin-bottom: 6px; }

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.4); } 70% { box-shadow: 0 0 0 12px rgba(201,168,76,0); } }
.animate-fade-up { animation: fadeInUp 0.5s ease forwards; }
.pulse-gold { animation: pulse-gold 2s infinite; }

/* Slider */
.slider-wrapper { overflow: hidden; }
.slider-track { display: flex; gap: 20px; transition: transform 0.4s ease; }
.slider-track > * { flex: 0 0 calc(33.333% - 14px); }
@media (max-width: 768px) { .slider-track > * { flex: 0 0 calc(100% - 0px); } }
@media (max-width: 1024px) { .slider-track > * { flex: 0 0 calc(50% - 10px); } }

/* Stats ticker */
.stats-ticker { display: flex; gap: 0; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; }
.stat-item { flex: 1; padding: 20px; text-align: center; border-right: 1px solid #1a1a1a; }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: 'DM Sans', system-ui, sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--gold); }
.stat-label { font-size: 0.8rem; color: #666; margin-top: 2px; }

/* Countdown */
.countdown-box { display: flex; gap: 12px; }
.countdown-unit { text-align: center; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px 16px; min-width: 64px; }
.countdown-num { font-family: 'DM Sans', system-ui, sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--gold); line-height: 1; }
.countdown-label { font-size: 0.65rem; color: #666; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

/* FAQ Accordion */
.faq-item { border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.faq-question { width: 100%; padding: 16px 20px; background: #1a1a1a; color: #fff; text-align: left; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; font-weight: 500; }
.faq-question:hover { background: #222; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 400px; }
.faq-answer-inner { padding: 16px 20px; color: #aaa; font-size: 0.9rem; line-height: 1.7; background: #111; }

/* Pagination */
.pagination { display: flex; gap: 6px; align-items: center; }
.page-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid #2a2a2a; background: #1a1a1a; color: #aaa; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none; }
.page-btn:hover, .page-btn.active { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 700; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; background: #1a1a1a; border: 1px solid var(--gold); color: #fff; font-size: 0.9rem; z-index: 9999; animation: fadeInUp 0.3s ease; }

/* Gallery */
.gallery-thumb { cursor: pointer; border: 2px solid transparent; border-radius: 6px; overflow: hidden; transition: border-color 0.2s; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--gold); }

/* Admin */
.admin-sidebar { width: 240px; background: #111; border-right: 1px solid #1a1a1a; min-height: 100vh; position: fixed; top: 0; left: 0; z-index: 60; }
.admin-main { margin-left: 240px; padding: 24px; }
/* Mobile admin top bar + backdrop (hidden on desktop) */
.admin-mobile-bar { display: none; }
.admin-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 55; }
.admin-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 6px; color: #888; font-size: 0.875rem; text-decoration: none; transition: all 0.2s; }
.admin-nav-link:hover, .admin-nav-link.active { background: rgba(201,168,76,0.1); color: var(--gold); }
.admin-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 20px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { padding: 10px 14px; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #555; border-bottom: 1px solid #1a1a1a; }
.admin-table td { padding: 14px; border-bottom: 1px solid #111; font-size: 0.875rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ── MOBILE SIDEBAR DRAWER ──────────────────────────── */
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: #aaa;
  text-decoration: none; transition: all 0.18s; margin-bottom: 2px;
}
.sidebar-link:hover, .sidebar-link.active {
  background: rgba(201,168,76,0.1);
  color: #C9A84C;
}
.sidebar-link-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 0.82rem; color: #888; text-decoration: none;
  transition: all 0.18s; margin-bottom: 2px;
}
.sidebar-link-sub:hover { background: rgba(201,168,76,0.08); color: #C9A84C; }
#mobileSidebar::-webkit-scrollbar { width: 4px; }
#mobileSidebar::-webkit-scrollbar-thumb { background: #222; border-radius: 2px; }

/* ── TRENDING AUTO-SCROLL ──────────────────────────── */
.trending-auto-scroll {
  overflow: hidden; padding: 0 0 8px; cursor: grab;
  /* Soft fade on both edges so cards melt into the background */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trending-auto-scroll:active { cursor: grabbing; }
.trending-scroll-track {
  display: flex; gap: 16px;
  animation: trendingMarquee 38s linear infinite;
  width: max-content;
}
.trending-scroll-track.paused { animation-play-state: paused; }
.trending-scroll-item {
  width: 260px; flex-shrink: 0;
  display: flex;            /* let the card stretch to equal height */
  transition: transform 0.3s ease;
}
.trending-scroll-item > .product-card { width: 100%; }
.trending-scroll-item:hover { transform: translateY(-6px); }
@keyframes trendingMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Animated glow pill behind the Trending heading */
.trending-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ff7a59;
  background: rgba(255,122,89,0.1);
  border: 1px solid rgba(255,122,89,0.3);
}
.trending-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff5722;
  box-shadow: 0 0 0 0 rgba(255,87,34,0.6);
  animation: trendingPulse 1.6s infinite;
}
@keyframes trendingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,87,34,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,87,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,87,34,0); }
}
@media (max-width: 640px) {
  .trending-scroll-item { width: 200px; }
  .trending-scroll-track { animation-duration: 28s; }
}

/* ── MOBILE IMPROVEMENTS ────────────────────────────── */
@media (max-width: 768px) {
  /* Admin — sidebar becomes a slide-in drawer */
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 0 0 40px rgba(0,0,0,0.6); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; padding: 16px; padding-top: 68px; }
  .admin-mobile-bar { display: flex; align-items: center; gap: 12px; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 14px; background: rgba(17,17,17,0.97); backdrop-filter: blur(8px); border-bottom: 1px solid #1f1f1f; z-index: 50; }
  .admin-backdrop.show { display: block; }

  /* Stats ticker */
  .stats-ticker { flex-wrap: wrap; }
  .stat-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid #1a1a1a; }

  /* Section titles */
  .section-title { font-size: 1.7rem; }

  /* Slider - show 1.15 cards so user knows it scrolls */
  .slider-track > * { flex: 0 0 calc(75% - 0px) !important; }
}

@media (max-width: 480px) {
  /* Hero */
  .section-title { font-size: 1.5rem; }

  /* Slider - 1 card + peek */
  .slider-track > * { flex: 0 0 82% !important; }

  /* Buttons - larger touch targets */
  .btn-primary, .btn-secondary { padding: 13px 22px; min-height: 48px; }

  /* Countdown */
  .countdown-box { gap: 8px; }
  .countdown-unit { min-width: 54px; padding: 10px 12px; }
  .countdown-num { font-size: 1.75rem; }

  /* Product page price box */
  .product-price-responsive { flex-wrap: wrap; gap: 8px; }

  /* Stats numbers */
  .stat-num { font-size: 1.6rem; }
}

/* ── Cart / Checkout — shared premium page styles ───────────── */

/* Particle canvas sits behind all content */
.particle-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Page content sits above particles */
.page-content { position: relative; z-index: 1; }

/* Premium section card */
.premium-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 20px;
  transition: border-color 0.3s ease;
}
.premium-card:hover { border-color: rgba(201,168,76,0.3); }

/* Gold accent left bar on cards */
.accent-card {
  position: relative;
  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  overflow: hidden;
}
.accent-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light), var(--gold));
  border-radius: 3px 0 0 3px;
}

/* Step indicator */
.checkout-steps { display: flex; align-items: center; gap: 0; }
.checkout-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600;
}
.checkout-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  flex-shrink: 0;
}
.checkout-step.done .checkout-step-num { background: var(--gold); color: #000; }
.checkout-step.active .checkout-step-num { background: rgba(201,168,76,0.2); color: var(--gold); border: 2px solid var(--gold); }
.checkout-step.pending .checkout-step-num { background: #2a2a2a; color: #555; }
.checkout-step.done span, .checkout-step.active span { color: #fff; }
.checkout-step.pending span { color: #555; }
.checkout-step-line { flex: 1; height: 1px; background: #2a2a2a; min-width: 24px; }
.checkout-step-line.done { background: var(--gold); }

/* Cart item card */
.cart-item-card {
  display: flex; gap: 16px; align-items: center;
  padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg,#1a1a1a,#141414);
  border: 1px solid #2a2a2a;
  transition: border-color 0.2s, transform 0.2s;
}
.cart-item-card:hover { border-color: rgba(201,168,76,0.25); transform: translateX(3px); }

/* Touch-friendly slider cursor hint */
.slider-wrapper { cursor: grab; }
.slider-wrapper:active { cursor: grabbing; }

/* Smooth slider — GPU-composited */
.slider-track { transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; }

/* ── Performance: GPU-promote ONLY truly continuously-animated elements ──
   Rule: only add will-change to things that animate WITHOUT user interaction.
   Hover/click elements get will-change on :hover only (see below).       */
.trending-scroll-track { will-change: transform; } /* continuous CSS animation — OK */
/* Buttons: only promote on hover, not all 20+ buttons at once */
.btn-primary:hover, .btn-secondary:hover { will-change: transform; }

/* ── Remove expensive backdrop-filter on mobile ──────────────── */
@media (max-width: 768px) {
  /* Navbar: solid bg instead of blur (no visual difference on small screens) */
  #navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10,10,10,0.97) !important; }
  /* Sidebar backdrop */
  #sidebarBackdrop { backdrop-filter: none !important; }
  /* Wishlist button */
  .wishlist-btn { backdrop-filter: none !important; }
  /* Ambient glow animation: disable on mobile (saves battery, zero lag) */
  .ambient-glow { animation: none !important; }
}

/* ── iOS & Android universal fixes ─────────────────────────────── */

/* Stop iOS from inflating text sizes automatically */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS Safari momentum scroll ONLY on elements that actually scroll —
   NEVER on body or html (blocks page scroll on older iOS Safari)    */
#mobileSidebar { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/* iPhone notch / Dynamic Island safe areas */
#navbar > div { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }

/* Sticky bottom CTA: avoid home-bar overlap on iPhone */
.fixed.bottom-0 { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* Remove grey flash on tap + kill 300ms tap delay */
button, a, .btn-primary, .btn-secondary, label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
button, a, .btn-primary, .btn-secondary, label { touch-action: manipulation; }

/* ─── Smoothness & performance ───────────────────────────────────
   scroll-behavior: smooth makes all anchor jumps silky.
   overscroll-behavior: none stops the page "bouncing" at the
   top/bottom on mobile (a major perceived-lag source).
   text-rendering: optimizeSpeed removes text-AA cost on scroll. */
html {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
}
/* Do NOT set overscroll-behavior:none — it makes scroll feel "stuck" on mobile */

/* content-visibility removed — caused layout recalculations that hurt scroll perf */

/* Ambient drifting glow — gives dark sections a subtle "living" depth */
@keyframes ambientDrift {
  0%   { transform: translate(0,0) scale(1);     opacity: 0.55; }
  50%  { transform: translate(2.5%,-2%) scale(1.08); opacity: 0.9; }
  100% { transform: translate(0,0) scale(1);     opacity: 0.55; }
}
.ambient-glow { animation: ambientDrift 16s ease-in-out infinite; will-change: transform, opacity; max-width: 100%; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ambient-glow { animation: none; }
  html { scroll-behavior: auto; }
}

/* Animated underline for desktop nav links */
.nav-underline { position: relative; }
.nav-underline::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.65,0,0.35,1);
}
.nav-underline:hover::after { transform: scaleX(1); }

/* Count-up numbers shouldn't reflow jarringly */
[data-countup] { font-variant-numeric: tabular-nums; }

/* Homepage ambient aurora — subtle drifting gold light behind the whole page.
   Uses transform-only animation (GPU-composited, zero repaints). */
.home-aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; contain: strict;
  /* Isolate compositing layer so it never triggers layout */
  isolation: isolate;
}
.home-aurora::before, .home-aurora::after {
  content: ''; position: absolute; border-radius: 50%;
  /* Use a large radial-gradient instead of filter:blur — zero GPU cost,
     no repaint, same visual result */
  will-change: transform;
}
.home-aurora::before {
  width: 70vw; height: 70vw; left: -20%; top: -20%;
  background: radial-gradient(circle, rgba(201,168,76,0.13) 0%, rgba(201,168,76,0.04) 40%, transparent 70%);
  animation: auroraA 24s ease-in-out infinite;
}
.home-aurora::after {
  width: 60vw; height: 60vw; right: -18%; bottom: -18%;
  background: radial-gradient(circle, rgba(201,168,76,0.09) 0%, rgba(201,168,76,0.03) 40%, transparent 70%);
  animation: auroraB 30s ease-in-out infinite;
}
@keyframes auroraA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10%,7%) scale(1.1); } }
@keyframes auroraB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-8%,-5%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .home-aurora::before, .home-aurora::after { animation: none; } }
/* Disable aurora on mobile — saves battery + removes any lag source */
@media (max-width: 768px) { .home-aurora { display: none; } }

/* ═══════════════════════════════════════════════════════════
   MOBILE FIRST — all pages, all phones (iOS + Android)
   ═══════════════════════════════════════════════════════════ */

/* Global: prevent horizontal overflow without killing scroll */
html { overflow-x: clip; }
body { overflow-x: hidden; width: 100%; }
img, video, iframe, embed { max-width: 100%; height: auto; }

/* ── NAVBAR brand sizing ──────────────────────────────────── */
.brand-name { font-size: clamp(0.85rem, 3.8vw, 1.3rem); white-space: nowrap; }
.brand-link { min-width: 0; overflow: hidden; }

/* Right icons — always in a row, never wrapped or pushed off */
.nav-icons-right {
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  margin-left: 0 !important;
}
.nav-icons-right a,
.nav-icons-right button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  min-width: 36px;
  min-height: 44px;
}

/* On very small screens hide "IMPROVEMENT" to save space */
@media (max-width: 359px) {
  .brand-imp { display: none; }
}

/* ── Base mobile (≤ 768px) ────────────────────────────────── */
@media (max-width: 768px) {
  /* Navbar: never wrap, brand can shrink, icons stay visible */
  #navbar .flex.items-center.justify-between.h-16 {
    flex-wrap: nowrap !important;
    overflow: hidden;
    gap: 4px;
  }
  /* Announcement bar close button: bigger tap */
  #announcementBar button { padding: 8px !important; min-width: 36px; min-height: 36px; }

  /* --- FIX: iOS/Android auto-zoom on input tap (triggered when font < 16px) --- */
  /* Setting font-size: 16px on mobile stops the browser zooming in completely */
  .form-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="password"], input[type="number"],
  input[type="search"], input[type="date"], input[type="datetime-local"],
  textarea, select {
    font-size: 16px !important;
  }

  /* --- Cart: display as block so both sections always visible --- */
  .cart-grid {
    display: block !important;  /* single column, no grid confusion */
  }
  .cart-grid > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1.5rem;
  }
  .cart-grid .sticky { position: static !important; }

  /* --- Minimum readable font size on mobile: 11px --- */
  [class*="text-[10px]"], [class*="text-xs"] { font-size: max(11px, 0.7rem) !important; }

  /* --- Hero watermark: smaller on mobile so it doesn't clash with text --- */
  .hero-watermark { opacity: 0.07 !important; width: 60% !important; }

  /* --- Store page: 2-col product grid --- */
  .store-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* --- Product page: stack image + info vertically --- */
  .product-layout { grid-template-columns: 1fr !important; }

  /* --- Product page gallery: 3 thumbs per row on mobile --- */
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }

  /* --- Checkout: display as block so form + summary always visible --- */
  .checkout-grid {
    display: block !important;
  }
  .checkout-grid > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1.5rem;
  }
  .checkout-grid .sticky { position: static !important; }

  /* --- Footer grid: 2 columns on tablet --- */
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- Announcement bar: text smaller --- */
  #announcementBar p { font-size: 0.7rem !important; }

  /* --- Section spacing --- */
  .section-title { font-size: 1.6rem; }
  .section-sub { font-size: 0.85rem; }

  /* --- Stats ticker: 2 per row --- */
  .stats-ticker { flex-wrap: wrap; }
  .stat-item { flex: 0 0 50%; border-right: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; }
  .stat-item:nth-child(2n) { border-right: none; }

  /* --- Countdown: tighter --- */
  .countdown-box { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .countdown-unit { min-width: 58px; padding: 10px 8px; }
  .countdown-num { font-size: 1.6rem; }

  /* --- FAQ: readable on mobile --- */
  .faq-question { font-size: 0.88rem; padding: 14px 16px; }

  /* --- Landing page "Who Is This For" grid: 2-col on tablet --- */
  .audience-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- Wishlist page grid --- */
  #wishlistGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  /* --- Section titles --- */
  .section-title { font-size: 1.4rem; }
  .section-sub { font-size: 0.8rem; }

  /* --- Buttons: full-width in stacked layouts, bigger tap targets --- */
  .btn-primary, .btn-secondary { padding: 13px 18px; min-height: 48px; font-size: 0.875rem; }

  /* --- Store grid: 2 col even on tiny screens --- */
  .store-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* --- Product page gallery: 4 thumbs small --- */
  .gallery-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }

  /* --- Stats: each full width on tiny screens --- */
  .stat-item { flex: 0 0 50%; }
  .stat-num { font-size: 1.4rem; }

  /* --- Countdown: prevent overflow --- */
  .countdown-box { gap: 6px; }
  .countdown-unit { min-width: 50px; padding: 8px 6px; }
  .countdown-num { font-size: 1.4rem; }

  /* --- LP hero price/CTA block: no horizontal overflow --- */
  .lp-price-block { padding: 20px 16px !important; }

  /* --- Trending scroll: slightly smaller cards --- */
  .trending-scroll-item { width: 180px; }

  /* --- Footer: single column --- */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* --- Landing page audience grid: 1-col on very small screens --- */
  .audience-grid { grid-template-columns: 1fr !important; }

  /* --- Trust badges: 2 col --- */
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- Navbar brand: smaller on tiny phones --- */
  .brand-name { font-size: 0.78rem !important; }

  /* --- Announcement bar: hide on very small screens to save space --- */
  #announcementBar { display: none !important; }

  /* --- Product price: wrap on small screens --- */
  .product-price-responsive { flex-wrap: wrap; gap: 8px; }

  /* --- Wishlist grid: 2 col --- */
  #wishlistGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* --- Pagination: smaller buttons --- */
  .page-btn { width: 30px; height: 30px; font-size: 0.8rem; }

  /* --- Admin table: horizontal scroll always --- */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- LP hero: single column stacked, no overflow --- */
  .lp-hero-grid { grid-template-columns: 1fr !important; }
  .lp-hero-grid > div { text-align: center !important; }
  .lp-hero-grid .justify-start { justify-content: center !important; }

  /* --- LP product image: smaller on mobile --- */
  .lp-hero-img { max-height: 300px; object-fit: contain; }

  /* --- Mobile sidebar: ensure full content visible --- */
  #mobileSidebar {
    width: min(280px, 85vw) !important;
    max-width: 85vw !important;
  }
  .sidebar-link { padding: 13px 14px; font-size: 0.9rem; min-height: 48px; }

  /* --- Related products: 2 col grid --- */
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* --- My account / wishlist page spacing --- */
  .account-grid { grid-template-columns: 1fr !important; }
}

/* ── Extra: ensure no element ever causes horizontal scroll ── */
@media (max-width: 640px) {
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Keep cards from going edge-to-edge on tiny screens */
  .product-card { border-radius: 10px; }
  /* LP stats ticker: prevent number overflow */
  .stat-num { font-size: 1.3rem; }
  /* Trending scroll: very small screens */
  .trending-scroll-item { width: 170px; }
  /* Hero watermark: slightly larger on tiny screens */
  .hero-watermark { width: 70% !important; opacity: 0.08 !important; }
  /* Announcement bar: always off below 640 */
  #announcementBar { display: none !important; }
}

/* ── Cart/Checkout safety: always show order summary ──────── */
/* This overrides any JS or Tailwind that might hide sections */
@media (max-width: 1023px) {
  .cart-grid, .checkout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }
  .cart-grid > *, .checkout-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }
  .cart-grid .sticky, .checkout-grid .sticky {
    position: static !important;
    top: auto !important;
  }
}

/* ── Sidebar safe z-index and visibility ─────────────────── */
#mobileSidebar {
  z-index: 999 !important;
  visibility: visible;
}
#sidebarBackdrop {
  z-index: 998 !important;
}

/* ── Universal safe padding for notch phones ─────────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE IMPROVEMENTS — v31
   Checkout, product cards, store, cart, footer, nav
   ═══════════════════════════════════════════════════════════ */

/* ── 1. CHECKOUT: Sticky bottom pay bar ────────────────────
   Shown on mobile (<1024px) so user can always tap to pay.
   Desktop: hidden (form button is used instead).           */
.mobile-pay-bar { display: none; }

@media (max-width: 1023px) {
  .mobile-pay-bar {
    display: flex !important;
    align-items: center;
    gap: 14px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 95;
    padding: 12px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: rgba(12,12,12,0.97);
    border-top: 1px solid rgba(201,168,76,0.25);
    box-shadow: 0 -6px 28px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  /* Push entire page content above the sticky bar */
  .checkout-page-content { padding-bottom: 96px !important; }
  /* Hide the pay button INSIDE the form on mobile — sticky bar is used instead */
  .desktop-pay-btn { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-pay-bar { display: none !important; }
  .desktop-pay-btn { display: inline-flex !important; }
}

/* ── 2. CHECKOUT: Step indicator compact on tiny phones ───── */
@media (max-width: 430px) {
  .checkout-steps { gap: 3px !important; }
  .checkout-step { gap: 4px; }
  .checkout-step > span { font-size: 0.62rem; white-space: nowrap; }
  .checkout-step-num {
    width: 20px !important; height: 20px !important;
    font-size: 0.58rem !important; flex-shrink: 0;
  }
  .checkout-step-line {
    min-width: 8px !important; flex: 1 1 auto; max-width: 24px;
  }
}

/* ── 3. PRODUCT CARDS: compact body on 2-column grid ──────── */
@media (max-width: 480px) {
  /* Tighter inner padding */
  .product-card-body { padding: 10px !important; }
  /* Price */
  .product-card-body .price-text { font-size: 0.88rem !important; }
  /* Title */
  .product-card-body .card-title { font-size: 0.78rem !important; }
  /* "Add to Cart" button on card */
  .product-card-body .card-cart-btn {
    font-size: 0.67rem !important;
    padding: 5px 7px !important;
  }
}

/* ── 4. CARDS: tighter padding on all mobile screens ──────── */
@media (max-width: 640px) {
  .accent-card { padding: 16px !important; }
  .premium-card { padding: 16px !important; }
}

/* ── 5. BUTTONS: touch-friendly minimum height ─────────────── */
@media (max-width: 1023px) {
  .btn-primary, .btn-secondary { min-height: 48px; }
  .btn-primary:not(.mobile-pay-bar .btn-primary) { font-size: 0.95rem; }
}

/* ── 6. INPUTS: guaranteed 16px — prevents iOS zoom ─────────
   Note: 16px is already set in several places above,
   this catch-all ensures new elements never zoom.          */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select { font-size: 16px !important; }
}

/* ── 7. FOOTER: single column on tiny phones ──────────────── */
@media (max-width: 380px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}
/* Footer brand: always spans full width on mobile */
@media (max-width: 768px) {
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ── 8. STORE: filter row horizontal scroll on mobile ──────── */
@media (max-width: 640px) {
  .filter-row {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; gap: 8px; scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row > * { flex-shrink: 0 !important; }
}

/* ── 9. CART ITEM CARD: better image size on mobile ────────── */
@media (max-width: 640px) {
  .cart-item-card { gap: 12px; padding: 12px; }
  .cart-item-card img { width: 56px !important; height: 56px !important; border-radius: 8px; }
}

/* ── 10. PRODUCT PAGE: CTAs full-width on mobile ────────────── */
@media (max-width: 640px) {
  .product-cta-row { flex-direction: column !important; }
  .product-cta-row .btn-primary,
  .product-cta-row .btn-secondary { width: 100% !important; justify-content: center !important; }
}

/* ── 11. HORIZONTAL OVERFLOW SAFETY ─────────────────────────── */
@media (max-width: 640px) {
  .max-w-7xl, .max-w-6xl, .max-w-5xl { overflow-x: hidden; }
}

/* ── 12. WHATSAPP FAB: lift above sticky bar on checkout ────── */
.checkout-wa-fab { bottom: 100px !important; }

/* ── 13. ANNOUNCEMENT BAR: hide on small phones (saves space) ─ */
@media (max-width: 480px) {
  #announcementBar { display: none !important; }
}

/* ── 14. MOBILE TYPOGRAPHY: readable sizes everywhere ───────── */
@media (max-width: 480px) {
  .section-title { font-size: 1.5rem; line-height: 1.2; }
  .section-sub { font-size: 0.82rem; }
  h1 { font-size: clamp(1.5rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.2rem, 5.5vw, 2rem); }
}

/* ═══════════════════════════════════════════════════════════
   BUTTER-SMOOTH v32 — Spring animations, iOS fixes,
   focus rings, scrollbar polish, ripple, shimmer.
═══════════════════════════════════════════════════════════ */

/* ── v32.1  KEYFRAMES ────────────────────────────────────── */
@keyframes rippleAnim {
  to { transform: scale(2.4); opacity: 0; }
}
@keyframes btnPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.93); }
  70%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes toastSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes wishlistPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── v32.2  SPRING easing vars ───────────────────────────── */
:root {
  --spring: cubic-bezier(0.22, 1, 0.36, 1);   /* fast attack, gentle overshoot */
  --snappy: cubic-bezier(0.34, 1.56, 0.64, 1);/* playful overshoot */
}

/* ── v32.3  PRODUCT CARD — spring hover lift ─────────────── */
.product-card {
  transition: transform 0.38s var(--spring), box-shadow 0.38s var(--spring) !important;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,168,76,0.14) !important;
}
/* Prevent double-transform on mobile (no hover) */
@media (hover: none) {
  .product-card:hover { transform: none !important; box-shadow: none !important; }
}

/* ── v32.4  BUTTON ACTIVE / TAP PRESS ────────────────────── */
.btn-primary:active, .btn-secondary:active {
  transform: scale(0.96) !important;
  transition: transform 0.09s ease !important;
}
.btn-pop {
  animation: btnPop 0.42s var(--snappy) both;
}
/* Wishlist button pop */
.wishlist-btn.pop {
  animation: wishlistPop 0.4s var(--snappy) both;
}

/* ── v32.5  GOLD FOCUS RINGS (accessibility) ─────────────── */
:focus-visible {
  outline: 2px solid rgba(201,168,76,0.75) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(201,168,76,0.6) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
  outline: none !important;
}

/* ── v32.6  SCROLLBAR POLISH ─────────────────────────────── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: #111; }
::-webkit-scrollbar-thumb       { background: rgba(201,168,76,0.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.60); }
* { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) #111; }

/* ── v32.7  TOAST (global) ───────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 1px solid #C9A84C;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 50px;
  white-space: nowrap;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  pointer-events: none;
  animation: toastSlideUp 0.32s var(--spring) both;
  max-width: 90vw;
  text-align: center;
}
/* On checkout, lift toast above sticky bar */
body.has-mobile-bar .toast {
  bottom: 108px;
}

/* ── v32.8  IMAGE LOADING SHIMMER ────────────────────────── */
.product-card img:not(.img-loaded),
img[loading="lazy"]:not(.img-loaded) {
  background: linear-gradient(90deg,
    rgba(30,30,30,0.8) 25%,
    rgba(50,50,50,0.9) 50%,
    rgba(30,30,30,0.8) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ── v32.9  iOS / MOBILE VIEWPORT FIXES ──────────────────── */
/* Hero uses dvh so 100vh doesn't include address bar on mobile Safari */
.hero-section, section.hero {
  min-height: min(100dvh, 100vh);
}
/* iOS: safe area padding for fixed bars */
.mobile-pay-bar {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
/* Prevent body scroll bounce affecting sticky elements */
html { -webkit-text-size-adjust: 100%; }

/* ── v32.10 DROPDOWN MENU animate ───────────────────────── */
.dropdown-menu, [data-dropdown] {
  transform-origin: top right;
  transition: opacity 0.18s var(--spring), transform 0.22s var(--spring);
  opacity: 0;
  transform: scale(0.96) translateY(-6px);
  pointer-events: none;
}
.dropdown-menu.open, [data-dropdown].open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ── v32.11 MOBILE SIDEBAR spring slide ──────────────────── */
#mobileSidebar {
  transition: transform 0.32s var(--spring) !important;
}
#sidebarBackdrop {
  transition: opacity 0.25s ease !important;
}

/* ── v32.12 WISHLIST button base ─────────────────────────── */
.wishlist-btn {
  transition: color 0.2s ease, transform 0.25s var(--snappy) !important;
}
.wishlist-btn.active {
  color: #ef4444 !important;
}

/* ── v32.13 GALLERY thumb transitions ────────────────────── */
.gallery-thumb {
  transition: border-color 0.2s ease, transform 0.22s var(--spring), opacity 0.2s ease;
  opacity: 0.65;
  cursor: pointer;
}
.gallery-thumb:hover, .gallery-thumb.active {
  border-color: #C9A84C !important;
  opacity: 1;
  transform: scale(1.05);
}

/* ── v32.14 FAQ answer transition ────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s var(--spring), padding 0.25s ease;
}
.faq-answer.open {
  max-height: 600px;
}
.faq-icon {
  transition: transform 0.28s var(--spring);
}

/* ── v32.15 ACCENT / PREMIUM CARD hover glow ─────────────── */
.accent-card, .premium-card {
  transition: box-shadow 0.35s var(--spring), border-color 0.35s ease, transform 0.35s var(--spring);
}
.accent-card:hover, .premium-card:hover {
  box-shadow: 0 0 0 1px rgba(201,168,76,0.3), 0 16px 40px rgba(201,168,76,0.12);
  transform: translateY(-3px);
}
@media (hover: none) {
  .accent-card:hover, .premium-card:hover { transform: none; }
}

/* ── v32.16 COUNTER badge pulse ──────────────────────────── */
[data-cart-count]:not(:empty):not([style*="none"]) {
  animation: btnPop 0.38s var(--snappy);
}

/* ── v32.17 PRELOADER fade ───────────────────────────────── */
#preloader {
  transition: opacity 0.55s ease;
}

/* ── v32.18 SMOOTH page enter ────────────────────────────── */
body {
  animation: fadeIn 0.22s ease both;
}

/* ── v32.19 LINK underline spring ────────────────────────── */
a:not(.btn-primary):not(.btn-secondary):not(.product-card):not([class*="block"]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════
   v33 — PRO UI: animated backgrounds, button FX, legal pages,
   performance utilities. Built to stay on-theme (gold/dark).
═══════════════════════════════════════════════════════════ */

/* ── v33.1  PERFORMANCE: skip painting offscreen sections ─── */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px; /* reserve approx height to avoid scroll jump */
}

/* ── v33.2  ANIMATED BACKGROUNDS (reusable) ──────────────── */
/* Wrap a page section in .bg-stage; drop layers inside. Layers are
   pointer-events:none and sit behind content (content uses z-10). */
.bg-stage { position: relative; overflow: hidden; isolation: isolate; }
.bg-stage > .bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-stage > .bg-content { position: relative; z-index: 1; }

/* Aurora — slow drifting gold glow blobs */
@keyframes auroraMove1 { 0%,100% { transform: translate(-10%,-10%) scale(1); } 50% { transform: translate(8%,12%) scale(1.25); } }
@keyframes auroraMove2 { 0%,100% { transform: translate(10%,8%) scale(1.1); } 50% { transform: translate(-9%,-12%) scale(1.3); } }
.bg-aurora::before, .bg-aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
}
.bg-aurora::before {
  width: 46vw; height: 46vw; top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(201,168,76,0.40), transparent 65%);
  animation: auroraMove1 16s ease-in-out infinite;
}
.bg-aurora::after {
  width: 42vw; height: 42vw; bottom: -14%; right: -10%;
  background: radial-gradient(circle, rgba(201,168,76,0.22), transparent 65%);
  animation: auroraMove2 20s ease-in-out infinite;
}

/* Moving dotted grid — subtle premium tech texture */
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 42px 42px; } }
.bg-grid {
  background-image: radial-gradient(rgba(201,168,76,0.10) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridDrift 9s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}

/* Floating gold orbs (pure CSS, GPU-friendly) */
@keyframes orbFloat { 0%,100% { transform: translateY(0) translateX(0); opacity: 0.5; } 50% { transform: translateY(-26px) translateX(10px); opacity: 0.9; } }
.bg-orbs span {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(201,168,76,0.9), rgba(201,168,76,0.1));
  box-shadow: 0 0 14px rgba(201,168,76,0.5);
  animation: orbFloat 7s ease-in-out infinite;
}
.bg-orbs span:nth-child(1){ width:8px;height:8px; top:18%; left:12%; animation-delay:0s; }
.bg-orbs span:nth-child(2){ width:5px;height:5px; top:62%; left:22%; animation-delay:1.2s; }
.bg-orbs span:nth-child(3){ width:10px;height:10px; top:30%; left:78%; animation-delay:.6s; }
.bg-orbs span:nth-child(4){ width:6px;height:6px; top:75%; left:68%; animation-delay:2s; }
.bg-orbs span:nth-child(5){ width:4px;height:4px; top:45%; left:48%; animation-delay:1.6s; }
.bg-orbs span:nth-child(6){ width:7px;height:7px; top:12%; left:55%; animation-delay:2.6s; }

/* Conic sheen sweep — used behind hero headings */
@keyframes sheenSpin { to { transform: rotate(1turn); } }
.bg-sheen::before {
  content:""; position:absolute; top:50%; left:50%; width:160%; aspect-ratio:1;
  translate:-50% -50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(201,168,76,0.10) 80%, transparent 92%);
  animation: sheenSpin 14s linear infinite;
}

/* ── v33.3  BUTTON FX — gradient sheen + pulse ────────────── */
/* (.btn-primary already has a hover shine-sweep defined earlier; we just add new variants) */

/* Animated gradient outline for emphasis buttons */
@keyframes borderFlow { to { background-position: 200% center; } }
.btn-glow {
  background: linear-gradient(90deg,#C9A84C,#f4e2a1,#C9A84C,#f4e2a1);
  background-size: 200% auto; color:#000; animation: borderFlow 4s linear infinite;
}
.btn-glow:hover { filter: brightness(1.06); }

/* Pulsing ring CTA (community/giveaway) */
@keyframes ringPulse { 0% { box-shadow:0 0 0 0 rgba(37,211,102,0.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.pulse-green { animation: ringPulse 2.2s infinite; }

/* ── v33.4  CARD SPOTLIGHT (follows nothing — gentle glow) ── */
.spotlight-card { position: relative; transition: transform .4s var(--spring), box-shadow .4s var(--spring), border-color .3s ease; }
.spotlight-card::before {
  content:""; position:absolute; inset:0; border-radius: inherit; opacity:0;
  background: radial-gradient(420px circle at 50% 0%, rgba(201,168,76,0.14), transparent 60%);
  transition: opacity .4s ease; pointer-events:none;
}
.spotlight-card:hover { transform: translateY(-5px); border-color: rgba(201,168,76,0.35) !important; }
.spotlight-card:hover::before { opacity: 1; }
@media (hover:none){ .spotlight-card:hover{ transform:none; } }

/* ── v33.5  SHIMMER HEADLINE (gold gradient text sweep) ───── */
@keyframes textShimmer { to { background-position: 200% center; } }
.text-shimmer {
  background: linear-gradient(90deg,#C9A84C 0%, #fff3d0 25%, #C9A84C 50%, #fff3d0 75%, #C9A84C 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: textShimmer 5s linear infinite;
}

/* ── v33.6  SECTION ENTRANCE for legal/company pages ─────── */
.legal-page { position: relative; }
.legal-hero {
  position: relative; overflow: hidden; border-radius: 24px;
  background: linear-gradient(135deg,#15110a 0%, #111 60%);
  border: 1px solid rgba(201,168,76,0.18);
}
.legal-section {
  background:#161616; border:1px solid #242424; border-radius:16px; padding:1.5rem 1.6rem;
  position: relative; transition: border-color .3s ease, transform .3s ease;
  scroll-margin-top: 90px;
}
.legal-section:hover { border-color: rgba(201,168,76,0.3); }
.legal-section > h2 {
  display:flex; align-items:center; gap:.6rem;
  font-family:'Cormorant Garamond',serif; font-weight:700; color:#fff; font-size:1.18rem; margin-bottom:.7rem;
}
.legal-section .sec-num {
  flex-shrink:0; width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:#C9A84C; background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.25);
  font-family:'DM Sans',sans-serif;
}
.legal-section p, .legal-section li { color:#9ca3af; font-size:.9rem; line-height:1.7; }
.legal-section strong { color:#e5e7eb; }
/* Sticky on-page table of contents (desktop) */
.legal-toc { position: sticky; top: 96px; }
.legal-toc a {
  display:block; padding:.5rem .75rem; border-radius:8px; font-size:.82rem; color:#8a8a8a;
  border-left:2px solid transparent; transition: all .2s ease;
}
.legal-toc a:hover { color:#C9A84C; background:rgba(201,168,76,0.06); border-left-color:#C9A84C; }
/* Company info / legal entity block */
.company-card {
  background: linear-gradient(135deg,#13110b,#161616);
  border:1px solid rgba(201,168,76,0.2); border-radius:18px;
}

/* ── v33.7  TIMELINE (about / how-it-works) ──────────────── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(#C9A84C, rgba(201,168,76,0.1)); }
.timeline-item { position: relative; padding-bottom: 1.6rem; }
.timeline-item::before {
  content:""; position:absolute; left:-24px; top:4px; width:14px; height:14px; border-radius:50%;
  background:#C9A84C; box-shadow:0 0 0 4px rgba(201,168,76,0.15);
}

/* ── v33.8  STEP NUMBER badge (install page) ─────────────── */
.step-badge {
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; color:#000;
  background:linear-gradient(135deg,#f4e2a1,#C9A84C); box-shadow:0 8px 20px rgba(201,168,76,0.3);
}

/* ── v33.9  CHANNEL CARD (community page) ─────────────────── */
.channel-card {
  position: relative; overflow: hidden; border-radius: 22px; padding: 1.75rem;
  transition: transform .4s var(--spring), box-shadow .4s var(--spring);
}
.channel-card:hover { transform: translateY(-6px); }
.channel-card .glow {
  position:absolute; inset:-40% -40% auto auto; width:60%; aspect-ratio:1; border-radius:50%;
  filter: blur(50px); opacity:.5; pointer-events:none;
}

/* ── v33.10 REDUCED MOTION — respect user preference ─────── */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before,.bg-aurora::after,.bg-grid,.bg-orbs span,.bg-sheen::before,
  .text-shimmer,.btn-glow,.pulse-green,.btn-primary:hover::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v34 — NAVBAR + SIDEBAR REDESIGN  &  HOME HERO ANIMATIONS
═══════════════════════════════════════════════════════════ */

/* ── v34.1  DESKTOP NAV LINKS (pill + active underline) ───── */
.navlink {
  position: relative;
  font-size: 0.875rem; font-weight: 500; color: #b4b4b4;
  padding: 8px 14px; border-radius: 10px; white-space: nowrap;
  cursor: pointer; background: transparent; border: none;
  transition: color .2s ease, background .2s ease;
}
.navlink:hover { color: #fff; background: rgba(255,255,255,0.06); }
.navlink.active { color: var(--gold); }
.navlink::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 0; height: 2px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .28s cubic-bezier(0.65,0,0.35,1);
}
.navlink:hover::after { width: 16px; }
.navlink.active::after { width: 20px; }

/* ── v34.2  NAV ICON BUTTONS (search / wishlist / cart) ──── */
.nav-icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  color: #b4b4b4; background: transparent; border: none; cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s var(--snappy);
}
.nav-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-icon-btn:active { transform: scale(0.9); }

/* ── v34.3  LOGIN BUTTON ─────────────────────────────────── */
.nav-login-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 11px; font-size: 0.875rem; font-weight: 600;
  color: #0a0a0a; background: linear-gradient(135deg, #f4e2a1, var(--gold));
  box-shadow: 0 6px 18px rgba(201,168,76,0.28);
  transition: transform .2s var(--snappy), box-shadow .25s ease, filter .2s ease;
}
.nav-login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,168,76,0.42); filter: brightness(1.04); }

/* ── v34.4  CATEGORIES DROPDOWN (animated) ───────────────── */
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px) scale(0.97);
  width: 240px; padding: 8px; border-radius: 16px; z-index: 60;
  background: rgba(20,20,20,0.96); border: 1px solid rgba(201,168,76,0.18);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .26s cubic-bezier(0.22,1,0.36,1), visibility .22s;
}
.group:hover .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.nav-dropdown::before { /* hover bridge so it doesn't close in the gap */
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-dropdown-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; font-size: 0.85rem; color: #d0d0d0;
  text-decoration: none; transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.nav-dropdown-link:hover { background: rgba(201,168,76,0.12); color: var(--gold); padding-left: 16px; }

/* ── v34.5  SIDEBAR — premium active accent ──────────────── */
.sidebar-link { position: relative; }
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(201,168,76,0.16), rgba(201,168,76,0.04));
}
.sidebar-link.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(var(--gold), var(--gold-light));
}
.sidebar-link:hover { transform: translateX(2px); }

/* ── v34.6  HOME HERO — staggered entrance ───────────────── */
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-rise { opacity: 0; animation: heroRise 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-rise.d1 { animation-delay: 0.05s; }
.hero-rise.d2 { animation-delay: 0.16s; }
.hero-rise.d3 { animation-delay: 0.27s; }
.hero-rise.d4 { animation-delay: 0.38s; }
.hero-rise.d5 { animation-delay: 0.50s; }

/* Floating hero product cards — gentle bob + 3D tilt container */
@keyframes heroBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-float { animation: heroBob 6s ease-in-out infinite; will-change: transform; }
.hero-float:nth-child(2) { animation-delay: 1.5s; }
.hero-float:nth-child(3) { animation-delay: 0.8s; }
.hero-float:nth-child(4) { animation-delay: 2.2s; }
.tilt-3d { transition: transform .3s cubic-bezier(0.22,1,0.36,1); transform-style: preserve-3d; will-change: transform; }

/* Magnetic buttons (JS sets --mx/--my translate) */
.magnetic { transition: transform .25s cubic-bezier(0.22,1,0.36,1); }

/* Floating particle dots layer (home hero) */
@keyframes particleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-120px) translateX(14px); opacity: 0; }
}
.hero-particles span {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.95), rgba(201,168,76,0.2));
  box-shadow: 0 0 8px rgba(201,168,76,0.6);
  animation: particleRise linear infinite;
}

/* Hero badge — soft pulsing glow ring */
@keyframes badgeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.0); } 50% { box-shadow: 0 0 18px 1px rgba(201,168,76,0.25); } }
.badge-glow { animation: badgeGlow 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-rise,.hero-float,.hero-particles span,.badge-glow { animation: none !important; opacity: 1 !important; }
  .hero-rise { transform: none !important; }
}

/* ── v34.7  KEEP brand from shrinking too hard on desktop ── */
@media (min-width: 1024px) { .brand-name { font-size: 1.25rem; } }

/* ── v34.8  MY ACCOUNT — avatar glow ring + member badge ──── */
.account-avatar {
  position: relative; width: 84px; height: 84px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 0deg, #C9A84C, #fff3d0, #C9A84C, #fff3d0, #C9A84C);
  animation: sheenSpin 6s linear infinite;
  box-shadow: 0 8px 26px rgba(201,168,76,0.3);
}
.account-avatar-img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: #0a0a0a; border: 3px solid #0a0a0a; display: block;
}
.member-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #fff3d0, #C9A84C); color: #1a1400;
  box-shadow: 0 4px 12px rgba(201,168,76,0.3);
}
@media (prefers-reduced-motion: reduce) { .account-avatar { animation: none !important; } }

/* ═══════════════════════════════════════════════════════════
   v35 — SIDEBAR PREMIUM  ·  iOS/ANDROID MOBILE FIXES
═══════════════════════════════════════════════════════════ */

/* ── v35.1  SIDEBAR BRAND BAR (name text, no logo) ────── */
.sidebar-brand-bar {
  position: relative;
  background: linear-gradient(135deg, rgba(201,168,76,0.07) 0%, transparent 70%);
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
/* gold accent underline */
.sidebar-brand-bar::after {
  content: ''; position: absolute; bottom: -1px; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, rgba(201,168,76,0.4), transparent);
  pointer-events: none;
}
.sidebar-brand-wordmark { text-decoration: none; display: block; }
.sidebar-brand-name-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.22rem; font-weight: 700; letter-spacing: 0.07em; line-height: 1;
}
.sidebar-brand-digi { color: #C9A84C; }
.sidebar-brand-impr { color: #fff; }
.sidebar-brand-sub {
  font-size: 0.59rem; color: rgba(201,168,76,0.42);
  letter-spacing: 0.17em; text-transform: uppercase; margin-top: 3px;
}
/* Close button */
.sidebar-close-btn {
  width: 34px; height: 34px; min-width: 34px; border-radius: 10px;
  border: 1px solid #2a2a2a; background: #1a1a1a; color: #777;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.sidebar-close-btn:hover { background: #252525; color: #fff; border-color: #363636; }

/* ── v35.2  SIDEBAR — premium icon opacity + hover ─────── */
.sidebar-link svg { opacity: 0.55; transition: opacity .18s ease; }
.sidebar-link:hover svg, .sidebar-link.active svg { opacity: 1; }

/* MENU section label — left gold accent bar */
#mobileSidebar nav > p.text-xs {
  border-left: 2px solid rgba(201,168,76,0.28);
  background: linear-gradient(90deg, rgba(201,168,76,0.05), transparent);
  padding-left: 10px; margin-left: 0; border-radius: 0 4px 4px 0;
}

/* ── v35.3  iOS / ANDROID — GLOBAL MOBILE FIXES ────────── */

/* 1. Prevent iOS auto-zoom when inputs are focused (requires font-size ≥ 16px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea { font-size: 16px !important; -webkit-text-size-adjust: 100%; }

/* 2. Remove tap flash on ALL interactive elements */
a, button, [role="button"], [onclick],
.sidebar-link, .nav-icon-btn, .navlink,
.btn-primary, .btn-secondary, .device-tab {
  -webkit-tap-highlight-color: transparent;
}

/* 3. Remove 300 ms click delay — respond instantly to taps */
a, button, [role="button"], [onclick],
.sidebar-link, .nav-icon-btn, .navlink,
.btn-primary, .btn-secondary { touch-action: manipulation; }

/* 4. Momentum scrolling in sidebar (iOS Safari) */
#mobileSidebar { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* 5. Minimum 44×44 px touch targets (Apple HIG + Android Material) */
.nav-icon-btn  { min-width: 44px; min-height: 44px; }
.sidebar-link  { min-height: 44px; }
.btn-primary,
.btn-secondary { min-height: 44px; }

/* 6. Safe-area padding — iPhone notch, Dynamic Island & home indicator */
#pwa-install-banner,
#ios-install-banner {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* Top inset pushes the bar BELOW the iPhone status bar / notch in the
   installed (standalone) app — fixes the top bar rendering under the clock
   & battery. The translucent navbar background still fills behind it. */
#navbar { padding-top:   env(safe-area-inset-top,   0px);
          padding-left:  env(safe-area-inset-left,  0px);
          padding-right: env(safe-area-inset-right, 0px); }
#mobileSidebar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 7. Use dynamic viewport height so iOS address bar doesn't overlap content */
@supports (min-height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
}

/* 8. Prevent text size inflation in landscape on iOS */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 9. Smooth border-box sizing everywhere (some older mobile browsers miss this) */
*, *::before, *::after { box-sizing: border-box; }

/* ── v35.4  iOS SLIDE-UP ANIMATION for banner ───────────── */
@keyframes iosSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── v35.5  MOBILE — product grid min width (prevent overflow) */
@media (max-width: 400px) {
  .grid-cols-2 > * { min-width: 0; }
  /* Announcement bar wraps on tiny screens */
  #announcementBar p { font-size: 0.68rem !important; }
  /* Hero h1 — clamp so it never overflows */
  h1 { word-break: break-word; }
}

/* ── v35.6  ANDROID CHROME — navbar safe scroll ─────────── */
@media (display-mode: standalone) {
  /* When running as installed PWA — hide the announcement bar nudge */
  #announcementBar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #ios-install-banner { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   v35.8 — PREMIUM FOOTER REDESIGN
═══════════════════════════════════════════════════════════ */

/* ── CTA strip ────────────────────────────────────────── */
.footer-cta-strip {
  max-width: 82rem; margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; text-align: center;
}
@media (min-width: 640px) {
  .footer-cta-strip { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 10px;
  font-size: 0.84rem; font-weight: 700; color: #fff;
  background: #25D366; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(37,211,102,0.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,0.38); }

/* ── Main grid ────────────────────────────────────────── */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}
@media (min-width: 640px) {
  .footer-main-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col  { grid-column: 1 / -1; } /* full width on small tablet */
}
@media (min-width: 1024px) {
  .footer-main-grid { grid-template-columns: 1.55fr 1fr 1fr 1.1fr; }
  .footer-brand-col  { grid-column: auto; }
}

/* ── Trust badges ─────────────────────────────────────── */
.footer-trust-badge {
  font-size: 0.67rem; padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(201,168,76,0.16);
  color: #666; background: rgba(201,168,76,0.03);
  white-space: nowrap;
}

/* ── Social icons ─────────────────────────────────────── */
.footer-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: #555; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease,
              border-color .2s ease, box-shadow .2s ease;
  touch-action: manipulation;
}
.footer-social-icon:hover {
  background: rgba(201,168,76,0.1); color: #C9A84C;
  border-color: rgba(201,168,76,0.22);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* ── Column headings ──────────────────────────────────── */
.footer-col-heading {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; color: #d0d0d0;
  margin: 0 0 1.1rem; padding-bottom: 0.65rem;
  position: relative;
}
.footer-col-heading::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #C9A84C, rgba(201,168,76,0.25));
}

/* ── Link lists ───────────────────────────────────────── */
.footer-link-list { list-style: none; margin: 0; padding: 0; }
.footer-link-list li + li { margin-top: 2px; }

.footer-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.81rem; color: #484848; text-decoration: none;
  padding: 4px 0; min-height: 30px;
  transition: color .18s ease, transform .18s ease;
}
.footer-nav-link::before {
  content: '›'; color: rgba(201,168,76,0.35); font-size: 0.9rem;
  transition: color .18s ease, transform .18s ease;
  display: inline-block;
}
.footer-nav-link:hover { color: #C9A84C; transform: translateX(3px); }
.footer-nav-link:hover::before { color: #C9A84C; }

/* Categories — 2-col grid on mobile to shorten list */
@media (max-width: 639px) {
  .footer-cat-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
}

/* ── Contact card ─────────────────────────────────────── */
.footer-contact-card {
  background: linear-gradient(135deg, rgba(201,168,76,0.04), rgba(201,168,76,0.01));
  border: 1px solid rgba(201,168,76,0.12); border-radius: 14px;
  padding: 14px 15px;
}
.footer-contact-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: #3a3a3a; margin: 0 0 10px;
}
.footer-contact-link {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.79rem; font-weight: 600; text-decoration: none;
  padding: 6px 0; transition: color .18s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-contact-wa    { color: #25D366; }
.footer-contact-wa:hover { color: #1aad52; }
.footer-contact-email { color: #C9A84C; }
.footer-contact-email:hover { color: #E6C060; }

/* ── Bottom bar ───────────────────────────────────────── */
.footer-bottom-inner {
  max-width: 82rem; margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.75rem; text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row; justify-content: space-between;
    gap: 1rem; text-align: left;
  }
  .footer-copyright-text { order: 2 !important; }
}

.footer-legal-link {
  font-size: 0.7rem; color: #2e2e2e; text-decoration: none;
  transition: color .18s ease;
}
.footer-legal-link:hover { color: #666; }

/* ═══════════════════════════════════════════════════════════
   v41 — UNIVERSAL CROSS-DEVICE HARDENING (final safety net)
   iPhone / iOS · Android · tablets · Windows desktop. Additive only —
   complements all the responsive rules above; never overrides layout.
═══════════════════════════════════════════════════════════ */

/* Long words / URLs / titles can never overflow their container */
h1, h2, h3, h4, p, a, li, td, th,
.section-title, .brand-name, .qty-highlight, .bc-card, .mt-card {
  overflow-wrap: break-word;
}

/* Media & embeds always fit the screen (belt-and-suspenders) */
img, video, iframe, svg, canvas { max-width: 100%; }

/* Landing templates stay tidy & overflow-free on every screen */
.bc-wrap, .mt { max-width: 100%; overflow-x: hidden; }
.bc-wrap .bc-card, .mt .mt-card { min-width: 0; }
#bcCountdown, #mtCountdown, #countdown { flex-wrap: wrap; }

/* Data tables scroll instead of breaking the page on phones */
@media (max-width: 640px) {
  .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Tame the very largest hero headings on small phones */
@media (max-width: 380px) {
  .bc-wrap h1, .mt h1 { font-size: 2rem !important; line-height: 1.14 !important; }
  .bc-wrap h2, .mt h2 { font-size: 1.7rem !important; }
}

/* Comfortable 44px tap targets on touch devices (phones/tablets) */
@media (hover: none) and (pointer: coarse) {
  .nav-icon-btn, .sidebar-link, .footer-nav-link,
  .btn-primary, .btn-secondary, .bc-cta, .mt-cta, .mt-cta2 { min-height: 44px; }
}

/* iOS: every fixed bottom bar clears the home indicator / notch */
.bc-wrap .fixed.bottom-0, .mt .fixed.bottom-0,
.bc-wrap [style*="bottom:0"], .mt [style*="bottom:0"] {
  padding-bottom: max(11px, env(safe-area-inset-bottom)) !important;
}

/* Ultra-wide desktop: keep content from stretching edge-to-edge */
@media (min-width: 1800px) {
  .bc-wrap > section > div, .mt > section > div { margin-left: auto; margin-right: auto; }
}

/* Brand tagline under the logo — ALWAYS visible (mobile + desktop), sized to fit */
.nav-brand-tagline {
  display: block !important;
  font-size: clamp(0.34rem, 1.7vw, 0.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62vw;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTER-SMOOTH POLISH (v43)
   Sits on top of the existing smoothness layer (passive listeners,
   GPU transforms, smooth-scroll, reduced-motion guards). Adds only the
   missing finishing touches: crisper text, clean anchor landings, and
   tactile "press" feedback on everything you tap. All transform/opacity
   based, so nothing here can trigger a layout reflow or jank a scroll.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 ─ Crisper, lighter font rendering. On WebKit/Blink (most phones)
       antialiased is also a touch cheaper to paint than the default
       sub-pixel AA, so text stays sharp AND scrolls smoothly. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2 ─ Anchor jumps & "scroll to buy" CTAs land just below the sticky
       navbar instead of tucking behind it. scroll-padding works for
       both #hash links and JS scrollIntoView(). */
html { scroll-padding-top: 84px; }

/* 3 ─ Tactile press: tap a card / thumb / link and it gently gives,
       then springs back — the single biggest "feels responsive" win.
       transform-only (no reflow); buttons keep their own :active rules. */
.product-card,
.gallery-grid-img,
.nav-icon-btn,
.account-avatar { transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease, opacity 0.18s ease; }
.product-card:active   { transform: translateY(-2px) scale(0.985); }
.gallery-grid-img:active { transform: scale(0.985); }

/* Gallery preview images (templates 2/3 + product page): buttery hover lift */
.gallery-grid-img:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 30px rgba(0,0,0,0.45); }

/* The selected thumbnail in the Classic gallery gets a clear gold ring */
.gallery-thumb { transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease; }
.gallery-thumb:hover  { transform: scale(1.03); }
.gallery-thumb:active { transform: scale(0.97); }
.gallery-thumb.active { outline: 2px solid #C9A84C; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(201,168,76,0.15); }

/* 4 ─ Smooth, consistent easing for plain links + a quick dim on tap.
       Specific component rules (.btn-primary etc.) are more specific and
       still win, so this only touches links that had no transition. */
a { transition: color 0.18s ease, opacity 0.16s ease; }
a:active { opacity: 0.78; }

/* 5 ─ iOS momentum scrolling for the horizontal rows (categories,
       trending, any overflow-x scroller) so they glide instead of stick. */
.overflow-x-auto,
[class*="scroll-track"],
[class*="-scroll"] { -webkit-overflow-scrolling: touch; }

/* Honour reduced-motion: drop the press/hover transforms entirely */
@media (prefers-reduced-motion: reduce) {
  .product-card:active,
  .gallery-grid-img:active,
  .gallery-grid-img:hover,
  .gallery-thumb:hover,
  .gallery-thumb:active { transform: none; }
  html { scroll-padding-top: 0; }
}