/* ==========================================================================
   RESPONSIVE — mobile-first overrides
   Breakpoints: 1280 / 1024 / 768 / 480 / 380
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1280px
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .footer__contact-col { grid-column: 1 / -1; }
  .footer__map iframe { height: 220px; }
}

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 74px; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 3.5rem);
  }
  .hero__content { max-width: 100%; }
  .hero__media { max-width: 560px; margin-inline: auto; width: 100%; }
  .hero__frame img { height: clamp(380px, 52vh, 520px); }
  .hero__offset { inset: 20px -20px -20px 20px; }
  .hero__chip { left: 12px; bottom: 22px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media img { max-height: 460px; }

  .trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .trust-item:nth-child(2) { border-right: none; }

  .reviews__head { flex-direction: column; align-items: stretch; }
  .rating-summary { flex-direction: column; align-items: stretch; text-align: center; }
  .rating-summary__score {
    padding-right: 0;
    padding-bottom: var(--space-md);
    border-right: none;
    border-bottom: 1px solid var(--smoke);
  }
}

/* --------------------------------------------------------------------------
   ≤ 900px — swap desktop nav for the overlay menu
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__actions .btn--header { display: none; }
}

/* --------------------------------------------------------------------------
   ≤ 768px — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Room for the sticky action bar so it never covers the footer */
  body { padding-bottom: 76px; }

  .mobile-actions { display: flex; }

  .to-top { bottom: calc(76px + var(--space-sm)); right: var(--space-sm); }

  /* Top bar collapses to phone + socials */
  .topbar__inner {
    justify-content: space-between;
    gap: var(--space-sm);
  }
  .topbar__item--address,
  .topbar__item--hours { display: none; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__frame img { height: clamp(340px, 46vh, 440px); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__proof { gap: var(--space-sm); }

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

  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .process__step { padding-left: 68px; }
  .process__num { width: 46px; height: 46px; }
  .process__rail { left: 22px; }
  .process__ticks { left: 15px; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__bottom { flex-direction: column; text-align: center; gap: 0.6rem; }
  .footer__legal { justify-content: center; }

  .cta-band__actions .btn { flex: 1 1 100%; }

  .lightbox { padding: var(--space-sm); }
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__btn { width: 46px; height: 46px; }
  .lightbox__close { top: 8px; right: 8px; }

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

  .rating-summary { padding: var(--space-md); }
  .filter-tabs { gap: 0.4rem; }
  .filter-tab { padding: 0.5rem 0.9rem; font-size: var(--step--2); }
}

/* --------------------------------------------------------------------------
   ≤ 560px
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { border-right: none; padding-inline: 0; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .stat { padding: var(--space-md) var(--space-sm); }

  .hero__chip { position: static; margin-top: var(--space-sm); }
  .hero__offset { display: none; }

  .popup__card { padding: var(--space-lg) var(--space-md); }
  .popup__logo { height: 62px; }
}

/* --------------------------------------------------------------------------
   ≤ 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 1.15rem; }

  .brand img { height: 44px; }
  .header.is-scrolled .brand img { height: 38px; }

  .topbar { font-size: 0.7rem; }
  /* keep the 44px tap target while shrinking the visible ring */
  .social-link { width: 44px; height: 44px; }
  .social-link svg { width: 15px; height: 15px; }

  .btn { padding: 0.85rem 1.4rem; font-size: var(--step--2); }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .swatch__weave { height: 88px; }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .product__body { flex-direction: column; gap: 0.15rem; padding: 0.7rem; }
  .product__name { font-size: var(--step--2); }
  .product__price { font-size: var(--step-0); }

  .mobile-menu__link { font-size: var(--step-1); min-height: 52px; }

  .review-card { padding: var(--space-md); }
  .form-panel { padding: var(--space-md); }
}

/* --------------------------------------------------------------------------
   ≤ 380px — smallest supported
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .trust-strip__grid { grid-template-columns: 1fr; }
  .mobile-actions__btn { font-size: 0.7rem; gap: 0.35rem; }
  .mobile-actions__btn svg { width: 17px; height: 17px; }
  .rating-summary__num { font-size: var(--step-4); }
}

/* --------------------------------------------------------------------------
   Hover-capable devices only — avoid sticky hover on touch
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover,
  .tile:hover,
  .review-card:hover,
  .stat:hover,
  .gallery-item:hover {
    transform: none;
  }
  .tile:hover .tile__media img,
  .gallery-item:hover img { transform: none; }
  .gallery-item__overlay { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Landscape phones — keep hero from overflowing
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: var(--space-lg); }
  .hero__frame img { height: 300px; }
  .preloader__mark { height: 72px; }
  .popup__card { max-height: 94vh; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .topbar,
  .header,
  .mobile-actions,
  .to-top,
  .popup,
  .preloader,
  .cta-band,
  .video-facade,
  .mobile-menu { display: none !important; }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}