/*
 | PREMIER ÉCRAN MOBILE (thème Cartzilla, 19/10/2026, audit conversion des 6 boutiques CMW).
 | Chargé dans le <head> par header-1 et header-1-luxe : il agit avant le premier affichage.
 |
 | Mesure qui l'a fait écrire (une boutique, une fiche produit, 390 x 844, premier visiteur) :
 | trois bandeaux promo empilés = 185 px, fil d'Ariane sur 3 lignes, photo carrée 358 px + bande de
 | vignettes 110 px : le TITRE tombait à 916 px, sous le pli (844), et le bandeau cookies (235 px)
 | mangeait le bas de l'écran. Sur 30 jours : 0,86 % d'ajout au panier sur mobile, 2,9 % sur ordinateur.
 |
 | Ce que fait ce fichier, SOUS 576 PX SEULEMENT (au-delà, rien ne change) :
 |   1. bandeaux promo : le motif de soldes tient sur UNE ligne ; le bandeau des paliers de remise
 |      disparaît quand le motif de soldes est affiché (les paliers restent annoncés au panier et sur
 |      ordinateur), sinon il tient lui aussi sur une ligne ;
 |   2. barre d'annonce : flèches à zone tactile de 32 px (elles faisaient 18 px) ;
 |   3. fiche produit standard (pas l'éditoriale, qui a sa propre mise en page) : fil d'Ariane sur une
 |      ligne, photo en 4:3 au lieu de carrée, vignettes de 56 px, catégorie au-dessus du titre retirée
 |      (elle est déjà dans le fil d'Ariane).
 | Sélecteurs doublés (`.cz-sale-season.cz-sale-season`) : les partials des bandeaux posent leur <style> dans le
 | <body>, APRÈS cette feuille ; à spécificité égale ils gagneraient.
 | Couleurs : aucune ici, tout reste sur les variables du site.
 */
@media (max-width: 575.98px) {
    /* 1. Bandeaux promo ------------------------------------------------------------------- */
    .cz-sale-season.cz-sale-season .cz-ss-inner {
        flex-wrap: nowrap;
        gap: .5rem;
        padding: .25rem 0;
        font-size: .75rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
    }
    .cz-sale-season.cz-sale-season .cz-ss-inner { gap: .4rem; font-size: .6875rem; }
    .cz-sale-season.cz-sale-season .cz-ss-inner > span { flex-shrink: 0; }
    /* Seule l'offre peut se couper (« Jusqu’à −2… ») : le nom de la période et l'urgence restent lisibles. */
    .cz-sale-season.cz-sale-season .cz-ss-inner > .text-body-secondary { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .cz-sale-season.cz-sale-season .cz-ss-label { letter-spacing: 0; }

    .cz-sale-season + .cz-promo-tiers { display: none; }

    .cz-promo-tiers.cz-promo-tiers .cz-pt-note { display: none !important; }
    .cz-promo-tiers.cz-promo-tiers .cz-pt-cell {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: .25rem;
        padding: .25rem .25rem;
    }
    .cz-promo-tiers.cz-promo-tiers .cz-pt-pct { font-size: .8125rem !important; }
    .cz-promo-tiers.cz-promo-tiers .cz-pt-qty { font-size: .6875rem; white-space: nowrap; }
    .cz-promo-tiers.cz-promo-tiers .cz-pt-qty-long { display: none; }
    .cz-promo-tiers.cz-promo-tiers .cz-pt-qty-short { display: inline !important; }

    /* 2. Barre d'annonce : zone tactile des flèches -------------------------------------- */
    #czTopbarPrev, #czTopbarNext,
    [id^="czTopbarPrev-"], [id^="czTopbarNext-"] {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: -.375rem 0;
    }

    /* 3. Fiche produit standard ------------------------------------------------------------ */
    main.cz-product-single:not(.cz-ps-editorial) nav[aria-label="breadcrumb"] { margin-top: .5rem !important; }
    main.cz-product-single:not(.cz-ps-editorial) .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: .5rem;
        font-size: .8125rem;
    }
    main.cz-product-single:not(.cz-ps-editorial) .breadcrumb-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    main.cz-product-single:not(.cz-ps-editorial) .breadcrumb-item:first-child { flex-shrink: 0; }
    /* Le nom du produit est le titre juste en dessous : inutile de le répéter dans le fil. */
    main.cz-product-single:not(.cz-ps-editorial) .breadcrumb-item.active { display: none; }

    main.cz-product-single:not(.cz-ps-editorial) .cz-gallery [data-cz-preview] .ratio-1x1 { --cz-aspect-ratio: 75%; }
    main.cz-product-single:not(.cz-ps-editorial) .cz-thumbs-bottom { margin-top: .5rem !important; }
    main.cz-product-single:not(.cz-ps-editorial) .cz-thumbs-bottom .cz-thumb { width: 56px !important; }
    main.cz-product-single:not(.cz-ps-editorial) .row > :has(> .cz-gallery) { margin-bottom: .75rem !important; }
    main.cz-product-single:not(.cz-ps-editorial) .cz-ps-category { display: none; }
}