/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* ---- Widescreen refinement ---- */
@media (min-width: 1600px) {
  :root { --edge: 100px; }
}

/* ---- Desktop / small desktop ---- */
@media (max-width: 1240px) {
  .featured-grid { grid-template-columns: repeat(3, 1fr); }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet ---- */
@media (max-width: 980px) {
  .site-nav__links { display: none; }
  .site-nav__social { display: none; }
  .nav-toggle { display: flex; }
  .why-item--feature { grid-template-columns: 1fr; }
  .why-item--feature__media { min-height: 200px; }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 120px;
    text-align: left;
  }
  .hero__vinyl-wrap { order: -1; margin-bottom: 10px; }
  .vinyl { --vinyl-size: min(58vw, 340px); }

  .sell-grid, .about-grid, .deepcuts__layout, .contact-grid, .crate-page__layout, .product-detail {
    grid-template-columns: 1fr;
  }
  .deepcuts__layout { direction: ltr; }
  .deepcuts__media { order: -1; aspect-ratio: 16/10; }
  .summary-card { position: static; }

  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  .form-grid { grid-template-columns: 1fr; }

  .section { padding: 90px var(--edge); }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .site-nav { padding: 18px 18px; }
  .site-nav.is-scrolled { padding: 12px 18px; }
  :root { --edge: 18px; }

  /* Nav search: on narrow screens the expanded field would otherwise
     get squeezed between the crate link and hamburger, or overflow the
     viewport. Instead it drops down as a full-width bar just under the
     nav, positioned relative to the viewport rather than the icon. */
  .nav-search__form {
    position: fixed;
    top: 64px;
    left: 14px;
    right: 14px;
    width: auto !important;
    height: 46px;
  }
  .nav-search.is-open .nav-search__form { padding: 0 16px; }

  .hero { min-height: 100svh; }
  .hero__inner { padding-top: 110px; padding-bottom: 60px; gap: 20px; }
  .hero__headline { font-size: 2.3rem; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
  .hero__scroll-cue { display: none; }

  .section { padding: 64px var(--edge); }
  .section__head-row { align-items: flex-start; }

  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .record-card__body { padding: 14px 14px 16px; }
  .record-card__title { font-size: 1rem; }
  .record-card__add { width: 36px; height: 36px; }

  .why-grid { grid-template-columns: 1fr; }

  .collection-toolbar { padding: 14px 18px; }
  .toolbar-result-count { order: 10; width: 100%; margin-left: 0; }

  .crate-drawer { width: 100vw; }
  .crate-item, .crate-page .crate-item { grid-template-columns: 60px 1fr; }
  .crate-item__price { grid-column: 2; text-align: left; margin-top: 6px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-brand { grid-column: 1 / -1; }

  .whatsapp-fab { right: 14px; bottom: 14px; }
  .whatsapp-fab__label { display: none; }
  .whatsapp-fab:hover .whatsapp-fab__label { max-width: 0; }

  .mobile-menu__links a { font-size: 1.5rem; }
}

/* Custom cursor only on fine-pointer, hover-capable devices */
@media (hover: none), (pointer: coarse) {
  .bv-cursor { display: none !important; }
  html, body { cursor: auto; }
}