/* =========================
   GENERAL RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#ffffff;
    color:#252525;
    line-height:1.6;
}

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

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

img{
    display:block;
    max-width:100%;
}

button,
input,
select{
    font:inherit;
}


/* =========================
   NAVIGATION BAR
========================= */

header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#ffffff;
    box-shadow:0 2px 14px rgba(0,0,0,0.08);
}

.navbar{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:flex;
    flex-direction:column;
}

.logo h2{
    color:#e91e63;
    font-size:27px;
    line-height:1.2;
}

.logo span{
    color:#777777;
    font-size:13px;
    margin-top:3px;
}

nav{
    display:flex;
    align-items:center;
    gap:28px;
}

nav a{
    color:#333333;
    font-weight:600;
    transition:color 0.3s ease;
}

nav a:hover,
nav .active{
    color:#e91e63;
}

.cart-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:7px;
    padding:11px 17px;
    color:#ffffff;
    background:#e91e63;
    border-radius:9px;
}

.cart-link:hover{
    color:#ffffff;
    background:#c2185b;
}

.cart-count{
    min-width:21px;
    height:21px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    color:#e91e63;
    border-radius:50%;
    font-size:12px;
}


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

.bags-hero{
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(to right,#ffd6e7,#fff2e0);
}

.hero-label{
    margin-bottom:12px;
    color:#e91e63;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.bags-hero h1{
    max-width:800px;
    margin:0 auto 18px;
    color:#111111;
    font-size:52px;
    line-height:1.15;
}

.hero-description{
    max-width:700px;
    margin:0 auto 32px;
    color:#555555;
    font-size:18px;
}

.hero-button{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:14px 28px;
    background:#e91e63;
    color:#ffffff;
    border-radius:10px;
    font-weight:700;
    transition:0.3s ease;
}

.hero-button:hover{
    background:#c2185b;
    transform:translateY(-2px);
}


/* =========================
   BREADCRUMB
========================= */

.breadcrumb-section{
    background:#ffffff;
    border-bottom:1px solid #eeeeee;
}

.breadcrumb{
    min-height:62px;
    display:flex;
    align-items:center;
    gap:11px;
    color:#777777;
    font-size:14px;
}

.breadcrumb a:hover{
    color:#e91e63;
}

.breadcrumb i{
    font-size:10px;
}

.breadcrumb span{
    color:#e91e63;
    font-weight:700;
}


/* =========================
   SHOP SECTION
========================= */

.shop-section{
    padding:80px 0;
    background:#f8f8f8;
}

.shop-toolbar{
    margin-bottom:40px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.section-label{
    color:#e91e63;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.shop-heading h2{
    margin:5px 0;
    font-size:38px;
    line-height:1.2;
}

.product-count{
    color:#777777;
}

.toolbar-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.search-box{
    position:relative;
    width:280px;
}

.search-box i{
    position:absolute;
    top:50%;
    left:15px;
    color:#888888;
    transform:translateY(-50%);
}

.search-box input{
    width:100%;
    height:48px;
    padding:0 15px 0 43px;
    border:1px solid #dddddd;
    border-radius:9px;
    background:#ffffff;
    outline:none;
}

.search-box input:focus{
    border-color:#e91e63;
    box-shadow:0 0 0 3px rgba(233,30,99,0.1);
}

.toolbar-actions select{
    height:48px;
    padding:0 36px 0 15px;
    border:1px solid #dddddd;
    border-radius:9px;
    color:#444444;
    background:#ffffff;
    outline:none;
    cursor:pointer;
}

.toolbar-actions select:focus{
    border-color:#e91e63;
}


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

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

.product-card{
    min-width:0;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #eeeeee;
    border-radius:16px;
    box-shadow:0 8px 22px rgba(0,0,0,0.06);
    transition:transform 0.3s ease,
               box-shadow 0.3s ease;
}

.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 32px rgba(0,0,0,0.12);
}


/* Tablet */

@media(max-width:900px){

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

}


/* Mobile */

@media (max-width:600px){

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

    .product-card{
        width:100%;
        margin:0;
        min-width:0;
    }

}

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

.product-image{
    position:relative;
    overflow:hidden;
    height:300px;
    background:#f1f1f1;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.4s ease;
}

.product-card:hover .product-image img{
    transform:scale(1.05);
}


/* =========================
   PRODUCT BADGES
========================= */

.product-badge{
    position:absolute;
    top:15px;
    left:15px;
    z-index:2;
    padding:7px 13px;
    color:#ffffff;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

.badge-new{
    background:#e91e63;
}

.badge-sale{
    background:#d32f2f;
}

.badge-popular{
    background:#7b1fa2;
}


/* =========================
   PRODUCT INFORMATION
========================= */

.product-info{
    padding:22px;
}

.product-category{
    margin-bottom:7px;
    color:#e91e63;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.7px;
}

.product-info h3{
    min-height:52px;
    color:#222222;
    font-size:20px;
    line-height:1.3;
}

.product-info h3 a{
    transition:color 0.3s ease;
}

.product-info h3 a:hover{
    color:#e91e63;
}


/* =========================
   PRODUCT PRICES
========================= */

.price-container{
    min-height:42px;
    margin:17px 0 20px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.current-price{
    color:#e91e63;
    font-size:23px;
    font-weight:700;
}

/* This slashes the old price */

.old-price{
    color:#999999;
    font-size:15px;
    text-decoration:line-through;
    text-decoration-thickness:1.5px;
}


/* =========================
   PRODUCT BUTTONS
========================= */

.product-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.details-button,
.add-cart-button{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 12px;
    border-radius:9px;
    font-size:14px;
    font-weight:700;
    text-align:center;
    cursor:pointer;
    transition:0.3s ease;
}

.details-button{
    color:#333333;
    background:#ffffff;
    border:1px solid #d8d8d8;
}

.details-button:hover{
    color:#e91e63;
    border-color:#e91e63;
}

.add-cart-button{
    color:#ffffff;
    background:#e91e63;
    border:1px solid #e91e63;
}

.add-cart-button:hover{
    background:#c2185b;
    border-color:#c2185b;
}

.add-cart-button.added{
    background:#2e7d32;
    border-color:#2e7d32;
}


/* =========================
   NO RESULTS
========================= */

.no-results{
    display:none;
    padding:70px 20px;
    text-align:center;
}

.no-results i{
    margin-bottom:18px;
    color:#e91e63;
    font-size:55px;
}

.no-results h3{
    margin-bottom:8px;
    font-size:26px;
}

.no-results p{
    color:#777777;
}


/* =========================
   STORE BENEFITS
========================= */

.store-benefits{
    padding:65px 0;
    background:#ffffff;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.benefit-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:28px;
    background:#fff8fb;
    border-radius:15px;
}

.benefit-card > i{
    min-width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:#e91e63;
    border-radius:50%;
    font-size:20px;
}

.benefit-card h3{
    margin-bottom:5px;
    font-size:19px;
}

.benefit-card p{
    color:#666666;
    font-size:14px;
}


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

footer{
    padding:70px 0 20px;
    color:#ffffff;
    background:#111111;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.footer-grid h3{
    margin-bottom:17px;
}

.footer-grid p{
    margin-bottom:9px;
    color:#cccccc;
}

.footer-grid a{
    color:#cccccc;
    transition:color 0.3s ease;
}

.footer-grid a:hover{
    color:#ffffff;
}

.copyright{
    width:90%;
    max-width:1200px;
    margin:45px auto 0;
    padding-top:20px;
    color:#999999;
    text-align:center;
    border-top:1px solid #333333;
}


/* =========================
   TABLET RESPONSIVE DESIGN
========================= */

@media(max-width:1000px){

    .navbar{
        padding:17px 0;
        flex-direction:column;
    }

    nav{
        justify-content:center;
        flex-wrap:wrap;
    }

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

    .shop-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .toolbar-actions{
        width:100%;
    }

    .search-box{
        flex:1;
        width:auto;
    }

    .benefits-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =========================
   MOBILE RESPONSIVE DESIGN
========================= */

@media(max-width:650px){

    .navbar{
        width:94%;
    }

    .logo{
        text-align:center;
    }

    .logo h2{
        font-size:23px;
    }

    nav{
        gap:14px;
        font-size:14px;
    }

    .cart-link{
        padding:9px 13px;
    }

    .bags-hero{
        padding:70px 18px;
    }

    .bags-hero h1{
        font-size:35px;
    }

    .hero-description{
        font-size:16px;
    }

    .breadcrumb{
        overflow-x:auto;
        white-space:nowrap;
    }

    .shop-section{
        padding:60px 0;
    }

    .shop-heading h2{
        font-size:31px;
    }

    .toolbar-actions{
        flex-direction:column;
    }

    .search-box,
    .toolbar-actions select{
        width:100%;
    }

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

    .product-image{
        height:330px;
    }

    .product-buttons{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:400px){

    .product-image{
        height:280px;
    }

    .bags-hero h1{
        font-size:30px;
    }

}

/* =====================================
   COMPACT MOBILE PRODUCT GRID
   2 PRODUCTS PER ROW
===================================== */

@media (max-width:600px){

    .shop-section{
        padding:25px 8px;
    }

    .product-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:8px !important;
        align-items:start;
    }

    .product-card{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        border-radius:10px !important;
        overflow:hidden;
        box-shadow:0 3px 10px rgba(0,0,0,0.08);
    }

    /* Smaller product image */
    .product-image{
        width:100%;
        height:180px !important;
        aspect-ratio:auto !important;
        overflow:hidden;
    }

    .product-image img{
        width:100%;
        height:100% !important;
        object-fit:cover;
        display:block;
    }

    /* Compact information area */
    .product-info{
        padding:9px !important;
    }

    .product-category{
        margin:0 0 5px;
        font-size:9px !important;
        line-height:1.2;
    }

    .product-info h3{
        margin:0 0 7px !important;
        font-size:14px !important;
        line-height:1.25;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .price-container{
        margin:5px 0 !important;
    }

    .current-price{
        font-size:17px !important;
        line-height:1.2;
    }

    .old-price{
        display:block;
        margin:3px 0 0 !important;
        font-size:12px !important;
    }

    .in-stock,
    .out-of-stock{
        margin:7px 0 !important;
        font-size:12px !important;
    }

    /* Smaller buttons */
    .product-buttons{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:5px !important;
    }

    .details-button,
    .add-cart-button{
        width:100% !important;
        min-height:34px !important;
        padding:7px 4px !important;
        border-radius:7px !important;
        font-size:11px !important;
        line-height:1.1;
    }

    .add-cart-button i{
        font-size:11px;
        margin-right:3px;
    }

    /* Smaller badges */
    .product-badge{
        padding:5px 8px !important;
        font-size:10px !important;
    }
}