/**
 * SPECTICO | Brand Book Editorial Design System
 * Primary Serif: Fraunces
 * Secondary Sans: DM Sans
 * Palette: Jet Black (#000000), Pure White (#FFFFFF), Snow White (#FAF9F6), Umber Brown (#8B7355)
 * Aesthetic: Warm Minimalism · Editorial Sophistication · Quiet Luxury · Sun-Washed Neutrals
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&display=swap');

:root {
  /* Strict Brand Book Color Palette */
  --jet-black: #000000;
  --pure-white: #FFFFFF;
  --snow-white: #FAF9F6;
  --umber-brown: #8B7355;

  --bg-primary: #FAF9F6;
  --bg-secondary: #F2EFE9;
  --bg-surface: #FFFFFF;
  --bg-glass: rgba(250, 249, 246, 0.96);

  --text-primary: #000000;
  --text-secondary: #4A4640;
  --text-muted: #787268;

  --accent-champagne: #8B7355;
  --accent-umber: #8B7355;
  --accent-taupe: #6E5D47;
  --accent-emerald: #2C4C3E;
  --accent-rose: #8C2D2D;
  --btn-dark: #000000;

  --border-subtle: #E5E0D8;
  --border-strong: #000000;
  --border-gold: rgba(139, 115, 85, 0.35);

  /* Typography */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-dm: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Elevation : reserved strictly for floating menus & modals */
  --shadow-soft: none;
  --shadow-card: none;
  --shadow-editorial: 0 14px 36px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* Subtle Architectural Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 2px;

  /* Motion */
  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-menu: opacity 0.2s ease, transform 0.2s ease;
}

/* ============================================================================
   1. RESET & BASE TYPOGRAPHY
   ============================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* WORDPRESS WRAPPER & FULL-WIDTH DESKTOP ARCHITECTURE RESET
   Ensures the entire page background is full-bleed without boxed grey gutters */
#page,
.site,
.site-content,
.site-main,
.entry-content,
.wp-site-blocks,
.wp-block-group,
.spectico-theme-root {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

section,
.site-header,
.site-footer,
.announcement-bar,
.hero-slider-section,
.hero-video-section,
.spectico-video-hero-section,
.spectico-category-strip,
.spectico-featured-catalog,
.spectico-destinations-section,
.spectico-appointments-section,
.spectico-woocommerce-container,
.spectico-pillars-strip {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary, #FAF9F6) !important;
  color: var(--text-primary);
  overflow-x: clip;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

section[id], div[id], article[id], main[id] {
  scroll-margin-top: calc(var(--header-height, 120px) + 20px);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary, #FAF9F6) !important;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Guard against WordPress error handler or external boxed container clamping */
body#error-page,
#error-page {
  max-width: 100% !important;
}

h1, h2, h3, h4, .serif-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

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

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: var(--font-sans);
}

.container,
.spectico-container {
  width: 100%;
  max-width: 1440px !important;
  margin-inline: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box;
}

/* Responsive inner content pattern */
.spectico-container-fluid {
  width: calc(100% - clamp(32px, 4vw, 56px)) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Editorial Rhythm Spacing */
.section-padding {
  padding: 96px 0;
}

.section-padding-lg {
  padding: 120px 0;
}

.section-padding-compact {
  padding: 56px 0;
}

.eyebrow-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-umber);
  margin-bottom: 12px;
}

.section-header-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-header-center {
  text-align: left;
  max-width: 680px;
  margin-bottom: 48px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 580px;
}

/* ============================================================================
   2. COHERENT 3-TIER BUTTON SYSTEM (SECTION 48)
   ============================================================================ */
/* Tier 1: Primary (Jet Black fill, subtle satin highlight, Pure White text) */
.btn-editorial-dark,
.btn-editorial-champagne,
.btn-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.18) 100%), var(--jet-black);
  color: var(--pure-white);
  border: 1px solid var(--jet-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.24s ease,
              border-color 0.24s ease,
              box-shadow 0.24s ease;
  text-decoration: none;
}

.btn-editorial-dark:hover,
.btn-editorial-champagne:hover,
.btn-card-add:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.2) 100%), var(--umber-brown);
  border-color: var(--umber-brown);
  color: var(--pure-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px rgba(139, 115, 85, 0.25);
  transform: translateY(-1px);
}

.btn-editorial-dark:disabled,
.btn-editorial-champagne:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tier 2: Secondary (Transparent/White fill, 1px Jet Black border) */
.btn-editorial-outline,
.btn-card-tryon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  background-color: transparent;
  color: var(--jet-black);
  border: 1px solid var(--jet-black);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}

.btn-editorial-outline:hover,
.btn-card-tryon:hover {
  background-color: var(--jet-black);
  color: var(--pure-white);
}

/* Tier 3: Tertiary (Editorial Text Link) */
.btn-editorial-link,
.btn-link-editorial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--jet-black);
  padding: 4px 0;
  color: var(--jet-black);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}

.btn-editorial-link:hover,
.btn-link-editorial:hover {
  color: var(--umber-brown);
  border-bottom-color: var(--umber-brown);
}

/* ============================================================================
   3. ANNOUNCEMENT BAR & FASHION HEADER (SECTIONS 11, 12, 13, 21)
   ============================================================================ */
.announcement-bar {
  background-color: var(--jet-black);
  color: var(--snow-white);
  min-height: 32px;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.announcement-bar a[href^="mailto:"],
a[href^="mailto:teamspectico@gmail.com"] {
  text-transform: lowercase !important;
}

.announcement-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1440px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box;
}

.announcement-highlight {
  color: #D6C5B0;
  font-weight: 600;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

/* ROW 2 : MAIN HEADER BAR (LOGO | WIDE CENTERED SEARCH | UTILITY ACTIONS) */
.header-main,
.header-inner {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 640px) 1fr;
  align-items: center;
  height: 68px;
  gap: 24px;
  max-width: 1440px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-logo,
.brand-block {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: 100%;
  cursor: pointer;
}

.brand-logo-img {
  width: 35.5px;
  height: 35.5px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-wordmark,
.brand-logo-text {
  font-family: var(--font-serif);
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--jet-black);
  line-height: 1;
  display: block;
}

.brand-tagline,
.brand-subtext {
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--umber-brown);
  display: block;
  margin-top: 3px;
  line-height: 1;
  white-space: nowrap;
}

/* Center Zone : Wide E-Commerce Search Bar */
.header-search-container {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 640px;
}

.header-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0 10px 0 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-search-box:focus-within {
  border-color: var(--jet-black);
  box-shadow: 0 0 0 2px rgba(24, 24, 24, 0.06);
}

.header-search-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.18s ease;
}

.header-search-icon-btn:hover {
  color: var(--jet-black);
}

.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--jet-black);
  padding: 0 8px 0 4px;
}

.header-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.header-search-clear-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.header-search-clear-btn:hover {
  background: var(--border-subtle);
  color: var(--jet-black);
}

.header-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: var(--shadow-dropdown);
  z-index: 2400;
  max-height: 420px;
  overflow-y: auto;
}

.header-search-results-list {
  display: flex;
  flex-direction: column;
}

.header-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.header-search-item:hover {
  background: var(--bg-secondary);
}

.header-search-item-thumb {
  width: 44px;
  height: 32px;
  object-fit: contain;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  flex-shrink: 0;
}

.header-search-lens-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--umber-brown);
}

.header-search-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-search-item-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jet-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-search-item-meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.header-search-item-price {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jet-black);
  flex-shrink: 0;
}

.header-search-footer {
  padding: 8px 14px;
  background: var(--bg-secondary);
  text-align: center;
}

.header-search-view-all {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--jet-black);
  cursor: pointer;
}

.header-search-empty {
  padding: 18px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ROW 3 : PRIMARY CATEGORY NAVIGATION BAR */
.header-nav-row {
  position: relative;
  width: 100%;
  background: var(--bg-glass);
}

.header-nav-inner {
  max-width: 1440px !important;
  width: 100%;
  height: 44px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.nav-item-wrapper {
  position: static;
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jet-black);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.18s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 4px;
  right: 4px;
  height: 1px;
  background-color: var(--jet-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.nav-item-wrapper:hover .nav-link,
.nav-link:hover {
  color: var(--umber-brown);
}

.nav-item-wrapper:hover .nav-link::after {
  transform: scaleX(1);
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  line-height: 1;
  height: 1em;
  opacity: 0.6;
  transform: none;
}

/* Editorial Mega Menu (Section 21) */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #FAF9F6;
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  padding: 36px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: var(--transition-menu), visibility 0.2s;
  z-index: 1100;
  pointer-events: none;
}

.nav-item-wrapper:hover .mega-menu,
.nav-item-wrapper:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-grid-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.2fr;
  gap: 36px;
  max-width: 1440px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
  box-sizing: border-box;
}

.mega-col-title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--umber-brown);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

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

.mega-links a {
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-weight: 400;
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}

.mega-links a:hover {
  color: var(--jet-black);
  transform: translateX(3px);
}

.mega-featured-box {
  background: var(--bg-secondary);
  padding: 18px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mega-featured-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 12px;
}

.mega-featured-box h4 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 2px 0 4px 0;
}

.mega-featured-box p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Header Action Controls (Right Side : Row 2) */
.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: 100%;
}

.header-icon-btn,
.action-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--jet-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.header-icon-btn svg,
.action-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.header-icon-btn:hover,
.action-icon-btn:hover {
  color: var(--umber-brown);
  background: var(--bg-secondary);
}

.header-account-btn,
.header-account-btn.logged-in {
  width: auto;
  height: 38px;
  padding: 0 10px;
  gap: 7px;
  border: 1px solid transparent;
}

.header-account-btn.logged-in {
  border-color: var(--border-subtle);
}

.account-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.account-login-label,
.account-user-name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--jet-black);
  line-height: 1;
  white-space: nowrap;
}

.badge-counter {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--jet-black);
  color: var(--pure-white);
  font-size: 0.6rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Floating Account Dropdown (Section 13) */
.account-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}

.account-dropdown-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 236px;
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: 8px;
  z-index: 2500;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.account-dropdown-card.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.account-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jet-black);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.account-menu-item:hover {
  background: var(--bg-secondary);
  color: var(--umber-brown);
}

.account-menu-item.dropdown-auth-item {
  background: var(--jet-black);
  color: var(--pure-white);
  margin-bottom: 4px;
}

.account-menu-item.dropdown-auth-item:hover {
  background: var(--umber-brown);
  color: var(--pure-white);
}

.account-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.account-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.mobile-hamburger-btn {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--jet-black);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================================
   4. SECTION 1: FULL-WIDTH CINEMATIC HERO VIDEO (SECTIONS 6 & 7)
   ============================================================================ */
.hero-slider-section,
.hero-video-section {
  position: relative;
  width: 100%;
  background-color: #12100e;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  min-height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

.hero-fullwidth-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  overflow: hidden;
  background-color: #12100e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.hero-fullwidth-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: #12100e;
  margin: 0;
  padding: 0;
  border: none;
}

.hero-video-stage {
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
}

.hero-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  overflow: hidden;
  background-color: #12100e;
}

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

.hero-video-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border-subtle, #e5e0d8);
  background: var(--bg-primary, #ffffff);
  color: var(--jet-black, #1c1917);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.hero-video-toggle:hover {
  background: var(--jet-black, #1c1917);
  color: #ffffff;
  border-color: var(--jet-black, #1c1917);
}

.hero-video-toggle-icon {
  font-size: 0.72rem;
  line-height: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-color: var(--bg-secondary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  display: flex;
  align-items: center;
  padding: 56px 0 84px 0;
}

.hero-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.hero-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.hero-copy-col {
  max-width: 540px;
}

.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--jet-black);
  margin: 6px 0 20px 0;
}

.hero-headline span {
  font-style: italic;
  font-weight: 300;
}

.hero-description {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 460px;
}

.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-primary);
}

.hero-eyewear-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active .hero-eyewear-svg:hover {
  transform: scale(1.02);
}

.hero-slider-nav {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 10;
}

.slider-nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-dot {
  width: 24px;
  height: 2px;
  background: rgba(0, 0, 0, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.slider-dot.active {
  width: 44px;
  background: var(--jet-black);
}

.slider-arrows {
  display: flex;
  gap: 8px;
}

.slider-arrow-btn {
  width: 38px;
  height: 38px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.slider-arrow-btn:hover {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

/* ============================================================================
   5. SECTION 2: MINIMAL CATEGORY NAVIGATION STRIP
   ============================================================================ */
.category-strip-section {
  background: var(--snow-white);
  border-bottom: 1px solid var(--border-subtle);
  padding: 22px 0;
}

.category-strip-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-strip-list::-webkit-scrollbar {
  display: none;
}

.category-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.category-strip-item:hover {
  color: var(--jet-black);
  border-bottom-color: var(--jet-black);
}

.category-strip-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--umber-brown);
}

/* ============================================================================
   6. SECTION 3: CURATED COLLECTIONS (MEN, WOMEN, KIDS : OPEN COMPOSITION)
   ============================================================================ */
.collections-grid-3 {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.collection-card {
  cursor: pointer;
  group: true;
}

.collection-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-secondary);
  margin-bottom: 18px;
}

.collection-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.collection-card:hover .collection-img-wrap img {
  transform: scale(1.025);
}

.collection-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.collection-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--jet-black);
  margin: 8px 0 4px 0;
}

.collection-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* ============================================================================
   7. SECTION 4: PRODUCT GRID & FILTERS (FASHION COMMERCE : SECTION 16 & 49)
   ============================================================================ */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-pill:hover {
  border-color: var(--jet-black);
  color: var(--jet-black);
}

.filter-pill.active {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.catalog-filter-bar {
  padding: 14px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.active-filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.active-filter-count {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.active-filter-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.active-filter-tag {
  padding: 4px 10px;
  background: var(--bg-secondary);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--jet-black);
}

.clear-filters-btn {
  background: none;
  border: none;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--umber-brown);
  text-decoration: underline;
  cursor: pointer;
}

.category-context-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.products-grid-4,
.products-grid,
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Unboxed Fashion-Commerce Product Card */
.product-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  position: relative;
}

.product-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
}

.product-card:hover .product-img-wrapper {
  border-color: rgba(139, 115, 85, 0.32);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(139, 115, 85, 0.08);
  transform: translateY(-2px);
}

.product-action-floating {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.icon-circle-btn {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  color: var(--jet-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.icon-circle-btn:hover,
.icon-circle-btn.active {
  background: var(--pure-white);
  color: var(--jet-black);
}

.product-img-box {
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-img-box img {
  transform: scale(1.025);
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.product-title {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--jet-black);
  cursor: pointer;
  line-height: 1.35;
}

.product-title:hover {
  color: var(--umber-brown);
}

.current-price {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--jet-black);
  white-space: nowrap;
}

.product-category-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.product-card-footer {
  margin-top: auto;
}

.card-cta-group {
  display: flex;
  gap: 8px;
}

.card-cta-group .btn-card-add {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.7rem;
}

.card-cta-group .btn-card-tryon {
  padding: 10px 14px;
  font-size: 0.7rem;
}

/* ============================================================================
   8. SECTION 5: ASYMMETRIC EDITORIAL STORY (THE SPECTICO EDIT)
   ============================================================================ */
.editorial-story-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.editorial-story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.editorial-story-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--jet-black);
}

.editorial-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-pillars-list {
  margin-top: 36px;
  border-top: 1px solid var(--border-subtle);
}

.editorial-pillar-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: color 0.18s ease;
}

.editorial-pillar-row:hover h4 {
  color: var(--umber-brown);
}

.pillar-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--umber-brown);
}

.editorial-pillar-row h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: 4px;
  transition: color 0.18s ease;
}

.editorial-pillar-row p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================================
   9. SECTION 6: SHOP BY FRAME SHAPE & FACE SHAPE STYLING
   ============================================================================ */
.shapes-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.shape-card {
  position: relative;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.28s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.shape-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background-color 0.25s ease;
}

.shape-img-box {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease;
}

.shape-product-img {
  max-width: 92%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.shape-info-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.shape-name {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jet-black);
}

.shape-tag {
  font-family: var(--font-sans);
  font-size: 0.67rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.shape-action {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--umber-brown);
  margin-top: 6px;
  opacity: 0.85;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.shape-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 115, 85, 0.42);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(139, 115, 85, 0.08);
}

.shape-card:hover::before {
  background: var(--umber-brown);
}

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

.shape-card:hover .shape-action {
  color: var(--jet-black);
  opacity: 1;
  transform: translateX(2px);
}

.shape-card.active {
  border-color: var(--jet-black);
  background: var(--pure-white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07), 0 0 0 1px var(--jet-black);
}

.shape-card.active::before {
  background: var(--jet-black);
}

/* Face Shape Tabs & Recommendations */
.face-shape-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.face-shape-tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.face-shape-tab-btn:hover {
  border-color: var(--jet-black);
  color: var(--jet-black);
}

.face-shape-tab-btn.active {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.face-recs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

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

.face-rec-item {
  display: flex;
  flex-direction: column;
}

.face-rec-img-wrap {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  overflow: hidden;
  margin-bottom: 12px;
  cursor: pointer;
}

.face-rec-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.face-rec-item:hover .face-rec-img-wrap img {
  transform: scale(1.025);
}

/* ============================================================================
   10. SECTION 7: LIFESTYLE / DUAL CATEGORY CAMPAIGN
   ============================================================================ */
.dual-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.campaign-panel {
  display: flex;
  flex-direction: column;
}

.campaign-img-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary);
  margin-bottom: 22px;
}

.campaign-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.campaign-panel:hover .campaign-img-frame img {
  transform: scale(1.025);
}

.campaign-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  margin-bottom: 8px;
}

.campaign-panel p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 480px;
}

/* ============================================================================
   11. SECTION 8: OPTICAL BOUTIQUE SERVICES (SECTION 26)
   ============================================================================ */
.services-boutique-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 36px;
}

.service-column h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.service-item-list {
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.service-item-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.service-item-row strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--jet-black);
  margin-bottom: 4px;
}

.service-item-row p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================================
   12. SECTION 9: STORE EXPERIENCE (KHURJA VS GHAZIABAD : SECTIONS 27–30)
   ============================================================================ */
.stores-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.store-card-box {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store-meta-table {
  margin: 20px 0;
  border-top: 1px solid var(--border-subtle);
}

.store-meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}

.store-meta-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Appointment Engine UI */
.appointment-box-container {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 44px;
  max-width: 100%;
}

.appointment-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 899px) {
  .appointment-split-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.store-switcher-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.store-switcher-btn {
  padding: 14px 18px;
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
  text-align: center;
}

.store-switcher-btn.active {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.slot-btn {
  padding: 11px 10px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--jet-black);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.slot-btn.available:hover {
  border-color: var(--jet-black);
}

.slot-btn.selected {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.slot-btn.disabled {
  background: var(--bg-secondary);
  color: var(--text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
}

.slot-alert-banner {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-left: 2px solid var(--umber-brown);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ============================================================================
   13. SECTION 10: EDITORIAL JOURNAL (SECTION 42)
   ============================================================================ */
.journal-editorial-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.journal-article {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.journal-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary);
  margin-bottom: 16px;
}

.journal-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.journal-article:hover .journal-img-wrap img {
  transform: scale(1.025);
}

.journal-article h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin: 4px 0 8px 0;
  line-height: 1.25;
}

.journal-article p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* ============================================================================
   14. FORMS & BADGES (SECTION 47)
   ============================================================================ */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group-item {
  margin-bottom: 18px;
}

.form-label-text {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--jet-black);
  margin-bottom: 6px;
}

.form-input-control,
.form-select-control,
.form-textarea-control {
  width: 100%;
  padding: 12px 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--jet-black);
  transition: border-color 0.18s ease;
}

.form-input-control:focus,
.form-select-control:focus,
.form-textarea-control:focus {
  outline: none;
  border-color: var(--jet-black);
}

.badge-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-secondary);
  color: var(--jet-black);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-express {
  background: var(--jet-black);
  color: var(--pure-white);
}

/* ============================================================================
   15. MODALS: PRODUCT DETAIL, SEARCH, WISHLIST, AUTH, CART (SECTIONS 14–19, 32)
   ============================================================================ */
.modal-backdrop,
.spectico-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop.open,
.spectico-modal-overlay.open {
  display: flex;
}

.modal-window {
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-editorial);
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.modal-close-x {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-x:hover {
  background: var(--jet-black);
  color: var(--pure-white);
}

.pdp-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.pdp-spec-grid span {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.pdp-spec-grid strong {
  font-size: 0.88rem;
  color: var(--jet-black);
}

/* Search Overlay */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
  max-height: 52vh;
  overflow-y: auto;
}

.search-result-card {
  cursor: pointer;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 12px;
  transition: border-color 0.18s ease;
}

.search-result-card:hover {
  border-color: var(--jet-black);
}

.search-result-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 10px;
}

.search-result-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--jet-black);
  margin-bottom: 4px;
}

.search-result-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Wishlist Modal */
.wishlist-empty-state {
  text-align: center;
  padding: 56px 20px;
}

.wishlist-item-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.wishlist-item-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
}

/* Split Editorial Auth Modal */
.auth-split-window {
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-editorial);
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  position: relative;
}

.auth-editorial-panel {
  background: var(--jet-black);
  color: var(--snow-white);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-form-panel {
  padding: 44px 40px;
  background: var(--pure-white);
}

.auth-input-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  font-size: 0.9rem;
  color: var(--jet-black);
  margin-bottom: 12px;
}

.auth-input-field:focus {
  outline: none;
  border-color: var(--jet-black);
}

.checkout-saved-address-card {
  padding: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  margin-bottom: 10px;
  cursor: pointer;
}

.checkout-saved-address-card.selected {
  border-color: var(--jet-black);
  background: var(--snow-white);
}

.checkout-address-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--bg-secondary);
}

/* ============================================================================
   16. SECTION 12: CLEAN 5-COLUMN FOOTER (SECTION 33)
   ============================================================================ */
.site-footer {
  background-color: #1A1815;
  color: #FAF9F6;
  padding: 84px 0 40px 0;
}

.footer-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-col-item {
  display: flex;
  flex-direction: column;
}

.footer-accordion-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  pointer-events: none;
  cursor: default;
}

.footer-accordion-icon {
  display: none;
}

.footer-accordion-panel {
  display: block;
}

.footer-col-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #D6C5B0;
  margin-bottom: 18px;
}

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

.footer-links a {
  font-size: 0.85rem;
  color: rgba(250, 249, 246, 0.78);
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--pure-white);
}

.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
  color: rgba(250, 249, 246, 0.65);
}

/* Mobile Navigation Drawer */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2800;
  display: none;
}

.mobile-drawer-overlay.open {
  display: block;
}

.mobile-drawer-panel {
  width: 310px;
  max-width: 86vw;
  height: 100%;
  background: var(--snow-white);
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-nav-list {
  list-style: none;
  margin-top: 20px;
}

.mobile-nav-list li {
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-nav-list a {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Toast Notification */
.spectico-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--jet-black);
  color: var(--pure-white) !important;
  border: 1px solid var(--umber-brown);
  padding: 12px 20px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  z-index: 5000;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.spectico-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   17. COMPREHENSIVE RESPONSIVE ARCHITECTURE
   Tier 1: Phone Storefront (<= 639px) - Chrome Android Desktop site OFF
   Tier 2: Intermediate Tablet (640px - 899px)
   Tier 3: Desktop Storefront (>= 900px) - Chrome Android Desktop site ON (980px)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TIER 3: DESKTOP & WIDE STOREFRONT (>= 900px)
   Adapts for Android Chrome Desktop site mode (980px) through 1920px+ monitors
   ---------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .mobile-hamburger-btn {
    display: none !important;
  }
  .header-nav-row {
    display: block !important;
  }
  .header-main,
  .header-inner {
    display: grid !important;
    grid-template-columns: 1fr minmax(280px, 600px) 1fr !important;
    height: 68px !important;
    align-items: center !important;
    gap: clamp(12px, 1.8vw, 24px) !important;
    padding: 0 clamp(16px, 2.5vw, 40px) !important;
  }
  .header-nav-inner {
    padding: 0 clamp(12px, 2vw, 36px) !important;
    overflow: visible !important;
  }
  .primary-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: clamp(5px, 0.9vw, 18px) !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .nav-item-wrapper {
    flex: 0 1 auto !important;
  }
  .nav-link {
    padding: 0 3px !important;
    font-size: clamp(0.61rem, 0.72vw, 0.72rem) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
  }
  .nav-caret {
    display: inline-block !important;
    font-size: 0.55rem !important;
    margin-left: 2px !important;
  }
  .section-header-box {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
    margin-bottom: 36px !important;
  }
  .filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .desktop-refine-selects {
    display: flex !important;
    gap: 8px !important;
  }
  .mobile-filter-sort-triggers {
    display: none !important;
  }
}

/* Intermediate Desktop (900px - 1199px) including Android Chrome 980px */
@media (min-width: 900px) and (max-width: 1199px) {
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 30px !important;
  }
  .collections-grid-3,
  .journal-editorial-grid,
  .services-boutique-grid,
  .face-recs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shapes-grid-7 {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Android Chrome Desktop Site Mode & Compact Desktop (900px - 1060px) */
@media (min-width: 900px) and (max-width: 1060px) {
  .header-nav-inner {
    padding: 0 4px !important;
    overflow: hidden !important;
  }
  .primary-nav {
    gap: 3px !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .nav-link {
    padding: 0 1px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  .nav-caret {
    display: none !important;
  }
  #showroom,
  .showroom-scroll-track,
  .showroom-sticky-stage,
  .showroom-perspective-viewport {
    overflow: hidden !important;
    overflow-x: clip !important;
  }
}

/* Wide Desktop (>= 1200px) */
@media (min-width: 1200px) {
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 22px !important;
    row-gap: 38px !important;
  }
}

/* ----------------------------------------------------------------------------
   TIER 2: TABLET / INTERMEDIATE LAYOUT (768px - 899px)
   ---------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
  .header-nav-row,
  .primary-nav {
    display: none !important;
  }
  .header-main,
  .header-inner {
    grid-template-columns: auto minmax(200px, 1fr) auto;
    gap: 14px;
    padding: 0 18px;
  }
  .mobile-hamburger-btn {
    display: inline-flex !important;
  }
  .section-header-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  .filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 28px;
  }
  .collections-grid-3,
  .journal-editorial-grid,
  .services-boutique-grid,
  .face-recs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shapes-grid-7 {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .desktop-refine-selects {
    display: none !important;
  }
  .mobile-filter-sort-triggers {
    display: flex !important;
  }
}

/* ----------------------------------------------------------------------------
   TIER 1: GENUINE PHONE STOREFRONT (< 768px)
   Active on Chrome Android when Desktop site is OFF (320px - 767.98px)
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .container {
    padding: 0 12px;
  }
  .section-padding,
  .section-padding-lg {
    padding: 44px 0;
  }

  /* Top Announcement Bar */
  .announcement-content {
    padding: 0 10px;
    justify-content: center;
    font-size: 0.72rem;
  }
  .announcement-content > div:last-child {
    display: none !important;
  }

  /* Header Structure */
  .header-nav-row,
  .primary-nav {
    display: none !important;
  }
  .header-main,
  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo actions"
      "search search";
    height: auto;
    padding: 8px 10px;
    gap: 8px 6px;
    border-bottom: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .brand-logo,
  .brand-block {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .brand-logo-img {
    width: 31px;
    height: 31px;
  }
  .brand-wordmark,
  .brand-logo-text {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .brand-tagline,
  .brand-subtext {
    font-size: 0.40rem;
    letter-spacing: 0.06em;
    display: block;
    white-space: nowrap;
  }
  .header-search-container {
    grid-area: search;
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }
  .header-search-box {
    height: 38px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .header-search-input {
    min-width: 0;
    width: 100%;
  }
  .header-actions {
    grid-area: actions;
    gap: 2px;
    display: flex;
    align-items: center;
  }
  .header-account-btn {
    padding: 0 4px;
  }
  .account-login-label {
    display: none !important;
  }
  .header-icon-btn,
  .action-icon-btn,
  .mobile-hamburger-btn {
    width: 32px;
    height: 32px;
  }
  .mobile-hamburger-btn {
    display: inline-flex !important;
  }

  /* Showroom Controls Cluster */
  .showroom-top-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .showroom-controls-cluster {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Hero Video */
  .hero-slider-section,
  .hero-video-section {
    min-height: auto;
    width: 100%;
  }
  .hero-fullwidth-video-container {
    aspect-ratio: 16 / 9;
    max-height: none;
    width: 100%;
  }
  .hero-fullwidth-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Section Header Box - Stacks Heading cleanly above Category Chips */
  .section-header-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
  }
  .section-header-box > div:first-child {
    width: 100% !important;
  }
  .eyebrow-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
  }
  .section-title {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    margin: 4px 0 0 0 !important;
  }
  .filter-pills,
  #category-filter-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .filter-pill {
    padding: 7px 13px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    touch-action: manipulation;
  }

  /* Filter and Sort Toolbar */
  .catalog-refine-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    margin-bottom: 18px !important;
  }
  .desktop-refine-selects {
    display: none !important;
  }
  .mobile-filter-sort-triggers {
    display: flex !important;
    align-items: center !important;
  }
  #catalog-sort-select {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
  }

  /* Product Grid: Genuine 2-column fashion store on mobile */
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 22px !important;
  }
  .product-card {
    width: 100% !important;
  }
  .product-img-wrapper {
    aspect-ratio: 4 / 3 !important;
  }
  .product-title,
  .product-card h3 {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }
  .product-price {
    font-size: 0.92rem !important;
  }
  .card-cta-group {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .btn-editorial-dark,
  .btn-editorial-outline {
    padding: 8px 10px !important;
    font-size: 0.68rem !important;
  }

  /* Showroom on Mobile */
  .showroom-top-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .showroom-controls-cluster {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .showroom-chapter-nav {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .showroom-chapter-nav::-webkit-scrollbar {
    display: none !important;
  }
  .showroom-nav-label {
    white-space: nowrap !important;
    font-size: 0.68rem !important;
    padding: 5px 9px !important;
    flex-shrink: 0 !important;
  }

  /* Grid Stackings */
  .hero-editorial-grid,
  .editorial-story-grid,
  .dual-showcase-grid,
  .stores-grid-2,
  .collections-grid-3,
  .face-recs-grid,
  .form-grid-2,
  .auth-split-window,
  .lenses-hero-banner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .store-card-box {
    padding: 20px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .store-meta-row {
    grid-template-columns: 85px 1fr !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
  }

  /* Product Detail Modal */
  #product-modal-view .modal-window {
    padding: 18px 14px 80px 14px !important;
  }
  #product-modal-view .editorial-story-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .wishlist-item-card {
    grid-template-columns: 64px 1fr !important;
  }
  .account-dropdown-card {
    right: 0 !important;
    width: 220px !important;
  }
}

/* Ultra-Compact Phone (< 350px) */
@media (max-width: 350px) {
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   18. ADVANCED E-COMMERCE UX: PDP, FIND YOUR FRAME, FILTERS & CONTACT LENSES
   ============================================================================ */
.catalog-refine-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.desktop-refine-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.refine-select {
  padding: 8px 12px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--jet-black);
  cursor: pointer;
}

.refine-select:focus {
  outline: none;
  border-color: var(--jet-black);
}

.mobile-filter-sort-triggers {
  display: none;
}

/* ============================================================================
   FIND YOUR FRAME : 4-STEP VISUAL GUIDED SELECTOR STYLING
   ============================================================================ */
.fyf-progress-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
}

.fyf-step-pill {
  padding: 10px 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fyf-step-pill .fyf-step-num {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.7;
}

.fyf-step-pill.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.18) 100%), var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fyf-step-pill.completed {
  border-color: rgba(139, 115, 85, 0.4);
  color: var(--jet-black);
  background: var(--bg-secondary);
}

.fyf-step-pill .fyf-step-check {
  font-size: 0.75rem;
  color: var(--umber-brown);
  font-weight: 700;
}

.fyf-step-header {
  margin-bottom: 24px;
}

.fyf-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--jet-black);
  margin: 6px 0 6px 0;
}

.fyf-subhead {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 580px;
}

.fyf-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .fyf-category-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.fyf-category-card {
  position: relative;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.fyf-category-card:hover {
  transform: translateY(-6px);
  border-color: var(--umber-brown);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--umber-brown);
}

.fyf-category-card.selected {
  border-color: var(--jet-black);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.14), 0 0 0 2px var(--jet-black);
}

.fyf-category-img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  background: var(--bg-secondary);
}

.fyf-category-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fyf-category-card:hover .fyf-category-img {
  transform: scale(1.05);
}

.fyf-category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: var(--pure-white);
}

.fyf-category-overlay .fyf-cat-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pure-white);
  margin: 0 0 4px 0;
  line-height: 1.1;
}

.fyf-category-overlay .fyf-cat-subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.fyf-category-card-meta {
  padding: 20px 24px 24px;
  background: var(--pure-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fyf-category-desc {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.fyf-category-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jet-black);
  margin-top: 6px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.fyf-category-card:hover .fyf-category-action {
  color: var(--umber-brown);
  transform: translateX(4px);
}

.fyf-gender-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.fyf-tag-pill {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.fyf-tag-pill:hover {
  border-color: var(--jet-black);
  color: var(--jet-black);
  background: var(--bg-primary);
}

.fyf-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.fyf-option-card {
  position: relative;
  text-align: left;
  padding: 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.28s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.fyf-card-stage {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.fyf-stage-face {
  height: 96px;
  padding: 12px;
}

.fyf-stage-eyewear {
  height: 96px;
  padding: 10px;
}

.fyf-stage-campaign {
  height: 110px;
  padding: 0;
}

.fyf-stage-img {
  max-width: 90%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.fyf-stage-campaign .fyf-stage-img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fyf-face-svg {
  transition: transform 0.3s ease;
}

.fyf-selected-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: var(--jet-black);
  color: var(--pure-white);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fyf-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fyf-option-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--jet-black);
}

.fyf-option-rec {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--umber-brown);
  line-height: 1.35;
}

.fyf-option-desc {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.fyf-option-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 115, 85, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(139, 115, 85, 0.08);
}

.fyf-option-card:hover .fyf-stage-img,
.fyf-option-card:hover .fyf-face-svg {
  transform: scale(1.06);
}

.fyf-option-card.selected {
  border-color: var(--jet-black);
  background: var(--pure-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 0 0 1px var(--jet-black);
}

.fyf-option-card.selected .fyf-card-stage {
  border-color: rgba(139, 115, 85, 0.28);
}

/* Product Detail Page Multi-Image Gallery & Zoom */
.pdp-main-gallery-stage {
  position: relative;
  background: var(--bg-secondary);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  border: 1px solid var(--border-subtle);
}

.pdp-main-gallery-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdp-main-gallery-stage img.zoomed {
  transform: scale(1.42);
  cursor: zoom-out;
}

.pdp-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-subtle);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--jet-black);
  pointer-events: none;
}

.pdp-thumbs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.pdp-thumb-btn {
  padding: 6px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s ease;
}

.pdp-thumb-btn.active,
.pdp-thumb-btn:hover {
  border-color: var(--jet-black);
}

.pdp-thumb-btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 4px;
}

.pdp-thumb-btn span {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* PDP Stock Pill & Measurements */
.pdp-stock-pill {
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
}

.pdp-stock-pill.stock-in {
  background: var(--bg-secondary);
  color: var(--jet-black);
}

.pdp-stock-pill.stock-low {
  background: #FDF8F2;
  border-color: var(--umber-brown);
  color: var(--umber-brown);
}

.pdp-stock-pill.stock-out {
  background: #FAF0F0;
  color: var(--accent-rose);
}

.pdp-measurements-strip {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Store Availability on PDP */
.pdp-store-avail-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-store-avail-row {
  padding: 12px 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.store-state-tag {
  margin-left: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--border-subtle);
}

.store-state-tag.state-available {
  background: var(--bg-secondary);
  color: var(--jet-black);
}

.store-state-tag.state-consult {
  color: var(--umber-brown);
}

.store-state-tag.state-unavailable {
  color: var(--text-muted);
}

.pdp-store-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Collapsible Product Information Accordion */
.pdp-accordion-item {
  border-bottom: 1px solid var(--border-subtle);
}

.pdp-accordion-item summary {
  padding: 13px 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pdp-accordion-item summary::-webkit-details-marker {
  display: none;
}

.pdp-accordion-item summary::after {
  content: "+";
  font-size: 1rem;
  color: var(--text-muted);
}

.pdp-accordion-item[open] summary::after {
  content: "−";
}

.pdp-accordion-body {
  padding: 0 0 14px 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Recommendations & Recently Viewed Row */
.pdp-recommendations-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pdp-rec-card {
  cursor: pointer;
  padding: 12px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.18s ease;
}

.pdp-rec-card:hover {
  border-color: var(--jet-black);
}

.pdp-rec-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary);
  overflow: hidden;
}

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

/* Mobile Sticky Add-to-Bag Bar */
.mobile-sticky-pdp-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2600;
  background: var(--pure-white);
  border-top: 1px solid var(--border-strong);
  padding: 12px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 899px) {
  .desktop-refine-selects {
    display: none;
  }
  .mobile-filter-sort-triggers {
    display: block;
  }
  .fyf-options-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .pdp-recommendations-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   CHECKOUT PRESCRIPTION + FRAME-ONLY + DYNAMIC LENS PRICING (SECTIONS 1–30)
   ========================================================================= */
.rx-config-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 20px;
}

.rx-section-heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jet-black);
  margin-bottom: 12px;
}

.lens-choice-segmented-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lens-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  user-select: none;
}

.lens-choice-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lens-choice-card:hover {
  border-color: var(--umber-brown);
}

.lens-choice-card.active {
  border: 1.5px solid var(--jet-black);
  background: var(--pure-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.lens-choice-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.lens-choice-title {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jet-black);
}

.lens-choice-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lens-choice-card.active .lens-choice-radio-dot {
  border-color: var(--jet-black);
}

.lens-choice-card.active .lens-choice-radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jet-black);
}

.lens-choice-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 10px;
}

.lens-choice-price {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--jet-black);
}

/* Live Price Calculation Breakdown */
.rx-price-breakdown-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.rx-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 4px 0;
}

.rx-price-row.rx-price-total {
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 0.94rem;
  color: var(--jet-black);
}

/* Prescription Method Tabs */
.rx-method-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rx-method-tab {
  flex: 1;
  min-width: 150px;
  padding: 10px 12px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease;
}

.rx-method-tab:hover {
  border-color: var(--umber-brown);
  color: var(--jet-black);
}

.rx-method-tab.active {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.rx-upload-dropzone {
  display: block;
  padding: 18px 16px;
  background: var(--pure-white);
  border: 1px dashed var(--umber-brown);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.rx-upload-dropzone:hover {
  border-color: var(--jet-black);
  background: var(--bg-secondary);
}

.rx-uploaded-file-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

/* Manual Prescription OD/OS Grid */
.rx-manual-grid-table {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 14px;
}

.rx-eye-group-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 8px;
}

.rx-fields-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.rx-fields-row-4 label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.rx-input {
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
}

.rx-inline-error {
  padding: 10px 12px;
  background: #FAF0F0;
  border: 1px solid var(--accent-rose);
  color: var(--accent-rose);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Two-Column Desktop Checkout Layout & Sticky Order Summary */
.checkout-two-col-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 28px;
  align-items: start;
}

.checkout-step-card {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 20px;
  margin-bottom: 18px;
}

.checkout-step-heading {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jet-black);
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.checkout-sticky-summary-card {
  position: sticky;
  top: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);
  border: 1px solid rgba(139, 115, 85, 0.22);
  border-radius: var(--radius-sm);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.checkout-section-block {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Enhanced Luxury Checkout Styles */
.checkout-payment-card {
  position: relative;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.checkout-payment-card:hover {
  border-color: rgba(139, 115, 85, 0.38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.checkout-payment-card:has(input:checked),
.checkout-payment-card.active {
  border-color: var(--jet-black) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 0 0 1px var(--jet-black), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.chk-item-card:last-child {
  border-bottom: none !important;
}

.chk-included-lens-badge {
  background: #f4f7f4;
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 2px;
}

#btn-checkout-submit {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%), var(--jet-black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

#btn-checkout-submit:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.22) 100%), var(--umber-brown);
  border-color: var(--umber-brown);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px rgba(139, 115, 85, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 899px) {
  .checkout-two-col-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .checkout-sticky-summary-card {
    position: static;
    padding: 18px 16px;
  }
  .checkout-payment-methods-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .lens-choice-segmented-grid {
    grid-template-columns: 1fr;
  }
  .rx-fields-row-4 {
    grid-template-columns: 1fr 1fr;
  }
  .rx-method-tabs {
    flex-direction: column;
  }
  .checkout-luxury-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }
}

/* ==========================================================================
   CINEMATIC CATEGORY SHOWCASE SHOWROOM & CATEGORY HERO (SECTIONS 1–31)
   ========================================================================== */
.cinematic-showroom-section {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.showroom-scroll-track {
  position: relative;
  height: auto;
}

.showroom-sticky-stage {
  position: relative;
  top: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 0 36px;
  overflow: hidden;
  background: var(--bg-primary);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom-sticky-stage.is-transitioning-out {
  opacity: 0.86;
  transform: scale(0.985);
}

.showroom-stage-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 14px;
}

.showroom-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.showroom-main-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 2px 0 0 0;
  color: var(--jet-black);
}

.showroom-controls-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.showroom-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--jet-black);
  background: var(--pure-white);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jet-black);
}

.showroom-progress-divider {
  color: var(--umber-brown);
}

.showroom-chapter-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.showroom-nav-label {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.showroom-nav-label .showroom-nav-idx {
  color: var(--umber-brown);
  margin-right: 3px;
  font-weight: 500;
}

.showroom-nav-label:hover {
  color: var(--jet-black);
  border-color: var(--border-subtle);
}

.showroom-nav-label.active {
  color: var(--pure-white);
  background: var(--jet-black);
  border-color: var(--jet-black);
}

.showroom-nav-label.active .showroom-nav-idx {
  color: #D6C5B3;
}

.showroom-step-arrows {
  display: inline-flex;
  gap: 6px;
}

.showroom-arrow-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  color: var(--jet-black);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.showroom-arrow-btn:hover {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

/* Spatial Curved / Perspective Rail (Sections 6, 7, 8, 16, 17) */
.showroom-perspective-viewport {
  position: relative;
  width: 100%;
  height: 450px;
  perspective: 1800px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.showroom-spatial-rail {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.showroom-category-panel {
  position: absolute;
  display: grid;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform, opacity;
  outline: none;
}

.showroom-category-panel:focus-visible {
  outline: 2px solid var(--umber-brown);
  outline-offset: 3px;
}

/* Compositional Variation per Category (Section 16 : Never 6 identical cards) */
.showroom-category-panel.showcase-layout-landscape {
  width: min(820px, 68vw);
  height: 430px;
  grid-template-columns: 1.32fr 1fr;
}

.showroom-category-panel.showcase-layout-editorial {
  width: min(770px, 64vw);
  height: 444px;
  grid-template-columns: 1.12fr 1fr;
}

.showroom-category-panel.showcase-layout-dynamic {
  width: min(790px, 66vw);
  height: 426px;
  grid-template-columns: 1.24fr 1fr;
}

.showroom-category-panel.showcase-layout-wide {
  width: min(840px, 70vw);
  height: 420px;
  grid-template-columns: 1.42fr 1fr;
}

.showroom-category-panel.showcase-layout-fullbleed {
  width: min(810px, 67vw);
  height: 436px;
  grid-template-columns: 1.36fr 1fr;
}

.showroom-category-panel.showcase-layout-macro {
  width: min(780px, 65vw);
  height: 432px;
  grid-template-columns: 1.18fr 1fr;
}

/* Spatial Focus States (Sections 7, 8, 17) */
.showroom-category-panel.is-active {
  transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
  opacity: 1;
  filter: none;
  z-index: 10;
  border-color: var(--jet-black);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.11);
  pointer-events: auto;
}

.showroom-category-panel.is-prev {
  transform: translate3d(-56%, 8px, -250px) scale(0.84) rotateY(17deg);
  opacity: 1;
  filter: brightness(0.92);
  z-index: 6;
  pointer-events: auto;
}

.showroom-category-panel.is-next {
  transform: translate3d(56%, 8px, -250px) scale(0.84) rotateY(-17deg);
  opacity: 1;
  filter: brightness(0.92);
  z-index: 6;
  pointer-events: auto;
}

.showroom-category-panel.is-far-prev {
  transform: translate3d(-94%, 18px, -460px) scale(0.70) rotateY(25deg);
  opacity: 1;
  filter: brightness(0.80);
  z-index: 3;
  pointer-events: none;
}

.showroom-category-panel.is-far-next {
  transform: translate3d(94%, 18px, -460px) scale(0.70) rotateY(-25deg);
  opacity: 1;
  filter: brightness(0.80);
  z-index: 3;
  pointer-events: none;
}

.showroom-category-panel.is-far-prev .showroom-copy-overlay,
.showroom-category-panel.is-far-next .showroom-copy-overlay {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

.showroom-category-panel.is-hidden-rail {
  transform: translate3d(0, 24px, -640px) scale(0.60);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Video & Visual Stage inside Each Showcase (Sections 3, 4, 5) */
.showroom-media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #121110;
  overflow: hidden;
}

.showroom-category-video,
.showroom-poster-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.showroom-poster-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

.showroom-category-video {
  position: relative;
  z-index: 1;
}

/* Subtle 1.00 -> 1.02 hover scale on active showcase media (Section 5) */
.showroom-category-panel.is-active:hover .showroom-category-video,
.showroom-category-panel.is-active:hover .showroom-poster-fallback {
  transform: scale(1.02);
}

.showroom-chapter-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(250, 249, 246, 0.92);
  color: var(--jet-black);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
}

/* Showcase Editorial Copy Column (Sections 2, 12, 13, 14, 15) */
.showroom-copy-overlay {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 28px 26px;
  background: var(--pure-white);
  border-left: 1px solid var(--border-subtle);
  transition: opacity 0.45s ease;
}

.showroom-category-panel.theme-men-structured .showroom-copy-overlay {
  background: #FAF9F6;
}

.showroom-category-panel.theme-sun-warm .showroom-copy-overlay {
  background: #FAF8F4;
}

.showroom-category-panel:not(.is-active) .showroom-copy-overlay {
  opacity: 0.72;
}

.showroom-copy-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.showroom-category-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber-brown);
}

.showroom-short-line {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jet-black);
}

.showroom-copy-main {
  margin: auto 0;
}

.showroom-category-title {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--jet-black);
  margin: 0 0 12px 0;
}

.showroom-editorial-sub {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.showroom-cta-wrap {
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showroom-category-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--jet-black);
  color: #FAF9F6;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--jet-black);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.showroom-category-panel:hover .showroom-category-cta {
  background: var(--umber-brown);
  border-color: var(--umber-brown);
  color: #FFFFFF;
}

/* Live Synced Featured Catalogue Strip Below Showroom Stage (Sections 21 & 22) */
.showroom-featured-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.showroom-featured-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
}

.showroom-featured-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
}

.showroom-mini-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.showroom-mini-product:hover {
  border-color: var(--jet-black);
}

.showroom-mini-product img {
  width: 54px;
  height: 38px;
  object-fit: contain;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 2px;
  flex-shrink: 0;
}

.showroom-mini-info {
  min-width: 0;
  flex: 1;
}

.showroom-mini-name {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--jet-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showroom-mini-spec {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showroom-mini-cta {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--umber-brown);
  white-space: nowrap;
}

/* Dedicated Category Landing Hero inside #trending-section (Sections 10, 11, 12, 27) */
.category-editorial-hero {
  margin-bottom: 28px;
  border: 1px solid var(--jet-black);
  background: var(--pure-white);
  overflow: hidden;
  animation: categoryHeroFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.category-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 260px;
}

.category-hero-copy {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg-primary);
}

.category-hero-visual {
  position: relative;
  background: #121110;
  min-height: 240px;
  overflow: hidden;
}

.category-hero-visual video,
.category-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-hero-subfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.category-subfilter-btn {
  padding: 7px 13px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  color: var(--jet-black);
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-subfilter-btn:hover,
.category-subfilter-btn.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

/* Laptop Viewport Height Optimization (1024px - 1440px with 700px - 850px height) */
@media (min-width: 900px) and (max-height: 850px) {
  .showroom-sticky-stage {
    padding: 18px 0 20px !important;
  }
  .showroom-perspective-viewport {
    height: 395px !important;
  }
  .showroom-category-panel.showcase-layout-landscape {
    height: 380px !important;
  }
  .showroom-category-panel.showcase-layout-editorial {
    height: 385px !important;
  }
  .showroom-category-panel.showcase-layout-dynamic {
    height: 375px !important;
  }
  .showroom-category-panel.showcase-layout-wide {
    height: 370px !important;
  }
  .showroom-category-panel.showcase-layout-fullbleed {
    height: 380px !important;
  }
  .showroom-category-panel.showcase-layout-macro {
    height: 375px !important;
  }
  .showroom-featured-strip {
    margin-top: 10px !important;
  }
}

/* Responsive Tablet & Mobile Showroom (Sections 23 & 24 : Natural Horizontal Swipe Chapters) */
@media (max-width: 899px) {
  .showroom-scroll-track {
    height: auto;
  }

  .showroom-sticky-stage {
    position: static;
    min-height: 0;
    padding: 32px 0;
  }

  .showroom-perspective-viewport {
    height: auto;
    perspective: none;
    overflow: visible;
  }

  .showroom-spatial-rail {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 14px;
    transform-style: flat;
    pointer-events: auto !important;
  }

  .showroom-category-panel,
  .showroom-category-panel.showcase-layout-landscape,
  .showroom-category-panel.showcase-layout-editorial,
  .showroom-category-panel.showcase-layout-dynamic,
  .showroom-category-panel.showcase-layout-wide,
  .showroom-category-panel.showcase-layout-fullbleed,
  .showroom-category-panel.showcase-layout-macro {
    position: relative;
    flex: 0 0 88%;
    max-width: 88%;
    width: 88%;
    height: auto;
    grid-template-columns: 1fr;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .showroom-media-frame {
    height: 260px;
  }

  .showroom-copy-overlay {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    padding: 20px;
    gap: 12px;
  }

  .showroom-featured-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .showroom-featured-cards {
    grid-template-columns: 1fr;
  }

  .category-hero-grid {
    grid-template-columns: 1fr;
  }

  .category-hero-copy {
    padding: 22px 20px;
  }
}

/* Reduced Motion Accessibility (Section 26) */
@media (prefers-reduced-motion: reduce) {
  .showroom-category-panel {
    transition: opacity 0.25s ease !important;
  }
  .showroom-category-panel.is-prev,
  .showroom-category-panel.is-next,
  .showroom-category-panel.is-far-prev,
  .showroom-category-panel.is-far-next,
  .showroom-category-panel.is-hidden-rail {
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .showroom-category-panel.is-active {
    transform: none !important;
    opacity: 1 !important;
  }
  .shape-card,
  .fyf-option-card,
  .product-img-wrapper,
  .btn-editorial-dark,
  #btn-checkout-submit {
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
    transform: none !important;
  }
  .shape-card:hover,
  .fyf-option-card:hover,
  .product-card:hover .product-img-wrapper,
  .btn-editorial-dark:hover,
  #btn-checkout-submit:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   DEDICATED LENSES ECOSYSTEM + PRESCRIPTION LENS SHOPPING FLOW
   (SECTIONS 1–46)
   ========================================================================== */

.lenses-ecosystem-section {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.lenses-hero-banner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 44px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.lenses-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.3vw, 2.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--jet-black);
  margin: 8px 0 14px 0;
}

.lenses-hero-subtitle {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: 60ch;
  margin-bottom: 24px;
}

.lenses-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.lenses-hero-diagram-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 24px;
}

.lenses-hero-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Attached Frame Context Banner (Sections 17–19) */
.lens-attached-frame-banner {
  margin-top: 24px;
  padding: 18px 24px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--jet-black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.lens-attached-frame-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lens-attached-frame-info img {
  width: 76px;
  height: 52px;
  object-fit: contain;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 4px;
}

/* Primary Lens Types Grid (Sections 4–7, 38) */
.lens-types-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lens-type-editorial-card {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  transition: border-color 0.25s ease;
}

.lens-type-editorial-card:hover {
  border-color: var(--jet-black);
}

.lens-diagram-box {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lens-type-diagram-svg {
  width: 100%;
  max-width: 170px;
  height: auto;
  display: block;
}

.lens-card-definition {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
}

.lens-spec-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 6px;
}

.lens-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lens-spec-list li {
  font-size: 0.82rem;
  color: var(--text-primary);
  position: relative;
  padding-left: 14px;
  line-height: 1.5;
}

.lens-spec-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  font-weight: 700;
  color: var(--umber-brown);
}

.lens-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lens Comparison Table (Section 13) */
.lens-comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.lens-comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

.lens-comparison-table th {
  padding: 16px 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.lens-comparison-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.lens-comparison-table tr:last-child td {
  border-bottom: none;
}

/* Lens Materials 4-Card Grid (Sections 8–12, 39) */
.lens-materials-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.lens-material-card {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.25s ease;
}

.lens-material-card:hover {
  border-color: var(--jet-black);
}

.lens-material-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.lens-material-meta {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.55;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* Signature Interactive Component: FIND YOUR LENS (Sections 14, 19–25) */
.find-your-lens-container {
  background: var(--pure-white);
  border: 1px solid var(--jet-black);
  padding: 40px;
}

.find-your-lens-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 28px;
}

.find-your-lens-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 36px;
  align-items: start;
}

.lens-step-block {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.lens-step-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.lens-step-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 12px;
}

.lens-finder-radio-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lens-finder-radio-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.lens-finder-option-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-family: var(--font-sans);
}

.lens-finder-option-card:hover:not(:disabled) {
  border-color: var(--jet-black);
}

.lens-finder-option-card.active {
  background: var(--pure-white);
  border: 1.5px solid var(--jet-black);
}

.lens-finder-option-card.is-incompatible {
  opacity: 0.48;
}

.lens-finder-option-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--jet-black);
}

.lens-radio-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--jet-black);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.lens-finder-option-card.active .lens-radio-indicator::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--jet-black);
  border-radius: 50%;
}

.lens-finder-option-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.lens-finder-option-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--umber-brown);
  margin-top: 2px;
}

.lens-rx-summary-card {
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--jet-black);
}

.lens-config-summary-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 28px;
  position: sticky;
  top: 100px;
}

.lens-config-breakdown-rows {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lens-config-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.84rem;
  color: var(--text-secondary);
  gap: 12px;
}

.lens-config-row strong {
  color: var(--jet-black);
  text-align: right;
}

.lens-config-total-row {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 4px;
  font-size: 1rem;
  color: var(--jet-black);
  font-weight: 700;
}

.lens-config-total-row strong {
  font-size: 1.25rem;
}

/* Shop Prescription Lenses Catalogue Grid (Sections 15, 16, 40) */
.lens-catalog-controls-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.lens-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lens-collection-group {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.lens-collection-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--jet-black);
}

.lens-collection-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--jet-black);
  margin: 0;
  letter-spacing: 0.03em;
}

.lens-collection-from-tag {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--jet-black);
}

.lens-collection-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lens-product-card {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  position: relative;
}

.lens-product-card:hover {
  border-color: var(--jet-black);
}

.lens-product-card.is-selected-lens {
  border: 1.5px solid var(--jet-black);
  background: var(--bg-secondary);
}

.lens-card-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0 4px 0;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
}

.lens-card-price-value {
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--jet-black);
  letter-spacing: -0.01em;
}

.lens-direct-radio-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lens-direct-radio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-primary);
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lens-direct-radio-item:hover {
  border-color: var(--jet-black);
}

.lens-direct-radio-item.active {
  background: var(--pure-white);
  border: 1.5px solid var(--jet-black);
  font-weight: 600;
}

.lens-disclaimer-banner {
  padding: 20px 24px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

@media (max-width: 899px) {
  .lenses-hero-banner {
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .lens-types-grid-3 {
    grid-template-columns: 1fr;
  }
  .lens-materials-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .find-your-lens-grid {
    grid-template-columns: 1fr;
  }
  .lens-products-grid,
  .lens-collection-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .lenses-hero-banner {
    padding: 22px 18px;
  }
  .lens-materials-grid-4,
  .lens-finder-radio-grid-3,
  .lens-finder-radio-grid-4,
  .lens-products-grid,
  .lens-collection-cards-grid,
  .lens-direct-radio-list {
    grid-template-columns: 1fr;
  }
  .find-your-lens-container {
    padding: 22px 18px;
  }
}

/* ============================================================================
   21. LENS UX ENHANCEMENT: "WHICH LENS DO I NEED?" GUIDE & RX PREVIEW TABLE
   ============================================================================ */
.which-lens-guide-section {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 36px;
}

.which-lens-guide-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.which-lens-guide-card {
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  padding: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.which-lens-guide-card:hover,
.which-lens-guide-card.is-expanded {
  border-color: var(--jet-black);
  background: var(--pure-white);
}

.which-lens-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.which-lens-guide-toggle-indicator {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-brown);
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  white-space: nowrap;
}

.which-lens-guide-card.is-expanded .which-lens-guide-toggle-indicator {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.which-lens-guide-body {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.which-lens-guide-card.is-expanded .which-lens-guide-body {
  display: flex;
}

.which-lens-guide-subhead {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 4px;
}

.which-lens-guide-block p,
.which-lens-guide-list {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.which-lens-guide-list {
  padding-left: 16px;
}

.which-lens-guide-list li {
  margin-bottom: 3px;
}

.which-lens-guide-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.lens-config-section-tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-top: 2px;
}

/* Structured Prescription Visual Preview Table (Section 25) */
.rx-preview-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

.rx-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.rx-preview-table th,
.rx-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
}

.rx-preview-table th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.rx-preview-table td strong {
  color: var(--jet-black);
}

@media (max-width: 899px) {
  .which-lens-guide-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .which-lens-guide-section {
    padding: 22px 16px;
  }
  .which-lens-guide-card {
    padding: 18px 16px;
  }
  .rx-preview-table th,
  .rx-preview-table td {
    padding: 6px 6px;
    font-size: 0.74rem;
  }
}

/* ============================================================================
   VIRTUAL TRY-ON / CALIBRATED FACE-LANDMARK OVERLAY SYSTEM (SECTIONS 1–48)
   ============================================================================ */
.tryon-modal-window {
  max-width: 820px;
  padding: 24px 28px;
  text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

.tryon-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.tryon-modal-heading {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 400;
  margin: 2px 0 0 0;
  color: var(--jet-black);
  letter-spacing: -0.01em;
}

.tryon-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  color: var(--text-secondary);
}

.tryon-status-pill[data-state="TRY ON READY"] {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.tryon-status-pill[data-state="INITIALIZING CAMERA"],
.tryon-status-pill[data-state="DETECTING FACE"],
.tryon-status-pill[data-state="LOADING FRAME"] {
  border-color: var(--umber-brown);
  color: var(--umber-brown);
}

.tryon-close-btn {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 14px !important;
  font-family: var(--font-sans);
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle) !important;
  background: var(--pure-white) !important;
  color: var(--jet-black) !important;
  cursor: pointer;
}

.tryon-close-btn:hover {
  background: var(--jet-black) !important;
  color: var(--pure-white) !important;
  border-color: var(--jet-black) !important;
}

.tryon-stage-wrapper {
  position: relative;
  width: 100%;
  min-height: 360px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tryon-stage-screen {
  width: 100%;
  height: 100%;
}

.tryon-permission-card,
.tryon-instructions-card,
.tryon-error-card,
.tryon-capture-card {
  max-width: 540px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
}

.tryon-frame-silhouette-preview {
  width: 100%;
  max-width: 320px;
  height: 110px;
  margin: 0 auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  padding: 12px 20px;
}

.tryon-frame-silhouette-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tryon-screen-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--jet-black);
  margin: 0 0 10px 0;
}

.tryon-privacy-copy,
.tryon-error-detail {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 auto 20px auto;
  max-width: 460px;
}

.tryon-permission-actions,
.tryon-capture-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tryon-selfie-label {
  cursor: pointer;
}

.tryon-checklist {
  list-style: none;
  padding: 16px 22px;
  margin: 14px auto 0 auto;
  max-width: 380px;
  text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
}

.tryon-checklist li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--jet-black);
  border-bottom: 1px solid var(--border-subtle);
}

.tryon-checklist li:last-child {
  border-bottom: none;
}

.tryon-checklist li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 6px;
  color: var(--umber-brown);
  font-weight: 700;
}

.tryon-live-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 460px;
  background: #111111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tryon-webcam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: block;
}

#tryon-selfie-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#tryon-ar-overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.tryon-face-guide-oval {
  position: absolute;
  width: 44%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border: 1.5px dashed rgba(250, 249, 246, 0.55);
  border-radius: 50% 50% 46% 46%;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tryon-face-guide-oval.aligned {
  border-color: transparent;
  opacity: 0;
}

.tryon-guide-eye-line {
  width: 76%;
  height: 1px;
  background: rgba(250, 249, 246, 0.38);
  transform: translateY(-12px);
}

.tryon-guidance-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: rgba(0, 0, 0, 0.78);
  color: var(--pure-white);
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
  min-width: 180px;
  max-width: 86%;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.tryon-guidance-overlay.ready {
  background: rgba(0, 0, 0, 0.36);
  border-color: rgba(139, 115, 85, 0.35);
  padding: 2px 8px;
  min-width: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
}

.tryon-guidance-overlay.ready .tryon-guidance-sub {
  display: none;
}

.tryon-guidance-title {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAF9F6;
}

.tryon-guidance-sub {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(250, 249, 246, 0.85);
  margin-top: 2px;
}

.tryon-lighting-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  background: rgba(0, 0, 0, 0.82);
  color: #FAF9F6;
  border: 1px solid var(--umber-brown);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tryon-capture-preview-box {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 16px auto;
  border: 1px solid var(--border-subtle);
  background: #111111;
  overflow: hidden;
}

.tryon-capture-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tryon-bottom-bar {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tryon-product-summary {
  flex: 1;
  min-width: 220px;
}

.tryon-active-eyebrow {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber-brown);
}

.tryon-name-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.tryon-frame-name {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--jet-black);
  margin: 0;
}

.tryon-frame-price {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--jet-black);
}

.tryon-frame-spec {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.tryon-variation-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tryon-var-pill {
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  color: var(--jet-black);
  cursor: pointer;
}

.tryon-var-pill.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.tryon-session-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tryon-ctrl-btn {
  padding: 10px 14px !important;
  font-size: 0.7rem !important;
}

.tryon-frame-switcher-drawer {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

.tryon-switcher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tryon-frame-switcher-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.tryon-switcher-item {
  flex: 0 0 155px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease;
}

.tryon-switcher-item.active {
  border-color: var(--jet-black);
  background: var(--pure-white);
}

.tryon-switcher-item img {
  width: 100%;
  height: 48px;
  object-fit: contain;
  margin-bottom: 6px;
}

.tryon-switcher-item-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--jet-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tryon-switcher-item-price {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.tryon-privacy-footer {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .tryon-modal-window {
    padding: 16px 14px;
  }
  .tryon-live-viewport {
    aspect-ratio: 3 / 4;
    max-height: 390px;
  }
  .tryon-bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .tryon-session-controls {
    width: 100%;
    justify-content: space-between;
  }
  .tryon-ctrl-btn {
    flex: 1 1 calc(50% - 6px);
    text-align: center;
  }
}

/* ============================================================================
   26. 360° INTERACTIVE EYEWEAR TURNTABLE VIEWER (PART 2)
   ============================================================================ */
.pdp-gallery-controls-strip {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pdp-media-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pdp-media-action-btn:hover {
  border-color: var(--jet-black);
  background: var(--pure-white);
}

.pdp-media-action-btn.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.pdp-360-viewer-container {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 30%, #F5F2EB 100%);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.pdp-360-viewer-container.active {
  display: block;
}

.pdp-360-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.pdp-360-canvas:active {
  cursor: grabbing;
}

.pdp-360-hint-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-360-dimensions-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  pointer-events: none;
}

.pdp-360-toolbar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.pdp-360-angle-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pdp-360-preset-btn {
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pdp-360-preset-btn:hover,
.pdp-360-preset-btn.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.pdp-360-close-btn {
  padding: 5px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pdp-360-close-btn:hover {
  background: var(--pure-white);
  color: var(--jet-black);
  border-color: var(--jet-black);
}

/* ============================================================================
   27. RIGHT-SIDE EYEWEAR CONFIGURATION DRAWER (PARTS 4–15)
   ============================================================================ */
.eyewear-config-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.52);
  backdrop-filter: blur(3px);
  z-index: 3400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.eyewear-config-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.eyewear-config-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(400px, 34vw, 560px);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--snow-white);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
  z-index: 3401;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.eyewear-config-drawer:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.eyewear-config-drawer.open {
  display: flex !important;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible !important;
}

/* Drawer Header */
.config-drawer-header {
  padding: 16px 22px;
  background: var(--pure-white);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
}

.config-drawer-product-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.config-drawer-thumb {
  width: 54px;
  height: 40px;
  object-fit: contain;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.config-drawer-title-col {
  min-width: 0;
}

.config-drawer-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--jet-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.config-drawer-meta {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.config-drawer-close-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  font-size: 1.15rem;
  color: var(--jet-black);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.config-drawer-close-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

/* Stepper (01 : POWER TYPE, 02 : LENSES, 03 : ADD POWER) */
.config-stepper-bar {
  display: flex;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 14px;
  flex-shrink: 0;
}

.config-step-tab {
  flex: 1;
  padding: 12px 6px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.config-step-tab.active {
  color: var(--jet-black);
  border-bottom-color: var(--jet-black);
  background: rgba(255, 255, 255, 0.6);
}

.config-step-tab.completed {
  color: var(--accent-emerald);
}

.config-step-tab.completed .step-check-mark {
  display: inline-block;
}

.step-check-mark {
  display: none;
  font-weight: 700;
}

/* Drawer Body Scrollable Area */
.config-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  -webkit-overflow-scrolling: touch;
}

.config-step-heading-group {
  margin-bottom: 18px;
}

.config-step-heading {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--jet-black);
  margin-bottom: 4px;
}

.config-step-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Selection Cards Grid */
.config-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-selection-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  position: relative;
  transition: var(--transition-smooth);
  text-align: left;
}

.config-selection-card:hover {
  border-color: var(--jet-black);
}

.config-selection-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.config-card-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.config-selection-card.active .config-card-icon-box {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.config-selection-card.active .config-card-icon-box svg {
  stroke: var(--pure-white);
}

.config-card-content {
  flex: 1;
  min-width: 0;
}

.config-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.config-card-title {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jet-black);
  margin: 0;
}

.config-card-price-tag {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-card-desc {
  font-size: 0.79rem;
  color: var(--text-secondary);
  line-height: 1.48;
  margin-top: 4px;
}

.config-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.config-card-badge {
  font-size: 0.68rem;
  padding: 2px 7px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

/* Step 2: Lens Cards & Filters */
.config-lens-filters-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
  scrollbar-width: thin;
}

.config-filter-chip {
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-filter-chip:hover {
  border-color: var(--jet-black);
  color: var(--jet-black);
}

.config-filter-chip.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

.config-lens-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
  margin-bottom: 12px;
}

.config-lens-card:hover {
  border-color: var(--jet-black);
}

.config-lens-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.config-lens-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.config-lens-type-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber-brown);
}

.config-lens-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-lens-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--jet-black);
  margin-bottom: 6px;
}

.config-lens-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.config-lens-bullets li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.config-lens-bullets li::before {
  content: "•";
  color: var(--umber-brown);
  font-size: 0.9rem;
}

.config-lens-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

.config-lens-select-btn {
  padding: 8px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-lens-card.active .config-lens-select-btn {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

/* Secondary Lens Detail Modal / Flyout */
.config-lens-flyout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.config-lens-flyout-backdrop.open {
  display: flex;
}

.config-lens-flyout-panel {
  background: var(--pure-white);
  width: 100%;
  max-height: 85%;
  overflow-y: auto;
  border-top: 2px solid var(--jet-black);
  padding: 20px 22px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Step 3: Add Prescription Options */
.config-rx-method-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.config-rx-method-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-rx-method-card:hover {
  border-color: var(--jet-black);
}

.config-rx-method-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
}

/* Manual Clinic Table */
.config-clinic-grid {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  margin-top: 14px;
}

.config-clinic-eye-row {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.config-clinic-eye-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.config-clinic-eye-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jet-black);
  margin-bottom: 8px;
}

.config-clinic-fields-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.config-field-cell {
  display: flex;
  flex-direction: column;
}

.config-field-cell label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.config-select-input {
  width: 100%;
  padding: 8px 6px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  color: var(--jet-black);
  outline: none;
}

.config-select-input:focus {
  border-color: var(--jet-black);
  background: var(--pure-white);
}

.config-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 10px;
}

/* Upload Area */
.config-upload-dropzone {
  border: 2px dashed var(--border-subtle);
  background: var(--bg-primary);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-upload-dropzone:hover,
.config-upload-dropzone.dragover {
  border-color: var(--jet-black);
  background: var(--pure-white);
}

.config-upload-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--pure-white);
  border: 1px solid var(--accent-emerald);
  margin-top: 12px;
}

/* Step 4 Review */
.config-review-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  margin-top: 10px;
}

/* ==========================================================================
   ADVANCED LENS CONFIGURATION: BRANDS, MODELS, SPECIFICATIONS & CRIZAL COATINGS
   ========================================================================== */
.config-section-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-section-title span.tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(74, 62, 57, 0.08);
  border-radius: 2px;
  color: var(--jet-black);
}

.config-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.config-brand-card {
  padding: 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
}

.config-brand-card:hover {
  border-color: var(--jet-black);
  transform: translateY(-1px);
}

.config-brand-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.config-brand-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.config-brand-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-brand-origin {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.config-brand-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--umber-brown);
}

.config-brand-tagline {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 4px;
}

/* Progressive Models / Tiers */
.config-model-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.config-model-card {
  padding: 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-model-card:hover {
  border-color: var(--jet-black);
}

.config-model-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.config-model-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.config-model-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-model-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-model-corridor {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--umber-brown);
  margin-bottom: 4px;
}

.config-model-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Refractive Index Tiles */
.config-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.config-index-tile {
  padding: 12px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-index-tile:hover {
  border-color: var(--jet-black);
}

.config-index-tile.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
}

.config-index-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}

.config-index-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-index-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--umber-brown);
}

.config-index-tagline {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Coating Options Grid */
.config-coating-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.config-coating-card {
  padding: 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-coating-card:hover {
  border-color: var(--jet-black);
}

.config-coating-card.active {
  border: 2px solid var(--jet-black);
  background: #FFFDF9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.config-coating-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.config-coating-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(74, 62, 57, 0.08);
  color: var(--umber-brown);
  border-radius: 2px;
}

.config-coating-badge.crizal {
  background: #E8F0FE;
  color: #1A73E8;
}

.config-coating-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-coating-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--jet-black);
  margin-top: 4px;
  margin-bottom: 2px;
}

.config-coating-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Local Blue-Cut Showcase */
.config-local-bluecut-box {
  padding: 16px;
  background: #FDFBF7;
  border: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.config-local-bluecut-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.config-local-bluecut-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-local-bluecut-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-emerald, #2e7d32);
}

.config-local-bluecut-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 10px;
}

.config-review-table th,
.config-review-table td {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.config-review-table th {
  background: var(--bg-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Sticky Drawer Footer */
.config-drawer-footer {
  padding: 14px 20px;
  background: var(--pure-white);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  z-index: 5;
}

.config-footer-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.config-footer-breakdown {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.config-footer-total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jet-black);
}

.config-footer-actions {
  display: flex;
  gap: 10px;
}

.config-btn-back {
  flex: 0.75;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--snow-white);
  border: 1px solid var(--border-subtle);
  color: var(--jet-black);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.config-btn-back:hover {
  background: var(--bg-secondary);
  border-color: var(--jet-black);
}

.config-btn-primary {
  flex: 1.6;
  padding: 13px 18px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--jet-black);
  border: 1px solid var(--jet-black);
  color: var(--pure-white);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.config-btn-primary:hover:not(:disabled) {
  background: #222222;
}

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

/* Mobile full-screen drawer layout (Section 4 & 19) */
@media (max-width: 768px) {
  .eyewear-config-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .config-drawer-body {
    padding: 16px;
  }
  .config-clinic-fields-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .config-footer-actions {
    flex-direction: row;
  }
}

/* ============================================================================
   28. FULL-PAGE PDP & VALUE PICKER INTEGRATION (SECTIONS 3, 10, 16, 17)
   ============================================================================ */
#product-modal-view.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: var(--snow-white) !important;
  z-index: 2800 !important;
  display: none !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#product-modal-view.modal-backdrop.open {
  display: block !important;
}

#product-modal-view .modal-window {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 1360px !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 36px 48px 90px 48px !important;
  position: relative !important;
  overflow: visible !important;
}

#product-modal-view .modal-close-x {
  position: fixed !important;
  top: 24px !important;
  right: 32px !important;
  z-index: 2850 !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--pure-white) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

#modal-rx-configuration-block {
  display: none !important;
}

/* Value Picker Modal (Section 10) */
.rx-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.45);
  backdrop-filter: blur(2px);
  z-index: 3600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rx-picker-window {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.rx-picker-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--snow-white);
}

.rx-picker-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.rx-picker-title {
  font-size: 0.95rem;
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 2px 0 0 0;
  color: var(--jet-black);
}

.rx-picker-close-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.rx-picker-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
}

.rx-picker-tab {
  flex: 1;
  padding: 12px;
  background: var(--pure-white);
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
}

.rx-picker-tab.active {
  color: var(--jet-black);
  border-bottom-color: var(--jet-black);
  background: var(--snow-white);
}

.rx-picker-scroll-area {
  padding: 16px;
  overflow-y: auto;
  max-height: 320px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rx-picker-val-btn {
  padding: 10px 4px;
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rx-picker-val-btn:hover {
  border-color: var(--jet-black);
  background: var(--bg-secondary);
}

.rx-picker-val-btn.selected {
  background: var(--jet-black) !important;
  color: var(--pure-white) !important;
  border-color: var(--jet-black) !important;
}

.rx-picker-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--snow-white);
}

@media (max-width: 768px) {
  #product-modal-view .modal-window {
    padding: 20px 16px 80px 16px !important;
  }
  #product-modal-view .modal-close-x {
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
  }
}

/* ==========================================================================
   29. DEDICATED PDP LAYOUT, FLOATING CONTROLS & VERIFIED BENEFIT BADGES
   ========================================================================== */
#product-modal-view .editorial-story-grid {
  display: grid;
  grid-template-columns: 56% 44%;
  gap: 52px;
  align-items: start;
}

@media (min-width: 900px) and (max-width: 1199px) {
  #product-modal-view .editorial-story-grid {
    grid-template-columns: 52% 48%;
    gap: 28px;
  }
}

@media (max-width: 899px) {
  #product-modal-view .editorial-story-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.pdp-gallery-floating-actions {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  z-index: 15;
}

.pdp-floating-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 40px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jet-black);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pdp-floating-action-btn:hover {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.pdp-floating-action-btn svg {
  flex-shrink: 0;
}

.pdp-frame-subtitle {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-brown);
  margin-bottom: 12px;
}

.pdp-verified-benefits-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0 14px 0;
  padding: 14px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
}

@media (min-width: 600px) {
  .pdp-verified-benefits-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pdp-benefit-badge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pdp-benefit-badge svg {
  color: var(--umber-brown);
  flex-shrink: 0;
  margin-top: 2px;
}

.pdp-benefit-text {
  display: flex;
  flex-direction: column;
}

.pdp-benefit-text strong {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--jet-black);
  line-height: 1.25;
}

.pdp-benefit-text span {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.pdp-service-highlights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.pdp-service-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.pdp-service-pill svg {
  color: var(--umber-brown);
  flex-shrink: 0;
}

.btn-pdp-select-lenses {
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-pdp-select-lenses:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn-card-see-frame {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--umber-brown);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: color 0.18s ease;
}

.btn-card-see-frame:hover {
  color: var(--jet-black);
}

/* Sizing Schematic SVG & Dimension Chips (Section A Polish) */
.pdp-dimension-svg {
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 8px 12px;
}

.pdp-dim-chips span {
  white-space: nowrap;
}

/* Sticky Purchase Bar on Scroll (Section C Polish) */
.pdp-sticky-purchase-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding: 12px 28px;
  z-index: 2900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  max-width: 1360px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .pdp-sticky-purchase-bar {
    padding: 10px 16px;
  }
}

/* Review Empty State (Section G Polish) */
.pdp-reviews-empty-state {
  border-radius: 4px;
}

/* ============================================================================
   28. FINAL ENHANCEMENT: PRODUCT COMPARISON & SIZE GUIDE (PHASE 3)
   ============================================================================ */
.compare-floating-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(139, 115, 85, 0.12);
  padding: 10px 18px;
  z-index: 2950;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
  animation: compareSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes compareSlideUp {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.compare-bar-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-bar-thumb-item {
  position: relative;
  width: 44px;
  height: 33px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.compare-bar-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-bar-remove-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--jet-black);
  color: var(--pure-white);
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.compare-bar-remove-btn:hover {
  opacity: 1;
}

.compare-bar-label {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-card-compare {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-card-compare:hover {
  border-color: var(--umber-brown);
  color: var(--jet-black);
}

.btn-card-compare.active {
  background: var(--bg-secondary);
  border-color: var(--umber-brown);
  color: var(--umber-brown);
  font-weight: 700;
}

/* Side-by-Side Comparison Modal Grid */
.compare-grid-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 14px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.84rem;
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  vertical-align: top;
  text-align: left;
}

.compare-table th {
  background: var(--bg-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  width: 180px;
}

.compare-table td {
  background: var(--pure-white);
  color: var(--text-primary);
}

.compare-prod-head {
  text-align: center !important;
  background: var(--bg-primary) !important;
}

.compare-prod-img {
  width: 100%;
  max-width: 160px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 8px auto;
  display: block;
}

.compare-prod-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.compare-prod-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jet-black);
  margin-bottom: 10px;
}

/* Keyboard Navigation Focused State for Search Autocomplete */
.header-search-item.keyboard-focused {
  background: var(--bg-secondary) !important;
  outline: 2px solid var(--umber-brown) !important;
  outline-offset: -2px;
}

@media (max-width: 768px) {
  .compare-floating-bar {
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 8px 12px;
    gap: 10px;
  }
  .compare-bar-label {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   v2 ADDENDUM: LOADING SKELETONS, COOKIE BANNER & TOAST ACCESSIBILITY
   ========================================================================== */

/* Shimmer Loading Skeletons (Section D) */
.spectico-skeleton {
  background: linear-gradient(90deg, #edeae5 25%, #f7f6f3 50%, #edeae5 75%);
  background-size: 200% 100%;
  animation: specticoSkeletonShimmer 1.5s infinite;
  border-radius: 2px;
}
@keyframes specticoSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spectico-skeleton {
    animation: none !important;
    background: #edeae5 !important;
  }
}
.skeleton-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.skeleton-card {
  border: 1px solid var(--border-subtle);
  background: var(--pure-white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 2px;
}
.skeleton-text {
  height: 14px;
  width: 60%;
}
.skeleton-title {
  height: 20px;
  width: 80%;
}
.skeleton-price {
  height: 16px;
  width: 40%;
}

/* Cookie Consent Floating Banner (Section H) */
.spectico-cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  max-width: 440px;
  width: calc(100% - 48px);
  background: #11100E;
  color: #FFFFFF;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 2400;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(150%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.spectico-cookie-banner.visible {
  transform: translateY(0);
}
.spectico-cookie-content {
  max-width: 100%;
}
.spectico-cookie-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
  color: #FAF9F6;
}
.spectico-cookie-text {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: #C2BFB8;
  line-height: 1.45;
  margin: 0;
}
.spectico-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.btn-cookie-primary {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-cookie-primary:hover {
  background: #FAF9F6;
}
.btn-cookie-outline {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid #555555;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.btn-cookie-outline:hover {
  border-color: #AAAAAA;
}
.btn-cookie-link {
  background: transparent;
  color: #8B7355;
  border: none;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}
.btn-cookie-link:hover {
  color: #FAF9F6;
}

@media (max-width: 899px) {
  .spectico-cookie-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 18px;
    gap: 14px;
  }
  .spectico-cookie-actions {
    flex-direction: column;
    gap: 8px;
  }
  .spectico-cookie-actions button {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================================
   SPECTICO PREMIUM CARD PAYMENT CHECKOUT SYSTEM
   3-Step Stepper, 3D Realistic Payment Card, Secure Payment Form & Breakdown
   ========================================================================= */

/* 1. Centered 3-Step Checkout Progress Stepper */
.checkout-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  margin-bottom: 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 4px;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  user-select: none;
}
.stepper-step:hover {
  color: var(--jet-black);
}
.stepper-step .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1.5px solid var(--border-subtle);
  background: var(--pure-white);
  color: var(--text-secondary);
  transition: all 0.25s ease;
}
.stepper-step .step-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stepper-step.active {
  color: var(--jet-black);
}
.stepper-step.active .step-num {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}
.stepper-step.active .step-label {
  font-weight: 700;
  color: var(--jet-black);
}
.stepper-step.completed {
  color: var(--jet-black);
}
.stepper-step.completed .step-num {
  background: var(--umber-brown);
  border-color: var(--umber-brown);
  color: var(--pure-white);
}
.stepper-connector {
  width: 38px;
  height: 2px;
  background: var(--border-subtle);
  transition: background 0.25s ease;
}
.stepper-connector.completed {
  background: var(--umber-brown);
}

/* 2. Payment Two-Column Luxury Layout */
.payment-two-col-layout {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: 36px;
  align-items: start;
}

/* 3. Left Column: Method-Aware Shared 3D Payment Animation Stage */
.payment-visual-column {
  display: flex;
  flex-direction: column;
}
.payment-visual-stage {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 14px;
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.payment-stage-panel {
  width: 100%;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.payment-stage-panel.active {
  display: block !important;
}
.payment-stage-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #111215;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.payment-stage-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stage-floating-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 18, 18, 0.88);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 5px 14px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.stage-floating-pill.cod-status-pill {
  background: rgba(36, 24, 12, 0.94);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.4);
  display: inline-flex;
  align-items: center;
}

/* UPI Phone Scanning Laser Effect */
.upi-scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.upi-laser-sweep {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(232, 186, 88, 0.85) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(232, 186, 88, 0.9);
  animation: upiLaserScan 3.5s ease-in-out infinite;
}
@keyframes upiLaserScan {
  0% { top: 20%; opacity: 0; }
  15% { opacity: 0.85; }
  50% { top: 68%; opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { top: 20%; opacity: 0; }
}

/* UPI Pending & Payment Verification Pulse Radar */
.upi-pulse-radar-container {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upi-radar-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--accent-champagne, #D4AF37);
  opacity: 0;
  animation: upi-radar-pulse 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.upi-radar-ring.ring-2 {
  animation-delay: 1.1s;
}

@keyframes upi-radar-pulse {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(1.65); opacity: 0; }
}

.upi-phone-icon-center {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #16171A;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* =========================================================================
   UPI SMARTPHONE INTERACTIVE ANIMATION SCENE
   ========================================================================= */
.upi-stage-wrap {
  background: linear-gradient(145deg, #181715, #0F0E0D);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.upi-phone-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.upi-smartphone-body {
  width: 176px;
  height: 202px;
  background: #181715;
  border-radius: 24px;
  border: 4px solid #2B2824;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.upi-phone-speaker {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: #3A3530;
  border-radius: 2px;
  z-index: 5;
}
.upi-phone-camera {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0A0A0A;
  border: 1px solid #3A3530;
  z-index: 5;
}
.upi-phone-screen {
  flex: 1;
  background: #100F0E;
  margin: 2px;
  border-radius: 18px;
  padding: 16px 8px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  color: #fff;
  position: relative;
}
.upi-screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.upi-screen-brand {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #D6C5B0;
}
.upi-viewfinder-box {
  width: 66px;
  height: 66px;
  margin: 6px auto 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.upi-viewfinder-box .bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #D4AF37;
  border-style: solid;
}
.upi-viewfinder-box .bracket.top-left { top: 0; left: 0; border-width: 2px 0 0 2px; }
.upi-viewfinder-box .bracket.top-right { top: 0; right: 0; border-width: 2px 2px 0 0; }
.upi-viewfinder-box .bracket.bottom-left { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.upi-viewfinder-box .bracket.bottom-right { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.upi-laser-line {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: upi-laser-sweep 2.2s infinite ease-in-out;
}
@keyframes upi-laser-sweep {
  0% { top: 10%; opacity: 0.3; }
  50% { top: 90%; opacity: 1; }
  100% { top: 10%; opacity: 0.3; }
}
.upi-screen-title {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.upi-screen-subtitle {
  font-size: 0.52rem;
  color: rgba(255,255,255,0.65);
}
.upi-screen-footer {
  display: flex;
  justify-content: center;
  gap: 4px;
  font-size: 0.5rem;
  color: #D4AF37;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}
.upi-app-icon {
  background: rgba(255,255,255,0.08);
  padding: 1px 4px;
  border-radius: 2px;
}

/* =========================================================================
   NET BANKING ARCHITECTURAL ANIMATION SCENE
   ========================================================================= */
.netbanking-stage-wrap {
  background: #141312;
  position: relative;
  overflow: hidden;
}
.nb-building-scene {
  width: 100%;
  height: 100%;
  position: relative;
}
.nb-bank-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nb-portal-light {
  animation: nb-portal-glow-pulse 3s infinite alternate ease-in-out;
}
@keyframes nb-portal-glow-pulse {
  0% { opacity: 0.65; }
  100% { opacity: 0.95; }
}
.nb-ambient-beam.beam-left {
  animation: nb-beam-left-drift 4s infinite alternate ease-in-out;
}
.nb-ambient-beam.beam-right {
  animation: nb-beam-right-drift 4s 2s infinite alternate ease-in-out;
}
@keyframes nb-beam-left-drift {
  0% { opacity: 0.03; }
  100% { opacity: 0.09; }
}
@keyframes nb-beam-right-drift {
  0% { opacity: 0.03; }
  100% { opacity: 0.09; }
}

/* =========================================================================
   COD DELIVERY MOTORCYCLE ANIMATION SCENE
   ========================================================================= */
.cod-stage-wrap {
  background: #1A1816;
  position: relative;
  overflow: hidden;
}
.cod-motorcycle-scene {
  width: 100%;
  height: 100%;
  position: relative;
}
.cod-bike-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Rotating Wheels */
.cod-wheel .cod-spokes {
  transform-origin: 0 0;
  animation: cod-wheel-rotate 1.1s linear infinite;
}
@keyframes cod-wheel-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Bobbing Rider & Motorcycle Suspension */
.cod-rider-group {
  animation: cod-bike-bob 0.85s ease-in-out infinite alternate;
}
@keyframes cod-bike-bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2.5px); }
}
/* Scrolling Road Lines */
.road-dash.dash-1 {
  animation: cod-road-dash 0.65s linear infinite;
}
.road-dash.dash-2 {
  animation: cod-road-dash 0.9s linear infinite;
}
@keyframes cod-road-dash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 44; }
}
/* Exhaust Puff Float */
.exhaust-puff.puff-1 {
  animation: cod-exhaust-float 0.85s ease-out infinite;
}
.exhaust-puff.puff-2 {
  animation: cod-exhaust-float 0.85s 0.42s ease-out infinite;
}
@keyframes cod-exhaust-float {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0.6; }
  100% { transform: translate(-20px, -8px) scale(1.6); opacity: 0; }
}
.nb-building-signboard {
  position: absolute;
  top: 13.5%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 18, 20, 0.94);
  color: #f5e5c2;
  border: 1px solid rgba(212, 175, 55, 0.45);
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 4;
}
.nb-signboard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.pay-pill-badge-sub {
  font-size: 0.62rem;
  color: #d97706;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 1px;
}
.pay-method-pill.active .pay-pill-badge-sub {
  color: #fef3c7;
}

@media (prefers-reduced-motion: reduce) {
  .upi-laser-sweep {
    animation: none;
    display: none;
  }
}

.spectico-card-scene {
  perspective: 1000px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 12px;
}
.spectico-credit-card {
  width: 100%;
  aspect-ratio: 1.586;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.3, 0.64, 1);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.spectico-credit-card.is-flipped {
  transform: rotateY(180deg);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .spectico-card-scene:hover .spectico-credit-card:not(.is-flipped) {
    transform: rotateX(4deg) rotateY(-4deg) translateY(-4px);
  }
  .spectico-card-scene:hover .spectico-credit-card.is-flipped {
    transform: rotateY(180deg) rotateX(-4deg) translateY(-4px);
  }
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: linear-gradient(135deg, #1f1f1f 0%, #111111 48%, #1d1d1d 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  overflow: hidden;
  color: #FFFFFF;
}

/* Front Face Subtle Metallic Sheen */
.card-face-front::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.card-front-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.card-chip-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-chip-svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.card-brand-tier {
  text-align: right;
}
.card-brand-spectico {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #FFFFFF;
}
.card-tier-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(212, 175, 55, 0.9);
  font-weight: 600;
  margin-top: 2px;
}

.card-front-middle {
  position: relative;
  z-index: 2;
  margin: 10px 0;
}
.card-number-display {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.card-front-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}
.card-label-caption {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  margin-bottom: 2px;
}
.card-holder-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-expiry-val {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.86rem;
  font-weight: 600;
  color: #FFFFFF;
}
.card-network-logo {
  display: flex;
  align-items: center;
}

/* Back Face */
.card-face-back {
  transform: rotateY(180deg);
  padding: 0;
  justify-content: flex-start;
}
.card-back-magnetic-strip {
  width: 100%;
  height: 42px;
  background: #080808;
  margin-top: 20px;
}
.card-back-cvv-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px 0;
  gap: 12px;
}
.card-signature-strip {
  flex: 1;
  height: 32px;
  background: #EAE6DF;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.card-signature-strip::after {
  content: 'SPECTICO AUTHENTIC OPTICAL';
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.58rem;
  color: rgba(0,0,0,0.22);
  letter-spacing: 0.2em;
  font-family: var(--font-serif);
}
.card-cvv-box {
  background: #FFFFFF;
  color: #111111;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  padding: 6px 12px;
  border-radius: 4px;
  min-width: 44px;
  text-align: center;
}
.card-back-footer {
  padding: 16px 24px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-back-disclaimer {
  font-size: 0.54rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  max-width: 220px;
}

/* Flip Affordance Button */
.btn-flip-card-affordance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin: 0 auto 16px;
  transition: all 0.2s ease;
}
.btn-flip-card-affordance:hover {
  background: var(--bg-secondary);
  color: var(--jet-black);
  border-color: var(--jet-black);
}

/* Truthful Trust Signals Box */
.payment-trust-signals-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  padding: 14px 16px;
  border-radius: 6px;
}
.payment-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75rem;
}
.payment-trust-item strong {
  display: block;
  color: var(--jet-black);
  font-weight: 600;
  font-size: 0.78rem;
}
.payment-trust-item span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.72rem;
  margin-top: 1px;
}

/* 4. Right Column: Payment Methods & Inputs */
.payment-form-column {
  display: flex;
  flex-direction: column;
}
.payment-methods-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.pay-method-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pay-method-pill:hover {
  border-color: var(--jet-black);
  color: var(--jet-black);
}
.pay-method-pill.active {
  background: var(--jet-black);
  border-color: var(--jet-black);
  color: var(--pure-white);
}

.card-input-with-brand {
  position: relative;
  display: flex;
  align-items: center;
}
.card-input-with-brand .form-input-control {
  padding-right: 90px;
  letter-spacing: 0.08em;
}
.card-brand-badge-pill {
  position: absolute;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  color: var(--jet-black);
  text-transform: uppercase;
}

.upi-quick-app-tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 4px 10px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  color: var(--jet-black);
  cursor: pointer;
}
.upi-quick-app-tag:hover {
  border-color: var(--jet-black);
}

.nb-bank-card {
  padding: 10px 8px;
  background: var(--pure-white);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--jet-black);
  cursor: pointer;
  transition: all 0.2s ease;
}
.nb-bank-card:hover {
  border-color: var(--jet-black);
}
.nb-bank-card.active {
  background: var(--jet-black);
  color: var(--pure-white);
  border-color: var(--jet-black);
}

/* Authoritative Amount Breakdown Card */
.payment-order-breakdown-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 16px 18px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.breakdown-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--umber-brown);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
.breakdown-line-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.breakdown-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
}
.breakdown-total-row span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--jet-black);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.breakdown-total-row strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--jet-black);
  font-family: var(--font-sans);
}

/* Primary Payment CTA */
.btn-payment-primary {
  width: 100%;
  padding: 16px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-payment-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 5. Responsive Media Queries (1024px, 768px, 390px, 360px) */
@media (max-width: 899px) {
  .payment-two-col-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .spectico-card-scene {
    max-width: 340px;
  }
  .card-number-display {
    font-size: 1.1rem;
  }
}

@media (max-width: 639px) {
  .checkout-stepper-bar {
    padding: 10px 12px;
    gap: 6px;
  }
  .stepper-step .step-label {
    font-size: 0.72rem;
  }
  .stepper-connector {
    width: 20px;
  }
  .spectico-card-scene {
    max-width: 100%;
  }
  .card-face {
    padding: 16px 18px;
  }
  .card-number-display {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }
  .payment-methods-selector {
    flex-direction: column;
    gap: 6px;
  }
  .pay-method-pill {
    padding: 10px 14px;
    justify-content: flex-start;
  }
}

/* ============================================================================
   26. SPECTICO UNIVERSAL OTP SYSTEM & CHOMPING MASCOT ANIMATION
   ============================================================================ */
.spectico-otp-modal-view {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  background: var(--snow-white, #FAF9F6);
  border-radius: 12px;
  padding: 8px 4px;
}

.spectico-otp-eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber-brown, #8B7355);
  margin-bottom: 8px;
}

.spectico-otp-title {
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--jet-black, #1A1815);
  margin-bottom: 8px;
  transition: transform 0.2s ease;
}

.spectico-otp-title.shake {
  animation: otp-title-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes otp-title-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.spectico-otp-desc {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.85rem;
  color: var(--text-secondary, #6E685F);
  line-height: 1.5;
  margin-bottom: 8px;
}

.spectico-otp-destination-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pure-white, #FFFFFF);
  border: 1px solid var(--border-subtle, #E6E1D8);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jet-black, #1A1815);
  margin-bottom: 24px;
}

.spectico-otp-destination-badge .change-link {
  font-size: 0.75rem;
  color: var(--umber-brown, #8B7355);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
}

/* ==========================================================================
   SPECTICO MEASURED OTP PAC-MAN OVERLAY & VERIFIED SUCCESS (PARTS 4 & 6)
   ========================================================================== */

.otp-input-stage,
.spectico-otp-stage {
  position: relative;
  overflow: visible;
  isolation: isolate;
  width: 100%;
  max-width: 380px;
  margin: 18px auto 20px auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.otp-pacman-mover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 44px;
  height: 44px;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
}

.otp-pacman-mover.is-moving {
  opacity: 1;
}

.otp-pacman-character {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.otp-pacman-mouth-open,
.otp-pacman-mouth-closed {
  fill: #ff4935;
  transition: fill 0.25s ease;
}

.otp-pacman-mover.is-error .otp-pacman-mouth-open,
.otp-pacman-mover.is-error .otp-pacman-mouth-closed {
  fill: #DC2626;
}

.otp-pacman-mouth-open {
  opacity: 1;
}

.otp-pacman-mouth-closed {
  opacity: 0;
}

.otp-pacman-mover.is-moving .otp-pacman-mouth-open {
  animation: otp-pacman-open 180ms steps(1, end) infinite;
}

.otp-pacman-mover.is-moving .otp-pacman-mouth-closed {
  animation: otp-pacman-closed 180ms steps(1, end) infinite;
}

@keyframes otp-pacman-open {
  0%, 49.9% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes otp-pacman-closed {
  0%, 49.9% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

.otp-input-stage [data-otp-slot],
.spectico-otp-stage [data-otp-slot] {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .otp-pacman-mover.is-moving .otp-pacman-mouth-open,
  .otp-pacman-mover.is-moving .otp-pacman-mouth-closed {
    animation-duration: 360ms;
  }
}

/* Shake Animation for Invalid Code */
.otp-pacman-mover.is-error {
  animation: otp-mover-shake 0.4s ease-in-out;
}

@keyframes otp-mover-shake {
  0%, 100% { transform: translate(var(--target-x, 0), var(--target-y, 0)); }
  20%, 60% { transform: translate(calc(var(--target-x, 0) - 8px), var(--target-y, 0)); }
  40%, 80% { transform: translate(calc(var(--target-x, 0) + 8px), var(--target-y, 0)); }
}

/* Verified Success Component (Part 6) */
.otp-verified-success {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 12px;
  animation: otp-success-fade-in 0.35s ease-out forwards;
}

@keyframes otp-success-fade-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.otp-success-check {
  width: 52px;
  height: 52px;
  background-color: #22C55E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
  margin-bottom: 14px;
  animation: otp-check-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes otp-check-pop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.otp-success-check svg {
  width: 32px;
  height: 32px;
  display: block;
}

.otp-success-check svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: otp-check-draw 0.35s 0.15s ease-out forwards;
}

@keyframes otp-check-draw {
  to { stroke-dashoffset: 0; }
}

.otp-verified-success h3 {
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #16A34A;
  margin: 0 0 6px 0;
}

.otp-verified-success p {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.86rem;
  color: var(--text-secondary, #555047);
  margin: 0 0 14px 0;
  line-height: 1.45;
  max-width: 320px;
}

.otp-success-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #16A34A;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  padding: 4px 12px;
}

/* Confetti particles (Part 6) */
.otp-success-confetti {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.otp-confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  opacity: 0;
  animation: otp-confetti-burst 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.otp-confetti-piece:nth-child(even) {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.otp-confetti-piece.tone-0 { background-color: #22C55E; }
.otp-confetti-piece.tone-1 { background-color: #16A34A; }
.otp-confetti-piece.tone-2 { background-color: #4ADE80; }
.otp-confetti-piece.tone-3 { background-color: #86EFAC; }

@keyframes otp-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.3) rotate(0deg);
  }
  65% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x, 0), calc(var(--y, 40px) * -1)) scale(1) rotate(var(--r, 90deg));
  }
}

/* Staged OTP Digits Row */
.spectico-otp-digits-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.spectico-otp-input-box {
  width: 48px;
  height: 54px;
  background: var(--pure-white, #FFFFFF);
  border: 1.5px solid var(--border-subtle, #D8D2C5);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--jet-black, #1A1815);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s ease, opacity 0.22s ease, background-color 0.2s ease;
  caret-color: var(--umber-brown, #8B7355);
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.spectico-otp-input-box::-webkit-outer-spin-button,
.spectico-otp-input-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.spectico-otp-input-box:focus {
  border-color: var(--jet-black, #1A1815);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.16);
  background: var(--pure-white, #FFFFFF);
}

.spectico-otp-input-box.filled {
  border-color: var(--umber-brown, #8B7355);
}

.spectico-otp-input-box.eaten {
  transform: scale(0.3);
  opacity: 0;
  border-color: transparent;
  background: transparent;
}

.spectico-otp-input-box.error-box {
  border-color: #EF4444;
  background: #FEF2F2;
  animation: box-shake 0.4s ease-in-out;
}

@keyframes box-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.spectico-otp-input-box.faded-out {
  opacity: 0;
  transform: scale(0.4);
}

/* Status & Feedback Area */
.spectico-otp-feedback-area {
  min-height: 24px;
  margin-bottom: 12px;
}

.spectico-otp-status-msg {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.82rem;
  line-height: 1.4;
  display: none;
}

.spectico-otp-status-msg.error {
  display: block;
  color: var(--accent-rose, #C0392B);
  font-weight: 600;
}

.spectico-otp-status-msg.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--umber-brown, #8B7355);
  font-weight: 500;
}

.spectico-otp-status-msg.success {
  display: block;
  color: var(--accent-emerald, #2E7D32);
  font-weight: 600;
}

.spectico-otp-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 115, 85, 0.25);
  border-top-color: var(--umber-brown, #8B7355);
  border-radius: 50%;
  animation: otp-spin 0.65s linear infinite;
}

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

/* Resend Countdown & Action Row */
.spectico-otp-resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.8rem;
  color: var(--text-secondary, #6E685F);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle, #E6E1D8);
}

.btn-otp-resend {
  background: none;
  border: none;
  color: var(--umber-brown, #8B7355);
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.btn-otp-resend:disabled {
  color: var(--text-muted, #A8A299);
  cursor: not-allowed;
  text-decoration: none;
}

.btn-otp-resend:hover:not(:disabled) {
  color: var(--jet-black, #1A1815);
}

/* Development Preview Toolbar */
.spectico-otp-dev-preview {
  margin-top: 20px;
  padding: 10px 14px;
  background: rgba(139, 115, 85, 0.08);
  border: 1px dashed var(--umber-brown, #8B7355);
  border-radius: 8px;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 0.72rem;
  color: var(--text-secondary, #6E685F);
}

.spectico-otp-dev-preview-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--umber-brown, #8B7355);
  margin-bottom: 6px;
  display: block;
}

.spectico-otp-dev-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-otp-preview-pill {
  background: var(--pure-white, #FFFFFF);
  border: 1px solid var(--border-subtle, #D8D2C5);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--jet-black, #1A1815);
  transition: all 0.15s ease;
}

.btn-otp-preview-pill:hover {
  background: var(--jet-black, #1A1815);
  color: #FFFFFF;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .spectico-otp-title.shake {
    animation: none;
  }
  .spectico-chomper-svg .chomper-mouth-top,
  .spectico-chomper-svg .chomper-mouth-bottom {
    animation: none;
  }
  .spectico-chomper-wrapper {
    transition: opacity 0.1s linear;
  }
  .spectico-otp-input-box {
    transition: opacity 0.1s linear;
  }
}

/* Mobile Responsive Optimization */
@media (max-width: 480px) {
  .spectico-otp-modal-view {
    padding: 4px 0;
  }
  .spectico-otp-title {
    font-size: 1.45rem;
  }
  .spectico-otp-digits-row {
    gap: 6px;
  }
  .spectico-otp-input-box {
    width: 38px;
    height: 48px;
    font-size: 1.35rem;
  }
  .spectico-chomper-wrapper {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .spectico-chomper-svg,
  .spectico-chomper-checkmark {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================================
   MOBILE COMMERCE SUPPRESSION ON TABLET & DESKTOP (>= 768px)
   ============================================================================ */
@media (min-width: 768px) {
  .mobile-shopping-header,
  .mobile-category-rail,
  .mobile-bottom-navigation,
  .hero-mobile-overlay {
    display: none !important;
  }
}

/* ============================================================================
   AMAZON-STYLE MOBILE SHOPPING COMMERCE UX (< 768px)
   ============================================================================ */
@media (max-width: 767.98px) {
  /* Hide desktop header rows and announcement bar clutter */
  .announcement-bar,
  .header-main,
  .header-inner,
  .header-nav-row {
    display: none !important;
  }

  /* Safe Area and Bottom Navigation Cushion */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  main {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --------------------------------------------------------------------------
     1. STICKY COMPACT MOBILE HEADER (Amazon Mobile Commerce Pattern)
     -------------------------------------------------------------------------- */
  .mobile-shopping-header {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2200 !important;
    background: var(--snow-white, #FAF9F5) !important;
    border-bottom: 1px solid var(--border-subtle, #E6E1D8) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  }

  .mobile-header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 52px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .mobile-header-brand-wrap {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .mobile-header-brand,
  .mobile-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    color: var(--jet-black, #1A1815) !important;
  }

  .mobile-header-logo-img,
  .mobile-brand-logo-img {
    width: 29px !important;
    height: 29px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .mobile-header-brand-text,
  .mobile-brand-text-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
  }

  .mobile-header-wordmark,
  .mobile-brand-wordmark {
    font-family: var(--font-serif, "Fraunces", serif) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--jet-black, #1A1815) !important;
  }

  .mobile-header-subtext,
  .mobile-brand-subtext {
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.44rem !important;
    letter-spacing: 0.14em !important;
    color: var(--umber-brown, #8B7355) !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
  }

  .mobile-nav-toggle-btn,
  .mobile-hamburger-btn {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--jet-black, #1A1815) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .mobile-header-action-btn {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--jet-black, #1A1815) !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
  }

  .mobile-header-action-btn:active {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .mobile-header-action-btn .badge-counter {
    position: absolute !important;
    top: 3px !important;
    right: 2px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    background: var(--umber-brown, #8B7355) !important;
    color: #FFFFFF !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* Wide Search Bar Row */
  .mobile-search-row {
    padding: 0 12px 10px 12px !important;
    position: relative !important;
  }

  .mobile-search-box {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle, #D8D2C5) !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .mobile-search-box:focus-within {
    border-color: var(--umber-brown, #8B7355) !important;
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.18) !important;
  }

  .mobile-search-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-right: 8px !important;
    color: var(--text-muted, #8C857B) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .mobile-search-input {
    flex: 1 !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.84rem !important;
    color: var(--jet-black, #1A1815) !important;
    padding: 0 !important;
    outline: none !important;
  }

  .mobile-search-input::placeholder {
    color: var(--text-muted, #A8A299) !important;
    font-size: 0.80rem !important;
  }

  .mobile-search-clear-btn {
    background: transparent !important;
    border: none !important;
    font-size: 1.25rem !important;
    color: var(--text-muted, #8C857B) !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    line-height: 1 !important;
  }

  .mobile-search-dropdown {
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 12px !important;
    right: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle, #D8D2C5) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 2300 !important;
    max-height: 340px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* --------------------------------------------------------------------------
     2. HORIZONTAL VISUAL CATEGORY RAIL (Amazon Visual Pill Pattern)
     -------------------------------------------------------------------------- */
  .mobile-category-rail {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    background: var(--pure-white, #FFFFFF) !important;
    border-bottom: 1px solid var(--border-subtle, #E6E1D8) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-category-rail::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-cat-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-width: 54px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    touch-action: manipulation !important;
  }

  .mobile-cat-thumb-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #F5F2EB !important;
    border: 1.5px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-cat-thumb {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  .mobile-cat-label {
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: var(--jet-black, #1A1815) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .mobile-cat-pill.active .mobile-cat-thumb-box {
    border-color: var(--umber-brown, #8B7355) !important;
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.22) !important;
    background: var(--snow-white, #FAF9F5) !important;
  }

  .mobile-cat-pill.active .mobile-cat-label {
    color: var(--umber-brown, #8B7355) !important;
    font-weight: 700 !important;
  }

  /* --------------------------------------------------------------------------
     3. CONTROLLED MOBILE HERO SECTION (< 768px)
     -------------------------------------------------------------------------- */
  .hero-slider-section,
  .hero-video-section {
    min-height: auto !important;
    height: clamp(200px, 32svh, 300px) !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-fullwidth-video-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }

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

  .hero-mobile-overlay {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.65) 100%) !important;
    align-items: flex-end !important;
    padding: 16px 14px !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
  }

  .hero-mobile-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .hero-mobile-eyebrow {
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #ECE7DE !important;
  }

  .hero-mobile-title {
    font-family: var(--font-serif, "Fraunces", serif) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  }

  .btn-hero-mobile-cta {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 6px !important;
    padding: 7px 14px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.15s ease !important;
  }

  .btn-hero-mobile-cta:active {
    transform: scale(0.98) !important;
  }

  /* --------------------------------------------------------------------------
     4. COMPACT 2-COLUMN PRODUCT CATALOGUE & CARDS (< 768px)
     -------------------------------------------------------------------------- */
  .products-grid-4,
  .products-grid,
  .woocommerce ul.products,
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  @media (max-width: 340px) {
    .products-grid-4,
    .products-grid,
    .woocommerce ul.products,
    ul.products {
      grid-template-columns: 1fr !important;
    }
  }

  .product-card {
    background: #FFFFFF !important;
    border: 1px solid var(--border-subtle, #ECE7DE) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .product-img-wrapper {
    aspect-ratio: 1 / 1 !important;
    background: #FAF9F5 !important;
    border-radius: 2px !important;
    position: relative !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .product-img-box {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-img-box img {
    max-width: 92% !important;
    max-height: 92% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
  }

  .product-action-floating {
    top: 6px !important;
    right: 6px !important;
  }

  .product-action-floating .icon-circle-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .product-action-floating .icon-circle-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Suppress compare buttons on mobile cards for clean layout */
  .btn-card-compare,
  .product-action-floating button:nth-child(2) {
    display: none !important;
  }

  .product-details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }

  .product-meta-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .product-title,
  .product-card h3 {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    min-height: 2.1em !important;
    color: var(--jet-black, #1A1815) !important;
  }

  .product-category-label {
    font-size: 0.65rem !important;
    color: var(--umber-brown, #8B7355) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 2px 0 4px 0 !important;
  }

  .current-price,
  .product-price {
    font-family: var(--font-serif, "Fraunces", serif) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--jet-black, #1A1815) !important;
  }

  .btn-card-see-frame {
    display: none !important;
  }

  .product-card-footer {
    margin-top: 6px !important;
  }

  .card-cta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .btn-card-add,
  .btn-card-tryon {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
  }

  /* --------------------------------------------------------------------------
     5. FIXED BOTTOM NAVIGATION BAR (Amazon Commerce Pattern)
     -------------------------------------------------------------------------- */
  .mobile-bottom-navigation {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--border-subtle, #E6E1D8) !important;
    z-index: 2500 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-nav-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted, #7A746B) !important;
    text-decoration: none !important;
    gap: 2px !important;
    padding: 4px 0 !important;
    touch-action: manipulation !important;
    transition: color 0.15s ease !important;
  }

  .mobile-nav-tab svg {
    stroke: currentColor !important;
    transition: transform 0.15s ease !important;
  }

  .mobile-tab-label {
    font-family: var(--font-sans, "DM Sans", sans-serif) !important;
    font-size: 0.62rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
  }

  .mobile-nav-tab.active {
    color: var(--jet-black, #1A1815) !important;
  }

  .mobile-nav-tab.active svg {
    stroke: var(--umber-brown, #8B7355) !important;
    stroke-width: 2.3px !important;
    transform: translateY(-1px) !important;
  }

  .mobile-nav-tab.active .mobile-tab-label {
    color: var(--umber-brown, #8B7355) !important;
    font-weight: 700 !important;
  }

  .mobile-tab-badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    background: var(--umber-brown, #8B7355) !important;
    color: #FFFFFF !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* --------------------------------------------------------------------------
     6. MOBILE PDP MODAL OPTIMIZATIONS
     -------------------------------------------------------------------------- */
  #product-modal-view .modal-window {
    padding: 16px 14px 80px 14px !important;
    border-radius: 0 !important;
  }

  #product-modal-view .editorial-story-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .mobile-sticky-pdp-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2900 !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--border-subtle, #E6E1D8) !important;
    padding: 10px 14px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
  }

  /* General Section Padding reduction to eliminate endless mobile scrolling */
  .section-padding,
  .section-padding-lg {
    padding: 28px 0 !important;
  }

  /* ==========================================================================
     PHASE 2: MOBILE ACCORDION FOOTER
     ========================================================================== */
  .site-footer {
    background-color: #1A1815 !important;
    color: #FAF9F6 !important;
    padding: 32px 0 calc(76px + env(safe-area-inset-bottom, 0px)) 0 !important;
  }
  .footer-grid-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .footer-col-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
  }
  .footer-col-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .footer-accordion-toggle {
    pointer-events: auto !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 4px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .footer-col-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #E8DCCB !important;
    margin: 0 !important;
  }
  .footer-accordion-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: #A3A099 !important;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), color 0.2s ease !important;
  }
  .footer-col-item.is-open .footer-accordion-icon {
    transform: rotate(45deg) !important;
    color: #FAF9F6 !important;
  }
  .footer-accordion-panel {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
  }
  .footer-col-item.is-open .footer-accordion-panel {
    max-height: 520px !important;
    opacity: 1 !important;
    padding: 4px 4px 16px 4px !important;
  }
  .footer-links {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-links li {
    margin: 0 !important;
  }
  .footer-links li a {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.84rem !important;
    color: rgba(250, 249, 246, 0.82) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
  }
  .footer-links li a:active,
  .footer-links li a:hover {
    color: #FFFFFF !important;
  }
  .footer-links li span {
    font-size: 0.74rem !important;
    color: rgba(250, 249, 246, 0.6) !important;
    line-height: 1.4 !important;
    display: block !important;
    margin: 2px 0 6px 0 !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-top: 18px !important;
    font-size: 0.74rem !important;
    color: rgba(250, 249, 246, 0.6) !important;
  }
  .footer-bottom strong {
    color: #FAF9F6 !important;
    font-size: 0.86rem !important;
  }
  .footer-bottom a {
    color: #FAF9F6 !important;
  }

  /* ==========================================================================
     PHASE 3: COMPACT NON-INTRUSIVE MOBILE COOKIE BANNER
     ========================================================================== */
  .spectico-cookie-banner {
    position: fixed !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    background: #181715 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
    z-index: 2400 !important; /* Strictly below mobile bottom nav z-index: 2500 */
    transform: translateY(180%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .spectico-cookie-banner.visible {
    transform: translateY(0) !important;
  }
  .spectico-cookie-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .spectico-cookie-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #FAF9F6 !important;
    margin: 0 !important;
  }
  .btn-cookie-dismiss {
    background: transparent !important;
    border: none !important;
    color: #A3A099 !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .spectico-cookie-text {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    color: #C2BFB8 !important;
    margin: 2px 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .spectico-cookie-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .btn-cookie-primary {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #FFFFFF !important;
    padding: 7px 12px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    flex: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
  }
  .btn-cookie-outline {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 7px 10px !important;
    font-size: 0.64rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    flex: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
  }
  .btn-cookie-link {
    font-size: 0.62rem !important;
    color: #A3A099 !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  /* ==========================================================================
     PHASE 4 & 8: CLEAN COLLECTION SELECTOR & COMPACT VIDEO SLIDER
     ========================================================================== */
  .cinematic-showroom-section {
    padding: 22px 0 16px 0 !important;
  }
  .showroom-scroll-track {
    height: auto !important;
  }
  .showroom-sticky-stage {
    position: static !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .showroom-top-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .showroom-brand-heading .eyebrow-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
  }
  .showroom-main-title {
    font-size: 1.35rem !important;
    margin: 2px 0 0 0 !important;
  }
  .showroom-controls-cluster {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Remove duplicate chapter counters and detached arrow buttons on mobile */
  .showroom-progress-pill,
  .showroom-step-arrows,
  .showroom-nav-idx {
    display: none !important;
  }
  /* Single horizontal scrollable tab/chip rail */
  .showroom-chapter-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 0 6px 0 !important;
    width: 100% !important;
  }
  .showroom-chapter-nav::-webkit-scrollbar {
    display: none !important;
  }
  .showroom-nav-label {
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    padding: 7px 15px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    background: #F4F2EE !important;
    color: #1A1815 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    scroll-snap-align: start !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
  }
  .showroom-nav-label.active {
    background: #1A1815 !important;
    color: #FAF9F6 !important;
    border-color: #1A1815 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  }

    /* Compact Mobile Video Slider (Never Hijacks Vertical Scroll) */
  .showroom-perspective-viewport {
    height: auto !important;
    perspective: none !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }
  .showroom-spatial-rail {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 16px 14px 16px !important;
    scroll-padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .showroom-spatial-rail::-webkit-scrollbar {
    display: none !important;
  }
  .showroom-category-panel,
  .showroom-category-panel.showcase-layout-landscape,
  .showroom-category-panel.showcase-layout-editorial,
  .showroom-category-panel.showcase-layout-dynamic,
  .showroom-category-panel.showcase-layout-wide,
  .showroom-category-panel.showcase-layout-fullbleed,
  .showroom-category-panel.showcase-layout-macro {
    position: relative !important;
    flex: 0 0 calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    scroll-snap-align: start !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--pure-white) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .showroom-media-frame {
    height: clamp(145px, 20svh, 175px) !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0D0C0A !important;
    border-radius: 9px 9px 0 0 !important;
  }
  .showroom-category-video,
  .showroom-poster-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  #showcase-panel-men .showroom-category-video,
  #showcase-panel-men .showroom-poster-fallback {
    object-position: center 20% !important;
  }
  #showcase-panel-women .showroom-category-video,
  #showcase-panel-women .showroom-poster-fallback {
    object-position: center 20% !important;
  }
  .showroom-chapter-tag {
    font-size: 0.60rem !important;
    padding: 3px 8px !important;
    top: 8px !important;
    left: 8px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    color: #FAF9F6 !important;
  }
  .showroom-copy-overlay {
    border-left: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: 8px 12px 10px 12px !important;
    gap: 3px !important;
    background: var(--pure-white) !important;
    border-radius: 0 0 9px 9px !important;
  }
  .showroom-copy-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
  }
  .showroom-category-label {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--umber-brown) !important;
  }
  .showroom-short-line {
    font-size: 0.62rem !important;
    color: var(--text-muted) !important;
  }
  .showroom-category-title {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    margin: 1px 0 3px 0 !important;
  }
  .showroom-editorial-sub {
    font-size: 0.70rem !important;
    line-height: 1.25 !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
  }
  .showroom-cta-wrap {
    margin-top: 2px !important;
  }
  .showroom-category-cta {
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #FAF9F6 !important;
    background: #1A1815 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 4px !important;
    border: 1px solid #1A1815 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }
  .showroom-category-cta:active {
    background: #33312E !important;
    color: #FFFFFF !important;
  }

  /* Live Synced Featured Catalogue Strip Below Showroom Stage (Mobile Repaired) */
  .showroom-featured-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    margin: 12px 0 0 0 !important;
    border-radius: 8px !important;
    background: var(--pure-white) !important;
    border: 1px solid var(--border-subtle) !important;
    overflow: hidden !important;
  }
  .showroom-featured-meta {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .showroom-featured-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .showroom-mini-product {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 10px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .showroom-mini-product img {
    width: 60px !important;
    height: 48px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
  }
  .showroom-mini-info {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }
  .showroom-mini-name {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--jet-black) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
  }
  .showroom-mini-spec {
    font-size: 0.68rem !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }
  .showroom-mini-cta {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--umber-brown) !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .showroom-featured-strip > div:last-child {
    width: 100% !important;
    margin-top: 4px !important;
  }
  .showroom-featured-strip .btn-editorial-outline {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     PHASE 5: SHOP BY FRAME SHAPE - CLEAN 3-COLUMN BALANCED GRID
     ========================================================================== */
  .shapes-grid-7 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .shapes-grid-7 .shape-card {
    padding: 8px 6px 10px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: var(--pure-white) !important;
    border: 1px solid var(--border-subtle) !important;
    min-height: 104px !important;
    box-sizing: border-box !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .shapes-grid-7 .shape-card:active {
    background: #F8F7F4 !important;
    border-color: var(--jet-black) !important;
    transform: scale(0.97) !important;
  }
  .shapes-grid-7 .shape-card:last-child:nth-child(odd) {
    grid-column: span 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .shapes-grid-7 .shape-img-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F8F7F4 !important;
    border-radius: 6px !important;
    padding: 4px !important;
    margin-bottom: 6px !important;
  }
  .shapes-grid-7 .shape-product-img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
  }
  .shapes-grid-7 .shape-info-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .shapes-grid-7 .shape-name {
    font-family: var(--font-sans) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--jet-black) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .shapes-grid-7 .shape-tag,
  .shapes-grid-7 .shape-action {
    display: none !important;
  }

  /* ==========================================================================
     PHASE 6: SPECTICO EDIT EDITORIAL CARDS - COMPACT PEEK CAROUSEL
     ========================================================================== */
  .journal-editorial-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 2px 14px 2px !important;
  }
  .journal-editorial-grid::-webkit-scrollbar {
    display: none !important;
  }
  .journal-article {
    flex: 0 0 74% !important;
    max-width: 74% !important;
    width: 74% !important;
    scroll-snap-align: start !important;
    background: var(--pure-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .journal-img-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    background: var(--bg-secondary) !important;
  }
  .journal-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .journal-article .eyebrow-label {
    font-size: 0.62rem !important;
    margin-bottom: 3px !important;
    color: var(--umber-brown) !important;
  }
  .journal-article h3 {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
    margin: 2px 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .journal-article h3 a {
    color: inherit !important;
    text-decoration: none !important;
  }
  .journal-article p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
  }
  .journal-article .btn-editorial-link {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ==========================================================================
     PHASE 7: BOUTIQUE SERVICES, APPOINTMENTS & LENS CARDS
     ========================================================================== */
  .services-boutique-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    border-top: none !important;
    padding-top: 10px !important;
  }
  .service-column {
    background: var(--pure-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }
  .service-column .eyebrow-label {
    font-size: 0.64rem !important;
    margin-bottom: 4px !important;
    color: var(--umber-brown) !important;
  }
  .service-column h3 {
    font-size: 1.15rem !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
  }
  .service-item-list {
    border-top: 1px solid var(--border-subtle) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .service-item-row {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  .service-item-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .service-item-row strong {
    font-size: 0.84rem !important;
    display: block !important;
    margin-bottom: 3px !important;
    color: var(--jet-black) !important;
  }
  .service-item-row p {
    font-size: 0.74rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Appointment Store Switcher & Card Layout */
  .store-switcher-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .store-switcher-btn {
    padding: 10px 12px !important;
    font-size: 0.70rem !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    text-align: center !important;
  }
  .appointment-split-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #appt-active-store-summary {
    padding: 16px !important;
    border-radius: 8px !important;
  }

  /* Lens Ecosystem Grids */
  .which-lens-guide-grid-3,
  .lens-types-grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .which-lens-card,
  .lens-type-card {
    background: var(--pure-white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }


  /* ==========================================================================
     PHASE 6: SELECTED FRAMES FILTER PILLS - HORIZONTAL SCROLL RAIL
     ========================================================================== */
  .section-header-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filter-pills,
  #category-filter-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 2px 8px 2px !important;
  }
  .filter-pills::-webkit-scrollbar,
  #category-filter-pills::-webkit-scrollbar {
    display: none !important;
  }
  .filter-pill {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-primary) !important;
    color: var(--jet-black) !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }
  .filter-pill.active {
    background: var(--jet-black) !important;
    color: #FAF9F6 !important;
    border-color: var(--jet-black) !important;
    font-weight: 600 !important;
  }

  /* ==========================================================================
     PHASE 7: FIND YOUR FRAME - SIDE BY SIDE 2-COLUMN MOBILE GRID
     ========================================================================== */
  #find-your-frame-section {
    padding: 20px 14px !important;
    margin-top: 36px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #find-your-frame-section .section-header-box {
    margin-bottom: 18px !important;
  }
  #find-your-frame-section .section-title {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
  }
  .fyf-progress-bar {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
  }
  .fyf-progress-bar::-webkit-scrollbar {
    display: none !important;
  }
  .fyf-step-pill {
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    font-size: 0.66rem !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
  .fyf-step-header {
    text-align: center !important;
    margin: 0 auto 20px auto !important;
  }
  .fyf-heading {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    margin: 4px 0 6px 0 !important;
  }
  .fyf-subhead {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }
  /* 2-Column Grid for Step 1 Category Choices */
  .fyf-category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 20px 0 !important;
  }
  .fyf-category-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .fyf-category-img-box {
    height: 140px !important;
    position: relative !important;
  }
  .fyf-category-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
  .fyf-category-card-meta {
    padding: 10px 8px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .fyf-category-desc {
    display: none !important;
  }
  .fyf-category-action {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--umber-brown) !important;
    margin-top: 4px !important;
  }
  /* 2-Column Grid for Step 2 Face Shapes & Step 3 Styles */
  .fyf-options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fyf-option-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
  }
  .fyf-card-stage {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }
  .fyf-face-svg {
    width: 38px !important;
    height: 44px !important;
  }
  .fyf-stage-img {
    max-height: 44px !important;
    object-fit: contain !important;
  }
  .fyf-card-body {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .fyf-option-title {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
  }
  .fyf-option-rec {
    font-size: 0.62rem !important;
    color: var(--umber-brown) !important;
    line-height: 1.25 !important;
  }
  .fyf-option-desc {
    display: none !important;
  }
  .fyf-selected-pill {
    font-size: 0.54rem !important;
    padding: 2px 6px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .fyf-step-footer {
    margin-top: 18px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fyf-step-footer button {
    width: 100% !important;
    justify-content: center !important;
  }

}

/* ============================================================================
   SPECTICO PRINT MEDIA RULES
   Guarantees that invoking window.print() prints only a clean, isolated invoice
   and suppresses the 34-page landing page, sliders, carousels, and UI controls.
   ============================================================================ */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #1c1917 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Hide the landing page header, footer, sections and modals */
  body > header,
  body > footer,
  body > main,
  body > aside,
  #top,
  .site-header,
  .announcement-bar,
  .hero-slider-section,
  .hero-video-section,
  .cinematic-showroom-section,
  .showroom-scroll-track,
  .collections-carousel,
  .catalog-section,
  .editorial-section,
  .services-section,
  .boutique-locator,
  .reviews-section,
  .site-footer,
  .toast-notification,
  .cookie-banner,
  #cookie-banner,
  .cookie-consent-banner,
  .search-modal,
  .auth-split-window,
  .btn-editorial-dark,
  .btn-editorial-outline,
  .btn-editorial-link,
  button,
  .floating-controls,
  iframe#spectico-invoice-print-frame,
  iframe#account-invoice-print-frame {
    display: none !important;
  }

  /* When printing checkout confirmation */
  .cart-modal-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #checkout-confirmation-view {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}