/* tokens.css */
/* ToolPakker brand system — white comparison platform with a single petrol-teal brand accent. */
:root {
  --tp-graphite-950: #0f1115;
  --tp-graphite-900: #1a2f36;
  --tp-graphite-800: #2b2f36;
  --tp-accent-50: #edf8f8;
  --tp-accent-100: #d8f0f0;
  --tp-accent-200: #b5e0e0;
  --tp-accent-300: #85cbcc;
  --tp-accent-400: #3c9fa1;
  --tp-accent-500: #0d6b6e;
  --tp-accent-600: #064b4f;
  --tp-accent-700: #043b3e;
  --tp-accent-800: #022d2f;
  --tp-accent-ink: #043b3e;
  --tp-focus-ring: rgba(13, 107, 110, .26);
  --tp-navy-950: var(--tp-graphite-950);
  --tp-navy-900: var(--tp-graphite-900);
  --tp-navy-800: var(--tp-graphite-800);
  --tp-green-600: #168354;
  --tp-red-600: #be3f4d;
  --tp-text: #1a2530;
  --tp-muted: #65747c;
  --tp-soft: #fbfcfc;
  --tp-soft-2: #f1f5f5;
  --tp-card: #ffffff;
  --tp-border: #e1e8e8;
  --tp-border-strong: #c8d6d7;
  --tp-shadow: 0 16px 38px rgba(15, 17, 21, .09);
  --tp-shadow-soft: 0 8px 22px rgba(15, 17, 21, .055);
  --tp-radius-sm: 10px;
  --tp-radius-md: 16px;
  --tp-radius-lg: 22px;
  --tp-header-height: 88px;
  --tp-sidebar-width: 292px;
  --tp-offers-width: 500px;
  --tp-gap: 18px;
  --tp-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* base.css */
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--tp-soft); }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--tp-font);
  color: var(--tp-text);
  background: linear-gradient(180deg, #ffffff 0, #f9f9fa 260px, #f7f7f8 100%);
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.panel-heading {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--tp-border);
}
.panel-heading h2,
.tp-section-title,
.tp-panel-title {
  margin: 0;
  letter-spacing: -0.035em;
}
.tp-section-title { font-size: clamp(28px, 3vw, 42px); }
.tp-panel-title { font-size: 22px; }
.tp-subtitle {
  margin: 7px 0 0;
  color: var(--tp-muted);
  font-size: 17px;
  line-height: 1.45;
}
.tp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tp-muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.tp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background: #fff;
  color: #34343c;
  font-size: 14px;
  font-weight: 700;
}
.tp-pill.is-active {
  background: var(--tp-accent-500);
  color: #fff;
  border-color: var(--tp-accent-500);
}
.tp-footer {
  max-width: 1700px;
  margin: 0 auto;
  padding: 14px 22px 30px;
  color: var(--tp-muted);
  font-size: 13px;
}

.tp-loading {
  display: grid;
  gap: 6px;
  min-height: 180px;
  place-content: center;
  text-align: center;
  color: var(--tp-text-muted, #4b5f60);
}
.tp-loading strong { color: var(--tp-text, #173536); font-size: 1.05rem; }
[aria-busy="true"] { cursor: progress; }

/* header.css */
/* White ToolPakker header — petrol-teal is the single brand accent. */
.tp-header {
  min-height: var(--tp-header-height);
  height: var(--tp-header-height);
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(320px, 1fr) minmax(160px, 230px);
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  background: rgba(255, 255, 255, .97);
  color: var(--tp-text);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--tp-border);
  box-shadow: 0 8px 24px rgba(15, 17, 21, .055);
  backdrop-filter: blur(12px);
}
.tp-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-weight: 900;
}
.tp-brand-mark {
  width: 52px;
  height: 52px;
  border: 4px solid var(--tp-accent-500);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--tp-accent-500);
  font-size: 29px;
  line-height: 1;
  font-weight: 950;
}
.tp-brand-text {
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.06em;
}
.tp-brand-text,
.tp-brand-text span { color: var(--tp-accent-500); }
.tp-search {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto;
}
.tp-search input {
  width: 100%;
  height: 58px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  background: #f8fbfb;
  color: var(--tp-text);
  padding: 0 20px 0 58px;
  font-size: 18px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(15, 17, 21, .015);
}
.tp-search input::placeholder { color: #7a8990; }
.tp-search input:focus {
  border-color: var(--tp-accent-500);
  box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.tp-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tp-accent-500);
  font-size: 30px;
  font-weight: 700;
}
.tp-compare {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--tp-text);
  font-size: 18px;
  font-weight: 800;
}
.tp-compare strong {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  background: var(--tp-accent-500);
  color: #fff;
  font-size: 14px;
}


/* ToolPakker brand assets v2 */
.tp-brand { min-width: 0; overflow: hidden; }
.tp-brand-picture { display: block; min-width: 0; max-width: 100%; }
.tp-brand-logo { display:block; width: min(270px, 100%); height:auto; max-height:64px; object-fit:contain; object-position:left center; }
html[data-layout-mode="tablet"] .tp-brand-logo { width: min(246px, 32vw); max-height: 46px; }
html[data-layout-mode="compact"] .tp-brand-logo { width: min(184px, 58vw); max-height: 38px; }

/* Google branding batch: use the official TP mark on all public trust pages. */
.info-page .tp-brand-logo--static { width: min(248px, 100%); max-height: 58px; object-fit: contain; object-position: left center; }
html[data-layout-mode="tablet"] .info-page .tp-brand-logo--static { width: min(238px, 34vw); max-height: 44px; }
html[data-layout-mode="compact"] .info-page .tp-brand-logo--static { width: min(180px, 60vw); max-height: 37px; }

/* layout.css */
/* App shell — desktop is explicit; compact and tablet modes are owned by layout-modes.css. */
.tp-shell {
  display: grid;
  grid-template-columns: var(--tp-sidebar-width) minmax(480px, 1fr) var(--tp-offers-width);
  gap: var(--tp-gap);
  max-width: 1780px;
  margin: 0 auto;
  padding: 28px 24px 16px;
  align-items: start;
}
.tp-sidebar,
.tp-main-panel,
.tp-offers-panel {
  background: var(--tp-card);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  box-shadow: var(--tp-shadow-soft);
}
.tp-sidebar,
.tp-offers-panel {
  position: sticky;
  top: calc(var(--tp-header-height) + 20px);
  max-height: calc(100vh - var(--tp-header-height) - 44px);
}
.tp-sidebar { overflow-y: auto; }
.tp-offers-panel { overflow-y: auto; overscroll-behavior: contain; }
.tp-main-panel { min-height: calc(100vh - var(--tp-header-height) - 90px); }
#mainContent { padding: 28px 32px; }
#offersContent { padding: 24px 24px 36px; }
.tp-empty-state {
  min-height: 620px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 26px;
  color: var(--tp-muted);
}
.tp-empty-icon {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tp-accent-100), var(--tp-accent-50));
  color: var(--tp-accent-700);
  font-size: 54px;
  margin-bottom: 22px;
}
.tp-empty-state h3 { color: var(--tp-text); font-size: 28px; letter-spacing: -.035em; margin: 0 0 10px; }
.tp-empty-state p { max-width: 360px; margin: 0; line-height: 1.55; font-size: 17px; }
.tp-start-steps { display: grid; gap: 22px; margin-top: 34px; max-width: 760px; }
.tp-step-card { display: grid; grid-template-columns: 64px 84px 1fr; gap: 18px; align-items: center; border: 1px solid var(--tp-border); border-radius: var(--tp-radius-md); padding: 22px; background: #fff; }
.tp-step-number { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--tp-accent-100); color: var(--tp-navy-950); font-weight: 900; font-size: 22px; }
.tp-step-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--tp-soft-2); font-size: 34px; }
.tp-step-card h3 { margin: 0 0 4px; font-size: 21px; }
.tp-step-card p { margin: 0; color: var(--tp-muted); line-height: 1.45; }

/* sidebar.css */
/* Desktop category navigation — text only, intentionally free from decorative icons. */
.category-list {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.category-button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tp-text);
  text-align: left;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.01em;
  position: relative;
  transition: background .16s ease, color .16s ease;
}

.category-button:hover,
.category-button:focus-visible {
  background: #f5f7f7;
  outline: none;
}

.category-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(13,107,110,.18);
}

.category-button.is-active {
  background: rgba(13,107,110,.10);
  color: var(--tp-navy-950);
  font-weight: 850;
}

.category-button.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--tp-accent-500);
}

.category-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.category-button.is-active .category-label {
  font-weight: 680;
}

.category-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #e6e7e9;
  border-radius: 999px;
  background: #fafafa;
  color: #6b7077;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.category-button[disabled] {
  cursor: default;
  color: #727780;
  opacity: 1;
}

.category-button[disabled]:hover,
.category-button[disabled]:focus-visible {
  background: transparent;
  box-shadow: none;
}

.tp-sidebar::-webkit-scrollbar { width: 8px; }
.tp-sidebar::-webkit-scrollbar-thumb { background: #cbcbcf; border-radius: 99px; }

/* The compact trigger lives in category-navigation.css; this avoids stale legacy ownership. */
.mobile-category-toggle { display: none; }

/* brand-filter.css */
.brand-filter-wrap {
  position: relative;
  margin: 20px -2px 22px;
}
.brand-filter-label {
  display: block;
  margin: 0 0 9px 2px;
  color: var(--tp-muted);
  font-size: 13px;
  font-weight: 850;
}
.brand-filter {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.brand-filter::-webkit-scrollbar { height: 6px; }
.brand-filter::-webkit-scrollbar-thumb { background: #cbcbcf; border-radius: 99px; }
.brand-filter button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--tp-border);
  background: #fff;
  color: var(--tp-text);
  min-height: 42px;
  border-radius: 999px;
  padding: 0 17px;
  font-weight: 850;
  box-shadow: 0 4px 12px rgba(23, 24, 33, .035);
}
.brand-filter button:hover,
.brand-filter button:focus-visible {
  border-color: var(--tp-accent-500);
  outline: none;
}
.brand-filter button.is-active {
  background: var(--tp-accent-500);
  color: #fff;
  border-color: var(--tp-accent-500);
  box-shadow: 0 8px 18px rgba(23,24,33,.14);
}

/* model-cards.css */
/*
  Model Card Component v2
  -----------------------
  One explicit layout contract for every category/model card:
  media | content | action + price

  The media canvas, text and purchase zone each own a grid area. Nothing is
  positioned on top of another area, so an image can never run into the copy.
*/
.model-list { display: grid; gap: 12px; }

.model-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) minmax(156px, 180px);
  grid-template-areas: "media content side";
  gap: 18px;
  align-items: stretch;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.model-card:hover,
.model-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--tp-accent-500);
  box-shadow: var(--tp-shadow-soft);
  outline: none;
  background: var(--tp-accent-50);
}

.model-card__media {
  grid-area: media;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.model-card__media .tp-product-media {
  flex: 0 0 auto;
}

.model-card__content {
  grid-area: content;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.model-title {
  display: block;
  font-size: 23px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: -.035em;
  margin: 0 0 5px;
}

.model-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #46464f;
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.35;
}

.model-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.model-meta { color: var(--tp-muted); font-size: 14px; }

.model-card__side {
  grid-area: side;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: end;
  align-items: start;
}

.model-card .compare-card-action {
  position: static;
  grid-row: 1;
  min-height: 34px;
  padding: 7px 12px;
  box-shadow: 0 8px 22px rgba(23, 24, 33, .08);
}

.model-card__price-row {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
}

.model-card__price { min-width: 0; text-align: right; }
.model-card__price > span { display: block; color: var(--tp-muted); font-size: 13px; margin-bottom: 4px; }
.model-card__price strong { display: block; font-size: 25px; letter-spacing: -.045em; white-space: nowrap; }
.model-card__arrow { color: var(--tp-text); font-size: 31px; line-height: 1; flex: 0 0 auto; }

.no-results {
  padding: 34px;
  border: 1px dashed var(--tp-border-strong);
  border-radius: var(--tp-radius-md);
  color: var(--tp-muted);
  background: #fff;
}

@media (max-width: 1040px) {
  .model-card {
    grid-template-columns: 104px minmax(0, 1fr) minmax(146px, 160px);
    gap: 14px;
    padding: 14px 16px;
  }

  .model-card__media .tp-product-media--model {
    width: 96px;
    height: 108px;
  }

  .model-title { font-size: 21px; }
  .model-card__price strong { font-size: 23px; }
}

/* search-results.css */
/* Productcode Search v1 */
.search-results { min-width: 0; }
.search-results__count { margin: 18px 0 12px; color: var(--tp-muted); font-size: 14px; font-weight: 750; }
.search-results__list { display: grid; gap: 12px; }
.search-code-guide,
.product-code-guide {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--tp-accent-500) 34%, var(--tp-border));
  border-radius: 14px;
  background: var(--tp-accent-50);
}
.search-code-guide h2,
.product-code-guide h2 { margin: 0 0 6px; color: var(--tp-ink); font-size: 18px; letter-spacing: -.02em; }
.search-code-guide p,
.product-code-guide p { max-width: 78ch; margin: 0; color: #3f4950; line-height: 1.55; }
.product-code-guide p + p { margin-top: 8px; }

.search-result-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) minmax(128px, 155px);
  gap: 18px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.search-result-card:hover,
.search-result-card:focus-visible { border-color: var(--tp-accent-500); box-shadow: var(--tp-shadow-soft); transform: translateY(-1px); outline: none; }
.search-result-card__media { display: grid; place-items: center; min-width: 0; }
.search-result-card__media .tp-product-media--model { width: 104px; height: 104px; }
.search-result-card__content { min-width: 0; }
.search-result-card__label { display: inline-block; margin-bottom: 6px; color: var(--tp-accent-700); font-size: 12px; font-weight: 850; }
.search-result-card h2 { margin: 0; color: var(--tp-ink); font-size: 22px; line-height: 1.15; letter-spacing: -.03em; }
.search-result-card__content > p { margin: 5px 0 0; color: #50525b; line-height: 1.42; }
.search-result-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; color: var(--tp-muted); font-size: 13px; }
.search-result-card__meta strong { color: var(--tp-text); }
.search-result-card__reference { padding: 9px 10px; border-left: 3px solid var(--tp-accent-500); background: var(--tp-accent-50); font-size: 13px; }
.search-result-card__side { display: grid; justify-items: end; gap: 4px; color: var(--tp-muted); font-size: 13px; }
.search-result-card__side strong { color: var(--tp-text); font-size: 23px; letter-spacing: -.04em; }
.search-result-card__side span:last-child { color: var(--tp-text); font-size: 31px; line-height: 1; }

@media (max-width: 720px) {
  .search-code-guide, .product-code-guide { padding: 14px; border-radius: 12px; }
  .search-code-guide h2, .product-code-guide h2 { font-size: 17px; }
  .search-result-card { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 13px; }
  .search-result-card__media .tp-product-media--model { width: 76px; height: 86px; }
  .search-result-card h2 { font-size: 18px; }
  .search-result-card__side { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; justify-items: start; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid var(--tp-border); }
  .search-result-card__side span:last-child { justify-self: end; }
}

/* compare-actions.css */
/* v0.4.2 — Compare CTA is always visible and occupies one fixed position
   on every model and execution card. Component-specific spacing lives
   in the respective card modules. */
.variant-card .compare-card-action {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--tp-accent-800);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(23, 24, 33, .08);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.compare-card-action:hover,
.compare-card-action:focus-visible {
  border-color: var(--tp-accent-500);
  background: var(--tp-accent-100);
  outline: none;
  transform: translateY(-1px);
}

.compare-card-action[aria-pressed="true"] {
  border-color: var(--tp-accent-500);
  background: var(--tp-accent-500);
  color: #fff;
}

.model-card.is-compared,
.variant-card.is-compared {
  border-color: rgba(13, 107, 110, .78);
}

@media (max-width: 760px) {
  .variant-card .compare-card-action {
    top: 10px;
    right: 10px;
    min-height: 31px;
    padding: 7px 10px;
    font-size: 12px;
  }
}


/* v0.4.3 — permanent, card-anchored compare CTA.
   Explicit visibility guards prevent stale hover-era CSS from hiding the action. */
.model-card .compare-card-action,
.variant-card .compare-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.model-card,
.variant-card {
  position: relative;
}

/* v0.4.10 — Calm compare CTA states.
   The action stays visible but does not turn the entire card into a highlighted selection. */
.compare-card-action[aria-pressed="true"] {
  border-color: var(--tp-accent-300);
  background: var(--tp-accent-100);
  color: var(--tp-accent-800);
  box-shadow: none;
}
.model-card.is-compared,
.variant-card.is-compared {
  border-color: var(--tp-border);
}

@media (max-width: 760px) {
  /* Keep the title and description completely free. The same compact CTA
     sits at the bottom-right on every mobile card, next to the price zone. */
  .variant-card .compare-card-action {
    top: auto;
    bottom: 12px;
    right: 12px;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: none;
  }

}

/* compare-workspace.css */
/* Full compare workspace — a real application state, never a floating modal. */
.tp-compare-screen[hidden] { display: none; }
.tp-compare-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow-y: auto;
  background: #f7f7f8;
  padding: calc(var(--tp-header-height) + 42px) clamp(22px, 4vw, 72px) 52px;
}
body.tp-compare-open { overflow: hidden; }

.tp-compare-workspace {
  width: min(1480px, 100%);
  margin: 0 auto;
}
.tp-compare-workspace__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--tp-border);
}
.tp-compare-workspace__back,
.tp-compare-workspace__clear,
.tp-compare-card__remove {
  border: 1px solid var(--tp-border);
  background: #fff;
  color: var(--tp-navy-950);
  font: inherit;
  font-weight: 800;
}
.tp-compare-workspace__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 12px;
}
.tp-compare-workspace__back:hover,
.tp-compare-workspace__back:focus-visible,
.tp-compare-workspace__clear:hover,
.tp-compare-workspace__clear:focus-visible,
.tp-compare-card__remove:hover,
.tp-compare-card__remove:focus-visible {
  border-color: var(--tp-accent-500);
  background: var(--tp-accent-50);
  outline: none;
}
.tp-compare-workspace__eyebrow {
  margin: 18px 0 7px;
  color: #51515a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.tp-compare-workspace h1 {
  margin: 0;
  color: var(--tp-navy-950);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.055em;
}
.tp-compare-workspace__intro {
  max-width: 680px;
  margin: 13px 0 0;
  color: var(--tp-muted);
  line-height: 1.55;
}
.tp-compare-workspace__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.tp-compare-workspace__count {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tp-navy-950);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.tp-compare-workspace__clear {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
}
.tp-compare-grid {
  display: grid;
  grid-template-columns: repeat(var(--tp-compare-columns, 2), minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding-top: 26px;
}
.tp-compare-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tp-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(5, 18, 35, .06);
}
.tp-compare-card__head {
  position: relative;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--tp-border);
  background: linear-gradient(180deg, #fff, #fbfbfc);
}
.tp-compare-card__type {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--tp-accent-100);
  color: #36363e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tp-compare-card__remove {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: var(--tp-muted);
  font-size: 21px;
  line-height: 1;
}
.tp-compare-card__head .tp-product-media--compare {
  flex: 0 0 auto;
}
.tp-compare-card__head h2 {
  margin: 0;
  padding-right: 38px;
  color: var(--tp-navy-950);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.tp-compare-card__head p { margin: 8px 0 0; color: var(--tp-muted); line-height: 1.45; }
.tp-compare-card__details { display: grid; }
.tp-compare-card__details section { padding: 15px 22px; border-bottom: 1px solid var(--tp-border); }
.tp-compare-card__details section:last-child { border-bottom: 0; }
.tp-compare-card__details h3 { margin: 0 0 6px; color: var(--tp-muted); font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.tp-compare-card__details p { margin: 0; color: var(--tp-text); line-height: 1.5; }
.tp-compare-card__details ul { margin: 0; padding-left: 19px; color: var(--tp-text); line-height: 1.52; }
.tp-compare-card__details li + li { margin-top: 4px; }
.tp-compare-card__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tp-compare-card__tags span { display: inline-flex; padding: 5px 8px; border: 1px solid var(--tp-border); border-radius: 999px; color: #3f3f47; font-size: 12px; font-weight: 750; }
.tp-compare-card__price { background: var(--tp-accent-50); }
.tp-compare-card__price strong { color: var(--tp-navy-950); font-size: 26px; letter-spacing: -.025em; }
.tp-compare-empty { min-height: 350px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--tp-muted); }
.tp-compare-empty strong { color: var(--tp-navy-950); font-size: 23px; }
.tp-compare-empty p { max-width: 430px; margin: 10px 0 0; line-height: 1.55; }

@media (max-width: 980px) {
  .tp-compare-screen { padding-left: 22px; padding-right: 22px; }
  .tp-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tp-compare-screen { padding: 116px 16px 28px; }
  .tp-compare-workspace__bar { display: block; padding-bottom: 20px; }
  .tp-compare-workspace__actions { width: 100%; justify-content: space-between; margin-top: 18px; }
  .tp-compare-workspace__clear { margin-left: auto; }
  .tp-compare-workspace h1 { font-size: 34px; }
  .tp-compare-grid { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 22px 16px 12px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .tp-compare-card { flex: 0 0 calc(100vw - 48px); scroll-snap-align: start; }
  .tp-compare-card__head .tp-product-media--compare {
    height: 156px;
    margin-bottom: 14px;
  }
}

/* v0.4.7 — Keep comparison columns equal in both width and height. */
.tp-compare-grid {
  align-items: stretch;
}

.tp-compare-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.tp-compare-card__details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.tp-compare-card__price {
  margin-top: auto;
}

@media (min-width: 761px) {
  .tp-compare-grid {
    grid-auto-rows: 1fr;
  }
}

@media (max-width: 760px) {
  .tp-compare-grid {
    align-items: stretch;
  }

  .tp-compare-card {
    width: auto;
    min-height: 100%;
  }
}


/* v0.4.8 — Professional column alignment.
   Every compare card receives the same semantic row structure.
   Fixed row tracks keep dividers and price surfaces aligned across columns. */
@media (min-width: 761px) {
  .tp-compare-card__head {
    min-height: 390px;
    display: flex;
    flex-direction: column;
  }

  .tp-compare-card__head .tp-product-media--compare {
    flex: 0 0 auto;
  }

  .tp-compare-card__head h2 {
    min-height: 66px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .tp-compare-card__head p {
    min-height: 52px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .tp-compare-card__details {
    display: grid;
    grid-template-rows: 76px 76px 76px 170px 124px 84px 92px;
    flex: 0 0 auto;
  }

  .tp-compare-card__details section {
    min-height: 0;
    overflow: hidden;
  }

  .tp-compare-card__details section:nth-child(4) ul,
  .tp-compare-card__details section:nth-child(5) ul {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .tp-compare-card__details section:nth-child(4) ul {
    -webkit-line-clamp: 3;
  }

  .tp-compare-card__details section:nth-child(5) ul {
    -webkit-line-clamp: 2;
  }

  .tp-compare-card__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  /* Keep mobile cards natural-height and swipeable; fixed desktop row contracts would hurt readability. */
  .tp-compare-card__details {
    display: grid;
  }
}


/* v0.4.11 — Mobile comparison is difference-first instead of tall swipable columns. */
.tp-compare-mobile-view { display: none; }
@media (max-width: 760px) {
  .tp-compare-desktop-view { display: none; }
  .tp-compare-mobile-view { display: block; }
  .tp-mobile-compare { padding: 20px 0 6px; }
  .tp-mobile-compare__intro { display: grid; gap: 5px; padding: 0 2px 14px; color: var(--tp-muted); font-size: 14px; line-height: 1.45; }
  .tp-mobile-compare__intro strong { color: var(--tp-navy-950); font-size: 18px; }
  .tp-mobile-compare__products,
  .tp-mobile-compare__values { display: flex; gap: 10px; overflow-x: auto; padding: 0 1px 4px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .tp-mobile-compare__products::-webkit-scrollbar,
  .tp-mobile-compare__values::-webkit-scrollbar { height: 0; }
  .tp-mobile-compare__product { flex: 0 0 calc(50% - 5px); min-width: 176px; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--tp-border); border-radius: 14px; background: #fff; scroll-snap-align: start; }
  .tp-mobile-compare__product .tp-product-media {
    width: 48px;
    height: 48px;
    margin: auto;
    --tp-media-padding: 5px;
  }
  .tp-mobile-compare__product strong { display: block; color: var(--tp-navy-950); font-size: 14px; line-height: 1.2; }
  .tp-mobile-compare__product span { display: block; margin-top: 4px; color: var(--tp-muted); font-size: 12px; line-height: 1.35; }
  .tp-mobile-compare__row { margin-top: 14px; padding: 14px; border: 1px solid var(--tp-border); border-radius: 16px; background: #fff; }
  .tp-mobile-compare__row h2 { margin: 0 0 10px; color: var(--tp-navy-950); font-size: 16px; letter-spacing: -.015em; }
  .tp-mobile-compare__values article { flex: 0 0 calc(50% - 5px); min-width: 176px; padding: 12px; border: 1px solid #e8edf4; border-radius: 12px; background: #fbfbfc; scroll-snap-align: start; }
  .tp-mobile-compare__values span { display: block; color: var(--tp-muted); font-size: 11px; font-weight: 800; line-height: 1.25; }
  .tp-mobile-compare__values strong { display: block; margin-top: 6px; color: var(--tp-navy-950); font-size: 14px; line-height: 1.35; }
  .tp-mobile-compare__row--price { border-color: var(--tp-accent-300); background: var(--tp-accent-50); }
  .tp-mobile-compare__row--price .tp-mobile-compare__values article { background: #fff; }
  .tp-mobile-compare__row--price .tp-mobile-compare__values strong { font-size: 20px; }
}
@media (min-width: 761px) {
  .tp-compare-desktop-view { display: block; }
}


/* v0.4.13 — One mobile comparison canvas for every selected item.
   Never switch to a single active item: 1–4 columns remain side-by-side in the same rails. */
@media (max-width: 760px) {
  .tp-mobile-compare--canvas .tp-mobile-compare__canvas {
    display: grid;
    gap: 14px;
  }

  .tp-mobile-compare--canvas .tp-mobile-compare__products,
  .tp-mobile-compare--canvas .tp-mobile-compare__values {
    padding-right: 12px;
    scroll-padding-inline: 1px;
  }

  .tp-mobile-compare--canvas .tp-mobile-compare__product,
  .tp-mobile-compare--canvas .tp-mobile-compare__values article {
    flex: 0 0 min(190px, 56vw);
    min-width: min(190px, 56vw);
  }

  .tp-mobile-compare--canvas .tp-mobile-compare__product {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .tp-mobile-compare--canvas .tp-mobile-compare__values article {
    min-height: 86px;
  }

  .tp-mobile-compare--canvas .tp-mobile-compare__row h2 {
    position: sticky;
    left: 0;
  }
}


/* v0.4.14 — One continuous mobile comparison container.
   No loose cards and no independent horizontal rails: the whole table swipes together. */
@media (max-width: 760px) {
  .tp-mobile-compare { padding: 20px 0 6px; }
  .tp-mobile-compare__intro { display: grid; gap: 5px; padding: 0 2px 14px; color: var(--tp-muted); font-size: 14px; line-height: 1.45; }
  .tp-mobile-compare__intro strong { color: var(--tp-navy-950); font-size: 18px; }
  .tp-mobile-compare__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    border: 1px solid var(--tp-border);
    border-radius: 18px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
  }
  .tp-mobile-compare-table {
    display: grid;
    grid-template-columns: repeat(var(--tp-mobile-columns), minmax(190px, 1fr));
    grid-template-rows: auto repeat(7, minmax(86px, auto));
    min-width: calc(var(--tp-mobile-columns) * 190px);
  }
  .tp-mobile-compare-table__head,
  .tp-mobile-compare-table__cell {
    min-width: 0;
    padding: 14px;
    border-right: 1px solid var(--tp-border);
    border-bottom: 1px solid var(--tp-border);
    scroll-snap-align: start;
  }
  .tp-mobile-compare-table__head:nth-child(${''}n) { }
  .tp-mobile-compare-table__head {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 220px;
    background: linear-gradient(180deg, #fff, #fbfbfc);
  }
  .tp-mobile-compare-table__head .tp-product-media--compare-mobile {
    width: 100%;
    height: 96px;
    margin: 0;
  }
  .tp-mobile-compare-table__head strong { color: var(--tp-navy-950); font-size: 17px; line-height: 1.18; }
  .tp-mobile-compare-table__head span { color: var(--tp-muted); font-size: 13px; line-height: 1.35; }
  .tp-mobile-compare-table__cell { display: grid; align-content: start; gap: 7px; background: #fff; }
  .tp-mobile-compare-table__cell > span { color: var(--tp-muted); font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
  .tp-mobile-compare-table__cell > strong { color: var(--tp-navy-950); font-size: 14px; line-height: 1.45; font-weight: 750; }
  .tp-mobile-compare-table__cell--price { align-content: center; background: var(--tp-accent-50); border-bottom: 0; }
  .tp-mobile-compare-table__cell--price > strong { font-size: 22px; letter-spacing: -.02em; }
  .tp-mobile-compare-table > :nth-child(${''}n) { }
}


/* v0.4.15 — Remove items directly from each mobile comparison column.
   Each selected tool gets a small, consistent × action in its header. */
@media (max-width: 760px) {
  .tp-mobile-compare-table__head {
    position: relative;
    padding-right: 48px;
  }

  .tp-mobile-compare-table__remove {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--tp-border);
    border-radius: 50%;
    background: #fff;
    color: var(--tp-muted);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }

  .tp-mobile-compare-table__remove:hover,
  .tp-mobile-compare-table__remove:focus-visible {
    border-color: var(--tp-accent-500);
    background: var(--tp-accent-50);
    color: var(--tp-navy-950);
    outline: none;
  }
}


/* v0.4.18 — Only differences toggle. All comparison columns receive the same filtered rows. */
.tp-compare-workspace__differences {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tp-navy-950);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.tp-compare-workspace__differences[aria-pressed="true"] {
  border-color: var(--tp-accent-300);
  background: var(--tp-accent-50);
}
.tp-compare-workspace__differences:hover,
.tp-compare-workspace__differences:focus-visible {
  border-color: var(--tp-accent-500);
  background: var(--tp-accent-50);
  outline: none;
}
@media (min-width: 761px) {
  .tp-compare-card__details {
    grid-template-rows: var(--tp-compare-detail-template) !important;
  }
  .tp-compare-field--difference ul {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
  }
  /* Set-inhoud is purchase-critical: never cut off accu, lader or koffer text. */
  .tp-compare-field--set ul {
    display: block;
    overflow: visible;
  }
}
@media (max-width: 760px) {
  .tp-compare-workspace__differences {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 10px;
    font-size: 12px;
  }
  .tp-mobile-compare-table {
    grid-template-rows: auto repeat(var(--tp-mobile-field-count, 7), minmax(86px, auto));
  }
}

/* v0.5.5 — Difference mode must remain useful with 2, 3 and 4 compared items.
   Equal rows are still removed. When every row differs, the remaining cells visibly
   communicate the mode instead of looking unchanged. */
.tp-compare-workspace__difference-summary {
  margin: 16px 0 -4px;
  padding: 10px 13px;
  border: 1px solid var(--tp-accent-300);
  border-radius: 12px;
  background: var(--tp-accent-50);
  color: var(--tp-accent-800);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.tp-compare-card__details--only-differences .tp-compare-field--difference-visible {
  background: linear-gradient(90deg, var(--tp-accent-50) 0%, #ffffff 78%);
  box-shadow: inset 3px 0 0 var(--tp-accent-400);
}

.tp-compare-card__details--only-differences .tp-compare-field--outlier {
  background: linear-gradient(90deg, var(--tp-accent-100) 0%, #ffffff 82%);
  box-shadow: inset 4px 0 0 var(--tp-accent-600);
}

.tp-compare-card__details--only-differences .tp-compare-field--shared p,
.tp-compare-card__details--only-differences .tp-compare-field--shared li,
.tp-compare-card__details--only-differences .tp-compare-field--shared .tp-compare-card__tags {
  opacity: .78;
}

.tp-compare-card__details--only-differences .tp-compare-field--outlier h3::after {
  content: ' Afwijkend';
  margin-left: 5px;
  color: var(--tp-accent-700);
  font-size: 9px;
  letter-spacing: .04em;
}

@media (max-width: 760px) {
  .tp-compare-workspace__difference-summary {
    margin: 14px 0 -2px;
    font-size: 12px;
  }

  .tp-mobile-compare-table__cell--difference-visible {
    background: linear-gradient(90deg, var(--tp-accent-50) 0%, #ffffff 78%);
    box-shadow: inset 3px 0 0 var(--tp-accent-400);
  }

  .tp-mobile-compare-table__cell--outlier {
    background: linear-gradient(90deg, var(--tp-accent-100) 0%, #ffffff 82%);
    box-shadow: inset 4px 0 0 var(--tp-accent-600);
  }

  .tp-mobile-compare-table__cell--shared > strong {
    opacity: .78;
  }
}


/* v0.5.8.3 — Full-content comparison contract.
   The comparison view is an explanation tool: no title, subtitle, bullet, set item,
   tag or price may be clipped. JS supplies one shared row template per selection so
   every column stays aligned even when one execution contains more package contents. */
@media (min-width: 761px) {
  .tp-compare-card__head {
    min-height: var(--tp-compare-head-height, 390px);
    height: var(--tp-compare-head-height, auto);
  }

  .tp-compare-card__head h2,
  .tp-compare-card__head p {
    display: block;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
    overflow-wrap: anywhere;
  }

  .tp-compare-card__details section {
    overflow: visible;
  }

  .tp-compare-field--difference ul,
  .tp-compare-field--set ul {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .tp-compare-card__details li,
  .tp-compare-card__details p,
  .tp-compare-card__tags span {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 760px) {
  .tp-mobile-compare-table__cell,
  .tp-mobile-compare-table__cell > strong,
  .tp-mobile-compare-table__head strong,
  .tp-mobile-compare-table__head span {
    overflow: visible;
    overflow-wrap: anywhere;
  }
}


/* v0.5.8.4 — Layout audit fix.
   Remove legacy fixed-track and clamp rules completely for desktop comparison cards.
   Alignment is measured from the actual rendered content by compare-drawer.js. */
@media (min-width: 761px) {
  .tp-compare-card__head {
    min-height: 0 !important;
    height: var(--tp-compare-head-height, auto) !important;
  }

  .tp-compare-card__head h2,
  .tp-compare-card__head p,
  .tp-compare-card__details section,
  .tp-compare-card__details section ul,
  .tp-compare-card__details section li,
  .tp-compare-card__details section p,
  .tp-compare-card__tags,
  .tp-compare-card__tags span {
    display: revert;
    min-height: 0;
    max-height: none;
    overflow: visible !important;
    text-overflow: clip;
    -webkit-line-clamp: unset !important;
    overflow-wrap: anywhere;
  }

  .tp-compare-card__tags { display: flex; }
  .tp-compare-card__tags span { display: inline-flex; }

  .tp-compare-card__details {
    grid-template-rows: var(--tp-compare-detail-template, none) !important;
  }

  .tp-compare-card__details section:nth-child(4) ul,
  .tp-compare-card__details section:nth-child(5) ul,
  .tp-compare-field--difference ul,
  .tp-compare-field--set ul {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
}

/* v0.5.409 — Category-aware technical comparison engine. */
.tp-compare-workspace__differences {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tp-navy-950);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}
.tp-compare-workspace__differences:hover,
.tp-compare-workspace__differences:focus-visible { border-color: var(--tp-accent-500); background: var(--tp-accent-50); outline: none; }
.tp-compare-highlights { margin-top: 22px; padding: 18px; border: 1px solid var(--tp-border); border-radius: 18px; background: #fff; }
.tp-compare-highlights__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; }
.tp-compare-highlights__head p { margin:0; color:var(--tp-navy-950); font-size:18px; font-weight:900; }
.tp-compare-highlights__head span { color:var(--tp-muted); font-size:12px; }
.tp-compare-highlights__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.tp-compare-highlights article { min-width:0; padding:13px 14px; border:1px solid #e5eaef; border-radius:13px; background:#fafcfc; }
.tp-compare-highlights article span { display:block; color:var(--tp-muted); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.045em; }
.tp-compare-highlights article strong { display:block; margin-top:5px; color:var(--tp-navy-950); font-size:14px; line-height:1.3; }
.tp-compare-highlights article em { display:block; margin-top:3px; color:var(--tp-accent-800); font-size:15px; font-style:normal; font-weight:900; }
.tp-compare-section-label { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:22px 2px 0; }
.tp-compare-section-label strong { color:var(--tp-navy-950); font-size:18px; }
.tp-compare-section-label span { color:var(--tp-muted); font-size:12px; }
.tp-compare-card__coverage { display:inline-flex; width:max-content; margin-top:10px; padding:4px 7px; border-radius:7px; background:#f1f4f4; color:var(--tp-muted); font-size:11px; font-weight:800; }
.tp-compare-best-badge { display:inline-flex; width:max-content; max-width:100%; margin-top:7px; padding:4px 7px; border-radius:999px; background:var(--tp-accent-100); color:var(--tp-accent-800); font-size:10px; font-weight:900; line-height:1.2; }
.tp-compare-field--best { background:#f7fbfb; }
.tp-compare-field--best.tp-compare-card__price { background:var(--tp-accent-50); }
.tp-compare-field--difference-visible { box-shadow:inset 3px 0 0 var(--tp-accent-300); }
.tp-compare-workspace__difference-summary { margin:14px 0 0; color:var(--tp-muted); font-size:12px; font-weight:800; }
.tp-compare-method-note { max-width:900px; margin:18px 0 0; color:var(--tp-muted); font-size:12px; line-height:1.5; }

@media (min-width:761px) {
  .tp-compare-card__head { min-height:0; height:var(--tp-compare-head-height, auto); }
  .tp-compare-card__details { display:grid; grid-template-rows:var(--tp-compare-detail-template, auto); }
  .tp-compare-card__details section { min-height:68px; overflow:visible; }
  .tp-compare-card__details section:nth-child(n) ul { display:block; overflow:visible; -webkit-line-clamp:unset; }
}
@media (max-width:760px) {
  .tp-compare-screen { padding-top:102px; }
  .tp-compare-workspace__intro { margin-top:9px; font-size:14px; }
  .tp-compare-workspace__actions { flex-wrap:wrap; }
  .tp-compare-highlights { padding:14px; }
  .tp-compare-highlights__head { display:block; }
  .tp-compare-highlights__head span { display:block; margin-top:4px; }
  .tp-compare-highlights__grid { grid-template-columns:1fr 1fr; }
  .tp-compare-section-label { display:block; }
  .tp-compare-section-label span { display:block; margin-top:4px; }
  .tp-mobile-compare-table__cell--best { background:#f7fbfb; }
  .tp-mobile-compare-table__cell .tp-compare-best-badge { margin-top:6px; }
}

/* v0.5.415 — Onbeperkte technische vergelijking: ieder beschikbaar veld blijft zichtbaar. */
.tp-compare-field__group,
.tp-mobile-compare-table__group {
  display: block;
  margin: -2px 0 9px;
  color: var(--tp-accent-800);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tp-compare-field__group {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tp-accent-100);
}
.tp-compare-field__group + h3 { margin-top: 0; }
.tp-mobile-compare-table__group {
  grid-column: 1 / -1;
  width: 100%;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tp-accent-100);
}

/* back-actions.css */
/* v0.2.9 — simple professional back action */
.tp-backbar {
  margin: 0 0 14px;
}

.tp-back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #34343c;
  font-weight: 850;
  font-size: 14px;
  box-shadow: none;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.tp-back-button:hover,
.tp-back-button:focus-visible {
  color: var(--tp-navy-900);
  transform: translateX(-1px);
  outline: none;
  background: transparent;
}

.tp-back-button span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(203, 213, 225, .9);
  position: relative;
}

.tp-back-button span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--tp-navy-900);
  border-bottom: 2px solid var(--tp-navy-900);
  transform: rotate(45deg);
  margin-left: 3px;
}

.tp-offer-backbar {
  display: none;
  margin: 0 0 12px;
}

/* product-detail-head.css */
/*
  Product Detail Head Component v2
  -------------------------------
  One semantic component for the selected execution on every breakpoint.
  The media canvas and the information column are independent grid areas;
  neither can overlap or push into the other.
*/
.product-detail-head {
  display: grid;
  grid-template-columns: minmax(224px, 280px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: 4px 0 26px;
  border-bottom: 1px solid var(--tp-border);
}

.product-detail-head__media {
  min-width: 0;
  align-self: start;
}

/* The shared Product Media component owns image fitting; this wrapper owns only layout. */
.product-detail-head__media .tp-product-media--detail {
  width: 100%;
  height: 224px;
  margin: 0;
}

.product-detail-head__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-kicker {
  margin: 0 0 10px;
  color: #2f3540;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.product-detail-head h1,
.group-title h1 {
  margin: 0;
  max-width: 100%;
  color: var(--tp-ink);
  font-size: clamp(32px, 3vw, 46px);
  letter-spacing: -.05em;
  line-height: 1.03;
  overflow-wrap: anywhere;
}

.product-detail-head__type {
  margin: 12px 0 0;
  color: #3b3b44;
  font-size: 18px;
  line-height: 1.42;
}

.product-detail-head__tags {
  margin-top: 14px !important;
}

.product-detail-head__contents {
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tp-border);
}

.product-detail-head__contents h2 {
  margin: 0 0 8px;
  color: var(--tp-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.product-detail-head__contents ul {
  margin: 0;
  padding-left: 20px;
  color: #34343c;
  line-height: 1.45;
}

.product-detail-head__contents li + li {
  margin-top: 2px;
}

.info-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--tp-accent-100);
  color: #303038;
  margin: 20px 0 24px;
  font-weight: 760;
  line-height: 1.45;
}

.info-strip span:first-child {
  flex: 0 0 auto;
  color: var(--tp-accent-700);
  font-size: 22px;
}

@media (max-width: 760px) {
  .product-detail-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 22px;
  }

  .product-detail-head__media .tp-product-media--detail {
    height: 188px;
  }

  .product-kicker {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .product-detail-head h1 {
    font-size: clamp(29px, 9vw, 38px);
  }

  .product-detail-head__type {
    margin-top: 10px;
    font-size: 17px;
  }

  .product-detail-head__contents {
    margin-top: 16px;
    padding-top: 14px;
  }
}

/* Mobiel: de geselecteerde uitvoering staat al volledig in de detailkop.
   De extra uitleg- en zoekblokken eronder herhalen die context en blijven daarom weg. */
@media (max-width: 760px) {
  .product-detail-head + .info-strip,
  .product-code-guide {
    display: none;
  }
}

/* product-information.css */
/* Compacte productinformatie: drie echte uitklapkaarten onder elkaar. */
.product-information {
  margin: 22px 0 26px;
  padding: 18px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: #fff;
}
.product-information__heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 12px;
}
.product-information__heading h2 {
  margin: 0;
  color: var(--tp-ink);
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -.025em;
}
.product-information__heading p {
  max-width: 56ch;
  margin: 0;
  color: #5f636d;
  font-size: 13px;
  line-height: 1.42;
  text-align: right;
}
.product-information__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.product-information__card {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: #fff;
}
.product-information__card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  color: var(--tp-ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 850;
  list-style: none;
}
.product-information__card summary::-webkit-details-marker { display: none; }
.product-information__card summary::after {
  content: '›';
  flex: 0 0 auto;
  margin-left: 14px;
  color: var(--tp-accent-700);
  font-size: 23px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.product-information__card[open] summary {
  border-bottom: 1px solid var(--tp-border);
}
.product-information__card[open] summary::after { transform: rotate(-90deg); }
.product-information__card:not([open]) .product-information__card-body { display: none; }
.product-information__card-body {
  padding: 13px 14px 14px;
  color: #41434c;
  font-size: 14px;
  line-height: 1.58;
}
.product-information__description {
  display: grid;
  gap: 10px;
  max-width: 90ch;
}
.product-information__description p {
  margin: 0;
  overflow-wrap: anywhere;
}
.product-information__source {
  display: block;
  margin-top: 12px;
  color: #747782;
  font-size: 12px;
  font-weight: 700;
}
.product-information__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 19px;
}
.product-information__list li::marker { color: var(--tp-accent-700); }
.product-information__specs { display: grid; gap: 0; margin: 0; }
.product-information__specs > div {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--tp-border);
}
.product-information__specs > div:first-child { border-top: 0; padding-top: 0; }
.product-information__specs dt { color: #555863; font-weight: 720; }
.product-information__specs dd { margin: 0; color: var(--tp-ink); font-weight: 760; }
.product-information__spec-row--single { grid-template-columns: minmax(0, 1fr) !important; }
.product-information__audit-note { margin: -4px 0 14px; padding: 10px 12px; border-left: 3px solid #b87514; background: #fff8e9; color: #65450c; border-radius: 6px; font-size: 13px; line-height: 1.45; }

/* Achterwaartse bescherming: ook een onverwacht oude renderer mag nooit meer
   twee uitgerekte informatiekolommen naast elkaar tonen. */
.product-information__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.product-information__grid > *,
.product-information__intro {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}
.product-information__intro {
  padding: 14px;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: #fff;
}
.product-information__intro h2 { margin: 0 0 8px; font-size: 15px; }
.product-information__intro p { margin: 0; line-height: 1.58; }

@media (max-width: 760px) {
  .product-information { margin: 18px 0 22px; padding: 13px; border-radius: 12px; }
  .product-information__heading { display: block; margin-bottom: 10px; }
  .product-information__heading p { margin-top: 4px; text-align: left; }
  .product-information__card summary { min-height: 46px; padding: 0 12px; font-size: 14px; }
  .product-information__card-body { padding: 11px 12px 12px; font-size: 14px; }
  .product-information__specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
  .product-information__audit-note { margin: -2px 0 12px; font-size: 12px; }
}

/* v0.5.415 — Alle technische bronregels blijven zichtbaar, gegroepeerd voor leesbaarheid. */
.product-information__spec-group + .product-information__spec-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tp-border);
}
.product-information__spec-group h3 {
  margin: 0 0 10px;
  color: var(--tp-navy-950);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .product-information__spec-group + .product-information__spec-group { margin-top: 14px; padding-top: 13px; }
  .product-information__spec-group h3 { margin-bottom: 8px; font-size: 11px; }
}

/* product-images.css */
/*
  ToolPakker Product Media System v1
  ----------------------------------
  One component owns every product photo on the site.

  Contract:
  - Every source image is shown in full inside its own media canvas.
  - No card may crop, zoom, mask or package-type-scale an image.
  - Mobile, desktop, detail and comparison use the same fitting rule.
  - A card determines only the canvas size; the media component determines
    how the image is fitted into that canvas.
*/
.tp-product-media {
  --tp-media-padding: 14px;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--tp-media-padding);
  overflow: visible;
  border: 1px solid rgba(21, 42, 72, .08);
  border-radius: 14px;
  background: #fff;
}

/*
  The image keeps its native aspect ratio. Both dimensions are automatic and
  the maximum dimensions are the inner canvas. This is the single rule that
  guarantees ToolPakker itself never removes pixels from a product image.
*/
.tp-product-media > img {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  object-fit: contain;
  object-position: center;
}

/* Canvas sizes, not image scaling rules. */
.tp-product-media--model {
  width: 116px;
  height: 128px;
  --tp-media-padding: 12px;
}

.tp-product-media--variant {
  width: 100%;
  height: 156px;
  --tp-media-padding: 14px;
}

.tp-product-media--detail {
  width: 100%;
  height: 224px;
  --tp-media-padding: 18px;
}

.tp-product-media--compare {
  width: 100%;
  height: 184px;
  --tp-media-padding: 16px;
  margin: 0 0 16px;
}

.tp-product-media--compare-mobile {
  width: 100%;
  height: 104px;
  --tp-media-padding: 10px;
  margin: 0;
}

/* A neutral, honest state for an item without an allowed source photo. */
.tp-product-media--no-photo {
  place-items: center;
  padding: 12px;
  border-style: dashed;
  border-color: rgba(13, 107, 110, .28);
  background: #f5f7f7;
}

.tp-product-media__empty {
  max-width: 14ch;
  color: #5d696f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 760px) {
  .tp-product-media {
    border-radius: 11px;
  }

  .tp-product-media--model {
    width: 64px;
    height: 64px;
    --tp-media-padding: 8px;
  }

  .tp-product-media--variant {
    width: 86px;
    height: 86px;
    --tp-media-padding: 9px;
  }

  .tp-product-media--detail {
    height: 164px;
    --tp-media-padding: 14px;
  }

  .tp-product-media--compare {
    height: 156px;
    --tp-media-padding: 14px;
  }

  .tp-product-media--compare-mobile {
    height: 96px;
    --tp-media-padding: 9px;
  }
}

/* Als een externe feedafbeelding later toch wegvalt, blijft de kaart bruikbaar. */
.tp-product-image-fallback {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 12px;
  color: #5d696f;
  background: #f5f7f7;
  border: 1px dashed rgba(13, 107, 110, .28);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

/* variant-cards.css */
/*
  Variant Card Component v4
  -------------------------
  Neutral, compact execution cards. Each fact has one place only:
  model, product type, package type, verified contents and price/action.
  The component is provider-neutral and uses the same semantic structure on
  desktop, tablet and mobile.
*/
.variants-title { margin: 26px 0 8px; font-size: 24px; letter-spacing: -.035em; }
.variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.variant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 355px;
  padding: 14px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  background: #fff;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.variant-card:hover,
.variant-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--tp-accent-500);
  box-shadow: var(--tp-shadow-soft);
  outline: none;
}
.variant-card.is-selected {
  border: 2px solid var(--tp-accent-500);
  box-shadow: inset 4px 0 0 var(--tp-accent-500), 0 0 0 3px rgba(13,107,110,.10);
}
.variant-card__media { flex: 0 0 auto; margin-bottom: 13px; }
.variant-card__media .tp-product-media--variant { height: 158px; margin: 0; }
.variant-card__identity { min-width: 0; }
.variant-card h3 {
  margin: 0;
  color: var(--tp-ink);
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.variant-card__label {
  margin: 6px 0 0;
  color: var(--tp-muted);
  font-size: 12px;
  line-height: 1.3;
}
.variant-selected-status {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-top: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tp-accent-100);
  color: var(--tp-accent-800);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
 .variant-card__essentials {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}
.variant-type {
  margin: 0;
  color: var(--tp-muted);
  font-size: 13px;
  line-height: 1.35;
}
.variant-contents-line {
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--tp-border);
}
.variant-contents-line__label {
  margin: 0 0 6px;
  color: var(--tp-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.variant-contents-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: #334049;
  font-size: 12px;
  line-height: 1.38;
  list-style: none;
}
.variant-contents-list li {
  position: relative;
  padding-left: 13px;
}
.variant-contents-list li::before {
  position: absolute;
  left: 1px;
  top: .48em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--tp-accent-600);
  content: "";
}.variant-card__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
}
.variant-price { min-width: 0; }
.variant-price span { display: block; margin-bottom: 3px; color: var(--tp-muted); font-size: 13px; }
.variant-price strong { display: block; font-size: 24px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.variant-card .compare-card-action {
  position: static;
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 36px;
  padding: 8px 14px;
  box-shadow: none;
}

@media (max-width: 1200px) {
  .variant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .variant-grid { grid-template-columns: 1fr; gap: 10px; }
  .variant-card { min-height: 0; padding: 12px; border-radius: 14px; }
  .variant-card__media { margin-bottom: 11px; }
  .variant-card__media .tp-product-media--variant { height: 132px; }
  .variant-card h3 { font-size: 19px; }
  .variant-card__essentials { gap: 4px; margin-top: 7px; }
  .variant-type { font-size: 13px; }
  .variant-contents-line { margin-top: 3px; padding-top: 8px; }
  .variant-contents-line__label { margin-bottom: 5px; }
  .variant-contents-list { gap: 3px; font-size: 12px; }
  .variant-card__footer { padding-top: 12px; }
  .variant-price span { display: inline; margin: 0 5px 0 0; font-size: 12px; }
  .variant-price strong { display: inline; font-size: 21px; }
  .variant-card .compare-card-action { min-width: 98px; min-height: 34px; padding: 7px 12px; font-size: 12px; }
}

/* Bosch technical model variants: distinct machine geometry/size must be visible
   before price. This remains a neutral product property, not merchant copy. */
.variant-technical-difference {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  color: var(--ink, #172233);
  font-size: 0.86rem;
  line-height: 1.35;
}
.variant-technical-difference strong {
  font-size: 0.76rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.variant-technical-difference span {
  color: var(--muted, #5e6a78);
}

/*
  Mobile compact execution cards v0.5.72
  ---------------------------------------
  On phone widths an execution is scanned as one compact row: the exact
  product image stays on the left and the execution code, verified contents,
  price and comparison action remain together alongside it. The base model
  already names the machine, so the repeated product-type sentence is hidden
  here to prevent duplicate information. Desktop and tablet layouts remain
  governed by the component rules above.
*/
@media (max-width: 760px) {
  .variant-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas:
      "media identity"
      "media essentials"
      "media footer";
    gap: 6px 11px;
    align-items: start;
    padding: 11px;
  }

  .variant-card__media {
    grid-area: media;
    align-self: start;
    margin: 0;
  }

  .variant-card__media .tp-product-media--variant {
    width: 86px;
    height: 86px;
    --tp-media-padding: 8px;
  }

  .variant-card__identity {
    grid-area: identity;
    align-self: start;
  }

  .variant-card h3 {
    font-size: 17px;
    line-height: 1.12;
  }
  .variant-card__label {
    margin-top: 4px;
    font-size: 11px;
  }

  .variant-selected-status {
    min-height: 19px;
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 9px;
  }

  .variant-card__essentials {
    grid-area: essentials;
    gap: 5px;
    margin: 0;
  }

  .variant-type {
    display: none;
  }

  .variant-technical-difference {
    gap: 1px;
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .variant-technical-difference strong {
    font-size: 10px;
  }

  .variant-contents-line {
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  .variant-contents-line__label {
    margin-bottom: 3px;
    color: var(--tp-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .variant-contents-list {
    gap: 2px;
    font-size: 12px;
    line-height: 1.3;
  }

  .variant-contents-list li {
    padding-left: 10px;
  }

  .variant-contents-list li::before {
    left: 1px;
    width: 3px;
    height: 3px;
  }

  .variant-card__footer {
    grid-area: footer;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-top: 2px;
  }

  .variant-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .variant-price span {
    margin: 0;
    font-size: 11px;
  }

  .variant-price strong {
    font-size: 19px;
  }

  .variant-card .compare-card-action {
    position: static;
    min-width: 82px;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .variant-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px 9px;
    padding: 10px;
  }

  .variant-card__media .tp-product-media--variant {
    width: 76px;
    height: 76px;
  }

  .variant-card h3 {
    font-size: 16px;
  }

  .variant-price strong {
    font-size: 18px;
  }

  .variant-card .compare-card-action {
    min-width: 76px;
    padding-inline: 8px;
  }
}

/* more-info.css */
.more-info {
  margin-top: 22px;
  border: 1px solid var(--tp-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 36, 42, 0.05);
}
.more-info summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #1f2933;
}
.more-info summary::-webkit-details-marker { display: none; }
.more-info summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.more-info[open] summary::after { transform: rotate(-135deg); }
.more-info-body {
  padding: 0 20px 20px;
  color: #454b55;
  line-height: 1.58;
}
.more-info-body p { margin: 0 0 12px; }
.more-info-lead strong { color: #222b35; }
.more-info-note {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f8f6;
  color: #374151;
}
.more-info-section { margin-top: 18px; }
.more-info-section h3 {
  margin: 0 0 8px;
  font-size: .98rem;
  line-height: 1.3;
  color: #202932;
}
.more-info-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.more-info-code-list,
.more-info-variant-list {
  border-top: 1px solid #edf0ef;
}
.more-info-code-list li,
.more-info-variant-list li {
  display: grid;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf0ef;
}
.more-info-code-list li { grid-template-columns: 64px 1fr; }
.more-info-variant-list li { grid-template-columns: minmax(110px, max-content) 1fr; }
.more-info-code-list strong,
.more-info-variant-list strong {
  color: #17262b;
  font-weight: 900;
}
.more-info-code-list span,
.more-info-variant-list span {
  color: #4b5563;
}
@media (max-width: 680px) {
  .more-info summary { padding: 15px 16px; }
  .more-info-body { padding: 0 16px 18px; }
  .more-info-code-list li,
  .more-info-variant-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* variant-flow.css */
/* Variant-flow heading and intro text use one bounded, wrapping measure. */
.group-title--variant-only {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.variants-subtitle {
  max-width: 68ch;
  margin: 0 0 1rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: normal;
}

.product-kicker {
  margin: 0 0 0.35rem;
  color: var(--blue);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

/* offer-empty.css */
.offer-empty-small {
  min-height: 300px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  background: linear-gradient(180deg, #fbfbfc, #fff);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 26px;
  color: var(--tp-muted);
}
.offer-empty-small .tp-empty-icon { width: 96px; height: 96px; font-size: 42px; }
.offer-empty-small h3 { margin: 0 0 9px; color: var(--tp-text); font-size: 24px; letter-spacing: -.03em; }
.offer-empty-small p { margin: 0; line-height: 1.55; }

/* dealer-list.css */
.dealer-list { margin-top: 24px; }
.dealer-list h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.025em; }
.dealer-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 9px;
  background: #fff;
}
.dealer-logo-box {
  min-height: 36px;
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-size: 11px;
  background: #fff;
  color: var(--tp-navy-950);
}
/* Officiële TradeTracker-creative: volledig woordmerk, geen afgekorte tekstplaceholder. */
.dealer-logo-box--image {
  border: 0;
  background: transparent;
  overflow: visible;
}
.dealer-logo-box--image img {
  display: block;
  width: auto;
  max-width: 72px;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}

/* Mobiel: bij aangesloten aanbieders is het officiële woordmerk voldoende.
   Naam en netwerkaanduiding zouden dezelfde aanbieder dubbel tonen. */
@media (max-width: 760px) {
  .dealer-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
    padding: 9px 10px;
  }

  .dealer-row > strong {
    display: none;
  }

  .dealer-logo-box {
    min-width: 72px;
  }

  .dealer-logo-box--image img {
    max-width: 92px;
    max-height: 28px;
  }
}

/* offer-cards.css */
.offer-context {
  display: grid;
  gap: 3px;
  margin-bottom: 16px;
}
.offer-context-label,
.offer-context span:last-child {
  color: var(--tp-muted);
  font-size: 13px;
}
.offer-context strong {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.offer-card-list {
  display: grid;
  gap: 13px;
}
.offer-card {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  background: #fff;
  padding: 15px;
  display: grid;
  gap: 14px;
  box-shadow: 0 8px 22px rgba(23, 24, 33, .045);
}
.offer-card.is-best {
  border-color: rgba(13,107,110,.78);
  box-shadow: 0 0 0 4px rgba(13,107,110,.12), 0 12px 26px rgba(23, 24, 33, .06);
}
.offer-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.offer-merchant {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 900;
}
.offer-merchant strong {
  display: block;
  overflow-wrap: anywhere;
}
.offer-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tp-soft-2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 950;
  color: var(--tp-navy-950);
  border: 1px solid var(--tp-border);
  overflow: hidden;
}
.offer-logo--image {
  width: 92px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.offer-logo--image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.offer-badge {
  display: inline-flex;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13,107,110,.12);
  color: var(--tp-accent-700);
  font-size: 11px;
  font-weight: 950;
}
.offer-price-block {
  text-align: right;
  white-space: nowrap;
}
.offer-price-block span {
  display: block;
  color: var(--tp-muted);
  font-size: 12px;
  margin-bottom: 2px;
}
.offer-price-block strong {
  font-size: 24px;
  letter-spacing: -.045em;
}
.offer-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.offer-facts div {
  border: 1px solid var(--tp-border);
  border-radius: 11px;
  padding: 9px;
  background: #fbfbfc;
  min-width: 0;
}
.offer-facts dt {
  color: var(--tp-muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}
.offer-facts dd {
  margin: 0;
  color: var(--tp-text);
  font-weight: 850;
  font-size: 13px;
  line-height: 1.25;
}
.offer-free,
.offer-stock { color: var(--tp-green-600) !important; }
.offer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 0;
  background: var(--tp-accent-500);
  color: #fff;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.offer-button:hover { background: var(--tp-accent-600); }
.offer-note { color: var(--tp-muted); font-size: 13px; display: flex; gap: 8px; align-items: center; padding: 15px 0 0; line-height: 1.45; }

.offer-price-block small {
  display: block;
  margin-top: 3px;
  color: var(--tp-text-muted);
  font-size: 0.72rem;
  font-weight: 650;
}
.offer-unknown {
  color: var(--tp-text-muted);
}

/* v0.5.29 — bronmoment bij live ToolMax-feedaanbiedingen */
.offer-verified-at {
  margin: 0.65rem 0 0;
  font-size: 0.76rem;
  color: var(--tp-muted);
}

/* offer-data-status.css */
/* Offers data quality and publication states */
.offer-data-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  margin: 0 0 14px;
  border: 1px solid #d9e3ed;
  border-radius: 12px;
  background: #f7fafc;
  color: var(--tp-text);
}
.offer-data-status.is-live { border-color: rgba(22, 136, 76, .25); background: #f3fbf6; }
.offer-data-status-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: #8b9bab; }
.offer-data-status.is-live .offer-data-status-dot { background: var(--tp-green-600); }
.offer-data-status strong { display: block; font-size: 13px; line-height: 1.2; margin-bottom: 3px; }
.offer-data-status span:last-child { display: block; font-size: 12px; color: var(--tp-muted); line-height: 1.35; }
.offer-data-badge { display: inline-flex; margin-top: 5px; padding: 4px 8px; border-radius: 999px; background: #eef3f7; color: #5e5e67; font-size: 11px; font-weight: 900; }
.offer-data-badge.is-live { background: rgba(22, 136, 76, .12); color: #087a3e; }
.offer-card.is-sample { box-shadow: 0 8px 22px rgba(23, 24, 33, .03); }
.offer-card.is-sample .offer-price-block strong { color: #2e3d4d; }
.offer-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-fact-wide { grid-column: 1 / -1; }
.offer-button.is-disabled { background: #e8eef3; color: #7a8997; cursor: not-allowed; box-shadow: none; }
.offer-button.is-disabled:hover { background: #e8eef3; }
@media (max-width: 760px) {
  .offer-data-status { padding: 10px; margin-bottom: 12px; }
}

/* offer-spacing.css */
/* v0.2.2 — prevent the last offer card from touching/cutting into the panel edge. */
.offer-card-list {
  padding-bottom: 18px;
}

.offer-card:last-child {
  margin-bottom: 8px;
}

.offer-note {
  padding-bottom: 8px;
}

/* layout-modes.css */
/*
  ToolPakker layout modes v1
  --------------------------
  Exactly one root mode is active at a time, set before CSS paints:
  - desktop: >= 1401px and normal height
  - tablet:  821–1400px and normal height
  - compact: <= 820px OR a short landscape phone

  Compact is a single document-flow container. It deliberately has no sticky
  side panels, internal vertical scroll areas, viewport-height panels or broad
  touch-action overrides. Browser scrolling belongs only to the page.
*/

html[data-layout-mode="tablet"] .tp-header {
  min-height: 94px;
  height: auto;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  grid-template-areas: "brand compare" "search search";
  gap: 10px 16px;
  padding: 12px 18px 14px;
}
html[data-layout-mode="tablet"] .tp-brand { grid-area: brand; justify-self: start; }
html[data-layout-mode="tablet"] .tp-search { grid-area: search; width: 100%; margin: 0; }
html[data-layout-mode="tablet"] .tp-compare { grid-area: compare; justify-self: end; }
html[data-layout-mode="tablet"] .tp-search input { height: 50px; font-size: 16px; }
html[data-layout-mode="tablet"] .tp-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sidebar" "main" "offers";
  padding: 16px 18px 20px;
  gap: 14px;
}
html[data-layout-mode="tablet"] .tp-sidebar,
html[data-layout-mode="tablet"] .tp-main-panel,
html[data-layout-mode="tablet"] .tp-offers-panel {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}
html[data-layout-mode="tablet"] .tp-sidebar { grid-area: sidebar; }
html[data-layout-mode="tablet"] .tp-main-panel { grid-area: main; min-height: 0; }
html[data-layout-mode="tablet"] .tp-offers-panel { grid-area: offers; }
html[data-layout-mode="tablet"] .offer-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-layout-mode="tablet"] .offer-card.is-best { grid-column: 1 / -1; }

/* Small laptops and landscape tablets need a balanced two-column workspace.
   The previous one-column tablet layout made the catalogue look stretched,
   while the desktop grid could not fit below roughly 1400px without overflow. */
@media (min-width: 1025px) {
  html[data-layout-mode="tablet"] .tp-shell {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 40%);
    grid-template-areas:
      "sidebar sidebar"
      "main offers";
    align-items: start;
    padding: 16px 18px 22px;
    gap: 14px;
  }
  html[data-layout-mode="tablet"] .tp-sidebar { grid-area: sidebar; }
  html[data-layout-mode="tablet"] .tp-main-panel { grid-area: main; min-width: 0; }
  html[data-layout-mode="tablet"] .tp-offers-panel { grid-area: offers; min-width: 0; }
  html[data-layout-mode="tablet"] .offer-card-list { grid-template-columns: 1fr; }
  html[data-layout-mode="tablet"] .offer-card.is-best { grid-column: auto; }
}

html[data-layout-mode="compact"],
html[data-layout-mode="compact"] body { overflow-x: clip; }
html[data-layout-mode="compact"] body { background: #f8f8f9; }
html[data-layout-mode="compact"] .tp-header {
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "brand compare" "search search";
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px 11px;
}
html[data-layout-mode="compact"] .tp-brand { grid-area: brand; justify-self: start; gap: 9px; }
html[data-layout-mode="compact"] .tp-compare { grid-area: compare; justify-self: end; min-height: 34px; gap: 6px; font-size: 0; }
html[data-layout-mode="compact"] .tp-compare span:first-child { font-size: 20px; }
html[data-layout-mode="compact"] .tp-compare strong { min-width: 23px; height: 23px; font-size: 12px; }
html[data-layout-mode="compact"] .tp-search { grid-area: search; width: 100%; margin: 0; min-width: 0; }
html[data-layout-mode="compact"] .tp-search input { height: 46px; border-radius: 12px; padding-left: 45px; font-size: 14px; }
html[data-layout-mode="compact"] .tp-search-icon { left: 15px; font-size: 22px; }
html[data-layout-mode="compact"] .tp-brand-mark { width: 40px; height: 40px; border-width: 3px; font-size: 22px; border-radius: 11px; }
html[data-layout-mode="compact"] .tp-brand-text { font-size: 29px; }

html[data-layout-mode="compact"] .tp-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "sidebar" "main" "offers";
  align-items: start;
  width: 100%;
  max-width: none;
  padding: 10px 12px 12px;
  gap: 10px;
}
html[data-layout-mode="compact"] .tp-sidebar,
html[data-layout-mode="compact"] .tp-main-panel,
html[data-layout-mode="compact"] .tp-offers-panel,
html[data-layout-mode="compact"] #mainContent,
html[data-layout-mode="compact"] #offersContent {
  position: static;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}
html[data-layout-mode="compact"] .tp-sidebar { grid-area: sidebar; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
html[data-layout-mode="compact"] .tp-main-panel { grid-area: main; border-radius: 16px; }
html[data-layout-mode="compact"] .tp-offers-panel { grid-area: offers; border-radius: 16px; }
html[data-layout-mode="compact"] #mainContent,
html[data-layout-mode="compact"] #offersContent { padding: 16px 14px; }
html[data-layout-mode="compact"] .panel-heading { padding: 15px 14px 11px; }
html[data-layout-mode="compact"] .panel-heading h2 { font-size: 21px; }
html[data-layout-mode="compact"] .tp-sidebar .panel-heading { display: none; }
html[data-layout-mode="compact"] .tp-section-title,
html[data-layout-mode="compact"] .group-title h1,
html[data-layout-mode="compact"] .product-detail-head h1 { font-size: 28px; line-height: 1.05; letter-spacing: -.045em; }
html[data-layout-mode="compact"] .tp-subtitle,
html[data-layout-mode="compact"] .group-title p,
html[data-layout-mode="compact"] .product-detail-head p { font-size: 14px; line-height: 1.45; margin: 7px 0 12px; }
html[data-layout-mode="compact"] .tp-empty-state { min-height: 0; display: block; padding: 14px 10px; }
html[data-layout-mode="compact"] .tp-empty-icon { display: none; }
html[data-layout-mode="compact"] .tp-empty-state h3 { font-size: 25px; margin: 0 0 5px; }
html[data-layout-mode="compact"] .tp-empty-state p { max-width: none; font-size: 14px; }
html[data-layout-mode="compact"] .tp-start-steps { gap: 12px; margin-top: 18px; }
html[data-layout-mode="compact"] .tp-step-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; }
html[data-layout-mode="compact"] .tp-step-icon { display: none; }
html[data-layout-mode="compact"] .tp-step-number { width: 38px; height: 38px; font-size: 17px; }
html[data-layout-mode="compact"] .tp-step-card h3 { margin: 0 0 3px; font-size: 18px; }
html[data-layout-mode="compact"] .tp-step-card p { font-size: 14px; }

html[data-layout-mode="compact"] .brand-filter-wrap { margin: 16px -2px 18px; }
html[data-layout-mode="compact"] .brand-filter { touch-action: pan-x; }
html[data-layout-mode="compact"] .brand-filter button { min-height: 39px; padding: 0 14px; font-size: 14px; }
html[data-layout-mode="compact"] .variants-title { margin: 2px 0 8px; font-size: 27px; line-height: 1.08; }
html[data-layout-mode="compact"] .variants-subtitle { margin: 0 0 14px; font-size: 16px; line-height: 1.36; }
html[data-layout-mode="compact"] .tp-backbar { margin-bottom: 10px; }
html[data-layout-mode="compact"] .product-detail-head { gap: 12px; padding-bottom: 18px; }
html[data-layout-mode="compact"] .product-detail-head .tp-product-media--detail {
  height: 164px;
  --tp-media-padding: 14px;
}
html[data-layout-mode="compact"] .product-detail-head .model-tags { gap: 6px; margin-bottom: 7px; }
html[data-layout-mode="compact"] .product-detail-head .tp-pill { min-height: 30px; padding: 5px 10px; font-size: 13px; }
html[data-layout-mode="compact"] .product-detail-head ul { margin-top: 10px; line-height: 1.35; }
html[data-layout-mode="compact"] .model-list,
html[data-layout-mode="compact"] .variant-grid,
html[data-layout-mode="compact"] .offer-card-list { grid-template-columns: 1fr; gap: 10px; }
html[data-layout-mode="compact"] .model-card {
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-areas:
    "media content"
    "side side";
  align-items: start;
  min-height: 0;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
}
html[data-layout-mode="compact"] .model-card__media { grid-area: media; align-self: start; }
html[data-layout-mode="compact"] .model-card .tp-product-media {
  width: 58px;
  height: 58px;
  --tp-media-padding: 7px;
}
html[data-layout-mode="compact"] .model-card__content { grid-area: content; min-width: 0; }
html[data-layout-mode="compact"] .model-title { font-size: 18px; line-height: 1.12; }
html[data-layout-mode="compact"] .model-copy,
html[data-layout-mode="compact"] .model-meta { font-size: 13px; }
html[data-layout-mode="compact"] .model-copy { margin-bottom: 6px; }
html[data-layout-mode="compact"] .model-card__side {
  grid-area: side;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-top: 2px;
}
html[data-layout-mode="compact"] .model-card .compare-card-action {
  order: 2;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: none;
}
html[data-layout-mode="compact"] .model-card__price-row {
  order: 1;
  display: flex;
  width: auto;
  justify-content: flex-start;
  gap: 7px;
}
html[data-layout-mode="compact"] .model-card__price { text-align: left; }
html[data-layout-mode="compact"] .model-card__price > span { margin: 0; font-size: 12px; }
html[data-layout-mode="compact"] .model-card__price strong { font-size: 20px; }
html[data-layout-mode="compact"] .model-card__arrow { display: none; }

/* Variant Card Component v2 uses its own document-flow structure.
   Compact mode only sets density; it never creates a separate card layout. */
html[data-layout-mode="compact"] .variant-grid { gap: 10px; }
html[data-layout-mode="compact"] .variant-card { box-sizing: border-box; }
html[data-layout-mode="compact"] .variant-card.is-selected,
html[data-layout-mode="compact"] .variant-card.is-selected:hover,
html[data-layout-mode="compact"] .variant-card.is-selected:focus-visible {
  background: #fff;
  border: 2px solid var(--tp-accent-500);
  box-shadow: inset 4px 0 0 var(--tp-accent-500), 0 0 0 3px rgba(13,107,110,.10);
}
html[data-layout-mode="compact"] .product-detail-head { grid-template-columns: 1fr; gap: 14px; }
html[data-layout-mode="compact"] .offer-empty-small { min-height: 180px; padding: 18px 14px; border-radius: 14px; }
html[data-layout-mode="compact"] .dealer-list { margin-top: 14px; }
html[data-layout-mode="compact"] .dealer-row { grid-template-columns: 54px minmax(0, 1fr); min-height: 50px; padding: 7px 8px; border-radius: 11px; }
html[data-layout-mode="compact"] .dealer-logo-box { min-height: 32px; font-size: 10px; }
html[data-layout-mode="compact"] .offer-card { padding: 13px; border-radius: 15px; gap: 12px; }
html[data-layout-mode="compact"] .offer-card-top { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
html[data-layout-mode="compact"] .offer-logo { width: 38px; height: 38px; border-radius: 11px; font-size: 10px; }
html[data-layout-mode="compact"] .offer-price-block strong { font-size: 23px; }
html[data-layout-mode="compact"] .offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-layout-mode="compact"] .offer-facts div { padding: 8px 7px; }
html[data-layout-mode="compact"] .offer-button { width: 100%; min-height: 42px; border-radius: 10px; font-size: 15px; }
html[data-layout-mode="compact"] .offer-note { padding-bottom: 10px; font-size: 12px; }

/* The compact container is denser in landscape, but it remains the same document flow. */
@media (orientation: landscape) and (max-height: 599px) {
  html[data-layout-mode="compact"] .tp-header {
    grid-template-columns: minmax(126px, 170px) minmax(160px, 1fr) auto;
    grid-template-areas: "brand search compare";
    gap: 9px;
    padding: 7px 12px;
  }
  html[data-layout-mode="compact"] .tp-brand { gap: 7px; }
  html[data-layout-mode="compact"] .tp-brand-mark { width: 31px; height: 31px; border-width: 3px; border-radius: 9px; font-size: 15px; }
  html[data-layout-mode="compact"] .tp-brand-text { font-size: 21px; }
  html[data-layout-mode="compact"] .tp-search input { height: 38px; padding-left: 38px; font-size: 13px; }
  html[data-layout-mode="compact"] .tp-search-icon { left: 12px; font-size: 19px; }
  html[data-layout-mode="compact"] .tp-compare { min-height: 32px; }
  html[data-layout-mode="compact"] .tp-compare span:first-child { font-size: 18px; }
  html[data-layout-mode="compact"] .tp-compare strong { min-width: 20px; height: 20px; font-size: 11px; }
  html[data-layout-mode="compact"] .tp-shell { padding: 8px 12px 12px; gap: 8px; }
  html[data-layout-mode="compact"] .tp-main-panel,
  html[data-layout-mode="compact"] .tp-offers-panel { border-radius: 14px; }
  html[data-layout-mode="compact"] #mainContent,
  html[data-layout-mode="compact"] #offersContent { padding: 12px; }
  html[data-layout-mode="compact"] .tp-section-title,
  html[data-layout-mode="compact"] .group-title h1,
  html[data-layout-mode="compact"] .product-detail-head h1 { font-size: 22px; }
  html[data-layout-mode="compact"] .tp-start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  html[data-layout-mode="compact"] .tp-step-card { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px; }
  html[data-layout-mode="compact"] .tp-step-number { width: 28px; height: 28px; font-size: 14px; }
  html[data-layout-mode="compact"] .tp-step-card h3 { font-size: 14px; }
  html[data-layout-mode="compact"] .tp-step-card p { font-size: 12px; }
  html[data-layout-mode="compact"] .model-card { grid-template-columns: 56px minmax(0, 1fr); min-height: 0; padding: 10px; }
  html[data-layout-mode="compact"] .model-card .tp-product-media {
    width: 52px;
    height: 52px;
    --tp-media-padding: 6px;
  }
  html[data-layout-mode="compact"] .model-title { font-size: 16px; }
  html[data-layout-mode="compact"] .model-copy,
  html[data-layout-mode="compact"] .model-meta { font-size: 12px; }
  html[data-layout-mode="compact"] .model-card__price strong { font-size: 17px; }
  /* Variant cards keep the same component structure in compact landscape.
     Only the surrounding shell becomes denser above. */
}

/* v0.5.70 — Mobile Model Card Component v3
   Mobile-only polish. Desktop and tablet retain the locked Model Card v2 layout.
   The compact card keeps four clear zones: media + information header, tags/meta,
   then one fixed price/action footer. */
html[data-layout-mode="compact"] .model-card {
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-areas:
    "media content"
    "side side";
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
}

html[data-layout-mode="compact"] .model-card__media {
  align-self: center;
}

html[data-layout-mode="compact"] .model-card .tp-product-media,
html[data-layout-mode="compact"] .model-card .tp-product-media--model {
  width: 76px;
  height: 76px;
  --tp-media-padding: 6px;
}

html[data-layout-mode="compact"] .model-card__content {
  align-self: stretch;
  justify-content: flex-start;
  padding-top: 1px;
}

html[data-layout-mode="compact"] .model-title {
  font-size: 19px;
  line-height: 1.12;
  letter-spacing: -.028em;
  margin-bottom: 4px;
}

html[data-layout-mode="compact"] .model-copy {
  -webkit-line-clamp: 1;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.3;
}

html[data-layout-mode="compact"] .model-tags {
  gap: 6px;
  margin: 0 0 7px;
}

html[data-layout-mode="compact"] .model-tags .tp-pill {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.1;
}

/* The scope tag repeats the meta line on mobile. Keep the platform badge,
   then show the number of exact executions once in the meta line below. */
html[data-layout-mode="compact"] .model-tags .model-card__scope-pill {
  display: none;
}

html[data-layout-mode="compact"] .model-meta {
  font-size: 12px;
  line-height: 1.25;
  color: var(--tp-muted);
}

html[data-layout-mode="compact"] .model-meta[data-card-kind="family"] {
  font-size: 0;
  font-weight: 800;
  color: var(--tp-accent-700);
}

html[data-layout-mode="compact"] .model-meta[data-card-kind="family"]::after {
  content: attr(data-variant-count) " uitvoeringen beschikbaar";
  font-size: 12px;
  line-height: 1.25;
}

html[data-layout-mode="compact"] .model-card__side {
  min-height: 53px;
  margin-top: 2px;
  padding-top: 11px;
  border-top: 1px solid var(--tp-border);
  align-items: end;
}

html[data-layout-mode="compact"] .model-card__price > span {
  margin: 0 0 2px;
  font-size: 11px;
  line-height: 1;
}

html[data-layout-mode="compact"] .model-card__price strong {
  font-size: 22px;
  line-height: 1.02;
}

html[data-layout-mode="compact"] .model-card .compare-card-action {
  min-width: 94px;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
}

@media (max-width: 390px) {
  html[data-layout-mode="compact"] .model-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  html[data-layout-mode="compact"] .model-card .tp-product-media,
  html[data-layout-mode="compact"] .model-card .tp-product-media--model {
    width: 70px;
    height: 70px;
  }

  html[data-layout-mode="compact"] .model-title { font-size: 18px; }
  html[data-layout-mode="compact"] .model-tags .tp-pill { padding-inline: 9px; }
  html[data-layout-mode="compact"] .model-card .compare-card-action { min-width: 88px; }
}

/* category-navigation.css */
/* Category navigation owns tablet and compact layouts. All category options are text-only. */
.mobile-category-toggle { display: none; }

html[data-layout-mode="tablet"] .tp-sidebar {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

html[data-layout-mode="tablet"] .tp-sidebar .panel-heading,
html[data-layout-mode="tablet"] .mobile-category-toggle {
  display: none !important;
}

html[data-layout-mode="tablet"] .tp-sidebar .category-list {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  touch-action: pan-x;
}

html[data-layout-mode="tablet"] .tp-sidebar .category-button {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  scroll-snap-align: start;
}

html[data-layout-mode="tablet"] .tp-sidebar .category-button.is-active {
  border-color: rgba(13,107,110,.30);
  background: rgba(13,107,110,.10);
}

html[data-layout-mode="tablet"] .tp-sidebar .category-button.is-active::before {
  display: none;
}

html[data-layout-mode="tablet"] .tp-sidebar .category-status {
  margin-left: 2px;
}

html[data-layout-mode="compact"] .tp-sidebar .panel-heading { display: none; }

html[data-layout-mode="compact"] .mobile-category-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 9px 12px 9px 15px;
  border: 1px solid rgba(226,232,240,.98);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23,24,33,.06);
  color: var(--tp-text);
  text-align: left;
}

html[data-layout-mode="compact"] .mobile-category-toggle:focus-visible {
  outline: 3px solid rgba(13,107,110,.20);
  outline-offset: 3px;
}

html[data-layout-mode="compact"] .mobile-category-toggle__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html[data-layout-mode="compact"] .mobile-category-toggle__text strong {
  color: var(--tp-text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.01em;
}

html[data-layout-mode="compact"] .mobile-category-toggle__text small {
  overflow: hidden;
  color: var(--tp-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-layout-mode="compact"] .mobile-category-toggle__chevron {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 10px;
  background: #f7f8f8;
}

html[data-layout-mode="compact"] .mobile-category-toggle__chevron::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tp-navy-900);
  border-bottom: 2px solid var(--tp-navy-900);
  transform: rotate(45deg) translate(-1px, -2px);
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .mobile-category-toggle__chevron {
  background: rgba(13,107,110,.10);
  border-color: rgba(13,107,110,.20);
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .mobile-category-toggle__chevron::before {
  transform: rotate(225deg) translate(-1px, -2px);
}

html[data-layout-mode="compact"] .tp-sidebar:not(.is-category-open) .category-list { display: none; }

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  max-height: min(67vh, 620px);
  margin: 8px 0 0;
  padding: 7px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(23,24,33,.14);
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 760;
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-button + .category-button {
  border-top: 1px solid rgba(226,232,240,.80);
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-button.is-active {
  background: rgba(13,107,110,.10);
  box-shadow: inset 3px 0 0 var(--tp-accent-500);
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-button.is-active::before {
  display: none;
}

@media (orientation: landscape) and (max-height: 599px) {
  html[data-layout-mode="compact"] .mobile-category-toggle {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    border-radius: 12px;
  }

  html[data-layout-mode="compact"] .mobile-category-toggle__text strong { font-size: 14px; }
  html[data-layout-mode="compact"] .mobile-category-toggle__text small { font-size: 11px; }
  html[data-layout-mode="compact"] .mobile-category-toggle__chevron { width: 26px; height: 26px; border-radius: 8px; }
  html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-list { margin-top: 6px; padding: 6px; border-radius: 12px; }
  html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-button { min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
  html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-status { min-height: 20px; padding: 0 6px; font-size: 9px; }
}

/* accessory-hub.css */
/* Accessoirehub v0.5.373 — layoutpreview. Compatibiliteitsdata wordt later gekoppeld. */
.accessory-hub { display: grid; gap: 28px; }
.accessory-hero,
.accessory-browser,
.accessory-preview,
.accessory-toolbox-callout {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-card);
}
.accessory-hero {
  padding: 30px;
  background: linear-gradient(145deg, #fff 0%, var(--tp-accent-50) 100%);
  border-color: var(--tp-accent-200);
}
.accessory-hero__copy { max-width: 820px; }
.accessory-hero__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.accessory-hero__kicker,
.accessory-hero__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}
.accessory-hero__kicker { color: #fff; background: var(--tp-accent-600); }
.accessory-hero__status { color: var(--tp-accent-700); background: #fff; border: 1px solid var(--tp-accent-200); }
.accessory-hero h1 { margin: 0; max-width: 820px; font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.045em; color: var(--tp-graphite-950); }
.accessory-hero__copy > p { max-width: 800px; margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--tp-muted); }
.accessory-mode-switch { display: inline-flex; padding: 4px; margin-top: 24px; border: 1px solid var(--tp-border-strong); border-radius: 12px; background: #fff; }
.accessory-mode-switch button { border: 0; border-radius: 8px; padding: 9px 13px; background: transparent; color: var(--tp-muted); font: inherit; font-size: 13px; font-weight: 800; }
.accessory-mode-switch button.is-active { color: #fff; background: var(--tp-accent-600); }
.accessory-mode-switch button:disabled { opacity: .62; cursor: default; }
.accessory-mode-switch button span { margin-left: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.accessory-finder { max-width: 920px; margin-top: 22px; }
.accessory-finder > label { display: block; margin-bottom: 9px; color: var(--tp-text); font-weight: 850; }
.accessory-finder__row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px; background: #fff; border: 1px solid var(--tp-border-strong); border-radius: 15px; box-shadow: 0 10px 28px rgba(13,107,110,.07); }
.accessory-finder__icon { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); font-size: 23px; color: var(--tp-accent-600); pointer-events: none; }
.accessory-finder input { width: 100%; min-width: 0; height: 52px; padding: 0 16px 0 43px; border: 0; outline: 0; background: transparent; color: var(--tp-text); font: inherit; font-size: 16px; }
.accessory-finder input::placeholder { color: #849198; }
.accessory-finder__row:focus-within { border-color: var(--tp-accent-500); box-shadow: 0 0 0 4px var(--tp-focus-ring); }
.accessory-finder__row > button { min-width: 158px; border: 0; border-radius: 10px; padding: 0 18px; background: var(--tp-accent-600); color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.accessory-finder__row > button:hover { background: var(--tp-accent-700); }
.accessory-finder__helpers { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; color: var(--tp-muted); font-size: 12px; }
.accessory-finder__helpers > span { margin-right: 2px; }
.accessory-finder__helpers button { border: 1px solid var(--tp-border); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.75); color: var(--tp-accent-700); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.accessory-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.accessory-trust-row > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 9px; align-items: center; padding: 13px; background: rgba(255,255,255,.78); border: 1px solid var(--tp-accent-100); border-radius: 13px; }
.accessory-trust-row > div > span { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--tp-accent-100); color: var(--tp-accent-700); font-weight: 900; }
.accessory-trust-row strong { font-size: 13px; color: var(--tp-text); }
.accessory-trust-row small { margin-top: 2px; color: var(--tp-muted); font-size: 11px; line-height: 1.3; }
.accessory-browser,
.accessory-preview { padding: 26px; }
.accessory-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.accessory-section-heading .tp-kicker { margin: 0 0 4px; }
.accessory-section-heading h2 { margin: 0; color: var(--tp-graphite-950); font-size: 24px; letter-spacing: -.025em; }
.accessory-section-heading > p { max-width: 290px; margin: 0; text-align: right; color: var(--tp-muted); font-size: 13px; line-height: 1.45; }
.accessory-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.accessory-category-card { display: grid; grid-template-columns: 46px 1fr 24px; gap: 12px; align-items: center; min-height: 96px; padding: 14px; border: 1px solid var(--tp-border); border-radius: 14px; background: #fff; text-align: left; color: var(--tp-text); cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.accessory-category-card:hover,
.accessory-category-card.is-selected { border-color: var(--tp-accent-400); box-shadow: 0 8px 22px rgba(15,17,21,.06); transform: translateY(-1px); }
.accessory-category-card.is-selected { background: var(--tp-accent-50); }
.accessory-category-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--tp-soft-2); color: var(--tp-accent-700); font-size: 22px; font-weight: 900; }
.accessory-category-card__copy { display: grid; gap: 4px; }
.accessory-category-card__copy strong { font-size: 14px; }
.accessory-category-card__copy small { color: var(--tp-muted); font-size: 11px; line-height: 1.35; }
.accessory-category-card__arrow { color: var(--tp-accent-600); font-size: 18px; }
.accessory-preview { scroll-margin-top: calc(var(--tp-header-height) + 24px); }
.accessory-preview-badge { flex: 0 0 auto; border: 1px solid var(--tp-border); border-radius: 999px; padding: 6px 10px; color: var(--tp-muted); background: var(--tp-soft); font-size: 11px; font-weight: 800; }
.accessory-machine-context { margin-bottom: 14px; border: 1px solid var(--tp-accent-200); border-radius: 14px; padding: 15px 16px; background: var(--tp-accent-50); }
.accessory-machine-context__eyebrow { margin-bottom: 6px; color: var(--tp-accent-700); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.accessory-machine-context__main { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.accessory-machine-context__main > div:first-child { display: grid; gap: 3px; }
.accessory-machine-context__main strong { color: var(--tp-graphite-950); font-size: 16px; }
.accessory-machine-context__main span { color: var(--tp-muted); font-size: 12px; }
.accessory-machine-context__tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.accessory-machine-context__tags span { border-radius: 999px; padding: 5px 8px; background: #fff; border: 1px solid var(--tp-accent-200); color: var(--tp-accent-700); font-size: 10px; font-weight: 800; }
.accessory-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.accessory-result-card { display: grid; grid-template-columns: 88px 1fr; gap: 14px; min-width: 0; padding: 14px; border: 1px solid var(--tp-border); border-radius: 14px; background: #fff; }
.accessory-result-card__visual { min-height: 112px; display: grid; place-items: center; border-radius: 12px; background: var(--tp-soft-2); color: var(--tp-accent-700); font-size: 34px; }
.accessory-result-card__body { min-width: 0; }
.accessory-result-card__type { color: var(--tp-accent-700); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.accessory-result-card h3 { margin: 4px 0 7px; font-size: 15px; color: var(--tp-text); }
.accessory-result-card p { margin: 0; color: var(--tp-muted); font-size: 11px; line-height: 1.45; }
.accessory-result-card p strong { color: var(--tp-green-600); }
.accessory-result-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--tp-border); color: var(--tp-muted); font-size: 10px; font-weight: 750; }
.accessory-result-card__footer button,
.accessory-toolbox-callout > button { border: 1px solid var(--tp-border-strong); border-radius: 9px; padding: 7px 10px; background: #fff; color: var(--tp-muted); font: inherit; font-size: 11px; font-weight: 850; opacity: .72; }
.accessory-toolbox-callout { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 16px; padding: 22px 24px; background: var(--tp-soft); }
.accessory-toolbox-callout__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--tp-accent-100); color: var(--tp-accent-700); font-size: 26px; }
.accessory-toolbox-callout .tp-kicker { margin: 0 0 3px; }
.accessory-toolbox-callout h2 { margin: 0; color: var(--tp-graphite-950); font-size: 19px; letter-spacing: -.02em; }
.accessory-toolbox-callout p:not(.tp-kicker) { margin: 5px 0 0; color: var(--tp-muted); font-size: 12px; line-height: 1.45; }
.accessory-toolbox-callout > button { min-width: 150px; }

@media (max-width: 1180px) {
  .accessory-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .accessory-trust-row { grid-template-columns: 1fr; }
  .accessory-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .accessory-hub { gap: 16px; }
  .accessory-hero,
  .accessory-browser,
  .accessory-preview { padding: 18px; border-radius: 16px; }
  .accessory-hero h1 { font-size: 31px; }
  .accessory-hero__copy > p { font-size: 15px; }
  .accessory-finder__row { grid-template-columns: 1fr; padding: 6px; }
  .accessory-finder__icon { top: 33px; transform: none; }
  .accessory-finder__row > button { min-height: 46px; }
  .accessory-category-grid { grid-template-columns: 1fr; }
  .accessory-section-heading { display: grid; align-items: start; }
  .accessory-section-heading > p { text-align: left; }
  .accessory-machine-context__main { display: grid; }
  .accessory-machine-context__tags { justify-content: flex-start; }
  .accessory-result-card { grid-template-columns: 68px 1fr; }
  .accessory-result-card__visual { min-height: 88px; }
  .accessory-toolbox-callout { grid-template-columns: 48px 1fr; padding: 18px; }
  .accessory-toolbox-callout__icon { width: 46px; height: 46px; }
  .accessory-toolbox-callout > button { grid-column: 1 / -1; width: 100%; }
}

/* v0.5.379 · echte accessoirecatalogus, compatibiliteit blijft bewust losgekoppeld */
.accessory-live { padding: 26px; scroll-margin-top: calc(var(--tp-header-height) + 24px); }
.accessory-live-toolbar { display: grid; grid-template-columns: minmax(220px, 460px) auto; align-items: end; gap: 7px 18px; margin-bottom: 16px; }
.accessory-live-toolbar > label { grid-column: 1 / -1; color: var(--tp-text); font-size: 12px; font-weight: 850; }
.accessory-live-toolbar > div { position: relative; display: flex; align-items: center; min-height: 46px; border: 1px solid var(--tp-border); border-radius: 11px; background: #fff; }
.accessory-live-toolbar > div > span { position: absolute; left: 14px; color: var(--tp-accent-700); }
.accessory-live-toolbar input { width: 100%; min-width: 0; height: 44px; padding: 0 14px 0 38px; border: 0; outline: 0; background: transparent; color: var(--tp-text); font: inherit; }
.accessory-live-toolbar > p { margin: 0; color: var(--tp-muted); font-size: 12px; font-weight: 800; }
.accessory-live-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.accessory-live-card { display: grid; grid-template-rows: 170px 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--tp-border); border-radius: 14px; background: #fff; }
.accessory-live-card[hidden] { display: none; }
.accessory-live-card__media { width: 100%; height: 170px; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #fff; }
.accessory-live-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; }
.accessory-live-card__body { display: flex; min-width: 0; flex-direction: column; padding: 14px; border-top: 1px solid var(--tp-border); }
.accessory-live-card__top { display: flex; justify-content: space-between; gap: 8px; color: var(--tp-accent-700); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.accessory-live-card__top small { color: var(--tp-muted); font-size: 9px; text-align: right; }
.accessory-live-card h3 { margin: 7px 0 8px; color: var(--tp-text); font-size: 14px; line-height: 1.3; }
.accessory-live-card p { margin: 0 0 14px; color: var(--tp-muted); font-size: 10px; line-height: 1.45; }
.accessory-live-card__footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tp-border); }
.accessory-live-card__footer > div { display: grid; gap: 2px; }
.accessory-live-card__footer small { color: var(--tp-muted); font-size: 9px; }
.accessory-live-card__footer strong { color: var(--tp-text); font-size: 16px; }
.accessory-live-card__footer a { border-radius: 9px; padding: 8px 10px; background: var(--tp-accent-600); color: #fff; text-decoration: none; font-size: 10px; font-weight: 850; white-space: nowrap; }
.accessory-live-empty { padding: 28px; border: 1px dashed var(--tp-border-strong); border-radius: 12px; color: var(--tp-muted); text-align: center; }
@media (max-width: 1180px) { .accessory-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .accessory-live { padding: 18px; } .accessory-live-grid { grid-template-columns: 1fr; } .accessory-live-toolbar { grid-template-columns: 1fr; } .accessory-live-toolbar > p { text-align: left; } }

/* v0.5.386 · echte compatibiliteitsstatus en machinefilter */
.accessory-compatibility-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:2px 0 8px;padding:5px 8px;border-radius:999px;background:#ecf8ef;color:#1f6b36;font-size:12px;font-weight:750;line-height:1.2}
.accessory-compatibility-badge>span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#d5efdc;font-weight:900}
.accessory-compatibility-badge--pending{background:#f4f5f7;color:#667085}
.accessory-compatibility-badge--pending>span{background:#e7e9ee}
.accessory-preview-badge--verified{background:#ecf8ef;color:#1f6b36;border-color:#cae9d2}
.accessory-compatibility-overview{margin-top:24px}
.accessory-compatibility-policy{padding:18px 20px;border:1px solid #e4e7ec;border-radius:16px;background:#fff}
.accessory-compatibility-policy strong{display:block;margin-bottom:5px;color:#17202a;font-size:15px}
.accessory-compatibility-policy p{margin:0;color:#667085;line-height:1.55}
.accessory-live-card[hidden]{display:none!important}
@media (max-width:700px){.accessory-compatibility-policy{padding:15px}.accessory-compatibility-badge{font-size:11px}}

/* v0.5.404 · professionele, schaalbare accessoirecatalogus */
.accessory-live {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-card);
}
.accessory-live-heading { align-items: flex-start; }
.accessory-live-heading > p { max-width: 430px; line-height: 1.55; }
.accessory-live-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 20px;
}
.accessory-live-stats > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--tp-border);
  border-radius: 13px;
  background: var(--tp-soft);
}
.accessory-live-stats strong {
  color: var(--tp-graphite-950);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.025em;
}
.accessory-live-stats span {
  color: var(--tp-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}
.accessory-live-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: var(--tp-soft);
}
.accessory-live-search { display: grid; gap: 7px; max-width: 660px; }
.accessory-live-search > label,
.accessory-live-filters label > span {
  color: var(--tp-text);
  font-size: 11px;
  font-weight: 850;
}
.accessory-live-search > div {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 11px;
  background: #fff;
}
.accessory-live-search > div:focus-within {
  border-color: var(--tp-accent-500);
  box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.accessory-live-search > div > span {
  position: absolute;
  left: 14px;
  color: var(--tp-accent-700);
}
.accessory-live-search input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px 0 39px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tp-text);
  font: inherit;
}
.accessory-live-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}
.accessory-live-filters label { display: grid; gap: 6px; min-width: 0; }
.accessory-live-filters select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  background: #fff;
  color: var(--tp-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.accessory-live-filters select:focus-visible,
.accessory-filter-reset:focus-visible,
.accessory-live-more button:focus-visible {
  outline: 3px solid var(--tp-focus-ring);
  outline-offset: 2px;
}
.accessory-filter-reset {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--tp-accent-700);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.accessory-filter-reset:hover { border-color: var(--tp-accent-400); background: var(--tp-accent-50); }
.accessory-live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
}
.accessory-live-status p { margin: 0; color: var(--tp-muted); font-size: 11px; font-weight: 750; }
.accessory-live-status p:first-child { color: var(--tp-text); font-weight: 850; }
.accessory-live-grid { gap: 14px; }
.accessory-live-card {
  border-radius: 15px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.accessory-live-card:hover {
  border-color: var(--tp-accent-300);
  box-shadow: 0 9px 24px rgba(15,17,21,.07);
  transform: translateY(-1px);
}
.accessory-live-card__top { align-items: flex-start; }
.accessory-live-card h3 { font-size: 15px; }
.accessory-live-card__footer a { padding: 9px 11px; font-size: 11px; }
.accessory-live-more {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.accessory-live-more[hidden] { display: none; }
.accessory-live-more button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--tp-accent-700);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.accessory-live-more button:hover { border-color: var(--tp-accent-400); background: var(--tp-accent-50); }
.accessory-category-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.accessory-category-card__title em {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--tp-soft);
  color: var(--tp-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-align: center;
}
.accessory-category-card.is-selected .accessory-category-card__title em { background: #fff; color: var(--tp-accent-700); }

@media (max-width: 1180px) {
  .accessory-live-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accessory-live-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accessory-filter-reset { width: max-content; }
}

@media (max-width: 720px) {
  .accessory-live-heading > p { max-width: none; }
  .accessory-live-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .accessory-live-stats > div { padding: 13px; }
  .accessory-live-stats strong { font-size: 19px; }
  .accessory-live-toolbar { padding: 13px; }
  .accessory-live-filters { grid-template-columns: 1fr; }
  .accessory-filter-reset { width: 100%; }
  .accessory-live-status { align-items: flex-start; flex-direction: column; gap: 3px; }
}
/* neutraliseer de oude v0.5.379 toolbar-childregels voor de nieuwe samengestelde toolbar */
.accessory-live-toolbar > .accessory-live-search,
.accessory-live-toolbar > .accessory-live-filters,
.accessory-live-toolbar > .accessory-live-status {
  position: static;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.accessory-live-toolbar > .accessory-live-search { display: grid; }
.accessory-live-toolbar > .accessory-live-filters { display: grid; }
.accessory-live-toolbar > .accessory-live-status { display: flex; }
@media (max-width: 720px) {
  .accessory-live-toolbar > .accessory-live-filters { display: grid; }
  .accessory-live-toolbar > .accessory-live-status { display: flex; }
}

/* v0.5.405 · compacte accessoirezoeker: één zoekflow, categorie in filters */
.accessory-hub--compact { gap: 16px; }
.accessory-hero--compact {
  padding: 20px 24px;
  background: linear-gradient(145deg, #fff 0%, var(--tp-accent-50) 100%);
}
.accessory-hero--compact .accessory-hero__meta { margin-bottom: 8px; }
.accessory-hero--compact h1 {
  max-width: none;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.05;
}
.accessory-hero--compact .accessory-hero__copy > p {
  max-width: 720px;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
}
.accessory-hero--compact .accessory-mode-switch { margin-top: 14px; }
.accessory-live { padding: 22px 24px; }
.accessory-live-heading {
  align-items: center;
  margin-bottom: 14px;
}
.accessory-live-heading .tp-kicker { margin-bottom: 3px; }
.accessory-live-heading h2 { margin-bottom: 0; }
.accessory-live-summary {
  margin: 0;
  max-width: none !important;
  white-space: nowrap;
  color: var(--tp-muted);
  font-size: 12px;
}
.accessory-live-summary strong { color: var(--tp-text); }
.accessory-live-toolbar {
  gap: 10px;
  margin-bottom: 14px;
  padding: 13px;
}
.accessory-live-search { max-width: none; gap: 5px; }
.accessory-live-search > div { min-height: 44px; }
.accessory-live-search input { height: 42px; }
.accessory-live-filters {
  grid-template-columns: repeat(4, minmax(125px, 1fr)) auto;
  gap: 8px;
}
.accessory-live-filters label { gap: 4px; }
.accessory-live-filters select,
.accessory-filter-reset { min-height: 40px; }
.accessory-live-status { min-height: 16px; }
.accessory-live-card__body { padding: 12px 14px 14px; }
.accessory-live-card h3 { margin: 6px 0 8px; }
.accessory-live-card p { margin-bottom: 12px; }

@media (max-width: 980px) {
  .accessory-live-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accessory-filter-reset { width: 100%; }
}
@media (max-width: 720px) {
  .accessory-hero--compact { padding: 17px; }
  .accessory-hero--compact h1 { font-size: 30px; }
  .accessory-live { padding: 16px; }
  .accessory-live-heading { display: grid; gap: 5px; }
  .accessory-live-summary { white-space: normal; }
  .accessory-live-filters { grid-template-columns: 1fr; }
}

/* v0.5.407 - rustige accessoirekaarten en compacte prijsvergelijking */
.accessory-hero--compact {
  padding: 15px 24px 16px;
}
.accessory-hero--compact h1 {
  font-size: clamp(28px, 3vw, 36px);
}
.accessory-hero--compact .accessory-hero__copy > p {
  margin-top: 6px;
}
.accessory-hero--compact .accessory-mode-switch {
  margin-top: 11px;
}
.accessory-live-card {
  grid-template-rows: 148px 1fr;
}
.accessory-live-card__media {
  height: 148px;
}
.accessory-live-card__media img {
  padding: 10px 12px;
}
.accessory-live-card__body {
  padding: 11px 13px 13px;
}
.accessory-live-card h3 {
  margin: 6px 0 7px;
  min-height: 38px;
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.accessory-live-card h3 a {
  color: var(--tp-text);
  text-decoration: none;
}
.accessory-live-card h3 a:hover { color: var(--tp-accent-700); }
.accessory-live-card__code {
  margin: 0 0 9px !important;
  color: var(--tp-muted);
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accessory-live-card__code strong { color: var(--tp-text); }
.accessory-live-card__price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--tp-border);
}
.accessory-live-card__price > div { display: grid; gap: 1px; }
.accessory-live-card__price small,
.accessory-live-card__price > span {
  color: var(--tp-muted);
  font-size: 9px;
}
.accessory-live-card__price strong {
  color: var(--tp-text);
  font-size: 16px;
}
.accessory-live-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--tp-accent-600);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  text-decoration: none;
}
.accessory-live-card__cta:hover { background: var(--tp-accent-700); }

.accessory-detail {
  align-items: stretch;
}
.accessory-detail__content {
  display: flex;
  flex-direction: column;
}
.accessory-detail__identity {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 13px 0 0;
}
.accessory-detail__identity > div {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  background: var(--tp-soft-2);
}
.accessory-detail__identity dt {
  color: var(--tp-muted);
  font-size: 9px;
  font-weight: 750;
}
.accessory-detail__identity dd {
  margin: 0;
  color: var(--tp-text);
  font-size: 11px;
  font-weight: 850;
}
.accessory-detail__compare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
}
.accessory-detail__compare > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 1px 8px;
}
.accessory-detail__compare small {
  color: var(--tp-muted);
  font-size: 9px;
  grid-column: 1 / -1;
}
.accessory-detail__compare strong {
  color: var(--tp-text);
  font-size: 22px;
}
.accessory-detail__compare span {
  color: var(--tp-muted);
  font-size: 10px;
}
.accessory-detail__compare button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--tp-accent-600);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.accessory-detail__compare button:hover { background: var(--tp-accent-700); }
.accessory-detail__compare button:focus-visible,
.accessory-live-card__cta:focus-visible,
.accessory-live-card h3 a:focus-visible {
  outline: 3px solid var(--tp-accent-200);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .accessory-hero--compact { padding: 14px 16px; }
  .accessory-hero--compact h1 { font-size: 27px; }
  .accessory-live-card { grid-template-rows: 132px 1fr; }
  .accessory-live-card__media { height: 132px; }
  .accessory-detail__identity { display: grid; grid-template-columns: 1fr 1fr; }
  .accessory-detail__identity > div { min-width: 0; }
  .accessory-detail__compare { align-items: stretch; flex-direction: column; }
  .accessory-detail__compare button { width: 100%; }
}

.accessory-variant-picker {
  display: grid;
  gap: 16px;
}
.accessory-variant-picker__head p:last-child {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--tp-muted);
  font-size: 12px;
  line-height: 1.5;
}
.accessory-variant-picker__head h1 { margin-bottom: 0; }
.accessory-variant-picker__grid {
  display: grid;
  gap: 9px;
}
.accessory-variant-choice {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--tp-text);
  text-align: left;
  cursor: pointer;
}
.accessory-variant-choice:hover { border-color: var(--tp-accent-300); background: var(--tp-accent-50); }
.accessory-variant-choice:focus-visible { outline: 3px solid var(--tp-accent-200); outline-offset: 2px; }
.accessory-variant-choice__image .tp-product-media {
  width: 72px;
  height: 58px;
  min-height: 58px;
  margin: 0;
  border: 0;
}
.accessory-variant-choice__image img { padding: 3px; }
.accessory-variant-choice__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.accessory-variant-choice__body strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accessory-variant-choice__body small,
.accessory-variant-choice__body span {
  color: var(--tp-muted);
  font-size: 10px;
}
.accessory-variant-choice__arrow { color: var(--tp-accent-700); font-weight: 900; }
@media (max-width: 560px) {
  .accessory-variant-choice { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 9px; }
  .accessory-variant-choice__image .tp-product-media { width: 56px; height: 50px; min-height: 50px; }
}


/* v0.5.408 - strakke filters en compacte reserveonderdelen */
.accessory-live-filters {
  align-items: stretch;
}
.accessory-filter-action {
  display: grid;
  gap: 4px;
  min-width: 104px;
}
.accessory-filter-action > span {
  visibility: hidden;
  color: var(--tp-text);
  font-size: 11px;
  font-weight: 850;
}
.accessory-filter-reset {
  width: 100%;
  height: 40px;
  min-height: 40px;
  align-self: end;
  border-color: var(--tp-border);
  color: var(--tp-text);
  font-size: 11px;
}
.accessory-filter-reset:hover {
  border-color: var(--tp-accent-300);
  background: #fff;
  color: var(--tp-accent-700);
}
.parts-hub--compact { gap: 16px; }
.parts-hero--compact { padding: 15px 24px 16px; }
.parts-search-panel {
  padding: 22px 24px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-card);
}
.parts-search-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.parts-search-panel__head .tp-kicker { margin: 0 0 3px; }
.parts-search-panel__head h2 {
  margin: 0;
  color: var(--tp-graphite-950);
  font-size: 24px;
  letter-spacing: -.025em;
}
.parts-search-panel__badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--tp-accent-200);
  border-radius: 999px;
  background: var(--tp-accent-50);
  color: var(--tp-accent-700);
  font-size: 10px;
  font-weight: 850;
}
.parts-search { display: grid; gap: 5px; }
.parts-search > label {
  color: var(--tp-text);
  font-size: 11px;
  font-weight: 850;
}
.parts-search__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
.parts-search__row:focus-within {
  border-color: var(--tp-accent-500);
  box-shadow: 0 0 0 3px var(--tp-focus-ring);
}
.parts-search__row > span {
  position: absolute;
  left: 14px;
  color: var(--tp-accent-700);
  pointer-events: none;
}
.parts-search__row input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px 0 39px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tp-text);
  font: inherit;
  font-size: 14px;
}
.parts-search__row button {
  align-self: stretch;
  min-width: 112px;
  margin: 5px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--tp-accent-600);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.parts-search__row button:hover { background: var(--tp-accent-700); }
.parts-search__row button:focus-visible {
  outline: 3px solid var(--tp-accent-200);
  outline-offset: -1px;
}
.parts-search-state {
  margin: 10px 0 0;
  color: var(--tp-muted);
  font-size: 11px;
  line-height: 1.45;
}
.parts-search-state strong { color: var(--tp-text); }
@media (max-width: 980px) {
  .accessory-filter-action { min-width: 0; width: 100%; }
}
@media (max-width: 720px) {
  .parts-hero--compact { padding: 14px 16px; }
  .parts-search-panel { padding: 16px; }
  .parts-search-panel__head { align-items: flex-start; }
  .parts-search-panel__head h2 { font-size: 21px; }
  .parts-search-panel__badge { margin-top: 2px; }
  .parts-search__row { grid-template-columns: minmax(0, 1fr); overflow: visible; border: 0; background: transparent; gap: 8px; }
  .parts-search__row > span { top: 16px; transform: translateY(-50%); left: 14px; z-index: 1; }
  .parts-search__row input { height: 46px; border: 1px solid var(--tp-border-strong); border-radius: 10px; background: #fff; }
  .parts-search__row button { min-height: 42px; margin: 0; width: 100%; }
  .parts-search__row:focus-within { box-shadow: none; }
  .accessory-filter-action > span { display: none; }
}

/* workspace-redesign.css */
/*
  ToolPakker workspace redesign v2
  --------------------------------
  A calmer comparison-first layout based on the approved desktop, tablet and
  mobile mock-up. Existing product, execution and offer components stay intact;
  this layer only changes hierarchy, spacing and responsive placement.
*/

:root {
  --tp-header-height: 74px;
  --tp-sidebar-width: 248px;
  --tp-offers-width: 320px;
  --tp-gap: 14px;
  --tp-workspace-rail-gap: 40px;
}

/* Header and compact value proposition */
.tp-header {
  height: var(--tp-header-height);
  min-height: var(--tp-header-height);
  grid-template-columns:
    minmax(0, 1fr)
    var(--tp-sidebar-width)
    var(--tp-gap)
    minmax(360px, 848px)
    var(--tp-gap)
    var(--tp-offers-width)
    minmax(0, 1fr);
  gap: 0;
  padding: 0 18px;
  box-shadow: 0 5px 18px rgba(15, 17, 21, .05);
}

.tp-brand {
  grid-column: 2;
  width: 100%;
  justify-self: stretch;
  justify-content: center;
}

.tp-brand-logo {
  width: min(214px, 100%);
  max-height: 52px;
}

.tp-search {
  grid-column: 4;
  width: 100%;
  max-width: none;
}

.tp-compare {
  grid-column: 6;
}

.tp-search input {
  height: 46px;
  padding-left: 46px;
  border-radius: 10px;
  font-size: 15px;
  background: #fbfdfd;
}

.tp-search-icon {
  left: 15px;
  font-size: 23px;
}

.tp-compare {
  gap: 8px;
  min-height: 38px;
  font-size: 15px;
}

.tp-compare strong {
  min-width: 23px;
  height: 23px;
  font-size: 12px;
}

.tp-catalog-menu {
  display: none;
  width: 38px;
  height: 38px;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tp-text);
}

.tp-catalog-menu span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  background: currentColor;
}

.tp-catalog-menu:hover,
.tp-catalog-menu:focus-visible {
  background: var(--tp-soft-2);
  outline: none;
}

.tp-intro-strip {
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 18px 0;
  text-align: center;
}

.tp-intro-strip p {
  margin: 0;
  color: #44545c;
  font-size: 13px;
  line-height: 1.35;
}

.tp-intro-strip strong {
  color: var(--tp-text);
  font-weight: 780;
}

/* Main comparison workspace */
.tp-shell {
  grid-template-columns: var(--tp-sidebar-width) minmax(0, 1fr) var(--tp-offers-width);
  max-width: 1480px;
  gap: var(--tp-gap);
  padding: 12px 18px 18px;
}

.tp-sidebar,
.tp-main-panel,
.tp-offers-panel {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 17, 21, .045);
}

.tp-sidebar {
  top: calc(var(--tp-header-height) + var(--tp-workspace-rail-gap));
  max-height: calc(100vh - var(--tp-header-height) - var(--tp-workspace-rail-gap) - 18px);
}

/* Op het startscherm hoort de aanbiederskolom bij de gewone pagina-scroll. */
html[data-layout-mode="desktop"] .tp-offers-panel {
  position: static;
  top: auto;
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* Vanaf de catalogusweergave is de app een echte vaste desktopwerkruimte.
   De pagina zelf scrolt dan niet meer: de twee zijpanelen blijven exact op hun
   oorspronkelijke rasterpositie en alleen de middelste inhoud krijgt verticale
   scrollruimte. Daardoor kunnen de rails ook op model- en uitvoeringsschermen
   nooit alsnog naar de topbar opschuiven. */
html[data-layout-mode="desktop"].tp-view-workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html[data-layout-mode="desktop"].tp-view-workspace body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-header,
html[data-layout-mode="desktop"].tp-view-workspace .tp-intro-strip {
  flex: 0 0 auto;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-header {
  position: relative;
  top: auto;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  align-items: stretch;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-sidebar,
html[data-layout-mode="desktop"].tp-view-workspace .tp-main-panel,
html[data-layout-mode="desktop"].tp-view-workspace .tp-offers-panel {
  position: static;
  top: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-sidebar,
html[data-layout-mode="desktop"].tp-view-workspace .tp-offers-panel {
  overflow-anchor: none;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-main-panel {
  scrollbar-gutter: stable;
  touch-action: pan-y;
  overflow-anchor: auto;
}

html[data-layout-mode="desktop"].tp-view-workspace .tp-footer {
  display: none;
}

.tp-main-panel {
  min-height: 620px;
}

.panel-heading {
  padding: 16px 16px 12px;
}

.panel-heading h2 {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

#mainContent {
  padding: 18px 20px 22px;
}

#offersContent {
  padding: 16px 14px 24px;
}

/* De aanbiederskolom blijft zichtbaar met de aangesloten aanbieders.
   Alleen de oude instructiekaart “Kies een uitvoering” is verwijderd. */

/* Search inside the desktop category rail */
.category-search {
  position: relative;
  display: block;
  margin: 12px 12px 6px;
}

.category-search > span {
  position: absolute;
  left: 11px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--tp-accent-600);
  font-size: 18px;
}

.category-search input {
  width: 100%;
  height: 38px;
  padding: 0 11px 0 35px;
  border: 1px solid var(--tp-border);
  border-radius: 9px;
  outline: none;
  background: #fbfcfc;
  color: var(--tp-text);
  font-size: 13px;
}

.category-search input:focus {
  border-color: var(--tp-accent-500);
  box-shadow: 0 0 0 3px var(--tp-focus-ring);
}

.category-list {
  gap: 1px;
  padding: 5px 8px 10px;
}

.category-button {
  min-height: 39px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.category-button.is-active::before {
  top: 8px;
  bottom: 8px;
}

/* Home state: concise, not a second hero page */
.tp-start-hero {
  padding: 24px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f6fbfb);
}

.tp-start-hero .tp-kicker {
  margin-bottom: 8px;
  color: var(--tp-accent-700);
  font-weight: 800;
}

.tp-start-hero .tp-section-title {
  max-width: none;
  margin: 0;
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.tp-flow-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tp-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
}

.tp-flow-step > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  background: var(--tp-accent-100);
  color: var(--tp-accent-800);
  font-size: 11px;
  font-weight: 900;
}

.tp-flow-step strong {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Category/product hierarchy */
.catalog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.catalog-heading .tp-kicker {
  margin: 0 0 4px;
  font-size: 12px;
}

.catalog-heading .tp-section-title {
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.05;
}

.catalog-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: 2px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--tp-soft-2);
  color: var(--tp-muted);
  font-size: 11px;
  font-weight: 800;
}

.catalog-intro {
  margin-top: 6px;
  font-size: 14px;
}

.tp-data-status {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--tp-accent-300);
  border-radius: 0 8px 8px 0;
  background: #f7fbfb;
  color: #56666d;
  font-size: 12px;
  line-height: 1.42;
}

.brand-filter-wrap {
  margin: 14px -2px 14px;
}

.brand-filter-label {
  margin-bottom: 7px;
  font-size: 12px;
}

.brand-filter {
  gap: 7px;
  padding-bottom: 5px;
}

.brand-filter button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 760;
  box-shadow: none;
}

.model-list {
  gap: 9px;
}

.model-card {
  grid-template-columns: 88px minmax(0, 1fr) minmax(108px, 122px);
  gap: 13px;
  min-height: 112px;
  padding: 11px 13px;
  border-radius: 12px;
  box-shadow: none;
}

.model-card:hover,
.model-card:focus-visible {
  transform: none;
  box-shadow: 0 5px 16px rgba(15, 17, 21, .06);
}

.model-card__media .tp-product-media,
.model-card__media .tp-product-media--model {
  width: 78px;
  height: 88px;
  --tp-media-padding: 7px;
  border-radius: 10px;
  background: #f9fbfb;
}

.model-title {
  margin-bottom: 3px;
  font-size: 17px;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.model-copy {
  -webkit-line-clamp: 1;
  margin-bottom: 7px;
  font-size: 12px;
}

.model-tags {
  gap: 5px;
  margin-bottom: 6px;
}

.model-tags .tp-pill {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10px;
}

.model-meta {
  font-size: 11px;
  line-height: 1.25;
}

.model-card__side {
  grid-template-rows: auto 1fr auto;
}

.model-card .compare-card-action {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 10px;
  box-shadow: none;
}

.model-card__price-row {
  gap: 8px;
}

.model-card__price > span {
  margin-bottom: 2px;
  font-size: 10px;
}

.model-card__price strong {
  font-size: 19px;
}

.model-card__arrow {
  font-size: 23px;
}

/* Contextual offers column */
.offer-empty-small {
  min-height: 180px;
  padding: 20px 15px;
  border-radius: 12px;
}

.offer-empty-small .tp-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  font-size: 28px;
}

.offer-empty-small h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.offer-empty-small p {
  max-width: 27ch;
  font-size: 13px;
  line-height: 1.45;
}

.dealer-list {
  margin-top: 16px;
}

.dealer-list h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.dealer-row {
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 48px;
  margin-bottom: 7px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
}

.dealer-logo-box {
  min-height: 30px;
}

.offer-trust-points {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: #fbfdfd;
}

.offer-trust-point {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.offer-trust-point > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: var(--tp-accent-100);
  color: var(--tp-accent-800);
  font-size: 12px;
  font-weight: 900;
}

.offer-trust-point strong {
  display: block;
  margin-bottom: 1px;
  font-size: 12px;
}

.offer-trust-point small {
  display: block;
  color: var(--tp-muted);
  font-size: 10px;
  line-height: 1.35;
}

.tp-offers-panel .offer-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-offers-panel .offer-card-top {
  grid-template-columns: 1fr;
}

.tp-offers-panel .offer-price-block {
  text-align: left;
}

/* Tablet and small-laptop workspace */
html[data-layout-mode="tablet"] .tp-header {
  min-height: 0;
  grid-template-columns: 40px minmax(150px, 1fr) auto;
  grid-template-areas:
    "menu brand compare"
    "search search search";
  gap: 8px 10px;
  padding: 9px 16px 11px;
}

html[data-layout-mode="tablet"] .tp-catalog-menu {
  display: block;
  grid-area: menu;
}

html[data-layout-mode="tablet"] .tp-brand {
  grid-area: brand;
}

html[data-layout-mode="tablet"] .tp-brand-logo {
  width: min(190px, 30vw);
  max-height: 40px;
}

html[data-layout-mode="tablet"] .tp-search {
  grid-area: search;
}

html[data-layout-mode="tablet"] .tp-search input {
  height: 42px;
  font-size: 13px;
}

html[data-layout-mode="tablet"] .tp-compare {
  grid-area: compare;
  font-size: 13px;
}

html[data-layout-mode="tablet"] .tp-intro-strip {
  padding-top: 8px;
}

html[data-layout-mode="tablet"] .tp-shell {
  padding: 10px 16px 18px;
  gap: 11px;
}

html[data-layout-mode="tablet"] .tp-sidebar {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-layout-mode="tablet"] .tp-sidebar .panel-heading,
html[data-layout-mode="tablet"] .category-search {
  display: none;
}

html[data-layout-mode="tablet"] .mobile-category-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--tp-border);
  border-radius: 11px;
  background: #fff;
  color: var(--tp-text);
  text-align: left;
  box-shadow: 0 4px 14px rgba(15, 17, 21, .035);
}

html[data-layout-mode="tablet"] .mobile-category-toggle__text {
  display: grid;
  gap: 1px;
}

html[data-layout-mode="tablet"] .mobile-category-toggle__text strong {
  font-size: 14px;
}

html[data-layout-mode="tablet"] .mobile-category-toggle__text small {
  color: var(--tp-muted);
  font-size: 11px;
}

html[data-layout-mode="tablet"] .mobile-category-toggle__chevron {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tp-soft-2);
}

html[data-layout-mode="tablet"] .mobile-category-toggle__chevron::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--tp-text);
  border-bottom: 2px solid var(--tp-text);
  transform: rotate(45deg) translate(-1px, -2px);
}

html[data-layout-mode="tablet"] .tp-sidebar:not(.is-category-open) .category-list {
  display: none;
}

html[data-layout-mode="tablet"] .tp-sidebar.is-category-open .category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: 430px;
  margin-top: 7px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 17, 21, .11);
}

html[data-layout-mode="tablet"] .tp-sidebar.is-category-open .category-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

html[data-layout-mode="tablet"] .tp-sidebar.is-category-open .category-button.is-active {
  background: var(--tp-accent-100);
}

html[data-layout-mode="tablet"] .tp-sidebar.is-category-open .category-button.is-active::before {
  display: none;
}

html[data-layout-mode="tablet"] #mainContent,
html[data-layout-mode="tablet"] #offersContent {
  padding: 16px;
}

html[data-layout-mode="tablet"] .model-card {
  grid-template-columns: 82px minmax(0, 1fr) 108px;
}

html[data-layout-mode="tablet"] .model-card__media .tp-product-media,
html[data-layout-mode="tablet"] .model-card__media .tp-product-media--model {
  width: 72px;
  height: 80px;
}

@media (min-width: 1025px) {
  html[data-layout-mode="tablet"] .tp-shell {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 40%);
    grid-template-areas:
      "sidebar sidebar"
      "main offers";
    align-items: start;
    padding: 10px 18px 20px;
    gap: 12px;
  }

  html[data-layout-mode="tablet"] .tp-main-panel,
  html[data-layout-mode="tablet"] .tp-offers-panel {
    min-width: 0;
  }

}

html[data-layout-mode="tablet"] .tp-start-hero .tp-section-title {
  font-size: clamp(24px, 2.8vw, 30px);
  white-space: normal;
}

/* Mobile: one clear vertical flow */
html[data-layout-mode="compact"] .tp-header {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas:
    "menu brand compare"
    "search search search";
  gap: 7px 8px;
  padding: 8px 10px 10px;
}

html[data-layout-mode="compact"] .tp-catalog-menu {
  display: block;
  grid-area: menu;
  width: 34px;
  height: 34px;
  padding: 8px 7px;
}

html[data-layout-mode="compact"] .tp-brand {
  grid-area: brand;
}

html[data-layout-mode="compact"] .tp-brand-logo {
  width: min(142px, 44vw);
  max-height: 32px;
}

html[data-layout-mode="compact"] .tp-compare {
  grid-area: compare;
  gap: 5px;
  font-size: 11px;
}

html[data-layout-mode="compact"] .tp-compare span:nth-child(2) {
  display: inline;
}

html[data-layout-mode="compact"] .tp-search {
  grid-area: search;
}

html[data-layout-mode="compact"] .tp-search input {
  height: 42px;
  font-size: 13px;
}

html[data-layout-mode="compact"] .tp-intro-strip {
  padding: 7px 12px 0;
}

html[data-layout-mode="compact"] .tp-intro-strip p {
  font-size: 11px;
}

html[data-layout-mode="compact"] .tp-shell {
  padding: 8px 10px 12px;
  gap: 9px;
}

html[data-layout-mode="compact"] .category-search {
  display: none;
}

html[data-layout-mode="compact"] .mobile-category-toggle {
  min-height: 46px;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(15, 17, 21, .04);
}

html[data-layout-mode="compact"] .tp-main-panel,
html[data-layout-mode="compact"] .tp-offers-panel {
  border-radius: 13px;
}

html[data-layout-mode="compact"] #mainContent,
html[data-layout-mode="compact"] #offersContent {
  padding: 14px 12px;
}

html[data-layout-mode="compact"] .tp-start-hero {
  padding: 18px 15px;
  border-radius: 12px;
}

html[data-layout-mode="compact"] .tp-start-hero .tp-section-title {
  font-size: 25px;
  white-space: normal;
}

html[data-layout-mode="compact"] .tp-flow-strip {
  gap: 6px;
  margin-top: 12px;
}

html[data-layout-mode="compact"] .tp-flow-step {
  min-height: 34px;
  padding: 5px 10px 5px 6px;
}

html[data-layout-mode="compact"] .catalog-heading {
  align-items: center;
}

html[data-layout-mode="compact"] .catalog-heading .tp-kicker {
  display: none;
}

html[data-layout-mode="compact"] .catalog-heading .tp-section-title {
  font-size: 24px;
}

html[data-layout-mode="compact"] .catalog-count {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 10px;
}

html[data-layout-mode="compact"] .catalog-intro {
  margin-top: 5px;
  font-size: 12px;
}

html[data-layout-mode="compact"] .tp-data-status {
  display: none;
}

html[data-layout-mode="compact"] .brand-filter-wrap {
  margin: 11px 0 12px;
}

html[data-layout-mode="compact"] .brand-filter {
  display: block;
  padding: 0;
  overflow: visible;
}

html[data-layout-mode="compact"] .brand-filter-label {
  margin-bottom: 6px;
}

html[data-layout-mode="compact"] .brand-filter button {
  display: none;
}

html[data-layout-mode="compact"] .brand-filter button.is-active {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  border-radius: 9px;
  background: #fff;
  color: var(--tp-text);
  border-color: var(--tp-accent-300);
}

html[data-layout-mode="compact"] .brand-filter button.is-active::after {
  content: "⌄";
  color: var(--tp-accent-700);
  font-size: 14px;
}

html[data-layout-mode="compact"] .model-list {
  gap: 8px;
}

html[data-layout-mode="compact"] .model-card {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "media content"
    "side side";
  gap: 9px 11px;
  min-height: 0;
  padding: 11px;
  border-radius: 11px;
}

html[data-layout-mode="compact"] .model-card__media .tp-product-media,
html[data-layout-mode="compact"] .model-card__media .tp-product-media--model {
  width: 72px;
  height: 76px;
  --tp-media-padding: 6px;
}

html[data-layout-mode="compact"] .model-title {
  font-size: 16px;
}

html[data-layout-mode="compact"] .model-copy {
  margin-bottom: 5px;
  font-size: 11px;
}

html[data-layout-mode="compact"] .model-tags {
  display: none;
}

html[data-layout-mode="compact"] .model-meta,
html[data-layout-mode="compact"] .model-meta[data-card-kind="family"]::after {
  font-size: 11px;
}

html[data-layout-mode="compact"] .model-card__side {
  min-height: 38px;
  margin: 0;
  padding-top: 8px;
}

html[data-layout-mode="compact"] .model-card__price strong {
  font-size: 18px;
}

html[data-layout-mode="compact"] .model-card .compare-card-action {
  min-width: 82px;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 10px;
}

html[data-layout-mode="compact"] .offer-empty-small {
  min-height: 132px;
  padding: 16px 12px;
}

html[data-layout-mode="compact"] .offer-empty-small .tp-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  font-size: 22px;
}

html[data-layout-mode="compact"] .offer-empty-small h3 {
  font-size: 16px;
}

html[data-layout-mode="compact"] .dealer-row > strong {
  display: block;
}

html[data-layout-mode="compact"] .dealer-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
}

html[data-layout-mode="compact"] .offer-trust-points {
  grid-template-columns: 1fr;
  padding: 12px;
}

@media (max-width: 390px) {
  html[data-layout-mode="compact"] .tp-compare span:nth-child(2) {
    display: none;
  }

  html[data-layout-mode="compact"] .tp-brand-logo {
    width: min(132px, 42vw);
  }
}

.brand-filter-select {
  display: none;
  width: 100%;
  height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--tp-accent-300);
  border-radius: 9px;
  background: #fff;
  color: var(--tp-text);
  font-size: 12px;
  font-weight: 760;
}

html[data-layout-mode="compact"] .brand-filter-select {
  display: block;
}

html[data-layout-mode="compact"] .brand-filter {
  display: none;
}

/* v0.5.326 — Mobile hierarchy cleanup
   The hamburger is the single category entry point on phones. The compact
   value proposition below search stays visible, while the second hero/steps
   and inactive offers preview no longer duplicate the same explanation. */
html[data-layout-mode="compact"] .mobile-category-toggle {
  display: none !important;
}

html[data-layout-mode="compact"] .tp-sidebar {
  display: none;
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open {
  display: block;
}

html[data-layout-mode="compact"] .tp-sidebar.is-category-open .category-list {
  margin-top: 0;
}

html[data-layout-mode="compact"].tp-view-start .tp-main-panel,
html[data-layout-mode="compact"].tp-view-start .tp-offers-panel {
  display: none;
}

html[data-layout-mode="compact"] .tp-catalog-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

html[data-layout-mode="compact"] .tp-catalog-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

html[data-layout-mode="compact"] .tp-catalog-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

html[data-layout-mode="compact"] .tp-catalog-menu span {
  transition: transform .16s ease, opacity .16s ease;
}

/* Provider previews use the official wordmark only. Do not repeat the name
   next to a logo that already contains the provider name. */
.dealer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 10px 12px;
}

.dealer-row > strong {
  display: none !important;
}

.dealer-logo-box--image {
  width: min(164px, 100%);
  min-height: 38px;
}

.dealer-logo-box--image img {
  width: auto;
  max-width: 158px;
  max-height: 38px;
}

html[data-layout-mode="compact"] .dealer-row {
  display: flex;
  justify-content: center;
  min-height: 60px;
  padding: 10px 12px;
}

html[data-layout-mode="compact"] .dealer-logo-box--image img {
  max-width: 150px;
  max-height: 36px;
}

/* Bosch title integrity: product-family names may wrap instead of being visually clipped. */
.model-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* service-navigation.css */
/* v0.5.375 — service navigation layoutpreview + header regressiefix. */
.tp-header-actions {
  grid-column: 6;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.tp-header-actions .tp-compare { flex: 0 0 auto; font-size: 15px; }
.tp-toolbox-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 6px 9px 6px 11px;
  border: 1px solid rgba(13,107,110,.22);
  border-radius: 12px;
  background: rgba(13,107,110,.07);
  color: var(--tp-text);
  cursor: pointer;
  text-align: left;
}
.tp-toolbox-button:hover { border-color: var(--tp-accent-500); background: rgba(13,107,110,.11); }
.tp-toolbox-button__icon { color: var(--tp-accent-700); font-size: 21px; }
.tp-toolbox-button__copy { display: grid; gap: 1px; line-height: 1.05; }
.tp-toolbox-button__copy strong { font-size: 13px; white-space: nowrap; }
.tp-toolbox-button__copy small { color: var(--tp-muted); font-size: 10px; font-weight: 700; }
.tp-toolbox-button__count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--tp-accent-600);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}


/* v0.5.375 — keep personal actions inside the existing provider rail. */
html[data-layout-mode="desktop"] .tp-header-actions .tp-compare {
  min-width: 0;
  padding: 0 2px;
  gap: 6px;
  font-size: 13px;
}
html[data-layout-mode="desktop"] .tp-toolbox-button {
  min-width: 0;
  padding-inline: 8px;
  gap: 6px;
}
html[data-layout-mode="desktop"] .tp-toolbox-button__copy strong { font-size: 12px; }
html[data-layout-mode="desktop"] .tp-toolbox-button__copy small { font-size: 9px; }

.tp-sidebar-services {
  margin: 6px 8px 12px;
  padding: 10px 8px 8px;
  border-top: 1px solid var(--tp-border);
}
.tp-sidebar-services > p {
  margin: 0 7px 7px;
  color: var(--tp-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tp-sidebar-services button {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 7px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tp-text);
  cursor: pointer;
  text-align: left;
}
.tp-sidebar-services button:hover { background: rgba(13,107,110,.07); }
.tp-sidebar-services button > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--tp-accent-50);
  color: var(--tp-accent-700);
  font-size: 17px;
}
.tp-sidebar-services button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.tp-sidebar-services button strong { font-size: 12px; }
.tp-sidebar-services button small { overflow: hidden; color: var(--tp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tp-sidebar-services button > span:last-child { color: var(--tp-accent-700); font-size: 18px; }

.tp-more-tools {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: #fff;
}
.tp-more-tools__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
.tp-more-tools__heading .tp-kicker { margin: 0 0 4px; }
.tp-more-tools__heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.tp-more-tools__heading > p { max-width: 340px; margin: 0; color: var(--tp-muted); font-size: 13px; line-height: 1.45; text-align: right; }
.tp-more-tools__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.tp-more-tool-card {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  gap: 13px;
  align-items: start;
  padding: 17px;
  border: 1px solid var(--tp-border);
  border-radius: 13px;
  background: #fbfdfd;
  color: var(--tp-text);
  cursor: pointer;
  text-align: left;
}
.tp-more-tool-card:hover { border-color: rgba(13,107,110,.35); box-shadow: 0 8px 24px rgba(15,17,21,.06); transform: translateY(-1px); }
.tp-more-tool-card__icon { display:grid; place-items:center; width:50px; height:50px; border-radius:14px; background:var(--tp-accent-50); color:var(--tp-accent-700); font-size:25px; }
.tp-more-tool-card__body { display:grid; gap:5px; }
.tp-more-tool-card__body strong { font-size:18px; }
.tp-more-tool-card__body small { color:var(--tp-muted); font-size:12px; line-height:1.45; }
.tp-more-tool-card__body > span { margin-top:3px; color:var(--tp-accent-700); font-size:12px; font-weight:850; }

.accessory-toolbox-picker {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 13px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(13,107,110,.22);
  border-radius: 12px;
  background: rgba(13,107,110,.055);
  color: var(--tp-text);
  cursor: pointer;
  text-align: left;
}
.accessory-toolbox-picker > span:first-child { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#fff; color:var(--tp-accent-700); }
.accessory-toolbox-picker > span:nth-child(2) { display:grid; gap:2px; }
.accessory-toolbox-picker strong { font-size:13px; }
.accessory-toolbox-picker small { color:var(--tp-muted); font-size:10px; }
.accessory-toolbox-picker > span:last-child { color:var(--tp-accent-700); font-size:18px; }

.parts-finder__note { margin: 9px 0 0; color: var(--tp-muted); font-size: 11px; }
.parts-method, .parts-preview, .toolbox-preview-hero, .toolbox-empty-state, .toolbox-preview-actions {
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius-lg);
  background: var(--tp-card);
}
.parts-method, .parts-preview { padding: 24px; }
.parts-method__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.parts-method__grid article { padding:16px; border:1px solid var(--tp-border); border-radius:12px; background:#fbfdfd; }
.parts-method__grid article > span { display:grid; place-items:center; width:30px; height:30px; margin-bottom:10px; border-radius:50%; background:var(--tp-accent-100); color:var(--tp-accent-800); font-weight:900; }
.parts-method__grid strong { display:block; margin-bottom:5px; font-size:14px; }
.parts-method__grid p { margin:0; color:var(--tp-muted); font-size:12px; line-height:1.45; }
.parts-preview__rows { display:grid; gap:9px; }
.parts-preview__rows > div { display:grid; grid-template-columns:130px minmax(0,1fr) auto; grid-template-areas:"code title button" "code note button"; gap:2px 12px; align-items:center; padding:13px; border:1px solid var(--tp-border); border-radius:11px; }
.parts-preview__code { grid-area:code; color:var(--tp-accent-700); font-size:11px; font-weight:850; }
.parts-preview__rows strong { grid-area:title; font-size:14px; }
.parts-preview__rows small { grid-area:note; color:var(--tp-muted); font-size:11px; }
.parts-preview__rows button { grid-area:button; min-height:34px; padding:0 12px; border:0; border-radius:9px; }

.toolbox-preview-page { display:grid; gap:16px; }
.toolbox-preview-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:28px; background:linear-gradient(145deg,#fff 0%,var(--tp-accent-50) 100%); border-color:var(--tp-accent-200); }
.toolbox-preview-hero h1 { margin:0; font-size:clamp(30px,4vw,46px); line-height:1.04; letter-spacing:-.045em; }
.toolbox-preview-hero p { max-width:720px; margin:12px 0 0; color:var(--tp-muted); line-height:1.55; }
.toolbox-preview-stat { display:grid; place-items:center; min-width:140px; padding:18px; border:1px solid rgba(13,107,110,.18); border-radius:16px; background:#fff; text-align:center; }
.toolbox-preview-stat strong { color:var(--tp-accent-700); font-size:38px; line-height:1; }
.toolbox-preview-stat span { margin-top:5px; color:var(--tp-muted); font-size:11px; }
.toolbox-preview-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
.toolbox-preview-actions button { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-areas:"icon title" "icon note"; gap:2px 10px; padding:15px; border:1px solid var(--tp-border); border-radius:12px; background:#fbfdfd; color:var(--tp-text); cursor:pointer; text-align:left; }
.toolbox-preview-actions button > span { grid-area:icon; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--tp-accent-50); color:var(--tp-accent-700); font-size:21px; }
.toolbox-preview-actions strong { grid-area:title; align-self:end; font-size:14px; }
.toolbox-preview-actions small { grid-area:note; color:var(--tp-muted); font-size:11px; }
.toolbox-empty-state { display:grid; justify-items:center; padding:42px 26px; text-align:center; }
.toolbox-empty-state__icon { display:grid; place-items:center; width:72px; height:72px; margin-bottom:14px; border-radius:20px; background:var(--tp-accent-50); color:var(--tp-accent-700); font-size:34px; }
.toolbox-empty-state h2 { margin:0 0 7px; font-size:24px; }
.toolbox-empty-state p { max-width:620px; margin:0 0 16px; color:var(--tp-muted); line-height:1.55; }
.toolbox-empty-state button { min-height:42px; padding:0 16px; border:1px solid var(--tp-accent-500); border-radius:10px; background:var(--tp-accent-600); color:#fff; font-weight:850; cursor:pointer; }

.product-personal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.toolbox-save-preview, .product-accessory-shortcut { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 11px; border-radius:10px; font-size:12px; font-weight:820; cursor:pointer; }
.toolbox-save-preview { border:1px solid var(--tp-accent-500); background:var(--tp-accent-600); color:#fff; }
.toolbox-save-preview small { margin-left:2px; padding:2px 5px; border-radius:999px; background:rgba(255,255,255,.18); font-size:8px; text-transform:uppercase; }
.toolbox-save-preview.is-preview-saved { background:#fff; color:var(--tp-accent-700); }
.product-accessory-shortcut { border:1px solid var(--tp-border); background:#fff; color:var(--tp-text); }

html[data-layout-mode="tablet"] .tp-header-actions { grid-area: compare; justify-self:end; }
html[data-layout-mode="tablet"] .tp-header-actions .tp-compare { gap:6px; font-size:13px; }
html[data-layout-mode="tablet"] .tp-toolbox-button { padding-inline:7px; gap:6px; }
html[data-layout-mode="tablet"] .tp-toolbox-button__copy strong { font-size:12px; }
html[data-layout-mode="tablet"] .tp-toolbox-button__copy small { display:none; }
html[data-layout-mode="tablet"] .tp-sidebar-services { display:flex; gap:8px; margin:0; padding:0 2px 4px; border-top:0; }
html[data-layout-mode="tablet"] .tp-sidebar-services > p { display:none; }
html[data-layout-mode="tablet"] .tp-sidebar-services button { width:auto; min-width:190px; border:1px solid var(--tp-border); background:#fff; }

html[data-layout-mode="compact"] .tp-header-actions { grid-area:compare; gap:5px; justify-self:end; }
html[data-layout-mode="compact"] .tp-header-actions .tp-compare { min-width:38px; padding:0; font-size:0; }
html[data-layout-mode="compact"] .tp-header-actions .tp-compare span:first-child { font-size:19px; }
html[data-layout-mode="compact"] .tp-toolbox-button { min-width:40px; min-height:36px; padding:4px 7px; gap:4px; }
html[data-layout-mode="compact"] .tp-toolbox-button__icon { font-size:18px; }
html[data-layout-mode="compact"] .tp-toolbox-button__copy { display:none; }
html[data-layout-mode="compact"] .tp-toolbox-button__count { min-width:18px; height:18px; font-size:9px; }
html[data-layout-mode="compact"] .tp-sidebar-services { margin:8px 0 0; padding:8px 0 0; border-top:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
html[data-layout-mode="compact"] .tp-sidebar-services > p { grid-column:1/-1; margin:0 2px 2px; }
html[data-layout-mode="compact"] .tp-sidebar-services button { min-height:48px; padding:6px; border:1px solid var(--tp-border); background:#fff; box-shadow:0 6px 18px rgba(23,24,33,.04); }
html[data-layout-mode="compact"] .tp-sidebar-services button small { display:none; }
html[data-layout-mode="compact"] .tp-more-tools { margin-top:12px; padding:14px; }
html[data-layout-mode="compact"] .tp-more-tools__heading { display:block; }
html[data-layout-mode="compact"] .tp-more-tools__heading > p { margin-top:5px; text-align:left; }
html[data-layout-mode="compact"] .tp-more-tools__grid, html[data-layout-mode="compact"] .parts-method__grid, html[data-layout-mode="compact"] .toolbox-preview-actions { grid-template-columns:1fr; }
html[data-layout-mode="compact"] .tp-more-tool-card { grid-template-columns:42px minmax(0,1fr); padding:13px; }
html[data-layout-mode="compact"] .tp-more-tool-card__icon { width:42px; height:42px; border-radius:12px; font-size:21px; }
html[data-layout-mode="compact"] .parts-preview__rows > div { grid-template-columns:1fr auto; grid-template-areas:"code button" "title button" "note button"; }
html[data-layout-mode="compact"] .toolbox-preview-hero { grid-template-columns:1fr; padding:20px; }
html[data-layout-mode="compact"] .toolbox-preview-stat { justify-self:start; min-width:120px; }
html[data-layout-mode="compact"] .product-personal-actions { display:grid; grid-template-columns:1fr; }
html[data-layout-mode="compact"] .toolbox-save-preview, html[data-layout-mode="compact"] .product-accessory-shortcut { justify-content:center; width:100%; }
.tp-sidebar-services button.is-active { background: rgba(13,107,110,.10); box-shadow: inset 3px 0 0 var(--tp-accent-500); }

/* v0.5.376 — hardening voor de smalste desktopbreedte en CI-fontmetrics. */
html[data-layout-mode="desktop"] .tp-header-actions {
  overflow: hidden;
}
html[data-layout-mode="desktop"] .tp-header-actions > * {
  min-width: 0;
  max-width: 100%;
}
html[data-layout-mode="desktop"] .tp-header-actions .tp-compare {
  flex: 0 1 auto;
  white-space: nowrap;
}
html[data-layout-mode="desktop"] .tp-toolbox-button {
  flex: 1 1 auto;
  overflow: hidden;
}
html[data-layout-mode="desktop"] .tp-toolbox-button__copy {
  min-width: 0;
  overflow: hidden;
}
html[data-layout-mode="desktop"] .tp-toolbox-button__copy strong,
html[data-layout-mode="desktop"] .tp-toolbox-button__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De providerrail is 320px. Op de smalste desktopbreedtes blijft de
   Gereedschapskist leesbaar en wordt alleen het redundante vergelijk-label
   ingeklapt; icoon + teller blijven volledig bruikbaar. */
@media (min-width: 1401px) and (max-width: 1540px) {
  html[data-layout-mode="desktop"] .tp-header-actions .tp-compare span:nth-child(2) {
    display: none;
  }
  html[data-layout-mode="desktop"] .tp-header-actions .tp-compare {
    flex: 0 0 auto;
    padding-inline: 4px;
  }
  html[data-layout-mode="desktop"] .tp-toolbox-button__copy strong {
    font-size: 11px;
  }
}

/* Keep the compare control intrinsically readable; the toolbox owns any
   remaining shrink space and truncates its copy instead of escaping the rail. */
html[data-layout-mode="desktop"] .tp-header-actions .tp-compare {
  flex: 0 0 auto;
  overflow: hidden;
}

/* footer.css */
/* Footer is visible in every layout mode. */
.tp-footer { max-width: 1780px; margin: 0 auto; padding: 10px 24px 38px; color: var(--tp-muted); }
.tp-footer__surface { border: 1px solid var(--tp-border); background: #fff; border-radius: var(--tp-radius-md); box-shadow: var(--tp-shadow-soft); padding: 24px; display: grid; gap: 20px; }
.tp-footer__top { display: grid; grid-template-columns: minmax(230px, 1.2fr) repeat(3, minmax(130px, .7fr)); gap: 24px; }
.tp-footer__brand { max-width: 380px; }
.tp-footer__brand strong { display: block; color: var(--tp-navy-950); font-size: 18px; letter-spacing: -.03em; margin-bottom: 7px; }
.tp-footer__brand p { margin: 0; font-size: 14px; line-height: 1.55; }
.tp-footer__column { display: grid; align-content: start; gap: 8px; }
.tp-footer__column h2 { margin: 0 0 2px; color: var(--tp-text); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.tp-footer__column a { width: max-content; max-width: 100%; font-size: 14px; color: #45556a; }
.tp-footer__column a:hover { color: var(--tp-navy-950); text-decoration: underline; text-underline-offset: 3px; }
.tp-footer__bottom { border-top: 1px solid var(--tp-border); padding-top: 16px; display: flex; gap: 12px 20px; justify-content: space-between; align-items: center; font-size: 12px; line-height: 1.5; }
.tp-footer__bottom p { margin: 0; }
.tp-footer__status { color: #627089; }
.tp-footer__email { margin-left: auto; }
.tp-footer__email a { color: inherit; text-decoration: none; font-weight: 700; }
html[data-layout-mode="tablet"] .tp-footer { padding: 14px 18px 32px; }
html[data-layout-mode="tablet"] .tp-footer__surface { padding: 22px; }
html[data-layout-mode="tablet"] .tp-footer__top { grid-template-columns: minmax(230px, 1.45fr) repeat(3, minmax(110px, .72fr)); gap: 20px; }
html[data-layout-mode="compact"] .tp-footer { display: block; padding: 18px 12px 24px; }
html[data-layout-mode="compact"] .tp-footer__surface { padding: 22px 16px 16px; gap: 20px; border-radius: 22px; box-shadow: 0 12px 30px rgba(23, 24, 33, .08); }
html[data-layout-mode="compact"] .tp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
html[data-layout-mode="compact"] .tp-footer__brand { grid-column: 1 / -1; max-width: none; padding-bottom: 2px; }
html[data-layout-mode="compact"] .tp-footer__brand strong { font-size: 20px; margin-bottom: 6px; }
html[data-layout-mode="compact"] .tp-footer__column { gap: 9px; }
html[data-layout-mode="compact"] .tp-footer__column h2 { font-size: 11px; letter-spacing: .09em; }
html[data-layout-mode="compact"] .tp-footer__column a { width: auto; font-size: 14px; line-height: 1.35; }
html[data-layout-mode="compact"] .tp-footer__column:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid var(--tp-border); }
html[data-layout-mode="compact"] .tp-footer__column:last-child h2 { margin: 0; }
html[data-layout-mode="compact"] .tp-footer__column:last-child a { text-align: right; }
html[data-layout-mode="compact"] .tp-footer__bottom { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 14px; }
html[data-layout-mode="compact"] .tp-footer__email { margin: 0; font-size: 14px; order: 1; }
html[data-layout-mode="compact"] .tp-footer__status { order: 2; }
@media (orientation: landscape) and (max-height: 599px) {
  html[data-layout-mode="compact"] .tp-footer { padding: 12px 14px 18px; }
  html[data-layout-mode="compact"] .tp-footer__surface { padding: 16px 18px; border-radius: 18px; gap: 14px; }
  html[data-layout-mode="compact"] .tp-footer__top { grid-template-columns: minmax(210px, 1.45fr) repeat(3, minmax(100px, .72fr)); gap: 14px; }
  html[data-layout-mode="compact"] .tp-footer__brand { grid-column: auto; padding: 0; }
  html[data-layout-mode="compact"] .tp-footer__brand strong { font-size: 17px; margin-bottom: 4px; }
  html[data-layout-mode="compact"] .tp-footer__brand p,
  html[data-layout-mode="compact"] .tp-footer__column a { font-size: 12px; }
  html[data-layout-mode="compact"] .tp-footer__column { gap: 5px; }
  html[data-layout-mode="compact"] .tp-footer__column h2 { font-size: 10px; }
  html[data-layout-mode="compact"] .tp-footer__column:last-child { grid-column: auto; display: grid; align-items: start; justify-content: normal; gap: 5px; padding: 0; border-top: 0; }
  html[data-layout-mode="compact"] .tp-footer__column:last-child a { text-align: left; }
  html[data-layout-mode="compact"] .tp-footer__bottom { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 12px; font-size: 11px; }
  html[data-layout-mode="compact"] .tp-footer__status,
  html[data-layout-mode="compact"] .tp-footer__email { order: initial; margin: 0; }
}

/* SEO Discovery v2: compacte, zichtbare crawlbare snelkoppelingen vanaf de homepage. */
.tp-footer__discovery {
  border-top: 1px solid var(--tp-border);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  font-size: 12px;
  line-height: 1.4;
}
.tp-footer__discovery strong { color: var(--tp-text); font-size: 12px; }
.tp-footer__discovery a { color: #45556a; text-decoration: none; }
.tp-footer__discovery a:hover { color: var(--tp-navy-950); text-decoration: underline; text-underline-offset: 3px; }
.tp-footer__discovery span { color: var(--tp-border-strong); }
html[data-layout-mode="compact"] .tp-footer__discovery { gap: 8px 12px; padding-top: 14px; }
html[data-layout-mode="compact"] .tp-footer__discovery strong { flex-basis: 100%; }

/* trust-notice.css */
/* v0.4 — Trust notices in the comparison flow */
.offer-trust {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--tp-border);
  background: #fbfbfc;
  border-radius: 12px;
  color: #52525b;
  font-size: 12px;
  line-height: 1.5;
}
.offer-trust a { color: var(--tp-accent-700); font-weight: 850; text-decoration: underline; text-underline-offset: 2px; }

/* cookie-consent.css */
/* ToolPakker cookie preferences — consent UI only; optional tracking remains disabled by default. */
/* `hidden` must always win over the component display rules below. Without this,
   the browser correctly changes the HTML attribute but the modal can remain visibly
   fixed above the page because `.tp-cookie-dialog { display: grid; }` wins in CSS. */
.tp-cookie-banner[hidden],
.tp-cookie-dialog[hidden] {
  display: none !important;
}
.tp-cookie-banner {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: 18px;
  width: min(760px, calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: 22px 24px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 64px rgba(15, 17, 21, .2);
  backdrop-filter: blur(14px);
}
.tp-cookie-banner__content { min-width: 0; }
.tp-cookie-banner__eyebrow {
  margin: 0 0 6px;
  color: var(--tp-accent-700);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tp-cookie-banner h2,
.tp-cookie-dialog h2 {
  margin: 0;
  color: var(--tp-graphite-950);
  font-size: 20px;
  letter-spacing: -.03em;
}
.tp-cookie-banner p { margin: 8px 0 0; color: var(--tp-muted); font-size: 14px; line-height: 1.5; }
.tp-cookie-banner__note a { color: var(--tp-accent-700); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tp-cookie-banner__actions,
.tp-cookie-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.tp-cookie-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 14px;
  font-weight: 850;
  font-size: 14px;
  white-space: nowrap;
}
.tp-cookie-button--primary { background: var(--tp-accent-500); border-color: var(--tp-accent-500); color: #fff; }
.tp-cookie-button--primary:hover { background: var(--tp-accent-600); border-color: var(--tp-accent-600); }
.tp-cookie-button--secondary { background: #fff; color: var(--tp-accent-700); border-color: var(--tp-border-strong); }
.tp-cookie-button--secondary:hover { background: var(--tp-accent-50); border-color: var(--tp-accent-300); }
.tp-cookie-button:focus-visible,
.tp-cookie-close:focus-visible,
.tp-cookie-settings-link:focus-visible { outline: 3px solid var(--tp-focus-ring); outline-offset: 3px; }

.tp-cookie-dialog { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 22px; }
.tp-cookie-dialog__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, .46); }
.tp-cookie-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  overflow: auto;
  padding: 26px;
  border: 1px solid var(--tp-border-strong);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 17, 21, .25);
}
.tp-cookie-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tp-cookie-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tp-graphite-900);
  font-size: 26px;
  line-height: 1;
}
.tp-cookie-close:hover { background: var(--tp-accent-50); border-color: var(--tp-accent-300); }
.tp-cookie-dialog__intro,
.tp-cookie-dialog__fineprint { margin: 14px 0 0; color: var(--tp-muted); font-size: 14px; line-height: 1.55; }
.tp-cookie-dialog__fineprint { font-size: 13px; }
.tp-cookie-options { display: grid; gap: 10px; margin-top: 22px; }
.tp-cookie-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--tp-border);
  border-radius: 14px;
  background: var(--tp-soft);
  cursor: pointer;
}
.tp-cookie-option.is-disabled { cursor: not-allowed; opacity: .78; }
.tp-cookie-option__copy { display: grid; gap: 4px; }
.tp-cookie-option__copy strong { color: var(--tp-graphite-950); font-size: 15px; }
.tp-cookie-option__copy span { color: var(--tp-muted); font-size: 13px; line-height: 1.45; }
.tp-cookie-option input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.tp-cookie-switch { position: relative; width: 44px; height: 25px; border-radius: 999px; background: #cfd8d9; transition: background .18s ease; }
.tp-cookie-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,17,21,.22); transition: transform .18s ease; }
.tp-cookie-option input:checked + .tp-cookie-switch { background: var(--tp-accent-500); }
.tp-cookie-option input:checked + .tp-cookie-switch::after { transform: translateX(19px); }
.tp-cookie-option input:focus-visible + .tp-cookie-switch { outline: 3px solid var(--tp-focus-ring); outline-offset: 3px; }
.tp-cookie-dialog__actions { margin-top: 22px; }
body.tp-cookie-dialog-open { overflow: hidden; }

.tp-cookie-settings-link {
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #45556a;
  font: inherit;
  font-size: 14px;
  text-align: left;
}
.tp-cookie-settings-link:hover { color: var(--tp-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.info-cookie-settings { margin-top: 16px; }

@media (max-width: 720px) {
  .tp-cookie-banner { grid-template-columns: 1fr; gap: 16px; padding: 20px; bottom: 12px; width: min(100% - 20px, 620px); border-radius: 18px; }
  .tp-cookie-banner__actions, .tp-cookie-dialog__actions { justify-content: stretch; }
  .tp-cookie-button { flex: 1 1 160px; }
  .tp-cookie-dialog { padding: 12px; }
  .tp-cookie-dialog__panel { padding: 22px 18px; border-radius: 18px; }
}

/* v0.5.49 — a conventional cookie banner with direct accept and reject actions. */
.tp-cookie-banner__actions {
  align-items: stretch;
}
.tp-cookie-banner__actions .tp-cookie-button {
  min-width: 142px;
}
@media (max-width: 720px) {
  .tp-cookie-banner__actions .tp-cookie-button {
    min-width: 0;
    flex: 1 1 100%;
  }
}