/* === Zaha Surgical responsive fixes === */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; width: 100%; overflow-x: hidden; }
body { width: 100%; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, .btn, .nav-toggle { touch-action: manipulation; }

/* Common container safety */
.container, .main-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box;
}

/* Header and navigation */
#header-wrap { width: 100%; }
#top-bar .container,
#middle-section .container,
#bottom-menu .container { min-width: 0; }

#cart-dropdown {
  max-width: min(92vw, 20rem) !important;
  box-sizing: border-box;
}

.dropdown-menu,
#products-dropdown {
  max-width: min(95vw, 320px) !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Product cards and grids */
.product-card,
.zaha-search-card,
#product-grid > *,
#results > * {
  min-width: 0;
}
.product-card img,
.zaha-search-card img {
  max-width: 100%;
  object-fit: contain;
}

/* Tables: keep usable on small screens */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
table { max-width: 100%; border-collapse: collapse; }

/* Checkout page */
.checkout-page main { width: 100%; }
.checkout-shell {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.checkout-table { min-width: 720px; }
.checkout-actions button { width: auto; }
#summaryContainer { overflow-wrap: anywhere; }
#productSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
#productSummary > div {
  width: min(100%, 16rem) !important;
  max-width: 100% !important;
}

/* WhatsApp popup/icon responsive */
.whatsapp-popup {
  width: min(90vw, 320px) !important;
  max-width: 320px !important;
  box-sizing: border-box;
}
.whatsapp-icon {
  width: 56px !important;
  height: 56px !important;
}
.whatsapp-icon img,
.whatsapp-popup .whatsapp-header img {
  max-width: 36px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

/* Tablet and mobile */
@media (max-width: 1024px) {
  #top-bar .container {
    position: relative !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  #top-bar .absolute.right-32 {
    position: static !important;
    right: auto !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  #top-bar .flex.space-x-6,
  #top-bar .flex.space-x-5 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }

  #top-bar .space-x-6 > :not([hidden]) ~ :not([hidden]),
  #top-bar .space-x-5 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
  }

  #middle-section .container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  #middle-section img[alt="Logo"],
  #middle-section a img {
    height: 4rem !important;
    width: auto !important;
  }

  #middle-section .px-4[style*="flex"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 3;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #search-input {
    max-width: none !important;
    min-width: 0 !important;
  }

  #bottom-menu .container {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 1rem !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  #bottom-menu a,
  #bottom-menu button,
  #bottom-menu .relative {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  body.menu-fixed #top-bar,
  body.menu-fixed #middle-section {
    transform: none !important;
  }

  main, section {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 8vw, 3rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 2rem) !important; line-height: 1.2 !important; }

  .navbar, .header, .footer, .site-header, .site-footer,
  footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .row, .flex-row, .products-row, .product-listing {
    flex-wrap: wrap !important;
  }

  .col, .col-2, .col-3, .product-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero, .banner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #product-grid,
  #results {
    grid-template-columns: 1fr !important;
  }

  .checkout-shell {
    padding: 1rem !important;
    border-radius: 0.75rem !important;
  }

  .checkout-actions button,
  #proceedToCheckout {
    width: 100% !important;
  }

  #paymentForm label {
    padding: 0.9rem !important;
  }

  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  #top-bar { font-size: 0.78rem !important; }
  #top-bar a, #top-bar span { word-break: break-word; }

  #middle-section .px-4 > .flex {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #search-input,
  #search-btn {
    width: 100% !important;
    border-radius: 0.5rem !important;
  }

  #bottom-menu .container {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-size: 0.75rem !important;
  }

  .checkout-table {
    min-width: 640px;
    font-size: 0.78rem;
  }

  .checkout-table img {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }

  .whatsapp-icon {
    right: 14px !important;
    bottom: 14px !important;
    width: 52px !important;
    height: 52px !important;
  }
  .whatsapp-popup {
    right: 10px !important;
    bottom: 78px !important;
  }
}