/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

/* ── Typography helpers ───────────────────────────────────────────────────── */
.label-copper {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C26E3A;
}

.label-light {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #FFFFFF;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 580px;
  line-height: 1.6;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header,
.wp-block-template-part[data-slug="header"] > div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
}

.site-header.scrolled,
.wp-block-template-part[data-slug="header"].scrolled > div {
  background: #FFFFFF;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Logo image (SVG swap on scroll) ─────────────────────────────────────── */
.nav-logo-img-link {
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.3s ease;
}

/* Disabled (2026-07-16): turned out unnecessary. Every page gets `stille-page`
   (or `.home`) on <body> — see functions.php — which forces the header to an
   always-on translucent cream background + blur from the very top (never a
   truly transparent header over a dark photo). So the logo already sits on a
   light backdrop everywhere; this extra plate was redundant. Kept here,
   commented out, in case that global header treatment ever changes.
.site-header:not(.scrolled) .nav-logo-img-link,
.wp-block-template-part[data-slug="header"]:not(.scrolled) .nav-logo-img-link {
  background: rgba(255, 255, 255, 0.92);
}
*/

/* White version visible on dark hero, dark version hidden */
.logo-hero    { display: block; }
.logo-scrolled { display: none; }

/* Render logo larger than the HTML width/height attrs (CSS wins).
   Height-only + width:auto keeps the 320:70 SVG aspect ratio intact
   so the swap between hero/scrolled variants stays jitter-free. */
.logo-hero,
.logo-scrolled {
  height: 52px;
  width: auto;
}

/* On narrow screens 52px height renders ~300px wide (wide logo aspect
   ratio), which pushes the hamburger button off-screen in the nowrap
   nav-header flex row. Shrink the logo so both fit. */
@media (max-width: 600px) {
  .logo-hero,
  .logo-scrolled {
    height: 32px;
  }
}

/* After scrolling 50px: swap to dark logo on cream background */
.scrolled .logo-hero    { display: none; }
.scrolled .logo-scrolled { display: block; }

/* Keep legacy text logo rule for backward compat (WP may render wp:site-title) */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
}
.scrolled .nav-logo { color: #1A1A1A; }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WP navigation block renders links as .wp-block-navigation-item__content.
   Target that element directly with !important to override the block's
   inherited body text colour (#3D3D3D). */
.nav-links a,
.nav-links .wp-block-navigation-item__content {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.scrolled .nav-links a,
.scrolled .nav-links .wp-block-navigation-item__content { color: #3D3D3D !important; }
.nav-links a:hover,
.nav-links .wp-block-navigation-item__content:hover { color: #C26E3A !important; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-phone {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.3s;
}

.scrolled .nav-phone { color: #1A1A1A; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.wp-block-button.btn-copper .wp-block-button__link,
.wp-element-button.btn-copper {
  background-color: #C26E3A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.9rem 2rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: background 0.2s;
}

.wp-block-button.btn-copper .wp-block-button__link:hover {
  background-color: #A85C2E !important;
}

.wp-block-button.btn-outline-white .wp-block-button__link {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 0 !important;
  padding: 0.9rem 2rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
}

.wp-block-button.btn-outline-white .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.wp-block-button.btn-outline-dark .wp-block-button__link {
  background: transparent !important;
  color: #1A1A1A !important;
  border: 1px solid #1A1A1A !important;
  border-radius: 0 !important;
  padding: 0.9rem 2rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
}

/* ── Intro block ──────────────────────────────────────────────────────────── */
.intro-block {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 5rem 2rem;
  border-top: 1px solid #D5CFC8;
  border-bottom: 1px solid #D5CFC8;
}

.intro-block p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #3D3D3D;
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.product-card {
  background: #FFFFFF;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  /* Flex column so the body grows and the CTA link always aligns at the bottom */
  display: flex !important;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.product-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}

/* The <figure class="wp-block-image"> wrapper must also fill the container so
   the img's height:100% resolves against the container, not the figure itself */
.product-card__image figure,
.product-card__image .wp-block-image {
  margin: 0 !important;
  height: 100%;
  display: block;
}

.product-card__image img,
.product-card__image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.04);
}

.product-card__body {
  padding: 1.5rem;
  border-top: 3px solid #C26E3A;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C26E3A;
  margin-bottom: 0.5rem;
}

.product-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.75rem;
}

.product-card__specs {
  font-size: 0.85rem;
  color: #6B6B6B;
  line-height: 1.5;
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto; /* push to bottom of flex column body */
  padding-top: 1rem; /* keep visual spacing from specs text */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C26E3A;
  text-decoration: none;
  transition: gap 0.2s;
}

.product-card__link:hover { gap: 0.75rem; }

/* ── USPs bar ─────────────────────────────────────────────────────────────── */
.usps-bar {
  background: #F0EDE8;
  padding: 3rem 2rem;
}

.usps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  /* align-items:start — without this, grid items with shorter content fall
     to the bottom of the row (driven by the tallest item's wrapping), so
     their icons render 32px lower than the tallest item's icon. */
  align-items: start;
}

/* Override WP's `:where(.is-layout-flow) > *` rule which adds 32px
   margin-block-start to every non-first sibling. Inside a grid layout
   that pushes items 2..N down relative to item 1. The `:where` selector
   has specificity 0 so our class-based selector wins without !important. */
.usps-grid > .usp-item {
  margin-block-start: 0;
}

@media (max-width: 768px) {
  .usps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Icon area — fixed height so all 4 USP icons align on a single baseline
   regardless of intrinsic SVG dimensions. currentColor lets icons inherit
   from .usp-item color (charcoal by default, copper on hover/accent). */
.usp-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: 0.5rem;
  color: #1A1A1A;
}
.usp-item__icon svg {
  display: block;
  width: 36px;
  height: 36px;
}

.usp-item__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0.75rem 0 0.5rem;
}

.usp-item__text {
  font-size: 0.875rem;
  color: #6B6B6B;
  line-height: 1.5;
}

/* ── Specs table ──────────────────────────────────────────────────────────── */
.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table tr {
  border-bottom: 1px solid #E8E4DF;
}

.specs-table tr:last-child { border-bottom: none; }

.specs-table td {
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
}

.specs-table td:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C26E3A;
  width: 40%;
}

/* ── CTA section ──────────────────────────────────────────────────────────── */
.cta-section {
  background: #1A1A1A;
  padding: 6rem 2rem;
  text-align: center;
}

.cta-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto 2.5rem;
}

/* ── Split-panel reference rows ───────────────────────────────────────────── */

/* Remove the 80px global padding-top that WP injects on the constrained main wrapper
   for the archive-project page — the split-panel rows start flush after the hero. */
.post-type-archive-project main.wp-block-group.has-global-padding {
  padding-top: 0 !important;
}

/* Also zero out any block-gap / margin between elements inside */
.post-type-archive-project .wp-block-query,
.split-rows,
.split-rows .wp-block-query {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* List wrapper: stack rows vertically */
.split-rows .wp-block-post-template {
  display: flex !important;
  flex-direction: column;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.split-rows .wp-block-post-template > li {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* Thin divider between rows */
.split-rows .wp-block-post-template > li + li {
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}

/* The row itself: horizontal flex, min-height for impact */
.split-row {
  display: flex !important;
  flex-direction: row !important;
  min-height: 500px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* Even rows flip direction: photo right, text left */
.split-rows .wp-block-post-template > li:nth-child(even) .split-row {
  flex-direction: row-reverse !important;
}

/* Photo side: 55% of row width */
.split-row__photo {
  flex-shrink: 0 !important;
  width: 55% !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 380px;
  background: #1A1A1A;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the WP featured image block fill the photo container */
.split-row__photo .wp-block-post-featured-image {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

.split-row__photo .wp-block-post-featured-image figure,
.split-row__photo .wp-block-post-featured-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.split-row__photo .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s ease;
}

.split-row:hover .split-row__photo .wp-block-post-featured-image img {
  transform: scale(1.05);
}

/* Text panel: 45% of row width, dark charcoal */
.split-row__panel {
  flex: 1 !important;
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 3rem 3.5rem 3rem 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  position: relative;
}

/* Category label */
.split-row__type {
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C26E3A !important;
  margin-bottom: 1.25rem !important;
}

.split-row__type a {
  color: #C26E3A !important;
  text-decoration: none;
}

/* Title: serif italic, links the whole row via stretched link */
.split-row__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-style: italic;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

/* Excerpt below title */
.split-row__excerpt {
  color: rgba(255,255,255,0.70) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: auto !important; /* pushes link to bottom */
  margin-top: 0 !important;
}

.split-row__title a {
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

/* Stretched link: makes the full .split-row clickable */
.split-row__title a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* "Bekijk project" link at bottom of panel */
.split-row__link,
.split-row__link a,
.wp-block-read-more.split-row__link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none !important;
  transition: color 0.3s ease, gap 0.3s ease;
  margin-top: 1.75rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.split-row__link::after,
.split-row__link a::after,
.wp-block-read-more.split-row__link::after {
  content: '→';
}

.split-row:hover .split-row__link,
.split-row:hover .split-row__link a,
.split-row:hover .wp-block-read-more.split-row__link {
  color: #FFFFFF !important;
  gap: 0.75rem;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .split-row {
    flex-direction: column !important;
    min-height: unset;
  }

  .split-rows .wp-block-post-template > li:nth-child(even) .split-row {
    flex-direction: column !important;
  }

  .split-row__photo {
    width: 100% !important;
    min-height: 280px;
  }

  .split-row__panel {
    padding: 2rem 1.5rem !important;
  }
}

/* ── Single reference — split-panel hero ─────────────────────────────────── */

/* Push page down by nav height so the fixed nav sits in cream, not over the hero.
   body:has() is page-scoped — only applies when .single-ref-hero is present.   */
body:has(.single-ref-hero) {
  padding-top: 92px;
}

.single-ref-hero {
  display: flex !important;
  flex-direction: row !important;
  min-height: calc(100vh - 92px);
  margin: 0 !important;
  padding: 0 !important;
}

/* WP's is-layout-flow adds margin-block-start:2rem to every 2nd+ sibling.
   In our flex row this pushes the panel 32px below the photo's top edge.
   Kill it here; specific elements below restore intentional spacing.        */
.single-ref-hero > * {
  margin-block-start: 0 !important;
}

/* Same fix inside the panel: prevents WP doubling our explicit margins.     */
.single-ref-hero__panel > * {
  margin-block-start: 0 !important;
}

/* Photo side: 60% */
.single-ref-hero__photo {
  flex-shrink: 0 !important;
  width: 60% !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 50vh;
  background: #1A1A1A;
  margin: 0 !important;
  padding: 0 !important;
}

.single-ref-hero__photo .wp-block-post-featured-image {
  position: absolute !important;
  inset: 0;
  height: 100% !important;
  margin: 0 !important;
}

.single-ref-hero__photo .wp-block-post-featured-image figure,
.single-ref-hero__photo .wp-block-post-featured-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.single-ref-hero__photo .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Dark info panel: 40% */
.single-ref-hero__panel {
  flex: 1 !important;
  background: #1A1A1A;
  color: #FFFFFF;
  padding: 5.5rem 3rem 4rem 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden;
}

/* Category/type label */
.single-ref-hero__type {
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C26E3A !important;
  margin-bottom: 1rem !important;
}

.single-ref-hero__type a { color: #C26E3A !important; text-decoration: none; }

/* Title */
.single-ref-hero__title {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem) !important;
  font-style: italic;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
  margin-top: 0.75rem !important;
}

/* Meta bar inside dark panel — override border and text colours.
   margin-top: 2rem restores the spacing that WP block-gap was providing.  */
.single-ref-hero__panel .project-meta-bar {
  margin-top: 2rem !important;
  margin-bottom: 1.5rem !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.single-ref-hero__panel .project-meta-bar p {
  color: rgba(255, 255, 255, 0.6) !important;
}

.single-ref-hero__panel .project-meta-bar .label-copper {
  color: #C26E3A !important;
}

/* Excerpt — margin-top restores spacing removed by WP-gap kill above      */
.single-ref-hero__excerpt {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex: 1;
}

.single-ref-hero__excerpt p { color: rgba(255, 255, 255, 0.7) !important; }

/* Back link — pushed to bottom via margin-top:auto */
.single-ref-hero__back {
  margin-top: 2rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.single-ref-hero__back a {
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.25s;
}

.single-ref-hero__back a:hover { color: #FFFFFF !important; }

/* Mobile: stack */
@media (max-width: 768px) {
  .single-ref-hero { flex-direction: column !important; min-height: unset; }
  .single-ref-hero__photo { width: 100% !important; min-height: 55vw; }
  .single-ref-hero__panel { padding: 2rem 1.5rem !important; }
}

/* ── Product detail (description + specs table) ───────────────────────────── */

.product-description {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #3D3D3D;
  margin-bottom: 2.5rem;
  max-width: 72ch;
}

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 3rem;
  font-size: 0.9rem;
}

.product-specs-table th,
.product-specs-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #E8E4DF;
}

.product-specs-table th {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #C26E3A;
  width: 40%;
}

.product-specs-table td { color: #1A1A1A; }
.product-specs-table tr:last-child th,
.product-specs-table tr:last-child td { border-bottom: none; }

/* ── Product gallery grid ─────────────────────────────────────────────────── */

.product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.product-gallery-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #F0EDE8;
}

.product-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-gallery-grid a:hover img { transform: scale(1.04); }

.product-gallery-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  color: #1A1A1A;
  margin: 3.5rem 0 1.5rem;
}

@media (max-width: 600px) {
  .product-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Hero spacer ─────────────────────────────────────────────────────────── */
/* Homepage hero has min-height:100vh inline; page-hero covers are capped.
   margin-top:0 pulls the hero flush to y=0 so the dark hero image extends
   BEHIND the fixed transparent header — required for white logo contrast.
   Selector includes `.wp-block-post-content` ancestor to match the specificity
   of the existing `.wp-block-post-content .wp-block-cover.alignfull` rule that
   sets margin-top:4rem — without that, the 4rem rule wins and leaves a 64px
   cream gap above the hero, making the white logo invisible at scrollY=0. */
.wp-block-post-content .wp-block-cover.is-page-hero,
.wp-block-cover.is-page-hero {
  margin-top: 0 !important;
  min-height: 50vh !important;
}

/* Prevent content cover blocks from becoming full-screen */
.wp-block-post-content .wp-block-cover {
  min-height: unset !important;
}

/* Top gradient on every hero cover ensures nav links (white) are always legible
   regardless of how bright the background photo is at the top edge */
.wp-block-cover.is-page-hero::after,
.wp-block-cover.alignfull:not(.wp-block-post-content .wp-block-cover)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── Page hero offset ─────────────────────────────────────────────────────── */
.wp-site-blocks > * { margin-top: 0 !important; }

/* ── Mobile nav ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
  }

  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s;
  }

  .nav-mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1A1A1A;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 99;
  }

  .nav-mobile-open .nav-links a {
    font-size: 1.5rem;
    color: #FFFFFF;
  }
}

@media (min-width: 901px) {
  .nav-hamburger { display: none; }
}

/* ── Mobiel burger-menu — WP core navigation overlay fixes ────────────────────
   Het menu gebruikt WP's eigen wp:navigation overlay (niet de legacy
   .nav-hamburger hierboven). Drie problemen opgelost:

   1) Overlay bleef "onder de pagina" hangen wanneer je gescrolld was. Oorzaak:
      .site-header heeft `backdrop-filter: blur()`, en een niet-none backdrop-filter
      maakt van de header een *containing block* voor position:fixed-kinderen. De
      overlay (position:fixed; inset:0) viel daardoor binnen de 88px-hoge header i.p.v.
      het volledige scherm — hij werd maar 88px hoog en de pagina bleef zichtbaar.
      Bovendien maakt de header (position:fixed + z-index:100) een stacking context,
      waardoor de overlay nooit boven pagina-content met hogere z-index (o.a. de mobiele
      CTA-bar, z-index:200) kon komen. Beide alleen neutraliseren zodra het menu open is
      (WP zet `has-modal-open` op <html>), zodat de frosted-glass-header verder intact
      blijft.
   2) Icoon was 2 streepjes → nu 3 (WP's open-knop rendert een 2-lijns SVG; die
      verbergen we en tekenen 3 balken met currentColor zodat de kleur meebeweegt met de
      header-tekst).
   3) Knop stond niet in de hoek: de (op mobiel verborgen) telefoon/CTA-groep hield de
      rechter flex-slot bezet. Die groep verbergen we op mobiel zodat de burger tegen de
      rechter-gutter komt. */
html.has-modal-open .site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 100001 !important; /* boven CTA-bar (200) en sticky-elementen (9999) */
}

@media (max-width: 900px) {
  /* Verberg de lege telefoon/CTA-groep zodat de burger in de hoek valt. */
  .nav-header > .wp-block-group { display: none; }

  /* Vervang WP's 2-lijns open-icoon door 3 balken, rechts uitgelijnd (in de hoek),
     met een 44×44 tap-target. */
  .wp-block-navigation__responsive-container-open svg { display: none; }
  .wp-block-navigation__responsive-container-open {
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: flex-end;
    background:
      linear-gradient(currentColor, currentColor) right top 15px / 26px 2px no-repeat,
      linear-gradient(currentColor, currentColor) right center / 26px 2px no-repeat,
      linear-gradient(currentColor, currentColor) right bottom 15px / 26px 2px no-repeat;
  }
}

/* ── Grid utilities ───────────────────────────────────────────────────────── */
/* Asymmetric 12-column editorial grid (prototype parity).
   Default cards span 5 cols, .product-card--wide spans 7 — yielding 7/5 + 5/7 rows. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.products-grid > .product-card { grid-column: span 5; }
.products-grid > .product-card.product-card--wide { grid-column: span 7; }

@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid > .product-card,
  .products-grid > .product-card.product-card--wide { grid-column: span 1; }
}

@media (max-width: 600px) {
  .products-grid { grid-template-columns: 1fr; }
  .products-grid > .product-card,
  .products-grid > .product-card.product-card--wide { grid-column: span 1; }
}

/* Aspect ratio variants for the asymmetric layout — wide cards get 4/3,
   narrow cards get 3/4 to create magazine-style rhythm. */
.products-grid > .product-card .product-card__image { aspect-ratio: 3/4; }
.products-grid > .product-card.product-card--wide .product-card__image { aspect-ratio: 4/3; }

@media (max-width: 1024px) {
  .products-grid > .product-card .product-card__image,
  .products-grid > .product-card.product-card--wide .product-card__image { aspect-ratio: 4/3; }
}

/* .references-grid replaced by .split-rows — see Split-panel reference rows section above */

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: #1A1A1A;
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 2rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1280px;
  margin: 0 auto 3rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

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

.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.footer-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C26E3A;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li { margin-top: 0.5rem; }

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: #FFFFFF; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 0.8rem;
}

/* ── Advantages list ──────────────────────────────────────────────────────── */
.advantages-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 600px) {
  .advantages-list { grid-template-columns: 1fr; }
}

.advantages-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3D3D3D;
}

.advantages-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: #C26E3A;
  margin-top: 0.55rem;
}

/* ── Navigation dropdown ──────────────────────────────────────────────────── */
.wp-block-navigation .wp-block-navigation-submenu {
  position: relative;
}

.wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
  display: none;
  position: absolute;
  top: 100%; /* No gap — was calc(100%+0.75rem) which caused hover dead zone */
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #FFFFFF;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding-top: 0.5rem; /* Visual offset lives inside the container now */
  padding: 0.5rem 0;
  z-index: 200;
  border-top: 2px solid #C26E3A;
}

.wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
  display: block;
}

/* Inside the mobile overlay the submenu must read as an inline list, not a
   floating desktop dropdown. WP's overlay CSS neutralises `position`, but the
   dropdown's translateX(-50%) still applied — with position:static that pushed
   the panel half off the left edge, clipping the item labels. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
  transform: none;
  background: transparent;
  box-shadow: none;
  border-top: none;
  min-width: 0;
}

/* …and it must stay open regardless of hover/focus. The desktop dropdown above
   is display:none until :hover/:focus-within — fine with a mouse, but in the
   overlay it made the panel's 250px collapse/expand on focus. Opening the menu
   focuses "Producten" (submenu expanded); the first tap on "Referenties" moved
   focus out, the panel collapsed, and every item below jumped 250px up — so the
   tap landed on empty space and only the second tap navigated. */
@media (max-width: 900px) {
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    display: flex !important;
  }
}

/* Tablet dead zone — restore the hamburger between 600px and 900px.
   The theme hides the inline nav below 900px, but WP hides the hamburger above
   600px, so 601–900px (iPad portrait) rendered a header with no navigation at
   all. Show the burger across the theme's own hidden-nav range. */
@media (min-width: 600px) and (max-width: 900px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Overlay layout — left-aligned with an indented submenu.
   The nav block is set to justify-center for the desktop bar; inherited into
   the overlay that centred every item, and with labels ranging from
   "Stepsaver" to "Plateau-trapliften" the result read as a ragged column with
   no parent/child distinction. Alignment is set on the flex parents (the UL
   also carries the centring, so overriding the container alone isn't enough).
   Scoped to 900px to match the range where the overlay can actually open. */
@media (max-width: 900px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100% !important;
  }

  /* The overlay's own padding computes to 0 here, so left-aligned items would
     sit flush against the screen edge. Reuse the site gutter so the menu lines
     up with page content. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
    box-sizing: border-box;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-left: 1.25rem !important;
    padding-right: 0 !important;
    margin-top: 0.5rem;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 0.78rem !important;
    color: #555 !important;
  }
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #3D3D3D !important;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  background: #FAF8F5;
  color: #C26E3A !important;
}

/* WP renders a native <button class="wp-block-navigation__submenu-icon"> for the dropdown.
   Style it to match the nav link; hide the default SVG, replace with a small CSS triangle. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.7;
  font-size: 0.6rem;
  line-height: 1;
}
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 10px;
  height: 10px;
}

/* ── Project gallery — masonry ───────────────────────────────────────────── */
/*
 * WP 6.x gallery blocks carry `has-nested-images is-layout-flex`.
 * WP's layout engine generates dynamic CSS that:
 *   a) sets display:flex on the outer figure via .is-layout-flex
 *   b) hardcodes width:calc(33.33% - gap) on each inner figure.wp-block-image
 *   c) sets width:auto; max-width:100% !important on each img
 *
 * To switch to CSS-columns masonry we must override ALL three with !important:
 *   1. display:block on the outer figure  (kills the flex context)
 *   2. width:100% on inner figures        (fills the column instead of 33%)
 *   3. width:100% on images               (fills the figure)
 */
figure.wp-block-gallery.has-nested-images.project-gallery,
.wp-block-gallery.project-gallery {
  columns: 3;
  column-gap: 0.75rem;
  display: block !important;   /* override is-layout-flex → display:flex */
  flex-wrap: unset !important;
  align-items: unset !important;
  gap: unset !important;
  /* v2.1.0: was margin:0 → kept gallery flush left in constrained main.
     Now: auto-center, breathing margin top/bottom, fill content width. */
  margin: 2.5rem auto !important;
  width: 100%;
  max-width: 100%;
}

/* Inner figures: become block boxes filling 100% of their CSS column */
figure.wp-block-gallery.has-nested-images.project-gallery figure.wp-block-image,
figure.wp-block-gallery.has-nested-images.project-gallery figure.wp-block-image:not(#individual-image),
.wp-block-gallery.project-gallery > figure {
  display: block !important;
  width: 100% !important;        /* override WP's width:calc(33.33%-gap) */
  flex: none !important;
  flex-grow: 0 !important;
  break-inside: avoid;
  margin: 0 0 0.75rem !important;
  overflow: hidden;
  cursor: zoom-in;
}

/* Images fill the figure at natural proportions */
figure.wp-block-gallery.has-nested-images.project-gallery figure.wp-block-image img,
.wp-block-gallery.project-gallery > figure img {
  width: 100% !important;
  height: auto !important;       /* natural proportions — no forced crop */
  max-width: 100% !important;
  display: block !important;
  transition: transform 0.4s ease;
}

.wp-block-gallery.project-gallery > figure:hover img,
figure.wp-block-gallery.has-nested-images.project-gallery figure.wp-block-image:hover img {
  transform: scale(1.03);
}

/* Apply the same masonry to galleries in post content that lack the project-gallery class */
.wp-block-post-content figure.wp-block-gallery.has-nested-images:not(.project-gallery),
.wp-block-post-content .wp-block-gallery:not(.project-gallery) {
  columns: 3;
  column-gap: 0.75rem;
  display: block !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  gap: unset !important;
  margin: 2.5rem auto !important;
  width: 100%;
  max-width: 100%;
}

.wp-block-post-content figure.wp-block-gallery.has-nested-images:not(.project-gallery) figure.wp-block-image,
.wp-block-post-content figure.wp-block-gallery.has-nested-images:not(.project-gallery) figure.wp-block-image:not(#individual-image),
.wp-block-post-content .wp-block-gallery:not(.project-gallery) > figure {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  flex-grow: 0 !important;
  break-inside: avoid;
  margin: 0 0 0.75rem !important;
  overflow: hidden;
}

.wp-block-post-content figure.wp-block-gallery.has-nested-images:not(.project-gallery) figure.wp-block-image img,
.wp-block-post-content .wp-block-gallery:not(.project-gallery) > figure img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

@media (max-width: 768px) {
  figure.wp-block-gallery.has-nested-images.project-gallery,
  .wp-block-gallery.project-gallery,
  .wp-block-post-content .wp-block-gallery { columns: 2; }
}

@media (max-width: 480px) {
  figure.wp-block-gallery.has-nested-images.project-gallery,
  .wp-block-gallery.project-gallery,
  .wp-block-post-content .wp-block-gallery { columns: 1; }
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
html.rl-no-scroll { overflow: hidden; }

.rl-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.rl-lightbox.is-open { display: flex; }

.rl-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.94);
  cursor: zoom-out;
}

.rl-lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-lightbox__img {
  display: block;
  max-width: 88vw;
  max-height: 84vh;
  width: auto;
  height: auto !important;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/* ── Lightbox controls ───────────────────────────────────────────────────── */
.rl-lightbox__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  font-family: 'Inter', sans-serif;
}

.rl-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.rl-lightbox__prev,
.rl-lightbox__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.rl-lightbox__prev { left: 1.25rem; }
.rl-lightbox__next { right: 1.25rem; }

.rl-lightbox__prev:hover,
.rl-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.rl-lightbox__counter {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Loading spinner */
.rl-lightbox__loader {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #C26E3A;
  border-radius: 50%;
  animation: rl-spin 0.7s linear infinite;
  display: none;
}

@keyframes rl-spin {
  to { transform: rotate(360deg); }
}

/* ── Specs table — scoped to wp-block-table ────────────────────────────────── */
/* v2.1.0: support BOTH <td> (legacy) and <th scope="row"> (a11y-correct) for
   the first column. Same copper-uppercase label treatment either way. */
.wp-block-table.specs-table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #E8E4DF;
}

.wp-block-table.specs-table th,
.wp-block-table.specs-table td {
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #E8E4DF;
  vertical-align: top;
  text-align: left;
  background: transparent;
}

.wp-block-table.specs-table tbody th[scope="row"],
.wp-block-table.specs-table td:first-child {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C26E3A;
  width: 42%;
  font-family: 'Inter', sans-serif;
}

/* Ensure <strong> inside first column inherits the copper color */
.wp-block-table.specs-table tbody th[scope="row"] strong,
.wp-block-table.specs-table td:first-child strong {
  color: inherit;
  font-weight: 600;
}

/* Value cells: charcoal body color */
.wp-block-table.specs-table tbody td:not(:first-child),
.wp-block-table.specs-table tbody th[scope="row"] + td {
  color: #1A1A1A;
  font-weight: 500;
}

/* ── Full-bleed product sections ────────────────────────────────────────────── */
/* Product page content lives inside a constrained <main> (820px max-width).    *
 * alignfull groups can't escape without help — use the viewport-bleed trick:   *
 *   margin-left: calc(50% - 50vw) pulls the left edge to viewport x=0          *
 *   width: 100vw fills the whole viewport                                       */
html { overflow-x: hidden; } /* prevent scroll from the bleed trick */

.wp-block-post-content .wp-block-group.alignfull,
.wp-block-post-content .wp-block-group.alignfull.has-global-padding {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
}

/* On mobile, constrained children inside the section need side padding so
   text doesn't touch screen edges (is-layout-constrained handles the 820px
   max-width but not the minimum side gutter on small screens) */
@media (max-width: 880px) {
  .wp-block-post-content .wp-block-group.alignfull > * {
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
    box-sizing: border-box;
  }
}

/* ── Referenties archive — padding ───────────────────────────────────────── */
/* Split-panel rows flush to hero, breathing room only at bottom */
.post-type-archive-project main.wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 6rem !important;
}

/* ── Reference card — title hover colour ────────────────────────────────── */
/* WP renders wp:post-title with inline style="color:#FFFFFF";
   !important is required to override the inline style on hover.
   The <a> inside the h3 inherits the global link color (copper) unless we
   force it to white explicitly — without this, default state shows copper
   titles which fail contrast on bright photos. */
.reference-card__title,
.reference-card__title a {
  color: #FFFFFF !important;
  transition: color 0.25s ease;
  text-decoration: none;
}

.reference-card:hover .reference-card__title,
.reference-card:hover .reference-card__title a {
  color: #C26E3A !important;
}

/* ── Product / project detail — content spacing ──────────────────────────── */
/* Add breathing room between the spec table and any adjacent content block  */
.wp-block-post-content .wp-block-table.specs-table {
  margin-bottom: 3rem !important;
}

.wp-block-post-content .wp-block-table.specs-table + .wp-block-list,
.wp-block-post-content .wp-block-table.specs-table + .wp-block-heading,
.wp-block-post-content .wp-block-table.specs-table + .wp-block-paragraph,
.wp-block-post-content .wp-block-table.specs-table + .wp-block-group {
  margin-top: 1rem;
}

/* Post content standalone images — natural proportions, full width */
.wp-block-post-content .wp-block-image img {
  height: auto !important;
  width: 100%;
  max-width: 100%;
}

/* Post content galleries that are NOT the .project-gallery thumbnail strip —
   show images at full natural size, no forced cropping */
.wp-block-post-content .wp-block-gallery:not(.project-gallery) figure img {
  height: auto !important;
  width: 100%;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* v2.0.0 — Prototype parity: editorial details from /redesign/src/           */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Skip-to-content link (accessibility) ────────────────────────────────── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 9999;
}
.skip-to-content:focus {
  left: 1rem;
  top: 1rem;
  background: #C26E3A;
  color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 0;
}

/* ── Hairline divider (editorial separator) ──────────────────────────────── */
.hairline {
  display: block;
  height: 1px;
  width: 60px;
  background: #C26E3A;
  margin: 0 auto;
}
.hairline-light { background: rgba(255, 255, 255, 0.25); }
.hairline-full { width: 100%; }

/* ── Gray content sections inside post content (warm-gray callouts) ──────── */
/* Catches both background-color hex (#F0EDE8 / warm-gray) and named slug
   .has-warm-gray-background-color groups inside long form post content. */
.wp-block-post-content .wp-block-group[style*="#F0EDE8"],
.wp-block-post-content .wp-block-group[style*="#f0ede8"],
.wp-block-post-content .wp-block-group.has-warm-gray-background-color,
.wp-block-post-content .wp-block-group.section-callout {
  padding: 2.5rem 2rem !important;
  margin: 2.5rem 0 !important;
  border-left: 3px solid #C26E3A;
}

@media (min-width: 768px) {
  .wp-block-post-content .wp-block-group[style*="#F0EDE8"],
  .wp-block-post-content .wp-block-group[style*="#f0ede8"],
  .wp-block-post-content .wp-block-group.has-warm-gray-background-color,
  .wp-block-post-content .wp-block-group.section-callout {
    padding: 3rem 3rem !important;
  }
}

/* Two-column bullet list inside callouts breathes more */
.wp-block-post-content .wp-block-group.section-callout .wp-block-columns {
  margin-top: 1.25rem;
  gap: 2rem;
}

/* Make sure black "in de praktijk" sections don't crash into the gray box.
   Exclude .is-page-hero — the page hero must sit flush at y=0 under the
   fixed transparent header so the dark hero image gives the white logo
   contrast. Without :not(.is-page-hero), this rule would pull every page's
   hero 4rem down, leaving a cream gap behind the header. */
.wp-block-post-content .wp-block-group.alignfull[style*="background-color:#1A1A1A"],
.wp-block-post-content .wp-block-group.alignfull.bg-charcoal,
.wp-block-post-content .wp-block-cover.alignfull:not(.is-page-hero) {
  margin-top: 4rem !important;
}

/* ── Mobile CTA bar (sticky bottom — Bellen + Offerte) ───────────────────── */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 900px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #FFFFFF;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.6rem;
    gap: 0.6rem;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  }

  .mobile-cta-bar a {
    flex: 1;
    text-align: center;
    padding: 0.85rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  .mobile-cta-bar .cta-call {
    border: 1px solid rgba(26, 26, 26, 0.2);
    color: #1A1A1A;
  }

  .mobile-cta-bar .cta-call:hover {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
  }

  .mobile-cta-bar .cta-quote {
    background: #C26E3A;
    color: #FFFFFF;
  }

  .mobile-cta-bar .cta-quote:hover { background: #A45A2B; }

  /* Make room so footer / page bottom isn't hidden behind the bar */
  body { padding-bottom: 4.5rem; }

  /* Hide the desktop top-right CTA on mobile to avoid duplication */
  .nav-header > .wp-block-group:last-child .wp-block-buttons { display: none; }
}

/* ── 4-step purchase process ─────────────────────────────────────────────── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
  margin: 2rem 0;
}

.process-steps__item {
  position: relative;
  padding: 2rem 1.5rem;
  text-align: left;
  border-right: 1px solid rgba(26, 26, 26, 0.08);
}

.process-steps__item:last-child { border-right: none; }

.process-steps__item::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 2.5rem;
  color: #C26E3A;
  line-height: 1;
  margin-bottom: 1rem;
}

.process-steps__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.5rem !important;
}

.process-steps__text {
  font-size: 0.9rem;
  color: #6B6B6B;
  line-height: 1.6;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps__item:nth-child(2) { border-right: none; }
  .process-steps__item:nth-child(1),
  .process-steps__item:nth-child(2) {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  }
}

@media (max-width: 600px) {
  .process-steps { grid-template-columns: 1fr; }
  .process-steps__item {
    border-right: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  }
  .process-steps__item:last-child { border-bottom: none; }
}

/* ── FAQ accordion ───────────────────────────────────────────────────────── */
.faq-list {
  list-style: none !important;
  padding: 0 !important;
  /* margin: 0 auto — not margin: 0 — so the list centers within its
     alignfull parent. Plain `margin: 0 !important` left it stuck to x=0
     against the browser edge on desktop. */
  margin: 0 auto !important;
}

.faq-item {
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  padding: 0;
}

.faq-item:last-child { border-bottom: 1px solid rgba(26, 26, 26, 0.12); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 2.5rem 1.5rem 0;
  position: relative;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1A1A1A;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #C26E3A;
  transition: transform 0.3s ease;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item[open] summary { color: #C26E3A; }

.faq-item__body {
  padding: 0 2.5rem 1.75rem 0;
  color: #3D3D3D;
  font-size: 1rem;
  line-height: 1.75;
}

.faq-item__body p:last-child { margin-bottom: 0 !important; }

/* ── Featured reference: prototype-parity charcoal full-bleed 7/5 ────────── */
.featured-reference--dark {
  background: #1A1A1A;
}

.featured-reference--dark .wp-block-columns {
  margin: 0 !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.featured-reference--dark .wp-block-column:first-child {
  padding: 0 !important;
}

.featured-reference--dark .wp-block-column:first-child figure {
  margin: 0 !important;
  height: 100%;
}

.featured-reference--dark .wp-block-column:first-child figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 480px;
}

.featured-reference--dark .wp-block-column:nth-child(2) {
  padding: 4rem 3rem !important;
}

@media (min-width: 1024px) {
  .featured-reference--dark .wp-block-column:nth-child(2) {
    padding: 5rem 4rem !important;
  }
}

.featured-reference--dark h2,
.featured-reference--dark .wp-block-heading { color: #FFFFFF !important; }
.featured-reference--dark p { color: rgba(255, 255, 255, 0.7); }
.featured-reference--dark .label-copper { color: #C26E3A; }

/* ── Trust badges row (no claim until verified — placeholder neutral) ────── */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.trust-row__item {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #6B6B6B;
  font-size: 0.95rem;
  text-align: center;
}

.trust-row__item strong {
  display: block;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #1A1A1A;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

/* ── Comparison table (specs across models) ──────────────────────────────── */
.specs-comparison {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 2rem 0;
  background: #FFFFFF;
}

.specs-comparison th,
.specs-comparison td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  vertical-align: top;
}

.specs-comparison thead th {
  background: #FAF8F5;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px solid #C26E3A;
}

.specs-comparison tbody th {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C26E3A;
  background: #FAF8F5;
  width: 30%;
}

.specs-comparison tbody td { color: #3D3D3D; }
/* Mobiele kaart-weergave: zie geconsolideerd blok onder "Comparison table polish". */

/* ── Process stage on charcoal (alternative styling) ─────────────────────── */
.process-section--dark { background: #1A1A1A; color: #FFFFFF; }
.process-section--dark .process-steps__title { color: #FFFFFF; }
.process-section--dark .process-steps__text { color: rgba(255, 255, 255, 0.65); }
.process-section--dark .process-steps__item {
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* ── Footer mobile padding to clear sticky CTA bar ───────────────────────── */
@media (max-width: 900px) {
  .site-footer { padding-bottom: 2rem; }
}

/* ── Product page spacing — make wide gray sections feel intentional ─────── */
.wp-block-post-content > .wp-block-group + .wp-block-group {
  margin-top: 2rem;
}

.wp-block-post-content .wp-block-group.alignfull + .wp-block-group.alignfull {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* v2.1.0 — Visual QA polish                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Model-section image consistency ──────────────────────────────────────── */
/* In a 50/50 image+specs layout, natural-proportion photos make the columns
   uneven. Force a 4/3 aspect ratio with object-fit cover so left and right
   columns have a predictable rhythm.
   IMPORTANT: width:100% (not height:100%) + aspect-ratio — combining
   height:100% with aspect-ratio makes the browser derive width FROM height,
   causing the figure to overflow the column (~1136px on a 347px column). */
.model-section .wp-block-columns .wp-block-column:first-child figure.wp-block-image,
.model-section .wp-block-columns .wp-block-column:first-child .wp-block-image {
  margin: 0 !important;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: block;
}

.model-section .wp-block-columns .wp-block-column:first-child figure.wp-block-image img,
.model-section .wp-block-columns .wp-block-column:first-child .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.model-section:hover .wp-block-columns .wp-block-column:first-child img {
  transform: scale(1.02);
}

@media (max-width: 880px) {
  /* Stack columns properly on mobile and let aspect-ratio breathe */
  .model-section .wp-block-columns {
    flex-direction: column !important;
  }
  .model-section .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .model-section .wp-block-columns .wp-block-column:first-child .wp-block-image {
    aspect-ratio: 16/10;
  }
}

/* ── Reference (project) page main column — improve gallery centering ─── */
/* The single-project main is constrained 820px. Galleries inside need to fit
   that constraint cleanly with proper top/bottom rhythm. */
.wp-block-post-content > .wp-block-gallery,
.wp-block-post-content > figure.wp-block-gallery {
  margin-block: 2.5rem !important;
}

/* Reference detail body images: subtle shadow + rounding for editorial feel */
.single-project .wp-block-post-content .wp-block-image:not(.no-shadow) img {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Comparison table polish ──────────────────────────────────────────────── */
.specs-comparison {
  border: 1px solid #E8E4DF;
  border-radius: 2px;
  overflow: hidden;
}

/* Corner cell (top-left, empty) — let it blend with the cream header band
   instead of being a glaring black block. The empty cell carries no info,
   so any contrasting fill draws the eye to nothing. */
.specs-comparison thead th:first-child {
  background: transparent;
  border-bottom-color: transparent;
}

.specs-comparison thead th {
  border-right: 1px solid rgba(26,26,26,0.06);
}

.specs-comparison thead th:last-child { border-right: none; }

/* Desktop-tabel: kolomranden + gecentreerde waarden. Beperkt tot ≥769px zodat
   het de mobiele kaart-weergave hieronder niet lekt. */
@media (min-width: 769px) {
  .specs-comparison tbody td {
    border-right: 1px solid rgba(26,26,26,0.04);
    text-align: center;
  }
  .specs-comparison tbody td:last-child { border-right: none; }
}

/* ── Mobiele kaart-weergave voor de vergelijkingstabel ───────────────────────
   De tabel (specs × modellen) is niet leesbaar op smalle schermen — tot 7
   kolommen op 375px. Elke spec-rij wordt een kaart: spec-naam als kop, daaronder
   per model "modelnaam … waarde". De modelnamen komen via specs-table.js in
   data-label op elke cel; zonder die labels zijn de gestapelde waarden
   betekenisloos. Zo blijft het een échte vergelijking (alle modellen per spec)
   zonder horizontaal scrollen. Geconsolideerd blok — vervangt twee eerdere,
   conflicterende mobiele definities. Staat bewust ná de desktop-polish zodat het
   qua bronvolgorde wint. */
@media (max-width: 768px) {
  .specs-comparison thead { display: none; }
  .specs-comparison,
  .specs-comparison tbody,
  .specs-comparison tr,
  .specs-comparison th,
  .specs-comparison td { display: block; width: 100%; }

  .specs-comparison tr {
    border: 1px solid #E8E4DF;
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
  }

  /* Spec-naam = kaartkop */
  .specs-comparison tbody th[scope="row"] {
    background: #FAF8F5;
    color: #C26E3A;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #E8E4DF;
  }

  /* Waarde-rij: "Modelnaam … waarde" links-rechts */
  .specs-comparison tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: right;
    padding: 0.6rem 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  }
  .specs-comparison tbody td:last-child { border-bottom: none; }

  .specs-comparison tbody td::before {
    content: attr(data-label);
    color: #1A1A1A;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* ── Keuzehulp-tabel (/producten/) — mobiele kaart-weergave ──────────────────
   3-koloms beslistabel (situatie → overbrugging → aanbevolen lift) met inline
   min-width:640px, die op smalle schermen horizontaal moet scrollen. Op mobiel
   wordt elke rij een kaart: situatie bovenaan, daaronder overbrugging + advies
   met kolomkop-labels (via specs-table.js). !important overschrijft de inline
   cel-styles (padding/border/white-space); de tekst/kleuren blijven behouden. */
@media (max-width: 768px) {
  .keuzehulp-table { min-width: 0 !important; }
  .keuzehulp-table thead { display: none; }
  .keuzehulp-table,
  .keuzehulp-table tbody,
  .keuzehulp-table tr,
  .keuzehulp-table td { display: block; width: 100%; }

  .keuzehulp-table tr {
    border: 1px solid #E5DFD7;
    border-radius: 4px;
    margin-bottom: 1rem;
    overflow: hidden;
  }

  .keuzehulp-table td {
    white-space: normal !important;
    padding: 0.7rem 1rem !important;
    border-bottom: 1px solid #F0EDE8 !important;
  }
  .keuzehulp-table td:last-child { border-bottom: none !important; }
  .keuzehulp-table td:first-child { background: #FAF8F5; }

  .keuzehulp-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C26E3A;
    font-weight: 600;
    margin-bottom: 0.2rem;
  }
}

/* ── Single-project meta-bar polish ──────────────────────────────────────── */
.project-meta-bar {
  margin: 2rem 0 3rem !important;
  padding: 1.5rem 0 !important;
  border-top: 1px solid #D5CFC8;
  border-bottom: 1px solid #D5CFC8;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.project-meta-bar > .wp-block-group {
  margin: 0;
}

.project-meta-bar .label-copper {
  font-size: 0.7rem !important;
  margin-bottom: 0.25rem !important;
}

/* ── In-content paragraph rhythm ─────────────────────────────────────────── */
.wp-block-post-content > .wp-block-paragraph,
.wp-block-post-content > p {
  line-height: 1.75;
  color: #3D3D3D;
}

.wp-block-post-content > .wp-block-heading {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.wp-block-post-content > .wp-block-list {
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* ── Ensure inline content images don't bleed past 820px main ────────────── */
.wp-block-post-content > figure.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* ── Model section title separator (subtle copper hairline above heading) ── */
.model-section .wp-block-columns .wp-block-column:nth-child(2) > .label-copper:first-child {
  position: relative;
  padding-top: 0.5rem;
}

.model-section .wp-block-columns .wp-block-column:nth-child(2) > .label-copper:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: #C26E3A;
}

/* ── Page-hero subtle bottom shadow for definition against content ───────── */
.is-page-hero {
  position: relative;
}

.is-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ── Working-section process-steps on cream — copper number contrast ──────── */
.working-section .process-steps__item {
  border-right-color: rgba(26,26,26,0.08);
}

@media (max-width: 900px) {
  .working-section .process-steps { grid-template-columns: 1fr; }
  .working-section .process-steps__item {
    border-right: none;
    border-bottom: 1px solid rgba(26,26,26,0.08);
  }
  .working-section .process-steps__item:last-child { border-bottom: none; }
}

/* ── Featured-reference image — minimum height for visual weight ─────────── */
.featured-reference--dark .wp-block-column:first-child figure img {
  min-height: 420px;
}

@media (max-width: 880px) {
  .featured-reference--dark .wp-block-columns {
    flex-direction: column !important;
  }
  .featured-reference--dark .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .featured-reference--dark .wp-block-column:first-child figure img {
    min-height: 280px;
  }
}

/* ── Buttons: improve outline-white contrast in dark contexts ────────────── */
.btn-outline-white .wp-block-button__link {
  border: 1px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  background: transparent;
  padding: 0.85rem 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-outline-white .wp-block-button__link:hover {
  background: #FFFFFF;
  color: #1A1A1A;
  border-color: #FFFFFF;
}

/* ── Trust-row visual rhythm fix (centered with breathing space) ─────────── */
.trust-row {
  margin: 0 auto;
  max-width: 1200px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* v2.2.0 — UI/UX Pro Max visual refinements                                 */
/* Pure visual polish: no content changes.                                   */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Nav glassmorphism on scroll ─────────────────────────────────────── */
/* Replaces opaque white with a semi-transparent blur for a modern, premium  */
/* "glass" feel. Much lighter than solid white; logo/text still legible.     */
.site-header.scrolled,
.wp-block-template-part[data-slug="header"].scrolled > div {
  background: rgba(250, 248, 245, 0.92) !important; /* cream at 92% opacity */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.04) !important;
}

/* ── 2. Nav link hover underline animation ───────────────────────────────── */
/* Animated thin underline sliding in from left on hover — editorial detail. */
.nav-links .wp-block-navigation-item__content {
  position: relative !important;
}

.nav-links .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
  pointer-events: none;
}

.nav-links .wp-block-navigation-item__content:hover::after {
  width: 100%;
}

/* ── 3. Nav phone number — stronger weight ───────────────────────────────── */
.nav-phone {
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ── 4. Copper button — tactile depth on hover ───────────────────────────── */
/* Adds a 1px upward lift + warm copper shadow, giving the button haptic     */
/* feedback without modifying shape, colour, or size.                        */
.wp-block-button.btn-copper .wp-block-button__link,
.wp-element-button.btn-copper {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wp-block-button.btn-copper .wp-block-button__link:hover,
.wp-element-button.btn-copper:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(194, 110, 58, 0.30) !important;
}

/* ── 5. Outline-white button — glass effect on dark hero ─────────────────── */
.wp-block-button.btn-outline-white .wp-block-button__link {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

/* ── 6. Product card — refined top accent + deeper hover shadow ──────────── */
/* 3px → 2px: less blunt. Hover shadow becomes larger and softer.            */
.product-card__body {
  border-top-width: 2px !important;
}

.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.13) !important;
}

/* ── 7. Large heading optical letter-spacing ─────────────────────────────── */
/* Tighter tracking on large Playfair Display headings — standard editorial  */
/* practice: letter-spacing should decrease as font-size increases.          */
.hero-title,
.wp-site-blocks h1,
.entry-title {
  letter-spacing: -0.025em !important;
}

h2,
.wp-block-heading,
.wp-block-post-content h2 {
  letter-spacing: -0.015em;
}

/* ── 8. Intro block — editorial pull-quote feel ──────────────────────────── */
/* Switching the intro paragraph to Playfair italic turns it into a proper   */
/* editorial pull quote, matching the brand's serif-forward positioning.     */
.intro-block p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.2rem !important;
  line-height: 1.8 !important;
  color: #3D3D3D;
}

/* ── 9. Reference card — stronger gradient overlay ───────────────────────── */
/* Pushes the gradient start higher and increases max opacity so the title   */
/* text consistently meets WCAG AA (4.5:1) even against bright images.      */
.reference-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    transparent 100%
  ) !important;
  padding-bottom: 1.75rem !important;
}

/* ── 10. USP items — copper rule above title ─────────────────────────────── */
/* A 24px copper hairline anchors each USP visually to its icon above,       */
/* giving the bar more editorial rhythm.                                     */
.usp-item__title {
  position: relative !important;
  padding-top: 1.25rem !important;
  margin-top: 0.5rem !important;
}

.usp-item__title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: #C26E3A;
}

/* ── 11. CTA section — larger heading authority ──────────────────────────── */
/* A more commanding italic heading makes the CTA section feel decisive.     */
.cta-section h2 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

/* ── 12. Footer logo — slightly more presence ───────────────────────────── */
.footer-logo {
  font-size: 1.625rem !important;
  letter-spacing: -0.01em !important;
}

/* ── 13. Inline content links — copper with smooth underline ─────────────── */
.wp-block-post-content a:not(.wp-block-button__link):not(.product-card__link):not([class*="btn"]) {
  color: #C26E3A;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.product-card__link):not([class*="btn"]):hover {
  color: #A85C2E;
  text-decoration-color: #C26E3A;
}

/* ── 14. Featured reference dark section — title font size boost ─────────── */
.featured-reference--dark h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
}

/* ── 15. Process steps number — tighter tracking ────────────────────────── */
.process-steps__item::before {
  letter-spacing: -0.03em;
}

/* ── 16. Specs table — zebra stripe for scannability ────────────────────── */
.wp-block-table.specs-table tbody tr:nth-child(even) td,
.wp-block-table.specs-table tbody tr:nth-child(even) th {
  background: rgba(240, 237, 232, 0.45);
}

/* ── 17. FAQ item — smoother open/close feel ─────────────────────────────── */
.faq-item__body {
  animation: faq-reveal 0.25s ease forwards;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 18. Product card link — arrow gap animation matching prototype ───────── */
.product-card__link {
  transition: gap 0.2s ease, color 0.2s ease !important;
}

.product-card:hover .product-card__link {
  gap: 0.875rem !important;
}

/* ── 19. Mobile CTA bar — copper button gets depth on tap ────────────────── */
.mobile-cta-bar .cta-quote:active {
  background: #A45A2B !important;
  transform: scale(0.98);
}

/* ── 20. Reduce abrupt content jump between sections ────────────────────── */
/* Extra half-rem of gap between adjacent full-bleed groups so sections      */
/* feel intentionally separated rather than colliding.                        */
.wp-block-post-content .wp-block-group.alignfull + .wp-block-group:not(.alignfull) {
  margin-top: 3rem;
}

/* ── Raw-HTML product feature sections — gutters + centring ──────────────── */
/* The RB-150 / SB 200 / Stratos NG sections are hand-written divs inside
   wp:html blocks, so they sit outside WP's layout system and never inherit
   the root side padding — their text ran edge-to-edge on mobile.
   margin-inline needs !important: the block's own inline style carries
   `margin:4rem 0`, which would otherwise pin it left of the galleries below.
   Using the inline axis only keeps that 4rem vertical rhythm intact. */
.rl-product-feature {
  max-width: 1180px;
  margin-inline: auto !important;
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* v2.2.9 — /producten/ overview grid                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

.product-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  align-items: stretch;      /* kaarten in dezelfde rij even hoog, boven uitgelijnd */
}

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

@media (max-width: 600px) {
  .product-overview-grid { grid-template-columns: 1fr; }
}

.product-overview-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  /* WP's default is-layout-flow block-gap rule (`> * + * { margin-block-start }`)
     adds a top margin to every card except the first, which eats into the
     grid's align-items:stretch height and made row-mates ~32px shorter than
     the first card. This is a grid, not a flow layout — that margin is unwanted. */
  margin-top: 0 !important;
}

.product-overview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.product-overview-card__media {
  width: 100%;
  height: 15rem;              /* vaste hoogte → alle kaartfoto's exact even groot */
  background-size: cover;
  background-position: center;
  background-color: #F0EDE8;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .product-overview-card__media { height: 12rem; }
}

.product-overview-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-overview-card__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C26E3A;
  margin: 0 0 0.5rem;
}

.product-overview-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.5rem;
}

.product-overview-card__text {
  font-size: 0.9rem;
  color: #3D3D3D;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}

.product-overview-card__link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #C26E3A;
  margin-top: auto;
  transition: color 0.2s ease;
}

.product-overview-card:hover .product-overview-card__link {
  color: #1A1A1A;
}

/* ── Zoho-offerteformulier embeds ─────────────────────────────────────────── */
/* Gutters: net als .rl-product-feature zijn deze embeds hand-geschreven HTML in
   wp:html-blokken, dus ze erven de root side-padding niet — de kop liep tegen de
   schermrand op mobiel. Zelfde gutter-patroon toepassen zodat kop + iframe
   netjes uitlijnen met de rest van de pagina. */
/* Breedte: het blok volgt de iframe (max-width:760px, inline gezet door
   add_zoho_offerte_forms.php) in plaats van de volle 1180px. Op 1180px plakte het
   formulier tegen de linkerrand met ~400px leegte rechts. Nu staan overline, kop en
   formulier samen als één gecentreerd blok, met de kop links uitgelijnd tegen het
   formulier. De calc() telt de gutters bij de max-width op, zodat de inhoudsbreedte
   exact 760px blijft (box-sizing:border-box zou ze er anders van aftrekken) én de
   side-padding op mobiel intact blijft. */
.rl-offerte-embed {
  max-width: calc(760px + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
  /* !important is hier nodig, niet luiheid: de embed-div draagt een inline
     style="margin:3rem 0" (door add_zoho_offerte_forms.php in de paginacontent
     gezet, staat dus in de database). Een inline style wint van elke stylesheet-
     regel ongeacht specificiteit — alleen !important komt eroverheen. Alternatief
     is een migratiescript dat de inline margin op alle pagina's naar "3rem auto"
     zet; dat raakt content i.p.v. presentatie en is niet gedaan. */
  margin-inline: auto !important;
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  box-sizing: border-box;
}

/* Hoogte: een vaste hoogte past nooit tegelijk desktop (2-koloms) én mobiel
   (1-koloms) én elk formulier. offerte-cta.js zet de iframe via postMessage op de
   werkelijke hoogte; onderstaande waarden zijn alleen de fallback tot dat bericht
   binnenkomt. GEEN !important — anders kan de JS de hoogte niet meer bijstellen.
   (De inline height op de iframe is verwijderd door add_zoho_offerte_forms.php.) */
.rl-offerte-embed iframe {
  width: 100%;
  height: 950px;
}

@media (max-width: 600px) {
  .rl-offerte-embed iframe {
    height: 1450px; /* veilige fallback: hoger dan het langste formulier (~1350px) */
  }
}

/* ── Regelafbreking: nooit een kort stukje op een losse regel ────────────────
   Designregel: een kop of alinea mag nooit één kort woord/fragment op de laatste
   regel achterlaten (weduwe/wees). text-wrap:balance verdeelt korte blokken (koppen,
   overlines) over gelijke regels; text-wrap:pretty voorkomt een losse laatste regel
   bij langere alinea's. Voor namen die per se bij elkaar horen (LiftForce BV) staat
   in de HTML een &nbsp;. */
h1, h2, h3, h4, h5, h6,
.rl-overline, .label-copper,
.page-hero-stille__title, .home-hero__title,
.product-overview-card__title {
  text-wrap: balance;
}

p, li, .home-hero__lead, figcaption, blockquote {
  text-wrap: pretty;
}

/* ── Keuzeblok "Welk hefplateau past bij u?" (okt 2026) ───────────────────
   Bovenaan /hefplateaus/. Drie lijnen naast elkaar: RB-150 / Solid / LF-serie,
   met per lijn de afweging die de klant zelf maakt (binnen/buiten, vast/
   verplaatsbaar, bouwhoogte). Doel van de 301 van /plateauliften/. */
.rl-pick {
  max-width: 1180px;
  margin: 3.5rem auto 1rem;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  background: #F0EDE8;
  border-radius: 4px;
  scroll-margin-top: 110px;
}
.rl-pick__overline {
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: #C26E3A; font-weight: 600; margin-bottom: 0.9rem;
}
.rl-pick__title {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15;
  color: #1A1A1A; margin: 0 0 0.8rem;
}
.rl-pick__lead { max-width: 62ch; color: #555; line-height: 1.7; margin: 0 0 2.25rem; }
.rl-pick__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.rl-pick__card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #E5DFD7; border-top: 3px solid #C26E3A;
  border-radius: 3px; padding: 1.75rem 1.6rem 1.5rem;
  transition: box-shadow .25s ease, transform .25s ease;
}
.rl-pick__card:hover { box-shadow: 0 14px 34px -18px rgba(26,26,26,.35); transform: translateY(-2px); }
.rl-pick__tag {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a8276; font-weight: 600; margin-bottom: 0.6rem;
}
.rl-pick__name {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.75rem;
  line-height: 1.1; color: #1A1A1A; margin: 0 0 0.6rem;
}
.rl-pick__one {
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.05rem;
  line-height: 1.45; color: #3D3D3D; margin: 0 0 1.2rem;
}
.rl-pick__list { list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: 0.93rem; line-height: 1.55; color: #3D3D3D; }
.rl-pick__list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.rl-pick__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.rl-pick__list .is-plus::before { content: "\2713"; color: #C26E3A; }
.rl-pick__list .is-note::before { content: "\2022"; color: #8a8276; left: 0.2rem; }
.rl-pick__list .is-minus::before { content: "!"; color: #fff; background: #B8956A; border-radius: 50%; width: 1.05rem; height: 1.05rem; font-size: 0.7rem; line-height: 1.05rem; text-align: center; top: 0.15rem; }
.rl-pick__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin: auto 0 1.2rem; padding-top: 1rem; border-top: 1px solid #E5DFD7;
}
.rl-pick__meta dt { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8276; margin-bottom: 0.2rem; }
.rl-pick__meta dd { margin: 0; font-size: 0.88rem; font-weight: 600; color: #1A1A1A; }
.rl-pick__link {
  align-self: flex-start; color: #C26E3A; text-decoration: none; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.rl-pick__link:hover { color: #1A1A1A; }
.rl-pick__foot { margin: 1.8rem 0 0; font-size: 0.95rem; color: #555; }
.rl-pick__foot a { color: #C26E3A; text-decoration: none; border-bottom: 1px solid #C26E3A; }
@media (max-width: 900px) {
  .rl-pick__grid { grid-template-columns: 1fr; }
}
/* Platformliften: 4 uitvoeringen als 2x2 met preview-foto (okt 2026) */
.rl-pick__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.rl-pick__grid--4 .rl-pick__meta { grid-template-columns: repeat(2, 1fr); }
.rl-pick__media {
  display: block; margin: -1.75rem -1.6rem 1.5rem; aspect-ratio: 16 / 9; overflow: hidden; background: #F0EDE8;
}
.rl-pick__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rl-pick__card:hover .rl-pick__media img { transform: scale(1.03); }
@media (max-width: 640px)  { .rl-pick__grid--4 { grid-template-columns: 1fr; } }

/* ── Trapwijzer "Is er een trap?" (okt 2026) ─────────────────────────────
   Splitst bezoekers met een trap in twee routes: langs de trap
   (/plateau-trapliften/) of in/bij de trap (/trapoplossingen/).
   Staat in de homepage-keuzehulp en de keuzehulp op /producten/. */
.rl-trapwijzer {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 1rem; align-items: stretch;
  background: #1A1A1A; border-radius: 4px; padding: 1.4rem; margin: 2.25rem 0;
}
.rl-trapwijzer__q {
  align-self: center; padding: 0 1.25rem 0 0.5rem;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; line-height: 1.2; color: #fff;
}
.rl-trapwijzer__opt {
  display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  padding: 1rem 1.2rem; transition: background .2s ease, border-color .2s ease;
}
.rl-trapwijzer__opt:hover { background: #C26E3A; border-color: #C26E3A; }
.rl-trapwijzer__k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #D9A27E; font-weight: 600; }
.rl-trapwijzer__opt:hover .rl-trapwijzer__k { color: #fff; }
.rl-trapwijzer__t { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #fff; }
.rl-trapwijzer__m { font-size: 0.85rem; color: rgba(255,255,255,.7); }
.rl-trapwijzer__opt:hover .rl-trapwijzer__m { color: #fff; }
@media (max-width: 760px) {
  .rl-trapwijzer { grid-template-columns: 1fr; }
  .rl-trapwijzer__q { padding: 0.25rem 0.25rem 0.5rem; }
}

/* ── Stijlstrook design huislift (okt 2026) ─────────────────────────────── */
.rl-styles { max-width: 1180px; margin: 1rem auto 3rem; padding: 0 1.5rem; }
.rl-styles__overline { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C26E3A; font-weight: 600; margin-bottom: 0.7rem; }
.rl-styles__title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); color: #1A1A1A; margin: 0 0 0.6rem; }
.rl-styles__lead { max-width: 64ch; color: #555; line-height: 1.7; margin: 0 0 1.5rem; }
.rl-styles__grid {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem;
}
.rl-styles__grid img {
  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px;
  border: 1px solid #E5DFD7; transition: transform .2s ease;
}
.rl-styles__grid img:hover { transform: scale(1.04); }
.rl-styles__options { margin: 0; }
.rl-styles__options img { display: block; width: 100%; max-width: 560px; margin: 0 auto; }

/* ── Productvideo's (okt 2026) ───────────────────────────────────────────── */
.rl-videos { max-width: 1180px; margin: 2.5rem auto 3rem; padding: 0 1.5rem; }
.rl-videos__overline { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C26E3A; font-weight: 600; margin-bottom: 0.6rem; }
.rl-videos__title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: #1A1A1A; margin: 0 0 1.25rem; }
.rl-videos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.rl-video { margin: 0; }
.rl-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1A1A1A; border-radius: 4px; }
.rl-video figcaption { margin-top: 0.55rem; font-size: 0.85rem; color: #6E6862; }

/* ── Configurator design huislift (okt 2026, fase 4) ─────────────────────
   Markup: patterns/configurator.php · gedrag: assets/js/configurator.js */
.rl-config { max-width: 1180px; margin: 2.5rem auto 3.5rem; padding: 0 1.5rem; scroll-margin-top: 110px; }
.rl-config__overline { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: #C26E3A; font-weight: 600; margin-bottom: 0.7rem; }
.rl-config__title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: #1A1A1A; margin: 0 0 0.6rem; }
.rl-config__lead { max-width: 62ch; color: #555; line-height: 1.7; margin: 0 0 2rem; }
.rl-config__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: start; }
.rl-config__stage { position: sticky; top: calc(var(--rl-headerh, 106px) + 20px); }
.rl-config__svg { display: block; width: 100%; height: auto; max-height: 72vh; background: #F3EFE9; border: 1px solid #E5DFD7; border-radius: 4px; }
.rl-config__svg * { transition: fill .25s ease, opacity .25s ease; }
.rl-config__photo { margin: 1rem 0 0; }
.rl-config__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.rl-config__photo figcaption { font-size: 0.8rem; color: #6E6862; line-height: 1.5; margin-top: 0.5rem; }
.rl-config__group { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.rl-config__group legend { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1A1A1A; font-weight: 700; margin-bottom: 0.6rem; padding: 0; }
.rl-config__opts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rl-config__opt { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem 0.45rem 0.5rem; background: #fff; border: 1px solid #E5DFD7; border-radius: 100px; cursor: pointer; font-size: 0.86rem; color: #3D3D3D; line-height: 1.25; transition: border-color .15s ease, background .15s ease; }
.rl-config__opt:hover { border-color: #C9BBA9; }
.rl-config__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rl-config__opt:has(input:checked) { border-color: #C26E3A; background: #FBF3EC; box-shadow: inset 0 0 0 1px #C26E3A; color: #1A1A1A; }
.rl-config__opt:has(input:focus-visible) { outline: 2px solid #C26E3A; outline-offset: 2px; }
.rl-config__opt small { color: #8a8276; font-size: 0.74rem; }
.rl-config__sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; background-size: cover; background-position: center; }
.rl-config__group--hinge .rl-config__opt, .rl-config__group--stops .rl-config__opt,
.rl-config__group--walls .rl-config__opt, .rl-config__group--extras .rl-config__opt,
.rl-config__group--door .rl-config__opt, .rl-config__group--doorTop .rl-config__opt,
.rl-config__group--panelHeight .rl-config__opt { padding-left: 0.85rem; }
.rl-config__group[hidden] { display: none; }
.rl-config__hint { margin: -0.2rem 0 0.6rem; font-size: 0.8rem; color: #6E6862; line-height: 1.5; }
.rl-config__view { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.rl-config__view button { flex: 1; background: #fff; border: 1px solid #E5DFD7; border-radius: 100px; padding: 0.45rem 0.8rem; font: inherit; font-size: 0.8rem; color: #3D3D3D; cursor: pointer; }
.rl-config__view button[aria-pressed="true"] { border-color: #C26E3A; background: #FBF3EC; box-shadow: inset 0 0 0 1px #C26E3A; color: #1A1A1A; }
.rl-config__view button:focus-visible { outline: 2px solid #C26E3A; outline-offset: 2px; }
.rl-config__group--panel .rl-config__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.45rem; }
.rl-config__opt--panel { flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.3rem; border-radius: 4px; font-size: 0.72rem; text-align: center; }
.rl-config__opt--panel .rl-config__sw { width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 2px; }
.rl-config__opt--panel:first-child .rl-config__sw { background: linear-gradient(to top right, #fff calc(50% - 1px), #C9BBA9 50%, #fff calc(50% + 1px)); }
.rl-config__custom { display: flex; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.rl-config__custom[hidden] { display: none; }
.rl-config__custom input[type="color"] { width: 44px; height: 34px; padding: 0; border: 1px solid #E5DFD7; border-radius: 4px; background: #fff; cursor: pointer; }
.rl-config__custom input[type="text"] { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid #E5DFD7; border-radius: 4px; font: inherit; font-size: 0.86rem; }
.rl-config__summary { background: #F0EDE8; border-radius: 4px; padding: 1.3rem 1.4rem; margin-top: 0.4rem; }
.rl-config__summary-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #1A1A1A; margin-bottom: 0.6rem; }
.rl-config__summary-list { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: 0.86rem; }
.rl-config__summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid #E2DBD1; }
.rl-config__summary-list span { color: #6E6862; flex: none; }
.rl-config__summary-list b { font-weight: 600; color: #1A1A1A; text-align: right; }
.rl-config__cta { width: 100%; background: #C26E3A; color: #fff; border: 0; border-radius: 3px; padding: 0.95rem 1.2rem; font: inherit; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.rl-config__cta:hover { background: #A85C2E; }
.rl-config__cta:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.rl-config__note { margin: 0.7rem 0 0; font-size: 0.82rem; color: #3D3D3D; }
@media (max-width: 900px) {
  .rl-config__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .rl-config__stage { top: calc(var(--rl-headerh, 90px) + 8px); z-index: 3; background: #FAF8F5; padding: 0.4rem 0; }
  .rl-config__svg { max-height: 34vh; }
  .rl-config__photo { display: none; }
}

/* Bedankpagina offerte (/bedankt-offerte/, okt 2026) — hergebruikt .home-process */
.rl-thanks .home-process__title { margin-bottom: 48px; }
.rl-thanks .home-process__grid.rl-thanks__steps { grid-template-columns: repeat(3, 1fr); }
.rl-thanks__contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 4rem; padding: 2rem 2.25rem; background: #FAF8F5; border-left: 3px solid #C26E3A;
}
.rl-thanks__contact-title { font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif); font-size: 1.5rem; color: #1A1A1A; margin-bottom: .35rem; }
.rl-thanks__contact p { margin: 0; color: #555; font-size: .95rem; }
.rl-thanks__contact-links { display: flex; flex-direction: column; gap: .35rem; text-align: right; }
.rl-thanks__phone { font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif); font-size: 1.75rem; color: #C26E3A; text-decoration: none; }
.rl-thanks__mail { color: #1A1A1A; font-size: .95rem; }
.rl-thanks__more { margin-top: 4rem; }
.rl-thanks__more-title { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: #C26E3A; font-weight: 600; margin-bottom: 1rem; }
.rl-thanks__more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rl-thanks__more-grid a {
  display: block; padding: 1.4rem 1.5rem; border: 1px solid #E5DFD7; border-radius: 3px;
  color: #555; text-decoration: none; font-size: .9rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease;
}
.rl-thanks__more-grid a span { display: block; font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif); font-size: 1.2rem; color: #1A1A1A; margin-bottom: .35rem; }
.rl-thanks__more-grid a:hover { border-color: #C26E3A; box-shadow: 0 10px 28px -18px rgba(26,26,26,.35); }
@media (max-width: 900px) {
  .rl-thanks .home-process__grid.rl-thanks__steps, .rl-thanks__more-grid { grid-template-columns: 1fr; }
  .rl-thanks__contact-links { text-align: left; }
}