/* ==========================================
   الحداد مول - Storefront CSS
   ========================================== */

:root {
    --primary: #12633D;
    --primary-dark: #0B472C;
    --secondary: #17212B;
    --gold: #F4B400;
    --gold-light: #FDECC8;
    --offer: #D92D20;
    --bg: #F9FAFB;
    --card-bg: #fff;
    --text: #1F2937;
    --text-light: #6B7280;
    --border: #E5E7EB;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --transition: .3s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Tajawal','Segoe UI',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
.container { max-width:1280px; margin:0 auto; padding:0 20px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:8px; font-weight:600; font-size:.95rem; cursor:pointer; border:none; transition:var(--transition); }
.btn-gold { background:linear-gradient(135deg,var(--gold),#c9a030); color:#fff; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(212,175,55,.4); }
.btn-primary-site { display:block; width:100%; padding:10px; border:none; border-radius:8px; background:var(--primary); color:#fff; font-weight:700; font-size:.9rem; cursor:pointer; transition:var(--transition); font-family:inherit; }
.btn-primary-site:hover { background:var(--primary-dark); }
.btn-outline { border:2px solid var(--primary); color:var(--primary); background:transparent; }
.btn-outline:hover { background:var(--primary); color:#fff; }

/* ---- Top Bar ---- */
.top-bar { background:var(--secondary); color:#fff; padding:8px 0; font-size:.85rem; }
.top-bar-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.contact-info { display:flex; gap:20px; }
.contact-info span, .location { display:flex; align-items:center; gap:6px; }

/* ---- Header ---- */
.main-header { background:#fff; padding:16px 0; box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo img { height:72px; width:auto; max-width:180px; object-fit:contain; }
.hamburger-btn { display:none; width:42px; height:42px; border:none; background:#f3f4f6; border-radius:50%; align-items:center; justify-content:center; font-size:1.15rem; color:var(--secondary); cursor:pointer; flex-shrink:0; }
@media (max-width:768px){
    .logo img { height:44px; }
    .hamburger-btn { display:flex; }
    /* شعار في المنتصف تمامًا بغض النظر عن عرض الأزرار الجانبية */
    .header-content { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
    .header-content .logo { grid-column:2; justify-content:center; }
    .header-content .hamburger-btn { grid-column:1; justify-self:start; }
    .header-content .header-actions { grid-column:3; justify-self:end; }
    .header-content .search-bar { grid-column:1 / -1; order:3; }
}
.logo-text h1 { font-size:1.5rem; font-weight:800; color:var(--primary); line-height:1.2; }
.logo-text p { font-size:.7rem; color:var(--gold); font-weight:700; letter-spacing:2px; }
.search-bar { flex:1; max-width:500px; }
.search-bar form { display:flex; background:#f3f4f6; border-radius:25px; overflow:hidden; border:2px solid transparent; transition:var(--transition); }
.search-bar form:focus-within { border-color:var(--primary); }
.search-bar input { flex:1; border:none; background:transparent; padding:10px 18px; font-size:.95rem; font-family:inherit; outline:none; }
.search-bar button { background:var(--primary); color:#fff; border:none; padding:0 18px; cursor:pointer; transition:var(--transition); }
.search-bar button:hover { background:var(--primary-dark); }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-icon { width:42px; height:42px; border-radius:50%; background:#f3f4f6; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:var(--transition); }
.header-icon:hover { background:var(--primary); color:#fff; }
.cart-count { position:absolute; top:-4px; right:-4px; background:var(--primary); color:#fff; font-size:.7rem; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.user-menu { position:relative; }
.user-dropdown { display:none; position:absolute; top:calc(100% + 8px); left:0; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:200px; z-index:200; overflow:hidden; }
.user-dropdown.show { display:block; }
.user-dropdown a { display:flex; align-items:center; gap:10px; padding:12px 16px; font-size:.9rem; transition:background .2s; }
.user-dropdown a:hover { background:#f9fafb; }

/* ---- Navigation ---- */
.main-nav { background:#fff; border-bottom:1px solid var(--border); }
.main-nav ul { display:flex; list-style:none; gap:0; justify-content:center; }
.main-nav li a { display:block; padding:12px 20px; font-weight:600; font-size:.95rem; color:var(--text); transition:var(--transition); }
.main-nav li a:hover, .main-nav li a.active { color:var(--primary); border-bottom:3px solid var(--primary); }

/* ---- Hero + Category Sidebar ---- */
.hero-wrap { padding:20px 0; background:var(--bg); }
.hero-grid { display:grid; grid-template-columns:270px 1fr; gap:20px; align-items:stretch; }
@media (max-width:900px){ .hero-grid { grid-template-columns:1fr; } .hero-cat-sidebar { display:none; } }

.hero-cat-sidebar { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.hero-cat-sidebar h3 { font-size:.95rem; font-weight:800; color:var(--secondary); padding:6px 10px 14px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.hero-cat-sidebar ul { list-style:none; }
.hero-cat-sidebar li a { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--text); transition:var(--transition); }
.hero-cat-sidebar li a:hover { background:#F0F7F3; color:var(--primary); }
.hero-cat-sidebar li a img { width:22px; height:22px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.hero-cat-sidebar li a span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-cat-sidebar li a i { font-size:.7rem; color:var(--text-light); }

.hero-slider { position:relative; height:420px; overflow:hidden; border-radius:var(--radius); background:linear-gradient(135deg,var(--primary-dark),var(--secondary)); }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; display:flex; align-items:center; }
.hero-slide.active { opacity:1; }
.hero-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-content { position:relative; z-index:2; color:#fff; max-width:600px; padding:0 40px; }
.hero-badge { display:inline-block; background:rgba(244,180,0,.95); color:#17212B; padding:8px 20px; border-radius:25px; font-weight:700; font-size:.9rem; margin-bottom:16px; }
.hero-title { font-size:2.5rem; font-weight:900; line-height:1.3; margin-bottom:12px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-subtitle { font-size:1.15rem; margin-bottom:24px; opacity:.9; }
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.slider-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:var(--transition); }
.slider-dot.active { background:var(--gold); transform:scale(1.3); }
@media (max-width:768px){ .hero-slider{ height:300px } .hero-title{ font-size:1.6rem } .hero-subtitle{ font-size:.95rem } .hero-content{ padding:0 24px } }

/* ---- Sections ---- */
.section-title { text-align:center; font-size:1.8rem; font-weight:800; margin-bottom:30px; position:relative; padding-bottom:12px; }
.section-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:60px; height:4px; background:var(--primary); border-radius:2px; }
.categories-section, .products-section { padding:50px 0; }
.search-section { padding:40px 0; }
.search-info { margin-bottom:20px; }
.search-info h3 { font-size:1.3rem; }
.search-info p { color:var(--text-light); }

/* ---- Categories Grid: مربعات صور ---- */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px ,1fr)); gap:18px; }
.category-tile { position:relative; display:block; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); background:#eef2ee; }
.category-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.category-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.category-tile:hover img { transform:scale(1.06); }
.category-tile-overlay { position:absolute; inset:auto 0 0 0; padding:14px 12px 12px; background:linear-gradient(to top, rgba(11,71,44,.85), rgba(11,71,44,0)); color:#fff; text-align:center; }
.category-name { font-size:.92rem; font-weight:700; color:#fff; }
.category-count { font-size:.75rem; color:rgba(255,255,255,.85); }

/* ---- Products Grid ---- */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-image { position:relative; height:220px; overflow:hidden; background:#f9fafb; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-card:hover .product-image img { transform:scale(1.05); }
.discount-badge { position:absolute; top:10px; right:10px; background:var(--offer); color:#fff; padding:4px 10px; border-radius:15px; font-size:.8rem; font-weight:700; }
.new-badge { position:absolute; top:10px; left:10px; background:#10B981; color:#fff; padding:4px 10px; border-radius:15px; font-size:.8rem; font-weight:700; }
.product-info { padding:16px; }
.product-category { font-size:.8rem; color:var(--text-light); }
.product-name { font-size:1rem; font-weight:700; margin:6px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-description { font-size:.85rem; color:var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.product-rating { display:flex; align-items:center; gap:3px; margin-bottom:8px; font-size:.85rem; }
.product-rating span { color:var(--text-light); margin-right:4px; }
.product-price { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.old-price { text-decoration:line-through; color:var(--text-light); font-size:.9rem; }
.new-price { font-size:1.2rem; font-weight:800; color:var(--primary); }

/* ---- Empty State ---- */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-light); }
.empty-state i { font-size:3rem; margin-bottom:16px; display:block; }
.empty-state h3 { font-size:1.2rem; margin-bottom:8px; color:var(--text); }

/* ---- Footer (أبيض فاخر مع حد علوي أحمر) ---- */
.main-footer { background:#fff; color:#4B5563; margin-top:60px; border-top:4px solid var(--offer); box-shadow:0 -4px 24px rgba(0,0,0,.03); }
.footer-top { padding:52px 0 40px; }
.footer-content { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:900px){ .footer-content { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .footer-content { grid-template-columns:1fr; } }
.footer-brand-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand-logo img { height:44px; width:auto; }
.footer-brand-logo span { font-size:1.2rem; font-weight:800; color:var(--secondary); }
.main-footer h3 { color:var(--secondary); font-size:1.02rem; font-weight:800; margin-bottom:18px; position:relative; padding-bottom:12px; }
.main-footer h3::after { content:''; position:absolute; bottom:0; right:0; width:36px; height:3px; background:var(--primary); border-radius:2px; }
.main-footer p { font-size:.9rem; line-height:1.9; color:#6B7280; }
.social-links { display:flex; gap:10px; margin-top:16px; }
.social-links a { width:38px; height:38px; border-radius:50%; background:#F3F4F6; display:flex; align-items:center; justify-content:center; color:var(--secondary); transition:var(--transition); }
.social-links a:hover { background:var(--primary); color:#fff; transform:translateY(-2px); }
.main-footer ul { list-style:none; }
.main-footer ul li { margin-bottom:12px; }
.main-footer ul li a { color:#6B7280; font-size:.9rem; transition:var(--transition); }
.main-footer ul li a:hover { color:var(--primary); padding-right:4px; }
.contact-list li { display:flex; align-items:flex-start; gap:10px; line-height:1.6; }
.contact-list li i { color:var(--primary); width:18px; text-align:center; margin-top:3px; }
.footer-payments { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.footer-payments span { background:#F3F4F6; color:#4B5563; font-size:.75rem; font-weight:700; padding:6px 10px; border-radius:6px; }
.footer-bottom { border-top:1px solid #EEF0EE; padding:20px 0; text-align:center; font-size:.85rem; color:#9CA3AF; background:#FAFBFA; }

.whatsapp-float { position:fixed; bottom:24px; left:24px; width:56px; height:56px; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 4px 12px rgba(37,211,102,.4); z-index:999; transition:var(--transition); }
.whatsapp-float:hover { transform:scale(1.1); }

/* ---- Shop Page ---- */
.shop-layout { display:grid; grid-template-columns:260px 1fr; gap:30px; padding:40px 0; }
.shop-sidebar { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:fit-content; position:sticky; top:90px; }
.filter-section { margin-bottom:24px; }
.filter-section h3 { font-size:1rem; font-weight:700; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--border); }
.filter-section ul { list-style:none; }
.filter-section ul li a { display:flex; justify-content:space-between; padding:8px 0; color:var(--text); font-size:.9rem; transition:color .2s; }
.filter-section ul li a:hover, .filter-section ul li a.active { color:var(--primary); font-weight:600; }
.filter-section ul li .count { background:#f3f4f6; padding:2px 8px; border-radius:10px; font-size:.8rem; color:var(--text-light); }
.price-filter { display:flex; gap:10px; align-items:center; }
.price-filter input { width:100%; padding:8px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.9rem; }
.shop-content .top-bar-shop { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.top-bar-shop .results-count { font-size:.95rem; color:var(--text-light); }
.top-bar-shop select { padding:8px 16px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.9rem; background:#fff; }
.pagination { display:flex; justify-content:center; gap:6px; margin-top:40px; }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; font-weight:600; transition:var(--transition); }
.pagination a { background:#fff; border:1px solid var(--border); color:var(--text); }
.pagination a:hover { border-color:var(--primary); color:var(--primary); }
.pagination .current { background:var(--primary); color:#fff; }

/* ---- Product Detail ---- */
.product-detail { padding:40px 0; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.gallery { display:flex; flex-direction:column; gap:12px; }
.gallery-main { border-radius:var(--radius); overflow:hidden; height:450px; background:#f9fafb; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.gallery-thumbs { display:flex; gap:8px; overflow-x:auto; }
.gallery-thumbs img { width:80px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:var(--transition); }
.gallery-thumbs img:hover, .gallery-thumbs img.active { border-color:var(--primary); }
.product-detail-info h1 { font-size:1.8rem; font-weight:800; margin-bottom:12px; }
.detail-category { color:var(--text-light); font-size:.9rem; margin-bottom:8px; }
.detail-price { font-size:2rem; font-weight:800; color:var(--primary); margin:16px 0; }
.detail-price .old { font-size:1.2rem; text-decoration:line-through; color:var(--text-light); margin-right:12px; }
.detail-description { color:var(--text-light); line-height:1.8; margin-bottom:20px; }
.quantity-selector { display:flex; align-items:center; gap:0; margin-bottom:20px; }
.quantity-selector button { width:40px; height:40px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.quantity-selector button:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.quantity-selector button:first-child { border-radius:0 8px 8px 0; }
.quantity-selector button:last-child { border-radius:8px 0 0 8px; }
.quantity-selector input { width:60px; height:40px; text-align:center; border:1px solid var(--border); border-right:none; border-left:none; font-size:1rem; font-weight:700; font-family:inherit; }
.detail-actions { display:flex; gap:12px; margin-bottom:20px; }
.detail-actions .btn { flex:1; justify-content:center; padding:14px; font-size:1rem; }
.product-meta { border-top:1px solid var(--border); padding-top:16px; font-size:.9rem; color:var(--text-light); }
.product-meta span { display:block; margin-bottom:6px; }
.reviews-section { margin-top:40px; background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.review-item { border-bottom:1px solid var(--border); padding:16px 0; }
.review-item:last-child { border:none; }
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-header strong { font-size:.95rem; }
.review-date { font-size:.8rem; color:var(--text-light); }
.review-stars { color:#F59E0B; margin-bottom:6px; }

/* ---- Cart ---- */
.cart-page { padding:40px 0; }
.cart-table { width:100%; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.cart-table th, .cart-table td { padding:16px; text-align:right; }
.cart-table thead { background:#f9fafb; }
.cart-table th { font-weight:700; font-size:.9rem; color:var(--text-light); }
.cart-item-img { width:70px; height:70px; object-fit:cover; border-radius:8px; }
.cart-item-name { font-weight:700; font-size:.95rem; }
.cart-remove { background:none; border:none; color:var(--primary); cursor:pointer; font-size:1.1rem; }
.cart-summary { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-top:20px; max-width:400px; margin-left:auto; }
.cart-summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.cart-summary-row:last-child { border:none; }
.cart-summary-total { font-size:1.3rem; font-weight:800; color:var(--primary); }
.coupon-form { display:flex; gap:8px; margin-bottom:16px; }
.coupon-form input { flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; font-family:inherit; }
.coupon-form button { padding:10px 20px; background:var(--gold); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ---- Checkout ---- */
.checkout-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; padding:40px 0; }
.checkout-section { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); margin-bottom:20px; }
.checkout-section h2 { font-size:1.2rem; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--border); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-family:inherit; font-size:.95rem; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); outline:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shipping-option, .payment-option { display:flex; align-items:center; gap:12px; padding:14px; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:var(--transition); margin-bottom:10px; }
.shipping-option:hover, .payment-option:hover, .shipping-option.selected, .payment-option.selected { border-color:var(--primary); background:#F0F7F3; }
.shipping-option input, .payment-option input { accent-color:var(--primary); }
.order-summary { position:sticky; top:90px; }
.order-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.order-item img { width:50px; height:50px; border-radius:8px; object-fit:cover; }

/* ---- Auth ---- */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:70vh; padding:40px 20px; }
.auth-box { background:#fff; border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-lg); width:100%; max-width:440px; }
.auth-box h2 { font-size:1.5rem; margin-bottom:8px; }
.auth-box p { color:var(--text-light); margin-bottom:24px; }
.auth-tabs { display:flex; gap:0; margin-bottom:24px; }
.auth-tabs a { flex:1; text-align:center; padding:12px; font-weight:700; border-bottom:3px solid var(--border); color:var(--text-light); transition:var(--transition); }
.auth-tabs a.active { border-color:var(--primary); color:var(--primary); }
.auth-divider { text-align:center; margin:20px 0; color:var(--text-light); position:relative; }
.auth-divider::before, .auth-divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background:var(--border); }
.auth-divider::before { right:0; }
.auth-divider::after { left:0; }

/* ---- Account ---- */
.account-layout { display:grid; grid-template-columns:240px 1fr; gap:30px; padding:40px 0; }
.account-sidebar { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); height:fit-content; }
.account-sidebar .user-info { text-align:center; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.account-sidebar .user-info i { font-size:3rem; color:var(--primary); margin-bottom:8px; display:block; }
.account-sidebar ul { list-style:none; }
.account-sidebar ul li a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:600; transition:var(--transition); }
.account-sidebar ul li a:hover, .account-sidebar ul li a.active { background:#F0F7F3; color:var(--primary); }
.account-content { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.order-status-badge { display:inline-block; padding:4px 12px; border-radius:15px; font-size:.8rem; font-weight:700; }
.status-pending { background:#FEF3C7; color:#92400E; }
.status-processing { background:#DBEAFE; color:#1E40AF; }
.status-shipped { background:#E0E7FF; color:#3730A3; }
.status-delivered { background:#D1FAE5; color:#065F46; }
.status-cancelled { background:#FEE2E2; color:#991B1B; }

/* ---- CMS Page ---- */
.page-content { max-width:800px; margin:0 auto; padding:50px 20px; }
.page-content h1 { font-size:2rem; margin-bottom:20px; }
.page-content .content { line-height:2; font-size:1.05rem; }
.page-content .content h2, .page-content .content h3 { margin:24px 0 12px; }
.page-content .content p { margin-bottom:16px; }
.page-content .content ul, .page-content .content ol { margin:12px 0 12px 24px; }

/* ---- Breadcrumb ---- */
.breadcrumb { padding:12px 0; font-size:.9rem; color:var(--text-light); }
.breadcrumb a { color:var(--text-light); }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb .separator { margin:0 8px; }

/* ---- Toast ---- */
.toast-container { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:14px 24px; border-radius:var(--radius); color:#fff; font-weight:600; font-size:.95rem; box-shadow:var(--shadow-lg); animation:toastIn .4s ease; }
.toast.success { background:#059669; }
.toast.error { background:var(--offer); }
.toast.info { background:#2563EB; }
@keyframes toastIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }

/* ---- Responsive ---- */
@media (max-width:992px) {
    .shop-layout { grid-template-columns:1fr; }
    .shop-sidebar { display:none; }
    .checkout-grid { grid-template-columns:1fr; }
    .account-layout { grid-template-columns:1fr; }
    .product-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .top-bar { display:none; }
    .main-nav { display:none; } /* تُستبدل بالقائمة الجانبية + شريط التنقل السفلي على الجوال */
    .hero-slider { height:280px; }
    .hero-title { font-size:1.6rem; }
    .categories-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:12px; }
    .products-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
    .product-image { height:160px; }
    .gallery-main { height:300px; }
    .cart-table { font-size:.85rem; }
    .cart-table th:nth-child(4), .cart-table td:nth-child(4) { display:none; }
}
@media (max-width:480px) {
    .container { padding:0 12px; }
    .categories-grid { grid-template-columns:repeat(3, 1fr); }
    .products-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .product-info { padding:10px; }
    .product-name { font-size:.85rem; }
    .new-price { font-size:1rem; }
    .btn-primary-site { padding:8px; font-size:.8rem; }
}

/* ==========================================
   القائمة الجانبية للجوال (Mobile Drawer)
   ========================================== */
.mobile-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(11,17,23,.5); z-index:299; opacity:0; transition:opacity .25s ease; }
.mobile-drawer-overlay.show { display:block; opacity:1; }
.mobile-drawer {
    position:fixed; top:0; right:0; bottom:0; width:82%; max-width:340px; background:#fff; z-index:300;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto;
    box-shadow:-8px 0 30px rgba(0,0,0,.15); display:flex; flex-direction:column;
}
.mobile-drawer.open { transform:translateX(0); }
.mobile-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 16px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; }
.mobile-drawer-brand { display:flex; align-items:center; gap:10px; color:#fff; }
.mobile-drawer-brand img { height:34px; width:auto; background:#fff; border-radius:8px; padding:3px; }
.mobile-drawer-brand span { font-weight:800; font-size:1.05rem; }
.mobile-drawer-head button { background:rgba(255,255,255,.15); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer; }
.mobile-drawer-user { padding:16px; border-bottom:1px solid var(--border); }
.mobile-drawer-user-link { display:flex; align-items:center; gap:12px; color:var(--text); }
.mobile-drawer-user-link i { font-size:2rem; color:var(--primary); }
.mobile-drawer-user-link strong { display:block; font-size:.95rem; }
.mobile-drawer-user-link span { font-size:.8rem; color:var(--text-light); }
.mobile-drawer-auth-btns { display:flex; gap:10px; }
.mobile-drawer-auth-btns .btn { flex:1; text-align:center; padding:11px; }
.mobile-drawer-links { display:flex; flex-direction:column; padding:8px; border-bottom:8px solid var(--bg); }
.mobile-drawer-links a { display:flex; align-items:center; gap:12px; padding:13px 12px; font-weight:600; font-size:.92rem; color:var(--text); border-radius:8px; }
.mobile-drawer-links a:hover, .mobile-drawer-links a:active { background:#F0F7F3; color:var(--primary); }
.mobile-drawer-links a i { width:20px; text-align:center; color:var(--primary); }
.mobile-drawer-categories { padding:14px 16px; flex:1; }
.mobile-drawer-categories h4 { font-size:.85rem; font-weight:800; color:var(--text-light); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.mobile-drawer-categories ul { list-style:none; }
.mobile-drawer-categories li a { display:flex; align-items:center; gap:12px; padding:11px 6px; font-size:.9rem; font-weight:600; color:var(--text); border-bottom:1px solid #F3F4F6; }
.mobile-drawer-categories li a img { width:26px; height:26px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.mobile-drawer-categories li a span { flex:1; }
.mobile-drawer-categories li a i { font-size:.7rem; color:var(--text-light); }
.mobile-drawer-contact { display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); background:var(--bg); }
.mobile-drawer-contact a { flex:1; text-align:center; background:#fff; border:1px solid var(--border); border-radius:8px; padding:10px; font-size:.85rem; font-weight:700; color:var(--text); }
.mobile-drawer-contact a i { display:block; margin-bottom:4px; font-size:1.1rem; color:var(--primary); }
body.drawer-open { overflow:hidden; }
@media (min-width:769px){ .mobile-drawer, .mobile-drawer-overlay { display:none !important; } }

/* ==========================================
   شريط التنقل السفلي (Bottom Navigation) — تجربة تطبيق على الجوال
   ========================================== */
.bottom-nav {
    display:none; position:fixed; bottom:0; right:0; left:0; z-index:250; background:#fff;
    border-top:1px solid var(--border); box-shadow:0 -2px 16px rgba(0,0,0,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:768px){
    .bottom-nav { display:flex; align-items:stretch; justify-content:space-between; }
    body { padding-bottom:64px; }
    .whatsapp-float { bottom:76px; }
}
.bn-item {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px; border:none; background:none; color:var(--text-light); font-size:.68rem; font-weight:700;
    cursor:pointer; position:relative; font-family:inherit;
}
.bn-item i { font-size:1.15rem; }
.bn-item.active { color:var(--primary); }
.bn-badge { position:absolute; top:2px; left:calc(50% + 6px); background:var(--offer); color:#fff; font-size:.6rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; }

/* ==========================================
   فوتر أنظف على الجوال
   ========================================== */
@media (max-width:560px){
    .footer-top { padding:32px 0 8px; text-align:center; }
    .footer-content { gap:28px; }
    .footer-brand-logo { justify-content:center; }
    .main-footer h3::after { right:50%; transform:translateX(50%); }
    .social-links { justify-content:center; }
    .footer-payments { justify-content:center; }
    .contact-list li { justify-content:center; text-align:right; }
}