/* XCellParts — Brand tokens + utility classes
 * Source of truth: docs/BRAND_20260601_design_system.md, docs/designs/xcellparts-home-minimal.html
 * Prefixed `xcell-` so it sits cleanly alongside WoodMart + Elementor.
 */
:root{
  --xcell-red-50:#FDECEE; --xcell-red-100:#FAD1D4; --xcell-red-200:#F4A3A8; --xcell-red-300:#ED7077; --xcell-red-400:#E0404A;
  --xcell-red-500:#D42027; --xcell-red-600:#B11A20; --xcell-red-700:#8E1419; --xcell-red-800:#6B0F13; --xcell-red-900:#470A0C;
  --xcell-ink-900:#0E1116; --xcell-ink-800:#14171F; --xcell-ink-700:#1F2330;
  --xcell-n-600:#4B515C; --xcell-n-500:#6B7280; --xcell-n-400:#9AA1AD; --xcell-n-300:#CBD0D8;
  --xcell-n-200:#E2E5EA; --xcell-n-100:#EEF0F3; --xcell-n-50:#F7F8FA; --xcell-white:#fff;
  --xcell-success:#1E9E5A; --xcell-success-bg:#E7F6EE; --xcell-warning:#E8A317;
  --xcell-r-pill:9999px; --xcell-r-card:16px; --xcell-r-ctrl:10px;
  --xcell-ease:cubic-bezier(.2,.7,.2,1);
  --xcell-shadow-e1:0 1px 2px rgba(14,17,22,.06);
  --xcell-shadow-e2:0 8px 24px rgba(14,17,22,.12);
}

/* ---- Buttons ---- */
.xcell-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--xcell-r-pill);
  padding:12px 20px;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-weight:600;font-size:15px;line-height:1;cursor:pointer;
  text-decoration:none;transition:.16s var(--xcell-ease)}
.xcell-btn--primary{background:var(--xcell-red-500);color:#fff}
.xcell-btn--primary:hover{background:var(--xcell-red-600);transform:translateY(-1px);color:#fff}
.xcell-btn--ghost{background:#fff;border-color:var(--xcell-n-300);color:var(--xcell-ink-800)}
.xcell-btn--ghost:hover{border-color:var(--xcell-ink-800);color:var(--xcell-ink-800)}
.xcell-btn--sm{padding:9px 15px;font-size:14px}

/* ---- Eyebrow + section heading ---- */
.xcell-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--xcell-red-600);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.xcell-eyebrow::before{content:"";width:22px;height:2px;background:var(--xcell-red-500);border-radius:2px}

/* ---- USP / trust strip ---- */
.xcell-usp{display:flex;align-items:center;gap:13px}
.xcell-usp__ic{width:42px;height:42px;border-radius:12px;background:var(--xcell-red-50);color:var(--xcell-red-600);display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.xcell-usp b{display:block;color:var(--xcell-ink-800);font-size:14.5px}
.xcell-usp span{color:var(--xcell-n-500);font-size:12.5px}

/* ---- Category grid (shortcode: [xcell_category_grid]) ---- */
.xcell-catgrid{display:grid;grid-template-columns:repeat(var(--xcell-cols,6),1fr);gap:14px}
.xcell-cattile{border:1px solid var(--xcell-n-200);border-radius:var(--xcell-r-card);padding:18px 12px;text-align:center;background:#fff;
  transition:.16s var(--xcell-ease);text-decoration:none;display:block}
.xcell-cattile:hover{border-color:var(--xcell-red-500);transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,17,22,.08)}
.xcell-cattile__thumb{width:64px;height:64px;margin:0 auto 12px;border-radius:14px;background:var(--xcell-n-50);border:1px solid var(--xcell-n-100);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.xcell-cattile__thumb img{width:100%;height:100%;object-fit:cover}
.xcell-cattile b{display:block;color:var(--xcell-ink-800);font-size:13.5px}
.xcell-cattile__count{color:var(--xcell-n-500);font-size:12px;font-variant-numeric:tabular-nums}
@media(max-width:820px){.xcell-catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.xcell-catgrid{grid-template-columns:1fr 1fr}}

/* ---- Pre-owned band ---- */
.xcell-band{background:linear-gradient(120deg,var(--xcell-ink-900),var(--xcell-ink-800) 70%);color:#fff;border-radius:var(--xcell-r-card);padding:44px}
.xcell-band h2{color:#fff}
.xcell-band p{color:#c3c9d4}
.xcell-grade{display:inline-block;border:1px solid rgba(255,255,255,.18);border-radius:var(--xcell-r-pill);padding:7px 14px;font-size:13px;font-weight:600;margin:4px 6px 0 0}

/* ---- Brand chips ---- */
.xcell-brandchip{display:inline-block;border:1px solid var(--xcell-n-200);border-radius:var(--xcell-r-pill);padding:12px 26px;color:var(--xcell-n-600);font-weight:700;letter-spacing:.03em;background:#fff;margin:6px}

/* ---- Tabular numerals helper ---- */
.xcell-tnum{font-variant-numeric:tabular-nums}

/* ---- Focus visibility (accessibility): 2px red-700 ring + offset ---- */
.xcell-btn:focus-visible,.xcell-cattile:focus-visible,.xcell-brandchip:focus-visible{
  outline:2px solid var(--xcell-red-700);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .xcell-btn,.xcell-cattile{transition:none}
  .xcell-btn--primary:hover,.xcell-cattile:hover{transform:none}
}