/*
|--------------------------------------------------------------------------
| TIENDAS IA · MARKETPLACE LAYOUT V1
|--------------------------------------------------------------------------
|
| Capa visual únicamente.
| No modifica lógica, precios, promociones, stock ni carrito.
|
*/

:root{
    --market-max-width:1400px;
    --market-page-gap:14px;
    --market-shell-gap:28px;
    --market-section-radius:14px;
    --market-card-radius:10px;
    --market-card-width:180px;
}


/*
|--------------------------------------------------------------------------
| BASE DE LA PORTADA
|--------------------------------------------------------------------------
*/

body{
    background:#f3f4f6;
}

main{
    width:100%;
}


/*
|--------------------------------------------------------------------------
| SECCIONES COMPACTAS
|--------------------------------------------------------------------------
*/

.section{
   width:min(
    calc(100% - (var(--market-shell-gap) * 2)),
    var(--market-max-width)
);

    margin:
        var(--market-page-gap)
        auto
        0;

    padding:14px 12px;

    border-radius:
        var(
            --store-radius-lg,
            var(--market-section-radius)
        );

    overflow:hidden;
}


.section-soft{
    background:
        var(
            --surface,
            #ffffff
        );
}


/*
|--------------------------------------------------------------------------
| ENCABEZADOS DE SECCIÓN
|--------------------------------------------------------------------------
*/

.section-head{
    width:100%;
    max-width:none;

    margin:
        0
        0
        12px;

    text-align:left;
}


.section-head span{
    display:block;

    margin-bottom:3px;

    font-size:11px;
    font-weight:700;
    line-height:1.2;

    color:
        var(
            --primary,
            #172033
        );
}


.section-head h2{
    margin:0;

    font-size:
        clamp(
            18px,
            1.6vw,
            22px
        );

    line-height:1.15;
    font-weight:800;
}


.section-head p{
    max-width:760px;

    margin:
        5px
        0
        0;

    font-size:12px;
    line-height:1.45;

    color:
        var(
            --muted,
            #64748b
        );
}


/*
|--------------------------------------------------------------------------
| SLIDERS
|--------------------------------------------------------------------------
*/

.store-product-slider{
    width:100%;
    max-width:none;

    margin:0;

    padding:
        0
        34px;
}


/*
|--------------------------------------------------------------------------
| TRACK DE PRODUCTOS
|--------------------------------------------------------------------------
*/

.products,
.products.store-products-track,
.store-showcase-track{
    display:grid;

    grid-auto-flow:column;

    grid-auto-columns:
        minmax(
            160px,
            var(--market-card-width)
        );

    grid-template-columns:none;

    gap:8px;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:
        2px
        0
        8px;

    scroll-snap-type:x proximity;

    scrollbar-width:none;
}


.products::-webkit-scrollbar,
.products.store-products-track::-webkit-scrollbar,
.store-showcase-track::-webkit-scrollbar{
    display:none;
}


/*
|--------------------------------------------------------------------------
| TARJETA DE PRODUCTO
|--------------------------------------------------------------------------
*/

.product,
.store-products-track > .product,
.store-showcase-track > .product{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    border:
        1px
        solid
        var(
            --line,
            #e5e7eb
        );

    border-radius:
        var(
            --store-radius-md,
            var(--market-card-radius)
        );

    background:
        var(
            --surface,
            #ffffff
        );

    overflow:hidden;

    scroll-snap-align:start;

    box-shadow:none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.product:hover{
    transform:translateY(-2px);

    box-shadow:
        0
        5px
        16px
        rgba(15,23,42,.09);
}


/*
|--------------------------------------------------------------------------
| IMAGEN DE PRODUCTO
|--------------------------------------------------------------------------
*/

.product-media{
    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#ffffff;
}


.product-image{
    width:100%;
    height:100%;

    object-fit:contain;

    padding:6px;
}


/*
|--------------------------------------------------------------------------
| BADGE
|--------------------------------------------------------------------------
*/

.sale-badge{
    position:absolute;

    top:6px;
    right:6px;

    z-index:3;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:22px;

    padding:3px 6px;

    border-radius:6px;

    font-size:10px;
    font-weight:800;
    line-height:1;

    background:
        var(
            --primary,
            #172033
        );

    color:#ffffff;
}


/*
|--------------------------------------------------------------------------
| CUERPO DE TARJETA
|--------------------------------------------------------------------------
*/

.product-body{
    display:flex;
    flex:1;
    flex-direction:column;

    padding:
        8px
        8px
        9px;
}


.product-category{
    display:block;

    margin-bottom:4px;

    overflow:hidden;

    font-size:10px;
    line-height:1.2;
    font-weight:600;

    color:
        var(
            --muted,
            #64748b
        );

    white-space:nowrap;
    text-overflow:ellipsis;
}


.product-body h3{
    display:-webkit-box;

    min-height:31px;

    margin:0;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    font-size:12px;
    font-weight:500;
    line-height:1.3;

    color:
        var(
            --ink,
            #172033
        );
}


.product-description{
    display:none;
}


/*
|--------------------------------------------------------------------------
| PRECIO
|--------------------------------------------------------------------------
*/

.product-meta{
    margin-top:auto;
}


.product-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;

    gap:
        2px
        6px;

    margin-top:8px;
}


.product-price-current{
    display:block;

    width:100%;

    font-size:16px;
    line-height:1.15;
    font-weight:800;

    color:
        var(
            --ink,
            #172033
        );
}


.product-price-original{
    order:2;

    font-size:10px;
    line-height:1.2;

    color:
        var(
            --muted,
            #64748b
        );

    text-decoration:line-through;
}


.stock{
    margin-top:4px;

    font-size:10px;
    line-height:1.3;

    color:
        var(
            --muted,
            #64748b
        );
}


/*
|--------------------------------------------------------------------------
| BOTÓN DE PRODUCTO
|--------------------------------------------------------------------------
*/

.product-actions{
    margin-top:8px;
}


.product-actions .button{
    width:100%;

    min-height:32px;

    padding:
        7px
        8px;

    border-radius:
        var(
            --store-radius-sm,
            8px
        );

    font-size:11px;
    font-weight:700;
}


/*
|--------------------------------------------------------------------------
| FLECHAS DE CARRUSEL
|--------------------------------------------------------------------------
*/

.store-slider-arrow{
    width:30px;
    height:44px;

    border-radius:8px;

    opacity:.92;
}


/*
|--------------------------------------------------------------------------
| FLASH SALES
|--------------------------------------------------------------------------
*/

.store-flash-sales{
    padding:
        12px;
}


.store-flash-sales .section-head{
    margin-bottom:8px;
}


.store-flash-sales-countdown{
    justify-content:flex-start !important;

    margin:
        0
        0
        10px !important;

    font-size:12px;
}


.store-flash-sales-countdown strong{
    min-width:auto !important;

    padding:
        6px
        9px !important;

    border-radius:
        7px !important;

    font-size:11px;
}


/*
|--------------------------------------------------------------------------
| SHOWCASES
|--------------------------------------------------------------------------
*/

.store-showcase-section{
    width:min(
    calc(100% - (var(--market-shell-gap) * 2)),
    var(--market-max-width)
);

    margin:
        var(--market-page-gap)
        auto
        0;

    padding:
        14px
        12px;
}


.store-showcase-section .section-head{
    padding:0;

    margin-bottom:12px;
}


/*
|--------------------------------------------------------------------------
| BENEFICIOS
|--------------------------------------------------------------------------
*/

.benefits{
    width:min(
    calc(100% - (var(--market-shell-gap) * 2)),
    var(--market-max-width)
);

    margin:
        var(--market-page-gap)
        auto
        0;

    padding:
        10px
        12px;

    gap:8px;
}


.benefit{
    padding:
        8px
        10px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media(max-width:1000px){

    :root{
        --market-card-width:170px;
        --market-shell-gap:18px;
    }

    .section,
    .store-showcase-section,
    .benefits{
        width:
            calc(100% - (var(--market-shell-gap) * 2));
    }

    .store-product-slider{
        padding:
            0
            30px;
    }

}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media(max-width:700px){

    :root{
        --market-page-gap:8px;
        --market-shell-gap:10px;
        --market-card-width:148px;
    }

    .section,
    .store-showcase-section,
    .benefits{
        width:
            calc(100% - (var(--market-shell-gap) * 2));

        margin-top:
            var(--market-page-gap);

        padding:
            10px
            8px;
    }


    .section-head{
        margin-bottom:9px;
    }


    .section-head h2{
        font-size:18px;
    }


    .section-head p{
        font-size:11px;
    }


    .store-product-slider{
        padding:0;
    }


    .products,
    .products.store-products-track,
    .store-showcase-track{
        grid-auto-columns:
            minmax(
                142px,
                44vw
            );

        gap:7px;
    }


    .store-slider-arrow{
        display:none;
    }


    .product-body{
        padding:
            7px;
    }


    .product-body h3{
        font-size:11px;
    }


    .product-price-current{
        font-size:15px;
    }


    .product-actions .button{
        min-height:30px;

        font-size:10px;
    }

}

/*
|--------------------------------------------------------------------------
| TIENDAS IA · MARKETPLACE UNIFICADOR V2
|--------------------------------------------------------------------------
| Unifica banners, hero, categorías, marcas y bloques.
| Solo presentación. No toca lógica.
|--------------------------------------------------------------------------
*/

.header{
    padding:
        10px
        var(--market-shell-gap) !important;

    gap:16px !important;
}


.nav{
    gap:18px !important;
}


.nav a{
    font-size:13px !important;
}


.store-main-slider-section,
.store-categories-section,
.store-brands-section,
.hero,
.section,
.store-showcase-section,
.benefits{
    width:min(
        calc(100% - (var(--market-shell-gap) * 2)),
        var(--market-max-width)
    ) !important;

    margin:
        var(--market-page-gap)
        auto
        0 !important;

    border:
        1px solid
        var(--line, #e5e7eb);

    border-radius:
        var(
            --store-radius-lg,
            var(--market-section-radius)
        ) !important;

    overflow:hidden !important;

    box-shadow:
        0 8px 24px rgba(15,23,42,.06);
}


/*
|--------------------------------------------------------------------------
| SLIDER PRINCIPAL
|--------------------------------------------------------------------------
*/

.store-main-slider-section{
    padding:0 !important;
    background:#ffffff !important;

    --main-slider-height:420px !important;
}


.store-main-slider{
    border-radius:inherit;
    overflow:hidden;
}


/*
|--------------------------------------------------------------------------
| HERO ALINEADO A ESTILO MARKETPLACE
|--------------------------------------------------------------------------
*/

.hero{
    min-height:460px !important;

    gap:24px !important;

    padding:24px !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .95fr) !important;
}


.hero h1{
    max-width:680px !important;

    margin:14px 0 !important;

    font-size:
        clamp(
            30px,
            4.2vw,
            58px
        ) !important;

    line-height:1.02 !important;
}


.hero p{
    max-width:560px !important;

    font-size:16px !important;
    line-height:1.5 !important;
}


.hero-actions{
    margin-top:18px !important;
}


.hero-visual{
    min-height:340px !important;
}


.hero-image-box{
    width:100% !important;
    max-width:560px !important;

    padding:12px !important;

    border-radius:20px !important;

    box-shadow:none !important;
}


.hero-image{
    height:340px !important;
    border-radius:16px !important;
}


.price-pill{
    right:16px !important;
    bottom:16px !important;

    padding:12px 14px !important;

    border-radius:14px !important;
}


/*
|--------------------------------------------------------------------------
| CATEGORÍAS
|--------------------------------------------------------------------------
*/

.store-categories-section{
    padding:16px 14px !important;
    background:var(--cat-section-bg, #ffffff) !important;
}


.store-categories-head{
    margin-bottom:14px !important;
}


.store-categories-head h2{
    font-size:clamp(20px, 2vw, 28px) !important;
    line-height:1.1 !important;
}


.store-categories-track{
    gap:10px !important;
}


.store-category-card{
    border-radius:14px !important;
    box-shadow:none !important;
}


/*
|--------------------------------------------------------------------------
| MARCAS
|--------------------------------------------------------------------------
*/

.store-brands-section{
    padding:14px 12px !important;
}


.store-brands-inner{
    padding:0 !important;
}


.store-brands-head{
    margin-bottom:10px !important;
}


.store-brand-card{
    border-radius:12px !important;
    box-shadow:none !important;
}


/*
|--------------------------------------------------------------------------
| BLOQUES DE PRODUCTOS
|--------------------------------------------------------------------------
*/

.section,
.store-showcase-section{
    padding:14px 12px !important;
}


.section-head,
.store-showcase-section .section-head{
    margin-bottom:12px !important;
}


.section-head h2,
.store-showcase-section .section-head h2{
    font-size:clamp(20px, 2vw, 26px) !important;
    line-height:1.1 !important;
}


.section-head p,
.store-showcase-section .section-head p{
    font-size:12px !important;
}


/*
|--------------------------------------------------------------------------
| MÓVIL / TABLET
|--------------------------------------------------------------------------
*/

@media(max-width:1000px){

    .store-main-slider-section{
        --main-slider-height:360px !important;
    }

    .hero{
        min-height:auto !important;
        grid-template-columns:1fr !important;
        padding:18px !important;
    }

    .hero-image{
        height:300px !important;
    }
}


@media(max-width:700px){

    .header{
        padding:
            10px
            var(--market-shell-gap) !important;
    }

    .nav{
        gap:12px !important;
    }

    .store-main-slider-section{
        --main-slider-height:280px !important;
    }

    .hero{
        padding:14px !important;
        gap:14px !important;
    }

    .hero h1{
        font-size:28px !important;
    }

    .hero p{
        font-size:14px !important;
    }

    .hero-image{
        height:220px !important;
    }

    .store-categories-section,
    .store-brands-section,
    .section,
    .store-showcase-section,
    .benefits{
        padding:10px 8px !important;
    }
}
/*
|--------------------------------------------------------------------------
| TIENDAS IA · FEATURED SPLIT V1
|--------------------------------------------------------------------------
| Producto protagonista + listado lateral.
| Solo presentación.
|--------------------------------------------------------------------------
*/

.store-featured-split{
    width:min(
        calc(100% - (var(--market-shell-gap) * 2)),
        var(--market-max-width)
    );

    margin:
        var(--market-page-gap)
        auto
        0;

    padding:14px;

    border:
        1px solid
        var(--line, #e5e7eb);

    border-radius:
        var(
            --store-radius-lg,
            var(--market-section-radius)
        );

    background:
        var(--surface, #ffffff);

    box-shadow:
        0 8px 24px
        rgba(15,23,42,.06);

    overflow:hidden;
}


/*
|--------------------------------------------------------------------------
| GRID GENERAL
|--------------------------------------------------------------------------
*/

.store-featured-split-grid{
    display:grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(320px, .75fr);

    gap:14px;
}


/*
|--------------------------------------------------------------------------
| BLOQUE PRINCIPAL
|--------------------------------------------------------------------------
*/

.store-featured-split-main{
    min-width:0;

    border:
        1px solid
        var(--line, #e5e7eb);

    border-radius:
        var(--store-radius-md, 12px);

    background:#fff;

    overflow:hidden;
}


.store-featured-split-main-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:
        12px
        14px;

    border-bottom:
        1px solid
        var(--line, #e5e7eb);
}


.store-featured-split-eyebrow{
    display:block;

    margin-bottom:3px;

    font-size:10px;
    font-weight:800;
    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.05em;

    color:
        var(--primary, #172033);
}


.store-featured-split-main-head h2{
    margin:0;

    font-size:
        clamp(
            19px,
            2vw,
            26px
        );

    line-height:1.1;
    font-weight:800;

    color:
        var(--ink, #172033);
}


/*
|--------------------------------------------------------------------------
| PRODUCTO PRINCIPAL
|--------------------------------------------------------------------------
*/

.store-featured-main-product{
    display:grid;

    grid-template-columns:
        minmax(280px, 46%)
        minmax(0, 1fr);

    min-height:390px;
}


.store-featured-main-media{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;

    padding:18px;

    border-right:
        1px solid
        var(--line, #e5e7eb);

    background:#fff;

    text-decoration:none;
}


.store-featured-main-media img{
    display:block;

    width:100%;
    height:350px;

    object-fit:contain;
}


.store-featured-placeholder{
    display:grid;
    place-items:center;

    width:100%;
    height:350px;

    font-size:64px;

    background:#f8fafc;
}


.store-featured-discount{
    position:absolute;

    top:12px;
    right:12px;

    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:44px;
    min-height:28px;

    padding:
        5px
        8px;

    border-radius:7px;

    background:
        var(--primary, #172033);

    color:#fff;

    font-size:12px;
    font-weight:900;
}


/*
|--------------------------------------------------------------------------
| INFORMACIÓN PRODUCTO PRINCIPAL
|--------------------------------------------------------------------------
*/

.store-featured-main-body{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;

    padding:
        24px;
}


.store-featured-category{
    display:block;

    margin-bottom:7px;

    color:
        var(--muted, #64748b);

    font-size:11px;
    font-weight:700;
}


.store-featured-main-name{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    color:
        var(--ink, #172033);

    text-decoration:none;

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    line-height:1.14;
    font-weight:800;
}


.store-featured-main-name:hover{
    color:
        var(--primary, #172033);
}


.store-featured-description{
    display:-webkit-box;

    margin:
        12px
        0
        0;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    color:
        var(--muted, #64748b);

    font-size:13px;
    line-height:1.5;
}


.store-featured-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;

    gap:
        4px
        10px;

    margin-top:18px;
}


.store-featured-price strong{
    order:1;

    width:100%;

    color:
        var(--ink, #172033);

    font-size:
        clamp(
            25px,
            2.5vw,
            34px
        );

    line-height:1;
    font-weight:900;
}


.store-featured-price-old{
    order:2;

    color:
        var(--muted, #64748b);

    font-size:13px;

    text-decoration:line-through;
}


.store-featured-stock{
    margin-top:8px;

    color:
        var(--muted, #64748b);

    font-size:11px;
}


.store-featured-add{
    width:100%;
    max-width:260px;

    min-height:40px;

    margin-top:18px;

    font-size:12px;
}


/*
|--------------------------------------------------------------------------
| COLUMNA LATERAL
|--------------------------------------------------------------------------
*/

.store-featured-split-side{
    min-width:0;

    border:
        1px solid
        var(--line, #e5e7eb);

    border-radius:
        var(--store-radius-md, 12px);

    background:#fff;

    overflow:hidden;
}


.store-featured-side-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:54px;

    padding:
        10px
        14px;

    border-bottom:
        1px solid
        var(--line, #e5e7eb);
}


.store-featured-side-head h3{
    margin:0;

    color:
        var(--ink, #172033);

    font-size:18px;
    line-height:1.1;
    font-weight:800;
}


.store-featured-side-head a{
    flex:none;

    color:
        var(--primary, #172033);

    text-decoration:none;

    font-size:11px;
    font-weight:800;
}


/*
|--------------------------------------------------------------------------
| PRODUCTOS LATERALES
|--------------------------------------------------------------------------
*/

.store-featured-side-list{
    display:flex;
    flex-direction:column;
}


.store-featured-side-product{
    display:grid;

    grid-template-columns:
        92px
        minmax(0, 1fr);

    gap:10px;

    min-height:102px;

    padding:
        8px
        10px;

    border-bottom:
        1px solid
        var(--line, #e5e7eb);

    color:inherit;
    text-decoration:none;

    transition:
        background .18s ease;
}


.store-featured-side-product:last-child{
    border-bottom:0;
}


.store-featured-side-product:hover{
    background:#f8fafc;
}


.store-featured-side-image{
    width:92px;
    height:86px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-radius:
        var(--store-radius-sm, 8px);

    background:#fff;
}


.store-featured-side-image img{
    display:block;

    width:100%;
    height:100%;

    padding:3px;

    object-fit:contain;
}


.store-featured-side-image span{
    font-size:28px;
}


.store-featured-side-info{
    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;
}


.store-featured-side-info > span{
    margin-bottom:3px;

    overflow:hidden;

    color:
        var(--muted, #64748b);

    font-size:9px;
    font-weight:600;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.store-featured-side-info strong{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    color:
        var(--ink, #172033);

    font-size:11px;
    line-height:1.3;
    font-weight:600;
}


.store-featured-side-info b{
    margin-top:6px;

    color:
        var(--ink, #172033);

    font-size:14px;
    line-height:1.1;
    font-weight:900;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media(max-width:1000px){

    .store-featured-split-grid{
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, .8fr);
    }


    .store-featured-main-product{
        grid-template-columns:1fr;
    }


    .store-featured-main-media{
        border-right:0;

        border-bottom:
            1px solid
            var(--line, #e5e7eb);
    }


    .store-featured-main-media img{
        height:280px;
    }


    .store-featured-placeholder{
        height:280px;
    }


    .store-featured-main-body{
        padding:18px;
    }

}


/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media(max-width:700px){

    .store-featured-split{
        width:
            calc(
                100%
                -
                (
                    var(--market-shell-gap)
                    * 2
                )
            );

        padding:8px;
    }


    .store-featured-split-grid{
        grid-template-columns:1fr;

        gap:8px;
    }


    .store-featured-main-product{
        grid-template-columns:1fr;

        min-height:0;
    }


    .store-featured-main-media{
        padding:10px;
    }


    .store-featured-main-media img{
        height:240px;
    }


    .store-featured-placeholder{
        height:240px;
    }


    .store-featured-main-body{
        padding:14px;
    }


    .store-featured-main-name{
        font-size:20px;
    }


    .store-featured-price strong{
        font-size:25px;
    }


    .store-featured-add{
        max-width:none;
    }


    .store-featured-side-product{
        grid-template-columns:
            78px
            minmax(0, 1fr);

        min-height:88px;

        padding:
            7px
            8px;
    }


    .store-featured-side-image{
        width:78px;
        height:74px;
    }

}