/**
 * 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;
}