/* ux fold (part 58 "fold"): phone first-screen fixes from the 2026-09-26 conversion research
   (CLADEEE/ux-pro-max/conversion-research-2026-09-26.md). On a 390 x 844 phone the item photo started at 263 px and the
   title at 769 px because the header was 171 px and the breadcrumb wrapped. Baymard/NN/g: keep the mobile header compact,
   keep breadcrumbs, and show title, photo and price in the first screen. CSS only; no markup, copy or price change.
   Independent of the palette theme (part 99), so it can ship before the palette decision. */
@media (max-width:720px){
  /* header: same three rows (brand + quote, search, nav) with tighter spacing: ~171 px -> ~140 px */
  header.site.ux-chrome .hwrap{padding:6px 12px;gap:6px 8px}
  header.site.ux-chrome a.logo{min-height:40px}
  header.site.ux-chrome .qbtn{min-height:40px}
  header.site.ux-chrome .hsearch,header.site.ux-chrome #psearch{min-height:40px;height:40px}
  header.site.ux-chrome nav.main a{padding-top:8px;padding-bottom:8px;min-height:40px}
  /* breadcrumb on one line; the full trail stays in the markup and in BreadcrumbList data */
  main .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:20px;margin-bottom:8px}
  /* item gallery: a slightly shorter main photo, smaller thumbnails, hint moved into the photo corner */
  .pdp .gallery figure.main-photo img{max-height:300px}
  .pdp .gallery .thumbs{margin-top:8px}
  .pdp .gallery .thumbs img,.pdp .gallery .thumbs button,.pdp .gallery .thumbs a{max-width:56px;max-height:56px}
  .pdp .gallery .zoom-hint{display:none}
  .pdp .eyebrow{margin-top:4px}
  .pdp h1{margin-top:4px}
}