/* =========================================================
   Zamzam Market - Main Stylesheet
   ========================================================= */

:root{
    --zm-red: #e21b1b;
    --zm-red-dark: #b91414;
    --zm-red-light: #fdeaea;
    --zm-green: #1a8f3c;
    --zm-green-dark: #15722f;
    --zm-green-light: #e8f7ec;
    --zm-orange: #ff6a00;
    --zm-text: #1f2328;
    --zm-text-light: #6b7280;
    --zm-bg: #f7f8f9;
    --zm-white: #ffffff;
    --zm-border: #eceef0;
    --zm-radius: 14px;
    --zm-radius-sm: 10px;
    --zm-shadow: 0 2px 10px rgba(0,0,0,0.06);
    --zm-shadow-md: 0 4px 18px rgba(0,0,0,0.10);
    --header-height: 60px;
    --bottom-nav-height: 62px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    font-family: 'Tajawal', Tahoma, Arial, sans-serif;
    background: var(--zm-bg);
    color: var(--zm-text);
    margin: 0;
    direction: rtl;
    padding-bottom: var(--bottom-nav-height);
}

a{ text-decoration: none; color: inherit; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ margin:0; }

.section{ padding: 20px 16px; }
.section-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 14px;
}
.section-header h2{ font-size: 18px; font-weight: 800; display:flex; align-items:center; gap:8px; }
.see-all-link{ font-size: 13px; color: var(--zm-green); font-weight:700; }

/* =========================================================
   الهيدر
   ========================================================= */
.site-header{
    position: sticky; top:0; z-index: 100;
    background: var(--zm-white);
    box-shadow: var(--zm-shadow);
}
.header-icon-btn{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--zm-bg); color: var(--zm-text); font-size:16px;
    position: relative;
    transition: background .2s;
}
.header-icon-btn:hover{ background: var(--zm-border); }
.whatsapp-header-btn{ background: var(--zm-green-light); color: var(--zm-green); }
.cart-toggle-btn{ background: var(--zm-red-light); color: var(--zm-red); }

.header-actions{ display:flex; align-items:center; gap:10px; }

.cart-count-badge{
    position:absolute; top:-4px; left:-4px;
    background: var(--zm-red); color:#fff; font-size:11px; font-weight:700;
    min-width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    padding: 0 3px; border: 2px solid #fff;
}

.site-logo .logo-text{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.site-logo .logo-zam{ font-size:20px; font-weight:900; color: var(--zm-red); letter-spacing: 1px; }
.site-logo .logo-market{ font-size:9px; font-weight:700; color: var(--zm-green); letter-spacing: 3px; }
.site-logo img{ max-height:44px; width:auto; max-width:220px; object-fit:contain; }

/* الهيدر الجديد: صف علوي (لوغو+بحث+أيقونات) + صف تبويبات */
.header-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding: 10px 14px; max-width:1200px; margin:0 auto;
}
.header-top .site-logo{ flex-shrink:1; min-width:0; }
.header-top .site-logo .logo-zam{ font-size:16px; }
.header-top .site-logo .logo-market{ font-size:7.5px; letter-spacing:2px; }

.header-search-form{
    flex:1; min-width:0; position:relative;
    background: var(--zm-bg); border-radius:24px; border:1px solid var(--zm-border);
}
.header-search-icon{ position:absolute; top:50%; right:14px; transform:translateY(-50%); color: var(--zm-text-light); font-size:13px; }
.header-search-input{
    width:100%; border:none; background:transparent; outline:none;
    padding: 10px 38px 10px 14px; font-size:12.5px; font-family:inherit;
}

.header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-actions .header-icon-btn{ width:36px; height:36px; font-size:14px; }

.header-nav-tabs{
    display:flex; justify-content:center; gap:26px;
    border-top: 1px solid var(--zm-border); padding: 10px 14px;
}
.nav-tab{
    font-size:13px; font-weight:700; color: var(--zm-text-light);
    padding-bottom:4px; border-bottom:2px solid transparent;
}
.nav-tab.active{ color: var(--zm-green); border-color: var(--zm-green); }

/* =========================================================
   القوائم الجانبية (Drawer): أقسام + سلة
   ========================================================= */
.categories-drawer, .cart-drawer{
    position: fixed; top:0; right:-100%; height:100%; width: 320px; max-width: 88vw;
    background: var(--zm-white); z-index: 300; transition: right .3s ease;
    display:flex; flex-direction:column; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.categories-drawer.open, .cart-drawer.open{ right:0; }

.drawer-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px; font-weight:800; font-size:16px;
    border-bottom: 1px solid var(--zm-border);
}
.drawer-close-btn{ font-size:18px; color: var(--zm-text-light); }
.drawer-body{ flex:1; overflow-y:auto; padding: 10px; }

.drawer-cat-item{
    display:flex; align-items:center; gap:12px; padding: 10px 8px;
    border-radius: var(--zm-radius-sm);
}
.drawer-cat-item:hover{ background: var(--zm-bg); }
.drawer-cat-item img{ width:48px; height:48px; border-radius:10px; object-fit:cover; }
.drawer-cat-text{ flex:1; display:flex; flex-direction:column; }
.drawer-cat-text strong{ font-size:14px; }
.drawer-cat-text span{ font-size:11px; color: var(--zm-text-light); }
.drawer-cat-arrow{ color: var(--zm-text-light); font-size:12px; }

.drawer-overlay{
    position: fixed; inset:0; background: rgba(0,0,0,.4); z-index: 290;
    opacity:0; visibility:hidden; transition: opacity .3s;
}
.drawer-overlay.open{ opacity:1; visibility:visible; }

.drawer-empty{ text-align:center; color: var(--zm-text-light); padding: 30px 10px; font-size:13px; }

/* =========================================================
   لوحة البحث المنزلقة
   ========================================================= */
.search-drawer{
    position: fixed; top:0; right:-100%; height:100%; width: 360px; max-width: 92vw;
    background: var(--zm-white); z-index: 300; transition: right .3s ease;
    display:flex; flex-direction:column; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.search-drawer.open{ right:0; }
.search-drawer-body{ padding: 14px; }

.search-drawer-input-wrap{
    display:flex; align-items:center; gap:10px; background: var(--zm-bg);
    border-radius:24px; padding: 12px 16px; border:1px solid var(--zm-border); margin-bottom:14px;
}
.search-drawer-input-wrap i{ color: var(--zm-text-light); font-size:14px; }
.search-drawer-input-wrap input{
    flex:1; border:none; background:transparent; outline:none; font-size:14px; font-family:inherit;
}

.search-hint-msg{ text-align:center; color: var(--zm-text-light); font-size:13px; padding: 40px 10px; }
.search-results-list .cart-item-row:last-child{ border-bottom:none; }

.search-item-add-btn{ color: var(--zm-green); font-size:16px; }
.search-item-add-btn:hover{ color: var(--zm-green-dark); }

/* =========================================================
   لوحة تفاصيل المنتج المنزلقة
   ========================================================= */
.product-drawer{
    position: fixed; top:0; right:-100%; height:100%; width: 380px; max-width: 92vw;
    background: var(--zm-white); z-index: 300; transition: right .3s ease;
    display:flex; flex-direction:column; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
.product-drawer.open{ right:0; }
.product-drawer-body{ padding:0; }

.drawer-loading{ text-align:center; padding: 80px 0; font-size:26px; color: var(--zm-green); }

.product-drawer-img{
    position:relative; width:100%; aspect-ratio: 1/0.85; background:#f4f5f6; overflow:hidden;
}
.product-drawer-img img{ width:100%; height:100%; object-fit:cover; }
.product-drawer-img .discount-badge{ top:14px; right:14px; font-size:12px; padding:5px 12px; }

.product-drawer-body{ padding: 18px 18px 30px; }
.product-drawer-title{ font-size:19px; font-weight:900; line-height:1.4; margin-bottom:8px; }

.product-drawer-rating{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.product-drawer-rating .stars{ color:#f5a623; font-size:13px; letter-spacing:2px; }
.product-drawer-rating .rating-text{ font-size:12px; color: var(--zm-text-light); }

.product-drawer-price{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.product-drawer-price .price-current{ font-size:24px; font-weight:900; color: var(--zm-red); }
.product-drawer-price .price-old{ font-size:14px; color: var(--zm-text-light); text-decoration:line-through; }

.product-drawer-qty-row{ margin-bottom:16px; }
.qty-control-lg{ display:inline-flex; align-items:center; gap:16px; background: var(--zm-bg); border-radius:30px; padding:8px 18px; }
.qty-control-lg .qty-btn{ width:26px; height:26px; font-size:18px; }
.qty-control-lg .qty-value{ font-size:16px; min-width:20px; }

.btn-drawer-add-to-cart{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    background: var(--zm-green); color:#fff; font-weight:800; font-size:15px;
    padding: 15px; border-radius: 30px; box-shadow: 0 4px 14px rgba(26,143,60,.35);
}
.btn-drawer-add-to-cart:hover{ background: var(--zm-green-dark); }
.btn-drawer-add-to-cart i{ font-size:17px; }

.product-drawer-badges{ display:flex; justify-content:space-between; gap:10px; margin: 22px 0; }
.pd-badge{ flex:1; text-align:center; background: var(--zm-green-light); border-radius: var(--zm-radius-sm); padding: 12px 6px; }
.pd-badge i{ display:block; color: var(--zm-green); font-size:18px; margin-bottom:6px; }
.pd-badge span{ font-size:10.5px; font-weight:700; color: var(--zm-green-dark); line-height:1.3; display:block; }

.product-drawer-description h3{ font-size:14px; font-weight:800; margin-bottom:8px; }
.product-drawer-description div{ font-size:13px; line-height:1.8; color: var(--zm-text-light); }

@media (min-width: 900px){
    .product-drawer{ width:420px; }
}

/* السلة داخل الـ Drawer */
.cart-drawer-body{ display:flex; flex-direction:column; }
.cart-empty-state{ text-align:center; padding: 50px 10px; color: var(--zm-text-light); }
.cart-empty-state i{ font-size:44px; color:#ddd; margin-bottom:10px; }
.btn-continue-shopping{
    margin-top:14px; background: var(--zm-green); color:#fff; padding:10px 20px;
    border-radius: 30px; font-weight:700; font-size:13px;
}

.cart-item-row{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--zm-border); }
.cart-item-img{ width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#f2f2f2; }
.cart-item-img img{ width:100%; height:100%; object-fit:cover; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item-unit{ font-size:11px; color: var(--zm-text-light); }
.cart-item-price{ font-size:13px; font-weight:800; color: var(--zm-red); margin-top:3px; }
.cart-item-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-item-remove{ color:#c9cdd2; font-size:14px; }
.cart-item-remove:hover{ color: var(--zm-red); }

.qty-control{ display:flex; align-items:center; gap:8px; background: var(--zm-bg); border-radius:20px; padding:3px 8px; }
.qty-btn{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color: var(--zm-green); }
.qty-value{ font-size:13px; font-weight:700; min-width:16px; text-align:center; }

.cart-summary{ padding: 14px 0; border-top: 1px dashed var(--zm-border); margin-top:6px; }
.cart-summary-row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color: var(--zm-text-light); }
.free-shipping-text{ color: var(--zm-green); font-weight:700; }
.cart-summary-total{ font-size:16px; font-weight:900; color: var(--zm-text); padding-top:8px; border-top:1px solid var(--zm-border); margin-top:4px; }

.btn-whatsapp-checkout{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background: var(--zm-green); color:#fff; font-weight:800; font-size:15px;
    padding: 14px; border-radius: 30px; margin-top: 12px;
    box-shadow: 0 4px 14px rgba(26,143,60,.35);
}
.btn-whatsapp-checkout i{ font-size:18px; }
.btn-whatsapp-checkout:hover{ background: var(--zm-green-dark); }

/* =========================================================
   البانر الرئيسي + البحث
   ========================================================= */
.hero-banner{
    position: relative; min-height: 230px; background-size: cover; background-position: center;
    background-color: var(--zm-red); display:flex; align-items:center;
    margin: 12px; border-radius: var(--zm-radius); overflow:hidden;
}
.hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 20%, rgba(0,0,0,.15) 80%);
}
.hero-content{ position: relative; z-index:2; padding: 26px 22px; max-width: 60%; color:#fff; }
.hero-content h1{ font-size: 22px; font-weight:900; line-height:1.4; margin-bottom:10px; }
.hero-content p{ font-size: 13px; opacity:.9; margin-bottom:14px; }
.hero-cta-btn{
    display:inline-block; background: var(--zm-white); color: var(--zm-green-dark);
    font-weight:800; font-size:13px; padding: 10px 22px; border-radius:24px;
}
.hero-cta-btn:hover{ background: var(--zm-green-light); }

.hero-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:6px; }
.hero-dots .dot{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.5); }
.hero-dots .dot.active{ background:#fff; width:18px; border-radius:4px; }

.search-bar-wrap{ padding: 0 16px 16px; margin-top:-6px; }
.advanced-search-form{
    display:flex; align-items:center; background: var(--zm-white);
    border-radius: 30px; box-shadow: var(--zm-shadow-md); overflow:hidden;
    border: 1px solid var(--zm-border);
}
.search-input{
    flex:1; border:none; outline:none; padding: 13px 18px; font-size:14px;
    font-family:inherit; background:transparent;
}
.search-submit-btn{
    width: 46px; height: 46px; margin:2px; border-radius:50%;
    background: var(--zm-green); color:#fff; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

/* =========================================================
   الأقسام - سلايدر صفين
   ========================================================= */
.categories-slider-2rows{
    display:grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    gap: 14px 18px; overflow-x:auto; padding: 4px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.categories-slider-2rows::-webkit-scrollbar{ height:4px; }
.categories-slider-2rows::-webkit-scrollbar-thumb{ background: var(--zm-border); border-radius:4px; }

.category-slide-item{
    display:flex; flex-direction:column; align-items:center; gap:6px; width: 74px;
    scroll-snap-align:start; flex-shrink:0;
}
.category-slide-img{
    width:64px; height:64px; border-radius:50%; overflow:hidden;
    background: var(--zm-green-light); border:2px solid var(--zm-white); box-shadow: var(--zm-shadow);
}
.category-slide-img img{ width:100%; height:100%; object-fit:cover; }
.category-slide-item span{ font-size:11.5px; font-weight:700; text-align:center; line-height:1.3; }

/* شبكة التصنيفات (بدل السلايدر) */
.categories-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px;
}
.category-grid-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.category-grid-img{
    width:60px; height:60px; border-radius:50%; overflow:hidden;
    background: var(--zm-green-light); border:2px solid var(--zm-white); box-shadow: var(--zm-shadow);
}
.category-grid-img img{ width:100%; height:100%; object-fit:cover; }
.category-grid-item span{ font-size:11px; font-weight:700; text-align:center; line-height:1.3; }

/* =========================================================
   صفحة التصنيفات المستقلة
   ========================================================= */
.categories-page-banner{
    position:relative; margin: 16px; border-radius: var(--zm-radius); overflow:hidden;
    min-height:110px; background-color: var(--zm-green); display:flex; align-items:center;
    background-size:cover; background-position:center;
}
.cp-banner-overlay{ position:absolute; inset:0; background: rgba(21,114,47,.78); }
.cp-banner-content{ position:relative; z-index:2; padding: 18px 20px; color:#fff; }
.cp-banner-content h2{ font-size:17px; font-weight:900; margin-bottom:4px; }
.cp-banner-content p{ font-size:12px; opacity:.9; }

.categories-page-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.category-card-lg{
    background: var(--zm-white); border-radius: var(--zm-radius); overflow:hidden;
    box-shadow: var(--zm-shadow); border: 1px solid var(--zm-border);
}
.category-card-lg-img{ position:relative; aspect-ratio: 1/0.8; background:#f4f5f6; }
.category-card-lg-img img{ width:100%; height:100%; object-fit:cover; }
.category-card-lg-arrow{
    position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
    background: rgba(255,255,255,.92); color: var(--zm-green-dark); font-size:10px;
    display:flex; align-items:center; justify-content:center; box-shadow: var(--zm-shadow);
}
.category-card-lg-label{ display:block; text-align:center; font-size:11.5px; font-weight:700; padding: 8px 4px; }

@media (min-width: 900px){
    .categories-page-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   بطاقات "العروض الخاصة" - شبكة 3 أعمدة
   ========================================================= */
.products-grid-3col{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.offer-card{
    background: var(--zm-white); border-radius: var(--zm-radius); overflow:hidden;
    box-shadow: var(--zm-shadow); border: 1px solid var(--zm-border); padding-bottom:10px;
}
.offer-card-img{ position:relative; aspect-ratio:1/1; background:#f4f5f6; }
.offer-card-img img{ width:100%; height:100%; object-fit:cover; }
.offer-card-img .discount-badge{ top:6px; right:6px; font-size:9.5px; padding:2px 6px; }
.offer-card-title{
    font-size: 11.5px; font-weight:700; line-height:1.4; height:2.6em; overflow:hidden;
    margin: 8px 8px 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.offer-card-price{ margin: 0 8px 8px; display:flex; flex-direction:column; gap:1px; }
.offer-card-price .price-current{ font-size:13px; font-weight:900; color: var(--zm-red); }
.offer-card-price .price-old{ font-size:10px; color: var(--zm-text-light); text-decoration:line-through; }
.btn-offer-add-to-cart{
    display:block; width:calc(100% - 16px); margin: 0 8px; background: var(--zm-green);
    color:#fff; font-size:11.5px; font-weight:700; padding: 8px 4px; border-radius:20px; text-align:center;
}
.btn-offer-add-to-cart:hover{ background: var(--zm-green-dark); }

/* =========================================================
   بطاقات "الأكثر طلباً" - شبكة 4 أعمدة بعداد كمية
   ========================================================= */
.products-grid-4col{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.bestseller-card{
    background: var(--zm-white); border-radius: var(--zm-radius); overflow:hidden;
    box-shadow: var(--zm-shadow); border: 1px solid var(--zm-border); padding-bottom:10px;
}
.bestseller-card-img{ aspect-ratio:1/1; background:#f4f5f6; }
.bestseller-card-img img{ width:100%; height:100%; object-fit:cover; }
.bestseller-card-title{
    font-size: 12px; font-weight:700; line-height:1.4; height:2.6em; overflow:hidden;
    margin: 8px 8px 2px; text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bestseller-card-price{ font-size:12.5px; font-weight:800; color: var(--zm-text); text-align:center; margin-bottom:8px; }

.bestseller-card-controls{ display:flex; align-items:center; justify-content:center; gap:8px; padding: 0 8px; }
.bestseller-qty-control{ flex:1; justify-content:center; }
.bestseller-cart-btn{
    width:30px; height:30px; border-radius:50%; background: var(--zm-green); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.bestseller-cart-btn:hover{ background: var(--zm-green-dark); }

/* =========================================================
   البانر الترويجي الوسطي
   ========================================================= */
.mid-promo-banner{
    margin: 20px 16px; border-radius: var(--zm-radius); background: var(--zm-green);
    display:flex; align-items:center; overflow:hidden; min-height:130px;
}
.mid-promo-text{ flex:1; padding: 18px 16px; color:#fff; }
.mid-promo-text h3{ font-size:15px; font-weight:800; line-height:1.5; margin-bottom:12px; }
.mid-promo-btn{
    display:inline-block; background:#fff; color: var(--zm-green-dark); font-weight:800;
    font-size:12px; padding: 8px 18px; border-radius:20px;
}
.mid-promo-img{ width:38%; height:130px; flex-shrink:0; }
.mid-promo-img img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   المنتجات - صف قابل للتمرير أفقياً + شبكة
   ========================================================= */
.products-row-scroll{
    display:flex; gap:12px; overflow-x:auto; padding: 4px 2px 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.products-row-scroll .product-card{ flex-shrink:0; width: 150px; }

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

.product-card{
    background: var(--zm-white); border-radius: var(--zm-radius); overflow:hidden;
    box-shadow: var(--zm-shadow); position:relative; scroll-snap-align:start;
    border: 1px solid var(--zm-border);
}
.product-card-img{
    position:relative; aspect-ratio: 1/1; background: #f4f5f6; overflow:hidden;
}
.product-card-img img{ width:100%; height:100%; object-fit:cover; }
.discount-badge{
    position:absolute; top:8px; right:8px; z-index:2;
    background: var(--zm-red); color:#fff; font-size:10.5px; font-weight:800;
    padding: 3px 8px; border-radius: 20px;
}
.product-card-info{ padding: 10px 10px 4px; }
.product-card-title{
    font-size: 12.5px; font-weight:700; line-height:1.4; height: 2.8em; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;
}
.product-card-price{ margin-top:6px; display:flex; align-items:center; gap:6px; }
.price-current{ font-size: 14.5px; font-weight:900; color: var(--zm-red); }
.price-old{ font-size: 11px; color: var(--zm-text-light); text-decoration: line-through; }

.add-to-cart-btn{
    position:absolute; bottom:10px; left:10px; z-index:3;
    width:32px; height:32px; border-radius:50%;
    background: var(--zm-green); color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 3px 8px rgba(26,143,60,.4);
    transition: transform .15s;
}
.add-to-cart-btn:active{ transform: scale(.9); }
.add-to-cart-btn.added{ background: var(--zm-red); }

.product-card-controls{ display:flex; align-items:center; justify-content:center; gap:8px; padding: 0 8px 10px; }
.product-card-controls .bs-qty-control{ flex:1; justify-content:center; }

/* =========================================================
   بانر العروض الخاصة
   ========================================================= */
.special-offer-banner{
    margin: 20px 16px; border-radius: var(--zm-radius); min-height: 150px;
    background-size: cover; background-position:center; background-color: var(--zm-green);
    position:relative; display:flex; align-items:center; overflow:hidden;
}
.special-offer-banner::before{
    content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.6) 30%, rgba(0,0,0,.1) 90%);
}
.offer-banner-content{ position:relative; z-index:2; padding: 20px 22px; color:#fff; }
.offer-badge{
    display:inline-block; background: var(--zm-red); font-size:11px; font-weight:800;
    padding:4px 12px; border-radius:20px; margin-bottom:8px;
}
.offer-banner-content h2{ font-size:20px; font-weight:900; margin-bottom:6px; }
.offer-banner-content p{ font-size:12.5px; opacity:.9; }

/* =========================================================
   شريط التنقل السفلي (موبايل)
   ========================================================= */
.bottom-nav{
    position: fixed; bottom:0; right:0; left:0; z-index: 200;
    background: var(--zm-white); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    display:flex; height: var(--bottom-nav-height);
}
.bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:10.5px; font-weight:700; color: var(--zm-text-light); position:relative;
}
.bottom-nav-item i{ font-size:18px; }
.bottom-nav-item.active{ color: var(--zm-green); }
.bottom-nav-cart .cart-count-badge-bottom{ top:0; left:50%; transform:translateX(10px); }

/* =========================================================
   صفحة إتمام الطلب عبر واتساب
   ========================================================= */
.checkout-whatsapp-page{ max-width: 560px; margin:0 auto; padding-bottom: 30px; }
.checkout-page-header{
    display:flex; align-items:center; gap:14px; padding: 16px;
    border-bottom: 1px solid var(--zm-border); background:#fff;
}
.checkout-page-header h1{ font-size:16px; font-weight:800; }
.back-btn{ font-size:16px; color: var(--zm-text); }

.checkout-info-box{
    display:flex; align-items:flex-start; gap:10px; background: var(--zm-green-light);
    color: var(--zm-green-dark); padding:14px; margin:16px; border-radius: var(--zm-radius-sm);
    font-size:12.5px; line-height:1.6;
}
.checkout-info-box i{ font-size:20px; margin-top:2px; }

.checkout-form{ padding: 0 16px; }
.checkout-form h3{ font-size:14px; font-weight:800; margin: 18px 0 10px; }
.form-group{ margin-bottom: 14px; }
.form-group label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color: var(--zm-text-light); }
.form-group input, .form-group textarea{
    width:100%; padding: 12px 14px; border-radius: var(--zm-radius-sm);
    border: 1px solid var(--zm-border); font-family:inherit; font-size:13.5px;
    outline:none; background: var(--zm-white);
}
.form-group input:focus, .form-group textarea:focus{ border-color: var(--zm-green); }

.order-summary-box{ background: var(--zm-bg); border-radius: var(--zm-radius-sm); padding:14px; }
.summary-line{ display:flex; justify-content:space-between; font-size:13px; color: var(--zm-text-light); padding:3px 0; }
.summary-total{ font-size:17px; font-weight:900; color: var(--zm-text); }

.btn-send-order{ margin: 20px 0 10px; width:100%; }

/* بطاقات اختيار طريقة الاستلام */
.delivery-method-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.delivery-option{
    display:flex; align-items:center; gap:12px; padding:14px; border-radius: var(--zm-radius-sm);
    border:2px solid var(--zm-border); background: var(--zm-white); cursor:pointer; transition: all .2s;
}
.delivery-option.selected{ border-color: var(--zm-red); background: var(--zm-red-light); }
.delivery-option-icon{
    width:44px; height:44px; border-radius:50%; background: var(--zm-bg); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:18px; color: var(--zm-text-light);
}
.delivery-option.selected .delivery-option-icon{ background:#fbdcdc; color: var(--zm-red); }
.delivery-option-text{ display:flex; flex-direction:column; gap:3px; }
.delivery-option-text strong{ font-size:14px; font-weight:800; }
.delivery-option-text span{ font-size:11.5px; color: var(--zm-text-light); }

/* =========================================================
   صفحة "طلباتي"
   ========================================================= */
.orders-empty-state{ text-align:center; padding: 60px 20px; color: var(--zm-text-light); }
.orders-empty-state i{ font-size:44px; color:#ddd; margin-bottom:12px; }
.orders-empty-state .btn-continue-shopping{ margin-top:16px; }

.order-card{
    background: var(--zm-white); border-radius: var(--zm-radius); border:1px solid var(--zm-border);
    box-shadow: var(--zm-shadow); padding: 14px; margin-bottom: 14px;
}
.order-card-summary{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.order-summary-right{ display:flex; align-items:center; gap:10px; }
.order-total-preview{ font-size:14.5px; font-weight:900; color: var(--zm-red); }
.order-toggle-icon{ font-size:12px; color: var(--zm-text-light); transition: transform .2s; }
.order-card.expanded .order-toggle-icon{ transform: rotate(180deg); }
.order-card-details{ display:none; margin-top:12px; padding-top:12px; border-top:1px dashed var(--zm-border); }
.order-card.expanded .order-card-details{ display:block; }
.order-card-header{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.order-date{ font-size:12px; color: var(--zm-text-light); }
.order-delivery-badge{ font-size:11px; font-weight:700; color: var(--zm-green-dark); background: var(--zm-green-light); padding:3px 10px; border-radius:14px; }
.order-item-row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
.order-total-row{ display:flex; justify-content:space-between; font-size:14.5px; font-weight:900; margin-top:8px; padding-top:8px; border-top:1px solid var(--zm-border); }

/* =========================================================
   فوتر (سطح المكتب بشكل أساسي)
   ========================================================= */
.site-footer{ background: var(--zm-green-dark); color:#dfe9e2; margin-top: 30px; padding: 40px 16px 0; }
.footer-inner{
    max-width:1320px; margin:0 auto; display:flex; flex-wrap:wrap; gap:30px;
    padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer-col{ flex:1; min-width: 160px; }
.footer-about p{ font-size:12.5px; line-height:1.7; margin-top:10px; color:#cfe0d5; }
.footer-logo-text .logo-zam{ color:#fff; }
.footer-logo-text .logo-market{ color:#bfe6cc; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
    width:32px; height:32px; border-radius:50%; background: rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;
}
.footer-social a:hover{ background: rgba(255,255,255,.25); }
.footer-links h4, .footer-contact h4{ color:#fff; font-size:14px; margin-bottom:14px; }
.footer-links ul li{ margin-bottom:10px; }
.footer-links ul li a{ font-size:13px; color:#cfe0d5; }
.footer-links ul li a:hover{ color:#fff; }
.footer-whatsapp-btn{
    display:inline-flex; align-items:center; gap:8px; background:#fff; color: var(--zm-green-dark);
    font-weight:800; font-size:13px; padding:10px 20px; border-radius:24px; margin-top:4px;
}
.footer-whatsapp-btn:hover{ background: var(--zm-green-light); }
.footer-bottom{ text-align:center; font-size:11.5px; padding: 16px 0; color:#a9c7b3; }

.woocommerce-inactive-notice{ text-align:center; padding: 40px 20px; color: var(--zm-text-light); }

/* صفحة الأقسام/الأرشيف */
.archive-page-header{
    display:flex; align-items:center; gap:14px; padding: 16px;
    border-bottom: 1px solid var(--zm-border); background:#fff;
}
.archive-page-header h1{ font-size:16px; font-weight:800; }
.pagination-wrap{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.pagination-wrap .page-numbers{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background: var(--zm-white); border:1px solid var(--zm-border); font-size:13px; font-weight:700;
}
.pagination-wrap .page-numbers.current{ background: var(--zm-green); color:#fff; border-color: var(--zm-green); }

.single-product-container{ max-width: 480px; margin: 0 auto; padding: 16px; }
.single-product-container .product-drawer-inner{ background: var(--zm-white); border-radius: var(--zm-radius); overflow:hidden; box-shadow: var(--zm-shadow); }
.single-product-container .product-drawer-img{ border-radius: 0; }

@media (min-width: 900px){
    .single-product-container{ max-width: 960px; padding: 24px 16px; }
    .single-product-container .product-drawer-inner{ display:flex; align-items:flex-start; gap:0; }
    .single-product-container .product-drawer-img{ width:45%; flex-shrink:0; aspect-ratio:1/1; }
    .single-product-container .product-drawer-body{ flex:1; padding: 28px 32px; }
}

/* مسار التنقل (Breadcrumb) */
.breadcrumb-trail{
    display:flex; align-items:center; gap:6px; padding: 12px 16px 0; font-size:12px; color: var(--zm-text-light);
}
.breadcrumb-trail a{ color: var(--zm-text-light); }
.breadcrumb-trail a:hover{ color: var(--zm-green); }
.breadcrumb-trail .current{ color: var(--zm-text); font-weight:700; }

/* البانر الذهبي - صفحة العروض */
.offers-gold-banner{
    margin: 14px 16px; padding: 18px 20px; border-radius: var(--zm-radius);
    background: linear-gradient(135deg, #ffe9a8, #ffcf5c);
    display:flex; align-items:center; gap:14px;
}
.offers-gold-icon{
    width:46px; height:46px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px; color:#e08c00; flex-shrink:0;
}
.offers-gold-text h2{ font-size:16px; font-weight:900; color:#7a4a00; margin-bottom:4px; }
.offers-gold-text p{ font-size:12px; color:#8a5c00; }

/* عداد الكمية أسفل بطاقة العروض */
.offer-card-controls{ display:flex; align-items:center; justify-content:center; gap:4px; padding: 10px 6px 0; }
.offer-qty-control{ flex:1; justify-content:center; gap:6px; padding: 3px 6px; }
.offer-qty-control .qty-btn{ width:16px; height:16px; font-size:11px; }
.offer-qty-control .qty-value{ font-size:11px; min-width:10px; }
.offer-stepper-cart-btn{ width:22px; height:22px; font-size:10px; flex-shrink:0; }

/* =========================================================
   استجابة التابلت (Tablet) — 600px إلى 899px
   لا تؤثر إطلاقاً على تصميم الموبايل (أقل من 600px)
   ========================================================= */
@media (min-width: 600px) and (max-width: 899px){
    .header-top, .header-nav-tabs, .section,
    .breadcrumb-trail, .offers-gold-banner, .categories-page-banner,
    .hero-banner, .special-offer-banner, .mid-promo-banner, .footer-inner{
        max-width: 700px; margin-left:auto; margin-right:auto;
    }
    .hero-banner{ min-height: 260px; }
    .categories-grid{ grid-template-columns: repeat(6, 1fr); }
    .categories-page-grid{ grid-template-columns: repeat(4, 1fr); }
    .products-grid{ grid-template-columns: repeat(3, 1fr); }
    .products-grid-3col{ grid-template-columns: repeat(4, 1fr); }
    .products-grid-4col{ grid-template-columns: repeat(3, 1fr); }
    .header-search-form{ max-width: 320px; }
}

/* =========================================================
   استجابة سطح المكتب (Desktop) — تحسينات إضافية فقط
   ========================================================= */
@media (min-width: 900px){
    body{ padding-bottom:0; }
    .bottom-nav{ display:none; }
    .header-top, .header-nav-tabs, .section{ max-width: 1320px; margin-left:auto; margin-right:auto; }
    .hero-banner{ min-height: 320px; margin: 18px auto; max-width:1320px; }
    .special-offer-banner{ max-width: 1320px; margin: 20px auto; min-height: 180px; }
    .mid-promo-banner{ max-width: 1320px; margin: 20px auto; }
    .breadcrumb-trail, .offers-gold-banner, .categories-page-banner{ max-width: 1320px; margin-left:auto; margin-right:auto; }
    .offers-gold-banner{ margin-top:14px; margin-bottom:14px; }
    .products-grid{ grid-template-columns: repeat(4, 1fr); }
    .products-grid-3col{ grid-template-columns: repeat(6, 1fr); }
    .products-grid-4col{ grid-template-columns: repeat(4, 1fr); }
    .categories-grid{ grid-template-columns: repeat(8, 1fr); }
    .header-search-form{ max-width: 420px; }
}