/* Mobile storefront ergonomics shared by source and production legacy pages. */

@media (max-width: 700px) {
  html {
    scroll-padding-top: 2rem;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
    overflow-x: clip;
  }

  .container,
  .checkout-page,
  .pd-container {
    min-width: 0;
  }

  button,
  input[type="button"],
  input[type="submit"],
  select,
  .nav-links a,
  .cart-btn,
  .btn-primary,
  .btn-outline,
  .btn-add-cart,
  .add-to-cart-btn,
  .checkout-button,
  .explore-btn,
  .sort-select,
  .category-item,
  .qty-btn {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 1.6rem;
  }

  .nav-links {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links a {
    align-items: center;
    display: inline-flex;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
    scroll-snap-align: start;
  }

  .cart-btn,
  .btn-primary,
  .btn-outline,
  .btn-add-cart,
  .add-to-cart-btn,
  .checkout-button,
  .explore-btn {
    align-items: center;
    justify-content: center;
  }

  .product-grid {
    gap: 2.4rem 1.2rem;
  }

  .product-card,
  .product-info,
  .shop-content,
  .pd-info {
    min-width: 0;
  }

  .product-card .product-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-card .btn-add-cart {
    width: 100%;
  }

  .category-list .category-item {
    align-items: center;
    display: flex;
    line-height: 1.35;
    padding: 0.9rem 1rem;
  }

  .sort-select,
  .shipping-destination select,
  .checkout-state-select {
    width: 100%;
  }

  .cart-wrapper {
    padding: 1.6rem;
  }

  .cart_table .col-img img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .cart_table .quantity-control,
  .pd-info .quantity-control {
    min-height: 48px;
  }

  .cart_table .qty-btn,
  .pd-info .qty-btn {
    height: 44px;
    min-width: 44px;
    width: 44px;
  }

  .cart_table .quantity-control .qty-input,
  .pd-info .quantity-control .qty-input {
    font-size: 1.6rem;
    min-height: 44px;
  }

  .shipping-methods li {
    min-height: 4.8rem;
  }

  .checkout-page {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .checkout-form,
  .order-summary,
  .pd-layout.glass-panel {
    min-width: 0;
    padding: 1.8rem 1.5rem;
  }

  .form-row {
    gap: 0.8rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .shipping-destination select {
    font-size: 1.6rem;
    min-height: 4.8rem;
  }

  .form-group textarea {
    min-height: 12rem;
  }

  .checkout-submit,
  .action-bar > button,
  .action-bar > a,
  .action-bar > .btn-primary,
  .action-bar > .btn-add-cart {
    min-height: 5rem;
    width: 100%;
  }

  .action-bar > a .add-to-cart-btn {
    min-height: 5rem;
    width: 100%;
  }

  .checkout-item,
  .checkout-totals,
  .cart_totals,
  .order-summary {
    overflow-wrap: anywhere;
  }

  .cart_totals .checkout-button {
    min-height: 5.2rem;
    width: 100%;
  }

  :where(button, a, input, select, textarea):focus-visible {
    outline: 0.3rem solid rgba(184, 67, 87, 0.65);
    outline-offset: 0.2rem;
  }
}

@media (max-width: 360px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card {
    max-width: 34rem;
    width: 100%;
  }

  .cart-wrapper,
  .checkout-form,
  .order-summary,
  .pd-layout.glass-panel {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .product-card:hover .product-img-wrap,
  .product-card:hover .product-img-wrap img,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-add-cart:hover,
  .checkout-button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}