/**
 * H2JSearch v1.9.2 — Category filter drawer
 *
 * Drawer latéral droit qui s'ouvre au clic sur le bouton FILTRER de
 * la toolbar CUBX (.cubx-cat-toolbar__btn--filter). Affiche les facettes
 * calculées sur les produits de la catégorie courante : marques, prix,
 * stock, features H2J (mono + multi-values).
 *
 * Convention CSS : tous les sélecteurs préfixés .h2js-* pour éviter
 * tout conflit avec CUBX (.cubx-*) ou homeblocks (.hb-*).
 *
 * Variables CSS : l'accent suit le preset CUBX actif via --cubx-accent
 * (et --cubx-accent-2 pour la variante foncee, derivee darken 15 emise par
 * H2JColors::generateCubxCSSVariables). Fallback dore #d4af37 si le preset
 * n'expose pas la variable (theme non-CUBX).
 *
 * v1.9.2 (16/05/2026) : correction couleurs. Le CSS utilisait
 * --cubx-color-primary / --cubx-color-primary-dark -- variables JAMAIS
 * emises par le preset CUBX -> le fallback dore #d4af37 s'appliquait
 * toujours, la sidebar facettes ne suivait pas le preset. De plus une
 * dizaine de #d4af37 etaient hardcodes nus (sections swatches / slider /
 * chips). Tout est desormais var(--cubx-accent, #d4af37).
 * Note : 2 rgba(212,175,55,...) subsistent (glow box-shadow des swatches) --
 * CSS ne permet pas d'injecter une variable dans un rgba() simple ; le glow
 * dore reste acceptable car purement decoratif et tres peu visible.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 */

/* ─────────────────────────────────────────────────────────────────────
   1. OVERLAY (fond noir semi-transparent quand drawer ouvert)
   ───────────────────────────────────────────────────────────────────── */

.h2js-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 9998;
}

.h2js-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ─────────────────────────────────────────────────────────────────────
   2. DRAWER (slide depuis la droite)
   ───────────────────────────────────────────────────────────────────── */

.h2js-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.h2js-drawer.is-open {
    transform: translateX(0);
}

/* Header drawer */
.h2js-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
    flex-shrink: 0;
}

.h2js-drawer__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.h2js-drawer__title-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.h2js-drawer__close {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.h2js-drawer__close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.h2js-drawer__close svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Body drawer (scrollable) */
.h2js-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Footer drawer (sticky bottom) */
.h2js-drawer__footer {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    gap: 8px;
}

.h2js-drawer__footer .h2js-btn {
    flex: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   3. LOADER (premier chargement metadata)
   ───────────────────────────────────────────────────────────────────── */

.h2js-drawer__loader {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 14px;
}

.h2js-drawer__loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--cubx-accent, #d4af37);
    border-radius: 50%;
    animation: h2js-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes h2js-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   4. FACET GROUPS
   ───────────────────────────────────────────────────────────────────── */

.h2js-facet {
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.h2js-facet:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.h2js-facet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    margin-bottom: 8px;
}

.h2js-facet__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111827;
    margin: 0;
}

.h2js-facet__caret {
    transition: transform 0.2s ease;
    color: #9ca3af;
}

.h2js-facet.is-collapsed .h2js-facet__caret {
    transform: rotate(-90deg);
}

.h2js-facet.is-collapsed .h2js-facet__body {
    display: none;
}

.h2js-facet__body {
    padding-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   5. FACET OPTIONS (checkbox lines avec count)
   ───────────────────────────────────────────────────────────────────── */

.h2js-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    transition: color 0.15s ease;
}

.h2js-opt:hover {
    color: #111827;
}

.h2js-opt.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.h2js-opt__checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--cubx-accent, #d4af37);
    cursor: pointer;
}

.h2js-opt__label {
    flex: 1;
    line-height: 1.3;
}

.h2js-opt__count {
    font-size: 12px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.h2js-opt__checkbox:checked + .h2js-opt__label + .h2js-opt__count,
.h2js-opt__checkbox:checked ~ .h2js-opt__count {
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────
   6. PRICE SLIDER (V1.1 simplifié : 2 inputs number)
   ───────────────────────────────────────────────────────────────────── */

.h2js-price-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.h2js-price-range__input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.15s ease;
}

.h2js-price-range__input:focus {
    outline: none;
    border-color: var(--cubx-accent, #d4af37);
}

.h2js-price-range__sep {
    color: #9ca3af;
    font-size: 13px;
}

.h2js-price-range__bounds {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
}

/* V1.7.4 — PRICE DOUBLE-CURSEUR RANGE SLIDER */

/* Conteneur du slider double-curseur. Remplace en V1.7.4 le .h2js-price-range
   (2 inputs number) qui reste defini plus haut pour retro-compat eventuelle
   mais n'est plus genere par le JS. */
.h2js-price-slider {
    padding: 4px 0 8px;
}

/* Ligne d'affichage des valeurs courantes (min — max) au-dessus du track */
.h2js-price-slider__values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #111827;
    margin-bottom: 14px;
}

.h2js-price-slider__values strong {
    font-weight: 700;
    color: var(--cubx-accent, #d4af37);
    min-width: 48px;
    text-align: center;
}

.h2js-price-slider__sep {
    color: #9ca3af;
    font-size: 13px;
}

/* Track gris (rail). Hauteur fine, contient le range fill colore + les 2 thumbs. */
.h2js-price-slider__track {
    position: relative;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 0 8px;
}

/* Range fill : segment colore entre les 2 curseurs, positionne en left/right % */
.h2js-price-slider__range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--cubx-accent, #d4af37);
    border-radius: 2px;
}

/* Inputs range superposes : on retire le styling natif et on positionne en absolute
   pour qu'ils se chevauchent. Pointer events sur les thumbs uniquement. */
.h2js-price-slider__input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

/* Le thumb est cliquable (pointer-events:auto override le parent) */
.h2js-price-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--cubx-accent, #d4af37);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
    pointer-events: auto;
    transition: transform 0.1s ease;
}

.h2js-price-slider__input::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.h2js-price-slider__input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--cubx-accent, #d4af37);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
    pointer-events: auto;
    transition: transform 0.1s ease;
}

.h2js-price-slider__input::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

/* z-index du thumb max plus eleve = quand les 2 curseurs sont au meme endroit
   (cas extreme), c'est le max qui est manipulable en priorite. Inverse cette
   priorite en mode drag-min via une regle :focus si besoin (V1.8). */
.h2js-price-slider__input--max {
    z-index: 2;
}

.h2js-price-slider__input--min {
    z-index: 3;
}

/* Bornes infos sous le slider ("De X a Y") */
.h2js-price-slider__bounds {
    margin-top: 14px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   7. BUTTONS
   ───────────────────────────────────────────────────────────────────── */

.h2js-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.h2js-btn--primary {
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
    border-color: var(--cubx-accent, #d4af37);
}

.h2js-btn--primary:hover {
    background: var(--cubx-accent-2, #b8951f);
    border-color: var(--cubx-accent-2, #b8951f);
}

.h2js-btn--ghost {
    background: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.h2js-btn--ghost:hover {
    background: #f3f4f6;
    color: #111827;
}

/* V1.7.5 — Etat disabled (bouton Apply quand total produits = 0) */
.h2js-btn[disabled],
.h2js-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   8. APPLY COUNTER (en bas, avant les boutons)
   ───────────────────────────────────────────────────────────────────── */

.h2js-drawer__counter {
    padding: 8px 20px;
    text-align: center;
    font-size: 13px;
    color: #374151;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.h2js-drawer__counter strong {
    color: var(--cubx-accent, #d4af37);
    font-size: 15px;
}

.h2js-drawer__counter--zero strong {
    color: #dc2626;
}

/* ─────────────────────────────────────────────────────────────────────
   9. EMPTY STATE (aucun produit ne match les filtres dans la grille)
   ───────────────────────────────────────────────────────────────────── */

.h2js-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.h2js-empty-state__icon {
    width: 64px;
    height: 64px;
    opacity: 0.4;
    margin: 0 auto 16px;
}

.h2js-empty-state__title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.h2js-empty-state__text {
    font-size: 14px;
    margin: 0 0 16px;
}

/* ─────────────────────────────────────────────────────────────────────
   10. ACTIVE FILTERS BADGE (sur le bouton FILTRER de la toolbar)
   ───────────────────────────────────────────────────────────────────── */

.cubx-cat-toolbar__btn--filter[data-h2js-active-count]::after {
    content: attr(data-h2js-active-count);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1;
}

.cubx-cat-toolbar__btn--filter[data-h2js-active-count="0"]::after,
.cubx-cat-toolbar__btn--filter:not([data-h2js-active-count])::after {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   11. RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */

/* V1.7 — PROPERTIES + CONDITION SUB-BLOCK */

/* Sub-block Etat (condition multi-select) dans la facette Properties.
   Visuellement separe des proprietes booleennes (border-top + indent label) */
.h2js-prop-condition {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.h2js-prop-condition__label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}

/* ──────────────────────────────────────────────────────────────────────
   12. WIDGETS V1.8 — chips / dropdown / radio / color_swatch / image_grid
   ───────────────────────────────────────────────────────────────────── */

/* === CHIPS (pastilles cliquables compactes) === */
.h2js-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}
.h2js-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    transition: all 0.12s ease;
    user-select: none;
}
.h2js-chip:hover {
    border-color: var(--cubx-accent, #d4af37);
    background: #fefdf6;
}
.h2js-chip__input {
    /* checkbox cache visuellement, conserve pour event change */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.h2js-chip.is-active,
.h2js-chip:has(input:checked) {
    background: var(--cubx-accent, #d4af37);
    border-color: var(--cubx-accent, #d4af37);
    color: #ffffff;
    font-weight: 600;
}
.h2js-chip__count {
    font-size: 10px;
    opacity: 0.7;
    padding-left: 2px;
}
.h2js-chip.is-active .h2js-chip__count {
    opacity: 0.9;
}

/* === DROPDOWN (V1.10.3 : multi-select moderne)
   Refonte du widget dropdown : au lieu d'un <select multiple> natif HTML
   (encombrant + UX mauvaise), on rend un bouton trigger qui ouvre un popup
   custom avec checkboxes scrollables + actions All/None + champ recherche.
   Le state est sync via inputs cheches (data-h2js-brand/feature/attr) qui
   emettent les memes events 'change' que le widget checkbox classique,
   donc compatible avec les handlers onBrandToggle/onFeatureToggle/etc.
*/
.h2js-dropdown {
    position: relative;
    display: block;
    width: 100%;
}
.h2js-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}
.h2js-dropdown__trigger:hover {
    border-color: var(--cubx-accent, #d4af37);
}
.h2js-dropdown.is-open .h2js-dropdown__trigger {
    border-color: var(--cubx-accent, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.h2js-dropdown__trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h2js-dropdown__trigger-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}
.h2js-dropdown__trigger-caret {
    color: #9ca3af;
    font-size: 10px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.h2js-dropdown.is-open .h2js-dropdown__trigger-caret {
    transform: rotate(180deg);
}

/* Popup (panel deroulant qui s'ouvre sous le trigger) */
.h2js-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: none;
    flex-direction: column;
    max-height: 320px;
}
.h2js-dropdown.is-open .h2js-dropdown__panel {
    display: flex;
}

/* Champ de recherche en haut du popup */
.h2js-dropdown__search {
    flex-shrink: 0;
    padding: 8px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.h2js-dropdown__search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 12px;
    color: #111827;
    background: #ffffff;
    box-sizing: border-box;
}
.h2js-dropdown__search-input:focus {
    outline: none;
    border-color: var(--cubx-accent, #d4af37);
}

/* Barre d'actions All / None */
.h2js-dropdown__actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}
.h2js-dropdown__action {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.h2js-dropdown__action:hover {
    border-color: var(--cubx-accent, #d4af37);
    color: var(--cubx-accent, #d4af37);
}

/* Liste scrollable des options */
.h2js-dropdown__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.h2js-dropdown__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: background 0.1s ease;
}
.h2js-dropdown__opt:hover {
    background: #f9fafb;
}
.h2js-dropdown__opt.is-hidden {
    display: none;
}
.h2js-dropdown__opt-checkbox {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--cubx-accent, #d4af37);
    cursor: pointer;
}
.h2js-dropdown__opt-label {
    flex: 1;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h2js-dropdown__opt-count {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 9px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.h2js-dropdown__opt-checkbox:checked ~ .h2js-dropdown__opt-count,
.h2js-dropdown__opt-checkbox:checked + .h2js-dropdown__opt-label + .h2js-dropdown__opt-count {
    background: var(--cubx-accent, #d4af37);
    color: #ffffff;
}

/* Etat vide (resultat recherche = 0) */
.h2js-dropdown__empty {
    display: none;
    padding: 16px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}
.h2js-dropdown__list.is-all-hidden + .h2js-dropdown__empty {
    display: block;
}

/* === RADIO (single-select) === */
.h2js-opt--radio {
    /* Reuse h2js-opt base styles (label/count/etc) avec specifite radio */
}
.h2js-opt__radio {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--cubx-accent, #d4af37);
    flex-shrink: 0;
}

/* === COLOR SWATCHES (grille pastilles couleur) === */
.h2js-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    padding: 4px 0;
}
.h2js-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    transition: background 0.12s ease;
    user-select: none;
}
.h2js-swatch:hover {
    background: #f9fafb;
}
.h2js-swatch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.h2js-swatch__circle {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--swatch-color, #cccccc);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.h2js-swatch:hover .h2js-swatch__circle {
    box-shadow: 0 0 0 2px var(--cubx-accent, #d4af37);
}
.h2js-swatch.is-active .h2js-swatch__circle,
.h2js-swatch:has(input:checked) .h2js-swatch__circle {
    box-shadow: 0 0 0 3px var(--cubx-accent, #d4af37), 0 0 0 5px rgba(212, 175, 55, 0.25);
    transform: scale(1.05);
}
.h2js-swatch__label {
    font-size: 10px;
    color: #4b5563;
    line-height: 1.2;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === IMAGE GRID (grille de miniatures) === */
.h2js-imggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    padding: 4px 0;
}
.h2js-imggrid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color 0.12s ease, background 0.12s ease;
    user-select: none;
}
.h2js-imggrid__item:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.h2js-imggrid__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.h2js-imggrid__img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    background: #f3f4f6;
    display: block;
}
.h2js-imggrid__label {
    font-size: 10px;
    color: #4b5563;
    line-height: 1.2;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.h2js-imggrid__item.is-active,
.h2js-imggrid__item:has(input:checked) {
    border-color: var(--cubx-accent, #d4af37);
    background: #fefdf6;
}

/* === FEATURE RANGE SLIDER (V1.8 generalisation V1.7.4) ===
   Reutilise les classes .h2js-price-slider* existantes deja stylees.
   La classe additionnelle .h2js-feature-slider permet de differencier
   visuellement si besoin (ex : couleur de track legerement differente).
*/
.h2js-feature-slider .h2js-price-slider__range {
    /* Optionnel : on peut nuancer la couleur pour distinguer feature vs prix.
       En V1.8.0-alpha on garde la meme couleur que prix pour coherence visuelle. */
}

@media (max-width: 480px) {
    .h2js-drawer {
        width: 100%;
        max-width: 100%;
    }
    .h2js-swatches {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }
    .h2js-swatch__circle {
        width: 32px;
        height: 32px;
    }
    .h2js-imggrid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
    .h2js-imggrid__img {
        width: 48px;
        height: 48px;
    }
}