/* KP Interieur: vormen en kleine helpers. Kleuren en lettertypes staan in theme.json. */

:root{
	--kp-oranje: var(--wp--preset--color--oranje);
	--kp-inkt: var(--wp--preset--color--inkt);
	--kp-zand: var(--wp--preset--color--zand);
	--kp-lijn: var(--wp--preset--color--lijn);
}

/* ---------- Vormen voor afbeeldingen ---------- */
.wp-block-image.is-style-boog img{border-radius:999px 999px 4px 4px !important;aspect-ratio:11/16;object-fit:cover;width:100%}
.wp-block-image.is-style-cirkel img{border-radius:999px !important;aspect-ratio:1/1;object-fit:cover;width:100%}
.wp-block-image.is-style-ovaal img{border-radius:50% !important;aspect-ratio:5/4;object-fit:cover;width:100%}
.wp-block-image.is-style-kader{position:relative;margin-right:22px;margin-bottom:22px}
.wp-block-image.is-style-kader::before{content:"";position:absolute;left:22px;top:22px;right:-22px;bottom:-22px;border:1.5px solid var(--kp-oranje);border-radius:4px;z-index:0}
.wp-block-image.is-style-kader img{position:relative;z-index:1}
.wp-block-image.is-style-polaroid{background:#fff;padding:12px 12px 44px;box-shadow:var(--wp--preset--shadow--zacht);transform:rotate(-3deg)}
.wp-block-image.is-style-polaroid:nth-of-type(2n){transform:rotate(3deg)}
.wp-block-image.is-style-polaroid img{border-radius:0 !important;aspect-ratio:1/1;object-fit:cover;width:100%}
.wp-block-image.is-style-polaroid figcaption{position:absolute;left:14px;bottom:12px;margin:0;font-size:.8125rem;font-weight:600;color:var(--kp-inkt)}
.wp-block-image.is-style-zon,.wp-block-cover.is-style-zon{position:relative;isolation:isolate}
.wp-block-image.is-style-zon::before,.wp-block-cover.is-style-zon::before{content:"";position:absolute;left:-56px;top:-40px;width:clamp(120px,14vw,200px);aspect-ratio:1;border-radius:999px;background:var(--kp-oranje);z-index:-1}
.wp-block-cover.is-style-zon{overflow:visible}

/* ---------- Groepen ---------- */
.wp-block-group.is-style-groene-band{background:var(--wp--preset--color--groen);color:var(--wp--preset--color--steen)}
.wp-block-group.is-style-groene-band :where(h1,h2,h3,a:not(.wp-element-button)){color:inherit}
.wp-block-group.is-style-zandkaart{background:var(--kp-zand);border-radius:4px}
.wp-block-group.is-style-stiksel{border-top:2px dashed var(--kp-oranje);padding-top:var(--wp--preset--spacing--40)}

/* Foto die boven en onder uit een band steekt: zet class kp-steekt-uit op de afbeelding in een groene band. */
.kp-steekt-uit{margin-top:-120px !important;margin-bottom:-120px !important;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.kp-steekt-uit img{width:100%;height:100%;object-fit:cover}
@media (max-width:781px){.kp-steekt-uit{margin-top:-90px !important;margin-bottom:24px !important}}

/* ---------- Tekst ---------- */
p.is-style-label{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kp-oranje);margin-bottom:.5rem}
.kp-watermerk{position:absolute;right:-20px;bottom:-60px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(150px,25vw,360px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(242,238,232,.14);pointer-events:none;user-select:none}

/* ---------- Lopende band met categorieën ---------- */
.kp-ticker{border-top:1.5px solid var(--kp-inkt);border-bottom:1.5px solid var(--kp-inkt);overflow:hidden;white-space:nowrap}
.kp-ticker__track{display:inline-flex;gap:2.5rem;padding:1rem 0;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:clamp(1rem,1.6vw,1.375rem);animation:kp-ticker 40s linear infinite}
.kp-ticker__track a{text-decoration:none}
.kp-ticker__track span[aria-hidden]{color:var(--kp-oranje)}
@keyframes kp-ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kp-ticker__track{animation:none}}

/* USP-balk bovenaan */
.kp-usp{background:var(--kp-inkt);color:var(--wp--preset--color--steen);font-size:.75rem;font-weight:500;text-align:center;padding:.55rem 1rem}
.kp-usp>*+*::before{content:"·";margin:0 .75rem;opacity:.6}
.kp-usp a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
@media (max-width:600px){.kp-usp span:nth-child(n+3){display:none}}

/* ---------- Productkaarten (WooCommerce product collection) ---------- */
.wp-block-woocommerce-product-image{display:block;background:#fff;border:1px solid var(--wp--preset--color--lijn);border-radius:4px;padding:6%;overflow:hidden;box-shadow:0 2px 10px rgba(28,25,23,.06)}
.wc-block-components-product-image img,.wp-block-woocommerce-product-image img{border-radius:0!important;aspect-ratio:4/5;object-fit:contain!important;background:transparent;mix-blend-mode:multiply}
.wc-block-components-product-sale-badge,.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge{background:var(--kp-oranje) !important;color:#fff !important;border:0 !important;border-radius:999px !important;font-size:.6875rem !important;font-weight:600 !important;padding:.3rem .6rem !important;text-transform:none !important}
.wp-block-post-title a{text-decoration:none}

/* ---------- Header ---------- */
.kp-header .wp-block-navigation a{font-size:.875rem;font-weight:500}
.kp-icoon{display:inline-flex;width:44px;height:44px;border-radius:999px;border:1.5px solid var(--kp-inkt);align-items:center;justify-content:center}
.kp-icoon--vol{background:var(--kp-inkt);color:var(--wp--preset--color--steen)}

/* ---------- Hero-collage (desktop) ---------- */
.kp-hero{position:relative}
.kp-hero__kaart{position:relative;z-index:2;background:var(--wp--preset--color--steen)}
@media (min-width:782px){
	.kp-hero__kaart{margin-left:-28% !important;margin-top:4.5rem !important;padding:2.5rem 0 2.25rem 3rem !important;border-radius:4px 0 0 0}
}

/* Toegankelijkheid: duidelijke focus overal */
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--kp-oranje);outline-offset:3px}

/* Hero-titel: groot maar nooit midden in een woord breken */
.kp-hero h1{font-size:clamp(2.75rem,5.2vw,5.25rem);overflow-wrap:normal;word-break:normal;hyphens:manual}
.kp-hero .is-style-cirkel{margin-top:-1rem !important}

/* Kop: zoekknop als rond icoon, zoals WhatsApp */
.kp-header .wp-block-search__button{background:transparent !important;color:var(--kp-inkt) !important;border:1.5px solid var(--kp-inkt) !important;border-radius:999px !important;width:44px;height:44px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.kp-header .wp-block-search__button svg{width:20px;height:20px;fill:currentColor}
.kp-header .wc-block-mini-cart__button{width:44px;height:44px;border-radius:999px;background:var(--kp-inkt);color:var(--wp--preset--color--steen);justify-content:center}

/* Voet: lijsten zonder bolletjes */
footer .wp-block-list{list-style:none}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* Productpagina */
.single-product .woocommerce-product-gallery,.wp-block-woocommerce-product-image-gallery{width:100% !important;max-width:none !important}
.single-product main h1.wp-block-post-title{font-size:var(--wp--preset--font-size--xxl)}
.wp-block-woocommerce-product-details h2{font-size:var(--wp--preset--font-size--xl)}
@media (max-width:600px){.kp-conf__stof span{width:48px}.kp-conf__stof i{width:40px;height:52px}}
/* Galerij: vaste verhouding zodat de tekst ernaast niet verspringt (CLS) */
.woocommerce-product-gallery{aspect-ratio:4/5.05;overflow:hidden}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{aspect-ratio:1/1;object-fit:cover;width:100%}
.woocommerce-product-gallery .flex-control-thumbs{display:grid !important;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 0 !important;padding:0 !important}
.woocommerce-product-gallery .flex-control-thumbs li{width:auto !important;margin:0 !important;list-style:none}
.woocommerce-product-gallery .flex-control-thumbs img{aspect-ratio:1/1;object-fit:cover;border-radius:4px}