/**
 * H2J Reviews -- Front CSS (storereviews page, premium CUBX v1.0.4)
 *
 * Scope : .h2jr-storereviews .* (all classes prefixed h2jr- to avoid collisions)
 * Tokens consumed : --cubx-accent, --cubx-radius, --h2j-* (via CUBX theme)
 *
 * Layout adaptatif :
 *   - Mobile (<768px)  : 1 col, hero full-width au-dessus (via theme-core.css s17b/24)
 *   - PC hero ON open  : 2 col avis (panel hero a gauche, 38% viewport)
 *   - PC hero ON closed: 3 col avis (toggle hero replied via cubx-hero-collapsed)
 *   - PC hero OFF      : 3 col avis (admin a desactive le hero pour ce contexte)
 *
 * Le hero full-width mobile + container neutralization sont deja geres par
 * theme-core.css sections 17b/24 via body.page-module-h2jreviews-storereviews
 * + body#module-h2jreviews-storereviews (cf. v2.5.212 pattern PS Classic 8.x).
 * Si jamais ces selectors n'etaient pas appliques (theme antérieur), un fallback
 * defensif est inclus en fin de fichier.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 * @since     v1.0.2
 * @version   v1.0.4 (hero pattern + grid adaptive + container card + bottom home + provider logo)
 */

/* =================================================================== *
 * SCOPE + LOCAL TOKENS                                                *
 * =================================================================== */
.h2jr-storereviews {
    --h2jr-bg-page:        var(--h2j-bg, #ffffff);
    --h2jr-bg-card:        var(--h2j-bg-card, #ffffff);
    --h2jr-bg-soft:        #fbf8f3;
    --h2jr-accent:         var(--cubx-accent, #c9a55b);
    --h2jr-accent-soft:    rgba(201, 165, 91, 0.12);
    --h2jr-text:           var(--h2j-text, #1a1a1a);
    --h2jr-text-soft:      var(--h2j-text-light, #6b6b6b);
    --h2jr-text-muted:     #9b9b9b;
    --h2jr-border:         var(--h2j-border, rgba(0, 0, 0, 0.08));
    --h2jr-border-strong:  rgba(0, 0, 0, 0.16);
    --h2jr-star-full:      #f5a623;
    --h2jr-star-empty:     #e0e0e0;
    /* v1.0.29 -- Variables CSS Star Design (couleur etoile + couleur fond).
       Pilotees par <style> inline injecte via hookActionFrontControllerSetMedia,
       avec fallback aux defauts si BO non configure. Memes vars que
       h2jreviews-product.css pour coherence visuelle totale. */
    --h2jrp-star-color:    #f5a623;
    --h2jrp-star-bg-color: #fff8e7;
    --h2jrp-star-empty:    #d0d0d0;
    --h2jrp-star-bg-empty: #f0f0f0;
    --h2jr-radius:         var(--cubx-radius, 12px);
    --h2jr-radius-sm:      8px;
    --h2jr-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06);
    --h2jr-shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);

    color: var(--h2jr-text);
}

/* =================================================================== *
 * CONTAINER INTERNE -- card blanche style fiche produit              *
 * Reproduit le pattern PDP : .cubx-hero-content neutralise .container *
 * du wrapper Bootstrap (theme-core.css s24), donc on remet ici un      *
 * container interne avec max-width + paddings + card visuelle.        *
 * =================================================================== */
.h2jr-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 32px;
    background: var(--h2jr-bg-card);
    border-radius: var(--h2jr-radius);
    box-shadow: var(--h2jr-shadow-sm);
}

/* When hero is active, give the card a little more breathing room on the right
   to balance the hero panel on the left visually. */
body.cubx-hero-active:not(.cubx-hero-collapsed) .h2jr-storereviews .h2jr-container {
    margin-right: 16px;
    margin-left: 16px;
}

@media (max-width: 768px) {
    .h2jr-container {
        padding: 16px 14px 24px;
        margin: 12px 12px 0;
        border-radius: var(--h2jr-radius-sm);
    }
    body.cubx-hero-active:not(.cubx-hero-collapsed) .h2jr-storereviews .h2jr-container {
        margin: 12px 12px 0;
    }
}

/* =================================================================== *
 * PAGE TITLE (h1)                                                     *
 * Style sobre : centre, uppercase, accent souligne (pas le pattern    *
 * "promo" pesant, juste un titre propre).                              *
 * =================================================================== */
.h2jr-page-title {
    margin: 0 0 24px;
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--h2jr-border);
}

.h2jr-page-title__h1 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--h2jr-text);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* =================================================================== *
 * HERO CARD -- Note moyenne + Distribution                           *
 * =================================================================== */

/* Branding row (shop logo + provider logo cote a cote, image 2 reference) */
.h2jr-hero__branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.h2jr-hero__brand {
    display: inline-flex;
    align-items: center;
    height: 56px;
}

.h2jr-hero__brand img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
}

.h2jr-hero__brand--provider img {
    max-height: 64px; /* Provider logo can be slightly larger (badge style) */
}

@media (max-width: 480px) {
    .h2jr-hero__branding {
        gap: 16px;
    }
    .h2jr-hero__brand,
    .h2jr-hero__brand img {
        max-height: 44px;
    }
    .h2jr-hero__brand--provider img {
        max-height: 50px;
    }
}

/* Hero card outer */
.h2jr-hero {
    background: linear-gradient(135deg, var(--h2jr-bg-soft) 0%, #ffffff 100%);
    border: 1px solid var(--h2jr-border);
    border-radius: var(--h2jr-radius);
    padding: 28px 28px 32px;
    margin-bottom: 28px;
    box-shadow: var(--h2jr-shadow-md);
}

.h2jr-hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}

@media (max-width: 768px) {
    .h2jr-hero {
        padding: 20px 16px 24px;
    }
    .h2jr-hero__container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Bloc note moyenne (gauche) */
.h2jr-hero__rating {
    text-align: center;
}

.h2jr-hero__shopname {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--h2jr-text);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.h2jr-hero__score {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.h2jr-hero__avg {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    color: var(--h2jr-accent);
    line-height: 1;
    letter-spacing: -0.03em;
}

.h2jr-hero__avg-max {
    font-size: 1.25rem;
    color: var(--h2jr-text-soft);
    font-weight: 500;
}

.h2jr-hero__stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 10px 0;
}

.h2jr-hero__count {
    font-size: 0.92rem;
    color: var(--h2jr-text-soft);
}

.h2jr-hero__count strong {
    color: var(--h2jr-text);
    font-weight: 600;
}

.h2jr-hero__empty {
    padding: 20px;
    color: var(--h2jr-text-muted);
    font-style: italic;
}

/* Stars shared -- legacy Material Icons rules (kept for compat with any
   remaining <i.material-icons.h2jr-star> if a third-party module injects them) */
.h2jr-star {
    font-size: 26px !important;
    line-height: 1;
}
.h2jr-star--full,
.h2jr-star--half { color: var(--h2jr-star-full); }
.h2jr-star--empty { color: var(--h2jr-star-empty); }

/* =================================================================== *
 * v1.0.29 -- ETOILES SVG STAR DESIGN                                  *
 * Consomme les memes variables que h2jreviews-product.css :           *
 *   --h2jrp-star-color    : couleur etoile pleine                     *
 *   --h2jrp-star-bg-color : couleur fond pleine (si shape != none)    *
 *   --h2jrp-star-empty    : couleur etoile vide                       *
 *   --h2jrp-star-bg-empty : couleur fond vide                         *
 * =================================================================== */
.h2jr-storereviews svg.h2jrp-star {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}

/* Etat FULL : fond + etoile colores */
.h2jr-storereviews svg.h2jrp-star--full .h2jrp-bg { fill: var(--h2jrp-star-bg-color); }
.h2jr-storereviews svg.h2jrp-star--full .h2jrp-fg { fill: var(--h2jrp-star-color); }

/* Etat EMPTY : fond grise + etoile grisee (preserve la presence visuelle) */
.h2jr-storereviews svg.h2jrp-star--empty .h2jrp-bg { fill: var(--h2jrp-star-bg-empty); }
.h2jr-storereviews svg.h2jrp-star--empty .h2jrp-fg { fill: var(--h2jrp-star-empty); }

/* Etat HALF : fond plein + 2 paths superposés (empty + full clipe a gauche) */
.h2jr-storereviews svg.h2jrp-star--half .h2jrp-bg { fill: var(--h2jrp-star-bg-color); }
.h2jr-storereviews svg.h2jrp-star--half .h2jrp-fg--empty { fill: var(--h2jrp-star-empty); }
.h2jr-storereviews svg.h2jrp-star--half .h2jrp-fg--full { fill: var(--h2jrp-star-color); }

/* Tailles par contexte : hero (grosse), distribution (mini), review (moyenne) */
.h2jr-hero__stars { font-size: 26px; line-height: 1; gap: 4px; }
.h2jr-review__stars { font-size: 18px; line-height: 1; gap: 2px; }
.h2jr-dist-star { font-size: 18px; }
.h2jr-counter-star { font-size: 16px; vertical-align: middle; }

/* Bloc distribution (droite) */
.h2jr-hero__distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2jr-dist-row {
    display: grid;
    grid-template-columns: 60px 1fr 48px;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: var(--h2jr-radius-sm);
    transition: background 0.15s ease;
    color: inherit;
}

.h2jr-dist-row:hover {
    background: var(--h2jr-accent-soft);
    text-decoration: none;
}

.h2jr-dist-row--active {
    background: var(--h2jr-accent-soft);
}

.h2jr-dist-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--h2jr-text);
    font-size: 0.92rem;
}

.h2jr-dist-star {
    font-size: 18px;
    /* Force fill direct (override eventuel d'une regle plus globale) */
}

.h2jr-dist-bar {
    display: block;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.h2jr-dist-bar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--h2jr-accent) 0%, #d9b56b 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.h2jr-dist-count {
    text-align: right;
    color: var(--h2jr-text-soft);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

/* =================================================================== *
 * FILTERS -- Pills                                                    *
 * =================================================================== */
.h2jr-filters {
    margin-bottom: 22px;
}

.h2jr-filters__container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.h2jr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--h2jr-border-strong);
    background: #fff;
    color: var(--h2jr-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

.h2jr-pill:hover {
    border-color: var(--h2jr-accent);
    color: var(--h2jr-accent);
    text-decoration: none;
}

.h2jr-pill--active {
    background: var(--h2jr-accent);
    border-color: var(--h2jr-accent);
    color: #fff;
}

.h2jr-pill--active:hover {
    background: var(--h2jr-accent);
    color: #fff;
    opacity: 0.92;
}

.h2jr-pill--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.h2jr-pill__label {
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--h2jr-star-full);
}

.h2jr-pill--active .h2jr-pill__label {
    color: #fff;
}

.h2jr-pill:first-child .h2jr-pill__label {
    color: inherit;
    letter-spacing: 0;
}

.h2jr-pill__count {
    color: var(--h2jr-text-soft);
    font-variant-numeric: tabular-nums;
}

.h2jr-pill--active .h2jr-pill__count {
    color: rgba(255, 255, 255, 0.85);
}

/* =================================================================== *
 * REVIEWS LIST -- Adaptive grid                                      *
 * =================================================================== */

.h2jr-list__counter {
    margin-bottom: 14px;
    color: var(--h2jr-text-soft);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.h2jr-counter-star {
    font-size: 16px;
    vertical-align: middle;
}

/* Grid : adaptive selon viewport + hero state                          *
 *                                                                       *
 * Strategie (decisions David sur captures 4K) :                          *
 *   - Mobile (<768px)            : 1 col                                 *
 *   - Tablet (768-1100px)        : 2 col                                 *
 *   - Desktop hero OFF (>=1100)  : 3 col                                 *
 *   - Desktop hero ON :                                                  *
 *     - 1100-1600px (demi 4K)    : 1 col (panneau 38% mange trop)        *
 *     - 1600-2200px              : 2 col                                  *
 *     - 2200px+ (full 4K)        : 3 col                                  *
 *                                                                       *
 * Le toggle hero ferme (cubx-hero-collapsed) retombe sur les regles      *
 * hero OFF, ce qui est cohérent (le panneau retire libere la place).   */
.h2jr-list__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Tablet : 2 col */
@media (min-width: 768px) {
    .h2jr-list__grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}

/* Desktop sans hero (ou hero replie) : 3 col */
@media (min-width: 1100px) {
    .h2jr-list__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Desktop AVEC hero actif et ouvert :
   le panel hero prend 38% (var --cubx-hero-w), reste 62% pour le content.
   Sur viewports moyens (1100-1600), le content fait 62% × 1500 = ~930px,
   donc 1 col plein-format pour la lisibilite. */
@media (min-width: 1100px) {
    body.cubx-hero-active:not(.cubx-hero-collapsed) .h2jr-storereviews .h2jr-list__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Hero actif + viewport 1600px+ : 2 col
   Content 62% × 1700 = ~1050px ; 2 col laisse ~510px chacune avec gap. */
@media (min-width: 1600px) {
    body.cubx-hero-active:not(.cubx-hero-collapsed) .h2jr-storereviews .h2jr-list__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hero actif + viewport 2200px+ (full screen 4K et plus) : 3 col
   Content 62% × 2400 = ~1490px ; 3 col laisse ~480px chacune. */
@media (min-width: 2200px) {
    body.cubx-hero-active:not(.cubx-hero-collapsed) .h2jr-storereviews .h2jr-list__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Review card */
.h2jr-review {
    background: var(--h2jr-bg-card);
    border: 1px solid var(--h2jr-border);
    border-radius: var(--h2jr-radius);
    padding: 20px;
    box-shadow: var(--h2jr-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.h2jr-review:hover {
    box-shadow: var(--h2jr-shadow-md);
    transform: translateY(-1px);
}

.h2jr-review__header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
}

.h2jr-review__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--h2jr-accent) 0%, #d9b56b 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.h2jr-review__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.h2jr-review__nick {
    font-weight: 600;
    color: var(--h2jr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

.h2jr-review__date {
    color: var(--h2jr-text-muted);
    font-size: 0.82rem;
}

.h2jr-review__stars {
    display: flex;
    gap: 2px;
    font-size: 18px;
    line-height: 1;
}

.h2jr-review__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 4px 0 0;
    color: var(--h2jr-text);
}

.h2jr-review__body {
    color: var(--h2jr-text);
    line-height: 1.55;
    font-size: 0.92rem;
}

.h2jr-review__body p {
    margin: 0 0 8px;
}
.h2jr-review__body p:last-child {
    margin-bottom: 0;
}

/* Experience note (italic, soft, below the comment) */
.h2jr-review__experience {
    margin-top: 2px;
    color: var(--h2jr-text-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.h2jr-review__experience em {
    font-style: italic;
}

/* v1.0.32 -- Label "Acheteur vérifié suite expérience du JJ/MM/AAAA".
   Doctrine anonymisation H2J : tous les avis customer affichent ce label
   unifie en bas de la card (avant la réponse marchand le cas échéant).
   Style sobre : icone verified amber + texte gris fonce + bordure haut. */
.h2jr-review__verified-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--h2jr-border);
    color: var(--h2jr-text-soft);
    font-size: 0.82rem;
    font-weight: 500;
}
.h2jr-review__verified-label .material-icons {
    font-size: 16px;
    color: var(--h2jr-accent);
}

/* Merchant answer block */
.h2jr-review__answer {
    margin-top: 6px;
    padding: 14px;
    background: var(--h2jr-bg-soft);
    border-left: 3px solid var(--h2jr-accent);
    border-radius: var(--h2jr-radius-sm);
}

.h2jr-review__answer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.h2jr-answer-icon {
    font-size: 18px !important;
    color: var(--h2jr-accent);
}

.h2jr-answer-label {
    font-weight: 600;
    color: var(--h2jr-text);
    font-size: 0.88rem;
}

.h2jr-answer-date {
    color: var(--h2jr-text-muted);
    font-size: 0.82rem;
    margin-left: auto;
}

.h2jr-review__answer-body {
    color: var(--h2jr-text);
    line-height: 1.55;
    font-size: 0.9rem;
}

/* =================================================================== *
 * EMPTY STATE                                                         *
 * =================================================================== */
.h2jr-list__empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--h2jr-text-soft);
}

.h2jr-empty-icon {
    font-size: 60px !important;
    color: var(--h2jr-text-muted);
    margin-bottom: 12px;
}

.h2jr-empty-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--h2jr-accent);
    text-decoration: underline;
    font-weight: 500;
}

.h2jr-empty-link:hover {
    color: var(--h2jr-accent);
    opacity: 0.8;
}

/* =================================================================== *
 * PAGINATION CUBX -- markup standard (cf theme-core.css section 15)    *
 * Le template inclut _partials/pagination.tpl qui emet le markup       *
 * Bootstrap-compatible (.pagination-nav, .page-item, .page-link).      *
 * Ces regles sont DEJA stylees par theme-core.css : on n'a rien a     *
 * ajouter. Sauf un override de marges pour rentrer dans notre card.   *
 * =================================================================== */
.h2jr-storereviews .pagination-nav {
    margin: 24px 0 8px;
}

/* =================================================================== *
 * BOUTON HOME BOTTOM -- pattern theme-cms.css section 5                *
 * Dans la card .h2jr-container, separateur border-top + margin/padding *
 * cale sur le pattern CMS CUBX exact (cf cubx-theme/templates/cms/     *
 * page.tpl + theme-cms.css section 5).                                  *
 * =================================================================== */
.h2jr-home-btn-wrap {
    margin: 48px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--h2jr-border);
    text-align: center;
}

.h2jr-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--h2jr-accent);
    color: #fff;
    border: 2px solid var(--h2jr-accent);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.h2jr-home-btn:hover,
.h2jr-home-btn:focus {
    background: #fff;
    color: var(--h2jr-accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201, 165, 91, 0.20);
}

.h2jr-home-btn:active {
    transform: translateY(0);
}

.h2jr-home-btn .material-icons {
    font-size: 20px !important;
}

@media (max-width: 767px) {
    .h2jr-home-btn-wrap {
        margin: 32px 0 0;
        padding: 20px 0 0;
    }
    .h2jr-home-btn {
        padding: 10px 24px;
        font-size: 14px;
    }
}

/* =================================================================== *
 * MOBILE TWEAKS                                                       *
 * =================================================================== */
@media (max-width: 600px) {
    .h2jr-review {
        padding: 16px;
    }
    .h2jr-review__header {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        row-gap: 6px;
    }
    .h2jr-review__avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .h2jr-review__stars {
        grid-column: 1 / -1;
    }
}

/* =================================================================== *
 * DEFENSIVE FALLBACK -- Hero full-width mobile + container neutralize  *
 *                                                                       *
 * Si theme-core.css sections 17b/24 n'ont pas (encore) ajouté nos      *
 * body classes (body.page-module-h2jreviews-storereviews,              *
 * body#module-h2jreviews-storereviews) a leur whitelist, on reproduit  *
 * ici les regles minimales pour eviter les marges blanches mobile +    *
 * gap entre hero et content desktop.                                    *
 *                                                                       *
 * Quand theme-core.css sera mis a jour (v2.5.296+ pattern v2.5.212),    *
 * ces regles deviendront redondantes mais resteront inoffensives.      *
 * =================================================================== */
body#module-h2jreviews-storereviews:has(.cubx-hero-active) #wrapper > .container,
body.page-module-h2jreviews-storereviews:has(.cubx-hero-active) #wrapper > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
body#module-h2jreviews-storereviews:has(.cubx-hero-active) #wrapper > .container > .row,
body.page-module-h2jreviews-storereviews:has(.cubx-hero-active) #wrapper > .container > .row {
    margin-left: 0;
    margin-right: 0;
}
body#module-h2jreviews-storereviews:has(.cubx-hero-active) #content-wrapper,
body.page-module-h2jreviews-storereviews:has(.cubx-hero-active) #content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================ */
/* v1.0.85 Sprint Traductions Phase 1 -- Badge + toggle avis    */
/* Pattern identique au FO produit (h2jreviews-product.css).    */
/* Conformite EU 2019/2161 : original immutable accessible.     */
/* ============================================================ */

.h2jr-review__trad-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 10px 0 12px;
    background: rgba(201, 184, 138, 0.08);
    border-left: 3px solid #c9b88a;
    border-radius: 4px;
    font-size: 13px;
    color: #6b6354;
    font-style: italic;
    line-height: 1.4;
}
.h2jr-review__trad-badge-icon {
    font-size: 14px;
    font-style: normal;
    line-height: 1;
}
.h2jr-review__trad-badge-text {
    flex: 1;
    min-width: 0;
}
.h2jr-review__trad-toggle {
    background: transparent;
    border: none;
    color: #8b572a;
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 3px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: background 0.15s ease;
}
.h2jr-review__trad-toggle:hover {
    background: rgba(139, 87, 42, 0.1);
    text-decoration: none;
}
.h2jr-review__trad-toggle:focus {
    outline: 2px solid #c9b88a;
    outline-offset: 1px;
}

/* Etat par defaut .is-translated : trans visibles, orig cachees. */
.h2jr-review.is-translated .h2jr-review__title--orig,
.h2jr-review.is-translated .h2jr-review__body--orig,
.h2jr-review.is-translated .h2jr-review__answer--orig,
.h2jr-review.is-translated .h2jr-review__trad-badge-text--when-original,
.h2jr-review.is-translated .h2jr-review__trad-toggle-text--when-original {
    display: none;
}

/* Etat .is-original : orig visibles, trans cachees. */
.h2jr-review.is-original .h2jr-review__title--trans,
.h2jr-review.is-original .h2jr-review__body--trans,
.h2jr-review.is-original .h2jr-review__answer--trans,
.h2jr-review.is-original .h2jr-review__trad-badge-text--when-translated,
.h2jr-review.is-original .h2jr-review__trad-toggle-text--when-translated {
    display: none;
}

.h2jr-review.is-original .h2jr-review__title--orig,
.h2jr-review.is-original .h2jr-review__body--orig {
    font-style: italic;
    opacity: 0.92;
}
.h2jr-review.is-original .h2jr-review__trad-badge {
    background: rgba(139, 87, 42, 0.08);
    border-left-color: #8b572a;
}