/* ============================================
   CUSTOM STYLES
   ============================================ */

/* Estilos para el título "Filtros" - más pequeño y en mayúsculas */
#product-filters-form h2,
#product-filters-form-desktop h2,
#mobile-filter-drawer h2,
#desktop-filter-sidebar h2 {
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Estilos para "Categorías" - más pequeño */
.filter-progressive-container h3.filter-title,
#product-filters-form h3.filter-title,
#product-filters-form-desktop h3.filter-title,
.filter-progressive-container h3,
#product-filters-form .filter-progressive-container h3,
#product-filters-form-desktop .filter-progressive-container h3 {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* Estilos para "Rango de Precio" - más pequeño */
#product-filters-form .mb-6 h3,
#product-filters-form-desktop .mb-6 h3,
#product-filters-form > div.mb-6 h3,
#product-filters-form-desktop > div.mb-6 h3 {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

/* ============================================
   FOOTER WIDGET TITLES - Estilos consistentes
   ============================================ */

/* Asegurar que los títulos de los widgets del footer tengan un tamaño y estilo consistente
   en todas las páginas (home, tienda, etc.) - Sobrescribe estilos del customizer y WooCommerce */
.background-footer .widget-title,
.background-footer h4.widget-title,
.background-footer .widget h4.widget-title,
.background-footer .widget h4,
.background-footer .widget h3,
footer.background-footer .widget-title,
footer.background-footer h4.widget-title,
footer.background-footer .widget h4.widget-title,
footer.background-footer .widget h4,
footer.background-footer .widget h3,
.woocommerce-page .background-footer .widget-title,
.woocommerce-page .background-footer h4.widget-title,
.woocommerce-page .background-footer .widget h4.widget-title,
.woocommerce-page .background-footer .widget h4,
.woocommerce-page .background-footer .widget h3,
body.woocommerce .background-footer .widget-title,
body.woocommerce .background-footer h4.widget-title,
body.woocommerce .background-footer .widget h4.widget-title,
body.woocommerce .background-footer .widget h4,
body.woocommerce .background-footer .widget h3,
.woocommerce .background-footer .widget-title,
.woocommerce .background-footer h4.widget-title,
.woocommerce .background-footer .widget h4.widget-title,
.woocommerce .background-footer .widget h4,
.woocommerce .background-footer .widget h3 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* Asegurar que los títulos no se vean afectados por estilos globales de h3/h4 del customizer o WooCommerce */
.background-footer .widget h4,
.background-footer .widget h3,
footer.background-footer .widget h4,
footer.background-footer .widget h3,
.woocommerce-page .background-footer .widget h4,
.woocommerce-page .background-footer .widget h3,
body.woocommerce .background-footer .widget h4,
body.woocommerce .background-footer .widget h3,
.woocommerce .background-footer .widget h4,
.woocommerce .background-footer .widget h3 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   FOOTER WORDPRESS BLOCKS (GUTENBERG) - Estilos para bloques wp-block-heading
   ============================================ */

/* Estilos específicos para bloques de WordPress (Gutenberg) en el footer
   Estos son los que se usan en los widgets del footer con bloques */
.background-footer .wp-block-heading,
.background-footer h1.wp-block-heading,
.background-footer h2.wp-block-heading,
.background-footer h3.wp-block-heading,
.background-footer h4.wp-block-heading,
.background-footer h5.wp-block-heading,
.background-footer h6.wp-block-heading,
footer.background-footer .wp-block-heading,
footer.background-footer h1.wp-block-heading,
footer.background-footer h2.wp-block-heading,
footer.background-footer h3.wp-block-heading,
footer.background-footer h4.wp-block-heading,
footer.background-footer h5.wp-block-heading,
footer.background-footer h6.wp-block-heading {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* Específicamente para páginas de WooCommerce (tienda y categorías) 
   Selectores con mayor especificidad para sobrescribir estilos del customizer */
.woocommerce-page .background-footer .wp-block-heading,
.woocommerce-page .background-footer h1.wp-block-heading,
.woocommerce-page .background-footer h2.wp-block-heading,
.woocommerce-page .background-footer h3.wp-block-heading,
.woocommerce-page .background-footer h4.wp-block-heading,
.woocommerce-page .background-footer h5.wp-block-heading,
.woocommerce-page .background-footer h6.wp-block-heading,
body.woocommerce .background-footer .wp-block-heading,
body.woocommerce .background-footer h1.wp-block-heading,
body.woocommerce .background-footer h2.wp-block-heading,
body.woocommerce .background-footer h3.wp-block-heading,
body.woocommerce .background-footer h4.wp-block-heading,
body.woocommerce .background-footer h5.wp-block-heading,
body.woocommerce .background-footer h6.wp-block-heading,
.woocommerce .background-footer .wp-block-heading,
.woocommerce .background-footer h1.wp-block-heading,
.woocommerce .background-footer h2.wp-block-heading,
.woocommerce .background-footer h3.wp-block-heading,
.woocommerce .background-footer h4.wp-block-heading,
.woocommerce .background-footer h5.wp-block-heading,
.woocommerce .background-footer h6.wp-block-heading,
body.post-type-archive-product .background-footer .wp-block-heading,
body.post-type-archive-product .background-footer h1.wp-block-heading,
body.post-type-archive-product .background-footer h2.wp-block-heading,
body.post-type-archive-product .background-footer h3.wp-block-heading,
body.post-type-archive-product .background-footer h4.wp-block-heading,
body.post-type-archive-product .background-footer h5.wp-block-heading,
body.post-type-archive-product .background-footer h6.wp-block-heading,
body.tax-product_cat .background-footer .wp-block-heading,
body.tax-product_cat .background-footer h1.wp-block-heading,
body.tax-product_cat .background-footer h2.wp-block-heading,
body.tax-product_cat .background-footer h3.wp-block-heading,
body.tax-product_cat .background-footer h4.wp-block-heading,
body.tax-product_cat .background-footer h5.wp-block-heading,
body.tax-product_cat .background-footer h6.wp-block-heading,
/* Selectores aún más específicos para sobrescribir .woocommerce h2, .woocommerce-page h2 del customizer */
.woocommerce-page footer.background-footer .wp-block-heading,
.woocommerce-page footer.background-footer h1.wp-block-heading,
.woocommerce-page footer.background-footer h2.wp-block-heading,
.woocommerce-page footer.background-footer h3.wp-block-heading,
.woocommerce-page footer.background-footer h4.wp-block-heading,
.woocommerce-page footer.background-footer h5.wp-block-heading,
.woocommerce-page footer.background-footer h6.wp-block-heading,
body.woocommerce footer.background-footer .wp-block-heading,
body.woocommerce footer.background-footer h1.wp-block-heading,
body.woocommerce footer.background-footer h2.wp-block-heading,
body.woocommerce footer.background-footer h3.wp-block-heading,
body.woocommerce footer.background-footer h4.wp-block-heading,
body.woocommerce footer.background-footer h5.wp-block-heading,
body.woocommerce footer.background-footer h6.wp-block-heading,
.woocommerce footer.background-footer .wp-block-heading,
.woocommerce footer.background-footer h1.wp-block-heading,
.woocommerce footer.background-footer h2.wp-block-heading,
.woocommerce footer.background-footer h3.wp-block-heading,
.woocommerce footer.background-footer h4.wp-block-heading,
.woocommerce footer.background-footer h5.wp-block-heading,
.woocommerce footer.background-footer h6.wp-block-heading {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

/* Sobrescribir clases de tamaño de fuente de WordPress (has-small-font-size, has-medium-font-size, etc.)
   Con alta especificidad para páginas de WooCommerce */
.background-footer .wp-block-heading.has-small-font-size,
.background-footer .wp-block-heading.has-medium-font-size,
.background-footer .wp-block-heading.has-large-font-size,
.background-footer .wp-block-heading.has-x-large-font-size,
.woocommerce-page .background-footer .wp-block-heading.has-small-font-size,
.woocommerce-page .background-footer .wp-block-heading.has-medium-font-size,
.woocommerce-page .background-footer .wp-block-heading.has-large-font-size,
.woocommerce-page .background-footer .wp-block-heading.has-x-large-font-size,
body.woocommerce .background-footer .wp-block-heading.has-small-font-size,
body.woocommerce .background-footer .wp-block-heading.has-medium-font-size,
body.woocommerce .background-footer .wp-block-heading.has-large-font-size,
body.woocommerce .background-footer .wp-block-heading.has-x-large-font-size,
body.post-type-archive-product .background-footer .wp-block-heading.has-small-font-size,
body.post-type-archive-product .background-footer .wp-block-heading.has-medium-font-size,
body.post-type-archive-product .background-footer .wp-block-heading.has-large-font-size,
body.post-type-archive-product .background-footer .wp-block-heading.has-x-large-font-size,
body.tax-product_cat .background-footer .wp-block-heading.has-small-font-size,
body.tax-product_cat .background-footer .wp-block-heading.has-medium-font-size,
body.tax-product_cat .background-footer .wp-block-heading.has-large-font-size,
body.tax-product_cat .background-footer .wp-block-heading.has-x-large-font-size,
/* Selectores aún más específicos para sobrescribir estilos del customizer */
.woocommerce-page footer.background-footer .wp-block-heading.has-small-font-size,
.woocommerce-page footer.background-footer .wp-block-heading.has-medium-font-size,
.woocommerce-page footer.background-footer .wp-block-heading.has-large-font-size,
.woocommerce-page footer.background-footer .wp-block-heading.has-x-large-font-size,
body.woocommerce footer.background-footer .wp-block-heading.has-small-font-size,
body.woocommerce footer.background-footer .wp-block-heading.has-medium-font-size,
body.woocommerce footer.background-footer .wp-block-heading.has-large-font-size,
body.woocommerce footer.background-footer .wp-block-heading.has-x-large-font-size,
.woocommerce footer.background-footer .wp-block-heading.has-small-font-size,
.woocommerce footer.background-footer .wp-block-heading.has-medium-font-size,
.woocommerce footer.background-footer .wp-block-heading.has-large-font-size,
.woocommerce footer.background-footer .wp-block-heading.has-x-large-font-size {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Asegurar que los elementos strong dentro de los títulos también tengan el estilo correcto */
.background-footer .wp-block-heading strong,
.woocommerce-page .background-footer .wp-block-heading strong,
body.woocommerce .background-footer .wp-block-heading strong,
body.post-type-archive-product .background-footer .wp-block-heading strong,
body.tax-product_cat .background-footer .wp-block-heading strong,
.woocommerce-page footer.background-footer .wp-block-heading strong,
body.woocommerce footer.background-footer .wp-block-heading strong,
.woocommerce footer.background-footer .wp-block-heading strong {
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* ============================================
   CART TOGGLE - Color blanco solo para el texto del carrito
   ============================================ */

/* Solo el texto "Carrito" debe ser blanco, el icono mantiene su color original */
.cart-toggle span {
    color: #ffffff !important;
}

.cart-toggle:hover span {
    color: #ffffff !important;
}

/* ============================================
   WOOCOMMERCE LOGIN FORM - Estilos mejorados
   ============================================ */

/* Contenedor principal con barra roja superior */
.woocommerce-login-wrapper {
    min-height: 50vh;
    padding: 3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Barra roja superior */
.woocommerce-login-wrapper::before {
    content: '';
    display: block;
    width: 100vw;
    height: 4px;
    background-color: #B61824;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    margin-left: calc(-50vw + 50%);
}

.woocommerce-login-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Tarjeta del formulario */
.woocommerce-login-card,
.woocommerce-register-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    padding: 2.5rem;
    width: 100%;
}

/* Header del formulario */
.woocommerce-login-header {
    margin-bottom: 2rem;
    text-align: left;
}

.woocommerce-login-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.woocommerce-login-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

/* Campos del formulario */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-form-login label,
.woocommerce-form-register label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.woocommerce-form-login .required,
.woocommerce-form-register .required {
    color: #B61824;
}

.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="email"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-register input[type="text"]:focus,
.woocommerce-form-register input[type="email"]:focus,
.woocommerce-form-register input[type="password"]:focus {
    outline: none;
    border-color: #B61824;
    box-shadow: 0 0 0 3px rgba(182, 24, 36, 0.1);
}

/* Acciones del formulario (checkbox y botón) */
.woocommerce-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.form-row-remember {
    margin: 0;
    flex: 1;
}

.form-row-submit {
    margin: 0;
}

/* Checkbox "Recuérdame" */
.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    margin: 0;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    border: 2px solid #d1d5db;
    border-radius: 0.25rem;
    appearance: none;
    background-color: #ffffff;
    position: relative;
    flex-shrink: 0;
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
    background-color: #B61824;
    border-color: #B61824;
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.woocommerce-form-login__rememberme span {
    user-select: none;
}

/* Botón de acceso */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    background-color: #B61824;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
    background-color: #99141d;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(182, 24, 36, 0.3);
}

.woocommerce-form-login__submit:active,
.woocommerce-form-register__submit:active {
    transform: translateY(0);
}

/* Enlace "¿Olvidaste la contraseña?" */
.woocommerce-LostPassword {
    text-align: center;
    margin: 0;
}

.woocommerce-LostPassword a {
    color: #6b7280;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-LostPassword a:hover {
    color: #B61824;
    text-decoration: underline;
}

/* Layout de dos columnas (login y registro) */
#customer_login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

#customer_login .u-column1,
#customer_login .u-column2 {
    width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .woocommerce-login-wrapper {
        padding: 2rem 1rem;
    }

    .woocommerce-login-card,
    .woocommerce-register-card {
        padding: 2rem 1.5rem;
    }

    .woocommerce-login-title {
        font-size: 1.75rem;
    }

    .woocommerce-login-subtitle {
        font-size: 1.5rem;
    }

    .woocommerce-login-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-row-remember {
        margin-bottom: 1rem;
    }

    .form-row-submit {
        width: 100%;
    }

    .woocommerce-form-login__submit,
    .woocommerce-form-register__submit {
        width: 100%;
    }

    #customer_login {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Mensajes de error y éxito */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    border-left: 4px solid;
}

.woocommerce-error {
    background-color: #fef2f2;
    border-left-color: #dc2626;
    color: #991b1b;
}

.woocommerce-info {
    background-color: #eff6ff;
    border-left-color: #2563eb;
    color: #1e40af;
}

.woocommerce-message {
    background-color: #f0fdf4;
    border-left-color: #16a34a;
    color: #15803d;
}

/* ============================================
   PRODUCT TOTAL PRICE - Reducir tamaño
   ============================================ */

/* Reducir tamaño del precio total en página de producto */
body.single-product .total-price {
    font-size: 0.875rem !important;
}

body.single-product .total-price .total-amount {
    font-size: 0.875rem !important;
}

/* ============================================
   PRODUCT GRID - Soporte para div.products con article
   ============================================ */

/* Asegurar que el grid funcione correctamente con div.products y article.product
   Esto corrige el problema donde la última fila no se completa en páginas de categorías */
.woocommerce div.products,
.woocommerce-page div.products,
.site-main .woocommerce div.products,
.site-main .woocommerce-page div.products,
.flex-1 .woocommerce div.products,
.flex-1 .woocommerce-page div.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Grid de 2 columnas en pantallas pequeñas (sm) - 640px+ */
@media (min-width: 640px) {
    .woocommerce div.products,
    .woocommerce-page div.products,
    .site-main .woocommerce div.products,
    .site-main .woocommerce-page div.products,
    .flex-1 .woocommerce div.products,
    .flex-1 .woocommerce-page div.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Grid de 3 columnas en pantallas grandes (lg) - 1024px+ */
@media (min-width: 1024px) {
    .woocommerce div.products,
    .woocommerce-page div.products,
    .site-main .woocommerce div.products,
    .site-main .woocommerce-page div.products,
    .flex-1 .woocommerce div.products,
    .flex-1 .woocommerce-page div.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Grid de 4 columnas en pantallas extra grandes (xl) - 1280px+ */
@media (min-width: 1280px) {
    .woocommerce div.products,
    .woocommerce-page div.products,
    .site-main .woocommerce div.products,
    .site-main .woocommerce-page div.products,
    .flex-1 .woocommerce div.products,
    .flex-1 .woocommerce-page div.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Asegurar que los artículos dentro del grid tengan el mismo comportamiento que los li */
.woocommerce div.products article.product,
.woocommerce-page div.products article.product,
.site-main .woocommerce div.products article.product,
.site-main .woocommerce-page div.products article.product,
.flex-1 .woocommerce div.products article.product,
.flex-1 .woocommerce-page div.products article.product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    align-self: stretch !important;
}

/* Asegurar que el contenedor flex-1 tenga el ancho correcto */
.flex-1 {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Forzar que el grid ocupe todo el ancho disponible */
.site-main .flex-1 .woocommerce div.products,
.site-main .flex-1 .woocommerce-page div.products,
.container .flex-1 .woocommerce div.products,
.container .flex-1 .woocommerce-page div.products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Asegurar que el contenedor flex con gap no limite el espacio */
.flex.gap-8 {
    width: 100% !important;
    min-width: 0 !important;
}

/* ============================================
   HEADER LOGO - Aumentar tamaño
   ============================================ */

/* Aumentar el tamaño del logo del header */
.site-logo img,
.site-logo .h-10 {
    height: 4rem !important; /* 64px - aumentado desde 2.5rem (40px) */
    max-height: 5rem !important; /* 80px - aumentado desde 3.5rem (56px) */
    width: auto !important;
}

/* Asegurar que el logo se vea bien en diferentes tamaños de pantalla */
@media (min-width: 1024px) {
    .site-logo img,
    .site-logo .h-10 {
        height: 3.5rem !important; /* 72px en pantallas grandes */
        max-height: 5rem !important; /* 88px en pantallas grandes */
    }
}

/* Asegurar que el grid tenga auto-fill para completar las filas */
.woocommerce div.products,
.woocommerce-page div.products,
body.tax-product_cat .woocommerce div.products,
body.tax-product_cat .woocommerce-page div.products,
body.post-type-archive-product .woocommerce div.products,
body.post-type-archive-product .woocommerce-page div.products {
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

/* Asegurar que los artículos del grid tengan el ancho correcto y se distribuyan uniformemente */
.woocommerce div.products article.product,
.woocommerce-page div.products article.product,
body.tax-product_cat .woocommerce div.products article.product,
body.tax-product_cat .woocommerce-page div.products article.product,
body.post-type-archive-product .woocommerce div.products article.product,
body.post-type-archive-product .woocommerce-page div.products article.product {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
}

/* Estilos específicos para páginas de categorías */
body.tax-product_cat .woocommerce div.products,
body.tax-product_cat .woocommerce-page div.products {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    body.tax-product_cat .woocommerce div.products,
    body.tax-product_cat .woocommerce-page div.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    body.tax-product_cat .woocommerce div.products,
    body.tax-product_cat .woocommerce-page div.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    body.tax-product_cat .woocommerce div.products,
    body.tax-product_cat .woocommerce-page div.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Aplicar los mismos estilos de botones y precios a la nueva estructura */
.woocommerce div.products article.product .button,
.woocommerce-page div.products article.product .button {
    background: var(--button-bg, var(--color-primary, #2563eb)) !important;
    color: var(--button-text, #ffffff) !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.woocommerce div.products article.product .button:hover,
.woocommerce-page div.products article.product .button:hover {
    background: var(--button-hover-bg, var(--color-secondary, #1e40af)) !important;
    color: var(--button-hover-text, #ffffff) !important;
}

.woocommerce div.products article.product .price,
.woocommerce-page div.products article.product .price {
    background: transparent !important;
    color: var(--primary-color, #2563eb) !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
}

.woocommerce div.products article.product .price span,
.woocommerce-page div.products article.product .price span {
    background: transparent !important;
    color: inherit !important;
}

/* Product card price (home sections) */
.product-card-price {
    color: #dc2626;
    font-weight: 700;
    font-size: 1.125rem;
}

.product-card-price .woocommerce-Price-amount {
    color: inherit;
}

.product-card-price del {
    color: #9ca3af;
    font-weight: 500;
    font-size: 0.875rem;
    margin-left: 0.5rem;
    text-decoration: line-through;
    display: inline-block;
}

.product-card-price ins {
    color: #dc2626;
    text-decoration: none;
    display: inline-block;
}

/* Single product: feedback inline en boton de carrito */
body.single-product form.cart .single_add_to_cart_button.is-added,
body.single-product .single_add_to_cart_button.is-added,
.single-product form.cart .single_add_to_cart_button.is-added,
.woocommerce .single-product .single_add_to_cart_button.is-added,
.woocommerce-page .single_add_to_cart_button.is-added {
    background: #059669 !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 18px rgba(5, 150, 105, 0.25) !important;
}

body.single-product form.cart .single_add_to_cart_button.is-added:hover,
body.single-product .single_add_to_cart_button.is-added:hover,
.single-product form.cart .single_add_to_cart_button.is-added:hover,
.woocommerce .single-product .single_add_to_cart_button.is-added:hover,
.woocommerce-page .single_add_to_cart_button.is-added:hover {
    background: #047857 !important;
    background-color: #047857 !important;
    border-color: #047857 !important;
    box-shadow: 0 8px 18px rgba(4, 120, 87, 0.28) !important;
}