/* ============================================================
 * alter-product.css
 * Scope  : Product Detail Page (PDP) + Product Tabs + Splide tab nav
 * Source : extracted from custom.css l.518-1240 at Lot 5d (2026-04-24)
 * Loaded : declared in theme.yml, priority 80 (before custom.css @ 1000)
 * ============================================================ */

/* ============ PRODUCT PAGE ============ */
#product .product-container .product-accessories{padding: 0}
.js-mailalert .btn{margin-top:8px!important;
    white-space: normal;background: var(--as-amaranth);font-weight: 500;text-transform: initial }
.js-mailalert .alert{border-radius: 0}
#product .fancybox-opened .fancybox-skin{background: var(--as-white)}
#product .product-add-to-cart  .product-price{    font-size: 26px;border-top:1px solid var(--as-grey-100);width: 100%;padding: 24px 20px 0 20px;
    font-weight: 500;color:var(--as-grey-900)}
.product-additional-info .tabs{margin: 0}
select.form-control:not([size]):not([multiple]){height: 3rem}
.d-block.d-md-none {
    display: none !important;
}

#bottom-product {
    /* Fond blanc pleine largeur : margin négative = annule le padding latéral 64px
       du #wrapper (full-width, sans max-width) → le blanc atteint les bords. Le
       padding latéral 64px réaligne le contenu sur le haut de page. Top 32px = le
       titre « En savoir plus » à 32px sous le haut de la section. (2026-06-02) */
    padding: 32px 64px 64px;
    background: var(--as-white);
    margin-left: -64px;
    margin-right: -64px;
}

#product .product-accessories, #product .featured-products {
    padding: 47px 64px;
    background: var(--as-grey-100);
    margin: 0
}

#product .product-accessories .h5, #product .featured-products .h5 {
    font-size: 28px;
    font-weight: 500;
    line-height: 31px;
    margin-bottom: 47px;
    display: flex;
    align-items: center
}

#product .product-accessories .h5 img, #product .featured-products .h5 img {
    margin-right: 16px
}

#bottom-product > .container > .row {
    margin: 0
}

#bottom-product > .container {
    padding: 0
}

#third-col {
    position: relative;
    top: -50px
}

/* Bouton « Réserver en boutique » : il était collé pile à la fin de la section
   produit (gap 0) → marge basse 32px (rythme de section). (retour user 2026-06-02) */
.third-col-container .alterck-reserve-pdp {
    margin-bottom: 32px;
}

#product #wrapper {
    padding: 32px 64px;
    background: var(--as-grey-100);
}

#product #wrapper .container {
    padding: 0
}

#product #content {
    max-width: 100%
}


.first-column, .second-column {
    margin-top: 32px
}
.second-column{position: relative}

#product h1 {
    font-size: 36px;
    text-transform: capitalize;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: .1rem;
}


#product .product-information {
    background: var(--as-white)
}

.brand-product {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.05rem;
    text-transform: uppercase;color:var(--as-grey-500);
}


.viewed-products{margin-top: 0}

.expe-today {
    margin: 24px 0 27px 0;

    display: flex;
    align-items: center;
    justify-content: start
}

.expe-today img {
    margin-right: 12px
}

.expe-today p {
    margin: 0;
    line-height: 11px
}

.third-col-container {
    position: relative;

}
.breadcrumb{margin: 0}

/* -----------------------------------------------------------
   Lot 7-3 — LISTING AREP DESKTOP (BRC-002)
   Migrated from custom.css l.479-489 (#js-product-list + #category h1+.breadcrumb).
   Mobile rule preserved at @media (max-width: 991.98px) ~l.1035.
   Pattern Lot 6g-1 cascade-fix : desktop wrapped in @media (min-width: 992px).
   ----------------------------------------------------------- */
#js-product-list {
    margin: 0;
}
@media (min-width: 992px) {
    #category h1,
    #category .breadcrumb {
        padding-left: 16px;
        padding-right: 16px;
    }
    #js-product-list {
        padding: 0 16px;
    }
}
@media (min-width: 1900px) {
    #category h1,
    #category .breadcrumb {
        padding-left: 64px;
        padding-right: 64px;
    }
    #js-product-list {
        padding: 0 64px;
        margin: 0;
    }
}

.product-badges-info {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: 16px;
}

.wishlist-button-add {
    margin: 0
}

.product-cover img {
    border-radius: 8px;
    box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.05);
}

#product .second-column .product-description {
    display: inline-block;
    width: 100%;
    margin-top: 24px
}

#product .second-column .product-description p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px
}

#product .third-col-content {
    border-radius: var(--as-radius-main, 8px);
    background: var(--as-card-bg, var(--as-white));
    box-shadow: var(--as-shadow-main, 4px 4px 15px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}

/* AJOUTER CTA — Lot G.4.C, Figma node 23:1015 Add to Cart Component.
 * Amaranth pill bottom of the sidebar card. 16px Brockmann Medium uppercase
 * tracking -1%, icon 26×36 white, gap 16 between icon + label, padding 10/y
 * → implicit height ~56px. Hover keeps the dark-gradient state from the
 * legacy v2 theme. Disabled bg grey-300 + cursor not-allowed (G.4.C.2). */
.third-col-content .add-to-cart {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--as-amaranth);
    color: var(--as-white, #ffffff);
    font-family: 'Brockmann', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    text-transform: uppercase;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border: none;
}

.third-col-content .add-to-cart img {
    width: 26px;
    height: 36px;
    margin: 0;
    flex: 0 0 auto;
}

.third-col-content .add-to-cart > span {
    padding-left: 0;
}

.third-col-content .add-to-cart:hover {
    background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-700) 100%);
}

.third-col-content .add-to-cart:disabled,
.third-col-content .add-to-cart[disabled] {
    background-color: var(--as-grey-300, #777777);
    cursor: not-allowed;
    opacity: 1;
}

.third-col-content .add-to-cart:disabled:hover,
.third-col-content .add-to-cart[disabled]:hover {
    background: var(--as-grey-300, #777777);
}

.product-actions .product-add-to-cart {
    width: 100%
}

#product .product-quantity, #product .product-quantity .form-label {
    display: block;
    width: 100%;
    text-align: left
}

#product .product-quantity .form-label, #product .product-variants .control-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 0 8px 0;
    color: var(--as-grey-300);
    margin: 0;
    text-align: left;
    width: 100%;letter-spacing: .05rem;
}

#product .product-add-to-cart .product-quantity {
    padding: 0 20px 16px 20px;
    margin: 0;
    display: flex;
    flex-direction: column
}

#product .product-variants {
    padding: 20px 20px 16px 20px
}

.product-variants > .product-variants-item {
    margin: 0
}
.product-variants-item .control-label{font-weight: 600;}
.product-quantity #quantity_wanted, .product-variants > .product-variants-item select {
    background: var(--as-grey-100);
    padding: 0 14px;
    border-radius: 3px;
    border: none;
    width: 100%;
    height: 48px;
    line-height: 48px;
    box-shadow: none;
    color: var(--as-grey-900)
}

.product-quantity .bootstrap-touchspin {
    width: 100%;
    display: block
}

.product-quantity #quantity_wanted {
    width: 100%;
    font-weight: 500;
}

.product-variants>.product-variants-item select{font-weight: 500}

.custom-radio {
    border: 2px solid var(--as-grey-300)
}
.product-variants-item  option{padding: 8px 0}
.custom-radio input[type=radio]:checked + span {
    background-color: var(--as-amaranth);
    width: 10px;
    height: 10px
}

#title-tabs {
    font-size: 28px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: start
}

#title-tabs img {
    margin-right: 16px
}

#rea-side-bar-container {
    padding: 0 0 0 25px
}

.minus-btn .material-icons,
.plus-btn .material-icons {
    display: none;
}


.quantity-field .btn-touchspin {
    padding: 0 0.5rem;
    background: transparent;

}

.quantity-field input {
    border-left: 0;
    border-right: 0;
}

.minus-btn {
    border-radius: .375rem 0 0 .375rem;
}

.plus-btn {
    border-radius: 0 .375rem .375rem 0;
}

#product .third-col-content .input-group-btn {
    display: none
}

#order-items table tr.total-value, .bootstrap-touchspin .btn-touchspin:hover {
    background: none
}

.quantity-field .input-group-append .btn {
    border: none;
    position: absolute;
    right: 8px;
    z-index: 3;
    top: 12px
}

.quantity-field .btn-touchspin.minus-btn {
    right: 40px
}

.quantity-field .btn-touchspin.plus-btn {
    right: 10px
}

/* ----------- Select + chevron (déjà présent) ----------- */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
}

.select-chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.8rem;
    height: 0.8rem;
    transform: translateY(-50%) rotate(0);
    transition: transform .25s ease;
    pointer-events: none;
}

.select-wrapper select:focus + .select-chevron,
.select-wrapper.opened .select-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* ----------- Input date + icône ----------- */
.date-wrapper {
    position: relative;
    width: 100%;
}

.date-wrapper input {
    padding-right: 2.5rem;
}

.date-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 20px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none; /* clic passe sur l'input */
}


/* ---- Loyalty (rendered in product.tpl) ---- */
#loyalty-advantages-product, #loyalty-advantages-cart {
    background: linear-gradient(159deg, var(--as-black) 20.53%, var(--as-grey-700) 85.89%);
    display: flex;
    justify-content: space-between;
    padding: 18px 20px
}

#loyalty-advantages-product #loyalty_points, #loyalty-advantages-cart #loyalty_points_cart {
    background: var(--as-papaya);
    color: var(--as-black);
    padding: 8px;
    border-radius: 3px;
    font-weight: 600
}

.loyalty-points-container img {
    margin-right: 16px
}

/* ----- Info fidélité : wrapper ----- */
.loyalty-info-icon {
    position: relative;
    cursor: help; /* pointeur “?” */
    display: inline-block; /* garantit une boîte pour ::after */
}

/* ── PDP sidebar form glue — Lot G.4.B
 * Card layout requires the loyalty bloc to sit edge-to-edge above the AJOUTER
 * CTA, and the form's bootstrap gap-3 to be neutralised so each section reads
 * as a continuous card. Empty PS slots (availability + minimal-quantity) are
 * hidden to avoid trailing whitespace under the CTA. */
.js-product-actions .product-additional-info {
    margin: 0;
    padding: 0;
}

.js-product-actions .product-additional-info > .al-earn-badge:last-child {
    margin-bottom: 0;
}

.js-product-actions #add-to-cart-or-refresh {
    gap: 0;
}

.js-product-actions .product-add-to-cart > .add-to-cart {
    margin-top: 0;
}

.js-product-actions .js-product-availability:empty,
.js-product-actions .product-minimal-quantity:empty {
    display: none;
}

/* Lot G PDP polish round 6 item (a) — coller le bas de la card add-to-cart
   sous le bouton AJOUTER. Les utilities `mt-2` (overridées à 24px custom)
   sur `.js-product-availability` créent un gap visible même quand le span
   reste vide via JS (`:empty` matche par intermittence selon le timing de
   refresh). `!important` requis pour battre le `.mt-2 !important` BS5. */
#product .third-col-content .js-product-availability,
#product .third-col-content .product-minimal-quantity {
    margin: 0 !important;
}

.product-minimal-quantity {
    margin: 0
}

.side-button-container {
    background: var(--as-white);
    display: flex;
    padding: 16px;
    align-items: center;
    text-align: left;
    border-radius: 8px;
    border: 1px solid var(--as-grey-200)
}

.side-button-container:hover .title-button, .side-button-container:hover .text-button {
    color: var(--as-white)
}

.side-btn__txt {
    display: flex;
    flex-direction: column
}

.title-button {
    font-weight: 600;
    color: var(--as-amaranth);
    font-size: 14px;
    text-transform: uppercase
}

.text-button {
    color: var(--as-grey-900);
    font-weight: 500;
    font-size: 16px
}

.side-button-container:hover {
    background: var(--as-amaranth);
    color: var(--as-white);
    cursor: pointer
}

/* — gabarit bouton — */
/* gabarit */
.side-btn {
    display: flex;
    align-items: center;
    width: 100%;
    transition: background .25s, color .25s, border-color .25s;
    position: relative;
}

/* icône via masque  */
.side-btn::before {
    content: '';
    width: 28px;
    height: 28px;
    background: var(--as-amaranth);
    -webkit-mask: url("../img/store-icon.svg") center/contain no-repeat;
    mask: url("../img/store-icon.svg") center/contain no-repeat;
    transition: background .25s;
    margin-right: 16px;
}

/* hover/focus */
.side-btn:hover,
.side-btn:focus {
    background: var(--as-amaranth);
    color: var(--as-white);
    border-color: var(--as-amaranth);
}

.side-btn:hover::before,
.side-btn:focus::before {
    background: var(--as-white);
}

.product-advantage-container {
    margin-top: 16px;
    background: var(--as-grey-200);
    font-size: 16px;
    line-height: 24px;
    padding: 16px 25px;
}

.product-advantage-title {
    font-weight: 600;
}

.product-advantage-text {
    margin-top: 8px;
}

@media (max-width: 1300px) {
    #product #wrapper {
        padding: 32px 15px
    }
    /* Le wrapper passe à 15px latéral → le full-bleed du bottom-product suit
       (margin -15px = annule le padding 15px) pour éviter tout débordement. */
    #bottom-product {
        padding: 32px 15px 48px;
        margin-left: -15px;
        margin-right: -15px;
    }
}

.ui-datepicker {
    font-family: Brockmann
}

.ui-datepicker .ui-datepicker-header {
    background: var(--as-grey-100);
    border: none
}

.ui-state-default {
    background: var(--as-grey-100) !important;
    border: 1px solid var(--as-white) !important;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    background: var(--as-grey-500) !important;
    color: var(--as-white)
}



/* ------ Expert slider ------ */
.product-expert-opinions {
    margin-top: 16px;
}

.splide__slide .expert-opinion {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 24px;
    border: 1px solid var(--as-grey-050);
    border-radius: 3px;
    background: var(--as-white);
    height: 100%; /* pour que la carte occupe toute la slide */
}

.expert-header {
    display: flex;
    justify-content: start;
    align-items: center
}

.expert-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 16px
}

.expert-title {
    font-weight: 600;
    margin: .25rem 0 0;
    color: var(--as-amaranth);
    font-size: 20px;
}

.expert-name {
    color: var(--as-black);
    font-size: 20px;
    font-weight: 600;
    margin: 4px 0 8px 0;
    display: block
}

.expert-dis {
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
}

#simple-price-block {
    border-top: 1px solid var(--as-grey-100);
    padding: 0 20px 16px 20px
}

.know-more-product a {
    color: var(--as-grey-900);
    text-decoration: underline
}

.know-more-product a:hover {
    text-decoration: none
}

/* ============ PRODUCT TABS ============ */
.tabs {
    padding: 0;
    margin-top: 32px
}

/* Lot G hotfix round 4 — refonte tabs PDP. Indicator amaranth 2px sous le
   tab actif (vs ancien pill bg grey-100), padding constant pour éviter la
   bascule de baseline entre actif/inactif, gap 4px entre items via flex et
   alignement icône/texte uniforme (16x16 + 8px gap). */
.tabs .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
    margin: 0;
    padding: 0;
}

.tabs .nav-tabs .nav-item {
    margin: 0;
}

.tabs .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--as-grey-700);
    font-family: var(--as-font-family);
    font-size: 14px;
    font-weight: var(--as-fw-medium, 500);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    border-radius: var(--as-radius-small, 3px);
    padding: 12px 16px;
    transition: color var(--as-transition-fast, 0.18s ease),
                background-color var(--as-transition-fast, 0.18s ease);
}

.tabs .nav-tabs .nav-link img,
.tabs .nav-tabs .nav-link svg {
    height: 18px;
    width: auto;
    flex-shrink: 0;
}

.nav-tabs .nav-item + .nav-item {
    margin-left: 0;
}

/* Onglet actif + hover = fond #EDEDF3 (grey-100), pas de soulignement — Figma 270:5582
   (retour user 2026-06-02). Le thème parent ajoute un border-bottom bleu #24b9d7 (couleur
   de lien) sur l'onglet actif/focus → on le neutralise (border-bottom:0 + box-shadow:none),
   #product pour la spécificité. */
#product .tabs .nav-tabs .nav-link:hover,
#product .tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link:focus,
#product .tabs .nav-tabs .nav-link.active:focus {
    color: var(--as-grey-900);
    background: var(--as-grey-100, #ededf3);
    border-bottom: 0;
    box-shadow: none;
    padding: 12px 16px;
}

.tabs .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--as-amaranth);
    outline-offset: -2px;
}
/* Lot G PDP polish round 8 — tabs responsive scroll fix (Round 6 origin item 2)
   Audit user multi-viewport 2026-05-20 : à 390/768/1024 les 4 tabs PDP wrappent
   sur 2-3 lignes parce que .nav-link a `white-space: normal` + `flex-shrink: 1`
   (defaults). Même avec `flex-wrap: nowrap !important` sur le container (mobile
   rule l.1194), les nav-links shrink puis leur texte wrap dans chacun. Fix :
   white-space:nowrap + flex-shrink:0 sur tous les nav-link → ils gardent leur
   taille intrinsèque, le container `.nav.nav-tabs` scrolle horizontalement
   au-delà via overflow-x:auto. Universel (pas de breakpoint), zéro régression
   desktop 1568+ où la row tient déjà sur 1 ligne sans scroll-bar visible. */
#product .tabs .nav.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* overflow-x:auto fait calculer overflow-y à `auto` (CSS Overflow Module) →
       scrollbar verticale parasite quand la row touche pile sa hauteur en desktop.
       overflow-y:hidden la supprime ; le scroll horizontal voulu reste. (fix 2026-06-02) */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
#product .tabs .nav.nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
}

.tabs .product-description a {
    color: var(--as-grey-900);
    text-decoration: underline;
}

.tabs .tab-pane {
    padding: 32px 0;
}

@media (max-width: 575.98px) {
    .tabs .tab-pane {
        padding: 32px 16px;
    }
}

.tabs .product-description a:hover {
    text-decoration: none
}

.nav-item img {
    margin-right: 10px
}

.tabs .product-reference {
    display: none
}

.tabs .product-features .h6, .product-attachments .h5 {
    font-size: 14px;
    border-bottom: 2px solid var(--as-grey-900);
    padding-bottom: 8px;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 16px
}

.tabs .product-manufacturer a {
    color: var(--as-white);
    background: var(--as-grey-700);
    padding: 8px;
    border-radius: 3px;
    margin-left: 8px
}

.tabs .product-manufacturer a:hover {
    background: var(--as-amaranth);
    transition-duration: .5s;
}

.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name {
    padding: 8px 0
}

#product-details .label {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px
}

.product-features > dl.data-sheet {
    color: var(--as-grey-900)
}

.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name, .definition-list dl dd:nth-of-type(even), .definition-list dl dt:nth-of-type(even), .product-features > dl.data-sheet dd.value:nth-of-type(even), .product-features > dl.data-sheet dt.name:nth-of-type(even) {
    background: var(--as-white)
}

.product-features > dl.data-sheet dd.value {
    font-weight: 600
}

.product-features > dl.data-sheet dt.name {
    font-weight: 400
}

.product-features {
    margin: 32px 0
}

#product .attachment {
    padding-top: 32px
}

.attachment a {
    text-decoration: underline;
    color: var(--as-grey-900);
}

.attachment a:hover {
    text-decoration: none
}

#product .product-additional-info .list-review {
    display: none
}


/* Barre d’onglets “Splide” */
.tab-nav-splide { /* conteneur .splide */
    margin: 0; /* aligne avec le reste */
}

.tab-nav-splide .splide__slide {
    width: auto !important; /* largeur = contenu, pas 100 % */
    padding: 0; /* on garde les espacements natifs de Bootstrap */
}

.tab-nav-splide .nav-link {
    white-space: nowrap; /* le libellé reste sur une ligne */
}

/* petite “fenêtre” sur l’onglet suivant/précédent */
.tab-nav-splide .splide__track {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 2️⃣  Sticky rea-sidebar (≥768 px).
   Le sticky n'a de "travel" que si sa colonne (#rea-side-bar-container,
   col-md-3) s'étire à la hauteur de la colonne onglets (.all-tabs, col-md-9).
   Or le thème force `.row{display:block}` → la colonne reste à la hauteur de
   son propre contenu (≈295px) et le sticky est inopérant. On passe CETTE row
   (product-ugc-row) en flex pour le stretch vertical, en conservant le split
   bootstrap 75/25. Scopé : aucune autre row impactée. */
@media (min-width: 768px) {
    .product-ugc-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .product-ugc-row > .all-tabs {
        flex: 0 0 75%;
        max-width: 75%;
        float: none;
    }
    .product-ugc-row > #rea-side-bar-container {
        flex: 0 0 25%;
        max-width: 25%;
        float: none;
    }
    #rea-sidebar {
        position: sticky;
        top: 110px; /* marge libre sous le header */
    }
}

/* palette */
:root {
    --asa-red: var(--as-amaranth);
    --asa-dark: var(--as-grey-900);
}


/* ============ PRODUCT FLAGS (Lot 7-2 PDP-008) ============
   Container .product-flags : flex layout + gap.
   Base .product-flag : padding + line-height (custom.css l.174-181 ne les set pas).
   Type variants : .new (grey-900) / .on-sale|.discount-* (amaranth) / .pack (papaya).
   Border-radius asymétrique préservé via custom.css existant (decision design).
   ============================================================ */
.product-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-flags li.product-flag {
    padding: 4px 12px;
    line-height: 1.4;
}

.product-flags li.product-flag.new {
    background: var(--as-grey-900);
    color: var(--as-white);
}

.product-flags li.product-flag.on-sale,
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.discount-amount {
    background: var(--as-amaranth);
    color: var(--as-white);
}

.product-flags li.product-flag.pack {
    background: var(--as-papaya);
    color: var(--as-grey-900);
}


/* =============================================================
   MOBILE - PRODUCT (extrait lot 5d-mobile-product)
   Sections extraites de custom.css @media (max-width: 991.98px):
   - Expert slider hide + Onglets produit no wrap (tete du media)
   - PRODUIT MOBILE + Accordeon + floating-add-to-cart + Slider onglets
   ============================================================= */

/* Lot G C5 (2026-06-02) — PDP mobile sticky add-to-cart bar.
   Hidden on desktop; the @media block below turns it into a fixed bottom bar. */
.pdp-sticky-cta { display: none; }

@media (max-width: 991.98px) {

    /* Expert slider - hide on mobile */
    #splide01 { display: none }

    /* Onglets produit MOBILE — fallback wrap propre (pills) si le JS accordéon ne
       tourne pas. PAS de slider horizontal (retour user 2026-06-02). */
    .nav.nav-tabs.js-tabs-slider,
    #product .tabs .nav.nav-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible;
        gap: 8px;
    }
    #product .tabs .nav-tabs .nav-link {
        white-space: normal;
    }

    /* Accordéon mobile : « avec chevron, l'un après l'autre » (retour user 2026-06-02).
       Le JS alter-product-tabs.js ajoute .is-accordion sur .tabs + insère .agr-acc-header
       (icône + libellé + chevron) avant chaque pane ; single-open. */
    #product .tabs.is-accordion .nav-tabs { display: none; }
    #product .tabs.is-accordion .tab-content { border-bottom: 1px solid var(--as-grey-200); }
    #product .tabs.is-accordion .tab-content > .tab-pane {
        display: none !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
    #product .tabs.is-accordion .tab-content > .tab-pane.agr-acc-open {
        display: block !important;
        padding: 18px 2px 26px !important;
    }
    .agr-acc-header {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0;
        background: none;
        border: 0;
        border-top: 1px solid var(--as-grey-200);
        padding: 18px 2px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--as-grey-900);
        text-align: left;
        cursor: pointer;
    }
    .agr-acc-header.is-open {
        background: var(--as-grey-100, #ededf3);
    }
    .agr-acc-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .agr-acc-label img,
    .agr-acc-label svg {
        height: 18px;
        width: auto;
    }
    .agr-acc-chevron {
        margin-left: auto;
        margin-right: 4px;
        width: 9px;
        height: 9px;
        flex-shrink: 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }
    .agr-acc-header.is-open .agr-acc-chevron {
        transform: rotate(-135deg);
    }

    /*PRODUIT MOBILE*/
    .expert-title{font-size: 16px}


    /* =============================
       Accordéon produit (natif)
       ============================= */
    .product-accordion {
        margin-top: 32px;
    }

    .product-accordion .accordion-item {
        border: 1px solid var(--as-grey-200);
        border-radius: 8px;
        background: var(--as-white);
        overflow: hidden;
        margin-bottom: 12px;
    }

    .product-accordion summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
        text-transform: uppercase;
        font-size: 16px;
    }

    .product-accordion summary::-webkit-details-marker {
        display: none;
    }

    .product-accordion details[open] > summary {
        background: var(--as-grey-100);
    }

    .product-accordion .accordion-title img {
        margin-right: 10px;
    }

    .product-accordion .accordion-panel {
        padding: 16px 12px;
    }

    /* Focus clavier visible */
    .product-accordion summary:focus-visible {
        outline: 2px solid var(--as-amaranth);
        outline-offset: 2px;
    }


    .know-more-product {
        margin-bottom: 16px
    }

    /* Lot G C5 — Mobile sticky add-to-cart bar (replaces the unused
       .floating-add-to-cart leftover, which was never wired to any JS/markup).
       Starts hidden below the fold; alter-product-sticky-cta.js adds .is-visible
       whenever the real buy box is out of view. */
    .pdp-sticky-cta {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035; /* below Bootstrap modal (1050) so #blockcart-modal overlays it */
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--as-white, #fff);
        border-top: 1px solid var(--as-grey-200, #e5e5ec);
        box-shadow: 0 -6px 20px rgba(8, 16, 27, 0.10);
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease;
    }
    .pdp-sticky-cta.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .pdp-sticky-cta__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1 1 auto;
    }
    .pdp-sticky-cta__name {
        font-size: 12px;
        line-height: 1.2;
        color: var(--as-grey-700, #5a5a66);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pdp-sticky-cta__price {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--as-grey-900, #202020);
    }
    .pdp-sticky-cta:not(.pdp-sticky-cta--has-price) .pdp-sticky-cta__price {
        display: none;
    }
    .pdp-sticky-cta__btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
        border-radius: 8px;
        background: var(--as-amaranth, #E62249);
        color: var(--as-white, #fff);
        font-weight: 500;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding: 12px 18px;
        cursor: pointer;
        transition: background .2s ease;
    }
    .pdp-sticky-cta__btn:hover,
    .pdp-sticky-cta__btn:focus {
        background: var(--as-amaranth-hover, #C71D40);
    }
    .pdp-sticky-cta__btn img {
        height: 18px;
        width: auto;
        filter: brightness(0) invert(1);
    }
    .pdp-sticky-cta__btn:focus-visible {
        outline: 2px solid var(--as-grey-900, #202020);
        outline-offset: 2px;
    }
    /* Reserve scroll room so the fixed bar never hides the last page content. */
    body.has-pdp-sticky {
        padding-bottom: 72px;
    }

    /* Brief highlight of the dosage selector when the sticky CTA scrolls to it. */
    .pdp-anchor-flash {
        animation: pdpAnchorFlash 1.6s ease;
        border-radius: 8px;
    }
    @keyframes pdpAnchorFlash {
        0%, 100% { box-shadow: 0 0 0 0 rgba(230, 34, 73, 0); }
        20%, 60% { box-shadow: 0 0 0 3px rgba(230, 34, 73, 0.45); }
    }

    /* Lot G C5 — hide the duplicate "Produits compatibles" under-photo slider on
       mobile. It renders the SAME product set as the full-width "Produits
       complémentaires" slider at the page bottom, so on mobile it only pushes the
       product title ~600px down the page (title was buried at ~1308px). */
    .first-column .product-accessories--under-photo {
        display: none !important;
    }


    #product #content-wrapper {
        padding-right: 20px;
        padding-left: 20px
    }

    .first-column {
        margin-top: 0
    }

    .d-block.d-md-none {
        display: block !important;
    }

    .expe-today {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .product-cover {
        margin-bottom: 16px
    }

    #product #content-wrapper, #product #wrapper, #product .row {
        padding: 0;
        margin: 0
    }

    #wrapper .breadcrumb {
        flex-wrap: wrap;
    }


    #password .email{margin-top: 12px}


    #wrapper .breadcrumb li {
        line-height: 29px;
        min-width: 0;
        word-break: break-word;
    }



    .expe-today p {
        line-height: 18px
    }

    .expert-avatar {
        width: 60px;
        height: 60px
    }

    .third-col-container {
        margin-top: 16px
    }

    #bottom-product {
        padding: 32px 0
    }

    #product #wrapper {
        padding-bottom: 32px
    }

    #product .product-accessories, #product .featured-products {
        padding: 32px 15px
    }

    #product .featured-products {
        padding-bottom: 32px
    }

    .tabs {
        margin-top: 32px;
    }

    .tabs .nav-tabs {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        overflow: hidden
    }

    #product h1 {
        margin-bottom: 0
    }

    #rea-side-bar-container {
        display: inline-block;
        width: 100%;
        padding: 0 15px
    }

    .modal-dialog {
        margin-left: auto
    }

    /* Slider des onglets produit */
    /* Chaque .splide__slide reprend sa largeur naturelle */
    .tab-nav-splide .nav-item,
    .tab-nav-splide .splide__slide {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap;
        margin-right: .75rem;
    }

    /* Optionnel : on masque le dernier margin-right pour eviter un debordement visuel */
    .tab-nav-splide .nav-item:last-child {
        margin-right: 0;
    }

    /* Onglets produit : defilement horizontal */
    /* 1) Quand Splide est ACTIF (< 992px) */
    .tab-nav-splide .splide__track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* 2) Quand Splide est DEMONTE (>= 992px) */
    .js-tabs-slider {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* facultatif : assure une largeur minimum au contenu */
    .tab-nav-splide .splide__slide {
        width: auto !important;
    }
}

/* =============================================================
   MOBILE - PRODUCT LISTING (extrait lot 5g-mobile-listing)
   Sections extraites de custom.css @media (max-width: 991.98px):
   - Miniatures mobile
   - Listing mobile
   - Hidden mobile (generic)
   - Fallback sans Splide (tabs)
   - LISTING MOBILE
   ============================================================= */
@media (max-width: 991.98px) {

    /* Miniatures mobile */
    .product-miniature .product-title a {
        font-size: 15px;
        line-height: 19px;
    }
    .product-miniature .thumbnail-container .product-brand {
        font-size: 11px;
        font-weight: 600;
    }
    .product-miniature .product-title {
        line-height: 20px
    }

    /* Listing mobile */
    #category h1,#category .breadcrumb{padding-left:0;padding-right: 0}
    #js-product-list{padding:0;margin: 0}

    /* Hidden mobile */
    .hidden-mobile{display: none}
    /* Fallback sans Splide */
    .nav.nav-tabs.js-tabs-slider:not(.splide__list) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* LISTING MOBILE */
    #category #wrapper {
        padding-top: 0
    }


    .products-selection {
        margin: 0 0 16px auto;
    }

    .products-selection .sort-by-row {
        justify-content: end
    }

    .product-miniature .product-description {
        padding: 15px 16px;
        min-height: 136px
    }

    .product-miniature .product-extra-features {
        margin: 8px 0
    }

    .product-miniature .product-price-and-shipping {
        font-size: 16px
    }

    .product-miniature .product-extra-features .format-badge, .product-miniature .product-extra-features .pgvg-badge {
        font-size: 12px
    }
}

/* -----------------------------------------------------------
   Lot 5h-3 — breadcrumb orphan mobile (from custom.css l.646)
   Single rule migrated from custom.css @media max-width:991.98px.
   Pattern D-009: no nested comment delimiters in headers.
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {
    #product #wrapper .breadcrumb {
        padding: 16px
    }
}

/* -----------------------------------------------------------
   Lot 8a — BREADCRUMB + LISTING AREP migration from custom.css
   - BREADCRUMB rules (custom.css ex-l.443-477, 35 l.)
   - LISTING AREP rules (custom.css ex-l.479-511, 33 l.)
   media:all preserved (no behavior change). Mobile @media rules
   already present in this file (l.935+ + l.1117+) remain untouched.
   Pattern: D-009 (no nested comment delimiters in headers).
   ----------------------------------------------------------- */

#wrapper .breadcrumb li a {
    font-size: 14px;
    background: var(--as-white);
    padding: 10px;
    border-radius: 4px
}

#wrapper .breadcrumb li a:hover {
    background: none;
    font-weight: 500;
    transition-duration: .5s
}

#wrapper .breadcrumb li:first-child a {
    background: none;
    padding-left: 0
}

#wrapper .breadcrumb li:last-child a {
    background: none;
}

#wrapper .breadcrumb li:last-child {
    font-weight: 600;
    color: var(--as-grey-900);
    font-size: 14px
}

#wrapper .breadcrumb li::after {
    content: '>';
    color: var(--as-grey-300);
}

.block-category {
    min-height: inherit;
    border-radius: 3px
}

#subcategories ul li {
    min-width: inherit;
    width: inherit;
    max-width: 100%;
    height: inherit;
    margin: 0
}

#subcategories ul li:hover .subcategory-image a {
    border: 2px solid var(--as-grey-900)
}

.subcategory-name {
    color: var(--as-grey-900)
}

.block-category .block-category-inner {
    margin: 32px 0;
}

.block-category .block-category-inner #category-description strong {
    color: var(--as-grey-900);
    font-weight: 500
}

/* =============================================================
   PRODUCT LISTING — globals + miniature + flags fallback
   Migrated from custom.css l.169-307 (Lot 8c).
   Desktop @media (min-width: 992px) wrappers preserved verbatim
   from Lot 6g-1 cascade-fix (D-016). Mobile listing rules already
   live above (Lot 5g-mobile-listing). Legacy .product-flags li
   .product-flag fallback (papaya/grey-900) kept as-is — variantes
   typées Lot 7-2 PRODUCT FLAGS section above (l.764-801, D-024)
   battent ce fallback via specificite 0,0,3,1 vs 0,0,2,1 sur
   .new/.on-sale/.discount/.pack ; non-typed flags (online-only,
   bestseller, out_of_stock) gardent papaya fallback as before.
   ============================================================= */

#wrapper {
    background: var(--as-grey-100)
}

.product-flags li.product-flag {
    background: var(--as-papaya);
    color: var(--as-grey-900);
    font-size: 13px;
    text-transform: initial;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}



#subcategories {
    display: none
}

.product-miniature .product-description {
    background: linear-gradient(159deg, var(--as-black) 20.53%, var(--as-grey-700) 100%);
    display: inline-block;
    width: 100%
}

@media (min-width: 992px) {
    .product-miniature .product-description {
        /* Floor for the dark info area; sparse cards (name + price only, e.g.
           e-cig kits) no longer get a tall forced gap, full cards grow past it. */
        min-height: 96px;
        padding: 16px 32px
    }
}

.product-miniature .product-title {
    text-align: left;
    margin: 0;
    text-transform: initial;

}
.name-and-brand{min-height: 44px}
.category-id-parent-3  .name-and-brand, .category-id-3 .name-and-brand{min-height: 35px}
.product-miniature .product-title a {
    color: var(--as-grey-100);
    font-weight: 500;
    letter-spacing: 1px;
}

@media (min-width: 992px) {
    .product-miniature .product-title a {
        font-size: 17px;
        line-height: 22px
    }
}
.product-miniature .product-title a:hover{color:var(--as-white)}

.product-miniature .product-price-and-shipping {
    color: var(--as-amaranth);
    text-align: left;
    font-weight: 400
}

@media (min-width: 992px) {
    .product-miniature .product-price-and-shipping {
        font-size: 20px
    }
}

.product-miniature .thumbnail-container {
    width: 100%;
    border-radius: 8px
}

.product-miniature .thumbnail-container .product-brand {
    color: var(--as-grey-300);
    line-height: 21px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (min-width: 992px) {
    .product-miniature .thumbnail-container .product-brand {
        font-size: 14px;
        font-weight: 500
    }
}


.product-extra-features {
    min-height: 32px
}

@media (min-width: 992px) {
    .product-extra-features {
        margin: 0
    }
}

.product-extra-features span {
    margin-right: 8px
}

/* ---------- Product card: equal heights + bottom-aligned price ----------
   Each card fills its stretched container (listing grid cell, or carousel
   .ac-item stretched by the flex .ac-track) via a flex-grow chain, so every
   card in a row/track is the same height regardless of whether the brand,
   reviews or a 2-line name are present. The price pins to the bottom. */
.js-product.product { display: flex; flex-direction: column; }
.ac-carousel .ac-item { display: flex; flex-direction: column; }
.ac-carousel .ac-item > .js-product { flex: 1 1 auto; }
.product-miniature { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* The description lives INSIDE .thumbnail-container (block by default) — make that
   a column flex too, image fixed, so the dark description grows to fill the card
   down to the bottom (no white gap under the price on sparse cards / home carousels). */
.product-miniature .thumbnail-container { display: flex; flex-direction: column; flex: 1 1 auto; margin-bottom: 0; }
.product-miniature .thumbnail-container > .thumbnail-top { flex: 0 0 auto; }
.product-miniature .product-description { display: flex; flex-direction: column; flex: 1 1 auto; gap: 14px; }
.product-miniature .product-price-and-shipping { margin-top: auto; }

/* Name capped at 2 lines so a long title never blows up the card height, and
   left-aligned everywhere — the parent classic theme centers the title link on
   the homepage carousels, so this needs the .product-description specificity. */
.product-miniature .product-description .product-title,
.product-miniature .product-description .product-title a {
    text-align: left;
}
.product-miniature .product-description .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Format + PG/VG badges on a single row (the alterbadge wrapper is a block,
   the alterfilters PG/VG is a span — flex puts them side by side). The flex
   gap replaces the legacy per-span right margin. */
.product-miniature .product-description > .product-extra-features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.product-miniature .product-description > .product-extra-features > span { margin-right: 0; }
/* The inner alterbadge wrapper shares the .product-extra-features class and would
   otherwise re-apply its vertical margin inside the flex row — reset it so the
   badge row stays compact (the outer keeps the row spacing). */
.product-miniature .product-description > .product-extra-features > .ab-wrapper { margin: 0; }

/* Review summary: average legible on the dark card, review count hidden. */
.product-miniature .agr-miniature-avg { color: var(--as-white); }
.product-miniature .agr-miniature-count { display: none; }

/* On narrow cards (below the desktop grid) the format + PG/VG badges are made
   compact so they still fit on a single row instead of wrapping. */
@media (max-width: 991.98px) {
    .product-miniature .product-description > .product-extra-features { gap: 6px; }
    .product-miniature .product-description > .product-extra-features .ab-badge,
    .product-miniature .product-pgvg {
        font-size: 11px;
        padding: 2px 6px;
    }
}

.wishlist-button-add {
    box-shadow: none;
    color: var(--as-amaranth)
}

.flag-bestseller {
    z-index: 2;
    color: var(--as-grey-100);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 20px;
    background: var(--as-amaranth);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    position: absolute;
    right: 10px;
    top: 10px;
    text-transform: uppercase
}

.product-miniature .thumbnail-container:focus .product-description::after, .product-miniature .thumbnail-container:hover .product-description::after {
    display: none
}

.pagination .page-list {
    background: none;
}

.pagination .current a {
    color: var(--as-amaranth)
}

#products .up .btn-secondary {
    color: var(--as-black);
    background: none;
}

/* =============================================================
   GRID PRODUITS RESPONSIVE — 2/3/4/5 cols (no extra class)
   Migrated from custom.css l.333-388 (Lot 8c).
   Replaces Bootstrap .row flex with CSS grid on listing/featured
   /accessories. Mobile-first 2 cols, scales 3/4/5 cols by viewport.
   ============================================================= */

/* Container general */
#js-product-list .products, #products .products, .featured-products .products, .product-accessories .products {
    display: grid !important; /* override .row Bootstrap flex */
    gap: clamp(0.5rem, 1vw, 1rem);
    margin: 0 !important;
    padding: 0;
    list-style: none;
    /* mobile default : 2 cols */
    grid-template-columns: repeat(2, 1fr);
}

/* Mobile XL / tablet portrait >= 576 px → 3 col. */
@media (min-width: 576px) {
    #js-product-list .products, #products .products, .featured-products .products, .product-accessories .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet landscape / small laptop >= 768 px → 4 col. */
@media (min-width: 800px) {
    #js-product-list .products, #products .products, .featured-products .products, .product-accessories .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop large >= 1200 px → 5 col. (max wanted) */
@media (min-width: 1225px) {
    #js-product-list .products, #products .products, .featured-products .products, .product-accessories .products {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1570px) {
    #js-product-list .products, #products .products, .featured-products .products, .product-accessories .products {
        grid-template-columns: repeat(5, 1fr);
    }
}


@media(min-width: 1900px)
{#js-product-list .products, #products .products, .featured-products .products, .product-accessories .products{  grid-template-columns: repeat(5, 1fr);}}

/* Bootstrap residue cleanup on each card */
#js-product-list .products > .product, #products .products > .product, .featured-products .products > .product, .product-accessories .products > .product {
    margin: 0;
    width: 100%;
}

/* -----------------------------------------------------------
   Lot A2 — breadcrumb vertical breathing (sitewide desktop)
   Override parent theme.css `#wrapper .breadcrumb { padding: 0 }` to
   restore 16px top/bottom respiration. Same specificity as parent rule
   (1,1,1), child sheet loaded after parent in cascade → wins.
   - Single-level breadcrumbs (data-depth=1) remain hidden via parent
     rule `#wrapper .breadcrumb[data-depth="1"] { display: none }`.
   - Mobile PDP override `@media (max-width: 991.98px) #product #wrapper
     .breadcrumb { padding: 16px }` (ligne 1119) reste dominant (full
     16px shorthand). Cohérent : 16px top/bottom y est inclus.
   ----------------------------------------------------------- */
#wrapper .breadcrumb {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* -----------------------------------------------------------
   Lot A2 (bis) — breadcrumb hors #wrapper (layouts custom modules)
   PS rend `<nav class="breadcrumb">` directement sous `<div class="container">`
   sur certaines pages module (ex: altershops /fr/nos-magasins, /fr/<store>-s<id>)
   sans envelopper dans le #wrapper standard. Le selecteur Lot A2 ne matche
   pas ces cas → padding reste à 0 → breadcrumb collé.
   On applique padding 16px top/bottom + hide depth=1 (parité Lot A2 cascade).
   ----------------------------------------------------------- */
.container > nav.breadcrumb[data-depth] {
    padding-top: 16px;
    padding-bottom: 16px;
}
.container > nav.breadcrumb[data-depth="1"] {
    display: none;
}

/* -----------------------------------------------------------
   Lot G.1 — breadcrumb + product header icons top-right
   Override `_partials/breadcrumb.tpl` wraps the breadcrumb and the product
   header icons (alterbadge) in a flex row.
   Figma 270:5486 / 270:5323 spec : icons 32×32 aligned right.
   Desktop ≥768 : icons right-aligned ; mobile : icons wrap below breadcrumb.
   ----------------------------------------------------------- */
.alter-breadcrumb-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.alter-breadcrumb-wrap > .breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
}
.alter-breadcrumb__icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.alter-breadcrumb__icons .product-advantages-icons,
.alter-breadcrumb__icons .ab-wrapper,
.alter-breadcrumb__icons .as-mb-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.alter-breadcrumb__icons .ab-icon,
.alter-breadcrumb__icons .as-mb-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .alter-breadcrumb__icons {
        order: 2;
        width: 100%;
        justify-content: flex-end;
    }
}

/* -----------------------------------------------------------
   Lot G hotfix round 5 — drop du grid override Lot G.2.
   Bootstrap natif `.row + .col-md-3/6/3` reprend la main (container PS
   classic responsive, stack vertical sur mobile/tablet basse, multi-col
   desktop). Plus de max-width 1312px parasite ni de sticky desktop
   imposé. La photo retrouve sa largeur naturelle bootstrap, le sidebar
   3e colonne respire au lieu de subir un scroll interne 250px.
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   Lot G.3.A — PDP centrale typo (Title + Brand+Origin + Tags + Reviews)
   Figma 270:5527 Informations Top Row (594×124) + Tags row (594×27) + Reviews
   row (173×24). Tokens : --as-product-title (36px) --as-product-subtitle
   (18px uppercase tracking +2%) --as-card-tag (15px) --as-radius-small (3px).
   ----------------------------------------------------------- */
#product .second-column h1,
#product .second-column .page-title {
    font-size: var(--as-product-title, 36px);
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--as-grey-900, #0F0F0F);
    margin: 0 0 8px 0;
}
.alter-product-subtitle {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
}
.alter-product-subtitle .brand-product,
.alter-product-subtitle .product-origin {
    font-size: var(--as-product-subtitle, 18px);
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--as-grey-500, #353535);
    margin: 0;
}
.alter-product-subtitle .brand-product {
    color: var(--as-grey-900, #0F0F0F);
}
.product-badges-info.alter-product-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.product-badges-info.alter-product-tags .ab-badge,
.product-badges-info.alter-product-tags .as-mb-badge,
.product-badges-info.alter-product-tags > span {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    min-height: 27px;
    border-radius: var(--as-radius-small, 3px);
    font-size: var(--as-card-tag, 15px);
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.5;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
/* Lot G PDP polish round 8 — restore native ab-badge color palette
   (alterbadge front.css: --primary dark grey-700 bg + light fg,
   --accent papaya bg + grey-900 fg). The Lot G.3.A normalization above
   only enforces layout/typography, NOT semantic colors — those come
   from the badge module so format/PG-VG (primary) stays distinct from
   advantages/no-nicotine (accent), matching pre-Lot G visual coding. */
.alter-product-reviews-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    min-height: 24px;
}
.alter-product-reviews-row:empty {
    display: none;
}
/* Lot G PDP polish round 8 — agr-stars on PDP reviews row :
   align with Figma 270:5549 spec (5 stars 19×18 with ~3px gap = 107×18 total).
   alterglobalreviews-front-v2.css ships .agr-stars at 18×18 + gap 6px (sized
   for listing/miniatures). On PDP rating-row context stars must read as a
   single rating glyph chunk : --as-rating-size-lg (24px) + 2px gap so the
   row keeps Figma proportions on 1920 viewports. */
#product .alter-product-reviews-row .agr-stars {
    gap: 2px;
}
#product .alter-product-reviews-row .agr-star {
    width: var(--as-rating-size-lg, 24px);
    height: var(--as-rating-size-lg, 24px);
    font-size: var(--as-rating-size-lg, 24px);
}
/* Defeat the parent theme banner-top-container display-block + tighten the rating pill */
.alter-product-reviews-row .agr-banner-avis,
.alter-product-reviews-row .banner-top-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.alter-product-delivery-incentive {
    margin: 0 0 16px 0;
}

/* -----------------------------------------------------------
   Lot G.3.G — Avis Spécialiste (altershops expert-opinions) on PDP
   Figma 282:9380 spec : container 594×~292, bg white, padding 24, radius
   small 3px. Title row : avatar 100×100 square + col(kicker 14 +2% + name
   20 bold) + title 20 bold amaranth. Review body : 16 medium grey-900 -1%
   line-height 1.5. Scoped `#product .product-expert-opinions` to win over
   altershops module legacy rules without touching that module.
   ----------------------------------------------------------- */
#product .product-expert-opinions {
    margin: 24px 0;
    max-width: 594px;
}
#product .product-expert-opinions .ac-carousel,
#product .product-expert-opinions .ac-track {
    margin: 0;
    padding: 0;
    list-style: none;
}
#product .product-expert-opinions .expert-opinion {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: var(--as-white, #FFFFFF);
    border: 0;
    border-radius: var(--as-radius-small, 3px);
    box-shadow: none;
}
#product .product-expert-opinions .expert-opinion__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}
#product .product-expert-opinions .expert-opinion__avatar {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: var(--as-radius-small, 3px);
    object-fit: cover;
    margin: 0;
}
#product .product-expert-opinions .expert-opinion__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}
#product .product-expert-opinions .expert-opinion__kicker {
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-size: 14px;
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--as-grey-900, #0F0F0F);
    margin: 0;
}
#product .product-expert-opinions .expert-opinion__author {
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-size: 20px;
    font-weight: var(--as-fw-bold, 700);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--as-grey-900, #0F0F0F);
    margin: 0;
}
#product .product-expert-opinions .expert-opinion__title {
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-size: 20px;
    font-weight: var(--as-fw-bold, 700);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--as-amaranth, #E62249);
    margin: 4px 0 0 0;
}
#product .product-expert-opinions .expert-opinion__content {
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-size: 16px;
    font-weight: var(--as-fw-medium, 500);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--as-grey-900, #0F0F0F);
    margin: 0;
    white-space: pre-wrap;
}
#product .product-expert-opinions .expert-opinion__content p {
    margin: 0;
}
#product .product-expert-opinions .expert-opinion--with-avatar .expert-opinion__content {
    /* Override altershops module's `.expert-opinion--with-avatar .expert-opinion__content` margin-left:84px
       — Figma layout doesn't indent the body under the avatar. */
    margin-left: 0;
}
@media (max-width: 575.98px) {
    #product .product-expert-opinions .expert-opinion__top {
        flex-direction: column;
        align-items: flex-start;
    }
    #product .product-expert-opinions .expert-opinion__avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }
}

/* ============================================================
 * Lot G.3.7 — Notice block legal (disclaimer vape FR V1)
 * Position : product.tpl col centrale, entre description et expert opinions
 * Conformité : Directive 2014/40/UE (TPD) + Loi Évin
 * V2 : édition BO multi-catégorie + multi-langue
 * ============================================================ */
#product .alter-legal-notice {
    display: flex;
    gap: var(--as-spacing-md, 16px);
    align-items: flex-start;
    background: var(--as-grey-100, #EDEDF3);
    border-left: 3px solid var(--as-amaranth, #E62249);
    border-radius: var(--as-radius-small, 3px);
    padding: var(--as-spacing-md, 16px);
    margin-block: var(--as-spacing-md-plus, 24px);
    max-width: 594px; /* Figma 3.F bloc 594×112 */
}
#product .alter-legal-notice__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--as-amaranth, #E62249);
    margin-top: 2px;
}
#product .alter-legal-notice__content {
    flex: 1 1 auto;
    min-width: 0;
}
#product .alter-legal-notice__title {
    display: block;
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-weight: var(--as-fw-medium, 500);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    color: var(--as-amaranth, #E62249);
    margin-bottom: var(--as-spacing-xs, 4px);
}
#product .alter-legal-notice__body {
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--as-grey-900, #0F0F0F);
    margin: 0;
}
@media (max-width: 575.98px) {
    #product .alter-legal-notice {
        padding: var(--as-spacing-sm, 8px) var(--as-spacing-md, 16px);
    }
    #product .alter-legal-notice__body {
        font-size: 14px;
    }
}

/* ============================================================
 * Lot G.6.1 — PDP Upsell/Reco fullwidth cards.
 * Alignés sur la PLEINE LARGEUR du contenu page (gouttières du .container),
 * comme les onglets/avis. Retour user 2026-06-02 : "trop étroit, pas aligné
 * à droite & à gauche comme le reste de la page" → on retire l'ancien cap
 * Figma max-width:1312 centré qui insettait titre + carousel d'environ 233px
 * de chaque côté. Cards 300px + gap 32 : le carousel remplit la largeur
 * (≈5 visibles) et scrolle pour le reste.
 * Mobile/tablet (≤991) garde scroll-snap natif + clamp 180-280 hérité.
 * Under-photo (`.product-accessories--under-photo`) inchangé (V1 garde
 * "Produits compatibles" tant que G.2.2 Mixing pas livré, defer V2).
 * ============================================================ */
@media (min-width: 992px) {
    /* Titre + carousel pleine largeur, alignés aux gouttières page (pas de cap) */
    #product .product-accessories--fullwidth > * {
        max-width: none;
        margin-inline: 0;
    }
    /* Les blocs reco (Produits complémentaires + Nous vous recommandons) s'alignent
       aux gouttières page : on retire le padding horizontal 64px qui re-insettait
       le contenu à ~128px (gouttière déjà fournie par .js-content-wrapper). */
    #product .product-accessories--fullwidth,
    #product .featured-products {
        padding-left: 0;
        padding-right: 0;
    }
    /* Override engine carousel : 4×300 + 3×32 = 1296 ≤ 1312 (fit pile sans scroll) */
    #product .product-accessories--fullwidth .ac-carousel {
        --ac-item-desktop: 300px;
        --ac-gap-desktop: var(--as-spacing-lg, 32px);
    }
    /* Tagline 32px Brockmann Medium tracking -1% per Figma 270:5462 */
    #product .product-accessories--fullwidth .h5 {
        font-family: var(--as-font-family, 'Brockmann', sans-serif);
        font-weight: var(--as-fw-medium, 500);
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.32px;
        color: var(--as-grey-900);
        margin-bottom: var(--as-spacing-xl, 64px);
    }
}