.a4w-fragrances {
    --cols: 5;
    margin: 24px 0;
    text-align: center;
}

.a4w-fragrances__title {
    font-size: var(--font-size-h2, 1.25rem);
    font-weight: 500;
    text-align: center;
    margin: 0 0 20px;
    letter-spacing: 0.02em;
}

.a4w-fragrances__subtitle {
    max-width: 60ch;
    margin: -8px auto 24px;
    color: var(--medium-gray, #666);
    line-height: 1.6;
}

.a4w-fragrances__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 20px 12px;
}

.a4w-fragrances__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.a4w-fragrances__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--a4w-border-radius, 6px);
    overflow: hidden;
}

.a4w-fragrances__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a4w-fragrances__hover-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    /* Voile translucide : le produit reste visible derriere le texte (1.4.1). */
    background: rgba(255, 255, 255, 0.8);
    background: color-mix(in srgb, var(--a4w-color-bg, #fff) 80%, transparent);
    color: var(--a4w-color-text, #222);
    font-size: 0.85rem;
    line-height: 1.35;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.a4w-fragrances__item:hover .a4w-fragrances__hover-text,
.a4w-fragrances__item:focus-within .a4w-fragrances__hover-text {
    opacity: 1;
}

.a4w-fragrances__label {
    display: inline-flex;
    gap: 4px;
    font-size: 0.9rem;
    line-height: 1.25;
    flex-wrap: wrap;
    justify-content: center;
}

.a4w-fragrances__name {
    font-weight: 500;
}

.a4w-fragrances__qty {
    color: var(--medium-gray, #666);
    white-space: nowrap;
}

.a4w-fragrances__qty-sep {
    margin-right: 2px;
    color: var(--muted-color, #999);
}

.a4w-fragrances__toggle {
    margin-top: 18px;
    padding: 10px 22px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    letter-spacing: 0.05em;
}

.a4w-fragrances__toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Grille : 5 colonnes, 4 sous 992 px. Sous 768 px, carrousel (plus bas). */
@media (max-width: 991.98px) { .a4w-fragrances { --cols: 4; } }

/* Troncature : deux lignes visibles tant que la section n'est pas dépliée (5 puis 4 colonnes). */
.a4w-fragrances:not(.is-expanded) .a4w-fragrances__item:nth-child(n+11) {
    display: none;
}

@media (max-width: 991.98px) {
    .a4w-fragrances:not(.is-expanded) .a4w-fragrances__item:nth-child(n+9) {
        display: none;
    }
}

/* Mobile (1.4.2) : une seule ligne qui défile, 2 cartes entières et l'amorce de la 3e,
   arrêt magnétique sur chaque carte, sans barre de défilement. La hauteur ne dépend plus
   du nombre de parfums. front.js rend la ligne focalisable quand elle déborde. */
@media (max-width: 767.98px) {
    .a4w-fragrances__grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .a4w-fragrances__grid::-webkit-scrollbar {
        display: none;
    }

    .a4w-fragrances__grid:focus-visible {
        outline: 2px solid var(--accent-ink-color, #222);
        outline-offset: 2px;
    }

    .a4w-fragrances__item {
        flex: 0 0 42%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Tous les parfums sur la ligne : la troncature de la grille ne s'applique pas
       (même spécificité que les règles :nth-child(n+9) et (n+11), déclarée après). */
    .a4w-fragrances:not(.is-expanded) .a4w-fragrances__item:nth-child(n) {
        display: flex;
    }

    /* Image entière : cadre 120 × 140, ni déformée ni recadrée. */
    .a4w-fragrances__media {
        aspect-ratio: 120 / 140;
    }

    .a4w-fragrances__img {
        object-fit: contain;
    }

    .a4w-fragrances__toggle {
        display: none;
    }
}

/* Écran tactile : pas de survol, le texte du survol s'affiche sous l'image. */
@media (max-width: 767.98px) and (hover: none) {
    .a4w-fragrances__media {
        aspect-ratio: auto;
        overflow: visible;
    }

    .a4w-fragrances__img {
        height: auto;
        aspect-ratio: 120 / 140;
        border-radius: var(--a4w-border-radius, 6px);
    }

    .a4w-fragrances__hover-text {
        position: static;
        padding: 8px 0 0;
        background: none;
        color: var(--medium-gray, #666);
        font-size: var(--font-size-small, 0.8125rem);
        opacity: 1;
        overflow: visible;
    }
}