/* TWO Packaging - Comprehensive Layout Fixes */

/* Expand Tailwind .container max-width on larger viewports */
@media (min-width: 1280px) {
  .container { max-width: 1200px !important; padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 1440px) {
  .container { max-width: 1360px !important; padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 1600px) {
  .container { max-width: 1500px !important; padding-left: 48px !important; padding-right: 48px !important; }
}
@media (min-width: 1800px) {
  .container { max-width: 1680px !important; padding-left: 56px !important; padding-right: 56px !important; }
}

/* Full-width container override (for hero product image strip) */
.container.\!px-0 {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fix logo squishing - ensure logos always render at natural aspect ratio */
nav img[src*="logo.svg"],
header img[src*="logo.svg"],
img[src*="footer-logo"],
img[src*="logo"]:not([src*="placeholder"]) {
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

/* Ensure logo anchor links don't collapse */
nav a:has(img[src*="logo.svg"]),
header a:has(img[src*="logo.svg"]) {
  flex-shrink: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Expand max-width text constraints on large screens */
@media (min-width: 1024px) {
  .pkg-hero > .container {
    padding-top: 30px !important;
    padding-bottom: 60px !important;
  }
  .max-w-\[564px\] { max-width: 760px !important; }
  .max-w-\[600px\] { max-width: 820px !important; }
  .max-w-\[640px\] { max-width: 880px !important; }
  .max-w-\[700px\] { max-width: 980px !important; }
  .max-w-\[707px\] { max-width: 980px !important; }
  .max-w-\[720px\] { max-width: 1000px !important; }
  .max-w-\[760px\] { max-width: 1100px !important; }
  .max-w-\[832px\] { max-width: 1180px !important; }
  .max-w-\[860px\] { max-width: 1100px !important; }
  .max-w-\[872px\] { max-width: 1180px !important; }
  .max-w-\[876px\] { max-width: 1180px !important; }
}

/* Ensure hero strip image stretches full width */
img[src*="products.png"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Force all GSAP word-by-word animations to be visible (fallback for broken ScrollTrigger) */
span.gw,
.gw {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
}