/* Responsive rules: mobile-first adjustments applied on top of main.css. */
@media (max-width: 1020px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-search .input { width: 170px; }
}
@media (max-width: 860px) {
  .color-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .color-hero-swatch { min-height: 190px; }
  .explorer { grid-template-columns: 1fr; padding: 1.1rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; row-gap: 0.5rem; padding-block: 0.5rem; }
  .header-search { order: 5; flex: 1 1 100%; margin-left: 0; }
  .header-search .input { width: 100%; flex: 1; }
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .js .site-nav { display: none; flex: 1 1 100%; order: 6; margin: 0; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--border); padding-top: 0.4rem; }
  .site-nav a { padding: 0.7rem 0.4rem; border-radius: 8px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .value-label { width: 5rem; }
  .hero-search { flex-direction: column; }
  .palette-colors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
  .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .consent { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .color-hero-swatch { font-size: 1.15rem; }
  .btn { padding: 0.7rem 1rem; }
  .palette-colors .hx { font-size: 0.68rem; }
  .table th, .table td { padding: 0.5rem 0.6rem; }
}
@media (max-width: 760px) { .scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }