/* ==========================================================================
   MAX BAGS MALL — Responsive Overrides (Stage 1: Loader + Hero)
   Mobile-first exceptions layered on top of the fluid clamp() base.
   ========================================================================== */

/* ---- Large tablets / small laptops ---- */
@media (max-width: 1100px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .hero__stage {
    order: -1;
    height: min(48vh, 420px);
  }

  .hero__brand-strip-names {
    white-space: normal;
  }
}

/* ---- Stage 2+ section grids ---- */
@media (max-width: 1100px) {
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .new-arrivals__grid { grid-template-columns: repeat(2, 1fr); }
  .all-arrivals__grid { grid-template-columns: repeat(2, 1fr); }
  .why-us__grid { grid-template-columns: repeat(3, 1fr); }
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { order: -1; }
  .instagram__grid { grid-template-columns: repeat(3, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Nav breakpoint ---- */
@media (max-width: 900px) {
  .navbar__links {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  /* The hide-on-scroll-down behavior (navbar.js) is a nice desktop touch,
     but on mobile there's no hover to warn the person the header just slid
     off-screen — they scroll deep into the page, tap where the hamburger
     used to be, and nothing happens because the whole header is now
     translated out of view. Keep the navbar always pinned on mobile so the
     menu toggle is reachable no matter how far down the page they are. */
  .navbar.is-hidden {
    transform: translateY(0);
  }
}

/* ---- Collections: native horizontal scroll on small screens instead of
        scroll-jacked pin (pinning fights native touch scroll on mobile) ---- */
@media (max-width: 768px) {
  .collections__pin {
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block: var(--sp-4);
  }

  .collections__track {
    transform: none !important;
  }

  .collection-card {
    width: 78vw;
    scroll-snap-align: center;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Tablets ---- */
@media (max-width: 820px) {
  .hero__title { letter-spacing: -0.02em; }

  .hero__beam { height: 2px; }

  .preloader__stage { gap: var(--sp-4); }
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .scroll-top {
    width: 44px;
    height: 44px;
    right: var(--sp-2);
    bottom: var(--sp-2);
  }

  .hero {
    height: 100svh;
  }

  .hero__content {
    padding-top: calc(var(--nav-height) + var(--sp-4));
  }

  .hero__cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-row .btn {
    width: 100%;
  }

  .hero__brand-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }

  .hero__stage {
    height: min(38vh, 320px);
  }

  .scroll-indicator {
    bottom: var(--sp-3);
  }

  .scroll-indicator__line {
    height: 38px;
  }

  /* Stage 2+ grids collapse to single column on phones */
  .brands__grid,
  .new-arrivals__grid,
  .all-arrivals__grid,
  .why-us__grid,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .all-arrivals__header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .all-arrivals__close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
  }

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

  .contact__form-row {
    grid-template-columns: 1fr;
  }

  .about__stats {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .section-title,
  .about__title,
  .contact__title {
    font-size: var(--fs-xl);
  }

  /* Custom cursor is disruptive on touch — hidden via JS device check too,
     this is the CSS-side backstop */
  .cursor, .cursor-ring {
    display: none;
  }

  body {
    cursor: auto;
  }
}

/* ---- Short viewports (landscape phones) ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero__content {
    grid-template-columns: 1fr 1fr;
    padding-top: var(--nav-height);
  }

  .hero__stage {
    order: 0;
    height: 90%;
  }

  .scroll-indicator {
    display: none;
  }
}

/* ---- High-density displays: sharpen the beam glow ---- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero__beam--red,
  .hero__beam--indigo {
    filter: blur(0.3px) drop-shadow(0 0 24px var(--max-red-glow));
  }
}