/**
 * APC FormatSelector - cartes de format sur la fiche produit.
 *
 * Les couleurs sont empruntees au theme hote (variables Bootstrap exposees
 * par Warehouse, Classic et Hummingbird) avec des valeurs de repli neutres :
 * le composant prend la charte du site sans reglage.
 *
 * @author    Graphik Impact <contact@graphik-impact.com>
 * @copyright 2025-2026 Graphik Impact
 * @license   Proprietary
 */

.apc-formats {
    --apc-formats-accent: var(--bs-primary, #2fb5d2);
    --apc-formats-ink: var(--bs-body-color, #232323);
    --apc-formats-ink-soft: var(--bs-secondary-color, #6c757d);
    --apc-formats-line: var(--bs-border-color, #dee2e6);
    --apc-formats-surface: var(--bs-body-bg, #fff);
    --apc-formats-accent-soft: rgba(47, 181, 210, .09);
    --apc-formats-flag: var(--bs-danger, #b5222d);
    --apc-formats-flag-soft: rgba(181, 34, 45, .08);
    --apc-formats-warn: var(--bs-warning-text-emphasis, #8a6100);
    --apc-formats-radius: var(--bs-border-radius, 8px);

    margin: 0 0 1.25rem;

    /* Le bloc se mesure lui-meme : sur une fiche produit en deux colonnes, la
       place disponible n'a rien a voir avec la largeur de la fenetre. */
    container-type: inline-size;
    container-name: apc-formats;
}

.apc-formats__label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--apc-formats-ink);
}

.apc-formats__hint {
    font-size: .75rem;
    font-weight: 400;
    color: var(--apc-formats-ink-soft);
}

/* Jeu de mesures confortable par defaut. Les deux commutateurs plus bas (media
   query de repli, puis container query qui fait autorite quand le navigateur
   la comprend) ne redefinissent que ces variables. */
.apc-formats__grid {
    --apc-format-padding: .8125rem .9375rem;
    --apc-format-title: 1.1875rem;
    --apc-format-meta: .8125rem;
    --apc-format-meta-gap: .5rem;

    display: grid;
    grid-template-columns: repeat(var(--apc-formats-cols-desktop, 2), minmax(0, 1fr));
    gap: .625rem;
}

.apc-format {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .25rem .75rem;
    width: 100%;
    padding: var(--apc-format-padding);
    text-align: left;
    font: inherit;
    color: var(--apc-formats-ink);
    background: var(--apc-formats-surface);
    border: 1.5px solid var(--apc-formats-line);
    border-radius: var(--apc-formats-radius);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}

.apc-format:hover:not([disabled]) {
    border-color: var(--apc-formats-accent);
    transform: translateY(-1px);
}

.apc-format:focus-visible {
    outline: 3px solid var(--apc-formats-accent);
    outline-offset: 2px;
}

.apc-format__label {
    font-size: var(--apc-format-title);
    font-weight: 700;
    line-height: 1.2;
}

.apc-format__price {
    font-size: var(--apc-format-title);
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.apc-format__meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--apc-format-meta-gap);
    font-size: var(--apc-format-meta);
    color: var(--apc-formats-ink-soft);
    font-variant-numeric: tabular-nums;
}

.apc-format__strike {
    color: var(--apc-formats-ink-soft);
    opacity: .75;
    text-decoration-thickness: 1px;
}

.apc-format__strike--total {
    margin-left: .375rem;
    font-size: .8125rem;
    font-weight: 500;
}

.apc-format__save {
    display: inline-block;
    padding: .0625rem .4375rem;
    border-radius: 5px;
    background: var(--apc-formats-flag-soft);
    color: var(--apc-formats-flag);
    font-size: .75rem;
    font-weight: 700;
}

/* Promotion ponctuelle sur une declinaison : a distinguer de la degressivite
   de gamme, qui, elle, est permanente. */
.apc-format__promo {
    display: inline-block;
    padding: .0625rem .4375rem;
    border-radius: 5px;
    background: var(--apc-formats-accent-soft);
    color: var(--apc-formats-accent);
    font-size: .75rem;
    font-weight: 700;
}

.apc-format__minqty {
    font-size: .71875rem;
    font-weight: 600;
    color: var(--apc-formats-ink-soft);
}

.apc-format__stock {
    font-size: .71875rem;
    font-weight: 600;
}

.apc-format__stock--low {
    color: var(--apc-formats-warn);
}

.apc-format__stock--backorder,
.apc-format__stock--unavailable {
    color: var(--apc-formats-flag);
}

.apc-format--selected {
    border-color: var(--apc-formats-accent);
    background: var(--apc-formats-accent-soft);
}

/* Rupture mais commande acceptee : le format garde son prix et se distingue
   par un contour pointille, il reste cliquable. */
.apc-format--backorder {
    border-style: dashed;
    opacity: .82;
}

/* Rupture non commandable : visible pour montrer la gamme complete, mais
   inerte. */
.apc-format--unavailable {
    opacity: .5;
    cursor: not-allowed;
}

.apc-formats__saving {
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--apc-formats-ink-soft);
}

/* Pendant un rafraichissement ajax, PrestaShop reinsere un bloc de cartes tout
   neuf alors que celui deja en place est encore dans la page : on en voyait
   deux pendant une trentaine de millisecondes, le temps que le script fasse le
   menage. Cette regle masque le nouveau venu tant que l'ancien tient l'ecran.

   Le `body:has(...[data-apc-placed])` est essentiel : au tout premier
   chargement, aucun bloc n'est encore place, la regle ne s'applique donc pas et
   les cartes restent visibles meme si le script ne tourne jamais. */
body:has(.apc-formats[data-apc-placed="1"]) .apc-formats:not([data-apc-placed="1"]) {
    display: none;
}

/* Aucun controle natif trouve : le theme ne suit pas la convention attendue.
   Les cartes s'effacent et le menu deroulant du theme reprend la main, plutot
   que d'afficher deux controles dont un inerte. */
.apc-formats--orphan {
    display: none !important;
}

/* Le groupe natif du theme reste dans le DOM (il porte le panier et le stock)
   mais disparait de l'ecran des que les cartes sont en place. */
.apc-formats-native-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Repli pour les navigateurs sans container query : on retombe sur la largeur
   de fenetre, comportement correct sur telephone. */
@media (max-width: 767px) {
    .apc-formats__grid {
        --apc-format-padding: .625rem .75rem;
        --apc-format-title: 1rem;
        --apc-format-meta: .71875rem;
        --apc-format-meta-gap: .375rem;

        grid-template-columns: repeat(var(--apc-formats-cols-mobile, 2), minmax(0, 1fr));
    }
}

/* Fait autorite des que le navigateur sait mesurer le conteneur : c'est la
   place reellement disponible qui decide, pas la fenetre. Une fiche produit en
   deux colonnes sur un ecran de 900 px laisse moins de place qu'un telephone
   en pleine largeur. */
@container apc-formats (max-width: 420px) {
    .apc-formats__grid {
        --apc-format-padding: .625rem .75rem;
        --apc-format-title: 1rem;
        --apc-format-meta: .71875rem;
        --apc-format-meta-gap: .375rem;

        grid-template-columns: repeat(var(--apc-formats-cols-mobile, 2), minmax(0, 1fr));
    }
}

/* Quand la place manque vraiment, c'est le tarif unitaire barre qui part en
   premier : le badge d'economie, lui, reste (decision de maquette validee par
   le client). Mesure : sous 370 px de conteneur, la ligne de meta passait a
   quatre lignes. */
@container apc-formats (max-width: 370px) {
    .apc-format__meta .apc-format__strike {
        display: none;
    }
}

@container apc-formats (min-width: 421px) {
    .apc-formats__grid {
        --apc-format-padding: .8125rem .9375rem;
        --apc-format-title: 1.1875rem;
        --apc-format-meta: .8125rem;
        --apc-format-meta-gap: .5rem;

        grid-template-columns: repeat(var(--apc-formats-cols-desktop, 2), minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .apc-format {
        transition: none;
    }

    .apc-format:hover:not([disabled]) {
        transform: none;
    }
}