/* ==========================================================================
   Grammaire visuelle reprise de Les Secrets de Loly
   --------------------------------------------------------------------------
   Ce calque ne change ni les couleurs, ni les polices, ni les photos de
   Karua. Il reprend la manière dont Loly compose ses pages :

     1. un titre de section = une seule ligne centrée, dans la couleur de
        la marque. Jamais de surtitre empilé au-dessus ;
     2. rien n'est enfermé dans une boîte bordée. Les photos sont pleines,
        les blocs sont posés sur le fond ;
     3. le rythme vient de bandes de couleur pleine largeur qui coupent
        la suite de sections claires ;
     4. les angles sont courts, les ombres absentes.

   Chargé en dernier : il a le mot de la fin sur design.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Filet de sécurité contre le débordement latéral
   Une page qui glisse de côté sur téléphone donne l'impression d'un site
   cassé. « clip » découpe ce qui dépasse sans créer de zone de défilement :
   l'en-tête collant et la barre d'achat continuent de fonctionner, ce que
   « hidden » aurait empêché. Les vrais débordements restent corrigés à la
   source, ceci n'est qu'un garde-fou.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Tiroir du menu : la sortie doit sauter aux yeux
   Une croix seule laisse hésitant. On écrit « Fermer », en haut du tiroir,
   sur une ligne qui reste visible pendant le défilement.
   -------------------------------------------------------------------------- */
.karua-nav-mobile-tete {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.4rem;
  padding: 0.7rem 20px;
  background: var(--karua-surface);
  border-bottom: 1px solid var(--karua-line);
}
.karua-nav-mobile-titre {
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--karua-ink-3);
}
.karua-nav-fermer,
.karua-nav-fermer:hover,
.karua-nav-fermer:focus {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.35em 0.9em;
  border: 1.5px solid var(--karua-line-2);
  border-radius: 100px;
  background: #fff;
  color: var(--karua-ink);
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.karua-nav-fermer:hover { border-color: var(--karua-terracotta); color: var(--karua-terracotta); }
.karua-nav-fermer:focus-visible { outline: 2px solid var(--karua-vert); outline-offset: 2px; }

/* La croix du burger passe en terracotta une fois le menu ouvert : elle
   se distingue alors du reste de l'en-tête. */
.karua-burger[aria-expanded="true"] span { background: var(--karua-terracotta); }

/* Les textes réservés aux lecteurs d'écran ne doivent occuper aucune
   place. WooCommerce en glisse un dans chaque prix (« Plage de prix :
   ... ») : mal masqué, il ajoutait 45 pixels invisibles dans certaines
   cartes et décalait les boutons d'une carte à l'autre. */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap !important;
}

/* Rien ne doit pouvoir être plus large que son conteneur. */
img,
video,
iframe,
table,
pre {
  max-width: 100%;
}

/* Entre 1024 et 1200 px, l'en-tête passe en version bureau alors que le
   menu, le logo et les trois actions tiennent tout juste : sans ce
   resserrement, les actions sortent de quelques pixels à droite. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .karua-header-inner {
    padding-inline: 14px;
    gap: 0.7rem;
  }
  .karua-nav { min-width: 0; }
  .karua-menu { gap: 1rem; }
  .karua-menu > li > a { font-size: 0.72rem; letter-spacing: 0.05em; }
  .karua-logo img,
  .karua-logo .karua-logo-img { height: 46px; max-width: 200px; }
  .karua-actions { gap: 0.8rem; }
}

/* Très petits téléphones : à 280 px de large, l'en-tête n'a plus la place
   de tenir le menu, le logo et les trois actions avec les marges
   habituelles. On resserre, plutôt que de laisser le panier sortir de
   l'écran. */
@media (max-width: 400px) {
  .karua-header-inner {
    padding-inline: 12px;
    gap: 0.5rem;
  }
  .karua-logo img,
  .karua-logo .karua-logo-img { height: 36px; max-width: 124px; }
  .karua-actions { gap: 0.55rem; }
  .karua-annonce { padding-inline: 12px; }
}

/* --------------------------------------------------------------------------
   1. Titres de section
   Loly pose un titre coloré, centré, de graisse moyenne. Pas de surtitre,
   pas de contraste typographique appuyé : c'est la couleur qui signale la
   section, pas la taille.
   -------------------------------------------------------------------------- */
.karua-section-titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  margin: 3.6rem 0 1.7rem;
}
.karua-section-titre > div { display: contents; }

.karua-section-titre h2 {
  margin: 0;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  max-width: 40ch;
}

.karua-section-lien {
  margin-top: 0;
  font-size: var(--karua-fs-sm);
  color: var(--karua-ink-2);
  text-underline-offset: 3px;
}
.karua-section-lien:hover { color: var(--karua-terracotta); }

/* Le surtitre disparaît partout où il resterait posé dans du contenu. */
.karua-section-titre .karua-surtitre { display: none; }

/* WordPress glisse un <br> entre deux shortcodes écrits sur des lignes
   consécutives. Il creusait un liseré sous le hero et un espace de trop
   sous chaque titre. On le neutralise ici plutôt que dans le contenu,
   où la prochaine modification de la page le ferait revenir. */
:is(.karua-hero, .karua-autorite, .karua-section-titre, .karua-banniere, .karua-local, .karua-coaching) + br {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Hero
   Chez Loly le hero va droit au titre. On retire la respiration qui
   servait à loger le surtitre.
   -------------------------------------------------------------------------- */
.karua-hero-titre { margin-top: 0; }

/* Mode produit : comme le hero de Loly, qui pose un flacon à gauche et
   le texte à droite. La photo reste nette et à sa taille ; le fond est
   la même photo, floutée et assombrie, pour que ses couleurs habillent
   tout le bandeau. */
.karua-hero--produit {
  display: block;
  min-height: 0;
  background-image: none;
  background-color: var(--karua-vert-dark);
  isolation: isolate;
}
.karua-hero--produit::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -2;
  background: var(--karua-hero-fond) center / cover no-repeat;
  filter: blur(40px) saturate(1.15);
}
.karua-hero--produit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(26, 20, 17, 0.2) 0%, rgba(26, 20, 17, 0.6) 50%, rgba(26, 20, 17, 0.7) 100%);
}

.karua-hero-grille {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.6rem 20px;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.karua-hero-visuel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--karua-radius-s);
  overflow: hidden;
  text-decoration: none;
}
.karua-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center 45%;
  transition: transform 0.4s ease;
}
.karua-hero-visuel:hover .karua-hero-photo { transform: scale(1.03); }

/* Le nom du produit et son prix d'entrée, posés sur la photo. */
.karua-hero-etiquette {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(100% - 24px);
  padding: 0.55em 0.9em;
  border-radius: 4px;
  background: #fff;
  color: var(--karua-ink);
  font-size: var(--karua-fs-sm);
  line-height: 1.3;
}
.karua-hero-etiquette b {
  font-family: var(--karua-font-titre);
  font-weight: 700;
}
.karua-hero-etiquette span { color: var(--karua-terracotta); font-weight: 600; }
.karua-hero-etiquette .woocommerce-Price-amount { color: inherit; }

/* Le texte reprend sa place normale dans la grille : aligné à gauche,
   sans les marges du mode photo. */
.karua-hero--produit .karua-hero-contenu {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.karua-hero--produit .karua-hero-contenu > * { max-width: 32rem; }

@media (max-width: 760px) {
  .karua-hero-grille {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 1.4rem 20px 2.2rem;
  }
  .karua-hero-visuel { aspect-ratio: 1 / 1; }
  .karua-hero--produit::after { background: rgba(26, 20, 17, 0.55); }
}

/* Hello Elementor souligne tout lien de contenu (« .page-content a »).
   La règle attrapait aussi les boutons et les cartes. On repasse à la
   même spécificité, en chargeant après lui. */
.page-content a.karua-hero-bouton,
.page-content a.karua-banniere-bouton,
.page-content a.karua-texture,
.page-content a.button,
.page-content a.karua-promesse,
.page-content .products a,
.karua-hero-bouton,
.karua-banniere-bouton,
.karua-texture,
.woocommerce a.button,
.woocommerce button.button {
  text-decoration: none;
}
.page-content a.karua-hero-bouton:hover,
.page-content a.karua-banniere-bouton:hover,
.page-content a.button:hover { text-decoration: none; }

/* Le titre d'une carte produit reste souligné au survol : c'est le seul
   endroit où le soulignement dit « ceci s'ouvre ». */
.page-content .products a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Cartes de texture
   Loly n'entoure pas ses portes d'entrée d'une bordure : une photo en
   portrait, et le nom posé sur un bandeau de couleur en pied de carte.
   -------------------------------------------------------------------------- */
/* Quatre colonnes sur grand écran, deux sur téléphone : une carte pleine
   largeur en portrait occuperait tout l'écran pour une seule texture. */
.karua-textures {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%),  1fr));
  gap: 1rem;
  margin: 1.4rem 0 2.6rem;
}

.karua-texture {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: var(--karua-surface-2);
  border-radius: var(--karua-radius-s);
  overflow: hidden;
  transition: transform 0.18s ease;
}
.karua-texture:hover { transform: translateY(-3px); }

.karua-texture-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 28%;
  margin: 0;
}

.karua-texture-nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75em 0.7em;
  background: var(--karua-vert);
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.karua-texture:hover .karua-texture-nom { background: var(--karua-vert-dark); }

/* --------------------------------------------------------------------------
   4. Bandeau pleine largeur
   L'équivalent du « Rejoignez le Club » de Loly : une bande de couleur
   qui casse la succession de sections claires.
   -------------------------------------------------------------------------- */
.karua-banniere {
  /* Pleine largeur, comme les bandes de Loly. --karua-barre porte la
     largeur de l'ascenseur, mesurée au chargement. */
  width: calc(100vw - var(--karua-barre));
  max-width: calc(100vw - var(--karua-barre));
  margin: 3.4rem 0 3.4rem calc(50% - (100vw - var(--karua-barre)) / 2);
  padding: 3rem 20px;
  background: var(--karua-terracotta);
  color: #fff;
  overflow: hidden;
}

/* Le bandeau file d'un bord à l'autre, mais son texte reste aligné sur
   la colonne du reste de la page (1140px chez Hello Elementor). */
.karua-banniere-texte {
  max-width: 1140px;
  margin: 0 auto;
}
.karua-banniere-texte h2 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
}
.karua-banniere-texte p {
  margin: 0 0 1.5rem;
  max-width: 52ch;
  color: #FBEEE5;
  font-size: var(--karua-fs-base);
  line-height: 1.6;
}

/* Bouton fantôme sur fond plein, comme chez Loly. */
.karua-banniere-bouton {
  display: inline-block;
  padding: 0.85em 2em;
  border: 2px solid #fff;
  border-radius: var(--karua-radius-s);
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.karua-banniere-bouton:hover {
  background: #fff;
  color: var(--karua-terracotta);
}

/* Avec un visuel, le texte passe à gauche et la photo occupe la droite. */
.karua-banniere--illustree {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2rem;
  padding: 0 0 0 clamp(20px, 5vw, 3.2rem);
}
.karua-banniere--illustree .karua-banniere-texte { margin: 2.4rem 0; }
.karua-banniere-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  margin: 0;
}

@media (max-width: 760px) {
  .karua-banniere--illustree {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .karua-banniere--illustree .karua-banniere-texte {
    margin: 0;
    padding: 2rem 20px;
  }
  .karua-banniere-photo { order: -1; }
  .karua-banniere-photo img { min-height: 200px; max-height: 260px; }
}

/* --------------------------------------------------------------------------
   5. Blocs de contenu sans bordure
   Loly ne borde rien. On garde les fonds doux, on retire les traits.
   -------------------------------------------------------------------------- */
.karua-local {
  border: 0;
  border-radius: var(--karua-radius-s);
}
.karua-local--illustre { border-radius: var(--karua-radius-s); }
.karua-coaching { border-radius: var(--karua-radius-s); }

/* --------------------------------------------------------------------------
   6. Cartes produit
   Chez Loly, la carte se termine toujours par un bouton pleine largeur :
   c'est ce qui la rend actionnable sans ouvrir la fiche.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .button {
  width: 100%;
  margin-top: 0.7rem;
  border-radius: var(--karua-radius-s);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
}
.woocommerce ul.products li.product a img { border-radius: var(--karua-radius-s); }

/* Le badge passe à droite, comme sur les cartes de Loly. */
.karua-badge {
  left: auto;
  right: 10px;
  border-radius: 3px;
}

/* Les titres tiennent sur une ou deux lignes selon le produit : sans
   cela les boutons se décalent d'une carte à l'autre et la grille
   perd sa ligne de base. */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  position: relative;
}
.woocommerce ul.products li.product .price { margin-bottom: 0; }

/* Alignement des boutons d'une carte à l'autre.

   WooCommerce enveloppe l'image, le titre et le prix dans un même lien :
   le prix n'est donc pas un enfant direct de la carte, et une marge
   automatique posée dessus ne pousse rien. On rend ce lien flexible et on
   lui fait occuper la hauteur restante ; le prix se cale alors en bas, et
   le bouton, qui le suit, tombe à la même hauteur dans toutes les cartes.
   Sans cela, une carte avec un sous-titre descend son bouton plus bas que
   sa voisine, et la rangée paraît de travers. */
.woocommerce ul.products li.product { align-self: stretch; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.woocommerce ul.products li.product .price { margin-top: auto; }

/* Hauteur identique pour tous les boutons, quel que soit leur libellé :
   une ligne, jamais deux. */
.woocommerce ul.products li.product .button {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  white-space: nowrap;
}

/* Un titre sur trois lignes déséquilibre la rangée : deux suffisent. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products li.product .karua-sous-titre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WooCommerce repeint son mauve d'origine sur le bouton désactivé, avec
   une spécificité supérieure à celle de nos règles de base. On repasse
   par-dessus : un bouton en attente reste de la couleur de la marque. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce a.button.alt.disabled {
  background: var(--karua-terracotta);
  color: #fff;
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. Réassurances de la fiche produit
   Quatre arguments dans quatre boîtes bordées : la dernière tombait seule
   sur sa ligne et l'ensemble faisait gabarit. Deux colonnes, pas de
   bordures, un filet de couleur pour tenir le regard.
   -------------------------------------------------------------------------- */
.karua-reassurance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.6rem;
  margin: 1.5rem 0;
}
.karua-reassurance div {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--karua-terracotta);
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 0.85rem;
}

/* Sur téléphone on garde deux colonnes : empilées, les quatre
   réassurances repoussaient le reste de la fiche d'un demi-écran. */
@media (max-width: 480px) {
  .karua-reassurance { gap: 0.8rem 1rem; }
  .karua-reassurance div { padding-left: 0.6rem; }
}

/* --------------------------------------------------------------------------
   8. Barre de catégories
   Chez Loly elle court d'un bord à l'autre sur un fond clair, encadrée
   de deux filets. C'est ce qui la distingue d'une simple liste de liens.
   -------------------------------------------------------------------------- */
.karua-barre-cat {
  width: calc(100vw - var(--karua-barre));
  max-width: calc(100vw - var(--karua-barre));
  margin-left: calc(50% - (100vw - var(--karua-barre)) / 2);
  padding: 0.85rem 20px;
  background: var(--karua-creme);
  border-top: 1px solid var(--karua-line);
  border-bottom: 1px solid var(--karua-line);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Boutons génériques
   Plein pour l'action principale, contour pour l'alternative : c'est la
   paire que Loly utilise partout où deux choix se présentent.
   -------------------------------------------------------------------------- */
.karua-bouton,
.page-content a.karua-bouton {
  display: inline-block;
  padding: 0.8em 1.7em;
  border: 2px solid var(--karua-terracotta);
  border-radius: var(--karua-radius-s);
  background: var(--karua-terracotta);
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.karua-bouton:hover {
  background: var(--karua-terracotta-dark);
  border-color: var(--karua-terracotta-dark);
  color: #fff;
}
.karua-bouton--contour,
.page-content a.karua-bouton--contour {
  background: transparent;
  color: var(--karua-terracotta);
}
.karua-bouton--contour:hover {
  background: var(--karua-terracotta);
  border-color: var(--karua-terracotta);
  color: #fff;
}

/* Sur un fond de couleur : bouton blanc plein, comme le « Découvrir » du
   hero de Loly. Il garde sa largeur et ne se coupe pas en deux lignes. */
.karua-bouton--clair,
.page-content a.karua-bouton--clair {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff;
  border-color: #fff;
  color: var(--karua-vert-dark);
}
.karua-bouton--clair:hover,
.page-content a.karua-bouton--clair:hover {
  background: var(--karua-creme);
  border-color: var(--karua-creme);
  color: var(--karua-vert-dark);
}

@media (max-width: 600px) {
  .karua-coaching .karua-bouton--clair { width: 100%; }
}

/* --------------------------------------------------------------------------
   9. Pied de page
   Trois étages, comme chez Loly : la bande de promesses colorée, les
   colonnes sur fond blanc, la ligne légale.
   -------------------------------------------------------------------------- */
.karua-footer {
  margin-top: 4.5rem;
  background: var(--karua-surface);
  color: var(--karua-ink);
}

/* Bande de promesses : icône au-dessus, intitulé, précision. Tout est
   centré, sans pastille autour de l'icône. */
.karua-footer-reassurance {
  background: var(--karua-vert);
  color: #fff;
}
.karua-footer-reassurance-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.7rem 20px 1.8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 1rem;
}
.karua-promesse,
a.karua-promesse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.karua-promesse-icone {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  line-height: 0;
}
.karua-promesse-icone svg { width: 34px; height: 34px; stroke-width: 1.3; }
.karua-promesse-titre {
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}
.karua-promesse-texte {
  font-size: var(--karua-fs-sm);
  line-height: 1.4;
  color: #E3ECE2;
}
/* Seule la promesse d'aide porte un lien visible, comme chez Loly. */
.karua-promesse--lien .karua-promesse-texte {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.karua-promesse:hover .karua-promesse-titre { text-decoration: underline; text-underline-offset: 3px; }

/* Colonnes : trois listes de liens, puis « Restons en contact », plus
   large, qui porte l'invitation au Club. */
.karua-footer-corps {
  max-width: 1140px;
  margin: 0 auto;
  padding: 3rem 20px 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr);
  gap: 2rem 1.8rem;
  align-items: start;
}

.karua-footer-corps h3 {
  margin: 0 0 1rem;
  font-family: var(--karua-font-titre);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--karua-ink);
}

.karua-footer-colonne summary {
  list-style: none;
  cursor: default;
}
.karua-footer-colonne summary::-webkit-details-marker { display: none; }
.karua-footer-colonne summary::marker { content: ""; }

.karua-footer-liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.karua-footer-liens a {
  font-size: var(--karua-fs-sm);
  color: var(--karua-ink-2);
  text-decoration: none;
}
.karua-footer-liens a:hover {
  color: var(--karua-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.karua-footer-accroche {
  margin: 0 0 0.25rem;
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-base);
  font-weight: 700;
  color: var(--karua-terracotta);
}
.karua-footer-club {
  margin: 0 0 1rem;
  max-width: 40ch;
  font-size: var(--karua-fs-sm);
  line-height: 1.55;
  color: var(--karua-ink-2);
}
.karua-footer-bouton {
  display: inline-block;
  padding: 0.75em 1.6em;
  border-radius: var(--karua-radius-s);
  background: var(--karua-terracotta);
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.karua-footer-bouton:hover { background: var(--karua-terracotta-dark); color: #fff; }

.karua-footer-coord {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: var(--karua-fs-sm);
  color: var(--karua-ink-2);
}
.karua-footer-coord a {
  color: var(--karua-ink);
  font-weight: 600;
  text-decoration: none;
}
.karua-footer-coord a:hover { color: var(--karua-terracotta); }

.karua-reseaux {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.9rem;
}
.karua-reseaux a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--karua-ink);
  line-height: 0;
  text-decoration: none;
}
.karua-reseaux a:hover { color: var(--karua-terracotta); }
.karua-reseaux svg { width: 22px; height: 22px; }

/* La maison tient deux comptes Instagram : sans ce mot sous l'icône, on ne
   sait pas laquelle mène à quelle marque. */
.karua-reseau-nom {
  font-size: 0.66rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--karua-ink-3);
}
.karua-reseaux a:hover .karua-reseau-nom { color: var(--karua-terracotta); }

/* Ligne légale : une seule ligne, petite, comme chez Loly. */
.karua-footer-bas {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.1rem 20px 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  border-top: 1px solid var(--karua-line);
  font-size: var(--karua-fs-xs);
  color: var(--karua-ink-3);
}
.karua-footer-bas a {
  color: var(--karua-ink-3);
  text-decoration: none;
}
.karua-footer-bas a:hover { color: var(--karua-terracotta); text-decoration: underline; }

@media (max-width: 900px) {
  .karua-footer-corps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karua-footer-contact { grid-column: 1 / -1; }
}

/* En mobile : promesses en deux colonnes, liens en volets repliables,
   « Restons en contact » toujours ouvert en dessous. */
@media (max-width: 760px) {
  .karua-footer-reassurance-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 0.8rem;
  }

  .karua-footer-corps {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 1.2rem;
  }

  .karua-footer-colonne { border-bottom: 1px solid var(--karua-line); }
  .karua-footer-colonne summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0;
    cursor: pointer;
  }
  .karua-footer-colonne summary h3 { margin: 0; }
  .karua-footer-colonne summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--karua-ink);
  }
  .karua-footer-colonne[open] summary::after { content: "\2212"; }
  .karua-footer-colonne .karua-footer-liens { padding-bottom: 1.1rem; }

  .karua-footer-contact { padding-top: 1.8rem; }
}

/* --------------------------------------------------------------------------
   10. Page 404
   Le code en petit, en couleur ; la phrase en grand ; deux boutons.
   -------------------------------------------------------------------------- */
.karua-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5rem 20px 4rem;
}
.karua-404-code {
  font-family: var(--karua-font-titre);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--karua-terracotta);
}
.karua-404-titre {
  margin: 1rem 0 2rem;
  max-width: 22ch;
  font-family: var(--karua-font-titre);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--karua-ink);
}
.karua-404-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

@media (max-width: 600px) {
  .karua-404 { padding-block: 3.5rem 3rem; }
  .karua-404-boutons { flex-direction: column; align-items: center; }
}

/* ==========================================================================
   11. Fluidité sur mobile
   Ce que Loly fait au pouce et que Karua ne faisait pas : un menu en tiroir
   plein écran, des raccourcis par texture, des rangées de produits qu'on
   fait glisser, une fiche produit qui se règle en quelques touches et une
   barre d'achat qui suit le défilement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Les boutons gardent leurs couleurs
   Hello Elementor peint en rose (#c36) tout bouton survolé ou sélectionné.
   Sur téléphone, un bouton touché reste sélectionné : le burger et les « + »
   du menu s'affichaient dans un carré rose, étranger à la marque.
   -------------------------------------------------------------------------- */
.karua-burger:hover,
.karua-burger:focus,
.karua-sous-menu-bascule:hover,
.karua-sous-menu-bascule:focus,
.karua-diag-retour:hover,
.karua-diag-retour:focus,
.karua-diag-recommencer:hover,
.karua-diag-recommencer:focus {
  background-color: transparent;
}
.karua-sous-menu-bascule:hover,
.karua-sous-menu-bascule:focus { color: var(--karua-terracotta); }

button.karua-bouton:focus,
button.karua-hero-bouton:focus {
  background: var(--karua-terracotta);
  border-color: var(--karua-terracotta);
  color: #fff;
}
button.karua-bouton--contour:focus {
  background: transparent;
  color: var(--karua-terracotta);
}

/* --------------------------------------------------------------------------
   Menu en tiroir plein écran
   Le panneau descendait sous l'en-tête et laissait la page visible et
   défilable dessous. Il couvre maintenant tout l'écran sous la barre du
   logo, avec deux actions fixées en bas, comme chez Loly.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .karua-nav-mobile {
    position: fixed;
    top: 64px; /* remplacé à l'ouverture par la hauteur réelle */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: var(--karua-surface);
    border-top: 1px solid var(--karua-line);
  }
  .karua-nav-mobile[hidden] { display: none; }

  .karua-nav-mobile-defile {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem 20px 1rem;
  }

  .karua-menu-mobile > li > a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 60px;
    padding: 0.45rem 2.6rem 0.45rem 0;
  }
  .karua-menu-vignette {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: var(--karua-radius-s);
    object-fit: cover;
  }
  .karua-menu-mobile > li > .karua-sous-menu-bascule { top: 13px; }

  .karua-nav-mobile-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.8rem 20px calc(0.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--karua-line);
    background: var(--karua-surface);
  }
  .karua-nav-mobile-actions .karua-bouton { padding-inline: 0.5em; }
}

/* --------------------------------------------------------------------------
   Raccourcis par texture, collés sous l'en-tête (accueil, mobile)
   -------------------------------------------------------------------------- */
.karua-raccourcis { display: none; }

@media (max-width: 1023px) {
  .karua-raccourcis {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.6rem 20px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--karua-surface);
    border-top: 1px solid var(--karua-line);
  }
  .karua-raccourcis::-webkit-scrollbar { display: none; }
  .karua-raccourcis a {
    flex: 0 0 auto;
    color: var(--karua-ink);
    font-family: var(--karua-font-titre);
    font-size: var(--karua-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .karua-raccourcis a:hover,
  .karua-raccourcis a:focus { color: var(--karua-terracotta); }
}

/* --------------------------------------------------------------------------
   Rangées de produits qu'on fait glisser
   Sur l'accueil et sous la fiche produit, Loly ne pose pas ses produits en
   grille mais en rangée : deux cartes et le début d'une troisième, qui
   invite à glisser. Quatre produits tiennent sur une hauteur au lieu de
   deux. Le catalogue, lui, reste en grille.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .home .woocommerce ul.products.columns-4,
  .home .woocommerce ul.products.columns-3,
  .single-product section.related.products ul.products,
  .single-product section.upsells.products ul.products,
  .woocommerce-cart .cross-sells ul.products {
    /* En grille plutôt qu'en ligne flexible : une carte sans sous-titre
       refusait de s'étirer à la hauteur de ses voisines, et son bouton
       remontait de quelques pixels. En grille, l'étirement est garanti. */
    display: grid;
    /* WooCommerce pose un gabarit de colonnes pour sa grille : il écrase
       nos colonnes automatiques et écrase les premières cartes. */
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    align-items: stretch;
    gap: 0.8rem;
    /* La rangée va jusqu'au bord droit. 100vw compte la barre de
       défilement : on retranche sa largeur, sinon la page déborde de
       quelques pixels et glisse latéralement. */
    margin: 0 calc(50% - (100vw - var(--karua-barre)) / 2) 0 0;
    padding: 0 calc((100vw - var(--karua-barre)) / 2 - 50%) 0.3rem 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home .woocommerce ul.products::-webkit-scrollbar,
  .single-product section.related.products ul.products::-webkit-scrollbar,
  .single-product section.upsells.products ul.products::-webkit-scrollbar,
  .woocommerce-cart .cross-sells ul.products::-webkit-scrollbar { display: none; }

  .home .woocommerce ul.products li.product,
  .single-product section.related.products ul.products li.product,
  .single-product section.upsells.products ul.products li.product,
  .woocommerce-cart .cross-sells ul.products li.product {
    width: auto;
    margin: 0;
    scroll-snap-align: start;
  }

  /* Au doigt, la carte n'a pas à se soulever : il n'y a pas de survol. */
  .woocommerce ul.products li.product:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */

/* Un titre lisible plutôt qu'écrasant. */
.single-product .product_title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Les caractéristiques en simples lignes « Libellé : valeur », comme chez
   Loly, et non dans un cadre. */
.karua-apercu {
  gap: 0.4rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.karua-apercu > div {
  display: block;
  font-size: var(--karua-fs-sm);
  line-height: 1.5;
}
.karua-apercu b {
  color: var(--karua-ink);
  font-size: var(--karua-fs-sm);
}
.karua-apercu b::after { content: " : "; font-weight: 400; }

/* La référence interne n'aide pas à acheter. */
.single-product .product_meta .sku_wrapper { display: none; }

/* Points de fidélité : une ligne, comme le « +23 points de fidélité » de
   Loly, et pas un encadré. WPLoyalty pose ses styles en ligne, d'où les
   !important. Sur les cartes produit, le message disparaît : il les
   alourdissait sans aider à choisir. */
.single-product .summary .wlr-product-message {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--karua-vert) !important;
  font-size: var(--karua-fs-sm);
  font-weight: 600;
  line-height: 1.5 !important;
}
ul.products .wlr-product-message { display: none !important; }

/* Volets : de simples lignes séparées d'un filet, avec « + » à droite,
   comme les rubriques Description, Ingrédients, Conseils de Loly. */
.karua-volets { gap: 0; }
/* Sur grand écran, la photo et le résumé flottent côte à côte : les volets
   passent dessous et se centrent, comme les titres de section. */
.single-product .karua-volets {
  clear: both;
  margin: 3rem auto 0;
  padding-top: 1rem;
}
.karua-volet {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--karua-line);
  border-radius: 0;
}
.karua-volet:first-child { border-top: 1px solid var(--karua-line); }
.karua-volet > summary { padding: 1rem 0; }
.karua-volet > summary:hover { background: transparent; color: var(--karua-terracotta); }
.karua-volet > summary::after { color: var(--karua-ink); font-weight: 300; }
.karua-volet-corps { padding: 0 0 1.2rem; }

/* Sur grand écran, les volets deviennent des onglets, comme chez Loly :
   Description, Action et résultats, Liste d'ingrédients, Conseils. */
@media (min-width: 1024px) {
  .karua-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    margin: 0 0 1.3rem;
    border-bottom: 1px solid var(--karua-line);
  }
  .karua-onglet {
    margin: 0 0 -1px;
    padding: 0 0 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--karua-ink-3);
    font-family: var(--karua-font-titre);
    font-size: var(--karua-fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .karua-onglet:hover { color: var(--karua-ink); background: none; }
  .karua-onglet[aria-selected="true"] {
    color: var(--karua-terracotta);
    border-bottom-color: var(--karua-terracotta);
  }
  .karua-onglet:focus-visible { outline: 2px solid var(--karua-vert); outline-offset: 3px; }

  .karua-volets--onglets .karua-volet,
  .karua-volets--onglets .karua-volet:first-child { border: 0; }
  .karua-volets--onglets .karua-volet > summary { display: none; }
  .karua-volets--onglets .karua-volet:not(.karua-volet--actif) { display: none; }
  .karua-volets--onglets .karua-volet-corps { padding: 0 0 0.5rem; }
}

/* Avis : un seul onglet ne sert à rien, on l'efface. Le titre prend le
   style des autres titres de section, et le formulaire se déplie à la
   demande au lieu d'occuper un écran entier. */
.single-product .woocommerce-tabs ul.tabs { display: none; }
.single-product .woocommerce-tabs .panel { margin: 0; }
.single-product .woocommerce-Reviews-title,
.single-product section.related.products > h2,
.single-product section.upsells.products > h2,
.woocommerce-cart .cross-sells > h2 {
  margin: 3rem 0 1rem;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 600;
  text-align: center;
}
.single-product .woocommerce-noreviews { text-align: center; color: var(--karua-ink-2); }
.karua-avis-ouvrir { display: flex; justify-content: center; margin: 1rem 0 0.5rem; }
#review_form_wrapper[hidden] { display: none; }

/* Le tableau des variantes perdait sa mise en forme sous les zébrures du
   thème parent : un libellé, puis les boutons de contenance. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
  display: block;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
}
.single-product table.variations tbody > tr:nth-child(odd) > td,
.single-product table.variations tbody > tr:nth-child(odd) > th,
.single-product table.variations tbody tr:hover > td,
.single-product table.variations tbody tr:hover > th { background: none; }
.single-product table.variations { margin: 1.2rem 0 0.8rem; }
.single-product table.variations th.label { margin-bottom: 0.5rem; text-align: left; }
.single-product table.variations label {
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 700;
  color: var(--karua-ink);
}
.single-product .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--karua-fs-xs);
  color: var(--karua-ink-3);
}

/* Contenances : des boutons à toucher. */
.karua-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.karua-pastille,
.karua-pastille:hover,
.karua-pastille:focus {
  min-height: 44px;
  padding: 0.55em 1.1em;
  border: 1.5px solid var(--karua-line-2);
  border-radius: var(--karua-radius-s);
  background: #fff;
  color: var(--karua-ink);
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.karua-pastille:hover,
.karua-pastille:focus-visible { border-color: var(--karua-terracotta); }
.karua-pastille[aria-checked="true"],
.karua-pastille[aria-checked="true"]:hover,
.karua-pastille[aria-checked="true"]:focus {
  border-color: var(--karua-terracotta);
  background: var(--karua-terracotta);
  color: #fff;
}
.karua-pastille:disabled {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* La liste déroulante d'origine reste dans le formulaire, c'est elle qui
   est envoyée, mais elle ne doit plus rien occuper. WooCommerce lui impose
   un min-width de 75 % : sans le remettre à zéro, elle continue de mesurer
   plusieurs centaines de pixels et dépasse la largeur de l'écran. */
.karua-pastilles-source {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* Quantité et bouton sur une même ligne, le bouton prenant toute la
   place restante. */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
}
.single-product form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button) { flex: 1 1 100%; }
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 12rem;
  min-height: 50px;
  margin: 0;
  font-size: var(--karua-fs-base);
}

/* Le sélecteur de quantité, moins et plus de part et d'autre. */
.woocommerce .karua-quantite {
  display: inline-flex;
  align-items: stretch;
  float: none;
  margin: 0;
  border: 1.5px solid var(--karua-line-2);
  border-radius: var(--karua-radius-s);
  background: #fff;
  overflow: hidden;
}
.woocommerce .karua-quantite input.qty {
  width: 2.6em;
  min-height: 47px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce .karua-quantite input.qty::-webkit-inner-spin-button,
.woocommerce .karua-quantite input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.karua-quantite-pas,
.karua-quantite-pas:hover,
.karua-quantite-pas:focus {
  display: grid;
  place-items: center;
  width: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--karua-ink);
  cursor: pointer;
}
.karua-quantite-pas:hover,
.karua-quantite-pas:focus-visible { background: var(--karua-surface-2); }

/* Barre d'achat qui suit le défilement, sur téléphone. */
.karua-barre-achat { display: none; }

@media (max-width: 760px) {
  .karua-barre-achat {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 12px calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--karua-surface);
    border-top: 1px solid var(--karua-line);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .karua-barre-achat--visible {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }
  .karua-barre-achat-infos {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .karua-barre-achat-infos b,
  .karua-barre-achat-infos span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .karua-barre-achat-infos b {
    font-family: var(--karua-font-titre);
    font-size: var(--karua-fs-sm);
    color: var(--karua-ink);
  }
  .karua-barre-achat-infos span {
    font-size: var(--karua-fs-xs);
    font-weight: 600;
    color: var(--karua-terracotta);
  }
  .karua-barre-achat .karua-bouton {
    flex: 0 0 auto;
    min-height: 46px;
    padding-inline: 1.1em;
  }

  /* La barre ne doit pas masquer le bas de la page. */
  body.karua-avec-barre-achat { padding-bottom: 72px; }
}

/* Sur grand écran, Loly garde aussi le bouton d'achat sous la main, mais
   sous forme de carte posée en haut de la page plutôt que d'une barre en
   bas. Même contenu, même script : seule la position change. */
@media (min-width: 761px) {
  .karua-barre-achat {
    position: fixed;
    top: 84px;
    left: 50%;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(720px, calc(100% - 40px));
    padding: 0.6rem 0.7rem 0.6rem 1.1rem;
    background: var(--karua-surface);
    border: 1px solid var(--karua-line);
    border-radius: var(--karua-radius);
    box-shadow: 0 10px 30px rgba(36, 27, 24, 0.12);
    transform: translate(-50%, -160%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .karua-barre-achat--visible {
    transform: translate(-50%, 0);
    visibility: visible;
    transition: transform 0.25s ease;
  }
  .karua-barre-achat-infos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
  }
  .karua-barre-achat-infos b {
    font-family: var(--karua-font-titre);
    font-size: var(--karua-fs-base);
    color: var(--karua-ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .karua-barre-achat-infos span {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--karua-terracotta);
  }
  .karua-barre-achat .karua-bouton {
    flex: 0 0 auto;
    min-height: 46px;
    padding-inline: 1.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karua-barre-achat,
  .karua-barre-achat--visible { transition: none; }
}

/* --------------------------------------------------------------------------
   Panier
   Le panier se recalcule dès qu'une quantité change : le bouton « Mettre
   à jour le panier » n'a plus d'usage quand le script est actif. Sans
   script, il reste là.
   -------------------------------------------------------------------------- */
.karua-panier-auto .woocommerce-cart-form [name="update_cart"] { display: none !important; }

/* Les totaux en simples lignes, sans les zébrures du thème parent. */
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table tbody > tr:nth-child(odd) > td,
.woocommerce-cart .cart_totals table tbody > tr:nth-child(odd) > th {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--karua-line);
}
.woocommerce-cart .cart_totals table { border: 0; }

/* --------------------------------------------------------------------------
   Les fondateurs
   Une grande photo à gauche, le texte à droite, rien dans une boîte. Les
   photos d'appui forment une ligne sous le texte.
   -------------------------------------------------------------------------- */
.karua-fondateurs {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin: 3.5rem auto;
  max-width: var(--karua-maxw);
}
.karua-fondateurs-photo { margin: 0; }
.karua-fondateurs-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--karua-radius);
  background: var(--karua-surface-2);
}
.karua-fondateurs-texte h2 {
  margin: 0 0 0.9rem;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 600;
}
.karua-fondateurs-texte p { margin: 0 0 0.9rem; max-width: 56ch; }
.karua-fondateurs-appui {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.4rem;
  max-width: 420px;
}
.karua-fondateurs-appui img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--karua-radius-s);
}
.karua-fondateurs-action { margin: 1.4rem 0 0; }

/* Sur l'accueil, la photo passe à droite : le regard vient du texte, comme
   dans le bloc d'ancrage local juste au-dessus. */
.karua-fondateurs--inverse .karua-fondateurs-photo { order: 2; }
.karua-fondateurs--inverse .karua-fondateurs-texte { order: 1; }

@media (max-width: 860px) {
  .karua-fondateurs { grid-template-columns: 1fr; gap: 1.2rem; }
  .karua-fondateurs-photo img { aspect-ratio: 1 / 1; }
  .karua-fondateurs-appui { max-width: none; }

  /* En une colonne, la photo passe devant dans tous les cas. */
  .karua-fondateurs--inverse .karua-fondateurs-photo { order: 0; }
  .karua-fondateurs--inverse .karua-fondateurs-texte { order: 1; }
}

/* Texte de marque qui ferme l'accueil, comme le paragraphe de bas de page
   de Loly : discret, lisible, il dit ce que vend la maison. */
.karua-texte-pied {
  max-width: 72ch;
  margin: 3.5rem auto 1rem;
  color: var(--karua-ink-2);
}
.karua-texte-pied h2 {
  margin: 0 0 0.8rem;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
}
.karua-texte-pied p { margin: 0 0 0.9rem; font-size: var(--karua-fs-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Avis clients sur l'accueil
   Trois cartes sobres, la note en premier, le nom et le produit en pied.
   -------------------------------------------------------------------------- */
.karua-avis-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  max-width: var(--karua-maxw);
  margin-inline: auto;
}
.karua-avis-carte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem 1.3rem 1.3rem;
  background: var(--karua-surface);
  border-radius: var(--karua-radius);
}
.karua-avis-note {
  margin: 0;
  color: var(--karua-terracotta);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.karua-avis-texte { margin: 0; color: var(--karua-ink-2); }
.karua-avis-signature {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--karua-fs-sm);
}
.karua-avis-signature b { font-family: var(--karua-font-titre); color: var(--karua-ink); }
.karua-avis-signature a { color: var(--karua-ink-3); text-decoration: none; }
.karua-avis-signature a:hover { color: var(--karua-terracotta); }

/* --------------------------------------------------------------------------
   Questions fréquentes
   Des rubriques, et sous chacune des lignes qui se déplient : c'est la
   présentation de la FAQ de Loly.
   -------------------------------------------------------------------------- */
.karua-faq-titre {
  max-width: 68ch;
  margin: 2.6rem auto 0.9rem;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
}
.karua-faq { max-width: 68ch; margin-inline: auto; }
.karua-faq .karua-volet > summary { font-size: var(--karua-fs-base); font-weight: 600; }
.karua-faq .karua-volet-corps p { margin: 0 0 0.6rem; color: var(--karua-ink-2); }

/* --------------------------------------------------------------------------
   Compte client
   Rien dans une boîte bordée : deux colonnes posées sur le fond, des
   champs pleine largeur, et les boutons de la marque.
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
  max-width: 980px;
  margin-inline: auto;
}
/* En flex plutôt qu'en grille : WooCommerce place déjà ses colonnes, et
   deux systèmes de placement qui se superposent les envoyaient chacune
   dans un coin. */
.woocommerce-account .u-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.6rem, 5vw, 3.2rem);
}
/* WooCommerce fait flotter ses deux colonnes à 48 % : dans une grille,
   elles se retrouvent l'une sur l'autre. On reprend la main. */
.woocommerce-account .woocommerce .u-columns > div,
.woocommerce-account .woocommerce .u-columns .col-1,
.woocommerce-account .woocommerce .u-columns .col-2 {
  flex: 1 1 300px;
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
}
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
  margin: 0 0 1rem;
  color: var(--karua-terracotta);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.woocommerce-account form .form-row { padding: 0; margin: 0 0 1rem; }
.woocommerce-account form .form-row label { display: block; margin-bottom: 0.3rem; font-size: var(--karua-fs-sm); }
.woocommerce-account form .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; }
.woocommerce-account form input.input-text,
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  border: 1px solid var(--karua-line-2);
  border-radius: var(--karua-radius-s);
  background: #fff;
}
.woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: var(--karua-fs-sm);
  color: var(--karua-ink-2);
}
.woocommerce-account .woocommerce-LostPassword { margin: 0.6rem 0 0; font-size: var(--karua-fs-sm); }

/* Tableau de bord : la navigation devient une colonne de liens simples. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--karua-line);
  color: var(--karua-ink-2);
  font-family: var(--karua-font-titre);
  font-size: var(--karua-fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--karua-terracotta); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--karua-terracotta);
  border-bottom-color: var(--karua-terracotta);
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 24%;
    margin-right: 6%;
  }
  .woocommerce-account .woocommerce-MyAccount-content { float: left; width: 70%; }
}

/* --------------------------------------------------------------------------
   Recherche
   Comme chez Loly : le mot cherché reste dans un champ visible en haut de
   page, avec le nombre de résultats, puis la même grille que le catalogue.
   -------------------------------------------------------------------------- */
.karua-recherche-tete {
  max-width: 640px;
  margin: 2.4rem auto 2rem;
  text-align: center;
}
.karua-recherche-tete h1 {
  margin: 0 0 1.1rem;
  font-family: var(--karua-font-titre);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0;
}
.karua-recherche {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.karua-recherche input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--karua-line-2);
  border-radius: var(--karua-radius-s);
  background: #fff;
  font-family: var(--karua-font-corps);
  font-size: var(--karua-fs-base);
}
.karua-recherche input[type="search"]:focus-visible {
  outline: 2px solid var(--karua-vert);
  outline-offset: 1px;
}
.karua-recherche .karua-bouton { flex: 0 0 auto; }
.karua-recherche-tete .karua-entete-compteur { margin-top: 0.9rem; }
.karua-recherche-produits { margin-bottom: 1rem; }

@media (max-width: 480px) {
  .karua-recherche { flex-wrap: wrap; }
  .karua-recherche .karua-bouton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Bandeau d'ouverture de page
   Aucune page de Loly ne commence par un titre posé sur le fond : il y a
   toujours une bande pleine largeur, photo ou aplat, qui porte le titre.
   -------------------------------------------------------------------------- */
.karua-bandeau {
  position: relative;
  width: calc(100vw - var(--karua-barre));
  max-width: calc(100vw - var(--karua-barre));
  margin: 0 0 2.2rem calc(50% - (100vw - var(--karua-barre)) / 2);
  padding: clamp(2.2rem, 6vw, 4.2rem) 20px;
  background: var(--karua-terracotta);
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.karua-bandeau--photo {
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  padding-block: clamp(3.2rem, 9vw, 6rem);
}
.karua-bandeau--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(26, 20, 17, 0.25), rgba(26, 20, 17, 0.55));
}
.karua-bandeau-corps {
  max-width: var(--karua-maxw);
  margin: 0 auto;
}
.karua-bandeau h1 {
  margin: 0;
  color: #fff;
  font-family: var(--karua-font-titre);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 12px rgba(26, 20, 17, 0.25);
}
.karua-bandeau-sous-titre {
  margin: 0.7rem auto 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--karua-fs-base);
}

/* Fil d'Ariane : discret, en majuscules courtes. */
.karua-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
  font-size: var(--karua-fs-xs);
  color: rgba(255, 255, 255, 0.8);
}
.karua-fil a { color: inherit; text-decoration: none; }
.karua-fil a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.karua-fil i { font-style: normal; opacity: 0.6; }

.karua-fil--article {
  justify-content: flex-start;
  color: var(--karua-ink-3);
  margin: 0 0 1rem;
}
.karua-fil--article a { color: var(--karua-ink-2); }
.karua-fil--article a:hover { color: var(--karua-terracotta); }

/* --------------------------------------------------------------------------
   En-tête de catalogue
   Loly ouvre chaque collection sur une bande de couleur pleine largeur :
   la photo à gauche, le titre et la phrase à droite, alignés à gauche. La
   barre des familles vient juste dessous. Seule la couleur change ici.
   -------------------------------------------------------------------------- */
.karua-entete-catalogue--illustre {
  width: calc(100vw - var(--karua-barre));
  max-width: calc(100vw - var(--karua-barre));
  margin: 0 0 1.4rem calc(50% - (100vw - var(--karua-barre)) / 2);
  padding: 0;
  background: var(--karua-terracotta);
  color: #fff;
  text-align: left;
}
.karua-entete-catalogue--illustre .karua-entete-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  max-width: var(--karua-maxw);
  margin: 0 auto;
  padding: 0 20px;
}
.karua-entete-visuel { margin: 0; }
.karua-entete-visuel img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
}
.karua-entete-catalogue--illustre .karua-entete-texte { padding: 2rem 0; }
.karua-entete-catalogue--illustre h1 {
  color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 0.6rem;
}
.karua-entete-catalogue--illustre .karua-entete-accroche {
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
  margin: 0 0 0.7rem;
}
.karua-entete-catalogue--illustre .karua-entete-compteur { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 760px) {
  .karua-entete-catalogue--illustre .karua-entete-grille {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .karua-entete-visuel img { max-height: 210px; }
  .karua-entete-catalogue--illustre .karua-entete-texte { padding: 1.3rem 20px 1.6rem; }
}

/* Points gagnés et barre de livraison : du texte posé sur le fond, pas
   des encadrés. WPLoyalty écrit ses styles dans l'attribut « style », d'où
   les !important. */
.woocommerce div.wlr-message-info {
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--karua-vert) !important;
  font-size: var(--karua-fs-sm) !important;
  font-weight: 600 !important;
}
.woocommerce div.wlr-message-info > :first-child:not(p) {
  flex: 0 0 auto;
  width: 22px;
  height: auto;
  margin: 0 0.55rem 0 0 !important;
  font-size: 22px !important;
}
.karua-progression {
  margin: 0 0 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.karua-3x--panier,
.karua-3x--seuil {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Panier vide : une phrase et un bouton, centrés, sans l'encadré
   d'alerte que WooCommerce pose par défaut. */
.woocommerce-cart .wc-empty-cart-message .cart-empty {
  margin: 0;
  padding: 3.5rem 0 0.4rem;
  border: 0;
  background: none;
  color: var(--karua-ink);
  font-family: var(--karua-font-titre);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  text-align: center;
}
.woocommerce-cart .wc-empty-cart-message .cart-empty::before { display: none; }
.woocommerce-cart .return-to-shop { margin: 1.2rem 0 4rem; text-align: center; }
.woocommerce-cart .return-to-shop .button { padding: 0.95em 2em; }

/* Sur téléphone, chaque article devient une carte compacte : photo,
   nom, prix unitaire, quantité, total. WooCommerce l'éclatait en cinq
   lignes zébrées, sans photo : quatre articles prenaient un écran et
   demi. */
@media (max-width: 768px) {
  .woocommerce-cart table.cart { border: 0; }

  .woocommerce-cart table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas:
      "image nom retirer"
      "image prix prix"
      "image quantite total";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.3rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--karua-line);
  }
  .woocommerce-cart table.cart tr.cart_item td,
  .woocommerce-cart table.cart tbody > tr:nth-child(odd) > td,
  .woocommerce-cart table.cart.shop_table_responsive tr:nth-child(2n) td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left !important;
  }
  .woocommerce-cart table.cart tr.cart_item td::before { display: none; }

  .woocommerce-cart table.cart td.product-thumbnail {
    display: block !important;
    grid-area: image;
    align-self: start;
  }
  .woocommerce-cart table.cart td.product-thumbnail img {
    display: block;
    width: 76px;
    height: 95px;
    margin: 0;
    border-radius: var(--karua-radius-s);
    object-fit: cover;
    background: var(--karua-surface-2);
  }

  .woocommerce-cart table.cart td.product-name {
    grid-area: nom;
    font-family: var(--karua-font-titre);
    font-size: var(--karua-fs-sm);
    font-weight: 700;
    line-height: 1.3;
  }
  .woocommerce-cart table.cart td.product-name a {
    color: var(--karua-ink);
    text-decoration: none;
  }
  .woocommerce-cart table.cart td.product-name .variation { margin: 0.15rem 0 0; font-weight: 400; }

  .woocommerce-cart table.cart td.product-remove {
    grid-area: retirer;
    align-self: start;
  }
  .woocommerce-cart table.cart td.product-remove a.remove {
    color: var(--karua-ink-3) !important;
    font-size: 1.3rem;
    font-weight: 300;
  }
  .woocommerce-cart table.cart td.product-remove a.remove:hover {
    background: none;
    color: var(--karua-terracotta) !important;
  }

  .woocommerce-cart table.cart td.product-price {
    grid-area: prix;
    font-size: var(--karua-fs-xs);
    color: var(--karua-ink-3);
  }
  .woocommerce-cart table.cart td.product-quantity { grid-area: quantite; }
  .woocommerce-cart table.cart td.product-subtotal {
    grid-area: total;
    justify-self: end;
    font-weight: 700;
    text-align: right !important;
  }

  .woocommerce-cart #content table.cart td.actions {
    display: block;
    padding: 1rem 0 0;
    border: 0;
    background: none;
  }

  /* Totaux : libellé à gauche, montant à droite, collés aux bords comme
     les articles au-dessus. */
  .woocommerce-cart .cart_totals table.shop_table_responsive td { padding: 0.75rem 0; }
  .woocommerce-cart .cart_totals table.shop_table_responsive tr:nth-child(2n) td { background: none; }
}

/* Sur grand écran, le tableau reste un tableau, mais en lignes simples :
   ni cadre, ni zébrures, et une vraie photo du produit. */
@media (min-width: 769px) {
  .woocommerce-cart table.cart {
    border: 0;
    border-collapse: collapse;
  }
  .woocommerce-cart table.cart th,
  .woocommerce-cart table.cart td,
  .woocommerce-cart table.cart tbody > tr:nth-child(odd) > td,
  .woocommerce-cart table.cart tbody > tr:nth-child(odd) > th {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--karua-line);
  }
  .woocommerce-cart table.cart thead th {
    padding-bottom: 0.7rem;
    color: var(--karua-ink-3);
  }
  .woocommerce-cart table.cart td { padding: 1.1rem 0.75rem; }
  .woocommerce-cart table.cart td.product-thumbnail { width: 96px; }
  .woocommerce-cart #content table.cart td.product-thumbnail img,
  .woocommerce-cart table.cart td.product-thumbnail img {
    display: block;
    width: 76px;
    height: 95px;
    border-radius: var(--karua-radius-s);
    object-fit: cover;
    background: var(--karua-surface-2);
  }
  .woocommerce-cart table.cart td.product-name a {
    color: var(--karua-ink);
    font-family: var(--karua-font-titre);
    font-weight: 700;
    text-decoration: none;
  }
  .woocommerce-cart table.cart td.product-name a:hover { color: var(--karua-terracotta); }
  .woocommerce-cart table.cart td.product-remove a.remove {
    color: var(--karua-ink-3) !important;
    font-size: 1.3rem;
    font-weight: 300;
  }
  .woocommerce-cart table.cart td.product-remove a.remove:hover {
    background: none;
    color: var(--karua-terracotta) !important;
  }
  .woocommerce-cart table.cart td.product-subtotal { font-weight: 700; }
  .woocommerce-cart #content table.cart td.actions {
    padding: 1.2rem 0 0;
    border: 0;
  }
  .woocommerce-cart #content table.cart td.actions .coupon { max-width: 460px; }
}

/* Code promo : le champ et son bouton sur une ligne, sans chevauchement,
   à toutes les tailles d'écran. WooCommerce vise ici « #content »,
   l'identifiant de la zone principale : on reprend le même identifiant
   pour passer devant. Ses deux pseudo-éléments de dégagement deviendraient
   des éléments de la ligne, on les retire. */
.woocommerce-cart #content table.cart td.actions .coupon {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  float: none;
  padding: 0;
}
.woocommerce-cart #content table.cart td.actions .coupon::before,
.woocommerce-cart #content table.cart td.actions .coupon::after { display: none; }
.woocommerce-cart #content table.cart td.actions .coupon .input-text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 46px;
  margin: 0;
}
.woocommerce-cart #content table.cart td.actions .coupon .button {
  flex: 0 0 auto;
  width: auto;
  float: none;
  white-space: nowrap;
}