/* =========================================================================
   Pagina-specifieke layout
   ========================================================================= */

/* ---------- Home ---------- */
.container.home { padding-top: 8px; } /* Niet op <body class="home"> (zou de header laten zakken). */

.hero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 620px; padding: 56px; }
.hero__title { max-width: 660px; font-size: clamp(3rem, 1.6rem + 3.6vw, 3.5rem); }
.hero__lead { margin-top: 28px; max-width: 540px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__art { min-height: 620px; padding: 0; }
.hero__card { position: absolute; left: 50%; top: 48%; width: min(340px, 72%); transform: translate(-50%, -50%) rotate(8deg); }
.hero__pills { position: absolute; left: 32px; right: 32px; bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

.facts { margin-top: var(--gutter); }
.audience { padding-top: 40px; }

.order-visual { display: flex; flex-direction: column; min-height: 640px; padding: 56px; }
.order-visual .eyebrow { margin-bottom: 16px; }
.order-visual__title { max-width: 560px; }
.order-visual__text { margin-top: 20px; max-width: 500px; }
.order-visual__stage { position: relative; flex: 1; min-height: 320px; margin-top: 24px; }
.order-visual__card { position: absolute; left: 4%; bottom: 0; width: 320px; transform: rotate(6deg); }
.order-visual__phone { position: absolute; right: 6%; bottom: -176px; width: 250px; }
.order-card .checks { margin-top: 24px; }
.qty-fieldset { border: 0; margin: 28px 0 0; padding: 0; min-width: 0; }
.qty-fieldset .qty-label { display: block; margin-top: 0; padding: 0; }
.order-card__stepper .stepper__input { flex: 1; }

.why-visual { min-height: 560px; padding: 48px; }
.why-visual .h3 { max-width: 340px; }
.why-visual__phone { position: absolute; left: 50%; bottom: -150px; width: 260px; transform: translateX(-50%); }
.why-list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

.faq-grid { gap: 48px; align-items: start; }
.faq-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.faq-intro p { max-width: 400px; }

.cta__lead { margin: 20px 0 32px; max-width: 560px; }

@media (max-width: 1080px) {
	.hero__art { min-height: 460px; }
	.order-visual { min-height: 0; }
	.why-visual { min-height: 0; }
	.why-visual .h3 { max-width: none; }
}
@media (max-width: 820px) {
	.hero__copy { min-height: 0; padding: 28px; }
	.hero__art { min-height: 380px; }
	.hero__pills { left: 16px; right: 16px; bottom: 16px; gap: 8px; }
	.hero__pills .pill { font-size: .8125rem; padding: 8px 12px; }
	.hero__pills .pill--white { padding-left: 8px; }
	.hero__pills .pill__star { width: 26px; height: 26px; }
	.hero__card { top: 40%; width: 78%; }
	.order-visual { padding: 28px; }
	.order-card { padding: 24px; }
	.why-list { grid-template-rows: none; }
}

/* ---------- Standaard pagina ---------- */
.page-tile { margin-top: 8px; padding: 64px; }
.page-tile__content { margin-top: 32px; }
.shop-page { padding-top: 8px; }
.shop-page__title { margin-bottom: 32px; }
@media (max-width: 820px) { .page-tile { padding: 28px; } }

/* ---------- Bestellen ---------- */
.order-page { padding-top: 8px; }
.order-page__grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 64px; align-items: center; }
.order-form .stock { margin-bottom: 12px; }
.order-form__question { margin-top: 16px; }
.order-form__sub { margin-top: 8px; }
.order-form__buy { display: flex; gap: 12px; align-items: stretch; margin-top: 28px; }
.order-form__submit { flex: 1; }
.order-form__total { display: flex; justify-content: space-between; margin-top: 14px; }
.order-form__usps { margin: 28px 0; }
.order-form .callout { margin-bottom: 28px; }
.order-form__help { margin-top: 24px; }
.order-page__art { min-height: 640px; padding: 0; }
.order-page__card { position: absolute; left: 50%; top: 52%; width: min(476px, 76%); transform: translate(-50%, -50%) rotate(6deg); }
@media (max-width: 1080px) { .order-page__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .order-page__art { min-height: 440px; order: -1; } }
@media (max-width: 560px) {
	.order-form__buy { flex-direction: column; }
	.stepper { align-self: flex-start; }
	.order-page__art { min-height: 300px; }
	.price-badge { top: 24px; right: 24px; font-size: 1.5rem; padding: 10px 16px; }
}

/* ---------- Instructies ---------- */
.guide { padding-top: 8px; }
.guide-hero { display: flex; flex-direction: column; gap: 20px; padding: 56px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jump-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: var(--white); font-weight: 600; text-decoration: none; }
.jump-links a:hover { color: var(--forest); background: var(--paper); }
.jump-links span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--forest); color: var(--white); font-size: 13px; font-weight: 700; }
.guide-link { display: flex; flex-direction: column; gap: 16px; min-height: 420px; }
.link-field { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--white); color: var(--forest); font-size: var(--fs-small); font-weight: 500; }
.link-field .icon { flex: none; }
.link-field__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-link__card { position: absolute; right: -12px; bottom: -16px; width: 300px; transform: rotate(8deg); }
.shot-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin: 0; padding: 0; }
.shot-step { padding: 24px 24px 32px; border-radius: var(--radius-lg); background: var(--white); }
.shot-step__img, .shot-step__placeholder { width: 100%; aspect-ratio: 5 / 2; border-radius: var(--radius-md); object-fit: cover; }
.shot-step__placeholder { display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--paper); border: 1.5px dashed rgba(3,58,48,.25); color: var(--ink-muted); font-size: var(--fs-small); }
.shot-step__body { display: flex; gap: 16px; margin-top: 28px; padding-inline: 16px; }
.shot-step__title { margin-bottom: 6px; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.device { display: flex; flex-direction: column; padding: 36px; }
.device__title { margin-top: 24px; }
.device__sub { margin: 4px 0 20px; font-weight: 600; }
.tip-tile { display: flex; flex-direction: column; gap: 10px; padding: 40px; }
.tip-tile .icon-circle { margin-bottom: 30px; }
.policy-note { margin-top: 24px; }
@media (max-width: 1080px) { .guide-link { min-height: 300px; } }
@media (max-width: 820px) { .guide-hero { padding: 28px; } .guide-link { min-height: 0; } .shot-steps { grid-template-columns: minmax(0, 1fr); } .shot-step__body { padding-inline: 0; } .device, .tip-tile { padding: 28px; } .guide-link__card { width: 220px; } }

/* ---------- Contact ---------- */
.contact { padding-top: 8px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; padding: 56px; min-height: 640px; }
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 12px 0 0; padding: 0; }
.contact-list li { display: flex; align-items: center; gap: 16px; }
.contact-list li > span:last-child { display: flex; flex-direction: column; }
.contact-list a { color: var(--white); font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--white); text-decoration: underline; }
.contact-form { padding: 56px; }
.contact-form .form { margin-top: 24px; }
.contact-form .btn { align-self: flex-start; }
.contact-list strong { font-weight: 600; }
.contact-hours { display: flex; align-items: flex-start; gap: 12px; margin: auto 0 0; padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); }
.contact-hours .icon { flex: none; margin-top: 1px; color: var(--coral); }
.contact-form__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 8px; }
.contact-form__foot p { flex: 1 1 260px; max-width: 340px; margin: 0; }
.contact-form__foot .btn { align-self: center; }
.contact-quick { padding-top: 56px; }
.contact-quick > .h3 { margin-bottom: 24px; }

/* Contact Form 7 in de opmaak van het thema (CF7-stylesheet staat uit) */
.contact-form .wpcf7 { margin-top: 24px; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7 .hidden-fields-container { display: none; } /* alleen verborgen velden; geen rand/ruimte */
.contact-form .wpcf7-not-valid { border-color: var(--error) !important; }
.contact-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--error); }
.contact-form .wpcf7-submit { padding-right: 56px; background-image: var(--icon-arrow-white); background-repeat: no-repeat; background-position: right 26px center; background-size: 18px; }
.contact-form .wpcf7-spinner { display: none; }
.contact-form .wpcf7-form.submitting .wpcf7-submit { opacity: .6; pointer-events: none; }
.contact-form .wpcf7-response-output { margin: 20px 0 0; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--sand); }
.contact-form .wpcf7-form.sent .wpcf7-response-output { background: #E3EFE7; color: var(--forest); }
.contact-form .wpcf7-form.invalid .wpcf7-response-output, .contact-form .wpcf7-form.failed .wpcf7-response-output, .contact-form .wpcf7-form.spam .wpcf7-response-output { background: #F6E1DF; color: var(--error); }
.contact-form .wpcf7-response-output:empty, .contact-form .wpcf7-form.init .wpcf7-response-output { display: none; }
.contact-form .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root { --icon-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.quick-link { display: flex; align-items: center; gap: 16px; padding: 28px; text-decoration: none; transition: background-color .15s; }
.quick-link:hover { background: #ddd4c4; color: var(--forest); }
.quick-link > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
@media (max-width: 820px) { .contact-info, .contact-form { padding: 28px; min-height: 0; } .contact-hours { margin-top: 12px; } .contact-form__foot .btn { width: 100%; } }

/* ---------- Inloggen (WooCommerce form-login) ---------- */
.login-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.login-card { display: flex; flex-direction: column; gap: 16px; padding: 64px; }
.login-card .icon-circle { margin-bottom: 8px; }
.login-card__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.login-card__new { margin-top: 8px; }
.login-card [data-focus]:focus { outline: none; }
.login-card .alert { margin: 0; }
.login-card #ttrc-ml-msg:empty { display: none; }
.magic-login { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.magic-login .btn .icon { margin-left: 4px; }
.login-card__sent { display: flex; flex-direction: column; gap: 16px; }
.login-card__sent .lead strong { color: var(--forest); font-weight: 600; overflow-wrap: anywhere; }
.login-card > .form { margin-top: 16px; }
.login-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.login-card__actions .magic-login { margin: 0; }
.login-card__actions .btn[disabled] { opacity: .55; cursor: not-allowed; }

.login-art { min-height: 620px; padding: 0; }
.login-art__card { position: absolute; left: 50%; top: 50%; width: min(340px, 74%); transform: translate(-50%, -50%) rotate(8deg); }
@media (max-width: 1080px) { .login-page { grid-template-columns: minmax(0, 1fr); } .login-art { display: none; } }
@media (max-width: 820px) { .login-card { padding: 28px; } }