/* ============================================
   WOOCOMMERCE SHOP STYLES - SIGUIENDO PRINCIPIOS DE DISEÑO
   ============================================ */

/* Shop Page Container - Ancho más estrecho */
.woocommerce .site-main {
    width: 100%;
}

.woocommerce-shop #main {
    padding: var(--space-lg) 0;
}

/* Ajustar espaciado del contenedor principal */
.woocommerce-shop .site-main {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.woocommerce .woocommerce-products-header,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce .products {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Shop Header - Ocultar título gigante DEFINITIVAMENTE */
.woocommerce .woocommerce-products-header,
.woocommerce .woocommerce-products-header__title,
.woocommerce-shop .page-title,
.woocommerce h1.page-title,
body.woocommerce-shop h1 {
    display: none !important;
}

/* Breadcrumb - Asegurar que se muestre */
.woocommerce .woocommerce-breadcrumb {
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-small);
    color: var(--color-secondary);
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-secondary);
    text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-text);
}

/* Shop Controls */
.woocommerce .woocommerce-notices-wrapper {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Layout mejorado para result count y ordering - FLEX CORRECTAMENTE */
.woocommerce .woocommerce-result-count {
    font-size: var(--font-size-body) !important;
    color: var(--color-secondary) !important;
    margin: 0 !important;
    flex: 1 !important;
}

.woocommerce .woocommerce-ordering {
    margin: 0 !important;
    text-align: right !important;
}

/* Contenedor que los pone en la misma línea */
.woocommerce .woocommerce-result-count+.woocommerce-ordering {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: var(--space-xl) !important;
    gap: var(--space-md) !important;
}

.woocommerce .orderby {
    padding: var(--space-sm);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-bg);
    font-family: var(--font-stack);
    font-size: var(--font-size-body);
    color: var(--color-text);
    border-radius: 0;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L2 5h8l-4 4z" fill="%23111"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    padding-right: calc(var(--space-lg) + 12px);
}

.woocommerce .orderby:focus {
    outline: none;
    border-color: var(--color-text);
    border-width: 2px;
    padding: calc(var(--space-sm) - 1px);
    padding-right: calc(var(--space-lg) + 11px);
}

/* Result Count */
.woocommerce .woocommerce-result-count {
    color: var(--color-secondary);
    font-size: var(--font-size-body);
    margin-bottom: var(--space-lg);
}

/* Products Container - SIN centrar, alineación normal */
.woocommerce .products {
    text-align: left;
    margin-top: var(--space-xl) !important;
}

/* Override solo estilos básicos de productos */
.woocommerce ul.products li.product {
    background: none !important;
    border: none !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    gap: var(--space-sm) !important;
    min-height: 100% !important;
    height: 100% !important;
}

/* Product Link Container - Uso grid para organizar contenido interno */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "image image"
        "title price"
        "rating price" !important;
    gap: var(--space-xs) !important;
    text-decoration: none !important;
    position: relative !important;
    color: inherit !important;
}

/* Image dentro del link */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    grid-area: image !important;
    transition: opacity var(--transition-fast) !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    grid-area: title !important;
    margin: 0 !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-tight) !important;
}

/* Price - Contenedor que ocupa toda el área de precio */
.woocommerce ul.products li.product .price {
    grid-area: price !important;
    margin: 0 !important;
    text-align: right !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 3rem !important;
    max-width: 120px !important;
}

/* Star Rating - Reducir espaciado con título */
.woocommerce ul.products li.product .star-rating {
    grid-area: rating !important;
    margin: 0 !important;
    padding-top: var(--space-xs) !important;
}

/* Buttons - Fuera del link, al final del contenedor */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    margin-top: auto !important;
    align-self: stretch !important;
}

.woocommerce ul.products li.product:hover img {
    opacity: 0.9 !important;
}

/* Sale Badge - SIMPLIFICADO Y FUNCIONAL */
.woocommerce ul.products li.product span.onsale {
    position: absolute !important;
    top: var(--space-sm) !important;
    right: var(--space-sm) !important;
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: var(--font-size-overline) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    border-radius: 0 !important;
    z-index: 10 !important;
    line-height: 1.2 !important;
    font-family: var(--font-stack) !important;
    text-indent: 0 !important;
}

/* Eliminar contenido por defecto y poner el nuestro */
.woocommerce ul.products li.product span.onsale {
    font-size: 0 !important;
}

.woocommerce ul.products li.product span.onsale::after {
    content: "¡OFERTA!" !important;
    font-size: var(--font-size-overline) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* Out of Stock - Estilo especial */
.woocommerce ul.products li.product.outofstock .button {
    background: var(--color-secondary) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-secondary) !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* Price regular (sin descuento) - MÁS GRANDE cuando no hay descuento */
.woocommerce ul.products li.product .price:not(:has(del)) .woocommerce-Price-amount {
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text) !important;
    line-height: 1.3rem !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Price regular sin descuento - El contenedor padre se centra verticalmente */
.woocommerce ul.products li.product .price:not(:has(del)) {
    justify-content: center !important;
    align-self: center !important;
}

/* Precio con descuento - Del (original) ocupa 1/3 */
.woocommerce ul.products li.product .price del {
    order: 1 !important;
    color: var(--color-secondary) !important;
    margin: 0 !important;
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-normal) !important;
    text-decoration: line-through !important;
    line-height: 1.2rem !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Precio con descuento - Ins (rebajado) ocupa 2/3 */
.woocommerce ul.products li.product .price ins {
    order: 2 !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text) !important;
    line-height: 1.2rem !important;
}

/* Wrapper para alinear botones - ya definido arriba */

/* Add to Cart Buttons - Alineados al final */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
    width: 100% !important;
    padding: var(--space-sm) var(--space-md) !important;
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    border: var(--border-width) solid var(--color-text) !important;
    font-size: var(--font-size-overline) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-stack) !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

/* Icono de carrito en botones */
.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product .add_to_cart_button::before {
    content: "\f07a" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: var(--space-xs) !important;
    font-size: 12px !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: transparent !important;
    color: var(--color-text) !important;
    border-color: var(--color-text) !important;
}

.woocommerce ul.products li.product .button:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Loading state */
.woocommerce ul.products li.product .button.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Variable product button */
.woocommerce ul.products li.product .button.product_type_variable {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.woocommerce ul.products li.product .button.product_type_variable:hover {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* Out of stock */
.woocommerce ul.products li.product .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-border);
    color: var(--color-secondary);
    /* border-color: var(--color-border); */
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
    max-width: var(--container-max);
    margin: var(--space-xxl) auto 0;
    padding: 0 var(--container-padding);
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination .page-numbers:hover,
.woocommerce nav.woocommerce-pagination .page-numbers.current {
    color: var(--color-bg);
}

.woocommerce nav.woocommerce-pagination .page-numbers.current {
    color: var(--color-bg);
    background: var(--color-text);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .woocommerce .woocommerce-ordering {
        text-align: left;
        margin-bottom: var(--space-md);
    }

    /* Reduce all price sizes to 60% of desktop size */
    .woocommerce ul.products li.product .price:not(:has(del)) .woocommerce-Price-amount {
        font-size: calc(var(--font-size-h2) * 0.6) !important;
        font-weight: bold !important;
    }

    .woocommerce ul.products li.product .price del .woocommerce-Price-amount {
        font-size: calc(var(--font-size-body) * 0.6) !important;
    }

    .woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
        font-size: calc(var(--font-size-h3) * 0.6) !important;
        font-weight: bold !important;
    }

    /* Adjust price container height for smaller text */
    .woocommerce ul.products li.product .price {
        min-height: 2rem !important;
    }

    /* Reduce product title size to 70% in mobile for better proportion */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: calc(var(--font-size-h3) * 0.7) !important;
        line-height: 1.2 !important;
    }

    /* Adjust button size for mobile */
    .woocommerce ul.products li.product .button {
        padding: var(--space-sm) var(--space-md) !important;
        font-size: calc(var(--font-size-body) * 0.9) !important;
    }

    /* Reduce gaps in mobile grid */
    .woocommerce ul.products {
        gap: var(--space-md) !important;
        padding: 0 5px !important;
    }

    /* Adjust star rating size */
    .woocommerce ul.products li.product .star-rating {
        font-size: calc(1em * 0.8) !important;
    }
}

.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a {
    border: none !important;
}