/* ============================================================
   SITE V2 — étape 6 : fiche produit
   Chargée par _partials/site-v2.tpl (jamais sur le tunnel de commande).

   Portée : toutes les règles commencent par .product-detail, classe posée
   uniquement sur <section id="main"> de la fiche produit (gabarits
   appagebuilder « details »). Ni l'accueil, ni l'aperçu rapide (.quickview),
   ni le panier ne la portent : aucune fuite possible.
   Chaque règle reprend le sélecteur du thème (theme.css, sauf mention)
   avec cette classe en plus : spécificité supérieure d'une classe.

   Couleurs de l'accueil : crème #FBF7EF, sable #F3EADA, encre #332720,
   texte #6B5B4E, terracotta #B05315, terracotta texte #A1480F,
   terracotta foncé #8F4210, ligne #E2D6C2, bordure de contrôle #C0AC92
   (celle des boutons « fantôme » de l'accueil), cœur #C8322B.
   ============================================================ */


/* ---------- Galerie : vignettes et flèches ---------- */

/* Thème : bordure jaune #FFC600 sur la vignette choisie ou survolée */
.product-detail .product-thumb-images .thumb {
  border: 1px solid transparent;
  border-radius: 2px;
}

.product-detail .product-thumb-images .thumb.selected,
.product-detail .product-thumb-images .thumb:hover {
  border-color: #B05315;
}

/* Flèches de la photo seule (gabarits sans vignettes) : survol jaune → terracotta */
.product-detail .arrows-product-fake .slick-arrow:hover {
  color: #FFFFFF;
  background: #B05315;
}

/* Gabarits « vignettes à gauche / à droite » : flèches jaunes → terracotta */
.product-detail.product-thumbs-left .product-thumb-images .slick-arrow,
.product-detail.product-thumbs-right .product-thumb-images .slick-arrow {
  background: #B05315;
}

.product-detail.product-thumbs-left .product-thumb-images .slick-arrow:hover,
.product-detail.product-thumbs-right .product-thumb-images .slick-arrow:hover {
  background: #8F4210;
}

/* Bouton loupe sur la photo : ombre allégée */
.product-detail .product-cover .layer {
  color: #332720;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(51, 39, 32, 0.18);
}

/* ---------- Étiquettes sur la photo (« Promo ! », « -10 % », « Nouveau ») ----------
   Limitées à la grande photo : les cartes des carrousels du bas gardent les leurs
   (étape « listes »). Thème : « Promo ! » en texte jaune sans fond (illisible
   sur photo claire), remise sur fond jaune, nouveauté sur fond rose. */

.product-detail .product-cover .product-flags .product-flag {
  margin: 0 0 4px;
  padding: 5px 9px;
  border-radius: 2px;
  background: #B05315;
  color: #FFFFFF;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* custom.css passe la remise en 1rem : on garde la même taille que les autres */
.product-detail .product-cover .product-flags .product-flag.discount,
.product-detail .product-cover .product-flags .product-flag.on-sale {
  background: #B05315;
  color: #FFFFFF;
  font-size: 0.8125rem;
}

.product-detail .product-cover .product-flags .product-flag.new {
  background: #332720;
  color: #FBF7EF;
}

.product-detail .product-cover .product-flags .product-flag.online-only {
  background: #FBF7EF;
  color: #332720;
}


/* ---------- Prix ----------
   Choix : prix en Karla 700 couleur encre (14,5:1 sur blanc), comme les cartes
   « Nos produits phares » de l'accueil. Le terracotta reste réservé aux actions
   (bouton panier, liens) et au prix remisé, qui doit se distinguer :
   terracotta texte #A1480F (6,1:1 sur blanc). */

.product-detail .product-prices {
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  border-bottom-color: #E2D6C2;
}

/* Thème : .product-price jaune #FFC600, 1.125rem, graisse 400 */
.product-detail .product-prices .product-price {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Thème : 24px en police Bold pour le prix remisé ; même taille que le prix normal */
.product-detail .product-prices .current-price-value {
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: inherit;
  font-weight: 700;
}

/* Prix remisé (thème : orange #DB6C1C) */
.product-detail .product-prices .has-discount.product-price,
.product-detail .product-prices .has-discount p {
  color: #A1480F;
}

/* Pastille « Économiser 10 % » (thème : fond orange #DB6C1C) */
.product-detail .product-prices .has-discount .discount {
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 2px;
  background: #F3EADA;
  color: #A1480F;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}

/* Prix barré (thème : #acaaa6, 12px, 2,3:1 : trop pâle) */
.product-detail .product-discount {
  color: #6B5B4E;
}

.product-detail .product-discount .regular-price {
  color: #6B5B4E;
  font-size: 1rem;
  font-weight: 400;
}

/* « TTC » (thème : #878787) */
.product-detail .product-prices .tax-shipping-delivery-label {
  color: #6B5B4E;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}


/* ---------- Description courte, catégorie, partage ---------- */

.product-detail .product-information {
  color: #6B5B4E;
}

.product-detail .description-short {
  line-height: 1.6;
}

/* Gouttière entre la description courte et le cadre d'achat.
   À partir de 1200px, styles.css (appagebuilder) met .product-information en flex,
   deux colonnes de 50 % collées. column-gap n'agit qu'en flex : sous 1200px, où les
   deux blocs sont empilés, il est sans effet (pas de media query nécessaire) ;
   les deux colonnes se réduisent d'autant (flex-shrink). */
.product-detail .product-information {
  column-gap: 2.5rem;
}

.product-detail .product-information .products-accordion {
  min-width: 0;
}

/* « Catégories : Chien » (thème : libellé #999, 2,8:1, et lien gris) */
.product-detail .category-detail span {
  color: #6B5B4E;
}

.product-detail .category-detail a {
  color: #A1480F;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.product-detail .category-detail a:hover {
  color: #8F4210;
}

/* Partage : libellé lisible, icônes en encre (thème : couleurs des réseaux),
   zone tactile de 44px autour de chaque icône */
.product-detail .social-sharing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.product-detail .social-sharing span {
  margin-right: 4px;
  color: #6B5B4E;
}

.product-detail .social-sharing li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
}

.product-detail .social-sharing li[class]::before {
  color: #332720;
  transition: color 0.15s ease;
}

.product-detail .social-sharing li[class]:hover::before {
  color: #A1480F;
}

.product-detail .social-sharing li a:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: -2px;
}


/* ---------- Déclinaisons : pastilles rectangulaires ----------
   Thème : étiquettes blanches avec ombre, sélection = bordure gris foncé 2px.
   Le bouton radio du thème reste en place (transparent, posé sur toute la
   pastille) : le changement de déclinaison en JS n'est pas touché. */

.product-detail .product-actions .control-label {
  margin-bottom: 8px;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.product-detail .product-variants > .product-variants-item ul li {
  margin: 0 8px 8px 0;
}

.product-detail .product-variants .radio-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  min-height: 2.75rem;
  padding: 0 16px;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: none;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Thème : bordure 2px #414141 au survol et à la sélection */
.product-detail .product-variants .input-radio:hover + .radio-label {
  border: 1px solid #B05315;
  color: #A1480F;
}

.product-detail .product-variants .input-radio:checked + .radio-label {
  border: 1px solid #B05315;
  background: #B05315;
  color: #FFFFFF;
}

.product-detail .product-variants .input-radio:focus-visible + .radio-label,
.product-detail .product-variants .input-color:focus-visible + .color {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* Attributs couleur / texture : pastille de 44px, sélection = anneau terracotta */
.product-detail .product-variants > .product-variants-item .input-color {
  width: 2.75rem;
  height: 2.75rem;
}

.product-detail .product-variants > .product-variants-item .color {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  box-shadow: none;
}

.product-detail .product-variants .input-color:checked + .color,
.product-detail .product-variants .input-color:hover + .color {
  border: 1px solid #FFFFFF;
  box-shadow: 0 0 0 2px #B05315;
}

/* Liste déroulante de déclinaisons (thème : bordure #eaeaea, 40px de haut) */
.product-detail .product-variants > .product-variants-item select {
  height: 2.75rem;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background-color: #FFFFFF;
  color: #332720;
}


/* ---------- Réductions de volume (tableau) ---------- */

.product-detail .product-discounts > .product-discounts-title {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
}

.product-detail .product-discounts > .table-product-discounts {
  border-collapse: collapse;
}

.product-detail .product-discounts > .table-product-discounts thead tr th {
  padding: 8px 12px;
  border: 1px solid #E2D6C2;
  background: #F3EADA;
  color: #332720;
  font-weight: 700;
}

.product-detail .product-discounts > .table-product-discounts tbody tr,
.product-detail .product-discounts > .table-product-discounts tbody tr:nth-of-type(even) {
  background: #FFFFFF;
}

.product-detail .product-discounts > .table-product-discounts tbody tr td {
  padding: 8px 12px;
  border: 1px solid #E2D6C2;
  color: #6B5B4E;
}


/* ---------- Zone d'achat ----------
   Thème : cadre gris #F7F7F7, bordure #E5E5E5, rayon 10px.
   Le bouton « Ajouter au panier » est stylé par l'étape « boutons ». */

.product-detail .product-actions .product-add-to-cart {
  max-width: none;          /* mobile : toute la largeur (thème : 300px partout) */
  border: 1px solid #E2D6C2;
  border-radius: 4px;
  background-color: #FBF7EF;
}

@media (min-width: 768px) {
  .product-detail .product-actions .product-add-to-cart {
    max-width: 340px;       /* thème : 300px ; un peu plus pour loger favoris et comparer avec leur libellé */
  }
}

/* ---------- Quantité : [ − ] [ 1 ] [ + ] ----------
   Thème : flèches haut/bas empilées de 22 × 23px, à droite du champ.
   Ici les deux boutons de TouchSpin passent de part et d'autre du champ,
   44 × 44px chacun ; leur conteneur vertical est neutralisé (display: contents)
   pour que l'ordre visuel se règle en flex. Les boutons et leurs classes JS
   ne changent pas. */

.product-detail .product-quantity .qty {
  margin-bottom: 1.25rem;
}

/* Champ seul (avant le chargement du JS, ou sans JS) */
.product-detail .product-quantity #quantity_wanted {
  width: 4rem;
  height: 2.75rem;
  padding: 0 4px;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background-color: #FFFFFF;
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-detail .product-quantity #quantity_wanted::-webkit-inner-spin-button,
.product-detail .product-quantity #quantity_wanted::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Widget complet */
.product-detail .product-quantity .input-group.bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  border: 1px solid #C0AC92;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: none;
  vertical-align: middle;
}

.product-detail .product-quantity .bootstrap-touchspin:focus-within {
  border-color: #B05315;
  box-shadow: 0 0 0 1px #B05315;
}

.product-detail .product-quantity .bootstrap-touchspin #quantity_wanted {
  order: 2;
  float: none;
  width: 3.5rem;
  border: 0;
  border-radius: 0;
}

.product-detail .product-quantity .bootstrap-touchspin .input-group-btn-vertical {
  display: contents;
}

.product-detail .product-quantity .bootstrap-touchspin .btn-touchspin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 2.75rem;
  min-width: 0;
  height: 2.75rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #332720;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.product-detail .product-quantity .bootstrap-touchspin .bootstrap-touchspin-down { order: 1; }
.product-detail .product-quantity .bootstrap-touchspin .bootstrap-touchspin-up   { order: 3; }

.product-detail .product-quantity .bootstrap-touchspin .btn-touchspin:hover {
  background: #F3EADA;
  color: #A1480F;
}

.product-detail .product-quantity .bootstrap-touchspin .btn-touchspin:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: -2px;
}

/* Icônes : « + » et « − » (Material Icons « add » / « remove ») au lieu des chevrons */
.product-detail .product-quantity .bootstrap-touchspin .btn-touchspin i {
  position: static;
  font-size: 1.25rem;
  line-height: 1;
}

.product-detail .product-quantity .bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after {
  content: "\E145";
}

.product-detail .product-quantity .bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
  content: "\E15B";
}

/* ---------- Liste de souhaits / comparer (leofeature) ----------
   Même style que les cartes « Nos produits phares » de l'accueil
   (.home-v2__pick-tools, home-v2.css) : icône dans un rond crème bordé,
   cœur rouge #C8322B en contour (plein si le produit est dans la liste,
   classe .added posée par leofeature), comparer en terracotta ; au survol,
   le rond prend la couleur de l'icône et l'icône passe en blanc.
   Deux colonnes égales, libellé sous le rond : tient sur une ligne même dans la
   colonne étroite de 1200-1440px (le libellé à côté du rond passait sur deux lignes).
   Thème : texte et icônes noirs, survol jaune ; leofeature : fond bleu #2FB5D2 une fois ajouté. */

/* Filet au-dessus des deux liens : le thème le dimensionne par un padding fixe
   de 142px ; ici il va d'un bord à l'autre du cadre (padding du cadre : 30px). */
.product-detail .product-actions .product-add-to-cart .leo-compare-wishlist-button::after {
  left: -30px;
  right: -30px;
  width: auto;
  padding: 0;
  background-color: #E2D6C2;
}

.product-detail .product-actions .product-add-to-cart .leo-compare-wishlist-button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 8px;
}

/* Le lien entier reste la zone cliquable (44px de haut) ; fond, bordure et ombre
   du .btn / .btn-primary neutralisés dans tous les états */
.product-detail .product-actions .product-add-to-cart .wishlist a,
.product-detail .product-actions .product-add-to-cart .compare a,
.product-detail .product-actions .product-add-to-cart .wishlist a:hover,
.product-detail .product-actions .product-add-to-cart .compare a:hover,
.product-detail .product-actions .product-add-to-cart .wishlist a:focus,
.product-detail .product-actions .product-add-to-cart .compare a:focus,
.product-detail .product-actions .product-add-to-cart .wishlist a.added,
.product-detail .product-actions .product-add-to-cart .compare a.added {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 4px 2px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
}

.product-detail .product-actions .product-add-to-cart .leo-compare-wishlist-button [class*="-bt-content"] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Le rond */
.product-detail .product-actions .product-add-to-cart .leo-compare-wishlist-button i.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid #E2D6C2;
  border-radius: 50%;
  background: #FBF7EF;
  color: #A1480F;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-detail .product-actions .product-add-to-cart .wishlist i.material-icons {
  color: #C8322B;
}

/* Cœur en contour (Material Icons « favorite_border », U+E87E) tant que le produit n'est
   pas dans la liste, plein (« favorite », U+E87D) une fois ajouté : leofeature écrit
   toujours le cœur plein, son caractère est masqué et remplacé (comme sur l'accueil). */
.product-detail .product-actions .product-add-to-cart .wishlist i.material-icons {
  font-size: 0;
}

.product-detail .product-actions .product-add-to-cart .wishlist i.material-icons::before {
  content: "\e87e";
  font-size: 18px;
  line-height: 1;
}

.product-detail .product-actions .product-add-to-cart .wishlist a.added i.material-icons::before {
  content: "\e87d";
}

/* Survol / focus : rond plein, icône blanche */
.product-detail .product-actions .product-add-to-cart .wishlist a:is(:hover, :focus-visible) i.material-icons {
  border-color: #C8322B;
  background: #C8322B;
  color: #FFFFFF;
}

.product-detail .product-actions .product-add-to-cart .compare a:is(:hover, :focus-visible, .added) i.material-icons {
  border-color: #B05315;
  background: #B05315;
  color: #FFFFFF;
}

/* Libellés */
.product-detail .product-actions .product-add-to-cart .wishlist .name-btn-product,
.product-detail .product-actions .product-add-to-cart .compare .name-btn-product {
  color: #332720;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.product-detail .product-actions .product-add-to-cart .wishlist a:hover .name-btn-product {
  color: #C8322B;           /* 5:1 sur crème */
}

.product-detail .product-actions .product-add-to-cart .compare a:hover .name-btn-product {
  color: #A1480F;
}

.product-detail .product-actions .product-add-to-cart .wishlist a:focus-visible,
.product-detail .product-actions .product-add-to-cart .compare a:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* ---------- Disponibilité (thème : vert #4cbb6c et orange #ff9a52, < 3:1) ---------- */

.product-detail #product-availability .product-available {
  color: #3D6B35;
}

.product-detail #product-availability .product-unavailable,
.product-detail #product-availability .product-last-items {
  color: #A1480F;
}


/* ---------- Réassurance (blockreassurance) ----------
   Pictogramme à gauche, titre et texte à droite ; blocs côte à côte
   quand la place le permet (auto-fit, sans media query). */

.product-detail .blockreassurance_product {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 16px 20px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #E2D6C2;
}

.product-detail .blockreassurance_product > div:not(.clearfix) {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 12px;
  align-items: center;
}

.product-detail .blockreassurance_product > .clearfix {
  display: none;
}

.product-detail .blockreassurance_product .item-product {
  grid-row: 1 / span 2;
  float: none;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  overflow: hidden;   /* masque l'espace insécable qui suit le pictogramme */
}

.product-detail .blockreassurance_product .item-product img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

/* !important : bat la couleur noire posée en style en ligne par le module (style="color:#000000") */
.product-detail .blockreassurance_product .block-title {
  color: #332720 !important;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

/* !important : idem, style en ligne du module */
.product-detail .blockreassurance_product p {
  margin: 0;
  color: #6B5B4E !important;
  font-size: 0.875rem;
  line-height: 1.4;
}


/* ---------- Onglets Description / Ingrédients / Avis ----------
   Thème : bande grise #F6F6F6 pleine largeur, filet jaune 3px au-dessus de
   l'onglet actif, texte jaune au survol, 60px de marge de chaque côté. */

.product-detail .product-tabs.tabs .nav-tabs {
  border-bottom: 1px solid #E2D6C2;
}

.product-detail .product-tabs.tabs .nav-tabs::before {
  content: none;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-item {
  margin: 0 24px -1px 0;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-link,
.product-detail .product-tabs.tabs .nav-tabs .nav-link:hover,
.product-detail .product-tabs.tabs .nav-tabs .nav-link.active {
  padding: 12px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  font-size: 0.9375rem;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-link {
  color: #6B5B4E;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-link:hover {
  color: #A1480F;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-link.active {
  border-bottom-color: #B05315;
  color: #332720;
}

.product-detail .product-tabs.tabs .nav-tabs .nav-link:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

/* Contenu des onglets (thème : #666, graisse 300) */
.product-detail .product-tabs .tab-pane {
  padding-top: 1.75rem;
}

.product-detail .product-description {
  color: #6B5B4E;
  font-weight: 400;
  line-height: 1.7;
}

/* Fiche technique : bandes sable / crème au lieu du gris */
.product-detail .product-features > p.h6 {
  margin-bottom: 12px;
  color: #332720;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  font-weight: 500;
}

.product-detail .product-features > dl.data-sheet dd.value,
.product-detail .product-features > dl.data-sheet dt.name {
  padding: 10px 12px;
  background: #F3EADA;
  line-height: 1.5;
}

.product-detail .product-features > dl.data-sheet dd.value:nth-of-type(even),
.product-detail .product-features > dl.data-sheet dt.name:nth-of-type(even) {
  background: #FBF7EF;
}

.product-detail .product-features > dl.data-sheet dt.name {
  color: #332720;
  font-weight: 700;
}

.product-detail .product-features > dl.data-sheet dd.value {
  color: #6B5B4E;
}

.product-detail #product-details .label {
  color: #332720;
}


/* ---------- Mouvement réduit : pas de transitions ---------- */

@media (prefers-reduced-motion: reduce) {
  .product-detail .product-variants .radio-label,
  .product-detail .product-quantity .bootstrap-touchspin .btn-touchspin,
  .product-detail .product-tabs.tabs .nav-tabs .nav-link,
  .product-detail .social-sharing li[class]::before,
  .product-detail .product-actions .product-add-to-cart .leo-compare-wishlist-button i.material-icons {
    transition: none;
  }
}

/* ---------- Bandeau du fil d'Ariane (fiches des rayons Chat et Chien) ---------- */

/* Hors .product-detail : le bandeau est au-dessus de <section id="main">. Classe posée
   uniquement sur les fiches produits par _partials/breadcrumb.tpl ($hv2_bandeau_bas,
   _partials/bandeau-v2.tpl) : aucune fuite possible.
   Thème : photo du thème (beagle), 452 px, en style en ligne → !important ; masqué
   jusqu'à 768 px par custom.css (inchangé). Ici : photo du rayon, bande basse qui suit
   la largeur (≈ 288 px à 1440 px), voile brun léger pour le fil d'Ariane. */
.breadcrumb-bg.hv2-bandeau-bas {
  min-height: clamp(240px, 20vw, 360px) !important;
  background-position: var(--hv2-pos) !important;
  box-shadow: inset 0 0 0 100vmax rgba(31, 24, 19, 0.35);
}

#wrapper .breadcrumb-bg.hv2-bandeau-bas .breadcrumb li,
#wrapper .breadcrumb-bg.hv2-bandeau-bas .breadcrumb li a,
#wrapper .breadcrumb-bg.hv2-bandeau-bas .breadcrumb li::after {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}