/*
Theme Name: Chateau Child
Theme URI: https://chateau.qodeinteractive.com
Description: A child theme of Chateau
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: chateau
Template: chateau
*/

/* Pura Passione brand fonts — self-hosted variable fonts (latin subset).
   The theme's font names (Barlow Condensed, Ibarra Real Nova, Inter) are
   ALIASED to the brand font files below: every Chateau rule that asks for
   those families now renders Quicksand / Playfair Display without touching
   any selectors, and icon fonts stay untouched. Declared in the child
   stylesheet so these @font-face rules win from the theme's Google Fonts. */
@font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/quicksand.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('fonts/playfair-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url('fonts/playfair-italic.woff2') format('woff2');
}

/* Shadows Into Light — handgeschreven accent (Elementor-kit 'pphandw1').
   Zelf gehost sinds 2026-08-11: Elementor haalde dit nog bij Google op, wat
   zowel gewicht kostte als bezoekersgegevens naar Google stuurde terwijl
   Complianz op self-host staat. Subsets en unicode-ranges zoals Google ze zelf
   uitlevert, zodat accenten blijven kloppen. */
@font-face {
	font-family: 'Shadows Into Light';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/shadows-into-light.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Shadows Into Light';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/shadows-into-light-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Theme-font aliases → brand fonts */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/quicksand.woff2') format('woff2');
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/quicksand.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/quicksand.woff2') format('woff2');
}
@font-face {
	font-family: 'Ibarra Real Nova';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/playfair-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Ibarra Real Nova';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/playfair-italic.woff2') format('woff2');
}

/* Pura Passione brand colors (also used by front-page.php):
   lichtgroen #ced7ca, donkergroen #46534a, bordeaux #6a141d, lila #cabebb.
   Chateau's defaults were olive (#354c04 / #466605 / gurkha #999373). */
:root {
	--pp-lichtgroen: #ced7ca;
	--pp-donkergroen: #46534a;
	--pp-bordeaux: #6a141d;
	--pp-lila: #cabebb;
	--qode-main-color: #6a141d;
	--qode-main-hover-color: #46534a;
	--qode-gurkha-color: #46534a;
}

/* Homepage: full-bleed landing — drop the theme's 130px/100px content
   padding so the hero sits flush against the header. */
/* Site-wide: no theme padding between header and content — spacing is
   controlled per-page (Elementor sections / templates) instead. */
#qodef-page-inner {
	padding: 0;
}
/* Theme options inject margin-top:-100px on the outer wrapper (content-
   behind-header design for pages with a title banner). Our pages have no
   title banner, so content lands under the 100px header — neutralize. */
#qodef-page-outer {
	margin-top: 0 !important;
}

/* Wide product archives (shop + category pages): full viewport width with
   comfortable lateral padding and space under the breadcrumb bar */
.post-type-archive-product #qodef-page-inner,
.tax-product_cat #qodef-page-inner,
.tax-product_tag #qodef-page-inner,
.single-product #qodef-page-inner {
	padding: 30px 40px 60px;
	width: min(1700px, 100%);
	max-width: 1700px;
	margin: 0 auto;
}

/* Hidden quick-view trigger (activated by clicking the product image) */
.pp-qv-hidden { display: none !important; }

/* Chateau-core forces overflow-y:hidden !important on the modal (max-height 90vh),
   which clips tall quick-view content and swallows mouse-wheel scrolling; the
   extra .open class outweighs its specificity */
#yith-quick-view-modal.open .yith-wcqv-main { overflow-y: auto !important; }

/* ---------- Product detail page ---------- */

/* Image side: same card treatment as the shop tiles (white fading to
   ivory-green at the bottom). align-self keeps the card hugging the photo
   instead of stretching to the (often much taller) summary column. */
.single-product .qodef-woo-single-image {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%);
	border-radius: 20px;
	padding: 48px 32px;
	box-shadow: 0 22px 44px -28px rgba(70, 83, 74, 0.4);
	align-self: flex-start;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	border: 0 !important;
}
.single-product .qodef-woo-single-image .woocommerce-product-gallery__image img {
	object-fit: contain;
	max-height: 560px;
	width: auto;
	margin: 0 auto;
	border-radius: 10px;
}

/* Sticky summary on desktop (harmless no-op if column is shorter) */
@media (min-width: 1025px) {
	.single-product .qodef-woo-single-inner .entry-summary { position: sticky; top: 130px; }
}

/* Eyebrow (wijnhuis) above the title */
.pp-eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #6a141d;
	margin-bottom: 10px;
}

/* Title + bordeaux accent line. !important + the #qodef-woo-page prefix:
   the theme styles single-product headings through ID-prefixed rules, so a
   plain class rule silently loses (same trap as the tile buttons). Titles
   here must read exactly like the section titles on the homepage. */
#qodef-woo-page h1.qodef-woo-product-title,
.single-product h1.qodef-woo-product-title,
.single-product h1.product_title {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 2.6rem;
	line-height: 1.15;
	color: #46534a;
	margin: 0 0 8px;
}
/* every other heading on the product page in the same voice */
#qodef-woo-page .single-product h2,
.single-product .woocommerce-tabs ul.wc-tabs li a,
.single-product table.woocommerce-product-attributes caption,
.single-product section.related.products > h2,
.single-product .woocommerce-Reviews-title,
.single-product #reviews h2,
.single-product #reviews h3,
.single-product .comment-reply-title {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.single-product h1.qodef-woo-product-title:after {
	content: '';
	display: block;
	width: 64px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin-top: 16px;
}

/* Price */
.single-product .summary p.price,
.single-product .summary p.price .woocommerce-Price-amount {
	font-family: 'Playfair Display', serif;
	font-size: 1.8rem;
	color: #6a141d;
}
.single-product .summary p.price { margin: 18px 0 4px; }

/* Short description; also neutralize legacy <table width=".."> markup from live */
.single-product .summary .woocommerce-product-details__short-description {
	font-family: 'Quicksand', sans-serif;
	line-height: 1.85;
	color: #4a4a48;
	margin: 14px 0 4px;
}
.single-product .summary .woocommerce-product-details__short-description table,
.single-product .summary .woocommerce-product-details__short-description tbody,
.single-product .summary .woocommerce-product-details__short-description tr,
.single-product .summary .woocommerce-product-details__short-description td {
	display: block;
	width: auto !important;
	border: 0;
	padding: 0;
}

/* Attribute pills */
.pp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.pp-badge {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: #46534a;
	background: rgba(206, 215, 202, 0.4);
	border: 1px solid #ced7ca;
	border-radius: 999px;
	padding: 5px 14px;
}

/* Quantity + add to cart */
.single-product form.cart { display: flex; align-items: center; gap: 14px; margin: 26px 0 8px; }
.single-product form.cart .quantity { border: 1px solid #ced7ca; border-radius: 999px; overflow: hidden; }
/* Add-to-cart button: theme default (same style as the winkelmand buttons —
   uppercase bordeaux text, hairline frame animation). No overrides. */

/* Meta (categories/tags) */
.single-product .summary .product_meta {
	border-top: 1px solid #e4e4e4;
	margin-top: 26px;
	padding-top: 18px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.85rem;
}
.single-product .summary .product_meta .qodef-woo-meta-label {
	color: #46534a;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	margin-right: 6px;
}
.single-product .summary .product_meta a { color: #6a141d; }

/* Tabs (Extra informatie) */
.single-product .woocommerce-tabs { margin-top: 70px; }
.single-product .woocommerce-tabs ul.wc-tabs { display: flex; justify-content: center; gap: 34px; border-bottom: 1px solid #e4e4e4; }
.single-product .woocommerce-tabs ul.wc-tabs li a {
	font-family: 'Playfair Display', serif;
	font-size: 1.25rem;
	color: #8b8b88;
	padding: 10px 2px;
}
.single-product .woocommerce-tabs ul.wc-tabs li.active a { color: #46534a; box-shadow: inset 0 -2px 0 #6a141d; }
/* Bijkomende informatie: label column on top-aligned rows, alternating
   row tint so it is obvious which value belongs to which label */
.single-product table.woocommerce-product-attributes {
	max-width: 860px;
	margin: 34px auto;
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #eceae4;
	border-radius: 12px;
	overflow: hidden;
}
.single-product table.woocommerce-product-attributes tr { border-bottom: 1px solid #eceae4; }
.single-product table.woocommerce-product-attributes tr:last-child { border-bottom: 0; }
.single-product table.woocommerce-product-attributes tr:nth-child(odd) { background: #f7f6f2; }
.single-product table.woocommerce-product-attributes tr:nth-child(even) { background: #fff; }
.single-product table.woocommerce-product-attributes th {
	font-family: 'Quicksand', sans-serif;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: #46534a;
	text-align: left;
	vertical-align: top;
	width: 34%;
	padding: 14px 18px;
	border-right: 1px solid #eceae4;
}
.single-product table.woocommerce-product-attributes td {
	font-family: 'Quicksand', sans-serif;
	color: #4a4a48;
	vertical-align: top;
	padding: 14px 18px;
	line-height: 1.7;
}
.single-product table.woocommerce-product-attributes td p { margin: 0; }
@media (max-width: 600px) {
	.single-product table.woocommerce-product-attributes th,
	.single-product table.woocommerce-product-attributes td { display: block; width: auto; border-right: 0; }
	.single-product table.woocommerce-product-attributes th { padding-bottom: 2px; }
	.single-product table.woocommerce-product-attributes td { padding-top: 0; }
}

/* 404: compacte foutmelding zodat de wijnen meteen in beeld staan.
   Het thema zet 160px boven- en 250px onderpadding op #qodef-404-page,
   waardoor de titel halfweg de pagina belandt. */
.error404 #qodef-page-inner { padding-top: 24px !important; }
#qodef-404-page { padding: 40px 6% 40px !important; }
#qodef-404-page .qodef-404-text { max-width: 60ch !important; }
#qodef-404-page .qodef-404-title,
.error404 .qodef-404-title {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 2.2rem !important;
	color: #46534a !important;
	margin: 0 0 8px !important;
}
#qodef-404-page .qodef-404-text,
.error404 .qodef-404-text {
	font-family: 'Quicksand', sans-serif;
	color: #4a4a48;
	max-width: 60ch;
	margin: 0 auto 6px !important;
}
/* volgorde staat vast in de HTML (titel, tekst, wijnen, knop) */
#qodef-404-page .qodef-404-button { margin: 4px 0 60px !important; text-align: center; }

/* 404: wijnsuggesties onder de foutmelding */
.pp-404-wines { max-width: 1100px; margin: 6px auto 30px; padding: 26px 20px 0; border-top: 1px solid #eceae4; text-align: center; }
.pp-404-wines h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 1.8rem;
	color: #46534a;
	margin: 0 0 8px;
}
.pp-404-wines-intro { font-family: 'Quicksand', sans-serif; color: #6d6d6a; margin: 0 auto 30px; max-width: 56ch; }
.pp-404-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pp-404-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%);
	border-radius: 16px;
	padding: 20px 14px 22px;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-404-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -24px rgba(70, 83, 74, 0.45); }
.pp-404-img { display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; margin-bottom: 12px; }
.pp-404-img img { height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain; }
.pp-404-name { font-family: 'Playfair Display', serif; font-size: 1rem; line-height: 1.35; color: #46534a; }
.pp-404-price { font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.9rem; color: #6a141d; margin-top: 6px; }
.pp-404-all { margin-top: 26px; }
@media (max-width: 900px) { .pp-404-grid { grid-template-columns: repeat(2, 1fr); } }

/* Blog: "Wijnen uit dit artikel" product strip */
.pp-post-wines { margin: 50px 0 10px; padding-top: 34px; border-top: 1px solid #eceae4; }
.pp-post-wines h3 { font-family: 'Playfair Display', serif; color: #46534a; font-size: 1.5rem; margin: 0 0 20px; }
.pp-post-wines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pp-post-wine {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%);
	border-radius: 16px;
	padding: 18px 14px 20px;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-post-wine:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -24px rgba(70, 83, 74, 0.45); }
.pp-post-wine-img { display: flex; align-items: center; justify-content: center; height: 150px; overflow: hidden; margin-bottom: 12px; }
.pp-post-wine-img img { height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain; }
.pp-post-wine-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; line-height: 1.35; color: #46534a; }
.pp-post-wine-price { font-family: 'Quicksand', sans-serif; font-size: 0.85rem; font-weight: 600; color: #6a141d; margin-top: 6px; }
.pp-post-wines-all { text-align: center; margin-top: 26px; }
@media (max-width: 900px) { .pp-post-wines-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shop FAQ block */
.pp-faq { max-width: 900px; margin: 60px auto 10px; padding: 0 20px; }
.pp-faq h2 {
	font-family: 'Playfair Display', serif;
	color: #46534a;
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 8px;
}
.pp-faq h2:after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 14px auto 26px;
}
.pp-faq-item {
	border-bottom: 1px solid #e4e2dc;
	padding: 14px 0;
	font-family: 'Quicksand', sans-serif;
}
.pp-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: #46534a;
	list-style: none;
	position: relative;
	padding-right: 28px;
}
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-item summary:after {
	content: '+';
	position: absolute;
	right: 4px;
	top: -2px;
	color: #6a141d;
	font-size: 1.3rem;
	line-height: 1;
}
.pp-faq-item[open] summary:after { content: '–'; }
.pp-faq-item p { margin: 12px 0 4px; color: #4a4a48; line-height: 1.8; }

/* Related products heading */
.single-product section.related.products > h2 {
	font-family: 'Playfair Display', serif;
	text-align: center;
	font-size: 2rem;
	color: #46534a;
	margin: 70px 0 30px;
}
.single-product section.related.products > h2:after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 14px auto 0;
}

@media (max-width: 768px) {
	.single-product .qodef-woo-single-image { padding: 24px 16px; }
	.single-product h1.qodef-woo-product-title { font-size: 2rem; }
	.single-product form.cart { flex-wrap: wrap; }
}

/* ---------- Product category / archive pages (match detail-page look) ---------- */

/* Result count + ordering bar */
.qodef-woo-results { align-items: center; margin-bottom: 28px; }
.woocommerce-result-count { font-family: 'Quicksand', sans-serif; font-size: 0.85rem; color: #999; }
.woocommerce-ordering select.orderby,
.woocommerce-ordering select.orderby option {
	/* het thema zet alle <select>'s in Ibarra Real Nova cursief (main.css);
	   font-style moet hier dus expliciet terug naar normal. */
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.85rem;
	color: #46534a;
	border: 1px solid #ced7ca;
	border-radius: 999px;
	padding: 8px 32px 8px 16px;
	background-color: transparent;
}

/* Light ivory page background so the white cards stand out */
.post-type-archive-product #qodef-page-outer,
.tax-product_cat #qodef-page-outer,
.tax-product_tag #qodef-page-outer,
.single-product #qodef-page-outer {
	background: #faf8f3;
}

/* Whole tile = one white card (photo + title + price + button) */
.qodef-woo-product-list li.product,
.qodef-woo-product-list div.product {
	/* !important: the Elementor products widget prints inline styles after
	   this sheet and would otherwise flatten the cards to plain white */
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%) !important;
	border-radius: 16px;
	padding: 34px 16px 34px !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.qodef-woo-product-list li.product:hover {
	box-shadow: 0 20px 38px -24px rgba(70, 83, 74, 0.45);
	transform: translateY(-4px);
}
.qodef-woo-product-list .qodef-e-media-image {
	background: transparent;
	border-radius: 10px;
	padding: 0;
}
.qodef-woo-product-list .qodef-e-content { text-align: center; padding-top: 16px; }

/* Always-visible add-to-cart button pinned to the card bottom. The theme
   hides tile buttons until hover (opacity:0 + position:absolute!important
   with a slide-in) — put the button back into normal flow (static outranks
   their absolute via specificity at equal importance) and pin it with flex:
   content column fills the card, margin-top:auto pushes the button down. */
#qodef-woo-page .qodef-woo-product-list li.product,
.qodef-woo-product-list li.product { display: flex !important; flex-direction: column; }
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-inner,
.qodef-woo-product-list li.product .qodef-e-inner {
	display: flex !important;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	height: auto !important;
}
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-content,
.qodef-woo-product-list li.product .qodef-e-content {
	display: flex !important;
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
	margin-bottom: 0; /* theme reserves 71px for its absolute hover button */
}
.qodef-woo-product-list li.product .qodef-e-content .price { margin-bottom: 18px; }
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-content .button,
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-content .added_to_cart,
.qodef-woo-product-list li.product .qodef-e-content .button,
.qodef-woo-product-list li.product .qodef-e-content .added_to_cart {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	white-space: nowrap;
}
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-content .button,
.qodef-woo-product-list li.product .qodef-e-content .button { margin-top: auto; }
/* breathing room under the pinned button (some contexts collapse the card's
   own bottom padding) */
#qodef-woo-page .qodef-woo-product-list li.product,
.qodef-woo-product-list li.product { padding-bottom: 34px !important; }
#qodef-woo-page .qodef-woo-product-list li.product .qodef-e-content .added_to_cart,
.qodef-woo-product-list li.product .qodef-e-content .added_to_cart { margin-top: 10px; font-size: 0.72rem; }

/* The theme fades the price out on card hover (it expected the button to
   take its place) — keep the price visible since the button is permanent */
#qodef-woo-page .qodef-woo-product-list .qodef-e-inner:hover .price,
.qodef-woo-product-list .qodef-e-inner:hover .price {
	opacity: 1;
	transform: none;
}
.qodef-woo-product-list .qodef-woo-product-title,
.qodef-woo-product-list .qodef-woo-product-title a {
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	line-height: 1.35;
	color: #46534a;
}
.qodef-woo-product-list .qodef-woo-product-title a:hover { color: #6a141d; }
.qodef-woo-product-list li.product .price,
.qodef-woo-product-list li.product .price .woocommerce-Price-amount {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	color: #6a141d;
}

/* Tile add-to-cart: winkelmand button language — uppercase bordeaux text,
   thin square hairline frame, transparent. #qodef-woo-page prefix: the
   theme's own tile-button rules carry that ID, so class-only selectors lose
   no matter their length. */
#qodef-woo-page .qodef-woo-product-list li.product .button,
.qodef-woo-product-list li.product .button {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #6a141d;
	border: 0;
	border-radius: 0;
	padding: 12px 24px;
	background-color: transparent;
	/* winkelmand-style discontinuous frame, same geometry as the theme's
	   span-based button: full verticals + short/long horizontal segments
	   whose gap slides along the edge on hover */
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
#qodef-woo-page .qodef-woo-product-list li.product .button:hover,
.qodef-woo-product-list li.product .button:hover {
	color: #46534a;
	background-color: transparent;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}

/* Out-of-stock badge */
.qodef-woo-product-mark.qodef-out-of-stock {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: #46534a;
	color: #fff;
	border-radius: 999px;
	padding: 5px 14px;
}

/* Pagination */
.woocommerce-pagination { text-align: center; margin-top: 50px; }
.woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 8px; border: 0; }
.woocommerce-pagination ul.page-numbers li { border: 0; }
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	font-family: 'Quicksand', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border: 1px solid #ced7ca;
	border-radius: 50%;
	color: #46534a;
	transition: all 0.2s ease;
}
.woocommerce-pagination ul.page-numbers li a:hover { border-color: #6a141d; color: #6a141d; }
.woocommerce-pagination ul.page-numbers li span.current { background: #6a141d; border-color: #6a141d; color: #fff; }

/* Non-wine categories (olijfolie, pasta, dolci…): drop the wine filter
   sidebar entirely and let the product grid use the full width */
.pp-no-wijnfilters .qodef-page-sidebar-section { display: none !important; }
.pp-no-wijnfilters #qodef-page-content .qodef-grid-inner { display: block !important; }

/* Filter sidebar */
.qodef-col--sidebar .filter-title,
.qodef-col--sidebar .widget h4,
.qodef-col--sidebar .widget h5 {
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	color: #46534a;
	margin-bottom: 12px;
}
.qodef-col--sidebar .yith-wcan-filters,
.qodef-col--sidebar .widget { font-family: 'Quicksand', sans-serif; font-size: 0.9rem; color: #4a4a48; }
.qodef-col--sidebar a { color: #46534a; }
.qodef-col--sidebar a:hover { color: #6a141d; }

/* ---------- Categorietegels op /webshop/ ----------
   De titels stonden als witte tekst rechtstreeks op de foto, wat op lichte
   plekken onleesbaar werd. Een donker verloop áchter de tekst lost dat op
   zonder de foto's zelf doffer te maken. De selectors zijn extra specifiek:
   de widget zet zijn eigen <style> in de pagina, ná dit stylesheet. */
.pp-cats .pp-cat::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(29, 29, 27, 0.15) 0%, rgba(29, 29, 27, 0.45) 55%, rgba(29, 29, 27, 0.7) 100%);
	pointer-events: none;
}
.pp-cats .pp-cat img { opacity: 0.85; }
.pp-cats .pp-cat .pp-cat-inner { position: relative; z-index: 2; }
.pp-cats .pp-cat .pp-cat-title {
	color: #fff;
	text-shadow: 0 2px 14px rgba(20, 22, 20, 0.75), 0 1px 3px rgba(20, 22, 20, 0.6);
}
.pp-cats .pp-cat .pp-cat-sub {
	color: #f3f4f0;
	text-shadow: 0 1px 10px rgba(20, 22, 20, 0.75);
}
.pp-cats .pp-cat:hover::after {
	background: linear-gradient(180deg, rgba(70, 83, 74, 0.25) 0%, rgba(70, 83, 74, 0.5) 55%, rgba(29, 29, 27, 0.72) 100%);
}

/* ---------- Contact page (Elementor page 3367) ---------- */
.page-id-3367 #qodef-page-outer { background: #faf8f3; }

/* Strip ONLY the legacy bordeaux (adres) and mauve (instagram) section
   backgrounds — all other sections keep their Elementor-managed backgrounds
   (openingsuren is designed by Tom in Elementor) */
.page-id-3367 section.elementor-element-475087e,
.page-id-3367 section.elementor-element-7e0aac3,
.page-id-3367 :is(.elementor-element-475087e, .elementor-element-7e0aac3) .elementor-column .elementor-widget-wrap {
	background: transparent !important;
	background-image: none !important;
}
.page-id-3367 :is(.elementor-element-475087e, .elementor-element-7e0aac3) .elementor-background-overlay { display: none !important; }

/* Intro + openingsuren: soft green band with the white card floating on it;
   drop the empty spacer column */
/* Openingsuren section (566c25b): NO background/layout overrides — Tom
   designs this section directly in Elementor (photo column left, green
   column right); earlier band/hide rules were blocking his edits. */
/* Contact/NAP section at the bottom duplicates the site footer — hide it */
.page-id-3367 .elementor-element-74f4f84 { display: none !important; }

/* Openingsuren text widget: typography only (no card/background — the
   column's Elementor background shows through) */
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac {
	font-family: 'Quicksand', sans-serif;
	line-height: 1.85;
}
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac a { color: #6a141d; }
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac h4 {
	font-family: 'Playfair Display', serif;
	color: #46534a;
	font-size: 1.5rem;
	margin: 1.6rem 0 0.9rem;
}
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac h4:after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin-top: 10px;
}
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac table { width: 100%; border-collapse: collapse; }
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac td { padding: 10px 6px; border-bottom: 1px solid #eceae4; }
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac td:first-child { font-weight: 600; color: #46534a; }
/* De laatste rij van de openingsurentabel was integraal cursief en bordeaux
   gezet, bedoeld voor de notitie "of na afspraak". Op de homepage eindigt de
   tabel echter bij zaterdag, waardoor die dag er anders uitzag dan de rest.
   De notitieregel bestaat uit één cel, de dagen uit drie — vandaar
   td:only-child. */
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac tr:last-child td { border-bottom: 0; }
:is(.page-id-3367, .page-id-3411) .elementor-element-cbebcac tr:last-child td:only-child { font-style: italic; color: #6a141d; }

/* Section headings: Playfair + bordeaux accent line */
.page-id-3367 .elementor-heading-title { font-family: 'Playfair Display', serif !important; color: #46534a !important; text-align: center; }
:is(.page-id-3367, .page-id-3411) h2.elementor-heading-title { font-size: 2rem; margin: 46px 0 8px; }
:is(.page-id-3367, .page-id-3411) h2.elementor-heading-title:after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 14px auto 0;
}

/* Address + map card (color !important: the widget carries white text from
   the old bordeaux-band design, via higher-specificity Elementor CSS) */
:is(.page-id-3367, .page-id-3411) .elementor-element-c4a8ef0,
:is(.page-id-3367, .page-id-3411) .elementor-element-c4a8ef0 p { text-align: center; font-family: 'Quicksand', sans-serif; color: #4a4a48 !important; }
/* Routebeschrijving: standard framed button on its own line */
:is(.page-id-3367, .page-id-3411) .elementor-element-c4a8ef0 a {
	display: inline-block;
	margin-top: 16px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #6a141d !important;
	text-decoration: none;
	padding: 13px 30px;
	background-color: transparent;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
:is(.page-id-3367, .page-id-3411) .elementor-element-c4a8ef0 a:hover {
	color: #46534a !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}
/* the em-dash before the link belongs to the sentence, not the button */
:is(.page-id-3367, .page-id-3411) .elementor-element-c4a8ef0 p { line-height: 1.9; }
:is(.page-id-3367, .page-id-3411) .elementor-element-808c194 iframe {
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 22px 44px -28px rgba(70, 83, 74, 0.4);
	margin-top: 18px;
}

/* Newsletter: dark green panel, pill form (beats the strip rule above and
   the section's old photo background) */
:is(.page-id-3367, .page-id-3411) section.elementor-element-364e4e7 {
	background: #46534a !important;
	background-image: none !important;
	border-radius: 20px;
	overflow: hidden; /* clip square inner layers (bg overlay) to the radius */
	margin: 56px auto;
	padding: 50px 24px;
	max-width: 1100px;
}
:is(.page-id-3367, .page-id-3411) section.elementor-element-364e4e7 .elementor-background-overlay { display: none !important; }
/* op gsm liep de groene kaart tot tegen de schermranden: geef ze links en
   rechts lucht en houd de tekst binnen de kaart */
@media (max-width: 767px) {
	:is(.page-id-3367, .page-id-3411) section.elementor-element-364e4e7 {
		margin: 40px 18px !important;
		padding: 42px 22px !important;
		border-radius: 16px;
	}
	:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 h2.elementor-heading-title {
		font-size: 1.9rem !important;
		line-height: 1.15 !important;
	}
	:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 > .elementor-container { padding: 0; }
}
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 h2.elementor-heading-title { color: #fff !important; margin-top: 0; }
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 h2.elementor-heading-title:after { background: #cabebb; }
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 p { color: #e8e8e4; text-align: center; font-family: 'Quicksand', sans-serif; }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup { max-width: 520px; margin: 0 auto; text-align: center; font-family: 'Quicksand', sans-serif; }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup br { display: none; }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup label {
	color: #cabebb;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email'] {
	width: 100%;
	padding: 14px 22px;
	border-radius: 0;
	border: 1px solid rgba(255, 255, 255, 0.65);
	background: transparent;
	color: #fff;
	font-family: 'Quicksand', sans-serif;
	margin-top: 12px;
	box-sizing: border-box;
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email']::placeholder { color: rgba(255, 255, 255, 0.7); }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email']:focus {
	outline: none;
	border-color: #cabebb;
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='submit'] {
	margin-top: 18px;
	background-color: transparent;
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 13px 32px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	cursor: pointer;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='submit']:hover {
	color: #cabebb;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}
/* mobile: field and button stack full width, frame stays intact */
@media (max-width: 640px) {
	:is(.page-id-3367, .page-id-3411) #mc_embed_signup { padding: 0 6px; }
	:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email'] {
		max-width: 100%;
		font-size: 16px; /* stops iOS zoom-on-focus */
	}
	:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='submit'] {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 16px auto 0;
		padding: 14px 18px;
		letter-spacing: 0.12em;
		white-space: nowrap;
	}
}

/* Contact details + socials */
.page-id-3367 .elementor-element-74f4f84 { text-align: center; font-family: 'Quicksand', sans-serif; }
.page-id-3367 .elementor-element-74f4f84 h4.elementor-heading-title { font-size: 1.5rem; }
.page-id-3367 .elementor-element-9b1efff { color: #4a4a48; line-height: 1.9; }
.page-id-3367 .elementor-element-9b1efff a { color: #6a141d; }
.page-id-3367 .elementor-social-icon { background-color: #46534a !important; transition: background-color 0.25s ease; }
.page-id-3367 .elementor-social-icon:hover { background-color: #6a141d !important; }

/* ---------- Homepage (Elementor page 3411, copy of the original page 10;
   hero section 81bd57c is deliberately left untouched) ---------- */
.page-id-3411 #qodef-page-outer { background: #faf8f3; }
/* full-width canvas instead of the theme's 1100px boxed grid — sections
   manage their own inner widths */
.page-id-3411 #qodef-page-inner {
	width: 100% !important;
	max-width: 100% !important;
}

/* Section headings on the homepage: Playfair, dark green (the h2 size/accent
   rules are shared with the contact page via the :is() selectors) */
.page-id-3411 h2.elementor-heading-title {
	font-family: 'Playfair Display', serif !important;
	color: #46534a !important;
	text-align: center;
}

/* Webshop / blog / over-trio: the columns carry their own background photos —
   rounded photo tiles with a readable bottom zone. !important throughout:
   Elementor prints its inline widget CSS after this sheet and wins every
   specificity tie otherwise. */
.page-id-3411 .elementor-element-5912dc8 { padding: 45px 20px 20px; }
.page-id-3411 .elementor-element-5912dc8 .elementor-column {
	background: transparent !important;
	border-radius: 18px !important;
	overflow: hidden !important;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-column .elementor-widget-wrap {
	border-radius: 18px !important;
	overflow: hidden !important;
	position: relative !important;
	min-height: 360px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 30px 24px 36px !important;
	margin: 10px !important;
	box-shadow: 0 20px 40px -26px rgba(29, 29, 27, 0.5);
	text-align: center;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-column:hover .elementor-widget-wrap {
	box-shadow: 0 24px 46px -24px rgba(29, 29, 27, 0.6);
	transform: translateY(-4px);
}
/* the old design's heavy full-tile dark overlay made everything unreadable —
   soften it and rely on our bottom gradient instead */
/* light wash over the tile photos so the white text keeps its contrast
   without the photos going dark */
.page-id-3411 .elementor-element-5912dc8 .elementor-background-overlay {
	display: block !important;
	background: #46534a !important;
	background-image: none !important;
	opacity: 0.28 !important;
}
/* the original tile backgrounds are greyscale page-screenshots — swap in
   colorful brand photos (webshop: wine by the fire, blog: Piemonte village,
   over: the huiskamerboetiek entrance) */
.page-id-3411 .elementor-element-ac52480 .elementor-motion-effects-layer {
	background-image: url('/wp-content/themes/bootstrap-assets/img/sfeer_wijnen_piemonte.jpg') !important;
}
.page-id-3411 .elementor-element-977ff2e .elementor-motion-effects-layer {
	background-image: url('/wp-content/themes/bootstrap-assets/img/homepage/sfeerfoto.jpg') !important;
}
.page-id-3411 .elementor-element-ff16cc2 .elementor-motion-effects-layer {
	background-image: url('/wp-content/themes/bootstrap-assets/img/huiskamerboetiek2.jpg') !important;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-column .elementor-widget-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(70, 83, 74, 0) 45%, rgba(70, 83, 74, 0.75) 100%);
	pointer-events: none;
	z-index: 0;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-widget { position: relative; z-index: 1; }
.page-id-3411 .elementor-element-5912dc8 .elementor-widget-heading h2.elementor-heading-title {
	color: #fff !important;
	font-size: 1.5rem !important;
	margin: 0 0 4px !important;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-widget-heading h2.elementor-heading-title:after { background: #cabebb !important; margin: 12px auto 0; }
/* trio buttons: winkelmand language, white variant with the drawn-frame
   hover animation */
.page-id-3411 .elementor-element-5912dc8 .elementor-button {
	background-color: transparent !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 28px !important;
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.175em !important;
	text-transform: uppercase !important;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff) !important;
	background-repeat: no-repeat !important;
	background-position: left top, right top, left bottom, right bottom, left top, right top !important;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100% !important;
	transition: background-size 1s ease, color 0.2s ease-out !important;
}
.page-id-3411 .elementor-element-5912dc8 .elementor-button:hover {
	color: #cabebb !important;
	background-color: transparent !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100% !important;
}

/* Cart / checkout / account pages: content width + breathing room above the
   footer (the global #qodef-page-inner padding reset left them at zero) */
.woocommerce-cart #qodef-page-inner,
.woocommerce-checkout #qodef-page-inner,
.woocommerce-account #qodef-page-inner {
	padding: 30px 40px 90px;
	width: min(1300px, 100%);
	margin: 0 auto;
}

/* Strip the old bordeaux/mauve backgrounds behind adres + instagram */
.page-id-3411 section.elementor-element-475087e,
.page-id-3411 section.elementor-element-7e0aac3 {
	background: transparent !important;
	background-image: none !important;
}
.page-id-3411 section.elementor-element-475087e .elementor-background-overlay,
.page-id-3411 section.elementor-element-7e0aac3 .elementor-background-overlay { display: none !important; }

/* Map: no homepage-specific wrapper — identical rendering to the contact
   page via the shared iframe card rule */

/* Kill the theme's underline-paint on heading titles (rendered as a line
   through the text) */
.page-id-3411 .elementor-heading-title,
.page-id-3411 .elementor-heading-title a,
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 .elementor-heading-title {
	background-image: none !important;
	text-decoration: none !important;
}

/* About Annick: keep the background photo but lift it with a light ivory
   wash (restyled overlay) — text flips to dark for contrast */
.page-id-3411 .elementor-element-5ae05b5 { padding: 45px 20px; }
.page-id-3411 .elementor-element-5ae05b5 .elementor-background-overlay {
	display: block !important;
	background: #46534a !important;
	background-image: none !important;
	opacity: 0.55 !important;
}
.page-id-3411 .elementor-element-5ae05b5 .elementor-widget-text-editor,
.page-id-3411 .elementor-element-5ae05b5 .elementor-widget-text-editor p,
.page-id-3411 .elementor-element-5ae05b5 .elementor-widget-text-editor span,
.page-id-3411 .elementor-element-5ae05b5 .elementor-widget-text-editor strong {
	color: #eceae4 !important;
}
.page-id-3411 .elementor-element-5ae05b5 img {
	border-radius: 20px;
	box-shadow: 0 22px 44px -28px rgba(70, 83, 74, 0.4);
}
.page-id-3411 .elementor-element-5ae05b5 h3 {
	font-family: 'Playfair Display', serif;
	color: #46534a;
}
.page-id-3411 .elementor-element-5ae05b5 h2.elementor-heading-title {
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.6;
	max-width: 860px;
	margin: 20px auto 8px;
	color: #f4f1ec !important; /* light text on the dark green-washed photo */
}
.page-id-3411 .elementor-element-5ae05b5 h3 { color: #cabebb !important; }
.page-id-3411 .elementor-element-5ae05b5 h2.elementor-heading-title:after { display: none; }
.page-id-3411 .elementor-element-5ae05b5 .elementor-widget-text-editor {
	font-family: 'Quicksand', sans-serif;
	line-height: 1.9;
	color: #4a4a48;
	max-width: 860px;
	margin: 0 auto;
}

/* Favoriete wijnen: light grey band; inner layers stay transparent so it is
   one single tone behind the cards */
.page-id-3411 .elementor-element-12014b0 { padding: 40px 20px 55px; }
.page-id-3411 section.elementor-element-12014b0 {
	/* same ivory as the category pages so the cards render identically */
	background: #faf8f3 !important;
	background-image: none !important;
}
.page-id-3411 .elementor-element-12014b0 section,
.page-id-3411 .elementor-element-12014b0 .elementor-column .elementor-widget-wrap {
	background: transparent !important;
	background-image: none !important;
}
.page-id-3411 .elementor-element-12014b0 .elementor-background-overlay { display: none !important; }

/* Category quick links (Mousserend/Rode/Witte/Rosé): dark green panels with
   a wine-glass icon, white Playfair titles, bordeaux hover. Their WC images
   are placeholders — hidden; the whole tile is one clean block. */
.page-id-3411 div.product-category.qodef-grid-item {
	background: linear-gradient(160deg, #46534a 0%, #39443c 100%) !important;
	border-radius: 16px;
	overflow: hidden;
	padding: 0 !important;
	text-align: center;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.page-id-3411 div.product-category.qodef-grid-item:hover {
	background: linear-gradient(160deg, #6a141d 0%, #521018 100%) !important;
	transform: translateY(-4px);
	box-shadow: 0 20px 38px -24px rgba(29, 29, 27, 0.5);
}
.page-id-3411 .product-category .qodef-e-img-holder { display: none !important; }
.page-id-3411 .product-category > a,
.page-id-3411 .product-category a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 185px;
	padding: 24px 18px;
	text-decoration: none;
}
.page-id-3411 .product-category a::before {
	content: '\f4e3'; /* fa wine-glass */
	font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
	font-weight: 900;
	font-size: 1.4rem;
	color: #cabebb;
	margin-bottom: 14px;
}
.page-id-3411 .product-category h5.woocommerce-loop-category__title {
	font-family: 'Playfair Display', serif !important;
	font-size: 1.2rem;
	line-height: 1.4;
	color: #fff !important;
	background: transparent !important;
	margin: 0;
	padding: 0;
}

/* Trio section: drop its old dark band (tiles carry their own photos) */
.page-id-3411 section.elementor-element-5912dc8 {
	background: transparent !important;
	background-image: none !important;
}

/* Newsletter panel (homepage + contact): light green (lichtgroen) variant */
:is(.page-id-3367, .page-id-3411) section.elementor-element-364e4e7 { background: #ced7ca !important; }
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 h2.elementor-heading-title { color: #46534a !important; }
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 h2.elementor-heading-title:after { background: #6a141d !important; }
:is(.page-id-3367, .page-id-3411) .elementor-element-364e4e7 p { color: #3f4a42 !important; }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup label { color: #46534a !important; }
/* panel is lichtgroen → dark text/border on the transparent field */
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email'] {
	border-color: rgba(70, 83, 74, 0.5);
	color: #46534a;
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email']::placeholder { color: rgba(70, 83, 74, 0.6); }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='email']:focus { border-color: #6a141d; }
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='submit'] {
	color: #6a141d;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
}
:is(.page-id-3367, .page-id-3411) #mc_embed_signup input[type='submit']:hover { color: #46534a; }

/* ---------- Wijnhuis pages (producer portraits) ---------- */
.pp-wijnhuis #qodef-page-outer { background: #faf8f3; }
.pp-hero-eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #cabebb;
	margin-bottom: 10px;
}
/* wide canvas instead of the theme's 1100px box */
.pp-wijnhuis #qodef-page-inner {
	padding: 0 40px 60px;
	width: min(1700px, 100%);
	max-width: 1700px;
	margin: 0 auto;
}
.pp-wijnhuis .qodef-page-content-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 55px 24px 70px;
}
.pp-wijnhuis .wp-block-paragraph {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.02rem;
	line-height: 1.9;
	color: #4a4a48;
}
.pp-wijnhuis .wp-block-paragraph strong { color: #46534a; }
/* producer motto ends the text — give quotes a touch of Playfair */
.pp-wijnhuis .tiled-gallery__item img { border-radius: 12px; }
.pp-wijnhuis .wp-block-jetpack-tiled-gallery { margin-top: 40px; }

/* Tegelgalerij zonder Jetpack (2026-08-11).
   De zes producentenpagina's gebruiken het blok wp:jetpack/tiled-gallery. De
   opgeslagen HTML bevat de kolombreedtes al als inline flex-basis; alleen de
   flex-opmaak kwam uit Jetpacks eigen stylesheet. Nu Jetpack eruit is, staat
   die opmaak hier. Hoogtes worden bewust NIET vastgezet: de foto's houden hun
   eigen verhouding, zodat er niets scheefgetrokken of afgesneden wordt. */
.wp-block-jetpack-tiled-gallery .tiled-gallery__gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wp-block-jetpack-tiled-gallery .tiled-gallery__row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.wp-block-jetpack-tiled-gallery .tiled-gallery__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.wp-block-jetpack-tiled-gallery .tiled-gallery__item {
	margin: 0;
}
.wp-block-jetpack-tiled-gallery .tiled-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 700px) {
	.wp-block-jetpack-tiled-gallery .tiled-gallery__row {
		flex-direction: column;
	}
	.wp-block-jetpack-tiled-gallery .tiled-gallery__col {
		flex-basis: auto !important;
	}
}
/* CTA button: winkelmand style */
.pp-wijnhuis .wp-block-button__link {
	display: inline-block;
	font-family: 'Quicksand', sans-serif !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.175em !important;
	text-transform: uppercase !important;
	color: #6a141d !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 13px 30px !important;
	background-color: transparent !important;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a) !important;
	background-repeat: no-repeat !important;
	background-position: left top, right top, left bottom, right bottom, left top, right top !important;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100% !important;
	transition: background-size 1s ease, color 0.2s ease-out !important;
}
.pp-wijnhuis .wp-block-button__link:hover {
	color: #46534a !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100% !important;
}
.pp-wijnhuis .wp-block-buttons { margin: 30px 0 10px; }

/* Wijnhuizen grid ([pp_wijnhuizen] — overview page + homepage friends) */
.pp-wh-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	max-width: 1300px;
	margin: 10px auto 0;
}
@media (max-width: 1100px) { .pp-wh-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .pp-wh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pp-wh-grid { grid-template-columns: 1fr; } }
.pp-wh-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%);
	border-radius: 16px;
	overflow: hidden;
	padding: 22px 16px 24px;
	text-decoration: none;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-wh-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 38px -24px rgba(70, 83, 74, 0.45);
}
.pp-wh-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	width: 100%;
	overflow: hidden;
	margin-bottom: 14px;
}
.pp-wh-img img {
	height: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
}
.pp-wh-name {
	font-family: 'Playfair Display', serif;
	font-size: 1.1rem;
	line-height: 1.35;
	color: #46534a;
	margin-bottom: 6px;
}
.pp-wh-card:hover .pp-wh-name { color: #6a141d; }
.pp-wh-more {
	display: inline-block;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #6a141d;
	margin-top: auto;
	padding: 11px 20px;
	background-color: transparent;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
.pp-wh-card:hover .pp-wh-more {
	color: #46534a;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}
/* "Ontdek alle wijnhuizen" button under the grid (winkelmand style) */
.pp-wh-all-wrap { text-align: center; margin-top: 36px; }
.pp-wh-all {
	display: inline-block;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #6a141d;
	text-decoration: none;
	padding: 13px 30px;
	background-color: transparent;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
.pp-wh-all:hover {
	color: #46534a;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}
/* the overview page uses the full wide canvas */
.pp-wijnhuizen-overview .qodef-page-content-section { max-width: none; }
.pp-wijnhuizen-overview .pp-wh-grid { max-width: none; }

/* ---------- Melding-popup (WP Popups) ----------
   Zelfde kaartstijl als de rest van de site: ivoorwit paneel, bordeaux
   bovenrand, Playfair-titel, groene sluitknop. */
/* de sluier achter de popup blijft licht, zodat de site erdoorheen te zien
   is; het paneel zelf is glasachtig (transparant + blur) */
/* geen sluier: de site blijft volledig zichtbaar achter de popup */
.spu-bg { background: transparent !important; backdrop-filter: none !important; }
.spu-box {
	/* weinig blur: die maakte het paneel melkachtig, waardoor het ondanks
	   de transparantie tóch dicht oogde */
	background: rgba(255, 253, 248, 0.55) !important;
	backdrop-filter: blur(6px) saturate(1.1);
	-webkit-backdrop-filter: blur(6px) saturate(1.1);
	border-radius: 20px !important;
	border-top: 4px solid #6a141d !important;
	box-shadow: 0 30px 60px -30px rgba(20, 23, 21, 0.75) !important;
	overflow: hidden;
	padding: 0 !important;
}
.spu-box .spu-container { padding: 40px 46px 38px !important; }
.spu-box .spu-content {
	font-family: 'Quicksand', sans-serif;
	color: #4a4a48;
	text-align: center;
}
/* logo boven de tekst */
.spu-box .spu-content::before {
	content: '';
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 18px;
	background: url('/wp-content/uploads/2026/07/purapassione-logo-black.png') center / contain no-repeat;
}
.spu-box .spu-content h2 {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-size: 1.5rem !important;
	line-height: 1.35 !important;
	color: #3c463f !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 4px !important;
	/* lichte gloed: houdt de tekst leesbaar nu er nauwelijks nog dekking is */
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 255, 255, 0.8);
}
.spu-box .spu-content h3 {
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	color: #4a5450 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 18px 0 0 !important;
	text-shadow: 0 1px 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.8);
}
.spu-box .spu-content h2 + h3::before,
.spu-box .spu-content h3::before {
	content: '';
	display: block;
	width: 54px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 0 auto 16px;
}
.spu-box .spu-content p { margin: 8px 0 0; line-height: 1.7; }
.spu-box .spu-close {
	color: #46534a !important;
	opacity: 0.55;
	font-size: 26px !important;
	right: 16px !important;
	top: 10px !important;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.spu-box .spu-close:hover { opacity: 1; color: #6a141d !important; }
@media (max-width: 560px) {
	.spu-box .spu-container { padding: 30px 22px 28px !important; }
	.spu-box .spu-content h2 { font-size: 1.25rem !important; }
}

/* ---------- Leeftijdscontrole (age gate) ----------
   Het plugin-uiterlijk (roze waas + wit blokje) vervangen door de
   wijngaard uit Piemonte met een donkergroene waas en een echte kaart. */
:root {
	--ag-background-color: rgba(70, 83, 74, 0.72) !important;
	--ag-form-background: transparent !important;
	--ag-text-color: #3f3f3d !important;
	--ag-blur: 3px !important;
}
.age-gate__background-color {
	background: linear-gradient(180deg, rgba(70, 83, 74, 0.7) 0%, rgba(45, 54, 48, 0.86) 100%) !important;
}
.age-gate__background {
	background: url('/wp-content/uploads/2026/07/barolo.webp') center / cover no-repeat !important;
	opacity: 1 !important;
}

/* de kaart zelf */
.age-gate .age-gate__form {
	background: #fffdf8;
	border-radius: 20px;
	padding: 40px 44px 34px !important;
	max-width: 440px;
	margin: 0 auto;
	box-shadow: 0 30px 60px -30px rgba(20, 23, 21, 0.75);
	border-top: 4px solid #6a141d;
	text-align: center;
	animation: pp-ag-in 0.5s cubic-bezier(0.33, 0.52, 0.05, 0.96) both;
}
@keyframes pp-ag-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.age-gate .age-gate__form { animation: none; }
}

/* logo boven de titel */
.age-gate__heading::before {
	content: '';
	display: block;
	width: 74px;
	height: 74px;
	margin: 0 auto 16px;
	background: url('/wp-content/uploads/2026/07/purapassione-logo-black.png') center / contain no-repeat;
}
.age-gate__heading-title {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-size: 1.65rem !important;
	line-height: 1.25 !important;
	color: #46534a !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 4px !important;
}
.age-gate__heading::after {
	content: '';
	display: block;
	width: 54px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 14px auto 0;
}

.age-gate__challenge {
	font-family: 'Quicksand', sans-serif !important;
	font-size: 1.02rem !important;
	color: #4a4a48 !important;
	margin: 22px 0 20px !important;
	line-height: 1.6;
}

/* knoppen: ja = gevuld bordeaux, nee = fijne omlijning */
.age-gate__buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.age-gate__submit {
	font-family: 'Quicksand', sans-serif !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 14px 30px !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.age-gate__submit--yes {
	background: #6a141d !important;
	border: 1px solid #6a141d !important;
	color: #fff !important;
}
.age-gate__submit--yes:hover { background: #46534a !important; border-color: #46534a !important; }
.age-gate__submit--no {
	background: transparent !important;
	border: 1px solid rgba(70, 83, 74, 0.45) !important;
	color: #46534a !important;
}
.age-gate__submit--no:hover { border-color: #46534a !important; background: rgba(70, 83, 74, 0.06) !important; }

/* "onthoud me" */
.age-gate__remember-wrapper { margin-top: 20px !important; }
.age-gate__remember {
	font-family: 'Quicksand', sans-serif !important;
	font-size: 0.85rem !important;
	color: #6d6d6a !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.age-gate__remember-field { accent-color: #6a141d; width: 16px; height: 16px; }
.age-gate__errors { font-family: 'Quicksand', sans-serif; color: #6a141d; font-size: 0.9rem; }

@media (max-width: 520px) {
	.age-gate .age-gate__form { padding: 30px 22px 26px !important; margin: 0 16px; }
	.age-gate__buttons .age-gate__submit { flex: 1 1 auto; }
}

/* Header cart/login menu item */
.pp-menu-cart .pp-cart-count {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background: #6a141d;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	margin-left: 4px;
}
.pp-menu-cart i { font-size: 0.9em; }

/* ---------- Maandpakket section (webshop landing) ---------- */
.pp-pakket-section {
	background: linear-gradient(180deg, #dfe6dd 0%, #e9ede6 100%) !important;
	padding: 60px 20px 70px !important;
}
.pp-pakket-section .elementor-heading-title {
	font-family: 'Playfair Display', serif !important;
	color: #46534a !important;
	font-size: 2rem;
	text-align: center;
	margin-bottom: 4px;
}
.pp-pakket-section .elementor-heading-title:after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background: #6a141d;
	border-radius: 2px;
	margin: 14px auto 0;
}
.pp-pakket {
	max-width: 1100px;
	margin: 26px auto 0;
	background: #fff;
	border-radius: 20px;
	padding: 46px 50px;
	box-shadow: 0 22px 44px -28px rgba(70, 83, 74, 0.4);
	font-family: 'Quicksand', sans-serif;
	color: #4a4a48;
	line-height: 1.85;
}
.pp-pakket-sub {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 1.35rem;
	color: #6a141d;
	text-align: center;
	margin: 0 0 30px;
}
.pp-pakket-top {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 36px;
}
.pp-pakket-img img { width: 100%; height: auto; border-radius: 16px; }
.pp-pakket-wines {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 40px;
	margin: 10px 0 34px;
	padding-top: 30px;
	border-top: 1px solid #eceae4;
}
.pp-pakket-wine h4 {
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	color: #46534a;
	margin: 0 0 6px;
}
.pp-pakket-wine h4 span { color: #6a141d; white-space: nowrap; }
.pp-pakket-wine h4 a { color: #46534a; text-decoration: none; transition: color 0.2s ease; }
.pp-pakket-wine h4 a:hover { color: #6a141d; }
.pp-pakket-wine p { margin: 0; font-size: 0.95rem; line-height: 1.75; }
.pp-pakket-outro { text-align: center; max-width: 760px; margin: 0 auto 10px; }
.pp-pakket-price {
	font-family: 'Playfair Display', serif;
	font-size: 1.6rem;
	color: #6a141d;
	text-align: center;
	margin: 14px 0 6px;
}
.pp-pakket-note { text-align: center; font-size: 0.95rem; color: #6d6d6a; margin: 0 0 8px; }
.pp-pakket-cta { text-align: center; margin-top: 22px; }
@media (max-width: 900px) {
	.pp-pakket { padding: 30px 22px; }
	.pp-pakket-top, .pp-pakket-wines { grid-template-columns: 1fr; }
}

/* Single blog post: breathing room between the fixed header and the title
   (the site-wide #qodef-page-inner padding reset leaves it flush) */
.single-post #qodef-page-inner { padding-top: 50px; }
.single-post .qodef-blog.qodef--single h1.qodef-e-title { margin-top: 0; }

/* Blog titles in the same voice as the homepage section titles: Playfair,
   regular weight, no uppercase — both in the listing and on the article. */
.pp-blog article.pp-post h2,
.pp-blog article.pp-post h2 a,
.single-post .qodef-blog h1.qodef-e-title,
.single-post h1.entry-title,
.blog h1.qodef-e-title,
.archive .qodef-blog h2.qodef-e-title,
.archive .qodef-blog h2.qodef-e-title a,
.single-post .qodef-blog h2,
.single-post .qodef-blog h3 {
	font-family: 'Playfair Display', serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.pp-blog article.pp-post h2 a { color: #46534a !important; }
.pp-blog article.pp-post h2 a:hover { color: #6a141d !important; }
.single-post .qodef-blog h1.qodef-e-title { color: #46534a !important; line-height: 1.2; }

/* Blog sidebar (socials + "Blijf up-to-date"): full card treatment — the
   white box is the sidebar itself, not the inner newsletter div */
.pp-blog aside.pp-blog-sidebar {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e9ede6 100%);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.35);
}
/* newsletter submit: winkelmand button language instead of the solid block */
.pp-blog .pp-blog-sidebar input[type='submit'] {
	background-color: transparent;
	color: #6a141d;
	border: 0;
	border-radius: 0;
	padding: 12px 26px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	cursor: pointer;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
.pp-blog .pp-blog-sidebar input[type='submit']:hover {
	background-color: transparent;
	color: #46534a;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}

/* Blog listing cards: same rounded-card language as the product cards */
/* titel + tekst onder de foto staan op een doorschijnend paneel: de kaart
   zelf is deels transparant, zodat de ivoren pagina erdoorheen schemert.
   (wit-op-wit gaf geen zichtbaar verschil) */
.pp-blog article.pp-post .pp-post-body {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(233, 237, 230, 0.45) 100%);
}

.pp-blog article.pp-post {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(233, 237, 230, 0.6) 100%) !important;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 36px -26px rgba(70, 83, 74, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-blog article.pp-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 38px -24px rgba(70, 83, 74, 0.45);
}
/* Lees meer: winkelmand button style with the drawn-frame hover animation */
.pp-blog article.pp-post .pp-more {
	display: inline-block;
	margin-top: 14px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	color: #6a141d;
	border: 0;
	border-bottom: 0;
	border-radius: 0;
	padding: 12px 24px;
	background-color: transparent;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
.pp-blog article.pp-post .pp-more:hover {
	color: #46534a;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}

/* Reviews as own section below the product tabs (pp_reviews_section) */
.pp-reviews-section { margin: 60px 0 20px; padding-top: 40px; border-top: 1px solid #e4e4e4; }
.pp-reviews-section .woocommerce-Reviews-title,
.pp-reviews-section .comment-reply-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #46534a; display: block; margin-bottom: 1rem; }

/* Site footer: 4-column brand footer on a warm dark-green gradient with a
   bordeaux top accent. ID prefix on the color rules: the theme styles footer
   text/links with #qodef-page-footer selectors that outrank plain classes. */
#qodef-page-footer {
	background:
		linear-gradient(180deg, rgba(70, 83, 74, 0.6) 0%, rgba(70, 83, 74, 0.78) 100%),
		url('/wp-content/uploads/2026/07/barolo.webp') center / cover no-repeat !important;
	border-top: 3px solid #6a141d;
}
#qodef-page-footer-top-area { background: transparent !important; padding: 60px 40px 20px; }
/* De voettekst zit sinds 2026-08-05 in de VIER widgetzones van het thema
   (Footer Top Area kolom 1-4) in plaats van in één HTML-blok; het raster komt
   dus van het thema. Elke widget houdt zijn eigen .pp-footer-block-wrapper,
   zodat de opmaak hieronder ongewijzigd blijft werken. De juridische regel en
   de credits staan in de Footer Bottom Area (2 kolommen). */
#qodef-page-footer .pp-footer-block {
	text-align: left;
}
/* De merkkolom mag breder dan de drie tekstkolommen. Het thema rekent met
   repeat(var(--qode-columns), minmax(0,1fr)) op .qodef-grid > .qodef-grid-inner
   — dat raster zit een niveau dieper dan #qodef-page-footer-top-area-inner,
   vandaar de volledige keten hieronder. Alleen op desktop: onder 1024px zet
   het thema zelf al 2 en onder 680px 1 kolom. */
@media (min-width: 1025px) {
	/* drie kolommen sinds de openingsuren uit de voettekst zijn gehaald;
	   de merkkolom blijft de breedste */
	#qodef-page-footer-top-area-inner .qodef-grid > .qodef-grid-inner {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}
#qodef-page-footer .pp-f-logo { max-height: 88px; width: auto; margin-bottom: 14px; }
#qodef-page-footer .pp-f-tagline {
	font-family: 'Playfair Display', serif !important;
	font-style: italic;
	color: #e6dcd9 !important;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 18px;
}
#qodef-page-footer .pp-footer-block h4 {
	color: #fff !important;
	font-family: 'Playfair Display', serif !important;
	font-size: 1.2rem;
	margin: 0 0 8px;
}
#qodef-page-footer .pp-footer-block h4:after {
	content: '';
	display: block;
	width: 34px;
	height: 2px;
	background: #cabebb;
	border-radius: 2px;
	margin: 10px 0 14px;
}
#qodef-page-footer .pp-footer-block p {
	color: #f1f3ef !important;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.92rem;
	line-height: 2;
	margin: 0;
}
#qodef-page-footer .pp-footer-block em { color: #cabebb; }
#qodef-page-footer .pp-footer-block a { color: #ffffff !important; text-decoration: none; transition: color 0.2s ease; }
#qodef-page-footer .pp-footer-block a:hover { color: #cabebb !important; }
#qodef-page-footer .pp-footer-social { margin-top: 4px; }
#qodef-page-footer .pp-footer-social a { color: #fff !important; font-size: 1.35rem; margin: 0 14px 0 0; }
#qodef-page-footer .pp-footer-social a:hover { color: #cabebb !important; }
#qodef-page-footer .pp-f-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: 46px;
	padding: 20px 0 6px;
	text-align: center;
	color: #eff1ed;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
#qodef-page-footer .pp-f-bottom a { color: #e6dcd9 !important; text-decoration: none; }
#qodef-page-footer .pp-f-bottom a:hover { color: #fff !important; text-decoration: underline; }
/* (de oude order/uitlijning van de onderbalk is vervallen: de twee helften
   zijn nu aparte widgetzones, zie onderaan dit bestand) */
@media (max-width: 640px) {
	#qodef-page-footer .pp-f-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 1024px) {
	#qodef-page-footer .pp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	#qodef-page-footer .pp-footer-grid { grid-template-columns: 1fr; text-align: center; }
	#qodef-page-footer .pp-footer-block h4:after { margin-left: auto; margin-right: auto; }
	#qodef-page-footer .pp-footer-social a { margin: 0 8px; }
}
.pp-footer-block { font-family: 'Quicksand', sans-serif; }
.pp-footer-block h4 { color: #fff; font-family: 'Playfair Display', serif; font-size: 1.5rem; margin: 0 0 1.5rem; }
.pp-footer-block p { color: #fff; line-height: 1.9; margin: 0 0 1.5rem; }
.pp-footer-block a { color: #cabebb; text-decoration: none; }
.pp-footer-block .pp-footer-social a { color: #fff; font-size: 1.4rem; margin: 0 12px; }
.pp-footer-block .pp-footer-social a:hover { color: #cabebb; }

/* Category hero banner on product archives */
.pp-cat-hero { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; text-align: center; background: #46534a; overflow: hidden; }
.pp-cat-hero > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.pp-cat-hero-inner { position: relative; z-index: 1; padding: 50px 20px; max-width: 760px; }
.pp-cat-hero-title { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1.15; }
.pp-cat-hero-desc { font-family: 'Quicksand', sans-serif; color: #eee; margin-top: 0.8rem; line-height: 1.7; }
@media (max-width: 680px) { .pp-cat-hero { min-height: 200px; } .pp-cat-hero-title { font-size: 1.9rem; } }
.pp-cat-hero-subs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.4rem; }
.pp-cat-sub-pill { font-family: 'Quicksand', sans-serif; font-size: 0.9rem; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 7px 18px; transition: background 0.2s ease, border-color 0.2s ease; }
.pp-cat-sub-pill:hover { background: #6a141d; border-color: #6a141d; color: #fff; }
.pp-pill-count { opacity: 0.65; font-size: 0.8em; margin-left: 3px; }

/* Archives: hide the plain default title (kept for SEO) */
.post-type-archive-product h1.qodef-m-title,
.tax-product_cat h1.qodef-m-title,
.tax-product_tag h1.qodef-m-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Image zoom on hover (card background/shadow/buttons live in the
   "Whole tile = one white card" block above) */
.qodef-woo-product-list .qodef-e-media-image { overflow: hidden; }
.qodef-woo-product-list .qodef-e-media-image img { transition: transform 0.45s ease; }
.qodef-woo-product-list .products .product:hover .qodef-e-media-image img { transform: scale(1.05); }

/* Free-shipping progress bar (cart + mini-cart) */
.pp-freeship { margin: 0 0 1.2rem; font-family: 'Quicksand', sans-serif; }
.pp-freeship p { margin: 0 0 8px; font-size: 0.95rem; color: #46534a; }
.pp-freeship-track { height: 8px; background: #ced7ca; overflow: hidden; }
.pp-freeship-fill { height: 100%; background: #6a141d; transition: width 0.4s ease; }

/* Shop breadcrumbs (below header on woo pages + winkel landing) */
.pp-breadcrumbs {
	padding: 14px 40px;
	margin-bottom: 40px;
	background: #f6f4f2;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.85rem;
	color: #999;
}
.pp-breadcrumbs a {
	color: #46534a;
	text-decoration: none;
}
.pp-breadcrumbs a:hover {
	color: #6a141d;
}
.pp-breadcrumbs .pp-bc-sep {
	color: #6a141d;
	margin: 0 2px;
}

/* Doorschijnende header: de balk laat de pagina eronder zien en wordt met
   een blur leesbaar gehouden. De customizer zet de kleur inline met een
   ID-selector, vandaar de dubbele selector + !important. */
.qodef-header--divided #qodef-page-header,
#qodef-page-header {
	background-color: rgb(70, 83, 74) !important;
	transition: background-color 0.3s ease;
}
/* Enkel de meegescrolde header wordt doorschijnend: dát is de toestand
   waarin de pagina eronder doorloopt. Bovenaan staat er niets achter de
   balk, dus daar blijft het volle donkergroen staan. Het thema zet bij het
   scrollen de klasse qodef-header--fixed-display op de body en maakt de
   header dan position:fixed. */
.qodef-header--fixed-display #qodef-page-header,
body.qodef-header--fixed-display.qodef-header--divided #qodef-page-header {
	background-color: rgba(70, 83, 74, 0.7) !important;
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
}
#qodef-page-mobile-header {
	background-color: rgb(70, 83, 74) !important;
	transition: background-color 0.3s ease;
}
/* zodra er gescrolld is loopt de pagina onder de balk door → doorschijnend.
   Het thema zet dan de klasse qodef-mobile-header--sticky op de body. */
.qodef-mobile-header--sticky #qodef-page-mobile-header {
	background-color: rgba(70, 83, 74, 0.75) !important;
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Kruisje om het mobiele menu te sluiten: het thema zet de geopende opener
   op zwart (color:#000) en de streepjes erven die kleur via currentColor.
   Op de donkergroene balk moet dat wit zijn. */
#qodef-page-mobile-header a.qodef-mobile-header-opener.qodef--opened,
#qodef-page-mobile-header .qodef-mobile-header-opener.qodef--opened {
	color: #fff !important;
}

/* Mobiele header blijft altijd bovenaan staan. Standaard schuift het thema
   hem weg (translateY(-100%)) en toont hem enkel weer bij omhoog scrollen;
   die verstop-animatie zetten we uit zodat het menu altijd bereikbaar is. */
@media (max-width: 1024px) {
	/* height: auto + min-height, want het uitgeklapte menu hangt ín deze
	   header; met een vaste hoogte zou het eronder buiten de gekleurde balk
	   vallen. De binnenste rij (logo + opener) houdt wél 84px. */
	#qodef-page-mobile-header {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 84px;
		transform: none !important;
		z-index: 1000;
	}
	.admin-bar #qodef-page-mobile-header { top: 46px; }
	/* ruimte onder de vaste balk zodat de inhoud er niet achter verdwijnt.
	   Het thema zet hier bij het scrollen een inline padding-top, vandaar
	   het !important. */
	#qodef-page-outer { padding-top: 84px !important; }
	#qodef-page-mobile-header #qodef-page-mobile-header-inner { height: 84px; }
	/* lange menu's blijven scrollbaar binnen het scherm */
	#qodef-page-mobile-header .qodef-mobile-header-navigation {
		max-height: calc(100vh - 84px);
		overflow-y: auto;
	}
}

/* Opengeklapt menu.
   Let op: het uitgeklapte menu is GEEN onderdeel van de gekleurde balk. Het
   thema zet het paneel absoluut onder de header (top:100%) mét een eigen
   witte achtergrond — daarom haalde het doorschijnend maken van de header
   zelf niets uit. De kleur moet op het paneel staan. */
#qodef-page-mobile-header .qodef-mobile-header-navigation {
	background-color: rgba(70, 83, 74, 0.7) !important;
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
	padding-bottom: 10px;
}
/* Uitklapmenu op desktop: zelfde glaslook als het mobiele menupaneel.
   Het thema geeft zowel het gewone uitklapmenu (li.qodef-menu-item--narrow ul)
   als het brede megamenu (.qodef-drop-down-second) een witte achtergrond met
   een beige rand; die worden hier doorschijnend donkergroen. */
.qodef-header-navigation ul li.qodef-menu-item--narrow ul,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second {
	background-color: rgba(70, 83, 74, 0.93) !important;
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
/* links stonden in zwart/donker op wit → licht op het groene paneel */
.qodef-header-navigation > ul > li.qodef-menu-item--narrow ul li > a,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li ul li > a {
	color: #cabebb !important;
}
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li > a {
	color: #ffffff !important;
}
.qodef-header-navigation > ul > li.qodef-menu-item--narrow ul li > a:hover,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li ul li > a:hover,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li > a:hover {
	color: #ffffff !important;
}

/* Instagram + Facebook onderaan het mobiele menu (pp_mobile_menu_socials) */
#qodef-page-mobile-header .qodef-mobile-header-navigation li.pp-mobile-socials {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 12px;
	padding: 20px 0 4px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
#qodef-page-mobile-header .qodef-mobile-header-navigation li.pp-mobile-socials a {
	display: inline-flex;
	color: #ffffff !important;
	opacity: 0.85;
	transition: opacity 0.2s ease, color 0.2s ease;
}
#qodef-page-mobile-header .qodef-mobile-header-navigation li.pp-mobile-socials a:hover {
	color: #cabebb !important;
	opacity: 1;
}

/* wat meer lucht tussen de menu-items (thema: 3px boven en onder) */
#qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li {
	padding: 10px 0 !important;
}
#qodef-page-mobile-header .qodef-mobile-header-navigation ul li ul li {
	padding: 5px 0 !important;
}
/* de menulinks stonden in donkerolijf op wit; op het groene paneel moeten
   ze licht zijn. De eerste regel is een vangnet zodat geen enkel element in
   het paneel donker blijft. */
#qodef-page-mobile-header .qodef-mobile-header-navigation,
#qodef-page-mobile-header .qodef-mobile-header-navigation * {
	color: #ffffff;
}
#qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li > a,
#qodef-page-mobile-header .qodef-mobile-header-navigation ul li .qodef-menu-item-arrow {
	color: #ffffff !important;
}
#qodef-page-mobile-header .qodef-mobile-header-navigation ul li ul li > a,
#qodef-page-mobile-header .qodef-mobile-header-navigation ul li ul li > a:before {
	color: rgba(255, 255, 255, 0.92) !important;
}
#qodef-page-mobile-header .qodef-mobile-header-navigation ul li ul li > a:hover,
#qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li > a:hover {
	color: #ffffff !important;
}
/* de balk zelf schemert mee zolang het menu openstaat, zodat balk en paneel
   één glasplaat vormen. pp_mobile_menu_body_class() zet de body-klasse; de
   :has()-variant vangt hetzelfde af zonder JS. */
body.pp-mobile-menu-open #qodef-page-mobile-header,
#qodef-page-mobile-header:has(.qodef-mobile-header-opener.qodef--opened) {
	background-color: rgba(70, 83, 74, 0.7) !important;
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Header logo: the customizer sets the logo link to 150px while the header
   is 100px, so the logo overflowed edge-to-edge. Contain it in the header
   and keep the image smaller than the bar (centered => even space above
   and below). Extra `a` in the selector outranks the customizer inline CSS. */
#qodef-page-header a.qodef-header-logo-link {
	height: 100%;
	margin: 0;
}
#qodef-page-header a.qodef-header-logo-link img {
	max-height: 86px;
}
/* mobile header sits on the dark green bar → use the white (negative) logo.
   The customizer image is swapped for a background image; the original img
   is hidden, so the link carries the size itself. */
#qodef-page-mobile-header .qodef-mobile-header-logo-link {
	display: inline-block !important;
	width: 52px;
	height: 52px;
	padding: 16px 10px !important;
	box-sizing: content-box;
	background: url('/wp-content/uploads/2026/07/purapassione-logo-white.png') center / contain no-repeat;
	background-origin: content-box;
}
#qodef-page-mobile-header .qodef-mobile-header-logo-link img { display: none !important; }
.qodef-header-logo-link img,
.qodef-mobile-header-logo-link img {
	max-height: 100%;
	width: auto;
}

/* Product filters (YITH Ajax Filter): compact white panel, small caps
   titles, scrollable term lists, brand accents — all in Quicksand */
.yith-wcan-filters,
.yith-wcan-filters * {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
}
.yith-wcan-filters {
	background: #fff;
	padding: 24px 22px 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.yith-wcan-filters .yith-wcan-filter {
	margin: 0 0 26px;
}
.yith-wcan-filters h4.filter-title {
	font-size: 0.78rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #46534a;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
.yith-wcan-filters .filter-content ul,
.yith-wcan-filters .filter-items {
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ced7ca transparent;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yith-wcan-filters .filter-content ul::-webkit-scrollbar { width: 6px; }
.yith-wcan-filters .filter-content ul::-webkit-scrollbar-thumb { background: #ced7ca; border-radius: 3px; }
.yith-wcan-filters .filter-content li { margin: 0 0 7px; }
.yith-wcan-filters .filter-content label,
.yith-wcan-filters .filter-content a {
	font-size: 0.88rem;
	color: #555;
	text-decoration: none;
	cursor: pointer;
}
.yith-wcan-filters .filter-content label:hover,
.yith-wcan-filters .filter-content a:hover,
.yith-wcan-filters .filter-item.active label,
.yith-wcan-filters .filter-item.active a {
	color: #6a141d;
}
.yith-wcan-filters input[type="checkbox"],
.yith-wcan-filters input[type="radio"] {
	accent-color: #6a141d;
}
.yith-wcan-filters .count,
.yith-wcan-filters .filter-count {
	color: #b5b5b5;
	font-size: 0.76rem;
}
.yith-wcan-filters select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #ddd;
	background: #fafafa;
	font-size: 0.88rem;
	color: #555;
}
.yith-wcan-filters .clear-selection,
.yith-wcan-filters .reset-button,
.yith-wcan-filters .yith-wcan-reset-button {
	color: #6a141d;
	font-size: 0.8rem;
}
.yith-wcan-filters .toggle-handle,
.yith-wcan-filters .filter-title:after {
	color: #46534a;
}

/* Product titles in Quicksand: grid/list titles and single-product heading */
.qodef-woo-product-title,
.woocommerce-loop-product__title,
.qodef-woo-product-list .qodef-e-content .qodef-woo-product-title a,
.single-product h1.product_title,
h1.product_title.entry-title {
	font-family: 'Quicksand', sans-serif;
}

/* /winkel category tiles: real <img> cover layer behind centered text.
   (CSS-background version didn't render in every client.) */
.pp-cat-tile { position: relative; background: #000; overflow: hidden; }
.pp-cat-tile > .elementor-widget-wrap { position: relative; }
.pp-cat-tile .pp-tile-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; margin: 0; }
.pp-cat-tile .pp-tile-img .elementor-widget-container,
.pp-cat-tile .pp-tile-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; display: block; }
.pp-cat-tile .elementor-widget-heading,
.pp-cat-tile .elementor-widget-text-editor { position: relative; z-index: 1; }

/* Product cards: more air between title, price and add-to-cart button */
.qodef-woo-product-list .qodef-e-content .qodef-woo-product-title {
	margin-bottom: 12px;
}
.qodef-woo-product-list .qodef-e-content .price {
	display: block;
	margin-bottom: 14px;
}
.qodef-woo-product-list .qodef-e-content .add_to_cart_button {
	margin-top: 4px;
}

/* Uniform product-grid tiles: every image box is 2:3, the whole bottle
   always fits (object-fit: contain), tall and square photos letterbox
   instead of forcing unequal row heights. */
.qodef-woo-product-list .qodef-e-media-image {
	aspect-ratio: 2 / 3;
}
.qodef-woo-product-list .qodef-e-media-image a.woocommerce-LoopProduct-link {
	display: block;
	height: 100%;
}
.qodef-woo-product-list .qodef-e-media-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================
   Hoofdmenu: geen streepje meer, actief item zwaarder
   ==========================================================================
   Chateau tekent een lijntje onder de menu-items via de :after op
   .qodef-menu-item-text: bij hover en op het actieve item wordt die
   opengeschaald (transform: scaleX(1)). Het pseudo-element wordt hier
   helemaal uitgezet, dus geen lijn bij hover en geen lijn op de actieve
   pagina. De actieve pagina blijft herkenbaar aan het lettergewicht. */
.qodef-header-navigation > ul > li > a .qodef-menu-item-text:after,
.qodef-mobile-header-navigation > ul > li > a .qodef-menu-item-text:after {
	display: none;
}
/* Quicksand is een variabele font (300–700), dus 700 is echt beschikbaar. */
.qodef-header-navigation > ul > li.current-menu-ancestor > a,
.qodef-header-navigation > ul > li.current-menu-item > a,
.qodef-mobile-header-navigation > ul > li.current-menu-ancestor > a,
.qodef-mobile-header-navigation > ul > li.current-menu-item > a {
	font-weight: 700;
}

/* Uitklapmenu's in Quicksand rechtop.
   Het thema zet de submenu-links in "Ibarra Real Nova" cursief — die naam is
   bovenaan dit bestand gealiast naar Playfair Display, dus ze verschenen in
   schuine serif. Hier terug naar de huisfont, rechtop. */
.qodef-header-navigation > ul > li.qodef-menu-item--narrow ul li > a,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li > a,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li ul li > a,
.qodef-mobile-header-navigation ul li ul li > a {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
}

/* Productpagina: SKU niet tonen.
   Alleen het zichtbare regeltje in .product_meta verdwijnt — de SKU zelf
   blijft gewoon bestaan in de database, in wp-admin, in de JSON-LD van de
   productpagina en in data-product_sku op de winkelwagenknop. Categorieen
   en tags blijven staan. Bewust CSS en niet de filter wc_product_sku_enabled:
   die zou ook het SKU-veld in de productbewerker verbergen. */
.single-product .product_meta .sku_wrapper,
#qodef-woo-page.qodef--single .product_meta .sku_wrapper,
#yith-quick-view-content.single-product .product_meta .sku_wrapper {
	/* het thema zet .product_meta > * op display:flex vanuit een
	   ID-selector; zonder diezelfde ID wint display:none het niet. */
	display: none;
}

/* ==========================================================================
   Productpagina: verplaatste blokken (zie functions.php, pp_attributes_under_image
   en pp_single_meta_bottom)
   ========================================================================== */

/* "Bijkomende informatie" onder de foto, als eigen witte kaart in dezelfde
   stijl als de producttegels. */
.pp-single-attributes {
	margin-top: 28px;
	background: #fff;
	border-radius: 16px;
	padding: 26px 28px 10px;
}
.pp-single-attributes .pp-single-attributes-title {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #46534a;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
.pp-single-attributes .woocommerce-product-attributes {
	width: 100%;
	margin: 0;
	border: 0;
}
.pp-single-attributes .woocommerce-product-attributes-item th,
.pp-single-attributes .woocommerce-product-attributes-item td {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.88rem;
	line-height: 1.6;
	text-align: left;
	vertical-align: top;
	padding: 9px 0;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	background: transparent;
}
.pp-single-attributes .woocommerce-product-attributes-item th {
	width: 34%;
	padding-right: 18px;
	font-weight: 700;
	color: #46534a;
	white-space: normal;
}
.pp-single-attributes .woocommerce-product-attributes-item td {
	color: #555;
}
.pp-single-attributes .woocommerce-product-attributes-item td p {
	margin: 0;
}
.pp-single-attributes .woocommerce-product-attributes-item:last-child th,
.pp-single-attributes .woocommerce-product-attributes-item:last-child td {
	border-bottom: 0;
}

/* Categorieen en tags in de rechterkolom, net boven de beoordelingen. */
.pp-single-meta {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid #e5e5e5;
}
#qodef-woo-page.qodef--single .pp-single-meta .product_meta {
	margin-top: 0;
}
/* Categorieen en tags stonden in Playfair cursief en in het bordeauxrood van
   --qode-main-color; hier rechtop in Quicksand en in het donkergroen. */
#qodef-woo-page.qodef--single .product_meta .qodef-woo-meta-value,
#qodef-woo-page.qodef--single .product_meta .qodef-woo-meta-value a {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.9rem;
	letter-spacing: 0;
	color: #46534a;
}
#qodef-woo-page.qodef--single .product_meta .qodef-woo-meta-value a:hover {
	color: #2d3630;
}

/* Select2-dropdowns (sorteren, YITH-filters met "select-design", variaties).
   WooCommerce vervangt de <select> door select2-markup, dus de eerdere regel
   op select.orderby raakte alleen het onzichtbare origineel. Het thema zet
   die widgets in "Ibarra Real Nova" cursief.
   Let op: de uitgeklapte lijst (.select2-dropdown) wordt door select2
   onderaan <body> gehangen, buiten .woocommerce-ordering — die moet dus los
   worden aangesproken en niet binnen de sorteerbalk gescoped. */
[class*=chateau] .select2-container--default .select2-selection--single,
[class*=chateau] .select2-container--default .select2-selection--single .select2-selection__rendered,
[class*=chateau] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[class*=chateau] .select2-container--default .select2-selection--multiple,
[class*=chateau] .select2-container--default .select2-selection--multiple .select2-selection__rendered,
[class*=chateau] .select2-container--default .select2-results__option,
[class*=chateau] .select2-container--default .select2-search__field {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	letter-spacing: 0;
}

/* De sorteerbalk zelf in dezelfde maat als de pill die eronder ligt. */
.woocommerce-ordering .select2-container--default .select2-selection--single,
.woocommerce-ordering .select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: 0.85rem;
	color: #46534a;
}

/* Mobiel menu open: de pagina erachter vervaagt.
   Het menupaneel zelf hangt in #qodef-page-mobile-header, en dat blok staat
   in de DOM VOOR #qodef-page-outer (broers, geen ouder/kind), dus het menu
   blijft scherp terwijl de inhoud eronder onscherp wordt.
   Twee selectoren: de body-klasse wordt door pp_mobile_menu_body_class()
   (functions.php) via JS gezet, de :has()-variant dekt hetzelfde af mocht dat
   script niet draaien.
   Let op: filter maakt van deze blokken een containing block voor
   position:fixed kinderen — bewust, zodat bv. de back-to-top-knop mee
   vervaagt in plaats van scherp over het waas te blijven staan. */
#qodef-page-outer,
#qodef-page-footer {
	transition: filter 0.35s ease;
}
body.pp-mobile-menu-open #qodef-page-outer,
body.pp-mobile-menu-open #qodef-page-footer,
body:has(#qodef-page-mobile-header .qodef-mobile-header-opener.qodef--opened) #qodef-page-outer,
body:has(#qodef-page-mobile-header .qodef-mobile-header-opener.qodef--opened) #qodef-page-footer {
	filter: blur(6px) brightness(0.94);
}

/* ==========================================================================
   Winkeltegels, Elementor-versie (pagina "Winkel (Elementor-versie)")
   ==========================================================================
   Elke tegel is een gewone Elementor-kolom met achtergrondafbeelding +
   overlay; titel en tekst zijn een heading- en text-editor-widget. Deze
   build van Elementor rendert GEEN link op een kolom, dus de link van de
   titel wordt over de hele tegel uitgerekt (::after met inset: 0). Daarvoor
   moet .elementor-widget-wrap zijn eigen position: relative loslaten, anders
   hangt de ::after aan de wrap in plaats van aan de tegel. */
/* De achtergrondafbeelding van een Elementor-kolom staat op
   .elementor-element-populated, niet op de kolom zelf. De kolomgap van
   Elementor is padding OP dat element en valt dus binnen de foto — daarmee
   staan de tegels tegen elkaar. De tussenruimte moet daarom een marge zijn:
   2 x 6px = de 12px gap van het originele raster op /webshop/. */
.pp-el-tile > .elementor-element-populated {
	position: relative;
	margin: 6px;
	min-height: 300px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pp-el-tile .elementor-heading-title a {
	text-decoration: none;
}
/* uitgerekte link: hangt aan .elementor-element-populated hierboven, zodat
   het klikbare vlak exact de foto is en niet ook de tussenruimte */
.pp-el-tile .elementor-heading-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.pp-el-tile:hover > .elementor-element-populated {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.pp-el-tiles .elementor-container {
	align-items: stretch;
	/* 34 + 6px marge = de 40px zijmarge van het origineel */
	padding: 0 34px;
}
/* Lucht onder de 100px hoge header: zonder kruimelbalk plakt de eerste rij
   tegels er anders tegenaan. Staat de kruimelbalk er wel (.pp-breadcrumbs
   geeft zelf al 14px padding + 40px marge), dan volstaat een kleine
   aanvulling — anders stapelen beide op elkaar. */
.pp-el-tiles:first-of-type > .elementor-container {
	padding-top: 54px;
}
body:has(.pp-breadcrumbs) .pp-el-tiles:first-of-type > .elementor-container {
	padding-top: 20px;
}
/* het origineel laat 3rem los onder het raster, voor de introtekst */
.pp-el-tiles ~ section:not(.pp-el-tiles) {
	margin-top: calc(3rem - 6px);
}
@media (max-width: 900px) {
	.pp-el-tile > .elementor-element-populated {
		min-height: 220px;
	}
	.pp-el-tiles .elementor-container {
		padding: 0 9px;
	}
	.pp-el-tiles:first-of-type > .elementor-container {
		padding-top: 24px;
	}
}

/* Zoekveld boven de filters (pp_sidebar_product_search in functions.php).
   Zelfde witte paneelstijl als het YITH-filterblok eronder. */
.pp-sidebar-search {
	background: #fff;
	padding: 24px 22px 26px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	margin-bottom: 22px;
}
.pp-sidebar-search .pp-sidebar-search-title {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #46534a;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
/* het thema zet elke input in Ibarra Real Nova cursief; hier rechtop in
   Quicksand, in dezelfde maat als de filterlabels */
.pp-sidebar-search input[type="search"],
.pp-sidebar-search input[type="text"],
.pp-sidebar-search .dgwt-wcas-search-input {
	font-family: 'Quicksand', sans-serif !important;
	font-style: normal !important;
	font-size: 0.88rem !important;
	letter-spacing: 0;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 0;
	background: #fafafa;
	color: #555;
	line-height: 1.4;
}
.pp-sidebar-search .dgwt-wcas-search-wrapp {
	max-width: none;
}
.pp-sidebar-search .dgwt-wcas-search-submit,
.pp-sidebar-search button[type="submit"] {
	background: #6a141d;
	color: #fff;
	border: 0;
}
.pp-sidebar-search .dgwt-wcas-search-submit:hover,
.pp-sidebar-search button[type="submit"]:hover {
	background: #46534a;
}
/* fallback-formulier van WooCommerce (zonder FiboSearch) */
.pp-sidebar-search .woocommerce-product-search {
	display: flex;
	gap: 8px;
}
.pp-sidebar-search .woocommerce-product-search button {
	padding: 10px 16px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.82rem;
	cursor: pointer;
}

/* Zoekveld in de categorietegels op /webshop/ ([pp_cat_search]).
   Transparant: alleen een lichte rand op de foto, witte tekst.
   z-index 4 is nodig — de uitgerekte tegellink (::after) ligt op z-index 3
   en zou het veld anders onklikbaar maken. */
.pp-el-tile .pp-cat-search {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: stretch;
	max-width: 320px;
	margin: 18px auto 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.pp-el-tile .pp-cat-search:focus-within {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
}
.pp-el-tile .pp-cat-search input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 9px 14px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0;
	line-height: 1.4;
	box-shadow: none;
}
.pp-el-tile .pp-cat-search input[type="search"]:focus {
	outline: none;
	background: transparent;
	color: #ffffff;
}
.pp-el-tile .pp-cat-search input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}
/* Safari tekent anders zijn eigen ronde zoekveld met witte achtergrond */
.pp-el-tile .pp-cat-search input[type="search"]::-webkit-search-decoration,
.pp-el-tile .pp-cat-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
.pp-el-tile .pp-cat-search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.pp-el-tile .pp-cat-search button:hover {
	background: rgba(255, 255, 255, 0.18);
}
.pp-el-tile .pp-cat-search svg {
	display: block;
}

/* Suggestielijst onder het zoekveld in de tegels (autocomplete via
   /wp-json/pp/v1/product-search). Hangt aan het formulier, dat zelf op
   z-index 4 staat — dus boven de uitgerekte tegellink. */
.pp-el-tile .pp-cat-suggest {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 6;
	max-height: 340px;
	overflow-y: auto;
	text-align: left;
	background: rgba(70, 83, 74, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.pp-el-tile .pp-cat-suggest.is-open {
	display: block;
}
/* Stapelvolgorde. De hover-transform op de tegel (translateY) maakt een eigen
   stacking context: de suggestielijst kan dan niet meer boven de rijen
   eronder komen, hoe hoog z-index ook staat. Zolang er in de tegel getypt
   wordt gaat die transform er dus af en worden tegel én rij opgetild.
   Elementor zet .elementor-section en .elementor-column al op
   position: relative, dus z-index pakt hier meteen. */
.pp-el-tile:focus-within > .elementor-element-populated {
	transform: none;
}
.pp-el-tile:focus-within {
	z-index: 30;
}
.pp-el-tiles:focus-within {
	z-index: 30;
}
.pp-el-tile .pp-cat-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pp-el-tile .pp-cat-suggest-item:last-of-type {
	border-bottom: 0;
}
.pp-el-tile .pp-cat-suggest-item:hover,
.pp-el-tile .pp-cat-suggest-item.is-active {
	background: rgba(255, 255, 255, 0.14);
}
.pp-el-tile .pp-cat-suggest-item img {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	object-fit: contain;
	background: #ffffff;
}
.pp-el-tile .pp-cat-suggest-text {
	display: block;
	min-width: 0;
}
.pp-el-tile .pp-cat-suggest-name {
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.35;
}
.pp-el-tile .pp-cat-suggest-price {
	display: block;
	margin-top: 2px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.76rem;
	color: #cabebb;
}
.pp-el-tile .pp-cat-suggest-none {
	padding: 12px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.8);
}
.pp-el-tile .pp-cat-suggest-all {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	text-align: left;
	cursor: pointer;
}
.pp-el-tile .pp-cat-suggest-all:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Badge uit het attribuut "Badge" (pa_badge) — zie pp_get_attribute_badges()
   ==========================================================================
   Linksboven op de foto; de sale-/new-markering van het thema
   (.qodef-woo-product-mark) staat rechtsboven, dus ze botsen niet. */
.qodef-woo-single-image,
.qodef-woo-product-list .qodef-e-media-image {
	position: relative;
}
.pp-attr-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	max-width: calc(100% - 24px);
	pointer-events: none;
}
.pp-attr-badge {
	display: inline-block;
	padding: 6px 12px 5px;
	border-radius: 999px;
	background: #46534a;
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.pp-attr-badge--nieuw {
	background: #6a8f6b;
}
.pp-attr-badge--promo {
	background: #6a141d;
}
/* onderscheidingen in goud, met donkere tekst voor voldoende contrast */
.pp-attr-badge--award {
	background: linear-gradient(135deg, #d9b26a 0%, #c69b4d 100%);
	color: #3a2c10;
}
/* op de productpagina mag hij iets groter */
.qodef-woo-single-image .pp-attr-badges {
	top: 18px;
	left: 18px;
}
.qodef-woo-single-image .pp-attr-badge {
	font-size: 0.72rem;
	padding: 7px 15px 6px;
}
@media (max-width: 680px) {
	.pp-attr-badges {
		top: 8px;
		left: 8px;
		gap: 4px;
	}
	.pp-attr-badge {
		font-size: 0.6rem;
		padding: 5px 10px 4px;
		letter-spacing: 1px;
	}
}

/* ==========================================================================
   Prijzen rechtop, niet cursief
   ==========================================================================
   Het thema zet elke prijs in "Ibarra Real Nova" cursief vanuit een
   ID-selector (#qodef-woo-page .price, idem voor .amount in winkelmand en
   afrekenen). De bestaande prijsregels hierboven gebruiken alleen klassen en
   verloren dus op specificiteit — vandaar dat zowel de tegelprijs als de
   prijs op de productpagina toch schuin bleef. Hier met dezelfde ID erbij. */
#qodef-woo-page .price,
#qodef-woo-page .price del,
#qodef-woo-page .price ins,
#qodef-woo-page .price .woocommerce-Price-amount,
#qodef-woo-page .woocommerce-Price-amount,
#qodef-woo-page.qodef--cart .shop_table th .amount,
#qodef-woo-page.qodef--cart .shop_table td .amount,
.qodef-woo-shortcode .price,
.qodef-woo-shortcode .price .woocommerce-Price-amount,
#yith-quick-view-modal .price,
#yith-quick-view-modal .price .woocommerce-Price-amount,
.yith-wcwl-form .shop_table th .amount,
.yith-wcwl-form .shop_table td .amount {
	font-style: normal;
}

/* de families die hierboven al bedoeld waren, nu met winnende specificiteit */
#qodef-woo-page .qodef-woo-product-list li.product .price,
#qodef-woo-page .qodef-woo-product-list li.product .price .woocommerce-Price-amount {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0;
	color: #6a141d;
}
#qodef-woo-page.qodef--single .summary p.price,
#qodef-woo-page.qodef--single .summary p.price .woocommerce-Price-amount {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	/* Quicksand heeft een grotere x-hoogte dan Playfair, dus iets kleiner
	   voor hetzelfde optische gewicht als voorheen (was 1.8rem Playfair) */
	font-size: 1.6rem;
	letter-spacing: 0;
	color: #6a141d;
}

/* Ook de overige prijzen in Quicksand: winkelmand, afrekenen, verlanglijst,
   mini-winkelmand, gerelateerde producten en de shortcode-rasters. Het thema
   zet die vanuit #qodef-woo-page in Ibarra Real Nova, dus de ID moet mee. */
#qodef-woo-page .price,
#qodef-woo-page .price del,
#qodef-woo-page .price ins,
#qodef-woo-page .price .woocommerce-Price-amount,
#qodef-woo-page .woocommerce-Price-amount,
#qodef-woo-page .amount,
#qodef-woo-page.qodef--cart .shop_table th .amount,
#qodef-woo-page.qodef--cart .shop_table td .amount,
.qodef-woo-shortcode .price,
.qodef-woo-shortcode .price .woocommerce-Price-amount,
#yith-quick-view-modal .price,
#yith-quick-view-modal .price .woocommerce-Price-amount,
.yith-wcwl-form .shop_table th .amount,
.yith-wcwl-form .shop_table td .amount,
.widget .woocommerce-Price-amount,
.qodef-woo-dropdown-cart .woocommerce-Price-amount,
.woocommerce-mini-cart .woocommerce-Price-amount,
.woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	letter-spacing: 0;
}

/* ==========================================================================
   Afhalen of laten leveren — keuze bovenaan de afrekenpagina
   ========================================================================== */
.pp-delivery-choice {
	margin: 0 0 34px;
}
.pp-delivery-choice-title {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: #46534a;
	margin: 0 0 14px;
}
.pp-delivery-choice-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.pp-delivery-card {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}
/* het echte keuzerondje blijft bereikbaar voor toetsenbord en screenreader */
.pp-delivery-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.pp-delivery-card-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e0ddd8;
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pp-delivery-card:hover .pp-delivery-card-inner {
	border-color: #ced7ca;
}
.pp-delivery-card.is-selected .pp-delivery-card-inner {
	border-color: #46534a;
	background: #f6f8f5;
	box-shadow: 0 0 0 1px #46534a;
}
.pp-delivery-card input:focus-visible + .pp-delivery-card-inner {
	outline: 2px solid #6a141d;
	outline-offset: 2px;
}
.pp-delivery-card-icon {
	flex: 0 0 auto;
	color: #46534a;
	line-height: 0;
	margin-top: 2px;
}
.pp-delivery-card.is-selected .pp-delivery-card-icon {
	color: #6a141d;
}
.pp-delivery-card-name {
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 1rem;
	font-weight: 700;
	color: #46534a;
	margin-bottom: 3px;
}
.pp-delivery-card-desc {
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #777;
}
.pp-delivery-note {
	margin: 14px 0 0;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.82rem;
	color: #777;
}
/* per keuze de juiste toelichting */
.pp-delivery-choice[data-mode="pickup"] .pp-delivery-note--delivery,
.pp-delivery-choice[data-mode="delivery"] .pp-delivery-note--pickup {
	display: none;
}

/* Het factuuradres blijft ook bij afhalen staan (2026-08-05). Enkel het
   aparte VERZENDadres is dan zinloos, dus dat blok blijft verborgen. */
body.pp-mode--pickup .woocommerce-shipping-fields {
	display: none;
}

@media (max-width: 680px) {
	.pp-delivery-choice-cards {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   "Uitverkocht"-markering in dezelfde stijl als de attribuutbadges
   ==========================================================================
   Het thema zet .qodef-woo-product-mark (uitverkocht + nieuw + koopje) als een
   blok van 17px Ibarra cursief in het bordeaux van --qode-main-color, strak in
   de hoek geplakt. Hier hetzelfde pilletje als .pp-attr-badge: Quicksand
   rechtop, klein en in het donkergroen. Rechtsboven, tegenover de
   attribuutbadge linksboven. De ID-prefix moet mee: de themaregels dragen
   #qodef-woo-page en winnen anders op specificiteit. */
#qodef-woo-page .qodef-woo-product-mark,
.qodef-woo-shortcode .qodef-woo-product-mark,
#yith-quick-view-modal .qodef-woo-product-mark,
.qodef-woo-product-mark {
	top: 12px;
	right: 12px;
	padding: 6px 12px 5px;
	border-radius: 999px;
	/* zwart-wit, zodat "Uitverkocht" duidelijk verschilt van de
	   attribuutbadges (die in de merkkleuren staan) */
	background-color: #000000;
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
/* op de productpagina even groot als de badge daar */
#qodef-woo-page.qodef--single .qodef-woo-product-mark {
	top: 18px;
	right: 18px;
	font-size: 0.72rem;
	padding: 7px 15px 6px;
}
@media (max-width: 680px) {
	#qodef-woo-page .qodef-woo-product-mark,
	.qodef-woo-product-mark {
		top: 8px;
		right: 8px;
		font-size: 0.6rem;
		padding: 5px 10px 4px;
		letter-spacing: 1px;
	}
}

/* ==========================================================================
   Event + nieuwsbrief naast elkaar (sectie ppev0010, .pp-split-section)
   ==========================================================================
   Links het event op een lichtgroen vlak, rechts de nieuwsbrief op de foto
   met donkere overlay. Beide kolommen even hoog; onder 900px onder elkaar. */
.pp-split-section {
	/* zelfde lucht rond de blokken als bij de linksectie eronder, iets
	   compacter gezet op verzoek. De ruimte onderaan is bewust groter: daar
	   begint meteen de gekleurde band van "Mijn persoonlijke selectie", en
	   zonder die marge plakken de twee blokken tegen elkaar. */
	padding: 30px 20px 12px;
	margin-bottom: 55px;
}
.pp-split-section > .elementor-container {
	align-items: stretch;
}
/* de twee blokken als afgeronde kaarten, met dezelfde marge, ronding, schaduw
   en hover als de tegels van de linksectie (webshop / blog / maak kennis) */
.pp-split-section .pp-event-col > .elementor-element-populated,
.pp-split-section .pp-news-col > .elementor-element-populated {
	height: 100%;
	margin: 10px !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 40px -26px rgba(29, 29, 27, 0.5);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pp-split-section .pp-event-col:hover > .elementor-element-populated,
.pp-split-section .pp-news-col:hover > .elementor-element-populated {
	box-shadow: 0 24px 46px -24px rgba(29, 29, 27, 0.6);
	transform: translateY(-4px);
}
/* de kolom zelf mag geen achtergrond meer tonen buiten de afgeronde kaart */
.pp-split-section .elementor-column {
	background: transparent !important;
}
/* Inhoud bovenaan in beide kaarten (de kolommen staan in Elementor op
   "boven" uitgelijnd). .elementor-element-populated IS de widget-wrap — één
   en dezelfde div — dus hier geen flex-direction omzetten: dat zou van
   align-items een horizontale uitlijning maken en de widgets laten krimpen.
   Alleen zorgen dat de widgets over de volle breedte blijven staan. */
.pp-split-section .pp-event-col > .elementor-element-populated > .elementor-element,
.pp-split-section .pp-news-col > .elementor-element-populated > .elementor-element {
	width: 100%;
}
/* de eerste kop in beide kaarten start zonder extra marge, zodat ze op
   dezelfde lijn beginnen */
.pp-split-section .elementor-widget-heading:first-child .elementor-heading-title {
	margin-top: 0;
}
.pp-event-col .elementor-heading-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	line-height: 1.25;
	color: #46534a;
	margin-bottom: 18px;
}
.pp-event-col .elementor-widget-text-editor {
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.65;
	color: #46534a;
	max-width: 560px;
	margin: 0 auto;
}
.pp-event-col .elementor-widget-text-editor p {
	margin: 0 0 12px;
}
/* De laatste alinea stond klein en grijs: dat was bedoeld voor het
   plaatshoudertekstje ("Pas deze tekst aan in Elementor...") dat hier eerst
   stond. Nu is de laatste alinea gewoon het laatste event, dus alleen de
   marge blijft over. */
.pp-event-col .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}
.pp-event-col .elementor-widget-text-editor strong {
	font-size: 1.05rem;
	color: #3a453d;
}
/* dezelfde knop als de trio-knoppen hoger op de pagina: geen echte rand maar
   vier hairlines die bij hover langs het kader lopen — hier in bordeaux,
   want deze knop staat op een lichte achtergrond */
.pp-event-col .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	line-height: 1 !important;
	margin-top: 22px;
	background-color: transparent !important;
	color: #6a141d !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 28px !important;
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.175em !important;
	text-transform: uppercase !important;
	background-image:
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d) !important;
	background-repeat: no-repeat !important;
	background-position: left top, right top, left bottom, right bottom, left top, right top !important;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100% !important;
	transition: background-size 1s ease, color 0.2s ease-out !important;
}
.pp-event-col .elementor-button:hover {
	color: #46534a !important;
	background-color: transparent !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100% !important;
}
/* De nieuwsbriefkolom. Alle opmaak hing vroeger aan het sectie-ID 364e4e7
   (dat blok staat er nog voor de contactpagina, die dezelfde sectie gebruikt);
   sinds de nieuwsbrief hier een kolom in een gedeelde rij is, moet het via de
   klasse. Zelfde ontwerp als voorheen: vlak donkergroen paneel, witte titel
   met lila streepje, lichte tekst en een formulier in dezelfde knopstijl. */
.pp-news-col h2.elementor-heading-title {
	color: #ffffff !important;
	margin-top: 0;
}
.pp-news-col h2.elementor-heading-title:after {
	background: #cabebb;
}
.pp-news-col .elementor-widget-text-editor,
.pp-news-col p {
	color: #e8e8e4;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
}
.pp-news-col #mc_embed_signup {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
}
.pp-news-col #mc_embed_signup br {
	display: none;
}
.pp-news-col #mc_embed_signup label {
	color: #cabebb;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pp-news-col #mc_embed_signup input[type='email'] {
	width: 100%;
	padding: 14px 22px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 0;
	background: transparent;
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	margin-top: 12px;
	box-sizing: border-box;
}
.pp-news-col #mc_embed_signup input[type='email']::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.pp-news-col #mc_embed_signup input[type='email']:focus {
	outline: none;
	border-color: #cabebb;
}
/* zelfde getekende kader als de andere knoppen, hier in het wit.
   Maatvoering gelijk aan .elementor-button: het thema zet op ALLE inputs
   line-height: 31px, waardoor deze knop een pak hoger uitviel dan de
   eventknop ernaast. Vandaar line-height 1 + dezelfde min-height (40px, van
   Elementors .elementor-size-sm) en dezelfde padding. */
.pp-news-col #mc_embed_signup input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	line-height: 1;
	margin-top: 18px;
	padding: 12px 28px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.175em;
	text-transform: uppercase;
	cursor: pointer;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff);
	background-repeat: no-repeat;
	background-position: left top, right top, left bottom, right bottom, left top, right top;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100%;
	transition: background-size 1s ease, color 0.2s ease-out;
}
.pp-news-col #mc_embed_signup input[type='submit']:hover {
	color: #cabebb;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100%;
}
@media (max-width: 900px) {
	.pp-split-section .pp-event-col > .elementor-element-populated,
	.pp-split-section .pp-news-col > .elementor-element-populated {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.pp-event-col .elementor-widget-text-editor {
		font-size: 0.9rem;
	}
}
/* Onder 767px zet Elementor de twee kolommen onder elkaar.
   LET OP: de kaarten staan op height:100% (nodig om ze naast elkaar even hoog
   te maken). Onder elkaar werkt dat tegen: de kaart is dan precies zo hoog als
   zijn kolom, waardoor zijn ondermarge BUITEN die kolom valt in plaats van de
   volgende kaart weg te duwen. De twee kaarten plakten daardoor tegen elkaar,
   ook met een grotere margin-bottom.
   Dus: hoogte hier loslaten, en de tussenruimte op de kolom zelf zetten — dat
   is het flex-item dat wel echt opschuift. */
@media (max-width: 767px) {
	.pp-split-section .pp-event-col > .elementor-element-populated,
	.pp-split-section .pp-news-col > .elementor-element-populated {
		height: auto !important;
	}
	.pp-split-section .pp-event-col {
		margin-bottom: 24px !important;
	}
}

/* Het zoekveld in de zijbalk is nu hetzelfde [pp_cat_search] als in de
   winkeltegels, maar dan op een wit paneel: donkere tekst, lichte rand, en
   een suggestielijst in dezelfde stijl als het filterblok eronder.
   (De transparante variant hierboven is gescoped op .pp-el-tile en raakt
   deze dus niet.) */
.pp-sidebar-search .pp-cat-search {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid #ddd;
	background: #fafafa;
}
.pp-sidebar-search .pp-cat-search:focus-within {
	border-color: #ced7ca;
}
.pp-sidebar-search .pp-cat-search input[type="search"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	color: #555;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.88rem;
	line-height: 1.4;
	box-shadow: none;
}
.pp-sidebar-search .pp-cat-search input[type="search"]:focus {
	outline: none;
	background: transparent;
}
.pp-sidebar-search .pp-cat-search input[type="search"]::placeholder {
	color: #9a9a9a;
}
.pp-sidebar-search .pp-cat-search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: #46534a;
	cursor: pointer;
}
.pp-sidebar-search .pp-cat-search button:hover {
	color: #6a141d;
}
.pp-sidebar-search .pp-cat-suggest {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 340px;
	overflow-y: auto;
	text-align: left;
	background: #ffffff;
	border: 1px solid #e2e2e2;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.pp-sidebar-search .pp-cat-suggest.is-open {
	display: block;
}
.pp-sidebar-search .pp-cat-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	color: #46534a;
	text-decoration: none;
	border-bottom: 1px solid #f0f0f0;
}
.pp-sidebar-search .pp-cat-suggest-item:last-of-type {
	border-bottom: 0;
}
.pp-sidebar-search .pp-cat-suggest-item:hover,
.pp-sidebar-search .pp-cat-suggest-item.is-active {
	background: #f6f8f5;
}
.pp-sidebar-search .pp-cat-suggest-item img {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	object-fit: contain;
	background: #ffffff;
}
.pp-sidebar-search .pp-cat-suggest-name {
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.35;
}
.pp-sidebar-search .pp-cat-suggest-price {
	display: block;
	margin-top: 2px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.76rem;
	color: #6a141d;
}
.pp-sidebar-search .pp-cat-suggest-none {
	padding: 12px;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.8rem;
	color: #888;
}
.pp-sidebar-search .pp-cat-suggest-all {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-top: 1px solid #eee;
	background: #f6f8f5;
	color: #46534a;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.78rem;
	text-align: left;
	cursor: pointer;
}
.pp-sidebar-search .pp-cat-suggest-all:hover {
	background: #ced7ca;
}

/* De pakket-CTA is nu een Elementor-knopwidget (ppaug1005) in plaats van een
   <a class="pp-wh-all"> in de tekst. Zelfde uiterlijk als voorheen en als de
   andere knoppen: bordeaux letters, donkergroen getekend kader dat bij hover
   rond de knop loopt. */
.pp-pakket-section .elementor-widget-button {
	margin-top: 22px;
	text-align: center;
}
.pp-pakket-section .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 13px 30px !important;
	background-color: transparent !important;
	color: #6a141d !important;
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8rem !important;
	line-height: 1 !important;
	letter-spacing: 0.175em !important;
	text-transform: uppercase !important;
	background-image:
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a),
		linear-gradient(#46534a, #46534a) !important;
	background-repeat: no-repeat !important;
	background-position: left top, right top, left bottom, right bottom, left top, right top !important;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100% !important;
	transition: background-size 1s ease, color 0.2s ease-out !important;
}
.pp-pakket-section .elementor-button:hover {
	color: #46534a !important;
	background-color: transparent !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100% !important;
}

/* Voettekst breder.
   De voettekst hing in het standaardraster van het thema
   (.qodef-content-grid, 1100px breed), dus de max-width van 1300px op
   .pp-footer-grid kwam nooit aan bod. Daardoor bleef de merkkolom smal en
   brak de slogan "La vita è troppo breve per mangiare e bere male" op twee
   regels. De ID-selector is nodig om het van de themaregel te winnen. */
#qodef-page-footer #qodef-page-footer-top-area-inner.qodef-content-grid {
	width: min(1500px, 100% - 60px);
}
/* op breed scherm past de slogan ruim op één regel; de nowrap houdt dat zo,
   ook als de tekst ooit een woord langer wordt. Smaller mag hij gewoon
   afbreken. */
@media (min-width: 1200px) {
	#qodef-page-footer .pp-f-tagline {
		white-space: nowrap;
	}
}

/* onderste balk: twee kolommen van het thema, klein en rustig.
   Tekst en links in het wit (de algemene voorwaarden, het privacybeleid, het
   btw-nummer en de credits); de link-regel hierboven zet ze standaard in
   lila, vandaar de expliciete overschrijving met dezelfde ID-prefix. */
#qodef-page-footer .pp-f-legal,
#qodef-page-footer .pp-f-credit {
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-style: normal;
	font-size: 0.78rem;
	color: #ffffff;
}
#qodef-page-footer .pp-f-legal a,
#qodef-page-footer .pp-f-credit a {
	color: #ffffff !important;
	text-decoration: none;
}
#qodef-page-footer .pp-f-legal a:hover,
#qodef-page-footer .pp-f-credit a:hover {
	color: #cabebb !important;
}


/* Openingsuren-sjabloon randloos.
   Sinds de sectie via een Template-widget wordt ingevoegd, zit ze in een
   extra sectie + kolom. Die wrapper krijgt van Elementor standaard 10px
   padding links en rechts (.elementor-column-gap-default), waardoor de foto
   en het groene vlak niet meer tot de rand liepen zoals voorheen. */
.pp-openingsuren > .elementor-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.pp-openingsuren > .elementor-container > .elementor-column > .elementor-element-populated {
	padding: 0 !important;
}
.pp-openingsuren .elementor-widget-template > .elementor-widget-container,
.pp-openingsuren .elementor-template {
	margin: 0;
	padding: 0;
}

/* Contactpagina: de openingsuren zijn daar de eerste sectie en plakten dus
   tegen de 100px hoge header. Op de homepage staat hetzelfde blok midden op
   de pagina en is die marge niet nodig — vandaar de paginascope. */
.page-id-3367 .pp-openingsuren {
	margin-top: 54px;
}
@media (max-width: 1024px) {
	.page-id-3367 .pp-openingsuren {
		margin-top: 24px;
	}
}

/* De onderste voetbalk stond nog in het standaardraster van het thema
   (.qodef-content-grid, 1100px) terwijl de kolommen erboven op 1500px staan.
   Daardoor lagen "Algemene voorwaarden" en de credits niet in lijn met het
   logo en de laatste kolom. Zelfde breedte, en de twee helften netjes tegen
   de buitenranden met verticale centrering. */
#qodef-page-footer #qodef-page-footer-bottom-area-inner.qodef-content-grid {
	width: min(1500px, 100% - 60px);
}
#qodef-page-footer-bottom-area-inner .qodef-grid-inner {
	align-items: center;
}
/* twee gelijke blokken, tekst in beide gecentreerd */
#qodef-page-footer .pp-f-legal,
#qodef-page-footer .pp-f-credit {
	text-align: center;
}
#qodef-page-footer-bottom-area-inner .qodef-grid-item {
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---------- Mobiel: zoekveld + filters bovenaan ----------
   Op tablet en telefoon zet het thema de sidebar ónder de productlijst
   (grid-template-areas: "content" "sidebar"), zodat de filters pas na
   twintig producten in beeld komen. Op de productarchieven draaien we die
   volgorde om: zoekveld en filters staan bovenaan, boven de producten. */
@media (max-width: 1024px) {
	body.woocommerce-page.archive #qodef-page-content.qodef-grid-template--reverse > .qodef-grid-inner,
	body.woocommerce-page.search #qodef-page-content.qodef-grid-template--reverse > .qodef-grid-inner,
	body.post-type-archive-product #qodef-page-content.qodef-grid-template--reverse > .qodef-grid-inner {
		grid-template-areas: "sidebar" "content";
	}
	body.woocommerce-page.archive #qodef-page-sidebar,
	body.woocommerce-page.search #qodef-page-sidebar,
	body.post-type-archive-product #qodef-page-sidebar {
		margin-top: 0;
		margin-bottom: 32px;
	}
	/* compacter paneel: op een klein scherm mag er minder lucht in */
	body.woocommerce-page.archive .pp-sidebar-search,
	body.woocommerce-page.search .pp-sidebar-search,
	body.post-type-archive-product .pp-sidebar-search {
		padding: 18px 16px 20px;
		margin-bottom: 14px;
	}
	body.woocommerce-page.archive #qodef-page-sidebar .widget:last-child,
	body.post-type-archive-product #qodef-page-sidebar .widget:last-child {
		margin-bottom: 0;
	}
	/* de filterselects naast elkaar zolang er plaats voor is */
	body.woocommerce-page.archive .yith-wcan-filters .filters-container > form,
	body.post-type-archive-product .yith-wcan-filters .filters-container > form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 18px;
	}
}
@media (max-width: 520px) {
	body.woocommerce-page.archive .yith-wcan-filters .filters-container > form,
	body.post-type-archive-product .yith-wcan-filters .filters-container > form {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ---------- Afbeeldingen in de korte beschrijving ----------
   Tien producten hebben een awardlabel of technische fiche in de korte
   beschrijving staan, meegekomen uit de oude shop. Sommige zijn 640 tot 800
   pixels breed en dragen alignleft/alignright, en in de smalle rechterkolom
   duwt zo'n float de titel, de knoppen en het metablok opzij (#1458 Barolo
   Bricco Ambrogio was daar het duidelijkste voorbeeld van). Hier blijven ze
   een klein accent rechts, met een float die netjes wordt opgeruimd. */
#qodef-woo-page .woocommerce-product-details__short-description img,
#yith-quick-view-content .woocommerce-product-details__short-description img {
	float: right;
	max-width: 110px;
	max-height: 140px;
	width: auto;
	height: auto;
	margin: 2px 0 12px 18px;
	clear: right;
}
#qodef-woo-page .woocommerce-product-details__short-description::after,
#yith-quick-view-content .woocommerce-product-details__short-description::after {
	content: '';
	display: block;
	clear: both;
}
/* de lege <p>&nbsp;</p> die vaak vóór zo'n afbeelding staat */
#qodef-woo-page .woocommerce-product-details__short-description p:last-child:empty {
	display: none;
}
@media (max-width: 680px) {
	#qodef-woo-page .woocommerce-product-details__short-description img {
		max-width: 84px;
		margin-left: 12px;
	}
}

/* ==========================================================================
   Leeftijdscontrole (age-gate): knoppen zoals overal elders
   ==========================================================================
   De plugin levert twee gewone <button>'s met een eigen opmaak. Hier krijgen ze
   exact dezelfde stijl als de knoppen in de tegels, de nieuwsbrief en de
   winkelmand: vierkant, transparant, bordeauxrode hoofdletters met veel
   letterafstand, en bij hover hetzelfde onderbroken kader dat van hoek wisselt.
   De zes achtergrondverlopen tekenen dat kader; de percentages zijn dezelfde
   als bij de andere knoppen. Daarom krijgen "Ja" en "Nee" een min-width: bij
   zo'n kort woord zouden de kadersegmenten anders niet op hun plaats vallen.
   Het paneel van de plugin is wit (--ag-form-background), dus bordeaux op wit
   geeft hetzelfde contrast als op de lichte kaarten elders. */
.age-gate .age-gate__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
.age-gate .age-gate__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 150px;
	min-height: 40px;
	line-height: 1 !important;
	cursor: pointer;
	background-color: transparent !important;
	color: #6a141d !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	padding: 12px 28px !important;
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.175em !important;
	text-transform: uppercase !important;
	background-image:
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d),
		linear-gradient(#6a141d, #6a141d) !important;
	background-repeat: no-repeat !important;
	background-position: left top, right top, left bottom, right bottom, left top, right top !important;
	background-size: 6.35% 1px, 70.5% 1px, 70.5% 1px, 6.35% 1px, 1px 100%, 1px 100% !important;
	transition: background-size 1s ease, color 0.2s ease-out !important;
}
.age-gate .age-gate__submit:hover,
.age-gate .age-gate__submit:focus-visible {
	color: #46534a !important;
	background-color: transparent !important;
	background-size: 70.5% 1px, 6.35% 1px, 6.35% 1px, 70.5% 1px, 1px 100%, 1px 100% !important;
}
@media (max-width: 480px) {
	.age-gate .age-gate__submit {
		min-width: 130px;
		padding: 12px 20px !important;
	}
}