/* ByFlora uiterlijk — exact palet + typografie overgenomen van byflora.nl */

:root,
body {
  --theme-palette-color-1:#9AA886; /* salie (primair) */
  --theme-palette-color-2:#83926D; /* donker salie (hover) */
  --theme-palette-color-3:#3D352C; /* donkerbruin (koppen) */
  --theme-palette-color-4:#5B534B; /* warm grijsbruin (tekst) */
  --theme-palette-color-5:#F6F2E9; /* creme (achtergrond) */
  --theme-palette-color-6:#E6D7C0; /* zand/beige */
  --theme-palette-color-7:#CC9A87; /* terracotta-roze */
  --theme-palette-color-8:#B47C66; /* dieper terracotta */
  --paletteColor1:#9AA886;
  --paletteColor2:#83926D;
  --paletteColor3:#3D352C;
  --paletteColor4:#5B534B;
  --paletteColor5:#F6F2E9;
  --paletteColor6:#E6D7C0;
  --paletteColor7:#CC9A87;
  --paletteColor8:#B47C66;
}

body {
  font-family:'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--theme-palette-color-4);
  background-color:var(--theme-palette-color-5);
}

h1,h2,h3,h4,h5,h6,
.entry-title,.ct-title,.elementor-heading-title,.wp-block-heading {
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--theme-palette-color-3);
  letter-spacing:.2px;
}

a { color:var(--theme-palette-color-1); }
a:hover { color:var(--theme-palette-color-2); }

/* Knoppen — salie, wit, 8px afgerond (zoals byflora) */
.wp-block-button__link,
.wp-element-button,
button:not(.ct-toggle):not(.menu-toggle):not(.ct-search-toggle),
input[type="submit"],
.button,.ct-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt {
  background-color:var(--theme-palette-color-1) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:8px !important;
  min-height:55px;
  padding:14px 30px;
  font-family:'Mulish', sans-serif;
  font-weight:500;
  font-size:15px;
  transition:background-color .2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,.ct-button:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background-color:var(--theme-palette-color-2) !important;
  color:#ffffff !important;
}

/* Secundaire / outline knop in terracotta */
.is-style-outline .wp-block-button__link,
.button.alt-terracotta {
  background-color:transparent !important;
  color:var(--theme-palette-color-8) !important;
  border:1px solid var(--theme-palette-color-7) !important;
}

/* ===== byflora.nl ECHTE ontwerp-CSS (1-op-1 overgenomen) ===== */
:root{
  --bf-cream:#F6F2E9;
  --bf-sand:#E6D7C0;
  --bf-sage:#9AA886;
  --bf-sage-deep:#83926D;
  --bf-clay:#CC9A87;
  --bf-clay-deep:#B47C66;
  --bf-brown:#5B534B;
  --bf-espresso:#3D352C;
  --bf-muted:#7C7264;
}

/* ---------- HERO ---------- */
.bf-hero{ background:var(--bf-sand); border-radius:22px; padding:46px 56px; }
.bf-hero .bf-circle img{
  border-radius:50%; aspect-ratio:1 / 1; object-fit:cover;
  border:7px solid var(--bf-cream); box-shadow:0 18px 40px -24px rgba(61,53,44,.45);
}
.bf-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.1; }
/* placeholder-cirkel wanneer er nog geen foto is */
.bf-circle-placeholder{
  width:100%; max-width:320px; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--bf-cream), var(--bf-sage));
  border:7px solid var(--bf-cream); box-shadow:0 18px 40px -24px rgba(61,53,44,.45);
  margin:0 auto;
}
@media(max-width:782px){ .bf-hero{ padding:32px 22px; text-align:center; } }

/* ---------- CATEGORIE-KAARTEN ---------- */
.bf-card{ border-radius:22px; padding:28px 20px; text-align:center; color:#fff; transition:transform .25s, box-shadow .25s; }
.bf-card *{ color:inherit; }
.bf-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(61,53,44,.45); }
.bf-card-sage{ background:var(--bf-sage); }
.bf-card-clay{ background:var(--bf-clay); }
.bf-card-sand{ background:var(--bf-sand); color:var(--bf-espresso); }
.bf-card img{ border-radius:50%; width:80px; height:80px; object-fit:cover; margin:14px auto 0; border:4px solid rgba(255,255,255,.6); }

/* ---------- KENMERKEN-RIJ ---------- */
.bf-features{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; padding:38px 0; }
.bf-features .item{ text-align:center; color:var(--bf-espresso); }
.bf-features svg{ width:30px; height:30px; margin:0 auto 8px; color:var(--bf-espresso); }
.bf-features span{ display:block; font-weight:600; font-size:.85rem; }
@media(max-width:560px){ .bf-features{ gap:32px; } }

/* ---------- PRODUCTGRID ---------- */
.bf-products ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px; margin:0; list-style:none; }
.bf-products ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:#FBF8F1; border:1px solid rgba(61,53,44,.13); border-radius:14px; padding:16px; text-align:center;
  transition:box-shadow .2s, transform .2s;
}
.bf-products ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(61,53,44,.45); }
.bf-products ul.products li.product img{ border-radius:10px; margin:0 auto 12px; }
.bf-products ul.products li.product .woocommerce-loop-product__title{ font-family:"Cormorant Garamond",serif; font-size:1.2rem; color:var(--bf-espresso); }
.bf-products ul.products li.product .price{ color:var(--bf-espresso); font-weight:700; }
.bf-products ul.products li.product .price del{ color:var(--bf-muted); font-weight:400; }
@media(max-width:900px){ .bf-products ul.products{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .bf-products ul.products{ grid-template-columns:1fr; } }

/* ---------- CADEAU-BAND ---------- */
.bf-band{ background:var(--bf-clay); border-radius:22px; }
.bf-band h2{ color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); }
.bf-band img{ object-fit:cover; width:100%; }