/* Cold PDP mockup (app-coldpdp.jsx) — cold-specific bits only; everything else
   reuses the shared .pdp-* styles. */

/* Select-your-car — one expander below the search: the banner is the header and
   it grows in place to reveal the selector (not a separate card popping in). */
.cl-pdp-select {
  margin: 12px 16px 0;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.cl-pdp-select-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; font: inherit; text-align: start; cursor: pointer;
  background: var(--wash, #f4f4f5); border: 0;
}
.cl-pdp-select-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--white); color: var(--text);
}
.cl-pdp-select-icon svg { width: 24px; height: 24px; }
.cl-pdp-select-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cl-pdp-select-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cl-pdp-select-sub { font-size: 12.5px; color: var(--muted); }
.cl-pdp-select-chev { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.cl-pdp-select-chev svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .28s ease; }
.cl-pdp-select.is-open .cl-pdp-select-chev svg { transform: rotate(-90deg); }

/* Expanding body — grid-rows 0fr→1fr animates height with no JS measuring. */
.cl-pdp-select-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-pdp-select.is-open .cl-pdp-select-body { grid-template-rows: 1fr; }
.cl-pdp-select-inner { overflow: hidden; }
/* De-chrome the reused SelectorCard so it blends into the expander; its own
   head (title + reset) is redundant with the banner, so it's hidden. */
.cl-pdp-select-inner .card { margin: 0; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; box-shadow: none; }
.cl-pdp-select-inner .card-head { display: none; }

/* No-fitment-data note (case 3) — replaces the select banner; buy stays enabled.
   Calm info tone (not an alarm): "verify by part number." */
.cl-pdp-nodata {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 12px 16px 0; padding: 12px 14px;
  background: var(--wash, #f4f4f5); border: 1px solid var(--hairline); border-radius: 14px;
}
.cl-pdp-nodata-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; margin-top: 1px;
  color: #60A5FA;
}
.cl-pdp-nodata-icon svg { width: 20px; height: 20px; }
.cl-pdp-nodata-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-pdp-nodata-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.cl-pdp-nodata-oem { color: var(--text); font-weight: 700; }
.cl-pdp-nodata-sub { font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* Universal / non-fitment part — a small positive "fits all cars" note in place
   of the select-car banner. */
.cl-pdp-universal {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 0; padding: 12px 14px;
  background: var(--wash, #f4f4f5); border: 1px solid var(--hairline); border-radius: 14px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.cl-pdp-universal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: var(--white); color: #1a9d5a;
}
.cl-pdp-universal-icon svg { width: 18px; height: 18px; }

/* Mismatch — message-led: the "doesn't fit" note, then the titled fitting card. */
.cl-mismatch-alt-head { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.cl-mismatch-alt .prod-card { max-width: 220px; }

/* ---- No-confirmed-fit state (car selected, no fitting part) ---- */
/* The wanted part as a compact, muted context strip (not a buy block). */
.cl-nofit-part {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--hairline); border-radius: 12px;
}
.cl-nofit-part-img {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wash, #f4f4f5); border-radius: 10px; color: var(--text);
}
.cl-nofit-part-img svg { width: 36px; height: 36px; }
.cl-nofit-part-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-nofit-part-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* Unavailable module — calm, centered, honest. */
.cl-nofit {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 24px 16px;
  background: var(--wash, #f4f4f5); border: 1px solid var(--hairline); border-radius: 16px;
}
.cl-nofit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #60A5FA;
}
.cl-nofit-icon svg { width: 30px; height: 30px; }
.cl-nofit-title { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--text); margin: 4px 0 0; }
.cl-nofit-sub { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; max-width: 340px; }
/* Reference to the part that doesn't fit (name + number) under the message. */
.cl-nofit-ref { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.cl-nofit-ref .mono { color: var(--text); }
.cl-nofit-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-top: 8px; padding: 14px;
  background: var(--red); color: #fff; border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
/* IconChevron points right; flip so the CTA arrow points left (RTL forward). */
.cl-nofit-cta svg { width: 16px; height: 16px; transform: scaleX(-1); }
.cl-nofit-cats { margin-top: 8px; }