/* ==========================================================================
   GALERIE MAILLARD-FOUILLEUL — PRESTIGE LUXURY TRIAD THEME
   Philosophy: Haute Galerie d'Art — Rouge, Noir, Blanc
   Aesthetics: Discret, Épuré, Luxueux, Animations Subtiles en Bézier
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & CSS VARIABLES (DARK & LIGHT PALETTES)
   -------------------------------------------------------------------------- */

:root {
  /* =========================================================================
     COULEUR D'ACCENT UNIFIÉE (ROUGE LAQUE URUSHI PAR DÉFAUT & SES VARIANTES)
     Source de vérité unique pour TOUTES les composantes rouges (textes & objets)
     Permet la bascule dynamique en temps réel dans les DEUX thèmes (clair & sombre)
     ========================================================================= */
  --accent-color: #c52222;

  /* Variantes de luminosité calculées dynamiquement */
  --accent-light: color-mix(in srgb, var(--accent-color) 82%, #ffffff);
  --accent-dark: color-mix(in srgb, var(--accent-color) 78%, #000000);
  --accent-hover: color-mix(in srgb, var(--accent-color) 88%, #000000);
  --accent-active: color-mix(in srgb, var(--accent-color) 70%, #000000);

  /* Variantes de transparence (fonds doux, bordures, lueurs) */
  --accent-bg-subtle: color-mix(in srgb, var(--accent-color) 6%, transparent);
  --accent-bg: color-mix(in srgb, var(--accent-color) 10%, transparent);
  --accent-bg-medium: color-mix(in srgb, var(--accent-color) 16%, transparent);
  --accent-bg-strong: color-mix(in srgb, var(--accent-color) 22%, transparent);

  --accent-border-subtle: color-mix(in srgb, var(--accent-color) 18%, transparent);
  --accent-border: color-mix(in srgb, var(--accent-color) 32%, transparent);
  --accent-border-hover: color-mix(in srgb, var(--accent-color) 48%, transparent);
  --accent-border-accent: color-mix(in srgb, var(--accent-color) 65%, transparent);

  /* Ombres et lueurs dynamiques */
  --accent-shadow-sm: 0 2px 8px color-mix(in srgb, var(--accent-color) 22%, transparent);
  --accent-shadow-md: 0 4px 16px color-mix(in srgb, var(--accent-color) 28%, transparent);
  --accent-shadow-lg: 0 8px 24px color-mix(in srgb, var(--accent-color) 42%, transparent);
  --accent-glow: 0 0 16px color-mix(in srgb, var(--accent-color) 38%, transparent);

  /* Redirections globales immédiates */
  --theme-red: var(--accent-color);
  --theme-red-light: var(--accent-light);
  --theme-red-dark: var(--accent-dark);
  --theme-red-bg: var(--accent-bg);
  --theme-red-border: var(--accent-border);
  --corner-accent: var(--accent-color);
  --corner-accent-fade: color-mix(in srgb, var(--accent-color) 0%, transparent);
  --corner-glow: transparent;
  --red-primary: var(--accent-color);
  --header-gold: var(--accent-color);
  --header-gold-light: var(--accent-light);
  --header-vermilion: var(--accent-color);

  /* Alias additionnels pour le module AR et les composants unifiés */
  --theme-accent-subtle: var(--accent-bg);
  --theme-accent-medium: var(--accent-bg-medium);
  --theme-accent-border: var(--accent-border);
  --theme-bg-card: var(--theme-bg-surface);
  --theme-border-strong: var(--accent-border-hover);
  --theme-shadow-card: var(--theme-shadow-md);
  --theme-text-main: var(--theme-text-primary);
}

html[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces & Backgrounds (Noir Profond / Obsidian Velours) */
  --theme-bg-body: #09090b;
  --theme-bg-surface: #121216;
  --theme-bg-surface-2: #16161c;
  --theme-bg-elevated: #181820;
  --theme-bg-header: #070709;
  --theme-bg-input: #14141a;
  --theme-bg-overlay: rgba(9, 9, 11, 0.92);

  /* Borders & Dividers */
  --theme-border-subtle: rgba(255, 255, 255, 0.08);
  --theme-border-medium: rgba(255, 255, 255, 0.14);
  --theme-border-hover: var(--accent-border-hover);
  --theme-border-accent: var(--accent-border-accent);
  --theme-hr-gradient: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.19), rgba(0, 0, 0, 0));

  /* Asymmetric Diagonal Living Corner Accents (Haut-Droite & Bas-Gauche) */
  --corner-accent: var(--accent-color);
  --corner-accent-fade: color-mix(in srgb, var(--accent-color) 0%, transparent);
  --corner-glow: transparent;

  /* Typography Colors (Blanc & Nuances de Gris Pur) */
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #a1a1aa;
  --theme-text-muted: #71717a;
  --theme-text-inverse: #09090b;

  /* Accent Tones: Dynamiquement dérivés de --accent-color */
  --theme-red: var(--accent-color);
  --theme-red-light: var(--accent-light);
  --theme-red-dark: var(--accent-dark);
  --theme-red-bg: var(--accent-bg);
  --theme-red-border: var(--accent-border);

  /* Compatibility Aliases (strictly redirected to Accent) */
  --theme-gold: var(--theme-red);
  --theme-gold-light: var(--theme-red-light);
  --theme-gold-dark: var(--theme-red-dark);
  --theme-gold-bg: var(--theme-red-bg);
  --theme-gold-border: var(--theme-red-border);
  --theme-vermilion: var(--theme-red);
  --theme-vermilion-bg: var(--theme-red-bg);

  /* Shadows (Subtle, Deep & Airy) */
  --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --theme-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --theme-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.75);
  --theme-shadow-gold: var(--accent-shadow-md);
  --theme-shadow-red: var(--accent-shadow-md);
  /* Logo filter: adapts red 'ESTAMPES' to chosen accent color while keeping white letters pristine */
  --theme-logo-filter: var(--logo-filter-dark, none);

  /* Product Image Vignette Gradient (Bottom to Top Transparent) */
  --theme-image-bg: linear-gradient(to top, #121216 0%, transparent 100%), #181820;

  /* Theme Indicator */
  --theme-mode: "dark";
}

html[data-theme="light"] {
  color-scheme: light;
  /* Surfaces & Backgrounds (Blanc Pur Galerie & Minimalisme Architectural) */
  --theme-bg-body: #ffffff;
  --theme-bg-surface: #ffffff;
  --theme-bg-surface-2: #f8f8fa;
  --theme-bg-elevated: #f4f4f7;
  --theme-bg-header: #ffffff;
  --theme-bg-input: #ffffff;
  --theme-bg-overlay: rgba(255, 255, 255, 0.95);

  /* Borders & Dividers */
  --theme-border-subtle: rgba(0, 0, 0, 0.06);
  --theme-border-medium: rgba(0, 0, 0, 0.11);
  --theme-border-hover: var(--accent-border-hover);
  --theme-border-accent: var(--accent-border-accent);
  --theme-hr-gradient: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0));

  /* Asymmetric Diagonal Living Corner Accents (Haut-Droite & Bas-Gauche) */
  --corner-accent: var(--accent-color);
  --corner-accent-fade: color-mix(in srgb, var(--accent-color) 0%, transparent);
  --corner-glow: transparent;

  /* Typography Colors (Graphite Galerie Haute Précision - Contrastes Riches) */
  --theme-text-primary: #18181b;
  --theme-text-secondary: #27272a;
  --theme-text-muted: #52525b;
  --theme-text-inverse: #ffffff;

  /* Accent Tones: Dynamiquement dérivés de --accent-color */
  --theme-red: var(--accent-color);
  --theme-red-light: var(--accent-dark);
  --theme-red-dark: color-mix(in srgb, var(--accent-color) 62%, #000000);
  --theme-red-bg: var(--accent-bg-subtle);
  --theme-red-border: var(--accent-border-subtle);

  /* Compatibility Aliases (strictly redirected to Accent) */
  --theme-gold: var(--theme-red);
  --theme-gold-light: var(--theme-red-light);
  --theme-gold-dark: var(--theme-red-dark);
  --theme-gold-bg: var(--theme-red-bg);
  --theme-gold-border: var(--theme-red-border);
  --theme-vermilion: var(--theme-red);
  --theme-vermilion-bg: var(--theme-red-bg);

  /* Shadows */
  --theme-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.03);
  --theme-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.05);
  --theme-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.07);
  --theme-shadow-gold: 0 3px 12px color-mix(in srgb, var(--accent-color) 14%, transparent);
  --theme-shadow-red: 0 3px 12px color-mix(in srgb, var(--accent-color) 14%, transparent);

  /* Logo filter: turns white logo letters black while adapting red 'ESTAMPES' to chosen accent color */
  --theme-logo-filter: var(--logo-filter-light, invert(1) hue-rotate(180deg) brightness(0.85));

  /* Product Image Vignette Gradient (White at bottom to transparent at top) */
  --theme-image-bg: linear-gradient(to top, #ffffff 0%, transparent 100%), #f4f4f7;

  /* Theme Indicator */
  --theme-mode: "light";
}

/* Common System Tokens & Sublime Transitions */
:root {
  --theme-radius-xs: 4px;
  --theme-radius-sm: 6px;
  --theme-radius-md: 10px;
  --theme-radius-lg: 16px;
  --theme-radius-pill: 9999px;
  --theme-transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition-slow: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. GLOBAL FOUNDATIONS & TYPOGRAPHY
   -------------------------------------------------------------------------- */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: var(--theme-bg-body) !important;
  color: var(--theme-text-secondary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.32s ease, color 0.32s ease, border-color 0.32s ease;
  min-height: 100vh;
}

html[data-theme="light"] body {
  color: #27272a !important;
}

html[data-theme="light"] p {
  color: inherit;
}

html[data-theme="light"] .lead {
  color: #27272a !important;
}

html[data-theme="light"] .text-muted,
html[data-theme="light"] small.text-muted {
  color: #52525b !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--theme-text-primary) !important;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-top: 0;
  transition: color 0.32s ease;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #18181b !important;
}

html[data-theme="light"] strong,
html[data-theme="light"] b {
  color: #09090b !important;
}

/* Ensure strong and bold children inherit hover color inside links */
html[data-theme="light"] a:hover strong,
html[data-theme="light"] a:hover b,
html[data-theme="light"] a:focus strong,
html[data-theme="light"] a:focus b,
a:hover strong,
a:hover b,
a:focus strong,
a:focus b {
  color: inherit !important;
}

/* Mega-Menu Dropdown Items: Always Pure White text on hover */
#menu .dropdown-inner a:hover,
#menu .dropdown-inner a:hover *,
#menu .dropdown-inner a:focus,
#menu .dropdown-inner a:focus *,
#menu .dropdown-menu a:hover,
#menu .dropdown-menu a:hover *,
#menu .dropdown-menu a:focus,
#menu .dropdown-menu a:focus *,
#menu .see-all:hover,
#menu .see-all:hover * {
  color: #ffffff !important;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 20px;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 16px;
}

h3 {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 12px;
}

h4 {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
}

h5 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Neutralize legacy pulsating heartbeat-x animation and red hovers */
a {
  color: var(--theme-text-primary);
  text-decoration: none;
  transition: var(--theme-transition);
}

a:hover,
a:focus {
  color: var(--theme-gold) !important;
  text-decoration: none;
}

a:before,
a:after,
a:hover:before,
a:hover:after {
  animation: none !important;
  -webkit-animation: none !important;
}

/* Logo adaptation: transforms 'ESTAMPES' to chosen accent nuance while keeping 'MAILLARD-FOUILLEUL' crisp */
#logo img {
  filter: var(--theme-logo-filter) !important;
  transition: filter 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
}

/* Horizontal Dividers (<hr>) — Subtle Luxury Linear Gradient */
hr {
  border: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  height: 1px !important;
  background-color: transparent !important;
  background-image: var(--theme-hr-gradient, linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0))) !important;
  margin: 24px 0 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] hr {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0)) !important;
}

html[data-theme="light"] hr {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0)) !important;
}

/* --------------------------------------------------------------------------
   3. THEME TOGGLE SWITCH WIDGET (#theme-toggle)
   -------------------------------------------------------------------------- */

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-pill);
  color: var(--theme-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: var(--theme-transition);
  outline: none;
  vertical-align: middle;
  line-height: normal;
  height: 24px;
}

html[data-theme="light"] .theme-toggle-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--theme-border-medium);
  color: var(--theme-text-secondary);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
  border-color: var(--theme-gold);
  color: var(--theme-gold) !important;
  background: var(--theme-gold-bg);
  transform: translateY(-1px);
}

.theme-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background-color 0.25s ease;
}

html[data-theme="light"] .theme-toggle-track {
  background: var(--theme-gold);
}

.theme-toggle-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(12px);
  background: #ffffff;
}

.theme-toggle-thumb i {
  font-size: 8px;
  line-height: 1;
}

.theme-toggle-thumb .icon-dark {
  color: #1a1a24;
  display: inline-block;
}

.theme-toggle-thumb .icon-light {
  color: var(--theme-red);
  display: none;
}

html[data-theme="light"] .theme-toggle-thumb .icon-dark {
  display: none;
}

html[data-theme="light"] .theme-toggle-thumb .icon-light {
  display: inline-block;
}

.theme-toggle-text {
  font-size: 10.5px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   4. BREADCRUMB COMPONENT (.breadcrumb)
   -------------------------------------------------------------------------- */

.breadcrumb {
  background: transparent !important;
  padding: 18px 0 !important;
  margin-bottom: 24px !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}

.breadcrumb>li {
  padding: 0 !important;
  text-shadow: none !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--theme-text-muted) !important;
}

.breadcrumb>li:after {
  display: none !important;
  /* Neutralize legacy red rotated diamond */
}

.breadcrumb>li+li:before {
  content: '›' !important;
  color: var(--theme-text-muted) !important;
  font-size: 14px !important;
  padding: 0 4px !important;
}

.breadcrumb>li a {
  color: var(--theme-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--theme-transition);
}

.breadcrumb>li a:hover {
  color: var(--theme-red) !important;
}

.breadcrumb>li:last-child {
  color: var(--theme-text-primary) !important;
  font-weight: 600 !important;
}

.breadcrumb>li:last-child a {
  color: var(--theme-text-primary) !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS & ACTIONS (.btn, .btn-primary, .btn-default, .btn-inverse)
   -------------------------------------------------------------------------- */

.btn {
  font-family: inherit;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: 0.9px;
  border-radius: var(--theme-radius-pill) !important;
  padding: 9px 22px !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
  text-shadow: none !important;
  outline: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative !important;
  overflow: hidden !important;
}

/* =========================================================================
   5A. THÈME SOMBRE : BOUTONS LAQUE URUSHI & TEXTES BLANCS PURS
   Textes blancs (#ffffff) sur dégradés profonds et liseré rouge d'accent
   ========================================================================= */
html[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn {
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-inverse,
html[data-theme="dark"] input.btn.btn-primary,
html[data-theme="dark"] input.btn.btn-inverse,
html[data-theme="dark"] input.btn.full,
html[data-theme="dark"] button.btn-primary,
html[data-theme="dark"] button.btn-inverse,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] a.btn-inverse,
html[data-theme="dark"] #button-account,
html[data-theme="dark"] #button-login,
html[data-theme="dark"] #button-guest,
html[data-theme="dark"] #button-register,
html[data-theme="dark"] #button-payment-address,
html[data-theme="dark"] #button-shipping-address,
html[data-theme="dark"] #button-shipping-method,
html[data-theme="dark"] #button-payment-method,
html[data-theme="dark"] #button-confirm,
html[data-theme="dark"] .pdp-btn-cart,
:root:not([data-theme="light"]) .btn-primary,
:root:not([data-theme="light"]) .btn-inverse,
:root:not([data-theme="light"]) input.btn.btn-primary,
:root:not([data-theme="light"]) input.btn.btn-inverse,
:root:not([data-theme="light"]) input.btn.full,
:root:not([data-theme="light"]) #button-account,
:root:not([data-theme="light"]) #button-login {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%) !important;
  background-image: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent-color) !important;
  box-shadow: var(--accent-shadow-md) !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus,
html[data-theme="dark"] .btn-inverse:hover,
html[data-theme="dark"] .btn-inverse:focus,
html[data-theme="dark"] input.btn.btn-primary:hover,
html[data-theme="dark"] input.btn.btn-primary:focus,
html[data-theme="dark"] input.btn.btn-inverse:hover,
html[data-theme="dark"] input.btn.btn-inverse:focus,
html[data-theme="dark"] input.btn.full:hover,
html[data-theme="dark"] input.btn.full:focus,
html[data-theme="dark"] button.btn-primary:hover,
html[data-theme="dark"] button.btn-primary:focus,
html[data-theme="dark"] button.btn-inverse:hover,
html[data-theme="dark"] button.btn-inverse:focus,
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] a.btn-primary:focus,
html[data-theme="dark"] a.btn-inverse:hover,
html[data-theme="dark"] a.btn-inverse:focus,
html[data-theme="dark"] #button-account:hover,
html[data-theme="dark"] #button-account:focus,
html[data-theme="dark"] #button-login:hover,
html[data-theme="dark"] #button-login:focus,
html[data-theme="dark"] #button-guest:hover,
html[data-theme="dark"] #button-register:hover,
html[data-theme="dark"] #button-payment-address:hover,
html[data-theme="dark"] #button-shipping-address:hover,
html[data-theme="dark"] #button-shipping-method:hover,
html[data-theme="dark"] #button-payment-method:hover,
html[data-theme="dark"] #button-confirm:hover,
html[data-theme="dark"] .pdp-btn-cart:hover,
:root:not([data-theme="light"]) .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary:focus,
:root:not([data-theme="light"]) .btn-inverse:hover,
:root:not([data-theme="light"]) .btn-inverse:focus,
:root:not([data-theme="light"]) input.btn.btn-primary:hover,
:root:not([data-theme="light"]) input.btn.btn-inverse:hover,
:root:not([data-theme="light"]) #button-account:hover,
:root:not([data-theme="light"]) #button-login:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-color) 100%) !important;
  background-image: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-color) 100%) !important;
  border-color: var(--accent-light) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--accent-shadow-lg) !important;
}

html[data-theme="dark"] .btn-primary:active,
html[data-theme="dark"] .btn-inverse:active,
html[data-theme="dark"] input.btn:active,
html[data-theme="dark"] .pdp-btn-cart:active,
:root:not([data-theme="light"]) .btn-primary:active,
:root:not([data-theme="light"]) .btn-inverse:active,
:root:not([data-theme="light"]) input.btn:active {
  background: var(--accent-active) !important;
  background-image: none !important;
  border-color: var(--accent-active) !important;
  color: #ffffff !important;
  transform: translateY(0.5px) scale(0.99);
  box-shadow: var(--accent-shadow-sm) !important;
}

/* Boutons secondaires en thème sombre */
html[data-theme="dark"] .btn-default,
:root:not([data-theme="light"]) .btn-default {
  background: var(--theme-bg-surface) !important;
  background-image: none !important;
  color: var(--theme-text-primary) !important;
  border: 1px solid var(--theme-border-medium) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  text-transform: uppercase;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
:root:not([data-theme="light"]) .btn-default:hover,
:root:not([data-theme="light"]) .btn-default:focus {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background: var(--theme-bg-elevated) !important;
  transform: translateY(-1.5px);
  box-shadow: var(--theme-shadow-md) !important;
}

html[data-theme="dark"] .btn-default:active,
:root:not([data-theme="light"]) .btn-default:active {
  transform: translateY(0.5px) scale(0.99);
}

/* =========================================================================
   5B. THÈME CLAIR : BOUTONS HAUTE LISIBILITÉ & TEXTES FONCÉS
   Conforme à la demande utilisateur : "textes foncés si theme clair des boutons aussi"
   Textes sombres (#18181b / #09090b), fond porcelaine/blanc pur et liseré rouge d'accent
   ========================================================================= */

/* Règle générale : Tous les boutons en thème clair ont un texte sombre et lisible */
html[data-theme="light"] .btn,
html[data-theme="light"] input.btn,
html[data-theme="light"] button.btn,
html[data-theme="light"] a.btn {
  color: #18181b !important;
  text-shadow: none !important;
}

/* Boutons principaux et inverses en thème clair */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-inverse,
html[data-theme="light"] input.btn.btn-primary,
html[data-theme="light"] input.btn.btn-inverse,
html[data-theme="light"] input.btn.full,
html[data-theme="light"] button.btn-primary,
html[data-theme="light"] button.btn-inverse,
html[data-theme="light"] a.btn-primary,
html[data-theme="light"] a.btn-inverse,
html[data-theme="light"] #button-account,
html[data-theme="light"] #button-login,
html[data-theme="light"] #button-guest,
html[data-theme="light"] #button-register,
html[data-theme="light"] #button-payment-address,
html[data-theme="light"] #button-shipping-address,
html[data-theme="light"] #button-shipping-method,
html[data-theme="light"] #button-payment-method,
html[data-theme="light"] #button-confirm,
html[data-theme="light"] .pdp-btn-cart,
html[data-theme="light"] .login-actions-bottom .btn-primary,
html[data-theme="light"] #account-login .well .btn-primary,
html[data-theme="light"] #affiliate-login .well .btn-primary {
  background: #ffffff !important;
  background-image: none !important;
  color: #18181b !important;
  border: 1.5px solid var(--accent-color) !important;
  box-shadow: var(--accent-shadow-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-primary:focus,
html[data-theme="light"] .btn-inverse:hover,
html[data-theme="light"] .btn-inverse:focus,
html[data-theme="light"] input.btn.btn-primary:hover,
html[data-theme="light"] input.btn.btn-primary:focus,
html[data-theme="light"] input.btn.btn-inverse:hover,
html[data-theme="light"] input.btn.btn-inverse:focus,
html[data-theme="light"] input.btn.full:hover,
html[data-theme="light"] input.btn.full:focus,
html[data-theme="light"] button.btn-primary:hover,
html[data-theme="light"] button.btn-primary:focus,
html[data-theme="light"] button.btn-inverse:hover,
html[data-theme="light"] button.btn-inverse:focus,
html[data-theme="light"] a.btn-primary:hover,
html[data-theme="light"] a.btn-primary:focus,
html[data-theme="light"] a.btn-inverse:hover,
html[data-theme="light"] a.btn-inverse:focus,
html[data-theme="light"] #button-account:hover,
html[data-theme="light"] #button-account:focus,
html[data-theme="light"] #button-login:hover,
html[data-theme="light"] #button-login:focus,
html[data-theme="light"] #button-guest:hover,
html[data-theme="light"] #button-guest:focus,
html[data-theme="light"] #button-register:hover,
html[data-theme="light"] #button-register:focus,
html[data-theme="light"] #button-payment-address:hover,
html[data-theme="light"] #button-payment-address:focus,
html[data-theme="light"] #button-shipping-address:hover,
html[data-theme="light"] #button-shipping-address:focus,
html[data-theme="light"] #button-shipping-method:hover,
html[data-theme="light"] #button-shipping-method:focus,
html[data-theme="light"] #button-payment-method:hover,
html[data-theme="light"] #button-payment-method:focus,
html[data-theme="light"] #button-confirm:hover,
html[data-theme="light"] #button-confirm:focus,
html[data-theme="light"] .pdp-btn-cart:hover,
html[data-theme="light"] .pdp-btn-cart:focus {
  background: var(--accent-bg-medium) !important;
  background-image: none !important;
  border-color: var(--accent-color) !important;
  color: #09090b !important;
  box-shadow: var(--accent-shadow-md) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .btn-primary:active,
html[data-theme="light"] .btn-inverse:active,
html[data-theme="light"] input.btn:active,
html[data-theme="light"] button.btn:active,
html[data-theme="light"] a.btn:active,
html[data-theme="light"] .pdp-btn-cart:active {
  background: var(--accent-bg-strong) !important;
  background-image: none !important;
  border-color: var(--accent-color) !important;
  color: #09090b !important;
  transform: translateY(0.5px) scale(0.99) !important;
  box-shadow: var(--accent-shadow-sm) !important;
}

/* Boutons secondaires en thème clair */
html[data-theme="light"] .btn-default {
  background: #ffffff !important;
  background-image: none !important;
  color: #18181b !important;
  border: 1px solid var(--theme-border-medium) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  text-transform: uppercase;
}

html[data-theme="light"] .btn-default:hover,
html[data-theme="light"] .btn-default:focus {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background: var(--accent-bg-subtle) !important;
  transform: translateY(-1.5px);
  box-shadow: var(--theme-shadow-md) !important;
}

html[data-theme="light"] .btn-default:active {
  transform: translateY(0.5px) scale(0.99);
}

/* Icônes dans les boutons en thème clair */
html[data-theme="light"] .pdp-btn-cart i.fa-shopping-bag,
html[data-theme="light"] .pdp-btn-cart i.fa-shopping-cart {
  color: var(--accent-color) !important;
}

html[data-theme="light"] .btn-link {
  color: #27272a !important;
}

html[data-theme="light"] .btn-link:hover,
html[data-theme="light"] .btn-link:focus {
  color: var(--accent-color) !important;
}

/* Danger Button (Commun aux deux thèmes) */
.btn-danger {
  background: var(--accent-color) !important;
  background-image: none !important;
  border: 1px solid var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: var(--accent-shadow-sm) !important;
}

.btn-danger:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--accent-shadow-md) !important;
}

.btn-danger:active {
  background: var(--accent-active) !important;
  border-color: var(--accent-active) !important;
}

/* --------------------------------------------------------------------------
   5C. ULTRA-SOFT BORDER GLASS SLIDE ANIMATION (GLISSEMENT DE LUMIÈRE SUR BORDURE)
   Silky, continuous pearlescent glass highlight gliding along the border
   perimeter of all action buttons (<button>, <a>, and <input.btn>).
   -------------------------------------------------------------------------- */

.btn:not(.btn-link):not(.btn-toggle-password),
#cart .dropdown-menu p.cart-mini-actions a,
#cart .dropdown-menu a.btn-mini-checkout,
#cart .dropdown-menu a.btn-mini-view-cart,
.btn-cart-prestige,
.pdp-btn-cart,
.modern-submit-btn,
.checkout-sticky-cta-btn,
.btn-submit-account,
.wishlist-btn-cart,
.wishlist-btn-remove,
.btn-mini-cart-remove {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.btn:not(.btn-link):not(.btn-toggle-password)::after,
#cart .dropdown-menu p.cart-mini-actions a::after,
#cart .dropdown-menu a.btn-mini-checkout::after,
#cart .dropdown-menu a.btn-mini-view-cart::after,
.btn-cart-prestige::after,
.pdp-btn-cart::after,
.modern-submit-btn::after,
.checkout-sticky-cta-btn::after,
.btn-submit-account::after,
.wishlist-btn-cart::after,
.wishlist-btn-remove::after,
.btn-mini-cart-remove::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1.6px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.14) 36%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.14) 64%,
    rgba(255, 255, 255, 0) 80%
  ) !important;
  background-size: 280% 280% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  opacity: 0.78 !important;
  will-change: background-position, opacity !important;
  animation: btn-glass-ambient 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

/* Light mode: warm accent-tinted glass border slide on light-surface buttons */
html[data-theme="light"] .btn:not(.btn-link):not(.btn-toggle-password):not(.btn-danger)::after,
html[data-theme="light"] #cart .dropdown-menu a.btn-mini-view-cart::after,
html[data-theme="light"] .btn-cart-prestige::after,
html[data-theme="light"] .pdp-btn-cart::after,
html[data-theme="light"] .wishlist-btn-cart::after {
  background: linear-gradient(
    115deg,
    transparent 20%,
    color-mix(in srgb, var(--accent-color, #c52222) 18%, transparent) 36%,
    color-mix(in srgb, var(--accent-color, #c52222) 82%, #ffffff) 50%,
    color-mix(in srgb, var(--accent-color, #c52222) 18%, transparent) 64%,
    transparent 80%
  ) !important;
  background-size: 280% 280% !important;
}

/* Stagger multiple buttons so they glide organically */
.btn:not(.btn-link):not(.btn-toggle-password):nth-of-type(2n)::after,
#cart .dropdown-menu p.cart-mini-actions a:nth-child(2)::after {
  animation-delay: 2.1s !important;
}

.btn:not(.btn-link):not(.btn-toggle-password):nth-of-type(3n)::after {
  animation-delay: 4.2s !important;
}

@keyframes btn-glass-ambient {
  0% {
    background-position: 220% 0%;
    opacity: 0;
  }

  12% {
    opacity: 0.78;
  }

  56% {
    background-position: -60% 0%;
    opacity: 0.78;
  }

  70%,
  100% {
    background-position: -60% 0%;
    opacity: 0;
  }
}

.btn:not(.btn-link):not(.btn-toggle-password):hover::after,
#cart .dropdown-menu p.cart-mini-actions a:hover::after,
#cart .dropdown-menu a.btn-mini-checkout:hover::after,
#cart .dropdown-menu a.btn-mini-view-cart:hover::after,
.btn-cart-prestige:hover::after,
.pdp-btn-cart:hover::after,
.modern-submit-btn:hover::after,
.checkout-sticky-cta-btn:hover::after,
.btn-submit-account:hover::after,
.wishlist-btn-cart:hover::after,
.wishlist-btn-remove:hover::after,
.btn-mini-cart-remove:hover::after {
  animation: btn-glass-hover 1.75s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

@keyframes btn-glass-hover {
  0% {
    background-position: 210% 0%;
    opacity: 0.96;
  }

  100% {
    background-position: -70% 0%;
    opacity: 0.96;
  }
}

/* Native <input type="button|submit" class="btn"> Border Glass-Slide Support */
html[data-theme="dark"] input.btn:not([disabled]):not(.disabled),
:root:not([data-theme="light"]) input.btn:not([disabled]):not(.disabled) {
  border: 1.5px solid transparent !important;
  background-image:
    linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%),
    linear-gradient(115deg, var(--accent-color) 20%, rgba(255, 255, 255, 0.85) 50%, var(--accent-color) 80%) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 280% 280% !important;
  animation: input-btn-glass-slide 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

html[data-theme="light"] input.btn:not([disabled]):not(.disabled) {
  border: 1.5px solid transparent !important;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%),
    linear-gradient(115deg, color-mix(in srgb, var(--accent-color, #c52222) 45%, transparent) 20%, var(--accent-color, #c52222) 50%, color-mix(in srgb, var(--accent-color, #c52222) 45%, transparent) 80%) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 280% 280% !important;
  animation: input-btn-glass-slide 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

#checkout-checkout input.btn-inverse.full:not([disabled]):not(.disabled),
#checkout-checkout input#button-confirm:not([disabled]):not(.disabled) {
  border: 1.5px solid transparent !important;
  background-image:
    linear-gradient(135deg, var(--accent-color, var(--theme-red)) 0%, var(--accent-color, var(--theme-red)) 100%),
    linear-gradient(115deg, var(--accent-color, var(--theme-red)) 20%, rgba(255, 255, 255, 0.88) 50%, var(--accent-color, var(--theme-red)) 80%) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: 100% 100%, 280% 280% !important;
  animation: input-btn-glass-slide 6.5s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

input.btn:not([disabled]):not(.disabled):hover {
  animation: input-btn-glass-slide 1.75s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

@keyframes input-btn-glass-slide {
  0% {
    background-position: 0% 0%, 220% 0%;
  }

  60%,
  100% {
    background-position: 0% 0%, -60% 0%;
  }
}

/* Disabled & reduced-motion accessibility */
.btn[disabled]::after,
.btn.disabled::after {
  display: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn::after,
  #cart .dropdown-menu p.cart-mini-actions a::after,
  input.btn {
    animation: none !important;
  }
}

/* Button Containers */
.buttons {
  margin: 25px 0 15px;
  padding: 15px 0;
  border-top: 1px solid var(--theme-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.buttons .pull-right {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   6. PRODUCT CARDS & CATALOG GRIDS (.product-thumb)
   -------------------------------------------------------------------------- */

/* Ensure row behaves strictly as a flexbox container for product layouts */
.row,
#content .row,
.container .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.row:before,
.row:after,
#content .row:before,
#content .row:after,
.container .row:before,
.container .row:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Product column: must stretch vertically and disable float */
.product-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  float: none !important;
  margin-bottom: 28px !important;
}

/* Product Card: 100% height, flex column */
.product-thumb {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 100% !important;
  height: 100% !important;
  width: 100% !important;
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--theme-shadow-sm) !important;
  transition: var(--theme-transition) !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product-thumb:hover {
  transform: translateY(-4px) !important;
  border-color: var(--theme-border-subtle) !important;
  box-shadow: var(--theme-shadow-md) !important;
}

/* Fixed uniform Image Container */
.product-thumb .image {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  width: 100% !important;
  flex: 0 0 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--theme-image-bg, linear-gradient(to top, #ffffff 0%, transparent 100%), #f4f4f7) !important;
  padding: 12px !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  border-bottom: 0px !important;
}

html[data-theme="light"] .product-thumb .image {
  background: linear-gradient(to top, #ffffff 0%, transparent 100%), #f4f4f7 !important;
}

html[data-theme="dark"] .product-thumb .image {
  background: linear-gradient(to top, #121216 0%, transparent 100%), #181820 !important;
}

.product-thumb .image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.product-thumb .image img,
.product-thumb .image .img-responsive {
  max-height: 196px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-thumb:hover .image img {
  transform: scale(1.03) !important;
}

/* Details and Caption */
.product-thumb .product-details,
.product-thumb>div:not(.image):not(.caption):not(.button-group) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.product-thumb .caption {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 18px 12px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Title row wrapper: reserves uniform 60px for title (38px) and artist (18px) */
.product-thumb .product-title-row {
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  margin: 0 0 6px 0 !important;
}

/* Title text: strictly calibrated to 38px (2 lines) - en italique pour les titres d'oeuvres */
.product-thumb h4,
.product-thumb h3.geo-product-title,
.product-thumb .caption h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  overflow: hidden !important;
  margin: 0 0 4px 0 !important;
}

.product-thumb h4 a,
.product-thumb h3.geo-product-title a,
.product-thumb .caption h4 a {
  font-style: italic !important;
  color: var(--theme-text-primary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-left: none !important;
  padding-left: 0 !important;
  transition: var(--theme-transition) !important;
}

.product-thumb h4 a:hover,
.product-thumb h3.geo-product-title a:hover {
  color: var(--theme-gold) !important;
}

/* --------------------------------------------------------------------------
   Top Artist Header (.product-artist-header or .product-thumb > center)
   Guarantees generous padding from card edges & top line, perfect vertical
   and horizontal centering, and 100% card alignment across all columns.
   -------------------------------------------------------------------------- */
.product-thumb .product-artist-header,
.product-thumb>center {
  width: 100% !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 16px 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--theme-bg-surface) !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  overflow: hidden !important;
  position: relative !important;
}

.product-thumb .product-artist-header .artist-header-link,
.product-thumb>center>a[href*="manufacturer"],
.product-thumb>a[href*="manufacturer"] {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 4px !important;
  margin: 0 auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--theme-gold) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  transition: var(--theme-transition) !important;
}

.product-thumb .product-artist-header .artist-header-link:hover,
.product-thumb>center>a[href*="manufacturer"]:hover,
.product-thumb>a[href*="manufacturer"]:hover {
  color: var(--theme-gold-light) !important;
  text-decoration: none !important;
}

/* Neutralize legacy <hr> that immediately followed top center/header */
.product-thumb>center+hr,
.product-thumb .product-artist-header+hr {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border: none !important;
}

/* Artist name inside caption (e.g., category view): strictly calibrated to 18px */
.product-thumb .caption .artist-name,
.product-thumb .caption a[href*="manufacturer"] {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--theme-gold) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 4px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
  transition: var(--theme-transition) !important;
}

.product-thumb .caption .artist-name:hover,
.product-thumb .caption a[href*="manufacturer"]:hover {
  color: var(--theme-gold-light) !important;
  text-decoration: none !important;
}

/* Divider inside card */
.product-thumb hr,
.product-thumb .product-divider {
  border: none !important;
  border-top: 0px solid var(--theme-border-subtle) !important;
  margin: 6px 0 10px 0 !important;
  width: 100% !important;
}

/* Description paragraph: strictly calibrated to 54px (3 lines) */
.product-thumb .product-desc:not(:empty),
.product-thumb .caption p:not(.price):not(:empty) {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--theme-text-secondary) !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  margin-bottom: 10px !important;
}

/* Collapse empty <p> or orphan <p> generated after .price / <hr> to 1px height */
.product-thumb .caption p:empty,
.product-thumb .product-desc:empty,
.product-thumb .caption .price ~ p,
.product-thumb .caption hr ~ p {
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1px !important;
  font-size: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

/* Rating */
.product-thumb .rating {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   INNOVATIVE "CARTEL D'ACQUISITION GALERIE" PRICE PRESENTATION
   Museum-grade plaque with Hanko seal dot, editorial leader & high-contrast
   serif numerals in both Dark & Light modes (immune to dark accent swatches)
   ========================================================================== */
.product-thumb .price,
.product-list .product-thumb .price,
.product-grid .product-thumb .price,
.product-thumb .gallery-price-cartel {
  position: relative !important;
  margin-top: auto !important;
  margin-bottom: 6px !important;
  padding: 7px 11px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-left: 2.5px solid var(--accent-color, #c52222) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  color: #f8f6f0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.35px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              background 0.28s ease,
              box-shadow 0.28s ease !important;
}

/* Soft glass sweep on card hover */
.product-thumb .gallery-price-cartel::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 65% !important;
  height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.product-thumb:hover .gallery-price-cartel::after {
  left: 145% !important;
}

.product-thumb:hover .price,
.product-thumb:hover .gallery-price-cartel {
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-left-color: var(--accent-color, #c52222) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Light Mode Duality */
html[data-theme="light"] .product-thumb .price,
html[data-theme="light"] .product-list .product-thumb .price,
html[data-theme="light"] .product-grid .product-thumb .price,
html[data-theme="light"] .product-thumb .gallery-price-cartel {
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.035) 0%, rgba(24, 24, 27, 0.012) 100%) !important;
  border: 1px solid rgba(24, 24, 27, 0.09) !important;
  border-left: 2.5px solid var(--accent-color, #c52222) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  color: #141417 !important;
}

html[data-theme="light"] .product-thumb:hover .price,
html[data-theme="light"] .product-thumb:hover .gallery-price-cartel {
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.055) 0%, rgba(24, 24, 27, 0.02) 100%) !important;
  border-color: rgba(24, 24, 27, 0.16) !important;
  border-left-color: var(--accent-color, #c52222) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 10px rgba(15, 23, 42, 0.07) !important;
}

/* Left Meta: Hanko Seal Dot + Uppercase Editorial Tag */
.gallery-price-cartel .cartel-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.gallery-price-cartel .cartel-seal-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent-color, #c52222) !important;
  box-shadow: 0 0 0 2px rgba(197, 34, 34, 0.22), 0 0 7px rgba(197, 34, 34, 0.55) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.gallery-price-cartel .cartel-label {
  display: none !important;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.35px !important;
  color: rgba(244, 244, 246, 0.58) !important;
  line-height: 1 !important;
}

html[data-theme="light"] .gallery-price-cartel .cartel-label {
  color: rgba(24, 24, 27, 0.56) !important;
}

/* Delicate Museum Leader Line connecting Label to Price */
.gallery-price-cartel .cartel-leader {
  flex: 1 1 auto !important;
  height: 1px !important;
  min-width: 10px !important;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0px,
    rgba(255, 255, 255, 0.16) 2px,
    transparent 2px,
    transparent 5px
  ) !important;
  opacity: 0.75 !important;
}

html[data-theme="light"] .gallery-price-cartel .cartel-leader {
  background: repeating-linear-gradient(
    90deg,
    rgba(24, 24, 27, 0.18) 0px,
    rgba(24, 24, 27, 0.18) 2px,
    transparent 2px,
    transparent 5px
  ) !important;
}

/* Right Value: High-Contrast Editorial Serif Numerals */
.gallery-price-cartel .cartel-value {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.gallery-price-cartel .price-current,
.gallery-price-cartel .price-new,
.product-list .product-thumb .price-new {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.4px !important;
  color: #f8f6f0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] .gallery-price-cartel .price-current,
html[data-theme="light"] .gallery-price-cartel .price-new,
html[data-theme="light"] .product-list .product-thumb .price-new {
  color: #141417 !important;
  text-shadow: none !important;
}

.product-thumb .price-old,
.product-list .product-thumb .price-old {
  color: var(--theme-text-muted) !important;
  font-size: 11.5px !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  opacity: 0.75 !important;
}

/* Fallback neutralization if any legacy <i style="font-size:xx-small..."> exists */
.product-thumb .price i[style] {
  font-size: 15px !important;
  font-style: normal !important;
  float: none !important;
  color: inherit !important;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important;
}

.product-thumb .price hr {
  display: none !important;
}

/* List View (.product-list) refinement for the Cartel */
.product-list .product-thumb .gallery-price-cartel {
  max-width: 280px !important;
  margin-top: 10px !important;
}

/* Button Group: Modern Haute Galerie Capsule Dock (Dark & Light Duality) */
.product-thumb .button-group {
  margin-top: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  padding: 8px 12px 10px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .product-thumb .button-group {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.018) 100%) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Each action element (button or a) is a sculpted tactile gallery capsule */
.product-thumb .button-group>button,
.product-thumb .button-group>a {
  width: 100% !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  color: var(--theme-text-secondary) !important;
  font-size: 13px !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease,
              border-color 0.22s ease,
              color 0.22s ease,
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  float: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}

html[data-theme="light"] .product-thumb .button-group>button,
html[data-theme="light"] .product-thumb .button-group>a {
  background: #f4f4f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.075) !important;
  color: #52525b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Primary action (Cart / Acquisition) subtle signature tint at rest */
.product-thumb .button-group>button.btn-action-cart,
.product-thumb .button-group>button:first-child {
  background: color-mix(in srgb, var(--accent-color, #c52222) 12%, rgba(255, 255, 255, 0.03)) !important;
  border-color: color-mix(in srgb, var(--accent-color, #c52222) 30%, transparent) !important;
  color: var(--accent-color, #c52222) !important;
}

html[data-theme="light"] .product-thumb .button-group>button.btn-action-cart,
html[data-theme="light"] .product-thumb .button-group>button:first-child {
  background: color-mix(in srgb, var(--accent-color, #c52222) 9%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--accent-color, #c52222) 28%, transparent) !important;
  color: var(--accent-color, #c52222) !important;
}

/* When <a> wraps a <button>, make the inner button transparent & stretch 100% */
.product-thumb .button-group>a>button {
  width: 100% !important;
  height: 100% !important;
  line-height: 30px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border-radius: inherit !important;
  float: none !important;
}

/* Hover & Focus-Visible effects: Full Accent Immersion + Crisp White Icon in Both Themes */
.product-thumb .button-group>button:hover,
.product-thumb .button-group>a:hover,
.product-thumb .button-group>button:focus-visible,
.product-thumb .button-group>a:focus-visible,
html[data-theme="light"] .product-thumb .button-group>button:hover,
html[data-theme="light"] .product-thumb .button-group>a:hover,
html[data-theme="light"] .product-thumb .button-group>button.btn-action-cart:hover,
html[data-theme="light"] .product-thumb .button-group>button:first-child:hover,
html[data-theme="dark"] .product-thumb .button-group>button:hover,
html[data-theme="dark"] .product-thumb .button-group>a:hover,
html[data-theme="dark"] .product-thumb .button-group>button.btn-action-cart:hover,
html[data-theme="dark"] .product-thumb .button-group>button:first-child:hover {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-color, #c52222) 34%, transparent) !important;
}

.product-thumb .button-group>a:hover>button {
  background: transparent !important;
  color: #ffffff !important;
}

.product-thumb .button-group>button:active,
.product-thumb .button-group>a:active,
html[data-theme="light"] .product-thumb .button-group>button:active,
html[data-theme="light"] .product-thumb .button-group>a:active,
html[data-theme="dark"] .product-thumb .button-group>button:active,
html[data-theme="dark"] .product-thumb .button-group>a:active {
  transform: translateY(0) scale(0.96) !important;
}

.product-thumb .button-group i,
.product-thumb .button-group .fa {
  font-size: 13.5px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: auto !important;
  display: inline-block !important;
  text-align: center !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important;
}

.product-thumb .button-group>button:hover i,
.product-thumb .button-group>a:hover i {
  transform: scale(1.12) !important;
  color: #ffffff !important;
}

/* Modern Haute Galerie Tooltips (replaces legacy Bootstrap #7e7e7e tooltip) */
.tooltip {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  z-index: 1080 !important;
}

.tooltip.in {
  opacity: 1 !important;
  filter: none !important;
}

.tooltip-inner {
  max-width: 260px !important;
  padding: 6px 11px !important;
  color: #f4f4f6 !important;
  text-align: center !important;
  background-color: #181820 !important;
  border: 1px solid color-mix(in srgb, var(--accent-color, #c52222) 45%, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 12px color-mix(in srgb, var(--accent-color, #c52222) 18%, transparent) !important;
  line-height: 1.35 !important;
}

html[data-theme="light"] .tooltip-inner {
  background-color: #18181b !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--accent-color, #c52222) 45%, rgba(0, 0, 0, 0.2)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #181820 !important;
}

html[data-theme="light"] .tooltip.top .tooltip-arrow {
  border-top-color: #18181b !important;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #181820 !important;
}

html[data-theme="light"] .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #18181b !important;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #181820 !important;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #181820 !important;
}

/* --------------------------------------------------------------------------
   Special adaptations for Product List View (.product-list)
   -------------------------------------------------------------------------- */
.product-list.product-layout {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

.product-list .product-thumb {
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 220px !important;
  height: auto !important;
  margin-bottom: 24px !important;
}

.product-list .product-thumb .image {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  min-height: 220px !important;
  border-right: 1px solid var(--theme-border-subtle) !important;
  border-bottom: none !important;
}

.product-list .product-thumb .product-details {
  flex: 1 1 auto !important;
  width: calc(100% - 260px) !important;
}

.product-list .product-thumb .caption {
  padding: 18px 24px 14px !important;
}

.product-list .product-thumb .product-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.product-list .product-thumb h4 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.product-list .product-thumb .artist-name {
  margin-left: auto !important;
}

.product-list .product-thumb .product-desc {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  -webkit-line-clamp: 3 !important;
}

.product-list .product-thumb .button-group {
  justify-content: flex-end !important;
  padding: 6px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 8px !important;
  background: var(--theme-bg-elevated) !important;
}

.product-list .product-thumb .button-group>button,
.product-list .product-thumb .button-group>a {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 14px !important;
  height: 32px !important;
  line-height: 32px !important;
  border: 1px solid var(--theme-border-medium) !important;
  border-radius: var(--theme-radius-xs) !important;
  background: var(--theme-bg-surface) !important;
}

.product-list .product-thumb .button-group>button+button,
.product-list .product-thumb .button-group>button+a,
.product-list .product-thumb .button-group>a+button {
  border-left: 1px solid var(--theme-border-medium) !important;
}

@media (max-width: 767px) {
  .product-list .product-thumb {
    flex-direction: column !important;
  }

  .product-list .product-thumb .image {
    flex: 0 0 220px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
  }

  .product-list .product-thumb .product-details {
    width: 100% !important;
  }

  .product-list .product-thumb .button-group {
    justify-content: stretch !important;
    padding: 8px 12px 10px !important;
    height: 50px !important;
    gap: 8px !important;
  }

  .product-list .product-thumb .button-group>button,
  .product-list .product-thumb .button-group>a {
    flex: 1 1 0 !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   7. REASSURANCE SECTION (.geo-trust-bar, .geo-trust-item, .geo-trust-icon)
   -------------------------------------------------------------------------- */

.geo-trust-bar {
  background: var(--theme-bg-surface) !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  padding: 45px 0 25px !important;
  margin-top: 45px !important;
  transition: var(--theme-transition);
}

.geo-trust-item {
  margin-bottom: 24px;
}

.geo-trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--theme-gold-bg) !important;
  border: 1px solid var(--theme-gold-border) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  color: var(--theme-gold) !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  transition: var(--theme-transition);
}

.geo-trust-icon i,
.geo-trust-icon .fa {
  color: var(--theme-gold) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: var(--theme-transition);
}

.geo-trust-item:hover .geo-trust-icon {
  transform: translateY(-4px) scale(1.06);
  background: var(--theme-gold) !important;
  border-color: var(--theme-gold) !important;
  box-shadow: var(--theme-shadow-gold) !important;
}

.geo-trust-item:hover .geo-trust-icon i,
.geo-trust-item:hover .geo-trust-icon .fa {
  color: var(--theme-text-inverse) !important;
}

.geo-trust-item h4 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--theme-text-primary) !important;
  margin: 0 0 8px;
}

.geo-trust-item p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--theme-text-secondary) !important;
  max-width: 250px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   8. FAQ ACCORDION SECTION (.geo-faq-wrapper, .geo-faq-item)
   -------------------------------------------------------------------------- */

.geo-faq-wrapper {
  background: var(--theme-bg-body) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  padding: 50px 0 35px !important;
}

.geo-faq-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-text-primary) !important;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.geo-faq-header h2 i {
  color: var(--theme-red) !important;
  margin-right: 8px;
}

.geo-faq-header .lead {
  color: var(--theme-text-secondary) !important;
  font-size: 13.5px;
  margin-bottom: 30px;
}

.geo-faq-grid {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.geo-faq-item {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  margin-bottom: 14px;
  overflow: hidden;
  transition: var(--theme-transition);
}

.geo-faq-item:hover {
  border-color: var(--theme-border-hover) !important;
}

.geo-faq-item[open] {
  border-color: var(--accent-border-hover) !important;
  box-shadow: var(--theme-shadow-sm);
}

.geo-faq-question {
  color: var(--theme-text-primary) !important;
  background: var(--theme-bg-surface) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
  transition: var(--theme-transition);
  list-style: none;
  user-select: none;
}

.geo-faq-question::-webkit-details-marker {
  display: none;
}

.geo-faq-question:hover {
  color: var(--theme-red) !important;
}

.geo-faq-question .toggle-icon {
  color: var(--theme-red) !important;
  font-size: 12px;
  transition: transform 0.25s ease;
}

.geo-faq-item[open] .toggle-icon {
  transform: rotate(180deg);
}

.geo-faq-answer {
  padding: 18px 22px 22px !important;
  color: var(--theme-text-secondary) !important;
  background: var(--theme-bg-surface) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
}

.faq-summary {
  padding: 13px 18px !important;
  background: var(--theme-bg-elevated) !important;
  border-left: 3px solid var(--theme-red) !important;
  border-radius: 4px !important;
  margin-bottom: 14px !important;
  color: var(--theme-text-primary) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.faq-summary strong {
  color: var(--theme-red) !important;
}

.faq-deepdive,
.faq-deepdive p {
  color: var(--theme-text-secondary) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

.faq-deepdive strong {
  color: var(--theme-text-primary) !important;
  font-weight: 700 !important;
}

.faq-deepdive a {
  color: var(--theme-red) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.faq-deepdive a:hover {
  color: var(--theme-red-light) !important;
}

.geo-eeat-footnote {
  margin-top: 30px;
  color: var(--theme-text-muted) !important;
  font-size: 11.5px;
  border-top: 1px solid var(--theme-border-subtle) !important;
  padding-top: 16px;
}

.geo-eeat-footnote small {
  color: var(--theme-text-muted) !important;
}

.geo-eeat-footnote i {
  color: var(--theme-red) !important;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   FAQ THEME CLAIR (LIGHT MODE) - TEXTES NETS, FONCÉS ET ULTRA-LISIBLES
   -------------------------------------------------------------------------- */
html[data-theme="light"] .geo-faq-wrapper {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .geo-faq-header h2 {
  color: #18181b !important;
}

html[data-theme="light"] .geo-faq-header .lead {
  color: #27272a !important;
  /* Texte de presentation fonce et net */
}

html[data-theme="light"] .geo-faq-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .geo-faq-item:hover {
  border-color: var(--accent-border-hover) !important;
}

html[data-theme="light"] .geo-faq-item[open] {
  border-color: var(--accent-border-hover) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), var(--accent-shadow-sm) !important;
}

html[data-theme="light"] .geo-faq-question {
  background: #fafafc !important;
  color: #18181b !important;
  /* Titre question fonce */
}

html[data-theme="light"] .geo-faq-question:hover {
  color: var(--theme-red) !important;
  background: #f4f4f7 !important;
}

html[data-theme="light"] details[open] .geo-faq-question {
  background: #f4f4f7 !important;
  color: #18181b !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .geo-faq-answer {
  background: #ffffff !important;
  color: #27272a !important;
  /* Reponse foncee */
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .faq-summary {
  background: #f4f4f7 !important;
  border-left: 3px solid var(--theme-red) !important;
  color: #18181b !important;
}

html[data-theme="light"] .faq-summary strong {
  color: var(--theme-red) !important;
}

html[data-theme="light"] .faq-deepdive,
html[data-theme="light"] .faq-deepdive p {
  color: #27272a !important;
  /* Texte developpe fonce, contrasté et lisible */
  font-weight: 400 !important;
}

html[data-theme="light"] .faq-deepdive strong {
  color: #09090b !important;
  /* Gras noir profond */
  font-weight: 700 !important;
}

html[data-theme="light"] .faq-deepdive a {
  color: var(--theme-red) !important;
  text-decoration: underline !important;
}

html[data-theme="light"] .faq-deepdive a:hover {
  color: var(--accent-dark) !important;
}

html[data-theme="light"] .geo-eeat-footnote,
html[data-theme="light"] .geo-eeat-footnote small {
  color: #52525b !important;
  /* Footnote foncee et nette */
}

/* --------------------------------------------------------------------------
   FAQ THEME SOMBRE (DARK MODE) - ÉLÉGANCE ET CONTRASTE PARFAIT
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .geo-faq-wrapper {
  background: #09090b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .geo-faq-header h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .geo-faq-header .lead {
  color: #a1a1aa !important;
}

html[data-theme="dark"] .geo-faq-item {
  background: #121216 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .geo-faq-item:hover {
  border-color: var(--accent-border-hover) !important;
}

html[data-theme="dark"] .geo-faq-item[open] {
  border-color: var(--accent-border-hover) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), var(--accent-shadow-sm) !important;
}

html[data-theme="dark"] .geo-faq-question {
  background: #14141a !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .geo-faq-question:hover {
  color: var(--accent-light) !important;
  background: #181820 !important;
}

html[data-theme="dark"] details[open] .geo-faq-question {
  background: #181820 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .geo-faq-answer {
  background: #121216 !important;
  color: #d4d4d8 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .faq-summary {
  background: #181820 !important;
  border-left: 3px solid var(--theme-red) !important;
  color: #f4f4f5 !important;
}

html[data-theme="dark"] .faq-summary strong {
  color: var(--theme-red) !important;
}

html[data-theme="dark"] .faq-deepdive,
html[data-theme="dark"] .faq-deepdive p {
  color: #d4d4d8 !important;
}

html[data-theme="dark"] .faq-deepdive strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .faq-deepdive a {
  color: var(--theme-red) !important;
}

html[data-theme="dark"] .faq-deepdive a:hover {
  color: var(--accent-light) !important;
}

html[data-theme="dark"] .geo-eeat-footnote,
html[data-theme="dark"] .geo-eeat-footnote small {
  color: #71717a !important;
}

/* --------------------------------------------------------------------------
   9. FORMS, INPUTS, TABLES & CONTAINERS
   -------------------------------------------------------------------------- */

.form-control {
  background-color: var(--theme-bg-input) !important;
  color: var(--theme-text-primary) !important;
  border: 1px solid var(--theme-border-medium) !important;
  border-radius: var(--theme-radius-sm) !important;
  box-shadow: none !important;
  height: 42px !important;
  line-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  transition: var(--theme-transition);
}

.form-control:focus {
  border-color: var(--theme-gold) !important;
  box-shadow: 0 0 0 3px var(--theme-gold-bg) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--theme-text-muted);
}

label {
  color: var(--theme-text-primary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.control-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--theme-text-primary) !important;
  text-align: left;
}

/* --------------------------------------------------------------------------
   BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumb {
  background: transparent !important;
  padding: 12px 0 16px !important;
  margin: 0 0 16px 0 !important;
  border: none !important;
  border-bottom: none !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-wrap: wrap !important;
  font-size: 11.5px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  width: 100% !important;
}

.breadcrumb>li {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--theme-text-muted) !important;
}

.breadcrumb>li+li:before {
  content: '›' !important;
  padding: 0 8px !important;
  color: var(--theme-text-muted) !important;
  font-size: 13px !important;
}

.breadcrumb>li a {
  color: var(--theme-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.breadcrumb>li a:hover {
  color: var(--theme-red) !important;
}

.breadcrumb>li:last-child a,
.breadcrumb>li:last-child {
  color: var(--theme-text-primary) !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   TABLES & UNIVERSAL CELLS (LIGHT & DARK THEMES)
   -------------------------------------------------------------------------- */
table,
.table {
  color: var(--theme-text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table>thead>tr>th,
table>thead>tr>td,
table>tbody>tr>th,
table>tbody>tr>td,
table>tfoot>tr>th,
table>tfoot>tr>td,
.table>thead>tr>th,
.table>thead>tr>td,
.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td,
.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>tfoot>tr>td,
td,
th {
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border-subtle) !important;
}

table a,
.table a,
td a,
th a {
  color: var(--theme-text-primary) !important;
}

table a:hover,
.table a:hover,
td a:hover,
th a:hover {
  color: var(--theme-red) !important;
}

table strong,
.table strong,
table b,
.table b,
td strong,
td b,
th strong,
th b {
  color: var(--theme-text-primary) !important;
}

.table-bordered {
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  background: var(--theme-bg-surface);
  overflow: hidden;
}

.table-bordered>thead>tr>th,
.table-bordered>thead>tr>td {
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  color: var(--theme-text-primary) !important;
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 12px 14px !important;
}

.table-bordered>tbody>tr>td {
  border: 1px solid var(--theme-border-subtle) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: var(--theme-bg-elevated) !important;
}

/* Light Theme Explicit Dark Text & Borders */
html[data-theme="light"] table,
html[data-theme="light"] .table,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] .table>thead>tr>th,
html[data-theme="light"] .table>thead>tr>td,
html[data-theme="light"] .table>tbody>tr>th,
html[data-theme="light"] .table>tbody>tr>td,
html[data-theme="light"] .table>tfoot>tr>th,
html[data-theme="light"] .table>tfoot>tr>td,
html[data-theme="light"] .table-bordered>thead>tr>th,
html[data-theme="light"] .table-bordered>thead>tr>td,
html[data-theme="light"] .table-bordered>tbody>tr>th,
html[data-theme="light"] .table-bordered>tbody>tr>td,
html[data-theme="light"] .table-bordered>tfoot>tr>th,
html[data-theme="light"] .table-bordered>tfoot>tr>td {
  color: var(--theme-text-primary) !important;
}

html[data-theme="light"] .table-bordered {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .table-bordered>thead>tr>th,
html[data-theme="light"] .table-bordered>thead>tr>td {
  background: #f7f7f9 !important;
  color: var(--theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .table-bordered>tbody>tr>td,
html[data-theme="light"] .table-bordered>tfoot>tr>td {
  background: #ffffff !important;
  color: var(--theme-text-primary) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #fbfbfd !important;
}

html[data-theme="light"] .table a,
html[data-theme="light"] .table strong,
html[data-theme="light"] .table b,
html[data-theme="light"] td strong,
html[data-theme="light"] td b {
  color: var(--theme-text-primary) !important;
}

/* Dark Theme Explicit Crisp White Text & Borders */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .table>thead>tr>th,
html[data-theme="dark"] .table>thead>tr>td,
html[data-theme="dark"] .table>tbody>tr>th,
html[data-theme="dark"] .table>tbody>tr>td,
html[data-theme="dark"] .table>tfoot>tr>th,
html[data-theme="dark"] .table>tfoot>tr>td,
html[data-theme="dark"] .table-bordered>thead>tr>th,
html[data-theme="dark"] .table-bordered>thead>tr>td,
html[data-theme="dark"] .table-bordered>tbody>tr>th,
html[data-theme="dark"] .table-bordered>tbody>tr>td,
html[data-theme="dark"] .table-bordered>tfoot>tr>th,
html[data-theme="dark"] .table-bordered>tfoot>tr>td {
  color: #ffffff !important;
}

html[data-theme="dark"] .table-bordered {
  background: #121216 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .table-bordered>thead>tr>th,
html[data-theme="dark"] .table-bordered>thead>tr>td {
  background: #181820 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .table-bordered>tbody>tr>td,
html[data-theme="dark"] .table-bordered>tfoot>tr>td {
  background: #121216 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #181820 !important;
}

html[data-theme="dark"] .table a,
html[data-theme="dark"] .table strong,
html[data-theme="dark"] .table b,
html[data-theme="dark"] td strong,
html[data-theme="dark"] td b {
  color: #ffffff !important;
}

html[data-theme="dark"] .table a:hover,
html[data-theme="light"] .table a:hover {
  color: var(--accent-color, #c52222) !important;
}

/* --------------------------------------------------------------------------
   CHECKOUT & SHOPPING CART (#checkout-cart)
   -------------------------------------------------------------------------- */
#checkout-cart {
  padding-top: 15px;
  padding-bottom: 50px;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#checkout-cart #content,
#checkout-cart form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
}

#checkout-cart .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  background: var(--theme-bg-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 24px !important;
}

#checkout-cart table.table-bordered {
  margin-bottom: 0 !important;
  border: none !important;
  width: 100% !important;
}

#checkout-cart table.table-bordered>thead>tr>td {
  padding: 14px 16px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  vertical-align: middle !important;
  background: var(--theme-bg-surface) !important;
}

#checkout-cart table.table-bordered>tbody>tr>td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  font-size: 13.5px !important;
  background: var(--theme-bg-surface) !important;
}

#checkout-cart table.table-bordered>tbody>tr:last-child>td {
  border-bottom: none !important;
}

/* Product thumbnail */
#checkout-cart .img-thumbnail {
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-sm) !important;
  padding: 4px !important;
  max-width: 75px !important;
  height: auto !important;
}

/* Cart Table Columns */
#checkout-cart .cart-col-action {
  width: 48px !important;
  min-width: 44px !important;
  max-width: 54px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 12px 6px !important;
}

#checkout-cart .cart-col-image {
  width: 78px !important;
  min-width: 68px !important;
  max-width: 88px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 10px 8px !important;
}

#checkout-cart .cart-col-name {
  vertical-align: middle !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

#checkout-cart .cart-col-model {
  vertical-align: middle !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--theme-text-muted, #71717a) !important;
}

#checkout-cart .cart-col-price {
  vertical-align: middle !important;
  padding: 12px 14px !important;
  text-align: right !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  color: var(--theme-text-muted, #71717a) !important;
}

#checkout-cart .cart-col-total {
  vertical-align: middle !important;
  padding: 12px 16px !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  color: var(--theme-text-primary, #18181b) !important;
}

/* Action Button Style (Delete / Remove Item) */
.btn-cart-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  cursor: pointer !important;
  border: 1px solid var(--accent-border, rgba(197, 34, 34, 0.32)) !important;
  background: var(--accent-bg, rgba(197, 34, 34, 0.10)) !important;
  color: var(--accent-color, #c52222) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-cart-remove:hover {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: var(--accent-shadow-md) !important;
}

.btn-cart-remove:active {
  transform: scale(0.94) !important;
}

html[data-theme="dark"] .btn-cart-remove,
:root:not([data-theme="light"]) .btn-cart-remove {
  background: var(--accent-bg-medium, rgba(197, 34, 34, 0.16)) !important;
  border-color: var(--accent-border, rgba(197, 34, 34, 0.32)) !important;
  color: var(--accent-light, #e57373) !important;
}

html[data-theme="dark"] .btn-cart-remove:hover,
:root:not([data-theme="light"]) .btn-cart-remove:hover {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
  box-shadow: var(--accent-shadow-md) !important;
}

/* Mini Cart Dropdown Action Button */
.btn-mini-cart-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  cursor: pointer !important;
  border: 1px solid var(--accent-border, rgba(197, 34, 34, 0.32)) !important;
  background: var(--accent-bg, rgba(197, 34, 34, 0.10)) !important;
  color: var(--accent-color, #c52222) !important;
  transition: all 0.2s ease !important;
}

.btn-mini-cart-remove:hover {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

html[data-theme="dark"] .btn-mini-cart-remove,
:root:not([data-theme="light"]) .btn-mini-cart-remove {
  background: var(--accent-bg-medium, rgba(197, 34, 34, 0.16)) !important;
  border-color: var(--accent-border, rgba(197, 34, 34, 0.32)) !important;
  color: var(--accent-light, #e57373) !important;
}

html[data-theme="dark"] .btn-mini-cart-remove:hover,
:root:not([data-theme="light"]) .btn-mini-cart-remove:hover {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
}

#cart .cart-mini-action {
  width: 42px !important;
  padding: 12px 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

#cart .cart-mini-thumb {
  width: 82px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

#cart .cart-mini-thumb .img-thumbnail {
  width: 68px !important;
  max-width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  padding: 3px !important;
}

/* In-Page Cart Alerts — never fixed, full-width elegant banner */
#checkout-cart>.alert,
#checkout-cart .alert.alert-dismissible,
#checkout-cart .in-page-cart-alert,
.container>.alert.in-page-cart-alert {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 22px 0 !important;
  padding: 13px 44px 13px 18px !important;
  border-radius: var(--theme-radius-md, 8px) !important;
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
  animation: none !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

#checkout-cart>.alert i.fa,
#checkout-cart .in-page-cart-alert i.fa {
  font-size: 18px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

#checkout-cart>.alert span,
#checkout-cart .in-page-cart-alert span {
  flex: 1 1 auto !important;
}

#checkout-cart>.alert .close,
#checkout-cart .in-page-cart-alert .close {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Stock warning inline marker */
.cart-stock-warning {
  color: #ef4444 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  margin-left: 4px !important;
}

/* Responsive Table Behavior: Desktop / Tablet / Mobile */
@media (max-width: 991px) {
  #checkout-cart .cart-col-action {
    width: 44px !important;
    padding: 10px 4px !important;
  }

  #checkout-cart .cart-col-image {
    width: 68px !important;
    padding: 8px 6px !important;
  }
}

@media (max-width: 767px) {

  /* Ensure Action column is always visible & sticky to the left */
  #checkout-cart .cart-table-responsive {
    border-radius: 8px !important;
    overflow-x: auto !important;
  }

  #checkout-cart .cart-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  #checkout-cart .cart-col-action {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: var(--theme-bg-surface, #ffffff) !important;
    width: 40px !important;
    min-width: 38px !important;
    max-width: 44px !important;
    padding: 8px 4px !important;
    box-shadow: 1px 0 0 var(--theme-border-subtle) !important;
  }

  #checkout-cart .cart-col-image {
    width: 54px !important;
    min-width: 48px !important;
    max-width: 60px !important;
    padding: 8px 4px !important;
  }

  #checkout-cart .cart-col-image .img-thumbnail {
    max-width: 46px !important;
    max-height: 60px !important;
    padding: 2px !important;
  }

  #checkout-cart .cart-col-name {
    padding: 8px 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Secondary columns hidden on mobile for optimal fit */
  #checkout-cart .cart-col-model,
  #checkout-cart .cart-col-price {
    display: none !important;
  }

  #checkout-cart .cart-col-total {
    width: 74px !important;
    padding: 8px 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .btn-cart-remove {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }

  #checkout-cart>.alert,
  #checkout-cart .in-page-cart-alert {
    padding: 10px 36px 10px 12px !important;
    font-size: 12px !important;
    margin: 10px 0 16px 0 !important;
  }

  #checkout-cart>.alert i.fa,
  #checkout-cart .in-page-cart-alert i.fa {
    font-size: 15px !important;
    margin-right: 8px !important;
  }
}

/* Totals Summary Box (Left-Aligned) */
#checkout-cart .cart-totals-row {
  margin-top: 4px !important;
}

#checkout-cart .cart-totals-table,
#checkout-cart .col-sm-4.col-sm-offset-8 table {
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  background: var(--theme-bg-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  overflow: hidden !important;
  margin-top: 6px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

#checkout-cart .cart-totals-table td,
#checkout-cart .col-sm-4.col-sm-offset-8 table td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
}

#checkout-cart .cart-totals-table tr:last-child td,
#checkout-cart .col-sm-4.col-sm-offset-8 table tr:last-child td {
  border-bottom: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--theme-red) !important;
}

#checkout-cart .cart-totals-table tr:last-child td strong,
#checkout-cart .col-sm-4.col-sm-offset-8 table tr:last-child td strong {
  color: var(--theme-text-primary) !important;
}

/* Action Buttons row — Left-Aligned on Desktop & Mobile */
#checkout-cart .buttons,
#checkout-cart .buttons.cart-action-buttons {
  margin-top: 16px !important;
  padding-top: 12px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
}

#checkout-cart .buttons .cart-buttons-left,
#checkout-cart .buttons .pull-left,
#checkout-cart .buttons .pull-right {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

#checkout-cart .buttons a.btn::before {
  display: none !important;
  content: none !important;
}

#checkout-cart .buttons .btn-cart-checkout,
#checkout-cart .buttons .btn-cart-continue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
}

@media (max-width: 767px) {

  #checkout-cart .buttons,
  #checkout-cart .buttons.cart-action-buttons,
  #checkout-cart .buttons .cart-buttons-left {
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #checkout-cart .buttons .btn-cart-checkout,
  #checkout-cart .buttons .btn-cart-continue {
    padding: 10px 16px !important;
    font-size: 12px !important;
    flex: 0 1 auto !important;
  }
}

/* Well / Box container */
.well {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  padding: 24px;
}

.panel-default {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
}

.panel-heading,
.panel-default>.panel-heading {
  background-image: none !important;
  background-color: var(--theme-bg-elevated) !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  color: var(--theme-text-primary) !important;
  font-weight: 600;
  text-shadow: none !important;
}

.panel-heading a,
.panel-title a {
  color: var(--theme-text-primary) !important;
  text-decoration: none !important;
}

.panel-heading a:hover,
.panel-title a:hover {
  color: var(--theme-red) !important;
}

.panel-body {
  background-color: var(--theme-bg-surface) !important;
  color: var(--theme-text-primary) !important;
}

/* Alerts */
.alert-danger {
  background: var(--theme-vermilion-bg) !important;
  border: 1px solid var(--theme-vermilion) !important;
  color: var(--theme-vermilion) !important;
  border-radius: var(--theme-radius-sm) !important;
}

.alert-success {
  background: rgba(46, 125, 50, 0.12) !important;
  border: 1px solid #2e7d32 !important;
  color: #81c784 !important;
  border-radius: var(--theme-radius-sm) !important;
}

/* Input groups, Sort/Limit & View Switcher */
.input-group .input-group-addon {
  background-color: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-medium) !important;
  color: var(--theme-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

#list-view,
#grid-view {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-medium) !important;
  color: var(--theme-text-secondary) !important;
  border-radius: var(--theme-radius-sm) !important;
  padding: 6px 12px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--theme-transition) !important;
  margin-right: 4px;
}

#list-view.active,
#grid-view.active,
#list-view:hover,
#grid-view:hover {
  background: var(--theme-gold-bg) !important;
  border-color: var(--theme-gold) !important;
  color: var(--theme-gold) !important;
}

/* Sidebar List Group / Category Filters */
.list-group {
  border-radius: var(--theme-radius-md);
  overflow: hidden;
  border: 1px solid var(--theme-border-subtle);
  background: var(--theme-bg-surface);
  box-shadow: var(--theme-shadow-sm);
  margin-bottom: 24px;
}

.list-group-item,
.list-group a.list-group-item,
.list-group a {
  background-color: var(--theme-bg-surface) !important;
  color: var(--theme-text-primary) !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--theme-transition) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.list-group-item:last-child,
.list-group a.list-group-item:last-child,
.list-group a:last-child {
  border-bottom: none !important;
}

.list-group-item:hover,
.list-group a.list-group-item:hover,
.list-group a:hover {
  background-color: var(--theme-bg-elevated) !important;
  color: var(--theme-gold) !important;
  padding-left: 22px !important;
}

.list-group-item.active,
.list-group a.list-group-item.active,
.list-group a.active,
.list-group-item.active:hover,
.list-group a.list-group-item.active:hover,
.list-group a.active:hover {
  background-color: var(--theme-gold-bg) !important;
  color: var(--theme-gold) !important;
  border-left: 3px solid var(--theme-gold) !important;
  font-weight: 700 !important;
}

/* Pagination Styling */
.pagination {
  display: inline-flex;
  gap: 4px;
  border-radius: var(--theme-radius-sm);
  margin: 15px 0;
  padding: 0;
}

.pagination>li>a,
.pagination>li>span {
  background: var(--theme-bg-surface) !important;
  color: var(--theme-text-secondary) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-xs) !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: var(--theme-transition) !important;
}

.pagination>li>a:hover,
.pagination>li>a:focus {
  background: var(--theme-bg-elevated) !important;
  color: var(--theme-gold) !important;
  border-color: var(--theme-gold) !important;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover {
  background: var(--theme-gold) !important;
  color: var(--theme-text-inverse) !important;
  border-color: var(--theme-gold) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE LUXURY FOOTER SYSTEM
   Desktop: Balanced 4-column prestige gallery layout.
   Mobile: Interactive tactile accordion drawers, quick chips, trust strip, back to top.
   -------------------------------------------------------------------------- */

footer {
  background: var(--theme-bg-body) !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  padding: 50px 0 35px !important;
  color: var(--theme-text-muted);
  transition: var(--theme-transition);
  position: relative;
}

/* Brand Crest Badge */
.footer-brand-badge {
  text-align: center;
  margin-bottom: 35px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

.footer-brand-badge .brand-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 6px;
}

.footer-brand-badge .crest-line {
  height: 1px;
  width: 44px;
  background: linear-gradient(to right, transparent, var(--theme-border-medium));
}

.footer-brand-badge .crest-line:last-child {
  background: linear-gradient(to left, transparent, var(--theme-border-medium));
}

.footer-brand-badge .crest-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--theme-text-primary);
}

.footer-brand-badge .brand-tagline {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--theme-text-muted);
  margin: 0;
}

/* Mobile Quick Chips Bar */
.footer-mobile-quickbar {
  display: none;
}

@media (max-width: 767px) {
  .footer-mobile-quickbar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .footer-mobile-quickbar .quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 9999px;
    background: var(--theme-bg-surface);
    border: 1px solid var(--theme-border-medium);
    color: var(--theme-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: all 0.22s ease;
  }

  .footer-mobile-quickbar .quick-chip i {
    color: var(--theme-red);
    font-size: 12px;
  }

  .footer-mobile-quickbar .quick-chip:hover,
  .footer-mobile-quickbar .quick-chip:active {
    border-color: var(--theme-red);
    color: var(--theme-text-primary);
    background: var(--theme-bg-elevated);
  }
}

/* Footer Columns System */
.footer-row {
  margin: 0 -15px;
}

/* Desktop & Tablet (>= 768px) */
@media (min-width: 768px) {
  .footer-col {
    text-align: left !important;
  }

  .footer-heading {
    margin-bottom: 16px;
    pointer-events: none;
    cursor: default;
  }

  .footer-heading h5 {
    color: var(--theme-text-primary) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    position: relative;
    display: inline-block;
  }

  .footer-heading h5::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--theme-gold);
    margin-top: 6px;
  }

  .footer-chevron {
    display: none !important;
  }

  .footer-collapse {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links li {
    margin-bottom: 8px;
  }

  .footer-links li a {
    color: var(--theme-text-secondary) !important;
    font-size: 12px;
    transition: var(--theme-transition);
    display: inline-block;
    text-decoration: none;
  }

  .footer-links li a:hover {
    color: var(--theme-gold) !important;
    padding-left: 3px;
  }
}

/* Mobile (< 768px): Luxury Accordion Drawers */
@media (max-width: 767px) {
  footer {
    padding: 35px 0 25px !important;
  }

  .footer-row {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }

  .footer-col {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--theme-border-subtle) !important;
  }

  .footer-col:first-child {
    border-top: 1px solid var(--theme-border-subtle) !important;
  }

  .footer-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 8px !important;
    cursor: pointer !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
  }

  .footer-heading:active {
    background: var(--theme-bg-surface);
  }

  .footer-heading h5 {
    color: var(--theme-text-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
  }

  .footer-heading h5::after {
    display: none !important;
  }

  .footer-chevron {
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--theme-bg-surface) !important;
    border: 1px solid var(--theme-border-subtle) !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--theme-text-muted) !important;
    font-size: 11px !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease, border-color 0.2s ease !important;
  }

  .footer-col.is-open .footer-chevron {
    transform: rotate(180deg) !important;
    color: var(--theme-red) !important;
    border-color: var(--theme-red) !important;
  }

  .footer-collapse {
    display: none;
    padding: 4px 6px 16px 6px !important;
  }

  .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-links li {
    margin-bottom: 5px !important;
  }

  .footer-links li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--theme-text-secondary) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    padding: 10px 14px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    background: var(--theme-bg-surface) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
  }

  .footer-links li a i.fa-angle-right {
    color: var(--theme-red);
    font-size: 13px;
  }

  .footer-links li a:active,
  .footer-links li a:hover {
    color: var(--theme-text-primary) !important;
    background: var(--theme-bg-elevated) !important;
    border-color: var(--accent-border-hover, var(--accent-color)) !important;
    padding-left: 18px !important;
  }
}

/* Trust & Reassurance Strip */
.footer-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 35px 0 20px;
  padding: 13px 22px;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 9999px;
}

@media (max-width: 767px) {
  .footer-trust-strip {
    border-radius: 12px;
    gap: 10px;
    padding: 14px;
    justify-content: space-around;
    margin: 28px 0 18px;
  }
}

.footer-trust-strip .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text-secondary);
  letter-spacing: 0.3px;
}

.footer-trust-strip .trust-item i {
  color: var(--theme-red);
  font-size: 12px;
}

.footer-trust-strip .trust-divider {
  color: var(--theme-border-medium);
}

@media (max-width: 767px) {
  .footer-trust-strip .trust-divider {
    display: none;
  }
}

/* Back to Top Button */
.footer-back-to-top {
  text-align: center;
  margin: 22px 0 15px;
}

.footer-back-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1px solid var(--theme-border-subtle);
  background: var(--theme-bg-surface);
  transition: all 0.25s ease;
}

.footer-back-to-top a:hover {
  color: var(--accent-color, var(--theme-text-primary));
  border-color: var(--accent-border-hover, var(--accent-color));
  transform: translateY(-2px);
  box-shadow: var(--accent-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.2));
}

.footer-back-to-top a i {
  color: var(--theme-red);
  font-size: 10px;
}

/* Footer Bottom Divider & Copyright */
footer hr {
  border: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  height: 1px !important;
  background-color: transparent !important;
  background-image: var(--theme-hr-gradient, linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0))) !important;
  margin: 20px 0 16px !important;
  opacity: 1 !important;
}

html[data-theme="dark"] footer hr {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0)) !important;
}

html[data-theme="light"] footer hr {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0)) !important;
}

.footer-bottom {
  text-align: center;
  font-size: 11.5px;
  color: var(--theme-text-muted);
  line-height: 1.7;
}

.footer-bottom p {
  margin: 0;
  color: var(--theme-text-muted);
}

.footer-bottom a {
  color: var(--theme-text-secondary);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--theme-gold) !important;
}

/* --------------------------------------------------------------------------
   11. EMPTY STATES & ERROR PAGES (#error-not-found)
   -------------------------------------------------------------------------- */

#error-not-found {
  padding: 30px 15px 50px;
}

#error-not-found #content {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  padding: 40px 30px;
  box-shadow: var(--theme-shadow-card);
  text-align: center;
  max-width: 580px;
  margin: 20px auto 30px;
  transition: var(--theme-transition);
}

#error-not-found #content h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}

#error-not-found #content p {
  font-size: 13.5px;
  color: var(--theme-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

#error-not-found .buttons {
  border-top: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

#error-not-found .buttons .pull-right {
  margin: 0 auto;
  float: none !important;
}

/* --------------------------------------------------------------------------
   12. MICRO-ANIMATIONS (REFINED & MINIMALIST)
   -------------------------------------------------------------------------- */

#content {
  animation: fadeInMinimal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInMinimal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.dropdown-menu {
  animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  border-radius: 10px !important;
  padding: 6px !important;
  background-color: var(--theme-bg-surface, #141418) !important;
  border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.12)) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu>li>a {
  color: var(--theme-text-muted, #a1a1aa) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  transition: all 0.18s ease !important;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-text-main, #ffffff) !important;
}

/* Light Theme Universal Dropdown */
html[data-theme="light"] .dropdown-menu {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .dropdown-menu>li>a {
  color: #1f2024 !important;
}

html[data-theme="light"] .dropdown-menu>li>a:hover,
html[data-theme="light"] .dropdown-menu>li>a:focus {
  background-color: #f4f4f7 !important;
  color: var(--accent-color, #c52222) !important;
}

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

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

/* --------------------------------------------------------------------------
   13. PRODUCT DETAILS PAGE (.product-product)
   -------------------------------------------------------------------------- */

.product-product #content h1 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}

.product-product .thumbnails {
  list-style: none;
  padding: 0;
}

.product-product .thumbnail {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  transition: var(--theme-transition);
  padding: 10px;
}

.product-product .thumbnail:hover {
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-md);
}

.nav-tabs {
  border-bottom: 2px solid var(--theme-border-subtle) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 6px !important;
}

.nav-tabs>li>a {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--theme-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.3px !important;
  padding: 12px 20px !important;
  margin-bottom: -2px !important;
  border-radius: var(--theme-radius-sm) var(--theme-radius-sm) 0 0 !important;
  transition: var(--theme-transition) !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: var(--theme-gold) !important;
  background: var(--theme-bg-surface) !important;
  border: none !important;
  border-bottom: 2px solid var(--theme-gold) !important;
  font-weight: 700 !important;
}

.nav-tabs>li>a:hover {
  color: var(--theme-gold) !important;
}

.tab-content {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-top: none !important;
  padding: 26px 30px !important;
  border-radius: 0 0 var(--theme-radius-md) var(--theme-radius-md) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  transition: var(--theme-transition) !important;
}

/* Tab Description & Panes: High contrast, museum legibility */
#tab-description,
.tab-pane {
  color: var(--theme-text-primary) !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.15px !important;
}

#tab-description p,
.tab-pane p {
  color: var(--theme-text-primary) !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  margin: 0 0 14px 0 !important;
}

#tab-description p:last-child,
.tab-pane p:last-child {
  margin-bottom: 0 !important;
}

#tab-description span,
#tab-description div,
#tab-description li,
#tab-description table,
#tab-description td,
#tab-description th {
  color: var(--theme-text-primary) !important;
}

#tab-description strong,
#tab-description b,
.tab-pane strong,
.tab-pane b {
  color: var(--theme-text-primary) !important;
  font-weight: 700 !important;
}

#tab-description em,
#tab-description i:not(.fa),
.tab-pane em {
  color: var(--theme-text-secondary) !important;
  font-style: italic !important;
}

#tab-description a,
.tab-pane a {
  color: var(--theme-gold) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: var(--theme-transition) !important;
}

#tab-description a:hover,
.tab-pane a:hover {
  color: var(--theme-gold-light) !important;
}

#tab-description ul,
#tab-description ol {
  padding-left: 24px !important;
  margin-bottom: 16px !important;
  color: var(--theme-text-primary) !important;
}

#tab-description li {
  margin-bottom: 6px !important;
}

/* Specifications Table */
#tab-specification table {
  background: transparent !important;
  border-color: var(--theme-border-subtle) !important;
  margin-bottom: 0 !important;
}

#tab-specification table thead td {
  background: var(--theme-bg-elevated) !important;
  color: var(--theme-gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  border-color: var(--theme-border-subtle) !important;
}

#tab-specification table tbody td {
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border-subtle) !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
}

/* --------------------------------------------------------------------------
   13. PRODUCT TAGS (CHIPS DESIGN) & SOCIAL MEDIA ICONS
   -------------------------------------------------------------------------- */

/* Product Tags as Chips */
.product-tags-box,
#content>p:has(a[href*="tag="]),
.product-info p:has(a[href*="tag="]),
p:has(> a[href*="tag="]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 28px 0 16px !important;
  padding: 14px 18px !important;
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  font-size: 12px !important;
  color: var(--theme-text-muted) !important;
  transition: var(--theme-transition) !important;
}

.product-tags-box:hover {
  border-color: var(--theme-border-medium) !important;
}

.product-tags-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  color: var(--theme-text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-right: 6px !important;
}

.product-tags-label i,
.product-tags-label .fa {
  color: var(--theme-red) !important;
  font-size: 11px !important;
}

.product-tags-chips {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Individual Tag Chip Capsule */
.product-tag-chip,
.product-tags-box a,
p:has(a[href*="tag="])>a[href*="tag="] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 14px !important;
  border-radius: var(--theme-radius-pill, 9999px) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.35px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: var(--theme-bg-elevated) !important;
  color: var(--theme-text-primary) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease !important;
  cursor: pointer !important;
}

.product-tag-chip:before,
.product-tags-box a:before,
p:has(a[href*="tag="])>a[href*="tag="]:before {
  content: '#' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--theme-red) !important;
  opacity: 0.9 !important;
  margin-right: 1px !important;
  display: inline-block !important;
}

.product-tag-chip:hover,
.product-tags-box a:hover,
p:has(a[href*="tag="])>a[href*="tag="]:hover {
  background: var(--theme-red) !important;
  border-color: var(--theme-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--accent-shadow-md) !important;
  text-decoration: none !important;
}

.product-tag-chip:hover:before,
.product-tags-box a:hover:before,
p:has(a[href*="tag="])>a[href*="tag="]:hover:before {
  color: #ffffff !important;
  opacity: 1 !important;
}

.product-tag-chip:active,
.product-tags-box a:active,
p:has(a[href*="tag="])>a[href*="tag="]:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Social Media Follow Icons (Module 37) — Luxury Gallery Buttons */
.product-social-box,
div:has(> .facebook),
div:has(> span.facebook) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  margin: 10px auto 20px !important;
}

.facebook,
.instagram {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 6px !important;
}

.facebook a,
.instagram a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-medium) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s ease, border-color 0.22s ease !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.facebook a:hover,
.instagram a:hover {
  transform: translateY(-3px) scale(1.08) !important;
  background: var(--theme-red) !important;
  border-color: var(--theme-red) !important;
  box-shadow: var(--accent-shadow-lg) !important;
}

.facebook a:active,
.instagram a:active {
  transform: translateY(0) scale(0.98) !important;
}

.facebook img,
.instagram img,
img[src*="social_icons"] {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
  transition: filter 0.22s ease, opacity 0.22s ease, transform 0.22s ease !important;
}

.facebook i,
.instagram i,
.facebook .fa,
.instagram .fa {
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--theme-text-primary) !important;
  transition: color 0.22s ease, transform 0.22s ease !important;
}

/* Light Theme: Crisp Dark Icon on White Luxury Button */
html[data-theme="light"] .facebook a,
html[data-theme="light"] .instagram a {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .facebook img,
html[data-theme="light"] .instagram img,
html[data-theme="light"] img[src*="social_icons"] {
  filter: brightness(0) !important;
  opacity: 0.85 !important;
}

/* Dark Theme: Crisp Pure White Icon on Obsidian Button */
html[data-theme="dark"] .facebook a,
html[data-theme="dark"] .instagram a {
  background: var(--theme-bg-surface, #121216) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .facebook img,
html[data-theme="dark"] .instagram img,
html[data-theme="dark"] img[src*="social_icons"] {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

/* Hover in both themes: Icon turns pure white on active accent color button */
html[data-theme="light"] .facebook a:hover,
html[data-theme="light"] .instagram a:hover,
html[data-theme="dark"] .facebook a:hover,
html[data-theme="dark"] .instagram a:hover {
  transform: translateY(-3px) scale(1.08) !important;
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  box-shadow: var(--accent-shadow-lg) !important;
}

.facebook a:hover img,
.instagram a:hover img,
a:hover img[src*="social_icons"],
html[data-theme="light"] .facebook a:hover img,
html[data-theme="light"] .instagram a:hover img,
html[data-theme="light"] a:hover img[src*="social_icons"],
html[data-theme="dark"] .facebook a:hover img,
html[data-theme="dark"] .instagram a:hover img,
html[data-theme="dark"] a:hover img[src*="social_icons"] {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

.facebook a:hover i,
.instagram a:hover i,
.facebook a:hover .fa,
.instagram a:hover .fa {
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   14. ACCOUNT, FORMS & CLIENT DASHBOARD
   -------------------------------------------------------------------------- */

/* Universal Form Legends (Centered & Compact) */
legend {
  color: var(--theme-text-primary) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  padding-bottom: 6px !important;
  margin: 10px 0 10px !important;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

legend::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--theme-red);
  border-radius: 2px;
  flex: 0 0 auto;
}

/* Account Card Container (Register, Forgotten, Edit, Password, Address) — Full Width, Centered & Compact */
.account-card-box,
#account-register #content,
#account-forgotten #content,
#account-edit #content,
#account-password #content,
#account-address #content {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  padding: 20px 26px !important;
  box-shadow: var(--theme-shadow-md);
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin: 6px auto 22px !important;
  position: relative;
  text-align: center;
  box-sizing: border-box !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.32s ease;
}

/* Prevent double card-box padding/border when .account-card-box is nested inside #content */
#account-register #content > .account-card-box,
#account-forgotten #content > .account-card-box,
#account-edit #content > .account-card-box,
#account-password #content > .account-card-box,
#account-address #content > .account-card-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.account-card-box:hover,
#account-register #content:hover,
#account-forgotten #content:hover,
#account-edit #content:hover,
#account-password #content:hover,
#account-address #content:hover {
  border-color: var(--accent-border-hover, var(--accent-color));
}

@media (max-width: 767px) {

  .account-card-box,
  #account-register #content,
  #account-forgotten #content,
  #account-edit #content,
  #account-password #content,
  #account-address #content {
    padding: 14px 12px !important;
    margin: 4px auto 16px !important;
    border-radius: var(--theme-radius-md);
  }
}

.account-card-header {
  margin-bottom: 12px !important;
  text-align: center !important;
}

.account-card-title,
#account-register #content h1,
#account-forgotten #content h1,
#account-edit #content h1,
#account-password #content h1,
#account-address #content h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
  color: var(--theme-text-primary) !important;
  margin: 0 0 4px 0 !important;
  text-align: center !important;
}

.account-card-desc,
.account-card-header p,
#account-forgotten #content > p {
  font-size: 12.5px;
  color: var(--theme-text-secondary);
  line-height: 1.4;
  margin: 0 auto 8px auto !important;
  text-align: center !important;
}

.account-card-desc a,
.account-card-header p a {
  color: var(--theme-red) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--theme-transition);
}

.account-card-desc a:hover,
.account-card-header p a:hover {
  color: var(--theme-red-light) !important;
}

/* Horizontal Form Polish (standard non-floating rows such as radio groups / newsletter) */
.account-form,
#account-register form,
#account-edit form,
#account-password form,
#account-forgotten form,
#account-address form {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.account-form .form-group:not(.floating-group):not(.customer-group-row),
#account-register .form-group:not(.floating-group):not(.customer-group-row),
#account-login .form-group:not(.floating-group):not(.customer-group-row),
#account-forgotten .form-group:not(.floating-group):not(.customer-group-row),
#account-edit .form-group:not(.floating-group):not(.customer-group-row),
#account-password .form-group:not(.floating-group):not(.customer-group-row),
#account-address .form-group:not(.floating-group):not(.customer-group-row) {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 14px !important;
  text-align: center !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.customer-group-row,
.account-form .form-group[style*="display: none"],
.account-form .form-group[style*="display:none"],
#account-register .form-group[style*="display: none"],
#account-register .form-group[style*="display:none"],
#account-edit .form-group[style*="display: none"],
#account-edit .form-group[style*="display:none"] {
  display: none !important;
}

.account-form .form-group:not(.floating-group) > [class*="col-"],
#account-register .form-group:not(.floating-group) > [class*="col-"],
#account-edit .form-group:not(.floating-group) > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.account-form .form-group:not(.floating-group) .control-label,
#account-register .form-group:not(.floating-group) .control-label,
#account-login .form-group:not(.floating-group) .control-label,
#account-forgotten .form-group:not(.floating-group) .control-label,
#account-edit .form-group:not(.floating-group) .control-label,
#account-password .form-group:not(.floating-group) .control-label,
#account-address .form-group:not(.floating-group) .control-label {
  color: var(--theme-text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  text-align: center !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  float: none !important;
}

.form-group.required .control-label:before {
  content: '* ';
  color: var(--theme-red) !important;
  font-weight: 700;
}

/* ==========================================================================
   14B. PRESTIGE FLOATING LABELS & COMPACT CHECKOUT/ACCOUNT FORMS
   Elimination of duplicate labels + Modern animated floating placeholders
   ========================================================================== */

/* Compact 2-Column Grid for Account Form Fieldsets on Desktop/Tablet */
@media (min-width: 640px) {
  .account-form fieldset:not(.captcha-fieldset),
  #account-register fieldset:not(.captcha-fieldset),
  #account-edit fieldset:not(.captcha-fieldset),
  #account-password fieldset:not(.captcha-fieldset),
  #account-address fieldset:not(.captcha-fieldset) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
    align-items: start !important;
  }

  /* If a fieldset has only a single floating-group (e.g. forgotten password), center it across both columns */
  #account-forgotten fieldset .floating-group,
  .account-form fieldset > .floating-group:only-of-type {
    grid-column: 1 / -1 !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Compact layout for checkout & account forms */
.floating-group,
.account-form .floating-group,
#account-register .floating-group,
#account-login .floating-group,
#account-edit .floating-group,
#account-password .floating-group,
#account-forgotten .floating-group,
#account-address .floating-group,
#collapse-payment-address .form-group:not(.captcha-form-group),
#collapse-shipping-address .form-group:not(.captcha-form-group) {
  position: relative !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  width: 100% !important;
  clear: both !important;
  text-align: left !important;
}

/* Compact fieldset legends in checkout & account forms */
#collapse-payment-address fieldset,
#collapse-shipping-address fieldset,
#collapse-payment-method fieldset,
.account-form fieldset,
#account-register fieldset,
#account-edit fieldset,
#account-password fieldset,
#account-forgotten fieldset,
#account-address fieldset {
  margin-bottom: 10px !important;
  width: 100% !important;
}

#collapse-payment-address legend,
#collapse-shipping-address legend,
#collapse-payment-method legend,
.account-form legend,
#account-register legend,
#account-edit legend,
#account-password legend,
#account-forgotten legend,
#account-address legend {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  margin: 6px 0 8px 0 !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  text-align: center !important;
}

#collapse-payment-address fieldset:first-child legend,
#collapse-shipping-address fieldset:first-child legend,
.account-form fieldset:first-child legend {
  margin-top: 0 !important;
}

/* Base input & select inside floating groups (Compacted to 40px height) */
.floating-group .form-control,
.account-form .floating-group .form-control,
#account-register .floating-group .form-control,
#account-login .floating-group .form-control,
#account-edit .floating-group .form-control,
#account-password .floating-group .form-control,
#account-forgotten .floating-group .form-control,
#account-address .floating-group .form-control,
#collapse-payment-address .form-group:not(.captcha-form-group) .form-control,
#collapse-shipping-address .form-group:not(.captcha-form-group) .form-control {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 14px 12px 2px 12px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-radius: var(--theme-radius-sm, 6px) !important;
  background: var(--theme-bg-input, #14141a) !important;
  border: 1px solid var(--theme-border-medium, rgba(255, 255, 255, 0.12)) !important;
  color: var(--theme-text-primary, #ffffff) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
}

/* Textarea inside floating group */
.floating-group.floating-textarea textarea.form-control {
  height: auto !important;
  min-height: 90px !important;
  max-height: none !important;
  padding: 22px 14px 10px 14px !important;
}

/* Password wrapper inside floating group */
.floating-group .password-toggle-wrap,
#collapse-payment-address .password-toggle-wrap {
  position: relative !important;
  width: 100% !important;
}

.floating-group .password-toggle-wrap .form-control,
#collapse-payment-address .password-toggle-wrap .form-control {
  padding-right: 42px !important;
}

/* Select dropdowns */
.floating-group select.form-control,
.account-form .floating-group select.form-control,
#account-register .floating-group select.form-control,
#account-address .floating-group select.form-control,
#collapse-payment-address select.form-control,
#collapse-shipping-address select.form-control {
  padding-right: 32px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

/* Floating Label Positioning */
.floating-group .control-label,
.account-form .floating-group .control-label,
#account-register .floating-group .control-label,
#account-login .floating-group .control-label,
#account-edit .floating-group .control-label,
#account-password .floating-group .control-label,
#account-forgotten .floating-group .control-label,
#account-address .floating-group .control-label,
#collapse-payment-address .form-group:not(.captcha-form-group) .control-label,
#collapse-shipping-address .form-group:not(.captcha-form-group) .control-label {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  text-align: left !important;
  color: var(--theme-text-muted, #71717a) !important;
  pointer-events: none !important;
  transform-origin: left top !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s ease,
    font-weight 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
  max-width: calc(100% - 28px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  float: none !important;
  width: auto !important;
}

/* Required asterisk in Rouge Urushi */
.floating-group.required .control-label::before,
.account-form .floating-group.required .control-label::before,
#account-register .floating-group.required .control-label::before,
#account-edit .floating-group.required .control-label::before,
#account-password .floating-group.required .control-label::before,
#account-forgotten .floating-group.required .control-label::before,
#account-address .floating-group.required .control-label::before,
#collapse-payment-address .form-group:not(.captcha-form-group).required .control-label::before,
#collapse-shipping-address .form-group:not(.captcha-form-group).required .control-label::before {
  content: '* ';
  color: var(--theme-red, #c52222) !important;
  font-weight: 700 !important;
  margin-right: 2px;
}

/* FLOATING ANIMATION STATES */

/* 0. On Hover: subtle accent border feedback */
.floating-group .form-control:hover:not(:focus),
.account-form .floating-group .form-control:hover:not(:focus),
#account-register .floating-group .form-control:hover:not(:focus),
#account-login .floating-group .form-control:hover:not(:focus),
#account-edit .floating-group .form-control:hover:not(:focus),
#account-password .floating-group .form-control:hover:not(:focus),
#account-forgotten .floating-group .form-control:hover:not(:focus),
#account-address .floating-group .form-control:hover:not(:focus),
#collapse-payment-address .form-group:not(.captcha-form-group) .form-control:hover:not(:focus),
#collapse-shipping-address .form-group:not(.captcha-form-group) .form-control:hover:not(:focus),
html[data-theme="light"] .floating-group .form-control:hover:not(:focus),
html[data-theme="light"] #collapse-payment-address .form-group:not(.captcha-form-group) .form-control:hover:not(:focus),
html[data-theme="light"] #collapse-shipping-address .form-group:not(.captcha-form-group) .form-control:hover:not(:focus) {
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
}

/* 1. On Focus: label floats up and turns brand red */
.floating-group .form-control:focus~.control-label,
.floating-group:has(.form-control:focus) .control-label,
.floating-group.is-focused .control-label,
.account-form .floating-group .form-control:focus~.control-label,
.account-form .floating-group:has(.form-control:focus) .control-label,
.account-form .floating-group.is-focused .control-label,
#account-register .floating-group .form-control:focus~.control-label,
#account-register .floating-group:has(.form-control:focus) .control-label,
#account-register .floating-group.is-focused .control-label,
#account-login .floating-group .form-control:focus~.control-label,
#account-login .floating-group:has(.form-control:focus) .control-label,
#account-login .floating-group.is-focused .control-label,
#account-edit .floating-group .form-control:focus~.control-label,
#account-edit .floating-group:has(.form-control:focus) .control-label,
#account-edit .floating-group.is-focused .control-label,
#account-password .floating-group .form-control:focus~.control-label,
#account-password .floating-group:has(.form-control:focus) .control-label,
#account-password .floating-group.is-focused .control-label,
#account-forgotten .floating-group .form-control:focus~.control-label,
#account-forgotten .floating-group:has(.form-control:focus) .control-label,
#account-forgotten .floating-group.is-focused .control-label,
#account-address .floating-group .form-control:focus~.control-label,
#account-address .floating-group:has(.form-control:focus) .control-label,
#account-address .floating-group.is-focused .control-label,
#collapse-payment-address .form-group:not(.captcha-form-group):has(.form-control:focus) .control-label,
#collapse-shipping-address .form-group:not(.captcha-form-group):has(.form-control:focus) .control-label {
  transform: translateY(-9px) scale(0.74) !important;
  color: var(--theme-red, #c52222) !important;
  font-weight: 600 !important;
}

.floating-group .form-control:focus,
.account-form .floating-group .form-control:focus,
#account-register .floating-group .form-control:focus,
#account-login .floating-group .form-control:focus,
#account-edit .floating-group .form-control:focus,
#account-password .floating-group .form-control:focus,
#account-forgotten .floating-group .form-control:focus,
#account-address .floating-group .form-control:focus,
#collapse-payment-address .form-group:not(.captcha-form-group) .form-control:focus,
#collapse-shipping-address .form-group:not(.captcha-form-group) .form-control:focus {
  border-color: var(--theme-red, #c52222) !important;
  box-shadow: 0 0 0 3px var(--theme-red-bg, rgba(197, 34, 34, 0.14)) !important;
  background-color: var(--theme-bg-surface) !important;
}

/* 2. When Filled (not placeholder-shown or filled or autofill) */
.floating-group .form-control:not(:placeholder-shown)~.control-label,
.floating-group .form-control:-webkit-autofill~.control-label,
.floating-group.is-filled .control-label,
.floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
.account-form .floating-group .form-control:not(:placeholder-shown)~.control-label,
.account-form .floating-group .form-control:-webkit-autofill~.control-label,
.account-form .floating-group.is-filled .control-label,
.account-form .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-register .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-register .floating-group .form-control:-webkit-autofill~.control-label,
#account-register .floating-group.is-filled .control-label,
#account-register .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-login .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-login .floating-group.is-filled .control-label,
#account-login .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-edit .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-edit .floating-group.is-filled .control-label,
#account-edit .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-password .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-password .floating-group.is-filled .control-label,
#account-password .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-forgotten .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-forgotten .floating-group.is-filled .control-label,
#account-forgotten .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#account-address .floating-group .form-control:not(:placeholder-shown)~.control-label,
#account-address .floating-group.is-filled .control-label,
#account-address .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
#collapse-payment-address .form-group:not(.captcha-form-group):has(.form-control:not(:placeholder-shown)) .control-label,
#collapse-shipping-address .form-group:not(.captcha-form-group):has(.form-control:not(:placeholder-shown)) .control-label {
  transform: translateY(-9px) scale(0.74) !important;
  color: var(--theme-text-secondary, #a1a1aa) !important;
}

/* 3. For Selects (always floating at top) */
.floating-group select.form-control~.control-label,
.floating-group:has(select) .control-label,
.account-form .floating-group select.form-control~.control-label,
.account-form .floating-group:has(select) .control-label,
#account-register .floating-group select.form-control~.control-label,
#account-register .floating-group:has(select) .control-label,
#account-address .floating-group select.form-control~.control-label,
#account-address .floating-group:has(select) .control-label,
#collapse-payment-address .form-group:not(.captcha-form-group):has(select) .control-label,
#collapse-shipping-address .form-group:not(.captcha-form-group):has(select) .control-label {
  transform: translateY(-9px) scale(0.74) !important;
  color: var(--theme-text-secondary, #a1a1aa) !important;
}

.floating-group select.form-control:focus~.control-label,
.floating-group:has(select:focus) .control-label,
.account-form .floating-group select.form-control:focus~.control-label,
.account-form .floating-group:has(select:focus) .control-label,
#account-register .floating-group select.form-control:focus~.control-label,
#account-register .floating-group:has(select:focus) .control-label,
#account-address .floating-group select.form-control:focus~.control-label,
#account-address .floating-group:has(select:focus) .control-label,
#collapse-payment-address .form-group:not(.captcha-form-group):has(select:focus) .control-label,
#collapse-shipping-address .form-group:not(.captcha-form-group):has(select:focus) .control-label {
  color: var(--theme-red, #c52222) !important;
  font-weight: 600 !important;
}

/* Light Mode support */
html[data-theme="light"] .floating-group .form-control,
html[data-theme="light"] #collapse-payment-address .form-group:not(.captcha-form-group) .form-control,
html[data-theme="light"] #collapse-shipping-address .form-group:not(.captcha-form-group) .form-control {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #18181b !important;
}

html[data-theme="light"] .floating-group .form-control:focus,
html[data-theme="light"] #collapse-payment-address .form-group:not(.captcha-form-group) .form-control:focus,
html[data-theme="light"] #collapse-shipping-address .form-group:not(.captcha-form-group) .form-control:focus {
  border-color: var(--theme-red, #c52222) !important;
  box-shadow: 0 0 0 3px var(--accent-bg, rgba(197, 34, 34, 0.12)) !important;
}

html[data-theme="light"] .floating-group .control-label,
html[data-theme="light"] #collapse-payment-address .form-group:not(.captcha-form-group) .control-label,
html[data-theme="light"] #collapse-shipping-address .form-group:not(.captcha-form-group) .control-label {
  color: #71717a !important;
}

html[data-theme="light"] .floating-group .form-control:not(:placeholder-shown)~.control-label,
html[data-theme="light"] .floating-group:has(.form-control:not(:placeholder-shown)) .control-label,
html[data-theme="light"] #collapse-payment-address .form-group:not(.captcha-form-group):has(.form-control:not(:placeholder-shown)) .control-label,
html[data-theme="light"] #collapse-shipping-address .form-group:not(.captcha-form-group):has(.form-control:not(:placeholder-shown)) .control-label {
  color: #52525b !important;
}

/* Validation Errors */
.floating-group.has-error .form-control,
#collapse-payment-address .form-group.has-error .form-control {
  border-color: var(--theme-red, #c52222) !important;
}

.floating-group.has-error .control-label,
#collapse-payment-address .form-group.has-error .control-label {
  color: var(--theme-red, #c52222) !important;
}

.floating-group .text-danger,
#collapse-payment-address .text-danger {
  font-size: 11px !important;
  color: var(--theme-red, #c52222) !important;
  margin: 3px 0 2px 2px !important;
  display: block !important;
  font-weight: 500 !important;
}

/* Submit Box & Terms Agreement (Centered & Compact) */
.account-submit-box {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--theme-border-subtle);
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#account-edit .buttons,
#account-password .buttons,
#account-forgotten .buttons,
#account-address .buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  width: 100% !important;
}

#account-edit .buttons .pull-left,
#account-edit .buttons .pull-right,
#account-password .buttons .pull-left,
#account-password .buttons .pull-right,
#account-forgotten .buttons .pull-left,
#account-forgotten .buttons .pull-right,
#account-address .buttons .pull-left,
#account-address .buttons .pull-right {
  float: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   CHECKOUT & ACCOUNT AGREE TERMS & CONDITIONS CHECKBOX COMPONENT
   ========================================================================== */
.checkout-agree-box,
.account-agree-wrap {
  margin: 10px auto !important;
  padding: 13px 20px !important;
  border-radius: var(--theme-radius-md, 10px) !important;
  background: var(--theme-bg-surface-2) !important;
  border: 1px solid var(--theme-border-medium) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  clear: both !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.checkout-agree-box:hover,
.account-agree-wrap:hover {
  border-color: var(--theme-border-hover) !important;
}

.checkout-agree-box:has(input:checked),
.account-agree-wrap:has(input:checked) {
  border-color: var(--theme-red) !important;
  background: var(--theme-red-bg) !important;
}

.checkout-agree-label,
.account-agree-label,
.account-agree-wrap label,
.checkout-agree-box label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  user-select: none !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* Neutralize bootstrap .checkbox-inline & .checkbox when used inside agree wrappers */
.account-agree-wrap .checkbox-inline,
.checkout-agree-box .checkbox-inline,
.account-agree-wrap .checkbox,
.checkout-agree-box .checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding-left: 0 !important;
  margin: 0 auto !important;
}

.checkout-agree-checkbox,
.account-agree-checkbox,
.account-agree-wrap input[type="checkbox"],
.checkout-agree-box input[type="checkbox"],
.account-agree-wrap .checkbox-inline input[type="checkbox"],
.checkout-agree-box .checkbox-inline input[type="checkbox"] {
  position: static !important;
  float: none !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: var(--theme-red) !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.checkout-agree-checkbox:hover,
.account-agree-checkbox:hover,
.account-agree-wrap input[type="checkbox"]:hover,
.checkout-agree-box input[type="checkbox"]:hover {
  transform: scale(1.12) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-color, #c52222) 45%, transparent)) !important;
}

.checkout-agree-text,
.account-agree-text,
.account-agree-wrap .agree-text,
.checkout-agree-box .agree-text {
  flex: 0 1 auto !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--theme-text-primary) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.checkout-agree-box center,
.checkout-agree-text center,
.account-agree-wrap center {
  display: inline !important;
  text-align: inherit !important;
}

.checkout-agree-box br,
.checkout-agree-text br,
.account-agree-wrap br {
  display: none !important;
}

.checkout-agree-text a,
.checkout-agree-text a.agree,
.account-agree-wrap a,
.account-agree-text a {
  color: var(--theme-red) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.2s ease !important;
}

.checkout-agree-text a:hover,
.checkout-agree-text a.agree:hover,
.account-agree-wrap a:hover,
.account-agree-text a:hover {
  color: var(--theme-red-light) !important;
}

/* Clear buttons wrapper under agree box */
.checkout-agree-box+.buttons,
.checkout-actions-bar {
  margin-top: 14px !important;
  border-top: none !important;
  padding-top: 0 !important;
}

.btn-submit-account {
  width: 100%;
  max-width: 320px;
  height: 38px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--theme-radius-pill) !important;
  box-shadow: var(--accent-shadow-md) !important;
  margin: 0 auto !important;
}

/* Radios and Checkboxes in Forms */
.radio label,
.checkbox label,
.radio-inline,
.checkbox-inline {
  color: var(--theme-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding-left: 24px;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--theme-red);
  cursor: pointer;
}

/* Login Page Twin Cards (Haute Galerie d'Art — Rouge, Noir, Blanc) */
#account-login #content,
#affiliate-login #content {
  max-width: 920px;
  margin: 25px auto 50px;
}

#account-login #content>.row,
#affiliate-login #content>.row,
.login-row-equal {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

#account-login #content>.row>.col-sm-6,
#affiliate-login #content>.row>.col-sm-6,
.login-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#account-login .well,
#affiliate-login .well {
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-lg) !important;
  padding: 38px 34px !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--theme-shadow-md);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

#account-login .well:hover,
#affiliate-login .well:hover {
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-lg), 0 0 0 1px var(--accent-border-subtle, transparent) !important;
}

#account-login .well h2,
#affiliate-login .well h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--theme-text-primary) !important;
  margin-top: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#account-login .well h2::before,
#affiliate-login .well h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--theme-red);
  border-radius: 2px;
  flex: 0 0 auto;
}

#account-login .well p:first-of-type,
#affiliate-login .well p:first-of-type {
  color: var(--theme-text-muted);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

#account-login .well p,
#affiliate-login .well p {
  color: var(--theme-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

#account-login .well form,
#affiliate-login .well form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

#account-login .well .form-group,
#affiliate-login .well .form-group {
  margin-bottom: 16px;
}

#account-login .well label.control-label,
#affiliate-login .well label.control-label {
  color: var(--theme-text-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.login-actions-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.login-actions-bottom .btn-primary,
#account-login .well .btn-primary,
#affiliate-login .well .btn-primary {
  width: 100% !important;
  height: 44px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-radius: var(--theme-radius-pill) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.login-forgotten-wrap,
.login-forgotten-spacer {
  margin-top: 14px !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.login-forgotten-wrap a,
#account-login .well a.pull-right,
#affiliate-login .well a.pull-right {
  color: var(--theme-text-muted) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  transition: var(--theme-transition) !important;
}

.login-forgotten-wrap a:hover,
#account-login .well a.pull-right:hover,
#affiliate-login .well a.pull-right:hover {
  color: var(--theme-red) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.login-forgotten-spacer {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {

  #account-login #content>.row,
  #affiliate-login #content>.row,
  .login-row-equal {
    flex-direction: column !important;
  }

  #account-login #content>.row>.col-sm-6,
  #affiliate-login #content>.row>.col-sm-6,
  .login-col {
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  #account-login .well,
  #affiliate-login .well {
    min-height: auto !important;
    height: auto !important;
  }
}

/* Account Dashboard (.account-dashboard-wrap) */
.account-dashboard-wrap {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  padding: 22px 28px;
  box-shadow: var(--theme-shadow-md);
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px auto 24px;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.account-dashboard-wrap:hover {
  border-color: var(--accent-border, var(--accent-color));
}

.account-dash-box {
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-md);
  padding: 24px;
  margin-bottom: 20px;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.32s ease;
}

.account-dash-box:hover {
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  transform: translateY(-2px);
  box-shadow: var(--theme-shadow-sm), 0 0 0 1px var(--accent-border-subtle, transparent);
}

.account-dash-box h3 {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--theme-text-primary) !important;
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-dash-box h3 i {
  color: var(--theme-red);
}

.dash-links li {
  margin-bottom: 10px;
}

.dash-links li a {
  color: var(--theme-text-secondary) !important;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.dash-links li a i {
  color: var(--theme-red);
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.dash-links li a:hover {
  color: var(--theme-red) !important;
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   HOMEPAGE & NOTIFICATION MODULE LUXURY REFINEMENT
   -------------------------------------------------------------------------- */

/* Gallery Intro */
.home-gallery-intro {
  margin: 10px auto 22px auto;
  max-width: 650px;
  text-align: center;
}

.home-gallery-intro-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--theme-text-primary);
  margin-bottom: 4px;
}

.home-gallery-intro-sub {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--theme-text-muted);
  margin-bottom: 4px;
}

.home-gallery-intro-addr {
  font-size: 11.5px;
  color: var(--theme-text-secondary);
  letter-spacing: 0.5px;
}

.home-gallery-intro-addr i {
  color: var(--theme-red);
  margin-right: 4px;
}

/* Header Notification Module (eb_header_notification) */
.ebnotification {
  margin: 12px auto 20px auto;
  width: 100%;
}

.ebnotification .alert-notify {
  position: relative !important;
  margin: 0 auto !important;
  max-width: 780px !important;
  padding: 12px 38px 12px 18px !important;
  border-radius: var(--theme-radius-md, 8px) !important;
  transition: var(--theme-transition) !important;
  animation: none !important;
  box-shadow: var(--theme-shadow-sm) !important;
  border: 1px solid var(--theme-border-subtle) !important;
}

html[data-theme="light"] .ebnotification .alert-notify,
html[data-theme="light"] div[id^="headernotify"] .alert-notify {
  background-color: #f7f7f9 !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
  color: var(--theme-text-primary) !important;
}

html[data-theme="dark"] .ebnotification .alert-notify,
html[data-theme="dark"] div[id^="headernotify"] .alert-notify {
  background-color: #131317 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--theme-text-primary) !important;
}

.ebnotification .ebnotification-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ebnotification .ebnotification-badge {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--theme-red);
  line-height: 1;
}

.ebnotification .ebnotification-text {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.ebnotification .ebnotification-text p {
  margin: 2px 0 !important;
  color: var(--theme-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html[data-theme="light"] .ebnotification .ebnotification-text p {
  color: #44454c !important;
}

html[data-theme="dark"] .ebnotification .ebnotification-text p {
  color: #c4c4cc !important;
}

.ebnotification .ebnotification-text p:first-of-type {
  font-weight: 600;
  color: var(--theme-text-primary) !important;
}

.ebnotification .ebnotification-text p:empty,
.ebnotification .ebnotification-text br {
  display: none !important;
}

.ebnotification .alert-notify .close {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--theme-text-muted) !important;
  opacity: 0.6 !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  transition: var(--theme-transition);
}

.ebnotification .alert-notify .close:hover {
  opacity: 1 !important;
  color: var(--theme-red) !important;
}

/* Home PDF Section */
.home-pdf-section {
  position: relative;
  overflow: hidden;
  margin: 16px 0 34px 0;
  padding: 28px 12px 34px 12px;
  border: none !important;
  border-radius: var(--theme-radius-md, 8px) !important;
  background-image: var(--home-pdf-bg-url, url('../../../../image/catalog/pdf/2030-diaporama-5f2c287712379.jpg'));
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.home-pdf-section.no-bg-image {
  background-image: none !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
}

/* Fondu progressif de l'image dans l'arrière-plan (Noir en thème sombre / Blanc en thème clair) */
.home-pdf-section::before,
.home-pdf-section::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Thème sombre (par défaut) : dégradé progressif transparent -> noir (#0b0b0c) */
.home-pdf-section::before {
  background:
    linear-gradient(180deg, #0b0b0c 0%, rgba(11, 11, 12, 0.82) 10%, rgba(11, 11, 12, 0.22) 28%, rgba(11, 11, 12, 0.14) 50%, rgba(11, 11, 12, 0.24) 72%, rgba(11, 11, 12, 0.84) 90%, #0b0b0c 100%),
    linear-gradient(90deg, #0b0b0c 0%, rgba(11, 11, 12, 0.72) 7%, rgba(11, 11, 12, 0.06) 22%, rgba(11, 11, 12, 0.06) 78%, rgba(11, 11, 12, 0.72) 93%, #0b0b0c 100%);
}

.home-pdf-section::after {
  background: radial-gradient(ellipse 76% 70% at 50% 50%, rgba(11, 11, 12, 0.08) 32%, rgba(11, 11, 12, 0.56) 74%, #0b0b0c 100%);
}

/* Thème clair : dégradé progressif transparent -> blanc (#ffffff) */
html[data-theme="light"] .home-pdf-section::before {
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.80) 10%, rgba(255, 255, 255, 0.16) 28%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.18) 72%, rgba(255, 255, 255, 0.84) 90%, #ffffff 100%),
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.70) 7%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0.04) 78%, rgba(255, 255, 255, 0.70) 93%, #ffffff 100%);
}

html[data-theme="light"] .home-pdf-section::after {
  background: radial-gradient(ellipse 76% 70% at 50% 50%, rgba(255, 255, 255, 0.04) 32%, rgba(255, 255, 255, 0.50) 74%, #ffffff 100%);
}

.home-pdf-section.no-bg-image::before,
.home-pdf-section.no-bg-image::after {
  display: none !important;
}

.home-pdf-section>* {
  position: relative;
  z-index: 2;
}

.home-pdf-heading-wrap {
  margin-bottom: 24px;
}

.home-pdf-heading-wrap .geo-section-title {
  margin: 0 0 8px 0;
  letter-spacing: 2px;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--theme-text-primary);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .home-pdf-heading-wrap .geo-section-title {
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.9);
}

.home-pdf-heading-wrap .geo-section-title i {
  color: var(--theme-red);
  margin-right: 8px;
}

.home-pdf-heading-wrap .geo-pdf-lead {
  color: var(--theme-text-secondary);
  font-size: 13.5px;
  font-style: italic;
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .home-pdf-heading-wrap .geo-pdf-lead {
  color: #27272a;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.9);
}

/* Flipbook Card & Buttons Overrides */
.flipbook-single-showcase {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.flipbook-card-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 6px !important;
}

.flipbook-card-sub span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.flipbook-card-sub i {
  color: var(--theme-red, #c52222) !important;
  margin-right: 5px !important;
}

.home-pdf-all-wrap {
  margin-top: 24px;
  text-align: center;
}

.home-btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: var(--theme-radius-sm, 6px);
  text-decoration: none !important;
  transition: var(--theme-transition);
}

.home-btn-view-all i {
  color: var(--theme-red);
}

html[data-theme="light"] .home-btn-view-all {
  background: #ffffff;
  color: #1f2024 !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .home-btn-view-all:hover {
  background: var(--theme-red);
  color: #ffffff !important;
  border-color: var(--theme-red);
  box-shadow: var(--accent-shadow-md) !important;
}

html[data-theme="light"] .home-btn-view-all:hover i {
  color: #ffffff;
}

html[data-theme="dark"] .home-btn-view-all {
  background: #141418;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .home-btn-view-all:hover {
  background: var(--theme-red);
  color: #ffffff !important;
  border-color: var(--theme-red);
}

html[data-theme="dark"] .home-btn-view-all:hover i {
  color: #ffffff;
}

/* Flipbook cover placeholder */
.flipbook-cover-placeholder {
  width: 260px;
  height: 360px;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-muted);
  padding: 24px;
  box-sizing: border-box;
}

.flipbook-cover-placeholder i {
  font-size: 46px;
  color: var(--theme-red);
  margin-bottom: 16px;
}

.flipbook-cover-placeholder span {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--theme-text-primary);
  text-align: center;
  line-height: 1.4;
}

/* Explicit Flipbook Action Button Overrides in Modern Theme */
.flipbook-btn-browse,
html[data-theme="light"] .flipbook-btn-browse,
html[data-theme="dark"] .flipbook-btn-browse,
:root:not([data-theme="light"]) .flipbook-btn-browse {
  background: #181820 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.flipbook-btn-browse i,
html[data-theme="light"] .flipbook-btn-browse i,
html[data-theme="dark"] .flipbook-btn-browse i,
:root:not([data-theme="light"]) .flipbook-btn-browse i {
  color: #ffffff !important;
}

.flipbook-btn-browse:hover,
html[data-theme="light"] .flipbook-btn-browse:hover,
html[data-theme="dark"] .flipbook-btn-browse:hover,
:root:not([data-theme="light"]) .flipbook-btn-browse:hover {
  background: var(--theme-red, #c52222) !important;
  border-color: var(--theme-red, #c52222) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color, #c52222) 35%, transparent) !important;
  transform: translateY(-1px);
}

.flipbook-btn-browse:hover i,
html[data-theme="light"] .flipbook-btn-browse:hover i,
html[data-theme="dark"] .flipbook-btn-browse:hover i,
:root:not([data-theme="light"]) .flipbook-btn-browse:hover i {
  color: #ffffff !important;
  transform: translateX(3px);
}

html[data-theme="light"] .flipbook-btn-download-sm {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #55565e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .flipbook-btn-download-sm:hover {
  color: var(--theme-red) !important;
  border-color: var(--theme-red) !important;
  background: var(--accent-bg-subtle) !important;
}

/* Couverture 3D Catalogue Raisonné — Ombrages doux galerie d'art */
.book-catalogue-raisonne .flipbook-cover-link,
html[data-theme="light"] .book-catalogue-raisonne .flipbook-cover-link,
html[data-theme="light"] .flipbook-cover-link {
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    1.5px 1px 0px -0.5px rgba(225, 220, 210, 0.70),
    3.5px 2px 0px -1px rgba(215, 209, 198, 0.55),
    5.5px 3px 0px -1.5px rgba(205, 198, 186, 0.40),
    0px 3px 0px -1.5px rgba(220, 214, 204, 0.50),
    0 2px 5px rgba(0, 0, 0, 0.03),
    3px 8px 20px -2px rgba(0, 0, 0, 0.07),
    6px 16px 34px -4px rgba(0, 0, 0, 0.05) !important;
}

@media (hover: hover) and (pointer: fine) {

  .book-catalogue-raisonne .flipbook-cover-link:hover,
  .flipbook-cover-link:hover,
  html[data-theme="light"] .book-catalogue-raisonne .flipbook-cover-link:hover,
  html[data-theme="light"] .flipbook-cover-link:hover {
    transform: translateY(-5px) rotateY(-2.5deg) rotateX(1deg) !important;
    box-shadow:
      1.5px 1px 0px -0.5px rgba(225, 220, 210, 0.80),
      4px 2px 0px -1px rgba(215, 209, 198, 0.65),
      6.5px 3px 0px -1.5px rgba(205, 198, 186, 0.45),
      0px 3.5px 0px -1.5px rgba(220, 214, 204, 0.60),
      0 4px 10px rgba(0, 0, 0, 0.04),
      5px 12px 24px -2px rgba(0, 0, 0, 0.09),
      10px 22px 42px -4px rgba(0, 0, 0, 0.06) !important;
  }
}

html[data-theme="dark"] .book-catalogue-raisonne .flipbook-cover-link,
html[data-theme="dark"] .flipbook-cover-link,
:root:not([data-theme="light"]) .book-catalogue-raisonne .flipbook-cover-link,
:root:not([data-theme="light"]) .flipbook-cover-link {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    1.5px 1px 0px -0.5px rgba(255, 255, 255, 0.08),
    3.5px 2px 0px -1px rgba(255, 255, 255, 0.05),
    5.5px 3px 0px -1.5px rgba(255, 255, 255, 0.03),
    0px 3px 0px -1.5px rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.35),
    4px 10px 22px -3px rgba(0, 0, 0, 0.45),
    8px 18px 36px -6px rgba(0, 0, 0, 0.35) !important;
}

@media (hover: hover) and (pointer: fine) {

  html[data-theme="dark"] .book-catalogue-raisonne .flipbook-cover-link:hover,
  html[data-theme="dark"] .flipbook-cover-link:hover,
  :root:not([data-theme="light"]) .book-catalogue-raisonne .flipbook-cover-link:hover,
  :root:not([data-theme="light"]) .flipbook-cover-link:hover {
    transform: translateY(-5px) rotateY(-2.5deg) rotateX(1deg) !important;
    box-shadow:
      1.5px 1px 0px -0.5px rgba(255, 255, 255, 0.10),
      4px 2px 0px -1px rgba(255, 255, 255, 0.07),
      6.5px 3px 0px -1.5px rgba(255, 255, 255, 0.04),
      0px 3.5px 0px -1.5px rgba(255, 255, 255, 0.06),
      0 4px 10px rgba(0, 0, 0, 0.4),
      6px 14px 28px -3px rgba(0, 0, 0, 0.5),
      12px 24px 44px -6px rgba(0, 0, 0, 0.38) !important;
  }
}

/* ==========================================================================
   20. PRESTIGE CAPTCHA COMPONENT (TRIAD PALETTE: ROUGE, NOIR, BLANC)
   ========================================================================== */

.captcha-fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 10px auto 8px !important;
  width: 100% !important;
  clear: both !important;
  text-align: center !important;
}

.captcha-legend {
  color: var(--theme-text-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  padding-bottom: 5px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.captcha-legend::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--theme-red);
  border-radius: 2px;
  flex: 0 0 auto;
}

.captcha-form-group {
  position: static !important;
  margin: 0 auto 12px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.captcha-label,
#collapse-payment-address .captcha-label {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--theme-text-secondary) !important;
  letter-spacing: 0.3px !important;
  margin: 0 auto 8px auto !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.captcha-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: var(--theme-bg-surface-2) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.captcha-row:hover,
.captcha-row:focus-within {
  border-color: var(--theme-border-hover) !important;
  box-shadow: 0 4px 18px var(--accent-bg, rgba(197, 34, 34, 0.12)) !important;
}

.captcha-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

.captcha-img {
  width: 170px !important;
  height: 42px !important;
  border-radius: 6px !important;
  border: 1px solid var(--theme-border-subtle) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
  transition: opacity 0.2s ease !important;
}

.captcha-refresh-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-medium) !important;
  color: var(--theme-text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.captcha-refresh-btn:hover {
  background: var(--theme-red-bg) !important;
  border-color: var(--theme-red-border) !important;
  color: var(--theme-red) !important;
  transform: scale(1.06) !important;
  box-shadow: var(--accent-shadow-sm) !important;
}

.captcha-refresh-btn:active {
  transform: scale(0.95) !important;
}

.captcha-refresh-btn.is-refreshing i {
  animation: captcha-spin 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

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

.captcha-input-wrap {
  flex: 1 1 200px !important;
  min-width: 160px !important;
  max-width: 340px !important;
}

.captcha-input,
#collapse-payment-address .captcha-input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  background: var(--theme-bg-input) !important;
  border: 1px solid var(--theme-border-medium) !important;
  color: var(--theme-text-primary) !important;
  border-radius: 6px !important;
  font-family: 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.captcha-input::placeholder {
  color: var(--theme-text-muted) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
}

.captcha-input:focus {
  border-color: var(--theme-red) !important;
  box-shadow: 0 0 0 3px var(--theme-red-bg) !important;
  outline: none !important;
  background: var(--theme-bg-surface) !important;
}

/* Error state */
.has-error .captcha-row {
  border-color: var(--theme-red) !important;
  box-shadow: 0 0 0 2px var(--theme-red-bg) !important;
}

.has-error .captcha-input {
  border-color: var(--theme-red) !important;
}

/* Light Mode fine-tuning */
html[data-theme="light"] .captcha-row {
  background: #fbfbfd !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .captcha-row:hover,
html[data-theme="light"] .captcha-row:focus-within {
  border-color: var(--theme-border-hover) !important;
  box-shadow: 0 4px 18px var(--accent-bg, rgba(197, 34, 34, 0.12)) !important;
}

html[data-theme="light"] .captcha-img {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .captcha-refresh-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #55565e !important;
}

html[data-theme="light"] .captcha-refresh-btn:hover {
  background: var(--accent-bg-subtle) !important;
  border-color: var(--theme-red) !important;
  color: var(--theme-red) !important;
}

html[data-theme="light"] .captcha-input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #1f2024 !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .captcha-row {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
  }

  .captcha-badge {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .captcha-img {
    flex: 1 !important;
    max-width: 220px !important;
  }

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

/* --------------------------------------------------------------------------
   PASSWORD VISIBILITY TOGGLE (EYE ICON)
   -------------------------------------------------------------------------- */
.password-toggle-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.password-toggle-wrap input.form-control,
.password-toggle-wrap input[type="password"],
.password-toggle-wrap input[type="text"] {
  padding-right: 44px !important;
}

/* Hide Microsoft Edge / IE native reveal icon */
input::-ms-reveal,
input::-ms-clear {
  display: none !important;
}

.btn-toggle-password {
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 38px !important;
  width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--theme-text-muted, #71717a) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  transition: color 0.22s ease, transform 0.15s ease !important;
  -webkit-appearance: none !important;
  user-select: none !important;
}

.btn-toggle-password:hover,
.btn-toggle-password:focus {
  color: var(--theme-red, #c52222) !important;
  outline: none !important;
}

.btn-toggle-password.active {
  color: var(--theme-red, #c52222) !important;
}

.btn-toggle-password:active {
  transform: translateY(-50%) scale(0.9) !important;
}

.btn-toggle-password i.fa {
  font-size: 15px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Light Theme eye toggle */
html[data-theme="light"] .btn-toggle-password {
  color: #52525b !important;
}

html[data-theme="light"] .btn-toggle-password:hover,
html[data-theme="light"] .btn-toggle-password:focus,
html[data-theme="light"] .btn-toggle-password.active {
  color: var(--theme-red) !important;
}

/* Dark Theme eye toggle */
html[data-theme="dark"] .btn-toggle-password {
  color: #71717a !important;
}

html[data-theme="dark"] .btn-toggle-password:hover,
html[data-theme="dark"] .btn-toggle-password:focus,
html[data-theme="dark"] .btn-toggle-password.active {
  color: var(--accent-color, #c52222) !important;
}

/* ==========================================================================
   13. PRODUCT DETAILS PAGE (PDP) — LUXURY ARTWORK PANEL & REDESIGNED DISPATCH
   Haute Galerie d'Art Japonaise — Maillard & Fouilleul Estampes
   ========================================================================== */

/* Main Container: Right Panel */
.product-gallery-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.product-gallery-panel hr,
.pdp-purchase-card hr,
.col-sm-4>hr,
.col-sm-5>hr,
.pdp-details-col>hr {
  display: none !important;
}

@media (min-width: 992px) {
  .product-gallery-panel {
    position: sticky;
    top: 90px;
    z-index: 10;
  }
}

/* 1. Header Card (Badge, Title, Wishlist) */
.pdp-header-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pdp-estampe-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  background: var(--theme-red-bg);
  border: 1px solid var(--theme-red-border);
  color: var(--theme-red);
}

.pdp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-red);
  box-shadow: 0 0 8px var(--theme-red);
  display: inline-block;
}

.pdp-wishlist-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  color: var(--theme-text-secondary);
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--theme-shadow-sm);
}

.pdp-wishlist-btn i.fa-heart {
  font-size: 15px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.pdp-wishlist-btn:hover,
html[data-theme="light"] .pdp-wishlist-btn:hover,
html[data-theme="dark"] .pdp-wishlist-btn:hover {
  color: var(--accent-color, #c52222) !important;
  border-color: var(--accent-border-hover, rgba(197, 34, 34, 0.48)) !important;
  background: var(--accent-bg, rgba(197, 34, 34, 0.10)) !important;
  transform: scale(1.08);
  box-shadow: var(--accent-shadow-md) !important;
}

.pdp-wishlist-btn:hover i.fa-heart {
  transform: scale(1.15);
}

.pdp-wishlist-btn:active {
  transform: scale(0.95);
}

.pdp-artwork-title {
  font-family: 'Cinzel', 'Playfair Display', 'Baskerville', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  font-style: italic !important;
  color: var(--theme-text-primary);
  margin: 2px 0 0 0;
  line-height: 1.22;
  letter-spacing: 0.5px;
  word-break: break-word;
}

/* 2. Identity Card (Artist & Historical Metadata Chips) */
.pdp-identity-card {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--theme-shadow-sm);
}

.pdp-artist-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-artist-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-red);
  font-size: 15px;
  flex-shrink: 0;
}

.pdp-artist-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-artist-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--theme-text-muted);
}

.pdp-artist-link {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  text-decoration: none !important;
  color: inherit;
}

.pdp-artist-fullname {
  font-size: 15px;
  font-weight: 700;
  color: var(--theme-text-primary);
  transition: color 0.2s ease;
}

.pdp-artist-link:hover .pdp-artist-fullname {
  color: var(--theme-red);
}

.pdp-artist-dates {
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-text-muted);
}

.pdp-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--theme-border-subtle);
}

.pdp-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 9999px;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  font-size: 11.5px;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.pdp-meta-chip:hover {
  border-color: var(--theme-border-hover);
  background: var(--theme-bg-surface-2);
}

.pdp-chip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--theme-text-muted);
}

.pdp-chip-value {
  font-weight: 600;
  color: var(--theme-text-primary);
}

.pdp-chip-technic {
  background: var(--theme-red-bg);
  border-color: var(--theme-red-border);
}

.pdp-chip-technic .pdp-chip-value {
  color: var(--theme-red);
}

/* 3. Innovative Dimensions Card (2-Tile Sujet vs Feuille Grid) */
.pdp-dimensions-card {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--theme-shadow-sm);
}

.pdp-dimensions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pdp-dim-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--theme-text-secondary);
}

.pdp-dim-title i {
  color: var(--theme-red);
  font-size: 12px;
}

.pdp-dim-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--theme-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.pdp-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pdp-dim-tile {
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.pdp-dim-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  box-shadow: var(--theme-shadow-sm);
}

.pdp-dim-tile-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-dim-icon {
  color: var(--theme-red);
  font-size: 11px;
  line-height: 1;
}

.pdp-dim-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp-dim-tile-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.pdp-dim-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--theme-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pdp-dim-cross {
  font-size: 14px;
  font-weight: 400;
  color: var(--theme-red);
  margin: 0 1px;
}

.pdp-dim-suffix {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--theme-text-muted);
  text-transform: uppercase;
  margin-left: 2px;
}

.pdp-dim-tile-sub {
  font-size: 10px;
  color: var(--theme-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* 4. Availability Strip (Compact Header Pill Badge) */
.pdp-availability-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px 12px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 8px;
  max-width: calc(100% - 52px);
  flex-wrap: wrap;
}

.pdp-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
}

.pdp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pdp-pulse 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes pdp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.75);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.pdp-stock-label {
  font-weight: 500;
  opacity: 0.85;
}

.pdp-stock-value {
  font-weight: 700;
  color: #10b981;
}

.pdp-unique-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text-muted);
  margin-left: 2px;
}

.pdp-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text-secondary);
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  padding: 3px 9px;
  border-radius: 9999px;
}

/* Share box at bottom of right product panel */
.product-gallery-panel .share-box {
  margin: 4px 0 0 0 !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid var(--theme-border-subtle) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.pdp-reward-pill i {
  color: #eab308;
}

/* 5. Purchase Box (#product) */
.pdp-purchase-card {
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--theme-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-price-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

.pdp-price-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-price-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--theme-text-primary);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pdp-price-special-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pdp-price-old {
  font-size: 20px;
  font-weight: 500;
  color: var(--theme-text-muted);
  text-decoration: line-through;
}

.pdp-price-special {
  color: var(--theme-red);
}

.pdp-price-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pdp-badge-ttc {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  color: var(--theme-text-muted);
}

.pdp-badge-shipping {
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pdp-badge-shipping i {
  color: var(--theme-red);
  font-size: 12px;
}

.pdp-price-tax,
.pdp-price-points {
  font-size: 11px;
  color: var(--theme-text-muted);
}

.pdp-discounts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pdp-discount-badge {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--theme-red-bg);
  border: 1px solid var(--theme-red-border);
  color: var(--theme-red);
  font-weight: 600;
}

/* Options & Recurrings styling */
.pdp-options-container,
.pdp-recurring-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

.pdp-options-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--theme-text-secondary);
  margin: 0 0 6px 0;
}

/* Primary Action Area */
.pdp-action-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-btn-cart {
  height: 52px !important;
  width: 100% !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: var(--accent-shadow-md) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
}

.pdp-btn-cart i.fa-shopping-bag {
  font-size: 16px !important;
  line-height: 1 !important;
}

.pdp-btn-cart:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-color) 100%) !important;
  box-shadow: var(--accent-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

.pdp-btn-cart:active {
  transform: translateY(0) !important;
  background: var(--accent-active) !important;
  box-shadow: var(--accent-shadow-sm) !important;
}

/* Reassurance Strip */
.pdp-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--theme-border-subtle);
}

.pdp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 6px 4px;
}

.pdp-trust-item i {
  color: var(--theme-red);
  font-size: 15px;
  line-height: 1;
  margin-bottom: 2px;
}

.pdp-trust-item span {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--theme-text-muted);
  line-height: 1.25;
}

/* Light Theme Overrides */
html[data-theme="light"] .pdp-availability-strip {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

html[data-theme="light"] .pdp-stock-status,
html[data-theme="light"] .pdp-stock-value {
  color: #059669;
}

html[data-theme="light"] .pdp-live-dot {
  background: #059669;
}

html[data-theme="light"] .pdp-meta-chip {
  background: #f4f4f7;
  border-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .pdp-chip-technic {
  background: var(--accent-bg-subtle, rgba(197, 34, 34, 0.06));
  border-color: var(--accent-border-subtle, rgba(197, 34, 34, 0.22));
}

html[data-theme="light"] .pdp-dim-tile {
  background: #f8f8fa;
  border-color: rgba(0, 0, 0, 0.07);
}

html[data-theme="light"] .pdp-wishlist-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #52525b;
}

html[data-theme="light"] .pdp-artist-badge-icon {
  background: #f4f4f7;
  border-color: rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .product-gallery-panel {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .pdp-dimensions-grid {
    grid-template-columns: 1fr;
  }

  .pdp-price-amount {
    font-size: 28px;
  }

  .pdp-artwork-title {
    font-size: 23px;
  }

  .pdp-trust-grid {
    gap: 6px;
  }

  .pdp-trust-item span {
    font-size: 9.5px;
  }
}

/* ==========================================================================
   14. NOTIFICATIONS SOBRES & HAUTE GALERIE (IN-PAGE & TOASTS FLOTTANTS)
   Galerie Maillard-Fouilleul — Design minimaliste, icône alignée, sans halo néon
   ========================================================================== */

/* Base commune à toutes les notifications (.alert-dismissible & .in-page-alert) */
.alert.alert-dismissible,
.alert.in-page-alert,
.alert-floating-toast {
  display: block !important;
  position: relative !important;
  padding: 10px 38px 10px 38px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Icône d'état toujours alignée à gauche (jamais empilée au-dessus du texte) */
.alert.alert-dismissible > i.fa:first-child,
.alert.in-page-alert > i.fa:first-child,
.alert-floating-toast > i.fa:first-child {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  filter: none !important;
}

/* Bannières d'alerte intégrées au flux (formulaires Compte, Login, Inscription, Panier) */
.alert.in-page-alert,
#account-login > .alert-dismissible,
#account-register > .alert-dismissible,
#account-forgotten > .alert-dismissible,
#account-edit > .alert-dismissible,
#account-password > .alert-dismissible,
#account-address > .alert-dismissible {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px 0 !important;
  z-index: 5 !important;
  animation: none !important;
}

/* Notifications flottantes (Toasts AJAX : Ajout panier, Liste de souhaits, Comparateur) */
.alert.alert-dismissible:not(#checkout-cart *):not(.in-page-cart-alert):not(.in-page-alert):not(#account-login > .alert-dismissible):not(#account-register > .alert-dismissible):not(#account-forgotten > .alert-dismissible):not(#account-edit > .alert-dismissible):not(#account-password > .alert-dismissible):not(#account-address > .alert-dismissible),
#content > .alert-dismissible:not(#checkout-cart *):not(.in-page-cart-alert):not(.in-page-alert),
#product-product > .alert-dismissible,
.alert-floating-toast {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: min(92vw, 620px) !important;
  margin: 0 !important;
  pointer-events: auto !important;
  animation: alertToastSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes alertToastSlideDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Thème Sombre — Variantes sobres avec filet latéral fin (sans halo lumineux) */
.alert-success.alert-dismissible,
.alert-success.in-page-alert {
  background: rgba(20, 20, 25, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-left: 3px solid var(--accent-color, #10b981) !important;
  color: #f4f4f5 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42) !important;
}

.alert-success.alert-dismissible i.fa,
.alert-success.in-page-alert i.fa {
  color: var(--accent-color, #10b981) !important;
}

.alert-danger.alert-dismissible,
.alert-danger.in-page-alert {
  background: rgba(22, 18, 19, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-left: 3px solid #dc2626 !important;
  color: #f4f4f5 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42) !important;
}

.alert-danger.alert-dismissible i.fa,
.alert-danger.in-page-alert i.fa {
  color: #ef4444 !important;
}

/* Thème Clair — Variantes sobres sur fond papier galerie (sans halo coloré) */
html[data-theme="light"] .alert-success.alert-dismissible,
html[data-theme="light"] .alert-success.in-page-alert {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-left: 3px solid var(--accent-color, #15803d) !important;
  color: #18181b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .alert-danger.alert-dismissible,
html[data-theme="light"] .alert-danger.in-page-alert {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  border-left: 3px solid #b91c1c !important;
  color: #18181b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .alert-danger.alert-dismissible i.fa,
html[data-theme="light"] .alert-danger.in-page-alert i.fa {
  color: #b91c1c !important;
}

/* Lien du titre de l'œuvre dans la notification */
.alert-dismissible a:first-of-type:not(:last-of-type) {
  font-weight: 600 !important;
  font-style: italic !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: var(--accent-border-hover, rgba(128, 128, 128, 0.45)) !important;
  transition: color 0.18s ease !important;
}

.alert-dismissible a:first-of-type:not(:last-of-type):hover {
  color: var(--accent-color) !important;
}

/* Bouton d'action sobre vers la destination (Panier, Liste de souhaits, Comparateur) */
.alert-dismissible a[href*="wishlist"],
.alert-dismissible a[href*="cart"],
.alert-dismissible a[href*="checkout"],
.alert-dismissible a[href*="compare"],
.alert-dismissible a:last-of-type,
.alert-dismissible .alert-cta-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 9px !important;
  margin: 0 0 0 4px !important;
  border-radius: 6px !important;
  background: var(--accent-bg-medium, rgba(201, 169, 110, 0.15)) !important;
  background-image: none !important;
  color: var(--accent-color, #c9a96e) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 1px solid var(--accent-border-hover, var(--accent-color)) !important;
  transition: all 0.18s ease !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
}

.alert-dismissible a[href*="wishlist"]::after,
.alert-dismissible a[href*="cart"]::after,
.alert-dismissible a[href*="checkout"]::after,
.alert-dismissible a[href*="compare"]::after,
.alert-dismissible a:last-of-type::after,
.alert-dismissible .alert-cta-button::after {
  content: "→" !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  transition: transform 0.18s ease !important;
}

.alert-dismissible a[href*="wishlist"]:hover,
.alert-dismissible a[href*="cart"]:hover,
.alert-dismissible a[href*="checkout"]:hover,
.alert-dismissible a[href*="compare"]:hover,
.alert-dismissible a:last-of-type:hover,
.alert-dismissible .alert-cta-button:hover,
html[data-theme="light"] .alert-dismissible a[href*="wishlist"]:hover,
html[data-theme="light"] .alert-dismissible a[href*="cart"]:hover,
html[data-theme="light"] .alert-dismissible a[href*="checkout"]:hover,
html[data-theme="light"] .alert-dismissible a[href*="compare"]:hover,
html[data-theme="light"] .alert-dismissible a:last-of-type:hover,
html[data-theme="light"] .alert-dismissible .alert-cta-button:hover {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Bouton de fermeture discret */
.alert-dismissible .close {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--theme-text-muted, #a1a1aa) !important;
  opacity: 0.75 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
  text-shadow: none !important;
}

html[data-theme="light"] .alert-dismissible .close {
  color: #71717a !important;
}

.alert-dismissible .close:hover,
html[data-theme="light"] .alert-dismissible .close:hover {
  opacity: 1 !important;
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-color) !important;
  transform: translateY(-50%) !important;
}

/* Adaptation Mobile (<= 767px) */
@media (max-width: 767px) {
  .alert.alert-dismissible:not(#checkout-cart *):not(.in-page-cart-alert):not(.in-page-alert):not(#account-login > .alert-dismissible):not(#account-register > .alert-dismissible):not(#account-forgotten > .alert-dismissible):not(#account-edit > .alert-dismissible):not(#account-password > .alert-dismissible):not(#account-address > .alert-dismissible),
  #content > .alert-dismissible:not(#checkout-cart *):not(.in-page-cart-alert):not(.in-page-alert),
  #product-product > .alert-dismissible,
  .alert-floating-toast {
    top: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .alert.alert-dismissible,
  .alert.in-page-alert,
  .alert-floating-toast {
    padding: 9px 34px 9px 34px !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
    border-radius: 8px !important;
  }

  .alert.alert-dismissible > i.fa:first-child,
  .alert.in-page-alert > i.fa:first-child,
  .alert-floating-toast > i.fa:first-child {
    left: 11px !important;
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   15. SUPPRESS REDUNDANT HEADINGS DUPLICATING BREADCRUMBS
   -------------------------------------------------------------------------- */
#account-wishlist #content>h2:first-child,
#account-download #content>h2:first-child,
#account-order #content>h1:first-child,
#account-recurring #content>h1:first-child,
#account-return #content>h1:first-child,
#account-reward #content>h1:first-child,
#account-transaction #content>h1:first-child {
  display: none !important;
}

/* ==========================================================================
   16. TITRES D'ŒUVRES EN ITALIQUE (PARTOUT EN FRONT)
   Galerie Maillard-Fouilleul — Convention typographique universelle des Beaux-Arts
   Tous les titres d'estampes, gravures et œuvres d'art sont en italique.
   ========================================================================== */

/* 1. Titre principal sur la fiche produit (Fiche Œuvre - PDP) */
.pdp-artwork-title,
#product-product h1,
#product-product .product-gallery-panel h1,
.product-info h1,
#product-product .breadcrumb>li:last-child,
#product-product .breadcrumb>li:last-child a,
#product-product .breadcrumb>li:last-child span {
  font-style: italic !important;
}

/* 2. Titres d'œuvres dans toutes les grilles, carrousels et listes de produits */
.product-thumb h4,
.product-thumb h4 a,
.product-thumb .caption h4,
.product-thumb .caption h4 a,
.product-thumb h3.geo-product-title,
.product-thumb h3.geo-product-title a,
.geo-product-title,
.geo-product-title a,
.product-title-row h4,
.product-title-row h4 a,
.product-layout .caption h4 a,
.product-layout .product-thumb .caption h4 a,
.latestmodule .geo-product-title,
.latestmodule .geo-product-title a,
.featuredmodule h4 a,
.bestsellermodule h4 a,
.specialmodule h4 a,
.product-thumb .name a,
.product-thumb p a {
  font-style: italic !important;
}

/* 3. Titres d'œuvres dans le panier déroulant (Mini-panier du header) */
#cart .table-striped td.text-left>a:first-child,
#cart table td.text-left>a:first-child,
.cart-dropdown-item-title {
  font-style: italic !important;
}

/* 4. Titres d'œuvres sur la page Panier (Shopping Cart) */
#checkout-cart .table-responsive table tbody td.text-left>a:first-child,
.cart-info table td.name a,
#content .table-responsive .table-bordered tbody td.text-left>a:first-child {
  font-style: italic !important;
}

/* 5. Titres d'œuvres sur la page Liste de souhaits (Wishlist) */
#account-wishlist .table-responsive table tbody td.text-left>a:first-child,
#account-wishlist table td.text-left>a:first-child {
  font-style: italic !important;
}

/* 6. Titres d'œuvres sur le Comparateur de produits (Compare) */
#product-compare table td a strong,
#product-compare table td>a:first-child,
.table-compare td a strong {
  font-style: italic !important;
}

/* 7. Titres d'œuvres lors de la confirmation de commande (Checkout Confirmation) */
#collapse-checkout-confirm table td.text-left>a:first-child,
.checkout-cart table td.text-left>a:first-child,
#checkout-confirm table td.text-left>a:first-child {
  font-style: italic !important;
}

/* 8. Titres d'œuvres dans l'historique des commandes (Order Info) */
#account-order .table-responsive table tbody td.text-left>a:first-child {
  font-style: italic !important;
}

/* 9. Titres d'œuvres dans la recherche instantanée (Live Search) */
.live-search ul li .product-name,
.live-search ul li .product-name a,
.live-search-result h4,
.live-search-result .product-name {
  font-style: italic !important;
}

/* 10. Titres d'œuvres dans les articles de blog (Related products) */
.blog-related-products a.name,
.blog-product-title,
.article-related-products h4 a {
  font-style: italic !important;
}

/* 11. Préservation du style ROMAN / NORMAL (non italique) pour les noms d'artistes et métadonnées */
.artist-name,
.artist-header-link,
.product-artist-header a,
.pdp-artist-fullname,
.pdp-artist-link,
.pdp-artist-dates,
.pdp-artist-role,
.pdp-chip-value,
.pdp-chip-label,
.pdp-stock-value,
.pdp-stock-label,
.product-desc,
.pdp-desc-text {
  font-style: normal !important;
}

/* ==========================================================================
   26. ANIMATION ASYMÉTRIQUE DES BORDURES HAUT-DROITE & BAS-GAUCHE (LIVING CORNERS)
   Look ultra moderne, soft, très subtil — équilibré pour thèmes sombre et clair.
   Effet "pas courant et smart" : illumination diagonale organique des deux coins
   opposés (équerres de lumière fuselées + micro-aura diffuse) sur survol.
   Cibles : Cartes (.product-thumb), Boutons (.btn-primary, .btn-default, filtres),
   Menus (.list-group a, #menu a), Boîtes de commande & Tuiles dimensions.
   ========================================================================== */

/* Éléments cibles : positionnement relatif garanti */
.product-thumb,
.pdp-dim-tile,
.pdp-identity-card,
.pdp-dimensions-card,
.pdp-purchase-card,
.pdp-guarantee-card,
.product-product .thumbnail,
#account-login .well,
#affiliate-login .well,
.account-dash-box,
.btn-primary,
.btn-default,
.pdp-wishlist-btn,
#button-filter,
.list-group a.list-group-item,
#menu .nav>li>a,
.dropdown-menu>li>a,
.corner-accent-hover {
  position: relative !important;
}

/* ==========================================================================
   26 & 27. HAUTE PRÉCISION GALERIE : ÉQUERRES D'ART ÉPURÉES (LIVING CORNERS)
   Aesthetic: Trait de laque japonaise (Urushi / Nuance d'accent) 1.5px net.
   - Zéro halo rouge flou, zéro bavure (box-shadow: none).
   - Épouse avec exactitude mathématique les arrondis (border-radius: inherit)
     sans angles droits coupés ni débordements.
   - Appliqué avec la même pureté et finesse en THÈME SOMBRE et THÈME CLAIR.
   ========================================================================== */

/* 1. ÉLÉVATION GALERIE SUR LES CARTES AU SURVOL */
.product-thumb {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
}

html[data-theme="dark"] .product-thumb:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .product-thumb:hover {
  transform: translateY(-4px) !important;
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
}

/* Élévation des tuiles Dimensions PDP */
.pdp-dim-tile {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

html[data-theme="dark"] .pdp-dim-tile:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="light"] .pdp-dim-tile:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent-border-hover, var(--accent-color)) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

/* 2. BASE UNIVERSELLE DES ÉQUERRES : BORDURE 1.5px COURBÉE VIA MASQUES RADIAUX */
.product-thumb::before,
.pdp-dim-tile::before,
.pdp-identity-card::before,
.pdp-dimensions-card::before,
.pdp-purchase-card::before,
.pdp-guarantee-card::before,
.product-product .thumbnail::before,
#account-login .well::before,
#affiliate-login .well::before,
.account-dash-box::before,
.btn-primary::before,
.btn-default::before,
.pdp-wishlist-btn::before,
#button-filter::before,
.list-group a.list-group-item::before,
#menu .nav>li>a::before,
.dropdown-menu>li>a::before,
.corner-accent-hover::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 0 !important;
  background-image: none !important;
  border: 1.5px solid var(--corner-accent) !important;
  box-shadow: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. MASQUES RADIAUX ADAPTÉS SELON LA TAILLE DU CONTENEUR */
/* Grandes cartes et panneaux */
.product-thumb::before,
.pdp-identity-card::before,
.pdp-dimensions-card::before,
.pdp-purchase-card::before,
.pdp-guarantee-card::before,
.product-product .thumbnail::before,
#account-login .well::before,
#affiliate-login .well::before,
.account-dash-box::before,
.corner-accent-hover::before {
  -webkit-mask-image:
    radial-gradient(circle at top right, #000 0, #000 22px, transparent 54px),
    radial-gradient(circle at bottom left, #000 0, #000 22px, transparent 54px) !important;
  mask-image:
    radial-gradient(circle at top right, #000 0, #000 22px, transparent 54px),
    radial-gradient(circle at bottom left, #000 0, #000 22px, transparent 54px) !important;
  -webkit-mask-composite: source-over, source-over !important;
  mask-composite: add !important;
}

/* Tuiles moyennes (Dimensions PDP, Menus latéraux list-group) */
.pdp-dim-tile::before,
.list-group a.list-group-item::before {
  -webkit-mask-image:
    radial-gradient(circle at top right, #000 0, #000 14px, transparent 36px),
    radial-gradient(circle at bottom left, #000 0, #000 14px, transparent 36px) !important;
  mask-image:
    radial-gradient(circle at top right, #000 0, #000 14px, transparent 36px),
    radial-gradient(circle at bottom left, #000 0, #000 14px, transparent 36px) !important;
  -webkit-mask-composite: source-over, source-over !important;
  mask-composite: add !important;
}

/* Boutons compacts & Liens menus */
.btn-primary::before,
.btn-default::before,
.pdp-wishlist-btn::before,
#button-filter::before,
#menu .nav>li>a::before,
.dropdown-menu>li>a::before {
  -webkit-mask-image:
    radial-gradient(circle at top right, #000 0, #000 10px, transparent 24px),
    radial-gradient(circle at bottom left, #000 0, #000 10px, transparent 24px) !important;
  mask-image:
    radial-gradient(circle at top right, #000 0, #000 10px, transparent 24px),
    radial-gradient(circle at bottom left, #000 0, #000 10px, transparent 24px) !important;
  -webkit-mask-composite: source-over, source-over !important;
  mask-composite: add !important;
}

/* Boutons d'action dans les cartes (.button-group) : capsules pleines sans masque d'angle interne */
.product-thumb .button-group>button::before,
.product-thumb .button-group>a::before {
  display: none !important;
  content: none !important;
}

/* 4. ÉTATS DE SURVOL ACTIFS (Opacité 1 pure, Zéro halo flou) */
.product-thumb:hover::before,
.pdp-identity-card:hover::before,
.pdp-dimensions-card:hover::before,
.pdp-purchase-card:hover::before,
.pdp-guarantee-card:hover::before,
.product-product .thumbnail:hover::before,
#account-login .well:hover::before,
#affiliate-login .well:hover::before,
.account-dash-box:hover::before,
.corner-accent-hover:hover::before,
.pdp-dim-tile:hover::before,
.list-group a.list-group-item:hover::before,
.btn-primary:hover::before,
.btn-default:hover::before,
.pdp-wishlist-btn:hover::before,
#button-filter:hover::before,
#menu .nav>li>a:hover::before,
.dropdown-menu>li>a:hover::before {
  opacity: 1 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   28. RÉPERTOIRE DES ARTISTES & AUTEURS (.manufacturer-directory-page)
   Présentation sobre, ultra-moderne & barre alphabétique tactile responsive
   ========================================================================== */

.manufacturer-directory-page {
  padding-bottom: 60px;
}

/* 1. Hero Header */
.manufacturer-hero {
  text-align: center;
  padding: 30px 15px 25px;
  max-width: 900px;
  margin: 0 auto;
}

.manufacturer-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: var(--theme-red-bg);
  border: 1px solid var(--theme-red-border);
  color: var(--theme-red);
  margin-bottom: 14px;
}

.manufacturer-hero-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-red);
  box-shadow: 0 0 6px var(--theme-red);
}

.manufacturer-hero-title {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--theme-text-primary);
  margin: 0 0 12px 0;
  line-height: 1.25;
  letter-spacing: 0.5px;
}

.manufacturer-hero-sub {
  font-size: 14px;
  color: var(--theme-text-secondary);
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 680px;
}

/* 2. Toolbar (Stats + Live Search) */
.manufacturer-hero-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 15px;
}

.manufacturer-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.manufacturer-stats .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--theme-text-muted);
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  padding: 7px 14px;
  border-radius: 9999px;
  box-shadow: var(--theme-shadow-sm);
}

.manufacturer-stats .stat-pill strong {
  color: var(--theme-text-primary);
  font-weight: 700;
}

.manufacturer-search-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.manufacturer-search-wrap .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-text-muted);
  font-size: 14px;
  pointer-events: none;
}

.manufacturer-search-wrap .form-control {
  height: 42px;
  padding-left: 40px;
  padding-right: 36px;
  border-radius: 9999px;
  background: var(--theme-bg-surface) !important;
  border: 1px solid var(--theme-border-medium) !important;
  color: var(--theme-text-primary) !important;
  font-size: 13px;
  transition: all 0.25s ease;
  box-shadow: var(--theme-shadow-sm);
}

.manufacturer-search-wrap .form-control:focus {
  border-color: var(--theme-red) !important;
  box-shadow: 0 0 0 3px var(--theme-red-bg) !important;
  outline: none;
}

.manufacturer-search-wrap .clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--theme-text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.manufacturer-search-wrap .clear-btn:hover {
  color: var(--theme-red);
}

/* 3. Barre Alphabétique Sticky (Desktop & Smartphone) */
.manufacturer-alphabet-nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 90px;
  z-index: 850;
  margin: 10px 0 30px;
  border-radius: 14px;
  transition: top 0.25s ease, box-shadow 0.25s ease;
}

html[data-theme="dark"] .manufacturer-alphabet-nav {
  background: rgba(18, 18, 22, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .manufacturer-alphabet-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.alphabet-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.alphabet-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
}

.alpha-chip {
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  color: var(--theme-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.alpha-chip:hover {
  background: var(--theme-red-bg);
  border-color: var(--theme-red-border);
  color: var(--theme-red) !important;
  transform: translateY(-1px);
}

.alpha-chip.is-active {
  background: var(--theme-red) !important;
  border-color: var(--theme-red) !important;
  color: #ffffff !important;
  box-shadow: var(--accent-shadow-sm) !important;
  transform: scale(1.08);
}

.alpha-chip-top {
  color: var(--theme-text-muted);
  font-size: 11px;
}

.alpha-chip-top:hover {
  color: var(--theme-red) !important;
}

/* 4. Sections de Lettres & En-tête */
.manufacturer-letter-section {
  scroll-margin-top: 150px;
  margin-bottom: 35px;
}

.letter-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-top: 10px;
}

.letter-badge-wrap {
  display: flex;
  align-items: center;
}

.letter-badge {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  color: var(--theme-red);
  box-shadow: var(--theme-shadow-sm);
}

.letter-line {
  flex: 1;
  height: 1px;
  background: var(--theme-hr-gradient);
}

.letter-count {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--theme-text-muted);
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  padding: 4px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}

/* 5. Grille & Cartes Artistes */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.artist-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  text-decoration: none !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--theme-shadow-sm);
  position: relative;
  overflow: hidden;
}

.artist-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 8px;
}

.artist-names {
  font-size: 13.5px;
  line-height: 1.35;
  word-break: break-word;
}

.artist-name-family {
  font-weight: 700;
  color: var(--theme-text-primary);
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.artist-name-first {
  font-weight: 400;
  color: var(--theme-text-secondary);
  margin-left: 3px;
}

.artist-dates {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--theme-text-muted);
}

.artist-dates i {
  font-size: 10px;
  opacity: 0.75;
}

.artist-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  color: var(--theme-text-muted);
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

/* Survol Artiste : Sobre & Ultra Moderne */
.artist-card-item:hover {
  transform: translateY(-2px);
  border-color: var(--theme-red-border);
  box-shadow: var(--theme-shadow-md);
  background: var(--theme-bg-elevated);
}

.artist-card-item:hover .artist-name-family {
  color: var(--theme-red);
}

.artist-card-item:hover .artist-card-icon {
  background: var(--theme-red);
  border-color: var(--theme-red);
  color: #ffffff;
  transform: translateX(3px);
}

/* 6. Message Aucun Résultat */
.artist-no-results {
  text-align: center;
  padding: 50px 20px;
  background: var(--theme-bg-surface);
  border: 1px dashed var(--theme-border-medium);
  border-radius: 16px;
  margin: 20px 0;
}

.artist-no-results .no-results-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--theme-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-muted);
  font-size: 18px;
}

.artist-no-results h3 {
  font-size: 17px;
  color: var(--theme-text-primary);
  margin-bottom: 8px;
}

.artist-no-results p {
  font-size: 13.5px;
  color: var(--theme-text-muted);
}

.artist-no-results a {
  color: var(--theme-red);
  text-decoration: underline;
}

/* 7. RESPONSIVE SMARTPHONE (Touch & Scroll Optimization) */
@media (max-width: 991px) {
  .manufacturer-alphabet-nav {
    top: 60px;
    margin: 5px 0 20px;
    border-radius: 12px;
  }

  .alphabet-track {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 8px 8px;
    gap: 4px;
    scrollbar-width: none;
  }

  .alphabet-track::-webkit-scrollbar {
    display: none;
  }

  .alpha-chip {
    scroll-snap-align: center;
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .alphabet-track-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--theme-bg-surface));
    opacity: 0.8;
  }

  .manufacturer-letter-section {
    scroll-margin-top: 115px;
  }

  .artist-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .manufacturer-hero-title {
    font-size: 24px;
  }

  .manufacturer-hero {
    padding: 20px 10px 15px;
  }

  .manufacturer-hero-toolbar {
    flex-direction: column;
    gap: 12px;
  }

  .manufacturer-search-wrap {
    max-width: 100%;
  }

  .artist-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .artist-card-item {
    padding: 11px 13px;
  }

  .letter-badge {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
}


/* ==========================================================================
   GALERIE MAILLARD-FOUILLEUL — DISCREET FLOATING ACCENT COLOR PICKER
   Aesthetic: Ultra-discreet floating frosted jewel + luxury popover
   Supports dynamic real-time color shifts across Light & Dark themes
   ========================================================================== */
.accent-palette-widget {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 9998;
  font-family: inherit;
}

.accent-palette-trigger {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.28s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.accent-palette-trigger:hover,
.accent-palette-trigger:focus-visible {
  transform: translateY(-2px) scale(1.08);
  border-color: var(--accent-color);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.accent-palette-trigger:active {
  transform: translateY(0) scale(0.95);
}

/* Central glowing color bead */
.accent-bead {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.accent-icon {
  font-size: 8px;
  color: #ffffff;
  opacity: 0.92;
  line-height: 1;
}

/* Popover Panel */
.accent-palette-popover {
  position: absolute;
  bottom: 44px;
  left: 0;
  width: 236px;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-medium);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.accent-palette-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.accent-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

.accent-popover-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.accent-popover-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--theme-text-muted);
}

.accent-theme-badge {
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--accent-bg-medium);
  color: var(--theme-text-primary);
  border: 1px solid var(--accent-border);
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  outline: none;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.accent-theme-badge:hover {
  background: var(--accent-color, #c52222);
  color: #ffffff;
  border-color: var(--accent-color, #c52222);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color, #c52222) 40%, transparent);
}

.accent-theme-badge:active {
  transform: translateY(0) scale(0.96);
}

.accent-popover-close {
  background: none;
  border: none;
  color: var(--theme-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.15s ease;
}

.accent-popover-close:hover {
  color: var(--theme-text-primary);
}

/* Swatches Grid */
.accent-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.accent-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.accent-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.accent-swatch.is-active {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px var(--theme-bg-surface), 0 0 0 4px var(--swatch-color);
}

/* Custom Color & Reset Row */
.accent-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border-subtle);
}

.accent-custom-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.accent-custom-picker-wrap {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.accent-custom-picker-wrap input[type="color"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.accent-custom-text {
  font-size: 11px;
  color: var(--theme-text-secondary);
  font-weight: 500;
}

.accent-reset-btn {
  background: none;
  border: none;
  color: var(--theme-text-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.accent-reset-btn:hover {
  color: var(--accent-color);
  background: var(--accent-bg-subtle);
}

/* Mobile Placement */
@media (max-width: 767px) {
  .accent-palette-widget {
    bottom: 68px;
    left: 14px;
  }
}

/* ==========================================================================
   29. LIGHTBOX MAGNIFIC POPUP — HAUTE GALERIE THEME-AWARE (DARK & LIGHT)
   Theme Clair : Overlay blanc/perle lumineux + Textes et contrôles foncés
   Theme Sombre : Overlay obsidian velours + Textes et contrôles clairs
   Accentuation dynamique : Flèches et bouton fermeture réagissent à --accent-color
   ========================================================================== */

/* Structure & Transition */
.mfp-bg {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease !important;
}

.mfp-wrap {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   A. THÈME CLAIR (LIGHT THEME LIGHTBOX)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .mfp-bg {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  opacity: 1 !important;
}

html[data-theme="light"] .mfp-title {
  color: #18181b !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: none !important;
  line-height: 1.5 !important;
  padding-top: 6px !important;
}

html[data-theme="light"] .mfp-counter {
  color: #52525b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-shadow: none !important;
  padding-top: 6px !important;
}

html[data-theme="light"] .mfp-figure small {
  color: #71717a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .mfp-figure:after {
  background: #ffffff !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] img.mfp-img {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important;
  border-radius: 2px !important;
}

html[data-theme="light"] .mfp-image-holder .mfp-close,
html[data-theme="light"] .mfp-iframe-holder .mfp-close,
html[data-theme="light"] .mfp-close {
  color: #18181b !important;
  opacity: 0.75 !important;
  text-shadow: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
  font-weight: 300 !important;
  font-size: 32px !important;
  line-height: 44px !important;
  cursor: pointer !important;
}

html[data-theme="light"] .mfp-close:hover,
html[data-theme="light"] .mfp-close:focus {
  color: var(--accent-color) !important;
  opacity: 1 !important;
  transform: scale(1.15) rotate(90deg) !important;
}

/* Light Theme Navigation Arrows */
html[data-theme="light"] .mfp-arrow {
  opacity: 0.75 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

html[data-theme="light"] .mfp-arrow:hover,
html[data-theme="light"] .mfp-arrow:focus {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

html[data-theme="light"] .mfp-arrow-left:after,
html[data-theme="light"] .mfp-arrow-left .mfp-a {
  border-right-color: #18181b !important;
  transition: border-right-color 0.2s ease !important;
}

html[data-theme="light"] .mfp-arrow-left:hover:after,
html[data-theme="light"] .mfp-arrow-left:hover .mfp-a {
  border-right-color: var(--accent-color) !important;
}

html[data-theme="light"] .mfp-arrow-left:before,
html[data-theme="light"] .mfp-arrow-left .mfp-b {
  border-right-color: rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .mfp-arrow-right:after,
html[data-theme="light"] .mfp-arrow-right .mfp-a {
  border-left-color: #18181b !important;
  transition: border-left-color 0.2s ease !important;
}

html[data-theme="light"] .mfp-arrow-right:hover:after,
html[data-theme="light"] .mfp-arrow-right:hover .mfp-a {
  border-left-color: var(--accent-color) !important;
}

html[data-theme="light"] .mfp-arrow-right:before,
html[data-theme="light"] .mfp-arrow-right .mfp-b {
  border-left-color: rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .mfp-preloader {
  color: #52525b !important;
}

/* --------------------------------------------------------------------------
   B. THÈME SOMBRE (DARK THEME LIGHTBOX)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .mfp-bg,
:root:not([data-theme="light"]) .mfp-bg {
  background: rgba(9, 9, 11, 0.96) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  opacity: 1 !important;
}

html[data-theme="dark"] .mfp-title,
:root:not([data-theme="light"]) .mfp-title {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.5 !important;
  padding-top: 6px !important;
}

html[data-theme="dark"] .mfp-counter,
:root:not([data-theme="light"]) .mfp-counter {
  color: #a1a1aa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  padding-top: 6px !important;
}

html[data-theme="dark"] .mfp-figure small,
:root:not([data-theme="light"]) .mfp-figure small {
  color: #a1a1aa !important;
}

html[data-theme="dark"] .mfp-figure:after,
:root:not([data-theme="light"]) .mfp-figure:after {
  background: #141418 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] img.mfp-img,
:root:not([data-theme="light"]) img.mfp-img {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75) !important;
  border-radius: 2px !important;
}

html[data-theme="dark"] .mfp-image-holder .mfp-close,
html[data-theme="dark"] .mfp-iframe-holder .mfp-close,
html[data-theme="dark"] .mfp-close,
:root:not([data-theme="light"]) .mfp-close {
  color: #ffffff !important;
  opacity: 0.8 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
  font-weight: 300 !important;
  font-size: 32px !important;
  line-height: 44px !important;
  cursor: pointer !important;
}

html[data-theme="dark"] .mfp-close:hover,
html[data-theme="dark"] .mfp-close:focus,
:root:not([data-theme="light"]) .mfp-close:hover,
:root:not([data-theme="light"]) .mfp-close:focus {
  color: var(--accent-color) !important;
  opacity: 1 !important;
  transform: scale(1.15) rotate(90deg) !important;
}

/* Dark Theme Navigation Arrows */
html[data-theme="dark"] .mfp-arrow,
:root:not([data-theme="light"]) .mfp-arrow {
  opacity: 0.8 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

html[data-theme="dark"] .mfp-arrow:hover,
html[data-theme="dark"] .mfp-arrow:focus,
:root:not([data-theme="light"]) .mfp-arrow:hover,
:root:not([data-theme="light"]) .mfp-arrow:focus {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

html[data-theme="dark"] .mfp-arrow-left:after,
html[data-theme="dark"] .mfp-arrow-left .mfp-a,
:root:not([data-theme="light"]) .mfp-arrow-left:after,
:root:not([data-theme="light"]) .mfp-arrow-left .mfp-a {
  border-right-color: #ffffff !important;
  transition: border-right-color 0.2s ease !important;
}

html[data-theme="dark"] .mfp-arrow-left:hover:after,
html[data-theme="dark"] .mfp-arrow-left:hover .mfp-a,
:root:not([data-theme="light"]) .mfp-arrow-left:hover:after,
:root:not([data-theme="light"]) .mfp-arrow-left:hover .mfp-a {
  border-right-color: var(--accent-color) !important;
}

html[data-theme="dark"] .mfp-arrow-left:before,
html[data-theme="dark"] .mfp-arrow-left .mfp-b,
:root:not([data-theme="light"]) .mfp-arrow-left:before,
:root:not([data-theme="light"]) .mfp-arrow-left .mfp-b {
  border-right-color: rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .mfp-arrow-right:after,
html[data-theme="dark"] .mfp-arrow-right .mfp-a,
:root:not([data-theme="light"]) .mfp-arrow-right:after,
:root:not([data-theme="light"]) .mfp-arrow-right .mfp-a {
  border-left-color: #ffffff !important;
  transition: border-left-color 0.2s ease !important;
}

html[data-theme="dark"] .mfp-arrow-right:hover:after,
html[data-theme="dark"] .mfp-arrow-right:hover .mfp-a,
:root:not([data-theme="light"]) .mfp-arrow-right:hover:after,
:root:not([data-theme="light"]) .mfp-arrow-right:hover .mfp-a {
  border-left-color: var(--accent-color) !important;
}

html[data-theme="dark"] .mfp-arrow-right:before,
html[data-theme="dark"] .mfp-arrow-right .mfp-b,
:root:not([data-theme="light"]) .mfp-arrow-right:before,
:root:not([data-theme="light"]) .mfp-arrow-right .mfp-b {
  border-left-color: rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .mfp-preloader,
:root:not([data-theme="light"]) .mfp-preloader {
  color: #a1a1aa !important;
}

/* ==========================================================================
   30. FLOATING CONTACT HELPER & SCROLL-TO-TOP DOCK (#contact-helper-scrollToTop)
   Position : Flottant au milieu de la hauteur disponible (top: 50%) et collé
              à la droite du viewport (right: 0).
   Comportement : Apparaît lorsqu'on a scrollé vers le bas et qu'on remonte.
   ========================================================================== */
#contact-helper-scrollToTop {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 5px;
  gap: 4px;
  background: color-mix(in srgb, var(--theme-bg-surface, #121216) 90%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--theme-border-medium, rgba(255, 255, 255, 0.14));
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -6px 8px 28px rgba(0, 0, 0, 0.38), -1px 0 0 var(--accent-border-subtle, rgba(197, 34, 34, 0.22));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(105%, -50%, 0);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0.28s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

html[data-theme="light"] #contact-helper-scrollToTop {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: -6px 8px 26px rgba(0, 0, 0, 0.1), -1px 0 0 var(--accent-border-subtle, rgba(197, 34, 34, 0.2));
}

#contact-helper-scrollToTop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, -50%, 0);
}

#contact-helper-scrollToTop:hover {
  border-color: var(--accent-border, rgba(197, 34, 34, 0.45));
}

#contact-helper-scrollToTop .ch-dock-divider {
  width: 22px;
  height: 1px;
  background: var(--theme-border-subtle, rgba(255, 255, 255, 0.12));
  margin: 2px 0;
  flex-shrink: 0;
}

html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-divider {
  background: rgba(0, 0, 0, 0.1);
}

#contact-helper-scrollToTop .ch-dock-item {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--theme-text-secondary, #d4d4d8) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none !important;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-item {
  color: #3f3f46 !important;
}

/* Bouton principal Scroll-To-Top mis en valeur */
#contact-helper-scrollToTop .ch-dock-top {
  background: var(--accent-bg-subtle, rgba(197, 34, 34, 0.12));
  border-color: var(--accent-border-subtle, rgba(197, 34, 34, 0.28));
  color: var(--accent-color, #c52222) !important;
}

html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-top {
  color: var(--accent-color, #c52222) !important;
}

#contact-helper-scrollToTop .ch-dock-item i {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#contact-helper-scrollToTop .ch-dock-item:hover,
#contact-helper-scrollToTop .ch-dock-item:focus-visible,
html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-item:hover,
html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-item:focus-visible {
  background: var(--accent-color, #c52222) !important;
  border-color: var(--accent-color, #c52222) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color, #c52222) 40%, transparent);
}

#contact-helper-scrollToTop .ch-dock-top:hover i {
  transform: translateY(-2px);
}

#contact-helper-scrollToTop .ch-dock-item:not(.ch-dock-top):hover i {
  transform: scale(1.12);
}

#contact-helper-scrollToTop .ch-dock-item:active {
  transform: scale(0.94);
}

/* Tooltip latéral gauche au survol (Desktop) */
#contact-helper-scrollToTop .ch-dock-item::before {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  right: calc(100% + 12px) !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translate3d(6px, -50%, 0) !important;
  background: var(--theme-bg-elevated, #18181f) !important;
  color: var(--theme-text-primary, #ffffff) !important;
  border: 1px solid var(--theme-border-medium, rgba(255, 255, 255, 0.14)) !important;
  padding: 5px 11px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
  z-index: 10000 !important;
}

html[data-theme="light"] #contact-helper-scrollToTop .ch-dock-item::before {
  background: #18181b !important;
  color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
}

#contact-helper-scrollToTop .ch-dock-item:hover::before,
#contact-helper-scrollToTop .ch-dock-item:focus-visible::before {
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  border: 1px solid var(--theme-border-medium, rgba(255, 255, 255, 0.14)) !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: translate3d(0, -50%, 0) !important;
}

/* Adaptation Mobile & Tablette */
@media (max-width: 767px) {
  #contact-helper-scrollToTop {
    padding: 5px 4px;
    gap: 3px;
    border-radius: 12px 0 0 12px;
  }

  #contact-helper-scrollToTop .ch-dock-item {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
  }

  #contact-helper-scrollToTop .ch-dock-item::before {
    display: none;
  }
}

/* ==========================================================================
   31. MODULE IMMERSIF "MISE EN SITUATION (ÉCHELLE 1:1)" (FICHE PRODUIT AR)
   ========================================================================== */

/* Bouton d'accès rapide dans la carte Dimensions */
.pdp-ar-quick-cta-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--theme-border-subtle, rgba(255, 255, 255, 0.1));
}

.pdp-ar-quick-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--theme-accent-subtle, rgba(201, 169, 110, 0.1));
  border: 1px solid var(--theme-accent-border, rgba(201, 169, 110, 0.32));
  color: var(--theme-text-primary, #f4f4f6);
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
}

.pdp-ar-quick-cta:hover {
  background: var(--theme-accent-medium, rgba(201, 169, 110, 0.18));
  border-color: var(--theme-red, #c9a96e);
  transform: translateY(-1px);
}

.pdp-ar-quick-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--theme-red, #c9a96e);
  color: #111113;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.pdp-ar-quick-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pdp-ar-quick-text strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--theme-text-primary, #f4f4f6);
  line-height: 1.25;
}

.pdp-ar-quick-text small {
  font-size: 11px;
  color: var(--theme-text-secondary, #a1a1aa);
  line-height: 1.3;
}

.pdp-ar-quick-arrow {
  color: var(--theme-red, #c9a96e);
  font-size: 13px;
  transition: transform 0.2s ease;
}

.pdp-ar-quick-cta:hover .pdp-ar-quick-arrow {
  transform: translateX(3px);
}

/* Overlay Popup Responsive du module AR */
.pdp-ar-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.pdp-ar-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pdp-ar-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* Carte principale du module AR dans la popup */
.pdp-ar-gallery-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  max-height: calc(100vh - 32px);
  margin: 0;
  background: var(--theme-bg-card, #18181c);
  border: 1px solid var(--theme-border-medium, rgba(255, 255, 255, 0.14));
  border-radius: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pdp-ar-popup-overlay.is-open .pdp-ar-gallery-card {
  transform: translateY(0) scale(1);
}

.ar-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--theme-bg-elevated, #1d1d22);
}

.ar-eyebrow-badge {
  display: none !important;
}

.ar-module-title {
  margin: 0 !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--theme-text-primary, #f4f4f6) !important;
  line-height: 1.2 !important;
}

.ar-module-subtitle {
  display: none !important;
}

.ar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ar-scale-ratio-pill {
  display: none !important;
}

.ar-popup-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--theme-red, #c9a96e);
  border: 1px solid var(--theme-red, #c9a96e);
  color: #111113 !important;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ar-popup-close-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Scène du décor (ratio exact 1440 / 1092 de la galerie au mur vierge) */
.ar-stage-viewport {
  position: relative;
  width: min(100%, 72vh);
  margin: 0 auto;
  aspect-ratio: 1440 / 1092;
  background: #d8d9dd;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.ar-stage-bg-img,
.ar-stage-bg-original {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill;
  display: block;
  pointer-events: none;
}

.ar-stage-bg-original {
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 8;
}

.ar-stage-viewport.ar-showing-original .ar-stage-bg-original {
  opacity: 1;
}

/* Emplacement fantôme du cadre original - Retiré à la demande */
.ar-original-frame-ghost {
  display: none !important;
}

.ar-stage-viewport.ar-show-rulers .ar-original-frame-ghost {
  display: none !important;
}

/* Bouton comparer décor d'origine masqué à la demande */
.ar-util-btn[data-ar-action="compare-original"] {
  display: none !important;
}

.ar-ghost-label {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.72);
  background: rgba(255, 255, 255, 0.75);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Repères d'échelle du mobilier dans la pièce */
.ar-furniture-marker {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ar-stage-viewport.ar-show-rulers .ar-furniture-marker {
  opacity: 1;
}

/* Mobilier galerie : Chaise de consultation (H. 78 cm) */
.ar-marker-chair {
  left: 39%;
  top: 50%;
  width: 14%;
  height: 44%;
}

.ar-marker-chair .ar-marker-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  border-left: 1px dashed color-mix(in srgb, var(--accent-color, #c52222) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-furniture-marker span {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(24, 24, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* Mobilier galerie : Chevalet porte-gravures (H. 90 cm) */
.ar-marker-easel {
  left: 55%;
  top: 47%;
  width: 16%;
  height: 46%;
}

.ar-marker-easel .ar-marker-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  border-left: 1px dashed color-mix(in srgb, var(--accent-color, #c52222) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Assemblage de l'œuvre accrochée sur le mur */
.ar-wall-artwork-assembly {
  position: absolute;
  left: 47.50%;
  top: 32.50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
  z-index: 4;
  cursor: grab;
  transition: box-shadow 0.2s ease;
}

.ar-wall-artwork-assembly:active,
.ar-wall-artwork-assembly.is-dragging {
  cursor: grabbing;
}

/* Cadre extérieur */
.ar-frame-outer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  transition: padding 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* Style 1 : Cadre Fin Galerie (similaire au cadre original mais adapté à l'estampe) */
.ar-frame-outer.ar-frame-style-slim {
  background: linear-gradient(135deg, #4b5563 0%, #1f2937 50%, #111827 100%);
  box-shadow:
    -3px 6px 14px rgba(15, 23, 42, 0.34),
    -1px 2px 4px rgba(15, 23, 42, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Style 2 : Cadre Galerie Noir & Marie-Louise */
.ar-frame-outer.ar-frame-style-noir {
  background: linear-gradient(135deg, #27272a 0%, #141417 55%, #09090b 100%);
  box-shadow:
    -4px 8px 18px rgba(15, 23, 42, 0.38),
    -1px 3px 5px rgba(15, 23, 42, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Style 3 : Cadre Bois Doré & Marie-Louise */
.ar-frame-outer.ar-frame-style-or {
  background: linear-gradient(135deg, #d4af37 0%, #aa8232 48%, #78581a 100%);
  box-shadow:
    -4px 8px 18px rgba(15, 23, 42, 0.36),
    -1px 3px 5px rgba(15, 23, 42, 0.25),
    inset 0 0 0 1px rgba(255, 245, 200, 0.45);
}

/* Style 4 : Œuvre Nue (sans cadre, posée sur le mur) */
.ar-frame-outer.ar-frame-style-bare {
  background: transparent;
  box-shadow:
    -2px 4px 9px rgba(15, 23, 42, 0.24),
    0 1px 3px rgba(15, 23, 42, 0.16);
}

/* Passe-partout (Marie-Louise) */
.ar-frame-mat {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #f8f6f0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  transition: padding 0.18s ease;
}

.ar-frame-style-bare .ar-frame-mat {
  background: transparent;
  box-shadow: none;
}

/* Biseau intérieur de la Marie-Louise */
.ar-artwork-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #f3efe6;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.ar-frame-style-bare .ar-artwork-canvas {
  box-shadow: none;
}

.ar-artwork-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill;
  display: block;
  pointer-events: none;
  filter: contrast(1.02) brightness(0.98);
}

/* Règles de cotes autour de l'œuvre (Largeur & Hauteur) */
.ar-artwork-ruler {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 6;
}

.ar-stage-viewport.ar-show-rulers .ar-artwork-ruler {
  opacity: 1;
}

.ar-ruler-top {
  left: 0;
  right: 0;
  top: -24px;
  height: 16px;
  border-bottom: 1.5px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-ruler-top .ar-ruler-tick-left,
.ar-ruler-top .ar-ruler-tick-right {
  position: absolute;
  bottom: -4px;
  width: 1.5px;
  height: 8px;
  background: #1e293b;
}

.ar-ruler-top .ar-ruler-tick-left {
  left: 0;
}

.ar-ruler-top .ar-ruler-tick-right {
  right: 0;
}

.ar-ruler-side {
  top: 0;
  bottom: 0;
  left: -26px;
  width: 18px;
  border-right: 1.5px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-ruler-side .ar-ruler-tick-top,
.ar-ruler-side .ar-ruler-tick-bottom {
  position: absolute;
  right: -4px;
  height: 1.5px;
  width: 8px;
  background: #1e293b;
}

.ar-ruler-side .ar-ruler-tick-top {
  top: 0;
}

.ar-ruler-side .ar-ruler-tick-bottom {
  bottom: 0;
}

.ar-ruler-top-val,
.ar-ruler-side-val {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: #0f172a;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ar-ruler-top-val {
  transform: translateY(-2px);
}

.ar-ruler-side-val {
  transform: translateX(-50%) rotate(-90deg);
}

/* Barre flottante au bas de la scène */
.ar-stage-floating-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 7;
  pointer-events: none;
}

.ar-drag-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

.ar-stage-pill-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--theme-red, #c9a96e);
  color: #111113;
  border: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* Panneau de contrôles sous la scène (compacté visuellement) */
.ar-controls-panel {
  padding: 8px 14px 10px;
  background: var(--theme-bg-elevated, #1d1d22);
  border-top: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ar-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}

.ar-control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 230px;
  min-width: 0;
}

.ar-control-group.ar-dim-ref-group {
  display: none !important;
}

.ar-control-group:last-child {
  flex: 1 1 100%;
}

.ar-control-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--theme-text-muted, #9ca3af);
}

.ar-segmented-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  flex: 1 1 auto;
}

.ar-controls-panel button.ar-seg-btn,
.ar-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 auto;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--theme-bg-surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--theme-text-secondary, #d4d4d8);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ar-seg-btn:hover {
  border-color: var(--theme-border-strong, rgba(255, 255, 255, 0.25));
  color: var(--theme-text-primary, #ffffff);
}

.ar-seg-btn.active {
  background: var(--theme-accent-subtle, rgba(201, 169, 110, 0.18));
  border-color: var(--theme-red, #c9a96e);
  color: var(--theme-red, #c9a96e);
}

.ar-controls-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-top: 6px;
  border-top: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.07));
  width: 100%;
}

.ar-live-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--theme-text-primary, #f4f4f6);
  flex: 1 1 auto;
}

.ar-live-metrics i {
  color: var(--theme-red, #c9a96e);
}

.ar-utility-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
}

.ar-controls-panel button.ar-util-btn,
.ar-util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 auto;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--theme-bg-surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--theme-text-secondary, #a1a1aa);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ar-util-btn.active,
.ar-util-btn:hover {
  border-color: var(--theme-red, #c9a96e);
  color: var(--theme-text-primary, #f4f4f6);
}

.ar-mini-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ar-mini-thumb {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 2px;
  border-radius: 5px;
  background: var(--theme-bg-surface, #222);
  border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.15));
  cursor: pointer;
  overflow: hidden;
}

.ar-mini-thumb.active {
  border-color: var(--theme-red, #c9a96e);
  box-shadow: 0 0 0 1px var(--theme-red, #c9a96e);
}

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

/* Verrouillage du scroll page quand la popup est ouverte */
body.ar-modal-open {
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .pdp-ar-popup-overlay {
    padding: 6px;
  }

  .pdp-ar-gallery-card {
    max-height: calc(100vh - 12px);
    border-radius: 12px;
  }

  .ar-stage-viewport {
    width: 100%;
  }

  .ar-module-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
  }

  .ar-module-title {
    font-size: 17px !important;
  }

  .ar-header-actions {
    width: auto;
    justify-content: flex-end;
  }

  .ar-controls-panel {
    padding: 8px 10px;
    gap: 6px;
  }

  .ar-controls-row {
    gap: 6px;
  }

  .ar-control-group,
  .ar-control-group:last-child {
    flex: 1 1 100%;
    gap: 3px;
  }

  .ar-segmented-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }

  .ar-controls-panel button.ar-seg-btn,
  .ar-seg-btn {
    width: 100%;
    flex: 1 1 calc(50% - 3px);
    font-size: 10.5px;
    padding: 5px 6px;
    white-space: normal;
    line-height: 1.15;
  }

  .ar-segmented-btns > .ar-seg-btn:only-child {
    grid-column: 1 / -1;
  }

  .ar-controls-footer {
    gap: 6px;
    padding-top: 6px;
  }

  .ar-live-metrics {
    font-size: 11px;
    width: 100%;
  }

  .ar-utility-btns {
    width: 100%;
    justify-content: stretch;
  }

  .ar-controls-panel button.ar-util-btn,
  .ar-util-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .ar-furniture-marker span {
    font-size: 8.5px;
    padding: 1px 5px;
  }

  .ar-ruler-top-val,
  .ar-ruler-side-val {
    font-size: 8.5px;
    padding: 1px 4px;
  }

  .pdp-ar-gallery-card.ar-is-fullscreen {
    inset: 6px !important;
    max-height: calc(100vh - 12px) !important;
  }
}

/* ==========================================================================
   34. LISTE DE SOUHAITS (#account-wishlist) — ULTRA-COMPACTE & 100% RESPONSIVE
   Adaptation fluide sur tous les breakpoints (Desktop, Tablette, Mobile, Petit Mobile)
   avec accès direct immédiat aux boutons d'action sans scroll horizontal.
   ========================================================================== */

#account-wishlist #content {
  width: 100% !important;
  max-width: 100% !important;
}

#account-wishlist .wishlist-table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  border: 1px solid var(--theme-border-subtle) !important;
  border-radius: var(--theme-radius-md, 10px) !important;
  background: var(--theme-bg-surface) !important;
  box-shadow: var(--theme-shadow-sm) !important;
  margin-bottom: 18px !important;
}

#account-wishlist .wishlist-table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border: none !important;
  table-layout: auto !important;
}

#account-wishlist .wishlist-table > thead > tr > td {
  padding: 11px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  background: var(--theme-bg-elevated) !important;
  vertical-align: middle !important;
}

#account-wishlist .wishlist-table > tbody > tr > td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  background: var(--theme-bg-surface) !important;
  transition: background-color 0.18s ease !important;
}

#account-wishlist .wishlist-table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

#account-wishlist .wishlist-table > tbody > tr:hover > td {
  background: var(--theme-bg-elevated) !important;
}

#account-wishlist .wl-col-image {
  width: 70px !important;
  text-align: center !important;
}

#account-wishlist .wl-thumb-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#account-wishlist .wl-thumb-wrap img,
#account-wishlist .wl-col-image img {
  width: 52px !important;
  height: 56px !important;
  max-width: 52px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  padding: 3px !important;
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

#account-wishlist .wl-thumb-wrap:hover img {
  border-color: var(--accent-color, var(--theme-red)) !important;
  transform: scale(1.04);
}

#account-wishlist .wl-artwork-link {
  display: inline-block !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  color: var(--theme-text-primary) !important;
  text-decoration: none !important;
}

#account-wishlist .wl-artwork-link:hover {
  color: var(--accent-color, var(--theme-red)) !important;
}

/* Bloc meta condensé (affiché uniquement sous 768px) */
#account-wishlist .wl-mobile-meta {
  display: none;
}

#account-wishlist .wl-col-model {
  font-size: 12.5px !important;
  color: var(--theme-text-secondary) !important;
}

#account-wishlist .wl-col-stock {
  white-space: nowrap !important;
}

#account-wishlist .wl-stock-pill,
#account-wishlist .wl-meta-stock {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  background: var(--accent-bg, rgba(201, 169, 110, 0.12)) !important;
  border: 1px solid var(--accent-border, rgba(201, 169, 110, 0.28)) !important;
  color: var(--accent-color, var(--theme-red)) !important;
}

#account-wishlist .wl-col-price,
#account-wishlist .wl-col-price .price {
  white-space: nowrap !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--theme-text-primary) !important;
}

#account-wishlist .wl-col-action {
  width: 98px !important;
  white-space: nowrap !important;
  text-align: right !important;
}

#account-wishlist .wl-actions-dock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

#account-wishlist .wl-btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#account-wishlist .wl-btn-cart,
html[data-theme="dark"] #account-wishlist .wl-btn-cart,
html[data-theme="light"] #account-wishlist .wl-btn-cart {
  background: var(--accent-bg-medium, rgba(201, 169, 110, 0.16)) !important;
  border: 1px solid var(--accent-border-hover, var(--accent-color)) !important;
  color: var(--accent-color, var(--theme-red)) !important;
  box-shadow: none !important;
}

#account-wishlist .wl-btn-cart:hover,
html[data-theme="dark"] #account-wishlist .wl-btn-cart:hover,
html[data-theme="light"] #account-wishlist .wl-btn-cart:hover {
  background: var(--accent-color, var(--theme-red)) !important;
  border-color: var(--accent-color, var(--theme-red)) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--accent-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.2)) !important;
}

#account-wishlist .wl-btn-remove,
html[data-theme="dark"] #account-wishlist .wl-btn-remove,
html[data-theme="light"] #account-wishlist .wl-btn-remove {
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-medium, rgba(128, 128, 128, 0.25)) !important;
  color: var(--theme-text-secondary) !important;
  box-shadow: none !important;
}

#account-wishlist .wl-btn-remove:hover,
html[data-theme="dark"] #account-wishlist .wl-btn-remove:hover,
html[data-theme="light"] #account-wishlist .wl-btn-remove:hover {
  background: rgba(220, 38, 38, 0.14) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  transform: translateY(-1px) !important;
}

/* Breakpoint Tablette (768px - 991px) : Tableau compact sans débordement */
@media (min-width: 768px) and (max-width: 991px) {
  #account-wishlist .wishlist-table > thead > tr > td,
  #account-wishlist .wishlist-table > tbody > tr > td {
    padding: 9px 10px !important;
  }

  #account-wishlist .wl-col-image {
    width: 58px !important;
  }

  #account-wishlist .wl-thumb-wrap img {
    width: 44px !important;
    height: 48px !important;
  }

  #account-wishlist .wl-artwork-link {
    font-size: 12.5px !important;
  }

  #account-wishlist .wl-col-model,
  #account-wishlist .wl-col-price .price {
    font-size: 12px !important;
  }

  #account-wishlist .wl-col-action {
    width: 86px !important;
  }

  #account-wishlist .wl-btn-action {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}

/* Breakpoint Mobile & Phablet (<= 767px) : Cartes-lignes ultra-compactes avec boutons d'action toujours visibles */
@media (max-width: 767px) {
  #account-wishlist .wishlist-table-responsive {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }

  #account-wishlist .wishlist-table,
  #account-wishlist .wishlist-table > tbody {
    display: block !important;
    width: 100% !important;
  }

  #account-wishlist .wishlist-table > thead,
  #account-wishlist .wl-col-model,
  #account-wishlist .wl-col-stock,
  #account-wishlist .wl-col-price {
    display: none !important;
  }

  #account-wishlist .wishlist-table > tbody > tr.wishlist-item-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 11px !important;
    margin-bottom: 8px !important;
    background: var(--theme-bg-surface) !important;
    border: 1px solid var(--theme-border-subtle) !important;
    border-radius: 10px !important;
    box-shadow: var(--theme-shadow-sm) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #account-wishlist .wishlist-table > tbody > tr.wishlist-item-row:last-child {
    margin-bottom: 0 !important;
  }

  #account-wishlist .wishlist-table > tbody > tr.wishlist-item-row > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
  }

  #account-wishlist .wl-col-image {
    width: 52px !important;
  }

  #account-wishlist .wl-thumb-wrap img,
  #account-wishlist .wl-col-image img {
    width: 50px !important;
    height: 54px !important;
    max-width: 50px !important;
    padding: 2px !important;
  }

  #account-wishlist .wl-col-name {
    min-width: 0 !important;
  }

  #account-wishlist .wl-artwork-link {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
    word-break: break-word !important;
  }

  #account-wishlist .wl-mobile-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 7px !important;
    line-height: 1.2 !important;
  }

  #account-wishlist .wl-meta-model {
    font-size: 11px !important;
    color: var(--theme-text-muted) !important;
  }

  #account-wishlist .wl-meta-stock {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  #account-wishlist .wl-meta-price {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--accent-color, var(--theme-text-primary)) !important;
    white-space: nowrap !important;
  }

  #account-wishlist .wl-col-action {
    width: auto !important;
    text-align: right !important;
  }

  #account-wishlist .wl-actions-dock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #account-wishlist .wl-btn-action {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
  }

  #account-wishlist .wishlist-footer-actions .pull-right {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  #account-wishlist .wishlist-footer-actions .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* Breakpoint Petit Mobile (<= 380px, ex: iPhone SE 320px-375px) */
@media (max-width: 380px) {
  #account-wishlist .wishlist-table > tbody > tr.wishlist-item-row {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  #account-wishlist .wl-thumb-wrap img,
  #account-wishlist .wl-col-image img {
    width: 44px !important;
    height: 48px !important;
    max-width: 44px !important;
  }

  #account-wishlist .wl-artwork-link {
    font-size: 12px !important;
  }

  #account-wishlist .wl-actions-dock {
    gap: 5px !important;
  }

  #account-wishlist .wl-btn-action {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   HAUTE GALERIE SMART CHECKOUT — ZERO-FRICTION, COMPACT & MOBILE STICKY BAR
   (/shop/index.php?route=checkout/checkout)
   ========================================================================== */

#checkout-checkout {
  max-width: 1040px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

#checkout-checkout #content {
  text-align: left !important;
  width: 100% !important;
}

/* 1. Compact Checkout Hero Bar & Reassurance Pills */
#checkout-checkout .checkout-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--theme-border-subtle);
}

#checkout-checkout .checkout-hero-title-group h1 {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--theme-text-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1.2 !important;
}

#checkout-checkout .checkout-lock-icon {
  color: var(--accent-color, var(--theme-red)) !important;
  font-size: 18px;
}

#checkout-checkout .checkout-trust-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#checkout-checkout .checkout-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--theme-text-secondary);
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  white-space: nowrap;
}

#checkout-checkout .checkout-trust-pill i {
  color: var(--accent-color, var(--theme-red)) !important;
  font-size: 11.5px;
}

/* 2. Visual Step Progress Bar (.checkout-stepper) */
#checkout-checkout .checkout-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  background: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 12px;
}

#checkout-checkout .stepper-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--theme-text-muted);
  transition: all 0.2s ease;
  user-select: none;
  min-width: 0;
}

#checkout-checkout .stepper-item.is-unlocked {
  cursor: pointer;
}

#checkout-checkout .stepper-badge {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-medium);
  color: var(--theme-text-muted);
  transition: all 0.2s ease;
}

#checkout-checkout .stepper-check {
  display: none;
  font-size: 10px;
}

#checkout-checkout .stepper-item.is-completed {
  color: var(--theme-text-secondary);
}

#checkout-checkout .stepper-item.is-completed .stepper-num {
  display: none;
}

#checkout-checkout .stepper-item.is-completed .stepper-check {
  display: inline-block;
}

#checkout-checkout .stepper-item.is-completed .stepper-badge {
  border-color: var(--accent-color, var(--theme-red));
  color: var(--accent-color, var(--theme-red));
  background: rgba(var(--accent-rgb, 197, 160, 89), 0.12);
}

#checkout-checkout .stepper-item.is-active {
  color: var(--theme-text-primary);
  background: rgba(var(--accent-rgb, 197, 160, 89), 0.12);
  border-color: rgba(var(--accent-rgb, 197, 160, 89), 0.45);
}

#checkout-checkout .stepper-item.is-active .stepper-badge {
  background: var(--accent-color, var(--theme-red));
  border-color: var(--accent-color, var(--theme-red));
  color: var(--accent-contrast, #111111);
}

#checkout-checkout .stepper-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3. Compact Accordion Panels (#accordion) */
#checkout-checkout #accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

#checkout-checkout #accordion .panel {
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--theme-border-subtle) !important;
  background: var(--theme-bg-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#checkout-checkout #accordion .panel.is-active {
  border-color: var(--accent-color, var(--theme-red)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--accent-rgb, 197, 160, 89), 0.22) !important;
}

#checkout-checkout #accordion .panel.is-completed:not(.is-active) {
  border-color: rgba(var(--accent-rgb, 197, 160, 89), 0.32) !important;
}

#checkout-checkout #accordion .panel-heading {
  padding: 10px 16px !important;
  background: var(--theme-bg-elevated) !important;
  border-bottom: none !important;
  transition: background-color 0.2s ease;
}

#checkout-checkout #accordion .panel.is-active > .panel-heading {
  background: rgba(var(--accent-rgb, 197, 160, 89), 0.08) !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
}

#checkout-checkout #accordion .panel-title {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--theme-text-muted) !important;
  margin: 0 !important;
  text-align: left !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#checkout-checkout #accordion .panel.is-active .panel-title,
#checkout-checkout #accordion .panel.is-Active .panel-title a,
#checkout-checkout #accordion .panel.is-active .panel-title a {
  color: var(--theme-text-primary) !important;
}

#checkout-checkout #accordion .panel-title a.accordion-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  color: var(--theme-text-primary) !important;
  text-decoration: none !important;
}

#checkout-checkout #accordion .panel-title a.accordion-toggle:hover {
  color: var(--accent-color, var(--theme-red)) !important;
}

#checkout-checkout #accordion .panel-title a.accordion-toggle i.fa-caret-down {
  color: var(--accent-color, var(--theme-red));
  font-size: 13px;
}

#checkout-checkout #accordion .panel-body {
  padding: 14px 16px !important;
  background: var(--theme-bg-surface) !important;
  text-align: left !important;
}

/* 4. Step 1: Compact 2-Column Login / Guest / Register Cards */
#checkout-checkout .checkout-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

#checkout-checkout .checkout-option-card {
  background: var(--theme-bg-elevated);
  border: 1px solid var(--theme-border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#checkout-checkout .checkout-option-card:hover,
#checkout-checkout .checkout-option-card.is-focused-card {
  border-color: rgba(var(--accent-rgb, 197, 160, 89), 0.55);
}

#checkout-checkout .checkout-card-header h2 {
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  color: var(--theme-text-primary) !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

#checkout-checkout .checkout-card-header h2 i {
  color: var(--accent-color, var(--theme-red));
}

#checkout-checkout .checkout-option-hint {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--theme-text-secondary) !important;
  margin: 0 !important;
}

#checkout-checkout .checkout-login-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#checkout-checkout .checkout-login-fields .form-group {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#checkout-checkout .checkout-login-fields .control-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--theme-text-secondary) !important;
  margin-bottom: 4px !important;
  display: inline-block;
}

#checkout-checkout .checkout-password-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

#checkout-checkout .checkout-password-label-row .control-label {
  margin-bottom: 0 !important;
}

#checkout-checkout .checkout-forgotten-link {
  font-size: 11.5px !important;
  color: var(--accent-color, var(--theme-red)) !important;
  text-decoration: none !important;
}

#checkout-checkout .checkout-forgotten-link:hover {
  text-decoration: underline !important;
}

/* 5. Interactive Radio Cards (.checkout-radio-card) */
#checkout-checkout .checkout-radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

#checkout-checkout .checkout-radio-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  border: 1px solid var(--theme-border-subtle) !important;
  background: var(--theme-bg-surface) !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: all 0.18s ease !important;
  width: 100%;
  font-weight: 500 !important;
}

#checkout-checkout .checkout-radio-card:hover {
  border-color: rgba(var(--accent-rgb, 197, 160, 89), 0.55) !important;
}

#checkout-checkout .checkout-radio-card.is-selected {
  border-color: var(--accent-color, var(--theme-red)) !important;
  background: rgba(var(--accent-rgb, 197, 160, 89), 0.1) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 197, 160, 89), 0.2) !important;
}

#checkout-checkout .checkout-radio-card input[type="radio"] {
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  accent-color: var(--accent-color, var(--theme-red));
  flex: 0 0 16px !important;
  display: inline-block !important;
  position: static !important;
}

#checkout-checkout .radio-card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

#checkout-checkout .radio-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--theme-text-primary);
  line-height: 1.3;
}

#checkout-checkout .radio-card-price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-color, var(--theme-red));
  white-space: nowrap;
}

#checkout-checkout .radio-card-meta {
  font-size: 11.5px;
  color: var(--theme-text-secondary);
}

/* 6. Compact Forms in Step 2 & Step 3 (Billing & Shipping Addresses) */
#checkout-checkout .checkout-address-mode-cards {
  margin-bottom: 10px;
}

#checkout-checkout .checkout-existing-address-box {
  margin-bottom: 12px;
}

#checkout-checkout .checkout-address-grid:not([style*="display: none"]),
#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: start;
}

#checkout-checkout .checkout-address-grid > .form-group,
#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) > .form-group {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#checkout-checkout .checkout-address-grid > .form-group > .col-sm-2,
#checkout-checkout .checkout-address-grid > .form-group > .col-sm-10,
#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) > .form-group > .col-sm-2,
#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) > .form-group > .col-sm-10 {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}

#checkout-checkout .checkout-address-grid > .form-group > label.control-label,
#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) > .form-group > label.control-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--theme-text-secondary) !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
}

#checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form) > .buttons {
  grid-column: 1 / -1;
}

/* Compact Register / Guest two-column fieldsets inside #collapse-payment-address */
#checkout-checkout #collapse-payment-address legend {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--theme-border-subtle) !important;
  color: var(--theme-text-primary) !important;
}

#checkout-checkout #collapse-payment-address .form-group {
  margin-bottom: 8px !important;
}

#checkout-checkout .form-control {
  height: 38px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

#checkout-checkout .floating-group .form-control {
  height: 42px !important;
  padding: 14px 12px 4px 12px !important;
}

/* 7. Shipping & Payment Methods + Compact Comment Box */
#checkout-checkout .checkout-step-lead {
  font-size: 12.5px;
  color: var(--theme-text-secondary);
  margin: 0 0 8px 0;
}

#checkout-checkout .checkout-method-group {
  margin-bottom: 10px;
}

#checkout-checkout .checkout-method-group-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text-secondary);
  margin-bottom: 6px;
}

#checkout-checkout .checkout-comment-box {
  margin-top: 12px;
}

#checkout-checkout .checkout-comment-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--theme-text-secondary);
  margin-bottom: 5px;
}

#checkout-checkout .checkout-comment-label i {
  color: var(--accent-color, var(--theme-red));
  margin-right: 4px;
}

#checkout-checkout textarea.checkout-comment-textarea {
  height: auto !important;
  min-height: 52px !important;
  max-height: 110px;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  resize: vertical;
}

#checkout-checkout #collapse-payment-address > .checkbox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px auto !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#checkout-checkout #collapse-payment-address > .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding-left: 0 !important;
  margin: 0 auto !important;
  font-size: 13.5px !important;
  color: var(--theme-text-primary) !important;
  text-align: center !important;
  cursor: pointer !important;
}

#checkout-checkout #collapse-payment-address > .checkbox input[type="checkbox"] {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
}

#checkout-checkout .checkout-agree-box {
  margin: 10px auto !important;
  padding: 13px 20px !important;
  border-radius: 10px !important;
  background: var(--theme-bg-elevated) !important;
  border: 1px solid var(--theme-border-subtle) !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#checkout-checkout .checkout-agree-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  cursor: pointer;
  text-align: center !important;
  width: auto !important;
  max-width: 100% !important;
}

#checkout-checkout .checkout-agree-checkbox {
  margin: 0 !important;
  accent-color: var(--accent-color, var(--theme-red));
  flex-shrink: 0;
}

/* 8. Step Action Buttons (.buttons) */
#checkout-checkout .buttons {
  margin: 14px auto 0 auto !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid var(--theme-border-subtle);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

#checkout-checkout .buttons .pull-right,
#checkout-checkout .buttons .pull-right.full,
#checkout-checkout .checkout-card-actions {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
}

#checkout-checkout .btn-inverse.full,
#checkout-checkout #button-confirm {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: var(--accent-color, var(--theme-red)) !important;
  border: 1px solid var(--accent-color, var(--theme-red)) !important;
  color: var(--accent-contrast, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

#checkout-checkout .btn-inverse.full:hover,
#checkout-checkout #button-confirm:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb, 197, 160, 89), 0.32) !important;
}

/* 9. Step 6: Confirmation Table & Payment Gateway Box */
#checkout-checkout .checkout-confirm-table-wrap {
  border: 1px solid var(--theme-border-subtle);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

#checkout-checkout .checkout-confirm-table {
  margin-bottom: 0 !important;
  font-size: 12.5px;
}

#checkout-checkout .checkout-confirm-table thead td {
  background: var(--theme-bg-elevated) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text-secondary);
  padding: 8px 10px !important;
}

#checkout-checkout .checkout-confirm-table tbody td,
#checkout-checkout .checkout-confirm-table tfoot td {
  padding: 8px 10px !important;
  vertical-align: middle !important;
}

/* 10. Mobile Full-Width Centered Layout & Sticky Bottom Floating Action Bar (#checkout-sticky-bar) */
.checkout-sticky-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  #checkout-checkout,
  #checkout-checkout.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 88px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #checkout-checkout > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #checkout-checkout #content,
  #checkout-checkout #content.col-sm-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  /* Centered Hero Title & Full-Width Centered Trust Pills */
  #checkout-checkout .checkout-hero-bar {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
  }

  #checkout-checkout .checkout-hero-title-group {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #checkout-checkout .checkout-hero-title-group h1 {
    font-size: 21px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #checkout-checkout .checkout-trust-pills {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #checkout-checkout .checkout-trust-pill {
    flex: 1 1 auto;
    justify-content: center !important;
    text-align: center !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* Compact Full-Width Centered Horizontal Stepper on Mobile */
  #checkout-checkout .checkout-stepper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    overflow-x: auto;
    gap: 4px !important;
    padding: 5px 6px !important;
    margin-bottom: 10px !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }

  #checkout-checkout .checkout-stepper::-webkit-scrollbar {
    display: none;
  }

  #checkout-checkout .stepper-item {
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }

  #checkout-checkout .stepper-item:not(.is-active) .stepper-label {
    display: none;
  }

  /* Maximize Accordion & Card Width + Center Headings & Content on Mobile */
  #checkout-checkout #accordion,
  #checkout-checkout #accordion .panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  #checkout-checkout #accordion .panel-heading {
    padding: 10px 12px !important;
  }

  #checkout-checkout #accordion .panel-title,
  #checkout-checkout #accordion .panel-title a.accordion-toggle {
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
  }

  #checkout-checkout #accordion .panel-title a.accordion-toggle i.fa-caret-down {
    position: absolute !important;
    right: 2px !important;
  }

  #checkout-checkout #accordion .panel-body {
    padding: 8px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #checkout-checkout .checkout-login-grid,
  #checkout-checkout .checkout-address-grid:not([style*="display: none"]),
  #checkout-checkout #collapse-shipping-address form.form-horizontal:not(.checkout-address-form),
  #checkout-checkout .checkout-radio-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #checkout-checkout .checkout-option-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    text-align: center !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  #checkout-checkout .checkout-card-header,
  #checkout-checkout .checkout-card-header h2 {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #checkout-checkout .checkout-option-hint,
  #checkout-checkout .checkout-step-lead,
  #checkout-checkout .checkout-method-group-title,
  #checkout-checkout .checkout-comment-label,
  #checkout-checkout #collapse-payment-address legend,
  #checkout-checkout #collapse-shipping-address legend {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #checkout-checkout .checkout-radio-card {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  #checkout-checkout .checkout-new-customer .checkout-radio-card .radio-card-content,
  #checkout-checkout .checkout-address-mode-cards .checkout-radio-card .radio-card-content {
    flex: 0 1 auto !important;
    justify-content: center !important;
  }

  #checkout-checkout .checkout-login-fields .control-label {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  #checkout-checkout .checkout-password-label-row .control-label {
    width: auto !important;
    text-align: left !important;
  }

  #checkout-checkout .form-control {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }

  #checkout-checkout textarea.checkout-comment-textarea {
    text-align: left;
  }

  #checkout-checkout .buttons,
  #checkout-checkout .buttons .pull-right.full,
  #checkout-checkout .checkout-card-actions {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #checkout-checkout .btn-inverse.full,
  #checkout-checkout #button-confirm,
  #checkout-checkout #button-account,
  #checkout-checkout #button-login {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide # ID column on mobile confirm table so zero horizontal scroll */
  #checkout-checkout .checkout-confirm-table .col-confirm-id {
    display: none !important;
  }

  /* Floating Sticky Bottom Bar on Mobile */
  .checkout-sticky-mobile-bar {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 18, 22, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(var(--accent-rgb, 197, 160, 89), 0.45);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.32);
  }

  html[data-theme="light"] .checkout-sticky-mobile-bar {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.09);
  }

  .checkout-sticky-mobile-bar.is-gateway-only {
    display: none !important;
  }

  .checkout-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 540px;
    margin: 0 auto;
  }

  .checkout-sticky-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .checkout-sticky-step-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb, 197, 160, 89), 0.16);
    color: var(--accent-color, var(--theme-red));
  }

  .checkout-sticky-step-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkout-sticky-cta-btn {
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: var(--accent-color, var(--theme-red)) !important;
    border: 1px solid var(--accent-color, var(--theme-red)) !important;
    color: var(--accent-contrast, #111111) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb, 197, 160, 89), 0.35) !important;
  }

  .checkout-sticky-cta-btn.is-loading {
    opacity: 0.75;
    pointer-events: none;
  }
}