/*
 * assets/css/tienda/grid.css — Nuestro Tiempo Theme
 *
 * Grid de productos + cards personalizadas via content-product.php
 * Clases propias: .nt-card (en lugar de depender de clases WooCommerce).
 *
 * @package nuestro-tiempo
 */

/* ─── Sección contenedor ──────────────────────────── */
.tienda-grid {
    background-color: var(--c-crema);
    padding-block: var(--space-section);
}

/* ─── Contador de resultados ──────────────────────── */
.tienda-grid__count {
    font-family: var(--f-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.40);
    margin-bottom: 3rem;
}

/* ─── Reset total de WooCommerce sobre ul.products ───
   WooCommerce fuerza float, margin y justify-content
   que desplazan el grid. Los desactivamos todos.
   ─────────────────────────────────────────────────── */

/* CRÍTICO: WooCommerce añade ::before y ::after como clearfix
   para su layout de float. En CSS Grid, estos pseudo-elementos
   se convierten en grid-items fantasma que desplazan los productos
   a la derecha (el inspector mostraba "::before == $0" como celda
   vacía antes de los productos). Los eliminamos. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    /* Quitar legado float-based layout de WooCommerce */
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: start !important;
    /* evitar centrado con items < columnas */
    align-items: start !important;

    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
    gap: 2rem;
}

@media (min-width: 600px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3rem;
    }
}

/* Reset cada li para que no quede resabio de float */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
}

/* ─── .nt-card — card completa ────────────────────── */
.nt-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 16px rgba(26, 26, 26, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.nt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(26, 26, 26, 0.13);
}

/* ─── Imagen ──────────────────────────────────────── */
.nt-card__img-link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--c-negro);
    flex-shrink: 0;
    text-decoration: none;
}

.nt-card__img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.5s ease, opacity 0.3s ease;
    opacity: 0.92;
}

.nt-card:hover .nt-card__img {
    transform: scale(1.06);
    opacity: 1;
}

/* CTA que aparece al hover — dentro de la imagen */
.nt-card__img-cta {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    font-family: var(--f-sans);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-crema);
    background: rgba(26, 26, 26, 0.80);
    backdrop-filter: blur(4px);
    padding: 0.4rem 1.1rem;
    border-radius: 99px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.nt-card:hover .nt-card__img-cta {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Badge de oferta */
.nt-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    font-family: var(--f-sans);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--c-cobre);
    color: var(--c-crema);
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
}

/* ─── Cuerpo ──────────────────────────────────────── */
.nt-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
    gap: 0.5rem;
}

/* Nombre del producto */
.nt-card__title {
    font-family: var(--f-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-negro);
    margin: 0;
}

.nt-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.nt-card__title a:hover {
    color: var(--c-cobre);
}

/* Descripción corta */
.nt-card__desc {
    font-family: var(--f-sans);
    font-size: 0.82rem;
    color: rgba(26, 26, 26, 0.55);
    line-height: 1.55;
    margin: 0;
    /* Limitar a 2 líneas con ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer: precio + botón */
.nt-card__footer {
    margin-top: auto;
    /* empuja todo el footer hacia abajo */
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Precio */
.nt-card__price .price,
.nt-card__price {
    font-family: var(--f-sans) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--c-cobre) !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.nt-card__price del,
.nt-card__price .price del {
    color: rgba(26, 26, 26, 0.30) !important;
    font-weight: 400 !important;
    margin-right: 0.3rem !important;
}

/* Botón */
.nt-card__btn,
.nt-card .button,
.nt-card .add_to_cart_button {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background-color: var(--c-negro) !important;
    color: var(--c-crema) !important;
    font-family: var(--f-sans) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.25s ease !important;
    box-sizing: border-box !important;
    float: none !important;
}

.nt-card__btn:hover,
.nt-card .button:hover,
.nt-card .add_to_cart_button:hover {
    background-color: var(--c-cobre) !important;
}

/* ─── Paginación ──────────────────────────────────── */
.tienda-grid__pagination {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

.tienda-grid__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: var(--text-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}

.tienda-grid__pagination .page-numbers li a,
.tienda-grid__pagination .page-numbers li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: var(--c-negro);
    transition: background 0.2s, color 0.2s;
}

.tienda-grid__pagination .page-numbers li a:hover {
    background: var(--c-negro);
    color: var(--c-crema);
}

.tienda-grid__pagination .page-numbers li .current {
    background: var(--c-cobre);
    color: var(--c-crema);
}

/* ─── Estado vacío ────────────────────────────────── */
.tienda-grid__empty {
    text-align: center;
    padding: 6rem 0;
    font-family: var(--f-serif);
    font-size: var(--text-xl);
    color: rgba(26, 26, 26, 0.35);
}