/* =============================================================================
   Lievers Direct — design system (ported from approved mockups v9/pdp/category)
   Strict palette: black / white / grey + Lievers red #FF0F00.
   Green is semantic only (stock, verified, included-value).
   ========================================================================== */
:root {
  --ld-canvas: #ffffff;
  --ld-surface-2: #f7f7f7;          /* announcement bar, footer band only */
  --ld-ink: #0a0a0a;
  --ld-muted: #5a5a5a;
  --ld-faint: #8a8a8a;
  --ld-line: #e4e4e4;
  --ld-line-strong: #c9c9c9;
  --ld-accent: #ff0f00;
  --ld-accent-strong: #d60d00;
  --ld-accent-soft: #fff0ef;
  --ld-good: #1a8a4f;               /* stock / verified / included-value */
  --ld-tp: #00b67a;                 /* trustpilot green */
  --ld-panel: #0a0a0a;              /* black bands: campaign, newsletter */
  --ld-font: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ld-wrap: 1240px;
  --ld-r-sm: 9px;                   /* buttons, pills, inputs */
  --ld-r: 13px;                     /* cards */
  --ld-r-lg: 16px;                  /* hero band, banners */
  --ld-sh: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -16px rgba(0,0,0,.18);
  --ld-sh-hover: 0 2px 6px rgba(0,0,0,.06), 0 16px 34px -18px rgba(0,0,0,.26);
  --ld-sh-red: 0 6px 16px -8px rgba(255,15,0,.6);
}

/* ---- base ---------------------------------------------------------------- */
body.ld {
  background: var(--ld-canvas);
  color: var(--ld-ink);
  font-family: var(--ld-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ld h1, .ld h2, .ld h3, .ld h4 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ld-ink);
}
.ld a { color: inherit; text-decoration: none; }
.ld :focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
.ld ::selection { background: var(--ld-accent); color: #fff; }
.ld-wrap { max-width: var(--ld-wrap); margin: 0 auto; padding: 0 24px; }
.ld-tnum { font-variant-numeric: tabular-nums; }
.ld-kick {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ld-accent);
}

/* ---- buttons ------------------------------------------------------------- */
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: inherit; font-size: .97rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--ld-r-sm);
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .1s;
}
.ld-btn:active { transform: translateY(1px); }
.ld-btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.02rem; }
.ld-btn--md { min-height: 47px; padding: 0 22px; }
.ld-btn--sm { min-height: 42px; padding: 0 16px; font-size: .9rem; }
/* red = the only filled action; ALWAYS white text (specificity-proof) */
a.ld-btn--primary, button.ld-btn--primary, .ld-btn--primary {
  background: var(--ld-accent); color: #fff !important; box-shadow: var(--ld-sh-red);
}
.ld-btn--primary:hover { background: var(--ld-accent-strong); }
.ld-btn--outline { border-color: var(--ld-line-strong); color: var(--ld-ink); background: var(--ld-canvas); }
.ld-btn--outline:hover { border-color: var(--ld-ink); }

/* square red add-to-cart (grid cards) */
a.ld-cartbtn, button.ld-cartbtn {
  width: 48px; height: 48px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--ld-accent); color: #fff !important;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(255,15,0,.55); transition: background .14s;
}
.ld-cartbtn:hover { background: var(--ld-accent-strong); }
.ld-cartbtn svg { width: 22px; height: 22px; }

/* ---- product card (home / category / related) ---------------------------- */
.ld-card {
  border: 1px solid var(--ld-line); border-radius: var(--ld-r);
  background: var(--ld-canvas); display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.ld-card:hover { box-shadow: var(--ld-sh-hover); transform: translateY(-3px); border-color: transparent; }
.ld-card__pic {
  aspect-ratio: 1/1; background: #fff; border-bottom: 1px solid var(--ld-line);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.ld-card__pic img { width: 100%; height: 100%; object-fit: contain; }
.ld-card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ld-card__kicker { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ld-faint); }
.ld-card__sku { font-size: .72rem; color: var(--ld-faint); font-weight: 500; }
.ld-card__title { font-size: .97rem; font-weight: 600; line-height: 1.32; margin: 0; }
.ld-card__foot { margin-top: auto; padding-top: 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* campaign / bundle tags — value language, never "-x%" */
.ld-tag {
  position: absolute; top: 12px; left: 12px; background: var(--ld-accent); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 4px 10px;
  border-radius: 7px; text-transform: uppercase;
}
.ld-tag--set { background: var(--ld-ink); }

/* ---- price (fabriekswinkel: ONE clean list price, no strikethrough) ------ */
.ld-price { display: flex; flex-direction: column; gap: 2px; }
.ld-price__now { display: flex; align-items: baseline; gap: 8px; }
.ld-price__now b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ld-ink); }
.ld-price__ex { font-size: .75rem; color: var(--ld-muted); font-weight: 600; }
.ld-price__gross { font-size: .8rem; color: var(--ld-muted); }
.ld-price--hero .ld-price__now b { font-size: 2.1rem; }
/* included-value line: the bundle story (green, with check) */
.ld-incl { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ld-good); }
.ld-incl svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- stock --------------------------------------------------------------- */
.ld-stock { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--ld-good); }
.ld-stock--bo { color: var(--ld-faint); }
.ld-stock i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- header / nav -------------------------------------------------------- */
.ld-anno { background: var(--ld-surface-2); color: var(--ld-muted); font-size: .8rem; border-bottom: 1px solid var(--ld-line); }
.ld-head { position: sticky; top: 0; z-index: 40; background: var(--ld-canvas); border-bottom: 1px solid var(--ld-line); }
.ld-search {
  display: flex; align-items: center; gap: 11px; background: #fff;
  border: 1.5px solid var(--ld-line-strong); border-radius: 11px; padding: 0 17px; min-height: 50px;
}
.ld-search input { border: 0; background: transparent; flex: 1; font: inherit; font-size: .97rem; color: var(--ld-ink); }
.ld-catnav a {
  white-space: nowrap; padding: 14px 15px; font-size: .92rem; font-weight: 500;
  color: var(--ld-muted); border-bottom: 2.5px solid transparent;
}
.ld-catnav a:hover { color: var(--ld-ink); border-color: var(--ld-ink); }
.ld-catnav a.is-active { color: var(--ld-ink); font-weight: 700; border-color: var(--ld-accent); }

/* ---- black bands (campaign / newsletter) --------------------------------- */
.ld-band {
  background: var(--ld-panel); color: #f4f4f4; border-radius: var(--ld-r-lg); overflow: hidden;
}
.ld-band h2, .ld-band h3 { color: #fff; }
.ld-band p { color: #c4c4c4; }

/* ---- filters (category) -------------------------------------------------- */
.ld-filter input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ld-accent); }
.ld-chip {
  border: 1.5px solid var(--ld-line-strong); border-radius: 999px; padding: 8px 16px;
  font-size: .88rem; font-weight: 600; background: var(--ld-canvas); cursor: pointer;
}
.ld-chip:hover { border-color: var(--ld-ink); }
.ld-chip.is-active { border-color: var(--ld-accent); background: var(--ld-accent-soft); }

/* ---- misc ---------------------------------------------------------------- */
.ld-crumbs { font-size: .82rem; color: var(--ld-faint); }
.ld-crumbs b { color: var(--ld-ink); font-weight: 600; }
.ld-trust { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ld-muted); font-weight: 500; }
.ld-trust svg { width: 16px; height: 16px; color: var(--ld-good); }
.ld-stars { color: var(--ld-tp); letter-spacing: 1px; }