/*
Theme Name: Heima Scooters
Theme URI: https://www.heimascooters.nl
Description: Child-theme voor Heima Scooters, Den Ham. Huisstijl, scooteroverzicht en detailpagina's.
Author: SDissign
Author URI: https://www.sdissign.nl
Template: kadence
Version: 1.0.0
Text Domain: heima
*/

/* ==========================================================================
   1. Huisstijl — komt uit het bestaande Heima-logo en de oude stylesheet
   ========================================================================== */

:root {
	--heima-red: #b60a0a;
	--heima-red-dark: #8e0808;
	--heima-red-soft: #fdf2f2;
	--heima-black: #1a171b;
	--heima-ink: #363434;
	--heima-muted: #6b6768;
	--heima-line: #e4e2e2;
	--heima-grey: #e9e9e9;
	--heima-off: #f6f5f5;
	--heima-white: #fff;
	--heima-green: #1e7a3c;

	--heima-radius: 6px;
	--heima-radius-lg: 10px;
	--heima-shadow: 0 1px 2px rgba(26, 23, 27, .06), 0 8px 24px rgba(26, 23, 27, .06);
	--heima-shadow-hover: 0 2px 4px rgba(26, 23, 27, .08), 0 16px 40px rgba(26, 23, 27, .12);
	--heima-max: 1240px;
	--heima-gap: clamp(1rem, 2.5vw, 2rem);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

body {
	color: var(--heima-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .heima-display {
	color: var(--heima-black);
	letter-spacing: -.02em;
	text-wrap: balance;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

.heima-wrap {
	max-width: var(--heima-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.heima-section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.heima-section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.heima-section--off { background: var(--heima-off); }
.heima-section--dark { background: var(--heima-black); color: #d9d6d7; }
.heima-section--dark h2,
.heima-section--dark h3 { color: #fff; }

.heima-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.heima-section__head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	line-height: 1.15;
}

.heima-section__head p {
	margin: .4rem 0 0;
	color: var(--heima-muted);
	max-width: 58ch;
}

.heima-eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--heima-red);
	margin-bottom: .5rem;
}

/* ==========================================================================
   3. Knoppen
   ========================================================================== */

.heima-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border-radius: var(--heima-radius);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.heima-btn:hover { transform: translateY(-1px); }
.heima-btn:focus-visible { outline: 3px solid var(--heima-red); outline-offset: 2px; }

.heima-btn--primary { background: var(--heima-red); color: #fff; }
.heima-btn--primary:hover { background: var(--heima-red-dark); color: #fff; }

.heima-btn--dark { background: var(--heima-black); color: #fff; }
.heima-btn--dark:hover { background: #000; color: #fff; }

.heima-btn--ghost { border-color: var(--heima-line); color: var(--heima-black); background: #fff; }
.heima-btn--ghost:hover { border-color: var(--heima-black); color: var(--heima-black); }

.heima-btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.heima-btn--light:hover { background: #fff; color: var(--heima-black); }

.heima-btn--block { width: 100%; }

/* ==========================================================================
   4. Topbalk en header
   ========================================================================== */

.heima-topbar {
	background: var(--heima-black);
	color: #cfcbcc;
	font-size: .85rem;
}

.heima-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	min-height: 40px;
	padding-block: .35rem;
}

.heima-topbar a { color: #fff; text-decoration: none; }
.heima-topbar a:hover { text-decoration: underline; }

.heima-topbar__items {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	align-items: center;
}

.heima-open {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
}

.heima-open::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--heima-green);
}

.heima-open--closed { color: #cfcbcc; }
.heima-open--closed::before { background: #8a8586; }

/* ==========================================================================
   5. Hero
   ========================================================================== */

.heima-hero {
	position: relative;
	background: var(--heima-black);
	color: #fff;
	overflow: hidden;
}

.heima-hero__media {
	position: absolute;
	inset: 0;
}

.heima-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .42;
}

.heima-hero__inner {
	position: relative;
	padding-block: clamp(3rem, 9vw, 6.5rem);
	max-width: 46rem;
}

.heima-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.05;
	margin: 0 0 1rem;
}

.heima-hero p {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: #e6e3e4;
	margin: 0 0 1.75rem;
	max-width: 40rem;
}

.heima-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.heima-hero__count {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: .35rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: 1.1rem;
}

/* ==========================================================================
   6. USP-balk
   ========================================================================== */

.heima-usps {
	background: #fff;
	border-bottom: 1px solid var(--heima-line);
}

.heima-usps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem 2rem;
	padding-block: 1.15rem;
}

.heima-usp {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .92rem;
	line-height: 1.35;
}

.heima-usp strong { display: block; color: var(--heima-black); }
.heima-usp span { color: var(--heima-muted); font-size: .85rem; }

.heima-usp__check {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .1rem;
	border-radius: 50%;
	background: var(--heima-red-soft);
	color: var(--heima-red);
	display: grid;
	place-items: center;
	font-size: .7rem;
	font-weight: 900;
}

/* ==========================================================================
   7. Scooterkaarten
   ========================================================================== */

.heima-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.heima-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.heima-card:hover {
	box-shadow: var(--heima-shadow-hover);
	border-color: transparent;
	transform: translateY(-2px);
}

.heima-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--heima-off);
	overflow: hidden;
}

.heima-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.heima-card__media--empty {
	display: grid;
	place-items: center;
	color: var(--heima-muted);
	font-size: .8rem;
}

.heima-badges {
	position: absolute;
	top: .6rem;
	left: .6rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	z-index: 2;
}

.heima-badge {
	display: inline-block;
	padding: .22rem .55rem;
	border-radius: 4px;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--heima-black);
	color: #fff;
}

.heima-badge--new { background: var(--heima-red); }
.heima-badge--occasion { background: var(--heima-black); }
.heima-badge--sold { background: #6b6768; }
.heima-badge--stock { background: var(--heima-green); }

.heima-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: .9rem 1rem 1rem;
}

.heima-card__brand {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--heima-red);
}

.heima-card__title {
	margin: .15rem 0 .55rem;
	font-size: 1.02rem;
	line-height: 1.25;
	font-weight: 700;
}

.heima-card__title a {
	color: var(--heima-black);
	text-decoration: none;
}

.heima-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.heima-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .85rem;
	margin: 0 0 .8rem;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	color: var(--heima-muted);
}

.heima-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-top: auto;
	padding-top: .7rem;
	border-top: 1px solid var(--heima-line);
}

.heima-card__price {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--heima-black);
}

.heima-card__price small {
	display: block;
	font-size: .72rem;
	font-weight: 500;
	color: var(--heima-muted);
}

.heima-card__cta {
	font-size: .85rem;
	font-weight: 700;
	color: var(--heima-red);
}

.heima-card.is-sold .heima-card__media img { filter: grayscale(1); opacity: .65; }

/* ==========================================================================
   8. Categorietegels en merken
   ========================================================================== */

.heima-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem;
}

.heima-tile {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 130px;
	padding: 1rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	background: #fff;
	text-decoration: none;
	color: var(--heima-black);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.heima-tile:hover {
	border-color: var(--heima-red);
	box-shadow: var(--heima-shadow);
	transform: translateY(-2px);
	color: var(--heima-black);
}

.heima-tile strong { font-size: 1.02rem; }
.heima-tile span { font-size: .82rem; color: var(--heima-muted); }

.heima-brands {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.heima-brands a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem;
	border: 1px solid var(--heima-line);
	border-radius: 999px;
	background: #fff;
	font-size: .88rem;
	font-weight: 600;
	color: var(--heima-black);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.heima-brands a:hover { border-color: var(--heima-red); color: var(--heima-red); }
.heima-brands a span { color: var(--heima-muted); font-weight: 500; font-size: .8rem; }

/* ==========================================================================
   9. Scooterdetail
   ========================================================================== */

.heima-single {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	.heima-single { grid-template-columns: 1fr; }
}

.heima-buy {
	position: sticky;
	top: 1.5rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	padding: 1.35rem;
	background: #fff;
	box-shadow: var(--heima-shadow);
}

.heima-buy__price {
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--heima-black);
	line-height: 1;
}

.heima-buy__price small {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	color: var(--heima-muted);
	margin-top: .35rem;
}

.heima-buy__actions {
	display: grid;
	gap: .55rem;
	margin: 1.15rem 0;
}

.heima-buy__note {
	font-size: .82rem;
	color: var(--heima-muted);
	line-height: 1.45;
	margin: 0;
}

.heima-buy__contact {
	margin-top: 1.15rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--heima-line);
	font-size: .88rem;
}

.heima-buy__contact a { color: var(--heima-black); font-weight: 700; }

.heima-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}

.heima-specs th,
.heima-specs td {
	padding: .6rem .1rem;
	text-align: left;
	border-bottom: 1px solid var(--heima-line);
	vertical-align: top;
}

.heima-specs th {
	width: 42%;
	font-weight: 600;
	color: var(--heima-muted);
}

.heima-specs td { font-weight: 600; color: var(--heima-black); }

.heima-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: .6rem;
	margin-top: .6rem;
}

.heima-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--heima-radius);
	border: 1px solid var(--heima-line);
}

.heima-sold-note {
	background: var(--heima-off);
	border-left: 3px solid var(--heima-muted);
	padding: .9rem 1.1rem;
	border-radius: var(--heima-radius);
	font-size: .92rem;
}

/* ==========================================================================
   10. Overzicht met filters
   ========================================================================== */

.heima-archive {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

@media (max-width: 860px) {
	.heima-archive { grid-template-columns: 1fr; }
	.heima-filters { position: static; }
}

.heima-filters {
	position: sticky;
	top: 1.5rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	background: #fff;
	padding: 1.1rem 1.2rem 1.3rem;
}

.heima-filters h2 {
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--heima-muted);
	margin: 0 0 .8rem;
}

.heima-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.1rem;
}

.heima-filters legend {
	font-weight: 700;
	font-size: .92rem;
	margin-bottom: .45rem;
	padding: 0;
}

.heima-filters label {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .89rem;
	padding: .18rem 0;
	cursor: pointer;
}

.heima-filters label span { color: var(--heima-muted); font-size: .8rem; }

.heima-filters__row {
	display: flex;
	gap: .5rem;
}

.heima-filters input[type="number"],
.heima-filters input[type="search"],
.heima-filters select {
	width: 100%;
	padding: .45rem .55rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	font-size: .88rem;
}

.heima-filters input[type="search"]:focus,
.heima-filters input[type="number"]:focus {
	border-color: var(--heima-red);
	box-shadow: 0 0 0 3px rgba(182, 10, 10, .12);
	outline: none;
}

.heima-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--heima-line);
}

.heima-toolbar__count { font-size: .9rem; color: var(--heima-muted); }
.heima-toolbar__count strong { color: var(--heima-black); }

/* ==========================================================================
   11. Blokken: werkplaats, inruil, contact
   ========================================================================== */

.heima-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

.heima-panel {
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	background: #fff;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.heima-panel--accent {
	background: var(--heima-red);
	border-color: var(--heima-red);
	color: #fff;
}

.heima-panel--accent h2,
.heima-panel--accent h3 { color: #fff; }

.heima-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.heima-list li {
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	font-size: .95rem;
}

.heima-list li::before {
	content: "✓";
	color: var(--heima-red);
	font-weight: 900;
	line-height: 1.4;
}

.heima-panel--accent .heima-list li::before { color: #fff; }

.heima-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}

.heima-hours td {
	padding: .42rem 0;
	border-bottom: 1px solid var(--heima-line);
}

.heima-hours td:last-child { text-align: right; font-weight: 600; }
.heima-hours tr.is-today td { color: var(--heima-red); font-weight: 700; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.heima-footer {
	background: var(--heima-black);
	color: #b8b4b5;
	font-size: .92rem;
}

.heima-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 2rem;
	padding-block: clamp(2.25rem, 5vw, 3.25rem);
}

.heima-footer h3 {
	color: #fff;
	font-size: .8rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	margin: 0 0 .9rem;
}

.heima-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.heima-footer a { color: #d7d4d5; text-decoration: none; }
.heima-footer a:hover { color: #fff; text-decoration: underline; }
.heima-footer .heima-hours td { border-color: rgba(255, 255, 255, .12); }

.heima-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	font-size: .84rem;
	color: #8a8586;
}

/* ==========================================================================
   13. Kleine dingen
   ========================================================================== */

.heima-note {
	font-size: .86rem;
	color: var(--heima-muted);
}

.heima-crumbs {
	font-size: .84rem;
	color: var(--heima-muted);
	padding-block: .9rem;
}

.heima-crumbs a { color: var(--heima-muted); }
.heima-crumbs a:hover { color: var(--heima-red); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   14. Header en navigatie
   ========================================================================== */

.heima-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--heima-line);
}

.heima-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 72px;
	padding-block: .5rem;
}

.heima-header__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.heima-header__logo img {
	width: auto;
	height: 42px;
}

.heima-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	cursor: pointer;
}

.heima-header__toggle-bars,
.heima-header__toggle-bars::before,
.heima-header__toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--heima-black);
	margin-inline: auto;
	transition: transform .15s ease, opacity .15s ease;
}

.heima-header__toggle-bars::before { content: ""; transform: translateY(-6px); }
.heima-header__toggle-bars::after { content: ""; transform: translateY(4px); }

.heima-header__toggle[aria-expanded="true"] .heima-header__toggle-bars { background: transparent; }
.heima-header__toggle[aria-expanded="true"] .heima-header__toggle-bars::before { transform: rotate(45deg); }
.heima-header__toggle[aria-expanded="true"] .heima-header__toggle-bars::after { transform: rotate(-45deg); }

.heima-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-left: auto;
}

.heima-nav__list {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.heima-nav__list li { position: relative; }

.heima-nav__list a {
	display: block;
	padding: .6rem .7rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--heima-black);
	text-decoration: none;
	border-radius: var(--heima-radius);
}

.heima-nav__list a:hover,
.heima-nav__list .current-menu-item > a,
.heima-nav__list .current-menu-parent > a {
	color: var(--heima-red);
	background: var(--heima-red-soft);
}

.heima-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	display: none;
	list-style: none;
	margin: 0;
	padding: .4rem;
	background: #fff;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	box-shadow: var(--heima-shadow);
	z-index: 60;
}

.heima-nav__list li:hover > .sub-menu,
.heima-nav__list li:focus-within > .sub-menu { display: block; }

.heima-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .32rem;
	height: .32rem;
	margin-left: .4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
}

@media (max-width: 1020px) {
	.heima-header__toggle { display: grid; place-items: center; }

	.heima-nav {
		position: absolute;
		inset: 100% 0 auto;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		padding: 1rem clamp(1rem, 4vw, 2rem) 1.5rem;
		background: #fff;
		border-bottom: 1px solid var(--heima-line);
		box-shadow: var(--heima-shadow);
		max-height: calc(100vh - 112px);
		overflow-y: auto;
	}

	.heima-nav.is-open { display: flex; }

	.heima-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.heima-nav__list a { padding: .75rem .5rem; border-bottom: 1px solid var(--heima-line); border-radius: 0; }

	.heima-nav__list .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 .5rem .75rem;
	}

	.heima-nav__list .sub-menu a { font-weight: 500; font-size: .9rem; }
	.heima-nav__cta { margin-top: .75rem; }
	.heima-nav__cta .heima-btn { width: 100%; }
}

@media (max-width: 640px) {
	.heima-topbar__hide-sm { display: none; }
}

/* ==========================================================================
   15. Kadence-basis bijsturen
   ========================================================================== */

body,
.site,
.content-area,
.content-bg,
.entry-content-wrap {
	background: #fff;
}

.site-container,
.content-container,
.entry-content-wrap,
.content-area {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	box-shadow: none !important;
}

.heima-section { background: #fff; }
.heima-section--off { background: var(--heima-off); }
.heima-section--dark { background: var(--heima-black); }

/* ==========================================================================
   16. Tekstpagina's
   ========================================================================== */

.heima-pagehead {
	background: var(--heima-off);
	border-bottom: 1px solid var(--heima-line);
	padding-block: clamp(1.75rem, 4vw, 3rem);
}

.heima-pagehead h1 {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	line-height: 1.1;
}

.heima-pagehead p {
	margin: .75rem 0 0;
	color: var(--heima-muted);
	font-size: 1.05rem;
	max-width: 62ch;
}

.heima-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.heima-page--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
	.heima-page { grid-template-columns: 1fr; }
}

.heima-prose { max-width: 72ch; }
.heima-prose > * + * { margin-top: 1.1rem; }
.heima-prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2.2rem; }
.heima-prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.heima-prose ul,
.heima-prose ol { padding-left: 1.25rem; }
.heima-prose li + li { margin-top: .35rem; }
.heima-prose a { color: var(--heima-red); }

.heima-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.heima-prose th,
.heima-prose td {
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--heima-line);
	text-align: left;
}

.heima-prose thead th {
	background: var(--heima-off);
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--heima-muted);
}

.heima-prose td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }

.heima-aside { display: grid; gap: 1rem; position: sticky; top: 1.5rem; }

.heima-aside .heima-panel { padding: 1.15rem 1.25rem; }
.heima-aside h2,
.heima-aside h3 { margin: 0 0 .7rem; font-size: 1rem; }

.heima-map {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: var(--heima-radius-lg);
	border: 1px solid var(--heima-line);
	overflow: hidden;
	text-decoration: none;
}

.heima-map img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .25s ease;
}

.heima-map:hover img { transform: scale(1.02); }

.heima-map__cta {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	padding: .6rem 1.1rem;
	border-radius: var(--heima-radius);
	background: var(--heima-red);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(26, 23, 27, .25);
}

.heima-map:hover .heima-map__cta { background: var(--heima-red-dark); }
.heima-map:focus-visible { outline: 3px solid var(--heima-red); outline-offset: 3px; }

.heima-faq { display: grid; gap: .6rem; }

.heima-faq details {
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	background: #fff;
	padding: .9rem 1.1rem;
}

.heima-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--heima-black);
}

.heima-faq details[open] summary { color: var(--heima-red); margin-bottom: .6rem; }

/* ==========================================================================
   17. Bijgeschaafd na de eerste ronde
   ========================================================================== */

.heima-nav__list > li > a { white-space: nowrap; }
.heima-nav { gap: 1rem; }

@media (max-width: 1200px) {
	.heima-nav__cta { display: none; }
}

@media (min-width: 1021px) {
	.heima-nav__list a { padding: .6rem .55rem; font-size: .92rem; }
}

/* Galerij: kleine miniaturen, ook als er maar één foto is. */
.heima-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 150px)); }
.heima-gallery a { display: block; line-height: 0; }

/* ==========================================================================
   18. Fotogalerij en lightbox
   ========================================================================== */

.heima-media__main {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: var(--heima-radius-lg);
	border: 1px solid var(--heima-line);
	overflow: hidden;
	background: var(--heima-off);
	cursor: zoom-in;
}

.heima-media__main img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.heima-media__zoom {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: rgba(26, 23, 27, .78);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.4;
	opacity: 0;
	transition: opacity .15s ease;
}

.heima-media__main:hover .heima-media__zoom,
.heima-media__main:focus-visible .heima-media__zoom { opacity: 1; }

.heima-media__thumb {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: var(--heima-radius);
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
}

.heima-media__thumb img {
	border: 1px solid var(--heima-line);
	border-radius: calc(var(--heima-radius) - 2px);
}

.heima-media__thumb:hover img { border-color: var(--heima-muted); }
.heima-media__thumb.is-active { border-color: var(--heima-red); }
.heima-media__thumb.is-active img { border-color: transparent; }

.heima-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
	gap: clamp(.5rem, 2vw, 1.5rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(12, 10, 12, .93);
}

.heima-lightbox.is-open { display: flex; }
body.heima-lightbox-open { overflow: hidden; }

.heima-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}

.heima-lightbox__figure img {
	max-width: 100%;
	max-height: calc(100vh - 8rem);
	width: auto;
	height: auto;
	border-radius: var(--heima-radius);
	background: #fff;
}

.heima-lightbox__count {
	color: #cfcbcc;
	font-size: .85rem;
	letter-spacing: .04em;
}

.heima-lightbox__close,
.heima-lightbox__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	/* padding: 0 is nodig. Het thema geeft button-elementen een em-padding en die
	   duwt bij box-sizing: border-box de vaste breedte op tot een ovaal. */
	padding: 0;
	width: 48px;
	height: 48px;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Alle statussen expliciet, anders kleurt de focusstijl van het thema ze blauw. */
.heima-lightbox__close:hover,
.heima-lightbox__close:active,
.heima-lightbox__nav:hover,
.heima-lightbox__nav:active {
	background: var(--heima-red);
	border-color: var(--heima-red);
	color: #fff;
	box-shadow: none;
}

.heima-lightbox__close:focus,
.heima-lightbox__nav:focus {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .25);
	color: #fff;
	box-shadow: none;
}

.heima-lightbox__close:focus-visible,
.heima-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.heima-lightbox__close {
	position: absolute;
	top: clamp(.75rem, 2vw, 1.5rem);
	right: clamp(.75rem, 2vw, 1.5rem);
	font-size: 1.9rem;
}

.heima-lightbox--single .heima-lightbox__nav { display: none; }

@media (max-width: 640px) {
	.heima-lightbox__nav {
		position: absolute;
		bottom: 1.25rem;
	}
	.heima-lightbox__nav--prev { left: 1.25rem; }
	.heima-lightbox__nav--next { right: 1.25rem; }
	.heima-lightbox__figure img { max-height: calc(100vh - 10rem); }
}

/* ==========================================================================
   19. Kadence-palet op de Heima-huisstijl zetten
   --------------------------------------------------------------------------
   Kadence bouwt zijn hele kleurgebruik op --global-palette1..9. Door die hier
   te overschrijven krijgen ook de kernblokken (knoppen, links, formulieren)
   automatisch de Heima-kleuren, in plaats van het blauwe standaardpalet.
   ========================================================================== */

:root,
body {
	--global-palette1: #b60a0a;
	--global-palette2: #8e0808;
	--global-palette3: #1a171b;
	--global-palette4: #363434;
	--global-palette5: #6b6768;
	--global-palette6: #e4e2e2;
	--global-palette7: #f6f5f5;
	--global-palette8: #ffffff;
	--global-palette9: #ffffff;
	--global-palette1-rgb: 182, 10, 10;
	--global-palette-highlight: #b60a0a;
	--global-palette-highlight-alt: #8e0808;
	--global-palette-highlight-alt2: #ffffff;
	--global-palette-btn-bg: #b60a0a;
	--global-palette-btn-bg-hover: #8e0808;
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;
}

/* ==========================================================================
   20. Kernblokken in tekstpagina's
   ========================================================================== */

.heima-prose .wp-block-button__link,
.heima-prose button:not(.heima-btn),
.heima-prose input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--heima-radius);
	background: var(--heima-red);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .15s ease, transform .15s ease;
}

.heima-prose .wp-block-button__link:hover,
.heima-prose .wp-block-button__link:focus,
.heima-prose .wp-block-button__link:active,
.heima-prose button:not(.heima-btn):hover,
.heima-prose input[type="submit"]:hover {
	background: var(--heima-red-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: none;
}

.heima-prose .wp-block-button__link:focus-visible {
	outline: 3px solid var(--heima-red);
	outline-offset: 2px;
}

.heima-prose .wp-block-buttons { margin-top: 1.75rem; }
.heima-prose .wp-block-table { margin: 0; }

/* Knopstatussen van onze eigen knoppen ook expliciet vastzetten. */
.heima-btn:focus,
.heima-btn:active { box-shadow: none; }

.heima-btn--primary:focus,
.heima-btn--primary:active { background: var(--heima-red-dark); color: #fff; }

.heima-btn--dark:focus,
.heima-btn--dark:active { background: #000; color: #fff; }

.heima-btn--ghost:focus,
.heima-btn--ghost:active { background: #fff; color: var(--heima-black); border-color: var(--heima-black); }

.heima-btn--light:focus,
.heima-btn--light:active { background: #fff; color: var(--heima-black); }

/* Kadence geeft submit-knoppen een eigen em-padding; de filterknop is er een. */
.heima-filters button.heima-btn { padding: .8rem 1.5rem; min-width: 0; }

/* ==========================================================================
   21. Formulieren (Fluent Forms)
   ========================================================================== */

.frm-fluent-form { margin-top: 1.25rem; }

.frm-fluent-form .ff-el-group { margin-bottom: 1.1rem; }

.frm-fluent-form .ff-el-input--label label {
	font-weight: 600;
	font-size: .93rem;
	color: var(--heima-black);
	margin-bottom: .35rem;
}

.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after {
	color: var(--heima-red);
	margin-left: .15rem;
}

.frm-fluent-form .ff-el-form-control {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	color: var(--heima-ink);
	font-size: .97rem;
	line-height: 1.45;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--heima-red);
	box-shadow: 0 0 0 3px rgba(182, 10, 10, .12);
	outline: none;
}

.frm-fluent-form textarea.ff-el-form-control { min-height: 8rem; resize: vertical; }

.frm-fluent-form .ff-el-input--content .ff-el-help-message {
	color: var(--heima-muted);
	font-size: .82rem;
	margin-top: .3rem;
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--heima-red); }
.frm-fluent-form .text-danger,
.frm-fluent-form .error { color: var(--heima-red); font-size: .85rem; }

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff_btn_style {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.6rem;
	min-width: 0;
	border: 2px solid var(--heima-red);
	border-radius: var(--heima-radius);
	background: var(--heima-red);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus,
.frm-fluent-form .ff-btn-submit:active {
	background: var(--heima-red-dark);
	border-color: var(--heima-red-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: none;
}

/* ==========================================================================
   22. Paginering
   ========================================================================== */

.heima-paginatie {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--heima-line);
}

.heima-paginatie .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.heima-paginatie .page-numbers li { margin: 0; }

.heima-paginatie li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .7rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	color: var(--heima-black);
	font-size: .93rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.heima-paginatie li a.page-numbers:hover,
.heima-paginatie li a.page-numbers:focus-visible {
	border-color: var(--heima-red);
	color: var(--heima-red);
}

.heima-paginatie li .page-numbers.current {
	background: var(--heima-red);
	border-color: var(--heima-red);
	color: #fff;
}

.heima-paginatie li .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
	padding: 0;
	color: var(--heima-muted);
}

.heima-paginatie li .prev,
.heima-paginatie li .next { gap: .4rem; font-weight: 700; }

.heima-paginatie__stand {
	margin: .9rem 0 0;
	text-align: center;
	font-size: .85rem;
	color: var(--heima-muted);
}

/* Op een telefoon zijn losse paginanummers te klein om te raken; laat dan
   alleen vorige/volgende en de huidige pagina staan. */
@media (max-width: 560px) {
	.heima-paginatie li .page-numbers:not(.prev):not(.next):not(.current) { display: none; }
	.heima-paginatie li .prev,
	.heima-paginatie li .next { flex: 1 1 auto; }
}

/* ==========================================================================
   23. Zoeken
   ========================================================================== */

.heima-header__acties {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
	order: 3;
}

.heima-header__logo { order: 1; }
.heima-nav { order: 2; }

.heima-header__zoek {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	color: var(--heima-black);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.heima-header__zoek:hover,
.heima-header__zoek[aria-expanded="true"] {
	border-color: var(--heima-red);
	color: var(--heima-red);
}

.heima-searchbar {
	border-top: 1px solid var(--heima-line);
	background: var(--heima-off);
	padding-block: .9rem;
}

.heima-zoek {
	display: flex;
	gap: .5rem;
}

.heima-zoek input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7rem .9rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	color: var(--heima-ink);
	font-size: .97rem;
	line-height: 1.45;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.heima-zoek input[type="search"]::placeholder { color: var(--heima-muted); }

.heima-zoek input[type="search"]:focus {
	border-color: var(--heima-red);
	box-shadow: 0 0 0 3px rgba(182, 10, 10, .12);
	outline: none;
}

.heima-zoek .heima-btn { flex: 0 0 auto; }

/* In de hero staat het veld op een donkere foto; dan mag het wat forser. */
.heima-zoek--hero {
	max-width: 34rem;
	margin: 0 0 1.5rem;
}

.heima-zoek--hero input[type="search"] {
	padding: .85rem 1rem;
	border-color: transparent;
	font-size: 1rem;
}

.heima-zoek--groot {
	max-width: 34rem;
	margin-top: 1rem;
}

.heima-zoek--groot input[type="search"] { padding: .85rem 1rem; }

/* Op een telefoon blijven veld en knop naast elkaar staan: een knop over de
   volle breedte kost daar te veel hoogte in de hero. */
@media (max-width: 520px) {
	.heima-zoek input[type="search"] { padding-inline: .75rem; }
	.heima-zoek .heima-btn { padding-inline: 1rem; }
}

/* ==========================================================================
   24. Pagina niet gevonden
   ========================================================================== */

.heima-404 {
	display: grid;
	gap: clamp(2rem, 5vw, 3rem);
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.heima-404 h2 {
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	margin: 0 0 .6rem;
}

.heima-404 .heima-note { margin: 0; }

.heima-404 .heima-panel p:first-of-type { color: var(--heima-ink); }

.heima-404 .heima-panel .heima-btn { margin-right: .5rem; }

.frm-fluent-form .ff-btn-submit:focus-visible { outline: 3px solid var(--heima-red); outline-offset: 2px; }

.ff-message-success {
	border: 1px solid var(--heima-green);
	border-left-width: 3px;
	border-radius: var(--heima-radius);
	background: #f2f9f4;
	padding: 1rem 1.15rem;
	color: var(--heima-ink);
}

.ff-message-success p { margin: 0; }

/* ==========================================================================
   25. Webshop — artikelen naast de scooters

   Zelfde ontwerptaal, ander gedrag. De kaart hergebruikt de omlijsting van de
   scooterkaart; alleen de inhoud van de voet verschilt.
   ========================================================================== */

/* --- Winkelwagen in de header ------------------------------------------- */

.heima-header__wagen {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	color: var(--heima-black);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.heima-header__wagen:hover { border-color: var(--heima-red); color: var(--heima-red); }
.heima-header__wagen.is-gevuld { border-color: var(--heima-red); color: var(--heima-red); }

.heima-header__wagen-aantal {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--heima-red);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
}

/* --- Artikelkaart -------------------------------------------------------- */

.heima-card--artikel .heima-card__media {
	display: block;
	background: #fff;
}

/* Onderdelen en helmen staan op een witte studio-achtergrond; bijsnijden
   zou de helft van de helm afhakken. Dus passend maken, niet vullen. */
.heima-card--artikel .heima-card__media img {
	object-fit: contain;
	padding: .6rem;
}

.heima-card__geen-foto {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--heima-muted);
	font-size: .8rem;
}

.heima-badge--sale { background: var(--heima-red); }

.heima-voorraad {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--heima-muted);
	margin: .15rem 0 .5rem;
}

.heima-voorraad::before {
	content: "";
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: currentColor;
}

.heima-voorraad.is-voorradig { color: var(--heima-green); }
.heima-voorraad.is-besteld { color: var(--heima-muted); }

.heima-card__foot--artikel {
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.heima-prijs__nu { font-weight: 800; }
.heima-prijs__was { color: var(--heima-muted); font-weight: 500; font-size: .85em; margin-left: .3rem; }
.heima-prijs__op-aanvraag { font-size: .92rem; font-weight: 700; color: var(--heima-muted); }

.heima-btn--klein {
	padding: .5rem .85rem;
	font-size: .84rem;
	border-width: 1px;
}

.heima-tile--klein { min-height: 0; }
.heima-tile--klein span { color: var(--heima-red); font-weight: 700; }

.heima-telling {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--heima-red-soft);
	color: var(--heima-red);
	font-size: .72em;
	font-weight: 800;
	vertical-align: middle;
}

/* --- Artikelpagina ------------------------------------------------------- */

.heima-buy__merk {
	display: inline-block;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--heima-red);
	text-decoration: none;
}

.heima-buy .heima-voorraad { margin: 0 0 1rem; font-size: .88rem; }

.heima-buy__cart { margin-bottom: 1rem; }

/* WooCommerce's eigen bestelformulier in de huisstijl trekken. */
.heima-buy__cart .variations {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
}

.heima-buy__cart .variations th,
.heima-buy__cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	border: 0;
}

.heima-buy__cart .variations th label {
	font-weight: 700;
	font-size: .9rem;
	margin-bottom: .35rem;
	display: block;
}

.heima-buy__cart select,
.heima-buy__cart .qty {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	background: #fff;
	font-size: .97rem;
}

.heima-buy__cart select:focus,
.heima-buy__cart .qty:focus {
	border-color: var(--heima-red);
	box-shadow: 0 0 0 3px rgba(182, 10, 10, .12);
	outline: none;
}

.heima-buy__cart .reset_variations {
	display: inline-block;
	margin-bottom: .75rem;
	font-size: .82rem;
	color: var(--heima-muted);
}

.heima-buy__cart .woocommerce-variation-price { margin-bottom: .75rem; font-weight: 700; }
.heima-buy__cart .woocommerce-variation-availability { margin-bottom: .75rem; font-size: .88rem; }

.heima-buy__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: flex-end;
	margin: 0;
}

.heima-buy__cart form.variations_form { display: block; }

.heima-buy__cart .quantity { flex: 0 0 5.5rem; }
.heima-buy__cart .quantity .screen-reader-text { position: absolute; }

.heima-buy__cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: flex-end;
}

.heima-buy__cart button.single_add_to_cart_button {
	flex: 1 1 10rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.5rem;
	min-width: 0;
	border: 2px solid var(--heima-red);
	border-radius: var(--heima-radius);
	background: var(--heima-red);
	color: #fff;
	font-weight: 700;
	font-size: .97rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.heima-buy__cart button.single_add_to_cart_button:hover,
.heima-buy__cart button.single_add_to_cart_button:focus {
	background: var(--heima-red-dark);
	border-color: var(--heima-red-dark);
	color: #fff;
}

.heima-buy__cart button.single_add_to_cart_button.disabled,
.heima-buy__cart button.single_add_to_cart_button:disabled {
	background: var(--heima-grey);
	border-color: var(--heima-grey);
	color: var(--heima-muted);
	cursor: not-allowed;
}

/* --- Winkelwagen, afrekenen en meldingen --------------------------------- */

.woocommerce-notices-wrapper { max-width: var(--heima-max); margin: 1rem auto 0; padding-inline: clamp(1rem, 4vw, 2rem); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1rem;
	padding: .9rem 1.1rem;
	border: 1px solid var(--heima-line);
	border-left: 4px solid var(--heima-red);
	border-radius: var(--heima-radius);
	background: #fff;
	list-style: none;
	font-size: .95rem;
}

.woocommerce-message { border-left-color: var(--heima-green); }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	overflow: hidden;
	background: #fff;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--heima-line);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--heima-muted);
	background: var(--heima-off);
}

.woocommerce table.shop_table img { width: 56px; height: auto; border-radius: 4px; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: 1.15rem; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.5rem;
	min-width: 0;
	border: 2px solid var(--heima-black);
	border-radius: var(--heima-radius);
	background: var(--heima-black);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #000; border-color: #000; color: #fff; }

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--heima-red);
	border-color: var(--heima-red);
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover { background: var(--heima-red-dark); border-color: var(--heima-red-dark); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	padding: .7rem .85rem;
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius);
	font-size: .97rem;
	line-height: 1.45;
	height: auto;
}

.woocommerce form .form-row label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	border: 1px solid var(--heima-line);
	border-radius: var(--heima-radius-lg);
	background: #fff;
	padding: 1.25rem;
}

.heima-webshopblok .heima-section__head p { max-width: 60ch; }

.heima-voorraad.is-op { color: var(--heima-red); }

/* Zolang er geen maat gekozen is staat de knop uit. WooCommerce maakt hem dan
   half doorzichtig rood; grijs is duidelijker dan een verbleekte bestelknop. */
.heima-buy__cart .single_add_to_cart_button.disabled,
.heima-buy__cart .single_add_to_cart_button.wc-variation-selection-needed,
.heima-buy__cart button.single_add_to_cart_button:disabled {
	background: var(--heima-grey);
	border-color: var(--heima-grey);
	color: var(--heima-muted);
	opacity: 1;
	cursor: not-allowed;
}

.heima-buy__cart .woocommerce-variation:empty,
.heima-buy__cart .woocommerce-variation-description:empty,
.heima-buy__cart .woocommerce-variation-price:empty,
.heima-buy__cart .woocommerce-variation-availability:empty { display: none; margin: 0; }

.heima-buy__cart .woocommerce-variation { margin-bottom: .75rem; }
.heima-buy__cart .variations tbody tr + tr th { margin-top: .75rem; }

/* ==========================================================================
   26. Kleurkeuze
   
   De maat is een keuzelijst (die heeft een prijs en voorraad), de kleur een
   rij stipjes. Bewust geen keuzelijst: bij kleur wil je zien wat je kiest.
   ========================================================================== */

/* Het bestelformulier is een flexrij (aantal + knop), dus expliciet de volle
   breedte pakken. Anders komt het aantalveld naast de stipjes te staan. */
.heima-kleuren {
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 1rem;
}

.heima-kleuren__label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: .5rem;
}

/* De naam van de gekozen kleur, zodat er ook iets in woorden staat: een
   bolletje is geen bevestiging en niet elke klant ziet kleur even goed. */
.heima-kleuren__gekozen {
	font-weight: 400;
	color: #555;
}

.heima-kleuren__rij {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.heima-kleur { cursor: pointer; }

/* Het rondje zelf is de knop; het invoerveld blijft bereikbaar voor
   toetsenbord en schermlezer, maar staat niet in de weg. */
.heima-kleur input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.heima-kleur__stip {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
	transition: box-shadow .12s ease, transform .12s ease;
}

/* Heeft de kleur een eigen foto, dan is de swatch de helm zelf. Dat is
   eerlijker dan een geverfd bolletje: "Nardo Grijs" zegt een klant niets,
   de foto wel. Wit als ondergrond omdat de bronfoto's dat ook hebben. */
.heima-kleur--foto .heima-kleur__stip {
	width: 2.75rem;
	height: 2.75rem;
	background-color: #fff;
	background-repeat: no-repeat;

	/* Ingezoomd op de schaal van de helm: op 44px is een compleet product op een
	   witte achtergrond een grijze vlek. Zo vult de kap het rondje en zie je
	   waar het om gaat — de kleur. */
	background-position: center 42%;
	background-size: 165%;
}

.heima-kleur__naam {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.heima-kleur:hover .heima-kleur__stip { transform: scale(1.06); }

.heima-kleur input:checked + .heima-kleur__stip {
	box-shadow:
		inset 0 0 0 1px rgb(0 0 0 / .18),
		0 0 0 2px #fff,
		0 0 0 4px var(--heima-red);
}

.heima-kleur input:focus-visible + .heima-kleur__stip {
	outline: 2px solid var(--heima-red);
	outline-offset: 3px;
}

/* De gekozen kleur in de winkelwagen en op de bestelling. */
.heima-kleuren + .quantity { margin-top: 0; }

/* ==========================================================================
   27. Aanvraagpaneel
   
   Wat hier stond was het bestelformulier van WooCommerce. Er wordt niets
   afgerekend op deze site, dus kiest de klant hier zijn maat en kleur en
   gaat die keuze mee naar het contactformulier.
   ========================================================================== */

.heima-keuze { margin: 0 0 1rem; }

.heima-keuze__label {
	display: block;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: .4rem;
}

.heima-keuze__select {
	width: 100%;
	padding: .7rem .9rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
}

.heima-keuze__select:focus-visible {
	outline: 2px solid var(--heima-red);
	outline-offset: 1px;
}

.heima-aanvraag__knop {
	display: block;
	width: 100%;
	margin-top: .25rem;
	text-align: center;
}

.heima-aanvraag__note {
	margin: .7rem 0 0;
	font-size: .82rem;
	line-height: 1.45;
	color: #555;
}