/**
 * K MODE — STYLESHEET
 * Vanilla CSS avec préfixe ".km-" pour compatibilité totale WordPress / Elementor.
 * Palette: un seul rose #D10A74 (survol #A8085D), Fond écru #FBFAF8.
 */

/* ====================================================
   1. VARIABLES & RESET
   ==================================================== */
:root {
  --km-pink: #D10A74; /* Rose unique du site (accents, badges, codes live, logo) */
  --km-pink-dark: #D10A74;
  --km-pink-light: #FFE4F1;
  --km-pink-subtle: #FFF5FA;
  --km-btn: #D10A74; /* Boutons (texte blanc 5,2:1, AA) */
  --km-btn-hover: #A8085D;
  --km-bg: #FBFAF8;
  --km-text: #1F1C1A;
  --km-muted: #6E6259; /* Contraste AA (4.5:1) sur le fond et la surface */
  --km-pink-text: #D10A74; /* Rose lisible pour le petit texte (contraste AA) */
  --km-border: #E6DED5;
  --km-control-border: #CFC5BA; /* Bordure des contrôles de formulaire (cases, boutons de filtre) : plus marquée que --km-border */
  --km-card-bg: #FFFFFF;
  --km-surface: #F3EEE8;
  --km-font-title: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --km-font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --km-font-arabic: 'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --km-font-script: 'Lobster', 'Brush Script MT', cursive;
  --km-radius: 0px; /* Square corners */
}

/* Box sizing and clean base */
.km-body,
.km-body * {
  box-sizing: border-box;
}

body.km-body {
  margin: 0;
  padding: 0;
  background-color: var(--km-bg);
  color: var(--km-text);
  font-family: var(--km-font-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body.km-body,
[dir="rtl"].km-body {
  font-family: var(--km-font-arabic), var(--km-font-text);
}

a.km-link,
.km-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
a.km-link:hover {
  color: var(--km-pink-text);
}

.km-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .km-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.km-divider {
  width: 100%;
  height: 1px;
  background-color: var(--km-border);
  border: none;
  margin: 0;
}

/* ====================================================
   2. BUTTONS & UI PRIMITIVES
   ==================================================== */
.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--km-font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: var(--km-radius);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s ease;
  user-select: none;
  text-decoration: none;
}

[dir="rtl"] .km-btn {
  letter-spacing: 0.05em;
  font-family: var(--km-font-arabic);
}

.km-btn--primary {
  background-color: var(--km-btn);
  color: #FFFFFF;
}
.km-btn--primary:hover {
  background-color: var(--km-btn-hover);
  color: #FFFFFF;
}

.km-btn--outline {
  background-color: transparent;
  color: var(--km-text);
  border: 1px solid var(--km-border);
}
.km-btn--outline:hover {
  border-color: var(--km-pink);
  color: var(--km-pink-text);
}

.km-btn--dark {
  background-color: var(--km-text);
  color: #FFFFFF;
}
.km-btn--dark:hover {
  background-color: #000000;
}

.km-btn--full {
  width: 100%;
}

.km-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: var(--km-pink-light);
  color: var(--km-pink-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.km-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #C0392B;
  display: inline-block;
  animation: km-pulse 1.6s infinite ease-in-out;
}

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

/* ====================================================
   3. BARRE DE NAVIGATION (inc/layout.php kmode_header, main.js setupGlobalEvents)
   Téléphone d'abord : bande 32px, header 56px collé, pilules 60px. PC ≥ 900px : header 76px (60px compact) + menu 50px collés.
   ==================================================== */
:root {
  --km-hd-h: 56px;
  --km-ink: #1F1C1A;
}
.km-topbar {
  height: 32px;
  background-color: var(--km-btn);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 32px;
  text-align: center;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.km-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--km-bg);
  border-bottom: 1px solid var(--km-border);
}
.km-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Côtés de même largeur : logo parfaitement centré */
  align-items: center;
  height: var(--km-hd-h);
  padding: 0 4px;
  max-width: 1200px;
  margin: 0 auto;
  transition: height 0.25s ease;
}
.km-header__side { display: flex; align-items: center; min-width: 0; }
.km-header__side--end { justify-content: flex-end; }

.km-header__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--km-ink);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.km-header__btn:hover { color: var(--km-btn-hover); }
.km-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.km-header__search-label,
.km-header__lang { display: none; }

.km-header__logo {
  font-family: var(--km-font-title);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* Compense l'espace après la dernière lettre */
  line-height: 1;
  color: var(--km-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: font-size 0.25s ease;
}

/* Badge du panier / des favoris (caché si 0 : main.js updateBadges) */
.km-header__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--km-btn);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  font-family: var(--km-font-text);
  align-items: center;
  justify-content: center;
}
[dir="rtl"] .km-header__count { right: auto; left: 3px; }

/* Rangée de catégories (téléphone : pilules qui défilent) */
.km-nav {
  height: 60px;
  background-color: var(--km-bg);
  border-bottom: 1px solid var(--km-border);
}
.km-nav__track {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.km-nav__track::-webkit-scrollbar { display: none; }
.km-nav__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--km-border);
  border-radius: 22px;
  color: var(--km-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.km-nav__link:hover { color: var(--km-btn-hover); }
.km-nav__link--promotions { color: var(--km-btn); }
.km-nav__link[aria-current="page"] { background-color: var(--km-ink); border-color: var(--km-ink); color: var(--km-bg); }
.km-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--km-btn);
  flex-shrink: 0;
}
.km-live-on .km-nav__dot { animation: km-nav-blink 1.8s ease-in-out infinite; }
@keyframes km-nav-blink { 50% { opacity: 0.25; } }

/* Menu tiroir (téléphone) */
.km-drawer,
.km-search { position: fixed; inset: 0; z-index: 100; }
.km-drawer[hidden],
.km-search[hidden] { display: none; }
.km-drawer__backdrop,
.km-search__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 28, 26, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.km-open .km-drawer__backdrop,
.km-open .km-search__backdrop { opacity: 1; }
.km-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 86%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background-color: var(--km-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
[dir="rtl"] .km-drawer__panel { transform: translateX(100%); }
.km-drawer.km-open .km-drawer__panel { transform: none; }
.km-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-inline-start: 20px;
  padding-inline-end: 4px;
  border-bottom: 1px solid var(--km-border);
  flex-shrink: 0;
}
.km-drawer__logo { font-size: 20px; }
.km-drawer__list { list-style: none; margin: 0; padding: 0; }
.km-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 16px 0 20px;
  border: 0;
  border-bottom: 1px solid var(--km-border);
  background: transparent;
  color: var(--km-ink);
  font: inherit;
  font-size: 16px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
[dir="rtl"] .km-drawer__row { padding: 0 20px 0 16px; }
.km-drawer__row .km-icon { color: var(--km-muted); width: 18px; height: 18px; }
.km-drawer__row:hover { color: var(--km-btn-hover); }
.km-drawer__row[aria-current="page"],
.km-drawer__toggle[data-current] { font-weight: 700; box-shadow: inset 3px 0 0 var(--km-btn); }
[dir="rtl"] .km-drawer__row[aria-current="page"],
[dir="rtl"] .km-drawer__toggle[data-current] { box-shadow: inset -3px 0 0 var(--km-btn); }
.km-drawer__row--promo { color: var(--km-btn); }
.km-drawer__label { display: inline-flex; align-items: center; gap: 10px; }
.km-drawer__chev { transform: rotate(90deg); transition: transform 0.2s ease; }
.km-drawer__toggle[aria-expanded="true"] .km-drawer__chev { transform: rotate(-90deg); }
.km-drawer__sub { list-style: none; margin: 0; padding: 4px 0 8px; border-bottom: 1px solid var(--km-border); background-color: #F6F2ED; }
.km-drawer__subrow {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 36px 16px;
  color: var(--km-ink);
  font-size: 15px;
  text-decoration: none;
}
.km-drawer__subrow[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--km-btn); }
[dir="rtl"] .km-drawer__subrow[aria-current="page"] { box-shadow: inset -3px 0 0 var(--km-btn); }
.km-drawer__foot { margin-top: auto; padding: 24px 20px 20px; }
.km-drawer__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--km-ink);
  color: var(--km-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.km-drawer__wa:hover { color: var(--km-btn-hover); border-color: var(--km-btn-hover); }
.km-drawer__links { display: flex; justify-content: center; gap: 4px; margin: 14px 0 0; }
.km-drawer__links a,
.km-drawer__lang button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--km-muted);
  font-size: 13px;
  text-decoration: none;
}
.km-drawer__lang { display: flex; justify-content: center; align-items: center; gap: 2px; margin: 4px 0 0; color: var(--km-muted); }
.km-drawer__lang button { border: 0; background: transparent; font-family: var(--km-font-text); cursor: pointer; }
.km-drawer__lang button[lang="ar"] { font-family: var(--km-font-arabic); }
.km-drawer__lang button[aria-pressed="true"] { color: var(--km-ink); font-weight: 700; }
html.km-locked,
html.km-locked body { overflow: hidden; }

/* Recherche : téléphone plein écran, PC panneau sous le header */
.km-search__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--km-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.km-search.km-open .km-search__panel { opacity: 1; }
.km-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 6px 16px;
  border-bottom: 1px solid var(--km-border);
  flex-shrink: 0;
}
[dir="rtl"] .km-search__form { padding: 6px 16px 6px 4px; }
.km-search__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--km-border);
  background-color: #FFFFFF;
  color: var(--km-muted);
}
.km-search__field:focus-within { border-color: var(--km-ink); }
.km-search__field .km-icon { width: 18px; height: 18px; }
.km-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--km-ink);
  font: inherit;
  font-size: 16px; /* Pas de zoom sur iPhone */
  -webkit-appearance: none;
  appearance: none;
}
.km-body .km-search__input:focus-visible { outline: none; }
.km-search__input::-webkit-search-cancel-button { display: none; }
.km-search__submit {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  border: 0;
  background-color: var(--km-btn);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.km-search__submit:hover { background-color: var(--km-btn-hover); }
.km-search__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px 32px; }
.km-search__title { margin: 0 0 12px; color: var(--km-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.km-search__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.km-search__pill {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--km-border);
  border-radius: 22px;
  color: var(--km-ink);
  font-size: 14px;
  text-decoration: none;
}
.km-search__pill:hover { color: var(--km-btn-hover); border-color: var(--km-btn-hover); }
.km-search--typing .km-search__title,
.km-search--typing .km-search__pills { display: none; }
.km-search--typing.km-search--empty .km-search__pills { display: flex; }
.km-search--typing .km-search__results { order: -1; }
.km-search__body { display: flex; flex-direction: column; }
.km-search__none { margin: 0 0 14px; color: var(--km-muted); font-size: 14px; }
.km-search__list { list-style: none; margin: 0; padding: 0; }
.km-search__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  padding: 8px 0;
  border-bottom: 1px solid var(--km-border);
  color: var(--km-ink);
  text-decoration: none;
}
.km-search__item img { width: 48px; height: 64px; object-fit: cover; background-color: var(--km-surface); flex-shrink: 0; }
.km-search__item:hover .km-search__name { color: var(--km-btn-hover); }
.km-search__name { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.km-search__price { font-size: 13px; font-weight: 600; }
.km-search__price--sale { color: var(--km-btn); }
.km-search__item s { color: var(--km-muted); font-size: 12px; margin-inline-start: 4px; }
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Arabe : Noto Kufi Arabic, pas d'espacement des lettres ; le logo reste en latin */
[dir="rtl"] .km-topbar,
[dir="rtl"] .km-nav__link,
[dir="rtl"] .km-drawer__row,
[dir="rtl"] .km-search__body,
[dir="rtl"] .km-search__form { font-family: var(--km-font-arabic); letter-spacing: 0; }
[dir="rtl"] .km-header__logo { font-family: var(--km-font-title); }

@media (min-width: 900px) {
  :root { --km-hd-h: 76px; }
  .km-compact { --km-hd-h: 60px; }
  .km-header__bar { padding: 0 24px; }
  .km-header__menu-btn { display: none; }
  .km-header__search-btn { padding: 0 12px 0 8px; }
  [dir="rtl"] .km-header__search-btn { padding: 0 8px 0 12px; }
  .km-header__search-label { display: inline; color: var(--km-muted); font-size: 14px; }
  .km-header__search-btn:hover .km-header__search-label { color: var(--km-btn-hover); }
  .km-header__lang { display: inline-flex; gap: 6px; font-size: 14px; color: var(--km-muted); }
  .km-header__lang span[lang="ar"] { font-family: var(--km-font-arabic); }
  html:not(.km-ar) .km-header__lang span[lang="fr"],
  html.km-ar .km-header__lang span[lang="ar"] { color: var(--km-ink); font-weight: 700; }
  .km-header__logo { font-size: 30px; letter-spacing: 0.22em; padding-left: 0.22em; }
  .km-compact .km-header__logo { font-size: 24px; }
  /* Hauteur du flux constante pendant la compaction (76px) : la page ne saute pas */
  .km-header { transition: margin 0.25s ease; }
  .km-compact .km-header { margin-bottom: 16px; }

  /* Menu PC : liens en majuscules, collé sous le header */
  .km-nav { position: sticky; top: 76px; z-index: 49; height: 50px; transition: top 0.25s ease; }
  .km-compact .km-nav { top: 60px; }
  .km-nav__track { justify-content: center; gap: 36px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .km-nav__link {
    position: relative;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .km-nav__link[aria-current="page"] { background: transparent; color: var(--km-ink); }
  .km-nav__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--km-ink);
  }
  .km-nav__link--promotions { color: var(--km-btn); }
  [dir="rtl"] .km-nav__link { font-size: 14px; }

  /* Recherche PC : panneau sous le header (--km-search-top posé par main.js) */
  .km-search__backdrop { top: var(--km-search-top, 0); }
  .km-search__panel {
    inset: var(--km-search-top, 0) 0 auto;
    max-height: calc(100vh - var(--km-search-top, 0px) - 40px);
    border-bottom: 1px solid var(--km-border);
    box-shadow: 0 16px 32px rgba(31, 28, 26, 0.08);
  }
  .km-search__form,
  .km-search__body { width: 100%; max-width: 760px; margin: 0 auto; }
  .km-search__form { padding: 20px 0 0; border-bottom: 0; }
  [dir="rtl"] .km-search__form { padding: 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .km-header__bar, .km-header__logo, .km-header, .km-nav,
  .km-drawer__panel, .km-drawer__backdrop, .km-search__panel, .km-search__backdrop { transition: none; }
  .km-live-on .km-nav__dot { animation: none; }
}

/* Utilisés ailleurs (bandeau du live, barre du bas) */
.km-header__sparkle {
  color: var(--km-pink-text);
  font-size: 12px;
  user-select: none;
}
.km-header__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--km-pink);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ====================================================
   4. MOBILE BOTTOM NAVIGATION
   ==================================================== */
.km-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background-color: var(--km-bg);
  border-top: 1px solid var(--km-border);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}

@media (min-width: 900px) {
  .km-bottom-nav {
    display: none;
  }
}

/* Masquée pendant une fenêtre ouverte (tiroir, recherche, commande rapide, panier) : html.km-locked (main.js setupLayer / openQuickOrder) */
html.km-locked .km-bottom-nav { display: none; }

.km-bottom-nav__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}

.km-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 0;
  color: var(--km-muted);
  text-decoration: none;
  font-size: 10px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.km-bottom-nav__item.km-active {
  color: var(--km-pink-text);
  font-weight: 700;
}
.km-bottom-nav__icon-wrap {
  position: relative;
}
.km-bottom-nav__dot {
  position: absolute;
  top: -2px;
  right: -4px;
}

/* Panier en tiroir latéral (#km-cart-drawer, main.js setupLayer + renderCartDrawer) : ouvert par l'icône panier (header, barre du bas) et après « Ajouter au panier ». */
.km-cart-drawer { position: fixed; inset: 0; z-index: 100; }
.km-cart-drawer[hidden] { display: none; }
.km-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 28, 26, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.km-cart-drawer.km-open .km-cart-drawer__backdrop { opacity: 1; }
.km-cart-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background-color: var(--km-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
[dir="rtl"] .km-cart-drawer__panel { transform: translateX(-100%); }
.km-cart-drawer.km-open .km-cart-drawer__panel { transform: none; }
.km-cart-drawer__items { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.km-cart-drawer__row { display: flex; gap: 12px; }
.km-cart-drawer__img { width: 56px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background-color: var(--km-surface); }
.km-cart-drawer__info { flex: 1; min-width: 0; }
.km-cart-drawer__name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.km-cart-drawer__meta { font-size: 11px; color: var(--km-muted); }
.km-cart-drawer__row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.km-cart-drawer__price { font-size: 13px; font-weight: 700; color: var(--km-pink-text); }
.km-cart-drawer__remove { background: none; border: none; color: var(--km-muted); cursor: pointer; font-size: 13px; padding: 4px; }
.km-cart-drawer__ship { padding: 0 16px 16px; }
.km-cart-drawer__ship p { font-size: 12px; margin: 0 0 8px; color: var(--km-muted); }
.km-cart-drawer__ship-bar { height: 4px; background-color: var(--km-border); border-radius: 2px; overflow: hidden; }
.km-cart-drawer__ship-bar span { display: block; height: 100%; background-color: var(--km-pink); transition: width 0.3s ease; }
.km-cart-drawer__foot { margin-top: auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--km-border); }
.km-cart-drawer__total { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; color: var(--km-pink); margin-bottom: 12px; }
.km-cart-drawer__empty { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* ====================================================
   5. HERO SECTION & ANIMATED LOGO
   ==================================================== */
.km-hero {
  position: relative;
  overflow: hidden;
  height: 600px;
  background: var(--km-surface); /* #F3EEE8 */
  text-align: center;
  user-select: none;
}
@media (min-width: 768px) {
  .km-hero { height: 640px; }
}

/* « Vidéo » des nouveautés : photos plein écran (main.js → initHero) */
.km-hero__reel {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--km-text);
  text-decoration: none;
}
.km-hero__reel[hidden] { display: none; }
.km-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--km-surface);
}
.km-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.km-hero__card {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 18px;
  background: rgba(251, 250, 248, 0.94); /* #FBFAF8 à 94 % */
  border-radius: var(--km-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.km-hero__new {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--km-pink-text);
}
.km-hero__name {
  font-family: var(--km-font-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.km-hero__price {
  font-size: 14px;
  font-weight: 600;
}
.km-hero__price s {
  color: var(--km-muted);
  font-weight: 400;
  margin-inline-end: 4px;
}

/* Barres de progression façon stories */
.km-hero__bars {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
  padding: 12px 16px 24px;
  background: linear-gradient(rgba(31, 28, 26, 0.28), transparent);
  pointer-events: none;
}
.km-hero__bars span {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}
.km-hero__bars i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
[dir="rtl"] .km-hero__bars i { transform-origin: right; }

/* Séquence : 1,2 s par produit (--i), écran du logo après --n produits */
.km-hero--reel .km-hero__slide {
  animation: km-hero-slide 0.35s ease calc(var(--i) * 1.2s) both;
}
.km-hero--reel .km-hero__slide img {
  animation: km-hero-zoom 1.55s ease-out calc(var(--i) * 1.2s) both;
}
.km-hero--reel .km-hero__bars i {
  animation: km-hero-bar 1.2s linear calc(var(--i) * 1.2s) both;
}
.km-hero--reel .km-hero__end {
  animation: km-hero-end 0.6s ease calc(var(--n) * 1.2s) both;
}
@keyframes km-hero-slide { from { opacity: 0; } to { opacity: 1; } } /* la suivante, au-dessus, recouvre la précédente : fondu enchaîné */
@keyframes km-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes km-hero-bar { to { transform: scaleX(1); } }
@keyframes km-hero-end {
  from { opacity: 0; visibility: hidden; }
  to { opacity: 1; visibility: visible; }
}

/* Écran de fin : logo animé, trait, phrase, boutons */
.km-hero__end {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--km-surface);
}
.km-hero--photo .km-hero__end { display: none; }
.km-hero .km-logo {
  width: 64vw;
  max-width: 270px;
}
@media (min-width: 768px) {
  .km-hero .km-logo { max-width: 300px; }
}

.km-hero__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 18px auto 0;
  background: #D10A74;
}
.km-hero__tagline {
  font-family: var(--km-font-title);
  font-style: italic;
  font-size: 17px;
  color: var(--km-muted);
  margin: 14px 0 18px;
  letter-spacing: 0.02em;
}
.km-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.km-hero__live-btn { display: none; }
@media (min-width: 768px) {
  .km-hero__live-btn { display: inline-flex; }
}
.km-hero__replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-muted);
  cursor: pointer;
}
.km-hero__replay:hover { color: var(--km-text); }
.km-hero__replay[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .km-hero--reel .km-hero__slide,
  .km-hero--reel .km-hero__slide img,
  .km-hero--reel .km-hero__bars i,
  .km-hero--reel .km-hero__end { animation: none; }
}

/* Hero Logo SVG animations */
.km-logo {
  position: relative;
  width: 80vw;
  max-width: 330px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .km-logo {
    max-width: 400px;
  }
}
.km-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.km-logo .km-draw { stroke: var(--km-pink); }
.km-logo .km-pop { fill: var(--km-pink); }
.km-logo .km-k { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 700; font-size: 150px; }
.km-logo .km-mode { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 600; font-size: 84px; }
.km-logo .km-face { stroke: var(--km-pink); stroke-width: 1.2; paint-order: stroke; }
.km-logo .km-glow { opacity: 0.35; }

.km-play .km-plate {
  transform-origin: 200px 200px;
  opacity: 0;
  transform: scale(0.94);
  animation: km-plate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0s both;
}
.km-play .km-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: km-draw var(--d) cubic-bezier(0.65, 0, 0.35, 1) var(--t) both;
}
.km-play .km-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: km-pop 0.45s cubic-bezier(0.3, 1.7, 0.5, 1) var(--t) both;
}
/* Lettres Bodoni Moda qui apparaissent une par une (K, puis M, o, d, e) */
.km-play .km-letter {
  animation: km-letter 0.5s ease var(--t) both;
}
.km-play .km-glow {
  opacity: 0;
  animation: km-neon 1.1s ease 2.3s both;
}

.km-shine {
  position: absolute;
  inset: 2.4% 2.4% 4.6%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.km-play .km-shine::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 30%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  animation: km-shine-sweep 1s ease-in-out 2.4s both;
}

@keyframes km-plate { to { opacity: 1; transform: scale(1); } }
@keyframes km-draw { to { stroke-dashoffset: 0; } }
@keyframes km-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes km-letter {
  from { fill-opacity: 0; stroke-opacity: 0; }
  to { fill-opacity: 1; stroke-opacity: 1; }
}
@keyframes km-neon {
  0% { opacity: 0; }
  35% { opacity: 0.75; }
  55% { opacity: 0.25; }
  75% { opacity: 0.6; }
  100% { opacity: 0.35; }
}
@keyframes km-shine-sweep { from { left: -60%; } to { left: 130%; } }

.km-fade-group {
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.km-fade-group.km-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.km-fade-group.km-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Carte « Prochain live » (sous le hero, option km_live) : en direct ou compte à rebours, masquée sinon. */
.km-live-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background-color: var(--km-surface);
  border: 1px solid var(--km-border);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 20px auto;
}
.km-live-card--on { border-color: var(--km-pink); }
.km-live-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--km-pink);
  flex-shrink: 0;
  animation: km-pulse 1.6s infinite ease-in-out;
}
.km-live-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 180px; }
.km-live-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--km-pink-text); }
.km-live-card__title { font-family: var(--km-font-title); font-size: 16px; font-weight: 500; }
.km-live-card__date { font-size: 12px; color: var(--km-muted); }
.km-live-card__countdown { font-size: 13px; font-weight: 700; display: inline-flex; gap: 4px; align-items: baseline; }
.km-live-card__countdown span { font-size: 11px; font-weight: 400; color: var(--km-muted); margin-inline-end: 6px; }
.km-live-card__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.km-live-card__cta { flex-shrink: 0; }

/* ====================================================
   6. LIVE CAROUSEL DIRECTLY BELOW HERO
   ==================================================== */
.km-live-strip {
  background-color: rgba(243, 238, 232, 0.4);
  border-top: 1px solid var(--km-border);
  border-bottom: 1px solid var(--km-border);
  padding: 24px 0;
}
.km-live-strip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.km-live-strip__title {
  font-family: var(--km-font-title);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.km-live-strip__see-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-pink-dark);
}
.km-live-strip__see-all:hover {
  color: var(--km-pink-text);
}

.km-live-cards-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.km-live-cards-scroll::-webkit-scrollbar {
  display: none;
}

.km-live-miniproduct {
  width: 155px;
  flex-shrink: 0;
  background-color: #FFFFFF;
  border: 1px solid var(--km-border);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
  text-decoration: none;
  color: inherit;
}
[dir="rtl"] .km-live-miniproduct {
  text-align: right;
}
.km-live-miniproduct:hover {
  border-color: var(--km-pink);
}
.km-live-miniproduct__img {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  background-color: var(--km-surface);
  position: relative;
}
.km-live-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: var(--km-pink);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  letter-spacing: 0.06em;
}
[dir="rtl"] .km-live-tag {
  left: auto;
  right: 6px;
}
.km-live-miniproduct__title {
  font-size: 12px;
  font-weight: 500;
  margin: 8px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.km-live-miniproduct__price {
  font-size: 12px;
  font-weight: 700;
  color: var(--km-pink-text);
}

/* ====================================================
   6b. VENTE FLASH (après le hero, option km_flash)
   ==================================================== */
.km-flash-sale {
  background-color: var(--km-pink-light);
  border-top: 1px solid rgba(255, 20, 147, 0.2);
  border-bottom: 1px solid rgba(255, 20, 147, 0.2);
  padding: 24px 0;
}
.km-flash-sale__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.km-flash-sale__title {
  font-family: var(--km-font-title);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.km-flash-sale__bolt {
  color: var(--km-pink);
}
.km-flash-sale__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.km-flash-sale__countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.km-flash-sale__ends {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--km-pink-text);
}
.km-flash-sale__units {
  display: flex;
  gap: 10px;
}
.km-flash-sale__units > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
}
.km-flash-sale__units b {
  font-family: var(--km-font-title);
  font-size: 18px;
  font-weight: 700;
}
.km-flash-sale__units small {
  font-size: 10px;
  color: var(--km-muted);
  text-transform: uppercase;
}

/* ====================================================
   7. CATEGORIES GRID
   ==================================================== */
.km-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 40px 0;
}
@media (min-width: 768px) {
  .km-cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 60px 0;
  }
}
.km-cat-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.km-cat-card__img-wrap {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background-color: var(--km-surface);
}
.km-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.km-cat-card:hover .km-cat-card__img {
  transform: scale(1.03);
}
.km-cat-card__name {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--km-text);
  transition: color 0.2s ease;
}
.km-cat-card:hover .km-cat-card__name {
  color: var(--km-pink-text);
}

/* ====================================================
   8. CATEGORY CAROUSELS
   ==================================================== */
.km-carousel-section {
  padding: 48px 0;
}
.km-carousel-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.km-carousel-section__title {
  font-family: var(--km-font-title);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
.km-carousel-section__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.km-arrow-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--km-text);
  background: transparent;
  color: var(--km-text);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.km-arrow-btn:hover:not(:disabled) {
  border-color: var(--km-pink-text);
  color: var(--km-pink-text);
}
.km-arrow-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.km-arrow-btn[hidden] {
  display: none;
}

.km-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.km-carousel-track::-webkit-scrollbar {
  display: none;
}
.km-carousel-track > .km-product-card {
  width: 158px;
  flex: 0 0 158px;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .km-carousel-track {
    gap: 24px;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .km-carousel-track > .km-product-card {
    width: calc((100% - 48px) / 3);
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: none;
  }
}
@media (min-width: 1000px) {
  .km-carousel-track > .km-product-card {
    width: calc((100% - 72px) / 4);
    flex: 0 0 calc((100% - 72px) / 4);
  }
}

.km-carousel-progress {
  position: relative;
  height: 2px;
  background-color: var(--km-border);
  margin-top: 16px;
}
.km-carousel-progress__bar {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 25%;
  background-color: var(--km-text);
  transition: inset-inline-start 0.5s cubic-bezier(.2, .7, .2, 1), width 0.2s ease;
}

/* ====================================================
   9. PRODUCT CARD
   ==================================================== */
.km-product-card {
  width: calc(50% - 8px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}
@media (min-width: 768px) {
  .km-product-card {
    width: calc(25% - 12px);
  }
}
.km-product-card--grid {
  width: 100% !important;
}

.km-product-card__img-wrap {
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--km-surface);
}
.km-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}
.km-product-card__img--sec {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.km-product-card:hover .km-product-card__img--sec {
  opacity: 1;
}

.km-product-card__badge-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
[dir="rtl"] .km-product-card__badge-stack {
  left: auto;
  right: 10px;
}
.km-badge-new {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: rgba(251, 250, 248, 0.95);
  color: var(--km-text);
  padding: 2px 7px;
}
.km-badge-sale {
  font-size: 9px;
  font-weight: 800;
  background-color: var(--km-pink-light);
  color: var(--km-pink-text);
  border: 1px solid rgba(255, 20, 147, 0.2);
  padding: 2px 7px;
}
.km-badge-flash {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background-color: var(--km-pink);
  color: #FFFFFF;
  padding: 2px 7px;
}

.km-product-card__heart {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--km-text);
  transition: all 0.2s ease;
}
[dir="rtl"] .km-product-card__heart {
  right: auto;
  left: 4px;
}
.km-product-card__heart:hover,
.km-product-card__heart.km-active {
  color: var(--km-pink-text);
  fill: var(--km-pink);
}

.km-product-card__details {
  padding: 10px 0 4px;
}
.km-product-card__title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--km-text);
  line-height: 1.4;
}
.km-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 6px;
}
.km-product-card__price {
  font-weight: 700;
  color: var(--km-text);
}
.km-product-card__price--sale {
  color: var(--km-pink-text);
  font-weight: 800;
}
.km-product-card__price--old {
  color: var(--km-muted);
  text-decoration: line-through;
  font-size: 11px;
}

.km-product-card__swatches {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.km-swatch-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.km-product-card__swatch-count {
  font-size: 11px;
  color: var(--km-muted);
  margin-inline-start: 2px;
}
.km-product-card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.km-product-card__order-btn {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--km-text);
  border-radius: 999px;
  background-color: transparent;
  color: var(--km-text);
  font-family: var(--km-font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[dir="rtl"] .km-product-card__order-btn {
  font-family: var(--km-font-arabic);
  letter-spacing: 0;
}
.km-product-card__order-btn:hover {
  background-color: var(--km-text);
  color: var(--km-bg);
}
/* Pièce en cours (live) : bouton plein rose, seul endroit où « Commander » est en rose plein */
.km-product-card--current .km-product-card__order-btn {
  height: 44px;
  border-color: var(--km-btn);
  background-color: var(--km-btn);
  color: #FFFFFF;
}
.km-product-card--current .km-product-card__order-btn:hover {
  background-color: var(--km-btn-hover);
  border-color: var(--km-btn-hover);
  color: #FFFFFF;
}

/* ====================================================
   10. EDITORIAL: NOTRE HISTOIRE
   ==================================================== */
.km-story {
  padding: 60px 0;
}
@media (min-width: 768px) {
  .km-story {
    padding: 90px 0;
  }
}
.km-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1024px) {
  .km-story__grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}
.km-story__img-wrap {
  aspect-ratio: 4 / 5;
  width: 100%;
  background-color: var(--km-surface);
  overflow: hidden;
}
.km-story__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.km-story__tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--km-pink-dark);
}
.km-story__quote {
  font-family: var(--km-font-title);
  font-size: 28px;
  line-height: 1.3;
  margin: 12px 0 16px;
  color: var(--km-text);
}
@media (min-width: 768px) {
  .km-story__quote {
    font-size: 34px;
  }
}
.km-story__text {
  font-size: 13px;
  color: var(--km-muted);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* ====================================================
   11. PRODUCT DETAIL PAGE (/article/?id=…)
   Téléphone d'abord : galerie plein largeur 4:5 swipe + compteur, miniatures en dessous, infos sous la galerie.
   PC ≥ 1024px : miniatures verticales 84px + grande photo à gauche, infos à droite (max 480px) collées en haut.
   ==================================================== */
.km-pdp {
  padding: 24px 16px 80px;
}
.km-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .km-pdp__grid {
    grid-template-columns: 1fr 480px;
    gap: 48px;
  }
}

.km-pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1024px) {
  .km-pdp__gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
  }
}

/* Téléphone : bande qui défile (swipe) + compteur */
.km-pdp__swipe {
  position: relative;
}
@media (min-width: 1024px) {
  .km-pdp__swipe { display: none; }
}
.km-pdp__swipe-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.km-pdp__swipe-track::-webkit-scrollbar { display: none; }
.km-pdp__swipe-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  background-color: var(--km-surface);
}
.km-pdp__swipe-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-pdp__counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  background-color: rgba(31, 28, 26, 0.65);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}
[dir="rtl"] .km-pdp__counter { right: auto; left: 12px; }

/* PC : grande photo fixe (changée par les miniatures) */
.km-pdp__main-img {
  display: none;
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background-color: var(--km-surface);
  grid-column: 2;
}
@media (min-width: 1024px) {
  .km-pdp__main-img { display: block; }
}

.km-pdp__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.km-pdp__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .km-pdp__thumbs {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(84px * 5 + 10px * 4);
  }
}
.km-pdp__thumb {
  flex-shrink: 0;
  width: 70px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid var(--km-border);
  background: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 1024px) {
  .km-pdp__thumb { width: 84px; }
}
.km-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.km-pdp__thumb.km-active,
.km-pdp__thumb:hover {
  opacity: 1;
  border-color: var(--km-pink);
}

.km-pdp__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  .km-pdp__info {
    position: sticky;
    top: calc(var(--km-hd-h, 56px) + 16px);
  }
}
.km-pdp__title {
  font-family: var(--km-font-title);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  margin: 8px 0 0;
}
[dir="rtl"] .km-pdp__title { font-family: var(--km-font-arabic); font-weight: 600; letter-spacing: 0; }
@media (min-width: 1024px) {
  .km-pdp__title { font-size: 40px; }
}

.km-pdp__price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 22px;
}
.km-pdp__price { font-weight: 700; color: var(--km-text); }
.km-pdp__price--sale { font-weight: 800; color: var(--km-pink-text); }
.km-pdp__price--old { font-size: 15px; color: var(--km-muted); text-decoration: line-through; }
.km-pdp__price-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  background-color: var(--km-pink-light);
  color: var(--km-pink-text);
  border: 1px solid rgba(255, 20, 147, 0.2);
}
.km-pdp__delivery-line {
  margin: -10px 0 0;
  font-size: 13px;
  color: var(--km-muted);
}

.km-variant-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-muted);
  margin-bottom: 10px;
  display: block;
}

.km-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.km-swatch-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}
.km-swatch-btn span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
}
.km-swatch-btn.km-selected { border-color: var(--km-pink); }

.km-pdp__size-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.km-pdp__size-guide-link {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--km-pink-text);
  text-decoration: underline;
  cursor: pointer;
}

.km-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.km-size-btn {
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--km-control-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.km-size-btn.km-selected {
  background-color: var(--km-text);
  color: #FFFFFF;
  border-color: var(--km-text);
}
.km-size-btn.km-out-of-stock {
  background-color: var(--km-surface);
  color: var(--km-muted);
  text-decoration: line-through;
}

.km-pdp__model-info {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--km-muted);
  line-height: 1.6;
}

.km-pdp__cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.km-pdp__whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: var(--km-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.km-pdp__whatsapp-link:hover { color: var(--km-btn-hover); }

/* Encadré réassurance : mêmes classes que le pied de page (kmode_footer), en version compacte dans la colonne infos */
.km-reassure--pdp {
  border: 1px solid var(--km-border);
  padding: 4px;
}
.km-reassure--pdp .km-reassure__inner {
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.km-reassure--pdp .km-reassure__item { max-width: none; }

.km-qty-picker {
  display: inline-flex;
  flex-shrink: 0;
  height: 48px;
  border: 1px solid var(--km-control-border);
  background-color: #FFFFFF;
}
.km-qty-btn {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}
.km-qty-val {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.km-note { font-size: 12px; color: var(--km-muted); margin: 10px 0 0; }

/* Guide des tailles (accordéon) */
.km-size-guide-wrap { overflow-x: auto; }
.km-size-guide-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.km-size-guide-table th,
.km-size-guide-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--km-border); }
.km-size-guide-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--km-muted); font-weight: 700; }
.km-size-guide-table tr.km-active td { background-color: var(--km-pink-light); font-weight: 700; }

.km-sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 39;
  background-color: #FFFFFF;
  border-top: 1px solid var(--km-border);
  padding: 10px 16px env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.km-sticky-bottom-bar.km-visible { transform: translateY(0); }
.km-sticky-bottom-bar .km-btn { height: 48px; padding: 0 24px; }
.km-sticky-bottom-bar__price { font-size: 16px; font-weight: 700; }
@media (min-width: 1024px) {
  .km-sticky-bottom-bar { display: none; }
}

/* Avis clientes */
.km-pdp-reviews { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--km-border); }
.km-pdp-reviews__title { font-family: var(--km-font-title); font-weight: 500; font-size: 24px; margin: 0 0 24px; }
[dir="rtl"] .km-pdp-reviews__title { font-family: var(--km-font-arabic); letter-spacing: 0; }

.km-reviews-gauge { max-width: 420px; margin-bottom: 32px; }
.km-reviews-gauge__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.km-reviews-gauge__bar { display: flex; height: 8px; background-color: var(--km-surface); overflow: hidden; }
.km-reviews-gauge__seg { height: 100%; }
.km-reviews-gauge__seg--petit { background-color: var(--km-control-border); }
.km-reviews-gauge__seg--parfait { background-color: var(--km-btn); }
.km-reviews-gauge__seg--grand { background-color: var(--km-text); }
.km-reviews-gauge__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--km-muted); }
.km-reviews-gauge__legend span { display: inline-flex; align-items: center; gap: 6px; }
.km-reviews-gauge__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.km-reviews-gauge__dot--petit { background-color: var(--km-control-border); }
.km-reviews-gauge__dot--parfait { background-color: var(--km-btn); }
.km-reviews-gauge__dot--grand { background-color: var(--km-text); }

.km-reviews-photos { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 28px; scrollbar-width: none; }
.km-reviews-photos::-webkit-scrollbar { display: none; }
.km-reviews-photos__item { flex: 0 0 90px; width: 90px; aspect-ratio: 4 / 5; background-color: var(--km-surface); }
.km-reviews-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.km-reviews-list { display: grid; gap: 16px; }
@media (min-width: 700px) {
  .km-reviews-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .km-reviews-list { grid-template-columns: repeat(3, 1fr); }
}
.km-reviews-card { background-color: var(--km-surface); padding: 18px; }
.km-reviews-card__text { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.km-reviews-card__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--km-muted); }
.km-reviews-card__author { font-weight: 700; color: var(--km-text); }
.km-reviews-card__fit { color: var(--km-pink-text); font-weight: 600; }

.km-pdp-related { padding: 48px 0 0; }

/* Accordéons (<button aria-expanded>) */
.km-accordion {
  border-top: 1px solid var(--km-border);
}
.km-accordion__item {
  border-bottom: 1px solid var(--km-border);
}
.km-accordion__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 14px 0;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-text);
  cursor: pointer;
  text-align: left;
}
[dir="rtl"] .km-accordion__btn {
  text-align: right;
}
.km-accordion__sign { font-size: 16px; font-weight: 400; color: var(--km-muted); }
.km-accordion__body {
  padding-bottom: 14px;
  font-size: 13px;
  color: var(--km-muted);
  line-height: 1.7;
}
.km-accordion__body a { color: var(--km-pink-text); }

/* ====================================================
   12. LIVE SHOPPING PAGE (/live.html)
   Format réglé dans l'app de gestion (km_live.format) : .is-vertical (9:16, défaut, lives filmés au
   téléphone) ou .is-horizontal (16:9). Conteneur en aspect-ratio (pas de saut de page au chargement,
   même taille pour le bloc « commence bientôt ») ; l'iframe est dimensionnée en JS (main.js) sur la
   taille réelle du conteneur, car le plugin vidéo Facebook a besoin de width/height cohérents.
   Téléphone : pleine largeur, hauteur plafonnée à 75svh (largeur réduite en conséquence, centré).
   PC (≥1024px) vertical : vidéo à gauche (400–440px, hauteur max 80vh), pièces à droite.
   PC horizontal : vidéo + contenu centrés, pleine largeur jusqu'à 960px.
   ==================================================== */
.km-live-page {
  padding: 30px 16px 80px;
}
.km-live-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.km-live-media { width: 100%; }
.km-live-side { width: 100%; min-width: 0; }

.km-live-video-wrap {
  --km-ar-w: 9;
  --km-ar-h: 16;
  --km-live-maxh: 75svh;
  width: min(100%, calc(var(--km-live-maxh) * var(--km-ar-w) / var(--km-ar-h)));
  max-height: var(--km-live-maxh);
  aspect-ratio: var(--km-ar-w) / var(--km-ar-h);
  background-color: #1F1C1A;
  position: relative;
  overflow: hidden;
  margin: 0 auto 24px;
}
.km-live-video-wrap.is-horizontal { --km-ar-w: 16; --km-ar-h: 9; }
.km-live-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.km-live-video-wrap.km-live-soon {
  background-color: var(--km-card-bg);
  border: 1px solid var(--km-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
.km-live-soon__inner { max-width: 360px; }

/* Réassurance compacte, une ligne, juste sous la vidéo */
.km-live-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: -8px auto 24px;
  font-size: 12px;
  color: var(--km-muted);
  text-align: center;
}
.km-live-reassure__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.km-live-reassure__item .km-icon { width: 15px; height: 15px; flex-shrink: 0; }
.km-live-reassure__sep { color: var(--km-border); }

@media (min-width: 1024px) {
  .km-live-page.is-vertical .km-live-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }
  .km-live-page.is-vertical .km-live-media {
    flex: 0 0 clamp(400px, 34vw, 440px);
    width: clamp(400px, 34vw, 440px);
    margin-bottom: 0;
  }
  .km-live-page.is-vertical .km-live-side { flex: 1 1 auto; }
  .km-live-page.is-vertical .km-live-video-wrap { --km-live-maxh: 80vh; }

  .km-live-page.is-horizontal .km-live-media,
  .km-live-page.is-horizontal .km-live-side {
    max-width: 960px;
    margin-inline: auto;
  }
  .km-live-page.is-horizontal .km-live-video-wrap {
    width: 100%;
    max-height: none;
  }
}

.km-code-search-box {
  background-color: var(--km-card-bg);
  border: 1px solid var(--km-border);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.km-code-search-box > label { flex: 1 1 100%; }
.km-code-search-box .km-code-search-input { flex: 1 1 140px; min-width: 0; width: auto; }
.km-code-search-box .km-btn { flex: 0 0 auto; }
@media (min-width: 640px) { .km-code-search-box > label { flex: 0 0 auto; } }
.km-code-search-input {
  flex: 1;
  border: 1px solid var(--km-border);
  padding: 10px 14px;
  min-height: 44px;
  font-size: 16px;
  text-transform: uppercase;
  outline: none;
}
.km-code-search-input:focus {
  border-color: var(--km-pink);
}
.km-code-search-box .km-error-msg,
#km-live-code-err {
  color: #A8085D;
}

.km-pinned-card {
  background-color: var(--km-pink-subtle);
  border: 2px solid var(--km-pink);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

/* ====================================================
   13. CART & CHECKOUT (/panier.html & modal)
   ==================================================== */
.km-cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 1024px) {
  .km-cart-grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

.km-cart-items-list {
  background-color: var(--km-card-bg);
  border: 1px solid var(--km-border);
  divide-y: 1px solid var(--km-border);
}
.km-cart-row {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--km-border);
}
.km-cart-row__img {
  width: 80px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background-color: var(--km-surface);
  flex-shrink: 0;
}
.km-cart-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.km-order-box {
  background-color: var(--km-card-bg);
  border: 1px solid var(--km-border);
  padding: 24px;
}

.km-form-group {
  margin-bottom: 16px;
}
.km-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--km-text);
}
.km-input,
.km-select,
.km-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--km-border);
  background-color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  color: var(--km-text);
  outline: none;
  border-radius: var(--km-radius);
  transition: border-color 0.2s ease;
}
.km-input:focus,
.km-select:focus,
.km-textarea:focus {
  border-color: var(--km-pink);
}
.km-input-error {
  border-color: #E74C3C;
}
.km-error-msg {
  color: #E74C3C;
  font-size: 11px;
  margin-top: 4px;
  display: block;
}

/* Confirmation Box */
.km-confirmation-box {
  max-width: 520px;
  margin: 60px auto;
  background-color: #FFFFFF;
  border: 1px solid var(--km-border);
  padding: 40px 30px;
  text-align: center;
}
.km-check-circle {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: var(--km-pink-light);
  color: var(--km-pink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

/* ====================================================
   14. TOAST NOTIFICATION
   ==================================================== */
.km-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: #1F1C1A;
  color: #FFFFFF;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.km-toast.km-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ====================================================
   15. FOOTER (bande réassurance, pied de page, bouton WhatsApp flottant)
   ==================================================== */
.km-reassure { background-color: var(--km-surface); }
.km-reassure__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 900px) {
  .km-reassure__inner { flex-direction: row; justify-content: center; gap: 48px; padding: 32px 24px; }
}
.km-reassure__item { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; }
@media (min-width: 900px) {
  .km-reassure__item { flex: 1; max-width: 320px; }
}
.km-reassure__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--km-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-reassure__icon .km-icon { width: 22px; height: 22px; color: var(--km-text); }
.km-reassure__title { font-size: 14px; font-weight: 700; color: var(--km-text); margin: 0 0 2px; }
.km-reassure__text { font-size: 13px; color: var(--km-muted); margin: 0; line-height: 1.4; }
.km-reassure__item--link:hover .km-reassure__title,
.km-reassure__item--link:focus-visible .km-reassure__title { color: var(--km-pink-text); }

.km-footer {
  --kf-bg: #1F1C1A;
  --kf-text: #FBFAF8;
  --kf-link: #E6DED5;
  --kf-title: #B5AAA0;
  --kf-border: #3D3632;
  background-color: var(--kf-bg);
  color: var(--kf-text);
}
.km-footer__inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 32px; }
@media (min-width: 900px) {
  .km-footer__inner { padding: 64px 24px 32px; }
}
.km-footer__grid { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) {
  .km-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}
@media (min-width: 900px) {
  .km-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}
.km-footer__brand { padding-bottom: 28px; }
@media (min-width: 768px) {
  .km-footer__brand { padding-bottom: 0; }
}
.km-footer__logo { font-family: var(--km-font-title); font-size: 26px; letter-spacing: 0.2em; color: #FFFFFF; text-decoration: none; display: inline-block; }
.km-footer__tagline { font-size: 14px; color: var(--kf-title); margin: 14px 0 20px; line-height: 1.5; max-width: 320px; }
.km-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #6E6259;
  border-radius: 22px;
  color: var(--kf-text);
  text-decoration: none;
  font-size: 13px;
}
.km-footer__wa:hover, .km-footer__wa:focus-visible { border-color: #FFFFFF; color: #FFFFFF; }
.km-footer__wa svg { width: 18px; height: 18px; }
.km-footer__col { border-bottom: 1px solid var(--kf-border); }
@media (min-width: 768px) {
  .km-footer__col { border-bottom: 0; }
}
.km-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
[dir="rtl"] .km-footer__toggle { text-align: right; }
.km-footer__toggle span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kf-title); }
.km-footer__sign { font-size: 20px; line-height: 1; color: var(--kf-title); font-weight: 400; }
@media (min-width: 768px) {
  .km-footer__toggle { pointer-events: none; height: auto; padding: 0 0 18px; }
  .km-footer__sign { display: none; }
  .km-footer__list[hidden] { display: flex !important; flex-direction: column; }
}
.km-footer__list { list-style: none; margin: 0; padding: 0 0 12px; }
.km-footer__list:not([hidden]) { display: flex; flex-direction: column; }
.km-footer__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  line-height: 36px;
  font-size: 14px;
  color: var(--kf-link);
  text-decoration: none;
}
.km-footer__list a:hover, .km-footer__list a:focus-visible { color: #FFFFFF; text-decoration: underline; }
.km-footer__social .km-icon { width: 18px; height: 18px; flex-shrink: 0; }
.km-footer__bottom {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--kf-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  color: var(--kf-title);
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .km-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; margin-top: 40px; }
}
.km-footer__pay { display: inline-flex; align-items: center; gap: 6px; }
.km-footer__pay .km-icon { width: 16px; height: 16px; }
.km-footer__lang { display: inline-flex; align-items: center; gap: 6px; }
.km-footer__lang button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; background: none; border: 0; color: var(--kf-title); font: inherit; font-size: 13px; cursor: pointer; }
.km-footer__lang button[aria-pressed="true"] { color: #FFFFFF; font-weight: 700; }
[dir="rtl"] .km-footer__lang button[lang="ar"] { font-family: var(--km-font-arabic); }

/* Bouton WhatsApp flottant (toutes les pages sauf le panier) : côté opposé aux boutons d'achat
   (« Commander » de la barre collante PDP, du bas de la page live, etc., toujours côté fin de ligne). */
.km-wa-float {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #1F1C1A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 60;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.km-wa-float.km-visible { opacity: 1; transform: none; pointer-events: auto; }
.km-wa-float svg { width: 26px; height: 26px; }
[dir="rtl"] .km-wa-float { left: auto; right: 16px; }
@media (max-width: 767px) {
  .km-wa-float.km-above-nav { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.km-locked .km-wa-float { display: none; }

/* ====================================================
   16. RTL (ARABIC) OVERRIDES
   ==================================================== */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .km-arrow-btn svg {
  transform: scaleX(-1);
}

/* ====================================================
   17. FINITIONS : accessibilité, pied de page, pages d'information, 404, RTL
   ==================================================== */
/* Focus visible au clavier (jamais au toucher) */
.km-body a:focus-visible,
.km-body button:focus-visible,
.km-body input:focus-visible,
.km-body select:focus-visible,
.km-body textarea:focus-visible,
.km-body [tabindex]:focus-visible {
  outline: 2px solid var(--km-pink-dark);
  outline-offset: 2px;
}
.km-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--km-text);
  color: #fff;
  padding: 10px 16px;
  font-size: 12px;
  text-decoration: none;
}
.km-skip:focus { top: 8px; }
[dir="rtl"] .km-skip { left: auto; right: 8px; }

/* Pages d'information (Livraison, CGV…) */
.km-legal { max-width: 760px; padding-top: 48px; padding-bottom: 40px; }
.km-legal__title { font-family: var(--km-font-title); font-size: 34px; font-weight: 500; line-height: 1.2; margin: 0 0 24px; }
.km-legal__body { font-size: 15px; line-height: 1.75; text-align: left; }
.km-legal__body h2 { font-family: var(--km-font-title); font-size: 21px; font-weight: 600; margin: 34px 0 10px; }
.km-legal__body ul, .km-legal__body ol { padding-left: 22px; }
.km-legal__body li { margin-bottom: 6px; }
.km-legal__body a { color: var(--km-pink-text); }
.km-legal__body .km-btn { color: #fff; }
.km-legal__intro { font-size: 17px; color: var(--km-text); }
.km-todo { background: var(--km-pink-light); color: var(--km-pink-dark); padding: 0 4px; font-weight: 600; }
.km-legal__ar-note { display: none; background: var(--km-surface); border: 1px solid var(--km-border); padding: 12px 16px; font-family: var(--km-font-arabic); font-size: 13px; }
[dir="rtl"] .km-legal__ar-note { display: block; }

/* Page 404 */
.km-404 { text-align: center; padding-top: 64px; padding-bottom: 40px; max-width: 640px; }
.km-404__code { font-family: var(--km-font-title); font-size: 96px; line-height: 1; margin: 0; color: var(--km-pink); }
.km-404__title { font-family: var(--km-font-title); font-size: 30px; font-weight: 500; margin: 12px 0; }
.km-404__text { color: var(--km-muted); font-size: 14px; line-height: 1.7; margin: 0 auto 28px; max-width: 460px; }
.km-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.km-404__cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; }
.km-404__cat { border: 1px solid var(--km-border); padding: 8px 14px; font-size: 12px; color: var(--km-text); text-decoration: none; }
.km-404__cat:hover { border-color: var(--km-pink); }
.km-404__help { margin-top: 32px; font-size: 13px; color: var(--km-muted); }
.km-404__help a { color: var(--km-pink-text); }

/* RTL : icônes directionnelles retournées, polices arabes, flèches texte */
[dir="rtl"] .km-flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .km-legal__title,
[dir="rtl"] .km-404__title { font-family: var(--km-font-arabic); font-weight: 600; letter-spacing: 0; }
[dir="rtl"] .km-legal__title { text-align: right; }
/* H1 Kufi 600 : les h1 rendus en JS avec une police en ligne (live, panier, favoris) utilisent cette classe partagée. */
.km-page-title { font-family: var(--km-font-title); }
[dir="rtl"] .km-page-title { font-family: var(--km-font-arabic); font-weight: 600; letter-spacing: 0; }
.km-legal__body { font-family: var(--km-font-text); }
@media (max-width: 767px) {
  .km-footer__inner { padding-bottom: 96px; } /* Rien de caché sous la barre de navigation du bas */
}

/* Arabe : titres/liens du pied de page, logo et bouton WhatsApp restent en latin */
[dir="rtl"] .km-footer__toggle span:first-child,
[dir="rtl"] .km-footer__tagline,
[dir="rtl"] .km-footer__list a,
[dir="rtl"] .km-footer__pay span,
[dir="rtl"] .km-reassure__title,
[dir="rtl"] .km-reassure__text { font-family: var(--km-font-arabic); letter-spacing: 0; }

/* ====================================================
   18. PAGE COLLECTION (/collection/?id=…, main.js renderCategoryPage)
   Téléphone d'abord : barre « Filtrer | Trier » + panneaux plein écran / bas.
   PC ≥ 1024px : colonne de filtres 240px à gauche, tri au-dessus de la grille.
   ==================================================== */
.km-collection { padding-top: 24px; padding-bottom: 60px; }

.km-breadcrumb { text-align: center; font-size: 12px; color: var(--km-muted); margin: 0 0 10px; }
.km-breadcrumb__sep { margin: 0 6px; }

.km-collection__title { text-align: center; font-family: var(--km-font-title); font-weight: 500; font-size: 32px; line-height: 1.15; margin: 0 0 10px; }
.km-collection__desc { text-align: center; max-width: 560px; margin: 0 auto 10px; font-size: 13px; line-height: 1.6; color: var(--km-muted); }
.km-collection__count { text-align: center; font-size: 12px; color: var(--km-muted); margin: 0 0 24px; }
[dir="rtl"] .km-collection__title { font-family: var(--km-font-arabic); font-weight: 600; letter-spacing: 0; }

@media (min-width: 1024px) {
  .km-collection__title { font-size: 44px; }
}

/* Pilules de sous-catégories (même langage visuel que .km-nav__link) */
.km-collection__pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 24px;
}
.km-collection__pills::-webkit-scrollbar { display: none; }
.km-collection__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--km-border);
  border-radius: 22px;
  color: var(--km-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.km-collection__pill:hover { color: var(--km-btn-hover); }
.km-collection__pill.km-active { background-color: var(--km-text); border-color: var(--km-text); color: var(--km-bg); }

/* Mise en page : colonne de filtres (PC) + contenu */
.km-cat-layout { display: block; }
.km-cat-sidebar { display: none; }
.km-cat-main { min-width: 0; }

@media (min-width: 1024px) {
  .km-cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
  .km-cat-sidebar { display: block; }
}

/* Barre « Filtrer | Trier » (téléphone) / bouton de tri au-dessus de la grille (PC) */
.km-cat-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.km-cat-toolbar__btn {
  flex: 1;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--km-border);
  background-color: transparent;
  color: var(--km-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.km-cat-toolbar__btn[aria-expanded="true"] { border-color: var(--km-text); }
.km-cat-toolbar__btn:hover { border-color: var(--km-text); }

@media (min-width: 1024px) {
  .km-cat-toolbar { justify-content: flex-end; }
  .km-cat-toolbar__btn--filter { display: none; }
  .km-cat-toolbar__btn--sort { flex: none; min-width: 220px; }
}

/* Pastilles de filtres appliqués */
.km-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.km-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background-color: var(--km-surface);
  color: var(--km-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.km-chip svg { flex-shrink: 0; }
.km-chip--clear { background-color: transparent; color: var(--km-muted); text-decoration: underline; }

/* Groupes de filtres : partagés par le panneau téléphone et la colonne PC */
.km-filter-group { padding: 18px 0; border-bottom: 1px solid var(--km-border); }
.km-filter-group:first-child { padding-top: 0; }
.km-filter-group:last-child { border-bottom: 0; }
.km-filter-group__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--km-text); margin: 0 0 14px; }

.km-filter-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.km-filter-size {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--km-control-border);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--km-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.km-filter-size.km-active { background-color: var(--km-text); border-color: var(--km-text); color: #FFFFFF; }

.km-filter-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.km-filter-color {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--km-control-border);
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.km-filter-color__dot { width: 30px; height: 30px; border-radius: 50%; background-color: var(--km-swatch); border: 1px solid rgba(0, 0, 0, 0.12); }
.km-filter-color.km-active { border-color: var(--km-text); border-width: 2px; }

.km-filter-checks { display: flex; flex-direction: column; }
.km-filter-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--km-text); cursor: pointer; }
.km-filter-check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--km-btn); }

/* Grille produits : 2 colonnes téléphone, auto-fill 240px PC */
.km-cat-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .km-cat-page-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
}
.km-cat-page-grid img { max-width: 100%; }

/* Pagination « Voir plus d'articles » */
.km-cat-loadmore { text-align: center; margin: 32px 0 10px; }
.km-cat-loadmore__count { font-size: 12px; color: var(--km-muted); margin: 0 0 10px; }
.km-cat-loadmore__bar { height: 3px; max-width: 220px; margin: 0 auto 20px; background-color: var(--km-border); }
.km-cat-loadmore__bar span { display: block; height: 100%; background-color: var(--km-btn); transition: width 0.3s ease; }

/* État vide */
.km-cat-empty__inner { text-align: center; padding: 56px 16px; }
.km-cat-empty__text { font-size: 14px; color: var(--km-muted); margin: 0 0 20px; }
.km-cat-empty__cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }

/* Panneaux (filtres plein écran / tri bas de page) : même mécanique que .km-drawer / .km-search (main.js setupLayer) */
.km-sheet { position: fixed; inset: 0; z-index: 110; }
.km-sheet[hidden] { display: none; }
.km-sheet__backdrop { position: absolute; inset: 0; background-color: rgba(31, 28, 26, 0.4); opacity: 0; transition: opacity 0.25s ease; }
.km-sheet.km-open .km-sheet__backdrop { opacity: 1; }

.km-sheet--full .km-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--km-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.km-sheet--full.km-open .km-sheet__panel { opacity: 1; }

.km-sheet--bottom .km-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background-color: var(--km-bg);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.km-sheet--bottom.km-open .km-sheet__panel { transform: translateY(0); }

@media (min-width: 1024px) {
  .km-sheet--bottom .km-sheet__panel { left: auto; right: 24px; bottom: 24px; max-width: 320px; border-radius: 8px; }
}

.km-sheet__head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--km-border); flex-shrink: 0; }
[dir="rtl"] .km-sheet__head { padding: 0 20px 0 8px; }
.km-sheet__title { font-family: var(--km-font-title); font-weight: 500; font-size: 18px; margin: 0; }
[dir="rtl"] .km-sheet__title { font-family: var(--km-font-arabic); letter-spacing: 0; }
.km-sheet__close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--km-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.km-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.km-sheet__foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--km-border); flex-shrink: 0; }

.km-sheet__list { list-style: none; margin: 0; padding: 8px 0; }
.km-sheet__option {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--km-border);
  background: transparent;
  color: var(--km-text);
  font-family: inherit;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
}
.km-sheet__option.km-active { font-weight: 700; color: var(--km-pink-text); }
.km-sheet__option svg { flex-shrink: 0; color: var(--km-pink-text); }

/* ====================================================
   11. FENÊTRE « COMMANDE RAPIDE » (km-sheet--quickorder)
   ==================================================== */
.km-sheet--quickorder .km-sheet__backdrop { background-color: rgba(31, 28, 26, 0.55); }
.km-sheet--quickorder.km-sheet--bottom .km-sheet__panel {
  max-height: 92vh;
  border-radius: 20px 20px 0 0;
}
@media (min-width: 1024px) {
  .km-sheet--quickorder.km-sheet--bottom .km-sheet__panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -45%);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    border-radius: 16px;
  }
  .km-sheet--quickorder.km-sheet--bottom.km-open .km-sheet__panel { transform: translate(-50%, -50%); }
  .km-sheet--quickorder .km-qo-handle { display: none; }
}

.km-qo-handle { width: 36px; height: 4px; border-radius: 2px; background-color: var(--km-border); margin: 10px auto 0; flex-shrink: 0; }

.km-qo-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 8px 10px 20px; flex-shrink: 0; }
[dir="rtl"] .km-qo-head { padding: 14px 20px 10px 8px; }
.km-qo-head__title { font-family: var(--km-font-title); font-size: 22px; font-weight: 500; margin: 0; }
[dir="rtl"] .km-qo-head__title { font-family: var(--km-font-arabic); letter-spacing: 0; }
.km-qo-head__sub { font-size: 12px; color: var(--km-muted); margin: 4px 0 0; }

#km-qo-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.km-qo-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.km-qo-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.km-qo-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--km-border); flex-shrink: 0; }
.km-qo-confirm-btn { height: 54px; }
.km-qo-foot-note { font-size: 11px; color: var(--km-muted); text-align: center; margin: 10px 0 0; }

.km-qo-summary { display: flex; gap: 12px; align-items: flex-start; background-color: var(--km-surface); padding: 14px; margin-bottom: 20px; }
.km-qo-summary__img { width: 72px; height: 72px; object-fit: cover; flex-shrink: 0; background-color: var(--km-card-bg); }
.km-qo-summary__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.km-qo-summary__name { font-size: 14px; font-weight: 600; }
.km-qo-summary__price { font-size: 13px; }
.km-qo-summary__variant { font-size: 12px; color: var(--km-muted); }
.km-qo-stock-alert { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--km-pink-text); }

.km-qo-block { margin-bottom: 22px; }
.km-qo-block__title { font-family: var(--km-font-title); font-size: 18px; font-weight: 500; margin: 0 0 14px; }
[dir="rtl"] .km-qo-block__title { font-family: var(--km-font-arabic); letter-spacing: 0; }

.km-qo-color-list { display: flex; flex-wrap: wrap; gap: 8px; }
.km-qo-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--km-control-border);
  background-color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.km-qo-color-pill.km-selected { border-color: var(--km-pink); background-color: var(--km-pink-light); }
.km-qo-color-pill__dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.15); }

.km-size-list--error .km-size-btn { border-color: var(--km-pink); }

.km-call-hint-static { margin: 6px 0 0; font-size: 12px; color: var(--km-muted); }

.km-qo-recap { border-top: 1px solid var(--km-border); padding-top: 16px; font-size: 13px; }
.km-qo-recap__row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.km-qo-recap__hint { font-size: 11px; color: var(--km-pink-text); margin: 0 0 6px; }
.km-qo-recap__row--total { font-size: 16px; font-weight: 800; color: var(--km-pink-text); border-top: 1px dashed var(--km-border); padding-top: 10px; margin-top: 10px; }

.km-qo-success { text-align: center; padding: 24px 4px; }
.km-qo-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid var(--km-pink);
  color: var(--km-pink-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.km-qo-success__title { font-family: var(--km-font-title); font-size: 24px; margin: 0 0 8px; }
[dir="rtl"] .km-qo-success__title { font-family: var(--km-font-arabic); letter-spacing: 0; }
.km-qo-success__text { font-size: 13px; color: var(--km-muted); line-height: 1.6; margin: 0 0 20px; }
.km-qo-success__recap { background-color: var(--km-surface); padding: 16px; text-align: start; font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
.km-qo-success__total { margin-top: 6px; font-weight: 700; color: var(--km-pink-text); font-size: 15px; }
.km-qo-success__actions { display: flex; flex-direction: column; gap: 10px; }