/* ==========================================================================
   Vloerengarant — thema-CSS
   Kleurwereld: bosgroen / warm zand / koper. Font: Plus Jakarta Sans.
   De --vs-*-variabelen voeden óók de vloershop-core-componenten.
   ========================================================================== */

/* ---- Fonts (lokaal, variabel 200–800) ---- */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-latin-italic.woff2") format("woff2");
}

/* ---- Design tokens ----
   Palet 1:1 van vloerenmarkt.nl (Ricks besluit 21-07): blauw #324696 primair,
   groen #62b959 koopknoppen, koele lichtgrijzen.
   Variabelnamen blijven (green/copper/sand) zodat alle verwijzingen werken.

   ORANJE IS SINDS 07-08 GEEN TWEEDE MERKKLEUR MEER (besluit Rick): knoppen,
   links, iconen en randen zijn allemaal blauw. Oranje mag alleen nog een ACTIE
   markeren, en juist daarom staat het nu in een eigen token --vg-actie: zodra
   de kleur ook op gewone knoppen zit, ziet niemand een korting nog als korting.
   Zet dus nooit --vg-copper terug op oranje; gebruik --vg-actie waar het echt
   om een aanbieding gaat. */
:root {
    /* Merk */
    --vg-green-900: #232427;   /* donkerst — tekst */
    --vg-green-800: #324696;   /* primair blauw */
    --vg-green-700: #2a3065;   /* donker navy */
    --vg-green-600: #4056b4;   /* heldere merk-tint */
    --vg-green-050: #eef0f8;
    --vg-actie: #fa6900;       /* ALLEEN acties: korting, aanbieding, actielabel */
    --vg-actie-dark: #e05f00;
    /* Was oranje, nu blauw. De naam blijft staan omdat er tientallen regels op
       wijzen; wie de kleur zoekt, vindt hem hier. */
    --vg-copper: var(--vg-green-800);
    --vg-copper-dark: var(--vg-green-600);
    --vg-sand: #f4f5f7;        /* koele fond */
    --vg-sand-deep: #e9ecf4;
    --vg-white: #ffffff;
    --vg-line: #e2e5ea;
    --vg-muted: #6c757d;

    --vg-radius: 10px;
    --vg-shadow: 0 8px 24px rgba(35, 36, 39, 0.08);
    --vg-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* vloershop-core-componenten volgen het merk automatisch */
    --vs-navy: var(--vg-green-800);
    --vs-color-primary: var(--vg-green-800);
    --vs-orange: var(--vg-copper);
    /* De enige plek waar de plugin nog oranje mag zijn: kortingen en acties. */
    --vs-color-sale: var(--vg-actie);
    --vs-line: var(--vg-line);
    --vs-soft: var(--vg-sand);
    --vs-muted: var(--vg-muted);
    --vs-radius: var(--vg-radius);
    --vs-border: var(--vg-line);
    --vs-green: #22c55e;
    --vs-color-success: #22c55e;
    --vs-calc-accent: var(--vg-green-600);
    --vs-q-accent: var(--vg-copper);
    --vs-pm-accent: var(--vg-green-600);
    --vs-acc-accent: var(--vg-copper);
    --vs-cmp-accent: var(--vg-green-600);
    --vs-sw-accent: var(--vg-copper);
    --vs-cpdp-navy: var(--vg-green-800);
    --vs-ch-navy: var(--vg-green-800);
    --vs-ma-navy: var(--vg-green-800);
}

/* ---- Basis ---- */
* { box-sizing: border-box; }
/* overflow-x: clip is het vangnet tegen horizontaal scrollen op mobiel: op een
   iPhone maakt élk element dat ook maar een pixel te breed is de hele pagina
   opzij scrollbaar, en fixed overlays (zijlade, vergeet-je-niets-modal) schuiven
   dan zichtbaar mee uit beeld. clip en niet hidden: hidden maakt van html een
   scrollcontainer en dat breekt position: sticky verderop; clip knijpt alleen
   af. De echte oorzaken zijn ook gedicht (zijlade en modal hebben expliciet
   overflow-x: hidden), dit vangt wat we op een echt toestel niet kunnen zien. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--vg-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--vg-green-900);
    background: var(--vg-white);
}
img { max-width: 100%; height: auto; }
a { color: var(--vg-green-600); }
/* Donkerder, niet lichter: de hover was oranje en moest dus alleen anders zijn.
   Nu alles blauw is, zou --vg-copper-dark precies de linkkleur zijn en had een
   link geen zichtbare hover meer. */
a:hover { color: var(--vg-green-800); }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; color: #111827; margin: 0 0 0.5em; }
h1 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.015em; }
h3 { font-size: 19px; }
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
}
.vg-container { max-width: 1500px; margin: 0 auto; padding: 0 20px; }
.vg-check { color: #62b959; font-weight: 800; margin-right: 4px; }

/* ---- Knoppen ---- */
.vg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.vg-btn--primary { background: var(--vg-green-800); color: #fff; }
.vg-btn--primary:hover { background: var(--vg-green-600); color: #fff; }
.vg-btn--ghost { background: transparent; color: var(--vg-green-800); border-color: var(--vg-green-800); }
.vg-btn--ghost:hover { background: var(--vg-green-050); color: var(--vg-green-800); }
.vg-btn--copper { background: var(--vg-copper); color: #fff; }
.vg-btn--copper:hover { background: var(--vg-copper-dark); color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Sticky header: de topbar schuift weg, logo/zoek/cart + menubalk blijven staan. */
.vg-header { position: sticky; top: -38px; z-index: 600; }
.vg-404__search { max-width: 560px; margin: 22px 0 34px; }

/* Zelfde tint als de menubalk (green-800) — twee verschillende donkertinten
 * boven elkaar oogde rommelig, zeker naast de koperen actie-strip. */
.vg-topbar { background: #fff; color: #232427; font-size: 13.5px; border-bottom: 1px solid var(--vg-line); }
.vg-topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.vg-topbar__usps { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.vg-topbar__usps li { display: inline-flex; align-items: center; gap: 6px; }
.vg-topbar__usps svg { color: var(--vg-green-800); flex: 0 0 auto; }
.vg-topbar__usps strong { color: #000; }
.vg-topbar__links { display: flex; align-items: center; gap: 18px; }
.vg-topbar__links a { color: #232427; text-decoration: none; }
.vg-topbar__links a:hover { color: var(--vg-green-800); }
/* Kortingsverwijzing in de topbalk. Oranje is hier op zijn plaats: dit is het
   enige plekje in de chrome dat over een korting gaat (zie --vg-actie). Rustig
   gehouden, want de MEGA Korting is permanent en geen tijdelijke schreeuw. */
.vg-topbar__actie { display: inline-flex; align-items: center; gap: 6px; color: var(--vg-actie-dark) !important; }
.vg-topbar__actie strong { color: var(--vg-actie-dark); }
.vg-topbar__actie:hover { color: var(--vg-actie) !important; }
.vg-topbar__actie:hover strong { color: var(--vg-actie); }
/* De topbalk moet één regel blijven. Met de kortingslink erbij past de rij
   USP's er onder 1080 px niet meer naast (gemeten: 1024 px sloeg om naar twee
   regels, 800 px naar drie). De USP's wijken dus eerder, want die staan ook in
   de footer en op de homepage; de kortingslink staat verder alleen in het
   mobiele menu en die begint pas onder 769 px.
   De selector noemt de lijst mee: .vg-topbar__usps li hierboven is specifieker
   dan een losse klasse en won anders van deze regels. */
@media (max-width: 1080px) { .vg-topbar__usps li.vg-topbar__hide-md { display: none; } }
@media (max-width: 900px) { .vg-topbar__usps li.vg-topbar__hide-sm { display: none; } }

.vg-masthead { background: var(--vg-white); }
/* 20px horizontaal = exact de containerpadding, zodat logo en iconen op
 * dezelfde lijn staan als menu-items en CTA in de nav eronder. */
.vg-masthead__inner { display: flex; align-items: center; gap: 28px; padding: 16px 20px; }

.vg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vg-logo__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--vg-green-800);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    /* Het oranje streepje onderin het V-tegeltje is weg (07-08): het logo is
       helemaal blauw, oranje hoort alleen nog bij acties. */
}
.vg-logo__text { font-size: 24px; letter-spacing: -0.02em; color: var(--vg-green-900); font-weight: 400; }
.vg-logo__text strong { font-weight: 800; color: var(--vg-green-800); }

.vg-search { flex: 1; max-width: 560px; }
.vg-search input[type="search"] {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--vg-line);
    border-radius: 999px;
    background: var(--vg-sand);
    font: inherit;
    font-size: 15px;
    color: var(--vg-green-900);
    outline: none;
}
.vg-search input[type="search"]:focus { border-color: var(--vg-green-600); background: #fff; }
/* Plugin-zoekmodule (vs-search) kleurt mee met het merk. */
.vg-search .vs-search__submit { background: var(--vg-green-800) !important; color: #fff !important; border-radius: 999px !important; }
.vg-search .vs-search__submit:hover { background: var(--vg-green-600) !important; }

.vg-actions { display: flex; gap: 20px; margin-left: auto; align-items: flex-end; }
button.vg-action { background: none; border: 0; font: inherit; font-size: 12.5px; padding: 0; cursor: pointer; }

/* Eigen verlanglijst-actie in de header; de plugin-injectie verbergen.
 * De teller-span draagt óók .vs-wishlist-headerlink__count zodat de plugin-JS
 * het aantal live bijwerkt. */
.vg-masthead a.vs-wishlist-headerlink { display: none !important; }
.vg-action--wishlist .vs-wishlist-headerlink__count:not(:empty) { display: inline-flex; }
.vg-action {
    display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--vg-green-900);
    text-decoration: none;
    font-size: 12.5px;
    position: relative;
}
.vg-action:hover { color: var(--vg-copper-dark); }
.vg-action__badge {
    position: absolute; top: -6px; right: 6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vg-copper);
    color: #fff;
    font-size: 11px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.vg-action__badge.is-empty { background: var(--vg-muted); }

.vg-menu-toggle { display: none; background: none; border: 0; color: var(--vg-green-900); cursor: pointer; padding: 6px; }

/* Menubalk zonder eigen achtergrond (Ricks wens): donkere items op wit, en
 * exact dezelfde container/uitlijning als de masthead erboven — geen 1420px
 * meer, de lijn zit ónder de balk. */
.vg-nav { background: var(--vg-white); border-bottom: 1px solid var(--vg-line); }
.vg-nav__inner { display: flex; align-items: center; gap: 10px; }
.vg-nav .vs-megamenu { --vs-mm-bg: transparent; --vs-mm-fg: var(--vg-green-900); }
.vg-nav .vs-megamenu__bar { padding: 0; border-radius: 0; margin-left: -6px; }
.vg-nav .vs-megamenu__expand { padding: 0 8px 0 2px; }
/* De plugin-burger ("Menu"-knop) nooit tonen: op mobiel opent ónze hamburger
 * de drawer, op tablet blijft de balk gewoon staan. */
.vg-nav .vs-megamenu__burger { display: none !important; }

/* ==========================================================================
   Mobiel slide-in menu (drawer) — luxuryfloors-patroon in onze kleuren:
   volle breedte, groene sluitbalk, support-blok, drill-down met terug-kop.
   ========================================================================== */
.vg-drawer {
    position: fixed; inset: 0; z-index: 1200;
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
}
.vg-drawer.is-open { transform: translateX(0); visibility: visible; }
body.vg-drawer-lock { overflow: hidden; }

.vg-drawer__close {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 15px 20px;
    background: var(--vg-green-800); color: #fff;
    border: 0; font: inherit; font-size: 15px; font-weight: 700;
    text-align: left; cursor: pointer;
}
.vg-drawer__body { position: relative; flex: 1; overflow: hidden; }
.vg-drawer__screen {
    position: absolute; inset: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff;
}
.vg-drawer__screen--sub { transform: translateX(102%); transition: transform 0.25s ease; z-index: 2; }
.vg-drawer.is-sub .vg-drawer__screen--sub { transform: translateX(0); }

.vg-drawer__support { background: var(--vg-sand); padding: 16px 20px; text-align: center; }
.vg-drawer__support-head {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--vg-green-900); font-weight: 700; font-size: 14.5px;
}
.vg-drawer__support-icon { display: inline-flex; color: var(--vg-copper-dark); }
.vg-drawer__support-links { display: flex; justify-content: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.vg-drawer__support-links a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--vg-green-800); font-size: 13.5px; font-weight: 600;
    text-decoration: none;
}
.vg-drawer__support-links svg { color: var(--vg-copper-dark); flex: 0 0 auto; }

.vg-drawer__list { list-style: none; margin: 0; padding: 0 20px; }
.vg-drawer__item { border-bottom: 1px solid var(--vg-line); }
.vg-drawer__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 0;
    color: var(--vg-green-900); font-size: 16px; font-weight: 600;
    text-decoration: none;
}
.vg-drawer__arrow { display: inline-flex; color: var(--vg-copper); flex: 0 0 auto; }

.vg-drawer__cta {
    display: block; margin: 18px 20px 26px; padding: 14px 18px;
    border-radius: 999px; background: var(--vg-copper); color: #fff;
    text-align: center; font-weight: 700; font-size: 15px;
    text-decoration: none;
}

.vg-drawer__subhead {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 12px; border-bottom: 1px solid var(--vg-line);
}
.vg-drawer__back { display: inline-flex; padding: 12px 10px; background: none; border: 0; color: var(--vg-copper-dark); cursor: pointer; }
.vg-drawer__headline { padding: 12px 4px; color: var(--vg-green-900); font-size: 17px; font-weight: 800; text-decoration: none; }
.vg-drawer__sections { padding: 4px 20px 28px; }
.vg-drawer__section { margin-top: 18px; }
.vg-drawer__section-head {
    display: block; margin-bottom: 2px;
    color: var(--vg-copper-dark); font-weight: 800; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: 0.07em;
    text-decoration: none;
}
.vg-drawer__sublist { list-style: none; margin: 0; padding: 0; }
.vg-drawer__sublink {
    display: block; padding: 11px 0;
    border-bottom: 1px solid var(--vg-line);
    color: var(--vg-green-900); font-size: 15px; text-decoration: none;
}
.vg-drawer__sublist li:last-child .vg-drawer__sublink { border-bottom: 0; }
.vg-drawer__all { display: inline-block; margin-top: 20px; color: var(--vg-copper-dark); font-weight: 700; text-decoration: none; }

/* Drawer is een mobiel-only patroon. */
@media (min-width: 769px) {
    .vg-drawer { display: none; }
}
.vg-nav .vs-megamenu__item:hover > .vs-megamenu__link,
.vg-nav .vs-megamenu__item:focus-within > .vs-megamenu__link { background: var(--vg-sand); color: var(--vg-green-800); }
.vg-nav__mega { flex: 1; min-width: 0; position: relative; }
/* Vloerenmarkt-gedrag: het panel schuift NIET mee met het item, maar staat
 * altijd op volle breedte onder de balk. */
.vg-nav__mega .vs-megamenu__item { position: static !important; }
.vg-nav__mega .vs-megamenu__panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    top: 100% !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 24px rgba(35, 36, 39, 0.10) !important;
}
/* De "Bekijk alles"-regel per kolom is vervallen (27-8-2026): duplicaat van de
   kolomkop erboven. Zie assets/css/megamenu.css in vloershop-core. */
/* Typografie mega-panel 1:1 vloerenmarkt: kop 18/600, link 16/400. */
.vg-nav__mega .vs-megamenu__col-head { font-size: 18px; font-weight: 600; color: #000; margin-bottom: 10px; }
.vg-nav__mega .vs-megamenu__sublist a { font-size: 16px; color: #000; padding: 7px 0; display: flex; align-items: center; gap: 8px; }
/* Kleurbolletjes + legpatroon-iconen in menulinks (vloerenmarkt-patroon). */
.vs-mm-dot {
    display: inline-block;
    flex: 0 0 25px;
    width: 25px; height: 25px;
    border-radius: 50%;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
    margin-right: 0;
    vertical-align: middle;
}
.vs-mm-ic { margin-right: 8px; vertical-align: -2px; color: #9aa0a8; }
.vs-megamenu__col-head .vs-mm-ic, .vs-megamenu__col-head .vs-mm-dot { vertical-align: -2px; }
/* Compacte mega-menu-balk zodat alle 9 hoofdcategorieën op één regel passen. */
/* 6px i.p.v. 8px: alle 9 hoofdcategorieën + CTA passen zo op één regel
 * binnen de 1240px-container (som items was 22px te breed). */
.vg-nav .vs-megamenu__bar > li > a,
.vg-nav .vs-megamenu__item > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 14px !important; white-space: nowrap; }
.vg-nav__cta { padding: 7px 14px; font-size: 13.5px; }
.vg-nav__list { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.vg-nav__list a {
    display: block;
    padding: 13px 16px;
    color: var(--vg-green-900);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}
.vg-nav__list a:hover { background: var(--vg-sand); color: var(--vg-green-800); }
.vg-nav__cta {
    margin-left: auto;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--vg-copper);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.vg-nav__cta:hover { background: var(--vg-copper-dark); color: #fff; }

/* ==========================================================================
   Homepage
   ========================================================================== */
.vg-hero { background: linear-gradient(180deg, var(--vg-sand) 0%, #fff 100%); overflow: hidden; }
.vg-hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.vg-hero__kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; font-weight: 700; color: var(--vg-copper-dark); margin: 0 0 10px; }
.vg-hero__sub { font-size: 18px; color: var(--vg-muted); max-width: 54ch; }
.vg-hero__cta { display: flex; gap: 14px; margin: 26px 0 18px; flex-wrap: wrap; }
.vg-hero__trust { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--vg-green-900); flex-wrap: wrap; }

.vg-hero__panel { position: relative; min-height: 320px; }
.vg-hero__plank {
    position: absolute; right: 0; border-radius: 14px; box-shadow: var(--vg-shadow);
    background: linear-gradient(120deg, #b98a5a 0%, #a1734a 45%, #8f6440 100%);
}
.vg-hero__plank--1 { width: 78%; height: 84px; top: 8%; transform: rotate(-4deg); }
.vg-hero__plank--2 { width: 92%; height: 84px; top: 38%; transform: rotate(-4deg); background: linear-gradient(120deg, #caa06e 0%, #b08051 50%, #996f47 100%); }
.vg-hero__plank--3 { width: 66%; height: 84px; top: 68%; transform: rotate(-4deg); background: linear-gradient(120deg, #a97e50 0%, #91653e 60%, #7f5836 100%); }
.vg-hero__badge {
    position: absolute; left: 0; bottom: 4%;
    background: var(--vg-green-800); color: #fff;
    border-radius: 14px; padding: 14px 20px;
    box-shadow: var(--vg-shadow);
    display: flex; flex-direction: column; line-height: 1.25;
}
.vg-hero__badge strong { font-size: 20px; }
.vg-hero__badge span { font-size: 13px; color: #cfdcd2; }

.vg-section { padding: 56px 0; }
.vg-section--sand { background: var(--vg-sand); }
.vg-section__title { text-align: center; margin-bottom: 34px; }
/* Kleine introregel die tegelijk de H1 van de homepage is (07-08). Alle waarden
   staan hier expliciet omdat de globale h1-regel anders 30 tot 44px, gewicht
   800 en een negatieve letterafstand oplegt; die maakt er weer een schreeuwkop
   van. Links uitgelijnd en met een krappe ondermarge, zodat het mozaiek er
   meteen onder begint in plaats van na een gat van 34px.

   De drie maten zijn geen smaak maar gemeten: de zin moet op één regel blijven.
   Bij 1280 is de container 1225 breed en past 22px ruim (tekst 770). Bij 768 is
   de container nog 713 en wikkelt 22px al naar twee regels, dus daar 20px
   (tekst past net). Bij 375 is er 335 over; 18px geeft twee regels, 19px drie,
   dus 18px is daar het maximum. Wordt de zin ooit langer, meet dan opnieuw. */
.vg-section__intro {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--vg-green-900);
    text-align: left;
}
@media (max-width: 1024px) { .vg-section__intro { font-size: 20px; } }
@media (max-width: 560px) { .vg-section__intro { font-size: 18px; margin-bottom: 10px; } }

/* De eerste sectie van de homepage begint hoger dan de standaard 56px: met een
   introregel in plaats van een gecentreerde sectiekop viel er anders een groot
   gat tussen de menubalk en de tegels. */
.vg-home > .vg-section:first-of-type { padding-top: 26px; }
@media (max-width: 560px) { .vg-home > .vg-section:first-of-type { padding-top: 18px; } }

/* Hero-sfeerfoto */
.vg-hero__img {
    width: 100%; height: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--vg-shadow);
    display: block;
}

/* Categorie-fototegels (vloerenmarkt-stijl).
 * Zes gelijke blokken gaven geen hiërarchie: Profielen woog even zwaar als PVC.
 * Nu een raster van 6 kolommen — de twee vloersoorten spannen er 3 (twee groot
 * op een rij), de rest spant er 2 (drie op een rij). Zo leest de sectie als
 * "kies eerst je vloer, dan wat erbij hoort". */
.vg-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.vg-cat { grid-column: span 2; }
.vg-cat--groot { grid-column: span 3; }
.vg-cat--groot .vg-cat__media { height: 300px; }
.vg-cat--groot .vg-cat__name { font-size: 25px; }
.vg-cat--groot .vg-cat__desc { font-size: 14px; }
.vg-cat {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--vg-radius);
    background: var(--vg-sand-deep);
    text-decoration: none;
    color: var(--vg-green-900);
    font-weight: 700;
    font-size: 19px;
    box-shadow: 0 4px 14px rgba(35, 36, 39, 0.07);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vg-cat:hover { box-shadow: var(--vg-shadow); transform: translateY(-3px); }
.vg-cat::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(35, 36, 39, 0) 38%, rgba(35, 36, 39, 0.82) 100%);
    pointer-events: none;
}
.vg-cat__media { display: block; width: 100%; height: 200px; }
.vg-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.vg-cat:hover .vg-cat__media img { transform: scale(1.05); }
.vg-cat__body { position: absolute; left: 16px; right: 44px; bottom: 14px; z-index: 1; }
.vg-cat__name { display: block; color: #fff; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.vg-cat__desc { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
.vg-cat__arrow { position: absolute; right: 16px; bottom: 14px; color: #fff; font-size: 20px; z-index: 1; }

/* ==========================================================================
   Categorie-mozaiek op de homepage (indeling zoals vloerenmarkt.nl)
   ==========================================================================
   Vier kolommen, twee rijen. De twee grote tegels spannen beide rijen (kolom 1
   en 2), de twee lage staan rechtsboven (kolom 3 en 4) en de brede vult de
   rechteronderhoek. Dat gaat volledig op auto-flow: item 1 en 2 pakken rij 1-2
   van kolom 1 en 2, item 3 en 4 vallen in rij 1 kolom 3 en 4, en item 5 past
   met zijn twee kolommen alleen nog in rij 2. Daarom mag de DOM-volgorde in
   front-page.php niet zomaar om.

   Eigen klassen (.vg-mtegel) en niet .vg-cat: die wordt ook door 404.php
   gebruikt met zes gelijke tegels, en die zou hier in het raster stukvallen. */
.vg-mozaiek {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px 200px;
    gap: 20px;
}
.vg-mtegel--groot { grid-row: span 2; }
.vg-mtegel--breed { grid-column: span 2; }

/* De drie afwerkingsafdelingen ("Ook nodig bij je vloer"): zelfde tegel, lager
   en zonder hiërarchie. Stond tot 07-08-2026 direct onder het mozaiek en had daarom
   een eigen marge naar boven; nu staat de rij onder een eigen kop verderop op
   de homepage en doet de sectie-afstand dat werk al. */
.vg-mozaiek--rij { grid-template-columns: repeat(3, 1fr); grid-template-rows: 170px; }

.vg-mtegel {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--vg-radius);
    background: var(--vg-sand-deep);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(35, 36, 39, 0.07);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vg-mtegel:hover { box-shadow: var(--vg-shadow); transform: translateY(-3px); }
.vg-mtegel__media { position: absolute; inset: 0; display: block; }
.vg-mtegel__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.vg-mtegel:hover .vg-mtegel__media img { transform: scale(1.05); }

/* De PPC-sfeerfoto's zijn voorgesneden op 1800x800 en cover snijdt vanuit het
 * midden. Bij PVC ligt daar alleen kale vloer met een stuk bank; links staan de
 * bijzettafel en het raamlicht en dat leest als een woonkamer. Vandaar de
 * uitsnede naar links. De andere foto's hebben hun onderwerp wel in het midden. */
.vg-mtegel--cat-pvc-vloeren .vg-mtegel__media img { object-position: 15% center; }

/* Lichte diepte over de hele tegel, zodat de foto niet vlak wegvalt tegen de
 * witte pagina. Het echte leeswerk doet de waas op __body hieronder. */
.vg-mtegel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 25, 28, 0) 50%, rgba(24, 25, 28, 0.28) 100%);
    pointer-events: none;
}

/* De verloopwaas hangt aan het TEKSTBLOK, niet aan de tegel, en de aanloop
 * staat in pixels (46px) en niet in procenten. Reden: de tegels lopen van
 * 470 px hoog (groot) tot 160 px (laag op mobiel) en de omschrijvingen zijn
 * niet even lang. Een waas met procentstops is dan op de ene tegel te licht
 * precies waar de tekst begint en op de andere onnodig zwart. Zo begint de
 * tekst altijd op exact hetzelfde punt in het verloop.
 *
 * Contrast getoetst op het slechtste denkbare geval, een spierwitte foto:
 * bij 0,68 alpha komt de ondergrond op ±#626366 en wit daarop geeft 6,1:1;
 * onderin loopt dat op naar ±10:1. Ruim boven de 4,5:1 van WCAG AA. */
.vg-mtegel__body {
    position: absolute; z-index: 1;
    left: 0; right: 0; bottom: 0;
    /* Rechts stond 82px om de pijlknop vrij te houden. Die knop is er sinds
       07-08 niet meer, dus de omschrijving mag de hele tegelbreedte gebruiken
       en breekt een regel later af. */
    padding: 46px 20px 18px 20px;
    color: #fff;
    background: linear-gradient(180deg, rgba(24, 25, 28, 0) 0, rgba(24, 25, 28, 0.68) 46px, rgba(24, 25, 28, 0.9) 100%);
}
.vg-mtegel__naam { display: block; font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.vg-mtegel__desc { display: block; margin-top: 7px; font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.vg-mtegel--groot .vg-mtegel__naam { font-size: 27px; }
.vg-mtegel--laag .vg-mtegel__naam { font-size: 18px; }
.vg-mtegel--laag .vg-mtegel__desc { font-size: 13px; margin-top: 5px; }

/* De blauwe pijlknop rechtsonder is weg (07-08): de hele tegel was al de link,
   dus dat blokje suggereerde een tweede, kleinere klikzone. De klikbaarheid
   komt nu van de hover: de tegel komt omhoog, krijgt schaduw, de foto zoomt in
   en de naam wordt onderstreept. Die laatste is er expliciet bij gezet, want de
   eerste drie zie je niet met een toetsenbord of op een aanraakscherm. */
.vg-mtegel:hover .vg-mtegel__naam,
.vg-mtegel:focus-visible .vg-mtegel__naam { text-decoration: underline; text-underline-offset: 3px; }
.vg-mtegel--laag .vg-mtegel__body { padding: 38px 16px 14px 16px; background-image: linear-gradient(180deg, rgba(24, 25, 28, 0) 0, rgba(24, 25, 28, 0.68) 38px, rgba(24, 25, 28, 0.9) 100%); }

/* Populaire categorieën — snelkoppel-pills onder de vloersoort-tegels. */
.vg-section--tight { padding-top: 6px; }
.vg-section__title--sm { font-size: 20px; margin-bottom: 14px; }
.vg-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.vg-pill {
    display: inline-flex; align-items: center;
    padding: 9px 17px;
    border-radius: 999px;
    background: var(--vg-sand-deep, #eef0f8);
    color: var(--vg-green-900, #324696);
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.vg-pill:hover { background: var(--vg-green-900, #324696); color: #fff; }

.vg-guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vg-guarantee {
    background: #fff;
    border: 1px solid var(--vg-line);
    border-top: 4px solid var(--vg-copper);
    border-radius: var(--vg-radius);
    padding: 24px;
}
.vg-guarantee p { color: var(--vg-muted); margin: 0; font-size: 15px; }

/* ---- Kortingsverhaal in twee stappen (homepage) ----
   Rustig blok op de koele fond: het is uitleg van iets dat er al is, geen
   actiebanner. Oranje alleen in de stapnummers, de rest volgt het merk. */
/* Vast twee kolommen en niet auto-fit: er zijn precies twee stappen, en op
   1280 px maakte auto-fit er drie van met een lege derde kolom ernaast. */
.vg-korting {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    padding: 26px 28px;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    background: var(--vg-sand);
}
.vg-korting__stap { display: flex; align-items: flex-start; gap: 14px; }
.vg-korting__nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--vg-actie);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.vg-korting__title { margin: 3px 0 6px; font-size: 18px; }
.vg-korting__stap p { margin: 0; color: #4a5263; font-size: 15px; line-height: 1.55; }
.vg-korting__groepen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vg-korting__groepen a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--vg-line);
    border-radius: 999px;
    background: #fff;
    color: var(--vg-green-800);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.vg-korting__groepen a:hover { border-color: var(--vg-green-800); }
.vg-korting__cta { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
/* Uitvoering binnen een contentpagina (/acties/): één kolom, want de tekst
   staat daar al in een leeskolom van 76ch. */
@media (max-width: 820px) { .vg-korting { grid-template-columns: 1fr; } }
.vg-korting--pagina { grid-template-columns: 1fr; margin: 22px 0 28px; }
.vg-korting--pagina .vg-korting__title { font-size: 19px; }
.vg-article__body .vg-korting__cta { margin: 26px 0 0; }
.vg-lead { font-size: 17px; line-height: 1.6; }
/* Brede tabel in een contentpagina scrolt in zijn eigen kader; op 390 px past
   een prijstabel met vijf kolommen anders niet en kantelt de hele pagina. */
.vg-tabel-scroll { overflow-x: auto; margin: 14px 0 22px; }
.vg-tabel-scroll table { margin: 0; min-width: 620px; }
.vg-tabel-scroll small { color: var(--vg-muted); }

.vg-cta-band { background: var(--vg-green-800); color: #fff; padding: 44px 0; }
.vg-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.vg-cta-band h2 { color: #fff; margin-bottom: 6px; }
.vg-cta-band p { color: #dbe2f2; margin: 0; }
/* De knop op deze band was oranje en dus juist het contrastelement. Nu alles
   blauw is, staat een blauwe knop op een blauwe band (live gemeten 1,0:1: je
   zag alleen nog de witte letters zweven). Op gekleurde banden draait de knop
   daarom om: wit vlak met blauwe tekst, 8,6:1 beide kanten op. */
.vg-cta-band .vg-btn--copper,
.vg-cta-band .vg-btn--primary { background: #fff; color: var(--vg-green-800); }
.vg-cta-band .vg-btn--copper:hover,
.vg-cta-band .vg-btn--primary:hover { background: var(--vg-green-050); color: var(--vg-green-700); }

/* ==========================================================================
   Woo checkout & orderbevestiging — visuele opknapbeurt
   ========================================================================== */
/* Besteloverzicht (blocks-checkout): productomschrijving was een lap tekst —
 * nu klein, gedempt en maximaal 2 regels. */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--vg-muted) !important;
}
.wc-block-components-order-summary-item__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Orderbevestiging (bedankt-pagina): de kale uppercase-lijst wordt een nette kaartenrij. */
.woocommerce-order { max-width: 900px; margin: 0 auto; }
.woocommerce-thankyou-order-received {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--vg-green-800);
    margin: 6px 0 22px;
}
ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
ul.woocommerce-order-overview li {
    flex: 1 1 150px;
    background: var(--vg-sand);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 12px 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vg-muted);
    border-right: 1px solid var(--vg-line) !important;
}
ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-size: 15.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--vg-green-900);
}
.woocommerce-table--order-details,
.woocommerce-order-details table.shop_table {
    width: 100%;
    border-collapse: collapse !important;
    border: 1px solid var(--vg-line) !important;
    border-radius: var(--vg-radius);
    overflow: hidden;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    border: 0 !important;
    border-bottom: 1px solid var(--vg-line) !important;
    padding: 12px 16px !important;
    text-align: left;
}
.woocommerce-table--order-details thead th {
    background: var(--vg-green-800);
    color: #fff;
}
.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
    font-size: 21px;
    margin: 26px 0 12px;
}
.woocommerce-customer-details address {
    background: #fff;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 16px 18px;
    font-style: normal;
    line-height: 1.7;
}
.woocommerce-bacs-bank-details {
    background: var(--vg-sand);
    border-radius: var(--vg-radius);
    padding: 16px 18px;
    margin: 0 0 24px;
}

/* Actie-strip compacter op mobiel (wrapte over meerdere regels). */
@media (max-width: 768px) {
    .vs-promo-strip { font-size: 12px !important; padding: 6px 34px 6px 10px !important; line-height: 1.35 !important; }
    .vs-promo-strip__text { display: inline !important; }
    .vs-promo-strip a, .vs-promo-strip button { font-size: 12px !important; padding: 2px 8px !important; }
}

/* ==========================================================================
   Content & Woo-basis
   ========================================================================== */
.vg-content { padding: 44px 20px 64px; }
.vg-article__body { max-width: 76ch; }

/* Tarieftabellen op de servicepagina's (verzenden & leveren). Twee nette
   kolommen, mobiel gewoon smaller — twee kolommen passen ook op 390 px. */
.vg-article__body table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: 15px; }
.vg-article__body th, .vg-article__body td { padding: 10px 12px; border: 1px solid #e2e5ea; text-align: left; vertical-align: top; }
.vg-article__body thead th { background: #eef0f8; color: #232427; font-weight: 700; }
.vg-article__body tbody tr:nth-child(even) td { background: #f8f9fc; }
.vg-woo-main { padding: 34px 0 64px; }
.vg-woo { padding-top: 6px; }

/* Product-grid (archief + shortcodes): eigen grid, Woo's float-kolommen uit. */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    list-style: none;
    margin: 18px 0 30px;
    padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.woocommerce ul.products li.product:hover {
    box-shadow: var(--vg-shadow);
    transform: translateY(-2px);
    border-color: var(--vg-green-600);
}
@media (max-width: 1024px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    /* Ricks regel: op mobiel ALTIJD 2 producten naast elkaar (nooit 1, nooit 3). */
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Archief met filter-sidebar */
.vg-archive--with-filters {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}
.vg-archive__sidebar { position: sticky; top: 16px; }
/* Een grid-item krimpt niet onder zijn eigen inhoud zolang min-width op auto
 * staat. De subcategorie-carrousel (ul.vs-subcat-tiles) is met overflow-x:auto
 * bewust breder dan het scherm; zonder deze regel rekte hij de kolom mee op
 * (430 px in een track van 320 px) en liep de hele pagina 75 px over. Nu blijft
 * het overlopen binnen de carrousel, waar het hoort. */
.vg-archive__main { min-width: 0; }
.vg-archive--with-filters ul.products,
.vg-archive--with-filters .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .vg-archive--with-filters { grid-template-columns: 1fr; }
    .vg-archive__sidebar { position: static; }
}
/* Deze 3-koloms-regel won (zelfde specificiteit, later in cascade) van de
 * mobiele overrides hierboven -> op telefoons stonden 3 producten naast
 * elkaar. Onder 1024px: altijd 2. */
@media (max-width: 1024px) {
    .vg-archive--with-filters ul.products,
    .vg-archive--with-filters .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .vg-archive--with-filters ul.products,
    .vg-archive--with-filters .woocommerce-page ul.products { gap: 12px; }
}

/* Archief-kop */
.vg-woo .woocommerce-products-header__title { margin: 10px 0 6px; }
.vg-woo .woocommerce-result-count { color: var(--vg-muted); font-size: 14.5px; }
.vg-woo .woocommerce-ordering select {
    padding: 9px 14px;
    border: 1.5px solid var(--vg-line);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--vg-green-900);
}

.woocommerce ul.products li.product a img { border-radius: 0; display: block; width: 100%; }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button {
    background: var(--vg-green-800); color: #fff; border-radius: 999px; font-weight: 700;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
    background: var(--vg-green-600); color: #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Merkenstrip (home) */
.vg-brands__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 48px; list-style: none; margin: 0; padding: 0; }
.vg-brands__list img { height: 40px; width: auto; display: block; filter: grayscale(1) opacity(0.72); transition: filter 0.2s ease; }
.vg-brands__list img:hover { filter: grayscale(0) opacity(1); }

/* SEO-band (home) */
.vg-seo-band { background: var(--vg-green-800); color: #dfe8e0; padding: 52px 0; }
.vg-seo-band h2 { color: #fff; margin-bottom: 14px; }
.vg-seo-band p { max-width: 86ch; font-size: 15.5px; }
/* De links in deze band waren oranje op blauw. Toen oranje blauw werd, stonden
   ze blauw op blauw (live gemeten 1,0:1) en zag Rick gaten in de lopende tekst.
   Wit geeft 8,6:1 op deze achtergrond, en de onderstreping moet erbij: zonder
   is wit hier gewoon de tekstkleur en lijkt een link geen link meer. */
.vg-seo-band a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vg-seo-band a:hover { color: #fff; text-decoration-thickness: 2px; }

/* Footer: stalen-CTA-band + betaalmethoden */
.vg-footer__samples { background: var(--vg-sand-deep); color: #111827; }
.vg-footer__samples-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 30px; padding-bottom: 30px; flex-wrap: wrap; }
.vg-footer .vg-footer__samples h2 { margin: 0 0 4px; font-size: 22px; color: var(--vg-green-900); }
.vg-footer__samples p { margin: 0; color: var(--vg-muted); }
/* Knoptekst wit houden: .vg-footer a (0,1,1) overschreef anders .vg-btn--copper. */
.vg-footer .vg-btn--copper,
.vg-footer .vg-btn--copper:hover { color: #fff; }
.vg-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.vg-footer__pay img { display: block; height: 28px; width: auto; border-radius: 5px; }
/* Visa-woordmerk en Mastercard-symbool zijn transparant: op wit kaartje voor contrast met de bosgroene footer. */
.vg-footer__pay .vg-pay--visa,
.vg-footer__pay .vg-pay--mastercard { height: 16px; padding: 6px 9px; box-sizing: content-box; background: #fff; }

.vg-footer { background: var(--vg-sand); color: #3a4160; margin-top: 64px; border-top: 1px solid var(--vg-line); }
.vg-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding-top: 52px; padding-bottom: 40px; }
.vg-footer h2 { color: #111827; font-size: 16px; margin-bottom: 14px; }
.vg-footer ul { list-style: none; margin: 0; padding: 0; }
.vg-footer li { margin-bottom: 9px; font-size: 14.5px; }
.vg-footer a { color: #3a4160; text-decoration: none; }
.vg-footer a:hover { color: var(--vg-green-800); }
.vg-footer__brand p { font-size: 14.5px; color: var(--vg-muted); max-width: 34ch; }
.vg-footer__brand-usps-title { margin-top: 24px; }
.vg-logo--footer .vg-logo__text { color: #111827; }
.vg-logo--footer .vg-logo__text strong { color: var(--vg-green-800); }
.vg-footer__usps .vg-check { color: #62b959; }
.vg-footer__bottom { border-top: 1px solid var(--vg-line); }
.vg-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; padding-bottom: 16px; font-size: 13.5px; flex-wrap: wrap; }
.vg-footer__bottom a { margin-left: 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .vg-hero__inner { grid-template-columns: 1fr; }
    .vg-hero__panel { display: none; }
    .vg-cats, .vg-guarantees { grid-template-columns: repeat(2, 1fr); }
    /* Onder 1024px vervalt de 6-koloms opzet: alles twee naast elkaar, anders
     * wordt een tegel die 3 van 6 kolommen spant ineens een halve kolom breed. */
    .vg-cat, .vg-cat--groot { grid-column: span 1; }
    .vg-cat--groot .vg-cat__media { height: 230px; }
    .vg-cat--groot .vg-cat__name { font-size: 21px; }
    .vg-footer__grid { grid-template-columns: 1fr 1fr; }

    /* Mozaiek op tablet: de hoge tegels naast elkaar krijgen zou ze 170 px
     * breed maken en dan past de omschrijving er niet meer in. Dus twee
     * kolommen en drie rijen: vloersoorten, afwerking, ondervloeren breed. */
    .vg-mozaiek { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 230px); }
    .vg-mtegel--groot { grid-row: span 1; }
    .vg-mtegel--groot .vg-mtegel__naam { font-size: 23px; }
    /* De rij eronder heeft ook .vg-mozaiek, dus zonder deze regel erft hij de
     * twee kolommen van hierboven en valt de derde tegel alleen op een rij. */
    /* 175 en niet 150: op ±225 px breed loopt "Wax, Olie & Lak" over twee
     * regels en dan schuift de waas tot bijna bovenaan de tegel. */
    .vg-mozaiek--rij { grid-template-columns: repeat(3, 1fr); grid-template-rows: 175px; }
}
/* Tablet-band (769–1024): de plugin wil hier zijn eigen burger; wij houden de
 * balk gewoon zichtbaar (mag over 2 regels) met de panels als dropdown. */
@media (min-width: 769px) and (max-width: 1024px) {
    .vg-nav .vs-megamenu__bar { display: flex !important; flex-direction: row; margin-top: 0; padding: 0; }
    .vg-nav .vs-megamenu__item { border-bottom: 0; }
    .vg-nav .vs-megamenu__panel { position: absolute; flex-direction: row; margin: 8px 0 0; padding: 22px; }
}

@media (max-width: 768px) {
    /* iOS zoomt automatisch in op velden < 16px — geldt voor ALLE formulieren
     * (offerte, checkout, nieuwsbrief), dus generiek afgedwongen. */
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="search"], input[type="password"], select, textarea { font-size: 16px !important; }

    /* Luxuryfloors-patroon: compacte topbar, logo + strakke icoon-rij op één
     * regel, zoekbalk full-width eronder. */
    .vg-topbar__hide-sm, .vg-topbar__links { display: none; }
    .vg-topbar__usps { justify-content: center; width: 100%; gap: 14px; font-size: 12.5px; }
    .vg-topbar__usps li:nth-child(n+2) { display: none; }

    .vg-masthead__inner { flex-wrap: wrap; gap: 0 12px; padding: 10px 14px; align-items: center; }
    .vg-logo { margin-right: auto; }
    .vg-logo__mark { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
    .vg-logo__text { font-size: 18px; }

    /* De iconen zijn 22 x 22 px zodra het bijschrift verdwijnt; dat is te klein
     * om betrouwbaar te raken. Het klikgebied wordt 40 x 40 px via een
     * onzichtbaar vlak, dus zonder het icoon zelf lomp te maken. De tussenruimte
     * gaat van 14 naar 18 px zodat de klikgebieden van buurpictogrammen elkaar
     * precies raken en niet overlappen (22 + 2 x 9 = 40). */
    .vg-actions { gap: 18px; margin-left: 0; order: 2; align-items: center; }
    .vg-action span:not(.vg-action__badge) { display: none; }
    .vg-action svg { width: 22px; height: 22px; }
    .vg-action::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
    .vg-action--samples { display: none; }
    .vg-masthead .vs-wishlist-headerlink::after { content: none; }
    .vg-masthead .vs-wishlist-headerlink { order: 2; }
    .vg-action__badge, .vg-masthead .vs-wishlist-headerlink__count { top: -7px; right: -7px; }

    .vg-menu-toggle { display: inline-flex; order: 3; padding: 4px; position: relative; }
    /* Zelfde verhaal als bij de iconen hierboven: 32 x 32 px is te klein. Stond
     * niet op de lijst, maar hij staat in dezelfde rij en zou anders als enige
     * onder de norm blijven. */
    .vg-menu-toggle::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }

    .vg-search { order: 4; max-width: none; flex-basis: 100%; margin-top: 10px; }
    .vg-search .vs-search__toggle { display: none !important; }
    /* De zoekknop hoort ÍN de balk (stond als los blok naast de iconen en
     * duwde de hamburger weg). Input 16px = geen iOS-autozoom bij typen. */
    .vg-search .vs-search { display: block !important; position: relative !important; }
    .vg-search .vs-search__field,
    .vg-search .vs-search form { display: block !important; position: static !important; }
    .vg-search .vs-search input[type="search"] {
        display: block !important;
        width: 100%;
        font-size: 16px !important;
        padding-right: 52px;
    }
    .vg-search .vs-search__submit {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
    }
    /* Nav-balk bestaat niet op mobiel (drawer neemt het over):
     * scheidingslijn terug op de masthead. Het mega-menu blijft wél in de
     * DOM staan (display:none) — de drawer-JS kloont daar zijn data uit. */
    .vg-masthead { border-bottom: 1px solid var(--vg-line); }
    .vg-nav { display: none; }
    /* Categorie-tegels ook 2-op-een-rij op mobiel (Ricks "altijd 2 naast elkaar").
     * Op deze breedte hebben grote en kleine tegels dezelfde maat: twee kolommen
     * van ~170px zijn te smal om nog met formaat te kunnen sturen. */
    .vg-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .vg-cat--groot .vg-cat__media { height: 200px; }
    .vg-cat--groot .vg-cat__name { font-size: 19px; }
    .vg-cat--groot .vg-cat__desc { font-size: 13px; }
    .vg-guarantees { grid-template-columns: 1fr; }
    .vg-footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Mozaiek op telefoon: alles onder elkaar. Twee naast elkaar (zoals de oude
 * tegels) laat op 375 px maar ~150 px tekstbreedte over, en dan valt een
 * omschrijving van twee regels uiteen in zes. De brede tegel moet zijn span-2
 * hier inleveren, anders wijst hij naar een tweede kolom die niet bestaat.
 * Dit blok staat bewust NA de 1024- en 768-blokken: media queries met gelijke
 * specificiteit worden op volgorde beslecht, dus eerder zou 1024 hier
 * overheen schrijven. */
@media (max-width: 560px) {
    .vg-mozaiek { grid-template-columns: 1fr; grid-template-rows: repeat(5, 230px); gap: 14px; }
    .vg-mtegel--breed { grid-column: span 1; }
    .vg-mtegel--groot { grid-row: span 1; }
    .vg-mtegel--groot .vg-mtegel__naam { font-size: 23px; }
    /* Een graadje kleiner: op ±235 px tekstbreedte scheelt 14 naar 13 px een
     * hele regel, en daarmee blijft er boven de waas nog foto over. */
    .vg-mtegel__desc { font-size: 13px; }
    .vg-mozaiek--rij { grid-template-columns: 1fr; grid-template-rows: repeat(3, 160px); }
}

/* pipeline-test 105833 */

/* ==========================================================================
   Footer: bedrijfsgegevens + "alle prijzen incl. btw"-regel (LF-scan D2)
   ========================================================================== */
.vg-footer__legal-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    font-size: 12.5px;
    color: var(--vg-muted);
}
.vg-footer__legal-inner p { margin: 0; }

/* ==========================================================================
   Koopknoppen in vloerenmarkt-groen (#62b959) — palet-1:1: kopen = groen,
   primair = blauw, prijs/acties = oranje.
   ========================================================================== */
/* Cross-sell "Toevoegen": wit met navy tekst (VM-meting: #fff / #2a3065) */
html body .vs-accessories a.vs-accessories__add,
html body .vs-accessories button.vs-accessories__add {
    background: #fff !important;
    border: 1px solid #c2c8d1 !important;
    color: #2a3065 !important;
}
html body .vs-accessories a.vs-accessories__add:hover,
html body .vs-accessories button.vs-accessories__add:hover {
    border-color: #324696 !important;
    filter: none !important;
}
html body .vs-accessories__add.added { background: #eef0f8 !important; border-color: #324696 !important; color: #2a3065 !important; }
/* Secundaire knoppen (Offerte/Staaltje): wit + blauwe border/tekst (VM-meting) */
html body .vs-button--secondary,
html body .vs-calculator__quote {
    background: #fff !important;
    border: 2px solid #324696 !important;
    color: #324696 !important;
}
html body .vs-button--secondary:hover,
html body .vs-calculator__quote:hover { background: #eef0f8 !important; color: #324696 !important; }
html body .wc-block-components-checkout-place-order-button { background: #62b959 !important; }
html body .wc-block-components-checkout-place-order-button:hover { background: #55a54c !important; }
html body .vs-sidecart__checkout { background: #62b959 !important; border-color: #62b959 !important; color: #fff !important; }
html body .vs-sidecart__checkout:hover { background: #55a54c !important; }
html body .vs-cpdp__cart .single_add_to_cart_button,
html body .vs-cpdp__cart button.button {
    background: #62b959 !important;
    color: #fff !important;
}
html body .vs-cpdp__cart .single_add_to_cart_button:hover { background: #55a54c !important; filter: none !important; }

/* ==========================================================================
   PDP: linkerkolom (galerij + "Maak je bestelling compleet") blijft plakken
   terwijl de langere rechterkolom doorscrollt; laat los zodra de rij op is
   (native sticky-gedrag binnen de grid-rij). Alleen desktop (>980px = het
   punt waar de kolommen stapelen). 142px = onderkant sticky header + marge.
   ========================================================================== */
@media (min-width: 981px) {
    .vs-cpdp__top { align-items: start; }
    .vs-cpdp__left { position: sticky; top: 142px; }
}

/* ---- Populaire categorieën: zes tegels met afbeelding (vloerenmarkt-model) ---- */
.vg-popcats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 18px;
}
.vg-popcat { display: block; text-decoration: none; color: inherit; text-align: center; }
.vg-popcat__img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #f4f5f7;
    border-radius: 12px;
    overflow: hidden;
}
.vg-popcat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.vg-popcat:hover .vg-popcat__img img { transform: scale(1.05); }
.vg-popcat__label { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; color: #111827; }
.vg-popcat:hover .vg-popcat__label { color: #324696; }
@media (max-width: 980px) { .vg-popcats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .vg-popcats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }