/* Buiten.studio Favorieten — huisstijl: groen #2C392D, goud #BE9F56 */

/* Hartje op productkaarten (rechtsboven, over de afbeelding) */
.el-item.bf-has-heart { position: relative; }
/* Kleurregel overal (keuze Gijs): zandkleurig rondje #ECE9E0 met donkergroen
   open hartje = nog niet bewaard; zelfde rondje met FRIS GROEN gevuld hartje
   (#32d296, het groen van de USP-vinkjes) = bewaard. Producten én recepten. */
.bf-heart-card {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    background: #ECE9E0; border: 0; color: #2C392D; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    transition: transform .12s, background .15s;
}
.bf-heart-card:hover { transform: scale(1.08); }
.bf-heart.is-fav { color: #32d296; }
/* Het UIkit-hartje heeft fill="none" op het pad zelf — daarom het pad aanspreken, niet de svg */
.bf-heart.is-fav svg path, .bf-heart.is-fav svg polygon { fill: #32d296; stroke: #32d296; }
/* Receptkaarten (receptenplugin): hartje rechtsboven op de uk-card */
.br-grid .uk-card { position: relative; }

/* Hartje op de productpagina: rond, naast "In winkelwagen", even hoog
   (de JS kopieert de hoogte van de winkelwagenknop naar --bf-h) */
form.cart .single_add_to_cart_button { vertical-align: middle; }
.bf-heart-single {
    --bf-h: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--bf-h); height: var(--bf-h); border-radius: 50%;
    margin-left: 10px; padding: 0; vertical-align: middle;
    background: #ECE9E0; border: 0; color: #2C392D;
    cursor: pointer; transition: transform .12s, background .15s;
}
.bf-atc-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.bf-atc-row .single_add_to_cart_button { flex: 1; margin: 0; }
.bf-atc-row .quantity { flex: 0 0 auto; margin: 0; }
.bf-atc-row .bf-heart-single { margin-left: 0; flex: 0 0 auto; }
.bf-heart-single:hover { transform: scale(1.06); }
/* Hartje op de receptpagina (naast deel-knoppen), zelfde stijl */
.bf-heart-recept-single { --bf-h: 44px; margin-left: 0; }

/* Header-knop met teller */
.bf-header-knop { position: relative; display: inline-flex; align-items: center; color: inherit; }
.bf-count {
    position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #BE9F56; color: #fff; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center;
}

/* Favorietenpagina — producten en recepten in dezelfde kaartfamilie */
.br-grid .uk-card { position: relative; }
.br-listing .bf-media img { width: 100%; aspect-ratio: 610 / 548; object-fit: contain !important; display: block; background: #fff; padding: 8%; box-sizing: border-box; }
/* Prijsregel gelijk uitgelijnd met de tekst in de uk-card-body (30px, vanaf 1200px 40px) */
.bf-prijsregel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 30px 30px; }
@media (min-width: 1200px) { .bf-prijsregel { padding: 0 40px 40px; } }
.bf-prijs { font-weight: 600; color: #2C392D; }
.bf-leeg { text-align: center; }
.bf-leeg p { margin-bottom: 16px; }
.bf-sectie { font-size: 20px; margin: 30px 0 14px; }
.bf-sectie span { font-weight: 400; color: #999; font-size: 15px; }
.bf-lijst > .bf-sectie:first-child { margin-top: 0; }

/* Filterpills op de favorietenpagina / Mijn account-tab (ontwerp sept 2026) */
.bf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.bf-pill {
    border: 1px solid #d9d3c6; background: transparent; color: #5c645e; border-radius: 999px;
    padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.2;
    transition: background .15s, color .15s;
}
.bf-pill span { color: #7a817b; margin-left: 2px; }
.bf-pill:hover { border-color: #2C392D; color: #1f2a24; }
.bf-pill.is-actief { background: #2C392D; border-color: #2C392D; color: #fff; }
.bf-pill.is-actief span { color: #BE9F56; }
.bf-item[hidden] { display: none !important; }

/* Favorietenraster: geen hover-vlak (kwam rommelig uit bij productkaarten met witte foto); knop met witte tekst */
.bf-raster .uk-card-hover:hover { background: transparent; box-shadow: none; }
.bf-prijsregel .uk-button-primary { color: #fff !important; }