/* ==========================================================================
   Audit conversion des fiches produits (5 octobre 2026)
   Barre d'achat collante (F-06 mobile, C-06), « + N offerts » (F-07),
   garanties sous le bouton (F-08), grille 2 × 2 (F-14 / F-23 / C-08), provenance mobile (F-15),
   champ pleine largeur (F-17 : css/product-common.css et product-page.css), tableau comparatif mobile
   (F-18 : css/product-common.css).
   Couleurs : celles du réseau de la fiche (--cf-product-accent…), bouton d'achat orange du site.
   ========================================================================== */

.cf-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Bouton d'achat de la barre ------------------------------------------------------------------- */
.cf-buy-bar__button {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff7f47 55%, #ff9a62 100%);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.1;
    box-shadow: 0 10px 20px -10px rgba(255, 107, 53, 0.9);
    cursor: pointer;
    white-space: nowrap;
}

.cf-buy-bar__button[aria-disabled="true"] {
    background: #d9d3cf;
    box-shadow: none;
    color: #fff;
}

/* --- F-06 / C-06 : barre collante en bas, mobile et tablette ------------------------------------- */
.cf-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--cf-product-border, #f1e4da);
    box-shadow: 0 -10px 26px -16px rgba(20, 33, 61, 0.45);
    font-family: inherit;
    transition: transform 0.25s ease;
}

.cf-buy-bar.is-hidden {
    transform: translateY(115%);
}

.cf-buy-bar__info {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.cf-buy-bar__line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.cf-buy-bar__price {
    font-size: 21px;
    font-weight: 800;
    color: var(--cf-product-ink, #102038);
}

.cf-buy-bar__provenance {
    font-size: 12px;
    color: var(--cf-product-ink-soft, #5f7187);
}

.cf-buy-bar__detail {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    font-size: 12.5px;
    color: var(--cf-product-ink, #102038);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cf-buy-bar__detail .cf-offered {
    display: block;
}

.cf-buy-bar__button {
    flex: 0 0 auto;
    padding: 14px 16px;
    font-size: 14.5px;
}

.cf-offered {
    font-style: normal;
    font-weight: 700;
    color: #1f8a4c;
}

/* Empilés au-dessus de la barre, sans se toucher : la bulle du mini-panier (quand le panier a un
   article), puis le rond « haut de page » (css/tunnel.css, --cf-remonter-bas). */
body.cf-has-buy-bar {
    padding-bottom: 78px;
    --cf-remonter-bas: 96px;
}

body.cf-has-buy-bar:has(.xoo-wsc-product) {
    --cf-remonter-bas: 180px;
}

body.cf-has-buy-bar #ast-scroll-top {
    transition: bottom 0.25s ease;
}

body.cf-has-buy-bar .xoo-wsc-basket {
    bottom: 96px !important;
    transition: bottom 0.25s ease;
}

/* M-01 (fiches standard) : une ligne centrée « 1 000 followers + 100 offerts · Monde », puis le bouton
   orange pleine largeur « Ajouter au panier · 9,90 € » (le prix est dans le bouton). Les fiches
   commentaires gardent leur barre « 3 / 10 · prix » (C-06). */
body:not(.has-comments) .cf-buy-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 9px;
}

body:not(.has-comments) .cf-buy-bar__info {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

body:not(.has-comments) .cf-buy-bar__line {
    order: 2;
}

body:not(.has-comments) .cf-buy-bar__price {
    display: none;
}

body:not(.has-comments) .cf-buy-bar__provenance {
    font-size: 12.5px;
    font-weight: 600;
}

body:not(.has-comments) .cf-buy-bar__detail {
    margin: 0;
    font-size: 13.5px;
    font-weight: 650;
}

body:not(.has-comments) .cf-buy-bar__detail .cf-offered {
    display: inline;
}

/* F-06 (tour 5) : champ requis vide, « Étape suivante : … » dans la couleur d'accent. */
body:not(.has-comments) .cf-buy-bar.is-pending .cf-buy-bar__detail {
    color: #c2481c;
}

body:not(.has-comments) .cf-buy-bar__button {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
}

@media (max-width: 1339px) {
    body.cf-has-buy-bar:not(.has-comments) {
        padding-bottom: 112px;
        --cf-remonter-bas: 122px;
    }

    /* F-19 : avec un article au panier, la bulle se range dans la barre, à droite du bouton (la barre lui
       réserve sa place) : elle ne recouvre plus la page. Le rond « haut de page » reste juste au-dessus
       de la barre, comme sans article. */
    body.cf-has-buy-bar:has(.xoo-wsc-product) {
        --cf-remonter-bas: 96px;
    }

    body.cf-has-buy-bar:not(.has-comments):has(.xoo-wsc-product) {
        --cf-remonter-bas: 122px;
    }

    body.cf-has-buy-bar:has(.xoo-wsc-product) .cf-buy-bar {
        gap: 8px;
        padding-right: 72px;
    }

    /* Commentaires : bouton plus serré pour garder « encore 9 commentaires » entier à côté. */
    body.cf-has-buy-bar.has-comments:has(.xoo-wsc-product) .cf-buy-bar__button {
        padding: 14px 12px;
        font-size: 14px;
    }

    body.cf-has-buy-bar:not(.has-comments):has(.xoo-wsc-product) .cf-buy-bar {
        padding-right: 14px;
    }

    body.cf-has-buy-bar:not(.has-comments):has(.xoo-wsc-product) .cf-buy-bar__button {
        width: auto;
        margin-right: 62px;
    }

    body.cf-has-buy-bar:has(.xoo-wsc-product) .xoo-wsc-basket {
        right: 0 !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        width: 52px !important;
        height: 52px !important;
    }

    body.cf-has-buy-bar:has(.xoo-wsc-product) .xoo-wsc-basket .xoo-wsc-items-count {
        top: -4px !important;
        left: -4px !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        line-height: 22px !important;
    }
}

/* Grand écran : pas de barre collante, la ligne récapitulative et le bouton du formulaire suffisent (F-07). */
@media (min-width: 1340px) {
    .cf-buy-bar {
        display: none;
    }

    body.cf-has-buy-bar {
        padding-bottom: 0;
    }
}

/* --- F-07 : « + N offerts » sur les cartes, ligne récapitulative au-dessus du bouton -------------- */
.cf-offert {
    display: block;
    order: 5;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: #1f8a4c;
}

.cf-order-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: min(100%, 640px);
    margin: 12px auto 0;
    padding: 11px 14px;
    border: 1px solid var(--cf-product-border, #f1e4da);
    border-radius: 14px;
    background: var(--cf-product-surface-alt, #fff8f3);
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.3;
    color: var(--cf-product-ink, #102038);
}

.cf-order-line__what {
    text-align: left;
}

.cf-order-line__what .cf-offered {
    display: block;
}

.cf-order-line__price {
    font-size: 18px;
    white-space: nowrap;
}

/* --- F-08 : garanties, paiement et avis sous le bouton -------------------------------------------- */
/* F-08-pc (tour 5) : « tu centres mieux ». La règle .cf-reassurance du paiement (css/tunnel.css, chargée
   aussi sur les fiches) mettait la marge à 0 : le bloc partait à gauche du bouton. Sur la fiche, il a la
   largeur du bouton (bordure comprise) et se centre dessous, comme la ligne récapitulative au-dessus. */
.cf-reassurance,
form.cart .cf-reassurance {
    flex-basis: 100%;
    box-sizing: border-box;
    width: min(100%, 640px);
    margin: 14px auto 4px;
    font-family: inherit;
}

.cf-reassurance__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-reassurance__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid var(--cf-product-border, #f1e4da);
    border-radius: 14px;
    background: var(--cf-product-surface-alt, #fff8f3);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    color: var(--cf-product-ink, #102038);
}

.cf-reassurance__item strong {
    display: block;
    font-size: 12.5px;
}

.cf-reassurance__icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px -3px rgba(var(--cf-product-accent-rgb, 255, 107, 53), 0.6);
}

.cf-reassurance__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--cf-product-accent, #ff6b35);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cf-reassurance__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0 0; /* paiement au bord gauche des garanties, avis au bord droit */
    font-size: 12.5px;
    color: var(--cf-product-ink-soft, #5f7187);
}

.cf-reassurance__payment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cf-card-logos {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.cf-card-logo {
    display: inline-flex;
    line-height: 0;
}

.cf-card-logo svg {
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(16, 32, 56, 0.08);
}

.cf-reassurance__reviews {
    font-weight: 700;
    color: var(--cf-product-ink, #102038) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.cf-reassurance__stars {
    letter-spacing: 1px;
    color: #f5a623;
    text-decoration: none;
}

@media (min-width: 900px) {
    .cf-reassurance__item {
        flex-direction: row;
        gap: 10px;
        padding: 10px 12px;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .cf-reassurance__footer {
        justify-content: center;
    }
}

/* Tuiles de « Nos garanties » (T-02) : texte sombre, seule la durée garde la couleur du réseau. */
.description-item .cf-tile-text {
    color: inherit;
    font-weight: inherit;
}

.description-item .cf-tile-text .text-brand {
    color: var(--product-color-accent);
    font-weight: 700;
}

/* Tuile paiement de « Nos garanties » : logos alignés sur le texte. */
.description-item[data-cf-tile="paiement"] .cf-card-logos {
    margin-left: 6px;
}

/* F-14 / F-23 (tour 5) : après un tap, « Voir moins » restait bleu (focus des boutons d'Astra). */
html body .cf-qty-toggle-btn:focus,
html body .cf-qty-toggle-btn:active {
    background: rgba(var(--cf-product-accent-rgb, 255, 107, 53), 0.14);
    border-color: rgba(var(--cf-product-accent-rgb, 255, 107, 53), 0.65);
    color: #c94f1d;
}

/* --- F-14 / F-23 / C-08 : grille 2 × 2 sur mobile, badges entiers ---------------------------------- */
@media (max-width: 768px) {
    html body.cf-product-page.single-product div.product form.cart
        ul.variable-items-wrapper.button-variable-items-wrapper.wvs-style-squared[data-attribute_name="attribute_pa_quantity"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    html body.cf-product-page.single-product div.product form.cart
        ul.variable-items-wrapper.button-variable-items-wrapper.wvs-style-squared[data-attribute_name="attribute_pa_quantity"] > li.variable-item {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        grid-column: auto !important;
    }

    /* F-14 / F-23 (tour 5) : 5, 7, 9… paliers visibles : la dernière carte, seule sur sa ligne, garde la
       largeur d'une colonne et se centre (classe posée par js/product-conversion.js). */
    html body.cf-product-page.single-product div.product form.cart
        ul.variable-items-wrapper.button-variable-items-wrapper.wvs-style-squared[data-attribute_name="attribute_pa_quantity"] > li.variable-item.cf-qty-orphan {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: calc((100% - 12px) / 2) !important;
    }

    html body.cf-product-page .cf-quantity-starter-badge,
    html body.cf-product-page .cf-quantity-best-seller-badge {
        max-width: calc(100% - 6px) !important;
        padding: 4px 8px !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
    }

    /* F-15 : une ligne de description et le prix d'entrée sous chaque provenance. */
    html body.cf-product-page ul.variable-items-wrapper[data-attribute_name="attribute_pa_provenance"] > li.variable-item {
        height: auto !important;
    }

    html body.cf-product-page ul.variable-items-wrapper[data-attribute_name="attribute_pa_provenance"] .variant-text--compact {
        display: block !important;
        width: 100%;
        margin-top: 2px;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        white-space: normal;
        color: var(--cf-product-ink-soft, #5f7187);
    }

    html body.cf-product-page ul.variable-items-wrapper[data-attribute_name="attribute_pa_provenance"] .variant-text__sep {
        display: none;
    }

    html body.cf-product-page ul.variable-items-wrapper[data-attribute_name="attribute_pa_provenance"] .variant-text__from {
        display: block;
    }

    html body.cf-product-page ul.variable-items-wrapper[data-attribute_name="attribute_pa_provenance"] .variant-text--compact b {
        font-weight: 800;
        color: var(--cf-product-accent, #ff6b35);
    }
}

/* Les liens « N avis » (en-tête, sous le bouton) arrivent sur les avis sans les coller au haut de l'écran. */
#cf-avis {
    scroll-margin-top: 90px;
}

/* M-01 : le badge « N avis » de l'en-tête mène aux avis ; toute la pastille est cliquable, sans changer
   son apparence. */
html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating {
    position: relative;
}

html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link {
    pointer-events: auto;
    cursor: pointer;
}

html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link:hover,
html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link:focus {
    background: transparent;
    color: var(--product-color-text-primary);
    transform: none;
}

html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link:hover .count,
html body.woocommerce-js div.product div.summary .single-product-category + .woocommerce-product-rating a.woocommerce-review-link:focus .count {
    color: var(--product-color-accent);
}