/* ==========================================================
 *  a4w_productbundle — Front-office styles
 *  "Souvent achetés ensemble" block
 *
 *  2.0.0 : couleurs, police de titre et rayons lus dans les jetons du thème, avec repli ;
 *  plus aucun texte sous 12 px. Toutes les règles partent de la racine .a4w-bundle
 *  (spécificité 0,2,0) : elles l'emportent sur les réglages provisoires qu'un thème aurait
 *  posés sur les anciennes classes, sans !important. Le bouton est le bouton d'achat du
 *  thème (.btn.btn-primary) : ses états (survol, pressé, désactivé, focus) viennent du thème.
 * ========================================================== */

.a4w-bundle {
    margin: 0 0 96px;
}

/* 2.2.0 (refs#6719) : déclinaison de la fiche non commandable ⇒ bloc masqué ; le JS le rouvre
   quand une déclinaison commandable est choisie. */
.a4w-bundle[hidden] {
    display: none;
}

.a4w-bundle .a4w-bundle-title {
    margin: 0 0 32px;
    text-align: start;
}

/* --- Cadre : produits à gauche, total à droite --- */

.a4w-bundle .a4w-bundle-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: center;
    padding: 32px;
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
}

/* --- Produits --- */

.a4w-bundle .a4w-bundle-items {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.a4w-bundle .a4w-bundle-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex: 0 1 220px;
    min-width: 0;
    margin: 0;
}

.a4w-bundle .a4w-bundle-item-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--border-radius, 3px);
    background-color: var(--light-bg, #FAF7F4);
}

.a4w-bundle .a4w-bundle-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.a4w-bundle .a4w-bundle-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* Case et nom : le nom est le libellé de la case (un clic sur le nom coche ou décoche). */
.a4w-bundle .a4w-bundle-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.a4w-bundle .a4w-bundle-checkbox {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--text-color, #1D191B);
    cursor: pointer;
}

.a4w-bundle .a4w-bundle-product-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-family-title, inherit);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-color, #1D191B);
    cursor: pointer;
}

/* Prix et mention d'indisponibilité alignés sous le nom (case de 20 px + écart de 8 px). */
.a4w-bundle .a4w-bundle-product-price {
    margin-left: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-color, #1D191B);
}

.a4w-bundle .a4w-bundle-unavailable-msg {
    display: none;
    margin-left: 28px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--medium-gray, #565254);
}

/* --- Choix de la déclinaison --- */

.a4w-bundle .a4w-bundle-select {
    display: block;
    width: 100%;
    margin: 0;
}

/* .form-select (Bootstrap 5) dessine le chevron en image de fond : on ne pose que la
   couleur de fond, jamais le raccourci background. */
.a4w-bundle .a4w-bundle-combination-select {
    width: 100%;
    min-height: 44px;
    font-size: 0.875rem;
    color: var(--text-color, #1D191B);
    background-color: var(--white-color, #FFFFFF);
    border: 1px solid var(--input-border-color, #8E8C8D);
    border-radius: var(--border-radius, 3px);
    cursor: pointer;
}

.a4w-bundle .a4w-bundle-combination-select option[disabled] {
    color: var(--muted-color, #6C6A6B);
}

/* --- Signe + entre deux produits, centré sur les images --- */

.a4w-bundle .a4w-bundle-plus {
    flex: 0 0 auto;
    align-self: center;
    margin: -60px 0 0;
    font-family: var(--font-family-title, inherit);
    font-size: 2rem;
    line-height: 1;
    color: var(--muted-color, #6C6A6B);
}

/* --- États --- */

/* Décoché : image atténuée ; le nom reste cliquable pour recocher. */
.a4w-bundle-unchecked .a4w-bundle-img {
    opacity: 0.4;
}

/* Déclinaison non commandable : produit décoché d'office, case verrouillée, mention
   « Indisponible » ; le choix de déclinaison reste ouvert pour revenir à une déclinaison
   disponible. */
.a4w-bundle-unavailable .a4w-bundle-unavailable-msg {
    display: block;
}

.a4w-bundle-unavailable .a4w-bundle-checkbox {
    cursor: not-allowed;
}

/* Produit de la fiche (2.1.0, refs#6726) : case cochée fixe, gardée à pleine opacité (Bootstrap
   atténue une case désactivée). La mention « Ce produit » est retirée en 2.2.0 (refs#6719). */
.a4w-bundle .a4w-bundle-main .a4w-bundle-checkbox:disabled {
    opacity: 1;
    cursor: default;
}

/* --- Total et ajout groupé --- */

.a4w-bundle .a4w-bundle-summary {
    padding-left: 40px;
    border-left: 1px solid var(--border-color, #E4E3E4);
    text-align: center;
}

.a4w-bundle .a4w-bundle-count {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--medium-gray, #565254);
}

.a4w-bundle .a4w-bundle-add-to-cart {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

.a4w-bundle .a4w-bundle-total-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.a4w-bundle .a4w-bundle-add-to-cart.a4w-bundle-loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.a4w-bundle .a4w-bundle-error {
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--alert-danger-color, #9B2C2C);
}

.a4w-bundle .a4w-bundle-mention {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted-color, #6C6A6B);
}

/* Texte réservé aux lecteurs d'écran */
.a4w-bundle .a4w-bundle-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================
 *  Tablette : total sous les produits
 * ========================================================== */

@media (max-width: 991.98px) {
    .a4w-bundle .a4w-bundle-box {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px;
    }

    .a4w-bundle .a4w-bundle-summary {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-color, #E4E3E4);
    }
}

/* ==========================================================
 *  Mobile : produits empilés, image à gauche
 * ========================================================== */

@media (max-width: 767.98px) {
    .a4w-bundle {
        margin-bottom: 64px;
    }

    .a4w-bundle .a4w-bundle-title {
        margin-bottom: 24px;
    }

    .a4w-bundle .a4w-bundle-box {
        padding: 16px;
    }

    .a4w-bundle .a4w-bundle-items {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .a4w-bundle .a4w-bundle-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        flex: 0 0 auto;
        width: 100%;
    }

    .a4w-bundle .a4w-bundle-item-image {
        flex: 0 0 96px;
        width: 96px;
    }

    .a4w-bundle .a4w-bundle-item-body {
        flex: 1 1 auto;
        gap: 8px;
    }

    /* Cible tactile de 44 px : la ligne case + nom. */
    .a4w-bundle .a4w-bundle-check {
        align-items: center;
        min-height: 44px;
    }

    .a4w-bundle .a4w-bundle-checkbox {
        margin-top: 0;
    }

    .a4w-bundle .a4w-bundle-plus {
        margin: 0;
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a4w-bundle .a4w-bundle-img {
        transition: none;
    }
}