/* AbsoluteBuy phone fixes. The Claude Design pages set layout through inline styles and CSS variables;
   several pages had no phone values. Stylesheet !important beats the inline values. */
@media (max-width: 639px) {
  /* Footer: one column (four desktop columns pushed pages to ~520px wide and made phones zoom out) */
  [style*="--foot"] { --foot: 1fr !important; }

  /* Product page gallery: big main photo, thumbnails in a row underneath */
  [data-screen-label="Product hero"] { gap: 24px !important; }
  [data-screen-label="Product hero"] > div:first-child { position: static !important; display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px !important; }
  [data-screen-label="Product hero"] > div:first-child > div:first-child > div { flex-direction: row !important; max-height: none !important; overflow-x: auto !important; overflow-y: hidden !important; }
  [data-screen-label="Product hero"] > div:first-child > div:first-child button { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; }
  [data-screen-label="Product hero"] [role="button"] { border-radius: 16px !important; }
  [data-screen-label="Product hero"] [role="button"] > span[style*="bottom:16px"],
  [data-screen-label="Product hero"] [role="button"] > span[style*="bottom: 16px"] { display: none !important; }

  /* Product page story banner: phone-sized heading and cards */
  [data-screen-label="Storytelling banner"] { padding: 40px 0 !important; gap: 20px !important; }
  [data-screen-label="Storytelling banner"] h2 { font-size: 30px !important; line-height: 36px !important; }
  [data-screen-label="Storytelling banner"] > div:first-child > div { display: none !important; }
  [data-screen-label="Storytelling banner"] > div:nth-child(2) > div,
  [data-screen-label="Storytelling banner"] > div:nth-child(2) > figure { flex: 0 0 82% !important; height: 360px !important; }
  [data-screen-label="Storytelling banner"] > div:nth-child(2) > div > div[style*="dashed"] { font-size: 11px !important; text-align: center; padding: 0 12px; }

  /* Product page rows: one and a bit cards per view instead of five squeezed ones */
  [data-screen-label="You might also like"] > div:last-child > div,
  [data-screen-label="Recently viewed"] > div:last-child > div { flex: 0 0 72% !important; }
}