/* EcoSafe responsive correction layer — load AFTER style.css */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }
.wrap, .section > .wrap, main, section { min-width: 0; }
.product-grid, .category-grid, .tech-grid, .steps, .quick-grid,
.testimonial-grid, .benefit-grid, .why-ecosafe-grid { min-width: 0; width: 100%; }
.product-card, .category-card, .tech-card, .step-card, .testimonial-card { min-width: 0; max-width: 100%; }
.product-card { width: 100%; }
.product-card .product-title, .product-card .product-name { overflow-wrap: anywhere; word-break: normal; }
.product-card .product-actions, .product-card .product-actions .btn,
.product-card .btn, .product-card .enquiry-btn { min-width: 0; max-width: 100%; }
.product-card .product-actions .btn, .product-card .btn { white-space: normal; overflow-wrap: anywhere; text-align: center; justify-content: center; }
.category-card { width: 100%; }
@media screen and (max-width: 700px) {
  .wrap { width: auto !important; max-width: 100% !important; margin-left: 16px !important; margin-right: 16px !important; }
  #productGrid.product-grid, #featuredGrid.product-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  #productGrid.product-grid > *, #featuredGrid.product-grid > * {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    margin: 0 !important; justify-self: stretch !important;
  }
  #productGrid .product-img, #featuredGrid .product-img {
    width: 100% !important; min-width: 0 !important; flex-basis: auto !important;
    height: clamp(105px, 31vw, 165px) !important; min-height: 0 !important;
  }
  #productGrid .product-img img, #featuredGrid .product-img img {
    width: 100% !important; height: 100% !important; object-fit: contain !important;
  }
  #productGrid .product-body, #featuredGrid .product-body { min-width: 0 !important; padding: 10px !important; }
  #productGrid .product-title, #featuredGrid .product-title {
    min-width: 0 !important; max-width: 100% !important; height: auto !important;
    min-height: 2.8em !important; max-height: 4.2em !important; white-space: normal !important;
    overflow: hidden !important; overflow-wrap: anywhere !important; font-size: clamp(11px, 3vw, 14px) !important;
  }
  #productGrid .price-line, #featuredGrid .price-line { display: flex !important; flex-wrap: wrap !important; height: auto !important; min-height: 48px !important; gap: 5px !important; align-items: baseline !important; }
  #productGrid .price, #featuredGrid .price { font-size: clamp(15px, 4vw, 20px) !important; }
  #productGrid .mrp, #featuredGrid .mrp, #productGrid .price-note, #featuredGrid .price-note { font-size: 10px !important; }
  #productGrid .product-actions, #featuredGrid .product-actions { display: block !important; width: 100% !important; min-width: 0 !important; }
  #productGrid .product-actions .btn, #featuredGrid .product-actions .btn,
  #productGrid .product-actions a, #featuredGrid .product-actions a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important; min-height: 44px !important; padding: 10px 5px !important;
    font-size: clamp(10px, 2.8vw, 13px) !important; line-height: 1.25 !important;
    white-space: normal !important; overflow-wrap: anywhere !important; text-align: center !important;
  }
  #productGrid .market-links, #featuredGrid .market-links { display: flex !important; justify-content: space-around !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; }
  #productGrid .market-links .market-icon, #featuredGrid .market-links .market-icon { flex: 0 1 30px !important; width: 30px !important; height: 30px !important; min-width: 24px !important; min-height: 24px !important; }
  .category-grid, .tech-grid, .steps, .quick-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important; max-width: 100% !important; gap: 10px !important;
  }
  .category-grid > *, .tech-grid > *, .steps > *, .quick-grid > * {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    margin: 0 !important; justify-self: stretch !important; overflow-wrap: anywhere !important;
  }
  .category-card { padding: 14px !important; }
  .category-card h3, .category-card p, .category-card span { min-width: 0 !important; overflow-wrap: anywhere !important; }
  .testimonial-grid { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; }
  .cta-inner { min-width: 0 !important; }
  .cta-inner > *, .cta-inner .btn { max-width: 100% !important; min-width: 0 !important; }
  .header-inner { min-width: 0 !important; }
  .logo-box { max-width: 42vw !important; }
}
@media screen and (max-width: 380px) {
  .wrap { margin-left: 12px !important; margin-right: 12px !important; }
  #productGrid.product-grid, #featuredGrid.product-grid { gap: 8px !important; }
  #productGrid .product-body, #featuredGrid .product-body { padding: 8px !important; }
  #productGrid .product-actions .btn, #featuredGrid .product-actions .btn { font-size: 10px !important; padding: 9px 3px !important; }
  .category-grid, .tech-grid, .steps, .quick-grid { grid-template-columns: 1fr !important; }
  .category-card { width: 100% !important; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
  #productGrid.product-grid, #featuredGrid.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
  .category-grid, .tech-grid, .steps, .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* Android 11 / narrow viewport corrections (must remain last in the cascade) */
@media screen and (max-width: 700px) {
  /* Marketplace logos must stay on one line inside narrow product cards. */
  #productGrid .market-links,
  #featuredGrid .market-links,
  .product-card .market-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #productGrid .market-links > *,
  #featuredGrid .market-links > *,
  .product-card .market-links > * {
    display: flex !important;
    flex: 0 1 30px !important;
    width: 30px !important;
    min-width: 0 !important;
    max-width: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #productGrid .market-icon,
  #featuredGrid .market-icon,
  .product-card .market-icon {
    display: grid !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  #productGrid .market-icon svg,
  #featuredGrid .market-icon svg,
  .product-card .market-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  /* The testimonial carousel used fixed desktop card widths, leaving empty space. */
  .testimonial-slider { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .testimonial-grid {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    transform: none !important;
    transition: none !important;
  }
  .testimonial-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px !important;
  }
  .testimonial-card blockquote,
  .testimonial-person,
  .testimonial-person > div { min-width: 0 !important; overflow-wrap: anywhere !important; }

  /* Keep CTA actions inside the blue panel on narrow screens. */
  .cta-inner { width: auto !important; max-width: 100% !important; }
  .cta-actions { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .cta-actions .btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
}

@media screen and (max-width: 380px) {
  /* Match the stable 381px layout: retain two columns down to narrow phones. */
  .category-grid, .tech-grid, .steps, .quick-grid, .benefit-grid, .why-ecosafe-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .category-grid > *, .tech-grid > *, .steps > *, .quick-grid > *,
  .benefit-grid > *, .why-ecosafe-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    overflow-wrap: anywhere !important;
  }
  .category-card { padding: 10px !important; }
  .category-card h3, .category-card p, .category-card span,
  .quick-grid h3, .quick-grid p, .benefit-grid h3, .benefit-grid p,
  .why-ecosafe-grid h3, .why-ecosafe-grid p {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .product-card .product-body { padding: 9px !important; }
  .product-card .market-links { gap: 2px !important; }
  .product-card .market-links > * { flex-basis: 27px !important; width: 27px !important; max-width: 27px !important; }
  .product-card .market-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; }
  .cta-inner { padding: 24px 16px !important; }
}