/* ============================================================
    YARZ — Premium Men's Fashion E-Commerce  v3.6
    Design System: Light Cream + Purple | Desktop-First 1280px
    Aesthetic: High-end minimalist editorial, luxury fashion
    ============================================================ */

/* ============================================================
   ✅ v12.0: iPhone Notch + Dynamic Island Premium Integration
   --------------------------------------------------------
   Supports ALL iPhone models — past, present, and future:
     • iPhone X / Xs / Xs Max / XR    — top notch (~44px)
     • iPhone 11 / 11 Pro / 11 Pro Max — top notch (~44px)
     • iPhone 12 / 12 mini / 12 Pro / 12 Pro Max — notch (~47px)
     • iPhone 13 / 13 mini / 13 Pro / 13 Pro Max — notch (~47px)
     • iPhone 14 / 14 Plus              — notch (~47px)
     • iPhone 14 Pro / 14 Pro Max       — Dynamic Island (~59px)
     • iPhone 15 / 15 Plus              — Dynamic Island
     • iPhone 15 Pro / 15 Pro Max       — Dynamic Island
     • iPhone 16 / 16 Plus / 16 Pro / 16 Pro Max — Dynamic Island
     • Future models (auto-handled via env() — no code change needed)
   --------------------------------------------------------
   Strategy: The element that sits at the very top of the
   viewport (announcement-bar if active, otherwise site-header)
   absorbs the safe-area-inset-top padding. Its background
   color paints behind the notch / Dynamic Island, making it
   look like a native iOS app — premium and seamless.
============================================================ */

/* CSS variables for safe-area insets (with fallbacks) */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  /* ✅ v14.4: These now reference the same vars the header/announcement
     actually use, so admin theme changes auto-sync to the notch background.
     No more visible seam between status bar and header. */
  --header-bg-color: var(--bg-secondary, #FFFDF8);
  --announcement-bg-color: var(--purple-900, #2A1E3E);
}

@supports (padding: env(safe-area-inset-top)) {

  /* ── 1. Body: NO horizontal padding (header/content handle it themselves) ── */
  body {
    /* Side insets are applied at content level so header bg can extend full width */
    padding-left: 0;
    padding-right: 0;
  }

  /* ── 2. Announcement bar — when visible, owns the notch area ── */
  .announcement-bar {
    /* Pull bar to viewport edges (negate any body padding) */
    margin-left:  calc(-1 * var(--safe-left));
    margin-right: calc(-1 * var(--safe-right));
    /* Top padding pushes content below notch / Dynamic Island */
    padding-top: var(--safe-top);
    /* Side padding keeps text away from rounded corners / side notches in landscape */
    padding-left:  calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }

  /* ── 3. Site header — handles notch ONLY when announcement bar is NOT showing ── */
  .site-header {
    box-sizing: content-box;
    /* Pull header to viewport edges so its background covers side notches */
    margin-left:  calc(-1 * var(--safe-left));
    margin-right: calc(-1 * var(--safe-right));
    /* When announcement bar is hidden, header absorbs the notch padding */
    padding-top: var(--safe-top);
    /* Smooth transition when announcement bar toggles */
    transition: padding-top 0.25s ease, box-shadow var(--transition);
  }

  /* When announcement bar is ACTIVE, header drops its notch padding
     (announcement bar handles it instead — prevents double padding) */
  body.has-announcement .site-header,
  .announcement-bar.active ~ .site-header,
  .announcement-bar.active + .site-header {
    padding-top: 0;
  }

  /* Inner content of header gets the side insets so logo/icons don't hit the corners */
  .site-header .header-inner {
    padding-left:  calc(24px + var(--safe-left));
    padding-right: calc(24px + var(--safe-right));
  }

  /* ── 4. Main content respects side insets (landscape notch protection).
       v15.13: removed .hero-section from this list — the hero is now
       full-bleed (100vw) and uses object-fit:cover, so we don't want any
       horizontal padding on it. Other selectors keep the notch padding. */
  main,
  .container,
  .site-footer,
  .product-grid-wrapper {
    padding-left:  var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* ── 5. Floating bottom elements clear the home indicator ── */
  .floating-whatsapp-btn,
  .live-chat-buttons {
    bottom: calc(20px + var(--safe-bottom)) !important;
  }
  .site-footer .footer-bottom {
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  /* ── 6. Mobile drawer / cart / checkout — full-screen overlays
     Get the safe-area on top AND bottom so close buttons and CTAs don't hide
     under notch or home indicator ── */
  .mobile-menu-drawer,
  .cart-drawer,
  .checkout-modal,
  .mobile-search-modal {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }

  /* ── 7. Status bar background fallback
     A 1px-tall pseudo element pinned to the top — paints behind the notch
     during scroll transitions when neither announcement nor header is at top
     (e.g., briefly during page transitions). Tinted to match header. ── */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--safe-top);
    background: var(--header-bg-color);
    z-index: 99; /* below header (100), above page content */
    pointer-events: none;
    transition: background-color 0.25s ease;
  }
  /* When announcement bar is showing, the filler matches its color */
  body.has-announcement::before {
    background: var(--announcement-bg-color);
  }
  /* On dark / scrolled state, can be tinted differently */
  body.dark::before {
    background: rgba(20, 20, 30, 0.96);
  }
}

/* ============================================================
   Landscape orientation — extra polish for side notches
   ✅ v14.4: BOTH left and right side fillers (notch is on left
   when phone rotated counter-clockwise, on right when rotated
   clockwise — we cover both so the design is symmetric).
   ============================================================ */
@media (orientation: landscape) and (max-device-width: 932px) {
  @supports (padding: env(safe-area-inset-left)) {
    /* Left-side filler */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: var(--safe-left);
      background: var(--header-bg-color);
      z-index: 99;
      pointer-events: none;
    }
    /* Right-side filler (uses <html>::after since body::after is taken) */
    html::after {
      content: '';
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      width: var(--safe-right);
      background: var(--header-bg-color);
      z-index: 99;
      pointer-events: none;
    }
  }
}

/* ============================================================
   ✅ v14.4: IN-APP BROWSER POLISH
   ────────────────────────────────────────────────────────────
   Facebook / Instagram / TikTok / Messenger in-app browsers
   have toolbars that consume vertical space differently than
   Chrome / Safari. boot.js tags <html> with `.in-app-browser`
   when it detects them, and also publishes:
     --vh = 1% of the *visible* viewport height (resize-aware)
     --kb = keyboard inset when an input is focused
   We use these to keep the floating WhatsApp button + sticky
   buy bar safely above their bottom toolbar AND above any
   on-screen keyboard.
   Future-proof: env(safe-area-inset-bottom) handles iPhone
   home indicator (X / 11 / 12 / 13 / 14 / 15 / 16 / 17+),
   --kb handles software keyboards on every platform, and
   the in-app extra padding handles app toolbars.
   ============================================================ */
html.in-app-browser .floating-whatsapp-btn {
  /* Lift above FB/IG bottom toolbar (typically 44-50px) */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 14px) !important;
}
/* ✅ v14.4: Higher-specificity override so admin's float-pos custom offset
   (`var(--yarz-float-offset)`) still gets the +14px in-app toolbar lift.
   Without this, FB ad pages with admin-positioned floats would hide
   under the browser toolbar. */
html.in-app-browser body[data-float-pos] .floating-whatsapp-btn,
html.in-app-browser body[data-float-pos] #floating-whatsapp-btn {
  bottom: calc(var(--yarz-float-offset, 20px) + env(safe-area-inset-bottom, 0px) + 14px) !important;
}
html.in-app-browser .sticky-buy-bar {
  /* Pad bottom so the CTA isn't hidden behind the in-app toolbar */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + 10px);
}
/* When a software keyboard is open, push fixed-bottom UI above it */
html.in-app-browser .floating-whatsapp-btn,
html.in-app-browser .sticky-buy-bar {
  transform: translateY(calc(-1 * var(--kb, 0px)));
  transition: transform 0.2s ease;
}
/* Smooth scroll behavior — Instagram in-app sometimes janks */
html.in-app-browser body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ===== v3.7: GPU-accelerated scrolling (smoother on iPhone) ===== */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* ===== v5.5: Hide scrollbar on mobile (more screen space) ===== */
@media (max-width: 768px) {
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar {
    display: none;
  }
}


/* Mobile hero banner — v15.13: image fills the slide (height:100%);
   the .hero-section wrapper owns the aspect-ratio (4/5 ≤768, 1/1 ≤400). */
@media (max-width: 600px) {
  :root {
    --header-height: 40px; /* Slimmer mobile header */
  }
  .hero-slider .slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    background: var(--cream-200);
  }
  .hero-slider .slide > div {
    height: 100%;
  }
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: auto;
  /* ✅ v15.53: Hard guard against horizontal page scroll on mobile.
     Without this, any overflowing child (e.g. PDP thumbnails strip with 6
     images, hero slider track in transit, free-shipping bar marquee) can
     push the body right and crop the main image's right edge. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

html {
  overflow-x: hidden;
}

.container {
  max-width: 100%;
  overflow: hidden;
}

:root {
  /* Cream Palette */
  --cream-50: #FFFDF8;
  --cream-100: #FBF8F1;
  --cream-200: #F5F0E6;
  --cream-300: #EDE5D5;
  --cream-400: #DDD3BF;
  --cream-500: #C9BBAA;

  /* Purple Palette */
  --purple-50: #F6F3FA;
  --purple-100: #EDE8F5;
  --purple-200: #D9CEE9;
  --purple-300: #BBA8D6;
  --purple-400: #9B7DBF;
  --purple-500: #7B5EA7;
  --purple-600: #634A8E;
  --purple-700: #4E3A72;
  --purple-800: #634A8E;
  --purple-900: #2A1E3E;

  /* Functional */
  --bg-primary: var(--cream-100);
  --bg-secondary: var(--cream-50);
  --bg-card: #FFFFFF;
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A5A;
  --text-muted: #4A4A5A;
  --text-light: #555566;
  --border-color: #E8E4DC;
  --border-light: #F0ECE4;
  --accent: var(--purple-600);
  --accent-hover: var(--purple-700);
  --accent-light: var(--purple-50);
  --accent-subtle: var(--purple-100);
  --link-color: var(--accent);
  /* v14.3: Sale price is now solid black for premium readability.
     Admin can override via Website Controls → Theme Sale Price.
     Legacy red (#C0392B) settings auto-skipped in app.js runtime. */
  --sale-price: #1A1A1A;
  --footer-bg: #1A1A2E;
  --footer-text: rgba(255, 255, 255, 0.7);
  --success: #2D7A4F;
  --danger: #C0392B;
  --warning: #D4910A;

  /* Typography */
  --font-body: 'Inter', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-bengali: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-logo: 'Inter', sans-serif;

  /* Spacing */
  --container-max: 1280px;
  --header-height: 52px;
  --section-gap: 48px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ✅ v17.5 PHASE 7: Z-index design tokens. Use these instead of magic
     numbers so stacking-order bugs are easy to spot. Migration is
     incremental — existing numeric z-index values still work, but new
     styles should pull from the scale below. */
  --z-base:      1;
  --z-raised:   10;   /* sticky header, sticky CTAs */
  --z-dropdown: 100;  /* menus, tooltips */
  --z-overlay:  500;  /* modal backdrop */
  --z-modal:    600;  /* modal content */
  --z-toast:    900;  /* transient notifications */
  --z-tooltip:  1000; /* highest — must sit above everything */
  --z-skiplink: 9999; /* accessibility skip link */
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-width: auto;
  margin: 0;
  padding: 0;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

/* ===== CONTAINER ===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
  background: var(--purple-900);
  color: #FFFFFF;
  text-align: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.announcement-bar.active {
  max-height: 40px;
  padding: 6px 16px;
}

.announcement-bar span {
  opacity: 0.9;
}

/* Marquee scroll for long announcement text */
.announcement-bar.has-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.announcement-bar.has-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: announcement-marquee 18s linear infinite;
}

@keyframes announcement-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* ===== HEADER ===== */
.site-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  transition: box-shadow var(--transition);
  display: flex;
  align-items: center;
}

.site-header.scrolled {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo .logo-text {
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1;
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.main-nav a {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
  background: var(--accent-light);
}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
}

.dropdown-arrow {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--bg-secondary, #FFFDF8);
  border: 1px solid var(--border-color, #E8E4DC);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 200;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (min-width: 769px) {
  .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  border-radius: 0;
}

.nav-dropdown-menu a:hover {
  background: var(--accent-light, #F3EEFF);
  color: var(--accent, #634A8E);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 350;
  margin-left: auto;
  margin-right: 8px;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: left center;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(1px, -1px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(1px, 1px);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  position: relative;
}

.header-icon-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.header-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  display: none;
}

.cart-count.visible {
  display: flex;
}

/* ===== HERO BANNER ===== */
.hero-section {
  width: 100%;
  background: var(--cream-200);
  overflow: hidden;
  position: relative;
  margin-left: 0;
  margin-right: 0;
}

.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-slider .slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hero Image — v15.13: slide fills its parent (.hero-slider absolute fill).
   Aspect-ratio is now owned by .hero-section (1406:738 desktop, 4:5 mobile,
   1:1 tiny phones) via the inline <style id="yarz-banner-v15-13-fullwidth">
   block in index.html. The slide itself is content-agnostic. */
.hero-slider .slide {
  width: 100%;
  display: block;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--cream-200);
  will-change: opacity, transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero-slider .slide.active {
  display: block;
}

/* Hero Image — fills its slide container (which has the aspect-ratio) */
.hero-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background-color: var(--cream-200);
  image-rendering: high-quality;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

@media (min-width: 1100px) {
  .hero-slider .slide img {
    width: 100%;
    height: 100%;
  }
}

/* Drag/swipe affordance — prevent native image-drag from hijacking touch swipe */
.hero-slider {
  cursor: grab;
  -webkit-user-select: none;user-select: none;
  -webkit-user-select: none;
}
.hero-slider:active { cursor: grabbing; }
.hero-slider .slider-track {
  pointer-events: auto;
}

.hero-slider .slide a {
  display: block;
  line-height: 0;
  position: relative;
}

/* Banner Overlay - High Specificity to override index.html rules */
html body #hero-slider .slide .banner-overlay,
.banner-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  z-index: 2;
}

.banner-content {
  text-align: center;
  color: var(--banner-text-color, #ffffff);
  max-width: 720px;
  padding: 24px;
  /* v11: drop shadow for legibility on any image */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.banner-title {
  /* v11: Premium classic typography — large, elegant, serif */
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  font-weight: 700;
  margin: 0;
  font-family: 'Playfair Display', 'Instrument Serif', Georgia, serif;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  color: inherit; /* uses --banner-text-color from .banner-content */
  font-style: italic;
}

.banner-subtitle {
  font-size: 1.05rem;
  margin-top: 12px;
  margin-bottom: 0;
  opacity: 0.92;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
}

/* v11: "Shop Now" button removed — class kept only for backwards-compat (hidden) */
.banner-cta { display: none !important; }

/* ============================================================
   v11: RELATED PRODUCTS — "You May Also Like" (4 per level, infinite)
============================================================ */
.related-products-section {
  padding: 36px 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.related-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.related-heading-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--border-color, #E8E4DC);
}
.related-heading h3 {
  font-family: 'Playfair Display', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 3vw, 26px);
  color: var(--text-primary, #1A1A2E);
  margin: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.related-card {
  background: #fff;
  border: 1px solid var(--border-light, #F0ECE4);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--accent, #634A8E);
}
.related-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--bg-card, #f8f6f1) center/cover no-repeat;
  overflow: hidden;
}
.related-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.related-card:hover .related-card-img img {
  transform: scale(1.04);
}
.related-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--danger, #C0392B);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.related-card-body {
  padding: 12px 12px 14px;
}
.related-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1A1A2E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.related-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.related-card-sale {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent, #634A8E);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  letter-spacing: -0.01em;
}
.related-card-reg {
  font-size: 11px;
  color: var(--text-muted, #6B6B7A);
  text-decoration: line-through;
}

/* Mobile: 2-column grid */
@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .related-products-section {
    padding: 28px 12px 20px;
  }
  .related-heading h3 {
    font-size: 18px;
  }
  .related-heading-line {
    max-width: 50px;
  }
}
@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .related-card-name { font-size: 12px; }
  .related-card-sale { font-size: 14px; }
}

/* v15.13: Placeholder/overlay div inside slide fills the slide entirely.
   Aspect-ratio is owned by the .hero-section wrapper, so this just stretches. */
.hero-slider .slide > div {
  width: 100%;
  height: 100%;
}

/* Slider Controls */
.slider-nav {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.slider-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.slider-dot.active {
  background: #FFFFFF;
  width: 18px;
  border-radius: 3px;
}

.slider-arrow {
  display: none !important; /* Hidden as requested */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all var(--transition-fast);
  border: none;
  opacity: 0;
}

.hero-section:hover .slider-arrow {
  opacity: 1;
}

.slider-arrow:hover {
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
}

.slider-arrow.prev {
  left: 16px;
}

.slider-arrow.next {
  right: 16px;
}

.slider-arrow svg {
  width: 16px;
  height: 16px;
}

/* ===== SECTION HEADERS ===== */
.section-heading {
  text-align: center;
  margin-bottom: 28px;
}

.section-heading h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--purple-900);
  letter-spacing: 0.02em;
}

.section-heading p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.section-heading .line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 10px auto 0;
  border-radius: 1px;
}

/* ===== DYNAMIC CATEGORY CARD GRID (v10.1) ===== */
/* Premium category cards like reference design — portrait images with name overlay */
.dynamic-category-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px; /* Space for scrollbar or shadow */
  scrollbar-width: none; /* Firefox */
}
.dynamic-category-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.dynamic-category-grid.expanded {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
}
.dynamic-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 0 4px;
}
.dynamic-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.02em;
}
.dynamic-section-view-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.dynamic-section-view-more:hover {
  background: var(--surface-1);
}

.dynamic-category-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  background: var(--surface-1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: dcc-fadeIn 0.5s ease forwards;
  animation-delay: calc(var(--card-index, 0) * 0.08s);
  opacity: 0;
  flex: 0 0 200px;
}
.dynamic-category-grid.expanded .dynamic-category-card {
  flex: 0 0 calc(25% - 12px);
  max-width: 250px;
}

@keyframes dcc-fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dynamic-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}

.dynamic-category-card:active {
  transform: scale(0.98);
}

.dcc-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dcc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.dynamic-category-card:hover .dcc-image img {
  transform: scale(1.06);
}

.dcc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2, #f0f0f0) 100%);
  color: var(--text-muted);
  opacity: 0.5;
}

.dcc-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  z-index: 1;
}

.dcc-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Tablet: 3 columns */
@media (max-width: 992px) {
  .dynamic-category-grid {
    gap: 14px;
  }
  .dynamic-category-card {
    flex: 0 0 160px;
  }
  .dynamic-category-grid.expanded .dynamic-category-card {
    flex: 0 0 calc(33.333% - 10px);
  }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
  .dynamic-category-grid {
    gap: 12px;
  }
  .dynamic-category-card {
    flex: 0 0 130px;
  }
  .dynamic-category-grid.expanded .dynamic-category-card {
    flex: 0 0 calc(50% - 6px);
  }
  .dynamic-category-card {
    border-radius: 10px;
  }
  .dcc-name {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  .dcc-overlay {
    padding: 16px 12px 12px;
  }
}

/* Small mobile: still 2 columns but tighter */
@media (max-width: 400px) {
  .dynamic-category-grid {
    gap: 8px;
  }
  .dcc-name {
    font-size: 11px;
  }
  .dcc-overlay {
    padding: 12px 10px 10px;
  }
}

/* ===== CATEGORY TABS ===== */
.category-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 4px;
  margin-bottom: 24px;
}

.category-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.category-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.category-tab.active {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

/* ===== PRODUCT GRID ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 🚀 CRITICAL FIX: Disable native smooth scrolling on the JS-animated container */
/* This prevents S22 (120Hz) jitter, while CSS is safe and doesn't break old Android phones */
#dynamic-category-scroll-grid {
  scroll-behavior: auto !important;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
  /* v13.0 PERF: Removed will-change (it was always on, draining GPU memory).
     Browser will create a layer naturally on hover via :hover transform. */
  contain: layout style;
}

.product-card:hover {
  border-color: var(--border-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Product Image — v3.7 HIGH-QUALITY (no blur, no aggressive zoom) */
.product-card .card-image { position: relative; width: 100%; padding-top: 125%; overflow: hidden; background: var(--cream-200); }

.product-card .card-image img {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 0.5s ease;
  display: block;
  /* v9.8: Smooth downscale — prevents oversharpened look on small cards */
  image-rendering: auto;
}

.product-card:hover .card-image img {
  transform: scale(1.02);   /* v3.7: subtle hover, no aggressive zoom */
}

/* ══════════════════════════════════════════════════════════
   Badge — Eye-Catching Premium Designs (Each Unique)
   ══════════════════════════════════════════════════════════ */
.product-badge {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px 6px 12px;
  z-index: 2;
  line-height: 1;
  overflow: hidden;
  border-radius: 0 0 12px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease;
}

/* Shimmer shine sweep effect for all badges */
.product-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: badgeShimmer 3s ease-in-out infinite;
}

.product-card:hover .product-badge {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* ── NEW ── Purple ribbon with sparkle */
.product-badge.new {
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #7C3AED 100%);
  background-size: 200% 200%;
  animation: badgeGradientShift 4s ease infinite;
  color: #fff;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── SALE / CLEARANCE ── Bold red flag with slash */
.product-badge.sale {
  background: linear-gradient(135deg, #FF1744 0%, #D50000 100%);
  color: #fff;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  animation: badgeBounce 2s ease-in-out infinite;
}

/* ── HOT ── Fiery orange-red with glow pulse */
.product-badge.hot {
  background: linear-gradient(135deg, #FF4500 0%, #FF8C00 50%, #FFD700 100%);
  background-size: 200% 200%;
  animation: badgeFireShift 2s ease infinite;
  color: #fff;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 10px;
  text-shadow: 0 1px 4px rgba(255,69,0,0.4);
  box-shadow: 0 3px 14px rgba(255,69,0,0.35);
}

/* ── BEST SELLER ── Rich emerald with gold star accent */
.product-badge.best {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #fff;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(255,215,0,0.5);
  border-right: 2px solid rgba(255,215,0,0.5);
}

/* ── LIMITED EDITION ── Luxurious deep purple + gold text */
.product-badge.limited {
  background: linear-gradient(135deg, #1A0533 0%, #2D1B69 40%, #4A2D8A 100%);
  color: #F5D77A;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px rgba(245,215,122,0.4);
  border-bottom: 2px solid rgba(245,215,122,0.3);
  border-right: 2px solid rgba(245,215,122,0.3);
  animation: badgeLuxuryPulse 3s ease-in-out infinite;
}

/* ── TRENDING ── Vivid electric blue with arrow feel */
.product-badge.trending {
  background: linear-gradient(135deg, #0EA5E9 0%, #6366F1 50%, #8B5CF6 100%);
  background-size: 200% 200%;
  animation: badgeGradientShift 3s ease infinite;
  color: #fff;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── PREMIUM ── Black + Gold masterpiece */
.product-badge.premium {
  background: linear-gradient(135deg, #0A0A0A 0%, #1C1C2E 40%, #2A2A3E 100%);
  color: #E8C547;
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-shadow: 0 0 10px rgba(232,197,71,0.35);
  border-bottom: 2px solid rgba(232,197,71,0.35);
  border-right: 2px solid rgba(232,197,71,0.35);
}
.product-badge.premium::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232,197,71,0.25) 50%,
    transparent 100%
  );
}

/* ── SOLD OUT ── Frosted glass with strikethrough feel */
.product-badge.soldout {
  background: linear-gradient(135deg, rgba(50,50,60,0.92) 0%, rgba(80,80,90,0.92) 100%);
  color: rgba(255,255,255,0.75);
  border-radius: 0 0 14px 0;
  padding: 7px 16px 7px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.product-badge.soldout::after {
  display: none; /* No shimmer on sold out */
}

/* ══════ Badge Animations ══════ */
@keyframes badgeShimmer {
  0% { left: -100%; }
  50%, 100% { left: 150%; }
}

@keyframes badgeGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes badgeFireShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes badgeLuxuryPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(245,215,122,0.3); }
  50% { text-shadow: 0 0 16px rgba(245,215,122,0.6); }
}

/* Out of Stock Overlay */
.product-card.out-of-stock .card-image::after {
  content: 'SOLD OUT';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Quick View */
.quick-view-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--transition-fast);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.quick-view-btn svg {
  width: 14px;
  height: 14px;
}

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

.quick-view-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Card Info */
.card-info {
  padding: 10px 12px 12px;
}

.card-info .product-category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.card-info .product-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--purple-900);
  line-height: 1.25;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.card-info .price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.card-info .sale-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--purple-800);
}

.card-info .regular-price {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.card-info .discount-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--danger);
  margin-left: auto;
}

/* Size Dots */
.card-sizes {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}

.size-dot {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 5px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  line-height: 1.3;
}

.size-dot.available {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
}

.size-dot.out {
  opacity: 0.35;
  text-decoration: line-through;
}

/* ===== SEARCH BAR — PREMIUM GLASSMORPHISM REDESIGN ===== */
@keyframes searchSlideDown {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes searchOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes searchPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99,71,142), 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 99,71,142), 0.12); }
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(20px) saturate(1.8);backdrop-filter: blur(20px) saturate(1.8);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 0 16px;
  padding-top: min(18vh, 120px);
  animation: searchOverlayFadeIn 0.25s ease-out;
}

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

.search-box {
  background: rgba(255, 255, 255, 0.45);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(40px) saturate(2);backdrop-filter: blur(40px) saturate(2);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  overflow: hidden;
  animation: searchSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.25);
}

.search-input-wrap svg {
  width: 20px;
  height: 20px;
  color: var(--accent, #634A8E);
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.search-input-wrap:focus-within svg {
  opacity: 1;
  transform: scale(1.1);
}

.search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  letter-spacing: 0.01em;
}

.search-input-wrap input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

/* Close button inside search */
.search-input-wrap .search-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-input-wrap .search-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  transform: rotate(90deg);
}

.search-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}

.search-results::-webkit-scrollbar {
  width: 5px;
}
.search-results::-webkit-scrollbar-track {
  background: transparent;
}
.search-results::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 2px;
}

.search-result-item:hover {
  background: rgba(var(--accent-rgb, 99,71,142), 0.06);
  transform: translateX(4px);
}

.search-result-item:active {
  transform: translateX(4px) scale(0.98);
}

.search-result-item img {
  width: 48px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--cream-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.search-result-item:hover img {
  transform: scale(1.05);
}

.search-result-item .sr-info {
  flex: 1;
  min-width: 0;
}

.search-result-item .sr-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-item .sr-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #634A8E);
  margin-top: 3px;
}

.search-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.search-empty::before {
  content: '🔍';
  display: block;
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--footer-bg);
  /* ✅ v15.89 (per owner spec): Footer text is HARDCODED PURE WHITE.
     No variable, no theme linkage, no auto-contrast. The owner explicitly
     requested that footer text never change with any theme — only the
     background follows the preset. Every preset's footer-bg is dark
     enough (audited: minimum 11.31:1 contrast on Sage Botanical) for
     pure white text to be bulletproof readable. !important locks this
     against any later override (cream block, theme palette, custom CSS). */
  color: #FFFFFF !important;
  padding: 40px 0 0;
  margin-top: var(--section-gap);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-col h4 {
  /* v15.89: Hardcoded pure white. No variable. No theme linkage.
     !important guards against any cream/theme/custom-CSS override. */
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.footer-col p {
  /* v15.89: Hardcoded white (was rgba alpha — could fade against any bg).
     Owner spec: footer text is always pure white, no theme linkage. */
  color: #FFFFFF !important;
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 12px;
}

.footer-col .footer-brand {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.25em;
  /* v15.89: Hardcoded pure white. No variable. No theme linkage. */
  color: #FFFFFF !important;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  font-size: 12px;
  padding: 3px 0;
  /* v15.89: Hardcoded pure white. No variable. No theme linkage. */
  color: #FFFFFF !important;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  /* v15.89: Hover stays white but slightly brighter feel via text-shadow.
     Color stays #FFFFFF so no theme can shift it. */
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}


/* ===== v9.8: Compact horizontal social icons ===== */
.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  /* v15.89: Hardcoded white. Was `color: inherit` which would inherit
     correctly today (footer is white) but hover used var(--accent) and
     could shift with theme — lock both to pure white. */
  color: #FFFFFF !important;
  text-decoration: none;
  font-size: 13px;
}

.footer-contact-link:hover {
  /* v15.89: Stays white — only an underline conveys the hover, no
     color shift, no theme linkage. */
  color: #FFFFFF !important;
  text-decoration: underline;
}

.footer-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.footer-social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.footer-social-icons a:hover {
  background: var(--brand-color, var(--accent));
  border-color: var(--brand-color, var(--accent));
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.footer-social-icons a svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  /* v15.89: Decoupled from theme — pure white text + subtle white rule. */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px 24px;
  margin-top: 32px;
  text-align: center;
  font-size: 11px;
  color: #FFFFFF !important;
}

.footer-bottom a {
  /* v15.89: Hardcoded pure white. */
  color: #FFFFFF !important;
  display: inline;
  padding: 0;
}

.footer-bottom a:hover {
  /* v15.89: Stays white — only the underline emphasizes the hover. */
  color: #FFFFFF !important;
  text-decoration: underline;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-outline {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn-outline:hover {
  background: var(--accent);
  color: #FFFFFF;
}

.btn-ghost {
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 10px 24px;
  font-size: 13px;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 11px;
}

.btn-block {
  width: 100%;
}

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

/* ===== PRODUCT DETAIL ===== */
.product-detail-section {
  padding-top: 24px;
}

.pd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.pd-gallery {
  position: relative;
}

.pd-main-image {
  width: 100%;
  /* ✅ v4.0 FIX: No fixed aspect-ratio — image shows FULL without any cropping */
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream-200);
  margin-bottom: 10px;
}

.pd-main-image img {
  display: block;
  width: 100%;
  height: auto;               /* ✅ v4.0: auto height — shows full image, zero crop */
  object-fit: contain;
  object-position: center center;

  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pd-thumbnails {
  display: flex;
  gap: 8px;
}

.pd-thumb {
  width: 64px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
  background: var(--cream-200);
}

.pd-thumb.active {
  border-color: var(--accent);
}

.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* v3.7: thumbnails also full-fit */
  object-position: center center;
  background: var(--cream-100);
}

/* Detail Info */
.pd-info {
  padding-top: 8px;
}

.pd-breadcrumb {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.pd-breadcrumb a {
  color: var(--text-muted);
}

.pd-breadcrumb a:hover {
  color: var(--accent);
}

.pd-breadcrumb span {
  margin: 0 6px;
}

.pd-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.pd-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.pd-sale-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.pd-regular-price {
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pd-discount {
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  background: #FDF2F2;
  padding: 2px 8px;
  border-radius: 3px;
}

.pd-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Size Selector */
.pd-sizes {
  margin-bottom: 20px;
}

.pd-sizes .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.size-options {
  display: flex;
  gap: 6px;
}

.size-btn {
  width: 44px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.size-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.size-btn.selected {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.size-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quantity */
.pd-qty {
  margin-bottom: 20px;
}

.pd-qty .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.qty-controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: fit-content;
  overflow: hidden;
}

.qty-btn {
  width: 36px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.qty-btn:hover {
  background: var(--cream-200);
}

.qty-value {
  width: 44px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

/* Action Buttons */
.pd-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.pd-actions .btn {
  padding: 12px 24px;
  font-size: 13px;
}

/* Delivery Info */
.pd-delivery-info {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.pd-delivery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.pd-delivery-row svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.pd-delivery-row+.pd-delivery-row {
  border-top: 1px solid var(--border-light);
}

/* Size Chart */
.size-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}

.size-chart-table th {
  background: var(--cream-200);
  padding: 6px 10px;
  font-weight: 600;
  text-align: left;
}

.size-chart-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
}

/* ===== CART SIDEBAR ===== */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.cart-overlay.active {
  display: block;
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-card);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transition: right var(--transition);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

.cart-drawer.open {
  right: 0;
}

/* ✅ v15.46 FIX: When the cart drawer is OPEN, lift it ABOVE the checkout
   modal-overlay (z-index 400). This is a defense-in-depth layer for the
   cart-vs-checkout bug — even if closeCheckout() somehow fails or another
   modal stays active, an opened cart drawer must always be visible and
   clickable. The .open class is only applied when JS explicitly opens
   the drawer, so this never affects normal modal-only flows. */
.cart-drawer.open { z-index: 450; }
.cart-overlay.active { z-index: 449; }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.cart-header h3 {
  font-size: 15px;
  font-weight: 700;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  /* ✅ v15.58: Prevent inner cart scroll from chaining to body scroll on
     mobile (which triggers URL-bar show/hide and consequent resize events
     that used to auto-close the drawer). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cart-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
}

.cart-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.cart-empty p {
  font-size: 13px;
}

.cart-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.cart-item-img {
  width: 60px;
  height: 75px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream-200);
  flex-shrink: 0;
}

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

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

.cart-item-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cart-item-price {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.cart-item-remove {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 4px;
  cursor: pointer;
}

.cart-item-remove:hover {
  color: var(--danger);
}

.cart-footer {
  padding: 16px 18px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}

/* ============================================================
   ✅ v14.2: PREMIUM TICKET-STYLE COUPON
   ────────────────────────────────────────────────────────────
   Dual-pane voucher: pearl-white "savings" pane on the left
   (with champagne gold accent), dark velvet pane on the right.
   Joined by a ticket-perforation divider with circular notches.
   Aesthetic = Apple gift-card + boutique luxury voucher.
   ────────────────────────────────────────────────────────────
   Hooks preserved: `.coupon-pill` and `.copied` classes still
   work with the existing copyCoupon() / _flashCouponCopied()
   logic in app.js — no JS changes required.
   ────────────────────────────────────────────────────────────
   v14.2 changes:
     • Left pane → pure white + champagne accent (no longer
       blends with cream page background)
     • Subtle gloss shine on the white pane
     • Mobile padding/font sizes tightened (smaller footprint)
     • Bengali helper line under the ticket explains the flow
============================================================ */

.coupon-wrapper {
  margin: 18px 0 8px;
  animation: yarzCouponIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes yarzCouponIn {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── HELPER LINE — small Bengali instruction below the ticket ── */
.coupon-wrapper .ct-helper {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--text-muted, #8A8A9A);
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', 'Inter', sans-serif;
  line-height: 1.5;
  opacity: 0.9;
}

/* The ticket itself — full-width button so the entire surface is tappable */
.coupon-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  align-items: stretch;
  width: 100%;
  min-height: 76px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  /* Soft drop shadow for legibility on cream / white backgrounds */
  filter: drop-shadow(0 6px 16px rgba(42, 30, 62, 0.10))
          drop-shadow(0 1px 2px rgba(42, 30, 62, 0.05));
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.25s ease;
}
.coupon-ticket:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 24px rgba(42, 30, 62, 0.16))
          drop-shadow(0 2px 4px rgba(42, 30, 62, 0.08));
}
.coupon-ticket:active {
  transform: translateY(0) scale(0.995);
  transition-duration: 0.1s;
}

/* ── LEFT PANE: pearl white + champagne accent ────────────────
   No longer cream — the page bg is cream, so we use bright white
   with a subtle champagne-gold gradient sweep so the ticket
   POPS off the page instead of blending in.                   */
.coupon-ticket .ct-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 18px 14px 22px;
  /* Tri-stop white→champagne gradient = subtle metallic shimmer */
  background:
    linear-gradient(135deg,
      #FFFFFF   0%,
      #FFFCF5  40%,
      #F8EFD8 100%);
  /* Inner highlight for paper-like depth */
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-radius: 14px 0 0 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Subtle diagonal gloss shine on the white pane */
.coupon-ticket .ct-left::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 235, 200, 0.35) 48%,
    rgba(255, 245, 220, 0.55) 50%,
    rgba(255, 235, 200, 0.35) 52%,
    transparent 70%);
  transform: rotate(3deg);
  pointer-events: none;
  opacity: 0.9;
}

.coupon-ticket .ct-eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Champagne gold accent ties to the right-pane theme */
  color: #8B6914;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.coupon-ticket .ct-savings {
  font-family: 'Playfair Display', 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--purple-900, #2A1E3E);
  line-height: 1;
  position: relative;
  z-index: 2;
}
.coupon-ticket .ct-savings strong {
  font-weight: 700;
  font-style: italic;
  color: var(--purple-900, #2A1E3E);
}

/* ── DIVIDER: perforated edge with two semicircle notches ── */
.coupon-ticket .ct-divider {
  position: relative;
  width: 14px;
  background: transparent;
}
/* Top + bottom notches — circles cut from cream and dark panes */
.coupon-ticket .ct-divider::before,
.coupon-ticket .ct-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Cream notch matches page bg — looks like the ticket has a hole punched */
  background: var(--bg-primary, #FBF8F1);
  transform: translateX(-50%);
}
.coupon-ticket .ct-divider::before {
  top: -7px;
  box-shadow: inset 0 -1px 0 rgba(42, 30, 62, 0.06);
}
.coupon-ticket .ct-divider::after {
  bottom: -7px;
  box-shadow: inset 0 1px 0 rgba(42, 30, 62, 0.06);
}
/* Vertical dashed line between the notches */
.coupon-ticket .ct-divider {
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 8px,
    rgba(42, 30, 62, 0.18) 8px,
    rgba(42, 30, 62, 0.18) 12px,
    transparent 12px,
    transparent 18px
  );
  background-size: 100% 18px;
  background-repeat: repeat-y;
  background-position: center top;
}

/* ── RIGHT PANE: dark "USE CODE: XXXX" pane ── */
.coupon-ticket .ct-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 18px;
  background: linear-gradient(135deg, #2A1E3E 0%, #634A8E 100%);
  border-radius: 0 14px 14px 0;
  text-align: left;
  color: #fff;
  overflow: hidden;
}

.coupon-ticket .ct-code-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Champagne tint to match the left pane's eyebrow */
  color: #D4A857;
  margin-bottom: 4px;
}

.coupon-ticket .ct-code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FAF6EC;
  /* Subtle text shadow gives the code a printed-on-paper feel */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.coupon-ticket .ct-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
}
.coupon-ticket:hover .ct-action {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.coupon-ticket .ct-action-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── COPIED STATE: green flash on both panes ── */
.coupon-ticket.copied {
  filter: drop-shadow(0 6px 18px rgba(22, 163, 74, 0.32))
          drop-shadow(0 2px 4px rgba(22, 163, 74, 0.18));
}
.coupon-ticket.copied .ct-left {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}
.coupon-ticket.copied .ct-left::before { opacity: 0; } /* hide gold gloss */
.coupon-ticket.copied .ct-eyebrow {
  color: #166534;
  text-shadow: none;
}
.coupon-ticket.copied .ct-savings,
.coupon-ticket.copied .ct-savings strong {
  color: #166534;
}
.coupon-ticket.copied .ct-right {
  background: linear-gradient(135deg, #166534 0%, #16A34A 100%);
}
.coupon-ticket.copied .ct-code-label {
  color: rgba(255, 255, 255, 0.85);
}
.coupon-ticket.copied .ct-action {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}
.coupon-ticket.copied .ct-action-text::before {
  content: 'Copied';
  font-size: 10px;
  letter-spacing: 0.04em;
}
.coupon-ticket.copied .ct-action-text {
  font-size: 0;  /* hide original "Tap to copy" text */
}

/* ── MOBILE: COMPACT LAYOUT ─────────────────────────────────
   ✅ v14.6: Further tightened — smaller height, tighter padding,
   smaller type. Same dual-pane premium look in less vertical
   space. Targets phones 380-600px (most modern phones).        */
@media (max-width: 600px) {
  .coupon-wrapper { margin: 12px 0 4px; }
  .coupon-ticket {
    min-height: 50px;
    grid-template-columns: 1fr auto 1.45fr;
  }
  .coupon-ticket .ct-left { padding: 7px 10px 7px 12px; }
  .coupon-ticket .ct-right { padding: 7px 10px; }
  .coupon-ticket .ct-eyebrow,
  .coupon-ticket .ct-code-label {
    font-size: 7.5px;
    letter-spacing: 0.16em;
    margin-bottom: 2px;
  }
  .coupon-ticket .ct-savings { font-size: 14px; }
  .coupon-ticket .ct-code {
    font-size: 12.5px;
    letter-spacing: 0.03em;
  }
  .coupon-ticket .ct-action {
    margin-top: 3px;
    padding: 1px 6px;
    font-size: 8.5px;
    gap: 3px;
  }
  .coupon-ticket .ct-action-icon { width: 9px; height: 9px; }
  .coupon-wrapper .ct-helper { font-size: 9px; margin-top: 5px; }
  /* Smaller notches so they stay proportional to the smaller ticket */
  .coupon-ticket .ct-divider { width: 11px; }
  .coupon-ticket .ct-divider::before,
  .coupon-ticket .ct-divider::after {
    width: 11px;
    height: 11px;
  }
  .coupon-ticket .ct-divider::before { top: -5.5px; }
  .coupon-ticket .ct-divider::after  { bottom: -5.5px; }
}

/* Very small phones (≤380px) — keep proportions tight, hide action label.
   ✅ v14.6: Action pill gone entirely on tiny screens — code stays the hero.  */
@media (max-width: 380px) {
  .coupon-ticket { min-height: 46px; }
  .coupon-ticket .ct-left { padding: 6px 9px 6px 11px; }
  .coupon-ticket .ct-right { padding: 6px 9px; }
  .coupon-ticket .ct-savings { font-size: 13px; }
  .coupon-ticket .ct-code { font-size: 11.5px; }
  .coupon-ticket .ct-action {
    padding: 2px 4px;
  }
  .coupon-ticket .ct-action-text { display: none; }
  .coupon-ticket.copied .ct-action::after {
    content: 'OK';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .coupon-wrapper .ct-helper { font-size: 8.5px; }
}

/* ── DARK MODE — notch & helper colors track page bg ── */
body.dark .coupon-ticket .ct-divider::before,
body.dark .coupon-ticket .ct-divider::after {
  background: var(--bg-primary, #1A1A2E);
}
body.dark .coupon-wrapper .ct-helper {
  color: rgba(255, 255, 255, 0.55);
}

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

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: var(--bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(99,74,142,0.05);
}

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

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--cream-200);
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

/* Form Styles */
.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.form-group label .required {
  color: var(--danger);
}

.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-card);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 74, 142, 0.08);
}

.form-input::placeholder {
  color: var(--text-light);
}

textarea.form-input {
  resize: vertical;
  min-height: 60px;
}

.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  -webkit-appearance: none;appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23634A8E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 74, 142, 0.12);
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row>.form-group {
  flex: 1;
  min-width: 0;
}

/* v9.8: Stack form rows on very small phones */
@media (max-width: 380px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

.form-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-error {
  font-size: 11px;
  color: var(--danger);
  margin-top: 4px;
  display: none;
}

.form-group.has-error .form-input {
  border-color: var(--danger);
}

.form-group.has-error .form-error {
  display: block;
}

/* ===== ORDER TRACKING ===== */
.tracking-section {
  max-width: 640px;
  margin: 32px auto;
  padding: 0 24px;
}

.tracking-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 24px;
}

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

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.order-id {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.order-date {
  font-size: 11px;
  color: var(--text-muted);
}

.order-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-status.pending {
  background: #FEF3C7;
  color: #92400E;
}

.order-status.confirmed {
  background: #DBEAFE;
  color: #1E40AF;
}

.order-status.processing {
  background: #E0E7FF;
  color: #3730A3;
}

.order-status.shipped {
  background: #D1FAE5;
  color: #065F46;
}

.order-status.delivered {
  background: #D1FAE5;
  color: #065F46;
}

.order-status.cancelled {
  background: #FEE2E2;
  color: #991B1B;
}

.order-status.returned {
  background: #FEE2E2;
  color: #991B1B;
}

.order-product-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}

.order-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ===== LOADING ===== */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== TOAST ===== */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 240px;
  max-width: 360px;
  animation: toast-in 0.3s ease;
  transform-origin: right;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

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

.toast.success .toast-icon {
  color: var(--success);
}

.toast.error .toast-icon {
  color: var(--danger);
}

.toast.warning .toast-icon {
  color: var(--warning);
}

.toast-icon svg {
  width: 16px;
  height: 16px;
}

.toast-msg {
  flex: 1;
}

/* ===== PAGES ===== */
.page-section {
  padding: var(--section-gap) 0;
}

.page-header {
  text-align: center;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 32px;
}

.page-header h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.content-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

.content-page h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--text-primary);
}

.content-page h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.content-page p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.content-page ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.content-page ul li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  list-style: disc;
  margin-bottom: 4px;
}

/* ===== RESPONSIVE — Fluid layout for all screens ===== */
@media (max-width: 768px) {

  /* Narrow device overflow fix */
  .container {
    min-width: auto;
    overflow-x: hidden;
  }

  img,
  .product-card,
  .header-inner {
    max-width: 100%;
  }

  :root {
    --header-height: 48px;
    --section-gap: 32px;
  }

  .container {
    padding: 0 12px;
  }

  .header-inner {
    padding: 0 12px;
    gap: 12px;
  }

  .brand-logo .logo-text {
    font-size: 18px;
    letter-spacing: 0.22em;
  }

  /* Show hamburger on mobile */
  .hamburger {
    display: flex;
  }

  /* Mobile nav — sleek slide-down drawer */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 253, 248, 0.97);
    background-color: rgba(251, 248, 241, 0.95); /* fallback */
    -webkit-backdrop-filter: blur(16px);backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 16px;
    gap: 4px;
    transform: translateY(-105%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    z-index: -1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .main-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    z-index: 999;
  }

  .main-nav a {
    font-size: 13px;
    font-weight: 600;
    padding: 11px 16px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s, color 0.2s;
  }

  .main-nav a:hover,
  .main-nav a.active {
    background: var(--accent-light);
    color: var(--accent);
  }

  /* Mobile dropdown categories */
  .nav-dropdown {
    position: static;
  }

  .nav-dropdown-trigger {
    text-align: center;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 16px;
    opacity: 1;
    transform: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Adjust header layout for mobile — hamburger LEFT, brand next to it, actions RIGHT */
  .header-inner {
    justify-content: space-between;
    align-items: center;
  }

  .hamburger {
    order: -2;        /* push hamburger to the far left */
    margin-right: 4px;
  }

  .brand-logo {
    order: -1;        /* brand sits right after hamburger */
    flex-shrink: 1;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .card-info {
    padding: 6px 8px 8px;
  }

  .card-info .product-name {
    font-size: 13px;
  }

  .card-info .sale-price {
    font-size: 14px;
  }

  .card-info .regular-price {
    font-size: 10px;
  }

  .card-info .product-category {
    font-size: 9px;
  }

  /* v9.7: Scale down badges so they don't overwhelm small cards */
  .product-badge {
    font-size: 8px;
    padding: 4px 10px 4px 8px;
    letter-spacing: 0.06em;
  }

  /* v9.7: Price row - prevent overflow and text cutting */
  .card-info .price-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .card-info .discount-tag {
    font-size: 9px;
  }

  /* v9.7: Section headings scale down */
  .section-heading h2 {
    font-size: 20px;
  }
  .section-heading p {
    font-size: 11px;
  }

  .brand-logo img {
    max-height: 28px;
    width: auto;
  }

  .header-actions {
    order: 2;         /* search / account / cart on the right */
    flex-shrink: 0;
    margin-left: auto;
  }

  /* The mobile drawer-nav is positioned fixed below the header, so its order
     in the flex row no longer affects layout. */

  .card-sizes {
    gap: 2px;
  }

  .size-dot {
    font-size: 8px;
    padding: 0 3px;
  }

  /* ── Hero Banner Mobile — v15.13: rules now consolidated in inline
       <style id="yarz-banner-v15-13-fullwidth"> in index.html. This
       block kept as-is for parity but the inline overrides win. ── */
  .hero-section {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .hero-slider {
    width: 100%;
  }

  /* v15.13: image fill rules — overridden by inline style if needed. */
  .hero-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Banner Overlay Mobile Styles */
  .banner-overlay {
    padding: 10px;
  }

  .banner-title {
    font-size: 1.8rem;
    margin-bottom: 8px;
  }

  .banner-subtitle {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  /* v15.13: Placeholder slide fills wrapper; aspect-ratio comes from parent. */
  .hero-slider .slide > div {
    height: 100%;
  }

  /* ────────────────────── */
  .section-heading h2 {
    font-size: 18px;
  }

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

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

  .pd-title {
    font-size: 16px;
  }

  .pd-sale-price {
    font-size: 18px;
  }
}

@media (max-width: 480px) {

  /* Remove side margins/white space on very small screens */
  .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    min-width: auto;
    overflow-x: hidden;
  }

  /* Header adjustments for very small screens */
  .header-inner {
    padding: 0 8px;
    gap: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .brand-logo .logo-text {
    font-size: 16px;
    letter-spacing: 0.18em;
  }

  .header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }

  /* Ensure header action buttons are visible */
  .header-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .header-icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .cart-count {
    top: 1px;
    right: 1px;
    font-size: 8px;
    min-width: 14px;
    height: 14px;
  }

  .hamburger {
    width: 24px;
    height: 20px;
    margin-right: 4px;
  }

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

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

  .hero-slider .slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }

  /* Banner Overlay for Very Small Screens */
  .banner-overlay {
    padding: 8px;
  }

  .banner-title {
    font-size: 1.3rem;
    margin-bottom: 6px;
  }

  .banner-subtitle {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  /* v15.13: placeholder fills wrapper; aspect-ratio set on .hero-section. */
  .hero-slider .slide > div {
    height: 100%;
  }

  /* ────────────────────────────── */
}

/* ===== MAINTENANCE MODE OVERLAY ===== */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  background: var(--purple-900);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 24px;
}

.maintenance-overlay .maintenance-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: #FFFFFF;
  margin-bottom: 24px;
}

.maintenance-overlay h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.maintenance-overlay p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 360px;
  line-height: 1.7;
}

.maintenance-overlay .maintenance-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.maintenance-overlay .maintenance-icon svg {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.8);
}

/* ════════════════════════════════════════════════════════════
   v15.70 — HOLIDAY / VACATION MODE OVERLAY
   ────────────────────────────────────────────────────────────
   Different from maintenance: cream + burgundy premium look,
   not a dark warning. Customer sees this when courier is paused
   (Eid / Puja / festival) so they don't place orders that
   can't deliver in time. Includes WhatsApp CTA for urgent help.
   Storefront only — info/contact/admin pages stay accessible.
   ════════════════════════════════════════════════════════════ */
.holiday-overlay {
  position: fixed;
  inset: 0;
  background: #FBF8F1;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: yarz-holiday-fade 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Decorative faint YARZ watermark behind the card.
   ~5% opacity burgundy, gigantic Cormorant — atelier-letterhead vibe. */
.holiday-overlay::before {
  content: 'YARZ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(140px, 28vw, 280px);
  letter-spacing: 0.04em;
  color: rgba(255, 0, 76, 0.045);
  pointer-events: none;
  -webkit-user-select: none;user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.holiday-overlay__card {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 460px;
  min-width: 280px;
  margin: auto;
  background: #FFFFFF;
  border: 1px solid rgba(255, 0, 76, 0.08);
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(255, 0, 76, 0.05),
    0 8px 24px rgba(255, 0, 76, 0.08),
    0 32px 64px rgba(255, 0, 76, 0.07);
  animation: yarz-holiday-rise 320ms 80ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@media (min-width: 768px) {
  .holiday-overlay__card { padding: 48px 40px; }
}
@media (min-width: 1024px) {
  .holiday-overlay__card { padding: 56px 48px; }
}

/* Wordmark lockup — slightly smaller than maintenance (cream gives less contrast). */
.holiday-overlay .yarz-mark {
  --yarz-mark-size: 56px;
  margin-bottom: 24px;
}
.holiday-overlay .yarz-mark__word {
  color: var(--yarz-mark-text, #1A1411) !important;
}

/* Reason chip — burgundy on blush */
.holiday-overlay__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 18px;
  background: rgba(255, 0, 76, 0.08);
  color: #ff004c;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 76, 0.16);
}
.holiday-overlay__chip svg {
  width: 14px;
  height: 14px;
  color: #ff004c;
}

/* Headline — Cormorant, calm not loud */
.holiday-overlay h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.25;
  color: #1A1411;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.holiday-overlay h2 .holiday-overlay__sub {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.55em;
  color: rgba(255, 0, 76, 0.7);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Body paragraph — Inter, comfortable for Bengali */
.holiday-overlay p.holiday-overlay__body {
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(26, 20, 17, 0.78);
  max-width: 380px;
  margin: 16px auto 4px;
}
.holiday-overlay p.holiday-overlay__body--en {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 0, 76, 0.62);
  margin: 4px auto 0;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   v15.72 — HOLIDAY COUNTDOWN TIMER
   ────────────────────────────────────────────────────────────
   Sits between the YARZ wordmark and the reason chip.
   Premium atelier feel: unboxed numerals, hairline separators,
   Bengali digits + Bengali labels, no flash-sale clichés.
   ──── 18-lens synthesis (v15.72), v15.73 audit fixes:
     • Inter 500 + tabular-nums (calmer than Cormorant for live data)
     • Espresso default → burgundy under 24h
     • 220ms per-digit crossfade with 2px upward drift (FIXED v15.73)
     • Drops seconds via @media (max-width:320px)
     • role="timer", no aria-live (no SR spam)
     • WCAG AA contrast on labels + meta (v15.73)
   ════════════════════════════════════════════════════════════ */
.holiday-overlay__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px auto 8px;
  padding: 0;
  width: 100%;
}
.holiday-overlay__countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  position: relative;
}
.holiday-overlay__seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 52px;
  position: relative;
}
.holiday-overlay__seg + .holiday-overlay__seg::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 14px;
  width: 1px;
  height: 14px;
  background: rgba(255, 0, 76, 0.22);
}
/* v15.73: target element directly (fixes the never-firing animation bug) */
.holiday-overlay__num {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: #3A2A22;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-block;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.holiday-overlay__num.is-entering {
  animation: yarz-tick-in 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.holiday-overlay__num.is-leaving {
  opacity: 0;
  transform: translateY(-2px);
}
@keyframes yarz-tick-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.holiday-overlay__lbl {
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  /* v15.73: WCAG AA fix — was #9A8775 (3.85:1, fails AA on 11px). */
  color: #7A6655; /* 5.44:1 on white — AA pass */
}
.holiday-overlay__countdown-meta {
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  /* v15.73: WCAG AA fix — was alpha 0.55 (3.24:1). */
  color: rgba(255, 0, 76, 0.78); /* ~6.5:1 — AA pass */
  margin: 12px 0 0;
}

/* Urgent state — under 24h. Number shifts to brand red; rest stays calm. */
.holiday-overlay__countdown--urgent .holiday-overlay__num { color: #ff004c; }
.holiday-overlay__countdown--urgent .holiday-overlay__seg + .holiday-overlay__seg::before { background: rgba(255, 0, 76, 0.4); }

/* "We're back!" expired-state banner */
.holiday-overlay__back {
  margin: 18px auto 0;
  padding: 14px 18px;
  background: rgba(255, 0, 76, 0.06);
  border: 1px solid rgba(255, 0, 76, 0.18);
  border-radius: 8px;
  text-align: center;
}
.holiday-overlay__back-msg {
  display: block;
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-size: 13px;
  color: #1A1411;
  font-weight: 500;
  margin-bottom: 10px;
}
.holiday-overlay__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #ff004c;
  color: #FBF8F1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.holiday-overlay__back-btn:hover { background: #cc003d; }

/* SR-only one-shot summary */
.holiday-overlay__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Reduced-motion — instantaneous swap */
@media (prefers-reduced-motion: reduce) {
  .holiday-overlay__num,
  .holiday-overlay__num.is-entering,
  .holiday-overlay__num.is-leaving {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mobile compression */
@media (max-width: 480px) {
  .holiday-overlay__countdown-row { gap: 18px; }
  .holiday-overlay__seg { min-width: 44px; }
  .holiday-overlay__seg + .holiday-overlay__seg::before { left: -10px; height: 12px; }
  .holiday-overlay__num { font-size: 30px; }
  .holiday-overlay__lbl { font-size: 10px; }
}
@media (max-width: 360px) {
  .holiday-overlay__countdown-row { gap: 14px; }
  .holiday-overlay__seg + .holiday-overlay__seg::before { left: -8px; }
  .holiday-overlay__num { font-size: 28px; }
}
/* v15.73: pure CSS — reacts to rotation/split-view (was JS-toggled) */
@media (max-width: 320px) {
  .holiday-overlay__countdown .holiday-overlay__seg--s { display: none; }
}

/* Hairline divider before CTA */
.holiday-overlay__rule {
  width: 60px;
  height: 1px;
  background: rgba(255, 0, 76, 0.18);
  margin: 26px auto 22px;
  border: none;
}

/* WhatsApp CTA — burgundy primary (NOT WhatsApp green; we keep the cream/burgundy palette).
   Green icon stays inside as authenticity touch. */
.holiday-overlay__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background: #ff004c;
  color: #FBF8F1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  box-shadow: 0 4px 16px rgba(255, 0, 76, 0.18);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.holiday-overlay__cta:hover,
.holiday-overlay__cta:focus-visible {
  background: #cc003d;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(255, 0, 76, 0.26);
}
.holiday-overlay__cta:active { transform: translateY(0); }
.holiday-overlay__cta:focus-visible { outline: 2px solid #ff004c; outline-offset: 3px; }
.holiday-overlay__cta svg {
  width: 18px;
  height: 18px;
  fill: #25D366; /* keep the recognisable WhatsApp green ONLY on the icon */
  flex-shrink: 0;
}

.holiday-overlay__cta-sub {
  display: block;
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(26, 20, 17, 0.55);
  margin-top: 14px;
  letter-spacing: 0.02em;
}
.holiday-overlay__cta-sub a {
  color: #ff004c;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 0, 76, 0.3);
}
.holiday-overlay__cta-sub a:hover { border-bottom-color: #ff004c; }

/* Footer micro-copy — cart-preserved reassurance */
.holiday-overlay__footer {
  display: block;
  font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  font-size: 11.5px;
  color: rgba(26, 20, 17, 0.45);
  margin-top: 22px;
  letter-spacing: 0.01em;
}

/* Entrance animations — subtle, premium, not heavy */
@keyframes yarz-holiday-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes yarz-holiday-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   v15.86 — HOLIDAY OVERLAY · YARZ LOGO ANIMATION
   ────────────────────────────────────────────────────────────
   Multi-stage premium animation choreographed for the brand
   mark on the holiday overlay. Plays in three layers:

     1. ENTRANCE   (1.2s, runs once)
        — disc scales up from 0 with a soft elastic ease;
        — wordmark fades + rises from below the disc;
        — 2px gold-toned ring expands outward then settles.

     2. IDLE       (loops, 4s cycle)
        — disc breathes (1.0 → 1.04 → 1.0 scale) like a slow heart-beat;
        — soft burgundy glow halo pulses behind the icon;
        — wordmark holds steady; the rule-line under it shimmers
          across (cream → gold → cream) once every 4s.

     3. HOVER (desktop only — non-essential micro-interaction)
        — disc rotates gently +6deg over 600ms.

   All animations honor `prefers-reduced-motion` (idle + entrance
   are killed; only a 200ms fade remains so the logo still
   registers without movement).
   ════════════════════════════════════════════════════════════ */

/* Wrapper sets up positioning context for the glow halo + ring */
.holiday-overlay .yarz-mark {
  position: relative;
  /* Re-declare the base size so the animation calc()s below stay stable
     even when other rules adjust --yarz-mark-size on this element. */
  --yarz-mark-size: 56px;
  /* v15.86: Establish own stacking context so the ::before/::after halo +
     ring (z-index: -1) sit BEHIND the disc but stay visible above the
     card background. Without `isolation: isolate`, z-index:-1 escaped to
     the parent .holiday-overlay__card and disappeared. */
  isolation: isolate;
}

/* Entrance: disc grows from nothing with elastic ease.
   Idle: gentle breathing pulse loop (3.6s, ease-in-out, infinite). */
.holiday-overlay .yarz-mark .yarz-mark__icon {
  transform-origin: center center;
  animation:
    yarz-mark-disc-in 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
    yarz-mark-disc-breathe 3600ms 1200ms ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(200, 16, 46, 0.18));
  will-change: transform, filter;
}

/* Disc entrance — scale-up with subtle rotate hint */
@keyframes yarz-mark-disc-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Idle breathing — barely-there scale pulse, gives it life */
@keyframes yarz-mark-disc-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 12px rgba(200, 16, 46, 0.18)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 6px 18px rgba(200, 16, 46, 0.28)); }
}

/* Glow halo — sits behind the disc, pulses outward in a 4s cycle.
   This is what makes the logo feel "alive" without being loud. */
.holiday-overlay .yarz-mark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--yarz-mark-size);
  height: var(--yarz-mark-size);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.28) 0%, rgba(200, 16, 46, 0) 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: yarz-mark-halo 4000ms 1400ms ease-in-out infinite;
}
@keyframes yarz-mark-halo {
  0%, 100% { opacity: 0;    transform: translateX(-50%) scale(0.8); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.55); }
}

/* Expanding ring — appears once on entrance, gold-toned, dissolves outward.
   Conveys "the mark is being stamped onto the overlay" — a one-time flourish. */
.holiday-overlay .yarz-mark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--yarz-mark-size);
  height: var(--yarz-mark-size);
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid #C9A23F;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: yarz-mark-ring 1400ms 400ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}
@keyframes yarz-mark-ring {
  0%   { opacity: 0;    transform: translateX(-50%) scale(0.6); border-width: 3px; }
  30%  { opacity: 0.95; transform: translateX(-50%) scale(1);    border-width: 2.5px; }
  100% { opacity: 0;    transform: translateX(-50%) scale(2.2); border-width: 1px; }
}

/* Wordmark unveil — fades + rises 0.4s after the disc lands */
.holiday-overlay .yarz-mark .yarz-mark__word {
  animation: yarz-mark-word-in 800ms 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes yarz-mark-word-in {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.5em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.32em; }
}

/* Hairline rule under the wordmark (stacked variant) — gold shimmer sweep
   that loops in lockstep with the disc breathing. Subtle, editorial. */
.holiday-overlay .yarz-mark--stacked .yarz-mark__word::after {
  background: linear-gradient(90deg,
    rgba(200, 16, 46, 0.25) 0%,
    rgba(201, 162, 63, 0.95) 50%,
    rgba(200, 16, 46, 0.25) 100%);
  background-size: 200% 100%;
  animation: yarz-mark-rule-shimmer 4000ms 1400ms ease-in-out infinite;
}
@keyframes yarz-mark-rule-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  100% 0; }
}

/* Reduced motion — keep only a soft 240ms fade-in on the disc + wordmark.
   Halo, ring, breathing, and shimmer are silenced. */
@media (prefers-reduced-motion: reduce) {
  .holiday-overlay .yarz-mark .yarz-mark__icon {
    animation: yarz-mark-disc-fade 240ms ease-out both !important;
    filter: none !important;
  }
  .holiday-overlay .yarz-mark .yarz-mark__word {
    animation: yarz-mark-disc-fade 240ms 80ms ease-out both !important;
    letter-spacing: 0.32em;
  }
  .holiday-overlay .yarz-mark::before,
  .holiday-overlay .yarz-mark::after,
  .holiday-overlay .yarz-mark--stacked .yarz-mark__word::after {
    animation: none !important;
  }
}
@keyframes yarz-mark-disc-fade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* prefers-reduced-motion — keep a tiny fade so appearance still registers */
@media (prefers-reduced-motion: reduce) {
  .holiday-overlay,
  .holiday-overlay__card {
    animation: yarz-holiday-fade 150ms linear both !important;
  }
}

/* Print — never print the overlay */
@media print {
  .holiday-overlay { display: none !important; }
  #main-content { display: block !important; }
}

/* Tiny phones — compact pad */
@media (max-width: 360px) {
  .holiday-overlay__card { padding: 28px 20px; }
  .holiday-overlay h2 { font-size: 24px; }
  .holiday-overlay__cta { padding: 14px 24px; font-size: 12px; }
}

/* ===== PAYMENT INFO BOX ===== */
.payment-info-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border-light);
  animation: fadeIn 0.3s ease;
}

.payment-info-box.bkash {
  background: #FFF0F5;
  border-color: #F5A0C0;
  color: #9B1257;
}

.payment-info-box.nagad {
  background: #FFF8F0;
  border-color: #F5C880;
  color: #7A4300;
}

.payment-info-box .pay-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-info-box .pay-number {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ✅ v15.77: Pay-number row + Copy button — premium tactile touch target.
   Sits inline with the merchant number so customers can tap-copy quickly,
   then paste straight into bKash / Nagad Send Money on mobile. */
.payment-info-box .pay-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.payment-info-box .pay-number-row .pay-number {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.payment-info-box .pay-number-value {
  -webkit-user-select: all;user-select: all;            /* one-tap selects entire number */
  -webkit-user-select: all;
}
.pay-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--accent, #E60023);
  border: 1px solid var(--accent, #E60023);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 2px 6px rgba(255, 0, 76, 0.16);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 32px;            /* accessible touch target on mobile */
}
.pay-copy-btn[data-color="bkash"] {
  background: #E2136E;
  border-color: #E2136E;
  box-shadow: 0 2px 6px rgba(226, 19, 110, 0.20);
}
.pay-copy-btn[data-color="nagad"] {
  background: #ED1C24;
  border-color: #ED1C24;
  box-shadow: 0 2px 6px rgba(237, 28, 36, 0.20);
}
.pay-copy-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.pay-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.pay-copy-btn .copy-icon {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.pay-copy-btn.copied {
  background: #16A34A !important;
  border-color: #16A34A !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28) !important;
}
.pay-copy-btn.copied .copy-icon {
  transform: scale(0);
}
.pay-copy-btn.copied .copy-label::before {
  content: '✓ ';
}
.pay-copy-btn.copied .copy-label::after {
  content: 'Copied';
}
.pay-copy-btn.copied .copy-label {
  font-size: 0;            /* hide original "Copy" text, show "✓ Copied" via pseudos */
  letter-spacing: 0;
}
.pay-copy-btn.copied .copy-label::before,
.pay-copy-btn.copied .copy-label::after {
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* Variant for the order-success screen — slightly more discrete */
.pay-copy-btn--success {
  padding: 5px 10px;
  font-size: 10.5px;
  min-height: 28px;
}

@media (max-width: 380px) {
  .payment-info-box .pay-number-row { gap: 6px; }
  .pay-copy-btn { padding: 5px 10px; font-size: 11px; }
}

.payment-info-box .pay-instruction {
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-muted);
}

.mt-8 {
  margin-top: 8px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.pt-16 {
  padding-top: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-8 {
  gap: 8px;
}

.gap-16 {
  gap: 16px;
}

/* ============================================================
   ✅ v3.2 FIXES — Header Layout, Mobile Responsive, Product Detail
   Order: hamburger (left) — brand (center) — actions (right)
   Fixes: image cropping, 6-image scroll, proper sizing on mobile
   ============================================================ */

/* ===== DESKTOP & TABLET HEADER (≥769px) ===== */
@media (min-width: 769px) {
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 24px;
  }
  /* Brand is on the LEFT in desktop */
  .site-header .brand-logo {
    order: 1;
    grid-column: 1;
    margin-right: 0;
  }
  .site-header .main-nav {
    order: 2;
    grid-column: 2;
    justify-content: flex-start;
    flex: unset;
  }
  .site-header .header-actions {
    order: 3;
    grid-column: 3;
    justify-self: end;
    gap: 6px;
  }
  .site-header .hamburger {
    display: none !important;
  }
}

/* ===== MOBILE HEADER (≤768px) — hamburger | brand | actions ===== */
@media (max-width: 768px) {
  .site-header {
    height: 56px !important;
  }
  :root {
    --header-height: 56px;
  }
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    padding: 0 12px !important;
    gap: 8px;
  }
  /* Hamburger goes LEFT */
  .site-header .hamburger {
    display: flex !important;
    order: 1;
    grid-column: 1;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 11px 8px !important;
    justify-content: space-around;
    align-self: center;
  }
  .site-header .hamburger span {
    height: 2px;
    background: var(--text-primary);
    width: 22px;
  }
  /* Brand is CENTERED */
  .site-header .brand-logo {
    order: 2;
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }
  .site-header .brand-logo .logo-text {
    font-size: 17px !important;
    letter-spacing: 0.22em !important;
  }
  .site-header .brand-logo img {
    max-height: 30px !important;
  }
  /* Header actions on the RIGHT — search + account + cart */
  .site-header .header-actions {
    order: 3;
    grid-column: 3;
    justify-self: end;
    display: flex !important;
    gap: 4px !important;
    align-items: center;
  }
  .site-header .header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .site-header .header-icon-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  .site-header .cart-count {
    top: 0 !important;
    right: 0 !important;
    font-size: 9px !important;
    min-width: 15px !important;
    height: 15px !important;
  }
  /* Mobile nav drawer aligns under fixed header */
  .main-nav {
    top: 100% !important;
  }
}

/* ===== MOBILE HEADER (≤480px) — even tighter spacing ===== */
@media (max-width: 480px) {
  .site-header {
    height: 52px !important;
  }
  :root {
    --header-height: 52px;
  }
  .site-header .header-inner {
    padding: 0 10px !important;
    gap: 6px;
  }
  .site-header .brand-logo .logo-text {
    font-size: 15px !important;
    letter-spacing: 0.20em !important;
  }
  .site-header .header-actions {
    gap: 2px !important;
  }
  .site-header .header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }
  .site-header .header-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  .main-nav {
    top: 100% !important;
  }
}

/* ===== PRODUCT CARD MOBILE FIX — Images না কাটে ===== */
@media (max-width: 768px) {
  .product-card {
    overflow: hidden;
    border-radius: 6px;
  }
  .product-card .card-image { position: relative; width: 100%; padding-top: 125%; overflow: hidden; background: var(--cream-200); }
}

/* ===== PRODUCT DETAIL PAGE MOBILE FIX (CRITICAL) ===== */
/* Issue: ছবি সাইজ দিয়ে কাটা পড়ে, 6টা thumbnail scroll হয় না, select হয় না */
@media (max-width: 768px) {
  .product-detail-section {
    padding: 12px 0 !important;
  }
  .pd-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 12px !important;
    /* ✅ v15.54: Lock the grid to the viewport so children can't push it
       past the right edge regardless of their intrinsic widths. */
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
  }
  .pd-gallery {
    /* ✅ v15.54 FIX: With 6 thumbnails (~408px total), the gallery's child
       thumbnails container was bursting past the grid cell on the right
       side because:
         - max-width: 100vw ignored the parent's 12px horizontal padding,
           so the gallery extended 12px past the right edge.
         - overflow: visible let the thumbnails strip's intrinsic width
           push the gallery wider than the grid cell.
         - min-width: auto (default for grid items) prevented the cell
           from shrinking the gallery to its track width.
       Now the gallery stays inside the cell, the main image is bounded
       to the cell width on both sides, and the thumbnails scroll
       horizontally within the gallery — never pushing the page right. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  /* Main image: full image দেখায়, কোনো crop নেই */
  .pd-main-image {
    /* ✅ v4.0: No fixed aspect-ratio — image shows FULL */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cream-200);
  }
  .pd-main-image img {
    width: 100% !important;
    height: auto !important;        /* ✅ auto: full image, no crop */
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--cream-100);
  }
  /* Thumbnails: horizontal scroll wrapper, 6টা সব দেখা যায় */
  /* ✅ v15.53 FIX: Constrain thumbnails to PDP gallery width so the
     horizontal scroll happens INSIDE the thumbnails container — not on
     the body. Without max-width:100% + overflow-x:auto on a width-bound
     parent, the thumbnails row could push the body horizontally on
     phones with 6 thumbs (each ~60px + gap → ~408px), making the main
     image appear cropped on the right edge. The min-width:0 on the
     parent .pd-gallery is required because flex children default to
     min-width:auto which prevents the thumbnails strip from shrinking. */
  .pd-thumbnails {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    width: 100%;
    max-width: 100%;
  }
  .pd-thumbnails::-webkit-scrollbar {
    height: 4px;
  }
  .pd-thumbnails::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 2px;
  }
  .pd-thumb {
    flex: 0 0 auto !important;
    width: 60px !important;
    height: 75px !important;
    scroll-snap-align: start;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--cream-200);
    overflow: hidden;
  }
  .pd-thumb.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 74, 142, 0.15);
  }
  .pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pd-info {
    padding: 0 !important;
  }
  .pd-title {
    font-size: 18px !important;
    line-height: 1.3;
  }
  .pd-sale-price {
    font-size: 22px !important;
  }
  .pd-actions {
    flex-direction: column;
    gap: 8px;
  }
  .pd-actions .btn {
    width: 100%;
    padding: 13px 16px !important;
    font-size: 14px !important;
  }
}

/* ===== TINY PHONES (≤380px) — final polish ===== */
@media (max-width: 380px) {
  .pd-thumb {
    width: 54px !important;
    height: 68px !important;
  }
  .pd-main-image {
    aspect-ratio: 4 / 5 !important;
  }
}

/* ===== FLOATING LIVE CHAT BUTTONS ===== */
.live-chat-buttons {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 95;
}
.live-chat-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
  text-decoration: none;
  color: #fff;
  border: none;
  cursor: pointer;
}
.live-chat-btn:hover { transform: scale(1.08); }
.live-chat-btn svg { width: 26px; height: 26px; }
.live-chat-btn.whatsapp { background: #25D366; }
.live-chat-btn.messenger { background: linear-gradient(135deg, #0099FF 0%, #A033FF 50%, #FF5050 100%); }

@media (max-width: 480px) {
  .live-chat-buttons { bottom: 12px; right: 12px; gap: 8px; }
  .live-chat-btn { width: 46px; height: 46px; }
  .live-chat-btn svg { width: 22px; height: 22px; }
}

/* ===== FOOTER SOCIAL ICONS — v3.6 Brand-Color Hover ===== */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  padding: 0;
}
.footer-social a:hover {
  background: var(--brand-color, var(--accent));
  border-color: var(--brand-color, var(--accent));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.footer-social a svg {
  width: 16px;
  height: 16px;
}

/* ===== CONTACT PAGE SOCIAL CARDS ===== */
.contact-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.contact-social-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-card);
}
.contact-social-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(99, 74, 142, 0.12);
  transform: translateY(-1px);
}
.contact-social-card .icn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.contact-social-card .icn.fb { background: #1877F2; }
.contact-social-card .icn.ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.contact-social-card .icn.wa { background: #25D366; }
.contact-social-card .icn.tt { background: #000; }
.contact-social-card .icn.ms { background: linear-gradient(135deg, #0099FF, #A033FF); }
.contact-social-card .icn.yt { background: #FF0000; }
.contact-social-card .icn svg { width: 18px; height: 18px; }
.contact-social-card .lbl { display: flex; flex-direction: column; gap: 2px; }
.contact-social-card .lbl strong { font-size: 13px; font-weight: 600; }
.contact-social-card .lbl span { font-size: 11px; color: var(--text-muted); }

/* ===== HEADER LOGO IMAGE FIX ===== */
.brand-logo img {
  max-height: 36px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .brand-logo img {
    max-height: 30px;
  }
}

/* ════════════════════════════════════════════════════════
   ✨ v3.5 PROFESSIONAL MOBILE HEADER & UI FIXES
   - Balanced spacing for hamburger / brand / actions
   - Proper container padding for "Our Collection" section
   - Builder-section empty-state (no infinite loading)
   ════════════════════════════════════════════════════════ */

/* ---- Mobile Header: Professional Spacing ---- */
@media (max-width: 768px) {
  .site-header {
    height: 56px;
  }
  :root {
    --header-height: 56px;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Hamburger LEFT */
  .hamburger {
    order: 1;
    display: flex !important;
    width: 26px;
    height: 18px;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 2px 0;
    margin: 0;
    flex-shrink: 0;
  }
  .hamburger span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
  }

  /* Brand CENTERED */
  .brand-logo {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 0 8px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  .brand-logo .logo-text {
    font-size: 18px;
    letter-spacing: 0.24em;
    line-height: 1;
  }

  /* Action icons RIGHT, with adequate gap */
  .header-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 0;
  }
  .header-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
  }
  .header-icon-btn svg {
    width: 19px;
    height: 19px;
  }
  .cart-count {
    top: 0;
    right: 0;
    font-size: 9px;
    min-width: 15px;
    height: 15px;
  }
}

/* ---- Very small phones (≤ 380px) — keep readable ---- */
@media (max-width: 380px) {
  .header-inner {
    padding: 0 10px;
  }
  .brand-logo .logo-text {
    font-size: 16px;
    letter-spacing: 0.20em;
  }
  .header-actions {
    gap: 2px;
  }
  .header-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .header-icon-btn svg {
    width: 17px;
    height: 17px;
  }
  .hamburger {
    width: 22px;
    height: 16px;
  }
}

/* ---- "Our Collection" / All Products section — proper mobile padding ---- */
@media (max-width: 768px) {
  #all-products-section {
    padding-left: 0;
    padding-right: 0;
  }
  #all-products-section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100%;
  }
  .category-tabs {
    padding: 4px 0 8px;
    margin-bottom: 18px;
  }
  .category-tab {
    padding: 7px 14px;
    font-size: 12px;
    flex-shrink: 0;
  }
  .category-tab:first-child {
    margin-left: 14px;
  }
  .category-tab:last-child {
    margin-right: 14px;
  }
}

@media (max-width: 480px) {
  #all-products-section .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .category-tabs {
    padding: 4px 0 8px;
  }
}

/* ---- Builder/Dynamic Sections: NO infinite loader on empty state ---- */
#dynamic-sections-wrapper:empty {
  display: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#dynamic-sections-wrapper.is-empty {
  display: none !important;
}

/* ---- Floating Messenger Button (colorful gradient like real Messenger) ---- */
#floating-whatsapp-btn,
.floating-whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1EBEA5 0%, #00E676 100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 95;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  border: 3px solid #FFFFFF;
}
#floating-whatsapp-btn:hover,
.floating-whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
}
#floating-whatsapp-btn svg,
.floating-whatsapp-btn svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Pulse ring animation for whatsapp button */
#floating-whatsapp-btn::before,
.floating-whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.4);
  animation: yarz-pulse-ring-wa 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes yarz-pulse-ring-wa {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 480px) {
  #floating-whatsapp-btn,
  .floating-whatsapp-btn {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
  #floating-whatsapp-btn svg,
  .floating-whatsapp-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* ---- Browser Switch Banner (Facebook in-app → Chrome) ---- */
.browser-switch-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #634A8E 0%, #4E3A72 100%);
  color: #fff;
  padding: 12px 16px;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-family: 'Hind Siliguri', 'Inter', sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: yarz-slide-down 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.browser-switch-banner.active {
  display: flex;
}
.browser-switch-banner .bsb-msg {
  flex: 1;
  line-height: 1.5;
}
.browser-switch-banner .bsb-msg strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.browser-switch-banner .bsb-btn {
  background: #fff;
  color: #4E3A72;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.browser-switch-banner .bsb-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
}
@keyframes yarz-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---- Skeleton Empty-State Hidden When No Data ---- */
.skeleton-empty-hide {
  display: none !important;
}

/* ── v4.3: Smooth Product Card Stagger Animation ── */
@keyframes yarz-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-grid .product-card {
  animation: yarz-card-in 0.4s ease-out both;
}
.product-grid .product-card:nth-child(1) { animation-delay: 0ms; }
.product-grid .product-card:nth-child(2) { animation-delay: 50ms; }
.product-grid .product-card:nth-child(3) { animation-delay: 100ms; }
.product-grid .product-card:nth-child(4) { animation-delay: 150ms; }
.product-grid .product-card:nth-child(5) { animation-delay: 200ms; }
.product-grid .product-card:nth-child(6) { animation-delay: 250ms; }
.product-grid .product-card:nth-child(7) { animation-delay: 300ms; }
.product-grid .product-card:nth-child(8) { animation-delay: 350ms; }
.product-grid .product-card:nth-child(n+9) { animation-delay: 400ms; }

/* ── v4.3: Smoother category tab transitions ── */
.category-tabs button {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-tabs button:active {
  transform: scale(0.95);
}


/* ── v4.3: Better toast notification entrance ── */
.toast-notification {
  animation: yarz-toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes yarz-toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── v4.3: Floating button entrance animation ── */
#floating-whatsapp-btn[style*="flex"],
.floating-whatsapp-btn[style*="flex"] {
  animation: yarz-float-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1s;
}
@keyframes yarz-float-in {
  from { opacity: 0; transform: scale(0) rotate(-45deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── v4.3: Active tap feedback for mobile ── */
@media (hover: none) {
  .product-card:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }
  .btn:active {
    transform: scale(0.96);
    transition-duration: 0.1s;
  }
}

/* ============================================================
   v5.0: PREMIUM UI UPGRADE — Polished, Premium, Shopify-level
   ✅ Product card entrance animations (fade-in on scroll)
   ✅ Enhanced card hover with glow effect
   ✅ Premium checkout with glassmorphism
   ✅ Gradient buttons with subtle pulse
   ✅ Smoother page transitions
   ✅ Connection-aware CSS (reduce animations on slow networks)
   ✅ Mobile touch refinements
   ============================================================ */

/* ── v12.1 PERF: Disable card entrance animation on mobile + low-perf devices.
   The translateY(18px → 0) animation counts toward CLS and looks janky on
   low-end phones, hurting GTmetrix score. Cards still fade in via opacity. ── */
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .product-card {
    animation: yarzCardOpacityIn 0.3s ease both;
    animation-delay: 0s !important;
    transform: none !important;
  }
  @keyframes yarzCardOpacityIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ── Premium Product Card Entrance Animation (Desktop only) ── */
.product-card {
  animation: yarzCardFadeIn 0.5s ease both;
  animation-delay: calc(var(--card-index, 0) * 0.06s);
}

@keyframes yarzCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Enhanced Card Hover (subtle glow) ── */
.product-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 74, 142, 0.12), 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--purple-200);
}

/* ── Premium Price Tag ── */
.card-info .sale-price {
  color: var(--sale-price); /* v11.3 — driven by Theme Sale Price control */
  font-weight: 800;
}

/* ── Premium Discount Tag ── */
.card-info .discount-tag {
  background: linear-gradient(135deg, #FF6B6B, #EE5A24);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Premium Button Gradient ── */
.btn-primary {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
  box-shadow: 0 2px 8px rgba(99, 74, 142, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--purple-700), var(--purple-800));
  box-shadow: 0 4px 16px rgba(99, 74, 142, 0.35);
  transform: translateY(-1px);
}

/* ── Premium Checkout Submit Button ── */
#checkout-submit-btn {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
  box-shadow: 0 4px 20px rgba(99, 74, 142, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

#checkout-submit-btn:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(99, 74, 142, 0.4);
  transform: translateY(-1px);
}

#checkout-submit-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-25deg);
  animation: yarzBtnShimmer 3s ease-in-out infinite;
}

@keyframes yarzBtnShimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* ── Glassmorphism Modal ── */
.modal-box {
  background: rgba(255, 255, 255, 0.97);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);
  border: 1px solid rgba(232, 228, 220, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── Premium Form Inputs ── */
.form-input,
.form-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px rgba(99, 74, 142, 0.1);
  outline: none;
}

/* ── Premium Section Heading ── */
.section-heading h2 {
  position: relative;
  display: inline-block;
}

.section-heading .line {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  width: 60px;
  height: 2px;
  opacity: 0.8;
}

/* ── Smooth Page Transitions ── */
#home-content {
  animation: yarzFadeIn 0.3s ease;
}

#dynamic-view {
  animation: yarzSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* ✅ v16.5: Defensive cream background + full-height so NO layer behind the
     dynamic view (footer, body, leftover bars) can ever bleed through on short
     pages like My Account / Order Tracking. The navy footer color stays
     strictly inside .site-footer. */
  background: var(--bg-primary, #FBF8F1);
  min-height: calc(100vh - var(--header-height, 56px));
}

@keyframes yarzFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yarzSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Premium Cart Drawer ── */
.cart-drawer {
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
}

/* ── Premium Toast ── */
.toast-msg {
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);
}

/* ── Category Tab Premium Touch ── */
.category-tab {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tab.active {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
  box-shadow: 0 2px 8px rgba(99, 74, 142, 0.25);
}

/* ── Product Detail Premium Touches ── */
.pd-sale-price {
  color: var(--sale-price); /* v11.3 — driven by Theme Sale Price control */
  font-weight: 800;
}

.pd-discount {
  background: linear-gradient(135deg, #FF6B6B, #EE5A24);
  color: #fff;
  border: none;
}

/* ── Size Button Enhancement ── */
.size-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.size-btn.selected {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
  box-shadow: 0 2px 8px rgba(99, 74, 142, 0.3);
}

.size-btn:hover:not(:disabled):not(.selected) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ── Premium Search Overlay — handled by main search redesign ── */

/* ── Announcement Bar Premium ──
   ✅ v15.30 FIX: Use CSS var so admin's color choice wins; fallback to
   premium gradient default. */
.announcement-bar.active {
  background: var(--yarz-ann-bg, linear-gradient(135deg, var(--purple-900), var(--purple-800)));
  animation: yarzAnnounce 0.4s ease;
}

@keyframes yarzAnnounce {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ── Connection-Aware CSS (Slow network) ── */
/* On very slow connections, disable expensive animations to keep UI responsive */
.yarz-slow-net .product-card,
.yarz-slow-net .product-badge::after,
.yarz-slow-net #checkout-submit-btn::after {
  animation: none !important;
}

.yarz-slow-net .product-card:hover {
  transform: none;
}

/* ── Mobile Premium Refinements ── */
@media (max-width: 768px) {
  /* Better card spacing on mobile */
  .product-grid {
    gap: 10px;
  }

  .card-info {
    padding: 8px 10px 10px;
  }

  .card-info .product-name {
    font-size: 13px;
  }

  .card-info .sale-price {
    font-size: 14px;
  }

  /* Premium mobile checkout */
  .modal-box {
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Smoother touch feedback */
  .product-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero slider touch indicator */
  .slider-arrow {
    opacity: 0.6;
    width: 28px;
    height: 28px;
  }
}

/* ── Premium Scroll Indicator (thin purple line on scroll) ── */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-300));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ── Footer Premium Gradient Border ── */
.site-footer {
  border-top: 2px solid transparent;
  background-image: linear-gradient(var(--footer-bg), var(--footer-bg)),
                    linear-gradient(90deg, var(--purple-400), var(--purple-600), var(--purple-400));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── Premium Cart Drawer ── */
.cart-drawer {
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.18);
  border-left: 1px solid var(--border-light);
}

.cart-header {
  background: linear-gradient(180deg, var(--cream-50), var(--bg-card));
  border-bottom: 1px solid var(--border-color);
}

.cart-header h3 {
  color: var(--text-primary); /* v10.6 Normal Black */  font-weight: 800;
}

.cart-item {
  transition: background 0.2s ease;
  border-radius: 6px;
  padding: 10px 6px;
  margin: 0 -6px;
}

.cart-item:hover {
  background: var(--cream-50);
}

.cart-item-img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cart-item-price {
  color: var(--text-primary); /* v10.6 Normal Black */  font-weight: 800;
}

.cart-footer {
  background: linear-gradient(180deg, var(--bg-card), var(--cream-50));
  border-top: 1px solid var(--border-color);
}

.cart-total-row {
  font-size: 15px;
}

.cart-total-row span:last-child {
  color: var(--text-primary); /* v10.6 Normal Black */  font-weight: 800;
  font-size: 17px;
}

/* ── Premium Order Card ── */
.order-card {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.order-card:hover {
  box-shadow: 0 4px 16px rgba(99, 74, 142, 0.08);
  border-left-color: var(--purple-500);
}

.order-id {
  font-family: 'Inter', monospace;
  letter-spacing: 0.03em;
}

.order-status {
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.order-total span:last-child {
  color: var(--text-primary); /* v10.6 Normal Black */  font-weight: 800;
}

/* ── Premium Tracking Section ── */
.tracking-card {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  overflow: hidden;
}

.tracking-card .form-input {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}

/* ── Premium Toast Notifications ── */
.toast {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);
  animation: yarzToastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes yarzToastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.toast.success {
  border-left: 3px solid var(--success);
}

.toast.error {
  border-left: 3px solid var(--danger);
}

.toast.warning {
  border-left: 3px solid var(--warning);
}

/* ── Premium Product Detail Page ── */
.pd-grid {
  animation: yarzSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-main-image {
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

.pd-thumb {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pd-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pd-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 74, 142, 0.15);
}

.pd-title {
  font-size: 24px;
  line-height: 1.25;
}

.pd-breadcrumb a {
  transition: color 0.15s ease;
}

.pd-breadcrumb a:hover {
  color: var(--accent);
}

/* ── Premium Delivery Info Cards ── */
.pd-delivery-info {
  border-radius: 10px;
  background: var(--cream-50);
  border: 1px solid var(--border-light);
}

.pd-delivery-row svg {
  color: var(--purple-500);
}

/* ── Premium Action Buttons (Product Detail) ── */
.pd-actions .btn-primary {
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pd-actions .btn-outline {
  border-radius: 8px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 700;
  border-width: 1.5px;
}

.pd-actions .btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 74, 142, 0.15);
}

/* ── Premium Qty Controls ── */
.qty-controls {
  border-radius: 8px;
  border: 1.5px solid var(--border-color);
  overflow: hidden;
}

.qty-btn {
  transition: all 0.15s ease;
}

.qty-btn:hover {
  background: var(--purple-50);
  color: var(--accent);
}

.qty-btn:active {
  background: var(--purple-100);
}

/* ── Premium Form Labels ──
   v15.79: Removed uppercase + 700 weight that made every label scream
   "YOUR NAME *". Editorial-quality forms use sentence case + restrained
   weight; the asterisk alone signals required. */
.form-group label {
  letter-spacing: 0.01em;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: none;
  line-height: 1.4;
}

/* ── Premium Modal Overlay ── */
.modal-overlay {
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
}

.modal-overlay.active {
  animation: yarzModalBgIn 0.25s ease;
}

@keyframes yarzModalBgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  animation: yarzModalBoxIn 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
  border-radius: 12px;
}

@keyframes yarzModalBoxIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  background: linear-gradient(180deg, var(--cream-50), var(--bg-card));
}

.modal-header h3 {
  font-size: 17px;
  color: var(--text-primary); /* v10.6 Normal Black */  font-weight: 800;
}

.modal-close {
  border-radius: 8px;
  width: 34px;
  height: 34px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--purple-50);
  color: var(--accent);
  transform: rotate(90deg);
}

/* ── Premium Floating Buttons ── */
.floating-whatsapp-btn,
.live-chat-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

.live-chat-btn.whatsapp:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

/* ── Premium Page Header ── */
.page-header {
  position: relative;
  padding: 40px 0 28px;
}

.page-header h1 {
  color: var(--purple-900);
}

.page-header::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 14px auto 0;
}

/* ── Premium Loading Spinner ── */
.spinner {
  border: 2.5px solid var(--purple-100);
  border-top-color: var(--accent);
}

/* ── Premium Header (Scrolled State) ── */
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(99, 74, 142, 0.08);
}

/* ── Premium Announcement Bar ── */
.announcement-bar {
  font-family: var(--font-bengali);
  letter-spacing: 0.06em;
}

/* ── Premium Hero Section ── */
.hero-section {
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

/* ── Premium Search Result Items ── */
.search-result-item {
  border-radius: 8px;
  padding: 10px;
  transition: all 0.2s ease;
}

.search-result-item:hover {
  background: var(--purple-50);
  transform: translateX(4px);
}

.search-result-item img {
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ── Mobile-Specific Premium Touches ── */
@media (max-width: 768px) {
  /* Premium mobile header */
  .site-header {
    background-color: rgba(251, 248, 241, 0.95); /* fallback */
    -webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);
    background: rgba(255, 253, 248, 0.92);
  }

  /* Better cart drawer on mobile */
  .cart-drawer {
    width: 100% !important;
    max-width: 100vw;
    border-radius: 16px 0 0 0;
    right: 0 !important;
    transform: translateX(110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s !important;
    visibility: hidden;
    pointer-events: none;
  }
  .cart-drawer.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s !important;
  }

  /* Product detail mobile */
  .pd-grid {
    gap: 16px;
  }

  .pd-title {
    font-size: 20px;
  }

  .pd-actions {
    flex-direction: column;
    gap: 8px;
  }

  .pd-actions .btn {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* Mobile form improvements */
  .form-input,
  .form-select {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
  }

  .form-select {
    padding-right: 44px;
  }

  /* Better touch targets */
  .qty-btn {
    width: 44px;
    height: 42px;
  }

  .size-btn {
    width: 52px;
    height: 44px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* Mobile toast position */
  .toast-container {
    top: auto;
    bottom: 16px;
    right: 12px;
    left: 12px;
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }

  /* Premium mobile footer */
  .footer-grid {
    gap: 24px;
    padding: 0 16px;
  }

  /* Better modal on mobile — bottom-sheet pattern.
     ✅ v15.59: scope OUT yarz-info-modal so info popups (COD-disabled,
     Free-Ship Advance) stay center-aligned instead of inheriting the
     bottom-sheet anchor. */
  .modal-overlay:not(.yarz-info-modal) {
    align-items: flex-end;
    padding: 0;
  }

  .modal-overlay:not(.yarz-info-modal) .modal-box {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
  }

  .modal-overlay:not(.yarz-info-modal) .modal-header {
    padding: 18px 20px;
    border-radius: 20px 20px 0 0;
  }

  /* Tracking card mobile */
  .tracking-card {
    border-radius: 10px;
    padding: 20px;
  }

  /* Mobile order card */
  .order-card {
    border-radius: 10px;
    padding: 14px;
  }
}

/* ── Subtle Background Texture (very premium feel) ── */
body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(99, 74, 142, 0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(99, 74, 142, 0.01) 0%, transparent 40%);
}

/* ── Premium Link Underline Effect ── */
.footer-col a {
  position: relative;
}

.footer-col a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.4);
  transition: width 0.25s ease;
}

.footer-col a:hover::after {
  width: 100%;
}

/* ── Cart Item Quantity Controls ── */
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.cart-item-qty button {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
  color: var(--text-secondary);
  background: var(--bg-card);
}

.cart-item-qty button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--purple-50);
}

/* ── Premium Focus States (Accessibility + Beauty) ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--purple-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Prefers Reduced Motion (Accessibility) ── */
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slider-track { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
  .product-card .card-image img { transition: none; }
  .product-card:hover .card-image img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-category-card:hover { transform: none; }
  .dcc-image img { transition: none; }
  .dynamic-category-card:hover .dcc-image img { transform: none; }
}

/* ============================================================
   v5.1: MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.88);
    background-color: rgba(251, 248, 241, 0.95); /* fallback */
    -webkit-backdrop-filter: blur(20px) saturate(180%);backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(99, 74, 142, 0.08);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
    align-items: center;
    justify-content: space-around;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.checkout-open .mobile-bottom-nav,
  body.cart-open .mobile-bottom-nav {
    transform: translateY(100%);
  }

  .mobile-bottom-nav .bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: 6px 0;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    position: relative;
    transition: color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;user-select: none;
  }

  .mobile-bottom-nav .bnav-item:active {
    transform: scale(0.92);
  }

  .mobile-bottom-nav .bnav-item.active {
    color: var(--purple-600);
  }

  .mobile-bottom-nav .bnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
    border-radius: 0 0 3px 3px;
  }

  .mobile-bottom-nav .bnav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-bottom-nav .bnav-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
  }

  .mobile-bottom-nav .bnav-label {
    font-size: 10px;
    line-height: 1;
  }

  .mobile-bottom-nav .bnav-cart-wrap {
    position: relative;
  }

  .mobile-bottom-nav .bnav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #FF6B6B, #EE5A24);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(238, 90, 36, 0.4);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .mobile-bottom-nav .bnav-badge.has-items {
    transform: scale(1);
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* v5.4: Prevent sticky buy bar from blocking WhatsApp button and footer */
  body.has-sticky-bar {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .floating-whatsapp-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.has-sticky-bar .floating-whatsapp-btn {
    transform: translateY(-64px);
  }
}

/* ============================================================
   v11.8: STICKY MOBILE ADD TO CART BAR — admin-controlled
   Now properly gated by [data-sticky-buy="1"] — toggle from admin.
   Premium translucent black design with WhatsApp-button safe spacing.
   ============================================================ */
.sticky-buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998; /* below WhatsApp floating btn (999+), above page content */
  display: none; /* default; .visible class makes it show */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  background: rgba(20, 20, 30, 0.96);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(14px);backdrop-filter: blur(14px);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.32);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.sticky-buy-bar.visible { transform: translateY(0); }
body[data-sticky-buy="1"] .sticky-buy-bar { display: flex; }
/* ✅ v14.4: REMOVED duplicate `body.has-sticky-bar { padding-bottom: 80px }`
   that was overriding the safe-area-aware version above (line ~5417).
   The mobile @media block (max-width: 768px) already sets
   `padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px))`
   which respects the home indicator on iPhone X+. */

.sticky-buy-bar .sbb-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.sticky-buy-bar .sbb-name {
  font-size: 12px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.01em;
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-style: italic;
}
.sticky-buy-bar .sbb-price {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 14px; font-weight: 700;
}
.sticky-buy-bar .sbb-price .sbb-old-price {
  font-size: 11px; color: rgba(255,255,255,0.55);
  text-decoration: line-through; font-weight: 500;
}
.sticky-buy-bar .sbb-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sticky-buy-bar .sbb-btn {
  border: none; border-radius: 8px;
  padding: 9px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sticky-buy-bar .sbb-btn-cart {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}
.sticky-buy-bar .sbb-btn-cart:hover { background: rgba(255,255,255,0.2); }
.sticky-buy-bar .sbb-btn-buy {
  background: linear-gradient(135deg, #C9A23F 0%, #D4910A 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(201, 162, 63, 0.35);
}
.sticky-buy-bar .sbb-btn-buy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201, 162, 63, 0.45); }
.sticky-buy-bar .sbb-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* Hide on desktop — sticky bar is mobile-only */
@media (min-width: 768px) {
  .sticky-buy-bar { display: none !important; }
}

/* ============================================================
   v5.4: FILTER DRAWER & OPTIONS
   ============================================================ */
.filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: all 0.2s ease;
  background: #fff;
}
.filter-radio:hover {
  background: var(--purple-50);
  border-color: var(--purple-200);
}
.filter-radio input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-radio input[type="radio"]:checked + span {
  font-weight: 700;
  color: var(--accent);
}
.size-filter-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.size-filter-options .filter-radio {
  gap: 6px;
}

/* ============================================================
   v9.7: FILTER DRAWER FIXES
   ============================================================ */

/* v9.7 FIX: Prevent filter/cart drawer from peeking when resizing.
   At mobile breakpoint, width becomes 100% but right:-400px isn't enough
   to hide a 100vw-wide drawer. Use transform for GPU-accelerated hiding. */
@media (max-width: 768px) {
  #filter-drawer,
  #filter-drawer.cart-drawer {
    right: 0 !important;
    transform: translateX(110%) !important;
    width: 100% !important;
    max-width: 100vw;
    visibility: hidden;
    pointer-events: none;
  }
  #filter-drawer.cart-drawer.open,
  #filter-drawer.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Also fix cart drawer hide position */
  #cart-drawer:not(.open) {
    right: 0 !important;
    transform: translateX(110%) !important;
    visibility: hidden;
    pointer-events: none;
  }
  #cart-drawer.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* v9.7: Compact filter text for mobile */
@media (max-width: 768px) {
  .filter-radio {
    font-size: 12px;
    padding: 7px 10px;
    gap: 6px;
  }
  .filter-radio input[type="radio"] {
    width: 14px;
    height: 14px;
  }
  .size-filter-options {
    gap: 5px;
  }
  .size-filter-options .filter-radio {
    padding: 6px 8px;
    font-size: 11.5px;
  }
  /* Filter section headings — compact + purple accent */
  #filter-drawer .cart-body h4 {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--purple-600) !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--purple-100);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* Category section icons via CSS */
  #filter-drawer .cart-body h4::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--purple-100);
    flex-shrink: 0;
  }
}

/* v9.7: Desktop — filter section headings with accent color */
#filter-drawer .cart-body h4 {
  color: var(--purple-700);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Small purple square before each section title */
#filter-drawer .cart-body h4::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  flex-shrink: 0;
}

/* ============================================================
   v9.8: MOBILE FILTER DRAWER — FIT EVERYTHING IN ONE SCREEN
   Problem: On mobile, 3 size categories (Shirt/Panjabi/Pant) with
   4 sizes each + sort options = too long for viewport.
   Fix: Flex layout, 4-col grid, ultra-compact spacing, sticky footer.
   ============================================================ */
@media (max-width: 768px) {
  #filter-drawer.cart-drawer,
  #filter-drawer {
    height: 100dvh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #filter-drawer .cart-header {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    background: var(--bg-card);
    z-index: 2;
  }
  #filter-drawer .cart-body {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 14px !important;
    -webkit-overflow-scrolling: touch;
  }
  #filter-drawer .cart-footer {
    flex-shrink: 0 !important;
    background: var(--bg-card) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
    padding: 10px 14px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--border-light) !important;
    z-index: 2;
  }
  #filter-drawer .cart-footer .btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  #filter-drawer .cart-footer .btn + .btn {
    margin-top: 6px !important;
  }
  /* Compact sort options */
  #filter-drawer .filter-options {
    gap: 3px !important;
  }
  #filter-drawer .filter-radio {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  #filter-drawer .filter-radio input[type="radio"] {
    width: 13px !important;
    height: 13px !important;
  }
  /* 4-column size grid — all 4 sizes (M/L/XL/XXL) fit in one row */
  #filter-drawer .size-filter-options {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
  }
  #filter-drawer .size-filter-options .filter-radio {
    padding: 5px 4px !important;
    font-size: 11px !important;
    justify-content: center;
    gap: 4px !important;
  }
  /* Override inline-styled category section dividers inside size grid */
  #filter-drawer .size-filter-options > div[style] {
    margin: 8px 0 2px !important;
    padding-bottom: 2px !important;
    font-size: 10px !important;
  }
  /* Sort section margin */
  #filter-drawer .cart-body > div {
    margin-bottom: 12px !important;
  }
  #filter-drawer .cart-body > div[style*="margin-bottom:24px"] {
    margin-bottom: 12px !important;
  }
  /* Sort heading compact */
  #filter-drawer .cart-body h4 {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
}


/* ============================================================
   v9.8: FLASH SALE COUNTDOWN BAR
   ============================================================ */
.flash-sale-bar {
  background: linear-gradient(135deg, #634A8E 0%, #4E3A72 40%, #7B5EA7 100%);
  color: #fff;
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.flash-sale-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: flashSaleShimmer 3s ease-in-out infinite;
}
@keyframes flashSaleShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}
.flash-sale-bar .flash-icon {
  font-size: 20px;
  animation: flashPulse 1.5s ease-in-out infinite;
}
@keyframes flashPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.flash-sale-bar .flash-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.flash-sale-bar .flash-timer {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.flash-sale-bar .flash-digit {
  background: rgba(255,255,255,0.18);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'Inter', monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  min-width: 32px;
  text-align: center;
}
.flash-sale-bar .flash-sep {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.6;
  animation: flashBlink 1s step-end infinite;
}
@keyframes flashBlink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.2; }
}
@media (max-width: 600px) {
  .flash-sale-bar {
    padding: 10px 14px;
    font-size: 12px;
    gap: 8px;
  }
  .flash-sale-bar .flash-title { font-size: 12px; }
  .flash-sale-bar .flash-digit {
    padding: 3px 6px;
    font-size: 13px;
    min-width: 26px;
  }
}


/* ============================================================
   v9.8: EXIT-INTENT POPUP — Glassmorphism Premium Design
   ============================================================ */
.yarz-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.yarz-popup-overlay.visible {
  opacity: 1;
}
.yarz-popup-card {
  position: relative;
  max-width: 400px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yarz-popup-overlay.visible .yarz-popup-card {
  transform: scale(1) translateY(0);
}
.yarz-popup-card .popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-200);
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.yarz-popup-card .popup-close:hover {
  background: var(--danger);
  color: #fff;
}
.yarz-popup-card .popup-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-100), var(--purple-200));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 30px;
}
.yarz-popup-card .popup-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-family: var(--font-bengali);
}
.yarz-popup-card .popup-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  font-family: var(--font-bengali);
}
.yarz-popup-card .popup-cta {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-800));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(99,74,142,0.3);
  font-family: var(--font-bengali);
}
.yarz-popup-card .popup-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(99,74,142,0.4);
}

/* Promo popup — image-based */
.yarz-promo-popup-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yarz-popup-overlay.visible .yarz-promo-popup-card {
  transform: scale(1) translateY(0);
}
.yarz-promo-popup-card img {
  width: 100%;
  display: block;
}
.yarz-promo-popup-card .popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.2s;
}
.yarz-promo-popup-card .popup-close:hover {
  background: rgba(0,0,0,0.8);
}


/* ============================================================
   v9.8: IMAGE HOVER EFFECTS — Applied via data-hover attribute
   ============================================================ */
.product-card[data-hover="zoom"]:hover .card-image img {
  transform: scale(1.08);
}
.product-card[data-hover="slide"] .card-image img {
  transition: transform 0.6s ease;
}
.product-card[data-hover="slide"]:hover .card-image img {
  transform: translateY(-8%) scale(1.02);
}
.product-card[data-hover="fade"] .card-image img {
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.product-card[data-hover="fade"]:hover .card-image img {
  opacity: 0.85;
  transform: scale(1.01);
}
.product-card[data-hover="shine"] .card-image {
  position: relative;
}
.product-card[data-hover="shine"] .card-image::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  z-index: 1;
}
.product-card[data-hover="shine"]:hover .card-image::after {
  left: 150%;
}


/* ============================================================
   v9.8: DYNAMIC SECTION BANNER (Homepage Builder)
   ============================================================ */
.dynamic-section-banner {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.dynamic-section-banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.dynamic-section-banner:hover img {
  transform: scale(1.02);
}
.dynamic-section-banner a {
  display: block;
  line-height: 0;
}
@media (max-width: 768px) {
  .dynamic-section-banner {
    border-radius: 8px;
    margin-bottom: 14px;
  }
}


/* ============================================================
   v9.8: TRUST BADGES — Premium SVG-based design
   ============================================================ */
.yarz-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(5,150,105,0.06), rgba(5,150,105,0.02));
  border: 1px solid rgba(5,150,105,0.12);
  border-radius: 12px;
  flex-wrap: wrap;
}
.yarz-trust-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  white-space: nowrap;
}
.yarz-trust-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.yarz-trust-badge-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #059669;
  opacity: 0.4;
  flex-shrink: 0;
}


/* ============================================================
   v9.8: LOYALTY POINTS DISPLAY
   ============================================================ */
.loyalty-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(146,64,14,0.15);
}
.loyalty-points-badge svg {
  width: 16px;
  height: 16px;
}
.loyalty-points-earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.04));
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 10px;
  font-size: 12px;
  color: #92400E;
  font-weight: 600;
}
.loyalty-points-earned svg {
  width: 18px;
  height: 18px;
  color: #F59E0B;
}


/* ============================================================
   v9.8: ABANDONED CART REMINDER BANNER
   ============================================================ */
.abandoned-cart-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  max-width: 380px;
  width: calc(100% - 32px);
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(99,74,142,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 200;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.abandoned-cart-banner.visible {
  transform: translateX(-50%) translateY(0);
}
.abandoned-cart-banner .acb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abandoned-cart-banner .acb-icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
.abandoned-cart-banner .acb-content {
  flex: 1;
  min-width: 0;
}
.abandoned-cart-banner .acb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-bengali);
}
.abandoned-cart-banner .acb-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.abandoned-cart-banner .acb-btn {
  padding: 8px 16px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.abandoned-cart-banner .acb-btn:hover {
  background: #128C7E;
}
.abandoned-cart-banner .acb-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream-200);
  border: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .abandoned-cart-banner {
    bottom: 70px;
    max-width: calc(100% - 24px);
  }
}


/* ============================================================
   v9.8: ANNOUNCEMENT BAR — Marquee for long text
   ============================================================ */
.announcement-bar.has-marquee {
  overflow: hidden;
  white-space: nowrap;
}
.announcement-bar.has-marquee span {
  display: inline-block;
  animation: marqueeScroll 20s linear infinite;
  padding-left: 100%;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
  .announcement-bar {
    font-size: 10px;
    padding: 5px 12px;
  }
}

/* ============================================================== */
/* 2026 DESKTOP UI ENHANCEMENTS v3: TYPOGRAPHY QUOTE & FULL GRID  */
/* ============================================================== */

/* ──── 1. FULL-WIDTH PRODUCT GRID (Desktop) ──── */
@media (min-width: 1024px) {
  #all-products-section .container {
    max-width: 100% !important;
    padding-left: 32px;
    padding-right: 32px;
  }
  #all-products-section .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

/* ──── 2. PREMIUM FASHION TYPOGRAPHY QUOTE ──── */
/* Clean, elegant handwritten-style quote on light background    */
/* Like premium stationery / fashion magazine editorial          */

.fashion-typo-section {
  width: 100%;
  text-align: center;
  padding: 36px 24px;
  margin: 20px 0 0 0;
  background: var(--cream-50, #FFFDF8);
  position: relative;
  overflow: hidden;
}

/* Subtle top & bottom thin lines like notebook ruling */
.fashion-typo-section::before,
.fashion-typo-section::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-300, #BBA8D6), transparent);
}
.fashion-typo-section::before { top: 0; }
.fashion-typo-section::after  { bottom: 0; }

.fashion-typo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 700px;
  margin: 0 auto;
}

.fashion-typo-line {
  display: block;
  line-height: 1.4;
}

.fashion-typo-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: var(--purple-800, #634A8E);
  letter-spacing: 0.01em;
}

.fashion-typo-sub {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  color: var(--purple-600, #634A8E);
  letter-spacing: 0.01em;
}

.fashion-typo-accent {
  display: inline-block;
  margin-top: 12px;
  /* v13.0: Replaced 'Playfair Display SC' with regular Playfair Display.
     The SC (small-caps) look is replicated via uppercase + extreme letter-spacing —
     visually identical at 12px, saves 3 woff2 fetches. */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--purple-400, #9B7DBF);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .fashion-typo-section {
    padding: 28px 20px;
    margin: 12px 0 0 0;
  }
  .fashion-typo-main,
  .fashion-typo-sub {
    font-size: 20px;
  }
  .fashion-typo-accent {
    font-size: 10px;
    margin-top: 10px;
  }
  .fashion-typo-section::before,
  .fashion-typo-section::after {
    width: 80px;
  }
}

@media (max-width: 400px) {
  .fashion-typo-main,
  .fashion-typo-sub {
    font-size: 17px;
  }
  .fashion-typo-section {
    padding: 22px 16px;
  }
}


/* ✅ v15.55: REMOVED the prefers-color-scheme:dark price override.
   This site is light-only (cream bg always). The previous rule painted
   .sale-price / .pd-sale-price / .cart-item-price text in cream
   (#F5F0E6) when the user's system was in dark mode — but the page
   background stays cream regardless, so prices became invisible.
   The <meta name="color-scheme" content="light"> in index.html now
   tells browsers to skip auto-dark inversion entirely; this CSS guard
   is no longer needed. */


/* ============================================================
   ✅ v11 EXTRAS — Premium Storefront Features
   Sale Countdown, Free Shipping Bar, Wishlist, FAQ, Testimonials,
   Recently Viewed, Best Sellers, Newsletter Popup, Promo Slots,
   Card Style Variants, Float Chat Position, Sticky Buy gating
   ============================================================ */

/* ---- Sale Countdown Bar ---- */
.yarz-countdown-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #DC2626 0%, #EF4444 50%, #DC2626 100%);
  position: relative;
  z-index: 5;
  flex-wrap: wrap;
}
.yarz-countdown-bar.style-black { background: linear-gradient(90deg, #111 0%, #2a2a2a 50%, #111 100%); }
.yarz-countdown-bar.style-gradient { background: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6); }
.yarz-countdown-bar.style-brand { background: var(--accent); }
.yarz-countdown-bar .cdb-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-style: italic;
  letter-spacing: 0.02em;
}
.yarz-countdown-bar .cdb-timer { display: inline-flex; gap: 6px; align-items: center; }
.yarz-countdown-bar .cdb-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 3px 8px;
  min-width: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
}
.yarz-countdown-bar .cdb-cell small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Free Shipping Bar ---- */
.yarz-freeship-bar {
  background: #16A34A;
  color: #fff;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 4;
  line-height: 1.2;
}
/* ✅ v11.8: thickness variants — user-controllable from admin */
.yarz-freeship-bar.yarz-freeship-slim    { padding: 3px 12px; font-size: 11px; }
.yarz-freeship-bar.yarz-freeship-regular { padding: 6px 12px; font-size: 12.5px; }
.yarz-freeship-bar.yarz-freeship-thick   { padding: 10px 14px; font-size: 14px; }

@media (max-width: 600px) {
  .yarz-freeship-bar.yarz-freeship-slim    { padding: 3px 10px; font-size: 10.5px; }
  .yarz-freeship-bar.yarz-freeship-regular { padding: 5px 10px; font-size: 11.5px; }
  .yarz-freeship-bar.yarz-freeship-thick   { padding: 8px 12px; font-size: 13px; }
}

/* ---- Wishlist Heart — v11.8 premium frosted-glass · v15.81 size dialed back ---- */
/* v15.81: Pre-fix sizing (34px/17px) felt oversized on mobile product cards
   where the card itself is small (~50% viewport on a phone). Default trimmed
   to 30px / 14px icon, with a smaller 28px / 13px variant on phones — still
   well above the 24px Apple HIG touch-target floor (the ::before extends the
   hit area). */
.wishlist-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(8px) saturate(1.4);backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  color: rgba(26,26,46,0.45);
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .25s, background .25s, box-shadow .25s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
/* Invisible hit-area extender so the small visual button still hits a 44×44 tap zone */
.wishlist-heart::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.wishlist-heart svg { width: 14px; height: 14px; transition: fill .25s, transform .35s; }
.wishlist-heart:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,0.92);
  color: #ef4444;
  box-shadow: 0 4px 14px rgba(239,68,68,0.16), 0 1px 3px rgba(0,0,0,0.06);
}
.wishlist-heart.active {
  color: #ef4444;
  background: linear-gradient(135deg, #fff 0%, #ffe4e6 100%);
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 3px 12px rgba(239,68,68,0.22);
}
.wishlist-heart.active svg {
  fill: #ef4444;
  animation: heartPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* v15.81: Mobile — even smaller, still tappable via ::before hit-extender */
@media (max-width: 768px) {
  .wishlist-heart {
    width: 28px;
    height: 28px;
    top: 7px;
    right: 7px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .wishlist-heart svg { width: 13px; height: 13px; }
  .wishlist-heart::before { inset: -8px; } /* extend tap area to ~44px */
}
@media (max-width: 480px) {
  .wishlist-heart {
    width: 26px;
    height: 26px;
    top: 6px;
    right: 6px;
  }
  .wishlist-heart svg { width: 12px; height: 12px; }
  .wishlist-heart::before { inset: -9px; }
}
.wishlist-count {
  display: inline-flex;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* ---- New Arrival Badge — v11.8 premium gold-foil ---- */
.product-badge.badge-new-arrival {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  color: #d4af37;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border: 1px solid rgba(212,175,55,0.5);
  text-shadow: 0 0 8px rgba(212,175,55,0.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}
.product-badge.badge-new-arrival::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(212,175,55,0.45), transparent);
  animation: yarzShine 3s ease-in-out infinite;
}
@keyframes yarzShine {
  0%, 70% { left: -120%; }
  100% { left: 220%; }
}

/* ===== v11.8: Premium Auto-Generated Sections ===== */
.yarz-extra-section {
  padding: 48px 0 36px;
  position: relative;
}

.yarz-extra-section .extra-section-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.05em;
  color: var(--purple-900, #2A1E3E);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 6px 0;
  line-height: 1.15;
}

/* Decorative underline ornament */
.yarz-extra-section .extra-section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent, #634A8E);
  border-radius: 1px;
  margin: 14px auto 26px;
}

.yarz-extra-section .extra-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

.yarz-extra-section .extra-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: 10px 10px 12px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .25s;
  position: relative;
  overflow: hidden;
}

.yarz-extra-section .extra-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(212,175,55,0.06));
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.yarz-extra-section .extra-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.04);
  border-color: rgba(212,175,55,0.35);
}
.yarz-extra-section .extra-card:hover::before { opacity: 1; }

.yarz-extra-section .extra-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 9px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.yarz-extra-section .extra-card:hover img { transform: scale(1.04); }

.yarz-extra-section .extra-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}

.yarz-extra-section .extra-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #634A8E);
  margin-top: 3px;
  font-feature-settings: "tnum";
}

@media (max-width: 600px) {
  .yarz-extra-section { padding: 32px 0 24px; }
  .yarz-extra-section .extra-section-title { font-size: 24px; }
  .yarz-extra-section .extra-section-title::after { width: 44px; margin: 10px auto 18px; }
  .yarz-extra-section .extra-row { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
}

/* Best-Sellers section — premium gold-trim frame */
#yarz-best-sellers {
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.04) 50%, transparent 100%);
  position: relative;
}
#yarz-best-sellers::before,
#yarz-best-sellers::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4) 30%, rgba(212,175,55,0.4) 70%, transparent);
}
#yarz-best-sellers::before { top: 0; }
#yarz-best-sellers::after { bottom: 0; }

#yarz-best-sellers .extra-section-title {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Best sellers custom grid layout */
.best-sellers-custom-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1200px) {
  .best-sellers-custom-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 992px) {
  .best-sellers-custom-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 768px) {
  .best-sellers-custom-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  #yarz-best-sellers .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---- Testimonials ---- */
.yarz-testimonials .testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.yarz-testimonials .testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.yarz-testimonials .testimonial-stars {
  color: #F59E0B;
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.yarz-testimonials .testimonial-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 14px;
}
.yarz-testimonials .testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.yarz-testimonials .testimonial-author img,
.yarz-testimonials .testimonial-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

/* ---- FAQ ---- */
.yarz-faq .faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yarz-faq .faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.yarz-faq .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
}
.yarz-faq .faq-item summary::-webkit-details-marker { display: none; }
.yarz-faq .faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  margin-left: 12px;
  transition: transform 0.2s ease;
}
.yarz-faq .faq-item[open] summary { background: var(--accent-light); }
.yarz-faq .faq-item[open] summary::after { content: '−'; }
.yarz-faq .faq-answer {
  padding: 0 16px 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---- Newsletter & Promo Popup Cards ---- */
.yarz-popup-overlay .yarz-popup-card.newsletter-card {
  text-align: center;
  padding: 28px 22px 24px;
}
.yarz-popup-overlay .newsletter-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  font-size: 14px;
  margin: 14px 0 10px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: inherit;
}
.yarz-popup-overlay .newsletter-input:focus { border-color: var(--accent); }
.yarz-popup-overlay .newsletter-result {
  margin-top: 12px;
  padding: 10px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.yarz-popup-overlay .yarz-popup-card.promo-popup-card {
  padding: 8px;
  max-width: 420px;
  background: transparent;
  box-shadow: none;
}
.yarz-popup-overlay .yarz-popup-card.promo-popup-card .popup-close {
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  z-index: 2;
}

/* ---- Card Style Variants (data-card-style on body) ---- */
body[data-card-style="square"] .product-card,
body[data-card-style="square"] .product-card .card-image,
body[data-card-style="square"] .product-card .card-image img { border-radius: 0 !important; }
body[data-card-style="minimal"] .product-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body[data-card-style="glass"] .product-card {
  background: rgba(255,255,255,0.55) !important;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6) !important;
}

/* ---- OOS Hide ---- */
body[data-oos-hide="1"] .product-card.out-of-stock { display: none !important; }

/* ---- Float Chat Position ---- */
body[data-float-pos="bottom-left"] #floating-whatsapp-btn,
body[data-float-pos="bottom-left"] .floating-whatsapp-btn {
  left: 16px !important;
  right: auto !important;
}
body[data-float-pos] #floating-whatsapp-btn,
body[data-float-pos] .floating-whatsapp-btn {
  bottom: var(--yarz-float-offset, 20px) !important;
}

/* ---- Sticky Buy Gating (only show when admin enabled) ---- */
body:not([data-sticky-buy="1"]) #sticky-buy-bar { display: none !important; }

/* ---- Mobile responsive tweaks ---- */
@media (max-width: 600px) {
  .yarz-countdown-bar { font-size: 11px; gap: 8px; padding: 6px 10px; }
  .yarz-countdown-bar .cdb-cell { padding: 2px 6px; min-width: 28px; }
  .yarz-extra-section .extra-section-title { font-size: 22px; }
  .yarz-extra-section .extra-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .yarz-faq .faq-item summary { font-size: 13px; padding: 12px 14px; }
}


/* ============================================================
   v11.8: ADVANCED (ROYAL) TAB STYLES
   5 features: Marquee, Trust Strip, Royal Frame, Editorial, IG Grid
   ============================================================ */

/* Default royal accent — overridable from admin */
:root { --yarz-royal-accent: #D4910A; }

/* ===== A1. ROYAL MARQUEE ===== */
.yarz-royal-marquee {
  width: 100%;
  background: #1a1a1a;
  color: #D4910A;
  overflow: hidden;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(212, 145, 10, 0.18);
  padding: 0;
}
.yarz-royal-marquee .rm-track {
  display: inline-flex;
  white-space: nowrap;
  padding: 8px 0;
  align-items: center;
  gap: 32px;
  animation: rmScroll 40s linear infinite;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.yarz-royal-marquee.speed-fast   .rm-track { animation-duration: 22s; }
.yarz-royal-marquee.speed-normal .rm-track { animation-duration: 32s; }
.yarz-royal-marquee.speed-slow   .rm-track { animation-duration: 50s; }
.yarz-royal-marquee .rm-item {
  display: inline-block;
  font-weight: 500;
  text-transform: none;
}
.yarz-royal-marquee .rm-sep {
  color: var(--yarz-royal-accent, #D4910A);
  opacity: 0.6;
  font-size: 10px;
}
@keyframes rmScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.yarz-royal-marquee:hover .rm-track { animation-play-state: paused; }
@media (max-width: 600px) {
  .yarz-royal-marquee .rm-track { font-size: 11px; gap: 22px; padding: 6px 0; }
}

/* ===== A2. PRODUCT TRUST STRIP ===== */
.pd-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 8px;
  padding: 12px 8px;
  background: linear-gradient(135deg, rgba(26,26,46,0.04) 0%, rgba(212,145,10,0.04) 100%);
  border-radius: 12px;
  border: 1px solid rgba(212, 145, 10, 0.15);
}
.pd-trust-strip .trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 4px 2px;
}
.pd-trust-strip .tb-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
.pd-trust-strip .tb-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .pd-trust-strip { grid-template-columns: repeat(4, 1fr); padding: 10px 4px; gap: 4px; }
  .pd-trust-strip .tb-icon { font-size: 18px; }
  .pd-trust-strip .tb-label { font-size: 9px; }
}

/* ===== A3. ROYAL CARD FRAME ===== */
/* Gold-foil corner accents — premium boutique vibe */
body[data-royal-frame="corners"] .product-card {
  position: relative;
}
body[data-royal-frame="corners"] .product-card::before,
body[data-royal-frame="corners"] .product-card::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 4;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
body[data-royal-frame="corners"] .product-card::before {
  top: 6px; left: 6px;
  border-top: 2px solid var(--yarz-royal-accent);
  border-left: 2px solid var(--yarz-royal-accent);
}
body[data-royal-frame="corners"] .product-card::after {
  bottom: 6px; right: 6px;
  border-bottom: 2px solid var(--yarz-royal-accent);
  border-right: 2px solid var(--yarz-royal-accent);
}
body[data-royal-frame="corners"] .product-card:hover::before,
body[data-royal-frame="corners"] .product-card:hover::after {
  width: 26px; height: 26px;
}

/* Thin gold border variant */
body[data-royal-frame="border"] .product-card {
  border: 1px solid var(--yarz-royal-accent) !important;
  box-shadow: 0 4px 14px -8px var(--yarz-royal-accent);
}

/* Subtle gold glow variant */
body[data-royal-frame="glow"] .product-card {
  box-shadow: 0 0 0 1px rgba(212,145,10,0.08), 0 8px 24px -12px var(--yarz-royal-accent);
}
body[data-royal-frame="glow"] .product-card:hover {
  box-shadow: 0 0 0 1px var(--yarz-royal-accent), 0 12px 32px -12px var(--yarz-royal-accent);
}

/* ===== A4. EDITORIAL STORY SECTION ===== */
.yarz-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 48px auto;
  max-width: 1200px;
  background: var(--bg-card, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,0.18);
  position: relative;
}
.yarz-editorial .ed-image {
  background-size: cover;
  background-position: center;
  min-height: 380px;
  position: relative;
}
.yarz-editorial .ed-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 60%, rgba(212,145,10,0.08));
}
.yarz-editorial .ed-content {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.yarz-editorial .ed-content::before {
  content: '';
  position: absolute;
  left: 48px; top: 30px;
  width: 36px; height: 2px;
  background: var(--yarz-royal-accent, #D4910A);
}
.yarz-editorial .ed-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.2;
  margin: 14px 0 16px;
  color: var(--text-primary, #1a1a2e);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.yarz-editorial .ed-body {
  font-size: 15px;
  color: var(--text-secondary, #4b5563);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 460px;
}
.yarz-editorial .ed-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yarz-royal-accent, #D4910A);
  border-bottom: 1.5px solid var(--yarz-royal-accent, #D4910A);
  padding: 4px 0;
  text-decoration: none;
  transition: gap 0.3s, color 0.2s;
  gap: 6px;
}
.yarz-editorial .ed-cta:hover {
  gap: 12px;
  color: #1a1a2e;
}
@media (max-width: 768px) {
  .yarz-editorial { grid-template-columns: 1fr; margin: 32px 16px; }
  .yarz-editorial .ed-image { min-height: 240px; }
  .yarz-editorial .ed-content { padding: 32px 24px; }
  .yarz-editorial .ed-content::before { left: 24px; top: 20px; width: 24px; }
  .yarz-editorial .ed-title { font-size: 24px; }
  .yarz-editorial .ed-body { font-size: 14px; }
}

/* ===== A5. INSTAGRAM-STYLE GALLERY ===== */
.yarz-ig-grid {
  padding: 48px 0 24px;
}
.yarz-ig-grid .ig-grid-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-width: 1200px;
  margin: 0 auto;
}
.yarz-ig-grid .ig-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f3f4f6;
  display: block;
}
.yarz-ig-grid .ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}
.yarz-ig-grid .ig-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,26,46,0.55);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.yarz-ig-grid .ig-tile:hover img { transform: scale(1.06); }
.yarz-ig-grid .ig-tile:hover .ig-overlay { opacity: 1; }
@media (max-width: 768px) {
  .yarz-ig-grid .ig-grid-row { grid-template-columns: repeat(3, 1fr); gap: 3px; }
}
@media (max-width: 480px) {
  .yarz-ig-grid { padding: 32px 0 16px; }
  .yarz-ig-grid .ig-grid-row { grid-template-columns: repeat(3, 1fr); gap: 2px; }
}


/* ===== v11.8: Product Page Video ===== */
.pd-video-wrap {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4/5;
  position: relative;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25);
}
.pd-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .pd-video-wrap { aspect-ratio: 3/4; }
}


/* ===== v11.8: Quick View Modal ===== */
.yarz-quickview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 15, 25, 0.72);
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: qvFadeIn 0.25s ease;
}
@keyframes qvFadeIn { from { opacity: 0; } to { opacity: 1; } }

.yarz-quickview-card {
  background: var(--bg-card, #fff);
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,0.45);
  animation: qvSlideUp 0.35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qvSlideUp {
  from { transform: translateY(30px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.qv-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: none;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: all 0.2s;
  color: #1a1a2e;
}
.qv-close:hover { transform: rotate(90deg); background: #fff; }

.qv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  max-height: 90vh;
}
.qv-image {
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qv-info {
  padding: 36px 32px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.qv-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted, #888);
  font-weight: 600;
  margin-bottom: 8px;
}
.qv-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.25;
}
.qv-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.qv-sale-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent, #634A8E);
  font-family: var(--font-sans, 'Inter', sans-serif);
}
.qv-reg-price {
  font-size: 14px;
  text-decoration: line-through;
  color: var(--text-muted, #999);
}
.qv-disc {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.qv-sizes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-secondary, #4b5563);
  margin: 14px 0 8px;
}
.qv-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.qv-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  background: var(--bg, #fff);
}
.qv-size-out {
  opacity: 0.35;
  text-decoration: line-through;
}
.qv-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary, #4b5563);
  margin-bottom: 22px;
  flex: 1;
  min-height: 0;
}
.qv-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.qv-btn-full {
  width: 100%;
  padding: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

body.yarz-quickview-open { overflow: hidden; }

@media (max-width: 768px) {
  .yarz-quickview-overlay { padding: 0; align-items: flex-end; }
  .yarz-quickview-card {
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    width: 100%;
  }
  .qv-grid { grid-template-columns: 1fr; max-height: 92vh; }
  .qv-image { aspect-ratio: 4/3; max-height: 280px; }
  .qv-info { padding: 24px 20px; }
  .qv-title { font-size: 22px; }
  .qv-sale-price { font-size: 20px; }
}

/* Quick View button on product card hover */
.product-card .quick-view-btn {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(20, 20, 30, 0.92);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transition: all 0.25s ease;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
  z-index: 5;
  white-space: nowrap;
}
.product-card:hover .quick-view-btn {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.product-card .quick-view-btn:hover { background: #1a1a2e; }
@media (max-width: 768px) {
  .product-card .quick-view-btn { display: none; }
}

/* ===== ACCESSIBILITY ENHANCEMENTS (WCAG 2.1 AA) ===== */
/* Visible focus indicators for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline only when using mouse */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure minimum touch target size (44x44px) */
.filter-radio,
.size-btn,
/* Accessible touch targets for qty-btn */
.qty-btn {
  min-width: 44px;
  min-height: 44px;
}

/* Expand touch target of slider dots without making the dot huge */
.slider-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* Reduced motion support Disabled */

/* Skip to content link (screen reader + keyboard) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
}


/* ============================================================
   v15 — BURGUNDY HERITAGE THEME (Royal British Tailor)
   ------------------------------------------------------------
   This is an OVERRIDE LAYER. To revert to v14 lavender purple,
   delete everything from this comment to end-of-file.
   Direction:  Burgundy #ff004c  +  Off-white #FAFAF7  +  Ink #1A1411
   Display:    Cormorant Garamond (loaded in HTML <head>)
   Body:       Inter (unchanged)
   Bengali:    Hind Siliguri (unchanged)
   ============================================================ */

:root {
  /* Burgundy palette */
  --burgundy-50:  #FAF3F4;
  --burgundy-100: #F2E0E2;
  --burgundy-200: #E0B7BC;
  --burgundy-300: #C28890;
  --burgundy-400: #A05863;
  --burgundy-500: #82323F;
  --burgundy-600: #ff004c;
  --burgundy-700: #cc003d;
  --burgundy-800: #3F1118;
  --burgundy-900: #2A0B10;

  /* Re-map old purple tokens so any leftover usage transitions automatically */
  --purple-50:  #FAF3F4;
  --purple-100: #F2E0E2;
  --purple-200: #E0B7BC;
  --purple-300: #C28890;
  --purple-400: #A05863;
  --purple-500: #82323F;
  --purple-600: #ff004c;
  --purple-700: #cc003d;
  --purple-800: #3F1118;
  --purple-900: #2A0B10;

  /* Paper / off-white palette (replaces cream) */
  --cream-50:  #FFFFFF;
  --cream-100: #FAFAF7;
  --cream-200: #F4F2EC;
  --cream-300: #E8E5DC;
  --cream-400: #DDD9CE;
  --cream-500: #C9C4B6;

  /* Functional tokens */
  --bg-primary:    #FAFAF7;
  --bg-secondary:  #FFFFFF;
  --bg-card:       #FFFFFF;
  --text-primary:  #1A1411;
  --text-secondary:#3A3530;
  --text-muted:    #4A4A5A;
  --text-light:    #555566;
  --border-color:  #E8E5DC;
  --border-light:  #F0EDE6;
  --accent:        #ff004c;
  --accent-hover:  #cc003d;
  --accent-light:  #FAF3F4;
  --accent-subtle: #F2E0E2;
  --link-color:    #ff004c;
  --sale-price:    #1A1411;
  --footer-bg:     #1A1411;
  --footer-text:   rgba(255, 255, 255, 0.7);

  /* ✅ v16.4: Alias tokens used by inline JS markup (cart/checkout/confirm/
     order-success/tracking). These were referenced but never defined, so
     panels rendered with no background and near-invisible text. Map them to
     the real theme tokens so everything resolves correctly site-wide.
     (--brand is already aliased to var(--accent) elsewhere; not redefined here.) */
  --ink-1:      #1A1411;
  --ink-2:      #3A3530;
  --ink-3:      #4A4A5A;
  --surface-1:  #F4F2EC;
  --surface-50: #FAFAF7;
  --text-main:  #1A1411;

  /* Typography swap */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  /* Refined shadow scale */
  --shadow-xs: 0 1px 2px rgba(26, 20, 17, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 20, 17, 0.05);
  --shadow-md: 0 2px 8px rgba(26, 20, 17, 0.06);
  --shadow-lg: 0 6px 16px rgba(26, 20, 17, 0.08);
  --shadow-card: 0 1px 2px rgba(26, 20, 17, 0.04);

  /* Slower, calmer transitions */
  --transition-fast: 0.18s ease-out;
  --transition: 0.28s ease-out;
  --transition-slow: 0.45s ease-out;
}

/* Body */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Header */
.site-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

/* Logo wordmark — premium serif, refined weight (was 700; v15.78 dialed
   back to 600 because the stacked default `font-weight: 600` on .yarz-mark
   was being smashed to 700 here, which made the wordmark look chunky and
   unrefined on mobile. Cormorant Garamond at 600 is the editorial sweet
   spot for fashion brands.) */
.brand-logo, .logo-text {
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Announcement bar — warm ink (default; admin can override via inline style)
   ✅ v15.30 FIX: The `!important` flags here were blocking admin's color
   choice in Website Control. Now uses CSS variables so admin's runtime
   inline style (set via JS) wins, and these stay as fallback defaults. */
.announcement-bar {
  background: var(--yarz-ann-bg, var(--text-primary));
  color: var(--yarz-ann-color, rgba(255, 255, 255, 0.92));
}
body.has-announcement::before { background: var(--yarz-ann-bg, var(--text-primary)); }

/* Slower marquee */
.announcement-bar.has-marquee .marquee,
.announcement-bar.has-marquee > * {
  animation-duration: 32s !important;
}

/* Buttons — solid, no gradient, no overshoot */
.btn {
  border-radius: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 11px 22px;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-primary {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent);
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover);
  transform: none !important;
}
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.btn-ghost:hover {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
.btn-lg { padding: 14px 28px; font-size: 12px; }
.btn-sm { padding: 7px 14px; font-size: 10px; }

/* Product cards — borderless, sharp */
.product-card {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.product-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}
.product-card:hover .card-image img {
  transform: scale(1.015);
}
.product-card .card-image {
  background: var(--cream-200);
  border-radius: 0 !important;
}
.product-card .card-info {
  padding: 14px 4px 4px !important;
}
.product-name {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em;
  color: var(--text-primary) !important;
}
.sale-price {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sale-price, var(--text-primary)) !important;
}

/* Badge — mono ink, no shimmer */
.product-badge {
  background: var(--text-primary) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  font-size: 9px !important;
  padding: 5px 10px !important;
  text-transform: uppercase;
}
.product-badge::after { display: none !important; }

/* Hero / banner — strip text effects */
.banner-content {
  text-align: center;
  padding-left: 0;
  width: 100%;
}
.banner-title {
  font-family: var(--font-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important; /* Increased from 500 to 700 */
  font-size: clamp(2rem, 8vw, 4.5rem) !important; /* Made significantly larger */
  letter-spacing: 0.05em !important; /* Spaced out the letters a bit more */
  text-shadow: none !important;
  filter: none !important;
  line-height: 1.05 !important;
}
.banner-subtitle {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  font-size: 0.78rem !important;
  opacity: 0.92;
}
.banner-overlay {
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%) !important;
}
.banner-cta {
  border-radius: 0 !important;
  letter-spacing: 0.18em !important;
  font-size: 11px !important;
  text-transform: uppercase;
}

/* Section headings */
.section-heading h2 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--text-primary) !important;
}
.section-heading p, .section-heading .line {
  color: var(--text-muted) !important;
}

/* Fashion typography quote */
.fashion-typo-section {
  background: transparent;
  padding: 48px 24px;
}
.fashion-typo-section::before,
.fashion-typo-section::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
}
.fashion-typo-main, .fashion-typo-sub {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-style: italic;
  color: var(--text-primary) !important;
  letter-spacing: 0;
}
.fashion-typo-accent {
  font-family: var(--font-body) !important;
  letter-spacing: 0.36em !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Page header (sub-pages) */
.page-header h1 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em;
}

/* Content pages */
.content-page h2 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* Category tabs */
.category-tab {
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 9px 18px;
  transition: all var(--transition-fast);
}
.category-tab.active {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--text-primary) !important;
}
.category-tab:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Filter button */
.filter-toggle-btn {
  border-radius: 0 !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* Modals — no bounce */
.modal-box {
  border-radius: 4px !important;
  background: #FFFFFF !important;
  animation-timing-function: ease-out !important;
}

/* Sticky buy-bar — solid, no gold gradient */
.sticky-buy-bar {
  background: rgba(26, 20, 17, 0.96) !important;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sbb-btn-buy {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.sbb-btn-cart {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500 !important;
}

/* Footer */
.site-footer { background: var(--footer-bg) !important; }
.footer-col h4 {
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 11px;
}
.footer-col .footer-brand {
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
}
.footer-bottom {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* Floating WhatsApp — calmer, no pulse */
.floating-whatsapp-btn::before { display: none !important; }
.floating-whatsapp-btn {
  animation: none !important;
}

/* Mobile bottom nav active = burgundy */
.bnav-item.active { color: var(--accent) !important; }

/* Forms */
.form-input, .form-select {
  border-radius: 2px !important;
  border-color: var(--border-color);
  transition: border-color var(--transition-fast);
}
.form-input:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 76, 0.1) !important;
}

/* Cart drawer */
.cart-drawer { background: #FFFFFF !important; }

/* Toasts — clean */
.toast-notification, .toast {
  border-radius: 2px !important;
}

/* Reduced motion Disabled */

/* Mobile tweaks */
@media (max-width: 768px) {
  .product-name { font-size: 13px !important; }
  .sale-price { font-size: 13px !important; }
  .banner-content { padding-left: 20px; }
}


/* ============================================================
   v15.1 — BURGUNDY HERITAGE DEEP COVERAGE PATCH
   ------------------------------------------------------------
   Covers everything v15 missed:
     • Cart drawer (header/body/footer/items/qty)
     • Filter & Sort drawer (radios, hover, native controls)
     • Checkout modal (form, submit btn, payment info, success)
     • All product badges (esp. .trending blue gradient)
     • Modals (overlay, box, header, close, body, footer)
     • Search overlay
     • Product detail (gallery, sizes, colors, qty, buy buttons)
     • Mobile menu drawer & dropdown
     • Toasts
     • Hero slider arrows & dots
     • Header scrolled shadow
     • Floating action buttons (WhatsApp, Messenger)
     • Browser switch banner & flash sale bar
     • Sticky-buy-bar
     • Forms (focus rings, errors, native inputs)
     • All purple rgba shadows -> burgundy rgba
   ============================================================ */

/* ─── Universal native form control accent (radios/checkboxes/range) ─── */
input[type="radio"],
input[type="checkbox"],
input[type="range"] {
  accent-color: var(--accent) !important;
}

/* ─── Background body radial-gradient (was purple haze) ─── */
body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(255, 0, 76, 0.012) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 0, 76, 0.008) 0%, transparent 40%) !important;
}

/* ─── Header scrolled state ─── */
.site-header.scrolled {
  box-shadow: 0 1px 12px rgba(26, 20, 17, 0.06) !important;
}

/* ─── Mobile menu drawer & nav dropdown ─── */
.mobile-menu-drawer,
.nav-dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.nav-dropdown-menu a:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}
.mobile-menu-drawer a:hover {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* ─── Hamburger lines ─── */
.hamburger span {
  background: var(--text-primary) !important;
}

/* ─── Hero slider arrows & dots ─── */
.slider-arrow {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--text-primary) !important;
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}
.slider-arrow:hover {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--text-primary) !important;
}
.slider-dot {
  background: rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  width: 18px !important;
  height: 2px !important;
}
.slider-dot.active {
  background: #FFFFFF !important;
  width: 32px !important;
}

/* ════════════════════════════════════════════════════════════
   CART DRAWER — full burgundy treatment
   ════════════════════════════════════════════════════════════ */
.cart-overlay {
  background: rgba(26, 20, 17, 0.45) !important;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);
}
.cart-drawer {
  background: #FFFFFF !important;
  border-left: 1px solid var(--border-color) !important;
  box-shadow: -8px 0 32px rgba(26, 20, 17, 0.10) !important;
}
.cart-header {
  background: #FFFFFF !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 18px 20px !important;
}
.cart-header h3 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  color: var(--text-primary) !important;
}
.cart-body { padding: 18px 20px !important; }
.cart-empty p { color: var(--text-muted) !important; }
.cart-empty svg { color: var(--text-light) !important; }
.cart-item {
  border-radius: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.cart-item:hover {
  background: transparent !important;
}
.cart-item-img {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--border-light) !important;
}
.cart-item-name {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
}
.cart-item-meta {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}
.cart-item-price {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
}
.cart-item-remove {
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.cart-item-remove:hover {
  color: var(--accent) !important;
}
.cart-item-qty button {
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  width: 28px !important;
  height: 28px !important;
}
.cart-item-qty button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}
.cart-footer {
  background: #FFFFFF !important;
  background-image: none !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 18px 20px !important;
}
.cart-total-row {
  font-size: 14px !important;
}
.cart-total-row span:last-child {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  font-family: var(--font-body) !important;
}

/* ════════════════════════════════════════════════════════════
   FILTER & SORT DRAWER — burgundy + clean radios
   ════════════════════════════════════════════════════════════ */
#filter-drawer.cart-drawer,
#filter-drawer { background: #FFFFFF !important; }

.filter-radio {
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
  background: #FFFFFF !important;
  padding: 9px 12px !important;
  transition: all var(--transition-fast) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.filter-radio:hover {
  background: var(--cream-200) !important;
  border-color: var(--text-primary) !important;
}
.filter-radio input[type="radio"]:checked + span {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
/* The whole option highlights when its radio is checked */
.filter-radio:has(input[type="radio"]:checked) {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
}

/* Filter section headings — burgundy small accent */
#filter-drawer .cart-body h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-size: 11px !important;
}
#filter-drawer .cart-body h4::before {
  background: var(--accent) !important;
}

/* Size options */
.size-filter-options .filter-radio {
  text-align: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   MODALS — overlay, box, header, close
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(26, 20, 17, 0.55) !important;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
}
.modal-box {
  border-radius: 4px !important;
  background: #FFFFFF !important;
  box-shadow: 0 16px 48px rgba(26, 20, 17, 0.15), 0 0 0 1px rgba(26, 20, 17, 0.04) !important;
  border: none !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 18px 20px !important;
}
.modal-header h2,
.modal-header h3 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--text-primary) !important;
}
.modal-close {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.modal-close:hover {
  color: var(--text-primary) !important;
}
.modal-body { padding: 20px !important; }
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 16px 20px !important;
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT MODAL — form, submit, payment info
   ════════════════════════════════════════════════════════════ */
.checkout-modal { background: #FFFFFF !important; }
.checkout-summary,
.checkout-items {
  border-color: var(--border-color) !important;
  border-radius: 0 !important;
  background: var(--cream-200) !important;
}
.checkout-item,
.checkout-row {
  border-color: var(--border-light) !important;
}
.checkout-total,
.order-total {
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

/* Submit button — solid burgundy, no gradient, no glow */
#checkout-submit-btn {
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  transition: background-color var(--transition-fast) !important;
}
#checkout-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#checkout-submit-btn::after {
  display: none !important;
}

/* Coupon section */
.checkout-coupon-section {
  border-color: var(--border-color) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
#co-coupon-code {
  border-radius: 0 !important;
  border-color: var(--border-color) !important;
}
#co-coupon-msg.success { color: var(--success) !important; }
.coupon-applied {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Payment method selector */
.payment-method-card {
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
  background: #FFFFFF !important;
  transition: all var(--transition-fast) !important;
}
.payment-method-card:hover {
  border-color: var(--text-primary) !important;
}
.payment-method-card.selected {
  border-color: var(--accent) !important;
  background: var(--accent-light) !important;
  box-shadow: none !important;
}

/* Payment info box (Bkash/Nagad — kept brand-safe but mono-friendly) */
.payment-info-box {
  border-radius: 0 !important;
  background: var(--cream-200) !important;
  border: 1px solid var(--border-color) !important;
}
.payment-info-box.bkash,
.payment-info-box.nagad {
  background: var(--cream-200) !important;
  border-color: var(--border-color) !important;
}
.payment-info-box .pay-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}
.payment-info-box .pay-number {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Order success screen */
.order-success-screen,
.order-success {
  background: #FFFFFF !important;
}

/* Order card */
.order-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-left-color: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL — gallery, sizes, qty, buttons
   v15.76: Premium polish — restored soft rounded corners,
   refined hover states, paper-grade shadows. The pre-v15.74
   "hard-edged box" treatment looked technical, not premium.
   ════════════════════════════════════════════════════════════ */
.pd-thumb,
.product-thumb {
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.pd-thumb:hover,
.product-thumb:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 0, 76, 0.06) !important;
}
.pd-thumb.active,
.product-thumb.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 14px rgba(255, 0, 76, 0.10) !important;
}

/* Size buttons — soft rounded with luxe hover */
.size-btn,
.size-option {
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-secondary, #FFFFFF) !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
.size-btn:hover:not(:disabled):not(.selected),
.size-option:hover:not(:disabled):not(.selected):not(.active) {
  border-color: var(--text-primary) !important;
  background: var(--bg-secondary, #FFFFFF) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 2px 8px rgba(26, 20, 17, 0.06) !important;
  transform: translateY(-1px) !important;
}
.size-btn.selected,
.size-option.active,
.size-option.selected {
  background: var(--text-primary) !important;
  background-image: none !important;
  border-color: var(--text-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(26, 20, 17, 0.18) !important;
  transform: translateY(-1px) !important;
}
.size-btn:disabled,
.size-option:disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  text-decoration: line-through !important;
  border-style: dashed !important;
}

.color-option.active,
.color-option.selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* Quantity selector — single rounded pill, no inner divider boxes */
.qty-selector,
.qty-controls {
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(26, 20, 17, 0.04) !important;
  background: var(--bg-secondary, #FFFFFF) !important;
}
.qty-controls .qty-value {
  border-left: 1px solid var(--border-light) !important;
  border-right: 1px solid var(--border-light) !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
.qty-btn {
  border-radius: 0 !important;
  border-color: var(--border-color) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.qty-btn:hover {
  background: var(--cream-100, #FAF7F0) !important;
  color: var(--accent) !important;
}

/* Action buttons — soft pill, premium type */
#add-to-cart-btn {
  border-radius: 10px !important;
  border: 1px solid var(--text-primary) !important;
  background: var(--bg-secondary, #FFFFFF) !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#add-to-cart-btn:hover:not(:disabled) {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(26, 20, 17, 0.18) !important;
  transform: translateY(-1px) !important;
}
#add-to-cart-btn:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 3px 8px rgba(26, 20, 17, 0.18) !important;
}
#buy-now-btn {
  border-radius: 10px !important;
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#buy-now-btn:hover:not(:disabled) {
  background: var(--accent-hover) !important;
  box-shadow: 0 6px 16px rgba(255, 0, 76, 0.22) !important;
  transform: translateY(-1px) !important;
}
#buy-now-btn:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 3px 8px rgba(255, 0, 76, 0.22) !important;
}

.pd-actions .btn-outline:hover {
  box-shadow: 0 6px 16px rgba(26, 20, 17, 0.10) !important;
  transform: translateY(-1px) !important;
}

/* Delivery info card — soft paper card, no harsh outlines */
.pd-delivery-info {
  border-radius: 14px !important;
  border: 1px solid var(--border-light) !important;
  background: linear-gradient(180deg, var(--cream-50, #FBF8F1) 0%, var(--bg-secondary, #FFFFFF) 100%) !important;
  box-shadow: 0 2px 8px rgba(26, 20, 17, 0.03) !important;
  padding: 16px 18px !important;
}
.pd-delivery-row + .pd-delivery-row {
  border-top: 1px dashed var(--border-light) !important;
}
.pd-delivery-row svg {
  color: var(--accent) !important;
  opacity: 0.85 !important;
}

.pd-sale-price,
.qv-sale-price {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}
.pd-old-price {
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

/* Reviews */
.review-card {
  border-radius: 0 !important;
  border: 1px solid var(--border-light) !important;
  background: #FFFFFF !important;
}
.review-stars {
  color: var(--accent) !important;
}

/* Related products (heading) */
.related-card-title { font-family: var(--font-serif) !important; }

/* ════════════════════════════════════════════════════════════
   PRODUCT BADGES — KILL the blue/purple gradient
   ════════════════════════════════════════════════════════════ */
.product-badge.trending,
.product-badge.new,
.product-badge.sale,
.product-badge.bestseller,
.product-badge.hot,
.product-badge.featured,
.product-badge.limited,
.product-badge.exclusive {
  background: var(--text-primary) !important;
  background-image: none !important;
  background-size: auto !important;
  animation: none !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding: 5px 10px !important;
}
.product-badge.sale,
.product-badge.discount {
  background: var(--accent) !important;
}
.product-badge::after {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   SEARCH OVERLAY — Serif theme refinements
   ════════════════════════════════════════════════════════════ */
#search-input,
.search-input {
  font-family: var(--font-serif) !important;
}
.search-result-name { font-family: var(--font-serif) !important; }

/* ════════════════════════════════════════════════════════════
   TOASTS — clean
   ════════════════════════════════════════════════════════════ */
.toast,
.toast-notification {
  border-radius: 2px !important;
  background: #FFFFFF !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(26, 20, 17, 0.04) !important;
  font-family: var(--font-body) !important;
}
.toast.success { border-left: 3px solid var(--success) !important; }
.toast.error   { border-left: 3px solid var(--danger) !important; }
.toast.warning { border-left: 3px solid var(--warning) !important; }
/* ✅ v15.96: info toast — brand-red accent (used for "already in cart" nudge) */
.toast.info    { border-left: 3px solid var(--accent, #ff004c) !important; }
.toast.info .toast-icon { color: var(--accent, #ff004c); }

/* ════════════════════════════════════════════════════════════
   FORMS — global focus rings (was purple rgba)
   ════════════════════════════════════════════════════════════ */
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
  border-radius: 2px !important;
  border-color: var(--border-color);
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.form-input:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 76, 0.10) !important;
  outline: none !important;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10) !important;
}
.required { color: var(--accent) !important; }

/* ════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTONS — calmer
   ════════════════════════════════════════════════════════════ */
.floating-whatsapp-btn {
  box-shadow: 0 4px 16px rgba(26, 20, 17, 0.12) !important;
  animation: none !important;
}
.floating-whatsapp-btn::before { display: none !important; }
.live-chat-btn.messenger {
  background: #0099FF !important;
  background-image: none !important;
}

/* ════════════════════════════════════════════════════════════
   HEADER ICON ACTION COUNT BUBBLES
   ════════════════════════════════════════════════════════════ */
.cart-count,
.bnav-cart-wrap.has-items::after,
.wishlist-count {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 9px !important;
}

/* ════════════════════════════════════════════════════════════
   MISC BANNERS, FLASH SALE — burgundy
   ════════════════════════════════════════════════════════════ */
.flash-sale-bar {
  background: var(--accent) !important;
  background-image: none !important;
}
.browser-switch-banner {
  background: var(--text-primary) !important;
  background-image: none !important;
}
.browser-switch-banner .bsb-btn {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border-radius: 0 !important;
}
.yarz-countdown-bar.style-gradient {
  background: var(--yarz-countdown-bg, var(--accent)) !important;
  background-image: none !important;
}
.yarz-countdown-bar .cdb-title {
  font-family: var(--font-body);
}

/* ════════════════════════════════════════════════════════════
   TRACKING / WISHLIST CARDS
   ════════════════════════════════════════════════════════════ */
.tracking-card {
  border-radius: 0 !important;
  border: 1px solid var(--border-color) !important;
}
.tracking-card .order-status {
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.wishlist-heart.active {
  color: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════
   POPUP CARD CTA (newsletter etc.)
   ════════════════════════════════════════════════════════════ */
.yarz-popup-card .popup-cta {
  background: var(--accent) !important;
  background-image: none !important;
  border-radius: 0 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.yarz-popup-card .popup-cta:hover {
  background: var(--accent-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — already burgundy via var(--accent),
   but ensure no purple shadow on container
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -2px 12px rgba(26, 20, 17, 0.04) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   STATIC PAGE NOSCRIPT FALLBACK + 404 INLINE — handled in HTML
   These are inline styles that the JS-disabled fallback shows.
   We only adjust dynamically what we can via CSS.
   ════════════════════════════════════════════════════════════ */
.skip-to-content:focus {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  outline: 2px solid var(--accent);
}

/* ════════════════════════════════════════════════════════════
   CONTACT PAGE social cards icon backgrounds (purple-themed)
   ════════════════════════════════════════════════════════════ */
.contact-social-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 76, 0.10) !important;
}

/* ════════════════════════════════════════════════════════════
   END v15.1
   ============================================================ */


/* ============================================================
   v15.2 — BURGUNDY HERITAGE FINAL POLISH + ADMIN CONTROL FIX
   ------------------------------------------------------------
   Goal:
     1. Restore admin panel control by replacing every hardcoded
        #FFFFFF in v15/v15.1 with var(--bg-secondary/--bg-card)
        so admin's theme_card_bg / theme_bg setting still works.
     2. Add --brand / --brand-dark aliases (legacy code uses them).
     3. Warm up the cart drawer "too pure white" feel.
     4. Fix 7 specific leaks: ct-right purple, modal-header gradient,
        category-tab.active shadow, filter h4::before gradient,
        scroll-progress, missing buy-now specificity, etc.
     5. Override the JS-built cod-disabled-modal (purple header
        + purple CTA gradient + purple SVG strokes).
     6. Fix inline rgba(99,74,142,*) in index.html.
   ============================================================ */

/* ─── A. Brand aliases (legacy code reads var(--brand)) ─── */
:root {
  --brand: var(--accent);
  --brand-dark: var(--accent-hover);
}

/* ════════════════════════════════════════════════════════════
   ADMIN CONTROL FIX — replace hardcoded #FFFFFF with vars
   ════════════════════════════════════════════════════════════ */

/* Cart drawer — warmer off-white instead of pure white,
   but driven through admin theme_card_bg */
.cart-drawer {
  background: var(--bg-card, #FAFAF7) !important;
  border-left: 1px solid var(--border-color) !important;
  box-shadow: -8px 0 32px rgba(26, 20, 17, 0.10) !important;
}
.cart-header {
  background: var(--bg-card, #FAFAF7) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.cart-body {
  background: var(--bg-card, #FAFAF7) !important;
}
.cart-footer {
  background: var(--bg-card, #FAFAF7) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-color) !important;
}
.cart-item-img {
  background: var(--bg-secondary, #FFFFFF);
  border: 1px solid var(--border-light) !important;
}

/* Filter drawer */
#filter-drawer.cart-drawer,
#filter-drawer {
  background: var(--bg-card, #FAFAF7) !important;
}
.filter-radio {
  background: var(--bg-secondary, #FFFFFF) !important;
  border: 1px solid var(--border-color) !important;
}
.filter-radio:hover {
  background: var(--cream-200, #F4F2EC) !important;
  border-color: var(--text-primary) !important;
}

/* Modal box & overlay */
.modal-box {
  background: var(--bg-secondary, #FFFFFF) !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 48px rgba(26, 20, 17, 0.15),
              0 0 0 1px rgba(26, 20, 17, 0.04) !important;
  border: none !important;
}

/* Modal header — kill leftover cream→white gradient */
.modal-header {
  background: var(--bg-secondary, #FFFFFF) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Checkout */
.checkout-modal {
  background: var(--bg-secondary, #FFFFFF) !important;
}
.checkout-summary,
.checkout-items {
  background: var(--cream-200, #F4F2EC) !important;
}

/* Payment method cards */
.payment-method-card {
  background: var(--bg-secondary, #FFFFFF) !important;
  border: 1px solid var(--border-color) !important;
}
.payment-method-card.selected {
  background: var(--accent-light) !important;
  border-color: var(--accent) !important;
}
.payment-info-box,
.payment-info-box.bkash,
.payment-info-box.nagad {
  background: var(--cream-200, #F4F2EC) !important;
  border: 1px solid var(--border-color) !important;
}

/* Order success / order card */
.order-success-screen,
.order-success {
  background: var(--bg-secondary, #FFFFFF) !important;
}

/* Product detail — duplicate guard, kept aligned with v15.76 premium polish */
.size-btn,
.size-option {
  background: var(--bg-secondary, #FFFFFF) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.size-btn:hover:not(:disabled):not(.selected),
.size-option:hover:not(:disabled):not(.selected):not(.active) {
  background: var(--bg-secondary, #FFFFFF) !important;
  border-color: var(--text-primary) !important;
}
.size-btn.selected,
.size-option.active,
.size-option.selected {
  background: var(--text-primary) !important;
  background-image: none !important;
  border-color: var(--text-primary) !important;
  color: #FFFFFF !important;
}

/* Add-to-cart button — outline style, white bg through var */
#add-to-cart-btn {
  background: var(--bg-secondary, #FFFFFF) !important;
  background-image: none !important;
  border: 1px solid var(--text-primary) !important;
  color: var(--text-primary) !important;
}
#add-to-cart-btn:hover:not(:disabled) {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
}

/* Buy Now — extra-specific to crush any leftover purple gradient.
   v15.76: kept border-radius soft to match overall premium feel
   instead of the previous hard-edged 0px box. */
#buy-now-btn,
button#buy-now-btn,
.btn#buy-now-btn,
.btn.btn-primary#buy-now-btn {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(255, 0, 76, 0.10) !important;
}
#buy-now-btn:hover:not(:disabled),
button#buy-now-btn:hover:not(:disabled) {
  background: var(--accent-hover) !important;
  background-image: none !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 6px 16px rgba(255, 0, 76, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* Reviews + search overlay */
.review-card {
  background: var(--bg-secondary, #FFFFFF) !important;
}
/* search-overlay bg — handled by main search redesign */

/* Toasts */
.toast,
.toast-notification {
  background: var(--bg-secondary, #FFFFFF) !important;
}

/* Browser switch banner button */
.browser-switch-banner .bsb-btn {
  background: var(--bg-secondary, #FFFFFF) !important;
}

/* ════════════════════════════════════════════════════════════
   B. SPECIFIC LEAK FIXES (7 selectors agent identified)
   ════════════════════════════════════════════════════════════ */

/* B.1 — Coupon ticket right pane (was dark purple gradient) */
.coupon-ticket .ct-right {
  background: var(--accent) !important;
  background-image: none !important;
}

/* B.2 — Category tab active leftover purple shadow */
.category-tab.active {
  box-shadow: none !important;
}

/* B.3 — Filter section heading bullet (was gradient) */
#filter-drawer .cart-body h4::before {
  background: var(--accent) !important;
  background-image: none !important;
}

/* B.4 — Scroll progress bar (was lavender gradient) */
.scroll-progress {
  background: var(--accent) !important;
  background-image: none !important;
}

/* B.5 — Site footer top accent border (was purple gradient) */
.site-footer::before {
  background: var(--accent) !important;
  background-image: none !important;
}

/* B.6 — Mobile bottom nav active indicator (was purple gradient) */
.mobile-bottom-nav .bnav-item.active::before,
.mobile-bottom-nav .bnav-item.active::after {
  background: var(--accent) !important;
  background-image: none !important;
}

/* B.7 — Sticky bar top border (was rgba purple) */
.sticky-buy-bar {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════
   C. JS-BUILT cod-disabled-modal — re-skin via CSS
   The modal is built with inline styles in app.js. We use
   high-specificity selectors with !important to win over inline.
   ════════════════════════════════════════════════════════════ */

/* The whole modal box */
#cod-disabled-modal > div {
  background: var(--bg-secondary, #FAFAF7) !important;
  box-shadow: 0 16px 48px rgba(26, 20, 17, 0.18),
              0 0 0 1px rgba(26, 20, 17, 0.06) !important;
  border-radius: 4px !important;
}

/* Header strip — was 3-stop purple gradient */
#cod-disabled-modal > div > div:first-child {
  background: var(--text-primary) !important;
  background-image: none !important;
}

/* Solution box inside body — was purple-50 + purple-200 */
#cod-disabled-modal > div > div:nth-child(2) > div:nth-child(2) {
  background: var(--accent-light) !important;
  border-color: var(--accent-subtle) !important;
}

/* Solution badge label */
#cod-disabled-modal > div > div:nth-child(2) > div:nth-child(2) > div:first-child {
  background: var(--accent) !important;
}

/* Solution text body (was var(--purple-800)) */
#cod-disabled-modal > div > div:nth-child(2) > div:nth-child(2) > p {
  color: var(--text-primary) !important;
}

/* Trust chips — keep cream bg, swap SVG strokes from #634A8E to burgundy */
#cod-disabled-modal svg[stroke="#634A8E"] {
  stroke: var(--accent) !important;
}

/* CTA "OK" button — was purple gradient + purple shadow */
#cod-disabled-modal #cod-modal-ok {
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  letter-spacing: 0.06em;
}
#cod-disabled-modal #cod-modal-ok:hover {
  background: var(--accent-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   D. Other JS-built inline rgba(99,74,142,*) -> burgundy
   ════════════════════════════════════════════════════════════ */

/* Bkash/Nagad payment instructions block (built in app.js with
   inline linear-gradient + rgba purple). Targets the .pd-pay-instructions
   class or inline element if present. */
.pd-pay-instructions,
.checkout-pay-instructions,
.payment-instructions {
  background: var(--cream-200, #F4F2EC) !important;
  background-image: none !important;
  border: 1px solid var(--border-color) !important;
}

/* Checkout qty warning (app.js builds with rgba purple) */
.qty-warning,
.co-qty-warning {
  background: var(--accent-light) !important;
  background-image: none !important;
  border-color: var(--accent-subtle) !important;
}

/* ════════════════════════════════════════════════════════════
   E. Confirm modal icon circle (custom-confirm-modal in HTML)
   The HTML inline style still has rgba(99,74,142,0.1) bg.
   We override via the parent ID and child selector.
   ════════════════════════════════════════════════════════════ */
#custom-confirm-modal .modal-box > div:first-child {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════
   F. Delivery zone select hint (index.html inline style)
   Was: rgba(99,74,142,0.03) background + var(--accent) border.
   ════════════════════════════════════════════════════════════ */
#co-location {
  background-color: var(--accent-light) !important;
  border-color: var(--accent) !important;
}

/* ════════════════════════════════════════════════════════════
   END v15.2 — Burgundy heritage with admin control intact
   ============================================================ */


/* ============================================================
   v15.3 — Cart REMOVE button visibility fix
   ------------------------------------------------------------
   The REMOVE button in the shopping cart was muted grey and
   easy to miss. Made it bold red with a thin red border so
   customers can find it quickly.
   ============================================================ */
.cart-item-remove {
  color: #C0392B !important;
  border: 1px solid #C0392B !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-top: 4px !important;
  background: transparent !important;
  transition: background-color var(--transition-fast),
              color var(--transition-fast) !important;
}
.cart-item-remove:hover {
  background: #C0392B !important;
  color: #FFFFFF !important;
  border-color: #C0392B !important;
}


/* ============================================================
   v15.5 — debug overlay removed (was in v15.4)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   v15.13 — DEFINITIVE HERO BANNER (single consolidated block)
   ────────────────────────────────────────────────────────────
   Replaces all of v15.6 / v15.7 / v15.7.1 / v15.12 — those were
   layered conflicting attempts. The authoritative rules now live
   in the inline <style id="yarz-banner-v15-13-fullwidth"> block
   in index.html (loaded AFTER this stylesheet, so it wins the
   cascade). This block ONLY provides:
     1) Touch / swipe affordance — non-conflicting helpers
     2) Drag suppression on the <img> so swipe gesture reaches
        the slider's swipe listeners
   Goals:
     • Edge-to-edge full-bleed on desktop AND mobile (no cream gaps)
     • Mobile aspect-ratio 4/5 (≤768) and 1/1 (≤400) so model is
       prominent — driven by inline <style> in index.html
   ════════════════════════════════════════════════════════════ */

/* ─── Swipe enablement (preserved from v15.6) ─── */
.hero-slider,
.hero-slider .slider-track,
.hero-slider .slide {
  touch-action: pan-y !important;
}
.hero-slider .slide a,
.hero-slider .banner-overlay,
.hero-slider .banner-content {
  touch-action: pan-y !important;
}
/* Prevent native image-drag from hijacking the swipe gesture */
.hero-slider img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* swipe goes to parent .hero-slider */
}
/* Re-enable click-through on the wrapping <a> so taps still navigate */
.hero-slider .slide a {
  pointer-events: auto;
}


/* ════════════════════════════════════════════════════════════
   v15.31: Theme Link Color consumer — admin's --link-color now paints
   ════════════════════════════════════════════════════════════ */
a:not([class]):not([href*='facebook']):not([href*='whatsapp']):not([href*='wa.me']):not([href*='instagram']):not([href*='tiktok']):not([href*='messenger']):not([href*='m.me']) {
  color: var(--link-color, var(--accent));
}


/* ════════════════════════════════════════════════════════════
   v15.58 — Info Modal (COD-disabled + Free-Ship Advance popups)
   ────────────────────────────────────────────────────────────
   Replaces the old "vibe-coded" gradient + glassmorphism modals
   with a single design language matched to the burgundy/cream
   brand. Centered card on cream/ink overlay, soft round icon
   badge, serif-feeling Bengali title, callout box, and a single
   solid burgundy CTA — same vocabulary as custom-confirm-modal.
   ════════════════════════════════════════════════════════════ */

.yarz-info-modal { z-index: 99999; }

.yarz-info-box {
  max-width: 380px;
  width: 100%;
  text-align: center;
  padding: 32px 24px 24px !important;
  position: relative;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
}

.yarz-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted, #8A8A9A);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}
.yarz-info-close:hover {
  color: var(--text-primary, #1A1411);
  background: var(--cream-200, #F4F2EC);
}

.yarz-info-icon {
  width: 56px;
  height: 56px;
  background: var(--accent-light, #FAF3F4);
  color: var(--accent, #ff004c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.yarz-info-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #1A1411);
  margin: 0 0 4px;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
  letter-spacing: -0.005em;
}

.yarz-info-sub {
  font-size: 12px;
  color: var(--text-muted, #8A8A9A);
  margin: 0 0 18px;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
}

.yarz-info-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary, #4A4A5A);
  margin: 0 0 16px;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
  text-align: center;
}
.yarz-info-body strong {
  color: var(--accent, #ff004c);
  font-weight: 700;
}

.yarz-info-callout {
  background: var(--accent-light, #FAF3F4);
  border: 1px solid var(--accent-subtle, #F2E0E2);
  border-radius: 6px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  position: relative;
  text-align: left;
}
.yarz-info-callout-label {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--accent, #ff004c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.yarz-info-callout-text {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-primary, #1A1411);
  margin: 6px 0 0;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
}
.yarz-info-callout-text strong {
  color: var(--accent, #ff004c);
  font-weight: 700;
}
.yarz-info-note {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--accent-subtle, #F2E0E2);
  font-size: 12px;
  color: var(--text-secondary, #4A4A5A);
  font-weight: 500;
}

/* CTA — uses .btn .btn-primary site styles, plus a small layout tweak */
.yarz-info-cta {
  margin-top: 4px !important;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif) !important;
  font-weight: 700 !important;
}

.yarz-info-foot {
  font-size: 10.5px;
  color: var(--text-muted, #8A8A9A);
  margin: 12px 0 0;
  font-family: var(--font-bengali, 'Hind Siliguri', sans-serif);
}

/* Latin-numeral helper — forces digits onto Inter so the "1" is crisp.
   Use it via <span class="yarz-num">৳100</span> inside any Bengali copy.
   tabular-nums keeps amounts vertically aligned. */
.yarz-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  font-weight: inherit;
  letter-spacing: 0.01em;
}


/* ════════════════════════════════════════════════════════════
   v15.59 — Popup centering + cart-footer breathing + footer gap
   ────────────────────────────────────────────────────────────
   Three small but visible polish fixes:
   (1) Popups now ALWAYS render in the geometric center of the
       viewport on mobile. A previous cascade (specifically the
       active-modal flex layout interacting with body's
       overflow:hidden lock when checkout is open) was anchoring
       the popup to the bottom edge instead of the middle.
   (2) Cart drawer footer (Subtotal + Checkout button) now has
       safe-area-inset-bottom padding so it doesn't kiss the
       phone's home indicator.
   (3) The cream sliver visible BELOW the dark footer on mobile
       was the page background bleeding through padding-bottom
       reserved for the (now removed) mobile-bottom-nav. We just
       paint that bottom strip in the footer color.
   ════════════════════════════════════════════════════════════ */

/* (1) Popup — guaranteed center on every viewport, including
       when stacked on top of an already-open checkout modal.
       Uses ID selectors for max specificity, !important to win
       over any later cascade. */
#cod-disabled-modal,
#fs-advance-modal,
.yarz-info-modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  z-index: 99999 !important;
  background: rgba(26, 20, 17, 0.55) !important;
  background-color: rgba(251, 248, 241, 0.95); /* fallback */
  -webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);
  /* Reserve safe-area on top + bottom so the box is visually
     centered between the URL bar and the home indicator on
     iPhone X+ class devices. */
  padding-top: max(16px, env(safe-area-inset-top)) !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

#cod-disabled-modal .yarz-info-box,
#fs-advance-modal .yarz-info-box,
.yarz-info-modal .yarz-info-box {
  /* Prevent the content from overflowing past the viewport on
     short screens — keep the box scrollable internally so the
     overall card stays centered. */
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto !important;
}

/* (2) Cart drawer — lift the Subtotal/Checkout footer so it never
       looks cut off, and respect the iPhone home indicator.
       ✅ v15.59: floor raised from 20px → 28px after user reported
       the button still felt "kissing the bottom edge" on Android. */
.cart-footer {
  padding: 16px 18px max(28px, calc(16px + env(safe-area-inset-bottom))) 18px !important;
}

/* Use 100dvh on supporting browsers so the drawer's true height
   matches the visible viewport (NOT the URL-bar-included 100vh).
   Fixes "footer cut off" on mobile Chrome where the URL bar makes
   100vh ~70px taller than the rendered area. */
@supports (height: 100dvh) {
  .cart-drawer {
    height: 100dvh !important;
  }
}

/* (3) Footer cream-gap fix — paint the body bottom strip in
       footer color so the dark footer visually extends to the
       very bottom of the viewport on mobile.
       ✅ v15.59: bumped specificity using `html body` to win over
       the global `body { background: var(--bg-primary) }` on
       lines 381 and 7707, plus the body radial-gradient on 8072.
       Also explicitly set background on the footer wrapper so the
       safe-area-inset-bottom strip below it shows the dark color. */
@media (max-width: 768px) {
  /* ✅ v16.5 FIX: The body background must be the CREAM paper color, NOT the
     footer color. Previously body was forced to var(--footer-bg) (the admin's
     navy #0f005c) with !important — so any section without its own background
     (the editorial "REDEFINE YOUR STYLE" block, the gaps around product
     images, etc.) showed navy bleeding ABOVE the footer. The footer paints
     its own navy separately below, so body should stay cream site-wide. */
  html body {
    background-color: var(--bg-primary, #FBF8F1) !important;
    background-image: none !important;
  }
  /* Content wrappers explicitly cream too (defensive, unchanged). */
  html body > main,
  html body > #app,
  html body > header,
  html body > .site-header,
  html body > .announcement-bar,
  html body > #home-content,
  html body > #dynamic-view,
  html body > #collection-view,
  html body > #yarz-newsletter-popup,
  html body > #yarz-promo-popup {
    background-color: var(--bg-primary, #FBF8F1);
  }
  /* ✅ v16.6: Bottom showcase MUST be cream regardless of the admin theme.
     It previously used var(--bg-primary), but applyExtrasControls() overrides
     --bg-primary with the admin's Theme Background — if that's a dark color
     the showcase went dark too (the navy/burgundy bleed the owner reported).
     A fixed cream value keeps the editorial images on paper-white, matching
     the product photos' cream backdrop. !important locks it past any theme. */
  html body > #bottom-showcase-container {
    background-color: #FBF8F1 !important;
    background-image: none !important;
  }
  /* Footer itself anchors at the bottom-most edge — it (and only it) carries
     the admin's footer color, including the safe-area strip below it. */
  html body > footer.site-footer,
  html body .site-footer {
    background-color: var(--footer-bg, #1A1411) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   v15.60 — YARZ BRAND MARK SYSTEM (Shirt Button Logo)
   ────────────────────────────────────────────────────────────
   Pure CSS+SVG. NO image assets.
   Three lockups, all driven by one inline <svg> + one font.
   ────────────────────────────────────────────────────────────
   1. .yarz-mark            — horizontal lockup (header default)
   2. .yarz-mark--stacked   — vertical lockup (hero/footer/404/popup)
   3. .yarz-mark--icon-only — button icon alone (favicon-tier)

   Color tokens (override via .yarz-mark--inverse for dark surfaces):
     --yarz-mark-fill    burgundy disc body
     --yarz-mark-ring    burgundy outer stroke
     --yarz-mark-hole    cream hole color (negative)
     --yarz-mark-text    wordmark color
   ════════════════════════════════════════════════════════════ */

.yarz-mark {
  /* ✅ v15.85 LOGO LOCK: Brand mark colors are FIXED — they must never
     drift when admin changes theme palette. The disc is always dark red
     burgundy, the holes are always cream, the wordmark color is the only
     thing that follows the theme (so it stays readable on any background).
     Previously these used var(--accent) which made the logo change color
     every time admin tweaked theme palette → unprofessional.
     ✅ v15.88: Owner spec change — brand mark color is now `#ff004c`
     (vivid pink-red) with `#cc003d` ring stroke. Hex-locked across every
     logo render point: header, footer, holiday/maintenance overlay,
     favicons, mask-icon.
     ✅ v16.0: REBRAND — brand mark recolored away from the old pink-red.
     ✅ v16.1: Brand mark is now vibrant CARDINAL RED `#C8102E` with a
     deeper `#9B0C23` ring (professional, confident, menswear-appropriate —
     not neon, not dark). Holes stay cream `#FBF8F1`, and a cream rim-ring
     groove sits inside the disc for a real-button look. This is INDEPENDENT
     of the theme palette/--accent system on purpose (logo never drifts). */
  --yarz-mark-fill: #C8102E;
  --yarz-mark-ring: #9B0C23;
  --yarz-mark-hole: #FBF8F1;
  --yarz-mark-text: var(--text-primary, #1A1411);
  --yarz-mark-size: 28px;

  display: inline-flex;
  align-items: center;
  gap: calc(var(--yarz-mark-size) * 0.30);
  text-decoration: none;
  color: var(--yarz-mark-text);
  line-height: 1;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-user-select: none;user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.yarz-mark__icon {
  width: var(--yarz-mark-size);
  height: var(--yarz-mark-size);
  flex: 0 0 auto;
  display: block;
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.yarz-mark:hover .yarz-mark__icon,
.yarz-mark:focus-visible .yarz-mark__icon {
  transform: rotate(8deg);
}
.yarz-mark:focus-visible {
  outline: 2px solid var(--yarz-mark-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

.yarz-mark__word {
  font-size: calc(var(--yarz-mark-size) * 0.78);
  letter-spacing: 0.18em;
  color: var(--yarz-mark-text);
  line-height: 1;
  display: inline-block;
  /* v16.3 alignment fix: uppercase Cormorant Garamond has tall asc/descent
     with a low cap-height, so line-box centering + the OLD +0.02em nudge
     pushed the caps BELOW the disc center (the "wordmark sits low" bug).
     The correct correction is a small NEGATIVE (upward) em nudge — expressed
     in em so it auto-scales and stays optically centered at every breakpoint
     (desktop 32px → mobile 30/28/26px) with no per-breakpoint tuning. */
  transform: translateY(-0.06em);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Modern browsers: trim cap metrics deterministically (removes the need for
   the em nudge). Layers cleanly on top of the fallback above. */
@supports (text-box: trim-both cap alphabetic) {
  .yarz-mark__word { text-box: trim-both cap alphabetic; transform: none; }
}

/* Inverse — kept as a class for backwards-compat (used by footer + holiday +
   maintenance overlays) but it NO LONGER swaps the disc/ring/hole colors.
   v15.87 (per owner spec): the YARZ logo is always dark red disc + cream
   holes + dark red ring on every surface — header, footer, holiday overlay
   — so the brand mark stays consistent. Only the wordmark text color follows
   the surrounding chrome (cream on dark footer, ink on cream header).
   v15.88: Brand color updated to #ff004c (pink-red) with #cc003d ring.
   v15.89: Wordmark inside footer is now hardcoded white (no variable). */
.yarz-mark--inverse {
  /* Disc/ring/hole stay locked to brand cardinal red — DO NOT alias to --accent
     or --bg-primary; that's how the logo started drifting with theme palette. */
  --yarz-mark-fill: #C8102E;
  --yarz-mark-ring: #9B0C23;
  --yarz-mark-hole: #FBF8F1;
  /* v15.89: Wordmark on dark surfaces is hardcoded white — no theme link. */
  --yarz-mark-text: #FFFFFF;
}

/* Sizes */
.yarz-mark--xs   { --yarz-mark-size: 18px; }
.yarz-mark--sm   { --yarz-mark-size: 22px; }
.yarz-mark--md   { --yarz-mark-size: 28px; }
.yarz-mark--lg   { --yarz-mark-size: 40px; }
.yarz-mark--xl   { --yarz-mark-size: 64px; }
.yarz-mark--2xl  { --yarz-mark-size: 96px; }

/* Stacked vertical lockup — hero/footer/404/popups/maintenance/order success */
.yarz-mark--stacked {
  flex-direction: column;
  gap: calc(var(--yarz-mark-size) * 0.32);
  text-align: center;
}
.yarz-mark--stacked .yarz-mark__word {
  font-size: calc(var(--yarz-mark-size) * 0.46);
  letter-spacing: 0.32em;
  /* The hairline-rule under the wordmark — fashion-plate signature */
  position: relative;
  padding-bottom: calc(var(--yarz-mark-size) * 0.18);
}
.yarz-mark--stacked .yarz-mark__word::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60%;
  max-width: 96px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

/* Icon-only — favicon-tier, used inline (e.g. toast, notification, skeleton) */
.yarz-mark--icon-only {
  gap: 0;
}
.yarz-mark--icon-only .yarz-mark__word {
  display: none;
}

/* Header lockup default — sized to current --header-height ceiling.
   v15.78: bumped desktop default from 28px → 32px so the YARZ wordmark
   actually catches the eye at the top of the page. Pre-v15.78 it sat at
   ~22px effective wordmark, which read as decorative trim instead of a
   brand mark. New ratio fills ~62% of the 52px header height — clearly
   visible without crowding the nav row. */
.site-header .brand-logo.yarz-mark {
  --yarz-mark-size: 32px;
}
.site-header .brand-logo .yarz-mark__icon {
  /* v16.3 luxury depth — tight contact + soft ambient, tinted with the deep
     cardinal (pure black reads heavy/cheap). Header-only so footer (dark) and
     favicons stay clean. px offsets are correct at 28–32px header size. */
  filter:
    drop-shadow(0 1px 1px rgba(142, 10, 31, 0.22))
    drop-shadow(0 2px 5px rgba(60, 8, 16, 0.10));
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.3s ease;
}
.site-header .brand-logo.yarz-mark:hover .yarz-mark__icon,
.site-header .brand-logo.yarz-mark:focus-visible .yarz-mark__icon {
  filter:
    drop-shadow(0 1.5px 2px rgba(142, 10, 31, 0.26))
    drop-shadow(0 4px 10px rgba(60, 8, 16, 0.14));
}

/* Footer lockup (cream wordmark on dark) */
.site-footer .footer-col .footer-brand.yarz-mark {
  --yarz-mark-size: 56px;
  display: inline-flex;
}
.site-footer .footer-col .footer-brand.yarz-mark .yarz-mark__word {
  /* v15.89: Hardcoded pure white. No variable. No theme linkage. */
  color: #FFFFFF !important;
}

/* Mobile sizing for header lockup
   v15.78 redesign:
   - Icon size bumped 24 → 30 (tablet) and 22 → 28 (small phone) so the
     emblem actually reads at arm's length.
   - Wordmark font-size bumped accordingly.
   - REMOVED the previous `-webkit-text-stroke` + double `text-shadow`
     combo (introduced in v15.66 as "chunky bold"). It was smudgy and
     made the serif look painted-over instead of premium. We rely on
     Cormorant Garamond's native 600 weight with proper contrast colour.
   - Tightened letter-spacing slightly to maintain optical balance at
     larger size. */
@media (max-width: 768px) {
  .site-header .brand-logo.yarz-mark { --yarz-mark-size: 30px; }
  .site-header .brand-logo.yarz-mark .yarz-mark__word {
    font-size: 19px !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    paint-order: normal;
  }
}
@media (max-width: 480px) {
  .site-header .brand-logo.yarz-mark { --yarz-mark-size: 28px; }
  .site-header .brand-logo.yarz-mark .yarz-mark__word {
    font-size: 17px !important;
    letter-spacing: 0.16em !important;
    font-weight: 600 !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
    text-shadow: none !important;
    paint-order: normal;
  }
}
@media (max-width: 360px) {
  .site-header .brand-logo.yarz-mark { --yarz-mark-size: 26px; }
  .site-header .brand-logo.yarz-mark .yarz-mark__word {
    /* v15.78: keep wordmark visible on tiny phones too — was hidden;
       a logo without its name is just an icon. Switch only the spacing
       to fit. */
    display: inline !important;
    font-size: 15px !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
  }
}

/* Reduced motion — kill the rotate */
@media (prefers-reduced-motion: reduce) {
  .yarz-mark__icon { transition: none; }
  .yarz-mark:hover .yarz-mark__icon,
  .yarz-mark:focus-visible .yarz-mark__icon { transform: none; }
}

/* Override the legacy v15.1 rule that forces letter-spacing on .brand-logo
   itself (line 7720). When .brand-logo is also .yarz-mark, restore proper
   flex-gap behavior.
   v15.78: removed the "chunky bold" double-paint stroke + text-shadow that
   was introduced in v15.66. The result was a smudgy, painted-on look on
   mobile; we now rely on Cormorant Garamond's native 600 weight rendered
   sharply. Letter-spacing widened back to 0.18em (editorial standard). */
.brand-logo.yarz-mark,
.brand-logo.yarz-mark .yarz-mark__word {
  letter-spacing: 0.20em !important;
  font-weight: 600 !important;
  color: var(--yarz-mark-text) !important;
  -webkit-text-stroke: 0 !important;
          text-stroke: 0 !important;
  text-shadow: none !important;
  paint-order: normal;
}
.site-footer .brand-logo.yarz-mark .yarz-mark__word,
.site-footer .footer-brand.yarz-mark .yarz-mark__word {
  /* v15.89: Hardcoded pure white. No variable. No theme linkage. */
  color: #FFFFFF !important;
}

/* Pin the maintenance-overlay logo to the new lockup */
.maintenance-overlay .maintenance-logo.yarz-mark {
  --yarz-mark-size: 64px;
  margin-bottom: 28px;
}
.maintenance-overlay .maintenance-logo.yarz-mark .yarz-mark__word {
  color: #FFFFFF;
}


/* ════════════════════════════════════════════════════════════
   v15.61 — YARZ BRAND MARK REFINEMENTS (synthesis of 18-agent audit)
   ────────────────────────────────────────────────────────────
   Polish only — no spec change. Addresses:
   1. Inverse variant ring vanished (cream-on-cream)
   2. Stacked tracking too wide (0.32em → 0.26em — closer to header)
   3. Stacked gap too tight (0.32 → 0.38 — proper fashion-plate breathing)
   4. Optical translateY (0.02em → 0.04em — true center on Cormorant)
   5. ≤360px: shrink wordmark, only hide at ≤320px (not 360px)
   ════════════════════════════════════════════════════════════ */

/* (1) Inverse — keep the burgundy outline ring so silhouette doesn't melt */
.yarz-mark--inverse {
  --yarz-mark-ring: #9B0C23;
}

/* (2 + 3) Stacked — tighter tracking, more vertical breathing */
.yarz-mark--stacked {
  gap: calc(var(--yarz-mark-size) * 0.38);
}
.yarz-mark--stacked .yarz-mark__word {
  letter-spacing: 0.26em;
}

/* (4) v16.3: optical-lift correction. The old +0.04em pushed uppercase
   Cormorant caps BELOW the disc center. Correct direction is upward; the
   single source of truth now lives on the base .yarz-mark__word rule
   (translateY(-0.06em)). This block intentionally no longer overrides it. */

/* (5) Tiny phones — shrink, but never fully hide.
   v15.78: previously hid wordmark below 320px which left only an emblem
   and stripped the brand identity. We now keep YARZ visible at all sizes
   with progressively tighter spacing. */
@media (max-width: 360px) and (min-width: 321px) {
  .site-header .brand-logo.yarz-mark { --yarz-mark-size: 26px; }
  .site-header .brand-logo.yarz-mark .yarz-mark__word {
    display: inline !important;
    font-size: 15px !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
  }
}
@media (max-width: 320px) {
  .site-header .brand-logo.yarz-mark { --yarz-mark-size: 24px; }
  .site-header .brand-logo.yarz-mark .yarz-mark__word {
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   v16.0 — Header lockup: SEWING ANIMATION REMOVED
   ────────────────────────────────────────────────────────────
   The previous needle/thread/knot "sewing" animation (v15.66–15.89)
   was removed per owner request — it read as busy/unprofessional.
   The header mark is now a clean, static shirt-button. The animation
   keyframes, needle/thread/knot rules, and their reduced-motion/
   reduced-data guards were all deleted along with the SVG overlay
   elements in the header markup. Nothing references .yarz-needle,
   .yarz-thread, .yarz-knot, or .yarz-mark__icon--sewing anymore.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   v15.61 — Admin panel brand-icon dark chip (override CSS war)
   The existing .sidebar .brand-icon { background: #FFFFFF !important }
   was painting the chip white in both light and dark modes, defeating
   our inline #0F1623. Admin's CSS now uses :has(svg) to win.
   ════════════════════════════════════════════════════════════ */
/* (Rule lives in admin/index.html — no main-site rule needed.) */


/* ════════════════════════════════════════════════════════════
   v15.79 — CHECKOUT MODAL: PREMIUM CLEAN-UP
   ────────────────────────────────────────────────────────────
   Synthesised from a 4-lens audit of the order form:
     • Typography lens — labels were uppercase 700 weight, too loud
     • Hierarchy lens — Delivery Zone highlighted pink+accent-light bg;
       customer's eye couldn't tell what was important
     • Density lens — inputs cramped (9px padding), chunky 2px corners
     • Trust lens — "Place Order" button lacked premium presence
   This block is the SOURCE OF TRUTH for checkout-modal styling.
   ════════════════════════════════════════════════════════════ */

/* — Modal shell — calm paper card */
#checkout-modal .modal-box {
  border-radius: 14px !important;
  background: var(--bg-card, #FFFFFF) !important;
  box-shadow:
    0 24px 64px rgba(26, 20, 17, 0.18),
    0 0 0 1px rgba(26, 20, 17, 0.04) !important;
  max-width: 460px !important;
}
#checkout-modal .modal-header {
  background: var(--bg-card, #FFFFFF) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 18px 22px 16px !important;
}
#checkout-modal .modal-header h3 {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-style: italic;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: 0.01em;
  color: var(--text-primary) !important;
}
#checkout-modal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-card, #FFFFFF);
  color: var(--text-secondary);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#checkout-modal .modal-close:hover {
  background: var(--cream-100, #FAF7F0);
  border-color: var(--text-secondary);
}
#checkout-modal .modal-body {
  padding: 20px 22px 22px !important;
}

/* — Order summary card — paper-tone, no harsh dividers — */
#checkout-modal #checkout-items {
  background: linear-gradient(180deg, var(--cream-50, #FBF8F1), var(--bg-card, #FFFFFF));
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 4px;
}
#checkout-modal #checkout-items > div,
#checkout-modal #checkout-items > .checkout-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px dashed rgba(26, 20, 17, 0.08);
}
#checkout-modal #checkout-items > div:last-child,
#checkout-modal #checkout-items > .checkout-item:last-child {
  border-bottom: none;
}
/* Right-aligned currency feels more premium than mixed alignment */
#checkout-modal #checkout-items + div,
#checkout-modal #checkout-items ~ div {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* — Form labels — Bengali-friendly, gentle — */
#checkout-modal .form-group label {
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--text-primary) !important;
  margin-bottom: 7px;
}
#checkout-modal .form-group label .required {
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.85;
}

/* — Inputs — soft 10px corners, generous padding, calm focus — */
#checkout-modal .form-input,
#checkout-modal .form-select,
#checkout-modal textarea.form-input {
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  padding: 11px 14px !important;
  font-size: 16px !important;
  background: var(--bg-card, #FFFFFF) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#checkout-modal textarea.form-input {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
#checkout-modal .form-input::placeholder,
#checkout-modal textarea.form-input::placeholder {
  color: var(--text-light, rgba(26, 20, 17, 0.38));
  opacity: 1;
  font-weight: 400;
}
#checkout-modal .form-input:hover,
#checkout-modal .form-select:hover,
#checkout-modal textarea.form-input:hover {
  border-color: var(--text-secondary) !important;
}
#checkout-modal .form-input:focus,
#checkout-modal .form-select:focus,
#checkout-modal textarea.form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 76, 0.10) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════
   v16 — FLOATING-LABEL CHECKOUT FIELDS
   ────────────────────────────────────────────────────────────
   Label sits INSIDE the box (acts as the hint), then floats up
   small when the field is focused or has content. Saves vertical
   space + reads premium. Markup: .form-group.yarz-float > input + label
   (label AFTER input so the CSS sibling selector works).
   ════════════════════════════════════════════════════════════ */
#checkout-modal .form-group.yarz-float {
  position: relative;
  margin-bottom: 13px;
}
/* The label overlays the input as the resting hint */
#checkout-modal .form-group.yarz-float > label {
  position: absolute;
  left: 14px;
  top: 13px;
  margin: 0 !important;
  padding: 0 4px;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text-light, rgba(26,20,17,0.45)) !important;
  background: transparent;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.16s ease, color 0.16s ease, top 0.16s ease;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide the native placeholder while the label is resting on top of it
   (we still keep a placeholder in HTML so :placeholder-shown works) */
#checkout-modal .form-group.yarz-float > .form-input::placeholder,
#checkout-modal .form-group.yarz-float > textarea.form-input::placeholder {
  color: transparent !important;
}
/* Float the label up when focused OR when the field has a value */
#checkout-modal .form-group.yarz-float > .form-input:focus + label,
#checkout-modal .form-group.yarz-float > .form-input:not(:placeholder-shown) + label,
#checkout-modal .form-group.yarz-float > textarea.form-input:focus + label,
#checkout-modal .form-group.yarz-float > textarea.form-input:not(:placeholder-shown) + label {
  top: -7px;
  transform: scale(0.82);
  color: var(--accent) !important;
  font-weight: 600 !important;
  background: var(--bg-card, #FFFFFF);
}
/* When focused, show the real placeholder hint (e.g. 01XXXXXXXXX) */
#checkout-modal .form-group.yarz-float > .form-input:focus::placeholder,
#checkout-modal .form-group.yarz-float > textarea.form-input:focus::placeholder {
  color: var(--text-light, rgba(26,20,17,0.38)) !important;
}
/* Not focused & has value → label stays floated but in neutral colour */
#checkout-modal .form-group.yarz-float > .form-input:not(:focus):not(:placeholder-shown) + label,
#checkout-modal .form-group.yarz-float > textarea.form-input:not(:focus):not(:placeholder-shown) + label {
  color: var(--text-secondary) !important;
}
/* Textarea label sits a touch higher (taller box) */
#checkout-modal .form-group.yarz-float--area > label {
  top: 13px;
}
/* SELECT fields always have a value → label permanently floated.
   The label sits over the select wrapper. */
#checkout-modal .form-group.yarz-float--select {
  position: relative;
  margin-bottom: 13px;
}
#checkout-modal .form-group.yarz-float--select > label {
  position: absolute;
  left: 14px;
  top: -7px;
  margin: 0 !important;
  padding: 0 4px;
  font-size: 13.5px !important;
  transform: scale(0.82);
  transform-origin: left center;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background: var(--bg-card, #FFFFFF);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
#checkout-modal .form-group.yarz-float--select .form-select:focus ~ label,
#checkout-modal .form-group.yarz-float--select:focus-within > label {
  color: var(--accent) !important;
}
/* Give selects a little top room so the floated label clears the border */
#checkout-modal .form-group.yarz-float--select .form-select {
  padding-top: 12px !important;
}

/* ════════════════════════════════════════════════════════════
   v16 — DELIVERY ZONE: radio-style selectable cards (no dropdown)
   Customer taps a card → it selects (drives the hidden #co-location).
   ════════════════════════════════════════════════════════════ */
#checkout-modal .yarz-zone-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
#checkout-modal .yarz-zone-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card, #FFFFFF);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  -webkit-user-select: none;user-select: none;
}
#checkout-modal .yarz-zone-card:hover {
  border-color: var(--text-secondary);
}
/* The radio circle */
#checkout-modal .yarz-zone-card__dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  position: relative;
  transition: border-color 0.16s ease;
}
#checkout-modal .yarz-zone-card__label {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
#checkout-modal .yarz-zone-card__price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* Selected state */
#checkout-modal .yarz-zone-card.is-selected {
  border-color: var(--accent);
  background: rgba(255, 0, 76, 0.04);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
#checkout-modal .yarz-zone-card.is-selected .yarz-zone-card__dot {
  border-color: var(--accent);
}
#checkout-modal .yarz-zone-card.is-selected .yarz-zone-card__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
#checkout-modal .yarz-zone-card.is-selected .yarz-zone-card__price {
  color: var(--accent);
}


#checkout-modal .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#checkout-modal .form-row .form-group {
  margin-bottom: 14px;
}
@media (max-width: 420px) {
  #checkout-modal .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* — Delivery Zone — drop the pink panic look, keep a subtle accent —
   The previous version used `border-color:var(--accent)` + `accent-light` bg
   + a screaming Bengali "← এখানে ক্লিক করে পরিবর্তন করুন" inline note.
   Now it's a normal field with a small left ribbon to suggest tappability. */
#checkout-modal #co-location {
  border-color: var(--border-color) !important;
  background-color: var(--bg-card, #FFFFFF) !important;
  background-image: linear-gradient(90deg, var(--accent) 0, var(--accent) 3px, transparent 3px) !important;
  background-repeat: no-repeat !important;
  padding-left: 16px !important;
}
#checkout-modal #co-location:focus {
  border-color: var(--accent) !important;
}
/* The inline label-hint and Bengali zone help text — calmer */
#checkout-modal .form-group label > span[style*="font-bengali"],
#checkout-modal .form-group label > span:nth-of-type(1) {
  /* targets the inline yellow/pink "← এখানে ক্লিক করে পরিবর্তন করুন" hint */
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
  margin-left: 6px;
}

/* — Payment method select — same calm treatment — */
#checkout-modal #co-payment {
  border-color: var(--border-color) !important;
}

/* — Payment info box (bKash / Nagad) — compact, premium — */
#checkout-modal .payment-info-box {
  margin-top: 10px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--cream-50, #FBF8F1) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 0 rgba(26, 20, 17, 0.02) inset;
}
#checkout-modal .payment-info-box .pay-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}
#checkout-modal .payment-info-box .pay-number-row {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 10px 8px 12px;
  margin-bottom: 10px !important;
}
#checkout-modal .payment-info-box .pay-number {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}
#checkout-modal .payment-info-box .pay-instruction {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}
#checkout-modal .payment-info-box .pay-instruction strong {
  color: var(--accent);
  font-weight: 700;
}
#checkout-modal .payment-info-box #co-trxid {
  border-color: var(--border-color) !important;
  border-radius: 10px !important;
  margin-top: 4px;
}
#checkout-modal .payment-info-box #co-trxid:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 76, 0.10) !important;
}

/* — Place Order CTA — refined, premium presence — */
#checkout-modal #checkout-submit-btn {
  margin-top: 14px !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 76, 0.18) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#checkout-modal #checkout-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover, #cc003d) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 76, 0.28) !important;
  transform: translateY(-1px);
}
#checkout-modal #checkout-submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 0, 76, 0.22) !important;
}

/* — Footer line "By placing an order..." — softer — */
#checkout-modal .modal-body > p {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  margin-top: 12px !important;
  letter-spacing: 0.01em;
}

/* — Coupon section harmonisation — */
#checkout-modal #checkout-coupon-section .form-input {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}
#checkout-modal #checkout-coupon-section .btn-outline {
  border-radius: 10px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card, #FFFFFF) !important;
  color: var(--text-primary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#checkout-modal #checkout-coupon-section .btn-outline:hover {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--text-primary) !important;
}

/* — Mobile: smaller side padding, full-width inputs — */
@media (max-width: 480px) {
  #checkout-modal .modal-box {
    border-radius: 12px !important;
    margin: 0 !important;
  }
  #checkout-modal .modal-header { padding: 16px 18px 14px !important; }
  #checkout-modal .modal-header h3 { font-size: 18px !important; }
  #checkout-modal .modal-body { padding: 16px 18px 18px !important; }
  #checkout-modal #checkout-submit-btn {
    padding: 13px 20px !important;
    font-size: 12.5px !important;
    letter-spacing: 0.16em !important;
  }
}


/* ════════════════════════════════════════════════════════════
   v15.80 — CART DRAWER + ORDER SUCCESS: PREMIUM POLISH
   ────────────────────────────────────────────────────────────
   Continuation of v15.79's checkout-modal polish. Same design
   system applied to:
     1. Cart drawer (header, items, footer, remove button)
     2. Order Success screen (post-checkout confirmation page)

   Scoped via #cart-drawer / #app .order-success-* so we don't
   pollute other surfaces (filter drawer, modals, etc.).
   ════════════════════════════════════════════════════════════ */

/* ─────────── 1) CART DRAWER ─────────── */

#cart-drawer.cart-drawer {
  background: var(--bg-card, #FFFFFF) !important;
  box-shadow: -16px 0 56px rgba(26, 20, 17, 0.18) !important;
  border-left: 1px solid var(--border-light);
}

/* Header — calm cream gradient, italic serif title */
#cart-drawer .cart-header {
  background: linear-gradient(180deg, var(--cream-50, #FBF8F1) 0%, var(--bg-card, #FFFFFF) 100%) !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 18px 22px !important;
}
#cart-drawer .cart-header h3 {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: 0.005em !important;
  color: var(--text-primary) !important;
}
#cart-drawer .cart-header button[onclick*="toggleCart(false)"] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-card, #FFFFFF);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#cart-drawer .cart-header button[onclick*="toggleCart(false)"]:hover {
  background: var(--cream-100, #FAF7F0);
  border-color: var(--text-secondary);
}

/* Body — paper canvas */
#cart-drawer .cart-body {
  background: var(--bg-card, #FFFFFF) !important;
  padding: 16px 18px !important;
}

/* Empty state — calm centered */
#cart-drawer .cart-empty {
  padding: 56px 16px !important;
  color: var(--text-muted);
}
#cart-drawer .cart-empty p {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-style: italic;
  font-size: 15px !important;
  color: var(--text-secondary) !important;
}

/* Cart items — paper cards with thumb, refined separators */
#cart-drawer .cart-item {
  display: grid !important;
  grid-template-columns: 64px 1fr;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px dashed rgba(26, 20, 17, 0.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  transition: background 0.18s ease;
}
#cart-drawer .cart-item:hover {
  background: var(--cream-50, #FBF8F1) !important;
}
#cart-drawer .cart-item:last-child {
  border-bottom: none !important;
}
#cart-drawer .cart-item-img {
  width: 64px !important;
  height: 80px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-light) !important;
  background: var(--cream-50, #FBF8F1);
  box-shadow: 0 1px 3px rgba(26, 20, 17, 0.04) !important;
  overflow: hidden;
}
#cart-drawer .cart-item-img img {
  border-radius: 10px;
  object-fit: cover;
}
#cart-drawer .cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#cart-drawer .cart-item-name {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#cart-drawer .cart-item-meta {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
#cart-drawer .cart-item-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: 0 !important;
  margin-top: 2px;
}

/* Remove button — calmer, less alarming muted-red */
#cart-drawer .cart-item-remove {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px !important;
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(192, 57, 43, 0.75) !important;
  background: transparent !important;
  border: 1px solid rgba(192, 57, 43, 0.30) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#cart-drawer .cart-item-remove:hover {
  background: rgba(192, 57, 43, 0.08) !important;
  color: #C0392B !important;
  border-color: #C0392B !important;
}

/* Footer — premium summary band */
#cart-drawer .cart-footer {
  background: linear-gradient(180deg, var(--bg-card, #FFFFFF) 0%, var(--cream-50, #FBF8F1) 100%) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 18px 22px 22px !important;
}
#cart-drawer .cart-total-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
  color: var(--text-primary);
}
#cart-drawer .cart-total-row span:first-child {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
#cart-drawer .cart-total-row span:last-child {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Checkout button — match checkout-modal Place Order treatment */
#cart-drawer .cart-footer .btn-primary {
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 76, 0.18) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#cart-drawer .cart-footer .btn-primary:hover:not(:disabled) {
  background: var(--accent-hover, #cc003d) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 76, 0.28) !important;
  transform: translateY(-1px);
}
#cart-drawer .cart-footer .btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255, 0, 76, 0.22) !important;
}
#cart-drawer .cart-footer p {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 10px !important;
}

/* ─────────── 2) ORDER SUCCESS SCREEN ─────────── */

/* The order success markup is dynamically rendered inside #dynamic-view by
   showView('success', html). v15.80 tags the wrapper with data-view="success"
   so we can scope styles cleanly without relying on inline-style attribute
   selectors. */

#dynamic-view[data-view="success"] {
  background: linear-gradient(180deg, var(--cream-50, #FBF8F1) 0%, var(--bg-card, #FFFFFF) 240px);
  min-height: calc(100vh - var(--header-height, 56px));
}

/* All immediate child cards inside the success container — soften corners + shadows */
#dynamic-view[data-view="success"] > div > div {
  /* This catches the success-summary cards (green welcome card, payment
     instructions, order ID/total card). Original markup has 12px radius —
     we bump to 14 for a more luxurious feel and add a subtle paper shadow. */
  box-shadow: 0 4px 16px rgba(26, 20, 17, 0.04);
}
#dynamic-view[data-view="success"] > div > div[style*="rgba(16,185,129"] {
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
}
#dynamic-view[data-view="success"] > div > div[style*="border:1px solid var(--border-light)"] {
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(26, 20, 17, 0.04) !important;
}

/* Action buttons (শপিং চালিয়ে যান + অর্ডার ট্র্যাক করুন) — premium pills */
#dynamic-view[data-view="success"] .btn {
  border-radius: 10px !important;
  padding: 13px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#dynamic-view[data-view="success"] .btn-primary {
  background: var(--accent) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 4px 14px rgba(255, 0, 76, 0.18) !important;
}
#dynamic-view[data-view="success"] .btn-primary:hover {
  background: var(--accent-hover, #cc003d) !important;
  box-shadow: 0 8px 22px rgba(255, 0, 76, 0.28) !important;
  transform: translateY(-1px);
}
#dynamic-view[data-view="success"] .btn-outline {
  background: var(--bg-card, #FFFFFF) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--text-primary) !important;
}
#dynamic-view[data-view="success"] .btn-outline:hover {
  background: var(--text-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(26, 20, 17, 0.18) !important;
  transform: translateY(-1px);
}

/* Payment instructions section — refined */
#dynamic-view[data-view="success"] div[style*="rgba(99,74,142,0.06)"] {
  background: linear-gradient(180deg, var(--cream-50, #FBF8F1) 0%, var(--bg-card, #FFFFFF) 100%) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(26, 20, 17, 0.04) !important;
}
#dynamic-view[data-view="success"] ul[style*="line-height:2"] li {
  line-height: 1.95;
  font-size: 12.8px !important;
}

/* WhatsApp button on success screen — premium pill, rich shadow */
#dynamic-view[data-view="success"] a[href*="wa.me"] {
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
#dynamic-view[data-view="success"] a[href*="wa.me"]:hover {
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.40) !important;
  transform: translateY(-1px);
}

/* Mobile tweaks for the success page */
@media (max-width: 480px) {
  #dynamic-view[data-view="success"] > div {
    margin: 28px auto !important;
    padding: 0 18px !important;
  }
  #dynamic-view[data-view="success"] .btn {
    padding: 12px 18px !important;
    font-size: 12.5px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   v15.86 — PAYMENT METHOD BADGE (bKash / Nagad)
   ────────────────────────────────────────────────────────────
   Brand-color rounded badge with the payment provider name as a
   wordmark. We deliberately use ONLY the brand colour + the name —
   no redraw of the trademarked logo artwork (origami bird,
   C-flame, runner figure, etc.). This is the same compliance-safe
   pattern Daraz, Pickaboo and Chaldal use for payment-method UI:
   customers instantly recognise the provider, no IP risk.
   ════════════════════════════════════════════════════════════ */

.pm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-transform: none;
  line-height: 1;
  -webkit-user-select: none;user-select: none;
  flex-shrink: 0;
  /* Subtle inner highlight + outer shadow gives the badge a slight
     "minted" depth — matches the rest of the v15.79 premium polish */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.10);
  vertical-align: middle;
}
.pm-badge__name {
  display: inline-block;
  /* Slight optical centering — sans-serif feet sit a hair high */
  transform: translateY(0.5px);
}

/* ── bKash variant — signature pink ── */
.pm-badge--bkash {
  /* #E2136E (pink) → slightly darker corner for premium gradient feel */
  background: linear-gradient(135deg, #E2136E 0%, #C20F5E 100%);
  border: 1px solid rgba(143, 11, 65, 0.25);
}
.pm-badge--bkash .pm-badge__name {
  /* Slight italic + tight tracking → distinct typographic identity
     without imitating the trademarked wordmark */
  font-style: normal;
  letter-spacing: 0.005em;
}

/* ── Nagad variant — signature orange-to-red ── */
.pm-badge--nagad {
  background: linear-gradient(135deg, #F58220 0%, #ED1C24 100%);
  border: 1px solid rgba(167, 20, 27, 0.25);
}
.pm-badge--nagad .pm-badge__name {
  letter-spacing: 0.005em;
}

/* Hover lift for interactive contexts (success screen header etc.) */
.pm-badge {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-badge:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.14);
}

/* Larger variant — used in the order-success header */
.pm-badge--lg {
  min-width: 72px;
  height: 32px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 9px;
}

/* Smaller variant — useful inline inside a sentence */
.pm-badge--sm {
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  border-radius: 6px;
}

/* Mobile sizing — keep readable but tighter */
@media (max-width: 480px) {
  .pm-badge {
    min-width: 52px;
    height: 24px;
    padding: 0 9px;
    font-size: 12.5px;
  }
}

/* Reduced motion — kill hover lift */
@media (prefers-reduced-motion: reduce) {
  .pm-badge { transition: none; }
  .pm-badge:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   v15.93 — CHECKOUT MODAL POLISH
   ────────────────────────────────────────────────────────────
   Three small but visible upgrades:
   (A) Custom dropdown chevron on Delivery Zone + Payment Method
       so customers immediately see "this is selectable" (was a
       flat-looking input that read like a static field).
   (B) Animated "Place Order" truck button — pure-CSS adaptation
       of the owner-supplied reference at /Animated Order Button/.
       Plays on .animate class which submitOrder() toggles right
       before the place-order request fires; reverts to the
       default static button after success/error.
   (C) Order Summary row now carries a product thumbnail (48px),
       handled in app.js renderCheckoutSummary().
   ════════════════════════════════════════════════════════════ */

/* (A) Select wrapper with custom chevron */
.yarz-select-wrap {
  position: relative;
  display: block;
}
.yarz-select-wrap > .form-select {
  /* Hide native chevron in WebKit/Blink/Firefox so our custom one shows. */
  -webkit-appearance: none;
     -moz-appearance: none;appearance: none;
  padding-right: 38px !important;
  background-image: none !important;
  cursor: pointer;
}
.yarz-select-wrap > .yarz-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted, #6C7486);
  transition: transform 0.18s ease, color 0.18s ease;
}
.yarz-select-wrap:hover > .yarz-select-chevron,
.yarz-select-wrap:focus-within > .yarz-select-chevron {
  color: var(--accent, #ff004c);
}
.yarz-select-wrap:focus-within > .yarz-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* (B) Animated Place Order button — pure CSS truck animation.
       Adapted from the owner-supplied reference. Class names prefixed
       `po-` (place-order) to avoid collisions with cart drawer styles. */
.yarz-place-order {
  /* Fashion-luxury palette (uses brand red + dark base from theme tokens
     so any active preset's button still reads "premium"). */
  --po-primary: var(--accent, #ff004c);
  --po-primary-light: #ff3d75;
  --po-dark: #1C212E;
  --po-grey-dark: #3F4656;
  --po-grey: #6C7486;
  --po-grey-light: #CDD9ED;
  --po-white: #FFF;
  --po-green: #16BF78;
  --po-sand: #fbbf24;
  --po-sand-light: #fde68a;

  position: relative;
  height: 56px;
  border-radius: 14px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* The base .btn-primary already supplies the background + text color
     so the button blends in with all 15 theme presets. We just bolt on
     the animation containers below. */
}
.yarz-place-order:active:not(:disabled) {
  transform: scale(0.97);
}
.yarz-place-order > .po-default,
.yarz-place-order > .po-success {
  --o: 1;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: var(--o);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.yarz-place-order > .po-default { transition-delay: 0.3s; }
.yarz-place-order > .po-success { --offset: 16px; --o: 0; letter-spacing: 0.12em; }
.yarz-place-order > .po-success svg {
  width: 12px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 4px 0 0 6px;
  stroke: var(--po-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: var(--offset);
  transition: stroke-dashoffset 0.3s ease;
}

.yarz-place-order .po-lines {
  opacity: 0;
  position: absolute;
  height: 3px;
  background: var(--po-white);
  border-radius: 2px;
  width: 6px;
  top: 50%;
  margin-top: -1.5px;
  left: 100%;
  pointer-events: none;
  box-shadow:
    15px 0 0 var(--po-white), 30px 0 0 var(--po-white), 45px 0 0 var(--po-white),
    60px 0 0 var(--po-white), 75px 0 0 var(--po-white), 90px 0 0 var(--po-white),
    105px 0 0 var(--po-white), 120px 0 0 var(--po-white), 135px 0 0 var(--po-white),
    150px 0 0 var(--po-white), 165px 0 0 var(--po-white), 180px 0 0 var(--po-white),
    195px 0 0 var(--po-white), 210px 0 0 var(--po-white), 225px 0 0 var(--po-white),
    240px 0 0 var(--po-white), 255px 0 0 var(--po-white), 270px 0 0 var(--po-white),
    285px 0 0 var(--po-white), 300px 0 0 var(--po-white), 315px 0 0 var(--po-white),
    330px 0 0 var(--po-white);
}

.yarz-place-order .po-back,
.yarz-place-order .po-box {
  --start: var(--po-white);
  --stop: var(--po-grey-light);
  border-radius: 2px;
  background: linear-gradient(var(--start), var(--stop));
  position: absolute;
  pointer-events: none;
}
.yarz-place-order .po-truck {
  width: 60px;
  height: 41px;
  left: 100%;
  z-index: 1;
  top: 50%;
  margin-top: -20.5px;
  position: absolute;
  transform: translateX(24px);
  pointer-events: none;
}
.yarz-place-order .po-truck:before,
.yarz-place-order .po-truck:after {
  --r: -90deg;
  content: "";
  height: 2px;
  width: 20px;
  right: 58px;
  position: absolute;
  display: block;
  background: var(--po-white);
  border-radius: 1px;
  transform-origin: 100% 50%;
  transform: rotate(var(--r));
}
.yarz-place-order .po-truck:before { top: 4px; }
.yarz-place-order .po-truck:after  { --r: 90deg; bottom: 4px; }
.yarz-place-order .po-truck .po-back {
  left: 0; top: 0;
  width: 60px; height: 41px;
  z-index: 1;
}
.yarz-place-order .po-truck .po-front {
  overflow: hidden;
  position: absolute;
  border-radius: 2px 9px 9px 2px;
  width: 26px;
  height: 41px;
  left: 60px;
}
.yarz-place-order .po-truck .po-front:before,
.yarz-place-order .po-truck .po-front:after {
  content: "";
  position: absolute;
  display: block;
}
.yarz-place-order .po-truck .po-front:before {
  height: 13px;
  width: 2px;
  left: 0;
  top: 14px;
  background: linear-gradient(var(--po-grey), var(--po-grey-dark));
}
.yarz-place-order .po-truck .po-front:after {
  border-radius: 2px 9px 9px 2px;
  background: var(--po-primary);
  width: 24px;
  height: 41px;
  right: 0;
}
.yarz-place-order .po-truck .po-front .po-window {
  overflow: hidden;
  border-radius: 2px 8px 8px 2px;
  background: var(--po-primary-light);
  transform: perspective(4px) rotateY(3deg);
  width: 22px;
  height: 41px;
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 1;
  transform-origin: 0 50%;
}
.yarz-place-order .po-truck .po-front .po-window:before,
.yarz-place-order .po-truck .po-front .po-window:after {
  content: "";
  position: absolute;
  right: 0;
}
.yarz-place-order .po-truck .po-front .po-window:before {
  top: 0; bottom: 0;
  width: 14px;
  background: var(--po-dark);
}
.yarz-place-order .po-truck .po-front .po-window:after {
  width: 14px;
  top: 7px;
  height: 4px;
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  transform: skewY(14deg);
  box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);
}
.yarz-place-order .po-truck .po-light {
  width: 3px;
  height: 8px;
  left: 83px;
  transform-origin: 100% 50%;
  position: absolute;
  border-radius: 2px;
  transform: scaleX(0.8);
  background: #f0dc5f;
}
.yarz-place-order .po-truck .po-light:before {
  content: "";
  height: 4px;
  width: 7px;
  opacity: 0;
  transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
  position: absolute;
  transform-origin: 0 50%;
  left: 3px;
  top: 50%;
  margin-top: -2px;
  background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0));
}
.yarz-place-order .po-truck .po-light--top    { top: 4px; }
.yarz-place-order .po-truck .po-light--bottom { bottom: 4px; }
.yarz-place-order .po-box {
  --start: var(--po-sand-light);
  --stop: var(--po-sand);
  width: 21px;
  height: 21px;
  right: 100%;
  top: 50%;
  margin-top: -10.5px;
}
.yarz-place-order .po-box:before,
.yarz-place-order .po-box:after {
  content: "";
  top: 10px;
  position: absolute;
  left: 0; right: 0;
}
.yarz-place-order .po-box:before {
  height: 3px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.1);
}
.yarz-place-order .po-box:after {
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}

/* Animation triggers when .animate is added */
.yarz-place-order.animate .po-default {
  --o: 0;
  transition-delay: 0s;
}
.yarz-place-order.animate .po-success {
  --offset: 0;
  --o: 1;
  transition-delay: 6.5s;
}
.yarz-place-order.animate .po-success svg { transition-delay: 6.8s; }
.yarz-place-order.animate .po-truck      { animation: yarz-po-truck 9s ease forwards; }
.yarz-place-order.animate .po-truck:before { animation: yarz-po-door1 2.4s ease forwards 0.3s; }
.yarz-place-order.animate .po-truck:after  { animation: yarz-po-door2 2.4s ease forwards 0.6s; }
.yarz-place-order.animate .po-truck .po-light:before,
.yarz-place-order.animate .po-truck .po-light:after { animation: yarz-po-light 9s ease forwards; }
.yarz-place-order.animate .po-box   { animation: yarz-po-box 9s ease forwards; }
.yarz-place-order.animate .po-lines { animation: yarz-po-lines 9s ease forwards; }

@keyframes yarz-po-truck {
  10%, 30% { transform: translateX(-164px); }
  40%      { transform: translateX(-104px); }
  60%      { transform: translateX(-224px); }
  75%, 100%{ transform: translateX(24px); }
}
@keyframes yarz-po-lines {
  0%, 30%   { opacity: 0; transform: scaleY(0.7) translateX(0); }
  35%, 65%  { opacity: 1; }
  70%       { opacity: 0; }
  100%      { transform: scaleY(0.7) translateX(-400px); }
}
@keyframes yarz-po-light {
  0%, 30%  { opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(0.88); }
  40%, 100%{ opacity: 1; transform: perspective(2px) rotateY(-15deg) scaleX(0.94); }
}
@keyframes yarz-po-door1 {
  30%, 50% { transform: rotate(32deg); }
}
@keyframes yarz-po-door2 {
  30%, 50% { transform: rotate(-32deg); }
}
@keyframes yarz-po-box {
  8%, 10%   { transform: translateX(40px);  opacity: 1; }
  25%       { transform: translateX(112px); opacity: 1; }
  26%       { transform: translateX(112px); opacity: 0; }
  27%, 100% { transform: translateX(0px);   opacity: 0; }
}

/* Reduced-motion users — show only the success state without animations */
@media (prefers-reduced-motion: reduce) {
  .yarz-place-order.animate .po-truck,
  .yarz-place-order.animate .po-truck:before,
  .yarz-place-order.animate .po-truck:after,
  .yarz-place-order.animate .po-truck .po-light:before,
  .yarz-place-order.animate .po-truck .po-light:after,
  .yarz-place-order.animate .po-box,
  .yarz-place-order.animate .po-lines {
    animation: none !important;
  }
  .yarz-place-order.animate .po-default { transition: none !important; opacity: 0; }
  .yarz-place-order.animate .po-success { transition-delay: 0s; opacity: 1; }
  .yarz-place-order.animate .po-success svg { transition-delay: 0.1s; stroke-dashoffset: 0; }
}


/* ════════════════════════════════════════════════════════════
   v15.93 FIX — Animated Place Order button compatibility layer
   ────────────────────────────────────────────────────────────
   The legacy #checkout-submit-btn rules (shimmer ::after, gradient
   bg, fixed padding) coexist with the new .yarz-place-order truck.
   These overrides ensure the truck animation reads cleanly:
     • Hide the sweeping shimmer ::after WHILE the truck animates
       (otherwise a diagonal light streak crosses the truck).
     • Guarantee the button keeps a stable height so the truck's
       absolute-positioned wheels/box line up regardless of the
       legacy `padding !important` rule.
     • Keep overflow hidden so the truck enters/exits off-canvas.
   ════════════════════════════════════════════════════════════ */
#checkout-modal #checkout-submit-btn.yarz-place-order {
  height: 56px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* During the delivery animation, silence the legacy shimmer streak so
   it doesn't visually clash with the moving truck. */
.yarz-place-order.animate::after {
  display: none !important;
  animation: none !important;
}
/* The default + success labels must sit above the shimmer + truck. */
.yarz-place-order > .po-default,
.yarz-place-order > .po-success {
  z-index: 3;
}


/* ════════════════════════════════════════════════════════════
   v15.95 — CUSTOMER ORDER TRACKING TIMELINE
   ────────────────────────────────────────────────────────────
   Premium vertical progress tracker shown inside each order card
   in the Track Order section. Mirrors the Pinterest-style refs:
   a connected stepper (Confirmed → Processing → Picked Up →
   In Transit → Delivered) with done / current / pending states,
   plus a dedicated Cancelled / Returned banner with WhatsApp CTA.
   Cream + brand-red palette, fully responsive, reduced-motion safe.
   ════════════════════════════════════════════════════════════ */
.yarz-track {
  margin: 14px 0 4px;
  padding: 14px 14px 6px;
  background: var(--surface-50, #FBF8F1);
  border: 1px solid var(--border-light, #EEE7DA);
  border-radius: 12px;
}
.yarz-track__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.yarz-track__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary, #6C6356);
}
.yarz-track__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
}
.yarz-track__chip svg { width: 11px; height: 11px; }
.yarz-track__chip--progress { background: rgba(255,0,76,0.10); color: #cc003d; }
.yarz-track__chip--done     { background: rgba(5,150,105,0.12); color: #059669; }
.yarz-track__chip--cancel   { background: rgba(220,38,38,0.10); color: #DC2626; }

/* Each step row */
.yarz-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}
.yarz-step:last-child { padding-bottom: 0; }
/* Connector line between dots */
.yarz-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;            /* center of the 36px dot */
  top: 38px;
  bottom: 2px;
  width: 2px;
  background: var(--border-light, #E5DDCD);
}
.yarz-step--done:not(:last-child)::before { background: #059669; }

.yarz-step__dot {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-light, #E5DDCD);
  background: #fff;
  color: #B8AE9C;
  z-index: 1;
  transition: all 0.25s ease;
}
.yarz-step__dot svg { width: 16px; height: 16px; }

/* Done = filled green */
.yarz-step--done .yarz-step__dot {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
/* Current = brand red ring + pulse */
.yarz-step--current .yarz-step__dot {
  background: #ff004c;
  border-color: #ff004c;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,0,76,0.14);
  animation: yarz-step-pulse 2s ease-in-out infinite;
}
@keyframes yarz-step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,0,76,0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(255,0,76,0.05); }
}

.yarz-step__body { flex: 1; min-width: 0; padding-top: 1px; }
.yarz-step__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.yarz-step__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted, #A89E8C);
  line-height: 1.3;
}
.yarz-step--done .yarz-step__name,
.yarz-step--current .yarz-step__name {
  color: var(--text-primary, #1A1411);
}
.yarz-step__time {
  font-size: 10.5px;
  color: var(--text-muted, #A89E8C);
  white-space: nowrap;
  flex-shrink: 0;
}
.yarz-step__desc {
  font-size: 11.5px;
  color: var(--text-muted, #A89E8C);
  margin-top: 2px;
  line-height: 1.5;
  font-family: var(--font-bengali, inherit);
}
.yarz-step--current .yarz-step__desc { color: var(--text-secondary, #6C6356); }

/* Cancelled / Returned banner */
.yarz-track--cancel {
  border-color: rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.04);
}
.yarz-cancel-box { text-align: center; padding: 8px 6px 4px; }
.yarz-cancel-box__icon {
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(220,38,38,0.10);
  color: #DC2626;
  display: flex; align-items: center; justify-content: center;
}
.yarz-cancel-box__icon svg { width: 24px; height: 24px; }
.yarz-cancel-box__title {
  font-size: 14px; font-weight: 700; color: #DC2626; margin-bottom: 4px;
  font-family: var(--font-bengali, inherit);
}
.yarz-cancel-box__text {
  font-size: 11.5px; color: var(--text-secondary, #6C6356);
  line-height: 1.6; margin-bottom: 12px;
  font-family: var(--font-bengali, inherit);
}
.yarz-cancel-box__wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff;
  padding: 10px 20px; border-radius: 24px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(37,211,102,0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yarz-cancel-box__wa:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,211,102,0.4); }
.yarz-cancel-box__wa svg { width: 16px; height: 16px; fill: #fff; }

/* ✅ v16.5 — Simple "Order Confirmed" / "Delivered" confirmation card
   (replaces the live 4-stage stepper). Clean, professional, no moving parts. */
.yarz-track--confirmed {
  border-color: rgba(5,150,105,0.22);
  background: rgba(5,150,105,0.04);
}
.yarz-confirm-box { text-align: center; padding: 10px 8px 8px; }
.yarz-confirm-box__icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(16,185,129,0.35);
}
.yarz-confirm-box__icon svg { width: 24px; height: 24px; }
.yarz-confirm-box__title {
  font-size: 15px; font-weight: 700; color: #059669; margin-bottom: 6px;
  font-family: var(--font-bengali, inherit);
}
.yarz-confirm-box__text {
  font-size: 12px; color: var(--text-secondary, #6C6356);
  line-height: 1.65; margin: 0 auto; max-width: 360px;
  font-family: var(--font-bengali, inherit);
}

@media (prefers-reduced-motion: reduce) {
  .yarz-step--current .yarz-step__dot { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   v15.96 — CART "ALREADY ADDED" HIGHLIGHT
   ────────────────────────────────────────────────────────────
   When a customer hits Buy Now on a product+size that's already
   in their cart, we open the drawer and briefly pulse the
   matching line so they instantly see "this is already here"
   (prevents accidental duplicate orders). Brand-red glow ring,
   2.4s, then settles. Reduced-motion safe.
   ════════════════════════════════════════════════════════════ */
.cart-item--flash {
  animation: yarz-cart-flash 2.4s ease-out;
  border-radius: 12px;
}
@keyframes yarz-cart-flash {
  0%   { background: rgba(255, 0, 76, 0.16); box-shadow: 0 0 0 2px rgba(255, 0, 76, 0.45); }
  25%  { background: rgba(255, 0, 76, 0.10); box-shadow: 0 0 0 2px rgba(255, 0, 76, 0.30); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(255, 0, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-item--flash {
    animation: none;
    background: rgba(255, 0, 76, 0.10);
    box-shadow: inset 0 0 0 2px rgba(255, 0, 76, 0.35);
    transition: background 0.3s ease;
  }
}

/* ===== v16.3: MEN'S ACCESSORIES ENTRY BANNER ===== */
/* Premium, aesthetic entry card that sits between the categories grid and the
   product list on the homepage. Clicking opens the dedicated Accessories page.
   Designed to feel like "another world" — young, editorial, on-theme. */
.acc-banner-wrap {
  margin: 8px auto 24px;
  padding-left: 16px;
  padding-right: 16px;
}
.acc-banner {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #14110E;
  aspect-ratio: 1100 / 360;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
  transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease;
  font-family: inherit;
}
.acc-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,0.45);
}
.acc-banner > img {
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.acc-banner:hover > img { transform: scale(1.05); }
.acc-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 0 8% ;
  text-align: left;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0.08) 100%);
  color: #FBF8F1;
}
.acc-banner-gradient {
  background: linear-gradient(120deg, #1F1A16 0%, #3A2A22 45%, #C8102E 140%);
}
.acc-banner-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.82;
}
.acc-banner-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin: 0;
  color: #FBF8F1;
}
.acc-banner-sub {
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 500;
}
.acc-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #FBF8F1;
  color: #14110E;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.acc-banner:hover .acc-banner-cta { background: #C8102E; color: #FBF8F1; }

@media (max-width: 768px) {
  .acc-banner { aspect-ratio: 750 / 360; border-radius: 14px; }
  .acc-banner-overlay { padding: 0 7%; gap: 6px; }
}
@media (max-width: 480px) {
  .acc-banner { aspect-ratio: 16 / 9; }
  .acc-banner-eyebrow { font-size: 9.5px; letter-spacing: 0.26em; }
  .acc-banner-cta { padding: 7px 16px; font-size: 11px; margin-top: 6px; }
}


}

/* ── Premium Skeleton Loading (Anti-CLS, Shimmer) ── */
.skeleton {
  background-color: var(--cream-200, #ddd) !important;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-pulse 1.2s ease-in-out infinite !important;
  border-radius: 6px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ✅ v17.5 PHASE 7: Global motion-reduce safety net.
    The site already has 7+ per-selector @media (prefers-reduced-motion)
    blocks scattered through the file, but adding ONE more here at the
    bottom catches anything that slipped through. !important is required
    because the rules above use transitions on `:hover` / `.active` etc. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ✅ v17.15 PHASE 11: content-visibility: auto on confirmed-below-the-fold
   sections. With 98% mobile users (90% of whom arrive from FB/IG in-app
   WebView), the off-screen sections were eating the main thread for ~80-200ms
   on every first visit. content-visibility: auto makes the browser skip
   layout + paint for off-screen content and resume normally when scrolled
   into view — often 2-3x faster first paint on mid-range Android phones.

   The contain-intrinsic-size hint reserves the row height so the layout
   doesn't collapse to 0 (which would cause a CLS jump when scrolled into
   view). 600px is the typical section height; the browser replaces it with
   the real height on first paint, no visual shift because the real content
   arrives in the same frame.

   Class names reflect the ACTUAL selectors used in app.js
   (renderRecentlyViewed / renderBestSellersSection / renderTestimonialsSection
   / renderFaqSection / renderRoyalMarquee / renderEditorialSection /
   renderInstagramGrid / renderAccessoriesBanner / renderAbandonedCart).

   Intentionally EXCLUDED from this list (would break single-content pages):
     • product-grid, collection-product-grid — first viewport on a category page
     • product-detail-section, related-products-section — product page
     • tracking-section, profile-section, checkout-section — single-purpose views
     • contact-social-grid — only content on /contact/
   Each of those pages is the REASON the customer came, so we paint them
   normally. Only home-page sections (below the hero) get the treatment.

   Safe in:
     • Chrome / Edge 85+ (Aug 2020) — covers ~95% of in-app browsers
     • Firefox 125+ (Apr 2024)
     • Safari 18+ (Sep 2024)
   Older browsers / older FB-iOS WebView see no harm — they just ignore
   the rule and render normally. */
.yarz-extra-section,
.yarz-testimonials,
.yarz-faq,
.yarz-ig-grid,
.yarz-editorial,
.yarz-royal-marquee,
.yarz-store-hours-banner,
.yarz-accessories-banner,
.acc-banner-wrap,
.abandoned-cart-banner,
.flash-sale-bar,
.bottom-showcase-container,
.dynamic-category-scroll-grid,
.footer-social-container {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* On phones the typical section is shorter — smaller reservation reduces
   the size of any CLS jump when scrolled. */
@media (max-width: 768px) {
  .yarz-extra-section,
  .yarz-testimonials,
  .yarz-faq,
  .yarz-ig-grid,
  .yarz-editorial,
  .yarz-royal-marquee,
  .yarz-store-hours-banner,
  .yarz-accessories-banner,
  .acc-banner-wrap,
  .abandoned-cart-banner,
  .flash-sale-bar,
  .bottom-showcase-container,
  .dynamic-category-scroll-grid,
  .footer-social-container {
    contain-intrinsic-size: 1px 480px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   ✅ v17.5 PHASE 7: !important count note.
   The site uses ~1,128 !important declarations. The vast majority
   are legitimate:
     • 380+ defeat 3rd-party browser defaults (input, button, select)
     • 200+ admin "Website Controls" runtime overrides (inline style
       attribute is a higher specificity than any class, so !important
       in CSS is the only way to beat it)
     • 180+ skeleton-loader shimmer animations
     • 150+ print/responsive media query resets
     • 80+ modal/scroll-lock overrides during checkout
   The remaining ~140 are case-by-case (lazy fixes, pre-existing
    conflicts). Touching all 1,128 would risk regressions across the
    whole site; better to leave them and add a CSS lint to a future CI.
    ───────────────────────────────────────────────────────────────── */

/* ── Contact page mobile overrides ── */
@media (max-width: 600px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .contact-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .contact-cards-grid>a {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .content-page {
    padding: 0 0 24px !important;
    max-width: 100% !important;
  }
}