/* ==============================================================================
   OFFICIAL STOREFRONT - Enterprise E-Commerce Design System & E-Shop CSS
   (c) 2026 OFFICIAL STOREFRONT
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Commissioner:wght@300;400;500;600;700&display=swap');

:root {
  /* Maison Haritidis 1979 — Haute Joaillerie & Horlogerie Palette */
  --haritidis-obsidian: #0B0C10;
  --haritidis-charcoal: #141720;
  --haritidis-gold: #C5A059;
  --haritidis-gold-light: #E5C883;
  --haritidis-gold-deep: #96732C;
  --haritidis-ivory: #FAF8F5;
  --haritidis-pearl: #F2EFE9;

  --store-burgundy: #0E1017;
  --store-burgundy-dark: #07080C;
  --store-burgundy-light: #C5A059;
  --store-burgundy-glow: rgba(197, 160, 89, 0.22);
  --store-onyx: #0E1017;
  --store-onyx-card: #151822;
  --store-sand: #FAF8F5;
  --store-sand-surface: #FFFFFF;
  --store-sand-border: #E5DEC9;
  --store-porcelain: #FFFFFF;
  --store-text-main: #12141C;
  --store-text-muted: #5A6070;
  --store-text-light: #949BA8;
  --store-gold: #C5A059;
  --store-gold-light: #E5C883;
  --store-silver: #E2E8F0;
  --store-emerald: #10B981;
  --store-ruby: #E11D48;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Commissioner', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Commissioner', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Commissioner', sans-serif;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 10px rgba(11, 12, 16, 0.05);
  --shadow-md: 0 10px 28px rgba(11, 12, 16, 0.09);
  --shadow-lg: 0 20px 48px rgba(11, 12, 16, 0.16);
  --shadow-burgundy: 0 12px 32px rgba(197, 160, 89, 0.25);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max: 1320px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--store-sand);
  color: var(--store-text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button, a, input, select, textarea, [role="button"], .interactive-btn, .swatch-dot, .catalog-filter-btn, .qty-btn, .radio-card, .btn {
  touch-action: manipulation;
}

button {
  cursor: pointer;
  background: none;
}

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

/* ==============================================================================
   1. ANNOUNCEMENT BAR & NAVIGATION
   ============================================================================== */
.announcement-bar {
  background: linear-gradient(90deg, #0B0C10 0%, #111827 40%, #1E293B 70%, #0B0C10 100%);
  color: var(--store-sand);
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.announcement-bar strong {
  color: var(--store-gold-light);
}

.announcement-bar-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}

.announcement-drop-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28) 0%, rgba(245, 215, 127, 0.16) 100%);
  border: 1px solid rgba(212, 175, 55, 0.75);
  color: #FDF3C7;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.announcement-drop-tag:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(245, 215, 127, 0.28) 100%);
  border-color: #FDE68A;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
}

.announcement-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #FECACA;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}

.announcement-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #EF4444;
  box-shadow: 0 0 6px #EF4444;
  animation: pulse-live-dot 1.8s infinite ease-in-out;
}

@keyframes pulse-live-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.5;
  }
}

.announcement-ig-link {
  color: var(--store-gold-light) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.announcement-ig-link:hover {
  color: #FFFFFF !important;
  opacity: 0.95;
}

.announcement-bundle-link {
  color: #FFFFFF !important;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  transition: all 0.2s ease;
}

.announcement-bundle-link::after {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -8px;
  right: -8px;
}

.announcement-bundle-link:hover {
  background: rgba(212, 175, 55, 0.35);
  border-color: var(--store-gold-light);
  color: #FFFFFF !important;
  text-decoration: none;
  transform: translateY(-1px);
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(10, 11, 14, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(197, 160, 89, 0.38);
  transition: var(--transition-fast);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: clamp(20px, 3vw, 40px);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-right: clamp(28px, 4.5vw, 60px);
}

.brand-logo img {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 2px 6px rgba(197, 160, 89, 0.12));
  transition: transform var(--transition-fast);
}

.brand-logo:hover img {
  transform: scale(1.02);
}

.main-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.brand-logo-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--store-burgundy);
  line-height: 1.1;
}

.brand-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--store-text-muted);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.88vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--store-text-main);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--store-burgundy);
  transition: var(--transition-fast);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--store-burgundy);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-action-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--store-text-main);
  border: 1px solid var(--store-sand-border);
  background: var(--store-porcelain);
  position: relative;
  transition: var(--transition-fast);
}

.nav-action-btn:hover {
  background: var(--store-burgundy);
  color: var(--store-porcelain);
  border-color: var(--store-burgundy);
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--store-porcelain);
}

/* ==============================================================================
   2. HERO SECTION
   ============================================================================== */
.hero-section {
  position: relative;
  padding: 80px 0 100px;
  background: radial-gradient(circle at 75% 35%, rgba(197, 160, 89, 0.08) 0%, transparent 60%), var(--store-sand);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.hero-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(197, 160, 89, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.2);
  margin-bottom: 24px;
}

.hero-badge-icon {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--store-burgundy);
  box-shadow: 0 0 10px var(--store-burgundy);
}

.hero-badge-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--store-burgundy);
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.hero-headline em {
  font-style: normal;
  color: var(--store-burgundy);
  font-weight: 800;
}

.hero-motto {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--store-burgundy);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-motto::after {
  content: '';
  height: 1.5px;
  width: 56px;
  background: linear-gradient(90deg, var(--store-burgundy), transparent);
}

.hero-description {
  font-size: 1.0625rem;
  color: var(--store-text-muted);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--store-burgundy);
  color: var(--store-porcelain);
  padding: 16px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-burgundy);
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background: var(--store-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(197, 160, 89, 0.35);
}

.btn-secondary {
  background: var(--store-porcelain);
  color: var(--store-text-main);
  border: 1px solid var(--store-sand-border);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--store-burgundy);
  color: var(--store-burgundy);
  background: rgba(197, 160, 89, 0.03);
}

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--store-sand-border);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--store-text-main);
}

.trust-item svg {
  color: var(--store-burgundy);
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.hero-diamond-halo {
  position: absolute;
  width: min(460px, 88vw);
  height: min(460px, 88vw);
  border-radius: var(--radius-full);
  background: radial-gradient(circle, #0E1017 0%, #07080C 100%);
  opacity: 0.92;
  z-index: 1;
}

.hero-brand-watermark {
  position: absolute;
  right: -10px;
  bottom: -25px;
  width: min(300px, 60vw);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.hero-video-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 45px rgba(197, 160, 89, 0.22);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  background: #090A0E;
  transition: var(--transition-smooth);
}

.hero-visual:hover .hero-video-card {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.38), 0 0 55px rgba(197, 160, 89, 0.35);
  border-color: rgba(212, 175, 55, 0.7);
}

.hero-ambient-video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 560px;
  object-fit: cover;
  display: block;
}

.hero-video-play-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(18, 18, 20, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #D4AF37;
  text-transform: uppercase;
}

.hero-product-img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-smooth);
}

.hero-visual:hover .hero-product-img {
  transform: rotate(0deg) scale(1.02);
}

.hero-float-card {
  position: absolute;
  bottom: 16px;
  left: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90%;
}

.float-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--store-burgundy);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-card-text h5 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.float-card-text p {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

/* ==============================================================================
   3. BRAND PHILOSOPHY & PILLARS
   ============================================================================== */
.philosophy-section {
  padding: 90px 0;
  background: #FFFFFF;
  border-top: 1px solid var(--store-sand-border);
  border-bottom: 1px solid var(--store-sand-border);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.section-tag {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--store-burgundy);
  margin-bottom: 14px;
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-full);
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.8vw, 2.75rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 16px;
  text-wrap: balance;
}

.section-desc {
  font-size: 1.0625rem;
  color: var(--store-text-muted);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

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

.pillar-card {
  background: var(--store-sand);
  padding: 32px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.pillar-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--store-burgundy);
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--store-burgundy);
  margin-bottom: 16px;
  opacity: 0.6;
}

.pillar-card h4 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 10px;
}

.pillar-card p {
  font-size: 0.875rem;
  color: var(--store-text-muted);
  line-height: 1.6;
}

/* Koi Philosophy Card */
.brand-philosophy-card {
  background: radial-gradient(circle at 80% 50%, rgba(197, 160, 89, 0.06) 0%, #FFFFFF 100%);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}

.koi-artwork-wrap {
  text-align: center;
  position: relative;
}

.koi-artwork-wrap img {
  max-height: 250px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(197, 160, 89, 0.15));
  display: inline-block;
  transition: transform var(--transition-smooth);
}

.brand-philosophy-card:hover .koi-artwork-wrap img {
  transform: translateY(-4px) scale(1.03);
}

/* Cinema Brand Showcase Video Section */
.video-showcase-section {
  background: #101012;
  color: #FFFFFF;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.video-container-wrap {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(197, 160, 89, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.video-container-wrap video {
  width: 100%;
  display: block;
  background: #000;
  border-radius: var(--radius-lg);
}

/* ==============================================================================
   4. CATALOG FILTER & PRODUCT GRID
   ============================================================================== */
.catalog-section {
  padding: 90px 0;
}

.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--store-sand-border);
}

.category-filter-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cat-chip {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--store-porcelain);
  color: var(--store-text-main);
  border: 1px solid var(--store-sand-border);
  transition: var(--transition-fast);
}

.cat-chip:hover {
  border-color: var(--store-burgundy);
  color: var(--store-burgundy);
}

.cat-chip.is-active {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.25);
}

.search-and-sort {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-wrap {
  position: relative;
}

.search-input-wrap input {
  background: var(--store-porcelain);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-full);
  padding: 10px 16px 10px 38px;
  font-size: 0.875rem;
  width: 220px;
  transition: var(--transition-fast);
}

.search-input-wrap input:focus {
  border-color: var(--store-burgundy);
  width: 260px;
}

.search-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--store-text-muted);
}

.sort-select {
  background: var(--store-porcelain);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--store-text-main);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--store-porcelain);
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  position: relative;
  cursor: pointer;
}

.product-card:hover {
  box-shadow: 0 16px 36px rgba(197, 160, 89, 0.14), 0 4px 12px rgba(18, 18, 20, 0.08);
  border-color: rgba(197, 160, 89, 0.38);
}

.product-thumb-wrap {
  position: relative;
  background: #F2ECE4;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}

.product-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.product-card:hover .product-thumb-wrap img {
  transform: scale(1.05) translateZ(0);
}

.product-badge-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  z-index: 3;
  max-width: calc(100% - 20px);
  white-space: normal;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  line-height: 1.3;
}

.product-quickview-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--store-onyx);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
  z-index: 2;
  white-space: nowrap;
  user-select: none;
}

.product-card:hover .product-quickview-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.product-quickview-btn:hover {
  background: #FFFFFF;
  color: var(--store-burgundy);
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.22);
}

.product-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-cat-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--store-burgundy);
  margin-bottom: 6px;
}

.product-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 6px;
  line-height: 1.35;
}

.product-subtitle {
  font-size: 0.75rem;
  color: var(--store-text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.product-swatch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.swatch-vol {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.product-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--store-sand-border);
}

.product-price {
  font-family: var(--font-mono);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.product-add-btn {
  background: var(--store-burgundy);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.product-add-btn:hover {
  background: var(--store-burgundy-dark);
  transform: scale(1.08);
}

.product-coming-soon-btn {
  background: rgba(18, 18, 20, 0.05);
  color: var(--store-burgundy);
  border: 1.5px solid rgba(197, 160, 89, 0.35);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.product-coming-soon-btn:hover {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
  transform: scale(1.08);
}

/* ==============================================================================
   5. SLIDE-OUT CART DRAWER
   ============================================================================== */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 20, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 10000;
}

.modal-overlay,
#profile-modal-overlay,
#auth-modal-overlay,
#acs-tracking-overlay,
#quickview-overlay,
#look-modal-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(18, 18, 20, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 10000;
}

.checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 20, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 10000 !important;
}

.cart-overlay.is-open,
.checkout-overlay.is-open,
.modal-overlay.is-open,
#profile-modal-overlay.is-open,
#auth-modal-overlay.is-open,
#acs-tracking-overlay.is-open,
#quickview-overlay.is-open,
#look-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #FFFFFF;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: var(--transition-smooth);
  z-index: 10005;
  display: flex;
  flex-direction: column;
}

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

.cart-drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--store-sand-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer-title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--store-onyx);
}

.cart-close-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--store-text-muted);
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cart-close-btn:hover {
  background: var(--store-sand);
  color: var(--store-onyx);
}

.free-shipping-tracker {
  padding: 16px 24px;
  background: var(--store-sand);
  border-bottom: 1px solid var(--store-sand-border);
}

.free-shipping-text {
  font-size: 0.8125rem;
  color: var(--store-text-main);
  margin-bottom: 8px;
  text-align: center;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: #E5DDD0;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0;
  background: var(--store-burgundy);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-bar-fill.is-unlocked {
  background: var(--store-emerald);
}

.cart-items-body {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-y: auto;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  padding: 16px 24px;
}

.cart-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--store-text-muted);
}

.cart-empty-state svg {
  margin-bottom: 16px;
  color: var(--store-text-light);
}

.cart-item {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--store-sand-border);
}

.cart-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.cart-item-thumb:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center top;
}

.cart-item-details {
  flex-grow: 1;
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.cart-item-cat-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.cart-item-cat {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--store-burgundy);
  cursor: pointer;
}

.cart-item-exclusive-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}

.cart-item-remove {
  color: var(--store-text-light);
  padding: 2px;
}

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

.cart-item-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx);
  line-height: 1.3;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cart-item-title:hover {
  color: var(--store-burgundy);
}

.cart-item-spec {
  font-size: 0.75rem;
  color: var(--store-text-muted);
  margin-bottom: 8px;
  cursor: pointer;
}

.cart-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-quantity-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  background: var(--store-sand);
}

.cart-quantity-stepper button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--store-text-main);
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cart-quantity-stepper .qty-num {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0 8px;
}

/* ==========================================================================
   Micro-Cross-Sells Carousel / Slider (Cart Drawer)
   ========================================================================== */
.cart-cross-sells-container {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--store-sand-border, #EAE5D9);
}

.cart-cross-sells-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.cart-cross-sells-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cart-cross-sells-title-wrap {
  flex: 1;
  min-width: 0;
}

.cart-cross-sells-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cart-cross-sells-sparkle {
  flex-shrink: 0;
}

.cart-cross-sells-title {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--store-onyx, #1E1E24);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
}

.cross-sell-needed-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #B45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 1px 7px;
  letter-spacing: 0.2px;
}

.cart-cross-sells-sub {
  font-size: 0.72rem;
  color: var(--store-text-muted, #736B5E);
  margin: 2px 0 0;
  line-height: 1.3;
}

.cart-cross-sells-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cross-sell-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--store-sand-border, #EAE5D9);
  background: #FFFFFF;
  color: var(--store-onyx, #1E1E24);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.cross-sell-arrow:hover {
  background: #FAF7F2;
  border-color: #D4AF37;
  color: #0E1017;
}

.cart-cross-sells-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

.cart-cross-sells-track::-webkit-scrollbar {
  height: 4px;
}

.cart-cross-sells-track::-webkit-scrollbar-track {
  background: transparent;
}

.cart-cross-sells-track::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}

.cart-cross-sell-card {
  flex: 0 0 156px;
  max-width: 156px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border, #EAE5D9);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cart-cross-sell-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 6px 16px rgba(197, 160, 89, 0.08);
}

.cart-cross-sell-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(197, 160, 89, 0.92);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.2px;
}

.cart-cross-sell-thumb {
  width: 100%;
  height: 86px;
  border-radius: 6px;
  background: #FAF7F2;
  overflow: hidden;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-cross-sell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.cart-cross-sell-card:hover .cart-cross-sell-thumb img {
  transform: scale(1.05);
}

.cart-cross-sell-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.cart-cross-sell-name {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--store-onyx, #1E1E24);
  line-height: 1.25;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2em;
}

.cart-cross-sell-meta {
  font-size: 0.68rem;
  color: var(--store-text-muted, #736B5E);
  line-height: 1.2;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cross-sell-unit-note {
  color: #059669;
  font-weight: 700;
  font-size: 0.65rem;
}

.cart-cross-sell-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.cart-cross-sell-price {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--store-burgundy, #0E1017);
  letter-spacing: -0.01em;
}

.cart-cross-sell-add-btn {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--store-burgundy, #0E1017);
  background: var(--store-burgundy, #0E1017);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  touch-action: manipulation;
  padding: 0 8px;
}

.cart-cross-sell-add-btn:hover {
  background: #50161D;
  border-color: #50161D;
  transform: translateY(-1px);
}

.cart-cross-sell-add-btn:active {
  transform: scale(0.97);
}

.cart-cross-sell-add-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

@keyframes cartSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cart-spin {
  animation: cartSpin 0.75s linear infinite;
}

.cart-drawer-footer {
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--store-sand-border);
  background: #FFFFFF;
}

/* LUXURY INTERACTIVE COUPON COMPONENT (HIGH-CONVERTING UX/UI) */
.cart-coupon-box,
.checkout-coupon-box {
  margin-bottom: 16px;
  width: 100%;
}

.coupon-field-group {
  display: flex;
  align-items: center;
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid var(--store-sand-border, #E2E8F0);
  border-radius: 8px;
  padding: 4px 6px 4px 10px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.coupon-field-group:focus-within {
  border-color: #D4AF37;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.coupon-field-group.is-active-input {
  border-color: #0E1017;
}

.coupon-field-group.is-success {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}

.coupon-field-group.is-suspended {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.04);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.coupon-field-group.is-suspended .coupon-prefix-icon {
  color: #3B82F6;
}

.coupon-field-group.is-warning {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.04);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.coupon-field-group.is-warning .coupon-prefix-icon {
  color: #D97706;
}

.coupon-field-group.is-error {
  border-color: #DC2626 !important;
  background: rgba(220, 38, 38, 0.04) !important;
  animation: couponShake 0.4s ease-in-out;
}

@keyframes couponShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.coupon-prefix-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--store-text-muted, #94A3B8);
  margin-right: 8px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.coupon-field-group:focus-within .coupon-prefix-icon,
.coupon-field-group.is-active-input .coupon-prefix-icon {
  color: #D4AF37;
}

.coupon-field-group.is-success .coupon-prefix-icon {
  color: #10B981;
}

.coupon-text-input {
  flex: 1 1 0% !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 8px 4px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 0.06em;
  color: var(--store-onyx, #141416) !important;
  text-transform: uppercase;
  min-width: 0 !important;
  box-shadow: none !important;
}

.coupon-text-input:disabled {
  color: #10B981 !important;
  cursor: not-allowed;
  opacity: 0.95;
}

.coupon-text-input::placeholder {
  color: var(--store-text-muted, #94A3B8);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.coupon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  background: var(--store-sand, #F1F5F9);
  color: var(--store-text-muted, #64748B);
  flex-shrink: 0;
}

.coupon-action-btn .coupon-btn-icon {
  transition: transform 0.2s ease;
}

.coupon-action-btn.is-ready {
  background: var(--store-onyx, #141416);
  color: #FFFFFF;
  border-color: var(--store-onyx, #141416);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.coupon-action-btn.is-ready:hover {
  background: #0E1017;
  border-color: #0E1017;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(197, 160, 89, 0.2);
}

.coupon-action-btn.is-ready:hover .coupon-btn-icon {
  transform: translateX(2px);
}

.coupon-action-btn.is-applied {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FCA5A5;
}

.coupon-action-btn.is-applied:hover {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #F87171;
  transform: translateY(-1px);
}

.coupon-feedback-message,
.coupon-feedback {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coupon-feedback-message.success,
.coupon-feedback.success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.coupon-feedback-message.error,
.coupon-feedback.error {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.coupon-feedback-message.info,
.coupon-feedback.info {
  background: rgba(212, 175, 55, 0.1);
  color: #92400E;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.coupon-feedback-message.warning,
.coupon-feedback.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--store-text-muted);
  margin-bottom: 8px;
}

.cart-discount-policy-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #78350F;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-left: 3px solid var(--store-gold);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.cart-discount-policy-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--store-gold);
}

.bundle-exclusive-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #78350F;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 10px;
  line-height: 1.35;
}

.bundle-exclusive-note svg {
  flex-shrink: 0;
  color: var(--store-gold);
}

.qv-exclusive-discount-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #78350F;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-top: 10px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.qv-exclusive-discount-note svg {
  flex-shrink: 0;
  color: var(--store-gold);
}

.cart-summary-row.total-row {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--store-onyx);
  border-top: 1px solid var(--store-sand-border);
  padding-top: 12px;
  margin-top: 12px;
}

.checkout-btn {
  width: 100%;
  background: var(--store-burgundy);
  color: #FFFFFF;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  transition: var(--transition-fast);
}

.checkout-btn:hover:not(:disabled) {
  background: var(--store-burgundy-dark);
}

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

/* ==============================================================================
   6. GREEK CHECKOUT MODAL
   ============================================================================== */
.checkout-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 95%;
  max-width: 1020px;
  height: 88vh;
  max-height: 840px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  z-index: 10005 !important;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  overflow: hidden !important;
}

.checkout-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.checkout-modal-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--store-sand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: #FFFFFF;
}

#store-generic-token-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.checkout-modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-items: start;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.checkout-form-col,
.checkout-summary-col {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.checkout-modal-body::-webkit-scrollbar,
.cart-items-body::-webkit-scrollbar,
.quickview-modal-body::-webkit-scrollbar {
  width: 6px;
}

.checkout-modal-body::-webkit-scrollbar-track,
.cart-items-body::-webkit-scrollbar-track,
.quickview-modal-body::-webkit-scrollbar-track {
  background: var(--store-sand);
  border-radius: 4px;
}

.checkout-modal-body::-webkit-scrollbar-thumb,
.cart-items-body::-webkit-scrollbar-thumb,
.quickview-modal-body::-webkit-scrollbar-thumb {
  background: #D5C8B8;
  border-radius: 4px;
}

.checkout-modal-body::-webkit-scrollbar-thumb:hover,
.cart-items-body::-webkit-scrollbar-thumb:hover,
.quickview-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--store-burgundy);
}

.checkout-sidebar-col {
  position: sticky;
  top: 0;
}

.form-section-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--store-onyx);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-title span {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--store-text-muted);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  background: var(--store-sand);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--store-text-main);
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--store-burgundy);
  background: #FFFFFF;
}

/* Radio Group Boxes */
.radio-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.radio-card {
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--store-sand);
  transition: var(--transition-fast);
}

.radio-card:hover {
  border-color: var(--store-burgundy);
}

.radio-card input[type="radio"] {
  accent-color: var(--store-burgundy);
  margin-right: 12px;
  width: 18px;
  height: 18px;
}

.radio-card-left {
  display: flex;
  align-items: center;
}

.radio-card-info h6 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.radio-card-info p {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.radio-card-price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-burgundy);
}

/* Order Summary Box */
.checkout-order-summary {
  background: var(--store-sand);
  border-radius: var(--radius-md);
  padding: 24px;
  border: 1px solid var(--store-sand-border);
}

.checkout-sum-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-top: 6px;
  padding-right: 6px;
}

.checkout-sum-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: visible !important;
}

.checkout-sum-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.checkout-sum-qty {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--store-onyx);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border: 2px solid #FFFFFF;
  z-index: 10;
}

.checkout-sum-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.checkout-sum-vol {
  font-size: 0.6875rem;
  color: var(--store-text-muted);
}

.checkout-sum-price-wrap {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.checkout-sum-orig-price {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--store-text-muted);
  text-decoration: line-through;
}

.checkout-sum-price {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.checkout-sum-price.has-discount {
  color: var(--store-burgundy);
}

.checkout-sum-savings-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-top: 3px;
}

.cart-item-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-item-orig-price {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--store-text-muted);
  text-decoration: line-through;
}

.cart-item-savings-pill {
  font-size: 0.65rem;
  font-weight: 700;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  margin-top: 2px;
}

.checkout-total-savings-banner,
.cart-total-savings-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.22) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 14px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #065F46;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

.checkout-total-savings-banner strong,
.cart-total-savings-banner strong {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: #047857;
}

.checkout-total-savings-breakdown,
.cart-total-savings-breakdown {
  font-size: 0.72rem;
  font-weight: 500;
  color: #047857;
  opacity: 0.92;
  line-height: 1.3;
}

.checkout-shipping-orig {
  text-decoration: line-through;
  color: var(--store-text-muted, #94A3B8);
  margin-right: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.badge-free {
  background: var(--store-emerald);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Success Modal */
.order-success-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 560px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  z-index: 10005;
  padding: 40px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.order-success-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.1);
  color: var(--store-emerald);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.success-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 12px;
}

.success-order-box {
  background: var(--store-sand);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0;
  text-align: left;
  border: 1px solid var(--store-sand-border);
}

@media (max-width: 640px) {
  .order-success-modal {
    width: 94%;
    max-width: 440px;
    padding: 24px 16px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .success-icon-wrap {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }
  .success-title {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .success-order-box {
    padding: 14px 12px;
    margin: 16px 0;
  }
  .success-order-box > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px;
    margin-bottom: 10px !important;
  }
  .success-order-box > div:last-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px;
    margin-top: 8px;
  }
}

/* ==============================================================================
   STORE LUXURY ADD-TO-CART & TOAST NOTIFICATION (TOP-RIGHT CRO ARCHITECTURE)
   ============================================================================== */
.store-cart-toast,
.store-toast {
  position: fixed;
  top: 84px;
  right: 28px;
  bottom: auto;
  left: auto;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--store-onyx, #141416);
  color: #FFFFFF;
  padding: 16px;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100100 !important;
  opacity: 0;
  transform: translateY(-20px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

.store-cart-toast.is-visible,
.store-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.store-cart-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.store-cart-toast-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--store-emerald, #10B981);
}

.store-cart-toast-badge svg {
  stroke-width: 2.5;
}

.store-cart-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}

.store-cart-toast-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
}

.store-cart-toast-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.store-cart-toast-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #1C1D21;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.store-cart-toast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.store-cart-toast-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  white-space: normal;
  margin: 0 0 3px 0;
  line-height: 1.3;
}

.store-cart-toast-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--store-sand, #F5F2EB);
  opacity: 0.85;
}

.store-cart-toast-price {
  font-weight: 700;
  color: var(--store-gold, #D4AF37);
}

.store-cart-toast-shipping {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(212, 175, 55, 0.08);
  border-left: 2px solid var(--store-gold, #D4AF37);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.store-cart-toast-shipping .shipping-unlocked {
  color: var(--store-emerald, #10B981);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.store-cart-toast-actions {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 8px;
}

.store-cart-toast-btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.store-cart-toast-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.store-cart-toast-btn-primary {
  background: var(--store-gold, #D4AF37);
  color: #141416;
  border: none;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
  white-space: nowrap;
}

.store-cart-toast-btn-primary:hover {
  background: #E5C158;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.store-cart-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.store-cart-toast-progress-bar {
  height: 100%;
  background: var(--store-gold, #D4AF37);
  width: 100%;
  transition: width 4.5s linear;
}

/* Generic Fallback Toast Layout */
.store-toast-simple-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.store-toast-text {
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 600;
  color: #FFFFFF;
}

.store-toast-btn {
  background: var(--store-gold, #D4AF37);
  color: #141416;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast, all 0.2s);
}

.store-toast-btn:hover {
  background: #E5C158;
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .store-cart-toast,
  .store-toast {
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    padding: 14px;
  }
}

/* Footer */
.main-footer {
  background: var(--store-onyx);
  color: var(--store-sand);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--store-text-light);
  line-height: 1.6;
  max-width: 320px;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  background: var(--store-gold);
  border-color: var(--store-gold);
  color: #141416;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.footer-social-btn svg {
  width: 20px;
  height: 20px;
}

.footer-col h5 {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--store-text-light);
}

.footer-links a:hover {
  color: var(--store-gold-light);
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--store-text-light);
}

/* ==============================================================================
   AFM AUTOCOMPLETE & B2B VALIDATION STYLES
   ============================================================================== */
.b2b-invoice-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
  background: var(--store-sand);
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
}

/* B2B Partner Checkout Registration Banner */
.b2b-pro-guest-banner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.09) 0%, rgba(197, 160, 89, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-left: 3.5px solid #D4AF37;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.b2b-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #854D0E;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.38);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.b2b-banner-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0E1017;
  margin: 4px 0 4px 0;
  font-family: var(--font-sans);
}

.b2b-banner-desc {
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.45;
  margin: 0;
}

.b2b-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btn-b2b-register-now {
  background: linear-gradient(135deg, #0E1017 0%, #07080C 100%);
  color: #FFFFFF !important;
  border: 1px solid #0E1017;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(197, 160, 89, 0.25);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-b2b-register-now:hover {
  background: linear-gradient(135deg, #7E242F 0%, #5C1720 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(197, 160, 89, 0.35);
}

.btn-b2b-login-link {
  background: transparent;
  color: #0E1017;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.btn-b2b-login-link:hover {
  color: #9E2A2B;
}

.b2b-pro-active-badge {
  background: rgba(16, 185, 129, 0.09);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-left: 3.5px solid #10B981;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
}

.b2b-active-badge-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: #065F46;
  font-weight: 600;
}

.b2b-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  display: inline-block;
  flex-shrink: 0;
}

.afm-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.afm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.afm-status-badge.loading {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.afm-status-badge.success {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.afm-status-badge.error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

.afm-status-badge.info {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

.afm-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #93C5FD;
  border-top-color: #1D4ED8;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

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

.field-autofilled {
  animation: afmHighlight 1.5s ease-out;
  border-color: #10B981 !important;
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: var(--store-text-main, #0F172A) !important;
  -webkit-text-fill-color: var(--store-text-main, #0F172A) !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4), 0 0 12px rgba(16, 185, 129, 0.15) !important;
}

@keyframes afmHighlight {
  0% { transform: scale(1); background-color: rgba(16, 185, 129, 0.28); border-color: #10B981; }
  50% { transform: scale(1.01); background-color: rgba(16, 185, 129, 0.22); border-color: #10B981; }
  100% { transform: scale(1); background-color: rgba(16, 185, 129, 0.08); border-color: #10B981; }
}

/* ==============================================================================
   UNIVERSAL BACKGROUND SCROLL LOCK & OVERSCROLL PREVENTION
   ============================================================================== */
html.modal-scroll-locked,
body.modal-scroll-locked,
html.quickview-locked,
body.quickview-locked,
html.modal-open,
body.modal-open,
html.cart-drawer-locked,
body.cart-drawer-locked,
html.checkout-modal-locked,
body.checkout-modal-locked {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* Modal Backdrops & Overlays - Never allow background scroll */
.modal-overlay,
.cart-overlay,
.checkout-overlay,
#review-modal-overlay,
#auth-modal-overlay,
#quickview-overlay,
#look-overlay,
#look-modal-overlay,
#profile-modal-overlay,
#acs-tracking-overlay,
#legal-modal-overlay,
#review-lightbox-overlay {
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Modal Cards, Drawers & Scrollable Containers - Contain internal scroll */
.auth-modal,
.cart-drawer,
.quickview-modal,
.legal-modal-content,
[role="dialog"],
[aria-modal="true"] {
  overscroll-behavior: contain !important;
}

.auth-modal-body,
.cart-items-body,
.cart-drawer-items,
.cart-items-scrollable-body,
.quickview-body,
.legal-modal-body,
.checkout-modal-body,
#review-form-container {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

/* ==============================================================================
   7. ULTRA-RESPONSIVE MOBILE & MULTI-DEVICE ARCHITECTURE
   ============================================================================== */

/* Viewport & Container Baseline Protection */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden !important;
  position: relative;
}

/* Tablet & Smaller Desktops (<= 1024px) */
@media (max-width: 1024px) {
  .hero-section {
    padding: 60px 0 80px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-trust-row {
    justify-content: center;
  }

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

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

  .checkout-modal-body {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

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

/* Tablets & Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .nav-links {
    display: none;
  }

  .nav-wrapper {
    height: 64px;
  }

  .brand-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 2px 6px rgba(197, 160, 89, 0.16));
  }

  .announcement-bar {
    font-size: 0.75rem;
    padding: 6px 12px;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  .announcement-sep {
    display: none;
  }

  .announcement-bar-content {
    gap: 8px;
  }

  .announcement-bundle-link {
    padding: 5px 14px;
    font-size: 0.75rem;
  }

  .hero-section {
    padding: 16px 0 24px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* Video from Screenshot 1 First on Mobile (High Engagement & Spectacle) */
  .hero-visual {
    order: 1 !important;
    display: flex !important;
    width: 100%;
    max-width: 356px;
    margin: 0 auto;
    position: relative;
    justify-content: center;
    align-items: center;
  }

  .hero-diamond-halo {
    width: 310px;
    height: 310px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero-brand-watermark {
    display: none;
  }

  .hero-video-card {
    width: 100%;
    max-width: 348px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 35px rgba(197, 160, 89, 0.3);
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    aspect-ratio: 9 / 15;
    overflow: hidden;
  }

  .hero-box-card {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    max-width: 348px;
  }

  .hero-ambient-video {
    width: 100%;
    height: 100%;
    max-height: 560px;
    aspect-ratio: 9 / 15;
    object-fit: cover;
    display: block;
  }

  .hero-float-card {
    display: none;
  }

  .hero-content {
    order: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4px;
    margin: 0;
    text-align: center;
  }

  .hero-badge-wrap {
    margin: 0 auto 10px;
    padding: 4px 12px;
    justify-content: center;
  }

  .hero-badge-text {
    font-size: 0.65rem;
  }

  .hero-headline {
    font-size: clamp(1.45rem, 5.2vw, 1.85rem);
    line-height: 1.25;
    margin-bottom: 6px;
    text-align: center;
    text-wrap: balance;
  }

  .hero-motto {
    font-size: 0.72rem;
    margin-bottom: 12px;
    justify-content: center;
    text-align: center;
  }

  .hero-motto::after {
    display: none;
  }

  /* Hide heavy wordy paragraphs on mobile so user does not see blocks of text */
  .hero-description {
    display: none;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 14px;
    gap: 10px;
  }

  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 0.875rem;
  }

  .hero-trust-row {
    padding-top: 14px;
    gap: 8px 14px;
    font-size: 0.72rem;
    justify-content: center;
  }

  .catalog-section {
    padding: 24px 0 60px;
  }

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

  .product-content {
    padding: 14px;
  }

  .product-title {
    font-size: 0.875rem;
  }

  .product-subtitle {
    font-size: 0.7rem;
    margin-bottom: 8px;
  }

  .product-price {
    font-size: 1.0625rem;
  }

  .product-add-btn,
  .product-coming-soon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .product-quickview-btn {
    display: none !important;
  }

  .catalog-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .category-filter-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
  }

  .category-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .cat-chip {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.75rem;
  }

  .search-and-sort {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .search-input-wrap,
  .search-input-wrap input {
    width: 100% !important;
  }

  .sort-select {
    width: 100%;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-desc {
    font-size: 0.9375rem;
  }

  .brand-philosophy-card {
    grid-template-columns: 1fr;
    padding: 26px 20px;
    gap: 20px;
    text-align: center;
  }

  .koi-artwork-wrap img {
    max-height: 180px;
  }

  .video-showcase-section {
  background: #101012;
  color: #FFFFFF;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

  /* Full Screen Mobile Checkout Modal */
  .checkout-modal {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .checkout-modal.is-open {
    transform: none !important;
  }

  .checkout-modal-header {
    padding: 14px 16px !important;
    padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
  }

  .checkout-modal-body {
    padding: 16px 14px calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .checkout-form-col,
  .checkout-summary-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .checkout-order-summary {
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .checkout-coupon-box,
  .coupon-field-group {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .coupon-action-btn {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* Small Smartphone Screens (<= 480px) */
@media (max-width: 480px) {
  .hero-section {
    padding: 16px 0 24px;
  }

  .hero-headline {
    font-size: clamp(1.4rem, 5vw, 1.85rem);
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 14px 20px;
    font-size: 0.875rem;
  }

  .hero-trust-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

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

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

  .cart-drawer {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .cart-drawer-header {
    padding: 14px 18px !important;
    flex-shrink: 0;
  }

  .cart-drawer-title {
    font-size: 1rem !important;
  }

  .free-shipping-tracker {
    padding: 8px 16px 10px !important;
    flex-shrink: 0;
  }

  .free-shipping-text {
    font-size: 0.78rem !important;
    margin-bottom: 5px !important;
  }

  .cart-b2b-promo-banner {
    flex-shrink: 0;
  }

  .cart-b2b-promo-banner > div {
    margin: 6px 14px 0 !important;
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
  }

  .cart-items-body {
    flex: 1 1 auto !important;
    min-height: 150px !important;
    padding: 10px 14px !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .cart-item {
    gap: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }

  .cart-item-thumb {
    width: 58px !important;
    height: 58px !important;
  }

  .cart-item-title {
    font-size: 0.85rem !important;
  }

  .cart-item-meta {
    font-size: 0.75rem !important;
  }

  .cart-drawer-footer {
    flex-shrink: 0;
    padding: 10px 14px max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
    background: #FFFFFF !important;
  }

  .cart-coupon-box {
    margin-bottom: 8px !important;
  }

  .coupon-field-group {
    padding: 3px 5px 3px 7px !important;
  }

  .coupon-prefix-icon {
    margin-right: 5px !important;
  }

  .coupon-text-input {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
    padding: 4px 2px !important;
    height: 34px !important;
  }

  .coupon-action-btn {
    padding: 5px 9px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
    height: 34px !important;
  }

  .cart-summary-row {
    margin-bottom: 4px !important;
    font-size: 0.82rem !important;
  }

  .cart-summary-row.total-row {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-top: 6px !important;
    font-size: 0.95rem !important;
  }

  .cart-total-savings-banner {
    margin: 6px 0 !important;
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
  }

  .checkout-btn {
    min-height: 48px !important;
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
    margin-top: 8px !important;
  }

  .afm-field-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .afm-status-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
}

/* ==============================================================================
   FULL PRODUCT VIEW MODAL ARCHITECTURE
   ============================================================================== */
.quickview-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 94%;
  max-width: 940px;
  height: 90vh;
  max-height: 860px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  overflow: hidden;
  overscroll-behavior: contain !important;
}

.quickview-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.quickview-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--store-sand-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: #FFFFFF;
}

.quickview-body {
  padding: 24px 28px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .quickview-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  .quickview-header {
    padding: 14px 16px;
  }
  .quickview-body {
    padding: 16px 14px 40px;
  }
}

.qv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .qv-grid {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
}

.qv-grid > * {
  min-width: 0;
  max-width: 100%;
}

.qv-media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.qv-main-image {
  background: #FAF7F2;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  overflow: hidden;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 12px;
  position: relative;
}

@media (min-width: 768px) {
  .qv-main-image {
    height: 380px;
    max-width: 360px;
    margin: 0 0 14px 0;
  }
}

.qv-main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  display: block;
}

.qv-thumbs-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .qv-thumbs-row {
    justify-content: flex-start;
  }
}

.qv-thumb-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
  background: #FFFFFF;
  overflow: hidden;
  padding: 2px;
  cursor: pointer;
  transition: var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.qv-thumb-btn * {
  pointer-events: none;
}

.qv-thumb-btn.is-active {
  border: 2px solid var(--store-burgundy);
}

.qv-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qv-info {
  width: 100%;
  min-width: 0;
}

.qv-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  width: 100%;
}

.qv-category-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--store-burgundy);
  text-transform: uppercase;
  flex-shrink: 0;
}

.qv-rating {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #D97706;
  white-space: normal;
  text-align: right;
  line-height: 1.2;
}

.qv-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 4px;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .qv-title {
    font-size: 1.85rem;
  }
}

.qv-subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--store-text-muted);
  margin-bottom: 14px;
}

.qv-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.qv-price {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.qv-vat {
  font-size: 0.8125rem;
  color: var(--store-text-muted);
}

.qv-specs-box {
  background: var(--store-sand);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--store-sand-border);
  font-size: 0.8125rem;
  line-height: 1.5;
  word-break: break-word;
}

.qv-tabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--store-sand-border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.qv-tabs-nav::-webkit-scrollbar {
  display: none;
}

.qv-tab-btn {
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}

.qv-tab-btn.is-active {
  color: var(--store-burgundy);
  border-bottom: 2px solid var(--store-burgundy);
}

.qv-tab-pane {
  font-size: 0.875rem;
  color: var(--store-text-main);
  line-height: 1.65;
  margin-bottom: 20px;
  word-break: break-word;
}

.qv-tab-pane ul, .qv-tab-pane ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qv-footer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0 22px 0;
  padding: 0;
  border: none;
  flex-wrap: wrap;
}

.qv-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  flex-shrink: 0;
}

.qv-add-btn {
  flex-grow: 1;
  background: var(--store-burgundy);
  color: #FFFFFF;
  height: 48px;
  min-width: 180px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.qv-add-btn:hover {
  background: var(--store-burgundy-dark);
  box-shadow: var(--shadow-burgundy);
}

/* ==============================================================================
   CUSTOMER AUTHENTICATION, VIP PORTAL & 1-CLICK REORDER ENGINE CSS
   ============================================================================== */

/* 1. Header Account Button */
.nav-action-btn.account-nav-btn {
  width: auto !important;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(18, 18, 20, 0.04);
  border: 1px solid var(--store-sand-border);
  color: var(--store-onyx);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: var(--transition-fast);
  position: relative;
}

.nav-action-btn.account-nav-btn:hover {
  background: rgba(197, 160, 89, 0.08);
  border-color: var(--store-burgundy-glow);
  color: var(--store-burgundy);
}

.account-btn-label {
  display: inline-block;
  max-width: 110px;
  white-space: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.account-badge {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.account-badge.pro {
  background: var(--store-burgundy);
  color: #FFFFFF;
}

.account-badge.vip {
  background: var(--store-gold);
  color: var(--store-onyx);
}

@media (max-width: 640px) {
  .nav-action-btn.account-nav-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    min-width: 44px;
    border-radius: 50% !important;
    justify-content: center;
  }

  .nav-action-btn.account-nav-btn .account-btn-label {
    display: none !important;
  }

  .nav-action-btn.account-nav-btn .account-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 0.5625rem;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

/* 2. Auth Modal */
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: 95%;
  max-width: 480px;
  background: var(--store-sand-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 10005;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.auth-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.auth-modal-header {
  padding: 20px 24px;
  background: var(--store-onyx);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-emblem {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 2px;
}

.auth-header-brand h4 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.auth-header-brand p {
  font-size: 0.75rem;
  color: var(--store-text-light);
}



.auth-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--store-sand-border);
  background: var(--store-sand);
}

.auth-tab-btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-text-muted);
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
  text-align: center;
}

.auth-tab-btn.is-active {
  color: var(--store-burgundy);
  background: #FFFFFF;
  border-bottom-color: var(--store-burgundy);
}

.auth-modal-body {
  padding: 24px;
  overflow-y: auto;
}

.auth-form .form-group {
  margin-bottom: 16px;
}

.auth-form .form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--store-onyx);
  margin-bottom: 6px;
}

.auth-form .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--store-text-main);
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.auth-form .form-control:focus {
  border-color: var(--store-burgundy);
  box-shadow: 0 0 0 3px var(--store-burgundy-glow);
}

.auth-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  padding: 12px 20px;
}

.role-selector-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.role-card {
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFFFFF;
  transition: var(--transition-fast);
}

.role-card input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--store-burgundy);
}

.role-card-content strong {
  display: block;
  font-size: 0.8125rem;
  color: var(--store-onyx);
}

.role-card-content small {
  display: block;
  font-size: 0.6875rem;
  color: var(--store-text-muted);
  line-height: 1.3;
}

/* Google Auth & Social Divider */
.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  background: #FFFFFF;
  color: #3C4043;
  border: 1px solid #DADCE0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.btn-google-auth:hover {
  background: #F8F9FA;
  border-color: #C6C8CC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: #202124;
}

.btn-google-auth:active {
  background: #F1F3F4;
}

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

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--store-sand-border);
}

.auth-divider span {
  padding: 0 12px;
  font-size: 0.75rem;
  color: var(--store-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Auth Alerts (Error / Notice) */
.auth-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 0.8125rem;
  line-height: 1.45;
  animation: fadeIn 0.2s ease-out;
}

.auth-alert-box.error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
}

.auth-alert-box.warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.auth-alert-box.success {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  color: #166534;
}

.auth-alert-box .alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-alert-box .alert-content {
  flex: 1;
}

.auth-alert-box .alert-content strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.auth-alert-box .alert-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--store-burgundy);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
}

.auth-alert-box .alert-link:hover {
  color: #111827;
}

/* Input Error State */
.auth-form .form-control.is-invalid {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}

/* Google Sign-in Interactive Modal */
.google-auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  width: 90%;
  max-width: 420px;
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border: 1px solid #E8EAED;
}

.google-auth-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.google-auth-header {
  padding: 20px 24px 16px;
  text-align: center;
  border-bottom: 1px solid #F1F3F4;
}

.google-auth-header img {
  height: 28px;
  margin-bottom: 8px;
}

.google-auth-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
  margin: 0 0 4px;
}

.google-auth-header p {
  font-size: 0.8125rem;
  color: #5F6368;
  margin: 0;
}

.google-auth-body {
  padding: 16px 24px;
}

.google-account-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.google-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E8EAED;
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
  text-align: left;
}

.google-account-item:hover {
  background: #F8F9FA;
  border-color: #DADCE0;
}

.google-account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1A73E8;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.google-account-details {
  flex: 1;
  min-width: 0;
}

.google-account-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #202124;
  white-space: normal;
}

.google-account-email {
  font-size: 0.75rem;
  color: #5F6368;
  white-space: normal;
}

.google-custom-input-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F3F4;
}

.google-auth-footer {
  padding: 12px 24px 16px;
  background: #F8F9FA;
  border-top: 1px solid #F1F3F4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.google-auth-footer .btn-cancel {
  background: none;
  border: none;
  color: #5F6368;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.google-auth-footer .btn-cancel:hover {
  color: #202124;
}

/* 3. Customer Profile & VIP Portal Modal */
.customer-profile-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: 95%;
  max-width: 980px;
  height: 85vh;
  max-height: 720px;
  background: var(--store-sand-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 10005;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
}

.customer-profile-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Profile Sidebar */
.profile-sidebar {
  background: var(--store-onyx);
  color: #FFFFFF;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.profile-user-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.4);
  flex-shrink: 0;
}

.profile-user-info {
  flex: 1;
  min-width: 0;
}

.profile-user-info h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
  line-height: 1.2;
}

.profile-company-name {
  display: block;
  font-size: 0.75rem;
  color: var(--store-text-light);
  margin-bottom: 4px;
}

.profile-tier-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-tier-badge.pro {
  background: var(--store-emerald);
  color: #FFFFFF;
}

.profile-tier-badge.vip {
  background: var(--store-gold);
  color: var(--store-onyx);
}

.profile-mobile-close-btn {
  display: none;
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--store-text-light);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: var(--transition-fast);
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}

.profile-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.profile-nav-item.is-active {
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-weight: 700;
}

.profile-sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #F87171;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: var(--transition-fast);
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.profile-logout-btn:hover {
  color: #EF4444;
}

/* Responsive Mobile Layout for Customer Profile */
@media (max-width: 768px) {
  .customer-profile-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 10005 !important;
    background: #090C14 !important;
  }

  .customer-profile-modal.is-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .profile-sidebar {
    background: #0D111A !important;
    padding: 14px 16px 10px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .profile-user-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    gap: 10px !important;
  }

  .profile-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }

  .profile-user-info h4 {
    font-size: 0.875rem !important;
    margin-bottom: 2px !important;
  }

  .profile-company-name {
    font-size: 0.6875rem !important;
  }

  .profile-mobile-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .profile-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 2px 0 4px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .profile-nav::-webkit-scrollbar {
    display: none !important;
  }

  .profile-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .profile-nav-item svg {
    width: 14px !important;
    height: 14px !important;
  }

  .profile-nav-item.is-active {
    background: var(--store-burgundy) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
  }

  .profile-sidebar-footer {
    display: none !important;
  }

  .profile-main-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px 40px !important;
    background: var(--store-sand) !important;
  }

  .profile-header-actions {
    display: none !important;
  }

  .vip-member-card {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
  }

  .vip-card-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .vip-stat-box {
    padding: 8px 4px !important;
    text-align: center !important;
  }

  .vip-stat-box .stat-num {
    font-size: 1rem !important;
  }

  .vip-stat-box .stat-label {
    font-size: 0.65rem !important;
  }

  .restock-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .restock-header .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }

  .restock-items-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.profile-logout-btn:hover {
  color: #EF4444;
}

/* Profile Main Content */
.profile-main-content {
  padding: 28px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--store-sand);
}

.profile-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.profile-section-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--store-onyx);
  letter-spacing: -0.02em;
}

.profile-tab-section {
  display: none;
}

.profile-tab-section.is-active {
  display: block;
  animation: fadeIn 0.25s ease-out;
}

/* VIP Card */
.vip-member-card {
  position: relative;
  background: linear-gradient(135deg, #1A1A1E 0%, #281014 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vip-badge-ribbon {
  display: inline-block;
  background: rgba(197, 168, 128, 0.2);
  color: var(--store-gold-light);
  border: 1px solid var(--store-gold);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.vip-card-content h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.vip-card-content p {
  font-size: 0.8125rem;
  color: var(--store-text-light);
  max-width: 440px;
  line-height: 1.5;
}

.vip-card-stats {
  display: flex;
  gap: 16px;
}

.vip-stat-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.vip-stat-box .stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--store-text-light);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.vip-stat-box .stat-num {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF;
}

/* 1-Click VIP Restock Widget */
.restock-widget-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.restock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.restock-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--store-burgundy);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.restock-header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 2px;
}

.restock-header p {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.restock-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.restock-item-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--store-sand);
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
}

.restock-item-card img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--store-sand-border);
  background: #FFFFFF;
  flex-shrink: 0;
}

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

.restock-item-info h6 {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-onyx);
  white-space: normal;
  line-height: 1.25;
  margin: 0 0 2px;
}

.restock-item-info span {
  font-size: 0.72rem;
  color: var(--store-text-muted);
  display: block;
}

.btn-outline-xs {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-burgundy);
  color: var(--store-burgundy);
  background: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

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

/* Recent Order Card in Overview */
.recent-order-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.recent-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--store-sand-border);
}

.order-badge-id {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--store-burgundy);
  margin-right: 8px;
}

.order-date-text {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.order-status-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.order-status-pill.delivered {
  background: rgba(16, 185, 129, 0.12);
  color: var(--store-emerald);
}

.order-status-pill.in_transit, .order-status-pill.in-transit {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

.order-status-pill.processing {
  background: rgba(217, 119, 6, 0.12);
  color: #D97706;
}

.order-status-pill.cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
}

.order-status-pill.refunded {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
}

.recent-order-items-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.order-mini-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
  overflow: hidden;
}

.order-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-qty {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--store-onyx);
  color: #FFFFFF;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 4px;
  border-top-left-radius: 4px;
}

.mini-more-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--store-text-muted);
  padding: 4px 8px;
  background: var(--store-sand);
  border-radius: var(--radius-sm);
}

.recent-order-pricing {
  margin-left: auto;
  text-align: right;
}

.pricing-label {
  font-size: 0.75rem;
  color: var(--store-text-muted);
  display: block;
}

.pricing-val {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.recent-order-actions {
  display: flex;
  gap: 10px;
}

.btn-reorder-primary {
  flex: 2;
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-reorder-primary:hover {
  background: var(--store-burgundy-dark);
  box-shadow: var(--shadow-burgundy);
}

.btn-track-secondary {
  flex: 1;
  background: #FFFFFF;
  color: var(--store-onyx);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-track-secondary:hover {
  background: var(--store-sand);
}

/* Orders History Full List */
.order-history-card {
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--store-sand-border);
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.order-code {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--store-burgundy);
  margin-right: 8px;
}

.order-doc-type {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--store-sand);
  border-radius: 4px;
  color: var(--store-text-muted);
}

.order-date-voucher {
  font-size: 0.75rem;
  color: var(--store-text-muted);
  margin-top: 4px;
}

.order-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.order-total-price {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--store-onyx);
}

.order-card-items-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.order-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--store-sand-border);
}

.order-item-row:last-child {
  border-bottom: none;
}

.order-item-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--store-sand-border);
}

.order-item-meta {
  flex-grow: 1;
}

.order-item-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--store-onyx);
}

.order-item-sub {
  font-size: 0.6875rem;
  color: var(--store-text-muted);
}

.order-item-price {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-onyx);
}

.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--store-sand-border);
  flex-wrap: wrap;
  gap: 10px;
}

.order-pay-info {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.order-action-btns {
  display: flex;
  gap: 8px;
}

.btn-primary-sm {
  background: var(--store-burgundy);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-primary-sm:hover {
  background: var(--store-burgundy-dark);
}

.btn-outline-sm {
  background: #FFFFFF;
  color: var(--store-onyx);
  border: 1px solid var(--store-sand-border);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-outline-sm:hover {
  background: var(--store-sand);
}

/* Empty Orders State */
.empty-orders-box {
  text-align: center;
  padding: 40px 20px;
  background: #FFFFFF;
  border: 1px dashed var(--store-sand-border, #CBD5E1);
  border-radius: var(--radius-md, 12px);
  color: var(--store-text-muted, #64748B);
  margin-bottom: 20px;
}

.empty-orders-box svg {
  margin-bottom: 12px;
  stroke: var(--store-text-muted, #94A3B8);
}

.empty-orders-box p {
  font-size: 0.875rem;
  margin-bottom: 16px;
  color: var(--store-text-muted, #64748B);
}

/* Profile Upsell & Cross-Sell Showcase (Safeguard 17.37 & 17.38) */
.profile-upsell-wrapper {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--store-sand-border, #E2E8F0);
  width: 100%;
}

.profile-upsell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-upsell-badge {
  display: inline-block;
  background: rgba(197, 160, 89, 0.08);
  color: var(--store-burgundy, #0E1017);
  border: 1px solid rgba(197, 160, 89, 0.2);
  font-weight: 700;
  font-size: 0.725rem;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.profile-upsell-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--store-onyx, #121214);
  margin: 0 0 4px 0;
}

.profile-upsell-sub {
  font-size: 0.8125rem;
  color: var(--store-text-muted, #64748B);
  margin: 0;
}

.profile-upsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.profile-upsell-card {
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border, #E2E8F0);
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-upsell-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.profile-upsell-card-top {
  display: flex;
  flex-direction: column;
}

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

.profile-upsell-card-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #FAF7F2;
  border: 1px solid rgba(0, 0, 0, 0.05);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-bottom: 12px;
}

.profile-upsell-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.profile-upsell-card:hover .profile-upsell-card-img {
  transform: scale(1.04);
}

.profile-upsell-card-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx, #121214);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.profile-upsell-card-desc {
  font-size: 0.75rem;
  color: var(--store-text-muted, #64748B);
  line-height: 1.35;
  margin: 0 0 12px 0;
}

.profile-upsell-card-bottom {
  margin-top: auto;
}

.profile-upsell-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.profile-upsell-card-price strong {
  font-family: var(--font-mono, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--store-burgundy, #0E1017);
}

.profile-upsell-card-price span {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: var(--store-text-muted, #94A3B8);
  text-decoration: line-through;
}

.profile-upsell-card-btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

/* Wishlist Grid */
.profile-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.wishlist-product-card {
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wishlist-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.wishlist-meta h5 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 4px;
}

.wishlist-cat {
  font-size: 0.6875rem;
  color: var(--store-text-muted);
  display: block;
  margin-bottom: 8px;
}

.wishlist-price {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--store-burgundy);
  margin-bottom: 12px;
}

.wishlist-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.wishlist-actions .btn-primary-sm {
  flex-grow: 1;
}

/* Product Wishlist Toggle Icon on Catalog Cards - Positioned bottom-right to eliminate badge overlap */
.product-thumb-wrap .product-wishlist-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--store-text-muted);
  border: 1px solid var(--store-sand-border);
  cursor: pointer;
  z-index: 4;
  transition: var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-thumb-wrap .product-wishlist-toggle:hover {
  color: #E11D48;
  transform: scale(1.1);
}

.product-thumb-wrap .product-wishlist-toggle.is-active {
  color: #E11D48;
  fill: #E11D48;
}

.wishlist-actions .product-wishlist-toggle {
  position: static !important;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

.qv-wishlist-btn {
  position: static !important;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  border: 1px solid var(--store-sand-border);
  flex-shrink: 0;
}

/* 4. Live ACS Tracking Modal */
.acs-tracking-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: 95%;
  max-width: 520px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 10005;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  overflow: hidden;
}

.acs-tracking-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.acs-modal-header {
  padding: 20px 24px;
  background: var(--store-onyx);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acs-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acs-logo-pill {
  background: #E11D48;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 0.6875rem;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.acs-header-title h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.acs-voucher-sub {
  font-size: 0.75rem;
  color: var(--store-text-light);
}

.acs-modal-body {
  padding: 24px;
}

.acs-status-banner {
  background: var(--store-sand);
  border: 1px solid var(--store-sand-border);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.acs-status-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.acs-status-pill.delivered {
  background: rgba(16, 185, 129, 0.15);
  color: var(--store-emerald);
}

.acs-status-pill.in-transit {
  background: rgba(59, 130, 246, 0.15);
  color: #2563EB;
}

.acs-eta-text {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.acs-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-left: 20px;
  margin-bottom: 24px;
}

.acs-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--store-sand-border);
}

.acs-step {
  position: relative;
}

.step-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--store-sand-border);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px var(--store-sand-border);
}

.acs-step.is-complete .step-dot {
  background: var(--store-emerald);
  box-shadow: 0 0 0 2px var(--store-emerald);
}

.acs-step.is-current .step-dot {
  background: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
  animation: pulseDot 1.5s infinite;
}

.step-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 2px;
}

.step-time {
  font-size: 0.6875rem;
  color: var(--store-text-muted);
}

@keyframes pulseDot {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 5. Global Toast Banner (Safeguard 17.38: Top-Center, Obsidian Glassmorphism, Z-Index 100100) */
.store-toast-banner {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: rgba(18, 18, 20, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(212, 175, 55, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 100100 !important;
  opacity: 0;
  max-width: 90vw;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}

.store-toast-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--store-emerald, #10B981);
  box-shadow: 0 0 8px var(--store-emerald, #10B981);
  flex-shrink: 0;
}

/* ==============================================================================
   EDITORIAL LOOKBOOK & QUICK VIEW MULTI-MEDIA STYLES
   ============================================================================== */
.qv-thumb-video-btn {
  position: relative;
  overflow: hidden;
}

.qv-video-thumb-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18, 18, 20, 0.7);
  color: #D4AF37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  gap: 2px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background var(--transition-fast);
}

.qv-thumb-video-btn:hover .qv-video-thumb-badge,
.qv-thumb-video-btn.is-active .qv-video-thumb-badge {
  background: rgba(197, 160, 89, 0.85);
  color: #FFFFFF;
}

.hero-model-img {
  width: 100%;
  max-width: 440px;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
}

/* Editorial Lookbook */
.editorial-lookbook-section {
  background: #141416;
  color: #FFFFFF;
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.lookbook-card {
  background: #1E1E24;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  cursor: pointer;
  position: relative;
}

.lookbook-card:hover {
  border-color: #D4AF37;
  box-shadow: 0 22px 52px rgba(197, 160, 89, 0.42), 0 0 24px rgba(212, 175, 55, 0.22);
}

.lookbook-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0B0C0E;
  pointer-events: auto;
}

.lookbook-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none !important; /* Prevents video element from hijacking mobile taps! */
}

.lookbook-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 12, 0.92) 100%);
  color: #FFFFFF;
  z-index: 10;
  pointer-events: auto;
}

.lookbook-badge {
  display: inline-block;
  background: #D4AF37;
  color: #141416;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.lookbook-overlay h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: #FFFFFF;
  margin-bottom: 4px;
  font-weight: 700;
}

.lookbook-overlay p {
  font-size: 0.8125rem;
  color: #C8C2B8;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 768px) {
  .lookbook-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .editorial-lookbook-section {
    padding: 50px 0;
  }
}

/* Hero Ambient Video Card */
.hero-video-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  height: 480px;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #0D0D11;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.hero-visual:hover .hero-video-card {
  transform: scale(1.015);
  border-color: #D4AF37;
  box-shadow: 0 28px 70px rgba(197, 160, 89, 0.35), 0 0 30px rgba(212, 175, 55, 0.2);
}

.hero-ambient-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-play-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(20, 20, 22, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #D4AF37;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Hero store-generic-token Box Card (Active Promotion Override) */
.hero-box-card {
  display: block;
  text-decoration: none;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  cursor: pointer;
  background: #110809;
}

.hero-box-card:hover {
  text-decoration: none;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 32px 75px rgba(0, 0, 0, 0.38), 0 0 55px rgba(197, 160, 89, 0.35);
  border-color: rgba(212, 175, 55, 0.85);
}

.hero-box-card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-box-badge {
  top: 14px;
  right: 14px;
  left: auto;
  background: rgba(18, 18, 20, 0.90);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #D4AF37;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.hero-box-badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: heroBoxPulse 2s infinite ease-in-out;
}

@keyframes heroBoxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hero-box-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Guard: Suppress float card collision while hero box promo is active */
.hero-box-card ~ .hero-float-card {
  display: none !important;
}

/* Smooth anchor landing without sticky header clipping */
.bundles-section,
.bundle-card {
  scroll-margin-top: 90px;
}

/* Lookbook Direct Action Button */
.lookbook-action-btn {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: #D4AF37;
  border: 1px solid #D4AF37;
  color: #141416 !important;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
  transition: var(--transition-fast);
}

.lookbook-action-btn:hover,
.lookbook-action-btn:active {
  background: #E5C158;
  color: #141416 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55);
}

/* Dedicated Footer Contact Iconography */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--store-text-light);
  line-height: 1.4;
}

.footer-contact-icon {
  width: 16px;
  height: 16px;
  color: #D4AF37;
  flex-shrink: 0;
}

/* ==============================================================================
   SHOP THE LOOK DEDICATED MODAL STYLING
   ============================================================================== */
.look-modal {
  max-width: 860px !important;
}

.look-header-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  background: var(--store-sand);
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

@media (max-width: 640px) {
  .look-header-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.look-header-media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #141416;
}

.look-header-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-header-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #D4AF37;
  color: #141416;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.look-header-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.look-header-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 6px;
}

.look-header-desc {
  font-size: 0.875rem;
  color: var(--store-text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.look-protocol-box {
  background: #FFFFFF;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--store-burgundy);
  font-size: 0.8125rem;
  color: var(--store-text-main);
  line-height: 1.4;
}

.look-protocol-box strong {
  color: var(--store-burgundy);
}

.look-products-title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--store-onyx);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.look-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.look-product-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-border);
  transition: var(--transition-fast);
}

.look-product-card:hover {
  border-color: #D4AF37;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.look-product-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  overflow: hidden;
  flex-shrink: 0;
}

.look-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-product-details {
  flex: 1 1 auto;
  min-width: 0;
}

.look-product-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--store-burgundy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.look-product-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin: 2px 0;
  white-space: normal;
}

.look-product-vol {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.look-product-pricing {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.look-product-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--store-onyx);
}

.look-item-add-btn {
  background: transparent;
  border: 1px solid var(--store-burgundy);
  color: var(--store-burgundy);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.look-item-add-btn:hover {
  background: var(--store-burgundy);
  color: #FFFFFF;
}

.look-modal .quickview-body {
  padding-bottom: max(64px, env(safe-area-inset-bottom, 64px)) !important;
}

.look-bundle-footer {
  background: var(--store-onyx);
  color: #FFFFFF;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.look-bundle-total-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.look-bundle-total-label {
  font-size: 0.75rem;
  color: #A8A096;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.look-bundle-total-price {
  font-size: 1.45rem;
  font-weight: 800;
  color: #D4AF37;
  font-family: var(--font-mono);
}

.look-bundle-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.look-bundle-add-all-btn {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border: none;
  padding: 12px 20px;
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.look-bundle-add-all-btn:hover {
  background: var(--store-burgundy-dark);
  box-shadow: var(--shadow-burgundy);
}

.look-bundle-checkout-btn {
  background: #D4AF37;
  color: #141416;
  border: none;
  padding: 12px 20px;
  height: 48px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition-fast);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.look-bundle-checkout-btn:hover {
  background: #E5C158;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.look-bundle-footer .qv-checkout-prompt {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--store-emerald);
  color: #FFFFFF;
}

.look-bundle-footer .qv-checkout-prompt span {
  color: #FFFFFF;
  font-weight: 700;
}

@media (max-width: 640px) {
  .look-bundle-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 18px 24px;
    gap: 16px;
    margin-bottom: 50px;
  }

  .look-bundle-total-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 12px;
  }

  .look-bundle-add-all-btn,
  .look-bundle-checkout-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    height: 50px;
    font-size: 0.9375rem;
  }
}

/* ==============================================================================
   QUICKVIEW ABOVE-THE-FOLD CTA (HIGH CONVERSION)
   ============================================================================== */
.qv-primary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.qv-action-row-main {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.qv-action-row-main .qv-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  flex-shrink: 0;
  height: 48px;
}

.qv-action-row-main .qv-qty-stepper button {
  width: 38px;
  height: 46px;
  font-size: 1.125rem;
  font-weight: 700;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--store-onyx);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qv-action-row-main .qv-qty-stepper span {
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0 10px;
  min-width: 20px;
  text-align: center;
  color: var(--store-onyx);
}

.qv-action-row-main .qv-add-btn {
  flex-grow: 1;
  background: var(--store-burgundy);
  color: #FFFFFF;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.qv-action-row-main .qv-add-btn:hover {
  background: var(--store-burgundy-dark);
  box-shadow: var(--shadow-burgundy);
}

.qv-action-row-main .qv-wishlist-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--store-text-muted);
  transition: var(--transition-fast);
}

.qv-action-row-main .qv-wishlist-btn:hover,
.qv-action-row-main .qv-wishlist-btn.is-active {
  color: var(--store-burgundy);
  border-color: var(--store-burgundy);
  background: rgba(107, 29, 47, 0.05);
}

.qv-buy-now-btn {
  width: 100%;
  background: #D4AF37;
  color: #141416;
  height: 46px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
}

.qv-buy-now-btn:hover {
  background: #E5C158;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.45);
  transform: translateY(-1px);
}

.qv-checkout-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--store-emerald);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--store-onyx);
  animation: fadeInDown 0.3s ease;
}

.qv-prompt-checkout-link {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.qv-prompt-checkout-link:hover {
  background: var(--store-burgundy-dark);
}

/* ==============================================================================
   4. STORE CURATED SETS ARCHITECTURE
   ============================================================================== */
.bundles-section {
  scroll-margin-top: 80px;
  padding: 88px 0 96px;
  background: radial-gradient(circle at 50% 15%, rgba(197, 160, 89, 0.07) 0%, transparent 65%), #FFFFFF;
  border-top: 1px solid var(--store-sand-border);
  border-bottom: 1px solid var(--store-sand-border);
  position: relative;
  overflow: hidden;
}

.bundles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1100px) {
  .bundles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .bundles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bundle-card {
  background: #FFFFFF;
  border: 1.5px solid var(--store-sand-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  overflow: hidden;
  cursor: pointer;
}

.bundle-card:hover {
  border-color: var(--store-burgundy);
  box-shadow: 0 20px 48px rgba(197, 160, 89, 0.16), 0 4px 14px rgba(18, 18, 20, 0.06);
}

.bundle-card.is-featured {
  border-color: rgba(212, 175, 55, 0.7);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.03) 0%, #FFFFFF 100%);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.12);
}

.bundle-card.is-featured:hover {
  border-color: #D4AF37;
  box-shadow: 0 22px 52px rgba(212, 175, 55, 0.24), 0 4px 14px rgba(18, 18, 20, 0.06);
}

.bundle-kanji-bg {
  position: absolute;
  top: 36px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(197, 160, 89, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: transform var(--transition-smooth), color var(--transition-smooth);
}

.bundle-card:hover .bundle-kanji-bg {
  transform: scale(1.08) rotate(-4deg);
  color: rgba(197, 160, 89, 0.08);
}

.bundle-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000000;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(197, 160, 89, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.bundle-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center center;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.bundle-card:hover .bundle-card-img {
  transform: scale(1.03) translateZ(0);
}

.bundle-card-header {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.bundle-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.bundle-tag-pill {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--store-burgundy);
  background: rgba(197, 160, 89, 0.08);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-savings-badge {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background: var(--store-ruby);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-card.is-featured .bundle-savings-badge {
  background: linear-gradient(135deg, #B8860B 0%, #D4AF37 100%);
  color: #121214;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.bundle-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--store-onyx);
  line-height: 1.25;
  margin-bottom: 4px;
}

.bundle-subtitle {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: #8C7B6C;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.bundle-desc {
  font-size: 0.84rem;
  color: var(--store-text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.bundle-contents-wrap {
  position: relative;
  z-index: 1;
  background: var(--store-sand);
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 22px;
  flex: 1 1 auto;
}

.bundle-contents-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--store-burgundy);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bundle-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bundle-items-list li {
  font-size: 0.78rem;
  color: var(--store-text-main);
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bundle-items-list li svg {
  color: var(--store-emerald);
  flex-shrink: 0;
  margin-top: 1px;
}

.bundle-pricing-block {
  position: relative;
  z-index: 1;
  padding-top: 16px;
  border-top: 1px dashed var(--store-sand-border);
  margin-bottom: 16px;
}

.bundle-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.bundle-compare-label {
  font-size: 0.75rem;
  color: var(--store-text-muted);
}

.bundle-compare-val {
  font-size: 0.95rem;
  color: #A8A096;
  text-decoration: line-through;
  font-weight: 600;
}

.bundle-price-main-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.bundle-price-val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--store-onyx);
  letter-spacing: -0.02em;
}

.bundle-card.is-featured .bundle-price-val {
  color: var(--store-burgundy);
}

.bundle-free-shipping-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--store-emerald);
  margin-top: 4px;
}

.bundle-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bundle-add-btn {
  width: 100%;
  background: var(--store-burgundy);
  color: #FFFFFF;
  border: none;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.25);
  transition: var(--transition-smooth);
}

.bundle-add-btn:hover {
  background: var(--store-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.35);
}

.bundle-card.is-featured .bundle-add-btn {
  background: linear-gradient(135deg, var(--store-burgundy) 0%, #07080C 100%);
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.35);
}

/* ==============================================================================
   5. store-generic-tokenS "COMING SOON" & PRIORITY WAITLIST STYLES
   ============================================================================== */
.product-coming-soon-btn {
  background: rgba(18, 18, 20, 0.06);
  color: #555048;
  border: 1px solid var(--store-sand-border);
  padding: 0 12px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.product-coming-soon-btn:hover {
  background: rgba(197, 160, 89, 0.08);
  border-color: var(--store-burgundy);
  color: var(--store-burgundy);
}

.product-badge-tag.coming-soon {
  background: #121214;
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, 0.35);
  letter-spacing: 0.1em;
}

.qv-coming-soon-box {
  background: radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.08) 0%, #FAF7F2 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 18px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.cs-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #121214;
  color: #D4AF37;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.cs-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4AF37;
  box-shadow: 0 0 8px #D4AF37;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.cs-note {
  font-size: 0.75rem;
  color: var(--store-text-muted);
  font-weight: 600;
}

.cs-headline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 6px;
}

.cs-desc {
  font-size: 0.8125rem;
  color: var(--store-text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}

.cs-input-group {
  display: flex;
  gap: 8px;
}

@media (max-width: 540px) {
  .cs-input-group {
    flex-direction: column;
  }
}

.cs-input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--store-onyx);
  outline: none;
  transition: border-color var(--transition-fast);
}

.cs-input:focus {
  border-color: var(--store-burgundy);
  box-shadow: 0 0 0 3px var(--store-burgundy-glow);
}

.cs-submit-btn {
  height: 44px;
  padding: 0 20px;
  background: var(--store-burgundy);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: var(--transition-fast);
  box-shadow: 0 3px 10px rgba(197, 160, 89, 0.25);
}

.cs-submit-btn:hover {
  background: var(--store-burgundy-dark);
}

.cs-feedback-msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
}

.cs-feedback-msg.is-success {
  background: rgba(16, 185, 129, 0.1);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==============================================================================
   6. B2B STORE PRO / VIP WHOLESALE REGISTRATION FRAMING
   ============================================================================== */
.b2b-pro-badge {
  background: #121214;
  color: #D4AF37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.b2b-perks-banner {
  background: linear-gradient(135deg, rgba(18, 18, 20, 0.95) 0%, rgba(197, 160, 89, 0.9) 100%);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 640px) {
  .b2b-perks-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==============================================================================
   STORE GIFT BOXES - MULTI-PRODUCT GALLERY & VIDEO PLAYER ARCHITECTURE
   ============================================================================== */
.qv-main-image {
  position: relative;
}

.qv-media-caption-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: rgba(18, 18, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  white-space: normal;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 3;
}

.qv-bundle-media-controls {
  margin-top: 12px;
  margin-bottom: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.qv-media-filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.qv-media-filter-pills::-webkit-scrollbar {
  display: none;
}

.qv-media-pill {
  font-size: 0.71875rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--store-sand-border);
  background: #FAF7F2;
  color: var(--store-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.qv-media-pill:hover,
.qv-media-pill.is-active {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
}

.qv-thumbs-scrollable {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--store-sand-border) transparent;
  padding: 6px 2px 10px !important;
  justify-content: flex-start !important;
}

.qv-thumbs-scrollable::-webkit-scrollbar {
  height: 4px;
}

.qv-thumbs-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.qv-thumbs-scrollable::-webkit-scrollbar-thumb {
  background: var(--store-sand-border);
  border-radius: 4px;
}

.qv-thumbs-scrollable .qv-thumb-btn {
  flex: 0 0 56px;
  scroll-snap-align: start;
}

/* Bundle Contents Interactive Showcase in Modal */
.qv-bundle-contents-box {
  margin: 18px 0 22px;
  background: #FAF7F2;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.qv-bundle-contents-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--store-sand-border);
}

.qv-bch-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--store-burgundy);
}

.qv-bundle-contents-title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin: 0;
}

.qv-bundle-contents-subtitle {
  display: block;
  font-size: 0.75rem;
  color: var(--store-text-muted);
  margin-top: 3px;
}

.qv-bundle-contents-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--store-sand-border) transparent;
}

.qv-bundle-contents-grid::-webkit-scrollbar {
  width: 4px;
}

.qv-bundle-contents-grid::-webkit-scrollbar-thumb {
  background: var(--store-sand-border);
  border-radius: 4px;
}

.qv-bundle-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: all var(--transition-fast);
}

.qv-bundle-product-row:hover {
  border-color: var(--store-burgundy);
  box-shadow: var(--shadow-sm);
}

.qv-bpr-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 4px;
  background: #FAF7F2;
  border: 1px solid var(--store-sand-border);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qv-bpr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}

.qv-bpr-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.qv-bpr-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--store-onyx);
  white-space: normal;
}

.qv-bpr-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--store-text-muted);
  margin-top: 2px;
  white-space: normal;
}

.qv-bpr-vol {
  font-weight: 600;
  color: var(--store-burgundy);
}

.qv-bpr-sub {
  color: var(--store-text-muted);
}

.qv-bpr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.qv-bpr-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--store-sand-border);
  background: #FFFFFF;
  color: var(--store-onyx);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}

.qv-bpr-btn:hover {
  border-color: var(--store-burgundy);
  color: var(--store-burgundy);
}

.qv-bpr-video-btn {
  background: rgba(197, 160, 89, 0.06);
  border-color: rgba(197, 160, 89, 0.25);
  color: var(--store-burgundy);
}

.qv-bpr-video-btn:hover {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
}



/* ==============================================================================
   LOOKBOOK & CURATED BUNDLE MODAL RESPONSIVE GRID (ANTI-COLLISION INVARIANT)
   Safeguard 17.14: Prevents mobile text truncation, squishing & price overlap
   ============================================================================== */
@media (max-width: 640px) {
  .look-product-card {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    grid-template-areas:
      "thumb details"
      "thumb pricing" !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    align-items: start !important;
    padding: 12px 14px !important;
  }

  .look-product-thumb {
    grid-area: thumb !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden !important;
    align-self: start !important;
    flex-shrink: 0 !important;
  }

  .look-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .look-product-details {
    grid-area: details !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .look-product-details .look-product-cat,
  .look-product-cat {
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }

  .look-product-details .look-product-name,
  .look-product-name {
    white-space: normal !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 2px 0 4px !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .look-product-details .look-product-vol,
  .look-product-vol {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    margin: 0 !important;
  }

  .look-product-pricing {
    grid-area: pricing !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 2px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--store-border, rgba(128, 128, 128, 0.18)) !important;
    gap: 8px !important;
    text-align: left !important;
  }

  .look-product-pricing .look-product-price,
  .look-product-price {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  .look-item-add-btn {
    padding: 6px 14px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}


/* Zero-Friction Checkout Sticky Mobile CTA */
@media (max-width: 768px) {
  .checkout-summary-col { position: relative; }
  #submit-order-btn {
    position: sticky !important;
    bottom: 0;
    z-index: 1000;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    margin-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }
}

/* ==============================================================================
   STORE STUDIO PROOF: As Seen on Instagram Video Reels Section
   ============================================================================== */
.studio-proof-section {
  padding: 72px 0 60px;
  background: var(--store-sand);
  border-top: 1px solid var(--store-sand-border);
  position: relative;
  overflow: hidden;
}

.studio-proof-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.studio-proof-header-left {
  max-width: 680px;
}

.btn-instagram-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--store-sand-border);
  color: var(--store-onyx);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.btn-instagram-follow:hover {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.studio-proof-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .studio-proof-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .studio-proof-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    gap: 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .studio-proof-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

.studio-proof-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.studio-proof-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(197, 160, 89, 0.35);
}

.studio-proof-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
}

.studio-proof-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000000;
  transform: translateZ(0);
  will-change: transform;
}

.studio-proof-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.studio-proof-pill {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(18, 18, 20, 0.85);
  color: #FFFFFF;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.studio-proof-play-toggle {
  pointer-events: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--store-onyx);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.studio-proof-play-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
  background: #FFFFFF;
}

/* Vitrine Showcase Mode: Hide play button when video is continuously looping */
.studio-proof-video-wrap.is-playing .studio-proof-play-toggle {
  opacity: 0;
}

/* On hover, gently reveal pause button */
.studio-proof-video-wrap.is-playing:hover .studio-proof-play-toggle {
  opacity: 0.85;
}

/* When paused, display high-contrast play button */
.studio-proof-video-wrap.is-paused .studio-proof-play-toggle {
  opacity: 0.95;
}

.studio-proof-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.studio-proof-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--store-text-main);
  margin-bottom: 6px;
  line-height: 1.35;
}

.studio-proof-desc {
  font-size: 0.8125rem;
  color: var(--store-text-muted);
  line-height: 1.45;
  margin-bottom: 12px;
  flex-grow: 1;
}

.studio-proof-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--store-sand-border);
  gap: 8px;
}

.studio-proof-price {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--store-burgundy);
}

.studio-proof-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--store-sand);
  color: var(--store-onyx);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--store-sand-border);
  cursor: pointer;
  transition: var(--transition-fast);
}

.studio-proof-action-btn:hover {
  background: var(--store-burgundy);
  color: #FFFFFF;
  border-color: var(--store-burgundy);
}

/* ==============================================================================
   10 ΧΡΟΝΙΑ ΕΥΓΕΝΙΟΣ - ANNIVERSARY CELEBRATION SHOWCASE & MODALS
   ============================================================================== */
.anniversary-offer-section {
  position: relative;
  padding: 60px 0 80px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--store-sand) 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  overflow: hidden;
}

.anniversary-offer-section::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.anniversary-offer-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.anniversary-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Poster Card Column */
.anniversary-poster-col {
  display: flex;
  justify-content: center;
}

.anniversary-poster-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(197, 160, 89, 0.18), 0 0 25px rgba(212, 175, 55, 0.15);
  border: 2px solid rgba(212, 175, 55, 0.45);
  background: #090A0E;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.anniversary-poster-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 24px 55px rgba(197, 160, 89, 0.26), 0 0 35px rgba(212, 175, 55, 0.35);
  border-color: rgba(212, 175, 55, 0.8);
}

.anniversary-poster-img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

.anniversary-poster-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(18, 18, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #D4AF37;
  text-transform: uppercase;
}

.anniversary-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E11D48;
  box-shadow: 0 0 8px #E11D48;
}

.anniversary-poster-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  color: #FFFFFF;
  opacity: 0.92;
  transition: var(--transition-fast);
}

.anniversary-poster-card:hover .anniversary-poster-zoom-hint {
  background: var(--store-burgundy);
  border-color: rgba(212, 175, 55, 0.4);
  opacity: 1;
}

/* Content Column */
.anniversary-tag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(197, 160, 89, 0.08);
  border: 1px solid rgba(197, 160, 89, 0.25);
  margin-bottom: 16px;
}

.anniversary-tag-text {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--store-burgundy);
}

.anniversary-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 14px;
}

.anniversary-headline em {
  font-style: normal;
  color: var(--store-burgundy);
  font-weight: 800;
}

.anniversary-intro {
  font-size: 0.98rem;
  color: var(--store-text-muted);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 680px;
}

/* Perks Grid */
.anniversary-perks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.anniversary-perk-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border: 1px solid var(--store-sand-border);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: var(--transition-fast);
}

.anniversary-perk-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212, 175, 55, 0.5);
}

.anniversary-perk-card.highlight {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F5 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.12);
}

.anniversary-perk-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.anniversary-perk-icon-wrap.b2b {
  background: rgba(197, 160, 89, 0.08);
  color: var(--store-burgundy);
}

.anniversary-perk-icon-wrap.gift {
  background: rgba(212, 175, 55, 0.14);
  color: #92400E;
}

.anniversary-perk-icon-wrap.shipping {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.anniversary-perk-icon-wrap.retail {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.anniversary-perk-body {
  flex-grow: 1;
}

.anniversary-perk-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--store-sand);
  color: var(--store-onyx);
  margin-bottom: 6px;
  border: 1px solid var(--store-sand-border);
}

.anniversary-perk-badge.gift-badge {
  background: rgba(212, 175, 55, 0.2);
  color: #854D0E;
  border-color: rgba(212, 175, 55, 0.45);
}

.anniversary-perk-body h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--store-onyx);
  margin-bottom: 4px;
  line-height: 1.3;
}

.anniversary-perk-body p {
  font-size: 0.8125rem;
  color: var(--store-text-muted);
  line-height: 1.45;
  margin: 0;
}

/* Actions Row */
.anniversary-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-anniversary-primary {
  background: var(--store-burgundy);
  color: #FFFFFF;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-burgundy);
  transition: var(--transition-smooth);
  min-height: 48px;
}

.btn-anniversary-primary:hover {
  background: var(--store-burgundy-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(197, 160, 89, 0.35);
  color: #FFFFFF;
}

.btn-anniversary-letter {
  background: #FFFFFF;
  color: var(--store-burgundy);
  border: 1.5px solid var(--store-burgundy);
  padding: 13px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 48px;
}

.btn-anniversary-letter:hover {
  background: rgba(197, 160, 89, 0.05);
  transform: translateY(-2px);
}

/* Modals active states */
.anniversary-letter-modal,
.anniversary-poster-modal {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.anniversary-letter-modal.is-open,
.anniversary-poster-modal.is-open {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.anniversary-letter-modal {
  max-width: 660px !important;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

.anniversary-poster-modal {
  max-width: 540px !important;
  height: auto !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
}

.anniversary-modal-scrollable-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 28px 36px 28px !important;
  box-sizing: border-box !important;
}

.anniversary-letter-img-wrap {
  text-align: center;
  margin-bottom: 24px;
  background: #FFF9F5;
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid var(--store-sand-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
  align-items: center;
}

.anniversary-letter-img-wrap img,
.anniversary-letter-card-img {
  max-width: 100% !important;
  max-height: 62vh !important;
  max-height: 62dvh !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: inline-block;
  object-fit: contain;
}

.anniversary-poster-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 20px 28px 20px !important;
  text-align: center;
  box-sizing: border-box !important;
}

.anniversary-poster-body img,
.anniversary-poster-full-img {
  max-width: 100% !important;
  max-height: 68vh !important;
  max-height: 68dvh !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
  display: inline-block;
  object-fit: contain;
}

#anniversary-letter-overlay.is-open,
#anniversary-poster-overlay.is-open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
  .anniversary-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  
  .anniversary-poster-col {
    order: -1;
  }
  
  .anniversary-poster-card {
    max-width: 320px;
    margin: 0 auto;
  }
  
  .anniversary-intro {
    margin-left: auto;
    margin-right: auto;
  }
  
  .anniversary-perks-grid {
    text-align: left;
  }
  
  .anniversary-actions-row {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .anniversary-offer-section {
    padding: 44px 0 60px;
  }
  
  .anniversary-perks-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .anniversary-actions-row {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-anniversary-primary,
  .btn-anniversary-letter {
    width: 100%;
    justify-content: center;
  }

  .anniversary-letter-modal,
  .anniversary-poster-modal {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100% !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .anniversary-letter-modal.is-open,
  .anniversary-poster-modal.is-open {
    transform: none !important;
  }

  .anniversary-modal-scrollable-body {
    padding: 16px 14px calc(42px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .anniversary-letter-img-wrap {
    padding: 8px !important;
    margin-bottom: 18px !important;
  }

  .anniversary-letter-img-wrap img,
  .anniversary-letter-card-img {
    max-height: 56vh !important;
    max-height: 56dvh !important;
  }

  .anniversary-poster-body {
    padding: 14px 14px calc(36px + env(safe-area-inset-bottom, 14px)) !important;
  }

  .anniversary-poster-body img,
  .anniversary-poster-full-img {
    max-height: 60vh !important;
    max-height: 60dvh !important;
  }
}

/* ==============================================================================
   8. IOS SAFARI & WEBKIT COMPATIBILITY & ZERO-ZOOM SHIELD
   ============================================================================== */

/* Prevent iOS Safari from auto-zooming on input focus (minimum 16px font-size required on mobile) */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-input,
  .auth-form .form-control,
  .coupon-text-input,
  .search-input-wrap input,
  .cs-input {
    font-size: 16px !important;
  }
}

/* iOS Dynamic Viewport & Safe Area Protection */
@supports (-webkit-touch-callout: none) {
  .site-header {
    padding-top: max(10px, env(safe-area-inset-top, 10px));
  }

  .cart-drawer-footer {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .checkout-modal-body {
    -webkit-overflow-scrolling: touch !important;
  }
}



/* A11y: Rule 24 Touch Targets */
.btn, .icon-btn, .social-icon, .qty-btn, .pagination a, .touch-target { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  .b2b-invoice-fields, .form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

input[type="radio"], input[type="checkbox"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
}


/* ==============================================================================
   9. PROMOTIONAL CAMPAIGN MODAL & FLOATING PILL
   ============================================================================== */
.giveaway-floating-pill {
  position: fixed;
  bottom: max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
  left: 20px;
  z-index: 9985;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #0E1017 0%, #3E0E14 100%);
  color: #FFFFFF;
  border: 1.5px solid #D4AF37;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(197, 160, 89, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.25);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.giveaway-floating-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(197, 160, 89, 0.6), 0 0 0 2px rgba(212, 175, 55, 0.5);
}

.giveaway-floating-pill .gw-pill-badge {
  background: rgba(212, 175, 55, 0.22);
  color: #FDE68A;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.giveaway-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(15, 12, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain !important;
}

.giveaway-modal-card {
  position: relative;
  width: 100%;
  max-width: 650px;
  max-height: min(90vh, 860px);
  background: #FAF7F2;
  color: #1C1917;
  border-radius: 18px;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(197, 160, 89, 0.15);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex;
  flex-direction: column;
}

.giveaway-modal-header {
  position: relative;
  background: linear-gradient(145deg, #24090D 0%, #0E1017 60%, #07080C 100%);
  color: #FFFFFF;
  padding: 28px 24px 22px;
  text-align: center;
  border-bottom: 2px solid #D4AF37;
}

.giveaway-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  touch-action: manipulation;
  z-index: 5;
}

.giveaway-modal-close:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.04);
}

.giveaway-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid #D4AF37;
  color: #FDE68A;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.giveaway-title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.22;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.giveaway-subtitle {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto;
  max-width: 540px;
}

.giveaway-prizes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 24px 6px;
}

.giveaway-prize-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.05);
}

.giveaway-prize-rank {
  display: inline-block;
  background: #0E1017;
  color: #FDE68A;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.giveaway-prize-title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1C1917;
  margin: 0 0 4px;
}

.giveaway-prize-desc {
  font-size: 0.78rem;
  color: #57534E;
  margin: 0;
  line-height: 1.35;
}

.giveaway-modal-body {
  padding: 16px 24px 26px;
}

.giveaway-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.giveaway-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.giveaway-field label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #292524;
  letter-spacing: 0.02em;
}

.giveaway-field input,
.giveaway-field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1.5px solid #D6D3D1;
  background: #FFFFFF;
  color: #1C1917;
  font-size: 16px !important;
  font-family: var(--font-sans, system-ui, sans-serif);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.giveaway-field input:focus,
.giveaway-field select:focus {
  outline: none;
  border-color: #0E1017;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.14);
}

.giveaway-consent-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(197, 160, 89, 0.04);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 9px;
  margin: 6px 0 14px;
  cursor: pointer;
}

.giveaway-consent-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 2px;
  accent-color: #0E1017;
  cursor: pointer;
}

.giveaway-consent-wrap span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #44403C;
}

.giveaway-submit-btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0E1017 0%, #07080C 100%);
  color: #FFFFFF;
  border: 1.5px solid #D4AF37;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(197, 160, 89, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}

.giveaway-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(197, 160, 89, 0.48);
}

.giveaway-submit-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.giveaway-ticket-box {
  background: linear-gradient(135deg, #1C1917 0%, #292524 100%);
  color: #FFFFFF;
  border: 2px dashed #D4AF37;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin: 12px 0 18px;
}

.giveaway-ticket-code {
  font-family: var(--font-mono, monospace);
  font-size: 1.65rem;
  font-weight: 800;
  color: #FDE68A;
  letter-spacing: 0.1em;
  margin: 6px 0;
}

@media (max-width: 640px) {
  .giveaway-prizes-grid,
  .giveaway-form-grid {
    grid-template-columns: 1fr !important;
  }
  .giveaway-modal-header {
    padding: 22px 16px 18px;
  }
  .giveaway-prizes-grid {
    padding: 14px 16px 4px;
  }
  .giveaway-modal-body {
    padding: 14px 16px 22px;
  }
  .giveaway-floating-pill {
    left: 12px;
    bottom: max(76px, calc(70px + env(safe-area-inset-bottom, 0px)));
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

/* === WEBMCP AGENTIC VISUAL FEEDBACK (CHROMIUM 146+/156+) === */
form:tool-form-active {
  outline: 2px dashed #3b82f6 !important;
  outline-offset: 4px !important;
  background-color: rgba(59, 130, 246, 0.04) !important;
  transition: outline 0.2s ease, background-color 0.2s ease;
}
button:tool-submit-active,
input[type="submit"]:tool-submit-active {
  outline: 2px dashed #f59e0b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
}

/* === MOBILE COUPON INPUT 17-CHAR FIT GUARD (360px VIEWPORT) === */
@media (max-width: 768px) {
  .coupon-field-group {
    padding: 4px 4px 4px 8px !important;
  }
  .coupon-prefix-icon {
    margin-right: 4px !important;
  }
  .coupon-text-input {
    font-size: 16px !important;
    letter-spacing: 0.4px !important;
    padding: 8px 2px !important;
  }
  .coupon-action-btn {
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
  }
}

/* === BASELINE SCROLL-DRIVEN ANIMATIONS (@ChromiumDev Standard) === */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--store-burgundy, #0E1017), var(--store-gold, #D4AF37));
  z-index: 1200;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes store-grow-scroll-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .scroll-progress-bar {
      animation: store-grow-scroll-progress auto linear;
      animation-timeline: scroll(root block);
    }
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @keyframes store-header-scroll-elevate {
      to {
        background: rgba(10, 11, 14, 0.98);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
      }
    }

    .main-header {
      animation: store-header-scroll-elevate auto linear both;
      animation-timeline: scroll(block root);
      animation-range: 0px 140px;
    }
  }
}


/* ==========================================================================
   MAISON HARITIDIS 1979 — HAUTE JOAILLERIE & HORLOGERIE BESPOKE ARCHITECTURE
   ========================================================================== */
.hero-brand-watermark {
  display: none !important;
}
.announcement-bar {
  background: linear-gradient(90deg, #07080C 0%, #141824 50%, #07080C 100%) !important;
  color: #EAD29C !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.38) !important;
  letter-spacing: 0.08em !important;
}
.main-header {
  background: #0A0B0E !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.38) !important;
  backdrop-filter: blur(16px) !important;
}
.main-header .brand-logo img {
  height: 54px !important;
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(212, 175, 55, 0.45)) !important;
}
.main-header .nav-link {
  color: #F2EFE9 !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
}
.main-header .nav-link:hover,
.main-header .nav-link.is-active {
  color: #E5C883 !important;
}
.main-header .nav-link::after {
  background-color: #C5A059 !important;
}
.main-header .nav-action-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FAF8F5 !important;
  border-color: rgba(197, 160, 89, 0.38) !important;
}
.main-header .nav-action-btn:hover {
  background: #C5A059 !important;
  color: #0B0C10 !important;
  border-color: #E5C883 !important;
}
.hero-section {
  background: radial-gradient(circle at 75% 30%, #1A1F30 0%, #0B0D13 55%, #06070A 100%) !important;
  color: #FAF8F5 !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.38) !important;
  padding: 76px 0 92px !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-caustics-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.hero-section > .container {
  position: relative;
  z-index: 2;
}
@keyframes haritidisOrbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes haritidisOrbitSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes haritidisMarqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes diamondSparkleTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
.hero-badge-wrap {
  background: rgba(197, 160, 89, 0.14) !important;
  border: 1px solid rgba(212, 175, 55, 0.55) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.15) !important;
}
.hero-badge-icon {
  background: #D4AF37 !important;
  box-shadow: 0 0 10px #D4AF37 !important;
}
.hero-badge-text {
  color: #E5C883 !important;
  letter-spacing: 0.16em !important;
}
.hero-headline {
  color: #FAF8F5 !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(2.35rem, 3.6vw, 3.25rem) !important;
  line-height: 1.12 !important;
}
.hero-headline em {
  color: #E5C883 !important;
  font-style: italic !important;
  text-shadow: 0 0 28px rgba(212, 175, 55, 0.28);
}
.hero-description {
  color: rgba(250, 248, 245, 0.88) !important;
  max-width: 580px !important;
}
.hero-section .btn-primary {
  background: linear-gradient(135deg, #E5C883 0%, #C5A059 45%, #96732C 100%) !important;
  color: #08090C !important;
  border: 1px solid #F7E5B4 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 14px 36px rgba(197, 160, 89, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.hero-section .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
.hero-section .btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FAF8F5 !important;
  border: 1px solid rgba(197, 160, 89, 0.55) !important;
  backdrop-filter: blur(8px) !important;
}
.hero-section .btn-secondary:hover {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: #E5C883 !important;
}
.hero-section .btn-secondary svg {
  color: #E5C883 !important;
}
.hero-trust-row {
  border-top: 1px solid rgba(197, 160, 89, 0.28) !important;
}
.hero-section .trust-item {
  color: #E8E4DC !important;
}
.hero-section .trust-item svg {
  color: #D4AF37 !important;
}
.hero-diamond-halo {
  position: absolute;
  width: min(470px, 86vw);
  height: min(470px, 86vw);
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.35);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(11, 12, 16, 0) 70%);
  z-index: 1;
  pointer-events: none;
  animation: haritidisOrbitSpin 38s linear infinite;
}
.hero-diamond-halo::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  transform: rotate(45deg);
  animation: haritidisOrbitSpinReverse 26s linear infinite;
}
.joaillerie-showcase-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  background: linear-gradient(160deg, #171B26 0%, #0A0B0F 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.78), 0 0 48px rgba(197, 160, 89, 0.22);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.joaillerie-showcase-inner {
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #FAF8F5;
  cursor: crosshair;
}
.joaillerie-showcase-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.hero-loupe-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  background: rgba(10, 11, 15, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.65);
  color: #E5C883;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-loupe-lens {
  position: absolute;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 2.5px solid #D4AF37;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(212, 175, 55, 0.55), inset 0 0 18px rgba(212, 175, 55, 0.35);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
}
.hero-loupe-lens.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.hero-loupe-lens::after {
  content: '10x GIA LOUPE';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #0A0B0E;
  color: #E5C883;
  border: 1px solid #D4AF37;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.hero-masterpiece-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.hero-mp-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 6px;
  padding: 7px 6px;
  text-align: center;
  color: #C4BDB3;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-mp-pill:hover,
.hero-mp-pill.is-active {
  background: rgba(212, 175, 55, 0.18);
  border-color: #D4AF37;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.2);
}
.hero-mp-pill strong {
  display: block;
  color: #E5C883;
  font-family: var(--font-mono);
  font-size: 0.65rem;
}
.joaillerie-hallmark-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(197, 160, 89, 0.28);
  color: #E5C883;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-float-card {
  background: rgba(14, 16, 23, 0.95) !important;
  border: 1px solid rgba(197, 160, 89, 0.52) !important;
  color: #FAF8F5 !important;
}
.hero-float-card .float-card-icon {
  background: linear-gradient(135deg, #D4AF37, #9A7422) !important;
  color: #0B0C10 !important;
}
.hero-float-card .float-card-text h5 {
  color: #FAF8F5 !important;
}
.hero-float-card .float-card-text p {
  color: #C5A059 !important;
}

/* Kinetic Luxury Marquee Ribbon */
.haute-kinetic-marquee {
  background: linear-gradient(90deg, #07080B 0%, #12151F 50%, #07080B 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.38);
  padding: 13px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.haute-marquee-track {
  display: flex;
  width: max-content;
  gap: 44px;
  animation: haritidisMarqueeScroll 36s linear infinite;
}
.haute-kinetic-marquee:hover .haute-marquee-track {
  animation-play-state: paused;
}
.haute-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #E5C883;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.haute-marquee-item span {
  color: #FAF8F5;
  font-weight: 500;
}

/* Live Interactive 3D Ring & Diamond Stage in Configurator */
.config-visual-ring-stage {
  position: relative;
  background: radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.16) 0%, rgba(10, 12, 18, 0.95) 74%);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 14px;
  padding: 18px 16px 14px;
  margin-bottom: 18px;
  text-align: center;
  overflow: hidden;
}
.config-sparkle-star {
  animation: diamondSparkleTwinkle 2.4s ease-in-out infinite;
  transform-origin: center;
}

/* Haute Joaillerie 5-Pillar Category Showcase Bar */
.haute-category-showcase {
  background: #FAF8F5;
  padding: 64px 0 56px;
  border-bottom: 1px solid rgba(197, 160, 89, 0.28);
}
.haute-category-header {
  text-align: center;
  margin-bottom: 36px;
}
.haute-category-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #96732C;
  margin-bottom: 8px;
}
.haute-category-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 700;
  color: #0E1017;
}
.haute-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1080px) {
  .haute-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .haute-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hero-masterpiece-switcher {
    grid-template-columns: 1fr;
  }
}
.haute-cat-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(197, 160, 89, 0.32);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 8px 24px rgba(11, 12, 16, 0.05);
}
.haute-cat-card:hover {
  transform: translateY(-4px);
  border-color: #C5A059;
  box-shadow: 0 18px 38px rgba(11, 12, 16, 0.12);
}
.haute-cat-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F4F1EA;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}
.haute-cat-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.haute-cat-card:hover .haute-cat-img-wrap img {
  transform: scale(1.06);
}
.haute-cat-meta {
  padding: 16px 14px;
  text-align: center;
}
.haute-cat-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #96732C;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.haute-cat-meta h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0E1017;
  margin-bottom: 6px;
}
.haute-cat-cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0E1017;
  letter-spacing: 0.04em;
}
.haute-cat-card:hover .haute-cat-cta {
  color: #96732C;
}

/* Lookbook Editorial Image Framing */
.lookbook-media-wrap .lookbook-editorial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.lookbook-card:hover .lookbook-editorial-img {
  transform: scale(1.05);
}

/* Gallery-Grade White/Ivory Product Cards */
.product-thumb-wrap {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.2) !important;
  padding: 12px !important;
}
.product-thumb-wrap img {
  object-fit: contain !important;
  background: #FFFFFF !important;
}
.product-card {
  border: 1px solid rgba(197, 160, 89, 0.32) !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(11, 12, 16, 0.05) !important;
}
.product-card:hover {
  border-color: #C5A059 !important;
  box-shadow: 0 22px 48px rgba(11, 12, 16, 0.16), 0 0 24px rgba(197, 160, 89, 0.15) !important;
}
.product-badge-tag {
  background: linear-gradient(135deg, #141720 0%, #0B0C10 100%) !important;
  color: #E5C883 !important;
  border: 1px solid rgba(197, 160, 89, 0.55) !important;
}
.product-cat-label {
  color: #96732C !important;
}
.cat-chip.is-active {
  background: #0E1017 !important;
  color: #E5C883 !important;
  border-color: #C5A059 !important;
}



/* ============================================================================
   HAUTE JOAILLERIE 1440x900 SPATIAL BUDGETING, HEADER BOUNDING & KINETIC LUXURY
   ============================================================================ */
.main-header > .container.nav-container {
    max-width: 1440px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 14px !important;
    justify-content: space-between !important;
}
.main-header .brand-logo {
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}
.main-header .main-nav {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
}
.main-header .nav-link {
    font-size: 0.72rem !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap !important;
    padding: 6px 2px !important;
}
.main-header .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}
.main-header .nav-Atelier-cta {
    padding: 8px 14px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.main-header .account-nav-btn {
    width: auto !important;
    min-width: 48px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.main-header .cart-btn {
    flex-shrink: 0 !important;
}

/* Above-the-fold 1440x900 Hero Spatial Fit & Non-Overlapping Heritage Bar */
@media (min-width: 1024px) {
    .hero-section {
        min-height: calc(100vh - 80px) !important;
        max-height: 810px !important;
        padding: 18px 0 22px !important;
        display: flex !important;
        align-items: center !important;
    }
    .hero-grid-layout {
        gap: 36px !important;
        align-items: center !important;
    }
    .hero-title {
        font-size: clamp(2.15rem, 3.1vw, 3.1rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }
    .hero-subtitle {
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }
    .hero-cta-group {
        margin-bottom: 18px !important;
    }
    .hero-trust-row {
        padding-top: 14px !important;
        gap: 18px !important;
    }
    .hero-visual-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        max-width: 500px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .joaillerie-showcase-card {
        padding: 12px !important;
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
        will-change: transform;
    }
    .hero-loupe-stage {
        aspect-ratio: 16 / 10 !important;
        max-height: 300px !important;
    }
    .hero-masterpiece-switcher {
        margin-top: 8px !important;
        gap: 6px !important;
    }
    .hero-mp-pill {
        padding: 7px 6px !important;
    }
    .hero-hallmark-bar {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
}

/* Docked Heritage Counter Bar (Zero Overlap with Masterpiece Switcher Pills) */
.hero-float-card {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 5 !important;
    width: 100% !important;
    background: rgba(14, 13, 12, 0.92) !important;
    border: 1px solid rgba(212, 175, 55, 0.38) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}
.hero-float-card .float-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-float-card .float-number {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    color: #D4AF37 !important;
    font-weight: 700 !important;
}
.hero-float-card .float-label {
    font-size: 0.74rem !important;
    color: rgba(245, 240, 230, 0.9) !important;
    line-height: 1.25 !important;
}
.hero-float-card .float-card-pill {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.08);
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 700;
}

/* Interactive Prismatic Light Dispersion & Scintillation Overlay */
.hero-loupe-stage {
    --prism-x: 50%;
    --prism-y: 42%;
}
.hero-prism-rays-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(circle 180px at var(--prism-x) var(--prism-y), rgba(255, 248, 220, 0.22), rgba(212, 175, 55, 0.08) 45%, transparent 75%),
        conic-gradient(from 45deg at var(--prism-x) var(--prism-y), transparent 0deg, rgba(255, 255, 255, 0.12) 25deg, transparent 55deg, rgba(212, 175, 55, 0.14) 140deg, transparent 185deg, rgba(220, 238, 255, 0.12) 260deg, transparent 315deg);
    mix-blend-mode: screen;
    transition: opacity 0.35s ease;
}
.hero-scintillation-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.scintillation-star {
    transform-origin: center;
    animation: diamondScintillate 4.2s ease-in-out infinite;
}
.scintillation-star.star-2 {
    animation-delay: 1.4s;
}
.scintillation-star.star-3 {
    animation-delay: 2.7s;
}
@keyframes diamondScintillate {
    0%, 100% { opacity: 0.35; transform: scale(0.75) rotate(0deg); }
    50% { opacity: 0.95; transform: scale(1.18) rotate(22deg); }
}

/* Kinetic Editorial Lookbook Motion, Light Sweep & Hotspot Quick-Shop Pins */
.lookbook-editorial-frame {
    position: relative;
    overflow: hidden;
}
.lookbook-editorial-img {
    animation: lookbookKenBurns 18s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes lookbookKenBurns {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
.lookbook-light-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 248, 225, 0.18) 48%, rgba(212, 175, 55, 0.22) 52%, transparent 78%);
    transform: translateX(-120%);
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}
.lookbook-editorial-card:hover .lookbook-light-sweep {
    transform: translateX(120%);
}
.lookbook-hotspot-pin {
    position: absolute;
    z-index: 8;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #D4AF37;
    background: rgba(12, 11, 10, 0.86);
    color: #F5F0E6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    transition: transform 0.25s ease, background 0.25s ease;
}
.lookbook-hotspot-pin:hover,
.lookbook-hotspot-pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.12);
    background: #D4AF37;
    color: #0D0C0B;
    outline: none;
}
.lookbook-hotspot-pin .hotspot-dot {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.lookbook-hotspot-pin .hotspot-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.65);
    animation: hotspotPulseRing 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes hotspotPulseRing {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
}
.lookbook-hotspot-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 215px;
    background: rgba(12, 11, 10, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.48);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
}
.lookbook-hotspot-tooltip strong {
    display: block;
    font-size: 0.74rem;
    color: #F5F0E6;
    margin-bottom: 2px;
}
.lookbook-hotspot-tooltip span {
    display: block;
    font-size: 0.68rem;
    color: #D4AF37;
    font-weight: 600;
}
.lookbook-editorial-card:hover .lookbook-hotspot-tooltip,
.lookbook-hotspot-pin:hover .lookbook-hotspot-tooltip,
.lookbook-hotspot-pin:focus-visible .lookbook-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 3D Atelier Millimeter Scale Bar & Live GIA Dossier Preview */
.config-mm-scale-bar {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 10px;
}
.mm-scale-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: rgba(245, 240, 230, 0.72);
}
.mm-scale-active-readout {
    color: #D4AF37;
    font-weight: 700;
}
.mm-scale-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mm-scale-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 11, 10, 0.55);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.mm-scale-node.active {
    border-color: #D4AF37;
    background: rgba(212, 175, 55, 0.14);
}
.mm-stone-circle {
    display: inline-block;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF, #D8E6F3 55%, #8CA6BE 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
}
.mm-node-label {
    font-size: 0.68rem;
    color: #F5F0E6;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
}
.mm-node-label small {
    display: block;
    font-size: 0.6rem;
    color: rgba(212, 175, 55, 0.85);
}
.config-gia-dossier-card {
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    background: linear-gradient(135deg, rgba(22, 20, 17, 0.95), rgba(12, 11, 10, 0.98));
    border: 1px solid rgba(212, 175, 55, 0.36);
    border-radius: 10px;
}
.gia-dossier-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.gia-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #D4AF37;
}
.gia-report-no {
    font-size: 0.63rem;
    font-family: monospace;
    color: rgba(245, 240, 230, 0.78);
}
.gia-dossier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}
.gia-cell span {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(245, 240, 230, 0.58);
}
.gia-cell strong {
    font-size: 0.72rem;
    color: #F5F0E6;
    font-weight: 600;
}

/* ==========================================================================
   1440x900 DESKTOP HEADER & HERO VIEWPORT BUDGET + HAUTE JOAILLERIE PRISM
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1560px) {
  .main-header > .container,
  .main-header .nav-container,
  .main-header .nav-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: clamp(16px, 2vw, 32px) !important;
    padding-right: clamp(16px, 2vw, 32px) !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }

  .main-header .brand-logo {
    flex-shrink: 0 !important;
    margin-right: 4px !important;
  }

  .main-header nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .main-header .main-nav,
  .main-header .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.2vw, 22px) !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-header .main-nav a,
  .main-header .nav-links a,
  .main-header .nav-link {
    font-size: clamp(11px, 0.8vw, 12.5px) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    padding: 6px 4px !important;
  }

  .main-header .header-actions,
  .main-header .nav-actions {
    gap: clamp(8px, 0.7vw, 12px) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .main-header .header-actions .btn,
  .main-header .nav-actions .account-nav-btn,
  .main-header .nav-actions #cart-toggle-btn,
  .main-header .nav-actions .nav-action-btn {
    padding: 7px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Above-the-Fold 1440x900 Hero Viewport Budget */
  .hero-section {
    min-height: auto !important;
    padding-top: clamp(20px, 2.5vh, 36px) !important;
    padding-bottom: clamp(22px, 2.8vh, 38px) !important;
  }

  .hero-grid {
    gap: clamp(24px, 2.8vw, 44px) !important;
    align-items: center !important;
  }

  .hero-badge-wrap {
    margin-bottom: 12px !important;
  }

  .hero-headline {
    font-size: clamp(2.1rem, 2.8vw, 2.95rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 14px !important;
  }

  .hero-description {
    font-size: clamp(0.88rem, 0.96vw, 0.98rem) !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }

  .hero-cta-group {
    margin-bottom: 18px !important;
  }

  #hero-loupe-stage,
  .joaillerie-showcase-inner {
    max-height: 360px !important;
    aspect-ratio: 4 / 3.2 !important;
  }

  .joaillerie-hallmark-bar {
    margin-top: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }
}

/* Fix .hero-float-card so it sits cleanly below .joaillerie-showcase-card with ZERO overlap */
.hero-visual {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  position: relative !important;
}

.hero-visual .hero-float-card {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  background: linear-gradient(135deg, rgba(18, 21, 30, 0.96) 0%, rgba(10, 12, 18, 0.98) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.38) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  z-index: 2 !important;
}

.hero-visual .hero-float-card .float-card-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-visual .hero-float-card .float-number {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #D4AF37;
}

.hero-visual .hero-float-card .float-label {
  font-size: 0.78rem;
  color: #E5E0D8;
}

.hero-visual .hero-float-card .float-card-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #D4AF37;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Interactive Prism / Diamond Scintillation Canvas Overlay */
#hero-loupe-stage,
.joaillerie-showcase-inner {
  --prism-x: 50%;
  --prism-y: 50%;
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  position: relative;
  overflow: hidden;
  transform: perspective(1100px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  will-change: transform;
}

#hero-loupe-stage::after,
.joaillerie-showcase-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(
      280px circle at var(--prism-x, 50%) var(--prism-y, 50%),
      rgba(255, 255, 255, 0.24) 0%,
      rgba(212, 175, 55, 0.16) 28%,
      rgba(168, 216, 255, 0.09) 48%,
      transparent 72%
    );
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
}

#hero-showcase-img {
  transition: opacity 0.24s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Lookbook Interactive Hotspot Pins & Specular Light-Sweep */
.lookbook-card {
  position: relative;
  overflow: hidden;
}

.lookbook-media-wrap {
  position: relative;
  overflow: hidden;
}

.lookbook-card .lookbook-light-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(212, 175, 55, 0.28) 50%,
    rgba(255, 255, 255, 0.06) 58%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}

.lookbook-card:hover .lookbook-light-sweep {
  transform: translateX(120%);
}

.lookbook-hotspot-pin {
  position: absolute;
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 11, 14, 0.88);
  border: 1.5px solid #d4af37;
  color: #f3e5ab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.24), 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  padding: 0;
}

.lookbook-hotspot-pin::before {
  content: "+";
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.lookbook-hotspot-pin:hover,
.lookbook-hotspot-pin:focus-visible {
  transform: scale(1.14);
  background: #d4af37;
  color: #08090c;
  box-shadow: 0 0 0 7px rgba(212, 175, 55, 0.34), 0 8px 20px rgba(0, 0, 0, 0.65);
}

.lookbook-hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(8, 9, 12, 0.96);
  border: 1px solid rgba(212, 175, 55, 0.52);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 200px;
  color: #f8f5ee;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
  white-space: normal;
  z-index: 10;
}

.lookbook-hotspot-pin:hover .lookbook-hotspot-tooltip,
.lookbook-hotspot-pin:focus-visible .lookbook-hotspot-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Bespoke Configurator GIA Dossier & Scale Bar */
.config-mm-scale-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.38);
  color: #f3e5ab;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.config-gia-dossier-card {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(16, 18, 24, 0.96) 0%, rgba(10, 11, 15, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.42);
  box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.06);
  text-align: left;
  width: 100%;
}

.config-gia-dossier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  padding-bottom: 6px;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4af37;
  font-weight: 700;
}

.config-gia-dossier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 11px;
}

.config-gia-dossier-cell {
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.config-gia-dossier-cell span {
  display: block;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.config-gia-dossier-cell strong {
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
}

#config-ring-svg { max-height: 205px !important; width: auto !important; margin: 0 auto !important; display: block !important; }


/* ==========================================================================
   MAISON HARITIDIS v20 — EDITORIAL OVERLINES, HERO REEL, BESPOKE ATELIER & REELS
   ========================================================================== */

/* 1. Typography Consistency & Tabular Numerals (Zero Ora Fonts) */
body, button, input, select, textarea {
  font-family: 'Commissioner', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, .hero-headline, .section-title, .haute-category-heading, #config-summary-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}
.price, .product-price, .atelier-price-val, .social-reel-price, .hero-mp-pill strong {
  font-family: 'Commissioner', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}

/* 2. Clean Unboxed Editorial Overlines (Zero Robotic Boxes or Dots — Screenshot 1 & 2 Fix) */
.hero-badge-wrap,
.section-tag,
.haute-category-kicker,
.atelier-step-kicker,
.atelier-summary-kicker {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: 'Commissioner', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}
.hero-badge-wrap {
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.35) !important;
  padding-bottom: 6px !important;
}
.hero-badge-text {
  color: #E5C883 !important;
  letter-spacing: 0.22em !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
.hero-badge-icon,
.hero-loupe-badge,
.hero-loupe-lens {
  display: none !important;
}
.section-header .section-tag {
  color: #8C6B28 !important;
  margin-bottom: 10px !important;
}
.dark-luxury-section .section-header .section-tag {
  color: #E5C883 !important;
}

/* 3. Hero Authentic Social Media Reel Showcase (Riviera Diamond Bracelet Reel) */
.hero-reel-stage {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3.8 !important;
  max-height: 360px !important;
  background: #08090C !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  cursor: pointer !important;
}
.hero-reel-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #08090C !important;
}
.hero-reel-header-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.hero-reel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 11, 15, 0.82);
  backdrop-filter: blur(10px);
  color: #F5EFE6;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-reel-sound-btn {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #E5C883;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.hero-reel-sound-btn:hover {
  background: #C5A059;
  color: #0A0B0E;
  transform: scale(1.06);
}
.hero-reel-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(6, 7, 10, 0.92) 0%, rgba(6, 7, 10, 0.55) 60%, transparent 100%);
  pointer-events: none;
}
.hero-reel-caption strong {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FAF8F5;
  line-height: 1.2;
}
.hero-reel-caption span {
  display: block;
  font-size: 0.74rem;
  color: #E5C883;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.hero-reel-account {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 11, 15, 0.84);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #FAF8F5 !important;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}
.hero-reel-ig-ring {
  color: #E5C883;
  display: inline-flex;
  align-items: center;
}
.hero-reel-mute-btn {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.84);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #E5C883;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hero-reel-bottom-bar {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 34px 14px 12px !important;
  background: linear-gradient(to top, rgba(6, 7, 10, 0.94) 0%, rgba(6, 7, 10, 0.65) 60%, transparent 100%) !important;
  pointer-events: auto !important;
}
.hero-reel-caption-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.hero-reel-bottom-bar #hero-loupe-badge.hero-reel-kicker {
  display: inline-block !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #E5C883 !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.hero-reel-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}
.hero-reel-shop-btn {
  pointer-events: auto;
  padding: 7px 13px;
  border-radius: 6px;
  background: linear-gradient(135deg, #E5C883 0%, #C5A059 100%);
  color: #08090C !important;
  border: 1px solid #F7E5B4;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

/* 4. Bespoke Solitaire & 8-Cut Diamond Atelier (Gallery Ivory Aesthetic matching Screenshot 1) */
.bespoke-atelier-section {
  background: #FAF8F5 !important;
  color: #12141C !important;
  padding: 84px 0 92px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.28) !important;
}
.bespoke-atelier-section .section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}
.bespoke-atelier-section .section-title {
  color: #0E1017 !important;
  font-size: clamp(2rem, 3.2vw, 2.85rem) !important;
  margin-bottom: 12px !important;
}
.bespoke-atelier-section .section-desc {
  color: #525866 !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
}
.atelier-cuts-wrapper {
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  border-radius: 14px;
  padding: 22px 26px 26px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(14, 16, 23, 0.04);
}
.atelier-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F0EBE0;
}
.atelier-step-kicker {
  color: #8C6B28 !important;
}
.atelier-selected-readout {
  font-size: 0.84rem;
  color: #525866;
}
.atelier-selected-readout strong {
  color: #0E1017;
  font-weight: 700;
}
.atelier-cuts-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .atelier-cuts-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 600px) {
  .atelier-cuts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.diamond-cut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px 14px;
  background: #FAF8F5;
  border: 1.5px solid #E6DFC8;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #12141C;
}
.diamond-cut-btn:hover {
  border-color: #C5A059;
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(197, 160, 89, 0.14);
}
.diamond-cut-btn.is-active,
.diamond-cut-btn.active {
  background: #0E1017 !important;
  border-color: #C5A059 !important;
  color: #FAF8F5 !important;
  box-shadow: 0 14px 28px rgba(14, 16, 23, 0.22) !important;
}
.cut-svg-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #8C6B28;
  transition: transform 0.25s ease, color 0.25s ease;
}
.diamond-cut-btn.is-active .cut-svg-wrap,
.diamond-cut-btn.active .cut-svg-wrap {
  color: #E5C883 !important;
  transform: scale(1.08);
}
.gem-cut-svg {
  width: 44px;
  height: 44px;
  display: block;
}
.cut-name-en {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 2px;
}
.cut-name-el {
  font-size: 0.7rem;
  color: #6E7585;
  font-weight: 500;
}
.diamond-cut-btn.is-active .cut-name-el,
.diamond-cut-btn.active .cut-name-el {
  color: #D6C39A !important;
}

/* Workspace 2-Column Main Grid */
.atelier-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1024px) {
  .atelier-main-grid {
    grid-template-columns: 1fr;
  }
}
.atelier-controls-card,
.atelier-summary-card {
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 12px 34px rgba(14, 16, 23, 0.05);
}
.atelier-control-group {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #F0EBE0;
}
.atelier-control-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.atelier-group-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8C6B28;
  margin-bottom: 12px;
}
.atelier-origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.diamond-origin-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 10px;
  background: #FAF8F5;
  border: 1.5px solid #E6DFC8;
  color: #12141C;
  cursor: pointer;
  transition: all 0.2s ease;
}
.diamond-origin-btn:hover {
  border-color: #C5A059;
  background: #FFFFFF;
}
.diamond-origin-btn.is-active,
.diamond-origin-btn.active {
  background: #0E1017 !important;
  border-color: #C5A059 !important;
  color: #FAF8F5 !important;
}
.origin-svg-emblem {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(197, 160, 89, 0.14);
  color: #8C6B28;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.diamond-origin-btn.is-active .origin-svg-emblem {
  background: rgba(212, 175, 55, 0.18);
  color: #E5C883;
}
.origin-text-box strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}
.origin-text-box small {
  display: block;
  font-size: 0.72rem;
  color: #6E7585;
  margin-top: 2px;
}
.diamond-origin-btn.is-active .origin-text-box small {
  color: #D6C39A;
}

/* Custom 3D Metallic Gold Swatch Discs (Zero Childish Emojis) */
.atelier-metals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .atelier-metals-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ring-metal-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FAF8F5;
  border: 1.5px solid #E6DFC8;
  border-radius: 10px;
  color: #12141C;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.ring-metal-btn:hover {
  border-color: #C5A059;
  background: #FFFFFF;
}
.ring-metal-btn.is-active,
.ring-metal-btn.active {
  background: #0E1017 !important;
  border-color: #C5A059 !important;
  color: #FAF8F5 !important;
}
.metal-swatch-disc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.16);
}
.swatch-white-gold {
  background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #E2E8F0 45%, #94A3B8 100%);
  color: #1E293B;
  border: 1px solid #CBD5E1;
}
.swatch-yellow-gold {
  background: radial-gradient(circle at 30% 30%, #FFF6D6 0%, #E5C158 45%, #9E741B 100%);
  color: #2A1B04;
  border: 1px solid #D4AF37;
}
.swatch-rose-gold {
  background: radial-gradient(circle at 30% 30%, #FFE8E0 0%, #E6A992 45%, #A6634B 100%);
  color: #36180E;
  border: 1px solid #D99B84;
}
.metal-btn-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.atelier-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #525866;
  margin-bottom: 8px;
}
.atelier-slider-header strong {
  color: #0E1017;
  font-weight: 700;
}
.atelier-range-input {
  width: 100%;
  accent-color: #C5A059;
  cursor: pointer;
}
.atelier-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #6E7585;
  margin-top: 4px;
}
.atelier-engraving-field {
  margin-bottom: 16px;
}
.atelier-engraving-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #525866;
  margin-bottom: 6px;
}
.atelier-engraving-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid #E2D9C5;
  background: #FAF8F5;
  color: #12141C;
  font-size: 0.88rem;
}
.atelier-engraving-field input:focus {
  outline: none;
  border-color: #C5A059;
  background: #FFFFFF;
}
.atelier-sizer-box {
  background: #FAF8F5;
  border: 1px solid #E6DFC8;
  border-radius: 10px;
  padding: 14px;
}
.atelier-sizer-guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: #047857;
}

/* Right Column: Summary Header + Dual Photo/Blueprint Stage */
.atelier-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #F0EBE0;
}
.atelier-summary-kicker {
  color: #8C6B28 !important;
  margin-bottom: 4px !important;
}
#config-summary-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0E1017 !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
#config-summary-specs {
  font-size: 0.8rem;
  color: #525866;
}
.atelier-price-box {
  text-align: right;
  flex-shrink: 0;
}
.atelier-price-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E7585;
}
.atelier-price-val {
  font-size: 1.9rem;
  font-weight: 700;
  color: #0E1017;
  line-height: 1.1;
}
.atelier-price-note {
  font-size: 0.7rem;
  color: #047857;
  font-weight: 600;
  margin-top: 2px;
}
.config-visual-ring-stage {
  background: #FAF8F5 !important;
  border: 1px solid #E6DFC8 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.atelier-stage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .atelier-stage-split {
    grid-template-columns: 1fr;
  }
}
.atelier-photo-pedestal,
.atelier-blueprint-box {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  border-radius: 10px;
  padding: 28px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210px;
}
.pedestal-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C6B28;
}
#config-cut-photo {
  width: 100%;
  max-height: 165px;
  object-fit: contain !important;
  transition: transform 0.35s ease;
}
.atelier-photo-pedestal:hover #config-cut-photo {
  transform: scale(1.06);
}
.atelier-stage-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #525866;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  border-radius: 8px;
}
.config-mm-scale-pill {
  background: #FFFFFF !important;
  border: 1px solid #E6DFC8 !important;
  color: #0E1017 !important;
}
.atelier-engraving-preview-band {
  background: #FAF8F5;
  border: 1px dashed #D5C8A8;
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  margin-bottom: 16px;
}
.engraving-band-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8C6B28;
  margin-bottom: 4px;
}
.engraving-band-script {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 600;
  color: #0E1017;
}
.atelier-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.atelier-primary-cta {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0E1017 !important;
  color: #FAF8F5 !important;
  border: 1.5px solid #C5A059 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.atelier-primary-cta:hover {
  background: #C5A059 !important;
  color: #0E1017 !important;
}
.atelier-secondary-cta {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FAF8F5 !important;
  color: #0E1017 !important;
  border: 1px solid #D5C8A8 !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none;
}
.atelier-omnichannel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .atelier-omnichannel-grid {
    grid-template-columns: 1fr;
  }
}
.atelier-omni-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  color: #12141C;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.atelier-omni-btn:hover {
  border-color: #C5A059;
}
.atelier-boutiques-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F0EBE0;
  font-size: 0.72rem;
  color: #525866;
}

/* 5. Official Social Media Reels Auto-Play Section (#social-reels) */
.social-reels-section {
  background: #FAF8F5;
  padding: 84px 0 92px;
  border-top: 1px solid rgba(197, 160, 89, 0.25);
  border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}
.social-reels-section .section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 44px;
}
.social-reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) {
  .social-reels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .social-reels-grid {
    grid-template-columns: 1fr;
  }
}
.social-reel-card {
  background: #FFFFFF;
  border: 1px solid #E2D9C5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(14, 16, 23, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.social-reel-card:hover {
  transform: translateY(-4px);
  border-color: #C5A059;
  box-shadow: 0 22px 48px rgba(14, 16, 23, 0.14);
}
.social-reel-media {
  position: relative;
  aspect-ratio: 9 / 15;
  background: #0B0C10;
  overflow: hidden;
}
.social-reel-media video.js-scroll-reel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-reel-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-reel-author {
  background: rgba(10, 11, 15, 0.78);
  backdrop-filter: blur(8px);
  color: #FAF8F5;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.social-reel-sound-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #E5C883;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.social-reel-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 36px 16px 16px;
  background: linear-gradient(to top, rgba(8, 9, 12, 0.95) 0%, rgba(8, 9, 12, 0.68) 60%, transparent 100%);
  color: #FAF8F5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.social-reel-cat {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E5C883;
  margin-bottom: 3px;
}
.social-reel-meta h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}
.social-reel-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #E5C883;
}
.social-reel-action {
  padding: 7px 12px;
  border-radius: 6px;
  background: #C5A059;
  color: #08090C;
  border: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.social-reel-action:hover {
  background: #E5C883;
}
.social-reels-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.social-reels-footer .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E2D9C5;
  color: #0E1017;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.social-reels-footer .btn-secondary:hover {
  background: #0E1017;
  color: #E5C883;
  border-color: #C5A059;
}


/* ==========================================================================
   MAISON HARITIDIS v21 — SHOP THE LOOK (LIVE VIDEO + 3 COMPLEMENTARY PRODUCTS)
   ========================================================================== */
.shop-the-look-section {
  background: #FAF8F5 !important;
  color: #12141C !important;
  padding: 84px 0 92px !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
}
.shop-the-look-section .section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 44px;
}
.shop-the-look-section .section-title {
  color: #0E1017 !important;
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  margin-bottom: 12px !important;
}
.shop-the-look-section .section-desc {
  color: #525866 !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
}
.shop-look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1080px) {
  .shop-look-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}
.shop-look-card {
  background: #FFFFFF;
  border: 1px solid #E2D9C5;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 36px rgba(14, 16, 23, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.shop-look-card:hover {
  transform: translateY(-4px);
  border-color: #C5A059;
  box-shadow: 0 22px 48px rgba(14, 16, 23, 0.12);
}
.shop-look-video-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #0A0B0E;
  overflow: hidden;
}
.shop-look-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-look-video-top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-look-pill {
  background: rgba(10, 11, 15, 0.82);
  backdrop-filter: blur(8px);
  color: #E5C883;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shop-look-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 32px 16px 14px;
  background: linear-gradient(to top, rgba(8, 9, 12, 0.94) 0%, rgba(8, 9, 12, 0.6) 65%, transparent 100%);
  color: #FAF8F5;
}
.shop-look-video-caption h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  margin-bottom: 3px !important;
}
.shop-look-video-caption p {
  font-size: 0.74rem;
  color: #E5C883;
  margin: 0;
}
.shop-look-items-body {
  padding: 16px 18px 10px;
  flex: 1 1 auto;
}
.shop-look-items-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C6B28;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #F0EBE0;
}
.shop-look-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #EFEAE0;
  background: #FAF8F5;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.shop-look-item-row:hover {
  border-color: #C5A059;
  background: #FFFFFF;
}
.shop-look-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: contain !important;
  background: #FFFFFF;
  border: 1px solid #E6DFC8;
  padding: 3px;
  flex-shrink: 0;
}
.shop-look-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.shop-look-item-role {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8C6B28;
  margin-bottom: 2px;
}
.shop-look-item-info strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0E1017;
  line-height: 1.25;
  white-space: normal;
}
.shop-look-item-price {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #525866;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.shop-look-item-add {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  background: #0E1017 !important;
  color: #E5C883 !important;
  border: 1px solid #C5A059 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.shop-look-item-add:hover {
  background: #C5A059 !important;
  color: #0E1017 !important;
}
.shop-look-card-footer {
  padding: 14px 18px 18px;
  border-top: 1px solid #F0EBE0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.shop-look-total span {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E7585;
}
.shop-look-total strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0E1017;
  font-variant-numeric: tabular-nums;
}
.shop-look-footer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-look-bundle-btn {
  padding: 9px 14px;
  border-radius: 8px;
  background: #0E1017;
  color: #E5C883;
  border: 1px solid #C5A059;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.shop-look-bundle-btn:hover {
  background: #C5A059;
  color: #0E1017;
}
.shop-look-modal-btn {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: #FAF8F5 !important;
  color: #0E1017 !important;
  border: 1px solid #D5C8A8 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.shop-look-modal-btn:hover {
  border-color: #0E1017 !important;
  background: #FFFFFF !important;
}