/* === Couleur principale DR-MX ======================= */
:root {
  --drmx-primary: #c63b2d;        /* rouge principal */
  --drmx-primary-dark: #a33024;   /* rouge foncé (hover) */
}

/* Liens généraux */
a,
.text-primary,
.page-link {
  color: var(--drmx-primary);
}

a:hover,
a:focus,
.text-primary:hover,
.page-link:hover {
  color: var(--drmx-primary-dark);
}

/* Boutons primaires (ajouter au panier, etc.) */
.btn-primary,
.btn-outline-primary,
.nav-pills .nav-link.active,
.nav-pills .nav-link.show,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
  background-color: var(--drmx-primary);
  border-color: var(--drmx-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--drmx-primary-dark);
  border-color: var(--drmx-primary-dark);
  color: #fff;
}

/* Éléments avec fond “primary” */
.bg-primary,
.card-primary,
.tag-primary,
.badge-primary,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.dropdown-item.active,
.dropdown-item.active:hover {
  background-color: var(--drmx-primary) !important;
  border-color: var(--drmx-primary) !important;
  color: #fff !important;
}

/* Liens type bouton (btn-link) */
.btn-link {
  color: var(--drmx-primary);
}
.btn-link:hover,
.btn-link:focus {
  color: var(--drmx-primary-dark);
}

/* Focus des champs de formulaire (contours bleus) */
.form-control:focus,
.search-widget form input[type="text"]:focus,
.block_newsletter form input[type="text"]:focus,
.input-group.focus {
  outline-color: var(--drmx-primary) !important;
  border-color: var(--drmx-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(198, 59, 45, 0.25);
}

/* Petits ronds / éléments sélectionnés en bleu */
.custom-radio input[type="radio"]:checked + span,
body#checkout section.checkout-step .address-item.selected {
  background-color: var(--drmx-primary);
  border-color: var(--drmx-primary);
}

/* Bordures type “sélection en bleu” */
body#checkout section.checkout-step .address-item.selected {
  border-color: var(--drmx-primary);
}

/* Footer : liens en rouge au survol */
.footer-container .links a:hover,
.footer-container .links a:focus {
  color: #ca392d !important;  /* rouge du logo */
}

/* Champ e-mail newsletter : bordure rouge au focus */
.block_newsletter input[type="email"]:focus,
.block_newsletter .form-control:focus {
  border-color: #ca392d !important;          /* rouge logo */
  box-shadow: 0 0 0 0.2rem rgba(202, 57, 45, 0.3) !important; /* halo rouge */
  outline: none;
}

/* Vignettes produit : contour rouge au lieu de bleu */
.product-images .thumb.selected,
.product-images .thumb:hover,
.js-qv-product-images .thumb-container .thumb.selected,
.js-qv-product-images .thumb-container .thumb:hover {
  border-color: #ca392d !important; /* rouge logo */
}

/* Onglets "Description / Détails du produit" en rouge */
.tabs .nav-tabs .nav-link {
  border-bottom: 2px solid transparent;
}

.tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:focus,
.tabs .nav-tabs .nav-link.active {
  color: #ca392d !important;              /* texte rouge */
  border-bottom-color: #ca392d !important; /* soulignement rouge */
}

/* Panier actif en rouge comme le logo */
#header .header-nav .cart-preview.active {
  background: #ca392d !important;
  border-color: #ca392d !important;
}

/* AU SURVOL : rouge un peu plus foncé */
#header .header-nav .cart-preview.active:hover {
  background: #b13328 !important;
  border-color: #b13328 !important;
}

/* Panier header : texte bien lisible quand il est actif / au survol */
#header .header-nav .cart-preview.active,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active .cart-products-count {
  color: #ffffff !important; /* texte "Panier (1)" en blanc */
}

/* Icône du caddie en blanc aussi */
#header .header-nav .cart-preview.active svg,
#header .header-nav .cart-preview.active i {
  fill: #ffffff !important;
  color: #ffffff !important;
}  /* <= bien fermer avec cette accolade */


/* Liens du bandeau haut : Contactez-nous / Connexion en rouge au survol */
#header .header-top a:hover,
#header .header-top a:focus,
#header .header-nav a:hover,
#header .header-nav a:focus {
  color: #ca392d !important;   /* rouge logo */
}

/* Couleur des liens au survol dans le panier */
.cart-grid a:hover {
  color: #ca392d !important;   /* rouge logo */
}

/* Lien "Continuer mes achats" dans le panier */
.cart-grid a.label,
.cart-grid a.label i {
  color: #232323; /* couleur normale du texte + icône */
}

/* Au survol : passer en rouge comme le logo */
.cart-grid a.label:hover,
.cart-grid a.label:hover i {
  color: #ca392d !important;
}

/* Flèches du slider home : survol en rouge */
#carousel .carousel-control:hover,
#carousel .carousel-control-prev:hover,
#carousel .carousel-control-next:hover {
  color: #ca392d !important;        /* couleur de l’icône */
  border-color: #ca392d !important; /* bordure du carré autour */
}

/* si l’icône est dans un <i> ou <span> à l'intérieur */
#carousel .carousel-control:hover i,
#carousel .carousel-control:hover span {
  color: #ca392d !important;
}

/* Boutons principaux (ex : "Continuer" dans le checkout) en rouge,
   même au clic / focus / active */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover {
  background-color: #ca392d !important;
  border-color: #ca392d !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* === Checkout : colonne récap à droite ===================== */

/* 1/ Prix en bleu -> couleur texte normale */
#js-checkout-summary .cart-summary-line .value,
#js-checkout-summary .cart-summary-products .product-price {
  color: #232323 !important;  /* même couleur que le texte normal */
}

/* 2/ Lien "afficher les détails" + nom du produit : couleur de base */
#js-checkout-summary a,
#js-checkout-summary .cart-summary-products .product-name a {
  color: #232323 !important;
}

/* 3/ Survol en rouge (lien produit, "afficher les détails", etc.) */
#js-checkout-summary a:hover,
#js-checkout-summary .cart-summary-products .product-name a:hover {
  color: #ca392d !important;
}

/* 4/ Petit chevron à côté de "afficher les détails" */
#js-checkout-summary .collapse-button,
#js-checkout-summary .collapse-button i,
#js-checkout-summary .collapse-button svg {
  color: #232323 !important;
  fill:  #232323 !important;
}

#js-checkout-summary .collapse-button:hover,
#js-checkout-summary .collapse-button:hover i,
#js-checkout-summary .collapse-button:hover svg {
  color: #ca392d !important;
  fill:  #ca392d !important;
}

/* Lien "conditions générales de vente" à l'étape de paiement */
#cta-terms-and-conditions-0,
#cta-terms-and-conditions-0:visited {
  color: #ca392d !important;   /* rouge normal */
}

/* Couleur au survol / focus / actif */
#cta-terms-and-conditions-0:hover,
#cta-terms-and-conditions-0:focus,
#cta-terms-and-conditions-0:active {
  color: #b13328 !important;   /* rouge un peu plus foncé */
  text-decoration: underline;  /* optionnel : petit soulignement au survol */
}

/* === Réparation des icônes Material Icons ==================== */
/* (shopping_cart, search, flèches du slider, etc.)              */

.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Désactiver le lien "Aperçu rapide" partout */
.product-miniature .quick-view,
.product-miniature .quick-view.js-quick-view {
  display: none !important;
}

/* Supprimer la barre blanche de l'ancien Aperçu rapide */
.product-miniature .highlighted-informations,
.product-miniature .highlighted-informations.no-variants {
  display: none !important;
}

/* ===== Quantité panier : mobile (flèches à droite bien centrées) ===== */
@media (max-width: 767.98px) {

  /* Le bloc TouchSpin reste sur une seule ligne */
  .bootstrap-touchspin {
    display: inline-flex;
    align-items: stretch;
    width: auto;
  }

  /* Champ quantité : ~2/3 de la largeur totale */
  .bootstrap-touchspin input.form-control,
  .bootstrap-touchspin input[type="text"],
  .bootstrap-touchspin input[type="number"] {
    order: 1;
    flex: 0 0 3.5rem;      /* largeur du champ quantité */
    max-width: 3.5rem;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Colonne des flèches à droite */
  .bootstrap-touchspin .input-group-btn-vertical {
    order: 2;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    position: static;      /* surtout pas en absolute */
  }

  /* Boutons haut / bas : même hauteur, icône centrée */
  .bootstrap-touchspin .input-group-btn-vertical .btn {
    flex: 1 1 50%;         /* 2 boutons = 2 x 50% de la hauteur */
    width: 2rem;           /* colonne un peu plus étroite que le champ */
    padding: 0;
    display: flex;
    align-items: center;   /* centre verticalement l’icône */
    justify-content: center; /* centre horizontalement l’icône */
    line-height: 1;
    border-radius: 0;
  }

  /* Optionnel : petite séparation visuelle entre les deux flèches */
  .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-bottom: 1px solid #ddd;
  }

  /* On évite que le bloc déborde dans la grille du panier */
  .cart-grid .bootstrap-touchspin,
  .cart-detailed-actions .bootstrap-touchspin {
    max-width: 5.5rem;     /* à ajuster si tu veux un peu plus large/étroit */
  }
}

/* 1) On cache toujours la ligne "TTC / frais de port..." sous le prix */
.product-prices .tax-shipping-delivery-label {
  display: none !important;
}

/* Mettre "TTC" à côté du prix final sur la fiche produit */

/* On met les éléments de prix sur une seule ligne */
.product-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25rem; /* petit espace entre le prix et TTC */
}

/* On s'assure que l'étiquette TTC est visible et en ligne */
.product-prices .tax-shipping-delivery-label {
  display: inline !important;
  margin-left: 0.25rem;
  font-size: 0.9em;      /* un peu plus petit que le prix */
  font-weight: 400;
}