/* =====================================================================
   INFOSUD — layout_fix.css
   حمّله في الصفحة بعد shop.css وبعد mobile_fix_append.css (آخر ملف CSS).
   لا يعدّل الملفين القديمين: للتراجع احذف هذا الملف فقط.
   ===================================================================== */

/* ---------- 0) متغيرات ناقصة (مستخدمة في خيارات الدفع) ---------- */
:root{
  --primary:#e10d16;
  --border:#e8eaee;
}

/* ---------- 1) إصلاح position:sticky ----------
   overflow-x:hidden على html و body معاً قد يعطّل sticky للقائمة.
   clip يمنع التمرير الأفقي بدون تعطيله. */
html,body{overflow-x:clip!important}

/* ---------- 2) الحاسوب والتابلت العريض (761px فأكثر):
   توحيد العرض وتصغير أعلى الصفحة ---------- */
@media(min-width:761px){
  /* بانر أصغر (كان 118px) */
  .store-banner{min-height:76px;padding:8px 22px;gap:18px}
  .store-banner img{width:150px;max-height:56px}
  .banner-copy strong{font-size:21px}

  /* الشعار مكرر في البانر والهيدر: نخفي نسخة الهيدر.
     للتراجع احذف السطر التالي فقط. */
  .brand{display:none}

  /* نفس عرض المحتوى (1380px) للهيدر والفوتر */
  .store-header{max-width:1380px;padding:10px 22px;gap:16px}
  nav{padding:9px 12px}
  footer{padding:20px max(22px,calc((100% - 1336px)/2))}

  /* hero أقل ارتفاعاً (كان 330px) */
  .hero{min-height:230px;padding:28px 34px;border-radius:20px}
  .hero h1{font-size:34px;margin:6px 0}
  .hero>div>p{font-size:16px;line-height:1.7}
  .hero-card{padding:20px;min-width:230px}
  .hero-card span{font-size:32px}
  .hero-card b{font-size:21px}
}

/* ---------- 3) الحاسوب (981px فأكثر):
   الفئات تصبح زراً «الفئات» + قائمة منسدلة فوق المنتجات
   بدل عمود جانبي ثابت (230px) يبقى فارغاً ---------- */
@media(min-width:981px){
  .shop-layout,
  .shop-layout:has(.category-sidebar.collapsed){
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px;
  }

  .category-sidebar,
  .category-sidebar.collapsed{
    position:relative;
    top:auto;
    width:270px!important;
    min-width:0;
    overflow:visible;
    z-index:15;               /* أقل من nav (20) حتى يبقى الشريط فوقها */
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .category-head,
  .category-sidebar.collapsed .category-head{
    min-height:48px;
    padding:8px 12px;
    justify-content:flex-start;
    border-radius:14px;
    border-bottom:0;
    box-shadow:var(--shadow);
  }
  .category-head small{display:none}
  .category-head>span,
  .category-sidebar.collapsed .category-head>span{display:grid;width:32px;height:32px}
  .category-sidebar.collapsed .category-head>div{display:block}

  /* القائمة المفتوحة تطفو فوق المحتوى ولا تدفعه */
  .category-menu{
    position:absolute;
    top:calc(100% + 6px);
    inset-inline-start:0;
    width:330px;
    max-height:min(70vh,560px)!important;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 18px 40px rgba(16,24,39,.18);
  }

  /* شبكة تتكيف مع العرض (5 أعمدة تقريباً على 1380px) */
  .products-grid{
    grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
    gap:16px;
  }
}

/* ---------- 4) التابلت والهاتف (980px فأقل): الفئات ---------- */
@media(max-width:980px){
  /* قائمة عمودية بدل الصف الأفقي، بارتفاع محدود حتى لا تدفع المنتجات بعيداً */
  .category-menu{
    flex-direction:column!important;
    max-height:60vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    gap:2px!important;
  }
  .category-menu .category-btn{width:100%;white-space:normal;flex:0 0 auto}

  /* أهداف لمس مريحة (كانت 31-32px) */
  .drill-category,
  .all-category,
  .category-back{
    min-height:44px!important;
    height:auto!important;
    padding:8px 12px!important;
    font-size:14px!important;
    line-height:1.3!important;
  }
}

/* ---------- 5) الهاتف (760px فأقل): صور أقصر = منتجات أكثر في الشاشة ---------- */
@media(max-width:760px){
  .shop-content .products-grid .pic{
    aspect-ratio:4/3!important;
    height:auto!important;
  }
}