/* ============================================================
   card-expand.css — the "+" disclosure row on the product cards
   ------------------------------------------------------------
   Owner request (2026-11-04): the main title, the fitment line
   and the OE numbers are all clipped on the card, so a buyer
   could not read the rest of them. Each of those rows now ends
   in a small "+" button that unfolds that row, and folds it back
   when the button is pressed again.

   The row markup is shared by the product list and the homepage
   cards, so the behaviour is identical on both pages:

     <div class="cx-row">
       <div class="cx-body"> …clipped text… </div>
       <button class="cx-plus" aria-expanded="false">+</button>
     </div>

   The button sits at the RIGHT of the row, bottom-aligned with
   the last visible line — the same place the text is cut off,
   so it reads as "there is more here".

   Colours come from the site's own tokens (styles.css):
     --ink #000 | --ink-soft #828282 | --line #e5e5e5
     --graphite #2f3338 | --accent #e60012
   ============================================================ */

/* ============================================================
   1. THE ROW
   ============================================================ */
.cx-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.cx-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   2. THE "+" BUTTON
   ------------------------------------------------------------
   A small outlined circle. Grey like the rest of the card text
   — the WhatsApp CTA stays the only Pulsar-red element on the
   card — and it darkens on hover so it is still easy to find.
   ============================================================ */
.cx-plus {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-bottom: 1px;
  padding: 0;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: #fff;
  color: #5a5a5a;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cx-plus:hover {
  color: var(--ink);
  border-color: #8f8f8f;
  background: #f2f2f2;
}
.cx-plus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The button is only shown when there is really more to read;
   card-expand.js sets this attribute. */
.cx-plus[hidden] { display: none; }

/* ============================================================
   3. OPEN STATE
   ------------------------------------------------------------
   -webkit-line-clamp is released so the whole title / fitment /
   OE string shows. Specificity (0,3,0) beats the single-class
   clamp rules in card-home.css and card-v5.css, so it wins
   regardless of the order the two stylesheets are loaded in.
   ============================================================ */
.cx-row.is-open [data-cx-clamp] {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}