/* Pegdoll theme — lagoon blue with a doll pattern, apricot, handwritten touches */

:root {
	--pd-papier: var(--wp--preset--color--papier, #fbf7f2);
	--pd-kraft: var(--wp--preset--color--kraft, #245360);
	--pd-kraft-donker: var(--wp--preset--color--kraft-donker, #183b45);
	--pd-roze: var(--wp--preset--color--roze, #f2a65a);
	--pd-roze-licht: #f8d3ae;
	--pd-koraal: var(--wp--preset--color--koraal, #b04a26);
	--pd-mint: var(--wp--preset--color--mint, #8ccfc4);
	--pd-inkt: var(--wp--preset--color--inkt, #1d2b30);
	--pd-display: var(--wp--preset--font-family--display, "Raleway", sans-serif);
	--pd-script: var(--wp--preset--font-family--script, "Caveat", cursive);
	--pd-gutter: clamp(16px, 4vw, 48px);
	--pd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Tokens read by the Pegdoll Showcase plugin. */
	--pd-bg: var(--pd-papier);
	--pd-shape: var(--pd-papier);
	--pd-accent: var(--pd-koraal);
	--pd-ink: var(--pd-inkt);
	--pd-display-weight: 700;

	/* Paper grain, the torn paper edge (two layers: white fibre + paper) and the doll pattern on the blue. */
	--pd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .1 0 0 0 0 .13 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--pd-tear-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V20 L10 19.1 L27 14.7 L47 18.6 L62 17.6 L79 23.8 L95 15.1 L103 17.8 L128 15.5 L148 15.9 L170 18.9 L198 25.6 L209 22.7 L237 14.2 L255 17.5 L284 19.3 L297 22.9 L320 19.1 L344 25.8 L360 25.7 L382 19.2 L399 19.2 L413 20.0 L429 19.1 L437 20.0 L452 19.1 L469 14.6 L485 25.8 L514 23.4 L541 14.8 L555 17.1 L566 18.7 L575 19.5 L600 21.0 L625 24.8 L634 15.7 L650 22.6 L659 16.9 L673 22.6 L698 24.9 L711 25.2 L734 21.5 L757 19.5 L767 21.5 L790 22.4 L812 20.5 L825 22.4 L853 25.8 L876 14.6 L887 15.4 L896 22.9 L915 24.7 L924 16.0 L949 22.8 L968 25.2 L994 22.4 L1011 12.1 L1021 25.0 L1046 14.2 L1065 14.8 L1083 19.3 L1099 18.4 L1127 12.1 L1136 15.8 L1149 22.9 L1165 18.1 L1191 22.2 L1200 20.0 V48z'/%3E%3C/svg%3E");
	--pd-tear-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26 L16 23.2 L28 25.4 L49 29.2 L68 28.3 L87 26.2 L107 27.0 L115 17.3 L128 29.1 L147 25.0 L167 29.1 L178 18.0 L203 29.3 L232 21.5 L240 30.8 L260 27.4 L289 27.9 L305 23.0 L318 25.5 L341 26.6 L370 27.3 L387 19.0 L401 28.2 L415 23.2 L429 27.3 L446 21.0 L457 30.1 L472 28.7 L485 24.1 L494 26.2 L505 23.1 L522 28.5 L531 28.1 L549 22.9 L578 27.0 L597 26.6 L609 24.8 L621 21.5 L640 24.9 L662 22.0 L671 23.0 L684 24.4 L704 28.9 L724 24.5 L751 26.7 L761 23.6 L790 26.4 L814 26.6 L827 24.7 L853 22.6 L873 26.0 L895 33.2 L905 23.9 L933 28.6 L961 26.4 L971 22.2 L981 28.0 L1000 27.2 L1010 23.2 L1038 25.9 L1055 33.7 L1074 26.1 L1100 21.8 L1116 28.1 L1141 29.2 L1153 30.5 L1162 29.8 L1190 24.2 L1200 26.0 V48z'/%3E%3C/svg%3E");
	--pd-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.11' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='42' cy='32' r='7.5'/%3E%3Cpath d='M42 39.5c-6 0-9.2 8.6-9.2 15.6 0 4.2 4 6.3 9.2 6.3s9.2-2.1 9.2-6.3c0-7-3.2-15.6-9.2-15.6z'/%3E%3Cpath d='M42 54.6l-2.4-2.3c-1.4-1.4.5-3.4 1.9-2.1l.5.6.5-.6c1.4-1.3 3.3.7 1.9 2.1z' fill='%23fff' fill-opacity='.11' stroke='none'/%3E%3Cg transform='rotate(16 148 128)'%3E%3Ccircle cx='148' cy='116' r='7.5'/%3E%3Cpath d='M148 123.5c-6 0-9.2 8.6-9.2 15.6 0 4.2 4 6.3 9.2 6.3s9.2-2.1 9.2-6.3c0-7-3.2-15.6-9.2-15.6z'/%3E%3C/g%3E%3Cpath d='M128 60c5-7 7-16 5-27'/%3E%3Cpath d='M131.2 50.6c4 .5 6.6-1.5 7.5-5.1-3.7-.6-6.5 1-7.5 5.1z'/%3E%3Cpath d='M132.8 42c3.6-1.4 4.9-4.3 4.2-7.8-3.3 1.1-4.9 3.9-4.2 7.8z'/%3E%3Cpath d='M129.6 55.2c-3.8-.7-6.2.9-7.1 4.2 3.6.6 6-1 7.1-4.2z'/%3E%3Cpath d='M58 178c-4-7-5-15-1.4-24'/%3E%3Cpath d='M56.6 164.4c-3.8-.9-6.4.7-7.5 4 3.5.8 6.2-.7 7.5-4z'/%3E%3Cpath d='M57.4 157.6c-2.9-2.2-3.3-5.3-2-8.4 2.9 1.8 3.8 4.8 2 8.4z'/%3E%3Cpath d='M58.8 170.2c3.6-.4 5.8 1.3 6.3 4.6-3.4.3-5.5-1.3-6.3-4.6z'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.13'%3E%3Ccircle cx='96' cy='96' r='2'/%3E%3Ccircle cx='182' cy='38' r='2'/%3E%3Ccircle cx='12' cy='112' r='2'/%3E%3Ccircle cx='104' cy='182' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

body {
	margin: 0;
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	padding: 0;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

:where(.wp-site-blocks) > main {
	margin-block-start: 0;
}

::selection {
	background: var(--pd-roze);
	color: var(--pd-inkt);
}

:focus-visible {
	outline: 2px solid var(--pd-koraal);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Kraft surfaces & torn paper                                         */
/* ------------------------------------------------------------------ */

.pd-kraft,
body .pd-slider,
body .pd-hero,
.pd-page-hero,
.pd-footer,
.pd-menu {
	background-color: var(--pd-kraft);
	background-image: var(--pd-pattern), var(--pd-grain), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(8 30 36 / 0.32));
	background-size: 200px 200px, auto, auto;
	color: #fff;
}

/* Torn edge at the bottom of a kraft section, revealing the paper below. */
.pd-page-hero,
body .pd-hero,
.pd-pause {
	position: relative;
}

.pd-page-hero::before,
.pd-page-hero::after,
body .pd-hero::before,
body .pd-hero::after,
.pd-pause::before,
.pd-pause::after,
.pd-footer::before,
.pd-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(28px, 4vw, 48px);
	pointer-events: none;
	-webkit-mask: var(--pd-tear-paper) center bottom / 100% 100% no-repeat;
	mask: var(--pd-tear-paper) center bottom / 100% 100% no-repeat;
	background: var(--pd-papier);
	z-index: 3;
}

.pd-page-hero::before,
body .pd-hero::before,
.pd-footer::before {
	-webkit-mask-image: var(--pd-tear-fibre);
	mask-image: var(--pd-tear-fibre);
	background: #fff;
}

.pd-page-hero::before,
.pd-page-hero::after,
body .pd-hero::before,
body .pd-hero::after,
.pd-pause::after {
	bottom: -1px;
}

/* The footer and pause tear at the top: the same edge, upside down. */
.pd-footer::before,
.pd-footer::after,
.pd-pause::before {
	top: -1px;
	transform: scaleY(-1);
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.pd-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--pd-inkt);
	color: #fff;
}

.pd-skip:focus {
	top: 16px;
}

.pd-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 64px);
	padding: 16px var(--pd-gutter) 14px;
	color: #fff;
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.admin-bar .pd-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .pd-header {
		top: 0;
	}
}

.pd-header.is-scrolled {
	padding-top: 8px;
	padding-bottom: 8px;
	background: color-mix(in srgb, var(--pd-kraft) 94%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgb(8 30 36 / 0.18);
}

.pd-nav {
	grid-row: 1;
}

.pd-nav--left {
	grid-column: 1;
	justify-self: end;
}

.pd-nav--right {
	grid-column: 3;
	justify-self: start;
}

.pd-nav ul {
	display: flex;
	gap: clamp(18px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-nav a {
	position: relative;
	display: block;
	padding: 10px 0;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

/* Salmon bar under the hovered or current item */
.pd-nav a::after {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--pd-roze);
	transform: scaleX(0);
	transition: transform 0.3s var(--pd-ease);
}

.pd-nav a:hover::after,
.pd-nav a:focus-visible::after,
.pd-nav a[aria-current="page"]::after {
	transform: scaleX(1);
}

.pd-logo {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-decoration: none;
	text-align: center;
}

.pd-logo .pd-mark {
	width: 50px;
	height: 31px;
	color: var(--pd-roze);
	transition: height 0.3s ease, opacity 0.3s ease;
}

.pd-logo__word {
	font-family: var(--pd-script);
	font-size: clamp(32px, 3vw, 40px);
	font-weight: 700;
	line-height: 0.95;
}

.pd-logo__tag {
	margin-top: 2px;
	font-family: var(--pd-script);
	font-size: 15px;
	line-height: 1;
	opacity: 0.85;
	transition: opacity 0.3s ease, height 0.3s ease;
}

.pd-header.is-scrolled .pd-logo .pd-mark,
.pd-header.is-scrolled .pd-logo__tag {
	height: 0;
	opacity: 0;
}

/* Cart link (always) and the menu button (small screens), at the right edge. */
.pd-header__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.pd-header__toggle .pd-menu-toggle {
	display: none;
}

.pd-cart-link {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: inherit;
}

.pd-cart-link svg {
	width: 26px;
	height: 26px;
}

.pd-cart-link__count {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--pd-roze);
	color: var(--pd-inkt);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.pd-mark {
	flex: none;
}

.pd-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.pd-menu-toggle__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
}

.pd-menu-toggle__icon span,
.pd-menu-toggle__icon span::before,
.pd-menu-toggle__icon span::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--pd-koraal);
	transition: transform 0.3s var(--pd-ease), background-color 0.2s ease;
}

.pd-menu-toggle__icon span {
	position: relative;
}

.pd-menu-toggle__icon span::before,
.pd-menu-toggle__icon span::after {
	content: "";
	position: absolute;
	left: 0;
}

.pd-menu-toggle__icon span::before {
	transform: translateY(-6px);
}

.pd-menu-toggle__icon span::after {
	transform: translateY(6px);
}

.pd-menu-toggle[aria-expanded="true"] .pd-menu-toggle__icon span {
	background: transparent;
}

.pd-menu-toggle[aria-expanded="true"] .pd-menu-toggle__icon span::before {
	transform: rotate(45deg);
}

.pd-menu-toggle[aria-expanded="true"] .pd-menu-toggle__icon span::after {
	transform: rotate(-45deg);
}

/* Overlay menu (small screens) */
.pd-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 120px var(--pd-gutter) 48px;
	background-color: var(--pd-kraft-donker);
	clip-path: circle(0% at calc(100% - 40px) 44px);
	transition: clip-path 0.7s var(--pd-ease);
}

.pd-menu[hidden] {
	display: flex;
	visibility: hidden;
}

.pd-menu.is-open {
	clip-path: circle(150% at calc(100% - 40px) 44px);
}

.pd-menu__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.pd-menu__nav li {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.6s var(--pd-ease);
	transition-delay: calc(0.15s + var(--i) * 0.06s);
}

.pd-menu.is-open .pd-menu__nav li {
	opacity: 1;
	transform: none;
}

.pd-menu__nav a {
	display: inline-block;
	padding: 0.12em 0;
	font-size: clamp(34px, 9vw, 64px);
	font-weight: 700;
	line-height: 1.15;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.pd-menu__nav a:hover,
.pd-menu__nav a:focus-visible,
.pd-menu__nav a[aria-current="page"] {
	color: var(--pd-roze-licht);
}

.pd-menu__note {
	margin: 40px 0 0;
	text-align: center;
	font-family: var(--pd-script);
	font-size: 26px;
	color: var(--pd-roze-licht);
}

body.pd-menu-open {
	overflow: hidden;
}

body.pd-menu-open .pd-header {
	background: transparent;
	backdrop-filter: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Plugin sections on kraft                                            */
/* ------------------------------------------------------------------ */

body .pd-slider__shape {
	color: var(--pd-papier);
}

body .pd-slider__badge {
	color: var(--pd-roze);
}

body .pd-slider__badge text {
	font-family: var(--pd-script);
	font-size: 21px;
	letter-spacing: 0.04em;
	text-transform: none;
}

body .pd-slider__caption {
	color: var(--pd-inkt);
}

body .pd-slider__prompt {
	top: clamp(120px, 17vh, 150px);
	font-family: var(--pd-script);
	font-size: 22px;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.9;
}

body .pd-slider__link {
	padding: 0.85em 1.8em;
	background: #fff;
	color: var(--pd-koraal);
	letter-spacing: 0;
	text-transform: none;
	font-size: 15px;
	box-shadow: 0 8px 24px rgb(20 40 46 / 0.16);
}

body .pd-slider__link:hover,
body .pd-slider__link:focus-visible {
	color: var(--pd-koraal);
}

body .pd-hero {
	color: #fff;
}

body .pd-hero__title {
	letter-spacing: 0.01em;
	text-shadow: 0 4px 30px rgb(8 30 36 / 0.25);
}

body .pd-hero__labels,
body .pd-viewer--hero .pd-viewer__hint {
	color: #fff;
}

body .pd-hero__labels {
	font-family: var(--pd-script);
	font-size: 24px;
}

body .pd-viewer--hero .pd-viewer__hint {
	bottom: clamp(40px, 6vw, 64px);
}

body .pd-card__media {
	background: color-mix(in srgb, var(--pd-roze) 18%, var(--pd-papier));
}

body .pd-card__link:hover .pd-card__media,
body .pd-card__link:focus-visible .pd-card__media {
	background: color-mix(in srgb, var(--pd-roze) 40%, var(--pd-papier));
}

body .pd-card__title {
	font-size: clamp(19px, 1.6vw, 23px);
}

body .pd-card__sub {
	font-family: var(--pd-script);
	font-size: 19px;
	color: var(--pd-koraal);
	opacity: 1;
}

body .pd-section-title {
	font-size: clamp(32px, 5vw, 64px);
	text-transform: none;
}

body .pd-meta__pills li {
	border-color: var(--pd-roze);
	background: color-mix(in srgb, var(--pd-roze) 15%, var(--pd-papier));
}

/* ------------------------------------------------------------------ */
/* Page hero & text sections                                           */
/* ------------------------------------------------------------------ */

.pd-page-hero {
	margin-top: 0 !important;
	padding-top: clamp(150px, 24vh, 230px) !important;
	padding-bottom: clamp(90px, 12vw, 160px) !important;
	text-align: center;
}

.pd-page-hero__label {
	margin: 0 0 0.25em;
	font-family: var(--pd-script) !important;
	font-size: clamp(30px, 3vw, 40px) !important;
	font-weight: 600 !important;
	line-height: 1.1;
	color: var(--pd-roze-licht);
}

.pd-page-hero__lead,
.pd-page-hero__lead .wp-block-post-excerpt__excerpt {
	max-width: 18ch;
	margin: 0 auto;
	font-family: var(--pd-display);
	font-size: clamp(36px, 5.6vw, 76px);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	text-wrap: balance;
}

.pd-page-hero__lead .wp-block-post-excerpt__more-text {
	display: none;
}

.pd-kicker {
	margin-bottom: 0.2em !important;
	font-family: var(--pd-script);
	font-size: clamp(28px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	color: var(--pd-koraal);
}

.pd-intro,
.pd-product-intro > p:first-child {
	max-width: 32ch;
	margin-inline: auto !important;
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
}

.pd-home-intro {
	padding-block: clamp(80px, 12vw, 160px);
}

.pd-product-intro {
	padding-top: clamp(48px, 7vw, 96px);
}

.pd-product-intro > p:not(:first-child) {
	text-align: center;
}

.pd-button-row {
	margin-top: 2.2em !important;
	text-align: center;
}

.pd-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 2em;
	border-radius: 999px;
	background: var(--pd-koraal);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 24px rgb(176 74 38 / 0.25);
	transition: transform 0.25s var(--pd-ease), background-color 0.2s ease;
}

.pd-button:hover,
.pd-button:focus-visible {
	transform: translateY(-2px);
	background: var(--pd-inkt);
}

/* Pause: full-bleed salmon block, torn top and bottom, one handwritten line. */
/* Add "Volledige breedte" (alignfull) to the group in the editor for edge-to-edge colour. */
.pd-pause {
	margin-block: clamp(64px, 10vw, 140px) !important;
	padding: clamp(100px, 16vh, 190px) var(--pd-gutter) !important;
	background: var(--pd-roze);
	color: var(--pd-inkt);
	text-align: center;
}

.pd-pause p {
	max-width: 20ch;
	margin: 0 auto;
	font-family: var(--pd-script);
	font-size: clamp(42px, 6.4vw, 96px);
	font-weight: 600;
	line-height: 1;
	text-wrap: balance;
}

/* Split: heading left, text right */
.pd-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(20px, 5vw, 80px);
	max-width: 1240px !important;
	margin: clamp(56px, 9vw, 120px) auto !important;
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px dashed color-mix(in srgb, var(--pd-kraft) 45%, transparent);
}

.pd-split > * {
	margin: 0 !important;
}

.pd-split h2 {
	font-size: clamp(30px, 3.6vw, 52px);
	color: var(--pd-koraal);
}

.pd-split p {
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.75;
}

.pd-split .pd-split__num {
	display: block;
	margin-bottom: 0.1em;
	font-family: var(--pd-script);
	font-size: 30px;
	font-weight: 600;
	color: var(--pd-kraft);
}

/* Contact block */
.pd-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 4vw, 64px);
	max-width: 1240px !important;
	margin: 0 auto clamp(80px, 12vw, 160px) !important;
}

.pd-contact > div {
	padding: 28px;
	border-radius: 20px;
	background: color-mix(in srgb, var(--pd-roze) 16%, var(--pd-papier));
}

.pd-contact h2 {
	margin: 0 0 0.3em;
	font-family: var(--pd-script);
	font-size: 30px;
	font-weight: 600;
	color: var(--pd-koraal);
}

.pd-contact p {
	margin: 0;
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 500;
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.pd-footer {
	position: relative;
	overflow: hidden;
	padding: clamp(100px, 12vw, 150px) var(--pd-gutter) 28px;
	text-align: center;
}

.pd-footer a {
	color: inherit;
	text-decoration: none;
}

.pd-footer a:hover,
.pd-footer a:focus-visible,
.pd-footer a[aria-current="page"] {
	color: var(--pd-roze-licht);
}

.pd-footer__top .pd-mark {
	display: block;
	width: 76px;
	height: 48px;
	margin: 0 auto 4px;
	color: var(--pd-roze);
}

.pd-footer__word {
	margin: 0;
	font-family: var(--pd-script);
	font-size: clamp(64px, 9vw, 120px);
	font-weight: 700;
	line-height: 0.95;
}

.pd-footer__tag {
	margin: 0.6em auto 0;
	max-width: 34ch;
	font-size: 16px;
	opacity: 0.9;
}

.pd-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	max-width: 1000px;
	margin: clamp(48px, 6vw, 72px) auto 0;
	padding-top: 32px;
	border-top: 1px solid rgb(255 255 255 / 0.25);
	font-size: 15px;
}

.pd-footer__grid p {
	margin: 0 0 0.6em;
	line-height: 1.55;
}

.pd-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-footer__col li {
	margin-bottom: 0.35em;
}

.pd-footer__col h2 {
	margin: 0 0 0.8em;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pd-roze-licht);
}

.pd-footer__legal {
	margin: clamp(40px, 6vw, 64px) 0 0;
	font-size: 13px;
	opacity: 0.8;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.pd-nav {
		display: none;
	}

	.pd-header__toggle .pd-menu-toggle {
		display: inline-flex;
	}
}

@media (max-width: 700px) {
	.pd-split {
		grid-template-columns: 1fr;
	}

	.pd-menu-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.pd-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-menu,
	.pd-menu__nav li,
	.pd-nav a::after,
	.pd-menu-toggle__icon span,
	.pd-menu-toggle__icon span::before,
	.pd-menu-toggle__icon span::after {
		transition: none;
	}
}

/* Room for the taller centred header */
body .pd-hero {
	padding-top: clamp(140px, 19vh, 190px);
}

/* Phones: a taller paper arch so the caption always sits on paper; the scroll hint would cover the doll. */
@media (max-width: 700px) {
	body .pd-slider__shape {
		width: 250vw;
	}

	body .pd-slider__prompt {
		display: none;
	}
}

/* Home: one screen, no page scroll — the wheel, drag, arrows and keys move the slider. */
html:has(.pd-home),
body:has(.pd-home) {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

.pd-home .pd-slider__stage {
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 0;
}

/* Collectie menu item: the label floats above the word, as a little tag. */
.pd-nav__new {
	position: absolute;
	left: 50%;
	bottom: calc(100% - 6px);
	padding: 0.25em 0.6em;
	font-size: 9.5px;
	transform: translateX(-50%);
}

.pd-menu__nav .pd-nav__new {
	position: relative;
	top: -1.2em;
	margin-left: 0.4em;
	font-size: 12px;
	vertical-align: middle;
}

body .pd-hero .pd-new--hero {
	margin-bottom: 0.4em;
}

/* The arrows say it all; the hint would sit behind the centre doll's head. */
.pd-home .pd-slider__prompt {
	display: none;
}

/* Shop pages (winkelmand, afrekenen): room under the hero, the theme's buttons */
.woocommerce-cart main .wp-block-post-content,
.woocommerce-checkout main .wp-block-post-content,
.woocommerce-account main .wp-block-post-content {
	padding-block: clamp(48px, 7vw, 96px);
}

body .wc-block-components-button:not(.is-link),
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	border-radius: 999px;
	background: var(--pd-koraal);
	color: #fff;
}

body .wc-block-components-button:not(.is-link):hover {
	background: var(--pd-inkt);
	color: #fff;
}

.pd-shop {
	padding-top: clamp(32px, 5vw, 64px);
}

.pd-page-hero__label a {
	color: inherit;
	text-decoration: none;
}

.pd-page-hero__label a:hover {
	text-decoration: underline;
}

.pd-shop {
	margin-top: clamp(40px, 6vw, 72px) !important;
}

/* ------------------------------------------------------------------ */
/* Readability                                                         */
/* ------------------------------------------------------------------ */

/* Raleway at 400 reads thin on paper; one step heavier everywhere. */
body {
	font-weight: 500;
	color: var(--pd-inkt);
}

/* Pages without a kraft top (WooCommerce's own pages, order confirmation…):
   the header gets its kraft bar right away and the content starts below it. */
body:not(:has(.pd-page-hero, .pd-hero, .pd-slider)) .pd-header {
	background: var(--pd-kraft);
	box-shadow: 0 6px 24px rgb(8 30 36 / 0.18);
}

body:not(:has(.pd-page-hero, .pd-hero, .pd-slider)) .wp-site-blocks > main,
body:not(:has(.pd-page-hero, .pd-hero, .pd-slider)) #pd-main {
	padding-top: clamp(140px, 18vh, 180px);
}

/* ------------------------------------------------------------------ */
/* Home: the doll above, its name, price and buttons below — never on top of each other */
/* ------------------------------------------------------------------ */

.pd-home {
	--pd-cap: 250px;
}

.pd-home .pd-slider__canvas {
	top: 0;
	bottom: var(--pd-cap);
	height: auto;
}

/* The circling words ran through the text; the arch and dolls carry the look. */
.pd-home .pd-slider__badge {
	display: none;
}

.pd-home .pd-slider__arrow {
	top: calc((100% - var(--pd-cap)) / 2 + 40px);
}

.pd-home .pd-slider__caption {
	bottom: clamp(20px, 4vh, 40px);
	width: min(92vw, 600px);
}

.pd-home .pd-slider__name {
	margin-bottom: 0.1em;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	color: var(--pd-inkt);
}

.pd-home .pd-slider__desc {
	display: -webkit-box;
	max-width: 46ch;
	margin: 0 auto 1em;
	overflow: hidden;
	font-size: 17px;
	line-height: 1.5;
	color: var(--pd-inkt);
	opacity: 1;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pd-home .pd-slider__price {
	font-size: 24px;
	color: var(--pd-koraal);
}

.pd-home .pd-slider__add {
	background: var(--pd-koraal);
}

.pd-home .pd-slider__add:hover,
.pd-home .pd-slider__add:focus-visible {
	background: var(--pd-inkt);
}

@media (max-width: 700px) {
	.pd-home {
		--pd-cap: 245px;
	}

	.pd-home .pd-slider__desc {
		font-size: 16px;
	}

	.pd-home .pd-slider__arrow {
		width: 44px;
		height: 44px;
	}
}

@media (max-height: 640px) {
	.pd-home {
		--pd-cap: 200px;
	}

	.pd-home .pd-slider__desc {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Shop pages                                                          */
/* ------------------------------------------------------------------ */

.woocommerce-cart .wp-block-post-content,
.woocommerce-checkout .wp-block-post-content {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--pd-gutter);
}

/* Room for the phone buy bar at the bottom of product pages. */
@media (max-width: 800px) {
	body:has(.pd-buybar) .pd-footer {
		padding-bottom: 96px;
	}
}

/* Keep the dolls clear of the logo. */
.pd-home .pd-slider__canvas {
	top: clamp(70px, 11vh, 110px);
}

/* A solid bar reads better than a see-through one, on every page. */
.pd-header.is-scrolled {
	background: var(--pd-kraft);
	backdrop-filter: none;
}

/* A canvas doesn't stretch between top and bottom by itself: give it its height. */
.pd-home {
	--pd-top: clamp(70px, 11vh, 110px);
}

.pd-home .pd-slider__canvas {
	top: var(--pd-top);
	bottom: auto;
	height: calc(100% - var(--pd-top) - var(--pd-cap));
}

/* ------------------------------------------------------------------ */
/* Winkel dropdown: shop by category                                   */
/* ------------------------------------------------------------------ */

.pd-nav li.has-sub {
	position: relative;
}

.pd-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 5;
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	min-width: 200px;
	margin: 0;
	padding: 10px !important;
	border-radius: 16px;
	background: var(--pd-papier);
	box-shadow: 0 16px 40px rgb(8 30 36 / 0.22);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* A bridge over the gap so the menu stays open on the way down. */
.pd-nav__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}

.pd-nav li.has-sub:hover > .pd-nav__sub,
.pd-nav li.has-sub:focus-within > .pd-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 4px);
}

.pd-nav .pd-nav__sub a {
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--pd-inkt);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.pd-nav .pd-nav__sub a::after {
	display: none;
}

.pd-nav .pd-nav__sub a:hover,
.pd-nav .pd-nav__sub a:focus-visible,
.pd-nav .pd-nav__sub a[aria-current="page"] {
	background: color-mix(in srgb, var(--pd-roze) 25%, var(--pd-papier));
	color: var(--pd-koraal);
}

/* Phone menu: categories as a row of small links under Winkel. */
.pd-menu__sub {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px !important;
	margin: 2px 0 10px !important;
	padding: 0;
	list-style: none;
}

.pd-menu__sub li {
	opacity: 1 !important;
	transform: none !important;
}

.pd-menu__nav .pd-menu__sub a {
	font-size: 18px;
	font-weight: 600;
	opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Sale label and price                                                */
/* ------------------------------------------------------------------ */

.pd-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.pd-sale {
	background: var(--pd-koraal);
	color: #fff;
}

.pd-card__sub del,
.pd-buy del {
	margin-right: 0.3em;
	font-weight: 500;
	opacity: 0.6;
}

/* Home is a showcase: just the name and one button under the doll, so the dolls get the room. */
.pd-home {
	--pd-cap: 150px;
}

.pd-home .pd-slider__name {
	font-size: clamp(36px, 4.6vw, 56px);
	margin-bottom: 0.3em;
}

/* ------------------------------------------------------------------ */
/* Compact page tops: no big kraft banner, the content starts right away */
/* ------------------------------------------------------------------ */

/* Every page except home and the 3D product pages: the header is a solid kraft bar. */
body:not(:has(.pd-hero, .pd-slider)) .pd-header {
	background: var(--pd-kraft);
	box-shadow: 0 6px 24px rgb(8 30 36 / 0.18);
}

.pd-page-hero {
	padding-top: clamp(118px, 15vh, 140px) !important;
	padding-bottom: clamp(16px, 2.5vw, 28px) !important;
	background: none !important;
	color: var(--pd-inkt);
}

.pd-page-hero::before,
.pd-page-hero::after {
	display: none;
}

.pd-page-hero__label {
	margin-bottom: 0;
	font-size: clamp(22px, 2vw, 28px) !important;
	color: var(--pd-koraal);
}

.pd-page-hero__lead,
.pd-page-hero__lead .wp-block-post-excerpt__excerpt {
	max-width: 28ch;
	font-size: clamp(26px, 3vw, 38px);
	color: var(--pd-inkt);
}

/* The shop: right under the title. */
.pd-shop {
	margin-top: clamp(12px, 2vw, 24px) !important;
}

.pd-intro {
	margin-block: 0 clamp(12px, 2vw, 24px) !important;
	font-size: clamp(17px, 1.5vw, 20px);
}

.pd-product {
	margin-top: clamp(16px, 2.5vw, 32px) !important;
}

/* ------------------------------------------------------------------ */
/* Header search                                                       */
/* ------------------------------------------------------------------ */

.pd-search-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.pd-search-toggle svg {
	width: 24px;
	height: 24px;
}

.pd-search {
	position: absolute;
	top: 100%;
	left: 50%;
	width: min(calc(100% - 32px), 640px);
	padding: 14px;
	border-radius: 0 0 20px 20px;
	background: var(--pd-papier);
	color: var(--pd-inkt);
	box-shadow: 0 18px 40px rgb(8 30 36 / 0.25);
	transform: translateX(-50%);
}

.pd-search[hidden] {
	display: none;
}

.pd-search__form {
	display: flex;
	gap: 8px;
}

.pd-search__form input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 2px solid color-mix(in srgb, var(--pd-koraal) 30%, transparent);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 16px;
}

.pd-search__form input:focus {
	border-color: var(--pd-koraal);
	outline: none;
}

.pd-search__form button {
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--pd-koraal);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

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

.pd-search__results:not(:empty) {
	margin-top: 10px;
}

.pd-search__results a {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}

.pd-search__results a:hover,
.pd-search__results a:focus-visible {
	background: color-mix(in srgb, var(--pd-roze) 22%, var(--pd-papier));
}

.pd-search__results img,
.pd-search__noimg {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: #fff;
	object-fit: cover;
}

.pd-search__results img.is-strip {
	object-position: 0 50%;
}

.pd-search__name {
	font-weight: 700;
}

.pd-search__price {
	font-weight: 600;
	color: var(--pd-koraal);
}

.pd-search__none {
	padding: 10px 8px;
	font-size: 15px;
}

/* Clear of the header bar (logo with its tagline) on every screen size. */
.pd-page-hero {
	padding-top: clamp(140px, 17vh, 160px) !important;
}

.pd-shop {
	margin-top: 8px !important;
}

@media (max-width: 600px) {
	.pd-page-hero {
		padding-top: 116px !important;
	}

	/* Search and sort side by side, so the products come into view sooner. */
	body .pd-shop-tools {
		flex-wrap: nowrap;
	}

	body .pd-shop-tools__search {
		flex: 1 1 auto;
	}

	body .pd-shop-tools__sort {
		flex: 0 0 132px;
	}

	body .pd-shop-tools select {
		padding: 0 10px 0 14px;
		font-size: 15px;
	}

	body .pd-filter ul {
		margin-bottom: 14px;
	}
}

/* Instagram link (footer + overlay menu) */
.pd-insta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}

.pd-insta svg {
	flex: none;
}

.pd-menu__social {
	margin: 16px 0 0;
	text-align: center;
}

.pd-menu__social a {
	color: var(--pd-roze-licht);
	text-decoration: none;
}