/**
 * variant-miniature.css
 * GDC - Déclinaisons par miniatures v1.0.7
 */

/* ------------------------------------------------------------------ */
/* Miniatures couleur : background-image sans répétition               */
/* ------------------------------------------------------------------ */

/* Spécificité renforcée pour écraser le thème Warehouse */
body .product-variants .input-container span.color.texture {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    cursor: pointer;
}

/* Correction du sr-only enfant qui perturbait le rendu du background */
body .product-variants .input-container span.color.texture span.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Vignette sélectionnée : bordure fine violette                       */
/* ------------------------------------------------------------------ */

body .product-variants .input-color:checked + span,
body .product-variants .input-color:hover + span,
body .product-variants .input-radio:checked + span,
body .product-variants .input-radio:hover + span {
    border: 1px solid #7A70B1 !important;
}

/* Spécificité renforcée pour les cases pointures (radio-label) */
body .product-variants .input-container .input-radio:checked + span.radio-label,
body .product-variants .input-container .input-radio:hover + span.radio-label {
    border: 1px solid #7A70B1 !important;
    box-shadow: 0 0 0 1px #7A70B1 !important;
    color: #7A70B1 !important;
    font-weight: bold !important;
}

/* Vignette couleur indisponible : opacité réduite + barre diagonale */
body .product-variants .input-container.attribute-not-in-stock span.color {
    opacity: 0.4;
    position: relative !important;
    overflow: hidden !important;
}

body .product-variants .input-container.attribute-not-in-stock span.color::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 0.5px),
        rgba(100,100,100,0.6) calc(50% - 0.5px),
        rgba(100,100,100,0.6) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ------------------------------------------------------------------ */
/* Labels "Pointure(s) disponible(s)" et "Couleur(s) disponible(s)"   */
/* ------------------------------------------------------------------ */

body .product-variants .available-variants-label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
    color: #333 !important;
}

/* ------------------------------------------------------------------ */
/* Cases pointures : taille UX mobile                                  */
/* ------------------------------------------------------------------ */

/* Spécificité renforcée pour écraser border: 2px solid #414141 du thème */
body .product-variants .input-container span.radio-label {
    display: inline-block !important;
    position: relative !important;
    min-width: 44px !important;
    padding: 10px 14px !important;
    margin: 3px !important;
    border: 1px solid #dedede !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #333 !important;
    text-align: center !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    transition: background .2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
}

/* Supprime marges parasites du li */
body .product-variants li.input-container.float-left {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ------------------------------------------------------------------ */
/* Cases pointures INDISPONIBLES : barrées en diagonale                */
/* ------------------------------------------------------------------ */

body .product-variants .input-container.attribute-not-in-stock span.radio-label {
    color: #bbb !important;
    border-color: #e8e8e8 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

body .product-variants .input-container.attribute-not-in-stock span.radio-label::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 0.5px),
        #bbb calc(50% - 0.5px),
        #bbb calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    ) !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}


/* ==================================================================== */
/*  VIGNETTES COULEUR — PAGES CATALOGUE (v2)                            */
/* ==================================================================== */

/* Conteneur des vignettes sous la miniature produit */
.gdc-catalog-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 0 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: center !important;
}

/* Vue grille : centré sous l'image */
.gdc-catalog-variants-grid {
    justify-content: center !important;
}

/* Vue liste : aligné à gauche */
.gdc-catalog-variants-list {
    justify-content: flex-start !important;
}

/* Chaque vignette : carré avec l'image en background */
body .gdc-cv-thumb {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border: 2px solid transparent !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: border-color .15s ease, transform .15s ease !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Vignette sélectionnée par défaut (déclinaison par défaut du produit) */
body .gdc-cv-thumb--selected {
    border-color: #7A70B1 !important;
}

/* Vignette au survol / focus */
body .gdc-cv-thumb:hover,
body .gdc-cv-thumb:focus,
body .gdc-cv-thumb--hovered {
    border-color: #7A70B1 !important;
    transform: scale(1.12) !important;
    outline: none !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Cache le texte sr-only sans perturber le layout */
body .gdc-cv-thumb .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Transition douce sur l'image de la miniature lors du hover vignette */
body .product-miniature .gdc-product-thumb-img,
body .product-miniature .product-thumbnail img,
body .product-miniature .thumbnail-container img {
    transition: opacity .2s ease !important;
}

/* Mobile : vignettes légèrement plus grandes pour le touch */
@media (max-width: 575px) {
    body .gdc-cv-thumb {
        width: 40px !important;
        height: 40px !important;
    }
}