/*
Theme Name:   Roll-lux 2026
Theme URI:    https://staging.roll-lux.com/
Description:  Thème enfant Divi pour la refonte roll-lux.com 2026 — basé sur la maquette éditoriale Roll-Lux (cream + red + Hanken Grotesk + DM Serif Display).
Author:       Cyril Kreff
Version:      0.6.1
Template:     Divi
Text Domain:  rolllux-2026
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg:        #FAF7F1;
  --surface:   #F5F1EA;
  --surface-2: #EDE6D8;
  --surface-3: #E4DBC9;
  --border:    #DDD3BD;
  --border-l:  #E8E0CB;
  --border-strong: #C9BC9F;

  --ink:       #131313;
  --text:      #1A1A1A;
  --muted:     #6E6A60;
  --soft:      #9F998C;

  --primary:   #C9302C;
  --primary-h: #94221E;
  --primary-l: #FBE7E5;
  --accent:    #1A1A1A;
  --accent-l:  #ECE6D8;
  --success:   #2F7D5B;
  --success-l: #E3F2EA;
  --sale:      #C9302C;
  --sale-l:    #FBE7E5;
  --star:      #F3C53A;

  --font:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-edit: 'DM Serif Display', 'Georgia', serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(19, 19, 19, .04);
  --shadow-md: 0 4px 14px rgba(19, 19, 19, .06);
  --shadow-lg: 0 12px 36px rgba(19, 19, 19, .08);
}

/* ============================================================
   BASE
   ============================================================ */
body.rolllux-2026 {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rolllux-2026 img { max-width: 100%; display: block; }
.rolllux-2026 button:not([class*="rl-btn"]):not(.button):not([class*="add_to_cart"]) { font-family: inherit; cursor: pointer; border: none; background: none; }
.rolllux-2026 button { font-family: inherit; cursor: pointer; }
.rolllux-2026 a { color: inherit; text-decoration: none; }
.rolllux-2026 input, .rolllux-2026 select, .rolllux-2026 textarea { font-family: inherit; font-size: inherit; }
.rolllux-2026 ::selection { background: var(--primary); color: white; }

.rl-container { max-width: 1480px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   LOGO
   ============================================================ */
.rl-logo {
  font-family: var(--font-edit);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap; /* garde le logo + tagline sur une seule ligne (fix escalier #1) */
  flex-shrink: 0;
}
.rl-logo .ring {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border: 2.2px solid var(--primary);
  border-radius: 50%;
  margin: 0 0.01em;
  vertical-align: -0.05em;
}
.rl-logo small {
  font-family: var(--font);
  font-weight: 500;
  font-size: 10px;
  color: var(--muted);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.rl-btn-primary { background: var(--primary); color: white; }
.rl-btn-primary:hover { background: var(--primary-h); color: white; }
.rl-btn-light { background: var(--surface); color: var(--ink); }
.rl-btn-light:hover { background: var(--surface-2); }
.rl-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.rl-btn-outline:hover { background: var(--ink); color: white; border-color: var(--ink); }
.rl-btn-ghost { background: transparent; color: var(--ink); }
.rl-btn-ghost:hover { background: var(--surface); }
.rl-btn-block { width: 100%; }
.rl-btn-lg { padding: 16px 26px; font-size: 15px; }
.rl-btn svg { width: 16px; height: 16px; stroke-width: 1.8; fill: none; stroke: currentColor; }

/* ============================================================
   BADGES / CHIPS / RATING
   ============================================================ */
.rl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rl-badge-sale { background: var(--sale); color: white; }
.rl-badge-new  { background: var(--ink); color: white; }
.rl-badge-lim  { background: var(--accent); color: white; }
.rl-badge-bs   { background: var(--surface-2); color: var(--ink); }
.rl-badge-stock-low { background: var(--accent-l); color: var(--accent); }
.rl-badge-stock-ok  { background: var(--success-l); color: var(--success); }
.rl-badge-oos  { background: var(--ink); color: #fff; opacity: .9; }

.rl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: white;
  cursor: pointer;
  transition: all .2s ease;
}
.rl-chip:hover { border-color: var(--ink); }
.rl-chip.active { background: var(--ink); color: white; border-color: var(--ink); }
.rl-chip .count { color: var(--soft); font-size: 12px; }
.rl-chip.active .count { color: rgba(255,255,255,.7); }

.rl-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.rl-stars { color: var(--star); letter-spacing: 1px; }

.rl-label-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   PROMO BAR
   ============================================================ */
.rl-promo-bar {
  background: var(--ink);
  color: white;
  text-align: center;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.rl-promo-bar strong { font-weight: 700; }
.rl-promo-bar .sep { opacity: .4; margin: 0 14px; }

/* ============================================================
   HEADER
   ============================================================ */
.rl-site-header {
  background: white;
  border-bottom: 1px solid var(--border-l);
  position: sticky; top: 0; z-index: 90;
}
.rl-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 32px;
  gap: 32px;
  max-width: 1480px;
  margin: 0 auto;
}
.rl-main-nav {
  display: flex; gap: 28px;
  justify-self: center;
  font-size: 14px;
  font-weight: 500;
}
.rl-main-nav a {
  padding: 6px 0;
  position: relative;
  color: var(--text);
  transition: color .2s ease;
}
.rl-main-nav a:hover { color: var(--primary); }
.rl-main-nav a.has-sale { color: var(--sale); font-weight: 600; }

.rl-nav-item { position: relative; }
.rl-nav-item.has-mega > a { display: inline-flex; align-items: center; }

.rl-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: white;
  border: 1px solid var(--border-l);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px;
  min-width: 920px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.rl-nav-item.has-mega:hover .rl-mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.rl-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.9fr;
  gap: 30px;
}
.rl-mega-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 700;
}
.rl-mega-col ul { list-style: none; padding: 0; margin: 0; }
.rl-mega-col li { margin-bottom: 9px; }
.rl-mega-col a { font-size: 13.5px; color: var(--text); font-weight: 500; transition: color .15s ease; }
.rl-mega-col a:hover { color: var(--primary); }

.rl-mega-feature {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--surface);
}
.rl-mega-feature img { width: 100%; height: 100%; object-fit: cover; }
.rl-mega-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,.7) 100%);
}
.rl-mega-feature-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  color: white;
  z-index: 2;
}
.rl-mega-feature-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
  color: #F5DCC0;
  font-weight: 600;
}
.rl-mega-feature-title {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.rl-mega-feature-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid white;
  padding-bottom: 2px;
}

.rl-header-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.rl-search-box {
  display: flex; align-items: center;
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px 8px 16px;
  width: 230px;
  transition: width .3s ease, background .2s ease;
}
.rl-search-box:hover, .rl-search-box:focus-within { background: var(--surface-2); width: 290px; }
.rl-search-box svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.rl-search-box input {
  flex: 1; border: none; background: none; outline: none;
  margin-left: 10px;
  font-size: 14px;
  color: var(--ink);
}
.rl-search-box input::placeholder { color: var(--soft); }

.rl-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  position: relative;
  transition: background .2s ease;
}
.rl-icon-btn:hover { background: var(--surface); }
.rl-icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rl-icon-btn .num {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--accent);
  color: white;
  width: 17px; height: 17px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.rl-hero { padding: 32px 0 60px; }
.rl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.rl-hero-main {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 5/4;
  background: var(--surface);
}
.rl-hero-main img { width: 100%; height: 100%; object-fit: cover; }
.rl-hero-main::after {
  content: '';
  position: absolute; inset: 0;
  /* Scrim renforcé bas+gauche : garantit la lisibilité du h1/CTA blancs sur
     image claire (gift box fond beige), tout en gardant le produit visible à droite. */
  background:
    linear-gradient(90deg, rgba(8,8,8,.60) 0%, rgba(8,8,8,.24) 44%, rgba(8,8,8,0) 72%),
    linear-gradient(0deg, rgba(8,8,8,.80) 0%, rgba(8,8,8,.34) 46%, rgba(8,8,8,0) 82%);
}
.rl-hero-main-overlay {
  position: absolute;
  bottom: 0; left: 0;
  padding: 44px;
  color: white;
  z-index: 2;
  max-width: 580px;
  text-shadow: 0 1px 22px rgba(0,0,0,.30);
}
.rl-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.rl-hero-pill .dot { width: 6px; height: 6px; background: #C9F25B; border-radius: 50%; }
.rl-hero-main h1 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  color: white;
}
.rl-hero-main h1 em {
  font-family: var(--font-edit);
  font-weight: 400;
  font-style: italic;
  color: #F5DCC0;
  font-size: 1.05em;
}
.rl-hero-main .lead {
  font-size: 16px;
  opacity: .9;
  margin-bottom: 26px;
  max-width: 440px;
}
.rl-hero-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}
.rl-hero-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform .4s ease;
}
.rl-hero-card:hover { transform: translateY(-3px); }
.rl-hero-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s ease;
}
.rl-hero-card:hover img { transform: scale(1.05); }
.rl-hero-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.55) 100%);
}
.rl-hero-card-inner {
  position: relative;
  z-index: 2;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
}
.rl-hero-card .small-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: .9;
  margin-bottom: 8px;
}
.rl-hero-card h3 {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: white;
}
.rl-hero-card .arrow { margin-top: 14px; font-size: 13px; font-weight: 600; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.rl-trust-bar {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 22px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1416px;
  margin: 0 auto;
}
.rl-trust-cell { display: flex; align-items: center; justify-content: center; gap: 14px; } /* #28 : bloc icône+texte centré dans sa colonne */
.rl-trust-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}
.rl-trust-icon svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none; stroke: currentColor; }
.rl-trust-cell .t { font-weight: 600; font-size: 14px; }
.rl-trust-cell .s { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ============================================================
   SECTION COMMON
   ============================================================ */
.rl-section { padding: 80px 0 30px; }
.rl-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
}
.rl-section-head h2 {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.rl-section-head h2 em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}
.rl-section-head .sub { color: var(--muted); margin-top: 6px; max-width: 460px; font-size: 14.5px; }
.rl-section-head .link { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.rl-section-head .link:hover { color: var(--primary); }

/* ============================================================
   CATEGORIES CAROUSEL
   ============================================================ */
.rl-cats-scroll {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}
.rl-cat-tile { text-align: center; cursor: pointer; transition: transform .3s ease; }
.rl-cat-tile:hover { transform: translateY(-4px); }
.rl-cat-tile-img {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--border-l);
  transition: border-color .3s ease;
}
.rl-cat-tile:hover .rl-cat-tile-img { border-color: var(--primary); }
.rl-cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.rl-cat-tile .name { font-size: 13px; font-weight: 600; }
.rl-cat-tile .ct { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   FILTER ROW
   ============================================================ */
.rl-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 0 28px;
}
.rl-filter-row .filter-count { font-size: 13px; color: var(--muted); margin-left: auto; }
.rl-filter-row .sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: white;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.rl-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 22px;
}
.rl-pcard { cursor: pointer; position: relative; }
.rl-pcard-img {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.rl-pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.rl-pcard:hover .rl-pcard-img img { transform: scale(1.04); }
.rl-pcard-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  z-index: 2;
}
.rl-pcard-wishlist {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: transform .2s ease;
  border: none;
  cursor: pointer;
}
.rl-pcard-wishlist:hover { transform: scale(1.08); }
.rl-pcard-wishlist svg { width: 17px; height: 17px; stroke: var(--ink); fill: none; stroke-width: 1.6; }
.rl-pcard-wishlist.active svg { fill: var(--sale); stroke: var(--sale); }
.rl-pcard-quick {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  background: var(--ink);
  color: white;
  padding: 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none;
  cursor: pointer;
}
.rl-pcard:hover .rl-pcard-quick { opacity: 1; transform: translateY(0); }
.rl-pcard-quick svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.rl-pcard-cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; font-weight: 500; }
.rl-pcard-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.rl-pcard-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.rl-pcard-price { font-weight: 700; font-size: 15px; }
.rl-pcard-price .strike { color: var(--soft); text-decoration: line-through; font-weight: 500; font-size: 13px; margin-left: 4px; }
.rl-pcard-price .save { color: var(--sale); font-size: 12px; font-weight: 600; margin-left: 4px; }
.rl-pcard-swatches { display: flex; gap: 4px; }
.rl-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-block;
}
.rl-pcard-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
  font-size: 12px;
}
.rl-pcard-bottom .ship { color: var(--success); font-weight: 500; }
.rl-pcard-bottom .pay4 { color: var(--muted); }

/* ============================================================
   LIFESTYLE BANNER
   ============================================================ */
.rl-lifestyle {
  margin: 60px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  height: 480px;
}
.rl-lifestyle-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.rl-lifestyle::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(20, 63, 71, .85) 0%, rgba(20, 63, 71, .25) 70%);
}
.rl-lifestyle-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  color: white;
  padding: 0 60px;
  max-width: 600px;
}
.rl-lifestyle-content .eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #F5DCC0;
  margin-bottom: 18px;
  font-weight: 600;
}
.rl-lifestyle-content h2 {
  font-weight: 500;
  font-size: clamp(36px, 4vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 22px;
  color: white;
}
.rl-lifestyle-content h2 em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: #F5DCC0;
}
.rl-lifestyle-content p {
  font-size: 16px;
  opacity: .9;
  margin-bottom: 28px;
  max-width: 460px;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.rl-reviews-section { background: var(--surface); padding: 80px 0; margin-top: 40px; }
.rl-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.rl-review-card {
  background: white;
  border-radius: var(--r-lg);
  padding: 24px;
  border: 1px solid var(--border-l);
}
.rl-review-card .rl-stars { margin-bottom: 14px; font-size: 14px; display: block; }
.rl-review-card .title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.rl-review-card .body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
}
.rl-review-card .author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-l);
}
.rl-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.rl-review-card .av-name { font-weight: 600; font-size: 13px; }
.rl-review-card .av-meta { font-size: 12px; color: var(--muted); }
.rl-review-card .product-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}
.rl-review-card .product-tag .mini-img {
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.rl-review-card .product-tag .mini-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.rl-newsletter { padding: 80px 0 100px; text-align: center; }
.rl-newsletter h2 {
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.rl-newsletter h2 em {
  font-family: var(--font-edit);
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}
.rl-newsletter p {
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 32px;
  font-size: 15px;
}
.rl-newsletter-form {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 5px 5px 5px 18px;
  background: var(--surface);
  border-radius: 999px;
}
.rl-newsletter-form input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14.5px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.rl-site-footer {
  background: var(--ink);
  color: #B5B5B0;
  padding: 70px 0 24px;
  margin-top: 60px;
}
.rl-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.rl-footer-grid .rl-logo { color: white; font-size: 32px; }
.rl-footer-grid .rl-logo small { color: #B5B5B0; border-color: rgba(255,255,255,.15); }
.rl-footer-bio { margin-top: 18px; font-size: 14px; line-height: 1.6; max-width: 320px; }
.rl-footer-social { display: flex; gap: 10px; margin-top: 22px; }
.rl-footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: white;
  transition: background .25s ease;
}
.rl-footer-social a:hover { background: var(--primary); }
.rl-footer-social svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.rl-footer-col h4 {
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
  font-weight: 600;
}
.rl-footer-col ul { list-style: none; padding: 0; margin: 0; }
.rl-footer-col li { margin-bottom: 10px; font-size: 14px; }
.rl-footer-col a:hover { color: white; }
.rl-footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
}
.rl-footer-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-footer-pays span {
  background: rgba(255,255,255,.08);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
}

/* ============================================================
   PDP — PRODUCT DETAIL PAGE
   ============================================================ */
.rl-pdp-breadcrumb { padding: 18px 0; font-size: 13px; color: var(--muted); }
.rl-pdp-breadcrumb a:hover { color: var(--ink); }
.rl-pdp-breadcrumb .sep { margin: 0 8px; }

.rl-pdp-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}

.rl-pdp-gallery { display: flex; gap: 16px; }
.rl-pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 80px;
  flex-shrink: 0;
}
.rl-pdp-thumb {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .2s ease;
}
.rl-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rl-pdp-thumb.active { border-color: var(--ink); }
.rl-pdp-thumb:hover { border-color: var(--border-strong); }
.rl-pdp-thumb.active:hover { border-color: var(--ink); }
.rl-pdp-main-img {
  flex: 1;
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.rl-pdp-main-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.rl-pdp-main-img .zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  /* Pastille sombre translucide : lisible quelle que soit la couleur de la photo.
     !important car un style global (Divi/WC sur les <button>) écrasait le fond en
     clair → texte blanc invisible sur les images à fond blanc. */
  background: rgba(19,19,19,.74) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  cursor: zoom-in;
  transition: background .15s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.rl-pdp-main-img .zoom:hover { background: rgba(19,19,19,.9) !important; }
.rl-pdp-main-img .zoom svg { width: 14px; height: 14px; stroke: #fff !important; fill: none; stroke-width: 1.8; }

/* Galerie produit — flèches de navigation (affordance « swipe », mobile/tablette).
   !important sur le fond car un style global (Divi/WC sur les <button>) l'écrase
   sinon en clair (même cas que le bouton Zoom). */
.rl-pdp-main-img .rl-gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50% !important;
  background: rgba(19,19,19,.42) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; opacity: .92; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background .15s ease, opacity .15s ease;
}
.rl-pdp-main-img .rl-gal-nav:hover { background: rgba(19,19,19,.74) !important; opacity: 1; }
.rl-pdp-main-img .rl-gal-nav:active { transform: translateY(-50%) scale(.92); }
.rl-pdp-main-img .rl-gal-prev { left: 10px; }
.rl-pdp-main-img .rl-gal-next { right: 10px; }
.rl-pdp-main-img .rl-gal-nav svg { width: 18px; height: 18px; stroke: #fff !important; fill: none; stroke-width: 2.2; }
/* Desktop déjà validé (vignettes en colonne visibles) → flèches seulement ≤1100 */
@media (min-width: 1101px) { .rl-pdp-main-img .rl-gal-nav { display: none; } }

/* Hint « swipe » one-shot : léger rebond horizontal au tout 1er affichage mobile */
.rl-pdp-main-img.rl-hint-on img { animation: rlSwipeHint 1.15s ease 2; }
@keyframes rlSwipeHint {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(-22px); }
  70%      { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rl-pdp-main-img.rl-hint-on img { animation: none !important; }
}

/* Lightbox image (zoom plein écran, sans plugin) */
.rl-img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  box-sizing: border-box; /* sinon padding 4vw + inset:0 → déborde le viewport */
  display: none; align-items: center; justify-content: center;
  background: rgba(19,19,19,.88);
  padding: 4vw;
  cursor: zoom-out;
}
.rl-img-lightbox.open { display: flex; }
.rl-img-lightbox img {
  max-width: 92vw; max-height: 90vh;
  width: auto; height: auto;
  border-radius: var(--r-md, 8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  cursor: default;
}
.rl-img-lightbox .rl-lb-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px;
}

/* PDP rupture de stock : CTA wishlist à la place de l'add-to-cart (#9) */
.rl-pdp-oos { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rl-pdp-oos-badge { align-self: flex-start; }
.rl-pdp-wishlist-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box; /* .rl-btn est en content-box → width:100% + padding débordait (scroll horizontal mobile) */
  width: 100%;
  white-space: normal;
}
.rl-pdp-wishlist-cta svg { width: 18px; height: 18px; }
.rl-pdp-wishlist-cta.active svg { fill: currentColor; }
.rl-pdp-oos-note { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

/* #10 — sélecteur de pack custom (PDP) */
.rl-pack-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* !important : bat le reset thème button:not([class*=rl-btn])… (spécificité 0,4,1) */
.rl-pack-opt {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 92px; padding: 10px 14px !important;
    background: #fff !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-md, 10px) !important;
    cursor: pointer; text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.rl-pack-opt:hover { border-color: var(--border-strong) !important; }
.rl-pack-opt.active { border-color: var(--ink) !important; background: var(--surface) !important; }
.rl-pack-opt-label { font-weight: 700; font-size: 14px; color: var(--ink); }
.rl-pack-opt-price { font-size: 12.5px; color: var(--muted); }
.rl-pack-opt-price del { color: var(--soft); }
.rl-pack-opt-price ins { text-decoration: none; color: var(--sale); }
.rl-pack-opt.oos { opacity: .55; }
.rl-pack-opt-oos { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--sale); font-weight: 700; }
.rl-pdp-add.rl-disabled { opacity: .5; pointer-events: none; }

/* #12 — estimation de livraison façon Amazon (PDP) */
.rl-pdp-delivery {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 16px 0 4px; padding: 12px 14px;
    background: var(--success-l, #E3F2EA); border-radius: var(--r-md, 10px);
}
.rl-pdp-delivery-ico svg { width: 20px; height: 20px; stroke: var(--success, #2F7D5B); fill: none; stroke-width: 1.7; }
.rl-pdp-delivery-txt { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.rl-deliv-std strong { font-weight: 700; }
.rl-deliv-dates { color: var(--success, #2F7D5B); font-weight: 700; }
.rl-deliv-express { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rl-deliv-express strong { color: var(--ink); font-weight: 600; }
.rl-pdp-badges-row {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; gap: 6px;
  z-index: 2;
}

.rl-pdp-brand {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 12px;
}
.rl-pdp-title {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.rl-pdp-rating-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.rl-pdp-rating-row .reviews-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted);
  font-size: 13px;
}
.rl-pdp-rating-row .sold {
  background: var(--surface-2);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.rl-pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}
.rl-pdp-price {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.rl-pdp-price-strike { font-size: 18px; color: var(--soft); text-decoration: line-through; }
.rl-pdp-price-save {
  background: var(--sale-l);
  color: var(--sale);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}
.rl-pdp-pay-in-4 {
  margin: 6px 0 26px;
  font-size: 13.5px;
  color: var(--muted);
}
.rl-pdp-pay-in-4 strong { color: var(--ink); font-weight: 600; }
.rl-pdp-pay-in-4 .pay-logo {
  display: inline-block;
  background: var(--ink);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  margin: 0 4px;
  letter-spacing: 0.05em;
}

.rl-pdp-section { margin-bottom: 26px; }
.rl-pdp-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.rl-pdp-section-title .selected {
  color: var(--muted);
  font-weight: 500;
  margin-left: 8px;
}
.rl-pdp-colors { display: flex; gap: 10px; }
.rl-color-opt {
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform .2s ease;
}
.rl-color-opt:hover { transform: scale(1.08); }
.rl-color-opt.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.rl-pdp-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.rl-size-opt {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: white;
  transition: all .2s ease;
}
.rl-size-opt:hover { border-color: var(--ink); }
.rl-size-opt.active { background: var(--ink); color: white; border-color: var(--ink); }
.rl-size-opt.oos { color: var(--soft); text-decoration: line-through; cursor: not-allowed; }

.rl-pdp-qty-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
.rl-qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.rl-qty-stepper button {
  width: 44px; height: 48px;
  font-size: 18px;
  color: var(--ink);
  background: white;
  transition: background .2s ease;
}
.rl-qty-stepper button:hover { background: var(--surface); }
.rl-qty-stepper .val {
  padding: 0 14px;
  font-weight: 700;
  font-size: 15px;
  min-width: 30px;
  text-align: center;
}
.rl-qty-stepper.small button { width: 32px; height: 36px; font-size: 15px; }
.rl-qty-stepper.small .val { padding: 0 8px; font-size: 13px; }

.rl-pdp-actions { display: flex; gap: 8px; margin-bottom: 22px; }
.rl-pdp-add { flex: 1; padding: 16px 22px; font-size: 15px; }
.rl-pdp-icon-btn {
  width: 48px; height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: white;
  transition: all .2s ease;
  cursor: pointer;
}
.rl-pdp-icon-btn:hover { border-color: var(--ink); background: var(--surface); }
.rl-pdp-icon-btn svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.6; }

.rl-pdp-trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--r-lg);
  margin-bottom: 28px;
}
.rl-pdp-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rl-pdp-trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); stroke: currentColor; fill: none; stroke-width: 1.7; }
.rl-pdp-trust-item strong { font-weight: 600; }

.rl-pdp-acc { border-top: 1px solid var(--border); }
.rl-pdp-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
  font-size: 15px;
}
.rl-pdp-acc summary::-webkit-details-marker { display: none; }
.rl-pdp-acc summary::after {
  content: '+';
  font-weight: 300;
  font-size: 22px;
  transition: transform .2s ease;
}
.rl-pdp-acc[open] summary::after { content: '–'; }
.rl-pdp-acc-body {
  padding: 0 0 22px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.rl-pdp-acc-body p { margin-bottom: 12px; }
.rl-pdp-acc-body ul { padding-left: 18px; }
.rl-pdp-acc-body li { margin-bottom: 6px; }

.rl-pdp-reviews-section {
  padding: 70px 0;
  border-top: 1px solid var(--border-l);
}
.rl-pdp-reviews-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  margin-bottom: 40px;
}
.rl-rating-summary { padding: 24px; background: var(--surface); border-radius: var(--r-lg); }
.rl-rating-summary .big {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rl-rating-summary .big small { font-size: 22px; color: var(--muted); font-weight: 500; }
.rl-rating-summary .stars-big {
  color: var(--star);
  font-size: 18px;
  letter-spacing: 2px;
  margin: 8px 0 10px;
}
.rl-rating-summary .total { font-size: 13px; color: var(--muted); }

.rl-rating-bars { display: grid; gap: 10px; }
.rl-rating-bar { display: grid; grid-template-columns: 50px 1fr 50px; gap: 12px; align-items: center; font-size: 13px; }
.rl-rating-bar .bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.rl-rating-bar .bar-fill {
  height: 100%;
  background: var(--star);
  border-radius: 4px;
}
.rl-rating-bar .count { color: var(--muted); text-align: right; }

.rl-may-like { padding: 50px 0 20px; }

/* ============================================================
   CART
   ============================================================ */
.rl-cart-head { padding: 30px 0; }
.rl-cart-head h1 {
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.rl-cart-head h1 em { font-family: var(--font-edit); font-style: italic; font-weight: 400; color: var(--primary); }
.rl-cart-head p { color: var(--muted); font-size: 14.5px; }

.rl-cart-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 50px;
  padding-bottom: 80px;
}
.rl-cart-items { display: grid; gap: 18px; }
.rl-cart-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border-l);
  border-radius: var(--r-lg);
  background: white;
}
.rl-cart-item-img {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rl-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.rl-cart-item-info .cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 4px; }
.rl-cart-item-info h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.rl-cart-item-variant {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.rl-cart-item-variant span { color: var(--ink); font-weight: 500; }
.rl-cart-item-actions { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--muted); }
.rl-cart-item-actions a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.rl-cart-item-actions a:hover { color: var(--ink); }
.rl-cart-item-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.rl-cart-item-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.rl-cart-item-price { font-weight: 700; font-size: 17px; }
.rl-cart-item-strike { font-size: 13px; color: var(--soft); text-decoration: line-through; margin-bottom: 2px; }

.rl-cart-promo-strip {
  background: var(--success-l);
  color: var(--success);
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.rl-cart-promo-strip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rl-cart-promo-strip strong { font-weight: 700; }

.rl-cart-summary {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  position: sticky;
  top: 100px;
  height: max-content;
}
.rl-cart-summary h3 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.rl-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  font-size: 14.5px;
}
.rl-summary-row .label { color: var(--muted); }
.rl-summary-row .label.with-info { display: inline-flex; align-items: center; gap: 5px; }
.rl-summary-row .label .info-icon {
  width: 14px; height: 14px;
  background: var(--surface-2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--muted);
}
.rl-summary-row .v { font-weight: 600; }
.rl-summary-row .v.free { color: var(--success); }
.rl-summary-row.total {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 8px;
  font-size: 18px;
}
.rl-summary-row.total .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.rl-promo-input {
  display: flex; gap: 6px;
  margin: 16px 0 22px;
}
.rl-promo-input input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  outline: none;
  background: white;
  font-size: 13.5px;
}
.rl-promo-input input:focus { border-color: var(--ink); }
.rl-promo-input button {
  padding: 12px 16px;
  background: var(--ink);
  color: white;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 13px;
}
.rl-applied-promo {
  background: white;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 16px;
  border: 1px dashed var(--success);
}
.rl-applied-promo .code { font-weight: 700; color: var(--success); }
.rl-applied-promo .remove { color: var(--muted); cursor: pointer; font-size: 12px; }
.rl-cart-trust-list { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.rl-cart-trust-list div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.rl-cart-trust-list svg { width: 16px; height: 16px; color: var(--primary); stroke: currentColor; fill: none; stroke-width: 1.6; }

.rl-cart-suggested { padding: 40px 0 80px; border-top: 1px solid var(--border-l); }

/* ============================================================
   CHECKOUT
   ============================================================ */
.rl-checkout-head { padding: 30px 0 20px; }
.rl-checkout-head h1 {
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.rl-checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
}

.rl-ck-section {
  background: white;
  border: 1px solid var(--border-l);
  border-radius: var(--r-lg);
  padding: 26px;
  margin-bottom: 18px;
}
.rl-ck-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.rl-ck-section-head h3 {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.rl-ck-section-head h3 .num-circle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rl-ck-section-head .edit {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rl-ck-section.done .rl-ck-section-head h3 .num-circle { background: var(--success); }

.rl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.rl-form-row.full { grid-template-columns: 1fr; }
.rl-form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.rl-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.rl-form-group input,
.rl-form-group select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: white;
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s ease;
}
.rl-form-group input:focus, .rl-form-group select:focus { border-color: var(--ink); }
.rl-form-checkbox {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.rl-form-checkbox input { accent-color: var(--primary); }

.rl-ck-done-summary {
  background: var(--surface);
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.rl-ck-done-summary strong { color: var(--ink); font-weight: 600; }

.rl-ship-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.rl-ship-opt:hover { border-color: var(--ink); }
.rl-ship-opt.active { border-color: var(--ink); background: var(--surface); }
.rl-ship-opt input { accent-color: var(--ink); }
.rl-ship-opt .info { flex: 1; }
.rl-ship-opt .info .name { font-weight: 600; font-size: 14.5px; }
.rl-ship-opt .info .desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.rl-ship-opt .info .est { display: block; font-size: 12.5px; color: var(--success); font-weight: 600; margin-top: 3px; }
.rl-ship-opt .price { font-weight: 700; }
.rl-ship-opt .price.free { color: var(--success); }

.rl-pay-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.rl-pay-tab {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: white;
}
.rl-pay-tab.active { border-color: var(--ink); background: var(--ink); color: white; }
.rl-pay-tab .pp-logo {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 16px;
}

.rl-pay-card-form { display: grid; gap: 12px; padding: 4px 0; }
.rl-card-input-row { position: relative; }
.rl-card-input-row .card-icons {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  display: flex; gap: 6px;
}
.rl-card-input-row .card-icons span {
  background: var(--surface);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rl-ck-summary {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky;
  top: 100px;
  height: max-content;
}
.rl-ck-summary h3 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.rl-ck-summary h3 .count { color: var(--muted); font-weight: 500; font-size: 13px; }
.rl-ck-summary-items {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  display: grid; gap: 14px;
}
.rl-ck-mini-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.rl-ck-mini-img {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: white;
  overflow: hidden;
  position: relative;
}
.rl-ck-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.rl-ck-mini-img .q {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--ink);
  color: white;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rl-ck-mini-info .n { font-weight: 600; font-size: 13px; line-height: 1.3; }
.rl-ck-mini-info .v { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rl-ck-mini-price { font-weight: 600; font-size: 14px; }
.rl-place-order-btn {
  width: 100%;
  padding: 18px 22px;
  font-size: 16px;
  margin-top: 20px;
}
.rl-secure-line {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rl-secure-line svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ============================================================
/* ============================================================
   WOOCOMMERCE OVERRIDES (premier pass — à enrichir au fil)
   ============================================================ */
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button {
  background: var(--primary) !important;
  color: white !important;
  border-radius: 999px !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  text-shadow: none !important;
  border: none !important;
  transition: background .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--primary-h) !important; }

.woocommerce .price ins { background: none; }
.woocommerce .price del { color: var(--soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Palier intermédiaire : menu long → on resserre gaps/nav pour garder
   le logo sur une ligne sans débordement avant le burger (#1) */
@media (max-width: 1300px) {
  .rl-header-inner { gap: 20px; padding-left: 22px; padding-right: 22px; }
  .rl-main-nav { gap: 18px; font-size: 13px; }
}
@media (max-width: 1100px) {
  .rl-header-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .rl-main-nav { display: none; }
  .rl-search-box { display: none; }
  .rl-hero-grid { grid-template-columns: 1fr; }
  .rl-hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .rl-trust-bar { grid-template-columns: 1fr 1fr; }
  .rl-cats-scroll { grid-template-columns: repeat(4, 1fr); }
  .rl-products-grid { grid-template-columns: repeat(2, 1fr); }
  .rl-reviews-grid { grid-template-columns: 1fr; }
  .rl-footer-grid { grid-template-columns: 1fr 1fr; }
  .rl-pdp-grid { grid-template-columns: 1fr; gap: 40px; }
  .rl-pdp-gallery { flex-direction: column-reverse; }
  .rl-pdp-thumbs { flex-direction: row; width: 100%; overflow-x: auto; }
  .rl-pdp-thumb { width: 80px; flex-shrink: 0; }
  .rl-cart-grid { grid-template-columns: 1fr; gap: 30px; }
  .rl-cart-summary { position: static; }
  .rl-checkout-grid { grid-template-columns: 1fr; gap: 30px; }
  .rl-ck-summary { position: static; }
}
@media (max-width: 600px) {
  .rl-container { padding: 0 18px; }
  .rl-cats-scroll { grid-template-columns: repeat(3, 1fr); }
  .rl-products-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .rl-pcard-name { font-size: 14px; }
  .rl-reviews-grid { grid-template-columns: 1fr; }
  .rl-footer-grid { grid-template-columns: 1fr; }
  .rl-form-row { grid-template-columns: 1fr; }
  .rl-pay-tabs { grid-template-columns: 1fr; }
  .rl-pdp-title { font-size: 26px; }
  .rl-pdp-price { font-size: 26px; }
  .rl-cart-item { grid-template-columns: 80px 1fr; }
  .rl-cart-item-right { grid-column: span 2; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed var(--border-l); }
}


/* ============================================================
   WC PDP — galerie + résumé : mapping vers notre design
   ============================================================ */

/* Galerie WC : on lui donne le look de notre rl-pdp-gallery */
.rl-pdp .woocommerce-product-gallery {
    position: relative;
    display: flex;
    gap: 16px;
    flex-direction: row-reverse;
    width: 100% !important;
    float: none !important;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px;
    flex-shrink: 0;
    order: 0;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0;
    width: 100%;
    aspect-ratio: 1;
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li:hover { border-color: var(--border-strong); }
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { /* no-op */ }
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li:has(.flex-active) { border-color: var(--ink); }

.rl-pdp .woocommerce-product-gallery__wrapper {
    flex: 1;
    aspect-ratio: 1;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    margin: 0 !important;
}
.rl-pdp .woocommerce-product-gallery__image {
    width: 100%;
    height: 100%;
}
.rl-pdp .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}
.rl-pdp .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.rl-pdp .woocommerce-product-gallery__trigger {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: white;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    z-index: 5;
    box-shadow: var(--shadow-sm);
    text-indent: 0;
    height: auto;
    width: auto;
}

/* Description sous la galerie */
.rl-pdp-description {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-l);
}
.rl-pdp-description-title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.rl-pdp-description-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}
.rl-pdp-description-body p { margin-bottom: 14px; }

/* Short description dans la sidebar */
.rl-pdp-shortdesc {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 22px;
}
.rl-pdp-shortdesc p { margin-bottom: 8px; }

/* Right column = sticky */
.rl-pdp-details {
    position: sticky;
    top: 100px;
    align-self: start;
    height: max-content;
}

/* Add-to-cart form (override WC native) */
.rl-pdp .rl-pdp-cart-form .quantity { display: none !important; } /* défaut WC, on utilise notre stepper */
.rl-pdp .rl-qty-stepper input.val.qty {
    border: none !important;
    background: transparent !important;
    width: 50px !important;
    padding: 0 !important;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    -moz-appearance: textfield;
}
.rl-pdp .rl-qty-stepper input.val.qty::-webkit-outer-spin-button,
.rl-pdp .rl-qty-stepper input.val.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide WC default rating stars (on a notre propre rendu) */
.rl-pdp-details > .woocommerce-product-rating { display: none; }

/* Hide WC product tabs entirely (description est déjà déplacée) */
.rl-pdp .woocommerce-tabs { display: none !important; }

/* Hide product_meta (categories, tags) — on les remontera dans accordions plus tard */
.rl-pdp .product_meta { display: none !important; }

/* Hide WC short_description in summary (on l'a déjà rendu manuellement) */
.rl-pdp .summary > .woocommerce-product-details__short-description { display: none !important; }

/* WC breadcrumbs alignment */
.rl-pdp-breadcrumb a { color: var(--muted); }
.rl-pdp-breadcrumb a:hover { color: var(--ink); }
.rl-pdp-breadcrumb .breadcrumb-separator,
.rl-pdp-breadcrumb .sep { margin: 0 8px; color: var(--soft); }

/* Reviews section */
#reviews .woocommerce-Reviews-title { font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 24px; }
#reviews ol.commentlist { padding: 0; list-style: none; }
#reviews .commentlist li {
    background: white;
    border-radius: var(--r-lg);
    padding: 24px;
    border: 1px solid var(--border-l);
    margin-bottom: 14px;
}

/* Upsells / Related */
.rl-may-like ul.products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
    padding: 0;
    margin: 30px 0 0 0 !important;
}
.rl-may-like ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; }
.rl-may-like ul.products li.product .woocommerce-loop-product__link { color: inherit; text-decoration: none; }
.rl-may-like ul.products li.product img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
    background: var(--surface);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
}
.rl-may-like ul.products li.product h2,
.rl-may-like ul.products li.product .woocommerce-loop-product__title {
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.3;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.005em;
}
.rl-may-like ul.products li.product .price {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}
.rl-may-like ul.products li.product a.button.add_to_cart_button {
    display: none !important; /* on cache le bouton de la grille, garde le visuel propre */
}

/* Best sellers grid (home) — même traitement */
.rl-products-grid-wrap ul.products {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
    padding: 0;
    margin: 0 !important;
}
.rl-products-grid-wrap ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; }
.rl-products-grid-wrap ul.products li.product img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
    background: var(--surface);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
}
.rl-products-grid-wrap ul.products li.product h2,
.rl-products-grid-wrap ul.products li.product .woocommerce-loop-product__title {
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.3;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}
.rl-products-grid-wrap ul.products li.product .price {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}
.rl-products-grid-wrap ul.products li.product a.button.add_to_cart_button {
    display: none !important;
}

@media (max-width: 1100px) {
    .rl-may-like ul.products,
    .rl-products-grid-wrap ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
    .rl-pdp-details { position: static; }
}
@media (max-width: 600px) {
    .rl-may-like ul.products,
    .rl-products-grid-wrap ul.products {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

/* Annule le padding-top que Divi réserve pour sa fixed nav (qu'on remplace) */
body.et_fixed_nav.et_show_nav #page-container,
body.et_fixed_nav #page-container,
#page-container { padding-top: 0 !important; }

/* ============================================================
   FIX galerie PDP — images stack/overflow sans JS Flexslider
   ============================================================ */

/* La grille du haut */
.rl-pdp .rl-pdp-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
}
.rl-pdp .rl-pdp-left { min-width: 0; }

/* Galerie : on contraint .__wrapper en aspect-ratio 1 strict,
   et on positionne chaque .__image en absolu (toutes l'une sur
   l'autre) pour qu'une seule s'affiche à la fois. */
.rl-pdp .woocommerce-product-gallery {
    position: relative;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.rl-pdp .woocommerce-product-gallery .flex-viewport {
    aspect-ratio: 1;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    width: 100%;
}
.rl-pdp .woocommerce-product-gallery__wrapper {
    aspect-ratio: 1;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 !important;
    list-style: none;
}
.rl-pdp .woocommerce-product-gallery__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    list-style: none;
    background: var(--surface);
}
/* Avant init Flexslider : on ne montre que la première image */
.rl-pdp .woocommerce-product-gallery:not(.flex-container) .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}
/* Après init : Flexslider gère la visibilité via display: block/none */
.rl-pdp .woocommerce-product-gallery__image a,
.rl-pdp .woocommerce-product-gallery__image .wp-post-image,
.rl-pdp .woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* Thumbnails column (gauche) — créée par Flexslider après init */
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0;
    aspect-ratio: 1;
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li:hover { border-color: var(--border-strong); }
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    display: block;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li:has(.flex-active) {
    border-color: var(--ink);
}

/* Trigger zoom (loupe) en bas-droite de la main image */
.rl-pdp .woocommerce-product-gallery__trigger {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: white;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    z-index: 5;
    box-shadow: var(--shadow-sm);
    text-indent: 0;
    height: auto;
    width: auto;
}

/* ============================================================
   CHECKOUT — maquette full-fidelity (templates: woocommerce/checkout/*)
   Stepper + sectioned cards + sticky order summary. Ported from
   mockup.html VIEW 4, mapped onto the classic WC checkout structure.
   ============================================================ */
body.woocommerce-checkout .rl-container { max-width: 1280px; padding: 30px 32px 80px; }

/* The page already renders our own <h1> in .rl-ck-head — hide theme/WP title */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout .et_pb_title_container,
body.woocommerce-checkout h1.page-title { display: none !important; }

.rl-ck-head { padding: 18px 0 4px; }
.rl-ck-head h1 { font-weight: 600; font-size: 32px; letter-spacing: -0.03em; margin: 0; }

/* Stepper */
.rl-ck-stepper { display: flex; align-items: center; gap: 14px; margin: 20px 0 30px; flex-wrap: wrap; }
.rl-step-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 500; color: var(--muted);
}
.rl-step-pill .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: white; color: var(--muted); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rl-step-pill.done { background: var(--success-l); color: var(--success); }
.rl-step-pill.done .num { background: var(--success); color: white; }
.rl-step-pill.current { background: var(--ink); color: white; }
.rl-step-pill.current .num { background: white; color: var(--ink); }
.rl-step-arrow { color: var(--soft); font-size: 14px; }

/* ── Multi-step checkout accordion ─────────────────────────── */
.rl-step .rl-step-summary { display: none; }
.rl-step .rl-step-edit { display: none; font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: none; }
.rl-step .rl-step-edit:hover { text-decoration: underline; }
.rl-step.is-done .rl-step-edit { display: inline; }
.rl-step.is-done .rl-step-body,
.rl-step.is-locked .rl-step-body { display: none; }
.rl-step.is-locked { opacity: .55; }
.rl-step.is-locked .rl-ck-section-head h3 .num-circle { background: var(--surface); color: var(--muted); }
.rl-step.is-done .rl-ck-section-head h3 .num-circle { background: var(--success); color: #fff; }
.rl-step.is-active .rl-ck-section-head h3 .num-circle { background: var(--ink); color: #fff; }
.rl-step.is-done .rl-step-summary { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; }
.rl-step.is-done .rl-step-summary strong { color: var(--ink); font-weight: 600; }
.rl-checkout .rl-step .rl-step-continue,
button.rl-step-continue {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  margin-top: 18px !important; width: 100% !important; padding: 15px 22px !important;
  border-radius: 999px !important; border: 0 !important;
  background: var(--ink, #111) !important; background-image: none !important;
  color: #fff !important; font-weight: 700 !important; font-size: 15px !important;
  line-height: 1.2 !important; text-transform: none !important; text-shadow: none !important;
  cursor: pointer; transition: background .2s ease; -webkit-appearance: none; appearance: none;
}
.rl-checkout .rl-step .rl-step-continue:hover,
button.rl-step-continue:hover { background: #000 !important; }

/* Two-column grid */
.rl-checkout .rl-ck-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; padding-bottom: 60px; }
.rl-ck-left { min-width: 0; }
.rl-ck-right { min-width: 0; }

/* Section cards */
.rl-ck-section { background: white; border: 1px solid var(--border-l); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; }
.rl-ck-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.rl-ck-section-head h3 { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 10px; }
.rl-ck-section-head h3 .num-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: white; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rl-ck-section.done .rl-ck-section-head h3 .num-circle { background: var(--success); }

/* Hide WooCommerce's own section headings (we provide numbered ones) */
#customer_details .woocommerce-billing-fields > h3,
#customer_details .woocommerce-additional-fields > h3,
#customer_details .woocommerce-shipping-fields > h3:not(.rl-keep) { display: none; }
/* Keep the "ship to a different address" toggle visible/usable */
#customer_details .woocommerce-shipping-fields h3#ship-to-different-address { display: block; font-size: 14px; font-weight: 600; margin: 0; }
#customer_details .woocommerce-shipping-fields h3#ship-to-different-address label { font-size: 14px; font-weight: 600; }

/* WC form fields restyled to mockup */
.rl-checkout .form-row { margin: 0 0 12px; padding: 0; }
.rl-checkout .form-row label { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; display: block; }
.rl-checkout .form-row .required { color: var(--primary); border: 0; }
.rl-checkout .form-row input.input-text,
.rl-checkout .form-row textarea,
.rl-checkout .form-row select {
  width: 100% !important; padding: 13px 16px !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  background: white !important; font-size: 14.5px !important; line-height: 1.3 !important;
  outline: none !important; height: auto !important; min-height: 48px; box-shadow: none !important;
  transition: border-color .2s ease;
}
.rl-checkout .form-row input.input-text:focus,
.rl-checkout .form-row textarea:focus,
.rl-checkout .form-row select:focus { border-color: var(--ink) !important; }
/* select2 (country/state) — match the text inputs, robust on re-render */
.rl-checkout .select2-container { width: 100% !important; }
.rl-checkout .select2-container--default .select2-selection--single {
  height: 48px !important; min-height: 48px !important; padding: 0 !important; margin: 0 !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  background: #fff !important; outline: none !important; box-shadow: none !important;
  display: flex !important; align-items: center !important;
}
.rl-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important; padding: 0 38px 0 16px !important; margin: 0 !important;
  color: var(--ink) !important; font-size: 14.5px !important; width: 100%;
}
.rl-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important; top: 0 !important; right: 12px !important; transform: none !important;
}
.rl-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.rl-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ink) !important; }
/* dropdown is appended to <body>, so scope it from the body class */
body.woocommerce-checkout .select2-dropdown {
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; padding: 8px 10px !important; outline: none !important;
}
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ink) !important; color: #fff !important; }
.rl-checkout #customer_details .col-1,
.rl-checkout #customer_details .col-2 { width: 100%; float: none; }
.rl-checkout .col2-set { width: 100%; }

/* Shipping method section (left) */
.rl-ck-ship-options { display: grid; gap: 10px; }
.rl-ship-opt {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
  transition: border-color .2s ease, background .2s ease; margin: 0;
}
.rl-ship-opt:hover { border-color: var(--ink); }
.rl-ship-opt.active { border-color: var(--ink); background: var(--surface); }
.rl-ship-opt input { accent-color: var(--ink); margin: 0; }
.rl-ship-opt .info { flex: 1; }
.rl-ship-opt .info .name { font-weight: 600; font-size: 14.5px; }
.rl-ship-opt .info .est { display: block; font-size: 12.5px; color: var(--success); font-weight: 600; margin-top: 3px; }
.rl-ship-opt .price { font-weight: 700; }
.rl-ship-opt .price.free { color: var(--success); }
/* #18 : estimation de livraison sous la ligne Shipping (checkout + cart). */
.rl-sum-shipping .label,
.rl-cart-shipping .label { display: flex; flex-direction: column; gap: 1px; }
.rl-sum-shipping-est { font-size: 15.5px; font-weight: 700; color: var(--success); }

/* #17 : barre de recherche d'adresse (Google Places). */
/* Champ + liste de suggestions MAISON (Places API New programmatique) — rendu
   100% maîtrisé, pas de composant Web shadow DOM → pas d'overlay plein écran mobile. */
.rl-addr-ac-wrap { position: relative; margin-bottom: 16px; }
.rl-addr-ac-label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
/* Input calé sur les champs du checkout (.rl-checkout .form-row input.input-text). */
.rl-addr-ac-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: #fff;
  font-family: inherit; font-size: 14.5px; line-height: 1.3; color: var(--ink);
  outline: none; box-shadow: none; transition: border-color .2s ease;
}
.rl-addr-ac-input::placeholder { color: var(--muted); opacity: 1; }
.rl-addr-ac-input:focus { border-color: var(--ink); }
.rl-addr-ac-list {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 100000;
  margin-top: 6px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
}
.rl-addr-ac-list.open { display: block; }
.rl-addr-ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .12s ease;
}
.rl-addr-ac-item::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.rl-addr-ac-item:last-child { border-bottom: 0; }
.rl-addr-ac-item:hover { background: var(--surface, #f6f6f6); }
/* Ancien widget Autocomplete (repli) : le panneau Google (.pac-container)
   doit passer au-dessus de l'overlay checkout. */
.pac-container { z-index: 100000 !important; border-radius: var(--r-sm); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); font-family: inherit; }
.pac-item { padding: 6px 10px; font-size: 13.5px; cursor: pointer; }

/* Payment (methods as cards/tabs) */
.rl-ck-payment .payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rl-ck-payment .payment_methods li {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px;
  background: white; transition: border-color .2s ease, background .2s ease;
}
.rl-ck-payment .payment_methods li:hover { border-color: var(--ink); }
.rl-ck-payment .payment_methods li label { font-weight: 600; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.rl-ck-payment .payment_methods li input[type=radio] { accent-color: var(--ink); }
.rl-ck-payment .payment_methods .payment_box {
  background: var(--surface); border-radius: var(--r-md); padding: 14px; margin-top: 12px;
  font-size: 13.5px; color: var(--muted);
}
.rl-ck-payment .payment_methods .payment_box::before { display: none; }
.rl-ck-no-payment { color: var(--muted); font-size: 14px; }

/* Right: order summary (sticky card) */
.rl-ck-summary-title { display: none; } /* the summary card has its own head */
.rl-ck-right #order_review { background: transparent; padding: 0; border: 0; position: sticky; top: 100px; }
.rl-ck-summary-inner { background: var(--surface); border-radius: var(--r-lg); padding: 24px; border: 0; }
table.rl-ck-summary-inner, .rl-ck-summary-inner { display: block; width: 100%; }
.rl-ck-summary-head h3 { font-weight: 600; font-size: 16px; margin: 0 0 18px; display: flex; justify-content: space-between; align-items: center; }
.rl-ck-summary-head h3 .count { color: var(--muted); font-weight: 500; font-size: 13px; }

.rl-ck-items { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); display: grid; gap: 14px; }
.rl-ck-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.rl-ck-item-img { width: 56px; height: 56px; aspect-ratio: 1; border-radius: var(--r-sm); background: white; overflow: visible; position: relative; }
.rl-ck-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; }
.rl-ck-item-img .q {
  position: absolute; top: -6px; right: -6px; background: var(--ink); color: white;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rl-ck-item-info .n { font-weight: 600; font-size: 13px; line-height: 1.3; }
.rl-ck-item-info .v { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rl-ck-item-price { font-weight: 600; font-size: 14px; white-space: nowrap; }

.rl-ck-totals { display: grid; gap: 10px; }
.rl-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.rl-sum-row .label { color: var(--muted); }
.rl-sum-row .v { font-weight: 600; color: var(--ink); }
.rl-sum-row .v.discount, .rl-sum-row .v.free { color: var(--success); }
.rl-sum-row.total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.rl-sum-row.total .label { color: var(--ink); font-weight: 700; font-size: 16px; }
.rl-sum-row.total .label small { font-size: 11px; color: var(--muted); font-weight: 500; }
.rl-sum-row.total .v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* Place order */
.rl-ck-place-order { margin: 20px 0 0; padding: 0; }
.rl-ck-place-order .woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.rl-place-order-btn, .rl-checkout #place_order {
  width: 100% !important; padding: 18px 22px !important; border-radius: 999px !important;
  background: var(--primary) !important; color: #fff !important; border: 0 !important;
  font-weight: 700 !important; font-size: 16px !important; cursor: pointer;
  transition: background .2s ease !important; float: none !important; margin: 0 !important;
}
.rl-place-order-btn:hover, .rl-checkout #place_order:hover { background: var(--primary-h) !important; }

.rl-ck-secure { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rl-ck-secure svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.rl-ck-accept { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.rl-ck-accept-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rl-ck-accept-icons { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.rl-ck-accept-icons span { background: white; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); }

/* ── Thank-you / order-received ───────────────────────────── */
.rl-thankyou { max-width: 860px; margin: 0 auto; padding: 10px 0 60px; }
.rl-ty-stepper { justify-content: center; }
.rl-ty-hero { text-align: center; padding: 10px 0 28px; }
.rl-ty-check { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; background: var(--success-l); display: flex; align-items: center; justify-content: center; }
.rl-ty-check svg { width: 30px; height: 30px; fill: none; stroke: var(--success); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rl-ty-hero h1 { font-weight: 600; font-size: 30px; letter-spacing: -0.03em; margin: 0 0 12px; }
.rl-ty-lead { font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.rl-ty-sub { font-size: 14px; color: var(--muted); margin: 0; }
.rl-ty-failed h1 { color: var(--primary); }

.rl-ty-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 28px; }
.rl-ty-chip { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.rl-ty-chip .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rl-ty-chip .v { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Core order details table + customer addresses, carded to match */
.rl-thankyou .woocommerce-order-details,
.rl-thankyou .woocommerce-customer-details { background: #fff; border: 1px solid var(--border-l); border-radius: var(--r-lg); padding: 24px; margin-bottom: 18px; }
.rl-thankyou .woocommerce-order-details__title,
.rl-thankyou .woocommerce-column__title { font-weight: 600; font-size: 17px; margin: 0 0 16px; }
/* Table order_details : stylée sur la page remerciement ET la page compte
   view-order (toutes deux ont .woocommerce-order-details). Avant, scopée
   .rl-thankyou → sur view-order le tableau ne prenait pas toute la largeur,
   noms rouges alignés à droite et wrappés (cf. retour Cyril 2026-06-02). */
.woocommerce-order-details table.order_details { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; margin: 0; }
/* Order-details line item with product thumbnail */
.rl-od-item { display: flex; align-items: center; gap: 12px; }
.rl-od-thumb { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.rl-od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-od-info { min-width: 0; flex: 1 1 auto; }
.woocommerce-order-details .rl-od-info { text-align: left; }
/* !important : bat .woocommerce-MyAccount-content a { color:--primary } (plus spécifique) sur view-order */
.woocommerce-order-details .rl-od-info a { color: var(--ink) !important; text-decoration: none; font-weight: 600; }
.woocommerce-order-details .rl-od-info a:hover { color: var(--primary, #C9302C) !important; }
.woocommerce-order-details .rl-od-info .product-quantity { color: var(--muted); font-weight: 500; }
.woocommerce-order-details table.order_details td.product-name { padding-right: 16px; width: 100%; }
.woocommerce-order-details table.order_details th,
.woocommerce-order-details table.order_details td { text-align: left; padding: 11px 0; border: 0; border-bottom: 1px solid var(--border-l); }
.woocommerce-order-details table.order_details td.product-total,
.woocommerce-order-details table.order_details tfoot td { text-align: right; }
/* table-layout:fixed + colonne Total à largeur fixe (150px) : compromis → noms
   produits larges, et valeurs tfoot (Free shipping, prix) sur 1 ligne. */
.woocommerce-order-details table.order_details .product-total { width: 150px; white-space: nowrap; }
.woocommerce-order-details table.order_details tfoot th { color: var(--muted); font-weight: 500; }
.woocommerce-order-details table.order_details tfoot tr:last-child th,
.woocommerce-order-details table.order_details tfoot tr:last-child td { font-size: 16px; font-weight: 700; color: var(--ink); border-bottom: 0; }

/* Ligne "Actions:" du détail (WC 10.8 natif, order-details.php) : avec table-layout
   fixed la colonne 2 (120px) coince les boutons → on sort la ligne de la grille
   (flex pleine largeur) et on stylise les boutons en pastilles. */
.woocommerce-order-details table.order_details tfoot tr:has(> .order-actions--heading) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 0; border-bottom: 0;
}
.woocommerce-order-details table.order_details .order-actions--heading {
    border: 0; padding: 0 4px 0 0; white-space: nowrap; font-weight: 700; color: var(--ink);
}
.woocommerce-order-details table.order_details tfoot tr:has(> .order-actions--heading) > td {
    display: flex; flex-wrap: wrap; gap: 10px; width: auto; padding: 0; border: 0; text-align: left; flex: 1 1 auto;
}
.woocommerce-order-details .order-actions-button {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: var(--ink) !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; padding: 10px 18px !important;
    font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap;
    transition: background .15s ease;
}
.woocommerce-order-details .order-actions-button:hover { background: var(--primary, #C9302C) !important; }
.woocommerce-order-details .order-actions-button::after,
.woocommerce-order-details .order-actions-button::before { content: none !important; display: none !important; }

/* Returns / RMA (#24) — bloc retours sous le détail de commande (view-order). */
.rl-rma { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.rl-rma-heading { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.rl-rma-intro { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 640px; }
.rl-rma-notice { padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 14px; line-height: 1.5; }
.rl-rma-notice.success { background: #eef7ee; border: 1px solid #cfe6cf; color: #246b2b; }
.rl-rma-notice.error { background: #fdecec; border: 1px solid #f5c6c6; color: #b02a2a; }
.rl-rma-prior { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.rl-rma-form { margin-top: 16px; }
.rl-rma-h { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.rl-rma-items { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.rl-rma-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--border-l, var(--border)); }
.rl-rma-item:last-child { border-bottom: 0; }
.rl-rma-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; margin: 0; }
.rl-rma-pick input { accent-color: var(--ink); width: 17px; height: 17px; flex: 0 0 auto; }
.rl-rma-name { font-size: 14px; color: var(--ink); }
.rl-rma-qty { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.rl-rma-qty label { display: flex; align-items: center; gap: 6px; margin: 0; }
.rl-rma-qty select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; font-size: 13.5px; color: var(--ink); min-height: 0; }
.rl-rma-reason { border: 0; padding: 0; margin: 0 0 18px; }
.rl-rma-reason legend { font-size: 14px; font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 10px; }
.rl-rma-radio { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14px; color: var(--ink); }
.rl-rma-radio input { accent-color: var(--ink); width: 17px; height: 17px; }
.rl-rma-field { margin: 0 0 14px; }
.rl-rma-field label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.rl-rma-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; font-family: inherit; font-size: 14.5px; color: var(--ink); resize: vertical; }
.rl-rma-field textarea:focus { outline: none; border-color: var(--ink); }
.rl-rma-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.rl-rma-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rl-rma-submit { cursor: pointer; }
.rl-rma-cancel { cursor: pointer; background: none; border: 0; padding: 6px 4px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: underline; }
.rl-rma-cancel:hover { color: var(--ink); }
@media (max-width: 600px){
  .rl-rma-item { flex-wrap: wrap; }
  .rl-rma-qty { width: 100%; justify-content: flex-start; padding-left: 27px; }
}

.rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; }
.rl-thankyou .woocommerce-customer-details address { font-style: normal; color: var(--muted); font-size: 14px; line-height: 1.6; border: 0; padding: 0; width: 100%; }

.rl-ty-actions { text-align: center; margin-top: 28px; }
.rl-ty-continue { display: inline-block; padding: 15px 34px; border-radius: 999px; background: var(--primary); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s ease; }
.rl-ty-continue:hover { background: var(--primary-h); }
.rl-ty-secondary { display: inline-block; padding: 15px 24px; color: var(--muted); text-decoration: none; font-weight: 600; }

@media (max-width: 640px){
  .rl-ty-overview { grid-template-columns: 1fr 1fr; }
  .rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* Login + coupon prompts */
.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle {
  background: var(--surface); border: none; border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 14px; font-size: 14px;
}
.woocommerce-form-login, .woocommerce-form-coupon { background: white; border: 1px solid var(--border-l); border-radius: var(--r-md); padding: 16px; margin-bottom: 18px; }

/* Checkout coupon form: input + Apply on one row (form is rendered outside .rl-checkout) */
.woocommerce-checkout .woocommerce-form-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce-checkout .woocommerce-form-coupon > p:first-of-type { width: 100%; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.woocommerce-checkout .woocommerce-form-coupon .form-row { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
.woocommerce-checkout .woocommerce-form-coupon .form-row-first { flex: 1 1 220px; min-width: 0; }
.woocommerce-checkout .woocommerce-form-coupon .form-row-last { flex: 0 0 auto; }
.woocommerce-checkout .woocommerce-form-coupon input#coupon_code {
  width: 100% !important; padding: 13px 18px !important; min-height: 48px !important;
  border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: white !important; font-size: 14.5px !important; line-height: 1.3 !important;
  outline: none !important; box-shadow: none !important; height: auto !important;
  transition: border-color .2s ease;
}
.woocommerce-checkout .woocommerce-form-coupon input#coupon_code:focus { border-color: var(--ink) !important; }
.woocommerce-checkout .woocommerce-form-coupon button[name="apply_coupon"] {
  background: var(--ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding: 13px 24px !important; min-height: 48px;
  font-size: 14px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap;
  transition: background .2s ease;
}
.woocommerce-checkout .woocommerce-form-coupon button[name="apply_coupon"]:hover { background: #000 !important; }
.woocommerce-checkout .woocommerce-form-coupon .clear { display: none; }

/* WC notices */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-notices-wrapper { margin-bottom: 18px; }

/* Responsive */
@media (max-width: 1024px) {
  .rl-checkout .rl-ck-grid { grid-template-columns: 1fr; gap: 28px; }
  .rl-ck-right #order_review { position: static; }
}
/* ============================================================
   CONTACT — depuis mockup_4 view 7
   (--paper → --surface, --ink-soft → --text, --line → --border-l)
   ============================================================ */
.rl-ct-hero {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--border-l);
}
.rl-ct-hero .ey {
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 17px;
    color: var(--primary);
    margin-bottom: 14px;
}
.rl-ct-hero h1 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(44px, 6.5vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    max-width: 18ch;
}
.rl-ct-hero h1 em { font-style: italic; color: var(--muted); }
.rl-ct-hero p {
    margin-top: 22px;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}

.rl-ct-body {
    padding: 60px 0 80px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
}
@media (max-width: 880px) {
    .rl-ct-body { grid-template-columns: 1fr; gap: 40px; }
}

.rl-ct-form-card {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
@media (max-width: 560px) { .rl-ct-form-card { padding: 28px 22px; } }
.rl-ct-form-card h3 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.rl-ct-form-card .ph {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 32px;
}
.rl-ct-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rl-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .rl-ct-row { grid-template-columns: 1fr; } }
.rl-ct-field { display: flex; flex-direction: column; gap: 6px; }
.rl-ct-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.rl-ct-field input,
.rl-ct-field select,
.rl-ct-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .15s;
    outline: none;
    width: 100%;
}
.rl-ct-field input:focus,
.rl-ct-field select:focus,
.rl-ct-field textarea:focus { border-color: var(--ink); }
.rl-ct-field textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font);
}
.rl-ct-consent {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    align-items: flex-start;
}
.rl-ct-consent input {
    width: 16px; height: 16px; margin-top: 2px;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    background: white;
    cursor: pointer;
    position: relative;
}
.rl-ct-consent input:checked { background: var(--ink); border-color: var(--ink); }
.rl-ct-consent input:checked::after {
    content: '';
    position: absolute; left: 4px; top: 1px;
    width: 4px; height: 9px;
    border: solid white; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rl-ct-sidebar { display: flex; flex-direction: column; gap: 16px; }
.rl-ct-info-card {
    padding: 28px 30px;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 8px;
}
.rl-ct-info-card h4 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 18px;
    letter-spacing: -0.015em;
}
.rl-ct-info-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid var(--border-l);
}
.rl-ct-info-row:first-of-type { border-top: none; padding-top: 4px; }
.rl-ct-info-row svg {
    width: 16px; height: 16px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}
.rl-ct-info-row .lbl {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.rl-ct-info-row .v {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.45;
}
.rl-ct-info-row .v a { color: var(--ink); text-decoration: underline; }
.rl-ct-info-row .v small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.rl-ct-hours {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 7px 0;
    border-top: 1px solid var(--border-l);
    color: var(--text);
}
.rl-ct-hours:first-of-type { border-top: none; }
.rl-ct-hours.closed { color: var(--muted); }
.rl-ct-hours strong { color: var(--ink); font-weight: 600; }

.rl-ct-faq-strip {
    background: var(--surface);
    padding: 64px 0;
    margin-top: 0;
}
.rl-ct-faq-strip .head {
    text-align: center;
    margin-bottom: 40px;
}
.rl-ct-faq-strip h2 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 38px);
    letter-spacing: -0.02em;
}
.rl-ct-faq-strip h2 em { font-style: italic; color: var(--muted); }
.rl-ct-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 720px) { .rl-ct-faq-grid { grid-template-columns: 1fr; } }
.rl-ct-faq-card {
    background: white;
    padding: 28px 26px;
    border-radius: 6px;
    border: 1px solid var(--border-l);
    transition: border-color .15s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.rl-ct-faq-card:hover { border-color: var(--ink); }
.rl-ct-faq-card h5 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.rl-ct-faq-card p {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 12px;
}
.rl-ct-faq-card .link {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Notice de succès / erreur du form */
.rl-ct-notice {
    padding: 16px 20px;
    border-radius: var(--r-md);
    margin-bottom: 20px;
    font-size: 14.5px;
}
.rl-ct-notice.success { background: var(--success-l); color: var(--success); border-left: 3px solid var(--success); }
.rl-ct-notice.error { background: var(--sale-l); color: var(--sale); border-left: 3px solid var(--sale); }

/* ============================================================
   PDP HARD FIX — annule WC layout (float/width) + force galerie visible
   ============================================================ */

/* Force CSS Grid : annule les float et width imposés par woocommerce-layout.css */
.rl-pdp div.images,
.rl-pdp div.summary,
.rl-pdp .rl-pdp-left,
.rl-pdp .rl-pdp-details {
    float: none !important;
    width: auto !important;
    clear: none !important;
    margin-bottom: 0 !important;
}

/* Re-déclare la grille avec plus de spécificité */
.rl-pdp .rl-pdp-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 60px !important;
    padding-bottom: 60px;
}

/* Force la galerie visible (WC met opacity:0 inline en attente du JS Flexslider) */
.rl-pdp .woocommerce-product-gallery,
.rl-pdp .woocommerce-product-gallery.images {
    opacity: 1 !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Wrapper de la galerie : carré, contraint, overflow hidden */
.rl-pdp .woocommerce-product-gallery__wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    display: block;
}

/* Chaque .__image en absolute, only first shows quand pas de Flexslider */
.rl-pdp .woocommerce-product-gallery__image,
.rl-pdp .woocommerce-product-gallery__wrapper > div {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--surface);
}
.rl-pdp .woocommerce-product-gallery__wrapper > div:not(:first-child) {
    display: none;
}
/* Quand Flexslider initialise, il ajoute .flex-active à la div active */
.rl-pdp .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image { display: block !important; }

.rl-pdp .woocommerce-product-gallery__image a,
.rl-pdp .woocommerce-product-gallery__image img,
.rl-pdp .woocommerce-product-gallery__image .wp-post-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* Thumbs : créés par Flexslider — sinon hidden */
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
}
.rl-pdp .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
}

/* Sidebar droite : annule les contraintes WC */
.rl-pdp .rl-pdp-details.summary.entry-summary,
.rl-pdp .rl-pdp-details {
    position: sticky;
    top: 100px;
    align-self: start;
    min-width: 0;
}

/* Le titre WC peut hériter d'autres styles : on force */
.rl-pdp .rl-pdp-title.product_title.entry-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: var(--ink);
    padding: 0;
}

/* Empêche WC d'imposer son float aux upsells / related en bas */
.rl-pdp .upsells,
.rl-pdp .related,
.rl-pdp .may-like {
    float: none !important;
    width: auto !important;
    clear: both;
}

/* Description block sous galerie : padding-top safe */
.rl-pdp-description { clear: both; }

/* Reviews comments form (par défaut WC) */
.rl-pdp #reviews { clear: both; }

/* Responsive */
@media (max-width: 1100px) {
    .rl-pdp .rl-pdp-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .rl-pdp .rl-pdp-details { position: static; }
}

/* ============================================================
   PDP GALLERY — ultime fallback (padding-bottom hack au lieu d'aspect-ratio)
   ============================================================ */
.rl-pdp .rl-pdp-gallery-wrap {
    width: 100%;
    max-width: 100%;
}
.rl-pdp .woocommerce-product-gallery__wrapper {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;
    height: 0 !important;
    aspect-ratio: auto !important;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin: 0 !important;
    display: block !important;
}
.rl-pdp .woocommerce-product-gallery__image,
.rl-pdp .woocommerce-product-gallery__wrapper > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.rl-pdp .woocommerce-product-gallery__wrapper > div:not(:first-child) {
    display: none !important;
}


/* === BACKGROUND CREAM forcé (Divi met body { background-color: #fff }) === */
body.rolllux-2026,
html body.rolllux-2026 {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
}
/* Divi enveloppe le contenu dans #page-container / #main-content qui peuvent
   réinitialiser à blanc. On force la transparence pour laisser passer le body. */
.rolllux-2026 #page-container,
.rolllux-2026 #et-main-area,
.rolllux-2026 #main-content,
.rolllux-2026 #content-area {
    background: transparent !important;
    background-color: transparent !important;
}

/* Divi force background-color:#fff sur chaque .et_pb_section.
   On laisse passer le body cream sauf si la section a une classe rl-bg-* explicite */
.rolllux-2026 .et_pb_section,
.rolllux-2026 .et_pb_row,
.rolllux-2026 .et_pb_column {
    background-color: transparent !important;
}

/* === LI wrapper de content-product.php : on neutralise === */
.rolllux-2026 ul.products {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 28px 22px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.rolllux-2026 ul.products li.product,
.rolllux-2026 ul.products li.rl-pcard-li {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    list-style: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
/* L'image qui vient de get_image (link to product) doit remplir le pcard-img */
.rl-pcard-img > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rolllux-2026 ul.products li.product img { margin: 0 !important; }

@media (max-width: 1100px) {
    .rolllux-2026 ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .rolllux-2026 ul.products { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}

/* Quick add overlay — force white text + svg sur fond noir (specificity bump) */
.rolllux-2026 .rl-pcard-quick,
.rolllux-2026 a.rl-pcard-quick {
    color: white !important;
    background: var(--ink) !important;
    text-decoration: none !important;
}
.rolllux-2026 .rl-pcard-quick:hover { color: white !important; background: var(--ink) !important; }
.rolllux-2026 .rl-pcard-quick svg { stroke: white !important; color: white !important; }

/* === Cart/Checkout/MyAccount : Divi inclut un #sidebar; on l'efface et on étend #content-area === */
.rolllux-no-sidebar #sidebar,
body.woocommerce-cart #sidebar,
body.woocommerce-checkout #sidebar,
body.woocommerce-account #sidebar {
    display: none !important;
}
.rolllux-no-sidebar #content-area,
body.woocommerce-cart #content-area,
body.woocommerce-checkout #content-area,
body.woocommerce-account #content-area {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.rolllux-no-sidebar #left-area,
body.woocommerce-cart #left-area,
body.woocommerce-checkout #left-area,
body.woocommerce-account #left-area {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    float: none !important;
}

/* ============================================================
   WC NOTICES (message / error / info) — Roll-Lux style
   ============================================================ */
.rolllux-2026 .woocommerce-notices-wrapper {
    margin: 18px auto 24px;
    max-width: 1280px;
    padding: 0 32px;
}
.rolllux-2026 .woocommerce-message,
.rolllux-2026 .woocommerce-error,
.rolllux-2026 .woocommerce-info {
    list-style: none !important;
    padding: 16px 22px !important;
    border-radius: var(--r-md) !important;
    margin: 0 0 14px !important;
    background: var(--success-l) !important;
    color: var(--success) !important;
    border: 1px solid transparent !important;
    border-left: 3px solid var(--success) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: var(--shadow-sm) !important;
}
.rolllux-2026 .woocommerce-error {
    background: var(--sale-l) !important;
    color: var(--sale) !important;
    border-left-color: var(--sale) !important;
}
.rolllux-2026 .woocommerce-info {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-left-color: var(--ink) !important;
}

.rolllux-2026 .woocommerce-message li,
.rolllux-2026 .woocommerce-error li,
.rolllux-2026 .woocommerce-info li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5;
    flex: 1;
}

.rolllux-2026 .woocommerce-message::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--success);
    color: white;
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.rolllux-2026 .woocommerce-error::before {
    content: '!';
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--sale);
    color: white;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.rolllux-2026 .woocommerce-info::before {
    content: 'i';
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-weight: 700;
    font-size: 13px;
    font-style: italic;
    font-family: var(--font-edit);
    display: flex; align-items: center; justify-content: center;
}

.rolllux-2026 .woocommerce-message .button,
.rolllux-2026 .woocommerce-error .button,
.rolllux-2026 .woocommerce-info .button {
    margin-left: auto !important;
    background: white !important;
    color: var(--ink) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.rolllux-2026 .woocommerce-message .button:hover,
.rolllux-2026 .woocommerce-error .button:hover,
.rolllux-2026 .woocommerce-info .button:hover {
    background: var(--ink) !important;
    color: white !important;
    border-color: var(--ink) !important;
}

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper,
.single-product .woocommerce-notices-wrapper {
    margin: 18px auto 24px;
    padding: 0 32px;
}

/* ============================================================
   CART POLISH — alignement maquette
   ============================================================ */

/* Cache le titre de page Divi/WP doublon "Cart" sur les pages WC */
.woocommerce-cart .entry-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-checkout .wp-block-post-title,
.single-product .entry-title,
.single-product h1.entry-title.product_title,
.archive.woocommerce .page-title,
body.woocommerce.archive .et_pb_module h1.entry-title {
    display: none !important;
}
/* On garde le titre custom inside le wrapper Divi */
.rl-pdp .rl-pdp-title.product_title.entry-title { display: block !important; }

/* Cart item — plus compact (titre 2 lignes max, image plus petite) */
.rl-cart-item {
    grid-template-columns: 90px 1fr auto !important;
    gap: 16px !important;
    padding: 16px !important;
}
.rl-cart-item-info h3 {
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px !important;
    /* clamp à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rl-cart-item-info .cat { font-size: 10.5px; letter-spacing: 0.1em; margin-bottom: 4px; }
.rl-cart-item-variant { font-size: 12.5px; margin-bottom: 8px; }
.rl-cart-item-actions { font-size: 12px; gap: 12px; }
.rl-cart-item-price { font-size: 16px; }

/* Summary card : plus de respiration */
.rl-cart-summary { padding: 24px !important; }
.rl-cart-summary h3 { font-size: 17px; margin-bottom: 14px; }
.rl-summary-row { padding: 10px 0; font-size: 14px; }
.rl-summary-row.total { font-size: 17px; padding-top: 16px; }
.rl-summary-row.total .v { font-size: 20px; }

/* Proceed-to-checkout : pleine largeur + padding plus contenu */
.rl-cart-summary .wc-proceed-to-checkout { margin-top: 16px !important; }
.rl-cart-summary .checkout-button,
.rl-cart-summary a.checkout-button {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px !important;
    font-size: 14.5px !important;
    border-radius: 999px !important;
}

/* "Update cart" : petit bouton outline, pas dominant */
.rl-cart-update-row .rl-btn-outline {
    padding: 10px 18px !important;
    font-size: 13px !important;
}

/* Promo input : flush avec le summary */
.rl-promo-input { margin: 12px 0 6px !important; }
.rl-promo-input input { padding: 10px 14px !important; font-size: 13px !important; }
.rl-promo-input button { padding: 10px 16px !important; font-size: 12.5px !important; }

/* Trust list condensée, vertical comme dans maquette */
.rl-cart-trust-list { padding-top: 16px !important; margin-top: 16px !important; }
.rl-cart-trust-list div { font-size: 12.5px; gap: 8px; }
.rl-cart-trust-list svg { width: 14px; height: 14px; }

/* ============================================================
   CART FIXES — batch (largeur, qty spinners, boutons, etc.)
   ============================================================ */

/* 1. Largeur du cart : on contraint à 1180px comme la maquette (plus serré) */
.woocommerce-cart .rl-container,
.woocommerce-checkout .rl-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 32px !important;
}

/* 2. Inputs type=number : on retire les flèches natives (Chrome/Firefox) */
.rolllux-2026 .rl-qty-stepper input[type="number"],
.rolllux-2026 .rl-qty-stepper input.val {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    padding: 0 !important;
    width: 36px !important;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}
.rolllux-2026 .rl-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.rolllux-2026 .rl-qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* 3. Cart-item cards : on tighten, structure cohérente avec la maquette */
.rl-cart-item {
    grid-template-columns: 80px 1fr auto !important;
    gap: 14px !important;
    padding: 14px !important;
    align-items: start;
    background: white !important;
    border: 1px solid var(--border-l) !important;
    border-radius: var(--r-md) !important;
}
.rl-cart-item-img {
    aspect-ratio: 1 / 1;
    width: 80px;
    height: 80px;
    background: var(--surface);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.rl-cart-item-img img,
.rl-cart-item-img a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.rl-cart-item-info h3 {
    font-size: 14.5px !important;
    -webkit-line-clamp: 2;
}
.rl-cart-item-right { gap: 14px; }

/* 4. Update Cart button : style outline propre */
.rolllux-2026 button.rl-btn,
.rolllux-2026 button.rl-btn-outline,
.rolllux-2026 .rl-cart-update-row button[name="update_cart"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: white !important;
    color: var(--ink) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.rolllux-2026 button.rl-btn:hover,
.rolllux-2026 button.rl-btn-outline:hover,
.rolllux-2026 .rl-cart-update-row button[name="update_cart"]:hover {
    background: var(--ink) !important;
    color: white !important;
    border-color: var(--ink) !important;
}

/* 5. Proceed to checkout : texte BLANC sur fond rouge (le <a> hérite color du parent → fix specificity) */
.rolllux-2026 .rl-btn-primary,
.rolllux-2026 a.rl-btn-primary,
.rolllux-2026 button.rl-btn-primary,
.rolllux-2026 .checkout-button,
.rolllux-2026 a.checkout-button,
.rolllux-2026 .rl-cart-summary .checkout-button {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    text-decoration: none !important;
}
.rolllux-2026 .rl-btn-primary:hover,
.rolllux-2026 a.rl-btn-primary:hover,
.rolllux-2026 .checkout-button:hover { background: var(--primary-h) !important; color: white !important; }
.rolllux-2026 .rl-btn-primary svg,
.rolllux-2026 a.rl-btn-primary svg,
.rolllux-2026 .checkout-button svg { stroke: white !important; color: white !important; }

/* 6. Coupon "Apply" button : styled comme dans la maquette (ink bg, blanc text) */
.rolllux-2026 .rl-promo-input button,
.rolllux-2026 form.rl-promo-input button[name="apply_coupon"] {
    background: var(--ink) !important;
    color: white !important;
    border-radius: 999px !important;
    border: none !important;
    padding: 10px 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .2s ease;
}
.rolllux-2026 .rl-promo-input button:hover { background: var(--ink) !important; opacity: .85; }
.rolllux-2026 .rl-promo-input input {
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    flex: 1;
}
.rolllux-2026 .rl-promo-input {
    display: flex;
    gap: 8px;
    margin: 14px 0 6px !important;
}

/* Le bouton Continue shopping (text link) reste discret */
.rl-cart-head p a { color: var(--ink); }

/* Free shipping promo strip : check-circle bien aligné */
.rl-cart-promo-strip { padding: 12px 18px !important; font-size: 14px; }
.rl-cart-promo-strip svg { color: var(--success); }

/* Header cart compact */
.rl-cart-head { padding: 24px 0 18px !important; }
.rl-cart-head h1 { font-size: 32px !important; margin-bottom: 6px !important; }
.rl-cart-head p { font-size: 14px; }

/* AJAX cart loading state */
.rl-cart-grid.rl-cart-loading { opacity: 0.55; pointer-events: none; transition: opacity .2s ease; }
.rl-cart-update-row { display: none !important; }

/* ============================================================
   CART/CHECKOUT — alignement maquette desktop
   ============================================================ */

/* 1. Largeur container : 1480px comme la maquette (annule l'override 1200) */
.woocommerce-cart .rl-container,
.woocommerce-checkout .rl-container {
    max-width: 1480px !important;
    padding: 0 32px !important;
}

/* 2. Cart-item compact : match maquette */
.rl-cart-item {
    grid-template-columns: 110px 1fr auto !important;
    gap: 18px !important;
    padding: 18px !important;
    align-items: center !important;
}
.rl-cart-item-img {
    width: 110px !important;
    height: 110px !important;
}
.rl-cart-item-info {
    padding: 4px 0;
}
.rl-cart-item-info .cat { font-size: 10.5px; margin-bottom: 4px; }
.rl-cart-item-info h3 {
    font-size: 15.5px !important;
    margin: 0 0 6px !important;
    -webkit-line-clamp: 1;
    line-height: 1.3;
}
.rl-cart-item-variant {
    font-size: 13px !important;
    margin-bottom: 10px !important;
}
.rl-cart-item-actions {
    font-size: 12.5px !important;
    gap: 14px !important;
}
.rl-cart-item-actions a {
    cursor: pointer;
    color: var(--muted);
}
.rl-cart-item-actions a:hover { color: var(--ink); }
.rl-cart-item-actions svg { width: 13px; height: 13px; }

/* Item right column */
.rl-cart-item-right {
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    min-height: 80px;
}
.rl-cart-item-price { font-size: 16px; font-weight: 700; }

/* Stepper qty plus compact dans le cart */
.rl-cart-item .rl-qty-stepper {
    border: 1px solid var(--border);
    border-radius: 999px;
}
.rl-cart-item .rl-qty-stepper button {
    width: 28px;
    height: 32px;
    font-size: 14px;
}
.rl-cart-item .rl-qty-stepper input.val {
    width: 28px !important;
    font-size: 12.5px !important;
}

/* 3. Grid 2-col plus large à droite — DESKTOP UNIQUEMENT.
   Sans le min-width, ce !important global forçait 2 colonnes même entre 601-1100px
   (en écrasant le `@media ≤1100 {1fr}`) → items comprimés sur tablette/grand mobile
   (bug #29 signalé par Cyril). On le borne à >1100px. */
@media (min-width: 1101px) {
    .rl-cart-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
        gap: 36px !important;
    }
}

/* === Annule la contrainte largeur Divi (.container = 80% / max-width 1080) sur WC === */
/* Aussi étendu aux pages custom (contact, about, faq, shipping, returns, terms, privacy-policy) */
.woocommerce-cart #main-content > .container,
.woocommerce-checkout #main-content > .container,
.single-product #main-content > .container,
.woocommerce-account #main-content > .container,
.archive.woocommerce #main-content > .container,
.rolllux-custom-page #main-content > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
/* On retire aussi les contraintes sur left-area / content-area */
.woocommerce-cart #left-area,
.woocommerce-checkout #left-area,
.single-product #left-area,
.woocommerce-account #left-area,
.rolllux-custom-page #left-area {
    width: 100% !important;
    max-width: 100% !important;
}

/* Cache le H1.entry-title.main_title ajouté par Divi (double avec notre titre custom) */
.woocommerce-cart .entry-title.main_title,
.woocommerce-checkout .entry-title.main_title,
.woocommerce-account .entry-title.main_title,
.single-product .entry-title.main_title { display: none !important; }

/* Cart item card encore plus compact */
.rl-cart-item {
    grid-template-columns: 90px 1fr auto !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    align-items: center !important;
}
.rl-cart-item-img {
    width: 90px !important;
    height: 90px !important;
}
.rl-cart-item-info { padding: 0 !important; }
.rl-cart-item-info .cat { font-size: 10px; margin-bottom: 3px; letter-spacing: 0.1em; }
.rl-cart-item-info h3 { font-size: 14.5px !important; margin: 0 0 4px !important; }
.rl-cart-item-variant { font-size: 12px !important; margin-bottom: 6px !important; }
.rl-cart-item-actions { font-size: 11.5px !important; gap: 12px !important; }
.rl-cart-item-actions svg { width: 12px; height: 12px; }
.rl-cart-item-right { min-height: 0 !important; gap: 8px !important; }
.rl-cart-item-price { font-size: 15px; }
.rl-cart-item .rl-qty-stepper button { height: 28px; width: 26px; }
.rl-cart-item .rl-qty-stepper input.val { width: 26px !important; }

/* === CART MOBILE — stack grid + item layout (défait les !important desktop ci-dessus à ≤600px) === */
@media (max-width: 600px) {
    /* Grid : colonne unique (articles puis résumé) */
    .rl-cart-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-bottom: 56px !important;
    }
    .rl-cart-summary { position: static !important; top: auto !important; }
    /* Item : img + info en 2 col, bloc prix/qty en pleine largeur dessous */
    .rl-cart-item {
        grid-template-columns: 72px 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        align-items: start !important;
    }
    .rl-cart-item-img { width: 72px !important; height: 72px !important; }
    /* Titre : wrap complet, JAMAIS coupé. Le clamp `-webkit-box`/`line-clamp:2`
       (hérité des règles globales) était cassé sur la vraie page — le <a> enfant
       stylé par Divi/WC empêchait le clamp de compter les lignes de texte, donc
       seul `overflow:hidden` agissait et rognait la 3e ligne ("mangé vers le bas",
       retour client 2026-06-16). On neutralise le clamp ici : le titre est déjà
       tronqué côté PHP (~80 car. → max ~3 lignes sur mobile), on le laisse wrapper
       entièrement plutôt que risquer une coupe. */
    .rl-cart-item-info h3 {
        display: block !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        max-height: none !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }
    .rl-cart-item-right {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        padding-top: 12px !important;
        margin-top: 4px !important;
        border-top: 1px dashed var(--border-l) !important;
    }
    .rl-cart-item-right > div { text-align: left !important; }
    /* CTA checkout pleine largeur garanti */
    .rl-cart-summary .checkout-button,
    .rl-cart-summary a.checkout-button { width: 100% !important; }
}

/* ============================================================
   CATEGORY / SHOP ARCHIVE — hero + toolbar
   ============================================================ */

/* Cache la "shop loop header" et l'image bannière legacy WC qui prennent toute la largeur */
.woocommerce-products-header,
.woocommerce-products-header__title,
.term-description,
.taxonomy-description {
    display: none !important;
}
/* Cache l'image WP thumbnail de la term (l'énorme bannière) si plugin l'affiche */
.archive .post-thumbnail,
.archive .wp-block-post-featured-image,
.woocommerce-page > .post-thumbnail { display: none !important; }

/* Cat hero */
.rl-cat-hero {
    padding: 40px 0 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-l);
    margin-bottom: 32px;
}
.rl-cat-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
}
.rl-cat-breadcrumb a { color: var(--muted); }
.rl-cat-breadcrumb a:hover { color: var(--ink); }
.rl-cat-breadcrumb .sep { margin: 0 8px; }

.rl-cat-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: var(--ink);
    max-width: 22ch;
}
.rl-cat-title em {
    font-family: var(--font-edit);
    font-style: italic;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.78em;
}

.rl-cat-lead {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 0 28px;
}

.rl-cat-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 760px;
}
.rl-cat-stats > div {
    background: var(--surface);
    border-radius: var(--r-md);
    padding: 16px 20px;
}
.rl-cat-stats strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 2px;
}
.rl-cat-stats .stat-label {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Catalog main wrap */
.rl-cat-main-wrap { padding-bottom: 60px; }

/* Toolbar (count + sort) */
.rl-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-l);
}
.rl-cat-toolbar .count {
    font-size: 14px;
    color: var(--muted);
}
.rl-cat-toolbar .count strong { color: var(--ink); font-weight: 700; }

/* WC sort dropdown (woocommerce_catalog_ordering) restyled */
.rl-cat-toolbar .woocommerce-ordering {
    margin: 0 !important;
}
.rl-cat-toolbar .woocommerce-ordering select {
    background: white;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 36px 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

/* Result count (woocommerce_result_count) — caché car on a notre count */
.rl-cat-toolbar .woocommerce-result-count { display: none; }

/* Shop pagination styled */
.rl-cat-main-wrap .woocommerce-pagination {
    margin: 40px 0 0;
    text-align: center;
}
.rl-cat-main-wrap .woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}
.rl-cat-main-wrap .woocommerce-pagination ul.page-numbers li {
    border: none;
    margin: 0;
}
.rl-cat-main-wrap .woocommerce-pagination ul.page-numbers li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--border);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all .2s ease;
}
.rl-cat-main-wrap .woocommerce-pagination ul.page-numbers li .page-numbers:hover { border-color: var(--ink); }
.rl-cat-main-wrap .woocommerce-pagination ul.page-numbers li .page-numbers.current { background: var(--ink); color: white; border-color: var(--ink); }

/* Responsive */
@media (max-width: 1100px) {
    .rl-cat-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rl-cat-title { font-size: 30px; }
    .rl-cat-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .rl-cat-stats > div { padding: 12px 14px; }
    .rl-cat-toolbar { flex-direction: column; align-items: flex-start; }
}

/* Quick add button state (loading + toast) */
.rl-pcard-quick.loading { opacity: 0.7; pointer-events: none; }
.rl-toast {
    position: fixed;
    bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: white;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 10px;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.rl-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rl-toast.rl-toast-error { background: var(--sale); }
.rl-toast svg { width: 16px; height: 16px; stroke: #C9F25B; fill: none; }
.rl-toast.rl-toast-error svg { stroke: white; }

/* === Pop-in confirmation ajout panier (#13) === */
.rl-cartpop {
    position: fixed; inset: 0; z-index: 10000;
    box-sizing: border-box;
    display: none; align-items: center; justify-content: center;
    background: rgba(19,19,19,.5);
    padding: 20px;
    opacity: 0;
    transition: opacity .18s ease;
}
.rl-cartpop.open { display: flex; opacity: 1; }
.rl-cartpop-card {
    position: relative;
    box-sizing: border-box;
    width: 100%; max-width: 380px;
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(19,19,19,.28);
    transform: translateY(10px) scale(.98);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.rl-cartpop.open .rl-cartpop-card { transform: translateY(0) scale(1); }
.rl-cartpop-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--muted);
    width: 36px; height: 36px;
}
.rl-cartpop-close:hover { color: var(--ink); }
.rl-cartpop-icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--success-l, #e6f4ec);
    color: var(--success, #2F7D5B);
    display: flex; align-items: center; justify-content: center;
}
.rl-cartpop-icon svg { width: 28px; height: 28px; }
.rl-cartpop-title { font-size: 19px; font-weight: 700; color: var(--ink); }
.rl-cartpop-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; min-height: 18px; }
.rl-cartpop-actions {
    display: flex; gap: 10px; margin-top: 22px;
}
.rl-cartpop-actions .rl-btn { flex: 1; box-sizing: border-box; justify-content: center; }
.rl-cartpop-viewcart {
    display: inline-block; margin-top: 14px;
    font-size: 13px; font-weight: 600; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px;
}
.rl-cartpop-viewcart:hover { color: var(--primary, #C9302C); }
@media (max-width: 420px) {
    .rl-cartpop-actions { flex-direction: column; }
}

/* === Cart icon pulse on add === */
@keyframes rl-cart-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
@keyframes rl-count-flash {
    0%   { background: var(--accent); }
    40%  { background: var(--primary); box-shadow: 0 0 0 6px rgba(201,48,44,.22); }
    100% { background: var(--accent); box-shadow: 0 0 0 0 rgba(201,48,44,0); }
}
.rl-icon-btn .num,
.rl-cart-count {
    transition: background .25s ease, box-shadow .35s ease;
}
.rl-icon-btn.rl-bumping {
    animation: rl-cart-bump .55s ease;
}
.rl-icon-btn.rl-bumping .num,
.rl-icon-btn.rl-bumping .rl-cart-count {
    animation: rl-count-flash .8s ease;
}

/* === Header sticky wrap : promo + header restent ensemble en scroll === */
.rl-header-stack {
    position: sticky;
    top: 0;
    z-index: 90;
    background: white;
}
/* Annule l'ancien sticky sur le header seul (il est déjà dans le stack sticky) */
.rolllux-2026 .rl-site-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}
/* Cleanup : empêche Divi de re-position fixer son et_fixed_nav (qu'on ne render plus) */
.rolllux-2026 #main-header,
.rolllux-2026 #top-header { display: none !important; }

/* === Cart bump amélioré : effet beaucoup plus visible === */
@keyframes rl-cart-bump-v2 {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.55) rotate(-6deg); }
    50%  { transform: scale(0.92) rotate(4deg); }
    75%  { transform: scale(1.15) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes rl-count-flash-v2 {
    0%   { background: var(--accent); box-shadow: 0 0 0 0 rgba(201,48,44,0); }
    20%  { background: var(--primary); box-shadow: 0 0 0 10px rgba(201,48,44,.35); transform: scale(1.4); }
    60%  { background: var(--primary); box-shadow: 0 0 0 18px rgba(201,48,44,0); transform: scale(1); }
    100% { background: var(--accent); box-shadow: 0 0 0 0 rgba(201,48,44,0); transform: scale(1); }
}
@keyframes rl-plusone-float {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    20%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -38px) scale(1); }
}

.rl-icon-btn.rl-bumping {
    animation: rl-cart-bump-v2 .65s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 10;
}
.rl-icon-btn.rl-bumping .num,
.rl-icon-btn.rl-bumping .rl-cart-count {
    animation: rl-count-flash-v2 1s ease;
    transform-origin: center;
}

/* +1 floating au-dessus de l'icône */
.rl-plusone {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, 0);
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    animation: rl-plusone-float .9s ease forwards;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(201,48,44,.4);
}

/* Badge num — assurer position absolue (au cas où fragment WC le casse) */
.rolllux-2026 .rl-icon-btn .num,
.rolllux-2026 .rl-icon-btn .rl-cart-count {
    position: absolute !important;
    top: 4px;
    right: 4px;
    background: var(--accent);
    color: white;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Badge masqué quand vide (wishlist à 0) */
.rolllux-2026 .rl-icon-btn .num.rl-count-empty { display: none !important; }

/* Toast — verrouillage taille SVG pour éviter le rendu géant */
.rl-toast { max-width: 360px; }
.rl-toast > svg,
.rl-toast svg:first-child {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    flex-shrink: 0;
}

/* ============================================================
   PDP — Sticky Add-to-cart bottom bar (mobile)
   ============================================================ */
@media (max-width: 880px) {
    .rl-pdp .rl-pdp-actions {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999 !important;
        background: white;
        padding: 12px 16px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
        box-shadow: 0 -6px 20px rgba(19,19,19,0.12);
        border-top: 1px solid var(--border-l);
        display: flex !important;
        gap: 8px;
        margin: 0 !important;
        isolation: isolate;
    }
    .rl-pdp .rl-pdp-actions .rl-pdp-add {
        flex: 1;
        font-size: 14.5px !important;
        padding: 14px 18px !important;
    }
    .rl-pdp .rl-pdp-actions .rl-pdp-icon-btn {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    body.single-product { padding-bottom: 110px !important; }
    body.single-product .rl-pdp-reviews-section { padding-bottom: 20px; }
    body.single-product .rl-may-like { padding-bottom: 20px; }

    /* Anti-conflit z-index — empêcher dautres fixed Divi/WC de passer dessus */
    body.single-product #et_mobile_nav_menu,
    body.single-product .mobile_nav { z-index: 100 !important; }
}

/* Sticky bar mobile relocated en direct enfant body */
body > .rl-pdp-actions-relocated {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    background: white;
    padding: 12px 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    box-shadow: 0 -6px 20px rgba(19,19,19,0.12);
    border-top: 1px solid var(--border-l);
    display: flex !important;
    gap: 8px;
    margin: 0 !important;
    isolation: isolate;
}
body > .rl-pdp-actions-relocated .rl-pdp-add {
    flex: 1;
    font-size: 14.5px !important;
    padding: 14px 18px !important;
}
body > .rl-pdp-actions-relocated .rl-pdp-icon-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
@media (min-width: 881px) {
    body > .rl-pdp-actions-relocated { display: none !important; }
}

/* ============================================================
   WISHLIST (custom button + YITH backend)
   ============================================================ */
.rl-wishlist-btn {
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
    border: none;
    background: none;
}
.rl-wishlist-btn svg { transition: fill .25s ease, stroke .25s ease; }
.rl-wishlist-btn.active svg {
    fill: var(--sale) !important;
    stroke: var(--sale) !important;
}
.rl-wishlist-btn.loading { opacity: 0.6; pointer-events: none; }

/* PDP : utilise le style .rl-pdp-icon-btn de base */
.rl-pdp-icon-btn.rl-wishlist-btn.active { border-color: var(--sale); background: var(--sale-l); }

/* Card : utilise le style .rl-pcard-wishlist de base */
.rl-pcard-wishlist.rl-wishlist-btn { background: white; }
.rl-pcard-wishlist.rl-wishlist-btn.active { background: white; }
.rl-pcard-wishlist.rl-wishlist-btn.active svg { fill: var(--sale); stroke: var(--sale); }

/* Cache l'output React YITH (qu'on n'utilise pas) si jamais inséré */
.yith-add-to-wishlist-button-block { display: none !important; }

/* ============================================================
   GLOBAL : sidebar Divi cachée dès qu'on est en no-sidebar
   Divi pousse #left-area full-width via .et_no_sidebar mais ne
   masque pas #sidebar — on le fait nous-mêmes pour tout le thème.
   ============================================================ */
body.rolllux-no-sidebar #sidebar,
body.et_no_sidebar.rolllux-2026 #sidebar { display: none !important; }

/* ============================================================
   WISHLIST PAGE (YITH WCWL)
   ============================================================ */

/* On a déjà le H1 "Wishlist" Divi → on masque le H2 doublon "My wishlist" */
.rolllux-wishlist-page .wishlist-title-container,
.rolllux-wishlist-page .wishlist-title { display: none !important; }

/* Titre page : ton Roll-Lux */
.rolllux-wishlist-page .entry-title.main_title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-size: 42px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 24px 0 32px;
    padding-bottom: 0;
}

/* Le form WC enrobant : retire les paddings de la zone .entry-content Divi */
.rolllux-wishlist-page #yith-wcwl-form {
    margin: 0 auto;
    max-width: 1180px;
}

/* === Table wishlist === */
.rolllux-wishlist-page .wishlist_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 24px;
}
.rolllux-wishlist-page .wishlist_table thead {
    background: var(--surface);
}
.rolllux-wishlist-page .wishlist_table thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border: none;
    border-bottom: 1px solid var(--border-l);
}
.rolllux-wishlist-page .wishlist_table thead th .nobr { white-space: nowrap; }
.rolllux-wishlist-page .wishlist_table tbody td {
    padding: 18px;
    border: none;
    border-bottom: 1px solid var(--border-l);
    vertical-align: middle;
    color: var(--ink);
    background: white;
}
.rolllux-wishlist-page .wishlist_table tbody tr:last-child td { border-bottom: none; }
.rolllux-wishlist-page .wishlist_table tbody tr:hover td { background: var(--surface); }

/* Colonne remove (croix) */
.rolllux-wishlist-page .wishlist_table .product-remove { width: 56px; text-align: center; }
.rolllux-wishlist-page .wishlist_table .product-remove .remove,
.rolllux-wishlist-page .wishlist_table .product-remove a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 18px; line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rolllux-wishlist-page .wishlist_table .product-remove .remove:hover {
    background: var(--sale-l, #fdecea);
    color: var(--sale);
    transform: scale(1.08);
}

/* Colonne thumbnail */
.rolllux-wishlist-page .wishlist_table .product-thumbnail { width: 110px; }
.rolllux-wishlist-page .wishlist_table .product-thumbnail img {
    width: 84px; height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-l);
    background: var(--surface);
    display: block;
}
.rolllux-wishlist-page .wishlist_table .product-thumbnail a { display: inline-block; }

/* Colonne nom produit */
.rolllux-wishlist-page .wishlist_table .product-name a {
    color: var(--ink);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
}
.rolllux-wishlist-page .wishlist_table .product-name a:hover { text-decoration: underline; }
.rolllux-wishlist-page .wishlist_table .product-name .wishlist-item-meta {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

/* Colonne prix */
.rolllux-wishlist-page .wishlist_table .product-price {
    font-weight: 600;
    color: var(--ink);
    font-size: 15px;
    white-space: nowrap;
}
.rolllux-wishlist-page .wishlist_table .product-price del { color: var(--soft); font-weight: 400; margin-right: 6px; }
.rolllux-wishlist-page .wishlist_table .product-price ins { background: none; text-decoration: none; color: var(--sale); }

/* Colonne stock */
.rolllux-wishlist-page .wishlist_table .product-stock-status .wishlist-in-stock { color: var(--success, #2F7D5B); font-weight: 600; }
.rolllux-wishlist-page .wishlist_table .product-stock-status .wishlist-out-of-stock { color: var(--sale); font-weight: 600; }

/* Colonne add-to-cart — !important pour battre le global .woocommerce a.button */
.rolllux-wishlist-page .wishlist_table .product-add-to-cart { text-align: right; }
.rolllux-wishlist-page .wishlist_table .product-add-to-cart a.button,
.rolllux-wishlist-page .wishlist_table .product-add-to-cart button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.rolllux-wishlist-page .wishlist_table .product-add-to-cart a.button:hover,
.rolllux-wishlist-page .wishlist_table .product-add-to-cart button:hover {
    background: var(--primary, #C9302C) !important;
    transform: translateY(-1px);
}

/* Empty state */
.rolllux-wishlist-page .wishlist_table tbody td.wishlist-empty {
    text-align: center;
    padding: 64px 24px;
    font-size: 15px;
    color: var(--muted);
    background: white;
}
.rolllux-wishlist-page .wishlist_table tbody td.wishlist-empty::before {
    content: "♡";
    display: block;
    font-size: 56px;
    color: var(--border-l, #e0d8c8);
    margin-bottom: 12px;
    line-height: 1;
}

/* Footer (boutons partage / actions) */
.rolllux-wishlist-page .yith_wcwl_wishlist_footer {
    margin-top: 16px;
    text-align: right;
}

/* === Share : icônes alignées sur le footer du site + "Share on" centré (#26) === */
.rolllux-wishlist-page .yith-wcwl-share.rl-wishlist-share {
    display: flex;
    align-items: center;
    justify-content: center;   /* centré desktop ET mobile */
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 28px 0 4px;
    text-align: center;
}
.rolllux-wishlist-page .rl-wishlist-share .yith-wcwl-share-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.rolllux-wishlist-page .rl-wishlist-share ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rolllux-wishlist-page .rl-wishlist-share li.share-button { margin: 0; padding: 0; }
.rolllux-wishlist-page .rl-wishlist-share li.share-button a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-l);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rolllux-wishlist-page .rl-wishlist-share li.share-button a:hover {
    background: var(--primary, #C9302C);
    border-color: var(--primary, #C9302C);
    color: #fff;
}
.rolllux-wishlist-page .rl-wishlist-share li.share-button a svg {
    width: 17px; height: 17px;
    stroke: currentColor; fill: none; stroke-width: 1.6;
}

/* Responsive : table en cards mobile */
@media (max-width: 768px) {
    .rolllux-wishlist-page .entry-title.main_title { font-size: 32px; margin: 16px 0 20px; }
    /* ⚠️ Ces règles convertissent le TABLEAU DESKTOP en cartes. Scopées
       :not(.mobile) car YITH sert un template mobile dédié (ul.wishlist_table.mobile)
       avec des <table> internes (prix/stock) ; sans ce scope, ces règles fuitent
       dans ces tables internes (border + display:grid) et cassent l'alignement. */
    .rolllux-wishlist-page .wishlist_table:not(.mobile) thead { display: none; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile),
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody,
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tr,
    .rolllux-wishlist-page .wishlist_table:not(.mobile) td { display: block; width: 100%; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) {
        background: transparent;
        border: none;
        border-radius: 0;
    }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody tr {
        background: white;
        border: 1px solid var(--border-l);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 16px;
        display: grid;
        grid-template-columns: 84px 1fr 36px;
        grid-template-rows: auto auto;
        gap: 10px 14px;
        align-items: center;
    }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody td {
        padding: 0;
        border: none;
        background: transparent;
    }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody tr:hover td { background: transparent; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-thumbnail { grid-row: 1 / 3; grid-column: 1; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-name      { grid-row: 1; grid-column: 2; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-price     { grid-row: 2; grid-column: 2; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-remove    { grid-row: 1 / 3; grid-column: 3; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-add-to-cart { grid-column: 1 / -1; text-align: stretch; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-add-to-cart a.button,
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-add-to-cart button { width: 100%; justify-content: center; }
    /* Empty state en card unique */
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody tr:has(td.wishlist-empty) {
        display: block;
        padding: 0;
        border-radius: 12px;
    }
}

/* ============================================================
   WISHLIST — template MOBILE de YITH (ul.wishlist_table.mobile)
   YITH bascule via wp_is_mobile() (UA serveur), markup ≠ table desktop
   (<ul><li> + .item-wrapper/.item-details/.additional-info). La classe
   .mobile n'existe QUE sur mobile → on style SANS media query.
   ============================================================ */
.rolllux-wishlist-page ul.wishlist_table.mobile {
    list-style: none;
    margin: 0 auto 24px;
    padding: 0;
    border: none;
    background: transparent;
    display: grid;
    gap: 14px;
    max-width: 640px;
}
.rolllux-wishlist-page .wishlist_table.mobile > li {
    list-style: none;
    position: relative;
    background: #fff;
    border: 1px solid var(--border-l);
    border-radius: 14px;
    padding: 16px;
    margin: 0;
    box-sizing: border-box;
}
.rolllux-wishlist-page .wishlist_table.mobile .item-wrapper {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.rolllux-wishlist-page .wishlist_table.mobile .product-thumbnail { flex: 0 0 88px; width: 88px; }
.rolllux-wishlist-page .wishlist_table.mobile .product-thumbnail img {
    width: 88px; height: 88px; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--border-l);
    background: var(--surface); display: block;
}
.rolllux-wishlist-page .wishlist_table.mobile .item-details { flex: 1; min-width: 0; }
.rolllux-wishlist-page .wishlist_table.mobile .product-name h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.rolllux-wishlist-page .wishlist_table.mobile .product-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
.rolllux-wishlist-page .wishlist_table.mobile .product-name a:hover { text-decoration: underline; }

/* tables internes (détails + infos) → lignes label / valeur épurées */
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info {
    width: 100%; border-collapse: collapse; margin: 8px 0 0; background: transparent;
}
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table td,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info td {
    border: none; padding: 3px 0; font-size: 13px; vertical-align: middle; background: transparent;
}
.rolllux-wishlist-page .wishlist_table.mobile td.label {
    color: var(--muted); width: 1%; white-space: nowrap; padding-right: 14px;
    text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 600;
}
.rolllux-wishlist-page .wishlist_table.mobile td.value,
.rolllux-wishlist-page .wishlist_table.mobile td.product-quantity { color: var(--ink); font-weight: 600; }
.rolllux-wishlist-page .wishlist_table.mobile .product-quantity input {
    width: 70px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
    box-sizing: border-box;
}
.rolllux-wishlist-page .wishlist_table.mobile .wishlist-in-stock { color: var(--success, #2F7D5B); }
.rolllux-wishlist-page .wishlist_table.mobile .wishlist-out-of-stock { color: var(--sale); }

/* aligne la ligne Stock sous le bloc détails (largeur image 88px + gap 14px) */
.rolllux-wishlist-page .wishlist_table.mobile .additional-info-wrapper { margin-top: 4px; padding-left: 102px; }
.rolllux-wishlist-page .wishlist_table.mobile .additional-info-wrapper table.additional-info { margin-top: 0; }

/* add-to-cart pleine largeur en card mobile */
.rolllux-wishlist-page .wishlist_table.mobile .product-add-to-cart { margin-top: 12px; text-align: stretch; }
.rolllux-wishlist-page .wishlist_table.mobile .product-add-to-cart a.button,
.rolllux-wishlist-page .wishlist_table.mobile .product-add-to-cart button { width: 100%; box-sizing: border-box; }

/* multi-wishlist : non utilisé sur ce site → masqué */
.rolllux-wishlist-page .wishlist_table.mobile .move-to-another-wishlist { display: none; }

/* remove : pastille croix en haut à droite de la card (indépendant de Font Awesome) */
.rolllux-wishlist-page .wishlist_table.mobile .product-remove {
    position: absolute; top: 12px; right: 12px; margin: 0;
}
.rolllux-wishlist-page .wishlist_table.mobile .product-remove a.remove_from_wishlist {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface); color: var(--muted);
    text-decoration: none; line-height: 1;
}
.rolllux-wishlist-page .wishlist_table.mobile .product-remove a.remove_from_wishlist:hover {
    background: var(--sale-l, #fdecea); color: var(--sale);
}
.rolllux-wishlist-page .wishlist_table.mobile .product-remove a.remove_from_wishlist i { display: none; }
.rolllux-wishlist-page .wishlist_table.mobile .product-remove a.remove_from_wishlist::after { content: "\00d7"; font-size: 18px; }
.rolllux-wishlist-page .wishlist_table.mobile .product-checkbox { position: absolute; top: 14px; left: 14px; }

/* empty state (markup mobile) */
.rolllux-wishlist-page ul.wishlist_table.mobile > .wishlist-empty,
.rolllux-wishlist-page .wishlist_table.mobile .wishlist-empty {
    text-align: center; padding: 48px 20px; color: var(--muted);
    background: #fff; border: 1px solid var(--border-l); border-radius: 14px; margin: 0;
}

/* ============================================================
   HEADER SEARCH AUTOCOMPLETE
   ============================================================ */
.rl-search-box { position: relative; }

.rl-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(19,19,19,0.14), 0 2px 6px rgba(19,19,19,0.06);
    border: 1px solid var(--border-l);
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    min-width: 360px;
}
.rl-search-box:focus-within .rl-search-results { min-width: 420px; }

.rl-search-list { list-style: none; margin: 0; padding: 0; }
.rl-search-list li { margin: 0; padding: 0; }
.rl-search-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    transition: background .12s ease;
}
.rl-search-item:hover,
.rl-search-item:focus { background: var(--surface); outline: none; }

.rl-search-thumb {
    width: 52px; height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-l);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rl-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rl-search-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-search-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.rl-search-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rl-search-title mark { background: var(--star-l, #FEF4D6); color: inherit; padding: 0 2px; border-radius: 2px; }
.rl-search-price { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.rl-search-price del { color: var(--soft); font-weight: 400; margin-right: 4px; }
.rl-search-price ins { text-decoration: none; background: none; color: var(--sale); }

a.rl-search-viewall,
a.rl-search-viewall:link,
a.rl-search-viewall:visited {
    display: block;
    text-align: center;
    margin: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--primary, #C9302C);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
a.rl-search-viewall:hover,
a.rl-search-viewall:focus { background: var(--primary-h, #94221E); color: #fff !important; }

.rl-search-empty,
.rl-search-loading {
    padding: 22px 14px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
}
.rl-search-loading::after {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid var(--border-l);
    border-top-color: var(--ink);
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: rl-spin 0.7s linear infinite;
}
@keyframes rl-spin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
    .rl-search-results { min-width: 280px; left: auto; right: 0; }
}

/* ============================================================
   SHOP GRID — fix première cellule vide
   WC ajoute des pseudo-éléments ::before / ::after sur ul.products
   (vieille technique clearfix pour float). En grid, ils deviennent
   des items de grille → la 1ère cellule paraît vide.
   ============================================================ */
.rolllux-2026 ul.products::before,
.rolllux-2026 ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   INFO PAGES — supprime le titre Divi auto qui doublonne avec
   le titre stylisé du contenu (shipping, returns, etc.)
   Le wishlist garde le sien (on l'a stylé) via rolllux-wishlist-page.
   ============================================================ */
body.rolllux-custom-page .entry-title.main_title,
body.rolllux-custom-page #main-content .container > #content-area > #left-area > article > .entry-title { display: none !important; }

/* Sur les pages info, le contenu peut occuper toute la largeur sans le padding Divi par défaut */
body.rolllux-custom-page #left-area { padding-right: 0 !important; }

/* ============================================================
   LIMITED EDITION block — espacement + bouton visible
   ============================================================ */
.rl-lifestyle-content {
    /* Augmente le padding vertical pour ne plus coller au bord */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.rl-lifestyle-content .eyebrow {
    margin-bottom: 24px !important;
}
.rl-lifestyle-content h2 {
    margin-bottom: 28px !important;
}
.rl-lifestyle-content p {
    margin-bottom: 36px !important;
}
/* Bouton "Shop the Black & Red" : fond crème clair → invisible.
   On force un fond chaud (or-cuivré) qui ressort sur le dégradé teal foncé. */
.rl-lifestyle .rl-btn-light,
.rl-lifestyle a.rl-btn-light:link,
.rl-lifestyle a.rl-btn-light:visited {
    background: #F5DCC0 !important;
    color: #1A1A1A !important;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.rl-lifestyle .rl-btn-light:hover,
.rl-lifestyle a.rl-btn-light:hover {
    background: #FFFFFF !important;
    color: #131313 !important;
    transform: translateY(-1px);
}

/* ============================================================
   REVIEWS — mini bloc produit cliquable
   ============================================================ */
.rl-review-card .product-tag,
a.rl-review-product-link {
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
}
a.rl-review-product-link:hover {
    background: var(--surface);
    transform: translateY(-1px);
}
a.rl-review-product-link:hover .mini-img {
    transform: scale(1.04);
}

/* ============================================================
   COOKIE BANNER (RGPD)
   ============================================================ */
.rl-cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 9000;
    background: white;
    border-radius: 16px;
    box-shadow: 0 16px 60px rgba(19,19,19,0.18), 0 4px 12px rgba(19,19,19,0.08);
    border: 1px solid var(--border-l);
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 22px;
    transform: translateY(40px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}
.rl-cookie-banner.visible { transform: translateY(0); opacity: 1; }
.rl-cookie-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.rl-cookie-text { flex: 1 1 280px; min-width: 240px; }
.rl-cookie-text strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--ink);
    font-weight: 700;
}
.rl-cookie-text p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}
.rl-cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.rl-cookie-actions .rl-btn {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 999px;
}
@media (max-width: 600px) {
    .rl-cookie-banner { padding: 16px; left: 8px; right: 8px; bottom: 8px; }
    .rl-cookie-actions { width: 100%; }
    .rl-cookie-actions .rl-btn { flex: 1; }
}

/* ============================================================
   MY ACCOUNT — styling complet (orders, dashboard, addresses, downloads)
   Layout : wrapper .rl-myaccount-wrap (1280px centered via .rl-container).
            nav full-width on top, content full-width below.
   ============================================================ */
body.woocommerce-account .rl-myaccount-wrap {
    max-width: 1280px; /* same width as checkout, cf. L2017 */
    padding: 30px 32px 80px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 14px;
    padding: 8px;
    margin-bottom: 24px;
}
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    clear: both;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;     /* override Divi `.entry-content ul { list-style-type: disc }` */
    margin: 0;
    padding: 0 !important;           /* override Divi `.entry-content ul { padding: 0 0 23px 1em }` */
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    list-style: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px 18px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background: var(--surface);
    color: var(--ink);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--ink);
    color: white;
}

/* Account content (full width below nav) */
body.woocommerce-account .woocommerce-MyAccount-content {
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 14px;
    padding: 28px 30px;
}
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 16px;
}
body.woocommerce-account .woocommerce-MyAccount-content p { color: var(--text); line-height: 1.65; }
body.woocommerce-account .woocommerce-MyAccount-content a { color: var(--primary); text-decoration: none; }
body.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--primary-h); text-decoration: underline; }

/* Account orders table — même look que la wishlist */
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .shop_table.account-orders-table,
body.woocommerce-account table.shop_table:not(.order_details) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 24px;
}
body.woocommerce-account table.shop_table:not(.order_details) thead { background: var(--surface); }
body.woocommerce-account table.shop_table:not(.order_details) thead th {
    padding: 14px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border: none;
    border-bottom: 1px solid var(--border-l);
}
body.woocommerce-account table.shop_table:not(.order_details) tbody td,
body.woocommerce-account table.shop_table:not(.order_details) tbody th {
    padding: 16px 18px;
    border: none;
    border-bottom: 1px solid var(--border-l);
    vertical-align: middle;
    color: var(--ink);
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}
body.woocommerce-account table.shop_table:not(.order_details) tbody tr:last-child td,
body.woocommerce-account table.shop_table:not(.order_details) tbody tr:last-child th { border-bottom: none; }
body.woocommerce-account table.shop_table:not(.order_details) tbody tr:hover td,
body.woocommerce-account table.shop_table:not(.order_details) tbody tr:hover th { background: var(--surface); }
body.woocommerce-account table.shop_table:not(.order_details) .order-actions,
body.woocommerce-account table.shop_table:not(.order_details) .woocommerce-orders-table__cell-order-actions {
    display: flex !important;        /* force le flex (Divi/WC peut remettre table-cell → boutons collés) */
    justify-content: flex-end;
    align-items: center;
    gap: 12px !important;            /* !important : sinon un gap:0 hérité colle les boutons */
    text-align: right;
}
/* Neutralise la flèche ETmodules (Divi) ajoutée en ::after sur les boutons
   account — superposée au texte au hover et mal positionnée */
body.woocommerce-account table.shop_table:not(.order_details) .button::after,
body.woocommerce-account table.shop_table:not(.order_details) .button::before,
body.woocommerce-account .woocommerce-MyAccount-content > .button::after,
body.woocommerce-account .woocommerce-MyAccount-content > .button::before {
    content: none !important;
    display: none !important;
}
body.woocommerce-account table.shop_table:not(.order_details) .order-actions .button,
body.woocommerce-account table.shop_table:not(.order_details) .button,
body.woocommerce-account .woocommerce-MyAccount-content form .button,
body.woocommerce-account .woocommerce-MyAccount-content > .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: white !important;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
body.woocommerce-account table.shop_table:not(.order_details) .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content form .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content > .button:hover {
    background: var(--primary, #C9302C);
    transform: translateY(-1px);
}

/* Order-received (thankyou): Invoice / order-action buttons — kill the Divi
   ::after arrow (same bug as account) + brand pill style. */
.rl-thankyou .woocommerce-button.button::after,
.rl-thankyou .woocommerce-button.button::before,
.rl-thankyou a.button.invoice::after,
.rl-thankyou a.button.invoice::before,
.rl-thankyou .order-actions-button::after,
.rl-thankyou .order-actions-button::before { content: none !important; display: none !important; }
.rl-thankyou .woocommerce-button.button,
.rl-thankyou a.button.invoice,
.rl-thankyou .order-actions-button {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: var(--ink) !important; color: #fff !important; border: 0 !important;
    border-radius: 999px !important; padding: 10px 20px !important;
    font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
    box-shadow: none !important; transition: background .15s ease, transform .15s ease;
}
.rl-thankyou .woocommerce-button.button:hover,
.rl-thankyou a.button.invoice:hover,
.rl-thankyou .order-actions-button:hover { background: #000 !important; transform: translateY(-1px); }

/* Order-received: force the two address columns into a clean equal grid
   (WC/Divi float them at ~47% width, which shrinks + misaligns them). */
.rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important;
    width: 100% !important; float: none !important; margin: 0 !important; align-items: start;
}
/* Kill the col2-set clearfix pseudo-elements: on a grid container they become
   phantom grid items and shove the address columns out of alignment. */
.rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses::before,
.rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses::after { content: none !important; display: none !important; }
.rl-thankyou .woocommerce-customer-details .woocommerce-column {
    width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
.rl-thankyou .woocommerce-customer-details .woocommerce-column__title { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.rl-thankyou .woocommerce-customer-details .woocommerce-customer-details--email { margin: 8px 0 0; word-break: break-word; }
@media (max-width: 640px){ .rl-thankyou .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr !important; } }
body.woocommerce-account mark.order-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.woocommerce-account mark.order-status.status-completed { background: #E6F4EC; color: #1F5C40; }
body.woocommerce-account mark.order-status.status-processing { background: #FEF4D6; color: #6B5004; }
body.woocommerce-account mark.order-status.status-cancelled,
body.woocommerce-account mark.order-status.status-failed { background: #FDE8E7; color: #94221E; }

/* Empty state (no orders, no downloads) */
body.woocommerce-account .woocommerce-Message,
body.woocommerce-account .woocommerce-info {
    background: var(--surface);
    border: 1px dashed var(--border-l);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14.5px;
}
body.woocommerce-account .woocommerce-Message a,
body.woocommerce-account .woocommerce-info a { color: var(--primary); font-weight: 600; }

/* Login / register forms when not authenticated */
body.woocommerce-account .u-columns .u-column1,
body.woocommerce-account .u-columns .u-column2,
body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register {
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 14px;
    padding: 28px 30px;
}
/* Single-column login (no registration): cap form width so it doesn't span the
   whole 1280px wrapper. Title + form share the same max-width and centering. */
body.woocommerce-account .rl-myaccount-login > h2,
body.woocommerce-account .rl-myaccount-login > form.woocommerce-form-login {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
body.woocommerce-account .rl-myaccount-login > h2 {
    text-align: center;
    margin-top: 8px;
}
body.woocommerce-account form.woocommerce-form-login .form-row label,
body.woocommerce-account form.woocommerce-form-register .form-row label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.woocommerce-account form.woocommerce-form-login input[type="text"],
body.woocommerce-account form.woocommerce-form-login input[type="email"],
body.woocommerce-account form.woocommerce-form-login input[type="password"],
body.woocommerce-account form.woocommerce-form-register input[type="text"],
body.woocommerce-account form.woocommerce-form-register input[type="email"],
body.woocommerce-account form.woocommerce-form-register input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-l);
    border-radius: 10px;
    background: white;
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .15s ease;
}
body.woocommerce-account form.woocommerce-form-login input:focus,
body.woocommerce-account form.woocommerce-form-register input:focus {
    outline: none;
    border-color: var(--ink);
}

@media (max-width: 768px) {
    body.woocommerce-account .woocommerce-MyAccount-content { padding: 18px; }
    body.woocommerce-account table.shop_table:not(.order_details) thead { display: none; }
    /* En mobile chaque ligne devient une card → on annule le cadre/fond du <table>
       lui-même, sinon double container (card dans card). Mêmes 3 sélecteurs que la
       règle d'origine (sinon .account-orders-table, +spécifique, garde le cadre). */
    body.woocommerce-account .woocommerce-orders-table,
    body.woocommerce-account .shop_table.account-orders-table,
    body.woocommerce-account table.shop_table:not(.order_details) {
        border: 0; border-radius: 0; background: transparent; overflow: visible; margin: 0;
    }
    /* Lignes en blocs séparés (PAS de card par ligne) : la .woocommerce-MyAccount-content
       est déjà une card → une card par ligne ferait un doublon de container (retour Cyril). */
    body.woocommerce-account table.shop_table:not(.order_details) tbody tr {
        display: block;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--border-l);
        border-radius: 0;
        margin: 0;
        padding: 16px 0;
    }
    body.woocommerce-account table.shop_table:not(.order_details) tbody tr:first-child { padding-top: 0; }
    body.woocommerce-account table.shop_table:not(.order_details) tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
    body.woocommerce-account table.shop_table:not(.order_details) tbody td,
    body.woocommerce-account table.shop_table:not(.order_details) tbody th {
        display: block;
        padding: 8px 0;
        border: none;
        text-align: right;
        font-size: 14px;
        line-height: 1.45;
        overflow: hidden;
    }
    body.woocommerce-account table.shop_table:not(.order_details) tbody td::before,
    body.woocommerce-account table.shop_table:not(.order_details) tbody th::before {
        content: attr(data-title);
        float: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding-top: 3px;
    }
    body.woocommerce-account table.shop_table:not(.order_details) tbody .woocommerce-orders-table__cell-order-actions {
        padding-top: 12px;
    }
}

/* ============================================================
   Google Sign In — rendered above the WC login form via GIS
   ============================================================ */
body.woocommerce-account .rl-google-login {
    margin: 0 auto 8px;
    max-width: 440px;
    text-align: center;
}
body.woocommerce-account .rl-google-login .g_id_signin {
    display: inline-block;
}
body.woocommerce-account .rl-google-login-sep {
    position: relative;
    margin: 22px 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.woocommerce-account .rl-google-login-sep::before,
body.woocommerce-account .rl-google-login-sep::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 28px);
    height: 1px;
    background: var(--border-l);
}
body.woocommerce-account .rl-google-login-sep::before { left: 0; }
body.woocommerce-account .rl-google-login-sep::after  { right: 0; }
body.woocommerce-account .rl-google-login-sep span {
    background: var(--surface);
    padding: 0 12px;
    position: relative;
}
body.woocommerce-account .rl-google-login-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--sale-l, #FDE8E7);
    color: var(--sale, #94221E);
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
}

/* ============================================================
   Magic-link (passwordless) form — rendered between Google btn
   and the classic WC password form (hidden by default)
   ============================================================ */
body.woocommerce-account .rl-magic-link {
    max-width: 440px;
    margin: 0 auto 8px;
}
body.woocommerce-account .rl-magic-link-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
body.woocommerce-account .rl-magic-link-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--border-l);
    border-radius: 10px;
    background: white;
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .15s ease;
    margin-bottom: 12px;
}
body.woocommerce-account .rl-magic-link-form input[type="email"]:focus {
    outline: none;
    border-color: var(--ink);
}
body.woocommerce-account .rl-magic-link-form .rl-magic-link-submit {
    width: 100%;
    padding: 13px 18px;
    background: var(--ink) !important;  /* defeat Divi `.button { background: white !important; color: ink }` */
    color: white !important;
    border: none !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
body.woocommerce-account .rl-magic-link-form .rl-magic-link-submit:hover:not(:disabled) {
    background: var(--primary, #C9302C);
    transform: translateY(-1px);
}
body.woocommerce-account .rl-magic-link-form .rl-magic-link-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
body.woocommerce-account .rl-magic-link-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
}
body.woocommerce-account .rl-magic-link-status.is-ok {
    background: #E6F4EC;
    color: #1F5C40;
}
body.woocommerce-account .rl-magic-link-status.is-err {
    background: var(--sale-l, #FDE8E7);
    color: var(--sale, #94221E);
}
body.woocommerce-account .rl-magic-link-error {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--sale-l, #FDE8E7);
    color: var(--sale, #94221E);
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
}
body.woocommerce-account .rl-magic-link-sep {
    position: relative;
    margin: 22px 0 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}
body.woocommerce-account .rl-magic-link-sep::before,
body.woocommerce-account .rl-magic-link-sep::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 28px);
    height: 1px;
    background: var(--border-l);
}
body.woocommerce-account .rl-magic-link-sep::before { left: 0; }
body.woocommerce-account .rl-magic-link-sep::after  { right: 0; }
body.woocommerce-account .rl-magic-link-sep span {
    background: var(--surface);
    padding: 0 12px;
    position: relative;
}
body.woocommerce-account .rl-magic-link-toggle-pw {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border-l);
    color: var(--muted);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
body.woocommerce-account .rl-magic-link-toggle-pw:hover {
    color: var(--ink);
    border-color: var(--ink);
}
/* Hide classic password form by default — toggled via JS (.rl-pw-hidden) */
body.woocommerce-account form.woocommerce-form-login.rl-pw-hidden {
    display: none;
}
body.woocommerce-account .rl-magic-link + form.woocommerce-form-login {
    margin-top: 18px;
}

/* ============================================================
   CHECKOUT fixes — beat WooCommerce core #payment ID-specificity
   (WC core uses .woocommerce-checkout #payment ... which outranks
   our .rl-ck-* class selectors; raise specificity here).
   ============================================================ */
.woocommerce-checkout #payment.rl-ck-payment,
.woocommerce-checkout #payment.woocommerce-checkout-payment {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-checkout #payment .payment_box {
  background: var(--surface) !important; border: 0 !important; border-radius: var(--r-md) !important;
  margin: 12px 0 0 !important; padding: 14px !important; color: var(--muted) !important; font-size: 13.5px !important;
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; content: none !important; border: 0 !important; }
.woocommerce-checkout #payment div.form-row.place-order { display: none !important; } /* place order is in summary */

/* Login / coupon toggle bars — kill default blue woocommerce-info look */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--surface) !important; border: 0 !important; border-top: 0 !important;
  color: var(--text) !important; border-radius: var(--r-md) !important; padding: 14px 18px !important;
  box-shadow: none !important; font-size: 14px !important; margin: 0 0 14px !important;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--primary) !important; font-weight: 600; }

/* Checkout: re-constrain content width (Divi #left-area is forced full-width
   for WC pages; our checkout isn't wrapped in .rl-container like the cart is). */
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-checkout #left-area > article .woocommerce {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* ============================================================
   404 — Page not found (rolllux-2026)
   ============================================================ */
.rl-404 {
  background:
    radial-gradient(900px 420px at 50% -8%, var(--primary-l) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}
.rl-404-inner {
  text-align: center;
  padding: 88px 32px 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rl-404-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 14px;
}
.rl-404-code {
  font-family: var(--font-edit);
  font-weight: 400;
  font-size: clamp(120px, 26vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.02em;
}
/* Le « 0 » devient un rouleau, clin d'œil au ring rouge du logo */
.rl-404-roll {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.04em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 30%, var(--surface) 31% 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-l);
}
.rl-404-roll .ring {
  display: block;
  width: 0.42em;
  height: 0.42em;
  border: 0.085em solid var(--primary);
  border-radius: 50%;
  background: var(--bg);
}
.rl-404-title {
  font-family: var(--font-edit);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin: 22px 0 0;
}
.rl-404-text {
  max-width: 540px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.rl-404-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 34px auto 0;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rl-404-search:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.rl-404-search .rl-svg {
  width: 20px;
  height: 20px;
  color: var(--soft);
  flex: none;
}
.rl-404-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  color: var(--text);
  padding: 10px 4px;
}
.rl-404-search .rl-btn { flex: none; }
.rl-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.rl-404-cats {
  margin-top: 44px;
}
.rl-404-cats-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 14px;
}
.rl-404-cats-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.rl-404-chip {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-l);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rl-404-chip:hover {
  background: #fff;
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .rl-404-inner { padding: 60px 18px 76px; }
  .rl-404-search { flex-wrap: wrap; padding: 10px 12px; }
  .rl-404-search .rl-btn { width: 100%; }
}

/* ============================================================
   PDP REVIEWS — formulaire d'avis (override single-product-reviews.php)
   ============================================================ */
.rl-review-form-wrap {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--border-l);
    max-width: 680px;
}
.rl-review-form-wrap .comment-reply-title {
    display: block;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    color: var(--ink);
}
.rl-review-form-wrap #respond { margin: 0; }
.rl-review-form-wrap .comment-form { display: grid; gap: 16px; }
.rl-review-form-wrap p { margin: 0; }
.rl-review-form-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
}
.rl-review-form-wrap .required { color: var(--sale); }
.rl-review-form-wrap input[type="text"],
.rl-review-form-wrap input[type="email"],
.rl-review-form-wrap textarea,
.rl-review-form-wrap select {
    width: 100%;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rl-review-form-wrap input[type="text"]:focus,
.rl-review-form-wrap input[type="email"]:focus,
.rl-review-form-wrap textarea:focus,
.rl-review-form-wrap select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.rl-review-form-wrap textarea { min-height: 120px; resize: vertical; }
/* Nom + email côte à côte sur desktop */
.rl-review-form-wrap .comment-form-author,
.rl-review-form-wrap .comment-form-email { display: inline-block; }
.rl-review-form-wrap .comment-form-rating select {
    max-width: 220px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}
.rl-review-form-wrap .form-submit { margin-top: 4px; }
.rl-review-form-wrap .form-submit input[type="submit"],
.rl-review-form-wrap #submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: filter .15s ease;
}
.rl-review-form-wrap .form-submit input[type="submit"]:hover,
.rl-review-form-wrap #submit:hover { filter: brightness(0.92); }
.rl-noreviews { color: var(--muted); }

/* Reviews grille responsive */
@media (max-width: 980px) {
    .rl-pdp-reviews-head { grid-template-columns: 1fr !important; gap: 28px !important; }
    .rl-reviews-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    .rl-reviews-grid { grid-template-columns: 1fr !important; }
    .rl-review-form-wrap .comment-form-author,
    .rl-review-form-wrap .comment-form-email { display: block; }
}

/* ============================================================
   SHOP — SIDEBAR FILTRES (inc/shop-filters.php + archive-product.php)
   ============================================================ */
.rl-cat-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 40px;
}
.rl-cat-filters {
    position: sticky;
    top: 110px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 8px;
}
.rl-filters-mobile-head { display: none; }
.rl-filters-active { padding: 2px 0 14px; }
.rl-filters-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--sale-l, #fdecec);
    color: var(--sale);
    border: 1px solid var(--sale);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.rl-filters-clear::before { content: '\00d7'; font-size: 14px; line-height: 1; }
.rl-filters-clear:hover { background: var(--sale); color: #fff; }

.rl-filter-block {
    border-bottom: 1px solid var(--border-l);
    padding: 16px 0;
}
.rl-filter-block:first-of-type { padding-top: 4px; }
.rl-filter-block summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rl-filter-block summary::-webkit-details-marker { display: none; }
.rl-filter-block summary::after {
    content: '–';
    font-size: 16px;
    color: var(--muted);
    font-weight: 300;
    line-height: 1;
}
.rl-filter-block:not([open]) summary::after { content: '+'; }
.rl-filter-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Ligne de filtre = lien stylé en checkbox row */
.rl-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.rl-filter-row:hover { color: var(--ink); }
.rl-filter-row .rl-fcheck {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 3px;
    background: white;
    position: relative;
    flex-shrink: 0;
    transition: background .12s ease, border-color .12s ease;
}
.rl-filter-row.is-active { color: var(--ink); font-weight: 500; }
.rl-filter-row.is-active .rl-fcheck {
    background: var(--ink);
    border-color: var(--ink);
}
.rl-filter-row.is-active .rl-fcheck::after {
    content: '';
    position: absolute;
    left: 4.5px; top: 1px;
    width: 4px; height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rl-filter-row .rl-flabel { flex: 1; }
.rl-filter-row .rl-fct { margin-left: auto; color: var(--soft); font-size: 11.5px; }

/* Swatches couleur */
.rl-color-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.rl-color-sw {
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: transform .15s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    display: block;
}
.rl-color-sw.rl-light { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.rl-color-sw:hover { transform: scale(1.08); }
.rl-color-sw.is-active {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 0 0 1px white;
}
.rl-color-sw.is-active::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px; font-weight: 700;
    text-shadow: 0 0 3px rgba(0,0,0,.5);
}
.rl-color-sw.rl-light.is-active::after { color: var(--ink); text-shadow: none; }

/* Bloc prix */
.rl-price-form { display: flex; flex-direction: column; gap: 10px; }
.rl-price-inputs { display: flex; align-items: center; gap: 8px; }
.rl-price-inputs input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: 13px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.rl-price-inputs input::-webkit-outer-spin-button,
.rl-price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rl-price-dash { color: var(--muted); }
.rl-price-apply {
    align-self: flex-start;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.rl-price-apply:hover { filter: brightness(1.15); }

/* Slider prix double-poignée (deux <input type=range> superposés) */
.rl-price-slider { position: relative; height: 28px; margin: 4px 2px 2px; }
.rl-price-track {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    height: 4px; border-radius: 999px; background: var(--border);
}
.rl-price-fill {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 999px; background: var(--primary, #C9302C);
}
.rl-price-range {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    width: 100%; margin: 0; height: 28px; background: none;
    -webkit-appearance: none; appearance: none;
    pointer-events: none; /* seuls les thumbs captent → les 2 poignées restent saisissables */
}
.rl-price-range::-webkit-slider-runnable-track { background: transparent; border: none; }
.rl-price-range::-moz-range-track { background: transparent; border: none; }
.rl-price-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--primary, #C9302C);
    box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; margin-top: -6px;
}
.rl-price-range::-moz-range-thumb {
    pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--primary, #C9302C);
    box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.rl-price-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.rl-price-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Bouton Filters mobile + badge */
.rl-cat-mobile-filters { display: none; }
.rl-mf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    background: var(--primary); color: #fff;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    padding: 0 5px; margin-left: 2px;
}

/* Pas de résultats */
.rl-cat-noresults { padding: 60px 0; text-align: center; color: var(--muted); }
.rl-cat-noresults p { margin-bottom: 18px; font-size: 15px; }

/* Overlay drawer (mobile) */
.rl-filters-overlay { display: none; }

/* Responsive : sidebar → drawer */
@media (max-width: 980px) {
    .rl-cat-layout { grid-template-columns: 1fr; gap: 16px; }
    .rl-cat-filters {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;          /* respecte la barre d'URL mobile */
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--bg, #fff);
        z-index: 1001;
        padding: 0 18px 120px;   /* gros padding bas : le dernier filtre dégage le bord */
        margin: 0;
    }
    .rl-cat-filters.rl-open { display: block; }
    .rl-filters-mobile-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--border-l);
        position: sticky;        /* en-tête + croix toujours accessibles au scroll */
        top: 0;
        background: var(--bg, #fff);
        z-index: 2;
    }
    .rl-filters-mobile-head h3 { font-weight: 600; font-size: 18px; }
    .rl-filters-close { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--ink); }
    .rl-filters-overlay.rl-show {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1000;
    }
    .rl-cat-mobile-filters {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: white;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--ink);
        cursor: pointer;
    }
}

/* ============================================================
   HOME — Best sellers tabs (shortcode [rl_bestsellers])
   ============================================================ */
.rl-bs-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 26px;
}
.rl-bs-tabs .rl-chip {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: normal;
}
.rl-bs-grid { transition: opacity .18s ease; min-height: 200px; }
.rl-bs-empty { color: var(--muted); font-size: 15px; padding: 30px 0; }

/* Fix scope : les lignes de la sidebar ne doivent pas hériter du chip-bar global .rl-filter-row */
.rl-cat-filters .rl-filter-row { padding: 0; flex-wrap: nowrap; }

/* ============================================================
   SHOP FILTRES — alignement mockup-8 (pills, picked, active-filters)
   ============================================================ */
/* .picked dans les titres de bloc */
.rl-cat-filters .rl-filter-block summary { justify-content: flex-start; }
.rl-picked {
    margin-left: 8px;
    font-family: var(--font);
    font-weight: 500;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
    flex: 1;
    text-align: right;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rl-cat-filters .rl-filter-block summary::after { flex-shrink: 0; }

/* Pills (Pack size, Ply, Edition) */
.rl-filter-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.rl-filter-pills .rl-pill {
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11.5px;
    cursor: pointer;
    background: white;
    color: var(--muted);
    white-space: nowrap;
    transition: all .12s ease;
    text-decoration: none;
}
.rl-filter-pills .rl-pill:hover { border-color: var(--border-strong); color: var(--ink); }
.rl-filter-pills .rl-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.rl-filter-pills .rl-pill .ct { color: var(--soft); margin-left: 4px; font-size: 10px; }
.rl-filter-pills .rl-pill.active .ct { color: rgba(255,255,255,.55); }

/* Grille couleurs 6 colonnes (override du 5-col précédent) */
.rl-color-filter-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }

/* Barre des filtres actifs (au-dessus de la grille) */
.rl-active-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.rl-af-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.rl-af-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 8px 5px 12px;
    background: var(--surface-2, var(--surface));
    border-radius: 16px;
    font-size: 12px; font-weight: 500;
    color: var(--ink); text-decoration: none;
}
.rl-af-chip:hover { background: var(--surface); }
.rl-af-chip .x { color: var(--muted); font-size: 14px; line-height: 1; margin-left: 2px; }
.rl-af-chip:hover .x { color: var(--ink); }
.rl-af-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.rl-af-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sale-l, #fdecec);
    color: var(--sale);
    border: 1px solid var(--sale);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.rl-af-clear::before { content: '\00d7'; font-size: 13px; line-height: 1; }
.rl-af-clear:hover { background: var(--sale); color: #fff; }

/* ============================================================
   PDP MOBILE — ordre correct : galerie → titre/prix/CTA → description
   (la description est imbriquée dans .rl-pdp-left ; on "déballe" left via
   display:contents pour que galerie & description deviennent des items du
   grid, puis on réordonne. Desktop (>1100) inchangé.)
   ============================================================ */
@media (max-width: 1100px) {
    .rl-pdp .rl-pdp-left { display: contents; }
    .rl-pdp .rl-pdp-gallery { order: 1; }
    .rl-pdp .rl-pdp-details { order: 2; }
    .rl-pdp .rl-pdp-description { order: 3; margin-top: 8px; }
    /* .rl-pdp-left portait min-width:0 ; en display:contents ce sont ses enfants
       qui deviennent items du grid → leur redonner min-width:0 sinon l'image de
       galerie (min-width:auto par défaut) déborde la colonne en mobile. */
    .rl-pdp .rl-pdp-gallery,
    .rl-pdp .rl-pdp-details,
    .rl-pdp .rl-pdp-description { min-width: 0; max-width: 100%; }
    .rl-pdp .rl-pdp-gallery img,
    .rl-pdp .rl-pdp-main-img img { max-width: 100%; height: auto; }
    /* Détails NON sticky en 1-col : sinon ils collent en haut et la description
       (order 3) glisse dessous. Specificity/!important pour battre la règle
       .rl-pdp .rl-pdp-details.summary.entry-summary { position: sticky }. */
    .rl-pdp .rl-pdp-details.summary.entry-summary,
    .rl-pdp .rl-pdp-details {
        position: static !important;
        top: auto !important;
    }
}

/* ============================================================
   FINITIONS — pagination mobile (ne frôle plus le bord)
   ============================================================ */
@media (max-width: 600px) {
    .rl-cat-main-wrap .woocommerce-pagination { padding: 0 14px; }
    .rl-cat-main-wrap .woocommerce-pagination ul.page-numbers { flex-wrap: wrap; gap: 5px; justify-content: center; }
    .rl-cat-main-wrap .woocommerce-pagination ul.page-numbers li .page-numbers { min-width: 34px; height: 34px; padding: 0 9px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════ */
/* BLOG / JOURNAL + SINGLE ARTICLE  (mockup v9) */
/* ════════════════════════════════════════════════════════════ */
:root{ --paper:#F5F1EA; --ink-soft:#3A3A38; --line:#E8E0CB; }
  .blog-hero {
    padding: 72px 0 48px;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .blog-hero .ey {
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 17px;
    color: var(--primary);
    margin-bottom: 14px;
  }
  .blog-hero h1 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
  }
  .blog-hero h1 em { font-style: italic; color: var(--muted); }
  .blog-hero p {
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
  }
  .blog-cats {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
  }
  .blog-cat {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12.5px;
    cursor: pointer;
    background: white;
    color: var(--ink-soft);
    transition: all 0.12s;
    font-weight: 500;
  }
  .blog-cat:hover { border-color: var(--muted); color: var(--ink); }
  .blog-cat.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
  .blog-cat .ct {
    color: var(--soft);
    margin-left: 4px;
    font-size: 11px;
  }
  .blog-cat.active .ct { color: rgba(255,255,255,.55); }

  /* Featured post */
  .blog-featured {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 24px;
    padding: 56px 0 64px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 880px) { .blog-featured { grid-template-columns: 1fr; } }

  .blog-card-lg {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    cursor: pointer;
  }
  .blog-card-lg .img {
    aspect-ratio: 16/10;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-2);
    position: relative;
  }
  .blog-card-lg .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
  .blog-card-lg:hover .img img { transform: scale(1.03); }
  .blog-card-lg .img .pin {
    position: absolute;
    top: 16px; left: 16px;
    padding: 5px 10px;
    background: white;
    color: var(--ink);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 3px;
  }
  .blog-card-lg .cat {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .blog-card-lg h2 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--ink);
  }
  .blog-card-lg h2 em { font-style: italic; color: var(--muted); }
  .blog-card-lg .ex {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 62ch;
  }
  .blog-card-lg .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
  }
  .blog-card-lg .meta .av {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .blog-card-lg .meta strong { color: var(--ink); font-weight: 600; }

  /* Side stack */
  .blog-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .blog-card-side {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    cursor: pointer;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .blog-card-side:last-child { border-bottom: none; padding-bottom: 0; }
  .blog-card-side .img {
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-2);
  }
  .blog-card-side .img img { width: 100%; height: 100%; object-fit: cover; }
  .blog-card-side .cat {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .blog-card-side h3 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
    color: var(--ink);
  }
  .blog-card-side .meta {
    font-size: 12px;
    color: var(--muted);
  }

  /* Blog grid (regular posts) */
  .blog-grid-wrap {
    padding: 56px 0 80px;
  }
  .blog-grid-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
  }
  .blog-grid-head h2 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.02em;
  }
  .blog-grid-head h2 em { font-style: italic; color: var(--muted); }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 24px;
  }
  @media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
  .blog-card {
    cursor: pointer;
  }
  .blog-card .img {
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-2);
    margin-bottom: 18px;
  }
  .blog-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
  .blog-card:hover .img img { transform: scale(1.03); }
  .blog-card .cat {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .blog-card h3 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .blog-card .ex {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }
  .blog-card .meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .blog-card .meta strong { color: var(--ink); font-weight: 600; }
  .blog-card .meta::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--border);
  }

  /* ─────────── VIEW 9 — SINGLE ARTICLE ───────── */
  /* ============================================ */
  .article-wrap { padding: 48px 0 0; }
  .article-meta-top {
    text-align: center;
    margin-bottom: 32px;
  }
  .article-meta-top a {
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
  }
  .article-meta-top a + a::before {
    content: '·';
    margin: 0 10px;
    color: var(--muted);
  }
  .article-title {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1;
    letter-spacing: -0.025em;
    max-width: 18ch;
    margin: 0 auto 24px;
    text-align: center;
    color: var(--ink);
  }
  .article-title em { font-style: italic; color: var(--muted); }
  .article-dek {
    font-family: var(--font-edit);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 54ch;
    margin: 0 auto 36px;
    text-align: center;
  }
  .article-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: var(--muted);
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
  }
  .article-byline .av {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
  }
  .article-byline strong { color: var(--ink); font-weight: 600; }
  .article-byline .sep {
    width: 4px; height: 4px;
    background: var(--border-strong);
    border-radius: 50%;
  }
  .article-byline .share {
    margin-left: 12px;
    display: flex;
    gap: 6px;
  }
  .article-byline .share button {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: white;
    color: var(--muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .article-byline .share button:hover { color: var(--ink); border-color: var(--ink); }
  .article-byline .share svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  .article-hero-img {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0 auto;
    max-width: 1100px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--surface-2);
  }
  .article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
  .article-hero-caption {
    max-width: 1100px;
    margin: 12px auto 0;
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
    text-align: left;
    padding: 0 4px;
  }

  .article-body {
    max-width: 640px;
    margin: 56px auto 80px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .article-body > p:first-of-type::first-letter {
    font-family: var(--font-edit);
    font-size: 5em;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em 0 -0.05em;
    color: var(--primary);
    font-weight: 400;
  }
  .article-body p { margin-bottom: 22px; }
  .article-body h2 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 48px 0 20px;
  }
  .article-body h2 em { font-style: italic; color: var(--muted); }
  .article-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
  }
  .article-body a:hover { text-decoration-color: var(--ink); }
  .article-body strong { color: var(--ink); font-weight: 600; }

  .article-quote {
    margin: 40px -40px;
    padding: 0 0 0 32px;
    border-left: 3px solid var(--primary);
    font-family: var(--font-edit);
    font-style: italic;
    font-size: 26px;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .article-quote .who {
    margin-top: 14px;
    font-family: var(--font);
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  @media (max-width: 720px) { .article-quote { margin: 32px 0; } }

  .article-figure {
    margin: 40px -40px;
  }
  @media (max-width: 720px) { .article-figure { margin: 32px 0; } }
  .article-figure img {
    width: 100%;
    border-radius: 4px;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--surface-2);
  }
  .article-figure figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
  }

  .article-shop-card {
    margin: 40px 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--paper);
  }
  @media (max-width: 560px) {
    .article-shop-card { grid-template-columns: 80px 1fr; }
    .article-shop-card .shop-btn { grid-column: 1 / -1; width: 100%; }
  }
  .article-shop-card .sh-img {
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface);
  }
  .article-shop-card .sh-img img { width: 100%; height: 100%; object-fit: cover; }
  .article-shop-card .sh-info .ey {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .article-shop-card .sh-info h4 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .article-shop-card .sh-info .price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .article-shop-card .shop-btn {
    padding: 11px 18px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Author bio */
  .article-author-bio {
    max-width: 640px;
    margin: 0 auto;
    padding: 36px 32px;
    background: var(--paper);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    align-items: flex-start;
  }
  .article-author-bio .av-lg {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-edit);
    font-size: 22px;
  }
  .article-author-bio .ey {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .article-author-bio h4 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .article-author-bio p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .article-author-bio .links a {
    font-size: 12px;
    color: var(--ink);
    text-decoration: underline;
    margin-right: 16px;
  }

  /* Related posts */
  .article-related {
    padding: 80px 0;
    margin-top: 80px;
    background: var(--surface);
  }
  .article-related .head {
    text-align: center;
    margin-bottom: 48px;
  }
  .article-related .head h2 {
    font-family: var(--font-edit);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 38px);
    letter-spacing: -0.02em;
  }
  .article-related .head h2 em { font-style: italic; color: var(--muted); }

/* Blog — ajustements intégration (anchors, liens, pagination, placeholder) */
.blog-card .img, .blog-card-lg .img, .blog-card-side .img { display:block; }
.rl-blog-noimg { display:block; width:100%; height:100%; background:var(--surface-2); }
.blog-card h3 a, .blog-card-lg h2 a, .blog-card-side h3 a,
.article-author-bio .links a, .article-meta-top a, .blog-grid-head .link { color:inherit; text-decoration:none; }
.blog-card h3 a:hover, .blog-card-lg h2 a:hover, .blog-card-side h3 a:hover { color:var(--primary); }
.blog-pagination { display:flex; gap:8px; justify-content:center; padding:48px 0 0; flex-wrap:wrap; }
.blog-pagination .page-numbers { min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:6px; padding:0 12px; font-size:14px; color:var(--ink); text-decoration:none; background:#fff; }
.blog-pagination .page-numbers.current { background:var(--ink); color:#fff; border-color:var(--ink); }
.blog-pagination a.page-numbers:hover { border-color:var(--ink); }
.rl-share-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.rl-share-btn:hover { color:var(--ink); border-color:var(--ink); }
.rl-share-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; }
.article-byline .share button.done { color:var(--primary); border-color:var(--primary); }

/* ============================================================
   Article product showcase — [rolllux_products]
   Reuses .rl-pcard (woocommerce/content-product.php) inside posts.
   ============================================================ */
.rl-article-products {
  margin: 46px 0 50px;
}
.rl-aprod-head { margin-bottom: 22px; }
.rl-aprod-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--soft);
  margin-bottom: 6px;
}
.rl-aprod-title {
  font-family: var(--font-edit, serif);
  font-size: 27px;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
.rl-aprod-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 22px;
  padding: 0;
  margin: 0 !important;
}
.rl-aprod-grid li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
/* the article reading column is narrow → tighten the card type a touch */
.rl-aprod-grid .rl-pcard-name { font-size: 15px; }
.rl-aprod-grid .rl-pcard-cat { font-size: 11px; }
@media (max-width: 520px) {
  .rl-aprod-grid { gap: 16px 14px; }
  .rl-aprod-title { font-size: 23px; }
}

/* ============================================================
   Mobile navigation — burger + slide-in drawer
   (avant : .rl-main-nav display:none ≤1100px SANS remplacement)
   ============================================================ */
.rl-burger { display: none; }
.rl-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.rl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rl-mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.45);
  z-index: 998; opacity: 0;
  transition: opacity .3s ease;
}
.rl-mobile-overlay.show { opacity: 1; }

.rl-mobile-nav {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(86vw, 360px);
  background: #fff; z-index: 999;
  padding: 20px 22px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -14px 0 44px rgba(0,0,0,.14);
}
.rl-mobile-nav.open { transform: translateX(0); }
.rl-mobile-nav-head { display: flex; align-items: center; justify-content: space-between; }
.rl-mobile-nav-title { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rl-mobile-close { background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); width: 40px; height: 40px; }

.rl-mobile-search { margin: 14px 0 6px; }
.rl-mobile-search form { display: flex; align-items: center; background: var(--surface); border-radius: 999px; padding: 10px 16px; }
.rl-mobile-search svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.rl-mobile-search input { flex: 1; border: none; background: none; outline: none; margin-left: 10px; font-size: 15px; color: var(--ink); }

.rl-mobile-links { display: flex; flex-direction: column; margin-top: 8px; }
.rl-mobile-links a {
  padding: 15px 2px; font-size: 17px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--border-l);
}
.rl-mobile-links a:active { color: var(--primary); }
.rl-mobile-links a.has-sale { color: var(--sale); font-weight: 600; }
.rl-mobile-links li { list-style: none; }
.rl-mobile-links ul { list-style: none; padding: 0; margin: 0; }

.rl-mobile-actions { display: flex; gap: 22px; margin-top: auto; padding-top: 18px; }
.rl-mobile-actions a { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.rl-mobile-actions svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.8; }

body.rl-menu-open { overflow: hidden; }

@media (max-width: 1100px) {
  .rl-burger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px;
    padding: 11px; margin-left: -8px;
    border: none; background: none; cursor: pointer;
  }
  .rl-header-inner { grid-template-columns: auto 1fr auto; }
  /* La tagline du logo + white-space:nowrap (fix #1) forçait un min-content
     large dans la colonne 1fr → débordement viewport = scroll horizontal mobile.
     On masque la tagline et on autorise la colonne à rétrécir. */
  .rl-logo { min-width: 0; }
  .rl-logo small { display: none; }
}
@media (min-width: 1101px) {
  .rl-mobile-nav, .rl-mobile-overlay { display: none !important; }
}

/* ============================================================
   RETOURS CLIENT 2026-06-16 — corrections ciblées
   ============================================================ */

/* (1) Mot « Color » colorisé dans les titres (helper rolllux_colorize_colors).
   Les couleurs sont inline (par lettre) ; on ajoute juste un poids pour le faire
   ressortir. font-style:normal pour rester lisible même dans un <em> italique. */
.rl-colorword { font-weight: 700; }

/* (6) Hero « Shop now » : texte blanc illisible sur le bouton crème clair.
   Même bug/fix que « Shop the Black & Red » du bloc lifestyle (override scopé).
   → texte en rouge Renova, lisible sur le bouton clair. */
.rl-hero-main-overlay a.rl-btn-light,
.rl-hero-main-overlay a.rl-btn-light:link,
.rl-hero-main-overlay a.rl-btn-light:visited { color: var(--primary) !important; }
.rl-hero-main-overlay a.rl-btn-light:hover { color: var(--primary-h) !important; }

/* (5-bug) wpautop injecte des <br> comme enfants directs de .rl-hero-side ;
   en grille ils occupent des cellules et poussent les 2 cartes en colonne 1
   (empilées, demi-largeur). On les neutralise → la grille fonctionne. */
.rl-hero-side br, .rl-hero-card br { display: none; }

@media (max-width: 600px) {

  /* (2) « What customers say » centré en mobile (titre + sous-titre + lien). */
  .rl-reviews-section .rl-section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .rl-reviews-section .rl-section-head .sub { margin-left: auto; margin-right: auto; }

  /* (3) Carte produit : prix + pastilles regroupés à gauche (fini le trou entre
     le prix à gauche et la pastille collée à droite via space-between). */
  .rl-pcard-row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  /* (4) « Best sellers this month » : onglets catégorie trop espacés → resserrés. */
  .rl-bs-tabs { gap: 6px; margin: 2px 0 18px; }
  .rl-bs-tabs .rl-chip { padding: 6px 11px; gap: 5px; font-size: 12.5px; }

  /* (5) Hero : les 2 cartes (Gift Boxes / Cocktail Napkins) étaient calées à
     gauche en demi-largeur → côte à côte, hauteur définie pour remplir l'image. */
  .rl-hero-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .rl-hero-card { aspect-ratio: 1 / 1.15; }
  .rl-hero-card-inner { padding: 14px; }
  .rl-hero-card .small-eyebrow { font-size: 9.5px; margin-bottom: 4px; }
  .rl-hero-card h3 { font-size: 17px; margin-bottom: 4px; }
  .rl-hero-card .arrow { margin-top: 6px; font-size: 11.5px; }
}

/* ============================================================
   WISHLIST mobile (YITH) — alignement robuste (retour client 2026-06-16)
   La card mobile (ul.wishlist_table.mobile > li) utilise des <table> internes
   (item-details-table = Prix, additional-info = Stock). Le CSS WooCommerce force
   un text-align:right + un algorithme de largeur de table qui poussaient les
   valeurs au centre/droite → "row mal alignée d'un point de vue centré".
   Fix : (1) image en haut à gauche ; (2) tables internes passées en flex pour
   coller label+valeur à gauche (supprime l'algo de largeur des tables) ;
   (3) ligne Stock alignée sous le bloc détails. Tout en !important + spécificité
   suffisante pour gagner sur WC/YITH/Divi. Vérifié en harness fidèle (CSS réels).
   ============================================================ */
.rolllux-wishlist-page .wishlist_table.mobile > li { display: block !important; }
.rolllux-wishlist-page .wishlist_table.mobile .item-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}
.rolllux-wishlist-page .wishlist_table.mobile .product-thumbnail { flex: 0 0 72px !important; width: 72px !important; }
/* texte toujours à gauche (contre WC text-align:right) */
.rolllux-wishlist-page .wishlist_table.mobile .item-details,
.rolllux-wishlist-page .wishlist_table.mobile .product-name,
.rolllux-wishlist-page .wishlist_table.mobile .additional-info-wrapper,
.rolllux-wishlist-page .wishlist_table.mobile td,
.rolllux-wishlist-page .wishlist_table.mobile th { text-align: left !important; }
/* tables internes (Prix / Stock) → flex : label + valeur collés à gauche */
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info,
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table tbody,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info tbody { display: block !important; width: 100% !important; }
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table tr,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info tr {
    display: flex !important; align-items: baseline !important; gap: 8px !important; margin: 0 !important;
}
.rolllux-wishlist-page .wishlist_table.mobile table.item-details-table td,
.rolllux-wishlist-page .wishlist_table.mobile table.additional-info td {
    display: block !important; width: auto !important; flex: 0 0 auto !important;
    text-align: left !important; padding: 2px 0 !important;
}
/* ligne Stock alignée sous les détails (vignette 72 + gap 14) */
.rolllux-wishlist-page .wishlist_table.mobile .additional-info-wrapper { padding-left: 86px !important; margin-top: 6px !important; }

/* Template DESKTOP de YITH affiché sur petit écran (UA non-mobile, ex. tablette) :
   la conversion en carte (grille) ne plaçait pas product-stock-status (→ flottant
   en haut à droite) et centrait le prix. On empile name/prix/stock en col 2,
   image en haut, texte à gauche — cohérent avec la card mobile. */
@media (max-width: 768px) {
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody tr {
        align-items: start;
        grid-template-rows: auto auto auto;
    }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) tbody td { text-align: left !important; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-price        { grid-column: 2; grid-row: 2; }
    .rolllux-wishlist-page .wishlist_table:not(.mobile) .product-stock-status { grid-column: 2; grid-row: 3; }
}

/* (Hero H1 — retour client 2026-06-16) En mobile, l'overlay (position:absolute,
   bottom) dépassait la hauteur de l'image (aspect-ratio 5/4) → la pill et le haut
   du H1 « Toilet paper… » étaient rognés par overflow:hidden. On laisse le bloc
   grandir : image passée en fond absolu, overlay remis dans le flux. */
@media (max-width: 600px) {
  .rl-hero-main { aspect-ratio: auto; min-height: 340px; display: flex; align-items: flex-end; }
  .rl-hero-main img { position: absolute; inset: 0; }
  .rl-hero-main-overlay { position: relative; padding: 24px 20px; max-width: 100%; }
}