/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*HEADER */
#header .header-nav {background: #000000; color : #ffffff;}
#header { border-bottom: 1px solid #dee2e6 !important; -webkit-box-shadow: none; box-shadow: none;}
#header .header-top a[data-depth="0"] { color: #000000; text-transform: uppercase; font-size:1.1rem;}
#header a {color: #ffffff;}
#header .top-menu a[data-depth="0"]:hover, a:hover {color: #111111;}
#header a:hover {color: #ffdacf;}
#header .header-top {padding: 0px;}
.sdll-menu-class { display: flex; flex-wrap: wrap;}
#search_widget form input { width: 100%; padding: 10px 20px 10px 40px; outline: none; background-color: #000000;  color: #ffffff !important;  border: none; border-radius: 5px;}
header .header-nav .blockcart {height: 3rem; padding: .75rem; margin-left: .9375rem; text-align: center; white-space: nowrap; background: #f6f6f6; color: #000000;}
.top-menu a.dropdown-submenu { font-weight: 400; font-size: 16px; color: #000000 !important; text-transform: none;}
.top-menu a.dropdown-submenu:hover{ text-transform: underline;}
.card-block {padding: 1.25rem 1.25rem .5rem;}
#top-menu .popover.sub-menu ul.top-menu[data-depth="1"] > li.category {
    display: block; 
    width: 100%; 
    margin: 0;
    padding: 0; 
}

#top-menu .popover.sub-menu ul.top-menu[data-depth="1"] > li.category > a.dropdown-item {
    display: block;
    padding: 10px 15px; 
    text-decoration: none;
}

#top-menu .popover.sub-menu {
   width: 220px;
   min-width: 180px;
   box-shadow: 0px 3px 5px rgba(0,0,0,0.1);
}



/* 1. Rendre les éléments <li> du menu principal "relativement positionnés" */
/* Cela permet aux sous-menus (en position absolue) de se positionner par rapport à eux. */
#top-menu > li.category {
    position: relative; /* TRÈS IMPORTANT pour le positionnement des enfants absolus */
}

/* 2. Positionner correctement le conteneur du sous-menu (div.popover.sub-menu) */
#top-menu .popover.sub-menu {
    position: absolute;   /* S'assure qu'il est en positionnement absolu */
    top: 100%;            /* Positionne le HAUT du sous-menu à 100% de la hauteur du li parent (donc juste en dessous) */
    left: 0;              /* Aligne le côté GAUCHE du sous-menu avec le côté GAUCHE du li parent */
    z-index: 1000;        /* S'assure qu'il s'affiche au-dessus des autres éléments de la page */
    
    /* Réinitialiser ou forcer certaines valeurs qui pourraient causer un décalage */
    margin-top: 0;        /* Enlève toute marge supérieure qui pourrait le décaler vers le bas */
    /* Si le style en ligne "top: 70.375px;" persiste et cause problème, vous pourriez avoir besoin de forcer : */
    /* top: 100% !important; */
    /* left: 0 !important; */

    /* Définissez une largeur pour votre sous-menu si nécessaire */
    /* width: 220px; /* Par exemple */
    /* min-width: 180px; */ /* Pour s'assurer qu'il a une largeur minimale */
    
    /* La classe 'collapse' de Bootstrap (ou votre propre CSS pour le hover/clic) gère son affichage (display: none/block) */
}

/* Les styles que nous avons définis précédemment pour que les items du sous-menu soient en colonne restent valides : */
#top-menu .popover.sub-menu ul.top-menu[data-depth="1"] > li.category {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#top-menu .popover.sub-menu ul.top-menu[data-depth="1"] > li.category > a.dropdown-item {
    display: block;
    padding: 10px 15px; /* Ajustez au besoin */
    /* text-decoration: none; */ /* Assurez-vous que c'est cohérent avec vos autres styles de liens */
    /* color: #333; */ /* Couleur du texte pour les items de sous-menu */
}

/* Optionnel: style de survol pour les items du sous-menu */
/*
#top-menu .popover.sub-menu ul.top-menu[data-depth="1"] > li.category > a.dropdown-item:hover {
    background-color: #f0f0f0;
}
*/

/*WRAPPER */
#wrapper {
    padding-top: 1.563rem;
    background: #ffffff;
}

/*BODY */
body {
    font-family: "Jost", serif;
    font-size: 1rem;
    line-height: 1.25em;
}
.h1, .h2, .h3, .h4, body {
    color: #000000;
}
@media (min-width: 1200px) {
    .container {
        width: 1500px;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .header-top .position-static {
        display:none !important; 
    }
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #000000;
    border-color: transparent;
}
.btn-primary, .btn-primary:hover {
    color: #fff;
    background-color: #000000;
    border-color: transparent;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #765848;
    text-decoration: none;
}

a:focus, a:hover {
    color: #000000;
    text-decoration: none;
}

.account-list a:hover, .block_newsletter form button[type=submit] .search:hover, .footer-container li a:hover {
    color: #000000;
}

#blockcart-modal .product-name {
    font-size: 1.125rem;
    color: #000000;
}
.product-price {
    display: inline-block;
    max-width: 100%;
    color: #000000;
}

#subcategories ul li .subcategory-name:hover, .block-categories .arrows .arrow-down:hover, .block-categories .arrows .arrow-right:hover, .block-categories .collapse-icons .add:hover, .block-categories .collapse-icons .remove:hover, .cart-grid-body a.label:hover {
    color: #000000;
}


/*CAROUSEL */
.carousel .carousel-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    outline: 5px solid #fff;
    outline-offset: -20px;
}
.carousel .carousel-inner {
    height: auto; 
}

.carousel .carousel-control {
    opacity: 1;
    display: none;
}
.carousel .carousel-item .caption {
    position: absolute;
    bottom: 12%;
    left: 6%;
    max-width: 70%;
    color: #fff;
}

.carousel .carousel-item .caption .caption-description p{
    margin-top: 20px;
    font-size: 3rem;
    color: #fff;
}

.banner .img-fluid {
    width: 100%;
    max-width: 100%;
    height: auto;
    outline: 5px solid #fff;
    outline-offset: -20px;
}


/*Conseil des Galopins */

.section__home2 {
    background-image: url(https://galopins-chaussures.fr/img/cms/fond-woman.jpg);
    outline: 5px solid #fff;
    outline-offset: -20px;
    background-color: #020607c2;
    background-blend-mode: multiply;
    background-size: cover;
}
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
.home2__container {
    display: flex;
    width: 100%;
    min-height: 700px;
    padding: 5% 8% 5%;
    color: #ffffff;
    flex-wrap: wrap;
    justify-content: space-around;
    height: fit-content;
}

.home2__container h3 {
    margin: 0;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}

#custom-text {
    padding: 0;
    margin-bottom: 0;
    text-align: center;
    border-radius: 0px;
}

#custom-text p {
    color: #ffffff;
    font-size: 17px;
}
#custom-text h4 {
    color: #ffffff;
    font-size: 20px;
}



/*CATEGORIE */

#subcategories .subcategory-image {
    display:none !important;
}

.block-categories .category-sub-menu {
    margin-top: 1rem;
    padding: 0;
}
.block-categories {
    padding: 1.563rem 1.25rem;
    margin-bottom: 1.563rem;
    background: #fff;
}

#search_filters .facet .facet-label a {
    width: auto;
}

.block-category {
    min-height: 5.75rem;
    margin-bottom: 1.563rem;
}

#products .page-not-found {display:none;}


/*PRODUIT */

.tabs .nav-tabs .nav-link.active {
    color: #000000;
}
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: #000000 3px solid;
}

.product-prices div {
    margin-bottom: .625rem;
    font-size: larger;
    font-weight: 400;
    color: #7e6569;
}

/*ETIQUETTES*/

.product-flags li.product-flag {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: .3125rem .4375rem;
    margin-top: .625rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    pointer-events: auto;
    background: #ff6699;
}

/*BRANDS*/

.brand li{
    position: relative;
    width: 200px !important;
    min-width: 200px;
    padding: 10px;
    margin: 5px;
    text-align: center;
    background: #fff;}
.brand-infos {display:none;}

.brand-img .img {
    border-style: none;
    width: 100%;
    vertical-align: middle;
}

/*FOOTER*/

.block-social ul li {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin: .125rem;
    cursor: pointer;
    background-color: #000000;
    background-repeat: no-repeat;
}


/*MENU COLLECTION*/

        /* Styles pour le sous-menu au survol */

        /* Style de base pour le sous-menu lorsqu'il est visible.
           La classe 'collapse' de Bootstrap le cache par défaut (display: none). */
        #footer_sub_menu_3 {
            background-color: white;
            border: 1px solid #ccc;
            padding: 10px;
        display: none;
            z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
            /* Autres styles comme box-shadow, width, etc. peuvent être ajoutés ici */
        }

        /* Appliquer les styles de survol pour les écrans de taille moyenne (md) et plus grands */
        @media (min-width: 768px) { /* 768px est le point de rupture 'md' par défaut de Bootstrap 4/5 */
            .wrapper {
                position: relative; /* Nécessaire pour le positionnement absolu du sous-menu enfant */
            }

            #footer_sub_menu_3 {
                position: absolute; /* Positionne le sous-menu par rapport à '.wrapper' */
                top: 100%;  /* S'affiche juste en dessous de l'élément parent. Ajustez si nécessaire. */
                left: 0;
                min-width: 200px; /* Donnez une largeur minimale ou fixe si besoin */
                /* La classe 'collapse' le maintient caché (display: none) par défaut */
            }

            /* Afficher le sous-menu lorsque la souris survole l'élément '.wrapper' */
            .wrapper:hover #footer_sub_menu_3 {
                display: block; /* Rend le sous-menu visible */
            }
        }
   .header-top .col-md-6.links {
        display: inline-flex;
        width: 10%;
margin: 12px 6px 0px;
}

            #footer_sub_menu_3  a{color: #000 !important; line-height: 2; text-decoration: none;}
            #footer_sub_menu_3  a:hover{color: #765848 !important; line-height: 2; text-decoration: none;}