/* ==========================================================================
   White-label core style system
   ========================================================================== */

/* Variables */
:root {
  --primary-dark: #111111;
  --footer-bg: #111111;   /* pied de page : constant, indépendant des thèmes */
  --secondary-dark: #1a1a1a;
  --gold: #c5a880;
  --gold-hover: #b09166;
  --accent-blush: #fcf4f0;
  --bg-color: #faf8f5;
  --card-bg: #ffffff;
  --text-dark: #222222;
  --text-muted: #777777;
  --text-light: #ffffff;
  --border-color: #e8e4e0;
  --success: #608066;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', sans-serif;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-medium: 0 10px 30px rgba(17, 17, 17, 0.08);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-dark);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: 15px;
  overflow-x: hidden;
}

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

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-smooth);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Main Layout */
.luxury-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 30px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--primary-dark);
}

.logo-subtitle {
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 35px;
}

.nav-links a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--text-dark);
  padding: 5px 0;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}

.nav-links a.nav-adult-group {
  color: #991b1b;
}

.nav-links a.nav-adult-group:hover {
  color: #dc2626;
  border-bottom-color: #dc2626;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Icon Badge */
.icon-btn {
  color: var(--text-dark);
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.icon-btn:hover {
  background-color: var(--accent-blush);
  color: var(--gold);
}

.relative-badge {
  position: relative;
}

.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--primary-dark);
  color: var(--text-light);
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.badge-gold {
  background-color: var(--gold);
}

/* Language Selector */
.lang-selector {
  position: relative;
}

.lang-btn {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 2px;
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: var(--shadow-medium);
  display: none;
  flex-direction: column;
  width: 100px;
  z-index: 10;
}

.lang-selector:hover .lang-dropdown {
  display: flex;
}

.lang-dropdown button {
  padding: 8px 12px;
  font-size: 12px;
  text-align: left;
}

.lang-dropdown button:hover {
  background-color: var(--accent-blush);
  color: var(--gold);
}

/* Loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-color);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

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

/* Buttons */
.gold-btn {
  background-color: var(--primary-dark);
  color: var(--text-light);
  padding: 14px 28px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0;
  border: 1px solid var(--primary-dark);
}

.gold-btn:hover {
  background-color: transparent;
  color: var(--primary-dark);
}

.outline-btn {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 12px 24px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 600;
}

.outline-btn:hover {
  background-color: var(--gold);
  color: var(--text-light);
}

.w-full { width: 100%; }
.mt-4 { margin-top: 16px; }

/* Grid Layouts */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

/* Hero Section */
.hero-section {
  position: relative;
  /* Height scales with viewport WIDTH (not height): a narrow phone is always
     shorter than a wide desktop, so mobile is never taller than desktop. */
  height: clamp(280px, 34vw, 560px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  padding: 0 clamp(24px, 8vw, 80px);
}

/* ---------------------------------------------------------------------------
   Bannière PLEINE LARGEUR à hauteur adaptative (hero_image_size = 'fullwidth').
   L'image n'est plus un background (qui impose une hauteur fixe au conteneur et
   recadre) mais une vraie balise <img> en width:100% / height:auto : c'est elle
   qui DICTE la hauteur de la section. Résultat : l'image est toujours affichée
   entière, sur toute la largeur, sans recadrage ni bande vide, quel que soit
   son ratio. Le texte éventuel repasse en superposition absolue.
   --------------------------------------------------------------------------- */
.hero-section.hero-fullwidth {
  height: auto;          /* ← annule le clamp() ci-dessus */
  min-height: 0;         /* ← annule le min-height des thèmes (ex. 82vh) */
  display: block;
  padding: 0;            /* le retrait passe sur .hero-content */
  background-image: none !important;  /* l'image est portée par le <img> */
  background-color: transparent;
  line-height: 0;        /* supprime l'espace fantôme sous une image inline */
}

.hero-section.hero-fullwidth .hero-full-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Texte superposé : en pleine largeur la section n'est plus un flex container,
   on repositionne donc le bloc de texte à la main (aligné à gauche, centré
   verticalement — même rendu visuel qu'en mode « cover »). */
.hero-section.hero-fullwidth .hero-content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 clamp(24px, 8vw, 80px);
  line-height: 1.6;      /* rétablit l'interligne annulé sur la section */
}

/* Bannière cliquable (hero_link_url renseigné + texte masqué).
   En pleine largeur, le lien enveloppe l'image : la zone cliquable épouse
   exactement l'image, sans rien changer au rendu.
   Dans les autres modes l'image est un background, il n'y a donc rien à
   envelopper : le lien devient une surface transparente qui couvre la section. */
.hero-link {
  display: block;
  color: inherit;
  cursor: pointer;
}
.hero-section.hero-fullwidth .hero-link { line-height: 0; }
.hero-section:not(.hero-fullwidth) .hero-link {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(17,17,17,0.7) 0%, rgba(17,17,17,0.2) 60%, rgba(17,17,17,0.1) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero-content h1 {
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 16px;
  margin-bottom: 30px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* Product Card */
.product-card {
  background-color: var(--card-bg);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.product-card:hover {
  box-shadow: var(--shadow-medium);
}

.card-img-wrapper {
  position: relative;
  padding-bottom: 125%; /* 4:5 ratio */
  overflow: hidden;
}

.product-card img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.product-card .hover-img {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.product-card:hover .hover-img {
  opacity: 1;
}

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

.card-wishlist-btn {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 50%;
  color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.card-wishlist-btn:hover {
  color: #d15252;
}

.card-wishlist-btn.active {
  color: #d15252;
}

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

.product-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.product-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text-dark);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 48px;
}

.catalog-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
  padding: 20px;
  color: var(--primary-dark);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-align: left;
}

.catalog-filter-panel h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  color: var(--primary-dark);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.catalog-filter-panel h3 svg { width: 14px; color: var(--gold); }
.catalog-filter-options { display: flex; flex-direction: column; gap: 7px; }
.catalog-filter-options label { display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; font-size: 11.5px; font-weight: 400; text-transform: none; }
.catalog-filter-options input { width: auto; margin: 0; }
.catalog-filter-options small { color: var(--text-muted); }
.catalog-saved-sizes { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.catalog-saved-sizes > strong { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.product-price {
  font-size: 16px;
  font-weight: 600;
}

.points-pill {
  font-size: 10px;
  background-color: var(--accent-blush);
  color: var(--gold);
  border: 1px solid var(--border-color);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

/* Category Filter Header */
.catalog-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 30px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 35px;
  align-items: start;
}

.catalog-main { min-width: 0; }
.catalog-mobile-filters { display: none; }

@media (max-width: 760px) {
  .catalog-container {
    width: 100%;
    max-width: 100%;
    padding: 24px 14px;
    overflow-x: clip;
  }

  .catalog-container > div:first-child {
    margin-bottom: 22px !important;
  }

  .catalog-container h1 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }

  .catalog-layout {
    display: block;
    width: 100%;
  }

  .catalog-sidebar { display: none !important; }

  .catalog-mobile-filters {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg, #fff);
  }

  .catalog-mobile-filters summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary-dark);
  }

  .catalog-mobile-filters summary svg { width: 16px; height: 16px; color: var(--gold); }
  .catalog-mobile-filters-content { padding: 0 15px 15px; }
  .catalog-mobile-filters-content > label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; }
  .catalog-mobile-filters select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border-color); }

  .catalog-mobile-sizing { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; font-size: 12px; }
  .catalog-mobile-sizing label { display: flex; align-items: center; gap: 7px; }
  .catalog-mobile-sizing input { width: auto; margin: 0; }

  .catalog-main,
  .filter-bar,
  .catalog-search-wrap { width: 100% !important; min-width: 0 !important; }

  .filter-bar { padding: 12px !important; }
  .filter-bar .filter-select { width: 100%; }

  .catalog-main .product-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100%;
    padding-top: 4px;
  }

  .catalog-main .product-card { width: 100%; min-width: 0; }
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 15px;
}

.filter-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  font-size: 13px;
  outline: none;
}

/* Product Detail View */
.detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.gallery-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.main-image-wrapper {
  position: relative;
  padding-bottom: 110%;
  overflow: hidden;
  background: #f7f4ef;
  border: 1px solid var(--border-color);
}

.main-image-wrapper img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain; /* keep the product image's real ratio (no crop, no squash) */
  cursor: zoom-in;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(17,17,17,.58);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, opacity .18s ease;
}
.gallery-arrow:hover { background: rgba(17,17,17,.82); }
.gallery-arrow-left { left: 14px; }
.gallery-arrow-right { right: 14px; }
.product-gallery-thumb.selected { outline: 2px solid var(--gold); outline-offset: -2px; }
.zoom-gallery-arrow { position: fixed; width: 52px; height: 64px; }
.zoom-gallery-arrow.gallery-arrow-left { left: 22px; }
.zoom-gallery-arrow.gallery-arrow-right { right: 22px; }
@media (max-width: 640px) {
  .gallery-arrow { width: 38px; height: 46px; }
  .gallery-arrow-left { left: 8px; }
  .gallery-arrow-right { right: 8px; }
}

.detail-info {
  display: flex;
  flex-direction: column;
  width: 495px;
  max-width: 100%;
  min-width: 0;
  justify-self: end;
}

.detail-title {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.detail-price {
  font-size: 24px;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 20px;
}

.loyalty-banner-detail {
  background-color: var(--accent-blush);
  border: 1px solid var(--border-color);
  padding: 12px 15px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.loyalty-banner-detail i {
  color: var(--gold);
}

.option-group {
  margin-bottom: 20px;
}

.option-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.size-bubbles {
  display: flex;
  gap: 10px;
}

.size-bubble {
  border: 1px solid var(--border-color);
  width: 75px;
  min-width: 75px;
  max-width: 75px;
  min-height: 40px;
  height: auto;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
}

.size-bubble.selected {
  border-color: var(--primary-dark);
  background-color: var(--primary-dark);
  color: var(--text-light);
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-option {
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Pastille de couleur / miniature de la variante dans le sélecteur */
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--swatch, transparent);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  object-fit: cover;
}

.color-swatch-multi {
  background: conic-gradient(#d32f2f, #f2c94c, #2e7d32, #1e5bb8, #7b1fa2, #d32f2f);
}

.color-option.selected {
  border-color: var(--primary-dark);
  background-color: var(--primary-dark);
  color: var(--text-light);
}

/* Drawers (Cart / Wishlist) */
.drawer {
  position: fixed;
  top: 0; right: -420px;
  width: 420px; height: 100%;
  background: var(--card-bg);
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drawer.open {
  right: 0;
}

.drawer-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

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

.drawer-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 30px;
}

.drawer-footer {
  padding: 24px 30px;
  border-top: 1px solid var(--border-color);
}

.close-btn {
  padding: 8px;
  font-size: 20px;
}

/* Cart Item Row */
.cart-item {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}

.cart-item img {
  width: 70px; height: 90px;
  object-fit: cover;
}

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

.cart-item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.cart-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

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

.qty-selector {
  display: flex;
  border: 1px solid var(--border-color);
  align-items: center;
}

.qty-selector button {
  padding: 4px 10px;
  font-size: 12px;
}

.qty-selector span {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(17,17,17,0.7);
  backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-card {
  background: var(--card-bg);
  max-width: 500px;
  width: 100%;
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow-medium);
}

.modal-close {
  position: absolute;
  top: 20px; right: 20px;
}

/* La connexion peut être ouverte depuis n'importe quel thème, notamment le
   catalogue +18. Le bouton ne doit donc jamais hériter d'une couleur qui le
   confond avec le fond de la fenêtre. */
#auth-modal .auth-modal-close {
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ef4444;
  border-radius: 50%;
  background: #211014;
  color: #fff7f7;
  cursor: pointer;
}

#auth-modal .auth-modal-close:hover,
#auth-modal .auth-modal-close:focus-visible {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

#auth-modal .auth-modal-close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 30px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-tab.active {
  color: var(--text-dark);
  border-bottom: 2px solid var(--gold);
}

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

.form-group label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  outline: none;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--gold);
}

.auth-helper-credentials {
  margin-top: 25px;
  background-color: var(--accent-blush);
  padding: 12px;
  font-size: 12px;
  border: 1px dashed var(--border-color);
}

/* Toast Notification */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background-color: var(--primary-dark);
  color: var(--text-light);
  padding: 14px 24px;
  box-shadow: var(--shadow-medium);
  font-size: 13px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Checkout View */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.checkout-section {
  background-color: var(--card-bg);
  padding: 30px;
  box-shadow: var(--shadow-subtle);
  margin-bottom: 30px;
}

.checkout-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.summary-card {
  background-color: var(--card-bg);
  padding: 30px;
  box-shadow: var(--shadow-subtle);
  position: sticky;
  top: 100px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.summary-total {
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-top: 12px;
}

/* Bill Splitting UI */
.split-options {
  border: 1px dashed var(--gold);
  background-color: var(--accent-blush);
  padding: 20px;
  margin-bottom: 25px;
}

/* Order Tracking View */
.tracking-container {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px;
  background-color: var(--card-bg);
  box-shadow: var(--shadow-subtle);
  text-align: center;
}

.timeline {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 15px; left: 5%; width: 90%; height: 2px;
  background-color: var(--border-color);
  z-index: 1;
}

.timeline-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.step-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.timeline-step.active .step-icon {
  background-color: var(--gold);
  color: var(--text-light);
}

.timeline-step.completed .step-icon {
  background-color: var(--primary-dark);
  color: var(--text-light);
}

.step-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Admin Dashboard Portal */
.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 30px;
}

.admin-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.admin-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.admin-tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.admin-tab-btn.active {
  color: var(--primary-dark);
  border-bottom: 2px solid var(--primary-dark);
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.kpi-card {
  background-color: var(--card-bg);
  padding: 24px;
  box-shadow: var(--shadow-subtle);
  border-left: 4px solid var(--gold);
}

.kpi-val {
  font-size: 28px;
  font-weight: 600;
  margin-top: 5px;
}

.kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Admin lists & Supplier Feed Grid */
.supplier-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

.supplier-card {
  background-color: var(--card-bg);
  box-shadow: var(--shadow-subtle);
  display: flex;
  gap: 15px;
  padding: 15px;
}

.supplier-card img {
  width: 90px; height: 115px;
  object-fit: cover;
}

.supplier-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.import-row {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

.import-row input {
  width: 60px;
  padding: 5px;
  border: 1px solid var(--border-color);
}

/* Admin Order Rows */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: var(--card-bg);
  box-shadow: var(--shadow-subtle);
}

.admin-table th, .admin-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.admin-table th {
  background-color: var(--accent-blush);
  font-weight: 600;
}

.admin-table tr:hover {
  background-color: rgba(250, 248, 245, 0.5);
}

/* Database indicator in footer */
.db-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background-color: #ffd6d6;
  color: #c94040;
  margin-top: 10px;
}

.db-status-pill.online {
  background-color: #d1f7d6;
  color: #317a41;
}

/* Footer style adjustments */
/* Le pied de page garde sa couleur propre : c'est un élément global du site,
   pas une extension du catalogue. Il utilise --footer-bg plutôt que
   --primary-dark, que le thème de groupe redéfinit. */
.luxury-footer {
  background-color: var(--footer-bg);
  color: #b8b8b8;
  padding: 80px 30px 40px 30px;
  margin-top: 80px;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 40px;
}

.footer-brand {
  max-width: 400px;
}

.footer-brand h3 {
  color: var(--text-light);
  font-size: 24px;
  margin-bottom: 15px;
}

.footer-brand p {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  background-color: #222222;
  color: var(--text-light);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons a:hover {
  background-color: var(--gold);
}

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

.footer-links h4 {
  color: var(--text-light);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 13px;
}

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

.footer-bottom {
  max-width: 1400px;
  margin: 30px auto 0 auto;
  text-align: center;
  font-size: 11px;
}

.admin-portal-link {
  color: var(--gold);
}

.admin-portal-link:hover {
  text-decoration: underline;
  color: var(--gold-hover) !important;
}

@media(max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .detail-grid, .checkout-grid {
    grid-template-columns: 1fr;
  }

  .detail-info {
    width: 100%;
    justify-self: stretch;
  }

  .size-bubbles {
    flex-wrap: wrap !important;
  }
  
  .drawer {
    width: 100%;
    right: -100%;
  }

  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: clamp(26px, 7vw, 40px); }
  .hero-content p { font-size: 14px; margin-bottom: 20px; }
}

/* =========================================================
   CHATBOT STYLES
   ========================================================= */
.chatbot-widget {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-family: inherit;
}

.chatbot-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.chatbot-toggle:hover {
  transform: scale(1.08);
  background: var(--gold-hover);
}

.chatbot-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 330px;
  height: 430px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-deep);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeInChat 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

.chatbot-header {
  background: var(--primary-dark);
  padding: 15px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39b54a;
  display: inline-block;
  box-shadow: 0 0 5px #39b54a;
}

.chatbot-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #faf8f5;
}

.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg.bot {
  background: white;
  border: 1px solid var(--border-color);
  align-self: flex-start;
  border-bottom-left-radius: 0;
}

.chat-msg.user {
  background: var(--primary-dark);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 0;
}

.chat-msg p {
  margin: 0;
}

.chatbot-footer {
  display: flex;
  border-top: 1px solid var(--border-color);
  background: white;
}

/* 1.0.120 — Indicateur « l'assistant écrit… » pendant l'appel à l'IA.
   La zone de saisie est masquée en JS pendant ce temps (setChatbotPending). */
.chatbot-typing p { display: flex; gap: 5px; align-items: center; }
.chatbot-typing p span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #b59a2a); opacity: .35;
  animation: chatbot-blink 1.1s infinite;
}
.chatbot-typing p span:nth-child(2) { animation-delay: .18s; }
.chatbot-typing p span:nth-child(3) { animation-delay: .36s; }
@keyframes chatbot-blink {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.chatbot-footer input {
  flex-grow: 1;
  border: none;
  padding: 12px 15px;
  font-size: 13px;
  outline: none;
  background: white;
}

.chatbot-send-btn {
  background: none;
  border: none;
  padding: 0 15px;
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.chatbot-send-btn:hover {
  color: var(--gold-hover);
}

/* Chatbot Product Search Layout */
.chat-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

.chat-product-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #faf8f5;
  border: 1px solid var(--border-color);
  padding: 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--primary-dark);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-product-item:hover {
  transform: translateY(-2.5px);
  border-color: var(--gold);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.chat-product-img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: white;
}

.chat-product-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-product-title {
  font-size: 11.5px;
  font-weight: 600;
  margin: 0;
  color: var(--primary-dark);
  line-height: 1.3;
}

.chat-product-price {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-top: 3px;
}
/* Catalog group theme: adult space is deliberately distinct but keeps the
   storefront layout and accessibility contrast. */
body.catalog-theme-adult {
  --primary-dark: #f8f2f2;
  --text-main: #fff7f7;
  --text-muted: #d9b8b8;
  --border-color: #5f2027;
  --accent-blush: #351015;
  --gold: #ef4444;
  background: #12090b;
  color: #fff7f7;
}

body.catalog-theme-adult .catalog-container,
body.catalog-theme-adult #app-viewport {
  background: linear-gradient(180deg, #190b0e 0%, #12090b 100%);
}

body.catalog-theme-adult .detail-grid {
  background: #160a0d;
  color: #fff7f7;
}

body.catalog-theme-adult .detail-info,
body.catalog-theme-adult .gallery-container {
  color: #fff7f7;
}

body.catalog-theme-adult .catalog-container .product-card,
body.catalog-theme-adult .catalog-container .filter-bar,
body.catalog-theme-adult .catalog-container [style*="background: white"],
body.catalog-theme-adult .catalog-container [style*="background:white"] {
  background: #211014 !important;
  color: #fff7f7 !important;
  border-color: #5f2027 !important;
}

body.catalog-theme-adult .catalog-container input,
body.catalog-theme-adult .catalog-container select {
  background: #fff;
  color: #2b0b10;
}

body.catalog-theme-adult .catalog-group-button[data-group="adult"] {
  background: #b91c1c;
  border-color: #ef4444;
  color: white;
}

/* Complete, configurable catalog-group theme. It follows the visitor from the
   catalog into the associated product page, including header and footer. */
body.catalog-group-theme {
  --primary-dark: var(--group-text);
  --text-dark: var(--group-text);
  --text-muted: var(--group-muted);
  --gold: var(--group-accent);
  --gold-hover: var(--group-accent);
  --accent-blush: color-mix(in srgb, var(--group-accent) 12%, var(--group-surface));
  --border-color: color-mix(in srgb, var(--group-accent) 32%, var(--group-surface));
  --card-bg: var(--group-surface);
  --bg-color: var(--group-bg);
  background: var(--group-bg);
  color: var(--group-text);
}

/* Le pied de page est volontairement exclu : il reste identique sur tout le
   site, quel que soit le groupe de catalogue consulté. */
body.catalog-group-theme .luxury-header,
body.catalog-group-theme #app-viewport,
body.catalog-group-theme .catalog-container,
body.catalog-group-theme .detail-grid {
  background: var(--group-bg) !important;
  color: var(--group-text) !important;
  border-color: var(--border-color) !important;
}

body.catalog-group-theme .luxury-header {
  background: color-mix(in srgb, var(--group-bg) 94%, transparent) !important;
}

body.catalog-group-theme .logo-title,
body.catalog-group-theme .nav-links a,
body.catalog-group-theme .header-actions,
body.catalog-group-theme .catalog-container h1,
body.catalog-group-theme .catalog-container h2,
body.catalog-group-theme .catalog-container h3,
body.catalog-group-theme .product-title,
body.catalog-group-theme .product-price,
body.catalog-group-theme .detail-info,
body.catalog-group-theme .detail-info h1,
body.catalog-group-theme .detail-info h2,
body.catalog-group-theme .detail-info h3 {
  color: var(--group-text) !important;
}

body.catalog-group-theme .header-actions .lang-btn,
body.catalog-group-theme .header-actions .icon-btn {
  background: var(--group-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme .header-actions .lang-dropdown {
  background: var(--group-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--group-text) !important;
  min-width: 120px;
}

body.catalog-group-theme .header-actions .lang-dropdown button {
  background: transparent !important;
  color: var(--group-text) !important;
  padding: 10px 12px;
  text-align: left;
}

body.catalog-group-theme .header-actions .lang-dropdown button:hover,
body.catalog-group-theme .header-actions .lang-btn:hover,
body.catalog-group-theme .header-actions .icon-btn:hover {
  background: color-mix(in srgb, var(--group-accent) 18%, var(--group-surface)) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme .catalog-container .product-card,
body.catalog-group-theme .catalog-container .filter-bar,
body.catalog-group-theme .catalog-container .catalog-filter-panel,
body.catalog-group-theme .catalog-container [style*="background: white"],
body.catalog-group-theme .catalog-container [style*="background:white"],
body.catalog-group-theme .detail-info [style*="background"],
body.catalog-group-theme .gallery-container {
  background: var(--group-surface) !important;
  color: var(--group-text) !important;
  border-color: var(--border-color) !important;
}

/* Les filtres ont leur propre fond blanc dans le thème standard. Sans cette
   règle, le groupe adulte applique bien un texte clair mais le laisse sur ce
   fond blanc, donc presque invisible. Le sélecteur inclut `.catalog-container`
   pour rester prioritaire sur l'override générique du template premium
   (`.catalog-sidebar > div`). */
body.catalog-group-theme .catalog-container .catalog-filter-panel h3,
body.catalog-group-theme .catalog-container .catalog-filter-panel label,
body.catalog-group-theme .catalog-container .catalog-filter-panel span,
body.catalog-group-theme .catalog-container .catalog-filter-panel strong {
  color: var(--group-text) !important;
}

body.catalog-group-theme .catalog-container .catalog-filter-panel small {
  color: var(--group-muted) !important;
}

body.catalog-group-theme .catalog-container .catalog-filter-panel input[type="checkbox"] {
  accent-color: var(--group-accent);
}

body.catalog-group-theme .catalog-container .catalog-filter-panel label:has(input:disabled) {
  color: var(--group-muted) !important;
  opacity: .72;
}

/* Garde-fou +18 : la surface du groupe est configurable en administration et
   peut avoir été enregistrée en blanc alors que son texte est clair. Pour cet
   espace précis, les filtres restent toujours sur la palette sombre adulte. */
body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel {
  background: #211014 !important;
  color: #fff7f7 !important;
  border-color: #5f2027 !important;
}

body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel h3,
body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel label,
body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel span,
body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel strong {
  color: #fff7f7 !important;
}

body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel small,
body.catalog-theme-adult.catalog-group-theme .catalog-container .catalog-filter-panel label:has(input:disabled) {
  color: #d9b8b8 !important;
}

body.catalog-group-theme .catalog-group-description {
  color: var(--group-muted) !important;
  font-size: 15px;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

.catalog-popular-categories {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.catalog-popular-categories > span {
  color: var(--group-muted, var(--text-muted));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.catalog-popular-categories a {
  border-bottom: 1px solid var(--group-accent, var(--gold));
  color: var(--group-text, var(--text-dark));
  font-size: 12px;
  padding: 3px 2px;
}

.catalog-popular-buttons {
  gap: 12px;
  margin-top: 26px;
}

.catalog-popular-buttons a {
  background: transparent;
  border: 1px solid var(--group-accent, var(--gold));
  color: var(--group-text, var(--text-dark));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  min-width: 150px;
  padding: 11px 18px;
  text-align: center;
  text-transform: uppercase;
}

.catalog-popular-buttons a:hover {
  background: var(--group-accent, var(--gold));
  color: var(--group-surface, #fff);
}

body.catalog-group-theme .catalog-group-button {
  border-color: var(--group-accent) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme .catalog-group-button[data-group] {
  background: transparent;
}

body.catalog-group-theme .catalog-group-button[data-group="adult"],
body.catalog-group-theme .catalog-group-button.gold-btn {
  background: var(--group-accent) !important;
  color: var(--group-surface) !important;
}

body.catalog-group-theme input,
body.catalog-group-theme select,
body.catalog-group-theme textarea {
  background: var(--group-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme input::placeholder,
body.catalog-group-theme textarea::placeholder {
  color: var(--group-muted) !important;
  opacity: 1;
}

body.catalog-group-theme select option {
  background: var(--group-surface);
  color: var(--group-text);
}

/* Fiche produit : contraste inversé du groupe.
   Fond = couleur du texte du groupe, texte = couleur du fond du groupe
   (blanc sur noir ou noir sur blanc selon la config du module store categories). */
body.catalog-group-theme .size-bubble,
body.catalog-group-theme .color-option {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme .size-bubble.selected,
body.catalog-group-theme .color-option.selected {
  background-color: var(--group-text) !important;
  border-color: var(--group-text) !important;
  color: var(--group-bg) !important;
}

/* La pastille garde sa vraie couleur ; seule sa bordure suit le thème */
body.catalog-group-theme .color-swatch {
  border-color: color-mix(in srgb, var(--group-text) 40%, transparent);
}

/* Bouton panier : le texte prend la couleur opposée au fond */
body.catalog-group-theme .gold-btn {
  background-color: var(--group-text) !important;
  border-color: var(--group-text) !important;
  color: var(--group-bg) !important;
}

body.catalog-group-theme .gold-btn:hover {
  background-color: transparent !important;
  color: var(--group-text) !important;
}

/* Bouton live chat : fond aux couleurs du groupe (noir sur le groupe Adulte) */
body.catalog-group-theme #visitor-chat-toggle {
  background: var(--group-bg) !important;
  border: 1px solid var(--group-accent) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme #visitor-chat-panel {
  background: var(--group-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--group-text) !important;
}

body.catalog-group-theme #visitor-chat-panel > div:first-child {
  background: var(--group-bg) !important;
  color: var(--group-text) !important;
}

@media (max-width: 720px) {
  .catalog-popular-categories { align-items: flex-start; flex-direction: column; }
}

/* Sous-menu Accueil : cartes-boutiques (multi-boutique) */
.nav-shops { position: relative; display: inline-block; }
.nav-shops > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-shops-menu {
  position: absolute; top: 100%; left: 0; z-index: 200;
  display: none; min-width: 260px; padding: 8px;
  background: #fff; border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,.12); border-radius: 8px;
}
.nav-shops:hover .nav-shops-menu { display: block; }
.nav-shop-card {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 6px; text-decoration: none; color: var(--text-color, #181411);
}
.nav-shop-card:hover { background: var(--accent-blush, #fafafa); }
.nav-shop-img {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 6px;
  background-size: cover; background-position: center; background-color: var(--gold, #b59a2a);
}
.nav-shop-txt { display: flex; flex-direction: column; line-height: 1.25; }
.nav-shop-txt strong { font-size: 13px; }
.nav-shop-txt small { font-size: 11px; color: var(--text-muted, #766e68); }

/* Tableau du guide des tailles (fournisseur importé, ex. Matterhorn) */
.size-guide-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.size-guide-table th, .size-guide-table td { border: 1px solid var(--border-color, #e5ded7); padding: 6px 10px; text-align: center; }
.size-guide-table th { background: var(--bg-color, #faf9f6); font-weight: 600; }
.size-guide-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
/* Formulaire des grilles de livraison : champs lisibles à gauche, action
   persistante à droite. Le retour d'erreur reste dans le modal afin qu'une
   validation ou une panne de base ne ressemble jamais à un clic sans effet. */
.shipping-rate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px 18px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--gold) 5%, #fff);
}

.shipping-rate-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(105px, 1fr));
  gap: 12px;
  min-width: 0;
}

.shipping-rate-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.shipping-rate-field > span:first-child {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.shipping-rate-field input,
.shipping-rate-field select,
.shipping-rate-field #rate-region-field,
.shipping-rate-field #rate-region-field > * {
  width: 100%;
  min-width: 0;
}

.shipping-rate-field-wide { grid-column: span 1; }

.shipping-rate-action {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.shipping-rate-action .gold-btn {
  display: inline-flex;
  width: 190px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
}

.shipping-rate-action .gold-btn:disabled { opacity: .65; cursor: wait; }

.shipping-rate-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: -5px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

.shipping-rate-status.error { color: #b42318; font-weight: 600; }

@media (max-width: 1050px) {
  .shipping-rate-form { grid-template-columns: 1fr; }
  .shipping-rate-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipping-rate-action .gold-btn { width: 100%; }
}

@media (max-width: 620px) {
  .shipping-rate-fields { grid-template-columns: 1fr; }
}

/* Le formulaire des seuils reste entièrement visible dans sa fenêtre. */
.free-threshold-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 15px;
  min-width: 0;
}
.free-threshold-form > * { min-width: 0; }
.free-threshold-form .gold-btn { margin: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .free-thresholds-modal { padding: 22px 16px !important; }
  .free-threshold-form { grid-template-columns: 1fr; }
  .free-threshold-form .gold-btn { width: 100%; }
}