/*
Theme Name:   Print-je Deco
Theme URI:    https://printjedeco.nl
Description:  Child theme van Hello Elementor in de huisstijl van Print-je Deco: kleuren, lettertypes, header met dropdowns, compacte footer en WooCommerce-opmaak.
Author:       KRM Prints
Template:     hello-elementor
Version:      1.7.7
Requires at least: 6.2
Requires PHP: 7.4
Text Domain:  printjedeco
License:      GPL-2.0-or-later
*/

/* ---------- Lettertypes (lokaal, geen Google-verbinding) ---------- */
@font-face { font-family: 'Figtree'; src: url('assets/fonts/figtree.woff') format('woff'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant.woff') format('woff'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant-italic.woff') format('woff'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('assets/fonts/greatvibes.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url('assets/fonts/josefinsans.woff') format('woff'); font-weight: 100 700; font-style: normal; font-display: swap; }

/* ---------- Huisstijl ---------- */
:root {
	--pjd-groen: #33402F;
	--pjd-groen-2: #4F5D45;
	--pjd-zand: #ECE4D7;
	--pjd-bruin: #73562D;
	--pjd-bg: #F7F3EE;
	--pjd-kaart: #FBF8F4;
	--pjd-tekst: #2B2622;
	--pjd-tekst-2: #4A433D;
	--pjd-grijs: #6B625A;
	--pjd-lijn: #D9CFC3;
	--pjd-lijn-2: #E6DED4;
	--pjd-serif: 'Cormorant Garamond', Georgia, serif;
	--pjd-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pjd-radius: 20px;
	--pjd-max: 1280px;

	/* Elementor gebruikt deze variabelen als je in Site-instellingen niets kiest. */
	--e-global-color-primary: var(--pjd-groen);
	--e-global-color-secondary: var(--pjd-bruin);
	--e-global-color-text: var(--pjd-tekst);
	--e-global-color-accent: var(--pjd-groen-2);
	--e-global-typography-primary-font-family: 'Cormorant Garamond';
	--e-global-typography-secondary-font-family: 'Cormorant Garamond';
	--e-global-typography-text-font-family: 'Figtree';
	--e-global-typography-accent-font-family: 'Figtree';
}

html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--pjd-bg);
	color: var(--pjd-tekst);
	font-family: var(--pjd-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .pjd-serif {
	font-family: var(--pjd-serif);
	font-weight: 500;
	line-height: 1.08;
	color: var(--pjd-tekst);
	margin: 0 0 .5em;
}
h1 { font-size: clamp(40px, 5.5vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 26px; font-weight: 600; }
h4 { font-size: 21px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--pjd-groen-2); }
a:hover, a:focus { color: var(--pjd-groen); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--pjd-groen); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.pjd-wrap { max-width: var(--pjd-max); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* Inhoud van gewone pagina's (zonder Elementor) */
.site-main { max-width: var(--pjd-max); margin: 0 auto; padding: 24px 24px 72px; box-sizing: border-box; }
.site-main .page-header .entry-title { margin-top: 8px; }
body.elementor-page .site-main { max-width: none; padding: 0; }
/* Hello Elementor beperkt .site-main per schermbreedte (bijv. 800px); gebruik onze breedte en houd brede blokken binnen de pagina. */
body:not(.elementor-page) .site-main { max-width: var(--pjd-max); width: 100%; }
.site-main .alignwide, .site-main .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: auto; }
/* Winkelwagen, afrekenen en account: boxed, in het midden (ook als Elementor de pagina ooit heeft geopend). */
body.woocommerce-cart .site-main, body.woocommerce-checkout .site-main, body.woocommerce-account .site-main { max-width: 1120px; width: 100%; margin: 0 auto; padding: 32px 24px 80px; box-sizing: border-box; }

/* ---------- Knoppen en velden ---------- */
.button, button.button, input[type="submit"], .wp-element-button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px;
	background: var(--pjd-groen); color: #fff !important;
	font-family: var(--pjd-sans); font-size: 15px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.button:hover, button.button:hover, input[type="submit"]:hover, .wp-element-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .elementor-button:hover { background: #26301F; color: #fff; }
.button.pjd-licht, .woocommerce a.button.pjd-licht { background: #fff; color: var(--pjd-tekst) !important; border: 1px solid #CFC4B7; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--pjd-groen); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #26301F; }
.woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { opacity: .5; padding: 0 26px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], select, textarea,
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
	box-sizing: border-box; min-height: 46px; padding: 10px 14px;
	border: 1px solid #CFC4B7; border-radius: 10px; background: #fff;
	font-family: var(--pjd-sans); font-size: 15px; color: var(--pjd-tekst);
}
textarea { min-height: 120px; }
input:focus, select:focus, textarea:focus { border-color: var(--pjd-groen); outline: none; box-shadow: 0 0 0 3px rgba(51,64,47,.15); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pjd-groen); }
label { font-size: 14px; font-weight: 600; color: var(--pjd-tekst-2); }

/* ---------- Topbalk en header ---------- */
.pjd-topbar { background: var(--pjd-groen); color: var(--pjd-zand); font-size: 13px; text-align: center; padding: 8px 16px; line-height: 1.4; }
.pjd-topbar a { color: var(--pjd-zand); font-weight: 600; text-decoration: none; }
.pjd-topbar .pjd-ster { color: #E2CF9F; }

.pjd-header { background: var(--pjd-kaart); border-bottom: 1px solid var(--pjd-lijn-2); position: relative; z-index: 40; }
.pjd-header__in { max-width: var(--pjd-max); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px 40px; box-sizing: border-box; }
.pjd-logo { display: flex; align-items: center; flex: none; line-height: 1; text-decoration: none; }
.pjd-logo img, .pjd-logo .custom-logo { height: 60px; width: auto; display: block; }
.pjd-logo__tekst { font-family: var(--pjd-serif); font-size: 28px; color: var(--pjd-groen); }

.pjd-nav { flex: 1 1 auto; }
.pjd-nav ul { list-style: none; margin: 0; padding: 0; }
.pjd-menu { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 15px; font-weight: 500; }
.pjd-menu > li { position: relative; }
.pjd-menu a { color: #2A2A26; text-decoration: none; display: inline-block; padding: 6px 0; }
.pjd-menu > li.current-menu-item > a, .pjd-menu > li.current-menu-ancestor > a, .pjd-menu > li.current_page_item > a {
	color: var(--pjd-groen); box-shadow: inset 0 -2px 0 var(--pjd-groen);
}
.pjd-menu > li.menu-item-has-children > a::after { content: '▾'; font-size: 11px; margin-left: 5px; }
.pjd-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: -18px; z-index: 50;
	min-width: 210px; padding: 8px; margin-top: 10px;
	background: #fff; border: 1px solid var(--pjd-lijn-2); border-radius: 14px;
	box-shadow: 0 16px 32px rgba(43,38,34,.12);
}
.pjd-menu .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pjd-menu li:hover > .sub-menu, .pjd-menu li:focus-within > .sub-menu { display: block; }
.pjd-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
.pjd-menu .sub-menu a:hover, .pjd-menu .sub-menu .current-menu-item > a { background: var(--pjd-bg); color: var(--pjd-groen); }

.pjd-icons { display: flex; gap: 4px; margin-left: auto; flex: none; }
.pjd-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #2A2A26; text-decoration: none; position: relative; border: 0; background: transparent; cursor: pointer; padding: 0; }
.pjd-icon svg { width: 20px; height: 20px; }
.pjd-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--pjd-groen); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.pjd-cart-count:empty, .pjd-cart-count[data-count="0"] { display: none; }
.pjd-burger { display: none; }

.pjd-search { display: none; border-top: 1px solid var(--pjd-lijn-2); background: var(--pjd-kaart); }
.pjd-search.is-open { display: block; }
.pjd-search form { max-width: var(--pjd-max); margin: 0 auto; padding: 12px 24px; display: flex; gap: 8px; box-sizing: border-box; }
.pjd-search input[type="search"] { flex: 1; }

@media (max-width: 960px) {
	.pjd-header__in { flex-wrap: wrap; gap: 8px 12px; }
	.pjd-logo img, .pjd-logo .custom-logo { height: 46px; }
	.pjd-burger { display: inline-flex; }
	.pjd-nav { order: 3; flex: 1 1 100%; display: none; }
	.pjd-nav.is-open { display: block; }
	.pjd-menu { flex-direction: column; gap: 0; padding: 8px 0; }
	.pjd-menu > li { border-top: 1px solid var(--pjd-lijn-2); }
	.pjd-menu a { padding: 12px 0; }
	.pjd-menu .sub-menu { display: block; position: static; box-shadow: none; border: 0; margin: 0 0 8px; padding: 0 0 0 14px; background: transparent; }
	.pjd-menu .sub-menu::before { display: none; }
	.pjd-menu > li.menu-item-has-children > a::after { display: none; }
}

/* ---------- Kruimelpad ---------- */
.woocommerce .woocommerce-breadcrumb, .pjd-breadcrumb { font-size: 13px; color: var(--pjd-grijs); margin: 0 0 16px; }
.woocommerce .woocommerce-breadcrumb a, .pjd-breadcrumb a { color: var(--pjd-grijs); }

/* ---------- Footer ---------- */
.pjd-footer { background: var(--pjd-groen); color: var(--pjd-zand); font-size: 13px; }
.pjd-footer a { color: var(--pjd-zand); text-decoration: none; }
.pjd-footer a:hover { text-decoration: underline; color: #fff; }
.pjd-footer__in { max-width: var(--pjd-max); margin: 0 auto; padding: 36px 24px 20px; display: grid; grid-template-columns: minmax(200px, 1.25fr) repeat(3, minmax(130px, 1fr)) minmax(230px, 1.35fr); gap: 24px 32px; box-sizing: border-box; }
@media (max-width: 1100px) { .pjd-footer__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pjd-footer__extra { grid-column: span 2; } }
@media (max-width: 640px) { .pjd-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pjd-footer__in > :first-child, .pjd-footer__extra { grid-column: 1 / -1; } }
.pjd-footer img.pjd-footer__logo { height: 48px; width: auto; max-width: none; display: block; margin: 0 0 10px; }
.pjd-footer p { margin: 0; line-height: 1.55; }
.pjd-footer__kop { margin: 0 0 8px; font-family: var(--pjd-sans); font-weight: 600; font-size: 14px; color: var(--pjd-zand); }
.pjd-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pjd-footer__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pjd-keurmerk:empty { display: none; }
.pjd-keurmerk-plek { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px dashed #8C977F; font-size: 12px; color: #C9C3B4; }
.pjd-footer .pjd-nieuwsbrief input[type="email"] { background: #3D4B38; border-color: #66735F; color: var(--pjd-zand); min-height: 38px; border-radius: 999px; font-size: 13px; }
.pjd-footer .pjd-nieuwsbrief button, .pjd-footer .pjd-nieuwsbrief input[type="submit"] { background: var(--pjd-zand); color: var(--pjd-groen) !important; min-height: 38px; padding: 0 14px; font-size: 13px; }
.pjd-footer__onder { max-width: var(--pjd-max); margin: 0 auto; padding: 12px 24px 18px; border-top: 1px solid #4A5844; font-size: 12px; color: #C9C3B4; box-sizing: border-box; }

/* ---------- WooCommerce ---------- */
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
	border-top: 0; border-radius: 14px; background: #fff; border: 1px solid var(--pjd-lijn-2); color: var(--pjd-tekst); font-size: 14px;
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--pjd-groen); }
.woocommerce-cart .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce table.shop_table {
	background: var(--pjd-kaart); border: 1px solid var(--pjd-lijn) !important; border-radius: var(--pjd-radius); border-collapse: separate;
}
.woocommerce table.shop_table { overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--pjd-lijn-2); padding: 14px 16px; }
.woocommerce-cart .cart_totals { padding: 20px 22px; box-sizing: border-box; }
.woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout #order_review { padding: 20px 22px; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 26px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--pjd-serif); font-size: 22px; font-weight: 600; color: var(--pjd-tekst); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--pjd-tekst); font-weight: 600; }
.woocommerce span.onsale { background: var(--pjd-bruin); border-radius: 999px; }
.woocommerce-checkout #payment { background: transparent; border-radius: 14px; }
.woocommerce-checkout #payment ul.payment_methods { border-color: var(--pjd-lijn-2); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: 10px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
#place_order { width: 100%; min-height: 54px; font-size: 16px; }

.pjd-box { background: var(--pjd-kaart); border: 1px solid var(--pjd-lijn); border-radius: var(--pjd-radius); padding: 18px 20px; margin: 0 0 16px; }
.pjd-melding { padding: 10px 12px; border-radius: 10px; background: #F1ECE4; font-size: 13px; color: var(--pjd-tekst-2); line-height: 1.5; margin: 0 0 14px; }
.pjd-gratis { font-size: 13px; color: var(--pjd-groen-2); margin: 0 0 14px; }
.pjd-gratis__balk { height: 6px; border-radius: 999px; background: var(--pjd-lijn-2); overflow: hidden; margin-bottom: 6px; }
.pjd-gratis__balk span { display: block; height: 100%; background: var(--pjd-groen); }

/* ---------- Afrekenen in stappen (assets/js/afrekenen-stappen.js) ---------- */
[data-pjd-stap="1"] :is(#shipping-method, #shipping-option, #pickup-options, #order-notes, #payment-method, .wc-block-checkout__terms, .wc-block-checkout__actions),
[data-pjd-stap="2"] :is(#contact-fields, #shipping-fields, #billing-fields, #payment-method, .wc-block-checkout__terms, .wc-block-checkout__actions),
[data-pjd-stap="3"] :is(#contact-fields, #shipping-method, #shipping-fields, #billing-fields, #shipping-option, #pickup-options, #order-notes) { display: none !important; }
.pjd-stappen__balk { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; counter-reset: none; }
.pjd-stappen__balk li { flex: 1; position: relative; }
.pjd-stappen__balk li + li::before { content: ""; position: absolute; top: 15px; right: calc(50% + 22px); width: calc(100% - 44px); height: 1px; background: var(--pjd-lijn); }
.pjd-stappen__balk button { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--pjd-sans); font-size: 13px; color: var(--pjd-grijs); cursor: default; }
.pjd-stappen__nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--pjd-lijn); background: #fff; font-weight: 600; font-size: 13px; }
.pjd-stappen__balk .is-actief button { color: var(--pjd-groen); font-weight: 600; }
.pjd-stappen__balk .is-actief .pjd-stappen__nr { background: var(--pjd-groen); border-color: var(--pjd-groen); color: #fff; }
.pjd-stappen__balk .is-klaar button { cursor: pointer; color: var(--pjd-tekst); }
.pjd-stappen__balk .is-klaar .pjd-stappen__nr { background: var(--pjd-zand); border-color: var(--pjd-zand); color: var(--pjd-groen); }
.pjd-stappen__balk .is-klaar button:hover .pjd-stappen__naam { text-decoration: underline; }
.pjd-stappen__balk .is-klaar + li::before, .pjd-stappen__balk .is-actief::before { background: var(--pjd-groen); }
.pjd-stappen__samenvatting:not(:empty) { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 18px; margin: 0 0 24px; background: #fff; border: 1px solid var(--pjd-lijn-2); border-radius: 14px; font-size: 14px; }
.pjd-stappen__samenvatting p { margin: 0; line-height: 1.5; }
.pjd-stappen__kop { font-weight: 600; margin-bottom: 2px !important; }
.pjd-stappen__samenvatting button { all: unset; cursor: pointer; color: var(--pjd-groen); text-decoration: underline; font-size: 14px; }
.pjd-stappen__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.pjd-stappen__nav button { font-family: var(--pjd-sans); font-size: 15px; cursor: pointer; border-radius: 999px; min-height: 48px; padding: 0 26px; }
.pjd-stappen__verder { margin-left: auto; background: var(--pjd-groen); color: #fff; border: 0; font-weight: 600; }
.pjd-stappen__verder:hover { background: #26301F; }
.pjd-stappen__terug { background: transparent; color: var(--pjd-tekst); border: 1px solid #CFC4B7; }
.pjd-stappen__nav button[hidden] { display: none; }
[data-pjd-stap="3"] .pjd-stappen__nav { margin-top: 0; }
@media (max-width: 600px) {
	.pjd-stappen__balk { margin-bottom: 20px; }
	.pjd-stappen__nav { flex-direction: column-reverse; align-items: stretch; }
	.pjd-stappen__verder { margin-left: 0; }
}
body .pjd-verzendtabel { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 6px; }
body .pjd-verzendtabel th, body .pjd-verzendtabel td { text-align: left; padding: 10px 8px 10px 0; border: 0; border-top: 1px solid var(--pjd-lijn-2); line-height: 1.4; vertical-align: top; }
body .pjd-verzendtabel th { font-weight: 600; font-size: 13px; color: var(--pjd-grijs); border-top: 0; }
body .pjd-verzendtabel td:not(:first-child), body .pjd-verzendtabel th:not(:first-child) { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 12px; }
.pjd-klein { font-size: 13px; color: var(--pjd-grijs); margin: 0; }

/* ---------- WebwinkelKeur ---------- */
/* Zwevende widget van WebwinkelKeur verbergen: score staat in de topbalk, keurmerk in de footer. */
#wwkPreactRoot, .wwk-sidebar--float-mobile-wrapper, .wwk-sidebar-wrapper, #wwkSidebarPopup { display: none !important; }
.pjd-wwk[hidden], .pjd-wwk-top[hidden] { display: none !important; }
.pjd-footer .pjd-wwk { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #3D4B38; border: 1px solid #66735F; color: var(--pjd-zand); text-decoration: none; max-width: 280px; }
.pjd-footer .pjd-wwk:hover { text-decoration: none; border-color: var(--pjd-zand); color: var(--pjd-zand); }
.pjd-wwk__logo { width: 44px; height: 44px; border-radius: 12px; background: #FE008C; flex: none; display: grid; place-items: center; }
.pjd-wwk__logo img { width: 28px; height: 28px; display: block; }
.pjd-wwk__tekst { display: flex; flex-direction: column; line-height: 1.3; }
.pjd-wwk__naam { font-size: 12px; color: #C9C3B4; }
.pjd-wwk__score { font-size: 13px; }
.pjd-wwk__score strong { font-size: 18px; font-weight: 700; color: #fff; }
.pjd-wwk__sterren { letter-spacing: 1px; margin-left: 4px; }
.pjd-wwk__sterren .vol { color: #E2CF9F; }
.pjd-wwk__sterren .half { color: #E2CF9F; opacity: .6; }
.pjd-wwk__sterren .leeg { color: #66735F; }
.pjd-wwk__aantal { font-size: 12px; color: #C9C3B4; }