/* 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. */

/* 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; }

/* Hero title/subtitle: left to the theme (compiled.min.css), matching live. The
   homepage hero is enlarged via <big> (~57.6px) through the block's `large` flag. */

/* 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; }
/* En om dezelfde reden de hamburger. Het thema kleurt hem wit tot er gescrold is
   (`.rh:not(.is-scrolled) .rh-mobile__toggle`), want op desktop ligt de header dan
   nog over de donkere hero. De mobiele balk staat daar los van en is altijd wit,
   dus stond het enige menu dat mobiel bestaat wit op wit tot je scrolde: aanwezig,
   aanklikbaar, onzichtbaar. */
.rh:not(.is-scrolled) .rh-mobile__toggle { color: #000; }

/* 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; }

/* The cart-count badge pokes ~11px above the tab row; give it room so the
   fixed header doesn't cover it (cut off on the original site too). */
.tab-wrap { padding-top: 14px; }

/* ---- 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:.82rem; letter-spacing:.28em; text-transform:uppercase; color:#2b2b2b; font-weight:500; margin-bottom:.7rem; }
.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; }
/* Couture²-juweel: één regel, want de pagina gaat dan over precies die combinatie.
   De code is waarop een dealer bestelt, de naam legt uit wat je krijgt. */
.fd__jewels { margin:0 0 2.6rem; }
.fd__jewel-one { margin:0; font-size:.92rem; color:#444; }
.fd__jewel-one strong { letter-spacing:.06em; color:#000; margin-right:.5em; }
.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 .rb-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 .rb-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; }
}

/* 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; }

/* 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 primary actions. */
.rh-actions__logout { align-self: center; margin-left: 1rem; font-size: .8rem; color: #6a6a6a; text-decoration: none; }
.rh-actions__logout:hover { color: #000; text-decoration: underline; }

/* Footer social icons. */
.redesign-footer__socials { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.redesign-footer__socials a { color: #6a6a6a; font-size: 17px; transition: color .2s ease; }
.redesign-footer__socials a:hover { color: #000; }

/* 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; }

/* Photo-text rich text: bullets flush-left with the paragraph margin (not the
   browser's 40px indent). Each bullet labels the paragraph below it, so hug that
   paragraph (small bottom margin) and separate clearly from the section above
   (larger top margin). */
.rb-photo-text__text ul { margin: 16px 0 4px; padding-left: 0; list-style-position: inside; }
.rb-photo-text__text li { margin: 0; padding-left: 0; }
/* Ruimte tussen paragrafen: het thema geeft losse paragrafen maar 12px mee, wat
   ze op elkaar propt; 24px (de lege regel waarmee live ze scheidt) bleek op een
   volle tekstkolom te veel lucht, zeker omdat elke opsomming er nog 16px
   bovenop legt. 16px scheidt de alinea's zonder gaten te trekken. */
.rb-photo-text__text p { margin-bottom: 16px; }

/* Kop in de rich text: live sets these headings at 27px (an h1 there); ours come
   from Portable Text as h2/h3, which the theme leaves at the browser default
   (22.5px), noticeably smaller. Applies both to the photo-text sections and to
   the copy cell in a brillenblok, which reuses this wrapper (like live).
   Regelafstand hoort erbij: de wrapper staat op 1,7 voor lopende tekst, en een
   kop van 27px erfde die mee (45,9px), waardoor een kop over twee regels uit
   elkaar viel. Koppen dragen hun eigen, strakkere leading. */
.rb-photo-text__text h2 { font-size: 27px; line-height: 1.25; }
.rb-photo-text__text h3 { font-size: 22px; line-height: 1.3; }

/* Monturenraster: de foto past in de tegel in plaats van hem te vullen. Het thema zet
   background-size:cover op een tegel van 4:3, en dat werkt op de live site omdat daar
   vierkante 1900x1900-beelden hangen. In Sanity staat als indexfoto een brede 16:9-opname,
   die door cover een kwart van zijn breedte verliest én wordt opgeblazen — waardoor het ene
   montuur tegen de randen loopt en het andere klein blijft. Met contain houdt elk montuur
   zijn eigen schaal en staat de rij rustig. De witruimte die dat oplevert valt niet op: de
   opnames staan op wit, net als de pagina. Enkel het monturenraster, niet de collectietegels
   op de homepage: dat zijn sfeerbeelden die de tegel horen te vullen. */
.rb-collections--brillen .rb-collections__img { background-size: contain; background-repeat: no-repeat; }

/* Brillenblok: the block's copy sits in the grid as a cell next to the frames
   (theme class .rb-collections__card--text). The theme clips cards for the image
   zoom on hover; a text cell has nothing to zoom and should not be clipped. */
.rb-collections__card--text { overflow: visible; }

/* Contact, sociale media: the icon carries the platform name visually, so the
   name itself is only there for screen readers (the theme has no sr-only). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-socials { margin-top: 1.5rem; }
.contact-socials strong { display: block; margin-bottom: .4rem; }
.contact-socials a { display: flex; align-items: center; gap: .55rem; padding: .18rem 0; }
.contact-socials .fa { width: 1.1em; text-align: center; font-size: 17px; color: #6a6a6a; transition: color .2s ease; }
.contact-socials a:hover .fa { color: #000; }

/* Contactformulier: newsletter breathing room under the title. The "Ik ben een"
   radios keep the theme's own layout — stacked, one per line with the wide indent
   — because that is how live shows them; an earlier override put them compact and
   side by side, which live does not. */
.newsletter__intro { margin: .5rem 0 0; font-size: 14px; line-height: 1.6; color: #666; max-width: 46ch; }
.newsletter .newsletter-form { margin-top: 1.4rem; }
/* Frameless: the theme boxes the newsletter in, which stacks three outlines on
   top of each other (box, e-mail field, tick) in a page that otherwise uses only
   hairlines. Drop the frame and its padding; the title carries the block.
   (.inner--small adds another 16px inside, which the frame no longer needs.) */
.newsletter { border: 0; padding: 0; margin-top: 2rem; }
.newsletter .inner--small { padding: 0; }
/* Toestemmingsvinkje: the theme centres the box against the label (top: 50%),
   which drifts to the middle of a sentence that wraps over two or three lines —
   line it up with the first line instead, and size the tick like the theme does
   in the download form. */
.consent-field .checkbox input[type="checkbox"] + label { padding: .2rem 0 .2rem 2.2rem; }
.consent-field .checkbox input[type="checkbox"] + label span { left: 0; top: .1rem; transform: none; }
.consent-field .checkbox input[type="checkbox"]:checked + label { background: none; }
.consent-field .checkbox i.fa { font-size: 12px; }
/* Same tick under the newsletter field, where the sentence is the bulk of the
   form and reads better a size smaller. */
.consent-field--small { margin-top: 1rem; }
.consent-field--small .checkbox input[type="checkbox"] + label { font-size: 13px; line-height: 1.5; }

/* 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; }

/* 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; } }

/* Engraving field: full-width label on its own line, then the fixed
   "Made in Belgium for" prefix + the dealer's input spanning the whole form
   width (like live), instead of being crammed into the narrow field column. */
.order__form__engraving { margin-bottom: 1rem; }
.order__form__engraving > label { display: block; font-weight: 500; margin-bottom: .5rem; }
.order__form__engraving > label small { font-weight: normal; font-style: italic; opacity: .8; }
.engraving-input { display: flex; align-items: stretch; }
.engraving-input .engraving-prefix { flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap; padding: 0 .9rem; background: #f0f0f0; border: 1px solid #CCC; border-right: 0; color: #767676; }
.engraving-input input { flex: 1 1 auto; min-width: 0; }
/* 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; }

/* Verkooppunten grid: align it to the title/nav container width (1200px). The
   extra class beats the theme's max-width:2000px so the list left edge lines up
   with the "Verkooppunten" title above it. */
@media (min-width: 769px) {
    .sales-points.sales-points--new .location-items { max-width: 1200px; margin-left: auto; margin-right: auto; }
}

/* Dealer login shown as an icon in the header (opens the login page). White on
   the hero (transparent header), dark once the header turns white on scroll. */
.rh-login-icon { display: inline-flex; align-items: center; color: #000; }
.rh-login-icon svg { width: 21px; height: 21px; }
.rh:not(.is-scrolled) .rh-login-icon { color: #fff; }
.rh-login-icon:hover { opacity: .7; }
/* A bit more air between the language dropdown and the login icon. */
.rh-desktop__top { gap: 20px; }

/* Language switcher as a custom dropdown (like Cabrio), adapting to the header
   state: white text/outline over the hero, dark once scrolled. */
.rh .lang-dd { position: relative; display: inline-block; }
.rh .lang-dd__toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(0,0,0,.22); border-radius: 3px; padding: .3rem .7rem; font: inherit; font-size: 14px; font-weight: 500; color: #000; background: transparent; cursor: pointer; }
.rh .lang-dd__toggle .fa { font-size: .7rem; opacity: .7; }
.rh:not(.is-scrolled) .lang-dd__toggle { color: #fff; border-color: rgba(255,255,255,.55); }
.rh .lang-dd:hover .lang-dd__toggle, .rh .lang-dd:focus-within .lang-dd__toggle { border-color: currentColor; }
.rh .lang-dd__menu { position: absolute; top: 100%; right: 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; }
.rh .lang-dd:hover .lang-dd__menu, .rh .lang-dd:focus-within .lang-dd__menu { opacity: 1; visibility: visible; transform: none; }
.rh .lang-dd__item { display: block; padding: .38rem 1.1rem; font-size: 14px; color: #555; }
.rh .lang-dd__item:hover { background: #f4f4f4; color: #000; }
.rh .lang-dd__item.is-active { color: #000; font-weight: 600; }

/* Desktop nav dropdown: the theme packs the items tight (8px rows, hairline
   right up against the text). Give the rows air, let the hairlines run a bit
   wider than the labels, and drop the trailing line so the list ends softly. */
.rh-nav__dropdown { padding-top: 14px; min-width: calc(100% + 80px); }
.rh-nav__dropdown-item a { padding: 12px 14px; }
.rh-nav__dropdown-item:last-child { border-bottom: 0; }

/* Mobile nav. Scoped to de mobiele breakpoint: het thema verbergt het paneel op
   desktop met display:none, dus een ongescopete display:flex zou het daar tonen.

   Stond hier eerst op `justify-content: space-evenly`, om het paneel te vullen in
   plaats van onderaan leeg te laten. Dat schaalt de verkeerde kant op: de gaten
   groeien mee met het scherm, dus op een hoge telefoon dreef het menu uit elkaar
   tot vier losse woorden met halve schermen ertussen, en stonden COUTURE en
   COSTUME dichter bij elkaar dan bij de kop waar ze onder horen. Ruimte moet
   groeperen, en dat kan ze alleen als ze vast is. Het paneel eindigt nu gewoon
   waar het menu eindigt. */
@media screen and (max-width: 1023px) {
    .rh-mobile-panel { display: flex; flex-direction: column; }
    .rh-mobile-panel__list { flex: 0 0 auto; padding: 16px 0 40px; }
    .rh-mobile-panel__item > a,
    .rh-mobile-panel__item > .rh-mobile-panel__label { padding-top: 16px; padding-bottom: 16px; }
    /* De kop van een groep hoort bij de items eronder, niet bij het item erboven. */
    .rh-mobile-panel__item > .rh-mobile-panel__label { padding-bottom: 8px; }
    .rh-mobile-panel__subitems { padding-bottom: 8px; }
}

/* ---- 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; }

/* ---- Couture²-productpagina ----
   Een uniek stuk, geen montuur met een optie erop. Daarom draagt het beeld de pagina
   en staat de tekst eronder in één smalle kolom, in plaats van naast een raster met
   maten en kleuren: dat laatste is de vorm van een keuzelijst en die vorm zegt al
   "samenstellen" voor je één woord gelezen hebt. */
/* Minder lucht boven dan een gewone sectie: het stuk hoort in één scherm te passen,
   en de terugverwijzing hoeft geen kwart pagina te krijgen. */
.section--large.c2 { padding-top: 3rem; }
.c2__top { margin-bottom: 1.2rem; }
/* Beeld en verhaal naast elkaar, zoals de montuurpagina: één kolom maakte de pagina
   onnodig lang, met een gat tussen de foto en de tekst die erbij hoort. De verhouding
   geeft het beeld het overwicht — het stuk is de hoofdzaak, de tekst begeleidt. */
.c2__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.c2__figure { margin: 0; text-align: center; }
/* Hoogte begrensd en op zijn eigen verhouding: deze opnames zijn nu eens liggend en
   dan weer staand, en zonder grens rekt een staande foto de pagina uit. */
.c2__image { display: inline-block; max-width: 100%; max-height: 56vh; width: auto; height: auto; background: #f5f3ee; }
.c2__body { max-width: 34rem; }
.c2__eyebrow { display: block; font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: #6a6a6a; margin-bottom: .9rem; }
.c2__title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.1; margin: 0 0 1.6rem; }
.c2__text { font-size: 1rem; line-height: 1.75; color: #444; }
/* De uitleg is opgemaakte tekst. Een kop staat hier bewust op tekstgrootte: ze ordent
   het verhaal, maar mag niet luider klinken dan de naam van het stuk erboven. */
.c2__text p { margin: 0 0 1em; }
.c2__text > :last-child { margin-bottom: 0; }
.c2__text h2, .c2__text h3 { font-size: 1rem; line-height: 1.5; letter-spacing: .02em;
    color: #222; margin: 1.7em 0 .5em; }
.c2__text > h2:first-child, .c2__text > h3:first-child { margin-top: 0; }
.c2__text ul { margin: 0 0 1em; padding-left: 1.1rem; }
.c2__text li { margin: 0 0 .3em; }
.c2__text a { color: #222; text-decoration: underline; text-underline-offset: .18em; }
.c2__text hr { border: 0; border-top: 1px solid #e2ded5; margin: 1.6em 0; }
/* De uitleg over samenstellen staat een trapje zachter dan het verhaal over dit stuk:
   ze hoort erbij maar is niet waar je voor kwam. De haarlijn scheidt zonder een kader. */
.c2__note { margin: 1.8rem 0 0; padding-top: 1.5rem; border-top: 1px solid #e2ded5;
    font-size: .88rem; line-height: 1.65; color: #6a6a6a; }
.c2__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.6rem; }
.c2__cta .rb-btn { 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; }
.c2__cta .rb-btn:hover { background: transparent; border-color: #222; color: #000; }
@media (max-width: 820px) {
    .c2__inner { grid-template-columns: 1fr; gap: 2rem; }
    .c2__image { max-height: 52vh; }
}

/* ------------------------------------------------------------------------ *
   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 was de omlijnde .rb-btn, die naast een omlijnd
   invoerveld haar rang als enige actie verliest.

   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 eerste actie gevuld, zodat de rangorde te zien is. Het thema kent enkel de
   omlijnde .rb-btn en een --inverted voor donkere ondergronden; een gevulde variant
   bestond nog niet. */
.rb-btn--vol { background: #000; color: #fff; }
.rb-btn--vol:hover { background: #fff; 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; }
}

/* Taalkiezer in de mobiele balk.

   Zonder kader, en de regel daarachter is: pas je aan de rij waarin je staat. Op
   desktop staat deze kiezer tussen omkaderde dingen en boven beeld, dus daar helpt
   een randje haar losmaken van de foto. In de mobiele balk staat ze naast één kale
   hamburger, en werd hetzelfde element een klein doosje naast een los pictogram:
   dat oogt erop geplakt. Hier dus enkel het label en het pijltje, in dezelfde inkt
   en met dezelfde tikruimte als de hamburger.

   Twee dingen blijven apart nodig. (1) Het thema kleurt alles in de header wit
   zolang er niet gescrold is, want daar ligt de desktopheader over de donkere hero.
   De mobiele balk staat daar los van en is altijd wit, dus zou de kiezer wit op wit
   staan: exact dezelfde fout als de hamburger hierboven. (2) Het menu klapt uit met
   .is-open (een tik), naast de hover-regels voor de muis. */
.rh-mobile__lang { margin-left: auto; margin-right: .1rem; }
.rh .rh-mobile__bar .lang-dd__toggle {
    background: transparent; border: 0; border-radius: 0; padding: .5rem .55rem;
    color: #000; font-size: 15px; font-weight: 500; letter-spacing: .12em;
}
.rh .rh-mobile__bar .lang-dd__toggle .fa { font-size: 11px; opacity: .55; }
.rh:not(.is-scrolled) .rh-mobile__bar .lang-dd__toggle { color: #000; }
.rh .rh-mobile__bar .lang-dd:hover .lang-dd__toggle,
.rh .rh-mobile__bar .lang-dd:focus-within .lang-dd__toggle,
.rh .rh-mobile__bar .lang-dd.is-open .lang-dd__toggle { color: #000; border-color: transparent; }
.rh .lang-dd.is-open .lang-dd__menu { opacity: 1; visibility: visible; transform: none; }
.rh .lang-dd.is-open .lang-dd__toggle { border-color: currentColor; }

/* 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; }

/* 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. */
.rh .rh-actions__btn:not(.is-current) { background: transparent; color: #000; border-color: #cfcfcf; font-weight: 400; }
.rh .rh-actions__btn:not(.is-current):hover { background: #000; border-color: #000; color: #fff; }
.rh:not(.is-scrolled) .rh-actions__btn:not(.is-current) { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* 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; }