/* Spliff — Product Variations V2 (tiles grid) */

.spliff-pvar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.spliff-pvar *,
.spliff-pvar *::before,
.spliff-pvar *::after {
    box-sizing: border-box;
}

/* ─── Tile ─── */

.spliff-pvar__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    background: #FFFFFF;
    border: 1.5px solid #E8E8EC;
    border-radius: 12px;
    padding: 14px 12px;
    min-height: 65px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    text-align: center;
    font-family: inherit;
    color: inherit;
    width: 100%;
    overflow: hidden;
}

.spliff-pvar__tile:focus-visible {
    outline: 2px solid #7C7CFF;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   OVERRIDE button:hover Astra
   Le thème Astra applique sur tous les <button:hover> :
     background-color: var(--ast-global-color-1);  // noir
     color: #FFFFFF;
     border-color: var(--ast-global-color-1);
   On neutralise pour tous les états des tiles + on garde la cohérence
   avec is-selected / spc-over qui doivent rester noirs.
   ═══════════════════════════════════════════════════════════════════ */

/* Tile NON sélectionnée au hover/focus/active : reste blanche (override Astra).
   Le :not(.is-selected):not(.spc-over) est CRUCIAL — sinon ces règles s'appliquent
   aussi quand la tile est sélectionnée et le focus persiste après le clic, ce qui
   force le fond blanc + label noir sur fond noir → label invisible. */
.spliff-pvar__tile:not(.is-selected):not(.spc-over):hover,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):focus,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):active {
    background-color: #FFFFFF !important;
    border-color: #E8E8EC !important;
    color: inherit !important;
}

.spliff-pvar__tile:not(.is-selected):not(.spc-over):hover .spliff-pvar__label,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):focus .spliff-pvar__label,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):active .spliff-pvar__label {
    color: #0F0F10 !important;
}

.spliff-pvar__tile:not(.is-selected):not(.spc-over):hover .spliff-pvar__price,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):focus .spliff-pvar__price,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):active .spliff-pvar__price {
    color: #0F0F10 !important;
}

.spliff-pvar__tile:not(.is-selected):not(.spc-over):hover .spliff-pvar__per-g,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):focus .spliff-pvar__per-g,
.spliff-pvar__tile:not(.is-selected):not(.spc-over):active .spliff-pvar__per-g {
    color: #7A7A7A !important;
}

/* État sélectionné (single ou mode mix) : reste noir avec label blanc dans TOUS les états */
.spliff-pvar__tile.is-selected,
.spliff-pvar__tile.is-selected:hover,
.spliff-pvar__tile.is-selected:focus,
.spliff-pvar__tile.is-selected:active,
.spliff-pvar__tile.spc-over,
.spliff-pvar__tile.spc-over:hover,
.spliff-pvar__tile.spc-over:focus,
.spliff-pvar__tile.spc-over:active {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.spliff-pvar__tile.is-selected .spliff-pvar__label,
.spliff-pvar__tile.is-selected:hover .spliff-pvar__label,
.spliff-pvar__tile.is-selected:focus .spliff-pvar__label,
.spliff-pvar__tile.is-selected:active .spliff-pvar__label,
.spliff-pvar__tile.spc-over .spliff-pvar__label,
.spliff-pvar__tile.spc-over:hover .spliff-pvar__label,
.spliff-pvar__tile.spc-over:focus .spliff-pvar__label,
.spliff-pvar__tile.spc-over:active .spliff-pvar__label {
    color: #FFFFFF !important;
}

.spliff-pvar__tile.is-selected .spliff-pvar__price,
.spliff-pvar__tile.is-selected:hover .spliff-pvar__price,
.spliff-pvar__tile.is-selected:focus .spliff-pvar__price,
.spliff-pvar__tile.is-selected:active .spliff-pvar__price,
.spliff-pvar__tile.spc-over .spliff-pvar__price,
.spliff-pvar__tile.spc-over:hover .spliff-pvar__price,
.spliff-pvar__tile.spc-over:focus .spliff-pvar__price,
.spliff-pvar__tile.spc-over:active .spliff-pvar__price {
    color: #7C7CFF !important;
}

.spliff-pvar__tile.is-selected .spliff-pvar__per-g,
.spliff-pvar__tile.is-selected:hover .spliff-pvar__per-g,
.spliff-pvar__tile.spc-over .spliff-pvar__per-g,
.spliff-pvar__tile.spc-over:hover .spliff-pvar__per-g {
    color: #CCCCCC !important;
}

/* ─── Contenu tile ─── */

.spliff-pvar__label {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    color: #0F0F10;
    letter-spacing: 0.01em;
}

.spliff-pvar__price {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    color: #0F0F10;
    font-style: italic;
    white-space: nowrap;
}

.spliff-pvar__per-g {
    font-size: 12px;
    line-height: 1.2;
    color: #7A7A7A;
    font-weight: 500;
    white-space: nowrap;
}

/* ─── État sélectionné ─── */

.spliff-pvar__tile.is-selected {
    background: #000000;
    border-color: #000000;
    transform: translateY(-1px);
}

.spliff-pvar__tile.is-selected .spliff-pvar__label {
    color: #FFFFFF;
}

.spliff-pvar__tile.is-selected .spliff-pvar__price {
    color: #7C7CFF;
}

.spliff-pvar__tile.is-selected .spliff-pvar__per-g {
    color: #CCCCCC;
}

/* ─── État out-of-stock ─── */

.spliff-pvar__tile.is-out-of-stock {
    cursor: not-allowed;
    background: #F4F4F4;
    border-style: dashed;
}

.spliff-pvar__tile.is-out-of-stock .spliff-pvar__label,
.spliff-pvar__tile.is-out-of-stock .spliff-pvar__price,
.spliff-pvar__tile.is-out-of-stock .spliff-pvar__per-g {
    color: #A0A4AB;
    text-decoration: line-through;
}

.spliff-pvar__sold-out {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    background: rgba(255, 255, 255, 0.92);
    color: #0F0F10;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1.5px solid #0F0F10;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   MODE MIX — Pack-mix multi-select (body.spc-add-pack-active)
   Quand un pack ≥ 2 est sélectionné, pack-mix-front.js prend le contrôle
   des clics sur les tiles. Il injecte un <span class="spc-badge">N</span>
   et ajoute la classe .spc-over à chaque tile sélectionnée (N fois possible).
   On style ces 2 éléments pour avoir un rendu propre dans mes tiles V2.
   ═══════════════════════════════════════════════════════════════════ */

/* Badge compteur (cercle bleu Spliff avec chiffre blanc en haut à droite de la tile) */
.spliff-pvar__tile .spc-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #3D5BFF;
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(61, 91, 255, 0.35);
    pointer-events: none;
    z-index: 2;
}

/* Cache le badge quand il vaut 0 (pack-mix-front met display:none aussi mais on
   double-secure via :empty au cas où il appelle juste setBadge(_,0)) */
.spliff-pvar__tile .spc-badge[style*="display: none"],
.spliff-pvar__tile .spc-badge:empty {
    display: none !important;
}

/* État sélectionné en mode mix (.spc-over) : reprend le style de .is-selected */
.spliff-pvar__tile.spc-over {
    background: #000000;
    border-color: #000000;
    transform: translateY(-1px);
}

.spliff-pvar__tile.spc-over .spliff-pvar__label {
    color: #FFFFFF;
}

.spliff-pvar__tile.spc-over .spliff-pvar__price {
    color: #7C7CFF;
}

.spliff-pvar__tile.spc-over .spliff-pvar__per-g {
    color: #CCCCCC;
}

/* En mode mix, on désactive visuellement la "single-selection" héritée
   (.is-selected) pour ne pas la confondre avec le multi-select (.spc-over).
   Si l'admin a fait un clic en mode mix sur une tile qui était déjà is-selected
   au chargement, on prive l'apparence de sélection au profit de spc-over. */
body.spc-add-pack-active .spliff-pvar__tile.is-selected:not(.spc-over) {
    background: #FFFFFF;
    border-color: #E8E8EC;
    transform: none;
}

body.spc-add-pack-active .spliff-pvar__tile.is-selected:not(.spc-over) .spliff-pvar__label {
    color: #0F0F10;
}

body.spc-add-pack-active .spliff-pvar__tile.is-selected:not(.spc-over) .spliff-pvar__price {
    color: #0F0F10;
}

/* Label "Sold out" injecté par pack-mix-front sur les variations OOS */
.spliff-pvar__tile.spc-oos {
    cursor: not-allowed;
    opacity: 0.6;
}

.spliff-pvar__tile .spc-oos-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    background: rgba(255, 255, 255, 0.92);
    color: #0F0F10;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1.5px solid #0F0F10;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

/* Help text "Sélectionner X goûts" / "Bravo vous avez complété" — injecté par
   pack-mix-front à côté du label d'attribut. On le style pour qu'il soit lisible. */
.spc-help-inline {
    display: inline-block;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #7A7A7A;
}

/* ─── Texte d'aide multi-select (alternative à pack-mix-front .spc-help-inline qui
   est invisible quand on masque la table.variations native WC) ─── */

.spliff-pvar__help {
    grid-column: 1 / -1;
    display: none;
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #7A7A7A;
    line-height: 1.3;
}

.spliff-pvar__help.is-complete {
    color: #1DA94A;
    font-weight: 600;
}

/* ─── Placeholder éditeur ─── */

.spliff-pvar--placeholder {
    display: block;
    padding: 16px;
    background: #FFF8E5;
    border: 1px dashed #D6B04A;
    color: #6C5410;
    border-radius: 12px;
    font-size: 13px;
}