/* ==========================================================================
   THISLINE x FluentCart  -  v4
   Gebouwd tegen de echte bron van FluentCart 1.6.2 en tegen de THISLINE
   Huisstijl v2.0 (augustus 2026). Vervangt v3 helemaal. Niet eronder plakken.

   Wat er anders is dan v3, en waarom.

   1. v3 vocht met selectors. v4 vult eerst de 200+ eigen variabelen van
      FluentCart. Die staan allemaal op :root in de plugin, dus overschrijven
      wij ze daar met !important. Daarmee is het grootste deel gedaan zonder
      een enkele vechtregel.
   2. De afrekenmodal zat niet in v3. Die draait in een iframe op je eigen
      domein, met eigen klassen (fct-modal-checkout-*) en eigen variabelen.
      Buitenkant en binnenkant staan hieronder allebei.
   3. De knop Nu kopen uit het blok is geen fluent-cart-direct-checkout-button
      maar een wp-block-button__link met de klasse
      wp-block-fluent-cart-buy-now-button. Daarom pakte v3 hem nooit en bleef
      hij een enorm grijs vlak.
   4. Waarden komen nu uit de huisstijl en niet uit een schatting. Hoeken 0,
      zwart is #000000, kaart is #1a1a1a, haarlijn is #2a2a2a, hover-lime is
      #d6ff33 en ingedrukt is #b8e600. Geen slagschaduwen.

   Let op de naamgeving van FluentCart. Afrekenen en overzicht met liggende
   streepjes in de klassen maar underscores in de onderdelen (fct_summary_box),
   winkelwagen en kaarten met streepjes (fct-cart-item). Beide staan hieronder.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THISLINE tokens, letterlijk uit de huisstijl
   -------------------------------------------------------------------------- */
:root {
  --tl-black:        #000000;
  --tl-surface-1:    #000000;
  --tl-surface-2:    #080808;
  --tl-surface-3:    #121212;
  --tl-surface-hover:#222222;
  --tl-line:         #2a2a2a;
  --tl-line-strong:  #3a3a3a;

  --tl-lime:         #ccff00;
  --tl-lime-hover:   #d6ff33;
  --tl-lime-press:   #b8e600;
  --tl-lime-dim:     rgba(204, 255, 0, .12);
  --tl-lime-line:    rgba(204, 255, 0, .35);

  --tl-white:        #ffffff;
  --tl-text-hi:      #ffffff;
  --tl-text-mid:     #cccccc;
  --tl-text-lo:      #9a9a9a;
  --tl-text-faint:   #555555;
  --tl-on-lime:      #000000;

  --tl-danger:       #ff3c3c;
  --tl-warning:      #ffb020;
  --tl-light:        #e6e6e6;
  --tl-light-hover:  #ffffff;

  --tl-head:  'Roboto Condensed', 'Arial Narrow', sans-serif;
  --tl-body:  'Inter', system-ui, -apple-system, sans-serif;
  --tl-quote: Georgia, 'Times New Roman', serif;

  --tl-r-0:    0px;
  --tl-r-sm:   2px;
  --tl-r-pill: 999px;

  --tl-focus: 0 0 0 2px #000000, 0 0 0 4px #ccff00;
  --tl-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --tl-dur:   200ms;
}

/* --------------------------------------------------------------------------
   2. De eigen variabelen van FluentCart
       Alle namen hieronder komen letterlijk uit de plugin. Ze staan daar op
       :root, dus deze blok wint met !important ongeacht de laadvolgorde.
       Dit is het deel dat het bestand breed inzetbaar maakt: nieuwe onderdelen
       van FluentCart lezen dezelfde variabelen en zijn dus meteen goed.
   -------------------------------------------------------------------------- */
:root {
  /* Basis, hier hangt de rest aan */
  --fct-primary-text-color:         var(--tl-text-hi) !important;
  --fct-secondary-text-color:       var(--tl-text-mid) !important;
  --fct-primary-active-text-color:  var(--tl-lime) !important;
  --fct-heading-color:              var(--tl-text-hi) !important;
  --fct-primary-bg-color:           var(--tl-lime) !important;
  --fct-secondary-bg-color:         var(--tl-surface-3) !important;
  --fct-border-color:               var(--tl-line) !important;
  --fct-divider-color:              var(--tl-line) !important;
  --fct-border-gray-divider:        var(--tl-line) !important;
  --fct-adv-border-color:           var(--tl-line-strong) !important;
  --fct-active-border-color:        var(--tl-lime) !important;
  --fct-secondary-active-border-color: var(--tl-lime) !important;
  --fct-primary-500:                var(--tl-lime) !important;
  --fct-text-system-dark:           var(--tl-text-hi) !important;
  --fct-text-system-mid:            var(--tl-text-mid) !important;

  /* Knoppen */
  --fct-btn-bg-color:               var(--tl-lime) !important;
  --fct-btn-text-color:             var(--tl-on-lime) !important;
  --fct-btn-border-color:           var(--tl-lime) !important;
  --fct-secondary-btn-bg-color:     transparent !important;
  --fct-secondary-btn-text-color:   var(--tl-text-hi) !important;
  --fct-secondary-btn-border-color: var(--tl-line-strong) !important;
  --fct-secondary-btn-hover-bg-color: var(--tl-lime) !important;
  --fct-add-to-cart-btn-bg-color:       var(--tl-lime) !important;
  --fct-add-to-cart-btn-text-color:     var(--tl-on-lime) !important;
  --fct-add-to-cart-btn-border-color:   var(--tl-lime) !important;
  --fct-add-to-cart-btn-hover-bg-color: var(--tl-lime-hover) !important;
  --fct-direct-btn-bg-color:        transparent !important;
  --fct-direct-btn-text-color:      var(--tl-text-hi) !important;

  /* Invoervelden */
  --fct-input-bg-color:             var(--tl-black) !important;
  --fct-input-text-color:           var(--tl-text-hi) !important;
  --fct-input-placeholder-text-color: var(--tl-text-faint) !important;
  --fct-input-disabled-bg-color:    var(--tl-surface-3) !important;
  --fct-input-disabled-bg:          var(--tl-surface-3) !important;
  --fct-select-input-bg:            var(--tl-black) !important;
  --fct-select-input-text-color:    var(--tl-text-hi) !important;
  --fct-select-dropdown-bg:         var(--tl-surface-3) !important;
  --fct-select-option-hover-bg:     var(--tl-surface-hover) !important;

  /* Afrekenen */
  --fct-checkout-primary-text-color:    var(--tl-text-hi) !important;
  --fct-checkout-secondary-text-color:  var(--tl-text-mid) !important;
  --fct-checkout-border-color:          var(--tl-line) !important;
  --fct-checkout-active-border-color:   var(--tl-lime) !important;
  --fct-checkout-primary-bg-color:      var(--tl-lime) !important;
  --fct-checkout-secondary-bg-color:    var(--tl-surface-3) !important;
  --fct-checkout-btn-bg-color:          var(--tl-lime) !important;
  --fct-checkout-btn-text-color:        var(--tl-on-lime) !important;
  --fct-checkout-input-bg-color:        var(--tl-black) !important;
  --fct-checkout-input-text-color:      var(--tl-text-hi) !important;
  --fct-checkout-input-border-color:    var(--tl-line-strong) !important;
  --fct-checkout-input-placeholder-text-color: var(--tl-text-faint) !important;
  --fct-checkout-input-disabled-bg-color: var(--tl-surface-3) !important;
  --fct-checkout-summary-bg-color:      var(--tl-surface-3) !important;
  --fct-checkout-payment-method-bg-color: var(--tl-surface-3) !important;
  --fct-checkout-checkbox-bg:           var(--tl-black) !important;
  --fct-checkout-address-wrapper-bg:    var(--tl-surface-3) !important;
  --fct-checkout-shipping-methods-bg:   var(--tl-surface-3) !important;
  --fct-checkout-address-modal-bg:      var(--tl-surface-3) !important;
  --fct-checkout-address-active-border-color: var(--tl-lime) !important;
  --fct-checkout-radio-bg-color:        var(--tl-black) !important;
  --fct-checkout-radio-border-color:    var(--tl-line-strong) !important;
  --fct-checkout-radio-active-border-color: var(--tl-lime) !important;
  --fct-checkout-radio-active-bg-color: var(--tl-lime) !important;
  --fct-checkout-radio-dot-bg-color:    var(--tl-on-lime) !important;

  /* Afrekenmodal, in het iframe */
  --fct-modal-checkout-primary-text-color:   var(--tl-text-hi) !important;
  --fct-modal-checkout-secondary-text-color: var(--tl-text-mid) !important;
  --fct-modal-checkout-active-text-color:    var(--tl-lime) !important;
  --fct-modal-checkout-border-color:         var(--tl-line) !important;
  --fct-modal-checkout-divider-color:        var(--tl-line) !important;
  --fct-modal-checkout-active-border-color:  var(--tl-lime) !important;
  --fct-modal-checkout-secondary-active-border-color: var(--tl-lime) !important;
  --fct-modal-checkout-border-radius:        0px !important;
  --fct-modal-checkout-primary-bg-color:     var(--tl-lime) !important;
  --fct-modal-checkout-btn-bg-color:         var(--tl-lime) !important;
  --fct-modal-checkout-btn-text-color:       var(--tl-on-lime) !important;
  --fct-modal-checkout-input-disabled-bg:    var(--tl-surface-3) !important;

  /* Productpagina */
  --fct-single-product-primary-text-color:   var(--tl-text-hi) !important;
  --fct-single-product-secondary-text-color: var(--tl-text-mid) !important;
  --fct-single-product-border-color:         var(--tl-line) !important;
  --fct-single-product-active-border-color:  var(--tl-lime) !important;
  --fct-single-product-qty-bg:               var(--tl-black) !important;
  --fct-single-product-qty-text-color:       var(--tl-text-hi) !important;

  /* Productkaart */
  --fct-card-bg:                 var(--tl-surface-3) !important;
  --fct-card-border-color:       var(--tl-line) !important;
  --fct-card-primary-text-color: var(--tl-text-hi) !important;
  --fct-card-text-color:         var(--tl-text-mid) !important;
  --fct-card-btn-bg-color:       var(--tl-lime) !important;
  --fct-card-btn-text-color:     var(--tl-on-lime) !important;

  /* Winkelwagenlade */
  --fct-cart-drawer-primary-text-color:   var(--tl-text-hi) !important;
  --fct-cart-drawer-secondary-text-color: var(--tl-text-mid) !important;
  --fct-cart-drawer-primary-bg-color:     var(--tl-lime) !important;
  --fct-cart-drawer-border-color:         var(--tl-line) !important;
  --fct-cart-drawer-bg:                   var(--tl-surface-3) !important;
  --fct-cart-drawer-open-btn-bg-color:    var(--tl-lime) !important;
  --fct-cart-drawer-close-btn-color:      var(--tl-text-lo) !important;
  --fct-cart-drawer-quantity-bg-color:    var(--tl-black) !important;
  --fct-cart-drawer-quantity-color:       var(--tl-text-hi) !important;
  --fct-cart-drawer-quantity-border-color: var(--tl-line-strong) !important;
  --fct-cart-drawer-quantity-btn-bg:      transparent !important;
  --fct-cart-drawer-quantity-btn-color:   var(--tl-text-mid) !important;
  --fct-cart-drawer-quantity-btn-hover-bg: var(--tl-surface-hover) !important;
  --fct-cart-drawer-badge-bg-color:       var(--tl-lime) !important;
  --fct-cart-drawer-badge-text-color:     var(--tl-on-lime) !important;
  --fct-cart-drawer-btn-bg-color:         var(--tl-lime) !important;
  --fct-cart-drawer-btn-text-color:       var(--tl-on-lime) !important;
  --fct-cart-drawer-btn-border-color:     var(--tl-lime) !important;
  --fct-cart-drawer-footer-action-bg-color: var(--tl-surface-3) !important;
  --fct-view-cart-btn-bg-color:           transparent !important;
  --fct-view-cart-drawer-btn-color:       var(--tl-text-hi) !important;
  --fct-view-cart-drawer-btn-border-color: var(--tl-line-strong) !important;
  --fct-view-cart-drawer-btn-hover-bg:    var(--tl-surface-hover) !important;
  --fct-cart-item-delete-btn-bg-color:    transparent !important;
  --fct-cart-item-delete-btn-hover-bg-color: rgba(255, 60, 60, .1) !important;
  --fct-cart-item-delete-btn-border-color: transparent !important;
  --fct-cart-item-delete-btn-color:       var(--tl-text-faint) !important;

  /* Magazijn */
  --fct-shop-primary-text-color:   var(--tl-text-hi) !important;
  --fct-shop-secondary-text-color: var(--tl-text-mid) !important;
  --fct-shop-primary-bg-color:     var(--tl-lime) !important;
  --fct-shop-secondary-bg-color:   var(--tl-surface-3) !important;
  --fct-shop-border-color:         var(--tl-line) !important;
  --fct-shop-divider-color:        var(--tl-line) !important;
  --fct-shop-btn-bg-color:         var(--tl-lime) !important;
  --fct-shop-btn-text-color:       var(--tl-on-lime) !important;
  --fct-shop-checkmark-bg:         var(--tl-black) !important;
  --fct-shop-checkmark-border-color: var(--tl-line-strong) !important;
  --fct-shop-checkmark-active-bg:  var(--tl-lime) !important;
  --fct-shop-checkmark-active-border-color: var(--tl-lime) !important;
  --fct-shop-checkmark-check-border-color: var(--tl-on-lime) !important;
  --fct-shop-view-switcher-active-bg: var(--tl-surface-hover) !important;
  --fct-shop-view-switcher-color:  var(--tl-text-mid) !important;
  --fct-shop-paginator-bg:         transparent !important;
  --fct-shop-paginator-border-color: var(--tl-line) !important;
  --fct-shop-paginator-items-color: var(--tl-text-mid) !important;
  --fct-shop-paginator-items-active-bg: var(--tl-lime) !important;
  --fct-shop-paginator-items-active-color: var(--tl-on-lime) !important;
  --fct-shop-paginator-items-hover-bg: var(--tl-surface-hover) !important;
  --fct-shop-input-bg:             var(--tl-black) !important;
  --fct-shop-input-border:         var(--tl-line-strong) !important;

  /* Klantendashboard */
  --fct-customer-dashboard-primary-text-color:   var(--tl-text-hi) !important;
  --fct-customer-dashboard-secondary-text-color: var(--tl-text-mid) !important;
  --fct-customer-dashboard-title-color:          var(--tl-text-hi) !important;
  --fct-customer-dashboard-sub-title-color:      var(--tl-text-mid) !important;
  --fct-customer-dashboard-text-color:           var(--tl-text-mid) !important;
  --fct-customer-dashboard-border-color:         var(--tl-line) !important;
  --fct-customer-dashboard-divider-color:        var(--tl-line) !important;
  --fct-customer-dashboard-btn-bg-color:         var(--tl-lime) !important;
  --fct-customer-dashboard-btn-border-color:     var(--tl-lime) !important;
  --fct-customer-dashboard-btn-text-color:       var(--tl-on-lime) !important;
  --fct-customer-dashboard-nav-text-color:       var(--tl-text-mid) !important;
  --fct-customer-dashboard-nav-active-text-color: var(--tl-on-lime) !important;
  --fct-customer-dashboard-nav-active-bg-color:  var(--tl-lime) !important;
  --fct-customer-dashboard-nav-active-bar-color: var(--tl-lime) !important;
  --fct-customer-dashboard-paginator-text-color: var(--tl-text-mid) !important;
  --fct-customer-dashboard-paginator-items-active-bg: var(--tl-lime) !important;
  --fct-customer-dashboard-paginator-items-active-color: var(--tl-on-lime) !important;
  --fct-customer-dashboard-paginator-items-active-border: var(--tl-lime) !important;
  --fct-customer-dashboard-logout-btn-bg-color:  transparent !important;
  --fct-customer-dashboard-logout-btn-text-color: var(--tl-danger) !important;
  --fct-customer-dashboard-logout-btn-hover-bg-color: rgba(255, 60, 60, .1) !important;

  /* Carrousel. FluentCart levert hier een compleet lichte set aan. */
  --fct-carousel-bg:                var(--tl-surface-3) !important;
  --fct-carousel-bg-gradient-start: var(--tl-surface-3) !important;
  --fct-carousel-bg-gradient-end:   var(--tl-surface-3) !important;
  --fct-carousel-primary:           var(--tl-text-hi) !important;
  --fct-carousel-primary-light:     var(--tl-text-mid) !important;
  --fct-carousel-secondary:         var(--tl-text-lo) !important;
  --fct-carousel-active-color:      var(--tl-lime) !important;
  --fct-carousel-border:            var(--tl-line) !important;
  --fct-carousel-border-subtle:     var(--tl-line) !important;
  --fct-carousel-border-emphasis:   var(--tl-line-strong) !important;
  --fct-carousel-border-radius:     0px !important;
  --fct-carousel-border-radius-sm:  0px !important;
  --fct-carousel-hover-border:      var(--tl-lime) !important;
  --fct-carousel-arrow-bg-start:    var(--tl-surface-3) !important;
  --fct-carousel-arrow-bg-end:      var(--tl-surface-3) !important;
  --fct-carousel-arrow-border:      var(--tl-line-strong) !important;
  --fct-carousel-arrow-color:       var(--tl-text-hi) !important;
  --fct-carousel-arrow-hover-bg-start: var(--tl-lime) !important;
  --fct-carousel-arrow-hover-bg-end:   var(--tl-lime) !important;
  --fct-carousel-arrow-hover-color: var(--tl-on-lime) !important;
  --fct-carousel-arrow-shadow:      none !important;
  --fct-carousel-shadow-sm:         none !important;
  --fct-carousel-shadow-md:         none !important;
  --fct-carousel-shadow-lg:         none !important;
  --fct-carousel-dot-inactive:      var(--tl-line-strong) !important;
  --fct-carousel-dot-hover:         var(--tl-text-lo) !important;
  --fct-carousel-dot-active:        var(--tl-lime) !important;
  --fct-carousel-pagination-bg:     transparent !important;
  --fct-carousel-pagination-border: transparent !important;
  --fct-carousel-overlay-gradient:  none !important;
  --fct-carousel-hover-scale:       1 !important;
  --fct-carousel-transition-timing: var(--tl-ease) !important;
}

/* --------------------------------------------------------------------------
   3. Reset binnen FluentCart
       Geen kleur op *, dat sloopte in v3 de hierarchie. Alleen achtergrond,
       schaduw, hoeken en randkleur. Alles wat daarna nog een eigen vlak hoort
       te hebben krijgt dat verderop expliciet terug.
   -------------------------------------------------------------------------- */
.fct-checkout,
.fct_checkout,
.fct-modal-checkout-form-wrapper,
.fct-checkout-modal,
.fct-shop-app,
.fct-product-card,
.fct-product-carousel,
.fct-single-product-page,
.fct-advanced-variation-wrap,
.fct-cart-drawer,
.fct-cart-page,
.fct_customer_profile_wrap,
.fct-thank-you-page,
.fluent-cart-checkout-order-receipt {
  background-color: var(--tl-black);
  color: var(--tl-text-mid);
  font-family: var(--tl-body);
}

.fct-checkout *,
.fct_checkout *,
.fct-modal-checkout-form-wrapper *,
.fct-checkout-modal *,
.fct-shop-app *,
.fct-product-card *,
.fct-product-carousel *,
.fct-single-product-page *,
.fct-advanced-variation-wrap *,
.fct-cart-drawer *,
.fct-cart-page *,
.fct_customer_profile_wrap *,
.fct-thank-you-page *,
.fluent-cart-checkout-order-receipt * {
  background-color: transparent !important;
  border-color: var(--tl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Afbeeldingen en svg's houden hun eigen ding */
.fct-checkout img, .fct-modal-checkout-form-wrapper img, .fct-shop-app img,
.fct-product-card img, .fct-single-product-page img, .fct-cart-drawer img,
.fct-cart-page img, .fct_customer_profile_wrap img, .fct-thank-you-page img {
  background: none !important;
}

/* Rond blijft rond: avatar, statusbolletje en telbadge */
.fct-cart-badge-count,
.fct-customer-dashboard-customer-info img,
.fct-reviews-picture,
.fct-reviews-picture img,
.fct-swatch-dot,
.fct-swatch-color {
  border-radius: var(--tl-r-pill) !important;
}

/* --------------------------------------------------------------------------
   4. Typografie
       Huisstijl: H1 tot en met H6 in Roboto Condensed 700 in hoofdletters.
       900 is alleen voor display, hero en knoppen. v3 zette overal 900 en
       daardoor viel het verschil tussen kop en subkop helemaal weg.
   -------------------------------------------------------------------------- */
.fct-checkout h1, .fct-checkout h2, .fct-checkout h3, .fct-checkout h4, .fct-checkout h5, .fct-checkout h6,
.fct-modal-checkout-form-wrapper h1, .fct-modal-checkout-form-wrapper h2,
.fct-modal-checkout-form-wrapper h3, .fct-modal-checkout-form-wrapper h4,
.fct-shop-app h1, .fct-shop-app h2, .fct-shop-app h3, .fct-shop-app h4,
.fct-single-product-page h1, .fct-single-product-page h2, .fct-single-product-page h3,
.fct-cart-drawer h1, .fct-cart-drawer h2, .fct-cart-drawer h3, .fct-cart-drawer h4,
.fct-cart-page h2, .fct-cart-page h3,
.fct_customer_profile_wrap h1, .fct_customer_profile_wrap h2,
.fct_customer_profile_wrap h3, .fct_customer_profile_wrap h4,
.fct-thank-you-page h1, .fct-thank-you-page h2, .fct-thank-you-page h3, .fct-thank-you-page h4,
.fct_form_section_header_label,
.fct-modal-billing-title,
.fct-modal-cs-item-name,
.fct-product-title,
.fct-product-tab-nav-item,
.fct-customer-dashboard-title,
.fct-order-summary-header-title,
.form-heading {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Secundaire tekst blijft grijs, anders wordt alles even hard */
.fct-product-excerpt, .fct-product-excerpt p,
.fct-product-sku, .fct-product-sku__label,
.fct-modal-cs-item-variation, .fct-modal-cs-payment-info,
.fct_address_info p, .fct_address_selector_info,
.fct_summary_label, .fct-meta-line-label,
.fluent-cart-cart-empty-content-text,
.fct-cart-item-variant, .fct-cart-item-price,
.form-desc {
  color: var(--tl-text-mid) !important;
}

.fct-product-sku__label,
.fct_tax_summary_row--head span,
.fct_tax_summary_row--muted span,
.fct-thank-you-tax-summary-row--muted,
.fct-customer-tax-row--muted, .fct-customer-tax-row--muted span,
.fct-customer-tax-breakdown-col-headers {
  color: var(--tl-text-lo) !important;
}

/* Prijzen zijn cijferwerk, die mogen display-gewicht hebben */
.fct-item-price, .fct-price-range,
.fct-product-item-price, .fct-product-variant-price,
.fct-modal-cs-line-price,
.fct_line_item_total, .fct_summary_value,
.fct-cart-item-total span,
.fct-order-total {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.fct_summary_items_total .fct_summary_label,
.fct_summary_items_total .fct_summary_value,
.fct-cart-total-wrapper span,
.fct-thank-you-page-order-items-total-value {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  text-transform: uppercase;
}

/* Sectie-eyebrow, klein label in lime */
.fct_tax_summary_heading,
.fct-customer-tax-breakdown-heading,
.fct-thank-you-tax-summary-title {
  color: var(--tl-lime) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* Links: wit, lime op hover, geen onderstreping */
.fct-checkout a:not([class*="btn"]):not([class*="button"]),
.fct-modal-checkout-form-wrapper a:not([class*="btn"]):not([class*="button"]),
.fct-cart-drawer a:not([class*="btn"]):not([class*="button"]),
.fct-thank-you-page a:not([class*="btn"]):not([class*="button"]) {
  color: var(--tl-text-hi) !important;
  text-decoration: none !important;
  transition: color var(--tl-dur) var(--tl-ease);
}
.fct-checkout a:not([class*="btn"]):hover,
.fct-modal-checkout-form-wrapper a:not([class*="btn"]):hover,
.fct-cart-drawer a:not([class*="btn"]):hover,
.fct-thank-you-page a:not([class*="btn"]):hover {
  color: var(--tl-lime) !important;
}

/* --------------------------------------------------------------------------
   5. Knoppen
       Huisstijl: Roboto Condensed 900, hoofdletters, 0px hoeken,
       letterspatiering 0.12em, rand 2px, overgang 200ms.
       Groot is 16px boven en onder met 36px links en rechts.
   -------------------------------------------------------------------------- */
.fct_place_order_btn,
.fct_address_apply_btn,
.fct_address_submit_btn,
.fluent-cart-add-to-cart-button,
.wp-block-fluent-cart-add-to-cart-button,
.checkout-button,
.fct-cart-page a.checkout-button,
.fct_coupon_field button,
.fct_tax_input_wrapper button,
.fct-thank-you-page-view-order-button,
.fct-thank-you-page-download-receipt-button,
.fct-thank-you-page-order-items-downloads-button,
.fct-thank-you-page-order-items-licenses-button,
.fct-thank-you-page-order-items-subscriptions-button,
.fct_customer_profile_wrap .el-button--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--tl-lime) !important;
  border: 2px solid var(--tl-lime) !important;
  border-radius: var(--tl-r-0) !important;
  color: var(--tl-on-lime) !important;
  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 16px 36px !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease) !important;
}

.fct_place_order_btn *,
.fct_address_apply_btn *,
.fct_address_submit_btn *,
.fluent-cart-add-to-cart-button *,
.checkout-button *,
.fct_coupon_field button *,
.fct-thank-you-page-view-order-button *,
.fct_customer_profile_wrap .el-button--primary * {
  color: var(--tl-on-lime) !important;
  fill: var(--tl-on-lime) !important;
  stroke: var(--tl-on-lime) !important;
}

.fct_place_order_btn:hover,
.fct_address_apply_btn:hover,
.fct_address_submit_btn:hover,
.fluent-cart-add-to-cart-button:hover,
.checkout-button:hover,
.fct_coupon_field button:hover,
.fct-thank-you-page-view-order-button:hover,
.fct_customer_profile_wrap .el-button--primary:hover {
  background: var(--tl-lime-hover) !important;
  border-color: var(--tl-lime-hover) !important;
  color: var(--tl-on-lime) !important;
}
.fct_place_order_btn:active,
.fluent-cart-add-to-cart-button:active,
.checkout-button:active {
  background: var(--tl-lime-press) !important;
  border-color: var(--tl-lime-press) !important;
}
.fct_place_order_btn:disabled,
.fct_place_order_btn[disabled],
.fluent-cart-add-to-cart-button:disabled {
  opacity: .4 !important;
  cursor: not-allowed;
}

/* Secundair: doorzichtig met witte tekst en rand #3a3a3a.
   Op hover vult hij lime met zwarte tekst. Zo staat het in de gids en zo
   stond het niet in v3, daar vulde hij wit. */
.fct_address_cancel_btn,
.fct_address_add_btn,
.fct-see-more-btn,
.fct-gallery-see-more-button,
.fct_customer_profile_wrap .el-button:not(.el-button--primary) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 2px solid var(--tl-line-strong) !important;
  border-radius: var(--tl-r-0) !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 24px !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease),
              color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease) !important;
}
.fct_address_cancel_btn:hover,
.fct_address_add_btn:hover,
.fct-see-more-btn:hover,
.fct_customer_profile_wrap .el-button:not(.el-button--primary):hover {
  background: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fct_address_cancel_btn:hover *,
.fct_address_add_btn:hover *,
.fct_customer_profile_wrap .el-button:not(.el-button--primary):hover * {
  color: var(--tl-on-lime) !important;
  fill: var(--tl-on-lime) !important;
  stroke: var(--tl-on-lime) !important;
}

/* Ghost: alleen tekst, hover vult #222222 en tekst wordt lime */
.fct_address_modal_open_btn,
.fct-modal-input-toggle-btn,
.fct_coupon_toggle a,
.fct-customer-dashboard-header .is-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--tl-lime) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  cursor: pointer;
}
.fct_address_modal_open_btn:hover,
.fct-modal-input-toggle-btn:hover,
.fct_coupon_toggle a:hover {
  background: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
  text-decoration: none !important;
}
.fct_address_modal_open_btn svg { stroke: currentColor !important; }

/* Danger */
.fct-customer-logout-btn {
  background: transparent !important;
  border: 2px solid var(--tl-danger) !important;
  border-radius: var(--tl-r-0) !important;
  color: var(--tl-danger) !important;
  font-family: var(--tl-head) !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.fct-customer-logout-btn *,
.fct-customer-logout-btn svg path {
  color: var(--tl-danger) !important;
  fill: var(--tl-danger) !important;
}
.fct-customer-logout-btn:hover {
  background: var(--tl-danger) !important;
  color: var(--tl-white) !important;
}
.fct-customer-logout-btn:hover *,
.fct-customer-logout-btn:hover svg path {
  color: var(--tl-white) !important;
  fill: var(--tl-white) !important;
}

/* --------------------------------------------------------------------------
   6. De blokknop Nu kopen
       Dit is een wp-block-button__link met de klasse
       wp-block-fluent-cart-buy-now-button. Hij zit los in een kolom en niet
       in een wp-block-buttons wrapper, dus hij rekt mee met de kolom. Vandaar
       dat enorme grijze vlak. Alles wat hem kan uitrekken staat hieronder uit.
   -------------------------------------------------------------------------- */
a.wp-block-fluent-cart-buy-now-button,
.wp-block-fluent-cart-buy-now-button,
a.wp-block-fluent-cart-add-to-cart-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  background: var(--tl-lime) !important;
  background-image: none !important;
  border: 2px solid var(--tl-lime) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-on-lime) !important;

  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;

  padding: 16px 36px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease) !important;
}
a.wp-block-fluent-cart-buy-now-button:hover,
a.wp-block-fluent-cart-add-to-cart-button:hover {
  background: var(--tl-lime-hover) !important;
  border-color: var(--tl-lime-hover) !important;
  color: var(--tl-on-lime) !important;
}
a.wp-block-fluent-cart-buy-now-button:active {
  background: var(--tl-lime-press) !important;
  border-color: var(--tl-lime-press) !important;
}
a.wp-block-fluent-cart-buy-now-button * {
  color: var(--tl-on-lime) !important;
}

/* --------------------------------------------------------------------------
   7. Invoervelden, aanvinkvakken en keuzerondjes
       Huisstijl: vulling zwart, rand 1px #3a3a3a, 0px hoeken, Inter 15px,
       binnenruimte 12px en 14px. Op focus wordt de rand lime.
   -------------------------------------------------------------------------- */
.fct-checkout input[type="text"], .fct-checkout input[type="email"],
.fct-checkout input[type="tel"], .fct-checkout input[type="number"],
.fct-checkout select, .fct-checkout textarea,
.fct-modal-checkout-form-wrapper input[type="text"],
.fct-modal-checkout-form-wrapper input[type="email"],
.fct-modal-checkout-form-wrapper input[type="tel"],
.fct-modal-checkout-form-wrapper select,
.fct-modal-checkout-form-wrapper textarea,
.fct-modal-checkout-form-wrapper .fct_checkout_input_group input,
.fct-modal-checkout-form-wrapper .fct-modal-form-info input,
.fct-modal-checkout-form-wrapper .fct-modal-input-controls input,
.fct-shop-app input[type="text"], .fct-shop-app input[type="search"],
.fct-shop-app input[type="number"],
.fct-single-product-page .fct-quantity-input,
.fct-cart-page input[type="number"],
.fct-input, .fct-input-text, .fct_coupon_input,
.fct-custom-select__trigger {
  background-color: var(--tl-black) !important;
  background-image: none !important;
  color: var(--tl-text-hi) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}

.fct-checkout input::placeholder,
.fct-checkout textarea::placeholder,
.fct-modal-checkout-form-wrapper input::placeholder,
.fct-modal-checkout-form-wrapper .fct_checkout_input_group input::placeholder,
.fct-shop-app input::placeholder,
.fct_coupon_input::placeholder {
  color: var(--tl-text-faint) !important;
  font-size: 15px !important;
}

.fct-checkout input:focus, .fct-checkout select:focus, .fct-checkout textarea:focus,
.fct-modal-checkout-form-wrapper input:focus,
.fct-modal-checkout-form-wrapper .fct_checkout_input_group input:focus,
.fct-modal-checkout-form-wrapper .fct-modal-form-info input:focus,
.fct-modal-checkout-form-wrapper .fct-modal-input-controls input:focus,
.fct-shop-app input:focus,
.fct_customer_profile_wrap input:focus {
  background-color: var(--tl-black) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-text-hi) !important;
  box-shadow: none !important;
  outline: none !important;
}

.fct-modal-checkout-form-wrapper input:disabled,
.fct-modal-checkout-form-wrapper .fct-modal-form-info input:disabled,
.fct-checkout input:disabled {
  background-color: var(--tl-surface-3) !important;
  color: var(--tl-text-faint) !important;
  -webkit-text-fill-color: var(--tl-text-faint) !important;
}

/* Automatisch invullen door de browser maakt het veld anders blauwwit */
.fct-checkout input:-webkit-autofill,
.fct-modal-checkout-form-wrapper input:-webkit-autofill {
  -webkit-text-fill-color: var(--tl-text-hi) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--tl-black) inset !important;
  caret-color: var(--tl-text-hi);
}

/* Label boven een veld: klein hoofdletterlabel */
.fct_input_label, .fct_input_label_text,
.fct-modal-form-info label {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
/* Behalve het label naast een aanvinkvak, dat is gewoon leestekst */
.fct_input_label_checkbox,
.fct_checkout_agree_terms label,
.fct_b2b_toggle_wrapper label {
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Aanvinkvak: 20 bij 20, zwart met rand, aan is lime met zwart vinkje.
   FluentCart tekent het vinkje zelf met een :before, dus die moet zwart. */
.fct-checkout input[type="checkbox"],
.fct-modal-checkout-form-wrapper input[type="checkbox"],
.fct-input-checkbox,
.fct-shop-app input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease);
}
.fct-checkout input[type="checkbox"]:checked,
.fct-modal-checkout-form-wrapper input[type="checkbox"]:checked,
.fct-input-checkbox:checked,
.fct-shop-app input[type="checkbox"]:checked {
  background-color: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
}
.fct-checkout input[type="checkbox"]:before,
.fct-modal-checkout-form-wrapper input[type="checkbox"]:before,
.fct_checkout input[type="checkbox"]:before {
  border-color: var(--tl-on-lime) !important;
  left: 6px !important;
  top: 2px !important;
  height: 11px !important;
  width: 6px !important;
}

/* Keuzerondje bij betaalmethodes */
.fct-checkout input[type="radio"],
.fct-modal-checkout-form-wrapper input[type="radio"],
.form-radio-input {
  accent-color: var(--tl-lime) !important;
  background-color: var(--tl-black) !important;
  border-color: var(--tl-line-strong) !important;
}

/* --------------------------------------------------------------------------
   8. De afrekenmodal
       Twee kanten. De schil staat op de pagina zelf, de inhoud draait in een
       iframe op hetzelfde domein. Omdat dat iframe ook een pagina van jouw
       WordPress is, laadt dit bestand daar gewoon mee. Beide staan hieronder.
   -------------------------------------------------------------------------- */

/* --- Kant 1, de schil op de pagina --- */
.fct-checkout-modal-container {
  background-color: rgba(10, 10, 10, .72) !important;
}
.fct-checkout-modal {
  max-width: 1100px !important;      /* gelijk aan --container uit de gids */
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line) !important;
  border-top: 3px solid var(--tl-lime) !important;   /* de dialoogbalk */
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct-checkout-modal .fct-checkout-modal-close {
  width: 32px !important;
  height: 32px !important;
  top: 12px !important;
  right: 12px !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-mid) !important;
  opacity: 1 !important;
  transition: background-color var(--tl-dur) var(--tl-ease),
              color var(--tl-dur) var(--tl-ease);
}
.fct-checkout-modal .fct-checkout-modal-close:hover,
.fct-checkout-modal .fct-checkout-modal-close:focus {
  background-color: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}
.fct-checkout-modal-iframe,
.fct-checkout-modal-loader {
  background-color: var(--tl-black) !important;
}
.fct-checkout-modal-loader-spinner:before,
.fct-checkout-modal-loader-spinner:after {
  border-color: var(--tl-lime) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}

/* --------------------------------------------------------------------------
   8b. De productmodal (snelle weergave / "quick view")
       Dit is een andere modal dan de afrekenmodal hierboven: die opent
       vanuit een productkaart in de winkel en toont het product zonder naar
       de losse productpagina te gaan. Rendert los van .fct-shop-app in de
       DOM (niet als kind ervan), dus de shop-reset uit sectie 3 bereikt hem
       niet — zonder deze losse regels bleef de modal wit, met een witte
       rand eromheen.
   -------------------------------------------------------------------------- */
.fct-product-modal-overlay {
  background-color: rgba(0, 0, 0, .72) !important;
}
.fluent-cart-shop-app-single-product-modal,
.fct-product-modal,
.fct-product-modal-body {
  background-color: var(--tl-black) !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
}
.fluent-cart-shop-app-single-product-modal *,
.fct-product-modal *,
.fct-product-modal-body * {
  background-color: transparent !important;
  border-color: var(--tl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fluent-cart-shop-app-single-product-modal img,
.fct-product-modal img,
.fct-product-modal-body img {
  background: none !important;
}
.fct-product-modal h1, .fct-product-modal h2, .fct-product-modal h3,
.fct-product-modal-body h1, .fct-product-modal-body h2, .fct-product-modal-body h3 {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
}

/* --- Kant 2, de pagina binnen het iframe --- */
html:has(.fct-modal-checkout-form-wrapper),
body:has(.fct-modal-checkout-form-wrapper) {
  background-color: var(--tl-black) !important;
}
.fct-modal-checkout-form-wrapper {
  background-color: var(--tl-black) !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
}
.fct-modal-checkout-form-wrapper label {
  color: var(--tl-text-mid) !important;
}

/* Linkerkolom, het verhoogde paneel met de bestelling */
.fct-modal-checkout-details {
  background-color: var(--tl-surface-2) !important;
  border-right: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  padding: 32px !important;
  gap: 24px !important;
}
.fct-modal-checkout-billing-wrap {
  padding: 32px !important;
}

/* De productkaart bovenin */
.fct-modal-checkout-summary {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.fct-modal-checkout-summary .fct-modal-cs-img,
.fct-modal-checkout-summary .fct-modal-cs-img img {
  border-radius: 0 !important;
}
.fct-modal-checkout-summary .fct-modal-cs-img img {
  border: 1px solid var(--tl-line) !important;
}
.fct-modal-cs-item-name {
  font-size: 16px !important;
}
.fct-modal-cs-line-price {
  color: var(--tl-text-hi) !important;
}
.fct-modal-checkout-summary .fct-modal-cs-license {
  background-color: var(--tl-surface-hover) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: var(--tl-r-sm) !important;
  color: var(--tl-text-mid) !important;
}

/* Adresblok */
.fct_address_info {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  padding: 16px !important;
}
.fct_checkout_address_label span {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fct_address_wrapper p span {
  background-color: transparent !important;
}

/* Scheiding tussen accountgegevens en facturatie */
.fct-modal-account-details {
  border-bottom: 1px solid var(--tl-line) !important;
  padding-bottom: 32px !important;
  margin-bottom: 24px !important;
}
.fct-divider {
  background-color: var(--tl-line) !important;
}

/* Betaalmethodes */
.fct_payment_method_wrapper,
.fct_modal_payment_methods .fct_payment_method_wrapper {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct_payment_method_wrapper.active,
.fct_modal_payment_methods .fct_payment_method_wrapper.active {
  background-color: var(--tl-lime-dim) !important;
  border-color: var(--tl-lime) !important;
}
.fct_modal_payment_methods .fct_payment_method_logo label,
.fct_payment_method_wrapper label {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.fct_payment_methods_list { padding: 0 !important; }
.fct-payment-method-loader svg { color: var(--tl-lime) !important; }
#fct_loading_payment_processor { color: var(--tl-danger) !important; }

/* Waardebon */
.fct_coupon_field {
  border: 1px solid var(--tl-line-strong) !important;
}
.fct_coupon_icon svg [stroke] { stroke: var(--tl-text-lo) !important; }
.fct-modal-coupon-applied .fct-coupon {
  background-color: var(--tl-surface-hover) !important;
  border-radius: var(--tl-r-sm) !important;
  color: var(--tl-text-mid) !important;
}
.fct-modal-coupon-applied .fct-remove-coupon:hover {
  background-color: var(--tl-danger) !important;
  color: var(--tl-white) !important;
}
.fct-modal-coupon-applied .fct-coupon-text,
.fct-modal-coupon-applied .fct-coupon-price { color: var(--tl-text-mid) !important; }

/* Beoordelingen in de modal, als je die aanzet */
.fct-modal-checkout-reviews {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.fct-modal-checkout-reviews .fct-review-stars { color: var(--tl-lime) !important; }
.fct-modal-checkout-reviews .fct-reviews-text,
.fct-modal-checkout-reviews .fct-review-author-info { color: var(--tl-text-mid) !important; }

/* De totalenlijst onderin */
.fct_summary_items_list li,
.fct-modal-checkout-summary-items li { color: var(--tl-text-mid) !important; }
.fct_summary_items_total,
.fct-modal-checkout-summary-items .fct_summary_items_total {
  border-top: 1px solid var(--tl-line) !important;
  padding-top: 16px !important;
}

/* Foutmeldingen */
.fct_form_error, .fct_form_error * { color: var(--tl-danger) !important; }

/* --------------------------------------------------------------------------
   9. Belastingblokken
       FluentCart zet hier kleuren als inline style op de spans, dus die
       moeten hard overschreven worden. Ook de twee vaste badgekleuren
       (lichtgroen en lichtgeel) zitten hardgecodeerd in de plugin.
   -------------------------------------------------------------------------- */
.fct_tax_summary_box,
.fct-customer-tax-box,
.fct-thank-you-tax-summary {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  padding: 16px !important;
}
.fct_tax_summary_row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.fct_tax_summary_row--total,
.fct-customer-tax-row--divider,
.fct-thank-you-tax-summary-row--total {
  border-top: 1px solid var(--tl-line) !important;
  margin-top: 8px;
  padding-top: 8px;
}
.fct_tax_summary_row--total .fct_tax_summary_row_label,
.fct_tax_summary_row--total .fct_tax_summary_row_amount,
.fct-thank-you-tax-summary-row--total {
  color: var(--tl-text-hi) !important;
  font-weight: 700 !important;
}
.fct_tax_simple_label { color: var(--tl-text-mid) !important; }
.fct_tax_simple_value { color: var(--tl-text-hi) !important; }
.fct_tax_simple_toggle { color: var(--tl-lime) !important; font-size: 11px !important; }

/* Btw-label bij een regel. Zonder dit is het een groen of geel blokje. */
.fct_item_tax_badge, .fct-tax-badge, .fct-tax-pill,
.fct_item_tax_badge.is-inclusive, .fct_item_tax_badge.is-exclusive,
.fct-tax-pill--inclusive, .fct-tax-pill--exclusive {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center;
  background-color: transparent !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: var(--tl-r-sm) !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
}
.fct_item_tax_badge_amount, .fct-tax-amount, .fct-item-tax-pill-amount {
  color: var(--tl-text-mid) !important;
  font-size: 11px !important;
}
.fct_item_tax_badges, .fct_item_tax_badge_row {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Het i-knopje en de tooltip */
.fct_item_tax_hint_button, .fct-item-tax-hint-icon {
  width: 16px !important; min-width: 16px !important;
  height: 16px !important; min-height: 16px !important;
  background-color: transparent !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: var(--tl-r-pill) !important;
  color: var(--tl-text-lo) !important;
  font-size: 10px !important;
  padding: 0 !important;
}
.fct_item_tax_hint_button:hover, .fct-item-tax-hint-icon:hover {
  border-color: var(--tl-lime) !important;
  color: var(--tl-lime) !important;
}
.fct_item_tax_tooltip, .fct-item-tax-hint-tooltip, .fct-product-variant-tooltip {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-mid) !important;
  padding: 12px !important;
}
.fct_item_tax_tooltip_heading { color: var(--tl-text-hi) !important; font-weight: 600 !important; }

/* --------------------------------------------------------------------------
   10. Productpagina
   -------------------------------------------------------------------------- */
.fct-single-product-page,
.fct-single-product-page-body,
.fct-single-product-page-row {
  background-color: var(--tl-black) !important;
}
.fct-product-title, .fct-product-title h1 {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1.0 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase !important;
}
.fct-product-prices, .fct-product-item-price {
  font-size: 25px !important;
}
.fct-product-payment-type, .fct-product-variant-payment-type {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-size: 14px !important;
}
.fct-product-excerpt, .fct-product-excerpt p {
  font-family: var(--tl-body) !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* Galerij */
.fct-product-gallery-wrapper, .fct-single-product-page-product-thumbnail-wrapper {
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
}
.fct-product-gallery-thumb {
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  opacity: .6;
  transition: opacity var(--tl-dur) var(--tl-ease), border-color var(--tl-dur) var(--tl-ease);
}
.fct-product-gallery-thumb:hover,
.fct-product-gallery-thumb.active {
  border-color: var(--tl-lime) !important;
  opacity: 1;
}
.fct-gallery-thumb-control-button {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
}
.fct-gallery-thumb-control-button:hover {
  background-color: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fct-lightboxOverlay { background-color: rgba(0, 0, 0, .9) !important; }
.fct-lightbox .lb-data .lb-caption,
.fct-lightbox .lb-data .lb-number { color: var(--tl-text-mid) !important; }

/* Varianten. FluentCart geeft de gekozen variant een witte vulling, dus die
   moet terug naar zwart met een lime rand. */
.fct-product-variant-item,
.fct-attribute-selector .fct-swatch-item,
.fct-attribute-selector .fct-swatch-label,
.fct-attribute-selector .fct-swatch-image-only {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: border-color var(--tl-dur) var(--tl-ease),
              background-color var(--tl-dur) var(--tl-ease),
              color var(--tl-dur) var(--tl-ease);
}
.fct-product-variant-item:hover:not(.selected):not(.disabled),
.fct-attribute-selector .fct-swatch-label:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-attribute-selector .fct-swatch-item:hover:not(.selected):not(.disabled):not([aria-checked="true"]) {
  background-color: var(--tl-surface-hover) !important;
  border-color: var(--tl-line-strong) !important;
  color: var(--tl-text-hi) !important;
}
.fct-product-variant-item.selected,
.fct-product-variant-item.selected:hover,
.fct-product-variant-item.selected:focus,
.fct-product-variant-item.selected:active,
.fct-attribute-selector .fct-swatch-label.selected,
.fct-attribute-selector .fct-swatch-label.selected:hover,
.fct-attribute-selector .fct-swatch-label.selected:focus,
.fct-attribute-selector .fct-swatch-label.selected:active,
.fct-attribute-selector .fct-swatch-item.selected,
.fct-attribute-selector .fct-swatch-item.selected:hover,
.fct-attribute-selector .fct-swatch-item.selected:focus,
.fct-attribute-selector .fct-swatch-item.selected:active,
.fct-attribute-selector .fct-swatch-color.selected,
.fct-attribute-selector .fct-swatch-image.selected {
  background-color: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fct-product-variant-item.selected *,
.fct-attribute-selector .fct-swatch-label.selected * {
  color: var(--tl-on-lime) !important;
}
.fct-product-variant-item.disabled,
.fct-attribute-selector .disabled {
  opacity: .4 !important;
  cursor: not-allowed;
}
.fct-product-variant-compare-price {
  color: var(--tl-text-faint) !important;
  text-decoration: line-through;
}
.fct-attribute-label, .fct-option-label, .fct-selected-term-title {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Uitklapkeuze bij varianten */
.fct-custom-select .fct-custom-select__trigger {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  color: var(--tl-text-hi) !important;
}
.fct-custom-select .fct-custom-select__options {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct-custom-select .fct-custom-select__option { color: var(--tl-text-mid) !important; }
.fct-custom-select .fct-custom-select__option:hover {
  background-color: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}
.fct-custom-select__arrow { color: var(--tl-text-lo) !important; }

/* Hoeveelheid */
.fct-product-quantity-container, .fct-product-quantity {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
}
.fct-quantity-input {
  border: 0 !important;
  text-align: center;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
}
.fct-quantity-decrease-button, .fct-quantity-increase-button {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-mid) !important;
  cursor: pointer;
}
.fct-quantity-decrease-button:hover, .fct-quantity-increase-button:hover {
  background-color: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}

/* Voorraadlabel */
.fct-stock-badge, .fct-stock-label,
.fct_status_badge_in-stock, .fct_status_badge_out-of-stock {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  background-color: var(--tl-lime-dim) !important;
  border: 1px solid var(--tl-lime-line) !important;
  border-radius: var(--tl-r-sm) !important;
  color: var(--tl-lime) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
}
.fct_status_badge_out-of-stock {
  background-color: rgba(255, 60, 60, .1) !important;
  border-color: var(--tl-danger) !important;
  color: var(--tl-danger) !important;
}

/* Twee knoppen naast elkaar. In winkelwagen is primair, Nu kopen is de
   tweede keus, anders staan er twee lime knoppen te vechten. */
.fct-product-buttons-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.fluent-cart-direct-checkout-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 2px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 16px 36px !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease),
              color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease) !important;
}
.fluent-cart-direct-checkout-button:hover {
  background: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fluent-cart-direct-checkout-button:hover * { color: var(--tl-on-lime) !important; }

/* Tabbladen onder het product */
.fct-product-tab-nav {
  border-bottom: 1px solid var(--tl-line) !important;
  gap: 0 !important;
}
.fct-product-tab-nav-item {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  cursor: pointer;
  transition: color var(--tl-dur) var(--tl-ease), border-color var(--tl-dur) var(--tl-ease);
}
.fct-product-tab-nav-item:hover { color: var(--tl-lime) !important; }
.fct-product-tab-nav-item.active {
  border-bottom-color: var(--tl-lime) !important;
  color: var(--tl-text-hi) !important;
}
.fct-product-tab-pane { color: var(--tl-text-mid) !important; }

/* Pakketgegevens, die tabel had lichte lijnen */
.fct-package-description .fct-package-description__table th,
.fct-package-description .fct-package-description__table td {
  border-color: var(--tl-line) !important;
  color: var(--tl-text-mid) !important;
}
.fct-package-description .fct-package-description__table th {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fct-product-sku-info, .fct-product-sku__value { color: var(--tl-text-lo) !important; }
.fct-product-stock ~ .fct-product-sku:not(.is-hidden):before {
  background-color: var(--tl-line-strong) !important;
}

/* --------------------------------------------------------------------------
   11. Afrekenpagina, de losse pagina naast de modal
   -------------------------------------------------------------------------- */
.fct_checkout_summary .fct_summary_box,
.fct_checkout_payment_methods .fct_payment_methods_list,
.fct_checkout_shipping_methods,
.fct_address_modal_inner {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
}
.fct_summary_box { padding: 24px !important; }
.fct_line_item {
  border-bottom: 1px solid var(--tl-line) !important;
  padding-bottom: 16px;
}
.fct_item_title a {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none !important;
}
.fct_item_title a:hover { color: var(--tl-lime) !important; }
.fct_toggle_icon svg { stroke: var(--tl-text-lo) !important; }

/* Adreskiezer in het venster */
.fct_address_selector {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: border-color var(--tl-dur) var(--tl-ease),
              background-color var(--tl-dur) var(--tl-ease);
}
.fct_address_selector:hover { border-color: var(--tl-text-lo) !important; }
.fct_address_selector[aria-pressed="true"], .fct_address_selector.active {
  background-color: var(--tl-lime-dim) !important;
  border-color: var(--tl-lime) !important;
}
.fct_address_selector_label span {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.fct_address_selector_icon { color: var(--tl-lime) !important; }
.fct_address_modal_header h4 { color: var(--tl-text-hi) !important; }
.fct_address_modal_close_btn {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-lo) !important;
}
.fct_address_modal_close_btn:hover { color: var(--tl-lime) !important; }
.fct_address_modal_footer { border-top: 1px solid var(--tl-line) !important; }

/* Verzendmethodes */
.fct_shipping_methods_item {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
}
.fct_shipping_methods_item.active {
  background-color: var(--tl-lime-dim) !important;
  border-color: var(--tl-lime) !important;
}

/* Bestelbump */
.fct_order_bump {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-lime-line) !important;
  border-left: 3px solid var(--tl-lime) !important;
  border-radius: 0 !important;
}
.fct_order_bump .fct_order_bump_checkbox_marker:before {
  border-color: var(--tl-on-lime) !important;
}

/* --------------------------------------------------------------------------
   12. Winkelwagen: lade en pagina
   -------------------------------------------------------------------------- */
.fct-cart-drawer {
  background-color: var(--tl-surface-3) !important;
  border-left: 1px solid var(--tl-line) !important;
}
.fct-cart-drawer-overlay { background-color: rgba(10, 10, 10, .72) !important; }
.fct-cart-drawer-header { border-bottom: 1px solid var(--tl-line) !important; }
.fct-cart-drawer-footer { border-top: 1px solid var(--tl-line) !important; }
.fct-cart-drawer-header .title {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.fct-cart-drawer-header .title span {
  color: var(--tl-text-lo) !important;
  font-weight: 400 !important;
}
.fct-cart-drawer-close-button {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-lo) !important;
  cursor: pointer;
}
.fct-cart-drawer-close-button:hover {
  background-color: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}

.fct-cart-item, .fct-cart-page .fct-cart-item {
  border-bottom: 1px solid var(--tl-line) !important;
  padding: 16px 0;
}
.fct-cart-item-title, .fct-cart-item-title a, .fct-cart-item-title span {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}
.fct-cart-item-title a:hover { color: var(--tl-lime) !important; }
.fct-cart-item-quantity {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
}
.qty-btn, .fct-cart-item-quantity .qty-btn {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-mid) !important;
  cursor: pointer;
}
.qty-btn:hover { background-color: var(--tl-surface-hover) !important; color: var(--tl-lime) !important; }
.qty-btn svg { stroke: currentColor !important; }
.qty-value, .fct-cart-item-quantity .qty-value {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-align: center;
}
.fct-cart-item-delete-button {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--tl-text-faint) !important;
  cursor: pointer;
}
.fct-cart-item-delete-button:hover { color: var(--tl-danger) !important; }
.fct-cart-item-delete-button svg path { stroke: currentColor !important; }

.fct-cart-page { max-width: 1100px; margin: 0 auto; }
.fct-cart-page .fct-cart-drawer-list-content { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.fct-cart-total-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--tl-line) !important;
  margin-top: 8px;
  padding-top: 24px;
}
.fluent-cart-cart-cart-button-wrap { display: flex; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 600px) {
  .fluent-cart-cart-cart-button-wrap { justify-content: stretch; }
  .fluent-cart-cart-cart-button-wrap .checkout-button { width: 100% !important; max-width: none !important; }
}

/* Lege winkelwagen */
.fluent-cart-cart-empty-content svg { opacity: .25; }
.continue-shopping-link {
  color: var(--tl-lime) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Zwevende winkelwagenknop */
.fct-cart-drawer-open-btn {
  background-color: var(--tl-lime) !important;
  border: 0 !important;
  border-radius: var(--tl-r-pill) !important;
  box-shadow: none !important;
}
.fct-cart-drawer-open-btn img { filter: brightness(0) !important; }
.fct-cart-badge-count {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-lime) !important;
  color: var(--tl-lime) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  min-width: 18px;
}
.fct-loader-spinner, .fct-loader-wrap {
  border-top-color: var(--tl-lime) !important;
  background-color: rgba(0, 0, 0, .6) !important;
}

/* --------------------------------------------------------------------------
   13. Magazijn en productkaart
   -------------------------------------------------------------------------- */
.fct-product-card {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  overflow: hidden;
  transition: border-color var(--tl-dur) var(--tl-ease), transform var(--tl-dur) var(--tl-ease);
}
.fct-product-card:hover {
  border-color: var(--tl-lime) !important;
  transform: translateY(-2px);
}
.fct-product-card > *, .fct-product-card div, .fct-product-card span,
.fct-product-card h2, .fct-product-card h3, .fct-product-card p {
  border: 0 !important;
}
.fct-product-card .fct-product-title, .fct-product-card h2, .fct-product-card h3 {
  font-size: 20px !important;
}
.fct-product-card a { color: var(--tl-text-hi) !important; text-decoration: none !important; }

.fct-shop-app label { color: var(--tl-text-mid) !important; cursor: pointer; }
.fct-shop-app label:hover { color: var(--tl-text-hi) !important; }
.fct-shop-app label, .fct-shop-app h3, .fct-shop-app h4, .fct-shop-app .fct-filter-title { border: 0 !important; }
.fct-shop-app input[type="range"] { accent-color: var(--tl-lime) !important; }
.noUi-target { background: var(--tl-surface-3) !important; border: 1px solid var(--tl-line) !important; box-shadow: none !important; }
.noUi-connect { background: var(--tl-lime) !important; }
.noUi-handle { background: var(--tl-lime) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* Carrousel met verwante producten */
.fct-product-carousel-wrapper, .fct-carousel-pagination { background: transparent !important; }

/* --------------------------------------------------------------------------
   14. Klantendashboard
       De hele pagina zit in .fct_customer_profile_wrap. Daarbinnen draait
       Element Plus met een eigen lichte stylesheet, dus die krijgt hier zijn
       eigen variabelen.
   -------------------------------------------------------------------------- */
.fct-customer-dashboard-navs-wrap,
.fct-customer-dashboard-main-content,
.fct-single-order-box {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
}
.fct-customer-dashboard-customer-info { border-bottom: 1px solid var(--tl-line) !important; }
.fct-customer-dashboard-customer-info h3 {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.fct-customer-dashboard-customer-info p { color: var(--tl-text-mid) !important; }
.fct-customer-dashboard-customer-info img { border: 1px solid var(--tl-line-strong) !important; }

.fct-customer-nav-link {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.fct-customer-nav-link *, .fct-customer-nav-link svg path {
  color: var(--tl-text-mid) !important;
  fill: var(--tl-text-mid) !important;
}
.fct-customer-nav-item:hover .fct-customer-nav-link { background-color: var(--tl-surface-hover) !important; color: var(--tl-lime) !important; }
.fct-customer-nav-item:hover .fct-customer-nav-link *,
.fct-customer-nav-item:hover .fct-customer-nav-link svg path { color: var(--tl-lime) !important; fill: var(--tl-lime) !important; }
.fct-customer-nav-item.active_customer_menu .fct-customer-nav-link {
  background-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fct-customer-nav-item.active_customer_menu .fct-customer-nav-link *,
.fct-customer-nav-item.active_customer_menu .fct-customer-nav-link svg path {
  color: var(--tl-on-lime) !important;
  fill: var(--tl-on-lime) !important;
}
#fct-customer-nav-compact-toggle, #fct-customer-menu-toggle, #fct-customer-menu-holder,
.fct-nav-compact-toggle-wrap button {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
}
#fct-customer-nav-compact-toggle svg path, #fct-customer-menu-toggle svg path { fill: var(--tl-text-hi) !important; }
.fct-customer-navs .fct-customer-nav-tooltip,
.fct-customer-navs .fct-customer-nav-tooltip:before {
  background-color: var(--tl-surface-3) !important;
  border-color: var(--tl-line) !important;
  color: var(--tl-text-hi) !important;
}

.fct_customer_profile_wrap .link,
.fct_customer_profile_wrap a:not(.fct-customer-nav-link):not(.fct-customer-logout-btn):not([class*="btn"]) {
  color: var(--tl-lime) !important;
  text-decoration: none !important;
}
.fct_customer_profile_wrap .text-system-light, .fct_customer_profile_wrap .text { color: var(--tl-text-mid) !important; }
.underline-link-button { color: var(--tl-lime) !important; text-decoration: none !important; }
.underline-link-button:hover { text-decoration: underline !important; }
.underline-link-button svg path { stroke: currentColor !important; }
.order-content-only-mobile-item {
  background-color: var(--tl-surface-2) !important;
  border: 1px solid var(--tl-line) !important;
}
.fct-form-container { border-bottom: 1px solid var(--tl-line) !important; }
.fct-order-summary-footer { border-top: 1px solid var(--tl-line) !important; }
.fct-product-info-card .title a { color: var(--tl-lime) !important; text-decoration: none !important; }

/* Element Plus */
.fct_customer_profile_wrap {
  --el-bg-color: var(--tl-surface-3);
  --el-bg-color-page: var(--tl-black);
  --el-bg-color-overlay: var(--tl-surface-3);
  --el-fill-color-blank: transparent;
  --el-fill-color: var(--tl-surface-hover);
  --el-fill-color-light: var(--tl-surface-hover);
  --el-fill-color-lighter: var(--tl-surface-2);
  --el-text-color-primary: var(--tl-text-hi);
  --el-text-color-regular: var(--tl-text-mid);
  --el-text-color-secondary: var(--tl-text-lo);
  --el-text-color-placeholder: var(--tl-text-faint);
  --el-text-color-disabled: var(--tl-text-faint);
  --el-border-color: var(--tl-line-strong);
  --el-border-color-light: var(--tl-line);
  --el-border-color-lighter: var(--tl-line);
  --el-border-color-hover: var(--tl-lime);
  --el-border-radius-base: 0;
  --el-border-radius-small: 0;
  --el-color-primary: var(--tl-lime);
  --el-color-danger: var(--tl-danger);
  --el-color-warning: var(--tl-warning);
  --el-color-success: var(--tl-lime);
  --el-box-shadow: none;
  --el-box-shadow-light: none;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: var(--tl-surface-2);
  --el-table-border-color: var(--tl-line);
  --el-table-text-color: var(--tl-text-mid);
  --el-table-header-text-color: var(--tl-text-lo);
  --el-table-row-hover-bg-color: var(--tl-surface-hover);
}
.fct_customer_profile_wrap .el-table th,
.fct_customer_profile_wrap .el-table thead {
  background-color: var(--tl-surface-2) !important;
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fct_customer_profile_wrap .el-table__cell, .fct_customer_profile_wrap .el-table__row { border-color: var(--tl-line) !important; }
.fct_customer_profile_wrap .el-table__row:hover > td { background-color: var(--tl-surface-hover) !important; }
.fct_customer_profile_wrap .el-scrollbar__thumb { background-color: var(--tl-line-strong) !important; }
.fct_customer_profile_wrap .el-input__wrapper,
.fct_customer_profile_wrap .el-input__inner,
.fct_customer_profile_wrap .el-select__wrapper,
.fct_customer_profile_wrap .el-textarea__inner {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-hi) !important;
}
.fct_customer_profile_wrap .el-input__wrapper.is-focus,
.fct_customer_profile_wrap .el-input__wrapper:hover { border-color: var(--tl-lime) !important; box-shadow: none !important; }
.fct_customer_profile_wrap .el-input.is-disabled .el-input__wrapper { background-color: var(--tl-surface-3) !important; }
.fct_customer_profile_wrap .el-input.is-disabled .el-input__inner {
  color: var(--tl-text-faint) !important;
  -webkit-text-fill-color: var(--tl-text-faint) !important;
}
.fct_customer_profile_wrap .el-breadcrumb__inner { color: var(--tl-text-lo) !important; }
.fct_customer_profile_wrap .el-breadcrumb__inner.is-link { color: var(--tl-lime) !important; }
.fct_customer_profile_wrap .el-breadcrumb__separator svg path { fill: var(--tl-text-faint) !important; }

/* Meldingsbalken van Element Plus */
.fct_customer_profile_wrap .el-alert,
.fct_customer_profile_wrap .el-alert.is-light {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-left: 3px solid var(--tl-warning) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
}
.fct_customer_profile_wrap .el-alert--error, .fct_customer_profile_wrap .el-alert--error.is-light { border-left-color: var(--tl-danger) !important; }
.fct_customer_profile_wrap .el-alert--success, .fct_customer_profile_wrap .el-alert--success.is-light { border-left-color: var(--tl-lime) !important; }
.fct_customer_profile_wrap .el-alert__title, .fct_customer_profile_wrap .el-alert__content { color: var(--tl-text-hi) !important; }
.fct_customer_profile_wrap .el-alert__description { color: var(--tl-text-mid) !important; margin-top: 8px; }
.fct_customer_profile_wrap .el-alert--error .el-alert__icon svg path { fill: var(--tl-danger) !important; }

/* --------------------------------------------------------------------------
   15. Statuslabels
       Exacte klassen. Geen [class*=] meer, want dat pakte in v2 het hele
       afrekenformulier (fluent-cart-checkout-order-processing) en kleurde de
       halve pagina oranje.
   -------------------------------------------------------------------------- */
.fct-badge, .fct-order-status, .fct_order_status, .fct-status-badge {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center;
  background-color: var(--tl-lime-dim) !important;
  border: 1px solid var(--tl-lime-line) !important;
  border-radius: var(--tl-r-sm) !important;
  color: var(--tl-lime) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
}
.fct-badge * { color: inherit !important; }
.fct-badge.fct-warning,
.fct-order-status.pending, .fct-order-status.processing, .fct-status-badge.pending {
  background-color: rgba(255, 176, 32, .12) !important;
  border-color: rgba(255, 176, 32, .35) !important;
  color: var(--tl-warning) !important;
}
.fct-badge.fct-danger, .fct-badge.fct-error,
.fct-order-status.failed, .fct-order-status.cancelled, .fct-order-status.refunded {
  background-color: rgba(255, 60, 60, .1) !important;
  border-color: rgba(255, 60, 60, .35) !important;
  color: var(--tl-danger) !important;
}
.fct-badge.fct-payment {
  background-color: transparent !important;
  border-color: var(--tl-line-strong) !important;
  color: var(--tl-text-mid) !important;
}

/* --------------------------------------------------------------------------
   16. Bedankpagina en ontvangstbewijs
   -------------------------------------------------------------------------- */
.fct-thank-you-page-inner, .fct-thank-you-page-content,
.fct-thank-you-page-order-items, .fluent-cart-checkout-order-receipt {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
}
.fct-thank-you-page-header-icon { color: var(--tl-lime) !important; }
.fct-thank-you-page-header-title {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}
.fct-thank-you-page-order-items-header, .fct-thank-you-page-order-items-header-row {
  border-bottom: 1px solid var(--tl-line) !important;
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fct-thank-you-page-order-items-total { border-top: 1px solid var(--tl-line) !important; }
.fct-thank-you-page-order-items-downloads-notice {
  background-color: var(--tl-surface-2) !important;
  border-left: 3px solid var(--tl-lime) !important;
}
.fluent-cart-checkout-order-receipt table tr:nth-child(2n) { background-color: var(--tl-surface-2) !important; }
.fluent-cart-checkout-order-receipt .total, .fluent-cart-checkout-order-receipt .customer-info { border-color: var(--tl-line) !important; }

/* De begroeting boven de bestelling ("Hallo <naam>!") is geen kop-tag maar
   .no-print-title, dus miste de typografie-regel uit sectie 4 hierboven
   (die draait op h1-h4) en bleef in FluentCart's eigen lichte standaardtint
   staan - amper leesbaar tegen zwart. */
.fct-thank-you-page .no-print-title {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Bestelde artikelen: naam, aantal, variant en prijs per regel. Stonden
   zonder eigen kleur, dus vielen terug op FluentCart's eigen lichte tekst. */
.fct-thank-you-page-order-items-list-title {
  color: var(--tl-text-hi) !important;
  font-weight: 600 !important;
}
.fct-thank-you-page-order-items-list-quantity,
.fct-thank-you-page-order-items-list-variant-title {
  color: var(--tl-text-lo) !important;
}
.fct-thank-you-page-order-items-list-price,
.fct-thank-you-page-order-items-list-price-inner {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
}

/* Subtotaal/verzenden/totaal/betaalmethode-regels. Het label was al gedekt
   (sectie 4), de waarde ernaast nog niet. */
.fct-meta-line-value { color: var(--tl-text-hi) !important; }

/* Btw-uitklapper "See details": FluentCart's eigen <details>/<summary>, met
   een losse "floating" variant. De tabelkopjes daarbinnen komen met een
   eigen inline style mee (kleur #94a3b8) - die blijft staan, dat is op zwart
   leesbaar genoeg. Alleen de omlijsting/achtergrond hieronder in huisstijl. */
.fct-thank-you-tax-details {
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
}
.fct-thank-you-tax-toggle {
  color: var(--tl-lime) !important;
  cursor: pointer;
}
.fct-thank-you-tax-summary,
.fct-thank-you-tax-summary.fct-thank-you-tax-floating {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct-thank-you-tax-summary-header {
  color: var(--tl-text-lo) !important;
  border-bottom: 1px solid var(--tl-line) !important;
}
.fct-thank-you-tax-summary-row { color: var(--tl-text-mid) !important; }

/* Btw-nummer onder de bedrijfsgegevens */
.fct_invoice_tax_content { color: var(--tl-text-lo) !important; }

/* "Factureer aan" / "Verzend naar": de h5-koppen komen zonder eigen kleur
   mee (browserstandaard, dus zichtbaar paarsig/grijs tegen zwart) en ook
   de adresregels zelf hadden geen eigen tekstkleur. */
.fct-thank-you-page-order-items-addresses h5,
.fct-thank-you-page-order-items-bill-to-title,
.fct-thank-you-page-order-items-ship-to-title {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.fct-thank-you-page-order-items-bill-to,
.fct-thank-you-page-order-items-ship-to {
  color: var(--tl-text-mid) !important;
}

/* Knoppenrij onderaan (bekijk bestelling / bon downloaden) - de knoppen
   zelf staan al in sectie 5, dit is alleen de rij-afstand. */
.fct-thank-you-page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   17. Losse eindjes
   -------------------------------------------------------------------------- */
/* Toetsenbordfocus: dubbele ring, precies zoals in de gids */
.fct-checkout a:focus-visible, .fct-checkout button:focus-visible,
.fct-checkout input:focus-visible, .fct-checkout select:focus-visible,
.fct-modal-checkout-form-wrapper a:focus-visible,
.fct-modal-checkout-form-wrapper button:focus-visible,
.fct-modal-checkout-form-wrapper input:focus-visible,
.fct-shop-app a:focus-visible, .fct-shop-app button:focus-visible,
.fct-single-product-page a:focus-visible, .fct-single-product-page button:focus-visible,
.fct-cart-drawer button:focus-visible,
a.wp-block-fluent-cart-buy-now-button:focus-visible {
  outline: none !important;
  box-shadow: var(--tl-focus) !important;
}

/* Geselecteerde tekst */
.fct-checkout ::selection, .fct-modal-checkout-form-wrapper ::selection,
.fct-shop-app ::selection, .fct-single-product-page ::selection,
.fct-cart-drawer ::selection, .fct_customer_profile_wrap ::selection {
  background: var(--tl-lime);
  color: var(--tl-on-lime);
}

/* Meldingen rechtsonder */
.toastify {
  background-color: var(--tl-surface-3) !important;
  background-image: none !important;
  border: 1px solid var(--tl-line) !important;
  border-left: 3px solid var(--tl-lime) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-body) !important;
}

/* Het WooCommerce-paneel van Blocksy. Geen FluentCart, maar het stond op
   #111111 en dat vloekt naast puur zwart. */
#woo-cart-panel .ct-panel-inner { background-color: var(--tl-surface-3) !important; }
#woo-cart-panel .ct-panel-heading, #woo-cart-panel .product-title {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
#woo-cart-panel .buttons .checkout {
  background-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
  font-family: var(--tl-head) !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Beweging uit voor wie daarom vraagt */
@media (prefers-reduced-motion: reduce) {
  .fct-checkout *, .fct-modal-checkout-form-wrapper *, .fct-shop-app *,
  .fct-single-product-page *, .fct-cart-drawer *, .fct-product-card {
    transition: none !important;
    animation-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Naregels uit de proefopstelling
       Deze twee kwamen boven bij het renderen van de modal met alleen de
       eigen stylesheet van FluentCart erbij. Ze horen in het bestand omdat
       je niet wilt dat de opmaak afhangt van welke plugin-css toevallig
       op die pagina meelaadt.
   -------------------------------------------------------------------------- */

/* De totalenlijst is een ul. Zonder dit staan er opsommingstekens voor
   Subtotaal en Totaal en plakken label en bedrag aan elkaar. */
.fct_summary_items_list,
.fct-modal-checkout-summary-items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fct_summary_items_list > li,
.fct-modal-checkout-summary-items > li {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.fct_summary_items_list > li:last-child { margin-bottom: 0 !important; }
/* De waardebon en het belastingblok zijn hele blokken en geen regel */
.fct_summary_items_list > li:has(.fct_coupon),
.fct_summary_items_list > li.fct_tax_summary_li {
  display: block !important;
}

/* Knop in een invoerveld is klein, niet groot. Anders wordt Toepassen een
   kanjer naast een smal veld. */
.fct_coupon_field {
  display: flex !important;
  align-items: stretch;
  gap: 0;
}
.fct_coupon_field .fct_coupon_input_wrapper { flex: 1 1 auto; }
.fct_coupon_field button,
.fct_tax_input_wrapper button {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  border-width: 1px !important;
  border-left: 0 !important;
}
.fct_coupon_field .fct_coupon_input { border-right: 0 !important; }

/* Het slotje van de waardebon staat als icoon in het veld */
.fct_coupon_icon { display: inline-flex; align-items: center; padding: 0 10px; }

/* De regel Heb je een waardebon is een schakelaar en geen kop, dus niet
   in hoofdletters schreeuwen naast de rest van de lijst. */
.fct_coupon_toggle a {
  font-size: 13px !important;
  letter-spacing: .12em !important;
  padding: 0 !important;
}
.fct_coupon_toggle { margin-bottom: 8px; }

/* ==========================================================================
   19. v4.1
   Vier dingen erbij, gevonden op de live site.
   ========================================================================== */

/* --- 19a. Alle verlopen weg ---------------------------------------------
   FluentCart legt op vrijwel elke knop een witte verloopwaas:
   background: linear-gradient(180deg, #ffffff29, #fff0), <kleur>.
   Daardoor is limoengroen nooit echt limoengroen. Dit haalt ze allemaal weg,
   ook de glans op de carrousel en het laadverloop van het magazijn.
   -------------------------------------------------------------------------- */
[class*="fct-"], [class*="fct_"],
[class^="fluent-cart-"], [class*=" fluent-cart-"],
[class*="wp-block-fluent-cart-"],
.fct_checkout button, .fct_address_modal button,
.fct-product-card button, .fct-product-view-button,
.fct-shop-apply-filter-button, .fct-shop-reset-filter-button,
.fct-cart-drawer-footer a, .fct_place_order_btn_wrap button {
  background-image: none !important;
}
/* Behalve waar een verloop echt de inhoud is, zoals een productfoto als
   achtergrond. Die staat op het element zelf en niet op een klasse. */
.fct-product-card-image[style*="background-image"],
.fct-swatch-thumb[style*="background-image"],
[class*="fct-"][style*="url("] {
  background-image: revert !important;
}
/* De glansanimatie over de carrousel en de laadbalk van het magazijn */
.swiper-pagination-progressbar-fill,
.fct-pagination-segmented .swiper-pagination-segment.is-active {
  background: var(--tl-lime) !important;
}
.swiper-pagination-progressbar-fill:before,
.fct-pagination-segmented .swiper-pagination-segment.is-active:after {
  content: none !important;
}

/* --- 19b. Hoeken overal op 0 --------------------------------------------
   De reset in blok 3 werkt binnen de vaste containers van FluentCart. Bouw je
   een pagina met de Gutenberg-blokken van FluentCart, zoals jouw
   productpagina, dan bestaat die container niet en bleven de hoeken rond.
   Deze regel hangt aan de klassenamen van FluentCart zelf, dus hij pakt ze
   allebei en raakt niets van Blocksy.
   -------------------------------------------------------------------------- */
[class*="fct-"], [class*="fct_"],
[class^="fluent-cart-"], [class*=" fluent-cart-"],
[class*="wp-block-fluent-cart-"] {
  border-radius: 0 !important;
}
/* Rond blijft rond */
.fct-cart-badge-count,
.fct-customer-dashboard-customer-info img,
.fct-reviews-picture, .fct-reviews-picture img,
.fct-swatch-dot, .fct-swatch-color,
.fct_item_tax_hint_button, .fct-item-tax-hint-icon,
.fct-loader-spinner, .fct-loader-spinner:before, .fct-loader-spinner:after,
.fct-checkout-modal-loader-spinner:before,
.fct-checkout-modal-loader-spinner:after {
  border-radius: var(--tl-r-pill) !important;
}
/* Tags op 2px, zoals in de gids */
.fct_item_tax_badge, .fct-tax-badge, .fct-tax-pill,
.fct-badge, .fct-order-status, .fct_order_status, .fct-status-badge,
.fct-stock-badge, .fct-stock-label,
.fct_status_badge_in-stock, .fct_status_badge_out-of-stock {
  border-radius: var(--tl-r-sm) !important;
}

/* --- 19c. Het laadscherm bij bestellen -----------------------------------
   Dat witte balkje linksonder is .fct-browser-notify. Die staat in de plugin
   op #e4e4e4 met een afgeronde hoek rechtsboven. Vandaar dat het eruitzag
   alsof er iets stuk was.
   -------------------------------------------------------------------------- */
.fct-order-processing {
  background: rgba(0, 0, 0, .92) !important;
  gap: 16px;
}
.fct-order-processing .fct-loader-spinner:before,
.fct-order-processing .fct-loader-spinner:after {
  border-bottom-color: var(--tl-lime) !important;
  border-left-color: var(--tl-lime) !important;
}
.fct-order-processing .loading-status {
  background: transparent !important;
  border: 0 !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
.fct-order-processing .fct-browser-notify {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%);
  background: transparent !important;
  border: 0 !important;
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-size: 12px !important;
  padding: 0 !important;
  white-space: nowrap;
}
.fct-order-processing br { display: none; }

/* --- 19d. Losse reparaties ------------------------------------------------ */

/* De productfoto hoort geen kader te hebben. Die stond er in v4 nog wel. */
.fct-product-gallery-wrapper,
.fct-single-product-page-product-thumbnail-wrapper,
.fct-product-gallery-wrapper img {
  border: 0 !important;
  outline: 0 !important;
}
/* De miniaturen eronder houden wel hun rand, anders zie je de actieve niet */
.fct-product-gallery-thumb { border: 1px solid var(--tl-line) !important; }

/* Voornaam, achternaam en e-mail zaten tegen elkaar aan geplakt. FluentCart
   maakt daar bewust een aaneengesloten blok van met halve randen. Wij zetten
   er een hele rand omheen en ruimte ertussen, uit de schaal van 4. */
.fct_checkout_input_group { display: grid; gap: 12px; }
.fct_checkout_input_group .fct_input_wrapper { margin: 0 !important; }
.fct_checkout_input_group input {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--tl-line-strong) !important;
}

/* De knop onderin de winkelwagenlade. Die is in de plugin gewoon
   .fct-cart-drawer-footer a zonder eigen klasse, dus geen enkele knopregel
   pakte hem en stond hij lime met lime tekst. */
.fct-cart-drawer-footer a,
.fct-cart-drawer-footer-actions a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  max-height: none !important;
  min-height: 52px !important;
  background: var(--tl-lime) !important;
  border: 2px solid var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.fct-cart-drawer-footer a *,
.fct-cart-drawer-footer-actions a * {
  color: var(--tl-on-lime) !important;
  fill: var(--tl-on-lime) !important;
}
.fct-cart-drawer-footer a:hover { background: var(--tl-lime-hover) !important; border-color: var(--tl-lime-hover) !important; }
/* Bekijk winkelwagen is de tweede keus, dus doorzichtig met een rand */
.fct-cart-drawer-footer a.view-cart-button {
  background: transparent !important;
  border-color: var(--tl-line-strong) !important;
  color: var(--tl-text-hi) !important;
}
.fct-cart-drawer-footer a.view-cart-button * { color: var(--tl-text-hi) !important; }
.fct-cart-drawer-footer a.view-cart-button:hover {
  background: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
}
.fct-cart-drawer-footer a.view-cart-button:hover * { color: var(--tl-on-lime) !important; }
.fct-cart-drawer-footer-actions {
  background-color: var(--tl-surface-3) !important;
  border-top: 1px solid var(--tl-line) !important;
  box-shadow: none !important;
}

/* Het prijsblok stond aan elkaar geplakt: 30.0019.95inc. BTW */
.fct-compare-price { color: var(--tl-text-faint) !important; text-decoration: line-through; margin-right: 8px; }
.fct-item-price, .fct-min-price, .fct-max-price { margin-right: 6px; }
.fct-price-separator { margin: 0 4px; }
.fct-product-prices .fct-tax-label,
.fct-product-item-price small { margin-left: 6px; }

/* Het label boven een keuze: Maat, Ophalen of verzenden, Hoeveelheid */
.quantity-title, .fct-product-variant-title, .fct-attribute-label,
.fct-option-label, .fct-selected-term-title {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  display: block;
  margin-bottom: 8px;
}

/* ==========================================================================
   20. v4.2  Actieve keuze duidelijk maken
   FluentCart geeft de gekozen variant dit mee:
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #476cff1a
   Een witte ring met een flauw blauw randje eromheen. Op zwart zie je daar
   vrijwel niets van, en dat is precies wat je op je maatknoppen zag.
   ========================================================================== */

/* Alle schaduwen van FluentCart weg, ook buiten de vaste containers.
   De focusring staat hieronder opnieuw, anders sloopt deze regel hem. */
[class*="fct-"], [class*="fct_"],
[class^="fluent-cart-"], [class*=" fluent-cart-"],
[class*="wp-block-fluent-cart-"] {
  box-shadow: none !important;
}

/* --- Keuzeknoppen: maat, ophalen of verzenden, kleur, elke variant --- */
.fct-product-variant-item,
.fct-attribute-selector .fct-swatch-item,
.fct-attribute-selector .fct-swatch-label,
.fct-attribute-selector .fct-swatch-color,
.fct-attribute-selector .fct-swatch-image,
.fct-attribute-selector .fct-swatch-image-only,
.fct-custom-select__option {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-head) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease),
              color var(--tl-dur) var(--tl-ease) !important;
}
.fct-product-variant-item .fct-product-variant-title,
.fct-attribute-selector .fct-swatch-text {
  color: inherit !important;
  font-family: var(--tl-head) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Zweven op een NIET-gekozen optie: rand oplichten, tekst wit, vulling #222.
   Een gekozen optie blijft lime, ook tijdens hover/focus/active — anders
   lijkt de selectie ongedaan zodra de muis (of de sticky :hover op mobiel)
   nog op de knop staat. */
.fct-product-variant-item:hover:not(.selected):not(.disabled),
.fct-attribute-selector .fct-swatch-item:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-attribute-selector .fct-swatch-label:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-attribute-selector .fct-swatch-color:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-attribute-selector .fct-swatch-image:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-attribute-selector .fct-swatch-image-only:hover:not(.selected):not(.disabled):not([aria-checked="true"]),
.fct-custom-select__option:hover:not(.selected):not([aria-selected="true"]) {
  background-color: var(--tl-surface-hover) !important;
  border-color: var(--tl-text-lo) !important;
  color: var(--tl-text-hi) !important;
}

/* Gekozen / actief: volle limoengroene vulling met zwarte tekst in 900.
   Onmiskenbaar, en het is de primaire knopstijl uit je gids. Hover, focus
   en active mogen dit nooit overschrijven — na een klik blijft de muis
   (en op de telefoon de sticky :hover) op de knop staan. */
.fct-product-variant-item.selected,
.fct-product-variant-item.selected:hover,
.fct-product-variant-item.selected:focus,
.fct-product-variant-item.selected:active,
.fct-product-variant-item:active:not(.disabled),
.fct-attribute-selector .fct-swatch-item.selected,
.fct-attribute-selector .fct-swatch-item.selected:hover,
.fct-attribute-selector .fct-swatch-item.selected:focus,
.fct-attribute-selector .fct-swatch-item.selected:active,
.fct-attribute-selector .fct-swatch-item[aria-checked="true"],
.fct-attribute-selector .fct-swatch-item[aria-checked="true"]:hover,
.fct-attribute-selector .fct-swatch-item[aria-checked="true"]:focus,
.fct-attribute-selector .fct-swatch-item[aria-checked="true"]:active,
.fct-attribute-selector .fct-swatch-item:active:not(.disabled):not(.fct-swatch-color):not(.fct-swatch-dot),
.fct-attribute-selector .fct-swatch-label.selected,
.fct-attribute-selector .fct-swatch-label.selected:hover,
.fct-attribute-selector .fct-swatch-label.selected:focus,
.fct-attribute-selector .fct-swatch-label.selected:active,
.fct-attribute-selector .fct-swatch-label[aria-checked="true"],
.fct-attribute-selector .fct-swatch-label[aria-checked="true"]:hover,
.fct-attribute-selector .fct-swatch-label[aria-checked="true"]:focus,
.fct-attribute-selector .fct-swatch-label[aria-checked="true"]:active,
.fct-attribute-selector .fct-swatch-label:active:not(.disabled),
.fct-attribute-selector .fct-swatch-color.selected,
.fct-attribute-selector .fct-swatch-image.selected,
.fct-attribute-selector .fct-swatch-image-only.selected,
.fct-custom-select__option.selected,
.fct-custom-select__option.selected:hover,
.fct-custom-select__option[aria-selected="true"],
.fct-swatch-select-option.selected,
.fct-custom-select-option[aria-selected="true"] {
  background-color: var(--tl-lime) !important;
  background: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-on-lime) !important;
  font-weight: 900 !important;
}
.fct-product-variant-item.selected *,
.fct-product-variant-item.selected .fct-product-variant-title,
.fct-product-variant-item.selected .fct-product-variant-price,
.fct-product-variant-item.selected .fct-product-variant-item-price,
.fct-product-variant-item.selected .fct-product-variant-payment-type,
.fct-attribute-selector .fct-swatch-label.selected *,
.fct-attribute-selector .fct-swatch-item.selected *,
.fct-attribute-selector .fct-swatch-label[aria-checked="true"] *,
.fct-attribute-selector .fct-swatch-item[aria-checked="true"] * {
  color: var(--tl-on-lime) !important;
  fill: var(--tl-on-lime) !important;
  font-weight: 900 !important;
}
/* De doorgestreepte vanaf-prijs binnen een gekozen variant mag zachter */
.fct-product-variant-item.selected .fct-product-variant-compare-price {
  color: rgba(0, 0, 0, .55) !important;
}

/* Een kleurstaal is een bolletje, daar past geen vulling in. Die krijgt
   een limoengroene ring op afstand, zodat de kleur zelf zichtbaar blijft. */
.fct-attribute-selector .fct-swatch-color.selected,
.fct-attribute-selector .fct-swatch-color.selected:hover,
.fct-attribute-selector .fct-swatch-color.selected:focus,
.fct-attribute-selector .fct-swatch-color.selected:active,
.fct-attribute-selector .fct-swatch-dot.selected,
.fct-attribute-selector .fct-swatch-dot.selected:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid var(--tl-lime) !important;
  outline: 2px solid var(--tl-black) !important;
  outline-offset: -4px;
}

/* Uitverkocht of niet leverbaar */
.fct-product-variant-item.disabled,
.fct-attribute-selector .disabled {
  opacity: .35 !important;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- Betaalmethode in de modal en op de afrekenpagina --- */
.fct_payment_method_wrapper {
  border-width: 1px !important;
  border-left: 3px solid transparent !important;
}
.fct_payment_method_wrapper.active,
.fct_modal_payment_methods .fct_payment_method_wrapper.active {
  background-color: var(--tl-lime-dim) !important;
  border-color: var(--tl-lime) !important;
  border-left: 3px solid var(--tl-lime) !important;
}
.fct_payment_method_wrapper.active label,
.fct_modal_payment_methods .fct_payment_method_wrapper.active label {
  color: var(--tl-lime) !important;
}

/* --- Gekozen adres in het adresvenster --- */
.fct_address_selector[aria-pressed="true"],
.fct_address_selector.active {
  background-color: var(--tl-lime-dim) !important;
  border-color: var(--tl-lime) !important;
  border-left: 3px solid var(--tl-lime) !important;
}

/* --- Focusring terugzetten, want blok 20 haalde alle schaduwen weg --- */
[class*="fct-"]:focus-visible,
[class*="fct_"]:focus-visible,
[class^="fluent-cart-"]:focus-visible,
[class*=" fluent-cart-"]:focus-visible,
[class*="wp-block-fluent-cart-"]:focus-visible {
  outline: none !important;
  box-shadow: var(--tl-focus) !important;
}

/* --- 20b. De variantkaart is geen chip -----------------------------------
   Bij het weergavetype met titel en prijs zet FluentCart de prijs absoluut
   op right:16px en geeft de titel 72% breedte. Zet je die titel in
   hoofdletters met letterspatiering, dan wordt hij breder dan die 72% en
   schuift hij onder de prijs door. Hier wordt het een gewone rij.
   -------------------------------------------------------------------------- */
.fct-product-variant-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px !important;
  letter-spacing: .04em !important;
}
.fct-product-variant-item .variant-content {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0;
}
.fct-product-variant-item .fct-product-variant-price {
  position: static !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.fct-product-variant-item .fct-product-variant-title {
  letter-spacing: .04em !important;
  white-space: normal;
}
.fct-product-variant-item .fct-product-variant-item-price {
  font-family: var(--tl-head) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: -.01em !important;
}
.fct-product-variant-item .fct-product-variant-compare-price {
  font-family: var(--tl-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Uitverkocht: FluentCart trekt er zelf al een schuine streep doorheen,
   dus geen tweede streep er nog eens overheen. */
.fct-swatch-item.disabled, .fct-attribute-selector .disabled {
  text-decoration: none !important;
}
.fct-swatch-item.disabled:after {
  background-color: var(--tl-text-lo) !important;
}
.fct-product-variant-item.disabled { text-decoration: line-through; }

/* ==========================================================================
   21. v4.3  Profielpagina en het mobiele menu
   ========================================================================== */

/* --- 21a. Het uitklapmenu op mobiel --------------------------------------
   Onder 806px zet FluentCart #fct-customer-menu-holder op position:absolute
   met een witte vulling en een slagschaduw. Onze reset haalde die vulling
   weg en toen was er dus niets meer om de pagina eronder mee af te dekken.
   Deze regel staat in dezelfde media query en heeft een hogere specificiteit
   dan de reset, dus hij wint altijd.
   -------------------------------------------------------------------------- */
@media (max-width: 806px) {
  .fct_customer_profile_wrap #fct-customer-menu-holder,
  .fct_customer_profile_wrap #fct-customer-menu-holder.is-active,
  #fct-customer-menu-holder.is-active {
    background-color: var(--tl-surface-3) !important;
    border: 1px solid var(--tl-line-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: min(280px, calc(100vw - 32px)) !important;
    padding: 8px !important;
    z-index: 9999 !important;
  }
  .fct_customer_profile_wrap #fct-customer-menu-holder * {
    background-color: transparent !important;
  }
  .fct_customer_profile_wrap #fct-customer-menu-holder .fct-customer-nav-item.active_customer_menu .fct-customer-nav-link {
    background-color: var(--tl-lime) !important;
  }
  /* De uitlogknop stond dwars door het menu heen */
  .fct_customer_profile_wrap #fct-customer-menu-holder .fct-customer-logout-btn {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
  }
  /* De knopbalk erboven */
  #fct-customer-menu-toggle {
    background-color: transparent !important;
    border: 1px solid var(--tl-line-strong) !important;
  }
}

/* --- 21b. Eén lijn, nooit twee -------------------------------------------
   Het profiel is opgebouwd uit kaders in kaders. Elk niveau tekent een eigen
   rand en daardoor zie je overal dubbele lijntjes. Hier gaan eerst alle
   randen binnen het profiel uit, en daarna krijgen alleen de onderdelen die
   er echt een horen te hebben er één terug.
   -------------------------------------------------------------------------- */
.fct_customer_profile_wrap div,
.fct_customer_profile_wrap section,
.fct_customer_profile_wrap header,
.fct_customer_profile_wrap ul,
.fct_customer_profile_wrap li,
.fct_customer_profile_wrap p,
.fct_customer_profile_wrap h1,
.fct_customer_profile_wrap h2,
.fct_customer_profile_wrap h3,
.fct_customer_profile_wrap h4 {
  border: 0 !important;
}

/* Terug: de twee panelen van de pagina */
.fct_customer_profile_wrap .fct-customer-dashboard-navs-wrap,
.fct_customer_profile_wrap .fct-customer-dashboard-main-content,
.fct_customer_profile_wrap .fct-single-order-box {
  border: 1px solid var(--tl-line) !important;
}

/* Terug: een scheiding tussen twee secties, alleen onder */
.fct_customer_profile_wrap .fct-form-container,
.fct_customer_profile_wrap .fct-customer-dashboard-customer-info,
.fct_customer_profile_wrap .fct-customer-dashboard-header,
.fct_customer_profile_wrap .fct-order-summary-footer {
  border-bottom: 1px solid var(--tl-line) !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}
.fct_customer_profile_wrap .fct-form-container:last-child,
.fct_customer_profile_wrap .fct-order-summary-footer:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Terug: rijen in een lijst, alleen onder, en de laatste zonder */
.fct_customer_profile_wrap .fct-customer-dashboard-address .fct-address-item,
.fct_customer_profile_wrap .fct-address-list > li,
.fct_customer_profile_wrap .fct-address-list > div,
.fct_customer_profile_wrap .order-content-only-mobile-item {
  border-bottom: 1px solid var(--tl-line) !important;
  padding: 16px 0 !important;
}
.fct_customer_profile_wrap .fct-customer-dashboard-address .fct-address-item:last-child,
.fct_customer_profile_wrap .fct-address-list > li:last-child,
.fct_customer_profile_wrap .fct-address-list > div:last-child {
  border-bottom: 0 !important;
}

/* Terug: het invoerveld zelf. Dit is bij Element Plus een div, dus die was
   met bovenstaande regel zijn rand kwijt. */
.fct_customer_profile_wrap .el-input__wrapper,
.fct_customer_profile_wrap .el-select__wrapper,
.fct_customer_profile_wrap .el-textarea__inner {
  border: 1px solid var(--tl-line-strong) !important;
}
.fct_customer_profile_wrap .el-input__wrapper.is-focus,
.fct_customer_profile_wrap .el-input__wrapper:hover,
.fct_customer_profile_wrap .el-select__wrapper:hover {
  border-color: var(--tl-lime) !important;
}

/* Ruimte tussen de velden, uit de schaal van 4 */
.fct_customer_profile_wrap .fct-compact-form,
.fct_customer_profile_wrap .fct-form-fields,
.fct_customer_profile_wrap .el-form {
  display: grid;
  gap: 12px;
}
.fct_customer_profile_wrap .el-form-item { margin-bottom: 0 !important; }

/* De tabel houdt lijnen onder de rij en verder niets */
.fct_customer_profile_wrap .el-table,
.fct_customer_profile_wrap .el-table__inner-wrapper,
.fct_customer_profile_wrap .el-table__body-wrapper { border: 0 !important; }
.fct_customer_profile_wrap .el-table:before,
.fct_customer_profile_wrap .el-table:after,
.fct_customer_profile_wrap .el-table__inner-wrapper:before { display: none !important; }
.fct_customer_profile_wrap .el-table td.el-table__cell,
.fct_customer_profile_wrap .el-table th.el-table__cell {
  border-bottom: 1px solid var(--tl-line) !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
}

/* Koppen in het profiel: één maat kleiner dan een paginakop */
.fct_customer_profile_wrap .form-heading,
.fct_customer_profile_wrap .fct-customer-dashboard-title {
  font-size: 20px !important;
  margin-bottom: 8px !important;
}
.fct_customer_profile_wrap .form-desc {
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 16px !important;
}

/* Het menu met de drie puntjes bij een adres */
.fct_customer_profile_wrap .el-dropdown-menu,
.fct_customer_profile_wrap .el-popper {
  background-color: var(--tl-surface-3) !important;
  border: 1px solid var(--tl-line-strong) !important;
  box-shadow: none !important;
}
.fct_customer_profile_wrap .el-dropdown-menu__item { color: var(--tl-text-mid) !important; }
.fct_customer_profile_wrap .el-dropdown-menu__item:hover {
  background-color: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}
.el-popper__arrow:before {
  background-color: var(--tl-surface-3) !important;
  border-color: var(--tl-line-strong) !important;
}

/* ==========================================================================
   22. v4.4  Profielpagina op de echte DOM
   Vier klassen die ik in 21b gokte bestaan niet. De adreslijst heet
   fct-customer-address-list met fct-customer-address-block eronder, en het
   opslaan-blok zit in een <footer>. Die stond niet in de randen-reset, dus
   die hield zijn eigen lijn. Hieronder klopt alles met de opbouw.
   ========================================================================== */

/* De <footer> hoorde ook in de reset van 21b */
.fct_customer_profile_wrap footer { border: 0 !important; }

/* --- Het raamwerk --- */
.fct-customer-root-container,
.fct-customer-dashboard-app-container,
.fct-customer-app,
.fct-customer-dashboard-user-profile {
  background-color: transparent !important;
  border: 0 !important;
}
.fct-customer-dashboard-main-content { padding: 32px !important; }

/* --- Zijbalk --- */
.fct-customer-dashboard-customer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px !important;
}
.fct-customer-dashboard-customer-info img {
  width: 44px; height: 44px; object-fit: cover;
}
.fct-customer-dashboard-customer-info-content h3 {
  font-size: 16px !important;
  margin: 0 0 2px !important;
}
.fct-customer-dashboard-customer-info-content p {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
#fct-customer-menu-container { padding: 16px !important; }
.fct-customer-navs { gap: 2px !important; }
.fct-customer-navs .fct-customer-nav-link { padding: 10px 12px !important; }
.fct-customer-nav-link-text { color: inherit !important; }
/* De streep die FluentCart voor een item tekent, in lime */
.fct-customer-dashboard-navs-wrap .fct-customer-navs .fct-customer-nav-item:before {
  background-color: var(--tl-lime) !important;
}
#fct-customer-logout-button {
  border-top: 1px solid var(--tl-line) !important;
  padding-top: 16px;
  margin-top: 16px;
}
.fct-customer-logout-btn { padding: 10px 16px !important; }
.fct-customer-logout-btn .button-text { color: inherit !important; }
/* Het inklappijltje van de zijbalk */
#fct-customer-nav-compact-toggle {
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  width: 24px !important; height: 24px !important;
}
#fct-customer-nav-compact-toggle svg path { fill: var(--tl-text-mid) !important; }
#fct-customer-nav-compact-toggle:hover { border-color: var(--tl-lime) !important; }
#fct-customer-nav-compact-toggle:hover svg path { fill: var(--tl-lime) !important; }

/* --- Sectie: links de uitleg, rechts het formulier --- */
.fct-form-container {
  padding-bottom: 32px !important;
  margin-bottom: 32px !important;
}
.fct-form-container:last-of-type {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.fct-form-container .form-left,
.fct-form-container .form-right {
  border: 0 !important;
  background: transparent !important;
}
.fct-form-container .form-left .el-button { margin-top: 16px; }

/* Velden onder elkaar met lucht ertussen, en geen kader om de groep */
.fct-compact-form { display: grid !important; gap: 12px !important; }
.fct-material-input {
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.fct-material-input .el-input,
.fct-material-input .el-input__wrapper {
  width: 100%;
}
.fct-material-input .el-input__wrapper { padding: 4px 12px !important; }
.fct-material-input .el-input__inner { height: 40px !important; }

/* --- De adreslijst --- */
.fct-customer-address-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--tl-line) !important;
}
.fct-customer-address-block {
  position: relative;
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--tl-line) !important;
  padding: 16px !important;
  margin: 0 !important;
}
.fct-customer-address-block:last-child { border-bottom: 0 !important; }
.fct-customer-address-block .title {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px;
}
.fct-customer-address-block .text {
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  margin: 0 !important;
}
/* Het standaardadres krijgt de accentbalk van 3px uit de gids */
.fct-customer-address-block.default-address {
  border-left: 3px solid var(--tl-lime) !important;
  padding-left: 13px !important;
}
.fct-customer-address-block.default-address .text { color: var(--tl-text-hi) !important; }

/* Het knopje met de drie puntjes */
.fct-address-action { flex: 0 0 auto; }
.fct-more-option-wrap { background: transparent !important; }
.fct-customer-address-block .more-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tl-text-lo) !important;
  padding: 0 !important;
  cursor: pointer;
  transition: background-color var(--tl-dur) var(--tl-ease), color var(--tl-dur) var(--tl-ease);
}
.fct-customer-address-block .more-btn:hover {
  background: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}
.fct-customer-address-block .more-btn .icon,
.fct-customer-address-block .more-btn svg { color: inherit !important; }
.fct-customer-address-block .more-btn svg path { stroke: currentColor !important; }

/* --- De balk met Profiel opslaan --- */
.fct-form-footer {
  border-top: 1px solid var(--tl-line) !important;
  padding-top: 24px !important;
  margin-top: 32px !important;
  display: flex;
  justify-content: flex-end;
}
.fct-form-footer.text-right { text-align: right; }

/* Element Plus knopmaten. small mag niet net zo groot worden als de
   opslaanknop, anders schreeuwt Nieuw adres toevoegen even hard. */
.fct_customer_profile_wrap .el-button--small {
  font-size: 12px !important;
  padding: 8px 16px !important;
}
.fct_customer_profile_wrap .el-button--primary.el-button--small {
  font-size: 14px !important;
  padding: 12px 24px !important;
}
.fct_customer_profile_wrap .el-button span { color: inherit !important; }

/* Op smal scherm de twee kolommen onder elkaar */
@media (max-width: 806px) {
  .fct-customer-dashboard-main-content { padding: 20px !important; }
  .fct-form-container { display: block !important; }
  .fct-form-container .form-left { margin-bottom: 16px; }
}

/* --- 22b. Correcties op mijn eigen volgorde -------------------------------
   Twee dingen uit blok 22 verloren het van de randen-reset in 21b, omdat
   .fct_customer_profile_wrap ul specifieker is dan .fct-customer-address-list.
   Hier staan ze met de wrapper ervoor en dan winnen ze wel.
   -------------------------------------------------------------------------- */
.fct_customer_profile_wrap .fct-customer-address-list {
  border: 1px solid var(--tl-line) !important;
}
.fct_customer_profile_wrap .fct-customer-address-block {
  border-bottom: 1px solid var(--tl-line) !important;
}
.fct_customer_profile_wrap .fct-customer-address-block:last-child {
  border-bottom: 0 !important;
}
.fct_customer_profile_wrap .fct-customer-address-block.default-address {
  border-left: 3px solid var(--tl-lime) !important;
}

/* Op desktop is #fct-customer-menu-holder gewoon een kolom in de zijbalk en
   geen uitklapper. Die hoort daar dus geen eigen kader te hebben, anders
   krijg je een kader in een kader. De vulling en de rand gelden alleen in
   de media query van 21a. */
#fct-customer-menu-holder {
  background-color: transparent !important;
  border: 0 !important;
}
.fct_customer_profile_wrap .fct-customer-navs-wrap,
.fct_customer_profile_wrap .fct-customer-navs {
  border: 0 !important;
  background: transparent !important;
}

/* Het invoerveld van Element Plus is een wrapper met daarin nog een input.
   Die input tekende zijn eigen vlak en dat gaf een naad aan de rand. */
.fct_customer_profile_wrap .el-input__inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  color: var(--tl-text-hi) !important;
}
.fct_customer_profile_wrap .el-input,
.fct_customer_profile_wrap .el-input__wrapper { box-shadow: none !important; }

/* --- 22c. Uitloggen is geen gevaar ---------------------------------------
   Jouw gids zegt over rood: alleen bij verwijderen en bij een fout, nooit
   decoratief. Uitloggen is geen van beide, en met een rode omlijning is het
   het hardst schreeuwende element in je hele zijbalk terwijl het de minst
   belangrijke actie is. Het wordt een ghost-knop: alleen tekst, op hover
   vulling #222222 en de tekst limoengroen. Rood houden we over voor het
   verwijderen van een adres.
   -------------------------------------------------------------------------- */
.fct-customer-logout-btn {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: transparent !important;
  border: 0 !important;
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 12px !important;
  transition: background-color var(--tl-dur) var(--tl-ease), color var(--tl-dur) var(--tl-ease);
}
.fct-customer-logout-btn *,
.fct-customer-logout-btn svg path {
  color: var(--tl-text-lo) !important;
  fill: var(--tl-text-lo) !important;
}
.fct-customer-logout-btn:hover {
  background: var(--tl-surface-hover) !important;
  color: var(--tl-lime) !important;
}
.fct-customer-logout-btn:hover *,
.fct-customer-logout-btn:hover svg path {
  color: var(--tl-lime) !important;
  fill: var(--tl-lime) !important;
}

/* Rood blijft voor verwijderen, bijvoorbeeld in het driepuntjesmenu */
.fct_customer_profile_wrap .el-dropdown-menu__item.is-danger,
.fct_customer_profile_wrap .el-dropdown-menu__item[class*="delete"] {
  color: var(--tl-danger) !important;
}
.fct_customer_profile_wrap .el-dropdown-menu__item.is-danger:hover {
  background: rgba(255, 60, 60, .1) !important;
  color: var(--tl-danger) !important;
}

/* ==========================================================================
   23. v4.6  Drie dingen die ik zelf had veroorzaakt
   ========================================================================== */

/* --- 23a. De productfoto met rust laten ----------------------------------
   In blok 10 gaf ik .fct-product-gallery-thumb een rand plus dekking .6 met
   een limoengroene rand op hover. Dat was bedoeld voor de kleine miniaturen
   onder een galerij met meerdere foto's. Op jouw pagina is dat juist het
   blok met de hoofdfoto erin, dus stond je product standaard verbleekt en
   kreeg het een lijn zodra je erover ging. Weg ermee. FluentCart doet hier
   gewoon zijn eigen ding.
   -------------------------------------------------------------------------- */
.fct-product-gallery-wrapper,
.fct-product-gallery-thumb,
.fct-product-gallery-thumb img,
.fct-single-product-page-product-thumbnail-wrapper {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.fct-product-gallery-thumb:hover,
.fct-product-gallery-thumb.active,
.fct-product-gallery-wrapper:hover {
  border: 0 !important;
  outline: 0 !important;
  opacity: 1 !important;
}

/* --- 23b. Hoeveelheid --------------------------------------------------
   Twee oude fouten: dubbele rand (container én knoppenblok) en het
   invoerveld dat de algemene 12px-veldopmaak meekreeg. Daarna: de rij
   was width:max-content (138px) met 40px-knoppen tegen elkaar aan, terwijl
   Nu kopen / In winkelwagen eronder de volle kolombreedte pakten. Nu is
   de rij 100% breed, +/− zijn 52px, en er zit 12px tussen de drie delen.
   -------------------------------------------------------------------------- */
.fct-product-quantity-container,
.fct-product-qty-container,
.fluent-cart-product-quantity-container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.fct-product-quantity {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.fct-product-quantity .fct-quantity-decrease-button,
.fct-product-quantity .fct-quantity-increase-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  max-height: none !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-head) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.fct-product-quantity .fct-quantity-decrease-button svg,
.fct-product-quantity .fct-quantity-increase-button svg {
  display: block !important;
  width: 14px !important;
  height: auto !important;
  max-height: 14px !important;
}
.fct-product-quantity .fct-quantity-decrease-button:hover,
.fct-product-quantity .fct-quantity-increase-button:hover {
  background: var(--tl-surface-hover) !important;
  border-color: var(--tl-text-lo) !important;
  color: var(--tl-lime) !important;
}
.fct-product-quantity .fct-quantity-input,
.fct-single-product-page .fct-quantity-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
/* De pijltjes van de browser weg, die passen niet in 56px */
.fct-quantity-input::-webkit-outer-spin-button,
.fct-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.fct-product-quantity-container .quantity-title {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 8px !important;
}

/* --- 23c. Het slotje in het waardebonveld --------------------------------
   FluentCart zet dat icoon absoluut in het veld. Ik maakte er in blok 18 een
   flexrij van, en toen viel het icoon boven op de tekst Hier toepassen.
   Nu is het gewoon het eerste item in de rij.
   -------------------------------------------------------------------------- */
.fct_coupon_field .fct_coupon_icon {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 0 0 12px !important;
  pointer-events: none;
}
.fct_coupon_field .fct_coupon_input_wrapper { flex: 1 1 auto; min-width: 0; }
.fct_coupon_field .fct_coupon_input { padding-left: 10px !important; }

/* De prijsregel: €30.00 doorgestreept, dan de prijs, dan inc. BTW */
.fct-product-item-price {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fct-product-item-price .fct-compare-price,
.fct-product-item-price .fct-compare-price del {
  color: var(--tl-text-faint) !important;
  font-family: var(--tl-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.fct_price_suffix {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   24. v4.7  Lege staat in het klantendashboard
   Het icoon boven Er zijn nog geen abonnementen zit in .fct-empty-icon-box,
   een vierkant van 72px dat in de plugin een lichte vulling heeft. Onze
   reset haalde die vulling weg en toen bleef er een zwart icoon op zwart
   over. Nu een limoengroen vlak met een zwart icoon, zoals een producticoon.
   ========================================================================== */
.fct-customer-dashboard-empty-state,
.fct-empty-text {
  padding: 48px 24px !important;
  text-align: center;
}
.fct-customer-dashboard-empty-state .fct-empty-icon-box,
.fct-empty-icon-box {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--tl-lime-dim) !important;
  border: 1px solid var(--tl-lime-line) !important;
  border-radius: 0 !important;
  color: var(--tl-lime) !important;
}
.fct-empty-icon-box svg,
.fct-empty-icon-box .icon,
.fct-empty-text .icon svg {
  color: var(--tl-lime) !important;
}
.fct-empty-icon-box svg [stroke]:not([stroke="none"]) { stroke: var(--tl-lime) !important; }
.fct-empty-icon-box svg [fill]:not([fill="none"])     { fill: var(--tl-lime) !important; }
.fct-empty-icon-box svg path:not([stroke]):not([fill]) { fill: var(--tl-lime) !important; }

.fct-customer-dashboard-empty-state h4 {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
.fct-customer-dashboard-empty-state p,
.fct-empty-text p {
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  margin-bottom: 24px !important;
}

/* Transactietabel: het kolomkopje zonder titel mag geen lucht opeisen, en de
   knop Ontvangstbewijs staat naast het driepuntjesmenu. */
.fct_customer_profile_wrap .el-table .cell { padding: 0 12px !important; }
.fct_customer_profile_wrap .fct-transaction-payment-method .text-capitalize {
  text-transform: uppercase !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: var(--tl-text-mid) !important;
}
.fct_customer_profile_wrap .underline-link-button .icon svg [stroke] {
  stroke: currentColor !important;
}
.fct_customer_profile_wrap .fct-more-option-wrap .more-btn {
  color: var(--tl-text-lo) !important;
  cursor: pointer;
}
.fct_customer_profile_wrap .fct-more-option-wrap .more-btn:hover { color: var(--tl-lime) !important; }
.fct_customer_profile_wrap .fct-more-option-wrap .more-btn svg [stroke] { stroke: currentColor !important; }
.fct-badge.fct-small { font-size: 10px !important; padding: 4px 8px !important; }

/* ==========================================================================
   25. v4.8  Element Plus tabellen, nu zonder wrapper ervoor
   De kopregel bleef wit met witte tekst. Mijn regels stonden allemaal achter
   .fct_customer_profile_wrap, en de tabelvariabelen zette ik ook alleen daar.
   Element Plus draait op deze site alleen binnen FluentCart, dus die omweg
   heeft geen nut en kostte hem alleen het gevecht. De variabelen staan nu op
   :root en de kopregel wordt hieronder rechtstreeks gezet, op elk niveau dat
   in Element Plus een achtergrond kan tekenen.
   ========================================================================== */
:root {
  --el-bg-color: var(--tl-surface-3);
  --el-bg-color-page: var(--tl-black);
  --el-bg-color-overlay: var(--tl-surface-3);
  --el-fill-color-blank: transparent;
  --el-fill-color: var(--tl-surface-hover);
  --el-fill-color-light: var(--tl-surface-2);
  --el-fill-color-lighter: var(--tl-surface-2);
  --el-text-color-primary: var(--tl-text-hi);
  --el-text-color-regular: var(--tl-text-mid);
  --el-text-color-secondary: var(--tl-text-lo);
  --el-text-color-placeholder: var(--tl-text-faint);
  --el-text-color-disabled: var(--tl-text-faint);
  --el-border-color: var(--tl-line-strong);
  --el-border-color-light: var(--tl-line);
  --el-border-color-lighter: var(--tl-line);
  --el-border-color-hover: var(--tl-lime);
  --el-border-radius-base: 0;
  --el-border-radius-small: 0;
  --el-color-primary: var(--tl-lime);
  --el-color-danger: var(--tl-danger);
  --el-color-warning: var(--tl-warning);
  --el-color-success: var(--tl-lime);
  --el-box-shadow: none;
  --el-box-shadow-light: none;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: var(--tl-surface-2);
  --el-table-border-color: var(--tl-line);
  --el-table-text-color: var(--tl-text-mid);
  --el-table-header-text-color: var(--tl-text-lo);
  --el-table-row-hover-bg-color: var(--tl-surface-hover);
}

/* Het lichaam van de tabel is doorzichtig, de kopregel is het verhoogde vlak */
.el-table,
.el-table__inner-wrapper,
.el-table__body-wrapper,
.el-table__body,
.el-table .el-scrollbar,
.el-table .el-scrollbar__wrap,
.el-table .el-scrollbar__view,
.el-table tbody,
.el-table tr,
.el-table td,
.el-table td.el-table__cell {
  background-color: transparent !important;
  background-image: none !important;
}
.el-table__header-wrapper,
.el-table__header,
.el-table thead,
.el-table thead tr,
.el-table th,
.el-table th.el-table__cell,
.el-table thead.is-group th.el-table__cell {
  background-color: var(--tl-surface-2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--tl-line) !important;
}
.el-table thead,
.el-table th.el-table__cell,
.el-table th.el-table__cell > .cell {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-head) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
/* De cellen zelf */
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--tl-line) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  color: var(--tl-text-mid) !important;
}
.el-table td.el-table__cell .text,
.el-table td.el-table__cell time { color: var(--tl-text-mid) !important; }
.el-table .el-table__row:hover > td.el-table__cell {
  background-color: var(--tl-surface-hover) !important;
}
/* De lijnen die Element Plus met pseudo-elementen tekent, boven en onder de
   tabel. Die vielen buiten de reset omdat * geen ::before of ::after pakt. */
.el-table__inner-wrapper:before,
.el-table__inner-wrapper:after,
.el-table--border:before,
.el-table--border:after,
.el-table:before,
.el-table:after {
  background-color: var(--tl-line) !important;
}
.el-table .el-scrollbar__thumb { background-color: var(--tl-line-strong) !important; }
.el-table .cell { padding: 0 12px !important; }

/* Het bedrag rechts in de tabel mag cijferwerk zijn */
.el-table td.el-table__cell .text[aria-label^="Bedrag"],
.el-table td.el-table__cell .text[aria-label^="Amount"] {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* ==========================================================================
   26. v4.9  Het waardebonveld is één veld, geen doos in een doos
   Het veld heeft in blok 18 een rand gekregen, maar het invoerveld zelf hield
   ook nog zijn eigen rand uit blok 7. Vandaar de lijn tussen het slotje en de
   tekst, en de zwarte marge rondom de knop Toepassen.
   ========================================================================== */
.fct_coupon_field {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
}
.fct_coupon_field:focus-within { border-color: var(--tl-lime) !important; }

/* Binnenin geen enkele rand meer */
.fct_coupon_field .fct_coupon_icon,
.fct_coupon_field .fct_coupon_input_wrapper,
.fct_coupon_field .fct_coupon_input,
.fct_coupon_field .fct_coupon_input:focus {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.fct_coupon_field .fct_coupon_icon {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 4px 0 14px !important;
  pointer-events: none;
}
.fct_coupon_field .fct_coupon_input_wrapper { flex: 1 1 auto; min-width: 0; display: flex; }
.fct_coupon_field .fct_coupon_input {
  width: 100% !important;
  padding: 14px 12px !important;
}
/* De knop sluit strak aan op de rand, geen zwarte marge eromheen */
.fct_coupon_field button {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: stretch !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
}

/* ==========================================================================
   27. v5.0  Verborgen is verborgen
   Dit is een fout die ik op meer plekken had kunnen maken, dus hij wordt hier
   in één keer voor het hele bestand dichtgezet.

   FluentCart rendert alle tien de variantprijzen in de HTML en verbergt er
   negen met de klasse is-hidden, die niets anders doet dan display:none. Bij
   het wisselen van maat haalt de JS die klasse van de juiste weg. In blok 23
   gaf ik .fct-product-item-price een display:flex met !important mee om die
   prijsregel netjes uit te lijnen, en daarmee won ik van display:none. Vandaar
   dat je nu alle prijzen onder elkaar zag.

   Hetzelfde gold voor het waardebonveld. Dat staat in de HTML als
   <div class="fct_coupon_field" hidden> en hoort pas open te klappen als je op
   Heb je een waardebon klikt. Mijn display:flex uit blok 18 zette hem
   permanent open. Dat was je misschien nog niet opgevallen.
   ========================================================================== */

/* De prijsregel alleen uitlijnen als hij ook echt zichtbaar hoort te zijn */
.fct-product-item-price.is-hidden { display: none !important; }
.fct-product-item-price:not(.is-hidden) {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* En de algemene afspraak: wat FluentCart verbergt blijft verborgen, wat ik
   verderop in dit bestand ook aan display meegeef. Bewust beperkt tot de
   klassen van FluentCart, zodat dit niets van Blocksy raakt. */
[class*="fct-"][hidden],
[class*="fct_"][hidden],
[class*="fluent-cart-"][hidden],
[class*="fct-"].is-hidden,
[class*="fct_"].is-hidden,
[class*="fluent-cart-"].is-hidden,
.fct_address_modal.hidden,
.fct-hidden,
.fct_coupon_field[hidden] {
  display: none !important;
}


/* ==========================================================================
   28. v5.1  De afrekenpagina heeft een ander koppelteken dan ik dacht
   ==========================================================================
   Dit is de grootste vondst van deze ronde en het verklaart waarom de
   betaalpagina er niet strak uitzag. Blok 7, met alle invoervelden, aanvink
   vakken en keuzerondjes, hangt aan .fct-checkout met een streepje. De
   afrekenpagina heet in de HTML .fct_checkout met een liggend streepje.
   Die klasse bestaat helemaal niet op die pagina, dus geen enkele regel uit
   blok 7 kwam daar ooit aan. Wat je zag was FluentCart met alleen mijn reset
   eroverheen. Hieronder staat blok 7 nog een keer, nu op de echte klassen.
   ========================================================================== */

.fct_checkout input[type="text"],
.fct_checkout input[type="email"],
.fct_checkout input[type="tel"],
.fct_checkout input[type="number"],
.fct_checkout input[type="password"],
.fct_checkout select,
.fct_checkout textarea,
.fluent-cart-checkout-page input[type="text"],
.fluent-cart-checkout-page input[type="email"],
.fluent-cart-checkout-page input[type="tel"],
.fluent-cart-checkout-page select,
.fluent-cart-checkout-page textarea {
  background-color: var(--tl-black) !important;
  background-image: none !important;
  color: var(--tl-text-hi) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--tl-body) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}
.fct_checkout input::placeholder,
.fct_checkout textarea::placeholder {
  color: var(--tl-text-faint) !important;
  font-size: 15px !important;
}
.fct_checkout input:focus,
.fct_checkout select:focus,
.fct_checkout textarea:focus {
  background-color: var(--tl-black) !important;
  border-color: var(--tl-lime) !important;
  color: var(--tl-text-hi) !important;
  box-shadow: none !important;
  outline: none !important;
}
.fct_checkout input:disabled {
  background-color: var(--tl-surface-3) !important;
  color: var(--tl-text-faint) !important;
  -webkit-text-fill-color: var(--tl-text-faint) !important;
}
.fct_checkout input:-webkit-autofill,
.fct_checkout input:-webkit-autofill:hover,
.fct_checkout input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tl-text-hi) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--tl-black) inset !important;
  caret-color: var(--tl-text-hi) !important;
}

/* Aanvinkvak: 20 bij 20, zwart met rand, aan is lime met zwart vinkje.
   FluentCart zet hem op 16 bij 16 en Blocksy blaast hem daarna op, vandaar
   die enorme vierkanten bij de voorwaarden. */
.fct_checkout input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  position: relative;
  top: 2px;
  transition: background-color var(--tl-dur) var(--tl-ease),
              border-color var(--tl-dur) var(--tl-ease);
}
.fct_checkout input[type="checkbox"]:checked,
.fct_checkout input[type="checkbox"]:checked:hover {
  background-color: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
}
.fct_checkout input[type="checkbox"]:before {
  border-color: var(--tl-on-lime) !important;
  left: 6px !important;
  top: 2px !important;
  height: 11px !important;
  width: 6px !important;
}
.fct_checkout input[type="checkbox"]:focus-visible {
  box-shadow: var(--tl-focus) !important;
}

/* De regel met de voorwaarden. Die links staan in de plugin op nowrap, dus
   ze kunnen niet afbreken en dat maakt de regelval rommelig. Hier mogen ze
   gewoon breken, met een normale regelafstand erbij. */
.fct_checkout .fct_checkout_agree_terms {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.fct_checkout .fct_checkout_agree_terms label,
.fct_checkout #fct_wrapper_allow_create_account label,
.fct_checkout #fct_wrapper_ship_to_different label,
.fct_checkout #fct_wrapper_is_business label {
  color: var(--tl-text-mid) !important;
  font-family: var(--tl-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
.fct_checkout .fct_checkout_agree_terms label a {
  white-space: normal !important;
  color: var(--tl-text-hi) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: var(--tl-line-strong) !important;
}
.fct_checkout .fct_checkout_agree_terms label a:hover {
  color: var(--tl-lime) !important;
  text-decoration-color: var(--tl-lime) !important;
}
/* Verzenden naar een ander adres en de zakelijke schakelaar zijn dezelfde
   soort regel, dus die krijgen dezelfde uitlijning */
.fct_checkout #fct_wrapper_ship_to_different,
.fct_checkout #fct_wrapper_allow_create_account,
.fct_checkout .fct_b2b_toggle_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}


/* ==========================================================================
   29. v5.1  Verzendopties plat trekken
   ==========================================================================
   De grijze bak liep van het kopje VERZENDOPTIES tot onder de DHL regel.
   Dat waren drie lagen die alle drie een vulling of een rand hadden:
   .fct_checkout_shipping_methods van mij, .fct_shipping_methods_list van
   FluentCart met --fct-checkout-shipping-methods-bg, en daarbinnen mijn
   eigen rand om elk item. Vandaar de doos in een doos en dat lege grijze
   strookje eronder. Nu: één rand om de lijst, verder niks.
   ========================================================================== */

:root { --fct-checkout-shipping-methods-bg: transparent !important; }

.fct_checkout_shipping_methods,
.fct_shipping_methods,
.fct_shipping_methods .fct_checkout_form_section,
.fct_shipping_methods .fct_form_section_body {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.fct_checkout_shipping_methods .fct_form_section_header {
  margin-bottom: 10px !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
}
.fct_shipping_methods_list {
  background-color: transparent !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.fct_shipping_methods_item {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.fct_shipping_methods_item + .fct_shipping_methods_item {
  border-top: 1px solid var(--tl-line) !important;
}
.fct_shipping_methods_list .fct_shipping_methods_item label {
  border: 0 !important;
  padding: 14px 18px 14px 46px !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  line-height: 1.2 !important;
}
.fct_shipping_methods_item input[type="radio"]:checked + label {
  background-color: transparent !important;
  color: var(--tl-lime) !important;
}
.fct_shipping_methods_item .shipping-method-amount {
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.fct_shipping_methods_item .fct_shipping_method_description,
.fct_shipping_methods_item .fct_shipping_method_package_info {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* Het rondje links, in lime als hij aan staat */
.fct_shipping_methods_item .fct-checkmark {
  border-color: var(--tl-line-strong) !important;
  background-color: var(--tl-black) !important;
  left: 18px !important;
}
.fct_shipping_methods_item input[type="radio"]:checked + label .fct-checkmark {
  border-color: var(--tl-lime) !important;
}
.fct_shipping_methods_item input[type="radio"]:checked + label .fct-checkmark:after {
  background-color: var(--tl-lime) !important;
}
/* Het laadscherm van FluentCart legt hier een wit vlak overheen */
.fct_shipping_methods.fct-loading .fct_shipping_methods_list:after {
  background-color: var(--tl-black) !important;
  opacity: .6 !important;
}
.fct_shipping_methods_loader svg { color: var(--tl-lime) !important; }


/* ==========================================================================
   30. v5.1  Betaalmethode zonder dat olijfgroene waas
   ==========================================================================
   De actieve methode kreeg --tl-lime-dim als vulling. Dat is lime op 12
   procent en dat wordt op zwart een vieze olijfkleur. In de gids is de
   afspraak zwart met lime als lijn en als tekst, dus de vulling gaat eruit.
   De bak van de betaaldienst eromheen krijgt ook geen eigen rand meer,
   anders staat er weer een doos in een doos.
   ========================================================================== */

.fct_payment_method_wrapper,
.fct_payment_method,
.fct_payment_method_logo,
.fct_modal_payment_methods .fct_payment_method_wrapper {
  background-color: transparent !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-left-width: 3px !important;
  border-left-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct_payment_method_wrapper.active,
.fct_modal_payment_methods .fct_payment_method_wrapper.active {
  background-color: transparent !important;
  border-color: var(--tl-lime) !important;
  border-left-color: var(--tl-lime) !important;
}
.fct_payment_method_wrapper.active label,
.fct_modal_payment_methods .fct_payment_method_wrapper.active label {
  color: var(--tl-lime) !important;
}
.fct_payment_method_wrapper + .fct_payment_method_wrapper { margin-top: 10px !important; }

/* De bak waar Mollie, Stripe of PayPal zichzelf in tekent */
.fluent-cart-checkout_embed_payment_wrapper,
.fluent-cart-checkout_embed_payment_container,
.fluent-cart-checkout_embed_payment_container > *,
.fct_payment_method_instructions {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fct_payment_method_instructions,
.fluent-cart-checkout_embed_payment_container p {
  color: var(--tl-text-lo) !important;
  font-family: var(--tl-body) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* De logootjes van de betaaldiensten mogen hun eigen kleur houden */
.fct_payment_method_logo label img,
.fluent-cart-checkout_embed_payment_container img {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   31. v5.1  De twee knoppen onder het product even groot
   ==========================================================================
   Nu kopen en Toevoegen aan winkelwagen zijn allebei inline-flex, dus ze
   werden zo breed als hun eigen tekst. Nu delen ze de ruimte gelijk. Er zit
   geen mediaquery onder: ze hebben een basis van 240 pixels en mogen
   afbreken, dus zodra de kolom smaller is dan twee keer dat springen ze
   vanzelf onder elkaar en vullen ze allebei de volle breedte.
   ========================================================================== */

.fct-product-buttons-wrap,
.fct-product-buttons-wrap.row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}
.fct-product-buttons-wrap > a,
.fct-product-buttons-wrap > button,
.fct-product-buttons-wrap > .fluent-cart-direct-checkout-button,
.fct-product-buttons-wrap > .fluent-cart-add-to-cart-button {
  flex: 1 1 240px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  text-align: center !important;
  white-space: normal !important;
}
@media (max-width: 782px) {
  .fct-product-buttons-wrap > a,
  .fct-product-buttons-wrap > button,
  .fct-product-buttons-wrap > .fluent-cart-direct-checkout-button,
  .fct-product-buttons-wrap > .fluent-cart-add-to-cart-button {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

/* --- Naregelen op blok 30 na de proefweergave --- */
:root { --fct-checkout-payment-method-bg-color: transparent !important; }
.fct_checkout_payment_methods .fct_payment_methods_list,
.fct_payment_methods_list {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.fct_payment_method_wrapper,
.fct_payment_method_logo,
.fct_payment_method { margin-bottom: 0 !important; }
.fluent-cart-checkout_embed_payment_wrapper {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Het bolletje in een keuzerondje dat uit staat is bij FluentCart altijd
   zichtbaar, alleen de kleur verandert. Op zwart werd dat een witte stip bij
   elke methode die je niet gekozen had. Uit staat is nu leeg. */
:root { --fct-checkout-radio-dot-bg-color: transparent !important; }
.fct_payment_method .checkmark:after,
.fct_payment_method_wrapper .checkmark:after {
  background-color: transparent !important;
}
.fct_payment_method input[name="_fct_pay_method"]:checked ~ label .checkmark:after,
.fct_payment_method_wrapper.active .checkmark:after {
  background-color: var(--tl-lime) !important;
}


/* ==========================================================================
   32. v5.2  Die grijze balk achter Heb je een waardebon
   ==========================================================================
   Dat is geen achtergrond, dat is een hover. In blok 5 gaf ik alle tekst
   knoppen bij hover een vulling van #222222, en omdat deze schakelaar de
   volle breedte van de lijst pakt werd dat een balk over het hele scherm.
   Op een aanraakscherm blijft die hover ook nog eens plakken nadat je hem
   hebt aangeraakt. Een tekstlink hoort geen vlak te krijgen, alleen een
   lichtere kleur, dus dat is wat hij nu doet.
   ========================================================================== */

.fct_coupon_toggle {
  display: block;
  margin-bottom: 8px;
  background-color: transparent !important;
}
.fct_coupon_toggle a,
.fct_coupon_toggle a:hover,
.fct_coupon_toggle a:focus,
.fct_coupon_toggle a:active {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--tl-lime) !important;
  text-decoration: none !important;
}
.fct_coupon_toggle a:hover {
  color: var(--tl-lime-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
.fct_coupon_toggle a:focus-visible {
  box-shadow: var(--tl-focus) !important;
}


/* ==========================================================================
   33. v5.3  Het aanvinkvak in de modal
   ==========================================================================
   In de modal heet dat ding fct-input-checkbox en het zit in
   .fct_checkout_agree_terms. Blok 7 pakte het wel, maar niet hard genoeg
   tegen wat het thema eroverheen gooit. Hier staan alle plekken waar zo'n
   vakje kan voorkomen bij elkaar, met dezelfde maat van 20 bij 20.
   ========================================================================== */

.fct_checkout_agree_terms input[type="checkbox"],
.fct-modal-checkout-form-wrapper input[type="checkbox"],
.fct-modal-checkout-details input[type="checkbox"],
.fct-modal-checkout-summary input[type="checkbox"],
.fct-checkout-modal input[type="checkbox"],
input.fct-input-checkbox,
input.fct-input.fct-input-checkbox {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 10px 0 0 !important;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.fct_checkout_agree_terms input[type="checkbox"]:checked,
.fct-modal-checkout-form-wrapper input[type="checkbox"]:checked,
.fct-checkout-modal input[type="checkbox"]:checked,
input.fct-input-checkbox:checked {
  background-color: var(--tl-lime) !important;
  border-color: var(--tl-lime) !important;
}
.fct_checkout_agree_terms {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.fct_checkout_agree_terms .fct_input_label_checkbox,
.fct_checkout_agree_terms label {
  line-height: 1.5 !important;
  margin: 0 !important;
}
/* ==========================================================================
   34. v5.4  Hoeveelheid volle breedte, gelijke hoogte
   ========================================================================== */

[data-fluent-cart-product-quantity-container],
.fct-product-quantity-container,
.fct-product-qty-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

[data-fluent-cart-product-quantity-container] .fct-product-quantity,
.fct-product-quantity-container .fct-product-quantity {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 52px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

[data-fluent-cart-product-quantity-container] .fct-quantity-decrease-button,
[data-fluent-cart-product-quantity-container] .fct-quantity-increase-button,
.fct-product-quantity-container .fct-quantity-decrease-button,
.fct-product-quantity-container .fct-quantity-increase-button {
  box-sizing: border-box !important;
  flex: 0 0 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  align-self: stretch !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  color: var(--tl-text-mid) !important;
}

[data-fluent-cart-product-quantity-container] .fct-quantity-decrease-button svg,
[data-fluent-cart-product-quantity-container] .fct-quantity-increase-button svg,
.fct-product-quantity-container .fct-quantity-decrease-button svg,
.fct-product-quantity-container .fct-quantity-increase-button svg {
  display: block !important;
  width: 14px !important;
  height: auto !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
}

[data-fluent-cart-product-quantity-container] .fct-quantity-decrease-button:hover,
[data-fluent-cart-product-quantity-container] .fct-quantity-increase-button:hover,
.fct-product-quantity-container .fct-quantity-decrease-button:hover,
.fct-product-quantity-container .fct-quantity-increase-button:hover {
  background: var(--tl-surface-hover) !important;
  border-color: var(--tl-text-lo) !important;
  color: var(--tl-lime) !important;
}

[data-fluent-cart-product-quantity-container] .fct-quantity-input,
.fct-product-quantity-container .fct-quantity-input,
.fct-product-quantity-container .fct-product-quantity .fct-quantity-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 50px !important;
  align-self: stretch !important;
  background-color: var(--tl-black) !important;
  border: 1px solid var(--tl-line-strong) !important;
  border-radius: 0 !important;
  color: var(--tl-text-hi) !important;
  font-family: var(--tl-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
[data-fluent-cart-product-quantity-container] .fct-quantity-input::-webkit-outer-spin-button,
[data-fluent-cart-product-quantity-container] .fct-quantity-input::-webkit-inner-spin-button,
.fct-product-quantity-container .fct-quantity-input::-webkit-outer-spin-button,
.fct-product-quantity-container .fct-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* ==========================================================================
   35. v5.5  Afrekenen: betaalmethode geen knop, lege velden zichtbaar
   ==========================================================================
   De gekozen betaalmethode had een lime rand en lime tekst, vlak boven
   Bestellen. Dat las als een tweede knop. Omlijning eraf, tekst lichtgrijs
   — het is een keuze die al gemaakt is.

   Lege naam/e-mailvelden gebruikten --tl-text-faint (#555) op zwart, en
   een haarlijnrand van #3a3a3a. Mensen keken eroverheen. :placeholder-shown
   tilt nét die lege velden op; ingevulde velden blijven rustig.
   ========================================================================== */

.fct_checkout .fct_payment_method_wrapper,
.fct_checkout .fct_payment_method,
.fct_checkout .fct_payment_method_logo,
.fct_checkout .fct_payment_method_wrapper.active,
.fct_checkout .fct_payment_method_wrapper:hover,
.fct_checkout .fct_payment_method_wrapper.active:hover,
.fct_checkout .fct_modal_payment_methods .fct_payment_method_wrapper,
.fct_checkout .fct_modal_payment_methods .fct_payment_method_wrapper.active,
.fct-checkout .fct_payment_method_wrapper,
.fct-checkout .fct_payment_method_wrapper.active,
.fluent-cart-checkout-page .fct_payment_method_wrapper,
.fluent-cart-checkout-page .fct_payment_method_wrapper.active,
.fct-modal-checkout-form-wrapper .fct_payment_method_wrapper,
.fct-modal-checkout-form-wrapper .fct_payment_method_wrapper.active,
.fct-form-section-body .fct_payment_method_wrapper,
.fct-form-section-body .fct_payment_method_wrapper.active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: default;
}

.fct_checkout .fct_payment_method_wrapper label,
.fct_checkout .fct_payment_method_wrapper.active label,
.fct_checkout .fct_payment_method_logo label,
.fct_checkout .fct_payment_method_logo input[type="radio"]:checked + label,
.fct_checkout .fct_payment_method_logo input[type="radio"] + label,
.fct_checkout .fct_modal_payment_methods .fct_payment_method_wrapper.active label,
.fct-checkout .fct_payment_method_wrapper label,
.fct-checkout .fct_payment_method_wrapper.active label,
.fluent-cart-checkout-page .fct_payment_method_wrapper label,
.fluent-cart-checkout-page .fct_payment_method_wrapper.active label,
.fct-modal-checkout-form-wrapper .fct_payment_method_wrapper label,
.fct-modal-checkout-form-wrapper .fct_payment_method_wrapper.active label,
.fct-form-section-body .fct_payment_method_wrapper label,
.fct-form-section-body .fct_payment_method_wrapper.active label {
  color: var(--tl-text-lo) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default;
}

.fct_checkout .fct_payment_method .checkmark,
.fct_checkout .fct_payment_method_wrapper .checkmark,
.fct-checkout .fct_payment_method_wrapper .checkmark,
.fluent-cart-checkout-page .fct_payment_method_wrapper .checkmark {
  border-color: var(--tl-text-lo) !important;
  background: transparent !important;
}
.fct_checkout .fct_payment_method input[name="_fct_pay_method"]:checked ~ label .checkmark,
.fct_checkout .fct_payment_method_wrapper.active .checkmark,
.fct-checkout .fct_payment_method_wrapper.active .checkmark,
.fluent-cart-checkout-page .fct_payment_method_wrapper.active .checkmark {
  border-color: var(--tl-text-lo) !important;
}
.fct_checkout .fct_payment_method input[name="_fct_pay_method"]:checked ~ label .checkmark:after,
.fct_checkout .fct_payment_method_wrapper.active .checkmark:after,
.fct-checkout .fct_payment_method_wrapper.active .checkmark:after,
.fluent-cart-checkout-page .fct_payment_method_wrapper.active .checkmark:after {
  background-color: var(--tl-text-lo) !important;
}

.fct_checkout input::placeholder,
.fct_checkout textarea::placeholder,
.fct-checkout input::placeholder,
.fct-checkout textarea::placeholder,
.fluent-cart-checkout-page input::placeholder,
.fluent-cart-checkout-page textarea::placeholder,
.fct-modal-checkout-form-wrapper input::placeholder,
.fct-modal-checkout-form-wrapper textarea::placeholder {
  color: var(--tl-text-lo) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--tl-text-lo) !important;
}

.fct_checkout input:placeholder-shown,
.fct_checkout textarea:placeholder-shown,
.fct-checkout input:placeholder-shown,
.fct-checkout textarea:placeholder-shown,
.fluent-cart-checkout-page input:placeholder-shown,
.fluent-cart-checkout-page textarea:placeholder-shown,
.fct-modal-checkout-form-wrapper input:placeholder-shown,
.fct-modal-checkout-form-wrapper textarea:placeholder-shown {
  border-color: #7a7a7a !important;
  background-color: var(--tl-surface-3) !important;
  color: var(--tl-text-lo) !important;
}