/*
 * Qlimatix · "Producten vergelijken" page — ported verbatim from the prototype
 * (Productvergelijking.html, inline <style>). Scoped to .cmp-page so every
 * var(--…) resolves without leaning on home.css, and the global header/footer
 * chrome stays untouched. .wrap / container behaviour comes from layout.css.
 */

/* Self-hosted Onest (the page-type CSS carries its own @font-face — see overons.css). */
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;src:local('Onest'),url('fonts/Onest-Regular.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:500;font-display:swap;src:local('Onest Medium'),url('fonts/Onest-Medium.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;src:local('Onest SemiBold'),url('fonts/Onest-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Onest';font-style:normal;font-weight:700;font-display:swap;src:local('Onest Bold'),url('fonts/Onest-Bold.woff2') format('woff2');}

/* ============ BASE — scoped tokens + resets ============
   The prototype relied on homepage.css for tokens + base resets; home.css is
   NOT enqueued here, so we define them on .cmp-page (see PDP pattern). */
.cmp-page {
  --navy: #01273f; --navy-2: #052e4a;
  --orange: #e77935; --orange-hover: #d96b27;
  --light-blue-2: #dfe6ef;
  --text: #0e2a3f; --muted: #5e6f7c; --muted-2: #6f7e8c;
  --border: #e7eaee; --border-soft: #eef1f4; --star: #f5b400;
  font-family: "Onest", system-ui, -apple-system, sans-serif;
  color: var(--text);
  line-height: 1.55;
  /* Clear the global footer's floating newsletter band (translateY(-150px) +
     margin-bottom:-150px in footer.css) so it can't ride up over the page —
     mirrors .brand-page / .cat-page. Short states (e.g. the empty card) would
     otherwise be overlapped by the dark band. */
  padding-bottom: 160px;
}
/* Border-box reset. This page is self-contained and does NOT enqueue home.css,
   which is where the site-wide `* { box-sizing: border-box }` lives — so without
   this, .wrap (width:100% + side padding) fell back to content-box and overran
   the viewport by the padding amount (~40px phone / ~80px desktop), scrolling
   the whole page sideways. Restoring the reset matches the rest of the site and
   makes the container fit exactly at every width. */
.cmp-page, .cmp-page *, .cmp-page *::before, .cmp-page *::after { box-sizing: border-box; }
.cmp-page a { text-decoration: none; color: inherit; }
.cmp-page button { font: inherit; cursor: pointer; }
.cmp-page img { display: block; max-width: 100%; }
.cmp-page [hidden] { display: none !important; }

/* ===== Page head ===== */
.cmp-head { padding: 26px 0 22px; }
.cmp-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.cmp-crumb a { color: var(--muted); transition: color .15s; }
.cmp-crumb a:hover { color: var(--text); }
.cmp-crumb__sep { color: #c2ccd4; }
.cmp-crumb__cur { color: var(--text); }
.cmp-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cmp-title { font-size: 42px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.cmp-sub { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 560px; margin: 0; }
.cmp-head__tools { display: flex; align-items: center; gap: 14px; }
.cmp-toggle { display: inline-flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; user-select: none; }
.cmp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-toggle__sw { width: 44px; height: 26px; border-radius: 999px; background: #d4dce3; position: relative; transition: background .18s; flex-shrink: 0; }
.cmp-toggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(8,38,65,.3); transition: transform .18s; }
.cmp-toggle input:checked + .cmp-toggle__sw { background: var(--orange); }
.cmp-toggle input:checked + .cmp-toggle__sw::after { transform: translateX(18px); }
.cmp-clear { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; }
.cmp-clear:hover { color: #e8473b; }

/* ===== Comparison table ===== */
.cmp-section { padding: 6px 0 60px; }
.cmp-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.cmp-grid {
  --label-w: 210px;
  --col-w: minmax(200px, 1fr);   /* up to 4 products: columns flex to fill the width */
  --col-slider: 250px;           /* 5–6 products: fixed width so the row overflows into a slider */
  display: grid; min-width: 760px; background: #fff;
}
.cmp-grid[data-cols="2"] { grid-template-columns: var(--label-w) repeat(2, var(--col-w)); }
.cmp-grid[data-cols="3"] { grid-template-columns: var(--label-w) repeat(3, var(--col-w)); }
.cmp-grid[data-cols="4"] { grid-template-columns: var(--label-w) repeat(4, var(--col-w)); }
.cmp-grid[data-cols="5"] { grid-template-columns: var(--label-w) repeat(5, var(--col-w)); }
.cmp-grid[data-cols="6"] { grid-template-columns: var(--label-w) repeat(6, var(--col-w)); }

/* ===== Slider mode (5–6 products) =====
   The PDP hands over up to 6 columns; past 4 they can't share the width without
   getting unreadably narrow, so we pin them to a fixed width. The grid then
   overflows and .cmp-scroll turns it into a horizontal slider — the same
   behaviour the phone/tablet view already uses. */
.cmp-grid[data-prods="5"],
.cmp-grid[data-prods="6"] { --col-w: var(--col-slider); }
/* Freeze the label column (spec names + the corner header) to the left edge so
   you always know which row you're reading while scrolling the products
   sideways. Harmless when nothing overflows (sticky is a no-op), so it also
   covers narrower tablets where even 3–4 products overflow. No vertical divider —
   the flat white background keeps the "read by alignment" language of the page.
   Scoped to ≥761px so it never fights the phone view, which drops the label
   column entirely and pins the inline sub-labels instead (see the mobile block). */
@media (min-width: 761px) {
  .cmp-grid .cmp-cell--label { position: sticky; left: 0; z-index: 6; background: #fff; }
  .cmp-grid .cmp-grp__t { position: sticky; left: 16px; }
}

/* product header cells (sticky) */
.cmp-prodhead { position: sticky; top: 0; z-index: 12; background: #fff; }
/* Minimalist cells: no vertical dividers — rows are read by alignment + a thin
   bottom hairline, the same clean language as the mobile view and the PDP
   "Vergelijkbare producten" widget. */
.cmp-cell { padding: 15px 20px; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.cmp-cell--label { background: transparent; display: flex; align-items: center; }
.cmp-cell--addfill { background: transparent; }
.cmp-prodhead .cmp-cell { border-bottom: 1px solid var(--border); padding-top: 20px; padding-bottom: 22px; }
.cmp-prodhead .cmp-cell--label { background: #fff; border-bottom: 1px solid var(--border); }

.cmp-corner { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.cmp-corner__k { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--orange); }
.cmp-corner__n { font-size: 15px; color: var(--muted); }

.cmp-prod { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cmp-prod__rm { position: absolute; top: -6px; right: -4px; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #9aa6b0; background: #fff; border: 1px solid var(--border); font-size: 16px; line-height: 1; transition: color .15s, border-color .15s; }
.cmp-prod__rm:hover { color: #e8473b; border-color: #f3c4c0; }
.cmp-prod__media { height: 124px; display: grid; place-items: center; }
.cmp-prod__media img { max-height: 124px; max-width: 70%; width: auto; object-fit: contain; }
.cmp-prod__brand { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.cmp-prod__name { font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.28; letter-spacing: -0.01em; }
.cmp-prod__name a { color: inherit; }
.cmp-prod__rating { display: flex; align-items: center; gap: 8px; }
.cmp-prod__stars { display: flex; gap: 1px; color: var(--star); }
.cmp-prod__stars--muted { color: #d6dde3; }
.cmp-prod__rc { font-size: 12px; color: var(--muted); }
.cmp-prod__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cmp-prod__old { font-size: 13.5px; color: #9aa6b0; text-decoration: line-through; }
.cmp-prod__now { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; }
/* Scoped under .cmp-page so color:#fff outranks the broader `.cmp-page a {
   color: inherit }` reset (0,1,1) — this button is an <a>, so without the
   extra class it would inherit the dark body text instead of staying white. */
.cmp-page .cmp-prod__cart { margin-top: 2px; width: 100%; height: 46px; background: var(--orange); color: #fff; border-radius: 11px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .15s; border: 0; }
.cmp-prod__cart:hover { background: var(--orange-hover); }
.cmp-prod__cart.loading, .cmp-prod__cart.added { opacity: .9; }

/* add-product column */
.cmp-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 300px; color: var(--muted); }
.cmp-add__btn { width: 52px; height: 52px; border-radius: 999px; border: 1.5px dashed #c4ced8; display: grid; place-items: center; color: var(--navy); background: #fff; transition: border-color .15s, color .15s, background .15s; }
.cmp-add__btn:hover { border-color: var(--orange); color: var(--orange); }
.cmp-add p { font-size: 13.5px; margin: 0; max-width: 150px; line-height: 1.45; }
.cmp-add__pop { position: relative; }
.cmp-add__list { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 10px); width: 280px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 50px -22px rgba(8,38,65,.4); padding: 8px; z-index: 30; display: none; }
.cmp-add__pop.is-open .cmp-add__list { display: block; }
.cmp-add__opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; transition: background .12s; background: none; border: 0; }
.cmp-add__opt:hover { background: #f6f9fb; }
.cmp-add__opt img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.cmp-add__opt span { font-size: 13.5px; color: var(--text); line-height: 1.3; }
.cmp-add__empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* spec rows */
.cmp-row__label { font-size: 14px; font-weight: 500; color: var(--muted-2); }
/* Category header — a navy accordion pill on EVERY breakpoint: same rounded
   dark-blue look, sentence case (not uppercase), and the same orange chevron
   toggle the mobile view uses. Click/tap collapses the category. The accordion
   wiring (compare.js) already runs at all widths; this just unlocks it on
   desktop too (it used to be a static, non-interactive bar). */
.cmp-grp { grid-column: 1 / -1; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; background: var(--navy); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 13px 16px; border: 0; border-radius: 10px; margin-top: 8px; text-align: left; font-family: inherit; cursor: pointer; pointer-events: auto; transition: background .15s; }
.cmp-grp:hover { background: var(--navy-2); }
.cmp-grp__chev { display: block; color: var(--orange); flex-shrink: 0; transition: transform .15s; transform: rotate(180deg); }
.cmp-grp.is-collapsed .cmp-grp__chev { transform: rotate(0deg); }
.cmp-rowwrap.is-cat-collapsed { display: none; }
.cmp-val { font-size: 14.5px; color: var(--text); line-height: 1.4; display: flex; align-items: center; gap: 9px; min-width: 0; }
.cmp-val--num { font-variant-numeric: tabular-nums; }
.cmp-val__dash { color: #b7c1c9; }
.cmp-best { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #2f8a55; background: #e7f4ec; padding: 3px 8px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; }
.cmp-yes { display: inline-flex; align-items: center; gap: 8px; color: #2f8a55; font-weight: 600; }
.cmp-yes svg { color: #2f8a55; }
.cmp-no { display: inline-flex; align-items: center; gap: 8px; color: #aab3bb; }
.cmp-no svg { color: #c4ced8; }
.cmp-rowwrap { display: contents; }
.cmp-rowwrap.is-hidden { display: none; }
.cmp-rowwrap.is-grp-hidden { display: none; }
/* Zebra striping intentionally removed — the comparison reads cleaner flat-white
   with only the navy category bars and thin row hairlines for structure
   (congruent with the mobile view). The .zebra class stays a no-op so the
   diff-toggle JS that flips .zebra/.diffs keeps working unchanged. */

/* highlight differences mode */
.cmp-grid.diffs .cmp-rowwrap[data-same="1"] { display: none; }

/* ===== Empty state ===== */
.cmp-empty { padding: 30px 0 80px; }
.cmp-empty__box { border: 1px solid var(--border); border-radius: 22px; background: #fff; padding: 64px 40px; text-align: center; max-width: 640px; margin: 0 auto; }
.cmp-empty__ico { width: 72px; height: 72px; border-radius: 999px; background: var(--light-blue-2); color: var(--navy); display: grid; place-items: center; margin: 0 auto 22px; }
.cmp-empty__box h2 { font-size: 26px; color: var(--navy); margin: 0 0 10px; }
.cmp-empty__box p { font-size: 15.5px; color: var(--muted); line-height: 1.6; margin: 0 auto 26px; max-width: 420px; }
/* .cmp-page-scoped: same reason as .cmp-prod__cart — keep the white label from
   being overridden by `.cmp-page a { color: inherit }` (this CTA is an <a>). */
.cmp-page .cmp-empty__cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 15px; font-weight: 600; transition: background .15s; }
.cmp-empty__cta:hover { background: var(--orange-hover); }

/* ===== Helper bar under table ===== */
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.cmp-back { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.cmp-back svg { transition: transform .15s; }
.cmp-back:hover svg { transform: translateX(-3px); }
.cmp-note { font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  /* overflow-x: clip is a backstop against edge bleed; the box-sizing reset at
     the top of this file is what actually keeps .wrap inside the viewport. */
  .cmp-page { padding-bottom: 150px; overflow-x: clip; }
  .cmp-head { padding: 18px 0 16px; }
  .cmp-title { font-size: 30px; }
  .cmp-head__row { align-items: flex-start; flex-direction: column; gap: 16px; }
  .cmp-head__tools { width: 100%; justify-content: space-between; }

  /* Coolblue-style stacked layout: drop the fixed label column so each spec
     label becomes a full-width sub-header above its values. The "+ voeg product
     toe" card stays in the grid as the LAST column (next to the products, not
     wrapped below), exactly like desktop. Column counts below INCLUDE that add
     card: it's present for 1–5 products and gone at the 6-product max.
       • 1 product  → product + add card, both fit (no scroll)
       • 2–5 products → cards get a fixed width so the row overflows and you
         scroll right to reach the later product(s) and the add card
       • 6 products (max) → no add card. */
  .cmp-scroll { overflow-x: auto; overflow-y: visible; padding-bottom: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .cmp-grid { min-width: 0; }
  .cmp-grid[data-prods="1"] { grid-template-columns: repeat(2, 1fr); }
  .cmp-grid[data-prods="2"] { grid-template-columns: repeat(3, minmax(44vw, 1fr)); }
  .cmp-grid[data-prods="3"] { grid-template-columns: repeat(4, minmax(44vw, 1fr)); }
  .cmp-grid[data-prods="4"] { grid-template-columns: repeat(5, minmax(44vw, 1fr)); }
  .cmp-grid[data-prods="5"] { grid-template-columns: repeat(6, minmax(44vw, 1fr)); }
  .cmp-grid[data-prods="6"] { grid-template-columns: repeat(6, minmax(44vw, 1fr)); }
  /* base cell padding (product header cards); value/label cells refine below */
  .cmp-cell { padding: 12px 10px; }
  .cmp-prodhead .cmp-cell { padding: 14px 10px 16px; }
  .cmp-prodhead .cmp-cell--label.cmp-corner { display: none; }
  /* Keep the add card (header) visible as the last column; only hide the empty
     per-spec-row filler cells so the spec rows leave that column blank. */
  .cmp-cell--addfill { display: none; }
  /* no vertical dividers — the two columns are read by alignment (Coolblue) */
  .cmp-rowwrap > .cmp-cell { border-left: none; }

  /* Coolblue-style spec label: a grey dashed-underline sub-label, no grey bar */
  .cmp-cell--label { grid-column: 1 / -1; position: static; background: transparent; border-bottom: none; padding: 13px 10px 3px; }
  .cmp-row__label { display: inline-block; font-size: 13px; font-weight: 500; color: var(--muted-2); border-bottom: 1px dashed #c5ced6; padding-bottom: 3px; }
  /* value cells sit tight under their label, with a thin divider beneath */
  .cmp-rowwrap:not(.cmp-prodhead) > .cmp-cell:not(.cmp-cell--label) { padding: 2px 10px 14px; }
  /* keep "€ 999,00" intact in narrow columns; let a badge wrap below instead */
  .cmp-val { flex-wrap: wrap; row-gap: 2px; }
  .cmp-val--num strong, .cmp-prod__old { white-space: nowrap; }
  /* drop the desktop zebra striping for plain white Coolblue rows */
  .cmp-grid.zebra .cmp-rowwrap:nth-of-type(even) .cmp-cell:not(.cmp-grp),
  .cmp-grid.zebra .cmp-rowwrap:nth-of-type(even) .cmp-cell--label { background: transparent; }

  /* (Category-header / accordion styling now lives in the base rule above and
     applies to mobile + desktop alike — no mobile-specific override needed.) */

  /* Equal title slot: reserve room for the longest product name so the rating
     lines up across columns even when one name wraps to 3 lines and another to
     2. (~3 lines at the card's line-height.) */
  .cmp-prod__name { min-height: 3.84em; }
  /* …and pin the price + cart button to the bottom of the (equal-height) card,
     so they also line up when the rating text wraps to a different number of
     lines ("4 reviews" vs "nog geen reviews"). The corner cell is hidden on
     mobile; the add card is a real column, so it flexes too and fills its
     column height to match the product cards. */
  .cmp-prodhead .cmp-cell { display: flex; flex-direction: column; }
  .cmp-prod, .cmp-add { flex: 1; }
  .cmp-add { min-height: 0; }
  .cmp-prod__price { margin-top: auto; }
  /* The add card is always the right-most column, so its product picker opens
     anchored to the right and capped in width — otherwise the 280px popover ran
     off the right edge of the narrow phone column. */
  .cmp-add__list { left: auto; right: 0; transform: none; width: min(260px, 78vw); }

  /* When 3–4 products overflow horizontally, pin the spec label and the category
     title to the left edge so you always know which spec each value belongs to
     while scrolling right. (Inert for 1–2 products, which never scroll.) */
  .cmp-grid[data-prods="3"] .cmp-row__label,
  .cmp-grid[data-prods="4"] .cmp-row__label,
  .cmp-grid[data-prods="5"] .cmp-row__label,
  .cmp-grid[data-prods="6"] .cmp-row__label,
  .cmp-grid[data-prods="3"] .cmp-grp__t,
  .cmp-grid[data-prods="4"] .cmp-grp__t,
  .cmp-grid[data-prods="5"] .cmp-grp__t,
  .cmp-grid[data-prods="6"] .cmp-grp__t { position: sticky; left: 12px; z-index: 1; }

  .cmp-prod__media { height: 96px; }
  .cmp-prod__media img { max-height: 96px; }
  .cmp-prod__now { font-size: 19px; }
  .cmp-prod__cart { height: 42px; }
  .cmp-empty__box { padding: 48px 24px; }
  .cmp-empty__box h2 { font-size: 22px; }
}
@media (max-width: 480px) {
  .cmp-title { font-size: 26px; }
  .cmp-cell--label { padding: 12px 8px 3px; }
  .cmp-rowwrap:not(.cmp-prodhead) > .cmp-cell:not(.cmp-cell--label) { padding: 2px 8px 13px; }
}