@media (max-width: 1020px) {
  .nav-links {
    position: fixed;
    inset: 78px 0 auto auto;
    width: min(360px, 100%);
    height: calc(100vh - 78px);
    display: grid;
    align-content: start;
    gap: 0;
    padding: 22px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow);
  }
  body.nav-open .nav-links { transform: translateX(0); }
  .nav-links a { padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .menu-toggle { display: inline-grid; }
  .grid.four, .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-strip { position: static; }
  .hero {
    min-height: auto;
    background-position: 58% center;
    background-size: cover;
  }
  .hero > .container { padding-bottom: 54px; }
  .hero-strip .container, .trust-row { grid-template-columns: repeat(2, 1fr); }
  .detail-layout, .grid.two, .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 24px, var(--max)); }
  .section { padding: 58px 0; }
  .nav-shell { height: 68px; }
  .brand img { width: 46px; height: 46px; }
  .brand { font-size: 1rem; }
  .nav-links { inset: 68px 0 auto auto; height: calc(100vh - 68px); }
  .nav-actions .shop-link { display: none; }
  .hero > .container { padding: 46px 0 38px; }
  .hero {
    background-position: 62% center;
    background-size: auto, auto 100%;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 58%, rgba(255,255,255,0.48) 100%), url("../images/cocoedge-banner.png");
  }
  .hero-actions, .filters { align-items: stretch; flex-direction: column; }
  .btn, .filters input, .filters select { width: 100%; }
  .hero-strip .container { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
  .trust-row, .grid.four, .grid.three { grid-template-columns: 1fr; }
  .hero-strip { padding: 8px 0; }
  .mini-proof { min-height: 34px; gap: 7px; font-size: 0.82rem; }
  .mini-proof p { font-size: 0.68rem; }
  .mini-proof i { width: 20px; height: 20px; }
  .form .split { grid-template-columns: 1fr; }
  .milestone { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
  .floating-actions { right: 12px; bottom: 12px; }
}