/* =========================================================
   BETY'S ELEC
   CATÁLOGO
========================================================= */

.catalog-page {

    position: relative;

    z-index: 2;

    min-height:
        calc(100vh - 88px);
}


.catalog-container {

    width:
        min(
            calc(100% - 40px),
            var(--ancho-maximo)
        );

    margin:
        0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.catalog-hero {

    padding:
        64px 0 28px;

    background:
        transparent;
}


.catalog-heading {

    max-width:
        760px;

    margin:
        0 auto 28px;

    text-align:
        center;
}


.catalog-label {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--dorado);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;
}


.catalog-heading h1 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(36px, 5vw, 58px);

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -1.8px;
}


.catalog-heading p {

    max-width:
        620px;

    margin:
        16px auto 0;

    color:
        var(--texto-secundario);

    font-size:
        15px;

    line-height:
        1.7;
}


/* =========================================================
   BUSCADOR
========================================================= */

.catalog-search-wrap {

    position:
        relative;

    width:
        min(
            760px,
            100%
        );

    margin:
        0 auto;
}


.catalog-search-wrap input {

    width:
        100%;

    height:
        54px;

    padding:
        0 58px 0 18px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .26
        );

    border-radius:
        10px;

    outline:
        none;

    background:
        rgba(
            0,
            0,
            0,
            .24
        );

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        14px;

    box-sizing:
        border-box;
}


.catalog-search-wrap input::placeholder {

    color:
        #8f8f8f;
}


.catalog-search-wrap input:focus {

    border-color:
        rgba(
            242,
            185,
            39,
            .62
        );

    box-shadow:
        0 0 0 3px
        rgba(
            242,
            185,
            39,
            .06
        );
}


.catalog-search-wrap button {

    position:
        absolute;

    top:
        7px;

    right:
        7px;

    width:
        40px;

    height:
        40px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .24
        );

    border-radius:
        8px;

    background:
        rgba(
            242,
            185,
            39,
            .08
        );

    color:
        var(--dorado);

    font-size:
        22px;

    cursor:
        pointer;
}


/* =========================================================
   FILTROS
========================================================= */

.catalog-controls {

    padding:
        16px 0 12px;

    border-top:
        1px solid
        rgba(
            242,
            185,
            39,
            .08
        );

    border-bottom:
        1px solid
        rgba(
            242,
            185,
            39,
            .08
        );

    background:
        transparent;
}


.catalog-category-list {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        9px;
}


.catalog-filter {

    min-height:
        38px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .20
        );

    border-radius:
        999px;

    background:
        rgba(
            0,
            0,
            0,
            .16
        );

    color:
        #c9c9c9;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;
}


.catalog-filter:hover,
.catalog-filter.is-active {

    border-color:
        rgba(
            242,
            185,
            39,
            .62
        );

    background:
        rgba(
            242,
            185,
            39,
            .08
        );

    color:
        var(--dorado-claro);
}


/* =========================================================
   ORDENACIÓN
========================================================= */

.catalog-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-top:
        18px;
}


.catalog-results-count {

    margin:
        0;

    color:
        #8f8f8f;

    font-size:
        12px;
}


.catalog-sort {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #8f8f8f;

    font-size:
        12px;
}


.catalog-sort select {

    min-width:
        190px;

    height:
        36px;

    padding:
        0 10px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .18
        );

    border-radius:
        7px;

    outline:
        none;

    background:
        rgba(
            0,
            0,
            0,
            .20
        );

    color:
        #dddddd;

    font:
        inherit;

    font-size:
        12px;
}


/* =========================================================
   PRODUCTOS
========================================================= */

.catalog-products {

    padding:
        28px 0 72px;
}


.catalog-product-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;
}


/* =========================================================
   ESTADO VACÍO
========================================================= */

.catalog-empty-state {

    width:
        min(
            560px,
            100%
        );

    margin:
        24px auto 0;

    padding:
        54px 28px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .16
        );

    border-radius:
        16px;

    background:
        rgba(
            0,
            0,
            0,
            .12
        );

    text-align:
        center;
}


.catalog-empty-icon {

    width:
        50px;

    height:
        50px;

    margin:
        0 auto 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .24
        );

    border-radius:
        50%;

    color:
        var(--dorado);

    background:
        rgba(
            242,
            185,
            39,
            .05
        );
}


.catalog-empty-state h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        22px;

    line-height:
        1.2;
}


.catalog-empty-state p {

    margin:
        12px auto 0;

    color:
        var(--texto-secundario);

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================================
   BASE DE TARJETA FUTURA
========================================================= */

.catalog-product-card {

    min-width:
        0;

    min-height:
        340px;

    padding:
        14px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .20
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            .018
        );
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .catalog-product-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


@media (max-width: 720px) {

    .catalog-hero {

        padding-top:
            44px;
    }


    .catalog-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .catalog-sort select {

        min-width:
            210px;
    }


    .catalog-product-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


@media (max-width: 480px) {

    .catalog-container {

        width:
            calc(
                100% - 24px
            );
    }


    .catalog-heading h1 {

        font-size:
            38px;
    }


    .catalog-category-list {

        justify-content:
            flex-start;

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            4px;

        scrollbar-width:
            none;
    }


    .catalog-category-list::-webkit-scrollbar {

        display:
            none;
    }


    .catalog-filter {

        flex:
            0 0 auto;
    }


    .catalog-product-grid {

        grid-template-columns:
            1fr;
    }


    .catalog-empty-state {

        padding:
            42px 20px;
    }
}

/* =========================================================
   PRODUCTOS DINÁMICOS + PREVIEW
========================================================= */

.catalog-product-card {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.catalog-product-image-wrap {

    position:
        relative;

    aspect-ratio:
        1 / .82;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            .02
        );

}


.catalog-product-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    padding:
        14px;

    box-sizing:
        border-box;

}


.catalog-product-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    flex:
        1;

}


.catalog-product-category {

    color:
        var(--dorado);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.catalog-product-name {

    color:
        #fff;

    font-size:
        14px;

    line-height:
        1.25;

    text-decoration:
        none;

    font-weight:
        800;

}


.catalog-product-name:hover {

    color:
        #f6c83d;

}


.catalog-product-description {

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;

    color:
        #888;

    font-size:
        10px;

    line-height:
        1.5;

}


.catalog-product-price-row {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        baseline;

    gap:
        7px;

    margin-top:
        auto;

}


.catalog-product-price {

    color:
        #fff;

    font-size:
        17px;

    font-weight:
        800;

}


.catalog-product-original-price {

    color:
        #777;

    font-size:
        9px;

    text-decoration:
        line-through;

}


.catalog-product-offer {

    padding:
        3px 6px;

    border:
        1px solid
        rgba(
            242,
            185,
            39,
            .20
        );

    border-radius:
        999px;

    color:
        #f2b927;

    background:
        rgba(
            242,
            185,
            39,
            .05
        );

    font-size:
        8px;

    font-weight:
        800;

}


.catalog-product-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    margin-top:
        4px;

}


.catalog-product-action {

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    text-decoration:
        none;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    color:
        #cfcfcf;

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

}


.catalog-product-action.primary {

    border-color:
        rgba(
            242,
            185,
            39,
            .26
        );

    color:
        #f2c43a;

    background:
        rgba(
            242,
            185,
            39,
            .06
        );

}