/* ═══════════════════════════════════════════════════════════
   FICHE PRODUIT CUBX — FIXES v2.5.45
   Charge APRES theme-product.css (priority 220 vs 210).

   v2.5.45 \u2014 Nettoyage suite au fix racine ShareGate dans
   h2jecosystem v2.15.27 (h2j-social.css charge en permanence,
   getIconSvg normalise tous les SVG). Le ShareGate est
   desormais entierement gere par le module h2jecosystem ;
   le theme se contente de centrer la card .cubx-pp-card--share.

   Fixes restants :
     1. Card share : centrage du bloc .h2j-sharegate
     2. Declinaisons : Label gauche / Pastilles droite avec
        outline (non-clippe par overflow:hidden) et selection
        par defaut mise en valeur.
     3. Conteneur swatches/btns : overflow visible pour eviter
        la scrollbar horizontale parasite quand le focus ring
        depasse legerement.
     4. Valeur dupliquee a cote du label : masquee.

   AUCUN impact sur la hero gallery, la density catalogue, ou
   les variables CSS du theme. Tout est strictement scope a
   .cubx-pp-card--share et .cubx-pp-card--atc.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FIX 1 \u2014 SHAREGATE : CENTRAGE UNIQUEMENT
   ───────────────────────────────────────────────────────────
   Le module h2jecosystem charge h2j-social.css et fournit le
   markup .h2j-social-icon avec dimensions, fonds, hovers, etc.
   Le theme se contente d'aligner la card et le wrapper.
   ═══════════════════════════════════════════════════════════ */

.cubx-pp-card--share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
}

.cubx-pp-card--share .h2j-sharegate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.cubx-pp-card--share .h2j-share-title {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--h2j-text-light);
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════
   FIX 2 \u2014 DECLINAISONS : LABEL GAUCHE / PASTILLES DROITE
            + SELECTION PAR DEFAUT MISE EN VALEUR
            + PAS DE SCROLLBAR HORIZONTALE
   ───────────────────────────────────────────────────────────
   Markup reel (verifie dans product-atc-block.tpl) :

     <div class="cubx-atc__variant-group">
       <label class="cubx-atc__variant-label">Bonnet
         <span class="cubx-atc__variant-sep">:</span>
         <span class="cubx-atc__variant-value">B</span>
       </label>
       <div class="cubx-atc__variant-btns" role="radiogroup">
         <input type="radio" id="..." name="group[X]" checked
                class="input-radio sr-only">
         <label class="cubx-variant-btn" for="...">B</label>
         ...
       </div>
     </div>

   La selection est piloteee par l'etat natif input:checked.
   Aucun JS, aucune classe runtime, pleinement accessible.

   v2.5.45 : remplacement box-shadow -> outline pour ne plus
   etre clippe par overflow:hidden des cards parent.
   ═══════════════════════════════════════════════════════════ */

/* Le groupe Label + Pastilles : flex horizontal pleine largeur. */
.cubx-pp-card--atc .cubx-atc__variant-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--h2j-border, #e5e7eb);
}

.cubx-pp-card--atc .cubx-atc__variants
  > .cubx-atc__variant-group:first-child {
    padding-top: 0;
}

.cubx-pp-card--atc .cubx-atc__variants
  > .cubx-atc__variant-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Label : a gauche, gras, jamais centre. */
.cubx-pp-card--atc .cubx-atc__variant-label {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 240px;
    text-align: left !important;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--h2j-text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

/* Masquer la valeur a droite du label : la pastille selectionnee
   suffit comme indicateur visuel. */
.cubx-pp-card--atc .cubx-atc__variant-sep,
.cubx-pp-card--atc .cubx-atc__variant-value {
    display: none !important;
}

/* Conteneur des pastilles : prend l'espace restant et POUSSE les
   items A DROITE.

   v2.5.45 : overflow visible pour permettre a l'outline 2px et au
   leger transform:scale des swatches selectionnes de depasser
   sans declencher de scrollbar horizontale parasite. */
.cubx-pp-card--atc .cubx-atc__swatches,
.cubx-pp-card--atc .cubx-atc__variant-btns {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: right;
    margin-left: auto;
    overflow: visible !important; /* v2.5.45 : kill scrollbar horizontale */
}

/* ─── Pastilles texte (.cubx-variant-btn) ───
   v2.5.89 : aligne sur le design rectangulaire compact 32px de hauteur.
   Avant v2.5.89 ce fichier override v2.5.45 imposait un padding 6x14 + radius 6 + font 14
   qui faisait un pill de 38±46px de hauteur, trop gros par rapport à la nouvelle
   référence theme-product.css v2.5.89 (height 32px, font 12, padding 0x14, radius 4). */

.cubx-pp-card--atc .cubx-variant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--h2j-text);
    background: #ffffff;
    border: 1.5px solid var(--h2j-border, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease,
                background-color .15s ease, box-shadow .15s ease;
    user-select: none;
    line-height: 1;
    margin: 1px 0;
}

.cubx-pp-card--atc .cubx-variant-btn:hover {
    border-color: var(--cubx-accent);
    color: var(--cubx-accent);
}

/* SELECTION : input:checked + label.
   v2.5.89 : box-shadow externe au lieu de outline, pour rester homogène
   avec le design overlay du swatch couleur juste en dessous. */
.cubx-pp-card--atc .input-radio:checked + .cubx-variant-btn {
    border-color: var(--cubx-accent);
    color: var(--cubx-accent);
    background: #ffffff;
    font-weight: 700;
    box-shadow: 0 0 0 1px var(--cubx-accent);
}

/* Indisponible. */
.cubx-pp-card--atc .cubx-variant-btn.cubx-variant-btn--off,
.cubx-pp-card--atc .input-radio:disabled + .cubx-variant-btn {
    color: var(--h2j-text-light);
    background: var(--h2j-bg-soft, #f5f5f5);
    border-color: var(--h2j-border);
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: .6;
}

/* ─── Pastilles couleur (.cubx-swatch) ───
   v2.5.89 : MAJ design — abandon des cercles, adoption du rectangulaire pill
   aligné sur les variant-btn pour homogénéité visuelle TAILLE/COULEUR.
   
   Le bug critique des versions précédentes (jusqu'à v2.5.88) : `border: 2px solid #fff`
   + `background-clip: padding-box` faisait que la couleur de fond inline
   (style="background-color:#XYZ") était clippée dans le padding-box, derrière la
   bordure blanche — résultat : un pseudo-cercle blanc avec un mince anneau de couleur,
   visuellement indistinguable du gris/blanc neutre sur les couleurs claires (Naturel, etc.).
   
   Fix v2.5.89 : pill rectangulaire 44x32 sans border interne, la couleur remplit
   tout le pill. Ring rose au :checked via box-shadow externe (jamais clippé). */
.cubx-pp-card--atc .cubx-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: 1.5px solid var(--h2j-border, #e5e7eb);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-clip: border-box;
    margin: 1px 0;
    box-shadow: none;
}

.cubx-pp-card--atc .cubx-swatch:hover {
    border-color: var(--cubx-accent);
}

/* SELECTION : box-shadow externe rose (même design que variant-btn). */
.cubx-pp-card--atc .input-color:checked + .cubx-swatch {
    border-color: var(--cubx-accent);
    box-shadow: 0 0 0 1px var(--cubx-accent);
    transform: none;
    outline: none;
}

.cubx-pp-card--atc .input-color:disabled + .cubx-swatch {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

/* Mobile : stack vertical (label au-dessus, pastilles en dessous). */
@media (max-width: 600px) {
    .cubx-pp-card--atc .cubx-atc__variant-group {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0;
    }

    .cubx-pp-card--atc .cubx-atc__variant-label {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .cubx-pp-card--atc .cubx-atc__swatches,
    .cubx-pp-card--atc .cubx-atc__variant-btns {
        width: 100%;
        justify-content: flex-start !important;
        text-align: left;
        margin-left: 0;
    }
}


/* ═══════════════════════════════════════════════════════════
   FIX v2.5.121 — IDENTITE TITRE/MARQUE EN MOBILE (titre full-width)
   ──────────────────────────────────────────────────────────

   Diagnostic MCP (viewport 360px iframe émulateur Galaxy S10+) :
   .cubx-pp__identity-grid--with-logo en grid "1fr 150px" → sur 257px de
   contenu utile (après padding card 20px de chaque côté), 1fr = 91px
   pour le titre, 150px pour le brand logo. Le titre est étouffé à 91px
   et fait du wrapping sur 4-5 lignes minuscules — le brand logo (h=80)
   déborde en hauteur par-dessus le texte du titre.

   Problème vécu par l'utilisateur (capture David Strap-On-Me M Noir) :
   le titre "MULTI ORGASM BENDABLE STRAP-ON - M - NOIR -" passe SOUS le
   bloc image marque "strap-on-me®" qui est à sa droite — illisibilité.

   Fix v2.5.121 (raffinement de v2.5.120 suite retour David) :
   Note technique : le titre est dans .cubx-pp__identity-left, qui est
   l'item grid de la colonne 1. Donc grid-column override sur .cubx-pp__title
   ne fonctionne pas (le titre n'est pas grid item direct). Solution propre :
   passer la grid en single column — identity-left prend toute la largeur
   (titre + reviews + ref + brand-name + excerpt), et identity-right (brand)
   passe en dessous, ALIGNÉ À DROITE comme en desktop pour conserver le
   pattern visuel "marque à droite".
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Grid 2 cols compact : 1fr (titre + texte) + 60px (logo carré 1:1).
       Gap 10px horizontal, 6px vertical. Layout cohérent avec desktop
       mais réduit pour mobile, pas de vide visuel. */
    .cubx-pp__identity-grid--with-logo {
        grid-template-columns: 1fr 60px !important;
        gap: 6px 10px !important;
        align-items: start !important;
    }

    /* Titre en 2 lignes max avec ellipsis. font-size adaptive 14-18px
       pour tenir même avec titres très longs (ex. "MULTI ORGASM BENDABLE
       STRAP-ON - M - NOIR -"). */
    .cubx-pp__title {
        width: 100%;
        font-size: clamp(14px, 4.2vw, 18px) !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word;
    }

    /* Brand link à droite, aligné en haut, dans la colonne 60px. */
    .cubx-pp__identity-right {
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
    }

    /* Logo marque : carré 1:1 (ratio CUBX 150×150 conservé), réduit à 60×60. */
    .cubx-pp__brand-img {
        max-width: 60px !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Compactage des autres infos identité (ref + brand-name + reviews)
       pour qu'ils tiennent dans la colonne 1fr. */
    .cubx-pp__ratings {
        font-size: 12px !important;
        gap: 6px !important;
    }

    .cubx-pp__ref-brand {
        font-size: 11px !important;
        gap: 8px !important;
    }

    .cubx-pp__brand-name {
        font-size: 10px !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   FIX v2.5.120 — ATC ROW MOBILE (qty compact + ATC label fit)
   ──────────────────────────────────────────────────────────

   Diagnostic MCP (viewport 360px iframe émulateur Galaxy S10+) :
   .cubx-atc__row width = 215px (après padding card 257-2*20)
     ├─ .cubx-qty (qty stepper) = 125px (38+46+38+borders)
     │    └─ reste 215 - 125 - 10 (gap) = 80px pour le span#add-to-cart
     └─ #add-to-cart-button.cubx-atc__btn = 81px → "Add to cart" (10 chars
           + icon 19 + gap 8 = ~120px requis) ne tient pas en 1 ligne →
           wrap sur 3 lignes ("Add" / "to" / "cart")

   Problème vécu par l'utilisateur (capture David Smart Teaser + Strap-On-Me) :
   le bouton ATC apparait cassé sur 3 lignes, le qty stepper prend 60% de
   la largeur, le call-to-action principal n'est plus prioritaire visuellement.

   Fix : sur mobile (≤600px), compacter le qty stepper (boutons +/- 32px,
   input 38px, total ≈96px au lieu de 125), et forcer white-space:nowrap
   sur le label ATC pour qu'il tienne en 1 ligne. Plus l'icone passe à 16px
   (au lieu de 19) et le gap interne ATC à 6px (au lieu de 8).

   Résultat attendu : qty ≈96px, gap 10, ATC ≈99px → fit "Add to cart"
   en 1 ligne avec icone visible.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Qty stepper compact : 32px boutons + 38px input + 32px = 102px (au lieu de 125). */
    .cubx-pp-card--atc .cubx-qty__btn {
        width: 32px !important;
    }

    .cubx-pp-card--atc .cubx-qty__input {
        width: 38px !important;
        font-size: 14px !important;
    }

    /* ATC : label en 1 ligne, icon plus compact, padding réduit. */
    .cubx-pp-card--atc .cubx-atc__btn {
        white-space: nowrap !important;
        gap: 6px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        letter-spacing: 0 !important;
    }

    .cubx-pp-card--atc .cubx-atc__icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* Le row reste row même en mobile (deja le cas, mais on sécurise contre
       d'éventuels overrides futurs). Gap réduit à 8 pour gagner 2px. */
    .cubx-pp-card--atc .cubx-atc__row {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch;
    }
}


/* Très petit mobile (< 360px, ex. iPhone SE 1st gen) : repli icon-only sur ATC.
   En dessous de 360px, même avec qty compact et label nowrap, le bouton risque
   d'être tronqué. On bascule sur icon + label "Ajouter" plus court. */
@media (max-width: 359px) {
    .cubx-pp-card--atc .cubx-atc__btn {
        font-size: 12px !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .cubx-pp-card--atc .cubx-qty__btn {
        width: 28px !important;
    }

    .cubx-pp-card--atc .cubx-qty__input {
        width: 34px !important;
    }
}