/* test checkout */

body#checkout .js-input-column .custom-checkbox span{
position: static;
}

#checkout-payment-step [id$="-container"].ps-wallet-selected {
  margin-bottom: 4.5rem !important;
}

/* Repère commun (contient options + sections ps_checkout) */
#checkout-payment-step .content {
  position: relative;
  overflow: visible;
}

/* Tous les wallets ps_checkout dockables */
#checkout-payment-step [id^="ps_checkout-"][id$="-buttons-container"]{
  position: absolute;
  top: var(--dock-top, -99999px);
  left: var(--dock-left, 0px);
  width: var(--dock-width, 100%);
  z-index: 50;
}

#checkout #checkout-payment-step .content{
  display: flex;
  flex-direction: column;
}

#checkout #checkout-payment-step .content #conditions-to-approve{
  order: -1;
  padding-top: 0;
}

#checkout #checkout-payment-step .content .payment-option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #7a7a7a60;
  padding: 5px;
  min-height: 52px;  
}

#checkout #checkout-payment-step .content .payment-option label{
  margin-bottom: 0;
  text-align: center;
  width: 100%;
} 

/* === 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,
.block-categories .material-icons:hover,
.block-categories .material-icons:focus,
a.img:hover,
a.img:focus {
  color: var(--drmx-primary-dark) !important;
}

#subcategories ul li:hover .subcategory-image a {
  border-color: var(--drmx-primary-dark) !important;
}


/* 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 !important;
}

/* É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 {
  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-top .cart-preview.active {
  background: #ca392d !important;
  border-color: #ca392d !important;
  padding: 5px;
  border-radius: 5px;
}

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

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

/* Icône du caddie en blanc aussi */
#header .header-top .cart-preview.active svg,
#header .header-top .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-top a:hover,
#header .header-top 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;
}

/* Corréction de couleurs fiche produit */

.footer-container .container .text-sm-center {
  display: none;
}

.product-flags li.product-flag {
  background:#c63b2d;
}

#product-availability.js-product-availability {
  color: #000;
}

#product-availability.js-product-availability .material-icons {
  color: limegreen !important;
}

#product-availability .product-unavailable .material-icons,
#product-availability .product-last-items .material-icons{
   display: flex;
}

.product-price
{
  color: #c63b2d;
}

.product-prices .tax-shipping-delivery-label {
  display: none !important;
}

#blockcart-modal .product-name {
   color: #c63b2d;
}

body#checkout a:hover{
  color: #c63b2d;
}

/* Panier */
  .product-line-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .product-line-grid-right.product-line-actions.col-md-5.col-xs-12 .row {
    display: flex;
    gap: 0px;
    flex-direction: row;
  }

  .product-line-grid-right.product-line-actions.col-md-5.col-xs-12 .row div{
    padding: 0;
  }

  .product-line-grid-right.product-line-actions .row .col-md-10.col-xs-6 .row{
    display: flex;
    gap: 5px !important;
    flex-direction: row;
  }

  .card-block.checkout a:focus,
  .card-block.checkout a:hover {
    color: #FFFFFF !important;
  }





  @media (max-width: 767px){
      .bootstrap-touchspin .input-group-btn-vertical i {
        position: static;
      }      
  }
  
  @media (max-width: 425px){

    
    .product-add-to-cart.js-product-add-to-cart .product-quantity{
        width: 100%;
        gap: 5px;
        margin-bottom: 5px;
      }

      .product-add-to-cart.js-product-add-to-cart .product-quantity div{
        margin: 0%;
      }

      .product-add-to-cart.js-product-add-to-cart .product-quantity .add .btn {
        font-size: 14px;
        padding: 10px;
      }
  }
  

/* Panier product availability */

.cart-line-availability .material-icons {
  color: limegreen !important;
}

.cart-line-availability .cart-stock{
  display: none;
}

.cart-line-availability {
  color: #000;
  font-size: .7rem;
  font-weight: 700;
}

/* mignature product availability */


.product-miniature.js-product-miniature .product-description{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-miniature.js-product-miniature  .product-list-availability .material-icons {
  color: limegreen !important;
}

.product-miniature.js-product-miniature .product-list-availability {
  color: #000;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
}

/* Réassurance  */

.blockreassurance_product {
    padding: 10px;
    background-color: #FFFFFF;
    border-top: solid 1px #a33024;
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.blockreassurance_product div{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blockreassurance_product .clearfix{
  display: none;
}

.blockreassurance_product .item-product {
  padding: 0;
  margin: 0;
}

.blockreassurance_product .item-product #Shape {
  fill: #a33024 !important;
}

.blockreassurance_product .block-title {
  text-align: center;
}

.blockreassurance_product p {
  font-weight: 600;
  margin-bottom: 0;
  color: #7a7a7a !important;
  text-align: center;
  font-size: 0.7rem;
}

@media (max-width: 768px){
  .blockreassurance_product p {
    font-size: 0.6rem;
  }
}

/* Footer */

#footer,
.footer-container{
  padding-top: 2%;
}


@media (min-width: 767px) {


.footer-container .container{
  padding: 0%;
}

.footer-container .container .row{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 0%;
  gap: 5px;
}

.footer-container .container .col-md-6,
.footer-container .container .col-md-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
}

.footer-container .container .col-md-6 .title {
  display: flex;
  flex-wrap: wrap;
  
}

.footer-container .container .col-md-6 .row .collapse,
.footer-container .container .col-md-3 .collapse{
  flex-direction: column;
}

.footer-container > .container > .row > div:not(.modal) {
  padding: 0%;
}

}

.page-content.page-cms ul, p {
  color: inherit;
}
.footer-container .container .elementor-social-icon:hover{
  color: #c63b2d !important;
}

/* Carrousel produit */

.elementor-widget-product-carousel .product-miniature,
.elementor-widget-product-carousel .thumbnail-container{
  height: 100%;
}
.elementor-widget-product-carousel .product-description{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.elementor-widget-product-carousel .product-title{
  line-height: 1.25;
  min-height: 3.75em; 
  text-align: center;
}
.elementor-widget-product-carousel .product-title a{
  align-self: center;
}
.elementor-widget-product-carousel .product-price-and-shipping{
  margin-top: auto;
}

.elementor-1020101 .elementor-element .elementor-swiper-button,
.elementor-4020101 .elementor-element .elementor-swiper-button  {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.elementor-1020101 .elementor-element .elementor-swiper-button:hover,
.elementor-4020101 .elementor-element .elementor-swiper-button:hover {
  color: #c63b2d;
}

/* Catalogue */


#product-list-header .block-category.card.card-block{
  min-height: 0;
  margin-bottom: 10px;
}

.product-miniature.js-product-miniature{
  position: relative;
}

.product-miniature.js-product-miniature .product-miniature__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-miniature .quick-view,
.product-miniature .variant-links,
.product-miniature .highlighted-informations,
.product-miniature .product-thumbnail,
.product-miniature .product-title a {
  position: relative;
  z-index: 2;
}

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 .product-miniature .thumbnail-container{
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    height: 20rem;
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 
  .product-miniature .thumbnail-container .product-description{
    height: 50%;
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 
  .product-miniature .thumbnail-container .product-description .product-list-availability {
    margin-top: auto;
  }
  


@media (max-width: 767px){

  #products .products.row {
    justify-content: flex-start;
    padding-left: 15px;
    padding-right: 15px;
    gap: 5px;
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4{
    width: 49%;
    padding: 0;    
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 .product-miniature .thumbnail-container{
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    height: 20rem;
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 
  .product-miniature .thumbnail-container .product-description{
    height: 50%;
  }

  #products .products.row .js-product.product.col-xs-12.col-sm-6.col-xl-4 
  .product-miniature .thumbnail-container .product-description .product-list-availability {
    margin-top: auto;
  }
  
}

/* Filter catalogue */ 

#PM_ASBlock_1 .card-header {
  display: flex;
  background-color: #a33024;
  color: #ffffff;
  font-size: 1rem !important;
  font-weight: 700;
}

@media (max-width: 767px){
  .row.sort-by-row{
    display: none;
  }

  #category #left-column,
  #module-ukooparts-category #left-column {
    display: flex;
    position: fixed;
    justify-content: space-evenly;
    align-items: flex-start;
    background-color: #ffffff;
    border-top: solid 1px #a33024;
    padding: 5px;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;   
  }

  #category #left-column .block.block-sort-order,
  #module-ukooparts-category #left-column .block.block-sort-order,
  #left-column #PM_ASBlockOutput_1
  {
    width: 49%;
  }

  #left-column #PM_ASBlockOutput_1{
    order: 2;
  }

  .block.block-sort-order .products-sort-order {
    padding: 0;
  }

  .block.block-sort-order .products-sort-order .dropdown-menu{
    width: auto;
  }


  .block.block-sort-order .products-sort-order.dropdown { 
    position: relative; 
  }

  .block.block-sort-order .products-sort-order.dropdown.open > .dropdown-menu{
    top: auto !important;
    bottom: 100% !important;     
    margin-top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;  
    z-index: 9999;
  }


  #PM_ASBlock_1{
    background-color: #FFFFFF;
    margin-bottom: 0%;
  }

  #PM_ASBlock_1 .card-block{
    padding: 5px;
    border-top: solid 1px #a33024;
    position: fixed;
    z-index: 1000;
    bottom: 55px;
    left: 0;
    right: 0;
    background-color: #ffffff;
  }
}

@media (min-width: 767px){
   #left-column .block.block-sort-order{
    display: none;
   }
}

/* Blockcart-modal */ 
@media (max-width: 767px){
    #blockcart-modal .product-image{
      max-width: 9rem;
  }
    #blockcart-modal .modal-body .row .row{
      display: flex;
    }
}

/* TABS */

@media (min-width: 767px){

  #product #productAccordion {
    display : none;
  }
}

#productAccordion {
  width: 100%;
}

#productAccordion .card{
  margin-bottom: 0;
}

#productAccordion .card .card-header {
  background-color: #FFFFFF;
  padding: 1rem;
}

#productAccordion .card .card-header .btn:focus{
  color: #c63b2d;
  text-decoration: none;
  outline: none;
}


#productAccordion .card .card-header .btn::after{
  content: "+";
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  color: #c63b2d;
  padding-left: 15px;
  bottom: 15%;
}

#productAccordion .card .card-header .btn:not(.collapsed),
#productAccordion .card:has(.in) .btn{
  border-bottom: solid 3px #c63b2d;
}

#productAccordion .card .card-header .btn:not(.collapsed)::after,
#productAccordion .card:has(.in) .btn::after {
  content: "-";
}

#productAccordion .card .card-header .btn{
  width : 100%;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
}

#productAccordion .card .card-body{
  padding: 15px;
  background-color: #FFFFFF;
}

#productAccordion .card .card-body .fade{
  opacity: 1;
}

#productAccordion .card .card-body p {
  width: fit-content !important;
}



.row.product-container.js-product-container .col-md-6 #product-description-short-5 p {
  width: 100% !important;
}

.row.product-container.js-product-container .col-md-6{
  margin-bottom: 1rem;
}

.row.product-container .tabs{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
}

.row.product-container .tabs .nav.nav-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


@media (max-width: 767px){

  #product .tabs {
    display : none;
  }


  .product-container .tabs .nav.nav-tabs{
    justify-content: center;
    flex-direction: column;
  }
  .product-container .tabs .nav.nav-tabs .nav-item{
    text-align: center;
  }
}


.tab-content .product-description{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.tab-content .product-description p,
.tab-content .product-description ul,
.tab-content .product-description li{
  width: fit-content !important;
}




/* connexion */ 

#authentication #blockEmailSubscription_displayFooterBefore{
  display: none;
}

#header  #_desktop_user_info .account{
  display: flex;
  align-items: center;
  gap: 5px;
}

#header #_desktop_user_info .logout {
  display: none;
}

#header #_desktop_user_info .account .material-icons{
  display: inline-block !important;
}

#header #_desktop_user_info .account span{
  text-align: center;
}


/* checkout */


#checkout #checkout-payment-step .content{
  display: flex;
  flex-direction: column;
}


#checkout #checkout-payment-step .content #conditions-to-approve{
  order: -1;
  padding-top: 0;
}


#checkout #checkout-payment-step .content .payment-option{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #7a7a7a60;
  padding: 5px;
  min-height: 52px;  
}


#checkout #checkout-payment-step .content .payment-option label{
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}


#checkout .js-address-form .form-fields .form-group.row .form-control-comment{
  display: none;
}


/* catalog subcategories */

#subcategories .subcategories-list {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0;
  gap: 5px;
}


#subcategories .subcategories-list li {
  margin: 0 !important;
  width: 24%;
  min-width: 0;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, .06);
}

#subcategories ul li:hover .subcategory-image a{
  padding: 0;
  border: solid 1px;
}

#subcategories .subcategories-list li H5{
  margin: 0;
  padding: 5px;
}

#subcategories .subcategories-list li .subcategory-name{
  font-size: 14px;
  position: relative;
  width: 100%;
}

#subcategories .subcategories-list li .subcategory-name::after{
  content: "›";
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  color: #c63b2d;
  padding-left: 5px;
  bottom: 0;
}

#subcategories .subcategories-list li .subcategory-image{
  object-fit: contain;
  padding: 0;
}

#subcategories .subcategories-list li .subcategory-image a{
  padding: 0;
}

@media (max-width: 1023px){
  #subcategories .subcategories-list li .subcategory-name{
  font-size: 8px;
  }

  #subcategories .subcategories-list li .subcategory-name::after{
    font-size: 10px;
  }
}


@media (max-width: 767px){

#subcategories .subcategories-list {
  justify-content: space-evenly;
}

#subcategories .subcategories-list li H5{
  margin: 0;
  padding: 5px;
}


#subcategories .subcategories-list li .subcategory-name{
  font-size: 14px;
  position: relative;
  width: 100%;
}

#subcategories .subcategories-list li .subcategory-name::after{
  content: "›";
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  color: #c63b2d;
  padding-left: 2px;
}

#subcategories .subcategories-list li{
  width: 45%;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, .06);
}
}

/* Returns */

#module-advancedreturns-create #main .text-primary{
  color: #c63b2d !important;
}

#module-advancedreturns-create .address-selector .address-item.selected{
  border-color: #c63b2d;
}

#module-advancedreturns-returns #main .advancedreturns-bottom .text-center .btn-primary{
  display: none;
}


/* bouton panier */

.mobile-cart-checkout { display: none; }

@media (max-width: 767px) {
  .mobile-cart-checkout {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 6px 12px;
    background: #fff;
    box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  }

  .mobile-cart-checkout__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px;
    font-weight: 700;
  }

  .mobile-cart-checkout__price{
    white-space: nowrap;
  }

  body#cart {
    padding-bottom: 90px;
  }
}


/* ==========================================================
   ETS MegaMenu (ets_megamenu) – FIX MOBILE
   - Supprime le texte "Menu" à côté du burger
   - Force l’affichage du panneau quand <ul> a .active
   ========================================================== */


@media (min-width: 992px){
  .ets_mm_block a{
    color: #ffffff !important;
  }
}

.ets_mm_block a:active,
.ets_mm_block a:focus, 
.ets_mm_block a:hover {
  color: var(--drmx-primary) !important;
}

.ets_mm_block a:visited {
  color: #444444;
}


.ets_mm_block.mm_block_type_image {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 5px;
}


@media (max-width: 767px) {

    #header .header-nav .material-icons:hover{
      color: #c63b2d;
    }

    #header .header-nav .cart-preview.active {
      background: #c63b2d;
    }

    .ets_mm_block.mm_block_type_image {
      align-items: baseline;
      text-align: left;
    }

    .ets_mm_block > .h4 {
      font-weight: 400 !important;
    }


    .mm_blocks_li {
      margin-bottom: 0;
    }

    #header{
      position : fixed;
      width: 100%;
    }

    #header .header-top {
      padding: 0.8rem;
    }

    #wrapper{
      padding-top: 8rem;
    }

    #cart #wrapper{
      padding-top: 8rem;
    }

    #checkout #wrapper{
      padding-top: 7rem;
    }

    #search_widget{
      margin-bottom: 0;
    }

    .ets_mm_megamenu.scroll_heading{
    margin-top: 10px !important;
    padding: 0 15px !important;
    }

    /* Items avec sous-menu */
  .ets_mm_megamenu .mm_has_sub .h4 {
    position: relative;
    padding-right: 32px; /* place pour la flèche */
    width: 100%;
  }

  .ets_mm_megamenu .mm_has_sub .h4::after {
    content: "›";
    position: absolute;
    right: 12px;
    bottom: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    color: #000;
    align-self: center;
  }

  .ets_mm_block.mm_block_type_image .mm_img_content img{
    display: none;
  }

  #header .top-logo{
    justify-content: flex-end;
  }

  /* 1) Cache le burger du thème (si encore visible) */
  #menu-icon { display: none !important; }

  /* 2) Place le bouton ETS en haut à gauche */
  .ets_mm_megamenu{
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000000 !important;
    width: 10% !important;
  }

  .ets_mm_megamenu .container{
    background-color: rgba(255, 250, 240, 0);
  }

  /* 3) IMPORTANT: enlever le texte brut "Menu" */
  .ets_mm_megamenu .ybc-menu-toggle{
    font-size: 0 !important;      /* tue le texte "Menu" */
    line-height: 0 !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* On ré-affiche l’icône interne (les 3 barres du module) */
  .ets_mm_megamenu .ybc-menu-toggle .ybc-menu-button-toggle-icon{
    display: inline-block !important;
    font-size: 0 !important; /* on garde l’icône, pas le texte */
    line-height: 0 !important;
  }

  /* 4) Le panneau: on le fixe en off-canvas et on le FORCE visible en mobile */
  .ets_mm_megamenu ul.mm_menus_ul{
    display: block !important;          /* bat les display:none mobile du module */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    /*
    width: 86vw !important;
    max-width: 360px !important;
    */
    height: 100vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 999999 !important;

    transform: translateX(-110%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: transform .25s ease, opacity .25s ease !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 5) OUVERT: ton UL prend la classe "active" -> on l'affiche */
  .ets_mm_megamenu ul.mm_menus_ul.active{
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


@media (min-width: 566px) {


  #_desktop_user_info .account{
    justify-content: center;
  }

  #_desktop_user_info a {
    display: flex;
    flex-direction: row;
  }

  
  #header .header-top .cart-preview.active .header a{
    display: flex;
    flex-direction: row;
  }

  #_desktop_cart .header{
    display: flex;
    flex-direction: row;
  }

  /* ton conteneur de droite est déjà flex, mais on sécurise */
  .header-top-right {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  /* LE point clé : le widget doit grandir en flex */
  .header-top-right #search_widget {
    display: flex;
    justify-content: center;
    flex: 1 1 100% !important;
    min-width: 0 !important;   /* important en flex pour éviter les comportements bizarres */
    width: 70% !important;
    max-width: none !important;
  }

  /* le form doit remplir */
  .header-top-right #search_widget form {
    display: flex !important;
    width: 70% !important;
    max-width: none !important;
    
  }

  /* l'input doit remplir le form */
  .header-top-right #search_widget input[type="text"],
  .header-top-right #search_widget input[type="search"] {
    flex: 1 1 auto !important;
    width: 70% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* au cas où un wrapper interne limite */
  .header-top-right .search-widgets {
    width: 70% !important;
    max-width: none !important;
  }
}