/* Add custom CSS styles below */ 
/* =========================================
   WHITE HILLS - MOBILE HEADER COMPLETE FIX
   ========================================= */

@media (max-width: 768px) {

  /* -----------------------------------------
     1) منع الهيدر من التداخل مع البانر
     ----------------------------------------- */

  header,
  .store-header,
  .main-header,
  .navbar,
  .header-wrapper,
  .s-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* -----------------------------------------
     2) منع المحتوى من الصعود خلف الهيدر
     ----------------------------------------- */

  main,
  .app-inner,
  .page-wrapper,
  .home-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* -----------------------------------------
     3) إخفاء اللغة والعملة على الجوال
     ----------------------------------------- */

  .top-navbar,
  .top-header,
  .header-top,
  .s-top-navbar,
  .s-header-top,
  .language-currency,
  .currency-language {
    display: none !important;
  }

  /* -----------------------------------------
     4) ضغط الهيدر الرئيسي
     ----------------------------------------- */

  .main-nav-container,
  .main-nav,
  header .main-nav,
  header nav,
  .navbar {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    display: flex !important;
    align-items: center !important;

    position: relative !important;
  }

  /* -----------------------------------------
     5) ضغط الحاوية داخل الهيدر
     ----------------------------------------- */

  .main-nav-container > .container,
  .main-nav > .container,
  header nav > .container,
  header .container {
    min-height: 82px !important;
    max-height: 82px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    align-items: center !important;
  }

  /* -----------------------------------------
     6) ضبط الشعار
     ----------------------------------------- */

  .navbar-brand,
  .main-nav .navbar-brand,
  header .navbar-brand {
    height: 60px !important;
    min-height: 60px !important;

    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-brand img,
  header .navbar-brand img {
    max-height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* -----------------------------------------
     7) تقليل الفراغات حول أيقونات الهيدر
     ----------------------------------------- */

  header button,
  header a,
  .main-nav button,
  .main-nav a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* -----------------------------------------
     8) جعل البانر يبدأ مباشرة بعد الهيدر
     ----------------------------------------- */

  .s-block--hero-slider,
  .s-slider-block,
  .home-slider,
  .main-slider,
  salla-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;

    position: relative !important;
    z-index: 1 !important;
  }

  /* -----------------------------------------
     9) الهيدر فوق البانر بدون تداخل
     ----------------------------------------- */

  header,
  .store-header,
  .main-header {
    z-index: 20 !important;
  }
}