/* ===== AVG Variation Swatches ===== */
.avg-swatches-wrap,
.woocommerce div.product form.variations_form {
    --avg-sw-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --avg-sw-texto: #1a1a1a;
    --avg-sw-suave: #6b7280;
    --avg-sw-borde: #d8d8d8;
    --avg-sw-borde-activo: #1a1a1a;
    --avg-sw-fondo: #fff;
}

/* La tabla nativa de WooCommerce pasa a bloques apilados. */
form.variations_form table.variations,
form.variations_form table.variations tbody,
form.variations_form table.variations tr,
form.variations_form table.variations th,
form.variations_form table.variations td {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}

form.variations_form table.variations tr { margin-bottom: 20px; }
form.variations_form table.variations tr:last-child { margin-bottom: 12px; }

/* Etiqueta: "Edicion: Lanzamiento original" */
form.variations_form table.variations th.label label {
    display: block;
    margin: 0 0 8px;
    font-family: var(--avg-sw-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--avg-sw-suave);
    line-height: 1.4;
}

.avg-swatch-valor {
    color: var(--avg-sw-texto);
    font-weight: 500;
}

/* "Edicion: Lanzamiento original" - los dos puntos van siempre. */
.avg-tiene-valor .avg-swatch-valor::before {
    content: ": ";
    white-space: pre;
    color: var(--avg-sw-suave);
    font-weight: 400;
}

form.variations_form table.variations th.label label:not(.avg-tiene-valor)::after {
    content: ":";
}

form.variations_form table.variations th.label label.avg-tiene-valor::after { content: ""; }

/* El select nativo sigue ahi (lo usa WooCommerce), pero no se ve.
   Solo se oculta si el JS arranco (.avg-swatches-listo): sin JS el cliente
   sigue teniendo los desplegables nativos y puede comprar igual. */
form.variations_form.avg-swatches-listo select[data-avg-oculto] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Botonera ---- */
.avg-swatches { display: none; }

form.variations_form.avg-swatches-listo .avg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Selector largo a proposito: los kits de Elementor y el tema pintan todos
   los <button> con su color de marca y hay que ganarles. */
form.variations_form .avg-swatches button.avg-swatch,
.avg-swatches-wrap .avg-swatches button.avg-swatch {
    font-family: var(--avg-sw-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--avg-sw-texto);
    background: var(--avg-sw-fondo);
    background-image: none;
    /* Sin seleccionar: chip blanco sin borde visible. El borde transparente
       reserva el sitio para que nada salte al seleccionar. */
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 12px 22px;
    margin: 0;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

form.variations_form .avg-swatches button.avg-swatch:hover,
.avg-swatches-wrap .avg-swatches button.avg-swatch:hover {
    background: var(--avg-sw-fondo);
    color: var(--avg-sw-texto);
    border-color: var(--avg-sw-borde);
}

form.variations_form .avg-swatches button.avg-swatch.is-elegido,
.avg-swatches-wrap .avg-swatches button.avg-swatch.is-elegido {
    background: var(--avg-sw-fondo);
    color: var(--avg-sw-texto);
    border-color: var(--avg-sw-borde-activo);
    box-shadow: none;
    font-weight: 500;
}

.avg-swatch:focus-visible {
    outline: 2px solid var(--avg-sw-borde-activo);
    outline-offset: 2px;
}

/* Combinacion que no existe: por defecto se oculta (modo "ocultar"). */
.avg-swatch.is-oculto { display: none !important; }

/* Fila cuyas opciones quedaron todas ocultas. */
.avg-fila-vacia { display: none !important; }

/* Modo "tachar": visible pero atenuada. */
form.variations_form .avg-swatches button.avg-swatch.is-agotado,
.avg-swatches-wrap .avg-swatches button.avg-swatch.is-agotado {
    color: #a8a8a8;
    background: var(--avg-sw-fondo);
    border-color: #ececec;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}

.avg-swatch.is-agotado::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left,
        transparent calc(50% - .5px), #e0e0e0 50%, transparent calc(50% + .5px));
}

/* ---- Enlace "Limpiar" de WooCommerce ---- */
form.variations_form a.reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--avg-sw-font);
    font-size: 13px;
    color: var(--avg-sw-suave);
}

/* ---- Zona de precio + cantidad + anadir al carrito ---- */
.avg-swatches-wrap--sin-carrito .single_variation_wrap { display: none; }

/* Si el precio grande de la ficha ya se actualiza solo, el precio que
   WooCommerce repite dentro del formulario sobra. */
form.variations_form.avg-precio-sincronizado .woocommerce-variation-price { display: none; }

.avg-swatches-wrap .woocommerce-variation-price {
    font-family: var(--avg-sw-font);
    margin-bottom: 12px;
}

.avg-swatches-wrap .woocommerce-variation-availability {
    font-family: var(--avg-sw-font);
    font-size: 14px;
}

.avg-swatches-aviso {
    font-family: var(--avg-sw-font);
    background: #fff8e5;
    border-left: 3px solid #e0a800;
    padding: 12px 14px;
    font-size: 14px;
    color: #5c4600;
}

@media (max-width: 480px) {
    .avg-swatch {
        font-size: 14px;
        padding: 11px 16px;
    }
}