/* Climate King — product, content and shop-flow pages.
   Hand-written on the homepage tokens (ckr.css). Same rules: 8px buttons max,
   Anta 400 only, photos on the #F4F7F9 tile, bands alternate, phones centre. */

/* ═════════════════════════════ product: buy box ═════════════════════════════ */

.ckr .pdp { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(2.5rem, 4.5vw, 4rem); background: var(--paper); }
.ckr .pdp-preview-note { margin: 0 0 .8rem; padding: .55rem .8rem; border: 1px dashed var(--line-2); border-radius: 8px; font-family: var(--ff-m); font-size: .72rem; color: var(--tx-2); }

.ckr .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; margin-bottom: clamp(.9rem, 1.6vw, 1.3rem); font-size: .8rem; color: var(--tx-2); }
.ckr .crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.ckr .crumbs a:last-child { color: var(--ink); }
.ckr .crumbs-sep { width: .8rem; height: .8rem; transform: rotate(-90deg); opacity: .5; }

.ckr .pdp-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.75rem, 3.8vw, 3.75rem); align-items: start; }

/* gallery */
.ckr .pdp-gallery { position: sticky; top: 6.5rem; min-width: 0; }
.ckr .pdp-stage { position: relative; aspect-ratio: var(--ar, 16 / 10); border-radius: 22px; background: #F4F7F9; overflow: hidden; transition: aspect-ratio .3s ease; }
.ckr .pdp-main { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.ckr .pdp-main img { width: 100%; height: 100%; padding: 4% 6%; object-fit: contain; transition: transform .25s ease; }
/* hover zoom: the photo grows under the pointer (origin set by the script); a click still opens the lightbox */
.ckr .pdp-main.is-zoom img { transform: scale(2); transition-duration: .15s; }
@media (prefers-reduced-motion: reduce) { .ckr .pdp-main img { transition: none; } }
.ckr .pdp-badges { position: absolute; z-index: 2; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; pointer-events: none; }
.ckr .pdp-badges .pill--ok { background: #fff; }
.ckr .pdp-nav { position: absolute; z-index: 2; top: 50%; width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--e1); opacity: 0; transition: opacity var(--t), background var(--t-fast); }
.ckr .pdp-nav .i { width: 1.1rem; height: 1.1rem; }
.ckr .pdp-nav--prev { left: .8rem; } .ckr .pdp-nav--prev .i { transform: rotate(90deg); }
.ckr .pdp-nav--next { right: .8rem; } .ckr .pdp-nav--next .i { transform: rotate(-90deg); }
.ckr .pdp-stage:hover .pdp-nav, .ckr .pdp-nav:focus-visible { opacity: 1; }
.ckr .pdp-nav:hover { background: #fff; }
.ckr .pdp-count { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; padding: .2rem .55rem; border-radius: 6px; background: rgba(29,29,31,.72); color: #fff; font-family: var(--ff-m); font-size: .7rem; }
.ckr .pdp-count b { color: #fff; }
/* thumbnails: one row that scrolls — by touch, by wheel and by dragging with the mouse (ckr-pages.js);
   the edges fade while there is more to see on that side */
.ckr .pdp-thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-behavior: smooth; cursor: grab; user-select: none; -webkit-user-select: none; }
.ckr .pdp-thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.ckr .pdp-thumbs.is-dragging button { pointer-events: none; }
.ckr .pdp-thumbs img { -webkit-user-drag: none; }
.ckr .pdp-thumbs.has-more-r { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.ckr .pdp-thumbs.has-more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.ckr .pdp-thumbs.has-more-l.has-more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ckr .pdp-thumbs::-webkit-scrollbar { display: none; }
.ckr .pdp-thumbs button { flex: 0 0 4.1rem; aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; background: #F4F7F9; border: 2px solid transparent; transition: border-color var(--t-fast); }
.ckr .pdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.ckr .pdp-thumbs button:hover { border-color: var(--line-2); }
.ckr .pdp-thumbs button[aria-current] { border-color: var(--brand); }

/* buy column */
.ckr .pdp-buy { min-width: 0; }
.ckr .pdp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.ckr .pdp-rating { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--tx-2); }
.ckr .pdp-rating:hover { color: var(--brand-ink); }
/* the product names are long ("… CK-25-WMIU/WMOU Single Split Wandmodel Airco 2.6kW"): kept to two lines on desktop */
.ckr .pdp-title { margin-top: .55rem; font-size: clamp(1.3rem, 1.75vw, 1.7rem); line-height: 1.2; letter-spacing: -.012em; }
.ckr .pdp-lead { margin-top: .8rem; color: var(--tx); font-size: 1rem; line-height: 1.6; max-width: 56ch; }

.ckr .pdp-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); gap: 1px; }
.ckr .pdp-keys > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .1rem; padding: .7rem .8rem; background: #fff; min-width: 0; }
.ckr .pdp-keys dt { font-size: .7rem; color: var(--tx-2); }
.ckr .pdp-keys dd { font-family: var(--ff-d); font-size: 1.05rem; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ckr .pdp-keys:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ckr .pdp-keys:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ckr .pdp-pricebox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ckr .pdp-price { display: flex; align-items: baseline; gap: .5rem; }
.ckr .pdp-price .price-note { font-size: .78rem; }
.ckr .pdp-price .price { font-size: clamp(1.8rem, 2.6vw, 2.3rem); color: var(--ink); line-height: 1; }
.ckr .pdp-stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; }
.ckr .pdp-stock i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ckr .pdp-stock.is-in { color: var(--ok); }
.ckr .pdp-stock.is-out { color: var(--warn-ink); }

/* WooCommerce's form, in our clothes */
.ckr .pdp-form { margin-top: 1.1rem; }
.ckr .pdp-form form.cart { margin: 0; }
.ckr .pdp-form table.variations { width: 100%; margin: 0 0 .4rem; border: 0; border-collapse: collapse; background: none; }
.ckr .pdp-form table.variations tr { display: block; margin-bottom: .95rem; border: 0; background: none; }
.ckr .pdp-form table.variations th, .ckr .pdp-form table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.ckr .pdp-form table.variations th label, .ckr .pdp-form table.variations .label label { display: block; margin-bottom: .45rem; font-family: var(--ff-m); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); font-weight: 400; }
.ckr .pdp-form select.opt-src { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.ckr .pdp-form .reset_variations { display: none !important; }
.ckr .opt-tiles { display: flex; flex-wrap: wrap; gap: .45rem; }
.ckr .opt-tiles button { min-height: 2.6rem; padding: .5rem .95rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font-size: .88rem; line-height: 1.25; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.ckr .opt-tiles button:first-letter { text-transform: uppercase; }
.ckr .opt-tiles button:hover:not(:disabled) { border-color: var(--line-3); }
.ckr .opt-tiles button[aria-checked="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-wash); }
.ckr .opt-tiles button:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

.ckr .pdp-form .single_variation_wrap { margin: 0; }
.ckr .pdp-form .woocommerce-variation-price, .ckr .pdp-form .woocommerce-variation-description:empty { display: none !important; }
.ckr .pdp-form .woocommerce-variation-availability p.stock { margin: 0 0 .6rem; font-size: .82rem; }
.ckr .pdp-form .woocommerce-variation-availability p.in-stock { display: none; }
.ckr .pdp-form .woocommerce-variation-add-to-cart,
.ckr .pdp-form form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.ckr .pdp-form .woocommerce-variation-add-to-cart > *:not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]),
.ckr .pdp-form form.cart:not(.variations_form) > *:not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]) { flex-basis: 100%; }

.ckr .pdp-form .quantity { display: inline-flex; align-items: stretch; height: 3.1rem; margin: 0 !important; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; overflow: hidden; }
.ckr .pdp-form .quantity input.qty { width: 3.2rem; height: auto; min-height: 0; margin: 0; padding: 0; border: 0 !important; background: none; box-shadow: none !important; text-align: center; font-family: var(--ff-d); font-size: 1rem; color: var(--ink); -moz-appearance: textfield; }
.ckr .pdp-form .quantity input.qty::-webkit-inner-spin-button, .ckr .pdp-form .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ckr .pdp-form .quantity button, .ckr .pdp-form .quantity .ct-increase, .ckr .pdp-form .quantity .ct-decrease { display: grid; place-items: center; width: 2.6rem; border: 0; color: var(--tx-2); background: none; position: static; height: auto; }
.ckr .pdp-form .quantity button:hover { background: var(--paper-2); color: var(--ink); }
.ckr .pdp-form .quantity button .i { width: .9rem; height: .9rem; }

.ckr .pdp-form .single_add_to_cart_button,
.ckr .pdp-form .single_add_to_cart_button.button.alt {
	flex: 1 1 14rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 3.1rem; margin: 0; padding: .8rem 1.5rem; border: 1px solid var(--brand); border-radius: 8px;
	background: var(--brand); color: #fff; font-family: var(--ff-d); font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; text-transform: none;
	box-shadow: 0 1px 0 rgba(0,0,0,.08); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ckr .pdp-form .single_add_to_cart_button:hover { background: var(--brand-hi); border-color: var(--brand-hi); box-shadow: 0 4px 14px -4px rgba(0,0,0,.45); transform: translateY(-1px); }
.ckr .pdp-form .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.ckr .pdp-form .single_add_to_cart_button.is-busy { opacity: .75; }
.ckr .pdp-form .single_add_to_cart_button::before { content: ""; width: 1.05rem; height: 1.05rem; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1L21 7.5H6.4'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1L21 7.5H6.4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* notices Woo prints inside the buy box */
.ckr .pdp-form .woocommerce-notices-wrapper:empty { display: none; }
.ckr .pdp-form .woocommerce-message, .ckr .pdp-form .woocommerce-error, .ckr .pdp-form .woocommerce-info { margin: 0 0 .9rem; 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: .86rem; list-style: none; }
.ckr .pdp-form .woocommerce-message li, .ckr .pdp-form .woocommerce-error li, .ckr .pdp-form .woocommerce-info li { color: inherit; }
.ckr .pdp-form .woocommerce-message::before, .ckr .pdp-form .woocommerce-error::before, .ckr .pdp-form .woocommerce-info::before { display: none; }
.ckr .pdp-form .woocommerce-error { border-left-color: #D70015; }
.ckr .pdp-form .woocommerce-message .button { float: right; margin-left: .8rem; color: var(--brand-ink); background: none; padding: 0; border: 0; }

/* estimated delivery (Pi EDD) and "mail me when available" (child theme) */
.ckr .pdp-form .pi-edd, .ckr .pdp-form [class*="pi-edd"] { font-size: .84rem; color: var(--tx); }
/* delivery estimate (Estimate Delivery Date plugin): icon and text on one line, in the site's grey and blue.
   The plugin's colour truck image is swapped for the outline truck of our sprite (i-truck), as a mask. */
.ckr .pdp-form .pi-edd-product, .ckr .pdp-form .pi-edd.pi-edd-product { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 0 0 .2rem; padding: .75rem 1rem; border: 0; border-radius: 12px; background: var(--paper-2, #F5F5F7); color: var(--ink); text-align: left; line-height: 1.4; }
.ckr .pdp-form .pi-edd-product .pi-edd-icon { display: none; }
.ckr .pdp-form .pi-edd-product::before { content: ""; flex: none; width: 1.35rem; height: 1.35rem; background: var(--brand-ink); -webkit-mask: var(--ckr-truck) center / contain no-repeat; mask: var(--ckr-truck) center / contain no-repeat;
	--ckr-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h10.5v10H3z'/%3E%3Cpath d='M13.5 9.8h3.9L20.5 13v3.5h-7z'/%3E%3Cpath d='M7 19.6a1.85 1.85 0 1 0 0-3.7 1.85 1.85 0 0 0 0 3.7Z'/%3E%3Cpath d='M17 19.6a1.85 1.85 0 1 0 0-3.7 1.85 1.85 0 0 0 0 3.7Z'/%3E%3C/svg%3E"); }
.ckr .pdp-form .wcnotify-form-wrap { margin-top: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); }
.ckr .pdp-form .wcnotify-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.ckr .pdp-form .wcnotify-email { flex: 1 1 14rem; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.ckr .pdp-form .wcnotify-submit { min-height: 2.9rem; padding: .6rem 1.1rem; border: 0; border-radius: 8px; background: var(--steel); color: #fff; font-family: var(--ff-d); font-weight: 400; }

.ckr .pdp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.1rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.ckr .pdp-trust li { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; line-height: 1.45; color: var(--tx); }
.ckr .pdp-trust .i { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .05rem; color: var(--brand-ink); }

/* sticky buy bar */
.ckr .pdp-bar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.2); transform: translateY(110%); transition: transform var(--t-slow); }
.ckr .pdp-bar.is-on { transform: none; }
.ckr .pdp-bar-in { display: flex; align-items: center; gap: .9rem; padding-block: .6rem; }
.ckr .pdp-bar-in img { width: 3rem; height: 3rem; flex: none; border-radius: 8px; object-fit: cover; background: #F4F7F9; }
.ckr .pdp-bar-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ckr .pdp-bar-name b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; }
.ckr .pdp-bar-name > span { font-size: .85rem; color: var(--tx-2); }
.ckr .pdp-bar-name [data-price] { font-family: var(--ff-d); color: var(--ink); }
.ckr .pdp-bar .btn { flex: none; min-height: 2.75rem; }
html.ckr-has-bar .ckr .ckr-bubble { bottom: 5.5rem; }

/* ═════════════════════════════ product: highlights ═════════════════════════════ */

.ckr .pdh { background: #000; color: #A1A1A6; }
.ckr .pdh .fold { color: #A1A1A6; }
.ckr .pdh-grid { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); margin: 1rem 0 0; border-top: 1px solid #2C2C2E; }
.ckr .pdh-grid > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; padding: 1.3rem 1rem 0; border-left: 1px solid #2C2C2E; min-width: 0; }
.ckr .pdh-grid > div:first-child { border-left: 0; padding-left: 0; }
.ckr .pdh-grid dt { font-size: .78rem; line-height: 1.35; color: #A1A1A6; }
.ckr .pdh-grid dd { font-family: var(--ff-d); font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.05; letter-spacing: -.02em; color: #F5F5F7; white-space: nowrap; }
.ckr .pdh-grid dd span { margin-left: .18em; font-size: .42em; letter-spacing: 0; color: #A1A1A6; }

/* ═════════════════════════════ product: description ═════════════════════════════ */

.ckr .pdd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.ckr .pdd-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.ckr .pdd-main { min-width: 0; }
.ckr .pdd-body { margin-top: 1rem; position: relative; }
/* beside the buy card the copy fills its column — the reading measure left a gap before the card */
.ckr .pdd-grid:not(.pdd-grid--solo) .pdd-body.ckr-prose { max-width: none; }
.ckr [data-fold-body] { position: relative; }
.ckr [data-fold-body].is-folded { max-height: var(--fold, 820px); overflow: hidden; }
.ckr [data-fold-body].is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.ckr .pdd-more { margin-top: 1rem; }
.ckr .pdd-more .i { transition: transform var(--t); }
.ckr .pdd-more.is-open .i { transform: rotate(180deg); }
.ckr .pdd-rail { position: sticky; top: 6.5rem; }
.ckr .pdd-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--e1); }
.ckr .pdd-card-img { aspect-ratio: 16 / 11; border-radius: 14px; background: #F4F7F9; overflow: hidden; }
.ckr .pdd-card-img img { width: 100%; height: 100%; object-fit: contain; }
.ckr .pdd-card-name { display: block; margin-top: .85rem; font-family: var(--ff-d); font-size: 1.1rem; line-height: 1.25; color: var(--ink); }
.ckr .pdd-card-price { display: flex; align-items: baseline; gap: .4rem; margin: .35rem 0 .9rem; }
.ckr .pdd-card-list { display: grid; gap: .4rem; margin-top: .9rem; }
.ckr .pdd-card-list li { display: flex; gap: .45rem; font-size: .8rem; line-height: 1.4; }
.ckr .pdd-card-list .i { flex: none; width: 1rem; height: 1rem; color: var(--ok); }

.ckr .pdd-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border-radius: 16px; overflow: hidden; background: #000; }
.ckr .pdd-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--t), transform var(--t-slow); }
.ckr .pdd-video:hover img { opacity: 1; transform: scale(1.02); }
.ckr .pdd-play { position: absolute; top: 50%; left: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
.ckr .pdd-play .i { width: 1.5rem; height: 1.5rem; margin-left: .2rem; fill: currentColor; }

/* ═════════════════════════════ long copy (description, legal pages) ═════════════════════════════ */
/* The shop descriptions were written in the old editor with inline font sizes,
   centred headings and black text. Those inline styles are neutralised here so
   the words stay exactly as written but read in the new type. */

.ckr .ckr-prose { color: var(--tx); font-size: 1rem; line-height: 1.75; max-width: 72ch; }
.ckr .ckr-prose > * + * { margin-top: 1rem; }
.ckr .ckr-prose p { margin: 0 0 1rem !important; color: var(--tx) !important; font-size: inherit !important; line-height: inherit !important; }
.ckr .ckr-prose h1, .ckr .ckr-prose h2, .ckr .ckr-prose h3, .ckr .ckr-prose h4 { color: var(--ink) !important; text-align: left !important; font-family: var(--ff-d) !important; font-weight: 400 !important; }
.ckr .ckr-prose h1, .ckr .ckr-prose h2 { margin: 2.2rem 0 .8rem !important; font-size: clamp(1.35rem, 2vw, 1.7rem) !important; line-height: 1.2 !important; letter-spacing: -.012em; }
.ckr .ckr-prose h3 { margin: 1.7rem 0 .6rem !important; font-size: 1.15rem !important; line-height: 1.3 !important; }
.ckr .ckr-prose h4 { margin: 1.4rem 0 .5rem !important; font-size: 1rem !important; }
.ckr .ckr-prose > :first-child, .ckr .ckr-prose .wpb_wrapper > :first-child, .ckr .ckr-prose .vc_row:first-child h2:first-child { margin-top: 0 !important; }
.ckr .ckr-prose strong, .ckr .ckr-prose b { color: var(--ink); font-weight: 400; }
.ckr .ckr-prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.ckr .ckr-prose ul, .ckr .ckr-prose ol { margin: 0 0 1.1rem; padding: 0; }
.ckr .ckr-prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; }
.ckr .ckr-prose ul li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--brand); }
.ckr .ckr-prose ol { counter-reset: ck; }
.ckr .ckr-prose ol li { position: relative; padding-left: 2rem; margin-bottom: .45rem; counter-increment: ck; }
.ckr .ckr-prose ol li::before { content: counter(ck); position: absolute; left: 0; top: .15em; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 6px; background: var(--paper-2); font-family: var(--ff-m); font-size: .72rem; color: var(--ink); }
.ckr .ckr-prose hr { height: 1px; margin: 2rem 0 !important; border: 0; background: var(--line); }
.ckr .ckr-prose img { height: auto; border-radius: 14px; }
.ckr .ckr-prose table { width: 100%; margin: 0 0 1.2rem; font-size: .9rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.ckr .ckr-prose th, .ckr .ckr-prose td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ckr .ckr-prose tr:last-child td { border-bottom: 0; }
.ckr .ckr-prose th { background: var(--paper-2); color: var(--ink); font-weight: 400; }
.ckr .ckr-prose [style*="max-width"] { max-width: 100% !important; }
.ckr .ckr-prose [style*="box-shadow"] { box-shadow: none !important; }
.ckr .ckr-prose .vc_row, .ckr .ckr-prose .wpb_column, .ckr .ckr-prose .vc_column-inner, .ckr .ckr-prose .wpb_wrapper { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
.ckr .ckr-prose .wpb_content_element, .ckr .ckr-prose .wpb_raw_code { margin-bottom: 0 !important; }
.ckr .ckr-prose .ck-certificate-text h2 { margin-top: 0 !important; }

/* ═════════════════════════════ product: spec sheet ═════════════════════════════ */

.ckr .pds-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.ckr .pds-head { position: sticky; top: 6.5rem; }
.ckr .pds-head .head { margin: 0; }
.ckr .pds-sheet { border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.ckr .pds-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ckr .pds-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: .8rem; padding: .78rem 1.1rem; border-bottom: 1px solid var(--mist); font-size: .86rem; line-height: 1.4; }
.ckr .pds-list > div:nth-child(odd) { border-right: 1px solid var(--mist); }
/* rows past the first twelve wait behind "Toon alle"; display:grid above would otherwise show them anyway */
.ckr .pds-list > div[hidden] { display: none; }
.ckr .pds-list dt { color: var(--tx-2); font-weight: 400; }
.ckr .pds-list dd { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ckr .pds-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: .4rem; padding: .95rem; margin-top: -1px; border-top: 1px solid var(--mist); color: var(--brand-ink); font-size: .9rem; background: #fff; }
.ckr .pds-more:hover { background: var(--paper-2); }

/* ═════════════════════════════ product: related ═════════════════════════════ */

.ckr .pdr .head--bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ckr .pdr-all { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-ink); font-size: .92rem; white-space: nowrap; }
.ckr .pdr-all .i { width: 1rem; height: 1rem; }
.ckr .pdr-all:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ═════════════════════════════ lightbox ═════════════════════════════ */

.ckr-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 3.5rem 4rem; background: rgba(0,0,0,.92); }
.ckr-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #F4F7F9; }
.ckr-lightbox .lb-x, .ckr-lightbox .lb-nav { position: absolute; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; }
.ckr-lightbox .lb-x:hover, .ckr-lightbox .lb-nav:hover { background: rgba(255,255,255,.26); }
.ckr-lightbox .lb-x { top: 1rem; right: 1rem; }
.ckr-lightbox .lb-nav { top: 50%; margin-top: -1.45rem; }
.ckr-lightbox .lb-prev { left: 1rem; } .ckr-lightbox .lb-prev .i { transform: rotate(90deg); }
.ckr-lightbox .lb-next { right: 1rem; } .ckr-lightbox .lb-next .i { transform: rotate(-90deg); }
.ckr-lightbox .i { width: 1.3rem; height: 1.3rem; }

/* ═════════════════════════════ responsive ═════════════════════════════ */

@media (max-width: 1080px) {
	.ckr .pdh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ckr .pdh-grid > div:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
	.ckr .pdh-grid > div:nth-child(n + 4) { border-top: 1px solid #2C2C2E; margin-top: 1.3rem; }
	.ckr .pdh-grid > div { padding-bottom: 0; }
	.ckr .pds-list { grid-template-columns: minmax(0, 1fr); }
	.ckr .pds-list > div:nth-child(odd) { border-right: 0; }
}

@media (max-width: 940px) {
	.ckr .pdp-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .pdp-gallery { position: static; max-width: 40rem; width: 100%; margin-inline: auto; }
	.ckr .pdd-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .pdd-rail { display: none; }
	.ckr .pds-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .pds-head { position: static; }
	.ckr .pdp-nav { opacity: 1; }
}

@media (max-width: 660px) {
	.ckr .crumbs { justify-content: center; font-size: .74rem; }
	.ckr .pdp-stage { border-radius: 16px; }
	.ckr .pdp-thumbs button { flex-basis: 3.8rem; border-radius: 10px; }
	.ckr .pdp-top { justify-content: center; }
	.ckr .pdp-title { text-align: center; font-size: 1.2rem; }
	.ckr .pdp-lead { text-align: center; margin-inline: auto; font-size: .95rem; }
	.ckr .pdp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.ckr .pdp-keys > div { align-items: center; text-align: center; }
	.ckr .pdp-pricebox { justify-content: center; flex-direction: column; }
	.ckr .pdp-form table.variations th label { text-align: center; }
	.ckr .opt-tiles { justify-content: center; }
	.ckr .pdp-trust { grid-template-columns: minmax(0, 1fr); width: fit-content; margin-inline: auto; }
	.ckr .pdp-bar-in img { display: none; }
	.ckr .pdp-bar .btn { padding-inline: .9rem; }
	.ckr .pdh .fold { text-align: center; }
	.ckr .pdh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ckr .pdh-grid > div { align-items: center; text-align: center; padding: 1.1rem .5rem 0 !important; margin-top: 0 !important; border-top: 0 !important; border-left: 0 !important; }
	.ckr .pdh-grid > div:nth-child(even) { border-left: 1px solid #2C2C2E !important; }
	.ckr .pdh-grid > div:nth-child(n + 3) { border-top: 1px solid #2C2C2E !important; margin-top: 1.1rem !important; }
	.ckr .pdd-main > .fold { text-align: center; }
	.ckr .pdd-more { display: flex; margin-inline: auto; }
	.ckr .pds-head { text-align: center; }
	.ckr .pds-list > div { padding: .7rem .9rem; font-size: .82rem; }
	.ckr .pdr .head--bar { flex-direction: column; align-items: center; }
	.ckr-lightbox { padding: 3.5rem .5rem; }
	.ckr-lightbox .lb-nav { top: auto; bottom: 1rem; margin: 0; }
}

/* Blocksy's own − / + spans come before the field in the markup */
.ckr .pdp-form .quantity .ct-decrease { order: 0; }
.ckr .pdp-form .quantity input.qty { order: 1; }
.ckr .pdp-form .quantity .ct-increase { order: 2; }
.ckr .pdp-form .quantity .ct-increase, .ckr .pdp-form .quantity .ct-decrease { position: relative !important; inset: auto !important; cursor: pointer; }
.ckr .pdp-form .quantity .ct-increase:hover, .ckr .pdp-form .quantity .ct-decrease:hover { background: var(--paper-2); color: var(--ink); }

.ckr .pdp-notify-lead { margin: 0 0 .6rem; font-size: .9rem; color: var(--tx); }
.ckr .pdp-form .wcnotify-form-wrap:first-child, .ckr .pdp-notify-lead + .wcnotify-form-wrap { margin-top: 0; }
.ckr .pdp-form .wcnotify-msg { margin: 0 0 .5rem; font-size: .86rem; color: var(--ok); }
@media (max-width: 660px) { .ckr .pdp-notify-lead { text-align: center; } }

/* the button before the variation's long "what is in the box" text */
.ckr .pdp-form .single_variation_wrap { display: flex; flex-direction: column; }
.ckr .pdp-form .woocommerce-variation-add-to-cart { order: -1; }
.ckr .pdp-form .woocommerce-variation.single_variation:not(:empty) { margin-top: .9rem; }
.ckr .pdp-form .woocommerce-variation-description { position: relative; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); font-size: .84rem; line-height: 1.55; color: var(--tx); }
.ckr .pdp-form .woocommerce-variation-description p { margin: 0 0 .5rem; }
.ckr .pdp-form .woocommerce-variation-description p:last-child { margin-bottom: 0; }
.ckr .pdp-form .woocommerce-variation-description.is-clamped { max-height: 9.5rem; overflow: hidden; padding-bottom: 2.6rem; }
.ckr .pdp-form .woocommerce-variation-description.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; background: linear-gradient(rgba(245,245,247,0), var(--paper-2) 70%); pointer-events: none; }
.ckr .pdp-form .vd-more { position: absolute; z-index: 1; left: 1rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .3rem; color: var(--brand-ink); font-size: .84rem; }
.ckr .pdp-form .vd-more .i { width: .9rem; height: .9rem; transition: transform var(--t); }
.ckr .pdp-form .woocommerce-variation-description:not(.is-clamped) .vd-more { position: static; margin-top: .5rem; }
.ckr .pdp-form .woocommerce-variation-description:not(.is-clamped) .vd-more .i { transform: rotate(180deg); }

@media (max-width: 660px) {
	.ckr .pdp-keys > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ckr .pdp-form .vd-more { left: 50%; transform: translateX(-50%); }
	/* open: the button is back in the flow, so center it there instead of shifting it */
	.ckr .pdp-form .woocommerce-variation-description:not(.is-clamped) .vd-more { display: flex; width: max-content; margin-inline: auto; transform: none; }
}

/* rule 22: every button-like control ≤ 8px */
.ckr .pdp-thumbs button { border-radius: 8px; }

/* ═════════════════════════════ category / search ═════════════════════════════ */

.ckr .arh { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(2rem, 3.6vw, 3rem); border-top: 0; }
.ckr .arh-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ckr .arh-grid--solo { grid-template-columns: minmax(0, 1fr); }
.ckr .arh-title { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; }
.ckr .arh-lead { margin-top: 1rem; max-width: 62ch; font-size: 1.02rem; line-height: 1.65; color: var(--tx); }
.ckr .arh-cats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.ckr .arh-cats a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .45rem .9rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font-size: .86rem; transition: border-color var(--t-fast), background var(--t-fast); }
.ckr .arh-cats a:hover { border-color: var(--line-3); }
.ckr .arh-cats a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ckr .arh-media { aspect-ratio: 4 / 3; border-radius: 22px; background: #F4F7F9; overflow: hidden; border: 1px solid var(--line); }
.ckr .arh-media img { width: 100%; height: 100%; object-fit: cover; }

.ckr .arp { padding-top: clamp(2rem, 3.4vw, 3rem); }
.ckr .arp-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 30rem; margin: 0 auto; padding: 2.5rem 1.5rem; border: 1px dashed var(--line-2); border-radius: 22px; text-align: center; }
.ckr .arp-empty .i { color: var(--tx-2); }
.ckr .arp-empty b { font-family: var(--ff-d); font-size: 1.2rem; }
.ckr .arp-empty .btn { margin-top: .4rem; }


/* ── parent category ("hoofd"): an overview, laid out like apple.com ──────────
   white head with the title centred, then
   big black tiles — the category photos are shot on pure black, so the photo
   and the tile are one surface and only the words sit on top */
.ckr .arh--hub { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(1.5rem, 3vw, 2.5rem); background: #fff; }
.ckr .arh--hub .crumbs { justify-content: center; }
.ckr .arh--hub .arh-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ckr .arh--hub .arh-title { max-width: 24ch; margin-top: clamp(.75rem, 1.6vw, 1.25rem); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; }
.ckr .arh--hub .arh-lead { max-width: 64ch; margin-top: .8rem; font-size: .95rem; line-height: 1.6; color: var(--tx-2); }
.ckr .arh--hub .arh-lead.clamp-desk:not(.is-open), .ckr .arh--hub .arh-lead.clamp-all:not(.is-open) { -webkit-line-clamp: 2; }
.ckr .arh--hub .more-btn { align-self: center; }
.ckr .arh--hub .crumbs [aria-current] { color: var(--ink); }
/* category switcher: one row of Apple pills, the open category in black */
.ckr .arh--hub .arh-cats { justify-content: center; gap: .4rem; margin-top: 1.4rem; }
.ckr .arh--hub .arh-cats a { min-height: 2.2rem; padding: .4rem 1rem; border: 0; border-radius: 8px; background: var(--paper-2, #F5F5F7); font-size: .84rem; }
.ckr .arh--hub .arh-cats a:hover { background: #E8E8ED; }
.ckr .arh--hub .arh-cats a[aria-current] { background: #1D1D1F; color: #fff; }

/* the products of a category as an Apple line-up: the row is only as wide as the
   models, everything centred, price and button before the specs */
.ckr .pgrid--line { justify-content: center; }
@media (min-width: 661px) {
	.ckr .pgrid--line > .pc { flex: 0 1 calc((100% - (var(--fit, 4) - 1) * var(--g)) / var(--fit, 4)); max-width: 24rem; border-radius: 8px; text-align: center; }
	/* one photo height for the whole row, not a 4:3 box: a wide split unit no longer sits in a tall empty frame */
	.ckr .pgrid--line .pc-media { aspect-ratio: auto; height: clamp(9.5rem, 13vw, 12rem); }
	/* the photos arrive trimmed to the product (ckr_archive_trim_url) and are fitted to one frame under the badges */
	.ckr .pgrid--line .pc-media img { inset: auto; top: 2.4rem; left: 1.5rem; width: calc(100% - 3rem); max-width: none; height: calc(100% - 3rem); padding: 0; aspect-ratio: auto; translate: none; object-fit: contain; }
	.ckr .pgrid--line .pc-badges { right: auto; }
	.ckr .pgrid--line .pc-code { display: none; }
	.ckr .pgrid--line .pc-body { padding: .6rem 1.5rem 0; }
	.ckr .pgrid--line .pc-name { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: -.015em; }
	.ckr .pgrid--line .pc-name a { color: inherit; }
	.ckr .pgrid--line .pc-sub { max-width: 30ch; margin-inline: auto; margin-top: .45rem; font-size: .88rem; min-height: 2.9em; }
	.ckr .pgrid--line .pc-foot { order: 2; margin-top: 0; padding: 1rem 1.5rem 1.25rem; align-items: center; gap: .85rem; }
	.ckr .pgrid--line .pc-foot > div:first-child { justify-content: center; }
	.ckr .pgrid--line .pc-foot .price { font-size: 1.05rem; }
	.ckr .pgrid--line .pc-foot .btn { width: auto; min-height: 2.35rem; padding: .5rem 1.3rem; border-radius: 8px; }
	.ckr .pgrid--line .pc-specs { order: 3; margin: auto 1.5rem 1.4rem; border-top: 1px solid rgba(0,0,0,.08); }
	.ckr .pgrid--line .pc-specs > div { align-items: center; padding: .75rem 0; }
	.ckr .pgrid--line .pc-specs > div:nth-child(odd) { padding-right: 0; }
	.ckr .pgrid--line .pc-specs dt { order: 2; font-family: inherit; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--tx-2); }
	.ckr .pgrid--line .pc-specs dd { order: 1; text-align: center; font-size: 1.05rem; font-weight: 400; color: var(--ink); }
	.ckr .pgrid--line .pc:hover { transform: none; box-shadow: none; }

	/* a category with one product: one wide card, the photo large on the left and
	   everything about it on the right, instead of a lone narrow card in white space */
	.ckr .pgrid--solo > .pc { display: grid; flex: 0 1 100%; max-width: 66rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "media ." "media body" "media foot" "media specs"; column-gap: clamp(1rem, 3vw, 3rem); text-align: left; }
	.ckr .pgrid--solo .pc-media { grid-area: media; aspect-ratio: auto; min-height: clamp(22rem, 34vw, 30rem); }
	.ckr .pgrid--solo .pc-media img { top: 14%; left: 10%; width: 80%; height: 74%; }
	.ckr .pgrid--solo .pc-body { grid-area: body; padding: 0 clamp(1.5rem, 3vw, 3rem) 0 0; }
	.ckr .pgrid--solo .pc-name { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
	.ckr .pgrid--solo .pc-sub { max-width: 40ch; margin-inline: 0; min-height: 0; font-size: .98rem; -webkit-line-clamp: 3; }
	.ckr .pgrid--solo .pc-foot { grid-area: foot; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1.25rem; padding: 1.25rem clamp(1.5rem, 3vw, 3rem) 1.25rem 0; }
	.ckr .pgrid--solo .pc-foot > div:first-child { justify-content: flex-start; }
	.ckr .pgrid--solo .pc-foot .price { font-size: 1.35rem; }
	.ckr .pgrid--solo .pc-specs { grid-area: specs; align-self: start; margin: 0 clamp(1.5rem, 3vw, 3rem) 2.5rem 0; }
	.ckr .pgrid--solo .pc-specs > div { align-items: flex-start; }
	.ckr .pgrid--solo .pc-specs dd { text-align: left; font-size: 1.2rem; }
}
@media (max-width: 660px) {
	/* one product on a phone: the full-width card with its description, all specs and a real button */
	/* ckr-wp.css forces two cards per row on phones with !important */
	.ckr .pgrid.pgrid--solo > .pc { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; border-radius: 8px; text-align: center; }
	.ckr .pgrid--solo .pc-media { aspect-ratio: 4 / 3; }
	.ckr .pgrid--solo .pc-media img { position: absolute; top: 16%; left: 10%; width: 80%; height: 74%; padding: 0; object-fit: contain; }
	.ckr .pgrid--solo .pc-body { padding: .4rem 1.25rem 0; }
	.ckr .pgrid--solo .pc-name { font-size: 1.4rem; }
	.ckr .pgrid--solo .pc-sub { display: -webkit-box; margin-top: .35rem; font-size: .88rem; }
	.ckr .pgrid--solo .pc-foot { order: 2; flex-direction: column; gap: .7rem; padding: 1rem 1.25rem; }
	.ckr .pgrid--solo .pc-foot > div:first-child { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
	.ckr .pgrid--solo .pc-foot .price { font-size: 1.25rem; }
	.ckr .pgrid--solo .pc-foot .price-note { order: -1; font-size: .72rem; }
	.ckr .pgrid--solo .pc-foot .btn--brand { width: auto; height: auto; min-height: 2.6rem; margin: 0; padding: .55rem 1.4rem; border-radius: 8px; font-size: .9rem; gap: .4rem; }
	.ckr .pgrid--solo .pc-specs { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 1.25rem 1.25rem; border-top: 1px solid rgba(0,0,0,.08); }
	.ckr .pgrid.pgrid--solo .pc-specs > div, .ckr .pgrid.pgrid--solo .pc-specs > div:nth-child(n+2) { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
	.ckr .pgrid--solo .pc-specs > div:nth-child(n+5) { display: none; }
	.ckr .pgrid--solo .pc-specs dt { order: 2; font-family: inherit; font-size: .7rem; letter-spacing: 0; text-transform: none; }
	.ckr .pgrid--solo .pc-specs dd { order: 1; font-size: 1rem; font-weight: 400; text-align: center; }
}
@media (min-width: 661px) and (max-width: 940px) {
	.ckr .pgrid.pgrid--solo > .pc { flex: 0 1 100% !important; width: 100% !important; max-width: 34rem !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "media" "body" "foot" "specs"; text-align: center; }
	.ckr .pgrid--solo .pc-media { min-height: 0; aspect-ratio: 4 / 3; }
	.ckr .pgrid--solo .pc-body, .ckr .pgrid--solo .pc-foot { padding-inline: 1.5rem; }
	.ckr .pgrid--solo .pc-sub { margin-inline: auto; }
	.ckr .pgrid--solo .pc-foot, .ckr .pgrid--solo .pc-foot > div:first-child { justify-content: center; }
	.ckr .pgrid--solo .pc-specs { margin-inline: 1.5rem; }
	.ckr .pgrid--solo .pc-specs > div { align-items: center; }
	.ckr .pgrid--solo .pc-specs dd { text-align: center; }
}


.ckr .arp:has(.arc-grid) { padding-top: 0; }
.ckr .arc-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(.6rem, 1vw, .9rem); }
.ckr .arc { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #000; color: #F5F5F7; overflow: hidden; isolation: isolate; }
.ckr .arc-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ckr .arc-cover:focus-visible { outline: 2px solid #2997FF; outline-offset: -4px; }
.ckr .arc-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(1.75rem, 2.6vw, 2.5rem) 1rem 0; text-align: center; pointer-events: none; }
.ckr .arc-badge { margin-bottom: .4rem; font-size: .7rem; letter-spacing: .01em; color: #FF9F0A; }
/* #assortiment h2 (ckr.css) sizes the homepage section title; these h2s are tile names */
.ckr .arc-name, .ckr #assortiment .arc-name { max-width: none; margin: 0; font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.15; letter-spacing: -.02em; color: #F5F5F7; }
.ckr .arc-sub { margin: .4rem 0 0; font-size: .82rem; line-height: 1.35; color: #F5F5F7; }
.ckr .arc-price { margin: .3rem 0 0; font-size: .74rem; color: #A1A1A6; }
.ckr .arc-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55rem 1rem; margin-top: 1rem; pointer-events: auto; }
.ckr .arc-btn { display: inline-flex; align-items: center; min-height: 2rem; padding: .4rem .95rem; border-radius: 8px; background: #0071E3; color: #fff; font-size: .8rem; text-decoration: none; transition: background var(--t-fast); }
.ckr .arc-btn:hover { background: #0077ED; }
.ckr .arc-link { display: inline-flex; align-items: center; gap: .15rem; color: #2997FF; font-size: .8rem; text-decoration: none; }
.ckr .arc-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ckr .arc-link .i { width: .95rem; height: .95rem; transform: rotate(-90deg); }
.ckr .arc-btn:focus-visible, .ckr .arc-link:focus-visible { outline: 2px solid #2997FF; outline-offset: 3px; }
/* the photos arrive trimmed to the product (ckr_archive_trimmed_image): each one is
   fitted into the same frame, so a tall mobile airco and a wide split unit end up the same visual weight */
.ckr .arc-media { position: relative; aspect-ratio: 4 / 3; }
.ckr .arc-media img { position: absolute; inset: 12% 18% 20%; width: 64%; height: 68%; object-fit: contain; object-position: center; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.ckr .arc:hover .arc-media img { scale: 1.04; }
@media (max-width: 1080px) {
	.ckr .arc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
	.ckr .arh--hub .arh-title { font-size: 1.65rem; }
	.ckr .arh--hub .arh-lead { font-size: .9rem; }
	.ckr .arc-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.ckr .arc { border-radius: 22px; }
	.ckr .arc-name, .ckr #assortiment .arc-name { font-size: 1.5rem; }
	.ckr .arc-badge[aria-hidden] { display: none; }
	.ckr .arc:hover .arc-media img { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ckr .arc-media img { transition: none; }
}

/* intro under the H1: four lines on desktop too, the rest behind "Lees meer" */
@media (min-width: 661px) {
	.ckr .arh-lead.clamp-desk:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	.ckr .arh-copy .more-btn { display: inline-flex; align-items: center; gap: .25rem; margin-top: .45rem; padding: 0; font-size: .92rem; color: var(--brand-ink); }
	.ckr .arh-copy .more-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* SEO copy under the products: title on the left, a short opening on the right,
   the rest folded behind one quiet "Lees meer" link */
.ckr .art-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ckr .art-head { position: sticky; top: 7rem; }
.ckr .art-title { margin-top: .6rem; font-family: var(--ff-d); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.ckr .art-body { max-width: 68ch; font-size: 1.02rem; }
.ckr .art-body.is-folded::after { height: 6.5rem; background: linear-gradient(rgba(255,255,255,0), #fff 90%); }
.ckr .art-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; padding: .35rem 0; border: 0; background: none; color: var(--brand-ink); font-size: 1rem; cursor: pointer; }
.ckr .art-more:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ckr .art-more .i { width: 1rem; height: 1rem; transition: transform var(--t); }
.ckr .art-more.is-open .i { transform: rotate(180deg); }

@media (max-width: 940px) {
	.ckr .arh-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .arh-media { max-width: 30rem; width: 100%; margin-inline: auto; order: -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 660px) {
	.ckr .arh-copy { text-align: center; }
	.ckr .arh-title { margin-inline: auto; font-size: 1.8rem; }
	.ckr .arh-lead { margin-inline: auto; }
	.ckr .arh-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-snap-type: x proximity; }
	.ckr .arh-cats::-webkit-scrollbar { display: none; }
	.ckr .arh-cats, .ckr .arh--hub .arh-cats { align-self: stretch; justify-content: flex-start; scroll-padding-inline: var(--pad); }
	.ckr .arh-cats a { flex: none; scroll-snap-align: start; }
	/* the one spec on a phone card: label above value, both left, so long values don't wrap ragged-right */
	.ckr .arp .pc-specs > div { flex-direction: column; align-items: flex-start; gap: .05rem; }
	.ckr .arp .pc-specs dd { text-align: left; }
	.ckr .art-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
	.ckr .art-head { position: static; text-align: center; }
	.ckr .art-title { font-size: 1.6rem; }
	.ckr .art-more { display: flex; margin-inline: auto; }
}

/* ═════════════════════════════ content pages ═════════════════════════════ */

/* dark bands for our own sections: the tokens flip, so prose and tiles follow */
.ckr .ckr-dark { --ink: #F5F5F7; --tx: #C7C7CC; --tx-2: #A1A1A6; --line: #3A3A3C; --mist: #2C2C2E; --brand-ink: #2997FF; background: var(--paper); color: var(--tx); border-block: 0; }
.ckr .ckr-dark .fold { color: #A1A1A6; }

/* page hero */
.ckr .pgh { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(2.5rem, 4.4vw, 4rem); border-top: 0; }
.ckr .pgh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4.5rem); align-items: center; }
.ckr .pgh-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
.ckr .pgh-copy .fold + .pgh-title { margin-top: .75rem; }
.ckr .pgh-title { font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.04; letter-spacing: -.022em; max-width: 16ch; }
.ckr .pgh-lead { margin-top: 1.1rem; max-width: 58ch; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.7; color: var(--tx); }
.ckr .pgh-body { margin-top: 1rem; }
.ckr .pgh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; margin-top: 1.6rem; max-width: 34rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.ckr .pgh-stats > div { display: flex; flex-direction: column-reverse; gap: .15rem; padding: .85rem 1rem; background: #fff; }
.ckr .pgh-stats dt { font-family: var(--ff-m); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); }
.ckr .pgh-stats dd { font-family: var(--ff-d); font-size: 1.55rem; line-height: 1.1; color: var(--ink); }
.ckr .pgh-media { display: grid; gap: .8rem; }
.ckr .pgh-media figure { margin: 0; border-radius: 22px; overflow: hidden; background: #F4F7F9; }
.ckr .pgh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ckr .pgh-media--1 figure { aspect-ratio: 4 / 3; }
.ckr .pgh-media--2 { grid-template-columns: 1.35fr 1fr; align-items: end; }
.ckr .pgh-media--2 figure:first-child { aspect-ratio: 4 / 5; }
.ckr .pgh-media--2 figure:last-child { aspect-ratio: 3 / 4; margin-bottom: 12%; }

/* content section */
.ckr .cnt-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.ckr .cnt--split .cnt-head { position: sticky; top: 6.5rem; }
.ckr .cnt--stack .cnt-grid, .ckr .cnt--center .cnt-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 60rem; }
.ckr .cnt--center .cnt-grid { text-align: center; margin-inline: auto; }
.ckr .cnt--center .ckr-prose { margin-inline: auto; }
.ckr .cnt-head h2 { margin-top: .6rem; }
.ckr .cnt-head .fold + h2 { margin-top: .75rem; }
.ckr .cnt-head h2:first-child { margin-top: 0; }
.ckr .cnt-body p:last-child { margin-bottom: 0 !important; }
.ckr .cnt-tiles { display: grid; grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); gap: .75rem; margin: 1.6rem 0 0; }
.ckr .cnt-tiles > div { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ckr .ckr-dark .cnt-tiles > div { background: rgba(255,255,255,.04); }
.ckr .band-soft .cnt-tiles > div, .ckr .band-mist .cnt-tiles > div { background: #fff; }
.ckr .cnt-ic { width: 1.3rem; height: 1.3rem; margin-bottom: .45rem; color: var(--brand-ink); }
.ckr .cnt-tiles dd { order: 1; font-family: var(--ff-d); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.1; color: var(--ink); }
.ckr .cnt-tiles dt { order: 2; font-size: .84rem; line-height: 1.4; color: var(--tx-2); }
.ckr .cnt-cta { margin-top: 1.6rem; }
.ckr .cnt--center .cnt-cta { display: flex; justify-content: center; }

/* line cards */
.ckr .lcs-grid { display: grid; grid-template-columns: repeat(min(var(--n, 4), 4), minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.ckr .lc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.ckr .lc-img { aspect-ratio: 16 / 11; margin: .6rem .6rem 0; border-radius: 16px; background: #F4F7F9; overflow: hidden; }
.ckr .lc-img img { width: 100%; height: 100%; object-fit: contain; }
.ckr .lc-body { display: flex; flex-direction: column; flex: 1; padding: 1.05rem 1.2rem 1.25rem; }
.ckr .lc h3 { font-size: 1.2rem; }
.ckr .lc p { margin-top: .55rem; font-size: .9rem; line-height: 1.6; color: var(--tx); }
.ckr .lc-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .9rem; color: var(--brand-ink); font-size: .92rem; }
.ckr .lc-link .i { width: 1rem; height: 1rem; transition: transform var(--t-fast); }
.ckr .lc-link:hover .i { transform: translateX(3px); }
.ckr .lc--dark { background: #000; border-color: #000; }
.ckr .lc--dark h3 { color: #F5F5F7; }
.ckr .lc--dark p { color: #C7C7CC; }
.ckr .lc--dark .lc-link { color: #2997FF; }
.ckr .lcs-after { margin-top: clamp(1.5rem, 3vw, 2.2rem); max-width: none; }

/* legal text with a table of contents */
.ckr .txt-grid { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ckr .txt-rail { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); overflow: auto; }
.ckr .txt-toc ol { margin: .8rem 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.ckr .txt-toc li a { display: block; padding: .38rem 0 .38rem .9rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .84rem; line-height: 1.4; color: var(--tx-2); }
.ckr .txt-toc li a:hover { color: var(--ink); }
.ckr .txt-toc li a[aria-current] { color: var(--brand-ink); border-left-color: var(--brand); }
.ckr .txt-body { max-width: 72ch; }
.ckr .txt-body h2, .ckr .txt-body h3 { scroll-margin-top: 7rem; }
.ckr .txt-updated { margin-top: 2rem !important; font-family: var(--ff-m); font-size: .74rem !important; color: var(--tx-2) !important; }

@media (max-width: 1080px) {
	.ckr .lcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
	.ckr .pgh-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .pgh-media { max-width: 36rem; width: 100%; margin-inline: auto; }
	.ckr .cnt-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ckr .cnt--split .cnt-head { position: static; }
	.ckr .txt-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .txt-rail { display: none; }
}
@media (max-width: 660px) {
	.ckr .pgh-copy { text-align: center; }
	.ckr .pgh-title { margin-inline: auto; font-size: 2rem; }
	.ckr .pgh-lead { margin-inline: auto; }
	.ckr .pgh-stats { margin-inline: auto; }
	.ckr .pgh-stats > div { align-items: center; }
	.ckr .cnt-head { text-align: center; }
	.ckr .cnt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ckr .cnt-tiles > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ckr .cnt-tiles > div { align-items: center; text-align: center; padding: .95rem .8rem; }
	.ckr .cnt-cta { display: flex; justify-content: center; }
	.ckr .lcs .head { text-align: center; }
	.ckr .lcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.ckr .lc { border-radius: 16px; }
	.ckr .lc-img { margin: .4rem .4rem 0; border-radius: 12px; }
	.ckr .lc-body { padding: .75rem .8rem .9rem; }
	.ckr .lc h3 { font-size: 1rem; }
	.ckr .lc p { font-size: .82rem; }
}

/* the shop's short description in the buy box: badges, the pallet note, what is in the box */
.ckr .pdp-short-wrap { margin-top: .9rem; }
.ckr .pdp-short { max-width: none; font-size: .92rem; line-height: 1.6; }
.ckr .pdp-short p { margin: 0 0 .55rem !important; }
.ckr .pdp-short p:last-child { margin-bottom: 0 !important; }
.ckr .pdp-short img { display: inline-block; vertical-align: middle; width: auto; max-height: 52px; margin: 0 .9rem .3rem 0; border-radius: 0; }
.ckr .pdp-short.is-folded::after { height: 3.5rem; }
.ckr .pdp-short-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; color: var(--brand-ink); font-size: .86rem; }
.ckr .pdp-short-more .i { width: .9rem; height: .9rem; transition: transform var(--t); }
.ckr .pdp-short-more.is-open .i { transform: rotate(180deg); }
@media (max-width: 660px) { .ckr .pdp-short-wrap { text-align: center; } .ckr .pdp-short img { margin-inline: .45rem; } }

/* long section copy folds on a phone (design rule 15) */
.ckr .ckr-dark [data-fold-body].is-folded::after { background: linear-gradient(rgba(0,0,0,0), var(--paper) 85%); }
.ckr .band-soft [data-fold-body].is-folded::after, .ckr .band-mist [data-fold-body].is-folded::after { background: linear-gradient(rgba(245,245,247,0), var(--paper-2) 85%); }
.ckr .cnt-more { margin-top: .6rem; }
@media (max-width: 660px) { .ckr .cnt-more { display: flex; margin-inline: auto; } .ckr .cnt-more[hidden] { display: none; } }
@media (max-width: 660px) {
	/* phones: section copy centred, like the homepage (design system §6) */
	.ckr .cnt-body, .ckr .lcs-after { text-align: center; }
	.ckr .cnt-body ul, .ckr .cnt-body ol { display: inline-block; text-align: left; }
}

/* ═════════════════════════════ header + footer on every page ═════════════════════════════ */
body.ckr-global-header > #header,
body.ckr-global-header .ct-header { display: none !important; }
body.ckr-global-footer > footer[data-id],
body.ckr-global-footer .ct-footer { display: none !important; }

/* ═════════════════════════════ contact ═════════════════════════════ */

.ckr .ctc-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.ckr .ctc-form { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--e1); }
.ckr .ctc-form-title { margin-bottom: 1.2rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.ckr .ctc-info { display: grid; gap: .8rem; }
.ckr .ctc-card { display: flex; gap: .9rem; padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.ckr .ctc-ic { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: #fff; color: var(--brand-ink); border: 1px solid var(--line); }
.ckr .ctc-ic .i { width: 1.15rem; height: 1.15rem; }
.ckr .ctc-card h3 { font-size: 1rem; margin-bottom: .35rem; }
.ckr .ctc-card p { font-size: .9rem; line-height: 1.6; color: var(--tx); }
.ckr .ctc-note { display: flex; gap: .4rem; align-items: flex-start; margin-top: .6rem !important; padding: .5rem .65rem; border-radius: 8px; background: #fff; font-size: .82rem !important; color: var(--tx-2) !important; }
.ckr .ctc-note .i { flex: none; width: .95rem; height: .95rem; margin-top: .2rem; color: var(--tx-2); }
.ckr .ctc-hours { display: grid; gap: .1rem; margin: 0; min-width: 14rem; }
.ckr .ctc-hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.ckr .ctc-hours > div:last-child { border-bottom: 0; }
.ckr .ctc-hours dt { color: var(--tx); font-weight: 400; }
.ckr .ctc-hours dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.ckr .ctc-hours .is-closed dd { color: var(--tx-2); }
.ckr .ctc-map { margin-top: clamp(1.25rem, 3vw, 2.5rem); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 21 / 7; }
.ckr .ctc-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* WPForms in our clothes */
.ckr .ctc-form .wpforms-container { margin: 0 !important; }
.ckr .ctc-form .wpforms-field { padding: 0 0 1rem !important; }
.ckr .ctc-form .wpforms-field-label { margin: 0 0 .4rem !important; font-family: var(--ff-m) !important; font-size: .7rem !important; font-weight: 400 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2) !important; }
.ckr .ctc-form .wpforms-required-label { color: var(--accent-press) !important; }
.ckr .ctc-form input[type="text"], .ckr .ctc-form input[type="email"], .ckr .ctc-form input[type="tel"], .ckr .ctc-form input[type="number"], .ckr .ctc-form input[type="url"], .ckr .ctc-form select, .ckr .ctc-form textarea {
	width: 100% !important; max-width: 100% !important; min-height: 2.9rem; padding: .65rem .85rem !important; border: 1px solid var(--line-2) !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important;
	font-family: var(--ff-b) !important; font-size: .95rem !important; color: var(--ink) !important; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ckr .ctc-form textarea { min-height: 9rem; }
.ckr .ctc-form input:focus, .ckr .ctc-form select:focus, .ckr .ctc-form textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(0,113,227,.18) !important; }
.ckr .ctc-form .wpforms-field-sublabel { font-size: .74rem !important; color: var(--tx-2) !important; }
.ckr .ctc-form .wpforms-field-row { max-width: none !important; }
.ckr .ctc-form .wpforms-submit-container { padding-top: .4rem !important; }
.ckr .ctc-form button[type="submit"], .ckr .ctc-form .wpforms-submit {
	display: inline-flex !important; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.6rem !important; border: 1px solid var(--brand) !important; border-radius: 8px !important;
	background: var(--brand) !important; color: #fff !important; font-family: var(--ff-d) !important; font-size: 1rem !important; font-weight: 400 !important; box-shadow: none !important; cursor: pointer;
}
.ckr .ctc-form button[type="submit"]:hover { background: var(--brand-hi) !important; border-color: var(--brand-hi) !important; }
.ckr .ctc-form label.wpforms-error, .ckr .ctc-form em.wpforms-error { font-size: .78rem !important; color: #D70015 !important; }
.ckr .ctc-form .wpforms-confirmation-container-full { border-radius: 14px; background: var(--ok-wash) !important; border-color: var(--ok) !important; color: var(--ok) !important; }

@media (max-width: 940px) {
	.ckr .ctc-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .ctc-info { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
	.ckr .ctc-map { aspect-ratio: 16 / 10; }
}
@media (max-width: 660px) {
	.ckr .ctc-form { padding: 1.1rem; border-radius: 16px; }
	.ckr .ctc-card { padding: 1rem; }
	.ckr .ctc-hours { min-width: 0; }
	.ckr .ctc-form .wpforms-submit-container { text-align: center; }
	.ckr .ctc-map { aspect-ratio: 4 / 3; border-radius: 16px; }
}
.ckr .ctc-card > div { flex: 1 1 auto; min-width: 0; }
.ckr .ctc-hours { min-width: 0; }

/* cart drawer: space between the two buttons, and the chosen options per line */
.ckr .drawer-foot { display: flex; flex-direction: column; gap: .6rem; }
.ckr .drawer-foot .ckr-cart-sum { margin-bottom: .15rem; }
.ckr .ci-opts { display: block; margin-top: .2rem; font-size: .78rem; line-height: 1.45; color: var(--tx-2); }

/* ═════════════════════════════ WooCommerce screens (cart, checkout, account) ═════════════════════════════ */

.ckr .pgh--compact .pgh, .ckr.pgh--compact .pgh { padding-bottom: clamp(1.5rem, 2.6vw, 2.2rem); }
.ckr.pgh--compact .pgh-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: none; }
.ckr .wsec { padding-top: clamp(1.75rem, 3vw, 2.75rem); }
.ckr .wsec-in { color: var(--tx); font-size: .95rem; }
.ckr .wsec-in a:not(.button):not(.btn) { color: var(--brand-ink); }
.ckr .wsec-in h2, .ckr .wsec-in h3 { font-family: var(--ff-d); font-weight: 400; color: var(--ink); font-size: 1.25rem; margin: 0 0 1rem; }

/* shared: tables, fields, buttons */
.ckr .wsec-in table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; font-size: .92rem; }
.ckr .wsec-in table.shop_table th, .ckr .wsec-in table.shop_table td { padding: .85rem .6rem; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; vertical-align: middle; }
.ckr .wsec-in table.shop_table thead th { padding-top: 0; font-family: var(--ff-m); font-size: .68rem; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); }
.ckr .wsec-in .woocommerce-Price-amount { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckr .wsec-in input.input-text, .ckr .wsec-in input[type="text"], .ckr .wsec-in input[type="email"], .ckr .wsec-in input[type="tel"], .ckr .wsec-in input[type="password"], .ckr .wsec-in input[type="number"], .ckr .wsec-in select, .ckr .wsec-in textarea, .ckr .wsec-in .select2-container .select2-selection--single {
	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 .wsec-in .select2-container .select2-selection--single { display: flex; align-items: center; padding: 0 .5rem; }
.ckr .wsec-in .select2-container .select2-selection__arrow { height: 100%; }
.ckr .wsec-in input:focus, .ckr .wsec-in select:focus, .ckr .wsec-in textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
.ckr .wsec-in .form-row { margin: 0 0 .95rem; padding: 0; }
.ckr .wsec-in .form-row label { display: block; margin-bottom: .35rem; font-family: var(--ff-m); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); font-weight: 400; }
.ckr .wsec-in .form-row label.checkbox, .ckr .wsec-in .form-row label.woocommerce-form__label-for-checkbox { font-family: var(--ff-b); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--tx); display: flex; gap: .5rem; align-items: flex-start; }
.ckr .wsec-in .required { color: var(--accent-press); text-decoration: none; border: 0; }
.ckr .wsec-in .button, .ckr .wsec-in button.button, .ckr .wsec-in input.button, .ckr .wsec-in a.button {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .65rem 1.1rem; border: 1px solid var(--line-2); border-radius: 8px;
	background: #fff; color: var(--ink); font-family: var(--ff-d); font-size: .9rem; font-weight: 400; line-height: 1.2; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.ckr .wsec-in .button:hover { background: var(--paper-2); border-color: var(--line-3); }
.ckr .wsec-in .button.alt, .ckr .wsec-in .checkout-button, .ckr .wsec-in #place_order, .ckr .wsec-in .woocommerce-form-login__submit, .ckr .wsec-in .woocommerce-form-register__submit, .ckr .wsec-in .woocommerce-Button {
	background: var(--brand); border-color: var(--brand); color: #fff;
}
.ckr .wsec-in .button.alt:hover, .ckr .wsec-in .checkout-button:hover, .ckr .wsec-in #place_order:hover, .ckr .wsec-in .woocommerce-Button:hover { background: var(--brand-hi); border-color: var(--brand-hi); color: #fff; }
.ckr .wsec-in .button:disabled, .ckr .wsec-in .button.disabled { opacity: .5; cursor: not-allowed; }

/* notices */
.ckr .wsec-in .woocommerce-message, .ckr .wsec-in .woocommerce-info, .ckr .wsec-in .woocommerce-error, .ckr .wsec-in .wc-block-components-notice-banner {
	margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--paper-2); color: var(--tx); font-size: .9rem; list-style: none;
}
.ckr .wsec-in .woocommerce-error { border-left-color: #D70015; }
.ckr .wsec-in .woocommerce-message .button, .ckr .wsec-in .woocommerce-info .button { float: right; min-height: 0; padding: 0; border: 0; background: none; color: var(--brand-ink); }
.ckr .wsec-in .woocommerce-message::before, .ckr .wsec-in .woocommerce-info::before, .ckr .wsec-in .woocommerce-error::before { display: none; }

/* ── cart ── */
.ckr .wsec--cart .ct-woocommerce-cart-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.ckr .wsec--cart .woocommerce-cart-form { padding: clamp(1rem, 2.4vw, 1.6rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ckr .wsec--cart td.product-thumbnail { width: 5.5rem; }
.ckr .wsec--cart td.product-thumbnail img { width: 4.6rem; height: 4.6rem; object-fit: contain; border-radius: 12px; background: #F4F7F9; }
.ckr .wsec--cart td.product-name a { color: var(--ink) !important; font-family: var(--ff-d); font-size: .98rem; line-height: 1.35; }
.ckr .wsec--cart td.product-name dl.variation { display: grid; grid-template-columns: auto 1fr; gap: .1rem .45rem; margin: .35rem 0 0; font-size: .8rem; color: var(--tx-2); }
.ckr .wsec--cart td.product-name dl.variation dt, .ckr .wsec--cart td.product-name dl.variation dd, .ckr .wsec--cart td.product-name dl.variation p { margin: 0; font-weight: 400; }
.ckr .wsec--cart td.product-remove a.remove { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--tx-2) !important; background: var(--paper-2); font-size: 1.1rem; line-height: 1; }
.ckr .wsec--cart td.product-remove a.remove:hover { background: #FDECEC; color: #D70015 !important; }
.ckr .wsec--cart .quantity { display: inline-flex; align-items: stretch; height: 2.6rem; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.ckr .wsec--cart .quantity input.qty { width: 3rem; min-height: 0; height: auto; padding: 0; border: 0 !important; border-radius: 0; text-align: center; -moz-appearance: textfield; box-shadow: none !important; }
.ckr .wsec--cart .quantity .ct-increase, .ckr .wsec--cart .quantity .ct-decrease { position: relative !important; inset: auto !important; display: grid; place-items: center; width: 2.2rem; cursor: pointer; }
.ckr .wsec--cart .quantity .ct-decrease { order: 0; } .ckr .wsec--cart .quantity input.qty { order: 1; } .ckr .wsec--cart .quantity .ct-increase { order: 2; }
.ckr .wsec--cart td.actions { padding-top: 1.1rem; border-bottom: 0; }
.ckr .wsec--cart td.actions .coupon { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.ckr .wsec--cart td.actions .coupon label { display: none; }
.ckr .wsec--cart td.actions .coupon input.input-text { width: 12rem; }
.ckr .wsec--cart td.actions > .button { float: right; }
.ckr .wsec--cart .cart_totals { position: sticky; top: 6.5rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--line); border-radius: 22px; background: var(--paper-2); float: none; width: auto; }
.ckr .wsec--cart .cart_totals table.shop_table th { width: 42%; color: var(--tx-2); font-weight: 400; }
.ckr .wsec--cart .cart_totals tr.order-total th, .ckr .wsec--cart .cart_totals tr.order-total td { border-bottom: 0; padding-top: 1.1rem; }
.ckr .wsec--cart .cart_totals tr.order-total .woocommerce-Price-amount { font-family: var(--ff-d); font-size: 1.6rem; }
.ckr .wsec--cart .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.ckr .wsec--cart .cart_totals .woocommerce-shipping-destination, .ckr .wsec--cart .cart_totals .woocommerce-shipping-calculator { font-size: .82rem; color: var(--tx-2); }
.ckr .wsec--cart .wc-proceed-to-checkout { padding: 1rem 0 0; }
.ckr .wsec--cart .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 3.1rem; font-size: 1rem; margin: 0; }
.ckr .wsec--cart .cart-empty { padding: 2rem; border: 1px dashed var(--line-2); border-radius: 22px; text-align: center; }
.ckr .wsec--cart .return-to-shop { margin-top: 1rem; text-align: center; }

/* ── checkout ── */
.ckr .wsec--checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.ckr .wsec--checkout form.checkout > * { grid-column: 1; }
.ckr .wsec--checkout #customer_details, .ckr .wsec--checkout .ct-customer-details { padding: clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ckr .wsec--checkout .col2-set { display: grid; gap: 1.5rem; width: auto; float: none; }
.ckr .wsec--checkout .col2-set .col-1, .ckr .wsec--checkout .col2-set .col-2 { width: auto; float: none; max-width: none; }
.ckr .wsec--checkout .woocommerce-billing-fields__field-wrapper, .ckr .wsec--checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .9rem; }
.ckr .wsec--checkout .form-row-wide, .ckr .wsec--checkout .form-row.notes, .ckr .wsec--checkout #billing_address_1_field, .ckr .wsec--checkout #billing_country_field, .ckr .wsec--checkout #billing_company_field, .ckr .wsec--checkout #billing_email_field { grid-column: 1 / -1; }
.ckr .wsec--checkout .form-row-first, .ckr .wsec--checkout .form-row-last { width: auto; float: none; }
.ckr .wsec--checkout #order_review_heading, .ckr .wsec--checkout #order_review, .ckr .wsec--checkout .ct-order-review { grid-column: 2; }
.ckr .wsec--checkout #order_review_heading { grid-row: 1; margin: 0; }
.ckr .wsec--checkout #order_review, .ckr .wsec--checkout .ct-order-review { grid-row: 1 / span 3; position: sticky; top: 6.5rem; padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-radius: 22px; background: var(--paper-2); }
.ckr .wsec--checkout #order_review table.shop_table td.product-name { font-size: .88rem; }
.ckr .wsec--checkout #order_review tr.order-total .woocommerce-Price-amount { font-family: var(--ff-d); font-size: 1.5rem; }
.ckr .wsec--checkout #payment { margin-top: 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.ckr .wsec--checkout #payment ul.payment_methods { margin: 0; padding: .6rem; border: 0; list-style: none; }
.ckr .wsec--checkout #payment ul.payment_methods li { margin: 0 0 .35rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; list-style: none; }
.ckr .wsec--checkout #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--ink); cursor: pointer; }
.ckr .wsec--checkout #payment ul.payment_methods li img { max-height: 1.4rem; width: auto; margin-left: auto; }
.ckr .wsec--checkout #payment .payment_box { margin: .5rem 0 0; padding: .6rem .7rem; border-radius: 8px; background: var(--paper-2); font-size: .85rem; }
.ckr .wsec--checkout #payment .payment_box::before { display: none; }
.ckr .wsec--checkout #payment .place-order { padding: .8rem; border-top: 1px solid var(--line); }
.ckr .wsec--checkout #payment #place_order { width: 100%; min-height: 3.1rem; font-size: 1rem; float: none; }
.ckr .wsec--checkout .woocommerce-privacy-policy-text, .ckr .wsec--checkout .woocommerce-terms-and-conditions-wrapper { font-size: .8rem; color: var(--tx-2); }
.ckr .wsec--checkout .woocommerce-form-coupon-toggle, .ckr .wsec--checkout .woocommerce-form-login-toggle { grid-column: 1; }

/* ── account ── */
.ckr .wsec--account .woocommerce { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
/*
   Blocksy wraps the account page in its own `div.woocommerce.ct-woo-account`
   inside ours. The rule above matches any `.woocommerce` under the section, so
   that inner wrapper became a second two-column grid — and, being a single
   child, it was dropped into the 15rem track. The navigation kept its width and
   the content column collapsed to a few characters wide.

   Taking the inner wrapper out of the layout makes the navigation and the
   content direct children of our grid again. A theme that does not add a
   wrapper is unaffected, because then this selector matches nothing.
*/
.ckr .wsec--account .wsec-in.woocommerce > .woocommerce { display: contents; }

.ckr .wsec--account .woocommerce-MyAccount-navigation { width: auto; float: none; padding: .6rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.ckr .wsec--account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.ckr .wsec--account .woocommerce-MyAccount-navigation li a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--tx) !important; font-size: .92rem; }
.ckr .wsec--account .woocommerce-MyAccount-navigation li a:hover { background: #fff; }
.ckr .wsec--account .woocommerce-MyAccount-navigation li.is-active a { background: #fff; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--brand); }
.ckr .wsec--account .woocommerce-MyAccount-content { width: auto; float: none; padding: clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ckr .wsec--account .u-columns.col2-set, .ckr .wsec--account #customer_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); grid-column: 1 / -1; }
.ckr .wsec--account #customer_login .u-column1, .ckr .wsec--account #customer_login .u-column2 { width: auto; float: none; padding: clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ckr .wsec--account .woocommerce-form-login, .ckr .wsec--account .woocommerce-form-register { margin: 0; padding: 0; border: 0; }
.ckr .wsec--account .woocommerce > .woocommerce-notices-wrapper, .ckr .wsec--account .woocommerce > h2, .ckr .wsec--account .woocommerce > form.woocommerce-form-login { grid-column: 1 / -1; }
.ckr .wsec--account .woocommerce > form.woocommerce-form-login { max-width: 30rem; padding: clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: 22px; }
.ckr .wsec--account .woocommerce-LostPassword a, .ckr .wsec--account .lost_password a { font-size: .86rem; }
.ckr .wsec--account table.shop_table.my_account_orders .button { min-height: 2.2rem; padding: .35rem .7rem; font-size: .82rem; }
.ckr .wsec--account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ckr .wsec--account .woocommerce-Address { width: auto; float: none; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; }

@media (max-width: 940px) {
	.ckr .wsec--cart .ct-woocommerce-cart-form, .ckr .wsec--checkout form.checkout, .ckr .wsec--account .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.ckr .wsec--checkout #order_review_heading, .ckr .wsec--checkout #order_review, .ckr .wsec--checkout .ct-order-review { grid-column: 1; grid-row: auto; position: static; }
	.ckr .wsec--cart .cart_totals { position: static; }
}
@media (max-width: 660px) {
	.ckr .wsec--checkout .woocommerce-billing-fields__field-wrapper, .ckr .wsec--checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
	.ckr .wsec--account .u-columns.col2-set, .ckr .wsec--account #customer_login, .ckr .wsec--account .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }
	.ckr .wsec--cart .woocommerce-cart-form { padding: .8rem; border-radius: 16px; }
	.ckr .wsec--cart td.actions .coupon, .ckr .wsec--cart td.actions .coupon input.input-text { width: 100%; }
	.ckr .wsec--cart td.actions > .button { float: none; width: 100%; margin-top: .5rem; }
}
/* cart: the table needs the full width below 1080px; options read "Label: value" */
@media (max-width: 1080px) {
	.ckr .wsec--cart .ct-woocommerce-cart-form { grid-template-columns: minmax(0, 1fr); }
	.ckr .wsec--cart .cart_totals { position: static; max-width: 30rem; margin-left: auto; }
}
.ckr .wsec--cart td.product-name dl.variation { display: block; }
.ckr .wsec--cart td.product-name dl.variation dt, .ckr .wsec--cart td.product-name dl.variation dd { display: inline; }
.ckr .wsec--cart td.product-name dl.variation dd p { display: inline; }
.ckr .wsec--cart td.product-name dl.variation dd::after { content: ""; display: block; }
.ckr .wsec--cart td.product-name { min-width: 14rem; }
.ckr .wsec--cart td.product-name dl.variation dd { margin-left: .3em; }

/* checkout, Blocksy markup: form.checkout > .ct-customer-details + .ct-order-review */
.ckr .wsec--checkout form.checkout > .ct-customer-details { grid-column: 1; grid-row: 1; }
.ckr .wsec--checkout form.checkout > .ct-order-review { grid-column: 2; grid-row: 1; position: sticky; top: 6.5rem; }
.ckr .wsec--checkout .ct-customer-details #customer_details { padding: 0; border: 0; border-radius: 0; background: none; }
.ckr .wsec--checkout .ct-order-review #order_review { position: static; padding: 0; border: 0; border-radius: 0; background: none; }
.ckr .wsec--checkout .ct-order-review #order_review_heading { margin: 0 0 .8rem; }
@media (max-width: 940px) {
	.ckr .wsec--checkout form.checkout > .ct-order-review { grid-column: 1; grid-row: auto; position: static; }
}

/* ═════════════════════════════ header: product dropdown ═════════════════════════════ */
.ckr .hdr .nav > ul > li.menu-item-has-children { display: flex; align-items: center; position: relative; }
.ckr .hdr .nav .nav-sub-toggle { display: grid; place-items: center; width: 1.3rem; height: 1.6rem; margin-left: -.3rem; padding: 0; color: var(--tx-2); border-radius: 6px; }
.ckr .hdr .nav .nav-sub-toggle .i { width: .8rem; height: .8rem; transition: transform var(--t-fast); }
.ckr .hdr .nav > ul > li.menu-item-has-children > .sub-menu {
	display: none; position: absolute; z-index: 80; top: calc(100% + .35rem); left: -.75rem; width: max-content; max-width: min(54rem, calc(100vw - 2rem));
	grid-auto-flow: column; grid-template-rows: auto; gap: .25rem 1.25rem; padding: .9rem 1rem; margin: 0; list-style: none;
	background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--e2);
}
/* invisible bridge so the pointer can travel from the link to the panel */
.ckr .hdr .nav > ul > li.menu-item-has-children > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.ckr .hdr .nav > ul > li.menu-item-has-children:hover > .sub-menu,
.ckr .hdr .nav > ul > li.menu-item-has-children:focus-within > .sub-menu,
.ckr .hdr .nav > ul > li.menu-item-has-children.is-open > .sub-menu { display: grid; }
.ckr .hdr .nav > ul > li.menu-item-has-children:hover > .nav-sub-toggle .i,
.ckr .hdr .nav > ul > li.menu-item-has-children.is-open > .nav-sub-toggle .i { transform: rotate(180deg); }
.ckr .hdr .nav .sub-menu li { display: block; min-width: 11rem; }
.ckr .hdr .nav .sub-menu a { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; border-radius: 8px; font-size: .9rem; color: var(--ink); white-space: nowrap; }
.ckr .hdr .nav .sub-menu a::after { display: none; }
.ckr .hdr .nav .sub-menu a:hover { background: var(--paper-2); }
.ckr .hdr .nav .sub-menu .sub-menu { display: block; position: static; margin: 0 0 0 .55rem; padding: 0 0 0 .5rem; border-left: 1px solid var(--line); list-style: none; }
.ckr .hdr .nav .sub-menu .sub-menu a { font-size: .82rem; color: var(--tx); padding: .32rem .5rem; }
/* never let the badge be squeezed past the card edge: the name wraps first */
.ckr .hdr .nav .sub-menu .sub-menu a { white-space: normal; }
.ckr .hdr .nav .nav-badge { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; padding: .1rem .38rem; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: .66rem; line-height: 1.3; }
/* ── products mega menu (includes/menu.php builds it from WooCommerce) ──────
   Desktop: one panel under the whole header — the AirDeck as a photo card,
   then a column per category with photo rows (kW · m² from the client's room
   table, price), subcategories as small labels, and a strip with "all
   products" and the calculator. The burger keeps it as one list. */
.ckr .hdr .nav li.ckr-mm-col { min-width: 0; }
.ckr .hdr .nav li.ckr-mm-col > a,
.ckr .hdr .nav li.ckr-mm-sub > a { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem .55rem; font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); white-space: nowrap; }
.ckr .hdr .nav li.ckr-mm-col > a::before { content: ""; width: .42rem; height: .42rem; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.ckr .hdr .nav li.ckr-mm-col > a:hover,
.ckr .hdr .nav li.ckr-mm-sub > a:hover { background: none; color: var(--brand); }
.ckr .hdr .nav li.ckr-mm-sub { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.ckr .hdr .nav li.ckr-mm-sub > a { padding-bottom: .3rem; font-size: .64rem; }
.ckr .hdr .nav li.ckr-mm-col > .sub-menu,
.ckr .hdr .nav li.ckr-mm-sub > .sub-menu { display: grid; gap: .1rem; margin: 0; padding: 0; border: 0; }

/* product row: photo · name + kW/m² · price */
.ckr .hdr .nav li.ckr-mm-prod > a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .4rem .5rem; border-radius: 10px; white-space: normal; }
.ckr .hdr .nav li.ckr-mm-prod > a:hover { background: var(--paper-2); }
.ckr .hdr .nav .mm-thumb { display: grid; place-items: center; width: 3.5rem; height: 2.65rem; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.ckr .hdr .nav li.ckr-mm-prod > a:hover .mm-thumb { background: #EBEBEF; }
.ckr .hdr .nav .mm-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--t-fast); }
.ckr .hdr .nav li.ckr-mm-prod > a:hover .mm-thumb img { transform: scale(1.06); }
.ckr .hdr .nav .mm-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ckr .hdr .nav .mm-name { font-size: .9rem; font-weight: 500; color: var(--ink); }
.ckr .hdr .nav .mm-meta { font-size: .74rem; color: var(--tx-2); }
.ckr .hdr .nav .mm-price { display: flex; flex-direction: column; align-items: flex-end; font-size: .84rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ckr .hdr .nav .mm-price small { font-size: .64rem; color: var(--tx-2); }
.ckr .hdr .nav .mm-price.is-out { color: var(--tx-2); }
.ckr .hdr .nav .mm-price.is-out small { color: #C9341F; }
.ckr .hdr .nav li.ckr-mm-prod.current-menu-item > a { background: var(--paper-2); }
.ckr .hdr .nav li.ckr-mm-prod.current-menu-item .mm-name { color: var(--brand); }

/* the AirDeck card */
.ckr .hdr .nav .sub-menu li.ckr-mm-feature > a { position: relative; display: flex; align-items: flex-end; min-height: 18.5rem; height: 100%; padding: 0; border-radius: 14px; overflow: hidden; background: #1D1D1F; color: #fff; white-space: normal; isolation: isolate; }
.ckr .hdr .nav li.ckr-mm-feature > a:hover { background: #1D1D1F; }
.ckr .hdr .nav .mm-feat-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% 0; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.ckr .hdr .nav li.ckr-mm-feature > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.45) 66%, rgba(0,0,0,0) 86%); }
.ckr .hdr .nav li.ckr-mm-feature > a:hover .mm-feat-img { transform: scale(1.04); }
.ckr .hdr .nav li.ckr-mm-feature .nav-badge { position: absolute; top: 1rem; left: 1rem; }
.ckr .hdr .nav .mm-feat-body { display: flex; flex-direction: column; gap: .3rem; width: 100%; padding: 1rem; }
.ckr .hdr .nav .mm-feat-name { font-family: var(--ff-d); font-size: 1.45rem; line-height: 1.1; color: #fff; }
.ckr .hdr .nav .mm-feat-sub { font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.78); }
.ckr .hdr .nav .mm-feat-meta { font-size: .72rem; color: rgba(255,255,255,.6); }
.ckr .hdr .nav .mm-feat-foot { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; margin-top: .5rem; }
.ckr .hdr .nav .mm-feat-price { display: flex; align-items: baseline; gap: .4rem; font-size: 1.05rem; color: #fff; white-space: nowrap; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ckr .hdr .nav .mm-feat-price small { font-size: .64rem; color: rgba(255,255,255,.6); }
.ckr .hdr .nav .mm-feat-cta { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .8rem; border-radius: 8px; background: var(--brand); color: #fff; font-size: .76rem; white-space: nowrap; transition: background var(--t-fast); }
.ckr .hdr .nav li.ckr-mm-feature > a:hover .mm-feat-cta { background: var(--brand-hi); }
.ckr .hdr .nav .mm-feat-cta .i, .ckr .hdr .nav .mm-foot .i { width: .8rem; height: .8rem; }

/* under the split models: the installer note, then the calculator tile */
.ckr .hdr .nav .mm-fitter { display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .5rem; padding: .35rem .5rem; font-size: .76rem; line-height: 1.4; color: var(--tx-2); white-space: normal; }
.ckr .hdr .nav .mm-fitter .i { width: .95rem; height: .95rem; margin-top: .05rem; color: var(--ink); flex-shrink: 0; }
.ckr .hdr .nav .mm-fitter u { text-decoration: none; color: var(--brand); }
.ckr .hdr .nav .mm-fitter:hover { background: none; }
.ckr .hdr .nav .mm-fitter:hover u { text-decoration: underline; }
/* calculator tile under the split models */
.ckr .hdr .nav li.ckr-mm-calc { padding-top: .7rem; }
.ckr .hdr .nav .mm-calc { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem .7rem .7rem; border-radius: 12px; background: var(--paper-2); white-space: normal; }
.ckr .hdr .nav .mm-calc:hover { background: #EBEBEF; }
.ckr .hdr .nav .mm-calc-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; background: #fff; color: var(--brand); flex-shrink: 0; }
.ckr .hdr .nav .mm-calc-ic .i { width: 1.15rem; height: 1.15rem; }
.ckr .hdr .nav .mm-calc-txt { display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.ckr .hdr .nav .mm-calc-txt b { font-size: .85rem; font-weight: 500; color: var(--ink); }
.ckr .hdr .nav .mm-calc-txt span { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--brand); }
.ckr .hdr .nav .mm-calc .i, .ckr .hdr .nav .mm-feat-cta .i, .ckr .hdr .nav .mm-foot-all .i { width: .8rem; height: .8rem; }

/* the strip under the columns */
.ckr .hdr .nav li.ckr-mm-foot { grid-column: 1 / -1; }
.ckr .hdr .nav .mm-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ckr .hdr .nav .mm-foot-all { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem; font-size: .88rem; font-weight: 500; color: var(--ink); }
.ckr .hdr .nav .mm-foot-all:hover { background: none; color: var(--brand); }
.ckr .hdr .nav .mm-trust { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding-right: .5rem; font-size: .78rem; color: var(--tx-2); }
.ckr .hdr .nav .mm-trust span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ckr .hdr .nav .mm-trust .i { width: .95rem; height: .95rem; color: var(--ink); }
.ckr .hdr .nav .mm-trust a { display: inline-flex; align-items: center; gap: .4rem; padding: 0; white-space: nowrap; font-size: inherit; font-weight: inherit; color: inherit; background: none; }
.ckr .hdr .nav .mm-trust a:hover { color: var(--brand); background: none; text-decoration: underline; text-underline-offset: 3px; }
.ckr .hdr .nav .mm-trust a::after { display: none; }

@media (min-width: 941px) {
	/* the panel hangs from the sticky header, not from the menu item */
	.ckr .hdr .nav > ul > li.ckr-mm-root { position: static; }
	.ckr .hdr .nav > ul > li.ckr-mm-root > .sub-menu {
		top: 100%; left: 50%; transform: translateX(-50%); width: min(68rem, calc(100vw - 2rem)); max-width: none;
		grid-auto-flow: row; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
		gap: 0 1.6rem; padding: 1.1rem 1.1rem 1rem; border-top: 0; border-radius: 0 0 18px 18px;
	}
	.ckr .hdr .nav > ul > li.ckr-mm-root > .sub-menu::before { top: -1.5rem; height: 1.5rem; }
	.ckr .hdr .nav li.ckr-mm-col--feature,
	.ckr .hdr .nav li.ckr-mm-col--list { display: flex; flex-direction: column; }
	.ckr .hdr .nav li.ckr-mm-col--list > .sub-menu { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
	.ckr .hdr .nav li.ckr-mm-col--list > .sub-menu > li.ckr-mm-calc { margin-top: auto; }
	.ckr .hdr .nav li.ckr-mm-col--feature > .sub-menu { flex: 1; }
	.ckr .hdr .nav li.ckr-mm-col--feature > .sub-menu > li { height: 100%; }
}
@media (max-width: 940px) {
	.ckr .hdr.is-open .nav li.ckr-mm-col { margin-top: .5rem; }
	.ckr .hdr.is-open .nav li.ckr-mm-col > .sub-menu,
	.ckr .hdr.is-open .nav li.ckr-mm-sub > .sub-menu { padding: 0; margin: 0; border: 0; }
	.ckr .hdr.is-open .nav li.ckr-mm-feature > a { min-height: 10.5rem; margin-bottom: .2rem; }
	.ckr .hdr.is-open .nav .mm-feat-sub { display: none; }
	.ckr .hdr.is-open .nav .mm-foot { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.ckr .hdr.is-open .nav .mm-trust { flex-direction: column; gap: .35rem; }
}

/* Phone menu, kept simple (2026-10-07, the user: "mobile menu is cutting off,
   better agr mobile menu simple ho"). The panel scrolls inside the screen instead
   of running off it, the product mega menu folds under its parent until tapped,
   and opens as plain rows: no photos, no feature card, no calculator, no notes. */
.ckr .hdr .nav .mm-m-toggle { display: none; }
@media (max-width: 940px) {
	.ckr .hdr.is-open .nav { max-height: var(--ckr-nav-max, 75vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.ckr .hdr.is-open .nav > ul > li.ckr-mm-root { position: relative; }
	.ckr .hdr.is-open .nav > ul > li > a { display: block; padding: .8rem .5rem; font-size: 1rem; line-height: 1.3; border-bottom: 1px solid var(--line); }
	.ckr .hdr.is-open .nav > ul > li.ckr-mm-root > a { padding-right: 3rem; }
	.ckr .hdr.is-open .nav > ul > li.ckr-mm-root.menu-item-has-children > .sub-menu { display: none; }
	.ckr .hdr.is-open .nav > ul > li.ckr-mm-root.menu-item-has-children.is-expanded > .sub-menu { display: block; }
	.ckr .hdr.is-open .nav .mm-m-toggle { display: grid; place-items: center; position: absolute; top: 0; right: 0; width: 3rem; height: 3.1rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
	.ckr .hdr.is-open .nav .mm-m-toggle .i { width: 1rem; height: 1rem; transition: transform var(--t-fast); }
	.ckr .hdr.is-open .nav li.ckr-mm-root.is-expanded > .mm-m-toggle .i { transform: rotate(180deg); }

	/* the AirDeck photo card becomes a row like the others */
	.ckr .hdr.is-open .nav li.ckr-mm-feature > a { display: flex; align-items: center; gap: .5rem; min-height: 0; margin: 0; padding: .45rem .5rem; border-radius: 10px; background: none; overflow: visible; }
	.ckr .hdr.is-open .nav li.ckr-mm-feature > a:hover { background: var(--paper-2); }
	.ckr .hdr.is-open .nav li.ckr-mm-feature > a::before,
	.ckr .hdr.is-open .nav .mm-feat-img,
	.ckr .hdr.is-open .nav .mm-feat-sub,
	.ckr .hdr.is-open .nav .mm-feat-meta,
	.ckr .hdr.is-open .nav .mm-feat-cta { display: none; }
	.ckr .hdr.is-open .nav .mm-feat-body,
	.ckr .hdr.is-open .nav .mm-feat-foot { display: contents; }
	.ckr .hdr.is-open .nav .mm-feat-name { order: 1; font-family: inherit; font-size: .9rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
	.ckr .hdr.is-open .nav li.ckr-mm-feature .nav-badge { order: 2; position: static; }
	.ckr .hdr.is-open .nav .mm-feat-price { order: 3; flex-direction: column; align-items: flex-end; gap: 0; margin-left: auto; font-size: .84rem; color: var(--ink); line-height: 1.2; }
	.ckr .hdr.is-open .nav .mm-feat-price small { color: var(--tx-2); }

	/* product rows without their photos */
	.ckr .hdr.is-open .nav .mm-thumb { display: none; }
	.ckr .hdr.is-open .nav li.ckr-mm-prod > a { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .45rem .5rem; }

	/* the extras stay on the desktop panel */
	.ckr .hdr.is-open .nav li.ckr-mm-calc,
	.ckr .hdr.is-open .nav .mm-fitter,
	.ckr .hdr.is-open .nav .mm-trust { display: none; }
	.ckr .hdr.is-open .nav .mm-foot { margin-top: .3rem; padding-top: .3rem; }
}

@media (max-width: 940px) {
	/* burger menu: everything listed, sub-levels indented, no hover panel */
	.ckr .hdr.is-open .nav > ul > li.menu-item-has-children { display: block; }
	.ckr .hdr.is-open .nav .nav-sub-toggle { display: none; }
	.ckr .hdr.is-open .nav > ul > li.menu-item-has-children > .sub-menu { display: block; position: static; width: auto; max-width: none; padding: 0 0 .3rem .8rem; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; margin: 0 0 .3rem .5rem; }
	.ckr .hdr.is-open .nav .sub-menu a { white-space: normal; }
}
/* WPML hangs its language switcher in this menu as an item with children: the
   header has its own switcher, so it stays hidden even now that parents show */
.ckr .hdr .nav li.wpml-ls-item, .ckr .hdr .nav li.menu-item-wpml-ls-slot, .ckr .hdr .nav li[class*="wpml-ls-"] { display: none !important; }
.ckr .hdr .nav > ul > li > a { white-space: nowrap; }

/* hero: "Vanaf € 2.599,00" beside the buy button, the categories link below */
.ckr .hero-cta .hero-price--inline { margin: 0; align-items: baseline; }
.ckr .hero-more { margin-top: 1.1rem; }
@media (max-width: 760px) { .ckr .hero-more { display: flex; justify-content: center; } }

/* split tile: each size links to its product; the tile's own link is stretched underneath */
.ckr .cat--links { position: relative; cursor: pointer; }
.ckr .cat--links .cat-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ckr .cat--links .cat-cover:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ckr .cats--bento .cat-sizes > .cat-size { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .45rem .35rem; border-radius: 10px; font-family: var(--ff-m); font-size: .64rem; letter-spacing: .04em; color: var(--tx-2); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.ckr .cats--bento .cat-sizes > a.cat-size:hover { background: var(--paper-2); color: var(--brand-ink); }
.ckr .cats--bento .cat-sizes > .cat-size b { font-weight: 400; color: var(--ink); font-size: .7rem; }
.ckr .cats--bento .cat-sizes > a.cat-size:hover b { color: var(--brand-ink); }
.ckr .cats--bento .cat-sizes > .cat-size small { font-size: .62rem; color: var(--tx-2); }
.ckr .cats--bento .cat--split .cat-sizes { gap: .5rem; }



/* legal pages: the downloadable form (Herroepingsrecht) as a file card */
.ckr .txt-body a.txt-file { display: inline-flex; align-items: center; gap: .8rem; margin: 1.5rem 0 .5rem; padding: .7rem 1rem .7rem .7rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); color: var(--ink) !important; text-decoration: none !important; }
.ckr .txt-body a.txt-file:hover { border-color: var(--brand); background: var(--brand-wash); }
.ckr .txt-body a.txt-file img { float: none; width: 2.6rem; height: auto; margin: 0; border-radius: 0; }
.ckr .txt-body a.txt-file span { font-family: var(--ff-d); font-size: .98rem; }
.ckr .txt-body h3 { scroll-margin-top: 7rem; }

/* product card: the photo sits below the badge row, and "Snel bekijken" is a
   small pill in the corner instead of a full-width bar over the product */
@media (min-width: 661px) {
	.ckr .pc-media img {
		top: auto; bottom: .75rem; left: 50%; translate: -50% 0;
		width: auto; max-width: 80%; height: calc(100% - 3.4rem); aspect-ratio: auto; object-fit: contain;
	}
	.ckr .pc-quick { inset-inline: auto; right: .55rem; bottom: .55rem; width: auto; }
	.ckr .pc-quick .btn { width: auto; min-height: 0; padding: .38rem .7rem; font-size: .74rem; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
	.ckr .pc-quick .btn .i { width: .85rem; height: .85rem; }
}

/* ═════════════════════════════ footer ═════════════════════════════ */
.ckr .ft img, .ckr .ft .ft-logo-v { height: 2.6rem; }
@media (max-width: 768px) {
	.ckr .ft .wrap { padding-block: 2.25rem 1.25rem; }
	.ckr .ft-grid { gap: 1.75rem 1.25rem !important; text-align: left !important; }
	/* brand block: logo, one line of copy, the company facts as a card */
	.ckr .ft-grid > div:first-child { text-align: center; margin-bottom: 0 !important; }
	.ckr .ft img, .ckr .ft .ft-logo-v { height: 4.25rem; margin: 0 auto 1rem; }
	.ckr .ft-co { max-width: 34rem; margin-inline: auto; font-size: .88rem; }
	.ckr .ft-co + dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; width: 100%; max-width: 26rem; margin: 1.1rem auto 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font-size: .84rem; }
	.ckr .ft-co + dl dt { padding-top: .12rem; }
	.ckr .ft-co + dl dd { color: var(--ink); font-family: var(--ff-b); }
	/* link columns: headed, left-aligned, compact */
	.ckr .ft-grid > div:nth-child(n+2) { text-align: left !important; }
	.ckr .ft-grid > div > h3 { margin: 0 0 .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); font-family: var(--ff-m); font-size: .68rem !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--tx-2); }
	.ckr .ft ul { align-items: flex-start !important; gap: .55rem !important; font-size: .9rem; }
	.ckr .ft ul a { color: var(--tx); }
	.ckr .ft-grid > div:nth-child(4) ul { gap: .55rem 1rem !important; }
	.ckr .ft-bot { display: flex; justify-content: space-between !important; gap: .75rem; margin-top: 1.75rem; padding-top: 1rem; font-size: .8rem; }
}
@media (max-width: 768px) {
	.ckr .ft .ft-grid { padding-bottom: 0 !important; margin-bottom: 0 !important; }
	.ckr .ft-bot { margin-top: 1.25rem !important; }
}

/* custom dropdown for .sel (sort) — the native option list cannot be styled */
.ckr .csel { position: relative; display: inline-block; min-width: 13rem; }
.ckr .csel .csel-src { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.ckr .csel-btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 2.6rem; padding: .5rem .8rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font-size: .9rem; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ckr .csel-btn:hover { border-color: var(--line-3); }
.ckr .csel.is-open .csel-btn, .ckr .csel-btn:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,113,227,.18); outline: none; }
.ckr .csel-btn .i { width: .9rem; height: .9rem; color: var(--tx-2); transition: transform var(--t-fast); }
.ckr .csel.is-open .csel-btn .i { transform: rotate(180deg); }
.ckr .csel-list { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e2); }
.ckr .csel-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 8px; font-size: .9rem; color: var(--ink); cursor: pointer; outline: none; }
.ckr .csel-list li .i { width: .9rem; height: .9rem; color: var(--brand); visibility: hidden; }
.ckr .csel-list li[aria-selected="true"] .i { visibility: visible; }
.ckr .csel-list li:hover, .ckr .csel-list li:focus { background: var(--paper-2); }
.ckr .csel-list li[aria-selected="true"] { color: var(--brand-ink); }

/* ═════════════════════════════ product carousel (homepage) ═════════════════════════════ */
.ckr .head--bar:has(.pgc-arrows) { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ckr .pgc-arrows { display: flex; gap: .45rem; flex: none; }
.ckr .pgc-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); }
.ckr .pgc-btn .i { width: 1rem; height: 1rem; }
.ckr .pgc-btn[data-pgc="-1"] .i { transform: rotate(90deg); }
.ckr .pgc-btn[data-pgc="1"] .i { transform: rotate(-90deg); }
.ckr .pgc-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.ckr .pgc-btn:disabled { opacity: .35; cursor: default; }
.ckr .pgc-static .pgc-arrows { visibility: hidden; }

.ckr .pgrid.pgrid--carousel {
	flex-wrap: nowrap !important; justify-content: flex-start !important;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; padding: .25rem .25rem 1rem; margin: -.25rem -.25rem -1rem;
}
.ckr .pgrid.pgrid--carousel::-webkit-scrollbar { display: none; }
.ckr .pgrid.pgrid--carousel > .pc { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)) !important; }
@media (max-width: 1080px) { .ckr .pgrid.pgrid--carousel > .pc { flex-basis: calc((100% - 2 * var(--g)) / 3) !important; max-width: none !important; width: auto !important; } }
@media (max-width: 768px) {
	/* phones: two cards and a peek of the third, so it reads as swipeable */
	.ckr .pgrid.pgrid--carousel > .pc { flex: 0 0 44% !important; max-width: 44% !important; width: 44% !important; }
	.ckr .head--bar:has(.pgc-arrows) { align-items: center; }
	.ckr .pgc-btn { width: 2.4rem; height: 2.4rem; }
}

/* ═════════════════════════════ logged in: WordPress admin bar ═════════════════════════════
   The admin bar is fixed to the top (32px; 46px up to 782px; it scrolls away
   below 600px). The sticky header and the cart drawer stuck at top:0 and slid
   underneath it, so they start below the bar instead. Visitors never see it. */
body.admin-bar .ckr .hdr { top: 32px; }
body.admin-bar .ckr .drawer { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ckr .hdr { top: 46px; }
	body.admin-bar .ckr .drawer { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .ckr .hdr { top: 0; }
	body.admin-bar .ckr .drawer { top: 0; }
}

/* carousel arrows on the carousel itself, left and right of the cards */
.ckr .pgc-stage { position: relative; }
.ckr .pgc-stage > .pgc-btn { position: absolute; z-index: 5; top: 40%; translate: 0 -50%; width: 3rem; height: 3rem; border-radius: 8px; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: var(--e2); }
.ckr .pgc-stage > .pgc-btn--prev { left: -1.25rem; }
.ckr .pgc-stage > .pgc-btn--next { right: -1.25rem; }
.ckr .pgc-stage > .pgc-btn:disabled { opacity: 0; visibility: hidden; pointer-events: none; }
.ckr .pgc-static .pgc-stage > .pgc-btn { display: none; }
@media (max-width: 1360px) {
	/* no room outside the content column: sit just inside the edge */
	.ckr .pgc-stage > .pgc-btn--prev { left: .35rem; }
	.ckr .pgc-stage > .pgc-btn--next { right: .35rem; }
}
@media (max-width: 768px) {
	.ckr .pgc-stage > .pgc-btn { width: 2.5rem; height: 2.5rem; top: 35%; }
}
/* footer column headings: room between the title and its links */
@media (min-width: 769px) {
	.ckr .ft-grid > div > h3 { margin: 0 0 1rem; }
}

/* cart drawer on a phone: a panel, not the whole screen — a strip of the page
   (the scrim) stays visible on the left and closes it on tap */
@media (max-width: 660px) {
	.ckr .drawer { width: min(88vw, 24rem) !important; border-radius: 16px 0 0 16px; }
}

/* "Waarom kopen bij Climate King?" strip: every title on one line on desktop */
@media (min-width: 1081px) {
	.ckr .usp-band.band-steel .usp b { font-size: clamp(.92rem, 1.1vw, 1.05rem); }
}

/* product card: a taller photo area (the badge row took space from the photo)
   and "Snel bekijken" centred at the bottom */
@media (min-width: 661px) {
	.ckr .pc-media { aspect-ratio: 10 / 9; }
	.ckr .pc-media img { height: calc(100% - 3.6rem); bottom: .9rem; }
	/* "Snel bekijken" is a round icon in the top corner, in the badge row above
	   the photo: on hover it no longer lands on the product */
	.ckr .pc-quick { inset: .25rem .5rem auto auto; transform: translateY(-4px); }
	.ckr .pc:hover .pc-quick, .ckr .pc:focus-within .pc-quick { transform: none; }
	.ckr .pc-quick .btn { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; justify-content: center; gap: 0; }
	.ckr .pc-quick .btn .i { width: .95rem; height: .95rem; }
	.ckr .pc-quick .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	/* a sold-out card carries three badges; the third would run under the icon */
	.ckr .pc.is-out .pc-badges .pill--ok { display: none; }
}

/* carousel arrows: dark hover only where there is a mouse (it stuck after a tap) */
.ckr .pgc-btn:hover:not(:disabled) { background: #fff; border-color: var(--line-2); color: var(--ink); }
@media (hover: hover) {
	.ckr .pgc-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
}
/* phones: no arrows over the cards; a small pair under the row instead */
.ckr .pgc-under { display: none; }
@media (max-width: 768px) {
	.ckr .pgc-stage > .pgc-btn { display: none; }
	.ckr .pgc-under { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
	.ckr .pgc-under .pgc-btn { width: 2.4rem; height: 2.4rem; box-shadow: none; }
	.ckr .pgc-under .pgc-btn:disabled { opacity: .35; visibility: visible; }
	.ckr .pgc-static .pgc-under { display: none; }
}

/* product section on phones: sorting back (it was hidden), chips on one swipeable line */
@media (max-width: 768px) {
	.ckr #assortiment .fbar-chips { flex-wrap: nowrap !important; }
	.ckr #assortiment .fbar-chips .fbar-sep { flex: none; }
	.ckr #assortiment .fbar-sort { display: flex !important; justify-content: flex-end; }
	.ckr #assortiment .fbar-sort label { display: flex; align-items: center; gap: .6rem; width: 100%; justify-content: space-between; }
	.ckr #assortiment .fbar-sort .csel { flex: 1 1 auto; max-width: 16rem; }
	.ckr #assortiment .fbar-sort .csel-list { left: auto; right: 0; min-width: 100%; }
}

/* carousel arrows: one pair under the row on every screen size */
.ckr .pgc-under { display: flex; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.ckr .pgc-under .pgc-btn { width: 2.75rem; height: 2.75rem; box-shadow: none; }
.ckr .pgc-under .pgc-btn:disabled { opacity: .35; visibility: visible; }
.ckr .pgc-static .pgc-under { display: none; }
.ckr .pgc-stage + .pgc-under + .pgrid-more { margin-top: 1.25rem; }
@media (max-width: 768px) { .ckr .pgc-under .pgc-btn { width: 2.4rem; height: 2.4rem; } }

/* ═════════════════════════════ 404 ═════════════════════════════ */
.ckr .nf { border-top: 0; }
.ckr .nf-in { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 46rem; padding-block: clamp(1rem, 4vw, 3rem); }
.ckr .nf-code { font-family: var(--ff-d); font-size: clamp(4.5rem, 12vw, 8rem); line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.ckr .nf-title { margin-top: .6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.ckr .nf-lead { margin-top: .8rem; color: var(--tx); font-size: 1.02rem; max-width: 40ch; }
.ckr .nf-search { position: relative; display: flex; gap: .5rem; width: 100%; max-width: 30rem; margin-top: 1.6rem; }
.ckr .nf-search > .i { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--tx-2); pointer-events: none; }
.ckr .nf-search input[type="search"] { flex: 1 1 auto; min-height: 3rem; padding: .6rem .9rem .6rem 2.5rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 1rem; color: var(--ink); }
.ckr .nf-search input[type="search"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
.ckr .nf-search .btn { min-height: 3rem; padding-inline: 1rem; }
.ckr .nf-cats { justify-content: center; margin-top: 1.1rem; }
.ckr .nf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.6rem; }
@media (max-width: 660px) {
	/* centred + one scrolling line cut the first chip off: wrap them here */
	.ckr .nf-cats { flex-wrap: wrap !important; overflow: visible !important; margin-inline: 0 !important; padding-inline: 0 !important; }
}

/* Producten page: Blocksy prints an empty archive container (60px + 60px padding
   round an empty loop section) above our content, and WooCommerce's wpautop adds
   a <br> after every builder row — together ~150px of blank space under the header */
body.woocommerce-shop.ckr-own-header main > .ct-container { display: none; }
body.ckr-own-header .page-description > br { display: none; }

/* ── shop page head (ckr_shop_head) ───────────────────────────────────────
   Copy + H1 on the left, the four categories as tiles on the right, each with
   the lowest price in its line-up. The product grid follows directly. */
.ckr .shh { padding-block: clamp(1rem, 2vw, 1.6rem) clamp(2.2rem, 4vw, 3.4rem); border-top: 0; }
.ckr .shh-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ckr .shh-title { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; }
.ckr .shh-fact { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; padding: .4rem .75rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: .86rem; color: var(--ink); }
.ckr .shh-fact .i { width: 1rem; height: 1rem; color: var(--brand, #0071E3); }
.ckr .shh-fact .i + .i { color: #E8590C; margin-left: -.1rem; }
.ckr .shh-lead { margin-top: 1rem; max-width: 58ch; font-size: 1rem; line-height: 1.65; color: var(--tx); }
.ckr .shh-jump { margin-top: 1.5rem; }
.ckr .shh-jump .i { transform: rotate(90deg); }

.ckr .shh-nav { padding: .5rem; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ckr .shh-nav-title { padding: .7rem .9rem .5rem; font-family: var(--ff-m); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }
.ckr .shh-cats { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ckr .shh-cats > li { margin: 0; min-width: 0; }
.ckr .shh-cats > li + li { border-top: 1px solid var(--line); }
.ckr .shc {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem;
	padding: .95rem .9rem; border-radius: 12px; color: var(--ink);
	transition: background var(--t-fast, .2s);
}
.ckr .shc:hover { background: #F5F5F7; }
.ckr .shc-ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: #F5F5F7; color: var(--ink); flex: none; }
.ckr .shc-ic .i { width: 1.15rem; height: 1.15rem; }
.ckr .shc--hl .shc-ic { background: var(--brand, #0071E3); color: #fff; }
.ckr .shc-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ckr .shc-txt b { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--ff-d); font-weight: 400; font-size: 1.05rem; line-height: 1.2; }
.ckr .shc-txt b .pill { font-family: var(--ff-b); font-size: .66rem; }
.ckr .shc-txt small { font-size: .8rem; color: var(--tx-2); }
.ckr .shc-from { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .76rem; color: var(--tx-2); white-space: nowrap; }
.ckr .shc-from b { font-family: var(--ff-d); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.ckr .shc--hl .shc-from b { font-size: 1.3rem; }
.ckr .shc-go { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; color: var(--tx-2); flex: none; transition: color var(--t-fast, .2s), transform var(--t-fast, .2s); }
.ckr .shc-go .i { width: .9rem; height: .9rem; transform: rotate(-90deg); }
.ckr .shc:hover .shc-go { color: var(--ink); transform: translateX(2px); }

@media (max-width: 940px) {
	.ckr .shh-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr .shh-copy { text-align: center; }
	.ckr .shh-title { margin-inline: auto; }
	.ckr .shh-lead { margin-inline: auto; }
}
@media (max-width: 660px) {
	.ckr .shh-title { font-size: 1.8rem; }
	.ckr .shh-lead { font-size: .94rem; }
	.ckr .shh-nav { padding: .35rem; border-radius: 14px; }
	.ckr .shc { grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; padding: .8rem .6rem; }
	.ckr .shc-ic { width: 2.3rem; height: 2.3rem; }
	.ckr .shc-go { display: none; }
	.ckr .shc-txt b { font-size: .98rem; }
	.ckr .shc-txt small { font-size: .74rem; }
	.ckr .shc-from { flex-direction: column; align-items: flex-end; gap: 0; font-size: .68rem; }
	.ckr .shc-from b, .ckr .shc--hl .shc-from b { font-size: 1.05rem; }
}

/* ── footer on tablets (769–1080px) ──────────────────────────────────────
   The theme's 2×2 grid put the brand block in one quarter and left the link
   columns at uneven heights. Same treatment as the phone footer: the brand
   block centred on top with its facts card, then the three link columns in
   one row, headed and left-aligned. */
@media (min-width: 769px) and (max-width: 1080px) {
	.ckr .ft .wrap { padding-block: 2.75rem 1.4rem; }
	.ckr .ft-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 2.25rem 2rem !important;
		text-align: left !important;
	}
	.ckr .ft-grid > div:first-child { grid-column: 1 / -1 !important; text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
	.ckr .ft img, .ckr .ft .ft-logo-v { height: 4.25rem; margin: 0 auto 1rem; }
	.ckr .ft-co { max-width: 38rem; margin-inline: auto; font-size: .9rem; }
	.ckr .ft-co + dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; width: 100%; max-width: 26rem; margin: 1.2rem auto 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font-size: .84rem; }
	.ckr .ft-co + dl dt { padding-top: .12rem; }
	.ckr .ft-co + dl dd { color: var(--ink); font-family: var(--ff-b); }
	.ckr .ft-grid > div:nth-child(n+2) { grid-column: auto !important; margin: 0 !important; text-align: left !important; }
	.ckr .ft-grid > div > h3 { margin: 0 0 .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); font-family: var(--ff-m); font-size: .68rem !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--tx-2); }
	.ckr .ft ul { align-items: flex-start !important; gap: .6rem !important; font-size: .9rem; }
	.ckr .ft ul a { color: var(--tx); }
	.ckr .ft-grid > div:nth-child(4) ul { display: flex !important; flex-direction: column; }
	.ckr .ft-bot { display: flex; justify-content: space-between !important; gap: .75rem; margin-top: 2rem; padding-top: 1rem; font-size: .8rem; }
}

/* ── "Waarom kopen bij Climate King?" on tablets (661–1080px) ─────────────
   The strip kept four fixed columns, so its two tiles filled the left half and
   the right half was empty. Here the tiles share the row whatever their
   number, each as icon beside title + text, under a centred heading. */
@media (min-width: 661px) and (max-width: 1080px) {
	.ckr .usp-band.band-steel .usp-h { margin-bottom: .4rem; }
	.ckr .usp-band.band-steel .usps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 1rem;
	}
	.ckr .usp-band.band-steel .usp {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 1rem;
		row-gap: .3rem;
		align-items: start;
		padding: 1.25rem 1.3rem;
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 16px;
		background: rgba(255, 255, 255, .04);
		text-align: left;
	}
	.ckr .usp-band.band-steel .usp-ic { grid-row: 1 / 3; margin: 0; }
	.ckr .usp-band.band-steel .usp b { align-self: end; font-size: 1.05rem; }
	.ckr .usp-band.band-steel .usp p { margin: 0; font-size: .86rem; line-height: 1.55; }
}

/* ── FAQ intro on tablets (661–940px) ─────────────────────────────────────
   Below 940px the intro stacks above the questions and was left as a narrow
   left column: lead, hours and place under each other, a lone button, and
   empty space to the right. Centred like the phone version, with the lead,
   the contact facts and the button together in one card. */
@media (min-width: 661px) and (max-width: 940px) {
	.ckr .faq-rail { text-align: center; }
	.ckr .faq-rail h2 { max-width: 22ch; margin-inline: auto; }
	.ckr .faq-help {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 1rem 1.5rem;
		max-width: 44rem;
		margin: 1.4rem auto 0;
		padding: 1.25rem 1.4rem;
		border: 1px solid var(--line);
		border-radius: 16px;
		background: #fff;
		text-align: left;
	}
	.ckr .faq-help > p { grid-column: 1 / -1; margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
	.ckr .faq-help dl { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; }
	.ckr .faq-help dl > div { justify-content: flex-start; }
	.ckr .faq-help .btn { justify-self: end; }
	.ckr .faq-grid { gap: 1.75rem; }
}

/* ── header on tablets (661–940px) ────────────────────────────────────────
   The menu links collapse into the burger at 940px, but the search kept its
   12rem cap from the 1080px rule, so the row stopped ~220px short of the right
   edge. With the links gone the search takes the free width; the phone layout
   (search on its own row) starts below 661px and is left alone. */
@media (min-width: 661px) and (max-width: 940px) {
	.ckr .hdr .search { flex: 1 1 auto; max-width: none; }
}

/* "hidden" must win over the button's own display (the read-more showed on desktop) */
.ckr [data-fold-more][hidden] { display: none !important; }

/* ═════════════ content section: photo and fact-tile layouts ═════════════
   The plain split left the heading column empty beside long copy. These give
   that column something to hold: a photo, a map, or the fact tiles. */
.ckr .cnt--media .cnt-grid,
.ckr .cnt--media_rev .cnt-grid,
.ckr .cnt--aside .cnt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ckr .cnt--media_rev .cnt-media { order: 2; }
.ckr .cnt--media .cnt-head, .ckr .cnt--media_rev .cnt-head { margin-bottom: 1.25rem; }
.ckr .cnt--aside .cnt-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.ckr .cnt--aside .cnt-head { position: sticky; top: 6.5rem; }

.ckr .cnt-media { margin: 0; }
.ckr .cnt-media img { display: block; width: 100%; height: 100%; }
.ckr .cnt-media--cover { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: var(--paper-2); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.ckr .cnt-media--cover img { object-fit: cover; }
.ckr .cnt-media--contain { aspect-ratio: 1 / 1; max-width: 34rem; }
.ckr .cnt-media--contain img { object-fit: contain; }

/* tiles in the heading column: one per row, value beside the icon */
.ckr .cnt--aside .cnt-head .cnt-tiles { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: 1.6rem; }
.ckr .cnt--aside .cnt-head .cnt-tiles > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; }
.ckr .cnt--aside .cnt-head .cnt-ic { grid-row: span 2; width: 2.6rem; height: 2.6rem; margin: 0; padding: .6rem; border-radius: 12px; background: var(--brand-wash, #EAF2FF); }
.ckr .cnt--aside .cnt-head .cnt-tiles dd { font-size: clamp(1.4rem, 2.2vw, 2rem); }

@media (max-width: 940px) {
	.ckr .cnt--media .cnt-grid,
	.ckr .cnt--media_rev .cnt-grid,
	.ckr .cnt--aside .cnt-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.ckr .cnt--media_rev .cnt-media { order: 0; }
	.ckr .cnt--aside .cnt-head { position: static; }
	.ckr .cnt-media { max-width: 36rem; width: 100%; margin-inline: auto; }
	.ckr .cnt-media--contain { max-width: 24rem; }
}
@media (max-width: 660px) {
	.ckr .cnt-media--cover { border-radius: 18px; }
	.ckr .cnt--aside .cnt-head .cnt-tiles > div { text-align: left; justify-items: start; }
	/* a map or drawing reads as a closing visual on a phone, under the text */
	.ckr .cnt-media--contain { order: 3 !important; max-width: 17rem; }
}

/* line cards: long copy is clamped on desktop too, so the four cards stay level */
@media (min-width: 661px) {
	.ckr .lc p.clamp-desk:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
	.ckr .lc .more-btn { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; padding: 0; font-size: .84rem; color: var(--brand-ink); }
	.ckr .lc--dark .more-btn { color: #2997FF; }
}

/* FAQ help column: its icons are brand blue (ckr.css), but on the blue button the mail icon follows the white label */
.ckr .faq-help .btn .i { color: currentColor; }

/* product page: calmer type. The section titles are set per section id elsewhere
   (#faq h2, #bestellen h2 …), so :is(#…) is what outranks them here. */
.ckr-pdp-page .ckr .pdp-price .price { font-size: clamp(1.45rem, 1.9vw, 1.75rem); }
.ckr-pdp-page .ckr :is(#kerncijfers, #beschrijving, #specificaties, #reviews, #voordelen, #meer, #faq, #bestellen) h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.15; }
.ckr-pdp-page .ckr :is(#beschrijving) .ckr-prose h2 { font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important; }
.ckr-pdp-page .ckr #kerncijfers dd { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
.ckr-pdp-page .ckr #kerncijfers dd span { font-size: .5em; }
@media (max-width: 660px) {
	.ckr-pdp-page .ckr :is(#kerncijfers, #beschrijving, #specificaties, #reviews, #voordelen, #meer, #faq, #bestellen) h2 { font-size: 1.35rem; }
	.ckr-pdp-page .ckr :is(#beschrijving) .ckr-prose h2 { font-size: 1.08rem !important; }
	.ckr-pdp-page .ckr #kerncijfers dd { font-size: 1.35rem; }
}

/* product page: less air between the sections, so the page is shorter to scroll */
.ckr-pdp-page .ckr .sec { padding-block: clamp(2.25rem, 3.8vw, 3.5rem); }
.ckr-pdp-page .ckr .sec--sm { padding-block: clamp(1.5rem, 2.4vw, 2.1rem); }

/* ── product page, buy box: Apple-style finish ──────────────────────────────
   plain-language option labels, softer option tiles, 8px actions (design rule 22), and the
   "complete set" note as a light card instead of a grey block */
.ckr-pdp-page .ckr .pdp-form table.variations th label, .ckr-pdp-page .ckr .pdp-form table.variations .label label { margin-bottom: .5rem; font-family: inherit; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ckr-pdp-page .ckr .opt-tiles { gap: .5rem; }
.ckr-pdp-page .ckr .opt-tiles button { min-height: 2.45rem; padding: .4rem .95rem; border-radius: 8px; font-size: .86rem; }
.ckr-pdp-page .ckr .opt-tiles button[aria-checked="true"] { border-color: #0071E3; box-shadow: inset 0 0 0 1px #0071E3; background: #fff; }
.ckr-pdp-page .ckr .pdp-form .quantity { border-radius: 8px; height: 2.9rem; }
.ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button, .ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button.button.alt { min-height: 2.9rem; font-size: .95rem; }
.ckr-pdp-page .ckr .pdp-form .quantity button:hover { background: var(--paper-2); }
.ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button, .ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button.button.alt { border-radius: 8px; background: #0071E3; border-color: #0071E3; }
.ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button:hover { background: #0077ED; border-color: #0077ED; box-shadow: none; transform: none; }
.ckr-pdp-page .ckr .pdp-form .woocommerce-variation-description { background: #fff; border-radius: 16px; font-size: .82rem; }
.ckr-pdp-page .ckr .pdp-form .woocommerce-variation-description strong { color: var(--ink); font-weight: 400; }
.ckr-pdp-page .ckr .pdp-short img { max-height: 38px; margin-right: .7rem; }
.ckr-pdp-page .ckr .pdp-keys { border-radius: 16px; }
.ckr-pdp-page .ckr .pdp-form .woocommerce-variation-description.is-clamped::after { background: linear-gradient(rgba(255,255,255,0), #fff 70%); }
/* phone: quantity and "add to cart" share one row (the button's 14rem basis made it wrap) */
@media (max-width: 660px) {
	.ckr-pdp-page .ckr .pdp-form .quantity { flex: none; width: auto; height: 2.75rem; }
	.ckr-pdp-page .ckr .pdp-form .quantity input.qty { width: 1.9rem; font-size: .92rem; }
	.ckr-pdp-page .ckr .pdp-form .quantity button, .ckr-pdp-page .ckr .pdp-form .quantity .ct-increase, .ckr-pdp-page .ckr .pdp-form .quantity .ct-decrease { width: 1.9rem; }
	/* one line on the narrowest phones too: the label never wraps, the cart icon shrinks */
	.ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button, .ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button.button.alt { flex: 1 1 0; min-width: 0; min-height: 2.75rem; gap: .35rem; padding: .5rem .8rem; font-size: .84rem; white-space: nowrap; }
	.ckr-pdp-page .ckr .pdp-form .single_add_to_cart_button::before { width: .9rem; height: .9rem; }
}

/* product title: the short line-up name large, the full shop name under it */
.ckr .pdp-title-main { display: block; }
.ckr .pdp-title-sub { display: block; margin-top: .35rem; font-family: var(--ff-b, inherit); font-size: .88rem; line-height: 1.4; letter-spacing: 0; color: var(--tx-2); }
.ckr-pdp-page .ckr .pdp-title:has(.pdp-title-main) { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
@media (max-width: 660px) { .ckr-pdp-page .ckr .pdp-title:has(.pdp-title-main) { font-size: 1.6rem; } .ckr .pdp-title-sub { font-size: .8rem; } }
/* the four key figures repeat the "In één oogopslag" band right under the buy box: shown once, in the band */
.ckr-pdp-page:has(#kerncijfers) .ckr .pdp-keys { display: none; }

/* breadcrumbs on a phone. Product page: only a back link to its category ("‹ Single Split Airco"),
   as Apple does; category pages: the trail, smaller and quieter */
@media (max-width: 660px) {
	.ckr .crumbs { gap: .15rem .3rem; font-size: .7rem; color: var(--tx-3); }
	.ckr .crumbs .crumbs-sep { width: .6rem; height: .6rem; }
	.ckr .pdp .crumbs { justify-content: flex-start; margin-bottom: .6rem; font-size: .8rem; }
	.ckr .pdp .crumbs > :not(:last-child) { display: none; }
	.ckr .pdp .crumbs > a:last-child { display: inline-flex; align-items: center; gap: .2rem; color: var(--brand-ink); }
	.ckr .pdp .crumbs > a:last-child::before { content: ""; width: .75rem; height: .75rem; background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* phone: compact option tiles, so a row of four ("Geen · 5 · 10 · 15 meter") fits on one line */
@media (max-width: 660px) {
	.ckr-pdp-page .ckr .opt-tiles { gap: .35rem; }
	.ckr-pdp-page .ckr .opt-tiles button { min-height: 2.2rem; padding: .3rem .7rem; border-radius: 8px; font-size: .8rem; }
	.ckr-pdp-page .ckr .pdp-form table.variations tr { margin-bottom: .7rem; }
	.ckr-pdp-page .ckr .pdp-form table.variations th label, .ckr-pdp-page .ckr .pdp-form table.variations .label label { margin-bottom: .35rem; font-size: .82rem; }
}

/* ── product gallery, Apple-style ───────────────────────────────────────────
   every photo is shown whole (studio shots with some air, room photos edge to edge — .is-photo,
   set by ckr-pages.js from the photo's corners); a short cross-fade between photos;
   round arrows on hover; no counter (the thumbnails say where you are); dots on phones */
.ckr .pdp-main img { transition: opacity .22s ease; }
.ckr .pdp-main img.is-swapping { opacity: 0; }
/* never cropped: a room photo only loses the breathing room a studio shot gets */
.ckr .pdp-stage.is-photo .pdp-main img { padding: 0; object-fit: contain; }
.ckr .pdp-stage.is-photo .pdp-badges .elabel { box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.ckr .pdp-nav { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; border-radius: 8px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 10px -2px rgba(0,0,0,.18); }
.ckr .pdp-count { display: none; }
.ckr .pdp-thumbs button { border-width: 1.5px; border-color: transparent; opacity: .72; transition: opacity var(--t-fast), border-color var(--t-fast); }
.ckr .pdp-thumbs button:hover { opacity: 1; }
.ckr .pdp-thumbs button[aria-current] { opacity: 1; border-color: #1D1D1F; }
.ckr .pdp-dots { display: none; }
@media (max-width: 660px) {
	.ckr .pdp-nav { display: none; }
	.ckr .pdp-thumbs { display: none; }
	.ckr .pdp-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
	.ckr .pdp-dots button { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 980px; background: #D2D2D7; transition: width var(--t), background var(--t); }
	.ckr .pdp-dots button[aria-current] { width: 1.3rem; background: #1D1D1F; }
	.ckr .pdp-dots button { position: relative; }
	.ckr .pdp-dots button::after { content: ""; position: absolute; inset: -.6rem -.25rem; } /* a finger-sized target around a small dot */
}
@media (prefers-reduced-motion: reduce) { .ckr .pdp-main img, .ckr .pdp-dots button { transition: none; } }
/* studio shots come on white or on light grey: multiplied onto the stage's grey, a white
   ground disappears into it, so no pale box shows around the product */
.ckr .pdp-stage:not(.is-photo) .pdp-main img, .ckr .pdp-thumbs [data-thumb] img { mix-blend-mode: multiply; }
.ckr .pdp-thumbs [data-thumb] { background: #F4F7F9; }


/* the video has one place: under the photos (.pdp-video). Its copy inside the description
   (heading, player, rule) is hidden then */
.ckr-pdp-page:has(.pdp-video) .ckr .pdd-body h2:has(+ div .pdd-video),
.ckr-pdp-page:has(.pdp-video) .ckr .pdd-body div:has(> div > .pdd-video),
.ckr-pdp-page:has(.pdp-video) .ckr .pdd-body div:has(> div > .pdd-video) + hr,
.ckr-pdp-page:has(.pdp-video) .ckr .pdd-body .pdd-video { display: none; }

/* ── product top. Left: photos, the video and the technical specs, one under the other,
   so the column next to the buy box is filled; on a phone or tablet the left column
   opens up (display: contents) and the order becomes photos, buy box, video, specs ── */
.ckr .pdp-left { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.ckr .pdp-left .pdp-gallery { position: static; }
.ckr .pdp-video { min-width: 0; }
.ckr .pdp-video-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .65rem; font-size: .95rem; color: var(--ink); }
.ckr .pdp-video-title .i { width: 1rem; height: 1rem; fill: currentColor; color: var(--brand-ink); }
.ckr .pdp-video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
.ckr .pdp-video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity var(--t); }
.ckr .pdp-video-frame:hover img { opacity: 1; }
.ckr iframe.pdp-video-frame { cursor: auto; }
/* the spec sheet in that column: no band, no side heading, just the sheet under a small title */
.ckr .pdp-specs-top .pds { padding: 0; background: none; border: 0; }
.ckr .pdp-specs-top .pds-grid { display: block; width: auto; max-width: none; padding: 0; }
.ckr .pdp-specs-top .pds-head { position: static; margin-bottom: .65rem; }
.ckr .pdp-specs-top .pds-head .fold { display: none; }
.ckr .pdp-specs-top .pds-head h2 { margin: 0; font-size: .95rem !important; line-height: 1.3; letter-spacing: 0; }
.ckr .pdp-specs-top .pds-head .sub { display: none; }
.ckr .pdp-specs-top .pds-sheet { border-radius: 16px; }
@media (max-width: 940px) {
	.ckr .pdp-left { display: contents; }
	.ckr .pdp-left .pdp-gallery { order: 1; }
	.ckr .pdp-grid > .pdp-buy { order: 2; }
	.ckr .pdp-left .pdp-video { order: 3; width: 100%; max-width: 40rem; margin-inline: auto; }
	.ckr .pdp-left .pdp-specs-top { order: 4; width: 100%; max-width: 40rem; margin-inline: auto; }
}

/* thumbnails show the whole photo too (they were cropped to squares) */
.ckr .pdp-thumbs button img { object-fit: contain; }

/* ── product page on a phone: one centre line. Headings, eyebrows, the price, option
   labels, the delivery note and the service list all centre; long running text stays
   left-aligned for reading, inside a centred column ──────────────────────── */
@media (max-width: 660px) {
	.ckr-pdp-page .ckr .pdp .crumbs { justify-content: center; }
	.ckr-pdp-page .ckr .fold { display: flex; justify-content: center; width: 100%; text-align: center; }
	.ckr-pdp-page .ckr .pdp-pricebox { flex-direction: column; justify-content: center; align-items: center; text-align: center; }
	.ckr-pdp-page .ckr .pdp-price { justify-content: center; }
	.ckr-pdp-page .ckr .pdp-form table.variations th, .ckr-pdp-page .ckr .pdp-form table.variations td { text-align: center; }
	.ckr-pdp-page .ckr .pdp-form .pi-edd-product, .ckr-pdp-page .ckr .pdp-form .pi-edd.pi-edd-product { justify-content: center; text-align: center; }
	.ckr-pdp-page .ckr .pdp-trust { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
	.ckr-pdp-page .ckr .pdp-trust li { justify-content: center; }
	.ckr-pdp-page .ckr .pdd-main > .fold, .ckr-pdp-page .ckr .pdd-body, .ckr-pdp-page .ckr .pdd-body :is(h2, h3, h4, p, li) { text-align: center !important; }
	.ckr-pdp-page .ckr .pdd-body :is(ul, ol) { padding-left: 0; list-style-position: inside; }
	.ckr-pdp-page .ckr .pdd-more { display: flex; margin-inline: auto; }
	.ckr-pdp-page .ckr .pdp-video-title { justify-content: center; }
	.ckr-pdp-page .ckr .pdp-specs-top .pds-head { text-align: center; }
	.ckr-pdp-page .ckr #meer .head, .ckr-pdp-page .ckr #meer h2 { justify-content: center; text-align: center; }
}
/* WPBakery's stretched row is overflow:hidden, which stops position:sticky; clip crops the same without that */
.ckr-pdp-page .vc_row:has(#kopen) { overflow: clip; }
.ckr .pdp-buy.is-riding, .ckr .pdp-left.is-riding { position: sticky; align-self: start; }

/* homepage AirDeck band: a calmer headline and a smaller product stage */
.ckr .adp h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.12; }
.ckr .adp .adp-head { max-width: 50rem; }
.ckr .adp-lead { max-width: 60ch; margin-top: .9rem; font-size: clamp(.92rem, 1.1vw, 1rem); }
.ckr .adp-stage { max-width: 60rem; margin-inline: auto; padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); border-radius: 22px; }
.ckr .adp-stage img { max-width: 300px; }
.ckr .adp-calls b { font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.ckr .adp-calls span { font-size: .78rem; }
@media (max-width: 940px) { .ckr .adp-stage img { max-width: 260px; } }

/* category page: the products follow the head closely */
.ckr .arh--hub:has(.arh-cats) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.ckr .arp:has(.pgrid--line) { padding-top: .25rem; }

/* category cards on a phone: centred like the rest of the page — name, the one spec,
   the price, and a full-width cart button under it (8px, design rule 22) */
@media (max-width: 660px) {
	.ckr .pgrid--line .pc { text-align: center; }
	.ckr .pgrid--line .pc-specs > div { align-items: center !important; }
	.ckr .pgrid--line .pc-specs dd { text-align: center !important; }
	.ckr .pgrid--line .pc-foot { flex-direction: column; align-items: stretch; gap: .45rem; }
	.ckr .pgrid--line .pc-foot > div:first-child { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
	.ckr .pgrid--line .pc-foot .price-note { order: -1; }
	.ckr .pgrid--line .pc-foot .btn--brand, .ckr .pgrid--line .pc-foot .btn--line { width: 100%; margin: 0; border-radius: 8px; }
}

/* ── category pages: the same calm type and spacing as the product page. The
   section titles are set per id elsewhere (#faq h2, #bestellen h2 …), hence :is(#…) ── */
.ckr-archive-page .ckr .sec { padding-block: clamp(2.25rem, 3.8vw, 3.5rem); }
.ckr-archive-page .ckr :is(#voordelen, #faq, #meer-info, #bestellen) h2,
.ckr-archive-page .ckr :is(#voordelen, #faq, #meer-info, #bestellen) .art-title { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.15; }
.ckr-archive-page .ckr #meer-info .ckr-prose h2 { font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important; }
.ckr-archive-page .ckr #voordelen .usp-h { max-width: 14ch; }
@media (max-width: 1080px) { .ckr-archive-page .ckr #voordelen .usp-h { margin-inline: auto; } }
@media (max-width: 660px) {
	.ckr-archive-page .ckr :is(#voordelen, #faq, #meer-info, #bestellen) h2,
	.ckr-archive-page .ckr :is(#voordelen, #faq, #meer-info, #bestellen) .art-title { font-size: 1.35rem; }
	.ckr-archive-page .ckr #meer-info .ckr-prose h2 { font-size: 1.08rem !important; }
}

/* ═══════════════ one category: black hero, switcher, compare (2026-09-25) ═══════════════
   The single-category head was a white, centred title with the products far
   below. It now opens like the homepage: a black band with the title, intro,
   the price it starts at and the way to the models on the left, the category's
   studio shot (shot on pure black, so photo and band are one surface) on the
   right, and what the range covers underneath. The overview and search keep
   their white head (.arh--hub). */
.ckr .arh--cat { position: relative; overflow: hidden; padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2.5rem, 4.4vw, 3.75rem); border: 0; }
.ckr .arh--cat::before { content: ""; position: absolute; top: 8%; right: -6%; width: min(58vw, 46rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(41, 151, 255, .13), rgba(41, 151, 255, 0) 72%); pointer-events: none; }
.ckr .arh--cat .wrap { position: relative; }
.ckr .arh--cat .crumbs { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); color: #A1A1A6; }
.ckr .arh--cat .crumbs a:last-child { color: #A1A1A6; }
.ckr .arh--cat .crumbs a:hover { color: #2997FF; }
.ckr .arh--cat .crumbs [aria-current] { color: #F5F5F7; }
.ckr .arh--cat .arh-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ckr .arh--cat .arh-title { max-width: 15ch; font-size: clamp(2.3rem, 4.3vw, 3.9rem); line-height: 1.04; letter-spacing: -.025em; color: #fff; }
.ckr .arh--cat .arh-lead { max-width: 52ch; margin-top: clamp(.9rem, 1.6vw, 1.25rem); font-size: 1.02rem; line-height: 1.65; color: #A1A1A6; }
.ckr .arh--cat .arh-lead.clamp-desk:not(.is-open) { -webkit-line-clamp: 3; }
.ckr .arh--cat .arh-copy .more-btn { color: #2997FF; }
.ckr .arh-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(1.4rem, 2.6vw, 2rem); }
.ckr .arh-price { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.ckr .arh-price .price-note { margin: 0; font-size: .75rem; color: #A1A1A6; }
.ckr .arh-price .price { font-size: clamp(1.45rem, 2vw, 1.8rem); color: #fff; }
.ckr .arh-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.ckr .arh-acts .btn { border-radius: 8px; }
.ckr .arh-acts .btn .i { width: 1rem; height: 1rem; }
.ckr .arh--cat .arh-media { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; max-height: 30rem; border: 0; border-radius: 0; background: none; overflow: visible; }
/* the studio shots are on black, but not always #000: lighten drops their ground into the band and the glow behind */
.ckr .arh--cat .arh-media img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; mix-blend-mode: lighten; }
/* what the range covers: one line per card spec, values first, hairlines between */
.ckr .arh-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.ckr .arh-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; padding: 1.2rem 1.25rem 0; border-left: 1px solid rgba(255, 255, 255, .15); }
.ckr .arh-facts > div:first-child { padding-left: 0; border-left: 0; }
.ckr .arh-facts dd { margin: 0; font-family: var(--ff-d); font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.2; letter-spacing: -.015em; color: #fff; font-variant-numeric: tabular-nums; }
.ckr .arh-facts dt { font-family: var(--ff-m); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #A1A1A6; }

/* the category switcher, on white between the hero and the products */
.ckr .arh-sub { padding-top: clamp(1.25rem, 2.2vw, 1.75rem); background: #fff; }
.ckr .arh-sub .arh-cats { justify-content: center; gap: .4rem; margin: 0; }
.ckr .arh-sub .arh-cats a { min-height: 2.3rem; padding: .45rem 1rem; border: 0; border-radius: 8px; background: #F5F5F7; color: var(--ink); font-size: .85rem; }
.ckr .arh-sub .arh-cats a:hover { background: #E8E8ED; }
.ckr .arh-sub .arh-cats a[aria-current] { background: #1D1D1F; color: #fff; }
.ckr-archive-page .arh-sub + * { margin-top: 0; }

@media (max-width: 940px) {
	.ckr .arh--cat .arh-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.ckr .arh--cat .arh-media { order: -1; width: 100%; max-width: 26rem; max-height: none; aspect-ratio: 16 / 9; margin-inline: auto; }
	.ckr .arh--cat .arh-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.ckr .arh--cat .arh-title, .ckr .arh--cat .arh-lead { margin-inline: auto; }
	.ckr .arh--cat .arh-title { max-width: 20ch; }
	.ckr .arh-buy { flex-direction: column; justify-content: center; }
	.ckr .arh-acts { justify-content: center; }
	.ckr .arh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
	.ckr .arh-facts > div, .ckr .arh-facts > div:first-child { padding: 1rem .75rem; border-left: 0; }
	.ckr .arh-facts > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .15); }
	.ckr .arh-facts > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .15); }
	.ckr .arh-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
	.ckr .arh--cat { padding-bottom: 1.5rem; }
	.ckr .arh--cat .crumbs { margin-bottom: .75rem; }
	.ckr .arh--cat .arh-media { max-width: 18rem; }
	.ckr .arh--cat .arh-title { font-size: 1.85rem; line-height: 1.1; }
	.ckr .arh--cat .arh-lead { font-size: .92rem; }
	.ckr .arh--cat .arh-lead[data-clamp]:not(.is-open) { -webkit-line-clamp: 3; }
	.ckr .arh-buy { gap: .8rem; margin-top: 1.1rem; }
	.ckr .arh-acts .btn--lg { min-height: 2.6rem; padding: .6rem 1.1rem; font-size: .86rem; }
	.ckr .arh-facts { margin-top: 1.5rem; }
	.ckr .arh-facts dd { font-size: 1.02rem; }
	.ckr .arh-facts dt { font-size: .6rem; }
	.ckr .arh-sub { padding-top: 1rem; }
	.ckr .arh-sub .arh-cats { justify-content: flex-start; }
	.ckr .arh-sub .arh-cats a { min-height: 2.2rem; padding: .4rem .9rem; font-size: .82rem; }
}

/* ── the models side by side ─────────────────────────────────────────── */
.ckr .arx .head { margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.ckr .arx-sheet { border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; }
.ckr .arx-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ckr .arx-table { width: 100%; min-width: calc(11rem + var(--m, 3) * 10rem); border-collapse: collapse; table-layout: fixed; font-size: .88rem; line-height: 1.4; }
.ckr .arx-table th, .ckr .arx-table td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--mist); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.ckr .arx-table tbody th, .ckr .arx-table thead td, .ckr .arx-table tfoot td:first-child { position: sticky; left: 0; z-index: 1; width: 30%; background: #fff; text-align: left; font-weight: 400; color: var(--tx-2); }
.ckr .arx-table tbody td { color: var(--ink); }
.ckr .arx-table tbody tr:hover > * { background: #FAFAFC; }
.ckr .arx-table tbody tr[hidden] { display: none; }
.ckr .arx-table thead th { padding: 1.4rem 1rem 1rem; font-weight: 400; }
.ckr .arx-model { display: flex; flex-direction: column; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.ckr .arx-img { position: relative; display: block; width: 100%; max-width: 13rem; aspect-ratio: 16 / 9; padding: .9rem 1.1rem; border-radius: 14px; background: #F4F7F9; overflow: hidden; }
/* a percentage height does not resolve against an aspect-ratio box, so a square
   photo grew past it onto the model name: the photo fills the box instead */
.ckr .arx-img img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: none; padding: inherit; object-fit: contain; }
.ckr .arx-name { font-family: var(--ff-d); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.2; letter-spacing: -.012em; }
.ckr .arx-model:hover .arx-name { color: var(--brand-ink); }
.ckr .arx-price td { font-family: var(--ff-d); font-size: 1.1rem; color: var(--ink); }
.ckr .arx-table tfoot td { padding: 1rem; border-bottom: 0; }
.ckr .arx-table tfoot .btn { border-radius: 8px; }
.ckr .arx-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: .4rem; padding: .95rem; border: 0; border-top: 1px solid var(--mist); background: #fff; color: var(--brand-ink); font-size: .9rem; cursor: pointer; }
.ckr .arx-more:hover { background: var(--paper-2); }
.ckr .arx-more .i { width: .95rem; height: .95rem; }
@media (max-width: 660px) {
	.ckr .arx .head { justify-content: center; text-align: center; }
	.ckr .arx-sheet { border-radius: 18px; }
	.ckr .arx-table { min-width: calc(9.5rem + var(--m, 3) * 8.5rem); font-size: .8rem; }
	.ckr .arx-table th, .ckr .arx-table td { padding: .65rem .6rem; }
	/* long Dutch compounds ("Verwarmingscapaciteit") break at a syllable, not mid-letter */
	.ckr .arx-table tbody th, .ckr .arx-table thead td, .ckr .arx-table tfoot td:first-child { width: 9.5rem; overflow-wrap: normal; hyphens: auto; font-size: .74rem; box-shadow: 1px 0 0 var(--mist); }
	.ckr .arx-table thead th { padding: 1rem .5rem .75rem; }
	.ckr .arx-img { padding: .5rem; border-radius: 10px; }
	.ckr .arx-name { font-size: .92rem; }
	.ckr .arx-price td { font-size: .95rem; }
	.ckr .arx-table tfoot .btn span { display: none; }
}

/* ── one product in a category (AirDeck Pro, A010G, Airlock): no empty bands ──
   The card's rows were "1fr auto auto 1fr" with the specs in the last flexible
   row, so a 174px empty row sat above the name and the copy hung low beside a
   480px photo frame. A spacer row above and below now centres the copy as one
   block, and the photo frame is only as tall as that copy needs. */
@media (min-width: 661px) {
	.ckr .pgrid--solo > .pc { grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "media ." "media body" "media foot" "media specs" "media ."; align-items: start; }
	.ckr .pgrid--solo .pc-media { min-height: clamp(19rem, 27vw, 24rem); }
	/* the line-up's 8:5 photo frame (.pgrid--line) also applies here and made the frame
	   wider than its column, so the photo covered the start of the name, text and specs */
	.ckr .pgrid.pgrid--solo .pc-media { aspect-ratio: auto; width: auto; min-width: 0; max-width: 100%; }
	.ckr .pgrid--solo .pc-media img { top: 13%; left: 8%; width: 84%; height: 78%; }
	.ckr .pgrid--solo .pc-body { padding-top: 1.5rem; }
	.ckr .pgrid--solo .pc-specs { margin-bottom: 1.5rem; }
}

/* monoblock category on a phone: hero without the price and the two buttons */
@media (max-width: 660px) {
	.term-monoblock-airco-kopen-climate-king .ckr .arh-buy { display: none; }
}


/* ═════════ menu feature card, rebuilt (2026-10-07) ═════════
   The product on top, on its own black ground, the words underneath: nothing is
   written over the picture any more, so the unit is seen whole. */
.ckr .hdr .nav .sub-menu li.ckr-mm-feature > a { flex-direction: column; align-items: stretch; background: #000; }
.ckr .hdr .nav li.ckr-mm-feature > a:hover { background: #000; }
.ckr .hdr .nav li.ckr-mm-feature > a::before { display: none; }
.ckr .hdr .nav .mm-feat-media { position: relative; flex: 1 1 auto; min-height: 11rem; display: block; overflow: hidden; }
.ckr .hdr .nav .mm-feat-media .mm-feat-img { position: absolute; inset: 1.5rem .8rem 0; z-index: 0; width: calc(100% - 1.6rem); height: calc(100% - 1.5rem); object-fit: contain; object-position: center; }
.ckr .hdr .nav li.ckr-mm-feature > a:hover .mm-feat-img { transform: scale(1.03); }
.ckr .hdr .nav .mm-feat-body { flex: none; padding-top: .7rem; background: #000; }
.ckr .hdr .nav li.ckr-mm-feature .nav-badge { z-index: 1; top: .8rem; left: .8rem; }

@media (max-width: 940px) {
	.ckr .hdr.is-open .nav .mm-feat-media { display: none; }

	/* Phone menu, shorter (2026-10-07, the user: "mobile mein menu bohat bara"):
	   under "Producten bestellen" only the categories, one row each. The single
	   products, their specs and prices stay on the category pages. */
	.ckr .hdr.is-open .nav li.ckr-mm-prod,
	.ckr .hdr.is-open .nav li.ckr-mm-feature { display: none; }
	.ckr .hdr.is-open .nav li.ckr-mm-col { margin-top: 0; }
	.ckr .hdr.is-open .nav li.ckr-mm-col > a,
	.ckr .hdr.is-open .nav li.ckr-mm-sub > a { display: flex; align-items: center; gap: .55rem; padding: .7rem .5rem .7rem .9rem; font-family: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); margin: 0; }
	.ckr .hdr.is-open .nav li.ckr-mm-sub > a::before { content: ""; width: .42rem; height: .42rem; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
	.ckr .hdr.is-open .nav li.ckr-mm-col > .sub-menu { display: block; }
	.ckr .hdr.is-open .nav li.ckr-mm-col > .sub-menu:not(:has(li.ckr-mm-sub)) { display: none; }
	.ckr .hdr.is-open .nav li.ckr-mm-sub { margin: 0; padding: 0; border: 0; }
	.ckr .hdr.is-open .nav .mm-foot { margin: 0; padding: .7rem .5rem .7rem .9rem; border: 0; }
}

/* ── hero video: "prototype" label on the outdoor unit ───────────────────
   ckr.js moves .hero-tag onto the unit every frame and sets .is-on while the
   unit is on screen. The look borrows from the video itself — a glowing
   blueprint dot and leader line — and from the site's eyebrow (Anta caps
   with the orange triangle), so it reads as part of the film. */
.ckr .hero-tag { --tag-line: 3.2rem; --glow: 127, 211, 255; position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; pointer-events: none; will-change: transform; }
.ckr .hero-tag-dot { position: absolute; left: -.3rem; top: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 2px rgba(var(--glow), .5), 0 0 14px 3px rgba(var(--glow), .75); transform: scale(0); transition: transform .25s ease-in; }
.ckr .hero-tag-dot::after { content: ""; position: absolute; inset: -.35rem; border-radius: 50%; border: 1px solid rgba(var(--glow), .85); opacity: 0; }
.ckr .hero-tag.is-on .hero-tag-dot { transform: scale(1); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.ckr .hero-tag.is-on .hero-tag-dot::after { animation: heroTagPing 1.9s .5s ease-out infinite; }
@keyframes heroTagPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

.ckr .hero-tag-line { position: absolute; left: -.5px; width: 1px; height: var(--tag-line); bottom: .45rem; transform-origin: 50% 100%;
	background: linear-gradient(to top, rgba(var(--glow), .95), rgba(255, 255, 255, .25)); box-shadow: 0 0 6px rgba(var(--glow), .55);
	transform: scaleY(0); transition: transform .2s ease-in; }
.ckr .hero-tag.is-on .hero-tag-line { transform: scaleY(1); transition: transform .4s .15s cubic-bezier(.2, .7, .2, 1); }

.ckr .hero-tag-label { position: absolute; left: 0; bottom: calc(var(--tag-line) + .8rem); display: inline-flex; align-items: center; gap: .55rem; transform: translateX(-50%);
	white-space: nowrap; font-family: Anta, var(--ff-d); font-weight: 400; font-size: 1.05rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #fff;
	text-shadow: 0 0 16px rgba(var(--glow), .55), 0 1px 3px rgba(0, 0, 0, .85); }
/* the site's eyebrow triangle */
.ckr .hero-tag-label::before { content: ""; width: .65rem; height: .65rem; flex: none; background: var(--accent, #FF9F0A); clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transform: scale(0) rotate(-90deg); transition: transform .2s ease-in; }
.ckr .hero-tag.is-on .hero-tag-label::before { transform: none; transition: transform .45s .3s cubic-bezier(.3, 1.6, .5, 1); }
/* letters resolve one by one out of a blur, like the video's own hologram turning solid */
.ckr .hero-tag-txt > span { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(6px); transition: opacity .18s ease-in, transform .18s ease-in, filter .18s ease-in; }
.ckr .hero-tag.is-on .hero-tag-txt > span { opacity: 1; transform: none; filter: blur(0);
	transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1), filter .5s ease-out; transition-delay: calc(.4s + var(--i) * .035s); }

/* the close-up: the unit touches the top of the frame, so the label hangs below it */
.ckr .hero-tag[data-dir="down"] .hero-tag-line { bottom: auto; top: .45rem; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(var(--glow), .95), rgba(255, 255, 255, .25)); }
.ckr .hero-tag[data-dir="down"] .hero-tag-label { bottom: auto; top: calc(var(--tag-line) + .8rem); }
.ckr .hero-tag[data-dir="down"] { --tag-line: 5.5rem; }
.ckr .hero-tag[data-align="end"] .hero-tag-label { transform: translateX(calc(-100% + .35rem)); }

@media (max-width: 760px) {
	.ckr .hero-tag { --tag-line: 1.8rem; }
	.ckr .hero-tag[data-dir="down"] { --tag-line: 2.6rem; }
	.ckr .hero-tag-label { font-size: .74rem; gap: .4rem; letter-spacing: .13em; }
	.ckr .hero-tag-label::before { width: .5rem; height: .5rem; }
}

/* product cards are squarish: a 4:3 photo area in which the photo is always
   shown whole, the model name, two specs, and price and button on one row. The
   SKU line, the description and the other specs are on the product page. The
   single-product card keeps its own layout. */
.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-media { aspect-ratio: 4 / 3; }
.ckr .pgrid--line .pc-media { aspect-ratio: 16 / 10; height: auto; }
/* a line-up of several models shows each photo in a square frame, as the shop
   cards on the home page do: the trimmed split unit (about 5:2) filled a wide
   strip edge to edge. The product is fitted whole inside the square, with the
   margin the home page's square photos have (padding % is of the frame's width,
   75% of it is the frame's height); one-product cards keep their own frame. */
.ckr .pgrid--line:not(.pgrid--solo) .pc-media { aspect-ratio: 4 / 3; }
.ckr .pgrid--line:not(.pgrid--solo) .pc-media img { position: absolute; inset: auto; bottom: .9rem; left: 50%; translate: -50% 0; width: auto; max-width: none; height: calc(100% - 3.6rem); aspect-ratio: 1 / 1; padding: calc((75% - 3.6rem) * .13); object-fit: contain; }
@media (max-width: 660px) {
	.ckr .pgrid--line:not(.pgrid--solo) .pc-media img { bottom: .5rem; height: calc(100% - 2.2rem); padding: calc((75% - 2.2rem) * .13); }
}
/* the one-product card keeps its large photo, in a square frame too: as tall as
   before, centred, and so never wider than it was (the 1.1.62 overlap stays fixed) */
.ckr .pgrid.pgrid--solo .pc-media img { left: 50%; translate: -50% 0; width: auto; max-width: 84%; aspect-ratio: 1 / 1; object-fit: contain; }
.ckr .pgrid:not(.pgrid--solo) .pc-code,
.ckr .pgrid:not(.pgrid--solo) .pc-sub { display: none; }
.ckr .pgrid:not(.pgrid--solo) .pc-specs > div:nth-child(n+3) { display: none; }
@media (min-width: 661px) {
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-foot .btn { width: auto; margin-left: auto; padding-inline: .6rem; }
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-foot .price { font-size: 1.1rem; }
	/* every card keeps room for a two-line name and two-line spec values, so
	   the spec row and the price row sit on one line across a row of cards */
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; min-height: 2.4em; }
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-specs dd { line-height: 1.3; min-height: 2.6em; }
}
@media (max-width: 660px) {
	.ckr .pgrid:not(.pgrid--solo) .pc-specs { display: none; }
	/* the photo kept a square box of its own and was cut by the shorter frame */
	.ckr .pgrid:not(.pgrid--solo):not(.pgrid--line) .pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}

/* ── product page: the product's own reviews above the shop carousel ──────── */
.ckr #reviews .prv { margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line-2, var(--line)); }
.ckr #reviews .prv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.1rem; }
.ckr #reviews .prv-head h3 { margin: 0; font-family: var(--ff-d); font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); }
.ckr #reviews .prv-sum { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--tx-2, var(--slate)); font-size: .88rem; }
.ckr #reviews .prv-sum b { font-family: var(--ff-d); font-size: 1.5rem; color: var(--ink); }
.ckr #reviews .prv-empty { margin: 0; max-width: 60ch; color: var(--tx); }
.ckr #reviews .prv .stars .i { width: 1rem; height: 1rem; }
.ckr #reviews .prv-off .i { opacity: .2; }
.ckr #reviews .prv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.ckr #reviews .prv-list .rev { min-height: 0; }
.ckr #reviews .prv-list .rev blockquote p { margin: 0; }
.ckr #reviews .prv-list .rev-by small { margin-left: auto; color: var(--slate); font-size: .74rem; white-space: nowrap; }
.ckr #reviews .prv-list:not(.is-all) .rev.is-extra { display: none; }
.ckr #reviews .prv-more { margin-top: 1rem; }
.ckr #reviews .prv-thanks { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--ok-wash); color: var(--ok); font-weight: 600; }
.ckr #reviews .prv-note { margin: 1rem 0 0; color: var(--slate); font-size: .88rem; }
.ckr #reviews .prv-write { margin-top: 1.25rem; }
.ckr #reviews .prv-write > summary { display: inline-flex; list-style: none; cursor: pointer; }
.ckr #reviews .prv-write > summary::-webkit-details-marker { display: none; }
.ckr #reviews .prv-write[open] > summary { display: none; }
.ckr #reviews .prv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.ckr #reviews .prv-rate, .ckr #reviews .prv-fld--full, .ckr #reviews .prv-form > .btn { grid-column: 1 / -1; }
.ckr #reviews .prv-form > .btn { justify-self: start; }
.ckr #reviews .prv-rate { margin: 0; padding: 0; border: 0; }
.ckr #reviews .prv-rate legend, .ckr #reviews .prv-fld > span { display: block; margin-bottom: .4rem; font-size: .84rem; font-weight: 600; color: var(--ink); }
.ckr #reviews .prv-fld small { font-weight: 400; color: var(--slate); }
.ckr #reviews .prv-fld :is(input, textarea) { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: inherit; color: var(--ink); }
.ckr #reviews .prv-fld :is(input, textarea):focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
/* five stars, filled up to the hovered or chosen one (row reversed so ~ reaches the lower ones) */
.ckr #reviews .prv-stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.ckr #reviews .prv-stars input { position: absolute; opacity: 0; pointer-events: none; }
.ckr #reviews .prv-stars label { cursor: pointer; color: var(--line); transition: color .15s, transform .15s; }
.ckr #reviews .prv-stars label .i { width: 1.7rem; height: 1.7rem; }
.ckr #reviews .prv-stars label:hover, .ckr #reviews .prv-stars label:hover ~ label,
.ckr #reviews .prv-stars input:checked ~ label { color: var(--accent); }
.ckr #reviews .prv-stars label:hover .i, .ckr #reviews .prv-stars label:hover ~ label .i,
.ckr #reviews .prv-stars input:checked ~ label .i, .ckr #reviews .prv .stars .i { fill: currentColor; }
.ckr #reviews .prv-stars label:hover { transform: scale(1.12); }
.ckr #reviews .prv-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 660px) { .ckr #reviews .prv-form { grid-template-columns: minmax(0, 1fr); } }


/* ───────────────────────── blog: posts and the posts page (includes/blog.php) ───────────────────────── */

.ckr-post .pst-head { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.ckr-post .pst-head-in { max-width: calc(52rem + var(--pad) * 2); }
.ckr-post .pst-head--list .pst-head-in { max-width: var(--maxw); }
.ckr-post .pst-head .crumbs { justify-content: flex-start; }
.ckr-post .pst-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0 0 .9rem; font-family: var(--ff-m); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); }
.ckr-post .pst-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: .9rem; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .6; }
.ckr-post .pst-meta .pst-cat::before, .ckr-post .pst-meta .pst-cat + *::before { display: none; }
.ckr-post .pst-cat { display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px; background: var(--ink); color: #fff; letter-spacing: .04em; text-decoration: none; }
.ckr-post a.pst-cat:hover { background: var(--brand); }
.ckr-post .pst-title { margin: 0; font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ckr-post .pst-lead { max-width: 42rem; margin: 1rem 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--tx-2); }
.ckr-post .pst-hero { max-width: calc(52rem + var(--pad) * 2); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ckr-post .pst-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl, 20px); }

/* the article: one reading column; WPBakery's rows and columns sit inside it */
.ckr-post .pst-body { padding-block: clamp(2rem, 4vw, 3.5rem); }
.ckr-post .pst-content { max-width: 52rem; margin-inline: auto; color: var(--tx); font-size: 1.05rem; line-height: 1.75; }
.ckr-post .pst-content > :first-child, .ckr-post .pst-content .vc_row:first-child .wpb_wrapper > :first-child { margin-top: 0; }
.ckr-post .pst-content :where(h2, h3, h4) { font-family: var(--ff-d); font-weight: 400; color: var(--ink); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.ckr-post .pst-content :where(h2) { margin: 2.2em 0 .6em; font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.ckr-post .pst-content :where(h3) { margin: 1.8em 0 .5em; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.ckr-post .pst-content :where(h4) { margin: 1.5em 0 .4em; font-size: 1.1rem; }
.ckr-post .pst-content :where(p) { margin: 0 0 1.1em; }
.ckr-post .pst-content :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.3em; }
.ckr-post .pst-content ul:not([class]) { list-style: disc; }
.ckr-post .pst-content ol:not([class]) { list-style: decimal; }
.ckr-post .pst-content :where(li) { margin: 0 0 .45em; }
.ckr-post .pst-content :where(li)::marker { color: var(--brand); }
.ckr-post .pst-content :where(strong, b) { color: var(--ink); font-weight: 600; }
.ckr-post .pst-content :where(a:not(.vc_btn3):not(.btn)) { color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-line, rgba(0,113,227,.35)); text-underline-offset: 3px; }
.ckr-post .pst-content :where(a:not(.vc_btn3):not(.btn)):hover { text-decoration-color: currentColor; }
.ckr-post .pst-content :where(img) { max-width: 100%; height: auto; border-radius: var(--r-lg, 14px); }
.ckr-post .pst-content :where(blockquote) { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--brand); color: var(--ink); font-size: 1.1rem; }
.ckr-post .pst-content :where(table) { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: .95rem; }
.ckr-post .pst-content :where(th, td) { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ckr-post .pst-content :where(th) { color: var(--ink); font-weight: 600; background: var(--paper-2); }
.ckr-post .pst-content :where(hr) { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.ckr-post .pst-content .wpb_content_element, .ckr-post .pst-content .vc_custom_heading { margin-bottom: 1.1em; }
/* a builder heading keeps its size and colour, in the site's typeface */
.ckr-post .pst-content .vc_custom_heading { font-family: var(--ff-d) !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.2; }
.ckr-post .pst-content .wpb_single_image img { border-radius: var(--r-lg, 14px); }
/* a row stretched with its content ("no spaces") keeps its band full width, but its
   text stays in the reading column */
.ckr-post .pst-content .vc_row[data-vc-stretch-content] > .vc_col-sm-12 { float: none; max-width: 52rem; margin-inline: auto; padding-inline: var(--pad); }
/* WPBakery's buttons in the site's button style */
.ckr-post .pst-content .vc_btn3 { display: inline-flex !important; align-items: center; gap: .5rem; padding: .85rem 1.4rem !important; border: 0 !important; border-radius: 8px !important; background: var(--brand) !important; background-image: none !important; box-shadow: none !important; color: #fff !important; font-family: inherit !important; font-size: .95rem !important; line-height: 1.2 !important; text-decoration: none !important; transition: background .2s, transform .2s; }
.ckr-post .pst-content .vc_btn3:hover { background: var(--brand-press, #0062C4) !important; transform: translateY(-1px); }
.ckr-post .pst-content .vc_btn3 .vc_btn3-icon { position: static !important; margin: 0 !important; }
/* WPBakery's toggles as the site's FAQ rows */
.ckr-post .pst-content .vc_toggle { margin: 0 !important; padding: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.ckr-post .pst-content .vc_toggle:first-of-type { border-top: 1px solid var(--line); }
.ckr-post .pst-content .vc_toggle_title { position: relative; padding: 1.05rem 2.4rem 1.05rem 0 !important; cursor: pointer; }
.ckr-post .pst-content .vc_toggle_title > h4, .ckr-post .pst-content .vc_toggle_title > h3 { margin: 0 !important; font-family: var(--ff-d); font-size: 1.05rem !important; font-weight: 400; color: var(--ink); }
.ckr-post .pst-content .vc_toggle_icon { position: absolute !important; left: auto !important; right: .3rem; top: 50% !important; margin-top: -.5rem !important; width: 1rem !important; height: 1rem !important; border: 0 !important; background: none !important; }
.ckr-post .pst-content .vc_toggle_icon::before, .ckr-post .pst-content .vc_toggle_icon::after { content: "" !important; position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; width: auto !important; height: 2px !important; margin: -1px 0 0 !important; border: 0 !important; background: var(--ink) !important; transition: transform .2s; }
.ckr-post .pst-content .vc_toggle_icon::before { transform: none !important; }
.ckr-post .pst-content .vc_toggle_icon::after { transform: rotate(90deg) !important; transform-origin: 50% 50% !important; }
.ckr-post .pst-content .vc_toggle_active .vc_toggle_icon::after { transform: rotate(0) !important; }
.ckr-post .pst-content .vc_toggle_content { margin: 0 !important; padding: 0 0 1.1rem !important; color: var(--tx); }

/* the call to the shop after the article */
.ckr-post .pst-cta-sec { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.ckr-post .pst-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; max-width: 52rem; margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-xl, 20px); background: #000; color: #fff; }
.ckr-post .pst-cta-h { margin: 0 0 .35rem; font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; color: #fff; }
.ckr-post .pst-cta-p { margin: 0; max-width: 30rem; color: #A1A1A6; line-height: 1.55; }
.ckr-post .pst-cta-acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* article cards: the posts page and "Meer artikelen" */
.ckr-post .pst-more-h { margin: 0 0 1.5rem; font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--ink); }
.ckr-post .pst-list { padding-block: clamp(2rem, 4vw, 3.5rem); }
.ckr-post .pst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ckr-post .pst-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl, 20px); background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s; }
.ckr-post .pst-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2), 0 18px 34px -24px rgba(0,0,0,.35); }
.ckr-post .pst-card-media { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tile, #F4F7F9); }
.ckr-post .pst-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ckr-post .pst-card:hover .pst-card-img { transform: scale(1.03); }
.ckr-post .pst-card-mark { font-family: var(--ff-d); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--line-3, #C7C7CC); }
.ckr-post .pst-card-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 1.15rem 1.25rem 1.3rem; overflow-wrap: anywhere; }
.ckr-post .pst-card .pst-meta { margin-bottom: .6rem; font-size: .68rem; }
.ckr-post .pst-card-title { margin: 0; font-family: var(--ff-d); font-weight: 400; font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.ckr-post .pst-card-title a { color: inherit; text-decoration: none; }
.ckr-post .pst-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ckr-post .pst-card-sum { display: -webkit-box; margin: .55rem 0 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: .9rem; line-height: 1.55; color: var(--tx-2); }
.ckr-post .pst-card-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: 1rem; font-size: .88rem; color: var(--brand-ink); }
.ckr-post .pst-card-more .i { width: 1rem; height: 1rem; transition: transform .2s; }
.ckr-post .pst-card:hover .pst-card-more .i { transform: translateX(3px); }
.ckr-post .pst-empty { margin: 0; color: var(--tx-2); }
.ckr-post .pst-pages { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.ckr-post .pst-pages ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ckr-post .pst-pages :where(a, span) { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border-radius: 8px; background: var(--paper-2); color: var(--ink); text-decoration: none; }
.ckr-post .pst-pages .current { background: var(--ink); color: #fff; }
.ckr-post .pst-pages a:hover { background: #E8E8ED; }

@media (max-width: 960px) {
	.ckr-post .pst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
	.ckr-post .pst-grid { grid-template-columns: minmax(0, 1fr); }
	.ckr-post .pst-content { font-size: 1rem; }
	.ckr-post .pst-cta-acts, .ckr-post .pst-cta-acts .btn { width: 100%; justify-content: center; }
}

/* [ckr_blog_latest] — newest articles on the homepage */
.ckr-post .pst-latest .head--bar > div { max-width: 46rem; }
.ckr-post .pst-latest .head--bar h2 { margin-top: .7rem; }
.ckr-post .pst-latest-lead { margin-top: .65rem; font-size: 1rem; line-height: 1.6; color: var(--tx-2); }
.ckr-post .pst-latest-all { flex: 0 0 auto; }
@media (max-width: 660px) {
	.ckr-post .pst-latest .head--bar { flex-direction: column; align-items: flex-start; }
}
/* three or more: a slider (four in view) or a grid of four across */
.ckr-post .pst-latest-side { display: flex; align-items: center; gap: 1rem; }
.ckr-post .rv-btn[data-pst="-1"] .i { transform: rotate(90deg); }
.ckr-post .rv-btn[data-pst="1"] .i { transform: rotate(-90deg); }
.ckr-post .pst-grid--slider { display: flex; gap: clamp(1rem, 2vw, 1.5rem); margin: 0 -.2rem; padding: .2rem .2rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.ckr-post .pst-grid--slider::-webkit-scrollbar { display: none; }
.ckr-post .pst-grid--slider { scroll-padding-inline: .2rem; }
.ckr-post .pst-grid--slider > .pst-card { flex: 0 0 calc((100% - 3 * clamp(1rem, 2vw, 1.5rem)) / 4); scroll-snap-align: start; }
@media (max-width: 1200px) {
	.ckr-post .pst-grid--slider > .pst-card { flex-basis: calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3); }
}
.ckr-post .pst-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
	.ckr-post .pst-grid--slider > .pst-card { flex-basis: calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2); }
	.ckr-post .pst-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
	.ckr-post .pst-grid--slider > .pst-card { flex-basis: 86%; }
	.ckr-post .pst-grid--four { grid-template-columns: minmax(0, 1fr); }
	.ckr-post .pst-latest-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; } /* .ckr .rv-side stacks on phones (reviews) */
}

/* articles laid out in WPBakery (.pst--wpb, templates/single-post.php):
   the look the Black Friday article carried in a raw-HTML style block, now
   here so every post and every language gets it without CSS in the post */
.ckr-post.pst--wpb .pst-content { max-width: none; }
.ckr-post.pst--wpb .pst-head-in { max-width: var(--maxw); }
/* inner rows keep WPBakery's -15px gutter, so their columns' content (FAQ, two-column
   text) lines up with the headings above; a row's own Design Options margin still wins */
.ckr-post.pst--wpb .pst-content .vc_row.vc_inner:not(.vc_row-has-fill) { margin-inline: -15px; }
/* an inner row with a background is a box: room inside, rounded corners, a gap below.
   Defaults only (no !important), so padding or corners set in its Design Options win */
.ckr-post.pst--wpb .pst-content .vc_row.vc_inner.vc_row-has-fill { margin: 0 0 1.5rem; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(.5rem, 2vw, 1.5rem); border-radius: 8px; }
.ckr-post.pst--wpb .pst-content .vc_row.vc_inner.vc_row-has-fill > .wpb_column > .vc_column-inner { padding: 0 15px; }
.ckr-post.pst--wpb .pst-content .vc_row.vc_inner.vc_row-has-fill .wpb_wrapper > :first-child { margin-top: 0; }
/* every band runs edge to edge; its content sits in the page width with the
   page gutter, whichever WPBakery stretch mode the row uses */
.ckr-post.pst--wpb .pst-content .vc_row[data-vc-stretch-content] > .vc_col-sm-12 { max-width: none; margin-inline: 0; padding-inline: 0; }
.ckr-post.pst--wpb .pst-content .vc_row:not(.vc_inner) > .wpb_column > .vc_column-inner,
.ckr-post.pst--wpb .pst-content .vc_row:not(.vc_inner) > .vc_element > .wpb_column > .vc_column-inner { max-width: var(--maxw, 1280px) !important; margin-inline: auto !important; padding-inline: var(--pad, 16px) !important; }
.ckr-post.pst--wpb .pst-content .vc_custom_wtcta { background-color: #000 !important; }
.ckr-post.pst--wpb .pst-content .vc_toggle_title h4 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.45 !important; color: #1D2327 !important; }
.ckr-post.pst--wpb .pst-content .vc_toggle_icon::before { transform: none !important; }
.ckr-post.pst--wpb .pst-content .vc_toggle_icon::after { transform: rotate(90deg) !important; transform-origin: 50% 50% !important; }
.ckr-post.pst--wpb .pst-content .vc_toggle_active .vc_toggle_icon::after { transform: rotate(0) !important; }
.ckr-post.pst--wpb .pst-content .vc_message_box { background-color: #FFF6E9 !important; color: #1D2327 !important; border: 1px solid #F59E0B !important; }
.ckr-post.pst--wpb .pst-content .vc_message_box .vc_message_box-icon { color: #F59E0B !important; background: transparent !important; }
.ckr-post.pst--wpb .pst-content .vc_message_box :is(p, strong) { color: #1D2327 !important; }
.ckr-post.pst--wpb .pst-content .wpb_raw_html.ck-css { display: none !important; }
.ckr-post.pst--wpb .pst-content .ck-fill-img img { border-radius: 8px !important; }
.ckr-post.pst--wpb .pst-content .ck-banner-img { margin-bottom: 20px !important; }
.ckr-post.pst--wpb .pst-content .ck-banner-img :is(figure, .vc_single_image-wrapper) { display: block; width: 100%; }
.ckr-post.pst--wpb .pst-content .ck-banner-img img { display: block; width: 100% !important; max-width: none; height: 340px !important; object-fit: cover; object-position: center 60%; border-radius: 8px !important; }
@media (min-width: 768px) {
	.ckr-post.pst--wpb .pst-content .vc_column-inner:has(.ck-fill-img) > .wpb_wrapper { height: 100%; }
	.ckr-post.pst--wpb .pst-content .ck-fill-img { position: relative; height: 100%; min-height: 260px; margin-bottom: 0 !important; }
	.ckr-post.pst--wpb .pst-content .ck-fill-img :is(figure, .vc_single_image-wrapper) { display: block; }
	.ckr-post.pst--wpb .pst-content .ck-fill-img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
}
@media (max-width: 781px) {
	.ckr-post.pst--wpb .pst-content,
	.ckr-post.pst--wpb .pst-content :is(h2, h3, p, li, strong, .vc_btn3-container, .vc_message_box) { text-align: center !important; }
	.ckr-post.pst--wpb .pst-content ul { list-style: none !important; padding-left: 0 !important; }
	.ckr-post.pst--wpb .pst-content h2 { font-size: 24px !important; line-height: 1.25 !important; }
	.ckr-post.pst--wpb .pst-content .vc_custom_wtcta { margin-inline: calc(-1 * var(--pad, 16px)) !important; padding: 32px 20px !important; border-radius: 0 !important; }
	.ckr-post.pst--wpb .pst-content .vc_custom_wtcta > .wpb_column > .vc_column-inner { padding-top: 0 !important; }
	.ckr-post.pst--wpb .pst-content :is(.vc_toggle, .vc_toggle_title, .vc_toggle_title h4, .vc_toggle_content, .vc_toggle_content p, .vc_toggle_content li) { text-align: left !important; }
	.ckr-post.pst--wpb .pst-content .vc_toggle_title h4 { font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; }
	.ckr-post.pst--wpb .pst-content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .vc_toggle) { padding-block: 0 !important; }
}
@media (max-width: 767px) {
	.ckr-post.pst--wpb .pst-content .ck-banner-img img { height: 200px !important; }
}