/* Ajustements Nkoh pour le portage du thème Nest dans Next.js. */

/* ─── Tokens charte Nkoh (canon, alignés sur globals.css) ───────────
   On les redéclare ici parce que nest-nkoh-extra.css est chargé en
   `<link>` et n'a pas accès au pipeline Tailwind. Ces définitions
   reprennent fidèlement les `@theme` de globals.css. */
:root {
  /* Charte logo Nkoh Shop — turquoise + magenta */
  --color-primary: #008a7e;
  --color-primary-light: #00a896;
  --color-primary-dark: #00564e;
  --color-primary-deep: #003932;

  --color-accent: #cc0066;
  --color-accent-light: #e84b92;
  --color-accent-dark: #a30052;

  --color-bg: #f8f5ef;
  --color-surface: #ffffff;
  --color-warm: #efe7d8;
  --color-warm-light: #f7f1e6;

  --color-ink: #1c1a16;
  --color-ink-light: #5b554c;
  --color-ink-muted: #938c7e;
  --color-line: #e8e1d3;

  /* Surface neutre pour les fonds des panneaux et alternances. */
  --color-surface-alt: #f6f7f9;
}

/* Badge de comptage sur l'icône panier de l'en-tête.
   Pastille magenta visible en haut à droite de l'icône, qui apparaît
   dès qu'au moins 1 article est dans le panier. */
.nkoh-cart-icon {
  position: relative;
  display: inline-block;
}
.nkoh-cart-icon__badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-accent-dark);
  color: #fff !important;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 2px 6px rgba(163, 0, 82, 0.55);
  pointer-events: none;
  z-index: 2;
  letter-spacing: -0.3px;
  font-family: var(--font-sans);
  animation: nkoh-cart-pop 0.25s ease-out;
}
@keyframes nkoh-cart-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* Sélecteur de langue dans le top header (3 codes inline). */
.nkoh-lang-switcher {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
  align-items: center;
}
.nkoh-lang-switcher li {
  display: inline-flex;
}
.nkoh-lang-switcher a {
  display: inline-block;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 50px;
  color: var(--color-ink-light);
  transition: all 0.18s;
}
.nkoh-lang-switcher a:hover {
  color: var(--color-primary);
}
.nkoh-lang-switcher a.active {
  background: rgba(11, 107, 78, 0.1);
  color: var(--color-primary);
}

/* Sélecteur de rayon natif dans la barre de recherche (sans select2). */
.search-style-2 form {
  display: flex;
  align-items: center;
}
.nest-cat-select {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--color-ink);
  padding: 0 28px 0 20px;
  height: 48px;
  cursor: pointer;
  /* Largeur calée sur la longueur de « Toutes les catégories »
     (~22 caractères) ; on évite la troncature. */
  min-width: 220px;
  border-right: 1px solid var(--color-line);
}
.search-style-2 form input {
  flex: 1;
}

/* Le bouton « Ajouter » des cartes produit est un <button>, pas un <a>. */
.product-cart-wrap .add-cart .add {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.product-cart-wrap .add-cart .add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* États inversés : couleur Nkoh plein au repos, fond clair au survol.
   Surcharge le CSS Nest (`#DEF9EC` → `var(--color-primary)` au hover). */
.product-cart-wrap .product-card-bottom .add-cart .add {
  background-color: var(--color-primary);
  color: #fff;
}
.product-cart-wrap .product-card-bottom .add-cart .add:hover {
  background-color: #DEF9EC;
  color: var(--color-primary);
}
.product-cart-wrap .product-card-bottom .add-cart .add:disabled,
.product-cart-wrap .product-card-bottom .add-cart .add:disabled:hover {
  background-color: var(--color-line);
  color: var(--color-ink-light);
  transform: none;
  box-shadow: none;
}

/* Slide hero sans carrousel jQuery : occupe toute la largeur.
   Sur desktop, on force aussi la hauteur à 100 % pour qu'il
   s'aligne avec la colonne des 2 banners droite (banner-img
   style-4 + style-5). Sans ça, le hero s'arrêtait plus haut
   et laissait un vide en dessous. */
.home-slide-cover .single-hero-slider {
  width: 100% !important;
}
@media (min-width: 992px) {
  .home-slider .col-lg-7 {
    display: flex;
  }
  .home-slide-cover {
    width: 100%;
    display: flex;
  }
  .home-slide-cover .hero-slider-1 {
    width: 100%;
    display: flex;
  }
  .home-slide-cover .single-hero-slider {
    height: 100%;
    min-height: 100%;
  }
}

/* Rangée de catégories sans carrousel : défilement horizontal simple
   sur mobile/tablette, partage équitable de la largeur sur desktop. */
.nest-cat-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.nest-cat-row .card-2 {
  flex: 0 0 auto;
  width: 180px;
  margin-bottom: 0;
}
.nest-cat-row::-webkit-scrollbar {
  height: 6px;
}
.nest-cat-row::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 6px;
}
@media (min-width: 992px) {
  .nest-cat-row {
    overflow-x: visible;
  }
  .nest-cat-row .card-2 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* ─── Cartes produit : hauteurs égales ─────────────────────────────── */
/* Toutes les `product-cart-wrap` d'une même rangée Bootstrap doivent
   avoir la même hauteur. On force la carte en colonne flex et on
   pousse la ligne « prix + bouton » en bas. */
.product-cart-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-cart-wrap .product-img-action-wrap {
  flex: 0 0 auto;
}
.product-cart-wrap .product-img {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  overflow: hidden;
}
.product-cart-wrap .product-img img.default-img,
.product-cart-wrap .product-img img.hover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.product-cart-wrap .product-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Titre du produit : exactement 2 lignes, ellipsis si dépassement. */
.product-cart-wrap h2.nkoh-prod-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  min-height: 2.7em;
  margin-bottom: 10px;
  line-height: 1.35;
}
.product-cart-wrap h2.nkoh-prod-title a {
  color: var(--color-ink);
}
/* Ligne « catégorie/référence » : hauteur réservée même si vide. */
.product-cart-wrap .product-category {
  min-height: 18px;
  margin-bottom: 6px;
}
.product-cart-wrap .product-category span {
  color: var(--color-ink-muted);
  font-size: 12px;
}
/* Pied de carte (prix + bouton) toujours collé en bas. */
.product-cart-wrap .product-card-bottom {
  margin-top: auto;
}

/* Mini description (section « Meilleures ventes ») : 3 lignes max,
   hauteur réservée même si vide pour égaliser les cartes. */
.product-cart-wrap .nkoh-prod-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 12px;
  color: var(--color-ink-light);
  font-size: 12px;
  line-height: 1.55;
  min-height: calc(1.55em * 3);
}

/* Quand une carte est affichée à côté d'un bandeau de 520 px (section
   « Meilleures ventes »), on garantit qu'elle atteint cette hauteur. */
.product-cart-wrap.nkoh-tall,
.product-cart-wrap:has(.nkoh-prod-desc) {
  min-height: 520px;
}

/* Bootstrap : forcer les `.col-*` à étirer leurs enfants en hauteur.
 * Bug historique : la virgule manquante après "product-grid" rendait
 * le sélecteur invalide pour la grille boutique → les cartes
 * prenaient leur hauteur naturelle et la grille faisait des marches
 * d'escalier. Corrigé en répétant explicitement le sélecteur enfant. */
.row.product-grid > [class*="col-"],
.row.product-grid-4 > [class*="col-"] {
  display: flex;
  align-items: stretch;
}
.row.product-grid > [class*="col-"] > .product-cart-wrap,
.row.product-grid-4 > [class*="col-"] > .product-cart-wrap {
  width: 100%;
}

/* Interligne verticale entre rangées de produits : on s'appuie sur les
   gutters Bootstrap (`--bs-gutter-y`) plutôt que sur le `mb-30` de
   chaque carte — plus net, et zéro espace résiduel sous la dernière
   ligne. */
.row.product-grid,
.row.product-grid-4 {
  --bs-gutter-y: 30px;
}
.row.product-grid,
.row.product-grid-4 > [class*="col-"] > .product-cart-wrap.mb-30 {
  margin-bottom: 0;
}

/* Numéro de téléphone du pied de page : pas de coupure de ligne. */
.hotline p {
  white-space: nowrap;
}

/* Pilule « Tous les rayons » dans la nav verte : magenta accent Nkoh
   à la place de l'amber Nest (#FDC040), avec chevron centré. */
.header-style-1.header-style-5
  .header-bottom-bg-color
  .main-categori-wrap
  > a {
  background: var(--color-accent) !important;
  color: #fff !important;
  /* Empêche la traduction NL/EN de tomber sur 2 lignes. */
  white-space: nowrap;
}

/* Empêche la barre de navigation principale de wrap sur deux lignes
   quand les noms de catégories sont longs (NL/EN). On garde un seul
   rang, et au pire les items s'effacent en overflow caché plutôt
   que de casser la ligne. */
.main-menu nav > ul {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  /* Centre visuellement les items de menu entre la pilule magenta
     à gauche et le bloc téléphone à droite. */
  justify-content: center;
  width: 100%;
}
.main-menu nav > ul > li > a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Le `.main-menu` prend toute la largeur disponible entre la pilule
   et le bloc téléphone, ce qui permet à son `<ul>` de centrer les
   items entre les deux bords. */
.header-bottom .header-nav .main-menu {
  flex: 1 1 auto;
}

/* Icônes uicons devant chaque item du menu : alignées sur le texte. */
.main-menu nav > ul > li > a > i {
  font-size: 14px;
  line-height: 1;
  position: relative;
  top: 1px;
}
.header-style-1.header-style-5
  .header-bottom-bg-color
  .main-categori-wrap
  > a:hover {
  background: var(--color-accent-dark) !important;
}
.header-style-1 .main-categori-wrap > a.categories-button-active i {
  color: #fff !important;
  /* Centrage vertical : on retire le `margin-bottom: 5px` qui
     décalait le chevron vers le haut. */
  margin-bottom: 0;
  position: relative;
  top: 1px;
  transition: transform 0.2s;
}

/* Dropdown « Tous les rayons » : ouverture au survol. */
.main-categori-wrap {
  position: relative;
}
.main-categori-wrap:hover .categories-dropdown-active-large {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.main-categori-wrap:hover > a.categories-button-active i {
  transform: rotate(180deg);
}
/* Pont invisible : empêche la souris de perdre le hover en
   traversant l'espace entre le bouton et le dropdown. */
.main-categori-wrap:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
}

/* Grille 2 colonnes × 5 rangées + une dernière ligne pleine largeur
   pour le lien « Voir plus ». Largeur fluide ; passe en 1 colonne
   sur petits écrans pour ne pas déborder. */
.nkoh-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 480px;
  max-width: calc(100vw - 32px);
}
@media (max-width: 575.98px) {
  .nkoh-cat-grid {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}
.categories-dropdown-wrap ul.nkoh-cat-grid li {
  margin: 0;
  height: auto;
  padding: 8px 12px;
  line-height: 1.3;
}
.categories-dropdown-wrap ul.nkoh-cat-grid li a img {
  max-width: 26px;
  margin-right: 10px;
}
.categories-dropdown-wrap ul.nkoh-cat-grid li a {
  font-size: 12px;
  font-weight: 600;
}
/* La ligne « Voir plus » s'étale sur les 2 colonnes. */
.nkoh-cat-grid .nkoh-cat-more-row {
  grid-column: 1 / -1;
  margin-top: 8px !important;
  padding: 12px !important;
  border-top: 1px solid var(--color-line) !important;
  border-radius: 0 !important;
  text-align: center;
  background: #f7f8fa;
}
.nkoh-cat-grid .nkoh-cat-more-row:hover {
  background: var(--color-success-bg);
  border: 0 !important;
  border-top: 1px solid var(--color-success-border) !important;
  box-shadow: none !important;
}
.nkoh-cat-grid .nkoh-cat-more-row a.nkoh-cat-more {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}
.nkoh-cat-grid .nkoh-cat-more-row a.nkoh-cat-more:hover {
  color: var(--color-accent);
}

/* ─── Panier ──────────────────────────────────────────────────────── */
/* Bouton « Vider le panier » en haut à droite : pill discret avec
   bordure magenta au survol (la version Nest était un `<a>` brut). */
.nkoh-clear-cart {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-ink-light);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s;
}
.nkoh-clear-cart:hover {
  background: #fef0f5;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* En-tête du panier + contenu : on offre une marge gauche pour
   que le titre et la grille respirent un peu (sans s'éloigner du
   gabarit Nest qui s'appuie sur `.container`). */
.nkoh-cart-head {
  padding-left: 12px;
}
@media (min-width: 992px) {
  .nkoh-cart-head {
    padding-left: 24px;
  }
}

/* Bouton « Retirer » d'une ligne : icône poubelle en `<button>`. */
.nkoh-cart-remove {
  background: transparent;
  border: 0;
  color: var(--color-ink-light);
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
  transition: color 0.18s;
}
.nkoh-cart-remove:hover {
  color: var(--color-accent);
}

/* Icône du panier vide (état centré). */
.nkoh-empty-icon {
  font-size: 56px;
  color: var(--color-primary);
  opacity: 0.5;
}

/* Message d'erreur sous le bouton checkout. */
.nkoh-cart-error {
  background: #fdecec;
  color: #b1352f;
  border: 1px solid #f5cdc9;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  margin-bottom: 12px;
  text-align: center;
}

/* Bouton « Continuer mes achats » : variante outline du `.btn` Nest. */
.btn.nkoh-btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn.nkoh-btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Sélecteur de quantité inline dans le tableau (cellule plus étroite
   que dans la fiche produit). */
.nkoh-cart-table .detail-qty {
  max-width: 90px;
  margin: 0 auto;
}
/* Image vignette d'une ligne panier : box carrée stricte 80×80 px
   avec object-fit cover. Sans la contrainte de hauteur, les images
   produit en portrait (boîtes Adja, bouteilles…) étiraient toute la
   ligne du tableau. */
.nkoh-cart-table img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--color-bg);
}
.nkoh-cart-table .product-name a {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 14px;
}
.nkoh-cart-table .product-name a:hover {
  color: var(--color-primary);
}

/* Nest `shopping-summery` met `padding: 15px 0` (rien à gauche/droite)
   sur les cellules : trop tassé. On rétablit un peu d'air horizontal,
   et on offre un retrait au début et à la fin du tableau. */
.shopping-summery .nkoh-cart-table > thead > tr > th,
.shopping-summery .nkoh-cart-table > tbody > tr > td {
  padding-left: 14px;
  padding-right: 14px;
  vertical-align: middle;
}
.shopping-summery .nkoh-cart-table > thead > tr > th:first-child,
.shopping-summery .nkoh-cart-table > tbody > tr > td:first-child {
  padding-left: 20px;
}
.shopping-summery .nkoh-cart-table > thead > tr > th:last-child,
.shopping-summery .nkoh-cart-table > tbody > tr > td:last-child {
  padding-right: 20px;
}

/* La cellule image doit rester compacte (~96 px) pour laisser de la
   place au nom de produit qui peut être long. */
.shopping-summery .nkoh-cart-table > tbody > tr > td.image.product-thumbnail {
  width: 96px;
  padding-left: 20px;
  padding-right: 0;
}

/* ─── Espace client (page-account) ────────────────────────────────── */

/* Bandeau identité ajouté en haut de la sidebar `dashboard-menu`. */
.dashboard-menu .nkoh-account-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 6px;
}
.nkoh-account-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nkoh-account-user__id {
  min-width: 0;
  flex: 1;
}
.nkoh-account-user__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nkoh-account-user__email {
  font-size: 12px;
  color: var(--color-ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton « Se déconnecter » dans la sidebar : un `<button>` stylé
   comme un `<a>` du nav Nest. */
.dashboard-menu .nkoh-account-logout {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--color-accent);
}
.dashboard-menu .nkoh-account-logout:hover {
  background: #fef0f5;
  color: var(--color-accent-dark);
}

/* Mini-cartes statistiques du dashboard (Commandes / Total / Points). */
.nkoh-stat-card {
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-surface);
  height: 100%;
}
.nkoh-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(11, 107, 78, 0.1);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.nkoh-stat-card__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-ink-light);
}
.nkoh-stat-card__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 4px;
}

/* Cartes adresse. */
.nkoh-addr-card {
  border: 2px solid var(--color-line);
  height: 100%;
}
.nkoh-addr-card.is-main {
  border-color: var(--color-primary);
}
.nkoh-addr-card .card-header {
  background: transparent;
  border-bottom: 0;
  padding-bottom: 0;
}

/* Champ readonly du profil. */
.form-control.nkoh-readonly {
  background: var(--color-surface-alt);
  color: var(--color-ink-light);
  cursor: not-allowed;
}

/* Messages de feedback (profil saved / error). */
.nkoh-form-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 0;
}
.nkoh-form-msg--ok {
  background: rgba(11, 107, 78, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(11, 107, 78, 0.25);
}
.nkoh-form-msg--err {
  background: #fdecec;
  color: #b1352f;
  border: 1px solid #f5cdc9;
}

/* Rangée produits « meilleures ventes » sans carrousel : scroll
   horizontal sur mobile/tablette, partage équitable sur desktop. */
.nest-prod-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.nest-prod-row .product-cart-wrap {
  flex: 0 0 auto;
  width: 230px;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .nest-prod-row {
    overflow-x: visible;
    /* hauteur 100 % pour s'étirer à la hauteur de la colonne
       (matche la hauteur du banner gauche) */
    height: 100%;
    align-items: stretch;
  }
  .nest-prod-row .product-cart-wrap {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* ─── Boutique ────────────────────────────────────────────────────── */

/* Dropdown de tri : Nest ouvre le menu par JS (.show). Sans son JS, on
   ouvre au survol du conteneur. */
.shop-product-fillter .sort-by-product-area .sort-by-cover:hover .sort-by-dropdown,
.sort-by-cover:hover .sort-by-dropdown {
  visibility: visible;
  opacity: 1;
}

/* Grille produits 4 colonnes : pas de règle .product-grid-4 dans le thème,
   on l'aligne sur le comportement Bootstrap (gutters). */
.row.product-grid,
.row.product-grid-4 > [class*="col-"] {
  margin-bottom: 0;
}

/* Bandeau promo de la boutique. Fond photo Nkoh recadrée à droite,
   voile clair à gauche pour la lisibilité du texte. */
.nkoh-shop-banner {
  position: relative;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(252, 250, 248, 0.95) 0%,
      rgba(252, 250, 248, 0.65) 45%,
      rgba(252, 250, 248, 0) 90%
    ),
    url(/cat-epices.webp) no-repeat center right;
  background-size: auto, cover;
  border: 1px solid var(--color-line);
}
/* Variante pleine largeur (hero) : intègre titre + breadcrumb + CTA. */
.nkoh-shop-banner--wide {
  height: 240px;
  background:
    linear-gradient(
      90deg,
      rgba(252, 250, 248, 0.95) 0%,
      rgba(252, 250, 248, 0.7) 35%,
      rgba(252, 250, 248, 0) 65%
    ),
    url(/cat-epices.webp) no-repeat center right;
  background-size: auto, cover;
}
.nkoh-shop-banner__text {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  max-width: 60%;
}
.nkoh-shop-banner--wide .nkoh-shop-banner__text {
  max-width: 55%;
}

/* Titre h1 dans la bannière hero. */
.nkoh-shop-banner__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 8px;
  line-height: 1.15;
}

/* Fil d'Ariane interne à la bannière : un peu plus compact que celui
   du `page-header` Nest, mais on garde ses classes pour le séparateur. */
.nkoh-shop-banner__crumb {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  font-size: 12px;
}
.nkoh-shop-banner__crumb a {
  color: var(--color-ink-light);
}
.nkoh-shop-banner__crumb a:hover {
  color: var(--color-primary);
}

/* Le CTA et l'eyebrow s'enchaînent en flex pour rester alignés. */
.nkoh-shop-banner--wide .nkoh-shop-banner__cta {
  margin-left: 12px;
  vertical-align: middle;
}

/* Mobile : le voile couvre toute la bannière pour la lisibilité,
   le texte n'est plus en absolute et passe en flux normal. */
@media (max-width: 767.98px) {
  .nkoh-shop-banner,
  .nkoh-shop-banner--wide {
    height: auto;
    background:
      linear-gradient(
        90deg,
        rgba(252, 250, 248, 0.92) 0%,
        rgba(252, 250, 248, 0.78) 100%
      ),
      url(/cat-epices.webp) no-repeat center right;
    background-size: auto, cover;
  }
  .nkoh-shop-banner__text {
    position: static;
    transform: none;
    max-width: 100% !important;
    padding: 28px 24px;
    left: auto;
  }
  .nkoh-shop-banner__title {
    font-size: 28px;
  }
}
.nkoh-shop-banner__eyebrow {
  display: inline-block;
  background: rgba(204, 0, 102, 0.12);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.nkoh-shop-banner__text h4 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0 0 14px;
}
.nkoh-shop-banner__text h4 em {
  font-style: italic;
  color: var(--color-primary);
}
.nkoh-shop-banner__text .btn {
  padding: 8px 18px;
  font-size: 12px;
}

/* Catégories sidebar Nest (widget-category-2) : ajustements pour les
   icônes catégorie SVG (24px) au lieu des 80x80 du gabarit Botble. */
.sidebar-widget.widget-category-2 ul li a img {
  max-width: 24px !important;
  max-height: 24px !important;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 0;
}
.sidebar-widget.widget-category-2 ul li {
  padding: 8px 0;
}

/* Icônes catégories rebrandées : on prend le SVG du thème Nest et on
   l'utilise comme mask. La couleur vient du `background-color` —
   turquoise par défaut (charte primaire = structurel), magenta au
   survol et sur la catégorie active (accent = attention). La couleur
   source du SVG n'a plus d'importance, seule sa silhouette compte. */
.widget-category-2 .nkoh-cat-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  flex-shrink: 0;
  background-color: #008A7E;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease;
}
.widget-category-2 ul li:hover .nkoh-cat-icon,
.widget-category-2 ul li a:hover .nkoh-cat-icon,
.widget-category-2 ul li a.text-brand .nkoh-cat-icon {
  background-color: #CC0066;
}

/* Mini-fiches « Nouveautés » dans la sidebar. */
.sidebar-widget.product-sidebar .single-post {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
}
.sidebar-widget.product-sidebar .single-post:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.sidebar-widget.product-sidebar .single-post .image {
  flex: 0 0 70px;
}
.sidebar-widget.product-sidebar .single-post .image img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: 8px;
  padding: 4px;
}
.sidebar-widget.product-sidebar .single-post .content h6 {
  font-size: 12px;
  margin: 0 0 6px;
  line-height: 1.35;
}
.sidebar-widget.product-sidebar .single-post .content h6 a {
  color: var(--color-ink);
}
.sidebar-widget.product-sidebar .single-post .content h6 a:hover {
  color: var(--color-primary);
}
.sidebar-widget.product-sidebar .single-post .content .price {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
}

/* Champ de recherche dans la sidebar. */
.sidebar-widget .search-form {
  position: relative;
}
.sidebar-widget .search-form input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 50px 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-surface);
  font-size: 14px;
}
.sidebar-widget .search-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sidebar-widget .search-form button {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 36px;
  width: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 16px;
}

/* Aucun produit trouvé (boutique vide). */
.no-product-found {
  padding: 60px 30px;
}
.no-product-found h4 {
  color: var(--color-ink);
  font-weight: 700;
}

/* ─── Fiche produit ───────────────────────────────────────────────── */

/* Image unique de la galerie (pas de carrousel slick). On affiche
   l'image au format Nest (carrée, fond clair) sans dépendance JS. */
.detail-gallery .nkoh-single-image {
  position: relative;
  background: #f7f8fa;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-gallery .nkoh-single-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 30px;
  /* Fusionne le fond blanc inhérent à la plupart des photos produit
     avec le gris clair de la carte. mix-blend-mode: multiply rend
     les pixels blancs invisibles (multiply par #f7f8fa → #f7f8fa)
     sans dénaturer les couleurs réelles du produit. Marche pour TOUS
     les visuels à fond blanc sans devoir retoucher chaque PNG. */
  mix-blend-mode: multiply;
}

/* Sélecteur de quantité : Nest le pense en `<a>`, nous en `<button>`. */
.detail-qty > button.qty-up,
.detail-qty > button.qty-down {
  position: absolute;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.detail-qty > button.qty-up {
  top: 10px;
}
.detail-qty > button.qty-down {
  bottom: 10px;
}
.detail-qty > button:hover {
  color: var(--color-primary);
}
.detail-qty .qty-val {
  width: 40px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  color: inherit;
  outline: none;
  /* Désactive les flèches natives du champ number. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.detail-qty .qty-val::-webkit-outer-spin-button,
.detail-qty .qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Bouton « Ajouter au panier » : `<button>` au lieu du `<a>` Nest. */
.product-extra-link2 .button.button-add-to-cart {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.product-extra-link2 .button.button-add-to-cart:hover {
  background: var(--color-primary-dark);
}
.product-extra-link2 .button.button-add-to-cart:disabled {
  background: var(--color-ink-muted);
  cursor: not-allowed;
}
.product-extra-link2 .button.button-add-to-cart i {
  margin-right: 8px;
}

/* Contenu HTML de la description Odoo : reprend les marges Nest. */
.nkoh-rte {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-ink-light);
}
.nkoh-rte p {
  margin-bottom: 12px;
}
.nkoh-rte ul,
.nkoh-rte ol {
  padding-left: 24px;
  margin-bottom: 12px;
}
.nkoh-rte img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.nkoh-rte a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Indicateur de stock dans la fiche. */
.short-desc .stock-status.in-stock {
  color: var(--color-primary);
  font-weight: 600;
}
.short-desc .stock-status.out-stock {
  color: #c53a3a;
  font-weight: 600;
}

/* ─── Variantes : sélecteurs d'attributs ─────────────────────────── */
.nkoh-attr-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.nkoh-attr-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--color-line);
  background: var(--color-surface);
  border-radius: 50px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.18s;
}
.nkoh-attr-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.nkoh-attr-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.nkoh-attr-pill.is-color {
  padding-left: 8px;
}
.nkoh-attr-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 2px #fff;
  flex-shrink: 0;
}
.nkoh-attr-pill.active .nkoh-attr-swatch {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ═════════════════════════════════════════════════════════════
   PAGES D'AUTHENTIFICATION — `nkoh-auth`
   Portage du gabarit `design/login.html` et `design/register.html`,
   palette adaptée à la charte officielle Nkoh (émeraude + magenta).
   ═════════════════════════════════════════════════════════════ */

.nkoh-auth {
  /* Variables locales — n'altèrent pas le reste du site. */
  --nkoh-primary: var(--color-primary);
  --nkoh-primary-light: var(--color-primary-light);
  --nkoh-primary-dark: var(--color-primary-dark);
  --nkoh-accent: var(--color-accent);
  --nkoh-accent-light: var(--color-accent-light);
  --nkoh-accent-dark: var(--color-accent-dark);
  --nkoh-warm: #fde9f0;
  --nkoh-warm-light: #fef5f9;
  --nkoh-bg: var(--color-bg);
  --nkoh-text: var(--color-ink);
  --nkoh-text-light: var(--color-ink-light);
  --nkoh-text-muted: var(--color-ink-muted);
  --nkoh-white: #ffffff;
  --nkoh-border: var(--color-line);
  --nkoh-danger: var(--color-danger);
  --nkoh-success: var(--color-success-ink);
  --nkoh-shadow-md: 0 8px 30px rgba(11, 107, 78, 0.08);

  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  font-family: var(--font-sans);
  background: var(--nkoh-bg);
  color: var(--nkoh-text);
}
.nkoh-auth--single {
  grid-template-columns: 1fr;
}

.nkoh-auth h1,
.nkoh-auth h2 {
  font-family: var(--font-display);
  color: var(--nkoh-primary);
  font-weight: 700;
}
.nkoh-auth h1 em,
.nkoh-auth h2 em {
  font-style: italic;
  color: var(--nkoh-accent);
}

/* ─── Colonne brand (gauche) ─── */
.nkoh-auth__brand {
  position: relative;
  background: linear-gradient(135deg, var(--nkoh-primary) 0%, var(--nkoh-primary-dark) 100%);
  color: var(--nkoh-white);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.nkoh-auth__brand::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(204, 0, 102, 0.22) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.nkoh-auth__brand::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.nkoh-auth__logo {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--nkoh-white);
  text-decoration: none;
}
.nkoh-auth__logo-img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
}
.nkoh-auth__logo--dark .nkoh-auth__logo-img {
  filter: none;
}

.nkoh-auth__pitch {
  position: relative;
  z-index: 1;
  max-width: 480px;
}
.nkoh-auth__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(204, 0, 102, 0.18);
  border: 1px solid rgba(204, 0, 102, 0.35);
  color: var(--nkoh-accent-light);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.nkoh-auth__pitch h2 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.15;
  color: var(--nkoh-white);
  margin: 0 0 16px;
}
.nkoh-auth__pitch h2 em {
  color: var(--nkoh-accent-light);
}
.nkoh-auth__pitch p {
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0 0 32px;
}

.nkoh-auth__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nkoh-auth__benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  opacity: 0.92;
}
.nkoh-auth__benefits .check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: rgba(204, 0, 102, 0.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nkoh-accent-light);
  font-size: 14px;
  font-weight: 700;
}
.nkoh-auth__footer-note {
  position: relative;
  z-index: 1;
  font-size: 12px;
  opacity: 0.7;
}

/* ─── Colonne formulaire (droite) ─── */
.nkoh-auth__form-wrap {
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nkoh-bg);
}
.nkoh-auth__form {
  width: 100%;
  max-width: 440px;
}
.nkoh-auth__top {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  color: var(--nkoh-text-light);
  margin-bottom: 40px;
}
.nkoh-auth__top a {
  color: var(--nkoh-primary);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}
.nkoh-auth__top a:hover {
  color: var(--nkoh-accent-dark);
}
.nkoh-auth__form h1 {
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.2;
  margin: 0 0 10px;
}
.nkoh-auth__form .subtitle {
  color: var(--nkoh-text-light);
  font-size: 14px;
  margin: 0 0 32px;
}
.nkoh-auth--single .nkoh-auth__form {
  text-align: center;
}
.nkoh-auth--single .nkoh-auth__logo {
  color: var(--nkoh-primary);
  font-family: var(--font-display);
}

/* ─── Champs ─── */
.nkoh-field {
  margin-bottom: 18px;
}
.nkoh-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--nkoh-text);
  margin-bottom: 8px;
}
.nkoh-field input[type="text"],
.nkoh-field input[type="email"],
.nkoh-field input[type="password"],
.nkoh-field input[type="tel"],
.nkoh-field select,
.nkoh-field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--nkoh-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--nkoh-white);
  color: var(--nkoh-text);
  transition: all 0.25s ease;
  outline: none;
}
.nkoh-field input:focus,
.nkoh-field select:focus,
.nkoh-field textarea:focus {
  border-color: var(--nkoh-primary-light);
  box-shadow: 0 0 0 4px rgba(11, 107, 78, 0.1);
}
.nkoh-field input::placeholder {
  color: var(--nkoh-text-muted);
}
.nkoh-field__hint {
  display: block;
  font-size: 12px;
  color: var(--nkoh-text-muted);
  margin-top: 6px;
}

/* Champ mot de passe : œil pour afficher/masquer. */
.nkoh-field__pwd {
  position: relative;
}
.nkoh-field__pwd input {
  padding-right: 48px;
}
.nkoh-field__toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nkoh-text-muted);
  padding: 6px;
  font-size: 18px;
}
.nkoh-field__toggle:hover {
  color: var(--nkoh-primary);
}

/* Indicateur de robustesse du mot de passe. */
.nkoh-pwd-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.nkoh-pwd-strength__bar {
  flex: 1;
  height: 4px;
  background: var(--nkoh-border);
  border-radius: 2px;
  transition: background 0.3s;
}
.nkoh-pwd-strength[data-level="1"] .nkoh-pwd-strength__bar:nth-child(-n + 1),
.nkoh-pwd-strength[data-level="2"] .nkoh-pwd-strength__bar:nth-child(-n + 2),
.nkoh-pwd-strength[data-level="3"] .nkoh-pwd-strength__bar:nth-child(-n + 3) {
  background: var(--nkoh-accent);
}
.nkoh-pwd-strength[data-level="4"] .nkoh-pwd-strength__bar:nth-child(-n + 4) {
  background: var(--nkoh-success);
}

/* Prénom / Nom côte à côte. */
.nkoh-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Cases à cocher. */
.nkoh-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--nkoh-text-light);
  cursor: pointer;
  user-select: none;
}
.nkoh-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--nkoh-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.nkoh-check a {
  color: var(--nkoh-primary);
  font-weight: 600;
  text-decoration: none;
}
.nkoh-check a:hover {
  text-decoration: underline;
}

/* Rangée « remember / forgot ». */
.nkoh-auth__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.nkoh-auth__row a {
  color: var(--nkoh-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.nkoh-auth__row a:hover {
  color: var(--nkoh-accent-dark);
}

/* Boutons. */
.nkoh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}
.nkoh-btn--primary {
  background: var(--nkoh-primary);
  color: var(--nkoh-white);
}
.nkoh-btn--primary:hover {
  background: var(--nkoh-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--nkoh-shadow-md);
}
.nkoh-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Alertes. */
.nkoh-alert {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.nkoh-alert--error {
  background: #fdecec;
  color: #b1352f;
  border: 1px solid #f5cdc9;
}

/* Responsive : à partir de 991 px, on empile les colonnes. */
@media (max-width: 991.98px) {
  .nkoh-auth {
    grid-template-columns: 1fr;
  }
  .nkoh-auth__brand {
    padding: 36px 28px;
  }
  .nkoh-auth__brand .nkoh-auth__benefits {
    display: none;
  }
  .nkoh-auth__form-wrap {
    padding: 40px 24px;
  }
  .nkoh-field-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Burger + drawer de navigation mobile (< lg) ─────────────────── */
.nkoh-burger {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-size: 24px;
  color: var(--color-primary);
  cursor: pointer;
  line-height: 1;
  z-index: 5;
}
.nkoh-burger:hover {
  color: var(--color-accent);
}
.nkoh-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 22, 0.5);
  z-index: 9998;
  animation: nkoh-fade-in 0.2s ease-out;
}
@keyframes nkoh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.nkoh-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--color-surface);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -10px 0 30px rgba(28, 26, 22, 0.1);
  font-family: var(--font-sans);
}
.nkoh-drawer.nkoh-drawer--open {
  transform: translateX(0);
}
.nkoh-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line);
}
.nkoh-drawer__logo img {
  max-width: 120px;
  height: auto;
}
.nkoh-drawer__close {
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-ink);
  cursor: pointer;
}
.nkoh-drawer__close:hover {
  background: var(--color-warm-light);
  color: var(--color-accent);
}
.nkoh-drawer__heading {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
  padding: 18px 20px 8px;
}
.nkoh-drawer__nav {
  display: flex;
  flex-direction: column;
}
.nkoh-drawer__nav--cats {
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--color-line);
}
.nkoh-drawer__link {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-line);
  transition: background 0.15s, color 0.15s;
}
.nkoh-drawer__link i {
  color: var(--color-primary);
  font-size: 16px;
}
.nkoh-drawer__link:hover,
.nkoh-drawer__link:focus-visible {
  background: var(--color-warm-light);
  color: var(--color-primary);
}
.nkoh-drawer__link--cat {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}
.nkoh-drawer__foot {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.nkoh-drawer__phone {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.nkoh-drawer__phone:hover {
  color: var(--color-accent);
}

/* ─── Utilitaires Nkoh (en remplacement d'inline styles) ─────────── */
.nkoh-surface-white {
  background: var(--color-surface);
}
.nkoh-empty-icon {
  font-size: 48px;
  color: var(--color-primary);
  opacity: 0.4;
}
.nkoh-empty-img {
  height: 64px;
  opacity: 0.4;
}
.nkoh-mt-16 { margin-top: 16px; }
.nkoh-mt-24 { margin-top: 24px; }
.nkoh-mb-20 { margin-bottom: 20px; }
.nkoh-auth__row--center { justify-content: center; }
.nkoh-field__optional {
  color: var(--color-ink-muted);
  font-weight: 400;
}

/* Utilitaire ponctuel — h3 avec font-weight normal (sous-titre). */
.nkoh-fw-normal { font-weight: 400; }

/* Carte iframe OpenStreetMap dans la page contact. */
.nkoh-map-wrap {
  height: 400px;
  border: 1px solid var(--color-line);
}
.nkoh-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ─── Page contact : grille des 4 raisons + utilitaires ──────────── */
.nkoh-prose-narrow {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-light);
}
.nkoh-img-fluid {
  width: 100%;
  height: auto;
  display: block;
}

/* Carte d'une raison de contact : numéro + titre + texte, hauteurs
   égales sur une rangée, bord magenta accent au survol. */
.nkoh-reasons > [class*="col-"] {
  display: flex;
  align-items: stretch;
}
.nkoh-reasons > [class*="col-"] > .nkoh-reason {
  width: 100%;
}
.nkoh-reason {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.nkoh-reason:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(192, 24, 94, 0.08);
  transform: translateY(-2px);
}
.nkoh-reason__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 14px;
}
.nkoh-reason h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}
.nkoh-reason p {
  font-size: 14px;
  color: var(--color-ink-light);
  line-height: 1.55;
}

/* Liste des horaires sur la page contact. */
.nkoh-hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nkoh-hours-list li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-ink-light);
  border-bottom: 1px dashed var(--color-line);
}
.nkoh-hours-list li:last-child {
  border-bottom: 0;
}
.nkoh-hours-list li strong {
  color: var(--color-ink);
  margin-right: 4px;
}
.text-danger {
  color: #c53a3a;
  font-weight: 600;
}

/* ── Bannière promo temporaire (admin /admin/promo) ─────────────── */
.nkoh-promo-banner {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 0;
}
.nkoh-promo-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.nkoh-promo-banner__title {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.nkoh-promo-banner__text {
  opacity: 0.9;
}
.nkoh-promo-banner__cta {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  padding-bottom: 1px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.nkoh-promo-banner__cta:hover {
  color: #fff;
  opacity: 0.85;
}

/* ── Footer horaires : 3 sous-lignes sous "Horaires :" ──────────── */
.nkoh-footer-hours {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  vertical-align: top;
}
.nkoh-footer-hours > span {
  display: block;
  line-height: 1.45;
}

/* ── Footer : icône + label + valeur alignés sur la même ligne ──── */
.widget-about .contact-infor li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.widget-about .contact-infor li > img {
  flex-shrink: 0;
  margin-top: 3px;       /* aligne sur la base du texte */
  margin-right: 0;       /* le gap du flex remplace l'ancien margin-right */
}
.widget-about .contact-infor li > strong {
  white-space: nowrap;
}

/* ── Footer : équilibrage des hauteurs de colonnes ─────────────── */
/* On garde la col 1 (logo + tagline + contact) avec sa hauteur
   naturelle. Les autres colonnes ont été enrichies (blog, register,
   profil, adresses, dashboard, newsletter…) pour s'aligner dessus. */

/* Espacement entre items de listes de liens */
.footer-list li {
  margin-bottom: 10px;
}


/* ── Widget « Nouveautés » : compact pour sidebar étroite ───────── */
/* Le pattern Nest d'origine (image 80×80 floatée + padding-left 95px)
   ne laisse presque plus de place au texte dans une sidebar col-lg-3,
   d'où le mot-par-ligne. On repasse en flex avec image plus petite. */
.product-sidebar .single-post {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.product-sidebar .single-post .image {
  float: none;
  margin-right: 0;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}
.product-sidebar .single-post .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.product-sidebar .single-post .content {
  flex: 1 1 auto;
  min-width: 0;             /* indispensable pour autoriser le shrink en flex */
  padding-left: 0;
  padding-top: 0 !important;
}
.product-sidebar .single-post .content h6 {
  font-size: 12px;
  line-height: 1.35;
  margin: 0 0 4px 0;
  /* Tronque à 3 lignes pour les noms produits longs */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-sidebar .single-post .content h6 a {
  color: var(--color-ink);
  text-decoration: none;
}
.product-sidebar .single-post .content h6 a:hover {
  color: var(--color-accent);
}
.product-sidebar .single-post .content .price {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

/* ── Hero accueil : 3 CTA empilés (Boutique / WhatsApp / Magasin) ── */
.nkoh-hero-ctas {
  gap: 10px;
}
.nkoh-hero-ctas .btn {
  white-space: nowrap;
}
.nkoh-hero-ctas .btn-secondary {
  background: var(--color-accent);       /* magenta charte Nkoh */
  color: #fff;
  border-color: var(--color-accent);
}
.nkoh-hero-ctas .btn-secondary:hover {
  background: var(--color-accent-dark);
  color: #fff;
  border-color: var(--color-accent-dark);
}
.nkoh-hero-ctas .btn-tertiary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.nkoh-hero-ctas .btn-tertiary:hover {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}

/* ── Badge "Rupture" rouge sur les cartes produit ──────────────── */
.nkoh-badge-out {
  display: inline-block;
  background: #c53a3a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 4px;
  line-height: 1.2;
}

/* Bouton "Demander dispo WhatsApp" (remplace "Ajouter" en rupture) */
.nkoh-add-whatsapp {
  background: var(--color-accent) !important;       /* magenta charte Nkoh */
  color: #fff !important;
  text-decoration: none;
}
.nkoh-add-whatsapp:hover {
  background: var(--color-accent-dark) !important;
  color: #fff !important;
}

/* Filtre "En stock uniquement" dans la sidebar boutique */
.nkoh-stock-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
}
.nkoh-stock-filter:hover {
  color: var(--color-primary);
}
.nkoh-stock-filter__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-line);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--color-primary);
  flex-shrink: 0;
}
.nkoh-stock-filter--active .nkoh-stock-filter__check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.nkoh-stock-filter--active {
  color: var(--color-primary);
  font-weight: 600;
}

/* CTA bannière page contact : WhatsApp en magenta charte */
.nkoh-shop-banner__ctas {
  margin-top: 14px;
}
.nkoh-banner-whatsapp {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}
.nkoh-banner-whatsapp:hover {
  background: var(--color-accent-dark) !important;
  color: #fff !important;
}

/* Bouton WhatsApp footer (magenta charte) */
.nkoh-footer-whatsapp {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}
.nkoh-footer-whatsapp:hover {
  background: var(--color-accent-dark) !important;
  color: #fff !important;
}

/* ── Suffixe d'unité ("kg") dans les inputs quantité ─────────────── */
/* Pour les produits vendus au poids/volume, on affiche "kg" ou "L"
   directement dans le sélecteur de quantité, à droite du chiffre. */
.detail-qty {
  display: flex;
  align-items: center;
}
.detail-qty .qty-uom-suffix {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-light);
  padding: 0 8px 0 2px;
  user-select: none;
}

/* ── Bloc livraison dans le panier ──────────────────────────────── */
.nkoh-ship-bloc {
  padding: 16px;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-line);
}
.nkoh-ship-bloc__title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--color-ink);
}
.nkoh-ship-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nkoh-ship-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--color-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.nkoh-ship-opt:hover {
  border-color: var(--color-primary);
}
.nkoh-ship-opt.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
/* Force la taille du radio natif (sinon le CSS Nest l'agrandit en
   pleine largeur de cellule). On l'affiche en rond 18px à gauche
   du contenu, avec accent magenta sur le check. */
.nkoh-ship-opt__radio {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.nkoh-ship-opt__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}
.nkoh-ship-opt__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
}
.nkoh-ship-opt__hint {
  font-size: 12px;
  color: var(--color-ink-light);
  margin-top: 2px;
}
.nkoh-ship-cp__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.nkoh-ship-cp__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.nkoh-ship-cp__input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-color: var(--color-primary);
}
.nkoh-ship-result {
  font-size: 12px;
  color: var(--color-ink);
  padding: 10px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--color-line);
}
.nkoh-ship-result.is-blocked {
  border-color: #c53a3a;
  background: color-mix(in srgb, #c53a3a 8%, white);
  color: #c53a3a;
}

/* ── Message retour formulaire newsletter ──────────────────────── */
.nkoh-newsletter-msg {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 6px;
  display: inline-block;
}
.nkoh-newsletter-msg.is-ok {
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  color: var(--color-primary-dark);
}
.nkoh-newsletter-msg.is-err {
  background: color-mix(in srgb, #c53a3a 12%, #fff);
  color: #c53a3a;
}

/* ── Checkbox d'acceptation CGV au panier ──────────────────────── */
.nkoh-cgu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bg);
  border-radius: 6px;
  border: 1px solid var(--color-line);
  cursor: pointer;
}
.nkoh-cgu__check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 2px 0 0 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.nkoh-cgu__text {
  font-size: 12px;
  color: var(--color-ink);
  line-height: 1.5;
}
.nkoh-cgu__text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nkoh-cgu__text a:hover {
  color: var(--color-accent);
}

/* ── Page confirmation commande ─────────────────────────────────── */
.nkoh-confirm-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.nkoh-confirm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  color: var(--color-primary);
  font-size: 36px;
  margin-bottom: 18px;
}
.nkoh-confirm-card__title {
  font-family: var(--font-display, var(--font-playfair));
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px;
  line-height: 1.2;
}
.nkoh-confirm-card__text {
  font-size: 14px;
  color: var(--color-ink-light);
  margin: 0 0 24px;
}

.nkoh-confirm-recap {
  background: var(--color-bg);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px auto;
  max-width: 480px;
  text-align: left;
}
.nkoh-confirm-recap__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-line);
}
.nkoh-confirm-recap__row:last-child {
  border-bottom: 0;
}
.nkoh-confirm-recap__row--block {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.nkoh-confirm-recap__label {
  font-size: 12px;
  color: var(--color-ink-light);
  font-weight: 500;
}
.nkoh-confirm-recap__value {
  font-size: 14px;
  color: var(--color-ink);
  font-weight: 600;
  word-break: break-all;
}
.nkoh-confirm-recap__value--strong {
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 800;
}
.nkoh-confirm-recap__value--mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-ink-light);
}

.nkoh-confirm-card__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.nkoh-confirm-card__ctas .btn-tertiary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.nkoh-confirm-card__ctas .btn-tertiary:hover {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}

/* « Et maintenant ? » : 3 étapes en cards */
.nkoh-confirm-steps__title {
  text-align: center;
  font-family: var(--font-display, var(--font-playfair));
  font-size: 28px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 30px;
}
.nkoh-confirm-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 28px 22px 22px;
  height: 100%;
}
.nkoh-confirm-step__num {
  position: absolute;
  top: -16px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.nkoh-confirm-step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 4px 0 10px;
}
.nkoh-confirm-step__text {
  font-size: 14px;
  color: var(--color-ink-light);
  line-height: 1.55;
  margin: 0;
}

/* Besoin d'aide */
.nkoh-confirm-help {
  background: var(--color-bg);
  border-radius: 10px;
  padding: 18px 22px;
  text-align: center;
}
.nkoh-confirm-help__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.nkoh-confirm-help__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.nkoh-confirm-help__actions .btn-tertiary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line);
}
.nkoh-confirm-help__actions .btn-tertiary:hover {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}

@media (max-width: 575px) {
  .nkoh-confirm-card {
    padding: 32px 20px;
  }
  .nkoh-confirm-card__title {
    font-size: 24px;
  }
}

/* ── Code de retrait magasin (page /commande/confirmee) ─────────── */
.nkoh-pickup-code {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 138, 126, 0.25);
}
.nkoh-pickup-code__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.95;
}
.nkoh-pickup-code__value {
  margin: 0;
  font-family: 'SF Mono', Menlo, Consolas, 'DM Mono', monospace;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 10px;
  line-height: 1.1;
}
.nkoh-pickup-code__hint {
  margin: 12px 0 0;
  font-size: 14px;
  opacity: 0.92;
}
@media (max-width: 575px) {
  .nkoh-pickup-code__value {
    font-size: 36px;
    letter-spacing: 7px;
  }
}

/* ── Statuts commerciaux (ex-rupture) ───────────────────────────── */
.nkoh-badge-toconfirm {
  display: inline-block;
  background: var(--color-warning); /* amber-500 */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}
.nkoh-badge-in {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 4px;
}
.nkoh-status-toconfirm {
  color: var(--color-warning-ink); /* amber-700 — meilleur contraste pour le texte */
  font-weight: 600;
}

/* ── Bouton WhatsApp principal (remplaçant le bouton add-to-cart) */
.nkoh-btn-whatsapp {
  background: var(--color-whatsapp) !important;
  border-color: var(--color-whatsapp) !important;
  color: #fff !important;
}
.nkoh-btn-whatsapp:hover {
  background: var(--color-whatsapp-dark) !important;
  border-color: var(--color-whatsapp-dark) !important;
  color: #fff !important;
}

/* ── Bloc « Une question ? » sous le bloc d'achat ──────────────── */
.nkoh-product-ask {
  background: var(--color-success-bg); /* vert très léger */
  border: 1px solid var(--color-success-border);
  border-left: 4px solid var(--color-whatsapp);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 10px;
}
.nkoh-product-ask__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ink);
}
.nkoh-product-ask__text {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}
.nkoh-product-ask__btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-whatsapp);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nkoh-product-ask__btn:hover {
  background: var(--color-whatsapp-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ── Double slider prix (range avec 2 poignées) ──────────────────
   Technique standard sans dépendance externe : 2 <input type=range>
   superposés. La track et la zone active sont des divs absolus, les
   inputs sont par-dessus mais transparents — sauf les thumbs qui
   captent les drags. */
.nkoh-price-slider {
  position: relative;
  height: 32px;
  margin-bottom: 14px;
}
.nkoh-price-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
}
.nkoh-price-slider__range {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #008a7e;
  border-radius: 4px;
}
.nkoh-price-slider__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.nkoh-price-slider__input--min {
  z-index: 2;
}
.nkoh-price-slider__input--max {
  z-index: 3;
}
/* WebKit (Chrome, Safari, Edge) : style des poignées */
.nkoh-price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #008a7e;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 86, 78, 0.25);
  margin-top: 0;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.nkoh-price-slider__input::-webkit-slider-thumb:hover,
.nkoh-price-slider__input::-webkit-slider-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 86, 78, 0.4);
}
/* Firefox : style des poignées */
.nkoh-price-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #008a7e;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 86, 78, 0.25);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.nkoh-price-slider__input::-moz-range-thumb:hover,
.nkoh-price-slider__input::-moz-range-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 86, 78, 0.4);
}
/* Track natif Firefox : on cache pour utiliser nos divs */
.nkoh-price-slider__input::-moz-range-track {
  background: transparent;
  border: 0;
}
/* Focus visible accessibilité clavier */
.nkoh-price-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 138, 126, 0.3);
}
.nkoh-price-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0, 138, 126, 0.3);
}

/* ── Filtre prix sidebar boutique (refonte fine) ────────────────── */
/* Inputs sans bordure visible, fond gris pâle, underline turquoise
   au focus. Séparateur "—" entre les 2 champs. Bouton Appliquer
   discret en pill. Le tout occupe peu d'espace et reste moderne. */
.nkoh-price-filter__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.nkoh-price-filter__field {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f4f6f6;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  gap: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nkoh-price-filter__field:focus-within {
  background: #fff;
  border-bottom-color: #008a7e;
}
.nkoh-price-filter__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #0b3a3d;
  outline: none;
  width: 100%;
}
.nkoh-price-filter__field input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.nkoh-price-filter__field input::-webkit-outer-spin-button,
.nkoh-price-filter__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nkoh-price-filter__suffix {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}
.nkoh-price-filter__sep {
  color: #d1d5db;
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
}
.nkoh-price-filter__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nkoh-price-filter__apply {
  flex: 1;
  background: #008a7e;
  color: #fff;
  border: 0;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nkoh-price-filter__apply:hover:not(:disabled) {
  background: #00564e;
}
.nkoh-price-filter__apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.nkoh-price-filter__reset {
  background: transparent;
  border: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 10px;
  text-decoration: underline;
}
.nkoh-price-filter__reset:hover {
  color: #cc0066;
}

/* ── Suggestions instantanées header ───────────────────────────── */
.nkoh-search-wrap {
  position: relative;
}
.nkoh-search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  max-height: 480px;
  overflow-y: auto;
}
.nkoh-search-suggest__empty {
  padding: 20px;
  text-align: center;
  color: var(--color-ink-muted);
  font-size: 14px;
}
.nkoh-search-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  transition: background 0.15s ease;
}
.nkoh-search-suggest__item:hover {
  background: var(--color-warm-light, #FBF3F7);
  color: var(--color-ink);
  text-decoration: none;
}
.nkoh-search-suggest__img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--color-warm-light, #f7f1e6);
}
.nkoh-search-suggest__body {
  flex: 1;
  min-width: 0;
}
.nkoh-search-suggest__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nkoh-search-suggest__price {
  font-size: 14px;
  color: var(--color-accent);
  font-weight: 700;
}
.nkoh-search-suggest__all {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 0 10px 10px;
}
.nkoh-search-suggest__all:hover {
  background: var(--color-primary-dark);
}

/* ── Page /avis/[token] — Formulaire d'avis ──────────────────── */
.nkoh-avis-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 138, 126, 0.08);
}
.nkoh-avis-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: var(--color-warm-light, #FBF3F7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 28px;
}
.nkoh-avis-card__title {
  font-family: var(--font-playfair), serif;
  font-size: 28px;
  margin: 0 0 10px;
  color: var(--color-ink);
}
.nkoh-avis-card__text {
  color: var(--color-ink-muted);
  margin: 0 0 20px;
}
.nkoh-avis-card__order {
  background: #FBF3F7;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  color: var(--color-ink);
  margin: 0 0 30px;
}

.nkoh-avis-form {
  text-align: left;
}
.nkoh-avis-form__field {
  margin-bottom: 20px;
  position: relative;
}
.nkoh-avis-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.nkoh-avis-form__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-ink);
  font-size: 14px;
}
.nkoh-avis-form input[type="text"],
.nkoh-avis-form textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.nkoh-avis-form textarea {
  resize: vertical;
  min-height: 120px;
}
.nkoh-avis-form input:focus,
.nkoh-avis-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-color: transparent;
}
.nkoh-avis-form__count {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-size: 12px;
  color: var(--color-ink-muted);
}
.nkoh-avis-form__hint {
  display: block;
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 4px;
}
.nkoh-avis-form__legal {
  background: var(--color-success-bg);
  border-left: 3px solid var(--color-success);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-ink-muted);
  margin: 16px 0 24px;
}
.nkoh-avis-form__error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 16px 0;
}
.nkoh-avis-form__submit {
  width: 100%;
}

/* Étoiles cliquables */
.nkoh-avis-stars {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nkoh-avis-star {
  background: none;
  border: 0;
  font-size: 32px;
  color: var(--color-line);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease, transform 0.1s ease;
  line-height: 1;
}
.nkoh-avis-star:hover {
  transform: scale(1.1);
}
.nkoh-avis-star--active {
  color: var(--color-warning);
}
.nkoh-avis-stars__label {
  margin-left: 12px;
  font-size: 14px;
  color: var(--color-ink-muted);
  font-weight: 500;
}

.nkoh-avis-success {
  text-align: center;
  padding: 30px 0;
}
.nkoh-avis-success__icon {
  font-size: 48px;
  margin: 0 0 10px;
}
.nkoh-avis-success h2 {
  font-family: var(--font-playfair), serif;
  font-size: 24px;
  margin: 0 0 10px;
}
.nkoh-avis-success p {
  color: var(--color-ink-muted);
  margin: 0;
}

/* ── Affichage avis sur fiche produit ────────────────────────── */
.nkoh-product-reviews__header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #FBF3F7;
  padding: 18px 22px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.nkoh-product-reviews__score {
  display: flex;
  align-items: baseline;
}
.nkoh-product-reviews__average {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-accent);
  font-family: var(--font-playfair), serif;
  line-height: 1;
}
.nkoh-product-reviews__outof {
  font-size: 16px;
  color: var(--color-ink-muted);
  margin-left: 2px;
}
.nkoh-product-reviews__details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nkoh-product-reviews__count {
  font-size: 12px;
  color: var(--color-ink-muted);
}
.nkoh-product-reviews__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nkoh-product-review {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.nkoh-product-review:last-child {
  border-bottom: 0;
}
.nkoh-product-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.nkoh-product-review__author {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 14px;
}
.nkoh-product-review__date {
  font-size: 12px;
  color: var(--color-ink-muted);
}
.nkoh-product-review__text {
  margin: 0;
  color: var(--color-ink);
  line-height: 1.5;
  font-size: 14px;
}

/* Étoiles d'affichage (lecture seule).
   - Étoile pleine = glyphe ★ + or franc #FFC107 (gold Material)
   - Étoile vide = glyphe ☆ (creuse) + gris medium #9CA3AF
   La forme du glyphe signale déjà l'état ; la couleur renforce.
   On NE PAS s'appuyer sur var(--color-warning) ici : Tailwind v4 peut
   purger les variables `@theme` qui ne servent à aucune classe util.,
   ce qui ferait tomber la couleur sur le gris hérité. */
.nkoh-stars {
  display: inline-flex;
  gap: 2px;
  color: #FFC107;
  font-size: 16px;
  line-height: 1;
}
.nkoh-stars__star {
  color: #9CA3AF;
}
.nkoh-stars__star--full {
  color: #FFC107;
}
.nkoh-stars__star--half {
  background: linear-gradient(90deg, #FFC107 50%, #9CA3AF 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 575px) {
  .nkoh-avis-form__row { grid-template-columns: 1fr; }
  .nkoh-avis-card { padding: 28px 18px; }
  .nkoh-avis-star { font-size: 28px; }
}

/* ── Badge "via Google" sur les avis importés ──────────────── */
.nkoh-review-source {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nkoh-review-source--google {
  background: linear-gradient(90deg, var(--color-google-blue) 0%, var(--color-google-green) 50%, var(--color-google-yellow) 100%);
  color: #fff;
}

/* ── Section avis page d'accueil ──────────────────────────── */
.nkoh-global-reviews__heading {
  text-align: center;
  margin-bottom: 30px;
}
.nkoh-global-reviews__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 14px;
}
.nkoh-global-review {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 24px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nkoh-global-review:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.nkoh-global-review__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.nkoh-global-review__text {
  flex: 1;
  margin: 0 0 18px;
  padding: 0;
  font-style: italic;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.55;
  border: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nkoh-global-review__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-ink-muted);
}
.nkoh-global-review__footer strong {
  color: var(--color-ink);
}
.nkoh-global-review__footer time {
  font-size: 12px;
}

/* ── Collections commerciales ──────────────────────────────────── */
.nkoh-collection-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nkoh-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 138, 126, 0.15);
  text-decoration: none;
  color: inherit;
}
.nkoh-collection-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.nkoh-collection-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nkoh-collection-card__body {
  padding: 20px 22px;
}
.nkoh-collection-card__title {
  font-family: var(--font-playfair), serif;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.nkoh-collection-card__subtitle {
  font-size: 14px;
  color: var(--color-ink-muted);
  margin: 0 0 14px;
  line-height: 1.45;
}
.nkoh-collection-card__cta {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 14px;
}

.nkoh-collection-hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  align-items: center;
  background: var(--color-warm-light, #FBF3F7);
  border-radius: 20px;
  overflow: hidden;
}
.nkoh-collection-hero__img {
  aspect-ratio: 16 / 9;
  height: 100%;
}
.nkoh-collection-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nkoh-collection-hero__body {
  padding: 30px 40px 30px 0;
}
.nkoh-collection-hero__title {
  font-family: var(--font-playfair), serif;
  font-size: 36px;
  margin: 0 0 10px;
  color: var(--color-ink);
}
.nkoh-collection-hero__subtitle {
  font-size: 18px;
  color: var(--color-accent);
  margin: 0 0 16px;
  font-weight: 600;
}
.nkoh-collection-hero__intro {
  color: var(--color-ink);
  margin: 0 0 24px;
  line-height: 1.6;
}

.nkoh-collection-cta {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-left: 4px solid var(--color-whatsapp);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
}
.nkoh-collection-cta h3 {
  margin: 0 0 10px;
  font-family: var(--font-playfair), serif;
}
.nkoh-collection-cta p {
  color: var(--color-ink-muted);
  margin: 0 0 16px;
}

.nkoh-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-ink-muted);
}

@media (max-width: 767px) {
  .nkoh-collection-hero {
    grid-template-columns: 1fr;
  }
  .nkoh-collection-hero__body {
    padding: 20px;
  }
  .nkoh-collection-hero__title { font-size: 28px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Safety viewport ≤ 359 px (iPhone SE 1G, anciens Android, montres)
 * Évite débordement horizontal + composants qui éclatent en
 * 1 colonne quand le contenu ne peut plus tenir en 2.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 359px) {
  /* Padding réduit pour gagner de l'espace utile */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Cartes produit en 1 colonne (au lieu de 2) */
  .nkoh-prod-title {
    font-size: 12px;
  }
  .product-price {
    font-size: 14px;
  }

  /* Tableau panier — passe en bloc empilé */
  .nkoh-cart-table {
    font-size: 12px;
  }
  .nkoh-cart-table img {
    width: 60px;
    height: 60px;
  }

  /* Boutons critiques restent ≥ 44 px de haut (WCAG AAA) */
  .btn,
  .button.button-add-to-cart {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Hero accueil et page titles : on shrink la typo serif */
  h1, .nkoh-shop-banner__title {
    font-size: 22px !important;
    line-height: 1.2;
  }
  h2, .section-title {
    font-size: 18px !important;
  }

  /* Recherche dropdown : prendre toute la largeur */
  .nkoh-search-suggest {
    left: -8px;
    right: -8px;
  }
  .nkoh-search-suggest__img {
    width: 40px;
    height: 40px;
  }
  .nkoh-search-suggest__name {
    font-size: 12px;
  }

  /* Code de retrait magasin : éviter qu'il déborde */
  .nkoh-pickup-code__value {
    font-size: 32px;
    letter-spacing: 6px;
  }

  /* Avis card : padding réduit */
  .nkoh-avis-card {
    padding: 22px 14px;
  }
  .nkoh-avis-card__title {
    font-size: 20px;
  }
  .nkoh-avis-star {
    font-size: 28px;
    padding: 3px;
  }
}

/* ── Page /avis index : carte récap stats ────────────────────────── */
.nkoh-avis-summary {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--color-warm-light);
  padding: 32px 40px;
  border-radius: 16px;
  border: 1px solid var(--color-line);
}
.nkoh-avis-summary__score {
  text-align: center;
}
.nkoh-avis-summary__average {
  display: block;
  font-family: var(--font-playfair), serif;
  font-size: 56px;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 8px;
}
.nkoh-avis-summary__count {
  display: block;
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 8px;
}
.nkoh-avis-summary__bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nkoh-avis-bar {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.nkoh-avis-bar__label {
  font-weight: 600;
  color: var(--color-ink-muted);
}
.nkoh-avis-bar__track {
  background: var(--color-line);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.nkoh-avis-bar__fill {
  background: var(--color-warning);
  height: 100%;
  display: block;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.nkoh-avis-bar__count {
  font-size: 12px;
  color: var(--color-ink-muted);
  text-align: right;
}
@media (max-width: 767px) {
  .nkoh-avis-summary {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 18px;
  }
  .nkoh-avis-summary__average { font-size: 48px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Touch targets WCAG 2.2 AAA (≥ 44×44 px) sur mobile
 * Garantit que les boutons et liens cliquables critiques restent
 * confortablement tappables même avec un pouce gros ou des
 * conditions imparfaites (gants fins, écran sale).
 * Appliqué sous ≤ 991 px (tout sauf desktop) car desktop a la
 * souris qui est plus précise.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Tous les boutons primaires/secondaires */
  .btn,
  .button,
  button.add,
  .nkoh-add-whatsapp,
  .nkoh-btn-whatsapp,
  .nkoh-product-ask__btn,
  .nkoh-avis-form__submit {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Inputs panier (qty up/down + bouton remove) */
  .qty-down, .qty-up {
    min-width: 36px;
    min-height: 36px;
  }

  /* Navigation : liens du menu mobile */
  .nkoh-mobile-nav a,
  .nkoh-mobile-nav button {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Icônes header (panier, compte, langue) */
  .header-action-icon-2,
  .nkoh-cart-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Filtres boutique : transition cliente (NestFilterLink) ─────── */
.is-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}
.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: nkoh-shimmer 1.2s linear infinite;
  pointer-events: none;
}
@keyframes nkoh-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── Skeleton produit boutique (pendant filtres useTransition) ──── */
.nkoh-product-skeleton {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 30px;
}
.nkoh-product-skeleton__img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(
    90deg,
    var(--color-line) 0%,
    var(--color-warm-light) 50%,
    var(--color-line) 100%
  );
  background-size: 200% 100%;
  animation: nkoh-shimmer 1.2s linear infinite;
  border-radius: 8px;
  margin-bottom: 12px;
}
.nkoh-product-skeleton__line {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--color-line) 0%,
    var(--color-warm-light) 50%,
    var(--color-line) 100%
  );
  background-size: 200% 100%;
  animation: nkoh-shimmer 1.2s linear infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}
.nkoh-product-skeleton__line--title {
  width: 75%;
}
.nkoh-product-skeleton__line--price {
  width: 40%;
  height: 16px;
}


/* ─── Toast « ajouté au panier » ──────────────────────────────────── */
.nkoh-toast {
  position: fixed;
  top: 100px;
  right: 24px;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 86, 78, 0.18),
              0 4px 12px rgba(0, 86, 78, 0.08);
  border-left: 4px solid #008a7e;
  animation: nkoh-toast-in 220ms ease both;
}
@keyframes nkoh-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.nkoh-toast__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 138, 126, 0.12);
  color: #008a7e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.nkoh-toast__body {
  flex: 1 1 0;
  min-width: 0;
}
.nkoh-toast__title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 14px;
  color: #00564e;
}
.nkoh-toast__product {
  margin: 0 0 8px;
  font-size: 13px;
  color: #253d4e;
  line-height: 1.35;
  word-break: break-word;
}
.nkoh-toast__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #cc0066;
  text-decoration: none;
}
.nkoh-toast__cta:hover {
  text-decoration: underline;
}
.nkoh-toast__close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: #6b7280;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.nkoh-toast__close:hover {
  color: #00564e;
}
@media (max-width: 575px) {
  .nkoh-toast {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ─── Rangée légale en bas du footer ───────────────────────────── */
/* Conditions / Confidentialité / Cookies / Mentions / Litiges
   sortis de la colonne « Entreprise » pour la raccourcir. */
.nkoh-footer-legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
}
.nkoh-footer-legal li {
  display: inline-flex;
  align-items: center;
}
.nkoh-footer-legal li + li::before {
  content: "·";
  margin-right: 18px;
  color: var(--color-line, #d6d6d6);
}
.nkoh-footer-legal a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}
.nkoh-footer-legal a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ─── Section « Visite magasin physique » (home) ─────────────────── */
.nkoh-instore-section {
  padding: 60px 0 40px;
}
.nkoh-instore-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 86, 78, 0.12);
}
.nkoh-instore-image img {
  display: block;
  width: 100%;
  height: auto;
}
.nkoh-instore-text {
  padding-left: 20px;
}
.nkoh-instore-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cc0066;
  background: rgba(204, 0, 102, 0.08);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.nkoh-instore-title {
  font-family: var(--font-playfair, "Playfair Display"), serif;
  font-size: 36px;
  line-height: 1.18;
  margin: 0 0 18px;
  color: #00564e;
}
.nkoh-instore-title em {
  font-style: italic;
  color: #cc0066;
}
.nkoh-instore-lead {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 26px;
  color: #495b67;
}
.nkoh-instore-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 991px) {
  .nkoh-instore-section { padding: 40px 0; }
  .nkoh-instore-text { padding-left: 0; padding-top: 28px; }
  .nkoh-instore-title { font-size: 28px; }
}

/* ─── Hero : photo du magasin en background ─────────────────────── */
/* La photo magasin-interieur est riche en couleurs ; on superpose
   un dégradé blanc → transparent depuis la gauche pour que le H1
   et le paragraphe restent parfaitement lisibles. */
.nkoh-hero-instore {
  background-size: cover !important;
  background-position: center right !important;
  position: relative;
}
.nkoh-hero-instore::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.96) 50%,
    rgba(255, 255, 255, 0.82) 70%,
    rgba(255, 255, 255, 0.35) 88%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}
.nkoh-hero-instore .slider-content {
  position: relative;
  z-index: 2;
  /* Filet de sécurité : un léger halo blanc sous le texte renforce
     la lisibilité même si l'image change ou si le voile se déforme. */
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
}
@media (max-width: 575px) {
  /* Sur mobile, le texte couvre toute la largeur — on adoucit le
     dégradé pour qu'il reste lisible sur tout le viewport. */
  .nkoh-hero-instore::before {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ─── Les 3 bannières du milieu : hauteur stable peu importe l'image ─── */
/* Force toutes les images à occuper le même ratio (largeur × hauteur)
   pour qu'elles s'alignent visuellement même si les sources ont
   des dimensions différentes. object-fit cover évite la déformation. */
.banners.mb-25 .banner-img {
  position: relative;
  aspect-ratio: 380 / 220;
  overflow: hidden;
  border-radius: 14px;
}
.banners.mb-25 .banner-img > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* On ne touche PAS au positionnement Nest natif (top: 50% + translateY)
   sinon le texte sort du cadre. On garantit juste qu'il reste au-dessus
   de l'image en absolute. */
.banners.mb-25 .banner-img .banner-text {
  z-index: 2;
}

/* ─── Newsletter : image custom proprement ajustée ──────────────── */
/* La nouvelle image newsletter.png a un ratio plus carré que l'image
   d'origine du thème Nest. On la borne en hauteur et on la place en
   bas-droite sans débordement. */
.newsletter .newsletter-inner {
  min-height: 280px;
}
.newsletter .newsletter-inner img {
  max-width: 38%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 991px) {
  /* Casse le display:table natif Nest qui empêche le centrage propre
     de l'image en bloc + adoucit le padding qui mange tout l'espace
     dispo sur petit viewport. */
  .newsletter .newsletter-inner {
    display: block !important;
    padding: 28px 22px !important;
    text-align: center;
  }
  .newsletter .newsletter-inner .newsletter-content {
    display: block;
    width: 100%;
  }
  .newsletter .newsletter-inner .newsletter-content form {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
  }
  .newsletter .newsletter-inner img {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 70%;
    max-height: 180px;
    margin: 24px auto 0;
    display: block;
  }
}

/* ─── Réassurance : cartes à hauteur égale dans une rangée ──────── */
/* Le CSS Nest ne pose pas height: 100% sur .banner-left-icon, donc
   les cartes côte à côte ont des hauteurs variables selon le contenu
   texte (effet escalier sur mobile/tablette). On force les cols en
   flex et l'enfant à prendre toute la hauteur. */
.featured .row > [class*='col-'] {
  display: flex;
  margin-bottom: 16px;
}
.featured .banner-left-icon {
  width: 100%;
  height: 100%;
}

/* ─── Hero banners droite : pleine largeur en mobile ──────────────── */
/* Le CSS Nest natif ne pose pas width:100% sur .banner-img.style-4/5,
   et l'Image Next a un sizes 50vw en mobile → la carte ne remplit
   pas le viewport. On force 100% en dessous de 992. */
@media (max-width: 991px) {
  .home-slider .banner-img.style-4,
  .home-slider .banner-img.style-5 {
    width: 100%;
  }
  .home-slider .banner-img.style-4 img,
  .home-slider .banner-img.style-5 img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ─── Bloc réassurance sous panier vide ───────────────────────── */
.nkoh-empty-reassure h3 {
  font-family: var(--font-playfair, "Playfair Display"), serif;
  font-size: 22px;
  color: #00564e;
}
.nkoh-empty-reassure__tile {
  height: 100%;
  padding: 24px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 86, 78, 0.08);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nkoh-empty-reassure__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 86, 78, 0.08);
}
.nkoh-empty-reassure__tile i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 138, 126, 0.12);
  color: #008a7e;
  font-size: 20px;
  margin-bottom: 14px;
}
.nkoh-empty-reassure__tile h4 {
  font-size: 15px;
  font-weight: 600;
  color: #253d4e;
  margin: 0 0 6px;
}
.nkoh-empty-reassure__tile p {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* ─── CTA en bas de section avis ─────────────────────────────── */
.nkoh-global-reviews__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.nkoh-global-reviews__cta .btn {
  display: inline-flex;
  align-items: center;
}
/* Override de .btn.btn-secondary (navy #3e5379 du thème Nest) :
   on rebrand en outline turquoise — pair propre avec le primaire
   plein turquoise sans hurler comme ferait un magenta solide. */
.nkoh-global-reviews__cta .nkoh-global-reviews__cta-secondary {
  background-color: #fff;
  border: 1.5px solid #008A7E;
  color: #008A7E;
}
.nkoh-global-reviews__cta .nkoh-global-reviews__cta-secondary:hover,
.nkoh-global-reviews__cta .nkoh-global-reviews__cta-secondary:focus {
  background-color: #008A7E;
  border-color: #008A7E;
  color: #fff;
}

/* ─── Sidebar boutique : sticky + alignée en haut ─────────────────
   Sur les recherches qui ramènent peu de résultats, la sidebar
   (filtres + nouveautés) était plus longue que le contenu droit,
   créant un vide énorme en dessous. La sticky-sidebar suit le
   scroll : visuellement il n'y a plus de trou, et c'est la conv'
   moderne sur les e-commerce (Carrefour, Decathlon...). */
@media (min-width: 992px) {
  .primary-sidebar {
    position: sticky;
    top: 100px;
    /* Sans align-self: flex-start, Bootstrap stretch la col à la
       hauteur de la row et sticky devient inopérante. */
    align-self: flex-start;
    /* Affichage intégral : pas de scroll interne, on laisse la
       sticky combler le vide visuel sans couper la sidebar. */
  }
}