/* CHOCOLOCO responsive — no accidental page-wide horizontal scroll */
@media (max-width: 1100px) {
  .finder-results, .map-results, .also-grid, .lid-box, .cloud-grid { grid-template-columns: repeat(3, 1fr); }
  .gift-row { grid-template-columns: repeat(4, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .weekly-grid, .edit-row, .edit-row.reverse, .builder-grid, .wrapper-inner, .cart-layout, .contact-grid {
    grid-template-columns: 1fr;
  }
  .mag-grid { grid-template-columns: 1fr 1fr; }
  .mag-card.hero { grid-row: auto; }
  .crunch-mix { grid-template-columns: 1fr 1fr; }
  .crunch-hero { grid-row: auto; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .preview-stage { position: relative; top: 0; }
}

@media (max-width: 860px) {
  .header-row { grid-template-columns: auto 1fr auto; }
  .nav-main, .search-pill { display: none; }
  .burger { display: grid; }
  .finder-results, .map-results, .lid-box, .cloud-grid, .also-grid, .social-grid, .review-wrap-grid, .wish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .fruit-masonry { columns: 2; }
  .gift-row { grid-template-columns: repeat(2, 1fr); }
  .wall-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 80px; }
  .basket-row { grid-template-columns: 70px 1fr auto; }
  .news-row { flex-direction: column; }
  .factory-intro { min-height: auto; padding: 70px 16px 80px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .finder-results, .map-results, .lid-box, .cloud-grid, .also-grid, .social-grid,
  .review-wrap-grid, .wish-grid, .shop-grid, .gift-row {
    grid-template-columns: 1fr;
  }
  .fruit-masonry { columns: 1; }
  .mag-grid, .crunch-mix, .timeline, .foot-grid { grid-template-columns: 1fr; }
  .header-row { padding: 8px 12px 12px; gap: 8px; }
  .logo-type strong { font-size: 22px; }
  .map-node { width: 78px; height: 78px; font-size: 11px; }
  .wrap { width: min(100% - 20px, 1240px); }
  .tl-step::after { display: none; }
  .edit-copy h3 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .belt, .float-choco, .steam, .bean, .gear { animation: none !important; }
  html { scroll-behavior: auto; }
}