/* ================================================================
   SHANIEL — ALL PAGES RESPONSIVE CSS
   Uses JavaScript to fix inline styles on mobile
   ================================================================ */

/* Basic container overflow prevention */
html, body { overflow-x: hidden !important; }
main { max-width: 100vw; overflow-x: hidden; }
img { max-width: 100% !important; height: auto; }

/* Section hero height */
@media (max-width: 768px) {
  .page-banner { padding: 36px 0 28px !important; }
}

/* General small screen improvements */
@media (max-width: 1024px) {
  :root { --container: clamp(16px, 4vw, 24px); }
}

@media (max-width: 768px) {
  :root { --container: 16px; }
  
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  h3 { font-size: 1.3rem !important; }
}

@media (max-width: 480px) {
  :root { --container: 12px; }
  
  h1 { font-size: 1.7rem !important; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.15rem !important; }
  
  .btn { padding: 10px 18px !important; font-size: 0.78rem !important; }
}

/* Touch-friendly improvements */
@media (hover: none) {
  .product-card, .time-slot, .month-pill {
    -webkit-tap-highlight-color: transparent;
  }
  
  button, a, input, select, textarea {
    min-height: 44px; /* WCAG touch target */
    min-width: 44px;
  }
}