/* ==========================================================================
   VERSION 10 · MARKETPLACE TRUST EXPERIENCE
   The thinking: a partner listing on a marketplace people already trust. The
   businesses are presented as partners rather than logos, each carrying the
   one thing a marketplace lets you verify for yourself — a live site. The
   detail opens behind a breadcrumb, the most familiar "you are here" device
   on the web, so nobody has to work out where the panel came from.
   ========================================================================== */
.cc{ padding: clamp(15px,2vh,22px) var(--pad) clamp(18px,2.4vh,26px);
  border-top: 1px solid var(--line-2); background: var(--paper); }
.cc .mp{ width: min(1400px,100%); margin-inline: auto; }

.cc .mp-head{ display: flex; align-items: center; gap: 12px; }
.cc .mp-t{ font-size: clamp(14px,1.15vw,16px); font-weight: 750; letter-spacing: -.028em; }
.cc .mp-n{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.4px; color: var(--ink-3); }
.cc .mp-n svg{ width: 13px; height: 13px; fill: none; stroke: var(--g-green); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }

.cc .mp-row{ display: flex; gap: 6px; margin-top: 10px; }
.cc .mp-i{
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 6px; border: 1px solid var(--line-b); border-radius: 10px;
  background: var(--paper); cursor: pointer; text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cc .mp-i:hover{ border-color: #C3D4EE; box-shadow: 0 4px 12px -8px rgba(15,27,61,.5); }
.cc .mp-m{ position: relative; flex: none; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 7px; background: var(--k); color: #fff;
  font-size: 9.6px; font-weight: 800; }
/* the verified badge rides the logo, so it costs the name no width — which is
   the only reason ten full business names still fit on one line */
.cc .mp-v{ position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
  width: 13px; height: 13px; border-radius: 50%; background: var(--g-green);
  box-shadow: 0 0 0 1.6px var(--paper); }
.cc .mp-v svg{ width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 3.6;
  stroke-linecap: round; stroke-linejoin: round; }
.cc .mp-i b{ min-width: 0; font-size: 11.6px; font-weight: 620; letter-spacing: -.022em;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc .mp-i.is-sel{ border-color: var(--k); background: color-mix(in srgb, var(--k) 5%, #fff);
  box-shadow: 0 0 0 1px var(--k); }
.cc .mp-i.is-sel b{ color: var(--ink); font-weight: 750; }

/* The row prints the short name — ten of them have to hold one desktop line.
   The full name is carried alongside it in the markup and is hidden here, so
   only the phone rail (which has room) turns it on. Without this base rule
   both names render at desktop width, one straight after the other. */
.cc .q7-nF{ display: none; }

/* name over trade, so the pill answers "who" and "what they do" at once */
.cc .mp-w{ display: flex; flex-direction: column; min-width: 0; }
.cc .mp-s{
  display: block; margin-top: 1px; font-style: normal;
  font-size: 9.6px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc .mp-i.is-sel .mp-s{ color: var(--ink-3); }

/* ---------- the partner detail ---------- */
.cc .mp-in{ padding: 14px 0 2px; }
.cc .mp-card{ border: 1px solid var(--line-b); border-radius: 16px; overflow: hidden;
  background: var(--paper); box-shadow: 0 1px 2px rgba(15,27,61,.05), 0 20px 44px -34px rgba(15,27,61,.5); }
.cc .mp-crumb{ display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-bottom: 1px solid var(--line-2); background: #FAFBFE; font-size: 11.6px; color: var(--ink-3); }
.cc .mp-crumb button{ border: 0; background: none; cursor: pointer; padding: 0; font-size: 11.6px;
  color: var(--ink-3); }
.cc .mp-crumb button:hover{ color: var(--ink); text-decoration: underline; }
.cc .mp-crumb i{ font-style: normal; color: var(--ink-4); }
.cc .mp-crumb b{ color: var(--ink); font-weight: 650; }

.cc .mp-body{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,clamp(230px,23vw,320px));
  gap: clamp(18px,2.2vw,34px); padding: clamp(16px,1.7vw,24px) 18px clamp(18px,1.7vw,24px);
  align-items: center; }
.cc .mp-who{ display: flex; align-items: center; gap: 12px; }
.cc .mp-wm{ flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: var(--k); color: #fff; font-size: 13.6px; font-weight: 800; }
.cc .mp-who h3{ font-size: clamp(19px,1.6vw,22px); letter-spacing: -.042em; }
.cc .mp-meta{ display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.cc .mp-meta span{ font-size: 12.2px; color: var(--ink-3); }
.cc .mp-live{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; background: #E9F6ED; color: #0C5A25; font-size: 10.8px; font-weight: 650; }
.cc .mp-live svg{ width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }

.cc .mp-strip{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
  margin-top: 15px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px;
  overflow: hidden; }
.cc .mp-s{ padding: 11px 14px; background: var(--paper); }
.cc .mp-s em{ display: block; font-style: normal; font-size: 10.8px; color: var(--ink-3); }
.cc .mp-s b{ display: block; margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -.045em;
  line-height: 1; color: var(--ink); }
.cc .mp-s.is-now b{ color: var(--k); }
.cc .mp-s.is-txt b{ font-size: 13.4px; font-weight: 700; letter-spacing: -.024em; line-height: 1.35;
  margin-top: 5px; }
.cc .mp-s i{ display: block; margin-top: 3px; font-style: normal; font-size: 10.4px; color: var(--ink-4); }
.cc .mp-foot{ display: flex; align-items: center; gap: 16px; margin-top: 15px; }
.cc .mp-x{ margin-left: auto; padding: 7px 13px; border: 1px solid var(--line-b); border-radius: 8px;
  background: var(--paper); cursor: pointer; font-size: 11.8px; font-weight: 600; color: var(--ink-2); }
.cc .mp-x:hover{ background: #F3F6FB; }

@media (max-width: 1340px){
  .cc .mp-i{ padding: 5px 8px 5px 5px; gap: 6px; }
  .cc .mp-i b{ font-size: 10.7px; }
  .cc .mp-m{ width: 25px; height: 25px; font-size: 9px; }
}
@media (max-width: 860px){
  .cc{ padding: 14px var(--gut) 18px; }
  .cc .mp-n{ display: none; }
  /* ---- the row becomes a swipe rail -------------------------------------
     Ten full business names cannot share one phone screen, and the previous
     answer was to drop the names entirely. Instead the row scrolls: every
     card keeps its whole title, and a swipe reaches all ten. Full-bleed out
     of the section's gutter and back in as scroll-padding, so the first card
     is not flush against the edge and the last one is not cropped. */
  .cc .mp-row{
    display: flex; flex-wrap: nowrap; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .cc .mp-row::-webkit-scrollbar{ display: none; }
  @media (prefers-reduced-motion: reduce){ .cc .mp-row{ scroll-behavior: auto; } }
  .cc .mp-row{ gap: 6px; margin-top: 9px; }
  .cc .mp-i{ flex: 0 0 auto; justify-content: flex-start;
    padding: 5px 12px 5px 5px; border-radius: 10px; }
  /* the full name, never clipped — this is the whole point of the rail */
  .cc .mp-i b{
    display: block; max-width: none; white-space: nowrap;
    overflow: visible; text-overflow: clip;
  }
  .cc .mp-i .q7-nS{ display: none; }
  .cc .mp-i .q7-nF{ display: inline; }
  .cc .mp-i b{ font-size: 11.8px; }
  .cc .mp-s{ font-size: 9.8px; overflow: visible; text-overflow: clip; }
  .cc .mp-m{ width: 27px; height: 27px; font-size: 9.4px; }
  .cc .mp-body{ grid-template-columns: minmax(0,1fr); gap: 15px; padding: 15px; }
  .cc .mp-side{ order: -1; }
  .cc .mp-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc .mp-s.is-txt{ grid-column: 1 / -1; }
}

/* ---------- every desktop width -----------------------------------------
   The pill now carries two lines — the business and its trade — and ten of
   those will not share one lane at any desktop width: at 1440 all ten trades
   and three of the names were still being clipped. Five across, twice, is
   the same answer the band below 1120px already used, and it gives every
   pill about 250px, which holds "Car PPF & Detailing" outright. */
@media (min-width: 861px){
  .cc .mp-row{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
}
/* at the narrow end of that grid a 154px pill still cut "Car PPF & Detailing",
   so the mark and the trade give back the few pixels it needs */
@media (min-width: 861px) and (max-width: 980px){
  .cc .mp-i{ padding: 5px 7px 5px 4px; gap: 5px; }
  .cc .mp-m{ width: 23px; height: 23px; font-size: 8.4px; }
  .cc .mp-s{ font-size: 9px; letter-spacing: -.02em; }
}