/* Phone use leads the layout; tablet and laptop grids retain useful density. */
.utility .utility-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  font-size: 11px;
  white-space: nowrap;
}
.utility-whatsapp strong { margin-left: 0; }
.utility .utility-whatsapp .icon { width: 16px; height: 16px; }
.header-quote, .filter-button { min-height: 44px; }
.product-add { min-height: 46px; }
.product-search input { font-size: 16px; }
.quote-tray .text-button { min-width: 44px; min-height: 44px; }

@media (max-width: 1180px) {
  .hero-product, .hero-coordinate { display: none; }
  .hero-visual { padding-bottom: 0; }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-image { height: 210px; }
  .product-image img { width: 200px; height: 175px; }
}

@media (max-width: 1000px) {
  .menu-toggle { display: grid; align-content: center; justify-items: center; width: 44px; height: 44px; padding: 8px; }
  .menu-toggle span { margin-block: 3px; }
  .header-quote { min-height: 44px; min-width: 44px; }
  .primary-nav a { min-height: 44px; }
  .product-search input { font-size: 16px; }
  .filter-button { min-height: 44px; }
}

@media (max-width: 680px) {
  .utility-inner { gap: 12px; }
  .utility .utility-whatsapp { gap: 6px; }
  .utility-whatsapp > span { display: none; }
  .utility .utility-whatsapp strong { font-size: 11px; }
  .menu-toggle { flex: 0 0 44px; }
  .header-quote { justify-content: center; }
  .product-info h3 { font-size: 16px; min-height: 0; line-height: 1.4; }
  .product-sku { font-size: 10px; overflow-wrap: anywhere; }
  .product-summary { font-size: 14px; line-height: 1.7; }
  .product-category { font-size: 9px; }
  .availability { font-size: 11px; line-height: 1.6; }
  .product-add { font-size: 13px; min-height: 46px; }
  .product-search { min-height: 48px; }
  .filter-button { font-size: 12px; padding-inline: 12px; }
  .catalogue-note { font-size: 12px; }
  .quote-tray .text-button { min-width: 44px; min-height: 44px; font-size: 12px; padding: 8px; }
  .quote-tray .button { min-height: 46px; font-size: 12px; }
  .quote-tray-inner { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .journal-read { min-height: 44px; }
  .solution-jump-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-grid > div > a { min-height: 44px; display: flex; align-items: center; margin-bottom: 2px; }
}

@media (max-width: 480px) {
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { justify-content: space-between; font-size: 14px; }
  .hero-visual { padding: 0; }
  .photo-caption strong { font-size: 12px; }
  .photo-caption span:not(.caption-icon) { font-size: 10px; }
  .products-heading h1 { font-size: clamp(36px, 10vw, 44px); }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .product-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .product-image { height: 140px; margin: 12px 0 12px 10px; }
  .product-image img { width: 82px; height: 120px; }
  .product-info { padding: 16px 14px; }
  .product-summary { margin-block: 10px 12px; }
  .product-skeleton { min-height: 260px; }
  .product-skeleton > div { height: 120px; }
  .quote-tray-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding-top: 9px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .quote-tray-inner > div { margin-right: 0; }
  .quote-tray-inner strong { font-size: 13px; }
  .quote-tray .button { grid-column: 1 / -1; justify-content: space-between; font-size: 13px; }
  .toast { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  body:has(.quote-tray:not([hidden])) { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 359px) {
  .utility-inner { gap: 6px; }
  .utility-inner > span { font-size: 9px; gap: 3px; }
  .utility .utility-whatsapp { gap: 4px; }
  .utility .utility-whatsapp strong { font-size: 10px; }
  .hero h1 { font-size: 44px; }
  .product-card { grid-template-columns: 76px minmax(0, 1fr); }
  .product-image { height: 120px; margin-left: 8px; }
  .product-image img { width: 66px; height: 100px; }
  .product-info { padding-inline: 12px; }
}