/* Shared small-screen refinements for every Heat Haven storefront page. */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }

/* Keep navigation drawers out of sight until their hamburger button opens them. */
.mobile-menu { visibility: hidden; pointer-events: none; }
.mobile-menu.open { visibility: visible; pointer-events: auto; }
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }

/* The full navigation needs more room than a tablet can provide. */
@media (max-width: 1199px) {
  nav [class~="hidden"][class~="md:flex"] { display: none !important; }
  nav [class~="md:hidden"] { display: flex !important; }
  nav .mobile-menu { width: min(20rem, 88vw) !important; max-width: 100vw; overflow-y: auto; }
}

@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  nav .brand { font-size: 1.2rem !important; letter-spacing: -0.4px; }
  nav > div { padding-left: 1rem !important; padding-right: 1rem !important; }

  .hero-video { height: 64svh !important; min-height: 30rem; object-position: center; }
  #home h1 { font-size: clamp(2.35rem, 12vw, 3.5rem) !important; line-height: 1; }
  #home p { font-size: 1.05rem !important; margin-bottom: 1.5rem !important; }
  #home a { padding: .75rem 1.5rem !important; font-size: 1rem !important; }

  section[class*="px-6"] { padding-left: 1rem !important; padding-right: 1rem !important; }
  section[class*="py-16"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  h1[class*="text-3xl"], h2[class*="text-3xl"] { font-size: 1.75rem !important; }

  #search-overlay { padding-top: 5.5rem !important; }
  #search-box-wrap, #search-results-panel { padding-left: 1rem !important; padding-right: 1rem !important; }
  #filterPanel, #filterDropdown { width: calc(100vw - 2rem) !important; max-width: 22rem; }

  #hh-chat-widget { bottom: 1rem !important; left: 1rem !important; }
  #hh-chat-toggle { width: 3.25rem !important; height: 3.25rem !important; }
  #hh-chat-panel { width: calc(100vw - 2rem) !important; height: min(32rem, calc(100svh - 6rem)) !important; }
  #toast { width: calc(100vw - 2rem); max-width: 26rem; text-align: center; justify-content: center; }

  .shoe-card .p-4 > .flex.justify-between { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .shoe-card .add-to-cart-btn { width: 100%; min-height: 2.75rem; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-video { height: 68vh; }
  #hh-chat-panel { max-width: calc(100vw - 3rem); }
}