/* =====================================================================
   Design v2 — commun à tout le site (accueil compris).
   Branche refonte-design-wolmart-demo12-v2.

   - jetons (--home-*) : couleurs, rayons 0.2rem, ombres légères ;
   - header middle + recherche mobile/tablette ;
   - bande blanche des bulles catégories (.home-topband sur l'accueil,
     .shop-category-strip-section sur /boutique, /produits,
     /toutes-les-categories) ;
   - blocs (accueil, page promotions, toutes les catégories) en cartes
     blanches, tuiles produits ;
   - section « Autres pages » : fond gris #f1f1f2 (pas d'image), contenu en
     cartes blanches.

   Les règles de l'accueil gardent leur portée d'origine
   (.home-page .home-canvas / .home-page .home-topband) via :is(), avec la
   même spécificité qu'avant le déplacement depuis home-v2.css.
   Chargée par base.html.twig ; home-v2.css (accueil seul) passe après.
   ===================================================================== */

:root {
    --home-ink: #1d2433;
    --home-text: #3a4153;
    --home-muted: #6b7385;
    --home-line: #eceff4;
    --home-accent: #F78116;
    --home-accent-dark: #e06d05;
    --home-radius: 0.2rem;
    --home-radius-sm: 0.2rem;
    --home-gap: 1.6rem;
    --home-card-pad: 2.8rem;
    --home-radius-hero: 0.2rem; /* slider principal */
    --home-shadow: 0 .1rem .3rem rgba(23, 32, 64, .04), 0 .4rem 1.2rem rgba(23, 32, 64, .04);
    --home-shadow-hover: 0 .2rem .6rem rgba(23, 32, 64, .05), 0 .8rem 2rem rgba(23, 32, 64, .08);
}

/* ---------------------------------------------------------------------
   0. Header middle
   --------------------------------------------------------------------- */
.header .header-middle,
.header .header-middle.border-no {
    color: #333;
    background: #fff;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
}

/* Sous 768px, mobile-header.css garde ses propres marges (recherche sous le logo). */
@media (min-width: 768px) {
    .header .header-middle {
        padding-top: 1.8rem;
        padding-bottom: 2rem;
    }
}

/* Recherche mobile (≤767px, sous le logo) et tablette (768–991px,
   capsule du header) : fond blanc + ombre douce au lieu du gris plein. */
@media (max-width: 767.98px) {
    .header-mobile-search {
        background: #fff;
        border-color: #eceff4;
        box-shadow: 0 .2rem .8rem rgba(23, 32, 64, .08);
    }

    .header-mobile-search:focus-within {
        border-color: #F78116;
        box-shadow: 0 0 0 .3rem rgba(247, 129, 22, .12), 0 .2rem .8rem rgba(23, 32, 64, .08);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .header-middle .header-search.hs-expanded {
        background: #fff;
        border-color: #eceff4;
        box-shadow: 0 .2rem .8rem rgba(23, 32, 64, .08);
    }
}

/* ---------------------------------------------------------------------
   1. Bande blanche : bulles catégories
   --------------------------------------------------------------------- */
:is(.home-page .home-topband, .shop-category-strip-section) {
    position: relative;
    z-index: 40; /* le menu « Catégories » déroulant passe au-dessus du canvas */
    background: #fff;
    border-bottom: 1px solid var(--home-line);
    /* box-shadow: 0 .8rem 1.6rem -1.4rem rgba(23, 32, 64, .14); */
}

:is(.home-page .home-topband, .shop-category-strip-section) .category-wrapper.category-bubble-bar {
    margin: 0;
    /* padding: 1.4rem 0 1.2rem; */
    padding: 0.4rem 1.2rem 1.2rem 1.2rem;
}

/* Bulles catégories (desktop) : 9rem, libellés 1.1rem. */
@media (min-width: 992px) {
    :is(.home-page .home-topband, .shop-category-strip-section) .category-wrapper.category-bubble-bar .category-ellipse .category-media,
    :is(.home-page .home-topband, .shop-category-strip-section) .category-wrapper.category-bubble-bar .category-ellipse .icon-box.icon-colored-circle .icon-box-icon {
        width: 8.5rem;
        min-width: 8.5rem;
        height: 8.5rem;
        min-height: 8.5rem;
    }

    :is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-bubble-slider .swiper-slide {
        width: 10rem;
    }

    /* Flèches centrées sur les nouvelles bulles (9rem / 2). */
    :is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-bubble-slider .swiper-button-prev,
    :is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-bubble-slider .swiper-button-next {
        top: 4.5rem;
    }
}

/* Menu déroulant de la bulle « Catégories » : même carte blanche que le
   menu du hero (au lieu du gris #f5f5f5 de home-redesign.css). */
:is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-circle-menu::before {
    border-bottom-color: #fff;
    filter: drop-shadow(0 -.1rem .1rem rgba(23, 32, 64, .06));
}

:is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-circle-menu .category-menu {
    padding: .8rem 2rem;
    border-radius: var(--home-radius);
    background: #fff;
    box-shadow: var(--home-shadow-hover);
}

:is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-name,
:is(.home-page .home-topband, .shop-category-strip-section) .category-bubble-bar .category-bubble-slider .category-name {
    font-size: 1rem;
}

/* ---------------------------------------------------------------------
   5. Blocs de la page (produits, catégories, offres) : cartes blanches
   --------------------------------------------------------------------- */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block {
    margin-top: var(--home-gap) !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-category,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-promo,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal-category,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-special-offer,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-top-suppliers {
    --carousel-nav-offset: calc(var(--home-card-pad) + 2.2rem);
    padding: 2.4rem var(--home-card-pad) 2.6rem;
    border-radius: var(--home-radius);
    background: #fff;
    /* box-shadow: var(--home-shadow); */
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-special-offer > .container {
    max-width: none;
    padding: 0 !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .swiper-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Bloc promo : le carrousel ne touche pas le bord gauche de la carte
   (illustration à côté) — flèches au ras du carrousel. */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-promo .home-carousel {
    --carousel-nav-offset: 2.2rem;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-promo .row > [class*="col-"] {
    margin-bottom: 0 !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-promo .promo-illustration-banner {
    border-radius: var(--home-radius-sm);
    overflow: hidden;
}

/* 5a. En-tête de bloc : titre, lien « voir plus » en pilule */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-special-offer .title {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0 0 2rem !important;
    padding: 0 !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .title-link-wrapper::after,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .title-link-wrapper .title::after,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-special-offer .title::after {
    content: none;
    display: none;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 !important;
    border: 0;
    color: var(--home-ink);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: none;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title::before {
    content: none;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .6rem;
    margin: 0 0 0 auto;
    padding: .9rem 1.8rem;
    border: 1px solid #fde1c6;
    border-radius: 999px;
    background: #fff7ef;
    color: var(--home-accent-dark);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper > a:hover,
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper > a:focus-visible {
    border-color: var(--home-accent);
    background: var(--home-accent);
    color: #fff;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .title-link-wrapper > a i {
    margin: 0;
    font-size: 1.5rem;
}

/* 5b. Tuiles produits : coins arrondis, ombre au survol */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product-wrap {
    margin-bottom: 0;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap {
    padding: .8rem;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-sm);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap:hover {
    border-color: transparent;
    box-shadow: var(--home-shadow-hover);
    transform: translateY(-3px);
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal.is-tone-dark .product.product-image-gap {
    border-color: transparent;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-media {
    border-radius: var(--home-radius-sm);
    background: #f5f6f9;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-media img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    mix-blend-mode: multiply; /* fond blanc des photos fondu dans le gris */
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-details {
    padding: 1.4rem .6rem .4rem;
    background: transparent;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-details > .btn-wishlist {
    top: 1.5rem;
    right: .4rem;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-name {
    color: var(--home-text);
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-pa-wrapper .product-price .new-price {
    color: var(--home-ink);
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap .product-stock-meter__track {
    border-radius: 999px;
    overflow: hidden;
}

/* 5c. Bannières publicitaires : images arrondies flottantes */
:is(.home-page .home-canvas, body:not(.home-page) .main) [class*="homepage-block-pub-style"] {
    background: transparent;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) [class*="homepage-block-pub-style"] .banner,
:is(.home-page .home-canvas, body:not(.home-page) .main) [class*="homepage-block-pub-style"] .banner figure {
    border-radius: var(--home-radius);
    overflow: hidden;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) [class*="homepage-block-pub-style"] .banner {
    box-shadow: var(--home-shadow);
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-pub-style-2 .row {
    row-gap: var(--home-gap);
    margin-bottom: 0 !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-pub-style-2 .row > [class*="col-"] {
    margin-bottom: 0 !important;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-pub-style-3 .swiper-container {
    padding: 0 !important;
}

/* 5d. Bulles catégories / offres spéciales dans les cartes */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal-category .icon-category-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Le thème fixe 130px × 130px avec max-width: 100% : dès que la colonne est
   plus étroite, seule la largeur rétrécit et la bulle devient ovale. */
:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal-category .category-icon .category-media {
    width: min(13rem, 100%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f5f6f9;
    transition: box-shadow .25s ease, transform .25s ease;
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal-category .category-icon:hover .category-media {
    box-shadow: 0 0 0 .3rem rgba(247, 129, 22, .25);
    transform: translateY(-2px);
}

:is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block-deal-category .category-name {
    color: var(--home-text);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Tablette / mobile
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root {
        --home-card-pad: 1.6rem;
        --home-gap: 1.2rem;
    }

    :is(.home-page .home-topband, .shop-category-strip-section) .category-wrapper.category-bubble-bar {
        padding: 1rem 0 1.2rem;
    }

    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title {
        font-size: 1.8rem;
    }

    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper > a {
        padding: .7rem 1.4rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    /* Le thème centre et empile titre + lien : on garde la ligne. */
    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        text-align: left;
    }

    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper .title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title-link-wrapper > a {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575.98px) {

    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block:not(.homepage-block-deal) .title {
        font-size: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap,
    :is(.home-page .home-canvas, body:not(.home-page) .main) .homepage-block .product.product-image-gap:hover {
        transform: none;
        transition: none;
    }
}

/* =====================================================================
   AUTRES PAGES (body:not(.home-page))
   Même langage que l'accueil (header, bulles, blocs, tuiles) sur le fond
   gris par défaut (#f1f1f2, pas d'image) : le contenu de la page
   (.page-content > .container) forme UN bloc blanc, aligné sur le header ;
   le fil d'Ariane et le reste du fond restent gris.
   ===================================================================== */

/* Popup « comparateur » du thème : fonction non utilisée, la popup restait
   affichée vide en bas de page (déjà masquée sur l'accueil). */
.compare-popup {
    display: none !important;
}

/* --- Fond --------------------------------------------------------------- */
body:not(.home-page) .page-wrapper > main.main {
    padding-bottom: 4.8rem;
    background: #f1f1f2;
}

/* Les gabarits ouvrent un second <main class="main"> dans celui du layout ;
   app.css le peint en blanc sur /boutique et /produits. */
body:not(.home-page) .page-wrapper > main.main main.main {
    background: transparent;
}

/* app.css ajoutait 1.2rem sous les bulles : même bande que l'accueil. */
body:not(.home-page) .shop-category-strip-section {
    padding-bottom: 0;
}

/* Bandeau de titre (« Mon compte », « Contact »…) : blanc, dans la
   continuité du header, au lieu du gris du thème. */
body:not(.home-page) .page-header {
    height: auto;
    padding: 3.2rem 0;
    background: #fff;
    border-bottom: 1px solid var(--home-line);
}

body:not(.home-page) .page-header .page-title {
    color: var(--home-ink);
    letter-spacing: -.01em;
}

/* Fil d'Ariane posé sur le gris, sans filet ; les grands espacements du
   thème (mb-10 pb-1…) supprimés : le bloc blanc suit directement. */
body:not(.home-page) .breadcrumb-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0;
    padding: 1.4rem 0 !important;
    background: transparent;
}

body:not(.home-page) .breadcrumb-nav .breadcrumb {
    padding: 0;
    border: 0;
}

/* (hors étapes panier → commande → confirmation, .shop-breadcrumb, qui
   gardent leur étape active en orange) */
body:not(.home-page) .breadcrumb-nav .breadcrumb:not(.shop-breadcrumb),
body:not(.home-page) .breadcrumb-nav .breadcrumb:not(.shop-breadcrumb) a {
    color: var(--home-muted);
}

body:not(.home-page) .breadcrumb-nav .breadcrumb:not(.shop-breadcrumb) li:last-child {
    color: var(--home-ink);
}

/* La bande des bulles est suivie directement du fil d'Ariane gris. */
body:not(.home-page) .shop-category-strip-section + .breadcrumb-nav,
body:not(.home-page) .shop-category-strip-section ~ * .breadcrumb-nav {
    padding-top: 1.4rem !important;
}

/* --- Le contenu de la page : un seul bloc blanc ---------------------------
   Le bloc est dessiné DANS le padding du conteneur (::before) : ses bords
   s'alignent sur le header et le fil d'Ariane, et le contenu garde une
   marge intérieure. 20px = padding .container du thème (15px < 480px).
   Les blocs de /toutes-les-categories et /promotions (.homepage-block) sont
   déjà des cartes blanches : exclus. */
body:not(.home-page) .page-content {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body:not(.home-page) .page-content > .container:not(.homepage-block) {
    --container-pad: 20px;
    --block-inner: var(--home-card-pad);
    position: relative;
    isolation: isolate;
    padding: 2.8rem calc(var(--container-pad) + var(--block-inner));
}

body:not(.home-page) .page-content > .container:not(.homepage-block)::before {
    content: "";
    position: absolute;
    inset: 0 var(--container-pad);
    z-index: -1;
    border-radius: var(--home-radius);
    background: #fff;
}

/* Connexion / mot de passe oublié : la boîte de connexion est déjà une carte
   blanche — elle se pose seule sur le gris. */
body:not(.home-page) .page-content > .container:not(.homepage-block):has(.login-popup)::before {
    content: none;
}

body:not(.home-page) .page-content > .container:not(.homepage-block):has(.login-popup) {
    padding-right: var(--container-pad);
    padding-left: var(--container-pad);
}

/* Fiche produit (.product-single = .row à marges -10px) : marge intérieure
   réduite de la gouttière des colonnes, pour ne pas rétrécir la zone
   d'achat ; sur mobile, la gouttière seule. */
body.product-page:not(.home-page) .page-content > .container:not(.homepage-block) {
    --block-inner: calc(var(--home-card-pad) - 10px);
}

@media (max-width: 575.98px) {
    body.product-page:not(.home-page) .page-content > .container:not(.homepage-block) {
        --block-inner: 10px;
    }
}

@media (max-width: 479.98px) {
    body:not(.home-page) .page-content > .container:not(.homepage-block) {
        --container-pad: 15px;
    }
}

/* Mobile : marges du bloc blanc resserrées pour donner plus de largeur au
   contenu (bord gris 10px, marge intérieure 1.2rem / 6px en fiche produit). */
@media (max-width: 767.98px) {
    body:not(.home-page) .page-content > .container:not(.homepage-block) {
        --container-pad: 10px;
        --block-inner: 1.2rem;
    }

    body.product-page:not(.home-page) .page-content > .container:not(.homepage-block) {
        --block-inner: 6px;
    }

    /* Galerie « sticky » du thème : sur mobile elle reste en position relative
       avec top: 20px, d'où un vide au-dessus de l'image. */
    body.product-page .product-gallery-sticky {
        top: 0;
    }
}

/* Contact : la carte Google Maps (pleine largeur) suit le contenu. */
body:not(.home-page) .contact-map-section {
    margin-top: var(--home-gap) !important;
}

body:not(.home-page) .login-popup {
    border-radius: var(--home-radius);
    background: #fff;
    box-shadow: var(--home-shadow);
}

/* --- Blocs posés directement dans .page-content (toutes les catégories,
   page promotions) : ce sont des .container autonomes ; la carte est
   rétrécie du padding du conteneur pour s'aligner sur le fil d'Ariane et
   les bannières (sur l'accueil, ils sont imbriqués dans un .container). */
body:not(.home-page) .page-content > .homepage-block {
    --container-pad: 20px;
    width: calc(100% - 2 * var(--container-pad));
    max-width: calc(1280px - 2 * var(--container-pad));
}

@media (max-width: 479.98px) {
    body:not(.home-page) .page-content > .homepage-block {
        --container-pad: 15px;
    }
}

/* --- Bannières de page (boutique, catégorie, promotion) ------------------ */
body:not(.home-page) .shop-default-banner,
body:not(.home-page) .banner-slider,
body:not(.home-page) .all-categories-banner-slider {
    border-radius: var(--home-radius);
    overflow: hidden;
}

/* --- Boutique / catalogue / fiche produit : tuiles ----------------------- */
/* Tuiles produits hors blocs (grilles boutique / catalogue / produits
   similaires / favoris) : même tuile que sur l'accueil. */
body:not(.home-page) .main .product-wrapper .product.product-image-gap,
body:not(.home-page) .main .product-wrapper .product-wrap > .product {
    height: 100%;
    padding: .8rem;
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-sm);
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body:not(.home-page) .main .product-wrapper .product.product-image-gap:hover,
body:not(.home-page) .main .product-wrapper .product-wrap > .product:hover {
    border-color: transparent;
    box-shadow: var(--home-shadow-hover);
    transform: translateY(-3px);
}

body:not(.home-page) .main .product-wrapper .product .product-media {
    border-radius: var(--home-radius-sm);
    background: #f5f6f9;
    overflow: hidden;
}

body:not(.home-page) .main .product-wrapper .product .product-media img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    mix-blend-mode: multiply;
}

body:not(.home-page) .main .product-wrapper .product .product-details {
    padding: 1.4rem .6rem .4rem;
    background: transparent;
}

body:not(.home-page) .main .product-wrapper .product .product-name {
    color: var(--home-text);
}

body:not(.home-page) .main .product-wrapper .product .product-price .new-price {
    color: var(--home-ink);
}

/* --- Fiche produit ------------------------------------------------------ */
body.product-page .product.product-single {
    margin-bottom: 0 !important;
}

body.product-page .product-sidebar .banner {
    border-radius: var(--home-radius);
    overflow: hidden;
}

body.product-page .product-gallery .product-single-swiper,
body.product-page .product-gallery figure {
    border-radius: var(--home-radius-sm);
}

/* Galerie à plusieurs images : flèches précédent / suivant toujours visibles sur
   l'image mise en avant (le thème ne les montre qu'au survol, et sans fond : rien
   sur mobile, peu lisibles sur une photo claire). */
body.product-page .product-single-swiper.nav-inner > .swiper-button-prev,
body.product-page .product-single-swiper.nav-inner > .swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 .2rem 1rem rgba(15, 23, 42, .16);
    color: #222;
    font-size: 1.8rem;
    opacity: 1;
    visibility: visible;
    transition: background-color .2s, color .2s, opacity .2s;
}

body.product-page .product-single-swiper.nav-inner > .swiper-button-prev {
    left: 1.2rem;
}

body.product-page .product-single-swiper.nav-inner > .swiper-button-next {
    right: 1.2rem;
}

body.product-page .product-single-swiper.nav-inner > .swiper-button-prev:not(.swiper-button-disabled):hover,
body.product-page .product-single-swiper.nav-inner > .swiper-button-next:not(.swiper-button-disabled):hover {
    background-color: #F78116;
    color: #fff;
}

/* Première / dernière image : la flèche inutile s'estompe sans disparaître. */
body.product-page .product-single-swiper.nav-inner > .swiper-button-disabled {
    opacity: .35;
    color: #888;
}

@media (max-width: 575.98px) {
    body.product-page .product-single-swiper.nav-inner > .swiper-button-prev,
    body.product-page .product-single-swiper.nav-inner > .swiper-button-next {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.5rem;
    }

    body.product-page .product-single-swiper.nav-inner > .swiper-button-prev {
        left: .8rem;
    }

    body.product-page .product-single-swiper.nav-inner > .swiper-button-next {
        right: .8rem;
    }
}

/* Titres de section (produits similaires, récemment consultés…) : comme
   les titres de blocs de l'accueil. */
body:not(.home-page) .main .title-link-wrapper::after,
body:not(.home-page) .main .title-link-wrapper .title::after {
    content: none;
    display: none;
}

body:not(.home-page) .main .related-product-section .title-link-wrapper,
body:not(.home-page) .main .recently-viewed-section .title-link-wrapper {
    margin: 0 0 2rem !important;
    padding: 0 !important;
    border: 0;
}

body:not(.home-page) .main .related-product-section > .title::before,
body:not(.home-page) .main .related-product-section > .title::after {
    content: none;
    display: none;
}

body:not(.home-page) .main .related-product-section > .title {
    margin-bottom: 2rem !important;
}

body:not(.home-page) .main .related-product-section .title,
body:not(.home-page) .main .recently-viewed-section .title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--home-ink);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

@media (max-width: 991.98px) {
    body:not(.home-page) .page-wrapper > main.main {
        padding-bottom: 3.2rem;
    }

    body:not(.home-page) .page-content > .container:not(.homepage-block) {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    body:not(.home-page) .page-content > .container:not(.homepage-block) {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

    /* Blocs autonomes (toutes les catégories, promotions) : même bord gris
       que le bloc de la bannière au-dessus. */
    body:not(.home-page) .page-content > .homepage-block {
        --container-pad: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.home-page) .main .product-wrapper .product,
    body:not(.home-page) .main .product-wrapper .product:hover {
        transform: none;
        transition: none;
    }
}

/* Carte PrixKdo : page de présentation sans .page-content ; son visuel
   d'en-tête démarre juste sous le fil d'Ariane. */
body.wallet-card-page .breadcrumb-nav {
    margin-bottom: 0 !important;
}

/* --- /toutes-les-categories : cartes plus compactes --------------------------
   Padding réduit (bloc de la bannière + cartes catégories). --home-card-pad
   pilote aussi le décalage des flèches de carrousel. */
body.all-categories {
    --home-card-pad: 1.6rem;
}

body.all-categories:not(.home-page) .page-content > .container:not(.homepage-block) {
    padding-top: var(--home-card-pad);
    padding-bottom: var(--home-card-pad);
}

body.all-categories:not(.home-page) .main .page-content > .homepage-block {
    padding: var(--home-card-pad);
}

/* La bannière porte un mb-9 (4.5rem) du thème : vide blanc sous l'image. */
body.all-categories:not(.home-page) .page-content > .container .all-categories-banner-slider {
    margin-bottom: 0 !important;
}

@media (max-width: 991.98px) {
    body.all-categories {
        --home-card-pad: 1.2rem;
    }
}