/* =====================================================================
   En-tête mobile (≤767px), façon appli :
   1. (barre grise du haut : texte défilant du thème, inchangé) ;
   2. recherche en capsule pleine largeur sous le logo ;
   3. bulles catégories réduites : 5 visibles (bulle « Catégories » comprise),
      les suivantes au glisser.

   Pour revenir à l'ancien affichage : retirer le <link> de ce fichier dans
   templates/base.html.twig (les éléments ajoutés restent masqués par défaut).
   ===================================================================== */

.header-mobile-search {
    display: none;
}

@media (max-width: 767.98px) {
    /* --- 2. Recherche sous le logo -------------------------------------- */
    .header-middle .container {
        flex-wrap: wrap;
    }

    /* Le thème met 3.2rem au-dessus et au-dessous : la recherche ajoute déjà sa marge. */
    .header .header-middle {
        padding-top: 1.2rem;
        padding-bottom: 0;
    }

    .header-mobile-search {
        position: relative;
        display: flex;
        flex: 0 0 100%;
        align-items: center;
        order: 3;
        height: 5rem;
        margin: .9rem 0 1.2rem;
        padding: 0 .4rem 0 1.4rem;
        background: #f1f2f4;
        border: 1px solid transparent;
        border-radius: 999px;
        transition: border-color .2s ease, background-color .2s ease;
    }

    .header-mobile-search:focus-within {
        background: #fff;
        border-color: #F78116;
    }

    .header-mobile-search__icon {
        flex: 0 0 auto;
        color: #555;
        font-size: 1.6rem;
    }

    .header-mobile-search input.form-control {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        min-height: 0;
        padding: 0 1rem;
        color: #222;
        background: transparent;
        border: 0;
        font-size: 1.4rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .header-mobile-search input.form-control::placeholder {
        color: #888;
    }

    .header-mobile-search input.form-control::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .header-mobile-search__btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 4.4rem;
        height: 4rem;
        color: #fff;
        background: #F78116;
        border: 0;
        border-radius: 999px;
        font-size: 1.6rem;
        cursor: pointer;
    }

    .header-mobile-search .search-autocomplete-results {
        margin-top: .6rem;
        border-color: #ececec;
        border-radius: 1.2rem;
        overflow: hidden;
    }

    /* --- 3. Bulles catégories : 5 visibles ------------------------------
       Largeur d'un item w = (largeur de la barre − 4 × 10px) / 5 :
       - bulle « Catégories » : 1/5 de la barre (hors gouttières) + 10px de marge ;
       - carrousel : le reste, où chaque bulle vaut 1/4 de sa largeur moins
         les 3 espaces de 10px (spaceBetween du Swiper). Les deux calculs
         donnent la même largeur w. */
    .category-wrapper.category-bubble-bar > .category-circle-dropdown {
        flex: 0 0 calc((100% - 40px) / 5);
        max-width: calc((100% - 40px) / 5);
        margin: 0 10px 0 0;
        padding: 0;
    }

    /* Le thème (demo12) remonte .category-wrapper de 1.9rem : sous la recherche,
       la bande blanche des pages boutique / produits la recouvrait. */
    .category-wrapper.category-bubble-bar {
        margin-top: 0;
        padding-top: .8rem !important;
    }

    .category-bubble-bar .category-circle-toggle,
    .category-wrapper.category-bubble-bar .category-ellipse .icon-box.icon-colored-circle {
        display: block;
        width: 100%;
    }

    .category-bubble-bar .category-bubble-slider .category-bubble-slider-swiper {
        padding: 0;
    }

    .category-bubble-bar .category-bubble-slider .swiper-slide {
        width: calc((100% - 30px) / 4);
        padding: 0;
    }

    .category-wrapper.category-bubble-bar .category-ellipse .category-media,
    .category-wrapper.category-bubble-bar .category-ellipse .icon-box.icon-colored-circle .icon-box-icon {
        width: 100%;
        min-width: 0;
        /* max-width: 5.6rem; */
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .category-wrapper.category-bubble-bar .category-ellipse .category-media i,
    .category-wrapper.category-bubble-bar .category-ellipse .icon-box.icon-colored-circle .icon-box-icon i {
        font-size: 2.2rem;
    }

    .category-wrapper.category-bubble-bar .category-ellipse .category-content {
        margin-top: .6rem;
        padding: 0;
    }

    .category-wrapper.category-bubble-bar .category-ellipse .category-name,
    .category-bubble-bar .category-bubble-slider .category-name {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Flèches : seule « suivant » reste, en petit rond au bord droit, centrée
       sur les bulles ; le glisser reste le geste principal. */
    .category-bubble-bar .category-bubble-slider .swiper-button-prev {
        display: none;
    }

    .category-bubble-bar .category-bubble-slider .swiper-button-next {
        top: 2.8rem;
        right: -.6rem;
        width: 3.2rem;
        height: 3.2rem;
        border-width: .3rem;
        font-size: 1.1rem;
    }

    .category-bubble-bar .category-bubble-slider .swiper-button-next.swiper-button-disabled {
        display: none;
    }
}