/*
Theme Name: Wijdeven
Theme URI: https://www.wijdeven.net/
Author: DevTonic Studios
Author URI: https://devtonicstudios.com/
Description: Built for Wijdeven wand- en dakbeplating in Boekel. A yard with 55.503 m2
 standing outside sells from a priced stock list, not a brochure, so this is a ruled
 catalogue: one visible line, no radius, no shadow, numbers set like a price list, and
 the m2 actually in Boekel printed next to every article.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wijdeven
Tags: e-commerce, full-site-editing, block-patterns, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
*/

/*
 * The palette and the type ramp are in theme.json. What lives here is everything
 * the block API cannot say, and it is mostly the five moves that separate a
 * merchant's catalogue from a theme with a colour swapped in.
 */

:root {
	--wj-rule: var(--wp--preset--color--rule);
	--wj-hair: var(--wp--preset--color--hairline);
}

/* ------------------------------------------------------------------ MOVE 1
   One visible line. No radius, no shadow, no gutter.
   The old build used #dbe1e7 on white, which measures 1.32:1 against the 3.0
   that WCAG 1.4.11 asks of a non-text boundary. In daylight on a phone it is not
   there at all, so every separation fell back to empty space and the page read
   as a portfolio. #928e84 on #f7f5f0 measures 3.00. */

*,
*::before,
*::after {
	border-radius: 0;
	box-shadow: none;
}

/* The two exceptions the spec allows, and nothing else. */
.wp-element-button,
.wc-block-components-button,
button,
input[type="submit"] {
	border-radius: 2px;
}

.wj-pill {
	border-radius: 999px;
}

/* ------------------------------------------------------------------ MOVE 3
   The ink band and the oxide rule. The 3px red under the header is the most
   efficient red in the build. */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 3px solid var(--wp--preset--color--oxide);
}

.wj-bar {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.wj-bar a {
	color: #fff;
	text-decoration: none;
}

.wj-tel {
	color: var(--wp--preset--color--hivis);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

/* A phone icon, not a green dot. A dot next to a number is the "we are online"
   badge every chat widget uses, and this is a yard telephone that is answered
   between half seven and half five, not a presence indicator. The glyph is
   inline SVG in currentColor so it takes the yellow with the text. */
.wj-tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wj-tel svg {
	flex: 0 0 auto;
	display: block;
}

.wj-hours {
	color: #c6c6c6;
	font-size: 13px;
	margin-left: 12px;
	white-space: nowrap;
}

/* Section headings sit in solid red bars, white uppercase condensed. This is
   what pushes the accent from a decorative 0.3% of the page to 3% doing
   structural work, which is the difference between an accent and a brand. */
.wj-sectionbar {
	background: var(--wp--preset--color--oxide);
	color: #fff;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	padding: 12px 16px;
	margin: 0 0 0 0;
}

/* ------------------------------------------------------------------ MOVE 2
   Numbers set like a price list. */

.wj-num,
.woocommerce .price,
.wj-spec td,
.wj-staffel td,
.wc-block-components-totals-item__value,
td.product-total,
td.product-subtotal,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.wj-code,
.wj-spec .wj-code,
.woocommerce-product-attributes-item--sku td {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--slate);
}

/* Every figure in a table sits on the right so the decimal commas line up. */
.wj-spec td:last-child,
.wj-staffel td + td,
.wj-staffel th + th {
	text-align: right;
}

/* ------------------------------------------------------------------ MOVE 4
   The spec table. Zebra rows, a rule above the head and below the last row and
   nowhere else. No vertical lines, no cell borders, no boxes. */

.wj-spec,
.wj-staffel,
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	margin: var(--wp--preset--spacing--40) 0;
	font-size: 13px;
}

.wj-spec tr:nth-child(even),
.wj-staffel tbody tr:nth-child(even),
.woocommerce-product-attributes tr:nth-child(even) {
	background: var(--wp--preset--color--panel);
}

.wj-spec th,
.wj-spec td,
.wj-staffel th,
.wj-staffel td,
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 10px 12px;
	border: 0;
	text-align: left;
	vertical-align: top;
	line-height: 1.3;
}

.wj-spec th,
.wj-staffel thead th,
.woocommerce-product-attributes th {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

.wj-staffel thead th {
	border-bottom: 1px solid var(--wj-rule);
}

/* A nil return prints as a nil return. Never a blank cell, never invented. */
.wj-nil {
	color: var(--wp--preset--color--zinc);
}

/* ------------------------------------------------------------------ MOVE 5
   Stock as a counted number with a unit, never a bare badge. */

.wj-stock {
	display: inline-block;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.wj-stock.is-op {
	color: var(--wp--preset--color--stock);
	background: var(--wp--preset--color--stock-bg);
}

.wj-stock.is-laatste {
	color: var(--wp--preset--color--low);
	background: var(--wp--preset--color--low-bg);
}

.wj-stock.is-weg {
	color: var(--wp--preset--color--zinc);
	background: var(--wp--preset--color--panel);
	border-color: var(--wj-hair);
}

.wj-stock-note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--wp--preset--color--slate);
}

/* Second grade is the loudest thing on the page that is not a button, because
   223.212 euro of it is standing in the yard and their own site will not price
   it. Yellow on ink only. */
.wj-tweede {
	display: inline-block;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--hivis);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
}

/* --------------------------------------------------------- the ruled grid
   Cards with a gap, a radius and a shadow look right on eight products and
   fall apart at 763. Every dense catalogue that actually ships is a ruled
   grid, so the gutters collapse and the shared 1px line does the work. */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wj-rule);
	border-left: 1px solid var(--wj-rule);
	list-style: none;
	min-width: 0;
}

.woocommerce ul.products li.product {
	margin: 0 !important;
	padding: 16px;
	width: auto !important;
	float: none !important;
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product.wj-is-tweede {
	border-top: 4px solid var(--wp--preset--color--hivis);
	margin-top: -1px !important;
}

/* No photographs yet. A grey field of the same warm family as the goods, sized
   so 24 of them do not become a wall. Delete this once the real photographs
   arrive. */
.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
	background: var(--wp--preset--color--panel);
	padding: 12px;
	box-sizing: border-box;
	margin: 0 0 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	padding: 0;
	margin: 0 0 6px;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--oxide);
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 8px 0 0;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--zinc);
	font-weight: 400;
}

.wj-per-m2 {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

.woocommerce-price-suffix {
	font-size: 12px;
	font-weight: 400;
	color: var(--wp--preset--color--zinc);
	white-space: nowrap;
}

/* The button sits at the bottom of the tile whatever length the title ran to,
   so a row of tiles has one baseline instead of a ragged edge. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

/* ⛔ EEN PRESETNAAM MET EEN CIJFER EROP KOMT NIET UIT WORDPRESS.
   De maat voor de grootste kop heette in theme.json "h1". WordPress zette
   --wp--preset--font-size--body, --head en --band wel in de pagina, maar die
   ene niet, en dus viel elke h1 terug op de tekstgrootte: de paginatitel en de
   producttitel stonden 18 september op 16 px vet in plaats van 32 px. Gemeten
   in de opgehaalde pagina zelf, de variabele stond er alleen als gebruik en
   nergens als waarde. De maat heet nu "titelkop" en komt er wel uit. */

/* ------------------------------------------------------------- product page */

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--titelkop);
	line-height: 1.15;
	margin-bottom: 4px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.woocommerce div.product .woocommerce-product-gallery img {
	background: var(--wp--preset--color--panel);
}

/* Mark, 24 September 2026: "some space between the picture and the stripp and
   some space between pics in the stripp". Measured on the test site before this:
   0 px under the big photo and 0 px between the small ones, because WooCommerce
   floats each thumbnail at 25% with no margin. A grid of four with a real gap
   keeps them four across and spaced. The selector carries div.images so it
   outranks WooCommerce's own .woocommerce div.product div.images rule. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

/* The buy rail is the only thing on the page allowed to lift off the paper. */
.wj-koop {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wj-rule);
	padding: 20px;
}

/* A supplier logo is contained so that no accent colour lands within 24px of it.
   Kingspan, Joris Ide and Rockwool all carry a red or orange of their own and
   none of them can be made to agree with ours, so they are kept apart instead. */
.wj-lev {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--wj-hair);
	margin: 0 24px 0 0;
}

/* ------------------------------------------------------------------ forms */

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
	border: 1px solid var(--wj-rule);
	background: #fff;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--ink);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--oxide);
	outline-offset: 1px;
}

.wj-search {
	display: flex;
	width: 100%;
	max-width: 480px;
}

.wj-search input {
	flex: 1 1 auto;
	height: 44px;
	min-width: 0;
}

.wj-search button {
	height: 44px;
	border: 0;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 18px;
	cursor: pointer;
}

/* ⛔ DE PLUS STAK BUITEN HET AANTALVAKJE, OP ELK SCHERM.
   Gemeten 11 september in de winkelwagen: het vakje is 107 px breed, min 30,
   plus 30, en het getal ertussen hoort de rest te krijgen. Maar elk invoerveld
   op deze site heeft 12 px padding links en rechts, dus het getal werd 64 px
   breed en duwde de plus 18 px buiten de rand. */
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

/* ------------------------------------------------- the header on a phone
   Measured 11 September on a 390 x 812 screen: the header was 375px tall, so
   46 percent of the phone was used up before a single product appeared. It ran
   as five stacked rows, because the pickup line wrapped off the dark bar and
   the logo, the search and the cart each took a row of their own. The cart
   ended up alone at x=79, which reads as a mistake rather than a design.
   Mark, 10 September: "does not look fine on mobile. On desktop it is good." */

@media (max-width: 782px) {

	/* The dark bar carried two rows for no reason. The phone number never
	   goes, a yard gets called, but the pickup line can wait for the footer. */
	.wj-ophalen {
		display: none;
	}

	/* Logo and cart share the top row the way they do on a desktop, and the
	   search takes the full width under them instead of a third row. */
	.wj-kop > .wp-block-group {
		row-gap: 10px;
	}

	.wj-kop > .wp-block-group > .wp-block-group:first-child {
		order: 1;
	}

	.wj-kop > .wp-block-group > .wp-block-group:last-child {
		order: 2;
		margin-left: auto;
	}

	.wj-kop > .wp-block-group > .wj-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	/* The logo at 200px is 82px tall, which was the single biggest thing left
	   in the header. At 155 it is 63 and the WAND- EN DAKBEPLATING line still
	   reads. The rest is padding shaved off three bands. */
	.wj-kop .wp-block-site-logo img {
		width: 155px;
		height: auto;
	}

	.wj-kop {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.wj-kop > .wp-block-group {
		row-gap: 8px;
	}

	.wj-bar {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	.wj-nav {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}

	/* ⛔ VIER VERSCHILLENDE KANTLIJNEN OP EEN TELEFOON.
	   Gemeten 11 september op 390 px. De hero stond op 16, de kop van de
	   homepagina op 40, de kop van elke andere pagina op 24, en de tekst in de
	   sectiebalken op 56. Dezelfde koptekst schoof dus 16 px op als je van de
	   homepagina naar een categorie ging.

	   Het komt doordat een alignwide binnen een blok met global padding er nog
	   16 px marge bovenop krijgt. Op een breed scherm valt dat niet op, op 390
	   is het een vijfde van de breedte.

	   Een kantlijn, 16 px, precies die van de hero. Dat scheelt ook 48 px aan
	   leesbreedte op elke pagina die op 40 stond. */
	/* De variabele zelf, niet alleen de padding. Anders trekt een alignfull
	   zich nog steeds 24 px naar buiten terwijl zijn ouder er 16 heeft, en dan
	   staat de hero 8 px van de rand af in plaats van 16. */
	/* ⛔ OP BODY, NIET ALLEEN OP :root. WordPress zet deze twee variabelen zelf
	   op body, en een variabele op een dichtere ouder wint. Op :root alleen deed
	   hij dus niets: productpagina's en de contactkop bleven op 24 staan terwijl
	   de rest op 16 stond. Gevonden 11 september bij de ronde langs alle pagina's. */
	:root,
	body {
		--wp--style--root-padding-left: 16px;
		--wp--style--root-padding-right: 16px;
	}

	/* Op een productpagina zit main niet direct onder de site maar in een blok
	   van WooCommerce, dus de regel hieronder moet elke main raken. */
	.wp-site-blocks main.has-global-padding {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.wp-site-blocks main.has-global-padding > .alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}

	/* De voet stond op 40: 24 padding van de voet zelf en daarbovenop 16 marge
	   op het binnenblok, hetzelfde patroon als de alignwide in de kop. Alles
	   erboven staat nu op 16, dus de voet ook. */
	.wj-voet {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.wj-voet > .wj-voet-in {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}

	/* Artikelcodes als TB-PANEELSCHROEFVOORSTAALTOT12MM zijn een woord van
	   dertig tekens zonder spatie. break-word mag ze wel breken, maar telt niet
	   mee als het raster de breedte van een kaart bepaalt, dus ze staken toch
	   buiten hun kaart. anywhere telt wel mee. */
	.wj-code {
		overflow-wrap: anywhere;
		word-break: break-all;
	}

	/* De keuze voor de lengte stond naast een label van 52 px, met het label
	   onderaan de regel. Op een telefoon onder elkaar, het veld over de hele
	   breedte. */
	.woocommerce div.product form.cart table.variations,
	.woocommerce div.product form.cart table.variations tbody,
	.woocommerce div.product form.cart table.variations tr,
	.woocommerce div.product form.cart table.variations th,
	.woocommerce div.product form.cart table.variations td {
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.woocommerce div.product form.cart table.variations th.label,
	.woocommerce div.product form.cart table.variations td.label {
		padding-bottom: 6px;
	}

	.woocommerce div.product form.cart table.variations select {
		width: 100%;
		min-width: 0;
	}

	.wp-site-blocks > main,
	.wp-site-blocks > .wp-block-group.has-global-padding,
	.wj-bar,
	.wj-kop,
	.wj-nav {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.wj-bar > .wp-block-group,
	.wj-kop > .wp-block-group,
	.wj-nav > .wp-block-group,
	.wp-site-blocks > main > .alignwide,
	.wp-site-blocks > main > .wp-block-group > .alignwide,
	.wp-site-blocks main .has-global-padding > .alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}

	/* Het hamburgerknopje stond 12 px links van de kantlijn, want de navigatie
	   krijgt van WordPress een marge van -12 om de padding van de menu-items
	   op te vangen, en dit knopje heeft die padding niet. */
	.wj-nav .wp-block-navigation__responsive-container-open {
		margin-left: 9px;
	}

	/* Een alignfull trekt zich met een vaste -24 px naar buiten, niet met de
	   variabele. Nu de kantlijn 16 is stak de hero er 8 px te ver uit en stond
	   de kop 8 px van de schermrand. Hier dus dezelfde 16 terug. */
	.wp-site-blocks main > .alignfull,
	.wp-site-blocks > main > .wp-block-group.alignfull {
		margin-left: -16px !important;
		margin-right: -16px !important;
		width: calc(100% + 32px) !important;
		max-width: calc(100% + 32px) !important;
	}
}

/* ------------------------------------------------------- the stock band */

.wj-band {
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 32px 24px;
}

.wj-band strong {
	display: block;
	font-size: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.wj-band span {
	display: block;
	margin-top: 6px;
	color: #c6c6c6;
	font-size: 15px;
}

/* --------------------------------------------------------------- phone */

.wj-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 782px) {

	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}

	.woocommerce ul.products li.product {
		padding: 12px;
	}

	/* A yard is looked at on a phone, standing outside, in gloves. */
	.woocommerce ul.products li.product .button,
	.single_add_to_cart_button {
		width: 100%;
		text-align: center;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* The phone number does not get hidden behind a hamburger. Isolatietechniek
	   drops theirs entirely below 390px and it is the single worst thing on
	   their site. */
	.wj-tel {
		font-size: 16px;
	}

	.wj-hours {
		display: none;
	}
}

/* ------------------------------------------------- the block query loop
   WooCommerce's own shop page renders ul.products, but a query loop placed in a
   template renders wp-block-post-template, and none of the grid rules above
   reach it. Both have to be ruled or the homepage and the shop look like two
   different sites. */

.wp-block-post-template.is-layout-grid {
	gap: 0;
	border-top: 1px solid var(--wj-rule);
	border-left: 1px solid var(--wj-rule);
	min-width: 0;
}

.wp-block-post-template.is-layout-grid > li {
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	padding: 16px;
	margin: 0;
	min-width: 0;
	max-width: 100%;
}

/* A title in a query loop is a post-title block, so it takes the link colour and
   turns the whole grid red. In a list of 763 that is unreadable. The title is
   the anchor; red is for what you can act on. */
.wp-block-post-template .wp-block-post-title,
.wp-block-post-template .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	margin: 0 0 8px;
}

.wp-block-post-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--oxide);
	text-decoration: none;
}

.wp-block-post-template .wc-block-components-product-price {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Nothing is photographed yet, so the featured image block renders an empty box
   that only adds height. Hide it until the photographs arrive, rather than
   leaving 763 empty frames. */
.wp-block-post-template .wp-block-post-featured-image:empty {
	display: none;
}

/* The category list is a plain ul out of WooCommerce. Rule it like everything
   else so it does not read as a leftover. */
.wp-block-woocommerce-product-categories ul,
.woocommerce ul.product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wj-rule);
}

.wp-block-woocommerce-product-categories li,
.woocommerce ul.product-categories li {
	border-bottom: 1px solid var(--wj-rule);
	padding: 0;
}

.wp-block-woocommerce-product-categories li a,
.woocommerce ul.product-categories li a {
	display: block;
	padding: 14px 4px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wp-block-woocommerce-product-categories li a:hover,
.woocommerce ul.product-categories li a:hover {
	color: var(--wp--preset--color--oxide);
}

/* The code sits under the title, quiet, in mono, on its own line. */
.woocommerce ul.products li.product .wj-code,
.wp-block-post-template .wj-code {
	display: block;
	margin: -4px 0 8px;
	font-size: 12px;
}

/* ------------------------------------- WooCommerce's own block product grid
   WooCommerce 11 renders the shop and category pages from a block template, not
   from the classic ul.products, so none of the rules above reach it. This is the
   grid the customer actually sees, so it gets the same ruled treatment or the
   homepage and the shop look like two different websites. */

ul.wc-block-product-template {
	display: grid !important;
	/* !important, want WooCommerce zet in het eigen bloktemplate de klasse
	   columns-3 op deze lijst. Zonder !important wint die en wordt elke kaart
	   413 px breed, drie op een rij, voor een winkel met 608 artikelen. */
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wj-rule);
	border-left: 1px solid var(--wj-rule);
	min-width: 0;
}

ul.wc-block-product-template > li.wc-block-product {
	margin: 0 !important;
	padding: 14px !important;
	width: auto !important;
	max-width: 100%;
	min-width: 0;
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	display: flex;
	flex-direction: column;
}

ul.wc-block-product-template > li.product_cat-tweede-keus {
	border-top: 4px solid var(--wp--preset--color--hivis);
	margin-top: -1px !important;
}

/* De foto's zijn er nu wel, dus het beeld mag ook echt beeld zijn.
   Wat hier stond hield de foto op 130 px hoog met een beige vlak eromheen. Op
   een kaart van 413 px breed werd dat een postzegel van 110 bij 110 in een
   zandkleurig doosje.

   Hamza, 4 sep 2026: *"why behind there is a bg and small images wtf?"*. Het
   beige doosje was van ons. De grijze ondergrond die in de foto zelf zit is
   van Wijdeven, die fotograferen op hun eigen werkbank.

   ⛔ NIET BIJSNIJDEN MET COVER. De foto's hebben drie vormen: 423 zijn 16:9,
   130 zijn vierkant en 47 zijn 4:3. Met cover gaat bij een vierkante foto de
   kop en de punt van de schroef eraf. Dus contain, in een vak van 4:3, met een
   doorzichtige achtergrond zodat de randen wegvallen tegen de kaart.

   De !important is nodig omdat WooCommerce aspect-ratio:1/1 in het
   style-attribuut van het plaatje zelf schrijft. */
ul.wc-block-product-template .wc-block-components-product-image {
	margin: 0 0 10px;
}

ul.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 4 / 3 !important;
	height: auto;
	max-height: none !important;
	object-fit: contain !important;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}

/* Red titles at 763 products is a wall. Ink, and red only on hover. */
ul.wc-block-product-template .wp-block-post-title,
ul.wc-block-product-template .wc-block-components-product-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 4px;
}

ul.wc-block-product-template .wp-block-post-title a,
ul.wc-block-product-template .wc-block-components-product-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

ul.wc-block-product-template .wp-block-post-title a:hover,
ul.wc-block-product-template .wc-block-components-product-title a:hover {
	color: var(--wp--preset--color--oxide);
}

ul.wc-block-product-template .wc-block-components-product-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
	margin-top: 4px;
}

ul.wc-block-product-template .wc-block-components-product-button {
	margin-top: auto;
	padding-top: 10px;
}

ul.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	text-align: center;
	font-size: 14px;
}

/* The sorting select and the result count sit on one line above the rule. */
.woocommerce-result-count,
.wc-block-product-collection-no-results,
.wp-block-woocommerce-catalog-sorting select {
	font-size: 14px;
	color: var(--wp--preset--color--slate);
}

@media (max-width: 782px) {

	/* Ook hier !important, anders wint de regel hierboven, die staat eerder in
	   het bestand maar heeft wel !important. Zonder dit stond een telefoon op
	   een kolom en werd de lijst twee keer zo lang om door te scrollen. */
	ul.wc-block-product-template {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	}

	/* "Resultaat 1-24 van de 82 resultaten wordt getoond" naast het
	   sorteervak zetten geeft op een telefoon een kolom van 67 px breed en
	   140 px hoog: acht regels tekst op hun kant. WordPress zet is-nowrap op
	   die groep, dus het wikkelen moet hier terug aangezet worden. */
	.wp-block-group:has(> .wp-block-woocommerce-product-results-count) {
		flex-wrap: wrap !important;
		row-gap: 10px;
	}

	.wp-block-woocommerce-product-results-count,
	.wp-block-woocommerce-catalog-sorting {
		flex: 1 0 100%;
	}

	ul.wc-block-product-template > li.wc-block-product {
		padding: 10px !important;
	}

	/* Geen vaste hoogte op de telefoon, de verhouding hierboven regelt het. */
	ul.wc-block-product-template .wc-block-components-product-image img {
		max-height: none;
	}
}

/* WooCommerce centres everything in its block tile. A catalogue is read down the
   left edge, and centred titles above a left aligned code look like two designs
   arguing. Everything lines up left. */
ul.wc-block-product-template > li.wc-block-product,
ul.wc-block-product-template .wp-block-post-title,
ul.wc-block-product-template .wc-block-components-product-price,
ul.wc-block-product-template .wc-block-components-product-title {
	text-align: left !important;
	align-items: flex-start;
}

/* ⛔ HIER STOND DEZELFDE KIEZER MET MAX-HEIGHT: 110PX, EN DIE WON.
   Het echte beeldformaat staat vierhonderd regels hoger. Deze stond eronder,
   dus deze won, en het plaatje bleef een postzegel terwijl de goede regel er
   gewoon stond. Twee keer dezelfde kiezer in een bestand is altijd een val. */

/* ------------------------------------------------------ the red nav band
   The category row is the red block now, which is the Westland pattern with
   their blue. That makes the band itself the accent, so the 3px rule under the
   header would be red on red and does nothing: it goes. */

.wp-site-blocks > header.wp-block-template-part {
	border-bottom: 0;
}

.wj-nav {
	border-top: 0;
}

.wj-nav .wp-block-navigation a,
.wj-nav .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
}

/* Hover and the page you are on are an INK BLOCK, not a colour swap on the
   text. It is the same ink as the footer and as the 2e keus chip sitting at the
   other end of the same bar, so that chip stops looking like the odd one out.
   A block also gives a much bigger target than a word does, which matters on a
   nav band a man taps at in a yard. */
.wj-nav .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 2px;
	transition: background-color .12s ease;
}

.wj-nav .wp-block-navigation a:hover,
.wj-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.wj-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--ink);
	color: #fff;
	text-decoration: none;
}

/* The page you are actually on stays lit, so the bar tells you where you are. */
.wj-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wj-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
.wj-nav .wp-block-navigation-item.wj-hier > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

/* The nav row loses its own side padding so the first block starts on the same
   left edge as everything else on the page.

   ⛔ ALLEEN HET NAV-ELEMENT, NIET DE LIJST ERIN. De lijst in het menu heeft
   ook de klasse wp-block-navigation, dus deze regel trok hem nog een keer 12 px
   naar links: samen -24. Met de 9 px padding van de menu-items stond de eerste
   letter van het menu daardoor 15 px links van het logo, op elke breedte.
   Gemeten 11 september: tekst op 9 bij een logo op 24, op 1280. En -9, niet
   -12: de items hebben sinds de krappere balk 9 px padding, geen 12. */
.wj-nav nav.wp-block-navigation {
	margin-left: -9px;
}

/* The hamburger and its icon on a red ground. */
.wj-nav .wp-block-navigation__responsive-container-open,
.wj-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Inside the mobile flyout the ground goes dark, so links go back to white on
   ink rather than white on white. */
.wj-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.wj-nav .wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff;
}

/* The second grade chip sat on beige before. On red it needs the dark ground to
   keep the yellow legible, which it already has, but it also needs air so it
   does not read as part of the menu. */
/* ------------------------------------------------- de gele knop op een laptop
   ⛔ OP EEN GEWONE LAPTOP PASTE HIJ NIET MEER IN DE RODE BALK.
   Gemeten 11 september op de live site: acht menu-items zijn 1054 px en de
   knop 153, en onder ongeveer 1290 px breed viel de knop naar een eigen regel.
   De rode balk werd dan twee lagen hoog op 1280, drie op een tablet. Hamza,
   11 september: "yep thats good idea", om hem op die breedtes naast het
   zoekveld te zetten.
   Er staat daarom een tweede exemplaar in de witte kop. Op de telefoon en op
   een breed scherm blijft alles zoals het was: daar staat alleen de knop in de
   rode balk. De grens ligt op 1340 en niet op 1290, want het lettertype en de
   schuifbalk verschillen per computer en een knop die net niet past is erger
   dan een knop die iets eerder verhuist. */
.wj-tweede-kop {
	display: none;
}

/* Alleen op een laptop, 1025 tot 1340. Op een tablet past de rij logo, zoeken,
   knop en winkelwagen niet naast elkaar, de knop viel daar op een eigen regel,
   en het menu zelf past er ook zonder knop niet op een regel. Daar blijft het
   dus zoals het was. Gemeten op 800, 900 en 1024. */
@media (min-width: 1025px) and (max-width: 1340px) {

	.wj-nav .wj-tweede {
		display: none;
	}

	.wj-kop > .wp-block-group {
		flex-wrap: nowrap;
	}

	.wj-tweede-kop {
		display: inline-flex;
		align-items: center;
		height: 44px;
		padding: 0 14px;
		font-size: 13px;
		white-space: nowrap;
		margin-left: 12px;
		margin-right: auto;
	}

	/* Zoekveld en knop samen als een paar in het midden, het logo links en de
	   winkelwagen rechts, zoals het zoekveld nu ook in het midden staat. */
	.wj-kop > .wp-block-group > .wj-search {
		margin-left: auto;
		/* Liever een iets smaller zoekveld dan een rij die breekt. */
		flex: 0 1 480px;
		min-width: 0;
	}
}

.wj-nav .wj-tweede {
	/* Geen eigen marge: de rij heeft al een gap van 24 px. Die marge deed alleen
	   iets als de knop naar een tweede regel viel, en dan zette hij hem 16 px
	   naast de rest van de pagina. Gemeten op 1280, 11 september. */
	margin-left: 0;
	border: 1px solid rgba(255, 255, 255, .35);
}

/* ------------------------------------------------------------- selects
   A native select keeps the operating system's own chevron, which on Windows
   Chrome is a thin light grey V that belongs to no design and reads as broken
   next to a 1px rule and a square corner. Every select on the site gets the same
   drawn arrow instead, in ink, on the right, with room made for it.
   appearance:none has to be set on all three prefixes or Safari keeps its own. */

select,
.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select,
.variations select,
.woocommerce-page select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2320262a' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	padding-right: 38px;
	border: 1px solid var(--wj-rule);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	min-height: 44px;
	cursor: pointer;
}

select:hover {
	border-color: var(--wp--preset--color--ink);
}

/* Internet Explorer and old Edge draw a second arrow of their own. */
select::-ms-expand {
	display: none;
}

/* The variation picker on a product page is the one select that actually decides
   what the customer buys, so it is full width and cannot be missed. */
.variations select {
	width: 100%;
	max-width: 320px;
}

/* Quantity fields are numbers, so they line up like every other number here. */
input[type="number"],
.qty,
.wc-block-components-quantity-selector__input {
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* WooCommerce lays the variation picker out as a table, so the label drops to
   the bottom of its cell and sits below the select it belongs to. Put them on
   the same line. */
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	vertical-align: middle;
	padding: 6px 12px 6px 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart .variations th.label label {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin: 0;
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations {
	border: 0;
	margin-bottom: 12px;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: 13px;
	color: var(--wp--preset--color--slate);
}

/* --------------------------------------------------------- category grid
   Vervangt de lijst van WooCommerce zelf, die het aantal op een eigen regel zette
   en dezelfde kindnaam twee keer toonde zonder ouder om ze uit elkaar te houden.

   ⛔ EN HET VERVANGT DE EERSTE EIGEN VERSIE, DIE HAMZA AFKEURDE. Wat er mis was,
   geteld en niet gevoeld: zes vakjes in een raster van vier, dus twee gaten in de
   tweede rij; alfabetisch gesorteerd, dus zes schroeven linksboven op de homepage
   van een panelenhandel; vier van de zes hadden een onderregel en twee niet, dus
   ongelijke hoogtes; en geen enkel beeld.

   Nu: de vier grote groepen als fototegel met het bijschrift over de onderkant,
   de twee kleine op een smalle strook eronder. Die strook vult ook precies de
   rij van vier, dus er kan geen gat meer vallen.

   ⚠ HET BIJSCHRIFT LIGT OVER DE FOTO EN DAT IS OOK EEN OPLOSSING. Alle vijf de
   foto's in Dakbeplating en allebei die in Wandbeplating dragen onderin een rode
   Wijdeven-balk, ingebrand door de leverancier. Gemeten, niet aangenomen. De
   donkere verloop dekt die af. Er is niets aan hun mediabibliotheek veranderd. */

.wj-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	min-width: 0;
}

.wj-cat {
	display: block;
	position: relative;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wj-hair);
	padding: 12px;
	text-decoration: none;
	min-width: 0;
}

.wj-cat:hover {
	border-color: var(--wj-rule);
	text-decoration: none;
}

/* De foto krijgt lucht om zich heen in plaats van tegen de rand aan te lopen. */
.wj-cat-beeld {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--panel-2);
}

.wj-cat-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Een tekening is lijnwerk, dus die moet heel in beeld staan en niet bijgesneden
   worden: de maatvoering eromheen is juist het nuttige. */
.wj-cat-tek {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 12px;
	background: #fff;
	box-sizing: border-box;
}

.wj-cat-tek svg {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

.wj-cat-m2 {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--wp--preset--color--oxide);
	color: #fff;
	padding: 4px 9px;
	font-size: 13px;
	font-weight: 600;
}

.wj-cat-op {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 6.4rem;
	padding: 2.4rem 12px 11px;
	color: #fff;
	/* ⛔ ONDERAAN VOLLEDIG DICHT, NIET 94%. Met 0.94 scheen de rode logobalk van
	   de leveranciersfoto's er nog doorheen als een vage band achter de tekst.
	   Gemeten door de pixels van de gerenderde tegel uit te lezen, niet door te
	   kijken. De onderste 18% is nu ondoorzichtig. */
	background: linear-gradient(to top, rgb(18, 22, 25) 0%, rgb(18, 22, 25) 18%, rgba(18, 22, 25, 0.82) 46%, transparent);
}

.wj-cat-n {
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.15;
	color: #fff;
}

.wj-cat-c {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--hivis);
}

/* De onderverdeling, zodat "Damwand enkelstaal" onder Dakbeplating nooit voor de
   naamgenoot onder Wandbeplating aangezien kan worden.
   Op een regel gehouden: liep hij om, dan stond de titel van die ene tegel hoger
   dan die van de buren en oogde de hele rij scheef. */
.wj-cat-k {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: #cfcbc4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- de smalle strook voor de kleine groepen ---- */

.wj-cats-smal {
	display: grid;
	/* Drie sinds 30 sep: zetwerk, toebehoren, deuren en ramen. Twee kolommen gaf
	   een halve lege rij onder de derde. */
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 14px;
	min-width: 0;
}

.wj-cat-s {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wj-hair);
	padding: 12px;
	text-decoration: none;
	min-width: 0;
}

.wj-cat-s:hover {
	border-color: var(--wj-rule);
	text-decoration: none;
}

.wj-cat-s-beeld {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--wj-hair);
	padding: 4px;
	box-sizing: border-box;
	overflow: hidden;
}

.wj-cat-s-beeld img,
.wj-cat-s-beeld svg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.wj-cat-s-tekst {
	min-width: 0;
}

.wj-cat-s .wj-cat-n {
	color: var(--wp--preset--color--ink);
	font-size: 17px;
}

.wj-cat-s:hover .wj-cat-n {
	color: var(--wp--preset--color--oxide);
}

.wj-cat-s .wj-cat-c {
	color: var(--wp--preset--color--oxide);
	font-size: 14px;
}

.wj-cat-s-pijl {
	margin-left: auto;
	color: var(--wj-rule);
	font-size: 21px;
	line-height: 1;
}

@media (max-width: 900px) {

	.wj-cats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {

	.wj-cats,
	.wj-cats-smal {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ hero
   Their own photograph of a finished roof, with the type over it. The dark
   wash is a gradient rather than a flat overlay so the steel is still readable
   on the right while the words stay legible on the left. */

.wj-hero {
	position: relative;
	background: var(--wp--preset--color--ink);
	overflow: hidden;
	isolation: isolate;
}

.wj-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.wj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg,
		rgba(32, 38, 42, .94) 0%,
		rgba(32, 38, 42, .88) 42%,
		rgba(32, 38, 42, .42) 78%,
		rgba(32, 38, 42, .25) 100%);
}

.wj-hero-in {
	max-width: 1280px;
	margin: 0 auto;
	padding: 72px 24px 56px;
	color: #fff;
}

.wj-hero-kop {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hivis);
}

.wj-hero-h1 {
	margin: 0 0 16px;
	max-width: 20ch;
	font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: #fff;
}

.wj-hero-p {
	margin: 0 0 28px;
	max-width: 46ch;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.5;
	color: #dcd8d0;
}

.wj-hero-knop {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wj-knop {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 2px;
	background: var(--wp--preset--color--oxide);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--oxide);
}

.wj-knop:hover {
	background: var(--wp--preset--color--oxide-dark);
	border-color: var(--wp--preset--color--oxide-dark);
	color: #fff;
	text-decoration: none;
}

.wj-knop.is-licht {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
}

.wj-knop.is-licht:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

/* The four numbers along the bottom of the photograph. This is the proof, so it
   sits on the picture rather than in a box further down the page. */
.wj-hero-cijfers {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	max-width: 1280px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.wj-hero-cijfers span {
	padding: 16px 24px;
	color: #dcd8d0;
	font-size: 14px;
	border-right: 1px solid rgba(255, 255, 255, .22);
}

.wj-hero-cijfers span:last-child {
	border-right: 0;
}

.wj-hero-cijfers b {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}

@media (max-width: 782px) {

	.wj-hero-in {
		padding: 44px 16px 32px;
	}

	.wj-hero::before {
		background: linear-gradient(180deg,
			rgba(32, 38, 42, .90) 0%,
			rgba(32, 38, 42, .82) 60%,
			rgba(32, 38, 42, .92) 100%);
	}

	.wj-hero-cijfers span {
		padding: 12px 16px;
	}

	.wj-hero-cijfers b {
		font-size: 21px;
	}

	.wj-knop {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* --------------------------------------------------- the gap under the nav
   Measured: 24px of paper showing between the red band and the hero. It is not
   the hero and not its wrapper, both sit at margin 0. It is WordPress's own
   blockGap landing as margin-top on <main>, which is right for a page that
   starts with a heading and wrong for one that starts with a full bleed
   photograph.
   The :has() rule handles any page whose first block is full width. The .home
   rule is the same thing for a browser too old for :has(), because the front
   page is the one where it actually shows. */

.wp-site-blocks > main:has(> .wp-block-group.alignfull:first-child),
.wp-site-blocks > main:has(> .alignfull:first-child) {
	margin-top: 0;
}

.home .wp-site-blocks > main {
	margin-top: 0;
}

/* ------------------------------------------------- hidden helper text
   ⛔ THE THEME WAS MISSING THIS AND IT SHOWED ON EVERY PAGE.
   WordPress and WooCommerce write labels meant only for a screen reader, then
   rely on the theme to define .screen-reader-text. Mine did not, so every one
   of them was printed on the page: 12 on the homepage, 17 on the shop, 17 on a
   product page, 6 in the basket. That is what made the price read
   "€ 27,75 - € 155,40Prijsklasse: € 27,75 tot € 155,40 excl. btw".
   Clipped rather than display:none, because a screen reader must still read it. */

.screen-reader-text,
.sr-only,
.wc-block-components-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* Except when it is focused, so somebody tabbing gets their skip link back. */
.screen-reader-text:focus,
.sr-only:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 12px 16px;
	z-index: 200;
}

/* ---------------------------------------------------------- product strip */

.wj-strip {
	display: grid;
	/* Fixed four, not auto-fill. auto-fill fitted three at 1280 and left the
	   fourth alone on its own row next to an empty cell, which looked like
	   something had failed to load. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--wj-rule);
	border-left: 1px solid var(--wj-rule);
	min-width: 0;
}

.wj-strip-item {
	display: flex;
	flex-direction: column;
	padding: 16px;
	background: var(--wp--preset--color--card);
	border-right: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	text-decoration: none;
	min-width: 0;
}

.wj-strip-item:hover {
	background: var(--wp--preset--color--panel);
	text-decoration: none;
}

.wj-strip-beeld {
	display: block;
	margin: 0 0 12px;
	background: var(--wp--preset--color--panel);
}

.wj-strip-beeld img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.wj-strip-leeg {
	display: block;
	height: 140px;
	background:
		repeating-linear-gradient(90deg,
			var(--wp--preset--color--panel) 0 9px,
			var(--wp--preset--color--panel-2) 9px 18px);
}

.wj-strip-titel {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin-bottom: 2px;
}

.wj-strip-item:hover .wj-strip-titel {
	color: var(--wp--preset--color--oxide);
}

.wj-strip-prijs {
	display: block;
	margin-top: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wj-strip-prijs small {
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--slate);
}

.wj-strip-vrd {
	display: block;
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--stock);
}

@media (max-width: 782px) {

	.wj-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wj-strip-item {
		padding: 12px;
	}

	.wj-strip-beeld img,
	.wj-strip-leeg {
		height: 100px;
	}
}

/* ⛔ DE CSS VOOR .wj-tekening IS HIER WEG.
   De plugin wijdeven-tekening is op 4 sep 2026 verwijderd op verzoek van
   Hamza, dus er komt geen enkele svg meer op de site en deze regels raakten
   niets meer. */

/* ------------------------------------------- section width, matched to the hero
   Measured at a 1440 viewport: the hero content sat at 1280 wide starting at 80,
   while the section bars and the product strips sat at 821 starting at 310. That
   is WordPress's constrained layout squeezing the children of an alignwide group
   down to contentSize, which is 820 in theme.json and right for a paragraph of
   text but wrong for a grid of panels.

   These blocks are the full 1280 and they line up with the hero exactly. */

.wj-sectionbar,
.wj-strip,
.wj-cats,
.wj-cats-smal {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* The wrapper the block editor put around them adds its own padding on top of
   the width, which would push the content in by another 24 on each side and
   break the alignment again. */
.wp-block-group.alignwide:has(> .wj-sectionbar),
.wp-block-group.alignwide:has(> .wj-strip),
.wp-block-group.alignwide:has(> .wj-cats),
.wp-block-group.alignwide:has(> .wj-cats-smal),
.wp-block-group.alignwide:has(> .wp-block-group > .wj-strip),
.wp-block-group.alignwide:has(> .wp-block-group > .wj-cats),
.wp-block-group.alignwide:has(> .wp-block-group > .wj-cats-smal) {
	padding-left: 0;
	padding-right: 0;
	max-width: 1280px;
}

/* Below 1280 the page needs its gutters back, or the grid touches the edge of
   the screen.
   ⛔ Die marge geeft main al: 24 px padding. Deze regel zette er nog 24 bij en
   dan stonden de balken op 48 onder een logo op 24. Weg, 11 september. */

@media (max-width: 782px) {

	.wj-sectionbar,
	.wj-strip,
	.wj-cats {
		max-width: calc(100% - 32px);
	}
}

/* The bar was 1312 and the grids 1281 against the hero's 1280: the bar's own
   16px padding and the grid's 1px left border were being added on top of the
   max-width. border-box folds them back in so all four line up exactly. */
.wj-sectionbar,
.wj-strip,
.wj-cats,
.wj-cats-smal {
	box-sizing: border-box;
}

/* The paragraph and the button under the last section bar, and the three column
   box at the foot, were still sitting on the 820px content width while the bar
   above them ran to 1280. Same cause, same fix: on the front page the wide
   groups carry their own children rather than handing them to the constrained
   layout. */

.home main .wp-block-group.alignwide {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.home main .wp-block-group.alignwide > .wp-block-paragraph,
.home main .wp-block-group.alignwide > p,
.home main .wp-block-group.alignwide > .wp-block-buttons {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* The three column box keeps its own padding, so it needs the width back that
   the padding takes away. */
.home main .wp-block-group.alignwide.has-background {
	padding-left: 24px;
	padding-right: 24px;
}

/* ⛔ HIER STOND ONDER 1328 NOG EENS max-width: calc(100% - 48px).
   Die gaf 24 px marge bovenop de 24 px padding die main al heeft, dus de
   secties op de homepagina stonden op 48 terwijl alles op elke andere pagina
   op 24 staat. En de regel was .home .wp-block-group.alignwide zonder main,
   dus hij ving ook het binnenblok van de kop: op de homepagina stond het logo
   op 48, op elke andere pagina op 24. Van home naar de winkel sprong de kop
   24 px opzij. Gemeten 11 september op 1024 en 1280. */

@media (max-width: 782px) {

	.home .wp-block-group.alignwide {
		max-width: calc(100% - 32px);
	}
}

/* The three column box has its own constrained layout inside it, so the columns
   were squeezed to 820 again even though their box was the full width. */
.home .wp-block-group.alignwide > .wp-block-columns {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------- de drie punten onderaan
   ⛔ DIT BLOK HOORDE ER NIET BIJ. De koppen stonden in het gewone lettertype
   met een hoofdletter, terwijl elke andere kop op de pagina in de smalle
   kapitalen staat. Daardoor las het als tekst van een andere site die er
   toevallig onder was geplakt, en dat is precies wat Hamza aanwees.

   Verder was het een wit vlak zonder enig houvast. Elke kolom krijgt nu een
   rode streep boven de kop, hetzelfde signaal als de sectiebalken erboven, dus
   het leest als drie punten en niet als een grijze plaat. */

.wj-punten .wp-block-columns {
	gap: 0;
}

.wj-punten .wp-block-column {
	padding: 0 28px;
	border-left: 1px solid var(--wj-hair);
}

.wj-punten .wp-block-column:first-child {
	padding-left: 0;
	border-left: 0;
}

.wj-punten .wp-block-column:last-child {
	padding-right: 0;
}

.wj-punten h3 {
	position: relative;
	margin: 0 0 10px;
	padding-top: 14px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.wj-punten h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--wp--preset--color--oxide);
}

.wj-punten p {
	margin: 0;
}

/* Op een telefoon staan de kolommen onder elkaar, dan is een linkerrand tussen
   ze in onzin en moet de streep het werk doen. */
@media (max-width: 781px) {

	.wj-punten .wp-block-column {
		padding: 0;
		border-left: 0;
	}

	.wj-punten .wp-block-column + .wp-block-column {
		margin-top: 22px;
	}
}

/* ------------------------------------------------------------------ footer
   Ink, not the beige panel it was. The top bar of the header is already ink, so
   a dark footer closes the page instead of letting it fade out, and it is what
   both Dutch competitors I screenshotted do. Yellow is allowed here because
   this is a dark ground. */

.wj-voet {
	border-top: 3px solid var(--wp--preset--color--oxide);
	color: #c6c6c6;
}

.wj-voet-in,
.wj-voet-onder {
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}

.wj-voet-in {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 32px;
}

.wj-voet-naam {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.wj-voet-kop {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8b9297;
}

.wj-voet-tekst {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #c6c6c6;
	max-width: 42ch;
}

.wj-voet-kol a {
	display: block;
	padding: 4px 0;
	font-size: 14px;
	color: #dcd8d0;
	text-decoration: none;
}

.wj-voet-kol a:hover {
	color: var(--wp--preset--color--hivis);
	text-decoration: none;
}

.wj-voet-tel {
	margin-top: 6px;
	font-size: 20px;
}

.wj-voet-tel:hover {
	color: var(--wp--preset--color--hivis);
}

.wj-voet-onder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 12.5px;
	color: #8b9297;
}

/* ⛔ De voet heeft zelf al 24 px padding. Hier stond onder 1328 nog
   calc(100% - 48px) bovenop, dus de voettekst stond op 48 onder een logo op
   24. Weg, 11 september. */

@media (max-width: 1100px) {

	.wj-voet-in {
		grid-template-columns: 1.6fr 1fr 1fr;
	}
}

@media (max-width: 782px) {

	.wj-voet-in {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
	}

	.wj-voet-breed {
		grid-column: 1 / -1;
	}

	.wj-voet-in,
	.wj-voet-onder {
		max-width: calc(100% - 32px);
	}
}

/* The footer link rule set display:block and its own colour, which broke the
   phone number's icon onto a second line and greyed it out. The telephone is
   the most used thing in this footer, so it keeps the inline layout and the
   yellow it has in the header. */
.wj-voet-kol a.wj-tel,
.wj-voet-tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--hivis);
	font-weight: 700;
	padding: 0;
}

.wj-voet-kol a.wj-tel:hover,
.wj-voet-tel:hover {
	color: #fff;
}

/* ------------------------------------------------------------------ footer op zijn plek
   ⛔ DE VOET STOND MIDDEN OP HET SCHERM MET WIT ERONDER, EN DAT WAS GEEN
   VERBEELDING. Gemeten: op /mijn-account/ is de pagina 1.095 px hoog, dus op een
   scherm van 1.200 px bleef er 105 px wit onder de voet staan, en op een groter
   scherm meer. Hamza zag het meteen; op het testscherm van 812 px was het
   onzichtbaar, wat precies de reden is dat het er zo lang in heeft gezeten.

   De oorzaak is dat er nooit een sticky footer in het thema zat. Een korte
   pagina is korter dan het scherm en dan houdt niets de voet onderaan.

   ⛔ Alleen .wp-site-blocks wordt flex, niet body. Body als flex maakt van elk
   direct kind een flex-item, en daar hangen ook de mini-cart lade en de
   adminbalk onder. Die zijn position:fixed en dus veilig, maar er is geen reden
   om dat risico te nemen als de wrapper alleen genoeg is. */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Op een telefoon is 100vh groter dan wat je ziet, want de adresbalk hoort
   erbij, en dan krijgt elke korte pagina een scrollbalk voor niets. dvh meet
   wat er echt te zien is. */
@supports (min-height: 100dvh) {

	.wp-site-blocks {
		min-height: 100dvh;
	}
}

/* Main groeit mee, header en footer houden hun eigen hoogte. flex-shrink 0 zodat
   een lange pagina de voet niet platdrukt. */
.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > header,
.wp-site-blocks > footer {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ winkelwagen, afrekenen, mijn account
   ⛔ WOOCOMMERCE ZET HIER 1000px NEER EN DAT IS DE ENIGE BREEDTE OP DE HELE SITE
   DIE NERGENS OP GEBASEERD IS.

   De regel staat in de plugin zelf, assets/css/woocommerce-blocktheme.css:

     .woocommerce-account .wp-block-post-title,
     .woocommerce-account main .woocommerce,
     .woocommerce-cart .wp-block-post-title, ... { max-width: 1000px }

   Die is voor Twenty Twenty-Three geschreven. Hier is de tekstbreedte 820 en al
   het meubilair, de header, de nav, de hero en de voet, 1.280 met 24 px marge,
   dus een linkerrand op 24. Gevolg op /mijn-account/: de titel op 1.000 breed
   met linkerrand 140, het inlogblok eronder op 820 met linkerrand 230. 90 px
   verschil op dezelfde pagina, hetzelfde soort scheve rand dat Hamza er eerder
   ook al uithaalde bij de hero.

   ⛔ EERSTE POGING MAAKTE HET ERGER, EN DAT IS HET LEERPUNT. Ik zette 1.280 op
   de titel en op .woocommerce, en vergat dat post-content daar tussen zit en
   door de constrained layout op 820 staat. De titel ging naar 48 en de inhoud
   bleef op 230: nog steeds scheef, nu 182 px, de andere kant op. En de
   winkelwagen stond al netjes op 24 en die schoof ik naar 48, dus een pagina die
   goed was werd stuk. Gemeten voor en na, anders had ik dat niet gezien.

   De juiste ingang is de variabele, niet de losse blokken. contentSize op main
   optillen naar wideSize laat de constrained layout zelf alles goed zetten,
   post-content inbegrepen. Alleen die ene harde 1000px van WooCommerce moet met
   even veel gewicht terug, want .woocommerce-account .wp-block-post-title is
   twee klassen en de :where() van de kern telt er maar een. */

/* ⛔ DE CONTACTPAGINA HOORT HIER OOK BIJ.
   Gemeten op 1360: elke andere pagina zet zijn inhoud op 1280 breed vanaf 33.
   De contactpagina stond op 820 vanaf 263, dus smaller en ingesprongen, en dat
   is precies wat Hamza zag: "contact page doesnot look like this site".

   De oorzaak zat niet in de pagina zelf. Het blok daar staat al op alignwide.
   Maar main is een constrained layout, dus post-content krijgt daar contentSize
   van 820 mee, en een alignwide blok kan nooit breder worden dan de kolom waar
   het in staat. Vandaar dezelfde hefboom als hierboven.

   ⚠ NIET DOORTREKKEN NAAR ALLE PAGINA'S. Privacy en algemene voorwaarden
   staan nog leeg. Zodra daar lopende tekst in komt is 820 juist de goede maat,
   want een alinea van 1280 breed leest niet. Alleen pagina's met een indeling
   in kolommen horen hier. */
body.pagina-contact .wp-site-blocks > main,
body.pagina-over-ons .wp-site-blocks > main,
body.pagina-zetwerk-op-maat .wp-site-blocks > main,
body.woocommerce-account .wp-site-blocks > main,
body.woocommerce-cart .wp-site-blocks > main,
body.woocommerce-checkout .wp-site-blocks > main {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* ⛔ DE TITEL NIET OP none, MAAR OP DE KOLOM.
   Hier stond max-width: none op de titels, om de 1000px van WooCommerce weg te
   krijgen. Maar none zet ook de kolom uit, dus de titel liep over het hele
   scherm vanaf 24 px. Op een laptop van 1280 viel dat niet op, want daar staat
   de kolom zelf ook op 24. Op het brede scherm van Hamza, 11 september: "Mijn
   account" en "Winkelwagen" tegen de linkerrand, het formulier en het logo
   eronder gecentreerd op 313. Gemeten op 1920.
   De kolommaat is hierboven al naar 1280 getild, dus die gebruiken. */
body.woocommerce-account .wp-block-post-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
	max-width: var(--wp--style--global--content-size);
}

/* De configurator breekt uit een kolom van 820 met een breedte uit vw, en vw
   telt de schuifbalk mee: hij stak 3 tot 4 px buiten de rand van de rest. Op
   deze pagina is de kolom hierboven al 1280, dus uitbreken hoeft niet. */
body.pagina-zetwerk-op-maat .wjzw.alignwide {
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.woocommerce-account .wp-site-blocks > main .woocommerce,
body.woocommerce-cart .wp-site-blocks > main .woocommerce,
body.woocommerce-checkout .wp-site-blocks > main .woocommerce {
	max-width: none;
}

/* Een inlogformulier hoeft geen 1.232 px breed te zijn. Het blijft wel op
   dezelfde linkerrand staan als de titel erboven, want dat is het hele punt. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-form-login-toggle,
body.woocommerce-account .woocommerce-ResetPassword + p {
	max-width: 34rem;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------ contactpagina
   Hamza koos op 4 sep 2026 optie C uit drie ontwerpen: een donkere kop over de
   volle breedte, daaronder een strook met de vier gegevens die iemand zoekt,
   en dan twee rustige kolommen.

   De gedachte erachter is hun eigen zin: de meeste vragen zijn aan de telefoon
   zo geregeld. Dus staat het telefoonnummer bovenaan als knop, en niet
   onderaan in een blokje.

   ⛔ NIET DE HELE PAGINA IN CSS DUWEN. De teksten staan als gewone blokken in
   de pagina zodat Hamza ze kan wijzigen zonder een regel code aan te raken.
   Hier staat alleen hoe het eruitziet. */

/* ⛔ ALIGNFULL IS HIER NIET GENOEG.
   Gemeten op een scherm van 1385: de donkere kop bleef 1280 breed en begon op
   53, dus precies het tekstvak, en niet van rand tot rand zoals in het ontwerp.
   De reden is dat post-content zelf al op 1280 staat. Een blok kan niet breder
   worden dan de doos waar het in zit, hoe vaak je er ook alignfull op zet.
   Dus wordt het er met negatieve marges uit getrokken.

   ⚠ width: 100vw NIET GEBRUIKEN. Dat telt de schuifbalk mee en dan gaat de
   hele pagina zijwaarts schuiven. Met alleen marges en width auto vult het blok
   de ruimte die het krijgt, en dat is precies het venster zonder schuifbalk. */
/* ⛔ DE SCHUIFBALK TELT MEE IN vw.
   Met de negatieve marges hieronder werd de kop 1400 breed op een venster van
   1385, en toen schoof de hele pagina zijwaarts. Dat is precies de fout die op
   webtalkhub dagenlang op elke telefoon stond. clip snijdt af zonder een
   schuifbalk te maken, en anders dan hidden breekt het sticky niet, wat hier
   uitmaakt omdat de kop van de site blijft staan. */
.wp-site-blocks {
	overflow-x: clip;
}

.wj-c-hero,
.wj-c-strip {
	/* !important, want WordPress zet zelf nog een keer margin-left: 0 op een
	   alignfull blok binnen een blok met globale padding, en dat komt later in
	   de pagina dan deze stylesheet. Zonder !important bleef de kop 1280 breed
	   en gebeurde er niets, terwijl de regel gewoon in het bestand stond. */
	/* ⛔ NIET MEER UITBREKEN MET vw.
	   calc(-50vw + 50%) rekent de schuifbalk mee, dus de band begon 7 px
	   links van het scherm en de kop erin stond op 17 onder een logo op 24.
	   Nu blijft het blok gewoon in de kolom, precies op de rand van de rest
	   van de site, en schildert een schaduw zonder vervaging de achtergrond
	   tot aan de schermranden. Een schaduw telt niet mee voor de breedte van
	   de pagina, dus hij kan niet laten schuiven, en clip-path houdt hem
	   binnen de hoogte van het blok. Gemeten 11 september. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto;
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
	clip-path: inset(0 -100vmax);
}

.wj-c-hero {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--ink);
}

/* De strook heeft onderaan een lijn van 1 px, en een schaduw kan wel de
   achtergrond doortrekken maar geen lijn: die stopte 24 px voor de schermrand.
   Een border-image met outset schildert de grijze vlakte en de lijn samen tot
   aan de randen, ook zonder de breedte van de pagina te veranderen. */
.wj-c-strip {
	border-bottom-width: 0 !important;
	padding-bottom: 1px;
	border-image: linear-gradient(to bottom, var(--wp--preset--color--panel) calc(100% - 1px), var(--wj-rule) calc(100% - 1px)) fill 0 / 0 / 0 100vmax;
}

.wj-c-hero {
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding-top: 46px;
	padding-bottom: 42px;
	margin-top: 0;
}

/* De kop stond op 16 px en netjes in het midden, omdat de constrained layout
   elk kind een automarge geeft. Het ontwerp heeft hem groot en tegen de
   linkerkant, net als elke andere kop op de site. */
.wj-c-hero h1 {
	color: #fff;
	max-width: 860px;
	margin-left: 0;
	margin-right: 0;
	font-size: clamp(1.9rem, 2.6vw, 2.5rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* Alles in de kop tegen de linkerkant. De constrained layout van WordPress
   geeft elk kind een automarge, en die staat later in de pagina dan deze
   stylesheet, vandaar !important. Zonder dit stond de kop netjes in het
   midden, wat op geen enkele andere pagina van deze site zo is. */
.wj-c-hero > *,
.wj-c-hero > h1,
.wj-c-hero > p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wj-c-label {
	font-family: var(--wp--preset--font-family--condensed);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	font-size: 0.78rem;
	color: #8d969c;
	margin: 0 0 6px;
}

.wj-c-lead {
	color: #aab1b6;
	max-width: 660px;
	font-size: 1.1rem;
	margin-top: 12px;
}

.wj-c-acties {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
}

/* De tweede knop is wit op donker. Twee rode knoppen naast elkaar laten je niet
   zien welke de belangrijkste is, en bellen is hier de belangrijkste. */
.wj-knop-licht {
	background: #fff !important;
	color: var(--wp--preset--color--ink) !important;
}

/* De strook met de vier gegevens. Vier vakken met een lijn ertussen, want dat
   is hoe de rest van de site ook is opgebouwd. */
.wj-c-strip {
	background: var(--wp--preset--color--panel);
	border-bottom: 1px solid var(--wj-rule);
	/* Tegen de donkere kop aan, zoals in het ontwerp. WordPress zet standaard
	   24 px tussen twee blokken en dat gaf hier een streepje papierkleur tussen
	   twee gekleurde vlakken, wat eruitziet als een fout. */
	margin-top: 0 !important;
}

.wj-c-strip-in {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.wj-c-strip-in > div {
	padding: 20px 24px 20px 0;
}

.wj-c-strip-in > div + div {
	padding-left: 24px;
	border-left: 1px solid var(--wj-hairline, #d3cec2);
}

.wj-c-veld {
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--wp--preset--color--zinc);
}

.wj-c-strip-in b {
	display: block;
	font-size: 1.05rem;
	margin-top: 3px;
}

.wj-c-strip-in a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wj-c-strip-in a:hover {
	color: var(--wp--preset--color--oxide);
}

/* De twee kolommen eronder, met een lijn ertussen zoals bij de producten. */
.wj-c-body {
	margin-top: 44px !important;
	border-top: 1px solid var(--wj-rule);
	padding-top: 30px;
	gap: 0 !important;
}

.wj-c-body > .wp-block-column + .wp-block-column {
	padding-left: 40px;
	border-left: 1px solid var(--wj-rule);
}

.wj-c-body > .wp-block-column:first-child {
	padding-right: 40px;
}

.wj-c-adres {
	font-size: 1.05rem;
	line-height: 1.7;
	margin-top: 14px;
}

.wj-c-kvk {
	margin-top: 34px;
	padding-top: 16px;
	border-top: 1px solid var(--wj-rule);
	display: flex;
	gap: 34px;
	color: var(--wp--preset--color--zinc);
	font-size: 0.9rem;
}

.wj-c-kvk b {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink);
}

.wj-c-stap {
	display: flex;
	gap: 14px;
	margin-top: 16px;
}

.wj-c-nr {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--wp--preset--color--oxide);
	line-height: 1.15;
	width: 26px;
	flex: none;
}

.wj-c-offerte {
	margin-top: 26px;
}

@media (max-width: 782px) {

	.wj-c-hero {
		padding-top: 30px;
		padding-bottom: 28px;
	}

	/* Vier vakken naast elkaar wordt op een telefoon vier kolommen van 80 px
	   met woorden op hun kant. Twee bij twee past wel. */
	.wj-c-strip-in {
		grid-template-columns: repeat(2, 1fr);
	}

	.wj-c-strip-in > div {
		padding: 14px 14px 14px 0;
	}

	.wj-c-strip-in > div:nth-child(odd) + div {
		padding-left: 14px;
	}

	.wj-c-strip-in > div:nth-child(3),
	.wj-c-strip-in > div:nth-child(4) {
		border-top: 1px solid var(--wj-hairline, #d3cec2);
	}

	.wj-c-strip-in > div:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	/* Een lijn tussen twee kolommen die onder elkaar staan is geen scheiding
	   maar een streep in het niets. */
	.wj-c-body > .wp-block-column + .wp-block-column {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--wj-rule);
		padding-top: 26px;
		margin-top: 26px;
	}

	.wj-c-body > .wp-block-column:first-child {
		padding-right: 0;
	}
}

/* De paginatitel staat er twee keer.
   page.html zet er een h1 "Contact" boven, en de donkere kop heeft zelf al het
   woord CONTACT plus de echte kop. Twee h1's op een pagina is bovendien niet
   goed voor Google. De titel van het sjabloon gaat weg, de kop in het ontwerp
   blijft. Alleen op deze pagina. */
body.pagina-contact .wp-site-blocks > main > .wp-block-post-title,
body.pagina-over-ons .wp-site-blocks > main > .wp-block-post-title {
	display: none;
}

/* Zonder die titel begint de donkere kop meteen onder de rode balk, en dat is
   ook precies wat het ontwerp laat zien.

   ⛔ DE MARGE VAN MAIN OP NUL ZETTEN IS NIET GENOEG.
   Gemeten: er bleef een streep papierkleur van 24 px tussen de rode balk en de
   donkere kop staan. Die kwam niet van main maar van de inhoud daarbinnen.
   WordPress zet een tussenruimte tussen de kinderen van main, en de titel is
   hierboven wel verborgen maar telt voor die tussenruimte gewoon mee. Een
   verborgen blok laat dus nog steeds een gat achter. */
body.pagina-contact .wp-site-blocks > main,
body.pagina-over-ons .wp-site-blocks > main {
	margin-top: 0 !important;
}

body.pagina-contact .entry-content.wp-block-post-content,
body.pagina-over-ons .entry-content.wp-block-post-content {
	margin-top: 0 !important;
}

/* ------------------------------------------------- Productgroep als landingspagina
   (inc/categorie-seo.php, 30 sep 2026). De korte tekst boven de producten, de
   regel met de feiten van nu, en de tekst onder de producten. Leesbreedte 820
   voor de tekst, want een alinea van 1280 breed leest niet. */
/* ⛔ Het blok zelf houdt de brede kolom van de kop en de producten; alleen de
   alinea erin wordt smal. Eerst stond de 820 op het blok met margin-left 0, en
   dan stond de tekst op een scherm breder dan 1280 tegen de linkerrand, los van
   de kop (Hamza's scherm, 30 sep). Op 1280 zag je het niet. */
.tax-product_cat .wp-block-term-description {
	color: var(--wp--preset--color--zinc);
	font-size: 1.05rem;
}

.tax-product_cat .wp-block-term-description > * {
	max-width: 820px;
}

.wj-cat-feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	margin-top: 18px !important;
	margin-bottom: 4px !important;
	padding: 11px 0;
	border-top: 1px solid var(--wj-rule);
	border-bottom: 1px solid var(--wj-rule);
	font-size: 0.98rem;
}

.wj-cat-feiten b,
.wj-cat-feiten b .woocommerce-Price-amount {
	font-weight: 700;
}

.wj-cat-feiten span[aria-hidden="true"] {
	color: var(--wp--preset--color--zinc);
}

/* Op een telefoon loopt de regel over drie regels, en dan bleef er een puntje
   achteraan hangen. Daar geen puntjes, alleen ruimte tussen de stukken. */
@media (max-width: 600px) {
	.wj-cat-feiten {
		gap: 2px 16px;
	}

	.wj-cat-feiten span[aria-hidden="true"] {
		display: none;
	}
}

/* Onderaan dezelfde 72 px tot de voet als de productlijst zelf heeft. Zonder
   stond de tekst op 24 px van de voet, en boven de lijn was het 72 (Hamza, 30 sep). */
.wj-cat-tekst {
	margin-top: 56px !important;
	margin-bottom: 72px !important;
	padding-top: 28px;
	border-top: 1px solid var(--wj-rule);
}

.wj-cat-tekst > * {
	max-width: 820px;
}

/* Op een breed scherm in twee kolommen: een kolom van 820 liet rechts 460 px leeg
   en las als een lap tekst onder de winkel. Een kop blijft bij zijn alinea. */
@media (min-width: 1000px) {
	.wj-cat-tekst {
		column-count: 2;
		column-gap: 64px;
	}

	.wj-cat-tekst > * {
		max-width: none;
	}

	.wj-cat-tekst h2 {
		break-after: avoid;
	}

	.wj-cat-tekst p {
		break-inside: avoid;
	}
}

.wj-cat-tekst h2 {
	font-size: 1.35rem;
	margin: 26px 0 8px;
}

.wj-cat-tekst h2:first-child {
	margin-top: 0;
}

.wj-cat-tekst a {
	color: var(--wp--preset--color--oxide);
}

/* Een telefoonnummer breekt niet over twee regels ("0492 32 11 / 67" op een telefoon). */
.wj-cat-tekst a[href^="tel:"] {
	white-space: nowrap;
}

/* ------------------------------------------------- Bladeren onder de producten
   Hamza, 30 sep: "1 2 Volgende pagina" stond er als losse tekst, de cijfers 3 px
   uit elkaar zodat het "12" las. Nu vakjes zoals de sorteerknop erboven: 44 px
   hoog (een duim), 1 px lijn, rechte hoeken; de huidige pagina in inkt. Geldt op
   elke productgroep en de winkel. */
.wp-block-query-pagination {
	gap: 8px !important;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 40px !important;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	margin: 0 !important;
	padding: 0 12px;
	border: 1px solid var(--wj-rule);
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

.wp-block-query-pagination .page-numbers.dots {
	min-width: 20px;
	padding: 0;
	border-color: transparent;
	background: none;
}

.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
	padding: 0 18px;
	font-family: var(--wp--preset--font-family--condensed);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wp-block-query-pagination .wp-block-query-pagination-next::after {
	content: "\2192";
	margin-left: 10px;
}

.wp-block-query-pagination .wp-block-query-pagination-previous::before {
	content: "\2190";
	margin-right: 10px;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--oxide);
}

.wp-block-query-pagination a:focus-visible {
	outline: 2px solid var(--wp--preset--color--oxide);
	outline-offset: 2px;
}

/* Op een telefoon passen vorige, cijfers en volgende niet op een regel, en dan
   stonden ze op drie regels onder elkaar. Nu de cijfers bovenaan en vorige en
   volgende samen eronder, elk een halve breedte (of de hele, als er een is). */
@media (max-width: 600px) {
	.wp-block-query-pagination .wp-block-query-pagination-numbers {
		order: -1;
		flex-basis: 100%;
		justify-content: center;
	}

	.wp-block-query-pagination .wp-block-query-pagination-next,
	.wp-block-query-pagination .wp-block-query-pagination-previous {
		flex: 1 1 0;
		padding: 0 12px;
	}
}

/* ------------------------------------------------- Over ons
   Zelfde kop, strook en twee kolommen als Contact (de wj-c- klassen), plus
   drie dingen die alleen hier staan: de jaartallen, het lijstje en de drie
   foto's. 29 september 2026. */
/* Hamza, 29 sep: de lijn boven de twee kolommen kan weg. Hij stond vlak onder
   de grijze strook, die zelf al een lijn heeft, dus het waren er twee. Eerst op
   Over ons, daarna ook op Contact ("remove that too"). */
body.pagina-over-ons .wj-c-body,
body.pagina-contact .wj-c-body {
	border-top: 0;
	padding-top: 0;
}

.wj-o-jaar {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

/* Het jaartal in dezelfde letter en kleur als de stapnummers op Contact,
   breed genoeg voor vier cijfers zodat de tekst ernaast recht onder elkaar
   begint. */
.wj-o-nr {
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--oxide);
	line-height: 1.3;
	width: 52px;
	flex: none;
}

.wj-o-slot {
	margin-top: 26px !important;
	padding-top: 16px;
	border-top: 1px solid var(--wj-rule);
}

.wj-o-lijst {
	margin: 16px 0 0;
	padding-left: 20px;
}

.wj-o-lijst li {
	margin-bottom: 10px;
}

.wj-o-lijst a {
	color: var(--wp--preset--color--oxide);
}

.wj-o-vraag {
	margin-top: 30px !important;
	padding-top: 20px;
	border-top: 1px solid var(--wj-rule);
	font-size: 1.15rem;
}

/* Drie foto's naast elkaar, allemaal even hoog. De bestanden zijn 4:3 en
   object-fit houdt ze zo, ook als er later een andere maat in komt. */
.wj-o-fotos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 44px !important;
}

.wj-o-fotos figure {
	margin: 0;
}

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

@media (max-width: 782px) {

	/* Op een telefoon een grote foto en twee kleine eronder, niet drie
	   postzegels van 110 px naast elkaar. */
	.wj-o-fotos {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 30px !important;
	}

	.wj-o-fotos figure:first-child {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------- het menu van Mark
   Mark, 4 sep 2026: "For the menu u can use the same menu as I did on
   https://wijdeven.flashdevelop.nl with subcategories". Dat zijn acht
   hoofdcategorieen met uitklappers in plaats van de vijf platte links die er
   stonden.

   ⛔ ACHT LANGE NAMEN PASSEN NIET IN EEN BALK VAN 1280.
   Gemeten: het menu werd 1248 px breed en de gele 2e keus knop 153, samen 1401.
   Die knop viel daardoor op een tweede regel en de rode balk werd twee lagen
   hoog. Kleiner lettertype en krappere tussenruimte lost het op zonder iets
   weg te halen, want die knop is hun opvallendste ingang. */

.wj-nav .wp-block-navigation {
	font-size: 13px;
}

.wj-nav .wp-block-navigation .wp-block-navigation-item__content {
	padding: 8px 9px;
}

.wj-nav .wp-block-navigation__container {
	gap: 2px;
}

/* ⛔ HET PIJLTJE WAS DONKER OP EEN RODE BALK.
   Gemeten: kleur rgb(32,38,42), de inktkleur van de site, op het rood van de
   navigatie. Bijna onzichtbaar, en omdat het los naast de tekst zweefde leek
   het bij het VOLGENDE menu-item te horen in plaats van bij het zijne.

   De linkkleur hierboven zet alleen a en het contentblok op wit. De pijl is
   een svg in een eigen knop en viel daar buiten, dus die hield de standaard
   donkere kleur. */
.wj-nav .wp-block-navigation__submenu-icon,
.wj-nav .wp-block-navigation__submenu-icon svg {
	color: #fff !important;
	fill: #fff !important;
}

/* De pijl hoort bij zijn eigen woord, niet bij het volgende. Dus dicht tegen
   de tekst aan, en daarna pas de ruimte naar het volgende item. */
.wj-nav .wp-block-navigation__submenu-icon {
	padding: 0 !important;
	margin-left: 3px;
	width: 12px;
	opacity: .75;
}

.wj-nav .wp-block-navigation__container > li {
	margin-right: 6px;
}

/* Als je erop staat, wordt de pijl vol wit en draait hij, zodat je ziet welke
   uitklapper openstaat. */
.wj-nav .wp-block-navigation__container > li:hover .wp-block-navigation__submenu-icon,
.wj-nav .wp-block-navigation__container > li[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	opacity: 1;
}

/* De uitklapper begint bij de linkerrand van zijn eigen item, niet een pixel
   ernaast, en raakt de balk zonder gat ertussen. */
.wj-nav .wp-block-navigation__submenu-container {
	left: 0 !important;
	margin-top: 0 !important;
}

/* De uitklapper zelf: donker, zoals de rest van de site, en niet het lichte
   standaardvlak van WordPress dat op de rode balk uit de toon valt. */
.wj-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	border-radius: 2px;
	padding: 6px 0;
	min-width: 240px;
}

.wj-nav .wp-block-navigation__submenu-container li a {
	padding: 9px 16px !important;
	font-size: 13.5px;
	white-space: nowrap;
}

.wj-nav .wp-block-navigation__submenu-container li a:hover {
	background: var(--wp--preset--color--oxide);
}

/* ⛔ HET MENU OP DE TELEFOON WAS WITTE TEKST OP EEN WITTE ACHTERGROND.
   Gemeten: de overlay is rgb(255,255,255) en de links zijn ook rgb(255,255,255).
   Je kon hem openen en er stond niets. Dat kwam niet door de nieuwe
   categorieen, de linkkleur staat op wit voor de rode balk en de overlay van
   WordPress is standaard wit, dus dit stond er al toen er nog vijf links waren.
   Met vijf links merkte niemand het, met tweeendertig valt het meteen op.

   De overlay krijgt de donkere kleur van de site, dan klopt de witte tekst wel
   en ziet het eruit als de rest. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink) !important;
	color: #fff;
	padding-top: 20px;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff !important;
}

/* De subcategorieen springen in, anders lees je op een telefoon niet welke
   bij welke hoort. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	min-width: 0;
	/* WordPress zet hier zelf 32px op, en 32px inspringing op een scherm van
	   390 is zonde. Het streepje links onder doet hetzelfde werk voor 13. */
	padding-left: 0 !important;
}

/* De regelafstand stond op 24px tussen ELK item, ook tussen de subregels van
   dezelfde groep. Bij 32 menu-items werd het menu daardoor 1.890px lang, ruim
   twee schermen. De groepen krijgen hun lucht nu van de kop erboven. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	row-gap: 2px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 15px;
	opacity: .8;
	padding-left: 13px !important;
	padding-top: 8px;
	padding-bottom: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

/* ⛔ DE KOPPEN WAREN KLEINER DAN HUN EIGEN ONDERDELEN.
   Gemeten 11 september op 390 px: "Sandwich gevelpanelen" stond op 13px en de
   drie regels eronder op 15px. Een kop die kleiner is dan zijn kinderen leest
   als een bijschrift, dus het menu zag eruit alsof de volgorde door elkaar lag.
   De regel hieronder bestond al en zette ze op 17px, maar hij raakte niets:
   tussen de dialog en de lijst zit nog een responsive-container-content, en die
   stond niet in de keten van directe kinderen. Een selector die nergens op
   past geeft geen foutmelding, hij doet gewoon niets. Daarom nu geen keten. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container.is-responsive
	> .wp-block-navigation-item
	> .wp-block-navigation-item__content {
	font-size: 17px;
	font-weight: 600;
	opacity: 1;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Lucht boven een kop zodat een groep als groep leest, maar niet boven de eerste. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container.is-responsive
	> .wp-block-navigation-item + .wp-block-navigation-item {
	margin-top: 14px;
}

/* Het kruisje om te sluiten moet ook wit zijn, dat was zwart op donker. */
.wp-block-navigation__responsive-container-close {
	color: #fff !important;
}

/* --------------------------------------------- de productpagina rechtzetten
   Hamza, 8 sep 2026, over de bestelkolom: spacing en equal balance.

   ⛔ GEMETEN, NIET GESCHAT. De kolom is 744 px breed. Daarin stond:
     staffeltabel      416   <- 328 px smaller dan al het andere
     op maat blok      700   <- 44 px smaller
     toebehoren blok   700   <- 44 px smaller
     lengteveld         66 hoog, terwijl elk ander veld 44 is
   Vier verschillende breedtes onder elkaar leest als vier losse dingen in
   plaats van een formulier. Alles op dezelfde lijn en dezelfde hoogte. */

.wj-staffel,
.wj-spec,
.woocommerce-product-attributes {
	/* max-width kwam ergens vandaan waar geen enkele regel bij past, dus hier
	   hard uit, anders blijft de tabel op 416 hangen. */
	max-width: none !important;
	width: 100% !important;
}

/* ⚠ ALLEEN DE BUITENSTE DOOS, NIET ALLES WAT MET WJOP BEGINT.
   Hier stond [class^="wjop-"] en dat raakt ook wjop-invoer, wjop-eenheid en
   wjop-prijs. Die kregen allemaal width 100% en toen viel de "mm" op een eigen
   regel onder het invoerveld. Een kiezer die te breed mikt maakt meer stuk dan
   hij repareert. */
.wjop,
.wjtb,
.wjop-blok,
.wjtb-blok {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

/* Elk veld even hoog, anders springt de rij op en neer. */
.wjop-invoer,
input[name="wjop_lengte"] {
	height: 44px;
	padding: 0 12px;
	font-size: 15px;
	box-sizing: border-box;
}

/* ⚠ EN NIET DE HELE BREEDTE. Na de eerste ronde werd dit veld 666 px
   breed voor een getal van vier cijfers. De plugin zet zelf 130 px en dat past
   bij "12000", dus hier alleen een bovengrens en verder met rust laten. */
.wjop-invoer {
	max-width: 100%;
}

/* Het keuzevak voor de lengte zat vast op 189 px omdat de tabelcel niet
   meegroeide. De cel mag groeien, het vak zelf blijft begrensd.

   ⚠ EERST LIET IK ALLEEN DE CEL LOS EN TOEN WERD HET KEUZEVAK 636 PX.
   Een uitklapmenu met "Kies een optie" erin dat over de halve pagina loopt is
   net zo scheef als eentje van 189. De 320 hierboven blijft dus staan. */
.variations td.value {
	width: 100%;
}

/* ⛔ WOOCOMMERCE WINT HIER MET SPECIFICITEIT, NIET MET VOLGORDE.
   In woocommerce.css staat .woocommerce div.product form.cart .variations
   select { max-width: 100% } en die stylesheet laadt na het thema. Mijn
   kortere kiezer verloor dus, ook al stond hij later in het bestand. Zelfde
   lengte kiezer terug en dan wint de laatste, zoals het hoort. */
.woocommerce div.product form.cart .variations td.value select,
.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 320px;
}

@media (max-width: 782px) {
	/* Op een telefoon is een keuzevak van 189 px in een kolom van 342 gewoon
	   een half veld. Alles vult de breedte, dan is er niets om over na te
	   denken en is alles even groot om aan te tikken. */
	.variations select,
	.wjop-blok input[type="number"],
	.wjop-blok input[type="text"],
	input[name="wjop_lengte"] {
		max-width: none !important;
		width: 100% !important;
	}

	/* ⚠ DIE RIJ IS EEN GRID, GEEN FLEX. De knop zat in
	   .woocommerce-variation-add-to-cart met display:grid, dus flex-regels
	   deden daar niets en de knop bleef 160 px in een kolom van 342. */
	.woocommerce-variation-add-to-cart,
	.variations_button {
		display: grid !important;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: center;
	}

	/* ⚠ HET AANTALVAK WERD 18 PX HOOG DOOR HET GRID.
	   align-items: center liet de wrapper krimpen tot de inhoud, en die is een
	   invoerveld zonder eigen hoogte. Stretch en een vaste hoogte houden hem
	   even hoog als de knop ernaast. */
	.woocommerce-variation-add-to-cart .quantity,
	.variations_button .quantity {
		grid-column: 1;
		align-self: stretch;
		display: flex;
	}

	.woocommerce-variation-add-to-cart .quantity input,
	.variations_button .quantity input {
		height: 100%;
		min-height: 48px;
	}

	.woocommerce-variation-add-to-cart button[type="submit"],
	.variations_button button[type="submit"],
	.single_add_to_cart_button {
		grid-column: 2;
		width: 100% !important;
	}

	/* De blokken die over de hele rij horen te lopen. */
	.woocommerce-variation-add-to-cart > .wjop,
	.woocommerce-variation-add-to-cart > .wjtb,
	.variations_button > .wjop,
	.variations_button > .wjtb {
		grid-column: 1 / -1;
	}
}

/* De "mm" hoort naast het invoerveld, niet eronder.
   Het veld kreeg hierboven een vaste breedte van 180 px en toen viel de
   eenheid op een eigen regel, want de rij was nog niet een rij. */
.wjop-rij {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.wjop-rij .wjop-eenheid,
.wjop-rij > span {
	color: var(--wp--preset--color--slate);
	font-size: 14px;
}

/* ⛔ DE BEDRAGEN PLAKTEN TEGEN DE RAND.
   Gemeten: de tabel loopt precies tot 1333, net als de tekst ernaast, dus hij
   steekt niet uit. Maar de laatste cel had padding-right 0, ergens verderop
   gezet, terwijl de regel hierboven 10px 12px voorschrijft. Het bedrag raakte
   daardoor de rand van de gestreepte rij en dat leest als "te breed" terwijl
   het "te krap" is.

   De eerste en de laatste cel krijgen hun ruimte terug, met !important omdat
   de regel die hem op nul zette na het thema komt. */
.wj-staffel th:first-child,
.wj-staffel td:first-child,
.wj-spec th:first-child,
.wj-spec td:first-child,
.woocommerce-product-attributes th:first-child,
.woocommerce-product-attributes td:first-child {
	padding-left: 14px !important;
}

.wj-staffel th:last-child,
.wj-staffel td:last-child,
.wj-spec th:last-child,
.wj-spec td:last-child,
.woocommerce-product-attributes th:last-child,
.woocommerce-product-attributes td:last-child {
	padding-right: 14px !important;
}

/* ⛔ DE KNOPPEN OP DE KAARTEN WAREN NIET EVEN BREED.
   Gemeten: "Opties selecteren" 149 px naast "Toevoegen aan winkelwagen" 210,
   in kaarten van 256. De regel width:100% stond er al op de knop zelf, maar de
   doos eromheen (.wp-block-button met align-center) krimpt naar de inhoud, dus
   100% was 100% van de tekstbreedte. De doos moet eerst de kaart vullen. */
ul.wc-block-product-template .wc-block-components-product-button,
ul.wc-block-product-template .wp-block-button {
	width: 100%;
	display: block;
}

ul.wc-block-product-template .wc-block-components-product-button .wp-block-button__link,
ul.wc-block-product-template .wc-block-components-product-button > a,
ul.wc-block-product-template .wc-block-components-product-button > button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* ⛔ HET ONDERSTE STUK VAN DE PRODUCTPAGINA STOND OP ELKAAR GEPERST.
   Gemeten op 1400: onder de kop "Gerelateerde producten" 16 px tot de kaarten,
   15 px van de knop tot de onderrand van de kaart, en maar 24 px van de kaarten
   tot de zwarte voet. Daardoor plakt het blok tegen de footer en lijkt de rij
   knoppen eruit te vallen. */

/* ⚠ WORDPRESS WINT HIER MET SPECIFICITEIT.
   De flow-layout van het blok zet zelf margin-block-start: 16px op elk kind,
   via een kiezer met twee klassen. Mijn kiezer had er een en verloor, ook al
   stond hij later. Zelfde aantal klassen plus het element en het klopt weer.
   Voor de afstand tot de voet is !important nodig: die 0 komt uit de inline
   stijl die WordPress per blok meestuurt en daar kan geen kiezer bij. */
/* ⚠ DE RUIMTE ZIT OP DE LIJST, NIET OP DE KOP.
   Twee keer probeerde ik margin-bottom op de kop en twee keer bleef het 16.
   De flow-layout zet margin-block-start op het VOLGENDE element, dus de 16
   hoort bij de lijst eronder. Daar moet hij dus ook vandaan komen. */
.wp-block-woocommerce-product-collection ul.wc-block-product-template {
	margin-block-start: 26px !important;
	margin-top: 26px !important;
}

.wp-block-woocommerce-product-collection {
	margin-bottom: 72px !important;
}

/* Lucht onder de knop, zodat hij niet tegen de rand van zijn eigen kaart zit. */
ul.wc-block-product-template > li.wc-block-product {
	padding-bottom: 20px !important;
}

@media (max-width: 782px) {
	.wp-block-woocommerce-product-collection {
		margin-bottom: 48px;
	}
}

/* ------------------------------------------- de drie pagina's van de klant

   ⛔ EEN LAP TEKST MIDDEN OP EEN BREED SCHERM LEEST NIET. De privacyverklaring
   heeft zeventien genummerde stukken. In de kolom van 820 stond die tekst los
   van de kop en het menu, met aan weerszijden leeg papier, en wie zijn
   bezorgkosten zocht moest alles doorscrollen. Nu: links een inhoudsopgave die
   meeloopt, rechts de tekst, samen binnen dezelfde 1280 als de rest. */

/* ⛔ DE INHOUD VAN EEN PAGINA IS 820 BREED, OOK VOOR EEN ALIGNWIDE ERIN.
   Gemeten: .entry-content zelf staat op max-width 820, dus het blok eronder kwam
   niet verder dan 820 hoe wijd het zelf ook mocht. Zelfde ingang als bij de
   winkelwagen: op deze drie pagina's gaat de kolommaat naar de brede maat, dan
   staat de titel ook op dezelfde lijn als het menu. */
body.pagina-privacyverklaring .wp-site-blocks > main,
body.pagina-retourneren-en-garantie .wp-site-blocks > main,
body.pagina-verzending-en-levering .wp-site-blocks > main {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

.wj-jur {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	margin-top: 8px;
}

.wj-jur-index {
	position: sticky;
	top: 24px;
	border-top: 3px solid var(--wp--preset--color--oxide);
	padding-top: 14px;
}

.wj-jur-kop {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.wj-jur-index ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: jur;
}

.wj-jur-index li {
	margin: 0;
	counter-increment: jur;
}

.wj-jur-index a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	border-bottom: 1px solid #e6e2da;
}

.wj-jur-index a:hover {
	color: var(--wp--preset--color--oxide);
}

/* De tekstkolom houdt een leesbare regellengte, ook al is het vak breder. */
.wj-jur-tekst {
	max-width: 68ch;
}

.wj-jur-tekst > h2 {
	margin: 44px 0 14px;
	padding-top: 18px;
	border-top: 1px solid #e0dcd3;
	scroll-margin-top: 90px;
}

.wj-jur-tekst > h2:first-child {
	margin-top: 8px;
	padding-top: 0;
	border-top: 0;
}

.wj-jur-tekst p {
	margin: 0 0 14px;
	line-height: 1.65;
}

.wj-jur-tekst ul {
	margin: 0 0 16px;
	padding-left: 18px;
	list-style: none;
}

.wj-jur-tekst ul li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 14px;
	line-height: 1.6;
}

.wj-jur-tekst ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 2px;
	background: var(--wp--preset--color--oxide);
}

/* Hun adres onderaan elke pagina: dezelfde rustige blokjes als op contact. */
.wj-jur-tekst .wj-adresblok {
	margin: 4px 0 18px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e0dcd3;
	line-height: 1.7;
	max-width: 42ch;
}

/* De tarieventabel van de bezorgkosten. */
.wj-tarieven {
	margin: 6px 0 20px;
	max-width: 520px;
}

.wj-tarieven table {
	border-collapse: collapse;
	width: 100%;
	background: #fff;
}

.wj-tarieven th,
.wj-tarieven td {
	padding: 10px 14px;
	border: 1px solid #e0dcd3;
	font-size: 15px;
	text-align: left;
}

.wj-tarieven thead th {
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--condensed);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
}

.wj-tarieven tbody td:last-child {
	font-weight: 600;
	white-space: nowrap;
}

/* ⛔ OP EEN TABLET EN EEN TELEFOON GEEN TWEE KOLOMMEN. Een inhoudsopgave die
   boven de tekst plakt kost daar alleen maar hoogte, dus hij gaat mee in de
   stroom en de tekst pakt de volle breedte. */
@media (max-width: 1024px) {

	.wj-jur {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.wj-jur-index {
		position: static;
	}

	.wj-jur-tekst {
		max-width: none;
	}
}

/* ------------------------------------------------------- quantity stepper
   The browser's own number arrows are two tiny grey triangles inside the box
   on Windows Chrome, and next to the red button they looked broken (Hamza,
   24 September 2026). They are hidden, and wijdeven_aantal_min / _plus in
   functions.php put a real minus and plus either side of the field. One
   control of three squares, the same height as the button beside it. */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity,
.quantity {
	display: inline-flex;
	align-items: stretch;
}

/* border-box, and the selector carries form.cart and div.quantity: the
   WooCommerce block styles give the field 0,5em of margin on the right, which
   opened an 8 px gap before the plus, and counted the padding on top of the
   width. */
.woocommerce .quantity input.qty,
.quantity input.qty,
.woocommerce div.product form.cart div.quantity input.qty {
	box-sizing: border-box;
	width: 56px;
	min-height: 44px;
	margin: 0;
	padding: 0 4px;
	border-radius: 0;
	text-align: center;
	font-size: 17px;
}

.quantity .wj-aantal-knop {
	flex: 0 0 44px;
	width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wj-rule);
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.quantity .wj-aantal-min {
	border-right: 0;
}

.quantity .wj-aantal-plus {
	border-left: 0;
}

.quantity .wj-aantal-knop:hover:not(:disabled) {
	background: var(--wp--preset--color--panel, #ebe8e0);
}

.quantity .wj-aantal-knop:focus-visible {
	outline: 2px solid var(--wp--preset--color--oxide);
	outline-offset: -2px;
}

.quantity .wj-aantal-knop:disabled {
	color: var(--wj-rule);
	cursor: default;
}

/* Only one left, or sold one at a time: WooCommerce makes the field read-only
   and there is nothing to step. */
.quantity:has(input[readonly]) .wj-aantal-knop,
.quantity:has(input[type="hidden"]) .wj-aantal-knop {
	display: none;
}

/* Mollie's "Betaling afgerond" line on the thank-you page, 28 September 2026.
   WooCommerce put it in its own blue info box with a floating icon that sat
   higher than the text. Now a plain box like the order table above it, with
   the shop's green check on the same line as the text. */
.woocommerce-info.mollie-instructions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 16px;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	list-style: none;
}
.woocommerce-info.mollie-instructions::before {
	content: "\2713";
	position: static;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--stock-bg);
	color: var(--wp--preset--color--stock);
	font: 700 14px/1 system-ui, sans-serif;
}
.woocommerce-info.mollie-instructions p {
	margin: 0;
}