/* WordPress-only additions on top of the generated ckr.css.
   Everything the concept page did not need: the video modal, links inside
   cards, and defences against theme rules that reach into the content area. */

.ckr.ckr-block { margin: 0; }
.ckr a { text-decoration: none; }
.ckr .pc-name a,
.ckr .cat a { color: inherit; }

/* The whole product card opens the product: the name's link is stretched over
   the card, and the badges, quick-view and buy buttons sit above it. */
.ckr .pc { position: relative; }
.ckr .pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ckr .pc-name a:focus-visible { outline: none; }
.ckr .pc-name a:focus-visible::after { outline: 2px solid #0071E3; outline-offset: -2px; }
.ckr .pc-foot .btn,
.ckr .pc-foot a { position: relative; z-index: 2; } /* .pc-badges and .pc-quick are already absolute at z-index 2 */
.ckr .pc-badges { pointer-events: none; } /* a click on a badge opens the product too */
.ckr .cool-link,
.ckr .modal-full { color: inherit; }
.ckr .cool-link:hover,
.ckr .modal-full:hover { text-decoration: underline; text-underline-offset: .15em; }
.ckr .cool-img-link { display: contents; }
.ckr img { max-width: 100%; height: auto; }

/* WPBakery wraps every element in a row/column that can add its own spacing */
.vc_row .ckr.ckr-block,
.wpb_column .ckr.ckr-block { margin-inline: 0; }
.wpb_content_element.ckr-block { margin-bottom: 0; }

/* installation video, played here instead of sending the visitor to YouTube */
.ckr-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(0, 0, 0, .74);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ckr-modal .vid-frame {
	position: relative;
	width: min(1040px, 94vw);
	/* Width alone was capped, so a 16/9 box grew taller than a short window and
	   pushed the close button off the top of the screen — fine at 80% zoom,
	   invisible at 90–100%. Cap the height as well, in the same ratio. */
	max-width: calc((100vh - 5rem) * 16 / 9);
	max-width: calc((100dvh - 5rem) * 16 / 9);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
}
.ckr-modal .vid-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* inside the frame, so it can never be pushed off-screen whatever the window
   does; the scrim keeps it readable over a bright frame of video */
.ckr-modal .vid-x {
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}
.ckr-modal .vid-x:hover { background: rgba(0, 0, 0, .78); }
.ckr-modal .vid-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── quick view ──────────────────────────────────────────────────────────
   Reuses the concept's .modal-* skin from ckr.css. Two things the concept
   got from its page shell and this backdrop has to supply itself:
   the box's open transform (there is no .modal.is-on ancestor here), and
   scrolling, because a spec table can outgrow the viewport. */
.ckr-modal.ckr-quick {
	place-items: start center;
	padding: clamp(1rem, 4vw, 3rem) 1rem;
	overflow-y: auto;
}
.ckr-modal .modal-box { transform: none; }
.ckr-modal .modal-hd .btn--icon { flex: none; cursor: pointer; }
.ckr-modal .modal-tx .spectable { width: 100%; }

/* ── style options from the builder ──────────────────────────────────────
   The band colour and the dark-band token remap both live on the <section>,
   and some bands set literal colours (.usp-band.band-steel .usp-h). A choice
   made in the builder has to beat all of that, hence the !important flags. */
.ckr-block[data-bg] > section { background: var(--block-bg) !important; }
.ckr-block[data-border] > section { border: var(--block-border) !important; }
.ckr-block[data-radius] > section { border-radius: var(--block-radius) !important; overflow: hidden; }
.ckr-block[data-pt] > section { padding-top: var(--block-pt) !important; }
.ckr-block[data-pb] > section { padding-bottom: var(--block-pb) !important; }

.ckr-block[data-accent] > section {
	--brand: var(--block-brand);
	--brand-ink: var(--block-brand);
	--brand-hi: var(--block-brand);
}

.ckr-block[data-text] > section {
	--ink: var(--block-ink);
	--tx: var(--block-tx);
	--tx-2: var(--block-tx);
	color: var(--block-tx) !important;
}
.ckr-block[data-text] h1,
.ckr-block[data-text] h2,
.ckr-block[data-text] h3,
.ckr-block[data-text] .usp-h,
.ckr-block[data-text] .usp b,
.ckr-block[data-text] .icard h3,
.ckr-block[data-text] .close-list b,
.ckr-block[data-text] b.strong { color: var(--ink) !important; }
.ckr-block[data-text] .sub,
.ckr-block[data-text] .lead,
.ckr-block[data-text] .usp p,
.ckr-block[data-text] .close-list li,
.ckr-block[data-text] .icard p,
.ckr-block[data-text] > section > .wrap > p { color: var(--tx) !important; }

/* …but a card sits on its own light tile: the section colour must not repaint it */
.ckr-block[data-text] .pc,
.ckr-block[data-text] .cat:not(.cat--hero),
.ckr-block[data-text] .rev,
.ckr-block[data-text] .icard,
.ckr-block[data-text] .mc-card,
.ckr-block[data-text] .cool-card,
.ckr-block[data-text] .calc-step,
.ckr-block[data-text] .faq details {
	--ink: #1D1D1F;
	--tx: #6E6E73;
	--tx-2: #6E6E73;
	color: var(--tx) !important;
}
.ckr-block[data-text] .pc .pc-name,
.ckr-block[data-text] .pc .pc-name a,
.ckr-block[data-text] .pc .price,
.ckr-block[data-text] .pc dd,
.ckr-block[data-text] .cat:not(.cat--hero) b,
.ckr-block[data-text] .icard h3,
.ckr-block[data-text] .rev b { color: var(--ink) !important; }

.ckr-block[data-card-radius] .pc,
.ckr-block[data-card-radius] .cat,
.ckr-block[data-card-radius] .usp,
.ckr-block[data-card-radius] .rev,
.ckr-block[data-card-radius] .icard,
.ckr-block[data-card-radius] .mc-card,
.ckr-block[data-card-radius] .cool-card { border-radius: var(--card-radius) !important; }

/* ── header ───────────────────────────────────────────────────────────────
   wp_nav_menu prints ul > li > a; the design expects the links to be direct
   flex children, so the list wrappers are made transparent to layout. */
.ckr .hdr .nav ul,
.ckr .hdr .nav li { display: contents; }
.ckr .hdr .nav .sub-menu { display: none; }
.ckr-header .hdr .wrap > .search { margin: 0; }
.ckr .hdr .lang-menu a {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .5rem .7rem;
	color: inherit;
	font: inherit;
	text-align: left;
}
.ckr .hdr .lang-menu a:hover { background: var(--paper-2); }
.ckr .hdr .lang-menu { display: none; }
.ckr .hdr .lang:hover .lang-menu,
.ckr .hdr .lang:focus-within .lang-menu { display: block; }
.ckr-header .hdr.hdr--static { position: static; }

/* one header per page: this element replaces the theme's */
body.ckr-own-header > #header,
body.ckr-own-header .ct-header { display: none !important; }
@media (max-width: 660px) {
	.ckr .hdr.is-open .nav ul { display: flex; flex-direction: column; }
	.ckr .hdr.is-open .nav li { display: block; }
}
.ckr-modal .vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
/* no video chosen yet: the still keeps the card's shape, without a play button */
.ckr .vid-thumb--still { display: block; cursor: default; }
.ckr .vid-thumb--still .vid-poster { position: static; display: block; }
.ckr .vid-thumb--still img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ── categories, bento layout ────────────────────────────────────────────
   The approved composition: AirDeck Pro as the big black card (badge, price,
   name, spec chips, CTA with the photo beside it), the split tile twice as
   wide with the three indoor units drawn to scale, then the two small tiles.
   Declared here so it wins over the equal-tile rules in ckr.css.          */
.ckr .cats--bento { display: grid; grid-auto-rows: auto; }
@media (min-width: 1081px) {
	.ckr .cats--bento { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); gap: .8rem; }
	.ckr .cats--bento .cat { padding: .6rem 1rem .6rem .6rem; border-radius: 20px; }
	.ckr .cats--bento .cat--hero {
		grid-row: span 2;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "top img" "txt img" "specs img" "cta img";
		column-gap: 1.1rem;
		row-gap: .8rem;
		padding: 1.1rem;
		border-radius: 22px;
	}
	.ckr .cats--bento .cat--hero .cat-top { grid-area: top; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 0; }
	.ckr .cats--bento .cat--hero img { grid-area: img; flex: none; width: 100%; height: 100%; min-height: 13rem; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 16px; }
	.ckr .cats--bento .cat--hero .cat-txt { grid-area: txt; align-self: start; margin: 0; padding: 0; }
	.ckr .cats--bento .cat--hero .cat-txt b { font-size: 1.65rem; }
	.ckr .cats--bento .cat--hero .cat-cta { grid-area: cta; align-self: end; margin: 0; padding: 0; }
	.ckr .cats--bento .cat-specs {
		grid-area: specs;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: .35rem;
	}
	.ckr .cats--bento .cat-specs span {
		padding: .24rem .6rem;
		border-radius: 6px;
		background: rgba(255, 255, 255, .08);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
		font-size: .72rem;
		line-height: 1.3;
		color: #D2D2D7;
	}
	.ckr .cats--bento .cat:not(.cat--hero) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas: "img txt" "img cta";
		column-gap: .95rem;
		align-items: center;
	}
	.ckr .cats--bento .cat:not(.cat--hero) img { grid-area: img; flex: none; width: 6.75rem; height: auto; aspect-ratio: 1/1; border-radius: 14px; }
	.ckr .cats--bento .cat:not(.cat--hero) .cat-txt { grid-area: txt; align-self: end; margin: 0; padding: 0; }
	.ckr .cats--bento .cat:not(.cat--hero) .cat-txt b { font-size: 1rem; }
	.ckr .cats--bento .cat:not(.cat--hero) .cat-txt > span { font-size: .78rem; }
	.ckr .cats--bento .cat:not(.cat--hero) .cat-cta { grid-area: cta; align-self: start; margin: 0; padding: 0; font-size: .82rem; }
	/* .cat:not(.cat--hero) above is (0,4,0); this rule has to match it or the
	   "sizes" area never exists and .cat-sizes auto-places into a 4th column. */
	.ckr .cats--bento .cat--split:not(.cat--hero) { grid-column: span 2; grid-template-columns: 9.5rem minmax(0, 1fr) auto; grid-template-areas: "img txt sizes" "img cta sizes"; }
	.ckr .cats--bento .cat--split:not(.cat--hero) img { width: 9.5rem; }
	.ckr .cats--bento .cat-sizes { grid-area: sizes; display: flex; align-items: flex-end; gap: 1.1rem; padding: 0 .9rem .35rem 0; }
	.ckr .cats--bento .cat-sizes > span { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-family: var(--ff-m); font-size: .64rem; letter-spacing: .04em; color: var(--tx-2); }
	.ckr .cats--bento .cat--split .cat-sizes img {
		grid-area: auto;
		width: calc(var(--w) / 910 * 7.25rem);
		height: auto;
		aspect-ratio: auto;
		padding: 0;
		border-radius: 0;
		background: none;
		object-fit: contain;
		filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .1));
	}
}
@media (max-width: 1080px) {
	.ckr .cats--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
	.ckr .cats--bento .cat-sizes { display: none; }
	.ckr .cats--bento .cat--hero { grid-column: 1 / -1; }
	.ckr .cats--bento .cat--split { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
	.ckr .cats--bento .cat-specs { display: none; }
}

/* ── footer ─────────────────────────────────────────────────────────────── */
body.ckr-own-footer > footer[data-id],
body.ckr-own-footer .ct-footer { display: none !important; }
.ckr .ft .ft-grid ul { list-style: none; margin: 0; padding: 0; }
.ckr .ft .ft-grid li { margin: 0; }
.ckr-footer .ft { margin: 0; }

/* the theme header's own language item duplicates the switcher in CK Header */
.ckr .hdr .nav .menu-item-wpml-ls-slot,
.ckr .hdr .nav .wpml-ls-item { display: none; }
/* header and footer sit flush: no builder row spacing above or below them */
.ckr-header,
.ckr-footer { margin-bottom: 0 !important; }
.vc_row:has(.ckr-header),
.vc_row:has(.ckr-footer) { margin-bottom: 0 !important; padding-block: 0 !important; }
.vc_row:has(.ckr-header) .vc_column-inner,
.vc_row:has(.ckr-footer) .vc_column-inner { padding-top: 0 !important; }

/* ── WPBakery frontend editor ─────────────────────────────────────────────
   The editor wraps every child element in <div class="vc_element">, which
   becomes the grid/flex item and collapses our grids (a card squeezed to one
   letter per line). Making that wrapper transparent puts the real items back
   in the layout; the rest keeps the editor readable while dragging. */
.ckr .cats > .vc_element,
.ckr .pgrid > .vc_element,
.ckr .usps > .vc_element,
.ckr .revs > .vc_element,
.ckr .faq > .vc_element,
.ckr .feats > .vc_element,
.ckr .checks > .vc_element,
.ckr .hero-specs > .vc_element,
.ckr .pmarq-track > .vc_element { display: contents; }

/* The editor shows the real design: the wrapper above is already transparent to
   layout, so only the things that fight the editing surface are neutralised. */
body.ckr-vc-editing .ckr .hdr { position: static; }
body.ckr-vc-editing .ckr .pmarq-track { animation: none; }
body.ckr-vc-editing .ckr .revs { scroll-snap-type: none; }

/* The editor wraps every child element in a div of its own, and that wrapper —
   not our tile — becomes the grid/flex item. So four category tiles collapse
   into a bento of wrappers, the product grid drops from four columns to three,
   and .cat-sizes escapes its tile. display:contents hands the real items back
   to the grid.
   Matched on "not one of our items" rather than on VC's own class names, so a
   VC update that renames its wrapper cannot quietly break this again. */
body.ckr-vc-editing .ckr .cats > :not(.cat),
body.ckr-vc-editing .ckr .pgrid > :not(.pc),
body.ckr-vc-editing .ckr .usps > :not(.usp),
body.ckr-vc-editing .ckr .revs > :not(.rev),
body.ckr-vc-editing .ckr .faq > :not(details),
body.ckr-vc-editing .ckr .pmarq-track > :not(li) {
	display: contents;
}
/* A display:contents wrapper is no containing block, so VC's controls would
   otherwise anchor to the section instead of the tile. */
body.ckr-vc-editing .ckr .cats > * > .vc_controls,
body.ckr-vc-editing .ckr .pgrid > * > .vc_controls,
body.ckr-vc-editing .ckr .usps > * > .vc_controls,
body.ckr-vc-editing .ckr .revs > * > .vc_controls,
body.ckr-vc-editing .ckr .faq > * > .vc_controls,
body.ckr-vc-editing .ckr .pmarq-track > * > .vc_controls {
	position: absolute;
	z-index: 20;
}
/* direct-child sizing rules have to reach one level deeper while the editor's
   wrapper is in the tree */
.ckr .pgrid > .vc_element > .pc {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));
	min-width: 0;
}
.ckr .pmarq-track > .vc_element > li { flex: none; }

/* ── theme bleed ─────────────────────────────────────────────────────────
   Blocksy styles blockquotes and form controls globally. Inside our blocks
   the design owns those, otherwise the review cards and the filter bar grow
   (a 50px minimum on the sort select made the bar 78px instead of 39px). */
.ckr blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}
.ckr .rev blockquote { padding-left: 0; }
/* only the minimum height is reset — touching line-height or height here
   changes every button's metrics and shifts whole sections */
.ckr select,
.ckr input,
.ckr button { min-height: 0; }
.ckr .sel,
.ckr .search input { height: auto; }

/* ── AirDeck installation guide: match the copy column ────────────────────
   Rule 14 — neighbouring columns end together. The card was 601px next to a
   710px column because the still sizes itself and the CTA only exists once a
   video is chosen. Stretch the card and let the still absorb the slack. */
.ckr .adp .ad-grid { align-items: stretch; }
.ckr .ad-guide { display: flex; flex-direction: column; }
.ckr .ad-guide .vid-thumb {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-height: 200px;
	max-height: none;
}
.ckr .ad-guide .vid-thumb--still img { width: 100%; height: 100%; object-fit: contain; }
.ckr .ad-guide .ad-links { margin-top: 1rem; }
@media (max-width: 1080px) {
	/* one column again: the card goes back to its own height */
	.ckr .adp .ad-grid { align-items: start; }
	.ckr .ad-guide .vid-thumb { flex: none; aspect-ratio: 16/10; }
}

/* ── quick view: options, buy row, confirmation ──────────────────────────
   The options are real upsells (leidingset, EPDM manchet, PIR-isolatie) that
   move the price, so they get room to breathe rather than a cramped inline row. */
.ckr .ckr-opts { display: grid; gap: .7rem; margin-bottom: 1.1rem; }
.ckr .ckr-opt { display: grid; gap: .3rem; }
.ckr .ckr-opt > span {
	font-family: var(--ff-m);
	font-size: .68rem;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.ckr .ckr-opt select {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--line-2);
	border-radius: 8px;
	background: var(--card);
	color: var(--tx);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}
.ckr .ckr-opt select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ckr .ckr-buy-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .8rem 1.1rem;
}
.ckr .ckr-buy-row .push { margin-left: auto; }
.ckr .ckr-msg:empty { display: none; }
.ckr .ckr-msg { margin: .7rem 0 0; font-size: .85rem; color: var(--tx-2); }
.ckr .ckr-msg.is-bad { color: #B4231F; }
.ckr .ckr-done {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .9rem;
	font-size: .95rem;
	color: #1D7D34;
}
.ckr .ckr-done .i { width: 1.1rem; height: 1.1rem; }
@media (max-width: 660px) {
	.ckr .ckr-buy-row { flex-direction: column; align-items: stretch; }
	.ckr .ckr-buy-row .push { margin-left: 0; }
	.ckr .ckr-buy-row .btn { justify-content: center; }
}

/* ── stray <br> between the rows ─────────────────────────────────────────
   wpautop turns the newline between two [vc_row]s into a <br>, so every
   section was separated by a 26px white sliver — most visible as a gap under
   the header, above the black hero. A <br> directly inside the content
   wrapper is never content, only that leftover. */
.wpb-content-wrapper > br { display: none; }

/* ── quick view media panel ──────────────────────────────────────────────
   Every product PNG has the flat #F4F7F9 tile ground baked in, so on the
   modal's white panel it read as a pale square floating in space. Give the
   panel that same ground and let the photo actually fill it: the right column
   carries specs plus two option selects, so the panel is tall and a 270px
   image looked lost. */
.ckr-modal .modal-media {
	background: var(--tile);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}
.ckr-modal .modal-media img {
	width: 100%;
	max-width: 26rem;
	max-height: min(28rem, 100%);
	height: auto;
	object-fit: contain;
}
@media (max-width: 940px) {
	/* stacked: the panel no longer has a tall column to match */
	.ckr-modal .modal-media img { max-height: 16rem; }
}

/* ── floating cart bubble ────────────────────────────────────────────────
   Left edge, only once the cart holds something. Vertically centred so it
   never meets the theme's scroll-to-top button in the bottom-left corner. */
.ckr-cart-bubble {
	/* the wrapper carries .ckr for the tokens, and .ckr inherits the concept's
	   body background — white would show through the rounded right corners */
	background: transparent;
	position: fixed;
	left: 0;
	top: 50%;
	z-index: 90;
	transform: translate(-100%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility .24s;
}
.ckr-cart-bubble.is-on {
	transform: translate(0, -50%);
	opacity: 1;
	visibility: visible;
}
.ckr-cart-bubble .ckr-bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: .8rem .7rem .7rem;
	border-radius: 0 16px 16px 0;
	background: #1D1D1F;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
	transition: background .2s ease, padding-left .2s ease;
}
.ckr-cart-bubble .ckr-bubble:hover { background: #0071E3; padding-left: .95rem; }
.ckr-cart-bubble .ckr-bubble:focus-visible { outline: 2px solid #0071E3; outline-offset: 3px; }
.ckr-cart-bubble .i { width: 1.35rem; height: 1.35rem; }
.ckr-cart-bubble .ckr-bubble-n {
	position: absolute;
	top: .3rem;
	right: .25rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 .25rem;
	border-radius: 999px;
	background: #FF9F0A;
	color: #1D1D1F;
	font-family: var(--ff-m, inherit);
	font-size: .68rem;
	line-height: 1.15rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.ckr-cart-bubble .ckr-bubble-sum {
	font-family: var(--ff-m, inherit);
	font-size: .64rem;
	letter-spacing: .02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 1399px) {
	/* Only where the side gutter can hold it. The content column is 1280px plus
	   its padding, so below ~1400px the ~70px tab sat on top of the copy, chips
	   and cards (on a phone on the start of every line). The sticky header's
	   cart button is always on screen, so nothing is lost. */
	.ckr-cart-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ckr-cart-bubble { transition: opacity .2s ease, visibility .2s; }
}

/* ── calculator: above one unit's capacity ───────────────────────────────
   The advice already says one wall unit is not enough. Showing a model, its
   price and a cart button underneath sells the visitor the wrong thing, so
   that whole row gives way to the partner route; the model's m² range
   goes with it, since the model is no longer named. */
.ckr .calc-result #cfgPartner { display: none; }
.ckr .calc-result[data-over="1"] .calc-math,
.ckr .calc-result[data-over="1"] .rec-img,
.ckr .calc-result[data-over="1"] .rec-name,
.ckr .calc-result[data-over="1"] .rec-price,
.ckr .calc-result[data-over="1"] #cfgAdd,
.ckr .calc-result[data-over="1"] #cfgView { display: none; }
/* the advice itself lives inside .calc-prod, so that wrapper has to stay */
.ckr .calc-result[data-over="1"] .calc-prod { background: none; padding-left: 0; }
.ckr .calc-result[data-over="1"] #cfgPartner { display: inline-flex; }
.ckr .calc-result[data-over="1"] .rec-why,
.ckr .calc-result[data-over="1"] #outWhy { font-size: .95rem; }

/* ── the AirDeck Pro price, wherever it appears ──────────────────────────
   Base .price is 1.3rem, but the hero, the "Over ons" card and the category
   tile each shrank it below that — 0.98, 1.1 and 0.86rem. On a €2.599 product
   that is the number the visitor is looking for, so it reads as an afterthought.
   The "Vanaf" note stays small; only the amount grows. */
.ckr .hero-price .price { font-size: 1.3rem; }
.ckr .about-card-price > span:last-child { font-family: var(--ff-d); font-size: 1.35rem; color: #F5F5F7; }
.ckr .cat-price > span:last-child { font-family: var(--ff-d); font-size: 1.25rem; color: #F5F5F7; }
.ckr .cat:not(.cat--hero) .cat-price > span:last-child { color: var(--ink); }
@media (max-width: 660px) {
	.ckr .hero-price .price { font-size: 1.15rem; }
	.ckr .about-card-price > span:last-child { font-size: 1.2rem; }
	.ckr .cat-price > span:last-child { font-size: 1.1rem; }
}

/* ── partner logos: draggable ────────────────────────────────────────────
   The track scrolls the container now instead of running a keyframe, so the
   visitor can drag, swipe or wheel through the logos. The scrollbar is hidden
   because the mask already signals that the row continues. */
.ckr .pmarq.is-draggable {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}
.ckr .pmarq.is-draggable::-webkit-scrollbar { display: none; }
.ckr .pmarq.is-draggable.is-dragging { cursor: grabbing; }
.ckr .pmarq.is-draggable.is-dragging a { pointer-events: none; }
.ckr .pmarq.is-draggable .pmarq-track { animation: none !important; }

/* ── categories bento: alignment ─────────────────────────────────────────
   Each tile anchored its parts differently — in the Split tile the photo sat
   top, the text sat low and the to-scale units sat at a third height, so
   nothing shared a line. Give every tile one vertical anchor, and let the
   AirDeck photo fill its tile instead of leaving dead black space below it. */
@media (min-width: 1081px) {
	.ckr .cats--bento .cat--split:not(.cat--hero) {
		grid-template-rows: auto auto;
		align-content: center;
	}
	/* the units are drawn to one scale, so they stand on a shared baseline —
	   it is the block as a whole that centres */
	.ckr .cats--bento .cat-sizes { align-self: center; padding-bottom: 0; }

	.ckr .cats--bento .cat--hero img { min-height: 0; height: 100%; align-self: stretch; }
	.ckr .cats--bento .cat:not(.cat--hero) img { align-self: center; }

	/* name, descriptor and "Ontdek nu" keep one left edge in every tile */
	.ckr .cats--bento .cat .cat-txt,
	.ckr .cats--bento .cat .cat-cta { padding-left: 0; }
}

/* ── header: partner button ──────────────────────────────────────────────
   The live shop carries this button in the header; the redesign only had it
   inside sections. It sits before the cart and folds away on small screens,
   where the burger menu carries the same link. */
.ckr .hdr-partner {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
}
.ckr .hdr-partner + .cart-btn { margin-left: .6rem; }
@media (max-width: 1180px) {
	.ckr .hdr-partner span { display: none; }
	.ckr .hdr-partner { padding-inline: .6rem; }
}
@media (max-width: 940px) {
	.ckr .hdr-partner { display: none; }
}
/* the same button at the foot of the burger menu (phone and tablet only) */
.ckr .hdr .nav .nav-partner { display: none; }
@media (max-width: 940px) {
	.ckr .hdr.is-open .nav a.nav-partner { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .9rem .5rem .6rem; padding: .85rem 1rem; border-radius: 8px; background: var(--brand); color: #fff; font-size: 1rem; font-weight: 500; text-align: center; white-space: normal; }
	.ckr .hdr.is-open .nav a.nav-partner:hover { background: var(--brand-hi); color: #fff; }
	.ckr .hdr.is-open .nav a.nav-partner .i { width: 1.1rem; height: 1.1rem; flex: none; }
}

/* ── header: bigger logo ──────────────────────────────────────────────────
   Review point 16 (Sady): the mark read too small against the nav. The header
   row grows with it so nothing is cropped, and the stuck/phone steps keep the
   same proportion they had before. */
.ckr .hdr .wrap { min-height: 4.8rem; }
.ckr .brand-mark img, .ckr .brand-mark video { height: 3.4rem; } /* bigger at the client's request (Sady, feedback 16) */
.ckr .hdr.is-stuck .wrap { min-height: 3.9rem; }
.ckr .hdr.is-stuck .brand-mark img, .ckr .hdr.is-stuck .brand-mark video { height: 2.75rem; }
@media (max-width: 660px) {
	.ckr .brand-mark img, .ckr .brand-mark video { height: 2.75rem; }
}
@media (max-width: 400px) {
	.ckr .brand-mark img, .ckr .brand-mark video { height: 2.45rem; }
}

/* ── partners band keeps its own ground ───────────────────────────────────
   .partners-band sets background:var(--paper-2), but .band-mist sets
   background:var(--paper) on the same element and lands later in ckr.css, so
   partners rendered #F5F5F7 — identical to the band-soft "mobiel" section that
   follows it. One extra class breaks the tie and restores the alternation. */
.ckr .partners-band.band-mist { background: var(--paper-2); }

/* ── categories: the AirDeck tile highlighted without a second black band ──
   Review point 3 (Sady): the categories row led with a black AirDeck tile and
   was immediately followed by the black AirDeck band, so two AirDeck-led dark
   sections sat together. `.cat--light` keeps the whole `.cat--hero` bento
   layout — it only repaints the ground. The tile stays the flagship through the
   blue ring the design system already allows (rule 9: "black card / blue ring"),
   plus the badge and the price the other tiles do not carry. */
.ckr .cat--hero.cat--light {
	background: #fff;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--brand, #0071E3);
}
.ckr .cat--hero.cat--light .cat-txt b { color: var(--ink); }
.ckr .cat--hero.cat--light .cat-txt > span { color: var(--tx-2); }
.ckr .cat--hero.cat--light .cat-cta { color: var(--brand, #0071E3); }
.ckr .cat--hero.cat--light .cat-price > span:last-child { color: var(--ink); }

/* ── partners: manual arrows ──────────────────────────────────────────────
   The strip already drifts and can be dragged; the arrows make that visible.
   Same button as the reviews carousel, right-aligned above the logos. */
.ckr .pmarq-top { display: flex; justify-content: flex-end; margin-bottom: .9rem; }
.ckr .rv-btn[data-pm="-1"] .i { transform: rotate(90deg); }
.ckr .rv-btn[data-pm="1"] .i { transform: rotate(-90deg); }
@media (max-width: 660px) {
	.ckr .pmarq-top { display: none; }
}

/* ── USP strip: as many columns as there are tiles ────────────────────────
   The strip hard-coded four columns, so after the delivery and returns claims
   were removed the two remaining tiles sat in the left half with dead space
   beside them. Auto-columns let 2, 3 or 4 tiles fill the row evenly.
   Only above 1080px — below that the 2-per-row phone rules already apply. */
@media (min-width: 1081px) {
	.ckr .usp-band.band-steel .usps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

/* ── header search: a real button and live suggestions ────────────────────
   The field only submitted on Enter and showed nothing while you typed: the
   magnifier was a bare <svg> and there was no dropdown at all. The icon stays
   decorative on the left, a clear button and a real submit button sit on the
   right, and .ckr-sr holds the suggestions. */
.ckr .hdr .search { display: flex; align-items: center; }
/* Reserve room for the clear button only once there is a query: with 4.4rem
   always held back the placeholder was cut to "Zoek op mc". On wide screens
   the field also gets a floor so the full placeholder fits. */
.ckr .hdr .search input[type="search"] { padding-right: 2.5rem; text-overflow: ellipsis; }
.ckr .hdr .search.has-q input[type="search"] { padding-right: 4.4rem; }
@media (min-width: 1360px) {
  .ckr .hdr .wrap { gap: .9rem; }
  .ckr .hdr .search { flex: 1 1 16rem; min-width: 15.5rem; }
}

.ckr .hdr .search-clear,
.ckr .hdr .search-go {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	line-height: 0;
}
/* ckr.css colours the field's icon with `.ckr .search .i{color:var(--tx-3)}`,
   set on the svg itself — so it beat the white inherited from the button and
   the magnifier sat grey-on-blue, all but invisible. Colour the icons here. */
.ckr .hdr .search-clear .i,
.ckr .hdr .search-go .i { position: static; left: auto; top: auto; transform: none; color: inherit; }
.ckr .hdr .search-go .i { color: #fff; }

.ckr .hdr .search-clear {
	right: 2.5rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 999px;
	background: var(--mist, #E8E8ED);
	color: var(--tx-2);
	opacity: 0;
	pointer-events: none;
}
.ckr .hdr .search-clear .i { width: .6rem; height: .6rem; }
.ckr .hdr .search.has-q .search-clear { opacity: 1; pointer-events: auto; }
.ckr .hdr .search-clear:hover { background: var(--line-3, #C7C7CC); color: var(--ink); }

.ckr .hdr .search-go {
	right: .3rem;
	width: 1.95rem;
	height: 1.95rem;
	border-radius: 7px;
	background: var(--brand, #0071E3);
	color: #fff;
}
.ckr .hdr .search-go .i { width: .95rem; height: .95rem; }
.ckr .hdr .search-go:hover { background: #0077ED; }
.ckr .hdr .search-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── the suggestions panel ── */
.ckr .hdr .ckr-sr {
	position: absolute;
	top: calc(100% + .45rem);
	left: 0;
	right: 0;
	z-index: 60;
	display: none;
	max-height: min(70vh, 26rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 18px 44px -18px rgba(16, 35, 52, .3);
	text-align: left;
}
.ckr .hdr .search.is-open .ckr-sr { display: block; }

.ckr .ckr-sr-head {
	position: sticky;
	top: 0;
	background: #fff;
	padding: .8rem 1rem .35rem;
	font-family: var(--ff-b);
	font-size: .66rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tx-3);
}
.ckr .ckr-sr-group + .ckr-sr-group .ckr-sr-head { border-top: 1px solid var(--line); margin-top: .25rem; }

.ckr .ckr-sr-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem 1rem;
	text-decoration: none;
	border-left: 3px solid transparent;
}
.ckr .ckr-sr-item:hover,
.ckr .ckr-sr-item.is-active { background: var(--paper-2); border-left-color: var(--accent, #FF9F0A); }
.ckr .ckr-sr-thumb {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--tile, #F4F7F9);
}
.ckr .ckr-sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ckr .ckr-sr-tx { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ckr .ckr-sr-title {
	font-size: .82rem;
	line-height: 1.3;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ckr .ckr-sr-price { font-family: var(--ff-b); font-size: .78rem; color: var(--brand, #0071E3); }

.ckr .ckr-sr-all {
	display: block;
	padding: .7rem 1rem;
	border-top: 1px solid var(--line);
	background: #FBFCFD;
	font-size: .78rem;
	color: var(--brand, #0071E3);
	text-decoration: none;
}
.ckr .ckr-sr-all:hover, .ckr .ckr-sr-all.is-active { background: var(--paper-2); }

.ckr .ckr-sr-empty { padding: 1.2rem 1rem; text-align: center; }
.ckr .ckr-sr-empty strong { display: block; font-size: .85rem; color: var(--ink); margin-bottom: .2rem; }
.ckr .ckr-sr-empty span { font-size: .78rem; color: var(--tx-3); }

.ckr .ckr-sr-skel { padding: .8rem 1rem; }
.ckr .ckr-sr-skel i {
	display: block;
	height: 2.6rem;
	margin-bottom: .5rem;
	border-radius: 9px;
	background: linear-gradient(90deg, #F1F5F7 25%, #E7EDF1 37%, #F1F5F7 63%);
	background-size: 400% 100%;
	animation: ckrShimmer 1.2s ease-in-out infinite;
}
.ckr .ckr-sr-skel i:last-child { margin-bottom: 0; }
@keyframes ckrShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── let the search dropdown out of its WPBakery row ──────────────────────
   The concept page had no row wrapper; in WordPress the header sits inside a
   full-width vc_row, and WPBakery gives those overflow:hidden (it stops
   stretched rows causing a horizontal scrollbar). That clipped the suggestions
   panel to the header's own height — the panel rendered at full size but was
   simply cut off, with the hero video painting over it.
   Only the row that actually holds our header is opened up. */
.wpb-content-wrapper .vc_row:has(.ckr-header) { overflow: visible !important; }

/* ── the lifted header ────────────────────────────────────────────────────
   ckr.js moves the header block to the top of <body> so position:sticky has
   the page as its containing block. The wrapper itself must not become that
   containing block in turn, or .hdr would be bounded by the wrapper's own
   102px — display:contents removes its box while keeping the .ckr token scope
   and every .ckr descendant selector working. */
.ckr-header[data-ckr-lifted] { display: contents; }

/* ── account button ───────────────────────────────────────────────────────
   Signing in was only a small text link in the utility bar, which disappears
   below 1000px. It now sits next to the cart, styled like it. */
.ckr .hdr .acc-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .6rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: .8rem;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.ckr .hdr .acc-btn:hover { border-color: var(--line-3); background: var(--paper-2); }
.ckr .hdr .acc-btn .i { width: .95rem; height: .95rem; }
.ckr .hdr .acc-btn .acc-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .ckr .hdr .acc-btn span { display: none; } }
/* Guests see "Inloggen / Registreren" (opens the login modal). Below 1360px, or when
   ckr-auth.js finds the row too full (longer EN/DE/ES labels), the short login text
   takes its place so the search field keeps room for its placeholder. */
.ckr .hdr .acc-btn .acc-short { display: none; }
@media (max-width: 1359px) {
	.ckr .hdr .acc-btn .acc-full { display: none; }
	.ckr .hdr .acc-btn .acc-short { display: inline; }
}
.ckr .hdr.is-tight .acc-btn .acc-full { display: none; }
.ckr .hdr.is-tight .acc-btn .acc-short { display: inline; }
@media (max-width: 1180px) { .ckr .hdr .acc-btn .acc-short { display: none; } }
/* a little less space between the header items at 1360px+ so the longer label fits
   next to a search field that still shows its whole placeholder */
@media (min-width: 1360px) {
	.ckr .hdr .wrap { gap: .6rem; }
	.ckr .hdr .search { min-width: 13.65rem; }
}

/* ── filter bar: desktop structure ───────────────────────────────────────── */
.ckr #assortiment .fbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.ckr #assortiment .fbar-chips {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.ckr #assortiment .fbar-sort {
	margin-left: auto;
}

/* ── categories: mobile 2-per-row & centered alignment ─────────────────── */
@media (max-width: 768px) {
	.ckr .cats,
	.ckr .cats--4,
	.ckr .cats--bento {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .6rem !important;
	}

	.ckr .cats .cat,
	.ckr .cats .cat--hero,
	.ckr .cats .cat--split,
	.ckr .cats--bento .cat,
	.ckr .cats--bento .cat--hero,
	.ckr .cats--bento .cat--split,
	.ckr .cats--4 .cat--split {
		grid-column: auto !important;
		grid-row: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		text-align: center !important;
		padding: .55rem .55rem .85rem !important;
		border-radius: 16px !important;
		min-width: 0 !important;
	}

	.ckr .cats .cat img,
	.ckr .cats .cat--hero img,
	.ckr .cats .cat--split img,
	.ckr .cats--bento .cat img,
	.ckr .cats--bento .cat--hero img,
	.ckr .cats--bento .cat--split img,
	.ckr .cats--4 .cat--split img {
		grid-area: auto !important;
		flex: none !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		min-height: 0 !important;
		max-height: none !important;
		object-fit: contain !important;
		border-radius: 12px !important;
		margin: 0 !important;
		background: var(--tile, #F5F5F7) !important;
	}

	/* First card (AirDeck Pro) matches the other 3 cards on mobile */
	.ckr .cat--hero.cat--light,
	.ckr .cats .cat--hero,
	.ckr .cats--bento .cat--hero {
		box-shadow: none !important;
		border: none !important;
	}

	.ckr .cats .cat-top,
	.ckr .cats--bento .cat--hero .cat-top,
	.ckr .cat-top {
		display: none !important;
	}

	.ckr .cats .cat-txt,
	.ckr .cats .cat--hero .cat-txt,
	.ckr .cats .cat--split .cat-txt,
	.ckr .cats--bento .cat .cat-txt,
	.ckr .cats--bento .cat--hero .cat-txt,
	.ckr .cats--bento .cat--split .cat-txt,
	.ckr .cats--4 .cat--split .cat-txt {
		grid-area: auto !important;
		margin-top: .5rem !important;
		margin-inline: 0 !important;
		padding: 0 !important;
		text-align: center !important;
		align-self: auto !important;
	}

	.ckr .cats .cat-txt b,
	.ckr .cats .cat--hero .cat-txt b,
	.ckr .cats .cat--split .cat-txt b,
	.ckr .cats--bento .cat .cat-txt b,
	.ckr .cats--bento .cat--hero .cat-txt b,
	.ckr .cats--bento .cat--split .cat-txt b {
		display: block !important;
		font-size: .9rem !important;
		line-height: 1.25 !important;
		text-align: center !important;
		margin: 0 !important;
	}

	.ckr .cats .cat-txt > span,
	.ckr .cats .cat--hero .cat-txt > span,
	.ckr .cats .cat--split .cat-txt > span,
	.ckr .cats--bento .cat .cat-txt > span,
	.ckr .cats--bento .cat--hero .cat-txt > span,
	.ckr .cats--bento .cat--split .cat-txt > span {
		display: block !important;
		font-size: .72rem !important;
		line-height: 1.35 !important;
		text-align: center !important;
		margin-top: .15rem !important;
	}

	.ckr .cats .cat-cta,
	.ckr .cats .cat--hero .cat-cta,
	.ckr .cats .cat--split .cat-cta,
	.ckr .cats--bento .cat .cat-cta,
	.ckr .cats--bento .cat--hero .cat-cta,
	.ckr .cats--bento .cat--split .cat-cta,
	.ckr .cats--4 .cat--split .cat-cta {
		grid-area: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		align-self: center !important;
		justify-self: auto !important;
		text-align: center !important;
		margin-top: .35rem !important;
		padding: 0 !important;
		font-size: .78rem !important;
	}

	.ckr .cats--bento .cat-specs,
	.ckr .cats--bento .cat-sizes {
		display: none !important;
	}
}

/* ── product grid & filter bar: mobile ───────────────────────────────────── */
@media (max-width: 768px) {
	.ckr #assortiment .fbar {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: .65rem !important;
		overflow: visible !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
		margin-bottom: 1.25rem !important;
	}

	.ckr #assortiment .fbar-chips {
		display: flex !important;
		align-items: center !important;
		gap: .45rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		white-space: nowrap !important;
		margin-inline: calc(-1 * var(--pad, 1.25rem)) !important;
		padding-inline: var(--pad, 1.25rem) !important;
		padding-bottom: .3rem !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
	}
	.ckr #assortiment .fbar-chips::-webkit-scrollbar {
		display: none !important;
	}

	.ckr #assortiment .fbar-chips .chip {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		padding: .45rem .85rem !important;
		font-size: .8rem !important;
	}

	.ckr #assortiment .fbar-sort {
		display: none !important;
	}

	/* Products: exactly 2 in 1 row on mobile */
	.ckr .pgrid {
		--cols: 2 !important;
		--g: .6rem !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: .6rem !important;
	}

	.ckr .pgrid > .pc {
		flex: 0 0 calc((100% - .6rem) / 2) !important;
		width: calc((100% - .6rem) / 2) !important;
		max-width: calc((100% - .6rem) / 2) !important;
		min-width: 0 !important;
	}
}

/* ── reviews carousel: 2 per view on mobile ──────────────────────────────── */
@media (max-width: 768px) {
	.ckr #reviews .rv-top {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 1.15rem !important;
	}

	.ckr #reviews .rv-side {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: .85rem !important;
	}

	.ckr #reviews .score {
		margin: 0 !important;
	}

	.ckr #reviews .rv-nav {
		display: flex !important;
		align-items: center !important;
		gap: .45rem !important;
	}

	.ckr #reviews .revs,
	.ckr .revs {
		gap: .6rem !important;
	}

	.ckr #reviews .rev,
	.ckr .revs > .rev {
		flex: 0 0 calc((100% - .6rem) / 2) !important;
		min-width: calc((100% - .6rem) / 2) !important;
		max-width: calc((100% - .6rem) / 2) !important;
		min-height: 0 !important;
		padding: .85rem .7rem 1rem !important;
		border-radius: 14px !important;
	}

	.ckr #reviews .rev blockquote,
	.ckr .rev blockquote {
		font-size: .76rem !important;
		line-height: 1.38 !important;
		margin: .35rem 0 .5rem !important;
	}

	.ckr #reviews .rev-by,
	.ckr .rev-by {
		font-size: .74rem !important;
		padding-top: .45rem !important;
	}

	.ckr #reviews .stars .i,
	.ckr .rev .stars .i {
		width: .8rem !important;
		height: .8rem !important;
	}
}

/* ── footer: mobile 2 columns ────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ckr .ft-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.5rem 1rem !important;
		text-align: center !important;
	}

	.ckr .ft-grid > div:first-child {
		grid-column: 1 / -1 !important;
		margin-bottom: .5rem !important;
	}

	.ckr .ft-grid > div:nth-child(2) {
		grid-column: 1 !important;
	}

	.ckr .ft-grid > div:nth-child(3) {
		grid-column: 2 !important;
	}

	.ckr .ft-grid > div:nth-child(4) {
		grid-column: 1 / -1 !important;
		margin-top: .5rem !important;
	}

	.ckr .ft-grid > div:nth-child(4) ul {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: .4rem 1rem !important;
	}

	.ckr .ft-grid > div:nth-child(4) ul li {
		margin: 0 !important;
	}
}



/* ── footer column headings ──────────────────────────────────────────────
   They are h3 now (h4 after an h2 skipped a heading level), but they must
   keep the h4 size — the level is semantics, not scale. */
.ckr .ft-grid > div > h3 { font-size: 1rem; letter-spacing: 0; }

/* ── AirDeck category tile: contrast after it went light ─────────────────
   The tile used to be black, so its chips carried #D2D2D7 text on a
   rgba(255,255,255,.08) ground and the "Vanaf" note was #A1A1A6. On the new
   white card those measure 1.51:1 and 2.57:1 — both far under the 4.5:1 that
   normal text needs. Repaint them for a light ground. */
.ckr .cats--bento .cat--hero.cat--light .cat-specs span,
.ckr .cats--4 .cat--hero.cat--light .cat-specs span {
	background: #F5F5F7;
	box-shadow: inset 0 0 0 1px #D2D2D7;
	color: #424245;
}
.ckr .cats--bento .cat--hero.cat--light .cat-price,
.ckr .cats--bento .cat--hero.cat--light .cat-price > span:first-child,
.ckr .cats--4 .cat--hero.cat--light .cat-price,
.ckr .cats--4 .cat--hero.cat--light .cat-price > span:first-child {
	color: #6E6E73;
}

/* ── categories bento: centre the text block against the photo ───────────
   The tiles are "img txt" / "img cta" on rows 1fr auto. The photo spans both
   rows, so the 1fr row swallowed every spare pixel and .cat-txt — which sits
   at the END of its row — was pushed to the bottom of the card. align-content
   could not help because no free space was left to distribute.
   auto/auto lets the two rows shrink to their content, and the leftover height
   then centres the pair against the photo. */
@media (min-width: 1081px) {
	.ckr .cats--bento .cat:not(.cat--hero) {
		grid-template-rows: auto auto;
		align-content: center;
	}
	.ckr .cats--bento .cat:not(.cat--hero) .cat-txt { align-self: end; }
	.ckr .cats--bento .cat:not(.cat--hero) .cat-cta { align-self: start; }
}

/* ── reviews header on a phone ───────────────────────────────────────────
   At 375px the score sat in a 176×97 box — "4,9" at 40px on one side, the
   word "Reviews" squeezed into an 8rem column on the other — with the 38px
   arrows floating alongside at a different height. Compact single row, and
   the arrows line up with its middle. */
@media (max-width: 660px) {
	.ckr #reviews .rv-side {
		align-items: center;
		justify-content: center;
		gap: .7rem;
	}
	.ckr #reviews .score {
		align-items: center;
		gap: .55rem;
		padding: .6rem .85rem;
	}
	.ckr #reviews .score-n { font-size: 1.85rem; line-height: 1.05; }
	.ckr #reviews .score .stars { margin-top: .15rem; }
	/* the inline max-width:8rem gives "Reviews" its own narrow column */
	.ckr #reviews .score .dim { max-width: none !important; white-space: nowrap; }
	.ckr #reviews .rv-nav { flex: none; }
}

/* ── about pillars: keep the three in one row on a phone ─────────────────
   They stacked into three full-width blocks, which pushed the CTAs far down.
   Three narrow columns instead — icon over a short label, smaller type. */
@media (max-width: 660px) {
	.ckr .about-pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .5rem;
		padding-top: 1.1rem;
		margin-top: 1.2rem;
	}
	.ckr .about-pillars li {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .3rem;
	}
	.ckr .about-pillars .i { width: 1.15rem; height: 1.15rem; margin-top: 0; }
	.ckr .about-pillars b { font-size: .76rem; line-height: 1.22; hyphens: auto; }
	.ckr .about-pillars li > span > span { font-size: .67rem; line-height: 1.32; }
}

/* ── reviews arrows below the cards on a phone ───────────────────────────
   The arrows live inside .rv-side, which sits above the track, so on a phone
   they landed beside the score with the cards below them. Anchoring them to
   the bottom of the wrap puts them under the carousel where the thumb is,
   without touching the markup — so the desktop header row is untouched. */
@media (max-width: 660px) {
	.ckr #reviews .wrap {
		position: relative;
		padding-bottom: 3.6rem;
	}
	.ckr #reviews .rv-nav {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		gap: .75rem;
	}
	.ckr #reviews .rv-side { justify-content: center; }
}


/* ── three phone alignment fixes ─────────────────────────────────────────── */
@media (max-width: 660px) {
	/* 2. AirDeck call-outs: .adp-calls is display:contents, so each <li> is its
	   own grid item. A two-line caption made its cell taller and the one beside
	   it centred within the row, so the two big numbers sat 9px apart.
	   Anchoring to the top puts every number in a row on one line. */
	.ckr .adp-calls li { align-self: start; }

	/* 3. FAQ contact meta: hours and place stacked; one row reads tighter */
	.ckr .faq-help dl {
		grid-auto-flow: column;
		justify-content: center;
		gap: .35rem 1.1rem;
	}
	.ckr .faq-help dl > div { font-size: .78rem; }
}

/* ── top bar on a phone: keep the account link ───────────────────────────
   Only the opening hours survived the phone rules, so there was no route to
   My account from the top bar. The shop link stays hidden — one action is
   enough at 375px. */
@media (max-width: 660px) {
	.ckr .util .util-i[href*="my-account"],
	.ckr .util .util-i[href*="account"],
	.ckr .util a.util-i:last-child {
		display: inline-flex;
	}
	.ckr .util .wrap {
		display: flex;
		align-items: center;
		gap: .6rem;
	}
	/* PHP gives the last util item .push (margin-left:auto). With only the hours
	   left on a phone that shoved them right and left the other half empty. */
	.ckr .util .util-i.push { margin-left: 0; }
	.ckr .util a.util-i { margin-left: auto; }
	.ckr .util .util-i { font-size: .72rem; }
}

/* ─────────────── mobile: drop the per-block bottom gutter ─────────────── */
/*
   The concept page was a single .ckr wrapper, so `.ckr{padding-bottom:4.4rem}`
   in the mobile breakpoints reserved room once for the sticky buy bar (.mbar).

   In WordPress every element renders its own .ckr wrapper — eighteen of them on
   the home page — so that gutter was applied eighteen times: ~1270px of stray
   whitespace on a phone, plus a visible gap under the footer, because the cart
   drawer and cart bubble wrappers hold nothing but fixed-position markup and
   still got 70px of padding each.

   No element renders .mbar, so the gutter has nothing to clear. If a sticky bar
   is ever added, give it clearance on one wrapper, not on every .ckr.
*/
@media (max-width: 940px) {
	.ckr { padding-bottom: 0; }
}

/* ─────────────── shop archive: our content is the whole page ─────────────── */
/*
   On the shop archive WooCommerce prints the page content inside its own
   `.page-description` wrapper, which carries a 30px bottom margin meant to
   separate the description from the product loop. We removed that loop, so the
   margin was left hanging as a strip under the footer.
*/
body.ckr-own-header .page-description { margin-bottom: 0; }
/*
   WPBakery rearranges its full-width rows after the content filters have run and
   leaves bare `<p></p>` around them. They inherit the theme's 24px paragraph
   margin, which shows up as a strip above the header and under the footer.
   The PHP filter catches the ones wpautop makes; these are what is left.
*/
body.ckr-own-header .page-description > p:empty,
body.ckr-own-header .entry-content > p:empty,
body.ckr-own-header #wpb-content-root > p:empty { display: none; }
/*
   Blocksy prints its own hero section — page title plus breadcrumbs — above the
   content on archives. Our header and the section heading underneath it already
   open the page, so on any view we own that block is a second, mismatched title.
*/
body.ckr-own-header .hero-section { display: none; }

/* ─────────────────── login / register modal (includes/auth-modal.php) ───────────────────
   Guests only. The shell sits in the footer; the panels arrive by AJAX. */
.ckr-auth[hidden] { display: none; }
.ckr-auth { z-index: 1000000; place-items: center; overflow-y: auto; } /* above the Blocksy cookie notice (999999) while open */
.ckr-auth .ckr-auth__box { position: relative; width: min(28rem, 100%); max-height: none; overflow: visible; padding: clamp(1.25rem, 3vw, 1.9rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45); animation: ckrAuthIn var(--t-slow); }
.ckr-auth .ckr-auth__box:focus { outline: none; }
.ckr-auth .ckr-auth__x { position: absolute; top: .8rem; right: .8rem; z-index: 1; }
.ckr-auth .ckr-auth__loading { display: grid; place-items: center; min-height: 18rem; }
.ckr-auth .ckr-auth__spin { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: ckrAuthSpin .8s linear infinite; }
.ckr-auth .ckr-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin: 0 2.8rem 1.35rem 0; padding: .25rem; border-radius: 10px; background: var(--paper-2); }
.ckr-auth .ckr-auth__tabs button { min-height: 2.35rem; border: 0; border-radius: 8px; background: none; color: var(--tx-2); font-family: var(--ff-d); font-size: .88rem; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.ckr-auth .ckr-auth__tabs button:hover { color: var(--ink); }
.ckr-auth .ckr-auth__tabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ckr-auth .ckr-auth__h { margin: 0 2.8rem .35rem 0; font-family: var(--ff-d); font-size: 1.3rem; font-weight: 400; line-height: 1.25; color: var(--ink); }
.ckr-auth .ckr-auth__tabs + .ckr-auth__panel .ckr-auth__h { margin-right: 0; }
.ckr-auth .ckr-auth__sub { margin: 0 0 1.2rem; color: var(--tx-2); font-size: .9rem; line-height: 1.5; }
.ckr-auth .ckr-auth__form { display: grid; gap: .9rem; }
.ckr-auth .ckr-auth__fld { display: grid; gap: .35rem; margin: 0; }
.ckr-auth .ckr-auth__fld label { font-family: var(--ff-m); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); }
.ckr-auth .ckr-auth__fld .required { color: var(--accent-press); }
.ckr-auth .ckr-auth__fld input { width: 100%; min-height: 2.9rem; padding: .6rem .85rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; box-shadow: none; font-family: var(--ff-b); font-size: .95rem; color: var(--ink); }
.ckr-auth .ckr-auth__fld input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); }
.ckr-auth .ckr-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; font-size: .88rem; }
.ckr-auth .ckr-auth__row a { color: var(--brand-ink); }
.ckr-auth .ckr-auth__chk { display: inline-flex; align-items: center; gap: .45rem; color: var(--tx); cursor: pointer; }
.ckr-auth .ckr-auth__chk input { width: 1rem; height: 1rem; accent-color: var(--brand); }
.ckr-auth .ckr-auth__go { justify-content: center; width: 100%; margin-top: .2rem; }
.ckr-auth .ckr-auth__go.is-busy { opacity: .7; cursor: progress; }
.ckr-auth .ckr-auth__msg:empty { display: none; }
.ckr-auth .ckr-auth__msg { margin: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--paper-2); color: var(--tx); font-size: .88rem; }
.ckr-auth .ckr-auth__msg.is-err { border-left-color: #D70015; }
.ckr-auth .ckr-auth__msg.is-ok { border-left-color: var(--ok); background: var(--ok-wash); }
.ckr-auth .ckr-auth__privacy { color: var(--tx-2); font-size: .8rem; line-height: 1.5; }
.ckr-auth .ckr-auth__privacy p { margin: 0; }
.ckr-auth .ckr-auth__privacy a { color: var(--brand-ink); }
.ckr-auth .ckr-auth__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ckr-auth .ckr-auth__switch { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--tx-2); font-size: .88rem; }
.ckr-auth .ckr-auth__switch button { padding: 0; border: 0; background: none; color: var(--brand-ink); font: inherit; cursor: pointer; }
.ckr-auth .ckr-auth__switch button:hover { text-decoration: underline; }
@keyframes ckrAuthIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ckrAuthSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ckr-auth .ckr-auth__box { animation: none; } }
@media (max-width: 520px) {
	.ckr-auth { place-items: end center; padding: .6rem; }
	.ckr-auth .ckr-auth__box { border-radius: var(--r-lg); }
}

/* ─────────────────── large laptops / desktops ───────────────────
   Content stopped at 1280px, so a 1920px screen had ~370px empty on each side
   while the hero video ran edge to edge. The content (and the header, which
   uses the same .wrap) now grows in two steps, and the hero copy scales with it. */
@media (min-width: 1440px) {
	.ckr { --maxw: 1360px; }
	.ckr .hero h1 { font-size: clamp(4.4rem, 3.9vw, 5.1rem); }
	.ckr .hero-lead { font-size: clamp(1.18rem, .45vw + .75rem, 1.32rem); }
}
@media (min-width: 1680px) {
	.ckr { --maxw: 1480px; }
}


/* Product card: second gallery photo on hover (switch: Customizer →
   WooCommerce → Product images). A layer of its own, so none of the photo's
   per-breakpoint positioning applies to it. */
.ckr .pc-alt { position: absolute; inset: 0; z-index: 1; background: var(--tile, #fff) center / cover no-repeat; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
/* a studio shot on white takes the card's own tint (white × tint = tint), so
   the photo area does not flash to a white box on hover */
.ckr .pc-alt--studio { background-color: var(--tile, #fff); background-size: contain; background-blend-mode: multiply; }
/* a photo the frame would crop hard (a square in a wide line-up card) is shown whole */
.ckr .pc-alt--whole { background-size: contain; }
.ckr .pc-alt--contain { background-size: contain; background-origin: content-box; padding: 1.1rem; }
@media (hover: hover) {
	.ckr .pc:hover .pc-alt.is-ready { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ckr .pc-alt { transition: none; } }

/* Recycling notice (Climate King Recycling Price Sync) on cart and checkout: the
   box is black, but the shop's price colour turned the amount near-black on it */
.ckrps-banner .woocommerce-Price-amount,
.ckrps-banner .woocommerce-Price-amount bdi,
.ckrps-banner .woocommerce-Price-currencySymbol { color: #fff !important; font-weight: 600; }

/* Product buy bar: same iOS Safari fault as the cart bar, a backdrop-filter on a
   fixed bar left it unpainted while the page scrolled. Solid ground, own layer. */
.ckr .pdp .pdp-bar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }


/* ═════════════════════════════ sale and out-of-stock ═════════════════════════════ */
/* One status pill per product, first in the badge row: a red saving ("−11%") or a
   dark "Niet op voorraad". The price shows what it was marked down from, and a
   product that cannot be bought steps back: photo dimmed, button outlined. */

.ckr .pill--sale { border-color: #D70015; background: #D70015; color: #fff; font-family: var(--ff-m); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ckr .pill--out { border-color: transparent; background: rgba(29, 29, 31, .86); color: #fff; font-weight: 500; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ckr .pill[hidden], .ckr .price-was[hidden] { display: none !important; }

.ckr .price-was { font-family: var(--ff-d); font-size: .82rem; font-weight: 400; color: var(--tx-3); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the old price sits beside the new one, the "Vanaf" note stays in front */
.ckr .pc-foot > div:first-child { flex-wrap: wrap; row-gap: 0; }
.ckr .pc.is-out .pc-foot .price { color: var(--tx-2); }

.ckr .pc.is-out .pc-media img { filter: grayscale(.35); opacity: .55; }
/* no second photo on a sold-out card: its rest opacity used to win over the
   layer's own 0, so once loaded it stayed half-visible over the product */
.ckr .pc.is-out .pc-alt { display: none; }
.ckr .pc.is-out .pc-foot .btn--brand { --btn-bg: transparent; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ckr .pc.is-out .pc-foot .btn--brand:hover { background: var(--paper-2); }

/* product page: the saving beside the price, the stock state as a clear chip */
.ckr .pdp-price { flex-wrap: wrap; }
.ckr .pdp-price .price-was { font-size: 1.05rem; margin-left: .15rem; }
.ckr .pdp-price .pill--sale { align-self: center; margin-left: .2rem; }
.ckr .pdp-stock { padding: .28rem .7rem; border-radius: 999px; font-size: .78rem; white-space: nowrap; }
.ckr .pdp-stock.is-in { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.ckr .pdp-stock.is-out { background: var(--paper-2); color: var(--ink); }
.ckr .pdp-stock.is-out i { background: #D70015; }

@media (max-width: 660px) {
	.ckr .price-was { font-size: .68rem; }
	.ckr .pdp-price .price-was { font-size: .92rem; }
}

/* The animated logo as a small looping video (59 KB) instead of the 470 KB GIF;
   sized by the logo rules above, which list it next to img */
.ckr .brand-mark video { display: block; width: auto; aspect-ratio: 400 / 227; object-fit: contain; pointer-events: none; transition: height var(--t); }
/* footer copy of the animated logo, on the footer grey; sized by the .ft img rules */
.ckr .ft .ft-logo-v { display: block; width: auto; height: 2.1rem; aspect-ratio: 400 / 227; margin-bottom: .95rem; object-fit: contain; pointer-events: none; }
@media (max-width: 660px) { .ckr .ft .ft-logo-v { margin-inline: auto; } }

/* Header logo: the animation is an mp4, and a video has no transparency: its ground is
   white. The bar was a translucent white (80 %, 96 % once stuck) with a blur, so over a
   dark section it turned light grey and the logo sat in a white box. The bar is solid
   white now, which is what it looked like over the light sections anyway.
   (mix-blend-mode cannot fix this: the blur makes the bar its own layer, so the logo
   only ever blends with the bar's own colour, never with what shows through it.) */
.ckr .hdr, .ckr .hdr.is-stuck { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }


/* Footer: Climate King's social profiles, a row of round line icons under the company facts */
.ckr .ft .ft-social { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-top: 1.15rem; }
.ckr .ft .ft-social-t { font-family: var(--ff-m); font-size: .655rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.ckr .ft .ft-grid .ft-social ul { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 1rem; }
.ckr .ft .ft-social a { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.ckr .ft .ft-social a .i { width: 1.05rem; height: 1.05rem; stroke-width: 1.7; }
.ckr .ft .ft-social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }
.ckr .ft .ft-social a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 660px) {
	/* the footer is centred on phones */
	.ckr .ft .ft-social { justify-content: center; }
	.ckr .ft .ft-social a { width: 2.6rem; height: 2.6rem; }
}


/* Phone header: language, account, cart and menu are one row of controls, so they
   share one height (the account box was 31px beside 37, 39 and 36). */
@media (max-width: 940px) {
	.ckr .hdr .lang-btn, .ckr .hdr .acc-btn, .ckr .hdr .cart-btn, .ckr .hdr .burger { height: 2.5rem; min-height: 2.5rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
	.ckr .hdr .acc-btn, .ckr .hdr .burger { width: 2.5rem; padding: 0; }
	.ckr .hdr .lang { height: auto; display: flex; align-items: center; }
}


/* Header logo: a still <img> first (painted with the page), the animated loop takes
   its place once it plays. Both fill the same box, so nothing moves. */
.ckr .brand-mark .brand-still { display: block; width: auto; aspect-ratio: 400 / 227; object-fit: contain; transition: height var(--t); }
.ckr .brand-mark .brand-still[hidden], .ckr .brand-mark video[hidden] { display: none; }