/* ═══════════════════════════════════════════════════════════
   PAGE CATEGORIE CUBX — FIXES (theme-category-fixes.css)
   Charge APRES theme-core.css (priority 225 vs 200).

   Fichier dedie aux corrections incrementales sur la page
   categorie. Permet d'iterer sur les fixes sans toucher au
   gros theme-core.css ni au theme-category.css (priority 215).

   ──────────────────────────────────────────────────────────
   Historique des fixes :
     v2.5.47 : FIX 1 — marges negatives Bootstrap .row
     v2.5.52 : FIX 2 — separateur "/" Classic breadcrumb
     v2.5.53 : FIX 3 — sous-categories grid (selecteurs rates)
     v2.5.54 : FIX 3 V2 — selecteurs corrects + img dimensions
     v2.5.55 : (override template subcategories.tpl, pas de CSS)
     v2.5.56 : FIX 3 V3 — focus outline (insuffisant), grid overflow,
                          balises h2/h5 supprimees, espaces resserres
     v2.5.57 : FIX 3 V4 — heading fort taille block title (22px gras
                          noir non-MAJ), espace heading->grid 4px,
                          parade nucleaire focus outline (img + *:focus
                          + *:focus-within + tap-highlight transparent)
     v2.5.58 : FIX 4 — parade nucleaire cadre bleu permanent
     v2.5.58 : FIX 5 — espace description -> sous-cat reduit
     v2.5.59 : FIX 4 v2 — cadre bleu turquoise (focus-visible Chrome)
     v2.5.60 : FIX 6 — sledgehammer espace description (echec partiel)
     v2.5.61 : FIX 7 — chirurgie .block-category padding interne
     v2.5.62 : FIX 7 v2 — height:auto + min-height:0 pour 220px parasite
     v2.5.62 : FIX 8 — bande blanche/grise en haut de la home (workaround
                       CSS contre Classic theme.css ligne 9)
     v2.5.64 : FIX 8 RETIRE — devenu redondant depuis h2jecosystem v2.15.32
                              qui neutralise Classic theme.css au runtime
                              via unregisterStylesheet('theme-main')
   ──────────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1 — NEUTRALISATION DES MARGES NEGATIVES BOOTSTRAP
            SUR .products.row (v2.5.47)
   ───────────────────────────────────────────────────────────
   Cause : Classic rend la grille avec <div class="products row">
   et Bootstrap applique margin: 0 -15px sur .row pour compenser
   le padding 15px des .col-* parents. En layout-full-width,
   il n'y a pas de .col-* parent, donc les -15px débordent.

   Fix : forcer margin: 0 sur .products.row dans le contexte
   du listing categorie.
   ═══════════════════════════════════════════════════════════ */

#js-product-list .products.row,
#js-product-list .products {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body#category #js-product-list,
body.page-category #js-product-list {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════
   FIX 2 — NEUTRALISATION DU SEPARATEUR "/" CLASSIC
            (BREADCRUMB CATEGORIE ET PRODUIT) (v2.5.52)
   ───────────────────────────────────────────────────────────
   Classic injecte un "/" via ::after sur .breadcrumb-item.
   Cumulé avec notre ">" injecté via ::before, on voit deux
   séparateurs. Fix : neutraliser le ::after Classic, garder
   notre ">" via .breadcrumb-item + .breadcrumb-item::before.
   ═══════════════════════════════════════════════════════════ */

.breadcrumb-item::after {
    content: none !important;
    display: none !important;
}

.breadcrumb-item::before {
    content: none;
    display: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    display: inline-flex !important;
    color: var(--cubx-accent, var(--h2j-primary, #7c4dff)) !important;
    margin: 0 10px !important;
    font-weight: 400 !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
}

.breadcrumb > .separator,
.breadcrumb .breadcrumb-separator {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   FIX 3 — SOUS-CATEGORIES MINI-CARDS PORTRAIT 1:2 (v2.5.57)
   ───────────────────────────────────────────────────────────
   Markup CUBX (override Classic via subcategories.tpl v2.5.55+) :
     <div id="subcategories">
       <div class="subcategory-heading">Sous-categories</div>
       <ul class="subcategories-list">
         <li>
           <div class="subcategory-image">
             <a class="img" href="..."><img class="img-fluid" ...></a>
           </div>
           <div class="subcategory-label">
             <a class="subcategory-name">Nom</a>
           </div>
         </li>
       </ul>
     </div>

   Strategie v2.5.57 :
   1. Heading fort : 22px gras noir non-MAJ ("Sous-categories"), aligne
      visuellement avec le block title homeblocks (TOP VENTES = 20px).
   2. Espace heading -> grid : 4px (etait 12px en v2.5.56).
   3. Parade nucleaire focus outline : cible img + tous *:focus + *:focus-within
      + *:active + box-shadow + tap-highlight-color transparent.
   4. Reste : grid auto-fit minmax(180px), portrait 1:2, hover bordure rose.
   ═══════════════════════════════════════════════════════════ */

/* 1. Reset wrapper Classic .card.card-block. */
#subcategories,
#subcategories.card,
#subcategories.card-block {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 16px 0 24px !important;
    border-radius: 0 !important;
}

/* 2. Heading "Sous-categories" : fort comme un block title (TOP VENTES style).
   v2.5.57 : 22px gras noir, casse normale (pas MAJ), centre, espace bottom 4px. */
#subcategories .subcategory-heading,
#subcategories h2.subcategory-heading,
#subcategories div.subcategory-heading {
    font-size: 22px !important;            /* v2.5.57 : etait 12px */
    font-weight: 700 !important;
    text-transform: none !important;       /* v2.5.57 : etait uppercase */
    letter-spacing: 0 !important;          /* v2.5.57 : etait 0.08em */
    color: var(--h2j-text-dark, var(--h2j-text, #1a1a1a)) !important;  /* v2.5.57 : etait gris */
    text-align: center !important;
    margin: 0 0 4px !important;            /* v2.5.57 : etait 0 0 12px */
    padding: 0 !important;
    border: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* 3. Grid container : auto-fit minmax 180px. */
#subcategories ul,
#subcategories ul.subcategories-list {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Mini-card individuelle (li sans classe). min-width: 0 critique anti-overflow. */
#subcategories li {
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    flex: none !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. Container image : aspect-ratio 1:2 portrait + bordure pour hover */
#subcategories .subcategory-image {
    display: block !important;
    aspect-ratio: 1 / 2 !important;
    overflow: hidden !important;
    border-radius: var(--cubx-radius, 8px) !important;
    background: var(--h2j-bg-soft, #f3f4f6) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    transition: border-color .2s ease, transform .2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 6. Lien <a class="img"> wrapper : remplit le container.
   v2.5.57 : parade nucleaire contre le focus outline bleu Chrome.
   On cible *tous* les liens du bloc, en *tous* les etats (focus, focus-visible,
   focus-within, active, hover) et on retire outline + box-shadow + tap highlight.
   La meme regle est dupliquee plus bas (#10) sur a.subcategory-name. */
#subcategories .subcategory-image > a,
#subcategories .subcategory-image > a.img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 6b. Parade nucleaire focus outline (v2.5.57).
   Couvre TOUS les enfants du bloc, dans TOUS les etats focus possibles.
   Necessaire car Chrome :focus-visible peut cibler l'<img>, le wrapper <a>,
   le <li>, ou n'importe quel descendant selon que le tap est sur l'image
   ou sur le label. La regle precedente (limitee a .subcategory-image > a)
   ne couvrait pas tous les cas. */
#subcategories *:focus,
#subcategories *:focus-visible,
#subcategories *:focus-within,
#subcategories *:active,
#subcategories a:focus,
#subcategories a:focus-visible,
#subcategories a:active,
#subcategories img:focus,
#subcategories img:focus-visible,
#subcategories li:focus-within,
#subcategories .subcategory-image:focus-within,
#subcategories .subcategory-label:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 7. <picture> : remplit l'<a>. CRITIQUE : par défaut <picture> est inline. */
#subcategories .subcategory-image picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 8. <img> : remplit le <picture>, cover, ignore les width/height HTML. */
#subcategories img,
#subcategories .subcategory-image img,
#subcategories .subcategory-image picture img,
#subcategories img.img-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;          /* v2.5.57 */
    border: 0 !important;              /* v2.5.57 : Chrome injecte parfois */
}

/* 9. Label wrapper sous l'image (v2.5.56+ : div.subcategory-label,
   compat ascendante avec h5 si Classic remonte). */
#subcategories .subcategory-label,
#subcategories h5,
#subcategories li > .subcategory-label,
#subcategories li > h5 {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* 10. Lien titre <a class="subcategory-name"> : noir, MAJUSCULES, gras */
#subcategories .subcategory-name,
#subcategories h5 a,
#subcategories .subcategory-label a {
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--h2j-text-dark, #1a1f2c) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
}

/* 11. Hover : bordure rose accent + zoom de l'image (pas du conteneur) + texte rose.
   v2.5.186 (P-046 redux) : on déplace le scale du conteneur .subcategory-image vers
   l'<img> interne. Le conteneur ayant overflow:hidden (regle 5), le zoom est contenu
   visuellement et ne peut PAS provoquer de scroll horizontal de page. La border reste
   sur le conteneur (s'allume rose au hover) sans zoomer elle-même. Pattern UX standard
   e-commerce premium (image qui zoome dans son cadre). Effet plus marqué (1.05 vs 1.02)
   pour rester visible.
   Cause du bug évité : transform:scale(1.02) sur la dernière colonne du grid auto-fit
   débordait de ~1% à droite, déclenchait un scroll horizontal page → mauvais signal SEO. */
#subcategories li:hover .subcategory-image {
    border-color: var(--cubx-accent, #f97272) !important;
    /* transform retiré ici, déplacé vers l'<img> ci-dessous */
}

#subcategories li:hover .subcategory-image img,
#subcategories li:hover .subcategory-image picture img,
#subcategories li:hover .subcategory-image img.img-fluid {
    transform: scale(1.05) !important;
    transition: transform .25s ease !important;
}

/* Transition par défaut sur l'image (état repos → hover doux) */
#subcategories .subcategory-image img,
#subcategories .subcategory-image picture img,
#subcategories .subcategory-image img.img-fluid {
    transition: transform .25s ease !important;
}

#subcategories li:hover .subcategory-name,
#subcategories li:hover h5 a,
#subcategories li:hover .subcategory-label a {
    color: var(--cubx-accent, #f97272) !important;
}

/* 12. Mobile : 2 cols mini en dessous de 480px */
@media (max-width: 480px) {
    #subcategories ul,
    #subcategories ul.subcategories-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    #subcategories .subcategory-name {
        font-size: 11px !important;
    }
    #subcategories .subcategory-heading {
        font-size: 18px !important;       /* v2.5.57 : reduit sur mobile */
    }
}

/* 13. Très grand desktop : minmax 200px pour pas perdre l'échelle */
@media (min-width: 1400px) {
    #subcategories ul,
    #subcategories ul.subcategories-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

/* 14. Reduction de l'espace entre la description categorie et le bloc
   sous-categories. */
.block-category + #subcategories,
.category-description + #subcategories,
.cubx-cat-description + #subcategories {
    margin-top: 8px !important;
}

.block-category .category-description {
    margin-bottom: 12px !important;
}


/* ═════════════════════════════════════════════════════════
   FIX 4 — PARADE NUCLEAIRE CADRE BLEU PERMANENT (v2.5.58)
   ───────────────────────────────────────────────────────────
   Sur la capture v2.5.57, on voit un cadre BLEU épais PERMANENT (pas focus)
   sur la 1ère sous-cat (Lingerie de jour). Pas un focus ring (Chrome ne le
   met pas en permanence). C'est probablement une bordure CSS Classic
   appliquée via :
     - .card.card-block (Bootstrap card)
     - article.subcategory (style legacy)
     - .subcategory-image (border-color: blue)
     - <a> avec border par défaut
     - Ou un :first-child highlight Classic

   Parade : on annule TOUTE bordure colorée sur les enfants de #subcategories,
   et on n'autorise QUE notre bordure transparente → rose au hover via
   .subcategory-image (FIX 3 règle 5 + 11).

   v2.5.58 — Cible TOUS les descendants du bloc avec border:0
   et box-shadow:none, et l'override partial est aussi corrigé au bon path.
   ══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   v2.5.156 — SPRINT 5 V1 PIVOT CSS-FIRST : Pages /promotions /nouveaux-produits
   /brand /plan-site — styles communs + spécifiques (sans doublon DOM).
   ───────────────────────────────────────────────────────────
   PIVOT CSS-FIRST par rapport à v2.5.155 :
   On NE duplique PAS les contenus PS Core (H1, descriptions). On cible
   directement les éléments natifs PS rendus dans <section id="main"> et
   on les restyle. Ça évite tout doublon dans le DOM.

   /promotions, /nouveaux-produits, /plan-site :
     Le block Smarty page_title est override par CUBX pour produire un
     <h1 class="cubx-listing-title"> propre. CSS : centrage + taille H1.

   /brand/{id} :
     Le block page_title produit <h1 class="cubx-brand-title"> avec juste
     le nom de la marque. Le H1 natif PS "Liste des produits..." est masqué.
     Les descriptions natives #manufacturer-short_description et
     #manufacturer-description sont GARDÉES (rendues par PS Core), juste
     restylées. Logo marque en incrustation desktop via background sur
     #main::before, en bandeau au-dessus de la description en mobile via
     .cubx-brand-wrap::before.
   ═══════════════════════════════════════════════════════════ */

.cubx-listing-title {
  display: block;
  text-align: center;
  font-size: 2rem;          /* ~32px sur desktop : vrai H1 */
  font-weight: 700;
  color: var(--cubx-text-strong, #14213d);
  margin: 32px 0 24px;
  padding: 0 16px;          /* respiration cotés sur mobile */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cubx-listing-title .sitemap-title {
  /* Pour le sitemap qui wrap le label dans un <span> natif PS */
  display: inline;
}

@media (min-width: 768px) {
  .cubx-listing-title {
    font-size: 2.5rem;       /* ~40px sur desktop */
    margin: 40px 0 32px;
  }
}


/* v2.5.198 — Réduction de l'écart breadcrumb → H1 sur les pages listings
   spéciaux (search / new-products / prices-drop / best-sales) qui ont désormais
   un breadcrumb manuel injecté dans le content_wrapper. Sans cette règle,
   le margin-top de .cubx-listing-title (32px mobile, 40px desktop) crée un
   écart visuel trop grand sous le breadcrumb (~40px desktop). Sur les autres
   pages utilisant .cubx-listing-title sans breadcrumb (ex: sitemap), le
   margin-top de base reste préservé — cette règle ne s'applique que sur
   les pages dont le DOM contient .cubx-cat-breadcrumb-wrap.

   Stratégie : le H1 promu .cubx-listing-title n'est pas frère direct du
   .cubx-cat-breadcrumb-wrap (Smarty les pose dans 2 wrappers différents).
   On utilise donc :has() pour cibler le content-wrapper qui suit immédiatement
   un breadcrumb-wrap, et on réduit le margin-top du H1 à l'intérieur. Si
   :has() n'est pas supporté par le navigateur, fallback sur les body classes
   spécifiques (page-search / page-new-products / page-prices-drop / page-best-sales)
   qui ont désormais le breadcrumb par défaut depuis cubx-theme v2.5.198. */
.cubx-cat-breadcrumb-wrap + #content-wrapper .cubx-listing-title,
body.page-search .cubx-listing-title,
body.page-new-products .cubx-listing-title,
body.page-prices-drop .cubx-listing-title,
body.page-best-sales .cubx-listing-title {
  margin-top: 8px;
}
@media (min-width: 768px) {
  .cubx-cat-breadcrumb-wrap + #content-wrapper .cubx-listing-title,
  body.page-search .cubx-listing-title,
  body.page-new-products .cubx-listing-title,
  body.page-prices-drop .cubx-listing-title,
  body.page-best-sales .cubx-listing-title {
    margin-top: 12px;
  }
}


/* ─── Page Brand : wrapper + masquage H1 natif PS + logo en incrustation ──── */

.cubx-brand-wrap {
  /* Wrapper général autour du content de la page brand. Expose --cubx-brand-logo
     en custom-property via style inline posée par manufacturer.tpl. */
  display: block;
}

/* Masquage du H1 natif PS Core "Liste des produits de la marque {name}".
   Ce H1 est rendu dans <section id="main"> > <h1> direct (pas dans .page-header,
   pas de classe). On le cible par sa position structurale + body.page-manufacturer.
   ATTENTION : ne pas masquer notre cubx-brand-title qui a la classe dédiée. */
body.page-manufacturer #main > h1:not(.cubx-listing-title):not(.cubx-brand-title) {
  display: none !important;
}

/* Notre H1 propre pour la page brand (override block page_title manufacturer.tpl).
   On garde l'id #js-manufacturer-list-header pour cas d'AJAX pagination future. */
.cubx-brand-title {
  display: block;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--cubx-text-strong, #14213d);
  margin: 32px 0 16px;
  padding: 0 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .cubx-brand-title {
    font-size: 2.5rem;
    margin: 40px 0 24px;
  }
}

/* Restyling des descriptions natives PS Core sur la page brand.
   PS rend :
     <div id="manufacturer-short_description">...</div>
     <div id="manufacturer-description">...</div>
   Pas de classe utile, on cible par id. */
#manufacturer-short_description,
#manufacturer-description {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 0 16px;
  color: var(--cubx-text, #1f2937);
  line-height: 1.6;
  font-size: 1rem;
}

#manufacturer-short_description {
  font-weight: 500;
  color: var(--cubx-text-strong, #14213d);
}

#manufacturer-description {
  margin-bottom: 32px;
}

#manufacturer-description p,
#manufacturer-short_description p {
  margin-bottom: 12px;
}
#manufacturer-description p:last-child,
#manufacturer-short_description p:last-child {
  margin-bottom: 0;
}

/* DESKTOP ≥ 992px : Logo marque en INCRUSTATION TYPE FLOAT (v2.5.161).
   STRATÉGIE : on pose le ::before directement sur section#main car c'est lui
   qui contient les enfants natifs PS (H1 + #manufacturer-short_description +
   #manufacturer-description). Le wrap CUBX (.cubx-brand-wrap) est créé par
   manufacturer.tpl mais il enveloppe le block 'content' Smarty, qui ne
   contient PAS le H1 + descriptions — ces éléments sont rendus directement
   dans section#main par le parent template Classic.

   Pour que le float marche, le ::before doit donc être frère des H1/desc,
   c-à-d enfant de section#main. Le float:left + clear:both en bas du dernier
   manufacturer-description force le contenu suivant (toolbar/products) à
   reprendre en bas, pas à côté du logo.

   v2.5.161 — FIX CRITIQUE display:block. CUBX pose display:flex sur section#main
   pour le layout vertical par défaut. Or les pseudo-éléments ::before sur un
   flex container deviennent des items flex et IGNORENT float:left (les flex
   items s'alignent dans le flex flow, pas dans le flow normal). On force donc
   display:block sur section#main UNIQUEMENT pour body.page-manufacturer afin
   que ::before retrouve son comportement de flow normal et que le float fonctionne.
   Test live confirmé : avec display:block, le H1 et les descriptions coulent
   bien autour du logo (premier rect du H1 à x=239, soit à droite du logo).

   On stocke l'URL du logo dans une CSS variable posée sur body.page-manufacturer
   (au lieu de .cubx-brand-wrap qui ne contient pas les bons enfants — mais
   --cubx-brand-logo hérite naturellement de body → section#main). */
@media (min-width: 992px) {
  body.page-manufacturer #main {
    /* v2.5.161 : casse le display:flex CUBX par défaut pour permettre au float
       du ::before de fonctionner. Sans ça, le ::before devient un flex item
       et le float:left est ignoré → le logo est au-dessus du H1 au lieu d'être
       à sa gauche. */
    display: block;
    position: static;
  }
  /* Float du logo en premier dans section#main */
  body.page-manufacturer #main::before {
    content: "";
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 24px 16px 0;
    background-image: var(--cubx-brand-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--cubx-bg-elevated, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 12px;
    box-sizing: border-box;
  }
  /* H1 + descriptions en flow normal, coulent autour du float */
  body.page-manufacturer .cubx-brand-title,
  body.page-manufacturer #manufacturer-short_description,
  body.page-manufacturer #manufacturer-description {
    padding-left: 0;
    padding-right: 24px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  body.page-manufacturer .cubx-brand-title {
    margin-top: 0;
    padding-top: 8px;
  }
  /* Clearfix sur le dernier élément du header brand pour que la toolbar
     et la grille produits qui suivent ne soient pas affectées par le float */
  body.page-manufacturer #manufacturer-description::after,
  body.page-manufacturer #manufacturer-short_description:last-of-type::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* MOBILE / TABLET ≤ 991px : pas de float (pas de place). Logo en bandeau au-dessus
   du H1, centré et petit. On le pose aussi sur section#main::before (même approche
   que desktop pour rester cohérent), sans float — simple bloc centré. */
@media (max-width: 991px) {
  body.page-manufacturer #main::before {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    margin: 24px auto 8px;
    background-image: var(--cubx-brand-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--cubx-bg-elevated, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 8px;
    box-sizing: border-box;
  }
}


/* ─── Page Sitemap : restyle propre du contenu natif PS ──────────────────── */

.cubx-sitemap-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* Wrapper .page-header natif sitemap : centrer + remonter */
body.page-sitemap .page-header {
  text-align: center;
  margin: 0 0 24px;
  padding: 16px 16px 0;
}

/* Le H1 natif sitemap est dans le block page_title qu'on override
   pour produire .cubx-listing-title. Pas de regle supplémentaire requise. */

/* Sections H2 du sitemap : style propre */
body.page-sitemap .container-fluid h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cubx-text-strong, #14213d);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cubx-border, #e5e7eb);
}

body.page-sitemap .container-fluid ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 16px;
}

body.page-sitemap .container-fluid ul li {
  padding: 4px 0;
}

body.page-sitemap .container-fluid ul li a {
  color: var(--cubx-text, #1f2937);
  text-decoration: none;
  transition: color 0.15s ease;
}

body.page-sitemap .container-fluid ul li a:hover {
  color: var(--cubx-accent, #ec4899);
  text-decoration: underline;
}

/* Tous les descendants de #subcategories : pas de bordure colorée parasite.
   Exception : .subcategory-image (qui doit garder sa border:2px transparent
   pour permettre le hover rose) — ciblé par neg en :not. */
#subcategories *:not(.subcategory-image) {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Filet de sécurité spécifique : bordure de 1ère card. Quelques themes
   Classic stylent .subcategories-list > li:first-child différemment. */
#subcategories .subcategories-list > li:first-child,
#subcategories ul > li:first-child,
#subcategories li:first-child {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Filet spécifique : .card.card-block bootstrap (Classic l'utilise). */
#subcategories.card,
#subcategories.card-block,
#subcategories .card,
#subcategories .card-block {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Filet spécifique <picture> : Classic markup contient <picture> + <source>,
   au cas où ils auraient une border. */
#subcategories picture,
#subcategories source {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* v2.5.59 — Cadre bleu turquoise persistant au hover/focus.
   Sur la capture v2.5.58, on voit DEUX cadres concentriques :
     1. cadre rose interne (bordure CUBX hover, OK)
     2. cadre bleu turquoise externe (PARASITE)

   Le bleu turquoise vient probablement de :
     a. Un :focus-visible Chrome avec accent-color cyan
     b. Une bordure CSS d'un parent .card.card-block en mode :focus-within
     c. Un style ?:visited ou ?:active qui change la border-color

   On force border-color: transparent + outline: none + box-shadow: none
   sur TOUS les etats interactifs, en cible PARENTS de .subcategory-image
   (parent <li> et div.subcategory-image elle-meme). */
#subcategories li,
#subcategories li:hover,
#subcategories li:focus,
#subcategories li:focus-within,
#subcategories li:active,
#subcategories li:visited,
#subcategories .subcategory-image:focus,
#subcategories .subcategory-image:focus-within,
#subcategories .subcategory-image:active {
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Force l'override du border-color au hover : SEULE la bordure rose CUBX
   est autorisée. Tout autre couleur (bleu, cyan, turquoise, etc.) est
   reset à transparent. */
#subcategories li:hover .subcategory-image,
#subcategories li:focus .subcategory-image,
#subcategories li:focus-within .subcategory-image,
#subcategories li:active .subcategory-image {
    border-color: var(--cubx-accent, #f97272) !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ═════════════════════════════════════════════════════════
   FIX 5 — ESPACE DESCRIPTION CATEGORIE → SOUS-CAT (v2.5.58)
   ───────────────────────────────────────────────────────────
   Sur la capture v2.5.57, l'espace entre la description "Venez découvrir
   nos collections..." et "Sous-catégories" est ENORME (~150px).

   Causes possibles cumulees :
   1. .block-category Classic a un padding/margin bottom genereux
   2. .category-description a un min-height pour ne pas reflow quand collapsed
   3. Le wrapper #subcategories a un margin-top hérité du theme parent
   4. Un block Smarty entre les 2 cree un sibling vide

   Parade : on attaque chaque cause possible.
   ══════════════════════════════════════════════════════════ */

/* 1. Reset margin-top du bloc #subcategories. On scope strictement page cat. */
body#category #subcategories,
body.page-category #subcategories {
    margin-top: 8px !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
}

/* 2. Reset padding/margin du wrapper .block-category Classic. Sa marge bottom
   est typiquement 32-48px sur Classic. On reduit drastiquement. */
body#category .block-category,
body.page-category .block-category {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

/* 3. .category-description : pas de min-height parasite (Classic peut le mettre
   pour reserver une hauteur). On laisse hauteur fluide. */
body#category .category-description,
body.page-category .category-description,
body#category #category-description,
body.page-category #category-description {
    min-height: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* 4. Le bouton toggle "En savoir plus" CUBX a un margin-top par defaut.
   On le reduit pour qu'il ne cree pas un gap supplementaire. */
body#category .cubx-cat-desc-toggle,
body.page-category .cubx-cat-desc-toggle {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* 5. Le wrapper interne .block-category-inner : reset padding bottom. */
body#category .block-category-inner,
body.page-category .block-category-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* ═════════════════════════════════════════════════════════
   FIX 6 — ESPACE DESCRIPTION SLEDGEHAMMER (v2.5.60)
   ───────────────────────────────────────────────────────────
   FIX 5 ne suffit pas : l'espace fait toujours ~150px en v2.5.60.
   Cibles potentielles non couvertes par FIX 5 :
     - Wrappers Bootstrap parents (.row, .col-*)
     - Hooks Smarty avec contenu vide qui creent des spacers
     - .block-category .h1 ou .display-1 (titre LOVETOYS) avec margin enorme
     - .cubx-cat-header__* (selecteurs CUBX possibles)
     - .category-cover ou similaire
     - .product-list-header ou wrapper de la toolbar CUBX

   Strategie : ratisser ABSOLUMENT TOUS les siblings et ancestors
   communs entre la description et #subcategories, et neutraliser
   margin-bottom + padding-bottom + margin-top.

   Note : si l'utilisateur n'aime pas l'espace residuel apres v2.5.60,
   il faudra inspecter le DOM et identifier le vrai coupable au F12.
   ═════════════════════════════════════════════════════════ */

/* Sledgehammer 1 : tous les enfants directs et indirects de .block-category
   ont leur margin-bottom et padding-bottom resettés. Aucun gap residuel. */
body#category .block-category > *,
body.page-category .block-category > *,
body#category .block-category *,
body.page-category .block-category * {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Sledgehammer 2 : on autorise UNIQUEMENT le margin-bottom resserré sur la
   description et le bouton toggle (parade contre le sledgehammer 1 ci-dessus). */
body#category #category-description,
body.page-category #category-description,
body#category .category-description,
body.page-category .category-description {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

body#category .cubx-cat-desc-toggle,
body.page-category .cubx-cat-desc-toggle {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding: 4px 8px !important;
}

/* Sledgehammer 3 : reset margin-top sur le bloc #subcategories. */
body#category #subcategories,
body.page-category #subcategories {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* Sledgehammer 4 : si le titre H1 "LOVETOYS" / "LINGERIE" a une marge
   bottom enorme (Bootstrap display-1 .h1 etc), on coupe. */
body#category .block-category h1,
body.page-category .block-category h1,
body#category .block-category .h1,
body.page-category .block-category .h1,
body#category .category-name,
body.page-category .category-name,
body#category .category-cover,
body.page-category .category-cover {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

/* Sledgehammer 5 : tout sibling vide injecté par hook Smarty entre
   .block-category et #subcategories. On les rend invisibles avec hauteur 0. */
body#category .block-category + *:empty,
body.page-category .block-category + *:empty,
body#category .block-category ~ *:empty,
body.page-category .block-category ~ *:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sledgehammer 6 : wrapper Bootstrap .row / .col-* qui reserveraient
   un padding bottom dans la zone description. */
body#category #content-wrapper > .row,
body.page-category #content-wrapper > .row,
body#category #content-wrapper > .row > [class*="col-"],
body.page-category #content-wrapper > .row > [class*="col-"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ═════════════════════════════════════════════════════════
   FIX 7 — .block-category PADDING INTERNE (v2.5.61)
   ───────────────────────────────────────────────────────────
   Diag console v2.5.60 a revele :
     [2] DIV.block-category.card.card-block height: 220px
     [1] DIV.block-category-inner          height: 80px
     [0] DIV#category-description          height: 72px

   .block-category fait 220px alors que son contenu interne (.block-category-inner)
   ne fait que 80px = 140px de vide INTERNE (padding-top + padding-bottom +
   marges H1 invisibles). Plus les 12px de margin-bottom = ~152px de gap
   total entre la fin de la description et le debut de #subcategories.

   Cause Classic : .card.card-block Bootstrap 4 applique un padding 1.25rem
   (= 20px) tout autour. PLUS le .h1 / .display-x du titre catégorie qui a
   une marge enorme. PLUS un padding-top genereux sur .block-category dans
   theme.css Classic.

   Fix : ratisser large avec padding: 0 sur tous les wrappers + force
   margin: 0 sur le titre H1 + dernier enfant .block-category force margin-bottom: 0.
   ═════════════════════════════════════════════════════════ */

/* 1. .block-category : on force padding 0 partout SAUF le top (8px reduit
   pour laisser respirer juste un peu). Le .card.card-block bootstrap
   est neutralise.
   v2.5.62 : ajout height:auto + min-height:0 pour casser la reservation
   de 220px du browser quand description repliee. Diag console v2.5.61 a
   revele 92px de blanc APRES .block-category-inner DANS .block-category,
   sans aucun enfant pour expliquer ce vide -> c'est une hauteur calculee
   par le browser (probablement min-height auto-calcule par flex layout
   parent ou par une regle de theme-core.css que ma specifite n'a pas
   defait). On force height:auto + min-height:0 pour qu'il s'ajuste au
   contenu reel. */
body#category .block-category,
body#category .block-category.card,
body#category .block-category.card-block,
body.page-category .block-category,
body.page-category .block-category.card,
body.page-category .block-category.card-block {
    padding: 8px 16px 0 !important;
    margin-bottom: 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* v2.5.62 : casse la reservation 220px parasite. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* v2.5.62 : neutralise aussi la hauteur calculee sur .block-category-inner
   (au cas ou elle reserverait l'espace pour la description depliee). */
body#category .block-category-inner,
body.page-category .block-category-inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* v2.5.62 : et sur #category-description (au cas ou theme.js poserait un
   inline style height pour eviter le layout shift au toggle). */
body#category #category-description,
body.page-category #category-description {
    min-height: 0 !important;
}

/* 2. .block-category-inner : padding 0 (le pere a deja le padding). */
body#category .block-category-inner,
body.page-category .block-category-inner {
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Titre H1 catégorie (LOVETOYS, FETISH BDSM, LINGERIE etc) :
   marges agressivement reduites. Bootstrap .h1 / .display-* ont des
   margin-top et margin-bottom de 0.5em-1em par defaut soit 30-50px. */
body#category .block-category h1,
body#category .block-category .h1,
body#category .block-category .h2,
body#category .block-category .display-1,
body#category .block-category .display-2,
body#category .block-category .display-3,
body#category .block-category .display-4,
body.page-category .block-category h1,
body.page-category .block-category .h1,
body.page-category .block-category .h2,
body.page-category .block-category .display-1,
body.page-category .block-category .display-2,
body.page-category .block-category .display-3,
body.page-category .block-category .display-4 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* 4. Dernier enfant interne de .block-category : margin-bottom 0 force.
   C'est probablement le bouton toggle "En savoir plus" CUBX, ou la description
   elle-meme si pas de toggle. */
body#category .block-category > *:last-child,
body#category .block-category-inner > *:last-child,
body.page-category .block-category > *:last-child,
body.page-category .block-category-inner > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ═════════════════════════════════════════════════════════
   FIX 8 — BANDE BLANCHE/GRISE EN HAUT DE LA HOME (RETIRE v2.5.64)
   ───────────────────────────────────────────────────────────
   Le FIX 8 (ajoute en v2.5.62) neutralisait le padding-top + bg gris
   herite de Classic theme.css sur la home (body#index #wrapper) :

     body#index #wrapper, body.page-index #wrapper {
         padding-top: 0 !important;
         background: transparent !important;
     }

   Plus necessaire depuis h2jecosystem v2.15.32 qui neutralise a la
   racine l'asset Classic theme.css via hookActionFrontControllerSetMedia
   + unregisterStylesheet('theme-main'). Voir h2jecosystem.php section
   "CUBX Standalone : neutralisation des assets Classic residuels".

   Si jamais la bande grise reapparait un jour, verifier dans cet ordre :
     1. h2jecosystem est-il toujours installe et hooke sur
        actionFrontControllerSetMedia ?
     2. La position dans ps_hook_module est-elle bien a 255 (max smallint)
        pour que h2jecosystem.unregister passe APRES tous les autres ?
     3. Le path detecte commence-t-il bien par /themes/classic/ ?
        (Activer Configuration::updateValue('H2JECO_DUMP_FO_ASSETS', '1')
         et lire le log H2J pour voir l'etat reel.)
     4. Si tout est OK et bande grise persiste, restaurer le FIX 8 ici.
   ══════════════════════════════════════════════════════════ */