/*
 * CSS Grid para Single Product (Blank Canvas)
 * Archivo: assets/wc/css/single-product.css
 *
 * Estrategia de cascada:
 * Los estilos de GeneratePress y WooCommerce no usan @layer, por lo tanto
 * están en la capa implícita (unlayered). Las reglas dentro de @layer hybinet
 * tienen MENOR prioridad que unlayered por defecto — pero para las clases
 * hybinet-* que son exclusivamente nuestras, no hay conflicto.
 * Para anular reglas de GP/WC sobre elementos compartidos (como img.avatar)
 * usamos selectores con mayor especificidad en lugar de !important.
 */

/* ==========================================================================
   RESET DE RAÍZ — evitar overflow horizontal en página de producto
   ========================================================================== */

/* Cambio 1: box-sizing global para que padding no desborde el viewport */
body.single-product,
body.single-product *,
body.single-product *::before,
body.single-product *::after {
    box-sizing: border-box;
}

/* Cambio 2: bloquear scroll horizontal en toda la página de producto */
body.single-product {
    background-color: var(--hybinet-color-bg-primary, #FAFAF8) !important;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Cambio 3: contenedor principal con ancho seguro */
.hybinet-single-product-main {
    max-width: var(--hybinet-container-width, 1200px);
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Cambio 4: layout flex con min-width:0 para que los hijos no expandan el padre */
.hybinet-single-product-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
}

.hybinet-single-breadcrumb {
    margin-bottom: -1rem;
    /* Acercar la miga de pan ligeramente a la foto */
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.hybinet-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--hybinet-color-text-primary, #111);
    font-weight: 600;
}

.hybinet-breadcrumbs a {
    color: var(--hybinet-color-text-secondary, #666);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hybinet-breadcrumbs a:hover {
    color: var(--hybinet-color-brand-primary, #000);
}

.hybinet-breadcrumb-separator {
    color: var(--hybinet-color-text-meta, #999);
}

/* Fila Superior: Galería y Resumen */
.hybinet-product-top-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .hybinet-product-top-row {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

/* Columna Izquierda: Galería */
.hybinet-product-gallery-area {
    position: relative;
    width: 100%;
    min-width: 0;
    /* Prevenir que el Flexbox colapse la columna */
}

/* Columna Derecha: Resumen */
.hybinet-product-summary-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ================================================================
 * GALERÃ A DE PRODUCTO CUSTOM (DOM Limpio sin FlexSlider)
 * ================================================================ */
.hybinet-custom-gallery {
    display: flex;
    flex-direction: row;
    /* Miniaturas a la izquierda */
    align-items: flex-start;
    /* Evitar que el contenedor principal se estire a lo alto de las miniaturas */
    gap: 1rem;
    position: relative;
    width: 100%;
}

/* Contenedor de la imagen principal */
.hybinet-gallery-main {
    flex: 1 1 auto;
    position: relative;
    background: transparent;
}

.hybinet-gallery-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Forzar cuadrado */
    object-fit: cover;
    /* Recortar para llenar el cuadrado */
    border-radius: 12px;
    /* Aplicar el radio directamente a la foto */
    display: block;
}

/* Badge de oferta Custom */
.hybinet-gallery-main .hybinet-badge--sale {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 9;
    background-color: var(--hybinet-color-badge-bg, var(--hybinet-palette-red));
    color: var(--hybinet-color-badge-text, var(--hybinet-palette-white));
    padding: 4px 12px;
    border-radius: var(--hybinet-radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Lupa visual */
.hybinet-gallery-zoom-icon {
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    /* No estorbar al clic */
    color: var(--hybinet-color-text-primary, #111);
}

/* Contenedor externo: columna con chevrons flotantes + lista de thumbs */
.hybinet-gallery-thumbs-nav {
    width: 80px;
    flex: 0 0 80px;
    position: relative;
    /* Contexto para los chevrons absolutos */
    overflow: hidden;
    /* La altura se sincroniza dinámicamente con la imagen principal via JS */
}

/* Botones chevron: flotan encima de los thumbs */
.hybinet-thumbs-chevron {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--hybinet-color-border, #e0e0e0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hybinet-color-text-primary, #111);
    transition: background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    padding: 0;
}

.hybinet-thumbs-chevron--up {
    top: 6px;
    /* Flota en el borde superior */
}

.hybinet-thumbs-chevron--down {
    bottom: 6px;
    /* Flota en el borde inferior */
}

.hybinet-thumbs-chevron:hover {
    background: var(--hybinet-color-brand-primary, #111);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Invisible pero reserva el evento — manejado por JS via clase */
.hybinet-thumbs-chevron.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Lista de thumbnails: ocupa todo el nav, los chevrons flotan encima */
.hybinet-gallery-thumbnails {
    position: absolute;
    inset: 0;
    /* Ocupa todo el nav */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    /* Scroll programático via JS */
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    padding: 0 0 0 0;
}

.hybinet-gallery-thumbnails::-webkit-scrollbar {
    display: none;
    /* Chrome / Safari */
}

/* Botones de miniatura */
.hybinet-gallery-thumb-btn {
    width: 100%;
    flex: 0 0 auto;
    /* No comprimir los thumbs */
    padding: 0;
    margin: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.5;
    transition: all 0.2s ease;
    display: block;
}

.hybinet-gallery-thumb-btn img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Forzar cuadrado */
    object-fit: cover;
    /* Recortar para llenar el cuadrado */
    display: block;
}

.hybinet-gallery-thumb-btn.is-active,
.hybinet-gallery-thumb-btn:hover {
    border-color: var(--hybinet-color-text-primary, #111);
    opacity: 1;
}

/* Icono nativo de lupa (Zoom) - Reposicionarlo si se necesita */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    right: 20px;
    top: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Ajustes Móvil (Thumbnails debajo en fila) */
@media (max-width: 767px) {
    .woocommerce-product-gallery {
        flex-direction: column;
    }

    .woocommerce-product-gallery .flex-viewport {
        width: 100% !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs {
        width: 100% !important;
        flex-direction: row;
        overflow-x: auto;
        /* Permitir swipe */
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 60px !important;
        flex: 0 0 60px;
        margin: 0 10px 0 0 !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li img {
        height: 60px;
    }

    /* ── Galería Custom: móvil ── */

    /* Invertir orden: imagen arriba, miniaturas abajo */
    .hybinet-custom-gallery {
        flex-direction: column-reverse;
    }

    /* El nav de miniaturas ocupa todo el ancho y tiene altura fija */
    .hybinet-gallery-thumbs-nav {
        width: 100%;
        flex: 0 0 auto;
        height: 72px !important; /* altura fija en móvil; JS no sobreescribe en mobile */
        overflow: hidden;
        position: relative;
    }

    /* Lista de thumbs: fila horizontal con scroll */
    .hybinet-gallery-thumbnails {
        flex-direction: row;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    /* Cada thumb: cuadrado 64×64px perfectamente relleno */
    .hybinet-gallery-thumb-btn {
        width: 64px;
        flex: 0 0 64px;
        height: 64px;
    }

    /* Imágenes de los thumbs: llenar el cuadrado redondeado */
    .hybinet-gallery-thumb-btn img {
        width: 64px;
        height: 64px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* ── Chevrones: rotar SVG 90° para que apunten izquierda/derecha ── */

    /* ^ rotado -90° (CCW) = apunta a la izquierda (<) */
    .hybinet-thumbs-chevron--up svg {
        transform: rotate(-90deg);
    }

    /* v rotado -90° (CCW) = apunta a la derecha (>) */
    .hybinet-thumbs-chevron--down svg {
        transform: rotate(-90deg);
    }

    /* Chevron izquierdo: posicionado a la izquierda */
    .hybinet-thumbs-chevron--up {
        top: 50%;
        left: 6px;
        transform: translateY(-50%);
    }

    /* Chevron derecho: posicionado a la derecha */
    .hybinet-thumbs-chevron--down {
        bottom: auto;
        top: 50%;
        right: 6px;
        left: auto;
        transform: translateY(-50%);
    }

    /* Los chevrones usan position absolute dentro del nav */
    .hybinet-thumbs-chevron {
        position: absolute;
    }
}

/* ==========================================================================
   RESUMEN DEL PRODUCTO (hybinet-summary.php)
   ========================================================================== */

.hybinet-product-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hybinet-color-title, #111);
    
    /* Truncado Visual (Line Clamp) para proteger el layout */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hybinet-product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--hybinet-color-text-secondary, #555);
}

.hybinet-product-rating .star-rating {
    font-size: 1.1rem;
    /* Tamaño de estrellas de WC */
    color: #f59e0b;
    /* Color naranja/dorado premium */
}

.hybinet-summary-separator {
    margin: 1.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
}

/* Los estilos de precio y stock han sido extraídos a hybinet-price.css */

/* ==========================================================================
   FORMULARIO DE AÑADIR AL CARRITO (Variaciones y Botón)
   ========================================================================== */

.hybinet-variations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    /* min-width:0 evita que el grid expanda su contenedor flex */
    min-width: 0;
}

/* Cambio 5: variaciones en 1 columna en móvil para evitar overflow */
@media (max-width: 767px) {
    .hybinet-variations {
        grid-template-columns: 1fr;
    }
}

.hybinet-variation-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hybinet-variation-group .label label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hybinet-color-text-primary, #111);
}

.hybinet-variation-group .value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Estilo del Select nativo para que parezca un botón/swatch limpio */
.hybinet-select-variation {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    /* Bordes bien redondeados */
    padding: 0.6rem 2.5rem 0.6rem 1.2rem;
    font-size: 0.95rem;
    color: var(--hybinet-color-text-primary, #111);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    /* Flecha custom (SVG) de fondo */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5L6%206.5L11%201.5%22%20stroke%3D%22%23333333%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px;
    outline: none;
    max-width: 100%;
}

.hybinet-select-variation:hover,
.hybinet-select-variation:focus {
    border-color: #ccc;
    background-color: #f7f7f7;
}

/* Botón de limpiar opciones */
.hybinet-reset-variations {
    font-size: 0.85rem;
    color: var(--hybinet-color-text-meta, #666);
    text-decoration: underline;
}

.hybinet-reset-variations:hover {
    color: var(--hybinet-color-text-primary, #111);
}

/* ==========================================================================
   ÁREA DE CARRITO (Cantidad + Botón)
   ========================================================================== */

.hybinet-product-actions {
    margin-top: 1.5rem;
    width: 100%;
}

.hybinet-product-actions form.cart {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Mantener el bloque de botón y cantidad siempre visible */
.hybinet-product-actions .single_variation_wrap {
    display: block !important;
    width: 100%;
}

/* Botón de añadir al carrito desactivado POR DEFECTO:
   WC nativamente solo oculta el contenedor y no añade clases de disabled al inicio.
   Por eso invertimos la lógica: el botón nace desactivado (gris y sin clics) y solo se
   activa cuando WC determina que la combinación es válida y le añade '-enabled'. */
.hybinet-product-actions .woocommerce-variation-add-to-cart:not(.woocommerce-variation-add-to-cart-enabled) .single_add_to_cart_button,
.hybinet-product-actions .woocommerce-variation-add-to-cart:not(.woocommerce-variation-add-to-cart-enabled) .quantity {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(100%) !important;
    pointer-events: none !important;
}

/* Ocultamos el precio nativo que WC inyecta junto al botón, ya que tenemos nuestro propio bloque de precio arriba */
.hybinet-product-actions .woocommerce-variation.single_variation {
    display: none !important;
}

/* Fila: cantidad + botón (Para productos simples) */
.hybinet-product-actions form.cart:not(.variations_form):not(.grouped_form),
/* Fila: cantidad + botón (Para productos variables) */
.hybinet-product-actions .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* Permitir que los elementos bajen si no caben */
    width: 100%;
    margin-top: 1.5rem;
}

/* Producto agrupado: el form ocupa el ancho completo en columna */
.hybinet-product-actions form.grouped_form {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
}

/* Evitar que pseudo-elementos del tema padre arruinen el Flexbox y creen Gaps fantasmas (zonas moradas) */
.hybinet-product-actions .cart::before,
.hybinet-product-actions .cart::after,
.hybinet-product-actions .woocommerce-variation-add-to-cart::before,
.hybinet-product-actions .woocommerce-variation-add-to-cart::after {
    display: none !important;
    content: none !important;
}

/* ↀↀ Selector de cantidad (Stepper) ↀↀ */
.hybinet-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 140px; /* Un poco más ancho para dar espacio al input con botones más grandes */
    height: 48px;
    border: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
    border-radius: 50px;
    background: transparent;
    flex-shrink: 0;
    overflow: hidden;
}

/* Ocultar basura inyectada por temas de terceros, pero preservar nuestros botones */
.hybinet-qty .qty-btn:not(.hybinet-qty__btn),
.hybinet-qty>button:not(.hybinet-qty__btn),
.hybinet-qty a {
    display: none !important;
}

/* Botones +/- del Stepper (Tus propios botones) */
.hybinet-qty__btn {
    width: 48px;
    height: 48px;
    border: none !important;
    border-radius: 999px;
    background: var(--hybinet-palette-white, #ffffff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--hybinet-color-text-secondary, #4B564E);
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.hybinet-qty__btn:hover {
    background: var(--hybinet-color-bg-tertiary, #E5E5E0);
    color: var(--hybinet-color-text-primary, #1F2A22);
}

/* Evitar outlines, fondos o box-shadows verdes inyectados por el tema al hacer clic */
.hybinet-qty__btn:focus,
.hybinet-qty__btn:focus-visible,
.hybinet-qty__btn:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

.hybinet-qty__btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Input del número */
.hybinet-qty__input,
.hybinet-qty .qty {
    display: block;
    width: 100% !important;
    max-width: 44px !important;
    height: 100%;
    min-width: 0;
    flex: 1;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hybinet-color-text-primary, #1F2A22) !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: textfield;
}

.hybinet-qty__input:focus,
.hybinet-qty__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

.hybinet-qty:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--hybinet-color-border-soft, #D8D8D2) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.hybinet-qty__input::-webkit-inner-spin-button,
.hybinet-qty__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==========================================================================
   BOTONES DE ACCIÓN (Añadir al carrito y Ver carrito)
   ========================================================================== */

/* ── Base compartida para ambos botones ── */
.hybinet-product-actions .cart .button {
    min-height: 48px;
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: none !important;
    text-shadow: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--hybinet-color-text-primary, #1F2A22) !important;
}

.hybinet-product-actions .cart .button:active {
    transform: scale(0.98);
}

/* ── Botón Añadir al carrito (Principal) ── */
.hybinet-product-actions .cart button.single_add_to_cart_button {
    flex: 1 1 200px; /* Base de 200px, crece si hay espacio */
    padding: 0 1.75rem;
    background-color: var(--hybinet-color-brand-accent, #8DC219) !important;
    background-image: none !important;
    font-weight: 700 !important;
    /* Forzamos la negrita pesada */
}

.hybinet-product-actions .cart button.single_add_to_cart_button:hover {
    background-color: var(--hybinet-color-brand-primary, #7ab315) !important;
}

/* ── Botón Ver Carrito (Secundario Dinámico) ── */
.hybinet-product-actions .cart a.hybinet-view-cart-btn {
    flex: 1 1 auto; /* Cambiado para permitirle crecer si pasa a nueva linea, y auto usa el tamano de contenido base */
    padding: 0 1.5rem;
    background-color: var(--hybinet-color-bg-tertiary, #E5E5E0) !important;
    font-weight: 700 !important;
    /* Mismo peso que el principal */
    gap: 8px;
}

@media (min-width: 768px) {
    /* En escritorio preferimos que no se expanda y quede pegado a la derecha con su tamaño original */
    .hybinet-product-actions .cart a.hybinet-view-cart-btn {
        flex: 0 0 auto;
    }
}

.hybinet-product-actions .cart a.hybinet-view-cart-btn:hover {
    background-color: var(--hybinet-color-border-soft, #D8D8D2) !important;
}

/* Protección para que el span herede la negrita del botón ignorando resets del tema */
.hybinet-product-actions .cart a.hybinet-view-cart-btn * {
    font-weight: inherit !important;
}

.hybinet-product-actions .cart a.hybinet-view-cart-btn svg {
    flex-shrink: 0;
}

.hybinet-product-actions button.single_add_to_cart_button.disabled,
.hybinet-product-actions button.single_add_to_cart_button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   DESCRIPCIÓN CORTA (EXTRACTO)
   ========================================================================== */
.hybinet-product-excerpt {
    margin-top: 2rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--hybinet-color-text-secondary, #4B564E);
}

.hybinet-product-excerpt p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CUSTOM ORDERING DROPDOWN (Reutilizado para variaciones)
   ========================================================================== */

.hybinet-variation-dropdown {
    position: relative;
    width: 100%;
}

.hybinet-variation-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hybinet-color-title, #111);
    cursor: pointer;
    white-space: nowrap;
    border-radius: 50px;
    transition: color 0.15s ease, background-color 0.15s ease;
    width: 100%;
    background-color: var(--hybinet-color-bg-secondary, #f7f7f7);
    border: 1px solid #e0e0e0;
}

.hybinet-variation-dropdown__trigger:hover,
.hybinet-variation-dropdown__trigger:focus,
.hybinet-variation-dropdown__trigger:active,
.hybinet-variation-dropdown__trigger[aria-expanded="true"] {
    color: var(--hybinet-palette-black, #000);
    background-color: var(--hybinet-color-bg-tertiary, #ebebeb) !important;
    outline: none;
    box-shadow: none;
    border-color: #ccc;
}

.hybinet-variation-dropdown__trigger svg {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.hybinet-variation-dropdown__trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.hybinet-variation-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 200px;
    background: var(--hybinet-palette-white, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 200;
    animation: hybinet-ordering-in 0.15s ease;
}

.hybinet-variation-dropdown__menu[hidden] {
    display: none;
}

@keyframes hybinet-ordering-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hybinet-variation-dropdown__menu li {
    margin: 0;
    padding: 0;
}

.hybinet-variation-dropdown__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.95rem;
    color: var(--hybinet-color-text-primary, #1F2A22);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.hybinet-variation-dropdown__option:hover {
    background-color: var(--hybinet-color-bg-secondary, #f7f7f7);
    color: var(--hybinet-color-text-primary, #1F2A22);
}

.hybinet-variation-dropdown__option.is-active {
    font-weight: 600;
}

.hybinet-variation-dropdown__label {
    flex: 1;
    white-space: normal;
    word-break: break-word;
    padding-right: 12px;
}

.hybinet-variation-dropdown__radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.hybinet-variation-dropdown__option.is-active .hybinet-variation-dropdown__radio {
    border-color: var(--hybinet-color-title, #111);
}

.hybinet-variation-dropdown__radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--hybinet-color-title, #111);
}

/* ==========================================================================
   RESEÑAS (RATINGS)
   ========================================================================== */
.hybinet-product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hybinet-review-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--hybinet-color-text-secondary, #4B564E);
    font-size: 0.95rem;
    line-height: 1;
    transform: translateY(1px);
}

.hybinet-rating-average {
    font-weight: 600;
    color: var(--hybinet-color-text-primary, #1F2A22);
}

/* ==========================================================================
   PRODUCTO AGRUPADO (.hybinet-grouped-*)
   Estilos exclusivos del tipo "grouped". No afectan a simple ni variable.
   ========================================================================== */

/* Contenedor de la lista de productos del grupo */
.hybinet-grouped-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Cada fila (producto hijo) */
.hybinet-grouped-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0; /* Sin padding horizontal para que quede a ras del contenido, pero con aire vertical */
    background: transparent;
    border-bottom: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
}

.hybinet-grouped-item:last-child {
    border-bottom: none;
}

.hybinet-grouped-item:hover {
    background: transparent;
}

/* Columna: cantidad */
.hybinet-grouped-item__col--quantity {
    flex-shrink: 0;
}

/* Columna: nombre (crece para ocupar espacio disponible) */
.hybinet-grouped-item__col--label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Columna: precio (alineado a la derecha) */
.hybinet-grouped-item__col--price {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

/* Nombre del producto */
.hybinet-grouped-item__label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hybinet-color-text-primary, #1F2A22);
    line-height: 1.3;
    cursor: default;
}

.hybinet-grouped-item__link {
    color: var(--hybinet-color-primary, #2d6a4f);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.hybinet-grouped-item__link:hover {
    color: var(--hybinet-color-primary-dark, #1b4332);
    text-decoration: underline;
}

/* Precio en la columna del agrupado (usa la clase inline global por defecto) */
.hybinet-grouped-item__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hybinet-color-text-primary, #1F2A22);
    white-space: nowrap;
}

/* SOBREESCRIBIR PRECIOS DE OFERTA EXCLUSIVAMENTE PARA EL AGRUPADO
   Ajustamos el diseño para mostrar "Precio Actual + Precio Viejo" arriba, y el "Ahorro" abajo. */
.hybinet-grouped-item__price .hybinet-sale-price-wrapper {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 
        "current old"
        "badge badge";
    gap: 0.2rem 0.35rem;
    justify-content: flex-end;
    align-items: baseline;
}

.hybinet-grouped-item__price .hybinet-sale-price-current {
    grid-area: current;
}

.hybinet-grouped-item__price .hybinet-sale-price-current ins {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.hybinet-grouped-item__price .hybinet-sale-price-side {
    display: contents; /* Destruye el wrapper intermedio para que old y badge sean hijos del grid */
}

.hybinet-grouped-item__price .hybinet-sale-price-old {
    grid-area: old;
}

.hybinet-grouped-item__price .hybinet-sale-price-old del .woocommerce-Price-amount,
.hybinet-grouped-item__price .hybinet-sale-price-old del .amount,
.hybinet-grouped-item__price .hybinet-sale-price-old del bdi {
    font-size: 0.85rem !important;
}

.hybinet-grouped-item__price .hybinet-save-badge {
    grid-area: badge;
    justify-self: flex-end; /* Alinea el badge a la derecha (bajo los precios) */
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    margin-top: 0.15rem;
}

/* Qty dentro del agrupado: más compacto y estilo pro */
.hybinet-grouped-item .hybinet-qty {
    width: 104px;
    height: 36px;
    gap: 0;
    border: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
    background: transparent;
}

.hybinet-grouped-item .hybinet-qty__btn {
    width: 36px;
    height: 36px;
    min-width: unset;
    border-radius: 999px;
    padding: 0;
    background: var(--hybinet-palette-white, #ffffff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.hybinet-grouped-item .hybinet-qty__btn:hover {
    background: var(--hybinet-color-bg-tertiary, #E5E5E0);
}

.hybinet-grouped-item .hybinet-qty__btn svg {
    width: 12px;
    height: 12px;
}

.hybinet-grouped-item .hybinet-qty .qty,
.hybinet-grouped-item .hybinet-qty__input {
    width: 100% !important;
    max-width: 32px !important;
    height: 100%;
    min-width: 0;
    flex: 1;
    line-height: 36px;
    font-size: 0.85rem;
    background: transparent;
    border: none !important;
    padding: 0;
    box-shadow: none !important;
}

/* Área del botón "Añadir al carrito" del agrupado */
.hybinet-grouped-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    width: 100%;
}

/* Botón principal del agrupado — mismas proporciones que simple/variable */
.hybinet-grouped-form .single_add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 1.75rem;
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: none !important;
    text-shadow: none;
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--hybinet-color-brand-accent, #8DC219) !important;
    background-image: none !important;
    color: var(--hybinet-color-text-primary, #111) !important;
}

.hybinet-grouped-form .single_add_to_cart_button:hover {
    background-color: var(--hybinet-color-brand-primary, #7ab315) !important;
}

.hybinet-grouped-form .single_add_to_cart_button:active {
    transform: scale(0.98);
}

/* Botón "Ver carrito" que WooCommerce inyecta después de añadir */
.hybinet-grouped-actions .added_to_cart,
.hybinet-grouped-form .added_to_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 1.5rem;
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: none !important;
    text-decoration: none;
    background-color: var(--hybinet-color-bg-tertiary, #EBEBE6) !important;
    color: var(--hybinet-color-text-primary, #111) !important;
}

.hybinet-grouped-actions .added_to_cart:hover,
.hybinet-grouped-form .added_to_cart:hover {
    background-color: var(--hybinet-color-border-soft, #D8D8D2) !important;
}

/* Ocultar la tabla nativa de WC si alguien la usa — doble seguridad */
.hybinet-grouped-form .group_table {
    display: none !important;
}

/* ==========================================================================
   AJUSTES GLOBALES PARA LA PÁGINA DE PRODUCTO
   ========================================================================== */

/* El header completo es fijo por defecto,
   pero en la página de producto individual lo hacemos estático para que fluya con el scroll */
body.single-product .hybinet-header {
    position: static !important;
}

/* ==========================================================================
   ACORDEÓN DE PRODUCTO (TABS OVERRIDE)
   ========================================================================== */
.hybinet-accordion-tabs {
    margin: 2rem 0 3rem;
    border-top: 2px solid var(--hybinet-color-border-medium, #E0E0E0);
}

.hybinet-accordion-item {
    border-bottom: 2px solid var(--hybinet-color-border-medium, #E0E0E0);
}

.hybinet-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hybinet-color-text-primary, #1F2A22);
    text-align: left;
    transition: color 0.2s ease;
}
.hybinet-accordion-header:hover {
    background-color: transparent;
}

.hybinet-accordion-header:focus {
    outline: none;
    background-color: transparent;
    box-shadow: none;
}

.hybinet-accordion-header:focus-visible {
    outline: 2px dotted #1F2A22;
    outline-offset: -4px;
    background-color: transparent;
    box-shadow: none;
}

.hybinet-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hybinet-color-text-secondary, #666);
    transition: transform 0.3s ease;
}

.hybinet-accordion-icon svg {
    width: 1em;
    height: 1em;
}

.hybinet-accordion-item .hybinet-icon-minus {
    display: none;
}

.hybinet-accordion-item.is-open .hybinet-icon-plus {
    display: none;
}

.hybinet-accordion-item.is-open .hybinet-icon-minus {
    display: block;
}

/* Animación moderna de Grid para el Acordeón */
.hybinet-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    visibility: hidden;
}

.hybinet-accordion-item.is-open .hybinet-accordion-panel {
    grid-template-rows: 1fr;
    visibility: visible;
}

.hybinet-accordion-content {
    overflow: hidden;
    padding-bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease, padding 0.3s ease;
}

.hybinet-accordion-item.is-open .hybinet-accordion-content {
    padding-bottom: 2.5rem;
    opacity: 1;
}

/* ================================================================
 * TABLA DE ESPECIFICACIONES (WooCommerce Product Attributes)
 * Transformación de tabla nativa a diseño moderno Grid (Estilo Cards)
 * ================================================================ */
.woocommerce-product-attributes.shop_attributes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    border: none !important;
    margin: 0 !important;
}

.woocommerce-product-attributes.shop_attributes tbody {
    display: contents !important; /* Permite que los TR sean hijos directos del grid */
}

.woocommerce-product-attributes.shop_attributes tr {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background-color: var(--hybinet-color-bg-secondary, #F4F4F0) !important;
    border: none !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 8px !important;
}

.woocommerce-product-attributes.shop_attributes th {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40% !important;
    font-weight: 700 !important;
    color: var(--hybinet-color-text-primary, #1F2A22) !important;
    text-align: left !important;
}

.woocommerce-product-attributes.shop_attributes td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 60% !important;
    color: var(--hybinet-color-text-secondary, #666) !important;
    text-align: left !important;
    font-style: normal !important;
}

.woocommerce-product-attributes.shop_attributes td p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsividad: En móviles, mostrar a una sola columna */
@media (max-width: 768px) {
    .woocommerce-product-attributes.shop_attributes {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
 * OPINIONES: Diseño moderno de reseñas
 * Controlado 100% desde woocommerce/single-product/review.php
 * Sin !important: usamos clases hybinet-* propias que GP no conoce.
 * ================================================================ */

/* Lista raíz — limpiar padding/margin del ol nativo */
.woocommerce-reviews #comments ol.commentlist {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Cada item de reseña - Alta especificidad para evitar que GP/WC quiten el padding */
body.woocommerce #reviews #comments ol.commentlist li.hybinet-review-item {
    padding: 2rem 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* Separador más visible (10% opacidad) */
    list-style: none;
}

body.woocommerce #reviews #comments ol.commentlist li.hybinet-review-item:first-child {
    padding-top: 0 !important;
}

body.woocommerce #reviews #comments ol.commentlist li.hybinet-review-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Estructura principal: avatar + contenido en flex */
.hybinet-review {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Avatar img: anular CSS intrusivo de WooCommerce
   WC usa: .woocommerce #reviews #comments ol.commentlist li img.avatar (2 IDs, 3 Clases)
   Nosotros usamos: body.woocommerce #reviews #comments ol.commentlist li.hybinet-review-item img.avatar (2 IDs, 4 Clases)
   Así ganamos especificidad sin usar !important */
body.woocommerce #reviews #comments ol.commentlist li.hybinet-review-item img.avatar {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    position: relative; /* Anula el position: absolute de WC */
    margin: 0;
}

/* Zona de texto, crece para llenar el espacio */
.hybinet-review-body {
    flex: 1;
    min-width: 0;
}

/* Nombre del autor */
.hybinet-review-author {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hybinet-color-text-primary, #1F2A22);
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

/* Fila de fecha + badge */
.hybinet-review-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.hybinet-review-date {
    font-size: 0.75rem;
    color: var(--hybinet-color-text-secondary, #666);
}

/* Badge "Compra verificada" */
.hybinet-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #10B981;
}

/* Estrellas */
.hybinet-review-stars {
    margin-bottom: 0.5rem;
}

.hybinet-review-stars .star-rating {
    float: none;
    font-size: 1rem;
}

.hybinet-review-stars .star-rating span::before,
.hybinet-review-stars .star-rating::before {
    color: #FBBF24;
}

/* Texto de la opinión */
.hybinet-review-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hybinet-color-text-primary, #1F2A22);
}

.hybinet-review-text p {
    margin-bottom: 0;
}

/* ================================================================
 * OPINIONES: Resumen de Reseñas (Estadísticas y Barras)
 * ================================================================ */
.hybinet-review-summary-block {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

.hybinet-review-summary-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
}

.hybinet-review-average-score {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hybinet-color-text-primary, #111827);
    margin-bottom: 0.5rem;
}

.hybinet-review-average-stars .star-rating {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    float: none;
}

.hybinet-review-count-text {
    font-size: 0.875rem;
    color: var(--hybinet-color-text-secondary, #4B5563);
    margin-bottom: 1.5rem;
}

.hybinet-btn-leave-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--hybinet-color-border-dark, #D1D5DB);
    border-radius: 9999px; /* Botón tipo píldora */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hybinet-color-text-primary, #111827);
    background-color: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hybinet-btn-leave-review:hover {
    background-color: var(--hybinet-color-bg-secondary, #F3F4F6);
    color: var(--hybinet-color-text-primary, #111827);
}

.hybinet-review-summary-right {
    flex: 1;
    min-width: 280px;
}

.hybinet-review-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hybinet-review-bar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hybinet-review-bar-stars {
    width: 80px;
    display: flex;
    justify-content: flex-end;
}

.hybinet-review-bar-stars .star-rating {
    float: right;
    margin: 0;
    font-size: 0.875rem; /* Estrellas más pequeñas en las barras */
}

.hybinet-review-bar-track {
    flex: 1;
    height: 10px;
    background-color: var(--hybinet-color-border-medium, #E5E7EB);
    border-radius: 9999px;
    overflow: hidden;
}

.hybinet-review-bar-fill {
    height: 100%;
    background-color: #FACC15; /* Amarillo de las estrellas */
    border-radius: 9999px;
}

.hybinet-review-bar-percent {
    width: 35px;
    font-size: 0.875rem;
    color: var(--hybinet-color-text-primary, #111827);
    text-align: right;
}

/* ================================================================
 * OPINIONES: Formulario de Reseñas
 * ================================================================ */
#review_form_wrapper {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#review_form_wrapper #reply-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hybinet-color-text-primary, #111827);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

#review_form_wrapper .comment-form-rating label,
#review_form_wrapper .comment-form-comment label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hybinet-color-text-primary, #111827);
    margin-bottom: 0.5rem;
}

/* Estrellas interactivas en el formulario */
#review_form_wrapper p.stars a {
    color: #FACC15; /* Amarillo moderno */
    font-size: 1.5rem;
    border: none;
    outline: none;
    box-shadow: none;
}

#review_form_wrapper p.stars a:hover,
#review_form_wrapper p.stars a:focus {
    color: #FBBF24;
    outline: none;
    box-shadow: none;
}

/* Área de texto */
#review_form_wrapper textarea#comment {
    width: 100%;
    background-color: var(--hybinet-color-bg-primary, #FAFAF8);
    border: 1px solid var(--hybinet-color-border-dark, #D1D5DB);
    border-radius: 12px;
    padding: 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--hybinet-color-text-primary, #111827);
    transition: all 0.2s ease;
    box-shadow: none;
    resize: vertical;
}

#review_form_wrapper textarea#comment:focus {
    outline: none;
    border-color: var(--hybinet-color-text-primary, #111827);
    box-shadow: 0 0 0 1px var(--hybinet-color-text-primary, #111827);
    background-color: #ffffff;
}

/* Botón de enviar */
#review_form_wrapper .form-submit input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    background-color: var(--hybinet-color-text-primary, #111827);
    color: #ffffff;
    border: none;
    border-radius: 9999px; /* Píldora */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

#review_form_wrapper .form-submit input#submit:hover {
    background-color: #000000;
    transform: translateY(-1px);
}

/* ================================================================
 * PRODUCTOS RELACIONADOS (Grid)
 * ================================================================ */
.woocommerce section.related.products > h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hybinet-color-text-primary, #111827);
    margin-bottom: 2rem;
}

.woocommerce section.related.products ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: var(--hybinet-card-gap, 16px);
}

/* Evitar que pseudo-elementos clearfix de WooCommerce actúen como items del grid (creando huecos) */
.woocommerce section.related.products ul.products::before,
.woocommerce section.related.products ul.products::after {
    display: none !important;
}

/* Evitar que WooCommerce agregue floats locos a los items */
.woocommerce section.related.products ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
}

/* Evitar que GeneratePress/WooCommerce inyecten margin/padding a nuestro título y precio por estar dentro de ul.products */
.woocommerce section.related.products ul.products li.product .hybinet-card__title,
.woocommerce section.related.products ul.products li.product .hybinet-card__price-row {
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .woocommerce section.related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* -- Variaciones: estilos migrados desde inline styles de variable.php ------- */

/* Texto truncado del trigger del dropdown de variaciones */
.hybinet-variation-dropdown__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menú flotante: oculto por defecto (el JS lo muestra/oculta) */
.hybinet-variation-dropdown__menu {
    display: none;
}

/* Select nativo oculto (funciona en background, lo gestiona WooCommerce) */
.js-hybinet-variation-native-wrap {
    display: none;
}