/* 1) Never allow horizontal overflow */
html, body { overflow-x: hidden; }

/* 2) Make any full-width containers respect the viewport */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
*[style*="width: 100vw"] { width: 100%; } /* defensive for rogue 100vw */

/* 3) Swiper/hero: keep arrows inside and clip overflow */
.banner-swiper,
.products-page-wrapper .banner-swiper .swiper {
  overflow: hidden;            /* stops arrows/shadows causing scroll */
}
.products-page-wrapper .swiper-button-prev { left: max(12px, env(safe-area-inset-left)); }
.products-page-wrapper .swiper-button-next { right: max(12px, env(safe-area-inset-right)); }

/* 4) Header: prevent nav from forcing a wider line on mid widths */
.header-container { flex-wrap: wrap; }
@media (max-width: 820px){
  .main-nav ul{
    overflow-x: auto; white-space: nowrap; gap: 16px;
    -webkit-overflow-scrolling: touch;
  }
}

/* 5) Full-height hero that still fits with header present */
:root { --header-h: 64px; }           /* adjust to your actual header height */
.home-admin-page .banner-section{
  min-height: calc(100svh - var(--header-h));
  height: auto;                       /* avoid > viewport due to inner margins */
  display: flex; align-items: center; justify-content: center;
  padding-inline: 16px;
}




/* Header */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 15px 0;
}

.header-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 50px;
  max-width: 150px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  font-weight: 500;
  color: #3D4451;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #2563EB;
}




/* ===== Responsive Header Enhancements (no HTML changes) ===== */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px){
  .site-header { padding: 12px 0; }
  .header-container { max-width: 1000px; }
  .logo img { height: 46px; max-width: 140px; }

  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 0.95rem; }
}

/* Small tablets & large phones (≤ 768px)
   – keep items visible using a horizontal scroller */
@media (max-width: 768px){
  .site-header {
    padding: 12px 0;
    border-bottom-color: #eef2f7;
  }
  .header-container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    gap: 12px;
  }

  .logo img { height: 42px; max-width: 130px; }

  .main-nav { width: 100%; }
  .main-nav ul{
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;            /* avoid scrollbar overlap */
  }
  .main-nav li { scroll-snap-align: start; }
  .main-nav ul::-webkit-scrollbar { height: 6px; }
  .main-nav ul::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15); border-radius: 999px;
  }
  .main-nav a { font-size: 0.94rem; padding: 6px 0; }
}

/* Phones (≤ 480px)
   – stack logo above a pill-style, scrollable nav */
@media (max-width: 480px){
  .header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .logo { display: flex; justify-content: center; }
  .logo img { height: 38px; max-width: 120px; }

  .main-nav ul{
    gap: 10px;
    padding: 6px 2px;
  }
  .main-nav a{
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 0.92rem;
    line-height: 1;
  }
  .main-nav a:hover{
    color: #2563EB;
    border-color: #cfe0ff;
    background: #f8fbff;
  }
}

/* Tiny devices (≤ 360px) */
@media (max-width: 360px){
  .logo img { height: 34px; max-width: 110px; }
  .main-nav a{ padding: 7px 10px; font-size: 0.9rem; }
}