/* ================================================================
   Secret de Beauté — E-Shop Styles
   Premium cosmetics boutique — Mobile-first responsive design
   ================================================================ */

/* ---- CSS Custom Properties (Design Tokens) ---- */
:root {
  /* Gold palette */
  --gold:            #8C6F22;
  --gold-light:      #E8D48B;
  --gold-dark:       #AA7C11;
  --gold-metallic:   #C5A028;
  --gold-glow:       rgba(212, 175, 55, 0.15);
  --gold-glow-strong:rgba(212, 175, 55, 0.3);

  /* Rose palette */
  --rose:            #F4C2C2;
  --rose-light:      #FFF0F0;
  --rose-medium:     #E8A0A0;
  --rose-dark:       #C97878;

  /* Neutrals */
  --white:           #FFFDFD;
  --off-white:       #FBF9F7;
  --cream:           #F5F0EB;
  --gray-100:        #F0EDEA;
  --gray-200:        #E0DBD5;
  --gray-300:        #C5BEB6;
  --gray-400:        #9E9689;
  --gray-500:        #7A7268;
  --gray-600:        #5C554D;
  --gray-700:        #3E3832;
  --gray-800:        #2A2520;
  --gray-900:        #1A1614;

  /* Semantic */
  --bg-primary:      var(--white);
  --bg-secondary:    var(--off-white);
  --bg-card:         rgba(255, 253, 251, 0.85);
  --text-primary:    var(--gray-800);
  --text:            var(--gray-800);
  --text-secondary:  var(--gray-500);
  --text-heading:    var(--gray-900);
  --border:          var(--gray-200);
  --border-light:    rgba(212, 175, 55, 0.2);

  /* Status */
  --success:         #4CAF50;
  --success-bg:      #E8F5E9;
  --warning:         #FF9800;
  --warning-bg:      #FFF3E0;
  --error:           #E53935;
  --error-bg:        #FFEBEE;
  --info:            #2196F3;
  --info-bg:         #E3F2FD;

  /* Typography */
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-body:       'Montserrat', 'Segoe UI', sans-serif;
  --font-accent:     'Alex Brush', cursive;
  --font-serif:      var(--font-heading);
  --font-sans:       var(--font-body);
  --bg-cream:        var(--cream);

  /* Sizing */
  --header-height:   72px;
  --max-width:       1280px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       28px;
  --radius-full:     9999px;

  /* Shadows */
  --shadow-sm:       0 2px 8px rgba(26, 22, 20, 0.06);
  --shadow-md:       0 4px 20px rgba(26, 22, 20, 0.08);
  --shadow-lg:       0 8px 40px rgba(26, 22, 20, 0.12);
  --shadow-gold:     0 4px 20px rgba(212, 175, 55, 0.15);
  --shadow-card:     0 2px 12px rgba(26, 22, 20, 0.05), 0 0 0 1px rgba(212, 175, 55, 0.08);

  /* Transitions */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   0.2s;
  --duration-normal: 0.35s;
  --duration-slow:   0.5s;
}

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

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

/* Fondo del html = fondo del body : con overflow-x:clip en body (no propagado
   al viewport), el rebote del overscroll mostraría el blanco del html */
html {
  background-color: #f5c7cd;
}
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: #f5c7cd;
  line-height: 1.6;
  /* clip (con fallback hidden) : recorta igual pero no rompe position:fixed
     en iOS Safari (con hidden, los elementos fixed se desplazan con el scroll) */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "";
  z-index: -10;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 40%, #fff6f7 0%, #f5c7cd 100%);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-heading); line-height: 1.2; }

/* ---- Utilities ---- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---- Ambient Glowing Dust Particles (Matching Index Page) ---- */
.glowing-dust-container {
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  contain: layout paint;
}

.dust-particle {
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(circle, rgba(251, 245, 183, 0.85) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  animation: float-particle 14s ease-in-out infinite alternate;
  position: absolute;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  contain: paint;
}

@keyframes float-particle {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0.3; }
  50%  { transform: translate3d(20px, -40px, 0) scale(1.1); opacity: 0.7; }
  100% { transform: translate3d(-15px, -80px, 0) scale(0.95); opacity: 0.4; }
}

/* ---- Glassmorphism Cards ---- */
.glass-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(220, 180, 185, 0.25);
}

.glass-card-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-hover:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25);
}

/* ---- Gold Shimmer Buttons ---- */
.btn-gold-shimmer {
  background: linear-gradient(135deg, #8C6F22 0%, #aa7c11 100%);
  color: #FFFDFD;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
}

.btn-gold-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: all 0.6s ease;
}

.btn-gold-shimmer:hover::before {
  left: 150%;
}

.btn-gold-shimmer:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}


/* ================================================================
   LUXURY MARQUEE TICKER
   ================================================================ */
.luxury-ticker {
  background: linear-gradient(90deg, #1A1614 0%, #2A2520 50%, #1A1614 100%);
  color: var(--gold-light);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 1002;
  contain: content;
}
.ticker-content {
  display: inline-block;
  animation: marquee 25s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.ticker-content span {
  display: inline-block;
  padding: 0 30px;
}
@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.demo-banner {
  background: linear-gradient(90deg, #A71D1D 0%, #C62828 50%, #8E0000 100%);
  color: #FFFDFD;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 8px 40px 8px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--duration-fast) var(--ease-out);
}
.demo-banner.hidden {
  display: none !important;
}
.demo-banner svg { flex-shrink: 0; color: #FFF; }
.demo-banner-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 0.9rem;
  line-height: 1;
  padding: 4px;
  transition: color var(--duration-fast);
}
.demo-banner-close:hover { color: #FFF; }

/* ================================================================
   HEADER
   ================================================================ */
.shop-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 253, 253, 0.94);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border-light);
  height: var(--header-height);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

@supports (-moz-appearance: none) {
  .shop-header {
    background: rgba(255, 253, 253, 0.97);
    backdrop-filter: blur(12px);
    transform: translateZ(0);
  }
}

.shop-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.header-logo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.header-logo-text {
  font-family: var(--font-accent);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.header-logo-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  display: block;
  margin-top: 3px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: var(--gold-dark);
  background: var(--gold-glow);
}
.nav-link svg { width: 18px; height: 18px; }

.nav-link .nav-text { display: none; }
/* Text labels only appear where brand + 5 labeled links fit on one line. */
@media (min-width: 1000px) {
  .nav-link .nav-text { display: inline; }
}

/* Cart badge */
.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--gold);
  color: var(--gray-900);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 0.3s var(--ease-spring);
}
.cart-badge.visible { transform: scale(1); }

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
}
.mobile-menu-btn svg { width: 24px; height: 24px; }

@media (max-width: 600px) {
  .header-logo { gap: 8px; }
  .header-logo img { width: 32px; height: 32px; }
  .header-logo-text { font-size: clamp(1rem, 4.8vw, 1.25rem); }
  /* Le sous-titre "Boutique" reste visible en mobile : il est empilé sous
     le wordmark (bloc), il n'ajoute donc aucune largeur à la rangée. */
  .header-logo-sub { font-size: 0.5rem; letter-spacing: 0.18em; }
  /* Keep brand + all 5 nav icons on one line on narrow phones:
     compact icons + responsive wordmark. */
  .header-inner { gap: 8px; padding: 0 12px; }
  .header-nav { gap: 2px; }
  .nav-link { padding: 8px 7px; }
  /* El badge (18px) sobre un icono de 18px en top/right 2px tapaba el icono:
     centrado en su esquina sup-der (top/right negativos) queda medio fuera,
     como los badges estándar. En ≤400 el padding lateral es 5px → -4px. */
  .cart-badge { top: -1px; right: -2px; }
}
/* Logo mark stays visible at every size; on the narrowest screens the
   wordmark and icons compact instead so brand + logo + 5 icons fit on one line. */
@media (max-width: 400px) {
  .header-logo img { width: 28px; height: 28px; }
  .header-logo-text { font-size: clamp(0.9rem, 4.4vw, 1.1rem); }
  .nav-link { padding: 8px 5px; }
  .cart-badge { right: -4px; }
}

/* ================================================================
   MAIN CONTENT AREA
   ================================================================ */
.shop-main {
  min-height: calc(100vh - var(--header-height) - 200px);
  padding: 24px 0 0;
}

/* ================================================================
   HERO SECTION (Catalogue) — split éditorial
   ================================================================ */
.shop-hero {
  position: relative;
  padding: 36px 20px 0;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Recorta el glow decorativo y el badge sin crear contenedor de scroll */
  overflow: clip;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
}

.hero-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 4.7vw, 3.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}

.hero-title-base {
  display: block;
  font-weight: 500;
  color: var(--gray-900);
}

.hero-title-accent,
.detail-name-accent,
.editorial-title-accent {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  background: linear-gradient(135deg, #745513 0%, #aa7c11 24%, #ddb94f 50%, #8c6f22 78%, #aa7c11 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.12em;
  filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.22));
}
/* Divisor decorativo bajo el nombre del producto en el detalle. Los
   márgenes negativos compensan el gap de 10px de .product-buybox-column:
   el adorno ocupa el hueco que ya existía, sin añadir espacio. */
.detail-name-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -6px 0 -6px;
  line-height: 1;
  color: var(--gold-light);
  font-size: 0.72rem;
}
.detail-name-divider::before,
.detail-name-divider::after {
  content: '';
  height: 1px;
  width: 46px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.hero-divider {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 22px 0;
}

.hero-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 440px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 50px;
  background: var(--gray-900);
  color: #FFFDFD;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s var(--ease-out);
}
.btn-hero-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(170, 124, 17, 0.28);
}
.admin-hero-card .btn-hero-primary {
  background: var(--gold);
  color: #FFFDFD;
}
.admin-hero-card .btn-hero-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(170, 124, 17, 0.35);
}

/* ---- Visual produit (marco arco + badge flottant) ---- */
.hero-visual {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -8% -18%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.16), transparent 72%);
  z-index: -1;
  pointer-events: none;
}

.hero-frame-wrap {
  position: relative;
  width: min(330px, 78vw);
  cursor: pointer;
  border-radius: 165px 165px 24px 24px;
}
.hero-frame-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.hero-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 165px 165px 24px 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #f7e8e0 0%, #f3d9d0 50%, #e8c9c0 100%);
  box-shadow: 0 30px 60px rgba(170, 124, 17, 0.18), 0 8px 24px rgba(26, 22, 20, 0.08);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.hero-frame-wrap:hover .hero-frame {
  transform: translateY(-4px);
  box-shadow: 0 36px 70px rgba(170, 124, 17, 0.24), 0 10px 28px rgba(26, 22, 20, 0.1);
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-frame-badge {
  position: absolute;
  bottom: 20px;
  left: -26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  line-height: 1.2;
  background: rgba(255, 253, 253, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26, 22, 20, 0.14);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.hero-frame-badge:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 16px 34px rgba(26, 22, 20, 0.18), 0 4px 14px rgba(212, 175, 55, 0.22);
}
.hero-frame-badge:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.hero-frame-badge svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex: none;
}
.hero-frame-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
}
.hero-frame-badge span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-500);
  max-width: 210px;
}
@media (max-width: 900px) {
  .hero-frame-badge { left: 8px; }
}

/* ---- Barre de confiance ---- */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 48px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  white-space: nowrap;
}
.trust-item svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex: none;
}
.trust-item + .trust-item { border-left: 1px solid var(--border); }
@media (max-width: 900px) {
  .hero-trust {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 40px 0 0;
    padding: 16px 0;
  }
  .hero-trust::-webkit-scrollbar { display: none; }
  .trust-item { flex: 0 0 auto; }
}

/* ================================================================
   MOBILE (≤700px) — composición propia, no adaptación del desktop
   ================================================================ */
@media (max-width: 700px) {
  /* Hero: visual primero (arco full-bleed), copy debajo, CTAs apilados */
  .shop-hero { padding: 0; }
  .hero-inner { gap: 28px; padding: 0 16px; }
  .hero-visual { order: -1; }
  .hero-frame-wrap { width: 100%; }
  .hero-frame {
    aspect-ratio: 1 / 1;
    border-radius: 50% 50% 24px 24px;
  }
  .hero-frame-badge {
    bottom: 20px;
    left: -14px;
    padding: 8px 14px;
    gap: 8px;
  }
  .hero-frame-badge svg { width: 16px; height: 16px; }
  .hero-frame-badge strong { font-size: 0.85rem; }
  .hero-eyebrow { font-size: 0.62rem; margin-bottom: 12px; }
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-divider { margin: 16px 0; }
  .hero-sub { font-size: 0.92rem; }
  .hero-ctas { flex-direction: column; gap: 10px; margin-top: 20px; }
  .btn-hero-primary,
  .hero-diagnostic-cta { width: 100%; justify-content: center; }

  /* Trust bar: 2x2 grid, icono sobre texto */
  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    margin: 36px 0 0;
    padding: 18px 16px;
    overflow: visible;
  }
  .trust-item {
    flex-direction: column;
    gap: 8px;
    padding: 0;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.45;
    white-space: normal;
  }
  .trust-item + .trust-item { border-left: none; }
  .trust-item svg { width: 18px; height: 18px; }
}

/* ================================================================
   SECTION HEAD (eyebrow + titre éditorial)
   ================================================================ */
.section-head {
  margin-bottom: 24px;
}
.section-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  color: var(--gray-900);
}

/* ================================================================
   CATEGORY SHOWCASE (cartes avec image)
   ================================================================ */
.category-showcase {
  max-width: var(--max-width);
  margin: 56px auto 0;
  padding: 0 20px;
  /* El header es sticky: deja el título visible al hacer scrollIntoView */
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* Bento anidado entre el título y las tarjetas: hereda ancho/padding del showcase */
.category-showcase .bento-section {
  max-width: none;
  margin: 24px 0 48px;
  padding: 0;
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .category-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .category-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 8px;
    scrollbar-width: none;
  }
  .category-cards::-webkit-scrollbar { display: none; }
  .category-card { flex: 0 0 150px; scroll-snap-align: start; }
}

.category-dots {
  display: none;
}
@media (max-width: 700px) {
  .category-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  .category-dot {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .category-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.3);
    transition: all 0.3s var(--ease-out);
    flex-shrink: 0;
  }
  .category-dot:hover::before { background-color: rgba(212, 175, 55, 0.7); }
  .category-dot.active::before {
    width: 24px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--gold);
  }
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0;
  transition: all 0.35s var(--ease-out);
  cursor: pointer;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(26, 22, 20, 0.1);
  border-color: rgba(212, 175, 55, 0.5);
}
.category-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.category-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 10px 24px rgba(212, 175, 55, 0.18);
}

.category-card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(160deg, #2A2520 0%, #1A1614 100%);
}
.category-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.category-card:hover .category-card-img img {
  transform: scale(1.07);
}
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 22, 20, 0.05) 0%, rgba(26, 22, 20, 0.25) 40%, rgba(26, 22, 20, 0.78) 100%);
  transition: background 0.35s var(--ease-out);
}
.category-card:hover .category-card-overlay {
  background: linear-gradient(180deg, rgba(26, 22, 20, 0) 0%, rgba(26, 22, 20, 0.2) 35%, rgba(26, 22, 20, 0.85) 100%);
}
.category-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  z-index: 1;
}
.category-card-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #FFFDFD;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.category-card-count {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ================================================================
   BENTO GRID CARDS (ADVERTISING / FEATURED BANNERS)
   ================================================================ */
.bento-section {
  max-width: var(--max-width);
  margin: 48px auto 0;
  padding: 0 20px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr; }
}

.bento-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 300px;
  background: linear-gradient(135deg, #1A1614 0%, #2A2520 100%);
  color: var(--white);
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 22, 20, 0.08) 0%, rgba(26, 22, 20, 0.6) 100%);
  z-index: 1;
  pointer-events: none;
}
.bento-card:before {
  content: "";
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.3), transparent 60%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  position: absolute;
  inset: 0;
}
.bento-card:hover:before {
  opacity: 1;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.3);
  border-color: var(--gold);
}
.bento-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform var(--duration-slow) var(--ease-out);
}
.bento-card:hover .bento-card-bg {
  transform: scale(1.06);
}
.bento-card-content {
  position: relative;
  z-index: 3;
}
.bento-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(212, 175, 55, 0.95);
  color: #1A1614;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bento-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: #FFFDFD;
  margin-bottom: 8px;
  line-height: 1.2;
}
.bento-subtitle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 18px;
  max-width: 420px;
}
.bento-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: gap var(--duration-fast);
}
.bento-card:hover .bento-btn {
  gap: 12px;
  color: var(--gold);
}
.bento-span-2 {
  grid-column: span 2;
}
.bento-span-3 {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .bento-span-2 { grid-column: span 1; }
  .bento-span-3 { grid-column: span 1; }
}
@media (max-width: 700px) {
  .bento-card { min-height: 240px; padding: 24px; }
  .bento-badge { font-size: 0.62rem; padding: 4px 12px; }
  .bento-title { font-size: 1.3rem; }
  .bento-subtitle { font-size: 0.82rem; margin-bottom: 14px; }
}

.bento-dots {
  display: none;
}
@media (max-width: 700px) {
  .bento-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 8px;
    scrollbar-width: none;
  }
  .bento-grid::-webkit-scrollbar { display: none; }
  .bento-card {
    flex: 0 0 85vw;
    scroll-snap-align: start;
    min-height: 240px;
  }
  .bento-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .bento-dot {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bento-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.3);
    transition: all 0.3s var(--ease-out);
    flex-shrink: 0;
  }
  .bento-dot:hover::before { background-color: rgba(212, 175, 55, 0.7); }
  .bento-dot.active::before {
    width: 24px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--gold);
  }
}

/* ================================================================
   CATEGORY FILTERS
   ================================================================ */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 30px;
}

.filter-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-500);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.filter-btn:hover {
  color: var(--gold-dark);
  border-color: var(--gold-glow-strong);
  background: var(--gold-glow);
}
.filter-btn.active {
  color: var(--gray-900);
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

/* ================================================================
   CATALOGUE TOOLBAR (titre + recherche + tri)
   ================================================================ */
.catalogue-toolbar {
  max-width: var(--max-width);
  margin: 48px auto 20px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.grid-head-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
}
.grid-head-count {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 4px;
}

.catalogue-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.search-box {
  position: relative;
  width: 400px;
  max-width: 100%;
}
.search-box input {
  width: 100%;
  min-width: 0;
  padding: 11px 18px 11px 44px;
  border-radius: 50px;
  border: 1px solid var(--gray-200);
  background: #FFFDFD;
  font-size: 0.85rem;
  transition: all var(--duration-fast);
  outline: none;
}
.search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.search-box svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gray-400);
}

.sort-select {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: 50px;
  border: 1px solid var(--gray-200);
  background: #FFFDFD;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-700);
  outline: none;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.sort-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
@media (max-width: 700px) {
  .catalogue-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 40px auto 16px;
  }
  .catalogue-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-box { width: 100%; max-width: none; }
  .sort-select { width: 100%; }
  .grid-head-title { font-size: 1.3rem; }
}

/* ================================================================
   WISHLIST HEART BUTTON
   ================================================================ */
.btn-wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 253, 253, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid var(--border-light);
}
.btn-wishlist:hover {
  transform: scale(1.1);
  color: #E53935;
  background: #fff;
}
.btn-wishlist.active {
  color: #E53935;
  background: #fff;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.25);
}
.btn-wishlist svg { width: 18px; height: 18px; fill: currentColor; }

/* ================================================================
   PRODUCT GRID
   ================================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  padding: 0 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Product Card */
.product-card {
  background: #FFFDFD;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 12px rgba(26, 22, 20, 0.05);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: rgba(212, 175, 55, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(26, 22, 20, 0.1), 0 4px 12px rgba(212, 175, 55, 0.12);
}

.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream) 0%, var(--rose-light) 100%);
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.product-card:hover .product-card-image img {
  transform: scale(1.06);
}

/* Product image placeholder */
.product-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--gold);
  font-size: 2.5rem;
  background: linear-gradient(135deg, rgba(255, 240, 240, 0.8) 0%, rgba(245, 240, 235, 0.9) 50%, rgba(245, 199, 205, 0.4) 100%);
}
.product-placeholder span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Badges */
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.badge-sale {
  background: #B3261E;
  color: #fff;
}
.badge-featured {
  background: var(--gray-900);
  color: #fff;
}
.badge-featured svg {
  width: 12px;
  height: 12px;
  color: var(--gold-light);
  flex: none;
}
.badge-out {
  background: var(--gray-600);
  color: #fff;
}

.product-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-category {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 6px;
  line-height: 1.3;
  /* Altura fija de 2 líneas: alinea la descripción y el pill de formato
     en TODAS las tarjetas (mismo estándar vertical) */
  height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  /* Altura fija de 2 líneas (el « 30 ml à 100 ml » queda al mismo alto) */
  height: 3em;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  /* Hueco mínimo garantizado bajo el pill de formato (con el cuerpo a
     altura fija el margen auto se colapsa a 0 y el pill tocaría el botón) */
  padding-top: 14px;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-current {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
}
.price-compare {
  font-size: 0.72rem;
  color: var(--gray-400);
  text-decoration: line-through;
  line-height: 1.2;
}

.btn-add-cart {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 50px;
  background: var(--gray-900);
  color: #FFFDFD;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  border: none;
}
.btn-add-cart:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(170, 124, 17, 0.3);
}
.btn-add-cart::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: all 0.6s ease;
}
.btn-add-cart:hover::before {
  left: 150%;
}
.btn-add-cart:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
}
.btn-add-cart:hover {
  background: var(--gold-dark);
  color: #fff;
  box-shadow: var(--shadow-gold);
  transform: scale(1.03);
}
.btn-add-cart:active { transform: scale(0.97); }
.btn-add-cart svg { width: 16px; height: 16px; }
.btn-add-cart.disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================================================
   PRODUCT DETAIL (High-End Luxury Redesign)
   ================================================================ */
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* Breadcrumb navigation bar */
.product-breadcrumb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  flex-wrap: wrap;
  gap: 12px;
}

.product-breadcrumbs {
  font-size: 0.82rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.product-breadcrumbs a {
  color: var(--gray-500);
  transition: color var(--duration-fast);
}

.product-breadcrumbs a:hover {
  color: var(--gold-dark);
}

.product-breadcrumbs-current {
  color: var(--gold-dark);
  font-weight: 600;
}

/* Two-Column Hero Grid (Clean & Symmetrical 50/50) */
.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

@media (min-width: 860px) {
  .product-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .product-hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
  }
}

/* Left Column: Visual Gallery. La foto acompaña el scroll (sin sticky: la
   columna fijada a 90px se percibía como "diseño roto" al hacer scroll y
   la imagen "no se movía"). */
.product-gallery-column {
  position: relative;
  min-width: 0;
}
.product-buybox-column {
  min-width: 0;
}

.product-detail-image-wrapper {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #fffdfa 0%, #faede8 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 12px 35px rgba(140, 111, 34, 0.1), 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.product-detail-image-wrapper:hover {
  box-shadow: 0 16px 45px rgba(140, 111, 34, 0.16);
}

.product-detail-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.product-detail-image-wrapper:hover img {
  transform: scale(1.03);
}

.product-image-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 253, 250, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Galerie multi-image (style Sephora) : thumbs verticales desktop, horizontales mobile */
.product-gallery {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.product-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 64px;
  flex: 0 0 auto;
}
.product-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-gallery-thumb:hover {
  opacity: 1;
}
.product-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(140, 111, 34, 0.18);
}
.product-zoom {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  cursor: zoom-in;
}
/* Sin lupa (estilo Sephora) : la imagen queda estática al hover, el clic
   abre el lightbox. Anula el scale hover original de la imagen. */
.product-detail-image-wrapper.has-zoom:hover img {
  transform: none;
}
@media (hover: none), (max-width: 860px) {
  .product-gallery {
    flex-direction: column;
  }
  .product-gallery-thumbs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    order: 2;
  }
  .product-gallery-thumb {
    flex: 0 0 auto;
  }
}

/* Lightbox Sephora : clic sur l'image principale → plein écran avec navigation */
.product-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 12, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
}
.product-lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}
.product-lightbox-stage {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-lightbox-stage.zoomed {
  cursor: crosshair;
}
/* El cursor personalizado del sitio (assets/cursor-v12) oculta el cursor del
   sistema con cursor:none en body; el crosshair del zoom lo desenmascara y
   aparecen dos cursores a la vez. En su entorno (desktop, puntero fino) se
   mantiene oculto: el anillo dorado es el cursor. */
@media (pointer: fine) and (width >= 768px) {
  .product-lightbox-stage.zoomed {
    cursor: none;
  }
}
.product-lightbox-stage picture {
  display: flex;
  max-width: 100%;
  max-height: 88vh;
}
.product-lightbox-stage img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s var(--ease-out);
}
/* Botones del lightbox (cerrar, navegación, zoom) : estilo dorado del proyecto */
.product-lightbox-close,
.product-lightbox-nav,
.product-lightbox-zoom-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8C6F22 0%, #aa7c11 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFDFD;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.product-lightbox-close:hover,
.product-lightbox-nav:hover,
.product-lightbox-zoom-btn:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
}
.product-lightbox-zoom-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.product-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  font-size: 1.25rem;
}
.product-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 1.8rem;
  line-height: 1;
}
.product-lightbox-prev {
  left: 18px;
}
.product-lightbox-next {
  right: 18px;
}
.product-lightbox-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
}
.product-lightbox-zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.product-lightbox-zoom-btn {
  font-size: 1.4rem;
  line-height: 1;
}
.product-lightbox-zoom-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.product-lightbox-zoom-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}
@media (max-width: 860px) {
  .product-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  .product-lightbox-prev {
    left: 8px;
  }
  .product-lightbox-next {
    right: 8px;
  }
  .product-lightbox-zoom-btn {
    width: 40px;
    height: 40px;
  }
}

/* Full-Width Horizontal Reassurance Ribbon (4 Pillars of Excellence) */
.product-reassurance-ribbon {
  margin-top: 48px;
  padding: 22px 28px;
  background: rgba(255, 253, 251, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(140, 111, 34, 0.06);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}

@media (min-width: 600px) {
  .product-reassurance-ribbon {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 960px) {
  .product-reassurance-ribbon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 32px;
  }
}

.ribbon-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.ribbon-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.ribbon-text strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.ribbon-text span {
  font-size: 0.73rem;
  color: var(--gray-500);
  line-height: 1.35;
}

.ribbon-divider {
  display: none;
}

@media (min-width: 960px) {
  .ribbon-divider {
    display: block;
    width: 1px;
    height: 38px;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    flex-shrink: 0;
  }
}

/* Puntos de desplazamiento de la cinta de confianza (reutiliza .category-dots
   de "Explorez nos univers"): solo en móvil, porque la tira solo es
   scrollable ≤640px; entre 641-700px la cinta es un grid 2×2 sin scroll. */
#ribbon-dots {
  display: none;
}
@media (max-width: 640px) {
  #ribbon-dots {
    display: flex;
  }
}

/* Right Column: Buy Box & Sensorial Description. Ritmo vertical compacto
   (gap 10px): la columna debe terminar cerca del borde inferior de la foto
   cuadrada para no dejar hueco en blanco bajo la imagen. */
.product-buybox-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 12px;
  background: rgba(140, 111, 34, 0.08);
  border: 1px solid rgba(140, 111, 34, 0.2);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.detail-name {
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  margin-top: -2px;
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.stars-rating {
  color: #d4af37;
  letter-spacing: 2px;
  font-size: 0.95rem;
}

.rating-badge {
  color: var(--gold-dark);
  font-weight: 600;
}

.skin-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(140, 111, 34, 0.07);
  color: var(--gray-700);
  border: 1px solid rgba(140, 111, 34, 0.18);
  padding: 2px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
}

.detail-short-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--gray-600);
  font-style: italic;
  padding-left: 14px;
  border-left: 2.5px solid var(--gold-light);
  margin: 0;
}

/* Price Box */
.detail-price-box {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.detail-compare-price {
  font-size: 1.05rem;
  color: var(--gray-400);
  text-decoration: line-through;
}

.detail-discount-pill {
  background: #c97878;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.detail-tva-notice {
  font-size: 0.73rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.free-shipping-tag {
  color: var(--gold-dark);
  font-weight: 600;
}

/* Stock status */
.detail-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
}

.stock-pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  flex-shrink: 0;
}

.stock-pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.stock-pulse.out-of-stock {
  background: var(--error);
}

.stock-pulse.out-of-stock::after {
  animation: none;
}

/* Action Area */
.detail-actions-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.detail-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  height: 52px;
}

.qty-btn {
  width: 42px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--gray-700);
  background: var(--bg-secondary);
  transition: all var(--duration-fast);
  cursor: pointer;
}

.qty-btn:hover {
  background: var(--gold-glow);
  color: var(--gold-dark);
}

.qty-value {
  width: 48px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  outline: none;
  background: transparent;
  /* Firefox pinta los spinners nativos del type="number" pese al readonly:
     las flechas −/+ del stepper ya hacen ese trabajo */
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty-value::-webkit-outer-spin-button,
.qty-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-add-cart-lg {
  flex: 1;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 50px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(170, 124, 17, 0.28);
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
}

.btn-add-cart-lg::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(25deg);
  transition: none;
}

.btn-add-cart-lg:hover::after {
  left: 140%;
  transition: all 0.8s ease;
}

.btn-add-cart-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(170, 124, 17, 0.4);
}

.btn-add-cart-lg:active {
  transform: translateY(0);
}

.btn-add-cart-lg svg {
  width: 20px;
  height: 20px;
}

.btn-add-cart-lg:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.btn-add-cart-lg:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Tarjeta de réassort (ficha agotada): estructura premium con la misma caja
   de siempre (fondo crema suave + filete rosa a la izquierda). La CARTA es
   idéntica en los dos estados (formulario / apuntado): píldora de estado,
   precio, divisor fino, título fijo y corazón en la fila de acciones. El
   margen superior lo gestiona el gap del buybox (10px). */
.restock-card {
  margin-top: 0;
  padding: 16px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--rose-dark);
  border-radius: var(--radius-sm);
  /* Suelo por zona (el campo del formulario se apila ≤520px, por eso móvil es
     más alto): cubre el estado más alto medido en cada zona → el scroll no
     salta al conmutar y no sobra blanco visible (≤7px). */
  min-height: 372px;
}
@media (min-width: 521px) {
  .restock-card {
    min-height: 312px;
  }
}

/* Píldora de estado: "Rupture de stock" en rosa suave, punto rojo */
.restock-card .restock-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rose-dark);
  background: rgba(201, 120, 120, 0.08);
  border: 1px solid rgba(201, 120, 120, 0.3);
  border-radius: 999px;
}
.restock-card .restock-head .stock-pulse {
  width: 7px;
  height: 7px;
  background: var(--danger, #c0392b);
  box-shadow: none;
  animation: pulse-red-soft 2s infinite;
}
@keyframes pulse-red-soft {
  0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* Zona superior APILADA: píldora de estado, precio debajo (mismo tono dorado
   que en stock) y mención TVA justo bajo el precio */
.restock-card .restock-pricebox {
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.restock-card .detail-price {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--gold-dark);
  line-height: 1;
}
.restock-card .detail-tva-notice {
  margin-top: 4px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--gray-500);
}

/* Divisor fino con degradado rosa */
.restock-divider {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(201, 120, 120, 0), rgba(201, 120, 120, 0.38), rgba(201, 120, 120, 0));
}

/* Pie de tarjeta: ventaja de envío + contacto bajo un filete fino */
.restock-footer {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 120, 120, 0.16);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.restock-card .free-shipping-tag {
  font-size: 0.78rem;
  color: var(--gold-dark);
  font-weight: 600;
}
.restock-card .restock-note {
  margin: 0;
  font-size: 0.72rem;
  color: var(--gray-500);
}
.restock-card .restock-note a {
  color: var(--gold-dark);
  text-decoration: underline;
}
.restock-card .restock-desc {
  margin: 0 0 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--gray-600);
}
.restock-card .restock-dest strong {
  color: var(--gray-700);
}

/* Filas de acción: guardar/quitar dorados con flex:1, corazón fijo */
.restock-field,
.restock-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.restock-field #restock-email-input {
  flex: 1;
  min-width: 180px;
  height: 52px;
  padding: 0 18px;
  font-size: 0.9rem;
  color: var(--gray-700);
  background: #fffdf8;
  border: 1px solid rgba(170, 124, 17, 0.32);
  border-radius: 999px;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.restock-field #restock-email-input::placeholder {
  color: var(--gray-400);
}
.restock-field #restock-email-input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(170, 124, 17, 0.15);
}
.restock-field #restock-save-btn,
.restock-actions > .btn-add-cart-lg {
  flex: 1;
  min-width: 120px;
  padding: 10px 18px;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .restock-field #restock-email-input {
    flex-basis: 100%;
  }
  /* La frase con el e-mail del cliente debe caber en UNA línea en móvil */
  .restock-card .restock-desc {
    font-size: 0.78rem;
    line-height: 1.5;
  }
}
/* Fuera de móvil la fila del form no debe envolver: el salto de línea engorda
   la tarjeta y descoloca el scroll al conmutar (el input se encoge). */
@media (min-width: 521px) {
  .restock-field {
    flex-wrap: nowrap;
  }
  .restock-field #restock-email-input {
    min-width: 0 !important;
  }
}

/* Confirmación "apuntado": panel rosa suave con badge de check dorado.
   Móvil: panel estable (min-height 88px) porque el form apila el campo. */
.restock-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin: 0 0 12px;
  background: rgba(201, 120, 120, 0.06);
  border: 1px solid rgba(201, 120, 120, 0.28);
  border-radius: 12px;
  min-height: 88px;
}
.restock-confirm-badge {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  border-radius: 50%;
}
.restock-confirm-badge svg {
  width: 13px;
  height: 13px;
}
.restock-confirm-text {
  min-width: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--gray-600);
}
.restock-confirm-text strong {
  display: block;
  color: var(--gray-700);
}
.restock-confirm-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--gray-700);
  word-break: break-all;
}

/* Desktop (≥521px): la confirmación es una línea simple sin panel, misma
   altura que la descripción del form (≈21px) → los dos estados miden lo
   mismo y no sobra blanco ni salta el scroll al conmutar. */
@media (min-width: 521px) {
  .restock-confirm {
    min-height: 0;
    gap: 8px;
    padding: 0;
    margin: 0 0 12px;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .restock-confirm-badge {
    flex: 0 0 20px;
    height: 20px;
  }
  .restock-confirm-badge svg {
    width: 12px;
    height: 12px;
  }
  .restock-confirm-text {
    font-size: 0.8rem;
    line-height: 1.5;
  }
  .restock-confirm-text strong {
    display: inline;
  }
  .restock-confirm-text em {
    word-break: normal;
  }
}

.restock-card #restock-msg {
  font-size: 0.78rem;
  margin-top: 8px;
}

/* Botón de favoritos en el buybox del detalle (escritorio y móvil) */
.btn-fav-detail {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #fff;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-fav-detail svg { width: 20px; height: 20px; }
.btn-fav-detail:hover {
  border-color: var(--rose-dark);
  color: var(--rose-dark);
  background: #fdf2f2;
  transform: translateY(-1px);
}
.btn-fav-detail.active {
  color: var(--rose-dark);
  border-color: rgba(201, 120, 120, 0.5);
  background: #fdf2f2;
}

/* Tarjeta de compra única (en stock): mismo lenguaje visual que la tarjeta
   réassort — caja crema, filete rosa izquierdo, radio pequeño, padding 16.
   El margen superior lo gestiona el gap del buybox (10px). */
.product-buy-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-left: 3px solid #2e7d32;
  border-radius: var(--radius-sm);
}
/* El price-box deja de ser una "caja blanca" dentro de la tarjeta: solo
   texto apilado, como el .restock-pricebox del estado agotado. */
.product-buy-card .detail-price-box {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
/* El estado pasa a píldora — misma anatomía que "Rupture de stock" de la
   tarjeta réassort (píldora con punto pulsante, uppercase), en verde para
   el estado legítimo. */
.product-buy-card .detail-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid rgba(46, 125, 50, 0.3);
  border-radius: 999px;
  align-self: flex-start;
}
.product-buy-card .detail-stock-status .stock-pulse {
  width: 7px;
  height: 7px;
  box-shadow: none;
  animation: pulse-green 2s infinite;
}

/* Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--gray-500);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all var(--duration-fast);
}

.btn-back:hover {
  color: var(--gold-dark);
  background: var(--gold-glow);
  border-color: rgba(212, 175, 55, 0.4);
}

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

/* ================================================================
   CART PAGE
   ================================================================ */
.cart-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.cart-page h2 {
  font-size: 1.6rem;
  margin-bottom: 24px;
  text-align: center;
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.cart-empty svg {
  width: 64px;
  height: 64px;
  color: var(--gray-300);
  margin: 0 auto 20px;
}
.cart-empty p {
  margin-bottom: 20px;
}

.cart-items { display: flex; flex-direction: column; gap: 16px; }

.cart-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  align-items: center;
  transition: all var(--duration-fast);
}
.cart-item:hover { box-shadow: var(--shadow-md); }

.cart-item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream);
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}
.cart-item-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cart-item-price {
  font-size: 0.85rem;
  color: var(--gold-dark);
  font-weight: 600;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cart-item-qty button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--gray-600);
  background: var(--bg-secondary);
}
.cart-item-qty button:hover { background: var(--gold-glow); color: var(--gold-dark); }
.cart-item-qty span {
  padding: 0 12px;
  font-weight: 600;
  font-size: 0.85rem;
}

.cart-item-total {
  font-weight: 600;
  color: var(--gold-dark);
  min-width: 70px;
  text-align: right;
  font-size: 0.95rem;
}

.btn-remove-item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--duration-fast);
}
.btn-remove-item:hover { color: var(--error); background: var(--error-bg); }
.btn-remove-item svg { width: 16px; height: 16px; }

/* Cart summary */
.cart-summary {
  margin-top: 30px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
}
.cart-summary-row.total {
  border-top: 2px solid var(--gold);
  margin-top: 12px;
  padding-top: 16px;
  font-size: 1.1rem;
  font-weight: 600;
}
.cart-summary-row.total .cart-summary-value {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold-dark);
}
.cart-tva-mention {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-style: italic;
  text-align: right;
  margin-top: 4px;
}

/* ================================================================
   SHIPPING SELECTION
   ================================================================ */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.shipping-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.shipping-option:hover { border-color: var(--gold-glow-strong); background: var(--gold-glow); }
.shipping-option.selected {
  border-color: var(--gold);
  background: var(--gold-glow);
  box-shadow: var(--shadow-gold);
}
.shipping-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.shipping-option-info { flex: 1; }
.shipping-option-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-heading);
}
.shipping-option-delay {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.shipping-option-price {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-dark);
  white-space: nowrap;
}

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.checkout-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}
.checkout-page h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  text-align: center;
}
.checkout-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.checkout-section {
  margin-bottom: 18px;
}
/* Acordeón guiado: cabecera clicable (número en círculo dorado, título,
   resumen del paso completo, check y chevron); el cuerpo se repliega. */
.checkout-step .step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.checkout-step .step-head:hover {
  border-color: var(--gold);
  background: var(--gold-glow);
  box-shadow: var(--shadow-gold);
}
.checkout-step .step-head:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.checkout-step .step-num {
  width: 28px;
  height: 28px;
  margin: 0; /* el .step-num global (ritual) pone margin-bottom:12px — inflaba el head */
  border-radius: 50%;
  background: var(--gold);
  color: var(--gray-900);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-body);
}
.checkout-step .step-title {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-heading);
  /* Máx. 2 líneas completas (wrap, nunca «…»): «Coordonnées & Adresse de
     livraison» excede ~6px a 0.95rem en 390px. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.checkout-step .step-summary {
  margin-left: 6px;
  max-width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
/* Sin previsualización de los datos del usuario en la cabecera del paso 1
   (usuaria 2026-09-11): el título recupera todo el ancho. Global — móvil Y
   desktop; la suite 37/37 lee ese resumen por textContent (intacto con
   display:none). */
#step-1-summary { display: none; }
.checkout-step .step-check {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.checkout-step.complete .step-check { display: flex; }
.checkout-step .step-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  transform: rotate(-45deg);
  transition: transform var(--duration-fast);
}
.checkout-step.collapsed .step-chevron { transform: rotate(45deg); }
.checkout-step.collapsed .step-body { display: none; }
.checkout-step.complete .step-num { background: var(--gold-light); }
@media (max-width: 560px) {
  .checkout-step .step-summary { max-width: 130px; }
  /* 0.9rem ≈ 228px: «Coordonnées & Adresse de livraison» cabe en 1 línea;
     por debajo del ancho real, ellipsis (nunca wrap). */
  .checkout-step .step-title { font-size: 0.9rem; margin: 0; }
}

/* ================================================================
   FORMS
   ================================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .full-width { grid-column: 1 / -1; }
}

/* ---- Checkout: dos sub-columnas ("Vos coordonnées" | "Adresse de livraison")
       en el paso 1, apiladas en móvil. Solo afecta #checkout-form. ---- */
.checkout-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.checkout-cols .form-grid { gap: 12px; }
.checkout-cols .form-grid + .form-grid {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.checkout-cols-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
@media (max-width: 680px) {
  .checkout-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .checkout-cols .form-grid + .form-grid {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 14px;
  }
  .checkout-cols-title { display: none; }
  /* Paso 1 compacto en móvil: pares Prénom|Nom y Code postal|Ville a media
     anchura; Email, Téléphone y Adresse a lo ancho (5 filas en vez de 7).
     .full-width se re-aplica aquí porque su regla base solo existe ≥600px.
     Especificidad (0,3,1) para vencer a .checkout-page .form-group input
     (0,2,1) que viene después en el archivo; ellipsis en label inline NO
     recorta (display:block + overflow del mismo elemento). */
  .checkout-cols,
  .checkout-cols .form-grid { gap: 12px; }
  .checkout-cols .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout-cols .form-group:has(#ship-email),
  .checkout-cols .form-group:has(#ship-phone),
  .checkout-cols .form-group.full-width { grid-column: 1 / -1; }
  .checkout-cols .form-grid .form-group { gap: 4px; }
  .checkout-cols .form-grid label {
    display: block;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .checkout-cols .form-grid .form-group input,
  .checkout-cols .form-grid .form-group select,
  .checkout-cols .form-grid .form-group textarea { padding: 9px 12px; }
}
/* Compactación del checkout (paso 1, modo de entrega, paso 3) */
.checkout-page .form-group input,
.checkout-page .form-group select,
.checkout-page .form-group textarea { padding: 11px 14px; }
.checkout-page .cart-summary { margin-top: 20px; padding: 20px 22px; }
.checkout-page .cart-summary-row { padding: 6px 0; }
.checkout-page .cart-summary-row.total { margin-top: 10px; padding-top: 12px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.03em;
}
.form-group input,
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all var(--duration-fast);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background: #fff;
}
.form-group input::placeholder { color: var(--gray-300); }
.form-group .error-msg {
  font-size: 0.75rem;
  color: var(--error);
}

/* ---- Widget Turnstile (invisible; solo aparece si Cloudflare pide un desafío) ---- */
.turnstile-widget-host {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* el wrapper no se estira: su altura = contenido */
  width: 100%;
  max-width: 300px; /* 'flexible': 300px en escritorio, encogido en móvil */
  margin: 0 auto;
  overflow: hidden;
  height: 0; /* colapsado: JS lo expande si Cloudflare muestra el desafío */
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-gold);
  border: none;
  width: 100%;
  box-sizing: border-box;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.35);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled, .btn-primary.loading {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.btn-primary svg { width: 18px; height: 18px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  background: transparent;
  color: var(--gold-dark);
  font-size: 0.88rem;
  font-weight: 600;
  border: 2px solid var(--gold);
  transition: all var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}
.btn-secondary:hover {
  background: var(--gold-glow);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background: transparent;
  color: var(--gray-600);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1.5px solid var(--border);
  transition: all var(--duration-fast);
  box-sizing: border-box;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); }

/* ================================================================
   LUXURY ACCOUNT PORTAL & MEMBER SPACE
   ================================================================ */

/* Shared container */
.account-page-wrapper {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px 40px;
  box-sizing: border-box;
}

/* Fallback/compatibility */
.account-page {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
.account-page h2 {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 8px;
}
.account-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-size: 0.9rem;
}

/* Unauthenticated Portal Layout */
.auth-portal-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

.auth-portal-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 860px) {
  .auth-portal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* En móvil (columnas apiladas) el formulario de identificación va primero */
  .auth-form-card {
    order: -1;
  }
}

/* Left Brand & Perks Card */
.auth-perks-card {
  background: linear-gradient(145deg, #1A1614 0%, #29231E 55%, #161210 100%);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.12);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-perks-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.auth-perks-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(244, 194, 194, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.auth-perks-header {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
}

.auth-perks-brand {
  font-family: var(--font-accent);
  font-size: 2.2rem;
  color: var(--gold-light);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}

.auth-perks-title {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.auth-perks-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  margin-top: 8px;
  line-height: 1.5;
}

.auth-perks-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 10px 0 28px;
}

.auth-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.auth-perk-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.auth-perk-text h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 2px;
}

.auth-perk-text p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
}

.auth-perks-footer {
  position: relative;
  z-index: 1;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Right Interactive Form Card */
.auth-form-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-xl);
  padding: 38px 34px;
  box-shadow: 0 16px 40px rgba(140, 111, 34, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 600px) {
  .auth-form-card {
    padding: 28px 20px;
  }
}

/* Luxury Segmented Auth Switcher */
.auth-switch-luxury {
  display: flex;
  background: rgba(26, 22, 20, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 28px;
  position: relative;
}

.auth-switch-btn {
  flex: 1;
  padding: 11px 16px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-600);
  border-radius: 999px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.auth-switch-btn.active {
  background: linear-gradient(135deg, #1A1614 0%, #2A2520 100%);
  color: var(--gold-light);
  box-shadow: 0 4px 14px rgba(26, 22, 20, 0.25);
}

/* Password wrapper with visibility toggle */
.password-input-wrap {
  position: relative;
  width: 100%;
}

.password-input-wrap input {
  padding-right: 44px !important;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: color 0.2s;
  z-index: 2;
}

.password-toggle-btn:hover {
  color: var(--gold-dark);
}

.forgot-password-link {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 8px;
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: 0.82rem;
  text-align: center;
  cursor: pointer;
  transition: color var(--duration-fast);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 111, 34, 0.3);
}

.forgot-password-link:hover {
  color: var(--gold-dark);
  text-decoration-color: var(--gold-dark);
}

.forgot-intro {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 22px;
  text-align: center;
}

/* Reset password — heading inside the form card */
.auth-form-heading {
  margin-bottom: 26px;
  text-align: center;
}
.auth-form-heading h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.auth-form-heading p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Invalid / expired link state */
.auth-invalid-card {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 253, 251, 0.92) 100%);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-xl);
  padding: 48px 36px;
  box-shadow: 0 16px 40px rgba(140, 111, 34, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
  text-align: center;
  box-sizing: border-box;
}
.auth-invalid-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}
.auth-invalid-icon svg {
  width: 28px;
  height: 28px;
}
.auth-invalid-card h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.auth-invalid-card p {
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 26px;
}
@media (max-width: 600px) {
  .auth-invalid-card {
    padding: 36px 22px;
  }
}

/* Backward compatibility classes */
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 36px 30px;
  box-shadow: var(--shadow-md);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ================================================================
   VERIFICATION SENT (après inscription / login non vérifié)
   ================================================================ */
.verify-sent-card {
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 244, 238, 0.92) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-xl);
  padding: 44px 40px 34px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(212, 175, 55, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.verify-sent-card::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.verify-sent-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBF5B7 0%, #DAA520 50%, #AA7C11 100%);
  color: #1A1614;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.35), inset 0 0 10px rgba(255, 255, 255, 0.6);
  border: 3px solid #fff;
  flex-shrink: 0;
}
.verify-sent-icon svg { width: 38px; height: 38px; }
.verify-sent-card h2 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--text-heading);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.verify-sent-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.verify-sent-email {
  display: inline-block;
  background: rgba(140, 111, 34, 0.08);
  border: 1px solid rgba(140, 111, 34, 0.3);
  color: #725615;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 18px;
  word-break: break-all;
}
.verify-sent-hint {
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 28px;
}
.verify-sent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.verify-sent-actions .btn-primary { width: 100%; }
.verify-sent-actions .btn-outline {
  width: 100%;
  background: rgba(140, 111, 34, 0.06);
  border-color: rgba(140, 111, 34, 0.3);
  color: #725615;
}
.verify-sent-actions .btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.12);
}
.change-email-form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}
.change-email-note {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 16px;
  text-align: center;
}
.change-email-form .form-group label { color: rgba(0, 0, 0, 0.75); }
.change-email-form .form-group input {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.change-email-form .form-group input:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
.change-email-form .form-group input::placeholder { color: var(--text-secondary); }
.change-email-form .btn-primary { width: 100%; }
.verify-sent-back {
  margin-top: 20px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 111, 34, 0.4);
  cursor: pointer;
  transition: color var(--duration-fast);
}
.verify-sent-back:hover { color: var(--gold-dark); }

.auth-tabs {
  display: flex;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 4px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}
.auth-tab.active {
  background: #fff;
  color: var(--gold-dark);
  box-shadow: var(--shadow-sm);
}

/* ================================================================
   LOGGED-IN MEMBER DASHBOARD
   ================================================================ */
.member-dashboard {
  max-width: 1020px;
  margin: 0 auto;
}

/* Prestige Hero Banner */
.member-hero-banner {
  background: linear-gradient(135deg, #1A1614 0%, #29241F 60%, #161210 100%);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 25px rgba(212, 175, 55, 0.12);
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.member-hero-banner::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.member-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.member-hero-identity {
  display: flex;
  align-items: center;
  gap: 22px;
}

.member-monogram-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FBF5B7 0%, #DAA520 50%, #AA7C11 100%);
  color: #1A1614;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.6);
  border: 3px solid #fff;
  flex-shrink: 0;
}

.member-info-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-greeting-script {
  font-family: var(--font-accent);
  font-size: 2.1rem;
  color: var(--gold-light);
  line-height: 1;
  display: block;
}

.member-full-name {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  color: #fff;
  margin: 2px 0 4px;
  letter-spacing: 0.02em;
}

.member-badges-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vip-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(140, 111, 34, 0.35) 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.member-email-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.member-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-member-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-member-logout:hover {
  background: rgba(229, 57, 53, 0.2);
  border-color: rgba(229, 57, 53, 0.4);
  color: #ffcdd2;
}

/* Luxury Tab Navigation Bar */
.member-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-lg);
  padding: 8px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.member-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gray-600);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.member-tab-btn:hover:not(.active) {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-dark);
}

.member-tab-btn.active {
  background: #fff;
  color: var(--gold-dark);
  box-shadow: 0 4px 14px rgba(140, 111, 34, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.member-tab-btn.tab-admin-special {
  background: linear-gradient(135deg, #1A1614 0%, #2A2520 100%);
  color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.member-tab-btn.tab-admin-special:hover {
  background: var(--gold-dark);
  color: #FFFDFD;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(170, 124, 17, 0.35);
}

/* Tab Panels */
.member-tab-panel {
  display: none;
  animation: fadeIn 0.35s ease;
}

.member-tab-panel.active {
  display: block;
}

/* Bento Grid in Overview Tab */
.member-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.member-bento-wide {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .member-bento-grid {
    grid-template-columns: 1fr;
  }
}

.member-bento-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.member-bento-card:focus-visible {
  outline: 3px solid var(--rose-dark);
  outline-offset: 3px;
  border-color: rgba(212, 175, 55, 0.55);
}

.member-bento-card:hover {
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.member-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Bento card pill tags — High contrast luxury bronze/gold & rose */
.bento-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(140, 111, 34, 0.1);
  border: 1px solid rgba(140, 111, 34, 0.3);
  color: #725615;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bento-badge-tag.tag-rose {
  background: rgba(201, 120, 120, 0.12);
  border-color: rgba(201, 120, 120, 0.35);
  color: #9E3E3E;
}

.bento-badge-tag.tag-gold {
  background: rgba(140, 111, 34, 0.1);
  border-color: rgba(140, 111, 34, 0.3);
  color: #725615;
}

.member-bento-card .vip-member-badge {
  background: rgba(140, 111, 34, 0.1) !important;
  border: 1px solid rgba(140, 111, 34, 0.3) !important;
  color: #725615 !important;
}

.member-bento-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.member-bento-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.member-bento-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.member-bento-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-dark);
  cursor: pointer;
  transition: all 0.2s;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.member-bento-action-btn:hover {
  border-bottom-color: var(--gold-dark);
  transform: translateX(3px);
}

/* Card Section inside tabs */
.member-section-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-xl);
  padding: 32px 30px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .member-section-card {
    padding: 24px 18px;
  }
}

.member-section-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--text-heading);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-section-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Notifications: préférences + alertes en 2 colonnes (desktop) */
.notif-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.notif-grid .member-section-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* La lista rellena la tarjeta (altura pareja con las préférences) hasta 340px, luego scroll interno */
.notif-grid .restock-alerts-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 900px) {
  .notif-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Coordonnées & Adresse: 2 columnas dentro de la misma tarjeta (desktop),
   apiladas en móvil — compacta el tab sin perder el lenguaje premium */
.profile-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.profile-cols .form-grid + .form-grid {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.profile-cols .form-grid {
  gap: 12px;
}
#tab-panel-profile .member-section-card {
  padding: 26px 30px;
}
#tab-panel-profile .member-section-title {
  margin-bottom: 6px;
}
#tab-panel-profile .member-section-subtitle {
  margin-bottom: 14px;
  padding-bottom: 10px;
}
@media (max-width: 900px) {
  .profile-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-cols .form-grid + .form-grid {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
  }
}

.readonly-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(76, 175, 80, 0.1);
  color: #2e7d32;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

/* Security Tab Layout */
.security-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 860px) {
  .security-grid-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.security-assurance-card {
  background: linear-gradient(145deg, #1A1614 0%, #29231E 55%, #161210 100%);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.12);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.security-assurance-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.security-assurance-header {
  position: relative;
  z-index: 1;
}

.security-assurance-card .bento-badge-tag.tag-gold {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light);
}

.security-tips-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.security-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.security-tip-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.security-tip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.security-tip-text strong {
  font-size: 0.9rem;
  color: var(--gold-light);
}

.security-tip-text span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

/* Danger zone: suppression de compte (RGPD art. 17) */
.account-danger-zone {
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(198, 40, 40, 0.35);
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.06) 0%, rgba(255, 255, 255, 0.92) 60%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.account-danger-pending {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.account-danger-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(198, 40, 40, 0.1);
  border: 1px solid rgba(198, 40, 40, 0.3);
  color: #c62828;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-danger-icon svg {
  width: 20px;
  height: 20px;
}

.account-danger-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-danger-text strong {
  font-size: 0.95rem;
  color: #c62828;
}

.account-danger-text span {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.btn-danger {
  background: #c62828;
  color: #fff;
  border: 1px solid #c62828;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-danger:hover {
  background: #b71c1c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(198, 40, 40, 0.25);
}

.btn-danger-outline {
  background: transparent;
  color: #c62828;
  border: 1px solid rgba(198, 40, 40, 0.5);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-danger-outline:hover {
  background: rgba(198, 40, 40, 0.08);
}

@media (max-width: 600px) {
  .account-danger-zone {
    padding: 20px 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .account-danger-pending {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-danger,
  .btn-danger-outline {
    width: 100%;
  }
}

/* Modal suppression de compte */
.delete-account-modal {
  max-width: 520px;
}

.delete-account-info {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.delete-account-info p {
  margin: 0 0 6px;
}

.delete-account-info p strong {
  color: var(--text-heading);
}

.delete-account-info ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.delete-account-info li {
  margin-bottom: 4px;
}

.delete-account-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.delete-account-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 600px) {
  .delete-account-actions {
    flex-direction: column-reverse;
  }
  .delete-account-actions .btn-danger,
  .delete-account-actions .btn-secondary {
    width: 100%;
  }
}

/* Compatibility for old profile-card / profile-avatar */
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ================================================================
   ORDERS PAGE
   ================================================================ */
.orders-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.orders-page h2 {
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 24px;
}

.orders-list { display: flex; flex-direction: column; gap: 16px; }

.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: all var(--duration-fast);
  cursor: pointer;
}
.order-card:hover { box-shadow: var(--shadow-md); }

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.order-number {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
}
.order-status {
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Palette premium — crème/or/sauge (remplace le Material #4CAF50/#FF9800…) */
.status-pending    { background: #F7E9D9; color: #B26A00; }
.status-paid       { background: #E9EFE2; color: #58714A; }
.status-processing { background: #E9E4F5; color: #6C5AA7; }
.status-shipped    { background: #E2ECF5; color: #4A6E8C; }
.status-delivered  { background: #EAEFE3; color: #55744A; }
.status-cancelled  { background: #F6E3E0; color: #B3544A; }
.status-email-sent    { background: #E9EFE2; color: #58714A; }
.status-email-pending { background: #F7E9D9; color: #B26A00; }

.order-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.order-date {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.order-total {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gold-dark);
}
.order-shipping-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ================================================================
   ORDER CONFIRMATION
   ================================================================ */
.confirmation-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.confirmation-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
}
.confirmation-page h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.confirmation-details {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 24px 0;
  text-align: left;
  box-shadow: var(--shadow-card);
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  /* El toast es informativo (4s): jamás debe bloquear toques/clics en lo que
     queda debajo (botones de la tarjeta de réassort en móvil). Solo la X cierra. */
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: var(--gray-800);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.4s var(--ease-out);
}
.toast.show {
  transform: translateX(0);
  opacity: 1;
}
.toast.success { background: #2E7D32; }
.toast.error   { background: #C62828; }
.toast.info    { background: #1565C0; }
.toast svg { width: 20px; height: 20px; flex-shrink: 0; }
.toast-close {
  margin-left: auto;
  padding: 4px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  pointer-events: auto;
}
.toast-close:hover { color: #fff; }

/* ================================================================
   LOADING STATES
   ================================================================ */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
   LUXURY ADMIN EXECUTIVE DASHBOARD
   ================================================================ */
.admin-hero-card {
  background: linear-gradient(135deg, #1A1614 0%, #2A2520 60%, #1A1614 100%);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 30px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.admin-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.admin-kpi-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.admin-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
  border-color: var(--gold);
}
.admin-kpi-val {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.admin-kpi-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 600;
}

.admin-table-wrapper {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}
.admin-table th {
  background: var(--off-white);
  padding: 14px 16px;
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 1.5px solid var(--border);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.admin-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.admin-sort-btn:hover { color: var(--gold-dark); }
.admin-sort-btn.active { color: var(--gold-dark); }
.admin-sort-arrows {
  font-size: 0.6rem;
  line-height: 1;
  color: var(--gray-400);
}
.admin-sort-btn.active .admin-sort-arrows { color: var(--gold); }
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.admin-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--cream);
  color: var(--gray-600);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.admin-filter-chip span {
  font-size: 0.68rem;
  color: var(--gray-400);
  background: var(--off-white);
  border-radius: 50px;
  padding: 1px 7px;
}
.admin-filter-chip:hover { border-color: var(--gold); color: var(--gold-dark); }
.admin-filter-chip.active {
  background: linear-gradient(135deg, #8C6F22 0%, #aa7c11 100%);
  border-color: transparent;
  color: #FFFDFD;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}
.admin-filter-chip.active span { background: rgba(255, 255, 255, 0.2); color: #FFFDFD; }
.admin-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 160px;
}
.admin-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--gray-400);
  pointer-events: none;
}
.admin-search .admin-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.875rem;
  color: var(--text-heading);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.admin-search .admin-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.admin-pagination-info {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}
.admin-pagination .btn-primary:disabled {
  background: var(--cream);
  color: var(--gray-400);
  border: none;
  outline: 1.5px solid var(--border);
  outline-offset: -1.5px;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  opacity: 1;
}
.admin-pagination .btn-outline:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast);
  vertical-align: middle;
}
.admin-table tr:hover td {
  background: rgba(212, 175, 55, 0.03);
}
.admin-row-click {
  cursor: pointer;
}

/* ---- Dashboard: chart + top ventas ---- */
.admin-dash-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.admin-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-chart {
  position: relative;
  padding: 24px 20px 12px;
}
.admin-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 180px;
}
.admin-chart-col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}
.admin-chart-bar {
  width: 100%;
  max-width: 22px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  opacity: 0.85;
  transition: opacity var(--duration-fast);
}
.admin-chart-col:hover .admin-chart-bar {
  opacity: 1;
}
.admin-chart-day {
  margin-top: 6px;
  font-size: 0.62rem;
  color: var(--gray-400);
}
.admin-chart-tooltip {
  position: absolute;
  padding: 6px 10px;
  background: rgba(28, 25, 23, 0.92);
  color: #fff;
  font-size: 0.72rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 5;
}
.admin-chart-period {
  display: flex;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.admin-chart-period-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}
.admin-chart-period-btn:hover {
  color: var(--gold-dark);
}
.admin-chart-period-btn.active {
  background: var(--white);
  color: var(--gold-dark);
  box-shadow: var(--shadow-sm);
}
.admin-view-switch {
  display: flex;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  flex-shrink: 0;
}
.admin-view-switch-btn {
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}
.admin-view-switch-btn:hover {
  color: var(--gold-dark);
}
.admin-view-switch-btn.active {
  background: var(--white);
  color: var(--gold-dark);
  box-shadow: var(--shadow-sm);
}
.admin-chart-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-chart-title-row h3 {
  margin: 0;
}
.admin-chart-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.admin-chart-delta.up {
  color: #1B7F3B;
  background: rgba(27, 127, 59, 0.08);
}
.admin-chart-delta.down {
  color: #B3261E;
  background: rgba(179, 38, 30, 0.08);
}
.admin-top-list {
  padding: 8px 0;
}
.admin-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-light);
}
.admin-top-item:last-child {
  border-bottom: none;
}
.admin-top-rank {
  flex: 0 0 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--gold-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
}
.admin-top-info {
  min-width: 0;
}
.admin-top-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-top-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.admin-kpi-click {
  cursor: pointer;
}

/* ---- Section Ventes (comptabilité) ---- */
.admin-ventes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 24px 24px;
}
.admin-panel-head {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.admin-panel-head h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-heading);
}
.admin-ventes-export {
  padding: 20px 24px;
}
.admin-ventes-export p {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .admin-ventes-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Modal detalle de pedido ---- */
.admin-modal.admin-modal--detail {
  max-width: 560px;
  max-height: min(92vh, 700px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.admin-modal--detail .admin-modal-head {
  padding: 22px 28px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-light);
  flex: 0 0 auto;
}
.admin-modal--detail #order-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 28px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  padding: 4px 0;
}
.order-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
}
.order-detail-row--wide {
  grid-column: 1 / -1;
}
.order-detail-label {
  color: var(--text-secondary);
  flex: 0 0 92px;
}
.order-detail-value {
  text-align: right;
  color: var(--text-heading);
  font-weight: 500;
  min-width: 0;
}
.order-detail-total .order-detail-value {
  color: var(--gold-dark);
  font-size: 1.05rem;
  font-weight: 700;
}
#order-detail-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: #faf7f2;
  flex: 0 0 auto;
}
.order-detail-foot-invoice {
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.6;
}
.order-detail-foot-invoice strong {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
}
.order-detail-foot-invoice .order-status {
  font-size: 0.72rem;
  padding: 3px 10px;
}
@media (max-width: 520px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .admin-dash-grid {
    grid-template-columns: 1fr;
  }
}
.admin-table-cell-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.admin-table-cell-main strong {
  font-weight: 600;
  color: var(--text-heading);
}
.admin-table-cell-main span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.admin-table-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 46px;
  background: linear-gradient(160deg, #f7e8e0 0%, #e8c9c0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
}
.admin-table-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  justify-content: flex-end;
}
.admin-row-actions .btn-outline:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.admin-row-actions .btn-outline svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.admin-stock-chip {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--error);
  background: var(--error-bg);
  padding: 3px 8px;
  border-radius: 50px;
  white-space: nowrap;
}

/* ================================================================
   FOOTER
   ================================================================ */
.shop-footer {
  position: relative;
  background: var(--gray-900);
  color: var(--gray-400);
  padding: 44px 20px 24px;
  margin-top: 24px;
}
.shop-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-metallic), transparent);
  opacity: 0.55;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 28px;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
}
.footer-col { min-width: 0; }

.footer-col--brand h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.footer-tagline {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--gray-400);
  max-width: 34ch;
}
.footer-legal-micro {
  margin-top: 14px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--gray-400);
  opacity: 0.85;
}

.footer-col h4 {
  color: var(--gold-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--font-body);
}
.footer-col p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gray-400);
}
.footer-col a {
  display: block;
  font-size: 0.82rem;
  padding: 4px 0;
  color: var(--gray-400);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.footer-col a:hover { color: var(--gold-metallic); }
.footer-col a.footer-mail {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 32px;
  padding: 0 9px;
  background: #fff;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.pay-badge img { display: block; max-width: none; }
.pay-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.pay-badge svg { display: block; }

.footer-bottom {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--gray-400);
}
.footer-bottom > p { margin-right: auto; }
.pay-rows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.pay-divider {
  align-self: center;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.18);
}
@media (max-width: 640px) {
  .shop-footer { padding: 44px 20px 24px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-col--brand,
  .footer-col--service { grid-column: 1 / -1; text-align: center; }
  .footer-col--info { text-align: right; }
  .footer-col--brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 24px;
  }
  .footer-tagline { margin: 0 auto; }
  .footer-bottom { margin-top: 24px; }
  .pay-divider { display: none; }
  .footer-bottom > p { margin-right: 0; width: 100%; text-align: center; }
  .pay-rows { justify-content: center; width: 100%; }
  .payment-badges { justify-content: center; }
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-in {
  animation: fadeInUp 0.5s var(--ease-out) both;
}
.animate-fade {
  /* backwards (no "both"): fill-mode both mantiene un stacking context
     tras la animación y atrapa los overlays fixed (modales admin) bajo el header */
  animation: fadeIn 0.4s var(--ease-out) backwards;
}
.animate-scale {
  animation: scaleIn 0.3s var(--ease-out) both;
}

/* Staggered card animations */
.product-card:nth-child(1)  { animation-delay: 0.05s; }
.product-card:nth-child(2)  { animation-delay: 0.1s; }
.product-card:nth-child(3)  { animation-delay: 0.15s; }
.product-card:nth-child(4)  { animation-delay: 0.2s; }
.product-card:nth-child(5)  { animation-delay: 0.25s; }
.product-card:nth-child(6)  { animation-delay: 0.3s; }
.product-card:nth-child(7)  { animation-delay: 0.35s; }
.product-card:nth-child(8)  { animation-delay: 0.4s; }
.product-card:nth-child(9)  { animation-delay: 0.45s; }
.product-card:nth-child(10) { animation-delay: 0.5s; }

/* Cart add animation */
@keyframes cartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.cart-pop { animation: cartPop 0.4s var(--ease-spring); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* ≤960px: precio apilado (actual + comparativa debajo) con altura fija para que
   el footer de TODAS las tarjetas tenga la misma altura y precio/botón queden
   alineados. Por encima de 960px el precio horizontal cabe sin envolver. */
@media (max-width: 960px) {
  .product-card-footer { align-items: stretch; }
  .product-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 40px;
  }
  .price-compare { font-size: 0.7rem; }
}

@media (max-width: 700px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
  }
  .product-card-body { padding: 12px 14px 14px; }
  .product-card-category { font-size: 0.6rem; margin-bottom: 5px; }
  .product-card-name { font-size: 0.95rem; }
  .product-card-desc { display: none; }
  .price-current { font-size: 1.1rem; }
  .btn-add-cart {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .btn-add-cart span { display: none; }
  .btn-add-cart svg { width: 16px; height: 16px; }
  /* En móvil el label del botón queda oculto: para los productos agotados se
     muestra una barra "Indisponible" a lo ancho en vez de un círculo "+" muerto */
  .product-card:has(.btn-add-cart.disabled) .product-card-format { display: none; }
  .btn-add-cart.disabled {
    width: 100%;
    height: 30px;
    padding: 0 12px;
    justify-content: center;
    border-radius: 50px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .btn-add-cart.disabled span { display: inline; }
  .btn-add-cart.disabled svg { display: none; }
  .stock-urgency { font-size: 0.66rem; }
  .product-badge { top: 8px; left: 8px; padding: 4px 10px; font-size: 0.58rem; }
  .btn-wishlist { top: 8px; right: 8px; width: 32px; height: 32px; }
  .btn-wishlist svg { width: 16px; height: 16px; }
  .category-card-img { aspect-ratio: 3 / 4; }
  .category-card-overlay {
    background: linear-gradient(180deg, transparent 38%, rgba(26, 22, 20, 0.6));
  }
  .category-card-name { font-size: 0.95rem; }
  .category-card-count { font-size: 0.6rem; }
}

@media (max-width: 480px) {
  .products-grid { gap: 10px; padding: 0 12px; }

  .cart-item { flex-wrap: wrap; }
  .cart-item-actions { width: 100%; justify-content: space-between; }

  .auth-card { padding: 24px 18px; }

  /* ---- Verification envoyée : versión móvil compacta ---- */
  .verify-sent-card {
    padding: 30px 18px 24px;
    border-radius: 20px;
  }
  .verify-sent-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }
  .verify-sent-icon svg { width: 30px; height: 30px; }
  .verify-sent-card h2 {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }
  .verify-sent-subtitle {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }
  .verify-sent-email {
    display: block;
    max-width: 100%;
    font-size: 0.88rem;
    padding: 7px 14px;
    margin-bottom: 14px;
    box-sizing: border-box;
  }
  .verify-sent-hint {
    font-size: 0.82rem;
    margin-bottom: 22px;
  }
  .verify-sent-actions { gap: 8px; }
  .verify-sent-actions .btn-primary {
    padding: 13px 20px;
    font-size: 0.9rem;
  }
  .verify-sent-actions .btn-outline {
    padding: 9px 16px;
    font-size: 0.82rem;
  }
  .change-email-form {
    margin-top: 18px;
    padding-top: 18px;
  }
  .change-email-note { font-size: 0.8rem; }
  .verify-sent-back { margin-top: 16px; }
}

@media (max-width: 360px) {
  .header-logo img { width: 28px; height: 28px; }
  .header-logo-text { font-size: 0.9rem; }

  .verify-sent-card { padding: 26px 16px 22px; }
  .verify-sent-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }
  .verify-sent-icon svg { width: 26px; height: 26px; }
  .verify-sent-card h2 { font-size: 1.25rem; }
}

/* ================================================================
   CART SLIDE-OVER DRAWER (LUXURY OVERLAY)
   ================================================================ */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.65);
  backdrop-filter: blur(8px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.cart-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--white);
  box-shadow: -10px 0 40px rgba(0,0,0,0.25);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}
.cart-drawer-overlay.open .cart-drawer {
  transform: translateX(0);
}

.cart-drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--off-white);
}
.cart-drawer-header h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold-dark);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.cart-drawer-footer {
  padding: 24px;
  border-top: 1px solid var(--border-light);
  background: var(--off-white);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}

/* ================================================================
   LUXURY QUICK VIEW MODAL
   ================================================================ */
.quick-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.7);
  backdrop-filter: blur(10px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.quick-view-overlay.open {
  opacity: 1;
  visibility: visible;
}
.quick-view-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  max-width: 850px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px var(--gold-glow-strong);
  position: relative;
  transform: scale(0.92);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.quick-view-overlay.open .quick-view-modal {
  transform: scale(1);
}

/* ================================================================
   PRINT STYLES
   ================================================================ */
@media print {
  .shop-header, .shop-footer, .demo-banner, .toast-container, .luxury-ticker { display: none; }
  .shop-main { padding: 0; }
  body { background: #fff; color: #000; }
}

/* ===== RGAA 4.1.2 — Accessibilité (patch 2026-07-27) ===== */
:focus-visible {
  outline: 3px solid #aa7c11 !important;
  outline-offset: 2px !important;
}

/* ================================================================
   ORDER COUNTDOWN TIMER — Alta visibilidad
   ================================================================ */
.order-countdown {
  position: relative;
  background: linear-gradient(135deg, #FFF4E5 0%, #FFE8C8 100%);
  border: 2px solid var(--warning, #f0a500);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #8a5a00;
  box-shadow: 0 2px 8px rgba(240, 165, 0, 0.15);
  overflow: hidden;
}

.order-countdown::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: var(--progress, 100%);
  background: linear-gradient(90deg, var(--warning, #f0a500) 0%, #ff7a00 100%);
  transition: width 1s linear;
}

.order-countdown .countdown-icon {
  display: inline-block;
  font-size: 1.3rem;
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse-timer 2s ease-in-out infinite;
}

@keyframes pulse-timer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.order-countdown .countdown-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8a5a00;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.order-countdown .countdown-timer {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  color: #8a5a00;
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 2px;
  margin-left: 4px;
  min-width: 90px;
}

.order-countdown.warning {
  background: linear-gradient(135deg, #FFE8E0 0%, #FFD0C0 100%);
  border-color: #d9534f;
  color: #b03030;
}

.order-countdown.warning::before {
  background: linear-gradient(90deg, #d9534f 0%, #b03030 100%);
}

.order-countdown.warning .countdown-label,
.order-countdown.warning .countdown-timer {
  color: #b03030;
}

.order-countdown.warning .countdown-icon {
  animation: pulse-warning 1s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.order-countdown.expired {
  background: linear-gradient(135deg, #fee 0%, #fcc 100%);
  border-color: #c00;
  color: #900;
}

.order-countdown.expired .countdown-timer {
  display: none;
}

/* Versión grande para la vista de detalle */
.order-countdown-large {
  padding: 18px 24px;
  font-size: 1.05rem;
}

.order-countdown-large .countdown-timer {
  font-size: 2rem;
  padding: 6px 18px;
  min-width: 120px;
}

@media (max-width: 600px) {
  .order-countdown-large {
    padding: 14px 16px;
  }
  .order-countdown-large .countdown-timer {
    font-size: 1.5rem;
  }
}

/* ============================================================
   ADDRESS AUTOCOMPLETE (Base Adresse Nationale)
   ============================================================ */
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border, #e0d5c8);
  border-top: none;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-height: 280px;
  overflow-y: auto;
  display: none;
  margin-top: -1px;
}

.address-suggestions.open {
  display: block;
}

.address-suggestion {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light, #f4ede0);
  transition: background 0.15s;
  font-size: 0.9rem;
  line-height: 1.35;
}

.address-suggestion:last-child {
  border-bottom: none;
}

.address-suggestion:hover,
.address-suggestion.active {
  background: var(--bg-cream, #faf6ef);
}

.address-suggestion .suggestion-label {
  color: var(--text-primary, #2d2418);
  font-weight: 500;
}

.address-suggestion .suggestion-context {
  color: var(--text-secondary, #8a7c66);
  font-size: 0.8rem;
  margin-top: 2px;
}

.address-suggestion .suggestion-loading {
  color: var(--text-secondary, #8a7c66);
  font-style: italic;
  text-align: center;
  padding: 14px;
  font-size: 0.85rem;
}

.form-group {
  position: relative;
}

/* ============================================================
   MONDIAL RELAY PICKER — LUXURY REDESIGN
   ============================================================ */
.mr-picker {
  background: linear-gradient(145deg, #ffffff 0%, #fdfbf7 100%);
  border: 1px solid rgba(170, 124, 17, 0.28);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 10px 30px rgba(170, 124, 17, 0.07);
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.mr-picker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(170, 124, 17, 0.14);
}

.mr-picker-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbf7ee 0%, #f4ebd6 100%);
  border: 1px solid rgba(170, 124, 17, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #aa7c11);
  flex-shrink: 0;
}

.mr-picker-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-weight: 600;
  color: #2b2319;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.mr-picker-subtitle {
  font-size: 0.8rem;
  color: #7d7265;
  margin-top: 2px;
  font-family: var(--font-sans, 'Montserrat', sans-serif);
}

/* Search bar & actions */
.mr-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mr-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.mr-input-wrapper input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid rgba(170, 124, 17, 0.3);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  background: #ffffff;
  color: #2b2319;
  transition: all 0.2s ease;
}

.mr-input-wrapper input:focus {
  outline: none;
  border-color: var(--gold, #aa7c11);
  box-shadow: 0 0 0 3px rgba(170, 124, 17, 0.14);
}

.mr-input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #9f9384;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.mr-btn-search {
  padding: 10px 18px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c640a 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(170, 124, 17, 0.25);
}

.mr-btn-search:hover {
  background: linear-gradient(135deg, #be8b16 0%, #9e710d 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(170, 124, 17, 0.32);
}

.mr-btn-search:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.mr-btn-geoloc {
  padding: 10px 14px;
  background: #ffffff;
  color: #5a4a35;
  border: 1px solid rgba(170, 124, 17, 0.35);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.mr-btn-geoloc:hover {
  background: #fbf7ee;
  border-color: var(--gold, #aa7c11);
  color: var(--gold, #aa7c11);
}

.mr-btn-geoloc:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mr-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Address suggestions dropdown */
.mr-address-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.35);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.mr-address-dropdown.open {
  display: block;
}

.mr-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f4eee5;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.mr-suggestion-item:last-child {
  border-bottom: none;
}

.mr-suggestion-item:hover,
.mr-suggestion-item.active {
  background: #fffcf5;
  color: var(--gold, #aa7c11);
}

.mr-suggestion-icon {
  color: var(--gold, #aa7c11);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mr-suggestion-text {
  flex: 1;
  min-width: 0;
}

.mr-suggestion-main {
  font-weight: 600;
  color: #2b2319;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.mr-suggestion-sub {
  font-size: 0.74rem;
  color: #8c8275;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.mr-reference-address {
  font-size: 0.78rem;
  color: #635a4f;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #fbf8f2;
  border-left: 3px solid var(--gold, #aa7c11);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-reference-address-icon {
  color: var(--gold, #aa7c11);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mr-home-marker {
  background: #2b2319;
  color: #f7df94;
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.mr-home-marker:hover {
  transform: scale(1.15);
}

/* ============================================================
   SPLIT LAYOUT (LIST + INTERACTIVE MAP)
   ============================================================ */
.mr-split-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 768px) {
  .mr-split-container {
    grid-template-columns: 1fr;
  }
}

/* Left: Points List Column */
.mr-list-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mr-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: #7d7265;
  font-weight: 500;
}

.mr-points-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.mr-points-list::-webkit-scrollbar {
  width: 5px;
}
.mr-points-list::-webkit-scrollbar-track {
  background: #f7f3ec;
  border-radius: 4px;
}
.mr-points-list::-webkit-scrollbar-thumb {
  background: rgba(170, 124, 17, 0.35);
  border-radius: 4px;
}
.mr-points-list::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 124, 17, 0.6);
}

/* Single Point Card */
.mr-point-card {
  background: #ffffff;
  border: 1px solid #e7ded2;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mr-point-card:hover {
  border-color: var(--gold, #aa7c11);
  background: #fffdf9;
  box-shadow: 0 4px 16px rgba(170, 124, 17, 0.12);
  transform: translateY(-1px);
}

.mr-point-card.selected {
  border-color: var(--gold, #aa7c11);
  background: #fffcf5;
  box-shadow: 0 0 0 2px rgba(170, 124, 17, 0.25), 0 6px 18px rgba(170, 124, 17, 0.12);
}

.mr-point-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.mr-point-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mr-point-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4ebd6;
  color: #735104;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mr-point-card.selected .mr-point-index {
  background: var(--gold, #aa7c11);
  color: #ffffff;
}

.mr-point-name {
  font-weight: 600;
  color: #2b2319;
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.mr-point-distance {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold, #aa7c11);
  background: #fbf7ee;
  border: 1px solid rgba(170, 124, 17, 0.25);
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mr-point-address {
  color: #6d6458;
  font-size: 0.78rem;
  line-height: 1.35;
  margin-left: 30px;
}

/* Status & Hours */
.mr-point-meta {
  margin-left: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.mr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.mr-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.mr-status-dot.open {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}
.mr-status-dot.closed {
  background: #dc2626;
}

.mr-status-text.open {
  color: #15803d;
}
.mr-status-text.closed {
  color: #b91c1c;
}

.mr-hours-toggle {
  background: none;
  border: none;
  color: #8c640a;
  font-size: 0.74rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}

.mr-hours-toggle:hover {
  color: var(--gold, #aa7c11);
}

/* Collapsible weekly schedule */
.mr-weekly-hours {
  margin-left: 30px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #fdfbf8;
  border: 1px solid #f1ece4;
  border-radius: 6px;
  font-size: 0.72rem;
  display: none;
}

.mr-weekly-hours.open {
  display: block;
}

.mr-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: #635a4f;
}

.mr-hours-row.current-day {
  font-weight: 700;
  color: #8c640a;
}

/* Select button */
.mr-point-action {
  margin-left: 30px;
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

.mr-btn-select-point {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.4);
  color: #8c640a;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.mr-point-card:hover .mr-btn-select-point {
  background: var(--gold, #aa7c11);
  border-color: var(--gold, #aa7c11);
  color: #ffffff;
}

.mr-point-card.selected .mr-btn-select-point {
  background: var(--gold, #aa7c11);
  border-color: var(--gold, #aa7c11);
  color: #ffffff;
}

/* Right: Map Column */
.mr-map-column {
  position: sticky;
  top: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(170, 124, 17, 0.28);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  background: #f4ebd6;
}

#mr-map {
  width: 100%;
  height: 440px;
  z-index: 1;
}

@media (max-width: 768px) {
  .mr-map-column {
    position: static;
    order: -1;
  }
  #mr-map {
    height: 220px;
  }
}

/* Custom Leaflet Map Markers */
.mr-marker-icon {
  background: var(--gold, #aa7c11);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.mr-marker-icon:hover {
  transform: scale(1.15);
  background: #8c640a;
}

.mr-marker-icon.active {
  background: #2b2319;
  border-color: var(--gold, #aa7c11);
  transform: scale(1.22);
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.5);
}

/* Leaflet Popup Styling */
.mr-popup-content {
  font-family: var(--font-sans, 'Montserrat', sans-serif);
  padding: 4px;
}

.mr-popup-title {
  font-weight: 600;
  color: #2b2319;
  font-size: 0.85rem;
  margin-bottom: 3px;
}

.mr-popup-addr {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 6px;
}

.mr-popup-btn {
  background: var(--gold, #aa7c11);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
   CONFIRMED / SELECTED POINT SUMMARY CARD
   ============================================================ */
.mr-selected-card {
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffcf6 0%, #fdf9ef 100%);
  border: 1.5px solid var(--gold, #aa7c11);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(170, 124, 17, 0.1);
  animation: slideDown 0.25s ease;
}

.mr-selected-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mr-selected-check-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #aa7c11 0%, #8c640a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(170, 124, 17, 0.3);
}

.mr-selected-info {
  flex: 1;
}

.mr-selected-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--gold, #aa7c11);
  margin-bottom: 2px;
}

.mr-selected-name {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-weight: 600;
  color: #2b2319;
  font-size: 0.96rem;
}

.mr-selected-addr {
  color: #635a4f;
  font-size: 0.8rem;
  margin-top: 2px;
}

.mr-selected-code {
  display: inline-block;
  font-family: monospace;
  background: #f4ebd6;
  color: #735104;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.74rem;
  margin-top: 6px;
}

.mr-btn-modify {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.4);
  color: #735104;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  align-self: center;
}

.mr-btn-modify:hover {
  background: var(--gold, #aa7c11);
  border-color: var(--gold, #aa7c11);
  color: #ffffff;
}

/* ================================================================
   LUXURY BOUTIQUE ELEVATION STYLES
   ================================================================ */

/* Product Detail Accordions */
.product-accordion {
  margin-top: 28px;
  border-top: 1px solid var(--border);
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-header {
  width: 100%;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-heading);
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.accordion-header:hover,
.accordion-item.active .accordion-header {
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.05);
}

.accordion-icon {
  font-size: 1.2rem;
  font-family: monospace;
  color: var(--gold-dark);
  transition: transform 0.3s var(--ease-out);
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}

.accordion-body {
  display: none;
  padding: 0 0 18px 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--gray-600);
}

.accordion-item.active .accordion-body {
  display: block;
  animation: fadeIn 0.3s ease;
}

.inci-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.6;
  background: var(--bg-secondary);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  color: var(--gray-700);
}

/* Rating & Badges */
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--gold-dark);
  margin-bottom: 8px;
}

.stars {
  letter-spacing: 2px;
  color: #d4af37;
}

.skin-type-tag {
  display: inline-block;
  background: rgba(140, 111, 34, 0.08);
  color: var(--gold-dark);
  border: 1px solid rgba(140, 111, 34, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Reassurance Box */
.reassurance-box {
  margin-top: 24px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .reassurance-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.reassurance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--gray-700);
}

.reassurance-item svg,
.reassurance-item span.reass-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Esthetician Advice Callout */
.consultation-card {
  margin-top: 24px;
  background: linear-gradient(135deg, #fff7f7 0%, #fff1f2 100%);
  border: 1px solid rgba(201, 120, 120, 0.25);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.consultation-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.consultation-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  flex-shrink: 0;
}

.consultation-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
}

.consultation-sub {
  font-size: 0.78rem;
  color: var(--gray-600);
}

.btn-consultation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gold-dark);
  color: #ffffff;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-consultation:hover {
  background: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(170, 124, 17, 0.25);
}

/* ================================================================
   EDITORIAL SECTION: L'Art du Soin & Secrets de Formule
   ================================================================ */
.product-editorial-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.editorial-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 4px;
}

.editorial-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}

.editorial-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.editorial-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--gold-light);
  font-size: 0.8rem;
  line-height: 1;
}

.editorial-divider::before,
.editorial-divider::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

/* Tabs Navigation */
.product-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  padding-bottom: 14px;
  flex-wrap: wrap;
}

.product-tab-btn {
  padding: 11px 24px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray-600);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.product-tab-btn:hover {
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.35);
}

.product-tab-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%);
  color: var(--gold-dark);
  border-color: rgba(212, 175, 55, 0.45);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.12);
}

.product-tab-pane {
  display: none;
  animation: fadeInTab 0.35s ease forwards;
}

.product-tab-pane.active {
  display: block;
}

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

/* Tab 1: Benefits Grid */
.benefits-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .benefits-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.benefit-card-item {
  background: rgba(255, 253, 251, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(26, 22, 20, 0.03);
}

.benefit-sparkle {
  color: var(--gold-dark);
  font-size: 1.1rem;
  line-height: 1.2;
}

.benefit-card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-700);
}

/* Tab 2: Ritual Routine */
.ritual-card {
  background: rgba(255, 253, 251, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 4px 16px rgba(26, 22, 20, 0.04);
}

.ritual-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .ritual-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ritual-step-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  text-align: center;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-glow);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.step-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.step-desc {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
}

.esthetician-quote-box {
  background: linear-gradient(135deg, rgba(255, 245, 245, 0.8) 0%, rgba(255, 250, 245, 0.9) 100%);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.esthetician-quote-text {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-700);
}

/* Tab 3: Formulation & INCI */
.inci-transparency-card {
  background: rgba(255, 253, 251, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 4px 16px rgba(26, 22, 20, 0.04);
}

.clean-commitments-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.clean-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(140, 111, 34, 0.08);
  color: var(--gold-dark);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
}

.inci-text-box {
  background: var(--bg-secondary);
  padding: 18px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--gray-700);
}

/* ================================================================
   ESTHETICIAN VIP CONCIERGE BANNER (Full-Width)
   ================================================================ */
.consultation-concierge-banner {
  margin-top: 56px;
  padding: 28px 36px;
  background: linear-gradient(135deg, rgba(255, 248, 246, 0.95) 0%, rgba(255, 240, 240, 0.92) 50%, rgba(253, 246, 238, 0.95) 100%);
  border: 1px solid rgba(201, 120, 120, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(201, 120, 120, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.concierge-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 280px;
}

.concierge-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  padding: 2px;
  background: #fff;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(140, 111, 34, 0.2);
}

.concierge-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 4px;
}

.concierge-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.concierge-desc {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.5;
  max-width: 600px;
}

.btn-concierge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(170, 124, 17, 0.28);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-concierge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(170, 124, 17, 0.4);
  background: linear-gradient(135deg, #c5a028 0%, #aa7c11 100%);
}

/* Cross-selling (Complétez votre rituel) */
.cross-sell-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.cross-sell-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  text-align: center;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.cross-sell-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 24px;
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cross-sell-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}

.cross-sell-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cross-sell-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.cross-sell-name {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--gray-900);
}

.cross-sell-price {
  font-weight: 600;
  color: var(--gold-dark);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.btn-cross-add {
  width: 100%;
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  transition: all 0.2s ease;
}

.btn-cross-add:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

/* Complimentary Samples in Cart */
.samples-box {
  margin: 18px 0;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
}

.samples-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 10px;
}

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

.sample-pill {
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.sample-pill.selected {
  border-color: var(--gold);
  background: #fdfbf7;
  color: var(--gold-dark);
  font-weight: 600;
}

.sample-pill:hover {
  border-color: var(--gold-dark);
}

/* Coupons in Checkout & Cart */
.coupon-container {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* El placeholder "CODE PROMOTIONNEL" (uppercase + letter-spacing heredados)
   se recortaba en el input real de checkout/carrito (medido 200px vs
   174-198px disponibles): vuelve a minúsculas sin letter-spacing; el VALOR
   que escribe el cliente sigue en mayúsculas. */
.coupon-input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* El placeholder "CODE PROMOTIONNEL" (uppercase) no cabía en el input del
   panier/checkout en móvil: el botón Appliquer (padding inline) robaba el
   ancho. El botón pasa a compactarse en móvil y el placeholder a 0.75rem;
   en ≤360px el botón se apila debajo del input (nunca se recorta). */
.coupon-container .btn-outline {
  padding: 8px 16px;
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .coupon-container .btn-outline {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .coupon-input {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}
@media (max-width: 340px) {
  .coupon-container {
    flex-wrap: wrap;
  }
  .coupon-container .btn-outline {
    flex: 1 1 100%;
  }
}

.coupon-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #2e7d32;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 8px;
}

.coupon-remove-btn {
  cursor: pointer;
  color: #d32f2f;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Shipping Option Free Badge */
.shipping-free-badge {
  display: inline-block;
  background: #2e7d32;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* ================================================================
   INTERACTIVE SKIN BEAUTY DIAGNOSTIC & RITUEL SUR-MESURE
   ================================================================ */
.hero-diagnostic-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: #FFFDFD;
  border: 1px solid rgba(170, 124, 17, 0.5);
  border-radius: 50px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.12);
  transition: all 0.3s var(--ease-out);
}

.hero-diagnostic-cta:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(170, 124, 17, 0.25);
}

/* Diagnostic Banner Enhancements */
.luxury-diagnostic-banner {
  background: linear-gradient(135deg, #fff9f6 0%, #fff4f0 50%, #fdf8f0 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 10px 35px rgba(170, 124, 17, 0.09) !important;
  position: relative;
  overflow: hidden;
}

.luxury-diagnostic-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.btn-diagnostic-action {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* Diagnostic Modal Overlay */
.diagnostic-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 11, 9, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.diagnostic-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Diagnostic Modal Content Container */
.diagnostic-modal {
  background: #ffffff;
  border-radius: 24px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.35);
  position: relative;
  transform: scale(0.94) translateY(18px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.diagnostic-modal-overlay.open .diagnostic-modal {
  transform: scale(1) translateY(0);
}

/* Modal Inner Structure */
.diagnostic-header {
  padding: 24px 28px 18px;
  background: linear-gradient(180deg, #fffcf9 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  position: relative;
}

.diagnostic-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  color: var(--gray-600);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.diagnostic-close-btn:hover {
  background: #fbf5ee;
  color: #aa7c11;
  border-color: #aa7c11;
  transform: rotate(90deg);
}

.diagnostic-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-right: 44px;
}

.diagnostic-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aa7c11;
}

.diagnostic-brand-name {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8c6f22;
}

.diagnostic-confidential {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
  background: #faf8f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

.diagnostic-confidential svg {
  width: 12px;
  height: 12px;
}

.diagnostic-title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

/* Stepper: 3 étapes numérotées */
.diagnostic-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.diagnostic-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.diagnostic-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  background: #ffffff;
  color: #9a9a9a;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.diagnostic-step.active .diagnostic-step-num {
  border-color: #aa7c11;
  color: #8c6f22;
  background: #fffcf6;
  box-shadow: 0 0 0 3px rgba(170, 124, 17, 0.12);
}

.diagnostic-step.done .diagnostic-step-num {
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  border-color: #aa7c11;
  color: #ffffff;
}

.diagnostic-step-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
  white-space: nowrap;
}

.diagnostic-step.active .diagnostic-step-label {
  color: #8c6f22;
}

.diagnostic-step-line {
  flex: 1;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  margin-bottom: 16px;
  transition: background 0.3s ease;
}

.diagnostic-step-line.done {
  background: linear-gradient(90deg, #aa7c11 0%, #c5a028 100%);
}

/* Modal Body */
.diagnostic-body {
  padding: 26px 28px;
}

.diagnostic-q-title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #222222;
  margin: 0 0 6px 0;
}

.diagnostic-q-subtitle {
  font-size: 0.86rem;
  color: #666666;
  margin-bottom: 22px;
  line-height: 1.45;
}

/* Options Grid */
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.diagnostic-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.diagnostic-card:hover {
  border-color: #aa7c11;
  background: #fffcf8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(170, 124, 17, 0.12);
}

.diagnostic-card.selected {
  border-color: #aa7c11;
  background: linear-gradient(135deg, #fffcf6 0%, #fff8ec 100%);
  box-shadow: 0 6px 22px rgba(170, 124, 17, 0.16);
}

.diagnostic-card-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.diagnostic-card-text {
  flex: 1;
}

.diagnostic-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.diagnostic-card-desc {
  font-size: 0.8rem;
  color: #666666;
  line-height: 1.4;
}

.diagnostic-card-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #ffffff;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s ease;
}

.diagnostic-card.selected .diagnostic-card-check {
  background: #aa7c11;
  border-color: #aa7c11;
}

/* Modal Actions */
.diagnostic-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.diagnostic-btn-back {
  background: none;
  border: none;
  color: #666666;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.diagnostic-btn-back:hover {
  color: #aa7c11;
  background: rgba(170, 124, 17, 0.06);
}

.diagnostic-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.24);
  transition: all 0.25s ease;
}

.diagnostic-btn-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.diagnostic-btn-next:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(170, 124, 17, 0.35);
  background: linear-gradient(135deg, #c5a028 0%, #aa7c11 100%);
}

/* ================================================================
   DIAGNOSTIC RESULTS SCREEN (ORDONNANCE PRIVÉE)
   ================================================================ */
.diagnostic-result-box {
  animation: fadeIn 0.4s ease forwards;
}

.diagnostic-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(170, 124, 17, 0.1);
  border: 1px solid rgba(170, 124, 17, 0.3);
  color: #8c6f22;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.diagnostic-analysis-card {
  background: linear-gradient(135deg, #fffcf7 0%, #fff8ee 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 24px;
  position: relative;
}

.diagnostic-analysis-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.diagnostic-analysis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(247, 242, 234, 0.95) 0%, rgba(226, 203, 168, 0.25) 100%);
  border: 1px solid rgba(197, 168, 128, 0.45);
  color: #aa7c11;
  flex-shrink: 0;
}

.diagnostic-analysis-head h4 {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: 1.05rem;
  color: #1a1a1a;
  margin: 0;
}

.diagnostic-analysis-card p {
  font-size: 0.85rem;
  color: #555555;
  line-height: 1.55;
  margin: 0;
}

.diagnostic-recs-title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: 1.15rem;
  color: #1a1a1a;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.diagnostic-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.diagnostic-rec-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.diagnostic-rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(170, 124, 17, 0.12);
  border-color: rgba(170, 124, 17, 0.35);
}

.diagnostic-rec-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.diagnostic-rec-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 3px 10px rgba(170, 124, 17, 0.28);
  flex-shrink: 0;
}

.diagnostic-rec-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aa7c11;
  background: #fbf5eb;
  padding: 3px 8px;
  border-radius: 8px;
}

.diagnostic-rec-main {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.diagnostic-rec-thumb {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  object-fit: cover;
  background: #faf8f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.diagnostic-rec-info {
  flex: 1;
}

.diagnostic-rec-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.diagnostic-rec-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #aa7c11;
}

.diagnostic-rec-why {
  font-size: 0.78rem;
  color: #666666;
  line-height: 1.45;
  background: #faf8f6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  border-left: 2.5px solid #c5a028;
}

.diagnostic-rec-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-rec-add {
  flex: 1;
  padding: 9px 12px;
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-rec-add:hover {
  background: linear-gradient(135deg, #c5a028 0%, #aa7c11 100%);
  box-shadow: 0 4px 12px rgba(170, 124, 17, 0.3);
}

.btn-rec-view {
  padding: 9px 14px;
  background: #f7f4ef;
  color: #555555;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-rec-view:hover {
  color: #aa7c11;
  background: #ffffff;
  border-color: #aa7c11;
}

/* Institutional Concierge Assistance Notice */
.diagnostic-concierge-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fcfbf9;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: #555555;
  line-height: 1.45;
}

.diagnostic-concierge-note a {
  color: #8c6f22;
  font-weight: 600;
  text-decoration: underline;
}

.diagnostic-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-diagnostic-restart {
  background: none;
  border: none;
  color: #777777;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.btn-diagnostic-restart:hover {
  color: #aa7c11;
}

/* Résultats: modal élargi + compact pour tenir sans scroll */
.diagnostic-modal.diagnostic-result-modal {
  max-width: 760px;
}

.diagnostic-result-modal .diagnostic-header {
  padding-bottom: 14px;
}

.diagnostic-result-modal .diagnostic-result-badge {
  margin-bottom: 8px;
}

.diagnostic-result-modal .diagnostic-title {
  margin-bottom: 0;
}

.diagnostic-result-modal .diagnostic-body {
  padding: 16px 24px 20px;
}

.diagnostic-result-modal .diagnostic-analysis-card {
  padding: 12px 18px;
  margin-bottom: 14px;
}

.diagnostic-result-modal .diagnostic-analysis-card p {
  font-size: 0.82rem;
}

.diagnostic-result-modal .diagnostic-analysis-head {
  margin-bottom: 4px;
}

.diagnostic-result-modal .diagnostic-recs-title {
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.diagnostic-result-modal .diagnostic-recs-grid {
  gap: 12px;
  margin-bottom: 12px;
}

.diagnostic-result-modal .diagnostic-rec-card {
  padding: 10px 14px;
}

.diagnostic-result-modal .diagnostic-rec-top {
  margin-bottom: 6px;
}

.diagnostic-result-modal .diagnostic-rec-main {
  margin-bottom: 8px;
}

.diagnostic-result-modal .diagnostic-rec-thumb {
  width: 56px;
  height: 56px;
}

.diagnostic-result-modal .diagnostic-rec-why {
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 0.75rem;
}

.diagnostic-result-modal .diagnostic-concierge-note {
  padding: 10px 14px;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .diagnostic-modal {
    border-radius: 16px;
    max-height: 94vh;
  }
  .diagnostic-header {
    padding: 18px 18px 14px;
  }
  .diagnostic-body {
    padding: 18px 16px;
  }
  .diagnostic-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .diagnostic-card {
    padding: 14px 14px;
  }
  .diagnostic-recs-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-bottom-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .diagnostic-confidential {
    display: none;
  }
  .diagnostic-steps {
    gap: 6px;
  }
  .diagnostic-step-label {
    font-size: 0.55rem;
  }
}

/* ================================================================
   CONTACT ESTHÉTICIENNE — MODAL
   ================================================================ */
.contact-modal {
  max-width: 560px;
  overflow: hidden; /* el scroll vive en .contact-body */
}

.contact-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b76e79;
  margin-bottom: 6px;
}

.contact-modal-title {
  font-family: var(--font-heading, "Playfair Display", serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

/* Fila título + pill de promesa de respuesta (compacta el header) */
.contact-modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.contact-modal-title-row .contact-modal-title {
  margin: 0;
}
.contact-modal-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c6f22;
  background: linear-gradient(135deg, #fbf6ec, #f6ecd9);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.contact-modal-pill svg {
  width: 13px;
  height: 13px;
}

.contact-modal-subtitle {
  font-size: 0.88rem;
  color: #6b625a;
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
}

.contact-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 28px 0;
}

/* Compactación: header y grid más ajustados (el modal cabe sin scroll en desktop) */
.contact-modal .diagnostic-header {
  flex-shrink: 0;
  padding: 16px 28px 12px;
}
.contact-modal .form-grid {
  gap: 12px;
}

.contact-body .form-group textarea {
  resize: none;
  min-height: 60px;
  max-height: 180px;
  line-height: 1.6;
}

/* Floating labels: la etiqueta vive dentro del campo y sube al enfocar
   (look formulario de hotel de lujo; compacta el modal sin scroll) */
.contact-modal .floating-field {
  position: relative;
}
.contact-modal .floating-input {
  height: 54px;
  padding: 20px 14px 6px;
  font-size: 0.92rem;
  background: #fff;
}
.contact-modal .floating-input:focus {
  background: #fff;
}
.contact-modal .floating-label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 400;
  color: #8a7a6a;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}
.contact-modal .floating-input:focus + .floating-label,
.contact-modal .floating-input:not(:placeholder-shown) + .floating-label {
  top: 9px;
  transform: none;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c6f22;
}
/* Select y textarea: la etiqueta siempre flotada (siempre tienen valor/placeholder) */
.contact-modal .floating-field--select .floating-label,
.contact-modal .floating-field--textarea .floating-label {
  top: 9px;
  transform: none;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c6f22;
}
.contact-modal .floating-field--textarea .floating-input {
  height: auto;
  min-height: 60px;
  padding: 26px 14px 8px;
  line-height: 1.6;
}

/* Footer del formulario: consentimiento + botón en flujo normal (el modal
   cabe sin scroll gracias a los floating labels) */
.contact-submit-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 12px;
}

.contact-char-count {
  font-size: 0.72rem;
  color: var(--gray-400);
  text-align: right;
  margin-top: 4px;
}

/* Honeypot anti-spam : masqué visuellement mais présent pour les bots */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Case de consentement RGPD */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.5;
  cursor: pointer;
}

.contact-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.contact-consent a {
  color: var(--gold-dark);
  text-decoration: underline;
}

.contact-consent a:hover {
  color: var(--gold);
}

@media (max-width: 640px) {
  .contact-modal .diagnostic-header {
    padding: 12px 16px 8px;
  }
  .contact-body {
    padding: 12px 16px 0;
  }
  .contact-modal-title {
    font-size: 1.3rem;
  }
  .contact-modal .form-grid {
    gap: 10px;
  }
  .contact-modal .floating-input {
    height: 50px;
  }
  .contact-consent {
    font-size: 0.72rem;
  }
}

/* Móvil: los 4 campos cortos (Prénom|Nom, Email|Téléphone) en 2 columnas
   para que el modal quepa sin scroll (hasta 320px; la etiqueta flotada se
   elipsiza en el campo vacío y se muestra completa al enfocar) */
@media (max-width: 599px) and (min-width: 320px) {
  .contact-modal .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-modal .form-grid .full-width {
    grid-column: 1 / -1;
  }
}

/* Pantallas muy estrechas: título y subtítulo más compactos para que el
   modal siga cabiendo sin scroll */
@media (max-width: 360px) {
  .contact-modal-title {
    font-size: 1.1rem;
  }
  .contact-modal-subtitle {
    font-size: 0.8rem;
  }
}


/* ================================================================
   RONDE 8 — a11y focus, stock bajo, skeletons
   ================================================================ */
/* Focus visible al navegar el catálogo con Tab (RGAA 10.2) */
.product-card:focus-visible {
  outline: 3px solid var(--gold, #8C6F22);
  outline-offset: 3px;
  border-radius: var(--radius-md, 12px);
}

/* Urgencia de stock bajo */
.stock-urgency {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #B3261E;
  width: fit-content;
}
.stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B3261E;
  flex: none;
  animation: stockPulse 1.6s ease-in-out infinite;
}
@keyframes stockPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Skeletons de carga del catálogo */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--gray-200, #eee8e0);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.skeleton-card .product-card-image { min-height: 220px; }
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin: 8px 0;
}
.skeleton-btn {
  width: 96px;
  height: 34px;
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none !important; }
}

/* ================================================================
   LUXURY VECTOR ICON COLLECTION — SECRET DE BEAUTÉ
   High-End Parisian Aesthetics Styling
   ================================================================ */
.luxury-svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.ribbon-icon svg {
  width: 24px;
  height: 24px;
  color: var(--gold-dark, #AA7C11);
}

.diagnostic-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(247, 242, 234, 0.95) 0%, rgba(226, 203, 168, 0.25) 100%);
  border: 1px solid rgba(197, 168, 128, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  box-shadow: 0 3px 12px rgba(170, 124, 17, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagnostic-card-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.diagnostic-card:hover .diagnostic-card-icon,
.diagnostic-card.selected .diagnostic-card-icon {
  border-color: var(--gold-dark, #AA7C11);
  box-shadow: 0 4px 16px rgba(170, 124, 17, 0.2);
  background: linear-gradient(135deg, #FAF7F2 0%, rgba(197, 168, 128, 0.4) 100%);
}

.diagnostic-card:hover .diagnostic-card-icon svg,
.diagnostic-card.selected .diagnostic-card-icon svg {
  transform: scale(1.1);
}

.auth-perk-icon-wrap svg {
  width: 22px;
  height: 22px;
  color: var(--gold-light, #E2CBA8);
}

.member-bento-icon-badge svg {
  width: 24px;
  height: 24px;
  color: var(--gold-dark, #AA7C11);
}

.security-tip-icon svg {
  width: 20px;
  height: 20px;
  color: var(--gold-dark, #AA7C11);
}

.skin-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.skin-type-tag svg {
  width: 14px;
  height: 14px;
  color: var(--gold-dark, #AA7C11);
}

.product-image-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-image-badge svg {
  width: 14px;
  height: 14px;
  color: var(--gold, #C5A880);
}

.member-nav-tabs button span svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.order-timeline-step-icon svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   ADMIN — CARTE HERO (picker premium)
   ============================================================ */
.hero-admin-head h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.hero-admin-head p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 640px;
}
.hero-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 24px;
  align-items: start;
}
.hero-admin-picker {
  padding: 24px;
  min-width: 0;
}
.hero-admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.hero-admin-search {
  position: relative;
  margin-bottom: 12px;
}
.hero-admin-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-400);
  pointer-events: none;
}
.hero-admin-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  background: #fff;
  color: var(--text);
}
.hero-admin-search input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.hero-admin-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hero-admin-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.hero-admin-item:hover {
  background: rgba(212, 175, 55, 0.06);
}
.hero-admin-item.selected {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
.hero-admin-item.inactive {
  opacity: 0.55;
}
.hero-admin-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 46px;
  background: linear-gradient(160deg, #f7e8e0 0%, #e8c9c0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-admin-thumb-fallback {
  color: var(--gold-dark);
  display: flex;
}
.hero-admin-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-admin-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-admin-item-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.hero-admin-item-meta em {
  font-style: normal;
  color: var(--rose-dark);
}
.hero-admin-check {
  color: var(--gold);
  display: flex;
  flex: 0 0 auto;
}
.hero-admin-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.hero-admin-preview-card {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 20px 20px 32px;
  text-align: center;
}
.hero-admin-preview-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.hero-admin-preview-wrap {
  position: relative;
  width: min(330px, 100%);
  margin: 0 auto;
}
.hero-admin-preview-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 165px 165px 24px 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #f7e8e0 0%, #e8c9c0 100%);
  box-shadow: 0 20px 40px rgba(170, 124, 17, 0.16);
}
.hero-admin-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le preview reprend la taille réelle du hero du catalogue (même wrap,
   même ratio, mêmes rayons) pour que badge et recadrage correspondent. */
@media (max-width: 700px) {
  .hero-admin-preview-wrap {
    width: 100%;
  }
  .hero-admin-preview-frame {
    aspect-ratio: 1 / 1;
    border-radius: 50% 50% 24px 24px;
  }
}
/* Le badge du preview réutilise la classe réelle .hero-frame-badge pour
   correspondre exactement au catalogue ; ce modificateur neutralise
   l'interactivité (hover, focus, curseur). */
.hero-frame-badge--preview {
  cursor: default;
  pointer-events: none;
}
.hero-frame-badge--preview:hover {
  transform: none;
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 12px 28px rgba(26, 22, 20, 0.14);
}
.hero-admin-preview-note {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.hero-admin-pos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.hero-admin-pos-hint {
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.hero-admin-pos-reset {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gold-dark);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.hero-admin-pos-reset:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--cream);
}
.hero-admin-pos-reset:disabled {
  opacity: 0.45;
  cursor: default;
}
.hero-admin-cover {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hero-admin-cover-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.hero-admin-cover-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hero-admin-cover-thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.hero-admin-cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-admin-cover-thumb:hover {
  opacity: 1;
  border-color: var(--gold);
}
.hero-admin-cover-thumb.is-active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
@media (max-width: 900px) {
  .hero-admin-grid {
    grid-template-columns: 1fr;
  }
  .hero-admin-preview-card {
    position: static;
  }
}

/* ============================================================
   ADMIN — CARTE HERO (switch actif + footer du formulaire)
   ============================================================ */
.hero-admin-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s;
}
.hero-admin-switch:hover {
  border-color: var(--gold);
}
.hero-admin-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hero-admin-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--gray-400);
  transition: background 0.25s;
  flex: 0 0 auto;
}
.hero-admin-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s;
}
.hero-admin-switch input:checked + .hero-admin-switch-track {
  background: var(--gold);
}
.hero-admin-switch input:checked + .hero-admin-switch-track::after {
  transform: translateX(20px);
}
.hero-admin-switch input:focus-visible + .hero-admin-switch-track {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.hero-admin-switch-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hero-admin-switch-text strong {
  font-size: 0.85rem;
  color: var(--text);
}
.hero-admin-switch-text small {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
/* ============ Alertes de retour en stock (compte) ============ */
.restock-alerts-scroll {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 165, 74, 0.45) rgba(0, 0, 0, 0.05);
  overscroll-behavior: contain;
}
.restock-alerts-scroll::-webkit-scrollbar {
  width: 5px;
}
.restock-alerts-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 99px;
}
.restock-alerts-scroll::-webkit-scrollbar-thumb {
  background: rgba(201, 165, 74, 0.45);
  border-radius: 99px;
}
.restock-alert-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.restock-alert-row:hover {
  border-color: rgba(201, 165, 74, 0.55);
  box-shadow: 0 2px 12px rgba(90, 70, 30, 0.06);
}
.restock-alert-thumb {
  width: 46px;
  height: 46px;
  min-width: 46px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #faf7f2;
}
.restock-alert-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #faf7f2, #f1e9dc);
  color: var(--gold);
  font-size: 1.1rem;
}
.restock-alert-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.restock-alert-name {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restock-alert-chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.restock-alert-chip.chip-pending {
  background: #f6efe0;
  color: #a8833c;
}
.restock-alert-chip.chip-imminent {
  background: #e7f2ea;
  color: #2e7d32;
}
.restock-alert-price {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-dark);
  white-space: nowrap;
}
.restock-alert-remove {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.restock-alert-remove:hover {
  color: var(--error);
  border-color: var(--error);
  background: rgba(192, 57, 43, 0.06);
  transform: translateY(-1px);
}
.restock-alert-remove:active {
  transform: translateY(0);
}
.restock-alerts-empty {
  text-align: center;
  padding: 26px 16px;
  color: var(--text-secondary);
}
.restock-alerts-empty-icon {
  display: block;
  font-size: 1.6rem;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 8px;
}
.restock-alerts-empty p {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: var(--text);
}
.restock-alerts-empty small {
  font-size: 0.78rem;
  line-height: 1.5;
}
.restock-alerts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.restock-alerts-loading .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
@media (max-width: 480px) {
  .restock-alert-row {
    gap: 10px;
    padding: 10px 12px;
  }
  .restock-alert-thumb {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .restock-alert-remove {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

.hero-admin-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.hero-admin-form-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.hero-admin-preview-off .hero-frame-badge--preview {
  opacity: 0.35;
  filter: grayscale(1);
}
.hero-admin-preview-off .hero-admin-preview-frame {
  box-shadow: 0 20px 40px rgba(26, 22, 20, 0.1);
}
@media (max-width: 640px) {
  .hero-admin-form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-admin-form-footer .btn-primary {
    width: 100%;
  }
}

/* ======================== ADMIN NAV (premium) ======================== */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 2px 8px;
  margin-bottom: 28px;
  min-width: 0;
}
.admin-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 9px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  flex: 0 0 auto;
}
.admin-nav-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.admin-nav-btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}
.admin-nav-btn.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(140, 111, 34, 0.35);
}

/* ======================== ADMIN — FLUX PRODUITS ======================== */
.feed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 34px;
}
.feed-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feed-card--clickable {
  cursor: pointer;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.feed-card--clickable:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.18);
}
.feed-card-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #B4541D;
}
.feed-card-summary svg {
  width: 13px;
  height: 13px;
}
.feed-config-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.feed-config-btn svg {
  width: 14px;
  height: 14px;
}
.feed-card--clickable:hover .feed-config-btn {
  background: var(--gold);
  color: #fff;
}
.feed-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.feed-card-title svg {
  width: 18px;
  height: 18px;
  color: var(--gold-dark);
}
.feed-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold-dark);
  border: 1px solid rgba(212, 175, 55, 0.35);
  white-space: nowrap;
}
.feed-badge--stale {
  background: #FDF3E8;
  color: #B4541D;
  border-color: #F0C9A8;
}
.feed-card-format {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: -6px 0 0;
}
.feed-url-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.feed-url-input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #FBFAF6;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.feed-copy-btn:hover {
  background: var(--gold);
  color: #fff;
}
.feed-card-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #8a827a;
  margin: 0;
}
.feed-card-time svg {
  width: 14px;
  height: 14px;
}
.feed-card-time--stale {
  color: #B4541D;
  font-weight: 600;
}
.feed-kpi .admin-kpi-val {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* 5 KPIs → 5 columnas en escritorio; 3+2 en medio; 1 columna abajo.
   Evita el huérfano (GTIN sola en su fila) del auto-fit genérico. */
.admin-kpi-grid--feed {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1280px) {
  .admin-kpi-grid--feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .admin-kpi-grid--feed {
    grid-template-columns: 1fr;
  }
}
.feed-kpi-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a827a;
}
.feed-note {
  background: #FBFAF6;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-note p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.feed-note svg {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
  margin-right: 4px;
  vertical-align: -2px;
}

/* --- Liste "Produits dans le flux" (switch d'exclusion par produit) --- */
.feed-prod-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feed-prod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .15s;
}
.feed-prod-row:last-child {
  border-bottom: none;
}
.feed-prod-row:hover {
  background: #FBFAF6;
}
.feed-prod-row--busy {
  opacity: .55;
  pointer-events: none;
}
.feed-prod-row--off .feed-prod-name {
  color: var(--text-secondary);
}
.feed-prod-cell {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.feed-prod-name {
  font-size: 0.88rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-prod-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.feed-prod-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.feed-prod-empty {
  padding: 16px;
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}
.feed-prod-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #EBE4D4;
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  margin: 0;
  flex: none;
}
.feed-prod-cb::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left .2s;
}
.feed-prod-cb:checked {
  background: var(--gold);
  border-color: var(--gold-dark);
}
.feed-prod-cb:checked::after {
  left: 20px;
}
.feed-prod-cb:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* --- Modal « produits d'un flux » (abierto desde la tarjeta del canal) --- */
.admin-modal--feed {
  max-width: 660px;
  padding: 22px 24px;
}
.feed-modal-summary {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}
.feed-modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.feed-modal-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
}
.feed-modal-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.feed-modal-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FAF8F2;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.feed-modal-search input:focus {
  border-color: var(--gold-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}
.feed-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feed-cat-select {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 230px;
  padding: 9px 30px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FAF8F2 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AA7C11' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 10px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.feed-cat-select:focus {
  border-color: var(--gold-dark);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
}
@media (max-width: 580px) {
  .feed-cat-select {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.feed-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.feed-filter-chip:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
.feed-filter-chip.active {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: #fff;
}
.feed-filter-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  font-size: 0.68rem;
  font-weight: 700;
}
.feed-filter-chip.active .feed-filter-cnt {
  background: rgba(255, 255, 255, .28);
}
.feed-modal-count {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-height: 1.05em;
}
.admin-modal--feed .feed-prod-list {
  margin-top: 6px;
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.admin-modal--feed .feed-prod-list--grid {
  display: grid;
  /* minmax(0,1fr): sin mínimo automático, un nombre largo con nowrap
     expandiría su track y la 2ª columna quedaría invisible. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--border-light);
}
.admin-modal--feed .feed-prod-list--grid .feed-prod-row {
  border-bottom: none;
}
@media (max-width: 580px) {
  .admin-modal--feed .feed-prod-list--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ======================== ADMIN SECTION HEAD ======================== */
.admin-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-section-head h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 4px;
}
.admin-section-head p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 640px;
  line-height: 1.5;
}

/* ======================== ADMIN MODAL (premium) ======================== */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s;
}
.admin-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.admin-modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: 0 30px 60px rgba(15, 12, 10, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.15);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  transform: scale(0.94) translateY(10px);
  transition: transform 0.3s var(--ease-out);
}
.admin-modal-overlay.open .admin-modal {
  transform: scale(1) translateY(0);
}
.admin-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.admin-modal-head h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 4px;
}
.admin-modal-head p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}
.admin-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.admin-modal-close:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: rotate(90deg);
}
.admin-modal-back {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gold-dark);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.admin-modal-back:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  transform: translateX(-2px);
}
.admin-modal-back[hidden] {
  display: none;
}
#order-detail-modal .admin-modal-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* ======================== ADMIN KPI (premium) ======================== */
.admin-kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.admin-kpi-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(140, 111, 34, 0.1) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-kpi-icon svg {
  width: 18px;
  height: 18px;
}
.admin-kpi-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 2px;
}

/* ======================== ADMIN RESPONSIVE ======================== */
@media (max-width: 768px) {
  .admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table-wrapper .admin-table {
    min-width: 720px;
  }
  .admin-modal {
    padding: 24px 20px;
  }
}

/* ======================== ADMIN — NOUVEAU PRODUIT (premium) ======================== */
.admin-modal--wide {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-modal--wide .admin-modal-head {
  flex: 0 0 auto;
}
.admin-modal--wide #product-form,
.admin-modal--wide #bento-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.product-admin-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Footer fijo: los botones de guardar/cancelar siempre visibles aunque el
   formulario sea más alto que el área visible del modal. */
.product-admin-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.product-admin-foot .hero-admin-form-hint {
  margin: 0;
  max-width: 320px;
}
.product-admin-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
.product-admin-actions .btn-primary,
.product-admin-actions .btn-outline {
  min-width: 180px;
}

/* ======================== ADMIN — PRODUCT STUDIO TABS ======================== */
.admin-pdp-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  flex: 0 0 auto;
}
.admin-pdp-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.admin-pdp-tab:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
  color: var(--text);
}
.admin-pdp-tab.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
  border-color: var(--gold, #aa7c11);
  color: var(--gold-dark, #8f680c);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(170, 124, 17, 0.1);
}
.admin-pdp-tab .tab-accent {
  color: var(--gold, #aa7c11);
  font-size: 0.78rem;
}
.admin-pdp-tab .tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark, #8f680c);
  background: rgba(212, 175, 55, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
.admin-pdp-tab.active .tab-num {
  background: var(--gold, #aa7c11);
  color: #fff;
}
.admin-pdp-panels {
  min-width: 0;
}
.admin-pdp-panel {
  animation: adminTabFadeIn 0.25s ease-out;
}
@keyframes adminTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   Título de ficha editable (modal producto, admin): el nombre se escribe
   directamente sobre el h1 público — el acento dorado se recalcula al
   teclear y el divisor ✦ acompaña, como en la página real.
   ===================================================================== */
.name-live-preview {
  margin-top: 10px;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.name-live-preview:focus-within {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.name-live-preview .detail-name {
  font-size: 1.45rem;
  margin: 0;
}
.name-live-preview .detail-name-divider {
  margin: 8px 0 0;
}
#prod-name-edit {
  outline: none;
  caret-color: var(--gold-dark);
  min-height: 1.25em;
}

/* =====================================================================
   Editor enriquecido WYSIWYG (contenteditable) de las secciones éditoriales.
   El aperçu ES el editor: lo que se ve aquí es lo que se publica.
   ===================================================================== */
.rich-ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  margin-bottom: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rich-ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--gray-700);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rich-ed-btn:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
.rich-ed-btn:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 1px;
}

/* Bloques editables (Rituel de Soin, Transparence INCI) */
.editable-block {
  min-height: 120px;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-800);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.editable-block:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}
.editable-block--short {
  min-height: 64px;
}
.editable-block h3 {
  margin: 14px 0 6px;
  font-size: 1.05rem;
}
.editable-block h3:first-child,
.editable-block h4:first-child,
.editable-block blockquote:first-child,
.editable-block ul:first-child,
.editable-block ol:first-child,
.editable-block p:first-child {
  margin-top: 0;
}
.editable-block blockquote {
  margin: 8px 0;
  padding: 10px 14px;
  font-style: italic;
  color: var(--gray-700);
  background: rgba(212, 175, 55, 0.06);
  border-left: 3px solid var(--gold-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.editable-block ul,
.editable-block ol {
  margin: 8px 0;
  padding-left: 22px;
}
.editable-block li {
  margin: 3px 0;
}
.editable-block p {
  margin: 6px 0;
}
.editable-block a,
.benefit-card-text a {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* Placeholder de campos vacíos */
[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  display: block;
  color: var(--gray-400);
  font-style: italic;
  pointer-events: none;
}

/* Bénéfices: cartas editables (misma pinta que la página pública) */
.editable-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ed-benefits .benefit-card-item {
  position: relative;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.45);
}
#ed-benefits .benefit-card-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  outline: none;
}
#ed-benefits .benefit-card-text:focus {
  outline: 2px solid rgba(212, 175, 55, 0.4);
  outline-offset: 3px;
  border-radius: 4px;
}
.benefit-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--gray-500);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.benefit-card-item:hover .benefit-card-remove,
.benefit-card-item:focus-within .benefit-card-remove {
  opacity: 1;
}
.benefit-card-remove:hover {
  color: #c0392b;
  border-color: #c0392b;
}
.editable-benefits-add {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-dark);
  background: transparent;
  border: 1px dashed var(--gold-dark);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.editable-benefits-add:hover {
  color: #fff;
  background: var(--gold-dark);
}

.product-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.product-admin-preview {
  position: sticky;
  top: 0;
  align-self: start;
}
.product-admin-preview-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
/* Wrapper del preview: pointer-events:none neutraliza onclick/addToCart/
   wishlist de la tarjeta real; el tabIndex -1 evita el foco por teclado. */
.product-card--preview {
  position: relative;
  pointer-events: none;
  cursor: default;
  max-width: min(280px, 100%);
  margin: 0 auto;
}
.product-card--preview .product-card {
  box-shadow: 0 20px 40px rgba(170, 124, 17, 0.14);
}
.product-card--preview .product-card:hover {
  transform: none;
  border-color: var(--gray-200);
  box-shadow: 0 20px 40px rgba(170, 124, 17, 0.14);
}
.product-card--preview .product-card-image img {
  transform: none;
}
.product-card--preview.is-inactive .product-card {
  opacity: 0.55;
}
/* Preview del modal Bento: la tarjeta real es clicable (navigate) — se
   neutraliza con pointer-events:none como en el preview de producto. */
.bento-card--preview {
  position: relative;
  pointer-events: none;
  cursor: default;
  max-width: min(320px, 100%);
  margin: 0 auto;
}
.bento-card--preview .bento-card {
  min-height: 240px;
  box-shadow: 0 20px 40px rgba(170, 124, 17, 0.14);
}
.bento-card--preview .bento-card:hover {
  transform: none;
  box-shadow: 0 20px 40px rgba(170, 124, 17, 0.14);
}
.product-admin-inactive {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
}
.product-admin-inactive span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: 999px;
}
.product-admin-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.product-admin-stepper .qty-btn {
  width: 40px;
  height: 42px;
  background: var(--bg-secondary);
}
.product-admin-stepper input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-heading);
  background: #fff;
}
.product-admin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.product-admin-tags:empty {
  display: none;
}
.product-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(140, 111, 34, 0.06));
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-dark);
}
.product-admin-dropzone {
  display: block;
  border: 1.5px dashed var(--gold);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.82rem;
  transition: border-color 0.2s, background 0.2s;
}
.product-admin-dropzone:hover {
  background: rgba(212, 175, 55, 0.05);
  border-color: var(--gold-dark);
}
.product-admin-dropzone svg {
  display: block;
  margin: 0 auto 8px;
  color: var(--gold-dark);
}
.product-admin-dropzone input[type="file"] {
  display: none;
}
.product-admin-image {
  position: relative;
  margin-top: 12px;
  width: 88px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.product-admin-image img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}
.product-admin-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 12, 10, 0.65);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-admin-image-remove:hover {
  background: var(--rose-dark);
}
.product-admin-switches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 900px) {
  .product-admin-grid {
    grid-template-columns: 1fr;
  }
  .product-admin-preview {
    position: static;
  }
}
@media (max-width: 640px) {
  .product-admin-preview {
    display: none;
  }
}
.product-admin-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.product-admin-gallery-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #fff;
}
.product-admin-gallery-thumb.is-main {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(140, 111, 34, 0.18);
}
.product-admin-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-admin-gallery-main-btn,
.product-admin-gallery-remove-btn,
.product-admin-gallery-move-btn {
  position: absolute;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 12, 10, 0.6);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.product-admin-gallery-thumb:hover .product-admin-gallery-main-btn,
.product-admin-gallery-thumb:hover .product-admin-gallery-remove-btn,
.product-admin-gallery-thumb:hover .product-admin-gallery-move-btn {
  opacity: 1;
}
.product-admin-gallery-main-btn {
  top: 3px;
  left: 3px;
}
.product-admin-gallery-remove-btn {
  top: 3px;
  right: 3px;
}
.product-admin-gallery-move-left {
  bottom: 3px;
  left: 3px;
}
.product-admin-gallery-move-right {
  bottom: 3px;
  right: 3px;
}
.product-admin-gallery-main-btn:hover,
.product-admin-gallery-move-btn:hover:not(:disabled) {
  background: var(--gold-dark);
}
.product-admin-gallery-remove-btn:hover {
  background: var(--rose-dark);
}
.product-admin-gallery-move-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.product-admin-gallery-thumb.is-main .product-admin-gallery-main-btn {
  opacity: 1;
  background: var(--gold-dark);
}

/* El form-grid base colapsa a 1 columna bajo 600px; la columna del form en
   el modal ancho queda ~530px → forzar 2 columnas para que el botón de
   guardar quede visible sin scroll dentro del modal. */
.product-admin-grid .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-admin-grid .form-grid .full-width {
  grid-column: 1 / -1;
}

/* ================================================================
   PRODUCT DETAIL — ACCORDION (pills en desktop, acordeón en móvil)
   ================================================================ */
.product-tabs-accordion {
  margin-top: 0;
  border-top: none;
}

/* Desktop (≥641px) : mismo aspecto que los tabs originales (pills) */
@media (min-width: 641px) {
  /* Flex wrap + order: los pills (order 1) llenan la fila 1 agrupados y
     centrados; el panel activo (order 2, flex-basis 100%) vive en su propia
     fila debajo a todo el ancho. Con flex-wrap normal el item activo
     (header+panel juntos en una caja) medía el ancho del panel y envolvía a
     las otras píldoras a una fila inferior; display:contents disuelve el item
     y order garantiza la separación de filas sin que su tamaño dependa del
     contenido del panel (los pills no se desplazan al abrir/cerrar). */
  .product-tabs-accordion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 14px;
  }
  .product-tabs-accordion .accordion-item {
    display: contents;
    border-bottom: none;
  }
  .product-tabs-accordion .accordion-header {
    order: 1;
  }
  .product-tabs-accordion .accordion-item.active .accordion-body {
    order: 2;
    display: block;
    flex: 1 1 100%;
    padding-top: 6px;
    width: 100%;
  }
  .product-tabs-accordion .accordion-header {
    padding: 11px 24px;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gray-600);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    transition: all 0.25s ease;
  }
  .product-tabs-accordion .accordion-header:hover {
    color: var(--gold-dark);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.35);
  }
  .product-tabs-accordion .accordion-item.active .accordion-header {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%);
    color: var(--gold-dark);
    border-color: rgba(212, 175, 55, 0.45);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(170, 124, 17, 0.12);
  }
  .product-tabs-accordion .accordion-icon {
    display: none;
  }
  .product-tabs-accordion .accordion-body {
    padding: 0 0 18px;
  }
}

/* Banda 641-680px: los 3 pills (~631px naturales) no caben en el bloque
   (~601px con los paddings de la columna) y el 3.º se envolvería a una
   fila inferior — padding lateral reducido para que quepan en una fila. */
@media (min-width: 641px) and (max-width: 680px) {
  .product-tabs-accordion .accordion-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ================================================================
   BARRA DE ACCIÓN FLOTANTE — ELIMINADA
   ================================================================ */
.detail-sticky-bar {
  display: none !important;
}

@media (max-width: 640px) {
  /* Descripción larga recortada con "Lire la suite". El botón va FUERA del
     div (dentro, max-height + overflow:hidden lo recortaría y nunca sería
     visible). El difuminado se hace con mask-image sobre el propio div: el
     texto se desvanece a transparente real y encaja con cualquier fondo; el
     antiguo degradado ::after a un color fijo no casaba con el fondo radial
     de la página y se veía como una franja blanca translúcida. */
  .detail-description.is-clamped {
    max-height: 100px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .detail-desc-toggle {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* Solo móvil: la cinta de confianza (4 tarjetas) y sus puntos van justo
     debajo del banner "Ordonnance de Beauté", antes del cross-sell (que
     conserva su separador). El contenedor pasa a flex-column para poder
     reordenar (order); el resto de secciones conserva el orden de origen
     (order 0). Todas las secciones usan solo margin-top (el breadcrumb
     solo margin-bottom), así que la pérdida del colapso de márgenes no
     altera los espaciados. */
  .product-detail {
    display: flex;
    flex-direction: column;
  }
  .product-detail .product-reassurance-ribbon {
    order: 2;
  }
  .product-detail #ribbon-dots {
    order: 3;
  }
  .product-detail .cross-sell-section {
    order: 4;
  }

  /* Cinta de confianza : tira horizontal con snap (misma pauta que el
     cross-sell). Los 4 pilares son mini-tarjetas con todo su contenido en
     una sola fila, en vez de un grid 2×2 cuyos textos envueltos duplicaban
     la altura de la sección. */
  .product-reassurance-ribbon {
    display: flex;
    gap: 12px;
    margin: 32px -20px 0;
    padding: 0 20px;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .product-reassurance-ribbon::-webkit-scrollbar {
    display: none;
  }
  .ribbon-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 253, 251, 0.92);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: var(--radius-md);
  }
  .ribbon-icon {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }
  .ribbon-text strong {
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .ribbon-text span {
    font-size: 0.62rem;
  }

  /* Acordeón móvil : headers full-width con icono + */
  .product-tabs-accordion {
    display: block;
  }
  .product-tabs-accordion .accordion-item {
    border-bottom: 1px solid var(--border);
  }
  .product-tabs-accordion .accordion-header {
    width: 100%;
    padding: 18px 4px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-heading);
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .product-tabs-accordion .accordion-header:hover {
    color: var(--gold-dark);
    background: transparent;
  }
  .product-tabs-accordion .accordion-icon {
    display: inline;
    font-size: 1.3rem;
    font-family: monospace;
    color: var(--gold-dark);
    transition: transform 0.3s var(--ease-out);
  }
  .product-tabs-accordion .accordion-item.active .accordion-icon {
    transform: rotate(45deg);
  }
  .product-tabs-accordion .accordion-body {
    padding: 0 0 20px;
  }

  /* Sección editorial compacta */
  .product-editorial-section {
    margin-top: 24px;
    padding-top: 20px;
  }
  .editorial-header {
    margin-bottom: 4px;
  }

  /* Banner diagnóstico compacto */
  .consultation-concierge-banner {
    margin-top: 32px;
    padding: 20px 18px;
    gap: 16px;
  }
  .concierge-content {
    min-width: 0;
    gap: 14px;
  }
  .concierge-avatar {
    width: 48px;
    height: 48px;
  }
  .concierge-title {
    font-size: 1.02rem;
  }
  .btn-concierge {
    width: 100%;
    justify-content: center;
  }

  /* Cross-sell : scroll horizontal con snap */
  .cross-sell-section {
    margin-top: 32px;
    padding-top: 24px;
  }
  .cross-sell-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -20px;
    padding: 0 20px 10px;
    scrollbar-width: none;
  }
  .cross-sell-grid::-webkit-scrollbar {
    display: none;
  }
  .cross-sell-card {
    flex: 0 0 64%;
    scroll-snap-align: start;
  }
}

/* Desktop : la description ne se découpe pas et le bouton "Lire la suite" se masque */
@media (min-width: 641px) {
  .detail-description.is-clamped {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .detail-desc-toggle {
    display: none;
  }
}

/* ================================================================
   PILAR 1: PRODUCT VARIANTS & SKU MATRIX STYLES
   ================================================================ */
.variant-selector-container {
  margin-bottom: 20px;
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.variant-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.variant-selector-title {
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 6px;
}
.variant-selector-selected-name {
  font-size: 0.82rem;
  color: var(--gold-dark);
  font-weight: 600;
}
.variant-pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.variant-pill {
  flex: 1 1 calc(50% - 6px);
  min-width: 130px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.variant-pill:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--gold-glow);
}
.variant-pill.is-selected {
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, rgba(255,253,253,1) 0%, rgba(245,240,235,0.7) 100%);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 4px 14px var(--gold-glow);
}
.variant-pill.is-out-of-stock {
  opacity: 0.55;
  background: #fdf5f5;
  cursor: not-allowed;
}
.variant-pill-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.variant-pill-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
}
.variant-pill-price {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gold-dark);
}
.variant-pill-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.72rem;
}
.variant-savings-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #0d8a5f;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.variant-pill.is-out-of-stock .variant-pill-sub {
  color: #dc2626;
  font-weight: 600;
}

/* Cart item variant tag */
.cart-item-variant-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  padding: 1px 7px;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Catalogue badge for variants */
.card-variants-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 2px;
}

/* Admin variant editor */
/* ─── Variant Studio ──────────────────────────────── */
.variant-studio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.variant-studio-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.variant-studio-hint {
  margin: 5px 0 0;
  font-size: 0.79rem;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.5;
}
.variant-add-btn {
  white-space: nowrap;
  padding: 9px 18px;
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* Cards list */
.variant-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

/* Individual variant card */
.variant-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.variant-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}

/* Card header strip */
.variant-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(212,175,55,0.06) 100%);
  border-bottom: 1px solid var(--border);
}
.variant-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.variant-card-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.variant-card-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.variant-card-delete:hover {
  opacity: 1;
  background: rgba(203, 58, 58, 0.1);
  color: #cb3a3a;
}

/* Card body: 3-column field grid */
.variant-card-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  padding: 16px 18px 18px;
}
@media (max-width: 780px) {
  .variant-card-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .variant-card-body { grid-template-columns: 1fr; }
}

/* Field cell */
.variant-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.variant-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.variant-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.variant-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
  outline: none;
}

/* € prefix wrapper */
.variant-price-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-primary);
}
.variant-price-input:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
.variant-currency {
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  line-height: 38px;
  white-space: nowrap;
}
.variant-price-input .variant-input {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 10px;
}
.variant-price-input .variant-input:focus {
  box-shadow: none;
}

/* Stepper (+/−) */
.variant-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.variant-stepper:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
.variant-step-btn {
  background: var(--bg-secondary);
  border: none;
  border-radius: 0;
  padding: 0 12px;
  height: 38px;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.variant-step-btn:hover {
  background: rgba(212,175,55,0.12);
  color: var(--gold-dark);
}
.variant-step-btn:first-child {
  border-right: 1px solid var(--border);
}
.variant-step-btn:last-child {
  border-left: 1px solid var(--border);
}
.variant-input-center {
  text-align: center;
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Empty state */
.variant-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
  gap: 6px;
}
.variant-empty-icon {
  font-size: 2rem;
  color: var(--gold);
  opacity: 0.5;
  margin-bottom: 6px;
}
.variant-empty-state p {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.variant-empty-state small {
  font-size: 0.79rem;
  color: var(--text-secondary);
  max-width: 320px;
}

/* Product format badges & specification labels */
.product-card-format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.22);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: 5px;
  max-width: 100%;
  /* El texto largo salta a una 2ª línea en vez de cortarse con « … » */
  flex-wrap: wrap;
  white-space: normal;
}

.detail-format-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.detail-format-pill strong {
  color: var(--gold-dark);
  font-weight: 600;
}

/* ---- Luxury Product Format Sheet (Fiche Technique & Format sous la photo) ---- */
.product-format-sheet {
  margin-top: 24px;
  background: rgba(255, 253, 253, 0.95);
  border: 1px solid rgba(170, 124, 17, 0.22);
  border-radius: var(--radius-md, 14px);
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(42, 37, 32, 0.04);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-format-sheet:hover {
  border-color: rgba(170, 124, 17, 0.4);
  box-shadow: 0 6px 24px rgba(170, 124, 17, 0.08);
}
.format-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(224, 219, 213, 0.7);
  flex-wrap: wrap;
  gap: 8px;
}
.format-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.format-sheet-title h4 {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: 0.02em;
}
.format-sheet-icon {
  color: var(--gold-dark);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}
.format-sheet-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 3px 9px;
  border-radius: var(--radius-full, 999px);
}
.format-sheet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.format-sheet-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(224, 219, 213, 0.5);
}
.format-sheet-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.format-sheet-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
  font-weight: 500;
  flex: 0 0 145px;
}
.format-sheet-label .format-icon {
  font-size: 0.85rem;
  color: var(--gold-dark);
}
.format-sheet-val {
  text-align: right;
  color: var(--text-heading);
  font-weight: 500;
  flex: 1;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.format-sheet-val.sheet-highlight {
  animation: valHighlight 0.45s ease-out;
}
@keyframes valHighlight {
  0% { color: var(--gold-dark); opacity: 0.4; transform: translateY(-2px); }
  100% { color: var(--text-heading); opacity: 1; transform: translateY(0); }
}
.format-sku-tag {
  font-family: monospace;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--gold-dark) !important;
  background: var(--cream);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Image Switching Smooth Transition */
.product-detail-image-wrapper {
  position: relative;
  overflow: hidden;
}
.product-detail-image-wrapper img {
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}
.product-detail-image-wrapper.is-switching img {
  opacity: 0.1;
  transform: scale(0.97);
}

/* ================================================================
   SEPHORA / MARIONNAUD LUXURY PDP (Product Detail Page) REDESIGN
   ================================================================ */
.pdp-sephora-layout {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 20px 0;
}

/* Breadcrumbs */
.pdp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.78rem;
  color: #78716c;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.pdp-breadcrumbs-trail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Barre de recherche rapide intégrée dans le breadcrumb PDP */
.pdp-search-box {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 60;
}
.pdp-search-box input {
  width: 280px;
  padding: 9px 32px 9px 38px;
  border-radius: 50px;
  border: 1px solid var(--gray-200);
  background: #FFFDFD;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  outline: none;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.pdp-search-box input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
  width: 500px;
  max-width: min(500px, 60vw);
  background: #ffffff;
}
.pdp-search-box input::placeholder {
  color: var(--gray-400);
}
.pdp-search-btn {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: color var(--duration-fast);
  z-index: 2;
}
.pdp-search-btn:hover {
  color: var(--gold-dark);
}
.pdp-search-btn svg {
  width: 15px;
  height: 15px;
}
.pdp-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gray-200);
  color: var(--gray-600);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  z-index: 2;
}
.pdp-search-clear:hover {
  background: var(--gray-300);
  color: var(--gray-900);
}

/* Dropdown suggestions en direct (haut de gamme) */
.pdp-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 500px;
  max-width: min(500px, 90vw);
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(212, 175, 55, 0.08);
  overflow: hidden;
  z-index: 100;
  animation: pdpFadeDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pdpFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.pdp-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--gray-100);
  transition: background 0.15s ease;
}
.pdp-search-item:hover,
.pdp-search-item.is-selected {
  background: #FCF4E2;
}
.pdp-search-item.is-selected {
  box-shadow: inset 3px 0 0 var(--gold);
}
.pdp-search-item.is-selected .pdp-search-item-name {
  color: var(--gold-dark);
}
.pdp-search-item-img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: #fbf8f5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.pdp-search-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-search-item-placeholder {
  font-size: 1.1rem;
  color: var(--gold-dark);
}
.pdp-search-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-search-item-cat {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dark);
  font-weight: 600;
}
.pdp-search-item-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-search-item-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700);
}
.pdp-search-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--gray-500);
}
.pdp-search-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  background: #FAF7F2;
  border: none;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.pdp-search-view-all:hover,
.pdp-search-view-all.is-selected {
  background: var(--gold);
  color: #fff;
  outline: none;
}
@media (max-width: 767px) {
  .pdp-search-box { display: none; }
}
.pdp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #78716c;
  font-weight: 500;
  transition: color 0.2s;
}
.pdp-back-link:hover, .pdp-breadcrumbs a:hover {
  color: var(--gold-dark);
}
.pdp-sep {
  color: rgba(170, 124, 17, 0.3);
  font-size: 0.75rem;
}
.pdp-current {
  color: #1c1917;
  font-weight: 600;
}
.pdp-mobile-badge {
  display: none;
}

/* Standardized Two-Column Hero Grid */
/* minmax(0,1fr): un track "1fr" puro se infla hasta el min-content de sus
   hijos (foto del producto) y desborda el viewport en móvil (574px vs 390) */
.pdp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
@media (min-width: 900px) {
  .pdp-hero-grid {
    grid-template-columns: minmax(0, 480px) minmax(0, 520px);
    gap: 56px;
    align-items: start;
    justify-content: center;
  }
}
@media (min-width: 1140px) {
  .pdp-hero-grid {
    grid-template-columns: 480px 520px;
    gap: 72px;
    justify-content: center;
  }
}

/* Left Column: Visual Gallery (Standardized 480x480 Stage) */
.pdp-gallery-col {
  position: relative;
  width: 100%;
}
@media (min-width: 900px) {
  .pdp-gallery-sticky {
    position: sticky;
    top: 96px;
  }
}
.pdp-gallery-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.pdp-main-visual {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #fffdfb 0%, #faf3eb 100%);
  border: 1px solid rgba(170, 124, 17, 0.22);
  box-shadow: 0 16px 40px -10px rgba(42, 37, 32, 0.08), 0 2px 10px rgba(170, 124, 17, 0.04);
  cursor: zoom-in;
  position: relative;
}
.pdp-visual-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255, 253, 250, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(170, 124, 17, 0.28);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.pdp-gallery-thumbs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  padding: 2px 0;
  overflow-x: auto;
}
.pdp-thumb {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(170, 124, 17, 0.2);
  background: #fff;
  padding: 2px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdp-thumb:hover {
  opacity: 1;
  border-color: var(--gold-dark);
  transform: translateY(-2px);
}
.pdp-thumb.is-active, .pdp-thumb.active {
  opacity: 1;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 2px rgba(170, 124, 17, 0.28);
}
.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}
.pdp-image-holder {
  width: 100%;
  height: 100%;
}
.pdp-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.pdp-main-visual:hover img {
  transform: scale(1.025);
}
.pdp-image-holder.is-switching img {
  opacity: 0.12;
  transform: scale(0.97);
}

/* Right Column: Standardized Luxury Buybox */
.pdp-buybox-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.pdp-brand-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  min-height: 20px;
}
.pdp-kicker-dot {
  color: rgba(170, 124, 17, 0.4);
}
.pdp-kicker-cat {
  color: #78716c;
  font-weight: 500;
}

.pdp-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.3vw, 2.45rem);
  font-weight: 500;
  line-height: 1.18;
  color: #1c1917;
  margin: 0;
  letter-spacing: -0.015em;
}
.pdp-buybox-col .detail-name-divider {
  margin: -4px 0 2px;
}

.pdp-teaser {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #57534e;
  margin: 0;
}

.pdp-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pdp-skin-mention {
  font-size: 0.84rem;
  color: #78716c;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Format Selector */
.pdp-format-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.pdp-format-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}
.pdp-format-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #78716c;
}
.pdp-format-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--gold-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(170, 124, 17, 0.35);
  text-underline-offset: 3px;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pdp-format-guide-link:hover {
  color: #8c6f22;
  text-decoration-color: var(--gold-dark);
}
.pdp-format-guide-link .pdp-guide-arrow {
  font-size: 0.82rem;
  display: inline-block;
  transition: transform 0.2s ease;
  text-decoration: none;
}
.pdp-format-guide-link:hover .pdp-guide-arrow {
  transform: translateX(3px);
}

.pdp-format-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pdp-format-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  min-height: 38px;
  border-radius: 20px;
  border: 1px solid rgba(28, 25, 23, 0.16);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}
.pdp-format-pill:hover {
  border-color: var(--gold-dark);
  background: #fffcf8;
}
.pdp-format-pill.is-active, .pdp-format-pill.active {
  border-color: var(--gold-dark);
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--gold-dark);
}
.pdp-format-pill.is-static {
  cursor: default;
}
.pdp-pill-name {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: #292524;
  letter-spacing: 0.03em;
}
.pdp-format-pill.is-active .pdp-pill-name,
.pdp-format-pill.active .pdp-pill-name {
  color: #1c1917;
  font-weight: 600;
}
.pdp-format-pill.is-oos {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  background: #f5f5f4;
  border-style: dashed;
}

/* Pricing & Stock Block */
.pdp-pricing-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(170, 124, 17, 0.12);
  min-height: 52px;
}
.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pdp-price {
  font-family: var(--font-heading);
  font-size: 2.45rem;
  font-weight: 500;
  color: #1c1917;
  line-height: 1;
}
.pdp-compare-price {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #a8a29e;
  text-decoration: line-through;
}
.pdp-discount-badge {
  background: #fdf8f0;
  color: var(--gold-dark);
  border: 1px solid rgba(170, 124, 17, 0.28);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.pdp-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #2e7d32;
}
.pdp-stock-status.oos,
.pdp-stock-status:has(.oos),
.pdp-stock-dot.oos + span,
.pdp-stock-text.oos {
  color: #dc2626 !important;
  font-weight: 600;
}
.pdp-stock-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7d32;
  display: inline-block;
  flex-shrink: 0;
}
.pdp-stock-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: inherit;
  animation: pdpStockRing 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pdp-stock-dot.oos {
  background: #dc2626;
}
@keyframes pdpStockRing {
  0% { transform: scale(1); opacity: 0.75; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}

/* CTA Action Block (Standard 52px Height) */
.pdp-cta-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}
.pdp-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid rgba(170, 124, 17, 0.28);
  border-radius: 26px;
  background: #ffffff;
  height: 52px;
  padding: 0 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  flex-shrink: 0;
}
.pdp-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #57534e;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.pdp-qty-btn:hover {
  color: var(--gold-dark);
  background: #fbf5ee;
}
.pdp-qty-input {
  width: 38px;
  text-align: center;
  font-weight: 600;
  font-size: 0.96rem;
  color: #1c1917;
  border: none;
  background: transparent;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-btn-add {
  flex: 1;
  height: 52px;
  padding: 0 24px;
  border-radius: 26px;
  background: linear-gradient(135deg, #221e1a 0%, #110e0c 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 8px 24px rgba(26, 22, 20, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.pdp-btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(170, 124, 17, 0.35);
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  border-color: #aa7c11;
}
.pdp-btn-add svg {
  width: 18px;
  height: 18px;
}

.pdp-btn-fav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(170, 124, 17, 0.24);
  background: #ffffff;
  color: #78716c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s;
}
.pdp-btn-fav:hover, .pdp-btn-fav.is-active, .pdp-btn-fav.active {
  color: var(--rose-dark);
  border-color: rgba(201, 120, 120, 0.5);
  background: #fdf2f2;
}

/* Restock CTA Row */
.pdp-restock-cta {
  width: 100%;
}
.pdp-restock-form {
  width: 100%;
}
.pdp-restock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.pdp-restock-input {
  flex: 1;
  height: 52px;
  border-radius: 26px;
  border: 1px solid rgba(170, 124, 17, 0.28);
  background: #ffffff;
  padding: 0 18px;
  font-size: 0.88rem;
  color: #1c1917;
  outline: none;
  transition: border-color 0.2s;
}
.pdp-restock-input:focus {
  border-color: var(--gold-dark);
}
.pdp-btn-restock {
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  border-color: #aa7c11;
  white-space: nowrap;
}
.pdp-restock-msg {
  font-size: 0.82rem;
  margin-top: 6px;
}

/* Confirmed Restock Alert State (Haute Beauté) */
.pdp-restock-confirm-box {
  width: 100%;
  background: #fffcf8;
  border: 1px solid rgba(170, 124, 17, 0.25);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.04);
}
.pdp-restock-confirm-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdp-confirm-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(170, 124, 17, 0.12);
  border: 1px solid rgba(170, 124, 17, 0.3);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pdp-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-confirm-text strong {
  font-size: 0.88rem;
  color: #1c1917;
  font-weight: 600;
}
.pdp-confirm-text span {
  font-size: 0.8rem;
  color: #78716c;
  line-height: 1.4;
}
.pdp-confirm-text em {
  color: #1c1917;
  font-style: normal;
  font-weight: 500;
}
.pdp-restock-confirm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(170, 124, 17, 0.12);
  padding-top: 10px;
}
.pdp-btn-unsub {
  flex: 1;
  height: 42px;
  border-radius: 21px;
  background: none;
  border: 1px solid rgba(170, 124, 17, 0.28);
  color: #78716c;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pdp-btn-unsub:hover {
  border-color: #aa7c11;
  color: #aa7c11;
  background: rgba(170, 124, 17, 0.05);
}

.pdp-reassurance-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(170, 124, 17, 0.14);
}
.pdp-reassurance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #78716c;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.pdp-reassurance-bullet {
  color: var(--gold-dark);
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Lower Section: Tabs Navigation */
.pdp-tabs-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(170, 124, 17, 0.18);
}
.pdp-tabs-header {
  text-align: center;
  margin-bottom: 18px;
}
.pdp-tabs-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.pdp-tabs-heading {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 500;
  color: #1c1917;
  margin: 0;
  letter-spacing: -0.01em;
}
.pdp-tabs-header .detail-name-divider {
  justify-content: center;
  margin: 8px auto 0;
}

/* Barre d'onglets de Haute Beauté (Pill navigation sans chevauchement) */
.pdp-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 6px 20px 10px;
  scroll-padding: 0 20px;
  -webkit-overflow-scrolling: touch;
}
.pdp-tabs-nav::-webkit-scrollbar {
  display: none;
}
@media (min-width: 992px) {
  .pdp-tabs-nav {
    justify-content: center;
  }
}

.pdp-tab-trigger {
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.22);
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #57534e;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}
.pdp-tab-num {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-dark);
  background: rgba(170, 124, 17, 0.1);
  border-radius: 12px;
  padding: 1px 7px;
  line-height: 1.3;
}
.pdp-tab-label {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.pdp-tab-trigger:hover {
  color: #1c1917;
  border-color: var(--gold-dark);
  background: #fffcf8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(170, 124, 17, 0.1);
}
.pdp-tab-trigger.active {
  color: #1c1917;
  font-weight: 600;
  background: #fffdfa;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 4px 14px rgba(170, 124, 17, 0.12);
}
.pdp-tab-trigger.active .pdp-tab-num {
  background: linear-gradient(135deg, #aa7c11 0%, #8c6f22 100%);
  color: #ffffff;
}

.pdp-tab-content {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  transition: min-height 0.2s ease;
}
@media (min-width: 880px) {
  .pdp-tab-content {
    min-height: 280px;
  }
}

.pdp-tab-panel {
  display: none;
  width: 100%;
}
.pdp-tab-panel.active {
  display: block;
  animation: fadeInPdpTab 0.2s ease forwards;
}
.pdp-tab-panel.slide-from-right {
  animation: pdpSlideRight 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pdp-tab-panel.slide-from-left {
  animation: pdpSlideLeft 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInPdpTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pdpSlideRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pdpSlideLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}


/* ==========================================================================
   Tab 1: Le Soin & Bénéfices — Duo 2 Colonnes Équilibrées
   ========================================================================== */

.pdp-soin-duo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  align-items: stretch;
}

@media (min-width: 880px) {
  .pdp-soin-duo-layout {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    min-height: 280px;
  }
}

/* Colonne Gauche: Story Card */
.pdp-soin-col-story {
  display: flex;
  height: 100%;
}

.pdp-soin-story-card {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.18);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(170, 124, 17, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: border-color 0.25s, box-shadow 0.25s;
}

@media (min-width: 880px) {
  .pdp-soin-story-card {
    min-height: 280px;
  }
}

.pdp-soin-story-card:hover {
  border-color: rgba(170, 124, 17, 0.32);
  box-shadow: 0 6px 20px rgba(170, 124, 17, 0.07);
}

.pdp-story-clean-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pdp-story-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.pdp-story-sparkle {
  color: var(--gold-dark);
  font-size: 0.9rem;
  opacity: 0.6;
}

.pdp-story-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: #1c1917;
  line-height: 1.3;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.pdp-story-p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #44403c;
  margin: 0;
}

.pdp-story-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(170, 124, 17, 0.12);
}

.pdp-story-origin {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 500;
}

/* Colonne Droite: 2x2 Benefit Cards */
.pdp-soin-col-benefits {
  display: flex;
  height: 100%;
}

.pdp-benefits-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
}

@media (min-width: 560px) {
  .pdp-benefits-grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

.benefit-card-item {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.16);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(170, 124, 17, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.benefit-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(170, 124, 17, 0.07);
  border-color: rgba(170, 124, 17, 0.35);
}

.benefit-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.benefit-sparkle {
  color: var(--gold-dark);
  font-size: 0.88rem;
  flex-shrink: 0;
}

.benefit-card-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: #1c1917;
  line-height: 1.3;
}

.benefit-card-text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #57534e;
  margin: 0;
}

/* Tab 2: Fiche Technique & Format Modules */
#tab-specs .product-format-sheet {
  margin-top: 0;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.2);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 18px rgba(170, 124, 17, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 880px) {
  #tab-specs .product-format-sheet {
    min-height: 280px;
  }
}

.format-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(170, 124, 17, 0.16);
  flex-wrap: wrap;
}
.format-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.format-sheet-icon {
  color: var(--gold-dark);
  font-size: 1rem;
}
.format-sheet-title h4 {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 500;
  color: #1c1917;
  margin: 0;
}
.format-sheet-badge {
  background: #faf6f0;
  border: 1px solid rgba(170, 124, 17, 0.3);
  color: var(--gold-dark);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
}

.format-sheet-modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 768px) {
  .format-sheet-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}
.format-module-card {
  background: #faf8f5;
  border: 1px solid rgba(170, 124, 17, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
}
.format-module-heading {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: #1c1917;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(170, 124, 17, 0.12);
  letter-spacing: 0.01em;
}
.format-module-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.format-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.format-item-label {
  font-size: 0.78rem;
  color: #78716c;
  font-weight: 500;
}
.format-item-val {
  font-size: 0.84rem;
  color: #1c1917;
  font-weight: 600;
  text-align: right;
}
.format-sku-code {
  font-family: monospace;
  font-size: 0.76rem;
  color: var(--gold-dark);
  letter-spacing: 0.03em;
}
.format-origin-stamp {
  margin-top: 14px;
  padding: 10px 16px;
  background: #fffcf8;
  border: 1px dashed rgba(170, 124, 17, 0.32);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #78716c;
  text-align: center;
}
.format-origin-icon {
  color: var(--gold-dark);
  font-size: 0.82rem;
}

/* Tab 3: Ritual Protocol */
.ritual-card {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.2);
  border-radius: 16px;
  padding: 20px 22px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 4px 18px rgba(170, 124, 17, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 880px) {
  .ritual-card {
    min-height: 280px;
  }
}

.ritual-card-head {
  text-align: center;
  margin-bottom: 16px;
}
.ritual-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.ritual-heading {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 500;
  color: #1c1917;
  margin: 0;
}
.ritual-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .ritual-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ritual-step-item {
  background: #faf8f5;
  border: 1px solid rgba(170, 124, 17, 0.16);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}
.ritual-step-item:hover {
  transform: translateY(-2px);
  border-color: rgba(170, 124, 17, 0.35);
}
.step-roman {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.step-title {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 600;
  color: #1c1917;
  margin-bottom: 6px;
}
.step-desc {
  font-size: 0.82rem;
  color: #57534e;
  line-height: 1.5;
}
.esthetician-quote-box {
  background: linear-gradient(135deg, #fffaf5 0%, #fff6ed 100%);
  border: 1px solid rgba(170, 124, 17, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.quote-signature-mark {
  font-size: 1.15rem;
  color: var(--gold-dark);
  flex-shrink: 0;
  line-height: 1.2;
}
.esthetician-quote-body {
  flex: 1;
}
.quote-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.esthetician-quote-text {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.55;
  color: #292524;
  margin: 0 0 6px 0;
}
.quote-author {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #78716c;
  letter-spacing: 0.02em;
}

/* Tab 4: INCI & Clean Commitments */
.inci-transparency-card {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.2);
  border-radius: 16px;
  padding: 20px 22px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 4px 18px rgba(170, 124, 17, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 880px) {
  .inci-transparency-card {
    min-height: 280px;
  }
}

.inci-card-head {
  text-align: center;
  margin-bottom: 14px;
}
.inci-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.inci-heading {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 500;
  color: #1c1917;
  margin: 0;
}
.clean-commitments-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
.clean-pill {
  background: #fffcf8;
  border: 1px solid rgba(170, 124, 17, 0.24);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #44403c;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.clean-bullet {
  color: var(--gold-dark);
  font-size: 0.68rem;
}
.inci-actives-highlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  .inci-actives-highlight {
    grid-template-columns: repeat(2, 1fr);
  }
}
.inci-active-card {
  background: #faf8f5;
  border: 1px solid rgba(170, 124, 17, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
}
.active-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #1c1917;
  margin-bottom: 2px;
}
.active-role {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-gold, #aa7c11);
  font-weight: 600;
  margin-bottom: 4px;
}
.active-sub {
  font-size: 0.8rem;
  color: #57534e;
  line-height: 1.5;
}
.inci-text-box {
  background: #fbf9f6;
  border: 1px solid rgba(170, 124, 17, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.inci-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.inci-box-title {
  font-size: 0.84rem;
  color: #1c1917;
}
.inci-reg-tag {
  font-size: 0.7rem;
  color: var(--gold-dark);
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.25);
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.inci-list-content {
  font-size: 0.8rem;
  line-height: 1.65;
  color: #57534e;
  margin: 0;
  word-break: break-word;
}
.inci-guarantee-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #78716c;
  margin-top: 12px;
  text-align: center;
}
.guarantee-icon {
  color: var(--gold-dark);
  font-size: 0.78rem;
}

/* ==========================================================================
   Mobile & Tablet Responsive Tightening (Zero Wasted Space)
   ========================================================================== */

@media (max-width: 879px) {
  .pdp-tab-content,
  .pdp-soin-duo-layout,
  .pdp-soin-story-card,
  .pdp-benefits-grid-2x2,
  #tab-specs .product-format-sheet,
  .ritual-card,
  .inci-transparency-card {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  /* --- Mobile Haute Beauté PDP Layout (≤640px) --- */
  .pdp-sephora-layout {
    padding: 10px 14px 0;
  }

  /* Breadcrumbs */
  .pdp-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .pdp-breadcrumbs .pdp-sep,
  .pdp-breadcrumbs .pdp-cat-link,
  .pdp-breadcrumbs .pdp-current,
  .pdp-breadcrumbs-trail .pdp-sep,
  .pdp-breadcrumbs-trail .pdp-cat-link,
  .pdp-breadcrumbs-trail .pdp-current {
    display: none;
  }
  .pdp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(170, 124, 17, 0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #44403c;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .pdp-back-link:active {
    transform: scale(0.96);
    background: #fdfaf6;
  }
  .pdp-back-link svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold-dark);
  }
  .pdp-mobile-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    background: rgba(170, 124, 17, 0.08);
    border: 1px solid rgba(170, 124, 17, 0.22);
    border-radius: 14px;
    padding: 4px 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
  }

  /* Main Hero Grid & Stage Visual */
  .pdp-hero-grid {
    gap: 18px;
  }
  .pdp-gallery-col {
    width: 100%;
  }
  .pdp-gallery-wrapper {
    gap: 10px;
  }
  .pdp-main-visual {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    box-shadow: 0 10px 28px -6px rgba(42, 37, 32, 0.09), 0 2px 8px rgba(170, 124, 17, 0.05);
  }
  .pdp-visual-badge {
    top: 12px;
    left: 12px;
    padding: 4px 11px;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
  }
  .pdp-gallery-thumbs {
    gap: 8px;
    padding: 2px 2px 4px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .pdp-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  /* Buybox Column */
  .pdp-buybox-col {
    gap: 11px;
    padding: 0 2px;
  }
  .pdp-brand-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    min-height: 18px;
  }
  .pdp-title {
    font-size: 1.5rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
  }
  .pdp-teaser {
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .pdp-meta-row {
    gap: 8px;
  }
  .pdp-skin-mention {
    font-size: 0.78rem;
    background: #fdfaf6;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(170, 124, 17, 0.16);
  }

  /* Formats */
  .pdp-format-group {
    gap: 6px;
    padding: 2px 0;
  }
  .pdp-format-label {
    font-size: 0.7rem;
  }
  .pdp-format-guide-link {
    font-size: 0.72rem;
  }
  .pdp-format-pills {
    gap: 8px;
  }
  .pdp-format-pill {
    padding: 7px 16px;
    min-height: 40px;
    border-radius: 20px;
  }
  .pdp-pill-name {
    font-size: 0.82rem;
  }

  /* Price & Stock */
  .pdp-pricing-block {
    padding: 8px 0;
    min-height: 44px;
    align-items: center;
  }
  .pdp-price {
    font-size: 2.05rem;
  }
  .pdp-compare-price {
    font-size: 1.05rem;
  }
  .pdp-discount-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
  }
  .pdp-stock-status {
    font-size: 0.78rem;
  }

  /* CTA Action Block */
  .pdp-cta-block {
    gap: 10px;
    min-height: 48px;
    flex-wrap: wrap;
  }
  /* Formulario M'avertir: la fila input+botón+corazón no cabe en móvil
     (el botón se aplasta a 50px con el texto saltando fuera): el input se
     queda con el corazón en la primera línea y el botón pasa a ancho total */
  .pdp-restock-row {
    flex-wrap: wrap;
  }
  .pdp-restock-row .pdp-restock-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pdp-restock-row .pdp-btn-restock {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 48px;
  }
  .pdp-qty-stepper {
    height: 48px;
  }
  .pdp-qty-btn {
    width: 34px;
    height: 34px;
  }
  .pdp-qty-input {
    width: 34px;
    font-size: 0.92rem;
  }
  .pdp-btn-add {
    height: 48px;
    padding: 0 16px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    /* flex basis auto: el texto nunca se aplasta; si no cabe pasa a su propia línea */
    flex: 1 1 auto;
    min-width: max-content;
  }
  .pdp-btn-fav {
    width: 48px;
    height: 48px;
  }

  /* Reassurance List */
  .pdp-reassurance-row {
    padding-top: 10px;
    gap: 5px;
  }
  .pdp-reassurance-item {
    font-size: 0.76rem;
    gap: 6px;
  }

  .pdp-tabs-section {
    margin-top: 24px;
    padding-top: 16px;
  }
  .pdp-tabs-header {
    margin-bottom: 12px;
  }
  .pdp-tabs-heading {
    font-size: 1.22rem;
  }
  .pdp-tabs-nav {
    justify-content: flex-start;
    padding: 6px 16px 10px;
    scroll-padding: 0 16px;
    margin: 0 auto 16px;
    gap: 8px;
  }
  .pdp-tab-trigger {
    padding: 8px 14px;
    font-size: 0.76rem;
    gap: 6px;
    border-radius: 20px;
    flex-shrink: 0;
  }
  .pdp-tab-num {
    font-size: 0.7rem;
    padding: 1px 6px;
  }
  .pdp-tab-label {
    font-size: 0.76rem;
  }
  .pdp-soin-duo-layout {
    gap: 10px;
  }
  .pdp-soin-story-card {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .pdp-story-title {
    font-size: 1.12rem;
    margin-bottom: 6px;
  }
  .pdp-story-p {
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .pdp-story-footer {
    margin-top: 10px;
    padding-top: 8px;
  }
  .pdp-benefits-grid-2x2 {
    gap: 8px;
  }
  .benefit-card-item {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .benefit-card-title {
    font-size: 0.86rem;
  }
  .benefit-card-text {
    font-size: 0.78rem;
    line-height: 1.45;
  }
  #tab-specs .product-format-sheet {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .format-sheet-header {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 12px;
    gap: 10px;
  }
  .format-sheet-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .format-sheet-title h4 {
    font-size: 1.1rem;
    line-height: 1.35;
    word-break: normal;
  }
  .format-sheet-badge {
    align-self: flex-start;
  }
  .format-sheet-modules {
    margin-top: 10px;
    gap: 8px;
  }
  .format-module-card {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .format-module-heading {
    margin-bottom: 6px;
    padding-bottom: 4px;
    font-size: 0.86rem;
  }
  .format-item {
    gap: 8px;
  }
  .format-item-label {
    font-size: 0.74rem;
  }
  .format-item-val {
    font-size: 0.8rem;
  }
  .format-origin-stamp {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  .ritual-card {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .ritual-card-head {
    margin-bottom: 10px;
  }
  .ritual-heading {
    font-size: 1.15rem;
  }
  .ritual-steps {
    gap: 8px;
    margin-bottom: 10px;
  }
  .ritual-step-item {
    padding: 10px 10px;
    border-radius: 10px;
  }
  .step-title {
    font-size: 0.88rem;
    margin-bottom: 3px;
  }
  .step-desc {
    font-size: 0.78rem;
    line-height: 1.45;
  }
  .esthetician-quote-box {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 10px;
  }
  .esthetician-quote-text {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 4px;
  }
  .inci-transparency-card {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .inci-card-head {
    margin-bottom: 10px;
  }
  .inci-heading {
    font-size: 1.15rem;
  }
  .clean-commitments-bar {
    gap: 5px;
    margin-bottom: 10px;
  }
  .clean-pill {
    padding: 3px 9px;
    font-size: 0.7rem;
  }
  .inci-actives-highlight {
    gap: 8px;
    margin-bottom: 10px;
  }
  .inci-active-card {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .inci-text-box {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .inci-guarantee-footer {
    margin-top: 8px;
    font-size: 0.72rem;
  }
  .pdp-cross-sell {
    margin-top: 20px;
    padding-top: 14px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .pdp-section-head {
    margin-bottom: 12px;
  }
  .pdp-section-title {
    font-size: 1.25rem;
  }
  .cross-sell-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    margin: 0 0 0 -16px;
    width: calc(100% + 16px);
    padding: 4px 16px 14px;
    scrollbar-width: none;
  }
  .cross-sell-grid::-webkit-scrollbar {
    display: none;
  }
  .cross-sell-card {
    flex: 0 0 240px;
    max-width: 260px;
    scroll-snap-align: start;
    padding: 12px;
  }
  .cross-sell-card .cross-sell-img {
    height: 150px;
  }
}

.pdp-cross-sell {
  margin-top: 28px;
  padding-top: 20px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-top: 1px solid rgba(170, 124, 17, 0.18);
}
.pdp-section-head {
  text-align: center;
  margin-bottom: 16px;
}
.pdp-section-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.pdp-section-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 500;
  color: #1c1917;
  margin-bottom: 4px;
}
.pdp-section-sub {
  font-size: 0.88rem;
  color: #78716c;
}
@media (min-width: 641px) {
  .cross-sell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
  }
}
.cross-sell-card {
  background: #ffffff;
  border: 1px solid rgba(170, 124, 17, 0.2);
  border-radius: var(--radius-md, 14px);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cross-sell-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dark);
  box-shadow: 0 8px 24px rgba(170, 124, 17, 0.12);
}
.cross-sell-card picture {
  display: block;
  width: 100%;
}
.cross-sell-card .cross-sell-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 12px;
  background: #faf8f5;
  display: block;
}
.cross-sell-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 6px;
  color: #1c1917;
}
.cross-sell-price {
  font-weight: 600;
  color: var(--gold-dark);
  font-size: 0.92rem;
  margin-bottom: 12px;
  margin-top: auto;
}
.btn-cross-add {
  width: 100%;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #fffcf8;
  border: 1px solid rgba(170, 124, 17, 0.35);
  border-radius: 20px;
  color: #1c1917;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cross-add:hover {
  background: var(--gold-dark);
  color: #ffffff;
  border-color: var(--gold-dark);
}

/* Espacio blanco mínimo absoluto antes del footer en la ficha de producto */
.is-pdp-view .shop-main,
.shop-main:has(.pdp-sephora-layout) {
  padding-bottom: 0 !important;
}

.is-pdp-view .shop-footer,
.shop-main:has(.pdp-sephora-layout) + .shop-footer,
body:has(.pdp-sephora-layout) .shop-footer {
  margin-top: 18px !important;
}

@media (max-width: 640px) {
  .is-pdp-view .shop-footer,
  .shop-main:has(.pdp-sephora-layout) + .shop-footer,
  body:has(.pdp-sephora-layout) .shop-footer {
    margin-top: 10px !important;
  }
}

/* ================================================================
   CHECKOUT MÓVIL (≤767px)
   SIN barra de pago sticky (decisión de la usuaria 2026-09-11):
   el único botón de pago es #btn-pay, visible en flujo al pie del
   formulario, a ancho completo. Implicit submit (Enter) verificado.
   ================================================================ */
@media (max-width: 767px) {
  #btn-pay.btn-primary {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }
  /* Check verde fuera en móvil, estado colapsado+completo: su 22px robaban
     ancho al título del paso 1 (medido: box 229px para ~235px de texto →
     ellipsis activo en el teléfono). El chevron ya indica el colapso. */
  .checkout-step.complete .step-check { display: none; }
  /* Ergonomía táctil móvil (inputs ≥16px: evita el auto-zoom de iOS) */
  .checkout-page input[type="text"],
  .checkout-page input[type="email"],
  .checkout-page input[type="tel"],
  .checkout-page input[type="password"],
  .checkout-page select,
  .checkout-page textarea,
  #mr-address-input {
    font-size: 16px !important;
  }
  .checkout-page .step-head { min-height: 48px; }
  .checkout-page .shipping-option { min-height: 52px; }
  /* Paso 3 compacto en móvil: solo totales (los artículos quedan en
     Mon Panier; la barra muestra el nº). Scoped: el drawer del carrito
     reutiliza .cart-summary-row pero NO está bajo .checkout-page. */
  .checkout-page .cart-item-row { display: none; }
  /* guest-notice en móvil: apilado (texto encima, enlace debajo) y el texto
     envuelve en palabras — sin ellipsis (estándar del proyecto: los textos se
     adaptan, no se cortan). En fila el enlace nowrap robaba todo el ancho al
     span @360. El padding/font inline del markup lo vence con !important. */
  .checkout-page .guest-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px !important;
    font-size: 0.72rem !important;
  }
  .checkout-page .guest-notice span {
    display: block; width: 100%;
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
  }
  .checkout-page .guest-notice a { display: inline-block; white-space: nowrap; }
}




/* ---------------------------------------------------------------
   PROFIL CLIENT — modal premium del Répertoire Clients
   (detalle, edición, eliminación — scoped bajo #client-modal)
   --------------------------------------------------------------- */
#client-modal .admin-modal { max-width: 560px; padding: 22px 24px; }
#client-modal .admin-modal-head { margin-bottom: 14px; }
.admin-client-empty { padding: 44px 0; text-align: center; color: var(--text-secondary); font-size: 0.92rem; }

.admin-client-hero {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.admin-client-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  box-shadow: 0 6px 16px var(--gold-glow);
}
.admin-client-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-client-name { font-family: var(--font-heading); font-size: 1.02rem; color: var(--gray-900); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-client-email { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-client-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
}
.admin-client-badge--verified { background: #eaf4e2; color: #3d7a1f; }
.admin-client-badge--admin { background: var(--gold-glow); color: var(--gold-dark); }
.admin-client-note { font-size: 0.78rem; color: #a07a2b; margin-top: 2px; }

.admin-client-statline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px;
}
.admin-client-stat {
  border: 1px solid var(--border-light); border-radius: 12px;
  padding: 8px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.admin-client-stat strong {
  font-family: var(--font-heading); font-size: 0.92rem; color: var(--gold-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-client-stat span {
  font-size: 0.62rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.admin-client-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin-bottom: 14px;
}
.admin-client-detail-row { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.admin-client-detail-label {
  flex: 0 0 auto; font-size: 0.68rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.admin-client-detail-value {
  font-size: 0.88rem; color: var(--gray-900);
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}
/* Fila Adresse: ocupa todo el ancho y envuelve (sin cortar con "…"). */
.admin-client-detail-row--full { grid-column: 1 / -1; }
.admin-client-detail-value--wrap {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.4;
}

/* Lista de commandes en 2 columnas (desktop): las separaciones salen del gap
   1px con el fondo del contenedor — sin border-bottom en filas (en grid la
   última fila visual no coincide con :last-child). Móvil → 1 columna. */
.admin-client-orders {
  border: 1px solid var(--border-light); border-radius: 14px;
  overflow: hidden; margin-bottom: 2px;
  /* minmax(0,1fr): 1fr 1fr = minmax(auto,1fr) y deja tracks mayores que el
     contenedor cuando el texto no comprimible (fecha · envío nowrap) fuerza el
     min-content → el grid desborda y la 2ª columna queda clipeada. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px; background: var(--border-light); padding: 1px;
}
.admin-client-orders-title {
  grid-column: 1 / -1; margin: -1px -1px 0;
  padding: 9px 14px; font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
  background: #faf7f2; border-bottom: 1px solid var(--border-light);
}
.admin-client-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--white);
  transition: background var(--duration-fast) var(--ease-out);
}
.admin-client-order-row:hover { background: #fdfaf5; }
.admin-client-order-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-client-order-row strong { font-size: 0.84rem; color: var(--gray-900); }
.admin-client-order-row > div:first-child span { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-client-order-right { align-items: flex-end !important; gap: 1px !important; }
.admin-client-order-right strong { font-family: var(--font-heading); color: var(--gold-dark) !important; font-size: 0.82rem !important; }
.admin-client-order-right .order-status { font-size: 0.62rem; padding: 2px 8px; }
.admin-client-noorders { padding: 14px 0 0; font-size: 0.85rem; color: var(--text-secondary); }

.admin-client-form { display: flex; flex-direction: column; gap: 12px; }
.admin-client-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-client-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.76rem; font-weight: 600; color: var(--text-heading);
}
.admin-client-form input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.92rem; color: var(--gray-900); background: var(--white);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.admin-client-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }

.admin-client-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Modal cliente en móvil: todo el contenido debe caber en 90vh SIN scroll
   interior (10 commandes incluidas) — statline 3 en una fila, detalles en
   línea, commandes en 2 columnas compactas. Ellipsis visual solo (dom intacto:
   el probe E2E del modal lee textContent). El MQ ≤520px viejo (1fr 1fr en
   statline, detail-row en columna, botones flex:1) quedaría obsoleto: se funde
   aquí a 768px con selectores scoped que ganan en especificidad. */
@media (max-width: 768px) {
  #client-modal .admin-modal { padding: 16px 12px; }
  #client-modal .admin-client-statline { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
  #client-modal .admin-client-stat { padding: 6px; }
  #client-modal .admin-client-stat strong { font-size: 0.82rem; }
  #client-modal .admin-client-stat span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #client-modal .admin-client-details { grid-template-columns: 1fr; gap: 5px 18px; margin-bottom: 12px; }
  #client-modal .admin-client-detail-value { min-width: 0; }
  #client-modal .admin-client-order-row { padding: 6px 8px; gap: 4px; }
  #client-modal .admin-client-order-row strong {
    font-size: 0.74rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #client-modal .admin-client-order-row > div:first-child span { font-size: 0.62rem; }
  /* min-width:0: la fila (grid item flex) y sus celdas deben poder encoger; sin
     ello el min-content (chip de status nowrap) desborda el track de la fila y
     muerde la columna vecina («2ª columna cortada»). La fecha · envío se
     envuelve (wrap) en ≤2 líneas en vez del nowrap/ellipsis global; el right
     (status + total) pasa a su PROPIA línea bajo el texto vía wrap del row, así
     el span usa el ancho completo de la celda y la fila nunca se clipea. */
  #client-modal .admin-client-order-row,
  #client-modal .admin-client-order-row > div { min-width: 0; }
  #client-modal .admin-client-order-row > div:first-child {
    flex: 1 1 100%; display: flex; flex-direction: column; gap: 1px;
  }
  #client-modal .admin-client-order-row > div:first-child span {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  #client-modal .admin-client-order-row { flex-wrap: wrap; row-gap: 3px; }
  #client-modal .admin-client-order-right {
    flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; column-gap: 10px; row-gap: 2px;
  }
  #client-modal .admin-client-order-right strong { font-size: 0.74rem; }
  #client-modal .admin-client-order-right .order-status { font-size: 0.55rem; padding: 3px 7px; }
}
@media (max-width: 390px) {
  /* Envíos largos («Livraison à domicile – Chronopost»): con el right apilado
     abajo el span ya dispone del ancho completo de la celda; a 0.56rem caben en
     2 líneas incluso en los 360px más estrechos. */
  #client-modal .admin-client-order-row > div:first-child span { font-size: 0.56rem; }
}
  #client-modal .admin-client-orders-title { padding: 7px 12px; }
  #client-modal .admin-client-actions { justify-content: flex-start; gap: 8px; margin-top: 12px; }
  #client-modal .admin-client-actions .btn-primary,
  #client-modal .admin-client-actions .btn-danger-ghost { flex: 0 0 auto; }
  #client-modal .admin-client-actions .btn-primary { font-size: 0.78rem; padding: 8px 12px !important; min-width: 0 !important; }
  #client-modal .admin-client-actions .btn-danger-ghost { font-size: 0.78rem; padding: 8px 12px; }
  #client-modal .admin-client-delete .admin-client-actions { justify-content: center; }
}
.btn-danger-ghost {
  background: transparent; border: 1px solid #e0c0b2; color: #b0451f;
  padding: 10px 18px; border-radius: 12px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: all var(--duration-fast) var(--ease-out); white-space: nowrap;
}
.btn-danger-ghost:hover { background: #fdf1ec; border-color: #d9a08b; }
.btn-secondary-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 10px 22px; border-radius: 12px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  transition: all var(--duration-fast) var(--ease-out); white-space: nowrap;
}
.btn-secondary-ghost:hover { background: #faf7f2; }

.admin-client-delete { text-align: center; padding: 10px 6px 4px; }
.admin-client-delete-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #b0451f; background: #fdf1ec;
}
.admin-client-delete h4 { font-family: var(--font-heading); font-size: 1.12rem; color: var(--gray-900); margin: 0 0 10px; }
.admin-client-delete p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 4px; }
.admin-client-delete .admin-client-actions { justify-content: center; }

@media (max-width: 520px) {
  .admin-client-form-row { grid-template-columns: 1fr; }
}

/* ================================================================
   ADMIN — REDESIGN MOBILE PREMIUM (v1.0.263)
   Barre de navigation inférieure fixe + cartes premium.
   Arquitectura CSS-only: las tarjetas viven SIEMPRE en el DOM junto
   a su tabla (mismo loop, mismos onclick); el MQ activo (≤767.98px O
   pointer:coarse ≤1100px — el gate coarse cubre móviles con viewport
   forzado a escritorio, p. ej. «Desk site» en Firefox Android, donde
   innerWidth salta a 980px y sin él el FAB desaparecía) oculta las
   tablas/píldoras y muestra tarjetas/barra inferior. El punto 768
   exacto (tablet) conserva el escritorio si el puntero es fino.
   ================================================================ */

/* ---------- 0. Desktop: tarjetas y FAB inferiores ocultos ---------- */
.admin-fab-wrap, .admin-fab-scrim { display: none; }
.admin-cards, .admin-mini-list { display: none; }

/* Hero: clases scoped bajo .admin-hero-card (el shell .orders-page h2 fuerza
   1.6rem + centrado; .orders-page h2 pesa (0,1,1) frente a .admin-hero-title (0,1,0)) */
.admin-hero-card .admin-hero-accent {
  font-family: var(--font-accent);
  font-size: 2.2rem;
  line-height: 1.1;
}
.admin-hero-card .admin-hero-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 0;
}
.admin-hero-card .admin-hero-sub { font-size: 0.85rem; text-align: left; }

/* ---------- 1. Escritorio: lista de actividades como tabla premium ---------- */
.admin-dash-orders {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-dash-orders .admin-section-head { padding-bottom: 16px; }

/* ---------- 2. FAB MÓVIL (≤767.98px) ---------- */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-nav { display: none; }

  /* Botón circular flotante arrastrable (fixed): el usuario lo mueve a
     pulso (pointer events en admin.js, posición persistida en localStorage)
     y al pulsarlo despliega el menú con las 7 secciones. Opaco, sin blur
     (repaint roto en Firefox Android), radio 50%, borde dorado fino y sombra
     hacia arriba — el lenguaje visual del admin. */
  .admin-fab-wrap {
    display: block;
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
  }
  /* Firefox Android ≥150 dobla env(safe-area-inset-bottom) que su viewport no
     dibuja (bugzilla 1994149) → bottom fijo sin env (clase .ff-android de
     shop.js por UA). */
  .ff-android .admin-fab-wrap { bottom: 20px; }

  .admin-fab {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffdfd;
    border: 1px solid rgba(140, 111, 34, 0.35);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(140, 111, 34, 0.28);
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .admin-fab:active { transform: scale(0.94); }

  /* Hamburguesa animada: 3 líneas → X cuando el menú está abierto (.open en
     el wrap, sincronizado por admin.js junto a aria-expanded). */
  .admin-fab-bars { position: relative; width: 20px; height: 14px; pointer-events: none; }
  .admin-fab-bars i {
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-dark);
    transition: top 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
  }
  .admin-fab-bars i:nth-child(1) { top: 0; }
  .admin-fab-bars i:nth-child(2) { top: 6px; }
  .admin-fab-bars i:nth-child(3) { top: 12px; }
  .admin-fab-wrap.open .admin-fab-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .admin-fab-wrap.open .admin-fab-bars i:nth-child(2) { opacity: 0; }
  .admin-fab-wrap.open .admin-fab-bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* Menú desplegado: grid 2 columnas pegado al borde derecho del FAB (o al
     izquierdo con .fab-left — la posición se invierte en wrap estrecho).
     Anclado por bottom para que crezca hacia arriba. */
  .admin-fab-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    display: none;
    width: min(300px, calc(100vw - 24px));
    padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    background: #fffdfd;
    border: 1px solid rgba(140, 111, 34, 0.22);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(140, 111, 34, 0.22);
    max-height: min(440px, calc(100vh - 120px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(140, 111, 34, 0.35) transparent;
  }
  .admin-fab-wrap.open .admin-fab-menu { display: grid; animation: admin-fab-pop 0.16s ease; }
  .admin-fab-wrap.fab-left .admin-fab-menu { right: auto; left: 0; }
  @keyframes admin-fab-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .admin-fab-item {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .admin-fab-item svg {
    width: 21px;
    height: 21px;
    color: var(--gold-dark);
    opacity: 0.65;
    transition: opacity 0.18s ease;
  }
  .admin-fab-item.active {
    background: rgba(140, 111, 34, 0.10);
    box-shadow: inset 0 0 0 1px rgba(140, 111, 34, 0.16);
    color: var(--gold-dark);
    font-weight: 600;
  }
  .admin-fab-item.active svg { opacity: 1; }
}

/* Scrim del FAB (fuera del MQ por simplicidad; display:none en desktop). */
.admin-fab-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8900;
  background: rgba(30, 18, 10, 0.38);
}
.admin-fab-scrim.open { display: block; }

/* El rebote del overscroll (tirar hacia abajo) revela el canvas del html
   (rosa del body::before). En modo admin con FAB se iguala al fondo del
   admin para que no se vea banda distinta justo antes de refrescar. */
html:has(.admin-fab-wrap) { background-color: #fffdfd; }

/* ---------- 3. Tarjetas premium (≤767.98px) ---------- */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-table-wrapper { display: none; }
  .admin-dash-table { display: none; }

  /* Los paneles de Ventes (Répartition par statut) se mantienen: apilados,
     el desglose fluye a su ancho natural con scroll en vez de 720px fijo */
  .admin-panel .admin-table-wrapper {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-panel .admin-table-wrapper .admin-table { min-width: 0; }
  .admin-ventes-grid { padding: 16px; }

  .admin-cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .admin-cards--stack { grid-template-columns: 1fr; }

  .admin-mini-list {
    display: flex;
    flex-direction: column;
  }
  .admin-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .admin-mini-row:last-child { border-bottom: none; }
  .admin-mini-row:active { background: rgba(212, 175, 55, 0.06); }
  .admin-mini-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .admin-mini-main strong {
    font-family: monospace;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .admin-mini-main span { font-size: 0.75rem; color: var(--text-secondary); }
  .admin-mini-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .admin-mini-side strong {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--gold-dark);
    white-space: nowrap;
  }
}

/* ---------- 4. Componentes de tarjeta (base, visibles solo ≤767.98px) ---------- */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: 0 2px 10px rgba(140, 111, 34, 0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .card-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .card-main > strong {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.25;
  }
  .card-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-meta {
    font-size: 0.76rem;
    color: var(--text-secondary);
    min-width: 0;
  }
  .card-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-code {
    font-family: monospace;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
    white-space: normal;
    min-width: 0;
  }
  .card-price {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 1.05rem;
    white-space: nowrap;
  }
  .card-total {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 1.2rem;
    white-space: nowrap;
  }
  .card-pill {
    background: var(--off-white);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gold-dark);
    text-transform: capitalize;
    white-space: nowrap;
  }
  .card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
  }
  .card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    font-size: 0.76rem;
    color: var(--text-secondary);
  }
  .card-stats strong { color: var(--text-heading); font-weight: 600; }
  .card-uses {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-secondary);
  }
  .card-progress {
    height: 5px;
    border-radius: 999px;
    background: var(--off-white);
    overflow: hidden;
  }
  .card-progress > div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold, #aa7c11), var(--gold-light, #e8d48b));
  }
  .admin-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  /* Tarjetas de producto */
  .admin-card-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, #f7e8e0 0%, #e8c9c0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
  }
  .admin-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .card-stock {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .admin-stock-val {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-heading);
  }

  /* Tarjetas de cliente: tarjeta completa clicable */
  .admin-card--client { cursor: pointer; transition: box-shadow 0.2s ease, border-color 0.2s ease; }
  .admin-card--client:active {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
  }

  /* Tarjeta pedido: el select de estado baja a .card-actions (ocupaba el
     hueco de Voir), crece y llena; Voir queda como icono junto a la papelera */
  .admin-card--order .card-actions .admin-select { flex: 1 1 0; min-width: 0; min-height: 40px; }

  /* Estado vacío de los filtros (ocupaba la fila entera de la tabla) */
  .admin-cards-empty {
    grid-column: 1 / -1;
    padding: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 12px;
  }

  /* Chip de emblema de la tarjeta bento */
  .admin-card--bento .bento-icon-chip {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(140, 111, 34, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .admin-card--bento .bento-icon-chip svg { width: 19px; height: 19px; }
  .btn-icon-md {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .btn-icon-md:disabled { opacity: 0.4; cursor: default; }
}

/* ---------- 5. qty-btn--lg (el base .qty-btn es el stepper 42px de la boutique) ---------- */
.qty-btn--lg,
.qty-btn--lg:focus {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  font-size: 1rem;
  border: 1.5px solid rgba(140, 111, 34, 0.25);
  background: #fff;
  color: var(--gold-dark);
  box-shadow: none;
  outline: none;
}
.qty-btn--lg:hover { background: var(--gold-glow); color: var(--gold-dark); }

/* ---------- 6. Adaptaciones generales ≤767.98px ---------- */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  /* KPI: 2 columnas (el grid feed conserva su propio ritmo 561-760 / ≤560) */
  .admin-kpi-grid:not(.admin-kpi-grid--feed) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* min-width:0 evita que el contenido (valor/labels) estire la pista del
     grid — el clásico desborde móvil de flex/grid min-width:auto */
  .admin-kpi-card {
    min-width: 0;
    padding: 14px;
    gap: 10px;
  }
  /* La columna de texto (div anónimo tras el icono) debe poder encogerse:
     sin min-width:0 su contenido nowrap estira el card y desborda el viewport
     en la 2ª columna del grid (el clásico min-width:auto) */
  .admin-kpi-card > div:last-child {
    flex: 1 1 0;
    min-width: 0;
  }
  .admin-kpi-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  .admin-kpi-val {
    font-size: clamp(1.15rem, 0.9rem + 2vw, 1.5rem);
    margin-bottom: 2px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
  }
  .admin-kpi-eyebrow {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .admin-kpi-label {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Hero compacto */
  .admin-hero-card { padding: 22px 18px; margin-bottom: 16px; }
  .admin-hero-card .admin-hero-accent { font-size: 1.8rem; }
  .admin-hero-card .admin-hero-title { font-size: 1.2rem; }
  .admin-hero-card .admin-hero-sub { font-size: 0.74rem; }
  /* La fila de acciones no debe imponer min-content nowrap al wrapper flex
     (sin wrap, el card recorta sus botones con overflow:hidden) */
  .admin-hero-actions { flex-wrap: wrap; }
  .admin-hero-actions .btn-hero-primary { padding: 11px 16px; font-size: 0.78rem; }

  /* Móvil estrecho (≤480px): hero mínimo */
  @media (max-width: 479.98px) {
    .admin-hero-card { padding: 16px 14px; }
    .admin-hero-card .admin-hero-accent { font-size: 1.4rem; }
    .admin-hero-card .admin-hero-title { font-size: 1.05rem; }
    .admin-hero-card .admin-hero-sub { font-size: 0.66rem; margin-top: 4px; }
    .admin-hero-actions { gap: 8px; }
    .admin-hero-actions .btn-hero-primary { padding: 7px 12px; font-size: 0.68rem; }
  }

  /* Inputs 16px (evita el zoom automático de iOS) */
  .admin-search .admin-search-input,
  .admin-select,
  .admin-modal input[type='text'],
  .admin-modal input[type='email'],
  .admin-modal input[type='number'],
  .admin-modal input[type='tel'],
  .admin-modal input[type='url'],
  .admin-modal input[type='datetime-local'],
  .admin-modal select,
  .admin-modal textarea {
    font-size: 16px;
  }

  /* Chips y paginación cómodos al tacto */
  .admin-filter-chip { min-height: 32px; }
  .admin-pagination .btn-primary,
  .admin-pagination .btn-outline {
    padding: 9px 16px;
    min-height: 38px;
  }

  .admin-view-switch { flex-shrink: 1; }
}

/* Grid feed: 2 columnas entre 561 y 760 (el MQ propio lo deja 1 col ≤560) */
@media (min-width: 561px) and (max-width: 760px) {
  .admin-kpi-grid--feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Botones de galería admin siempre visibles en táctil (hover-only hoy) */
@media (hover: none) {
  .product-admin-gallery-thumb .product-admin-gallery-main-btn,
  .product-admin-gallery-thumb .product-admin-gallery-remove-btn,
  .product-admin-gallery-thumb .product-admin-gallery-move-btn {
    opacity: 1;
  }
}

/* ---------- 7. Móvil profundo ≤480px ---------- */
@media (max-width: 480px) {
  .admin-modal {
    width: calc(100vw - 24px);
    border-radius: 16px;
    padding: 22px 16px;
  }
  .admin-modal--wide {
    max-width: none;
    width: calc(100vw - 24px);
  }

  /* El form-grid del modal producto fuerza 2 cols (L10422): 1 sola <480 */
  .product-admin-grid .form-grid { grid-template-columns: 1fr; }

  /* La preview foto del producto (oculta ≤640) pasa a compacta visible */
  .product-admin-preview {
    display: block;
    max-height: 190px;
    overflow: hidden;
    border-radius: 14px;
  }

  /* Tabs del studio: ahora ahora scroll, sin wrap */
  .admin-pdp-tabs {
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-left: 4px;
    padding-right: 4px;
  }
  .admin-pdp-tabs::-webkit-scrollbar { display: none; }
  .admin-pdp-tab { flex: 0 0 auto; }

  /* Menú FAB: las etiquetas de 2 columnas caben sin cortarse ≤380 */
  @media (max-width: 380px) {
    .admin-fab-item { font-size: 0.55rem; }
  }
}


/* ================================================================
   ADMIN — PACK PREMIUM (v1.0.263) : táctil, estética, cabecero
   ================================================================ */

.admin-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.admin-head-right .btn-primary { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; }

.btn-md { padding: 6px 14px; font-size: 0.78rem; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }

/* Estados vacíos con icono */
.admin-empty-ic { display: flex; }
.admin-empty-ic svg { color: var(--gold-light); }
.admin-cards-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.admin-cards-empty .admin-empty-ic svg, .admin-dash-empty .admin-empty-ic svg { width: 22px; height: 22px; }
.admin-dash-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--text-secondary); }

/* Scrollbars fines dorées (sans remplacer des épaisseurs volontaires) */
.admin-modal-overlay .admin-modal, #order-detail-body { scrollbar-width: thin; scrollbar-color: rgba(140, 111, 34, 0.35) transparent; }
.admin-pdp-tabs, .product-admin-scroll, .restock-alerts-scroll, .admin-feed-products-scroll { scrollbar-width: thin; scrollbar-color: rgba(140, 111, 34, 0.35) transparent; }

@media (max-width: 640px) {
  .admin-head-right { justify-content: flex-start; }
  .admin-head-right .btn-primary { flex-basis: 100%; justify-content: center; padding: 10px 14px; }
}

/* Le `width:100%` de la boutique (MQ ≤480) ne doit pas empiler les CTA du hero admin */
@media (max-width: 479.98px) {
  .admin-hero-actions .btn-hero-primary { width: auto; flex: 1 1 0; min-height: 40px; justify-content: center; }
}

/* KPI ultra-étroit : la valeur monétaire doit tenir sans ellipsis */
@media (max-width: 340px) {
  .admin-kpi-grid:not(.admin-kpi-grid--feed) { grid-template-columns: 1fr; }
  .admin-kpi-card { gap: 10px; padding: 12px 10px; }
  .admin-kpi-icon { width: 28px; height: 28px; }
  .admin-kpi-val { font-size: 1.02rem; }
  .admin-kpi-eyebrow { letter-spacing: 0.05em; }
}

/* Zones tactiles ≥ 40px + retour visuel :active */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-card .btn-remove-item { width: 40px; height: 40px; }
  .admin-card .btn-icon-md { width: 40px; height: 40px; }
  .admin-card .qty-btn--lg { width: 40px; height: 40px; }
  .admin-card .btn-icon-md:active, .admin-card .qty-btn--lg:active, .admin-card .btn-remove-item:active { background: var(--cream); }
  .admin-card--bento .admin-row-actions { flex-wrap: wrap; justify-content: flex-end; }
  .admin-fab-item:active { background: rgba(140, 111, 34, 0.08); }
  .admin-fab-item:active svg { transform: scale(0.9); transition: transform 0.12s ease; }
}

@media (min-width: 361px) and (max-width: 767.98px) {
  .admin-fab-item { font-size: 0.6rem; }
}

@media (max-width: 360px) {
  .admin-fab-item { font-size: 0.55rem; }
}

/* Touch : pas de hover fantôme (cartes qui « sautent » sous le doigt) */
@media (hover: none) {
  .admin-kpi-card:hover { transform: none; box-shadow: none; border-color: var(--border-light); }
  .feed-card--clickable:hover { transform: none; box-shadow: none; border-color: var(--border-light); }
}

/* ================================================================
   ADMIN — QUEJAS MÓVILES (v1.0.265): cabecera del gráfico, nav,
   filtros en un solo desplegable, flux deslizante
   ================================================================ */

/* FIX 1 — Cabecera del gráfico de ventas: cada bloque en su propia fila,
   sin torre de texto ni hueco en blanco */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-section-head > div:first-child { flex: 1 1 100%; min-width: 0; width: 100%; }
  .admin-section-head > div:first-child p { width: 100%; max-width: none; }
  .admin-chart-title-row { flex-wrap: wrap; row-gap: 6px; }
  .admin-head-right { flex: 1 1 100%; }
  .admin-section-head > .admin-chart-period,
  .admin-head-right > .admin-chart-period { flex: 1 1 100%; width: 100%; }
  .admin-chart-period { justify-content: space-between; }
  .admin-chart-period-btn { flex: 1 1 0; text-align: center; }
}

/* FIX 2 — Etiquetas del menú FAB: una sola línea, nunca se cortan a media palabra */
.admin-fab-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* FIX 3 — Filtros: un solo desplegable en lugar de los chips (móvil) */
.admin-filter-select { display: none; }
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-filter-bar .admin-filter-chip { display: none; }
  .admin-filter-select {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--text-heading);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
  .admin-filter-bar .admin-search { flex: 1 1 100%; width: 100%; }
}

/* FIX 4 — Flux: tarjetas deslizables lateralmente (patrón cross-sell) */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .feed-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -20px 34px;
    padding: 0 20px 10px;
    scrollbar-width: none;
  }
  .feed-cards::-webkit-scrollbar { display: none; }
  .feed-card { flex: 0 0 clamp(250px, 80vw, 320px); min-width: 0; scroll-snap-align: start; }
  .feed-card-head { flex-wrap: wrap; }
}

/* ================================================================
   ADMIN — QUEJAS MÓVILES v7 (v1.0.273): la barra inferior (dock
   **FLOTANTE** v6) se sustituye por un **ICONO CIRCULAR FLOTANTE
   (FAB) ARRASTRABLE** (petición de la usuaria): botón redondo 56px
   fixed con borde dorado y sombra hacia arriba, hamburguesa animada
   que gira a X al abrir; el usuario lo mueve a pulso (pointer events
   en admin.js, umbral 8px tap vs drag, clamp al viewport, posición
   persistida en localStorage) y al pulsarlo se despliega el menú
   grid 2 columnas con las 7 secciones (ADMIN_NAV_TABS), activa con
   píldora dorada; cierre por scrim, por Escape o tocando el FAB otra
   vez. Escritorio intacto (pills .admin-nav). GOTCHAS heredados:
   safe-area con env → override .ff-android sin env (bugzilla
   1994149); canvas del html = fondo del admin con html:has(.admin-
   fab-wrap) para el rebote del overscroll. El FAB es fixed (posición
   absoluta del usuario), así que body:has min-height 100vh de v5/v6
   ya no hace falta. v6 (v1.0.272): dock flotante con píldora dorada;
   v5 (v1.0.271): fixed → sticky
   en flujo
   (patrón de la barra de la ficha de producto); v4 (v1.0.270): barra
   sin backdrop-filter ni fondo translúcido (repaint roto → fondo
   opaco #fffdfd); v3+ (v1.0.269): Ventes + Top Ventes deslizan juntos
   (stream) con dots de carrusel (stream-dots, wire genérico
   reutilizado de Flux), Dernières Activités fija a ancho completo;
   acciones de producto y de pedido al pie; dots del carrusel de Flux;
   paginador grid 3 col (fix :disabled sin border — outline no afecta)
   ================================================================ */
.admin-dash-cards {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px 20px;
  margin-bottom: 30px;
}
@media (max-width: 1100px) {
  .admin-dash-cards { grid-template-columns: 1fr; }
}
.admin-dash-cards .admin-dash-orders { grid-column: 1 / -1; }

/* Ventes + Top Ventes forman un stream: grid item en escritorio
   (display:contents) y carrusel scroll-snap solo en móvil. Los 2
   .admin-panel del stream; .admin-dash-orders queda fuera, fijo. */
.admin-dash-stream { display: contents; }
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-dash-stream {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    /* SIN full-bleed (igual que el carrusel KPI): el margin -20px consumía el
       padding interno y dejaba el 1er panel pegado al borde de pantalla
       (streamPanelLeft=0 medido; el contenido admin tiene 20px). El strip vive
       en el padding del contenedor → paneles alineados con el resto del admin
       (x=+20) y el snap sigue alineando cada página a x=+20. */
    margin: 0;
    padding: 0 0 12px;
    scrollbar-width: none;
  }
  .admin-dash-stream::-webkit-scrollbar { display: none; }
  .admin-dash-stream > .admin-panel {
    flex: 0 0 clamp(280px, 86vw, 380px);
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Paginador móvil: grid de columnas iguales para que Précédent | info |
   Suivant queden SIEMPRE en una sola fila (el botón siguiente saltaba a
   su propia línea a 360px y quedaba desalineado en Clients y Cmd.) */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-pagination {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .admin-pagination .btn-primary {
    width: 100%;
    padding: 9px 6px !important;
  }
  .admin-pagination .admin-pagination-info {
    text-align: center;
    white-space: nowrap;
  }
}

/* Acciones de tarjeta: fila inferior con Masquer + Éditer + papelera */
.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card-actions .btn-outline {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.card-actions .btn-remove-item {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

/* Puntos del carrusel Flux: siguen a la tarjeta visible (solo móvil) */
.feed-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: -20px 0 22px;
}

/* Dots del stream del dashboard (Ventes + Top Ventes): viven en el grid de
   .admin-dash-cards, así que el margen de abajo pasa a 0 (el gap de 30px ya
   los separa de Dernières Activités); el -20px de arriba pega la fila al
   carrusel (que tiene padding-bottom:12px). */
.feed-dots.stream-dots {
  margin: -20px 0 0;
}

/* Carrusel de los 8 KPI del dashboard: en móvil 2 páginas de 4 tarjetas
   (2×2) deslizables con scroll-snap; en escritorio las páginas se quedan
   como display:contents y el grid puro de 4 por fila manda (idéntico a
   antes). Modelo: .admin-dash-stream + wireCarouselDots del Flux. */
.admin-kpi-grid--dash .admin-kpi-page { display: contents; }
/* Los dots KPI viven en bloque normal (NO dentro de .admin-dash-cards, cuyo
   gap 30px sí compensa el -20px del stream): un margin-top negativo los mete
   dentro del strip (padding inferior 12px − 20px = −8px → tarjetas encima
   de los puntos). 8px de margen + 12px de padding = 20px de aire. */
.kpi-dots { margin: 8px 0 18px; }

@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .admin-kpi-grid--dash {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    /* SIN full-bleed (a diferencia del stream): el margin -20px consumía el
       padding interno y dejaba la 1ª página pegada al borde izquierdo de la
       pantalla (page1Left=0 medido; el contenido admin tiene 20px). El strip
       vive dentro del padding del contenedor → las tarjetas quedan alineadas
       con el resto del admin y las 2 páginas arrancan en x=+20. */
    margin: 0;
    padding: 0 0 12px;
    scrollbar-width: none;
  }
  .admin-kpi-grid--dash::-webkit-scrollbar { display: none; }
  .admin-kpi-grid--dash .admin-kpi-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1100px) {
  .feed-dots { display: flex; }
  .feed-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1.5px solid rgba(140, 111, 34, 0.55);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 0;
  }
  .feed-dot.active {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    width: 22px;
  }
}

/* ================================================================
   SEARCH HIGHLIGHT — Termes trouvés dans les cartes produit
   ================================================================ */
mark.search-highlight {
  background: linear-gradient(120deg, rgba(212, 175, 55, 0.28) 0%, rgba(212, 175, 55, 0.14) 100%);
  color: var(--gold-dark);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ================================================================
   DRAWER RELATED PRODUCTS — "Vous aimerez aussi" dans le cart drawer
   ================================================================ */
.drawer-related {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.drawer-related-head {
  margin-bottom: 10px;
}

.drawer-related-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.drawer-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
  position: relative;
}

.drawer-related-card:hover {
  border-color: var(--gold-light);
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.12);
  transform: translateX(2px);
}

.drawer-related-img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-related-img picture,
.drawer-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drawer-related-info {
  flex: 1;
  min-width: 0;
}

.drawer-related-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drawer-related-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-top: 3px;
}

.drawer-related-add {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}

.drawer-related-add:hover {
  background: var(--gold-dark);
  color: #fff;
  transform: scale(1.1);
}

.drawer-related-add svg {
  width: 14px;
  height: 14px;
}