/**
 * Product Category Styles
 *
 * Diseño adaptado al sistema de diseño Starhouse:
 * - Grid responsive 4/3/2 columnas
 * - Cards con hover effects específicos
 * - Tipografía Cormorant Garamond + Montserrat
 * - Paleta de colores HSL premium
 *
 * @package Starhouse
 * @since 1.0.5
 */

/* ==========================================================================
   Typography Override
   ========================================================================== */

/* Fonts loaded via wp_enqueue_style() in inc/enqueue.php */

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.woocommerce-category-container {
    background: var(--background);
}

/* Container padding - Aplicar a ambos wrappers de WooCommerce */
.woocommerce-category-container .container,
.woocommerce-container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
    .woocommerce-category-container .container,
    .woocommerce-container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* ==========================================================================
   Category Banner
   ========================================================================== */

.category-banner-section {
    margin-bottom: 3rem; /* Standardized spacing (48px) */
}

/* ==========================================================================
   Products Grid
   ========================================================================== */

.products-section {
    width: 100%;
    padding: 5rem 0; /* Matches site-wide section standard */
}

/* Incrementar padding vertical en desktop para más aire */
@media (min-width: 1200px) {
    .products-section {
        padding: 6rem 0;
    }
}

.product-grid.products {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columnas */
}

/* Tablet: 3 columnas */
@media (min-width: 768px) {
    .product-grid.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Desktop: 4 columnas */
@media (min-width: 1200px) {
    .product-grid.products {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* Small mobile: gap reducido */
@media (max-width: 576px) {
    .product-grid.products {
        gap: 16px;
    }
}

/* ==========================================================================
   Product Cards
   ========================================================================== */

.products .product {
    background: hsl(0, 0%, 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 300ms ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Hover Effect */
.products .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Product Image */
.products .product .woocommerce-loop-product__link {
    display: block;
    overflow: hidden;
    background: var(--muted);
}

.products .product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 300ms ease;
}

.products .product:hover img {
    transform: scale(1.05);
}

/* Product Info Container */
.products .product .woocommerce-loop-product__title,
.products .product .price,
.products .product .button {
    padding-left: 16px;
    padding-right: 16px;
}

/* Product Title */
.products .product .woocommerce-loop-product__title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--foreground);
    margin: 16px 16px 8px;
    padding: 0;

    /* Text overflow */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Product Price */
.products .product .price {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 16px 16px;
    padding: 0;
}

.products .product .price del {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--muted-foreground);
    margin-right: 8px;
}

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

/* Add to Cart Button */
.products .product .button {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.5rem;
    margin: 0 16px 16px;
    cursor: pointer;
    transition: all 300ms ease;
    text-align: center;
    text-transform: none;
}

.products .product .button:hover {
    background: hsl(32, 36%, 42%); /* Primary dark */
    transform: scale(1.02);
}

/* Sale Badge */
.products .product .onsale {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--destructive);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    z-index: 10;
}

/* ==========================================================================
   Category Title & Description
   ========================================================================== */

.woocommerce-products-header {
    text-align: center;
    padding: 3rem 0; /* Consistent with other section headers */
}

/* Más espacioso en desktop */
@media (min-width: 1200px) {
    .woocommerce-products-header {
        padding: 4rem 0;
    }
}

.woocommerce-products-header h1 {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1.25rem;
}

@media (min-width: 1200px) {
    .woocommerce-products-header h1 {
        font-size: 3.5rem;
    }
}

.woocommerce-products-header .term-description {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================================================
   Subcategories Section
   ========================================================================== */

.subcategories-section {
    margin-bottom: 3rem; /* Matches category-banner spacing */
    padding: 3rem 0; /* Add consistent section padding */
}

/* Más espacioso en desktop */
@media (min-width: 1200px) {
    .subcategories-section {
        padding: 4rem 0;
        margin-bottom: 4rem;
    }
}

.subcategories-section h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    .subcategories-section h2 {
        font-size: 2.5rem;
    }
}

.subcategories-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .subcategories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .subcategories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.subcategory-card {
    background: hsl(0, 0%, 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 300ms ease;
    text-decoration: none;
    display: block;
}

.subcategory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.subcategory-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 300ms ease;
}

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

.subcategory-info {
    padding: 1rem;
}

.subcategory-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.subcategory-count {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

/* ==========================================================================
   WooCommerce Toolbar
   ========================================================================== */

.woocommerce-result-count,
.woocommerce-ordering {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.woocommerce-ordering select {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: hsl(0, 0%, 100%);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.woocommerce-pagination {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.woocommerce-pagination ul {
    display: inline-flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--foreground);
    text-decoration: none;
    transition: all 300ms ease;
}

.woocommerce-pagination ul li a:hover {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.woocommerce-pagination ul li span.current {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* ==========================================================================
   Loading Animation
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.products .product {
    animation: fadeInUp 0.5s ease-out backwards;
}

.products .product:nth-child(1) { animation-delay: 0.05s; }
.products .product:nth-child(2) { animation-delay: 0.1s; }
.products .product:nth-child(3) { animation-delay: 0.15s; }
.products .product:nth-child(4) { animation-delay: 0.2s; }
.products .product:nth-child(5) { animation-delay: 0.25s; }
.products .product:nth-child(6) { animation-delay: 0.3s; }
.products .product:nth-child(7) { animation-delay: 0.35s; }
.products .product:nth-child(8) { animation-delay: 0.4s; }

/* ==========================================================================
   Smooth Scroll
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   No Products Found
   ========================================================================== */

.woocommerce-no-products-found {
    text-align: center;
    padding: 5rem 2.5rem;
    font-family: var(--font-sans);
}

.woocommerce-no-products-found p {
    font-size: 1.125rem;
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Related Products, Upsells, Cross-sells
   ========================================================================== */

.related.products,
.upsells.products,
.cross-sells {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--border);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 2rem;
    text-align: center;
}

@media (min-width: 1200px) {
    .related.products > h2,
    .upsells.products > h2,
    .cross-sells > h2 {
        font-size: 2.5rem;
    }
}

/* Apply same grid as main product grid */
.related.products ul.products,
.upsells.products ul.products,
.cross-sells ul.products {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ensure products in these sections use same card styles */
.related.products .product,
.upsells.products .product,
.cross-sells .product {
    background: hsl(0, 0%, 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 300ms ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.related.products .product:hover,
.upsells.products .product:hover,
.cross-sells .product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Image styles */
.related.products .product img,
.upsells.products .product img,
.cross-sells .product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 300ms ease;
}

.related.products .product:hover img,
.upsells.products .product:hover img,
.cross-sells .product:hover img {
    transform: scale(1.05);
}

/* Title styles */
.related.products .product .woocommerce-loop-product__title,
.upsells.products .product .woocommerce-loop-product__title,
.cross-sells .product .woocommerce-loop-product__title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--foreground);
    margin: 16px 16px 8px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price styles */
.related.products .product .price,
.upsells.products .product .price,
.cross-sells .product .price {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 16px 16px;
    padding: 0;
}

.related.products .product .price del,
.upsells.products .product .price del,
.cross-sells .product .price del {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--muted-foreground);
    margin-right: 8px;
}

.related.products .product .price ins,
.upsells.products .product .price ins,
.cross-sells .product .price ins {
    text-decoration: none;
    color: var(--destructive);
}

/* Button styles */
.related.products .product .button,
.upsells.products .product .button,
.cross-sells .product .button {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.5rem;
    margin: 0 16px 16px;
    cursor: pointer;
    transition: all 300ms ease;
    text-align: center;
    text-transform: none;
}

.related.products .product .button:hover,
.upsells.products .product .button:hover,
.cross-sells .product .button:hover {
    background: hsl(32, 36%, 42%);
    transform: scale(1.02);
}

/* Sale badge */
.related.products .product .onsale,
.upsells.products .product .onsale,
.cross-sells .product .onsale {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--destructive);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    z-index: 10;
}