/**
 * Karin Theme D11 - feuille de style principale.
 *
 * Palette et polices RECONSTITUEES approximativement a partir du rendu du
 * site Drupal 7 (pas du CSS source, non accessible). Ajustez les variables
 * ci-dessous si vous recuperez les vraies valeurs depuis le theme D7
 * (sites/all/themes/karin_theme/css/*.css).
 */

/* ==================== SURCHARGE DES VARIABLES DE KART ====================
   Kart (theme de base) definit ses propres couleurs sur :root dans
   themes/contrib/kart/css/style.css. On les redefinit ici avec la
   palette de marque Karin Herzog (charge APRES le CSS de Kart, donc ces
   valeurs l'emportent automatiquement partout ou Kart utilise ses
   variables : boutons, accents, ombres...). */
:root {
  --color-primary: #b69e4e;       /* or de marque, remplace le rouge/orange de Kart */
  --color-secondary: #222222;     /* remplace le bleu-gris de Kart */
  --light-primary: #f3e6da;       /* beige, remplace le beige clair de Kart */
  --light-secondary: #f3e6da;
  --color-border: #e4e4e4;
  --text-color: #000000;
  --text-color-light: #969799;
  --bold-color: #000000;
  --dark: #000000;
  --bg-body: #ffffff;
  --shadow-primary: 0 0 10px 1px var(--color-primary);
  --shadow-secondary: 0 0 10px 1px var(--color-secondary);
}

:root {
  /* Couleurs REELLES extraites du CSS du theme D7 (karin_theme) */
  --kh-color-bg: #ffffff;
  --kh-color-bg-soft: #f3e6da;      /* beige, fond des vignettes produit dans le D7 original */
  --kh-color-text: #000000;
  --kh-color-text-muted: #969799;   /* --main-color-gray du D7 */
  --kh-color-accent: #b69e4e;       /* --main-color-gold du D7 : couleur de marque principale */
  --kh-color-accent-dark: #000000;  /* les boutons or passent au noir au survol dans le D7 */
  --kh-color-secondary: #bda390;    /* tan/beige, utilise sur beaucoup de boutons secondaires */
  --kh-color-border: #e4e4e4;
  --kh-color-sale: #af2c2c;         /* prix promo / texte rouge */
  --kh-color-badge: #b20000;        /* badge rond "promo" en diagonale */
  --kh-color-success: #42a731;      /* boutons validation panier/checkout */
  --kh-color-dark: #222222;         /* bouton "Add to cart" page produit */
  --kh-color-darker: #191919;       /* onglets Benefits/Composition/How to use */
  --kh-color-tab-active-bg: #fbfbfb;
  --kh-color-white: #ffffff;

  /* Typographie : le D7 utilise GothamPro (police commerciale). Fallback
     sur des polices systeme a chasse/graisse proche si vous n'avez pas les
     fichiers de police - dites-moi si vous avez les .woff/.woff2 de
     GothamPro et je les integre proprement via @font-face. */
  --kh-font-display: 'GothamPro', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --kh-font-body: 'GothamPro', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --kh-container-width: 1280px;
  --kh-spacing-unit: 8px;
  --kh-radius: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--kh-font-body);
  color: var(--kh-color-text);
  background: var(--kh-color-bg);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--kh-font-display);
  font-weight: 100;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Dans le D7, le nom propre (ex: titre de produit dans un lien) est en
   graisse forte alors que le reste du titre de section reste tres fin. */
h1 a, h2 a, .kh-section__title strong {
  font-weight: 900;
}

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; height: auto; display: block; }

.kh-container {
  max-width: var(--kh-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kh-color-accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ==================== TOPBAR ==================== */
.kh-topbar {
  background: var(--kh-color-text);
  color: #fff;
  font-size: 12px;
}
.kh-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
}
.kh-topbar__social a {
  margin-right: 12px;
  color: #fff;
}
.kh-topbar__shipping strong {
  color: var(--kh-color-accent);
  margin-right: 4px;
}

/* ==================== HEADER ==================== */
.kh-header {
  border-bottom: 1px solid var(--kh-color-border);
  background: var(--kh-color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}
.kh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 32px;
}
.kh-header__logo img { max-height: 48px; }
.kh-header__mega-menu { flex: 1; }
.kh-header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
}

/* ---- Header manuel (garanti, sans dependance aux blocs Drupal) ---- */
.kh-search-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--kh-color-border);
  border-radius: var(--kh-radius);
  overflow: hidden;
}
.kh-search-form__input {
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  width: 160px;
}
.kh-search-form__submit {
  border: none;
  background: var(--kh-color-text);
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
}

.kh-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kh-color-text);
  font-weight: 600;
}
.kh-cart-link__icon {
  display: inline-block;
  width: 22px;
  height: 20px;
  border: 1.5px solid var(--kh-color-text);
  border-radius: 0 0 4px 4px;
  border-top: none;
  position: relative;
}
.kh-cart-link__count {
  background: var(--kh-color-accent);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.kh-account-links,
.kh-language-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.kh-account-links a,
.kh-language-links a {
  color: var(--kh-color-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.kh-account-links a:hover,
.kh-language-links a:hover,
.kh-language-links a.is-active {
  color: var(--kh-color-accent);
}
.kh-language-links {
  border-left: 1px solid var(--kh-color-border);
  padding-left: 12px;
}

/* ---- Reset generique : neutraliser le wrapping par defaut des blocs
   Drupal (div > h2.title + contenu), quel que soit le bloc reel place. ---- */
.kh-header__actions-account,
.kh-header__actions-search,
.kh-header__actions-phone {
  display: flex;
  align-items: center;
}
.kh-header__actions-account > div,
.kh-header__actions-search > div,
.kh-header__actions-phone > div {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Les titres de bloc doivent normalement etre desactives dans l'admin
   (case "Afficher le titre" decochee). Ce filet de securite les cache
   quand meme au cas ou l'un d'entre eux resterait active par erreur. */
.kh-header__actions h2 {
  display: none !important;
}

/* Toutes les listes <ul> a l'interieur de ces zones deviennent des lignes
   horizontales par defaut (menu compte, langue, etc.) */
.kh-header__actions-account ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.kh-header__actions-account li {
  list-style: none;
}
.kh-header__actions-account a {
  font-size: 12px;
  color: var(--kh-color-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.kh-header__actions-account a:hover,
.kh-header__actions-account .is-active {
  color: var(--kh-color-accent);
}

/* Sélecteur de langue : les 3 langues sur une ligne, separateur discret */
.kh-header__actions-account .language-switcher-language-url {
  gap: 0;
}
.kh-header__actions-account .language-switcher-language-url li {
  padding: 0 8px;
  border-right: 1px solid var(--kh-color-border);
}
.kh-header__actions-account .language-switcher-language-url li:last-child {
  border-right: none;
}

/* Panier : icone sac + compteur, texte "élément(s)" cache */
.kh-header__actions-account [id*="cart"] {
  position: relative;
}
.kh-header__actions-account [id*="cart"] a,
.kh-header__actions-account [id*="cart"] .cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
}
.kh-header__actions-account [id*="cart"] a::before {
  content: '';
  display: block;
  width: 20px;
  height: 18px;
  border: 1.5px solid var(--kh-color-text);
  border-radius: 0 0 4px 4px;
  border-top: none;
}
.kh-header__actions-account [id*="cart"] .badge,
.kh-header__actions-account [id*="cart"] .count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--kh-color-accent);
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cache le texte brut "0 element(s)" si le bloc l'affiche en clair, on
   garde uniquement l'icone + eventuel badge numerique */
.kh-header__actions-account [id*="cart"] > div > *:not(a):not(.badge):not(.count) {
  display: none;
}

/* Compte utilisateur : juste l'icone, menu au clic/hover si besoin */
.kh-header__actions-account [id*="account"] a,
.kh-header__actions-account [id*="user"] a {
  font-size: 12px;
}

/* ---- Zone 2 : recherche ---- */
.kh-header__actions-search .views-exposed-widgets,
.kh-header__actions-search form {
  display: flex;
  align-items: center;
}
.kh-header__actions-search input[type="text"] {
  border: 1px solid var(--kh-color-border);
  padding: 8px 14px;
  font-size: 13px;
  min-width: 200px;
  border-radius: var(--kh-radius) 0 0 var(--kh-radius);
}
.kh-header__actions-search button[type="submit"] {
  border: 1px solid var(--kh-color-text);
  background: var(--kh-color-text);
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 var(--kh-radius) var(--kh-radius) 0;
  cursor: pointer;
}

/* ---- Zone 3 : telephone ---- */
.kh-header__actions-phone {
  font-size: 13px;
  color: var(--kh-color-text-muted);
  white-space: nowrap;
}
.kh-header__actions-phone a {
  color: var(--kh-color-text);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .kh-header__actions-search,
  .kh-header__actions-phone {
    display: none; /* priorite au panier/compte/langue sur petits ecrans */
  }
}

/* ==================== MEGA MENU — version elegante plein panneau ==================== */
.kh-header__mega-menu-bar {
  background: #000;
  position: relative;
}

/* Calque sombre derriere le panneau ouvert : rend l'overlay du contenu
   du dessous clairement intentionnel plutot que perturbant. */
.kh-header__mega-menu-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--kh-header-height, 88px);
  bottom: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
  z-index: 80;
}
.kh-header__mega-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.kh-header__mega-menu nav > ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

.kh-header__mega-menu nav > ul > li {
  position: static;
  border-right: 1px solid #222;
}
.kh-header__mega-menu nav > ul > li:last-child {
  border-right: none;
}

.kh-header__mega-menu nav > ul > li > a,
.kh-header__mega-menu nav > ul > li > span {
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  padding: 20px 22px;
  display: inline-block;
  position: relative;
  color: #fff;
  transition: color .3s ease, background-color .3s ease;
}

.kh-header__mega-menu nav > ul > li.is-open > a,
.kh-header__mega-menu nav > ul > li.is-open > span {
  color: #000;
  background: var(--kh-color-accent);
}

/* ---- Panneau plein-largeur (dropdown direct de SHOP, LA MARQUE, etc.)
   DESKTOP UNIQUEMENT — le bloc mobile equivalent est plus bas, dans le
   @media (max-width: 900px), mutuellement exclusif. ---- */
@media (min-width: 901px) {
  .kh-header__mega-menu nav > ul > li > ul {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--kh-header-height, 88px);
    width: 100%;
    margin: 0;
    padding: 40px 48px 48px;
    list-style: none;

    background: var(--kh-color-white);
    border-top: 1px solid var(--kh-color-border);
    box-shadow: 0 24px 40px rgba(0,0,0,0.06);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 48px;
    box-sizing: border-box;
    max-width: var(--kh-container-width);
    left: 50%;
    transform: translate(-50%, -8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    z-index: 90;
  }

  .kh-header__mega-menu nav > ul > li.is-open > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  }
}

.kh-header__mega-menu nav > ul > li > ul > li {
  padding: 0;
}

/* ==================== Styles de colonnes du panneau — DESKTOP UNIQUEMENT
   (min-width: 901px), mutuellement exclusif avec le bloc mobile plus bas
   pour eviter tout conflit d'ordre/cascade CSS. ==================== */
@media (min-width: 901px) {
  /* En-tete de colonne (FACECARE, BODYCARE, MEN...) : lien direct enfant du
     panneau. */
  .kh-header__mega-menu nav > ul > li > ul > li > a {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kh-color-text);
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--kh-color-border);
  }
  .kh-header__mega-menu nav > ul > li > ul > li > a:hover {
    color: var(--kh-color-text);
  }

  /* Sous-liste de chaque colonne (PREPARER, CORRIGER & TRAITER...) :
     TOUJOURS visible (pas de declenchement au survol), simple liste sous
     l'en-tete de colonne. Un niveau plus profond que le panneau lui-meme. */
  .kh-header__mega-menu nav > ul > li > ul > li > ul {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kh-header__mega-menu nav > ul > li > ul > li > ul > li {
    padding: 0;
  }

  .kh-header__mega-menu nav > ul > li > ul > li > ul > li > a {
    display: block;
    padding: 9px 0;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--kh-color-accent);
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color .25s ease, padding-left .25s ease;
  }
  .kh-header__mega-menu nav > ul > li > ul > li > ul > li > a:hover {
    color: var(--kh-color-accent-dark, #000);
    padding-left: 6px;
  }
}

.kh-header__mega-menu nav h2.visually-hidden { display: none; }

/* ==================== MEGA MENU — regles basees sur les VRAIES classes
   du HTML genere (menu-item-level-1/2/3, submenu, menu-item-has-children),
   plus fiables que les selecteurs structurels "nav > ul > li" precedents.
   Placees APRES pour prendre le dessus en cas de conflit. ==================== */

/* Niveau 1 (SHOP, LA MARQUE, FAQ...) */
.kh-header__mega-menu .menu-item-level-1 {
  position: static;
}
.kh-header__mega-menu .menu-item-level-1 > a {
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  padding: 20px 22px;
}
.kh-header__mega-menu .menu-item-level-1.is-open > a,
.kh-header__mega-menu .menu-item-level-1:hover > a {
  color: #000;
  background: var(--kh-color-accent);
}

/* Panneau (submenu direct d'un item niveau 1) : plein-largeur, grille */
@media (min-width: 901px) {
  .kh-header__mega-menu .menu-item-level-1 > ul.submenu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--kh-header-height, 88px);
    width: 100%;
    max-width: var(--kh-container-width);
    margin: 0 auto;
    padding: 40px 48px 48px;
    list-style: none;
    background: #fff;
    border-top: 1px solid var(--kh-color-border);
    box-shadow: 0 24px 40px rgba(0,0,0,0.06);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 48px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
    z-index: 90;
  }
  .kh-header__mega-menu .menu-item-level-1.is-open > ul.submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }

  /* En-tete de colonne (niveau 2) */
  .kh-header__mega-menu .menu-item-level-2 > a {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kh-color-text);
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--kh-color-border);
  }

  /* Sous-liste (niveau 3) toujours visible sous l'en-tete de colonne */
  .kh-header__mega-menu .menu-item-level-2 > ul.submenu {
    position: static;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 1;
    visibility: visible;
  }
  .kh-header__mega-menu .menu-item-level-3 > a {
    display: block;
    padding: 9px 0;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--kh-color-accent);
    font-weight: 500;
  }
  .kh-header__mega-menu .menu-item-level-3 > a:hover {
    color: #000;
    padding-left: 6px;
  }
}

/* Mobile : accordeon simple */
@media (max-width: 900px) {
  .kh-header__mega-menu .menu-item-level-1 { border-bottom: 1px solid #222; }
  .kh-header__mega-menu .menu-item-level-1 > a { display: block; padding: 16px 4px; }
  .kh-header__mega-menu .menu-item-level-1 > ul.submenu {
    display: none;
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
    background: #111;
  }
  .kh-header__mega-menu .menu-item-level-1.is-open > ul.submenu { display: block; }
  .kh-header__mega-menu .menu-item-level-2 > a { display: block; color: #fff; padding: 14px 20px; border-bottom: 1px solid #222; }
  .kh-header__mega-menu .menu-item-level-2 > ul.submenu { display: none; padding: 8px 0 8px 20px; list-style: none; margin: 0; }
  .kh-header__mega-menu .menu-item-level-2.is-open > ul.submenu { display: block; }
  .kh-header__mega-menu .menu-item-level-3 > a { display: block; color: #ccc; padding: 10px 0; }
}

/* ==================== HAMBURGER (mobile uniquement) ==================== */
.kh-header__mega-menu-close {
  display: none;
}

.kh-header__burger,
.mobile-menu-icon {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.kh-header__burger span,
.mobile-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--kh-color-text);
  transition: transform .3s ease, opacity .3s ease;
}
.kh-header__burger.is-active span:nth-child(1),
.mobile-menu-icon.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kh-header__burger.is-active span:nth-child(2),
.mobile-menu-icon.is-active span:nth-child(2) { opacity: 0; }
.kh-header__burger.is-active span:nth-child(3),
.mobile-menu-icon.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.kh-no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  .kh-header__burger,
  .mobile-menu-icon { display: flex; }
  .kh-header__inner { flex-wrap: wrap; }
  .kh-header__logo img { max-height: 36px; margin: 0 auto; }

  /* Sur mobile, seul panier reste visible dans l'entete ; compte/langue
     texte, recherche et telephone passent dans le menu deroulant ou sont
     masques (priorite a l'essentiel). */
  .kh-header__actions-search,
  .kh-header__actions-phone {
    display: none;
  }
  .kh-header__actions {
    gap: 12px;
  }
}

/* ==================== MEGA MENU MOBILE (accordeon plein ecran) ==================== */
@media (max-width: 900px) {
  .kh-header__mega-menu-bar {
    display: none;
    position: fixed;
    top: var(--kh-header-height, 88px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    overflow-y: auto;
    background: #000;
  }
  .kh-header__mega-menu-bar.is-mobile-open { display: block; }

  .kh-header__mega-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }

  .kh-header__mega-menu nav > ul {
    flex-direction: column;
    width: 100%;
  }
  .kh-header__mega-menu nav > ul > li {
    border-right: none;
    border-bottom: 1px solid #222;
    width: 100%;
  }
  .kh-header__mega-menu nav > ul > li > a,
  .kh-header__mega-menu nav > ul > li > span {
    padding: 16px 4px;
    width: 100%;
  }
  .kh-header__mega-menu nav > ul > li.is-open > a,
  .kh-header__mega-menu nav > ul > li.is-open > span {
    background: none;
    color: var(--kh-color-accent);
  }

  /* Panneau (SHOP) : plus de position fixed/grid, simple bloc empile */
  .kh-header__mega-menu nav > ul > li > ul {
    position: static;
    transform: none;
    max-width: none;
    left: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    display: none;
    grid-template-columns: 1fr;
    padding: 0 0 12px;
    background: #111;
  }
  .kh-header__mega-menu nav > ul > li.is-open > ul {
    display: block;
  }

  /* En-tete de colonne (FACECARE...) devient un accordeon niveau 2 */
  .kh-header__mega-menu nav > ul > li > ul > li > a {
    color: #fff;
    border-bottom: 1px solid #222;
    padding: 14px 20px;
    margin: 0;
  }
  .kh-header__mega-menu nav > ul > li > ul > li.is-open > a {
    color: var(--kh-color-accent);
  }
  .kh-header__mega-menu nav > ul > li > ul > li > ul {
    display: none;
    padding: 8px 0 8px 20px;
  }
  .kh-header__mega-menu nav > ul > li > ul > li.is-open > ul {
    display: block;
  }
  .kh-header__mega-menu nav > ul > li > ul > li > ul > li > a {
    color: #ccc;
    padding: 10px 0;
  }

  .kh-header__mega-menu-backdrop { display: none !important; }
}

/* ==================== HERO / CAROUSEL ==================== */
.kh-hero { background: var(--kh-color-bg-soft); }
.kh-carousel { position: relative; overflow: hidden; }
.kh-carousel__slide img { width: 100%; }
.kh-carousel--placeholder .kh-carousel__slide {
  aspect-ratio: 21 / 9;
  background: linear-gradient(120deg, var(--kh-color-bg-soft), var(--kh-color-border));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== SECTIONS GENERIQUES ==================== */
.kh-section { padding: 64px 0; }
.kh-section:nth-child(even) { background: var(--kh-color-bg-soft); }
.kh-section__title {
  text-align: center;
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kh-section__subtitle {
  text-align: center;
  color: var(--kh-color-text-muted);
  margin-bottom: 40px;
}

/* ==================== PRODUCT GRID / CARD ==================== */
.kh-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .kh-product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Le wrapper Drupal ".view-content" s'intercale entre le conteneur flex
   de Kart (.products) et les cartes (.product), empechant le flex de
   Kart d'aligner correctement les items (flex n'affecte que les enfants
   DIRECTS). "display: contents" retire ce wrapper de l'arbre de mise en
   page sans toucher au HTML, laissant Kart atteindre .product directement. */
.view-top-picks- .view-content,
.view-best-sellers .view-content {
  display: contents;
}

/* Carte produit issue d'une Vue (Top Picks / Best Sellers) : on laisse
   Kart gerer le layout (.products en flex, .product par carte - deja
   natif dans son CSS, voir kart/css/style.css ligne 1783). On ajoute
   juste notre habillage visuel (couleurs de marque) par-dessus, sans
   toucher au display/layout de base. Ces regles .views-row restent en
   filet de securite si jamais la classe "product" n'a pas encore ete
   ajoutee cote Vue. */
.view-top-picks- .views-row,
.view-best-sellers .views-row {
  text-align: center;
  padding: 16px;
  position: relative;
}
.view-top-picks- .views-field-field-images,
.view-best-sellers .views-field-field-images {
  margin-bottom: 16px;
  background: var(--kh-color-bg-soft);
}
.view-top-picks- .views-field-field-images img,
.view-best-sellers .views-field-field-images img {
  width: 100%;
  display: block;
}
.view-top-picks- .views-field-title,
.view-best-sellers .views-field-title {
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.view-top-picks- .views-field-title a,
.view-best-sellers .views-field-title a {
  color: var(--kh-color-text);
}
.view-top-picks- .views-field-price-number,
.view-best-sellers .views-field-price-number {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.view-top-picks- .views-field-field-membership-price,
.view-best-sellers .views-field-field-membership-price {
  font-size: 12px;
  color: var(--kh-color-text-muted);
  margin-bottom: 12px;
}
/* Le lien "Voir" (operations) redondant avec le lien du titre : on le
   cache visuellement (garde l'accessibilite au clavier). */
.view-top-picks- .views-field-operations,
.view-best-sellers .views-field-operations {
  display: none;
}

/* Bouton "Ajouter au panier" sur les cartes produit (Top Picks/Best
   Sellers) - reprend le style bouton pleine largeur dore de la marque.
   NOTE : le vrai formulaire d'ajout au panier n'est pas disponible comme
   champ Views sur ce site (module Commerce Cart ne l'enregistre pas) ;
   on utilise donc un lien stylise comme un bouton, qui redirige vers la
   fiche produit ou l'achat reel fonctionne. */
.view-top-picks- .form-actions,
.view-best-sellers .form-actions {
  margin-top: 12px;
}
.view-top-picks- .button--add-to-cart,
.view-best-sellers .button--add-to-cart,
.view-top-picks- .views-field-view-commerce-product-variation a,
.view-best-sellers .views-field-view-commerce-product-variation a {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--kh-color-accent);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--kh-radius);
  cursor: pointer;
  transition: background-color .3s ease;
  margin-top: 12px;
}
.view-top-picks- .button--add-to-cart:hover,
.view-best-sellers .button--add-to-cart:hover,
.view-top-picks- .views-field-view-commerce-product-variation a:hover,
.view-best-sellers .views-field-view-commerce-product-variation a:hover {
  background: #000;
  color: #fff;
}
.kh-ajax-add-to-cart.is-added {
  background: var(--kh-color-success, #42a731) !important;
}
.kh-ajax-add-to-cart:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Bouton "Fiche produit" (lien vers le produit) - style generique,
   applicable partout ou ce champ Views apparait. */
.views-field-view-commerce-product a {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--kh-color-accent);
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--kh-radius);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
  margin-top: 12px;
  box-sizing: border-box;
}
.views-field-view-commerce-product a:hover {
  background: #000;
  color: #fff;
}

/* ==================== PAGE CATEGORIE (kh_category_products) ==================== */
.view-kh-category-products .view-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 24px;
}
@media (max-width: 900px) {
  .view-kh-category-products .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .view-kh-category-products .view-content { grid-template-columns: 1fr; }
}
.view-kh-category-products .product.views-row {
  text-align: center;
  padding: 16px;
}
.view-kh-category-products .views-field-field-images {
  background: var(--kh-color-bg-soft, #f3e6da);
  margin-bottom: 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.view-kh-category-products .views-field-field-images img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
}
.view-kh-category-products .views-field-title {
  font-size: 15px;
  text-transform: uppercase;
}
.view-kh-category-products .views-field-title a {
  color: var(--kh-color-text);
}

/* ==================== BEST SELLERS — design distinct, immersif ====================
   Carte plein cadre avec zoom image au survol, overlay degrade, prix en
   badge, CTA texte minimaliste (contraste volontaire avec le style bouton
   dore de Top Picks). */

.view-best-sellers .view-content {
  /*display: grid;*/
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .view-best-sellers .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .view-best-sellers .view-content { grid-template-columns: 1fr; }
}

.view-best-sellers .product.views-row {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--kh-color-bg-soft, #f3e6da);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.view-best-sellers .views-field-field-images {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.view-best-sellers .views-field-field-images img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
  transition: transform .5s ease;
}
.view-best-sellers .product.views-row:hover .views-field-field-images img {
  transform: scale(1.08);
}

/* Bandeau bas sombre degrade, contient titre/prix/CTA */
.view-best-sellers .product.views-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.view-best-sellers .views-field-title,
.view-best-sellers .views-field-field-sale-price-number,
.view-best-sellers .views-field-view-commerce-product {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 16px;
}

/* Titre : garder seulement le premier lien (le champ "title"), cacher le
   second lien redondant genere par "variations-target-id". */
.view-best-sellers .views-field-variations-target-id,
.view-best-sellers .views-field-field-membership-price-number {
  display: none;
}

.view-best-sellers .views-field-title {
  margin-bottom: 4px;
}
.view-best-sellers .views-field-title a {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.view-best-sellers .views-field-field-sale-price-number {
  color: var(--kh-color-accent, #b69e4e);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.view-best-sellers .views-field-field-sale-price-number .field-content::after {
  content: ' CHF';
}

.view-best-sellers .views-field-view-commerce-product {
  padding-bottom: 20px;
}
.view-best-sellers .views-field-view-commerce-product a {
  display: inline-block;
  width: auto;
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  margin-top: 0;
  transition: color .25s ease, border-color .25s ease;
}
.view-best-sellers .views-field-view-commerce-product a:hover {
  background: transparent;
  color: var(--kh-color-accent, #b69e4e);
  border-color: var(--kh-color-accent, #b69e4e);
}

/* En-tetes de bloc internes ("COUP DE COEUR DE LA SAISON") gardees mais
   sobres, sous le titre principal de section. */
.view-top-picks- .products > h2,
.view-best-sellers .products > h2,
.view-top-picks- > div > h2,
.view-best-sellers > div > h2 {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--kh-color-text-muted);
  margin-bottom: 24px;
  text-transform: none;
}

@media (max-width: 520px) {
  .kh-product-grid,
  .products.view-top-picks-,
  .products.view-best-sellers { grid-template-columns: 1fr; }

  .view-top-picks- .views-row,
  .view-best-sellers .views-row {
    text-align: left;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--kh-color-border);
    margin-bottom: 16px;
  }

  .kh-product-card {
    text-align: left;
    padding: 0 0 32px;
    border: none;
    border-bottom: 1px solid var(--kh-color-border);
    margin-bottom: 24px;
  }
  .kh-product-card__image {
    margin-bottom: 12px;
    aspect-ratio: 1 / 1;
  }
  .kh-product-card__title {
    font-size: 16px;
    text-transform: none;
  }
  .kh-product-card__subtitle {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .kh-product-card__price {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .kh-product-card__cart {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .kh-qty-selector {
    align-self: flex-start;
  }

  /* Bouton "ajouter au panier" pleine largeur, dore, avec icone ronde a
     droite (fidele a la reference karinherzog.ch) */
  .kh-add-to-cart,
  .views-field-add-to-cart-form button[type="submit"],
  form[class*="add-to-cart"] button[type="submit"] {
    width: 100%;
    background: var(--kh-color-accent);
    color: #fff;
    border: none;
    padding: 14px 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--kh-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
  }
  .kh-add-to-cart::after,
  .views-field-add-to-cart-form button[type="submit"]::after,
  form[class*="add-to-cart"] button[type="submit"]::after {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    position: relative;
  }
  .kh-add-to-cart::before,
  .views-field-add-to-cart-form button[type="submit"]::before,
  form[class*="add-to-cart"] button[type="submit"]::before {
    content: '';
    position: absolute;
    right: 16px;
    width: 12px;
    height: 11px;
    border: 1.5px solid var(--kh-color-accent);
    border-radius: 0 0 3px 3px;
    border-top: none;
    z-index: 1;
  }
}

.kh-product-card {
  position: relative;
  text-align: center;
  border: 1px solid transparent;
  padding: 16px;
  transition: border-color .2s ease;
}
.kh-product-card:hover { border-color: var(--kh-color-border); }
.kh-product-card__image { display: block; margin-bottom: 16px; background: var(--kh-color-bg-soft); }
.kh-product-card__wishlist {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #fff;
  border: 1px solid var(--kh-color-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.kh-product-card__title {
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kh-product-card__subtitle {
  font-size: 13px;
  color: var(--kh-color-text-muted);
  margin-bottom: 8px;
}
.kh-product-card__price { margin-bottom: 12px; }
.kh-price--old { text-decoration: line-through; color: var(--kh-color-text-muted); margin-right: 8px; }
.kh-price--sale { color: var(--kh-color-sale); font-weight: 600; }

.kh-product-card__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ---- Variante "carte compacte" fidele au D7 : bouton panier rond qui
   glisse depuis la droite au survol de la carte, au lieu d'un bouton
   pleine largeur toujours visible. Ajoutez la classe
   kh-product-card--compact sur .kh-product-card pour l'activer. ---- */
.kh-product-card--compact { overflow: hidden; }
.kh-product-card--compact .kh-product-card__image { position: relative; }
.kh-product-card--compact .kh-add-to-cart-round {
  position: absolute;
  bottom: 0;
  right: -100px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--kh-color-white);
  border: none;
  cursor: pointer;
  transition: right .5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-product-card--compact:hover .kh-add-to-cart-round { right: 10px; }
.kh-product-card--compact .kh-add-to-cart-round svg { width: 20px; height: 20px; }

/* Badge promo rond en diagonale, en haut a gauche de la vignette */
.kh-badge-sale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 80px;
  height: 80px;
  transform: rotate(-46deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-badge-sale span {
  background: var(--kh-color-badge);
  color: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.kh-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--kh-color-border);
}
.kh-qty-selector__minus, .kh-qty-selector__plus {
  background: none;
  border: none;
  width: 28px;
  height: 32px;
  cursor: pointer;
}
.kh-qty-selector__input {
  width: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--kh-color-border);
  border-right: 1px solid var(--kh-color-border);
}

.kh-btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--kh-radius);
  cursor: pointer;
  border: none;
  font-weight: 700;
  transition: background-color .3s ease, color .3s ease;
}
/* CTA principal : fond or, devient noir au survol (comportement D7 exact) */
.kh-btn--primary {
  background: var(--kh-color-accent);
  color: #fff;
}
.kh-btn--primary:hover { background: #000; color: #fff; }

/* Variante tan/beige utilisee sur plusieurs CTA secondaires du D7 */
.kh-btn--secondary {
  background: var(--kh-color-secondary);
  color: #fff;
}
.kh-btn--secondary:hover { background: #000; }

/* Bouton "Add to cart" de la page produit (fond quasi-noir, inverse au survol) */
.kh-btn--product-cart {
  background: var(--kh-color-dark) !important;
  color: #fff;
  border: 1px solid var(--kh-color-dark);
  width: 100%;
  padding: 15px;
  font-size: 21px;
  font-weight: 400;
}
.kh-btn--product-cart:hover {
  background: var(--kh-color-bg-soft) !important;
  color: var(--kh-color-dark);
  border-color: var(--kh-color-dark);
}

.kh-btn--outline {
  background: transparent;
  color: var(--kh-color-accent);
  border: 1px solid var(--kh-color-accent);
}
.kh-btn--outline:hover { background: var(--kh-color-accent); color: #fff; }

/* ==================== CATALOGUE BANNER ==================== */
.kh-catalogue-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--kh-radius);
}

/* ==================== OXYGEN STEPS ==================== */
.kh-steps { display: flex; flex-direction: column; gap: 48px; }
.kh-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.kh-step--reverse { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.kh-step__eyebrow {
  text-transform: uppercase;
  color: var(--kh-color-accent);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.kh-step__text h3 { font-size: 24px; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 720px) {
  .kh-step { grid-template-columns: 1fr; text-align: center; }
}

/* ==================== WHY / VIDEO ==================== */
.kh-why__video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}
.kh-why__video iframe {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: 0;
}

/* ==================== PHILOSOPHY ==================== */
.kh-philosophy { text-align: center; }
.kh-philosophy__lead {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 20px;
}
.kh-philosophy__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .kh-philosophy__list { grid-template-columns: 1fr; }
}

/* ==================== INSTAGRAM ==================== */
.kh-instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  .kh-instagram__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================== FOOTER ==================== */
.kh-footer {
  background: var(--kh-color-text);
  color: #d8d3cc;
  margin-top: 64px;
}
.kh-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 64px 24px 32px;
}
.kh-footer__col h3 {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kh-footer__col a { display: block; margin-bottom: 8px; color: #bdb6ac; }
.kh-footer__col a:hover { color: var(--kh-color-accent); }
.kh-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 16px 24px;
  font-size: 12px;
  text-align: center;
  color: #8f8a82;
}
@media (max-width: 900px) {
  .kh-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== ONGLETS PRODUIT (Benefits / Composition / How to use) ==================== */
.kh-product-tabs__nav {
  display: flex;
  gap: 2px;
  margin: 0 0 -1px 0;
}
.kh-product-tabs__nav button {
  font-size: 15px;
  background: var(--kh-color-darker);
  color: #fff;
  padding: 6px 16px;
  font-weight: 800;
  border: 1px solid #8a8a8a;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}
.kh-product-tabs__nav button.is-active,
.kh-product-tabs__nav button:hover {
  background: var(--kh-color-tab-active-bg);
  color: #000;
}
.kh-product-tabs__panel {
  border: 2px solid #d0cece;
  padding: 24px;
  background: var(--kh-color-tab-active-bg);
  display: none;
}
.kh-product-tabs__panel.is-active { display: block; }

/* ==================== UTILITAIRES ==================== */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px; width: 1px;
}
.kh-placeholder-note {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--kh-color-text-muted);
  font-style: italic;
  padding: 24px;
  border: 1px dashed var(--kh-color-border);
}
.full-width {
    position: relative;
    width: 100%;
    height: 128px;
    margin: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .region-primary-menu .submenu li {
        border-bottom: 1px solid #66666669;
    }
}
h2.kh-section__title {
    display: none;
}