@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/* // @TODO: variables import missing

/* // @TODO: furhter more can we have PostCSS functions so you can say spacer(2); And it give you the output rem for spacer 2. */
/* // code example: */
/* henk {
    margin-left: $spacer * 2;
} */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primary: #a57b53;
  --primary-light: #c08b5e;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;

  --sidebar-bg: #0d0d14;
  --sidebar-menu-bg: #0d0d14;
  --sidebar-text: #ffffff;
  --sidebar-text-hover: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.06);
  --sidebar-fg: #ffffff;
  --sidebar-pill-bg: #ffffff;
  --sidebar-pill-fg: #0d0d14;
  --sidebar-border: #1f1f2e;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 0px;

  --navbar-bg: #0a0a0f;
  --navbar-shadow: none;

  --body-bg: #0a0a0f;
  --text-color: #e0e0e8;
  --heading-color: #ffffff;
  --border-color: #1f1f2e;

  --card-bg: #111118;
  --card-shadow: none;
  --card-border-radius: 0;

  --footer-bg: transparent;
  --footer-text: #4b5563;

  --transition-speed: 0.2s;

  --spacing-step: 0.35rem;
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1.25rem;
  --spacing-5: 2rem;
  --spacing-6: 3.25rem;
  --spacing-7: 5.25rem;
  --spacing-8: 8.5rem;

  /* Theme-aware surfaces, overlays & inverted button (dark = default) */
  --surface-2: #161620;
  --surface-3: #2a2a3a;
  --hover-bg: rgba(255, 255, 255, 0.06);
  --hover-bg-strong: rgba(255, 255, 255, 0.08);
  --overlay-02: rgba(255, 255, 255, 0.02);
  --overlay-03: rgba(255, 255, 255, 0.03);
  --overlay-04: rgba(255, 255, 255, 0.04);
  --overlay-05: rgba(255, 255, 255, 0.05);
  --btn-primary-bg: #ffffff;
  --btn-primary-fg: #0a0a0f;

  color-scheme: dark;
}
/* --------------------------------------------------------------------------
   Light theme — flips the whole admin (content area + sidebar) to light.
   Applied via <html data-theme="light">, which admin_theme.js resolves from
   the user's Auto / Light / Dark preference.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --sidebar-active-bg: rgba(0, 0, 0, 0.04);
  --sidebar-bg: #ffffff;
  --sidebar-fg: #4b5563;
  --sidebar-pill-bg: #111827;
  --sidebar-pill-fg: #ffffff;
  --sidebar-border: #e5e7eb;

  --navbar-bg: #ffffff;
  --body-bg: #f3f4f6;
  --text-color: #374151;
  --heading-color: #111827;
  --border-color: #e5e7eb;

  --card-bg: #ffffff;

  --footer-text: #6b7280;

  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --hover-bg: rgba(0, 0, 0, 0.05);
  --hover-bg-strong: rgba(0, 0, 0, 0.08);
  --overlay-02: rgba(0, 0, 0, 0.02);
  --overlay-03: rgba(0, 0, 0, 0.03);
  --overlay-04: rgba(0, 0, 0, 0.04);
  --overlay-05: rgba(0, 0, 0, 0.05);
  --btn-primary-bg: #111827;
  --btn-primary-fg: #ffffff;

  color-scheme: light;
}
/* Smooth the theme switch. */
body {
  transition: background-color 0.25s ease, color 0.25s ease;
}
/* // this should be ramped spacing, so basically 0.25 0.5 1 1.5 2 3 4 7 11 13 16. whole numbers at later stages, somewhat like a fibonacci sequence */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: #a57b53; }
.text-success { color: #22c55e; }
.text-danger { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-muted { color: #b9b9c3; }
.font-weight-bold { font-weight: 700; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.hidden { display: none; }
/* Display utilities */
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
/* Flexbox utilities */
.flex-column { flex-direction: column; }
/* Position utilities */
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
/* Background utilities */
.bg-white { background-color: #fff !important; }
.bg-white, .bg-white a { color: #333; }
/* Spacing utilities - padding */
.pt-3, .py-3 { padding-top: 1rem !important; }
.pb-3, .py-3 { padding-bottom: 1rem !important; }
/* Spacing utilities - margin */
.mr-4 { margin-right: calc(0.35rem * 4) !important; }
/* ============================================
   Responsive Breakpoints (matching live site)
   xs: 0, sm: 576px, md: 768px, lg: 1281px, xl: 1200px, xxl: 1420px
   ============================================ */
/* Large screens (lg): >= 1281px */
@media (min-width: 1281px) {
    /* Navbar */
    .navbar-expand-lg {
        flex-flow: row;
        justify-content: flex-start;
    }

    /* Display utilities */
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }

    /* Spacing utilities */
    .pt-lg-5, .py-lg-5 { padding-top: 2rem !important; }
    .pb-lg-5, .py-lg-5 { padding-bottom: 2rem !important; }
    .ml-lg-3 { margin-left: calc(0.35rem * 3) !important; }
}
/* Medium screens (md): >= 768px */
@media (min-width: 768px) {
    /* Display utilities */
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }

    /* Spacing utilities */
    .mr-md-4 { margin-right: calc(0.35rem * 4) !important; }
}
/* Extra extra large screens (xxl): >= 1420px */
@media (min-width: 1420px) {
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-inline-flex { display: inline-flex !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-flex { display: flex !important; }

    .ml-xxl-2 { margin-left: calc(0.35rem * 2) !important; }
    .mr-xxl-2 { margin-right: calc(0.35rem * 2) !important; }
}
/* ============================================
   Grid System
   ============================================ */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}
.col {
    flex: 1;
    padding: 0 0.75rem;
}
/* ============================================
   Spacing - Additional Values
   ============================================ */
/* Padding */
.p-3 { padding: calc(0.35rem * 3) !important; }
.p-4 { padding: calc(0.35rem * 4) !important; }
.p-5 { padding: calc(0.35rem * 5) !important; }
.p-6 { padding: calc(0.35rem * 6) !important; }
.p-7 { padding: calc(0.35rem * 7) !important; }
.p-9 { padding: calc(0.35rem * 9) !important; }
.py-6 { padding-top: calc(0.35rem * 6) !important; padding-bottom: calc(0.35rem * 6) !important; }
.py-9 { padding-top: calc(0.35rem * 9) !important; padding-bottom: calc(0.35rem * 9) !important; }
.pt-3 { padding-top: calc(0.35rem * 3) !important; }
.pt-6 { padding-top: calc(0.35rem * 6) !important; }
.pt-9 { padding-top: calc(0.35rem * 9) !important; }
.pl-3 { padding-left: calc(0.35rem * 3) !important; }
.pl-6 { padding-left: calc(0.35rem * 6) !important; }
.pl-7 { padding-left: calc(0.35rem * 7) !important; }
.pr-5 { padding-right: calc(0.35rem * 5) !important; }
.px-3 { padding-left: calc(0.35rem * 3) !important; padding-right: calc(0.35rem * 3) !important; }
.px-6 { padding-left: calc(0.35rem * 6) !important; padding-right: calc(0.35rem * 6) !important; }
/* Margin */
.m-3 { margin: calc(0.35rem * 3) !important; }
.m-4 { margin: calc(0.35rem * 4) !important; }
.m-5 { margin: calc(0.35rem * 5) !important; }
.my-3 { margin-top: calc(0.35rem * 3) !important; margin-bottom: calc(0.35rem * 3) !important; }
.my-4 { margin-top: calc(0.35rem * 4) !important; margin-bottom: calc(0.35rem * 4) !important; }
.my-5 { margin-top: calc(0.35rem * 5) !important; margin-bottom: calc(0.35rem * 5) !important; }
.my-6 { margin-top: calc(0.35rem * 6) !important; margin-bottom: calc(0.35rem * 6) !important; }
.my-7 { margin-top: calc(0.35rem * 7) !important; margin-bottom: calc(0.35rem * 7) !important; }
.mt-2 { margin-top: calc(0.35rem * 2) !important; }
.mt-3 { margin-top: calc(0.35rem * 3) !important; }
.mt-4 { margin-top: calc(0.35rem * 4) !important; }
.mt-5 { margin-top: calc(0.35rem * 5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: calc(0.35rem * 2) !important; }
.mb-3 { margin-bottom: calc(0.35rem * 3) !important; }
.mb-4 { margin-bottom: calc(0.35rem * 4) !important; }
.mb-5 { margin-bottom: calc(0.35rem * 5) !important; }
.mb-6 { margin-bottom: calc(0.35rem * 6) !important; }
.mr-2 { margin-right: calc(0.35rem * 2) !important; }
.mr-3 { margin-right: calc(0.35rem * 3) !important; }
.mr-5 { margin-right: calc(0.35rem * 5) !important; }
.ml-2 { margin-left: calc(0.35rem * 2) !important; }
.ml-3 { margin-left: calc(0.35rem * 3) !important; }
/* ============================================
   Responsive Spacing
   ============================================ */
@media (min-width: 768px) {
    .p-md-5 { padding: calc(0.35rem * 5) !important; }
    .px-md-6 { padding-left: calc(0.35rem * 6) !important; padding-right: calc(0.35rem * 6) !important; }
}
@media (min-width: 1281px) {
    .p-lg-7 { padding: calc(0.35rem * 7) !important; }
    .pt-lg-6 { padding-top: calc(0.35rem * 6) !important; }
    .pt-lg-9 { padding-top: calc(0.35rem * 9) !important; }
    .py-lg-6 { padding-top: calc(0.35rem * 6) !important; padding-bottom: calc(0.35rem * 6) !important; }
    .pl-lg-6 { padding-left: calc(0.35rem * 6) !important; }
    .pl-lg-7 { padding-left: calc(0.35rem * 7) !important; }
    .pr-lg-5 { padding-right: calc(0.35rem * 5) !important; }

    .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .my-lg-7 { margin-top: calc(0.35rem * 7) !important; margin-bottom: calc(0.35rem * 7) !important; }
    .mr-lg-5 { margin-right: calc(0.35rem * 5) !important; }
    .mb-lg-9 { margin-bottom: calc(0.35rem * 9) !important; }
}
@media (min-width: 1200px) {
    .p-xl-4 { padding: calc(0.35rem * 4) !important; }
}
/* ============================================
   Width & Height
   ============================================ */
.w-100 { width: 100% !important; }
.maxw-100 { max-width: 100% !important; }
.maxw-50 { max-width: 50% !important; }
.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
/* ============================================
   Text Alignment
   ============================================ */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
@media (min-width: 1281px) {
    .text-lg-left { text-align: left !important; }
}
@media (min-width: 1200px) {
    .text-xl-left { text-align: left !important; }
}
/* ============================================
   Typography
   ============================================ */
.h3 { font-size: 1.75rem; font-weight: 300; }
.small { font-size: 0.875em; }
/* ============================================
   Position & Z-Index
   ============================================ */
.position-relative { position: relative; }
.z-index-top { z-index: 10; }
/* ============================================
   Overflow
   ============================================ */
.overflow-hidden { overflow: hidden; }
/* ============================================
   Flexbox Order (only on large screens)
   ============================================ */
@media (min-width: 1281px) {
    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
}
/* ============================================
   Background & Borders
   ============================================ */
.bg-white { background-color: #fff !important; }
.bg-dark { background-color: #333 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-light { border-color: #dee2e6 !important; }
/* ============================================
   Card Corner (skewed top corner effect)
   ============================================ */
.card-corner {
    position: relative;
    height: 200px;
}
.card-corner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 120px 200px;
    border-color: transparent transparent transparent transparent;
}
/* ============================================
   Background Size Cover
   ============================================ */
.background-size-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* ============================================
   Skew Transformations
   ============================================ */
.skew-from-right {
    transform: skewY(-0.5deg);
    transform-origin: right;
}
.skew-from-left {
    transform: skewY(0.5deg);
    transform-origin: left;
}
@media (max-width: 1280px) {
    .skew-from-right-mobile {
        transform: skewY(0);
    }
    .skew-from-left-mobile {
        transform: skewY(0);
    }
}
/* ============================================
   Hero Image Column Height
   ============================================ */
.h-mobile-image {
    min-height: 300px;
}
@media (min-width: 1281px) {
    .h-mobile-image {
        min-height: 540px;
    }
}
/* ============================================
   Min Height Utilities
   ============================================ */
.min-height-sm-96px {
    min-height: 96px;
}
/* ============================================
   List Utilities
   ============================================ */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
/* ============================================
   Image Fluid
   ============================================ */
.img-fluid {
    max-width: 100%;
    height: auto;
}
/* ============================================
   Font Size Base
   ============================================ */
.font-size-base {
    font-size: 1rem;
}
/* ============================================
   Text Wrap
   ============================================ */
.text-nowrap {
    white-space: nowrap !important;
}
/* ============================================
   Flex Grow
   ============================================ */
.flex-grow-1 {
    flex-grow: 1;
}
/* ============================================
   Scroll Margin (for fixed header offset)
   ============================================ */
.scroll-margin-header {
    scroll-margin-top: 100px;
}
/* ============================================
   Additional Utility Classes
   ============================================ */
/* Text utilities */
.text-dark { color: #333; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Flexbox align-self utilities */
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
/* Margin utilities - left */
.ml-3 { margin-left: calc(0.35rem * 3) !important; }
.ml-auto { margin-left: auto !important; }
/* Margin utilities - xxl spacing */
.ml-xxl-2 { margin-left: calc(0.35rem * 2) !important; }
/* ============================================
   Responsive Breakpoints
   ============================================ */
/* Large screens (lg): >= 992px */
@media (min-width: 992px) {
    .ml-lg-3 { margin-left: calc(0.35rem * 3) !important; }
    .ml-lg-xxl-2 { margin-left: calc(0.35rem * 2) !important; }
}
/* Extra extra large screens (xxl): >= 1200px */
@media (min-width: 1200px) {
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-inline-flex { display: inline-flex !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-flex { display: flex !important; }
}
/* Display none (ported from LF admin) */
.d-none { display: none !important; }
/* Tighter grid gutters (ported from LF admin) */
.row.g-3 {
    margin: 0 -0.5rem;
}
.row.g-3 > [class*="col"] {
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}
/* ==========================================================================
   Vloerendaal — Public Styles (light shop theme)

   The color values live in CSS custom properties so the CMS "Kleurenschema"
   (SiteSettings) can override them per site: templates/base.blade.php emits an
   inline :root block with the values from the database on top of these
   defaults.
   ========================================================================== */
/* Bootstrap-style global border-box: paddings must never widen a box past
   its declared width (containers otherwise overflow the viewport). */
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --vd-primary: #a57b53;
  --vd-primary-dark: #8d6746;
  --vd-dark: #2b2a26;
  --vd-bg: #faf7f2;
  --vd-surface: #ffffff;
  --vd-muted: #6f6a61;
  --vd-border: #e8e1d6;
  --vd-header-bg: #ffffff;
  --vd-footer-bg: #2b2a26;
  --vd-font-title: 'Poppins', sans-serif;
  --vd-font-body: 'Inter', sans-serif;
}
/* ==========================================================================
   Base
   ========================================================================== */
html {
  scroll-behavior: smooth;
}
body {
  color: var(--vd-dark);
  text-align: left;
  background-color: var(--vd-bg);
  font-family: var(--vd-font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main {
  flex: 1;
}
h1, h2, h3, h4, h5, h6,
.vd-logo {
  font-family: var(--vd-font-title);
  color: var(--vd-dark);
  font-weight: 600;
  line-height: 1.25;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
a {
  color: var(--vd-primary);
  text-decoration: none;
}
a:hover {
  color: var(--vd-primary-dark);
}
p { margin: 0 0 1rem; }
img { max-width: 100%; }
/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.pt-header { padding-top: var(--header-h, 76px); }
.section-spacing {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* Pagebuilder band wrappers (admin-chosen accent bands behind sections) */
.fk-section-band { padding: 2.5rem 0; }
.fk-section-band--surface { background: var(--vd-surface); }
.fk-section-band--accent { background: color-mix(in srgb, var(--vd-primary) 12%, var(--vd-surface)); }
.fk-section-band--dark { background: var(--vd-dark); color: #fff; }
.fk-section-band--dark h1,
.fk-section-band--dark h2,
.fk-section-band--dark h3,
.fk-section-band--dark h4 { color: #fff; }
.empty-page-hint {
  color: var(--vd-muted);
}
/* Simple 12-column grid helpers on top of _utilities' .row */
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 0.75rem; box-sizing: border-box; }
@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 50%; max-width: 50%; padding: 0 0.75rem; box-sizing: border-box; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 1 0%; padding: 0 0.75rem; box-sizing: border-box; min-width: 0; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; padding: 0 0.75rem; box-sizing: border-box; }
}
.justify-content-center { justify-content: center; }
/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--vd-font-title);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--vd-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--vd-primary-dark);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--vd-dark);
  border-color: var(--vd-dark);
}
.btn-secondary:hover {
  background: var(--vd-dark);
  color: #fff;
}
/* ==========================================================================
   Cards (double-col CARD blocks and generic use)
   ========================================================================== */
.card {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  overflow: hidden;
}
.card-body {
  padding: 1.5rem;
}
.shadow { box-shadow: 0 10px 30px rgba(43, 42, 38, 0.08); }
.bottom-below { border-bottom: 4px solid var(--vd-primary); }
.double-col-card {
  height: 100%;
}
.double-col-title { margin-bottom: 0.5rem; }
/* ==========================================================================
   Section subtitles (letterdotted kickers)
   ========================================================================== */
.section-subtitle {
  font-family: var(--vd-font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vd-primary);
  margin-bottom: 0.75rem;
}
/* ==========================================================================
   Header + navigation
   ========================================================================== */
.vd-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background: var(--vd-header-bg);
  border-bottom: 1px solid var(--vd-border);
}
.vd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 1rem;
}
/* Text-logo: "Vloeren" in charcoal + "daal" in tan, mirroring the brand asset
   (the delivered logo file has a flattened black background, so the wordmark
   is recreated in HTML to sit well on the light header). */
.vd-logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.vd-logo__dark { color: var(--vd-dark); }
.vd-logo__tan { color: var(--vd-primary); }
.vd-logo--light .vd-logo__dark { color: #fff; }
.vd-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vd-nav__item { position: relative; }
.vd-nav__link {
  display: inline-block;
  padding: 0.4rem 0;
  font-family: var(--vd-font-title);
  font-weight: 500;
  color: var(--vd-dark);
}
.vd-nav__link:hover,
.vd-nav__link.is-active {
  color: var(--vd-primary);
}
/* Dropdown (Assortiment) — CSS hover on desktop */
.vd-nav__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 190px;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(43, 42, 38, 0.12);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.vd-nav__item--has-children:hover > .vd-nav__sub:not(.vd-nav__sub--level3),
.vd-nav__item--has-children:focus-within > .vd-nav__sub:not(.vd-nav__sub--level3) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vd-nav__sub-link {
  display: block;
  padding: 0.55rem 1.25rem;
  color: var(--vd-dark);
  font-weight: 500;
}
.vd-nav__sub-link:hover,
.vd-nav__sub-link.is-active {
  color: var(--vd-primary);
  background: color-mix(in srgb, var(--vd-primary) 8%, var(--vd-surface));
}
/* Mobile menu toggle */
.vd-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.vd-menu-toggle__bar {
  width: 24px;
  height: 2px;
  background: var(--vd-dark);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.vd-menu-toggle.is-open .vd-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vd-menu-toggle.is-open .vd-menu-toggle__bar:nth-child(2) { opacity: 0; }
.vd-menu-toggle.is-open .vd-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 991.98px) {
  .vd-menu-toggle { display: flex; }

  .vd-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vd-surface);
    border-bottom: 1px solid var(--vd-border);
    box-shadow: 0 16px 30px rgba(43, 42, 38, 0.12);
    display: none;
  }

  .vd-nav.is-open { display: block; }

  .vd-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
  }

  .vd-nav__link {
    display: block;
    padding: 0.8rem 1.5rem;
  }

  /* On mobile the submenu is always expanded under its parent */
  .vd-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0.5rem;
  }

  .vd-nav__sub-link { padding: 0.5rem 2.5rem; }
  .vd-nav__sub--level3 .vd-nav__sub-link { padding-left: 3.5rem; }
}
/* Third dropdown level (brands under Assortiment > PVC vloeren):
   fly-out to the right of its parent item on desktop. It only opens when
   the "PVC vloeren" item itself is hovered (not while merely hovering
   Assortiment), with a short delay so moving through the menu doesn't
   flash the brand list open. */
@media (min-width: 992px) {
  .vd-nav__sub--level3 {
    top: 0;
    left: 100%;
    margin-top: -0.5rem;
    min-width: 210px;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.3s;
  }

  .vd-nav__sub--level2 .vd-nav__item--has-children:hover > .vd-nav__sub--level3,
  .vd-nav__sub--level2 .vd-nav__item--has-children:focus-within > .vd-nav__sub--level3 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.25s;
  }
}
/* ==========================================================================
   Hero (text-image-col)
   ========================================================================== */
.text-image-col-row {
  align-items: center;
  margin: 0 -0.75rem;
}
.text-image-col-image-col { padding: 0 0.75rem; }
.text-image-col-text-col { padding: 0 0.75rem; }
.text-image-col-image {
  border-radius: 16px;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(43, 42, 38, 0.14);
}
@media (min-width: 992px) {
  .text-image-col-image { min-height: 460px; }
}
/* Mobile: breathing room between the image and the text below it. */
@media (max-width: 991.98px) {
  .text-image-col-image-col { margin-bottom: 2rem; }
}
/* Image-right variant (CMS-managed section setting): on desktop the image
   column moves to the right of the text column. On mobile the stack keeps
   image first, text second. */
@media (min-width: 992px) {
  .text-image-col--image-right .text-image-col-image-col { order: 2; }
}
.text-image-col-title { margin-bottom: 1rem; }
.text-image-col-body { color: var(--vd-muted); max-width: 55ch; }
.text-image-col-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.text-image-col-cta--followup {
  font-family: var(--vd-font-title);
  font-weight: 600;
  color: var(--vd-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-image-col-cta--followup:hover { color: var(--vd-primary); }
/* ==========================================================================
   Floors
   ========================================================================== */
.vd-floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
/* On phones two tiles fit side by side instead of one full-width tile. */
@media (max-width: 575.98px) {
  .vd-floor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }

  /* Tighter tiles: smaller type (name never below 18px), compact padding.
     Parented selectors to win over the base rules regardless of order. */
  .vd-floor-card .vd-floor-card__body { padding: 0.75rem 0.85rem 0.9rem; }
  .vd-floor-card .vd-floor-card__name { font-size: 1rem; margin-bottom: 0.15rem; }
  .vd-floor-card .vd-floor-card__number { font-size: 0.75rem; }

  /* Short "Productnr." label on phones, full word everywhere else. */
  .vd-floor-card .vd-number-label__short { display: inline; }
  .vd-floor-card .vd-number-label__long { display: none; }

  /* Brand label: a translucent flush strip at the top of the tile. */
  .vd-floor-card .vd-floor-card__brand {
    top: 0;
    left: 0;
    right: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 0;
    font-size: 0.56rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.72);
  }
}
.vd-floor-card {
  display: flex;
  flex-direction: column;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--vd-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vd-floor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(43, 42, 38, 0.12);
  color: var(--vd-dark);
}
.vd-floor-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vd-border);
}
.vd-floor-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.vd-floor-card__brand {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--vd-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.vd-floor-card__body {
  padding: 1rem 1.15rem 1.25rem;
}
.vd-floor-card__name { margin: 0 0 0.25rem; }
.vd-floor-card__number {
  color: var(--vd-muted);
  font-size: 0.85rem;
  margin: 0;
}
/* "Productnummer" on desktop, short "Productnr." on phones (see the
   mobile block under .vd-floor-grid). */
.vd-number-label__short { display: none; }
/* Floor detail */
.vd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  color: var(--vd-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}
.vd-breadcrumb a { color: var(--vd-muted); }
.vd-breadcrumb a:hover { color: var(--vd-primary); }
.vd-floor-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .vd-floor-detail { grid-template-columns: 1.2fr 1fr; }
}
.vd-floor-detail__main {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 16px;
  background: var(--vd-border);
}
.vd-floor-detail__thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  overflow-x: auto;
}
.vd-floor-detail__thumbs img {
  width: 90px;
  height: 68px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.75;
}
.vd-floor-detail__thumbs img.is-active,
.vd-floor-detail__thumbs img:hover {
  border-color: var(--vd-primary);
  opacity: 1;
}
.vd-floor-detail__number {
  color: var(--vd-muted);
}
/* ==========================================================================
   Brands
   ========================================================================== */
/* Brand CTA on /pvc-vloeren: a stack of buttons, one per brand. */
.brands-cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.brands-cta__button i { margin-left: 0.5rem; transition: transform 0.2s ease; }
.brands-cta__button:hover i { transform: translateX(4px); }
/* Merken overview: one card per brand with description + link. */
.vd-brand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  padding: 2rem;
}
/* Mobile: vertical spacing between the stacked brand cards. */
@media (max-width: 767.98px) {
  .brands-section .row.g-4 { row-gap: 1.5rem; }
}
.vd-brand-card__name { margin: 0 0 0.75rem; }
.vd-brand-card__description {
  color: var(--vd-muted);
  margin-bottom: 1rem;
}
.vd-brand-card__description p:last-child { margin-bottom: 0; }
.vd-brand-card__count {
  color: var(--vd-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.vd-brand-card__cta { margin-top: auto; }
/* Brand detail page (/merken/{slug}). */
.vd-brand-detail__description {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--vd-muted);
  text-align: center;
}
.vd-brand-detail__description p {
  text-align: center;
}
.vd-brand-detail__description p:last-child { margin-bottom: 0; }
.vd-brand {
  margin-bottom: 3rem;
}
.vd-brand__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--vd-primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}
.vd-brand__name { margin: 0; }
.vd-brand__count {
  color: var(--vd-muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.vd-brand__empty { color: var(--vd-muted); }
/* ==========================================================================
   Blogs
   ========================================================================== */
.vd-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.vd-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--vd-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vd-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(43, 42, 38, 0.12);
  color: var(--vd-dark);
}
.vd-blog-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vd-border);
}
.vd-blog-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.vd-blog-card__body { padding: 1.1rem 1.15rem 1.35rem; }
.vd-blog-card__date {
  color: var(--vd-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.vd-blog-card__title { margin: 0 0 0.4rem; }
.vd-blog-card__caption {
  color: var(--vd-muted);
  font-size: 0.92rem;
  margin: 0;
}
/* Blog detail */
.vd-blog-detail { max-width: 760px; margin: 0 auto; }
.vd-blog-detail__title { margin-bottom: 1.5rem; }
.vd-blog-detail__image {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}
.vd-blog-detail__body { font-size: 1.02rem; }
/* ==========================================================================
   Contact reveal (click-to-show email)
   ========================================================================== */
.vd-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0;
}
.vd-reveal__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--vd-primary);
  border-radius: 999px;
  background: var(--vd-surface);
  color: var(--vd-dark);
  font-family: var(--vd-font-title);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.vd-reveal__pill:hover {
  background: color-mix(in srgb, var(--vd-primary) 10%, var(--vd-surface));
}
.vd-reveal__revealed { cursor: default; padding: 0.45rem 0.45rem 0.45rem 1.4rem; }
.vd-reveal__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--vd-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vd-reveal__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 999px;
  background: var(--vd-primary);
  color: #fff;
  cursor: pointer;
}
.vd-reveal__copy:hover { background: var(--vd-primary-dark); }
.vd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ==========================================================================
   Contact page layout
   ========================================================================== */
.vd-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .vd-contact-grid { grid-template-columns: 1.2fr 1fr; }
}
.vd-contact-card {
  background: var(--vd-dark);
  color: #fff;
  border-radius: 16px;
  padding: 2.25rem;
  border-bottom: 4px solid var(--vd-primary);
}
.vd-contact-card h2,
.vd-contact-card h3 { color: #fff; }
.vd-contact-card a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vd-contact-card a:hover { color: var(--vd-primary); }
/* ==========================================================================
   Footer
   ========================================================================== */
.vd-footer {
  background: var(--vd-footer-bg);
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
}
.vd-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 1.25rem 2rem;
}
@media (min-width: 768px) {
  .vd-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; }
}
.vd-footer__tagline { margin-top: 0.75rem; max-width: 32ch; }
.vd-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.vd-footer__nav a {
  color: rgba(255, 255, 255, 0.8);
}
.vd-footer__nav a:hover { color: var(--vd-primary); }
.vd-footer__contact p { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
/* The e-mail link wraps icon + text in one <a>; keep the icon-to-text gap identical to plain <p> rows. */
.vd-footer__contact p a { display: inline-flex; align-items: center; gap: 0.6rem; }
.vd-footer__contact i { color: var(--vd-primary); }
.vd-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.1rem 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.vd-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.vd-footer__legal a:hover {
  color: var(--vd-primary);
}
/* ==========================================================================
   Forms (login + admin-entry basics)
   ========================================================================== */
.form-control {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--vd-font-body);
  font-size: 0.95rem;
  color: var(--vd-dark);
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: var(--vd-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-primary) 22%, transparent);
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.form-text { font-size: 0.85rem; }
.form-hint {
  color: var(--vd-muted);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}
/* Hidden honeypot fields (contact form pattern, kept for future use) */
.honing {
  position: absolute !important;
  left: -9999px !important;
  visibility: hidden;
}
/* ==========================================================================
   Admin-entry niceties shared with the public css
   ========================================================================== */
.alert {
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.alert-danger {
  background: #fdecea;
  color: #8f1d18;
  border: 1px solid #f5c4bd;
}
.contact-result {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
}
/* ==========================================================================
   Floor filters (concern #9) — /pvc-vloeren section
   Sidebar with collapsible filter groups next to the floor tile grid.
   ========================================================================== */
.vd-filter-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 3fr;
  gap: 2rem;
  align-items: start;
}
.vd-filter-sidebar {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
/* Off-canvas header: hidden on desktop, shown as a proper off-canvas title
   row on mobile (title top-left, closing cross top-right). */
.vd-filter-sidebar__head {
  display: none;
}
.vd-filter-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--vd-dark);
}
.vd-filter-group {
  border-bottom: 1px solid var(--vd-border);
}
.vd-filter-group:last-of-type { border-bottom: none; }
.vd-filter-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.vd-filter-group__summary::-webkit-details-marker { display: none; }
.vd-filter-group__summary i {
  transition: transform 0.2s ease;
}
.vd-filter-group[open] .vd-filter-group__summary i {
  transform: rotate(180deg);
}
.vd-filter-group__body {
  padding: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vd-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.vd-filter-option input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border: 2px solid var(--vd-border, #d8d2c8);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.vd-filter-option input:checked {
  background-color: var(--vd-primary, #a57b53);
  border-color: var(--vd-primary, #a57b53);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}
.vd-filter-option__count {
  color: var(--vd-primary, #a57b53);
  font-size: 0.85em;
  opacity: 0.75;
  margin-left: 0.15rem;
}
.vd-filter-apply {
  display: none;
  width: 100%;
  margin-top: 1rem;
}
/* Sticky head (concern #9): wraps the mobile "Filters" toggle, the applied
   property badges and the product count line. On mobile the whole bar sticks
   full-bleed under the fixed header; on desktop the badges + count stick
   under the header while the tiles scroll. */
.vd-filter-head {}
/* Applied property badges above the grid. */
.vd-filter-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 8rem;
}
.vd-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--vd-primary, #a57f4f);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border-radius: 999px;
}
.vd-filter-badge__remove {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15rem;
  cursor: pointer;
  display: inline-flex;
}
.vd-filter-badge__remove:hover { opacity: 0.8; }
.vd-filter-count {
  font-size: 0.95rem;
  color: var(--vd-muted, #6b675e);
  margin-bottom: 1rem;
  scroll-margin-top: 8rem;
}
.vd-filter-empty {
  font-size: 0.95rem;
  color: var(--vd-muted, #6b675e);
  padding: 1.5rem 0;
}
/* Mobile: toggle button + off-canvas filter panel. */
.vd-filter-mobile-toggle {
  display: none;
  position: relative;
  margin-bottom: 1rem;
}
.vd-filter-toggle__dot {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}
.vd-filter-toggle__dot[hidden] { display: none; }
@media (max-width: 767.98px) {
  .vd-filter-layout { grid-template-columns: 1fr; }

  .vd-filter-sidebar {
    position: fixed;
    inset: 0;
    z-index: 1050;
    max-height: none;
    border-radius: 0;
    display: none;
    overflow-y: auto;
    background: var(--vd-surface);
  }
  .vd-filter-sidebar.is-open { display: block; }

  /* Off-canvas header sticks to the top: title top-left, closing cross
     top-right, both always visible while the filters scroll. */
  .vd-filter-sidebar__head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    background: var(--vd-surface);
    padding: 1.1rem 0 0.85rem;
    border-bottom: 1px solid var(--vd-border);
  }
  .vd-filter-sidebar__head h5 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
  }
  .vd-filter-close {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vd-border);
    border-radius: 999px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* "Filters toepassen" stays pinned to the bottom of the off-canvas with a
     shadow; the filter content scrolls underneath it. */
  .vd-filter-apply {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
    background: var(--vd-primary, #a57b53);
    margin: 1rem -1.25rem 0;
    padding: 0.9rem;
    border-radius: 0;
  }

  /* Sticky full-width bar just below the fixed header: the "Filters" button,
     applied badges and product count line all stick together. The head is
     pulled full-bleed (100vw) and its inner padding is restored with the same
     calc so its content stays aligned with the container gutter. */
  .vd-filter-head {
    position: sticky;
    top: 4.5rem;
    z-index: 50;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-inline: calc(50vw - 50%);
    background: var(--vd-bg);
    border-bottom: 2px solid #8C6746;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  /* The applied-count dot sits inline, next to the word "Filters", with a
     white border so it contrasts against the primary-coloured button. */
  .vd-filter-toggle__dot {
    position: static;
    margin-left: 0.4rem;
    border: 1px solid #fff;
  }

  /* The toggle itself sits inside the sticky head and no longer needs its own
     bleed/stickiness — the wrapper handles that. */
  .vd-filter-mobile-toggle {
    display: inline-flex;
    width: 100%;
    margin: 0 0 0.75rem;
    justify-content: center;
    border-radius: 0;
    background: var(--vd-primary, #a57b53);
    padding: 0.8rem 1rem;
  }

  /* Product-match sentence: a touch smaller on mobile. */
  .vd-filter-count {
    font-size: calc(0.95rem - 2px);
  }

  /* The sticky head is much taller on mobile (button + badges + count), so
     scroll-into-view anchors need a larger offset to land below it. */
  .vd-filter-badges,
  .vd-filter-count {
    scroll-margin-top: 11rem;
  }
}
/* Desktop: the badges + count line stick under the header (same offset as the
   filter sidebar) while the tiles scroll underneath. The head spans the results
   column and reaches a little further left over the 2rem grid gap, so the
   tiles' drop shadows don't slide past its left edge. Content stays aligned
   with the results column because the bleed is restored as padding. It sits
   snug against the header: the header is min-height 76px plus a 1px border,
   so the sticky top is exactly 77px. */
@media (min-width: 768px) {
  .vd-filter-head {
    position: sticky;
    top: calc(76px + 1px);
    z-index: 30;
    margin-left: -2rem;
    padding: 0.5rem 0.5rem 0.75rem 2rem;
    background: var(--vd-bg);
    border-bottom: 2px solid #8C6746;
    margin-bottom: 0.5rem;
  }
}
/* ==========================================================================
   Legprijzen
   ========================================================================== */
/* Legservice price table on /legprijzen: a simple two-column table,
   service name on the left and the price per m² on the right. */
.vd-legprijzen-table {
  width: 100%;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.vd-legprijzen-table th,
.vd-legprijzen-table td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--vd-border);
}
.vd-legprijzen-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vd-muted);
  background: var(--vd-bg);
}
.vd-legprijzen-table tbody tr:last-child th,
.vd-legprijzen-table tbody tr:last-child td {
  border-bottom: 0;
}
.vd-legprijzen-table th:last-child,
.vd-legprijzen-table td:last-child {
  text-align: right;
  white-space: nowrap;
}