/*
 * C-Chaussures — CSS mobile / critical product
 * Menu mobile replié au chargement.
 * Le critical product est volontairement limité aux mobiles.
 */

/* =========================================================
   BASE
   ========================================================= */

html {
    box-sizing: border-box;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    background: #fff;
    color: #232323;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    line-height: 1.25em;
    font-synthesis-weight: none;
}

img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: middle;
}

/* =========================================================
   HEADER
   ========================================================= */

#header {
    position: relative;
    z-index: 999;
    color: #7a7a7a;
    background: #fff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 11%);
}
/* =========================================================
   RECHERCHE — MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    #search_widget {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    #search_widget form {
        min-height: 40px;
    }

    #search_widget input[type="text"] {
        height: 40px !important;
        font-size: 16px !important;
        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    #search_widget .material-icons {
        font-size: 26px !important;
    }

    #search_widget .search-widget__icon,
    #search_widget .search {
        font-size: 26px !important;
    }

}
/* =========================================================
   HEADER — MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {
	    #header .user-info .hidden-sm-down, #header .blockcart .hidden-sm-down {
        display: none !important;
    }

    #header .header-nav {
        max-height: 50px;
        border-bottom: 2px solid #f6f6f6;
    }

    /* Shop 1 */
    .header-nav-shop-1 {
        background: #a2baa1 !important;
        color: #212529;
    }

    /* Shop 4 */
    .header-nav-shop-4 {
        background: #ca9ebd !important;
    }

    /* Menu hamburger */
    #header .header-nav #menu-icon {
        margin: 0 1rem;
        vertical-align: middle;
        cursor: pointer;
    }

    /* Logo mobile */
    #header .top-logo {
        display: flex;
        align-items: center;
        min-height: 50px;
    }

    /* Éléments à droite */
    #header .header-nav #_mobile_user_info,
    #header .header-nav #_mobile_cart {
        float: right !important;
    }
	    #header .header-nav .mobile {
        display: flex !important;
        align-items: center;
        min-height: 50px;
        height: 50px;
        width: 100%;
    }

    #header .header-nav #menu-icon {
        order: 1;
        float: none !important;
        flex: 0 0 auto;
        margin: 0 1rem !important;
        height: auto;
        line-height: normal;
    }

    #header .header-nav #menu-icon .material-icons {
        font-size: 28px;
    }

    #header .header-nav #_mobile_logo {
        order: 2;
        float: none !important;
        flex: 1 1 auto;
    }

    #header .top-logo {
        display: flex;
        align-items: center;
        min-height: 50px;
    }

    #header .top-logo img {
        max-width: 70%;
        height: auto;
        transform: translateX(8px);
    }

    #header .header-nav #_mobile_user_info {
        order: 3;
        float: none !important;
        flex: 0 0 auto;
    }

    #header .header-nav #_mobile_cart {
        order: 4;
        float: none !important;
        flex: 0 0 auto;
    }

    #header .header-nav #_mobile_list {
        order: 5;
        float: none !important;
        flex: 0 0 auto;
    }

    #header .header-nav #_mobile_user_info .user-info,
    #header .header-nav #_mobile_cart .blockcart {
        margin-top: 0 !important;
    }

    #header .user-info .hidden-sm-down,
    #header .blockcart .hidden-sm-down {
        display: none !important;
    }
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

@media screen and (max-width: 767px) {
	.back-to-top .back-icon {
		background-color: #ca9ebd !important;
	}

    #mobile_top_menu_wrapper {
        padding: 15px;
        background: #fff;
    }

    #mobile_top_menu_wrapper .top-menu,
    #mobile_top_menu_wrapper ul {
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 1rem;
        list-style: none;
    }

    #mobile_top_menu_wrapper .top-menu[data-depth="0"] {
        margin-bottom: 0;
    }

    #mobile_top_menu_wrapper .top-menu > li {
        margin: 0;
    }

    #mobile_top_menu_wrapper .top-menu > li > a,
    #mobile_top_menu_wrapper .mainmenu_catname {
        display: block;
        position: relative;
        padding: 12px 0;
        color: #232323;
        text-decoration: none;
    }

    #mobile_top_menu_wrapper .collapse-icons {
        float: right;
        cursor: pointer;
    }

    @font-face {
        font-family: "Material Icons";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("/themes/classic/assets/css/2d8017489da689caedc1.woff2") format("woff2");
    }

    .material-icons {
        display: inline-block;
        width: 0.9em;
        height: 1em;
        font-family: "Material Icons", Arial, sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        -webkit-font-feature-settings: "liga";
        font-feature-settings: "liga";
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        vertical-align: middle;
        text-rendering: optimizeLegibility;
    }

    #mobile_top_menu_wrapper .collapse-icons .material-icons {
        display: inline-block;
        width: 1em;
        height: 1em;
        font-family: "Material Icons", Arial, sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        vertical-align: middle;
    }

    #mobile_top_menu_wrapper .collapse-icons .remove {
        display: none;
    }

    #mobile_top_menu_wrapper .collapse-icons[aria-expanded="true"] .add {
        display: none;
    }

    #mobile_top_menu_wrapper .collapse-icons[aria-expanded="true"] .remove {
        display: inline-block;
    }

    #mobile_top_menu_wrapper .mainmenu_catcontent {
        padding-left: 15px;
    }

    #mobile_top_menu_wrapper .mainmenu_catcontent ul {
        margin-bottom: 0;
    }

    #mobile_top_menu_wrapper .mainmenu_catcontent a {
        display: block;
        padding: 7px 0;
        color: #232323;
        text-decoration: none;
    }

    #mobile_top_menu_wrapper .mainmenu_catcontent .bold {
        font-weight: 800;
    }

    #mobile_top_menu_wrapper .collapse:not(.show) {
        display: none;
    }

    #mobile_top_menu_wrapper .collapse.show {
        display: block;
    }
}

/* =========================================================
   CRITICAL PRODUCT — MOBILE UNIQUEMENT
   ========================================================= */

@media screen and (max-width: 767px) {

    #product #content {
        position: relative;
        max-width: 452px;
        margin: 0 auto;
    }

    #main .page-content,
    #main .page-footer,
    #main .page-header {
        margin-bottom: 1.563rem;
    }

    /*
     * Important :
     * limitation au produit uniquement.
     * Ne pas utiliser .row globalement :
     * cela déborde le header mobile de 15px de chaque côté.
     */
    /* ---------------------------------------------------------
       Image produit
       --------------------------------------------------------- */

    .product-cover .zoom-in {
        display: none !important;
    }

    .product-cover img {
        width: 100%;
        height: auto;
        background: #fff;
    }

    /* ---------------------------------------------------------
       Galerie / miniatures
       --------------------------------------------------------- */

    .images-container {
        position: relative;
    }

    #main .images-container .js-qv-mask {
        overflow: hidden;
        white-space: nowrap;
    }

    #main .images-container .js-qv-mask.scroll {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .product-images {
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 1rem;
        list-style: none;
    }

    .product-images > li.thumb-container {
        display: inline;
    }

    .product-images .thumb {
        max-width: 100%;
        height: auto;
    }

    /* ---------------------------------------------------------
       Flèches miniatures
       --------------------------------------------------------- */

    #main .scroll-box-arrows {
        position: absolute;
        left: 0;
        right: 0;
        top: 90%;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
    }

    #main .scroll-box-arrows .left,
    #main .scroll-box-arrows .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    #main .scroll-box-arrows .left {
        left: 0;
    }

    #main .scroll-box-arrows .right {
        right: 0;
    }

    /* ---------------------------------------------------------
       Badge promotion
       --------------------------------------------------------- */

    .product-flags,
    .product-images {
        padding-left: 0;
        list-style: none;
    }

    .product-flags {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .product-flag.discount {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 32px;
        padding: 0 8px;
        margin: 0;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        color: #fff;
        background: #f29972;
        border-radius: 0;
    }
}

/* =========================================================
   BREADCRUMB — MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    #wrapper .breadcrumb {
        margin-bottom: 1rem;
    }

    #wrapper .breadcrumb ol {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #wrapper .breadcrumb li {
        display: inline;
        margin: 0;
        padding: 0;
    }

    #wrapper .breadcrumb a {
        text-decoration: none;
    }

    #wrapper .breadcrumb li:last-child {
        font-weight: 500;
    }
}


@media screen and (max-width: 767px) {

    #header .header-nav {
        max-height: 50px;
        border-bottom: 2px solid #f6f6f6;
    }

    .header-nav-shop-4 {
        background: #ca9ebd !important;
    }

    #header .header-nav #menu-icon {
        margin: 0 1rem;
        vertical-align: middle;
        cursor: pointer;
    }
}

@media screen and (max-width: 767px) {

    .blockreassurance_product .item-product svg,
    .blockreassurance_product .item-product img {
        width: 35px;
        height: 35px;
    }

}

@media screen and (max-width: 767px) {
    #search_widget {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

@media (max-width: 767px) {
    #customsearch-overlay[aria-hidden="true"] {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    #customsearch-overlay[aria-hidden="false"] {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}
/* =========================================================
   DESKTOP
   ========================================================= */

/*
 * Aucun critical-product mobile ne doit s'appliquer au desktop.
 * Le CSS desktop du thème reste chargé par sa feuille dédiée.
 */