/* ============================================================
   CF Widget — Product Variations / Swatches
   ============================================================ */

.cw-variations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cw-attr-group {
    display: flex;
    flex-direction: column;
}

.cw-attr-label {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* ── Color swatches ─────────────────────────────────────── */

.cw-swatches--color {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 10px; /* row × column — menos separación horizontal */
}

/* Wrapper cuando se muestra el nombre debajo del círculo.
   min-width contiene el outline del estado seleccionado (~39px) sin recortes. */
.cw-swatch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 40px;
}

/* Nombre del término que aparece debajo del swatch. Default Tenor Sans
   con fallbacks serif clásicos. El control de Tipografía de Elementor
   (color_name_typography / image_name_typography) lo override cuando el
   admin lo configura. `word-break: break-word` + `max-width: 72px` hacen
   que nombres compuestos como "Blue passion" se partan: "blue" arriba y
   "passion" abajo, sin desbordar el ancho del swatch. */
.cw-swatch__name {
    font-family: 'Tenor Sans', Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #666666;
    text-align: center;
    pointer-events: none;
    user-select: none;
    transition: color 200ms ease;
    word-break: break-word;
    max-width: 72px;
    letter-spacing: 0.2px;
}

.cw-swatch-item.is-selected .cw-swatch__name {
    color: #1a1a1a;
}

.cw-swatch-item.is-disabled .cw-swatch__name {
    opacity: 0.4;
    text-decoration: line-through;
}

/* El círculo de color: SIEMPRE conserva el background del término.
   Forzamos !important para neutralizar reglas de Elementor que pintan
   los <button> en hover dentro de su widget. Sin transform en hover
   para que el círculo no "salte". */
.cw-swatches--color .cw-swatch.cw-swatch--color,
.cw-swatches--color .cw-swatch.cw-swatch--color:hover,
.cw-swatches--color .cw-swatch.cw-swatch--color:focus,
.cw-swatches--color .cw-swatch.cw-swatch--color:active {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--swatch-color, #cccccc) !important;
    background-color: var(--swatch-color, #cccccc) !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08); /* sutil borde para colores blancos/claros */
    cursor: pointer;
    transition: outline 180ms ease, outline-offset 180ms ease, border-color 180ms ease;
    transform: none !important;
    padding: 0;
    flex-shrink: 0;
    outline: 1.5px solid transparent;
    outline-offset: 0;
    box-shadow: none;
}

/* Hover: anillo discreto pegado al círculo. Envuelto en `@media (hover: hover)`
   para que en táctil no se quede pegado tras un tap (los browsers móviles
   mantienen :hover hasta que el usuario toque otro elemento). */
@media (hover: hover) {
    .cw-swatches--color .cw-swatch.cw-swatch--color:not(.cw-swatch--selected):not(.cw-swatch--disabled):hover {
        outline: 1.5px solid rgba(0, 0, 0, 0.18);
        outline-offset: 2px;
    }
}

/* Selected: anillo limpio con respiración (estilo Allbirds / Sephora).
   Una sola línea fina alrededor del círculo, separada por un gap transparente.
   El color del anillo se controla desde Elementor (color_border_selected). */
.cw-swatch--color.cw-swatch--selected,
.cw-swatches--color .cw-swatch.cw-swatch--color.cw-swatch--selected {
    border-color: rgba(0, 0, 0, 0.08);
    outline: 1.5px solid #1a1a1a;
    outline-offset: 3px;
    box-shadow: none;
}

/* ── Image swatches ─────────────────────────────────────── */
/* Mismo diseño circular que los color swatches: mismo tamaño,
   mismo borde sutil, y mismo sistema de outline para hover/selected.
   La imagen del término llena el círculo con object-fit: cover. */

.cw-swatches--image {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 10px;
}

.cw-swatch.cw-swatch--image,
.cw-swatch.cw-swatch--image:hover,
.cw-swatch.cw-swatch--image:focus,
.cw-swatch.cw-swatch--image:active {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Fallback gris cuando el término no tiene imagen — replica el #cccccc
       del color swatch sin --swatch-color. Cuando hay <img>, ésta lo cubre
       totalmente con object-fit: cover. */
    background: #cccccc !important;
    background-color: #cccccc !important;
    background-image: none !important;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: outline 180ms ease, outline-offset 180ms ease, border-color 180ms ease;
    transform: none !important;
    flex-shrink: 0;
    outline: 1.5px solid transparent;
    outline-offset: 0;
    box-shadow: none;
}

.cw-swatch--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Hover: anillo discreto pegado al círculo (mismo que color swatch).
   Envuelto en `@media (hover: hover)` — sin esto el outline se quedaba
   pegado en móvil tras tocar el swatch y daba la sensación de que la
   selección no se podía deshacer. */
@media (hover: hover) {
    .cw-swatch--image:not(.cw-swatch--selected):not(.cw-swatch--disabled):hover {
        outline: 1.5px solid rgba(0, 0, 0, 0.18);
        outline-offset: 2px;
    }
}

/* Selected: anillo limpio con respiración (idéntico a color swatch). */
.cw-swatch--image.cw-swatch--selected {
    border-color: rgba(0, 0, 0, 0.08);
    outline: 1.5px solid #1a1a1a;
    outline-offset: 3px;
    box-shadow: none;
}

/* ── Label swatches ─────────────────────────────────────── */

.cw-swatches--label {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-swatch--label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1.5px solid #E8E0D5;
    border-radius: 6px;
    font-size: 13px;
    color: #1a1a1a;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
    line-height: 1.3;
}

.cw-swatch--label.cw-swatch--selected {
    border-color: #C9A96E;
    background: #F5F0EA;
    font-weight: 500;
}

@media (hover: hover) {
    .cw-swatch--label:not(.cw-swatch--selected):not(.cw-swatch--disabled):hover {
        border-color: #C9A96E;
        background: #F5F0EA;
    }
}

/* ── Button swatches ────────────────────────────────────── */

.cw-swatches--button {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cw-swatch--button {
    padding: 8px 18px;
    border: 1.5px solid #E8E0D5;
    border-radius: 8px;
    font-size: 13px;
    color: #666666;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
    line-height: 1.3;
}

.cw-swatch--button.cw-swatch--selected {
    border-color: #1a1a1a;
    background: #1a1a1a;
    color: #FFFFFF;
    font-weight: 500;
}

@media (hover: hover) {
    .cw-swatch--button:not(.cw-swatch--selected):not(.cw-swatch--disabled):hover {
        border-color: #999999;
    }
}

/* ── Dropdown (select) ──────────────────────────────────── */

.cw-select-wrap {
    position: relative;
    width: 100%;
}

.cw-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666666;
    pointer-events: none;
}

.cw-select-wrap select {
    width: 100%;
    height: 44px;
    border: 1.5px solid #E8E0D5;
    border-radius: 8px;
    padding: 0 40px 0 14px;
    font-size: 14px;
    color: #1a1a1a;
    background: #FFFFFF;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 200ms ease;
}

.cw-select-wrap select:focus {
    border-color: #C9A96E;
}

/* ── Editor notice (sólo en modo Elementor edición) ─────── */

.cw-variations--notice .cw-variations__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed #C9A96E;
    border-radius: 8px;
    background: #FAF6EE;
    color: #6B4F1D;
    font-size: 13px;
    line-height: 1.45;
}

.cw-variations--notice .cw-variations__notice-icon {
    color: #C9A96E;
    flex-shrink: 0;
    line-height: 0;
    margin-top: 1px;
}

/* ── Disabled state ─────────────────────────────────────── */

.cw-swatch--disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    position: relative;
}

.cw-swatch--color.cw-swatch--disabled::after,
.cw-swatch--image.cw-swatch--disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent calc(50% - 0.75px),
        #888888 calc(50% - 0.75px),
        #888888 calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
    border-radius: inherit;
    pointer-events: none;
}

.cw-swatch--button.cw-swatch--disabled,
.cw-swatch--label.cw-swatch--disabled {
    text-decoration: line-through;
    color: #aaaaaa;
}