/* =========================================================================
   Ford Performance Club — Ecwid storefront custom CSS.

   Wordt door Ecwid zelf in de storefront-DOM geïnjecteerd via
   Beheer -> Instellingen -> Storefront -> "URL naar aangepaste CSS".

   Zet in Ecwid de DOMEIN-ONAFHANKELIJKE URL (redirect in index.php, volgt
   automatisch mee naar productie):
     https://staging.fordperformanceclub.be/ecwid-storefront.css
     (na verhuizing: https://fordperformanceclub.eu/ecwid-storefront.css)

   Dit bestand zelf staat op:
     /assets/ecwid/storefront-custom.css

   BELANGRIJK — specificiteit:
   Ecwids EIGEN gegenereerde stylesheet is gescoped op
     html#ecwid_html body#ecwid_body ...
   (specificiteit 0-2-1+). Bare .ec-store-selectors verliezen daarvan. Daarom
   is ALLES hier geprefixt met #ecwid_html #ecwid_body zodat het wint zonder
   overal !important te hoeven zetten.

   NIETS met display:none dat de mandje-bediening raakt (verwijder-knop,
   aantal). De chrome (catalogus, zoek, categorieën, footer) wordt via
   storefront-custom.js verborgen, niet hier.
   ========================================================================= */

/* ---- typografie ----------------------------------------------------------- */
#ecwid_html #ecwid_body .ec-store,
#ecwid_html #ecwid_body .ec-cart,
#ecwid_html #ecwid_body .ec-cart__body,
#ecwid_html #ecwid_body .ec-page {
  font-family: "Ford F-1", "Segoe UI", Roboto, Arial, sans-serif;
  color: #1c1c1c;
}

#ecwid_html #ecwid_body .ec-cart__title,
#ecwid_html #ecwid_body .ec-cart-step__title,
#ecwid_html #ecwid_body .ec-page-title,
#ecwid_html #ecwid_body .ec-header-h1,
#ecwid_html #ecwid_body .ec-form__title {
  font-family: "Ford F-1 Bold Custom", "Ford F-1", sans-serif !important;
  color: #102b4e !important;
  letter-spacing: 0.005em;
}
#ecwid_html #ecwid_body .ec-cart-step__title {
  font-size: 18px;
}
#ecwid_html #ecwid_body .ec-cart__title,
#ecwid_html #ecwid_body .ec-page-title {
  font-size: 22px;
}

/* Op de eigen /cart-pagina staat er al een H1 "Jouw winkelmandje" — verberg
   Ecwids eigen mandje-titel. NIET in de checkout-modal op de eventpagina
   (daar staat #fpc-ecwid-store, geen [data-cart-page]). */
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart__title,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart .ec-page-title {
  display: none !important;
}

/* ---- winkelmandje: items ------------------------------------------------ */
#ecwid_html #ecwid_body .ec-cart-item {
  border-color: #ededed;
}
#ecwid_html #ecwid_body .ec-cart-item__title,
#ecwid_html #ecwid_body .ec-cart-item__name {
  font-family: "Ford F-1 Semibold Custom", "Ford F-1", sans-serif;
  color: #1c1c1c;
}
#ecwid_html #ecwid_body .ec-cart-item__price,
#ecwid_html #ecwid_body .ec-cart-item__subtotal {
  font-family: "Ford F-1 Semibold Custom", "Ford F-1", sans-serif;
  color: #102b4e;
}

/* ---- gekozen productopties overzichtelijker tonen --------------------
   Echte markup:
     .ec-cart-item__options.ec-text-muted
       .ec-cart-item__option
         .ec-cart-option.ec-cart-option--key    ("Naam: ")
         .ec-cart-option.ec-cart-option--value  ("Waarde")
   -> nette naam/waarde-lijst: elke optie een eigen regel, naam gedempt,
   waarde iets sterker; strak op elkaar. --------------------------------- */
#ecwid_html #ecwid_body .ec-cart-item__options {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 6px 0 2px !important;
}
#ecwid_html #ecwid_body .ec-cart-item__option {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}
#ecwid_html #ecwid_body .ec-cart-option--key {
  flex: 0 0 auto !important;
  color: #8a8a8a !important;
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif !important;
  font-weight: 400 !important;
}
#ecwid_html #ecwid_body .ec-cart-option--value {
  color: #353535 !important;
  font-family: "Ford F-1 Medium Custom", "Ford F-1", sans-serif !important;
  font-weight: 500 !important;
}
/* dezelfde compacte lijst in de rechter samenvattingskolom */
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-item__option {
  font-size: 0.78rem !important;
}

/* verwijder-knop + aantal-stepper ALTIJD zichtbaar en klikbaar */
#ecwid_html #ecwid_body .ec-cart-item__control,
#ecwid_html #ecwid_body .ec-cart-item__controls,
#ecwid_html #ecwid_body .ec-cart-item__control-remove,
#ecwid_html #ecwid_body .ec-cart-item__remove,
#ecwid_html #ecwid_body .ec-cart-item [class*="remove"],
#ecwid_html #ecwid_body .ec-cart-item [class*="delete"],
#ecwid_html #ecwid_body .ec-cart-item .ec-quantity,
#ecwid_html #ecwid_body .ec-cart-item__count {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#ecwid_html #ecwid_body .ec-cart-item__control-remove,
#ecwid_html #ecwid_body .ec-cart-item__remove {
  color: #9a9a9a;
}
#ecwid_html #ecwid_body .ec-cart-item__control-remove:hover,
#ecwid_html #ecwid_body .ec-cart-item__remove:hover {
  color: #b3261e;
}
#ecwid_html #ecwid_body .ec-quantity,
#ecwid_html #ecwid_body .ec-cart-item__count {
  border-radius: 6px;
}

/* ---- totalen / samenvatting ------------------------------------------- */
#ecwid_html #ecwid_body .ec-cart__total,
#ecwid_html #ecwid_body .ec-cart-summary__total,
#ecwid_html #ecwid_body .ec-price-item {
  font-family: "Ford F-1 Semibold Custom", "Ford F-1", sans-serif;
  color: #102b4e;
}

/* ---- rechter samenvattingskolom (.ec-cart__sidebar): alles compacter ---
   Ecwid rendert die kolom met vrij grote tekst. We schalen 'm terug naar
   dezelfde maat als de rest van het formulier. --------------------------- */
#ecwid_html #ecwid_body .ec-cart__sidebar,
#ecwid_html #ecwid_body .ec-cart__sidebar p,
#ecwid_html #ecwid_body .ec-cart__sidebar span,
#ecwid_html #ecwid_body .ec-cart__sidebar div,
#ecwid_html #ecwid_body .ec-cart__sidebar li,
#ecwid_html #ecwid_body .ec-cart__sidebar label,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-item__title,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-item__name,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-option--key,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-option--value {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}
/* de eindtotaal-regel iets prominenter dan de rest, maar niet groot */
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart__total,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart__total span,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-summary__total,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-summary__total span,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart__price--total,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart__price--total span {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}
/* koptekst van de samenvatting ("Overzicht" / "Uw bestelling") */
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart__title,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-header-h4,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-summary__title {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}
/* miniatuur van een artikel in de samenvatting niet te groot */
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-item__image,
#ecwid_html #ecwid_body .ec-cart__sidebar .ec-cart-item__image-wrap {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

/* ---- formuliervelden (afrekenen) -------------------------------------
   Ecwids veld-wrapper (.form-control) heeft overflow:hidden voor de zwevende
   label — daardoor werd een box-shadow-focusring afgesneden. We zetten de
   wrappers op overflow:visible en gebruiken een INSET-ring die sowieso
   binnen het veld blijft. */
#ecwid_html #ecwid_body .form-control,
#ecwid_html #ecwid_body .ec-form__cell,
#ecwid_html #ecwid_body .ec-form__row {
  overflow: visible !important;
}
#ecwid_html #ecwid_body .form-control__text,
#ecwid_html #ecwid_body .form-control__select,
#ecwid_html #ecwid_body .ec-form input[type="text"],
#ecwid_html #ecwid_body .ec-form input[type="email"],
#ecwid_html #ecwid_body .ec-form input[type="tel"],
#ecwid_html #ecwid_body .ec-form input[type="number"],
#ecwid_html #ecwid_body .ec-form select,
#ecwid_html #ecwid_body .ec-form textarea {
  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  min-height: 42px;
}
#ecwid_html #ecwid_body .form-control--focus,
#ecwid_html #ecwid_body .form-control--focus .form-control__text,
#ecwid_html #ecwid_body .form-control__text:focus,
#ecwid_html #ecwid_body .form-control__select:focus,
#ecwid_html #ecwid_body .ec-form input:focus,
#ecwid_html #ecwid_body .ec-form select:focus,
#ecwid_html #ecwid_body .ec-form textarea:focus {
  border-color: #014d8b !important;
  outline: none !important;
  /* inset -> geen overflow-clipping, ring volledig zichtbaar rondom */
  box-shadow: inset 0 0 0 1px #014d8b !important;
}
/* de wrapper zelf mag GEEN eigen focus-rand/-shadow meer trekken */
#ecwid_html #ecwid_body .form-control--focus {
  box-shadow: none !important;
}
#ecwid_html #ecwid_body .form-control__placeholder,
#ecwid_html #ecwid_body .form-control__inline-label {
  color: #8a8a8a;
}
#ecwid_html #ecwid_body .form-control__label,
#ecwid_html #ecwid_body .ec-form__title {
  font-family: "Ford F-1 Medium Custom", "Ford F-1", sans-serif;
}

/* ---- knoppen -------------------------------------------------------------
   LET OP: de primaire "verder"-/"bestellen"-knop wordt verderop volledig
   opnieuw gestyled als de .fpc-reg-submit-CTA (pill + voortgangsbalk). Om
   te vermijden dat Ecwids eigen hover-achtergrond daar heel even
   doorflitst, sluiten we die knoppen hier expliciet uit
   (:not(.form-control--large)) en laten we deze regel enkel de kleinere
   knoppen (bv. "Toepassen") raken. */
#ecwid_html
  #ecwid_body
  .form-control--button:not(.form-control--large):not(.form-control--primary),
#ecwid_html
  #ecwid_body
  button.form-control--button:not(.form-control--large):not(
    .form-control--primary
  ) {
  background: #014d8b !important;
  border-color: #014d8b !important;
  border-radius: 6px !important;
  font-family: "Ford F-1 Medium Custom", "Ford F-1", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
#ecwid_html
  #ecwid_body
  .form-control--button:not(.form-control--large):not(
    .form-control--primary
  ):hover {
  background: #0a3d6b !important;
}
#ecwid_html #ecwid_body .form-control--secondary .form-control--button,
#ecwid_html #ecwid_body .form-control--button.form-control--secondary {
  background: #fff;
  color: #014d8b;
  border-color: #014d8b;
}

/* ---- radio / checkbox-accent (betaalmethode enz.) ------------------- */
#ecwid_html #ecwid_body .ec-radio input:checked + .ec-radio__icon,
#ecwid_html #ecwid_body .radio input:checked + .radio__icon,
#ecwid_html #ecwid_body .ec-checkbox input:checked + .ec-checkbox__icon {
  border-color: #014d8b;
  color: #014d8b;
}

/* De marketing-opt-in ("Houd mij op de hoogte …") blijft staan; de tekst
   wordt door storefront-custom.js -> translateMarketingOptIn() vertaald
   (komt uit een winkelinstelling, niet uit Ecwids taalpakket). */

/* ---- gift-/fooien-knoppen (tips) — FPC-huisstijl -------------------
   Echte Ecwid-markup:
     .ec-form__cell--tips
       .ec-extrafield--toggle-button
         .form-control--checkbox-button          (× 3)
           input.form-control__radio             (verborgen radio)
           .form-control__inline-label > label > .option-title (+ .option-surcharge)
   We maken er 3 gelijke kolommen van, elke keuze een pill; de aangevinkte
   -> Ford-blauw gevuld (via :has(input:checked)). */

/* de knoppen-container -> 3-koloms grid */
#ecwid_html #ecwid_body .ec-form__cell--tips .ec-extrafield--toggle-button,
#ecwid_html #ecwid_body .ec-extrafield--toggle-button {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 420px;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ALLE Ecwid-eigen pseudo-elementen + toggle-graphics binnen dit widget
   uitschakelen (het "witte capsule"-icoon in de aangevinkte knop). */
#ecwid_html #ecwid_body .ec-extrafield--toggle-button *::before,
#ecwid_html #ecwid_body .ec-extrafield--toggle-button *::after {
  content: none !important;
  display: none !important;
}

/* de wrapper .form-control--checkbox-button IS de pill (Ecwid stylet die zelf
   op checked -> volledig resetten en overnemen). */
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #cbd3dc !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1f2937 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Ford F-1 Semibold Custom", "Ford F-1", sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  cursor: pointer !important;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}
/* de verborgen radio écht verbergen (geen ruimte, geen visuele knop) */
#ecwid_html #ecwid_body .ec-extrafield--toggle-button .form-control__radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
/* binnenste label-wrappers zijn puur tekst, geen eigen kader/achtergrond */
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control__inline-label,
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control__inline-label
  > label {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
}
#ecwid_html #ecwid_body .ec-extrafield--toggle-button .option-title {
  color: inherit !important;
  font: inherit !important;
  opacity: 1 !important;
}

#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button:hover {
  border-color: #014d8b !important;
  background: #eef6ff !important;
}
/* aangevinkt -> Ford-blauw gevuld (zowel via :has als via Ecwids eigen classes) */
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button:has(input:checked),
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button.form-control--checked,
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button[class*="checked"],
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button[class*="active"],
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button[class*="selected"] {
  border-color: #014d8b !important;
  background: #014d8b !important;
  color: #fff !important;
}
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button:has(input:checked)
  .option-title,
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button:has(input:checked)
  .option-surcharge,
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button.form-control--checked
  .option-title,
#ecwid_html
  #ecwid_body
  .ec-extrafield--toggle-button
  .form-control--checkbox-button.form-control--checked
  .option-surcharge {
  color: #fff !important;
}
/* het meerprijs-regeltje (€ 52,50) onder een percentage */
#ecwid_html #ecwid_body .ec-extrafield--toggle-button .option-surcharge {
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.72;
}
#ecwid_html #ecwid_body .ec-extrafield--toggle-button .option-surcharge:empty {
  display: none !important;
}

/* ---- sticky elementen op /cart mogen NIET over de vaste site-header ----
   Ecwid pint de mandje-samenvatting (en soms de stap-kop) met
   position:sticky;top:0. Op onze pagina staat daar de vaste header
   (position:fixed; z-index:100; hoogte --fpc-header-h). We duwen elke
   sticky-pin onder de header en cappen de stacking, zodat er niets
   overheen schuift bij het scrollen. Alleen actief op de /cart-shell. */
#ecwid_html #ecwid_body:has([data-cart-page]) [style*="position: sticky"],
#ecwid_html #ecwid_body:has([data-cart-page]) [style*="position:sticky"],
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart-summary,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart__summary,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart-widget,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-sticky,
#ecwid_html #ecwid_body:has([data-cart-page]) [class*="sticky"] {
  top: calc(var(--fpc-header-h, 96px) + 12px) !important;
  z-index: 40 !important;
}
@media (max-width: 767.98px) {
  #ecwid_html #ecwid_body:has([data-cart-page]) [style*="position: sticky"],
  #ecwid_html #ecwid_body:has([data-cart-page]) [style*="position:sticky"],
  #ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart-summary,
  #ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart__summary,
  #ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart-widget,
  #ecwid_html #ecwid_body:has([data-cart-page]) .ec-sticky,
  #ecwid_html #ecwid_body:has([data-cart-page]) [class*="sticky"] {
    top: calc(var(--fpc-header-h-mobile, 64px) + 10px) !important;
  }
}
/* niets binnen de Ecwid-storefront mag boven de header (z-index:100) uitkomen */
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-cart,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-page {
  position: relative;
  z-index: 1;
}
/* een vaste (fixed) mobiele afreken-/samenvattingsbalk hoort ONDER de header */
#ecwid_html
  #ecwid_body:has([data-cart-page])
  [style*="position: fixed"][style*="top"],
#ecwid_html
  #ecwid_body:has([data-cart-page])
  [style*="position:fixed"][style*="top"] {
  z-index: 40 !important;
}

/* ---- /cart: NOOIT de storefront-/categorie-grid tonen -------------------
   Ecwid kan bij het laden of bij "pagina terug" heel even zijn storefront-
   home (categorie-tegels) renderen vóór het naar de mand navigeert. We
   verbergen die storefront-home-containers; de mand-/afreken-/bevestigings-
   DOM (.ec-cart*, .ec-cart-step*) blijft ongemoeid. cart-page.js houdt de
   mount ook al verborgen tot page.type==='CART' — dit is het CSS-vangnet. */
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__categories,
#ecwid_html #ecwid_body:has([data-cart-page]) .ecwid-productBrowser-categories,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store-navigation,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-breadcrumbs,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__toolbar,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__search,
#ecwid_html
  #ecwid_body:has([data-cart-page])
  .ec-store__content-wrapper
  > .grid,
#ecwid_html
  #ecwid_body:has([data-cart-page])
  .ec-store__content-wrapper
  > .ec-grid,
#ecwid_html
  #ecwid_body:has([data-cart-page])
  .ec-store__content-wrapper
  > .ec-store__title,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store-page--type-STOREFRONT,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store-page--type-CATEGORY,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store-page--type-PRODUCT,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store-page--type-SEARCH,
/* Storefront-v3 markup (CategoryPage / StorefrontPage): het hele
   productBrowser-blok is niet-mand-DOM -> verbergen. .ec-cart* leeft in een
   eigen subtree en blijft dus zichtbaar. */
#ecwid_html #ecwid_body:has([data-cart-page]) .ecwid-productBrowser-CategoryPage,
#ecwid_html #ecwid_body:has([data-cart-page]) .ecwid-productBrowser-StorefrontPage,
#ecwid_html #ecwid_body:has([data-cart-page]) .ecwid-productBrowser-ProductPage,
#ecwid_html #ecwid_body:has([data-cart-page]) .ecwid-productBrowser-SearchPage,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__category-page,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__storefront-page,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-store__product-page,
#ecwid_html #ecwid_body:has([data-cart-page]) .ec-grid.grid__wrap,
#ecwid_html #ecwid_body:has([data-cart-page]) .grid__categories,
#ecwid_html #ecwid_body:has([data-cart-page]) .grid-category,
#ecwid_html #ecwid_body:has([data-cart-page]) .grid-product {
  display: none !important;
}

/* ---- .ec-cart__steps: geen extra marge boven op desktop --------------
   Ecwid zet .ec-size--l/.ec-size--m .ec-store .ec-cart__steps { margin-top }.
   Op desktop moet het strak tegen wat erboven staat. --------------- */
#ecwid_html #ecwid_body .ec-store .ec-cart__steps {
  margin-top: 0 !important;
}
@media (max-width: 767.98px) {
  #ecwid_html #ecwid_body .ec-store .ec-cart__steps {
    margin-top: 8px !important;
  }
}

/* ---- "Mist u een product? Doorgaan met winkelen" onder het couponblok
   weg (de storefront is toch verborgen op /cart).
   Echte markup: .ec-cart__shopping.ec-cart-shopping > .ec-cart-shopping__wrap */
#ecwid_html #ecwid_body .ec-cart__shopping,
#ecwid_html #ecwid_body .ec-cart-shopping,
#ecwid_html #ecwid_body .ec-cart-shopping__wrap,
#ecwid_html #ecwid_body .ec-cart__continue-shopping,
#ecwid_html #ecwid_body [class*="continue-shopping"] {
  display: none !important;
}

/* ---- couponblok: "Inwisselen" op een nieuwe regel onder "Promotiecoupon".
   Echte markup:
     label.ec-cart-coupon__text
       span.ec-cart-coupon__icon (svg)
       span  -> "Promotiecoupon " <a.ec-link>Inwisselen</a>
   De <a> zit inline in dezelfde span als de tekst. -> forceer 'm op een
   nieuwe regel. ---------------------------------------------------- */
#ecwid_html #ecwid_body .ec-cart-coupon__text {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
#ecwid_html #ecwid_body .ec-cart-coupon__text > span:last-child {
  display: block !important;
}
#ecwid_html #ecwid_body .ec-cart-coupon__text .ec-link {
  display: block !important;
  width: fit-content !important;
  margin-top: 4px !important;
}
/* op mobiel: "Couponcode Inwisselen" gewoon op één regel houden */
@media (max-width: 767.98px) {
  #ecwid_html #ecwid_body .ec-cart-coupon__text > span:last-child {
    display: inline !important;
  }
  #ecwid_html #ecwid_body .ec-cart-coupon__text .ec-link {
    display: inline !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-left: 6px !important;
  }
}

/* ---- op MOBIEL: boven het couponblok ("Promotiecode of waardebon?")
   tekende Ecwid twee hairlines onder elkaar (rand op .ec-cart-step--email
   én op .ec-cart__credits-and-coupons / .ec-cart__discount). Houd er
   precies ÉÉN over. Op desktop staan de blokken naast elkaar -> ongemoeid. */
@media (max-width: 767.98px) {
  #ecwid_html #ecwid_body .ec-cart-step--email {
    border-top: 1px solid #ededed !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
  }
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart__credits-and-coupons,
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart__discount,
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart__credits-and-coupons--title,
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart-discount-group,
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart-discount-group__coupon,
  #ecwid_html #ecwid_body .ec-cart-step--email .ec-cart-coupon__wrap {
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* de scheiding tussen couponblok en e-mailveld blijft (Ecwids eigen of
     onze eerdere) -> spacing netjes */
  #ecwid_html #ecwid_body .ec-cart__email,
  #ecwid_html #ecwid_body .ec-cart-email {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
}

/* ======================================================================
   Checkout-form -> zelfde stijl als het eigen inschrijfform (.fpc-reg-*)
   op de eventpagina. Doel: verplichte velden op dezelfde manier
   aangeduid (rode *), zelfde labels/sectietitels, en de knop onderaan
   met dezelfde font/grootte/pill-radius + voortgangsbalk-look.
   ==================================================================== */

/* ---- verplicht-markering: Ecwids .marker-required (een bolletje) ->
   rode asterisk, exact zoals .fpc-reg-req op de eventpagina
   (color:#e53935; font-weight:700). --------------------------------- */
/* Ecwid zet .marker-required als EERSTE kind van het label. We laten hem
   gewoon inline op zijn plek staan en tonen een rode * ervoor: "* Land".
   GEEN flexbox / reorder-trucs meer — die braken losse tekstnodes en hele
   labels (donatie-/opmerkingen-kop verdween). */
#ecwid_html #ecwid_body .marker-required {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  vertical-align: baseline !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
#ecwid_html #ecwid_body .marker-required::before {
  content: "* ";
  color: #e53935;
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}
/* Een <div class="marker-required"> in een <p> sluit die <p> autom. af ->
   de marker komt "los" te staan als direct kind van een sectie/step.
   Zo'n weesmarker (zonder label ernaast) verbergen we. */
#ecwid_html #ecwid_body .ec-cart-step__section > .marker-required,
#ecwid_html #ecwid_body .ec-cart-step__body > .marker-required,
#ecwid_html #ecwid_body .ec-cart-step__wrap > .marker-required,
#ecwid_html #ecwid_body .ec-cart-step > .marker-required {
  display: none !important;
}
#ecwid_html #ecwid_body .ec-form__title,
#ecwid_html #ecwid_body .ec-cart-step__title,
#ecwid_html #ecwid_body .ec-cart-step__subtitle {
  display: block !important;
}

/* ---- ALLE tekst in het checkout-form een lichtere font-weight ---------
   De hele afreken-flow moet dunner ogen: geen Bold/Semibold/Medium-
   custom faces, gewoon "Ford F-1 Regular" op weight 400. Uitzonderingen:
   de rode verplicht-* en de primaire CTA-knop (die zetten hun eigen
   gewicht verderop). -------------------------------------------------- */
#ecwid_html #ecwid_body .ec-cart-step,
#ecwid_html
  #ecwid_body
  .ec-cart-step
  *:not(.marker-required):not(.form-control--button):not(
    .form-control__button-text
  ):not(.ec-form__title):not(.ec-cart-step__title):not(.ec-cart-step__subtitle),
#ecwid_html #ecwid_body .ec-form,
#ecwid_html
  #ecwid_body
  .ec-form
  *:not(.marker-required):not(.form-control--button):not(
    .form-control__button-text
  ):not(.ec-form__title):not(.ec-cart-step__title):not(
    .ec-cart-step__subtitle
  ) {
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif !important;
}

/* ---- sectietitels / stap-koppen -> zoals .fpc-reg-option__title ----- */
#ecwid_html #ecwid_body .ec-cart-step__title.ec-header-h4 {
  font-family: "Ford F-1 Medium Custom", "Ford F-1", sans-serif !important;
  font-weight: 500 !important;
  color: #102b4e !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.005em;
}

/* ---- Lucide-icoon vóór elke afreken-stapkop -----------------------------
   Per stap (.ec-cart-step--<x>) een passend Lucide-icoon als CSS-mask op
   een ::before, zodat het de titelkleur (#102b4e) volgt. --------------- */
#ecwid_html #ecwid_body .ec-cart-step__title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* de beschrijvingstekst onder de kop inspringen zodat ze links uitlijnt met
   de TITELTEKST (dus voorbij het icoon: 18px breedte + 8px gap = 26px).
   Alleen bij de "Volgende"-stappen (collapsed) met een icoon. */
#ecwid_html #ecwid_body .ec-cart-step--email > .ec-cart-step__wrap > .ec-cart-step__body,
#ecwid_html #ecwid_body .ec-cart-step--customer-info > .ec-cart-step__wrap > .ec-cart-step__body,
#ecwid_html #ecwid_body .ec-cart-step--payment > .ec-cart-step__wrap > .ec-cart-step__body,
#ecwid_html #ecwid_body .ec-cart-step--order-confirmation > .ec-cart-step__wrap > .ec-cart-step__body,
#ecwid_html #ecwid_body .ec-cart-step--pickup > .ec-cart-step__wrap > .ec-cart-step__body,
#ecwid_html #ecwid_body .ec-cart-step--shipping-address > .ec-cart-step__wrap > .ec-cart-step__body {
  padding-left: 26px !important;
}
/* ... maar een ACTIEVE (uitgeklapte) stap met een echt formulier erin niet
   inspringen — daar staat geen losse beschrijving maar velden. */
#ecwid_html #ecwid_body .ec-cart-step:not(.ec-cart-step--empty) > .ec-cart-step__wrap > .ec-cart-step__body {
  padding-left: 0 !important;
}
#ecwid_html #ecwid_body .ec-cart-step--email > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--customer-info > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--payment > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--order-confirmation > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--pickup > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--shipping-address > .ec-cart-step__wrap > .ec-cart-step__title::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
}
/* mail */
#ecwid_html #ecwid_body .ec-cart-step--email > .ec-cart-step__wrap > .ec-cart-step__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
/* map-pin (klantinfo / verzendadres / afhalen) */
#ecwid_html #ecwid_body .ec-cart-step--customer-info > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--shipping-address > .ec-cart-step__wrap > .ec-cart-step__title::before,
#ecwid_html #ecwid_body .ec-cart-step--pickup > .ec-cart-step__wrap > .ec-cart-step__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* credit-card (betaling) */
#ecwid_html #ecwid_body .ec-cart-step--payment > .ec-cart-step__wrap > .ec-cart-step__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
}
/* circle-check-big (orderbevestiging) */
#ecwid_html #ecwid_body .ec-cart-step--order-confirmation > .ec-cart-step__wrap > .ec-cart-step__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}
#ecwid_html #ecwid_body .ec-cart-step__subtitle,
#ecwid_html #ecwid_body .ec-cart-step__subtitle.ec-header-h5 {
  font-family: "Ford F-1 Bold Custom", "Ford F-1", sans-serif !important;
  font-weight: 700 !important;
  color: #353535 !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px !important;
}
/* een écht lege subtitle (geen tekst, geen kinderen) neemt geen ruimte in.
   GEEN :has(:only-child) meer — dat kon een door de browser autogesloten
   lege <p> raken terwijl de labeltekst er nog naast stond (donatie-kop). */
#ecwid_html #ecwid_body .ec-cart-step__subtitle:empty {
  display: none !important;
  margin: 0 !important;
}

/* ---- veldlabels -> .fpc-reg-option__title, in Semibold F-1 ---------- */
#ecwid_html #ecwid_body .ec-form__title,
#ecwid_html #ecwid_body .ec-form__title.ec-header-h6 {
  font-family: "Ford F-1 Medium Custom", "Ford F-1", sans-serif !important;
  font-weight: 100 !important;
  color: #353535 !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 6px !important;
}

/* ---- "Alle velden zijn verplicht ..."-notitie -> gedempt (.fpc-reg-hint) */
#ecwid_html #ecwid_body .ec-cart-step__mandatory-fields-notice {
  color: #959595 !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  font-style: normal !important;
}

/* ---- beschrijvende paragrafen in een afreken-sectie (bv. de donatie-
   uitleg "We waarderen alle donaties ...") -> kleiner, gedempt ------- */
#ecwid_html #ecwid_body .ec-cart-step__section > p,
#ecwid_html #ecwid_body .ec-cart-step__body > p,
#ecwid_html #ecwid_body .ec-cart-step__wrap > p {
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: #6b6b6b !important;
  margin: 0 0 10px !important;
}

/* ---- tekstinputs / selects -> .fpc-reg-input / .fpc-reg-select ------
   (1px #d9d9d9, radius 6px, min-height 40px, F-1, .9rem, focus #014d8b).
   De basis stond hierboven al; dit lijnt de details uit met het
   inschrijfform. ---------------------------------------------------- */
#ecwid_html #ecwid_body .form-control__text,
#ecwid_html #ecwid_body .form-control__select,
#ecwid_html #ecwid_body .ec-form input[type="text"],
#ecwid_html #ecwid_body .ec-form input[type="email"],
#ecwid_html #ecwid_body .ec-form input[type="tel"],
#ecwid_html #ecwid_body .ec-form select,
#ecwid_html #ecwid_body .ec-cart-email__input .form-control__text,
#ecwid_html #ecwid_body #ec-cart-email-input {
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  min-height: 40px !important;
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif !important;
  font-size: 0.9rem !important;
  color: #1f2937 !important;
}

/* Toegevoegd label boven het e-mailveld (storefront-custom.js addCartEmailLabel).
   Het draagt de klassen .ec-form__title.ec-header-h6, dus de veldlabel-stijl
   verderop pakt het automatisch. Alleen zeker zetten dat het een blokelement
   op een eigen regel is. */
#ecwid_html #ecwid_body .ec-cart-email__input .fpc-cart-email-label {
  display: block;
}

/* Het e-mailveld bovenaan de checkout (.ec-cart-email__input) is een
   .form-control--large en kreeg daardoor Ecwids grote-veld-stijl. Zelfde
   behandeling als de rest: strakke #d9d9d9-rand, radius 6, hoogte 40. */
#ecwid_html #ecwid_body .ec-cart-email__input .form-control,
#ecwid_html #ecwid_body .ec-cart-email__input .form-control--large,
#ecwid_html #ecwid_body .ec-cart-email__input .form-control--flexible {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: none !important;
  box-shadow: none !important;
}
#ecwid_html #ecwid_body .ec-cart-email__input .form-control__text {
  height: 40px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#ecwid_html #ecwid_body .ec-cart-email__input .form-control__text:focus {
  border-color: #014d8b !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px #014d8b !important;
}

/* ======================================================================
   Knop onderaan ("Ga naar betaling" / "Bestelling plaatsen" / "Bestellen")
   -> exact de stijl van .fpc-reg-submit[data-progress="full"] op de
   eventpagina: pill-radius, 2px FPC-blauwe rand, Ford F-1 600, 0.95rem,
   letter-spacing .5px, witte tekst, EFFEN FPC-blauwe vulling. Ecwid heeft
   geen echte progress-state in de checkout, dus geen track/overlay -
   gewoon één effen achtergrond (geen ::before), zodat er niets in de
   afgeronde hoeken doorschijnt en er niets doorflitst bij hover. ---- */
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
  min-width: 120px !important;
  max-width: 100% !important;
  height: 44px !important;
  padding-inline: 24px !important;
  border: 2px solid #014d8b !important; /* var(--fpc-blue) */
  border-radius: 25px !important; /* var(--fpc-radius-pill) */
  background: #014d8b !important; /* var(--fpc-blue) */
  color: #fff !important; /* var(--fpc-white) */
  font-family: "Ford F-1", "Segoe UI", Arial, sans-serif !important; /* var(--fpc-font) */
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease !important;
}
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button::before,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button::before,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button::before,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary::before,
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button::after,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button::after,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button::after,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary::after {
  content: none !important;
  display: none !important;
}
/* De OUTER (.form-control--button) is de blauwe pill. De INNER <button>
   (.form-control__button) mag NOOIT een eigen achtergrond/rand/schaduw
   tonen — in geen enkele staat — anders zie je een donkerdere of lichtere
   kern binnen de pill (en een kleurverschil bij hover). Hij wordt volledig
   transparant gemaakt en uitgerekt tot de volledige pill. */
#ecwid_html
  #ecwid_body
  .ec-form__row--continue
  .form-control--button
  .form-control__button,
#ecwid_html
  #ecwid_body
  .ec-cart__button
  .form-control--button
  .form-control__button,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control__button,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary
  .form-control__button,
#ecwid_html
  #ecwid_body
  .ec-form__row--continue
  .form-control--button
  .form-control__button:hover,
#ecwid_html
  #ecwid_body
  .ec-cart__button
  .form-control--button
  .form-control__button:hover,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control__button:hover,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary
  .form-control__button:hover,
#ecwid_html
  #ecwid_body
  .ec-form__row--continue
  .form-control--button
  .form-control__button:focus,
#ecwid_html
  #ecwid_body
  .ec-cart__button
  .form-control--button
  .form-control__button:focus,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control__button:focus,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary
  .form-control__button:focus,
#ecwid_html
  #ecwid_body
  .ec-form__row--continue
  .form-control--button
  .form-control__button:active,
#ecwid_html
  #ecwid_body
  .ec-cart__button
  .form-control--button
  .form-control__button:active,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control__button:active,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary
  .form-control__button:active {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
/* De outer pill: hover zoals .fpc-btn:hover -> achtergrond én rand naar
   lichter FPC-blauw, witte tekst. GEEN schaduw/verplaatsing. */
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button:hover,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button:hover,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button:hover,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary:hover,
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button:active,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button:active,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button:active,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary:active {
  background: #1d93ce !important; /* var(--fpc-blue-light) */
  border-color: #1d93ce !important; /* var(--fpc-blue-light) */
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
#ecwid_html #ecwid_body .ec-form__row--continue .form-control--button:focus-visible,
#ecwid_html #ecwid_body .ec-cart__button .form-control--button:focus-visible,
#ecwid_html
  #ecwid_body
  .ec-cart-step__control
  .form-control--primary
  .form-control--button:focus-visible,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary:focus-visible {
  border-color: #1d93ce !important;
  box-shadow: 0 0 0 3px rgba(1, 77, 139, 0.25) !important;
  outline: none !important;
  transform: none !important;
  filter: none !important;
}
#ecwid_html #ecwid_body .ec-form__row--continue .form-control__button-text,
#ecwid_html #ecwid_body .ec-cart__button .form-control__button-text,
#ecwid_html #ecwid_body .ec-cart-step__control .form-control__button-text,
#ecwid_html
  #ecwid_body
  .form-control--button.form-control--large.form-control--primary
  .form-control__button-text {
  position: relative;
  z-index: 1;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
#ecwid_html #ecwid_body .ec-form__row--continue .form-control__loader,
#ecwid_html #ecwid_body .ec-cart__button .form-control__loader {
  position: relative;
  z-index: 1;
}