/* Absolute Baits v16: flavour discovery. Shared typography, spacing and motion only. */
.fl-main { padding-top: var(--header-height); }
.fl-main :is(section, article)[id] { scroll-margin-top: var(--space-5); }
.fl-icon { flex: 0 0 auto; width: 24px; height: 24px; }
.fl-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.fl-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 78% 54%, rgb(var(--accent-rgb) / 8%), transparent 54%); }
.fl-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 35%), transparent); }
.fl-hero-inner { padding-top: var(--space-5); padding-bottom: var(--section-space); }
.fl-breadcrumb { color: var(--muted); font-size: var(--text-small); }
.fl-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.fl-breadcrumb li + li { display: flex; gap: var(--space-3); }
.fl-breadcrumb li + li::before { content: '/'; opacity: .5; }
.fl-breadcrumb a { text-decoration: none; text-underline-offset: 4px; }
.fl-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.fl-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; margin-top: var(--space-7); }
.fl-hero-copy { min-width: 0; }
.fl-hero-copy > .eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--accent); }
.fl-hero-copy h1 { text-wrap: balance; }
.fl-hero-copy > .lead { margin-top: var(--space-5); color: #d4e1e2; max-width: 45ch; }
.fl-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.fl-text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--white); text-decoration: none; font: 800 var(--text-button) / 1.4 var(--font-body); }
.fl-text-link:hover { color: var(--accent); }
.fl-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid rgb(var(--accent-rgb) / 18%); gap: var(--space-5); }
.fl-hero-facts > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fl-hero-facts dt { order: 2; color: var(--muted); font-size: var(--text-small); }
.fl-hero-facts dd { margin: 0; color: var(--accent); font: 800 var(--text-price) / 1.2 var(--font-body); }
.fl-hero-art { min-width: 0; }
.fl-hero-flavours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.fl-hero-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); color: var(--white); text-decoration: none; background: radial-gradient(ellipse at center, rgb(var(--accent-rgb) / 4%), transparent 70%); transition: background .2s, transform .2s; }
.fl-hero-item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.fl-hero-item span { padding: var(--space-1) var(--space-3); border: 1px solid rgb(var(--accent-rgb) / 20%); border-radius: 999px; color: #dce9ea; font-size: var(--text-small); font-weight: 800; text-align: center; }
.fl-hero-item:hover { transform: translateY(-3px); background: rgb(var(--accent-rgb) / 6%); }
.fl-hero-item:hover span { border-color: var(--accent); color: var(--accent); }
.fl-hero-caption { margin-top: var(--space-5); color: var(--muted); text-align: center; font-size: var(--text-small); }

/* A single light, full-width content surface for the two flavour ranges. */
.fl-families, .fl-popups { background: var(--surface); color: var(--text-on-light); }
.fl-families :focus-visible, .fl-popups :focus-visible { outline-color: var(--accent-on-light); }
.fl-section-heading { min-width: 0; }
.fl-section-heading > .eyebrow { margin-bottom: var(--space-5); color: var(--accent-on-light); }
.fl-section-heading h2 em { color: var(--heading-accent-on-light); }
.fl-section-heading .lead { max-width: 62ch; margin-top: var(--space-5); color: var(--text-muted-on-light); }
.fl-families > .container > .fl-section-heading { margin-bottom: var(--space-7); }
.fl-controls { margin-bottom: var(--space-5); }
.fl-filter-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5); }
.fl-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fl-filter { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-4); border: 1px solid #d5dedf; border-radius: 999px; color: #3a5456; background: #fff; font: 700 var(--text-button)/1.3 var(--font-body); transition: background .2s, border-color .2s; }
.fl-filter .fl-icon { width: 18px; height: 18px; }
.fl-filter:hover { border-color: var(--accent-on-light); }
.fl-filter[aria-pressed="true"] { border-color: var(--accent-on-light); background: var(--accent-on-light); color: var(--white); }
.fl-search { display: flex; align-items: center; gap: var(--space-3); width: min(100%, 288px); min-height: var(--button-height); padding-left: var(--space-4); border: 1px solid #d5dedf; border-radius: var(--radius-control); color: #546c6e; background: #fff; }
.fl-search:focus-within { border-color: var(--accent-on-light); outline: 2px solid rgb(var(--accent-on-light-rgb) / 18%); outline-offset: 2px; }
.fl-search > .fl-icon { width: 20px; height: 20px; }
.fl-search input { width: 100%; min-width: 0; padding: var(--space-3) 0; background: transparent; border: 0; outline: 0; color: var(--text-on-light); font-size: var(--text-small); }
.fl-search input::-webkit-search-cancel-button { display: none; }
.fl-search-clear { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 44px; padding: 0; color: var(--text-muted-on-light); border: 0; border-radius: var(--radius-control); background: transparent; }
.fl-search-clear .fl-icon { width: 18px; height: 18px; }
.fl-results-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 44px; margin-top: var(--space-3); color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-reset { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent-on-light); font: 700 var(--text-small)/1.4 var(--font-body); }
.fl-reset .fl-icon { width: 18px; height: 18px; }
.fl-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--grid-gap); }
.fl-family-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.fl-family-image { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 1.9; margin: var(--space-3) var(--space-3) 0; padding: var(--space-5) var(--space-5) var(--space-4); border-radius: calc(var(--radius-card) - var(--space-1)); background: radial-gradient(ellipse at 50% 64%, rgb(var(--fl-tone, 211 222 223) / 34%), #f4f7f7 70%); }
.fl-family-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .24s ease; }
.fl-family-image:hover img { transform: scale(1.025); }
.fl-card-index { position: absolute; top: var(--space-3); left: var(--space-3); color: #627779; font: 800 var(--text-eyebrow)/1.5 var(--font-body); letter-spacing: .1em; }
.fl-image-note { position: absolute; top: var(--space-3); right: var(--space-3); color: #526466; font-size: var(--text-eyebrow); }
.fl-tone--cream { --fl-tone: 231 219 186; }
.fl-tone--berry { --fl-tone: 227 195 182; }
.fl-tone--krill { --fl-tone: 230 198 172; }
.fl-tone--cyan { --fl-tone: 174 210 213; }
.fl-tone--spice { --fl-tone: 222 187 162; }
.fl-tone--apricot { --fl-tone: 239 207 155; }
.fl-family-copy { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--card-padding); }
.fl-profile { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--accent-on-light); font: 700 var(--text-small)/1.4 var(--font-body); }
.fl-profile .fl-icon { width: 20px; height: 20px; }
.fl-family-copy .card-title { line-height: 1.2; }
.fl-family-copy .card-title a, .fl-popup-card .card-title a { text-decoration: none; }
.fl-family-copy .card-title a:hover, .fl-popup-card .card-title a:hover { color: var(--accent-on-light); }
.fl-flavour-name { margin-top: var(--space-2); color: var(--accent-on-light); font-size: var(--text-body); font-weight: 700; }
.fl-summary { margin-top: var(--space-4); color: var(--text-muted-on-light); }
.fl-ingredients { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; padding: 0; list-style: none; color: #455f61; font-size: var(--text-small); }
.fl-ingredients li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: #f0f5f5; }
.fl-family-products { width: 100%; margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--border-light); }
.fl-family-products > p { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-family-products > p .fl-icon { width: 18px; height: 18px; }
.fl-product-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fl-product-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid #dce5e6; border-radius: var(--radius-control); color: var(--text-on-light); background: #fbfdfd; text-decoration: none; transition: background .2s, border-color .2s; }
.fl-product-link strong { display: block; font: 800 var(--text-button)/1.35 var(--font-body); }
.fl-product-link small { display: block; margin-top: var(--space-1); color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-product-link > .fl-icon { width: 16px; height: 16px; color: var(--accent-on-light); }
.fl-product-link:hover { background: #edf7f8; border-color: var(--accent-on-light); }
.fl-source-note { margin-top: var(--space-5); max-width: 98ch; color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-empty { padding: var(--space-7) var(--card-padding); border: 1px solid var(--border-light); border-radius: var(--radius-card); background: #fff; text-align: center; }
.fl-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--accent-on-light); background: #edf4f5; margin: 0 auto var(--space-5); }
.fl-empty p { margin-top: var(--space-4); color: var(--text-muted-on-light); }
.fl-empty .button { margin-top: var(--space-5); }

.fl-popups { border-top: 1px solid var(--border-light); }
.fl-popup-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-7); }
.fl-popup-heading > .fl-section-heading { flex: 1 1 520px; }
.fl-popup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.fl-popup-card { display: flex; flex-direction: column; min-width: 0; padding: var(--card-padding); border: 1px solid var(--border-light); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.fl-popup-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.fl-popup-symbol { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #dce4e5; border-radius: var(--radius-card); color: var(--accent-on-light); background: #f2f7f7; }
.fl-popup-symbol > .fl-icon { width: 32px; height: 32px; }
.fl-pop-colour--pink { background: #ffedf5; color: #91465f; border-color: #f1d2e0; }
.fl-pop-colour--white { background: #fafbfb; color: #4e6466; }
.fl-pop-colour--yellow { background: #fbf4d5; color: #7e650b; border-color: #eae0af; }
.fl-pop-colour--orange { background: #fff0df; color: #955016; border-color: #f0d5b5; }
.fl-colour-label { color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-popup-summary { margin-top: var(--space-4); color: var(--text-muted-on-light); }
.fl-popup-specs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); color: var(--text-muted-on-light); font-size: var(--text-small); }
.fl-popup-specs span { color: #a3b3b4; }
.fl-popup-bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); }
.fl-popup-bottom > span { display: flex; flex-direction: column; gap: var(--space-1); }
.fl-popup-bottom small { color: var(--text-muted-on-light); font-size: var(--text-eyebrow); }
.fl-popup-bottom strong { font: 800 var(--text-price)/1.3 var(--font-body); }
.fl-detail-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--accent-on-light); font: 800 var(--text-button)/1.4 var(--font-body); text-decoration: none; }
.fl-detail-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.fl-help { background: var(--ink); color: var(--white); }
.fl-help-layout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-7); }
.fl-help-layout > div:first-child { min-width: 0; flex: 1 1 520px; }
.fl-help-layout .eyebrow { margin-bottom: var(--space-5); color: var(--accent); }
.fl-help-layout .lead { margin-top: var(--space-5); color: var(--muted); max-width: 55ch; }
.fl-help-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

@media (max-width: 1199px) {
 .fl-hero-layout { gap: var(--space-6); }
 .fl-hero-actions { gap: var(--space-4); }
 .fl-hero-flavours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .fl-hero-item { gap: var(--space-2); padding: var(--space-2); }
 .fl-family-grid, .fl-popup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
 .fl-hero-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
 .fl-hero-copy > .lead { max-width: 58ch; }
 .fl-hero-flavours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .fl-hero-item img { max-height: 140px; }
 .fl-hero-facts { margin-top: var(--space-6); }
 .fl-filter-row { align-items: flex-start; flex-direction: column; }
 .fl-search { width: 100%; }
 .fl-filters { width: 100%; }
}
@media (max-width: 767px) {
 .fl-hero-layout { margin-top: var(--space-6); }
 .fl-hero-copy > .eyebrow { margin-bottom: var(--space-4); }
 .fl-hero-facts { gap: var(--space-3); }
 .fl-hero-facts dt { font-size: var(--text-eyebrow); }
 .fl-hero-item { padding: 0; }
 .fl-hero-item span { border: 0; padding: var(--space-1) 0; font-size: var(--text-eyebrow); }
 .fl-hero-caption { font-size: var(--text-eyebrow); }
 .fl-families > .container > .fl-section-heading, .fl-popup-heading { margin-bottom: var(--space-6); }
 .fl-filters { flex-wrap: nowrap; overflow-x: auto; padding: var(--space-1) var(--space-1) var(--space-3); scrollbar-width: thin; scrollbar-color: #a8bdbf transparent; }
 .fl-filter { flex: 0 0 auto; }
 .fl-family-products { padding-top: var(--space-4); }
}
@media (max-width: 639px) {
 .fl-family-grid, .fl-popup-grid { grid-template-columns: minmax(0, 1fr); }
 .fl-family-image { aspect-ratio: 1.8; }
 .fl-popup-heading { align-items: flex-start; }
 .fl-popup-heading > .fl-section-heading { flex-basis: 100%; }
 .fl-help-actions { width: 100%; }
}
@media (max-width: 399px) {
 .fl-product-links { grid-template-columns: minmax(0, 1fr); }
 .fl-product-link > span { display: flex; align-items: center; gap: var(--space-2); }
 .fl-product-link small { margin: 0; }
 .fl-hero-actions > .button { width: 100%; }
 .fl-family-image { padding-inline: var(--space-3); }
}