/*
 * B2B outlet-campagne — bestelpagina.
 *
 * Alles staat onder #gr-outlet zodat er niets naar de rest van de site lekt: de pagina
 * draait binnen het gewone thema, met de eigen header en footer van de site eromheen.
 *
 * --gro-barh wordt door het script gezet uit de gemeten hoogte van de bovenbalk. Die
 * hoogte hardcoderen ging op het concept mis zodra de balk op een smal scherm omsloeg
 * naar twee regels: de filters bleven op de oude offset staan en de productfoto's
 * schoven er half onderdoor.
 */

#gr-outlet {
    --gro-ink: #1C1A17;
    --gro-ink-60: #6B6660;
    --gro-ink-30: #B4AFA8;
    --gro-paper: #FFFFFF;
    --gro-sand: #F2EFE9;
    --gro-claim: #AD0000;
    --gro-rule: #E3DFD7;
    --gro-ui: 'Jost', system-ui, sans-serif;
    --gro-body: 'Inter', system-ui, sans-serif;
    --gro-display: 'Bosque', Georgia, serif;
    --gro-barh: 57px;

    background: var(--gro-paper);
    color: var(--gro-ink);
    font: 400 15px/1.55 var(--gro-body);
    -webkit-font-smoothing: antialiased;
}

#gr-outlet *,
#gr-outlet *::before,
#gr-outlet *::after { box-sizing: border-box }

#gr-outlet button { font: inherit; cursor: pointer }
#gr-outlet :focus-visible { outline: 2px solid var(--gro-ink); outline-offset: 2px }

/* ── Bovenbalk ──────────────────────────────────────────── */
/* top:0 en niet onder de sitekop: die scrollt weg terwijl zijn hoogte blijft gelden,
   wat een transparante strook achterliet waar de productfoto's doorheen kwamen. */
.gro-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 24px;
    padding: 14px 32px;
    background: var(--gro-paper);
    border-bottom: 1px solid var(--gro-rule);
}
.gro-bar__mark { font: 500 15px/1 var(--gro-ui); letter-spacing: .34em; text-transform: uppercase }
.gro-bar__tag,
.gro-bar__right {
    font: 400 11px/1 var(--gro-ui); letter-spacing: .18em;
    text-transform: uppercase; color: var(--gro-ink-60);
}
.gro-bar__right { margin-left: auto; display: flex; align-items: center; gap: 10px }

/* Taalwisselaar: duidelijk in beeld in de balk, niet de zwevende knop van TranslatePress. */
.gro-lang { margin-left: auto; display: flex; align-items: center; gap: 2px }
.gro-lang + .gro-bar__right { margin-left: 20px }
#gr-outlet .gro-lang a {
    padding: 5px 9px; border: 1px solid transparent; text-decoration: none;
    font: 400 11px/1 var(--gro-ui); letter-spacing: .14em;
    color: var(--gro-ink-60); transition: .15s;
}
#gr-outlet .gro-lang a:hover { color: var(--gro-ink); border-color: var(--gro-rule) }
#gr-outlet .gro-lang a[aria-current] { background: var(--gro-ink); border-color: var(--gro-ink); color: var(--gro-paper) }
.gro-bar__right b { font: 500 12px/1 var(--gro-ui); color: var(--gro-claim); letter-spacing: .1em }

/* ── Kop ────────────────────────────────────────────────── */
/*
 * Compact gehouden, en dat is een beslissing en geen smaakkwestie: dit is een BESTELpagina.
 * Wie hier komt weet al waarom hij komt (hij klikte op een persoonlijke link in een mail),
 * dus de kop moet in één oogopslag zeggen hoeveel korting er is en dan wegwezen. In de eerste
 * versie duwde hij de eerste productrij onder de vouw en bleef er rechts een leeg vlak over.
 * Nu staan de cijfers en de schaarste-melding samen in de rechterkolom, zodat die vol is en
 * de linkerkolom kort blijft.
 */
.gro-hero {
    max-width: 1560px; margin: 0 auto; padding: 34px 32px 26px;
    display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start;
}
.gro-eyebrow {
    font: 400 11px/1 var(--gro-ui); letter-spacing: .24em; text-transform: uppercase;
    color: var(--gro-ink-60); margin: 0 0 14px;
}
.gro-hero h1 {
    font: 400 clamp(30px, 3.4vw, 44px)/1.06 var(--gro-display);
    margin: 0 0 14px; max-width: 18ch; letter-spacing: -.005em;
}
.gro-hello {
    margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--gro-ink-60);
    padding-left: 12px; border-left: 2px solid var(--gro-claim);
}
.gro-hello[hidden] { display: none }
.gro-hello b { color: var(--gro-ink); font-weight: 600 }

.gro-lede { margin: 0; max-width: 58ch; font-size: 15.5px; line-height: 1.5; color: var(--gro-ink-60) }
.gro-vat {
    margin: 12px 0 0; max-width: 58ch; font-size: 13px; line-height: 1.45;
    color: var(--gro-ink-60); padding-left: 12px; border-left: 1px solid var(--gro-rule);
}

.gro-aside { display: grid; gap: 14px }

.gro-shared {
    margin: 0; padding: 13px 16px;
    border-left: 2px solid var(--gro-claim); background: var(--gro-sand);
    font-size: 13.5px; line-height: 1.5; color: var(--gro-ink);
}

.gro-figures {
    /* Drie kolommen sinds het kortingsvakje weg is: met 4 tegels was dit een 2x2, met 3 zou
       er rechtsonder een gat vallen. */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px;
    padding: 20px; background: var(--gro-sand);
}
.gro-fig__n { font: 400 30px/1 var(--gro-display); display: block }
.gro-fig__l {
    font: 400 10px/1.3 var(--gro-ui); letter-spacing: .18em; text-transform: uppercase;
    color: var(--gro-ink-60); margin-top: 7px; display: block;
}

/* ── Raster ─────────────────────────────────────────────── */
.gro-wrap {
    max-width: 1560px; margin: 0 auto; padding: 0 32px 90px;
    display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start;
}

.gro-filters {
    display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0 14px;
    position: sticky; top: var(--gro-barh); z-index: 25; background: var(--gro-paper);
}
.gro-chip {
    border: 1px solid var(--gro-rule); background: var(--gro-paper); border-radius: 0;
    padding: 7px 14px; font: 400 11px/1 var(--gro-ui); letter-spacing: .11em;
    text-transform: uppercase; color: var(--gro-ink-60); transition: .15s;
}
.gro-chip span { opacity: .5 }
.gro-chip:hover { border-color: var(--gro-ink-30); color: var(--gro-ink) }
.gro-chip[aria-pressed="true"] { background: var(--gro-ink); border-color: var(--gro-ink); color: var(--gro-paper) }

/* ── Lijst ──────────────────────────────────────────────── */
/* z-index 0 zet een stapelcontext om de rijen: zonder dat schoven de foto's over de
   sticky filterbalk heen in plaats van eronder. */
.gro-sheet { border-top: 1px solid var(--gro-rule); position: relative; z-index: 0 }

.gro-row {
    display: grid; grid-template-columns: 86px minmax(0, 1fr) 128px 96px 132px;
    gap: 20px; align-items: center; padding: 15px 0;
    border-bottom: 1px solid var(--gro-rule); transition: background .15s;
}
.gro-row:hover,
.gro-row.is-picked { background: var(--gro-sand) }
.gro-row[hidden] { display: none }

.gro-thumb { width: 86px; height: 86px; object-fit: cover; background: var(--gro-sand); display: block }

.gro-nm { font-size: 15px; font-weight: 500; margin: 0 0 4px; line-height: 1.3 }
.gro-meta {
    margin: 0; font: 400 11px/1.4 var(--gro-ui); letter-spacing: .07em;
    text-transform: uppercase; color: var(--gro-ink-60);
}
.gro-meta i { font-style: normal; color: var(--gro-ink-30); margin: 0 6px }
.gro-actions { display: flex; gap: 16px; margin-top: 7px; flex-wrap: wrap }

/*
 * Twee identieke, ingetogen links met een pijltje. Het #gr-outlet ervoor is nodig, niet
 * netheid: het thema geeft elke <button> een rand, een vulkleur en padding, en zonder die
 * specificiteit kreeg "View all images" een grijze knopdoos naast een kale tekstlink.
 */
#gr-outlet .gro-detail {
    display: inline-flex; align-items: baseline; gap: 6px;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--gro-ink-60); text-decoration: none;
    font: 400 10.5px/1 var(--gro-ui); letter-spacing: .1em; text-transform: uppercase;
    transition: color .15s;
}
#gr-outlet .gro-detail::before { content: '→'; color: var(--gro-ink-30); transition: color .15s }
#gr-outlet .gro-detail:hover { color: var(--gro-ink); background: none }
#gr-outlet .gro-detail:hover::before { color: var(--gro-ink) }
#gr-outlet .gro-detail span { text-decoration: underline; text-underline-offset: 3px }

/* ── Lichtbak ───────────────────────────────────────────── */
/*
 * De WordPress-adminbalk staat vast bovenaan het scherm en dekte de sluitknop af. De hele
 * lichtbak begint daarom onder die balk zodra hij er is -- niet enkel de knop, want anders
 * verdwijnt de bovenrand van de foto eronder.
 */
#gr-outlet .gro-lb {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(20, 18, 16, .95);
    display: grid; grid-template-rows: 1fr; place-items: center;
    padding: 64px 20px 20px;
}
.admin-bar #gr-outlet .gro-lb { top: 32px }
#gr-outlet .gro-lb[hidden] { display: none }

/* Pijlen tegen de foto, niet tegen de schermrand: rechts zit een vaste sitecta. */
#gr-outlet .gro-lb__stage {
    display: grid; grid-template-columns: auto minmax(0, auto) auto;
    align-items: center; gap: 4px; max-width: 100%;
}
#gr-outlet .gro-lb__stage[hidden] { display: none }

#gr-outlet .gro-lb__box { margin: 0; min-width: 0; text-align: center }
#gr-outlet .gro-lb__box img {
    max-width: 100%; max-height: 74vh; object-fit: contain; display: block; margin: 0 auto;
    background: #fff;
}
#gr-outlet .gro-lb__box figcaption {
    margin-top: 16px; display: flex; justify-content: center; gap: 16px;
    align-items: baseline; flex-wrap: wrap;
    font: 400 12px/1.4 var(--gro-ui); letter-spacing: .12em; text-transform: uppercase;
    color: #fff;
}
#gr-outlet .gro-lb__count { color: rgba(255, 255, 255, .5) }

#gr-outlet .gro-lb__loading {
    margin: 0; text-align: center; color: rgba(255, 255, 255, .6);
    font: 400 12px/1 var(--gro-ui); letter-spacing: .12em; text-transform: uppercase;
}
#gr-outlet .gro-lb__loading[hidden] { display: none }

#gr-outlet .gro-lb__nav {
    background: none; border: 0; padding: 0; border-radius: 0;
    width: 44px; height: 64px; font-size: 40px; line-height: 1;
    color: #fff; opacity: .55; transition: opacity .15s;
}
#gr-outlet .gro-lb__nav:hover { opacity: 1; background: none }
#gr-outlet .gro-lb__nav[hidden] { visibility: hidden; display: block }

/* Een echte knop met een woord erbij, geen kruisje dat je moet raden. */
#gr-outlet .gro-lb__close {
    position: absolute; top: 16px; right: 20px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0;
    background: none; color: #fff; transition: .15s;
}
#gr-outlet .gro-lb__close:hover { background: #fff; color: var(--gro-ink); border-color: #fff }
#gr-outlet .gro-lb__close span[aria-hidden] { font-size: 20px; line-height: 1 }
#gr-outlet .gro-lb__closetxt {
    font: 400 11px/1 var(--gro-ui); letter-spacing: .14em; text-transform: uppercase;
}

/* Zolang de lichtbak open staat, mag de lijst eronder niet meescrollen. */
html.gro-lb-open, html.gro-lb-open body { overflow: hidden }

@media (max-width: 680px) {
    #gr-outlet .gro-lb { padding: 60px 8px 16px }
    #gr-outlet .gro-lb__nav { width: 30px; font-size: 30px }
    #gr-outlet .gro-lb__box img { max-height: 62vh }
    #gr-outlet .gro-lb__closetxt { display: none }
}
@media (max-width: 782px) {
    .admin-bar #gr-outlet .gro-lb { top: 46px }
}

/* ── Prijs, voorraad, aantal ────────────────────────────── */
.gro-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.gro-price s { display: block; color: var(--gro-ink-30); font-size: 12.5px; text-decoration-thickness: 1px }
.gro-price b { display: block; font-size: 16.5px; font-weight: 600 }
.gro-price i {
    display: block; font-style: normal; margin-top: 2px;
    font: 400 9.5px/1 var(--gro-ui); letter-spacing: .1em;
    text-transform: uppercase; color: var(--gro-ink-30);
}

.gro-stockcell { text-align: right }
.gro-stock {
    font: 400 11px/1.35 var(--gro-ui); letter-spacing: .09em;
    text-transform: uppercase; color: var(--gro-ink-60);
}
.gro-stock.is-low { color: var(--gro-claim) }
.gro-hallmark {
    display: inline-block; border: 1px solid var(--gro-claim); color: var(--gro-claim);
    padding: 3px 7px; font: 400 10px/1 var(--gro-ui); letter-spacing: .14em; text-transform: uppercase;
}

/* Het #gr-outlet ervoor is nodig: het thema geeft elke button en input een eigen rand,
   vulkleur en afronding, en die wint anders van een kale klasseselector. */
.gro-step { display: flex; justify-content: flex-end; align-items: center }
#gr-outlet .gro-step button {
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--gro-rule); border-radius: 0; background: var(--gro-paper);
    font-size: 15px; line-height: 1; color: var(--gro-ink);
    display: grid; place-items: center; transition: .12s;
}
#gr-outlet .gro-step button:hover:not(:disabled) { border-color: var(--gro-ink); background: var(--gro-ink); color: var(--gro-paper) }
#gr-outlet .gro-step button:disabled { color: var(--gro-ink-30); background: var(--gro-paper); cursor: not-allowed }
#gr-outlet .gro-step input {
    width: 46px; height: 34px; padding: 0;
    border: 1px solid var(--gro-rule); border-left: 0; border-right: 0; border-radius: 0;
    text-align: center; font: 500 14px/1 var(--gro-body); font-variant-numeric: tabular-nums;
    color: var(--gro-ink); background: var(--gro-paper);
}
.gro-step input::-webkit-outer-spin-button,
.gro-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.gro-step input[type=number] { -moz-appearance: textfield }

.gro-empty { padding: 56px 0; text-align: center; color: var(--gro-ink-60); font-size: 14.5px }

/* ── Orderblok ──────────────────────────────────────────── */
.gro-pad {
    position: sticky; top: calc(var(--gro-barh) + 22px);
    border: 1px solid var(--gro-ink); background: var(--gro-paper);
}
.gro-pad__hd { padding: 20px 22px 16px; border-bottom: 1px solid var(--gro-rule) }
.gro-pad__hd h2 { font: 400 21px/1.15 var(--gro-display); margin: 0 0 5px }
.gro-pad__count {
    margin: 0; font: 400 11px/1.4 var(--gro-ui); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gro-ink-60);
}

/* ── Wie ben je ─────────────────────────────────────────── */
.gro-who {
    padding: 16px 22px; background: var(--gro-sand);
    border-bottom: 1px solid var(--gro-rule); font-size: 13.5px; line-height: 1.5;
}
.gro-who[hidden] { display: none }
.gro-who b { display: block; font-weight: 600; margin-bottom: 2px }
.gro-who em { display: block; font-style: normal }
.gro-who em:empty { display: none }
.gro-who span { display: block; color: var(--gro-ink-60); font-size: 12.5px }
/* Zonder deze regel wint de display:block hierboven van het hidden-attribuut en houdt de
   lege regel ruimte bezet -- dezelfde reden als de :empty-regel bij em hierboven. */
.gro-who__disc[hidden] { display: none }
.gro-who__disc { margin-top: 4px; color: var(--gro-ink); font-weight: 500 }
#gr-outlet .gro-who__edit {
    background: none; border: 0; padding: 0; margin-top: 9px;
    font: 400 11px/1 var(--gro-ui); letter-spacing: .1em; text-transform: uppercase;
    color: var(--gro-ink-60); text-decoration: underline; text-underline-offset: 3px;
}
#gr-outlet .gro-who__edit:hover { color: var(--gro-ink); background: none }

.gro-form { padding: 16px 22px; background: var(--gro-sand); border-bottom: 1px solid var(--gro-rule) }
.gro-form[hidden] { display: none }
.gro-form__intro { margin: 0 0 12px; font-size: 13px; color: var(--gro-ink-60); line-height: 1.5 }
.gro-form label { display: block; margin-bottom: 10px }
.gro-form label span {
    display: block; margin-bottom: 4px;
    font: 400 10.5px/1 var(--gro-ui); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gro-ink-60);
}
#gr-outlet .gro-form input {
    width: 100%; padding: 9px 11px; border: 1px solid var(--gro-rule); border-radius: 0;
    background: var(--gro-paper); font: 400 14px/1.3 var(--gro-body); color: var(--gro-ink);
}
#gr-outlet .gro-form input:focus { border-color: var(--gro-ink); outline: 0 }

.gro-error {
    margin: 0; padding: 12px 22px; background: #FCF6F6;
    border-top: 1px solid var(--gro-claim); color: var(--gro-claim);
    font-size: 13px; line-height: 1.5;
}
.gro-error[hidden] { display: none }

/* ── Regels in het orderblok ────────────────────────────── */
.gro-lines { max-height: min(34vh, 300px); overflow: auto }
.gro-lines:not(.has-lines) { max-height: none; overflow: visible }
.gro-pad__empty { margin: 0; padding: 30px 22px; color: var(--gro-ink-60); font-size: 13.5px; line-height: 1.5 }

.gro-line {
    display: grid; grid-template-columns: 1fr auto; gap: 12px;
    margin: 0 22px; padding: 11px 0; border-bottom: 1px solid var(--gro-rule); font-size: 13.5px;
}
.gro-line:last-child { border-bottom: 0 }
.gro-line__n { line-height: 1.35 }
.gro-line__q {
    font: 400 11px/1.4 var(--gro-ui); letter-spacing: .08em;
    text-transform: uppercase; color: var(--gro-ink-60); margin-top: 3px;
}
.gro-line__p { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap }
#gr-outlet .gro-line__x {
    display: block; width: 100%; margin-top: 4px; padding: 0; border: 0; background: none;
    font: 400 10.5px/1 var(--gro-ui); letter-spacing: .1em; text-transform: uppercase;
    color: var(--gro-ink-30); text-align: right;
}
#gr-outlet .gro-line__x:hover { color: var(--gro-claim); background: none }

.gro-tot {
    padding: 17px 22px; border-top: 1px solid var(--gro-ink);
    display: flex; justify-content: space-between; align-items: baseline;
}
.gro-tot span { font: 400 11px/1 var(--gro-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gro-ink-60) }
.gro-tot b { font: 400 27px/1 var(--gro-display); font-variant-numeric: tabular-nums }
.gro-saved { margin: 0; padding: 0 22px 16px; font-size: 12.5px; color: var(--gro-claim) }

/* Transport, bewust opvallend en niet in de kleine lettertjes. */
.gro-transport {
    margin: 0 22px 18px; padding: 14px 16px;
    border: 1px solid var(--gro-claim); background: #FCF6F6;
}
.gro-transport p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gro-ink) }
.gro-transport__hd {
    font: 500 11px/1 var(--gro-ui) !important; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gro-claim); margin-bottom: 7px !important;
}

#gr-outlet .gro-send {
    display: block; width: 100%; padding: 16px; border: 0; border-radius: 0;
    background: var(--gro-ink); color: var(--gro-paper);
    font: 400 12px/1 var(--gro-ui); letter-spacing: .16em; text-transform: uppercase; transition: .15s;
}
#gr-outlet .gro-send:hover:not(:disabled) { background: var(--gro-claim) }
#gr-outlet .gro-send:disabled { background: var(--gro-ink-30); cursor: not-allowed }
.gro-fine { margin: 0; padding: 13px 22px 18px; font-size: 11.5px; line-height: 1.5; color: var(--gro-ink-60) }

/* ── Bevestiging na het verzenden ───────────────────────── */
.gro-sent {
    position: fixed; inset: 0; z-index: 200; background: rgba(28, 26, 23, .55);
    display: grid; place-items: center; padding: 24px;
}
.gro-sent[hidden] { display: none }
.gro-sent__box { background: var(--gro-paper); max-width: 480px; width: 100%; padding: 38px 40px }
.gro-sent__box h3 { font: 400 27px/1.15 var(--gro-display); margin: 0 0 10px }
.gro-sent__box p { margin: 0 0 14px; font-size: 14.5px; color: var(--gro-ink-60); line-height: 1.6 }
.gro-sent__ref {
    font: 400 12px/1 var(--gro-ui) !important; letter-spacing: .16em;
    color: var(--gro-claim) !important; margin-bottom: 18px !important;
}
#gr-outlet .gro-sent__close {
    padding: 13px 24px; border: 0; border-radius: 0;
    background: var(--gro-ink); color: var(--gro-paper);
    font: 400 11px/1 var(--gro-ui); letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 1080px) {
    .gro-hero,
    .gro-wrap { grid-template-columns: 1fr; gap: 0 }
    .gro-aside { margin-top: 26px }
    .gro-pad { position: static; margin-top: 32px }
    .gro-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; row-gap: 10px }
    .gro-thumb { width: 60px; height: 60px }
    .gro-price { grid-column: 3 }
    .gro-stockcell { grid-column: 2; text-align: left }
    .gro-step { grid-column: 3 }
    .gro-filters { position: static }
}

@media (max-width: 680px) {
    .gro-bar { gap: 10px; padding: 12px 18px; flex-wrap: wrap }
    .gro-bar__tag { display: none }
    #gr-outlet .gro-lang a { padding: 5px 7px }
    .gro-hero { padding: 34px 18px 26px }
    .gro-wrap { padding: 0 18px 60px }
    .gro-eyebrow { letter-spacing: .16em }
    .gro-figures { gap: 22px 26px; padding: 20px }
    .gro-fig__n { font-size: 28px }
}

@media (prefers-reduced-motion: reduce) {
    #gr-outlet * { transition: none !important }
}

/* ── Offertepagina ──────────────────────────────────────────────────────────
 *
 * Zelfde grid, andere kop: hier staat geen eigen bovenbalk (die hoort bij de campagne),
 * dus de sticky offset gaat naar nul. En 258 artikelen over 25 categorieën passen niet in
 * een chipsbalk — vandaar een zoekveld met drie keuzelijsten.
 */
#gr-outlet.gro--quote { --gro-barh: 0px }
.gro--quote .gro-wrap { padding-top: 8px }

.gro-filters--bar {
    gap: 10px; align-items: center;
    border-bottom: 1px solid var(--gro-rule);
}
.gro-q, .gro-sel {
    border: 1px solid var(--gro-rule); background: var(--gro-paper); border-radius: 0;
    padding: 9px 12px; font: 400 13px/1.2 var(--gro-ui); color: var(--gro-ink);
    height: 36px; max-width: 100%;
}
.gro-q { flex: 1 1 200px; min-width: 0 }

/*
 * De keuzelijsten krimpen mee. Zonder max-width rekt de kleurlijst zich uit tot de breedte
 * van haar langste optie (bv. "BISCOTTI+CREAMSTONE (3)") en duwt ze "All materials" naar
 * een tweede regel terwijl er ruimte zat is.
 */
.gro-sel { flex: 0 1 190px; min-width: 0; max-width: 190px; text-overflow: ellipsis }
.gro-q:focus, .gro-sel:focus { outline: none; border-color: var(--gro-ink) }
.gro-q::placeholder { color: var(--gro-ink-30) }

.gro-reset {
    border: 0; background: none; padding: 0 4px; color: var(--gro-ink-60);
    font: 400 11px/1 var(--gro-ui); letter-spacing: .11em; text-transform: uppercase;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.gro-reset:hover { color: var(--gro-ink) }

/*
 * Wat ONDER het grid staat (de kop en het formulier).
 *
 * Het grid zit in `.gro-wrap` met max-width 1560 px; een formulier dat daarnaast in de kale
 * paginainhoud staat heeft die begrenzing niet en loopt over de volle schermbreedte. Vandaar
 * deze omhulling in de paginainhoud.
 *
 * ⚠️ Bewust GEEN regel op `.gform_wrapper` zonder omhulling: dit stylesheet laadt alleen op
 * een pagina met het offertegrid, maar op de echte offertepagina zit het formulier in een
 * Elementor-container die zijn eigen breedte en padding al zet -- dan zou je die dubbel doen.
 */
.gro-below {
    max-width: 1560px; margin: 0 auto; padding: 0 32px 90px;
}
.gro-below > h2 {
    margin: 0 0 18px;
}

/*
 * De paginakop. Het thema rendert de paginatitel NIET (geen `entry-title`), dus zonder
 * Elementor heeft de pagina geen <h1> meer. Die staat daarom in de paginainhoud, in dezelfde
 * omhulling zodat hij met het grid uitlijnt — maar zonder de onderruimte, anders duwt hij de
 * lijst 90 px naar beneden.
 */
.gro-below--kop { padding-bottom: 0 }
.gro-below > h1 { margin: 0 0 4px }
/* Een formulier van 1500 px breed leest niet; twee kolommen op 860 px wel. */
.gro-below .gform_wrapper {
    max-width: 860px; margin: 0;
}

/*
 * Het Order-veld draagt alleen id's en aantallen (`12345:2`) -- dat is niets voor een
 * bezoeker. De textarea blijft wél in het formulier staan: Gravity Forms valideert erop en
 * de server schrijft er bij het verzenden de echte regels in. Enkel de samenvatting eronder
 * is zichtbaar.
 */
.gro-below .gform_wrapper textarea[name="input_5"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gro-order {
    margin: 0; padding: 13px 16px; border: 1px solid var(--gro-rule, #E3DFD7);
    background: #FAF9F7; font: 400 14px/1.4 var(--gro-ui, system-ui); color: #6B6660;
}
.gro-order.is-gevuld { color: #1C1A17; background: var(--gro-paper, #fff) }

/* De sprong naar het formulier: zelfde vorm als de verzendknop van de campagne. */
#gr-outlet .gro-go {
    display: block; width: 100%; padding: 16px; border: 0; border-radius: 0;
    background: var(--gro-ink); color: var(--gro-paper); text-align: center;
    font: 400 12px/1 var(--gro-ui); letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; transition: .15s;
}
#gr-outlet .gro-go:hover { background: var(--gro-claim); color: var(--gro-paper) }
#gr-outlet .gro-go[hidden] { display: none }

/* Het formulier krijgt focus na de sprong; zonder dit tekent de browser er een rand omheen. */
.gform_wrapper:focus { outline: none }

/*
 * ⚠️ Scoped op .gro--quote. `.gro-fine` bestaat al voor de campagnepagina (regel 406) en die
 * mag hier niets van merken — een ongescopete regel verderop in het bestand wint van de
 * eerdere en verandert dus stil de kleine lettertjes op /btb-outlet/.
 */
.gro--quote .gro-fine {
    margin: 0; padding: 13px 22px 18px; font: 400 11.5px/1.5 var(--gro-ui); color: var(--gro-ink-60);
}

@media (max-width: 900px) {
    .gro-filters--bar { flex-wrap: wrap }
    .gro-q { flex: 1 1 100% }
    .gro-sel { flex: 1 1 calc(33% - 7px) }
}