/* Wholesale Parts / Garage Equipment: product page and supplier page on phones.
   The app's styles are !important and sit in CSS layers, so these rules live in the "mmc-first" layer and are !important too. */
@layer mmc-first {
  @media (max-width: 639px) {
    /* nothing may be wider than the screen (the AI cards pushed the whole page to 484 px) */
    #root, #root > div { max-width: 100vw !important; overflow-x: clip !important; }
    #root div, #root section, #root article, #root a, #root p, #root span, #root ul { min-width: 0 !important; }
    #root div[class*="border-l-4"], #root div[class*="border-l-4"] * { max-width: 100% !important; box-sizing: border-box !important; }
    #root div[class*="border-l-4"] p, #root div[class*="border-l-4"] a { overflow-wrap: anywhere !important; text-align: start !important; }

    /* the dark "Back to Results" pill: same red button as the other pages */
    #root a[class*="bg-black"], #root button[class*="bg-black"] { background: #dd1a22 !important; color: #fff !important; border-color: #dd1a22 !important; }

    /* the supplier's pasted "Quick Details" text: one line per item instead of one grey block */
    #root p[class*="whitespace-pre"], #root p[class*="leading-relaxed"] { white-space: pre-line !important; text-align: start !important; font-size: 14px !important; line-height: 1.65 !important; }

    /* tap targets: breadcrumb, small links and buttons at least 40 px high */
    #root nav a, #root a[class*="text-xs"], #root button[class*="text-xs"], #root a[class*="text-sm"][class*="py-1"] { min-height: 40px !important; display: inline-flex !important; align-items: center !important; }
    #root button[class*="underline"], #root button[class*="text-indigo"], #root button[class*="text-violet"] { min-height: 40px !important; }
    #root main button[class*="rounded"], #root main a[class*="rounded"][class*="inline-flex"] { min-height: 40px !important; }
    #root .text-\[11px\], #root [class*="text-[10px]"] { font-size: 12px !important; }
  }
}