/* Estilos para productos WooCommerce */
.product-card {
    position: relative;
    background: var(--color-white);
    transition: all 0.3s ease;
}

.product-card:hover {
    box-shadow: var(--shadow-md);
}

/* Imagen del producto */
.product-card .card-image {
    position: relative;
    padding-top: 100%; /* Proporción cuadrada */
    overflow: hidden;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.product-card .card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .card-image img {
    transform: scale(1.05);
}

/* Badges */
.out-of-stock-badge,
.sale-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    z-index: 1;
}

.out-of-stock-badge {
    background: var(--color-text);
    color: var(--color-white);
}

.sale-badge {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Contenido de la card */
.product-card .card-content {
    padding: var(--spacing-md);
}

/* Categorías */
.product-categories {
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

.product-categories a {
    color: var(--color-text-light);
    text-decoration: none;
}

.product-categories a:hover {
    color: var(--color-primary);
}

/* Título del producto */
.product-card .card-title {
    font-size: 1.1rem;
    margin: var(--spacing-xs) 0;
    line-height: 1.3;
}

.product-card .card-title a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-card .card-title a:hover {
    color: var(--color-secondary);
}

/* Precio */
.product-price {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: var(--font-bold);
    margin: var(--spacing-sm) 0;
}

.product-price del {
    color: #DAA520;
    font-size: 0.9rem;
    margin-right: var(--spacing-xs);
}

.product-price ins {
    text-decoration: none;
    color: var(--color-accent);
}

/* Botón añadir al carrito */
.add-to-cart-btn {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    font-size: 1rem;
}

/* Listas de productos */
.products {
    display: grid;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

/* Variaciones de productos */
.grid-2 .products {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 .products {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 .products {
    grid-template-columns: repeat(4, 1fr);
}

/* Media Queries */
@media (max-width: 992px) {
    .grid-4 .products {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce div.product form.cart .button {
        width: 100%;
        text-align: center;
        margin-top: var(--spacing-sm);
        background-color: var(--color-primary);
        color: var(--color-white);
        border-radius: var(--border-radius);
        padding: var(--spacing-sm) var(--spacing-md);
        font-family: var(--font-titles);
        font-weight: var(--font-medium);
        font-size: 1.3rem;
        line-height: 1.5;
        transition: all 0.3s ease;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .grid-3 .products,
    .grid-4 .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .products {
        grid-template-columns: 1fr;
    }
    
    .product-card .card-content {
        padding: var(--spacing-sm);
    }
}

/* Soporte para lista/grilla */
.products-list .product-card {
    display: grid;
    grid-template-columns: 300px 1fr;
}

.products-list .card-image {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

@media (max-width: 768px) {
    .products-list .product-card {
        grid-template-columns: 1fr;
    }
    
    .products-list .card-image {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 60px;
}


/* Estilos Single Product WooCommerce */

/* Layout Principal */
.single-product div.product {
    padding-top: 0px; /* Espacio para header fijo */
}

/* Container */
.single-product .product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 ;
}

/* Imagen y Sumario */
.single-product div.images {
    float: left;
    width: 48% !important;
    margin-bottom: var(--spacing-lg);
}

.single-product div.summary {
    float: right;
    width: 48% !important;
    margin-bottom: var(--spacing-lg);
}

/* Galería */
.woocommerce-product-gallery {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
}

.woocommerce-product-gallery__image {
    margin-bottom: var(--spacing-sm);
}

.woocommerce-product-gallery__image img {
    border-radius: var(--border-radius);
}

/* Miniaturas */
.flex-control-thumbs {
    margin: var(--spacing-sm) -5px 0 !important;
    padding: 0;
}

.flex-control-thumbs li {
    padding: 0 5px;
    margin-bottom: 10px !important;
}

.flex-control-thumbs img {
    border-radius: var(--border-radius);
    border: 2px solid transparent;
}

.flex-control-thumbs img.flex-active {
    border-color: var(--color-primary);
}

/* Título y Precio */
.single-product .product_title {
    font-family: var(--font-titles);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.single-product p.price {
    font-size: 1.5rem !important;
    color: var(--color-primary) !important;
    margin: var(--spacing-md) 0 !important;
}

/* Variaciones */
.variations_form {
    margin-top: var(--spacing-md);
}

.variations {
    margin-bottom: var(--spacing-md) !important;
}

.variations td {
    padding: var(--spacing-xs) 0;
    border: none;
}

.variations label {
    font-weight: var(--font-medium);
}

.variations select {
    width: 100%;
    padding: var(--spacing-xs);
    border: 1px solid var(--color-background-alt);
    border-radius: var(--border-radius);
}

/* Cantidad y Botón */
.quantity {
    margin-right: var(--spacing-md) !important;
}

.quantity .qty {
    padding: var(--spacing-xs);
    border: 1px solid var(--color-background-alt);
    border-radius: var(--border-radius);
}



.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1rem;
    font-size: 1.3rem;
    display: inline-block;
    width: 80%;
    max-width: 100%;
    font-size: 1.4rem;
    padding: 10px;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:hover{
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.4rem;
    padding: 10px;
    display: inline-block;
    width: 80%;
    max-width: 100%;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: var(--color-primary);

}

.header-cart, .header-cart a, .header-cart span  {
    color: #fff;
}

/* Pestañas */
.woocommerce-tabs {
    clear: both;
    padding: var(--spacing-xl) 0;
    width: 100%;
}

.woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0 !important;
    margin: 0 0 var(--spacing-md) !important;
    border-bottom: 2px solid var(--color-primary);
}

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

.woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    margin: 0 var(--spacing-md) 0 0 !important;
    padding: 0 !important;
}

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

.woocommerce-tabs ul.tabs li a {
    padding: var(--spacing-sm) 0 !important;
    font-weight: var(--font-medium) !important;
    color: var(--color-text-light) !important;
    border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .panel {
    padding: var(--spacing-md) 0;
    margin: 0 !important;
}

.woocommerce-tabs .panel h2:first-of-type {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

/* Productos Relacionados */
.related.products {
    clear: both;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-background-alt);
}

.related.products > h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
}

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

.related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .single-product div.images,
    .single-product div.summary {
        float: none;
        width: 100% !important;
    }

    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .related.products ul.products {
        grid-template-columns: 1fr;
    }
}


.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
    content: " ";
    display: none;
}

/* Productos Relacionados */
.related.products {
    clear: both;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-background-alt);
}

.related.products > h2 {
    text-align: center;
    font-family: var(--font-titles);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    position: relative;
}

.related.products > h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: var(--color-accent);
}

/* Grid de productos */
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Card de producto */
.related.products ul.products li.product {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);

}

/* Imagen del producto */
.related.products li.product a img {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    margin: 0 0 var(--spacing-sm) 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Título del producto */
.related.products ul.products li.product h2,
.related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-titles);
    font-size: 1.1rem !important;
    color: var(--color-primary);
    padding: 0 !important;
    margin: 0 0 var(--spacing-xs) 0;
}

/* Precio */
.related.products ul.products li.product .price {
    color: var(--color-primary) !important;
    font-size: 1.2rem !important;
    font-weight: var(--font-bold);
    margin: var(--spacing-xs) 0;
}

.related.products ul.products li.product .price del {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-right: var(--spacing-xs);
    opacity: 0.7;
}

.related.products ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--font-bold);
    color: var(--color-accent);
}

/* Botón añadir al carrito */
.related.products ul.products li.product .button {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
}

/* Badges */
.related.products ul.products li.product .onsale {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-accent);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    min-height: auto;
    min-width: auto;
    line-height: 1.5;
    margin: 0;
}

/* Badge de oferta */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-accent);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: var(--font-medium);
    min-height: auto;
    min-width: auto;
    line-height: 1.5;
    margin: 0;
}


/* Media Queries */
@media (max-width: 992px) {
    .related.products ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 576px) {
    .related.products ul.products {
        grid-template-columns: 1fr;
    }
    
    .related.products ul.products li.product {
        max-width: 100%;
    }
}

/* Layout Base */
.tax-product_cat .site-content {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 var(--spacing-md);
    display: flex;
    gap: var(--spacing-lg);
    padding: 0;
}

.product-template-default .site-content {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 var(--spacing-md);
    display: flex;
    gap: var(--spacing-lg);
    padding: 0;
}




/* Content Area */
.tax-product_cat .content-area {
    width: calc(100% - 280px - var(--spacing-lg));
}


@media (max-width: 770px) {
    .tax-product_cat .content-area {
        width: auto;
    }
    
}


/* Sidebar */
#content #sidebar {
    width: 280px;
    background: var(--color-white);
    padding: var(--spacing-md);
    height: fit-content;
    margin-top: 20px;
    position: sticky;
    top: 120px;

}

#content #sidebar .widget {
    margin-bottom: var(--spacing-lg);
    margin-top: 25px;
}

#content #sidebar .widget:last-child {
    margin-bottom: 0;
}

#content #sidebar h2 {
    font-family: var(--font-titles);
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-accent);
}

#content #sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content #sidebar ul li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#content #sidebar ul li:last-child {
    border-bottom: none;
}

#sidebar a {
    color: var(--color-text);
    text-decoration: none;
}

#sidebar a:hover {
    color: var(--color-primary);
}


/* Products Grid */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100% !important;
}

/* Product Card */
.woocommerce ul.products li.product {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}

/* Media Queries */
@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}



@media (max-width: 576px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .site-content {
        padding: 0 var(--spacing-sm);
    }
}

/* Precio */
.woocommerce ul.products li.product .price {
    color: var(--color-primary) !important;
    font-size: 1.2rem !important;
    font-weight: var(--font-bold);
    margin: var(--spacing-xs) 0;
}

.woocommerce ul.products li.product .price del {
    color:var(--color-primary);
    font-size: 0.9rem;
    margin-right: var(--spacing-xs);
    opacity: 1;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--font-bold);
    color: var(--color-accent);
}

/* Botón añadir al carrito */
.woocommerce ul.products li.product .button {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
    display: block;
}



/* Estilo general del mensaje "Added to cart" */
.woocommerce-message {
    position: fixed;
    top: 80px; /* Ajusta según el header fijo */
    right: 20px;
    z-index: 9999;
    background-color: #007cba;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 1.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
}

.woocommerce-message.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Botón "Ver carrito" */
.woocommerce-message .wc-forward {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #fff;
    color: #007cba;
    border: 1px solid #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.woocommerce-message .wc-forward:hover {
    background-color: #005a8c;
    color: #fff;
}

/* Animación para ocultar el mensaje después de unos segundos */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.woocommerce-message.auto-hide {
    animation: fadeOut 5s forwards;
}



.quantity .qty {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color
}


/* Contenedor general de notificaciones */
.woocommerce-notices-wrapper {
    margin: 20px 0;
}

/* Estilo de los errores (woocommerce-error) */
.woocommerce-error {
    background-color: #fce4e4;
    color: #d9534f;
    border: 1px solid #d9534f;
    border-radius: 8px;
    padding: 15px 20px;
    list-style: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}


/* Estilo para los ítems dentro de la lista */
.woocommerce-error li {
    margin: 0;
    padding-left: 20px;
}

/* Ajuste para dispositivos pequeños */
@media (max-width: 768px) {
    .woocommerce-error {
        font-size: 13px;
        padding: 10px 15px;
    }
}

.woocommerce-error li, .woocommerce-info li, .woocommerce-message li {
    list-style: none outside !important;
    padding-left: 20px !important;
    margin-left: 0 !important;
}


/* Asegurarse de que los productos recientes tengan un diseño uniforme */
.products-recent .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre los productos */
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* Estilo para cada producto */
.products-recent .woocommerce ul.products li.product {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    position: relative;
}

.products-recent .woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Ajustar para pantallas pequeñas */
@media (max-width: 768px) {
    .products-recent .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
}

@media (max-width: 480px) {
    .products-recent .woocommerce ul.products {
        grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
    }
}


.woocommerce ul.products li.product a img {
    border-radius: 10px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 0 1em;
    box-shadow: none;
    margin: auto;
}



.related.products ul.products li.product h2, .related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-titles);
    font-size: 1.3rem !important;
    color: var(--color-primary);
    padding: 0 !important;
    margin: 0 0 var(--spacing-xs) 0;
}

.woocommerce ul.products li.product .button {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
}



/* WooCommerce Overrides */
.woocommerce ul.products li.product {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product h2 {
    font-family: var(--font-titles);
    font-size: 1.3rem !important;
    padding: var(--spacing-sm) 0 !important;
}


@media (max-width: 576px) {
    
.woocommerce ul.products li.product h2 {
    font-family: var(--font-titles);
    font-size: 1.5rem !important;
    padding: var(--spacing-sm) 0 !important;
}
}


.is-large .wc-block-checkout__sidebar {
    align-self: flex-start;
    top: 120px;
}

.search-submit, .wc-block-components-button {
    font-size: 1.3rem;
}


fieldset {
    display: block;
    min-inline-size: min-content;
    margin-inline: 2px;
    border-width: 0px;
    border-style: groove;
    border-color: threedface;
    border-image: initial;
    padding: 0;
}



/* Títulos de página */
.woocommerce-page .entry-title,
.woocommerce-products-header__title {
    font-family: var(--font-titles);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    position: relative;
}

.woocommerce-page .entry-title::after,
.woocommerce-products-header__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--color-accent);
}


/* Página Mi Cuenta */
.woocommerce-account .woocommerce {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 280px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    padding: var(--spacing-sm) 0;
    display: block;
    color: var(--color-text);
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--color-primary);
    font-weight: var(--font-bold);
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: calc(100% - 280px - var(--spacing-lg)) !important;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}



/* Página de Carrito */
.woocommerce-cart .woocommerce {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}

.woocommerce-cart table.cart {
    border: none;
    margin-bottom: var(--spacing-lg);
}

.woocommerce-cart table.cart th {
    background: var(--color-background-alt);
    padding: var(--spacing-sm);
    font-family: var(--font-titles);
    color: var(--color-primary);
}

.woocommerce-cart table.cart td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.woocommerce-cart table.cart img {
    width: 80px;
    border-radius: var(--border-radius);
}

.woocommerce-cart table.cart .product-remove a {
    color: var(--color-text-light) !important;
}

.woocommerce-cart .cart-collaterals {
    background: var(--color-background-alt);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.woocommerce-cart .cart-collaterals h2 {
    font-family: var(--font-titles);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

/* Botones */
.woocommerce-page .button {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-family: var(--font-titles);
    font-weight: var(--font-medium) !important;
    text-transform: none !important;
}

.woocommerce-page .button:hover {
    background: var(--color-accent) !important;
    color: var(--color-primary-dark) !important;
}

/* Formularios */
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
    padding: var(--spacing-sm);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

/* Mensajes */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: var(--color-white);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-lg) !important;
}

/* Página de Tienda */
.woocommerce-shop .site-content {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 var(--spacing-md);
    display: flex;
    gap: var(--spacing-lg);
    padding: 0;
}

.woocommerce-shop #sidebar {
    width: 280px;
    background: var(--color-white);
    padding: var(--spacing-md);
    height: fit-content;
    margin-top: 20px;
    position: sticky;
    top: 120px;
}

.woocommerce-shop .content-area {
    width: calc(100% - 280px - var(--spacing-lg));
}

.woocommerce-shop .site-content {
  
}



/* Media Queries */
@media (max-width: 768px) {
    .woocommerce-shop .site-content {
        flex-direction: column;
    }

    .woocommerce-shop #sidebar,
    .woocommerce-shop .content-area {
        width: 100%;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none;
        margin-bottom: var(--spacing-lg);
    }

    .woocommerce-cart table.cart td.actions .coupon {
        float: none;
        padding-bottom: var(--spacing-sm);
    }
}


.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
    font-family: WooCommerce;
    content: "";
    content: "" / "";
    display: inline-block;
    position: absolute;
    top: 1em;
    left: 1.5em;
}

.woocommerce-account .addresses .title .edit {
    float: none;
    padding: 10px;
    padding-left: 0;
    display: block;
}

.woocommerce-Address-title title {
    margin-bottom: 10px;
}

.wc-block-cart__submit-container{
    transition: all 0.3s ease;

}

.wc-block-cart__submit-container a {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
    transition: all 0.3s ease;

}

.wc-block-cart__submit-container a:hover {
    background: var(--color-accent) !important;
    color: var(--color-primary-dark) !important;
    transition: all 0.3s ease;

}

.woocommerce ul.products li.product .button {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}


.woocommerce ul.products li.product .button:hover {
    background: var(--color-accent) !important;
    color: var(--color-primary-dark) !important;
    transition: all 0.3s ease;
}

.reset_variations {
    display: none!important;
}


.woocommerce .woocommerce-breadcrumb {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0;
}

.woocommerce .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    padding-top: 10px!important;
    padding-bottom: 20px!important;
}

.woocommerce-notices-wrapper {
    display: none;
}

.woocommerce div.product form.cart .button {
    width: auto;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem;
    line-height: 1.5;
    transition: all 0.3s ease;
    margin-top: 0;
}

.quantity .qty {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color;
    padding: 10px;
}


/* Añade este código en tu archivo de estilos CSS */

/* Ocultar el spinner original de WooCommerce */
.add_to_cart_button.loading::after {
    display: none !important;
}

/* Nuevo spinner personalizado */
.add_to_cart_button.loading::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background-color: var(--color-primary);

    border-top-color: #ffffff;
    animation: spinner .8s linear infinite;
    -webkit-animation: spinner .8s linear infinite;
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
}

/* Asegurar que el texto se oculte durante la carga */
.add_to_cart_button.loading {
    color: transparent !important;
    pointer-events: none;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.loading, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.loading, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.loading, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.loading, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.loading, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.loading, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.loading {
    opacity: 1;
    padding-right: 2.618em;
}


.wc-block-grid__products li {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-titles);
    font-weight: var(--font-medium);
    font-size: 1.3rem!important;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.wc-block-grid__product .wc-block-grid__product-image:not(.wc-block-components-product-image), .wc-block-grid__product .wc-block-grid__product-title {
    font-family: var(--font-titles);
    font-size: 1.3rem !important;
    padding: var(--spacing-sm) 0 !important;
    text-align: left;
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart, .wc-block-grid__product .wc-block-grid__product-onsale, .wc-block-grid__product .wc-block-grid__product-price, .wc-block-grid__product .wc-block-grid__product-rating {
    color: var(--color-primary) !important;
    font-size: 1.2rem !important;
    font-weight: var(--font-bold);
    margin: var(--spacing-xs) 0;
    text-align: left;


}

.wc-block-grid__products {
    background-clip: padding-box;
    display: flex;
    flex-wrap: nowrap!important;
    padding: 0;
    gap: 20px;
}

.wc-block-grid .wc-block-grid__product-onsale, .wc-block-grid__product-image .wc-block-grid__product-onsale {
    position: absolute!important;
    top: var(--spacing-sm)!important;
    right: var(--spacing-sm)!important;
    background: var(--color-accent)!important;
    border-color: var(--color-accent)!important;
    color: var(--color-white)!important;
    padding: var(--spacing-xs) var(--spacing-sm)!important;
    border-radius: var(--border-radius)!important;
    font-size: 0.8rem!important;
    font-weight: var(--font-medium)!important;
    min-height: auto!important;
    min-width: auto!important;
    line-height: 1.5!important;
    margin: 0!important;
}


.woocommerce-cart .bg-background-alt {
    background: transparent!important;
}

.wc-block-components-button:not(.is-link).outlined{
    border-color: var(--color-accent)!important;
    color: var(--color-accent)!important;
    transition: all 0.3s ease;


}

.wc-block-components-button:not(.is-link).outlined:active, .wc-block-components-button:not(.is-link).outlined:disabled, .wc-block-components-button:not(.is-link).outlined:focus, .wc-block-components-button:not(.is-link).outlined:hover {
    background-color: var(--color-accent)!important;
    color: var(--color-primary)!important;
    border-color: var(--color-accent)!important;
    transition: all 0.3s ease;
    


}



.woocommerce-page .site-main{
    margin: 0px auto 0;

}

.woocommerce div.product div.images img {
    display: block;
    height: auto;
    width: auto;
    box-shadow: none;
    text-align: center;
    margin: auto;
}

.woocommerce span.onsale {
    background-color: #d49c0e;

}


/* Media Queries */
@media (max-width: 1024px) {
   

    .woocommerce div.product form.cart .button {
        width: 100%;
        text-align: center;
        margin-top: var(--spacing-sm);
        background-color: var(--color-primary);
        color: var(--color-white);
        border-radius: var(--border-radius);
        padding: var(--spacing-sm) var(--spacing-md);
        font-family: var(--font-titles);
        font-weight: var(--font-medium);
        font-size: 1.3rem;
        line-height: 1.5;
        transition: all 0.3s ease;
        margin-top: 0;
    }

    .woocommerce-page .site-main{
        margin: 0px auto 0;
        padding: 10px;
        padding-top: 0px;
        margin-top: 0px;
    }

    .woocommerce .woocommerce-breadcrumb {
        margin: 0;
        padding: 0;
        margin-top: 0px;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .tax-product_cat .site-content {
       padding-left: 10px!important;
        padding-right: 10px!important;
    }

    .woocommerce-shop .site-main {
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
}