/*
 * Che Dona Luce: vaste stijllaag (Vamoz, 27-10-2026)
 * Twee lettertypes (fp-dancer-serif voor koppen, Sofia Sans voor de rest), één accentkleur, één knopvorm.
 * Rollen komen uit klassen in Elementor: cdl-bovenkop, cdl-kop-1/2/3, cdl-knop-primair/secundair.
 * !important is nodig omdat Elementor per element eigen CSS schrijft.
 */

:root {
  --cdl-navy: #0A0F2E;
  --cdl-navy-licht: #202C4B;
  --cdl-goud: #DCB349;
  --cdl-goud-hover: #C9A03A;
  --cdl-tekst: #3D4152;
  --cdl-licht: #F7F5F0;
  --cdl-lijn: #E6E2D8;
  --cdl-kop: "fp-dancer-serif", Georgia, serif;
  --cdl-tekstfont: "Sofia Sans", system-ui, sans-serif;
  --cdl-radius: 4px;
  --cdl-knop-hoogte: 48px;
  --cdl-rand: 20px;
}
@media (min-width: 1025px) {
  :root { --cdl-knop-hoogte: 46px; }
}

/* Basis */
body { font-family: var(--cdl-tekstfont); color: var(--cdl-tekst); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }

/* Lopende tekst: altijd Sofia Sans, rustige regelhoogte */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-icon-list-text,
.elementor-icon-box-description,
.elementor-image-box-description {
  font-family: var(--cdl-tekstfont) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Koppen */
.cdl-kop-1 .elementor-heading-title,
.cdl-kop-2 .elementor-heading-title,
.cdl-kop-3 .elementor-heading-title {
  font-family: var(--cdl-kop) !important;
  font-weight: 400 !important;
  font-style: normal;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word;
  hyphens: manual;
}
.cdl-kop-1 .elementor-heading-title { font-size: clamp(34px, 2.2rem + 2.2vw, 56px) !important; line-height: 1.05 !important; }
.cdl-kop-2 .elementor-heading-title { font-size: clamp(28px, 1.6rem + 1.2vw, 40px) !important; line-height: 1.1 !important; }
.cdl-kop-3 .elementor-heading-title { font-size: clamp(20px, 1.1rem + .4vw, 24px) !important; line-height: 1.15 !important; }
.elementor-heading-title em, .elementor-heading-title i { font-style: italic; }

/* Bovenkop (kicker): klein, hoofdletters, ruime spatiëring */
.cdl-bovenkop .elementor-heading-title {
  font-family: var(--cdl-tekstfont) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
@media (min-width: 1025px) { .cdl-bovenkop .elementor-heading-title { font-size: 14px !important; } }

/* Iconbox- en imagebox-titels volgen kop 3 */
.elementor-icon-box-title, .elementor-image-box-title {
  font-family: var(--cdl-kop) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* Knoppen: één vorm overal */
.elementor-button,
.pp-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button,
.elementor-field-type-submit .elementor-button,
.frm_style_formidable-style.with_frm_style .frm_submit button {
  font-family: var(--cdl-tekstfont) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  min-height: var(--cdl-knop-hoogte);
  padding: 12px 24px !important;
  border-radius: var(--cdl-radius) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.elementor-button .elementor-button-content-wrapper { align-items: center; }

/* Primair: goud met navy tekst */
.cdl-knop-primair .elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button,
.elementor-field-type-submit .elementor-button,
.frm_style_formidable-style.with_frm_style .frm_submit button {
  background: var(--cdl-goud) !important;
  color: var(--cdl-navy) !important;
  border: 2px solid var(--cdl-goud) !important;
}
.cdl-knop-primair .elementor-button * { color: inherit !important; }

/* Secundair: rand in de tekstkleur, geen vulling */
.cdl-knop-secundair .elementor-button {
  background: transparent !important;
  border: 2px solid currentColor !important;
}

@media (hover: hover) {
  .cdl-knop-primair .elementor-button:hover,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce .single_add_to_cart_button:hover,
  .wc-block-components-button:hover,
  .elementor-field-type-submit .elementor-button:hover,
  .frm_style_formidable-style.with_frm_style .frm_submit button:hover {
    background: var(--cdl-goud-hover) !important;
    border-color: var(--cdl-goud-hover) !important;
    color: var(--cdl-navy) !important;
  }
  .cdl-knop-secundair .elementor-button:hover {
    background: var(--cdl-goud) !important;
    border-color: var(--cdl-goud) !important;
    color: var(--cdl-navy) !important;
  }
  .elementor-widget-text-editor a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}

/* Mobiel: knoppen even breed */
@media (max-width: 767px) {
  .cdl-knop-primair .elementor-button,
  .cdl-knop-secundair .elementor-button { width: 100%; }
}

/* Mobiel: vaste ruimte tot de schermrand */
@media (max-width: 767px) {
  .elementor > .e-con { padding-left: var(--cdl-rand) !important; padding-right: var(--cdl-rand) !important; }
  .elementor > .e-con.e-con-boxed > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Productkaarten in de shop: even hoog, knop onderaan op één regel */
.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product {
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cdl-lijn);
  border-radius: var(--cdl-radius);
  padding: 0 0 16px !important;
  overflow: hidden;
}
.woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 12px !important; background: #F4F4F4; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cdl-kop) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: var(--cdl-navy) !important;
  padding: 0 16px !important;
}
.woocommerce ul.products li.product .price {
  font-family: var(--cdl-tekstfont) !important;
  font-weight: 700 !important;
  color: var(--cdl-navy) !important;
  padding: 0 16px;
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 400; }
.woocommerce ul.products li.product .button {
  margin: auto 16px 0 !important;
  width: calc(100% - 32px);
  white-space: nowrap;
  border-left-width: 2px !important;
}
.woocommerce ul.products li.product .onsale {
  background: var(--cdl-goud) !important;
  color: var(--cdl-navy) !important;
  border-radius: var(--cdl-radius) !important;
  font-family: var(--cdl-tekstfont) !important;
  font-weight: 700 !important;
}

/* Receptkaarten (looptemplate Recepten kaart) */
.e-loop-item .elementor-widget-theme-post-featured-image img { border-radius: var(--cdl-radius); aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; }

/* Tekst in knoppen erft het knopfont (PowerPack en Elementor zetten het soms op de binnenste span) */
.elementor-button *, .pp-button * { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }

/* PowerPack-knoppengroep: eerste knop primair, de rest secundair */
.elementor-widget-pp-buttons .pp-buttons-group > .pp-button:first-child,
.elementor-widget-wc-add-to-cart .elementor-button {
  background: var(--cdl-goud) !important;
  color: var(--cdl-navy) !important;
  border: 2px solid var(--cdl-goud) !important;
}
.elementor-widget-pp-buttons .pp-buttons-group > .pp-button:not(:first-child) {
  background: transparent !important;
  border: 2px solid currentColor !important;
}
@media (hover: hover) {
  .elementor-widget-pp-buttons .pp-buttons-group > .pp-button:first-child:hover,
  .elementor-widget-wc-add-to-cart .elementor-button:hover { background: var(--cdl-goud-hover) !important; border-color: var(--cdl-goud-hover) !important; }
  .elementor-widget-pp-buttons .pp-buttons-group > .pp-button:not(:first-child):hover { background: var(--cdl-goud) !important; border-color: var(--cdl-goud) !important; color: var(--cdl-navy) !important; }
}
@media (max-width: 767px) {
  .elementor-widget-pp-buttons .pp-buttons-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .elementor-widget-pp-buttons .pp-buttons-group > .pp-button { width: 100%; margin: 0 !important; }
}
.elementor-widget-wc-add-to-cart .elementor-button { width: 100%; white-space: nowrap; }

/* Producttitels in Elementor-looptemplates (homepage-carrousel) volgen de kaartkop */
.elementor-widget-woocommerce-product-title .product_title,
.elementor-widget-woocommerce-product-title .elementor-heading-title,
.elementor-widget-woocommerce-product-title a {
  font-family: var(--cdl-kop) !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
.elementor-widget-woocommerce-product-price .price { font-family: var(--cdl-tekstfont) !important; font-weight: 700 !important; }

/* Donker: navy met witte tekst, voor op goud of licht */
.cdl-knop-donker .elementor-button {
  background: var(--cdl-navy) !important;
  color: #fff !important;
  border: 2px solid var(--cdl-navy) !important;
}
.cdl-knop-donker .elementor-button * { color: inherit !important; }
@media (hover: hover) {
  .cdl-knop-donker .elementor-button:hover { background: var(--cdl-navy-licht) !important; border-color: var(--cdl-navy-licht) !important; color: #fff !important; }
}
@media (max-width: 767px) { .cdl-knop-donker .elementor-button { width: 100%; } }