/**
 * Oliekampioen theme styles.
 *
 * Opbouw:
 *   1. Fonts
 *   2. Design tokens
 *   3. Bootstrap-overrides
 *   4. Basis
 *   5. Utilities
 *   6. Buttons
 *   7. Header
 *   8. Navigatie
 *   9. Mobiel offcanvas menu
 *  10. Footer
 *  11. Terug naar boven
 *  12. Responsive
 *  13. Homepage en WooCommerce views
 *
 * Tokens komen uit specs/styles.md. Kleuren die daar niet in staan maar wel uit
 * de screenshots blijken, zijn als aparte token opgenomen met een bronvermelding.
 */

/* ==========================================================================
   1. Fonts
   ========================================================================== */

/*
 * Palanquin Dark is uitsluitend de kopfont. Bodytekst gebruikt de systeemstack,
 * dus alleen de gewichten die daadwerkelijk in kopteksten en display-UI
 * voorkomen zijn geladen: 600 en 700.
 */

@font-face {
	font-family: 'Palanquin Dark';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/palanquindark-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Palanquin Dark';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/palanquindark-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Palanquin Dark';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/palanquindark-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Palanquin Dark';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/palanquindark-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
	/* Kleuren — bron: specs/styles.md */
	--okp-heading: #242424;
	--okp-text: #777777;
	--okp-primary: #ef7818;
	--okp-secondary: #fbbc34;
	--okp-page-bg: #f8f8f8;
	--okp-archive-bg: #ffffff;
	--okp-green: #548162;
	--okp-dark-blue: #002351;
	--okp-light-blue: #024b90;
	--okp-link: #333333;
	--okp-success: #459647;
	--okp-warning: #e0b252;

	/* Afgeleide kleuren — bron: screenshots, niet in styles.md */
	--okp-primary-dark: #d2650c;
	--mainnav-bg: #024b90;
	--okp-border: #e5e5e5;
	--okp-white: #ffffff;

	/* Spacing — bron: specs/styles.md */
	--okp-space-1: 4px;
	--okp-space-2: 8px;
	--okp-space-3: 16px;
	--okp-space-4: 32px;
	--okp-space-5: 64px;

	/* Radius — bron: specs/styles.md. De pill-radius is een uitzondering die
	   alleen voor de zoekbalk geldt, zoals zichtbaar in de header-screenshots. */
	--okp-radius: 0;
	--okp-radius-btn: 5px;
	--okp-radius-pill: 999px;

	/* Layout — containerbreedte afgeleid uit de 1920px desktop-screenshots,
	   waar de content van 160px tot 1760px loopt. */
	--okp-container: 1600px;

	/*
	 * Typografie. Palanquin Dark is de kopfont en wordt alleen op kopteksten en
	 * display-UI (navigatie, menu's, knoppen, tabs) toegepast. Bodytekst draait
	 * op de systeemstack: dat scheelt een webfont-download op de kritieke
	 * renderpath en leest op elk platform natuurlijk.
	 */
	--okp-font-heading: 'Palanquin Dark', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--okp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}


/*** wp override***/
h1.entry__title {
    display: none;
}

/* ==========================================================================
   3. Bootstrap-overrides
   ========================================================================== */

:root {
	--bs-body-font-family: var(--okp-font-body);
	--bs-body-color: var(--okp-text);
	--bs-body-bg: var(--okp-page-bg);
	--bs-heading-color: var(--okp-heading);
	--bs-primary: var(--okp-primary);
	--bs-primary-rgb: 239, 120, 24;
	--bs-link-color: var(--okp-link);
	--bs-link-hover-color: var(--okp-primary);
	--bs-border-radius: var(--okp-radius);
	--bs-border-color: var(--okp-border);
}

/* Bootstrap compileert de knopkleuren naar literals, dus die moeten los
   overschreven worden om de merkkleuren te laten doorwerken op plugin-output
   (WooCommerce, formulieren) die .btn-primary gebruikt. */
.btn-primary {
	--bs-btn-bg: var(--okp-primary);
	--bs-btn-border-color: var(--okp-primary);
	--bs-btn-hover-bg: var(--okp-primary-dark);
	--bs-btn-hover-border-color: var(--okp-primary-dark);
	--bs-btn-active-bg: var(--okp-primary-dark);
	--bs-btn-active-border-color: var(--okp-primary-dark);
	--bs-btn-disabled-bg: var(--okp-primary);
	--bs-btn-disabled-border-color: var(--okp-primary);
	--bs-btn-border-radius: var(--okp-radius-btn);
}

.btn-secondary {
	--bs-btn-bg: var(--okp-light-blue);
	--bs-btn-border-color: var(--okp-light-blue);
	--bs-btn-hover-bg: var(--okp-dark-blue);
	--bs-btn-hover-border-color: var(--okp-dark-blue);
	--bs-btn-border-radius: var(--okp-radius-btn);
}

.btn-success {
	--bs-btn-bg: var(--okp-green);
	--bs-btn-border-color: var(--okp-green);
	--bs-btn-border-radius: var(--okp-radius-btn);
}

/*
 * Bootstrap's Reboot zet :root { scroll-behavior: smooth } binnen
 * prefers-reduced-motion: no-preference. Daardoor animeert élke scroll: elke
 * ankerlink, elke scroll-into-view bij het focussen van een element en het
 * herstellen van de scrollpositie bij terugnavigeren. Bij het openen van het
 * mobiele menu leest dat als "de pagina scrollt weg".
 *
 * Smooth scrollen blijft beschikbaar waar we het expliciet vragen — de
 * terug-naar-boven knop geeft behavior: 'smooth' mee in JS.
 */
:root {
	scroll-behavior: auto;
}

.container {
	max-width: var(--okp-container);
}

@media (min-width: 1200px) {
	.container {
		max-width: var(--okp-container);
	}
}

/* ==========================================================================
   4. Basis
   ========================================================================== */

body {
	font-family: var(--okp-font-body);
	color: var(--okp-text);
	background-color: var(--okp-page-bg);
	font-size: 16px;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--okp-font-heading);
	color: var(--okp-heading);
	font-weight: 600;
	line-height: 1.2;
}

/*
 * Display-UI die in de screenshots dezelfde merkfont als de kopteksten gebruikt:
 * hoofdnavigatie, mobiel menu, tabs en knoppen. Bodytekst, formuliervelden en
 * losse labels blijven op de systeemstack.
 */
.mainnav__link,
.mobilemenu__link,
.mobilemenu__account,
.sidemenu__tab,
.button {
	font-family: var(--okp-font-heading);
}

a {
	color: var(--okp-link);
	text-decoration: none;
}

/* a:hover,
a:focus {
	color: var(--okp-primary);
} */

img {
	max-width: 100%;
	height: auto;
}

.main {
	background-color: var(--okp-page-bg);
	min-height: 40vh;
}

.section {
	padding-block: var(--okp-space-4);
}

.page-title {
	margin-bottom: var(--okp-space-4);
}

.icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* ==========================================================================
   5. Utilities
   ========================================================================== */

/*
 * .visually-hidden komt uit Bootstrap (inclusief position: absolute via
 * :not(caption)) en wordt daarom hier niet opnieuw gedefinieerd.
 */

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--okp-space-3);
	z-index: 1080;
	padding: var(--okp-space-2) var(--okp-space-3);
	background: var(--okp-primary);
	color: var(--okp-white);
	border-radius: var(--okp-radius-btn);
	transition: top 0.15s ease-in-out;
}

.skip-link:focus {
	top: var(--okp-space-3);
	color: var(--okp-white);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--okp-space-2);
	padding: 12px var(--okp-space-4);
	border: 0;
	border-radius: var(--okp-radius-btn);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.button--primary {
	background-color: var(--okp-primary);
	color: var(--okp-white);
}

.button--primary:hover,
.button--primary:focus {
	background-color: var(--okp-primary-dark);
	color: var(--okp-white);
}

.button--dark {
	background-color: #101010;
	color: var(--okp-white);
}

.button--dark:hover,
.button--dark:focus {
	background-color: var(--okp-dark-blue);
	color: var(--okp-white);
}

.button[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.header {
	position: sticky;
	top: 0;
	z-index: 1030;
}

/* 7.1 Topbar */

.topbar {
	background-color: var(--okp-dark-blue);
	color: var(--okp-white);
	font-size: 13px;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--okp-space-4);
	min-height: 34px;
}

.topbar__usps {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--okp-space-4);
	margin: 0;
	padding: var(--okp-space-1) 0;
	list-style: none;
	flex: 1;
}

.topbar__usp {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	white-space: nowrap;
}

.topbar__check {
	color: var(--okp-primary);
}

.topbar__menu {
	display: flex;
	align-items: center;
	gap: var(--okp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar__menu li + li {
	padding-left: var(--okp-space-3);
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.topbar__menu a {
	color: var(--okp-white);
}

.topbar__menu a:hover,
.topbar__menu a:focus {
	color: var(--okp-secondary);
}

/* 7.2 Hoofdbalk */

.headerbar {
	background-color: var(--okp-light-blue);
	color: var(--okp-white);
}

.headerbar__inner {
	display: flex;
	align-items: center;
	gap: var(--okp-space-3);
	min-height: 84px;
	position: relative;
}

.headerbar__burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: var(--okp-space-2);
	background: none;
	border: 0;
	color: var(--okp-white);
	font-size: 11px;
	cursor: pointer;
}

.headerbar__burger-label {
	display: block;
}

.headerbar__brand {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	flex-shrink: 0;
}

.headerbar__mascot {
	display: none;
	width: auto !important;
	height: 120px !important;
	margin-bottom: -10px;
}

.logo {
	display: block;
	left: -30px;
	position: relative;
}

.logo__img {
	display: block;
	width: auto;
	height: 30px !important;
	max-width: 260px !important;
}

.headerbar__search {
	flex: 1;
	min-width: 0;
	display: none;
}

.headerbar__actions {
	display: flex;
	align-items: center;
	gap: var(--okp-space-3);
	margin-left: auto;
}

.headerbar__phone {
	display: none;
	align-items: center;
	gap: var(--okp-space-2);
	color: var(--okp-white);
}

.headerbar__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.headerbar__phone-label {
	font-weight: 600;
	font-size: 15px;
}

.headerbar__phone-number {
	color: var(--okp-secondary);
	font-size: 14px;
}

/* .headerbar__phone:hover .headerbar__phone-number {
	color: var(--okp-white);
} */

.headerbar__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--okp-white);
	font-size: 11px;
	text-align: center;
}

.headerbar__action:hover,
.headerbar__action:focus {
	color: var(--okp-secondary);
}

.headerbar__action-label {
	display: block;
}

.headerbar__secure {
	display: none;
	align-items: center;
	gap: var(--okp-space-2);
	margin: 0;
	color: var(--okp-white);
	font-size: 17px;
	font-weight: 500;
}

/* 7.3 Winkelwagenteller */

.cartlink__icon {
	position: relative;
	display: inline-flex;
}

.cartlink__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--okp-radius-pill);
	background-color: var(--okp-primary);
	color: var(--okp-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.cartlink__count--empty {
	display: none;
}

/* 7.4 Zoekbalk */

.searchform {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background-color: var(--okp-white);
	border-radius: var(--okp-radius-pill);
	padding: 0 var(--okp-space-2) 0 var(--okp-space-3);
}

.searchform__icon {
	display: flex;
	color: var(--okp-heading);
	pointer-events: none;
}

.searchform__input {
	flex: 1;
	min-width: 0;
	padding: 12px var(--okp-space-2);
	border: 0;
	background: transparent;
	color: var(--okp-heading);
	font-family: inherit;
	font-size: 15px;
}

.searchform__input::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

.searchform__input:focus {
	outline: 0;
}

.searchform:focus-within {
	box-shadow: 0 0 0 3px rgba(239, 120, 24, 0.4);
}

/*
 * .searchform__submit krijgt in searchform.php de class .visually-hidden mee:
 * er is maar één zichtbaar zoekicoon (.searchform__icon), de submit-knop
 * blijft alleen bereikbaar via toetsenbord/Enter. Geen eigen visuele regels
 * nodig, Bootstraps .visually-hidden dekt dat al af.
 */

/* 7.5 Zoeksuggesties */

.searchform__results {
	position: absolute;
	top: calc(100% + var(--okp-space-2));
	left: 0;
	right: 0;
	z-index: 1050;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--okp-space-2) 0;
	background-color: var(--okp-white);
	border-radius: var(--okp-radius-btn);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	text-align: left;
}

.searchform__results[hidden] {
	display: none;
}

.searchform__group + .searchform__group {
	margin-top: var(--okp-space-2);
	border-top: 1px solid var(--okp-border);
	padding-top: var(--okp-space-2);
}

.searchform__grouptitle {
	margin: 0;
	padding: var(--okp-space-1) var(--okp-space-3);
	color: var(--okp-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.searchform__option {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	padding: var(--okp-space-2) var(--okp-space-3);
	color: var(--okp-heading);
}

.searchform__option:hover,
.searchform__option:focus,
.searchform__option.is-active {
	background-color: var(--okp-page-bg);
	color: var(--okp-heading);
}

.searchform__thumb {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
}

.searchform__optionbody {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.searchform__optiontitle {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.searchform__optionmeta {
	color: var(--okp-text);
	font-size: 12px;
}

.searchform__empty {
	margin: 0;
	padding: var(--okp-space-3);
	color: var(--okp-text);
	font-size: 14px;
}

.searchform__viewall {
	display: block;
	margin-top: var(--okp-space-2);
	padding: var(--okp-space-2) var(--okp-space-3);
	border-top: 1px solid var(--okp-border);
	color: var(--okp-primary);
	font-size: 14px;
	font-weight: 600;
}

.searchform__viewall:hover,
.searchform__viewall:focus {
	background-color: var(--okp-page-bg);
	color: var(--okp-primary-dark);
}

/* ==========================================================================
   8. Navigatie
   ========================================================================== */

.mainnav {
	display: none;
	background-color: var(--mainnav-bg);
}

/*
 * De echte categorieboom heeft 12 topcategorieën, waaronder lange labels als
 * "Ruitenwisservloeistof". Met een ruime gap loopt dat over één regel heen, dus
 * de gap blijft compact en de resterende ruimte wordt verdeeld.
 */
.mainnav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--okp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mainnav__item {
	position: relative;
}

.mainnav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 0;
	color: var(--okp-white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mainnav__link:hover,
.mainnav__link:focus,
.mainnav__item:hover > .mainnav__link {
	color: var(--okp-primary);
}

.mainnav__caret {
	opacity: 0.8;
}

/* Submenu opent via CSS, zodat het bovenliggende item een echte link blijft. */
.mainnav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1040;
	min-width: 240px;
	margin: 0;
	padding: var(--okp-space-2) 0;
	background-color: var(--okp-white);
	border-radius: var(--okp-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0.15s;
}

.mainnav__item--has-children:hover > .mainnav__submenu,
.mainnav__item--has-children:focus-within > .mainnav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mainnav__sublink {
	display: block;
	padding: var(--okp-space-2) var(--okp-space-3);
	color: var(--okp-link);
	font-size: 15px;
}

.mainnav__sublink:hover,
.mainnav__sublink:focus {
	background-color: var(--okp-page-bg);
	color: var(--okp-primary);
}

/* ==========================================================================
   9. Mobiel offcanvas menu
   ========================================================================== */

.sidemenu {
	--bs-offcanvas-width: 320px;
	background-color: var(--okp-white);
	/*
	 * Voorkomt dat een swipe die het einde van het paneel bereikt doorketent naar
	 * het document erachter. Zonder dit scrollt op touchdevices de pagina achter
	 * het menu door naar beneden zodra je in het menu voorbij het einde swipet.
	 */
	overscroll-behavior: contain;
}

.sidemenu__head {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	padding: var(--okp-space-3);
}

.sidemenu__search {
	flex: 1;
	min-width: 0;
}

.sidemenu__search .searchform {
	background-color: var(--okp-page-bg);
	border-radius: var(--okp-radius-btn);
}

.sidemenu__search .searchform__input {
	padding-block: 8px;
	font-size: 14px;
}

.sidemenu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--okp-space-2);
	background: none;
	border: 0;
	color: var(--okp-heading);
	cursor: pointer;
}

.sidemenu__tabs {
	display: flex;
	border-bottom: 1px solid var(--okp-border);
}

.sidemenu__tab {
	flex: 1;
	padding: var(--okp-space-3) var(--okp-space-2);
	background-color: var(--okp-page-bg);
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--okp-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	cursor: pointer;
}

.sidemenu__tab.is-active {
	background-color: var(--okp-white);
	border-bottom-color: var(--okp-primary);
	color: var(--okp-primary);
}

.sidemenu__body {
	flex: 1;
	/*
	 * min-height: 0 is hier niet optioneel. Een flex-item heeft standaard
	 * min-height: auto en kan dus niet kleiner worden dan zijn inhoud, waardoor
	 * overflow-y: auto nooit aanslaat en het paneel op een korte viewport
	 * doorgroeit voorbij de schermrand in plaats van te scrollen.
	 */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mobilemenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobilemenu__item {
	position: relative;
	border-bottom: 1px solid var(--okp-border);
}

.mobilemenu__link {
	display: block;
	padding: var(--okp-space-3);
	padding-right: 56px;
	color: var(--okp-dark-blue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mobilemenu__link:hover,
.mobilemenu__link:focus {
	color: var(--okp-primary);
}

.mobilemenu__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: none;
	border: 0;
	border-left: 1px solid var(--okp-border);
	color: var(--okp-heading);
	cursor: pointer;
}

.mobilemenu__toggle.is-open .icon {
	transform: rotate(90deg);
}

.mobilemenu__toggle .icon {
	transition: transform 0.15s ease-in-out;
}

.mobilemenu__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--okp-page-bg);
}

.mobilemenu__submenu .mobilemenu__link {
	padding-left: var(--okp-space-4);
	font-weight: 500;
	text-transform: none;
}

.mobilemenu__account {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	padding: var(--okp-space-3);
	border-bottom: 1px solid var(--okp-border);
	color: var(--okp-dark-blue);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

.sidemenu__panel[hidden] {
	display: none;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.footer {
	color: var(--okp-white);
}

/* 10.1 Presection met CTA's */

.footer-cta {
	display: grid;
	grid-template-columns: 1fr;
}

.footer-cta__business {
	background-color: var(--okp-primary);
}

.footer-cta__newsletter {
	background-color: var(--okp-light-blue);
}

.footer-cta__inner {
	padding: var(--okp-space-4) var(--okp-space-3);
	max-width: calc(var(--okp-container) / 2);
}

.footer-cta__business .footer-cta__inner {
	margin-left: auto;
	padding-right: var(--okp-space-4);
}

.footer-cta__title {
	margin-bottom: var(--okp-space-3);
	color: var(--okp-white);
	font-size: clamp(26px, 3vw, 42px);
	text-transform: uppercase;
}

.footer-cta__text {
	margin-bottom: var(--okp-space-4);
	color: var(--okp-white);
	max-width: 60ch;
}

.footer-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--okp-space-4);
}

.footer-cta__mail {
	color: var(--okp-white);
	font-weight: 600;
	text-decoration: underline;
}

.footer-cta__mail:hover,
.footer-cta__mail:focus {
	color: var(--okp-dark-blue);
}

.newsletter__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--okp-space-2);
}

.newsletter__fields input {
	padding: 12px var(--okp-space-3);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--okp-radius);
	background-color: transparent;
	color: var(--okp-white);
	font-family: inherit;
}

.newsletter__fields input::placeholder {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}

.newsletter__fields button {
	justify-content: center;
	text-transform: uppercase;
}

.newsletter__notice {
	margin-top: var(--okp-space-2);
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

/* 10.2 Hoofdblok */

.footer-main {
	background-color: var(--okp-dark-blue);
	padding-block: var(--okp-space-4);
}

.footer-main__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--okp-space-4);
}

.footer-col__title {
	margin-bottom: var(--okp-space-3);
	color: var(--okp-white);
	font-size: 17px;
	text-transform: uppercase;
}

.footer-col__intro {
	color: rgba(255, 255, 255, 0.85);
	max-width: 40ch;
}

.footer-logo {
	display: flex;
	align-items: flex-end;
	gap: var(--okp-space-2);
	margin-bottom: var(--okp-space-3);
}

.footer-contact {
	margin: 0 0 var(--okp-space-3);
	padding: 0;
	list-style: none;
}

.footer-contact li {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	padding-block: 6px;
	color: rgba(255, 255, 255, 0.85);
}

.footer-contact a {
	color: rgba(255, 255, 255, 0.85);
}

.footer-contact a:hover,
.footer-contact a:focus {
	color: var(--okp-secondary);
}

.footer-payments,
.payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--okp-space-2);
	margin: 0 0 var(--okp-space-3);
	padding: 0;
	list-style: none;
}

.footer-payments img,
.payment-icons img {
	display: block;
	height: 28px;
	width: auto;
	background-color: var(--okp-white);
	border-radius: var(--okp-radius-btn);
	padding: 2px 6px;
}

.footer-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--okp-radius-pill);
	background-color: #25d366;
	color: var(--okp-white);
}

.footer-whatsapp:hover,
.footer-whatsapp:focus {
	background-color: #1da851;
	color: var(--okp-white);
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li {
	padding-block: 6px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.85);
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: var(--okp-secondary);
}

.footer-hours {
	margin: 0;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.85);
}

.footer-hours li {
	padding-block: 6px;
}

/* 10.3 Onderbalk */

.footer-bottom {
	background-color: #001835;
	padding-block: var(--okp-space-3);
	font-size: 14px;
}

.footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--okp-space-3);
}

.footer-bottom__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

.footer-bottom__copy a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}

.footer-bottom__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--okp-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-bottom__menu a {
	color: rgba(255, 255, 255, 0.75);
}

.footer-bottom__menu a:hover,
.footer-bottom__menu a:focus {
	color: var(--okp-secondary);
}

/* ==========================================================================
   11. Terug naar boven
   ========================================================================== */

.backtotop {
	position: fixed;
	right: 85px;
	bottom: 25px;
	z-index: 1035;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--okp-radius-pill);
	background-color: var(--okp-white);
	color: var(--okp-dark-blue);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.backtotop[hidden] {
	display: none;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
	/* Op mobiel staat de zoekbalk op een eigen regel onder de logobalk. */
	.headerbar__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: var(--okp-space-2);
	}

	.headerbar__search {
		display: block;
		order: 10;
		flex-basis: 100%;
		padding-bottom: var(--okp-space-2);
	}

	/* Logo neemt de resterende ruimte tussen burger en account/winkelmand in en centreert daarbinnen. */
	button.headerbar__burger {
		padding: 0px;
	}
	
	.headerbar__brand {
		flex: 1;
		justify-content: center;
	}

	.logo {
		left: 0;
	}

	.logo__img {
		height: 14px !important;
	}

	/* Referentiescreenshots tonen winkelmand vóór account op mobiel. */
	.headerbar__action.cartlink {
		order: -1;
	}

	/* Op mobiel past maar één USP tegelijk; die staat gecentreerd, net als in de referentiescreenshots. */
	.topbar__usps {
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: hidden;
		justify-content: center;
		scrollbar-width: none;
	}

	.topbar__usp ~ .topbar__usp {
		display: none;
	}

	.topbar__usps::-webkit-scrollbar {
		display: none;
	}

	.topbar__nav {
		display: none;
	}
}

@media (min-width: 992px) {
	.headerbar__burger {
		display: none;
	}

	.headerbar__mascot {
		display: block;
	}

	.headerbar__search {
		display: block;
		max-width: 740px;
		margin-inline: var(--okp-space-4);
	}

	.headerbar__phone {
		display: flex;
	}

	.headerbar__secure {
		display: flex;
	}

	.mainnav {
		display: block;
	}

	.footer-cta {
		grid-template-columns: 1fr 1fr;
	}

	.footer-cta__inner {
		padding-block: var(--okp-space-5);
	}

	.newsletter__fields {
		grid-template-columns: repeat(4, 1fr);
	}

	.footer-main__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	}
}

@media (min-width: 1400px) {
	.mainnav__list {
		gap: var(--okp-space-4);
	}
}

/* ==========================================================================
   13. Homepage en WooCommerce views
   ========================================================================== */

.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--okp-radius-btn);
	background: var(--okp-green);
	color: var(--okp-white);
	font-family: var(--okp-font-heading);
	font-weight: 600;
	line-height: 1.2;
}

.button--primary { background: var(--okp-primary); }
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--okp-primary-dark); color: var(--okp-white); }

/*
 * WooCommerce's eigen classic stylesheet stijlt a/button/input met de klasse
 * .alt (o.a. toevoegen aan winkelwagen, plaats bestelling, inloggen) met een
 * hogere specificiteit dan de regels hierboven, waardoor zijn merkpaars
 * (#7f54b3) er doorheen kwam in plaats van het themagroen.
 */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--okp-green);
	color: var(--okp-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--okp-primary-dark);
	color: var(--okp-white);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled {
	background: var(--okp-green);
	opacity: 0.65;
}

/*
 * De :hover-regel op .button.alt (hierboven) overrulet anders ook de
 * disabled staat: hover op "Toevoegen aan winkelwagen" vóór het kiezen van
 * een variatie werd daardoor --okp-primary-dark i.p.v. het verwachte groen
 * (of, met een verouderde class-combinatie, WooCommerce's eigen paars).
 */
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled:hover {
	background: var(--okp-green);
	color: var(--okp-white);
}
.eyebrow { margin: 0 0 var(--okp-space-1); color: var(--okp-primary); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--okp-space-3); margin-bottom: var(--okp-space-3); }
.section-heading h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.section-heading h2 span { color: var(--okp-primary); }
.section-heading a { color: var(--okp-primary); font-size: 14px; font-weight: 700; text-decoration: underline; }

.home-hero { padding-top: var(--okp-space-3); }
.home-hero__title { margin: 0 0 var(--okp-space-3); padding: 14px; background: var(--okp-white); font-size: clamp(26px, 3vw, 38px); text-align: center; text-transform: uppercase; }
.home-hero__grid { display: grid; gap: var(--okp-space-3); }
.home-advisor, .home-promo { min-height: 300px; padding: var(--okp-space-4); background: var(--okp-white); }
.advisor-top {margin-bottom: var(--okp-space-5);}
.home-stack-card {display: flex;flex-direction: column;gap: var(--okp-space-3);}
.home-promo.home-promo--business {background-image: url(/wp-content/uploads/2026/07/Zakelijk-klantworden.webp);background-size: contain;background-position: right;}
.home-promo.home-promo--olie {background-image: url(/wp-content/uploads/2026/07/Motorolie-aanbod.webp);background-size: contain;background-position: right;}
.home-promo.home-promo--offer {background-image: url(/wp-content/uploads/2026/07/Glasreiniger.webp);background-size: contain;background-position: center center;}

/* license plate css*/
.license-plate-wrapper {
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
	margin-bottom: var(--okp-space-2);
}

.license-plate {
    display: flex;
    width: 270px;
    overflow: hidden;
    border: 2px solid #000;
    border-radius: 8px;
    background-color: #f5c400;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.license-plate__country {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 16px;
    background-color: #0052a5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.license-plate__country img {
    display: block;
    width: auto;
    height: 16px;
    margin-bottom: 12px;
}

.license-plate__number {
    display: flex;
    align-items: center;
    padding: 16px;
    color: #000;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .license-plate__country {
        padding: 10px;
        font-size: 18px;
    }

    .license-plate__country img {
        height: 24px;
        margin-bottom: 8px;
    }

    .license-plate__number {
        padding: 12px;
        font-size: clamp(24px, 10vw, 42px);
    }
}

.home-advisor h2 { color: var(--okp-primary); text-transform: uppercase; }
.home-promo { display: flex; flex-direction: column; justify-content: end; color: var(--okp-white); background: var(--okp-light-blue) center / cover no-repeat; }
.home-promo h4{color:var(--okp-white);}
.home-promo strong { font-family: var(--okp-font-heading); font-size: clamp(25px, 3vw, 42px); line-height: 1; text-transform: uppercase; }
.home-promo--offer { background-color: var(--okp-primary); }
.category-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-3); }
.category-tile { display: flex; min-width: 0; align-items: center; min-height: 112px; padding: var(--okp-space-2); background: var(--okp-white); font-family: var(--okp-font-heading); font-weight: 700; }
.category-tile strong { min-width: 0; overflow-wrap: anywhere; }
.category-tile img { width: 75px; height: 90px; margin-right: var(--okp-space-2); object-fit: contain; }
.home-products { background: var(--okp-page-bg); }
.home-products .products, .related .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-3); margin: 0; padding: 0; list-style: none; }
/* WooCommerce hangt een clearfix aan ul.products. In een grid telt zo'n
   pseudo-element als volwaardige cel en schuift het hele overzicht een plaats
   op, met een gat linksboven als resultaat. */
.woocommerce ul.products::before, .woocommerce ul.products::after, .products::before, .products::after { content: none; }
.product-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--okp-space-2 ); margin: 0; padding: var(--okp-space-3); background: var(--okp-white); }
.woocommerce ul.products li.product.product-card, .woocommerce-page ul.products li.product.product-card { float: none; clear: none; width: auto; margin: 0; }
/* Vaste verhouding met object-fit: contain — elke kaart krijgt zo hetzelfde
   beeldvlak terwijl de productfoto zelf nooit wordt bijgesneden. De tweede
   selector is nodig om WooCommerce's eigen `height: auto` op productafbeeldingen
   te overrulen; zonder die override bepaalt de foto de hoogte van de kaart. */
.product-card__media { position: relative; overflow: hidden; aspect-ratio: 1; }
.product-card__image { display: block; height: 100%; }
.product-card__image img,
.woocommerce ul.products li.product .product-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.product-card__action { position: absolute; right: 0; bottom: 0; left: 0; padding: 11px 12px; background: var(--okp-green); color: var(--okp-white); font-family: var(--okp-font-heading); font-size: 15px; font-weight: 600; text-align: center; }
.product-card__action:hover, .product-card__action:focus { background: var(--okp-primary); color: var(--okp-white); }
.product-card__body { display: grid; gap: 5px; }
.product-card__title { color: var(--okp-heading); font-weight: 700; line-height: 1.35; }
.product-card__price, .woocommerce-Price-amount { color: var(--okp-primary); font-weight: 700; }
.product-card__price del { color: var(--okp-text); font-weight: 400; }
.home-eurol { background: var(--okp-white); }
.home-eurol__grid, .home-about__grid { display: grid; align-items: center; gap: var(--okp-space-4); }
.home-eurol img { width: 100%; max-height: 390px; object-fit: cover; }
.home-eurol h2, .home-about h2 { font-size: clamp(28px, 3vw, 42px); }
.home-about__grid > img { width: 100%; max-width: 420px; margin-inline: auto; }

.shop-page { background: var(--okp-white); }

/* Categoriekop en olieadviseur-CTA delen één grid: gridcellen strekken zich
   standaard over de volledige rijhoogte, dus beide kaarten blijven even hoog
   ongeacht de lengte van de categorieomschrijving. */
.shop-intro { display: grid; gap: var(--okp-space-3); margin-bottom: var(--okp-space-4); }
.shop-intro__hero { position: relative; display: flex; min-height: 210px; align-items: flex-end; padding: var(--okp-space-4); background: var(--okp-dark-blue) center / cover no-repeat; }
.shop-intro__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 35, 81, .88) 0%, rgba(0, 35, 81, .55) 55%, rgba(0, 35, 81, .2) 100%); }
.shop-intro__hero-body { position: relative; z-index: 1; max-width: 640px; }
.shop-intro__title { margin: 0 0 var(--okp-space-2); color: var(--okp-white); font-size: clamp(28px, 3.4vw, 44px); }
.shop-intro__text, .shop-intro__text p { margin: 0; color: rgba(255, 255, 255, .92); }
.shop-intro__text img { max-width: 100%; height: auto; }
.shop-intro__cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--okp-space-2); padding: var(--okp-space-4); background: var(--okp-white); box-shadow: 0 0 9px rgba(0, 0, 0, .15); }
.shop-intro__cta h2 { margin: 0; font-size: 20px; }
.shop-intro__cta p { margin: 0; }
.shop-intro__cta .button { gap: 8px; margin-top: var(--okp-space-2); }

/* align-items: start houdt de filterkolom zo hoog als haar eigen inhoud; zonder
   dit rekt de aside mee met het productgrid. */
.shop-layout { display: grid; clear: both; align-items: start; gap: var(--okp-space-4); }
.shop-layout__results { min-width: 0; transition: opacity .15s ease; }
.shop-layout__results .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-4) var(--okp-space-3); margin: 0; padding: 0; list-style: none; }
.shop-layout.is-loading .shop-layout__results { opacity: .45; pointer-events: none; }

.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--okp-space-2); margin-bottom: var(--okp-space-4); padding-bottom: var(--okp-space-3); border-bottom: 1px solid var(--okp-border); }
.shop-toolbar .woocommerce-result-count, .shop-toolbar .woocommerce-ordering { float: none; margin: 0; font-size: 14px; }
.woocommerce .woocommerce-ordering select { min-height: 38px; padding: 0 var(--okp-space-2); border: 1px solid var(--okp-border); background: var(--okp-white); }

.shop-filters { font-size: 14px; }
.shop-filters__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--okp-space-2); }
.shop-filters__heading { margin: 0; font-size: 18px; text-transform: uppercase; }
.shop-filters__clear { color: var(--okp-primary); font-weight: 700; text-decoration: underline; }
.shop-filters__toggle { display: inline-flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--okp-border); background: var(--okp-white); font-family: var(--okp-font-heading); font-weight: 600; }
.shop-filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.shop-filters__panel { display: none; }
.shop-filters.is-open .shop-filters__panel { display: block; }
.shop-filters__block { padding-block: var(--okp-space-3); border-top: 1px solid var(--okp-border); }
.shop-filters__block:first-child { border-top: 0; }
.shop-filters__title { margin: 0 0 var(--okp-space-2); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.shop-filters__sort, .shop-filters__checks, .shop-cats__list, .shop-cats__children, .shop-toplist__list { margin: 0; padding: 0; list-style: none; }
.shop-filters__sort a { display: block; padding: 5px 0; color: var(--okp-link); }
.shop-filters__sort a:hover, .shop-filters__sort a.is-active { color: var(--okp-primary); }
.shop-filters__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px var(--okp-space-3); }
.shop-filters__checks label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.shop-filters__label { min-width: 0; overflow-wrap: anywhere; }
.shop-filters__count { margin-left: auto; color: var(--okp-text); font-size: 12px; }
.shop-filters__submit { width: 100%; margin-top: var(--okp-space-3); }
/* Met JavaScript wordt elke wijziging direct toegepast; de knop is er puur voor
   bezoekers zonder JavaScript. */
.shop-layout.is-enhanced .shop-filters__submit { display: none; }

.price-filter { --price-start: 0%; --price-end: 100%; }
.price-filter__track { position: relative; height: 28px; }
.price-filter__track::before, .price-filter__track::after { content: ''; position: absolute; top: 13px; height: 3px; }
.price-filter__track::before { right: 0; left: 0; background: var(--okp-border); }
.price-filter__track::after { right: calc(100% - var(--price-end)); left: var(--price-start); background: var(--okp-primary); }
/* Twee schuifregelaars over elkaar: alleen de knoppen vangen muisinvoer, zodat
   ze allebei bereikbaar blijven waar ze elkaar overlappen. */
.price-filter input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; }
.price-filter input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; -webkit-appearance: none; appearance: none; border: 2px solid var(--okp-primary); border-radius: 50%; background: var(--okp-white); cursor: pointer; pointer-events: auto; }
.price-filter input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--okp-primary); border-radius: 50%; background: var(--okp-white); cursor: pointer; pointer-events: auto; }
.price-filter input[type="range"]::-moz-range-track { background: none; }
.price-filter__value { margin: var(--okp-space-2) 0 0; color: var(--okp-heading); font-weight: 700; }

.shop-cats__row { display: flex; align-items: center; gap: var(--okp-space-2); }
.shop-cats__row a { flex: 1; padding: 6px 0; color: var(--okp-link); }
.shop-cats__row a:hover, .shop-cats__children a:hover { color: var(--okp-primary); }
.shop-cats__item.is-current > .shop-cats__row > a, .shop-cats__children .is-current > a { color: var(--okp-primary); font-weight: 700; }
.shop-cats__toggle { display: grid; width: 24px; height: 24px; flex-shrink: 0; place-items: center; padding: 0; border: 0; background: none; color: var(--okp-text); }
.shop-cats__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.shop-cats__children { padding-left: var(--okp-space-3); }
.shop-cats__children a { display: block; padding: 5px 0; color: var(--okp-link); }

.shop-toplist__list { display: grid; }
.shop-toplist__item a { display: flex; align-items: center; gap: var(--okp-space-2); padding: var(--okp-space-2) 0; border-bottom: 1px solid var(--okp-border); color: var(--okp-heading); }
.shop-toplist__item:last-child a { border-bottom: 0; }
.shop-toplist__item img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
.shop-toplist__body { display: grid; min-width: 0; gap: 2px; }
.shop-toplist__title { font-weight: 700; line-height: 1.3; }
.shop-toplist__price { font-size: 13px; }

.recently-viewed { background: var(--okp-page-bg); }
.recently-viewed__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-3); margin: 0; padding: 0; list-style: none; }

.category-content { padding-block: var(--okp-space-5); background: var(--okp-page-bg); }
.category-content__title { margin-bottom: var(--okp-space-3); font-size: clamp(24px, 2.6vw, 34px); }
.category-content__body h2, .category-content__body h3, .category-content__body h4 { margin-top: var(--okp-space-4); font-size: 20px; }
.category-content.is-clamped .category-content__body { position: relative; max-height: 320px; overflow: hidden; }
.category-content.is-clamped .category-content__body::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 110px; background: linear-gradient(to bottom, rgba(248, 248, 248, 0), var(--okp-page-bg)); }
.category-content__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--okp-space-3); padding: 0; border: 0; background: none; color: var(--okp-heading); font-family: var(--okp-font-heading); font-weight: 600; text-decoration: underline; }
.category-content__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.woocommerce nav.woocommerce-pagination { margin-top: var(--okp-space-4); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 2px; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; background: var(--okp-page-bg); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--okp-primary); color: var(--okp-white); }

.woocommerce-breadcrumb { margin-bottom: var(--okp-space-3); font-size: 14px; }
.product-detail__top { display: grid; gap: var(--okp-space-4); }
/*
 * Zelfde probleem als bij .woocommerce-tabs hierboven: als grid-items geven
 * gallery en summary zonder opgave een automatische minimumbreedte gelijk aan
 * hun min-/max-content. De FlexSlider-viewport (flex:1; min-width:0, zie
 * .product-detail__gallery .flex-viewport) kan daardoor tot zijn eigen
 * afbeeldingsbreedte uitrekken in plaats van mee te krimpen met de kolom —
 * met name bij producten met meerdere galerijafbeeldingen. Op ≥992px is dit
 * al opgelost via minmax(0, …) in de kolomdefinitie (zie hieronder); op
 * mobiel (één kolom, geen grid-template-columns) ontbrak die bescherming.
 */
.product-detail__top > * { min-width: 0; }
/*
 * Titel (34px, uppercase) breekt zonder dit niet af op lange, spatieloze
 * productnamen (bijv. "metaalbewerkingsolie"): het woord duwt de H1 dan net
 * als de aanvullende-informatietabel buiten zijn kolom. overflow-wrap staat
 * hier op .summary in plaats van alleen op .product_title, zodat SKU en
 * eventuele korte beschrijving met dezelfde bescherming meeliften.
 */
.product-detail__summary { overflow-wrap: anywhere; }
/*
 * WordPress' oEmbed-cache slaat video's (bijv. YouTube in de beschrijving) op
 * met de vaste breedte/hoogte-attributen van het origineel (hier 1170×658) —
 * ver boven elke mobiele containerbreedte. min-width:0/overflow-wrap lossen
 * dat niet op, want een <iframe> heeft geen tekst om af te breken. 16:9 is de
 * gangbare verhouding voor video-embeds; smallere/hogere embeds vallen terug
 * op hun eigen hoogte zolang de breedte niet meer buiten de kolom duwt.
 */
.product-detail iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; }
.product-detail__payments { margin-top: var(--okp-space-3); }
.product-detail__payments p { margin: 0 0 var(--okp-space-2); font-size: 14px; font-weight: 600; color: var(--okp-heading); }
.product-detail__gallery .woocommerce-product-gallery__image img { width: 100%; max-height: 610px; object-fit: contain; }
.woocommerce-price-suffix {
    font-size: 14px;
}
a.reset_variations::before {
    content: "X";
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
    margin-inline-end: 1px;
    font-size: 10px;
    font-weight: 700;
    top: -1px;
}
a.reset_variations {
    opacity: 0.6;
    font-size: 12px;
}

/*
 * Kleine afbeeldingen (flex-control-nav, door FlexSlider gegenereerd) links
 * van de grote afbeelding (flex-viewport) i.p.v. eronder. row-reverse omdat
 * flex-viewport eerst in de DOM staat en flex-control-nav erna.
 */
.product-detail__gallery .woocommerce-product-gallery {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--okp-space-2);
    justify-content: center;
}

.product-detail__gallery .flex-viewport { min-width: 0; flex: 1; }

.product-detail__gallery .flex-control-nav {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--okp-space-2);
	width: 84px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-detail__gallery .flex-control-nav li { width: 100%; }
.product-detail__gallery .flex-control-nav img { display: block; width: 100%; height: auto; border: 1px solid var(--okp-border); cursor: pointer; }
.product-detail__gallery .flex-control-nav img.flex-active { border-color: var(--okp-primary); }


table.variations {
    margin-bottom: 10px;
}
select#pa_inhoud {
    padding: 10px;
    border: 1px solid #0000002b;
    border-radius: 0;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
    width: 10vw;
}

/*
 * Het zoekicoontje verdwijnt visueel; de vergrootactie blijft werken doordat
 * theme.js een klik op de afbeelding zelf doorstuurt naar deze trigger (zie
 * initGalleryZoom()). Puur display:none, geen "sr-only"-truc: de knop hoeft
 * niet met toetsenbord/schermlezer bereikbaar te blijven zodra klikken op de
 * afbeelding dezelfde actie uitvoert.
 */
.product-detail__gallery .woocommerce-product-gallery__trigger { display: none; }
/*
 * Consistente verticale ritmiek: elk blok in de rechterkolom (titel, korte
 * beschrijving, SKU/meta, prijs, voorraad, variatiekeuze, USP's,
 * betaallogo's) kreeg voorheen zijn eigen (of geen) margin, wat de kolom
 * ongelijkmatig liet aanvoelen. Eén regel voor alle directe kinderen van
 * .summary geeft elk blok dezelfde ademruimte; specifieke elementen
 * verfijnen daarna alleen waar nodig.
 */
.product-detail__summary > * { margin: 0 0 var(--okp-space-3); }
.product-detail__summary > *:last-child { margin-bottom: 0; }
.product-detail__summary .product_title { margin-bottom: var(--okp-space-2); font-size:34px; text-transform: uppercase; }

.product-detail__summary .woocommerce-product-details__short-description p { margin: 0; }
.product-detail__summary .product_meta { color: var(--okp-text); font-size: 14px; }
/*
 * EAN (plugin "EAN for WooCommerce") en productcategorieën mogen niet op de
 * productpagina getoond worden. De EAN-positie is instelbaar in de plugin
 * (standaard woocommerce_product_meta_start, dus binnen .product_meta), maar
 * de selector is bewust niet tot .product_meta beperkt zodat een andere
 * geconfigureerde positie binnen de summary ook verborgen blijft.
 */
.product-detail__summary .ean_wrapper,
.product-detail__summary .product_meta .posted_in { display: none; }
.product-detail__summary .price { font-size: 24px; }
.product-detail__summary .stock { display: inline-block; padding: 7px 24px; border: 1px solid var(--okp-green); color: var(--okp-green); font-weight: 700; }
.product-detail__summary .quantity .qty { min-height: 42px; border: 1px solid var(--okp-border); }
.product-detail__summary form.cart { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--okp-space-2); }
.product-detail__summary form.variations_form { display: block; }
.product-detail__summary .single_add_to_cart_button { flex: 1; }
/* Bij variabele producten zit quantity+knop in .woocommerce-variation-add-to-cart, geen directe child van form.cart. */
.product-detail__summary .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--okp-space-2); }
/*
 * Maar 1 voorraadmelding: de statische (okp_product_stock_html(), vóór de
 * variatiekeuze) blijft staan. De WooCommerce-eigen melding die pas ná het
 * kiezen van een variatie verschijnt (.woocommerce-variation-availability)
 * wordt daarom verborgen, net als de bijbehorende variatieprijs — de
 * startprijs toont via okp_variable_price_html() al het instapbedrag.
 */
.product-detail__summary .woocommerce-variation-availability,
.product-detail__summary .woocommerce-variation-price { display: none; }
/* theme.js kopieert de variatieprijs hieruit naar de zichtbare .price (initVariationPriceSync). */

/* "Klant Prijzen voor WooCommerce" toont een eigen "Product Total"-regel met
   id="product_total_price" naast de gewone .price; die is overbodig op de
   productpagina en wordt hier verborgen. */
#product_total_price { display: none !important; }
.product-usps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-2); margin: var(--okp-space-4) 0; padding: 0; list-style: none; }
.product-usps li::before { content: '✓'; margin-right: 7px; color: var(--okp-primary); font-weight: 700; }
.product-detail__below { margin-top: var(--okp-space-5); border-top: 1px solid var(--okp-border); }
/*
 * Beschrijving en aanvullende informatie altijd naast elkaar i.p.v. tabs:
 * de tabnavigatie verdwijnt, beide panelen (die zelf al een <h2> hebben, zie
 * WooCommerce's tabs/description.php en tabs/additional-information.php)
 * blijven permanent zichtbaar. wc-tabs.js zet display:none/block als
 * inline style bij het wisselen van tab; !important is nodig om dat te
 * overrulen zodat beide panelen zichtbaar blijven ongeacht welke "actief" is.
 */
.product-detail .woocommerce-tabs ul.tabs { display: none; }
.product-detail .woocommerce-tabs { display: grid; gap: var(--okp-space-4); }
/*
 * Grid-items krijgen zonder opgave een automatische minimumbreedte gelijk aan
 * hun min-content: één lang, spatieloos woord (bijv. de URL bij
 * "veiligheidsbladen" in de aanvullende informatie) duwt het paneel dan buiten
 * zijn kolom, en daarmee de hele pagina breder dan het scherm. min-width: 0
 * laat het paneel meekrimpen met de grid-kolom; overflow-wrap zorgt dat zulke
 * woorden binnen die breedte alsnog afbreken in plaats van de kolom opnieuw op
 * te rekken.
 */
.product-detail .woocommerce-tabs .woocommerce-Tabs-panel { display: block !important; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.product-detail .related { margin-top: var(--okp-space-5); }

@media (min-width: 992px) {
	.product-detail .woocommerce-tabs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.woocommerce table.shop_table { border: 0; border-radius: 0; border-collapse: collapse; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--okp-space-3); border-color: var(--okp-border); }
.woocommerce-cart-form, .cart-collaterals{ background: var(--okp-white); }
.woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #payment { padding: var(--okp-space-4); border: 1px solid var(--okp-border); background: var(--okp-white); border-radius: var(--okp-radius-btn); }
.woocommerce .cart-collaterals .cart_totals { width: 100%; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper { margin-bottom: var(--okp-space-3); }
.product-usps--cart { grid-template-columns: 1fr; margin: var(--okp-space-4) 0 0; }
.cart-trust { margin-top: var(--okp-space-4); padding-top: var(--okp-space-4); border-top: 1px solid var(--okp-border); }
.cart-trust p { margin: 0 0 var(--okp-space-2); font-size: 14px; font-weight: 600; color: var(--okp-heading); }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message { border-top-color: var(--okp-primary); background: #fff7ef; }
.woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before { color: var(--okp-primary); }

.cart-empty { display: flex; flex-direction: column; align-items: center; padding: var(--okp-space-5) var(--okp-space-3); text-align: center; }
.cart-empty__icon { display: flex; margin-bottom: var(--okp-space-3); color: var(--okp-border); }
.cart-empty__icon svg { width: 64px; height: 64px; }
.cart-empty__title { margin: 0 0 var(--okp-space-2); font-size: clamp(22px, 3vw, 28px); }
.cart-empty__text { margin: 0 0 var(--okp-space-4); max-width: 32em; color: var(--okp-text); }
.cart-empty__cta { min-width: 220px; }
.checkout-progress { margin: 0 0 var(--okp-space-4); }
.checkout-progress ol { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 650px; margin: auto; padding: 0; list-style: none; }
.checkout-progress li { display: flex; align-items: center; justify-content: center; gap: var(--okp-space-2); color: var(--okp-text); font-weight: 700; }
.checkout-progress li span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--okp-border); border-radius: 50%; }
.checkout-progress li.is-active { color: var(--okp-heading); }
.checkout-progress li.is-active span { border-color: var(--okp-primary); background: var(--okp-primary); color: var(--okp-white); }
.checkout-progress ol li {border-bottom: 3px solid #00000017;}
.checkout-progress ol li.is-active {border-bottom: 3px solid var(--okp-primary) !important;padding: 15px;}
article#post-13 h1 {display: none;}
/*
 * Beide stappen delen dezelfde <form>, JS wisselt alleen de zichtbare secties
 * via de .checkout--review class (zie initCheckoutSteps() in theme.js). Eén
 * gecentreerde kolom voor stap 1 én stap 2 maakt in één oogopslag duidelijk
 * wat de volgende stap is, in plaats van een layout die per stap van
 * kolomverdeling wisselt.
 */
.woocommerce-checkout .woocommerce-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--okp-space-4);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* WooCommerce's kern-CSS zet col-1/col-2 naast elkaar (float, 48%); hier altijd vol-breed en gestapeld. */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout #customer_details {
	display: flex;
	flex-direction: column;
	gap: var(--okp-space-4);
}

/*
 * "Verzenden naar een ander adres?" (.woocommerce-shipping-fields) staat in de
 * kernmarkup vóór de bestelnotities (.woocommerce-additional-fields). Met
 * flex-order komt de adreskeuze onderaan het formulier: de pagina groeit dus
 * pas zodra iemand die optie daadwerkelijk aanvinkt.
 */
.woocommerce-checkout .col-2 {
	display: flex;
	flex-direction: column;
}

.woocommerce-checkout .col-2 .woocommerce-additional-fields { order: 1; }
.woocommerce-checkout .col-2 .woocommerce-shipping-fields { order: 2; margin-top: var(--okp-space-4); }

.checkout-step-actions { margin-top: var(--okp-space-3); }
/*
 * De terugknop hoort bij het einde van stap 2, niet bovenaan: form.checkout
 * is een flex-column (zie .woocommerce-checkout .woocommerce-checkout
 * hierboven), dus order:10 volstaat om hem na #order_review te laten volgen,
 * netjes links onder de bestelling/betaling.
 */
.checkout-step-actions--previous { order: 10; text-align: left; }
.button--outline { background: var(--okp-heading); }
.woocommerce-checkout form.checkout:not(.checkout--review) #order_review_heading,
.woocommerce-checkout form.checkout:not(.checkout--review) #order_review,
.woocommerce-checkout form.checkout:not(.checkout--review) .checkout-step-actions--previous { display: none; }
.woocommerce-checkout form.checkout.checkout--review #customer_details,
.woocommerce-checkout form.checkout.checkout--review .checkout-step-actions--next { display: none; }
/*
 * De waardebonprompt (.woocommerce-form-coupon-toggle) en het bijbehorende
 * formulier staan buiten <form class="checkout"> (vóór in de DOM, via de
 * woocommerce_before_checkout_form-hook), dus een CSS-sibling-selector op
 * form.checkout.checkout--review kan ze niet bereiken. Zichtbaarheid op stap 2
 * wordt daarom in JS geregeld, zie setStep() in theme.js. De waardebon mag
 * alleen op stap 2 zichtbaar zijn; op stap 2 blijft het formulier zelf verder
 * gewoon door WooCommerce's eigen showcoupon-toggle bediend.
 */
a.showcoupon {
	font-weight: 700;
}
body.woocommerce-checkout:not(.okp-checkout-step-2) .woocommerce-form-coupon-toggle,
body.woocommerce-checkout:not(.okp-checkout-step-2) #woocommerce-checkout-form-coupon { display: none; }
/* Geminimaliseerd: geen kader of achtergrond, en gecentreerd op dezelfde breedte als de rest van het formulier op stap 2. */
.woocommerce-form-coupon-toggle {
	max-width: 680px;
	margin: 0 auto var(--okp-space-2);
	text-align: center;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::after {
	content: none;
}
#woocommerce-checkout-form-coupon {
	max-width: 680px;
	margin-inline: auto;
}
#order_review_heading { text-align: center; }
#order_review { max-width: 100%; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { min-height: 42px; border: 1px solid var(--okp-border); border-radius: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--okp-space-3); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--okp-space-2); margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 9px 12px; background: var(--okp-white); border: 1px solid var(--okp-border); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--okp-dark-blue); color: var(--okp-white); }
.account-cards { margin-top: var(--okp-space-3); }
.account-cards ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--okp-space-3); margin: 0; padding: 0; list-style: none; }
.account-cards a { display: grid; min-height: 130px; place-content: center; gap: var(--okp-space-2); border: 1px solid var(--okp-border); background: var(--okp-white); color: var(--okp-heading); font-family: var(--okp-font-heading); font-weight: 700; text-align: center; }
.account-cards a:hover, .account-cards a:focus { border-color: var(--okp-primary); color: var(--okp-primary); }
.account-cards a span { color: var(--okp-primary); font-size: 32px; line-height: 1; }

@media (min-width: 768px) {
	.home-hero__grid { grid-template-columns: 1.1fr 1fr 1fr; }
	.category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-products .products, .related .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-eurol__grid { grid-template-columns: 1fr 1.3fr 1fr; }
	.home-about__grid { grid-template-columns: 1fr 1fr; }
	.shop-intro { grid-template-columns: minmax(0, 1.9fr) minmax(290px, 1fr); }
	.shop-layout { grid-template-columns: 260px minmax(0, 1fr); }
	.shop-layout__results .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shop-filters__toggle { display: none; }
	.shop-filters__panel { display: block; }
	.recently-viewed__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.product-detail__top { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 24%; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: block; }
	.woocommerce-account .woocommerce-MyAccount-navigation a { margin-bottom: var(--okp-space-2); }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 72%; }
	.woocommerce-account .woocommerce::after { content: ''; display: block; clear: both; }
	.account-cards ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.home-products .products, .related .products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.shop-layout__results .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	/*
	 * 7/5-koloms verdeling zoals de referentiescreenshots: productregels links
	 * (7 van de 12 kolommen), winkelwagentotalen rechts (5 van de 12).
	 * .woocommerce-cart-form en .cart-collaterals zijn in cart.php twee losse
	 * siblings binnen .woocommerce; CSS grid plaatst ze zonder templateoverride
	 * naast elkaar.
	 */
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
		align-items: start;
		gap: var(--okp-space-4);
	}

	.woocommerce-cart .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals { margin-top: 0; }
}

/*
 * De actieknop schuift alleen omhoog waar hoveren bestaat. Op een touchscreen is
 * er geen hoverstatus om hem mee op te roepen, dus daar staat hij gewoon vast.
 */
@media (hover: hover) {
	.product-card__action { transform: translateY(100%); opacity: 0; transition: transform .18s ease, opacity .18s ease; }
	.product-card:hover .product-card__action, .product-card:focus-within .product-card__action { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.product-card__action, .shop-layout__results { transition: none; }
}


/* ==========================================================================
   14. Contact, klantenservice en FAQ
   ========================================================================== */

/* Valt terug op een merkkleurverloop wanneer de pagina geen uitgelichte
   afbeelding heeft ingesteld, zodat de template geen ontbrekende afbeelding nodig heeft. */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: var(--okp-space-4) var(--okp-space-3);
	background: linear-gradient(135deg, var(--okp-dark-blue), var(--okp-light-blue));
	background-size: cover;
	background-position: center;
	text-align: center;
	color: var(--okp-white);
}

.page-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.page-hero__title {
	margin: 0 0 var(--okp-space-2);
	font-size: clamp(28px, 4vw, 48px);
	color: var(--okp-white);
}

.page-hero__subtitle {
	margin: 0;
	font-size: clamp(15px, 2vw, 18px);
}

/* Contactgegevens */
.contact-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--okp-space-4);
	list-style: none;
	margin: 0 0 var(--okp-space-4);
	padding: var(--okp-space-4) 0;
	border-bottom: 1px solid var(--okp-border);
}

.contact-details li {
	display: flex;
	align-items: center;
	gap: var(--okp-space-2);
	font-weight: 600;
}

.contact-details .icon {
	color: var(--okp-primary);
	flex-shrink: 0;
}

.contact-details a {
	color: var(--okp-link);
	text-decoration: none;
}

.contact-details a:hover {
	text-decoration: underline;
}

.contact-details--compact {
	justify-content: flex-start;
	gap: var(--okp-space-2);
	padding: 0;
	border-bottom: 0;
	margin-bottom: var(--okp-space-3);
}

.contact-details--compact li {
	width: 100%;
}

.okp-contact-card {
	max-width: 420px;
	margin: 0 0 var(--okp-space-4);
	padding: var(--okp-space-3);
	background: var(--okp-white);
	border: 1px solid var(--okp-border);
}

.okp-contact-card h2 {
	margin-top: 0;
}

/* Contactpagina: FAQ + info naast elkaar, zelfde 7/5-verhouding als de cart. */
.contact-grid {
	display: grid;
	gap: var(--okp-space-4);
}

@media (min-width: 992px) {
	.contact-grid {
		grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
		align-items: start;
	}
}

.contact-hours {
	list-style: none;
	margin: 0 0 var(--okp-space-4);
	padding: 0;
}

.contact-hours li {
	display: flex;
	justify-content: space-between;
	max-width: 220px;
	padding-block: var(--okp-space-1);
}

/* FAQ-accordion, native <details>/<summary> */
.faq-list {
	margin-bottom: var(--okp-space-4);
}

.faq-list__heading {
	color: var(--okp-primary);
}

.faq-item {
	border-bottom: 1px solid var(--okp-border);
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--okp-space-3);
	padding-block: var(--okp-space-2);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__marker {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.faq-item[open] .faq-item__marker {
	transform: rotate(180deg);
}

.faq-item__answer {
	padding-bottom: var(--okp-space-3);
	color: var(--okp-text);
}

.faq-item__answer h4 {
	margin: var(--okp-space-3) 0 var(--okp-space-1);
	font-size: 14px;
	letter-spacing: 0.02em;
}

.faq-item__answer ul {
	padding-left: var(--okp-space-3);
}

.faq-item__answer > *:first-child {
	margin-top: 0;
}

/* Lange tekstpagina's (algemene voorwaarden, privacybeleid): leesbare
   regellengte, duidelijke hiërarchie tussen sectie- en artikelkoppen. */
/* .page-content {
	max-width: 800px;
} */

.page-content h2 {
	margin-top: var(--okp-space-5);
	padding-top: var(--okp-space-4);
	border-top: 1px solid var(--okp-border);
	color: var(--okp-primary);
}

.page-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.page-content h3 {
	margin-top: var(--okp-space-4);
	font-size: 18px;
}

.page-content p,
.page-content ol,
.page-content ul {
	color: var(--okp-text);
}

/* ==========================================================================
   15. Blog
   ========================================================================== */

.blog-header__date {
	margin: calc(var(--okp-space-2) * -1) 0 var(--okp-space-4);
	color: var(--okp-text);
	font-size: 14px;
}

.blog-layout {
	display: grid;
	gap: var(--okp-space-4);
}

@media (min-width: 992px) {
	.blog-layout {
		grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
		align-items: start;
	}
}

.blog-content {
	max-width: 100%;
	color: var(--okp-text);
}

.blog-content h2 {
	margin-top: var(--okp-space-5);
}

.blog-content h3 {
	margin-top: var(--okp-space-4);
	font-size: 18px;
}

.blog-content blockquote {
	margin: var(--okp-space-3) 0;
	padding: var(--okp-space-2) var(--okp-space-3);
	border-left: 3px solid var(--okp-primary);
	background: var(--okp-archive-bg);
	color: var(--okp-heading);
}

.blog-sidebar {
	padding: var(--okp-space-3);
	background: var(--okp-light-blue);
	color: var(--okp-white);
}

.blog-sidebar h3 {
	margin-top: 0;
	color: var(--okp-white);
}

.blog-sidebar ul {
	margin: 0;
	padding-left: var(--okp-space-3);
}

.blog-sidebar a {
	color: var(--okp-white);
	font-weight: 600;
}

/* Callout-boxen (vc_cta-vervanger) */
.callout-box {
	display: flex;
	gap: var(--okp-space-2);
	align-items: flex-start;
	margin: var(--okp-space-3) 0;
	padding: var(--okp-space-3);
	color: var(--okp-white);
}

.callout-box__icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.callout-box__title {
	display: block;
	margin-bottom: var(--okp-space-1);
}

.callout-box__body p:last-child {
	margin-bottom: 0;
}

.callout-box--primary {
	background: var(--okp-primary);
}

.callout-box--info {
	background: var(--okp-light-blue);
}

.callout-box--dark {
	background: var(--okp-dark-blue);
}

/* Productgrid binnen blogcontent, hergebruikt .product-card */
.blog-products {
	margin: var(--okp-space-4) 0;
}

.blog-products__heading {
	margin-bottom: var(--okp-space-3);
}

.blog-products__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--okp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.blog-products__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Blogarchief */
.blog-list {
	display: grid;
	gap: var(--okp-space-4);
	margin-bottom: var(--okp-space-4);
}

.blog-card {
	padding-bottom: var(--okp-space-4);
	border-bottom: 1px solid var(--okp-border);
}

.blog-card__date {
	margin: 0 0 var(--okp-space-1);
	color: var(--okp-text);
	font-size: 14px;
}

.blog-card__title {
	margin: 0 0 var(--okp-space-2);
}

.blog-card__title a {
	color: var(--okp-heading);
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--okp-primary);
}

.blog-card__excerpt {
	color: var(--okp-text);
}

.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--okp-space-1);
	color: var(--okp-primary);
	font-weight: 700;
	text-decoration: none;
}

.blog-card__link:hover {
	text-decoration: underline;
}

/*** kenteken check pagina ****/

.kenteken_checker {
	position: relative;
    display: flex;
    padding: 30px;
    background: url(https://oliekampioen.nl/wp-content/uploads/2024/05/Kenteken-check-1-800x600.jpg) center center;
    max-height: 400px;
    min-height: 400px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
}
.kenteken_checker h1, .kenteken_checker p{
    color: white;
	z-index: 2;
}
.kenteken_checker::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #2323238f;
    z-index: 1;
}

article#post-14 {
    max-width: 100%;
}