/* =====================================================
   CATÁLOGO - MISMAS PROPORCIONES VISUALES DEL INDEX
   Chamoy Sport
===================================================== */

/* IMPORTANTE:
   En productos.php cambia:
   <main class="catalog-page">
   por:
   <main class="catalog-page catalog-page-products">
*/

.catalog-page-products{
    width:min(1500px,calc(100% - 40px));
    margin:0 auto;
    padding:28px 0 0;
}

/* Hero y filtros aprovechan el mismo ancho */
.catalog-page-products .catalog-hero,
.catalog-page-products .catalog-layout{
    width:100%;
}

/* Más compacto para que el catálogo empiece antes */
.catalog-page-products .catalog-hero{
    padding:38px 46px;
}

.catalog-page-products .catalog-layout{
    margin-top:22px;
}

/* 4 tarjetas por fila, igual que la sensación visual del index */
.catalog-page-products .catalog-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-top:18px;
}

/* Tarjeta */
.catalog-page-products .catalog-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--theme-border);
    border-radius:12px;
    background:var(--theme-card);
    box-shadow:none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.catalog-page-products .catalog-card:hover{
    transform:translateY(-3px);
    border-color:var(--theme-border-hover);
    box-shadow:0 14px 32px rgba(0,0,0,.10);
}

/* Imagen más llena, como en las cards del index */
.catalog-page-products .catalog-preview{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1.30 / 1;
    min-height:0;
    overflow:hidden;
    background:var(--theme-card-soft);
}

.catalog-page-products .catalog-image{
    display:block;
    width:100%;
    height:100%;
    padding:0;
    object-fit:contain;
    transition:transform .22s ease;
}

.catalog-page-products .catalog-card:hover .catalog-image{
    transform:scale(1.025);
}

/* Contenido */
.catalog-page-products .catalog-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:14px 14px 12px;
}

.catalog-page-products .catalog-card-body small{
    color:#a78bfa;
    font-size:.76rem;
    font-weight:900;
}

.catalog-page-products .catalog-card-body h2{
    min-height:42px;
    margin:7px 0 14px;
    color:var(--theme-text);
    font-size:.94rem;
    line-height:1.35;
}

/* Precio + botón pegados abajo */
.catalog-page-products .catalog-card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:12px;
    border-top:1px solid var(--theme-border);
}

.catalog-page-products .catalog-card-foot strong{
    color:var(--theme-text);
    font-size:.98rem;
    white-space:nowrap;
}

.catalog-page-products .design-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(139,92,246,.34);
    border-radius:8px;
    color:#a78bfa;
    background:transparent;
    font-size:.72rem;
    font-weight:900;
    white-space:nowrap;
}

.catalog-page-products .design-link:hover{
    color:#fff;
    border-color:#7c3aed;
    background:#7c3aed;
}

/* Badge un poco más pequeño para no tapar la imagen */
.catalog-page-products .product-badge{
    top:10px;
    left:10px;
    min-height:25px;
    padding:0 9px;
    font-size:.66rem;
}

/* Tema claro */
html[data-theme="light"] .catalog-page-products .catalog-card-body small{
    color:#8b5cf6;
}

html[data-theme="light"] .catalog-page-products .catalog-card{
    box-shadow:0 8px 24px rgba(15,23,42,.035);
}

/* Responsive */
@media (max-width:1350px){
    .catalog-page-products{
        width:min(1280px,calc(100% - 32px));
    }

    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:1050px){
    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:820px){
    .catalog-page-products{
        width:min(100% - 24px,1280px);
        padding-top:20px;
    }

    .catalog-page-products .catalog-hero{
        padding:28px;
    }

    .catalog-page-products .catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
}

@media (max-width:520px){
    .catalog-page-products{
        width:min(100% - 20px,1280px);
    }

    .catalog-page-products .catalog-grid{
        grid-template-columns:1fr;
    }

    .catalog-page-products .catalog-card-body h2{
        min-height:0;
    }
}