:root{ --bd:#3E7B27; }
.fruite-item[data-p3]{ position:relative; overflow:hidden; }
.card-amz{ position:absolute; inset:0; z-index:3; }
.card-details{ position:absolute; top:10px; right:10px; z-index:4; background:#fff; color:#333 !important;
  border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:3px 11px; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none !important; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.card-details:hover{ background:var(--bd); color:#fff !important; }
.card-cta{ position:relative; z-index:4; }
.fruite-item[data-p3] h5{ font-size:.98rem; line-height:1.35; }
/* the template's inline style stretches every card body to 100% of the card — the image height again */
.fruite-item[data-p3] .p-4{ height:auto !important; flex:1 1 auto; }
/* category banners kept white text for a dark background the skin replaces with a light one */
.category-hero h1, .category-hero .display-4{ color:#221c18 !important; }
.category-hero p, .category-hero .lead{ color:#5b524b !important; }
.category-hero .lead{ margin-left:auto !important; margin-right:auto !important; max-width:44rem; }
.fruite-item[data-p3] .trust-points{ margin:.2rem 0 .9rem; }
.bd-avail{ margin:0 0 1.2rem; padding:.75rem 1rem; border-left:4px solid var(--bd); background:#f3f8ef; border-radius:8px;
  font-size:.92rem; color:#444; }
details.faq{ border:1px solid #e6e1d8; border-radius:10px; padding:.7rem 1rem; margin:.6rem 0; background:#fff; }
details.faq summary{ font-weight:700; cursor:pointer; }
.widget-out dl{ display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; }

/* ---- inline-SVG figures ------------------------------------------------ */
.chart-figure{ margin:1.6rem 0 2rem; padding:1.1rem 1.2rem 1rem;
  border:1px solid var(--z-line); border-radius:14px; background:#fff; }
.chart-title{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  font-size:.95rem; color:var(--z-ink); margin:0 0 .8rem; }
.chart-svg{ display:block; max-width:100%; height:auto; overflow:visible; }
.chart-note{ font-size:.8rem; color:var(--z-ink-2); margin:.8rem 0 0; }
@media (max-width:575.98px){ .chart-figure{ padding:.9rem .7rem; } }


/* ---------- trust points on product cards ------------------------------
   Replaces the "4.6 stars from N ratings" line. Three earned claims, no
   numbers. See trust_points.py for how a card qualifies for each one.     */
.trust-points{
  display:inline-block; text-align:left;
  list-style:none; margin:.15rem 0 1.15rem; padding:0;
}
.trust-points li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.875rem; font-weight:600; line-height:1.4;
  color:var(--ink-2);
}
.trust-points li + li{ margin-top:.44rem; }
.trust-points li::before{
  /* deliberately NOT --accent: the check must not read as another CTA */
  content:"\2713";
  flex:0 0 14px; margin-top:.01rem;
  color:#16A34A;
  font-size:.95rem; font-weight:700; line-height:1.3;
}
@media (max-width:575.98px){
  .trust-points li{ font-size:.83rem; }
}


/* ---- interactive widgets ----------------------------------------------- */
.widget{ border:1px solid var(--z-line, var(--line, #E4E8E4)); border-radius:16px; background:#fff;
  padding:1.15rem 1.25rem 1.3rem; margin:1.8rem 0 2.2rem; }
.widget > h3{ font-size:1.05rem; margin:0 0 .25rem; }
.widget .widget-sub{ font-size:.85rem; color:var(--z-ink-2, var(--ink-2, #5A635C)); margin:0 0 1rem; }
.widget label{ font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--z-ink-2, var(--ink-2, #5A635C)); display:block; margin-bottom:.3rem; }
.widget select,.widget input[type=search]{
  width:100%; max-width:100%; padding:.55rem .75rem; font-size:.95rem;
  border:1px solid var(--z-line, var(--line, #E4E8E4)); border-radius:10px; background:var(--z-paper-2, var(--paper-2, #fff));
  color:var(--z-ink, var(--ink, #1F2421)); }
.widget select:focus,.widget input:focus{ outline:2px solid var(--z-accent,#23794A);
  outline-offset:1px; }
.widget-controls{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:1rem; }
.widget-controls > div{ flex:1 1 190px; }
.widget-out{ border-top:1px solid var(--z-line, var(--line, #E4E8E4)); padding-top:1rem; }
.widget-out dl{ display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem;
  margin:0 0 .9rem; font-size:.92rem; }
.widget-out dt{ color:var(--z-ink-2, var(--ink-2, #5A635C)); }
.widget-out dd{ margin:0; font-weight:600; }
.verdict{ display:inline-block; font-size:.78rem; font-weight:700; padding:.3rem .7rem;
  border-radius:999px; margin-bottom:.7rem; }
.verdict.yes{ background:#E7F6EC; color:#137A3C; }
.verdict.no{ background:#FDECEC; color:#A32020; }
.verdict.warn{ background:#FFF4DC; color:#8A5A00; }
table.sortable th{ cursor:pointer; user-select:none; white-space:nowrap; }
table.sortable th[aria-sort="ascending"]::after{ content:" \2191"; }
table.sortable th[aria-sort="descending"]::after{ content:" \2193"; }
table.sortable th:hover{ color:var(--z-ink, var(--ink, #1F2421)); }
.widget .row-count{ font-size:.82rem; color:var(--z-ink-2, var(--ink-2, #5A635C)); margin:.7rem 0 0; }