/* Phone-only catalog refinements. Loaded after the shared flow stylesheet. */
@media (max-width: 480px) {
  :is(.phx-product-index, .phx-product-detail) header {
    position: sticky !important;
    top: 0;
    padding-top: env(safe-area-inset-top);
  }

  :is(.phx-product-index, .phx-product-detail) header nav.container {
    width: 100% !important;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) 0.5rem
      max(0.75rem, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand quote"
      "links links";
    align-items: center !important;
    justify-items: stretch !important;
    gap: 0.375rem 0.75rem !important;
  }

  :is(.phx-product-index, .phx-product-detail) header .brand {
    grid-area: brand;
    justify-self: start;
    min-width: 0;
    font-size: 1.15rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  :is(.phx-product-index, .phx-product-detail) header .nav-links {
    grid-area: links;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem !important;
  }

  :is(.phx-product-index, .phx-product-detail) header .nav-links a {
    min-width: 0;
    min-height: 44px;
    padding: 0.375rem 0.25rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal !important;
  }

  :is(.phx-product-index, .phx-product-detail) header nav.container > .btn-primary {
    grid-area: quote;
    width: auto !important;
    min-height: 44px;
    padding: 0.5rem 0.75rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  :is(.phx-product-index, .phx-product-detail) main a.btn-primary,
  :is(.phx-product-index, .phx-product-detail) .city-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  :is(.phx-product-index, .phx-product-detail),
  :is(.phx-product-index, .phx-product-detail) *,
  :is(.phx-product-index, .phx-product-detail) *::before,
  :is(.phx-product-index, .phx-product-detail) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}