/* ============================================================================
   WooCommerce · estilo PLANO/funcional unificado.
   1) Tarjetas de producto IGUALES en todos los sitios (tienda, categoría,
      relacionados, ventas cruzadas) que en el shortcode wtk_products.
   2) Página de producto individual estilizada (ligera y funcional).
   Se carga DESPUÉS de global.css para poder ajustar; usa las variables del tema.
   ============================================================================ */

/* ============================ 1 · REJILLA DE PRODUCTOS ============================ */

.woocommerce ul.products,
.woocommerce-page ul.products,
section.related ul.products,
.woocommerce .cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0 0 32px !important;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
section.related ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    background: #fff;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 8px;
    padding: 14px;
    min-height: 350px;
    display: flex !important;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
section.related ul.products li.product:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color, #2c3e50);
}

/* Imagen: sin zoom al hover (como el shortcode), esquinas suaves. */
.woocommerce ul.products li.product a img,
section.related ul.products li.product a img {
    border-radius: 6px;
    margin-bottom: 12px;
    transform: scale(1) !important;
}

/* Título uniforme. */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
section.related ul.products li.product h2.woocommerce-loop-product__title {
    min-height: 56px;
    padding: 0 !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #212224;
    line-height: 1.3;
}

/* Precio. */
.woocommerce ul.products li.product .price,
section.related ul.products li.product .price {
    color: var(--primary-color, #2c3e50);
    font-weight: 700;
    margin: 6px 0 12px;
    font-size: 16px;
}

/* Insignia de oferta plana (naranja de marca). */
.woocommerce.wtk-products-shortcode span.onsale,
.woocommerce.wtk-products-shortcode ul.products li.product span.onsale,
.wtk-related-section.wtk-related-has-items .single-product div.product span.onsale,
.woocommerce .et_shop_image span.onsale,
.woocommerce-product-gallery span.onsale {
    background: #f79154 !important;
    background-color: #f79154 !important;
    color: #212224 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    width: auto !important;
    /* que NO se estire a lo ancho de la imagen */
    line-height: 1.5 !important;
    padding: 2px 12px !important;
    font-weight: 600 !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
}

/* Botón "al carrito" pegado al fondo para alinear las tarjetas. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .custom-add-to-cart-btn,
.woocommerce ul.products li.product a.add_to_cart_button {
    margin-top: auto;
}

/* Fuera los overlays oscuros de Divi sobre las tarjetas. */
.woocommerce .et_overlay,
.woocommerce .et_overlay::after,
.woocommerce li.product:hover .et_overlay,
.woocommerce li.product:hover .et_overlay::after {
    display: none !important;
}

@media (max-width: 980px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products,
    section.related ul.products,
    .woocommerce .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products,
    section.related ul.products,
    .woocommerce .cross-sells ul.products {
        grid-template-columns: 1fr;
    }
}

/* ========================= 2 · PÁGINA DE PRODUCTO INDIVIDUAL ========================= */

/* Layout ROBUSTO por floats (compatible con Divi/WC). NO usar CSS grid sobre div.product: tiene varios
   hijos (galería, resumen, pestañas, relacionados) y el grid los repartía en celdas → descuadre y corte. */
.single-product div.product {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    /* limpia los floats internos */
}

/* Galería: marco plano que LLENA su columna del Theme Builder.
   La maqueta (galería a un lado, resumen al otro) la controlan las COLUMNAS FLEX de Divi
   (et_flex_column_8_24, etc.), NO floats nuestros. Antes forzábamos float+46% aquí y eso encogía
   la galería a 46% de una columna ya estrecha (≈160px). Ahora ocupa el 100% de su columna. */
.single-product div.product .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 10px;
    padding: 12px;
    background: #fff;
}

/* Imagen destacada a TAMAÑO MÁXIMO: que llene TODO el espacio reservado de la galería (es lo protagónico).
   Forzamos el 100% en TODOS los contenedores internos (wrapper, flexslider, slide y el enlace) y la imagen,
   sin exigir 'div.product' (por si la galería es un módulo del Theme Builder fuera de esa envoltura). */
.single-product .woocommerce-product-gallery,
.single-product .et_pb_wc_images .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}

.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image>a {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.single-product .woocommerce-product-gallery__image>a {
    display: block !important;
}

.single-product .woocommerce-product-gallery img,
.single-product .woocommerce-product-gallery__wrapper img,
.single-product .et_pb_wc_images img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 8px;
}

/* MINIATURAS de la galería: fila horizontal de cuadrados iguales DEBAJO de la imagen principal
   (distribución: grande arriba = destacada, miniaturas abajo). Sobreescribe el 20%+márgenes de Divi. */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    width: 84px !important;
    max-width: 84px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 6px;
    overflow: hidden;
    list-style: none !important;
}

/* TAMAÑO FIJO en la IMG (no 100%): Divi resetea el <li> a width:auto con alta especificidad, y una img al
   100% dentro de un li auto colapsa a casi nada. Fijando la img a 84px, el li se ajusta a ella y las
   miniaturas se ven bien, sin pelear la especificidad del li. La regla general de galería (img 100%) queda
   sobrescrita por mayor especificidad + !important. */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block !important;
    border: 1px solid var(--color-border, #e6e6e6) !important;
    border-radius: 6px !important;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--primary-color, #2c3e50) !important;
}

/* Resumen (columna derecha). */
.single-product div.product .summary,
.single-product div.product .entry-summary {
    float: right;
    width: 50% !important;
    margin: 0 !important;
}

/* Pestañas, relacionados y ventas cruzadas: SIEMPRE a lo ancho completo, debajo (limpian los floats). */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells,
.single-product div.product .cross-sells {
    clear: both !important;
    float: none !important;
    width: 100% !important;
}

.single-product div.product .product_title {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #212224;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 14px;
    padding: 0;
}

.single-product div.product p.price {
    color: var(--primary-color, #2c3e50);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 18px;
    line-height: 1.3;
}

/* del (precio regular) e ins (oferta) EN LÍNEA; sin el superíndice de decimales que descuadraba el precio. */
.single-product div.product p.price del,
.single-product div.product p.price ins {
    display: inline-block;
    text-decoration: none;
}

.single-product div.product p.price del {
    opacity: .5;
    font-weight: 400;
    font-size: 18px;
    margin-right: 10px;
    text-decoration: line-through;
}

.single-product div.product p.price ins {
    color: var(--primary-color, #2c3e50);
    font-weight: 700;
}

.single-product div.product p.price .price-decimal {
    vertical-align: baseline !important;
    font-size: .85em !important;
}

.single-product div.product p.price .price-integer,
.single-product div.product p.price .price-decimal-separator {
    font-size: 1em !important;
}

.single-product div.product .woocommerce-product-details__short-description {
    color: #555;
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 22px;
}

/* Selector de cantidad plano. */
.single-product div.product form.cart .quantity input.qty {
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 6px;
    height: 46px;
    width: 70px;
    text-align: center;
    color: #212224;
    background: #fff;
}

/* Botón principal: relleno primario, plano. */
.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product .cart .button {
    background: var(--primary-color, #2c3e50) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 30px !important;
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    /* igual que el botón del shortcode / cards */
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
    transition: background 0.15s ease, transform 0.05s ease;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover {
    background: var(--primary-color-light, #5d6d7e) !important;
}

.single-product div.product form.cart button.single_add_to_cart_button:active {
    transform: translateY(1px);
}

/* Meta (SKU / categorías) discreta. */
.single-product div.product .product_meta {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
    border-top: 1px solid var(--color-border, #e6e6e6);
    padding-top: 14px;
}

.single-product div.product .product_meta a {
    color: var(--primary-color, #2c3e50);
    text-decoration: none;
}

/* Pestañas (descripción / información adicional / valoraciones) planas. */
.single-product .woocommerce-tabs {
    margin-top: 44px;
}

.single-product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    border-bottom: 2px solid var(--color-border, #e6e6e6);
    display: flex;
    gap: 6px;
}

.single-product .woocommerce-tabs ul.tabs::before {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    color: #666 !important;
    font-weight: 600;
    padding: 12px 18px !important;
    display: inline-block;
    border-bottom: 3px solid transparent;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-color, #2c3e50) !important;
    border-bottom-color: var(--primary-color, #2c3e50);
}

.single-product .woocommerce-tabs .panel {
    padding: 22px 2px !important;
    color: #555;
    line-height: 1.7;
}

.single-product .woocommerce-tabs .panel h2 {
    color: #212224;
    font-weight: 600;
}

/* Relacionados. */
.single-product section.related.products>h2,
.single-product .up-sells>h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #212224;
    font-size: 22px;
    margin-bottom: 18px;
}

/* Fuera sombras/overlays pesados de Divi en la individual. */
.single-product div.product .et_overlay {
    display: none !important;
}

@media (max-width: 820px) {

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary,
    .single-product div.product .entry-summary {
        float: none !important;
        width: 100% !important;
        margin: 0 0 22px 0 !important;
    }
}

/* ===== Disponibilidad, proveedor, empty-states y botón (ficha) ===== */

/* Existencias disponibles ("N disponibles"). */
.single-product div.product .summary .stock,
.single-product div.product .stock.in-stock {
    color: #2e7d32;
    font-weight: 600;
    font-size: 14px;
    margin: 4px 0 14px;
}

/* Proveedor del producto + enlace a su tienda filtrada. */
.wtk-single-provider {
    margin: 16px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border, #e6e6e6);
    font-size: 14px;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.wtk-single-provider-label {
    font-weight: 600;
    color: #212224;
}

.wtk-single-provider-label i {
    color: var(--primary-color, #2c3e50);
    margin-right: 4px;
}

.wtk-single-provider-link {
    color: var(--primary-color, #2c3e50);
    font-weight: 700;
    text-decoration: none;
}

.wtk-single-provider-link:hover {
    text-decoration: underline;
}

.wtk-single-provider-all {
    color: var(--primary-color, #2c3e50);
    text-decoration: none;
    font-size: 13px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wtk-single-provider-all i {
    font-size: 11px;
    transition: transform 0.15s ease;
}

.wtk-single-provider-all:hover i {
    transform: translateX(3px);
}

/* Encabezado de la tienda cuando se filtra por proveedor. */
.wtk-shop-provider-filter {
    background: var(--secondary-color-lightest, #fef3ec);
    border: 1px solid var(--color-border, #e6e6e6);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 22px;
    color: #555;
    font-size: 14px;
}

.wtk-shop-provider-filter strong {
    color: #212224;
}

.wtk-shop-provider-filter a {
    color: var(--primary-color, #2c3e50);
    text-decoration: none;
    font-weight: 600;
}

/* Sección de relacionados VACÍA: mismo espaciado y título que la real. */
.single-product .wtk-related-empty {
    margin-top: 44px;
    clear: both;
}

.single-product .wtk-related-empty>h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #212224;
    font-size: 22px;
    margin-bottom: 18px;
}

/* Botón de la ficha: misma flecha (ETmodules) en hover que el botón del shortcode/cards. */
.single-product div.product form.cart button.single_add_to_cart_button {
    position: relative;
    padding-right: 46px !important;
}

.single-product div.product form.cart button.single_add_to_cart_button::after {
    content: "5";
    /* "→" de la fuente ETmodules de Divi */
    font-family: 'ETmodules' !important;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    opacity: 0;
    transition: opacity 0.2s ease, right 0.2s ease;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover::after {
    opacity: 1;
    right: 14px;
}

/* ===== Ficha: bloque del shortcode [wtk_product_summary] (.wtk-single-footer) ===== */
/* Selector de cantidad y botón "Añadir al carrito" EN LÍNEA (uno al lado del otro). */
.wtk-single-footer .custom-add-to-cart-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Ambos hijos centrados verticalmente entre sí; sin márgenes verticales que los descuadren. */
.wtk-single-footer .custom-add-to-cart-wrapper>.quantity-selector,
.wtk-single-footer .custom-add-to-cart-wrapper>.custom-add-to-cart-btn,
.wtk-single-footer .custom-add-to-cart-wrapper>.button {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wtk-single-footer .custom-add-to-cart-btn {
    width: auto !important;
    flex: 0 1 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    /* el texto NO se parte en 2 líneas */
    min-width: 210px;
    padding: 14px 48px 14px 30px !important;
    /* extra a la DERECHA para que quepa la flecha del hover */
    position: relative;
    overflow: hidden;
}

/* NUESTRA flecha (anula la de Divi, que salía inline en medio del texto): oculta, y en hover entra por
   la derecha, centrada verticalmente. */
.wtk-single-footer .custom-add-to-cart-btn::after {
    content: "5" !important;
    /* "→" de la fuente ETmodules de Divi */
    font-family: 'ETmodules' !important;
    position: absolute !important;
    right: 22px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    opacity: 0;
    transition: opacity 0.2s ease, right 0.2s ease !important;
}

.wtk-single-footer .custom-add-to-cart-btn:hover::after {
    opacity: 1;
    right: 6px !important;
}

/* Metadata: PROVEEDOR a la izquierda, STOCK a la derecha; separado del bloque anterior. */
.wtk-single-footer .product-metadata {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 24px;
}

.wtk-single-footer .product-metadata .proveedor-info {
    order: 1;
    text-align: left;
    margin: 0;
}

.wtk-single-footer .product-metadata .stock-info {
    order: 2;
    text-align: right;
    margin: 0;
    white-space: nowrap;
}