/* Article-format blocks (bf/article-format): Review · Top X · Compare · How-to · Ingredient */
.bf-jf-block{ margin:2.25rem 0; }
.bf-jf__eyebrow{ margin:0 0 .35rem; color:var(--bf-forest); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.bf-jf--ph{ padding:1rem 1.1rem; border:1px dashed var(--bf-hairline); border-radius:var(--bf-radius); color:var(--bf-stone-deep); font-size:.9rem; }
.bf-jf-yes{ color:var(--bf-forest); font-weight:700; }

/* Stars (fractional clipped overlay) */
.bf-jf-stars{ position:relative; display:inline-block; font-size:1.15rem; line-height:1; letter-spacing:2px; white-space:nowrap; }
.bf-jf-stars__bg{ color:#d9e0d4; }
.bf-jf-stars__fill{ position:absolute; left:0; top:0; overflow:hidden; color:#F6A609; }

/* ===== Review ===== */
/* Flex column with one gap = uniform spacing between every review section */
.bf-jf--review{ display:flex; flex-direction:column; gap:1.25rem; background:linear-gradient(160deg, var(--bf-white), var(--bf-paper)); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); box-shadow:var(--bf-shadow-panel); padding:clamp(1.4rem,3vw,2.25rem); }
.bf-jf-review__head{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; justify-content:space-between; margin:0; }
.bf-jf-review__title{ margin:0; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.12; color:var(--bf-graphite); }
.bf-jf-review__score{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.bf-jf-review__num{ font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.6rem; color:var(--bf-graphite); line-height:1; }
.bf-jf-review__num span{ font-size:.85rem; color:var(--bf-stone-deep); }
.bf-jf-review__verdict{ margin:0; font-size:1.05rem; line-height:1.6; color:var(--bf-graphite); }
.bf-jf-review__facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; }
.bf-jf-review__facts li{ display:flex; flex-direction:column; gap:.25rem; padding:.7rem .9rem; background:var(--bf-white); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); }
.bf-jf-review__facts strong{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bf-stone-deep); }
.bf-jf-review__facts span{ font-weight:600; color:var(--bf-graphite); line-height:1.4; }
.bf-jf-review__shop{ margin:0; }

/* Pros / cons */
.bf-jf-pc{ display:grid; grid-template-columns:1fr; gap:.9rem; margin:0; }
@media(min-width:600px){ .bf-jf-pc{ grid-template-columns:1fr 1fr; } }
.bf-jf-pc__col{ padding:1rem 1.1rem; border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); background:var(--bf-white); }
.bf-jf-pc__col h3{ margin:0 0 .55rem; font-size:.95rem; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); }
.bf-jf-pc__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.bf-jf-pc__col li{ position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.45; color:var(--bf-graphite); }
.bf-jf-pc__col li::before{ position:absolute; left:0; top:0; font-weight:700; }
.bf-jf-pc__col--pro li::before{ content:"✓"; color:var(--bf-forest); }
.bf-jf-pc__col--con li::before{ content:"✕"; color:#B42318; }

/* Breakdown bars */
.bf-jf-review__breakdown{ display:grid; gap:.6rem; margin:0; }
.bf-jf-bar{ display:grid; grid-template-columns:minmax(78px,140px) 1fr auto; align-items:center; gap:.7rem; }
.bf-jf-bar__label{ font-size:.88rem; color:var(--bf-stone-deep); }
.bf-jf-bar__track{ height:8px; border-radius:99px; background:var(--bf-mint); overflow:hidden; }
.bf-jf-bar__fill{ display:block; height:100%; border-radius:99px; background:var(--bf-forest); }
.bf-jf-bar__num{ font-weight:700; font-size:.85rem; color:var(--bf-graphite); }

/* Product chip (review/how-to) */
.bf-jf-prod{ display:flex; align-items:center; gap:.85rem; padding:.6rem; border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); background:var(--bf-white); text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.bf-jf-prod:hover{ border-color:var(--bf-forest); box-shadow:0 8px 20px -14px rgba(20,58,36,.4); }
.bf-jf-prod__media{ flex:0 0 auto; width:54px; aspect-ratio:3/4; border-radius:calc(var(--bf-radius) - 2px); overflow:hidden; background:var(--bf-paper); }
.bf-jf-prod__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bf-jf-prod__info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bf-jf-prod__name{ font-weight:600; color:var(--bf-graphite); }
.bf-jf-prod__price{ color:var(--bf-forest); font-weight:700; font-size:.92rem; }

/* ===== Top X ===== */
.bf-jf--topx{ display:grid; gap:1rem; }
.bf-jf-pick{ display:flex; gap:1rem; align-items:flex-start; padding:clamp(1.1rem,2.5vw,1.5rem); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); background:var(--bf-white); box-shadow:0 10px 30px -24px rgba(20,58,36,.4); }
.bf-jf-pick__rank{ flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--bf-forest); color:#fff; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.35rem; line-height:1; }
.bf-jf-pick__media{ flex:0 0 auto; width:84px; aspect-ratio:3/4; border-radius:var(--bf-radius); overflow:hidden; background:var(--bf-paper); border:1px solid var(--bf-hairline); }
.bf-jf-pick__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bf-jf-pick__body{ flex:1 1 auto; min-width:0; }
.bf-jf-pick__award{ display:inline-block; margin:0 0 .4rem; padding:.2rem .65rem; border-radius:var(--bf-radius); background:var(--bf-mint); color:var(--bf-green-ink); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.bf-jf-pick__name{ margin:0 0 .35rem; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.25rem; line-height:1.15; }
.bf-jf-pick__name a{ color:var(--bf-graphite); text-decoration:none; }
.bf-jf-pick__name a:hover{ color:var(--bf-forest); }
.bf-jf-pick__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin:0 0 .5rem; }
.bf-jf-pick__price{ font-weight:700; color:var(--bf-forest); }
.bf-jf-pick__why{ margin:0 0 .75rem; color:var(--bf-stone-deep); line-height:1.55; }
/* Solid brand-green CTA, no hover change (flat, by request) */
.bf-jf-pick__btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--bf-font-body); font-weight:700; font-size:var(--bf-fs-ui); line-height:1.2; padding:var(--bf-btn-pad-y) var(--bf-btn-pad-x); border:1.5px solid transparent; border-radius:var(--bf-radius); text-decoration:none; background:var(--bf-green); color:var(--bf-white); }
@media(max-width:480px){ .bf-jf-pick__media{ display:none; } }

/* ===== Comparison ===== */
.bf-jf-compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bf-jf-compare__table{ width:100%; min-width:480px; border-collapse:collapse; border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); overflow:hidden; }
.bf-jf-compare__table th, .bf-jf-compare__table td{ padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--bf-hairline); vertical-align:top; }
.bf-jf-compare__table thead th{ background:var(--bf-mint); color:var(--bf-green-ink); font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.05rem; }
.bf-jf-compare__table thead th:first-child{ background:transparent; }
.bf-jf-compare__table tbody th{ font-weight:700; color:var(--bf-graphite); background:var(--bf-paper); width:32%; }
.bf-jf-compare__table td.is-win{ background:rgba(47,170,90,.08); font-weight:600; }
.bf-jf-compare__table td.is-win::after{ content:"✓"; color:var(--bf-forest); font-weight:700; margin-left:.4rem; }
.bf-jf-compare__table tr:last-child th, .bf-jf-compare__table tr:last-child td{ border-bottom:0; }
.bf-jf-compare__verdict{ margin-top:1.1rem; padding:1rem 1.2rem; border-left:3px solid var(--bf-forest); background:var(--bf-paper); border-radius:0 var(--bf-radius) var(--bf-radius) 0; }
.bf-jf-compare__verdict strong{ display:block; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); margin-bottom:.25rem; color:var(--bf-graphite); }
.bf-jf-compare__verdict p{ margin:0; color:var(--bf-stone-deep); line-height:1.55; }

/* ===== How-to / Routine ===== */
.bf-jf-howto__meta{ display:grid; gap:1rem 1.75rem; margin:0 0 1.5rem; padding:1.1rem 1.25rem; background:var(--bf-green-tint); border:1px solid var(--bf-green-line); border-radius:var(--bf-radius); }
@media(min-width:600px){ .bf-jf-howto__meta:has(.bf-jf-howto__supplies){ grid-template-columns:max-content 1fr; align-items:start; } }
.bf-jf-howto__time{ margin:0; }
.bf-jf-howto__time strong, .bf-jf-howto__supplies strong{ display:block; margin-bottom:.35rem; color:var(--bf-green-deep); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; }
.bf-jf-howto__supplies ul{ margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.bf-jf-howto__supplies li{ position:relative; padding-left:1.4rem; line-height:1.5; color:var(--bf-graphite); }
.bf-jf-howto__supplies li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--bf-forest); font-weight:700; }
.bf-jf-howto__steps{ list-style:none; counter-reset:bf-ht; margin:0; padding:0; display:grid; gap:1rem; }
.bf-jf-step{ position:relative; display:grid; grid-template-columns:1fr; gap:1rem; padding:1.2rem 1.3rem 1.2rem 3.7rem; border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); background:var(--bf-white); }
.bf-jf-step::before{ counter-increment:bf-ht; content:counter(bf-ht); position:absolute; left:1.1rem; top:1.2rem; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--bf-forest); color:#fff; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.05rem; line-height:1; }
.bf-jf-step__title{ margin:.1rem 0 .35rem; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:1.15rem; color:var(--bf-graphite); }
.bf-jf-step__body p{ margin:0 0 .6rem; color:var(--bf-stone-deep); line-height:1.6; }
.bf-jf-step__tip{ font-style:italic; color:var(--bf-forest) !important; }
.bf-jf-step__media{ border-radius:var(--bf-radius); overflow:hidden; align-self:start; }
.bf-jf-step__media img{ width:100%; height:auto; display:block; }
.bf-jf-step__prod{ margin-top:.5rem; max-width:340px; }
@media(min-width:700px){ .bf-jf-step:has(.bf-jf-step__media){ grid-template-columns:1fr 210px; } }

/* ===== Ingredient ===== */
.bf-jf--ingredient{ background:linear-gradient(160deg, var(--bf-white), var(--bf-paper)); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); padding:clamp(1.4rem,3vw,2.25rem); box-shadow:var(--bf-shadow-panel); }
.bf-jf-ing__title{ margin:0; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); font-size:clamp(1.4rem,3vw,2rem); line-height:1.1; color:var(--bf-graphite); }
.bf-jf-ing__aka{ margin:.35rem 0 0; color:var(--bf-stone-deep); font-size:.92rem; }
.bf-jf-ing__what{ margin:1rem 0; font-size:1.05rem; line-height:1.6; color:var(--bf-graphite); }
.bf-jf-ing__benefits h3{ margin:0 0 .5rem; font-size:.95rem; font-family:var(--bf-font-head); font-weight:var(--bf-fw-head); }
.bf-jf-checks{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.4rem; }
.bf-jf-checks li{ position:relative; padding-left:1.6rem; line-height:1.5; color:var(--bf-graphite); }
.bf-jf-checks li::before{ content:"✓"; position:absolute; left:0; color:var(--bf-forest); font-weight:700; }
.bf-jf-ing__facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:.5rem; }
@media(min-width:600px){ .bf-jf-ing__facts{ grid-template-columns:1fr 1fr; } }
.bf-jf-ing__facts li{ padding:.7rem .9rem; background:var(--bf-white); border:1px solid var(--bf-hairline); border-radius:var(--bf-radius); }
.bf-jf-ing__facts strong{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bf-stone-deep); margin-bottom:2px; }
.bf-jf-ing__facts span{ color:var(--bf-graphite); }
.bf-jf-ing__avoid strong{ color:#B42318; }