/* ==========================================================================
   Freerun Achterhoek — winkel: de laatste afwerking (sinds 1.4.0)

   Alleen voor de shop. Dit bestand staat NIET in het buildscript: het wordt
   niet overschreven door de gedeelde huisstijl, en die hoeft hier ook niets
   van te weten. Het laadt na elementor-compat.css.

   Gemeten op 29 september 2026:
   1. De knop "In winkelwagen" was paars (#7f54b3) zolang je bij het shirt nog
      geen maat had gekozen. WooCommerce heeft voor een uitgeschakelde knop een
      zwaardere regel dan de onze, dus die won.
   2. Links zonder eigen opmaak ("Wissen" bij de maat, "Bereken
      verzendkosten") waren roze: de standaardkleur van het thema.
   3. De winkelwagen was op de telefoon nergens te vinden: de hele
      knoppenbalk rechts in de header staat onder 1025 px uit.
   4. Teksten in Elementor-tekstblokken stonden in Roboto, de standaardletter
      van de Elementor-kit van de shop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. De kleuren van WooCommerce zelf op zwart-wit

   WooCommerce haalt veel kleuren uit deze variabelen (knoppen, meldingen,
   het label "Aanbieding", de winkelmelding bovenin). Door ze hier te zetten,
   klopt ook wat we nog niet hebben gezien.
   -------------------------------------------------------------------------- */

:root {
  --woocommerce: #0b0b0a;
  --wc-primary: #0b0b0a;
  --wc-primary-text: #ffffff;
  --wc-secondary: #f4f4f1;
  --wc-secondary-text: #0b0b0a;
  --wc-highlight: #0b0b0a;
  --wc-highligh-text: #ffffff;
  --wc-form-border-color: #0b0b0a;
  --wc-form-border-radius: 0;
  --wc-card-border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. Knoppen, in elke stand

   !important omdat WooCommerce per stand (alt, uitgeschakeld, aanwijzen,
   bezig) een eigen, steeds zwaardere regel heeft. Zo wint zwart-wit altijd,
   ook bij standen die we niet stuk voor stuk kunnen nalopen.
   "Bekijk winkelwagen" onder een productkaart (a.added_to_cart) staat hier
   bewust niet bij: dat is in de huisstijl een tekstlink, geen blok.
   -------------------------------------------------------------------------- */

body.fa-scope :is(a.button, button.button, input.button, input[type="submit"].button, #respond input#submit, .wc-block-components-button:not(.is-link), .wp-element-button, #place_order, .checkout-button, .woocommerce-Button) {
  background-color: #0b0b0a !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #0b0b0a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.fa-scope :is(a.button, button.button, input.button, input[type="submit"].button, #respond input#submit, .wc-block-components-button:not(.is-link), .wp-element-button, #place_order, .checkout-button, .woocommerce-Button):is(:hover, :focus-visible):not(:disabled):not(.disabled) {
  background-color: #ffffff !important;
  color: #0b0b0a !important;
  border-color: #0b0b0a !important;
}

/* Uitgeschakeld (bijvoorbeeld nog geen maat gekozen): zwart, maar vaag, en
   zonder kleurwissel bij aanwijzen. */
body.fa-scope :is(a.button, button.button, input.button, #place_order, .wc-block-components-button, .woocommerce-Button):is(:disabled, .disabled, [disabled], [aria-disabled="true"]),
body.fa-scope :is(a.button, button.button, input.button, #place_order, .wc-block-components-button, .woocommerce-Button):is(:disabled, .disabled, [disabled], [aria-disabled="true"]):hover {
  background-color: #0b0b0a !important;
  color: #ffffff !important;
  border-color: #0b0b0a !important;
  opacity: 0.4 !important;
  cursor: not-allowed;
}

/* Het "bezig"-rondje van WooCommerce is standaard ook in de knopkleur. */
body.fa-scope :is(a.button, button.button).loading::after {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Links zonder eigen opmaak: zwart in plaats van thema-roze

   :where() houdt deze regel zo licht mogelijk. Alles wat al een eigen kleur
   heeft (menu, knoppen, footer) houdt die.
   -------------------------------------------------------------------------- */

:where(body.fa-scope) a,
:where(body.fa-scope) a:hover,
:where(body.fa-scope) a:active {
  color: inherit;
}

body.fa-scope .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-steel, #6b6b66) !important;
  text-decoration: underline;
}

body.fa-scope .shipping-calculator-button {
  color: var(--fa-black, #0b0b0a) !important;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Overige plekken met paars of lila van WooCommerce
   -------------------------------------------------------------------------- */

/* Het vak onder een gekozen betaalmethode bij afrekenen. */
body.fa-scope #payment div.payment_box {
  background-color: #f4f4f1 !important;
  color: #0b0b0a !important;
  border-radius: 0 !important;
}

body.fa-scope #payment div.payment_box::before {
  border-bottom-color: #f4f4f1 !important;
}

/* Paginanummers onder het productoverzicht. */
body.fa-scope nav.woocommerce-pagination ul li :is(a, span) {
  border-radius: 0;
}

body.fa-scope nav.woocommerce-pagination ul li :is(a:hover, a:focus, span.current) {
  background: #0b0b0a !important;
  color: #ffffff !important;
}

/* De melding bovenaan de winkel, als je die ooit aanzet. */
body.fa-scope :is(.woocommerce-store-notice, p.demo_store) {
  background-color: #0b0b0a !important;
  color: #ffffff !important;
}

/* Het label "Aanbieding!" op een product. */
body.fa-scope .woocommerce span.onsale {
  background-color: #0b0b0a !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* De streep boven meldingen. Fouten in de roestkleur van het merk. */
body.fa-scope :is(.woocommerce-message, .woocommerce-info) {
  border-top-color: #0b0b0a;
}

body.fa-scope .woocommerce-error {
  border-top-color: #b4451f;
}

/* --------------------------------------------------------------------------
   5. De winkelwagen ook op de telefoon

   Onder 1025 px staat de knoppenbalk rechts in de header uit (zie 10e in de
   huisstijl), en daarmee ook de winkelwagen. Nu blijft alleen de winkelwagen
   staan, links van de hamburger. Getest op 375 en 320 px.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  body.fa-scope .fa-header__acties:has(.fa-winkelwagen) {
    display: flex !important;
    order: 1;
    margin-left: auto;
  }

  body.fa-scope .fa-container:has(> .fa-header__acties .fa-winkelwagen) > .fa-nav {
    order: 2;
    margin-left: 0.25rem !important;
  }

  body.fa-scope .fa-header__acties:has(.fa-winkelwagen) .fa-winkelwagen__tekst {
    display: none;
  }

  body.fa-scope .fa-header .fa-winkelwagen {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   6. De letters van de Elementor-kit op Montserrat en Staatliches

   De kit van de shop stond op Roboto. Tekstblokken zonder eigen letter namen
   die over. De letters zelf staan in de plugin (fonts.css), dus er hoeft
   niets meer bij Google opgehaald te worden.
   -------------------------------------------------------------------------- */

body.fa-scope[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: "Staatliches";
  --e-global-typography-primary-font-weight: 400;
  --e-global-typography-secondary-font-family: "Montserrat";
  --e-global-typography-text-font-family: "Montserrat";
  --e-global-typography-accent-font-family: "Montserrat";
}