.sff{--sff-ink:#fff;--sff-panel:rgba(255,255,255,.06);--sff-line:rgba(255,255,255,.16);--sff-text:inherit;margin:24px 0;color:var(--sff-text)}
html.saltfah-light-mode .sff{--sff-panel:#fff;--sff-line:#d9dde5}
.sff *{box-sizing:border-box}
.sff-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:16px;border:1px solid var(--sff-line);border-radius:16px;background:var(--sff-panel)}
.sff-field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;font-size:13px;font-weight:600}
.sff-field select{min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid var(--sff-line);background:#15151c;color:#fff;font:inherit}
html.saltfah-light-mode .sff-field select{background:#fff;color:#111827}
.sff-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px}
.sff-form button,.sff-more{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:#c99a45;color:#111;font:inherit;font-weight:700;cursor:pointer}
.sff-reset{align-self:center;font-size:13px;text-decoration:underline}
.sff-count{margin:14px 0 10px;font-size:14px;opacity:.85}
.sff-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sff-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.sff-row .sff-card{flex:0 0 168px;scroll-snap-align:start}
.sff-similar h2{margin:0 0 12px;font-size:20px}
.sff-card{min-width:0;border-radius:16px;overflow:hidden;color:#fff;background:linear-gradient(180deg,rgba(25,24,26,.96),rgba(11,13,18,.98));border:1px solid rgba(255,255,255,.10)}
.sff-card a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.sff-card.is-out{opacity:.62}
.sff-img{display:block;aspect-ratio:1/1;overflow:hidden}
.sff-img img{width:100%;height:100%;object-fit:contain;display:block}
.sff-body{display:flex;flex:1;flex-direction:column;padding:12px}
.sff-body h3{margin:0 0 4px;color:#fff;font-size:15px;font-weight:800;line-height:1.35;min-height:2.7em}
/* the card is dark in both modes; the theme's light-mode heading colour made the flavor name invisible */
.sff .sff-card .sff-body h3{color:#fff!important}
.sff-prod,.sff-note{display:block;font-size:12px;color:rgba(255,255,255,.7);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sff-note{color:#ffd166;margin-top:2px}
.sff-out{margin-top:4px;font-size:11px;color:#ff8a8a}
.sff-rate{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:7px 0 0;font-size:12px;font-weight:600;color:rgba(255,255,255,.72)}
.sff-rate+.sff-rate{margin-top:0;border-top:0}
.sff-rate b{display:flex;gap:3px;font-weight:400;font-size:13px;line-height:1}
.sff-rate b span{display:block;width:1em;text-align:center}
.sff-sweet b{color:#ffd166}.sff-cool b{color:#55c7ff}
.sff-body .sff-rate:first-of-type{margin-top:auto}
.sff-empty{padding:24px;text-align:center}
.sff-more{display:block;margin:18px auto 0}
.sff-similar{margin:28px 0}
@media(max-width:1100px){.sff-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.sff-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sff-body{padding:9px}.sff-body h3{font-size:13px}}
.sff-more[hidden]{display:none}
.sff-groups{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 4px}
.sff-groups span{font-weight:700;margin-right:4px}
.sff-groups a{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,209,102,.5);color:inherit;text-decoration:none;font-size:14px}
.sff-groups a[aria-current]{background:#ffd166;color:#201814;border-color:#ffd166}
.sff-group h2{font-size:22px;margin:26px 0 10px}
.sff-facts{margin:0 0 12px 1.2em;line-height:1.7}
.sff-prodlinks{line-height:1.8;font-size:15px}
.sff-prodlinks a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sff-group .sff-grid+h2{margin-top:36px}