/* ==========================================
HERO DESKTOP
========================================== */

.catalog-hero-desktop{

    display:none;

}

/* ================================================= */
/* HERO */
/* ================================================= */

.catalog-hero{

    padding:0;

    margin:0;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.catalog-hero::before{

    content:"";

    position:absolute;

    top:-200px;
    left:50%;

    transform:translateX(-50%);

    width:700px;
    height:700px;

    background:var(--primary-color);

    border-radius:50%;

    filter:blur(250px);

    opacity:.12;

    pointer-events:none;

}

.hero-slider{

    position:relative;

    width:100%;

    height:520px;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity .8s ease;

    overflow:hidden;

    pointer-events:none;

}

.hero-slide.active{

    opacity:1;

    pointer-events:auto;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    filter:brightness(.45);

}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}

.catalog-subtitle{

    display:inline-block;

    color:var(--primary-color);

    font-size:16px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;

}

.catalog-title{

    font-size:90px;

    font-weight:900;

    line-height:1;

    margin-bottom:25px;

    text-shadow:
        0 5px 30px rgba(0,0,0,.45);

}

.catalog-description{

    max-width:600px;

    margin:auto;

    color:var(--text-secondary);

    font-size:24px;

    line-height:1.8;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:25px;

    height:60px;

    padding:0 36px;

    border:1px solid var(--primary-color);

    border-radius:14px;

    color:white;

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

    text-decoration:none;

    font-weight:800;
    font-size: 17px;

}

.hero-btn:hover{

    background:var(--primary-color);

}

/* ================================================= */
/* CATEGORIAS */
/* ================================================= */

.mobile-filters{

    display:none;

}

.mobile-categories{

    display:flex;

}

.category-icon{

    display:flex;

    align-items:center;

    justify-content:center;

}

.category-icon svg{

    width:40px;

    height:40px;

    stroke-width:1.8;

}

.category-text{

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

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

.catalog-filters{

    padding:0 0 50px;

}

.catalog-filters .container{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.filter-group{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    width:100%;

}

.filter-title{

    font-size:13px;

    letter-spacing:3px;

    opacity:.7;

    font-weight:700;

    color:var(--text-color);

    text-transform:uppercase;

}

.filter-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    width:100%;

}

.filter-btn{

    padding:16px 30px;

    border:1px solid var(--border-color);

    background:var(--surface-color);

    color:var(--text-secondary);

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.filter-btn:hover{

    border-color:var(--primary-color);

    color:white;

}

.filter-btn.active{

    background:var(--primary-color);

    color:white;

    border-color:var(--primary-color);

}

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

.catalog-search-section{

    padding:20px 0 20px;

}

.products-header{

    text-align:center;

    padding:10px 0 0;

}

.products-label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    color:var(--primary-color);

    font-size:13px;

    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.products-label::before,
.products-label::after{

    content:"";

    width:55px;

    height:1px;

    background:rgba(0,168,255,.35);

}

.products-main-title{

    max-width:650px;

    margin:0 auto 14px;

    font-size:72px;

    line-height:.95;

    font-weight:900;

    letter-spacing:-3px;

}

.results-count{
    color:#666;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:3px;

    margin-top:20px;
    margin-bottom:12px;
}


.catalog-search{

    width:min(90%, 1400px);

    margin:35px auto 25px;

}

.catalog-search input{

    width:100%;

    height:72px;

    padding:0 30px;

    background:var(--surface-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    color:white;

    font-size:18px;

    outline:none;

    transition:var(--transition);

}

.catalog-search input:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 20px rgba(0,168,255,.15);

}

.catalog-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.sort-select{

    background:var(--surface-color);

    border:1px solid var(--border-color);

    color:white;

    padding:12px 18px;

    border-radius:12px;

    outline:none;

}

/* ================================================= */
/* PRODUCT GRID */
/* ================================================= */

.catalog-products{

    margin-top:-8px;

    padding:0 0 120px;

}

.catalog-grid{

    display:grid;

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

    gap:34px;

    transition:.25s ease;

}

.no-results{

    grid-column:1 / -1;

    text-align:center;

    padding:70px 20px;

}

.no-results h2{

    font-size:30px;

    margin-bottom:14px;

    font-weight:700;

}

.no-results p{

    color:var(--text-secondary);

    max-width:400px;

    margin:auto;

    line-height:1.6;

}

.clear-search-btn{

    margin-top:28px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 28px;

    border:1px solid var(--primary-color);

    border-radius:14px;

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

    color:#FFF;

    font-size:14px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.25s ease;

}

.clear-search-btn:hover{

    background:var(--primary-color);

    transform:translateY(-2px);

    box-shadow:0 10px 28px rgba(0,168,255,.25);

}

/* ================================================= */
/* PRODUCT CARD */
/* ================================================= */

.product-card{

    position:relative;
    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#111111;

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

    border-radius:18px;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        border-color .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    isolation:isolate;

}

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02),
        transparent
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    opacity:.45;

    transition:
        opacity .35s cubic-bezier(.22,1,.36,1),
        background .35s cubic-bezier(.22,1,.36,1);

    pointer-events:none;

}

.product-card:hover{

    transform:
        translateY(-8px)
        scale(1.015);

    border-color:rgba(0,168,255,.35);

    box-shadow:
        0 35px 80px rgba(0,0,0,.55),
        0 0 65px rgba(0,168,255,.22),
        0 0 30px rgba(0,168,255,.14),
        0 0 0 1px rgba(0,168,255,.22);

    cursor:pointer;

}

.product-card::after{

    content:"";

    position:absolute;

    left:20px;

    right:20px;

    top:0;

    height:1px;

    background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.28),

transparent

);

    opacity:0;

    transition:.35s;

}

.product-card:hover::after{

    opacity:1;

}

.product-card:hover::before{

    opacity:1;

    background:linear-gradient(
        180deg,
        rgba(0,168,255,.95) 0%,
        rgba(0,168,255,.35) 45%,
        rgba(0,168,255,.08) 75%,
        transparent 100%
    );

}
.product-image{

    position:relative;

    height:470px;

    overflow:hidden;

    background:#0B0B0B;

}

.product-image::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:135px;

    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(17,17,17,.95) 0%,
        rgba(17,17,17,.55) 35%,
        rgba(17,17,17,.12) 70%,
        transparent 100%
    );

    transition:
        height .45s,
        background .45s;

}

.product-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% -15%,
            rgba(255,255,255,.22),
            transparent 55%
        );

    opacity:0;

    transform:scale(1.25);

    transition:
        opacity .45s,
        transform .65s;

    z-index:2;

    pointer-events:none;

}

.product-card:hover .product-image::before{

    opacity:1;

    transform:scale(1);

}



.product-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        filter .55s cubic-bezier(.22,1,.36,1);

    will-change:transform;

}

.product-card:hover .product-image img{

    transform:none;

    filter:none;

}

.product-overlay{

    position:absolute;

    inset:0;

    display: none;

}

/* ---------- BADGES ---------- */

.product-badge{

    position:absolute;

    top:8px;

    left:0px;

    z-index:20;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:56px;

    height:21px;

    padding:0 9px;

    font-size:8.5px;

    font-weight:800;

    line-height:1;

    letter-spacing:2px;

    text-transform:uppercase;

    white-space:nowrap;

    border:none;

    border-radius:0;

    box-shadow:
        0 5px 14px rgba(0,0,0,.25);

    backdrop-filter:blur(8px);

}

.product-badge.featured{

    background:#00A8FF;

    color:#FFF;

}

.product-badge.new{

    background:#22C55E;

    color:#FFF;

}

.product-badge.discount{

    background:#E53935;

    color:#FFF;

}

.product-badge.exclusive{

    background:#C9A227;

    color:#111;

}

.product-badge.sold-out{

    background:#2F2F2F;

    color:#FFF;

}

.product-stock-badge{

    position:absolute;

    left:6px;
    right:auto;
    bottom:15px;

    z-index:20;

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

    gap:6px;

    height:24px;

    padding:0 10px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    color:#FAFAFA;

    font-size:8.5px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    white-space:nowrap;

    box-shadow:
        0 8px 20px rgba(0,0,0,.22);

    opacity:.96;

    transform:translateY(4px);

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        opacity .28s ease;

}

.product-card:hover .product-stock-badge{

    transform:translateY(0);

    background:rgba(18,18,18,.72);

    border-color:rgba(255,255,255,.10);

    box-shadow:
        0 10px 24px rgba(0,0,0,.28);

}

/* ---------- INFORMACIÓN ---------- */

.product-info{

    display:flex;
    flex-direction:column;

    padding:20px 20px 22px;

    flex:1;

    background:#111;

    transition:
    transform .35s cubic-bezier(.22,1,.36,1);

}

.product-card:hover .product-info{

    transform:translateY(-8px);

}

.product-card .product-brand{

    font-size:11px;

    font-weight:800;

    letter-spacing:3px;

    color:#8C8C8C;

    text-transform:uppercase;

    margin-bottom:8px;

}

.product-brand.youngla{

    color:#D6C6A5;

}

.product-brand.gymshark{

    color:#4FD7E5;

}

.product-name{

    font-size:18px;

    font-weight:700;

    line-height:1.25;

    letter-spacing:-.3px;

    color:#F8F8F8;

    margin-bottom:8px;

    transition:
    color .3s,
    transform .35s;

}

.product-card:hover .product-name{

    color:#FFFFFF;

    transform:translateY(-2px);

}

.product-price{

    font-size:23px;

    font-weight:900;

    line-height:1;

    letter-spacing:-1px;

    color:white;

    text-shadow:

0 0 12px rgba(255,255,255,.05);

}

.product-price-container{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:12px;

}

.product-old-price{

    color:#7D7D7D;

    text-decoration:line-through;

    font-size:18px;

    font-weight:600;

}

.product-current-price{

    display:flex;

    align-items:center;

    gap:10px;

}

.product-discount{

    background:#E53935;

    color:white;

    padding:4px 8px;

    border-radius:999px;

    font-size:11px;

    font-weight:800;

}

.talla-disponible:hover{

    border-color:var(--primary-color);

    color:white;

    transform:translateY(-2px);

}

/* ==========================================
   ESTADO DE STOCK
========================================== */

.product-stock{

    margin:0;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    min-height:20px;

}

/* Mucho stock */
.en-stock {
    color: #22c55e;
}

/* Pocas unidades */
.poco-stock {
    color: #f59e0b;
}

/* Agotado */
.sin-stock {
    color: #ef4444;
}

/* ---------- TALLAS ---------- */

.product-sizes{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;

}

.product-sizes .talla-btn{

    width:38px;

    height:38px;

    border-radius:10px;

    border:1px solid var(--border-color);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

}

/* ==========================================
   TALLAS DISPONIBLES/NO DISPONIBLES
========================================== */

.talla-btn{

    border:none;

    cursor:pointer;

    transition:.25s;

}

.talla-disponible{

    color:white;

    background:transparent;

}

.talla-agotada{

    color:#666;

    border-color:#333;

    opacity:.5;

    cursor:not-allowed;

}

.talla-btn.selected{

    background:var(--primary-color);

    border-color:var(--primary-color);

    color:white;

}

/* ---------- BOTONES ---------- */

.product-actions{

    display:flex;

    gap:12px;

    margin-top:auto;

    padding-top:14px;

    border-top:1px solid rgba(255,255,255,.06);

}

.product-btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:56px;

    border-radius:14px;

    background:linear-gradient(
        180deg,
        #1AB8FF,
        #009DFF
    );

    color:white;

    font-size:14px;

    font-weight:800;

    letter-spacing:.3px;

    box-shadow:
        0 4px 12px rgba(0,168,255,.18);

    transition:.25s ease;

    overflow:hidden;

position:relative;

}

.product-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:skewX(-25deg);

}

.product-btn:hover::before{

    left:170%;

    transition:1s;

}

.product-btn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 12px 28px rgba(0,168,255,.35);

}

.product-btn:focus-visible{

    outline:2px solid var(--primary-color);

    outline-offset:3px;

}

.product-btn svg{

    width:18px;
    height:18px;

    opacity:.9;

}

.product-btn.secondary{

    background:transparent;

    border:1px solid var(--border-color);

}

.product-btn.secondary:hover{

    border-color:var(--primary-color);

}

/* Botón de producto agotado */

.sin-disponibilidad{

    background:#232323 !important;

    border:1px solid #343434;

    color:#7A7A7A !important;

    cursor:not-allowed;

    box-shadow:none !important;

    pointer-events:auto;

}

.sin-disponibilidad,
.sin-disponibilidad:hover{

    cursor:not-allowed !important;

}

.sin-disponibilidad:hover{

    transform:none !important;

    filter:none !important;

    box-shadow:none !important;

    background:#232323 !important;

}

/* ==========================================
   PRODUCTO AGOTADO
========================================== */

.product-card.sold-out .product-image img {

    filter: grayscale(100%);
    opacity: 0.6;

}


/* Evita que la tarjeta se eleve demasiado */
.product-card.sold-out:hover{

    transform:none;

    border-color:var(--border-color);

    box-shadow:none;

    cursor:default;

}


/* Opcional: oscurecer un poco toda la tarjeta */
.product-card.sold-out {

    opacity: 0.85;

}

/* ================================================= */
/* MOBILE SHEETS */
/* ================================================= */

.filter-sheet-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:7000;

}

.filter-sheet{

    overflow:hidden;

    position:fixed;

    left:0;

    bottom:-100%;

    width:100%;

    background:#0A0A0A;

    border-radius:32px 32px 0 0;

    z-index:7001;

    transition:
    bottom .4s cubic-bezier(.22,1,.36,1);

    padding:28px 20px 36px;

}

.filter-sheet.active{

    bottom:0;

}

.filter-sheet-overlay.active{

    opacity:1;

    visibility:visible;

}

.filter-sheet-header h3{

    font-size:16px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#EAEAEA;

}

.filter-sheet-apply{

    width:100%;

    height:62px;

    border-radius:999px;

    background:white;

    color:black;

    font-weight:900;

    margin-top:32px;

    letter-spacing:1px;

    transition:.25s ease;

}

.filter-sheet-apply:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 30px rgba(255,255,255,.18);

}

.filter-sheet-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.filter-sheet-close{

    position:absolute;

    left:0;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#151515;

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

    color: white;
}

.filter-sheet-content{

    border-top:1px solid var(--border-color);

    padding-top:20px;

    max-height:55vh;

    overflow-y:auto;

}

/* ==========================================
   MOBILE FILTER GROUPS
========================================== */

.mobile-filter-group{

    display:flex;
    flex-direction:column;

    padding:18px;

    background:#0D0D0D;

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

    border-radius:18px;

}

.mobile-filter-group + .mobile-filter-group{

    margin-top:18px;

}

.mobile-filter-title{

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#8D96A5;

    margin-bottom:14px;

}

.sort-sheet-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:7000;

}

.sort-sheet-overlay.active{

    opacity:1;

    visibility:visible;

}

.sort-sheet{

    position:fixed;

    left:0;

    bottom:-100%;

    width:100%;

    background:#0A0A0A;

    border-radius:32px 32px 0 0;

    z-index:7001;

    transition:
    bottom .4s cubic-bezier(.22,1,.36,1);

    padding:28px 20px 36px;

}

.sort-sheet.active{

    bottom:0;

}

.sort-sheet-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.sort-sheet-close{

    position:absolute;

    left:0;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#111;

    color:white;

}

.sort-sheet-header h3{

    font-size:16px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.sort-sheet-content{

    display:flex;

    flex-direction:column;

    gap:10px;

    border-top:1px solid var(--border-color);

    padding-top:20px;

}

.sort-option{

    width:100%;

    height:54px;

    border-radius:14px;

    background:#111;

    border:1px solid var(--border-color);

    color:white;

    font-weight:800;

    letter-spacing:.5px;

}

.sort-option.active{

    border-color:var(--primary-color);

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

}

/* ================================================= */
/* RESTOCK */
/* ================================================= */

.restock-section{

    margin-top:60px;

}

.restock-product{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    margin-bottom:16px;

    border:1px solid var(--border-color);

}

.restock-product img{

    width:100%;

    height:400px;

    object-fit:cover;

    filter:brightness(.85);

    display:block;

}

.restock-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;

    padding:24px;

    text-align:center;

}

.restock-overlay h3{

    font-size:30px;

    font-weight:800;

    letter-spacing:2px;

}

.restock-overlay p{

    margin-top:6px;

    color:#d0d0d0;

}

.restock-alert{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    border-radius:22px;

    border:1px solid var(--border-color);

    background:linear-gradient(
        180deg,
        #0A0A0A,
        #050505
    );

    text-decoration:none;

    color:white;

    transition:.3s;

}

.restock-alert:hover{

    border-color:var(--primary-color);

}

.restock-alert-icon{

    width:62px;
    height:62px;

    flex-shrink:0;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #00B8FF,
        #008DFF
    );

    box-shadow:
    0 0 25px rgba(0,184,255,.4);

}

.restock-alert-icon svg{

    width:28px;
    height:28px;

    color:white;

}

.restock-alert-content{

    flex:1;

}

.restock-alert-content h4{

    font-size:18px;

    margin-bottom:10px;

    letter-spacing:.5px;

    line-height:1.2;

}

.restock-alert-content p{

    color:var(--text-secondary);

    line-height:1.7;

    font-size:15px;

}

.restock-arrow svg{

    width:26px;

    height:26px;

    color:var(--primary-color);

}

.restock-alert:hover .restock-arrow{

    transform:translateX(4px);

}

.restock-arrow{

    transition:.25s;
    padding-left:10px;

}

.restock-overlay{

    background:linear-gradient(

        to top,

        rgba(0,0,0,.8),

        rgba(0,0,0,.15)

    );

}

/* ==========================================
   PREVIEW TOAST
========================================== */

.preview-toast{

    position:fixed;

    left:50%;

    bottom:32px;

    transform:translateX(-50%) translateY(120px);

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 24px;

    border-radius:18px;

    background:rgba(15,15,15,.96);

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

    backdrop-filter:blur(18px);

    color:#FFF;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45);

    opacity:0;

    pointer-events:none;

    transition:
        transform .35s ease,
        opacity .35s ease;

    z-index:99999;

}

.preview-toast.active{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.preview-toast span{

    font-size:24px;

}

.preview-toast p{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#F3F3F3;

}

/* ==========================================
   COLLECTION HEADER
========================================== */

.collection-header{

    display:none;

    margin:10px 0 42px;

}

.collection-header.active{

    display:block;

}

.collection-kicker{

    display:block;

    margin-bottom:10px;

    color:var(--primary-color);

    font-size:12px;

    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;

}

.collection-title{

    font-size:48px;

    font-weight:900;

    line-height:.95;

    margin-bottom:12px;

    color:#FFF;

}

.catalog-sticky-sentinel{

    width:100%;

    height:1px;

    pointer-events:none;

}

#featuredDrops{

    transition:
        opacity .22s ease,
        transform .22s ease;

}

#featuredDrops.drops-hidden{

    opacity:0;

    pointer-events:none;

}

/* ==========================================
   STICKY CATEGORÍAS DESKTOP
========================================== */

.mobile-filters.sticky{

    position:fixed;

    top:90px;

    left:0;

    width:100%;

    z-index:900;

    background:#000;

}

body.modal-open .mobile-filters.sticky{

    display:none;

}


.desktop-toolbar{

    display:none;

}

.product-single-size{

    margin-top:16px;

    min-height:38px;

    display:flex;

    align-items:center;

    color:#8d99a6;

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.product-color{

    font-size:14px;

    color:#8E8E8E;

    margin-bottom:18px;

}

.product-color-label{

    color:#7A7A7A;

    font-weight:600;

}

/* ================================================= */
/* DROPS DESTACADOS */
/* ================================================= */

.drops-section{

    margin:48px 0 60px;

}

.drops-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:28px;

}

.drops-kicker{

    display:block;

    color:var(--primary-color);

    font-size:12px;

    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.drops-title{

    font-size:42px;

    font-weight:900;

    line-height:1;

}

.drops-slider{

    position:relative;

    overflow:hidden;

}

.drops-track{

    display:flex;

    transition:transform .55s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

/* ============================== */
/* PÁGINA DEL CARRUSEL */
/* ============================== */

.drops-page{

    min-width:100%;

    display:grid;

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

    gap:28px;

    flex-shrink:0;

}

.drop-slide{

    position:relative;

    width:100%;

    aspect-ratio:16/10;

    border-radius:26px;

    overflow:hidden;

    background:#111;

    isolation:isolate;

}

/* ==========================================
BANNER PRYME
========================================== */

.drop-pryme{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    background:
    radial-gradient(circle at top,#1d7cff 0%,#0b0b0b 70%);

}

.drop-pryme-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.drop-pryme:hover .drop-pryme-image{

    transform:scale(1.05);

}

.drop-pryme::before{

    position:absolute;

    inset:0;

    z-index:1;

}

.drop-pryme .drop-overlay{

    z-index:2;

}

.drop-pryme::after{

    display:none;

}

.drop-pryme-content{

    width:100%;

    padding:32px;

    text-align:left;

}

.drop-pryme-content span{

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:10px;

}

.drop-pryme-content h3{

    font-size:40px;

    line-height:1;

    font-weight:900;

    margin-bottom:14px;

}

.drop-pryme-content p{

    max-width:380px;

    color:#E5E5E5;

    line-height:1.6;

    margin-bottom:22px;

    font-size:16px;

}

.drop-pryme-btn{

    height:50px;

    padding:0 24px;

    font-size:14px;

    border:none;

    border-radius:999px;

    background:white;

    color:#111;

    font-weight:800;

    cursor:pointer;

    transition:.25s;

}

.drop-pryme-btn:hover{

    transform:translateY(-2px);

}

.drop-slide img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.drop-slide:hover img{

    transform:scale(1.05);

}

.drop-slide::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.05) 100%
    );

}

.drop-overlay{

    position:absolute;

    left:34px;

    right:34px;

    bottom:34px;

    z-index:2;

}

.drop-overlay span{

    display:inline-block;

    margin-bottom:10px;

    color:var(--primary-color);

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

}

.drop-overlay h3{

    font-size:40px;

    line-height:1;

    font-weight:900;

    margin-bottom:14px;

}

.drop-overlay p{

    max-width:380px;

    color:#e5e5e5;

    line-height:1.6;

    margin-bottom:22px;

}

.drop-slide-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:54px;

    padding:0 28px;

    border:none;

    border-radius:999px;

    background:#fff;

    color:#111;

    font-weight:800;

    cursor:pointer;

    transition:.25s;

}

.drop-slide-btn:hover{

    transform:translateY(-2px);

}

/* ==========================================
   BOTÓN PRÓXIMAMENTE
========================================== */

.drop-slide-btn.preview{

    background:transparent;

    color:#FFF;

    border:2px solid rgba(255,255,255,.85);

    cursor:not-allowed;

    opacity:.92;

    box-shadow:none;

}

.drop-slide-btn.preview:hover{

    transform:none;

    background:transparent;

    color:#FFF;

    border-color:rgba(255,255,255,.85);

    box-shadow:none;

}

.drops-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    cursor:pointer;

    z-index:10;

    transition:.25s;

}

.drops-arrow:hover{

    background:var(--primary-color);

}

.drops-prev{

    left:18px;

}

.drops-next{

    right:18px;

}

.drops-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:24px;

}

.drops-dot{

    width:10px;

    height:10px;

    border:none;

    border-radius:50%;

    background:#4b4b4b;

    cursor:pointer;

    transition:.25s;

}

.drops-dot.active{

    width:34px;

    border-radius:999px;

    background:var(--primary-color);

}

/* ================================================= */
/* COLLECTION HERO */
/* ================================================= */

.collection-header{

    display:none;

    grid-template-columns:1fr auto;

    align-items:center;

    gap:40px;

    margin:42px auto;

    padding:32px 36px;

    border-radius:24px;

    background:
        linear-gradient(180deg,#141414,#090909);

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

    position:relative;

    overflow:hidden;

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 20px 60px rgba(0,0,0,.35);

}

.collection-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at right,
        rgba(0,168,255,.08),
        transparent 45%);

    pointer-events:none;

}

.collection-info{

    position:relative;

    z-index:2;

}

.collection-title{

    font-size:clamp(34px,4vw,60px);

    font-weight:900;

    line-height:.95;

    letter-spacing:-1px;

    margin-bottom:14px;

}

.collection-count{

    color:#8F8F8F;

    font-size:15px;

    font-weight:600;

}

.collection-back{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:54px;

    padding:0 28px;

    border-radius:999px;

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

    background:#121212;

    color:white;

    font-weight:800;

    transition:.25s;

}

.collection-back:hover{

    background:var(--primary-color);

    border-color:var(--primary-color);

    transform:translateY(-2px);

}

/* ================================================= */
/* CARRITO */
/* ================================================= */

.cart-sidebar{
    position:fixed;
    top:0;
    right:0;
    width:430px;
    max-width:100%;
    height:100dvh;
    background:#0B0B0B;
    border-left:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,1,.36,1);
    z-index:11000;
}

.cart-sidebar.active{
    transform:translateX(0);
}

.cart-header{
    padding:22px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.cart-header h2{
    font-size:26px;
    font-weight:800;
}

.cart-close{
    font-size:30px;
    color:#fff;
}

.cart-items{
    flex:1;
    overflow-y:auto;
    padding:20px;
}

.cart-item{

    display:flex;

    gap:24px;

    align-items:stretch;

    padding:26px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.cart-item-image{

    width:110px;
    height:100%;
    min-height:160px;

    object-fit:cover;

    border-radius:16px;

    align-self:stretch;

}

.cart-item-info{

    display:flex;

    flex:1;

    flex-direction:column;

}

.cart-item-info h4{

    font-size:18px;
    line-height:1.3;
    margin-bottom:12px;

}

.cart-variant{

    color:#8a8a8a;
    font-size:14px;
    line-height:1.75;

}

.cart-price{
    margin-top:auto;
    margin-bottom:10px;
    font-size:22px;
    font-weight:800;
    color:#fff;
}

.cart-bottom{

    display:flex;
    align-items:center;
    gap: 20px;
    margin-top:0;

}

.cart-quantity{
    display:flex;
    align-items:center;
    gap:12px;
}

.cart-quantity button{

    width:42px;
    height:42px;

    border-radius:12px;

    background:#181818;

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

    color:#fff;

    font-size:18px;
    font-weight:700;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;

}

.cart-quantity button:hover{

    background:rgba(0,168,255,.14);

    border-color:var(--primary-color);

    box-shadow:
        0 0 16px rgba(0,168,255,.18);

    transform:translateY(-1px);

}

.cart-quantity button:active{

    transform:scale(.96);

}

.cart-remove{

    color:#7b7b7b;
    font-size:13px;
    font-weight:600;
    margin-left:auto;

}

.cart-remove:hover{

    color:#ff4b4b;

}

.cart-footer{
    padding:24px;
    border-top:1px solid rgba(255,255,255,.05);
}

.cart-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    font-size:20px;
    font-weight:700;
}

.cart-total-price{
    font-size:24px;
    font-weight:900;
}

.cart-checkout{
    width:100%;
    height:58px;
    border-radius:16px;
    background:linear-gradient(180deg,#1AB8FF,#009DFF);
    color:#fff;
    font-weight:800;
    font-size:15px;
    transition:.25s;
}

.cart-checkout:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(0,168,255,.28);
}

/* ==========================================
   CARRITO VACÍO
========================================== */

.cart-empty{

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px;

}

.cart-empty-icon{

    font-size:56px;

    margin-bottom:20px;

    opacity:.9;

}

.cart-empty h3{

    font-size:22px;

    margin-bottom:12px;

    font-weight:800;

}

.cart-empty p{

    color:var(--text-secondary);

    line-height:1.6;

    max-width:250px;

}

.cart-footer{

    padding:20px;

    border-top:1px solid var(--border-color);

}

.cart-total{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    font-size:20px;

    font-weight:700;

}

.cart-checkout{

    width:100%;

    padding:16px;

    border-radius:12px;

    background:var(--primary-color);

    color:white;

    font-weight:700;

    transition:.3s;

}

.cart-checkout:hover{

    background:var(--primary-hover);

}

.cart-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:
    opacity .25s ease,
    visibility .25s ease;

    z-index:10999;

}

.cart-overlay.active{

    opacity:1;

    visibility:visible;

}

.toast-notification{

    position:fixed;

    bottom:25px;

    left:50%;

    transform:translateX(-50%) translateY(100px);

    background:#0F0F0F;

    color:#FFF;

    border:1px solid var(--primary-color);

    padding:14px 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    z-index:9999;

    opacity:0;

    transition:.3s ease;

}

.toast-notification.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.cart-validation-message {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 193, 7, 0.42);
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.1);
    color: #f5df9a;
    font-size: 0.82rem;
    line-height: 1.45;
}

.cart-checkout:disabled {
    cursor: wait;
    opacity: 0.7;
}

.catalog-load-state {
    grid-column: 1 / -1;
    width: min(560px, 100%);
    margin: 30px auto;
    padding: 40px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    text-align: center;
}

.catalog-load-state h3 {
    margin: 0;
    color: #fff;
    font-size: 1.18rem;
}

.catalog-load-state p {
    margin: 10px 0 20px;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.55;
}

.catalog-load-state button {
    min-height: 42px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: #00a8ff;
    color: #041017;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

/* ==========================================
   MOBILE SEARCH (BASE)
========================================== */

.mobile-search-overlay,
.mobile-search-box,
.mobile-search-suggestions{

    display:none;

}

.mobile-search-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(8px);
    z-index:15000;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.25s;
}

body.search-open .mobile-search-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mobile-search-box{
    position:relative;
    display:block;

    width:min(92%,680px);
    margin:56px auto 0;
}

.mobile-search-input{

    width:100%;
    height:60px;

    padding:0 58px;

    border-radius:18px;

    background:#111;

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

    color:#fff;

    font-size:16px;

    outline:none;
}

.mobile-search-back{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

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

    background:none;
    border:none;

    color:#aaa;

    cursor:pointer;
}

.mobile-search-clear{

    position:absolute;

    right:16px;
    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

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

    background:none;
    border:none;

    color:#aaa;

    cursor:pointer;
}

.mobile-search-suggestions{

    width:min(92%,680px);

    margin:10px auto 0;

    background:#111;

    border-radius:18px;

    overflow:hidden;

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

    box-shadow:0 18px 40px rgba(0,0,0,.45);
}

body.search-open .mobile-search-suggestions{
    display:block;
}

.mobile-search-suggestion{

    padding:16px 20px;

    color:#f5f5f5;

    cursor:pointer;

    transition:.2s;
}

.mobile-search-suggestion:hover{
    background:rgba(255,255,255,.05);
}

.mobile-search-suggestion+.mobile-search-suggestion{
    border-top:1px solid rgba(255,255,255,.06);
}

.mobile-search-input::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.mobile-search-input::-webkit-search-decoration{
    -webkit-appearance: none;
}

html.search-open,
body.search-open{
    overflow: hidden;
    overscroll-behavior: none;
}

.product-images{

    position:relative;

    width:100%;
    height:100%;

}

.product-images .image-1{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:1;

    transition:opacity .25s ease;

}

.product-images.has-hover img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.product-images.has-hover .image-2{

    opacity:0;

    pointer-events:none;

    transition:opacity .25s ease;

}

@media (hover:hover){

    .product-card:hover .product-images.has-hover .image-1{

        opacity:0;

    }

    .product-card:hover .product-images.has-hover .image-2{

        opacity:1;

    }

}




/* ================================================= */
/* RESPONSIVE: RANGOS DE REFERENCIA                   */
/*                                                    */
/* Movil:   0 - 767px                                 */
/* Tablet:  768 - 1023px                              */
/* Laptop:  1024 - 1199px                             */
/* Desktop: 1200px en adelante                        */
/*                                                    */
/* La barra .mobile-categories se reutiliza de forma   */
/* intencional en tablet, laptop y desktop.            */
/* Estas reglas finales son la fuente de verdad para   */
/* los cortes; el diseno existente se conserva.        */
/* ================================================= */