/* Marquis Leo — mobile layout, shared by every page.
   Pages are styled inline, so these rules match the inline grid declarations
   and override them on phones. Product/artwork grids go two-up; side-by-side
   splits stack. Small label rows (icon + text) are left alone. */

html, body { overflow-x: clip; }

@media (max-width: 760px) {
  /* product, artwork and collection grids: two side by side */
  html body [style*="grid-template-columns: repeat(3"],
  html body [style*="grid-template-columns: repeat(4"],
  html body [style*="grid-template-columns: repeat(5"],
  html body [style*="grid-template-columns: repeat(6"],
  html body [style*="grid-template-columns: repeat(auto-fill"],
  html body [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 22px !important;
  }
  html body [style*="grid-template-columns: repeat(2"] {
    column-gap: 8px !important;
  }

  /* two-panel splits (image + text, sidebar + content): stack */
  html body [style*="grid-template-columns: 1fr 1fr"],
  html body [style*="grid-template-columns: 1fr 2fr"],
  html body [style*="grid-template-columns: 1fr 1.15fr"],
  html body [style*="grid-template-columns: 1.05fr 1fr"],
  html body [style*="grid-template-columns: 1.1fr 0.9fr"],
  html body [style*="grid-template-columns: 1.35fr"],
  html body [style*="grid-template-columns: 1.4fr 2.9fr"],
  html body [style*="grid-template-columns: 0.9fr 1.1fr"],
  html body [style*="grid-template-columns: minmax(0, 1fr) minmax(0"],
  html body [style*="grid-template-columns: minmax(0, 0."],
  html body [style*="grid-template-columns: minmax(0, 1.1fr)"],
  html body [style*="grid-template-columns: minmax(0, 1.25fr)"],
  html body [style*="grid-template-columns: minmax(0, 1.35fr)"],
  html body [style*="grid-template-columns: minmax(0, 1fr) 320px"],
  html body [style*="grid-template-columns: 250px minmax"],
  html body [style*="grid-template-columns: 260px minmax"],
  html body [style*="grid-template-columns: 150px minmax"],
  html body [style*="grid-template-columns: 140px minmax"],
  html body [style*="grid-template-columns: 130px minmax"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* section header rows (heading + CTA): stack so the button never runs off-screen */
  html body [style*="grid-template-columns: 1fr auto; gap: 26px"],
  html body [style*="grid-template-columns: 1fr auto; gap: clamp"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
  }
  html body a[style*="white-space: nowrap"] { white-space: normal !important; max-width: 100%; }

  /* pinned product images become normal on phones */
  html body .pcmedia, html body .pdmedia { position: static !important; }

  /* long horizontal rails: keep cards a comfortable phone width */
  html body .pcrail > *, html body .rail > * { flex-basis: 72vw !important; }

  /* nothing wider than the screen */
  html body img, html body video { max-width: 100%; }
}

@media (max-width: 380px) {
  html body [style*="grid-template-columns: repeat("] { column-gap: 6px !important; }
}

/* spec tables: label above value on phones */
@media (max-width: 760px) {
  html body [style*="grid-template-columns: 150px minmax"], html body [style*="grid-template-columns: 140px minmax"], html body [style*="grid-template-columns: 130px minmax"] { row-gap: 4px !important; }
}

/* ---------- phone polish: readable type, real touch targets, no iOS zoom ---------- */
@media (max-width: 760px) {
  /* tiny uppercase labels (8–9.5px on desktop) read at 10.5px on phones */
  html body [style*="font-size: 8px"], html body [style*="font-size: 8.5px"],
  html body [style*="font-size: 9px"], html body [style*="font-size: 9.5px"] {
    font-size: 10.5px !important;
  }
  /* inputs at 16px so iOS Safari never zooms the page when one is tapped */
  html body select, html body input, html body textarea { font-size: 16px !important; }
  html body select { min-height: 46px; }

  /* artwork / product page */
  html body .pcgrid { gap: 22px !important; }
  html body .pcmedia { margin-left: calc(-1 * clamp(20px, 3vw, 48px)); margin-right: calc(-1 * clamp(20px, 3vw, 48px)); }
  html body .pcstage { height: auto !important; aspect-ratio: 4 / 5; max-height: 78vh; }
  html body .pcgrid button { min-height: 40px; }
  html body .pcgrid button[aria-label][style*="border-radius: 50%"] { min-width: 40px; min-height: 40px; }
  html body .pcrail > * { flex-basis: 64vw !important; }

  /* every artwork banner: shorter, title never wider than the screen */
  html body [style*="font-family: 'Bodoni Moda'"][style*="text-transform: uppercase"] {
    overflow-wrap: anywhere; word-break: normal;
  }
}
@media (max-width: 380px) {
  html body .pcstage { aspect-ratio: 3 / 4; }
}

/* ---------- homepage hero on phones ---------- */
@media (max-width: 760px) {
  html body .hero { height: 78svh !important; min-height: 520px !important; max-height: 720px; }
  html body .herocopy { top: 60% !important; width: calc(100vw - 40px) !important; }
  html body .hh1 { font-size: clamp(34px, 10.4vw, 46px) !important; letter-spacing: 0.04em !important; margin-bottom: 14px !important; }
  html body .herocopy p { font-size: 18px !important; margin-bottom: 24px !important; }
  html body .herocopy a { padding: 15px 22px !important; font-size: 10px !important; }
}
@media (max-width: 380px) {
  html body .hero { min-height: 480px !important; }
  html body .hh1 { font-size: 32px !important; }
}