/*
Theme Name: Blocksy Child Catalogo
Theme URI: https://creativethemes.com/blocksy/
Description: Tema hijo de Blocksy. v9.4 - Estable. Paginas estaticas para Novedades/MasVendidos/RopaCasual.
Author: Tienda Mas Futbol
Author URI: https://tiendamasfutbol.com.co
Template: blocksy
Version: 9.4.0
*/

/* === Cuadricula de subcategorias === */
.subcat-grid-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto !important;
    padding: 0 20px;
    box-sizing: border-box;
    clear: both;
}

.subcat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    width: 100%;
}

.subcat-card {
    height: 140px;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: white !important;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    line-height: 1.2;
}

.subcat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    color: white !important;
}

.subcat-card-image {
    background-size: cover;
    background-position: center;
}

.subcat-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

.subcat-card-image .subcat-card-label {
    position: relative;
    z-index: 2;
    align-self: flex-end;
    width: 100%;
}

/* Paleta de gradientes */
.subcat-grad-1 { background: linear-gradient(135deg,#dc2626,#fbbf24); }
.subcat-grad-2 { background: linear-gradient(135deg,#3730a3,#7c3aed); }
.subcat-grad-3 { background: linear-gradient(135deg,#1e3a8a,#0ea5e9); }
.subcat-grad-4 { background: linear-gradient(135deg,#171717,#dc2626); }
.subcat-grad-5 { background: linear-gradient(135deg,#1e40af,#dc2626); }
.subcat-grad-6 { background: linear-gradient(135deg,#15803d,#dc2626); }
.subcat-grad-7 { background: linear-gradient(135deg,#ea580c,#fbbf24); }
.subcat-grad-8 { background: linear-gradient(135deg,#1e3a8a,#dc2626); }
.subcat-grad-9 { background: linear-gradient(135deg,#15803d,#fbbf24); }
.subcat-grad-10 { background: linear-gradient(135deg,#475569,#94a3b8); }
.subcat-grad-11 { background: linear-gradient(135deg,#166534,#22c55e); }
.subcat-grad-12 { background: linear-gradient(135deg,#7c2d12,#f97316); }

/* === Movil === */
@media (max-width: 768px) {
    .subcat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .subcat-card {
        font-size: 16px;
        height: 110px;
        padding: 10px;
    }
    .subcat-grid-wrapper {
        padding: 0 15px;
        margin: 20px auto !important;
    }
}

@media (max-width: 380px) {
    .subcat-card {
        font-size: 14px;
        height: 100px;
    }
}

/* === ATAQUE ESPECIFICO A BLOCKSY === */
/* La clase .is-width-constrained limita el ancho del hero. Hay que romperla. */
body.tmf-only-subcats .hero-section.is-width-constrained,
body.tmf-only-subcats .hero-section[data-type="type-1"] {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Forzar contenedores principales a ancho completo */
body.tmf-only-subcats #main-container,
body.tmf-only-subcats #main,
body.tmf-only-subcats .ct-container,
body.tmf-only-subcats .ct-main-content {
    max-width: 100% !important;
    width: 100% !important;
}

/* Si Blocksy hace grid con sidebar, pasar a 1 columna */
body.tmf-only-subcats main[data-vertical-spacing] {
    grid-template-columns: 1fr !important;
}

/* Sacar la cuadricula de cualquier contenedor estrecho y ponerla a ancho completo */
body.tmf-only-subcats .subcat-grid-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    width: calc(100vw - 40px) !important;
    width: 100% !important;
}

/* === Ocultar listado de posts cuando hay subcategorias === */
body.tmf-only-subcats .ct-archive-cards,
body.tmf-only-subcats .ct-loop-before,
body.tmf-only-subcats .ct-loop-after,
body.tmf-only-subcats .archive .post,
body.tmf-only-subcats .archive article.post,
body.tmf-only-subcats article.post,
body.tmf-only-subcats .post-navigation,
body.tmf-only-subcats .nav-links,
body.tmf-only-subcats .ct-pagination,
body.tmf-only-subcats nav.navigation,
body.tmf-only-subcats .no-results,
body.tmf-only-subcats #secondary,
body.tmf-only-subcats .widget-area,
body.tmf-only-subcats aside.sidebar,
body.tmf-only-subcats .ct-sidebar {
    display: none !important;
}

/* === Buscador en paginas de categoria === */
.tmf-search-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 30px auto 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

.tmf-search-form {
    display: flex;
    gap: 10px;
    width: 100%;
}

.tmf-search-form input[type="search"] {
    flex: 1;
    padding: 16px 22px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    outline: none;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
    min-width: 0;
}

.tmf-search-form input[type="search"]:focus {
    border-color: #3b82f6;
}

.tmf-search-form button {
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg,#3b82f6,#1e40af);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    transition: transform 0.2s;
    white-space: nowrap;
}

.tmf-search-form button:hover {
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .tmf-search-form input[type="search"] {
        padding: 14px 18px;
        font-size: 15px;
    }
    .tmf-search-form button {
        padding: 14px 20px;
        font-size: 15px;
    }
}