/* Project overrides and styles on top of the vendored theme. */

/* Tekstkleuren: twee gedempte grijzen die allebei WCAG AA halen op wit.
   #6a6a6a = 5,4:1 voor secundaire tekst, #767676 = 4,5:1 voor de stilste regels.

   Hiervoor stond hier #878787 (3,6:1), #888 (3,5:1), #999 (2,9:1) en zelfs #aaa (2,3:1).
   Die eerste is de niet-ingevulde skinkleur van het vendorthema, en die is via
   kopieerwerk in eenendertig eigen regels beland. Geen daarvan haalde de norm voor
   lopende tekst; op een scherm met wat omgevingslicht las een deel gewoon niet. */

/* Main nav: geometric Jost (echoing the spaced "DESIGNED BY HOET" wordmark),
   lighter weight, muted grey that goes black on the active/hover item. */
.navigation__item > a { font-family: 'Jost', 'Quicksand', sans-serif; text-transform: uppercase; letter-spacing: .13em; font-weight: 400; color: #6a6a6a; }
header.header nav .navigation .navigation__item.active > a,
header.header nav .navigation .navigation__item > a:hover { color: #111; }
/* True-centre the main nav in the header: pull the nav bar out of the grid and
   centre it absolutely (logo stays left, language/login stay right). */
@media (min-width: 769px) {
    header.header .header__top { position: relative; }
    header.header .header__top nav.navigation__wrap {
        position: absolute; left: 50%; top: 50%;
        /* Twaalf pixels lager dan het midden. De knoppenrij erboven hangt als eigen
           absolute laag over de header en schuift dus niet mee; op het echte midden
           raakte ze elkaar. */
        transform: translate(-50%, calc(-50% + 12px));
        width: auto; max-width: none; white-space: nowrap; margin: 0;
    }
    header.header .header__top .navigation { white-space: nowrap; }
    header.header .header__top .navigation .navigation__item { white-space: nowrap; }
}

/* Language switcher: a custom dropdown (the native select can't be styled). */
.lang-dd { position: relative; display: inline-block; }
.lang-dd__toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #d5d5d5; border-radius: 3px; padding: .32rem .7rem; font: inherit; font-size: .8rem; color: #444; background: #fff; cursor: pointer; }
.lang-dd__toggle .fa { font-size: .7rem; color: #767676; }
.lang-dd:hover .lang-dd__toggle, .lang-dd:focus-within .lang-dd__toggle { border-color: #000; color: #000; }
.lang-dd__menu { position: absolute; top: 100%; left: 0; margin: .35rem 0 0; padding: .3rem 0; min-width: 100%; list-style: none; background: #fff; border: 1px solid #e3e3e3; box-shadow: 0 6px 18px rgba(0,0,0,.09); border-radius: 3px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s; z-index: 400; }
.lang-dd:hover .lang-dd__menu, .lang-dd:focus-within .lang-dd__menu { opacity: 1; visibility: visible; transform: none; }
.lang-dd__item { display: block; padding: .38rem 1.1rem; font-size: .8rem; color: #555; }
.lang-dd__item:hover { background: #f4f4f4; color: #000; }
.lang-dd__item.is-active { color: #000; font-weight: 600; }

/* Visually hidden but readable by screen readers and search engines. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* No automatic hyphenation — keep words whole across line breaks, like the live
   site (the theme sets hyphens:auto on p/.page-content, which splits words). */
p, .page-content { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }

/* Mobile header bar is always white, so always use the dark logo there
   (the theme otherwise shows the white logo until the page is scrolled). */
.rh-mobile img.rh-logo-white { display: none; }
.rh-mobile img.rh-logo-dark { display: block; }

/* Image lightbox (frame "Ontdek"). */
.cl-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 5vh 5vw; }
.cl-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; box-shadow: 0 4px 40px rgba(0,0,0,.5); }
.cl-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.cl-lightbox__nav:hover { background: rgba(255,255,255,.28); }
.cl-lightbox__nav--prev { left: 3vw; }
.cl-lightbox__nav--next { right: 3vw; }

/* Hero video audio toggle. */
.rb-hero__audio { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 6; width: 46px; height: 46px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.65); background: rgba(0,0,0,.35); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: background .2s; }
.rb-hero__audio:hover, .rb-hero__audio.is-on { background: rgba(0,0,0,.6); }

/* Cookie consent banner. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #fff;
    border-top: 1px solid #ccc; box-shadow: 0 -2px 14px rgba(0,0,0,.09); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex;
    gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-banner__text { margin: 0; font-size: .9rem; line-height: 1.4; }
.cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; }

/* Admin CMS chip (links to the Sanity Studio) — admin dealers only. */
.admin-cms { position: fixed; top: 0; right: 0; z-index: 9500; background: #878787; color: #fff;
    padding: .55rem 1.1rem; font-size: .8rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; border-bottom-left-radius: 3px; }
.admin-cms:hover { background: #6f6f6f; color: #fff; }

/* Cabrio home fade slider (vanilla). */
.main-slider .slider { position: relative; width: 100%; aspect-ratio: 946 / 385; overflow: hidden; }
.main-slider .slider__item { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.main-slider .slider__item.is-active { opacity: 1; }
.main-slider .main-slide, .main-slider .main-slide__picture { width: 100%; height: 100%; }
.main-slider .main-slide__picture { background-size: cover; background-position: center center; background-repeat: no-repeat; }
@media (max-width: 768px) { .main-slider .slider { aspect-ratio: 4 / 3; } }
/* ---- Public frame detail page ----
   Top row (back link + collection name) aligns to the two content columns; the
   info column stretches to the image height so the CTA buttons sit at the bottom. */
.fd__top { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:baseline; margin-bottom:1.6rem; }
.fd__top .fd__back { margin-bottom:0; }
.fd__top .fd__eyebrow { margin-bottom:0; }
.fd__back { display:inline-block; font-size:.85rem; letter-spacing:.05em; color:#6a6a6a; margin-bottom:1.6rem; }
.fd__back:hover { color:#000; }
.fd__inner { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:stretch; }
.fd__info { display:flex; flex-direction:column; }
.fd__main img { width:100%; display:block; background:#f5f3ee; cursor:zoom-in; }
.fd__thumbs { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.fd__thumb { width:80px; height:62px; padding:0; border:1px solid #e2ded5; background:none; cursor:pointer; overflow:hidden; opacity:.65; transition:.25s; }
.fd__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fd__thumb.is-active, .fd__thumb:hover { opacity:1; border-color:#000; }
.fd__eyebrow { display:block; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:#5a5a5a; margin-bottom:.6rem; }
.fd__title { font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; margin:0 0 .4rem; }
.fd__info .fd__title { margin-bottom:3.2rem; }
.fd__codes { font-size:.85rem; color:#6a6a6a; letter-spacing:.04em; margin-bottom:2rem; }
.fd__specs { margin:0 0 2rem; border-top:1px solid #e2ded5; }
.fd__spec { display:grid; grid-template-columns:140px 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid #e2ded5; }
.fd__spec dt { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#6a6a6a; align-self:center; }
.fd__spec dd { margin:0; font-size:1rem; }
.fd__label { display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#6a6a6a; margin-bottom:.9rem; }
.fd__sizes { margin:1.2rem 0 0; }
.fd__colors { margin:2.6rem 0 2.8rem; }
.fd__colors .fd__label { margin-bottom:1.2rem; }
.fd__swatches { display:flex; flex-wrap:wrap; gap:1.1rem 1.35rem; }
.fd__sw { display:flex; flex-direction:column; align-items:center; gap:.45rem; width:78px; text-align:center; }
.fd__sw i { width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:block; }
.fd__sw small { font-size:.65rem; color:#6a6a6a; line-height:1.2; }
.fd__badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; }
.fd__badge { font-size:.78rem; letter-spacing:.03em; border:1px solid #e2ded5; border-radius:40px; padding:.5rem 1rem; color:#444; }
.fd__badge .fa { color:#000; margin-right:.35rem; font-size:.68rem; }
.fd__cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:auto; padding-top:1.5rem; }
.fd__cta .btn { flex:1; text-align:center; background:transparent; color:#222; border:1px solid #cfcfcf; border-radius:0; font-weight:400; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; padding:.95rem 1.7rem; transition:border-color .2s, color .2s; }
.fd__cta .btn:hover { background:transparent; border-color:#222; color:#000; }
@media (max-width:820px) {
    .fd__inner { grid-template-columns:1fr; }
    .fd__top { grid-template-columns:1fr; gap:.4rem; margin-bottom:1rem; }
}

/* Collection grid: show the whole frame with whitespace (like the live thumbs), instead of a tight crop */
.collection__pic--fit { background-size: contain; background-color: #fff; }

/* Verkooppunten grid: roomier than the live site — comfortable outer margin instead
   of near edge-to-edge, wider gutters between cards, and more padding inside them. */
@media (min-width: 769px) {
    /* Keep the grid aligned to the title/nav container width (1200px), not
       edge-to-edge. Needs the extra class to beat the theme's max-width:2000px. */
    .sales-points.sales-points--new .location-items { max-width: 1200px; margin: 2.5rem auto 3.5rem; padding: 0 2rem; }
    .sales-points .location-items .location__item-container { padding: .75rem; }
    .sales-points .location-items .location__item { padding: 2rem 1.5rem; }
}

/* Sticky footer: on short pages, push the footer to the bottom of the viewport. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > footer { margin-top: auto; }

/* Footer: full-width grey band on every page — the live site only paints it
   page-wide on the homepage (body[data-page='home']). */
footer { background: #d7d6d6; }

/* Profiel-sidebar: keep the grey panel from collapsing on short pages. */
@media (min-width: 769px) {
    .main-page { min-height: 420px; }
}

/* Uitloggen in the header, as a quiet text link after the top-btn chips. */
.top-info .top-logout { display: inline-block; vertical-align: middle; margin-left: .75rem; font-size: .8rem; color: #6a6a6a; }
.top-info .top-logout:hover { color: #000; text-decoration: underline; }

/* Footer: roomier and lighter, no '00s pipe separators or dated icons. */
footer .copy-bar { padding: 2.3rem 0; }
/* The homepage is short (just the slider), so the footer shows right away —
   keep it compact there instead of a tall grey band. */
body[data-page='home'] footer .copy-bar { padding: 1rem 0; }
/* Keep the whole homepage (slider + footer) within one viewport: let the slider
   fill exactly the space between the header and footer via flexbox, whatever
   their height. The slide crops via background cover, so no distortion.

   Het `height: auto` hieronder is het hele punt, en het moest op alle drie de
   niveaus. Het thema geeft .main-slider-wrap én .main-slider een vaste
   `height: var(--slider-height)`, en die variabele is `calc(100vh - 155px)`:
   een gok van 155px voor de header. Hier is de header 120px en de footer 52px,
   samen 172, dus stak de pagina er 17px bovenuit en zakte de footer precies dat
   stukje onder de vouw. Groeien loste dat niet op: `body` heeft alleen een
   min-height en dus geen vaste hoogte om ruimte uit te verdelen, waardoor flex
   wel kan groeien maar nooit krimpen. Een tweede beperking erbovenop stapelen
   zou de gok laten staan; de gok zelf weghalen laat de opbouw weer rekenen met
   de echte header en footer. Gemeten op 1440x700, 1440x900, 1920x1200 en
   820x1180: overschot nul, footer sluit exact op de onderrand. */
@media (min-width: 769px) {
    body[data-page='home'] .page-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
    body[data-page='home'] .main-slider-wrap { flex: 1; display: flex; min-height: 0; height: auto; }
    body[data-page='home'] .main-slider { flex: 1; display: flex; min-height: 0; height: auto; }
    body[data-page='home'] .main-slider .slider { flex: 1; min-height: 0; height: auto; max-height: none; aspect-ratio: auto; }
}
footer .copy-bar .footer-links .footer__link:before { display: none; }
footer .copy-bar .footer-links .footer__link { padding: 0 1.1rem; font-size: .92rem; }
footer .copy-bar .footer-links .footer__link:first-child { padding-left: 0; }
footer .copy-bar .footer-links .footer__link a,
footer .copy-bar .footer-links .footer__link span { color: #666; letter-spacing: .01em; }
footer .copy-bar .footer-links .footer__link a:hover { color: #000; }

/* Footer social icons: clean inline SVGs, on one line at the same height. */
.copy-bar .footer-socials { display: flex; justify-content: flex-end; align-items: center; gap: 1.3rem; }
.copy-bar .footer-socials a { display: inline-flex; align-items: center; color: #6a6a6a; transition: color .2s; }
.copy-bar .footer-socials a:hover { color: #000; }
.copy-bar .footer-socials svg { width: 18px; height: 18px; display: block; }
@media (max-width: 768px) { .copy-bar .footer-socials { justify-content: center; margin-top: 1rem; } }

/* Contact "Ik ben een" radios: compact and side-by-side. */
.kind-field .kind-options { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .3rem; }
.kind-field .radioinput input[type="radio"] + label { padding: .45rem 0 .45rem 2rem; }
.kind-field .radioinput input[type="radio"] + label span { left: 0; }

/* Winkelmandje: quantity box + red trash, aligned columns. */
.overview-table.cart .cart-col-qty { width: 110px; text-align: center; vertical-align: middle; }
.overview-table.cart .cart-col-opt { width: 150px; text-align: left; vertical-align: middle; }
/* De kolomkop begint waar de acties beginnen. De th van het thema heeft geen
   linkerpadding en de td wel, dus stond het woord OPTIES 16px links van wat eronder
   staat. */
.overview-table.cart th.cart-col-opt { padding-left: 16px; }
.overview-table.cart td.cart-col-qty, .overview-table.cart td.cart-col-opt { vertical-align: middle; }
.cart .cart-qty { display: inline-block; width: 64px; min-width: 56px; padding: .5rem .75rem; border: 1px solid #CCC; border-radius: 3px; text-align: center; font: inherit; }
.cart .cart-qty-form { margin: 0; }
/* Remark + engraving in a grey band below the item, like live. */
.cart .cart-item__extra { display: flex; gap: 3rem; flex-wrap: wrap; background: #f5f5f5; padding: 1rem 1.25rem; margin-top: 1rem; }
.cart .cart-item__extra strong { font-weight: 600; }
/* De twee acties van een regel staan onder elkaar in de kolom Opties, met dezelfde
   vorm. "Aanpassen" hing eerder aan de titel en "Verwijderen" stond hier: twee
   dingen die hetzelfde doen op twee plaatsen, waarvan er één in de kolom stond die
   er de naam van draagt. Beide met hun woord erbij en niet enkel een pictogram: dit
   scherm wordt af en toe gebruikt, en dan is een prullenbak wel te raden maar een
   potlood niet. */
/* Ruim uit elkaar, en elk met een eigen tikvlak. Ze stonden op een halve regel van
   elkaar met klikbare vlakken die elkaar bijna raakten, terwijl de tweede knop
   onomkeerbaar is: een duim die 4px mist wist een montuur dat je net had
   samengesteld. De lege strook ertussen is nu groter dan de knoppen zelf hoog zijn. */
.cart .cart-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.cart .cart-acties form { margin: 0; }
.cart .cart-actie { display: inline-flex; align-items: center; border: none; background: none;
    padding: .45rem .6rem .45rem 0; cursor: pointer; font: inherit; font-size: .88rem;
    color: #6a6a6a; white-space: nowrap; }
.cart .cart-actie:hover { color: #000; }
.cart .cart-actie--weg { color: #a8261c; }
.cart .cart-actie--weg:hover { color: #7d1c15; }

/* De melding na een verwijdering, met de weg terug erin. */
.cart-undo { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 0; padding: .8rem 1rem;
    background: #f6f6f6; color: #4a4a4a; font-size: .9rem; }
.cart-undo form { margin: 0; }
.cart-undo__knop { border: none; background: none; padding: 0; cursor: pointer; font: inherit;
    font-size: .9rem; color: #000; text-decoration: underline; text-underline-offset: 3px; }
.cart-undo--terug { background: #f1f6f2; color: #2e6b46; }

/* -------------------------------------------------------------------------
   BESTELWEERGAVE (bevestiging + het detailscherm uit het besteloverzicht)

   Deze pagina stond vol inline-stijlen, en dat is precies waarom ze afweek van de
   schermen ernaast: haar kaarten hadden een andere randkleur (#e5e5e5 tegen
   #e0e0e0), een afronding die nergens anders voorkomt, en een kleinere padding dan
   de gegevenskaart in het winkelmandje. Eén kaartvorm nu, gedeeld met die kaart, en
   dezelfde bestelregel als in het mandje.
* ------------------------------------------------------------------------- */
.dealer-kaart { border: 1px solid #e0e0e0; padding: 2rem 2.25rem; margin: 0 0 2rem; }
.dealer-kaart .dealer-kop { margin: 0 0 1.2rem; }
.dealer-kaart__tekst { white-space: pre-line; color: #4a4a4a; }

.bevestiging__meta { color: #6a6a6a; margin: 0 0 2rem; }
.bevestiging__dank { background: #f6f6f6; padding: 1.6rem 2.25rem; margin: 0 0 2rem; color: #4a4a4a; }

.besteltabel { width: 100%; border-collapse: collapse; border-top: 1px solid #f0ede8; }
.besteltabel__pic { width: 110px; padding: 1.2rem 1.2rem 1.2rem 0; }
.besteltabel__pic img { display: block; width: 90px; height: auto; }
.besteltabel td { padding: 1.2rem 0; vertical-align: top; }
.besteltabel__naam { font-weight: 600; margin: 0 0 .4rem; }
.besteltabel__naam span { color: #6a6a6a; font-weight: 400; }
.besteltabel__opties { color: #4a4a4a; line-height: 1.7; }
.besteltabel__opties span { color: #6a6a6a; }
.besteltabel__opmerking { margin-top: .5rem; color: #4a4a4a; }

/* Een bericht van het merk bij deze bestelling. */
.bericht { border-left: 2px solid #e2ded5; padding: 0 0 0 1rem; margin: 0 0 1.2rem; }
.bericht:last-child { margin-bottom: 0; }
.bericht__tekst { white-space: pre-line; }
.bericht__wie { margin: .4rem 0 0; color: #6a6a6a; font-size: .82rem; }
.bericht__hint { margin: .4rem 0 .8rem; color: #6a6a6a; font-size: .82rem; }
/* Stond op #878787, de skinkleur, en dat is 3,6:1 op wit. */
.bericht__toggle { cursor: pointer; color: #6a6a6a; font-size: .82rem; }
.bericht__toggle:hover { color: #000; }

/* Single-option finish shown as static text (no dropdown). */
.field-static { margin: 0; line-height: 38px; }
.order__form__select .field-static { font-weight: 500; }

/* Checkout overview "Uw gegevens" card: roomy, aligned label/value columns. */
.dealer-card { border: 1px solid #e0e0e0; padding: 2rem 2.25rem; }
.dealer-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.dealer-card__title { font-size: 1.35rem; font-weight: 600; }
.dealer-card__edit { color: #767676; font-size: .95rem; }
.dealer-card__edit:hover { color: #000; }
.dealer-card__data td { padding: .35rem 0; vertical-align: top; line-height: 1.4; }
.dealer-card__data td:first-child { color: #767676; width: 170px; padding-right: 1.5rem; white-space: nowrap; }
.dealer-card__data td:last-child { font-weight: 600; }
@media (max-width: 640px) { .dealer-card { padding: 1.5rem; } .dealer-card__data td:first-child { width: 110px; } }

/* Bestellen: frame search filter + a touch of spacing around pagination. */
.frame-filter { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.75rem; }
.frame-filter input[type="search"] { flex: 0 1 320px; padding: .55rem .85rem; border: 1px solid #CCC; border-radius: 3px; font: inherit; }
/* Even hoog als het veld ernaast. Stond 6px lager, wat niet opviel zolang de knop
   grijs was en nu wel. Sinds het zoeken bij het typen is dit vooral de weg zonder
   javascript, maar hij staat er wel. */
.frame-filter .btn { padding: 0 1rem; height: 40px; line-height: 38px; }
.frame-filter__clear { color: #6a6a6a; font-size: .9rem; }
.frame-filter__clear:hover { color: #000; }
.pagination.section--small a, .pagination.section--small span { margin: 0 .15rem; }

/* Sticky header (like Hoet): the bar stays at the top of the viewport on scroll,
   with a subtle bottom border so it separates cleanly from the content. */
.header { position: sticky; top: 0; z-index: 300; background: #fff; border-bottom: 1px solid #ececec; }

/* Top bar (language + login): vertically centre it with the logo/nav. The strip
   is absolutely positioned; make the whole header its offset parent (not the tiny
   inner wrapper) so 50% actually centres over the nav row. */
.header__inner { position: relative; }
.header__inner .hide-medium .relative-block { position: static; }
/* Align the language + login cluster to the nav container's right edge (1200px),
   not the viewport edge, so the login icon doesn't sit far off to the right. */
.header__inner .top-info { top: .95rem; bottom: auto; transform: none; right: max(1.5rem, calc(50% - 600px)); padding: 0; display: flex; align-items: center; justify-content: flex-end; }
.top-info .top-langs { margin-right: 1.4rem; }

/* Dealer login shown as a clean SVG icon in the top bar (opens the login page). */
.top-info .top-login-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 1.15rem; color: #555; }
.top-info .top-login-icon:hover { color: #000; }
.top-info .top-login-icon svg { width: 23px; height: 23px; }

/* Collectiepagina: dynamisch monturen-overzicht met filters + paginatie. */
.frame-overview__heading { margin: 0 0 1.5rem; }
.frame-overview__filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; }
.frame-overview__filters--type { margin-bottom: 2rem; }
.frame-overview__legend { flex: 0 0 auto; min-width: 5.5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #767676; }
.frame-overview__chip { border: 1px solid #d5d5d5; border-radius: 40px; padding: .4rem 1.05rem; font-size: .85rem; color: #444; transition: .15s; }
.frame-overview__chip--sm { padding: .28rem .85rem; font-size: .78rem; }
.frame-overview__chip:hover { border-color: #000; color: #000; }
.frame-overview__chip.is-active { background: #575757; color: #fff; border-color: #575757; }
.frame-overview__pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.frame-overview__page { border: 1px solid #d5d5d5; padding: .4rem .8rem; font-size: .9rem; color: #444; min-width: 2.4rem; text-align: center; }
.frame-overview__page:hover { border-color: #000; color: #000; }
.frame-overview__page.is-active { background: #575757; color: #fff; border-color: #575757; }
/* Form feedback. Both classes were used in six places (login, wachtwoord opnieuw,
   contact, nieuwsbrief, bestelmodal, wachtwoord wijzigen) and styled nowhere, so a
   failed login read as body text in the same colour as the labels next to it. A
   hairline in the margin rather than a filled box: the page has no other boxes. */
.form__error, .form__success, .form__note { margin:.6rem 0 1.6rem; padding:.1rem 0 .1rem 1rem; border-left:2px solid; font-size:.9rem; line-height:1.55; }
.form__error { border-color:#a8261c; color:#8a2b21; }
.form__success { border-color:#2e6b46; color:#2e6b46; }
/* Uitleg, geen uitkomst: de migratieboodschap meldt geen geslaagde handeling maar legt
   uit waarom er een extra stap is. Groen zou een succes suggereren dat er niet was. */
.form__note { border-color:#cfcfcf; color:#555; }

/* ---- Gebruikersbeheer (beheerders) ----
   Een tabel en niets meer: dit is een werklijst van bijna tweehonderd regels waarin je
   iemand zoekt, geen etalage. Haarlijnen zoals de rest van de site, en de enige knop per
   regel is de enige handeling die hier bestaat. */
.users__intro { max-width: 62ch; color: #555; margin: 0 0 1.8rem; }
.users__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.users__filter { border: 1px solid #e2ded5; padding: .45rem .9rem; font-size: .8rem; color: #555;
    text-decoration: none; transition: border-color .2s, color .2s; }
.users__filter span { color: #767676; margin-left: .35em; font-variant-numeric: tabular-nums; }
.users__filter:hover { border-color: #999; color: #000; }
.users__filter.is-active { border-color: #222; color: #000; font-weight: 500; }
.users__filter.is-active span { color: #666; }
.users__search { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.users__search input[type="search"] { width: 320px; max-width: 100%; margin: 0; }
.users__clear { font-size: .82rem; color: #6a6a6a; }
.users__table-wrap { overflow-x: auto; }
.users__table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.users__table th { text-align: left; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: #6a6a6a; font-weight: 500; padding: 0 1rem .7rem 0; border-bottom: 1px solid #e2ded5; white-space: nowrap; }
.users__table td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid #f0ede8; vertical-align: top; }
.users__table tr.is-inactive td { color: #767676; }
.users__sub { color: #6a6a6a; font-size: .82rem; }
.users__tag { font-size: .72rem; letter-spacing: .04em; color: #2e6b46; white-space: nowrap; }
.users__tag--wait { color: #8a6a21; }

/* Een bestelling die nog niemand van het merk geopend heeft. Bewust een stille
   markering en geen kleurvlak: het zegt "hier heeft nog niemand naar gekeken", niet
   "hier ligt werk". Dat laatste weten we niet, en een lijst die dat suggereert wordt
   binnen een week genegeerd.

   De regel zelf stond eerst vet, naar het voorbeeld van een ongelezen mail. Dat
   voorbeeld gaat hier niet op: in een mailbox is het meeste gelezen en springt de
   uitzondering eruit, maar hier is op een gewone dag ÉLKE regel nieuw. Dan is de hele
   tabel vet en zegt het vet niets meer, terwijl het wel harder leest. Nadruk werkt
   enkel als uitzondering, dus draagt het woord de markering en de regel niet. */
.orders__nieuw { display: inline-block; margin-right: .8rem; color: #2e6b46; }

/* -------------------------------------------------------------------------
   KOPPEN IN HET DEALERGEDEELTE

   Op één scherm stonden vier maten voor dingen die alle vier hetzelfde doen: een
   blok aankondigen. In het winkelmandje was "Winkelmandje" 27px, "Product" 16px vet
   wit op een grijze balk, "Uw gegevens" 21,6px halfvet en "Speciale wensen" 13,6px
   vet. Dat leest als vier soorten belangrijk, terwijl er maar twee rangen zijn: de
   pagina, en de blokken erin.

   Drie rollen, drie vaste vormen:
   - de paginatitel blijft de h1 van het thema;
   - een blokkop is .dealer-kop;
   - een kolomkop is de vorm die het bestellingen- en gebruikersscherm al gebruikten
     (klein, gespatieerd, grijs, met een lijn eronder). Het winkelmandje gebruikte
     daar de .overview-table van het thema, en die zet witte tekst op #878787: naast
     inconsistent ook 3,6:1, dus onder de AA-drempel.

   In px en niet in rem: het thema zet op mobiel html { font-size: 13px }, en dan
   krimpt elke rem daar 19% mee. */
.dealer-kop { font-size: 19px; font-weight: 500; line-height: 1.3; color: #000; margin: 0; }
/* Ook als de kop een label is. Het thema stuurt .field-wrap label op 13,6px vet, en
   die selector is specifieker dan een losse klasse: zonder deze regel bleef
   "Speciale wensen" de kleinste kop op de pagina. */
.field-wrap label.dealer-kop, label.dealer-kop { font-size: 19px; font-weight: 500; color: #000; }

.overview-table.cart { border: 0; border-collapse: collapse; }
.overview-table.cart thead { background: none; color: inherit; font-weight: normal; }
.overview-table.cart th { text-align: left; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: #6a6a6a; font-weight: 500; padding: 0 1rem .7rem 0; border-bottom: 1px solid #e2ded5; }
.overview-table.cart td { border-bottom: 1px solid #f0ede8; }
.users__tag--off { color: #767676; }
.users__action { text-align: right; white-space: nowrap; }
.users__invite { background: none; border: 1px solid #cfcfcf; color: #222; font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; padding: .5rem .9rem; cursor: pointer;
    transition: border-color .2s; }
.users__invite:hover { border-color: #222; }
.users__empty { color: #6a6a6a; padding: 2rem 0; }
.users__pager { margin-top: 1.6rem; }

/* ------------------------------------------------------------------------ *
   Auth-schermen: inloggen, wachtwoord vergeten, nieuw wachtwoord.

   Deze drie formulieren stonden nog in het grid van het oude CMS-thema: label
   in een kolom van vier, veld in een kolom van acht, met een dubbele punt
   ertussen. Op een gecentreerde halve kolom levert dat een brede lege strook
   links op en een label dat verder van zijn eigen veld staat dan van het
   volgende. De knop droeg `btn blue`, en `blue` bestaat niet in dit thema, dus
   viel hij terug op de niet-ingevulde skinkleur #878787: de enige actie op de
   pagina zag eruit alsof ze uitgeschakeld was.

   Bewust zelfstandig, zonder .btn of .rb-btn: Cabrio deelt deze views maar
   heeft geen .rb-btn in zijn CSS, en een gedeeld formulier dat in het ene huis
   wel en in het andere geen knop toont is erger dan wat extra regels hier.
* ------------------------------------------------------------------------- */
.auth { max-width: 400px; margin: 0 auto; padding: 0 20px; }

/* Zelfde koptypografie als .rb-photo-text__title, de sectiekop van de redesign. */
.auth__title { font-size: 26px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;
    color: #000; margin: 0 0 1rem; }
.auth__intro { margin: 0 0 2rem; color: #555; font-size: .95rem; line-height: 1.6; }

.auth__field { margin: 0 0 1.2rem; }
/* Label boven het veld, klein en gespatieerd zoals de navigatie: het hoort bij
   het veld eronder, en die nabijheid moet je zien zonder te lezen. */
.auth__label { display: block; margin: 0 0 .45rem; font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: #6a6a6a; }
/* Eén regel voor twee schermen: de configurator (.cfg__input) gebruikt hetzelfde
   veld als het inlogscherm. Twee bijna gelijke definities zouden binnen een maand
   uiteenlopen, en dan zie je op één site twee soorten invoervelden. */
.auth__input, .cfg__input { display: block; box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid #cfcfcf; border-radius: 0; background: #fff; color: #000; font: inherit;
    font-size: 15px; outline: none; -webkit-appearance: none; transition: border-color .2s ease; }
.auth__input:focus, .cfg__input:focus { border-color: #000; }
.auth__input::placeholder, .cfg__input::placeholder { color: #767676; }
/* Het thema kleurt een veld met fouten rood via .field-wrap--error; die wrapper
   gebruiken we hier niet, dus dezelfde uitspraak in eigen woorden. */
.auth__field--error .auth__input { border-color: #a8261c; }
.auth__field--error .auth__label { color: #8a2b21; }

/* Gevuld zwart in plaats van de omlijnde .rb-btn: dit is de enige actie op de
   pagina, en een omlijnde knop naast een omlijnd invoerveld verliest die rang. */
.auth__btn, .cfg__btn { display: block; width: 100%; margin: 1.8rem 0 0; padding: 15px 32px; border: 1px solid #000;
    border-radius: 0; background: #000; color: #fff; font: inherit; font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 2px; text-align: center; cursor: pointer;
    transition: background-color .2s ease, color .2s ease; }
.auth__btn:hover, .cfg__btn:hover { background: #fff; color: #000; }
.auth__btn:focus-visible, .cfg__btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.auth__aside { margin: 1.6rem 0 0; text-align: center; font-size: .85rem; }
.auth__aside a { color: #6a6a6a; text-decoration: none; }
.auth__aside a:hover { color: #000; text-decoration: underline; }
/* Twee nevengeschikte uitwegen (wachtwoord vergeten, terug naar inloggen)
   staan naast elkaar, niet onder elkaar als een lijstje van gelijke acties. */
.auth__aside--split { display: flex; justify-content: space-between; gap: 1rem; text-align: left; }

/* -------------------------------------------------------------------------
   CONFIGURATOR (/bestellen/config/<montuur>)

   De volledige versie van het bestelvenster: wat je krijgt zonder javascript,
   in een nieuw tabblad of via een rechtstreekse link. Ze was als enige
   dealerscherm nooit aangeraakt en droeg dus nog het kale thema: de collectie
   stond ónder de titel in plaats van erboven als eyebrow, de velden liepen over
   de volle breedte zonder onderlinge ruimte, de keuzelijst was de kale
   systeemversie en de knop viel terug op de niet-ingevulde skinkleur #878787,
   waardoor de enige actie op de pagina er uitgeschakeld uitzag.

   Zwaarder woog dat er geen foto op stond. Je koos er een kleur voor een montuur
   dat je niet zag, terwijl het bestelvenster in het raster de foto's wél naast
   het formulier zet. Vandaar de opbouw van de publieke montuurpagina (.fd__*):
   raster, koppen, galerij en miniaturen komen daarvandaan, en hier staat enkel
   wat de formulierkant erbij nodig heeft.
* ------------------------------------------------------------------------- */
/* Op de montuurpagina staat er 3,2rem onder de titel, want daar volgt een blok
   specificaties dat lucht nodig heeft. Hier volgt meteen het eerste label, en dan
   raakt de kop los van waar ze bij hoort. */
.cfg .fd__title { margin-bottom: 1.8rem; }
.cfg__field { margin: 0 0 1.3rem; }
/* Een aantal is twee tekens breed. Over de volle kolom zag het eruit als een veld
   waar een zin in moest. */
.cfg__field--kort { max-width: 150px; }
.cfg__label { display: block; margin: 0 0 .45rem; font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: #6a6a6a; }
/* Niet de verplichte velden markeren met een sterretje maar de optionele benoemen:
   op dit formulier is bijna alles verplicht, dus een sterretje bij elk veld op één
   na is ruis die de uitzondering juist verbergt. */
.cfg__opt { text-transform: none; letter-spacing: 0; color: #767676; font-size: 11px; }
.cfg__hint { display: block; margin: .4rem 0 0; font-size: .8rem; color: #6a6a6a; }
.cfg__error { margin: 0 0 1.2rem; padding: .8rem 1rem; border-left: 3px solid #a8261c;
    background: #fdf3f2; color: #8a2b21; font-size: .9rem; }

/* De keuzelijst krijgt hetzelfde kader als een invoerveld, met een eigen pijltje:
   het systeempijltje is per besturingssysteem anders en trekt een grijs blokje in
   een verder zwart-wit scherm. De bol links toont de gekozen kleur, want "Brown
   (01)" zegt minder dan de kleur zelf, en in het raster ernaast staan kleuren wel
   als bol. */
.cfg__select { position: relative; }
.cfg__select select { padding-right: 38px; cursor: pointer; }
.cfg__select > .fa { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #6a6a6a; pointer-events: none; }
/* De bol staat IN het veld en niet ernaast. Ernaast schoof ze de keuzelijst naar
   rechts, waardoor de linkerrand van dit ene veld niet meer op die van de andere
   uitkwam. Ze blijft ook zichtbaar als er nog niets gekozen is (dan wit): een bol
   die verschijnt zou het veld op dat moment laten verspringen. */
.cfg__select--kleur select { padding-left: 52px; }
.cfg__swatch { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%; background: #fff;
    border: 1px solid rgba(0,0,0,.22); pointer-events: none; }

.cfg__input--tekst { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }

/* De knop staat onderaan de kolom, niet in het midden van het scherm: de rest van
   het formulier is links uitgelijnd en een knop over de volle breedte van een brede
   kolom leest als een balk. */
.cfg__btn { width: auto; min-width: 280px; }
@media (max-width: 820px) {
    .cfg__btn { width: 100%; min-width: 0; }
}

/* Dezelfde knop in het bestelvenster, want dat is de weg die de meeste dealers
   nemen. Ze droeg daar nog de kale .btn van het thema en dus de niet-ingevulde
   skinkleur #878787: de belangrijkste actie van het hele portaal zag eruit alsof
   ze uitgeschakeld was. */
/* Eén knop voor het hele dealergedeelte. Het thema geeft .btn de niet-ingevulde
   skinkleur #878787, en die dook deze week op in het bestelvenster, op de
   bevestigingspagina, bij "Bestelling plaatsen" en in de gebruikers- en
   profielschermen: telkens de belangrijkste actie van dat scherm, telkens grijs alsof
   ze uitgeschakeld was. Per pagina bijkleuren betekent dat de volgende knop het weer
   fout doet, dus hier één vorm die overal gebruikt wordt. */
.dealer-btn { background: #000; border: 1px solid #000; border-radius: 0; color: #fff;
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;
    padding: 14px 28px; line-height: 1.2; transition: background-color .2s ease, color .2s ease; }
.dealer-btn:hover { background: #fff; color: #000; }
/* De tweede, nevengeschikte actie: zelfde vorm, omgekeerde vulling. */
.dealer-btn--licht { background: #fff; color: #000; }
.dealer-btn--licht:hover { background: #000; color: #fff; }


/* De bol met de gekozen kleur, ook hier. Ze staat IN het veld: ernaast zou ze de
   keuzelijst smaller maken dan de andere velden ernaast, en dan loopt de rechterrand
   van dit ene veld niet meer door. Ze blijft zichtbaar als er nog niets gekozen is
   (dan wit), anders verspringt het veld op het moment dat je kiest. */
.custom-select--kleur select { padding-left: 44px; }
.custom-select--kleur .op__swatch { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; background: #fff;
    border: 1px solid rgba(0,0,0,.22); pointer-events: none; }

/* Taalkiezer in de mobiele balk.

   Zonder kader, en dat is het punt. De .lang-dd van de desktop draagt een witte
   vulling met een grijze rand, want daar staat ze op een lichte balk tussen andere
   omkaderde dingen. De mobiele balk is zwart (.mobile-header) met witte glyphs van
   2rem zonder enige omlijsting: daar werd hetzelfde element een wit doosje tussen
   twee kale pictogrammen, alsof het er later bij geplakt was. Drie bedieningen op
   één rij horen dezelfde bouw te hebben, dus hier enkel het label en het pijltje in
   dezelfde witte inkt.

   De padding van 1em komt van .mobile-header__btn: gelijke tikruimte als de knoppen
   ernaast, ook al is de tekst kleiner dan hun 2rem. Het uitklapmenu blijft wel wit
   met donkere tekst, want dat is een laagje over de pagina en geen deel van de balk. */
/* De rij als rij uitlijnen, in plaats van drie dozen die elk hun eigen afspraak met de
   basislijn maken. De knoppen zijn inline-block zonder meer en hangen dus aan de
   basislijn; de kiezer stond op middle. Tussen een glyph van 2rem en tekst van 15px
   scheelt dat ruim tien pixels, en dat zag je: NL hing lager dan de telefoon en de
   hamburger. Het omhullende blok blijft zelf gecentreerd via top:50% + translate. */
.mobile-header .mobile-header__btns { display: flex; align-items: center; }
.mobile-header__lang { display: inline-block; vertical-align: middle; }
.mobile-header__lang .lang-dd__toggle {
    background: transparent; border: 0; border-radius: 0; padding: 1em .45em;
    color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.mobile-header__lang .lang-dd__toggle .fa { font-size: 11px; color: rgba(255,255,255,.7); }
/* De basisregels zetten hover en is-open op zwart: op deze balk zou de kiezer dan
   zwart op zwart staan, precies bij het aantikken. */
.mobile-header__lang .lang-dd:hover .lang-dd__toggle,
.mobile-header__lang .lang-dd:focus-within .lang-dd__toggle,
.mobile-header__lang .lang-dd.is-open .lang-dd__toggle { color: #fff; border-color: transparent; }
.mobile-header__lang .lang-dd__menu { right: 0; left: auto; }
.lang-dd.is-open .lang-dd__menu { opacity: 1; visibility: visible; transform: none; }
.lang-dd.is-open .lang-dd__toggle { border-color: #000; color: #000; }

/* Op mobiel gaat alles een maat omhoog. Deze schaal is gekozen op een breed scherm,
   waar een label van 11px nog leesbaar oogt naast een kolom van 400px; op een
   telefoon is diezelfde kolom het hele scherm en wordt het gepriegel.

   Het invoerveld is geen smaakkwestie maar een fout: onder 16px zoomt iOS Safari
   automatisch in zodra je een veld aantikt, en het zoomt daarna niet terug uit. Je
   stond dus na één tik op een uitvergrote pagina die je met de hand moest
   terugschuiven, midden in het inloggen. 16px is de drempel waaronder dat gebeurt,
   dus die staat hier ook op een breed scherm. */
.auth__input, .cfg__input { font-size: 16px; }

/* De bevestiging na een verstuurde link: gecentreerd rond de envelop, want er valt
   hier niets meer in te vullen. De lijndikte van het icoon volgt die van het
   dealer-login-icoon in de header, zodat het uit dezelfde set lijkt te komen. */
.auth__sent { text-align: center; }
.auth__sent-icon { color: #000; margin: .5rem auto 1.5rem; display: block; }
.auth__sent-text { margin: 0 auto 1.6rem; max-width: 34ch; color: #444; font-size: 1rem; line-height: 1.6; }
.auth__sent-hint { margin: 0; padding-top: 1.4rem; border-top: 1px solid #e6e6e6; color: #6a6a6a;
    font-size: .9rem; line-height: 1.6; }
.auth__sent-hint a { color: #6a6a6a; text-decoration: underline; text-underline-offset: 3px; }
.auth__sent-hint a:hover { color: #000; }

/* Alles hier in px en niet in rem, en dat is de kern van het probleem. Het thema zet
   op mobiel `html { font-size: 13px }`, dus elke rem komt daar 19% kleiner uit dan
   bedoeld: de .85rem van de voetlink werd 11px in plaats van 13,6px, en de .9rem van
   een melding 11,7px. De schaal kromp precies op het scherm waar ze het minst kon
   missen. Een rem-waarde optrekken zou dat blijven volgen; px niet. */
@media (max-width: 768px) {
    .auth { max-width: none; padding: 0 22px; }
    /* Iets kleiner zodat een kop van een paar woorden op één regel past:
       26px met 2px spatiëring liep op een telefoon over twee regels. */
    .auth__title { font-size: 22px; letter-spacing: 1.6px; }
    .auth__intro,
    .auth .form__note, .auth .form__error, .auth .form__success { font-size: 16px; line-height: 1.6; }
    .auth__label { font-size: 13px; letter-spacing: .1em; }
    .auth__input { height: 52px; }
    .auth__btn { font-size: 13px; padding: 17px 32px; }
    .auth__aside { font-size: 15px; }
    .auth__sent-text { font-size: 16px; }
    .auth__sent-hint { font-size: 14px; }
}

/* Bestelregel: de collectie als stille regel boven het product. Ze stond eerst als kop
   met het aantal erachter ("CC x4"), en dat is de verkeerde volgorde: je bestelt geen
   collectie vier keer, je bestelt vier keer dat montuur. De collectie plaatst het
   product en hoort dus erboven, kleiner en grijs. */
.cart-item__collection { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
    color: #767676; margin: 0 0 .2rem; }

/* Header-acties: twee rangen in plaats van drie opmaken. Bestellen en Downloads zijn
   waar een dealer heen gaat en krijgen dezelfde chip; het thema maakte de tweede zwart
   en de eerste grijs, zonder dat dat verschil ergens voor stond. Gebruikers en
   Uitloggen zijn bijzaak en staan als stille tekst, zoals Uitloggen al deed. */
/* De rand staat óók op de gevulde knop, in de eigen achtergrondkleur. Zonder dat is de
   omlijnde variant 2px hoger dan de gevulde, groeit de hele bovenrij mee en botst ze
   tegen de gecentreerde navigatie eronder. Een staat mag de kleur veranderen, niet de
   afmeting. */
.top-info .top-btn { background: #1d1d1b; border: 1px solid #1d1d1b; border-radius: 0;
    padding: .42rem 1.05rem; font-size: .78rem; letter-spacing: .06em; }
/* Ruimte tussen de twee knoppen. Ze stonden tegen elkaar: hoet-eyewear zet ze in een
   flexrij met tien pixels ertussen, hier staan ze inline en dus zonder. Zelfde afstand,
   zodat de twee merken dezelfde maatvoering houden. */
.top-info .top-btn + .top-btn { margin-left: 10px; }
.top-info .top-btn:hover { background: #000; color: #fff; }
.top-info .top-quiet { display: inline-block; vertical-align: middle; margin-left: .85rem;
    font-size: .8rem; color: #6a6a6a; }
.top-info .top-quiet:hover { color: #000; text-decoration: underline; }

/* Bestelgedeelte: de merknaam als kop. Zonder die regel begon de pagina met een
   filterrij en oogde ze als een losse tabel zonder plek. */
.bestellen__titel { font-family: 'Jost', 'Quicksand', sans-serif; text-transform: uppercase;
    letter-spacing: .16em; font-weight: 400; font-size: 1.35rem; color: #111; margin: 0 0 1.4rem; }

/* Zoekbalk in de lijstschermen (gebruikers, bestellingen).
   De knop erfde de grijze themaknop: vet, afgeronde hoeken, ruime padding, en daardoor
   een blok van een andere hoogte dan het veld ernaast. Twee vormtalen naast elkaar in
   één regel, met het meeste gewicht op het minst belangrijke: zoeken is een hulpmiddel,
   geen hoofdactie. Nu dezelfde haarlijn, hoogte en hoekvorm als de filterchips erboven,
   zodat de hele kop van zo'n scherm één ding is. */
.users__search input[type="search"] { height: 40px; padding: 0 .8rem; margin: 0;
    border: 1px solid #cfcfcf; border-radius: 0; font: inherit; font-size: .85rem;
    background: #fff; color: #222; outline: none; -webkit-appearance: none; }
.users__search input[type="search"]:focus { border-color: #222; }
.users__search .btn { height: 40px; line-height: 38px; padding: 0 1.4rem; background: none;
    border: 1px solid #cfcfcf; border-radius: 0; color: #222; font-weight: 400;
    font-size: .8rem; letter-spacing: .06em; }
.users__search .btn:hover { background: none; border-color: #222; color: #000; }

/* Gevuld is "hier ben je", omlijnd is "daar kun je heen". Het stond andersom: de knop
   van de pagina waar je stond werd omlijnd omdat ze naar jezelf wees. Naast een gevulde
   buurknop leest dat niet als "je bent hier" maar als "deze doet minder", dezelfde
   verwarring als een grijze knop die uitgeschakeld lijkt. Beide knoppen zijn nu even
   zwaar; alleen de vulling zegt waar je staat. */
.top-info .top-btn:not(.is-current) { background: transparent; color: #1d1d1b; border-color: #cfcfcf; font-weight: 400; }
.top-info .top-btn:not(.is-current):hover { background: #1d1d1b; border-color: #1d1d1b; color: #fff; }

/* Zoekveld boven het monturenraster. Het raster draagt uit het thema een negatieve
   bovenmarge (-64px) om de padding van zijn tegels te compenseren; die lege strook komt
   daardoor over het formulier te liggen. Visueel zie je niets, maar een klik op het
   zoekveld landt op het raster en het veld krijgt nooit focus. Een eigen stapelcontext
   met z-index zet het formulier weer bovenaan; de tegels zelf beginnen lager en
   overlappen dus niets zichtbaars. */
.frame-filter { position: relative; z-index: 1; }

/* Lucht tussen de collectiechips en het zoekveld: die stonden tegen elkaar, terwijl het
   twee verschillende manieren zijn om de lijst te versmallen en geen doorlopende rij. */
.frame-filter { margin-top: 1.1rem; }

/* De ingebouwde wisknop van een zoekveld kleurt mee met de systeemaccentkleur, en dat is
   op deze pagina het enige gekleurde element. Grijstinten maken haar neutraal zonder de
   knop weg te nemen: ze is een bekend gebaar en doet precies wat je verwacht. */
.frame-filter input[type="search"]::-webkit-search-cancel-button {
    filter: grayscale(1) opacity(.55);
}
.frame-filter input[type="search"]::-webkit-search-cancel-button:hover {
    filter: grayscale(1) opacity(.9);
}