:root{

    --bg:#f7f7f7;

    --card:#ffffff;

    --text:#0b0b0b;

    --muted:#7a7a7a;

    --line:#e9e9e9;

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

    --radius:16px;

    --accent:#111;

    --accent2:#e11d48;

    --brand:#2563eb;

    --brand2:#1d4ed8;

    --drawerW:340px;

    --drawerSpeed:520ms;

    --drawerEasing:
        cubic-bezier(.2,.9,.2,1);

    --backdrop:
        rgba(0,0,0,.35);

}


*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:
        'Poppins',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.5;

}


body.drawer-open{
    overflow:hidden;
}


button,
input{
    font-family:inherit;
}


button{
    cursor:pointer;
}


a{
    text-decoration:none;
    color:inherit;
}


/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.overlay{

    position:fixed;

    inset:0;

    background:var(--backdrop);

    opacity:0;

    pointer-events:none;

    transition:
        opacity 260ms ease;

    z-index:2000;

    backdrop-filter:blur(3px);

}


.overlay.show{

    opacity:1;

    pointer-events:auto;

}


/*
|--------------------------------------------------------------------------
| DRAWERS
|--------------------------------------------------------------------------
*/

.drawer{

    position:fixed;

    top:0;

    height:100dvh;

    width:min(
        var(--drawerW),
        92vw
    );

    background:#fff;

    z-index:2100;

    display:flex;

    flex-direction:column;

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

    will-change:transform;

}


/*
|--------------------------------------------------------------------------
| LEFT DRAWER
|--------------------------------------------------------------------------
*/

.drawer.left{

    left:0;

    transform:
        translateX(-110%);

    opacity:0;

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

    transition:
        transform
        var(--drawerSpeed)
        var(--drawerEasing),

        opacity
        var(--drawerSpeed)
        var(--drawerEasing);

}


.drawer.left.open{

    transform:
        translateX(0);

    opacity:1;

}


/*
|--------------------------------------------------------------------------
| RIGHT DRAWER
|--------------------------------------------------------------------------
*/

.drawer.right{

    right:0;

    transform:
        translateX(110%);

    opacity:0;

    border-left:
        1px solid var(--line);

    transition:
        transform
        var(--drawerSpeed)
        var(--drawerEasing),

        opacity
        var(--drawerSpeed)
        var(--drawerEasing);

}


.drawer.right.open{

    transform:
        translateX(0);

    opacity:1;

}


/*
|--------------------------------------------------------------------------
| DRAWER HEADER
|--------------------------------------------------------------------------
*/

.drawerHeader{

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        0 16px;

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

    background:#fff;

}


.drawerTitle{

    font-size:18px;

    font-weight:800;

}


.drawerClose{

    width:40px;

    height:40px;

    border-radius:13px;

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

    background:#fff;

    display:grid;

    place-items:center;

    transition:.2s ease;

}


.drawerClose:hover{

    background:#f5f5f5;

    transform:
        rotate(3deg);

}


.drawerBody{

    padding:
        14px;

    overflow:auto;

    flex:1;

}


/*
|--------------------------------------------------------------------------
| LEFT MENU
|--------------------------------------------------------------------------
*/

.drawerSectionTitle{

    margin:
        8px 6px 8px;

    font-size:11px;

    color:#777;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.drawerList{

    display:flex;

    flex-direction:column;

    gap:2px;

}


.drawerItem{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    padding:
        8px 10px;

    border:
        1px solid transparent;

    border-radius:12px;

    background:transparent;

    text-align:left;

    transition:.2s ease;

}


.drawerItem:hover{

    background:#fafafa;

    border-color:
        var(--line);

}


.drawerItem .leftSide{

    display:flex;

    align-items:center;

    gap:12px;

}


.miniIcon{

    width:40px;

    height:40px;

    min-width:40px;

    border-radius:11px;

    display:grid;

    place-items:center;

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

    background:#fff;

}


.miniIcon i{

    font-size:16px;

}


.drawerItem .chev{

    color:#999;

    font-size:20px;

}


/*
|--------------------------------------------------------------------------
| CART DRAWER
|--------------------------------------------------------------------------
*/

.cartTop{

    padding:
        14px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.10),
            rgba(29,78,216,.03)
        );

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

}


.cartTopRow{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;

}


.cartTitle{

    font-size:18px;

    font-weight:800;

}


.cartSummary{

    margin-top:3px;

    color:var(--muted);

    font-size:12px;

}


.cartTopActions{

    display:flex;

    gap:6px;

}


.miniBtn{

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

    background:#fff;

    border-radius:11px;

    padding:
        8px 10px;

    font-size:11px;

}


.miniBtn:hover{

    background:#f7f7f7;

}


.cartList{

    flex:1;

    overflow:auto;

    padding:
        12px;

}


.cartEmpty{

    padding:
        35px 15px;

    text-align:center;

    color:var(--muted);

}


.cartItem{

    display:grid;

    grid-template-columns:
        58px 1fr auto;

    gap:10px;

    padding:10px;

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

    border-radius:14px;

    margin-bottom:10px;

    background:#fff;

}


.cartImage{

    width:58px;

    height:70px;

    border-radius:10px;

    overflow:hidden;

    background:#f3f3f3;

}


.cartImage img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.cartItemName{

    font-size:13px;

    line-height:1.3;

}


.cartItemMeta{

    color:var(--muted);

    font-size:11px;

    margin-top:3px;

}


.cartItemPrice{

    margin-top:5px;

    font-size:13px;

}


.qtyRow{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:8px;

}


.qtyBtn{

    width:28px;

    height:28px;

    border-radius:9px;

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

    background:#fff;

    font-size:16px;

}


.qty{

    min-width:22px;

    text-align:center;

    font-size:12px;

}


.removeBtn{

    border:0;

    background:transparent;

    color:#e11d48;

    font-size:11px;

}


.cartFooter{

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

    padding:
        14px 16px 18px;

    background:#fff;

}


.totalRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}


.totalLabel{

    color:var(--muted);

    font-size:13px;

}


.totalValue{

    font-size:20px;

    font-weight:800;

}


.checkoutBtn{

    width:100%;

    border:0;

    border-radius:14px;

    padding:13px;

    background:
        linear-gradient(
            135deg,
            var(--brand),
            var(--brand2)
        );

    color:#fff;

    font-weight:700;

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.22);

}


.checkoutBtn:hover{

    transform:
        translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| TOP BAR
|--------------------------------------------------------------------------
*/

.topbar{

    position:sticky;

    top:0;

    z-index:1000;

    background:#fff;

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

}


.promo{

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    background:#111;

    color:#fff;

}


.promoText{

    font-size:13px;

    white-space:nowrap;

}


.closeX{

    position:absolute;

    right:12px;

    top:50%;

    transform:
        translateY(-50%);

    width:28px;

    height:28px;

    border-radius:9px;

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

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

    color:#fff;

    display:grid;

    place-items:center;

}


.brandRow{

    height:72px;

    display:grid;

    grid-template-columns:
        64px 1fr 64px;

    align-items:center;

    padding:
        0 10px;

}


.iconBtn{

    width:44px;

    height:44px;

    border-radius:14px;

    display:grid;

    place-items:center;

    border:
        1px solid transparent;

    background:transparent;

    color:#111;

}


.iconBtn:hover{

    border-color:var(--line);

    background:#fafafa;

}


.logo{

    display:flex;

    align-items:center;

    justify-content:center;

}


.logoMark{

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:25px;

    font-weight:800;

    letter-spacing:.7px;

}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero{

    width:100%;

    height:110px;

    background:
        url('https://auztynosportshub.store/images/bg/index-bg.png')
        center/cover
        no-repeat;

}


/*
|--------------------------------------------------------------------------
| FILTER BAR
|--------------------------------------------------------------------------
*/

.filtersRow{

    position:sticky;

    top:116px;

    z-index:900;

    background:#fff;

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

    padding:
        12px 14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    flex-wrap:wrap;

}


.filtersLeft{

    display:flex;

    align-items:center;

    gap:10px;

}


.filterTextBlock{

    display:flex;

    flex-direction:column;

}


.filtersTitle{

    font-size:16px;

    font-weight:700;

}


.filtersSubtitle{

    font-size:12px;

    color:var(--muted);

}


.filtersControls{

    display:flex;

    align-items:center;

    gap:8px;

}


.sortIcon{

    width:36px;

    height:36px;

    border-radius:11px;

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

    background:#fff;

    display:grid;

    place-items:center;

}


.sortPillsRow{

    display:flex;

    gap:8px;

    width:100%;

    overflow-x:auto;

    padding-bottom:2px;

}


.filterPillBtn{

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

    background:#fff;

    border-radius:999px;

    padding:
        9px 15px;

    font-size:12px;

    white-space:nowrap;

}


.filterPillBtn.active{

    background:#111;

    color:#fff;

    border-color:#111;

}


/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.page{

    max-width:1200px;

    margin:auto;

    padding:
        18px 12px 100px;

}


/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

.searchRow{

    display:flex;

    gap:9px;

    margin-bottom:18px;

}


.searchBox{

    flex:1;

    display:flex;

    align-items:center;

    gap:8px;

    background:#fff;

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

    border-radius:14px;

    padding:
        10px 13px;

}


.searchBox input{

    width:100%;

    border:0;

    outline:none;

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| PRODUCTS
|--------------------------------------------------------------------------
*/

.productGrid{

    display:grid;

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

    gap:14px;

}


.productCard{

    background:#fff;

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

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:
        0 2px 0 rgba(0,0,0,.02);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.productCard:hover{

    transform:
        translateY(-4px);

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

}


.productImgWrap{

    position:relative;

    aspect-ratio:4/5;

    background:#f2f2f2;

    overflow:hidden;

}


.productImgWrap > a{

    display:block;

    width:100%;

    height:100%;

}


.productImg{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .4s ease;

}


.productCard:hover .productImg{

    transform:
        scale(1.035);

}


.discount{

    position:absolute;

    top:10px;

    left:10px;

    z-index:5;

    background:#111;

    color:#fff;

    padding:
        5px 9px;

    border-radius:10px;

    font-size:11px;

}


/*
|--------------------------------------------------------------------------
| QUICK ACTIONS
|--------------------------------------------------------------------------
*/

.quickActions{

    position:absolute;

    left:0;

    right:0;

    bottom:11px;

    display:flex;

    justify-content:center;

    gap:9px;

    z-index:10;

}


.actionPill{

    width:44px;

    height:44px;

    border-radius:15px;

    background:#fff;

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

    display:grid;

    place-items:center;

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

    transition:.2s ease;

}


.actionPill:hover{

    transform:
        translateY(-2px)
        scale(1.04);

}


.actionPill.wish-active{

    background:#111;

    color:#fff;

}


.actionPill.wish-active svg{

    fill:#fff;

    stroke:#fff;

}


/*
|--------------------------------------------------------------------------
| PRODUCT META
|--------------------------------------------------------------------------
*/

.productMeta{

    padding:
        11px 12px 14px;

}


.productCategory{

    font-size:10px;

    color:var(--muted);

    text-transform:uppercase;

    margin-bottom:3px;

}


.productTitle{

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    text-transform:uppercase;

}


.priceRow{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:6px;

}


.price{

    font-size:16px;

    font-weight:800;

}


.buyRow{

    display:flex;

    gap:8px;

    margin-top:11px;

}


.buyBtn{

    flex:1;

    border:0;

    border-radius:12px;

    padding:
        10px;

    background:#111;

    color:#fff;

    font-size:11px;

    font-weight:700;

}


.viewBtn{

    width:42px;

    height:42px;

    border-radius:12px;

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

    background:#fff;

    display:grid;

    place-items:center;

}


/*
|--------------------------------------------------------------------------
| PAGINATION
|--------------------------------------------------------------------------
*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    margin-top:24px;

    flex-wrap:wrap;

}


.pageLink{

    min-width:38px;

    height:38px;

    padding:0 10px;

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

    background:#fff;

    border-radius:11px;

    display:grid;

    place-items:center;

    font-size:12px;

}


.pageLink.active{

    background:#111;

    color:#fff;

    border-color:#111;

}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.emptyProducts{

    grid-column:1/-1;

    text-align:center;

    padding:50px 20px;

    color:var(--muted);

}


/*
|--------------------------------------------------------------------------
| BOTTOM NAV
|--------------------------------------------------------------------------
*/

.bottomNav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:76px;

    background:#fff;

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

    z-index:1100;

    display:flex;

    align-items:center;

    justify-content:center;

}


.navInner{

    width:100%;

    max-width:700px;

    display:grid;

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

    gap:4px;

    padding:
        4px 7px;

}


.navItem{

    border:0;

    background:transparent;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    padding:6px 3px;

    color:#111;

}


.navItem span{

    font-size:10px;

}


.navItem.active{

    color:#2563eb;

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(min-width:700px){

    .productGrid{

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

        gap:18px;

    }

}


@media(min-width:1000px){

    .productGrid{

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

    }

}


@media(max-width:420px){

    .promoText{

        font-size:11px;

    }

    .brandRow{

        height:66px;

    }

    .hero{

        height:90px;

    }

    .filtersRow{

        top:110px;

    }

    .productGrid{

        gap:10px;

    }

    .productMeta{

        padding:
            9px 9px 12px;

    }

    .productTitle{

        font-size:11px;

    }

    .price{

        font-size:14px;

    }

    .buyBtn{

        font-size:10px;

        padding:9px 5px;

    }

}


/*
|--------------------------------------------------------------------------
| ICONS
|--------------------------------------------------------------------------
*/

.ico{

    width:21px;

    height:21px;

}


.icoSm{

    width:18px;

    height:18px;

}


/*
|--------------------------------------------------------------------------
| FOCUS / TAP EFFECTS
|--------------------------------------------------------------------------
*/

a:focus,
a:active,
button:focus,
button:active,
input:focus,
select:focus,
textarea:focus{

    outline:none !important;

    box-shadow:none !important;

}


a,
button,
input,
select,
textarea{

    -webkit-tap-highlight-color:transparent;

    tap-highlight-color:transparent;

}