/**
 * WooCommerce Editorial Swatches — Frontend Styles
 * Replica la estética del mockup: swatches circulares y tarjetas de botón.
 *
 * Importa las fuentes si no están ya en el tema:
 * @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;600;700&display=swap');
 */

/* ─── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --wes-primary:          #9e3c00;
    --wes-primary-ring:     #f96400;
    --wes-primary-hover:    #ff7936;
    --wes-surface:          #f9f6f5;
    --wes-surface-low:      #f3f0f0;
    --wes-surface-lowest:   #ffffff;
    --wes-outline:          #777676;
    --wes-outline-variant:  #aeadac;
    --wes-on-surface:       #2f2f2f;
    --wes-secondary-text:   #5c5b5b;

    --wes-swatch-size:       3.25rem;   /* 52px */
    --wes-swatch-gap:        0.75rem;
    --wes-radius-circle:     9999px;
    --wes-radius-card:       0.75rem;   /* 12px */
    --wes-transition:        all 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Contenedor por atributo ────────────────────────────────────────────────── */
.wes-field-wrapper {
    /* El <select> original queda oculto, lo omitimos aquí */
}

.wes-field-wrapper select {
    display: none !important;
}

/* ─── Grid de swatches ───────────────────────────────────────────────────────── */
.wes-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wes-swatch-gap);
    margin-top: 0.5rem;
}

.wes-swatches[data-type="button"] {
    gap: 0.625rem;
}

/* ─── Swatch base ────────────────────────────────────────────────────────────── */
.wes-swatch {
    position: relative;
    cursor: pointer;
    transition: var(--wes-transition);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.wes-swatch:focus-visible {
    outline: 2px solid var(--wes-primary-ring);
    outline-offset: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIPO CÍRCULO (color)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wes-swatch--color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    /* área clickable amplia */
    padding: 0.125rem;
}

/* Círculo exterior (padding + borde) */
.wes-swatch--color .wes-swatch__circle {
    width: var(--wes-swatch-size);
    height: var(--wes-swatch-size);
    border-radius: var(--wes-radius-circle);
    background-color: var(--swatch-color, #cccccc);
    border: 2px solid transparent;
    box-shadow:
        0 0 0 1px var(--wes-outline-variant),
        inset 0 1px 3px rgba(0,0,0,0.12);
    transition: var(--wes-transition);
    position: relative;
    overflow: hidden;
}

/* Hover estado disponible */
.wes-swatch--color:not(.wes-swatch--unavailable):hover .wes-swatch__circle {
    box-shadow:
        0 0 0 2px var(--wes-primary-hover),
        inset 0 1px 3px rgba(0,0,0,0.12);
    transform: scale(1.06);
}

/* Estado seleccionado: borde naranja + ring exterior */
.wes-swatch--color.wes-swatch--selected .wes-swatch__circle {
    border-color: var(--wes-primary-ring);
    box-shadow:
        0 0 0 2px var(--wes-primary-ring),
        0 0 0 4px rgba(249,100,0,0.15),
        inset 0 1px 3px rgba(0,0,0,0.12);
    transform: scale(1.04);
}

/* Estado agotado: gris + slash diagonal + cursor no-drop */
.wes-swatch--color.wes-swatch--unavailable {
    cursor: not-allowed;
    opacity: 0.55;
}

.wes-swatch--color.wes-swatch--unavailable .wes-swatch__circle {
    filter: grayscale(1);
    border: 1px dashed var(--wes-outline-variant);
    box-shadow: none;
}

/* Slash diagonal (pseudo-elemento) */
.wes-swatch--color.wes-swatch--unavailable .wes-swatch__circle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 47%,
        rgba(100, 100, 100, 0.7) 47%,
        rgba(100, 100, 100, 0.7) 53%,
        transparent 53%
    );
    border-radius: var(--wes-radius-circle);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIPO BOTÓN (button / card)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wes-swatch--button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-width: 5.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--wes-radius-card);
    background: var(--wes-surface-lowest);
    border: 1.5px solid var(--wes-outline-variant);
    transition: var(--wes-transition);
}

.wes-swatch--button:not(.wes-swatch--unavailable):hover {
    border-color: var(--wes-primary-hover);
    background: #fff7f4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(158, 60, 0, 0.1);
}

/* Seleccionado */
.wes-swatch--button.wes-swatch--selected {
    border: 2px solid var(--wes-primary);
    background: var(--wes-surface-lowest);
    box-shadow: 0 0 0 3px rgba(249, 100, 0, 0.12);
}

/* Agotado */
.wes-swatch--button.wes-swatch--unavailable {
    cursor: not-allowed;
    opacity: 0.5;
    border-style: dashed;
    border-color: var(--wes-outline-variant);
    background: var(--wes-surface-low);
}

.wes-swatch--button.wes-swatch--unavailable .wes-swatch__label {
    color: var(--wes-secondary-text);
}

/* Texto del label */
.wes-swatch__label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wes-on-surface);
    line-height: 1.2;
    pointer-events: none;
}

/* ─── Enlace "Ver disponibles" ─────────────────────────────────────────────── */
.wes-swatch__link {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wes-secondary-text);
    text-decoration: none;
    margin-top: 0.15rem;
    transition: color 0.15s;
    pointer-events: auto;
    cursor: pointer;
}

.wes-swatch__link:hover {
    color: var(--wes-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Animación de press ─────────────────────────────────────────────────────── */
.wes-swatch--color:not(.wes-swatch--unavailable):active .wes-swatch__circle,
.wes-swatch--button:not(.wes-swatch--unavailable):active {
    transform: scale(0.94);
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --wes-swatch-size: 2.75rem;
    }
    .wes-swatch--button {
        min-width: 4.5rem;
        padding: 0.5rem 0.75rem;
    }
}