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

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Poppins',sans-serif;color:#333;background:#fff;}
a{text-decoration:none;color:inherit;}

/* NAVBAR */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:15px 40px;background:linear-gradient(135deg,#ff85a1 0%,#e75480 50%,#c2185b 100%);border-bottom:none;position:sticky;top:0;z-index:1000;box-shadow:0 4px 18px rgba(231,84,128,0.25);font-family:'Poppins',sans-serif;gap:20px;}
.nav-brand a{font-size:1.5em;font-weight:700;color:#fff;font-family:'Poppins',sans-serif;white-space:nowrap;}
.nav-links{list-style:none;display:flex;gap:25px;white-space:nowrap;}
.nav-links a{color:#000;font-size:1.05em;font-weight:600;font-family:'Poppins',sans-serif;transition:color 0.2s;}
.nav-links a:hover{color:#fff;}
.nav-actions{display:flex;gap:12px;align-items:center;white-space:nowrap;}

.nav-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.25);
    border: 1.5px solid rgba(255,255,255,0.6);
    border-radius: 25px;
    padding: 6px 16px;
    flex: 1;
    max-width: 400px;
    min-width: 200px;
}
.nav-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    width: 100%;
}
.nav-search-input::placeholder { color: rgba(255,255,255,0.8); }
.nav-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 0 0 8px;
    color: #fff;
    line-height: 1;
}
@media(max-width:768px){
    .nav-search { max-width:100%; min-width:unset; order:3; width:100%; margin-top:8px; }
}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;z-index:1001;}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all 0.3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* BUTTONS */
.btn-login{color:#e75480;border:2px solid #e75480;padding:7px 18px;border-radius:20px;font-weight:600;font-size:0.9em;transition:all 0.2s;}
.btn-login:hover{background:#e75480;color:#fff;}
.btn-signup{background:#FFB6C1;color:#fff;padding:7px 18px;border-radius:20px;font-weight:600;font-size:0.9em;transition:background 0.2s;}
.btn-signup:hover{background:#e75480;}
.btn-cart{background:#fff;color:#e75480;padding:7px 18px;border-radius:20px;font-weight:600;font-size:0.9em;transition:all 0.2s;white-space:nowrap;border:none;position:relative;}
.cart-badge{background:#c2185b;color:#fff;font-size:0.72em;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px;vertical-align:middle;display:none;}
.btn-cart:hover{background:#ffe4ee;color:#c2185b;}

/* HERO */
.hero{
    background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)),
    url('https://images.unsplash.com/photo-1607344645866-009c320b63e0?w=1600&q=80') center/cover no-repeat;
    padding:120px 40px;
    text-align:center;
    border-bottom:none;
}
.hero h1{font-size:3em;color:#fff;margin-bottom:15px;text-shadow:0 2px 8px rgba(0,0,0,0.3);}
.hero p{font-size:1.2em;color:rgba(255,255,255,0.9);margin-bottom:30px;}
.btn-primary{background:#c2185b;color:#fff;padding:14px 36px;border-radius:30px;font-size:1em;font-weight:600;transition:background 0.2s;display:inline-block;}
/* .btn-primary:hover{background:#c2185b;} */

/* SECTION */
.section{padding:60px 40px;background:#fff;}
.section-title{text-align:center;font-size:2em;color:#c2185b;margin-bottom:40px;}

/* PRODUCT GRID */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto;}
.product-card{
    border:1.5px solid #FFB6C1;
    border-radius:12px;
    overflow:hidden;
    transition:transform 0.2s,box-shadow 0.2s;
    background:#fff;
    display:flex;
    flex-direction:column;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(231,84,128,0.15);}
.product-card .img-wrap{
    width:100%;
    padding-top:100%;
    position:relative;
    overflow:hidden;
    background:#fff0f3;
}
.product-card .img-wrap img{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;
    transition:transform 0.3s;
}
.product-card:hover .img-wrap img{transform:scale(1.05);}
.product-info{padding:14px;flex:1;display:flex;flex-direction:column;}
.product-info h3{font-size:0.88em;font-weight:600;color:#333;margin-bottom:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-desc{font-size:0.78em;color:#999;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-info .price{color:#e75480;font-weight:700;font-size:1em;display:block;margin-bottom:8px;}
.product-qty{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.qty-btn{width:26px;height:26px;border:1.5px solid #FFB6C1;background:#fff;color:#e75480;font-size:1em;border-radius:6px;cursor:pointer;line-height:1;transition:background 0.2s;}
.qty-btn:hover{background:#FFB6C1;color:#fff;}
.qty-input{width:40px;height:26px;text-align:center;border:1.5px solid #FFB6C1;border-radius:6px;font-size:0.85em;font-family:'Poppins',sans-serif;outline:none;}
.product-info .btn-add{display:block;margin-top:auto;background:#e75480;color:#fff;text-align:center;padding:9px;border-radius:8px;font-size:0.88em;font-weight:600;transition:background 0.2s;}
.product-info .btn-add:hover{background:#c2185b;}

/* CATEGORIES */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;max-width:1000px;margin:0 auto;}
.category-card{background:#fff;border:2px solid #FFB6C1;border-radius:12px;padding:30px 15px;text-align:center;font-weight:600;color:#e75480;transition:all 0.2s;cursor:pointer;display:block;}
.category-card:hover{background:#FFB6C1;color:#fff;}

/* PAGE HEADER */
.page-header{background:#fff;padding:50px 40px;text-align:center;border-bottom:2px solid #FFB6C1;}
.page-header h1{font-size:2.2em;color:#c2185b;}
.page-header p{color:#888;margin-top:8px;}

/* FORMS */
.form-wrap{max-width:550px;margin:40px auto;padding:0 20px;}
.form-wrap input,.form-wrap textarea,.form-wrap select{width:100%;padding:12px 15px;margin-bottom:15px;border:1px solid #FFB6C1;border-radius:8px;font-size:0.95em;font-family:'Poppins',sans-serif;outline:none;}
.form-wrap input:focus,.form-wrap textarea:focus{border-color:#e75480;}
.form-wrap label{display:block;margin-bottom:5px;color:#555;font-size:0.9em;}
.btn-submit{background:#e75480;color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:1em;font-family:'Poppins',sans-serif;font-weight:600;cursor:pointer;width:100%;transition:background 0.2s;}
.btn-submit:hover{background:#c2185b;}

/* CONTACT LAYOUT */
.contact-layout{display:flex;gap:50px;align-items:flex-start;max-width:1100px;margin:0 auto;}
.contact-details{flex:1;min-width:0;}
.contact-details h2{font-size:1.5em;color:#c2185b;margin-bottom:12px;}
.contact-details>p{color:#888;font-size:0.92em;margin-bottom:28px;line-height:1.6;}
.contact-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;}
.contact-icon{font-size:1.4em;margin-top:2px;flex-shrink:0;}
.contact-item strong{display:block;color:#333;font-size:0.95em;margin-bottom:4px;}
.contact-item p{color:#888;font-size:0.88em;line-height:1.6;margin:0;}
.contact-form-wrap{flex:1;min-width:0;background:#fff;border:1.5px solid #FFB6C1;border-radius:14px;padding:35px 30px;}
.contact-form-wrap h2{font-size:1.5em;color:#c2185b;margin-bottom:20px;}
.contact-form-wrap label{display:block;margin-bottom:5px;color:#555;font-size:0.9em;}
.contact-form-wrap input,.contact-form-wrap textarea{width:100%;padding:12px 15px;margin-bottom:15px;border:1px solid #FFB6C1;border-radius:8px;font-size:0.95em;font-family:'Poppins',sans-serif;outline:none;}
.contact-form-wrap input:focus,.contact-form-wrap textarea:focus{border-color:#e75480;}

/* CART */
.cart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cart-table{width:100%;border-collapse:collapse;max-width:900px;margin:0 auto;min-width:500px;}
.cart-table th,.cart-table td{padding:14px 18px;border-bottom:1px solid #ffe4e8;text-align:left;}
.cart-table th{background:#fff;color:#e75480;border-bottom:2px solid #FFB6C1;font-weight:600;}
.cart-total{text-align:right;max-width:900px;margin:20px auto;font-size:1.2em;color:#e75480;font-weight:600;padding:0 20px;}

/* FOOTER */
.footer{background:#fff;border-top:2px solid #FFB6C1;padding:30px 40px;text-align:center;color:#e75480;margin-top:60px;}
.footer-links{margin-top:10px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.footer-links a{color:#e75480;font-size:0.9em;}
.footer-links a:hover{color:#c2185b;text-decoration:underline;}

/* ADMIN */
.admin-wrap{display:flex;min-height:100vh;}
.admin-sidebar{width:220px;background:#fff;border-right:2px solid #FFB6C1;padding:30px 20px;flex-shrink:0;}
.admin-sidebar h2{margin-bottom:30px;font-size:1.2em;color:#c2185b;}
.admin-sidebar a{display:block;color:#e75480;padding:10px 0;font-size:0.95em;border-bottom:1px solid #ffe4e8;}
.admin-sidebar a:hover{color:#c2185b;font-weight:600;}
.admin-content{flex:1;padding:40px;background:#fff;min-width:0;}
.admin-content h1{color:#c2185b;margin-bottom:25px;}
.admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;min-width:500px;}
.admin-table th{background:#fff;color:#e75480;border-bottom:2px solid #FFB6C1;padding:12px 16px;text-align:left;}
.admin-table td{padding:12px 16px;border-bottom:1px solid #ffe4e8;}
.btn-edit{background:#fff;color:#e75480;border:1px solid #FFB6C1;padding:5px 12px;border-radius:6px;font-size:0.85em;cursor:pointer;}
.btn-delete{background:#e75480;color:#fff;border:none;padding:5px 12px;border-radius:6px;font-size:0.85em;margin-left:5px;cursor:pointer;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;}
.stat-card{background:#fff;border:2px solid #FFB6C1;border-radius:12px;padding:25px;text-align:center;}
.stat-card h3{font-size:2em;color:#c2185b;}
.stat-card p{color:#888;font-size:0.9em;}

/* MEGA DROPDOWN */
.has-mega{position:relative;}
.has-mega>a{display:flex;align-items:center;gap:4px;}
.mega-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid #FFB6C1;border-radius:14px;box-shadow:0 12px 40px rgba(231,84,128,0.15);z-index:99999;padding:20px 25px;display:none;grid-template-columns:repeat(4,1fr);gap:8px;min-width:600px;}
.has-mega:hover .mega-dropdown{display:grid;}
.mega-col{padding:0 22px;border-right:1px solid #ffe4e8;}
.mega-col:last-child{border-right:none;}
.mega-cat{display:block;font-weight:700;color:#c2185b !important;font-size:0.95em;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #ffe4e8;white-space:nowrap;}
.mega-col a{display:block;color:#333;font-size:0.92em;padding:6px 0;transition:color 0.2s;white-space:nowrap;}
.mega-col a:hover{color:#e75480;}

/* PROFILE ICON */
.profile-icon{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,0.15);transition:border-color 0.2s,background 0.2s;text-decoration:none;}
.profile-icon:hover{border-color:#fff;background:rgba(255,255,255,0.25);}
.profile-tooltip{position:absolute;top:48px;left:50%;transform:translateX(-50%);background:#fff;color:#e75480;font-size:0.78em;font-weight:600;padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s;box-shadow:0 2px 8px rgba(231,84,128,0.2);}
.profile-tooltip::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#fff;}
.profile-icon:hover .profile-tooltip{opacity:1;}

/* OUR SERVICES GRID */
.our-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
.our-service-card{background:#fff;border:2px solid #FFB6C1;border-radius:14px;padding:30px 24px;text-align:center;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s;display:block;}
.our-service-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(231,84,128,0.15);border-color:#e75480;}
.our-service-icon{font-size:2.2em;margin-bottom:12px;display:block;}
.our-service-card h3{font-size:1em;font-weight:700;color:#c2185b;margin-bottom:8px;}
.our-service-card p{font-size:0.85em;color:#666;line-height:1.6;}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;max-width:1000px;margin:0 auto;}
.service-card{border:1.5px solid #FFB6C1;border-radius:14px;padding:35px 25px;text-align:center;background:#fff;transition:transform 0.2s,box-shadow 0.2s;}
.service-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(231,84,128,0.12);}
.service-icon{font-size:2.2em;margin-bottom:14px;display:block;}
.service-card h3{font-size:1em;font-weight:700;color:#c2185b;margin-bottom:8px;}
.service-card p{font-size:0.88em;color:#666;line-height:1.6;}

/* TRENDING PRODUCTS */
.trend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;}
.trend-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px rgba(231,84,128,0.10);border:1.5px solid #FFB6C1;transition:transform 0.25s,box-shadow 0.25s;position:relative;display:flex;flex-direction:column;}
.trend-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(231,84,128,0.18);}
.trend-badge{position:absolute;top:12px;left:12px;background:#e75480;color:#fff;font-size:0.72em;font-weight:700;padding:4px 10px;border-radius:20px;z-index:1;letter-spacing:0.3px;}
.trend-img-wrap{width:100%;height:200px;overflow:hidden;background:#fff0f3;}
.trend-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}
.trend-card:hover .trend-img-wrap img{transform:scale(1.06);}
.trend-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.trend-stars{color:#e75480;font-size:0.85em;letter-spacing:2px;}
.trend-body h3{font-size:0.98em;font-weight:700;color:#333;margin:0;}
.trend-price{font-size:1.2em;font-weight:700;color:#e75480;}
.trend-qty{display:flex;align-items:center;gap:8px;}
.trend-qty .qty-btn{width:28px;height:28px;border:1.5px solid #FFB6C1;background:#fff0f3;color:#e75480;font-size:1em;border-radius:8px;cursor:pointer;font-weight:700;transition:background 0.2s;}
.trend-qty .qty-btn:hover{background:#e75480;color:#fff;border-color:#e75480;}
.trend-qty .qty-input{width:44px;height:28px;text-align:center;border:1.5px solid #FFB6C1;border-radius:8px;font-size:0.88em;font-family:'Poppins',sans-serif;outline:none;color:#333;}
.trend-btn{display:block;margin-top:4px;background:linear-gradient(90deg,#e75480,#FFB6C1);color:#fff;text-align:center;padding:10px;border-radius:10px;font-size:0.9em;font-weight:600;transition:opacity 0.2s;text-decoration:none;}
.trend-btn:hover{opacity:0.88;}

/* PRODUCTS LAYOUT WITH SIDEBAR */
.products-layout{display:flex;gap:30px;align-items:flex-start;}
.sub-sidebar{width:200px;min-width:200px;flex-shrink:0;border:1.5px solid #FFB6C1;border-radius:12px;padding:20px;position:sticky;top:80px;display:block;}
.sub-sidebar h3{font-size:1em;font-weight:700;color:#c2185b;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #FFB6C1;}
.sub-link{display:block;padding:8px 12px;color:#333;font-size:0.9em;border-radius:8px;margin-bottom:4px;transition:all 0.2s;}
.sub-link:hover{background:#fff0f3;color:#e75480;}
.sub-link.active{background:#e75480;color:#fff;font-weight:600;}
.products-main{flex:1;min-width:0;}
.products-main .product-grid{grid-template-columns:repeat(4,1fr);max-width:100%;margin:0;}

/* FILTER BAR */
.filter-bar{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:30px;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-btn{flex-shrink:0;background:#fff;color:#e75480;border:1.5px solid #FFB6C1;padding:7px 16px;border-radius:20px;font-size:0.85em;font-family:'Poppins',sans-serif;font-weight:600;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.filter-btn:hover{background:#FFB6C1;color:#fff;border-color:#FFB6C1;}
.filter-btn.active{background:#e75480;color:#fff;border-color:#e75480;}

.nav-cat-toggle { cursor:pointer; display:none; }
.nav-cat-toggle > span {
    display: block;
    padding: 10px 4px;
    font-size: 1em;
    color: #fff;
    font-weight: 600;
}
.nav-cat-list {
    display: none;
    list-style: none;
    padding-left: 14px;
    border-left: 2px solid rgba(255,255,255,0.3);
    margin-bottom: 6px;
}
.nav-cat-list.open { display: block; }
.nav-cat-list li a {
    display: block;
    padding: 7px 4px;
    font-size: 0.92em;
    color: rgba(255,255,255,0.9);
    border-bottom: none !important;
}
.nav-cat-list li a:hover { color: #fff; }
@media(max-width:768px){ .nav-cat-toggle { display: block !important; } }

/* ── RESPONSIVE ── */
@media(max-width:900px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:768px){
    /* Navbar */
    .navbar{flex-wrap:wrap;padding:12px 20px;gap:0;}
    .nav-brand{flex:1;}
    .hamburger{display:flex !important;}
    .nav-search{display:none;}
    .nav-links{
        display:none;
        flex-direction:column;
        width:100%;
        gap:0;
        border-top:1px solid rgba(255,255,255,0.3);
        margin-top:10px;
        padding-top:8px;
    }
    .nav-links.open{display:flex;}
    .nav-links li{border-bottom:1px solid rgba(255,255,255,0.2);}
    .nav-links a{display:block;padding:10px 4px;font-size:1em;color:#fff;}
    .nav-actions{width:100%;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.3);}
    /* Mega on mobile */
    .mega-dropdown{display:none !important;position:static;transform:none;min-width:unset;border:none;box-shadow:none;padding:0 0 0 12px;border-radius:0;grid-template-columns:1fr;}
    .mega-dropdown.open{display:grid !important;}
    .mega-col{border-right:none;padding:4px 0;}
    .has-mega>a{justify-content:space-between;}

    /* Hero */
    .hero{padding:60px 20px;}
    .hero h1{font-size:2em;}
    .hero p{font-size:1em;}

    /* Sections */
    .section{padding:40px 20px;}
    .section-title{font-size:1.5em;}

    /* Page header */
    .page-header{padding:35px 20px;}
    .page-header h1{font-size:1.6em;}

    /* Grids */
    .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;}
    .category-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
    .category-card{padding:20px 10px;font-size:0.9em;}

    /* Services */
    .services-grid{grid-template-columns:1fr 1fr;}
    .our-services-grid{grid-template-columns:repeat(2,1fr);}
    /* Trending */
    .trend-grid{grid-template-columns:repeat(2,1fr);}
    /* Products sidebar */
    .products-layout{flex-direction:column;}
    .sub-sidebar{width:100%;min-width:unset;position:static;display:flex;flex-wrap:wrap;gap:6px;}
    .sub-sidebar h3{width:100%;}
    .sub-link{padding:6px 12px;border:1px solid #FFB6C1;border-radius:20px;font-size:0.82em;}
    .products-main .product-grid{grid-template-columns:repeat(2,1fr);}
    /* Contact */
    .contact-layout{flex-direction:column;gap:30px;}

    /* Admin */
    .admin-wrap{flex-direction:column;}
    .admin-sidebar{width:100%;border-right:none;border-bottom:2px solid #FFB6C1;padding:20px;}
    .admin-content{padding:20px;}
    .stats-grid{grid-template-columns:1fr;}

    /* Footer */
    .footer{padding:25px 20px;}
    .footer-links{gap:12px;}

    /* Profile dropdown — switch to click on mobile */
    .profile-wrap:hover .profile-dropdown{display:none;}
    .profile-dropdown.open{display:block;}
}

@media(max-width:480px){
    .nav-brand a{font-size:1.2em;}
    .btn-cart{padding:6px 12px;font-size:0.85em;}
    .hero h1{font-size:1.6em;}
    .product-grid{grid-template-columns:1fr 1fr;}
    .product-card img{height:150px;}
    .form-wrap{margin:20px auto;}
    .services-grid{grid-template-columns:1fr;}
    .our-services-grid{grid-template-columns:1fr;}
    .trending-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .trend-grid{grid-template-columns:1fr;}
}