/* Carmo storefront dark mode (carmonl) — v1-v15, 2026-09-06.
   Volledige taak-voor-taak geschiedenis: .superpowers/sdd/2026-09-06-frontend-darkmode-plan/progress.md
   (ledger) en docs/superpowers/plans/2026-09-06-frontend-darkmode-plan.md (plan).
   De inline commentaren hieronder per blok noemen het versienummer waarop dat blok
   daadwerkelijk live is gegaan (na eventuele tussenstappen v2/v4/v7-v11, zie ledger). */

.carmo-theme-toggle-item {
  display: inline-block;
}

.carmo-theme-toggle {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.carmo-theme-toggle:hover,
.carmo-theme-toggle:focus {
  text-decoration: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --carmo-bg: #101214;
  --carmo-surface: #181b1f;
  --carmo-surface-2: #20242a;
  --carmo-text: #f2f4f6;
  --carmo-text-muted: #b4bbc4;
  --carmo-border: #343a42;
  --carmo-accent: #ff7a00;
  --carmo-accent-hover: #ffa24a;
  --carmo-input-bg: #15181c;
  --carmo-input-text: #ffffff;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #mainWrapper,
html[data-theme="dark"] #contentMainWrapper,
html[data-theme="dark"] .centerColumn {
  background-color: var(--carmo-bg);
  color: var(--carmo-text);
}

html[data-theme="dark"] .header-container,
html[data-theme="dark"] .header-top,
html[data-theme="dark"] .header-content,
html[data-theme="dark"] .nav-maincontainer,
html[data-theme="dark"] .sticky-header-wrapper,
html[data-theme="dark"] #vakantie {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] .top-link a,
html[data-theme="dark"] .custom_links a,
html[data-theme="dark"] .language-switcher label,
html[data-theme="dark"] .currency_top label,
html[data-theme="dark"] .redirect-store a {
  color: var(--carmo-text);
}

html[data-theme="dark"] a {
  color: var(--carmo-accent);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
  color: var(--carmo-accent-hover);
}

html[data-theme="dark"] #whysideboxContent .mijnfontawesome-vakjes,
html[data-theme="dark"] #whysideboxContent .mijnfontawesome-vakjes strong {
  color: var(--carmo-accent) !important;
}

html[data-theme="dark"] .box_heading h2 {
  background-color: var(--carmo-surface-2) !important;
  color: var(--carmo-accent) !important;
}

html[data-theme="dark"] .sideBoxContent,
html[data-theme="dark"] .centerBoxContents,
html[data-theme="dark"] .productListing-data,
html[data-theme="dark"] .product-col,
html[data-theme="dark"] .homepageBrandsLi a,
html[data-theme="dark"] .single-banner,
html[data-theme="dark"] .owl-item .item,
html[data-theme="dark"] .categoryListBoxContents,
html[data-theme="dark"] .centerBoxWrapper {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-search input.input-text {
  background-color: var(--carmo-input-bg);
  color: var(--carmo-input-text);
  border-color: var(--carmo-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-search input.input-text::placeholder {
  color: var(--carmo-text-muted);
}

html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] .cssButton {
  border-color: var(--carmo-border);
}

html[data-theme="dark"] .form-search .button,
html[data-theme="dark"] .carmo-theme-toggle {
  background-color: var(--carmo-surface-2);
  color: var(--carmo-text);
}

/* Merklogo's blijven bewust volledig licht (principe: geen inversie) */
html[data-theme="dark"] .homepageBrandsLi a {
  background: linear-gradient(180deg, #f6f8fb 0%, #eaf0f5 100%) !important;
  border-color: #c8d1db !important;
}

html[data-theme="dark"] .homepageBrandsLi:hover a,
html[data-theme="dark"] .homepageBrandsLi a:hover {
  background: #fff3e8 !important;
  border-color: var(--carmo-accent) !important;
}

html[data-theme="dark"] .homepageBrandsLi img {
  filter: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .productListing-odd,
html[data-theme="dark"] .productListing-even,
html[data-theme="dark"] .newproductlisting {
  background: linear-gradient(180deg, #141920 0%, #12171d 100%) !important;
  border: 1px solid #2a323c !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .productListing-odd:hover,
html[data-theme="dark"] .productListing-even:hover,
html[data-theme="dark"] .newproductlisting:hover {
  border-color: #3a4653 !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .productListing-data,
html[data-theme="dark"] .productListing-data .short-description,
html[data-theme="dark"] .productListing-data .product_name,
html[data-theme="dark"] .productlisting_price,
html[data-theme="dark"] .newproductlisting .short-description,
html[data-theme="dark"] .newproductlisting .product_name {
  color: var(--carmo-text) !important;
}

/* Productfoto's krijgen een lichte kaart, geen inversie (principe 2 uit de spec).
   v15-fix (I2, eindreview): achtergrond van #1b222b (donker) naar #ffffff (wit)
   gewijzigd — een <img> zonder eigen wrapper met transparante PNG (bv. een dunne
   lijntekening) werd tegen de donkere achtergrond vrijwel onzichtbaar. Zelfde
   patroon als de al-goedgekeurde .product_image img op de productdetailpagina. */
html[data-theme="dark"] .productListing-data .listingProductImage,
html[data-theme="dark"] .newproductlisting img {
  background-color: #ffffff !important;
  border: 1px solid #303a46 !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

html[data-theme="dark"] .footer-container,
html[data-theme="dark"] .footer-top,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .newsletter_bg {
  background-color: var(--carmo-surface);
  color: var(--carmo-text);
  border-color: var(--carmo-border);
}

/* v2, 2026-09-06 (Task 2): hoofdmenu-dropdown (#nav li ul a, alle niveaus) had
   een hardcoded witte achtergrond met donkergrijze tekst (rgb(255,255,255) /
   rgb(43,43,43)) — zichtbaar op elke pagina inclusief de homepage bij het
   openen van een menu (bv. TUNING, WEBSHOP). Gevonden via browseraudit,
   selectors bevestigd in de live stylesheet (.header-container #nav li ul a,
   .header-container #nav li ul li a.parent, .header-container #nav li ul a:hover).
   v3, 2026-09-06 (taakreview-fix): #navColumnOne/#navColumnTwo hier verwijderd —
   dat zijn stock Zen Cart sidebox-kolomcontainers (stylesheet.css:94), geen
   onderdeel van het #nav-dropdown-mechanisme, en niet apart geaudit. */
html[data-theme="dark"] .header-container #nav li ul a,
html[data-theme="dark"] .header-container .header #nav li ul a,
html[data-theme="dark"] .header-container #nav ul li ul a,
html[data-theme="dark"] .header-container #nav li ul li a.parent {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .header-container #nav li ul a:hover,
html[data-theme="dark"] .header-container .header #nav li ul a:hover {
  background-color: var(--carmo-surface-2) !important;
  color: var(--carmo-accent) !important;
}

/* v5, 2026-09-06 (Task 3): categoriepagina's + zoekresultaten.
   Alle vier hieronder zelf bevestigd via getComputedStyle() op een geopende,
   dark-mode-geactiveerde pagina (Webshop cPath=4318 met subcategorieën,
   Bobine's cPath=4318_1087 zonder subcategorieën, en de drie secties van
   advanced_search_result met keyword=CDI). Geen speculatieve selectors.
   (v4 was een tussenstap — breadcrumb-fix werkte niet door de overlay1.png-
   textuur en is direct in v5 gecorrigeerd, zie hieronder.) */

/* .main-breadcrumb (rgb(245,245,245)) — de brede lichte balk direct onder de
   hoofdnavigatie op elke categorie-/zoekresultatenpagina (bevat titel +
   broodkruimel), op zowel Webshop (met subcats) als Bobine's (kaal) en de
   zoekresultatenpagina bevestigd. */
html[data-theme="dark"] .main-breadcrumb {
  background-color: var(--carmo-surface) !important;
  background-image: none !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* .carmo-merkfilter (merkfilter-vloot, zie MEMORY.md) — het "Merk"-filterblok
   boven de productlisting: container rgb(250,250,250), niet-actieve pills wit
   met oranje tekst, "meer merken"-toggle wit, label/teller donkergrijze tekst.
   Bevestigd op Bobine's én op de "producten"-sectie van de zoekresultatenpagina
   (identieke component, dus dezelfde regel raakt beide). */
html[data-theme="dark"] .carmo-merkfilter {
  background-color: var(--carmo-surface) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .carmo-merkfilter__label {
  color: var(--carmo-text) !important;
}

html[data-theme="dark"] .carmo-merkfilter__n {
  color: var(--carmo-text-muted) !important;
}

html[data-theme="dark"] .carmo-merkfilter__pill,
html[data-theme="dark"] .carmo-merkfilter__pill--meer {
  background-color: var(--carmo-surface-2) !important;
  border-color: var(--carmo-border) !important;
}

/* actieve pill (is-actief) blijft oranje/wit — bewust niet aangeraakt, was al
   goed leesbaar (rgb(255,102,0) bg met witte tekst). */

/* select2 sorteer-dropdown ("Sorteren op:" op de kale Bobine's-listing) — het
   zichtbare .select2-choice-vak en het geopende .select2-drop-paneel waren
   allebei wit met zwarte tekst; .select2-search input bleek al gedekt door de
   generieke input-regel hierboven (geverifieerd, geen fix nodig). */
html[data-theme="dark"] .select2-choice {
  background-color: var(--carmo-input-bg) !important;
  color: var(--carmo-input-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .select2-drop {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .select2-results {
  color: var(--carmo-text) !important;
}

/* v6, 2026-09-06 (Task 4): productdetailpagina — hoofdfoto + tabblad-omschrijving.
   Zelf bevestigd op drie producten van verschillende merken (Electrex #491,
   MWR #4393, Carmo #4298/#667 incl. thumbnail-strip en waitlist-badge) met
   getComputedStyle() op een dark-mode-geactiveerde pagina. Thumbnail-strip
   (.additionalImages/.carmoThumbSwap) en de waitlist-badge (#stock-notify)
   bleken bij inspectie GEEN probleem (transparante achtergrond resp. al een
   consistente lichte kaart) — bewust niet aangeraakt. */

/* Productdetailpagina — hoofdfoto + thumbnails krijgen een lichte kaart */
html[data-theme="dark"] .product_image {
  background-color: #1b222b !important;
  border: 1px solid #303a46 !important;
  border-radius: 6px !important;
  padding: 10px !important;
}

html[data-theme="dark"] .product_image img {
  background-color: #ffffff;
  border-radius: 4px;
}

/* CKEditor-omschrijving (tabblad "Beschrijving") — lichte kaart i.p.v. inversie,
   !important nodig om eventuele inline stijlen uit oude CKEditor-content te overrulen */
html[data-theme="dark"] .tabcontent {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .tabcontent p,
html[data-theme="dark"] .tabcontent span,
html[data-theme="dark"] .tabcontent li,
html[data-theme="dark"] .tabcontent td {
  color: var(--carmo-text) !important;
  background-color: transparent !important;
}

/* v12, 2026-09-06 (Task 5): winkelwagen + checkout-formulieren (cart, login/
   gastcheckout, verzendmethode incl. Sendcloud-servicepointpopup, betaalmethode,
   bevestiging). Elke selector hieronder is zelf bevestigd met getComputedStyle()
   op een dark-mode-geactiveerde pagina tijdens een echte testorder-doorloop
   (PP12 motorbike capacitor, t/m de bevestigingspagina, NIET afgerekend).
   (v7-v11 waren tussenstappen, elk een eigen bestand vanwege de CF-cache-regel
   op style*.css — zie ledger voor de volledige tussenstap-geschiedenis.)

   Buiten bereik, bewust niet aangepakt: het gastcheckout-adresformulier
   (main_page=create_account&guest=1, incl. het adres-autocomplete-widget) draait
   in een eigen same-origin maar zelfstandige SSO-iframe-app (eigen <head>, eigen
   inline stylesheets, Google Sign-In) die de edify-CSS niet laadt — bevestigd met
   iframe.contentDocument.styleSheets. Dit bestand kan die pagina niet bereiken;
   zie memory "create-account-new-flow.md — SSO iframe". De XCover-verzekeringstoggle
   en het DAP/invoerkosten-vinkje kwamen in deze testorder (NL-adres, klein pakket)
   niet in beeld — niet gefixt omdat niet waargenomen, geen aanname toegepast.

   v7-vervolg (zelfde dag): .split-login .buttons-set (de knoppenbalk "Aanmelden" /
   "Wachtwoord vergeten" / "Inloggen" onder elke loginkaart) over het hoofd gezien
   in de eerste versie — pas ontdekt bij de herverificatie ná installatie. Direct
   op v7 gepatcht was geen optie: Cloudflare had v7.css binnen enkele minuten al
   gecachet (cf-cache-status: HIT), dus vandaar deze v8 in plaats van een in-place
   edit op v7 (zelfde regel als bij elke andere stylesheet-wijziging hier). */

/* Winkelwagen — subtotaalregel (rgb(249,249,249) wit vlak onder de artikelregels).
   v10-aanvulling: .cartTableHeading deelt in de stock CSS (templatecss.css:1548)
   dezelfde regel als #cartSubTotal maar was hier gemist — pas gevonden op de
   bevestigingspagina (de "Aantal / Artikel / Totaal / Edit"-kopregel van de
   winkelwagentabel), met hardcoded donkere tekst (rgb(43,43,43)) op de lichte
   achtergrond. Zelfde class, dus zelfde fix hoort ook op de kale winkelwagen. */
html[data-theme="dark"] #cartSubTotal,
html[data-theme="dark"] .cartTableHeading {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
}

/* v11-aanvulling: mobiele viewport (getest 390×844) toont de winkelwagentabel op
   de bevestigingspagina als kaartrijen i.p.v. een tabel — .rowEven/.rowOdd
   (met .cartProductDisplay erin, hardcoded rgb(51,51,51) tekst) blijven op
   desktop-breedte onzichtbaar omdat de tabel daar geen alternerende
   achtergrond toont, maar op mobiel is dit een volledig wit kaartje. Bewust
   gescoped tot #checkoutConfirmDefault (Task 5-grens: checkout, niet de
   bestelgeschiedenis of andere ZC-tabellen die dezelfde classes kunnen delen). */
html[data-theme="dark"] #checkoutConfirmDefault .rowEven,
html[data-theme="dark"] #checkoutConfirmDefault .rowOdd {
  background-color: var(--carmo-surface) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] #checkoutConfirmDefault .cartProductDisplay {
  color: var(--carmo-text) !important;
}

/* Login-pagina — de twee kaarten "Nieuwe klant" / "Bestaande klant"
   (.split-login .content, rgb(249,249,249)) */
html[data-theme="dark"] .split-login .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Login-pagina — de knoppenbalk onder elke kaart (.split-login .buttons-set,
   rgb(249,249,249)) met "Aanmelden" / "Wachtwoord vergeten" / "Inloggen" */
html[data-theme="dark"] .split-login .buttons-set {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Checkout stap 1-3 — de witte kaartcontainers (zelfde stock-patroon als
   .split-login .content hierboven, bevestigd op alle drie stappen) */
html[data-theme="dark"] #checkoutShipping .content,
html[data-theme="dark"] #checkoutPayment .content,
html[data-theme="dark"] #checkoutConfirmDefault .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Checkout stap-indicator "Stap 1" / "Stap 2 van 3 - ..." (.checkout-steps,
   .current-step) — wit vlak met donkere tekst boven elke checkoutstap */
html[data-theme="dark"] .checkout-steps,
html[data-theme="dark"] .current-step {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* Bootstrap info-alert ("Uw bestelling zal worden verstuurd naar..." /
   "Uw factuuradres wordt aan de linkerzijde getoond...") — lichtblauw op elke
   checkout-adresstap, bevestigd op zowel verzend- als betaalstap. v9-correctie:
   Bootstrap zet naast background-color ook een background-image (lineair
   verloop lichtblauw→lichter blauw) — die tekent bovenop een losse
   background-color, dus zonder background-image:none bleef het verloop
   zichtbaar (bevestigd met getComputedStyle: backgroundImage). */
html[data-theme="dark"] .alert-info {
  background-color: var(--carmo-surface-2) !important;
  background-image: none !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* v12-aanvulling: Bootstrap .alert-danger (rgb(242,222,222) met dezelfde
   verloop-achtergrond als .alert-info hierboven) — de validatiemelding "Om uw
   bestelling uit te kunnen voeren verzoeken wij u onze algemene
   (leverings)voorwaarden door te lezen..." op de betaalstap wanneer het
   akkoord-vinkje nog niet is aangevinkt. Bewust een eigen roodtint i.p.v.
   var(--carmo-surface-2), zodat het foutkarakter herkenbaar blijft t.o.v. de
   neutrale .alert-info hierboven. */
html[data-theme="dark"] .alert-danger {
  background-color: #3a1f22 !important;
  background-image: none !important;
  color: #f3b4b4 !important;
  border-color: #7a3a3a !important;
}

/* Verzendmethode (Sendcloud-module) — "Normaal"/"Express"-tabs en de
   verzendopties-lijst. .shipping-title-text en .checkboxLabel.shipping-method-label
   dragen een hardcoded donkere tekstkleur (rgb(31,41,55)) los van de body-var. */
html[data-theme="dark"] .ship-tabs {
  background-color: var(--carmo-surface-2) !important;
}

html[data-theme="dark"] .ship-tab {
  color: var(--carmo-text-muted) !important;
}

html[data-theme="dark"] .ship-tab.active {
  background-color: var(--carmo-surface) !important;
}

html[data-theme="dark"] .shipping-option-row {
  background-color: var(--carmo-surface) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .shipping-title-text,
html[data-theme="dark"] .checkboxLabel.shipping-method-label {
  color: var(--carmo-text) !important;
}

/* Sendcloud-servicepointpopup ("Kies afhaalpunt" → kaart-modaal). De Leaflet-kaart
   zelf en de kleine markerpopup (witte tooltip op de kaart) blijven bewust
   ongemoeid — dat is standaard Leaflet-UI, geen inversie/filter toegepast.
   .leaflet-control-zoom-in/-out (de +/- knopjes) blijven om dezelfde reden ook
   ongemoeid. v9-aanvulling: bij 2+ vervoerders toont de popup een
   checkbox-filterbalk (.sp-filter) i.p.v. de pill-legenda (.sp-legend-item) —
   beide varianten zelf aangetroffen tijdens herverificatie, dus allebei
   opgenomen. */
html[data-theme="dark"] .sp-modal-content,
html[data-theme="dark"] .sp-modal-legend {
  background-color: var(--carmo-surface) !important;
}

html[data-theme="dark"] .sp-modal-header,
html[data-theme="dark"] .sp-legend-item,
html[data-theme="dark"] .sp-filter {
  background-color: var(--carmo-surface-2) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] .sp-modal-close {
  color: var(--carmo-text-muted) !important;
}

/* Task 6 (account/login/registratie) — "Wachtwoord vergeten"-pagina
   (#passwordForgotten .content, rgb(249,249,249)). Zelfde stock ZC-patroon
   als .split-login .content / #checkoutShipping .content hierboven: de
   introtekst en het "E-mailadres *"-label staan in lichte dark-mode-tekstkleur
   en werden onleesbaar tegen de bijna-witte kaartachtergrond. Bevestigd via
   document.elementFromPoint() op de live pagina. */
html[data-theme="dark"] #passwordForgotten .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* v14, 2026-09-06 (Task 7): CMS/EZ-pages-content — lichte kaart i.p.v. audit van elke losse pagina.
   !important is bewust: overrulet eventuele inline kleuren uit oude CKEditor-content. */
html[data-theme="dark"] #ezPageDefault {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

html[data-theme="dark"] #ezPageDefault p,
html[data-theme="dark"] #ezPageDefault span,
html[data-theme="dark"] #ezPageDefault li,
html[data-theme="dark"] #ezPageDefault td,
html[data-theme="dark"] #ezPageDefault h1,
html[data-theme="dark"] #ezPageDefault h2,
html[data-theme="dark"] #ezPageDefault h3 {
  color: var(--carmo-text) !important;
  background-color: transparent !important;
}

/* v15, 2026-09-06 — brede eindreview-fix-golf (ENIGE fix-ronde na de eindreview).

   C1: templatecss.css:3944-3945 geeft in ÉÉN selectorlijst 26 stock ZC-pagina's een
   #F9F9F9-kaart (.content). checkoutShipping/checkoutPayment/checkoutConfirmDefault/
   passwordForgotten waren al gedekt (hierboven); de resterende 22 hieronder, exact
   dezelfde declaratie-stijl. Dekt o.a. create-account, contactformulier, account-
   overzicht/geschiedenis/adresboek/wachtwoord/nieuwsbrief, en de review-/zoek-/
   coupon-/giftvoucher-pagina's. Live geverifieerd op #contactUsDefault en
   #advSearchDefault (beide publiek bereikbaar zonder sessie, meerdere .content-divs
   per pagina); accountpagina's niet los geverifieerd (geen testaccount beschikbaar,
   zelfde bekende dekkingsgat als Task 6). */
html[data-theme="dark"] .create-account-page .content,
html[data-theme="dark"] #timeoutDefault .content,
html[data-theme="dark"] #contactUsDefault .content,
html[data-theme="dark"] #checkoutSuccess .content,
html[data-theme="dark"] #accountDefault .content,
html[data-theme="dark"] #accountHistoryDefault .content,
html[data-theme="dark"] #accountHistInfo .content,
html[data-theme="dark"] #accountEditDefault .content,
html[data-theme="dark"] #addressBookDefault .content,
html[data-theme="dark"] #addressBookProcessDefault .content,
html[data-theme="dark"] #accountPassword .content,
html[data-theme="dark"] #acctNewslettersDefault .content,
html[data-theme="dark"] #accountNotifications .content,
html[data-theme="dark"] #checkoutShipAddressDefault .content,
html[data-theme="dark"] #checkoutPayAddressDefault .content,
html[data-theme="dark"] #createAcctSuccess .content,
html[data-theme="dark"] #gvFaqDefault .content,
html[data-theme="dark"] #discountcouponInfo .content,
html[data-theme="dark"] #reviewsInfoDefault .content,
html[data-theme="dark"] #reviewsDefault .content,
html[data-theme="dark"] #reviewsWrite .content,
html[data-theme="dark"] #advSearchDefault .content {
  background-color: var(--carmo-surface) !important;
  color: var(--carmo-text) !important;
  border-color: var(--carmo-border) !important;
}

/* I1: #oneallsociallogin { display: none !important; } (verouderd pilot-commentaar
   "unused") hier volledig verwijderd — de sidebox ("Verbind met…") rendert wél live
   op de homepage. Erft nu de generieke .sideBoxContent-regel; live bevestigd
   voldoende leesbaar zonder extra CSS (zie testrapport). */