/*==================================
Google Font
==================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*==================================
Reset
==================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#ffffff;
color:#111;
padding-bottom:85px;
}

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

button,input{
border:none;
outline:none;
background:none;
font-family:'Inter',sans-serif;
}

.container{
width:92%;
max-width:1400px;
margin:auto;
}

/*==================================
Scrollbar
==================================*/

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#000;
border-radius:20px;
}

/*==================================
Top Bar
==================================*/

.top-bar{

height:42px;

display:flex;

justify-content:center;

align-items:center;

border-bottom:1px solid #ececec;

background:#fff;

}

.top-bar p{

font-size:13px;

font-weight:600;

letter-spacing:3px;

color:#444;

}

/*==================================
Header
==================================*/

.header{

background:#fff;

padding:18px 0 12px;

}

.logo{

text-align:center;

}

.logo a{

font-size:36px;

font-weight:800;

letter-spacing:5px;

}

/*==================================
Search
==================================*/

.search-section{

padding:12px 0 18px;

}

.search-box{

display:flex;

align-items:center;

height:58px;

padding:0 18px;

background:#f7f7f7;

border-radius:50px;

border:2px solid #efefef;

transition:.3s;

}

.search-box:focus-within{

border-color:#000;

background:#fff;

}

.search-box i{

font-size:20px;

color:#666;

}

.search-box input{

flex:1;

margin:0 15px;

font-size:16px;

background:none;

}

.search-box input::placeholder{

color:#999;

}

.scan-btn{

width:42px;

height:42px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#000;

color:#fff;

transition:.3s;

}

.scan-btn:hover{

transform:scale(1.05);

}

/*==================================
Bottom Navigation
==================================*/

.bottom-nav{

position:fixed;

left:0;

bottom:0;

width:100%;

height:72px;

background:#fff;

border-top:1px solid #e8e8e8;

display:flex;

justify-content:space-around;

align-items:center;

z-index:9999;

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

}

.bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

gap:5px;

font-size:13px;

font-weight:600;

color:#777;

transition:.3s;

}

.bottom-nav a i{

font-size:21px;

}

.bottom-nav a.active{

color:#000;

}

.bottom-nav a:hover{

color:#000;

}

/*==================================
Desktop
==================================*/

@media(min-width:992px){

body{

padding-bottom:0;

}

.top-bar{

height:46px;

}

.logo a{

font-size:42px;

}

.search-section{

padding-bottom:25px;

}

.search-box{

max-width:650px;

margin:auto;

}

.bottom-nav{

position:relative;

height:70px;

border-top:none;

border-bottom:1px solid #ececec;

box-shadow:none;

justify-content:center;

gap:80px;

}

.bottom-nav a{

flex-direction:row;

font-size:15px;

gap:10px;

}

.bottom-nav a i{

font-size:18px;

}

}


/*==================================
Category Slider
==================================*/

.category-slider{

background:#fff;

border-bottom:1px solid #ececec;

padding:12px 0;

}

.category-scroll{

display:flex;

align-items:center;

gap:14px;

overflow-x:auto;

padding:0 4%;

scrollbar-width:none;

-webkit-overflow-scrolling:touch;

}

.category-scroll::-webkit-scrollbar{

display:none;

}

.category-scroll a{

flex:0 0 auto;

padding:10px 22px;

border-radius:999px;

background:#f5f5f5;

font-size:14px;

font-weight:600;

color:#333;

transition:.3s;

white-space:nowrap;

}

.category-scroll a:hover{

background:#000;

color:#fff;

transform:translateY(-2px);

}

.category-scroll a.active{

background:#000;

color:#fff;

}

/* Desktop */

@media(min-width:992px){

.category-scroll{

justify-content:center;

padding:0;

}

.category-scroll a{

font-size:15px;

padding:11px 24px;

}

}


/*==========================
Premium Hero Slider
==========================*/

.hero-slider{

width:92%;

max-width:1400px;

margin:20px auto;

}

.brotherSwiper{

border-radius:24px;

overflow:hidden;

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

}

.brotherSwiper img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.swiper-button-next,
.swiper-button-prev{

color:#fff;

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

width:44px;

height:44px;

border-radius:50%;

}

.swiper-button-next::after,
.swiper-button-prev::after{

font-size:18px;

font-weight:700;

}

.swiper-pagination-bullet{

background:#fff;

opacity:.7;

}

.swiper-pagination-bullet-active{

background:#000;

opacity:1;

}

@media(min-width:768px){

.brotherSwiper img{

height:420px;

}

}




/* =========================================
   ACCOUNT PAGE
========================================= */

.account-page {
    padding: 20px 0 100px;
    background: #f7f7f7;
    min-height: 100vh;
}


/* PROFILE */

.account-profile {
    background: #eef3ff;
    margin: 0 15px 15px;
    padding: 22px 18px;
    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;

    background: #fff;

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

    font-size: 23px;
}

.profile-details h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.profile-details p {
    margin: 5px 0 0;
    color: #777;
    font-size: 15px;
}

.profile-arrow {
    color: #555;
}


/* QUICK ACTIONS */

.account-actions {
    background: #fff;

    margin: 0 15px 15px;
    border-radius: 14px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.account-action {
    min-height: 70px;

    border: 1px solid #ddd;
    border-radius: 10px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: #111;
    text-decoration: none;
}

.account-action > i:first-child {
    font-size: 21px;
}

.account-action span {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.account-action > i:last-child {
    font-size: 13px;
    color: #777;
}


/* SECTIONS */

.account-section {
    background: #fff;
    margin-top: 10px;
    padding: 20px 15px;
}

.account-section h3 {
    margin: 0 0 14px;
    font-size: 22px;
}


/* ROW */

.account-row {
    min-height: 58px;

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

    text-decoration: none;
    color: #222;

    border-bottom: 1px solid #f0f0f0;
}

.account-row:last-child {
    border-bottom: none;
}

.row-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.row-left i {
    width: 24px;
    text-align: center;
    font-size: 20px;
}

.account-row > i {
    font-size: 13px;
    color: #777;
}


/* LOGOUT */

.logout-section {
    padding: 20px 15px 30px;
    background: #fff;
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 52px;

    border-radius: 10px;

    background: #000;
    color: #fff;

    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}


/* MOBILE */

@media (max-width: 600px) {

    .account-page {
        padding-top: 10px;
    }

    .account-profile {
        margin-left: 12px;
        margin-right: 12px;
    }

    .account-actions {
        margin-left: 12px;
        margin-right: 12px;
    }

    .account-action {
        padding: 0 10px;
        gap: 8px;
    }

    .account-action span {
        font-size: 14px;
    }

    .account-section {
        padding-left: 15px;
        padding-right: 15px;
    }
}




/* ==========================================
   TRENDING PRODUCTS
========================================== */

.trending-heading-box{
    background:#f7f7f7;
    border:1px solid #e8e8e8;
    border-radius:14px;
    padding:14px 18px;
    margin-bottom:20px;
}

.section-eyebrow{
    display:block;
    margin-bottom:4px;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    color:#777;
}

.trending-heading-box h2{
    margin:0;
    font-size:22px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.5px;
}

@media(max-width:600px){

    .trending-heading-box{
        padding:12px 15px;
        margin-bottom:18px;
        border-radius:12px;
    }

    .section-eyebrow{
        font-size:8px;
        margin-bottom:3px;
    }

    .trending-heading-box h2{
        font-size:19px;
    }

}

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

.product-grid{

    display:grid;

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

    gap:20px;

}



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

.product-card{

    display:block;

    min-width:0;

    color:#111;

    text-decoration:none;

}



/* ==========================================
   IMAGE
========================================== */

.product-image-wrap{

    position:relative;

    width:100%;

    aspect-ratio:3 / 4;

    overflow:hidden;

    background:#f5f5f5;

    border-radius:4px;

}

.product-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1);

}

.product-card:hover .product-image{

    transform:scale(1.035);

}



/* ==========================================
   BADGE
========================================== */

.product-badge{

    position:absolute;

    top:12px;

    left:12px;

    padding:6px 9px;

    background:#111;

    color:#fff;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.2px;

    border-radius:2px;

}



/* ==========================================
   WISHLIST
========================================== */

.product-wishlist{

    position:absolute;

    top:10px;

    right:10px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#111;

    border-radius:50%;

    font-size:16px;

    cursor:pointer;

    opacity:0;

    transform:translateY(-5px);

    transition:

        opacity .25s ease,

        transform .25s ease,

        background .25s ease;

}

.product-card:hover .product-wishlist{

    opacity:1;

    transform:translateY(0);

}

.product-wishlist:hover{

    background:#111;

    color:#fff;

}



/* ==========================================
   PRODUCT CONTENT
========================================== */

.product-content{

    padding:13px 2px 0;

}



/* BRAND */

.product-brand{

    display:block;

    margin-bottom:6px;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

}



/* PRODUCT NAME */

.product-name{

    margin:0;

    font-size:14px;

    line-height:1.4;

    font-weight:500;

}



/* CATEGORY */

.product-category{

    display:block;

    margin-top:7px;

    font-size:10px;

    color:#888;

    letter-spacing:1px;

    text-transform:uppercase;

}



/* ==========================================
   TABLET
========================================== */

@media(max-width:992px){

    .trending-section{

        margin-top:60px;

    }

    .product-grid{

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

        gap:18px;

    }

}



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

@media(max-width:600px){

    .trending-section{

        width:94%;

        margin:50px auto 90px;

    }

    .trending-header{

        margin-bottom:22px;

    }

    .trending-header h2{

        font-size:25px;

    }

    .trending-header p{

        font-size:12px;

    }

    .product-grid{

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

        gap:20px 10px;

    }

    .product-image-wrap{

        aspect-ratio:3 / 4;

    }

    .product-badge{

        top:8px;

        left:8px;

        padding:5px 7px;

        font-size:7px;

    }

    .product-wishlist{

        width:34px;

        height:34px;

        top:7px;

        right:7px;

        opacity:1;

        transform:none;

        font-size:14px;

    }

    .product-content{

        padding-top:10px;

    }

    .product-brand{

        font-size:8px;

        margin-bottom:5px;

    }

    .product-name{

        font-size:12px;

        line-height:1.35;

    }

    .product-category{

        margin-top:5px;

        font-size:8px;

    }

}