/* =============================================================
   RETROFASE PRODUCTS SHOWCASE — Estilos mobile-first
   =============================================================

   BEM utilizado: bloque = .rf-showcase / .rf-card
   Sin !important salvo donde se documenta el motivo.
   Variables CSS del proyecto aplicadas donde corresponde.

   Índice:
     1. Variables locales
     2. Wrapper / contenedor
     3. Filtros de categoría
     4. Contador de resultados
     5. Grid de tarjetas
     6. Tarjeta (rf-card)
        6a. Imagen
        6b. Badge de oferta
        6c. Cuerpo / texto
        6d. Precio
        6e. Botón CTA
     7. Estado vacío
     8. Estado de carga / spinner
     9. Media queries (tablet, desktop)
    10. Modo oscuro (prefers-color-scheme)
   ============================================================= */


/* ── 1. Variables locales ─────────────────────────────────── */

.rf-showcase {
    /* Paleta principal (hereda de :root si ya están definidas) */
    --rf-blue:         #034AB1;
    --rf-blue-dark:    #023a8f;
    --rf-blue-shadow:  rgba(3, 74, 177, 0.25);
    --rf-red:          #A10D1F;
    --rf-gold:         #e3ba5d;
    --rf-text:         #333333;
    --rf-text-muted:   #666666;
    --rf-border:       #E2E8F0;
    --rf-bg-card:      #FFFFFF;
    --rf-bg-filter:    #F5F5F5;
    --rf-radius-card:  20px;
    --rf-radius-btn:   14px;
    --rf-transition:   0.25s ease;

    /* Columnas: modificada por el atributo `columns` del shortcode */
    --rf-cols: 3;
}


/* ── 2. Wrapper / contenedor ──────────────────────────────── */

.rf-showcase {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* ── 3. Filtros de categoría ──────────────────────────────── */

/* Cabecera de filtros (ícono + label) */
.rf-showcase__filters-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.rf-showcase__filter-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.rf-showcase__filter-label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--rf-text);
}

/* Fila de botones */
.rf-showcase__filters {
    display: flex;
    flex-wrap: wrap;       /* Salta de línea en móvil */
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 4px;
    overflow-x: auto;      /* Scroll horizontal si no caben */
    -webkit-overflow-scrolling: touch;
}

/* Botón de filtro individual */
.rf-showcase__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    background: #FFFFFF;
    border: 2px solid var(--rf-border);
    border-radius: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--rf-text);
    cursor: pointer;
    transition: background var(--rf-transition),
                border-color var(--rf-transition),
                transform var(--rf-transition);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}

.rf-showcase__filter-btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Hover */
.rf-showcase__filter-btn:hover {
    border-color: var(--rf-blue);
    background: #f0f5ff;
    transform: translateY(-1px);
}

/* Activo */
.rf-showcase__filter-btn--active,
.rf-showcase__filter-btn[aria-pressed="true"] {
    background: var(--rf-blue);
    border-color: var(--rf-blue);
    color: #FFFFFF;
}

/* Ícono blanco cuando el botón está activo */
.rf-showcase__filter-btn--active .rf-showcase__filter-btn-icon,
.rf-showcase__filter-btn[aria-pressed="true"] .rf-showcase__filter-btn-icon {
    filter: brightness(0) invert(1);
}

/* Foco (accesibilidad) */
.rf-showcase__filter-btn:focus-visible {
    outline: 2px solid var(--rf-blue);
    outline-offset: 2px;
}


/* ── 4. Contador de resultados ────────────────────────────── */

.rf-showcase__counter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 18px;
    margin-bottom: 28px;
    background: #EFEFEF;
    border: 1px solid var(--rf-border);
    border-radius: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--rf-text);
    box-sizing: border-box;
    width: 100%;               /* Ocupa todo el ancho como barra */
}

.rf-showcase__counter-num {
    font-weight: 700;
}


/* ── 5. Grid de tarjetas ──────────────────────────────────── */

/*
   Grid adaptativo:
   - Mobile (< 600 px): 1 columna siempre.
   - Tablet / Desktop: auto-fill con ancho mínimo de tarjeta.
     El máximo de columnas lo limita --rf-cols (inyectado desde el shortcode).
     Usar auto-fill + minmax evita tarjetas demasiado angostas cuando
     hay pocos productos (ej: 1 sola tarjeta no ocupa 1/3 del espacio).
*/
.rf-showcase__grid {
    display: grid;
    /* Base móvil: 1 columna */
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

@media (min-width: 600px) {
    .rf-showcase__grid {
        /*
           auto-fill: crea las columnas que quepan con mínimo 260 px.
           Si hay 1 o 2 productos, las tarjetas se expanden para no quedar
           angostas. El máximo lo impone el container.
        */
        grid-template-columns: repeat(
            auto-fill,
            minmax( min(260px, 100%), 1fr )
        );
        gap: 20px;
    }
}

@media (min-width: 900px) {
    .rf-showcase__grid {
        /*
           Desktop: columnas fijas según --rf-cols.
           min(220px, 100%) evita tarjetas más angostas de 220 px si el
           contenedor es muy estrecho (ej: sidebar en Divi).
        */
        grid-template-columns: repeat( var(--rf-cols), minmax( min(220px, 100%), 1fr ) );
        gap: 24px;
    }
}


/* ── 6. Tarjeta (rf-card) ─────────────────────────────────── */

/*
   Selector doble (.rf-showcase .rf-card) para mayor especificidad que
   las reglas globales de Divi que pueden afectar el background y el color.
   Sin !important — la especificidad extra es suficiente.
*/
.rf-showcase .rf-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;               /* explícito: no dejar que Divi lo herede */
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.rf-showcase .rf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
    border-color: #034AB1;
}


/* ── 6a. Imagen ───────────────────────────────────────────── */

.rf-card__image-wrap {
    position: relative;
    width: 100%;
    /* Ratio fijo para consistencia entre tarjetas */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f8f8f8;
}

.rf-card__image {
    display: block;
    width: 100%;
    height: 100%;
    /* cover: rellena el espacio; contain: muestra el producto completo */
    object-fit: contain;
    transition: transform var(--rf-transition);
}

.rf-card:hover .rf-card__image {
    transform: scale(1.03);
}


/* ── 6b. Badge de oferta ──────────────────────────────────── */

.rf-card__sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    background: var(--rf-red);
    border-radius: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 2;
}


/* ── 6c. Cuerpo / texto ───────────────────────────────────── */

.rf-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;                /* Se expande para igualar alturas en la fila */
    padding: 16px 16px 20px;
    gap: 10px;
    align-items: center;
    text-align: center;
    background: #ffffff;   /* refuerzo: el body también explícito */
}

/* Badge de categoría (pill gris, igual a la imagen de referencia) */
.rf-card__cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    background: #F5F5F5;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf-card__title {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--rf-text);
    /* Máximo 3 líneas para uniformidad */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rf-showcase .rf-card__title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.25s ease;
}

.rf-showcase .rf-card__title a:hover {
    color: #034AB1;
}


/* ── 6d. Precio ───────────────────────────────────────────── */

.rf-card__price {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--rf-blue);   /* Azul como en la imagen */
    line-height: 1.2;
}

/* WooCommerce inyecta <span class="woocommerce-Price-amount"> */
.rf-card__price .woocommerce-Price-amount {
    color: var(--rf-blue);
    font-weight: 700;
}

/* Precio tachado en productos con oferta */
.rf-card__price del {
    color: #999999;
    font-weight: 400;
    font-size: 14px;
    text-decoration: line-through;
}

.rf-card__price ins {
    text-decoration: none;
    color: var(--rf-red);
    font-weight: 700;
}

/* Sufijo "+ IVA" (agregado por WooCommerce vía filtro) */
.rf-card__price .woocommerce-price-suffix {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin-left: 4px;
}


/* ── 6e. Botón CTA ────────────────────────────────────────── */

.rf-card__actions {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0;            /* sin padding extra: el botón gestiona su propio margen */
}

/*
   Usamos .rf-card__btn como clase principal + clases WC para compatibilidad.
   Evitamos !important abusivo: el selector es suficientemente específico.
*/
.rf-card .rf-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px); /* margen interno de 12px a cada lado */
    height: 42px;
    padding: 0 16px;
    background: #034AB1;
    border: none;
    border-radius: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease,
                transform 0.25s ease,
                box-shadow 0.25s ease;
    box-sizing: border-box;
    overflow: hidden;        /* recorta solo el fondo, no el texto */
    line-height: 1;
}

.rf-card .rf-card__btn:hover {
    background: var(--rf-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--rf-blue-shadow);
    color: #FFFFFF;
    text-decoration: none;
}

/* Botón de productos variables → color dorado */
.rf-card[data-type="variable"] .rf-card__btn {
    background: var(--rf-gold);
    color: #333;
}

.rf-card[data-type="variable"] .rf-card__btn:hover {
    background: #d4a941;
    box-shadow: 0 4px 12px rgba(227, 186, 93, 0.4);
    color: #333;
}

/* Ícono SVG del botón */
.rf-card__btn-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    /* Hereda color del texto (stroke="currentColor") */
}

/* Estado loading (WooCommerce AJAX) */
.rf-card .rf-card__btn.loading {
    pointer-events: none;
    opacity: 0.75;
    cursor: wait;
}

/* Estado "agregado" */
.rf-card .rf-card__btn.added {
    background: #28a745;
}

/* Enlace "Ver carrito" que WooCommerce inserta después de agregar */
.rf-card .added_to_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 24px);
    height: 38px;
    margin-top: 4px;
    border: 2px solid var(--rf-blue);
    border-radius: var(--rf-radius-btn);
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--rf-blue);
    text-decoration: none;
    transition: background var(--rf-transition), color var(--rf-transition);
}

.rf-card .added_to_cart:hover {
    background: var(--rf-blue);
    color: #FFFFFF;
    text-decoration: none;
}

/* Suprimir el ícono de ojo que Divi o WC pueden agregar */
.rf-card .added_to_cart::before {
    display: none;
}


/* ── 7. Estado vacío ──────────────────────────────────────── */

.rf-showcase__empty {
    grid-column: 1 / -1;   /* Ocupa todo el ancho del grid */
    text-align: center;
    padding: 48px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: var(--rf-text-muted);
}


/* ── 8. Estado de carga / spinner ─────────────────────────── */

/*
   El atributo HTML `hidden` aplica display:none por defecto del navegador,
   PERO una regla CSS con display sobreescribe eso. Por eso NO ponemos
   display aquí — solo cuando el atributo hidden NO está presente.
*/
.rf-showcase__loading {
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: var(--rf-text-muted);
}

/* Solo se muestra cuando JS quita el atributo hidden */
.rf-showcase__loading:not([hidden]) {
    display: flex;
}

.rf-showcase__spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--rf-blue);
    border-radius: 50%;
    animation: rf-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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


/* ── 9. Media queries adicionales ─────────────────────────── */

/* Tablet 600-900: ajustes menores */
@media (min-width: 600px) and (max-width: 899px) {
    .rf-card__title {
        font-size: 14px;
    }

    .rf-card__price {
        font-size: 16px;
    }
}

/* Desktop ≥ 900 */
@media (min-width: 900px) {
    .rf-showcase__filters {
        flex-wrap: wrap;
    }

    .rf-card__body {
        padding: 18px 20px 22px;
    }

    .rf-card__title {
        font-size: 15px;
    }
}

/* Pantallas muy pequeñas (< 380 px) */
@media (max-width: 380px) {
    .rf-card .rf-card__btn,
    .rf-card .added_to_cart {
        font-size: 13px;
    }
}


/* ── 10. Modo oscuro ──────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    /* Sólo si el sitio no fuerza modo claro.
       Divi en general controla el modo oscuro desde el tema;
       estas reglas son un respaldo conservador. */
    .rf-card {
        background: #1e1e1e;
        border-color: #333;
    }

    .rf-card__title a {
        color: #f0f0f0;
    }

    .rf-showcase__counter {
        background: #2a2a2a;
        border-color: #333;
        color: #f0f0f0;
    }
}

/* =============================================================
   FIN DE ESTILOS — products-showcase.css
   ============================================================= */