/* ================================================================
   OZ RUIMTE — Styles for the Ruimte page template
   Full-width sections with alternating backgrounds.
   Works with Gutenberg blocks rendered by page-ruimte.php.
   ================================================================ */

/* ── Full-width wrapper — no max-width constraint ── */
.oz-ruimte {
  width: 100%;
}

/* ── Hero section (Cover block) ── */
.oz-ruimte__hero {
  position: relative;
}

/* Cover block inside hero: full viewport height on desktop.
   Top padding offsets content below the transparent overlay header. */
.oz-ruimte__hero .wp-block-cover {
  min-height: 70vh;
  border-radius: 0;
  padding-top: var(--oz-hdr-height-desktop, 76px);
}

/* Hero inner content stays within boxed width */
.oz-ruimte__hero .wp-block-cover__inner-container {
  max-width: var(--oz-max-w);
  margin: 0 auto;
  padding: 0 var(--oz-gap);
}

/* Hero outline button: white text + border on dark overlay */
.oz-ruimte__hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #FFF !important;
  border-color: #FFF !important;
  background: transparent !important;
}

.oz-ruimte__hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.15) !important;
}

@media (max-width: 767px) {
  .oz-ruimte__hero .wp-block-cover {
    min-height: 50vh;
  }
}

/* ── Section spacing tuning for ruimte pages ──
   Full 88px top/bottom on desktop, 56px on mobile. Full-bleed banner rows opt
   out via their own override below. */
.oz-ruimte .oz-section {
  padding: 56px 0;
}

@media (min-width: 768px) {
  .oz-ruimte .oz-section {
    padding: 88px 0;
  }
}

/* When a ruimte .oz-section wraps a self-contained section block (either a
   Gutenberg group that already carries .oz-section, or an embedded home-style
   .oz-hp-section), the inner already supplies its own padding and background.
   Zero the outer wrapper so the inner drives spacing and we don't get bands
   of empty coloured padding between sections. */
.oz-ruimte .oz-section:has(> .wp-block-group.oz-section),
.oz-ruimte .oz-section:has(> .wp-block-group.oz-hp-section),
.oz-ruimte .oz-section:has(> .wp-block-group[class*="oz-rp2-"]),
.oz-ruimte .oz-section:has(> .oz-hp-trust) {
  padding: 0;
  background: transparent;
}

/* Full-bleed exception for the ruimte tail split block.
   Other .oz-hp-section wrappers center content in a 1100px inner-container
   with 80px section padding (good for heading-card sections). The tail
   split block (image left, info card right) is meant to bleed edge-to-edge,
   so we strip both the inner-container constraint and the section padding
   only on this one variant. */
.oz-ruimte .wp-block-group.oz-rp2-tail-split-wrap {
  padding: 0;
}
.oz-ruimte .wp-block-group.oz-rp2-tail-split-wrap > .wp-block-group__inner-container {
  max-width: none;
  padding: 0;
  display: contents;
}

/* Neutralize first/last child vertical margins inside sections so the section
   padding is the sole authority for inter-section spacing. WP core sets
   margin-bottom: 28px on .wp-block-columns and similar blocks, which would
   otherwise add an uncontrolled extra gap to the 44+44=88 math. */
.oz-ruimte .oz-section > :first-child,
.oz-ruimte .oz-section > .oz-container > :first-child {
  margin-top: 0;
}
.oz-ruimte .oz-section > :last-child,
.oz-ruimte .oz-section > .oz-container > :last-child {
  margin-bottom: 0;
}

/* ── Typography in ruimte context ── */
.oz-ruimte h2 {
  margin-bottom: 16px;
}

.oz-ruimte h3 {
  margin-bottom: 12px;
}

.oz-ruimte p {
  max-width: 720px;
  line-height: 1.75;
}

/* Center-aligned paragraphs: also center the element itself, otherwise the
   720px max-width leaves the text visually left-anchored. */
.oz-ruimte p.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Single-column group sections use the full container width (1100px) for
   coherence with columns-based sections. Paragraphs inside still self-constrain
   to 720px via the `.oz-ruimte p` rule above, so readability is preserved. */
.oz-ruimte .oz-section > .oz-container > .wp-block-group {
  margin: 0 auto;
}

/* Standalone paragraphs center when not inside columns */
.oz-ruimte .oz-section > .oz-container > p {
  margin-left: auto;
  margin-right: auto;
}

/* Headings default to left-aligned. Groups that need centering
   (product showcase, toepassingen, CTA blocks) apply
   has-text-align-center directly in the block markup. */

/* ── Columns layout — image + text side by side ── */
.oz-ruimte .wp-block-columns {
  align-items: center;
  gap: 48px;
}

@media (max-width: 767px) {
  .oz-ruimte .wp-block-columns {
    gap: 32px;
  }
}

/* Images inside columns get nice rounding */
.oz-ruimte .wp-block-column .wp-block-image img {
  border-radius: var(--oz-radius-lg, 12px);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Callout layouts: a `.wp-block-columns` where one column uses `has-background`
   (e.g. the "Tips" beige callout beside a diagram image). In these layouts the
   image is usually an illustration/diagram, not a photo — let it render at its
   natural aspect ratio so it isn't cropped into 4:3. Also give the backgrounded
   column proper padding so text doesn't touch the edges. */
.oz-ruimte .wp-block-columns:has(> .wp-block-column.has-background) .wp-block-column .wp-block-image img {
  aspect-ratio: auto;
  object-fit: contain;
}

.oz-ruimte .wp-block-column.has-background {
  padding: 32px;
  border-radius: var(--oz-radius-lg, 12px);
}

@media (max-width: 767px) {
  .oz-ruimte .wp-block-column.has-background {
    padding: 24px;
  }
}

/* ── Checklists inside group blocks (gereedschap, voorbereiden, etc.) ── */
.oz-ruimte .wp-block-group ul.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.oz-ruimte .wp-block-group ul.wp-block-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
}

.oz-ruimte .wp-block-group ul.wp-block-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--oz-accent);
  font-weight: 700;
  font-size: 15px;
}

/* Sub-headings (h3) after a columns or list block get a visual divider */
.oz-ruimte .wp-block-group .wp-block-columns + h3,
.oz-ruimte .wp-block-group .wp-block-list + h3 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--oz-border-light, rgba(0,0,0,.08));
}

/* ── Standalone images ── */
.oz-ruimte .oz-section .wp-block-image img {
  border-radius: var(--oz-radius-lg, 12px);
}

/* Full-width images break out of container */
.oz-ruimte .wp-block-image.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.oz-ruimte .wp-block-image.alignfull img {
  border-radius: 0;
  width: 100%;
}

/* Wider card row — breaks out of .oz-container to ~1360px (vs 1100px default)
   so 4-col application cards get more breathing room while staying centered */
.oz-ruimte .oz-section .wp-block-columns.oz-toepassingen {
  width: min(1360px, calc(100vw - (2 * var(--oz-gap))));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Alignfull groups render without .oz-container — constrain their inner content */
.oz-ruimte .wp-block-group.alignfull > .wp-block-group__inner-container {
  max-width: var(--oz-max-w);
  margin: 0 auto;
  padding: 0 var(--oz-gap);
}

/* Alignfull columns (card grids) — break out of container but still center
   with sane max-width and side gutter on wide viewports. Matches columns both
   as direct children of the section and as children of the toepassingen group
   wrapper (which uses display:contents). */
.oz-ruimte .oz-section > .wp-block-columns.alignfull,
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-columns.alignfull {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--oz-gap);
  box-sizing: border-box;
}

/* Ruimte banner row — full-bleed 2-card split.
   Each card = image half + text half (black or teal), edge-to-edge. */
.oz-ruimte .oz-section:has(> .oz-ruimte-banner-row) {
  padding: 0;
}

.oz-ruimte .wp-block-group.oz-ruimte-banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
}

/* Override the alignfull group inner-container constraint for this row */
.oz-ruimte .wp-block-group.oz-ruimte-banner-row > .wp-block-group__inner-container {
  max-width: none;
  padding: 0;
  display: contents;
}

/* Toepassingen section — group that wraps the section header + both card
   rows so the eyebrow+title semantically belong to the ruimtes card grid.
   The inner-container uses display:contents so the alignfull columns inside
   still break out to full width and inherit the section's 88px padding. */
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen > .wp-block-group__inner-container {
  max-width: none;
  padding: 0;
  display: contents;
}

.oz-ruimte .oz-ruimte-section-header {
  text-align: center;
  max-width: var(--oz-max-w, 1100px);
  margin: 0 auto 40px;
  padding: 0 var(--oz-gap);
}

.oz-ruimte .oz-ruimte-eyebrow {
  font-family: var(--oz-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oz-accent);
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.oz-ruimte .oz-ruimte-eyebrow::before,
.oz-ruimte .oz-ruimte-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--oz-border, rgba(19, 83, 80, 0.2));
}
.oz-ruimte .oz-ruimte-eyebrow::before { right: calc(100% + 16px); }
.oz-ruimte .oz-ruimte-eyebrow::after  { left:  calc(100% + 16px); }

@media (max-width: 767px) {
  .oz-ruimte .oz-ruimte-eyebrow::before,
  .oz-ruimte .oz-ruimte-eyebrow::after { display: none; }
}

.oz-ruimte .oz-ruimte-title {
  font-family: var(--oz-ff-heading);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--oz-text-primary);
  margin: 0;
}

.oz-ruimte .oz-ruimte-title em {
  font-style: italic;
  color: var(--oz-accent);
}

.oz-ruimte .oz-ruimte-intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--oz-text-muted, rgba(19, 83, 80, 0.7));
  max-width: 640px;
  margin: 14px auto 0;
}

/* Space between the two stacked 3-col rows inside the toepassingen group */
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-columns.alignfull + .wp-block-columns.alignfull {
  margin-top: 20px;
}

/* ── Ruimte cards (inside toepassingen group) ──
   Each column becomes an image card with title + description overlaid on the
   bottom using a dark gradient. Left-aligned consistently. */
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column {
  position: relative;
  overflow: hidden;
  border-radius: var(--oz-radius-lg, 12px);
  aspect-ratio: 4 / 3;
  margin: 0;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column > * {
  margin: 0;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column .wp-block-image,
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column figure {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column figure a {
  display: block;
  height: 100%;
  width: 100%;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .6s ease;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column:hover img {
  transform: scale(1.04);
}

/* Dark gradient at bottom for text legibility */
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column h3,
.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column p {
  position: absolute;
  left: 28px;
  right: 28px;
  color: #fff;
  margin: 0;
  z-index: 2;
  text-align: left;
  max-width: none;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column h3 {
  bottom: 52px;
  font-family: var(--oz-ff-heading);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.2;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column h3 a {
  color: #fff;
  text-decoration: none;
}

.oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column p {
  bottom: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 767px) {
  .oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column {
    aspect-ratio: 16 / 10;
  }
  .oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column h3 {
    bottom: 46px;
    font-size: 20px;
  }
  .oz-ruimte .wp-block-group.oz-ruimte-toepassingen .wp-block-column p {
    bottom: 18px;
    font-size: 13px;
  }
}

.oz-banner-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.oz-banner-img {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  transition: transform .5s ease;
}

.oz-banner-card:hover .oz-banner-img {
  transform: scale(1.03);
}

.oz-banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 48px clamp(32px, 5vw, 72px);
}

.oz-banner-text--dark {
  background: #1a1a1a;
  color: #fff;
}

.oz-banner-text--dark h3 { color: #fff; }
.oz-banner-text--dark p { color: rgba(255, 255, 255, .82); }
.oz-banner-text--dark .oz-banner-btn {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .4);
}
.oz-banner-card:hover .oz-banner-text--dark .oz-banner-btn {
  border-bottom-color: #fff;
}

/* Pale teal-mist card — dark teal text on light background */
.oz-banner-text--teal {
  background: #E8F0F0;
  color: var(--oz-accent);
}

.oz-banner-text--teal h3 { color: var(--oz-accent); }
.oz-banner-text--teal p { color: rgba(19, 83, 80, .78); }
.oz-banner-text--teal .oz-banner-btn {
  color: var(--oz-accent);
  border-bottom-color: rgba(19, 83, 80, .3);
}
.oz-banner-card:hover .oz-banner-text--teal .oz-banner-btn {
  border-bottom-color: var(--oz-accent);
}

.oz-banner-text h3 {
  font-family: var(--oz-ff-heading);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  margin: 0 0 14px;
}

.oz-banner-text p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.oz-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 1px solid;
  width: fit-content;
  transition: border-color .2s ease, gap .2s ease;
}

.oz-banner-card:hover .oz-banner-btn {
  gap: 14px;
}

/* Tablet: stack image above text per card, keep side-by-side between cards */
@media (max-width: 1024px) {
  .oz-banner-card {
    grid-template-columns: 1fr;
  }
  .oz-banner-card--img-right .oz-banner-text {
    order: 2;
  }
  .oz-banner-card--img-right .oz-banner-img {
    order: 1;
  }
}

/* Mobile: stack cards vertically */
@media (max-width: 767px) {
  .oz-ruimte .wp-block-group.oz-ruimte-banner-row {
    grid-template-columns: 1fr;
  }
  .oz-banner-img { min-height: 240px; }
  .oz-banner-text { padding: 36px 24px; }
}

/* ── Inspiratie slideshow (Swiper) ──
   Each .oz-inspiratie-section .wp-block-gallery gets rewritten to a
   Swiper carousel by oz-inspiratie.js. Style the container and its
   controls for a cinematic, editorial feel — no auto-play, no loops
   of chrome, just image + arrows + dots + counter. */
.oz-ruimte .oz-slideshow.swiper {
  position: relative;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  border-radius: var(--oz-radius-lg, 12px);
  overflow: hidden;
  background: #0a0a0a;
  aspect-ratio: 3 / 2;
}

.oz-ruimte .oz-slideshow .swiper-wrapper {
  height: 100%;
}

.oz-ruimte .oz-slideshow__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.oz-ruimte .oz-slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  aspect-ratio: auto;
}

/* Swiper's default arrow chevrons (::after) — restyle to fit. */
.oz-ruimte .oz-slideshow__arrow.swiper-button-prev,
.oz-ruimte .oz-slideshow__arrow.swiper-button-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  border: 0;
  margin-top: 0;
  transform: translateY(-50%);
  top: 50%;
  transition: background 160ms ease, transform 160ms ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.oz-ruimte .oz-slideshow__arrow.swiper-button-prev { left: 16px; }
.oz-ruimte .oz-slideshow__arrow.swiper-button-next { right: 16px; }

.oz-ruimte .oz-slideshow__arrow.swiper-button-prev:hover,
.oz-ruimte .oz-slideshow__arrow.swiper-button-next:hover {
  background: rgba(15, 15, 15, 0.85);
}

.oz-ruimte .oz-slideshow__arrow.swiper-button-prev::after,
.oz-ruimte .oz-slideshow__arrow.swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}

.oz-ruimte .oz-slideshow__dots.swiper-pagination {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.oz-ruimte .oz-slideshow__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  transition: background 160ms ease, transform 160ms ease;
}

.oz-ruimte .oz-slideshow__dots .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(1.35);
}

.oz-ruimte .oz-slideshow__counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(15, 15, 15, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

@media (max-width: 600px) {
  .oz-ruimte .oz-slideshow.swiper {
    aspect-ratio: 4 / 3;
    border-radius: var(--oz-radius, 8px);
  }
  .oz-ruimte .oz-slideshow__arrow.swiper-button-prev,
  .oz-ruimte .oz-slideshow__arrow.swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .oz-ruimte .oz-slideshow__arrow.swiper-button-prev { left: 10px; }
  .oz-ruimte .oz-slideshow__arrow.swiper-button-next { right: 10px; }
}

/* ── Video embeds (YouTube etc.) ──
   We emit iframes directly via wp:html, so we provide the aspect-ratio
   wrapper styling that WP normally generates per-embed. */
.oz-ruimte .wp-block-embed.wp-has-aspect-ratio {
  margin: 0;
}

/* Per-video caption sits under the iframe to tell users what they're
   about to watch — 8 anonymous black boxes don't communicate. */
.oz-ruimte .oz-video-col .oz-video-caption {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-text-muted, #5a5a5a);
  letter-spacing: 0.2px;
}

/* Klantverhaal: single centered video via empty outer columns. Hide the
   spacer columns on mobile so the video uses full width. */
@media (max-width: 781px) {
  .oz-ruimte .oz-video-solo > .wp-block-column:first-child,
  .oz-ruimte .oz-video-solo > .wp-block-column:last-child {
    display: none;
  }
  .oz-ruimte .oz-video-solo > .wp-block-column[style*="68%"] {
    flex-basis: 100% !important;
  }
}

.oz-ruimte .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--oz-radius, 8px);
}

.oz-ruimte .wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Gallery block ──
   Layout rules for wp:gallery with has-nested-images (WP 5.9+ format).
   Core WP layout styles are generated per-instance via wp_get_layout_style()
   and rely on a per-block container class that isn't always emitted for
   server-saved content, so we lay it out explicitly here. */
.oz-ruimte .wp-block-gallery,
.oz-ruimte .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.oz-ruimte .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oz-ruimte .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oz-ruimte .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.oz-ruimte .wp-block-gallery > figure.wp-block-image,
.oz-ruimte .wp-block-gallery .wp-block-image {
  margin: 0;
  width: auto;
}

.oz-ruimte .wp-block-gallery .wp-block-image img {
  border-radius: var(--oz-radius, 8px);
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .oz-ruimte .wp-block-gallery,
  .oz-ruimte .wp-block-gallery.has-nested-images,
  .oz-ruimte .wp-block-gallery.columns-3,
  .oz-ruimte .wp-block-gallery.columns-4,
  .oz-ruimte .wp-block-gallery.columns-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .oz-ruimte .wp-block-gallery,
  .oz-ruimte .wp-block-gallery.has-nested-images,
  .oz-ruimte .wp-block-gallery.columns-3,
  .oz-ruimte .wp-block-gallery.columns-4,
  .oz-ruimte .wp-block-gallery.columns-5 {
    grid-template-columns: 1fr;
  }
}

/* ── Product comparison cards ──
   Opt-in via className "oz-product-cards" on the columns block.
   Mirrors homepage .oz-hp-pcard styling so ruimte/stuc pages and the
   homepage use one visual language. */
.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFF;
  border: 1px solid #E5E5E3;
  border-radius: 6px;
  padding: 28px 24px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin: 0 0 20px;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.1));
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #1A1A1A;
  margin: 0 0 10px;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column > p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 20px;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-buttons {
  margin-top: auto;
  justify-content: center;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-button__link {
  display: inline-block;
  width: fit-content;
  padding: 12px 28px;
  font-family: var(--oz-ff-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  background: #135350;
  color: #FFF;
  transition: background .2s, transform .15s;
}

.oz-ruimte .oz-section .wp-block-columns.oz-product-cards .wp-block-column .wp-block-button__link:hover {
  background: #1A6B67;
  color: #FFF;
  transform: translateY(-1px);
}

/* ── Buttons in ruimte context ──
   WP core's is-layout-flex CSS isn't loaded on block-section-rendered pages,
   so replicate flex behavior + centering for button rows. */
.oz-ruimte .wp-block-buttons {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.oz-ruimte .wp-block-buttons.is-content-justification-center {
  justify-content: center;
}

/* ── Navigation / TOC section ──
   Only ordered lists whose items are pure fragment anchors (TOC) become
   pill nav. Content lists (numbered tips, instructions) keep default
   ordered-list numbering. */
.oz-ruimte .oz-section ol.wp-block-list:has(> li > a[href^="#"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  justify-content: center;
}

.oz-ruimte .oz-section ol.wp-block-list:has(> li > a[href^="#"]) li {
  margin: 0;
}

.oz-ruimte .oz-section ol.wp-block-list:has(> li > a[href^="#"]) li::marker {
  content: '';
}

.oz-ruimte .oz-section ol.wp-block-list:has(> li > a[href^="#"]) li a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--oz-border);
  border-radius: 100px;
  font-size: var(--oz-text-sm);
  font-weight: 600;
  color: var(--oz-text-body);
  text-decoration: none;
  transition: all var(--oz-transition);
}

.oz-ruimte .oz-section ol.wp-block-list:has(> li > a[href^="#"]) li a:hover {
  border-color: var(--oz-accent);
  color: var(--oz-accent);
  background: var(--oz-accent-light);
}

/* ── Mid-page CTA covers (non-hero) ──
   Cover blocks after the first hero are compact banners, not full-height. */
.oz-ruimte .oz-ruimte__hero:not(:first-child) .wp-block-cover {
  min-height: 320px;
  border-radius: var(--oz-radius-lg);
  overflow: hidden;
}

/* CTA cover text stays compact */
.oz-ruimte .oz-ruimte__hero:not(:first-child) .wp-block-cover__inner-container {
  text-align: center;
  max-width: 600px;
}

/* Covers with columns inside need full width for side-by-side layout */
.oz-ruimte .oz-ruimte__hero:not(:first-child) .wp-block-cover__inner-container:has(.wp-block-columns) {
  max-width: var(--oz-max-w);
  text-align: left;
}

.oz-ruimte .oz-ruimte__hero:not(:first-child) .wp-block-cover h3 {
  font-size: var(--oz-text-xl);
}

/* ── Separator / divider ── */
.oz-ruimte .wp-block-separator {
  max-width: 120px;
  margin: 32px 0;
  border-top-color: var(--oz-accent);
  opacity: 0.4;
}

/* ── Eyebrow pattern: h6 above main heading matches .oz-eyebrow ── */
.oz-ruimte .oz-section h6 {
  font-family: var(--oz-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oz-accent);
  margin-bottom: 12px;
}

/* ── Heading em: teal italic accent (matches homepage pattern) ── */
.oz-ruimte h2 em,
.oz-ruimte h3 em {
  font-style: italic;
  color: var(--oz-accent);
}

/* ── Subtitle: .has-small-font-size used as label under headings ── */
.oz-ruimte .has-small-font-size {
  font-size: var(--oz-text-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oz-text-muted);
  font-weight: 600;
}

/* ================================================================
   TIMELINE — Vertical step-by-step process (stappen-plan).
   Applied automatically when a group block with anchor "stappen-plan"
   is detected by page-ruimte.php. The group + following columns
   blocks are wrapped in a single .oz-timeline container.
   ================================================================ */
.oz-timeline {
  position: relative;
  padding-left: 56px;
  counter-reset: oz-step;
}

/* Vertical accent line running down the left side */
.oz-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--oz-accent, #135350);
  opacity: 0.18;
  border-radius: 1px;
}

/* Each columns block is a step card */
.oz-timeline .wp-block-columns {
  position: relative;
  counter-increment: oz-step;
  margin-bottom: 32px;
  padding: 28px 32px;
  background: var(--oz-bg-warm, #F5F4F0);
  border-radius: var(--oz-radius-lg, 12px);
  border: 1px solid rgba(0,0,0,.04);
}

.oz-timeline .wp-block-columns:last-child {
  margin-bottom: 0;
}

/* Numbered circle on the timeline line */
.oz-timeline .wp-block-columns::before {
  content: counter(oz-step);
  position: absolute;
  left: -56px;
  top: 28px;
  width: 36px;
  height: 36px;
  background: var(--oz-accent, #135350);
  color: #FFF;
  font-family: var(--oz-ff-body, 'Raleway', sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(19,83,80,.2);
}

/* Step heading inside the card */
.oz-timeline .wp-block-columns h2 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--oz-text-primary, #1A1A1A);
}

/* Step body text */
.oz-timeline .wp-block-columns p {
  font-size: 15px;
  line-height: 1.7;
  max-width: none;
}

/* Step images get consistent sizing */
.oz-timeline .wp-block-columns .wp-block-image img {
  border-radius: var(--oz-radius, 8px);
  max-height: 240px;
  width: auto;
  object-fit: contain;
}

/* The stappen-plan group renders inside the timeline — reset its padding
   so it doesn't add extra nesting visually. Keep bottom margin so Step 1
   (inside the group) has spacing before Step 2 (a sibling of the group). */
.oz-timeline > .wp-block-group {
  padding: 0;
  margin: 0 0 32px 0;
}

/* ── Timeline: mobile (< 768px) ── */
@media (max-width: 767px) {
  .oz-timeline {
    padding-left: 44px;
  }

  .oz-timeline::before {
    left: 14px;
  }

  .oz-timeline .wp-block-columns {
    padding: 20px;
  }

  .oz-timeline .wp-block-columns::before {
    left: -36px;
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    top: 20px;
  }

  .oz-timeline .wp-block-columns h2 {
    font-size: 18px;
  }

  .oz-timeline .wp-block-columns .wp-block-image img {
    max-height: 180px;
  }
}

/* ── Den Haag closing: image left, text right ── */
.oz-ruimte .oz-ruimte-denhaag .wp-block-columns {
  gap: 48px;
  align-items: center;
}

.oz-ruimte .oz-ruimte-denhaag .oz-ruimte-meubels-image {
  margin: 0;
}

.oz-ruimte .oz-ruimte-denhaag .oz-ruimte-meubels-image img {
  width: 100%;
  height: auto;
  border-radius: var(--oz-radius-lg, 12px);
  display: block;
}

.oz-ruimte .oz-ruimte-denhaag p {
  margin-top: 0;
}

@media (max-width: 767px) {
  .oz-ruimte .oz-ruimte-denhaag .wp-block-columns {
    gap: 24px;
  }
}

/* ── Cover block used as CTA (not hero) ── */
.oz-ruimte .oz-section--cover {
  padding: 0;
  background: transparent;
}

.oz-ruimte .oz-section--cover .wp-block-cover {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 0;
  padding: 72px var(--oz-gap);
  background-color: #1a1a1a;
  color: #fff;
}

.oz-ruimte .oz-section--cover .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.oz-ruimte .oz-section--cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

.oz-ruimte .oz-section--cover .wp-block-cover__inner-container {
  max-width: var(--oz-max-w, 1100px);
  margin: 0 auto;
  text-align: center;
}

.oz-ruimte .oz-section--cover h6 {
  font-family: var(--oz-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 12px;
  text-align: center;
}

.oz-ruimte .oz-section--cover h2 {
  font-family: var(--oz-ff-heading);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 14px;
}

.oz-ruimte .oz-section--cover h2 em {
  font-style: italic;
  color: var(--oz-accent);
}

.oz-ruimte .oz-section--cover p {
  font-size: 15px;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 28px;
}

.oz-ruimte .oz-section--cover .wp-block-buttons {
  justify-content: center;
}

.oz-ruimte .oz-section--cover .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}

.oz-ruimte .oz-section--cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.15) !important;
}

@media (max-width: 767px) {
  .oz-ruimte .oz-section--cover .wp-block-cover {
    min-height: 260px;
    padding: 56px var(--oz-gap);
  }
}

/* ── FAQ accordion (native <details>) styled to match homepage FAQ ── */
.oz-ruimte .wp-block-details {
  border-bottom: 1px solid var(--oz-border, rgba(19, 83, 80, 0.2));
  padding: 0;
  margin: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.oz-ruimte .wp-block-details > summary {
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--oz-ff-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--oz-text-primary, #1a1a1a);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  transition: color .2s;
}

.oz-ruimte .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.oz-ruimte .wp-block-details > summary:hover {
  color: var(--oz-accent);
}

.oz-ruimte .wp-block-details > summary::after {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 2px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .3s;
}

.oz-ruimte .wp-block-details[open] > summary::after {
  background-size: 100% 2px, 0 100%;
}

.oz-ruimte .wp-block-details > :not(summary) {
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--oz-text-body, #333);
  margin: 0;
}

/* FAQ section heading tweaks: center h6 eyebrow + big h2 when followed by details */
.oz-ruimte .oz-section > .oz-container > .wp-block-group:has(> .wp-block-group__inner-container > .wp-block-details) h6,
.oz-ruimte .oz-section > .oz-container > .wp-block-group:has(> .wp-block-group__inner-container > .wp-block-details) h2 {
  text-align: center;
}

/* ── Kleur swatch grid ──
   Grid of 50 color swatches on /original-kleurstalen/ and similar pages.
   Opt-in via wrapper className "oz-kleur-grid-wrap" with inner .oz-kleur-grid. */
.oz-ruimte .oz-kleur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.oz-ruimte .oz-kleur-swatch {
  margin: 0;
  background: #fff;
  border: 1px solid var(--oz-border-light);
  border-radius: var(--oz-radius);
  overflow: hidden;
  transition: box-shadow var(--oz-transition), transform var(--oz-transition);
}

.oz-ruimte .oz-kleur-swatch:hover {
  box-shadow: var(--oz-shadow-md);
  transform: translateY(-2px);
}

.oz-ruimte .oz-kleur-swatch img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.oz-ruimte .oz-kleur-swatch figcaption {
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
}

.oz-ruimte .oz-kleur-swatch figcaption strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--oz-text-primary);
}

.oz-ruimte .oz-kleur-swatch figcaption span {
  display: block;
  color: var(--oz-text-muted, #666);
  font-size: 12px;
  margin-top: 2px;
}

/* Kleurstalen order form section */
.oz-ruimte .oz-section .oz-kleur-form .wpcf7 {
  max-width: 720px;
  margin: 24px auto 0;
}

/* Larger swatches for All-In-One / Easyline grid (photographic swatches, not flat colors) */
.oz-ruimte .oz-kleur-grid--lg {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.oz-ruimte .oz-kleur-grid--lg .oz-kleur-swatch img {
  aspect-ratio: 5 / 4;
}

/* Mobile: force exactly 2 columns with smaller gap.
   Default minmax(180px, 1fr) needs 376px (2*180 + 16 gap) which doesn't fit
   in a 390px iPhone viewport minus container padding — would fall back to 1
   column. Explicit repeat(2, 1fr) keeps the pair-up consistent across all
   small screens (320–599px). Gap reduced so each cell stays large enough. */
@media (max-width: 599px) {
  .oz-ruimte .oz-kleur-grid--lg {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ================================================================
   CONTACT page — form + showroom columns + map embed
   ================================================================ */

/* Contact form section: soft background to separate from hero */
.oz-ruimte .oz-section.oz-contact-form {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-section.oz-contact-form .wp-block-columns {
  gap: 48px;
}

.oz-ruimte .oz-section.oz-contact-form h2 {
  margin-top: 0;
}

/* WPForms styling inside contact form column */
.oz-ruimte .oz-section.oz-contact-form .wpforms-container {
  max-width: 100%;
  margin: 16px 0 0;
}

.oz-ruimte .oz-section.oz-contact-form .wpforms-field input[type="text"],
.oz-ruimte .oz-section.oz-contact-form .wpforms-field input[type="email"],
.oz-ruimte .oz-section.oz-contact-form .wpforms-field input[type="tel"],
.oz-ruimte .oz-section.oz-contact-form .wpforms-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
}

.oz-ruimte .oz-section.oz-contact-form .wpforms-field textarea {
  min-height: 140px;
}

.oz-ruimte .oz-section.oz-contact-form .wpforms-submit {
  padding: 14px 28px;
  background: var(--oz-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}

.oz-ruimte .oz-section.oz-contact-form .wpforms-submit:hover {
  background: var(--oz-accent-hover, #2a2a2a);
}

/* Showroom columns: image + opening hours */
.oz-ruimte .oz-section.oz-contact-showroom .wp-block-columns {
  gap: 48px;
  align-items: center;
}

.oz-ruimte .oz-section.oz-contact-showroom .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.oz-ruimte .oz-section.oz-contact-showroom h2 {
  margin-top: 0;
}

/* Full-bleed Google Maps embed */
.oz-ruimte .oz-section.oz-contact-map {
  padding: 0;
}

.oz-ruimte .oz-section.oz-contact-map .oz-map-embed {
  width: 100%;
  line-height: 0;
}

.oz-ruimte .oz-section.oz-contact-map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

@media (max-width: 767px) {
  .oz-ruimte .oz-section.oz-contact-form .wp-block-columns,
  .oz-ruimte .oz-section.oz-contact-showroom .wp-block-columns {
    gap: 32px;
  }
  .oz-ruimte .oz-section.oz-contact-map iframe {
    height: 340px;
  }
}

/* ================================================================
   KLEURSTALEN HUB — productlijn cards (image + body + CTA)
   Mobile: image on top, body below (stacked card).
   Desktop: body overlays the image with a dark gradient.
   Note: .oz-kleurstalen-hub is on the inner group, not on .oz-section,
   so we scope without the .oz-section compound.
   ================================================================ */
.oz-ruimte .oz-kleurstalen-hub .wp-block-columns {
  gap: 28px;
  margin-top: 32px;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card {
  background: #fff;
  border: 1px solid var(--oz-border, #e5e0d9);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__img {
  margin: 0;
  line-height: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: center;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body h3,
.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body p {
  text-align: center;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body p {
  margin: 0;
  color: var(--oz-text-muted, #555);
  flex: 1;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body .wp-block-buttons {
  margin-top: auto;
  gap: 10px;
  justify-content: center;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card__body .wp-block-button {
  width: 100%;
}

/* Lavasteen card: no image → dark gradient card */
.oz-ruimte .oz-kleurstalen-hub .oz-ks-card--lavasteen {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  color: #fff;
  min-height: 260px;
  justify-content: center;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card--lavasteen .oz-ks-card__body h3,
.oz-ruimte .oz-kleurstalen-hub .oz-ks-card--lavasteen .oz-ks-card__body p {
  color: #fff;
}

.oz-ruimte .oz-kleurstalen-hub .oz-ks-card--lavasteen .oz-ks-card__body p {
  opacity: .85;
}

/* Desktop: overlay body on top of the image for cards that have an image.
   Image fills the card. Body is absolute-positioned at the bottom of the card
   so the gradient starts from the image's bottom edge and fades upward. */
@media (min-width: 900px) {
  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) {
    min-height: 480px;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 90px 28px 28px;
    gap: 10px;
    color: #fff;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.78) 40%,
      rgba(0, 0, 0, 0.35) 75%,
      rgba(0, 0, 0, 0) 100%
    );
    text-align: center;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body h3,
  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body p {
    color: #fff;
    text-align: center;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body p {
    opacity: .92;
    flex: none;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body .wp-block-buttons {
    margin-top: 4px;
    justify-content: center;
  }

  /* Outline buttons on the dark overlay — the base rule uses !important so we must too. */
  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body .wp-block-button.is-style-outline .wp-block-button__link {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
  }

  .oz-ruimte .oz-kleurstalen-hub .oz-ks-card:has(.oz-ks-card__img) .oz-ks-card__body .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #fff !important;
    color: #fff !important;
  }
}

/* ================================================================
   KENNISBANK INDEX — grouped link lists per category
   ================================================================ */
.oz-ruimte .oz-kb-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--oz-border-light, #e5e0d9);
  border-left: 1px solid var(--oz-border-light, #e5e0d9);
}

.oz-ruimte .oz-kb-list li {
  border-right: 1px solid var(--oz-border-light, #e5e0d9);
  border-bottom: 1px solid var(--oz-border-light, #e5e0d9);
  margin: 0;
  padding: 0;
}

.oz-ruimte .oz-kb-list li a {
  display: block;
  padding: 18px 22px;
  color: var(--oz-text-primary);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  transition: background .2s ease, color .2s ease;
}

.oz-ruimte .oz-kb-list li a:hover {
  background: var(--oz-accent);
  color: #fff;
}

.oz-ruimte .oz-kb-list li a strong {
  font-weight: 500;
}

@media (max-width: 767px) {
  .oz-ruimte .oz-kb-list {
    grid-template-columns: 1fr;
  }
  .oz-ruimte .oz-kb-list li a {
    padding: 16px 18px;
  }
}

/* ================================================================
   SITEMAP PAGE — reuses .oz-kb-list, adds own hero + XML card
   ================================================================ */

.oz-sitemap .oz-sitemap__hero .wp-block-cover {
  background: linear-gradient(135deg, #2a2623 0%, #3d352f 100%);
}

.oz-sitemap .oz-sitemap__hero h1 {
  margin-bottom: 12px;
}

.oz-sitemap .oz-sitemap__hero p {
  opacity: .85;
  max-width: 640px;
}

/* Section headings inside sitemap get consistent rhythm */
.oz-sitemap .oz-section > .oz-container > h2 {
  text-align: center;
  margin-bottom: 8px;
}

/* Make the list tighter on sitemap since there can be many items */
.oz-sitemap .oz-kb-list {
  max-width: 1080px;
  margin-top: 24px;
}

.oz-sitemap .oz-kb-list li a {
  padding: 14px 20px;
  font-size: 14px;
}

/* XML sitemap CTA card at bottom */
.oz-sitemap .oz-sitemap__xml {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-sitemap .oz-sitemap__xml-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 40px 32px;
}

.oz-sitemap .oz-sitemap__xml-card h2 {
  margin: 8px 0 12px;
}

.oz-sitemap .oz-sitemap__xml-card p {
  color: var(--oz-text-muted, #6c6459);
  margin-bottom: 20px;
}

.oz-sitemap .oz-sitemap__xml-card .wp-block-buttons {
  justify-content: center;
  display: flex;
}

/* ================================================================
   LOCATIE CITY PAGES — raw HTML product cards + ruimte showcase
   (for converter output; differs from shared wp-block-columns version)
   ================================================================ */

.oz-ruimte .oz-section.oz-product-cards-section {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-product-cards-section > .oz-container > .wp-block-paragraph,
.oz-ruimte .oz-product-cards-section > .oz-container > h2 {
  text-align: center;
}

.oz-ruimte .oz-product-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.oz-ruimte .oz-product-card {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.oz-ruimte .oz-product-card:hover {
  border-color: var(--oz-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30, 26, 22, .08);
}

.oz-ruimte .oz-product-card--accent {
  background: var(--oz-text-primary);
  color: #fff;
  border-color: var(--oz-text-primary);
}

.oz-ruimte .oz-product-card--accent:hover {
  border-color: var(--oz-accent);
}

.oz-ruimte .oz-product-card__eyebrow {
  font-family: var(--oz-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oz-accent);
}

.oz-ruimte .oz-product-card--accent .oz-product-card__eyebrow {
  color: #fff;
  opacity: .7;
}

.oz-ruimte .oz-product-card h3 {
  margin: 0;
  font-family: var(--oz-ff-heading);
  font-size: 22px;
  line-height: 1.2;
}

.oz-ruimte .oz-product-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  opacity: .85;
}

.oz-ruimte .oz-product-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.oz-ruimte .oz-product-card__meta li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  letter-spacing: 1.5px;
  color: #f5b50a;
}

.oz-ruimte .oz-product-card--accent .oz-product-card__meta li {
  border-bottom-color: rgba(255,255,255,.12);
}

.oz-ruimte .oz-product-card__meta li strong {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--oz-text-muted, #6c6459);
  text-transform: uppercase;
  font-size: 10px;
}

.oz-ruimte .oz-product-card--accent .oz-product-card__meta li strong {
  color: rgba(255,255,255,.55);
}

.oz-ruimte .oz-product-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: var(--oz-accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 6px;
  transition: background .2s ease;
}

.oz-ruimte .oz-product-card__cta:hover {
  background: var(--oz-text-primary);
}

.oz-ruimte .oz-product-card--accent .oz-product-card__cta {
  background: var(--oz-accent);
}

.oz-ruimte .oz-product-card--accent .oz-product-card__cta:hover {
  background: #fff;
  color: var(--oz-text-primary);
}

@media (max-width: 900px) {
  .oz-ruimte .oz-product-cards {
    grid-template-columns: 1fr;
  }
}

/* Ruimte showcase — 6 image tiles linking to room pages */
.oz-ruimte .oz-ruimte-showcase__grid {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.oz-ruimte .oz-ruimte-showcase__grid li {
  margin: 0;
}

.oz-ruimte .oz-ruimte-showcase__grid a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3/4;
  color: #fff;
  text-decoration: none;
}

.oz-ruimte .oz-ruimte-showcase__grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.oz-ruimte .oz-ruimte-showcase__grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 50%, rgba(0,0,0,.6) 100%);
}

.oz-ruimte .oz-ruimte-showcase__grid a:hover img {
  transform: scale(1.06);
}

.oz-ruimte .oz-ruimte-showcase__grid span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  z-index: 1;
  font-family: var(--oz-ff-heading);
  font-size: 16px;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .oz-ruimte .oz-ruimte-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .oz-ruimte .oz-ruimte-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Locatie body section — center long paragraphs with comfortable measure */
.oz-ruimte .oz-locatie-body {
  background: #fff;
}

.oz-ruimte .oz-locatie-body > .oz-container {
  max-width: 820px;
}

.oz-ruimte .oz-locatie-body h2 {
  margin-top: 40px;
}

.oz-ruimte .oz-locatie-body h2:first-child {
  margin-top: 0;
}

.oz-ruimte .oz-locatie-body h3 {
  margin-top: 32px;
}

.oz-ruimte .oz-locatie-body ul {
  padding-left: 20px;
}

.oz-ruimte .oz-locatie-body ul li {
  margin-bottom: 8px;
}

/* Closing CTA variant for city pages */
.oz-ruimte .oz-locatie-closing {
  background: var(--oz-surface-soft, #f7f5f2);
  padding: 56px 24px;
  text-align: center;
}

/* ================================================================
   KLANTERVARINGEN — reviews grid + trustindex wrapper
   ================================================================ */

.oz-ruimte .oz-section.oz-reviews-trustindex {
  background: var(--oz-surface-soft, #f7f5f2);
  padding-top: 48px;
  padding-bottom: 48px;
}

.oz-ruimte .oz-reviews-trustindex #trustindex-script-container {
  max-width: 1100px;
  margin: 0 auto;
}

.oz-ruimte .oz-reviews-grid {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.oz-ruimte .oz-review-card {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 10px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.oz-ruimte .oz-review-card:hover {
  border-color: var(--oz-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30, 26, 22, .06);
}

.oz-ruimte .oz-review-card__stars {
  color: #f5b50a;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}

.oz-ruimte .oz-review-card__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--oz-text-primary);
}

.oz-ruimte .oz-review-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--oz-border-light, #e5e0d9);
  font-size: 12px;
  color: var(--oz-text-muted, #6c6459);
}

.oz-ruimte .oz-review-card__meta strong {
  color: var(--oz-text-primary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .oz-ruimte .oz-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .oz-ruimte .oz-reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* Klantervaringen → kleurstalen CTA image rounding */
.oz-ruimte .oz-kleurstalen-cta__img img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: auto;
}

/* ================================================================
   LOCATIE HUB — city link grid + info card
   ================================================================ */

.oz-ruimte .oz-section.oz-locatie-hub {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-locatie-hub > .oz-container > h2 {
  text-align: center;
  margin: 32px 0 8px;
}

.oz-ruimte .oz-locatie-grid {
  list-style: none;
  padding: 0;
  margin: 24px auto 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1040px;
}

.oz-ruimte .oz-locatie-grid li {
  margin: 0;
}

.oz-ruimte .oz-locatie-grid li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 8px;
  color: var(--oz-text-primary);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  min-height: 64px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.oz-ruimte .oz-locatie-grid li a strong {
  font-weight: 500;
  font-family: var(--oz-ff-heading);
}

.oz-ruimte .oz-locatie-grid li a em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .65;
}

.oz-ruimte .oz-locatie-grid li a:hover {
  background: var(--oz-accent);
  border-color: var(--oz-accent);
  color: #fff;
  transform: translateY(-1px);
}

.oz-ruimte .oz-locatie-grid__featured a {
  background: var(--oz-text-primary);
  color: #fff;
  border-color: var(--oz-text-primary);
}

.oz-ruimte .oz-locatie-grid__featured a:hover {
  background: var(--oz-accent);
  border-color: var(--oz-accent);
}

@media (max-width: 800px) {
  .oz-ruimte .oz-locatie-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .oz-ruimte .oz-locatie-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.oz-ruimte .oz-locatie-info__card {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 28px 26px;
}

.oz-ruimte .oz-locatie-info__card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
}

.oz-ruimte .oz-locatie-info__card p:last-child {
  margin-bottom: 0;
}

/* ================================================================
   OFFERTE PAGE — CF7 quote form + sidebar info card
   ================================================================ */

/* Soft-background section around the form split */
.oz-ruimte .oz-section.oz-offerte-form {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-split {
  gap: 48px;
  align-items: flex-start;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-form__col {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 36px 36px 28px;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-form__col h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Right-side info card: sticky on desktop, stacked cells */
.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 28px 28px 24px;
  position: sticky;
  top: 100px;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info h3 {
  margin: 0 0 6px;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info .wp-block-separator {
  border-color: var(--oz-border-light, #e5e0d9);
  margin: 20px 0;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info .oz-eyebrow {
  margin-bottom: 6px;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info p {
  margin: 0 0 8px;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-contact {
  font-size: 18px;
  line-height: 1.5;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-contact a {
  color: var(--oz-text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}

.oz-ruimte .oz-section.oz-offerte-form .oz-offerte-contact a:hover {
  border-bottom-color: var(--oz-accent);
}

/* CF7 form styling */
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 {
  margin-top: 20px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 4px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .row > [class*="col-xs-12"] {
  width: 100%;
  padding: 0;
  min-width: 0;
}

/* Single-column rows (full-width fields) */
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .row:has(> .col-xs-12:only-child) {
  grid-template-columns: 1fr;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--oz-text-muted, #6b6560);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 label > br {
  display: none;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="text"],
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="email"],
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="tel"],
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-family: var(--oz-ff-body);
  color: var(--oz-text-primary);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 textarea {
  min-height: 110px;
  resize: vertical;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="text"]:focus,
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="email"]:focus,
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="tel"]:focus,
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--oz-accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--oz-border, #d9d4cd);
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  font-family: var(--oz-ff-body);
  cursor: pointer;
}

/* Checkbox groups: Reden + toestemming */
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-checkbox,
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-acceptance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-list-item {
  margin: 0;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 999px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oz-text-primary);
  cursor: pointer;
  margin: 0;
  transition: background .15s ease, border-color .15s ease;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-list-item label:hover {
  background: #fff;
  border-color: var(--oz-accent);
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-list-item input[type="checkbox"] {
  accent-color: var(--oz-accent);
  margin: 0;
  width: 16px;
  height: 16px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 small {
  display: block;
  font-size: 12px;
  color: var(--oz-text-muted, #6b6560);
  line-height: 1.5;
  margin-top: 6px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-submit {
  display: inline-block;
  padding: 14px 34px;
  background: var(--oz-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: var(--oz-ff-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  margin-top: 12px;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-submit:hover {
  background: var(--oz-accent-hover, #2a2a2a);
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .wpcf7-submit:active {
  transform: translateY(1px);
}

/* Validation messages */
.oz-ruimte .oz-section.oz-offerte-form .wpcf7-not-valid-tip {
  display: block;
  color: #c14141;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.oz-ruimte .oz-section.oz-offerte-form .wpcf7-response-output {
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  margin: 16px 0 0;
}

/* Last-row submit alignment (WPCF7 uses end-xs) */
.oz-ruimte .oz-section.oz-offerte-form .wpcf7 .end-xs {
  text-align: right;
}

@media (max-width: 900px) {
  .oz-ruimte .oz-section.oz-offerte-form .oz-offerte-split {
    gap: 28px;
  }
  .oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info {
    position: static;
  }
  .oz-ruimte .oz-section.oz-offerte-form .oz-offerte-form__col {
    padding: 28px 22px 24px;
  }
}

@media (max-width: 560px) {
  .oz-ruimte .oz-section.oz-offerte-form .wpcf7 .row {
    grid-template-columns: 1fr;
  }
  .oz-ruimte .oz-section.oz-offerte-form .oz-offerte-form__col {
    padding: 22px 18px 20px;
  }
  .oz-ruimte .oz-section.oz-offerte-form .oz-offerte-info {
    padding: 22px 20px 18px;
  }
}

/* ================================================================
   WORKSHOPS PAGE — intro split + WPForms card + image feature + products
   ================================================================ */

/* Form split section: soft background */
.oz-ruimte .oz-section.oz-workshop-form {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-split {
  gap: 56px;
  align-items: flex-start;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-intro__col h2 {
  margin-top: 0;
  margin-bottom: 14px;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-intro__col .oz-eyebrow {
  margin-bottom: 10px;
}

/* Checklist group under intro copy */
.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 24px 26px 20px;
  margin: 24px 0;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist ul li {
  position: relative;
  padding: 8px 0 8px 28px;
  line-height: 1.5;
  border-bottom: 1px solid var(--oz-border-light, #e5e0d9);
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist ul li:last-child {
  border-bottom: 0;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-checklist ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  background: var(--oz-accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12l-3.5-3.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12l-3.5-3.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Form card */
.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-form__col {
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 12px;
  padding: 36px 36px 28px;
}

.oz-ruimte .oz-section.oz-workshop-form .oz-workshop-form__col h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

/* WPForms styling for workshops (multi-step form, pagebreak-aware) */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-container {
  margin: 20px 0 0;
  max-width: 100%;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field {
  padding: 10px 0;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--oz-text-muted, #6b6560);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-sublabel {
  font-size: 11px;
  color: var(--oz-text-muted, #6b6560);
  margin-top: 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field input[type="text"],
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field input[type="email"],
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field input[type="tel"],
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field input[type="date"],
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field textarea,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-family: var(--oz-ff-body);
  color: var(--oz-text-primary);
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field textarea {
  min-height: 110px;
  resize: vertical;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field input:focus,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field textarea:focus,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field select:focus {
  outline: none;
  border-color: var(--oz-accent);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Name field: flex split across first/last */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-name .wpforms-field-row {
  display: flex;
  gap: 12px;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-name .wpforms-field-row-block {
  flex: 1;
  padding: 0;
  min-width: 0;
}

/* File upload */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-file input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--oz-border, #d9d4cd);
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  cursor: pointer;
}

/* Checkbox lists */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-checkbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-checkbox ul li {
  margin: 0;
  padding: 0;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-checkbox ul li label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--oz-border, #d9d4cd);
  border-radius: 999px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--oz-text-primary);
  cursor: pointer;
  margin: 0;
  transition: background .15s ease, border-color .15s ease;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-checkbox ul li label:hover {
  background: #fff;
  border-color: var(--oz-accent);
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-checkbox input[type="checkbox"] {
  accent-color: var(--oz-accent);
}

/* Multi-step page progress indicator */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-indicator {
  margin: 0 0 20px;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-indicator-step {
  background: var(--oz-border-light, #e5e0d9);
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-indicator-step-active,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-indicator-step-complete {
  background: var(--oz-accent);
}

/* Submit + page-nav buttons */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-submit,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--oz-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: var(--oz-ff-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-submit:hover,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-button:hover {
  background: var(--oz-accent-hover, #2a2a2a);
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-prev {
  background: transparent;
  color: var(--oz-text-primary);
  border: 1px solid var(--oz-border, #d9d4cd);
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-page-prev:hover {
  background: var(--oz-surface-alt, #f7f5f2);
  color: var(--oz-text-primary);
}

/* Error states */
.oz-ruimte .oz-section.oz-workshop-form .wpforms-error,
.oz-ruimte .oz-section.oz-workshop-form .wpforms-field-error {
  border-color: #c14141 !important;
}

.oz-ruimte .oz-section.oz-workshop-form .wpforms-error-message,
.oz-ruimte .oz-section.oz-workshop-form label.wpforms-error {
  color: #c14141;
  font-size: 12px;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* About section — text + image */
.oz-ruimte .oz-section.oz-workshop-about .wp-block-columns {
  gap: 56px;
}

.oz-ruimte .oz-section.oz-workshop-about h2 {
  margin-top: 0;
}

.oz-ruimte .oz-section.oz-workshop-about .oz-workshop-about__img img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.oz-ruimte .oz-section.oz-workshop-about .oz-workshop-disclaimer {
  font-size: 13px;
  color: var(--oz-text-muted, #6b6560);
  font-style: italic;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--oz-border-light, #e5e0d9);
}

/* Products section: reuse WC defaults with our container */
.oz-ruimte .oz-section.oz-workshop-products {
  background: var(--oz-surface-soft, #f7f5f2);
}

.oz-ruimte .oz-section.oz-workshop-products h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce {
  margin-top: 24px;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--oz-border-light, #e5e0d9);
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products li.product img {
  border-radius: 6px;
  margin-bottom: 12px;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--oz-text-primary);
  padding: 0;
  line-height: 1.3;
}

.oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products li.product .price {
  color: var(--oz-text-primary);
  font-weight: 600;
  font-size: 15px;
}

@media (max-width: 900px) {
  .oz-ruimte .oz-section.oz-workshop-form .oz-workshop-split {
    gap: 28px;
  }
  .oz-ruimte .oz-section.oz-workshop-form .oz-workshop-form__col {
    padding: 28px 22px 24px;
  }
  .oz-ruimte .oz-section.oz-workshop-about .wp-block-columns {
    gap: 32px;
  }
  .oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .oz-ruimte .oz-section.oz-workshop-products .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .oz-ruimte .oz-section.oz-workshop-form .oz-workshop-form__col {
    padding: 22px 18px 20px;
  }
  .oz-ruimte .oz-section.oz-workshop-form .wpforms-field-name .wpforms-field-row {
    flex-direction: column;
  }
}

/* ================================================================
   MOBILE READABILITY — left-align body text on small screens
   Centered text at narrow widths breaks reading rhythm.
   Hero stays as-authored (display text is fine centered).
   ================================================================ */
@media (max-width: 767px) {
  .oz-ruimte .oz-section p.has-text-align-center,
  .oz-ruimte .oz-section h2.has-text-align-center,
  .oz-ruimte .oz-section h3.has-text-align-center,
  .oz-ruimte .oz-section h4.has-text-align-center,
  .oz-ruimte .oz-section h5.has-text-align-center,
  .oz-ruimte .oz-section h6.has-text-align-center,
  .oz-ruimte .oz-section > .oz-container > h2,
  .oz-ruimte .oz-section > .oz-container > h3,
  .oz-ruimte .oz-section > .oz-container > h6,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > h2,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > h3,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > h6,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > .wp-block-group__inner-container > h2,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > .wp-block-group__inner-container > h3,
  .oz-ruimte .oz-section > .oz-container > .wp-block-group > .wp-block-group__inner-container > h6,
  .oz-ruimte .oz-section > .wp-block-group.alignfull h2,
  .oz-ruimte .oz-section > .wp-block-group.alignfull h3,
  .oz-ruimte .oz-section > .wp-block-group.alignfull h6 {
    text-align: left !important;
  }

  /* Center-aligned wp:buttons: keep buttons full-width / left-stacked */
  .oz-ruimte .oz-section .wp-block-buttons.is-content-justification-center {
    justify-content: flex-start;
  }
}

/* ================================================================
   Alternating 50/50 media rows
   Wrap consecutive wp:columns (image + text) with oz-ruimte-alt to
   auto-flip the column order on every even row. Editor only has to
   put image first every time — the browser alternates.
   Desktop only; mobile already stacks.
   ================================================================ */
@media (min-width: 768px) {
  .oz-ruimte .oz-ruimte-alt > .wp-block-columns:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.oz-ruimte .oz-ruimte-alt > .wp-block-columns {
  align-items: center;
}

/* Equal heights + rounded images on alt rows so pairs look intentional */
.oz-ruimte .oz-ruimte-alt .wp-block-column .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ================================================================
   Inspo grid: full-bleed 3-up image band with zero gap.
   Drop between text-heavy groups to add visual rhythm.
   ================================================================ */
.oz-ruimte .oz-ruimte-inspo-grid {
  padding: 0;
  max-width: 100%;
  margin: 0;
}

/* Grid lives on the inner-container that WP emits between the group div
   and its children — not the outer wrapper. */
.oz-ruimte .oz-ruimte-inspo-grid > .wp-block-group__inner-container,
.oz-ruimte .oz-ruimte-inspo-grid.wp-block-group-is-layout-flow,
.oz-ruimte .oz-ruimte-inspo-grid:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0;
  margin: 0;
}

.oz-ruimte .oz-ruimte-inspo-grid .wp-block-image,
.oz-ruimte .oz-ruimte-inspo-grid figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.oz-ruimte .oz-ruimte-inspo-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

@media (max-width: 767px) {
  .oz-ruimte .oz-ruimte-inspo-grid > .wp-block-group__inner-container,
  .oz-ruimte .oz-ruimte-inspo-grid.wp-block-group-is-layout-flow,
  .oz-ruimte .oz-ruimte-inspo-grid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: 1fr 1fr;
  }
}