/**
 * Block Styles — Tabweb Theme
 *
 * Alle block-specifieke CSS. Gebruikt --clr-* custom properties
 * uit main.css en rem-eenheden (HTML base = 62.5%).
 *
 * @package Tabweb
 * @since   1.0.0
 */

/* ==========================================================================
   Sectie witruimte — .tw-section
   ========================================================================== */
.tw-section { position: relative; }
.tw-section--spacing-small { padding-block: 2.4rem; }
.tw-section--spacing-medium { padding-block: 4.8rem; }
.tw-section--spacing-large { padding-block: 8rem; }

@media (max-width: 767.98px) {
.tw-section--spacing-small { padding-block: 1.6rem; }
.tw-section--spacing-medium { padding-block: 3.2rem; }
.tw-section--spacing-large { padding-block: 4.8rem; }
}

/* ==========================================================================
   Background Image — .is-background-image
   ========================================================================== */
.is-background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }

/* ==========================================================================
   Header Home — .tw-header-home
   ========================================================================== */
.tw-header-home { position: relative; min-height: 70vh; min-height: 70svh; display: flex; align-items: center; justify-content: center; padding: 12rem 0 8rem; background-color: var(--clr-dark); color: #fff; text-align: center; overflow: hidden; }

/* Image wrapper — background cover on desktop */
.tw-header-home__media { position: absolute; inset: 0; z-index: 0; }
.tw-header-home__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Cinematic overlay — multi-layer gradient for depth */
.tw-header-home--overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.5) 100% ), radial-gradient(ellipse at 30% 20%, rgba(91, 74, 138, 0.3) 0%, transparent 60% ); z-index: 1; }
.tw-header-home__inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem; animation: heroFadeIn 1s ease-out both; }

/* Badge / tagline above the title */
.tw-header-home__badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 2rem; border-radius: 10rem; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); animation: heroFadeIn 1s 0.15s ease-out both; }
.tw-header-home__title { font-size: clamp(3.6rem, 7vw, 7.2rem); font-weight: 800; line-height: 1.05; margin: 0; color: #fff; letter-spacing: -0.03em; max-width: 90rem; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); animation: heroFadeIn 1s 0.3s ease-out both; }
.tw-header-home__subtitle { font-size: clamp(1.6rem, 2.2vw, 2.2rem); color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.6; max-width: 60rem; font-weight: 400; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.15); animation: heroFadeIn 1s 0.45s ease-out both; }
.tw-header-home__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 1.2rem; animation: heroFadeIn 1s 0.6s ease-out both; }

/* Scroll indicator (bouncing arrow at bottom) */
.tw-header-home__scroll { position: absolute; bottom: 3.2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.6); transition: color var(--ts-25) var(--ts-function); animation: heroBounce 2s 1.5s ease-in-out infinite; }
.tw-header-home__scroll:hover { color: #fff; }

/* Entrance animation */

@keyframes heroFadeIn {
from { opacity: 0; transform: translateY(2.4rem); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes heroBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}

/* --- Mobile: stacked image + text layout --- */

@media (max-width: 767.98px) {
.tw-header-home { display: flex; flex-direction: column; min-height: auto; padding: 0; background-color: var(--clr-white, #fff); color: var(--clr-dark); overflow: visible; }
.tw-header-home__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; border-radius: 0 0 2rem 2rem; overflow: hidden; }
.tw-header-home--overlay::before { display: none; }
.tw-header-home__inner { padding: 3.2rem 2rem 0; gap: 1.4rem; }
.tw-header-home__badge { background: var(--clr-secondary); border: none; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tw-header-home__title { color: var(--clr-heading, var(--clr-dark)); text-shadow: none; font-size: clamp(2.8rem, 6vw, 4rem); }
.tw-header-home__subtitle { color: var(--clr-text); text-shadow: none; opacity: 0.75; }
.tw-header-home__actions { flex-direction: column; align-items: center; width: 100%; }
.tw-header-home__actions .btn { width: 100%; max-width: 32rem; }
.tw-header-home__scroll { display: none; }
}

/* ==========================================================================
   Header Subpage — .tw-header-subpage
   ========================================================================== */
.tw-header-subpage { position: relative; background: var(--clr-secondary); color: var(--clr-contrast); padding: 12rem 2.4rem 4rem; text-align: center; overflow: hidden; }

@media (min-width: 992px) {
.tw-header-subpage { padding-top: 16rem; padding-bottom: 6rem; }
}
.tw-header-subpage__inner { position: relative; z-index: 2; max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.tw-header-subpage__title { font-size: clamp(2.8rem, 4vw, 5.6rem); font-weight: 700; margin: 0; color: var(--clr-contrast); line-height: 1; }
.tw-header-subpage__subtitle { font-size: clamp(1.6rem, 2vw, 2rem); opacity: 0.85; margin: 0.8rem 0 0; }

/* ==========================================================================
   Tekst — .tw-text
   ========================================================================== */
.tw-text { padding: 4.8rem 2.4rem; }
.tw-text__inner { margin-inline: auto; }
.tw-text--narrow .tw-text__inner { max-width: var(--wp--style--global--content-size, 720px); }
.tw-text--wide .tw-text__inner { max-width: var(--wp--style--global--wide-size, 1200px); }
.tw-text__content h2, .tw-text__content h3, .tw-text__content h4 { color: var(--clr-secondary); margin-top: 0; margin-bottom: .5rem; }
.tw-text__content p { line-height: 1.7; color: var(--clr-text); }
.tw-text__content a { color: var(--clr-accent); }
.tw-text__content a:hover { color: var(--clr-highlight); }
.tw-text__content ul, .tw-text__content ol { padding-left: 2.4rem; line-height: 1.7; }
.tw-text__content blockquote { border-left: 4px solid var(--clr-highlight); padding-left: 1.6rem; margin-left: 0; font-style: italic; color: var(--clr-text); opacity: 0.8; }
.tw-text__actions { margin-top: 1.2rem; }

/* ==========================================================================
   Tekst & Media — .tw-text-media
   ========================================================================== */
.tw-text-media { padding: 4.8rem 2.4rem; }
.tw-text-media__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; }
.tw-text-media--reversed .tw-text-media__inner { direction: rtl; }
.tw-text-media--reversed .tw-text-media__inner > * { direction: ltr; }
.tw-text-media__content h2, .tw-text-media__content h3 { color: var(--clr-secondary); margin-top: 0; }
.tw-text-media__content p { line-height: 1.7; color: var(--clr-text); }
.tw-text-media__content a { color: var(--clr-accent); }
.tw-text-media__content a:hover { color: var(--clr-highlight); }
.tw-text-media__image { width: 100%; height: auto; border-radius: var(--tw-radius-lg); box-shadow: var(--tw-shadow-md); }

/* Aspect ratio modifiers */
.tw-text-media--ratio-1-1 .tw-text-media__image { object-fit: cover; aspect-ratio: 1 / 1; }
.tw-text-media--ratio-4-3 .tw-text-media__image { object-fit: cover; aspect-ratio: 4 / 3; }
.tw-text-media--ratio-3-4 .tw-text-media__image { object-fit: cover; aspect-ratio: 3 / 4; }
.tw-text-media--ratio-16-9 .tw-text-media__image { object-fit: cover; aspect-ratio: 16 / 9; }
.tw-text-media--ratio-3-2 .tw-text-media__image { object-fit: cover; aspect-ratio: 3 / 2; }
.tw-text-media--ratio-2-3 .tw-text-media__image { object-fit: cover; aspect-ratio: 2 / 3; }
.tw-text-media__video { border-radius: var(--tw-radius-lg); overflow: hidden; box-shadow: var(--tw-shadow-md); }
.tw-text-media__video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; }

@media (max-width: 767.98px) {
.tw-text-media__inner { grid-template-columns: 1fr; }
.tw-text-media--reversed .tw-text-media__inner { direction: ltr; }
.tw-text-media__media { order: -1; }
}

/* ==========================================================================
   Media — .tw-media
   ========================================================================== */
.tw-media { margin: 0; padding: 3.2rem 0; }
.tw-media--contained .tw-media__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: 2.4rem; }
.tw-media--full .tw-media__inner { width: 100%; }
.tw-media__image { width: 100%; height: auto; display: block; border-radius: var(--tw-radius-lg); }
.tw-media--full .tw-media__image { border-radius: 0; }
.tw-media__video { border-radius: var(--tw-radius-lg); overflow: hidden; }
.tw-media--full .tw-media__video { border-radius: 0; }
.tw-media__video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; }
.tw-media__caption { text-align: center; font-size: 1.4rem; color: var(--clr-text); opacity: 0.7; margin-top: 0.8rem; padding-inline: 2.4rem; }

/* ==========================================================================
   Contact — .tw-contact
   ========================================================================== */
.tw-contact { padding: 6.4rem 0; }
.tw-contact__header { text-align: center; margin-bottom: 3.2rem; }
.tw-contact__title { margin: 0 0 0.8rem; }
.tw-contact__text { font-size: 1.8rem; margin: 0; line-height: 1.6; }
.tw-contact__grid { display: flex; flex-direction: column; gap: 3.2rem; align-items: center; }
.tw-contact__info { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.tw-contact__detail { display: flex; align-items: center; gap: 0.8rem; font-size: 1.6rem; line-height: 1.5; color: var(--clr-dark); }
.tw-contact__icon { flex-shrink: 0; color: var(--clr-secondary); }
.tw-contact__icon svg { width: 2rem; height: 2rem; display: block; }
.tw-contact__detail a { color: var(--clr-dark); text-decoration: none; transition: color var(--ts-25) var(--ts-function); }
.tw-contact__detail a:hover { color: var(--clr-secondary); }
.tw-contact__form { max-width: 64rem; margin-inline: auto; width: 100%; background: var(--clr-white); border-radius: var(--tw-radius-lg); padding: 2.4rem; box-shadow: var(--tw-shadow-sm); }

/* Stijl varianten */
.tw-contact--light { background: var(--clr-light); }
.tw-contact--light .tw-contact__title { color: var(--clr-secondary); }
.tw-contact--dark { background: var(--clr-secondary); color: var(--clr-contrast); }
.tw-contact--dark .tw-contact__title { color: var(--clr-contrast); }
.tw-contact--dark .tw-contact__text { color: rgba(255, 255, 255, 0.85); }
.tw-contact--dark .tw-contact__detail { color: rgba(255, 255, 255, 0.9); }
.tw-contact--dark .tw-contact__detail a { color: var(--clr-accent); }
.tw-contact--dark .tw-contact__detail a:hover { color: var(--clr-contrast); }

@media (max-width: 767.98px) {
.tw-contact__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Card — .tw-card
   ========================================================================== */
.tw-card { background: var(--clr-white); border-radius: var(--tw-radius-lg); border: 1px solid var(--clr-border); overflow: hidden; transition: box-shadow var(--ts-25) var(--ts-function), transform var(--ts-25) var(--ts-function); display: flex; flex-direction: column; }
.tw-card:hover { box-shadow: var(--tw-shadow-md); transform: translateY(-2px); }
.tw-card__image { overflow: hidden; aspect-ratio: 4 / 3; }
.tw-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ts-50) var(--ts-function); }
.tw-card__image:hover img { transform: scale(1.03); }
.tw-card__content { padding: 2rem; flex: 1; display: flex; flex-direction: column; gap: 0.8rem; }
.tw-card__category { display: inline-block; color: var(--clr-highlight); font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.tw-card__title { font-size: 1.8rem; font-weight: 700; margin: 0; line-height: 1.3; }
.tw-card__link { color: var(--clr-secondary); text-decoration: none; }
.tw-card__link:hover { color: var(--clr-highlight); }
.tw-card__text { color: var(--clr-text); opacity: 0.7; font-size: 1.5rem; margin: 0; line-height: 1.6; }
.tw-card__footer { padding: 0.8rem 2rem; border-top: 1px solid var(--clr-border); margin-top: auto; }
.tw-card--no-image .tw-card__content { padding-top: 2.4rem; }

/* ==========================================================================
   CTA — .tw-cta
   ========================================================================== */
.tw-cta { padding: 6.4rem 2.4rem; text-align: center; border-radius: var(--tw-radius-lg); }
.tw-cta__inner { max-width: var(--wp--style--global--content-size, 720px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.tw-cta__content { max-width: 56rem; }
.tw-cta__content h2 { line-height: 1.1; margin: 0 0 0.8rem; }
.tw-cta__content p { font-size: 1.8rem; margin: 0; line-height: 1.6; }
.tw-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 0.8rem; }
.tw-cta--light { background: var(--clr-light); color: var(--clr-dark); }
.tw-cta--dark { background: var(--clr-secondary); color: var(--clr-contrast); }
.tw-cta--dark .tw-cta__content h2 { color: var(--clr-contrast); }
.tw-cta--dark .tw-cta__content p { color: rgba(255, 255, 255, 0.85); }
.tw-cta--gradient { background: linear-gradient(135deg, var(--clr-secondary), var(--clr-accent)); color: var(--clr-contrast); }
.tw-cta--gradient .tw-cta__content h2 { color: var(--clr-contrast); }
.tw-cta--gradient .tw-cta__content p { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 767.98px) {
.tw-cta { padding: 3.2rem 1.6rem; }
}

/* ==========================================================================
   Hero — .tw-hero
   ========================================================================== */
.tw-hero { position: relative; min-height: 60vh; display: flex; align-items: center; padding: 12rem 2.4rem 8rem; background-color: var(--clr-secondary); color: var(--clr-contrast); overflow: hidden; }
.tw-hero--overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(44, 95, 78, 0.85), rgba(26, 58, 46, 0.7)); z-index: 1; }
.tw-hero--center { text-align: center; }
.tw-hero--center .tw-hero__inner { align-items: center; }
.tw-hero__inner { position: relative; z-index: 2; max-width: var(--wp--style--global--wide-size, 1200px); width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 1.6rem; }
.tw-hero__content { max-width: 64rem; }
.tw-hero__content h1 { font-size: clamp(2.8rem, 5vw, 5.6rem); font-weight: 700; line-height: 1; margin: 0 0 0.8rem; color: inherit; letter-spacing: -0.03em; }
.tw-hero__content p { font-size: clamp(1.6rem, 2vw, 2.2rem); opacity: 0.9; margin: 0; line-height: 1.5; }
.tw-hero__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }

@media (max-width: 767.98px) {
.tw-hero { min-height: 50vh; padding: 10rem 1.6rem 4.8rem; }
}

/* ==========================================================================
   Logo — .tw-logo
   ========================================================================== */
.tw-logo { display: inline-block; }
.tw-logo__link { display: block; text-decoration: none; }
.tw-logo__image { width: auto; max-height: 4.8rem; height: auto; display: block; }
.tw-logo__image--secondary { max-height: 4rem; }
.tw-logo--placeholder { padding: 1.6rem; background: var(--clr-light); border: 2px dashed var(--clr-border); border-radius: var(--tw-radius); text-align: center; }
.tw-logo--placeholder p { color: var(--clr-text); opacity: 0.6; font-size: 1.4rem; margin: 0; }

/* ==========================================================================
   Service Card — .tw-service-card
   ========================================================================== */
.tw-service-card { background: var(--clr-light); border-radius: var(--tw-radius-lg); padding: 2.4rem; text-align: center; transition: transform var(--ts-25) var(--ts-function), box-shadow var(--ts-25) var(--ts-function); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.tw-service-card:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-md); }
.tw-service-card__icon { font-size: 4rem; line-height: 1; margin-bottom: 0.8rem; }
.tw-service-card__title { font-size: 1.8rem; font-weight: 700; color: var(--clr-secondary); margin: 0; }
.tw-service-card__description { font-size: 1.5rem; color: var(--clr-text); opacity: 0.7; margin: 0; line-height: 1.6; }
.tw-service-card__action { margin-top: 0.8rem; }
.tw-service-card--highlighted { background: var(--clr-secondary); color: var(--clr-contrast); }
.tw-service-card--highlighted .tw-service-card__title { color: var(--clr-contrast); }
.tw-service-card--highlighted .tw-service-card__description { color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   Social Links — .tw-social
   ========================================================================== */
.tw-social__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tw-social__link { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--tw-radius-full); color: var(--clr-contrast); background: var(--clr-secondary); opacity: 0.7; transition: opacity var(--ts-25) var(--ts-function), transform var(--ts-25) var(--ts-function); text-decoration: none; }
.tw-social__link:hover { transform: translateY(-2px); opacity: 1; }
.tw-social__link--facebook:hover { background: #1877f2; }
.tw-social__link--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.tw-social__link--twitter:hover { background: #000000; }
.tw-social__link--linkedin:hover { background: #0a66c2; }
.tw-social__link--youtube:hover { background: #ff0000; }
.tw-social__link--tiktok:hover { background: #000000; }
.tw-social__link--pinterest:hover { background: #bd081c; }
.tw-social--minimal .tw-social__link { background: none; color: var(--clr-text); width: auto; height: auto; }
.tw-social--minimal .tw-social__link:hover { color: var(--clr-highlight); }

/* ==========================================================================
   Testimonial — .tw-testimonial
   ========================================================================== */
.tw-testimonial { background: var(--clr-white); border-radius: var(--tw-radius-lg); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-highlight); padding: 2.4rem; margin: 0; transition: box-shadow var(--ts-25) var(--ts-function); }
.tw-testimonial:hover { box-shadow: var(--tw-shadow-md); }
.tw-testimonial__rating { margin-bottom: 0.8rem; display: flex; gap: 2px; }
.tw-testimonial__star { color: var(--clr-light); font-size: 2rem; }
.tw-testimonial__star--filled { color: #f59e0b; }
.tw-testimonial__quote { font-size: 1.6rem; font-style: italic; line-height: 1.6; margin: 0 0 1.6rem; position: relative; }
.tw-testimonial__quote::before { content: '\201C'; font-size: 4.8rem; color: var(--clr-highlight); position: absolute; top: -0.8rem; left: -0.4rem; line-height: 1; opacity: 0.3; }
.tw-testimonial__author { display: flex; align-items: center; gap: 0.8rem; }
.tw-testimonial__avatar { width: 4.8rem; height: 4.8rem; border-radius: var(--tw-radius-full); object-fit: cover; }
.tw-testimonial__info { display: flex; flex-direction: column; }
.tw-testimonial__name { font-size: 1.5rem; font-weight: 600; font-style: normal; color: var(--clr-secondary); }
.tw-testimonial__role { font-size: 1.4rem; color: var(--clr-text); opacity: 0.6; }
.tw-testimonial--top-rated { border-left-color: #f59e0b; }

/* ==========================================================================
   Blurb — .tw-blurb
   ========================================================================== */

/* -- Section header --------------------------------------------------- */
.tw-blurb__header { text-align: center; max-width: 72rem; margin: 0 auto 4.8rem; }
.tw-blurb__title { font-size: clamp(2.4rem, 3vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.2rem; color: var(--clr-heading); }
.tw-blurb__subtitle { font-size: 1.7rem; color: var(--clr-text); opacity: 0.7; margin: 0; line-height: 1.6; }

/* -- Grid ------------------------------------------------------------- */
.tw-blurb__grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }

@media (min-width: 576px) {
.tw-blurb--cols-2 .tw-blurb__grid { grid-template-columns: repeat(2, 1fr); }
.tw-blurb--cols-3 .tw-blurb__grid { grid-template-columns: repeat(2, 1fr); }
.tw-blurb--cols-4 .tw-blurb__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
.tw-blurb--cols-3 .tw-blurb__grid { grid-template-columns: repeat(3, 1fr); }
.tw-blurb--cols-4 .tw-blurb__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
.tw-blurb--cols-4 .tw-blurb__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -- Item (card) ------------------------------------------------------ */
.tw-blurb__item { display: block; position: relative; border-radius: .8rem; overflow: hidden; text-decoration: none; color: #fff; transition: transform var(--ts-25) var(--ts-function), box-shadow var(--ts-25) var(--ts-function); }
a.tw-blurb__item { cursor: pointer; }
a.tw-blurb__item:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }

/* -- Image ------------------------------------------------------------ */
.tw-blurb__image { aspect-ratio: 4 / 5; position: relative; }
.tw-blurb__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ts-50) var(--ts-function); will-change: transform; }
a.tw-blurb__item:hover .tw-blurb__image img { transform: scale(1.04); }

/* -- Gradient overlay for text readability ----------------------------- */
.tw-blurb__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 70% ); pointer-events: none; transition: opacity var(--ts-25) var(--ts-function); }
a.tw-blurb__item:hover .tw-blurb__image::after { opacity: 0.85; }

/* -- Content (overlay on image) --------------------------------------- */
.tw-blurb__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.4rem; display: flex; flex-direction: column; gap: 0.4rem; z-index: 1; }
.tw-blurb__item-title { font-size: 2.4rem; font-weight: 600; margin: 0; line-height: 1.3; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform var(--ts-25) var(--ts-function); }
a.tw-blurb__item:hover .tw-blurb__item-title { transform: translateY(-2px); }
.tw-blurb__item-text { font-size: 1.4rem; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* -- Arrow indicator -------------------------------------------------- */
.tw-blurb__arrow { display: inline-flex; align-items: center; color: #fff; margin-top: 0.4rem; transform: translateX(0); transition: transform var(--ts-25) var(--ts-function); }
a.tw-blurb__item:hover .tw-blurb__arrow { transform: translateX(4px); }

/* ==========================================================================
   Producten / WooCommerce Flex Block — .tw-products
   ========================================================================== */
.tw-products { background: var(--clr-white); }
.tw-products--light { background: var(--clr-light); }

/* -- Header ----------------------------------------------------------- */
.tw-products__header { text-align: center; max-width: 64rem; margin: 0 auto 4.8rem; }
.tw-products__title { font-size: clamp(2.4rem, 3vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.2rem; color: var(--clr-heading); }
.tw-products__subtitle { font-size: 1.7rem; color: var(--clr-text); opacity: 0.7; margin: 0; line-height: 1.6; }

/* ==========================================================================
   WooCommerce — Huisstijl overrides
   ========================================================================== */

/* -- Wrapper ---------------------------------------------------------- */
.tw-woocommerce { margin-top: 1.8rem; }

/* -- Result count & ordering ------------------------------------------ */
.tw-woocommerce .woocommerce-result-count, .tw-woocommerce .woocommerce-ordering { display: inline-block; }
.woocommerce-result-count { color: var(--clr-text); opacity: 0.6; font-size: 1.4rem; margin: 0; }
.woocommerce-ordering { float: right; margin: 0; }
.woocommerce-ordering select { min-height: 4.4rem; padding: 0.6rem 1.2rem; border: 1px solid var(--clr-border); border-radius: var(--tw-radius); font-size: 1.4rem; color: var(--clr-text); background: var(--clr-white); }

@media (max-width: 575.98px) {
.tw-woocommerce .woocommerce-result-count, .tw-woocommerce .woocommerce-ordering { display: block; float: none; width: 100%; }
.tw-woocommerce .woocommerce-ordering { margin-top: 0.8rem; }
.woocommerce-ordering select { width: 100%; }
}

/* -- Product Grid ----------------------------------------------------- */
.woocommerce ul.products { display: grid; grid-template-columns: 1fr; gap: 1.6rem; list-style: none; margin: 0; padding: 2.4rem 0 0; }

@media (min-width: 576px) {
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (min-width: 768px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
}

@media (min-width: 992px) {
.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
.woocommerce ul.products li.product { margin: 0; padding: 0; width: 100% !important; float: none !important; background: var(--clr-white); border-radius: var(--tw-radius-lg); overflow: hidden; box-shadow: 0 1px 4px rgba(26, 58, 46, 0.06); transition: box-shadow var(--ts-25) var(--ts-function), transform var(--ts-25) var(--ts-function); display: flex; flex-direction: column; }
.woocommerce ul.products li.product:hover { box-shadow: 0 8px 24px rgba(26, 58, 46, 0.12); transform: translateY(-3px); }

/* Product image */
.woocommerce ul.products li.product a img, .woocommerce ul.products li.product > a > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0; border-radius: 0; transition: transform var(--ts-35) var(--ts-function); }
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* Image overflow clip */
.woocommerce ul.products li.product .woocommerce-loop-product__link { overflow: hidden; display: flex; flex-direction: column; flex: 1; text-decoration: none; }

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.6rem; font-weight: 700; color: var(--clr-dark); padding: 1.6rem 1.6rem 0; margin: 0; line-height: 1.35; word-break: break-word; overflow-wrap: break-word; hyphens: auto; }

/* Product price */
.woocommerce ul.products li.product .price { font-size: 1.8rem; font-weight: 700; color: var(--clr-secondary); padding: 0.6rem 1.6rem 0; margin: 0; }
.woocommerce ul.products li.product .price del { color: var(--clr-text); opacity: 0.5; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; }

/* Star rating */
.woocommerce ul.products li.product .star-rating { margin: 0.4rem 1.6rem 0; font-size: 1.2rem; color: #f59e0b; }

/* Add to cart button */
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.product_type_simple { display: block; margin: auto 1.6rem 1.6rem; padding: 1rem 1.2rem; background: var(--clr-secondary); color: var(--clr-contrast); border: none; border-radius: var(--tw-radius); font-size: 1.4rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--ts-25) var(--ts-function); }

@media (max-width: 575.98px) {
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.product_type_simple { font-size: 1.4rem; padding: 1.2rem 1.6rem; }
}
.woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover { background: var(--clr-accent); }

/* On-sale badge */
.woocommerce span.onsale { background: var(--clr-accent); color: var(--clr-dark); font-weight: 700; font-size: 1.2rem; padding: 0.4rem 1.2rem; border-radius: var(--tw-radius-sm); min-height: auto; min-width: auto; line-height: 1.6; top: 1.2rem; left: 1.2rem; right: auto; }

/* -- Single Product --------------------------------------------------- */
.woocommerce div.product { padding: 2.4rem 0; display: grid; grid-template-columns: 1fr; gap: 2.4rem; }

@media (min-width: 768px) {
.woocommerce div.product { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}
.woocommerce div.product div.images { border-radius: var(--tw-radius-lg); overflow: hidden; float: none !important; width: 100% !important; }
.woocommerce div.product div.images img { border-radius: var(--tw-radius-lg); width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.woocommerce div.product div.summary { float: none !important; width: 100% !important; }
.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related.products, .woocommerce div.product .upsells.products { grid-column: 1 / -1; }
.woocommerce div.product .product_title { font-size: clamp(2.2rem, 3vw, 3.6rem); font-weight: 700; color: var(--clr-heading); margin: 0 0 0.8rem; }
.woocommerce div.product p.price { font-size: 2.4rem; font-weight: 800; color: var(--clr-secondary); margin-bottom: 1.6rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--clr-text); font-size: 1.6rem; line-height: 1.7; margin-bottom: 2.4rem; }
.woocommerce div.product form.cart { margin-bottom: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.woocommerce div.product form.cart .button { background: var(--clr-secondary); color: var(--clr-contrast); border: none; border-radius: var(--tw-radius); font-weight: 600; font-size: 1.6rem; padding: 1.2rem 3.2rem; min-height: 5.2rem; cursor: pointer; transition: background var(--ts-25) var(--ts-function); flex: 1 1 auto; }

@media (max-width: 575.98px) {
.woocommerce div.product form.cart { flex-direction: column; }
.woocommerce div.product form.cart .quantity { width: 100%; }
.woocommerce div.product form.cart .quantity .qty { width: 100%; }
.woocommerce div.product form.cart .button { width: 100%; }
}
.woocommerce div.product form.cart .button:hover { background: var(--clr-accent); color: var(--clr-dark); }
.woocommerce div.product form.cart .quantity .qty { min-height: 4.8rem; padding: 0.8rem; border: 1px solid var(--clr-border); border-radius: var(--tw-radius); font-size: 1.6rem; text-align: center; width: 7rem; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 0 0 2.4rem; display: flex; gap: 0.4rem; border-bottom: 2px solid var(--clr-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: none; margin: 0; padding: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 1.2rem 2rem; font-weight: 600; font-size: 1.5rem; color: var(--clr-text); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--ts-25) var(--ts-function), border-color var(--ts-25) var(--ts-function); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--clr-secondary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--clr-secondary); border-bottom-color: var(--clr-secondary); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 2rem; color: var(--clr-heading); margin: 0 0 1.6rem; }

/* Related products & upsells — verborgen */
.woocommerce div.product .related.products, .woocommerce div.product .upsells.products { display: none; }

/* Product meta (categorieën/tags) — verborgen */
.woocommerce div.product .product_meta { display: none; }

/* -- Cart ------------------------------------------------------------- */
.woocommerce table.shop_table { border: 1px solid var(--clr-border); border-radius: var(--tw-radius-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.woocommerce table.shop_table th { background: var(--clr-light); font-weight: 600; color: var(--clr-heading); padding: 1.2rem 1.6rem; font-size: 1.4rem; }
.woocommerce table.shop_table td { padding: 1.6rem; border-top: 1px solid var(--clr-border); vertical-align: middle; }
.woocommerce table.shop_table .product-name a { color: var(--clr-heading); text-decoration: none; font-weight: 600; }
.woocommerce table.shop_table .product-name a:hover { color: var(--clr-secondary); }
.woocommerce .cart_totals h2 { font-size: 2rem; color: var(--clr-heading); }

/* Checkout / cart buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; min-height: 4.8rem; padding: 0.8rem 2.4rem; background: var(--clr-secondary); color: var(--clr-contrast); border: none; border-radius: var(--tw-radius); font-weight: 600; font-size: 1.5rem; text-decoration: none; cursor: pointer; transition: background var(--ts-25) var(--ts-function); }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background: var(--clr-accent); color: var(--clr-dark); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--clr-secondary); color: var(--clr-contrast); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { background: var(--clr-accent); color: var(--clr-dark); }

/* -- Breadcrumb ------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb { font-size: 1.4rem; color: var(--clr-text); opacity: 0.6; margin-bottom: 2.4rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--clr-accent); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--clr-secondary); }

/* -- Messages --------------------------------------------------------- */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-radius: var(--tw-radius); border-top: none; border-left: 4px solid var(--clr-secondary); background: var(--clr-light); color: var(--clr-text); padding: 1.6rem 2rem; font-size: 1.5rem; }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--clr-secondary); }
.woocommerce .woocommerce-error { border-left-color: #dc2626; }
.woocommerce .woocommerce-error::before { color: #dc2626; }

/* -- Pagination ------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 0.4rem; justify-content: center; margin-top: 3.2rem; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 4rem; min-height: 4rem; padding: 0.4rem 1.2rem; border: 1px solid var(--clr-border); border-radius: var(--tw-radius); color: var(--clr-text); text-decoration: none; font-size: 1.4rem; font-weight: 600; transition: background var(--ts-25) var(--ts-function), color var(--ts-25) var(--ts-function); }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--clr-secondary); color: var(--clr-contrast); border-color: var(--clr-secondary); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--clr-secondary); color: var(--clr-contrast); border-color: var(--clr-secondary); }

/* ==========================================================================
   Agenda — .tw-agenda
   ========================================================================== */
.tw-agenda { padding: 4.8rem 2.4rem; }
.tw-agenda__header { text-align: center; margin-bottom: 4rem; }
.tw-agenda__title { font-size: clamp(2.4rem, 3.5vw, 3.6rem); font-weight: 700; color: var(--clr-secondary); margin: 0; }
.tw-agenda__subtitle { font-size: 1.8rem; color: var(--clr-text); opacity: 0.75; margin: 0.8rem 0 0; }

/* Item lijst */
.tw-agenda__list { display: flex; flex-direction: column; gap: 1.6rem; max-width: 84rem; margin-inline: auto; }

/* Enkel item */
.tw-agenda__item { display: flex; gap: 2.4rem; align-items: flex-start; background: var(--clr-white, #fff); border-radius: var(--tw-radius-lg); padding: 2.4rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); border: 1px solid var(--clr-border); }
.tw-agenda__item--full { opacity: 0.65; }

/* Datumblok */
.tw-agenda__date { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; background: var(--clr-primary); border-radius: var(--tw-radius); text-align: center; line-height: 1; }
.tw-agenda__day { font-size: 2.6rem; font-weight: 800; color: var(--clr-secondary); }
.tw-agenda__month { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-secondary); opacity: 0.7; margin-top: 0.2rem; }

/* Body (rechterkolom) */
.tw-agenda__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tw-agenda__top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.tw-agenda__label { font-size: 1.8rem; font-weight: 700; color: var(--clr-heading, var(--clr-dark)); margin: 0; }
.tw-agenda__badge { display: inline-flex; align-items: center; padding: 0.3rem 1rem; border-radius: 10rem; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tw-agenda__badge--full { background: #fee2e2; color: #991b1b; }

/* Meta (tijd + locatie) */
.tw-agenda__meta { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.tw-agenda__meta-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; color: var(--clr-text); opacity: 0.7; }
.tw-agenda__meta-item svg { flex-shrink: 0; }
.tw-agenda__description { font-size: 1.5rem; line-height: 1.6; color: var(--clr-text); margin: 0.4rem 0 0; }
.tw-agenda__price { display: inline-block; font-size: 1.6rem; font-weight: 700; color: var(--clr-secondary); margin-top: 0.4rem; }
.tw-agenda__body .btn { align-self: flex-start; margin-top: 0.8rem; }

/* Onderste CTA */
.tw-agenda__actions { text-align: center; margin-top: 3.2rem; }

/* Responsive */

/* ==========================================================================
   Separator — .tw-separator
   ========================================================================== */
.tw-separator { width: 100%; border: 0; border-top: 1px solid var(--clr-border); margin: 0; padding: 0; }

@media (max-width: 575.98px) {
.tw-agenda__item { flex-direction: column; gap: 1.6rem; align-items: stretch; }
.tw-agenda__date { width: 100%; height: auto; flex-direction: row; gap: 0.8rem; padding: 1.2rem; }
.tw-agenda__day { font-size: 2.2rem; }
.tw-agenda__month { font-size: 1.3rem; margin-top: 0; }
}