/* =====================================================================
   Améliorations UX/UI (branche refonte-design-wolmart-demo12-v3-ux).

   1. Tuile produit (partials/_homepage_product_tile.html.twig, utilisée
      partout : accueil, boutique, catalogue, produits similaires…)
      - nom sur 2 lignes (au lieu d'une ligne tronquée) ;
      - prix toujours visible + bouton panier rond permanent (l'ancien lien
        « Ajouter au panier » n'apparaissait qu'au survol, donc jamais au
        doigt) ; coche verte de confirmation (.is-added, cart.js) ;
      - pastille « −X % » ; prix indisponible discret ; rupture estompée.
   2. Focus clavier visible et cohérent (accessibilité).
   3. Header collant : ombre douce quand il se fixe au défilement.
   4. Bulles catégories : retour visuel au survol / focus.
   5. Panier vide : état vide explicite avec action.

   Les tuiles sont stylées par plusieurs couches plus spécifiques (thème,
   app.css, home-redesign.css, site-v2.css) : les quelques propriétés
   reprises ici le sont avec !important, volontairement.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tuile produit
   --------------------------------------------------------------------- */
.product.product-image-gap .product-details {
    display: flex;
    flex-direction: column;
}

/* Nom : 2 lignes, hauteur réservée pour que les prix restent alignés d'une
   tuile à l'autre. */
.product.product-image-gap .product-details .product-name {
    display: -webkit-box !important;
    min-height: calc(2 * 1.35em);
    margin-bottom: .6rem !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.35 !important;
}

/* Prix + bouton panier sur une ligne, prix TOUJOURS visible (le thème le
   masquait au survol pour montrer le lien « Ajouter au panier »). */
.product.product-image-gap .product-pa-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 4rem !important;
    margin-top: auto;
}

.product.product-image-gap .product-pa-wrapper .product-price,
.product.product-image-gap:hover .product-pa-wrapper .product-price {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .6rem;
    min-width: 0;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-variant-numeric: tabular-nums;
}

.product.product-image-gap .product-pa-wrapper .product-price .new-price {
    white-space: nowrap;
}

.product.product-image-gap .product-pa-wrapper .product-price .old-price {
    color: #9aa1ad !important;
    font-size: .8em;
    font-weight: 400 !important;
    white-space: nowrap;
}

.product.product-image-gap .product-price-unavailable {
    color: #8a93a3;
    font-size: 1.25rem;
    font-weight: 500;
}

/* L'ancien lien d'ajout (survol) n'existe plus dans la tuile ; au cas où un
   gabarit l'aurait encore, il ne recouvre plus le prix. */
.product.product-image-gap .product-pa-wrapper > .product-action {
    display: none !important;
}

/* Bouton panier : cible tactile de 4rem, pastille orange douce. */
.tile-cart-btn {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: 1px solid #fde1c6;
    border-radius: 50%;
    background: #fff7ef;
    color: #e06d05;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

/* « + » Font Awesome : un peu plus petit que l'ancienne icône panier,
   même taille que le « + » du sélecteur de quantité. */
.tile-cart-btn .fa-plus {
    font-size: 1.4rem;
}

.tile-cart-btn:hover,
.tile-cart-btn:focus-visible {
    border-color: #F78116;
    background: #F78116;
    color: #fff;
}

.tile-cart-btn:active {
    transform: scale(.92);
}

.tile-cart-btn:disabled {
    cursor: progress;
    opacity: .6;
}

/* Ajout réussi : coche verte (posée ~1,6 s par cart.js). */
.tile-cart-btn.is-added {
    border-color: #2eae4e;
    background: #2eae4e;
    color: #fff;
}

.tile-cart-btn.is-added i::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Produit déjà en panier : la pastille panier devient une pastille sombre
   portant la quantité ; au survol / focus (ou toucher → .is-open via cart.js)
   elle se déroule vers la gauche en sélecteur corbeille|− · qté · +.
   L'ancrage à droite + justify-content: flex-end fait déborder (et masquer)
   le contenu côté gauche tant que la capsule est repliée. */
.tile-cart {
    position: relative;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
}

.tile-cart.is-in-cart .tile-cart-btn {
    visibility: hidden;
}

.tile-cart-stepper {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    min-width: 4rem;
    max-width: 4rem;
    height: 4rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    transition: max-width .25s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tile-cart.is-in-cart .tile-cart-stepper {
    display: flex;
}

.tile-cart.is-open .tile-cart-stepper,
.tile-cart.is-in-cart:focus-within .tile-cart-stepper {
    z-index: 3;
    max-width: 13rem;
    padding-left: .3rem;
    border-color: #e6e8ee;
    background: #fff;
    box-shadow: 0 .4rem 1.4rem rgba(23, 32, 64, .16);
}

@media (hover: hover) {
    .tile-cart.is-in-cart:hover .tile-cart-stepper {
        z-index: 3;
        max-width: 13rem;
        padding-left: .3rem;
        border-color: #e6e8ee;
        background: #fff;
        box-shadow: 0 .4rem 1.4rem rgba(23, 32, 64, .16);
    }
}

.tile-cart-stepper button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.tile-cart-stepper__minus {
    width: 3.4rem;
    height: 3.4rem;
    background: transparent;
    color: #333;
    font-size: 1.5rem;
    transition: background-color .2s ease, color .2s ease;
}

.tile-cart-stepper__minus:hover,
.tile-cart-stepper__minus:focus-visible {
    background: #f3f4f7;
    color: #e5322a;
}

.tile-cart.is-multi .tile-cart-stepper__minus:hover,
.tile-cart.is-multi .tile-cart-stepper__minus:focus-visible {
    color: #333;
}

.tile-cart-stepper__dec,
.tile-cart.is-multi .tile-cart-stepper__trash {
    display: none;
}

.tile-cart.is-multi .tile-cart-stepper__dec {
    display: inline;
}

.tile-cart-stepper__qty {
    flex: 0 0 auto;
    min-width: 2.6rem;
    color: #222;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.tile-cart-stepper__plus {
    position: relative;
    width: 4rem;
    min-width: 4rem;
    height: 4rem;
    margin-right: -1px;
    background: #23262f;
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 .2rem .6rem rgba(23, 32, 64, .18);
    transition: background-color .2s ease, transform .15s ease;
}

/* Survol réservé aux pointeurs : sur écran tactile il resterait collé
   après un toucher et peindrait la pastille de quantité en orange. */
.tile-cart-stepper__plus:focus-visible {
    background: #F78116;
}

@media (hover: hover) {
    .tile-cart-stepper__plus:hover {
        background: #F78116;
    }
}

.tile-cart-stepper__plus:active {
    transform: scale(.92);
}

.tile-cart-stepper__plus:disabled {
    cursor: not-allowed;
    background: #9aa0ad;
}

/* Replié : la pastille sombre montre la quantité ; déroulé : le « + ». */
.tile-cart-stepper__plus .fa-plus {
    display: none;
}

.tile-cart-stepper__badge {
    font-size: 1.5rem;
    font-weight: 600;
}

.tile-cart.is-open .tile-cart-stepper__plus .fa-plus,
.tile-cart.is-in-cart:focus-within .tile-cart-stepper__plus .fa-plus {
    display: inline;
}

.tile-cart.is-open .tile-cart-stepper__badge,
.tile-cart.is-in-cart:focus-within .tile-cart-stepper__badge {
    display: none;
}

@media (hover: hover) {
    .tile-cart.is-in-cart:hover .tile-cart-stepper__plus .fa-plus {
        display: inline;
    }

    .tile-cart.is-in-cart:hover .tile-cart-stepper__badge {
        display: none;
    }
}

/* Produit à plusieurs variantes (.tile-cart--picker) : le « + » ouvre la popup
   « Choisir une option » (components/variant-picker.css). En panier, la
   pastille sombre porte le total toutes variantes confondues ; un clic
   rouvre la popup (pas de sélecteur au survol : il faut choisir la variante). */
.tile-cart-picker-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #23262f;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 .2rem .6rem rgba(23, 32, 64, .18);
    transition: background-color .2s ease, transform .15s ease;
}

.tile-cart--picker.is-in-cart .tile-cart-picker-badge {
    display: inline-flex;
}

.tile-cart-picker-badge:focus-visible {
    background: #F78116;
}

.tile-cart-picker-badge:active {
    transform: scale(.92);
}

@media (hover: hover) {
    .tile-cart-picker-badge:hover {
        background: #F78116;
    }
}

/* Sélecteur de quantité de la popup d'options (.is-static) : toujours déplié,
   dans le flux, quantité 0 comprise. */
.tile-cart.is-static {
    width: auto;
    height: auto;
}

.tile-cart.is-static .tile-cart-stepper {
    position: static;
    display: inline-flex;
    max-width: none;
    box-shadow: none;
}

.tile-cart-stepper__minus:disabled {
    cursor: default;
    opacity: .4;
}

/* Mobile (tuiles de ~160px) : le prix prend toute la ligne, le bouton
   devient une pastille flottante sur le coin bas-droit de l'image. */
@media (max-width: 575.98px) {
    .product.product-image-gap .product-details {
        position: relative;
    }

    /* z-index 11 : au-dessus du bandeau « Voir le produit » du thème
       (.product-action, z-index 10) qui monte sur l'image au survol — sur
       mobile ce survol reste « collé » après le toucher d'ajout au panier. */
    .product.product-image-gap .tile-cart {
        position: absolute;
        top: -2.4rem;
        right: .4rem;
        z-index: 11;
        width: 4.2rem;
        height: 4.2rem;
    }

    .product.product-image-gap .tile-cart-stepper,
    .product.product-image-gap .tile-cart-stepper__plus {
        min-width: 4.2rem;
        height: 4.2rem;
    }

    .product.product-image-gap .tile-cart-stepper__plus {
        width: 4.2rem;
    }

    .product.product-image-gap .tile-cart:not(.is-open) .tile-cart-stepper {
        max-width: 4.2rem;
    }

    .product.product-image-gap .tile-cart-btn {
        width: 4.2rem;
        height: 4.2rem;
        border-color: #fff;
        background: #fff;
        color: #e06d05;
        box-shadow: 0 .2rem .8rem rgba(23, 32, 64, .16);
    }

    /* Le thème rend la ligne de prix « relative » : la pastille doit se
       positionner par rapport au bloc détails (haut = bas de l'image). */
    .product.product-image-gap .product-pa-wrapper {
        position: static !important;
        min-height: 0 !important;
    }
}

.product.product-image-gap .product-pa-wrapper .product-price {
    overflow: visible !important;
}

.product.product-image-gap .product-price-unavailable {
    white-space: normal;
    line-height: 1.3;
}

/* Pastille de remise : la plus visible du groupe d'étiquettes. */
.product-label.label-discount {
    background: #e5322a;
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* Rupture de stock : image estompée (le compteur dit déjà « Rupture »). */
.product.product-image-gap.is-out-of-stock .product-media img {
    opacity: .55;
    filter: grayscale(.35);
}

.product.product-image-gap.is-out-of-stock .product-name a {
    color: #6b7385;
}

/* Cœur favoris : zone tactile élargie sans changer son apparence. */
.product.product-image-gap .product-details > .btn-wishlist::after {
    content: "";
    position: absolute;
    inset: -.9rem;
}

/* ---------------------------------------------------------------------
   2. Focus clavier visible (les champs gardent leur propre état focus)
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #F78116;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. Header collant : ombre quand il se fixe en haut au défilement
   --------------------------------------------------------------------- */
.header-middle.sticky-content.fixed {
    box-shadow: 0 .2rem 1.2rem rgba(23, 32, 64, .08);
}

/* ---------------------------------------------------------------------
   4. Bulles catégories : retour au survol / focus
   --------------------------------------------------------------------- */
.category-bubble-bar .category-ellipse .category-media,
.category-bubble-bar .category-ellipse .icon-box-icon {
    transition: transform .2s ease, box-shadow .2s ease;
}

.category-bubble-bar .category-ellipse:hover .category-media,
.category-bubble-bar .category-ellipse:focus-within .category-media,
.category-bubble-bar .category-circle-dropdown:hover .icon-box-icon {
    box-shadow: 0 0 0 .3rem rgba(247, 129, 22, .22);
    transform: translateY(-2px);
}

.category-bubble-bar .category-ellipse:hover .category-name a,
.category-bubble-bar .category-ellipse:focus-within .category-name a {
    color: #e06d05;
}

/* ---------------------------------------------------------------------
   5. Panier vide
   --------------------------------------------------------------------- */
.cart-empty-state {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem 0;
    text-align: center;
}

.cart-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    margin-bottom: 2rem;
    border-radius: 50%;
    background: #fff7ef;
    color: #F78116;
    font-size: 3.4rem;
}

.cart-empty-state__title {
    margin-bottom: .8rem;
    color: #1d2433;
    font-size: 2rem;
    font-weight: 700;
}

.cart-empty-state__text {
    margin-bottom: 2.4rem;
    color: #6b7385;
}

.cart-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.mini-cart-empty {
    padding: 3.2rem 2rem;
    text-align: center;
}

.mini-cart-empty i {
    display: block;
    margin-bottom: 1.2rem;
    color: #F78116;
    font-size: 3rem;
}

.mini-cart-empty p {
    margin-bottom: 1.6rem;
    color: #6b7385;
}

@media (prefers-reduced-motion: reduce) {
    .tile-cart-btn,
    .tile-cart-stepper,
    .tile-cart-stepper button,
    .category-bubble-bar .category-ellipse .category-media,
    .category-bubble-bar .category-ellipse .icon-box-icon {
        transition: none;
    }

    .category-bubble-bar .category-ellipse:hover .category-media,
    .category-bubble-bar .category-ellipse:focus-within .category-media,
    .category-bubble-bar .category-circle-dropdown:hover .icon-box-icon {
        transform: none;
    }
}