/* Responsive Fixes - Added to improve mobile readability & spacing */
/* Keep visuals intact; only adjust scaling, spacing, and touch targets */

:root{
  --base-font: 16px;
  --maxw: 1100px;
}

/* Make images and media fluid */
img, picture, figure, video, iframe {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Improve touch targets */
button, .btn, .btn-order, .cta, a.button {
  min-height: 44px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Fluid typography */
html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

h1 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height:1.05; }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
p, li, a { font-size: clamp(0.95rem, 1.9vw, 1.05rem); }

/* Ensure container padding on small screens */
.container { padding-left: 16px !important; padding-right: 16px !important; }

/* Improve header behavior on small screens */
header.topbar, .nav, .navbar {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Prevent overflow issues */
* { box-sizing: border-box; }

/* Specific fixes for hero layout */
.hero { gap: 18px !important; padding-top: 28px !important; padding-bottom:28px !important; }
.hero-left, .hero-right { min-width: 0 !important; }

/* Price card and grid adjustments */
.price-card, .card, .product-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

/* Make lists and footers readable on mobile */
.footer, footer { padding: 28px 16px !important; font-size: 0.95rem !important; }
ul { padding-left: 20px; }

/* Tappable form elements */
input[type="text"], input[type="email"], textarea, select {
  min-height:44px; padding:12px 10px; font-size:1rem; border-radius:8px;
}

/* Avoid fixed-width elements */
[style*="width:"] { max-width: 100% !important; }

/* Media queries for very small screens */
@media (max-width: 520px) {
  header.topbar { padding-top:10px; padding-bottom:10px; }
  .brand { font-size: 18px !important; }
  .nav-links { gap: 8px !important; }
  .hero { padding: 20px 6px; gap: 12px; }
  .tagline { font-size: 0.98rem !important; }
  .container { padding-left: 12px !important; padding-right:12px !important; }
  .btn-order { padding:10px 12px !important; font-size:1rem !important; }
}

/* Medium screens adjustments */
@media (min-width: 521px) and (max-width: 900px) {
  .hero { gap:16px; align-items:flex-start; }
  .nav-links { gap:10px; }
}

/* Ensure sticky headers don't cover content */
body { scroll-padding-top: 80px; }

/* Small utility for truncated text */
.truncate-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }