/* SOHA mobile QA hardening — shared across storefront, account, policies and admin. */
@media (max-width: 950px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  button, a { touch-action: manipulation; }

  /* Store menu + bag: reliable finger-sized controls. */
  .soha-menu-close,
  .soha-cart-close { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; }
  .soha-menu-secondary a { min-height: 44px !important; }
  .soha-qty button { width: 38px !important; height: 38px !important; }
  .soha-remove { min-height: 38px; display: inline-flex; align-items: center; }

  /* Product page / galleries. */
  .gallery-arrow { width: 44px !important; height: 44px !important; }
  .mini-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Footer, policy and small navigation links. */
  .footer a,
  .footer-links a { min-height: 40px; display: flex; align-items: center; }
  .back,
  .back-shop,
  .nav-right a,
  .bag-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cta { min-height: 52px; align-items: center; }

  /* Account page: prevent long order/customer data from forcing horizontal overflow. */
  .order-card,
  .order-card > div { min-width: 0; }
  .order-card strong,
  .order-card span,
  .order-card b { overflow-wrap: anywhere; }

  /* Admin: improve touch controls and stop iOS input zoom. */
  .stock-controls button { min-height: 44px !important; }
  .sf-btn,
  .soa-btn { min-height: 44px !important; }
  .sf-input { font-size: 16px !important; }
  .spa-select,
  .spa-input,
  .spa-textarea { font-size: 16px !important; }
  .spa-image-btn { min-height: 42px !important; }
  .status-btn,
  .filter,
  .range button { min-height: 40px; }
}

@media (max-width: 520px) {
  /* Account order history becomes a clean vertical card on narrow phones. */
  .order-card { flex-direction: column !important; gap: 10px !important; }
  .order-card > div:last-child { text-align: left !important; align-items: flex-start !important; }

  /* Fulfilment buttons are easier to read/use one per row on very small screens. */
  .sf-actions { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  /* Compact cart layout for 320–375px wide devices. */
  .soha-cart-head { padding-left: 16px !important; padding-right: 16px !important; }
  .soha-cart-items { padding-left: 16px !important; padding-right: 16px !important; }
  .soha-cart-foot { padding-left: 16px !important; padding-right: 16px !important; }
  .soha-cart-item { grid-template-columns: 76px minmax(0,1fr) !important; gap: 12px !important; }
  .soha-cart-thumb { width: 76px !important; height: 76px !important; }
  .soha-cart-row { flex-wrap: wrap !important; align-items: flex-start !important; }

  /* Keep large editorial headings inside very narrow screens. */
  .product-copy h3 { font-size: 44px !important; }
  .buy .title { font-size: 46px !important; }
  .admin-hero h1 { font-size: 52px !important; }
  .headline h2 { font-size: 46px !important; }
}

/* Phone landscape: avoid huge product panels / tiny cart sheets. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
  .soha-cart-drawer { height: 100svh !important; border-radius: 0 !important; }
  .gallery-frame { height: calc(100svh - 64px) !important; min-height: 300px !important; aspect-ratio: auto !important; }
  #soha-home .product-visual { height: calc(100svh - 64px) !important; min-height: 300px !important; aspect-ratio: auto !important; }
}