/* Qurkies Blocks – aanvullende stijlen. Kleuren, fonts en knoppen staan in theme.json. */

/* Oude Blocksy-variabelen die nog in bestaande pagina-inhoud staan. */
:root {
	--theme-palette-color-1: var(--wp--preset--color--palette-color-1);
	--theme-palette-color-2: var(--wp--preset--color--palette-color-2);
	--theme-palette-color-3: var(--wp--preset--color--palette-color-3);
	--theme-palette-color-4: var(--wp--preset--color--palette-color-4);
	--theme-palette-color-5: var(--wp--preset--color--palette-color-5);
	--theme-palette-color-6: var(--wp--preset--color--palette-color-6);
	--theme-palette-color-7: var(--wp--preset--color--palette-color-7);
	--theme-palette-color-8: var(--wp--preset--color--palette-color-8);
	--theme-text-color: var(--wp--preset--color--palette-color-3);
}

/* Header */
.qurkies-header {
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.qurkies-header > .alignwide { width: 100%; }
.qurkies-header .wp-block-site-title { margin: 0; }
.qurkies-header > .alignwide > .wp-block-group:first-child,
.qurkies-header .wp-block-site-logo,
.qurkies-header .wp-block-site-title { flex-shrink: 0; }
.qurkies-header .wp-block-site-logo img { width: 62px; height: auto; }

/*
 * Compacte header. assets/js/header.js meet of alles past en zet dan is-compact-cta (knop weg)
 * en is-compact-nav (hamburgermenu). Zonder JavaScript gelden vaste breekpunten.
 */
.qurkies-header.is-compact-cta .qurkies-header-cta { display: none; }
.qurkies-header.is-compact-nav .qurkies-menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.qurkies-header.is-compact-nav .qurkies-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
.qurkies-header.is-compact-nav .qurkies-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
@media (min-width: 600px) and (max-width: 1299px) {
	.qurkies-header:not(.is-measured) .qurkies-menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.qurkies-header:not(.is-measured) .qurkies-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Met hamburgermenu: logo links, winkelmandje en hamburger helemaal rechts. */
.qurkies-header.is-hamburger > .alignwide { justify-content: flex-start; }
.qurkies-header.is-hamburger > .alignwide > .wp-block-group:first-child { margin-right: auto; }
.qurkies-header.is-hamburger .qurkies-menu { order: 3; }
.qurkies-menu .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; color: var(--wp--preset--color--palette-color-1); }
.qurkies-menu .is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--palette-color-8); font-size: 24px; }
.qurkies-menu .wp-block-navigation-item__content { color: var(--wp--preset--color--palette-color-4); }
.qurkies-menu .wp-block-navigation-item { position: relative; white-space: nowrap; }
.qurkies-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { flex-wrap: nowrap; }
.qurkies-header-cta .wp-block-button__link { white-space: nowrap; }

/* Golfje onder het actieve / aangewezen menu-item */
@media (min-width: 600px) {
	.qurkies-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -14px;
		height: 10px;
		background: url("/wp-content/uploads/2024/09/Group-4.svg") no-repeat 50% 0 / 40px 10px;
		opacity: 0;
		transition: opacity .15s;
	}
	.qurkies-menu .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
	.qurkies-menu .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after {
		opacity: 1;
	}
}

.qurkies-cart .wc-block-mini-cart__button { color: var(--wp--preset--color--palette-color-2); }
.qurkies-cart .wc-block-mini-cart__button:hover { color: var(--wp--preset--color--palette-color-1); }
.qurkies-cart .wc-block-mini-cart__icon { width: 39px; height: 39px; }

@media (max-width: 1439px) {
	.qurkies-header:not(.is-measured) .qurkies-header-cta { display: none; }
}
@media (max-width: 781px) {
	.qurkies-header { min-height: 91px; }
	.qurkies-header .wp-block-site-title { font-size: 30px; }
	.qurkies-header .wp-block-site-logo img { width: 44px; }
}

/* Footer */
.qurkies-footer p { margin: 0; }

/* Algemeen */
.wp-block-button__link { font-weight: 300; }
.payment-meth { gap: 20px; }
.payment-icon { width: 36px; }
#lighter-heading {
	font-weight: 400 !important;
	line-height: 1;
}
#century-gothic {
	font-family: var(--wp--preset--font-family--century-gothic) !important;
	max-width: 100%;
}
#voetafdruk img { object-fit: contain; }

/* Wit achter winkelwagen en afrekenen */
body.woocommerce-cart,
body.woocommerce-checkout {
	background-color: var(--wp--preset--color--palette-color-8);
}

/* Formulieren */
.gform_button {
	background-color: var(--wp--preset--color--palette-color-2) !important;
	padding: 18px 25px !important;
}
input,
textarea {
	border: 1px solid #E2E2E2;
}
.gform-theme--foundation .gform_fields { gap: 14px; }
.gform-theme--foundation .gform_fields input,
.gform-theme--foundation .gform_fields textarea {
	padding: 5px 12px !important;
	min-height: 40px;
	font-size: 16px !important;
	outline: none !important;
}
.gform-theme--foundation .gform_fields input { height: 40px; }
.gform-theme--foundation .gform_fields input[type="checkbox"] {
	height: 1.7em;
	min-height: 1.7em;
}
form.checkout input,
form.checkout textarea,
form.checkout select,
span.select2-container .select2-selection--single .select2-selection__rendered {
	padding: 5px 12px !important;
	font-size: 16px !important;
}
form.checkout input,
form.checkout select { max-height: 40px; }
.select2-search--dropdown { display: none !important; }

/* Productkaarten (productcollecties) */
.wc-block-product-template li,
.wp-block-woocommerce-product-template > li {
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--palette-color-8);
	box-shadow: 0 3px 6px #00000029;
	padding-bottom: 40px;
}
.wc-block-product-template { padding-bottom: 10px !important; }
.wc-block-product-template li .wp-block-post-title { font-size: 1.5em; }
.wc-block-product-template li .wp-block-post-excerpt { padding: 0 10px; }
.wc-block-product-template li .wc-block-components-product-price { font-size: 1.5em; font-weight: 600; }
.wc-block-product-template li .wc-block-components-product-button { margin-top: auto; }
/* "Personaliseren"-knop van de plugin Qurkies Personalisatie */
.wc-block-product > a.button,
.wc-block-components-product-button > a.button {
	margin-top: auto;
	display: inline-block;
	background: var(--wp--preset--color--palette-color-1);
	color: var(--wp--preset--color--palette-color-8);
	font-size: 21px;
	font-weight: 300;
	padding: .6em 1.2em;
	text-decoration: none;
}
.wc-block-product > a.button:hover,
.wc-block-components-product-button > a.button:hover { background: var(--wp--preset--color--palette-color-2); }
@media (max-width: 1600px) {
	.wc-block-product-template li .wp-block-post-title { font-size: 1.3em; }
}

/* 4-koloms productgrid: 1 / 2 / 4 kolommen */
@media (max-width: 768px) {
	.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(1, 1fr) !important; }
}
@media (min-width: 768px) {
	.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1200px) {
	.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Productpagina */
.qurkies-hero { min-height: 25vw !important; }
.qurkies-summary .wp-block-post-title { margin-top: 0; }
.qurkies-summary .wc-block-components-product-price,
.qurkies-summary .price { font-weight: 700; color: var(--wp--preset--color--palette-color-1); }
.qurkies-summary form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.qurkies-summary form.cart .quantity input.qty { height: 100%; min-height: 55px; width: 4em; text-align: center; }
.qurkies-summary .qp-fields { flex-basis: 100%; }
.qurkies-levering {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: .95em;
}
.qurkies-levering::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wp--preset--color--palette-color-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.qurkies-related h2 { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.3rem); font-weight: 400; }

/* Homepage-onderdelen (roze cirkels, productrij) */
.products-rij {
	align-items: stretch;
	gap: 1em !important;
}
.products-rij-card {
	padding-bottom: 35px !important;
	border-radius: 19px;
	justify-content: space-between;
	display: flex;
	flex-direction: column;
	min-width: 25%;
	box-shadow: 0 3px 6px #00000029;
	overflow: hidden;
}
.products-rij-card img {
	min-height: 350px;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
}
@media (max-width: 1100px) {
	.products-rij { flex-direction: column; }
}

.roze-cirkels {
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: end;
}
@media (max-width: 1000px) {
	.roze-cirkels { flex-wrap: wrap; }
}
.pink-circle {
	min-width: 25%;
	background: url("https://qurkies.nl/wp-content/uploads/2024/09/Untitled-2.svg") no-repeat;
	background-size: 100%;
}
.pink-circle img { object-fit: contain !important; }
.pink-circle p { visibility: hidden; }
.pink-circle:hover img { opacity: .1; }
.pink-circle:hover p { visibility: visible; }
@media (max-width: 768px) {
	.pink-circle img { opacity: .1; }
	.pink-circle p { visibility: visible; }
}

/* Golfrand (vervangt de Stackable-scheidingslijnen) */
.qurkies-wave { position: relative; }
.qurkies-wave::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(40px, 8vw, 120px);
	background: var(--qurkies-wave-color, var(--wp--preset--color--palette-color-7));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath d='M1413.6 39.3c-157.9 0-338.2 37.7-495.1 67.4-215.6 40.8-328.1 44.6-418.2 41.1S317 127.3 188.4 98.7-10 64.5-10 64.5v150.2h1620V58.8s-68.8-19.5-196.4-19.5z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath d='M1413.6 39.3c-157.9 0-338.2 37.7-495.1 67.4-215.6 40.8-328.1 44.6-418.2 41.1S317 127.3 188.4 98.7-10 64.5-10 64.5v150.2h1620V58.8s-68.8-19.5-196.4-19.5z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
	pointer-events: none;
	z-index: 1;
}
.qurkies-wave--zand { --qurkies-wave-color: var(--wp--preset--color--zand); }

@media (min-width: 1900px) {
	.page-id-2 .wp-block-post-content p { max-width: 1100px; }
}