#html-body .page-header.type16 .logo{
    max-width: max-content;
}
.customer-logged-in .hidden-logged{
    display:none;
}
/*HEADER*/
@media (min-width: 992px) {
  header.page-header.type16 .navigation:not(.side-megamenu) > ul {
    overflow: visible;
    margin-bottom:0;
  }
  header.page-header.type16 .navigation:not(.side-megamenu) .level0{
    max-width:none;
    flex:1;
  }
  header.page-header.type16 .navigation:not(.side-megamenu) .level0 .level-top{
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size: 15px;
    font-weight: bold;
  }
  body .page-header .sw-megamenu.navigation li.level0.fullwidth > .submenu .level1 > a{
    font-size: 14px;;
    color:#636363;
  }
}
header.page-header.type16 .navigation:not(.side-megamenu) .level0 .level-top img.menu-thumb-icon{
    max-width:45px;
}

@media (max-width: 991px) {
    .page-header.type1 .nav-sections, .page-header.type2 .nav-sections, .page-header .navigation:not(.side-megamenu) > ul, .page-header.type16.sticky-header .navigation:not(.side-megamenu) > ul, .page-header.type18 .main-menu-wrap {
      background-color: var(--header-menu-bgcolor);
    }
    .page-header .navigation li.level0 > a {
        color: var(--header-menu-color) !important;
    }
    .navigation li.level0 > a.ui-state-active{
        background-color: transparent;
    }
    .navigation .parent .level-top::after{
        top:50%;
        transform: translateY(-50%);
    }
    .page-header .navigation li.level0 .level-top > span{
        margin-left:10px;
    }
}

a.wishlist,
a.wishlist:hover{
    color:black;
}
#html-body .page-header.type16 .minicart-wrapper .action.showcart .counter.qty{
    background-color:var(--theme-color);
}

/*Formulaire de contact*/
.form.contact {
  background: #fff;
  padding: 36px 26px 18px 26px;
  border-radius: 13px;
  box-shadow: 0 2px 9px 0 rgba(50,70,110,0.07);
  border: 1px solid #eef2f5;
}
.form.contact label {
  color: #253346;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.form.contact .input-text,
.form.contact textarea {
  border: 1px solid #c9d3de;
  border-radius: 6px;
  margin-bottom: 14px;
  padding: 9px 12px;
  width: 100%;
  font-size: 1rem;
  background: #f8fafc;
  transition: border-color 0.2s;
}
.form.contact .input-text:focus,
.form.contact textarea:focus {
  border-color: #48b04d;
  outline: none;
  box-shadow: 0 0 3px #48b04d33;
}
.form.contact .actions-toolbar {
  margin-top: 18px;
  text-align: left;
}
.form.contact button.action.submit.primary {
  background: #48b04d;
  color: #fff;
  padding: 12px 34px;
  border: none;
  border-radius: 7px;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(34,74,44,0.08);
  transition: background 0.18s, box-shadow 0.18s;
  letter-spacing: 0.2px;
}
.form.contact button.action.submit.primary:hover {
  background: #319137;
  box-shadow: 0 2px 8px rgba(34,74,44,0.14);
}
/* ----------- Colonne infos contact à droite ----------- */
.contact-info {
  background: #f8fbfd;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgba(30,55,100,0.07);
  padding: 38px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contacts-title {
  font-size: 1.32rem;
  font-weight: 400;
  color: #849094;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}
.contacts-title b {
  color: #265d30;
  font-weight: 700;
}

.contact-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
  padding: 0;
}
.contact-block:last-child { margin-bottom: 0; }

.contact-link,
.contact-txt {
  display: flex;
  gap:10px;
  align-items: center;
  color: #142f33;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.46;
  text-decoration: none;
  border-radius: 10px;
  padding: 0 10px 0 0;
  background: none;
  transition: background 0.17s, color 0.18s;
}

.contact-link:hover, .contact-link:focus {
  background: #e8f8eb;
  color: #1e9b34;
}

.contact-index-index .page-main .contact-info .contact-icon [class^="porto-icon-"]{
  margin-bottom: 0;
}

.contact-txt {
  flex-direction: column;
  align-items: start;
  font-size: 1.07rem;
  color: #1a2533;
  margin: 0;
  padding: 2px 0 0 0;
  line-height: 1.35;
  font-weight: 500;
}

.contact-block b {
  font-weight: 600;
  color: #2d8430;
  font-size: 1.07em;
  margin-bottom: 1px;
  display: inline-block;
  letter-spacing: 0;
}

/* Responsive : allège padding/tailles sur mobile */
@media (max-width: 991px) {
  .contact-info {
    padding: 20px 6vw 16px 6vw;
    border-radius: 12px;
  }
  .contacts-title { margin-bottom: 14px; }
  .contact-block { margin-bottom: 11px; gap: 10px; }
  .contact-icon { width: 32px; height: 32px; font-size: 1rem; border-radius: 9px; }
  .contact-txt { font-size: 0.98rem; }
}



/* Alignement et espacement de la section contact */
.mgz-element-column.contact-col > .mgz-element-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end; /* Aligne les éléments à droite pour correspondre au header */
    padding: 10px 20px; /* Ajoute un peu de marge interne */
    padding-right:0;
}

/* Assure que les éléments conservent leur largeur naturelle */
.contact-col > .mgz-element-inner .mgz-element,
.contact-col > .mgz-element-inner .mgz-element .btn-position {
    min-width: max-content;
}

/* Style et espacement de l'icône téléphone */
.contact-col > .mgz-element-inner .mgz-element .mgz-icon-box-left {
    width: 50px;
    margin-right: 10px; /* Espacement entre l'icône et le texte */
}

/* Style du texte "Nous contacter" */
.contact-col > .mgz-element-inner .mgz-heading-text {
    font-size: 16px !important; /* Surcharge le style inline de 13px */
    color: #333; /* Couleur sombre pour la lisibilité */
    font-weight: bold; /* Correspond au style du menu */
    margin: 0; /* Supprime les marges par défaut */
}

/* Style du numéro de téléphone */
.contact-col > .mgz-element-inner .mgz-description{
   margin-bottom:0;
}
.contact-col .mgz-child:not(:last-child) > .mgz-element-inner{
    margin-bottom:0;
}
.contact-col > .mgz-element-inner .mgz-description p {
    margin: 0; /* Supprime les marges */
}

.contact-col > .mgz-element-inner .mgz-description a {
    font-size: 18px; 
    font-weight:bold;
    color:black;
    text-decoration: none; /* Supprime le soulignement */
}

/* Empêche le retour à la ligne pour le numéro */
.contact-col > .mgz-element-inner .mgz-description span {
    white-space: nowrap; /* Surcharge le pre-wrap inline */
}

/* Effets de transition pour interactivité */
.contact-col > .mgz-element-inner .mgz-icon-element,
.contact-col > .mgz-element-inner .mgz-description a {
    transition: color 0.3s ease; /* Transition fluide */
}

/* Effets au survol */
.contact-col > .mgz-element-inner .mgz-icon-wrapper a:hover i,
.contact-col > .mgz-element-inner .mgz-description a:hover {
    color: #2E7D32; /* Vert plus foncé au survol */
}
.contact-col .mgz-element-icon,
.contact-col .mgz-element-icon > .mgz-element-inner,
.contact-col .mgz-element-icon > .mgz-element-inner .mgz-icon-wrapper{
    display: block;
    height:100%;
}

/*HEADER CATEGORY*/
.category-header .mgz-parallax-inner::before{
    content:"";
    position:absolute;
    display: block;
    top:0;
    bottom:0;
    left:0;
    right:50%;
    background:linear-gradient(to right,#3aaa35,rgba(58,170,53,0));
}
.category-header .mgz-element-column > .mgz-element-inner{
    min-height: 100%;
    display: flex;
    align-items: end;
}
.category-header p{
    font-size: 40px;
    font-weight: bolder;
    color: white;
    text-transform: uppercase;
}
@media (min-width: 1200px) {
    .category-header p{
        padding: 100px !important;
    }
}

.page-products .breadcrumbs{
    margin-bottom: 0;
}
.page-wrapper > .breadcrumbs .items > li{
    margin: 15px 0;
}
.ui-slider-horizontal{
    height:15px;
}
.filter-content .filter-options-item .ui-slider-handle{
    height: 20px !important;
    width: 20px !important;
    margin:0;
  
}
#ln_slider_price .ui-slider-handle{
    border:4px solid white;
}

/*--------FILTER--------*/
/* Cacher la checkbox native */
.filter-options-content .item input[type="checkbox"] {
    display: none;
}

/* Créer une checkbox personnalisée */
.filter-options-content .item input[type="checkbox"] + a{
    position: relative;
    padding-left: 30px; /* Espace pour la checkbox */
    cursor: pointer;
}

/* Pseudo-élément pour la checkbox */
.filter-options-content .item input[type="checkbox"] + a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Effet hover sur la checkbox */
.filter-options-content .item:hover input[type="checkbox"] + a::before{
    border-color: #888;
}

/* Style lorsque la checkbox est cochée */
.filter-options-content .item input[type="checkbox"]:checked + a::before {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* Coche visible */
.filter-options-content .item input[type="checkbox"]:checked + a::after {
    content: '✔';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
}

.columns .sidebar-main .sidebar-content{
    padding:15px;
} 

.block-reorder .product-items-names .product-item {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.5em;
}

.block-reorder .field.item.choice {
  margin: 0;
  padding: 0;
  flex: 0 0 auto; /* Fixe la largeur au contenu */
}

.block-reorder .product-item-name {
  flex: 1 1 0;
  min-width: 0; /* Important pour que le text-overflow fonctionne */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1em;
}

.block-reorder .product-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*Compteur*/
.filter-options-content .count::after,
.filter-options-content .count::before{
    content:'';
}
.filter-options-content .count{
    position: absolute;
    right: -15px;
    top: 0;
    width: 15px;
    height: 15px;
    justify-content: center;
    align-items: center;
    display: flex;
    line-height: 0;
    font-size:10px;
    background: var(--theme-color);
    padding: 5px;
    border-radius: 50%;
    color: white;
    
}
.filter-content .filter-options-item li a:hover span{
    color:white;
}

.page-wrapper > .breadcrumbs .items > li:not(:last-child)::after{
    color:#AEAEAE;
}

.page-products .page-main{
    padding-bottom:0;
}

.message.global.cookie{
    font-size: 1rem;
}

.products-grid .hide_price_text{
    display:none;
}

.product-item-info .product-item-details .product-item-actions{
    white-space:wrap;
}

/*NEWSLETTER FORM*/ 
.newsletter-block .mgz-description{
    margin:0
}
.newsletter-block .mgz-icon-box-container{
    align-items:center;
}
.newsletter-block .mgz-newsletter-form-wrapper{
    margin:0;
}
.newsletter-block .mgz-newsletter-form .mgz-newsletter-fields .mgz-newsletter-field,
.newsletter-block .mgz-newsletter-form .actions{
    margin-bottom:0;
}
.newsletter-block .mgz-newsletter-form .mgz-newsletter-fields .mgz-newsletter-field input{
    border-radius: 25px 0 0 25px ;
}
.newsletter-block .mgz-newsletter-form .actions .action{
    border-radius: 0 25px 25px 0;
}

/*FOOTER*/
footer .mgz-element-categories-list ul li,
footer h4{
    margin-bottom:0;
}
footer .mgz-element h4.title{
	font-weight:600;
}
footer .mgz-block-heading{
    padding:0;
    margin-bottom:15px;
}
footer ul li a,
footer .mgz-element-categories-list ul li a {
  line-height: 24px;
  color: #333;
  display: block;
  font-weight: 600;
}

/* ===============================================================
   FORMULAIRE « Créer un compte »  – UI/UX simplifié et responsive
   =============================================================== */

/* --- Grille cartes (max 2 col. desktop → 1 col. mobile) -------- */
.register-two-col .reg-grid{
    display:flex; flex-wrap:wrap; gap:2rem;
}
.register-two-col .reg-card{
    flex:1 1 340px;                /* min 340 px puis s’étire */
    padding:1.5rem;
    border:1px solid #e6e6e6;
    border-radius:8px;
    background:#fff;
}

/* --- Groupes « Code postal + Ville » / « Canton + Pays » -------- */
.field-group.duo{display:flex; flex-wrap:wrap; gap:1rem;}
.field-group.duo .field{flex:1 1 150px;}  /* garde l’égalité entre les 2 */

@media (max-width: 767px){
    .register-two-col .reg-grid{flex-direction:column;}
}

/* --- Champs & labels ------------------------------------------- */
.register-two-col input[type="text"],
.register-two-col input[type="email"],
.register-two-col input[type="tel"],
.register-two-col input[type="password"],
.register-two-col select{
    width:100%; padding:10px 12px;
    border:1px solid #ccc; border-radius:4px;
    font-size:0.9rem; background:#fff;
}
.register-two-col input:focus,
.register-two-col select:focus{
    border-color:var(--theme-color); outline:none;
}

.register-two-col .label{
    display:block; margin-bottom:6px;
    font-size:0.83rem; font-weight:600; color:#444;
}

/* ======================================================
   FOOTER du formulaire "Créer un compte"
   ====================================================== */

/* 1. conteneur principal */
.reg-footer{
    display:flex;
    flex-direction:column;         /* pile mobile par défaut          */
    align-items:center;
    gap:1.2rem;
    margin-top:2.5rem;
}

/* 2. la case newsletter + libellé */
.reg-footer .newsletter{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.9rem;
    cursor:pointer;
    user-select:none;
}

/* 3. bouton principal */
.reg-footer .reg-submit{
    min-width:220px;
    padding:.9rem 2rem;
}

/* 4. lien retour */
.reg-footer .reg-back{
    font-size:.9rem;
    color:var(--theme-color);
    text-decoration:none;
}
.reg-footer .reg-back:hover{ text-decoration:underline; }

/* 5. bloc "se souvenir de moi" + reCAPTCHA = aligner à gauche */
.reg-footer + .actions-toolbar,
.reg-footer + #recaptcha,      /* sel. possible selon ton markup */
.reg-footer + .g-recaptcha{
    margin-top:2rem;
}

/* ------------- desktop (> 768 px) ---------------------- */
@media (min-width:768px){
    .reg-footer{
        flex-direction:row;      /* newsletter | CTA | back  */
        justify-content:center;
    }
    .reg-footer .newsletter{margin-right:auto;}   /* case collée au bord */
    .reg-footer .reg-back   {margin-left:1rem;}
}
/* ======================================================
   Formulaire "Créer un compte" – Finitions
   ====================================================== */

/* ---- Sections / cartes ------------------------------------- */
.register-two-col .reg-card{
    /* titre (legend) */
    position:relative;
}
.register-two-col .reg-card legend{
    margin:0 0 1rem;                 /* même marge partout  */
    font-size:1.05rem;
    font-weight:700;
    text-transform:uppercase;
    color:var(--theme-color);
    line-height:1.2;
}
/* s’il y a deux legend de suite (copié par erreur) on masque le second */
.register-two-col .reg-card legend + legend{display:none;}

/* ---- Champs : même marge bas -------------------------------- */
.register-two-col .field{margin-bottom:1.1rem;}
.register-two-col .field:last-child{margin-bottom:0;}

/* ---- Groupes Code postal / Ville  &  Canton / Pays ---------- */
.field-group.duo{
    display:flex; gap:1rem; flex-wrap:wrap;
}
.field-group.duo .field{
    flex:1 1 200px;                  /* largeur min → reste auto        */
}

/* ---- Civilité + Prénom + Nom -------------------------------- */
.fieldset-fullname .fields{
    display:flex; gap:1rem; flex-wrap:wrap;
}
.fieldset-fullname .field{
    flex:1 1 120px;                  /* force la répartition équitable  */
}
#prefix{min-width:90px;}             /* le <select> civilité n’empiète pas */

/* ---- Label + input cohérents (pour champ généré par widget) -- */
.register-two-col .field .label{
    display:block; margin-bottom:4px;
    font-weight:600; font-size:.85rem; color:#444;
}

/* ---- Champ texte / select ; suppression bordures Porto ----- */
.register-two-col input[type=text],
.register-two-col input[type=email],
.register-two-col input[type=tel],
.register-two-col input[type=password],
.register-two-col select{
    width:100%;
    padding:10px 12px;
    font-size:.9rem;
    border:1px solid #c9c9c9;
    border-radius:4px;
    background:#fff;
}
.register-two-col input:focus,
.register-two-col select:focus{
    border-color:var(--theme-color); outline:none;
}

/* ---- Responsive (< 767 px) ---------------------------------- */
@media (max-width:767px){
    .register-two-col .reg-grid{flex-direction:column;}
    .field-group.duo{flex-direction:column;}
    .products  .porto-section {
        flex-direction: column;
	align-items: center;
	width: 100%;
    }

    .products  .porto-section .product-image-photo {
        position: initial;
        max-height: 100%;
        width: auto;
    }

    .products  .porto-section .products-list .product-item-details {
        max-width: 100%;
        padding: 0px 50px;
    }
    .products .porto-section .product-item-details {
    	max-width: 270px;
    }

    .products .porto-section .product-item-description {
        display: flex;
        flex-direction: column;
    }
    .products .porto-section .product-item-description a {
        background: rgb(58, 170, 53);
        color: white;
        padding: 10px;
        max-width: fit-content;
    }
    .products .porto-section .product-item-photo a {
        
    }
    .products .porto-section .product-item-photo img {
                                     
    }
    .products .porto-section .product-item-photo .porto-tb-featured-image {
        height: 100%;
    }
}

.sku {
    font-size: 16px;
}

.price-box.price-final_price {
    display: flex;
    flex-direction: column;
}

.price-box.price-final_price .special-price {
    order: 1;
}

.price-box.price-final_price .old-price {
    order: 2;
}

.badge {
    display: inline-block;
    padding: 0.3em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

.bg-danger {
    color: #fff;
    background-color: #dc3545;
}

.catalog-category-view .page-title-wrapper {
display: block !important;
}

@media print { .availability { display: none !important; } }