/* Wholesale Parts and Garage Equipment on phones: the same card display as the Cars page.
   Grid (2 per row, default) / List / Large cards, with the app's own Filters button and panel kept.
   The app's utility classes are !important and sit in CSS layers, so these rules live in the "mmc-first" layer,
   which parts.php / gequipments.php declare before the app's stylesheet. */
@layer mmc-first {
  .mmc-pv-bar { display: none !important; }

  @media (max-width: 639px) {
    /* Filters button + view switch on one row */
    .mmc-pv-bar { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 14px !important; }
    .mmc-pv-bar > button.mmc-filters { margin: 0 !important; height: 44px !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 13px !important; }
    .mmc-pv-bar .mmc-switch { margin-inline-start: auto !important; display: flex !important; gap: 4px !important; }
    .mmc-pv-bar .mmc-switch button {
      width: 44px !important; height: 44px !important; border-radius: 10px !important; border: 1px solid #d9d6cc !important; background: #fff !important; color: #555 !important;
      display: grid !important; place-items: center !important; padding: 0 !important; cursor: pointer !important;
    }
    .mmc-pv-bar .mmc-switch button[aria-pressed="true"] { background: #dd1a22 !important; border-color: #dd1a22 !important; color: #fff !important; }
    .mmc-pv-bar svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; }

    /* ---- compact cards (Grid and List) ---- */
    #root.mmc-pv-grid main .mmc-pgrid > article,
    #root.mmc-pv-list main .mmc-pgrid > article { border-radius: 12px !important; box-shadow: none !important; transform: none !important; }
    #root.mmc-pv-grid main .mmc-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    #root.mmc-pv-list main .mmc-pgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }

    /* photo */
    #root.mmc-pv-grid main .mmc-pgrid > article > a:first-child,
    #root.mmc-pv-list main .mmc-pgrid > article > a:first-child { height: auto !important; aspect-ratio: 4 / 3 !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article > a:first-child img,
    #root.mmc-pv-list main .mmc-pgrid > article > a:first-child img { opacity: 1 !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article > a:first-child > button,
    #root.mmc-pv-list main .mmc-pgrid > article > a:first-child > button { width: 28px !important; height: 28px !important; top: 6px !important; right: 6px !important; }
    html[dir="rtl"] #root.mmc-pv-grid main .mmc-pgrid > article > a:first-child > button,
    html[dir="rtl"] #root.mmc-pv-list main .mmc-pgrid > article > a:first-child > button { right: auto !important; left: 6px !important; }

    /* body: price on top, then the name, then the category */
    #root.mmc-pv-grid main .mmc-pgrid > article > div:nth-child(2),
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) { padding: 10px !important; display: flex !important; flex-direction: column !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"],
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] { order: -1 !important; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; }
    /* inside the old supplier box keep only the price */
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(1),
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(2),
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) > :not(:first-child),
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(1),
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(2),
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) > :not(:first-child) { display: none !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3),
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) { margin: 0 !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) > :first-child,
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) > :first-child { font-size: 14.5px !important; line-height: 1.2 !important; }
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="bg-slate-50"] > div:nth-child(3) > :first-child { font-size: 16px !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article > div:nth-child(2) > a { min-height: 0 !important; font-size: 12.5px !important; line-height: 1.25 !important; -webkit-line-clamp: 1 !important; margin: 0 !important; order: 0 !important; }
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) > a { min-height: 0 !important; font-size: 14px !important; line-height: 1.25 !important; -webkit-line-clamp: 2 !important; margin: 0 !important; order: 0 !important; }
    /* category tag as a plain grey line under the name */
    #root.mmc-pv-grid main .mmc-pgrid > article > div:nth-child(2) > div[class*="mb-1"],
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) > div[class*="mb-1"] { order: 1 !important; margin: 2px 0 0 !important; }
    #root.mmc-pv-grid main .mmc-pgrid > article > div:nth-child(2) > div[class*="mb-1"] > span,
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) > div[class*="mb-1"] > span { background: none !important; border: 0 !important; padding: 0 !important; font-size: 11px !important; font-weight: 400 !important; color: #6b6e76 !important; }
    /* part number / other small lines stay out of the compact card */
    #root.mmc-pv-grid main .mmc-pgrid > article > div:nth-child(2) > :not(a):not(div[class*="mb-1"]):not(div[class*="bg-slate-50"]):not(div[class*="mt-auto"]),
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) > :not(a):not(div[class*="mb-1"]):not(div[class*="bg-slate-50"]):not(div[class*="mt-auto"]) { display: none !important; }
    /* the four buttons live on the product page */
    #root.mmc-pv-grid main .mmc-pgrid > article div[class*="mt-auto"],
    #root.mmc-pv-list main .mmc-pgrid > article div[class*="mt-auto"] { display: none !important; }

    /* list: photo on one side */
    #root.mmc-pv-list main .mmc-pgrid > article { flex-direction: row !important; }
    #root.mmc-pv-list main .mmc-pgrid > article > a:first-child { width: 42% !important; flex: 0 0 42% !important; aspect-ratio: 4 / 3 !important; }
    #root.mmc-pv-list main .mmc-pgrid > article > div:nth-child(2) { flex: 1 1 auto !important; min-width: 0 !important; justify-content: center !important; }


    /* ---- Suppliers tab: one card per row, text that fits ---- */
    #root main .mmc-sgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    #root main .mmc-sgrid > article { padding: 16px !important; border-radius: 14px !important; }
    #root main .mmc-sgrid > article > div:first-child { gap: 12px !important; }
    #root main .mmc-sgrid > article > div:first-child > div:first-child { width: 52px !important; height: 52px !important; font-size: 17px !important; }
    #root main .mmc-sgrid > article > div:first-child a { font-size: 16px !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; }
    #root main .mmc-sgrid > article [class*="rounded-full"][class*="bg-emerald-50"] { white-space: nowrap !important; }
    #root main .mmc-sgrid > article .mmc-empty { display: none !important; }
    #root main .mmc-sgrid > article div[class*="grid-cols-2"][class*="mt-4"]:not([class*="border-t"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; }
    #root main .mmc-sgrid > article div[class*="border-t"] { gap: 8px !important; }
    #root main .mmc-sgrid > article div[class*="border-t"] > * { min-height: 42px !important; padding-inline: 8px !important; font-size: 12.5px !important; }
    .mmc-pv-bar.mmc-nosw .mmc-switch { display: none !important; }
    /* the red "scale to 480+ suppliers" banner: its heading was dark on red */
    #root main div[class*="from-red"] :is(h1, h2, h3, h4) { color: #fff !important; }

    /* ---- large cards: the current card, a little tighter ---- */
    #root.mmc-pv-big main .mmc-pgrid > article > a:first-child { height: auto !important; aspect-ratio: 16 / 10 !important; }
  }
}