/*
Theme Name: YONKO
Theme URI: https://yonko.com
Author: QuantumByte Technologies
Author URI: https://quantumbytetech.com
Description: A premium dark-luxury custom WordPress theme for the YONKO high-end footwear e-commerce platform. Features pseudo-3D product showcases, GSAP-powered micro-interactions, WooCommerce integration with demand-based pre-booking, and a phygital NFC bridge ecosystem.
Version: 1.4.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://yonko.com/license
Text Domain: yonko
Tags: e-commerce, dark-mode, luxury, custom-background, custom-logo, woocommerce
*/

/* ==========================================================================
   DESIGN TOKENS — YONKO Dark-Luxury Palette
   ========================================================================== */

:root {
  /* Primary Backgrounds */
  --obsidian: #0B0C0C;
  --obsidian-deep: #0D031B;
  --charcoal: #212121;
  --charcoal-light: #2A2A2A;
  --surface: #161616;

  /* Gold System */
  --gold-start: #D19E1D;
  --gold-mid: #FFD86E;
  --gold-end: #E3A812;
  --gold-gradient: linear-gradient(180deg, var(--gold-start) 0%, var(--gold-mid) 50%, var(--gold-end) 100%);
  --gold-horizontal: linear-gradient(to right, var(--gold-start), var(--gold-mid), var(--gold-end));
  --golden-brown: #996515;

  /* Typography */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250, 250, 250, 0.7);
  --text-muted: rgba(250, 250, 250, 0.45);

  /* Vivid Pastels — Product Cards */
  --pastel-pink: #F49CC8;
  --pastel-blue: #3080E8;
  --pastel-green: #86C716;

  /* CTA */
  --cta-primary: #E63946;
  --cta-hover: #FF4D5A;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* Borders & Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 50px;
  --radius-circle: 50%;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* Typography Scale */
  --font-hero: 'Bebas Neue', 'Anton', sans-serif;
  --font-body: 'Open Sans', 'Lato', sans-serif;
  --font-nav: 'Montserrat', 'Roboto Flex', sans-serif;
  --font-accent: 'Montserrat', 'Roboto Flex', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4.5rem;
  --text-hero: clamp(4rem, 10vw, 9rem);

  /* Layout */
  --sidebar-width: 60px;
  --header-height: 80px;
  --container-max: 1400px;
}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  background-color: var(--obsidian);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.yonko-site-content {
  overflow-x: hidden;
  width: 100%;
}

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

a:hover {
  color: var(--gold-start);
}

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

ul,
ol {
  list-style: none;
}

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

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: var(--charcoal);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Ensure gold gradient works on split characters (GSAP SplitText) */
.gold-text .char {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gold-text-h {
  background: var(--gold-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

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


/* ==========================================================================
   VERTICAL SIDEBAR
   ========================================================================== */

.yonko-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) 0;
  z-index: 100;
  border-right: 1px solid rgba(250, 250, 250, 0.06);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sidebar-nav__link {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transition: color var(--duration-fast) var(--ease-smooth),
    letter-spacing var(--duration-normal) var(--ease-smooth);
}

.sidebar-nav__link:hover {
  color: var(--gold-start);
  letter-spacing: 0.22em;
}

.sidebar-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.sidebar-socials__icon {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  transition: fill var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
  will-change: transform;
}

.sidebar-socials__icon:hover {
  fill: var(--gold-start);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.yonko-header {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-xl);
  z-index: 99;
  background: rgba(11, 12, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(250, 250, 250, 0.06);
}

.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  height: 36px;
  width: auto;
}

.header-logo__text {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  letter-spacing: 0.12em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.header-nav__link {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  position: relative;
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.header-nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-horizontal);
  transition: width var(--duration-normal) var(--ease-smooth);
}

.header-nav__link:hover {
  color: var(--text-primary);
}

.header-nav__link:hover::after {
  width: 100%;
}

.header-utils {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header-utils__btn {
  position: relative;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.header-utils__btn:hover {
  color: var(--text-primary);
}

.header-utils__btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Empty cart — hidden but still present in the DOM so WooCommerce's
   fragment-replacement has a selector to target when the first item lands. */
.cart-count.cart-count--empty {
  display: none;
}

/* Brief pop animation when the count updates (JS toggles .is-bumped). */
.cart-count.is-bumped {
  transform: scale(1.35);
}


/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
  display: grid;
  grid-template-columns: 2fr 8fr;
  /* Move content further to the side, giving more space to showcase */
  grid-template-rows: 1fr;
  overflow: clip;
}

.hero__bg-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__bg-shapes svg {
  position: absolute;
  opacity: 0.04;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-2xl);
}

.hero__content-label {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.62);
  margin-bottom: var(--space-xs);
}

.hero__heading {
  font-family: var(--font-hero);
  font-size: clamp(3.5rem, 8.2vw, 7.4rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid rgba(209, 158, 29, 0.3);
}

.hero__heading .gold-text {
  color: #FFD2A8;
  -webkit-text-fill-color: #FFD2A8;
  background: none;
}

.hero__heading .char {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__subtext {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 360px;
  margin-bottom: var(--space-md);
  line-height: 1.55;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.hero__cta:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
  color: var(--text-primary);
}

.hero__cta:active {
  transform: scale(0.96);
}

.hero__cta .ripple {
  position: absolute;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple-out 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-out {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Luminous sweep on hover — Premium gold shimmer effect */
.hero__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 30%,
      rgba(255, 216, 110, 0.25) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-smooth);
}

.hero__cta:hover::before {
  left: 150%;
}

/* Apply luminous sweep to all primary CTA buttons */
.prebook-modal__submit,
.landing-promotions__actions .hero__cta,
.footer__newsletter-btn,
.hero__panel-buy {
  position: relative;
  overflow: hidden;
}

.prebook-modal__submit::before,
.footer__newsletter-btn::before,
.hero__panel-buy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 30%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.15) 70%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-smooth);
}

.prebook-modal__submit:hover::before,
.footer__newsletter-btn:hover::before,
.hero__panel-buy:hover::before {
  left: 150%;
}


/* ==========================================================================
   HERO PRODUCT SHOWCASE
   ========================================================================== */

.hero__showcase {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align to the left side of the green box */
  justify-content: center;
  padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-2xl);
  /* More padding on right, less on left */
  padding-left: 0;
  /* Remove left padding to align with green box edge */
  perspective: 800px;
  gap: 0;
  overflow: visible;
}

.hero__showcase::after {
  display: none;
}

/* --- Animated Logo Background Watermark — left-to-right reveal --- */

.hero__logo-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 100% 0 0);
}

.hero__logo-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Changed from contain to cover to fill entire screen */
  opacity: 0.045;
  filter: brightness(1.5) saturate(0.6);
  will-change: opacity;
}

/* --- Neutral Background Stripes (Left Corner) --- */

.hero__color-stripes {
  position: absolute;
  top: 60%;
  left: -5%;
  width: 50%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0.5;
}

.hero__stripe {
  position: absolute;
  border-radius: 20px;
  will-change: transform, opacity;
  transform-origin: center;
  filter: blur(8px);
}

.hero__stripe--1 {
  top: 10%;
  left: 0;
  width: 140%;
  height: 25%;
  transform: translateY(-50%) rotate(-35deg);
  background: linear-gradient(135deg, rgba(35, 36, 40, 0.8) 0%, rgba(20, 20, 22, 0.1) 100%);
}

.hero__stripe--2 {
  top: 40%;
  left: 10%;
  width: 120%;
  height: 18%;
  transform: translateY(-50%) rotate(-45deg);
  background: linear-gradient(135deg, rgba(46, 42, 35, 0.6) 0%, rgba(20, 20, 22, 0) 100%);
}

.hero__stripe--3 {
  top: 55%;
  left: -10%;
  width: 130%;
  height: 15%;
  transform: translateY(-50%) rotate(-25deg);
  background: linear-gradient(135deg, rgba(28, 30, 36, 0.7) 0%, rgba(20, 20, 22, 0) 100%);
}

/* --- Particle Field --- */

.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: var(--radius-circle);
  background: rgba(209, 158, 29, 0.25);
  will-change: transform, opacity;
}

/* --- Depth Element: Diagonal dark stripe behind product --- */

.hero__depth-stripe {
  display: none;
}

/* --- Depth Element: Arc curve + floating dots --- */

.showcase__depth {
  display: none;
}

.showcase__arc {
  position: absolute;
  top: 9%;
  right: 1%;
  width: 70%;
  height: 70%;
  opacity: 0.38;
}

.showcase__arc path {
  stroke: #fff;
  stroke-width: 1.5px;
}

/* --- Inner Arc Ring --- */

.showcase__arc--inner {
  top: 14%;
  right: 5%;
  width: 52%;
  height: 52%;
}

/* --- Showcase Main: Slider container --- */

.hero__showcase-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align to left instead of center */
  width: 100%;
  max-width: 650px;
  /* Adjust width to fit within green box boundaries */
  margin-left: 60px;
  /* Add left margin to position it exactly in green box area */
}

/* --- Showcase Lasers --- */
.showcase__lasers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  width: 250%;
  /* Massive width to cross whole screen */
  height: 100%;
  z-index: 1;
  /* Behind product */
  pointer-events: none;
}

.laser-line {
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  opacity: 0.95;
}

.laser-line--1 {
  top: 50%;
  background: #f430b8;
  box-shadow: 0 0 24px #f430b8, 0 0 12px #f430b8;
}

.laser-line--2 {
  top: 54%;
  background: #3080e8;
  box-shadow: 0 0 24px #3080e8, 0 0 12px #3080e8;
}

.laser-line--3 {
  top: 62%;
  background: #ffd86e;
  box-shadow: 0 0 20px #ffd86e;
}

/* --- Product Selector: Right navigation panel (REMOVED) --- */
/* --- Product Selector: Right navigation panel with half-circle layout --- */

.hero__right-nav {
  position: absolute;
  top: 50%;
  right: 80px;
  /* Move further from edge for proper boundary spacing */
  transform: translateY(-50%);
  width: 90px;
  /* Slightly wider for 3 visible cards */
  height: 280px;
  /* Height to accommodate 3 cards with proper spacing */
  z-index: 10;
  pointer-events: none;
}

.hero__right-nav-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: 50%;
  opacity: 0.6;
}

.hero__product-selector {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Simplified vertical arrangement for 3 product thumbnails - Updated for larger cards */
/* IMPORTANT: Updated Apr 2 2026 - Wider cards with row layout for product names */
.product-thumb {
  position: relative !important;
  width: 180px !important;
  /* Increased from 140px for better product name display */
  height: 90px !important;
  background: rgba(20, 20, 24, 0.3);
  border: 2px solid rgba(250, 250, 250, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex !important;
  flex-direction: row !important;
  /* Row layout for image beside name */
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  transform-origin: center center;
  transform-style: preserve-3d;
  z-index: 1;
}

/* Cycling semi-transparent colors for cards */
.product-thumb:nth-child(3n+1) {
  background: rgba(244, 156, 200, 0.25);
  /* Pink */
}

.product-thumb:nth-child(3n+2) {
  background: rgba(48, 128, 232, 0.25);
  /* Blue */
}

.product-thumb:nth-child(3n+3) {
  background: rgba(134, 199, 22, 0.25);
  /* Green */
}

/* Hide thumbnails beyond the first 3 */
.product-thumb:nth-child(n+4) {
  display: none;
}

/* Active state - center card with gold border */
.product-thumb--active {
  border-color: rgba(209, 158, 29, 0.6);
  box-shadow:
    0 12px 40px rgba(209, 158, 29, 0.25),
    0 0 0 3px rgba(209, 158, 29, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 10;
  /* Keep active (center) card ahead */
}

/* Hover effects */
.product-thumb:hover {
  border-color: rgba(250, 250, 250, 0.25);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(250, 250, 250, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.product-thumb__img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(250, 250, 250, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-thumb__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.product-thumb:hover .product-thumb__img img {
  transform: scale(1.1);
}

.product-thumb__title {
  font-size: 11px !important;
  font-family: var(--font-nav);
  color: rgba(250, 250, 250, 0.85) !important;
  text-align: left;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
  white-space: normal;
}

.product-thumb--active .product-thumb__title {
  color: rgba(209, 158, 29, 1);
  font-weight: 700;
}

.hero__right-nav-ring {
  display: none;
}

.hero__product-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Spacing between the 3 cards */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  padding: 20px 0;
  perspective: 1200px;
  /* Enable 3D perspective for rotation */
}

/* --- Squiggly Curly Bracket --- Removed for clean vertical stack */
.hero__product-selector::before {
  display: none;
  /* Hide decorative bracket to match clean design */
}


/* ======================================================================
   HERO PRODUCT SLIDER — Click-to-switch, no auto-advance
   ====================================================================== */

.hero__slider {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 480px;
  /* Reduced from 580px to fit better within bounds */
  aspect-ratio: 1 / 1;
  overflow: visible;
  flex-shrink: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.hero__slide--active {
  opacity: 1;
  visibility: visible;
}

.hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-38deg) scale(1.56);
  /* Increased by 30% from 1.2 */
  transition: transform var(--duration-slow) var(--ease-smooth);
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.8));
}

.hero__slide--active .hero__slide-img {
  transform: rotate(-38deg) scale(1.755);
  /* Increased by 30% from 1.35 */
}

/* --- Diagonal Color Diamonds (Underneath shoe) --- */
/* Gallery items removed per design update */


/* ==========================================================================
   HERO PRODUCT INFO PANEL (below the image)
   ========================================================================== */

/* Product panel container - Enhanced luxury design with subtle backdrop */
.hero__product-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  margin-top: calc(var(--space-lg) * -0.3);
  min-height: 320px;
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(16, 16, 20, 0.6), rgba(8, 8, 12, 0.8));
  border: 1px solid rgba(209, 158, 29, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: all 0.4s ease;
  transform: translateY(-30%);
}

.hero__product-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      rgba(209, 158, 29, 0.4) 50%,
      transparent);
  opacity: 0.6;
}

.hero__product-panel:hover {
  border-color: rgba(209, 158, 29, 0.2);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(209, 158, 29, 0.1);
}

.hero__panel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px 20px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

.hero__panel-item--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: panelFadeIn 0.5s ease-out forwards;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Staggered animation for panel children */
.hero__panel-item--active .hero__panel-kicker {
  animation: slideInUp 0.4s ease-out 0.1s both;
}

.hero__panel-item--active .hero__panel-title {
  animation: slideInUp 0.5s ease-out 0.2s both;
}

.hero__panel-item--active .hero__panel-type {
  animation: slideInUp 0.4s ease-out 0.3s both;
}

.hero__panel-item--active .hero__panel-meta {
  animation: slideInUp 0.4s ease-out 0.35s both;
}

.hero__panel-item--active .hero__panel-colors {
  animation: slideInUp 0.4s ease-out 0.4s both;
}

.hero__panel-item--active .hero__panel-sizes {
  animation: slideInUp 0.4s ease-out 0.45s both;
}

.hero__panel-item--active .hero__panel-buy {
  animation: slideInUp 0.5s ease-out 0.5s both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.hero__panel-kicker {
  font-family: var(--font-nav);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-start);
  font-weight: 600;
  position: relative;
  padding-left: 12px;
  margin-bottom: 4px;
}

.hero__panel-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--gold-gradient);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(209, 158, 29, 0.6);
}

.hero__panel-title {
  font-family: var(--font-nav);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.1);
  position: relative;
}

.hero__panel-type {
  font-family: var(--font-nav);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(250, 250, 250, 0.65);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 10px;
  background: rgba(209, 158, 29, 0.08);
  border: 1px solid rgba(209, 158, 29, 0.15);
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.hero__panel-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 16px;
}

.hero__panel-stars {
  color: var(--gold-start);
  font-size: var(--text-base);
  letter-spacing: 2px;
  filter: drop-shadow(0 2px 4px rgba(209, 158, 29, 0.3));
}

.hero__panel-divider {
  color: rgba(255, 255, 255, 0.25);
  font-size: var(--text-base);
  user-select: none;
}

.hero__panel-price {
  font-family: var(--font-nav);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 900;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
  position: relative;
  padding: 4px 0;
}

.hero__panel-price::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(209, 158, 29, 0.4),
      rgba(209, 158, 29, 0.1) 70%,
      transparent);
}

/* Sale price styling in the panel */
.hero__panel-price del {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  text-decoration: line-through;
  position: relative;
  display: block;
  order: -1;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset; /* Standard property for compatibility */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.hero__panel-price del .woocommerce-Price-amount {
  color: rgba(255, 255, 255, 0.4);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset; /* Standard property for compatibility */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.4);
}

.hero__panel-price ins {
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  display: block;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__panel-price ins .woocommerce-Price-amount {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__panel-colors {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 0;
}

.hero__color-dot {
  /* Triple-pin the box so flex-shrink / align-stretch / any parent oddity
     cannot squish the width or pull the height — the dot is always a square.
     This is the root cause of the prior mobile "vertical oval" bug: in a flex
     row with many dots and no explicit flex-shrink:0, the main axis (width)
     shrank while height stayed fixed, producing a tall narrow ellipse. */
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex: 0 0 24px;
  border-radius: var(--radius-circle);
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.hero__color-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-circle);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.hero__color-dot:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.hero__color-dot:hover::after {
  border-color: rgba(209, 158, 29, 0.4);
}

.hero__color-dot:active {
  transform: scale(0.95);
}

.hero__color-dot--1 {
  background: linear-gradient(135deg, #f4f4f4, #e0e0e0);
}

.hero__color-dot--2 {
  background: linear-gradient(135deg, #7d8188, #5a5d63);
}

.hero__color-dot--3 {
  background: linear-gradient(135deg, #34436a, #252f4a);
}

.hero__color-dot--4 {
  background: linear-gradient(135deg, #d06a6a, #b85555);
}

.hero__color-dot--5 {
  background: linear-gradient(135deg, #1f2228, #0f1114);
}

/* Active state for dynamic color dots */
button.hero__color-dot {
  padding: 0;
  appearance: none;
  outline: none;
}

.hero__color-dot--active {
  transform: scale(1.15);
  border-color: var(--gold-start);
  box-shadow:
    0 0 0 2px rgba(209, 158, 29, 0.35),
    0 4px 16px rgba(209, 158, 29, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.hero__color-dot--active::after {
  border-color: var(--gold-start);
}

/* Active state for size chip buttons */
button.hero__size-chip {
  appearance: none;
  outline: none;
}

.hero__size-chip--active {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  border-color: var(--gold-start);
  color: var(--obsidian);
  box-shadow: 0 4px 16px rgba(209, 158, 29, 0.35);
  transform: translateY(-1px);
}

.hero__size-chip--active::before {
  opacity: 0;
}

/* Locked Buy button (before required selection) */
.hero__panel-buy--locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.hero__panel-buy.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Validation message flash */
.hero__panel-msg {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.35);
  border-radius: 8px;
  color: #ff8690;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  animation: heroMsgIn 0.2s ease-out;
}

@keyframes heroMsgIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__panel-sizes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hero__size-chip {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 600;
  color: rgba(250, 250, 250, 0.85);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero__size-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero__size-chip:hover {
  border-color: rgba(209, 158, 29, 0.5);
  background: rgba(209, 158, 29, 0.08);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(209, 158, 29, 0.2);
  color: var(--gold-start);
}

.hero__size-chip:hover::before {
  opacity: 0.05;
}

.hero__size-chip:active {
  transform: translateY(0) scale(0.95);
}

/* Buy Now button - Premium luxury styling */
.hero__panel-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  margin-top: 18px;
  background: linear-gradient(135deg, #E63946, #C62F3A);
  color: #fff;
  border: 1px solid rgba(230, 57, 70, 0.3);
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 4px 16px rgba(230, 57, 70, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero__panel-buy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.5s ease;
}

.hero__panel-buy:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 28px rgba(230, 57, 70, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #FF505E, #E63946);
  border-color: rgba(230, 57, 70, 0.5);
}

.hero__panel-buy:hover::before {
  left: 100%;
}

.hero__panel-buy:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 8px rgba(230, 57, 70, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* --- Slider Navigation Arrows (below product, centered) --- */

.hero__slider-arrows {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -24px;
}

.hero__slider-arrow {
  width: 38px;
  height: 26px;
  background: rgba(11, 12, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform var(--duration-fast) var(--ease-smooth),
    color var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth);
}

.hero__slider-arrow:hover {
  color: var(--text-primary);
  background: rgba(11, 12, 12, 0.8);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.08);
}

.hero__slider-arrow:active {
  transform: scale(0.94);
}

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


/* ==========================================================================
   HERO SCROLL ANIMATIONS — DISABLED
   Scroll progress and pinned state styles removed per user request
   ========================================================================== */

/* Scroll animations have been disabled to improve performance and user experience */

.hero--pinned .hero__scroll-progress {
  opacity: 1;
}

.hero__scroll-progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold-gradient);
  transform-origin: bottom center;
  transform: scaleY(0);
  border-radius: var(--radius-pill);
}

/* Pinned state styling — DISABLED */
/* Pinned state styles removed along with scroll animations */


/* ==========================================================================
   PRODUCT CAROUSEL (Bottom of Hero)
   ========================================================================== */

/* Removed - duplicate definition exists at line ~2517 which takes precedence */

.featured-showcase__eyebrow {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.6);
  margin-bottom: 8px;
}

.featured-showcase__title,
.landing-promotions__title {
  font-family: var(--font-hero);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.featured-showcase__text,
.landing-promotions__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 860px;
  line-height: 1.7;
}

.category-showcase,
.featured-showcase,
.landing-promotions,
.promo-banner,
.promo-split {
  margin-top: var(--space-lg);
}

.category-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  overflow: visible;
  padding-left: 0;
  /* Remove since parent now has padding */
  padding-right: 0;
  /* Remove since parent now has padding */
  padding-bottom: var(--space-sm);
}

.promo-banner {
  margin-left: calc(var(--sidebar-width) + var(--space-xl));
  margin-right: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(132deg, rgba(27, 31, 36, 0.94) 0%, rgba(17, 19, 22, 0.88) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.promo-banner__line {
  font-family: var(--font-hero);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-primary);
}

.promo-banner__subline {
  margin-top: 8px;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.promo-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding: 0 var(--space-xl) 0 calc(var(--sidebar-width) + var(--space-xl));
}

.promo-split__card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, rgba(23, 25, 28, 0.96), rgba(14, 16, 19, 0.92));
}

.promo-split__eyebrow {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.6);
  margin-bottom: 8px;
}

.promo-split__title {
  font-family: var(--font-hero);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-primary);
}

.promo-split__text {
  margin-top: 8px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Legacy landing-promotions styles replaced with enhanced version above */

.hero__carousel-wrap {
  position: relative;
  z-index: 3;
  padding: var(--space-lg) 0 var(--space-lg) 0;
  padding-right: 0;
  margin-left: var(--space-md);
  overflow: hidden;
}

.hero__carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-top: var(--space-md);
  padding-bottom: var(--space-xl);
  padding-right: var(--space-3xl);
  -webkit-overflow-scrolling: touch;
  /* Let the browser disambiguate: horizontal swipe scrolls the carousel,
     vertical swipe scrolls the page. `pan-x` alone would block vertical page scroll. */
  touch-action: pan-x pan-y;
}

.hero__carousel::-webkit-scrollbar {
  display: none;
}

/* --- Carousel Navigation Arrows --- */

.hero__carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-right: var(--space-sm);
}

.hero__carousel-arrow {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: transform var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast) var(--ease-smooth);
}

.hero__carousel-arrow--prev {
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__carousel-arrow--prev:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.hero__carousel-arrow--next {
  background: var(--cta-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.hero__carousel-arrow:hover {
  transform: scale(1.1);
}

.hero__carousel-arrow:active {
  transform: scale(0.95);
}


/* ==========================================================================
   PRODUCT CARD — Hero Carousel Overrides
   Inherits base .product-card styles, with carousel-specific sizing
   ========================================================================== */

.hero__carousel .product-card {
  flex: 0 0 380px;
  /* Increased from 280px to 380px */
  scroll-snap-align: start;
  min-height: auto;
}

.hero__carousel .product-card__inner {
  background: var(--charcoal-light);
}

.hero__carousel .product-card__header {
  padding: 20px 20px 12px;
  /* Increased padding for larger cards */
}

.hero__carousel .product-card__title {
  font-size: 1.1rem;
  /* Increased from 1rem */
}

.hero__carousel .product-card__subtitle {
  font-size: 0.85rem;
  /* Increased from 0.8rem */
}

.hero__carousel .product-card__img-wrap {
  margin: 0 15px 15px;
  /* Increased margins for better spacing */
  aspect-ratio: 4 / 3;
  /* Changed from 5/4 to 4/3 for taller image area */
}

.hero__carousel .product-card__image {
  padding: 8px;
  /* Reduced from 15px to give more space for the image */
}

.hero__carousel .product-card__amount {
  font-size: 1.2rem;
}

.hero__carousel .product-card__cta {
  width: 38px;
  height: 38px;
}

.hero__carousel .product-card__cta svg {
  width: 16px;
  height: 16px;
}

.hero__carousel .product-card__add-to-cart-btn {
  width: 38px;
  height: 38px;
}

.hero__carousel .product-card__add-to-cart-btn svg {
  width: 17px;
  height: 17px;
}


/* ==========================================================================
   PRE-BOOKING SYSTEM
   ========================================================================== */

.yonko-prebook-container {
  margin: var(--space-xl) 0;
}

.yonko-prebook-container .prebook-trigger {
  width: 100%;
  margin-top: var(--space-md);
  padding: 18px;
  font-weight: 700;
  background: var(--gold-start);
  color: #111;
  border: none;
  font-size: 1.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(209, 158, 29, 0.3);
}

.yonko-prebook-container .prebook-trigger:hover {
  background: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(209, 158, 29, 0.4);
}

/* ==========================================================================
   DEMAND GAUGE — Golden Progress Bar
   ========================================================================== */

.demand-gauge {
  width: 100%;
  margin: var(--space-md) 0;
}

/* Demand gauge inside product cards needs dark text */
.product-card .demand-gauge__title {
  color: rgba(11, 12, 12, 0.7);
}

.product-card .demand-gauge__track {
  background: rgba(11, 12, 12, 0.15);
  box-shadow: none;
}

.demand-gauge__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.demand-gauge__title {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.demand-gauge__percent {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
}

.demand-gauge__track {
  width: 100%;
  height: 8px;
  background: var(--charcoal);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}

.demand-gauge__fill {
  height: 100%;
  width: 0;
  background: var(--gold-horizontal);
  border-radius: var(--radius-sm);
  will-change: width;
  transition: width 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ==========================================================================
   PRE-BOOKING MODAL
   ========================================================================== */

.prebook-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
    visibility var(--duration-normal) var(--ease-smooth);
}

.prebook-modal.active {
  opacity: 1;
  visibility: visible;
}

.prebook-modal__content {
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  width: 90%;
  max-width: 440px;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.prebook-modal.active .prebook-modal__content {
  transform: translateY(0) scale(1);
}

.prebook-modal__title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-lg);
}

.prebook-modal__field {
  margin-bottom: var(--space-md);
}

.prebook-modal__field label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prebook-modal__field input,
.prebook-modal__field select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-smooth);
}

.prebook-modal__field input:focus,
.prebook-modal__field select:focus {
  border-color: var(--gold-start);
}

.prebook-modal__submit {
  width: 100%;
  padding: var(--space-md);
  background: var(--gold-horizontal);
  color: var(--obsidian);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  margin-top: var(--space-md);
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.prebook-modal__submit:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(209, 158, 29, 0.3);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.yonko-footer {
  position: relative;
  padding: var(--space-3xl) var(--space-xl) var(--space-lg);
  padding-left: calc(var(--sidebar-width) + var(--space-xl));
  background: var(--obsidian-deep);
  border-top: 1px solid rgba(250, 250, 250, 0.08);
  overflow: hidden;
}

/* Subtle glow effect behind the footer content */
.yonko-footer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse at top, rgba(209, 158, 29, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.yonko-footer .container {
  position: relative;
  z-index: 1;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(250, 250, 250, 0.08);
}

.footer__brand {
  flex: 1 1 300px;
}

.footer__brand-title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.footer__brand-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 320px;
}

.footer__newsletter {
  flex: 1 1 400px;
}

.footer__newsletter-title {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.footer__newsletter-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-sm);
}

.footer__newsletter-input {
  flex: 1;
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.1);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast) var(--ease-smooth);
}

.footer__newsletter-input:focus {
  border-color: var(--gold-start);
  background: rgba(250, 250, 250, 0.06);
}

.footer__newsletter-btn {
  padding: 0 var(--space-xl);
  background: var(--gold-gradient);
  color: var(--obsidian);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.footer__newsletter-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(209, 158, 29, 0.3);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.footer__col-title {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__col-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-smooth),
    padding-left var(--duration-fast) var(--ease-smooth);
}

.footer__col-links a:hover {
  color: var(--gold-start);
  padding-left: var(--space-sm);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(250, 250, 250, 0.06);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}


/* ==========================================================================
   WOOCOMMERCE OVERRIDES
   ========================================================================== */

.woocommerce-page {
  padding-left: var(--sidebar-width);
  padding-top: calc(var(--header-height) + var(--space-xl));
  overflow-x: hidden;
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.woocommerce ul.products li.product {
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* --- Global WooCommerce Price Styling --- */

.woocommerce ul.products li.product .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-sm);
}

.woocommerce ul.products li.product .price del {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.woocommerce ul.products li.product .price del::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--text-muted);
  transform: translateY(-50%);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
}

.woocommerce ul.products li.product .price>.woocommerce-Price-amount {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
}

/* Sale badge for WooCommerce */
.woocommerce ul.products li.product .onsale {
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  min-width: auto;
  min-height: auto;
  line-height: 1.4;
}

/* Sale badge on product cards (pastel backgrounds) */
.product-card .onsale,
.product-card__badge {
  background: rgba(11, 12, 12, 0.85);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
}


/* ==========================================================================
   RESPONSIVE — MOBILE FIRST
   ========================================================================== */

/* Desktop and Large Tablets - maintain new 3fr 7fr layout */
@media (min-width: 1025px) {
  .hero {
    grid-template-columns: 3fr 7fr;
    /* Maintain the updated layout */
  }

  .hero__content {
    padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-2xl);
  }

  .hero__showcase {
    padding: var(--space-md) var(--space-lg);
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 0px;
    --header-height: 64px;
  }

  .yonko-sidebar {
    display: none;
  }

  .yonko-header {
    left: 0;
    padding: 0 var(--space-md);
    padding-left: max(var(--space-md), env(safe-area-inset-left, 0));
    padding-right: max(var(--space-md), env(safe-area-inset-right, 0));
  }

  /* Cart icon alignment fix for mobile */
  .header-utils {
    gap: var(--space-md);
  }
  
  .header-utils__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
  }

  .cart-count {
    top: 2px;
    right: 0;
  }

  /* Split mobile viewport in half: product image top, details card bottom. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero__content {
    padding: 0 var(--space-md) var(--space-md);
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    grid-row: 2;
    grid-column: 1;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    min-height: 0;
  }

  .hero__subtext {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__showcase {
    min-height: 0;
    padding: calc(var(--header-height) + var(--space-sm)) var(--space-md) var(--space-sm);
    align-items: center;
    justify-content: center;
    grid-row: 1;
    grid-column: 1;
    overflow: hidden;
  }

  .hero__showcase::after {
    display: none;
  }

  .hero__slider {
    width: 100%;
    max-width: clamp(260px, 75vw, 420px);
    flex: none;
  }

  .hero__slider::before,
  .hero__slider::after {
    display: none;
  }

  /* Product panel takes the full bottom half. Acts as containing block for
     absolute-positioned panel items so transitions don't change layout.
     Height is generous enough for listings with colors + sizes + buy button. */
  .hero__product-panel {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    pointer-events: auto;
    transform: translateY(0);
    min-height: clamp(300px, 46dvh, 400px);
    max-height: 100%;
    padding: var(--space-md);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(16, 16, 20, 0.88), rgba(8, 8, 12, 0.94));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    border: 1px solid rgba(209, 158, 29, 0.15);
    box-shadow:
      0 -4px 20px rgba(0, 0, 0, 0.3),
      0 8px 32px rgba(0, 0, 0, 0.4);
  }

  /* Mirror desktop: panels stack in the same physical space and only
     cross-fade — no display:none, no position:relative, no layout jumps.
     Padding 0 because the parent panel already pads content (avoids stacking). */
  .hero__panel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    gap: 6px;
  }

  .hero__panel-item--active {
    /* Inherits opacity/visibility/pointer-events from the desktop --active
       rule and the panelFadeIn keyframes; keep layout identical. */
    position: absolute;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .hero__panel-kicker {
    display: none;
  }

  .hero__panel-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    margin-bottom: 2px;
    text-align: center;
    width: 100%;
  }

  .hero__panel-type {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  .hero__panel-meta {
    justify-content: center;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .hero__panel-price {
    font-size: clamp(1.3rem, 4vw, 1.6rem);
  }

  .hero__panel-colors {
    justify-content: center;
    margin-top: 4px;
    padding: 2px 0;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }

  .hero__color-dot {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 22px;
  }

  .hero__panel-sizes {
    justify-content: center;
    gap: 6px;
    padding: 2px 0;
    margin-top: 6px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }

  .hero__size-chip {
    min-width: 36px;
    width: auto;
    height: 32px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 0.75rem;
    flex: 0 0 auto;
  }

  .hero__panel-buy {
    /* Intentionally not full-width on mobile — a pill that hugs the label
       reads as deliberate next to the centered title/price/chips stack
       instead of looking like a stretched form submit. */
    width: auto;
    align-self: center;
    min-width: 180px;
    max-width: 80%;
    justify-content: center;
    margin-top: 12px;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--text-sm);
    min-height: 44px;
  }

  /* Slider arrows - larger touch targets */
  .hero__slider-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-sm);
    z-index: 15;
    pointer-events: none;
  }

  .hero__slider-arrow {
    width: 44px;
    height: 44px;
    top: auto;
    position: relative;
    pointer-events: auto;
  }

  .hero__slider-arrow--prev {
    left: auto;
    right: auto;
    transform: none;
  }

  .hero__slider-arrow--next {
    left: auto;
    right: auto;
    transform: none;
  }

  .hero__depth-stripe {
    display: none;
  }

  .hero__color-stripes {
    width: 100%;
    top: 50%;
    right: -4%;
    height: 50%;
    opacity: 0.2;
  }

  .hero__logo-bg {
    left: 50%;
    width: 100%;
    height: 100%;
  }

  .hero__logo-bg-img {
    opacity: 0.03;
  }

  .hero__showcase-main {
    width: 100%;
    max-width: clamp(280px, 65vw, 450px);
    justify-content: center;
    margin-left: 0;
    align-items: center;
  }

  .hero__showcase-main::before,
  .hero__showcase-main::after {
    display: none;
  }

  .hero__slide-img {
    transform: rotate(-32deg) scale(1.4);
  }

  .hero__slide--active .hero__slide-img {
    transform: rotate(-32deg) scale(1.55);
  }

  .showcase__lasers {
    opacity: 0.6;
  }

  .hero__right-nav {
    display: none !important;
  }

  .hero__right-nav-ring {
    display: none;
  }

  .hero__product-selector {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: var(--space-sm);
  }

  /* Reset mobile thumbnails */
  .product-thumb {
    position: static !important;
    transform: none !important;
    width: 100px;
    height: 72px;
    flex-shrink: 0;
  }

  .product-thumb--active {
    transform: none !important;
  }

  .product-thumb:nth-child(1),
  .product-thumb:nth-child(2),
  .product-thumb:nth-child(3),
  .product-thumb:nth-child(4),
  .product-thumb:nth-child(5),
  .product-thumb:nth-child(6),
  .product-thumb:nth-child(7),
  .product-thumb:nth-child(8) {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  .product-thumb--active:nth-child(1),
  .product-thumb--active:nth-child(2),
  .product-thumb--active:nth-child(3),
  .product-thumb--active:nth-child(4),
  .product-thumb--active:nth-child(5),
  .product-thumb--active:nth-child(6),
  .product-thumb--active:nth-child(7),
  .product-thumb--active:nth-child(8) {
    transform: none !important;
  }
}

.product-thumb {
  width: 140px;
  /* Match desktop sizing */
  min-height: 68px;
  transform: none;
}

.product-thumb__img {
  width: 48px;
  height: 48px;
}

.product-thumb--prev,
.product-thumb--next,
.product-thumb--active {
  transform: none;
}

.hero__carousel-wrap {
  padding-left: var(--space-md);
  padding-right: 0;
}

.featured-showcase__intro,
.category-showcase__intro,
.landing-promotions__hero {
  padding: 0 var(--space-md) var(--space-md);
}

.category-showcase__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.promo-banner {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
  padding: var(--space-md);
}

.promo-split {
  grid-template-columns: 1fr;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.landing-promotions__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.landing-promotions__ticker,
.landing-promotions__actions {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.header-nav {
  gap: var(--space-md);
}

.header-nav__link {
  font-size: var(--text-xs);
}

@media (max-width: 640px) {

  /* Hide right navigation completely on mobile */
  .hero__right-nav {
    display: none !important;
  }

  .hero__heading {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .hero__slider {
    width: 100%;
    max-width: clamp(240px, 62vw, 300px);
  }

  .hero__slide-img {
    transform: rotate(-28deg) scale(1.25);
  }

  .hero__slide--active .hero__slide-img {
    transform: rotate(-28deg) scale(1.4);
  }

  .hero__product-panel {
    width: 100%;
    max-width: 360px;
    padding: 14px;
    border-radius: 16px;
  }

  .hero__panel-title {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  .hero__panel-type {
    font-size: 0.65rem;
  }

  .hero__panel-price {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  }

  .hero__panel-colors {
    gap: 7px;
  }

  .hero__color-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 20px;
  }

  .hero__panel-sizes {
    gap: 5px;
  }

  .hero__size-chip {
    min-width: 32px;
    width: auto;
    height: 30px;
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 0.7rem;
    flex: 0 0 auto;
  }

  .hero__panel-buy {
    min-width: 160px;
    padding: 8px var(--space-lg);
    font-size: 0.75rem;
  }

  .hero__carousel {
    gap: var(--space-sm);
    padding-right: var(--space-lg);
    scroll-padding-left: var(--space-md);
  }

  .featured-showcase__title,
  .landing-promotions__title {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .category-showcase__grid,
  .landing-promotions__grid {
    grid-template-columns: 1fr;
  }

  .landing-promotions__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-promotions__secondary,
  .landing-promotions .hero__cta {
    width: 100%;
    justify-content: center;
  }

  .hero__carousel .product-card {
    flex: 0 0 clamp(240px, 82vw, 340px);
    min-height: auto;
    scroll-snap-align: center;
  }

  .hero__carousel .product-card__img-wrap {
    flex: 0 0 clamp(120px, 30vw, 160px);
  }

  .hero__carousel-nav {
    justify-content: center;
  }

  .showcase__depth {
    display: none;
  }

  .hero__color-stripes {
    opacity: 0.14;
  }

  .hero__particles {
    display: none;
  }

  .hero__showcase-main {
    max-width: 300px;
  }

  .hero__right-nav {
    display: none !important;
  }

  .hero__product-selector {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    position: static;
    width: 100%;
    padding-bottom: 2px;
    justify-content: flex-start;
    height: auto;
    gap: 8px;
  }

  .product-thumb {
    width: 130px;
    min-height: 62px;
  }

  .product-thumb__title {
    font-size: 10px;
  }

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

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* ==========================================================================
   LANDING PAGE SEGMENTS
   Dark Luxury Aesthetics for Post-Hero Sections
   ========================================================================== */

/* Showcases (Featured & Categories) */
.featured-showcase,
.category-showcase {
  padding: var(--space-3xl) var(--space-xl) var(--space-3xl) calc(var(--sidebar-width) + var(--space-xl));
  background: var(--obsidian);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.category-showcase--tees {
  background: var(--obsidian-deep);
}

.featured-showcase__intro,
.category-showcase__intro,
.landing-promotions__hero {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
  padding: 0 0;
  /* Remove padding since parent containers now have proper padding */
}

.featured-showcase__eyebrow {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-start);
  margin-bottom: var(--space-sm);
}

.featured-showcase__title,
.landing-promotions__title {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  text-transform: uppercase;
  background: var(--gold-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--space-md);
}

.featured-showcase__text,
.landing-promotions__text {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Category Grid (Fallback if not using carousel) */
.category-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  padding: 0 0 var(--space-lg) 0;
  /* Remove horizontal padding since parent .category-showcase now has it */
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Promo Banner */
.promo-banner {
  background: var(--cta-primary);
  background: linear-gradient(135deg, var(--cta-primary) 0%, var(--cta-hover) 100%);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: var(--space-3xl) var(--space-xl) var(--space-3xl) calc(var(--sidebar-width) + var(--space-xl));
  /* Add proper horizontal margins */
}

.promo-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1.5" fill="rgba(0,0,0,0.2)"/></svg>');
  opacity: 0.5;
}

.promo-banner__line {
  position: relative;
  z-index: 1;
  font-family: var(--font-hero);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.promo-banner__subline {
  position: relative;
  z-index: 1;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Promo Split */
.promo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl) calc(var(--sidebar-width) + var(--space-xl));
  max-width: var(--container-max);
  margin: 0 auto var(--space-3xl);
}

.promo-split__card {
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.promo-split__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(209, 158, 29, 0.2);
}

.promo-split__eyebrow {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: rgba(209, 158, 29, 0.1);
  color: var(--gold-start);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}

.promo-split__title {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 3.5vw, 3rem);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.1;
  text-transform: uppercase;
}

.promo-split__text {
  color: var(--text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   LANDING PROMOTIONS SECTION - Enhanced Design
   ========================================================================== */

.landing-promotions {
  position: relative;
  padding: var(--space-3xl) 0;
  background: linear-gradient(180deg, var(--obsidian) 0%, var(--obsidian-deep) 50%, var(--obsidian) 100%);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Background Elements */
.landing-promotions__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.landing-promotions__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(209, 158, 29, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(209, 158, 29, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.landing-promotions__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
}

.landing-promotions__glow--1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.2) 0%, transparent 70%);
}

.landing-promotions__glow--2 {
  width: 800px;
  height: 800px;
  bottom: -300px;
  right: -300px;
  background: radial-gradient(circle, rgba(13, 3, 27, 0.6) 0%, transparent 70%);
}

/* Content Container */
.landing-promotions .container {
  position: relative;
  z-index: 2;
}

/* Header Section */
.landing-promotions__hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-lg);
}

.landing-promotions__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  background: rgba(209, 158, 29, 0.1);
  border: 1px solid rgba(209, 158, 29, 0.2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-xl);
  backdrop-filter: blur(10px);
}

.landing-promotions__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-mid);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(209, 158, 29, 0.7);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(209, 158, 29, 0);
  }
}

.landing-promotions__badge-text {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-mid);
}

.landing-promotions__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-xl);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Add subtle text shadow for better visibility */
}

.landing-promotions__title-line {
  display: block;
  color: var(--text-primary);
  position: relative;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  /* Add subtle shadow for better visibility */
}

.landing-promotions__title-line--gold {
  background: var(--gold-gradient);
  color: var(--gold-mid);
  /* Fallback color for better visibility */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (background-clip: text) {
  .landing-promotions__title-line--gold {
    color: var(--gold-mid);
    background: none;
  }
}

/* Additional fallback for older WebKit browsers */
@supports not (-webkit-background-clip: text) {
  .landing-promotions__title-line--gold {
    color: var(--gold-mid);
    background: none;
  }
}

.landing-promotions__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--gold-mid);
  /* Use goldenish color for better visibility */
  max-width: 600px;
  margin: 0 auto;
}

/* Enhanced Cards Grid */
.landing-promotions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--space-lg);
}

.landing-promotions__card {
  position: relative;
  cursor: pointer;
  height: 100%;
  transition: all var(--duration-normal) var(--ease-smooth);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.landing-promotions__card-inner {
  position: relative;
  height: 100%;
  padding: var(--space-2xl);
  background: linear-gradient(145deg,
      rgba(22, 22, 22, 0.8),
      rgba(13, 3, 27, 0.6));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  z-index: 2;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.landing-promotions__card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(209, 158, 29, 0.05) 50%,
      transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-smooth);
  z-index: -1;
}

.landing-promotions__card:hover .landing-promotions__card-inner::before {
  opacity: 1;
}

.landing-promotions__card-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg,
      transparent,
      rgba(209, 158, 29, 0.2),
      transparent,
      rgba(209, 158, 29, 0.2),
      transparent);
  border-radius: var(--radius-lg);
  opacity: 0;
  filter: blur(6px);
  transition: opacity var(--duration-normal) var(--ease-smooth);
  z-index: 1;
  animation: glow-rotate 3s linear infinite;
}

@keyframes glow-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.landing-promotions__card:hover .landing-promotions__card-glow {
  opacity: 1;
}

.landing-promotions__card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 158, 29, 0.1);
  border-radius: var(--radius-md);
  color: var(--gold-mid);
  margin-bottom: var(--space-md);
  transition: all var(--duration-fast) var(--ease-smooth);
  position: relative;
  z-index: 3;
}

.landing-promotions__card:hover .landing-promotions__card-icon {
  background: var(--gold-mid);
  color: var(--obsidian);
  transform: scale(1.1) rotateY(10deg);
  box-shadow: 0 10px 30px rgba(209, 158, 29, 0.3);
}

.landing-promotions__card-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-xs);
  line-height: 1;
}

.landing-promotions__card-title {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2xs);
  letter-spacing: 0.03em;
}

.landing-promotions__card-subtitle {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.landing-promotions__card-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gold-mid);
  /* Use goldenish color for better visibility */
  margin: 0;
  flex-grow: 1;
}

/* Hover Effects */
.landing-promotions__card:hover {
  transform: translateY(-8px) scale(1.02);
}

.landing-promotions__card:hover .landing-promotions__card-inner {
  border-color: rgba(209, 158, 29, 0.3);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(209, 158, 29, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Enhanced Ticker */
.landing-promotions__ticker {
  position: relative;
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid), var(--gold-end));
  padding: var(--space-lg) 0;
  margin: var(--space-2xl) 0;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(209, 158, 29, 0.2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.landing-promotions__ticker::before,
.landing-promotions__ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.landing-promotions__ticker::before {
  left: 0;
  background: linear-gradient(to right,
      rgba(209, 158, 29, 1),
      rgba(209, 158, 29, 0));
}

.landing-promotions__ticker::after {
  right: 0;
  background: linear-gradient(to left,
      rgba(209, 158, 29, 1),
      rgba(209, 158, 29, 0));
}

.landing-promotions__ticker-content {
  display: flex;
  animation: marquee-scroll 25s linear infinite;
  white-space: nowrap;
}

.landing-promotions__ticker span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--obsidian);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-3xl);
  white-space: nowrap;
  position: relative;
}

.landing-promotions__ticker span::after {
  content: '•';
  position: absolute;
  right: calc(-1 * var(--space-xl));
  color: var(--obsidian);
  opacity: 0.6;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

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

/* Enhanced Action Buttons */
.landing-promotions__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.landing-promotions__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(209, 158, 29, 0.3);
  min-height: 52px;
}

.landing-promotions__primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-end));
  z-index: -1;
  transition: opacity var(--duration-fast) var(--ease-smooth);
  opacity: 0;
}

.landing-promotions__primary:hover::before {
  opacity: 1;
}

.landing-promotions__primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 50px rgba(209, 158, 29, 0.4);
}

.landing-promotions__primary:active {
  transform: translateY(-1px) scale(1.02);
}

.landing-promotions__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: linear-gradient(145deg,
      rgba(13, 3, 27, 0.8),
      rgba(22, 22, 22, 0.9));
  border: 2px solid rgba(209, 158, 29, 0.2);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-smooth);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  min-height: 52px;
}

.landing-promotions__secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(209, 158, 29, 0.05) 50%,
      transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
  transform: translateX(-100%);
}

.landing-promotions__secondary:hover::before {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-smooth), opacity var(--duration-fast) var(--ease-smooth);
}

.landing-promotions__secondary:hover {
  background: linear-gradient(145deg,
      rgba(209, 158, 29, 0.1),
      rgba(13, 3, 27, 0.9));
  border-color: rgba(209, 158, 29, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  color: var(--gold-mid);
}

.landing-promotions__secondary svg {
  transition: all var(--duration-fast) var(--ease-smooth);
}

.landing-promotions__secondary:hover svg {
  transform: scale(1.1);
  color: var(--gold-mid);
}

/* ==========================================================================
   LANDING PROMOTIONS RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .landing-promotions__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .landing-promotions__hero {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 768px) {
  .landing-promotions {
    padding: var(--space-lg) 0;
    min-height: auto;
  }

  .landing-promotions__hero {
    margin-bottom: var(--space-lg);
  }

  .landing-promotions__title {
    font-size: clamp(1.6rem, 5.5vw, 2.5rem);
    margin-bottom: var(--space-md);
  }

  .landing-promotions__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    padding: 0 var(--space-md);
  }

  .landing-promotions__card-inner {
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    min-height: 300px;
    gap: var(--space-xs);
    justify-content: center;
  }

  .landing-promotions__card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-sm);
  }

  .landing-promotions__card-number {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);
  }

  .landing-promotions__card-desc {
    font-size: var(--text-sm);
    line-height: 1.8;
    margin-top: var(--space-xs);
  }

  .landing-promotions__ticker span {
    font-size: var(--text-base);
    margin-right: var(--space-2xl);
  }

  .landing-promotions__actions {
    flex-direction: column;
    gap: var(--space-lg);
    padding: 0 var(--space-md);
  }

  .landing-promotions__primary,
  .landing-promotions__secondary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ==========================================================================
   WOOCOMMERCE STYLES
   Dark Luxury Aesthetics for Store & Single Product Pages
   ========================================================================== */

.woocommerce-page.container {
  padding-bottom: var(--space-3xl);
}

/* Note: Main .woocommerce ul.products grid styles moved to WOOCOMMERCE STORE / ARCHIVE section */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
  margin-top: var(--space-2xl);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: var(--space-sm);
  padding: 0;
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--charcoal);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold-gradient);
  color: var(--obsidian);
  box-shadow: 0 4px 16px rgba(209, 158, 29, 0.3);
}

/* --- Single Product Page --- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-lg);
}

@media (min-width: 992px) {
  .woocommerce div.product {
    grid-template-columns: 1fr 1fr;
  }
}

/* Gallery */
.woocommerce div.product div.images {
  margin-bottom: 0 !important;
  width: 100% !important;
  float: none !important;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-md);
  box-shadow: none !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: 1em;
  right: 1em;
  background: rgba(11, 12, 12, 0.7);
  color: var(--text-primary);
  border-radius: var(--radius-circle);
}

/* Summary */
.woocommerce div.product div.summary {
  margin-bottom: 0 !important;
  width: 100% !important;
  float: none !important;
}

.product_title.entry-title {
  font-family: var(--font-hero);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  background: var(--gold-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--text-2xl);
  font-family: var(--font-nav);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.woocommerce .woocommerce-product-rating {
  margin-bottom: var(--space-md);
}

.woocommerce .star-rating {
  color: var(--gold-mid);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
}

/* Add to Cart form */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
}

.woocommerce div.product form.cart .quantity .qty {
  width: 70px;
  height: 50px;
  background: var(--charcoal);
  color: var(--text-primary);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  font-size: 1rem;
  font-family: var(--font-nav);
  text-align: center;
}

.woocommerce div.product form.cart .button {
  background: var(--cta-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 var(--space-xl);
  height: 50px;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth) !important;
}

.woocommerce div.product form.cart .button:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}

/* Note: Demand gauge styles defined in main DEMAND GAUGE section */

/* Meta Data */
.product_meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.product_meta a {
  color: var(--text-secondary);
}

.product_meta span {
  display: block;
  margin-bottom: var(--space-xs);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin: 0 0 var(--space-xl) 0;
  padding: 0;
  display: flex;
  gap: var(--space-lg);
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 0 var(--space-sm) 0 !important;
  border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--text-secondary) !important;
  font-family: var(--font-nav);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gold-start) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--gold-start) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--text-secondary);
  line-height: 1.8;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--font-nav);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  font-size: 1.5rem;
}

/* Related Products */
.woocommerce .related.products {
  margin-top: var(--space-3xl);
  border-top: 1px solid rgba(250, 250, 250, 0.1);
  padding-top: var(--space-2xl);
}

.woocommerce .related.products h2 {
  font-family: var(--font-hero);
  font-size: 3rem;
  background: var(--gold-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-xl);
}

/* ==========================================================================
   SINGLE PRODUCT PAGE CUSTOMIZATIONS
   ========================================================================== */

.yonko-single-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 992px) {
  .yonko-single-product-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.yonko-single-product__gallery {
  position: relative;
  background: var(--obsidian-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.yonko-single-product__summary .product_title {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.yonko-single-product__summary .price {
  font-family: var(--font-nav);
  font-size: var(--text-2xl);
  color: var(--gold-start);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.yonko-single-product__summary .woocommerce-product-details__short-description {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.woocommerce div.product form.cart,
.hero--single-product .hero__add-to-cart-wrapper form.cart {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(250, 250, 250, 0.1);
  flex-wrap: wrap;
}

.hero--single-product .hero__add-to-cart-wrapper form.cart {
  border-top: none;
  padding-top: 0;
}

.woocommerce div.product form.cart .button,
.hero--single-product .hero__add-to-cart-wrapper form.cart .button {
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-xl);
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.woocommerce div.product form.cart .button:hover,
.hero--single-product .hero__add-to-cart-wrapper form.cart .button:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}

.woocommerce div.product form.cart div.quantity,
.hero--single-product .hero__add-to-cart-wrapper form.cart div.quantity {
  margin: 0;
}

.woocommerce div.product form.cart .qty,
.hero--single-product .hero__add-to-cart-wrapper form.cart .qty {
  width: 70px;
  height: 52px;
  background: var(--charcoal-light);
  color: var(--text-primary);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  text-align: center;
  font-family: var(--font-nav);
  font-weight: 600;
}

/* ==========================================================================
   WOOCOMMERCE STORE / ARCHIVE
   ========================================================================== */

.woocommerce-products-header {
  margin-bottom: var(--space-3xl);
  text-align: center;
}

.woocommerce-products-header__title {
  font-family: var(--font-hero);
  font-size: clamp(3rem, 8vw, 6rem);
  text-transform: uppercase;
  background: var(--gold-horizontal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--font-nav);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.1);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
}

.woocommerce ul.products li.product {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: 0 !important;
  width: 100% !important;
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05) rotate(1deg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: var(--space-md) var(--space-md) var(--space-xs);
  font-weight: 700;
}

.woocommerce ul.products li.product .price {
  color: var(--gold-start);
  font-size: var(--text-md);
  margin: 0 var(--space-md) var(--space-md);
  font-weight: 600;
}

.woocommerce ul.products li.product .button {
  margin: auto var(--space-md) var(--space-md);
  background: var(--cta-primary);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: background var(--duration-fast) var(--ease-smooth);
}

.woocommerce ul.products li.product .button:hover {
  background: var(--cta-hover);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  border: none;
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-3xl);
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--charcoal);
  color: var(--text-primary);
  border-radius: var(--radius-circle);
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-nav);
  font-weight: 700;
  transition: all var(--duration-fast) var(--ease-smooth);
  border: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold-start);
  color: var(--obsidian);
  border-color: var(--gold-start);
}

/* ==========================================================================
   WOOCOMMERCE CART PAGE
   ========================================================================== */

.woocommerce-cart .woocommerce {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 992px) {
  .woocommerce-cart .woocommerce {
    flex-direction: row;
    align-items: flex-start;
  }

  .woocommerce-cart form.woocommerce-cart-form {
    flex: 1 1 65%;
  }

  .woocommerce-cart .cart-collaterals {
    flex: 1 1 35%;
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

.woocommerce-cart table.cart {
  border: none;
  border-radius: 0;
}

.woocommerce-cart table.cart th {
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-nav);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
  padding-bottom: var(--space-md);
}

.woocommerce-cart table.cart td {
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  padding: var(--space-md) 0;
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-thumbnail img {
  width: 80px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.woocommerce-cart table.cart td.product-name a {
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: var(--text-md);
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: var(--gold-start);
  font-weight: 600;
  font-family: var(--font-nav);
}

.woocommerce-cart table.cart td.product-remove a {
  color: var(--cta-primary) !important;
  font-size: 1.5rem;
  font-weight: 300;
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(230, 57, 70, 0.1);
}

.woocommerce-cart table.cart td.product-remove a:hover {
  background: var(--cta-primary);
  color: #fff !important;
}

.woocommerce-cart table.cart .actions {
  padding-top: var(--space-xl);
  border: none;
}

.woocommerce-cart .actions .coupon input {
  height: 48px;
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.1);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-xl);
  font-family: var(--font-nav);
}

.woocommerce-cart .actions .button {
  height: 48px;
  background: var(--charcoal-light);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-xl);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.woocommerce-cart .actions .button[name="update_cart"] {
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.2);
}

/* Cart Collaterals / Totals */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  background: var(--obsidian-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-hero);
  font-size: 2rem;
  margin-bottom: var(--space-md);
  border-bottom: 2px solid rgba(209, 158, 29, 0.3);
  padding-bottom: var(--space-sm);
}

.woocommerce-cart .cart_totals table {
  border: none;
  width: 100%;
}

.woocommerce-cart .cart_totals th {
  background: transparent;
  border-top: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  padding: var(--space-sm) 0;
  font-family: var(--font-nav);
  color: var(--text-secondary);
  font-weight: normal;
}

.woocommerce-cart .cart_totals td {
  border-top: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  padding: var(--space-sm) 0;
  text-align: right;
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-weight: 600;
}

.woocommerce-cart .cart_totals .order-total td {
  color: var(--gold-start);
  font-size: var(--text-xl);
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: var(--space-lg) 0 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT PAGE
   ========================================================================== */

/* Hide default WooCommerce coupon notice (we have custom one in sidebar) */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
  display: none !important;
}

.woocommerce-checkout .woocommerce {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 992px) {
  .woocommerce-checkout .woocommerce {
    flex-direction: row;
    align-items: flex-start;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order {
    flex: 1 1 40%;
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--space-2xl);
  }

  .woocommerce-checkout #customer_details {
    flex: 1 1 60%;
  }
}

.woocommerce-checkout form.checkout h3 {
  font-family: var(--font-hero);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: var(--space-lg);
  color: var(--gold-start);
  border-bottom: 2px solid rgba(250, 250, 250, 0.1);
  padding-bottom: var(--space-sm);
}

.woocommerce form .form-row label {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.1);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--text-md);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 2px rgba(209, 158, 29, 0.2);
  outline: none;
}

/* Select2 drop-downs in checkout */
.select2-container--default .select2-selection--single {
  background: var(--charcoal) !important;
  border: 1px solid rgba(250, 250, 250, 0.1) !important;
  border-radius: var(--radius-sm) !important;
  height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 48px !important;
  padding-left: 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
}

/* Order Review Panel */
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-hero);
  font-size: 2.5rem;
  color: var(--gold-start);
  margin-bottom: var(--space-md);
}

.woocommerce-checkout #order_review {
  background: var(--obsidian-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce-checkout table.shop_table {
  border: none;
  border-radius: 0;
  width: 100%;
}

.woocommerce-checkout table.shop_table th {
  background: transparent;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(250, 250, 250, 0.1);
  padding: var(--space-md) 0;
  font-family: var(--font-nav);
  font-weight: 600;
}

.woocommerce-checkout table.shop_table td {
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  padding: var(--space-md) 0;
  color: var(--text-primary);
}

.woocommerce-checkout table.shop_table tfood td,
.woocommerce-checkout table.shop_table tfoot th {
  border-top: 1px solid rgba(250, 250, 250, 0.1);
}

.woocommerce-checkout table.shop_table .order-total td {
  color: var(--gold-start);
  font-size: var(--text-xl);
  font-weight: 700;
}

/* Payment Methods Area */
.woocommerce-checkout #payment {
  background: var(--charcoal);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
  padding: var(--space-md);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.woocommerce-checkout #payment ul.payment_methods li {
  color: var(--text-primary);
  font-family: var(--font-nav);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--charcoal-light);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--charcoal-light);
}

.woocommerce-checkout #payment .place-order {
  padding: 0;
  margin: 0;
}

.woocommerce-checkout #payment .place-order .button {
  width: 100%;
  height: 56px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.woocommerce-checkout #payment .place-order .button:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}


/* ==========================================================================
   YONKO CUSTOM CART PAGE
   ========================================================================== */

.yonko-page--cart,
.yonko-page--checkout {
  padding: var(--space-xl) var(--space-lg);
  min-height: 80vh;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .yonko-page--cart,
  .yonko-page--checkout {
    padding: var(--space-lg) var(--space-md);
  }
}

@media (max-width: 480px) {
  .yonko-page--cart,
  .yonko-page--checkout {
    padding: var(--space-md) var(--space-sm);
  }
}

.yonko-page__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* --- Cart Header --- */
.yonko-cart__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-cart__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.yonko-cart__title {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}

.yonko-cart__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
}

/* Breadcrumb. Children are all forced to inline-flex, non-shrinking items
   with nowrap so the nav always renders as a single horizontal row. Spacing
   is driven by the parent `gap` — no per-item padding/margin tricks that
   could desync and cause separators to orphan onto a second line on narrow
   viewports. If the labels ever overflow the header width, the nav scrolls
   horizontally instead of wrapping. */
.yonko-cart__breadcrumb {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.yonko-cart__breadcrumb::-webkit-scrollbar { display: none; }

.yonko-cart__breadcrumb > * {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}

.yonko-cart__breadcrumb a {
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__breadcrumb a:hover {
  color: var(--gold-start);
}

.yonko-cart__breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 0;
}

.yonko-cart__breadcrumb-current {
  color: var(--text-primary);
}

/* --- Empty Cart State --- */
.yonko-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  max-width: 500px;
  margin: 0 auto;
}

.yonko-cart__empty-icon {
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  opacity: 0.3;
}

.yonko-cart__empty-icon svg {
  width: 120px;
  height: 120px;
}

.yonko-cart__empty-title {
  font-family: var(--font-hero);
  font-size: var(--text-3xl);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.yonko-cart__empty-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.yonko-cart__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 16px 32px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-cart__empty-cta:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4);
  color: var(--text-primary);
}

/* --- Cart Container (2-column layout) --- */
.yonko-cart__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .yonko-cart__container {
    grid-template-columns: 1fr 400px;
    gap: var(--space-2xl);
  }
}

/* --- Cart Table Header --- */
.yonko-cart__table-header {
  display: none;
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .yonko-cart__table-header {
    display: grid;
    grid-template-columns: 1fr 120px 140px 120px 50px;
    gap: var(--space-md);
    align-items: center;
  }
}

.yonko-cart__th {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.yonko-cart__th--quantity,
.yonko-cart__th--subtotal {
  text-align: center;
}

/* --- Cart Items --- */
.yonko-cart__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.yonko-cart__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-cart__item:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .yonko-cart__item {
    grid-template-columns: 100px 1fr 120px 140px 120px 50px;
    align-items: center;
    padding: var(--space-md);
  }
}

/* --- Cart Item Image --- */
.yonko-cart__item-image {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--charcoal);
}

.yonko-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yonko-cart__item-link {
  display: block;
  width: 100%;
  height: 100%;
}

.yonko-cart__item-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

/* --- Cart Item Info --- */
.yonko-cart__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.yonko-cart__item-name {
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.yonko-cart__item-name a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__item-name a:hover {
  color: var(--gold-start);
}

.yonko-cart__item-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.yonko-cart__item-meta dt {
  display: inline;
  font-weight: 500;
}

.yonko-cart__item-meta dd {
  display: inline;
  margin: 0;
  margin-right: var(--space-sm);
}

.yonko-cart__item-sku {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Cart Item Price --- */
.yonko-cart__item-price {
  font-family: var(--font-nav);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.yonko-cart__item-price--mobile {
  display: block;
  margin-top: var(--space-xs);
}

.yonko-cart__item-price--desktop {
  display: none;
}

@media (min-width: 768px) {
  .yonko-cart__item-price--mobile {
    display: none;
  }

  .yonko-cart__item-price--desktop {
    display: block;
    text-align: center;
  }
}

/* --- Cart Item Quantity --- */
.yonko-cart__item-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .yonko-cart__item-quantity {
    justify-content: center;
  }
}

.yonko-cart__item-quantity .quantity {
  display: flex;
  align-items: center;
  background: var(--charcoal);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.yonko-cart__item-quantity .qty {
  width: 60px;
  height: 44px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 600;
}

.yonko-cart__item-quantity .qty:focus {
  outline: none;
  background: rgba(209, 158, 29, 0.1);
}

/* --- Cart Item Subtotal --- */
.yonko-cart__item-subtotal {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: var(--text-lg);
  text-align: right;
}

@media (min-width: 768px) {
  .yonko-cart__item-subtotal {
    text-align: center;
  }
}

.yonko-cart__subtotal-amount {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Cart Item Remove --- */
.yonko-cart__item-remove {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .yonko-cart__item-remove {
    justify-content: center;
  }
}

.yonko-cart__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__remove-btn:hover {
  background: rgba(230, 57, 70, 0.1);
  color: var(--cta-primary);
}

/* --- Cart Actions --- */
.yonko-cart__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .yonko-cart__actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.yonko-cart__actions-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .yonko-cart__actions-left {
    flex-direction: row;
    align-items: center;
  }
}

.yonko-cart__continue-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__continue-btn:hover {
  color: var(--text-primary);
}

.yonko-cart__continue-btn svg {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__continue-btn:hover svg {
  transform: translateX(-4px);
}

/* --- Coupon Field --- */
.yonko-cart__coupon {
  display: flex;
  gap: var(--space-sm);
}

.yonko-cart__coupon-input {
  flex: 1;
  min-width: 160px;
  height: 44px;
  padding: 0 var(--space-md);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__coupon-input:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.15);
}

.yonko-cart__coupon-input::placeholder {
  color: var(--text-muted);
}

.yonko-cart__coupon-btn {
  height: 44px;
  padding: 0 var(--space-lg);
  background: var(--charcoal-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__coupon-btn:hover {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
}

.yonko-cart__update-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 44px;
  padding: 0 var(--space-lg);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-cart__update-btn:hover {
  border-color: var(--gold-start);
  color: var(--gold-start);
}

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

/* --- Cart Sidebar --- */
.yonko-cart__sidebar {
  position: relative;
}

@media (min-width: 1024px) {
  .yonko-cart__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

.yonko-cart__summary {
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
}

.yonko-cart__summary-title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Cart Totals Table --- */
.yonko-cart__totals .shop_table {
  width: 100%;
  border: none;
  margin-bottom: var(--space-lg);
}

.yonko-cart__totals .shop_table th,
.yonko-cart__totals .shop_table td {
  padding: var(--space-md) 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.yonko-cart__totals .shop_table th {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
}

.yonko-cart__totals .shop_table td {
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.yonko-cart__totals .order-total th,
.yonko-cart__totals .order-total td {
  padding-top: var(--space-lg);
  border-bottom: none;
  font-size: var(--text-lg);
}

.yonko-cart__totals .order-total td {
  font-size: var(--text-xl);
  font-weight: 700;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Checkout Button --- */
.yonko-cart__checkout .checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-smooth);
  border: none;
  cursor: pointer;
}

.yonko-cart__checkout .checkout-button:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4);
}

/* --- Trust Badges --- */
.yonko-cart__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-cart__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.yonko-cart__trust-item svg {
  color: var(--gold-start);
  flex-shrink: 0;
}


/* ==========================================================================
   YONKO CUSTOM CHECKOUT PAGE
   ========================================================================== */

/* --- Checkout Header --- */
.yonko-checkout__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* See comment on .yonko-cart__breadcrumb — same single-row-or-scroll pattern. */
.yonko-checkout__breadcrumb {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.yonko-checkout__breadcrumb::-webkit-scrollbar { display: none; }

.yonko-checkout__breadcrumb > * {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}

.yonko-checkout__breadcrumb a {
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__breadcrumb a:hover {
  color: var(--gold-start);
}

.yonko-checkout__breadcrumb-sep {
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 0;
}

.yonko-checkout__breadcrumb-current {
  color: var(--text-primary);
}

.yonko-checkout__secure-badge {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  color: var(--gold-start);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.yonko-checkout__title {
  font-family: var(--font-hero);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}

/* --- Progress Steps --- */
.yonko-checkout__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-md);
}

.yonko-checkout__step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.yonko-checkout__step-number,
.yonko-checkout__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--charcoal);
  border: 2px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-checkout__step-icon svg {
  width: 14px;
  height: 14px;
}

.yonko-checkout__step-label {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: color var(--duration-normal) var(--ease-smooth);
}

@media (max-width: 640px) {
  .yonko-checkout__step-label {
    display: none;
  }
}

.yonko-checkout__step--active .yonko-checkout__step-number {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
}

.yonko-checkout__step--active .yonko-checkout__step-label {
  color: var(--text-primary);
}

.yonko-checkout__step--completed .yonko-checkout__step-icon {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
}

.yonko-checkout__step--completed .yonko-checkout__step-label {
  color: var(--gold-start);
}

.yonko-checkout__step-line {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 var(--space-xs);
}

.yonko-checkout__step-line--completed {
  background: var(--gold-start);
}

/* --- Checkout Container --- */
.yonko-checkout__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .yonko-checkout__container {
    grid-template-columns: minmax(600px, 1fr) 480px;
    gap: var(--space-3xl);
  }
}

/* Extra spacing for wider screens */
@media (min-width: 1280px) {
  .yonko-checkout__container {
    grid-template-columns: minmax(700px, 1fr) 520px;
    gap: 4rem;
  }
}

/* Utilize more space on very wide screens */
@media (min-width: 1600px) {
  .yonko-checkout__container {
    grid-template-columns: minmax(800px, 1fr) 520px;
    gap: 5rem;
  }
}

/* --- Checkout Main --- */
.yonko-checkout__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* --- Checkout Sections --- */
.yonko-checkout__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.yonko-checkout__section {
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-normal) var(--ease-smooth);
}

.yonko-checkout__section:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.yonko-checkout__section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(209, 158, 29, 0.1);
  border-radius: var(--radius-md);
  color: var(--gold-start);
  flex-shrink: 0;
}

.yonko-checkout__section-title h2 {
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.yonko-checkout__section-title p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.yonko-checkout__section-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Checkout Login Prompt --- */
.yonko-checkout__login-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(209, 158, 29, 0.05);
  border: 1px solid rgba(209, 158, 29, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.yonko-checkout__login-link {
  color: var(--gold-start);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yonko-checkout__login-link:hover {
  color: var(--gold-mid);
}

/* --- Checkout Form Fields --- */
.yonko-checkout__fields-grid .woocommerce-billing-fields__field-wrapper,
.yonko-checkout__fields-grid .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Keep all fields in single column layout for consistency */
.yonko-checkout__fields-grid .form-row {
  margin: 0;
}

.yonko-checkout__fields-grid .form-row-wide,
.yonko-checkout__fields-grid .yonko-checkout__field--full {
  grid-column: 1 / -1;
}

.yonko-checkout__fields-grid label {
  display: block;
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.yonko-checkout__fields-grid label .required {
  color: var(--cta-primary);
}

.yonko-checkout__fields-grid .input-text,
.yonko-checkout__fields-grid textarea,
.yonko-checkout__fields-grid select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__fields-grid textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-md);
  resize: vertical;
}

.yonko-checkout__fields-grid .input-text:focus,
.yonko-checkout__fields-grid textarea:focus,
.yonko-checkout__fields-grid select:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.15);
  outline: none;
}

.yonko-checkout__fields-grid .input-text::placeholder {
  color: var(--text-muted);
}

/* Select2 Overrides for Checkout */
.yonko-checkout__fields-grid .select2-container--default .select2-selection--single {
  height: 48px !important;
  background: var(--charcoal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md) !important;
}

.yonko-checkout__fields-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  padding-left: var(--space-md) !important;
  color: var(--text-primary) !important;
}

.yonko-checkout__fields-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: var(--space-md) !important;
}

.select2-dropdown {
  background: var(--charcoal) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.select2-container--default .select2-results__option {
  padding: var(--space-sm) var(--space-md) !important;
  color: var(--text-secondary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(209, 158, 29, 0.2) !important;
  color: var(--text-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: rgba(209, 158, 29, 0.1) !important;
  color: var(--gold-start) !important;
}

/* --- Checkout Sidebar --- */
.yonko-checkout__sidebar {
  position: relative;
}

@media (min-width: 1024px) {
  .yonko-checkout__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }
}

.yonko-checkout__order-summary {
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
}

.yonko-checkout__summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__summary-title svg {
  color: var(--gold-start);
}

.yonko-checkout__item-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--gold-start);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--obsidian);
  margin-left: auto;
}

/* --- Order Items Preview --- */
.yonko-checkout__order-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
}

.yonko-checkout__order-items::-webkit-scrollbar {
  width: 4px;
}

.yonko-checkout__order-items::-webkit-scrollbar-track {
  background: var(--charcoal);
  border-radius: 2px;
}

.yonko-checkout__order-items::-webkit-scrollbar-thumb {
  background: var(--gold-start);
  border-radius: 2px;
}

.yonko-checkout__order-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
}

.yonko-checkout__order-item-image {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--charcoal);
  flex-shrink: 0;
}

.yonko-checkout__order-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yonko-checkout__order-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--gold-start);
  border-radius: var(--radius-circle);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  color: var(--obsidian);
}

.yonko-checkout__order-item-details {
  flex: 1;
  min-width: 0;
}

.yonko-checkout__order-item-name {
  display: block;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yonko-checkout__order-item-meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yonko-checkout__order-item-price {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* --- Edit Cart Link --- */
.yonko-checkout__edit-cart {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__edit-cart:hover {
  color: var(--gold-start);
}

/* --- Checkout Coupon --- */
.yonko-checkout__coupon {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__coupon-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__coupon-toggle:hover {
  color: var(--gold-start);
}

.yonko-checkout__coupon-toggle svg:first-child {
  color: var(--gold-start);
}

.yonko-checkout__coupon-arrow {
  margin-left: auto;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__coupon.is-open .yonko-checkout__coupon-arrow {
  transform: rotate(180deg);
}

.yonko-checkout__coupon-form {
  display: none;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.yonko-checkout__coupon.is-open .yonko-checkout__coupon-form {
  display: flex;
}

.yonko-checkout__coupon-input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-md);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.yonko-checkout__coupon-input:focus {
  border-color: var(--gold-start);
  outline: none;
}

.yonko-checkout__coupon-btn {
  height: 40px;
  padding: 0 var(--space-md);
  background: var(--gold-start);
  border: none;
  border-radius: var(--radius-md);
  color: var(--obsidian);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__coupon-btn:hover {
  background: var(--gold-mid);
}

/* --- Checkout Totals --- */
.yonko-checkout__totals .woocommerce-checkout-review-order-table {
  width: 100%;
  border: none;
  margin-bottom: var(--space-md);
}

.yonko-checkout__totals .woocommerce-checkout-review-order-table th,
.yonko-checkout__totals .woocommerce-checkout-review-order-table td {
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__totals .woocommerce-checkout-review-order-table thead {
  display: none;
}

.yonko-checkout__totals .woocommerce-checkout-review-order-table tfoot th {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
}

.yonko-checkout__totals .woocommerce-checkout-review-order-table tfoot td {
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.yonko-checkout__totals .order-total th,
.yonko-checkout__totals .order-total td {
  padding-top: var(--space-md) !important;
  border-bottom: none !important;
}

.yonko-checkout__totals .order-total td {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Payment Methods --- */
.yonko-checkout__totals #payment {
  background: transparent;
  padding: 0;
  margin-top: var(--space-md);
}

.yonko-checkout__totals #payment ul.payment_methods {
  padding: 0;
  margin: 0 0 var(--space-sm);
  border: none;
}

.yonko-checkout__totals #payment ul.payment_methods li {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  list-style: none;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-checkout__totals #payment ul.payment_methods li:hover {
  border-color: rgba(209, 158, 29, 0.3);
}

.yonko-checkout__totals #payment ul.payment_methods li.wc_payment_method>label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.yonko-checkout__totals #payment ul.payment_methods li.wc_payment_method>label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold-start);
}

.yonko-checkout__totals #payment div.payment_box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.yonko-checkout__totals #payment div.payment_box::before {
  display: none;
}

/* --- Place Order Button --- */
.yonko-checkout__totals #payment .place-order {
  margin-top: var(--space-md);
}

.yonko-checkout__totals #payment .place-order .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--cta-primary);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-checkout__totals #payment .place-order .button:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4);
}

.yonko-checkout__totals .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--space-md);
}

.yonko-checkout__totals .woocommerce-privacy-policy-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

.yonko-checkout__totals .woocommerce-privacy-policy-text a {
  color: var(--gold-start);
}

/* --- Checkout Trust Badges --- */
.yonko-checkout__trust {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.yonko-checkout__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-nav);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.yonko-checkout__trust-item svg {
  color: var(--gold-start);
  flex-shrink: 0;
}

/* --- Login Required State --- */
.yonko-checkout__login-required {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  max-width: 500px;
  margin: 0 auto;
}

.yonko-checkout__login-required p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.yonko-checkout__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--gold-start);
  color: var(--obsidian);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-checkout__login-btn:hover {
  background: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(209, 158, 29, 0.3);
  color: var(--obsidian);
}

/* ==========================================================================
   CHECKOUT — MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  /* Overall page container */
  .yonko-page--checkout .yonko-page__container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-top: calc(var(--header-height) + var(--space-md));
  }

  .yonko-checkout__header {
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
  }

  /* Breadcrumb — shrink on mobile and tighten the inter-label gap. */
  .yonko-checkout__breadcrumb {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    gap: var(--space-xs);
  }

  /* Title — smaller on mobile */
  .yonko-checkout__title {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    text-align: center;
  }

  /* Progress steps — compact */
  .yonko-checkout__progress {
    margin-top: var(--space-sm);
  }

  .yonko-checkout__step {
    padding: var(--space-xs) var(--space-sm);
  }

  .yonko-checkout__step-line {
    max-width: 30px;
  }

  /* Checkout Container — single column */
  .yonko-checkout__container {
    gap: var(--space-lg);
  }

  /* Section cards — reduced padding */
  .yonko-checkout__section {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  /* Section header — stack icon and title vertically on small screens */
  .yonko-checkout__section-header {
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .yonko-checkout__section-icon {
    width: 40px;
    height: 40px;
  }

  .yonko-checkout__section-icon svg {
    width: 20px;
    height: 20px;
  }

  .yonko-checkout__section-title h2 {
    font-size: var(--text-base);
  }

  .yonko-checkout__section-title p {
    font-size: var(--text-xs);
  }

  /* Form fields — mobile-friendly sizes */
  .yonko-checkout__fields-grid .input-text,
  .yonko-checkout__fields-grid textarea,
  .yonko-checkout__fields-grid select {
    height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    border-radius: var(--radius-md);
  }

  .yonko-checkout__fields-grid textarea {
    min-height: 80px;
    font-size: 16px;
  }

  .yonko-checkout__fields-grid label {
    font-size: 0.7rem;
    margin-bottom: 4px;
  }

  /* Ensure grid stays single column */
  .yonko-checkout__fields-grid .woocommerce-billing-fields__field-wrapper,
  .yonko-checkout__fields-grid .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Select2 overrides for mobile */
  .yonko-checkout__fields-grid .select2-container--default .select2-selection--single {
    height: 48px !important;
  }

  .yonko-checkout__fields-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
    font-size: 16px !important;
  }

  /* Order Summary — compact for mobile */
  .yonko-checkout__order-summary {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .yonko-checkout__summary-title {
    font-size: var(--text-base);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .yonko-checkout__order-items {
    max-height: 200px;
    gap: var(--space-xs);
  }

  /* Order item — compact */
  .yonko-checkout__order-item {
    gap: var(--space-sm);
    padding: var(--space-xs);
  }

  .yonko-checkout__order-item-image {
    width: 50px;
    height: 50px;
  }

  .yonko-checkout__order-item-qty {
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .yonko-checkout__order-item-name {
    font-size: var(--text-xs);
  }

  .yonko-checkout__order-item-price {
    font-size: var(--text-xs);
  }

  /* Edit cart link */
  .yonko-checkout__edit-cart {
    margin-bottom: var(--space-md);
    font-size: 0.7rem;
  }

  /* Coupon section — compact */
  .yonko-checkout__coupon {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .yonko-checkout__coupon-toggle {
    font-size: var(--text-xs);
  }

  .yonko-checkout__coupon-form {
    flex-direction: row;
  }

  .yonko-checkout__coupon-input {
    height: 40px;
    font-size: 16px;
  }

  .yonko-checkout__coupon-btn {
    height: 40px;
    padding: 0 var(--space-md);
    white-space: nowrap;
  }

  /* Totals table */
  .yonko-checkout__totals .woocommerce-checkout-review-order-table tfoot th {
    font-size: var(--text-xs);
  }

  .yonko-checkout__totals .woocommerce-checkout-review-order-table tfoot td {
    font-size: var(--text-sm);
  }

  .yonko-checkout__totals .order-total td {
    font-size: var(--text-lg) !important;
  }

  /* Payment methods — mobile */
  .yonko-checkout__totals #payment ul.payment_methods li {
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  .yonko-checkout__totals #payment ul.payment_methods li.wc_payment_method>label {
    font-size: var(--text-xs);
    gap: var(--space-xs);
  }

  .yonko-checkout__totals #payment ul.payment_methods li.wc_payment_method>label input[type="radio"] {
    width: 16px;
    height: 16px;
  }

  .yonko-checkout__totals #payment div.payment_box {
    padding: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
  }

  /* Place order button — sticky bottom bar */
  .yonko-checkout__totals #payment .place-order {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0));
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100;
  }

  .yonko-checkout__totals #payment .place-order .button {
    height: 52px;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
  }

  /* Terms & privacy — compact above sticky button */
  .yonko-checkout__totals .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--space-sm);
  }

  .yonko-checkout__totals .woocommerce-privacy-policy-text {
    font-size: 0.65rem;
    line-height: 1.5;
  }

  /* Trust badges — wrap properly */
  .yonko-checkout__trust {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    /* Add extra bottom padding to account for sticky place order button */
    margin-bottom: 100px;
  }

  .yonko-checkout__trust-item {
    font-size: 9px;
  }

  .yonko-checkout__trust-item svg {
    width: 14px;
    height: 14px;
  }

  /* Login required state */
  .yonko-checkout__login-required {
    padding: var(--space-2xl) var(--space-md);
  }

  .yonko-checkout__login-required p {
    font-size: var(--text-base);
  }

  .yonko-checkout__login-btn {
    width: 100%;
    padding: 14px 32px;
  }

  /* Sections gap */
  .yonko-checkout__sections {
    gap: var(--space-lg);
  }

  .yonko-checkout__main {
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   CART — MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .yonko-cart__header {
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
  }

  .yonko-cart__breadcrumb {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    /* Tighter gap on mobile so all three labels fit within the viewport
       without triggering the horizontal-scroll fallback. */
    gap: var(--space-xs);
  }

  .yonko-cart__title {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .yonko-page--checkout .yonko-page__container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .yonko-checkout__header-top {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
  }

  .yonko-checkout__section {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
  }

  .yonko-checkout__section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }

  .yonko-checkout__section-icon {
    width: 36px;
    height: 36px;
  }

  .yonko-checkout__section-icon svg {
    width: 18px;
    height: 18px;
  }

  .yonko-checkout__order-summary {
    padding: var(--space-sm);
  }

  .yonko-checkout__order-item-image {
    width: 44px;
    height: 44px;
  }

  .yonko-checkout__coupon-form {
    flex-direction: column;
  }

  .yonko-checkout__coupon-btn {
    width: 100%;
  }

  /* Compact step line on very small screens */
  .yonko-checkout__step-line {
    max-width: 20px;
    margin: 0 2px;
  }

  .yonko-checkout__step {
    padding: var(--space-xs) 6px;
  }

  .yonko-checkout__step-number,
  .yonko-checkout__step-icon {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .yonko-checkout__step-icon svg {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   PHASE 1: SHOP CATALOG / ARCHIVE OVERHAUL
   ========================================================================== */

ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl) var(--space-lg);
  align-items: end;
  /* Creates an asymmetrical look if images vary */
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.products::before,
ul.products::after {
  display: none;
}

.yonko-filter-link {
  position: relative;
}

.yonko-filter-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-horizontal);
}

.yonko-filter-link:hover::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
}

/* ==========================================================================
   PRODUCT CARD — Modern Minimal Design (Reference-Inspired)
   Structure: Header (title+subtitle) → Image Container → Overlay (price+CTA)
   ========================================================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 0;
  border: none;
  overflow: visible;
}

.product-card__inner {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-light);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-smooth),
    box-shadow 0.4s var(--ease-smooth);
  height: 100%;
}

.product-card:hover .product-card__inner {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Header: Title + Subtitle --- */
.product-card__header {
  padding: 20px 20px 12px;
  background: var(--charcoal-light);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.product-card__header-content {
  flex: 1;
  min-width: 0;
}

.product-card__title {
  font-family: var(--font-nav);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-card__title a:hover {
  color: var(--gold-mid);
}

.product-card__subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
}

/* --- Image Container --- */
.product-card__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: 0 12px 12px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
}

/* Color variants for image backgrounds — earthy/muted tones matching brand */
.product-card--olive .product-card__img-wrap {
  background: linear-gradient(145deg, #6b7c5a 0%, #8a9a72 50%, #a4b38d 100%);
}

.product-card--slate .product-card__img-wrap {
  background: linear-gradient(145deg, #4a5568 0%, #5f6b7a 50%, #718096 100%);
}

.product-card--moss .product-card__img-wrap {
  background: linear-gradient(145deg, #5a6b4a 0%, #6b7c5a 50%, #7c8d6a 100%);
}

/* Fallback for older color classes */
.product-card--pink .product-card__img-wrap {
  background: linear-gradient(145deg, #6b5a5f 0%, #7a6a6f 50%, #8a7a7f 100%);
}

.product-card--blue .product-card__img-wrap {
  background: linear-gradient(145deg, #4a5568 0%, #5a6578 50%, #6a7588 100%);
}

.product-card--green .product-card__img-wrap {
  background: linear-gradient(145deg, #5a6b4a 0%, #6a7b5a 50%, #7a8b6a 100%);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Maintains aspect ratio without cropping */
  padding: 12px;
  /* Reduced from 20px to show more of the image */
  transition: transform 0.5s var(--ease-smooth);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.35));
}

.product-card:hover .product-card__image {
  transform: scale(1.08) rotate(2deg);
}

/* --- Badge (Sale, etc.) --- */
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--cta-primary);
  color: #fff;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  z-index: 5;
  display: inline-block;
  width: auto;
  max-width: fit-content;
}

/* --- Overlay: Price + CTA Arrow --- */
.product-card__overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}

.product-card__price {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 10px;
  pointer-events: auto;
}

.product-card__currency {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  opacity: 0.85;
  font-family: var(--font-nav);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.product-card__currency svg {
  width: 18px;
  height: 18px;
}

.product-card__amount {
  font-family: var(--font-nav);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* CTA Arrow Button */
.product-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--text-primary);
  border-radius: 50%;
  color: var(--obsidian);
  transition: transform 0.3s var(--ease-smooth),
    background 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: auto;
}

.product-card:hover .product-card__cta {
  transform: scale(1.1);
  background: var(--gold-mid);
  box-shadow: 0 8px 20px rgba(209, 158, 29, 0.4);
}

.product-card__cta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

/* --- Wishlist Button (deprecated, replaced with add to cart) --- */
.product-card__wishlist {
  display: none;
}

/* --- Add to Cart Button --- */
/* --- Add to Cart Button (in Header) --- */
.product-card__add-to-cart-btn {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(209, 158, 29, 0.3);
  color: var(--gold-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s var(--ease-smooth);
  opacity: 1;
  transform: none;
}

.product-card__add-to-cart-btn:hover {
  background: var(--gold-start);
  border-color: var(--gold-mid);
  transform: scale(1.08);
  color: var(--obsidian);
  box-shadow: 0 4px 16px rgba(209, 158, 29, 0.4);
}

.product-card__add-to-cart-btn:active {
  transform: scale(0.95);
}

.product-card__add-to-cart-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.product-card__add-to-cart-btn:hover svg {
  transform: scale(1.1);
}

/* --- Pre-book Section (if enabled) --- */
.product-card__prebook {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card__prebook-btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-card__prebook-btn:hover {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
}

/* Legacy/fallback classes cleanup */
.product-card__link {
  display: none;
}

.product-card__actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  opacity: 0;
  pointer-events: none;
  background: rgba(11, 12, 12, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.product-card:hover .product-card__actions {
  opacity: 1;
  pointer-events: auto;
}

.product-card__add-to-cart {
  padding: 12px 24px;
  background: var(--obsidian);
  color: var(--text-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: translateY(20px);
  transition: transform var(--duration-normal) var(--ease-smooth),
    background var(--duration-fast), color var(--duration-fast);
}

.product-card:hover .product-card__add-to-cart {
  transform: translateY(0);
}

.product-card__add-to-cart:hover {
  background: var(--gold-start);
  color: var(--obsidian);
}

.product-card__rating {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.product-card__stars {
  color: var(--gold-start);
  font-size: 14px;
}

.product-card:hover .product-card__stars {
  color: var(--obsidian-deep);
}

.product-card__reviews {
  font-size: 12px;
  color: var(--text-muted);
}

.product-card:hover .product-card__reviews {
  color: rgba(11, 12, 12, 0.6);
}

.product-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--cta-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-family: var(--font-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.yonko-shop-filters__sorting select {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-nav);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  appearance: none;
}

.yonko-shop-filters__sorting select option {
  background: var(--charcoal);
  color: var(--text-primary);
}

/* ==========================================================================
   PHASE 2: SINGLE PRODUCT SCROLLYTELLING UX
   ========================================================================== */

.yonko-single-product {
  padding-bottom: var(--space-3xl);
}

.yonko-single-product__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: flex-start;
  /* Important for sticky to work */
}

/* LEFT: Scrolling Gallery */
.yonko-single-product__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.yonko-gallery-item {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.yonko-gallery-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  will-change: transform;
}

/* RIGHT: Sticky Info */
.yonko-single-product__summary-wrapper {
  position: sticky;
  top: calc(var(--header-height) + var(--space-xl));
  padding-right: var(--space-xl);
}

.yonko-single-product__summary form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.yonko-single-product__summary .quantity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--obsidian);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.yonko-single-product__summary .quantity input {
  background: transparent;
  color: var(--text-primary);
  border: none;
  font-family: var(--font-nav);
  font-size: 1.1rem;
  width: 40px;
  text-align: center;
  padding: 0;
}

.yonko-single-product__summary .single_add_to_cart_button {
  background: var(--obsidian-deep);
  color: var(--gold-start);
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
  border: 1px solid var(--gold-start);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.yonko-single-product__summary .single_add_to_cart_button:hover {
  background: var(--gold-start);
  color: var(--obsidian-deep);
  box-shadow: 0 8px 24px rgba(209, 158, 29, 0.3);
  transform: translateY(-2px);
}

/* Responsive Single Product */
@media (max-width: 992px) {
  .yonko-single-product__wrapper {
    grid-template-columns: 1fr;
  }

  .yonko-single-product__summary-wrapper {
    position: relative;
    top: 0;
    padding-right: 0;
  }

  .yonko-detail-section {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PRODUCT CARD — Shop Page / Grid Context
   Additional styles for product cards outside hero carousel
   ========================================================================== */

/* Shop/Archive pages grid */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.products .product-card {
  width: 100%;
}

/* Slightly larger cards on shop pages */
ul.products .product-card__header {
  padding: 18px 18px 12px;
}

ul.products .product-card__title {
  font-size: 1.1rem;
}

ul.products .product-card__img-wrap {
  aspect-ratio: 4 / 3;
}

/* Demand gauge in cards */
.product-card .demand-gauge {
  padding: 0;
  margin: 8px 0 0;
}

.product-card .demand-gauge__title {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.product-card .demand-gauge__track {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  height: 4px;
}


/* ==========================================================================
   404 PAGE — Dark Luxury Error State
   ========================================================================== */

.yonko-404 {
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.yonko-404__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(209, 158, 29, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.yonko-404__content {
  max-width: 560px;
  padding: var(--space-xl);
  position: relative;
  z-index: 1;
}

.yonko-404__number {
  font-family: var(--font-hero);
  font-size: clamp(6rem, 20vw, 12rem);
  line-height: 1;
  margin-bottom: var(--space-lg);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-404 3s ease-in-out infinite;
}

@keyframes shimmer-404 {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.2);
  }
}

.yonko-404__title {
  font-family: var(--font-hero);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.yonko-404__text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.yonko-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-lg);
}

.yonko-404__link {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid rgba(250, 250, 250, 0.15);
  border-radius: var(--radius-pill);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.yonko-404__link:hover {
  border-color: var(--gold-start);
  color: var(--gold-start);
  background: rgba(209, 158, 29, 0.05);
}


/* ==========================================================================
   PRE-BOOK MODAL — Enhanced Dark Luxury Styling
   ========================================================================== */

.prebook-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.prebook-modal__content {
  position: relative;
  background: linear-gradient(165deg, var(--surface) 0%, var(--obsidian-deep) 100%);
  border: 1px solid rgba(209, 158, 29, 0.2);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.prebook-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: rgba(250, 250, 250, 0.05);
  border: 1px solid rgba(250, 250, 250, 0.1);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.prebook-modal__close:hover {
  background: rgba(230, 57, 70, 0.15);
  border-color: var(--cta-primary);
  color: var(--cta-primary);
  transform: rotate(90deg);
}

.prebook-modal__header {
  margin-bottom: var(--space-xl);
}

.prebook-modal__desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: var(--space-sm);
}

.prebook-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.prebook-modal__field select,
.prebook-modal__field input {
  width: 100%;
  height: 52px;
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.prebook-modal__field select:focus,
.prebook-modal__field input:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.15);
  outline: none;
}

.prebook-modal__field select option {
  background: var(--charcoal);
  color: var(--text-primary);
}

.prebook-modal__message {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  text-align: center;
  margin-top: var(--space-sm);
}

.prebook-modal__message.success {
  background: rgba(134, 199, 22, 0.15);
  border: 1px solid rgba(134, 199, 22, 0.3);
  color: #86C716;
}

.prebook-modal__message.error {
  background: rgba(230, 57, 70, 0.15);
  border: 1px solid rgba(230, 57, 70, 0.3);
  color: var(--cta-primary);
}


/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT — Dark Luxury Dashboard
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(250, 250, 250, 0.05);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

@media (min-width: 992px) {
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    margin-bottom: 0;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--text-primary);
  background: rgba(250, 250, 250, 0.02);
  padding-left: calc(var(--space-lg) + 4px);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--gold-start);
  background: rgba(209, 158, 29, 0.08);
  border-left: 3px solid var(--gold-start);
}

.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(250, 250, 250, 0.05);
  padding: var(--space-xl);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--font-hero);
  color: var(--gold-start);
  margin-bottom: var(--space-md);
}

.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--gold-start);
  transition: color var(--duration-fast);
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--gold-mid);
}

/* Account Orders Table */
.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-account .woocommerce-orders-table th {
  background: rgba(250, 250, 250, 0.02);
  color: var(--text-secondary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-md);
  text-align: left;
  border-bottom: 1px solid rgba(250, 250, 250, 0.08);
}

.woocommerce-account .woocommerce-orders-table td {
  padding: var(--space-md);
  border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  color: var(--text-primary);
}

.woocommerce-account .woocommerce-orders-table .button {
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.2);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.woocommerce-account .woocommerce-orders-table .button:hover {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
}

/* Address Cards */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.woocommerce-account .woocommerce-Address {
  background: var(--charcoal);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border: 1px solid rgba(250, 250, 250, 0.05);
}

.woocommerce-account .woocommerce-Address-title h3 {
  font-size: var(--text-lg) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.woocommerce-account .woocommerce-Address address {
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.8;
}


/* ==========================================================================
   SKELETON LOADING STATES — Luxury Shimmer Effect
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(250, 250, 250, 0.03) 50%,
      transparent 100%);
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

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

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-sm);
}

.skeleton-text--lg {
  width: 80%;
}

.skeleton-text--md {
  width: 60%;
}

.skeleton-text--sm {
  width: 40%;
}

.skeleton-image {
  aspect-ratio: 1;
  width: 100%;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(250, 250, 250, 0.03);
}

/* Skeleton Grid */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Skeleton Product Card */
.skeleton--product-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(250, 250, 250, 0.03);
  overflow: hidden;
}

.skeleton__image {
  aspect-ratio: 1;
  background: var(--charcoal);
}

.skeleton__content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton__line {
  height: 14px;
  background: var(--charcoal);
  border-radius: var(--radius-sm);
}

.skeleton__line--short {
  width: 40%;
}

.skeleton__line--medium {
  width: 70%;
}

.skeleton__line--full {
  width: 100%;
}

.skeleton__line--title {
  height: 20px;
  width: 85%;
}

.skeleton__line--price {
  height: 18px;
  width: 30%;
  background: linear-gradient(90deg, var(--charcoal), rgba(209, 158, 29, 0.1));
}

/* Skeleton Product Detail */
.skeleton--product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
}

@media (min-width: 1024px) {
  .skeleton--product-detail {
    grid-template-columns: 1fr 1fr;
  }
}

.skeleton__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton__main-image {
  aspect-ratio: 1;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
}

.skeleton__thumbs {
  display: flex;
  gap: var(--space-sm);
}

.skeleton__thumb {
  width: 80px;
  height: 80px;
  background: var(--charcoal);
  border-radius: var(--radius-md);
}

.skeleton__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

.skeleton__divider {
  height: 1px;
  background: rgba(250, 250, 250, 0.05);
  margin: var(--space-md) 0;
}

.skeleton__button {
  height: 56px;
  background: var(--charcoal);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
}

/* Skeleton Cart Item */
.skeleton-cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton--cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid rgba(250, 250, 250, 0.03);
}

.skeleton__cart-image {
  width: 80px;
  height: 80px;
  background: var(--charcoal);
  border-radius: var(--radius-md);
}

.skeleton__cart-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.skeleton__qty-box {
  width: 100px;
  height: 40px;
  background: var(--charcoal);
  border-radius: var(--radius-md);
}

.skeleton__cart-price .skeleton__line--price {
  width: 80px;
}

@media (max-width: 640px) {
  .skeleton--cart-item {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
  }

  .skeleton__cart-qty,
  .skeleton__cart-price {
    grid-column: 2;
  }
}


/* ==========================================================================
   FOOTER ENHANCEMENTS — Social Icons & Animations
   ========================================================================== */

.footer__socials {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.footer__social-link {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.footer__social-link:hover {
  background: var(--gold-start);
  border-color: var(--gold-start);
  color: var(--obsidian);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(209, 158, 29, 0.3);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .footer__newsletter-form {
    flex-direction: row;
    gap: var(--space-sm);
  }
}

.footer__newsletter-input {
  flex: 1;
  height: 52px;
}

.footer__newsletter-btn {
  height: 52px;
  white-space: nowrap;
}

.footer__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 158, 29, 0.3), transparent);
  margin: var(--space-2xl) 0;
}

/* Footer Column Hover Effects */
.footer__col-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
}

.footer__col-links a::before {
  content: '';
  width: 0;
  height: 1px;
  background: var(--gold-start);
  transition: width var(--duration-fast) var(--ease-smooth);
}

.footer__col-links a:hover::before {
  width: 12px;
}


/* ==========================================================================
   SCROLL ANIMATIONS — Reveal Classes
   ========================================================================== */

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth);
}

.reveal-fade.revealed {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delay utilities */
.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

.reveal-delay-5 {
  transition-delay: 0.5s;
}


/* ==========================================================================
   EMPTY STATES — Cart, Wishlist, etc.
   ========================================================================== */

.woocommerce-cart .cart-empty,
.woocommerce-wishlist .wishlist-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-circle);
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  color: var(--text-muted);
}

.empty-state__icon svg {
  width: 32px;
  height: 32px;
}

.empty-state__title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.empty-state__text {
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}


/* ==========================================================================
   TOAST NOTIFICATIONS — Feedback System
   ========================================================================== */

.yonko-toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.yonko-toast__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: toast-in 0.4s var(--ease-smooth);
  max-width: 380px;
}

.yonko-toast__item.toast-out {
  animation: toast-out 0.3s var(--ease-smooth) forwards;
}

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

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

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.yonko-toast__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.yonko-toast__item--success .yonko-toast__icon {
  color: #86C716;
}

.yonko-toast__item--error .yonko-toast__icon {
  color: var(--cta-primary);
}

.yonko-toast__item--info .yonko-toast__icon {
  color: var(--gold-start);
}

.yonko-toast__content {
  flex: 1;
}

.yonko-toast__title {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.yonko-toast__message {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.yonko-toast__close {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast);
}

.yonko-toast__close:hover {
  color: var(--text-primary);
}


/* ==========================================================================
   MOBILE OPTIMIZATIONS — Touch & Small Screens
   ========================================================================== */

@media (max-width: 640px) {

  /* Cart improvements */
  .woocommerce-cart table.cart {
    display: block;
  }

  .woocommerce-cart table.cart thead {
    display: none;
  }

  .woocommerce-cart table.cart tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.05);
  }

  .woocommerce-cart table.cart td {
    border: none;
    padding: var(--space-xs) 0;
  }

  .woocommerce-cart table.cart td.product-thumbnail {
    width: 80px;
  }

  .woocommerce-cart table.cart td.product-name {
    flex: 1;
  }

  .woocommerce-cart table.cart td.product-quantity,
  .woocommerce-cart table.cart td.product-subtotal {
    width: 50%;
  }

  .woocommerce-cart .actions {
    flex-direction: column;
    gap: var(--space-md);
  }

  .woocommerce-cart .actions .coupon {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }

  .woocommerce-cart .actions .coupon input,
  .woocommerce-cart .actions .button {
    width: 100%;
  }

  /* Checkout improvements */
  .woocommerce-checkout #customer_details {
    margin-bottom: var(--space-xl);
  }

  .woocommerce-checkout .col-1,
  .woocommerce-checkout .col-2 {
    width: 100%;
    float: none;
  }

  /* My Account improvements */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
  }

  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }

  /* Footer mobile */
  .footer__top {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .footer__newsletter-form {
    flex-direction: column;
  }

  .footer__newsletter-input,
  .footer__newsletter-btn {
    width: 100%;
  }

  /* Toast mobile position */
  .yonko-toast {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
  }

  .yonko-toast__item {
    max-width: none;
  }
}


/* ==========================================================================
   FOCUS STATES — Accessibility Enhancement
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--gold-start);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-start);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   PRINT STYLES — Invoice & Order Confirmation
   ========================================================================== */

@media print {

  .yonko-sidebar,
  .yonko-header,
  .yonko-footer,
  .prebook-modal,
  .yonko-toast {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .woocommerce-page {
    padding: 0 !important;
  }

  a {
    text-decoration: underline;
  }

  .button,
  .hero__cta {
    display: none !important;
  }
}


/* ==========================================================================
   COMING SOON PAGE — Redesigned Dark-Luxury System
   ========================================================================== */

.cs-page {
  padding-left: var(--sidebar-width);
  padding-right: 0;
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Add floating geometric patterns */
.cs-page .geometric-pattern {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.cs-page .geometric-pattern::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 5%;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, transparent 40%, rgba(209, 158, 29, 0.01) 50%, transparent 60%);
  transform: rotate(45deg);
  border-radius: 20px;
}

.cs-page .geometric-pattern::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 8%;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, transparent 30%, rgba(250, 250, 250, 0.008) 50%, transparent 70%);
  transform: rotate(-30deg);
  border-radius: 50%;
}

/* Ambient Background Effect - Enhanced with multiple layers */
.cs-page::before {
  content: '';
  position: fixed;
  top: 20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cs-page::after {
  content: '';
  position: fixed;
  top: 60%;
  left: -15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ========== PAGE HEADER ========== */
.cs-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-4xl);
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  /* Center the header by compensating for sidebar offset */
  margin-left: calc(50% - var(--sidebar-width) / 2);
  transform: translateX(-50%);
}

.cs-header__title {
  font-family: var(--font-hero);
  font-size: clamp(3.5rem, 10vw, 6rem);
  line-height: 0.9;
  margin-bottom: var(--space-xl);
  position: relative;
}

.cs-header__desc {
  color: var(--text-secondary);
  font-size: var(--text-xl);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  font-weight: 300;
}

.cs-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: rgba(209, 158, 29, 0.08);
  border: 1px solid rgba(209, 158, 29, 0.15);
  border-radius: 100px;
  margin-bottom: var(--space-lg);
}

.cs-header__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-mid);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

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

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.cs-header__badge-text {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-mid);
}

.cs-header__title {
  font-family: var(--font-hero);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.cs-header__title-line {
  display: inline;
  margin-right: 0.25em;
}

.cs-header__title-line:last-child {
  margin-right: 0;
}

.cs-header__title-line--gold {
  background: linear-gradient(135deg, var(--gold-start) 0%, var(--gold-mid) 50%, var(--gold-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-header__desc {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

.cs-header__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: rgba(250, 250, 250, 0.01);
  border: 1px solid rgba(250, 250, 250, 0.04);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.cs-header__stat-num {
  font-family: var(--font-hero);
  font-size: var(--text-4xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-start) 0%, var(--gold-mid) 50%, var(--gold-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-header__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.cs-header__stat-num {
  font-family: var(--font-hero);
  font-size: var(--text-3xl);
  font-weight: 700;
}

.cs-header__stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========== PRODUCTS GRID ========== */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-xl) var(--space-lg);
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

/* Create visual variety for multiple cards */
.cs-grid .cs-card:nth-child(1) {
  grid-column: span 1;
}

.cs-grid .cs-card:nth-child(2) {
  grid-column: span 1;
}

.cs-grid .cs-card:nth-child(3) {
  grid-column: span 1;
}

.cs-grid .cs-card:nth-child(4) {
  grid-column: span 2;
}

/* Featured larger card */
.cs-grid .cs-card:nth-child(5) {
  grid-column: span 1;
}

.cs-grid .cs-card:nth-child(6) {
  grid-column: span 1;
}

/* For single card, center it with more prominence */
.cs-grid .cs-card:only-child {
  grid-column: 1 / -1;
  max-width: 480px;
  margin: 0 auto;
}

/* ========== CARD BASE ========== */
.cs-card {
  --card-accent: var(--gold-mid);
  background: linear-gradient(145deg,
      rgba(20, 20, 24, 0.97) 0%,
      rgba(25, 25, 29, 0.95) 50%,
      rgba(18, 18, 22, 0.98) 100%);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth),
    border-color var(--duration-normal) var(--ease-smooth);
  backdrop-filter: blur(10px);
}

/* Add subtle glow effect */
.cs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(var(--card-accent), 0.02) 0%,
      transparent 50%,
      rgba(var(--card-accent), 0.01) 100%);
  pointer-events: none;
  z-index: 0;
}

.cs-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cs-card--gold {
  --card-accent: 209, 158, 29;
  /* RGB values for rgba usage */
}

.cs-card--copper {
  --card-accent: 184, 115, 51;
}

.cs-card--silver {
  --card-accent: 142, 154, 175;
}

.cs-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--card-accent), 0.15),
    0 0 40px rgba(var(--card-accent), 0.1);
  border-color: rgba(250, 250, 250, 0.12);
}

/* ========== CARD HEADER ========== */
.cs-card__header {
  padding: var(--space-lg) var(--space-lg) 0;
}

.cs-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.cs-card__category {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cs-card__interest {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--card-accent);
}

.cs-card__interest svg {
  fill: var(--card-accent);
}

.cs-card__title {
  font-family: var(--font-hero);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--text-primary);
}

/* ========== CARD IMAGE ========== */
.cs-card__image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  margin: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cs-card__image-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--card-accent) 8%, var(--charcoal)) 0%,
      var(--charcoal) 100%);
}

.cs-card__image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-md);
  z-index: 1;
  transition: transform var(--duration-slow) var(--ease-smooth);
}

.cs-card:hover .cs-card__image {
  transform: scale(1.08) rotate(2deg);
}

.cs-card__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  z-index: 1;
}

/* Badge */
.cs-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  z-index: 2;
}

.cs-card__badge-pulse {
  width: 6px;
  height: 6px;
  background: var(--gold-mid);
  border-radius: 50%;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* ========== CARD INFO ========== */
.cs-card__info {
  padding: 0 var(--space-lg) var(--space-lg);
  margin-top: auto;
}

.cs-card__details {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(250, 250, 250, 0.06);
}

.cs-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-card__price-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-card__price-value {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cs-card__currency {
  font-weight: 600;
}

.cs-card__countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cs-card__countdown-num {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.cs-card__countdown-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-card__date {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cs-card__date svg {
  opacity: 0.6;
}

/* ========== INTEREST FORM ========== */
.cs-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-card__form-row {
  display: flex;
  gap: var(--space-sm);
}

.cs-card__input-wrap {
  position: relative;
  flex: 1;
}

.cs-card__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-smooth);
}

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

.cs-card__input:focus {
  outline: none;
  border-color: var(--card-accent);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.08);
}

.cs-card__input-focus {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-start), var(--gold-mid));
  transform: translateX(-50%);
  transition: width var(--duration-fast) var(--ease-smooth);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cs-card__input:focus~.cs-card__input-focus {
  width: calc(100% - 2px);
}

.cs-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 48px;
  padding: 0 var(--space-lg);
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
  overflow: hidden;
}

.cs-card__btn:hover {
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-end));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(209, 158, 29, 0.25);
}

.cs-card__btn:active {
  transform: translateY(0) scale(0.98);
}

.cs-card__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cs-card__btn-text,
.cs-card__btn-icon {
  transition: all var(--duration-fast) var(--ease-smooth);
}

.cs-card__btn-loading {
  display: none;
}

.cs-card__btn.is-loading .cs-card__btn-text,
.cs-card__btn.is-loading .cs-card__btn-icon {
  display: none;
}

.cs-card__btn.is-loading .cs-card__btn-loading {
  display: flex;
}

.cs-card__btn-loading .spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cs-card__message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
  display: none;
}

.cs-card__message.is-visible {
  display: block;
}

.cs-card__message.interest-form__message--success {
  background: rgba(162, 209, 97, 0.1);
  color: #a2d161;
  border: 1px solid rgba(162, 209, 97, 0.2);
}

.cs-card__message.interest-form__message--error {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.2);
}

/* ========== PRE-BOOK FORM — Multi-Step System ========== */

.cs-card__prebook-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

/* --- Step Indicator --- */
.prebook-form__steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-sm);
}

.prebook-form__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-accent);
  background: var(--charcoal);
  color: var(--text-muted);
  border: 2px solid rgba(250, 250, 250, 0.08);
  transition: all 0.35s var(--ease-smooth);
  position: relative;
  z-index: 2;
}

.prebook-form__step-dot--active {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(209, 158, 29, 0.3);
}

.prebook-form__step-dot--completed {
  background: var(--gold-mid);
  color: var(--obsidian);
  border-color: transparent;
}

.prebook-form__step-line {
  width: 60px;
  height: 2px;
  background: rgba(250, 250, 250, 0.06);
  position: relative;
  overflow: hidden;
}

.prebook-form__step-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--line-progress, 0%);
  background: linear-gradient(90deg, var(--gold-start), var(--gold-mid));
  transition: width 0.4s var(--ease-smooth);
}

/* --- Step Content --- */
.prebook-form__step {
  opacity: 1;
}

.prebook-form__step-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.prebook-form__step-title svg {
  color: var(--gold-mid);
  flex-shrink: 0;
}

.prebook-form__no-prefs {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-md) 0;
}

/* --- Color Swatches --- */
.prebook-form__attr-group {
  margin-bottom: var(--space-md);
}

.prebook-form__attr-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.prebook-form__color-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.prebook-form__color-swatch {
  /* Triple-pin dimensions to prevent the flex-shrink "vertical oval" bug. */
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex: 0 0 32px;
  border-radius: 50%;
  border: 2px solid rgba(250, 250, 250, 0.1);
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease-smooth),
              border-color 0.25s var(--ease-smooth),
              box-shadow 0.25s var(--ease-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
}

.prebook-form__color-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(250, 250, 250, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.prebook-form__color-swatch--active {
  border-color: var(--gold-mid) !important;
  box-shadow: 0 0 0 2px rgba(209, 158, 29, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

.prebook-form__color-check {
  display: none;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.prebook-form__color-swatch--active .prebook-form__color-check {
  display: flex;
}

/* --- Size Buttons --- */
.prebook-form__size-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.prebook-form__size-btn {
  min-width: 44px;
  height: 36px;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 var(--space-sm);
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}

.prebook-form__size-btn:hover {
  background: rgba(250, 250, 250, 0.06);
  border-color: rgba(250, 250, 250, 0.15);
  color: var(--text-primary);
}

.prebook-form__size-btn--active {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(209, 158, 29, 0.25);
}

/* --- Generic Select --- */
.prebook-form__select-wrap {
  position: relative;
}

.prebook-form__select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-xl) 0 var(--space-md);
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-smooth);
}

.prebook-form__select:focus {
  outline: none;
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.08);
}

.prebook-form__select-arrow {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

/* --- Contact Form Fields --- */
.prebook-form__field {
  margin-bottom: var(--space-sm);
}

.prebook-form__field label,
.prebook-form__field .prebook-form__field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.prebook-form__field .required {
  color: var(--gold-mid);
}

.prebook-form__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-md);
  background: rgba(250, 250, 250, 0.03);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: all 0.25s var(--ease-smooth);
}

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

.prebook-form__input:focus {
  outline: none;
  border-color: var(--gold-start);
  background: rgba(250, 250, 250, 0.05);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.08);
}

.prebook-form__field--focused label {
  color: var(--gold-mid);
}

/* --- Buttons --- */
.prebook-form__next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 44px;
  background: rgba(250, 250, 250, 0.05);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  margin-top: var(--space-xs);
}

.prebook-form__next-btn:hover {
  background: rgba(209, 158, 29, 0.1);
  border-color: rgba(209, 158, 29, 0.2);
  color: var(--gold-mid);
}

.prebook-form__next-btn:hover svg {
  transform: translateX(3px);
}

.prebook-form__next-btn svg {
  transition: transform 0.2s var(--ease-smooth);
}

.prebook-form__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.prebook-form__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--space-md);
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s var(--ease-smooth);
}

.prebook-form__back-btn:hover {
  border-color: rgba(250, 250, 250, 0.15);
  color: var(--text-primary);
}

.prebook-form__submit-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 44px;
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.prebook-form__submit-btn:hover {
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-end));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(209, 158, 29, 0.3);
}

.prebook-form__submit-btn:active {
  transform: translateY(0) scale(0.98);
}

.prebook-form__submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.prebook-form__submit-loading {
  display: none;
}

.prebook-form__submit-btn.is-loading .prebook-form__submit-text,
.prebook-form__submit-btn.is-loading .prebook-form__submit-icon {
  display: none;
}

.prebook-form__submit-btn.is-loading .prebook-form__submit-loading {
  display: flex;
}

/* --- Messages --- */
.prebook-form__message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
}

.prebook-form__message--error {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.2);
}

.prebook-form__message--success {
  background: rgba(162, 209, 97, 0.1);
  color: #a2d161;
  border: 1px solid rgba(162, 209, 97, 0.2);
}

/* --- Success State --- */
.prebook-form__success {
  text-align: center;
  padding: var(--space-lg) 0;
}

.prebook-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(162, 209, 97, 0.15), rgba(162, 209, 97, 0.05));
  border: 1px solid rgba(162, 209, 97, 0.2);
  border-radius: 50%;
  color: #a2d161;
  margin-bottom: var(--space-md);
}

.prebook-form__success-title {
  font-family: var(--font-hero);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.prebook-form__success-desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* --- Preference Summary Chips --- */
.prebook-form__summary-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.prebook-form__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(250, 250, 250, 0.04);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
}

.prebook-form__summary-label {
  color: var(--text-muted);
  text-transform: capitalize;
}

.prebook-form__summary-value {
  color: var(--gold-mid);
  font-weight: 600;
  text-transform: capitalize;
}

/* ========== EMPTY STATE ========== */
.cs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  min-height: 50vh;
}

.cs-empty__visual {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.cs-empty__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-orb 4s ease-in-out infinite;
}

@keyframes pulse-orb {

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

  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}

.cs-empty__icon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: 50%;
  color: var(--gold-mid);
  z-index: 1;
}

.cs-empty__icon svg {
  stroke: var(--gold-mid);
}

.cs-empty__title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.cs-empty__desc {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: var(--space-xl);
}

.cs-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.cs-empty__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(209, 158, 29, 0.3);
}

.cs-empty__cta svg {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.cs-empty__cta:hover svg {
  transform: translateX(4px);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .cs-page {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    padding-top: calc(var(--header-height) + var(--space-xl));
  }

  .cs-page::before {
    width: 400px;
    height: 400px;
    right: -20%;
  }

  .cs-header {
    margin-bottom: var(--space-2xl);
  }

  .cs-grid {
    max-width: 800px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  /* Reset grid spans for tablet */
  .cs-grid .cs-card:nth-child(n) {
    grid-column: span 1;
  }

  .cs-grid .cs-card:only-child {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .cs-header {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-2xl);
    /* Reset centering on mobile (no sidebar) */
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .cs-header__title {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .cs-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: 0 var(--space-sm);
  }

  /* Make cards wider (full width of the viewport) and shorter on mobile.
     The default 4/3 image aspect-ratio created very tall cards on narrow
     viewports; tighten the image and surrounding paddings so the card
     reads as a compact horizontal-ish tile. */
  .cs-card__header {
    padding: var(--space-md) var(--space-md) 0;
  }

  .cs-card__title {
    font-size: var(--text-lg);
  }

  .cs-card__image-wrap {
    aspect-ratio: 16 / 9;
    margin: var(--space-sm) var(--space-md);
  }

  .cs-card__image {
    padding: var(--space-sm);
  }

  .cs-card__form-row {
    flex-direction: column;
  }

  .cs-card__btn {
    width: 100%;
  }

  /* Pre-book form: ensure buttons sit inside card with proper horizontal padding */
  .cs-card__info {
    padding: 0 var(--space-md) var(--space-md);
  }

  .prebook-form__next-btn,
  .prebook-form__submit-btn,
  .prebook-form__back-btn {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .prebook-form__actions {
    gap: var(--space-xs);
    margin-top: var(--space-md);
  }

  .prebook-form__next-btn svg,
  .prebook-form__submit-btn .prebook-form__submit-icon,
  .prebook-form__back-btn svg {
    flex: 0 0 auto;
    margin-left: 4px;
  }
}

@media (max-width: 480px) {
  .cs-grid {
    padding: 0 var(--space-xs);
    gap: var(--space-sm);
  }

  .cs-card__header {
    padding: var(--space-sm) var(--space-md) 0;
  }

  .cs-card__title {
    font-size: var(--text-base);
  }

  .cs-card__image-wrap {
    aspect-ratio: 16 / 10;
    margin: var(--space-xs) var(--space-sm);
  }

  .cs-card__image {
    padding: var(--space-xs);
  }

  .cs-card__info {
    padding: 0 var(--space-md) var(--space-md);
  }

  .cs-card__details {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .cs-card__countdown {
    align-items: flex-start;
  }

  .cs-empty {
    padding: var(--space-2xl) var(--space-md);
  }
}

/* Header Nav Highlight (Coming Soon link) */
.header-nav__link--highlight {
  position: relative;
}

.header-nav__link--highlight::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-start), var(--gold-mid));
  opacity: 0.6;
}


/* ==========================================================================
   PRODUCT CARD — Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
  .hero__carousel .product-card {
    flex: 0 0 clamp(280px, 60vw, 340px);
  }

  ul.products {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /* Card width is set by the consolidated rule inside the (max-width: 1024px)
     "hero__carousel" block above (82vw with clamp). This block only tunes the
     per-element padding/typography. */

  .product-card__header {
    padding: 16px 16px 10px;
  }

  .product-card__title {
    font-size: 1rem;
  }

  .product-card__img-wrap {
    margin: 0 10px 10px;
  }

  .product-card__image {
    padding: 15px;
  }

  .product-card__amount {
    font-size: 1.2rem;
  }

  .product-card__cta {
    width: 40px;
    height: 40px;
  }

  ul.products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .hero__carousel .product-card {
    flex: 0 0 clamp(220px, 84vw, 280px);
  }

  .product-card__header {
    padding: 14px 14px 8px;
  }

  .product-card__title {
    font-size: 0.95rem;
  }

  .product-card__subtitle {
    font-size: 0.75rem;
  }

  .product-card__img-wrap {
    margin: 0 8px 8px;
    aspect-ratio: 1 / 1;
  }

  .product-card__image {
    padding: 12px;
  }

  .product-card__overlay {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }

  .product-card__price {
    padding: 6px 10px;
  }

  .product-card__amount {
    font-size: 1.1rem;
  }

  .product-card__currency svg {
    width: 14px;
    height: 14px;
  }

  .product-card__cta {
    width: 36px;
    height: 36px;
  }

  .product-card__cta svg {
    width: 14px;
    height: 14px;
  }

  .product-card__add-to-cart-btn {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }

  ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}


/* ==========================================================================
   SINGLE PRODUCT PAGE — Modern Clean Layout
   Structure: Left Gallery | Center Showcase | Right Info
   ========================================================================== */

.single-product-page {
  min-height: 100vh;
  padding-top: var(--header-height);
  padding-left: var(--sidebar-width);
  background: var(--obsidian);
}

.sp-container {
  display: grid;
  grid-template-columns: 100px 1fr 420px;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px;
  min-height: calc(100vh - var(--header-height));
  align-items: center;
}

/* --- LEFT: Thumbnail Gallery --- */
.sp-gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-gallery__thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--charcoal);
  border: 2px solid transparent;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sp-gallery__thumb:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--charcoal-light);
}

.sp-gallery__thumb--active {
  border-color: var(--text-primary);
  background: var(--charcoal-light);
}

.sp-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* --- CENTER: Product Showcase --- */
.sp-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.sp-showcase__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sp-showcase__circle--main {
  position: absolute;
  /* Stack circles on top of each other */
  width: 85%;
  max-width: 500px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
      rgba(60, 60, 60, 0.8) 0%,
      rgba(40, 40, 40, 0.6) 40%,
      rgba(30, 30, 30, 0.4) 70%,
      transparent 100%);
  box-shadow:
    inset 0 0 60px rgba(255, 255, 255, 0.03),
    0 0 100px rgba(0, 0, 0, 0.3);
  z-index: 1;
  /* Bottom layer */
}

.sp-showcase__circle--overlay {
  position: absolute;
  width: calc(85% * 0.7);
  /* 30% smaller than main circle (70% of main size) */
  max-width: 350px;
  /* 30% smaller than 500px */
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
      rgba(75, 75, 80, 0.6) 0%,
      /* Slightly lighter shade for depth */
      rgba(50, 50, 55, 0.4) 50%,
      rgba(35, 35, 40, 0.2) 80%,
      transparent 100%);
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 0 60px rgba(0, 0, 0, 0.25);
  z-index: 2;
  /* Top layer for depth effect */
}

.sp-showcase__image-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-showcase__image {
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  transition: all var(--duration-slow) var(--ease-smooth);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
  transform: rotate(-12deg);
  /* Add slight tilt */
}

/* --- RIGHT: Product Info --- */
.sp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}

.sp-info__inner {
  max-width: 380px;
}

/* Category Label */
.sp-info__category {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Product Title */
.sp-info__title {
  font-family: var(--font-nav);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

/* Rating */
.sp-info__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sp-info__stars {
  display: flex;
  gap: 2px;
}

.sp-info__stars .star {
  font-size: 0.9rem;
  line-height: 1;
}

.sp-info__stars .star--filled {
  color: var(--gold-start);
}

.sp-info__stars .star--half {
  color: var(--gold-start);
  opacity: 0.6;
}

.sp-info__stars .star--empty {
  color: var(--text-muted);
}

.sp-info__rating-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Price */
.sp-info__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 28px;
}

.sp-info__currency {
  font-family: var(--font-nav);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.8;
}

.sp-info__amount {
  font-family: var(--font-nav);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Color Variants */
.sp-info__colors {
  margin-bottom: 24px;
}

.sp-info__colors-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.sp-info__colors-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.sp-info__colors-value {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.sp-info__colors-swatches {
  display: flex;
  gap: 10px;
}

.sp-info__swatch {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--charcoal);
  border: 2px solid transparent;
  padding: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sp-info__swatch:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.sp-info__swatch--active {
  border-color: var(--text-primary);
}

.sp-info__swatch-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Color Swatches - New Style.
   Triple-pin dimensions + flex:0 0 so flex-shrink cannot squash width below
   height and turn the circle into a vertical ellipse. */
.sp-info__color-swatch {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.sp-info__color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.sp-info__color-swatch--active {
  border-color: var(--gold-mid);
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(209, 158, 29, 0.3);
}

.sp-info__color-swatch-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Size Selection */
.sp-info__size-section {
  margin-bottom: 20px;
}

.sp-info__size-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  display: block;
  margin-bottom: 12px;
}

.sp-info__size-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-info__size-option {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-nav);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 50px;
  text-align: center;
}

.sp-info__size-option:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
}

.sp-info__size-option--active {
  border-color: var(--gold-mid);
  background: rgba(209, 158, 29, 0.1);
  color: var(--gold-mid);
}

/* Selectors Row */
.sp-info__selectors {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.sp-info__select-wrap {
  position: relative;
  flex: 1;
}

.sp-info__select-wrap--qty {
  flex: 0 0 90px;
}

.sp-info__select {
  width: 100%;
  height: 48px;
  padding: 0 36px 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--charcoal);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  appearance: none;
  transition: all 0.3s ease;
}

.sp-info__select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.sp-info__select:focus {
  outline: none;
  border-color: var(--gold-start);
}

.sp-info__select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Actions Row */
.sp-info__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sp-info__wishlist {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.sp-info__wishlist:hover {
  background: rgba(230, 57, 70, 0.1);
  border-color: var(--cta-primary);
  color: var(--cta-primary);
}

.sp-info__wishlist:hover svg {
  fill: currentColor;
}

.sp-info__add-to-cart {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 28px;
  border-radius: 50px;
  border: none;
  background: var(--text-primary);
  color: var(--obsidian);
  font-family: var(--font-nav);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sp-info__add-to-cart:hover {
  background: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(209, 158, 29, 0.3);
}

.sp-info__add-to-cart--loading {
  pointer-events: none;
  opacity: 0.7;
}

.sp-info__add-to-cart--loading .sp-info__add-text::after {
  content: '...';
  animation: loading-dots 1s infinite;
}

@keyframes loading-dots {

  0%,
  20% {
    content: '.';
  }

  40% {
    content: '..';
  }

  60%,
  100% {
    content: '...';
  }
}

.sp-info__add-to-cart--success {
  background: #22c55e;
}

.sp-info__add-to-cart--success .sp-info__add-text::before {
  content: '✓ ';
}

.sp-info__add-arrow {
  transition: transform 0.3s ease;
}

.sp-info__add-to-cart:hover .sp-info__add-arrow {
  transform: translateX(4px);
}

/* Description Toggle */
.sp-info__description {
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}

.sp-info__desc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

.sp-info__desc-toggle:hover {
  color: var(--gold-mid);
}

.sp-info__desc-toggle svg {
  transition: transform 0.3s ease;
}

.sp-info__desc-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.sp-info__desc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

.sp-info__desc-content p {
  margin-top: 16px;
  margin-bottom: 0;
}


/* ==========================================================================
   SINGLE PRODUCT PAGE — Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .sp-container {
    grid-template-columns: 80px 1fr 360px;
    gap: 30px;
    padding: 40px 30px;
  }

  .sp-gallery__thumb {
    width: 70px;
    height: 70px;
  }

  .sp-info__inner {
    max-width: 340px;
  }
}

@media (max-width: 1024px) {
  .single-product-page {
    padding-left: 0;
  }

  .sp-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
    padding: 30px 20px;
    max-width: 600px;
  }

  /* Reorder for mobile: Showcase first, then gallery, then info */
  .sp-gallery {
    order: 2;
  }

  .sp-showcase {
    order: 1;
  }

  .sp-info {
    order: 3;
  }

  .sp-gallery__thumbs {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .sp-gallery__thumb {
    width: 60px;
    height: 60px;
  }

  .sp-showcase {
    min-height: 350px;
  }

  .sp-showcase__image {
    max-height: 320px;
  }

  .sp-info {
    padding-left: 0;
  }

  .sp-info__inner {
    max-width: 100%;
  }

  .sp-info__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 640px) {
  .sp-container {
    padding: 20px 16px;
    gap: 24px;
  }

  .sp-gallery__thumb {
    width: 54px;
    height: 54px;
    padding: 6px;
  }

  .sp-showcase {
    min-height: 280px;
  }

  .sp-showcase__circle {
    width: 90%;
  }

  .sp-showcase__image {
    max-height: 260px;
  }

  .sp-info__title {
    font-size: 1.5rem;
  }

  .sp-info__amount {
    font-size: 1.85rem;
  }

  .sp-info__swatch {
    width: 48px;
    height: 48px;
  }

  .sp-info__selectors {
    flex-direction: column;
  }

  .sp-info__select-wrap--qty {
    flex: 1;
  }

  .sp-info__actions {
    flex-direction: column;
  }

  .sp-info__wishlist {
    width: 100%;
    border-radius: 10px;
    height: 48px;
  }

  .sp-info__add-to-cart {
    width: 100%;
  }
}


/* ==========================================================================
   STORE PAGE — Custom Shop with Dark-Luxury Aesthetic
   ========================================================================== */

.yonko-main {
  position: relative;
  z-index: 1;
}

.st-page {
  padding-left: var(--sidebar-width);
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-3xl);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Ambient Background Effects */
.st-page::before {
  content: '';
  position: fixed;
  top: 10%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.025) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.st-page::after {
  content: '';
  position: fixed;
  bottom: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(142, 154, 175, 0.02) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========== PAGE HEADER ========== */
.st-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  position: relative;
  z-index: 1;
}

.st-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: rgba(209, 158, 29, 0.08);
  border: 1px solid rgba(209, 158, 29, 0.15);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.st-header__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--gold-mid);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.st-header__badge-text {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gold-mid);
}

.st-header__title {
  font-family: var(--font-hero);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--space-md);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
}

.st-header__title-line {
  display: inline;
}

.st-header__title-line--gold {
  background: linear-gradient(135deg, var(--gold-start) 0%, var(--gold-mid) 50%, var(--gold-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.st-header__desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

.st-header__stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(250, 250, 250, 0.06);
  flex-wrap: wrap;
}

.st-header__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.st-header__stat-num {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.st-header__stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.st-header__stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(250, 250, 250, 0.08);
}

/* ========== STORE LAYOUT ========== */
.st-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  position: relative;
  z-index: 1;
}

/* ========== FILTER SIDEBAR ========== */
.st-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  height: fit-content;
  max-height: calc(100vh - var(--header-height) - var(--space-2xl));
  overflow-y: auto;
  align-self: flex-start;
}

.st-sidebar__inner {
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.04);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.st-sidebar__close {
  display: none;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-sidebar__close:hover {
  color: var(--text-primary);
  border-color: rgba(250, 250, 250, 0.15);
}

/* ========== FILTERS ========== */
.st-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.st-filter {
  border-bottom: 1px solid rgba(250, 250, 250, 0.04);
  padding-bottom: var(--space-lg);
}

.st-filter:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.st-filter__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  cursor: pointer;
}

.st-filter__title svg {
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.st-filter.is-collapsed .st-filter__title svg {
  transform: rotate(-90deg);
}

.st-filter.is-collapsed .st-filter__content {
  display: none;
}

.st-filter__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.st-filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.st-filter__option:hover {
  color: var(--text-primary);
}

.st-filter__option input[type="radio"] {
  display: none;
}

.st-filter__radio {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(250, 250, 250, 0.2);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-filter__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--gold-mid);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.st-filter__option input[type="radio"]:checked+.st-filter__radio {
  border-color: var(--gold-mid);
}

.st-filter__option input[type="radio"]:checked+.st-filter__radio::after {
  transform: translate(-50%, -50%) scale(1);
}

.st-filter__label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.st-filter__option:hover .st-filter__label,
.st-filter__option input[type="radio"]:checked~.st-filter__label {
  color: var(--text-primary);
}

.st-filter__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--charcoal);
  padding: 2px 8px;
  border-radius: 100px;
}

/* Nested Categories */
.st-filter__cat {
  display: flex;
  flex-direction: column;
}

.st-filter__cat-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.st-filter__cat-row > .st-filter__option {
  flex: 1;
  min-width: 0;
}

.st-filter__cat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-smooth),
              background var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-smooth);
  flex-shrink: 0;
}

.st-filter__cat-toggle:hover {
  color: var(--gold-mid);
  background: rgba(209, 158, 29, 0.08);
  border-color: rgba(209, 158, 29, 0.2);
}

.st-filter__cat.is-open > .st-filter__cat-row > .st-filter__cat-toggle {
  transform: rotate(180deg);
  color: var(--gold-mid);
}

.st-filter__cat-children {
  display: none;
  margin-left: calc(18px + var(--space-sm));
  padding-left: var(--space-sm);
  border-left: 1px dashed rgba(250, 250, 250, 0.08);
  margin-top: 4px;
}

.st-filter__cat.is-open > .st-filter__cat-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-filter__cat--parent > .st-filter__cat-row > .st-filter__option > .st-filter__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--text-xs);
}

.st-filter__cat[data-depth="1"] > .st-filter__cat-row > .st-filter__option > .st-filter__label,
.st-filter__cat[data-depth="2"] > .st-filter__cat-row > .st-filter__option > .st-filter__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Price Filter */
.st-filter__price-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.st-filter__price-field {
  flex: 1;
  position: relative;
}

.st-filter__price-currency {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.st-filter__price-input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 var(--space-sm) 0 var(--space-xl);
  background: var(--charcoal);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1;
  /* Strip Firefox's native number spinner so its buttons can't eat into the
     trailing digits. The Chromium/Safari variant is hidden below via
     ::-webkit-{inner,outer}-spin-button. */
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
}

/* Chromium / Safari: kill the inner + outer spin controls that overlap the
   typed number and produce the "text partly invisible" look. */
.st-filter__price-input::-webkit-outer-spin-button,
.st-filter__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.st-filter__price-input::placeholder {
  color: var(--text-muted);
}

.st-filter__price-input:focus {
  outline: none;
  border-color: var(--gold-mid);
}

.st-filter__price-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

.st-filter__price-range {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Dual-handle Price Slider */
.st-filter__slider {
  position: relative;
  height: 32px;
  margin: 6px 10px var(--space-sm);
}

.st-filter__slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(250, 250, 250, 0.08);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.st-filter__slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  right: 0%;
  background: linear-gradient(90deg, var(--gold-start, #d19e1d), var(--gold-mid, #ffd86e));
  border-radius: 2px;
}

.st-filter__slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

.st-filter__slider-thumb::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
  border: none;
}
.st-filter__slider-thumb::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.st-filter__slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-mid, #ffd86e);
  border: 2px solid #111213;
  box-shadow: 0 0 0 1px var(--gold-mid, #ffd86e), 0 2px 6px rgba(0, 0, 0, 0.6);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-smooth);
}
.st-filter__slider-thumb::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }

.st-filter__slider-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-mid, #ffd86e);
  border: 2px solid #111213;
  box-shadow: 0 0 0 1px var(--gold-mid, #ffd86e), 0 2px 6px rgba(0, 0, 0, 0.6);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-smooth);
}
.st-filter__slider-thumb::-moz-range-thumb:active { cursor: grabbing; transform: scale(1.15); }

/* Filter Actions */
.st-filter__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.st-filter__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 48px;
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-filter__apply:hover {
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-end));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(209, 158, 29, 0.25);
}

.st-filter__apply:active {
  transform: translateY(0) scale(0.98);
}

.st-filter__reset {
  display: block;
  text-align: center;
  padding: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.st-filter__reset:hover {
  color: var(--text-primary);
}

/* ========== MAIN CONTENT ========== */
.st-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ========== STORE TOOLBAR (revised to be column-stacked) ========== */
.st-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.st-toolbar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.st-toolbar__search-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  width: 100%;
}

.st-toolbar__search-row > .st-search {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile-only trigger for the filter sidebar. Hidden on desktop; the matching
   media query below flips display to inline-flex at <=1024px. */
.st-toolbar__filter-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  height: 48px;
  padding: 0 var(--space-md);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              background var(--duration-fast) var(--ease-smooth);
  position: relative;
}

.st-toolbar__filter-toggle:hover,
.st-toolbar__filter-toggle:focus-visible {
  border-color: var(--gold-start);
  color: var(--gold-start);
  outline: none;
}

.st-toolbar__filter-toggle svg {
  flex-shrink: 0;
}

.st-toolbar__filter-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gold-start);
  color: var(--obsidian);
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* ========== STORE SEARCH BAR ========== */
.st-search {
  position: relative;
  width: 100%;
}

.st-search__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.st-search__icon {
  position: absolute;
  left: var(--space-md);
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}

.st-search__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-3xl) 0 calc(var(--space-md) + 26px);
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
  outline: none;
}

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

.st-search__input:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(209, 158, 29, 0.12);
}

.st-search__clear {
  position: absolute;
  right: var(--space-md);
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
  z-index: 1;
}

.st-search__clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

/* -------- Live Results Dropdown -------- */
.st-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 500;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.3s var(--ease-smooth), opacity 0.25s ease;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.st-search__results.is-open {
  max-height: 480px;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}

.st-search__results::-webkit-scrollbar {
  width: 4px;
}
.st-search__results::-webkit-scrollbar-track { background: var(--surface); }
.st-search__results::-webkit-scrollbar-thumb { background: var(--gold-start); border-radius: 2px; }

/* -------- Result Items -------- */
.st-search__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: background var(--duration-fast) ease;
}

.st-search__item:last-of-type {
  border-bottom: none;
}

.st-search__item:hover,
.st-search__item.is-focused {
  background: rgba(255, 255, 255, 0.04);
}

.st-search__item-img {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}

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

.st-search__badge {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 1px 4px;
  font-family: var(--font-nav);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 2px;
  text-transform: uppercase;
}

.st-search__badge--sale {
  background: var(--cta-primary);
  color: #fff;
}

.st-search__badge--prebook {
  background: var(--gold-start);
  color: var(--obsidian);
}

.st-search__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-search__item-cat {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-start);
}

.st-search__item-name {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-search__item-price {
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
}

.st-search__item-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--gold-start);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* -------- View All Footer -------- */
.st-search__view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: rgba(209, 158, 29, 0.06);
  border-top: 1px solid rgba(209, 158, 29, 0.15);
  font-family: var(--font-nav);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-start);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--duration-fast) ease;
}

.st-search__view-all:hover {
  background: rgba(209, 158, 29, 0.12);
}

/* -------- Loading / Empty States -------- */
.st-search__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.st-search__status--empty svg {
  color: rgba(255, 255, 255, 0.2);
}

.st-search__spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(209, 158, 29, 0.2);
  border-top-color: var(--gold-start);
  border-radius: 50%;
  animation: st-spin 0.7s linear infinite;
}

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

/* -------- Mobile adjustments for search -------- */
@media (max-width: 768px) {
  .st-toolbar {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
  }

  .st-search__input {
    height: 44px;
    font-size: 16px; /* prevent iOS zoom */
  }

  .st-search__results.is-open {
    max-height: 360px;
  }

  .st-search__item-img {
    width: 44px;
    height: 44px;
  }
}

/* ========== PRODUCTS GRID ========== */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.st-grid.is-list {
  grid-template-columns: 1fr;
}

/* ========== STORE CARD ========== */
.st-card {
  --card-bg: #3d4a3a;
  background: linear-gradient(145deg, rgba(22, 22, 22, 0.95) 0%, rgba(18, 18, 20, 0.98) 100%);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-xl);
  overflow: visible;
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth),
    border-color var(--duration-normal) var(--ease-smooth);
  backdrop-filter: blur(8px);
}

.st-card--olive {
  --card-bg: #3d4a3a;
}

.st-card--slate {
  --card-bg: #3a4556;
}

.st-card--moss {
  --card-bg: #4a5a4a;
}

.st-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(209, 158, 29, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  border-color: rgba(209, 158, 29, 0.15);
}

.st-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

/* Card glow accent on hover */
.st-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
}

.st-card:hover::before {
  opacity: 0.6;
}

/* List view card */
.st-grid.is-list .st-card__inner {
  flex-direction: row;
}

.st-grid.is-list .st-card__image-wrap {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.st-grid.is-list .st-card__header,
.st-grid.is-list .st-card__footer {
  padding: var(--space-lg);
}

.st-grid.is-list .st-card__header {
  flex: 1;
}

/* Card Header */
.st-card__header {
  padding: var(--space-md) var(--space-md) var(--space-xs);
}

.st-card__category {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 10px;
  color: var(--gold-mid);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2xs);
  font-weight: 600;
}

.st-card__title {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.st-card__title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.st-card__title a:hover {
  color: var(--gold-mid);
}

/* Card Image */
.st-card__image-wrap {
  position: relative;
  aspect-ratio: 4/3;
  margin: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: visible;
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--charcoal) 100%);
}

.st-card__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: var(--radius-lg);
  -webkit-mask: radial-gradient(circle 28px at calc(100% - 32px) calc(100% - 32px), transparent 0, transparent 28px, black 29px);
  mask: radial-gradient(circle 28px at calc(100% - 32px) calc(100% - 32px), transparent 0, transparent 28px, black 29px);
  z-index: 1;
}

.st-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-md);
  transition: transform var(--duration-slow) var(--ease-smooth);
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  -webkit-mask: radial-gradient(circle 28px at calc(100% - 32px) calc(100% - 32px), transparent 0, transparent 28px, black 29px);
  mask: radial-gradient(circle 28px at calc(100% - 32px) calc(100% - 32px), transparent 0, transparent 28px, black 29px);
}

.st-card:hover .st-card__image {
  transform: scale(1.08) rotate(2deg);
}

.st-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Badges */
.st-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.st-card__badge--sale {
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
  color: white;
}

.st-card__badge--prebook {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
}

/* Quick Actions */
.st-card__actions {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--duration-fast) var(--ease-smooth);
  z-index: 2;
}

.st-card:hover .st-card__actions {
  opacity: 1;
  transform: translateX(0);
}

.st-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-card__action:hover {
  background: var(--gold-mid);
  color: var(--obsidian);
  transform: scale(1.1);
}

/* Add to Cart Button */
.st-card__action--cart {
  background: rgba(209, 158, 29, 0.2);
  border: 1px solid rgba(209, 158, 29, 0.3);
}

.st-card__action--cart:hover {
  background: var(--gold-mid);
  color: var(--obsidian);
  border-color: var(--gold-mid);
}

.st-card__action--cart.is-loading svg {
  animation: spin 1s linear infinite;
}

.st-card__action--cart.is-added,
.st-card__action--cart.is-success {
  background: #4ade80;
  border-color: #4ade80;
  color: var(--obsidian);
}

/* Cart Button - Bottom Right Corner (Always Visible) */
.st-card__cart-corner {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--gold-mid);
  border: none;
  border-radius: 50%;
  color: var(--obsidian);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(209, 158, 29, 0.3);
  transition: all var(--duration-fast) var(--ease-smooth);
  z-index: 3;
  opacity: 1;
}

.st-card__cart-corner:hover {
  background: var(--gold-start);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(209, 158, 29, 0.5);
}

.st-card__cart-corner:active {
  transform: scale(0.95);
}

.st-card__cart-corner.is-loading svg {
  animation: spin 1s linear infinite;
}

.st-card__cart-corner.is-added,
.st-card__cart-corner.is-success {
  background: #4ade80;
  color: var(--obsidian);
}

.st-card__cart-corner:hover {
  background: var(--gold-start);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(209, 158, 29, 0.5);
}

.st-card__cart-corner:active {
  transform: scale(0.95);
}

.st-card__cart-corner.is-loading svg {
  animation: spin 1s linear infinite;
}

.st-card__cart-corner.is-added,
.st-card__cart-corner.is-success {
  background: #4ade80;
  color: var(--obsidian);
}

/* Quick View Button - Top Right (On Hover) */
.st-card__quickview-corner {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--duration-fast) var(--ease-smooth);
  z-index: 2;
}

.st-card:hover .st-card__quickview-corner {
  opacity: 1;
  transform: translateX(0);
}

.st-card__quickview-corner:hover {
  background: var(--gold-mid);
  color: var(--obsidian);
  transform: scale(1.1) translateX(0);
}

/* Remove wishlist styles - replaced by cart */
.st-card__action--wishlist {
  display: none;
}

.st-card__action--wishlist.is-active {
  display: none;
}

/* Card Footer */
.st-card__footer {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  margin-top: auto;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.st-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.st-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.st-card__currency {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gold-mid);
}

.st-card__amount {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.st-card__original {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: var(--space-xs);
  opacity: 0.7;
}

.st-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--gold-mid);
  font-weight: 600;
}

.st-card__rating svg {
  fill: var(--gold-mid);
  width: 12px;
  height: 12px;
}

/* Card CTA */
.st-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 42px;
  background: rgba(250, 250, 250, 0.04);
  border: 1px solid rgba(250, 250, 250, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-card__cta:hover {
  background: var(--text-primary);
  color: var(--obsidian);
  border-color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(250, 250, 250, 0.15);
}

.st-card__cta svg {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.st-card__cta:hover svg {
  transform: translate(3px, -3px);
}

.st-card__cta--prebook {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  border: none;
  color: var(--obsidian);
}

.st-card__cta--prebook:hover {
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-end));
  box-shadow: 0 8px 24px rgba(209, 158, 29, 0.25);
}

/* ========== PAGINATION ========== */
.st-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-top: var(--space-xl);
}

.st-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-sm);
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-pagination__link:hover {
  background: var(--charcoal);
  color: var(--text-primary);
  border-color: rgba(250, 250, 250, 0.1);
}

.st-pagination__link.is-active {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  border-color: transparent;
  color: var(--obsidian);
}

.st-pagination__link.prev,
.st-pagination__link.next {
  background: transparent;
  border: none;
}

.st-pagination__link.prev:hover,
.st-pagination__link.next:hover {
  color: var(--gold-mid);
}

/* ========== EMPTY STATE ========== */
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  min-height: 400px;
}

.st-empty__visual {
  position: relative;
  margin-bottom: var(--space-2xl);
}

.st-empty__orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(209, 158, 29, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-orb 4s ease-in-out infinite;
}

.st-empty__icon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid rgba(250, 250, 250, 0.06);
  border-radius: 50%;
  color: var(--gold-mid);
  z-index: 1;
}

.st-empty__icon svg {
  stroke: var(--gold-mid);
}

.st-empty__title {
  font-family: var(--font-hero);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.st-empty__desc {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: var(--space-xl);
}

.st-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.st-empty__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(209, 158, 29, 0.3);
}

.st-empty__cta svg {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.st-empty__cta:hover svg {
  transform: translateX(4px);
}

/* ========== SIDEBAR OVERLAY (Mobile) ========== */
.st-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Plain dim — no backdrop-filter. The filter also affected the sidebar
     (because an ancestor of the sidebar creates its own stacking context,
     so the sidebar's z-index is local to that ancestor and may end up
     behind the overlay), making the whole UI look blurred. A solid dim is
     cheaper, more predictable, and matches how the rest of the app handles
     modal dimming. */
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              visibility var(--duration-normal) var(--ease-smooth);
}

.st-sidebar-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  .st-layout {
    grid-template-columns: 260px 1fr;
  }
}

@media (max-width: 1024px) {
  .st-page {
    padding-left: 0;
  }

  .st-layout {
    grid-template-columns: 1fr;
  }

  /* Mobile Sidebar */
  .st-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 90vw;
    height: 100vh;
    max-height: 100vh;
    background: var(--obsidian);
    border-right: 1px solid rgba(250, 250, 250, 0.06);
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-smooth);
    z-index: 1000;
    padding-top: var(--space-xl);
  }

  .st-sidebar.is-open {
    transform: translateX(0);
  }

  .st-sidebar__inner {
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    padding-top: var(--space-3xl);
  }

  .st-sidebar__close {
    display: flex;
  }

  .st-sidebar-overlay {
    display: block;
  }

  .st-toolbar__filter-toggle {
    display: inline-flex;
  }

  .st-toolbar {
    flex-wrap: wrap;
  }

  .st-toolbar__active-filters {
    order: 3;
    width: 100%;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(250, 250, 250, 0.04);
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .st-header {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-xl);
  }

  .st-header__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .st-header__stats {
    gap: var(--space-lg);
  }

  .st-toolbar {
    padding: var(--space-sm) var(--space-md);
  }

  .st-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  .st-grid.is-list .st-card__inner {
    flex-direction: column;
  }

  .st-grid.is-list .st-card__image-wrap {
    width: 100%;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .st-page {
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
  }

  .st-header {
    margin-bottom: var(--space-lg);
  }

  .st-header__badge {
    margin-bottom: var(--space-md);
  }

  /* On very narrow screens drop the label so the icon + badge alone keep the
     search bar from shrinking to an unusable width. */
  .st-toolbar__filter-toggle {
    padding: 0 var(--space-sm);
    height: 44px;
  }

  .st-toolbar__filter-toggle > span:not(.st-toolbar__filter-toggle-badge) {
    display: none;
  }

  .st-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-sm);
  }

  .st-card__header {
    padding: var(--space-sm) var(--space-sm) 0;
  }

  .st-card__image-wrap {
    margin: var(--space-xs) var(--space-sm);
  }

  .st-card__footer {
    padding: 0 var(--space-sm) var(--space-sm);
  }

  .st-empty {
    padding: var(--space-2xl) var(--space-md);
  }

  .st-pagination {
    flex-wrap: wrap;
  }

  .st-pagination__link.dots {
    display: none;
  }
}

/* ==========================================================================
   LEGAL PAGES (Refund Policy, Terms of Service)
   ========================================================================== */

.legal-page {
  min-height: 100vh;
  padding: calc(var(--header-height) + var(--space-2xl)) var(--space-lg) var(--space-3xl);
  padding-left: calc(var(--sidebar-width) + var(--space-lg));
  position: relative;
  overflow-x: hidden;
}

/* Legal Page Header */
.legal-header {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
  text-align: center;
}

.legal-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: rgba(209, 158, 29, 0.1);
  border: 1px solid rgba(209, 158, 29, 0.2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

.legal-header__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--gold-mid);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* @keyframes pulse-dot already defined earlier in the file — duplicate removed. */

.legal-header__badge-text {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-mid);
}

.legal-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.legal-header__title-line {
  display: block;
  color: var(--text-primary);
}

.legal-header__title-line--gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.legal-header__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-md);
}

.legal-header__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.legal-header__updated {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.legal-header__updated svg {
  color: var(--gold-mid);
}

/* Legal Content */
.legal-content {
  max-width: 900px;
  margin: 0 auto;
}

/* Legal Sections */
.legal-section {
  position: relative;
  padding: var(--space-xl);
  background: linear-gradient(145deg, rgba(22, 22, 22, 0.8), rgba(13, 3, 27, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(10px);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.legal-section:hover {
  border-color: rgba(209, 158, 29, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.legal-section__icon {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 158, 29, 0.1);
  border-radius: var(--radius-md);
  color: var(--gold-mid);
}

.legal-section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  padding-right: 60px;
}

.legal-section__content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
}

.legal-section__content p {
  margin-bottom: var(--space-md);
}

.legal-section__content p:last-child {
  margin-bottom: 0;
}

/* Legal Subsections */
.legal-subsection {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-subsection__title {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold-mid);
  margin-bottom: var(--space-sm);
}

/* Legal Highlight Stats */
.legal-highlight {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(209, 158, 29, 0.05);
  border: 1px solid rgba(209, 158, 29, 0.1);
  border-radius: var(--radius-md);
}

.legal-highlight__item {
  text-align: center;
}

.legal-highlight__number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2xs);
}

.legal-highlight__label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Legal Lists */
.legal-list {
  list-style: none;
  margin: var(--space-md) 0;
  padding: 0;
}

.legal-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.legal-list__item:last-child {
  border-bottom: none;
}

.legal-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 2px;
}

.legal-list__item--check .legal-list__icon {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
}

.legal-list--warning .legal-list__icon {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.legal-list--definitions .legal-list__item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border-bottom: none;
  margin-bottom: var(--space-xs);
}

.legal-list--definitions strong {
  color: var(--gold-mid);
}

/* Legal Steps */
.legal-steps {
  margin-top: var(--space-lg);
}

.legal-step {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  position: relative;
}

.legal-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 60px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold-mid), transparent);
}

.legal-step__number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--obsidian);
  font-weight: 700;
}

.legal-step__content {
  flex: 1;
  padding-top: var(--space-xs);
}

.legal-step__title {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2xs);
}

.legal-step__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Legal Table */
.legal-table {
  margin-top: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.legal-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-table__row:last-child {
  border-bottom: none;
}

.legal-table__row--header {
  background: rgba(209, 158, 29, 0.1);
}

.legal-table__row--header .legal-table__cell {
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--gold-mid);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legal-table__cell {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
}

.legal-table__cell:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Legal Note */
.legal-note {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(209, 158, 29, 0.05);
  border-left: 3px solid var(--gold-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-md);
}

.legal-note svg {
  flex-shrink: 0;
  color: var(--gold-mid);
}

.legal-note p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Legal Contact Section */
.legal-section--contact {
  background: linear-gradient(145deg, rgba(209, 158, 29, 0.1), rgba(13, 3, 27, 0.8));
  border-color: rgba(209, 158, 29, 0.2);
  text-align: center;
  padding: var(--space-2xl);
}

.legal-contact__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.legal-contact__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.legal-contact__methods {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.legal-contact__method {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.legal-contact__method:hover {
  background: var(--gold-mid);
  border-color: var(--gold-mid);
  color: var(--obsidian);
  transform: translateY(-2px);
}

.legal-contact__method svg {
  transition: inherit;
}

/* ==========================================================================
   FAQ PAGE SPECIFIC STYLES
   ========================================================================== */

/* FAQ Navigation */
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 1000px;
  margin: 0 auto var(--space-2xl);
  padding: var(--space-md);
  background: rgba(22, 22, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.faq-nav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.faq-nav__btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.faq-nav__btn.is-active {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  border-color: transparent;
  color: var(--obsidian);
}

.faq-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.faq-nav__icon svg {
  width: 16px;
  height: 16px;
}

/* FAQ Content */
.faq-content {
  max-width: 900px;
  margin: 0 auto;
}

/* FAQ Category */
.faq-category {
  display: none;
}

.faq-category.is-active {
  display: block;
}

.faq-category__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.faq-category__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 158, 29, 0.1);
  border-radius: var(--radius-md);
  color: var(--gold-mid);
}

.faq-category__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
}

/* FAQ Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: linear-gradient(145deg, rgba(22, 22, 22, 0.8), rgba(13, 3, 27, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.faq-item:hover {
  border-color: rgba(209, 158, 29, 0.2);
}

.faq-item.is-open {
  border-color: rgba(209, 158, 29, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.faq-item__question:hover {
  color: var(--gold-mid);
}

.faq-item.is-open .faq-item__question {
  color: var(--gold-mid);
}

.faq-item__q-text {
  flex: 1;
  padding-right: var(--space-md);
}

.faq-item__toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.faq-item:hover .faq-item__toggle {
  background: rgba(209, 158, 29, 0.1);
  color: var(--gold-mid);
}

.faq-item.is-open .faq-item__toggle {
  background: var(--gold-mid);
  color: var(--obsidian);
  transform: rotate(45deg);
}

.faq-item__toggle-v {
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.faq-item.is-open .faq-item__toggle-v {
  transform: scaleY(0);
}

.faq-item__answer {
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.faq-item__a-inner {
  padding: 0 var(--space-lg) var(--space-lg);
  padding-left: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: var(--space-md);
}

.faq-item__a-inner p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* FAQ Help Section */
.faq-help {
  margin-top: var(--space-3xl);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.faq-help__inner {
  text-align: center;
  padding: var(--space-2xl);
  background: linear-gradient(145deg, rgba(209, 158, 29, 0.1), rgba(13, 3, 27, 0.8));
  border: 1px solid rgba(209, 158, 29, 0.2);
  border-radius: var(--radius-lg);
}

.faq-help__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(209, 158, 29, 0.1);
  border-radius: 50%;
  color: var(--gold-mid);
}

.faq-help__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.faq-help__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.faq-help__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.faq-help__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.faq-help__btn--primary {
  background: linear-gradient(135deg, var(--gold-start), var(--gold-mid));
  color: var(--obsidian);
}

.faq-help__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(209, 158, 29, 0.3);
}

.faq-help__btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.faq-help__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ==========================================================================
   LEGAL PAGES RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .legal-page {
    padding-left: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .legal-page {
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-md) var(--space-2xl);
  }

  .legal-header__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .legal-section {
    padding: var(--space-lg);
  }

  .legal-section__icon {
    position: static;
    margin-bottom: var(--space-md);
  }

  .legal-section__title {
    padding-right: 0;
  }

  .legal-highlight {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .legal-table__row {
    grid-template-columns: 1fr;
  }

  .legal-table__cell:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-weight: 600;
  }

  .legal-contact__methods {
    flex-direction: column;
    align-items: center;
  }

  /* FAQ Responsive */
  .faq-nav {
    padding: var(--space-sm);
    gap: var(--space-2xs);
  }

  .faq-nav__btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: 10px;
  }

  .faq-nav__text {
    display: none;
  }

  .faq-nav__icon {
    width: 24px;
    height: 24px;
  }

  .faq-nav__icon svg {
    width: 18px;
    height: 18px;
  }

  .faq-item__question {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }

  .faq-item__a-inner {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .faq-help__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-help__btn {
    justify-content: center;
  }
}


/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================
   
   Dedicated mobile styles that DO NOT affect the desktop version.
   All styles are wrapped in appropriate media queries.
   
   Breakpoints:
   - Tablet: max-width: 1024px
   - Mobile Large: max-width: 768px
   - Mobile: max-width: 640px
   - Mobile Small: max-width: 480px
   
   ============================================================================ */

/* ==========================================================================
   MOBILE NAVIGATION - Hamburger Menu & Drawer
   ========================================================================== */

/* Hide hamburger on desktop, show on mobile */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 10; /* Ensure it's last in the utils */
  }

  /* Hide desktop nav on mobile */
  .header-nav {
    display: none !important;
  }
}

/* Hamburger Icon */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  gap: 5px;
  cursor: pointer;
}

.hamburger__line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: center;
}

/* Hamburger to X animation when active */
.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Body scroll lock when mobile nav is open */
body.mobile-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  visibility: hidden;
}

.mobile-nav-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop */
.mobile-nav-drawer__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.mobile-nav-drawer.is-open .mobile-nav-drawer__backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

/* Drawer Panel */
.mobile-nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 380px;
  height: 100%;
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--obsidian) 100%);
  border-left: 1px solid rgba(250, 250, 250, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.is-open .mobile-nav-drawer__panel {
  transform: translateX(0);
}

/* Drawer Header */
.mobile-nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(250, 250, 250, 0.08);
  min-height: var(--header-height);
}

.mobile-nav-drawer__logo {
  font-family: var(--font-hero);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mobile-nav-drawer__logo a,
.mobile-nav-drawer__logo img {
  max-height: 40px;
  width: auto;
}

.mobile-nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-nav-drawer__close svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-primary);
  stroke-width: 2;
  fill: none;
}

.mobile-nav-drawer__close:hover,
.mobile-nav-drawer__close:focus {
  background: var(--gold-start);
  border-color: var(--gold-start);
}

.mobile-nav-drawer__close:hover svg,
.mobile-nav-drawer__close:focus svg {
  stroke: var(--obsidian);
}

/* Primary Navigation Links */
.mobile-nav-drawer__links {
  flex: 1;
  padding: var(--space-lg);
}

.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-menu li {
  border-bottom: 1px solid rgba(250, 250, 250, 0.04);
}

.mobile-nav-menu li:last-child {
  border-bottom: none;
}

.mobile-nav-menu a {
  display: flex;
  align-items: center;
  padding: var(--space-md) 0;
  font-family: var(--font-nav);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-nav-menu a::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-lg));
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 3px;
  height: 60%;
  background: var(--gold-start);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.mobile-nav-menu a:hover,
.mobile-nav-menu a:focus,
.mobile-nav-menu a.highlight {
  color: var(--gold-start);
}

.mobile-nav-menu a:hover::before,
.mobile-nav-menu a:focus::before {
  transform: translateY(-50%) scaleX(1);
}

/* Secondary Links */
.mobile-nav-drawer__secondary {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(250, 250, 250, 0.08);
}

.mobile-nav-secondary {
  list-style: none;
  margin: 0;
  padding: var(--space-md) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.mobile-nav-secondary a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-nav-secondary a:hover,
.mobile-nav-secondary a:focus {
  color: var(--gold-start);
}

/* Social Links */
.mobile-nav-drawer__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top: 1px solid rgba(250, 250, 250, 0.08);
  background: var(--obsidian);
}

.mobile-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(250, 250, 250, 0.12);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.mobile-social-link svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.mobile-social-link:hover,
.mobile-social-link:focus {
  background: var(--gold-start);
  border-color: var(--gold-start);
}

.mobile-social-link:hover svg,
.mobile-social-link:focus svg {
  color: var(--obsidian);
}

/* Body scroll lock when drawer is open */
body.mobile-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


/* ==========================================================================
   MOBILE HERO SECTION - Refinements for smaller screens
   ========================================================================== */

@media (max-width: 768px) {
  .hero__slider {
    width: 100%;
    max-width: clamp(240px, 60vw, 320px);
  }

  .hero__showcase-main {
    width: 100%;
    max-width: clamp(260px, 70vw, 380px);
  }

  /* Properly scale promo titles at tablet/mobile transition */
  .featured-showcase__title,
  .landing-promotions__title {
    font-size: clamp(1.6rem, 5.5vw, 2.5rem);
    line-height: 1.15;
  }

  .featured-showcase__intro,
  .category-showcase__intro,
  .landing-promotions__hero {
    margin-bottom: var(--space-lg);
  }

  .featured-showcase__text,
  .landing-promotions__text {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .promo-banner__line {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    letter-spacing: 0.02em;
  }

  .promo-split__title {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .hero__slide-img {
    transform: rotate(-28deg) scale(1.2);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7));
  }

  .hero__slide--active .hero__slide-img {
    transform: rotate(-28deg) scale(1.35);
  }

  .showcase__lasers {
    opacity: 0.5;
  }

  .laser-line {
    height: 1.5px;
  }

  .showcase__depth {
    display: none;
  }
}

/* ========== MOBILE STICKY CTA - Created via JavaScript ========== */
.hero-mobile-cta {
  display: none;
}

@media (max-width: 480px) {
  .hero__slider {
    width: 100%;
    max-width: clamp(200px, 60vw, 280px);
  }

  .hero__showcase-main {
    width: 100%;
    max-width: clamp(220px, 70vw, 320px);
  }

  .hero__slide-img {
    transform: rotate(-24deg) scale(1.2);
  }

  .hero__slide--active .hero__slide-img {
    transform: rotate(-24deg) scale(1.35);
  }

  .hero__product-panel {
    padding: 14px 12px 12px;
    border-radius: 14px;
  }

  .hero__panel-title {
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  .hero__panel-price {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }

  .hero__color-dot {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 18px;
  }

  .hero__size-chip {
    min-width: 28px;
    width: auto;
    height: 28px;
    box-sizing: border-box;
    padding: 0 5px;
    font-size: 0.65rem;
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   MOBILE PRODUCT CARDS - Homepage & Store Grid
   ========================================================================== */

/* Homepage Carousel Cards - Scale down while preserving aesthetic */
@media (max-width: 768px) {
  .product-carousel {
    padding: var(--space-md) 0;
  }

  .product-carousel__track {
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  /* Product Card - Proportionally scaled */
  .product-card {
    min-width: 260px;
    max-width: 280px;
  }

  .product-card__image-container {
    height: 280px;
  }

  .product-card__header {
    padding: var(--space-sm);
  }

  .product-card__title {
    font-size: var(--text-sm);
  }

  .product-card__collection {
    font-size: var(--text-xs);
  }

  .product-card__overlay {
    padding: var(--space-sm);
  }

  .product-card__price {
    font-size: var(--text-lg);
  }

  .product-card__cta {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }
}

@media (max-width: 480px) {
  .product-card {
    min-width: 220px;
    max-width: 240px;
  }

  .product-card__image-container {
    height: 240px;
  }
}

/* Store Grid Cards - 2 columns on mobile */
@media (max-width: 768px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .store-card {
    aspect-ratio: 3/4;
  }

  .store-card__image-container {
    height: 180px;
  }

  .store-card__content {
    padding: var(--space-sm);
  }

  .store-card__title {
    font-size: var(--text-sm);
    line-height: 1.3;
  }

  .store-card__price {
    font-size: var(--text-base);
  }

  .store-card__meta {
    font-size: var(--text-xs);
  }

  /* Hide some elements on mobile for cleaner look */
  .store-card__quick-view {
    display: none;
  }
}

@media (max-width: 480px) {
  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .store-card__image-container {
    height: 150px;
  }

  .store-card__title {
    font-size: var(--text-xs);
  }

  .store-card__price {
    font-size: var(--text-sm);
  }
}


/* ==========================================================================
   MOBILE CUSTOM PRODUCT PAGE - Modern App-Like Layout
   ========================================================================== */

/* Mobile Gallery - Hidden on desktop */
.sp-gallery-mobile {
  display: none;
}

@media (max-width: 1024px) {
  /* ========== PRODUCT PAGE CONTAINER ========== */
  .single-product-page .sp-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: none;
    gap: 0;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0));
    overflow-x: hidden;
  }

  /* Hide desktop-only gallery sidebar */
  .sp-gallery--desktop {
    display: none !important;
  }

  /* ========== SHOWCASE AREA - Keep visible with background circles ========== */
  .sp-showcase--desktop,
  .sp-showcase {
    display: flex !important;
    order: 1;
    width: 100%;
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Background circles - Visible on mobile */
  .sp-showcase__bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .sp-showcase__circle--main {
    position: absolute;
    width: 75vw;
    max-width: 320px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(60, 60, 60, 0.9) 0%,
        rgba(45, 45, 45, 0.7) 40%,
        rgba(30, 30, 30, 0.5) 70%,
        transparent 100%);
    box-shadow:
      inset 0 0 50px rgba(255, 255, 255, 0.04),
      0 0 80px rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .sp-showcase__circle--overlay {
    position: absolute;
    width: 52vw;
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%,
        rgba(80, 80, 85, 0.7) 0%,
        rgba(55, 55, 60, 0.5) 50%,
        rgba(40, 40, 45, 0.3) 80%,
        transparent 100%);
    box-shadow:
      inset 0 0 35px rgba(255, 255, 255, 0.05),
      0 0 50px rgba(0, 0, 0, 0.3);
    z-index: 2;
  }

  /* Product image with tilt effect */
  .sp-showcase__image-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
  }

  .sp-showcase__image {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
    transform: rotate(-12deg) scale(1.1);
    transition: transform 0.4s var(--ease-smooth), filter 0.4s ease, opacity 0.25s ease;
    will-change: transform, opacity;
  }

  /* Mobile Gallery - Horizontal thumbnail strip */
  .sp-gallery-mobile {
    display: block;
    width: 100%;
    order: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(18, 18, 18, 0.95) 20%);
    position: relative;
    padding: var(--space-sm) var(--space-md);
    margin-top: -30px;
    z-index: 5;
  }

  .sp-gallery-mobile__slides {
    display: flex;
    gap: var(--space-sm);
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-xs) 0;
    justify-content: center;
    touch-action: pan-x;
  }

  .sp-gallery-mobile__slides::-webkit-scrollbar {
    display: none;
  }

  .sp-gallery-mobile__slide {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    scroll-snap-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  .sp-gallery-mobile__slide:active {
    transform: scale(0.95);
  }

  .sp-gallery-mobile__slide--active {
    border-color: var(--gold-start);
    background: rgba(209, 158, 29, 0.1);
    box-shadow: 0 0 15px rgba(209, 158, 29, 0.3);
  }

  .sp-gallery-mobile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotate(-8deg) scale(1.2);
  }

  /* Hide pagination dots - using thumbnails instead */
  .sp-gallery-mobile__dots {
    display: none;
  }

  /* ========== PRODUCT INFO SECTION ========== */
  .sp-info {
    width: 100%;
    max-width: 100%;
    padding: var(--space-lg) var(--space-md);
    order: 3;
    padding-bottom: var(--space-lg);
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sp-info__inner {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Category Badge */
  .sp-info__category {
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gold-start);
    margin-bottom: var(--space-xs);
    padding: 4px 12px;
    background: rgba(209, 158, 29, 0.1);
    border-radius: var(--radius-pill);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Product Title */
  .sp-info__title {
    text-align: center;
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text-primary) 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Rating */
  .sp-info__rating {
    justify-content: center;
    margin-bottom: var(--space-sm);
  }

  /* Price */
  .sp-info__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-lg);
  }

  .sp-info__currency {
    font-size: var(--text-lg);
    color: var(--gold-start);
  }

  .sp-info__amount {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold-start) 0%, var(--gold-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ========== COLOR SWATCHES ========== */
  .sp-info__colors {
    margin-bottom: var(--space-lg);
  }

  .sp-info__colors-header {
    margin-bottom: var(--space-sm);
  }

  .sp-info__colors-label {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .sp-info__colors-swatches {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .sp-info__color-swatch {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    padding: 3px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }

  .sp-info__color-swatch::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
  }

  .sp-info__color-swatch--active::before {
    border-color: var(--gold-start);
  }

  .sp-info__color-swatch--active {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  .sp-info__color-swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  /* Image swatches fallback */
  .sp-info__swatch {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .sp-info__swatch--active {
    border-color: var(--gold-start);
    box-shadow: 0 0 15px rgba(209, 158, 29, 0.4);
  }

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

  /* ========== SIZE SELECTOR ========== */
  .sp-info__selectors {
    margin-bottom: var(--space-lg);
  }

  .sp-info__size-section {
    margin-bottom: 0;
  }

  .sp-info__size-label {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
  }

  .sp-info__size-options {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .sp-info__size-option {
    min-width: 52px;
    height: 48px;
    padding: 0 var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-nav);
    font-size: var(--text-sm);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .sp-info__size-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .sp-info__size-option--active {
    background: var(--gold-start);
    border-color: var(--gold-start);
    color: var(--color-bg);
    box-shadow: 0 4px 15px rgba(209, 158, 29, 0.4);
  }

  /* ========== FIXED BOTTOM ACTION BAR ========== */
  .sp-info__actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0));
    background: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
  }

  /* Quantity selector in action bar — sized and styled to clearly read as a
     tappable control against the dark bottom bar. Previously a 70px-wide
     translucent cell was easy to miss next to the large red Add-to-Cart
     button; now it uses a stronger border, a clearly tappable 88px width,
     and a visible chevron. */
  .sp-info__select-wrap--qty {
    flex: 0 0 auto;
    position: relative;
    width: auto;
    min-width: 88px;
  }

  .sp-info__select-wrap--qty .sp-info__select {
    width: 88px;
    height: 50px;
    padding: 0 28px 0 var(--space-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(209, 158, 29, 0.35);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-nav);
    font-size: 1rem;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    text-align: left;
    /* Safari on iOS sometimes suppresses the native dropdown when the select
       has appearance:none *and* is inside a fixed-positioned ancestor. Keep
       explicit pointer-events so taps always reach the element. */
    pointer-events: auto;
    touch-action: manipulation;
  }

  .sp-info__select-wrap--qty .sp-info__select:focus-visible {
    outline: none;
    border-color: var(--gold-start);
    box-shadow: 0 0 0 2px rgba(209, 158, 29, 0.25);
  }

  .sp-info__select-wrap--qty .sp-info__select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gold-mid);
  }

  /* Add to Cart button */
  .sp-info__add-to-cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: 50px;
    padding: 0 var(--space-xl);
    background: linear-gradient(135deg, var(--cta-primary) 0%, #c41e3a 100%);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-nav);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
  }

  .sp-info__add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(230, 57, 70, 0.5);
  }

  .sp-info__add-to-cart:active {
    transform: translateY(0);
  }

  .sp-info__add-arrow {
    transition: transform 0.3s ease;
  }

  .sp-info__add-to-cart:hover .sp-info__add-arrow {
    transform: translateX(4px);
  }

  /* Loading state */
  .sp-info__add-to-cart--loading {
    pointer-events: none;
    opacity: 0.8;
  }

  .sp-info__add-to-cart--loading .sp-info__add-text::after {
    content: '...';
    animation: loadingDots 1s infinite;
  }

  @keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
  }

  /* Success state */
  .sp-info__add-to-cart--success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.4);
  }

  /* ========== PRODUCT DESCRIPTION ========== */
  .sp-info__description {
    margin-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--space-md);
  }

  .sp-info__desc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) 0;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-nav);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .sp-info__desc-toggle:hover {
    color: var(--gold-start);
  }

  .sp-info__desc-toggle svg {
    transition: transform 0.3s ease;
  }

  .sp-info__desc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .sp-info__desc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .sp-info__desc-content p {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-muted);
    padding: var(--space-sm) 0;
  }
}

/* ========== TABLET REFINEMENTS (768px) ========== */
@media (max-width: 768px) {
  .sp-showcase__circle--main {
    width: 70vw;
    max-width: 280px;
  }

  .sp-showcase__circle--overlay {
    width: 48vw;
    max-width: 190px;
  }

  .sp-showcase__image-wrap {
    max-width: 260px;
  }

  .sp-showcase__image {
    max-height: 240px;
    transform: rotate(-12deg) scale(1.15);
  }

  .sp-gallery-mobile__slide {
    width: 55px;
    height: 55px;
  }
}

/* ========== MOBILE SMALL REFINEMENTS (480px) ========== */
@media (max-width: 480px) {
  .single-product-page .sp-container {
    padding-bottom: 90px;
  }

  .sp-showcase--desktop,
  .sp-showcase {
    height: 45vh;
    min-height: 45vh;
    max-height: 45vh;
  }

  .sp-showcase__circle--main {
    width: 65vw;
    max-width: 240px;
  }

  .sp-showcase__circle--overlay {
    width: 45vw;
    max-width: 160px;
  }

  .sp-showcase__image-wrap {
    max-width: 220px;
  }

  .sp-showcase__image {
    max-height: 200px;
    transform: rotate(-10deg) scale(1.2);
  }

  .sp-gallery-mobile {
    padding: var(--space-xs) var(--space-sm);
  }

  .sp-gallery-mobile__slide {
    width: 48px;
    height: 48px;
  }

  .sp-info {
    padding: var(--space-md) var(--space-sm);
  }

  .sp-info__title {
    font-size: 1.5rem;
  }

  .sp-info__size-option {
    min-width: 46px;
    height: 44px;
    font-size: var(--text-xs);
  }

  .sp-info__color-swatch {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    flex: 0 0 38px;
  }

  .sp-info__actions {
    padding: var(--space-sm);
    gap: var(--space-xs);
  }

  .sp-info__select-wrap--qty .sp-info__select {
    width: 64px;
    height: 46px;
    font-size: var(--text-sm);
  }

  .sp-info__add-to-cart {
    height: 46px;
    font-size: var(--text-xs);
  }
}


/* ==========================================================================
   MOBILE UTILITY ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  /* Remove tap highlight for app-like feel */
  button,
  a,
  input,
  select,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Ensure touch targets are at least 44px */
  button,
  a,
  input[type="button"],
  input[type="submit"],
  .btn {
    min-height: 44px;
  }

  /* Reduce spacing on mobile */
  section {
    padding: var(--space-lg) 0;
  }

  /* Landing sections - properly scale padding on mobile */
  .featured-showcase,
  .category-showcase {
    padding: var(--space-lg) var(--space-md);
  }

  .promo-banner {
    margin: var(--space-lg) var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
  }

  .promo-split {
    grid-template-columns: 1fr;
    padding: var(--space-md) var(--space-md);
    margin: 0 0 var(--space-lg);
    gap: var(--space-md);
  }

  .promo-split__card {
    padding: var(--space-lg) var(--space-md);
  }

  .landing-promotions {
    padding: var(--space-lg) 0;
    min-height: auto;
  }

  .landing-promotions__card {
    padding: var(--space-md);
  }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Page headers */
  .page-header {
    padding: var(--space-xl) var(--space-md);
  }

  .page-header__title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .page-header__subtitle {
    font-size: var(--text-sm);
  }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: var(--text-xs);
    padding: var(--space-sm) var(--space-md);
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Footer adjustments */
  .site-footer,
  .yonko-footer {
    padding: var(--space-xl) var(--space-md);
    padding-bottom: max(var(--space-xl), calc(var(--space-md) + env(safe-area-inset-bottom, 0)));
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }

  /* Footer top section - stack on mobile */
  .footer__top {
    flex-direction: column;
    gap: var(--space-xl);
    text-align: center;
  }

  .footer__brand {
    flex: none;
  }

  /* Newsletter form - stack vertically */
  .footer__newsletter-form {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .footer__newsletter-input {
    width: 100%;
    text-align: center;
  }

  .footer__newsletter-btn {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
  }

  /* Footer grid - 2 columns on tablet, 1 on small mobile */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .footer__col-links a:hover {
    padding-left: 0;
  }

  /* Footer bottom - stack */
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }

  .footer__social {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Extra small screen adjustments */
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  section {
    padding: var(--space-md) 0;
  }

  /* Footer single column on very small screens */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}


/* ==========================================================================
   MOBILE ANIMATIONS - Reduced motion support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mobile-nav-drawer__panel {
    transition: none;
  }

  .mobile-nav-drawer__backdrop {
    transition: none;
  }
}

/* Touch-friendly hover states - disable hover effects on touch */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover .product-card__overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .store-card:hover .store-card__image {
    transform: none;
  }

  /* Ensure mobile interactions are tap-based */
  .product-card__overlay {
    opacity: 1;
    transform: translateY(0);
  }

  /* Remove hover-only elements on touch devices */
  .hover-only {
    display: none !important;
  }

  /* -- Enforce WCAG 2.5.5 (44x44) minimum hit areas for icon-only controls.
        Visible chrome stays the same where important; the tappable region is
        widened via min-width/min-height (or an invisible ::before pseudo when
        growing the box would disrupt layout). */
  .hero__carousel-arrow,
  .hero__slider-arrow,
  .sp-info__color-swatch,
  .st-sidebar__close,
  .st-search__clear,
  .yonko-cart__remove-btn,
  .st-card__quickview-corner {
    min-width: 44px;
    min-height: 44px;
  }

  /* st-search__clear sits inside the search input as an absolute icon; grow
     the hit area outward via padding instead of width so the icon stays
     centered and small. */
  .st-search__clear {
    padding: 0;
  }
  .st-search__clear::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
  }

  /* The chevron next to a nested category label. The visible 26×26 pill is
     intentional; extend the hit area via invisible ::before. Keep relative
     positioning so absolute ::before anchors correctly. */
  .st-filter__cat-toggle {
    position: relative;
  }
  .st-filter__cat-toggle::before {
    content: '';
    position: absolute;
    inset: -9px;
  }

  /* Toolbar tag-remove links ("x"). Previously unstyled inline characters;
     give them a proper circular hit area and clearer affordance. */
  .st-toolbar__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    border-radius: 50%;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-muted);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
  }
  .st-toolbar__tag-remove::before {
    content: '';
    position: absolute;
    inset: -8px;
  }
  .st-toolbar__tag-remove:hover,
  .st-toolbar__tag-remove:focus-visible {
    background: rgba(209, 158, 29, 0.18);
    color: var(--gold-start);
    outline: none;
  }
}

/* Desktop / pointer devices: the same tag-remove affordance — still
   clickable with a reasonable hit area even without the touch override. */
.st-toolbar__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease, color 0.15s ease;
}
.st-toolbar__tag-remove:hover,
.st-toolbar__tag-remove:focus-visible {
  background: rgba(209, 158, 29, 0.18);
  color: var(--gold-start);
  outline: none;
}