/**
 * SW Product List Attribute
 * Pastilles carrées inspirées du rendu natif PrestaShop de la fiche produit.
 * Rendues dans le flow normal via hook displayProductCustomLabel.
 */

/* Flex + width 100% : force le bloc stock suivant à passer SOUS les pastilles */
.swpla-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 6px 0 6px;
    padding: 2px 2px 2px 2px; /* marge interne pour éviter tout clip à gauche */
    align-items: center;
    line-height: 1;
    box-sizing: border-box;
}

.swpla-dot {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    background-color: var(--swpla-color, #eee);
    background-size: cover;
    background-position: center;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    vertical-align: middle;
    position: relative;
    flex: 0 0 auto;
}

/* Sélection actuelle (défaut ou cliquée) : bordure épaisse sans grossissement
   pour éviter tout débordement hors du conteneur. */
.swpla-dot.is-active {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
}

/* Hover / focus : léger agrandissement, uniquement au survol */
.swpla-dot:hover,
.swpla-dot:focus {
    border-color: #111;
    box-shadow: 0 0 0 1px #111;
    outline: none;
}

/* Trait diagonal noir pour les déclinaisons en rupture : / (bas-gauche → haut-droite) */
.swpla-dot--oos::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1.2px),
        #000 calc(50% - 0.6px),
        #000 calc(50% + 0.6px),
        transparent calc(50% + 1.2px)
    );
}

/* Spacer transparent pour aligner les cartes sans déclinaison (option SWPLA_ALIGN_CARDS) */
.swpla-swatches--empty {
    visibility: hidden;
    pointer-events: none;
}

/* Mobile : masquer les pastilles en rupture si l'option est active */
@media (max-width: 767px) {
    .swpla-hide-oos-mobile .swpla-dot--oos {
        display: none;
    }
}