/* Heat Beads Fuel Finder. Scoped to .hbff; colours/fonts follow the Elementor kit with fallbacks. */
.hbff{--hbff-bg:#252525;--hbff-card:#1b1b1b;--hbff-card2:#2e2e2e;--hbff-line:#3a3a3a;--hbff-muted:#cfcfcf;--hbff-accent:var(--e-global-color-primary,#FFEF00);--hbff-slab:var(--e-global-typography-primary-font-family,"Hepta Slab"),serif;--hbff-sans:var(--e-global-typography-text-font-family,Montserrat),sans-serif;background:var(--hbff-bg);color:#fff;font-family:var(--hbff-sans);padding:56px 0 96px}
.hbff *{box-sizing:border-box}
.hbff [hidden]{display:none!important}
.hbff-inner{max-width:1280px;margin:0 auto;padding:0 40px}
.hbff-c-orange{--c:#F26B21}.hbff-c-red{--c:#E8322B}.hbff-c-grey{--c:#6b6b6b}.hbff-c-yellow{--c:#F5C400}.hbff-c-green{--c:#2E8B3E}
.hbff .hbff-h1{margin:0 0 16px;max-width:900px;font:700 56px/1.08 var(--hbff-slab);color:#fff}
.hbff-intro{margin:0 0 48px;max-width:860px;font-size:19px;line-height:1.6;color:#e6e6e6}
.hbff-panel{padding:36px;border-radius:26px;background:var(--hbff-card)}
.hbff .hbff-h2{margin:0 0 6px;font:700 34px/1.15 var(--hbff-slab);color:#fff}
.hbff-sub{margin:0 0 26px;font-size:17px;color:var(--hbff-muted)}
.hbff-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hbff-tile{display:block;min-height:104px;padding:20px 22px;border:2px solid transparent;border-radius:18px;background:var(--hbff-card2);color:#fff;text-decoration:none;transition:border-color .2s,background-color .2s}
.hbff-tile:hover{border-color:#5a5a5a;color:#fff}
.hbff-tile:focus-visible{outline:3px solid var(--hbff-accent);outline-offset:3px}
.hbff .hbff-tile b{color:#fff;display:block;margin-bottom:6px;font:700 20px/1.2 var(--hbff-slab)}
.hbff .hbff-tile span{display:block;font-size:14.5px;line-height:1.45;color:var(--hbff-muted)}
.hbff-tile.is-on{border-color:var(--hbff-accent);background:#3a3612}
.hbff .hbff-tile.is-on b{color:var(--hbff-accent)}
.hbff-results{margin-top:56px;scroll-margin-top:120px}
.hbff-prompt{margin:0;padding:28px;border:2px dashed var(--hbff-line);border-radius:20px;text-align:center;font-size:17px;color:var(--hbff-muted)}
.hbff-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:22px}
.hbff-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:var(--hbff-card);color:#fff;text-decoration:none}
.hbff-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c)}
/* Competition card strip black + orange, like its bag (Ben 20/10/2026). */
.hbff-card.hbff-f-competition::before{background:linear-gradient(90deg,#141414 0 30%,var(--c) 30% 70%,#141414 70%)}
.hbff-card.is-best{box-shadow:inset 0 0 0 2px var(--hbff-accent)}
a.hbff-card:hover{color:#fff}
a.hbff-card:hover .hbff-pack img{transform:scale(1.04)}
a.hbff-card:focus-visible{outline:3px solid var(--hbff-accent);outline-offset:3px}
.hbff-pack{display:flex;align-items:center;justify-content:center;height:230px;background:radial-gradient(55% 55% at 50% 60%,color-mix(in srgb,var(--c) 45%,transparent),transparent 72%),#202020}
.hbff-pack img{width:auto;height:auto;max-width:70%;max-height:196px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));transition:transform .35s ease}
.hbff-swatch{display:block;width:110px;height:150px;border-radius:14px;background:linear-gradient(#141414 0 38%,var(--c) 38% 62%,#141414 62%)}
.hbff-card-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:20px 22px 22px}
.hbff-chip{align-self:flex-start;padding:5px 11px;border-radius:999px;font:700 12px/1.2 var(--hbff-sans);letter-spacing:.08em;text-transform:uppercase}
.hbff-chip.is-best{background:var(--hbff-accent);color:#111}
.hbff-chip.is-great{background:#3d3d3d;color:#fff}
.hbff-chip.is-can{border:1.5px solid var(--hbff-accent);color:var(--hbff-accent)}
.hbff-chip.is-not{border:1.5px solid #777;color:#aaa}
.hbff .hbff-card-title{margin:0;font:700 21px/1.2 var(--hbff-slab);color:#fff}
.hbff-card-copy{font-size:15px;line-height:1.55;color:var(--hbff-muted)}
.hbff-card.is-not .hbff-card-title,.hbff-card.is-not .hbff-card-copy{opacity:.75}
.hbff-go{margin-top:auto;padding-top:12px;border-top:1px solid var(--hbff-line);font:700 16px/1.3 var(--hbff-slab);color:var(--hbff-accent)}
div.hbff-card .hbff-go{font:600 14px/1.3 var(--hbff-sans);color:#999}
.hbff-tip{margin:20px 0 0;padding:16px 20px;border-left:4px solid var(--hbff-accent);border-radius:12px;background:#2b2a1a;font-size:16px;line-height:1.5;color:#eee}
.hbff-tip b{color:var(--hbff-accent)}
.hbff-empty{margin-top:22px;padding:24px 28px;border-radius:20px;background:#2b2a1a;font-size:17px;line-height:1.6}
.hbff-empty p{margin:0 0 10px}
.hbff-empty a{font:700 17px/1.3 var(--hbff-slab);color:var(--hbff-accent)}
.hbff-sec{margin-top:88px}
.hbff-table-wrap{margin-top:22px;padding:12px 8px;overflow-x:auto;border-radius:26px;background:var(--hbff-card)}
.hbff-table-wrap:focus-visible{outline:3px solid var(--hbff-accent);outline-offset:3px}
.hbff .hbff-table{margin:0;border:0;width:100%;min-width:980px;border-collapse:collapse;font-size:14.5px;color:#fff}
.hbff .hbff-table th,.hbff .hbff-table td,.hbff .hbff-table tbody tr:nth-child(odd)>td,.hbff .hbff-table tbody tr:nth-child(odd)>th,.hbff .hbff-table tbody tr:hover>td,.hbff .hbff-table tbody tr:hover>th{padding:13px 14px;border:0;border-bottom:1px solid var(--hbff-line);background:none;text-align:left;vertical-align:top;line-height:1.45}
.hbff .hbff-table thead,.hbff .hbff-table tbody,.hbff .hbff-table tr{border:0}
.hbff .hbff-table thead th,.hbff .hbff-table thead td{border-top:0!important}
.hbff .hbff-table thead th{padding-top:20px;border-bottom:0;font:700 18px/1.2 var(--hbff-slab)}
.hbff .hbff-table thead th::before{content:"";display:block;height:5px;margin-bottom:12px;border-radius:3px;background:var(--c)}
.hbff-th-pack{position:relative;display:flex;align-items:flex-end;justify-content:center;height:124px;margin-bottom:14px}
.hbff .hbff-th-pack .hbff-th-new{position:absolute;top:6px;left:calc(50% + 34px);margin:0;vertical-align:0}
.hbff-th-name{display:block}
.hbff-th-bag{display:block;margin-top:5px;font:600 13px/1.3 var(--hbff-sans);color:#aaa}
.hbff-th-pack img{display:block;width:124px;height:124px;max-width:none;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.hbff-th-pack .hbff-swatch{width:80px;height:110px}
.hbff .hbff-table thead td{border-bottom:0}
.hbff .hbff-table tbody th{width:150px;font:600 13px/1.4 var(--hbff-sans);color:#aaa}
.hbff .hbff-table tbody tr:last-child th,.hbff .hbff-table tbody tr:last-child td{border-bottom:0}
.hbff-heat{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px}
.hbff-bars{display:inline-flex;gap:3px}
.hbff-bars i{width:16px;height:7px;border-radius:2px;background:#E8322B}
.hbff-bars i.is-off{background:#4a4a4a}
.hbff-yes{font-weight:700;color:#7fd47f}
.hbff-no{font-weight:700;color:#ff7b72}
.hbff-note{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:#999}
.hbff-badge{display:inline-block;margin-left:6px;padding:3px 8px;border-radius:999px;background:#F26B21;font:700 10px/1.2 var(--hbff-sans);letter-spacing:.06em;text-transform:uppercase;color:#111;vertical-align:3px}
.hbff-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.hbff-dc{padding:26px;border-radius:26px;background:var(--hbff-card)}
.hbff-dh{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.hbff-sw{flex:0 0 44px;height:56px;border-radius:10px;background:var(--c)}
/* Competition's bag is black with an orange band (Ben 20/10/2026). */
.hbff-sw.hbff-f-competition{background:linear-gradient(#141414 0 34%,var(--c) 34% 66%,#141414 66%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hbff-dh-mark{display:flex;flex:0 0 44px;flex-direction:column;align-items:center;gap:8px}
.hbff-dh-mark .hbff-sw{flex:none;width:44px}
.hbff .hbff-dh-mark .hbff-dh-new{margin:0;vertical-align:0}
.hbff .hbff-dh-bag{margin:0 0 6px;font:600 13px/1.3 var(--hbff-sans);color:#cfcfcf}
.hbff .hbff-dc h3{margin:0 0 4px;font:700 20px/1.2 var(--hbff-slab);color:#fff}
.hbff-tagline{margin:0;font-size:13.5px;line-height:1.4;color:#aaa}
.hbff-desc{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--hbff-muted)}
.hbff-dl{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;margin:0;font-size:14px;line-height:1.45}
.hbff-dl dt{font-weight:600;color:#999}
.hbff-dl dd{margin:0}
.hbff-foot{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--hbff-line);font-size:13.5px;line-height:1.6;color:#999}
.hbff-quick{scroll-margin-top:120px}
.hbff-qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hbff-q{padding:20px 22px;border-radius:20px;background:var(--hbff-card)}
.hbff .hbff-q h3{margin:0 0 8px;color:#fff;font:700 20px/1.3 var(--hbff-slab);letter-spacing:normal;text-transform:none}
.hbff .hbff-q p{margin:0;color:#e6e6e6;font-size:15px;line-height:1.6}
.hbff .hbff-q-lead{color:#fff;font-weight:700;text-decoration:none}
.hbff a.hbff-q-lead,.hbff .hbff-q a.hbff-q-link{color:var(--hbff-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hbff a.hbff-q-lead:hover{color:var(--hbff-accent);text-decoration:underline}
.hbff .hbff-q .hbff-q-also{margin-top:8px;color:var(--hbff-muted);font-size:13px}
.hbff .hbff-q-link{color:var(--hbff-accent);font-weight:700}
.hbff .hbff-q-also .hbff-q-link{font-weight:600}
.hbff a.hbff-q-link:hover{color:var(--hbff-accent);text-decoration:underline}
@media (max-width:1024px){
 .hbff-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hbff-details{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
 .hbff{padding:32px 0 64px}
 .hbff-inner{padding:0 16px}
 .hbff .hbff-h1{font-size:36px}
 .hbff-intro{margin-bottom:32px;font-size:16px}
 .hbff-panel{padding:22px 16px}
 .hbff .hbff-h2{font-size:26px}
 .hbff-tiles{grid-template-columns:1fr 1fr;gap:10px}
 .hbff-tile{min-height:0;padding:14px}
 .hbff .hbff-tile b{font-size:17px}
 .hbff .hbff-tile span{font-size:13px}
 .hbff-cards{grid-template-columns:1fr;gap:14px}
 .hbff-card{flex-direction:row}
 .hbff-pack{flex:0 0 112px;height:auto}
 .hbff-pack img{max-width:84%;max-height:120px}
 .hbff-swatch{width:70px;height:96px}
 .hbff-card-body{padding:16px}
 .hbff .hbff-card-title{font-size:18px}
 .hbff-details{grid-template-columns:1fr}
 .hbff-qgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .hbff *{transition:none!important}
}

.hbff-status{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 1.3.19 (Ben 23/10/2026): results cards show the bag colour like the compare table - own line, small grey text under the name. */
.hbff .hbff-card-bag{display:block;margin-top:-5px;font:600 13px/1.3 var(--hbff-sans);color:#aaa}