/* ══════════════════════════════════════════════
   NAV — SHARED BASE (all screen sizes)
   ============================================== */
nav.nav {
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  padding: 0 !important; overflow: visible !important;
}

/* The flex row */
nav.nav .logo-container {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: space-between !important;
  direction: rtl !important; width: 100% !important; height: 64px !important;
  padding: 0 8px !important; gap: 0 !important; position: relative !important;
  overflow: visible !important;
}

/* ── LOGO (order 1 = rightmost in RTL) ── */
nav.nav .logo-link {
  display: flex !important; align-items: center !important; order: 1 !important;
  flex-shrink: 0 !important; height: 64px !important; padding: 0 8px 0 14px !important;
  text-decoration: none !important;
}
nav.nav .logo {
  display: block !important;
  height: clamp(40px, 9vw, 56px) !important; width: auto !important;
  max-width: clamp(145px, 40vw, 215px) !important;
  object-fit: contain !important;
  position: static !important; transform: none !important; margin: 0 !important;
}

/* ── ICON BUTTON SHARED STYLE ──
   Applied to customer-service, language-icon, and hamburger.
   All exactly 48px wide, 64px tall, column flex. */
nav.nav .icon-btn {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  width: 48px !important; height: 64px !important; padding: 0 !important;
  gap: 2px !important; cursor: pointer !important;
  background: transparent !important; border: none !important;
  border-radius: 6px !important; position: static !important;
  transform: none !important; top: auto !important; right: auto !important;
  left: auto !important; bottom: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .2s !important;
  text-decoration: none !important; color: #333 !important;
}
nav.nav .icon-btn:hover { background: #f0f7ff !important; }

/* ── CUSTOMER SERVICE (order 2) ── */
nav.nav .menu-container {
  display: flex !important; align-items: center !important; order: 2 !important;
  flex-shrink: 0 !important; position: static !important;
  width: auto !important; padding: 0 !important; margin: 0 !important;
}
nav.nav .customer-service-icon {
  position: static !important; left: auto !important; display: flex !important;
  align-items: center !important; flex: none !important;
  margin: 0 !important; transform: none !important;
}
nav.nav .customer-service-icon a {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  width: 48px !important; height: 64px !important; padding: 0 !important;
  gap: 2px !important; text-decoration: none !important; color: #333 !important;
  background: transparent !important; border: none !important;
  border-radius: 6px !important; position: static !important; transform: none !important;
  -webkit-tap-highlight-color: transparent !important; transition: background .2s !important;
}
nav.nav .customer-service-icon a:hover { background: #f0f7ff !important; }
nav.nav .customer-service-icon img { width: 22px !important; height: 22px !important; object-fit: contain !important; display: block !important; }

/* ── LANGUAGE SWITCH (order 3) — NO ::after ── */
nav.nav .language-switch {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  order: 3 !important; flex-shrink: 0 !important;
  position: static !important; top: auto !important; right: auto !important;
  left: auto !important; transform: none !important; margin: 0 !important;
  /* Remove any ::after separator */
}
/* !! CRITICAL: remove the divider line pseudo-element !! */
nav.nav .language-switch::before,
nav.nav .language-switch::after {
  content: none !important; display: none !important;
  width: 0 !important; height: 0 !important;
  background: none !important; border: none !important;
}
nav.nav .language-icon {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  width: 48px !important; height: 64px !important; padding: 0 !important;
  gap: 2px !important; cursor: pointer !important;
  background: transparent !important; border: none !important;
  border-radius: 6px !important; position: static !important; transform: none !important;
  -webkit-tap-highlight-color: transparent !important; transition: background .2s !important;
}
nav.nav .language-icon:hover { background: #f0f7ff !important; }
nav.nav .language-icon img, nav.nav .language-icon .menu-icon {
  display: block !important; width: 22px !important; height: 22px !important;
  object-fit: contain !important; margin: 0 !important;
}

/* Language dropdown */
nav.nav .language-dropdown {
  position: absolute !important; top: 64px !important;
  min-width: 140px !important; background: #fff !important;
  border: 1px solid #e5e5e5 !important; border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
  z-index: 1200 !important; overflow: hidden !important;
  padding: 6px 0 !important; direction: rtl !important;
}
nav.nav .language-dropdown a {
  display: block !important; padding: 11px 16px !important;
  font-size: 14px !important; color: #333 !important;
  border-bottom: 1px solid #f2f2f2 !important; text-decoration: none !important;
  transition: background .15s !important;
}
nav.nav .language-dropdown a:last-child { border-bottom: none !important; }
nav.nav .language-dropdown a:hover { background: #1e88e5 !important; color: #fff !important; }

/* ── Icon labels ── */
nav.nav .icon-label, nav.nav .menu-label {
  display: block !important; font-size: 9.5px !important; line-height: 1 !important;
  color: #555 !important; text-align: center !important;
  white-space: nowrap !important; pointer-events: none !important; margin: 0 !important;
}
nav.nav .styled-text { display: none !important; }

/* ── SOCIAL ICONS — hidden on mobile, visible on desktop ── */
nav.nav .social-icons-web { display: none !important; order: 4 !important; flex-shrink: 0 !important; }

/* ── HAMBURGER (order 5 = leftmost in RTL) ── */
nav.nav .menu-toggle {
  display: inline-flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  order: 5 !important; flex-shrink: 0 !important;
  position: static !important; top: auto !important; right: auto !important;
  left: auto !important; bottom: auto !important; transform: none !important;
  width: 48px !important; height: 64px !important; padding: 0 !important;
  background: transparent !important; border: none !important; border-radius: 6px !important;
  cursor: pointer !important; z-index: auto !important; gap: 2px !important;
  -webkit-tap-highlight-color: transparent !important; transition: background .2s !important;
}
nav.nav .menu-toggle:hover { background: #f0f7ff !important; }
nav.nav .menu-toggle .line, nav.nav .menu-toggle > span:not(.menu-label) {
  display: block !important; width: 22px !important; height: 2px !important;
  background: #222 !important; border-radius: 99px !important; margin: 2px 0 !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .22s ease !important;
}
nav.nav .menu-toggle.active .line:nth-child(1), nav.nav .menu-toggle.active > span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
nav.nav .menu-toggle.active .line:nth-child(2), nav.nav .menu-toggle.active > span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
nav.nav .menu-toggle.active .line:nth-child(3), nav.nav .menu-toggle.active > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

/* ── DROPDOWN (mobile/tablet) ── */
nav.nav .menu {
  display: flex !important; flex-direction: column !important;
  position: absolute !important; top: 64px !important;
  right: 0 !important; left: 0 !important; width: 100% !important;
  background: #fff !important; border-top: 1px solid #eee !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.12) !important;
  max-height: 0 !important; overflow: hidden !important; opacity: 0 !important;
  transform: translateY(-4px) !important; pointer-events: none !important;
  transition: max-height .42s cubic-bezier(.16,1,.3,1), opacity .26s, transform .26s !important;
  z-index: 999 !important; padding: 0 !important; margin: 0 !important; order: 10 !important;
}
nav.nav .menu.show {
  max-height: min(82vh,720px) !important; opacity: 1 !important;
  transform: translateY(0) !important; pointer-events: auto !important; overflow-y: auto !important;
}
nav.nav .menu > a {
  display: flex !important; align-items: center !important; gap: 10px !important;
  direction: rtl !important; width: 100% !important; min-height: 52px !important;
  padding: 13px 18px !important; font-size: 15px !important; font-weight: 600 !important;
  color: #1a1a1a !important; background: #fff !important;
  border: none !important; border-bottom: 1px solid #f3f3f3 !important;
  text-decoration: none !important; white-space: nowrap !important;
  transition: background .18s, color .18s !important;
  -webkit-tap-highlight-color: transparent !important;
}
nav.nav .menu > a:hover { background: #f0f7ff !important; color: #1565c0 !important; }
nav.nav .menu > a[href="/#order-section"] {
  background: linear-gradient(135deg,#1e88e5,#1565c0) !important; color: #fff !important;
  font-weight: 700 !important; margin: 8px 12px 4px !important;
  border-radius: 12px !important; border: none !important; justify-content: center !important;
}
nav.nav .menu > a[href="/#order-section"]:hover { background: linear-gradient(135deg,#1976d2,#0d47a1) !important; }
nav.nav .menu .menu-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; object-fit: contain !important; display: inline-block !important; }
nav.nav .menu .social-icons {
  display: flex !important; justify-content: center !important; align-items: center !important;
  gap: 14px !important; padding: 12px !important; background: #fafafa !important;
  border-top: 1px solid #eee !important;
}
nav.nav .menu .social-icons a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 44px !important; min-height: 44px !important; border-radius: 50% !important;
  background: transparent !important; border: none !important;
}
nav.nav .menu .social-icons a:hover { background: #e3f2fd !important; }
nav.nav .menu .social-icons img { width: 26px !important; height: 26px !important; }

/* ══════════════════════════════════════════════
   NAV DESKTOP 1024px+
   ============================================== */
@media (min-width: 1024px) {
  nav.nav .logo-container {
    height: 68px !important; padding: 0 40px !important;
    justify-content: flex-start !important; border-bottom: 1px solid #eee !important;
  }
  nav.nav .logo { height: 54px !important; max-width: 210px !important; }
  nav.nav .logo-link { height: 68px !important; padding: 0 0 0 20px !important; }

  /* Nav links: take middle flex space */
  nav.nav .menu {
    position: static !important; display: flex !important; flex-direction: row !important;
    flex-wrap: nowrap !important; flex: 1 1 auto !important; order: 2 !important;
    justify-content: center !important; align-items: stretch !important;
    max-height: none !important; opacity: 1 !important; transform: none !important;
    pointer-events: auto !important; overflow: visible !important;
    background: transparent !important; box-shadow: none !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
  }
  nav.nav .menu > a {
    width: auto !important; height: 68px !important; min-height: 68px !important;
    padding: 0 12px !important; font-size: 13.5px !important;
    color: #333 !important; background: transparent !important;
    border: none !important; justify-content: center !important;
    white-space: nowrap !important; position: relative !important;
    margin: 0 !important; gap: 0 !important;
  }
  nav.nav .menu > a::after {
    content: '' !important; position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important; background: #1e88e5 !important;
    transform: scaleX(0) !important; transform-origin: center !important;
    transition: transform .2s ease !important;
  }
  nav.nav .menu > a:hover { background: #f5f9ff !important; color: #1565c0 !important; }
  nav.nav .menu > a:hover::after { transform: scaleX(1) !important; }
  nav.nav .menu > a[href="/#order-section"] {
    background: #1e88e5 !important; color: #fff !important; font-weight: 700 !important;
    border-radius: 10px !important; margin: 14px 5px !important;
    height: 40px !important; min-height: 40px !important; padding: 0 14px !important;
    align-self: center !important;
  }
  nav.nav .menu > a[href="/#order-section"]:hover { background: #1565c0 !important; }
  nav.nav .menu > a[href="/#order-section"]::after { display: none !important; }
  nav.nav .menu .menu-icon { display: none !important; }
  nav.nav .menu .social-icons { display: none !important; }

  /* Right-side icons (service, language, social) */
  nav.nav .menu-container { order: 3 !important; }
  nav.nav .customer-service-icon a {
    flex-direction: row !important; gap: 5px !important; font-size: 13px !important;
    border-radius: 8px !important; padding: 0 10px !important; width: auto !important;
    height: 44px !important;
  }
  nav.nav .language-switch { order: 4 !important; }
  nav.nav .language-icon {
    flex-direction: row !important; gap: 4px !important; font-size: 13px !important;
    height: 44px !important; width: auto !important; padding: 0 10px !important;
    border-radius: 8px !important;
  }
  /* Thin divider — only on desktop, using box-shadow not ::after */
  nav.nav .menu-container {
    box-shadow: inset -1px 0 0 #e8e8e8 !important;
    padding-left: 8px !important;
  }
  /* Social icons */
  nav.nav .social-icons-web {
    display: flex !important; align-items: center !important;
    gap: 4px !important; order: 5 !important; padding: 0 6px 0 0 !important;
  }
  nav.nav .social-icons-web a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
  }
  nav.nav .social-icons-web a:hover { background: #f0f0f0 !important; }
  nav.nav .social-icons-web .facebook-icon,
  nav.nav .social-icons-web .instagram-icon { width: 24px !important; height: 24px !important; display: block !important; }

  nav.nav .menu-toggle { display: none !important; }
  nav.nav .icon-label, nav.nav .menu-label { display: none !important; }
}

@media (min-width: 1280px) {
  nav.nav .logo-container { padding: 0 56px !important; }
  nav.nav .menu > a { padding: 0 14px !important; font-size: 14px !important; }
}

/* ══════════════════════════════════════════════
   HERO
   ============================================== */
header.hero {
  position: relative !important; min-height: clamp(400px,68vh,760px) !important;
  overflow: hidden !important; padding: 0 !important;
  margin-top: 0 !important; border: none !important; display: block !important;
}
header.hero video.hero-video {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 0 !important;
}
header.hero::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: rgba(0,0,0,.36) !important; z-index: 1 !important; pointer-events: none !important;
}
header.hero .hero-content {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important; width: clamp(280px,86%,860px) !important;
  text-align: center !important; z-index: 20 !important; color: #fff !important;
  padding: 20px 16px !important; margin: 0 !important;
}
header.hero .hero-content h1, header.hero .hero-content #heroTitle {
  font-size: clamp(1.3rem,3.8vw,2.8rem) !important; line-height: 1.25 !important;
  white-space: normal !important; overflow-wrap: break-word !important;
  word-break: break-word !important; margin-bottom: 10px !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.7) !important;
}
header.hero .hero-content p, header.hero .hero-content #heroText {
  font-size: clamp(0.92rem,1.9vw,1.12rem) !important; line-height: 1.65 !important;
  max-width: 58ch !important; margin: 0 auto 18px !important;
  white-space: normal !important; overflow-wrap: break-word !important;
}
.arrow-container {
  position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important;
  width: 100% !important; transform: translateY(-50%) !important;
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; pointer-events: none !important;
  z-index: 10 !important; padding: 0 6px !important;
}
.arrow {
  pointer-events: auto !important; min-width: 44px !important; min-height: 44px !important;
  background: rgba(0,0,0,.45) !important; border: none !important; color: #fff !important;
  font-size: 20px !important; cursor: pointer !important;
  opacity: .75 !important; transition: background .2s, opacity .2s !important;
}
.arrow:hover { background: rgba(255,140,0,.75) !important; opacity: 1 !important; }
@media (max-width: 639px) { .arrow-container { display: none !important; } }

/* ══════════════════════════════════════════════
   FOOTER — keep original light colors
   ============================================== */
footer.main-footer {
  direction: rtl !important; overflow-x: hidden !important;
  background: linear-gradient(to bottom,#fff,#f0f0f0) !important;
  padding: 20px 16px 0 !important;
}
footer.main-footer .footer-container { max-width: 1160px !important; margin: 0 auto !important; display: block !important; }

/* Mobile: 2-col grid, desktop: 3-col */
footer.main-footer .nav-columns {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 18px 14px !important; width: 100% !important;
}
/* 3rd column spans full width on mobile */
footer.main-footer .nav-columns .nav-col-combined, footer.main-footer .nav-columns .nav-column:last-child { grid-column: 1 / -1 !important; }

@media (min-width: 640px) {
  footer.main-footer .nav-columns { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  footer.main-footer .nav-columns .nav-col-combined, footer.main-footer .nav-columns .nav-column:last-child { grid-column: auto !important; }
}

footer.main-footer .nav-column h3 {
  font-size: 13px !important; font-weight: 700 !important; color: #2c3e50 !important;
  margin: 0 0 8px !important; padding-bottom: 5px !important;
  border-bottom: 1px solid #ddd !important;
}
footer.main-footer .nav-column ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
footer.main-footer .nav-column ul li { margin-bottom: 5px !important; }
footer.main-footer .nav-column ul li a {
  font-size: 13px !important; color: #555 !important; text-decoration: none !important;
  line-height: 1.6 !important; transition: color .2s !important;
}
footer.main-footer .nav-column ul li a:hover { color: #1e88e5 !important; }

/* ── MOBILE FOOTER: 3rd column combined block ── */
@media (max-width: 639px) {
  /* The 3rd column = full width, horizontal compact layout */
  footer.main-footer .nav-columns .nav-col-combined, footer.main-footer .nav-columns .nav-column:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-top: 1px solid #ddd !important;
  }
  /* Hide the sub-headings on mobile to save space */
  footer.main-footer .nav-columns .nav-col-combined h3,
  footer.main-footer .nav-columns .nav-column:last-child h3 {
    display: none !important;
  }
  /* Social icons block */
  footer.main-footer .nav-columns .nav-column:last-child .social-icon {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 6px !important; align-items: center !important;
    margin: 0 !important;
  }
  /* Google Play badge — compact */
  footer.main-footer .nav-columns .nav-column:last-child a[href*="play.google.com"] {
    display: flex !important; align-items: center !important;
  }
  footer.main-footer .nav-columns .nav-column:last-child a[href*="play.google.com"] img {
    height: 34px !important; width: auto !important; margin: 0 !important;
  }
  /* Payment methods — compact row */
  footer.main-footer .nav-columns .nav-column:last-child .payment-methods {
    display: flex !important; flex-wrap: wrap !important;
    gap: 5px !important; align-items: center !important;
  }
  footer.main-footer .nav-columns .nav-column:last-child .payment-methods img {
    height: 20px !important; width: auto !important; max-width: 40px !important;
  }
}

/* Tablet/desktop 3rd column */
@media (min-width: 640px) {
  footer.main-footer .nav-column .social-icon {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    align-items: center !important; margin-bottom: 10px !important;
  }
  footer.main-footer .nav-column .social-icon a {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    background: #f0f0f0 !important; text-decoration: none !important; transition: background .2s !important;
  }
  footer.main-footer .nav-column .social-icon a:hover { background: #e3f2fd !important; }
  footer.main-footer .nav-column .social-icon img { width: 20px !important; height: 20px !important; }
  footer.main-footer .nav-column a[href*="play.google.com"] img {
    height: clamp(34px,5.5vw,46px) !important; width: auto !important;
    max-width: 100% !important; display: block !important; margin-bottom: 10px !important;
  }
  footer.main-footer .nav-column .payment-methods {
    display: flex !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important;
  }
  footer.main-footer .nav-column .payment-methods img {
    height: 22px !important; width: auto !important; max-width: 44px !important; object-fit: contain !important;
  }
}

.seo-keywords {
  max-width: 1160px !important; margin: 12px auto 0 !important;
  padding: 12px 16px !important; border-top: 1px solid #e5e5e5 !important;
  overflow-x: hidden !important; direction: rtl !important;
}
.seo-keywords h2 { font-size: 1rem !important; color: #333 !important; margin-bottom: 6px !important; }
.seo-keywords p {
  font-size: 0.88rem !important; line-height: 1.65 !important; color: #555 !important;
  max-width: 900px !important; margin: 0 auto !important;
  word-break: break-word !important; overflow-wrap: break-word !important;
}
.footer-bottom {
  text-align: center !important; font-size: 12.5px !important; color: #777 !important;
  padding: 10px 16px !important; margin-top: 10px !important;
  border-top: 1px solid #ddd !important;
}

/* ══════════════════════════════════════════════
   MISC
   ============================================== */
#siteUpdates {
  font-size: clamp(12px,2.6vw,14px) !important; padding: 6px 12px !important;
  white-space: normal !important; word-break: break-word !important;
}
button, .btn, .btn1, input[type="submit"], a.btn { min-height: 44px !important; }
.form-group input, .form-group textarea, .form-group select, .tracking-input {
  font-size: 16px !important; max-width: 100% !important;
}

/* Car multimedia */
@media (orientation:landscape) and (min-width:600px) and (max-height:500px) {
  nav.nav .logo-container { height: 50px !important; padding: 0 10px !important; }
  nav.nav .logo { height: 32px !important; }
  nav.nav .customer-service-icon a, nav.nav .language-icon, nav.nav .menu-toggle {
    height: 50px !important; width: 44px !important;
  }
  nav.nav .menu { top: 50px !important; }
  header.hero { min-height: calc(100dvh - 50px) !important; }
  header.hero .hero-content h1 { font-size: clamp(1rem,2.8vw,1.8rem) !important; }
}

/* Small phones < 400px */
@media (max-width:399px) {
  nav.nav .logo-container { padding: 0 4px !important; height: 58px !important; }
  nav.nav .logo { height: 36px !important; max-width: 120px !important; }
  nav.nav .customer-service-icon a, nav.nav .language-icon, nav.nav .menu-toggle {
    width: 42px !important; height: 58px !important;
  }
  nav.nav .menu { top: 58px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v9 patches
   ════════════════════════════════════════════ */

/* 1) Language dropdown — always above everything, pointer-events always on */
nav.nav .language-switch {
  position: relative !important;
  overflow: visible !important;
}
nav.nav .language-dropdown {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  min-width: 150px !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
  z-index: 2000 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
nav.nav .language-dropdown a {
  display: block !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  color: #222 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  min-height: 44px !important;
  transition: background .15s !important;
}
nav.nav .language-dropdown a:last-child { border-bottom: none !important; }
nav.nav .language-dropdown a:hover { background: #1e88e5 !important; color: #fff !important; }

/* 2) Hero h1 — smaller, one line on desktop */
header.hero .hero-content h1,
header.hero .hero-content #heroTitle {
  font-size: clamp(1rem, 2.6vw, 1.9rem) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  text-align: center !important;
}

/* On narrow screens let it wrap rather than truncate */
@media (max-width: 560px) {
  header.hero .hero-content h1,
  header.hero .hero-content #heroTitle {
    white-space: normal !important;
    font-size: clamp(0.82rem, 3.8vw, 1rem) !important;
  }
}

/* 3) Hero height on mobile — proportional, not dominant */
@media (max-width: 1023px) {
  header.hero {
    min-height: 44vh !important;
    max-height: 500px !important;
  }
  header.hero .hero-content {
    width: min(92%, 700px) !important;
    padding: 12px !important;
  }
  header.hero .hero-content p,
  header.hero .hero-content #heroText {
    font-size: clamp(0.82rem, 2.4vw, 0.98rem) !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 639px) {
  header.hero {
    min-height: 38vh !important;
    max-height: 400px !important;
  }
}

/* 4) Mobile navbar — logo RIGHT, icons LEFT, all same height */
@media (max-width: 1023px) {
  nav.nav .logo-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* LTR physical layout: icons at left edge, logo pushed to right */
    direction: ltr !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 62px !important;
    padding: 0 0 0 4px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* Icons group: hamburger, language, service — left side (order 1-3 in LTR) */
  nav.nav .menu-toggle    { order: 1 !important; }
  nav.nav .language-switch { order: 2 !important; }
  nav.nav .menu-container { order: 3 !important; }

  /* Logo pushed to far right with auto margin */
  nav.nav .logo-link {
    order: 4 !important;
    margin-left: auto !important;
    padding: 0 10px 0 6px !important;
    height: 62px !important;
  }

  /* Uniform height for all icons */
  nav.nav .menu-toggle,
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    height: 62px !important;
    width: 48px !important;
    min-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    position: static !important;
    transform: none !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background .2s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  nav.nav .menu-toggle:hover,
  nav.nav .language-icon:hover,
  nav.nav .customer-service-icon a:hover { background: #f0f7ff !important; }

  nav.nav .customer-service-icon img,
  nav.nav .language-icon img,
  nav.nav .language-icon .menu-icon {
    width: 22px !important; height: 22px !important;
    display: block !important; object-fit: contain !important;
  }
  nav.nav .menu-toggle .line {
    width: 22px !important; height: 2px !important; background: #222 !important;
    border-radius: 99px !important; display: block !important;
  }
  nav.nav .icon-label, nav.nav .menu-label {
    font-size: 9.5px !important; line-height: 1 !important; display: block !important;
    color: #555 !important; white-space: nowrap !important; margin: 0 !important;
  }
  nav.nav .social-icons-web { display: none !important; }
  nav.nav .menu { top: 62px !important; }

  /* Language dropdown relative to language-switch */
  nav.nav .language-dropdown {
    right: auto !important;
    left: 0 !important;
  }

  nav.nav .logo {
    height: clamp(40px, 10vw, 56px) !important;
    max-width: clamp(145px, 42vw, 215px) !important;
    display: block !important;
    object-fit: contain !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  nav.nav .logo-container { height: 56px !important; padding-left: 2px !important; }
  nav.nav .logo-link { height: 56px !important; }
  nav.nav .logo { height: 38px !important; max-width: 130px !important; }
  nav.nav .menu-toggle,
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    height: 56px !important; width: 42px !important;
  }
  nav.nav .menu { top: 56px !important; }
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v10 patches
   ════════════════════════════════════════════ */

/* FIX 1: Show "שירות" label under customer service icon on mobile */
@media (max-width: 1023px) {
  nav.nav .styled-text {
    display: inline !important;
    background: none !important;
    background-color: transparent !important;
    color: #555 !important;
    font-size: 9.5px !important;
    font-weight: normal !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  nav.nav .customer-service-icon .icon-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 9.5px !important;
    color: #555 !important;
  }
}

/* FIX 2: Menu toggle — label must be fully visible, not clipped */
@media (max-width: 1023px) {
  nav.nav .menu-toggle {
    gap: 0 !important;
    padding: 10px 0 6px !important;   /* breathing room top + bottom for label */
    justify-content: flex-start !important;
    overflow: visible !important;
  }
  nav.nav .menu-toggle .line,
  nav.nav .menu-toggle > span:not(.menu-label) {
    display: block !important;
    margin: 2px 0 !important;
  }
  nav.nav .menu-toggle .menu-label {
    display: block !important;
    margin-top: 4px !important;
    font-size: 9.5px !important;
    color: #555 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* FIX 3: .dotted-box — change border from blue to match background #f0f4f8 */
.dotted-box {
  border-color: #f0f4f8 !important;
}

/* FIX 4: .terms-section — change right border from blue to match background #f9f9f9 */
.terms-section {
  border-right-color: #f9f9f9 !important;
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v11 patches
   ════════════════════════════════════════════ */

/* FIX 1: Blue left stripe on accordion items when opened
   .mobile-accordion::before creates a 4px blue left bar (position:absolute left:0)
   that appears when .mobile-accordion.active — hide it completely */
.mobile-accordion::before,
.mobile-accordion.active::before {
  background: transparent !important;
  opacity: 0 !important;
  display: none !important;
}

/* FIX 2: Menu-toggle icon not vertically symmetric with other icons
   Root cause: v9 set justify-content:flex-start + padding:10px 0 6px on toggle
   while language-icon and customer-service have justify-content:center.
   Fix: make all three icons use the exact same flex layout */
@media (max-width: 1023px) {

  /* RESET menu-toggle to match icon-btn siblings */
  nav.nav .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;   /* same as language-icon */
    gap: 3px !important;
    padding: 0 !important;                /* no uneven padding */
    width: 48px !important;
    height: 62px !important;
    min-height: 44px !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .2s !important;
  }

  nav.nav .menu-toggle:hover { background: #f0f7ff !important; }

  /* Hamburger lines — identical sizing, no extra margin */
  nav.nav .menu-toggle .line,
  nav.nav .menu-toggle > span:not(.menu-label) {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #222 !important;
    border-radius: 99px !important;
    margin: 0 !important;               /* gap:3px handles spacing */
    flex-shrink: 0 !important;
    transition: transform .35s cubic-bezier(.16,1,.3,1),
                opacity .22s ease !important;
  }

  /* Animated states */
  nav.nav .menu-toggle.active .line:nth-child(1) { transform: translateY(5px) rotate(45deg) !important; }
  nav.nav .menu-toggle.active .line:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  nav.nav .menu-toggle.active .line:nth-child(3) { transform: translateY(-5px) rotate(-45deg) !important; }

  /* "תפריט" label — sits naturally after lines, no extra offset */
  nav.nav .menu-toggle .menu-label {
    display: block !important;
    font-size: 9.5px !important;
    color: #555 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-top: 1px !important;          /* tiny gap after last line */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure language-icon and customer-service are also center-aligned */
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    width: 48px !important;
    height: 62px !important;
    min-height: 44px !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  nav.nav .menu-toggle,
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    width: 42px !important;
    height: 56px !important;
  }
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v12 patches
   ════════════════════════════════════════════ */

/* ── FIX 1: All three nav icons perfectly symmetric on mobile
   Strategy: use a SHARED wrapper height (62px), padding-top pushes
   the icon+label group to the same vertical rhythm.
   All three use the exact same flex structure. ── */
@media (max-width: 1023px) {

  /* Shared icon wrapper */
  nav.nav .menu-toggle,
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;            /* gap between icon-image and label — same for all */
    padding: 10px 0 8px !important; /* equal top+bottom breathing room */
    width: 48px !important;
    height: 62px !important;
    min-height: 44px !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .2s !important;
  }
  nav.nav .menu-toggle:hover,
  nav.nav .language-icon:hover,
  nav.nav .customer-service-icon a:hover { background: #f0f7ff !important; }

  /* Icon images — fixed size so all align on same row */
  nav.nav .customer-service-icon img,
  nav.nav .language-icon img,
  nav.nav .language-icon .menu-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* Hamburger lines group — treated as one unit (same 22×22 area as the images) */
  nav.nav .menu-toggle .line,
  nav.nav .menu-toggle > span:not(.menu-label) {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #222 !important;
    border-radius: 99px !important;
    margin: 2px 0 !important;
    flex-shrink: 0 !important;
    transition: transform .35s cubic-bezier(.16,1,.3,1),
                opacity .22s ease !important;
  }
  /* Remove the lines from the flex gap calculation so they act as a block */
  nav.nav .menu-toggle {
    gap: 0 !important;              /* override: gap on lines handled by margin */
  }

  /* Labels — ALL THREE share the exact same style and position */
  nav.nav .menu-toggle .menu-label,
  nav.nav .language-icon .icon-label,
  nav.nav .customer-service-icon .icon-label,
  nav.nav .customer-service-icon .icon-label .styled-text {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    color: #555 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* "תפריט" label — same margin-top as the gap between image and label in others */
  nav.nav .menu-toggle .menu-label {
    margin-top: 4px !important;   /* matches gap:4px on the other icons */
  }

  /* hamburger animated states */
  nav.nav .menu-toggle.active .line:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  nav.nav .menu-toggle.active .line:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  nav.nav .menu-toggle.active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  nav.nav .menu-toggle,
  nav.nav .language-icon,
  nav.nav .customer-service-icon a {
    width: 42px !important;
    height: 56px !important;
  }
}

/* ── FIX 2: "קבלו הצעת מחיר" in mobile menu — right-aligned like other links ── */
@media (max-width: 1023px) {
  nav.nav .menu > a[href="/#order-section"] {
    justify-content: flex-start !important;   /* right side in RTL = flex-start */
    text-align: right !important;
    padding: 13px 18px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #f3f3f3 !important;
  }
  nav.nav .menu > a[href="/#order-section"]:hover {
    background: #f0f7ff !important;
    color: #1565c0 !important;
  }
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v13 patches
   ════════════════════════════════════════════ */

/* FIX 1: "קבלו הצעת מחיר" mobile menu — restore blue background, keep RTL-right aligned */
@media (max-width: 1023px) {
  nav.nav .menu > a[href="/#order-section"] {
    background: linear-gradient(135deg, #1e88e5, #1565c0) !important;
    color: #fff !important;
    font-weight: 700 !important;
    justify-content: flex-start !important;   /* in RTL = text on right */
    text-align: right !important;
    padding: 13px 18px !important;
    margin: 4px 10px !important;
    border-radius: 10px !important;
    border: none !important;
    border-bottom: none !important;
  }
  nav.nav .menu > a[href="/#order-section"]:hover {
    background: linear-gradient(135deg, #1976d2, #0d47a1) !important;
    color: #fff !important;
  }
}

/* FIX 2: scroll-padding-top so anchors aren't hidden under sticky nav */
html {
  scroll-padding-top: 74px !important; /* desktop nav height + buffer */
}
@media (max-width: 1023px) {
  html {
    scroll-padding-top: 72px !important; /* mobile nav height 62px + 10px buffer */
  }
}

/* FIX 3: Enlarge logo — a bit bigger across all breakpoints */
nav.nav .logo {
  height: clamp(48px, 10vw, 62px) !important;
  max-width: clamp(165px, 46vw, 240px) !important;
}
@media (min-width: 1024px) {
  nav.nav .logo {
    height: 60px !important;
    max-width: 230px !important;
  }
}
@media (max-width: 380px) {
  nav.nav .logo {
    height: 42px !important;
    max-width: 138px !important;
  }
}


/* ════════════════════════════════════════════
   PRIME IMPORTS v14 — scroll offset fix
   ════════════════════════════════════════════ */

/* CSS-native scroll margin: every section/anchor gets offset
   equal to navbar height so anchor links never hide under the nav */
[id] {
  scroll-margin-top: 74px;
}
@media (max-width: 1023px) {
  [id] {
    scroll-margin-top: 72px;
  }
}