/* ============================================================
   CBJJ SYSTEM — unified component layer (built on cbjj-tokens)
   ------------------------------------------------------------
   Created 2026-06-08. ADDITIVE + NAMESPACED (.cbjj-*). It does
   not touch any existing class, so linking it cannot regress a
   page. Migration = swap page markup onto these classes, then
   delete the bespoke .product-card / .pcard / .rel-card / etc.

   The audit found FOUR+ parallel card components
   (.product-card 327x351 home, .pcard 469x444 shop, .rel-card
   product, plus aplus/rev/fitment cards) and six section paddings.
   These primitives replace all of them.

   Load LAST so it can lean on tokens; uses near-zero !important.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.cbjj-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.cbjj-shell--narrow { max-width: var(--shell-narrow); }
.cbjj-shell--text { max-width: var(--shell-text); }

.cbjj-section { padding-block: var(--section-y); }
.cbjj-section--sm { padding-block: var(--section-y-sm); }
.cbjj-section--lg { padding-block: var(--section-y-lg); }
.cbjj-section--tint { background: var(--bg-2); }
.cbjj-section--ink { background: var(--surface-ink); color: #fff; }
.cbjj-section--ink .cbjj-lead { color: rgba(255,255,255,.72); }

/* ---------- Section header (eyebrow + title + lead) ---------- */
.cbjj-section-head { max-width: var(--shell-text); margin: 0 auto var(--space-12); text-align: center; }
.cbjj-section-head--left { margin-inline: 0; text-align: left; }

.cbjj-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-xs); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--space-4);
}
.cbjj-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.cbjj-section--ink .cbjj-eyebrow { color: var(--gold); }

.cbjj-title {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: -.02em; color: inherit;
}
.cbjj-title--xl { font-size: var(--text-4xl); }

.cbjj-lead {
  margin-top: var(--space-4); font-size: var(--text-lg);
  line-height: var(--leading-normal); color: var(--gray-1);
  max-width: var(--measure); margin-inline: auto;
}
.cbjj-section-head--left .cbjj-lead { margin-inline: 0; }

/* ---------- Responsive auto-grid ---------- */
.cbjj-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(var(--cbjj-col, 260px), 1fr)); }
.cbjj-grid--2 { --cbjj-col: 460px; }
.cbjj-grid--3 { --cbjj-col: 320px; }
.cbjj-grid--4 { --cbjj-col: 240px; }

/* ============================================================
   UNIFIED PRODUCT CARD  (.cbjj-pcard)
   One component for: shop grid, homepage rails, "Customers also
   bought", "Recently viewed", product-page related. Fixed image
   well + contain + soft tint => no more oversized/clipped images
   or harsh white-on-white that the owner keeps flagging.
   ============================================================ */
.cbjj-pcard {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  height: 100%;
}
.cbjj-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }

.cbjj-pcard__media {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--bg-3);                 /* soft tint backdrop, not raw white */
  padding: var(--space-6);
  overflow: hidden;
}
.cbjj-pcard__media img {
  width: 100%; height: 100%;
  object-fit: contain;                     /* never crop the product */
  transition: transform var(--dur-3) var(--ease);
}
.cbjj-pcard:hover .cbjj-pcard__media img { transform: scale(1.04); }

.cbjj-pcard__badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; letter-spacing: .3px;
}
.cbjj-pcard__badge--sale { background: var(--accent); }

.cbjj-pcard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.cbjj-pcard__kicker { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .4px; text-transform: uppercase; color: var(--gray-2); }
.cbjj-pcard__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(var(--text-md) * var(--leading-snug) * 2);   /* equal title heights */
}
.cbjj-pcard__spec { font-size: var(--text-sm); color: var(--gray-1); line-height: var(--leading-snug); }
.cbjj-pcard__rating { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--gray-2); }
.cbjj-pcard__rating i { color: var(--gold); }

.cbjj-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); }
.cbjj-pcard__price { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-xl); color: var(--ink); }
.cbjj-pcard__price s { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-3); margin-left: 6px; }

/* ---------- Buttons ---------- */
.cbjj-btn {
  --btn-bg: var(--ink); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-base);
  line-height: 1; padding: 13px 22px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  white-space: nowrap;
}
.cbjj-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cbjj-btn:active { transform: translateY(0); }
.cbjj-btn--primary { --btn-bg: var(--blue); }
.cbjj-btn--accent { --btn-bg: var(--accent); }
.cbjj-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border: 1.5px solid var(--line); }
.cbjj-btn--ghost:hover { border-color: var(--ink); }
.cbjj-btn--sm { padding: 9px 16px; font-size: var(--text-sm); }
.cbjj-btn--block { display: flex; width: 100%; }

/* ---------- Chips / pills ---------- */
.cbjj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--gray-1); border: 1px solid var(--line);
}
.cbjj-chip--active { background: var(--blue-l); color: var(--blue-d); border-color: transparent; }

/* ---------- Accessible focus ring (site-wide upgrade) ---------- */
.cbjj-btn:focus-visible,
.cbjj-chip:focus-visible,
.cbjj-pcard a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Reduced-motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .cbjj-pcard, .cbjj-pcard__media img, .cbjj-btn { transition: none; }
  .cbjj-pcard:hover { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .cbjj-section-head { margin-bottom: var(--space-8); }
  .cbjj-pcard__body { padding: var(--space-4); }
}