/*
Theme Name: Flying Dutchmen (Blocksy child)
Theme URI: https://flyingdutchmen.com
Description: Child theme van Blocksy met de complete Flying Dutchmen huisstijl: merkrood, golfmotief, topbar met USP's, USP-strip en footer uit het ontwerp van 2026-09-02, plus WooCommerce-aanpassingen voor een smartshop (18+ melding, badges, verzendbelofte). Gebouwd voor de testomgeving op Hostinger.
Author: Dygistic
Author URI: https://dygistic.nl
Template: blocksy
Version: 1.0.7
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fd-blocksy
Tags: woocommerce, e-commerce, translation-ready
*/

/* =========================================================================
   1. DESIGN TOKENS  (bron: Branding Kit/FlyingDutchmen_BrandKit.html)
   Deze laag zet de Flying Dutchmen tokens én mapt ze op de CSS-variabelen
   die Blocksy zelf gebruikt (--theme-*). Daardoor kleuren ook de onderdelen
   mee die wij niet expliciet stylen.
   ========================================================================= */
:root {
	/* Rood-schaal (merkrood) */
	--fd-red-900: #4E0800;
	--fd-red-800: #8D2323;
	--fd-red-700: #A81F1F;
	--fd-red-600: #C7000D;
	--fd-red-500: #D02D2D;
	--fd-red-400: #E04D4D;
	--fd-red-300: #E25555;

	/* Sfeerkleuren uit het header/footer-ontwerp */
	--fd-wine:  #7A1414;
	--fd-brown: #3D1F14;
	--fd-cream: #FAF5EC;
	--fd-gold:  #FFB84D;

	/* Neutralen */
	--fd-ink:      #222222;
	--fd-grey-700: #515151;
	--fd-grey-300: #C7C7C7;
	--fd-grey-100: #F5F5F5;
	--fd-white:    #FFFFFF;

	/* Semantische aliassen */
	--fd-primary:    var(--fd-red-500);
	--fd-primary-dk: var(--fd-red-800);
	--fd-cta:        var(--fd-red-600);
	--fd-outline:    var(--fd-red-900);
	--fd-bg:         var(--fd-grey-100);
	--fd-text:       var(--fd-ink);

	--fd-gradient: linear-gradient(45deg, #D02D2D, #E04D4D);

	/* Typografie: web-fallbacks voor Super Funky en Avenir Next Condensed Heavy.
	   Zet je licentiebestanden in assets/fonts/ dan schakelt het thema
	   automatisch over (zie inc/setup.php). */
	--fd-font-display: "Bangers", "Super Funky", cursive;
	--fd-font-head:    "Asap Condensed", "Avenir Next Condensed Heavy", "Arial Narrow", sans-serif;
	--fd-font-body:    "Poppins", "Avenir", -apple-system, BlinkMacSystemFont, sans-serif;

	/* Vorm & diepte */
	--fd-radius: 8px;
	--fd-radius-sm: 5px;
	--fd-radius-pill: 999px;
	--fd-shadow: 0 6px 20px rgba(78, 8, 0, .12);
	--fd-shadow-lg: 0 14px 30px rgba(43, 26, 18, .22);
	--fd-topbar-height: 36px;

	/* ---- Mapping op Blocksy ---- */
	--theme-palette-color-1: var(--fd-red-500);
	--theme-palette-color-2: var(--fd-red-700);
	--theme-palette-color-3: var(--fd-ink);
	--theme-palette-color-4: var(--fd-red-900);
	--theme-palette-color-5: var(--fd-grey-300);
	--theme-palette-color-6: var(--fd-grey-100);
	--theme-palette-color-7: var(--fd-cream);
	--theme-palette-color-8: var(--fd-white);

	--theme-font-family: var(--fd-font-body);
	--theme-text-color: var(--fd-ink);
	--theme-headings-color: var(--fd-red-900);
	--theme-link-initial-color: var(--fd-red-500);
	--theme-link-hover-color: var(--fd-red-800);
	--theme-border-color: var(--fd-grey-300);
	--theme-border-radius: var(--fd-radius);
	--theme-image-border-radius: var(--fd-radius);
	--theme-box-shadow: var(--fd-shadow);

	--theme-button-background-initial-color: var(--fd-cta);
	--theme-button-background-hover-color: var(--fd-red-800);
	--theme-button-text-initial-color: var(--fd-white);
	--theme-button-text-hover-color: var(--fd-white);
	--theme-button-border-radius: var(--fd-radius-pill);
	--theme-button-min-height: 46px;

	--theme-form-field-border-radius: var(--fd-radius-sm);
	--theme-form-field-border-initial-color: var(--fd-grey-300);
	--theme-form-field-border-focus-color: var(--fd-red-500);
}

/* =========================================================================
   2. BASISTYPOGRAFIE
   ========================================================================= */
body {
	font-family: var(--fd-font-body);
	color: var(--fd-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.12;
}

.fd-display,
.fd-footer h4,
.entry-header .page-title.fd-display {
	font-family: var(--fd-font-display);
	font-weight: 400;
	text-transform: none;
	letter-spacing: .5px;
}

.fd-outline {
	text-shadow:
		3px 0 var(--fd-outline), -3px 0 var(--fd-outline),
		0 3px var(--fd-outline), 0 -3px var(--fd-outline),
		2px 2px var(--fd-outline), -2px -2px var(--fd-outline),
		2px -2px var(--fd-outline), -2px 2px var(--fd-outline);
}

.fd-eyebrow {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 13px;
	color: var(--fd-primary);
}

/* =========================================================================
   3. KNOPPEN
   ========================================================================= */
.ct-button,
.ct-button-ghost,
button:not(.fd-plain),
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	border-radius: var(--fd-radius-pill);
}

.ct-button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button {
	background-image: var(--fd-gradient);
	background-color: var(--fd-cta);
	color: var(--fd-white);
	box-shadow: var(--fd-shadow);
	transition: filter .2s ease, transform .2s ease;
}

.ct-button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .checkout-button:hover {
	filter: saturate(1.1) brightness(.94);
	transform: translateY(-1px);
	color: var(--fd-white);
}

.fd-btn-outline {
	display: inline-block;
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 14px;
	background: var(--fd-cta);
	color: var(--fd-white);
	padding: 13px 28px;
	border: 1px solid var(--fd-white);
	border-radius: var(--fd-radius-sm);
}

/* =========================================================================
   4. TOPBAR (36px, donkerrood) — gerenderd door inc/header-topbar.php
   ========================================================================= */
.fd-topbar {
	background: var(--fd-red-900);
	color: var(--fd-white);
	font-size: 13px;
	min-height: var(--fd-topbar-height);
	position: relative;
	z-index: 101;
}

.fd-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: var(--fd-topbar-height);
}

.fd-topbar__usp {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--fd-font-head);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12.5px;
}

.fd-topbar__usp li { margin: 0; }
.fd-topbar__usp b { color: var(--fd-gold); }

.fd-topbar__meta {
	display: flex;
	gap: 18px;
	align-items: center;
	font-size: 12.5px;
}

.fd-topbar a { color: var(--fd-white); text-decoration: none; }
.fd-topbar a:hover { color: var(--fd-gold); }

.fd-badge-18 {
	display: inline-block;
	background: var(--fd-white);
	color: var(--fd-primary);
	font-family: var(--fd-font-head);
	letter-spacing: 1px;
	padding: 1px 8px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 18px;
}

/* =========================================================================
   5. HEADER-SKIN (Blocksy header builder in FD-jasje)
   Selectors gecontroleerd tegen de live DOM van Blocksy 2.1.56:
   de rij is #header [data-row="middle"], het menu .menu-container > ul >
   li > .ct-menu-link, de winkelwagen .ct-header-cart .ct-cart-item.
   ========================================================================= */
#header [data-row="middle"] {
	background-color: var(--fd-red-500);
	background-image: var(--fd-header-pattern, none);
	background-size: cover;
	background-position: center;
	box-shadow: 0 3px 16px rgba(78, 8, 0, .35);
}

#header [data-row="middle"] .site-title a,
#header [data-row="middle"] .site-description,
#header [data-row="middle"] .ct-header-text,
#header [data-row="middle"] .ct-header-text a {
	color: var(--fd-white);
}

#header [data-row="middle"] .site-title a {
	font-family: var(--fd-font-display);
	font-size: 30px;
	letter-spacing: .5px;
}

/* Hoofdmenu */
#header [data-row="middle"] .menu-container > ul > li > .ct-menu-link,
#header [data-row="bottom"] .menu-container > ul > li > .ct-menu-link {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	color: var(--fd-white);
	font-size: 18px;
	letter-spacing: .6px;
	border-radius: 6px;
	transition: background-color .2s ease;
}

#header [data-row="middle"] .menu-container > ul > li > .ct-menu-link:hover,
#header [data-row="middle"] .menu-container > ul > li.current-menu-item > .ct-menu-link,
#header [data-row="middle"] .menu-container > ul > li.current-menu-ancestor > .ct-menu-link {
	background: rgba(78, 8, 0, .4);
	color: var(--fd-white);
}

/* Submenu: wit met donkerrode bovenrand */
#header .menu-container .sub-menu {
	border-top: 3px solid var(--fd-red-900);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--fd-shadow-lg);
	--dropdown-background-color: var(--fd-white);
}

#header .menu-container .sub-menu .ct-menu-link {
	font-family: var(--fd-font-body);
	text-transform: none;
	font-size: 14px;
}

#header .menu-container .sub-menu li:hover > .ct-menu-link {
	background: var(--fd-cream);
	color: var(--fd-primary);
}

/* Logo als ronde schijf, zoals in het ontwerp */
#header .site-logo-container img {
	border-radius: 50%;
	background: var(--fd-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	transition: max-height .25s ease;
}

/* Zoekknop en winkelwagen: witte tekst, donkerrode cirkels */
#header [data-row="middle"] .ct-header-search,
#header [data-row="middle"] .ct-header-cart .ct-cart-item,
#header [data-row="middle"] .ct-header-account,
#header [data-row="middle"] [data-toggle-panel] {
	color: var(--fd-white);
}

#header [data-row="middle"] .ct-header-search .ct-icon-container,
#header [data-row="middle"] .ct-header-cart .ct-cart-item .ct-icon-container {
	background: rgba(78, 8, 0, .35);
	border-radius: 50%;
	padding: 10px;
	transition: background-color .2s ease, color .2s ease;
}

#header [data-row="middle"] .ct-header-search:hover .ct-icon-container,
#header [data-row="middle"] .ct-header-cart .ct-cart-item:hover .ct-icon-container {
	background: var(--fd-white);
	color: var(--fd-primary);
}

#header .ct-dynamic-count-cart,
#header [class*="ct-dynamic-count"] {
	background: var(--fd-gold);
	color: var(--fd-brown);
	font-weight: 600;
}

/* Compacte sticky header (JS zet .fd-is-compact na 140px scroll).
   De normale rijhoogte laten we aan de Customizer; wij zetten alleen de
   compacte hoogte via Blocksy's eigen --height variabele. */
#header.fd-is-compact [data-row="middle"] { --height: 64px; }
#header.fd-is-compact .site-logo-container img { max-height: 48px; width: auto; }
#header.fd-is-compact [data-row="middle"] .menu-container > ul > li > .ct-menu-link { font-size: 16px; }

/* Golf-divider onder de header */
.fd-wave {
	display: block;
	width: 100%;
	height: 34px;
	margin-top: -1px;
	line-height: 0;
}

.fd-wave svg { display: block; width: 100%; height: 100%; }

/* =========================================================================
   6. USP-STRIP + FOOTER
   ========================================================================= */
.fd-usps {
	background: var(--fd-brown);
	color: var(--fd-white);
}

.fd-usps__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	padding: 14px 0;
	margin: 0;
	list-style: none;
}

.fd-usps__grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--fd-font-head);
	letter-spacing: 1px;
	font-size: 15px;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

.fd-usps__grid b { color: var(--fd-gold); font-size: 18px; }

.fd-footer {
	position: relative;
	color: #F3E7E0;
	background: linear-gradient(180deg, var(--fd-wine), var(--fd-red-900));
	overflow: hidden;
	font-size: 14px;
}

.fd-footer a { color: inherit; text-decoration: none; }
.fd-footer a:hover { color: var(--fd-gold); }

.fd-footer__wave { display: block; width: 100%; height: 40px; position: relative; z-index: 1; line-height: 0; }
.fd-footer__wave svg { display: block; width: 100%; height: 100%; }

.fd-footer__cols {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
	gap: 36px;
	padding: 44px 0 40px;
}

.fd-footer h4 {
	font-family: var(--fd-font-display);
	font-weight: 400;
	font-size: 22px;
	color: var(--fd-white);
	margin: 0 0 14px;
	letter-spacing: .5px;
	text-transform: none;
}

.fd-footer ul { list-style: none; margin: 0; padding: 0; }
.fd-footer li { margin-bottom: 8px; }

.fd-footer__about img {
	height: 84px;
	width: 84px;
	border-radius: 50%;
	background: var(--fd-white);
	margin-bottom: 14px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.fd-footer__about p { margin-bottom: 12px; line-height: 1.55; }
.fd-footer__age { font-size: 12.5px; opacity: .85; }

.fd-footer__social { display: flex; gap: 10px; margin-top: 12px; }

.fd-footer__social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	display: grid;
	place-items: center;
}

.fd-footer__social a:hover { background: var(--fd-white); color: var(--fd-primary); }

.fd-footer address { font-style: normal; line-height: 1.6; }

.fd-footer address b {
	font-family: var(--fd-font-head);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--fd-gold);
	display: block;
	margin-top: 8px;
}

.fd-footer__maplink {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--fd-font-head);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
	background: var(--fd-white);
	color: var(--fd-primary);
	padding: 7px 14px;
	border-radius: var(--fd-radius-sm);
}

.fd-footer__maplink:hover { background: var(--fd-gold); color: var(--fd-red-900); }

.fd-footer__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, .15);
	background: rgba(0, 0, 0, .25);
}

.fd-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 0;
	font-size: 12.5px;
}

.fd-pay { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.fd-pay li {
	background: var(--fd-white);
	color: var(--fd-ink);
	font-family: var(--fd-font-head);
	letter-spacing: .5px;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 4px;
	line-height: 1.2;
	margin: 0;
}

.fd-footer__legal { display: flex; gap: 16px; opacity: .85; flex-wrap: wrap; }

/* =========================================================================
   7. 18+ LEEFTIJDSCHECK
   ========================================================================= */
.fd-agegate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: rgba(78, 8, 0, .92);
	padding: 20px;
}

.fd-agegate[hidden] { display: none !important; }

.fd-agegate__box {
	background: var(--fd-white);
	color: var(--fd-ink);
	max-width: 460px;
	width: 100%;
	border-radius: 14px;
	padding: 32px 28px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.fd-agegate__box h2 {
	font-family: var(--fd-font-display);
	text-transform: none;
	font-size: 34px;
	color: var(--fd-primary);
	margin: 0 0 10px;
}

.fd-agegate__box p { margin: 0 0 20px; font-size: 15px; color: var(--fd-grey-700); }
.fd-agegate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.fd-agegate__no {
	background: transparent;
	color: var(--fd-grey-700);
	border: 1px solid var(--fd-grey-300);
	border-radius: var(--fd-radius-pill);
	padding: 12px 24px;
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	cursor: pointer;
}

.fd-agegate__denied { font-size: 14px; color: var(--fd-red-700); margin-top: 16px; }

/* =========================================================================
   8. RESPONSIEF
   ========================================================================= */
@media (max-width: 1100px) {
	#header [data-row="middle"] .menu-container > ul > li > .ct-menu-link { font-size: 16px; }
}

@media (max-width: 999px) {
	.fd-topbar__usp li:nth-child(2) { display: none; }
	.fd-topbar__meta .fd-hide-m { display: none; }
	.fd-usps__grid { grid-template-columns: repeat(2, 1fr); }
	.fd-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
	.fd-footer__bottom-inner { justify-content: center; text-align: center; }
}

@media (max-width: 575px) {
	.fd-topbar__usp { font-size: 11px; white-space: nowrap; }
	.fd-topbar__usp li:first-child { display: none; }
	.fd-topbar__usp li:nth-child(2) { display: block; }
	.fd-topbar__meta { gap: 12px; }
	.fd-topbar__meta .fd-hide-s { display: none; }
	.fd-footer__cols { grid-template-columns: 1fr; }
	.fd-wave { height: 22px; }
}

/* =========================================================================
   9. HOMEPAGE  (pagina "Home", opgebouwd uit blokken + de klassen hieronder)
   De secties lopen van rand tot rand binnen de Blocksy-container.
   ========================================================================= */
/* De secties die van rand tot rand lopen zitten in een volledige container;
   de blok-layout van WordPress zet daar een maximale breedte op die we hier
   weer weghalen. */
.home .entry-content > .fd-hero,
.home .entry-content > .fd-story,
.home .entry-content > .fd-section--help {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* De hero sluit direct aan op het golfmotief onder de header */
.home .site-main > .ct-container-full,
.home .site-main > .ct-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Geen paginatitel en geen extra ruimte boven de hero op de voorpagina */
.home .hero-section,
.home .page-title,
.home .entry-header { display: none; }
.home .site-main > article > .entry-content > *:first-child { margin-top: 0; }
.home .ct-container > article,
.home .entry-content { margin-top: 0; }

/* ---- Hero ---- */
.fd-hero {
	position: relative;
	background-color: var(--fd-red-900);
	color: var(--fd-white);
	padding: clamp(48px, 7vw, 92px) 20px clamp(56px, 8vw, 104px);
	overflow: hidden;
}

.fd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fd-hero-img);
	background-size: cover;
	background-position: center;
	opacity: .35;
	mix-blend-mode: soft-light;
}

.fd-hero__inner { position: relative; max-width: 1320px; margin: 0 auto; }

.fd-hero__eyebrow {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 13px;
	color: var(--fd-gold);
	margin: 0 0 14px;
}

.fd-hero__title {
	font-size: clamp(38px, 6.4vw, 78px);
	line-height: .98;
	margin: 0 0 22px;
	color: var(--fd-primary);
	max-width: 15ch;
	-webkit-text-stroke: 3px var(--fd-white);
}

.fd-hero__text { max-width: 54ch; font-size: 17px; color: rgba(255, 255, 255, .9); margin: 0 0 26px; }

.fd-hero__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 0 0 34px; }

.fd-hero__link {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 13px;
	color: var(--fd-white);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: 2px;
}

.fd-hero__link:hover { color: var(--fd-gold); border-color: var(--fd-gold); }

.fd-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
}

.fd-hero__trust li { margin: 0; }
.fd-hero__trust b { color: var(--fd-gold); }

/* ---- Sectiekoppen ---- */
.fd-section { padding: clamp(36px, 5vw, 64px) 0 8px; }
.fd-section--tight { padding-top: clamp(28px, 4vw, 48px); }

.fd-section__head { max-width: 640px; margin: 0 0 26px; }
.fd-section__head h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; color: var(--fd-red-900); }
.fd-section__sub { color: var(--fd-grey-700); margin: 0; }

/* ---- Categorietegels ---- */
.fd-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.fd-cat {
	display: flex;
	flex-direction: column;
	background: var(--fd-white);
	border: 1px solid var(--fd-grey-300);
	border-radius: var(--fd-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fd-cat:hover { transform: translateY(-3px); box-shadow: var(--fd-shadow); border-color: var(--fd-primary); }

.fd-cat__img { display: block; aspect-ratio: 16 / 10; background: var(--fd-cream); overflow: hidden; }
.fd-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fd-cat__body { padding: 16px 18px 18px; display: block; }

.fd-cat__title {
	display: block;
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	font-size: 20px;
	color: var(--fd-red-900);
	letter-spacing: .02em;
}

.fd-cat__sub { display: block; font-size: 14px; color: var(--fd-grey-700); margin-top: 4px; }

/* ---- Winkelverhaal ---- */
.fd-story { background: var(--fd-cream); padding: clamp(40px, 6vw, 76px) 20px; }

.fd-story__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.fd-story__text h2 { font-size: clamp(26px, 3.4vw, 40px); color: var(--fd-primary); margin: 0 0 16px; }
.fd-story__text p { max-width: 56ch; }

.fd-story__visual {
	position: relative;
	border-radius: var(--fd-radius);
	overflow: hidden;
	background-color: var(--fd-red-900);
	min-height: 320px;
	display: grid;
	place-items: center;
	padding: 28px;
}

.fd-story__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fd-hero-img);
	background-size: cover;
	background-position: center;
	opacity: .4;
	mix-blend-mode: soft-light;
}

.fd-story__card {
	position: relative;
	background: rgba(255, 255, 255, .96);
	border-radius: var(--fd-radius);
	padding: 24px 26px;
	display: grid;
	gap: 6px;
	justify-items: start;
	box-shadow: var(--fd-shadow);
	font-size: 15px;
}

.fd-story__card strong { font-family: var(--fd-font-head); text-transform: uppercase; font-size: 17px; color: var(--fd-red-900); }
.fd-story__hours { color: var(--fd-grey-700); font-size: 14px; line-height: 1.5; }

.fd-story__route {
	margin-top: 8px;
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12px;
	background: var(--fd-cta);
	color: var(--fd-white);
	padding: 9px 16px;
	border-radius: var(--fd-radius-pill);
	text-decoration: none;
}

.fd-story__route:hover { background: var(--fd-red-800); color: var(--fd-white); }

/* ---- Uitlegblokken onderaan ---- */
.fd-section--help { background: var(--fd-red-900); color: var(--fd-white); padding: clamp(36px, 5vw, 60px) 20px; }

.fd-help {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
}

.fd-help__item h3 {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	font-size: 19px;
	color: var(--fd-gold);
	margin: 0 0 8px;
}

.fd-help__item p { color: rgba(255, 255, 255, .88); margin: 0; font-size: 15px; }

/* ---- Productgrids uit de shortcode ---- */
.home .woocommerce ul.products { margin-top: 0; }

/* ---- Werktekst-melding op servicepagina's ---- */
.fd-concept {
	background: var(--fd-cream);
	border-left: 4px solid var(--fd-primary);
	border-radius: var(--fd-radius);
	padding: 14px 18px;
	font-size: 14px;
	color: var(--fd-grey-700);
}

@media (max-width: 999px) {
	.fd-cats { grid-template-columns: repeat(2, 1fr); }
	.fd-story__inner { grid-template-columns: 1fr; }
	.fd-help { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 575px) {
	.fd-cats { grid-template-columns: 1fr; }
	.fd-hero__trust { flex-direction: column; gap: 8px; }
}

/* =========================================================================
   10. CATEGORIE- EN PAGINAKOP
   Blocksy zet hier standaard de categorieafbeelding achter; wij maken er een
   rustige donkerrode balk van zodat de titel altijd leesbaar is.
   ========================================================================= */
.hero-section,
.hero-section[data-type="type-1"],
.hero-section[data-type="type-2"] {
	background-color: var(--fd-red-900) !important;
	background-image: none !important;
	color: var(--fd-white);
	position: relative;
	overflow: hidden;
	padding-block: clamp(28px, 4vw, 52px);
	min-height: 0;
}

/* Blocksy zet de categorieafbeelding als <figure> in de kop; die halen we weg
   zodat de titel altijd op de merkkleur staat en leesbaar blijft. */
.hero-section > figure,
.hero-section > img,
.hero-section picture,
.hero-section .ct-media-container { display: none !important; }

.hero-section .entry-header { position: relative; z-index: 1; }

.hero-section .page-title {
	color: var(--fd-white);
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	margin: 0 0 10px;
}

.hero-section .page-description,
.hero-section .entry-header p,
.hero-section .term-description { color: rgba(255, 255, 255, .85); max-width: 70ch; }

.hero-section a,
.hero-section .ct-breadcrumbs a { color: var(--fd-gold); }
.hero-section .ct-breadcrumbs { color: rgba(255, 255, 255, .7); }

/* Sorteerbalk en resultaatteller in de shop */
.woocommerce-result-count {
	font-family: var(--fd-font-head);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px;
	color: var(--fd-grey-700);
}

/* Ruimte tussen een sectiekop en het productraster eronder */
.entry-content > .woocommerce { margin-bottom: 8px; }

/* Op de productpagina bevat de kop alleen het kruimelpad; daar past geen
   donkere balk. Die laten we transparant met leesbare tekst. */
.single-product .hero-section,
.single-product .hero-section[data-type="type-1"],
.single-product .hero-section[data-type="type-2"] {
	background-color: transparent !important;
	padding-block: 6px;
}

.single-product .hero-section .ct-breadcrumbs,
.single-product .hero-section .ct-breadcrumbs a { color: var(--fd-grey-700); }
.single-product .hero-section .ct-breadcrumbs a:hover { color: var(--fd-primary); }