/* =====================================================
   Dar Al Sharka — Main Stylesheet
   ===================================================== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal',sans-serif;background:#F7F5F0;color:#1A1A1A;line-height:1.7}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Container */
.container{width:min(1180px,92%);margin:auto}

/* =====================================================
   Header
   ===================================================== */
.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #eee}
.header-inner{height:78px;display:flex;align-items:center;gap:30px}
.logo img{width:180px;height:auto}
.main-nav{display:flex;gap:24px;flex:1;justify-content:center}
.main-nav a:hover{color:#C9A96E}
.header-actions{display:flex;gap:10px}
.icon-btn{border:0;background:none;cursor:pointer;font-size:20px;position:relative;padding:6px}
.badge{background:#C9A96E;color:#fff;border-radius:20px;padding:1px 6px;font-size:10px}
.menu-toggle{display:none}

/* =====================================================
   Hero
   ===================================================== */
.hero{
    min-height:600px;
    background:linear-gradient(to right, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%), url('/assets/images/hero.jpg') center right/cover;
    display:flex;
    align-items:center;
    position:relative;
}
.hero-content{color:#fff;width:min(1180px,92%);margin:auto;position:relative;z-index:2;}
.hero h1{font-size:48px;margin-bottom:10px}

/* =====================================================
   Buttons
   ===================================================== */
.btn{display:inline-block;padding:12px 24px;border-radius:8px;border:0;cursor:pointer;font-family:inherit;font-weight:700;transition:.2s}
.btn-primary{background:#1A1A1A;color:#fff}
.btn-primary:hover{background:#C9A96E;color:#1A1A1A}
.btn-gold{background:#C9A96E;color:#1A1A1A}
.btn-gold:hover{background:#1A1A1A;color:#fff}
.btn-block{width:100%;text-align:center}

/* =====================================================
   Sections
   ===================================================== */
.section{padding:70px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.section-title{font-size:28px;font-weight:800;color:#1A1A1A}

/* =====================================================
   Categories
   ===================================================== */
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category-card{padding:35px;background:#fff;border-radius:12px;text-align:center;border:1px solid #eee;transition:.2s}
.category-card:hover{border-color:#C9A96E;transform:translateY(-2px)}

/* =====================================================
   Product Grid (Shein-Style) — FIXED
   ===================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
}
.product-grid > * {
    min-width: 0;
}
@media(min-width: 600px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media(min-width: 900px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Legacy product card (fallback if product-card.php not used) */
.product-card{background:#fff;border-radius:12px;overflow:hidden;position:relative}
.product-img{aspect-ratio:3/4;background:#f2ede3}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-info{padding:15px}
.product-info h3{font-size:16px}
.product-price{color:#C9A96E;font-weight:700;margin-top:5px}
.fav-btn{position:absolute;top:10px;left:10px;border:0;background:#fff;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:20px}

/* =====================================================
   Page Header
   ===================================================== */
.page-header{padding:60px 0;background:#efe9de}

/* =====================================================
   Layouts
   ===================================================== */
.shop-layout,.product-layout,.cart-layout,.checkout-layout{display:grid;grid-template-columns:1fr 320px;gap:30px}
.product-layout{grid-template-columns:1fr 1fr}

/* =====================================================
   Product Page
   ===================================================== */
.main-image{width:100%;max-height:650px;object-fit:cover;background:#f2ede3}
.product-actions{display:flex;gap:10px;margin-top:25px}
.product-actions input{width:80px;padding:12px}

/* =====================================================
   Cart & Checkout
   ===================================================== */
.cart-item{display:flex;justify-content:space-between;background:#fff;padding:20px;border-bottom:1px solid #eee}
.cart-summary,.checkout-summary{background:#fff;padding:25px;height:max-content}
.checkout-form{background:#fff;padding:25px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-family:inherit;font-size:14px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#C9A96E}

/* =====================================================
   Footer
   ===================================================== */
.site-footer{background:#1A1A1A;color:#fff;padding:50px 0}
.site-footer .container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}
.site-footer a{color:#ddd;margin:5px}

/* =====================================================
   WhatsApp Float
   ===================================================== */
.wa-float{position:fixed;bottom:20px;left:20px;background:#25d366;color:#fff;padding:12px 18px;border-radius:30px;z-index:60;box-shadow:0 6px 20px rgba(37,211,102,.3)}

/* =====================================================
   Search Overlay
   ===================================================== */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;display:none;align-items:center;justify-content:center}
.search-overlay.open{display:flex}
.search-box{background:#fff;padding:30px;width:min(600px,90%);display:flex;gap:10px;border-radius:12px}
.search-box input{width:100%;padding:14px;border:1px solid #ddd;border-radius:8px;font-family:inherit}

/* =====================================================
   Flash Messages
   ===================================================== */
.flash{position:fixed;top:90px;right:20px;z-index:90;padding:12px 20px;background:#e8f5e9;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.alert-error{background:#ffebee;color:#c62828}

/* =====================================================
   Prose & Track
   ===================================================== */
.prose{max-width:800px}
.track-form{display:flex;gap:10px;margin:20px 0}
.track-form input{padding:12px;flex:1;border:1px solid #ddd;border-radius:8px;font-family:inherit}

/* =====================================================
   Success Page
   ===================================================== */
.success-page{padding:100px 0;text-align:center}
.success-inner{background:#fff;padding:50px;border-radius:15px}

/* =====================================================
   Responsive
   ===================================================== */
@media(max-width:900px){
    .main-nav{display:none;position:absolute;top:78px;right:0;left:0;background:#fff;padding:20px;flex-direction:column;box-shadow:0 8px 20px rgba(0,0,0,.1)}
    .main-nav.open{display:flex}
    .menu-toggle{display:block}
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .shop-layout,.product-layout,.cart-layout,.checkout-layout{grid-template-columns:1fr}
    .site-footer .container{grid-template-columns:1fr}
    .hero h1{font-size:34px}
    .hero{min-height:500px;background-position:center right;}
}

@media(max-width:480px){
    .header-inner{gap:12px}
    .logo img{width:140px}
    .section{padding:40px 0}
    .section-title{font-size:22px}
}