/*==================================================
VARIABLES
==================================================*/


/*==================================================
BOUTIQUE
==================================================*/
#primary {
	margin-top: 30px;
}	
/* =========================================================
   SIDEBAR CATÉGORIES - VAP'O.T
   ========================================================= */

/* Largeur de la sidebar */
.woocommerce-page #secondary {
    padding-right: 35px;
}

/* Titre */
.woocommerce-page #secondary .widget-title,
.woocommerce-page #secondary h2 {
    margin-bottom: 25px;

    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #272727;
}

/* Liste principale */
.woocommerce-page
.wc-block-product-categories-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------------------------------------------------------
   CATÉGORIES PRINCIPALES
   --------------------------------------------------------- */

.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    margin: 0;
    padding: 0;

}

/* Lien catégorie */
.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item > a {
    grid-column: 1;

    display: block;

    padding: 10px 0;

    color: #272727;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: color 0.2s ease;
}

/* Nom catégorie */
.woocommerce-page
.wc-block-product-categories-list-item__name {
    color: inherit;
}

/* Compteur catégorie */
.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item > .wc-block-product-categories-list-item__count {
    grid-column: 2;

    align-self: center;

    padding-left: 15px;

    color: #777;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* Hover */
.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item > a:hover {
    color: #c7d900;
}

/* Catégorie courante */
.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item.current-cat > a,
.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item.current-cat-parent > a {
    color: #c7d900;
}


/* ---------------------------------------------------------
   SOUS-CATÉGORIES
   --------------------------------------------------------- */

.woocommerce-page
.wc-block-product-categories-list > .wc-block-product-categories-list-item > ul {
    grid-column: 1 / -1;

    /*margin: 0 0 5px 10px;*/
    padding: 0 0 0 10px;

    list-style: none;

    border-left: 1px solid #e5e5e5;
}

/* Sous-catégorie */
.woocommerce-page
.wc-block-product-categories-list
.wc-block-product-categories-list
.wc-block-product-categories-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    margin: 0;
    padding: 0;
}

/* Lien sous-catégorie */
.woocommerce-page
.wc-block-product-categories-list
.wc-block-product-categories-list
.wc-block-product-categories-list-item > a {
    grid-column: 1;

    display: block;

    padding: 8px 0;

    color: #666;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;

    text-decoration: none;
}

/* Compteur sous-catégorie */
.woocommerce-page
.wc-block-product-categories-list
.wc-block-product-categories-list
.wc-block-product-categories-list-item
> .wc-block-product-categories-list-item__count {

    grid-column: 2;

    align-self: center;

    padding-left: 10px;

    color: #999;
    font-size: 13px;
}

/* Hover sous-catégorie */
.woocommerce-page
.wc-block-product-categories-list
.wc-block-product-categories-list
.wc-block-product-categories-list-item > a:hover {
    color: #c7d900;
}


/* =========================================================
   RECHERCHE DE LA SIDEBAR
   ========================================================= */

.woocommerce-page #secondary .widget_search {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Titre "Recherche" */
.woocommerce-page #secondary .widget_search label {
    display: block;
    margin-bottom: 10px;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #272727;
}

/* Ligne de recherche */
.woocommerce-page #secondary .widget_search form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

/* Champ de recherche */
.woocommerce-page #secondary .widget_search input[type="search"] {
    width: 100%;
    height: 44px;

    padding: 0 14px;

    border: 1px solid #ddd;
    border-radius: 0;

    background: #f7f7f7;

    font-family: 'Inter', sans-serif;
    font-size: 14px;

    box-sizing: border-box;
    vertical-align: top;
}

/* Bouton */
.woocommerce-page #secondary .widget_search button {
    flex: 0 0 auto;

    width: auto;
    min-width: 140px;
    height: 44px;

    margin-top: 0;
    padding: 0 20px;

    border: none;
    border-radius: 0;

    background: #30343b;
    color: #fff;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover */
.woocommerce-page #secondary .widget_search button:hover {
    background: #c7d900;
    color: #111;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .woocommerce-page #secondary {
        width: 100%;
        padding-right: 0;
        margin-bottom: 35px;
    }

    /* Recherche */
    .woocommerce-page #secondary .widget_search {
        margin-top: 25px;
        margin-bottom: 35px;
    }

    .woocommerce-page #secondary .widget_search form {
        gap: 8px;
    }

    .woocommerce-page #secondary .widget_search input[type="search"] {
        min-width: 0;
    }

    .woocommerce-page #secondary .widget_search button {
        min-width: 120px;
        padding: 0 15px;
    }

    /* Catégories */
    .woocommerce-page
    .wc-block-product-categories-list
    > .wc-block-product-categories-list-item
    > a {
        padding: 14px 0;
    }

    .woocommerce-page
    .wc-block-product-categories-list
    .wc-block-product-categories-list {
        margin-left: 10px;
    }
}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media (max-width: 480px) {

    .woocommerce-page #secondary .widget_search form {
        flex-direction: column;
        gap: 10px;
    }

    .woocommerce-page #secondary .widget_search input[type="search"],
    .woocommerce-page #secondary .widget_search button {
        width: 100%;
    }

    .woocommerce-page #secondary .widget_search button {
        min-width: 0;
    }
}

/* =========================================================
   PAGE PRODUIT - MISE EN PAGE SANS SIDEBAR
   ========================================================= */

/* Supprime la sidebar uniquement sur les fiches produit */
.single-product #secondary {
    display: none;
}

/* La zone principale prend toute la largeur */
.single-product #primary {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}

/* Conteneur de la fiche produit */
.single-product div.product {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 40px 80px;
    box-sizing: border-box;
}

/* =========================================================
   IMAGE PRODUIT
   ========================================================= */

.single-product div.product .woocommerce-product-gallery {
    width: 58%;
    margin: 0;
    padding: 0 50px 0 0;
    box-sizing: border-box;
}

/* Image principale */
.single-product div.product .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   INFORMATIONS PRODUIT
   ========================================================= */

.single-product div.product .summary {
    width: 42%;
    margin: 0;
    padding: 20px 0 0 30px;
    box-sizing: border-box;
}

/* Titre */
.single-product div.product .product_title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    color: #272727;
    margin-bottom: 25px;
}

/* Prix */
.single-product div.product p.price,
.single-product div.product span.price {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #272727;
}

/* Bouton Ajouter au panier */
.single-product div.product form.cart .button {
    background: #30343b;
    color: #fff;
    border: none;
    border-radius: 0;

    min-height: 48px;
    padding: 0 28px;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;

    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover bouton */
.single-product div.product form.cart .button:hover {
    background: #c7d900;
    color: #111;
}

/* =========================================================
   CATÉGORIES DU PRODUIT
   ========================================================= */

.single-product div.product .product_meta {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #777;
}

.single-product div.product .product_meta a {
    color: #555;
}

.single-product div.product .product_meta a:hover {
    color: #c7d900;
}

/* =========================================================
   PRODUITS SIMILAIRES
   ========================================================= */

.single-product .related.products {
    clear: both;
    width: 100%;
    margin-top: 80px;
}

.single-product .related.products > h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #272727;
    margin-bottom: 35px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    /* La fiche reprend toute la largeur */
    .single-product div.product {
        padding: 30px 20px 50px;
    }

    /* Image */
    .single-product div.product .woocommerce-product-gallery {
        width: 100%;
        padding: 0;
        margin-bottom: 35px;
    }

    /* Informations */
    .single-product div.product .summary {
        width: 100%;
        padding: 0;
    }

    /* Titre */
    .single-product div.product .product_title {
        font-size: 30px;
    }

    /* Prix */
    .single-product div.product p.price,
    .single-product div.product span.price {
        font-size: 20px;
    }

    /* Bouton */
    .single-product div.product form.cart .button {
        width: 100%;
    }

    /* Produits similaires */
    .single-product .related.products {
        margin-top: 50px;
    }

}


/* =========================================================
   BADGES PRODUITS - BOUTIQUE
   ========================================================= */

/* Le lien contenant l'image devient le repère
   pour positionner les badges */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    position: relative;
}


/* ---------------------------------------------------------
   BADGE NOUVEAUTÉ
   --------------------------------------------------------- */

.woocommerce ul.products li.product .vapot-new-badge {
    position: absolute;

    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    background: #272727;
    color: #fff;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;

    z-index: 5;
}


/* ---------------------------------------------------------
   BADGE PROMOTION
   --------------------------------------------------------- */

.woocommerce ul.products li.product .vapot-sale-badge {
    position: absolute;

    top: 55px;
    right: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: #c7d900;
    color: #111;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;

    border-radius: 50%;

    z-index: 5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .woocommerce ul.products li.product .vapot-new-badge {
        top: 10px;
        left: 10px;

        padding: 6px 9px;

        font-size: 10px;
    }


    .woocommerce ul.products li.product .vapot-sale-badge {
        top: 55px;
        right: 10px;

        width: 40px;
        height: 40px;

        font-size: 11px;
    }

}

/* =========================================================
   FILTRE MARQUES
   Toute la ligne est interactive
========================================================= */

.wc-brand-list-layered-nav-product_brand .wc-layered-nav-term {
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Effet au survol */
.wc-brand-list-layered-nav-product_brand .wc-layered-nav-term:hover {
    color: #c7d900;
}

/* Le lien */
.wc-brand-list-layered-nav-product_brand .wc-layered-nav-term a {
    color: inherit;
}

/* Le compteur */
.wc-brand-list-layered-nav-product_brand .wc-layered-nav-term .count {
    color: #272727;
}

/* =========================================================
   PAGE DE RÉSULTATS DE RECHERCHE
   Uniformisée avec les pages Boutique / Catégories
   ========================================================= */

.vapot-search-page {
    background: #fff;
}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.vapot-search-page .col-full {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}


/* =========================================================
   FIL D'ARIANE
   ========================================================= */

.vapot-search-page .woocommerce-breadcrumb {
    margin: 25px 0 45px;
    padding: 0;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #777;
}

.vapot-search-page .woocommerce-breadcrumb a {
    color: #555;
    text-decoration: none;
}

.vapot-search-page .woocommerce-breadcrumb a:hover {
    color: #c7d900;
}


/* =========================================================
   STRUCTURE SIDEBAR + PRODUITS
   ========================================================= */

.vapot-shop-layout {
    display: grid;

    grid-template-columns: 25% 75%;

    gap: 0;

    width: 100%;
    margin: 0;

    align-items: start;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.vapot-shop-layout #secondary {
    width: 100%;
    margin: 0;
    padding-right: 35px;
    box-sizing: border-box;
}


/* =========================================================
   CONTENU PRINCIPAL
   ========================================================= */

.vapot-shop-layout #main {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   TITRE DES RÉSULTATS
   ========================================================= */

.vapot-search-page .woocommerce-products-header {
    margin: 0 0 30px;
    padding: 0;
}

.vapot-search-page .woocommerce-products-header__title {
    margin: 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;

    color: #303030;
}

.vapot-search-page .search-term {
    color: #7c52b8;
}


/* =========================================================
   NOMBRE DE RÉSULTATS
   ========================================================= */

.vapot-search-results-header {
    margin: 0 0 25px;
}

.vapot-search-results-header .woocommerce-result-count {
    margin: 0;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #777;
}


/* =========================================================
   GRILLE DES PRODUITS
   ========================================================= */

.vapot-search-page ul.products {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 30px;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}


/* Annule les largeurs WooCommerce */
.vapot-search-page ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.vapot-pagination {
    margin: 50px 0;
    text-align: center;
}

.vapot-pagination ul {
    display: flex;
    justify-content: center;
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.vapot-pagination li {
    margin: 0;
    padding: 0;
}

.vapot-pagination a,
.vapot-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding: 0 10px;

    font-family: 'Inter', sans-serif;
    font-size: 14px;

    text-decoration: none;

    background: #f5f5f5;
    color: #30343b;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.vapot-pagination a:hover,
.vapot-pagination .current {
    background: #30343b;
    color: #fff;
}


/* =========================================================
   AUCUN RÉSULTAT
   ========================================================= */

.vapot-no-results {
    padding: 50px 0;
    text-align: center;
}

.vapot-no-results h2 {
    margin-bottom: 15px;

    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #303030;
}

.vapot-no-results p {
    margin-bottom: 25px;

    font-family: 'Inter', sans-serif;
    color: #777;
}

.vapot-no-results .button {
    display: inline-block;

    padding: 13px 25px;

    background: #30343b;
    color: #fff;

    text-decoration: none;
}

.vapot-no-results .button:hover {
    background: #c7d900;
    color: #111;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media (max-width: 1000px) {

    .vapot-shop-layout {
        grid-template-columns: 25% 75%;
        gap: 0;
    }

    .vapot-shop-layout #secondary {
        padding-right: 25px;
    }

    .vapot-search-page ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .vapot-search-page .col-full {
        width: 100%;
        max-width: none;
        padding-left: 15px;
        padding-right: 15px;
    }

    .vapot-shop-layout {
        display: block;
        width: 100%;
    }

    .vapot-shop-layout #secondary {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .vapot-shop-layout #main {
        width: 100%;
    }

    .vapot-search-page .woocommerce-products-header__title {
        font-size: 32px;
    }

    .vapot-search-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .vapot-search-page .woocommerce-products-header__title {
        font-size: 27px;
    }

    .vapot-search-page ul.products {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MASQUER LE MENU MOBILE WOOCOMMERCE
   Le site fonctionne uniquement comme catalogue
   ========================================================= */

@media (max-width: 768px) {

    .storefront-handheld-footer-bar {
        display: none !important;
    }

}


/* =========================================================
   RECHERCHE RESPONSIVE
   Champ plus large / bouton plus petit
   ========================================================= */

@media (max-width: 768px) {

    /* Conteneur de la recherche */
    .woocommerce-page #secondary .wp-block-search__inside-wrapper {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    /* Champ de recherche */
    .woocommerce-page #secondary .wp-block-search__input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    /* Bouton Rechercher */
    .woocommerce-page #secondary .wp-block-search__button {
        flex: 0 0 100px;
        width: 100px !important;
        min-width: 100px !important;
        padding: 0 12px;
		font-size: 12px !important;
    }

}

button, input, select, textarea {
  font-size: 12px !important;
}