:root{
    --bg:#111117;
    --card:#1a1a23;
    --card2:#20202b;
    --line:#30303d;
    --text:#f6f5fa;
    --muted:#a5a3b0;
    --purple:#9a72ff;
    --green:#62d5a3
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif
}

.top{
    height:72px;
    padding:0 8vw;
    display:flex;
    align-items:center;
    gap:55px;
    background:#17171f;
    border-bottom:1px solid var(--line)
}

.brand{
    font-weight:800;
    letter-spacing:-1.5px;
    color:#fff;
    text-decoration:none
}

.brand span,
.footer b span{
    color:var(--purple)
}

.top nav{
    display:flex;
    gap:27px
}

.top nav a,
.top>div>a{
    color:#aaa8b4;
    text-decoration:none;
    font-size:12px
}

.top nav a.active{
    color:#fff;
    font-weight:700
}

.top>div{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:18px
}

.top .register{
    color:#fff
}

.basket{
    padding:10px 12px;
    background:#8962ec!important;
    border-radius:6px;
    color:#171320!important;
    font-weight:700
}

.basket b{
    display:inline-grid;
    place-items:center;
    width:16px;
    height:16px;
    margin-left:4px;
    border-radius:50%;
    background:#d8caff;
    font-size:9px
}

.store-profile{
    display:flex;
    align-items:center;
    padding:46px 12vw;
    border-bottom:1px solid var(--line);
    background:radial-gradient(circle at 18% 0,rgba(154,114,255,.12),transparent 25%),#15151c
}

.avatar{
    display:grid;
    place-items:center;
    width:78px;
    height:78px;
    border-radius:14px;
    background:linear-gradient(140deg,#b598ff,#6849bd);
    font-size:31px;
    font-weight:800;
    margin-right:18px
}

.store-name h1{
    font-size:24px;
    letter-spacing:-1px;
    margin:0
}

.store-name h1 i{
    font-style:normal;
    font-size:11px;
    color:#15151c;
    background:var(--green);
    border-radius:50%;
    padding:2px 4px
}

.store-name p{
    margin:6px 0;
    color:#a6a3b1;
    font-size:12px
}

.store-name span{
    color:var(--green);
    font-size:10px
}

.store-stats{
    display:flex;
    gap:37px;
    margin-left:auto
}

.store-stats b,
.store-stats small{
    display:block
}

.store-stats b{
    font-size:19px
}

.store-stats small{
    color:#8e8c99;
    font-size:10px;
    margin-top:4px
}

.announcement{
    display:flex;
    align-items:center;
    gap:10px;
    margin:23px 12vw;
    padding:13px 16px;
    background:#211d30;
    border:1px solid #403653;
    border-radius:7px;
    color:#cbc1e6;
    font-size:11px
}

.announcement b{
    color:#b494ff
}

.announcement a{
    margin-left:auto;
    color:#cbb9ff;
    text-decoration:none;
    font-weight:700
}

.shop-layout{
    display:grid;
    grid-template-columns:210px 1fr;
    gap:38px;
    max-width:1240px;
    margin:0 auto;
    padding:30px 32px 90px
}

.shop-layout aside{
    padding-top:6px
}

.aside-title,
.products-head p,
.reviews p,
.support p{
    font-size:10px;
    letter-spacing:1px;
    color:#898694;
    font-weight:700;
    margin:0 0 12px
}

.shop-layout aside button,
.shop-layout aside a{
    display:flex;
    width:100%;
    justify-content:space-between;
    border:0;
    background:none;
    color:#b6b3bf;
    text-decoration:none;
    text-align:left;
    padding:10px 11px;
    border-radius:5px;
    font-size:12px;
    cursor:pointer
}

.shop-layout aside button.selected{
    background:#282431;
    color:#fff;
    font-weight:700
}

.shop-layout aside button b{
    font-size:9px;
    background:#484052;
    color:#d6c5ff;
    border-radius:8px;
    padding:2px 6px
}

.shop-layout aside hr{
    border:0;
    border-top:1px solid var(--line);
    margin:22px 0
}

.products-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:22px
}

.products-head h2{
    margin:0;
    font-size:27px;
    letter-spacing:-1.4px
}

.products-head label{
    color:#9693a0;
    font-size:10px
}

.products-head select{
    margin-left:7px;
    padding:7px 8px;
    background:#20202a;
    border:1px solid #393844;
    border-radius:5px;
    color:#e9e7ed;
    font-size:10px
}

/* =========================
   TARJETAS DE PRODUCTO
   ========================= */

.product-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(300px,1fr));
    gap:18px
}

.product{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    color:inherit;
    text-decoration:none;
    transition:transform .18s ease,border-color .18s ease
}

.product:hover{
    transform:translateY(-4px);
    border-color:#7154ae
}

.visual{
    height:180px;
    position:relative;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,#c1a6ff 0,transparent 19%),linear-gradient(135deg,#322652,#1d1830)
}

.visual.blue{
    background:radial-gradient(circle,#9fc6ff 0,transparent 19%),linear-gradient(135deg,#1d365a,#131e34)
}

.visual.pink{
    background:radial-gradient(circle,#f8b3d7 0,transparent 19%),linear-gradient(135deg,#572443,#251426)
}

.visual.orange{
    background:radial-gradient(circle,#ffd1a0 0,transparent 19%),linear-gradient(135deg,#5d3823,#2d1d18)
}

.visual.teal{
    background:radial-gradient(circle,#9be8dc 0,transparent 19%),linear-gradient(135deg,#1c534d,#15302e)
}

.visual.lime{
    background:radial-gradient(circle,#d1ec9a 0,transparent 19%),linear-gradient(135deg,#405c26,#243416)
}

.visual span{
    position:absolute;
    top:10px;
    left:10px;
    padding:4px 6px;
    background:rgba(17,17,23,.55);
    border:1px solid rgba(255,255,255,.16);
    border-radius:4px;
    font-size:9px
}

.visual strong{
    font-size:42px;
    color:rgba(255,255,255,.8)
}

.visual i{
    position:absolute;
    right:12px;
    bottom:10px;
    font-style:normal;
    font-size:17px
}

.product-body{
    padding:17px
}

.product-body p{
    margin:0 0 8px;
    color:#b89cff;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.8px
}

.product-body h3{
    margin:0 0 7px;
    font-size:16px;
    letter-spacing:-.5px
}

.product-body small{
    display:block;
    min-height:36px;
    overflow:hidden;
    color:#a3a0ad;
    font-size:10px;
    line-height:1.55
}

.product footer{
    display:flex;
    justify-content:space-between;
    margin-top:17px;
    padding-top:12px;
    border-top:1px solid #2e2e3a;
    font-size:10px
}

.product footer b{
    color:#fff
}

.product footer em{
    font-style:normal;
    color:#c3b0ff
}

/* =========================
   REVIEWS
   ========================= */

.reviews{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
    padding:75px 12vw;
    background:#181820;
    border-top:1px solid var(--line)
}

.reviews h2{
    margin:0;
    font-size:36px;
    line-height:1;
    letter-spacing:-2px
}

.reviews article{
    padding:20px;
    border:1px solid #31303a;
    border-radius:8px;
    background:#1d1d26
}

.stars{
    color:#b79aff;
    font-size:12px;
    letter-spacing:2px
}

.reviews blockquote{
    margin:18px 0;
    font-size:12px;
    line-height:1.65;
    color:#d0ced7
}

.reviews article span{
    color:#8d8b96;
    font-size:10px
}

/* =========================
   SOPORTE
   ========================= */

.support{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:47px 12vw;
    background:linear-gradient(90deg,#7049cb,#a37af8)
}

.support p{
    color:#dfd1ff
}

.support h2{
    margin:0;
    font-size:31px;
    letter-spacing:-1.5px
}

.support div span{
    font-size:12px;
    color:#eee7ff
}

.support-btn{
    padding:13px 16px;
    border-radius:6px;
    background:#181421;
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:700
}

.support-btn b{
    margin-left:25px;
    font-size:17px
}

/* =========================
   FOOTER
   ========================= */

.footer{
    display:flex;
    gap:30px;
    padding:28px 8vw;
    background:#111117;
    color:#898692;
    font-size:10px
}

.footer b{
    color:#fff;
    font-size:14px
}

.footer span:last-child{
    margin-left:auto
}

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

@media(max-width:800px){

    .top{
        padding:0 6vw;
        gap:0
    }

    .top nav,
    .top .register,
    .top>div>a:first-child{
        display:none
    }

    .store-profile{
        padding:32px 7vw
    }

    .store-stats{
        display:none
    }

    .announcement{
        margin:17px 5vw
    }

    .announcement a{
        display:none
    }

    .shop-layout{
        grid-template-columns:1fr;
        padding:25px 6vw 60px
    }

    .shop-layout aside{
        display:flex;
        overflow:auto;
        gap:7px;
        padding:0
    }

    .aside-title,
    .shop-layout aside hr,
    .shop-layout aside a{
        display:none!important
    }

    .shop-layout aside button{
        width:auto;
        white-space:nowrap
    }

    .product-grid{
        grid-template-columns:1fr 1fr;
        gap:14px
    }

    .visual{
        height:150px
    }

    .products-head{
        align-items:start;
        gap:10px;
        flex-direction:column
    }

    .reviews{
        grid-template-columns:1fr;
        padding:57px 7vw
    }

    .support{
        padding:37px 7vw;
        gap:18px
    }

    .footer{
        flex-wrap:wrap
    }

    .footer span:last-child{
        margin-left:0
    }
}

@media(max-width:520px){
    .product-grid{
        grid-template-columns:1fr
    }

    .visual{
        height:180px
    }
}

/* =========================
   TEXTOS / AJUSTES
   ========================= */

.announcement a,
.support-btn{
    font-size:0!important;
    text-align:center!important;
    justify-content:center!important
}

.announcement a:before{
    content:'Más información';
    font-size:11px
}

.support-btn:before{
    content:'Contactar soporte';
    font-size:12px
}

.shop-layout aside a span,
.support-btn b,
.visual i{
    display:none!important
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column
}

body>main{
    flex:1;
    display:flex;
    flex-direction:column
}

.shop-layout{
    flex:1
}

.support{
    margin-top:auto
}

/* =========================
   SIDEBAR ANIMACIONES
   ========================= */

.shop-layout aside button,
.shop-layout aside a{
    transition:
        transform .2s cubic-bezier(.2,.8,.2,1),
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease
}

.shop-layout aside button:hover,
.shop-layout aside a:hover{
    transform:translateX(5px);
    background:#282431;
    color:#fff
}

.shop-layout aside button:active,
.shop-layout aside a:active{
    transform:translateX(2px) scale(.97)
}

.shop-layout aside button:focus-visible,
.shop-layout aside a:focus-visible{
    outline:2px solid #9a72ff;
    outline-offset:3px;
    background:#282431;
    color:#fff
}

.shop-layout aside button.selected{
    animation:sidebar-select .32s cubic-bezier(.2,.8,.2,1) both
}

@keyframes sidebar-select{
    from{
        opacity:.55;
        transform:translateX(-5px)
    }

    to{
        opacity:1;
        transform:none
    }
}