/**
 * UNOSKREATIVOS — STORE UI
 * Archivo: /modules/store/store.css
 * Versión: 1.2.1
 *
 * Responsabilidad:
 * - Navegación por categorías y subcategorías
 * - Catálogo / grid de productos
 * - Tarjetas de producto
 * - Estados de carga, vacío y error
 * - Buscador / ordenamiento preparado
 * - Responsive desktop, tablet y mobile
 *
 * Este archivo reutiliza las variables globales del index:
 * --bg, --bg2, --card, --card2, --line, --white, --muted,
 * --accent, --accent2, --accent-soft, --accent-glow, --green
 */

/* =========================================================
   01. TOKENS LOCALES
========================================================= */

.store-shell{
    --store-radius:18px;
    --store-radius-sm:12px;
    --store-gap:18px;
    --store-border:rgba(255,255,255,.10);
    --store-border-strong:rgba(204,255,0,.36);
    --store-panel:rgba(12,12,12,.92);
    --store-panel-2:rgba(18,18,18,.96);
    --store-text:#f4f4f4;
    --store-muted:#969696;
    --store-accent:var(--accent,#ccff00);
    --store-accent-2:var(--accent2,#b3e600);
    --store-shadow:0 22px 70px rgba(0,0,0,.34);
    --store-focus:0 0 0 3px rgba(204,255,0,.20);

    position:relative;
    width:100%;
    isolation:isolate;
}

.store-shell *,
.store-shell *::before,
.store-shell *::after{
    box-sizing:border-box;
}

/* =========================================================
   02. CABECERA INTERNA / TOOLBAR
========================================================= */

.store-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    margin:0 0 22px;
}

.store-toolbar__search{
    position:relative;
    min-width:0;
}

.store-toolbar__search svg{
    position:absolute;
    left:16px;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    color:var(--store-muted);
    pointer-events:none;
}

.store-search{
    width:100%;
    min-height:50px;
    padding:0 46px 0 46px;
    border:1px solid var(--store-border);
    border-radius:999px;
    background:#0a0a0a;
    color:var(--store-text);
    font:inherit;
    font-size:14px;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.store-search::placeholder{
    color:#6f6f6f;
}

.store-search:hover{
    border-color:rgba(255,255,255,.18);
}

.store-search:focus{
    border-color:var(--store-accent);
    box-shadow:var(--store-focus);
    background:#0d0d0d;
}

.store-search-clear{
    position:absolute;
    right:10px;
    top:50%;
    width:32px;
    height:32px;
    transform:translateY(-50%);
    border:0;
    border-radius:50%;
    background:transparent;
    color:#888;
    cursor:pointer;
    display:grid;
    place-items:center;
}

.store-search-clear:hover,
.store-search-clear:focus-visible{
    color:#111;
    background:var(--store-accent);
    outline:none;
}

.store-sort{
    min-height:50px;
    padding:0 42px 0 16px;
    border:1px solid var(--store-border);
    border-radius:999px;
    background:#0a0a0a;
    color:var(--store-text);
    font:inherit;
    font-size:13px;
    font-weight:800;
    outline:none;
    cursor:pointer;
}

.store-sort:focus{
    border-color:var(--store-accent);
    box-shadow:var(--store-focus);
}

/* =========================================================
   03. NAVEGACIÓN PRINCIPAL DE CATEGORÍAS
========================================================= */

.store-category-nav{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    margin:0 0 16px;
    padding:2px 2px 9px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--store-accent) #111;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
}

.store-category-nav::-webkit-scrollbar{
    height:5px;
}

.store-category-nav::-webkit-scrollbar-track{
    background:#111;
    border-radius:10px;
}

.store-category-nav::-webkit-scrollbar-thumb{
    background:var(--store-accent);
    border-radius:10px;
}

.store-category-link,
.store-category-button{
    flex:0 0 auto;
    min-height:44px;
    padding:0 18px;
    border:1px solid var(--store-border);
    border-radius:999px;
    background:#0a0a0a;
    color:#d8d8d8;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.75px;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    scroll-snap-align:start;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.store-category-link svg,
.store-category-button svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
}

.store-category-text{
    display:inline;
}

.store-category-link:hover,
.store-category-link:focus-visible,
.store-category-button:hover,
.store-category-button:focus-visible{
    color:#fff;
    border-color:var(--store-border-strong);
    background:#111;
    transform:translateY(-1px);
    outline:none;
}

.store-category-link.is-active,
.store-category-button.is-active,
.store-category-link[aria-current="true"],
.store-category-button[aria-pressed="true"]{
    background:var(--store-accent);
    border-color:var(--store-accent);
    color:#050505;
    box-shadow:0 10px 28px rgba(204,255,0,.13);
}

/* =========================================================
   04. SUBCATEGORÍAS
========================================================= */

.store-subcategory-slot{
    min-height:0;
    margin:0 0 24px;
}

.store-subcategory-slot:empty{
    display:none;
}


.store-subcategory-slot,
.store-subcategory-nav,
.store-subcategory-track{
    max-width:100%;
}

.store-subcategory-nav{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:12px;
    width:100%;
    min-width:0;
    padding:12px 13px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:var(--store-radius-sm);
    background:
        linear-gradient(145deg,rgba(204,255,0,.035),rgba(255,255,255,.012)),
        #080808;
}

.store-subcategory-label{
    flex:0 0 auto;
    margin:0;
    color:#858585;
    font-size:10px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:1.5px;
    white-space:nowrap;
}

.store-subcategory-track{
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.store-subcategory-button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 14px;
    border:1px solid #292929;
    border-radius:999px;
    background:#0c0c0c;
    color:#bcbcbc;
    font:inherit;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    white-space:nowrap;
    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.store-subcategory-icon{
    width:16px;
    height:16px;
    flex:0 0 auto;
}

.store-subcategory-text{
    display:inline;
}

.store-subcategory-button:hover,
.store-subcategory-button:focus-visible{
    border-color:rgba(204,255,0,.42);
    color:#fff;
    background:#111;
    transform:translateY(-1px);
    outline:none;
}

.store-subcategory-button.is-active,
.store-subcategory-button[aria-pressed="true"]{
    border-color:var(--store-accent);
    background:var(--store-accent);
    color:#050505;
    box-shadow:0 8px 22px rgba(204,255,0,.11);
}

/* =========================================================
   05. CATEGORÍAS DESTACADAS
========================================================= */

.store-category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--store-gap);
    margin-top:20px;
}

.store-category-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--store-border);
    border-radius:var(--store-radius);
    background:
        linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),
        #0b0b0b;
    box-shadow:0 12px 42px rgba(0,0,0,.20);
    cursor:pointer;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.store-category-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(204,255,0,.055),transparent 34%);
    opacity:0;
    transition:opacity .25s ease;
}

.store-category-card:hover,
.store-category-card:focus-within{
    transform:translateY(-5px);
    border-color:rgba(204,255,0,.34);
    box-shadow:var(--store-shadow);
}

.store-category-card:hover::after,
.store-category-card:focus-within::after{
    opacity:1;
}

.store-category-media{
    position:relative;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:#0e0e0e;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.store-category-media::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.44));
}

.store-category-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.002);
    transition:transform .42s cubic-bezier(.2,.7,.2,1);
}

.store-category-card:hover .store-category-media img{
    transform:scale(1.045);
}

.store-category-body{
    position:relative;
    z-index:1;
    padding:22px;
}

.store-category-kicker{
    color:var(--store-accent);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.65px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.store-category-card h3{
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(1.25rem,2vw,1.75rem);
    line-height:1.02;
    font-weight:900;
    letter-spacing:-.5px;
    text-transform:uppercase;
}

.store-category-card p{
    margin:0;
    color:var(--store-muted);
    line-height:1.55;
    font-size:13px;
}

.store-category-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:16px;
}

.store-category-meta span{
    padding:6px 9px;
    border:1px solid #292929;
    border-radius:999px;
    background:#090909;
    color:#9d9d9d;
    font-size:9px;
    font-weight:850;
    letter-spacing:.55px;
    text-transform:uppercase;
}

/* =========================================================
   06. CABECERA DE RESULTADOS
========================================================= */

.store-results-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin:30px 0 17px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.store-results-heading{
    min-width:0;
}

.store-results-eyebrow{
    display:block;
    color:var(--store-accent);
    margin-bottom:5px;
    font-size:9px;
    font-weight:950;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.store-results-title{
    margin:0;
    color:#fff;
    font-size:clamp(1.65rem,3vw,2.55rem);
    line-height:1;
    font-weight:900;
    letter-spacing:-1px;
    text-transform:uppercase;
}

.store-results-count{
    flex:0 0 auto;
    color:#7d7d7d;
    font-size:11px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
}

/* =========================================================
   07. GRID DE PRODUCTOS
========================================================= */

.store-products-slot{
    min-height:140px;
}

.store-product-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.store-product-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--store-border);
    border-radius:16px;
    background:
        linear-gradient(155deg,rgba(255,255,255,.026),transparent 45%),
        #0b0b0b;
    box-shadow:0 8px 30px rgba(0,0,0,.16);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.store-product-card:hover,
.store-product-card:focus-within{
    transform:translateY(-4px);
    border-color:rgba(204,255,0,.31);
    box-shadow:0 20px 48px rgba(0,0,0,.30);
}

.store-product-media{
    position:relative;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 22%,rgba(204,255,0,.055),transparent 38%),
        #111;
}

.store-product-media::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:34%;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.34));
    pointer-events:none;
}

.store-product-image-button{
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    display:block;
}

.store-product-image-button:focus-visible{
    outline:2px solid var(--store-accent);
    outline-offset:-3px;
}

.store-product-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .38s cubic-bezier(.2,.7,.2,1);
}

.store-product-card:hover .store-product-image{
    transform:scale(1.035);
}

.store-product-badges{
    position:absolute;
    top:11px;
    left:11px;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    max-width:calc(100% - 22px);
}

.store-product-badge{
    min-height:25px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(204,255,0,.42);
    border-radius:999px;
    background:rgba(8,8,8,.86);
    backdrop-filter:blur(9px);
    color:var(--store-accent);
    font-size:8px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.store-product-badge--accent{
    color:#050505;
    background:var(--store-accent);
    border-color:var(--store-accent);
}

.store-product-favorite{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    background:rgba(8,8,8,.76);
    color:#b1b1b1;
    backdrop-filter:blur(9px);
    cursor:pointer;
    transition:.2s ease;
}

.store-product-favorite svg{
    width:17px;
    height:17px;
}

.store-product-favorite:hover,
.store-product-favorite:focus-visible,
.store-product-favorite.is-active{
    color:#050505;
    background:var(--store-accent);
    border-color:var(--store-accent);
    outline:none;
}

.store-product-body{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    padding:16px 16px 17px;
}

.store-product-category{
    color:#727272;
    margin-bottom:7px;
    font-size:8px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:1.35px;
    text-transform:uppercase;
}

.store-product-title{
    margin:0 0 8px;
    color:#f4f4f4;
    font-size:15px;
    line-height:1.28;
    font-weight:850;
    letter-spacing:-.18px;
}

.store-product-title button,
.store-product-title a{
    color:inherit;
    text-decoration:none;
    background:none;
    border:0;
    padding:0;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.store-product-title button:hover,
.store-product-title button:focus-visible,
.store-product-title a:hover,
.store-product-title a:focus-visible{
    color:var(--store-accent);
    outline:none;
}

.store-product-description{
    margin:0 0 12px;
    min-height:2.8em;
    color:#888;
    font-size:11px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.store-product-footer{
    margin-top:auto;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
}

.store-product-price-wrap{
    min-width:0;
}

.store-product-price-label{
    display:block;
    margin-bottom:3px;
    color:#686868;
    font-size:8px;
    font-weight:850;
    letter-spacing:1px;
    text-transform:uppercase;
}

.store-product-price{
    color:var(--store-accent);
    font-size:17px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.25px;
}

.store-product-open{
    flex:0 0 auto;
    min-width:38px;
    min-height:38px;
    padding:0 11px;
    border:1px solid #303030;
    border-radius:10px;
    background:#111;
    color:#eee;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font:inherit;
    font-size:10px;
    font-weight:900;
    letter-spacing:.6px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.2s ease;
}

.store-product-open svg{
    width:15px;
    height:15px;
}

.store-product-open:hover,
.store-product-open:focus-visible{
    border-color:var(--store-accent);
    background:var(--store-accent);
    color:#050505;
    outline:none;
}

/* =========================================================
   08. ESTADOS DEL CATÁLOGO
========================================================= */

.store-state{
    width:100%;
    min-height:210px;
    padding:34px 22px;
    border:1px dashed #292929;
    border-radius:var(--store-radius);
    background:
        radial-gradient(circle at 50% 0%,rgba(204,255,0,.045),transparent 42%),
        #090909;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.store-state__icon{
    width:48px;
    height:48px;
    margin-bottom:14px;
    display:grid;
    place-items:center;
    border:1px solid rgba(204,255,0,.24);
    border-radius:50%;
    color:var(--store-accent);
}

.store-state__icon svg{
    width:22px;
    height:22px;
}

.store-state strong{
    color:#fff;
    margin-bottom:7px;
    font-size:16px;
}

.store-state p{
    max-width:520px;
    margin:0;
    color:#777;
    font-size:12px;
    line-height:1.55;
}

.store-state__button{
    margin-top:16px;
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--store-accent);
    border-radius:999px;
    background:var(--store-accent);
    color:#050505;
    font:inherit;
    font-size:10px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
}

/* Carga / Skeleton */
.store-product-card.is-loading{
    pointer-events:none;
}

.store-skeleton{
    position:relative;
    overflow:hidden;
    background:#151515;
}

.store-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.055),
        transparent
    );
    animation:storeSkeleton 1.25s infinite;
}

@keyframes storeSkeleton{
    to{transform:translateX(100%)}
}

/* =========================================================
   09. CARGAR MÁS / PAGINACIÓN
========================================================= */

.store-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:30px;
}

.store-load-more{
    min-height:48px;
    padding:0 22px;
    border:1px solid rgba(204,255,0,.45);
    border-radius:999px;
    background:#0b0b0b;
    color:#fff;
    font:inherit;
    font-size:10px;
    font-weight:950;
    letter-spacing:.8px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.2s ease;
}

.store-load-more:hover,
.store-load-more:focus-visible{
    background:var(--store-accent);
    border-color:var(--store-accent);
    color:#050505;
    outline:none;
}

.store-load-more:disabled{
    opacity:.35;
    cursor:not-allowed;
}

/* =========================================================
   10. ACCESIBILIDAD
========================================================= */

.store-visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.store-shell button:focus-visible,
.store-shell a:focus-visible,
.store-shell input:focus-visible,
.store-shell select:focus-visible{
    outline:none;
}

.store-shell button:focus-visible,
.store-shell a:focus-visible{
    box-shadow:var(--store-focus);
}

/* =========================================================
   11. TABLET
========================================================= */

@media (max-width:1100px){
    .store-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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

@media (max-width:860px){
    .store-subcategory-nav{
        grid-template-columns:auto minmax(0,1fr);
    }

    .store-subcategory-track{
        flex-wrap:nowrap;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:none;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .store-subcategory-track::-webkit-scrollbar{
        display:none;
    }

    .store-subcategory-button{
        scroll-snap-align:center;
    }

    .store-toolbar{
        grid-template-columns:1fr;
    }

    .store-sort{
        width:100%;
    }

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

    .store-results-header{
        align-items:flex-start;
    }
}

/* =========================================================
   12. MOBILE
========================================================= */

@media (max-width:640px){
    .store-shell{
        --store-gap:11px;
    }

    .store-category-nav{
        width:100%;
        max-width:100%;
        gap:8px;
        margin:0 0 14px;
        padding:2px 2px 8px;
        overflow-x:auto;
        overflow-y:hidden;
        overscroll-behavior-inline:contain;
        scrollbar-width:none;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }

    .store-category-nav::-webkit-scrollbar{
        display:none;
    }

    .store-category-link,
    .store-category-button{
        width:48px;
        min-width:48px;
        height:48px;
        min-height:48px;
        padding:0;
        border-radius:14px;
        gap:0;
        scroll-snap-align:center;
    }

    .store-category-link svg,
    .store-category-button svg{
        width:19px;
        height:19px;
    }

    .store-category-text{
        display:none;
    }

    .store-subcategory-nav{
        grid-template-columns:1fr;
        gap:10px;
        width:100%;
        max-width:100%;
        min-width:0;
        padding:12px;
        overflow:hidden;
        border-radius:12px;
    }

    .store-subcategory-label{
        display:block;
        width:100%;
        padding:0 2px;
        color:var(--store-accent);
        font-size:9px;
        line-height:1;
        letter-spacing:1.35px;
    }

    .store-subcategory-track{
        width:100%;
        max-width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:repeat(4,minmax(48px,1fr));
        gap:8px;
        overflow:visible;
        padding:0;
    }

    .store-subcategory-button{
        width:100%;
        min-width:0;
        height:50px;
        min-height:50px;
        padding:0;
        border-radius:13px;
        gap:0;
    }

    .store-subcategory-icon{
        width:20px;
        height:20px;
    }

    .store-subcategory-text{
        display:none;
    }

    .store-category-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .store-category-card{
        display:grid;
        grid-template-columns:112px minmax(0,1fr);
        border-radius:14px;
    }

    .store-category-media{
        aspect-ratio:auto;
        min-height:142px;
        border-bottom:0;
        border-right:1px solid rgba(255,255,255,.07);
    }

    .store-category-body{
        align-self:center;
        padding:17px 16px;
    }

    .store-category-card h3{
        font-size:1.12rem;
    }

    .store-category-card p{
        font-size:11px;
        line-height:1.45;
    }

    .store-category-meta{
        margin-top:11px;
    }

    .store-category-meta span{
        font-size:8px;
        padding:5px 7px;
    }

    .store-results-header{
        margin-top:24px;
        gap:10px;
    }

    .store-results-title{
        font-size:1.7rem;
    }

    .store-results-count{
        padding-top:4px;
        font-size:9px;
    }

    .store-product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .store-product-card{
        border-radius:13px;
    }

    .store-product-body{
        padding:12px;
    }

    .store-product-category{
        font-size:7px;
        letter-spacing:1px;
    }

    .store-product-title{
        font-size:13px;
        line-height:1.25;
        margin-bottom:6px;
    }

    .store-product-description{
        min-height:0;
        margin-bottom:10px;
        font-size:10px;
        -webkit-line-clamp:2;
    }

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

    .store-product-open{
        min-width:36px;
        width:36px;
        min-height:36px;
        height:36px;
        padding:0;
        border-radius:9px;
    }

    .store-product-open span{
        display:none;
    }

    .store-product-favorite{
        width:32px;
        height:32px;
    }

    .store-product-badge{
        min-height:22px;
        font-size:7px;
        padding:0 7px;
    }

    .store-toolbar{
        margin-bottom:16px;
    }

    .store-search,
    .store-sort{
        min-height:46px;
    }
}

@media (max-width:380px){
    .store-product-grid{
        gap:8px;
    }

    .store-product-body{
        padding:10px;
    }

    .store-product-title{
        font-size:12px;
    }

    .store-product-price{
        font-size:14px;
    }

    .store-category-card{
        grid-template-columns:96px minmax(0,1fr);
    }

    .store-category-media{
        min-height:132px;
    }
}


@media (max-width:360px){
    .store-subcategory-track{
        grid-template-columns:repeat(3,minmax(48px,1fr));
    }

    .store-category-link,
    .store-category-button{
        width:46px;
        min-width:46px;
        height:46px;
        min-height:46px;
    }
}

/* =========================================================
   13. PREFERENCIAS DEL USUARIO
========================================================= */

@media (prefers-reduced-motion:reduce){
    .store-shell *,
    .store-shell *::before,
    .store-shell *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}

@media (prefers-contrast:more){
    .store-category-card,
    .store-product-card,
    .store-category-link,
    .store-subcategory-button{
        border-color:#5b5b5b;
    }

    .store-category-link.is-active,
    .store-subcategory-button.is-active{
        border-color:var(--store-accent);
    }
}
/* =========================================================
   14. FLUJO CATEGORÍAS → PRODUCTOS (v1.1)
========================================================= */

.store-shell [hidden]{
    display:none !important;
}

.store-view-context{
    margin:0 0 20px;
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:
        radial-gradient(circle at 100% 0%,rgba(204,255,0,.055),transparent 36%),
        #090909;
}

.store-view-context__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}

.store-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    color:#6f6f6f;
    font-size:10px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.store-breadcrumb__button{
    padding:0;
    border:0;
    background:none;
    color:#969696;
    font:inherit;
    cursor:pointer;
}

.store-breadcrumb__button:hover,
.store-breadcrumb__button:focus-visible{
    color:var(--store-accent);
    outline:none;
}

.store-breadcrumb__current{
    color:#e7e7e7;
}

.store-view-context__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.store-view-context__heading{
    max-width:780px;
}

.store-view-context__eyebrow{
    display:block;
    margin-bottom:8px;
    color:var(--store-accent);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.store-view-context__title{
    margin:0;
    color:#fff;
    font-size:clamp(2rem,5vw,4rem);
    line-height:.95;
    font-weight:950;
    letter-spacing:-1.7px;
    text-transform:uppercase;
}

.store-view-context__description{
    max-width:700px;
    margin:13px 0 0;
    color:#979797;
    font-size:13px;
    line-height:1.6;
}

.store-flow-button{
    min-height:46px;
    padding:0 17px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font:inherit;
    font-size:9px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.2s ease;
}

.store-flow-button svg{
    width:16px;
    height:16px;
}

.store-flow-button:focus-visible{
    outline:none;
    box-shadow:var(--store-focus);
}

.store-flow-button--primary{
    border:1px solid var(--store-accent);
    background:var(--store-accent);
    color:#050505;
}

.store-flow-button--primary:hover{
    background:var(--store-accent-2);
    border-color:var(--store-accent-2);
}

.store-flow-button--secondary{
    border:1px solid rgba(255,255,255,.15);
    background:#0d0d0d;
    color:#efefef;
}

.store-flow-button--secondary:hover{
    color:var(--store-accent);
    border-color:rgba(204,255,0,.42);
}

.store-flow-button--ghost{
    border:1px solid rgba(204,255,0,.28);
    background:rgba(204,255,0,.035);
    color:var(--store-accent);
}

.store-flow-button--ghost:hover{
    border-color:var(--store-accent);
    background:rgba(204,255,0,.075);
}

.store-flow-button--compact{
    min-height:38px;
    padding-inline:13px;
    font-size:8px;
}

.store-landing-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:24px 0 6px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.07);
}

.store-category-cta{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--store-accent);
    font-size:9px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.store-category-cta svg{
    width:15px;
    height:15px;
    transition:transform .2s ease;
}

.store-category-card:hover .store-category-cta svg,
.store-category-card:focus-within .store-category-cta svg{
    transform:translateX(3px);
}

.store-state__actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.store-state__button{
    margin-top:0;
}

.store-state__button--secondary{
    border-color:#333;
    background:#111;
    color:#f0f0f0;
}

.store-products-navigation{
    margin-top:34px;
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:
        linear-gradient(145deg,rgba(204,255,0,.025),transparent 42%),
        #090909;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:20px;
}

.store-products-navigation__switcher{
    min-width:0;
}

.store-products-navigation__label{
    display:block;
    margin-bottom:9px;
    color:#737373;
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.store-products-navigation__chips{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.store-products-navigation__chip{
    min-height:33px;
    padding:0 11px;
    border:1px solid #2e2e2e;
    border-radius:999px;
    background:#0c0c0c;
    color:#c8c8c8;
    font:inherit;
    font-size:8px;
    font-weight:900;
    letter-spacing:.55px;
    text-transform:uppercase;
    cursor:pointer;
}

.store-products-navigation__chip:hover,
.store-products-navigation__chip:focus-visible{
    color:#050505;
    border-color:var(--store-accent);
    background:var(--store-accent);
    outline:none;
}

.store-shell[data-store-view="products"] .store-category-nav{
    margin-top:4px;
}

/* =========================================================
   15. FLUJO RESPONSIVE
========================================================= */

@media (max-width:860px){
    .store-view-context__top{
        align-items:flex-start;
        flex-direction:column;
    }

    .store-view-context__actions{
        width:100%;
        justify-content:flex-start;
    }

    .store-products-navigation{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .store-products-navigation > .store-flow-button{
        width:100%;
    }
}

@media (max-width:640px){
    .store-view-context{
        margin-inline:-1px;
        padding:16px 13px;
        border-radius:14px;
    }

    .store-view-context__top{
        gap:12px;
        margin-bottom:18px;
    }

    .store-breadcrumb{
        font-size:8px;
    }

    .store-view-context__actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .store-view-context__actions .store-flow-button[hidden]{
        display:none !important;
    }

    .store-flow-button--compact{
        width:100%;
        min-height:41px;
    }

    .store-view-context__title{
        font-size:2.25rem;
    }

    .store-view-context__description{
        font-size:11px;
        line-height:1.55;
    }

    .store-landing-actions{
        display:grid;
        grid-template-columns:1fr;
        margin-top:18px;
    }

    .store-landing-actions .store-flow-button{
        width:100%;
    }

    .store-category-cta{
        margin-top:12px;
        font-size:8px;
    }

    .store-products-navigation{
        margin-top:24px;
        padding:14px 12px;
        gap:15px;
    }

    .store-products-navigation__chips{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:3px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .store-products-navigation__chips::-webkit-scrollbar{
        display:none;
    }

    .store-products-navigation__chip{
        flex:0 0 auto;
    }
}


@media (max-width:640px){
    .store-shell,
    .store-toolbar,
    .store-category-nav,
    .store-subcategory-slot,
    .store-subcategory-nav,
    .store-subcategory-track,
    .store-products-slot{
        max-width:100%;
    }

    .store-shell{
        overflow-x:clip;
    }
}