/* ==========================================================================
   Dutch Peptide theme - v1.0.0
   Brand accent: #1e9cd8 (blue)
   Base: pure black (#000)
   Typography: Inter
   ========================================================================== */

:root {
	--dp-accent: #1e9cd8;
	--dp-accent-light: #5bbce8;
	--dp-accent-dark: #0d78b0;
	--dp-ink: #000;
	--dp-panel: #0a0a0a;
	--dp-card: #0f0f0f;
	--dp-border: rgba(255, 255, 255, 0.06);
	--dp-border-strong: rgba(255, 255, 255, 0.1);
	--dp-text: rgba(255, 255, 255, 0.85);
	--dp-text-mute: rgba(255, 255, 255, 0.6);
	--dp-live-red: #e11d48;

	--dp-radius: 18px;
	--dp-radius-lg: 22px;
	--dp-radius-xl: 28px;

	--dp-font: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Reset-ish */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: auto; overscroll-behavior: none; }
body {
	margin: 0;
	background: #000;
	color: var(--dp-text);
	font-family: var(--dp-font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	max-width: 100vw;
	-webkit-tap-highlight-color: rgba(30, 156, 216, 0.18);
}
* { -webkit-tap-highlight-color: rgba(30, 156, 216, 0.18); }
html { overflow-x: hidden; max-width: 100vw; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--dp-accent); color: #000; }

/* Grain overlay */
.dp-grain::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
	opacity: 0.04;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Container + section */
.dp-container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.dp-section { padding: 48px 20px; }
@media (min-width: 768px) { .dp-section { padding: 64px 32px; } }
@media (min-width: 1024px) { .dp-section { padding: 96px 40px; } }
@media (min-width: 1200px) { .dp-section { padding: 120px 40px; } }

.dp-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--dp-accent); margin-bottom: 16px;
}
.dp-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--dp-accent); }

.dp-section-head h2 { font-size: clamp(32px, 4vw, 60px); font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.05; color: #fff; }
.dp-section-sub { margin-top: 20px; color: var(--dp-text-mute); max-width: 640px; }
.dp-section-head-center { text-align: center; margin: 0 auto 48px; max-width: 720px; }
.dp-section-head-center .dp-eyebrow { justify-content: center; }

.dp-accent { color: var(--dp-accent); }

/* ========== TICKER ========== */
.dp-ticker {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	background: rgba(0,0,0,0.95);
	backdrop-filter: blur(10px);
}
body.dp-body { padding-top: 34px; }
/* WP admin bar compatibility */
body.admin-bar .dp-header { top: 32px; }
body.admin-bar.dp-body { padding-top: 0; }
@media (max-width: 782px) {
	body.admin-bar .dp-header { top: 46px; }
}
/* ========== HEADER / NAV ========== */
.dp-header {
	position: fixed;
	top: 12px;
	inset-inline: 0;
	z-index: 40;
	padding: 0 16px;
	animation: dp-slide-down 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .dp-header { padding: 0 32px; } }
@keyframes dp-slide-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dp-nav-pill {
	max-width: 1152px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 10px 24px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.85);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.dp-logo .custom-logo,
.dp-logo-img { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; background: #fff; display: block; }
@media (max-width: 767px) { .dp-logo-img { height: 36px; width: 36px; } }
.dp-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dp-wordmark { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.dp-wordmark-accent { color: var(--dp-accent); }

.dp-primary-nav { display: none; }
@media (min-width: 1024px) { .dp-primary-nav { display: block; } }
.dp-menu {
	list-style: none; padding: 0; margin: 0;
	display: flex; align-items: center; gap: 28px;
}
.dp-menu a {
	font-size: 14px; font-weight: 500;
	color: rgba(255,255,255,0.75); transition: color 0.25s;
	position: relative;
}
.dp-menu a:hover { color: #fff; }
.dp-menu .current-menu-item a { color: var(--dp-accent); }

.dp-nav-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) {
	.dp-nav-actions { gap: 2px; }
	.dp-nav-icon { width: 40px; height: 40px; }
}

/* Language picker - single icon-button in nav, click opens dropdown with all
   24 EU languages. Bridges to the Google Translate widget in footer.php. */
.dp-lang-dropdown {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}
.dp-lang-dropdown summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.dp-lang-dropdown summary::-webkit-details-marker { display: none; }
.dp-lang-dropdown summary::marker { display: none; content: ''; }

.dp-lang-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px;
	width: auto !important;
	padding: 0 10px !important;
	min-width: 40px;
	border-radius: 999px;
}

/* Emoji flag - let it render at native font size */
.dp-lang-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.dp-lang-flag-current { font-size: 18px; }
.dp-lang-caret {
	transition: transform 0.2s;
	opacity: 0.65;
}
.dp-lang-dropdown[open] .dp-lang-caret { transform: rotate(180deg); }

.dp-lang-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	width: 220px;
	max-height: 60vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(15, 15, 15, 0.97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	padding: 6px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	display: flex;
	flex-direction: column;
	gap: 1px;
	animation: dp-lang-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.dp-lang-panel::-webkit-scrollbar { width: 6px; }
.dp-lang-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
@keyframes dp-lang-pop {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dp-lang-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s, color 0.15s;
}
.dp-lang-option:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.dp-lang-option.is-active {
	background: rgba(30, 156, 216, 0.15);
	color: var(--dp-accent);
}
.dp-lang-option .dp-lang-flag { font-size: 18px; }
.dp-lang-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mobile tweaks */
@media (max-width: 480px) {
	.dp-nav-actions { gap: 4px; }
	.dp-lang-trigger { padding: 0 8px !important; min-width: 36px; }
	.dp-lang-caret { width: 8px; height: 8px; }
	.dp-lang-panel { width: 200px; }
}

/* ===== Hide Google Translate's default UI ===== */
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight { display: none !important; box-shadow: none !important; background: transparent !important; }
/* Hide the inline GT widget select that gets injected into our hidden div */
#google_translate_element { display: none !important; }
font[style*="vertical-align: inherit"] { vertical-align: inherit !important; }
.dp-nav-icon {
	height: 36px; width: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.8); transition: background 0.25s, color 0.25s;
	position: relative;
}
.dp-nav-icon:hover { background: rgba(255,255,255,0.1); color: #fff; }
.dp-cart-count {
	position: absolute; top: -2px; right: -2px;
	height: 16px; min-width: 16px; padding: 0 3px;
	border-radius: 999px; background: var(--dp-accent);
	color: #000; font-size: 10px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	transition: transform 0.25s;
}
.dp-cart-count-empty { display: none; }
.dp-mobile-btn { display: flex; }
@media (min-width: 1024px) { .dp-mobile-btn { display: none; } }

/* Mobile menu overlay */
.dp-mobile-menu {
	position: fixed; inset: 0; z-index: 60;
	background: #000;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex; flex-direction: column;
}
.dp-mobile-menu.is-open { transform: translateX(0); }
.dp-mobile-menu-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.1);
	font-weight: 600;
}
.dp-mobile-close { color: #fff; padding: 4px; }
.dp-mobile-nav { padding: 24px 20px; }
.dp-mobile-nav ul, .dp-mobile-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dp-mobile-nav li { display: block; }
.dp-mobile-nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 4px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dp-mobile-nav a:hover,
.dp-mobile-nav a:active { color: var(--dp-accent); background: rgba(255,255,255,0.02); }

/* ========== HERO ========== */
.dp-main { min-height: 100vh; }
.dp-hero {
	position: relative;
	overflow: hidden;
	padding-top: 110px;
	padding-bottom: 0;
	background:
		radial-gradient(80% 60% at 50% 40%, rgba(30, 156, 216, 0.08) 0%, transparent 60%),
		radial-gradient(60% 60% at 50% 100%, rgba(0, 0, 0, 1) 0%, transparent 60%),
		#000;
}
@media (max-width: 767px) {
	.dp-hero { padding-top: 90px; padding-bottom: 0; }
	.dp-hero-checks { margin-top: 24px !important; }
	.dp-hero-cta { margin-top: 28px !important; }
	.dp-scroll-hint { display: none; }
}
.dp-hero-content {
	position: relative; z-index: 10;
	max-width: 960px; margin: 0 auto; padding: 0 24px; text-align: center;
}
.dp-hero-title {
	font-size: clamp(1.9rem, 7vw, 5rem);
	font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0;
	color: #fff; text-shadow: 0 0 60px rgba(30, 156, 216, 0.15);
}
.dp-hero-checks {
	list-style: none; padding: 0; margin: 40px 0 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px;
	font-size: 15px; color: rgba(255,255,255,0.85);
}
.dp-hero-checks li { display: flex; align-items: center; gap: 8px; }
.dp-check { color: var(--dp-accent); flex-shrink: 0; }
.dp-hero-sub { margin-top: 24px; font-size: 14px; color: rgba(255,255,255,0.55); }
.dp-hero-cta {
	margin-top: 40px;
	display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center;
}
@media (min-width: 640px) { .dp-hero-cta { flex-direction: row; } }

.dp-hero-glow {
	position: absolute;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 520px; height: 520px; border-radius: 50%;
	background: rgba(30, 156, 216, 0.08);
	filter: blur(80px);
	pointer-events: none;
}

/* Hero product photo (full vials line-up below the title) */
.dp-hero-photo {
	position: relative;
	z-index: 5;
	margin: 32px auto 0;
	width: 100%;
	max-width: 1280px;
	padding: 0 16px;
}
.dp-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	max-height: clamp(320px, 70dvh, 720px);
	object-fit: contain;
	border-radius: 0;
	/* Fade all 4 edges into the bg so the rectangle disappears.
	   Two linear masks intersected → soft border on every side. */
	-webkit-mask-image:
		linear-gradient(to bottom, transparent 0%, #000 9%, #000 76%, transparent 100%),
		linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, transparent 0%, #000 9%, #000 76%, transparent 100%),
		linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
	mask-composite: intersect;
}
.dp-hero-photo .dp-hero-cta {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
	margin-top: 0;
	z-index: 6;
	width: max-content;
	max-width: calc(100% - 48px);
}
@media (max-width: 767px) {
	.dp-hero-photo { margin-top: 16px; padding: 0 8px; }
	.dp-hero-photo img {
		max-height: 60vh;
		max-height: clamp(300px, 60dvh, 460px);
	}
	.dp-hero-photo .dp-hero-cta { bottom: 12%; }
}

.dp-scroll-hint {
	display: none !important; /* v1.5.21 - verwijderd op alle schermen,
	   was leftover van de oude hero layout. User: "haal het weg" */
	position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
	z-index: 10; font-size: 10px; letter-spacing: 0.3em;
	text-transform: uppercase; color: rgba(255,255,255,0.4);
}

.dp-reveal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.dp-reveal-inner {
	display: inline-block;
	transform: translateY(110%);
	animation: dp-reveal-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(0.3s + var(--delay, 0s));
}
@keyframes dp-reveal-in { to { transform: translateY(0); } }

/* ========== BUTTONS ========== */
.dp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 15px; font-weight: 600;
	text-decoration: none;
	position: relative; overflow: hidden;
	transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	cursor: pointer;
	white-space: nowrap;
}
.dp-btn-gold {
	background: var(--dp-accent);
	color: #000;
	box-shadow:
		0 0 0 1px rgba(30, 156, 216, 0.6),
		0 0 24px rgba(30, 156, 216, 0.45),
		0 0 60px rgba(30, 156, 216, 0.25);
}
.dp-btn-gold:hover {
	background: var(--dp-accent-light);
	box-shadow:
		0 0 0 1px rgba(91, 188, 232, 0.8),
		0 0 34px rgba(30, 156, 216, 0.75),
		0 0 90px rgba(30, 156, 216, 0.5);
	transform: translateY(-1px);
}
.dp-btn-ghost {
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.dp-btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.25); }
.dp-btn-block { display: flex; width: 100%; padding: 10px 18px; font-size: 13px; }

.dp-btn-shimmer {
	position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
	background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%);
	background-size: 300% 100%;
	animation: dp-shimmer 2.8s linear infinite;
}
@keyframes dp-shimmer { from { background-position: -600px 0; } to { background-position: 600px 0; } }

.dp-btn-arrow {
	display: inline-block;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.dp-btn:hover .dp-btn-arrow { transform: translateX(4px); }

/* ========== FEATURES ========== */
.dp-features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 768px) { .dp-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dp-features-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.dp-feature { text-align: center; }
.dp-feature-num {
	margin: 0 auto 20px;
	height: 40px; width: 40px;
	border-radius: 50%;
	background: rgba(30, 156, 216, 0.15);
	border: 1px solid rgba(30, 156, 216, 0.4);
	color: var(--dp-accent);
	font-size: 14px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.dp-feature h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 12px; }
.dp-feature p { color: var(--dp-text-mute); font-size: 14px; max-width: 320px; margin: 0 auto; }

/* ========== CATEGORIES ========== */
/* Tighter top padding now that the section header is gone - sit closer to the hero. */
.dp-categories { padding-top: 32px !important; }
@media (min-width: 768px) { .dp-categories { padding-top: 56px !important; } }
@media (min-width: 1024px) { .dp-categories { padding-top: 72px !important; } }

.dp-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 768px) { .dp-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .dp-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.dp-cat-tile {
	aspect-ratio: 1;
	background: linear-gradient(180deg, #5bbce8 0%, #1e9cd8 100%);
	color: #000;
	border-radius: var(--dp-radius-lg);
	padding: 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s;
}
.dp-cat-tile:hover { transform: translateY(-6px) scale(1.02); filter: brightness(1.08) drop-shadow(0 10px 40px rgba(30, 156, 216, 0.4)); }
.dp-cat-icon { color: #000; margin-bottom: 12px; }
.dp-cat-icon svg { width: 48px; height: 48px; stroke-width: 1.75; }
.dp-cat-name { font-weight: 700; font-size: 14px; line-height: 1.1; color: #000; }
@media (min-width: 768px) { .dp-cat-name { font-size: 16px; } }
.dp-cat-count { font-size: 11px; color: rgba(0,0,0,0.7); margin-top: 2px; }

/* Shop loop header: stack result-count + sorting properly so they don't break the grid */
.dp-shop .woocommerce-result-count,
.dp-shop .woocommerce-ordering,
.dp-wc-wrap .woocommerce-result-count,
.dp-wc-page .woocommerce-result-count,
.dp-wc-wrap .woocommerce-ordering,
.dp-wc-page .woocommerce-ordering {
	float: none !important;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 8px;
	color: var(--dp-text-mute);
}
.dp-shop .woocommerce-ordering,
.dp-wc-wrap .woocommerce-ordering,
.dp-wc-page .woocommerce-ordering { float: right !important; }
@media (max-width: 767px) {
	.dp-shop .woocommerce-result-count,
	.dp-shop .woocommerce-ordering,
	.dp-wc-wrap .woocommerce-result-count,
.dp-wc-page .woocommerce-result-count,
	.dp-wc-wrap .woocommerce-ordering,
.dp-wc-page .woocommerce-ordering {
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 0 0 12px !important;
		text-align: left !important;
	}
}
.dp-shop ul.products,
.dp-wc-wrap ul.products,
.dp-wc-page ul.products { clear: both; margin-top: 24px !important; }

/* ========== PRODUCT GRID ==========
   Use very high-specificity selectors + !important on grid-template-columns
   to override stray CiyaShop/WC rules that were collapsing the grid to "2px 2px". */
.dp-product-grid,
.dp-shop .products,
ul.products,
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6,
.woocommerce ul.products,
.woocommerce-page ul.products,
.dp-wc-wrap ul.products,
.dp-wc-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}
@media (min-width: 768px) {
	.dp-product-grid,
	.dp-shop .products,
	ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.dp-wc-wrap ul.products,
	.dp-wc-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}
}
@media (min-width: 1024px) {
	.dp-product-grid,
	.dp-shop .products,
	ul.products,
	ul.products.columns-1,
	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.dp-wc-wrap ul.products,
	.dp-wc-page ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
ul.products li.product,
ul.products article.product,
ul.products .product {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	grid-column: auto !important;
}
/* Kill WooCommerce's clearfix ::before/::after pseudo-elements - in a CSS
   Grid container they become phantom grid items and push the first product
   off into column 2. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.dp-shop ul.products::before,
.dp-shop ul.products::after,
.dp-wc-wrap ul.products::before,
.dp-wc-wrap ul.products::after,
.dp-wc-page ul.products::before,
.dp-wc-page ul.products::after {
	content: none !important;
	display: none !important;
}

.dp-product-card {
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex; flex-direction: column;
	list-style: none;
	height: 100%;
}
.dp-product-card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.dp-product-card-name {
	min-height: 2.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
}
.dp-product-card-price { margin-top: auto; }
.dp-product-card .dp-btn { margin-top: 8px; }
ul.products { align-items: stretch; }
ul.products li.product,
ul.products article.dp-product-card { height: 100%; }
.dp-product-card:hover {
	border-color: rgba(30, 156, 216, 0.4);
	transform: translateY(-4px);
}
.dp-product-card-img {
	position: relative;
	display: block;
	/* v1.5.25: aspect 4/5 (taller) zodat de bottle-foto's groter renderen
	   per Kale's WA feedback "plaatjes groter zoals demo en peptide" */
	aspect-ratio: 4 / 5;
	background: #fff;
	overflow: hidden;
}
.dp-product-card-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 10px;
	transition: none;
}
.dp-product-card:hover .dp-product-card-img img { transform: none; }
.dp-product-badge {
	position: absolute; top: 12px; left: 12px; z-index: 10;
	padding: 5px 11px; border-radius: 999px;
	background: var(--dp-accent); color: #000;
	font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.dp-product-badge-sale { background: #fb7185; }

.dp-product-card-body {
	padding: 16px 20px 20px;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.dp-product-card-name {
	font-weight: 700; font-size: 15px; color: #fff;
	transition: color 0.25s;
}
@media (min-width: 768px) { .dp-product-card-name { font-size: 17px; } }
.dp-product-card-name:hover { color: var(--dp-accent); }
.dp-product-card-price { color: var(--dp-accent); font-size: 14px; font-weight: 600; }
.dp-product-card-price .amount,
.dp-product-card-price bdi,
.dp-product-card-price del,
.dp-product-card-price ins { color: inherit; }
.dp-product-card-price ins { text-decoration: none; }

.dp-products-more { margin-top: 56px; display: flex; justify-content: center; }

/* ========== SINGLE PRODUCT ========== */
.dp-single-product { padding-top: 160px; }
.dp-back-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 32px;
	transition: color 0.25s;
}
.dp-back-link:hover { color: var(--dp-accent); }

.dp-single-product .product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 1024px) {
	.dp-single-product .product { grid-template-columns: 6fr 6fr; gap: 64px; }
}

/* Left side: product images */
.dp-single-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 40px;
	position: relative;
}
.dp-single-product .woocommerce-product-gallery__image img { border-radius: 12px; }

/* Right side: summary */
.dp-single-product .summary {
	width: 100% !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.dp-single-product .product_title {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; margin: 0;
}
.dp-single-product .posted_in,
.dp-single-product .tagged_as {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--dp-accent);
}
.dp-single-product .price {
	font-size: 32px !important; font-weight: 800 !important; color: var(--dp-accent) !important;
}
.dp-single-product .price .amount,
.dp-single-product .price bdi,
.dp-single-product .price ins,
.dp-single-product .price del { color: inherit !important; }
.dp-single-product .woocommerce-product-details__short-description { color: var(--dp-text-mute); font-size: 16px; line-height: 1.6; }

/* Add to cart form */
.dp-single-product form.cart {
	display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px;
}
.dp-single-product .quantity .qty {
	width: 80px; padding: 10px 12px;
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
	color: #fff; border-radius: 12px; font-size: 15px; text-align: center;
	outline: none;
}
.dp-single-product .quantity .qty:focus { border-color: var(--dp-accent); }

.dp-single-product .single_add_to_cart_button,
.dp-single-product button.alt {
	background: var(--dp-accent) !important;
	color: #000 !important;
	font-weight: 700 !important;
	border-radius: 999px !important;
	padding: 14px 32px !important;
	border: 0 !important;
	box-shadow:
		0 0 0 1px rgba(30, 156, 216, 0.6),
		0 0 24px rgba(30, 156, 216, 0.45),
		0 0 60px rgba(30, 156, 216, 0.25);
	transition: all 0.35s !important;
}
.dp-single-product .single_add_to_cart_button:hover,
.dp-single-product button.alt:hover {
	background: var(--dp-accent-light) !important;
	transform: translateY(-1px);
}

/* Variations select */
.dp-single-product .variations td { padding: 8px 0; }
.dp-single-product .variations select,
.dp-single-product select,
.woocommerce .variations select,
body.single-product select {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	color: #fff !important;
	padding: 10px 16px !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	outline: none !important;
	min-width: 180px;
	color-scheme: dark;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231e9cd8' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}
.dp-single-product .variations select option,
.dp-single-product select option,
.woocommerce select option,
body.single-product select option {
	background: #0a0a0a;
	color: #fff;
}
.dp-single-product .variations label { color: rgba(255,255,255,0.5); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
.dp-single-product .reset_variations { color: var(--dp-accent); font-size: 12px; margin-left: 12px; }

/* Tabs */
.dp-single-product .woocommerce-tabs { margin-top: 40px; width: 100%; grid-column: 1 / -1; }
.dp-single-product .woocommerce-tabs ul.tabs {
	list-style: none; padding: 0; margin: 0 0 24px; border: 0 !important;
	display: flex; gap: 8px; flex-wrap: wrap;
}
.dp-single-product .woocommerce-tabs ul.tabs::before { display: none !important; }
.dp-single-product .woocommerce-tabs ul.tabs li {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 999px !important;
	padding: 0 !important;
	margin: 0 !important;
}
.dp-single-product .woocommerce-tabs ul.tabs li.active {
	background: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
}
.dp-single-product .woocommerce-tabs ul.tabs li a {
	padding: 8px 18px !important;
	font-size: 14px !important;
	color: rgba(255,255,255,0.8) !important;
}
.dp-single-product .woocommerce-tabs ul.tabs li.active a { color: #000 !important; font-weight: 600; }
.dp-single-product .woocommerce-Tabs-panel { color: var(--dp-text-mute); }
.dp-single-product .woocommerce-Tabs-panel h2 { color: #fff; font-weight: 700; }

.dp-single-product .product_meta { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
.dp-single-product .product_meta .sku,
.dp-single-product .product_meta a { color: rgba(255,255,255,0.7); }

/* Related products */
.dp-single-product .related,
.dp-single-product .upsells {
	margin-top: 80px; padding-top: 40px;
	border-top: 1px solid rgba(255,255,255,0.1);
	grid-column: 1 / -1;
}
.dp-single-product .related > h2,
.dp-single-product .upsells > h2 {
	font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 24px; letter-spacing: -0.01em;
}

/* ========== QUALITY ========== */
.dp-quality-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 1024px) { .dp-quality-grid { grid-template-columns: 5fr 7fr; gap: 56px; } }

.dp-quality-lead h2 {
	font-size: clamp(32px, 3.5vw, 56px); font-weight: 800; letter-spacing: -0.02em;
	color: #fff; margin: 0; line-height: 1.05;
}
.dp-quality-lead p { margin: 24px 0 32px; color: var(--dp-text-mute); max-width: 420px; line-height: 1.7; }

.dp-quality-rows { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dp-quality-rows { grid-template-columns: repeat(2, 1fr); } }
.dp-quality-row {
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 24px;
	transition: border-color 0.5s;
}
.dp-quality-row:hover { border-color: rgba(30, 156, 216, 0.3); }
.dp-quality-icon {
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(30, 156, 216, 0.15);
	border: 1px solid rgba(30, 156, 216, 0.4);
	display: flex; align-items: center; justify-content: center;
	color: var(--dp-accent);
	margin-bottom: 16px;
}
.dp-quality-icon svg { width: 18px; height: 18px; }
.dp-quality-num { font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.dp-quality-row h3 { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.dp-quality-row p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0; }

.dp-quality-disclaimer {
	margin-top: 56px;
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 20px;
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 14px; color: rgba(255,255,255,0.5);
}
.dp-quality-disclaimer strong { color: rgba(255,255,255,0.8); }
.dp-quality-icon-inline { color: var(--dp-accent); flex-shrink: 0; margin-top: 2px; }

/* ========== ABOUT ========== */
.dp-about {
	background:
		radial-gradient(60% 80% at 20% 10%, rgba(30, 156, 216, 0.12) 0%, transparent 60%),
		radial-gradient(50% 60% at 80% 30%, rgba(91, 188, 232, 0.08) 0%, transparent 60%),
		#000;
}
.dp-about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
@media (min-width: 1024px) { .dp-about-grid { grid-template-columns: repeat(2, 1fr); gap: 64px; } }
.dp-about-text h2 { font-size: clamp(32px, 4vw, 60px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; line-height: 1.05; }
.dp-about-text p { color: rgba(255,255,255,0.65); font-size: 15.5px; line-height: 1.7; max-width: 560px; margin: 20px 0; }

.dp-about-stats {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 480px; margin-top: 40px;
}
.dp-stat { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
.dp-stat-n { font-size: 28px; font-weight: 800; color: var(--dp-accent); }
.dp-stat-l { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 4px; }

.dp-about-visual {
	position: relative;
	aspect-ratio: 4/5;
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius-xl);
	overflow: hidden;
}
.dp-about-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 40px;
	background: radial-gradient(circle at 50% 40%, #2a2a2a, #0f0f0f 70%);
}
.dp-about-badge {
	position: absolute;
	background: rgba(244, 241, 234, 0.05);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--dp-radius);
	padding: 16px;
	min-width: 170px;
	animation: dp-badge-float 5s ease-in-out infinite;
}
.dp-about-badge-top { top: 24px; right: 24px; }
.dp-about-badge-bottom { bottom: 24px; left: 24px; animation-delay: 1s; animation-direction: reverse; }
@keyframes dp-badge-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.dp-about-badge-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.dp-about-badge-value { font-size: 24px; font-weight: 700; color: var(--dp-accent); }
.dp-about-badge-strong { font-size: 18px; font-weight: 700; color: #fff; }
.dp-about-badge-sub { font-size: 11px; color: rgba(255,255,255,0.5); }
.dp-about-bar { margin-top: 10px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.dp-about-bar-fill { height: 100%; width: 0; background: var(--dp-accent); transition: width 1.4s cubic-bezier(0.22,1,0.36,1); }
.dp-about-visual.is-visible .dp-about-bar-fill { width: 99.7%; }

/* ========== CTA ========== */
.dp-cta-box {
	position: relative;
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius-xl);
	padding: 48px 32px;
	overflow: hidden;
	text-align: center;
}
@media (min-width: 768px) { .dp-cta-box { padding: 80px; } }
.dp-cta-glow {
	position: absolute; width: 384px; height: 384px; border-radius: 50%;
	filter: blur(80px); pointer-events: none;
}
.dp-cta-glow-tr { top: -160px; right: -160px; background: rgba(30, 156, 216, 0.1); }
.dp-cta-glow-bl { bottom: -160px; left: -160px; background: rgba(30, 156, 216, 0.05); }

.dp-cta-eyebrow { margin-bottom: 20px; display: inline-flex; }
.dp-cta-box h2 {
	font-size: clamp(36px, 5vw, 72px); font-weight: 800;
	letter-spacing: -0.02em; line-height: 1.02; color: #fff; margin: 0;
}
.dp-cta-box p { margin: 24px auto 0; max-width: 640px; font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.6; }

.dp-cta-buttons {
	margin-top: 40px;
	display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center;
}
@media (min-width: 640px) { .dp-cta-buttons { flex-direction: row; flex-wrap: wrap; } }

/* ========== FOOTER ========== */
.dp-footer { background: #000; border-top: 1px solid rgba(255,255,255,0.05); padding: 80px 24px 40px; }
@media (min-width: 768px) { .dp-footer { padding: 80px 40px 40px; } }
.dp-footer-wordmark {
	font-size: clamp(36px, 12vw, 120px);
	font-weight: 800; letter-spacing: -0.04em;
	line-height: 0.9; color: rgba(255,255,255,0.12);
	user-select: none; margin-bottom: 56px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	max-width: 100%;
}
@media (max-width: 480px) {
	.dp-footer-wordmark {
		font-size: 11vw;
		letter-spacing: -0.05em;
		margin-bottom: 32px;
	}
}
@media (min-width: 768px) { .dp-footer-wordmark { font-size: 10vw; } }

/* ========== 18+ AGE VERIFICATION GATE ========== */
.dp-age-gate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0,0,0,0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}
.dp-age-gate[hidden] { display: none; }
.dp-age-card {
	background: var(--dp-card);
	border: 1px solid rgba(30, 156, 216, 0.3);
	border-radius: var(--dp-radius-lg);
	padding: 32px 28px;
	max-width: 520px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(30,156,216,0.15);
}
.dp-age-eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dp-accent);
	margin-bottom: 16px;
	font-weight: 700;
}
.dp-age-title {
	font-size: clamp(20px, 4.5vw, 26px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 16px;
}
.dp-age-intro {
	color: rgba(255,255,255,0.7);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.dp-age-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.dp-age-check:hover { border-color: rgba(30,156,216,0.4); background: rgba(30,156,216,0.05); }
.dp-age-check input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	accent-color: var(--dp-accent);
	margin-top: 1px;
}
.dp-age-check span {
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	line-height: 1.5;
}
.dp-age-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 20px;
}
.dp-age-accept[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}
.dp-age-decline {
	font-size: 13px;
	padding: 10px 20px;
}
@media (max-width: 480px) {
	.dp-age-card { padding: 24px 20px; border-radius: 16px; }
	.dp-age-title { font-size: 19px; }
}

.dp-footer-grid {
	display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 768px) {
	.dp-footer-grid { grid-template-columns: 4fr 2fr 4fr; gap: 32px; }
}
.dp-logo-inline { margin-bottom: 20px; }
.dp-footer-text { color: rgba(255,255,255,0.55); font-size: 14.5px; line-height: 1.6; max-width: 360px; }
.dp-footer-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); margin: 0 0 16px; }
.dp-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dp-footer-col a { color: rgba(255,255,255,0.8); font-size: 14px; transition: color 0.2s; }
.dp-footer-col a:hover { color: var(--dp-accent); }
.dp-footer-contact li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.8); font-size: 14px; }
.dp-footer-contact svg { color: var(--dp-accent); flex-shrink: 0; }
.dp-footer-disclaimer {
	margin-top: 24px;
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 16px;
	font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6;
}

.dp-footer-bottom {
	margin-top: 56px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.1);
	display: flex; flex-direction: column; gap: 12px;
	justify-content: space-between;
	font-size: 13px; color: rgba(255,255,255,0.4);
}
@media (min-width: 768px) { .dp-footer-bottom { flex-direction: row; align-items: center; } }
.dp-footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.dp-footer-legal a:hover { color: #fff; }

/* ========== CART / CHECKOUT (WooCommerce defaults styled) ========== */
.dp-wc-page { padding-top: 160px; padding-bottom: 80px; }

.woocommerce table.shop_table {
	background: var(--dp-card) !important;
	border: 1px solid var(--dp-border) !important;
	border-radius: var(--dp-radius) !important;
	border-collapse: separate !important; border-spacing: 0 !important;
	overflow: hidden;
	color: var(--dp-text);
}
.woocommerce table.shop_table th { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.6); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; padding: 16px; border-bottom: 1px solid var(--dp-border) !important; }
.woocommerce table.shop_table td { border-top: 1px solid var(--dp-border) !important; padding: 16px; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { color: #fff; }

.woocommerce .cart_item img { border-radius: 10px; background: var(--dp-card); }

.woocommerce-cart-form__contents .product-name a { color: #fff; font-weight: 600; }
.woocommerce-cart-form__contents .product-name a:hover { color: var(--dp-accent); }
.woocommerce .amount,
.woocommerce .price { color: var(--dp-accent); font-weight: 600; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button,
.woocommerce-page .button {
	background: var(--dp-accent) !important;
	color: #000 !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 10px 24px !important;
	border: 0 !important;
	box-shadow: 0 0 0 1px rgba(30, 156, 216, 0.6), 0 0 18px rgba(30, 156, 216, 0.4);
	transition: all 0.35s !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background: var(--dp-accent-light) !important;
	transform: translateY(-1px);
}

/* Input fields */
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-form-login input,
.woocommerce-checkout input {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	color: #fff !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
	outline: none !important;
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout input:focus {
	border-color: var(--dp-accent) !important;
}
.woocommerce form .form-row label { color: rgba(255,255,255,0.6); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }

.woocommerce-checkout #order_review,
.woocommerce-cart-form,
.cart_totals {
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 24px;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--dp-card) !important;
	color: var(--dp-text) !important;
	border-radius: 12px !important;
	border-top: 3px solid var(--dp-accent) !important;
	padding: 16px 20px 16px 48px !important;
	position: relative !important;
	list-style: none !important;
}
.woocommerce-error { border-top-color: #fb7185 !important; }
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button { padding: 6px 16px !important; }

/* Replace WC's default green checkmark icon with our brand-blue check */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	font-family: inherit !important;
	content: "" !important;
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	background: var(--dp-accent) !important;
	border-radius: 50% !important;
	color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 14px 14px !important;
}
.woocommerce-error::before {
	background: #fb7185 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 12px 12px !important;
}

/* ========== Checkout: kill any floating-label pattern from plugins ==========
   Some plugins (CiyaShop's checkout enhancements, certain WC payment plugins)
   render the field <label> with `position: absolute` inside the input wrapper,
   causing the placeholder text to overlap the typed value on mobile. Force
   labels back to block-level above the input. */
body.woocommerce-checkout .form-row,
body.woocommerce-checkout-pay .form-row,
.woocommerce-checkout .form-row,
.woocommerce form.checkout .form-row,
.woocommerce form.woocommerce-checkout .form-row {
	display: block !important;
	position: relative !important;
	margin-bottom: 14px !important;
}
body.woocommerce-checkout .form-row > label,
body.woocommerce-checkout .form-row label.checkbox,
body.woocommerce-checkout .woocommerce-input-wrapper > label,
.woocommerce-checkout .form-row > label,
.woocommerce form.checkout .form-row > label {
	display: block !important;
	position: static !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: transparent !important;
	color: rgba(255,255,255,0.65) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	pointer-events: auto !important;
	width: auto !important;
	height: auto !important;
	float: none !important;
	z-index: auto !important;
	opacity: 1 !important;
}
body.woocommerce-checkout .woocommerce-input-wrapper {
	display: block !important;
	width: 100% !important;
	position: static !important;
}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="number"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;
}
/* Common floating-label plugin selectors - force them off */
body.woocommerce-checkout .has-float-label label,
body.woocommerce-checkout .float-label label,
body.woocommerce-checkout .form-row.material label,
body.woocommerce-checkout .form-row.has-floating-label label {
	position: static !important;
	transform: none !important;
	font-size: 12px !important;
}
/* Reset any oversized padding on inputs trying to make space for an absolute label */
body.woocommerce-checkout .form-row.has-float-label input,
body.woocommerce-checkout .form-row.float-label input,
body.woocommerce-checkout .form-row.material input,
body.woocommerce-checkout .form-row.has-floating-label input {
	padding-top: 12px !important;
}

/* ===== Custom checkboxes + radios for checkout (iOS-Safari safe) =====
   Critical lesson: ::before / ::after pseudo-elements DO NOT render on
   <input> in iOS Safari (replaced elements). Using background-image on
   the input itself is the cross-browser pattern that actually shows up
   on phones. */
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-cart input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce input[type="checkbox"]:not(.dp-age-check input):not(#review_form input),
body.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="radio"],
.woocommerce input[type="radio"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	margin: 0 10px 0 0 !important;
	padding: 0 !important;
	border: 2px solid rgba(255,255,255,0.45) !important;
	background-color: rgba(255,255,255,0.06) !important;
	background-image: none !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
	box-shadow: none !important;
	display: inline-block !important;
	position: static !important;
	float: none !important;
	color-scheme: dark;
}
body.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce input[type="checkbox"]:not(.dp-age-check input):not(#review_form input) {
	border-radius: 6px !important;
}
body.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="radio"],
.woocommerce input[type="radio"] {
	border-radius: 50% !important;
}
/* Hover */
body.woocommerce-checkout input[type="checkbox"]:hover,
body.woocommerce-checkout input[type="radio"]:hover,
.woocommerce input[type="checkbox"]:not(.dp-age-check input):not(#review_form input):hover,
.woocommerce input[type="radio"]:hover {
	border-color: var(--dp-accent) !important;
}
/* Checkbox CHECKED: blue fill + white SVG check, drawn ON the input */
body.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce input[type="checkbox"]:not(.dp-age-check input):not(#review_form input):checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-size: 16px 16px !important;
	box-shadow: 0 0 0 3px rgba(30, 156, 216, 0.22) !important;
}
/* Radio CHECKED: blue ring + big white center dot via radial-gradient
   (radial-gradient renders on input cross-browser, unlike pseudo-elements) */
body.woocommerce-checkout input[type="radio"]:checked,
.woocommerce-checkout input[type="radio"]:checked,
.woocommerce input[type="radio"]:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: radial-gradient(circle, #ffffff 0, #ffffff 5px, transparent 5.5px) !important;
	background-size: 100% 100% !important;
	box-shadow: 0 0 0 3px rgba(30, 156, 216, 0.22) !important;
}
/* Focus ring (keyboard) */
body.woocommerce-checkout input[type="checkbox"]:focus-visible,
body.woocommerce-checkout input[type="radio"]:focus-visible,
.woocommerce input[type="checkbox"]:focus-visible,
.woocommerce input[type="radio"]:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 4px rgba(30, 156, 216, 0.35) !important;
}

/* Alignment fix: make sure input + label sit on the same baseline.
   WC checkout labels around radios/checkboxes had inputs floating mid-text. */
body.woocommerce-checkout .form-row label.checkbox,
body.woocommerce-checkout label.checkbox,
body.woocommerce-checkout .woocommerce-form__label-checkbox,
body.woocommerce-checkout .wc_payment_method label,
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method,
body.woocommerce-checkout #payment ul.payment_methods li,
body.woocommerce-checkout .form-row.create-account label,
body.woocommerce-checkout .form-row.terms label,
body.woocommerce-checkout p.form-row label.checkbox > * {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	cursor: pointer !important;
	color: var(--dp-text) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}
/* Inputs inside flex-aligned labels get 2px nudge up so they optically
   center against the cap-height of the label text on iOS Safari. */
body.woocommerce-checkout label.checkbox > input[type="checkbox"],
body.woocommerce-checkout #shipping_method input[type="radio"],
body.woocommerce-checkout ul.wc_payment_methods input[type="radio"],
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-self: center !important;
}
/* List items containing radios - make them flex too so the radio is
   to the LEFT of its label, vertically centered. */
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method,
body.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none !important;
	padding: 8px 0 !important;
}
body.woocommerce-checkout #shipping_method li label,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label,
body.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--dp-text) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}
/* Payment description (small text under the radio label) */
body.woocommerce-checkout ul.payment_methods .payment_box,
body.woocommerce-checkout #payment .payment_box {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 10px !important;
	color: var(--dp-text-mute) !important;
	margin-top: 8px !important;
	padding: 10px 14px !important;
}
/* Payment-method label brightens when its radio is selected */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input[type="radio"]:checked + label,
body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label {
	color: #fff !important;
	font-weight: 600 !important;
}

/* ========== REVEAL ANIMATIONS ========== */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ========== HELPER ========== */
.dp-section-head { margin-bottom: 56px; }
.dp-section-head h2 { display: inline-block; }
.dp-shop-title { font-size: clamp(32px, 4.5vw, 60px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; }
.dp-page-title { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 24px; }
.dp-page-content { color: var(--dp-text-mute); line-height: 1.7; font-size: 16px; }
.dp-page-content a { color: var(--dp-accent); }
.dp-page-content a:hover { color: var(--dp-accent-light); }
.dp-page-content h2, .dp-page-content h3 { color: #fff; margin-top: 32px; }

/* Lucide icon rendering */
[data-lucide] svg { width: 100%; height: 100%; }


/* ==========================================================================
   WPBakery / CiyaShop page builder compatibility
   Ensures pages with WPBakery shortcodes (Wat zijn Peptides, About, etc)
   remain readable on our dark theme
   ========================================================================== */
.dp-page-content,
.dp-page-content .entry-content {
	color: rgba(255,255,255,0.85);
	line-height: 1.7;
	font-size: 16px;
}
.dp-page-content h1, .dp-page-content h2, .dp-page-content h3, .dp-page-content h4 {
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: 2em;
	margin-bottom: 0.6em;
}
.dp-page-content h1 { font-size: clamp(32px, 4vw, 48px); }
.dp-page-content h2 { font-size: clamp(26px, 3vw, 36px); }
.dp-page-content h3 { font-size: 22px; }
.dp-page-content p, .dp-page-content li { color: rgba(255,255,255,0.75); }
.dp-page-content a { color: var(--dp-accent); }
.dp-page-content a:hover { color: var(--dp-accent-light); }
.dp-page-content strong, .dp-page-content b { color: #fff; }
.dp-page-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 16px 0; }
.dp-page-content ul, .dp-page-content ol { padding-left: 24px; margin: 16px 0; }
.dp-page-content blockquote {
	border-left: 3px solid var(--dp-accent); padding: 8px 20px; margin: 24px 0;
	background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.85);
}

/* WPBakery rows and columns: strip CiyaShop-specific backgrounds */
html body.dp-body .dp-page-content [class*="vc_custom_"],
html body .dp-page-content div[class*="vc_custom_"] {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
}
html body .dp-page-content .vc_row,
html body .dp-page-content .wpb_row {
	background-image: none !important; background: transparent !important;
	display: block; width: 100%; max-width: 100%; margin: 0 0 24px !important; padding: 0 !important;
}
html body .dp-page-content .vc_column-inner,
html body .dp-page-content .vc_column_container,
html body .dp-page-content .wpb_column,
html body .dp-page-content .wpb_wrapper {
	padding: 0 !important; background: transparent !important;
	background-image: none !important; box-shadow: none !important;
}
html body .dp-page-content .wpb_text_column { margin-bottom: 16px !important; }
html body .dp-page-content .wpb_single_image img,
html body .dp-page-content .vc_single_image-wrapper img,
html body .dp-page-content [class*="vc_col-"] img,
html body .dp-page-content .wpb_column img { max-width: 100% !important; height: auto !important; display: block; margin: 0 auto; }
html body .dp-page-content .vc_single_image-wrapper { text-align: center; }

/* Hide F Pronk handtekening on about/over ons pages */
.dp-page-content img[src*="handtekening"],
.dp-page-content img[alt*="handtekening" i],
.dp-page-content img[src*="Pronk"] { display: none !important; }

/* pgscore_address_block fallback styling */
.dp-address-block {
	background: var(--dp-card);
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	padding: 24px 28px;
	margin: 24px 0;
}
.dp-address-block-title {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dp-accent);
	margin: 0 0 16px;
	font-weight: 700;
}
.dp-address-block-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dp-address-block-items li {
	color: rgba(255,255,255,0.8);
	font-size: 15px;
}
.dp-address-block-items a {
	color: var(--dp-accent);
	text-decoration: none;
}
.dp-address-block-items a:hover { color: var(--dp-accent-light); }
html body .dp-page-content [style*="color"] { color: inherit !important; }
html body .dp-page-content [style*="background"] { background: transparent !important; background-color: transparent !important; }

/* WooCommerce single product polish (when default WC templates render) */
body.single-product .product { color: var(--dp-text); }
body.single-product .woocommerce-notices-wrapper { margin-bottom: 20px; }
body.single-product .product_title { color: #fff !important; }

/* Cart/checkout dark form polish */
body.woocommerce-cart, body.woocommerce-checkout { color: var(--dp-text); }
body.woocommerce-cart a, body.woocommerce-checkout a { color: var(--dp-accent); }
body.woocommerce-cart a:hover, body.woocommerce-checkout a:hover { color: var(--dp-accent-light); }
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--dp-card) !important;
	border: 1px solid var(--dp-border) !important;
	border-radius: var(--dp-radius) !important;
	padding: 20px !important;
}
body.woocommerce-cart table.shop_table td,
body.woocommerce-cart table.shop_table th { color: #fff; }
body.woocommerce-cart .product-name a { color: var(--dp-accent) !important; }
body.woocommerce-cart .quantity input.qty,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	background: rgba(255,255,255,0.05) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 10px !important;
	color: #fff !important;
	height: 44px !important;
	padding: 6px 12px !important;
}
body.woocommerce-checkout label { color: rgba(255,255,255,0.9) !important; }

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info {
	background: var(--dp-card) !important;
	border-top: 3px solid var(--dp-accent) !important;
	color: #fff !important;
}
.woocommerce-error {
	background: var(--dp-card) !important;
	border-top: 3px solid #fb7185 !important;
	color: #fff !important;
}

/* ========== SINGLE PRODUCT - Description / Reviews polish ==========
   Two real bugs on mobile: (1) long content (headlines, comparison tables)
   inside the description tab overflowed horizontally because nothing was
   constraining the width or wrapping long words; (2) the WooCommerce review
   form rendered with browser-default white inputs against the dark site. */

/* Description / reviews panel container - clip overflow & wrap long words */
.dp-single-product .woocommerce-tabs,
.dp-single-product .woocommerce-Tabs-panel,
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--reviews {
	max-width: 100% !important;
	overflow-x: hidden !important;
	color: var(--dp-text);
}
.dp-single-product .woocommerce-Tabs-panel,
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--reviews {
	padding: 0 !important;
}
.dp-single-product .woocommerce-Tabs-panel *:not(table):not(thead):not(tbody):not(tr):not(th):not(td),
.woocommerce-Tabs-panel--description *:not(table):not(thead):not(tbody):not(tr):not(th):not(td),
.woocommerce-Tabs-panel--reviews *:not(table):not(thead):not(tbody):not(tr):not(th):not(td) {
	max-width: 100% !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}
.dp-single-product .woocommerce-Tabs-panel h1,
.dp-single-product .woocommerce-Tabs-panel h2,
.dp-single-product .woocommerce-Tabs-panel h3,
.dp-single-product .woocommerce-Tabs-panel h4,
.woocommerce-Tabs-panel--description h1,
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
	color: #fff !important;
	margin: 24px 0 12px !important;
	letter-spacing: -0.01em;
	line-height: 1.25;
	hyphens: auto;
}
.dp-single-product .woocommerce-Tabs-panel h1 { font-size: clamp(22px, 4.5vw, 32px) !important; }
.dp-single-product .woocommerce-Tabs-panel h2 { font-size: clamp(20px, 4vw, 28px) !important; }
.dp-single-product .woocommerce-Tabs-panel h3 { font-size: clamp(17px, 3.5vw, 22px) !important; }
.dp-single-product .woocommerce-Tabs-panel p,
.dp-single-product .woocommerce-Tabs-panel li {
	color: rgba(255,255,255,0.75) !important;
	font-size: 15px;
	line-height: 1.65;
}
.dp-single-product .woocommerce-Tabs-panel a { color: var(--dp-accent); }
.dp-single-product .woocommerce-Tabs-panel strong,
.dp-single-product .woocommerce-Tabs-panel b { color: #fff; }
.dp-single-product .woocommerce-Tabs-panel img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px;
	margin: 16px 0;
}

/* Tables inside the description: make them horizontally scrollable
   instead of breaking the page width. */
.dp-single-product .woocommerce-Tabs-panel .table-wrap,
.dp-single-product .woocommerce-Tabs-panel table {
	display: block !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}
.dp-single-product .woocommerce-Tabs-panel table {
	width: max-content !important;
	min-width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
}
.dp-single-product .woocommerce-Tabs-panel table th,
.dp-single-product .woocommerce-Tabs-panel table td {
	padding: 10px 14px !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	color: var(--dp-text) !important;
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
}
.dp-single-product .woocommerce-Tabs-panel table th {
	color: #fff !important;
	font-weight: 700;
	background: rgba(30, 156, 216, 0.08);
}
.dp-single-product .woocommerce-Tabs-panel pre,
.dp-single-product .woocommerce-Tabs-panel code {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(0,0,0,0.4);
	color: var(--dp-text);
	padding: 12px 14px;
	border-radius: 8px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Reviews tab - heading + empty state */
.woocommerce-Reviews,
#reviews,
#comments {
	background: transparent !important;
	color: var(--dp-text) !important;
}
#reviews #comments > h2,
.woocommerce-Reviews-title {
	color: #fff !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 12px !important;
	font-size: 22px !important;
	font-weight: 700;
}
.woocommerce-noreviews,
.woocommerce p.woocommerce-noreviews {
	background: transparent !important;
	color: rgba(255,255,255,0.65) !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
	border: 0 !important;
}

/* Review form */
#review_form_wrapper,
#review_form,
#review_form .comment-respond,
#review_form #respond {
	background: rgba(255,255,255,0.025) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	padding: 20px !important;
	margin-top: 16px !important;
	color: var(--dp-text);
}
#review_form .comment-reply-title { color: #fff; font-weight: 700; }
#review_form .comment-form-rating label,
#review_form .comment-form-comment label,
#review_form .comment-form-author label,
#review_form .comment-form-email label,
#review_form label {
	color: rgba(255,255,255,0.85) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	text-transform: none !important;
	display: block;
	margin-bottom: 6px;
}
#review_form .comment-form-rating .stars { display: block; margin: 6px 0 12px; }
#review_form .stars a { color: rgba(255,255,255,0.35) !important; transition: color 0.2s; }
#review_form .stars a::before { color: inherit !important; }
#review_form .stars a:hover,
#review_form .stars a.active,
#review_form .stars.selected a:not(.active) ~ a,
#review_form .stars.selected a.active ~ a { color: rgba(255,255,255,0.35) !important; }
#review_form .stars.selected a.active,
#review_form .stars.selected a.active ~ a { color: var(--dp-accent) !important; }
#review_form .stars.selected a:not(.active),
#review_form .stars a:hover,
#review_form .stars a:hover ~ a { color: rgba(255,255,255,0.35) !important; }
#review_form .stars.selected a.active,
#review_form .stars a:hover,
#review_form .stars.selected a:nth-child(-n+5),
#review_form .stars:hover a { color: var(--dp-accent) !important; }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form input[type="url"],
#review_form textarea,
#respond #author, #respond #email, #respond #url, #respond #comment,
#commentform #author, #commentform #email, #commentform #url, #commentform #comment {
	background: rgba(255,255,255,0.05) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 10px !important;
	padding: 10px 14px !important;
	width: 100% !important;
	max-width: 100% !important;
	font-size: 14px !important;
	font-family: inherit !important;
	box-shadow: none !important;
	outline: 0 !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}
#review_form input:focus,
#review_form textarea:focus,
#author:focus, #email:focus, #comment:focus {
	border-color: var(--dp-accent) !important;
	box-shadow: 0 0 0 3px rgba(30, 156, 216, 0.18) !important;
}
#review_form .comment-form-cookies-consent label,
#review_form .comment-form-cookies-consent {
	color: rgba(255,255,255,0.55) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
}
#review_form input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--dp-accent);
	margin-top: 2px;
	flex-shrink: 0;
}
#review_form .form-submit,
#review_form p.form-submit { margin-top: 14px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
#review_form input[type="submit"],
#review_form #submit,
.woocommerce-Reviews input#submit {
	background: var(--dp-accent) !important;
	color: #000 !important;
	font-weight: 700 !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 32px !important;
	font-size: 14px !important;
	cursor: pointer;
	box-shadow:
		0 0 0 1px rgba(30, 156, 216, 0.6),
		0 0 18px rgba(30, 156, 216, 0.4) !important;
	transition: all 0.3s !important;
}
#review_form input[type="submit"]:hover,
#review_form #submit:hover {
	background: var(--dp-accent-light) !important;
	transform: translateY(-1px);
}

/* Existing review list (when reviews exist) */
.commentlist,
ol.commentlist {
	list-style: none;
	padding: 0 !important;
	margin: 0 0 16px !important;
}
.commentlist li.comment {
	background: rgba(255,255,255,0.025) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
}
.commentlist .comment_container { background: transparent !important; }
.commentlist .meta strong { color: #fff; }
.commentlist .description { color: rgba(255,255,255,0.7); }
.commentlist .star-rating { color: var(--dp-accent); }

/* Tabs row - extra hardening to make sure dark theme wins on small screens */
.dp-single-product .woocommerce-tabs ul.tabs {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.dp-single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.dp-single-product .woocommerce-tabs ul.tabs li,
.dp-single-product .woocommerce-tabs ul.tabs li.active {
	flex-shrink: 0;
}

/* ========== YITH WooCommerce Product Add-Ons (dark theme override) ==========
   The plugin ships an inline <style> at runtime with white backgrounds and
   teal accent. Here we override its CSS variables AND each individual block
   style - including inline `style="background-color:#ffffff"` it puts on
   .yith-wapo-addon - so the addons match the dark theme. */
#yith-wapo-container,
.yith-wapo-container,
.yith-wapo-container.yith-wapo-form-style-theme {
	--yith-wapo-block-background-color: transparent !important;
	--yith-wapo-accent-color-color: var(--dp-accent) !important;
	--yith-wapo-form-border-color-color: rgba(255,255,255,0.15) !important;
	--yith-wapo-price-box-colors-text: var(--dp-text) !important;
	--yith-wapo-price-box-colors-background: var(--dp-card) !important;
	--yith-wapo-label-font-size: 12px !important;
	--yith-wapo-description-font-size: 11px !important;
	background: transparent !important;
	color: var(--dp-text) !important;
	margin-top: 16px;
}

.yith-wapo-block {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
}

/* The plugin sometimes injects inline `style="background-color:#ffffff"` on
   the addon - this beats it because it's on a more specific selector with
   the same !important. */
#yith-wapo-container .yith-wapo-addon,
.yith-wapo-container .yith-wapo-addon,
.yith-wapo-addon {
	background: rgba(255, 255, 255, 0.03) !important;
	background-color: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
	margin: 0 0 8px !important;
	box-shadow: none !important;
}

.yith-wapo-addon .addon-header {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.yith-wapo-addon .wapo-addon-title,
.yith-wapo-addon h3.wapo-addon-title,
.yith-wapo-addon h3 {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	line-height: 1.3 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	background: transparent !important;
}
.yith-wapo-addon .wapo-addon-title span { color: inherit !important; }
.yith-wapo-addon .wapo-addon-title::before,
.yith-wapo-addon .wapo-addon-title::after { color: var(--dp-accent) !important; }

.yith-wapo-addon .options-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Override inline width:75% to keep selects neat-looking inside addon card */
.yith-wapo-addon .options,
.yith-wapo-addon .options.per-row-1 { width: 100% !important; max-width: 320px; }

.yith-wapo-addon select.yith-wapo-option-value,
.yith-wapo-addon select {
	width: 100% !important;
	max-width: 100% !important;
	background: rgba(255, 255, 255, 0.05) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 8px !important;
	padding: 8px 32px 8px 12px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231e9cd8' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	color-scheme: dark;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
}
.yith-wapo-addon select.yith-wapo-option-value:hover,
.yith-wapo-addon select:hover { border-color: rgba(30, 156, 216, 0.45) !important; }
.yith-wapo-addon select.yith-wapo-option-value:focus,
.yith-wapo-addon select:focus {
	border-color: var(--dp-accent) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(30, 156, 216, 0.2) !important;
}
.yith-wapo-addon select option {
	background: #0a0a0a !important;
	color: #fff !important;
	padding: 8px;
}

.yith-wapo-addon .option-description,
.yith-wapo-addon p.option-description {
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 11px !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.yith-wapo-addon .option-description:empty { display: none !important; }

/* Required & price indicators */
.yith-wapo-required-icon,
.yith-wapo-required-asterisk { color: var(--dp-accent) !important; }
.yith-wapo-addon .sign,
.yith-wapo-addon .woocommerce-Price-amount { color: var(--dp-accent) !important; }

/* Total / price summary box (if shown) */
.yith-wapo-totals,
.yith-wapo-block .yith-wapo-totals {
	background: var(--dp-card) !important;
	border: 1px solid var(--dp-border) !important;
	color: var(--dp-text) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	margin-top: 8px !important;
}
.yith-wapo-totals * { color: inherit !important; }
.yith-wapo-totals .amount,
.yith-wapo-totals .woocommerce-Price-amount { color: var(--dp-accent) !important; font-weight: 700 !important; }

/* ==========================================================================
   v1.5.3 Mobile polish - final pass after iPhone audit.
   These rules sit at the end of the stylesheet to override anything earlier.
   ========================================================================== */

/* Kill iOS zoom-on-focus: any text input < 16px font triggers Safari to
   zoom in when tapped. Force 16px on every form control under 768px. */
@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="date"],
	textarea,
	select,
	.input-text,
	.woocommerce input,
	.woocommerce select,
	.woocommerce textarea {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}
	/* Inputs full-width + comfy padding on phone */
	body.woocommerce-checkout .form-row,
	body.woocommerce-cart .form-row {
		margin-bottom: 18px !important;
	}
	body.woocommerce-checkout .form-row input,
	body.woocommerce-checkout .form-row select,
	body.woocommerce-checkout .form-row textarea {
		padding: 14px 14px !important;
		min-height: 48px !important;
	}
}

/* Single-product page: tabs scroll horizontally if they don't fit, and price
   is smaller on mobile so it doesn't dominate the add-to-cart row. */
@media (max-width: 767px) {
	.dp-single-product .woocommerce-tabs ul.tabs {
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none;
	}
	.dp-single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.dp-single-product .price { font-size: 24px !important; }
	.dp-single-product .product_title { font-size: clamp(24px, 6vw, 32px) !important; }
	/* Quantity + add to cart op DEZELFDE rij (nowrap), aantal links,
	   knop neemt remaining width. */
	.dp-single-product form.cart {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 10px !important;
	}
	.dp-single-product .quantity {
		flex: 0 0 auto !important;
	}
	.dp-single-product .quantity .qty {
		width: 64px !important;
		min-width: 64px !important;
	}
	.dp-single-product .single_add_to_cart_button,
	.dp-single-product button.alt {
		flex: 1 1 auto !important;
		padding: 14px 16px !important;
		min-height: 48px !important;
		font-size: 14px !important;
		white-space: nowrap !important;
	}
}

/* Footer: 2-column grid on tablet (was 4-col 4fr/2fr/4fr); 1-col on phone. */
@media (min-width: 768px) and (max-width: 1023px) {
	.dp-footer-grid { grid-template-columns: 4fr 4fr !important; gap: 32px 40px !important; }
	.dp-footer-col-wide { grid-column: span 2; }
	.dp-footer-col:not(.dp-footer-col-wide) { grid-column: span 1; }
}

/* Lang dropdown: clip-safe on short iPhones (use dvh + bottom: auto so the
   panel can size up to the bottom of the viewport without overflowing). */
@media (max-width: 767px) {
	.dp-lang-panel {
		max-height: 70vh !important;
		max-height: 70dvh !important;
		bottom: auto !important;
		right: -8px !important;
	}
}

/* Address block (pgscore_address_block fallback) - smaller on mobile */
@media (max-width: 767px) {
	.dp-address-block { padding: 16px 18px !important; margin: 16px 0 !important; }
	.dp-address-block-items li { font-size: 14px !important; }
}

/* Cart table on mobile: WC's shop_table_responsive class reformats rows
   into stacked blocks. Add a soft separator + readable spacing. */
@media (max-width: 767px) {
	.woocommerce-cart .woocommerce table.shop_table_responsive,
	.woocommerce-cart table.shop_table_responsive {
		border: 0 !important;
		background: transparent !important;
	}
	.woocommerce-cart table.shop_table_responsive tr {
		display: block !important;
		background: var(--dp-card) !important;
		border: 1px solid var(--dp-border) !important;
		border-radius: 14px !important;
		padding: 14px 16px !important;
		margin-bottom: 12px !important;
	}
	.woocommerce-cart table.shop_table_responsive tr td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,0.06) !important;
		padding: 10px 0 !important;
	}
	.woocommerce-cart table.shop_table_responsive tr td:last-child { border-bottom: 0 !important; }
	.woocommerce-cart table.shop_table_responsive tr td::before {
		content: attr(data-title) ': ' !important;
		color: rgba(255,255,255,0.55) !important;
		font-size: 12px !important;
		text-transform: uppercase !important;
		letter-spacing: 0.1em !important;
	}
}

/* WC notice toast: minimum height so single-line messages center properly
   alongside the brand-blue check badge. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	min-height: 56px !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	flex-shrink: 0 !important;
}
@media (max-width: 767px) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 14px 16px !important;
		font-size: 14px !important;
		flex-direction: row !important;
	}
	.woocommerce-message a.button,
	.woocommerce-info a.button {
		margin-left: auto !important;
	}
}

/* Hero title: tighter clamp + line-height on small phones so it never blows
   off the screen. v1.5.15 - verder verkleint omdat lange Nederlandse
   woorden (Onderzoekswaardige, Laboratorium) op iPhone breedte werden
   afgekapt aan de rechterkant. */
@media (max-width: 768px) {
	.dp-hero-title {
		font-size: clamp(1.5rem, 7.2vw, 2.4rem) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.02em !important;
		hyphens: auto !important;
		overflow-wrap: break-word !important;
		word-break: normal !important;
	}
	.dp-hero-content { padding: 0 16px !important; }
}
@media (max-width: 480px) {
	.dp-hero-title {
		font-size: clamp(1.3rem, 7vw, 1.85rem) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.025em !important;
	}
	.dp-hero-content { padding: 0 12px !important; }
	.dp-hero-checks { font-size: 14px !important; gap: 8px 16px !important; }
	.dp-hero { padding-top: 100px !important; }
	.dp-section { padding: 40px 16px !important; }
	.dp-categories { padding-top: 24px !important; }
}
@media (max-width: 380px) {
	.dp-hero-title {
		font-size: clamp(1.15rem, 6.5vw, 1.6rem) !important;
	}
}

/* Product card: bigger hit area for the whole card on mobile; tighter typography */
@media (max-width: 480px) {
	.dp-product-card-body { padding: 12px 14px 14px !important; gap: 8px !important; }
	.dp-product-card-name { font-size: 14px !important; min-height: 2.4em !important; }
	.dp-product-card-price { font-size: 13px !important; }
	.dp-btn-block { padding: 11px 14px !important; font-size: 12px !important; min-height: 44px !important; }
	.dp-product-grid { gap: 12px !important; }
}

/* Buttons in general: 48px min height on mobile so they're tappable */
@media (max-width: 767px) {
	.dp-btn { min-height: 48px !important; padding: 13px 24px !important; }
	.dp-btn-block { min-height: 44px !important; }
}

/* ========================================================================
   v1.5.4 fixes - phone-only feedback ronde 2:
     1) Productbeschrijvingen overflowen niet meer op telefoon
     2) Checkbox/radio inputs ALTIJD links van label, nooit eronder
   ======================================================================== */

/* === 1. Description content + tables - strict mobile containment === */
@media (max-width: 767px) {
	/* The whole tab panel + each child capped at viewport width with hard
	   word-break for long peptide names (BPC-157, GHK-Cu, etc.) */
	.dp-single-product .woocommerce-Tabs-panel,
	.dp-single-product .woocommerce-Tabs-panel--description,
	.dp-single-product .woocommerce-Tabs-panel--reviews,
	.dp-single-product #tab-description {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}
	.dp-single-product .woocommerce-Tabs-panel * {
		max-width: 100% !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		hyphens: auto;
	}
	/* Strip any inline width / horizontal padding shipped via the
	   vc_custom_NNNN classes (WPBakery / CiyaShop legacy) on mobile. */
	.dp-single-product .woocommerce-Tabs-panel [style*="width:"]:not(table),
	.dp-single-product .woocommerce-Tabs-panel [class*="vc_custom_"] {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Tables: make the TABLE itself a scrollable block, but its contents
	   keep the table layout. Cell content stays nowrap so columns line up,
	   user swipes to see remaining columns instead of the page going wide. */
	.dp-single-product .woocommerce-Tabs-panel table,
	.woocommerce-Tabs-panel--description table {
		display: block !important;
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		position: relative !important;
	}
	.dp-single-product .woocommerce-Tabs-panel table thead,
	.dp-single-product .woocommerce-Tabs-panel table tbody {
		display: table !important;
		min-width: 100% !important;
	}
	.dp-single-product .woocommerce-Tabs-panel table th,
	.dp-single-product .woocommerce-Tabs-panel table td {
		white-space: normal !important;
		min-width: 90px !important;
		padding: 8px 10px !important;
		font-size: 13px !important;
	}
	/* Subtle hint that the table can scroll horizontally */
	.dp-single-product .woocommerce-Tabs-panel table::after {
		content: "→";
		display: block;
		text-align: right;
		font-size: 11px;
		color: rgba(255,255,255,0.4);
		padding: 4px 8px;
	}
	/* Images in description never break the page */
	.dp-single-product .woocommerce-Tabs-panel img,
	.dp-single-product .woocommerce-Tabs-panel iframe {
		max-width: 100% !important;
		height: auto !important;
	}
}

/* === 2. Checkbox + radio: input LEFT, label RIGHT, single line ===
   Earlier flex rules used flex-wrap: wrap which on iOS could cause the
   label to wrap to its own line - making it look like the dot/check sat
   ABOVE the text instead of beside it. Force nowrap and flex-grow the
   label so the row stays horizontal and clean. */
body.woocommerce-checkout .form-row label.checkbox,
body.woocommerce-checkout label.checkbox,
body.woocommerce-checkout .woocommerce-form__label-checkbox,
body.woocommerce-checkout .form-row.create-account label,
body.woocommerce-checkout .form-row.terms label,
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method,
body.woocommerce-checkout #payment ul.payment_methods li {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	cursor: pointer !important;
}
/* Radio + label sibling: label takes remaining width, never wraps below */
body.woocommerce-checkout #shipping_method li > input[type="radio"] + label,
body.woocommerce-checkout ul.wc_payment_methods li > input[type="radio"] + label,
body.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] + label {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	width: auto !important;
}
/* Input never shrinks below its 24px size */
body.woocommerce-checkout label.checkbox > input[type="checkbox"],
body.woocommerce-checkout #shipping_method li > input[type="radio"],
body.woocommerce-checkout ul.wc_payment_methods li > input[type="radio"],
body.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	flex: 0 0 24px !important;
	margin: 0 !important;
}
/* The text span inside checkbox label */
body.woocommerce-checkout label.checkbox > span,
body.woocommerce-checkout label.checkbox > .woocommerce-terms-and-conditions-checkbox-text {
	flex: 1 1 auto !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}
/* Payment-method radio labels often have an inline image (Mollie/iDEAL/etc). */
body.woocommerce-checkout ul.payment_methods li label img {
	margin-left: auto !important;
	max-height: 24px !important;
	width: auto !important;
}

/* ========================================================================
   v1.5.6 fixes
     1) Hero photo: checks integrated as glassmorphic chip OVER the image
        (zodat de photo niet meer een losse afbeelding is maar 1 cohesive
        hero met de page)
     2) Account / address-edit page: country/state SELECT was rendering as
        white default form field - force dark theme on ALL WC pages
     3) Shipping/payment radio: dot was overlapping label text on iOS Safari
        because input inherited padding 10/12 from generic checkout input
        rule. Reset radio/checkbox geometry hard.
   ======================================================================== */

/* === 1. Hero checks BOVEN de photo (sibling, niet meer overlay op de vials).
        Symmetrische 3-koloms grid, elke kolom 1fr, icoon centered boven tekst.
        Verticale dividers tussen kolommen. Geen pill backgrounds. */
.dp-hero-checks-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	align-items: start;
	justify-items: stretch;
	gap: 0;
	margin: 32px auto 24px !important;
	padding: 0 24px !important;
	max-width: 720px;
	width: 100%;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	position: relative;
	z-index: 6;
}
.dp-hero-checks-row .dp-check-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px;
	padding: 4px 14px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: rgba(255, 255, 255, 0.92);
	position: relative;
	text-align: center;
	white-space: normal !important;
	min-width: 0;
}
.dp-hero-checks-row .dp-check-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: rgba(255, 255, 255, 0.18);
}
.dp-hero-checks-row .dp-check-circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.95);
}
.dp-hero-checks-row .dp-check-circle svg {
	width: 12px;
	height: 12px;
}
.dp-hero-checks-row .dp-check-text {
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
	text-align: center;
}

/* v1.5.23: Trust-check pulse animation UITGEZET op verzoek user.
   De circles + tekst blijven nu statisch zichtbaar. Keyframes
   verwijderd zodat ze geen CPU/GPU werk meer doen. */

@media (max-width: 900px) {
	.dp-hero-checks-row {
		max-width: 540px;
		padding: 0 16px !important;
		margin-top: 24px !important;
		margin-bottom: 16px !important;
	}
	.dp-hero-checks-row .dp-check-item {
		padding: 4px 8px !important;
		gap: 6px !important;
	}
	.dp-hero-checks-row .dp-check-text { font-size: 12px !important; }
}
@media (max-width: 480px) {
	.dp-hero-checks-row {
		padding: 0 8px !important;
		margin-top: 20px !important;
		margin-bottom: 14px !important;
	}
	.dp-hero-checks-row .dp-check-item {
		padding: 4px 6px !important;
		gap: 6px !important;
	}
	.dp-hero-checks-row .dp-check-circle {
		width: 22px !important;
		height: 22px !important;
	}
	.dp-hero-checks-row .dp-check-circle svg { width: 11px !important; height: 11px !important; }
	.dp-hero-checks-row .dp-check-text {
		font-size: 11px !important;
		line-height: 1.25 !important;
	}
	.dp-hero-checks-row .dp-check-item:not(:last-child)::after {
		top: 4px !important;
		bottom: 4px !important;
	}
}

/* === Bezoek-webshop CTA ONDER de photo (sibling, niet overlay) === */
.dp-hero-cta-below {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: -28px auto 32px !important;
	padding: 0 24px !important;
	z-index: 6 !important;
	transform: none !important;
	left: auto !important;
	bottom: auto !important;
	width: 100% !important;
	max-width: none !important;
}
/* Cyan glow onder/achter de knop voor visuele integratie met de photo */
.dp-hero-cta-below::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	max-width: 80%;
	height: 140px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(30, 156, 216, 0.4), transparent 70%);
	filter: blur(28px);
	pointer-events: none;
	z-index: -1;
}
@media (max-width: 767px) {
	.dp-hero-cta-below {
		margin: -20px auto 24px !important;
		padding: 0 16px !important;
	}
	.dp-hero-cta-below::before { width: 280px; height: 100px; }
}
@media (max-width: 480px) {
	.dp-hero-cta-below {
		margin: -16px auto 20px !important;
		padding: 0 8px !important;
	}
}

/* Subtle accent glow under the photo to tie it into the page bg
   (geen losse afbeelding, maar onderdeel van de pagina) */
.dp-hero-photo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	width: 60%;
	height: 90px;
	background: radial-gradient(50% 100% at 50% 100%, rgba(30, 156, 216, 0.22), transparent 70%);
	filter: blur(14px);
	pointer-events: none;
	z-index: 4;
}

/* === 2. Select fields - force dark theme on ALL WC pages, not only checkout === */
body.woocommerce select,
body.woocommerce-page select,
body.woocommerce-account select,
body.woocommerce-edit-account select,
body.woocommerce-edit-address-page select,
body.woocommerce-edit-address select,
body.woocommerce-checkout select,
body.woocommerce form select,
body.woocommerce-page form select,
body.woocommerce .woocommerce-address-fields select,
body.woocommerce .woocommerce-MyAccount-content select {
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 12px 40px 12px 14px !important;
	font-size: 16px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	min-height: 48px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
body.woocommerce select option,
body.woocommerce-page select option,
body.woocommerce-account select option {
	background: #0a0e14 !important;
	color: #fff !important;
}
body.woocommerce select:focus,
body.woocommerce-page select:focus,
body.woocommerce-account select:focus,
body.woocommerce-checkout select:focus {
	outline: 0 !important;
	border-color: var(--dp-accent) !important;
	box-shadow: 0 0 0 4px rgba(30, 156, 216, 0.22) !important;
}

/* Select2 (country picker) - same dark treatment */
body.woocommerce .select2-container--default .select2-selection--single,
body.woocommerce-page .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	height: 48px !important;
	padding: 8px 12px !important;
}
body.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff !important;
	line-height: 32px !important;
	padding: 0 !important;
}
.select2-dropdown {
	background: #0a0e14 !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.select2-search--dropdown .select2-search__field {
	background: rgba(255,255,255,0.06) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 8px !important;
}
.select2-results__option {
	color: rgba(255,255,255,0.9) !important;
	background: transparent !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
	background: var(--dp-accent) !important;
	color: #000 !important;
}

/* === 3. Radio/checkbox geometry - kill the inherited 10px 12px padding
        from the generic checkout input rule. Without this the radio gets
        rendered ~48px wide with the dot floating in the middle, which on
        a flex li looks like the dot is OVER the label text instead of
        TO THE LEFT of it. */
body.woocommerce input[type="radio"],
body.woocommerce input[type="checkbox"],
body.woocommerce-page input[type="radio"],
body.woocommerce-page input[type="checkbox"],
body.woocommerce-account input[type="radio"],
body.woocommerce-account input[type="checkbox"],
body.woocommerce-checkout input[type="radio"],
body.woocommerce-checkout input[type="checkbox"] {
	padding: 0 !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex: 0 0 22px !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-clip: padding-box !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	position: static !important;
	background-color: rgba(255,255,255,0.05) !important;
	border: 2px solid rgba(255,255,255,0.4) !important;
}
body.woocommerce input[type="radio"],
body.woocommerce-page input[type="radio"],
body.woocommerce-account input[type="radio"],
body.woocommerce-checkout input[type="radio"] {
	border-radius: 50% !important;
}
body.woocommerce input[type="checkbox"],
body.woocommerce-page input[type="checkbox"],
body.woocommerce-account input[type="checkbox"],
body.woocommerce-checkout input[type="checkbox"] {
	border-radius: 5px !important;
}
/* Checked states - radio dot + checkbox tick (iOS-safe via background-image) */
body.woocommerce input[type="radio"]:checked,
body.woocommerce-page input[type="radio"]:checked,
body.woocommerce-account input[type="radio"]:checked,
body.woocommerce-checkout input[type="radio"]:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: radial-gradient(circle, #ffffff 0, #ffffff 4px, transparent 4.5px) !important;
}
body.woocommerce input[type="checkbox"]:checked,
body.woocommerce-page input[type="checkbox"]:checked,
body.woocommerce-account input[type="checkbox"]:checked,
body.woocommerce-checkout input[type="checkbox"]:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 8'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-size: 14px 14px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Force LI / label flex layout - input on LEFT, content fills remaining.
   Both shapes of WC HTML supported: input as sibling of label, OR input
   nested inside label. */
body.woocommerce-checkout #shipping_method,
body.woocommerce-checkout ul.wc_payment_methods,
body.woocommerce-checkout #payment ul.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method,
body.woocommerce-checkout #payment ul.payment_methods li {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	text-indent: 0 !important;
	padding: 14px 16px !important;
	margin: 0 0 8px 0 !important;
	background: rgba(255,255,255,0.025) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 12px !important;
	min-height: 56px !important;
}
/* When checked / has-active class - accent border */
body.woocommerce-checkout #shipping_method li:has(input[type="radio"]:checked),
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.06) !important;
}
/* Label always to the right of input */
body.woocommerce-checkout #shipping_method li > label,
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label,
body.woocommerce-checkout #payment ul.payment_methods li > label {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255,255,255,0.9) !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	text-indent: 0 !important;
}
/* Amount span (€4,95) right-aligned */
body.woocommerce-checkout #shipping_method li label .amount,
body.woocommerce-checkout #shipping_method li label .woocommerce-Price-amount {
	margin-left: auto !important;
	color: #fff !important;
	font-weight: 600 !important;
}

/* ========================================================================
   v1.5.8 - WC BLOCKS-based checkout (de NIEUWE checkout, niet de legacy
   shortcode-based). Onze /afrekenen/ page draait op .wc-block-checkout
   met compleet andere DOM-structuur dan de legacy form-row markup.
   Onze v1.5.4-v1.5.7 fixes raakten allemaal de LEGACY classes
   (#shipping_method, ul.wc_payment_methods, .form-row label) die hier
   niet bestaan, dus de styling pakte niet aan.
   ======================================================================== */

/* Page wrapper: kill any white inheritance */
.wc-block-checkout,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-checkout__form,
.wc-block-components-form,
.wc-block-components-checkout-step,
.wc-block-components-checkout-step__content,
.wc-block-components-address-form,
.wc-block-components-address-form-wrapper,
.wc-block-components-main,
.wc-block-components-sidebar-layout,
.wc-block-components-sidebar {
	background: transparent !important;
	color: var(--dp-text, #fff) !important;
}

/* Step heading */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-title {
	color: #fff !important;
}

/* === Text input wrapper - floating label (label drijft omhoog bij focus/value) === */
.wc-block-components-text-input {
	position: relative !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	min-height: 56px !important;
	height: 56px !important;
	display: block !important;
	transition: border-color 0.18s, background 0.18s !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"] {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	height: 54px !important;
	width: 100% !important;
	padding: 22px 14px 6px !important;
	box-sizing: border-box !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	border-radius: 12px !important;
}
/* Label sits centered when empty, jumps to top on focus / when filled.
   We support BOTH WC's .is-active (toggled via JS) AND the native
   :focus-within fallback so the label moves THE MOMENT user types. */
.wc-block-components-text-input label,
.wc-block-components-text-input > label {
	position: absolute !important;
	top: 50% !important;
	left: 14px !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	pointer-events: none !important;
	transition: top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
	            font-size 0.18s cubic-bezier(0.22, 1, 0.36, 1),
	            color 0.18s !important;
	background: transparent !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
/* Floated state: when wrapper has .is-active, OR contains :focus, OR input
   has any text - drijft label omhoog naar de bovenkant van het veld */
.wc-block-components-text-input.is-active > label,
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within > label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-text-input:has(input:not(:placeholder-shown)) > label,
.wc-block-components-text-input:has(input:not(:placeholder-shown)) label,
.wc-block-components-text-input:has(input:-webkit-autofill) > label,
.wc-block-components-text-input:has(input:-webkit-autofill) label {
	top: 12px !important;
	transform: translateY(0) !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	color: rgba(255, 255, 255, 0.7) !important;
	text-transform: uppercase !important;
}
/* Focused border highlight */
.wc-block-components-text-input.is-active,
.wc-block-components-text-input:focus-within {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
}
/* Validation error state */
.wc-block-components-text-input.has-error {
	border-color: #fb7185 !important;
}

/* === Select container (Land/regio) - was rendered WHITE on user's iPhone === */
.wc-blocks-components-select,
.wc-blocks-components-select__container {
	position: relative !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	height: 56px !important;
	min-height: 56px !important;
	display: block !important;
	overflow: hidden !important;
}
.wc-blocks-components-select__label,
.wc-blocks-components-select label {
	position: absolute !important;
	top: 12px !important;
	left: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	z-index: 2 !important;
	background: transparent !important;
}
.wc-blocks-components-select__select,
.wc-blocks-components-select select {
	background-color: transparent !important;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	border: none !important;
	color: #fff !important;
	font-size: 16px !important;
	padding: 22px 40px 6px 14px !important;
	width: 100% !important;
	height: 54px !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 12px !important;
}
.wc-blocks-components-select__select option,
.wc-blocks-components-select select option {
	background: #0a0e14 !important;
	color: #fff !important;
}
.wc-blocks-components-select__container:focus-within {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
}

/* === Checkbox - dark theme + brand-blue mark === */
.wc-block-components-checkbox {
	position: relative !important;
	margin: 0 0 12px 0 !important;
}
.wc-block-components-checkbox > label {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	cursor: pointer !important;
	color: rgba(255, 255, 255, 0.9) !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}
.wc-block-components-checkbox__input {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex: 0 0 22px !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 5px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	position: relative !important;
	box-sizing: border-box !important;
	transition: background 0.15s, border-color 0.15s !important;
}
.wc-block-components-checkbox__input:checked {
	background: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
}
/* The SVG mark - only visible when checked */
.wc-block-components-checkbox__mark {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	transform: translateY(-50%) !important;
	width: 22px !important;
	height: 22px !important;
	fill: #ffffff !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transition: opacity 0.12s !important;
	z-index: 1 !important;
}
.wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark,
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
	opacity: 1 !important;
}
.wc-block-components-checkbox__label {
	color: rgba(255, 255, 255, 0.9) !important;
	flex: 1 1 auto !important;
	line-height: 1.4 !important;
	font-size: 14px !important;
}

/* === Radio control (verzendmethode + betaalmethode) === */
.wc-block-components-radio-control {
	display: block !important;
}
.wc-block-components-radio-control__option {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 14px 16px !important;
	margin: 0 0 8px 0 !important;
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	color: #fff !important;
	font-weight: 500 !important;
	min-height: 56px !important;
	transition: border-color 0.15s, background 0.15s !important;
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option-checked {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.06) !important;
}
.wc-block-components-radio-control__input {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex: 0 0 22px !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
	background-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	position: relative !important;
	box-sizing: border-box !important;
}
.wc-block-components-radio-control__input:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: radial-gradient(circle, #ffffff 0, #ffffff 4px, transparent 4.5px) !important;
}
.wc-block-components-radio-control__option-layout {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}
.wc-block-components-radio-control__label-group {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}
.wc-block-components-radio-control__label {
	color: #fff !important;
	font-weight: 500 !important;
	font-size: 15px !important;
}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
	color: rgba(255, 255, 255, 0.7) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

/* === Order summary sidebar === */
.wc-block-components-checkout-order-summary,
.wc-block-components-order-summary {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 16px !important;
	padding: 18px !important;
	color: #fff !important;
}
.wc-block-components-checkout-order-summary__title,
.wc-block-components-order-summary__title,
.wc-block-components-product-name,
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: #fff !important;
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* === Place-order button + return-to-cart link === */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
	background: var(--dp-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	min-height: 56px !important;
	transition: background 0.15s !important;
	box-shadow: 0 6px 20px rgba(30, 156, 216, 0.25) !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
	background: #1281b4 !important;
}
.wc-block-components-checkout-return-to-cart-button {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* === Address card (saved address preview) === */
.wc-block-components-address-card {
	background: rgba(255, 255, 255, 0.025) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 14px !important;
	color: #fff !important;
}
.wc-block-components-address-card__edit {
	color: var(--dp-accent) !important;
	font-weight: 500 !important;
}

/* === Notice / error messages === */
.wc-block-components-notices,
.wc-block-components-notice-snackbar-list,
.wc-block-components-notices__snackbar {
	color: #fff !important;
}

/* Mobile: stack sidebar below main content + slightly tighter spacing */
@media (max-width: 767px) {
	.wc-block-components-text-input,
	.wc-blocks-components-select,
	.wc-blocks-components-select__container {
		min-height: 52px !important;
		height: 52px !important;
		margin-bottom: 12px !important;
	}
	.wc-block-components-text-input input,
	.wc-blocks-components-select__select {
		height: 50px !important;
		font-size: 16px !important; /* iOS: blijf op 16+ om auto-zoom te killen */
	}
	.wc-block-components-radio-control__option {
		padding: 12px 14px !important;
	}
}

/* ========================================================================
   v1.5.9 - SPECIFICITY HOTFIX voor WC Blocks checkout

   Probleem v1.5.8: de input padding (22px 14px 6px) pakte niet aan, de
   browser computeerde 10px 14px omdat:
   1. Onze legacy rule 'body.woocommerce-checkout input' (spec 0,1,2)
      en WC Blocks default '.wc-block-components-form .X.is-active
      input[type=...]' (spec 0,4,1) wonnen van mijn 0,1,1 selector.
   2. Resultaat: label op top:12px + input padding-top:10px → typed
      value renderde OVER de label-tekst ("E-MAILADRES" + value zelfde
      regel).

   Fix: alle WC-Blocks input/select rules krijgen body.woocommerce-checkout
   prefix + input[type] suffix → spec 0,3,2 of 0,4,2 (slaat WC's 0,4,1).
   Plus: :has(input:not(:placeholder-shown)) rule weg - die fired ALTIJD
   op WC inputs (geen placeholder attr) waardoor label permanent floated
   was zelfs in lege state.
   ======================================================================== */

/* === Text input: hoge-specificity overrides === */
body.woocommerce-checkout .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input {
	position: relative !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	min-height: 56px !important;
	height: 56px !important;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active,
body.woocommerce-checkout .wc-block-components-text-input:focus-within,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input:focus-within {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
}
/* Input padding: 26px top om voldoende ruimte te maken voor de floated label */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-block-components-text-input input[type="password"],
body.woocommerce-checkout .wc-block-components-text-input input[type="url"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="number"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="password"],
body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="url"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="password"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type="url"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="text"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="email"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="tel"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="number"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="password"],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active input[type="url"] {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	padding: 24px 14px 6px !important;
	height: 54px !important;
	min-height: 54px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 12px !important;
	margin: 0 !important;
}

/* Label: gecentreerd in lege state, drijft omhoog bij focus / .is-active */
body.woocommerce-checkout .wc-block-components-text-input > label,
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input > label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input label {
	position: absolute !important;
	top: 50% !important;
	left: 14px !important;
	right: 14px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	pointer-events: none !important;
	transition: top 0.18s cubic-bezier(0.22,1,0.36,1),
	            transform 0.18s cubic-bezier(0.22,1,0.36,1),
	            font-size 0.18s,
	            color 0.18s,
	            letter-spacing 0.18s,
	            text-transform 0.18s !important;
	background: transparent !important;
	z-index: 2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
body.woocommerce-checkout .wc-block-components-text-input.is-active > label,
body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-text-input:focus-within > label,
body.woocommerce-checkout .wc-block-components-text-input:focus-within label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active > label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input:focus-within > label,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input:focus-within label {
	top: 9px !important;
	transform: translateY(0) !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

/* === Select container: hoge-specificity dark theme === */
body.woocommerce-checkout .wc-blocks-components-select,
body.woocommerce-checkout .wc-blocks-components-select__container,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__container {
	position: relative !important;
	background: rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	height: 56px !important;
	min-height: 56px !important;
	overflow: hidden !important;
}
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-blocks-components-select select,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select select {
	background-color: transparent !important;
	background: transparent url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center !important;
	border: none !important;
	color: #fff !important;
	font-size: 16px !important;
	padding: 24px 40px 6px 14px !important;
	width: 100% !important;
	height: 54px !important;
	min-height: 54px !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 12px !important;
}
body.woocommerce-checkout .wc-blocks-components-select__label,
body.woocommerce-checkout .wc-blocks-components-select label,
body.woocommerce-checkout .wc-block-components-form .wc-blocks-components-select__label {
	position: absolute !important;
	top: 9px !important;
	left: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	pointer-events: none !important;
	z-index: 2 !important;
	background: transparent !important;
}
body.woocommerce-checkout .wc-blocks-components-select__select option,
body.woocommerce-checkout .wc-blocks-components-select select option {
	background: #0a0e14 !important;
	color: #fff !important;
}

/* === Belangrijk: KILL de globale legacy 'body.woocommerce-checkout input'
        rule's effect op WC Blocks inputs (anders pakt 'ie de checkbox/radio
        ook met padding 10px wat de mark/dot misplaatst). */
body.woocommerce-checkout input[type="checkbox"].wc-block-components-checkbox__input,
body.woocommerce-checkout input[type="radio"].wc-block-components-radio-control__input {
	padding: 0 !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	flex: 0 0 22px !important;
	margin: 0 !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	background: rgba(255, 255, 255, 0.05) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
body.woocommerce-checkout input[type="checkbox"].wc-block-components-checkbox__input {
	border-radius: 5px !important;
}
body.woocommerce-checkout input[type="radio"].wc-block-components-radio-control__input {
	border-radius: 50% !important;
}
body.woocommerce-checkout input[type="checkbox"].wc-block-components-checkbox__input:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
}
body.woocommerce-checkout input[type="radio"].wc-block-components-radio-control__input:checked {
	background-color: var(--dp-accent) !important;
	border-color: var(--dp-accent) !important;
	background-image: radial-gradient(circle, #ffffff 0, #ffffff 4px, transparent 4.5px) !important;
}

/* Mobile bump heights ietsjes naar beneden voor compactheid */
@media (max-width: 767px) {
	body.woocommerce-checkout .wc-block-components-text-input,
	body.woocommerce-checkout .wc-blocks-components-select,
	body.woocommerce-checkout .wc-blocks-components-select__container {
		height: 56px !important;
		min-height: 56px !important;
	}
	body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="password"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="url"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="text"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="email"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="tel"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="number"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="password"],
	body.woocommerce-checkout .wc-block-components-text-input.is-active input[type="url"],
	body.woocommerce-checkout .wc-blocks-components-select__select {
		height: 54px !important;
		min-height: 54px !important;
		font-size: 16px !important;
	}
}

/* ========================================================================
   v1.5.10 - Hero photo 3D-depth + Search overlay + CF7 contact form dark

   1) Hero photo: filter drop-shadow + perspective rotateX → meer
      diepte / 3D feel. Plus stronger accent-glow er onder zodat de
      photo in de page lijkt te zweven.
   2) Search overlay: full-screen backdrop-blurred modal die opent als
      je op het loep-icoontje klikt. Was gewoon een button zonder JS.
   3) Contact Form 7 op /contact-us/: alle .wpcf7-form-control input/
      textarea velden waren wit. Nu dark theme matchend de rest van
      de site.
   ======================================================================== */

/* === 1. Hero photo: GEEN 3D transforms - de foto is al genoeg 3D op zichzelf
       (reflectieve vials + cinematic shadows + reflection on floor).
       Reverted v1.5.10 rotateX + zware drop-shadow. Houd alleen een
       subtiele bottom-glow zodat de photo in de page bg overgaat. */
.dp-hero-photo {
	perspective: none !important;
}
.dp-hero-photo img {
	transform: none !important;
	filter: none !important;
}
.dp-hero-photo::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 70%;
	height: 60px;
	background: radial-gradient(50% 100% at 50% 100%, rgba(30, 156, 216, 0.18), transparent 70%);
	filter: blur(12px);
	pointer-events: none;
	z-index: 3;
}

/* === 2. Search overlay === */
.dp-search-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999 !important;
	background: rgba(0, 0, 0, 0.78) !important;
	-webkit-backdrop-filter: blur(22px) saturate(140%) !important;
	backdrop-filter: blur(22px) saturate(140%) !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 110px 20px 24px !important;
	display: none !important;
	opacity: 1 !important;
}
.dp-search-overlay[data-open="true"] {
	display: flex !important;
	opacity: 1 !important;
}
.dp-search-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, border-color 0.15s;
}
.dp-search-close:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
}
.dp-search-form {
	width: 100%;
	max-width: 640px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
/* Form is shown when overlay is open (no animation; instant open avoids
   stuck-transition edge cases on mobile Safari) */
.dp-search-form-icon {
	color: rgba(255, 255, 255, 0.6);
	flex-shrink: 0;
}
.dp-search-input {
	flex: 1 1 auto;
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 18px !important;
	padding: 14px 8px !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	min-width: 0 !important;
}
.dp-search-input::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}
.dp-search-submit {
	background: var(--dp-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 22px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	min-height: 44px !important;
	transition: background 0.15s !important;
}
.dp-search-submit:hover {
	background: #1281b4 !important;
}
@media (max-width: 480px) {
	.dp-search-overlay { padding: 90px 14px 20px; }
	.dp-search-form { padding: 4px 4px 4px 16px; }
	.dp-search-input { font-size: 16px !important; padding: 12px 6px !important; }
	.dp-search-submit { padding: 10px 16px !important; font-size: 13px !important; }
	.dp-search-close { top: 18px; right: 18px; width: 40px; height: 40px; }
}

/* === 3. Contact Form 7 dark theme - voor /contact-us/ === */
.wpcf7-form,
.wpcf7-form-control-wrap,
.wpcf7 form,
.wpcf7 .wpcf7-form-control-wrap {
	color: #fff !important;
}
.wpcf7-form label,
.wpcf7 label {
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	display: block !important;
	margin-bottom: 6px !important;
}
.wpcf7-form-control,
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-url,
.wpcf7-number,
.wpcf7-textarea,
input.wpcf7-form-control,
textarea.wpcf7-form-control,
select.wpcf7-form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	background: rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	font-size: 16px !important;
	font-family: inherit !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin-bottom: 14px !important;
	transition: border-color 0.15s, background 0.15s !important;
}
textarea.wpcf7-form-control,
.wpcf7 textarea,
.wpcf7-textarea {
	min-height: 160px !important;
	resize: vertical !important;
	line-height: 1.5 !important;
}
.wpcf7-form-control:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
	background-color: rgba(30, 156, 216, 0.05) !important;
}
.wpcf7-form-control::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}
/* Submit button - match site brand button */
.wpcf7-submit,
.wpcf7 input[type="submit"],
input.wpcf7-submit {
	background: var(--dp-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	min-height: 48px !important;
	transition: background 0.15s, transform 0.15s !important;
	box-shadow: 0 6px 20px rgba(30, 156, 216, 0.25) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	width: auto !important;
	margin-top: 8px !important;
}
.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
	background: #1281b4 !important;
	transform: translateY(-1px) !important;
}
/* Error / response messages */
.wpcf7-not-valid-tip {
	color: #fb7185 !important;
	font-size: 13px !important;
	margin-top: 4px !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7-response-output {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 10px !important;
	color: #fff !important;
	padding: 12px 16px !important;
	margin: 16px 0 !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.06) !important;
}
.wpcf7 form.invalid .wpcf7-response-output {
	border-color: #fb7185 !important;
	background: rgba(251, 113, 133, 0.06) !important;
}
/* Required asterisk */
.wpcf7 label .required,
.wpcf7-form .required {
	color: var(--dp-accent) !important;
}

/* Page padding wrapper voor de contact-pagina zodat het netjes in beeld past */
body.page-id-263 .dp-page-content,
body.page-id-263 .vc_row,
body.page-id-263 .wpb_row {
	max-width: 100% !important;
	box-sizing: border-box !important;
}
body.page-id-263 .wpcf7 {
	max-width: 100% !important;
	margin: 0 auto !important;
}

/* ========================================================================
   v1.5.11 - pagination + product tabs + checkout note dark theme
   + hero photo 3D revert (photo is al genoeg 3D op zichzelf)

   User feedback:
   - "volgende pagina knop ook donker" (shop pagination active state was wit)
   - "beschrijving en beoordeling knop donker" (single product tabs wit)
   - "checkout notitie tekst vak amper te lezen" (textarea text te licht)
   - "deze is al erg 3d" (hero photo: revert rotateX/drop-shadow effects)
   ======================================================================== */

/* === Shop pagination - alle page-numbers donker, active state in accent === */
.woocommerce-pagination,
nav.woocommerce-pagination {
	margin: 32px 0 !important;
	text-align: center !important;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	gap: 8px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
	border: 0 !important;
	background: transparent !important;
}
.woocommerce-pagination ul.page-numbers li {
	border: 0 !important;
	background: transparent !important;
}
.woocommerce-pagination .page-numbers,
.woocommerce-pagination ul.page-numbers li .page-numbers,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span,
nav.woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 44px !important;
	height: 44px !important;
	padding: 0 14px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: background 0.15s, border-color 0.15s !important;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination .page-numbers:hover {
	background: rgba(30, 156, 216, 0.1) !important;
	border-color: rgba(30, 156, 216, 0.4) !important;
	color: #fff !important;
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination ul.page-numbers li span.current {
	background: var(--dp-accent) !important;
	color: #fff !important;
	border-color: var(--dp-accent) !important;
	box-shadow: 0 6px 16px rgba(30, 156, 216, 0.28) !important;
}
.woocommerce-pagination .prev,
.woocommerce-pagination .next {
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* === Single product tabs (Beschrijving / Beoordelingen) - donker === */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs,
.dp-single-product .woocommerce-tabs ul.tabs {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	display: flex !important;
	gap: 4px !important;
	list-style: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
	display: none !important;
	content: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li,
.dp-single-product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
	content: none !important;
	border: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs li a,
.dp-single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block !important;
	padding: 12px 20px !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: color 0.15s !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a,
.woocommerce-tabs ul.tabs li:hover a {
	color: #fff !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active,
.dp-single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--dp-accent) !important;
	background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a,
.dp-single-product .woocommerce-tabs ul.tabs li.active a {
	color: #fff !important;
	font-weight: 600 !important;
}

/* === Checkout: order-note textarea - text was barely readable === */
body.woocommerce-checkout .wc-block-checkout__add-note textarea,
body.woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-textarea,
body.woocommerce-checkout textarea.wc-block-components-textarea,
body.woocommerce-checkout .wc-block-components-textarea,
body.woocommerce-checkout .wc-block-components-textarea-control textarea,
body.woocommerce-checkout textarea[name*="note"],
body.woocommerce-checkout textarea[name*="order_comments"],
body.woocommerce-checkout #order_comments {
	background: rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 16px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	font-family: inherit !important;
	width: 100% !important;
	min-height: 120px !important;
	resize: vertical !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	outline: none !important;
}
body.woocommerce-checkout .wc-block-checkout__add-note textarea::placeholder,
body.woocommerce-checkout textarea.wc-block-components-textarea::placeholder,
body.woocommerce-checkout .wc-block-components-textarea::placeholder,
body.woocommerce-checkout textarea[name*="order_comments"]::placeholder,
body.woocommerce-checkout #order_comments::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
	opacity: 1 !important;
}
body.woocommerce-checkout .wc-block-checkout__add-note textarea:focus,
body.woocommerce-checkout textarea.wc-block-components-textarea:focus,
body.woocommerce-checkout .wc-block-components-textarea:focus,
body.woocommerce-checkout #order_comments:focus {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
}
/* Add-note checkbox + label */
body.woocommerce-checkout .wc-block-checkout__add-note .wc-block-components-checkbox__label {
	color: rgba(255, 255, 255, 0.92) !important;
	font-weight: 500 !important;
}

/* === Single product page: hoeveelheid input - was wit met zwarte tekst,
        nu donker matchend de rest van de site. Hoge specificity om
        browser default + woo default te slaan. === */
body.single-product .quantity input.qty,
body.single-product .quantity input[type="number"],
body.single-product input.qty,
body.single-product input[name="quantity"],
body.woocommerce .quantity input.qty,
body.woocommerce-page .quantity input.qty,
body.woocommerce div.product .quantity .qty,
.dp-single-product .quantity input.qty,
.dp-single-product .quantity .qty,
.dp-single-product .quantity input[type="number"] {
	background: rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-align: center !important;
	width: 80px !important;
	min-height: 48px !important;
	height: 48px !important;
	-webkit-appearance: none !important;
	-moz-appearance: textfield !important;
	appearance: none !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
}
body.single-product .quantity input.qty:focus,
body.woocommerce .quantity input.qty:focus,
.dp-single-product .quantity input.qty:focus {
	border-color: var(--dp-accent) !important;
	background: rgba(30, 156, 216, 0.05) !important;
}
/* Remove default number-input spinner on Chrome/Safari */
body.single-product .quantity input.qty::-webkit-outer-spin-button,
body.single-product .quantity input.qty::-webkit-inner-spin-button,
.dp-single-product .quantity input.qty::-webkit-outer-spin-button,
.dp-single-product .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
/* Also style the quantity label/wrapper if visible */
body.single-product .quantity label,
.dp-single-product .quantity label {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 500 !important;
}

/* Cart page quantity input (same fix for /winkelwagen/) */
body.woocommerce-cart .quantity input.qty,
body.woocommerce-cart .quantity input[type="number"] {
	background: rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 10px !important;
	padding: 8px 10px !important;
	font-size: 15px !important;
	text-align: center !important;
	min-height: 44px !important;
	height: 44px !important;
	width: 70px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* v1.5.19 - REVERTED v1.5.18 product photo dark backgrounds.
   User feedback: "nee dit ziet er niet uit laat die donkere fotos".
   De multiply blend-mode maakte de bottles te donker / labels onleesbaar.
   Product foto's krijgen weer hun originele rendering - geen wrapper bg,
   geen blend-mode. */

/* ========================================================================
   v1.5.20 - Single product page: aantal NAAST 'Toevoegen aan winkelwagen'
   User: "ik wil dat je alleen op de product pagina de aantal naast de
   toevoegen aan winkelwagen knop zet dat is netter"

   Was: quantity en add-to-cart konden op kleine schermen wrappen naar
   verschillende regels (flex-wrap: wrap).
   Nu: nowrap + flex layout - qty links (compact 64px), button rechts
   (flex: 1 takes remaining space). Op alle schermen op één rij.
   ======================================================================== */
body.single-product form.cart,
body.woocommerce div.product form.cart,
.dp-single-product form.cart {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 12px !important;
}
body.single-product form.cart .quantity,
body.woocommerce div.product form.cart .quantity,
.dp-single-product form.cart .quantity {
	flex: 0 0 auto !important;
	margin: 0 !important;
}
body.single-product form.cart .quantity input.qty,
body.woocommerce div.product form.cart .quantity input.qty,
.dp-single-product form.cart .quantity input.qty,
.dp-single-product .quantity .qty {
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	text-align: center !important;
}
body.single-product form.cart .single_add_to_cart_button,
body.single-product form.cart button.single_add_to_cart_button,
body.woocommerce div.product form.cart .single_add_to_cart_button,
.dp-single-product form.cart .single_add_to_cart_button,
.dp-single-product .single_add_to_cart_button {
	flex: 1 1 auto !important;
	white-space: nowrap !important;
	min-height: 48px !important;
}

/* ========================================================================
   v1.5.24 - Shop categorieën pill-strip
   Horizontaal scrollbare nav op /winkel/ + categorie-archive pagina's.
   Mobile-first: overflow-x scrollen, edge-fade masks. Active pill =
   accent fill.
   ======================================================================== */
.dp-shop-cats {
	margin: 0 0 28px 0;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.dp-shop-cats-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 16px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.dp-shop-cats-track::-webkit-scrollbar { display: none; }
.dp-shop-cat-pill {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dp-shop-cat-pill:hover {
	background: rgba(30, 156, 216, 0.08);
	border-color: rgba(30, 156, 216, 0.32);
	color: #fff;
	transform: translateY(-1px);
}
.dp-shop-cat-pill.is-active {
	background: var(--dp-accent, #1e9cd8);
	border-color: var(--dp-accent, #1e9cd8);
	color: #fff;
	box-shadow: 0 6px 18px rgba(30, 156, 216, 0.3);
}
.dp-shop-cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 6px;
	height: 18px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255,255,255,0.08);
	border-radius: 999px;
	color: rgba(255,255,255,0.7);
}
.dp-shop-cat-pill.is-active .dp-shop-cat-count {
	background: rgba(255,255,255,0.22);
	color: #fff;
}
@media (max-width: 480px) {
	.dp-shop-cats { margin-bottom: 22px; }
	.dp-shop-cat-pill { padding: 8px 13px; font-size: 12.5px; }
	.dp-shop-cat-count { font-size: 10.5px; min-width: 18px; height: 16px; }
}

/* ========================================================================
   v1.5.23 - Age-gate language dropdown
   User: "Deze moet ook nog alle talen krijgen dus een talen dropdown
   menutje" - visitor moet taal kunnen wisselen vóór door de gate gaat.
   ======================================================================== */
.dp-age-card { position: relative; }
.dp-age-lang {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 5;
}
.dp-age-lang[open] { z-index: 10; }
.dp-age-lang summary { list-style: none; cursor: pointer; }
.dp-age-lang summary::-webkit-details-marker { display: none; }
.dp-age-lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 12.5px;
	font-weight: 500;
	transition: background 0.18s, border-color 0.18s;
	user-select: none;
}
.dp-age-lang-trigger:hover {
	background: rgba(30, 156, 216, 0.08);
	border-color: rgba(30, 156, 216, 0.3);
}
.dp-age-lang-trigger .dp-lang-flag { font-size: 14px; line-height: 1; }
.dp-age-lang-current-name { font-size: 12.5px; }
.dp-age-lang-trigger .dp-lang-caret {
	transition: transform 0.2s ease;
	opacity: 0.7;
}
.dp-age-lang[open] .dp-lang-caret { transform: rotate(180deg); }

.dp-age-lang-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 220px;
	max-height: 60vh;
	overflow-y: auto;
	background: rgba(10, 14, 20, 0.96);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	padding: 6px;
	animation: dp-age-lang-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dp-age-lang-pop {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dp-age-lang-panel::-webkit-scrollbar { width: 4px; }
.dp-age-lang-panel::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18); border-radius: 999px;
}
.dp-age-lang-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-radius: 8px;
	font-size: 13px;
	transition: background 0.15s, color 0.15s;
	cursor: pointer;
}
.dp-age-lang-option:hover {
	background: rgba(30, 156, 216, 0.12);
	color: #fff;
}
.dp-age-lang-option.is-active {
	background: rgba(30, 156, 216, 0.14);
	color: #fff;
	font-weight: 600;
}
.dp-age-lang-option .dp-lang-flag { font-size: 16px; flex-shrink: 0; }
.dp-age-lang-option .dp-lang-name { flex: 1 1 auto; }

@media (max-width: 480px) {
	.dp-age-lang { top: 12px; right: 12px; }
	.dp-age-lang-trigger { padding: 6px 10px; font-size: 12px; }
	.dp-age-lang-current-name { display: none; }
	.dp-age-lang-panel { width: 200px; }
}

/* Dutch Peptide v1.5.100 candidate: fix 390px native Woo add-to-cart overflow. */
@media (max-width: 400px) {
  body.single-product form.cart,
  body.woocommerce div.product form.cart,
  .dp-single-product form.cart {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  body.single-product form.cart .quantity,
  body.woocommerce div.product form.cart .quantity,
  .dp-single-product form.cart .quantity {
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.single-product form.cart .quantity input.qty,
  body.woocommerce div.product form.cart .quantity input.qty,
  .dp-single-product form.cart .quantity input.qty,
  .dp-single-product .quantity .qty {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.single-product form.cart .single_add_to_cart_button,
  body.single-product form.cart button.single_add_to_cart_button,
  body.woocommerce div.product form.cart .single_add_to_cart_button,
  .dp-single-product form.cart .single_add_to_cart_button,
  .dp-single-product .single_add_to_cart_button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}