/**
 * woo-archive-styles.css
 *
 * Estilos del listado de productos WooCommerce personalizado.
 * Se encola desde functions.php via fwa_enqueue_styles().
 *
 * Copia este fichero a:
 *   /wp-content/themes/TU-TEMA-HIJO/assets/css/woo-archive-styles.css
 * (o la ruta que configures en fwa_enqueue_styles)
 *
 * Variables de color: edita el bloque :root para personalizar.
 */

/* Fuente Josefin Sans — cargada directamente para no depender de functions.php */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');

/* =============================================================================
   VARIABLES
   ============================================================================= */
:root {
    --fwa-primary:        #3d7a3a;   /* Verde farmacia (títulos, precio, botones) */
    --fwa-primary-hover:  #2e5e2c;
    --fwa-text:           #2c2c2c;
    --fwa-text-light:     #666;
    --fwa-border:         #e4e8ed;
    --fwa-bg-card:        #fff;
    --fwa-bg-sidebar:     #fff;
    --fwa-sidebar-width:  240px;
    --fwa-gap:            24px;
    --fwa-radius:         6px;
    --fwa-price-color:    #3d7a3a;
    --fwa-badge-sale:     #e74c3c;
    --fwa-badge-out:      #999;
}

/* =============================================================================
   LAYOUT PRINCIPAL — 2 columnas
   ============================================================================= */
.fwa-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--fwa-gap);
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px;
    box-sizing: border-box;
}

/* ----- Sidebar ----- */
.fwa-sidebar {
    flex: 0 0 var(--fwa-sidebar-width);
    width: var(--fwa-sidebar-width);
    min-width: var(--fwa-sidebar-width);
    background: var(--fwa-bg-sidebar);
    position: sticky;
    top: 100px;   /* Ajusta según la altura de tu cabecera Divi */
}

/* ----- Contenido principal ----- */
.fwa-main {
    flex: 1;
    min-width: 0;
}

/* =============================================================================
   TÍTULO DE PÁGINA
   ============================================================================= */
.fwa-main h1.fwa-page-title,
h1.fwa-page-title {
    font-family: 'Josefin Sans', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Raya verde debajo del título */
.fwa-main h1.fwa-page-title::after,
h1.fwa-page-title::after {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 3px !important;
    background: #a2bf5e !important;
    margin-top: 10px !important;
}

/* =============================================================================
   BARRA DE HERRAMIENTAS (ordenación + resultados)
   ============================================================================= */
.fwa-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--fwa-border);
    gap: 12px;
    flex-wrap: wrap;
}

.fwa-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fwa-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Selector de ordenación nativo de WooCommerce */
.fwa-toolbar .woocommerce-ordering select,
.woocommerce-ordering select {
    border: 1px solid var(--fwa-border);
    border-radius: var(--fwa-radius);
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    color: var(--fwa-text);
    background-color: #fff;
    cursor: pointer;
    appearance: auto;
}

/* Contador de resultados */
.fwa-toolbar .woocommerce-result-count {
    font-size: 13px;
    color: var(--fwa-text-light);
    margin: 0;
}

/* ----- Iconos vista grid / lista ----- */
.fwa-view-switcher {
    display: flex;
    gap: 4px;
}

.fwa-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--fwa-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    color: var(--fwa-text-light);
    transition: all 0.15s;
}

.fwa-view-btn:hover,
.fwa-view-btn.active {
    border-color: var(--fwa-primary);
    color: var(--fwa-primary);
    background: #f0f7f0;
}

/* =============================================================================
   GRID DE PRODUCTOS
   ============================================================================= */

/*
 * OPCIÓN A aplicada: todos los selectores de productos están acotados
 * a .fwa-main para no afectar otros módulos WooCommerce del sitio (ej: home).
 */
.fwa-main .fwa-products-grid,
.fwa-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fwa-gap);
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FIX pseudo-elementos clearfix como grid items */
.fwa-main .fwa-products-grid::before,
.fwa-main .fwa-products-grid::after,
.fwa-main ul.products::before,
.fwa-main ul.products::after {
    display: none !important;
    content: none !important;
}

/*
 * Reset del float/width que WooCommerce aplica a li.product por defecto.
 * Sin esto, al usar <li> como raíz en content-product.php,
 * WooCommerce forzaría width:25% y float:left rompiendo nuestro grid.
 */
.fwa-main ul.products li.product,
.fwa-main ul.products li.fwa-product-card {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* Vista lista (1 columna) */
.fwa-main .fwa-products-grid.fwa-list-view,
.fwa-main ul.products.fwa-list-view {
    grid-template-columns: 1fr !important;
}

.fwa-main .fwa-products-grid.fwa-list-view .fwa-product-card,
.fwa-main ul.products.fwa-list-view .fwa-product-card {
    flex-direction: row;
    align-items: flex-start;
}

.fwa-main .fwa-products-grid.fwa-list-view .fwa-product-image,
.fwa-main ul.products.fwa-list-view .fwa-product-image {
    flex: 0 0 160px;
    width: 160px;
}

.fwa-main .fwa-products-grid.fwa-list-view .fwa-product-body,
.fwa-main ul.products.fwa-list-view .fwa-product-body {
    flex: 1;
    padding: 16px;
}

/* =============================================================================
   TARJETA DE PRODUCTO
   ============================================================================= */
.fwa-product-card {
    background: var(--fwa-bg-card);
    border: 1px solid var(--fwa-border);
    border-radius: var(--fwa-radius);
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
}

.fwa-product-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}

/* ----- Imagen ----- */
.fwa-product-image {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    border-bottom: 1px solid var(--fwa-border);
    border-radius: var(--fwa-radius) var(--fwa-radius) 0 0;
    aspect-ratio: 1 / 1;   /* Cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fwa-product-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.fwa-img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.fwa-product-card:hover .fwa-img {
    transform: scale(1.04);
}

/* ----- Badges (Oferta / Sin stock) ----- */
.fwa-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    pointer-events: none;
}

.fwa-badge--sale {
    background: var(--fwa-badge-sale);
    color: #fff;
}

.fwa-badge--out {
    background: var(--fwa-badge-out);
    color: #fff;
}

/* ----- Cuerpo de la tarjeta ----- */
.fwa-product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px;
    gap: 6px;
}

/* ----- Título ----- */
.fwa-product-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    /* Truncar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.fwa-product-title a {
    color: var(--fwa-text);
    text-decoration: none !important;
    transition: color 0.15s;
}

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

/* ----- Precio ----- */
.fwa-product-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--fwa-price-color);
    line-height: 1;
}

.fwa-product-price .woocommerce-Price-amount {
    color: var(--fwa-price-color);
}

.fwa-product-price del {
    color: #aaa;
    font-weight: 400;
    font-size: 13px;
    margin-right: 4px;
}

.fwa-product-price ins {
    text-decoration: none;
}

/* ----- Descripción corta ----- */
.fwa-product-desc {
    font-size: 12px;
    color: var(--fwa-text-light);
    line-height: 1.5;
    margin: 0;
    /* Truncar a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    flex: 1;
}

/* ----- Acciones: cantidad + botón carrito ----- */
.fwa-product-actions {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--fwa-border);
}

.fwa-cart-form {
    margin: 0 !important;
}

.fwa-qty-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Input de cantidad (override WooCommerce) */
.fwa-qty-wrap .quantity {
    display: flex !important;
    align-items: center;
    gap: 0;
    border: 1px solid var(--fwa-border);
    border-radius: var(--fwa-radius);
    overflow: hidden;
    background: #fff;
}

.fwa-qty-wrap .quantity input.qty {
    width: 44px !important;
    text-align: center;
    border: none !important;
    border-left: 1px solid var(--fwa-border) !important;
    border-right: 1px solid var(--fwa-border) !important;
    border-radius: 0 !important;
    padding: 6px 4px !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.fwa-qty-wrap .quantity input.qty::-webkit-inner-spin-button,
.fwa-qty-wrap .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Botones + y - del quantity (WooCommerce los añade via JS) */
.fwa-qty-wrap .qty-button,
.fwa-qty-wrap .quantity .minus,
.fwa-qty-wrap .quantity .plus {
    width: 28px;
    height: 100%;
    min-height: 34px;
    background: #f5f7f5;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--fwa-text);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fwa-qty-wrap .quantity .minus:hover,
.fwa-qty-wrap .quantity .plus:hover {
    background: #e0ebe0;
    color: var(--fwa-primary);
}

/* Botón añadir al carrito */
.fwa-btn-cart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    background: var(--fwa-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--fwa-radius) !important;
    cursor: pointer;
    padding: 0 !important;
    transition: background 0.2s !important;
    flex-shrink: 0;
}

/* Hover botón comprar — #608e41 */
body .fwa-btn-cart:hover,
body .fwa-btn-cart:focus,
.woocommerce body .fwa-btn-cart:hover,
.woocommerce body .fwa-btn-cart:focus {
    background: #608e41 !important;
    color: #fff !important;
}

/* Eliminar flecha que WooCommerce añade al botón tras añadir al carrito */
.fwa-btn-cart::after,
.fwa-btn-cart::before,
.fwa-btn-cart.added::after,
.fwa-btn-cart.loading::after {
    display: none !important;
    content: none !important;
}

.fwa-btn-cart svg {
    pointer-events: none;
}

/* Botón "Ver opciones" / "Ver producto" */
.fwa-btn-options {
    display: inline-block;
    padding: 8px 14px;
    background: var(--fwa-primary);
    color: #fff !important;
    border-radius: var(--fwa-radius);   /* mismo radius que el botón carrito */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s;
}

/* Hover "Ver producto" — #608e41, mismo radius */
body .fwa-btn-options:hover,
body .fwa-btn-options:focus,
.woocommerce body .fwa-btn-options:hover,
.woocommerce body .fwa-btn-options:focus {
    background: #608e41 !important;
    color: #fff !important;
    border-radius: var(--fwa-radius) !important;
}

/* =============================================================================
   SIDEBAR — CATEGORÍAS
   ============================================================================= */
.fwa-cat-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fwa-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fwa-primary);
}

.fwa-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fwa-cat-list li {
    border-bottom: 1px solid var(--fwa-border);
}

.fwa-cat-list li:last-child {
    border-bottom: none;
}

.fwa-cat-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 4px;
    font-size: 13px;
    color: var(--fwa-text);
    text-decoration: none !important;
    transition: color 0.15s, padding-left 0.15s;
    line-height: 1.3;
}

.fwa-cat-list a::before {
    content: '›';
    font-size: 16px;
    color: var(--fwa-text-light);
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
}

.fwa-cat-list a:hover,
.fwa-cat-list li.current-cat > a,
.fwa-cat-list li.current-cat-ancestor > a {
    color: var(--fwa-primary);
    padding-left: 4px;
}

.fwa-cat-list a:hover::before,
.fwa-cat-list li.current-cat > a::before {
    color: var(--fwa-primary);
}

/* Subcategorías anidadas */
.fwa-cat-list ul {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 14px;
}

.fwa-cat-list ul a {
    font-size: 12px;
    padding: 6px 4px;
    color: var(--fwa-text-light);
}

/* =============================================================================
   PAGINACIÓN
   ============================================================================= */
.fwa-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* Eliminar borde/perfil exterior del contenedor de paginación de WooCommerce */
.fwa-pagination .woocommerce-pagination,
.fwa-pagination nav.woocommerce-pagination {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fwa-pagination .woocommerce-pagination ul {
    display: flex;
    gap: 10px;          /* Espacio entre botones de página */
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    border: none !important;
}

.fwa-pagination .woocommerce-pagination ul li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fwa-pagination .woocommerce-pagination ul li a,
.fwa-pagination .woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--fwa-border);
    border-radius: var(--fwa-radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--fwa-text);
    text-decoration: none;
    transition: all 0.15s;
    background: #fff;
}

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

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

/* =============================================================================
   BOTÓN CARGAR MÁS
   ============================================================================= */
.fwa-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding-bottom: 20px;
}

.fwa-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--fwa-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--fwa-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    letter-spacing: 0.02em;
}

.fwa-load-more-btn:hover {
    background: #608e41;
}

.fwa-load-more-btn:disabled,
.fwa-load-more-btn.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner animado */
.fwa-load-more-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #d0e8d0;
    border-top-color: var(--fwa-primary);
    border-radius: 50%;
    animation: fwa-spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes fwa-spin {
    to { transform: rotate(360deg); }
}

/* Mensaje "No hay más productos" */
.fwa-load-more-end {
    font-size: 13px;
    color: var(--fwa-text-light);
    margin: 0;
    text-align: center;
}

/* Tablet: 2 columnas de productos */
@media ( max-width: 1024px ) {
    .fwa-main .fwa-products-grid,
    .fwa-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: sidebar encima del contenido, 1 columna */
@media ( max-width: 768px ) {
    .fwa-layout {
        flex-direction: column;
        padding: 16px;
    }

    .fwa-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
    }

    .fwa-main .fwa-products-grid,
    .fwa-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media ( max-width: 480px ) {
    .fwa-main .fwa-products-grid,
    .fwa-main ul.products {
        grid-template-columns: 1fr !important;
    }
}