/* =========================================================
   MOBILE / TABLET RESPONSIVE LAYER
   Loaded last on every page (just before </body>) so it wins over the
   page-level inline <style> blocks and earlier patches. Desktop layout
   (> 900px) is left untouched except for the form-font fix below.
   ========================================================= */

/* ---------- Global ---------- */

/* Form controls fell back to the browser's serif font because
   "Open Sans" is not loaded and the shorthand had no generic fallback. */
input, select, textarea, button {
  font-family: "Open Sans", Roboto, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 900px) {
  /* Mobile menu must stay hidden until the hamburger opens it
     (grow-bags page carries an inline rule that forced it open). */
  html body .header-premium .header-premium-nav:not(.open) { display: none !important; }
  html body .header-premium .header-premium-nav.open {
    height: auto !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  /* 16px inputs stop iOS Safari from zooming in when a field is focused. */
  input, select, textarea { font-size: 16px !important; }

  /* Media never wider than the screen. */
  main img, section img, figure img { max-width: 100%; }

  /* Keep the floating WhatsApp button from covering the footer text. */
  .footer-v30-bottom { padding-bottom: 84px !important; }

  /* Long words / emails / URLs wrap instead of forcing sideways scroll. */
  h1,h2,h3,p,a,li,span,td { overflow-wrap: break-word; }
}

/* ---------- Home page (index.html) ---------- */

@media (max-width: 600px) {
  /* Hero: headline was wider than the screen ("TARPAULINS" clipped),
     buttons collided with the slide dots, arrows sat on top of the text. */
  .hero.hero-carousel { height: auto !important; min-height: 600px !important; }
  .hero.hero-carousel .hero-inner {
    height: auto !important;
    min-height: 600px !important;
    padding: 118px 0 78px !important;
    align-items: center !important;
  }
  .hero.hero-carousel .hero-copy { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
  .hero.hero-carousel .eyebrow { font-size: 12px !important; letter-spacing: .4px !important; }
  .hero.hero-carousel h1,
  .hero.hero-carousel .hero-product-title {
    font-size: clamp(32px, 10.5vw, 46px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1px !important;
    white-space: normal !important;
  }
  .hero.hero-carousel .hero-product-subtitle { font-size: 17px !important; margin: 10px 0 12px !important; }
  .hero.hero-carousel .hero-product-description { font-size: 14.5px !important; line-height: 1.6 !important; }
  .hero.hero-carousel .hero-buttons {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    max-width: min(300px, calc(100vw - 50px)) !important;
    width: 100% !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .hero.hero-carousel .hero-buttons .btn {
    flex: none !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 18px !important;
    min-height: 46px !important;
  }
  .hero.hero-carousel .hero-carousel-dots { bottom: 26px !important; top: auto !important; }
  .hero.hero-carousel .hero-carousel-arrow {
    top: auto !important;
    bottom: 12px !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 30px !important;
    line-height: 36px !important;
  }

  /* Industries: 3 squeezed columns (~86px each) → one readable column. */
  .industries-v23 .industry-v23-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .industries-v23 .industry-v23-card { min-height: 0 !important; }

  /* Brands: two cramped cards → stacked. */
  .brands-v40 .brands-v40-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .brands-v40 .brand-showcase-top { gap: 10px !important; }
  .brands-v40 .brands-v40-footer { width: 100% !important; max-width: 100% !important; margin: 22px 0 0 !important; box-sizing: border-box !important; }

  /* Quote form rows stack. */
  .quote .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .quote form { padding: 20px !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .industries-v23 .industry-v23-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- Product pages (HDPE / PVC / Canvas / Agricultural) ---------- */

@media (max-width: 600px) {
  /* Long application labels ("AGRICULTURAL HAY & CROP PROTECTION")
     overflowed their image. */
  .hdpe-app-fixed-tile .hdpe-app-fixed-label,
  .hdpe-app-fixed-label {
    white-space: normal !important;
    max-width: calc(100% - 20px) !important;
    font-size: 12px !important;
  }

  /* Hero product image bled past the right edge of the screen. */
  .product-detail-page .hdpe-hero-image,
  .product-detail-page .hdpe-hero-image img {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Spec tables: value column could run a few px past the card. */
  .hdpe-spec-row > * { min-width: 0 !important; overflow-wrap: anywhere; }
}

/* ---------- Pond Liners ---------- */

@media (max-width: 900px) {
  /* Hero was only ~120px tall (image height:auto), so the text and
     buttons were cut off. Give it room and let the photo cover. */
  html body.pond-page .pond-hero {
    min-height: 520px !important;
    overflow: hidden !important;
  }
  html body.pond-page .pond-hero .pond-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 65% center !important;
  }
  html body.pond-page .grow-hero-content {
    background: linear-gradient(180deg, rgba(2,23,50,.45) 0%, rgba(2,23,50,.82) 100%) !important;
    padding-top: 90px !important;
  }
  html body.pond-page .grow-hero-content .hero-copy { margin-left: 0 !important; padding: 20px !important; }
  html body.pond-page .grow-hero-content .buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 18px !important; }

  /* Range cards: stack, and show the whole image (it contains text). */
  html body.pond-page .pond-product-card,
  html body.pond-page .pond-product-image,
  html body.pond-page .pond-product-image img { min-height: 0 !important; height: auto !important; }
  html body.pond-page .pond-structure-showcase .pond-structure-title { font-size: 28px !important; }
}

@media (max-width: 700px) {
  /* Structure: two tiny images → one per row. */
  html body.pond-page .pond-structure-showcase .pond-structure-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body.pond-page .pond-range-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Applications: 4 columns at 375px collapsed to nothing. */
  html body.pond-page .pond-app-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  html body.pond-page .pond-app-card { transform: none !important; margin: 0 !important; }
  html body.pond-page .pond-app-card figcaption { font-size: 11.5px !important; padding: 8px 6px 10px !important; }
  html body.pond-page .pond-section-title { font-size: 26px !important; }
}

@media (min-width: 701px) and (max-width: 900px) {
  html body.pond-page .pond-app-grid { grid-template-columns: repeat(3, 1fr) !important; }
  html body.pond-page .pond-app-card { transform: none !important; margin: 0 !important; }
}

/* ---------- Fumigation Covers ---------- */

@media (max-width: 600px) {
  /* Hero text sat directly on the busy photo (and its printed signage). */
  .hero > .shade {
    background: linear-gradient(180deg, rgba(2,23,50,.55) 0%, rgba(2,23,50,.88) 100%) !important;
  }
  .hero > .heroText .buttons { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  .hero > .heroText .buttons .btn { flex: 1 1 140px; text-align: center; }
}

/* ---------- Tablet (601–900px) ---------- */

@media (min-width: 601px) and (max-width: 900px) {
  /* Brand cards were two narrow columns with text squeezed to ~70px. */
  .brands-v40 .brands-v40-grid {
    grid-template-columns: 1fr !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .brands-v40 .brands-v40-footer { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
}

/* ---------- Brand logos (all screen sizes) ----------
   Light-background logo in the header, dark-background logo on navy
   surfaces. Both are transparent PNGs so they sit cleanly on any surface. */
.header-premium-logo img {
  height: auto !important;
  max-height: 84px !important;
  object-fit: contain !important;
}
.footer-brand img,
.mfg-spt-logo img {
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
}
.footer-brand img { width: 300px !important; max-width: 100% !important; }
html body .manufacturing-v22 .mfg-spt-logo img {
  transform: none !important;
  width: min(100%, 260px) !important;
  height: auto !important;
  max-height: none !important;
}
.header-premium-logo { justify-content: center !important; }

@media (max-width: 900px) {
  .header-premium-logo,
  .header-premium-logo img { width: 175px !important; flex-basis: 175px !important; max-height: 56px !important; }
}
@media (max-width: 400px) {
  .header-premium-logo,
  .header-premium-logo img { width: 155px !important; flex-basis: 155px !important; }
}

/* The in-menu "Request a Quote" copy is for the mobile menu only; on
   desktop it showed as a duplicate link tucked under the header button. */
@media (min-width: 901px) {
  html body .header-premium .header-premium-nav > .header-premium-quote-mobile { display: none !important; }
}

/* ---------- Header on laptop / tablet-landscape widths (901–1380px) ----------
   Logo, menu and Enquire button collided between ~960px and 1280px
   (homepage worst, as its menu font is larger). Scale them down to fit. */
@media (min-width: 901px) and (max-width: 1380px) {
  html body .header-premium .header-premium-inner { gap: 14px !important; }
  html body .header-premium .header-premium-logo,
  html body .header-premium .header-premium-logo img { width: 200px !important; flex-basis: 200px !important; flex-shrink: 0 !important; }
  html body .header-premium .header-premium-nav { gap: 16px !important; }
  html body .header-premium .header-premium-nav > a,
  html body .header-premium .header-premium-nav .nav-products-toggle { font-size: 13px !important; }
  html body .header-premium .header-premium-quote { font-size: 10px !important; padding: 0 14px !important; min-width: 0 !important; width: auto !important; flex-shrink: 0 !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html body .header-premium .header-premium-logo,
  html body .header-premium .header-premium-logo img { width: 165px !important; flex-basis: 165px !important; }
  html body .header-premium .header-premium-nav { gap: 11px !important; }
  html body .header-premium .header-premium-nav > a,
  html body .header-premium .header-premium-nav .nav-products-toggle { font-size: 11.5px !important; }
  html body .header-premium .header-premium-quote { padding: 0 10px !important; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  html body .header-premium .header-premium-inner { gap: 10px !important; padding-left: 20px !important; padding-right: 20px !important; }
  html body .header-premium .header-premium-logo,
  html body .header-premium .header-premium-logo img { width: 150px !important; flex-basis: 150px !important; }
  html body .header-premium .header-premium-nav { gap: 9px !important; }
  html body .header-premium .header-premium-nav > a,
  html body .header-premium .header-premium-nav .nav-products-toggle { font-size: 11px !important; }
}

/* ---------- Compact footer on tablet & phone (≤ 900px) ----------
   The stacked footer was ~990px tall on phones (taller than a screen) and
   the homepage used larger text/logo than the product pages. Same compact
   layout on every page: logo + blurb, Quick Links and Products side by
   side, Contact below, smaller type and tighter spacing. */
@media (max-width: 900px) {
  html body footer.footer.footer-v30 { padding-top: 36px !important; }
  html body footer.footer.footer-v30 .footer-v30-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 22px 24px !important;
    padding-bottom: 24px !important;
  }
  html body footer.footer.footer-v30 .footer-brand { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; gap: 24px !important; }
  html body footer.footer.footer-v30 .footer-brand img { width: 200px !important; max-width: 45% !important; height: auto !important; flex: none !important; margin: 0 !important; }
  html body footer.footer.footer-v30 .footer-brand p { margin: 0 !important; font-size: 13px !important; line-height: 1.55 !important; max-width: none !important; }
  html body footer.footer.footer-v30 .footer-col { gap: 7px !important; }
  html body footer.footer.footer-v30 .footer-col h4 { font-size: 12px !important; letter-spacing: .6px !important; margin: 0 0 4px !important; }
  html body footer.footer.footer-v30 .footer-col a,
  html body footer.footer.footer-v30 .footer-col span { font-size: 13px !important; line-height: 1.35 !important; }
  html body footer.footer.footer-v30 .footer-contact a:first-of-type { font-size: 14px !important; }
  html body footer.footer.footer-v30 .footer-v30-bottom { padding: 14px 0 !important; font-size: 11px !important; }
}

@media (max-width: 600px) {
  html body footer.footer.footer-v30 { padding-top: 30px !important; }
  html body footer.footer.footer-v30 .footer-v30-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 18px !important; padding-bottom: 20px !important; }
  html body footer.footer.footer-v30 .footer-brand { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  html body footer.footer.footer-v30 .footer-brand img { width: 170px !important; max-width: 60% !important; }
  html body footer.footer.footer-v30 .footer-col a,
  html body footer.footer.footer-v30 .footer-col span { font-size: 12.5px !important; }
  html body footer.footer.footer-v30 .footer-contact { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px 18px !important; }
  html body footer.footer.footer-v30 .footer-contact h4 { grid-column: 1 / -1 !important; }
  html body footer.footer.footer-v30 .footer-v30-bottom { flex-direction: column !important; gap: 4px !important; padding-bottom: 80px !important; }
}