/* Preview · finder2026 · "Encuentra tu perfume" rebuilt around a shelf of perfumes.
 * Built only from the site's own language: Newsreader display over Plus Jakarta Sans,
 * ivory paper, brown/rust, hairline frames, square controls, rust small-caps steps,
 * the perfume page's accord colours (--pv-acc) and the catalogue fragrance tile
 * (perfume-carousels.css). Loaded only with ?pv_preview=finder2026.
 */

body.pv-site.pv-finder-page { background: #fdfbf7 !important; }
html:has(body.pv-finder-page) { scroll-padding-top: var(--f26-top, 96px); }

.f26 {
  --f26-paper: #fdfbf7;
  --f26-surface: #fffdfa;
  --f26-white: #fffefc;
  --f26-panel: #f8f2ea;
  --f26-panel-deep: #f2e9dd;
  --f26-ink: #2c2420;
  --f26-ink-warm: #4b3528;
  --f26-muted: #6f6256;
  --f26-faint: #786a5d;
  --f26-rust: #935b37;
  --f26-action: #7d573f;
  --f26-action-hover: #62422e;
  --f26-line: #e8e0d5;
  --f26-line-strong: #d6c9b9;
  --f26-line-soft: #f1ebe2;
  --f26-focus: #7d573f;
  --f26-error: #983e35;
  --f26-error-tint: #fbefea;
  --f26-success: #3f6952;
  --f26-display: var(--pv-type-display, "Newsreader", Georgia, serif);
  --f26-ui: var(--pv-type-ui, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --f26-ease: cubic-bezier(.16, 1, .3, 1);
  --f26-quick: 160ms;
  --f26-r-tile: 10px;
  color: var(--f26-ink);
  font-family: var(--f26-ui);
  font-size: 15px;
  line-height: 1.5;
}
body.pv-site main.f26 {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pv-shell-measure, 1352px);
  margin-inline: auto;
  padding: 0 var(--pv-page-gutter, 16px) clamp(56px, 7vw, 96px);
}
.f26 *, .f26 *::before, .f26 *::after { box-sizing: border-box; }
.f26 :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; }
.f26 :where(ul, ol) { padding: 0; list-style: none; }
.f26 :where(fieldset) { min-width: 0; padding: 0; border: 0; }
.f26 :where(a) { color: inherit; }
.f26 :where(button, input, select) { font: inherit; color: inherit; }
.f26 [hidden] { display: none !important; }
.f26 .f26-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.f26 .f26-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.f26 .f26-ic--sm { width: 15px; height: 15px; }
.f26 .f26-ic--xs { width: 12px; height: 12px; stroke-width: 2; }
.f26 :focus-visible { outline: 2px solid var(--f26-focus); outline-offset: 2px; }

/* ── Heading ─────────────────────────────────────────────────────────── */
.f26 .f26-head { padding: 4px 0 0; max-width: 820px; }
.f26 .pv-breadcrumbs { padding: 10px 0 14px; }
.f26 .pv-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--f26-muted); font-size: 12px; }
.f26 .pv-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.f26 .pv-breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--f26-muted); text-decoration: none; }
.f26 .pv-breadcrumbs a:hover { color: var(--f26-ink); text-decoration: underline; text-underline-offset: 3px; }
.f26 .f26-kicker { margin-bottom: 10px; color: var(--f26-rust); font: 700 11px/1.4 var(--f26-ui); letter-spacing: .14em; text-transform: uppercase; }
body.pv-site .f26 .f26-title {
  margin: 0; color: var(--f26-ink); font-family: var(--f26-display) !important;
  font-size: clamp(2.35rem, 1.6rem + 2.6vw, 3.6rem) !important; font-weight: 500 !important;
  line-height: 1.02; letter-spacing: -.022em !important; text-transform: none !important;
}
.f26 .f26-lead { max-width: 58ch; margin-top: 14px; color: var(--f26-muted); font-size: clamp(15px, 14px + .3vw, 17px); line-height: 1.6; text-wrap: pretty; }

/* ── Shared pieces ───────────────────────────────────────────────────── */
.f26 .f26-step {
  display: flex; align-items: center; gap: 10px; color: var(--f26-rust);
  font: 700 11px/1.3 var(--f26-ui); letter-spacing: .14em; text-transform: uppercase;
}
.f26 .f26-step > span[aria-hidden] {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 1px solid currentColor; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.f26 .f26-step--side { color: var(--f26-rust); }
body.pv-site .f26 .f26-h2 {
  margin: 12px 0 0; color: var(--f26-ink); font-family: var(--f26-display) !important;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem) !important; font-weight: 500 !important;
  line-height: 1.12; letter-spacing: -.015em !important; text-transform: none !important;
}
.f26 .f26-hint { margin-top: 12px; color: var(--f26-muted); font-size: 13px; line-height: 1.5; }
.f26 .f26-hint--small { font-size: 12px; margin-top: 10px; }
.f26 .f26-status { min-height: 0; margin-top: 8px; color: var(--f26-muted); font-size: 13px; }
.f26 .f26-status:empty { display: none; }
.f26 .f26-status.is-error { color: var(--f26-error); font-weight: 600; }
.f26 .f26-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 0; color: var(--f26-ink); font: 700 13px/1.35 var(--f26-ui); }
.f26 .f26-counter { color: var(--f26-faint); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.f26 .f26-counter.is-full { color: var(--f26-rust); }
.f26 .f26-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--f26-ink-warm); color: var(--f26-paper); font: 700 11px/1 var(--f26-ui); font-variant-numeric: tabular-nums;
}
.f26 .f26-badge.is-zero { display: none; }
.f26 .f26-textbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--f26-action); font: 650 13px/1.3 var(--f26-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.f26 .f26-textbtn:hover { color: var(--f26-ink); }
.f26 .f26-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--f26-action); border-radius: 0; background: var(--f26-action); color: #fffaf4 !important;
  font: 650 14px/1.2 var(--f26-ui); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color var(--f26-quick) ease, border-color var(--f26-quick) ease, transform var(--f26-quick) ease;
}
.f26 .f26-btn:hover { background: var(--f26-action-hover); border-color: var(--f26-action-hover); }
.f26 .f26-btn:active { transform: translateY(1px); }
.f26 .f26-btn--quiet { background: transparent; color: var(--f26-action) !important; border-color: var(--f26-line-strong); }
.f26 .f26-btn--quiet:hover { background: var(--f26-white); border-color: var(--f26-action); }

/* ── The bench: shelf + common profile ───────────────────────────────── */
.f26 .f26-bench {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr);
  margin-top: clamp(22px, 3vw, 34px); border: 1px solid var(--f26-line); background: var(--f26-surface);
}
.f26 .f26-bench__pick { min-width: 0; padding: clamp(22px, 2.6vw, 36px); }
.f26 .f26-bench__profile { min-width: 0; padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--f26-line); background: var(--f26-panel); }

/* Search */
.f26 .f26-search { position: relative; margin-top: 20px; }
.f26 .f26-search__box {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 16px;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); color: var(--f26-muted);
  transition: border-color var(--f26-quick) ease, box-shadow var(--f26-quick) ease;
}
.f26 .f26-search__box:focus-within { border-color: var(--f26-action); box-shadow: 0 0 0 3px rgb(125 87 63 / .14); color: var(--f26-ink); }
.f26 .f26-search__box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--f26-ink); font-size: 16px; -webkit-appearance: none; appearance: none;
}
.f26 .f26-search__box input::placeholder { color: var(--f26-faint); opacity: 1; }
.f26 .f26-search__box input:disabled { cursor: not-allowed; }
.f26 .f26-search__box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.f26 .f26-search__go { min-height: 40px; padding: 0 16px; border: 1px solid var(--f26-action); background: var(--f26-action); color: #fffaf4; font-weight: 650; font-size: 13px; cursor: pointer; }
.f26.is-enhanced [data-f26-nojs] { display: none !important; }
.f26 .f26-search__spin { width: 16px; height: 16px; flex: none; border: 2px solid var(--f26-line-strong); border-top-color: var(--f26-action); border-radius: 50%; opacity: 0; }
.f26 .f26-search.is-loading .f26-search__spin { opacity: 1; animation: f26-spin .7s linear infinite; }
.f26 .f26-options {
  position: absolute; z-index: 40; top: calc(100% - 1px); left: 0; right: 0; max-height: min(420px, 60vh); overflow: auto;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); box-shadow: 0 18px 42px rgb(44 36 32 / .13);
}
.f26 .f26-options li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 14px 8px 8px; border-top: 1px solid var(--f26-line-soft); cursor: pointer;
}
.f26 .f26-options li:first-child { border-top: 0; }
.f26 .f26-options li.is-active, .f26 .f26-options li:hover { background: var(--f26-panel); }
.f26 .f26-options li[aria-disabled="true"] { cursor: default; color: var(--f26-faint); }
.f26 .f26-opt__shot { display: grid; place-items: center; width: 44px; height: 52px; overflow: hidden; border-radius: 6px; background: var(--f26-ground, #ece5da); }
.f26 .f26-opt__shot img { width: 80%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.f26 .f26-opt__text { display: grid; min-width: 0; }
.f26 .f26-opt__text small { color: var(--f26-rust); font: 650 12px/1.4 var(--f26-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-opt__text strong { color: var(--f26-ink); font: 600 15px/1.3 var(--f26-ui); overflow-wrap: anywhere; }
.f26 .f26-opt__add { display: inline-flex; align-items: center; gap: 6px; color: var(--f26-action); font: 650 12px/1 var(--f26-ui); white-space: nowrap; }
.f26 .f26-options li[aria-disabled="true"] .f26-opt__add { color: var(--f26-success); }
.f26 .f26-choices { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--f26-line); background: var(--f26-panel); font-size: 14px; }
.f26 .f26-choices ul { display: grid; gap: 2px; margin-top: 8px; }
.f26 .f26-choices a { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 40px; padding: 8px 0; color: var(--f26-ink); font-weight: 600; }
.f26 .f26-choices small { color: var(--f26-rust); font-size: 12px; }

/* Shelf */
.f26 .f26-shelf { margin-top: 22px; }
/* The list only parks focus (tabindex -1) after a pick on phones; it is not a control. */
.f26 .f26-shelf__slots:focus, .f26 .f26-shelf__slots:focus-visible { outline: none; }
.f26 .f26-shelf__slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.f26 .f26-slot { position: relative; display: grid; grid-template-rows: auto minmax(44px, auto); gap: 8px; min-width: 0; }
.f26 .f26-slot__shot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.08; padding: 11% 17%; overflow: hidden;
  border-radius: var(--f26-r-tile); background: var(--f26-ground, #e5ded3);
  background-image: radial-gradient(ellipse at 50% 42%, var(--f26-glow, #f7f3ec) 22%, var(--f26-ground, #e5ded3) 100%);
}
.f26 .f26-slot__shot img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.f26 .f26-slot__initial { color: var(--f26-action); font: 400 40px/1 var(--f26-display); }
.f26 .f26-slot__num {
  position: absolute; z-index: 1; top: 8px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px;
  background: var(--f26-paper); color: var(--f26-rust); font: 700 11px/1 var(--f26-ui); font-variant-numeric: tabular-nums;
}
.f26 .f26-slot__text { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 0 2px; }
.f26 .f26-slot__brand { order: -1; overflow: hidden; color: var(--f26-rust); font: 650 12px/1.4 var(--f26-ui); text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-slot__name {
  display: -webkit-box; overflow: hidden; color: var(--f26-ink); font: 600 14px/1.3 var(--f26-ui); letter-spacing: -.01em;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
}
.f26 .f26-slot__remove {
  position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgb(44 36 32 / .12); background: rgb(253 251 247 / .92); color: var(--f26-ink-warm); text-decoration: none; cursor: pointer;
  transition: background-color var(--f26-quick) ease, color var(--f26-quick) ease;
}
.f26 .f26-slot__remove::before { content: ""; position: absolute; inset: -7px; }
.f26 .f26-slot__remove:hover { background: var(--f26-ink-warm); color: var(--f26-paper); }
.f26 .f26-slot.is-empty::before {
  content: ""; display: block; width: 100%; aspect-ratio: 1 / 1.08; border: 1px dashed var(--f26-line-strong); border-radius: var(--f26-r-tile);
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgb(214 201 185 / .18) 9px 10px);
}
.f26 .f26-slot.is-empty .f26-slot__num { background: transparent; color: var(--f26-faint); }
.f26 .f26-slot.is-next::before { border-style: solid; border-color: rgb(125 87 63 / .45); background: var(--f26-white); }
.f26 .f26-slot__add {
  position: absolute; inset: 0 0 auto 0; aspect-ratio: 1 / 1.08; display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 12px; color: var(--f26-action); font: 650 13px/1.3 var(--f26-ui); text-align: center; cursor: text;
  transition: background-color var(--f26-quick) ease;
}
.f26 .f26-slot__add .f26-ic { width: 22px; height: 22px; }
.f26 .f26-slot__add:hover { background: rgb(125 87 63 / .05); }
.f26 .f26-search:focus-within ~ .f26-shelf .f26-slot.is-next::before { border-color: var(--f26-action); }

/* Starters: one tap on a community favourite */
.f26 .f26-starters { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--f26-line-soft); }
.f26 .f26-starters__title { color: var(--f26-ink-warm); font-size: 13px; font-weight: 600; }
.f26 .f26-starters__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.f26 .f26-starter {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 14px 4px 4px;
  border: 1px solid var(--f26-line); background: var(--f26-white); color: var(--f26-ink); text-decoration: none;
  font: 600 13px/1.2 var(--f26-ui);
  transition: border-color var(--f26-quick) ease, transform var(--f26-quick) var(--f26-ease), box-shadow var(--f26-quick) ease;
}
.f26 .f26-starter:hover { border-color: var(--f26-action); box-shadow: 0 6px 16px rgb(44 36 32 / .07); transform: translateY(-1px); }
.f26 .f26-starter__shot { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 6px; background: var(--f26-ground, #ece5da); }
.f26 .f26-starter__shot img { width: 78%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.f26 .f26-starter .f26-ic { color: var(--f26-action); }

/* Common profile */
.f26 .f26-profile { display: grid; align-content: start; min-height: 100%; }
.f26 .f26-bars { display: grid; gap: 6px; margin-top: 18px; }
.f26 .f26-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.f26 .f26-bar {
  position: relative; isolation: isolate; display: flex; align-items: center; width: var(--pv-acc-w, 60%); min-width: 72px; min-height: 30px; padding: 0 12px;
  color: var(--pv-acc-ink, #2b2320);
}
.f26 .f26-bar::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 0 15px 15px 0; background: var(--pv-acc, #d9c3ad); transform-origin: left center; }
.f26 .f26-bar__name { overflow: hidden; font: 650 13px/1.2 var(--f26-ui); text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-pips { display: inline-flex; gap: 3px; }
.f26 .f26-pips i { width: 8px; height: 8px; border: 1px solid rgb(75 53 40 / .4); }
.f26 .f26-pips i.is-on { border-color: var(--f26-ink-warm); background: var(--f26-ink-warm); }
.f26 .f26-profile__empty, .f26 .f26-profile__note { max-width: 40ch; margin-top: 16px; color: var(--f26-muted); font-size: 14px; line-height: 1.55; }
.f26 .f26-label--notes { margin-top: 22px; color: var(--f26-rust); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.f26 .f26-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.f26 .f26-notes li { padding: 5px 10px; border: 1px solid var(--f26-line); background: var(--f26-white); color: var(--f26-ink-warm); font-size: 13px; font-weight: 600; }

/* ── Refine ──────────────────────────────────────────────────────────── */
.f26 .f26-refine { margin-top: 14px; border: 1px solid var(--f26-line); background: var(--f26-surface); }
.f26 .f26-refine__summary {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 clamp(18px, 2.6vw, 36px);
  list-style: none; cursor: pointer; user-select: none;
}
.f26 .f26-refine__summary::-webkit-details-marker { display: none; }
.f26 .f26-refine__optional { color: var(--f26-faint); font-size: 12px; font-weight: 600; }
.f26 .f26-refine__hint { overflow: hidden; color: var(--f26-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-refine__hint::before { content: "·"; margin-right: 10px; color: var(--f26-line-strong); }
.f26 .f26-refine[open] .f26-refine__hint { display: none; }
.f26.is-enhanced.is-blank .f26-submit { display: none; }
body.pv-site .f26 .f26-profile__insight { margin-top: 10px; color: var(--f26-ink); font-family: var(--f26-display) !important; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.f26 .f26-profile.is-fresh .f26-profile__insight { animation: f26-rise 420ms var(--f26-ease) both; }
.f26 .f26-dock__slots li.is-arriving img { animation: f26-settle 520ms var(--f26-ease) both; }
.f26 .f26-slot.is-leaving { animation: f26-leave 200ms ease-in both; }
@keyframes f26-leave { to { opacity: 0; transform: scale(.94); } }
.f26 .f26-profile__legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--f26-faint); font-size: 12px; }
.f26 .f26-refine__toggle { margin-left: auto; color: var(--f26-action); transition: transform 240ms var(--f26-ease); }
.f26 .f26-refine[open] .f26-refine__toggle { transform: rotate(180deg); }
.f26 .f26-refine__grid { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr 1.2fr; border-top: 1px solid var(--f26-line-soft); }
.f26 .f26-refine__grid > .f26-field { position: relative; padding: 20px clamp(16px, 1.8vw, 26px) 24px; }
.f26 .f26-refine__grid > .f26-field + .f26-field { border-left: 1px solid var(--f26-line-soft); }
.f26 .f26-field legend { float: left; width: 100%; margin-bottom: 12px; }
.f26 .f26-field legend + * { clear: both; }

.f26 .f26-mini-search {
  position: relative; display: flex; align-items: center; gap: 8px; height: 42px; margin-bottom: 10px; padding: 0 10px;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); color: var(--f26-faint);
}
.f26 .f26-mini-search:focus-within { border-color: var(--f26-action); box-shadow: 0 0 0 3px rgb(125 87 63 / .12); }
.f26 .f26-mini-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--f26-ink); font-size: 16px; }
.f26 .f26-mini-search input::placeholder { color: var(--f26-faint); opacity: 1; }
.f26 .f26-options--terms { top: calc(100% + 2px); left: -1px; right: -1px; }
.f26 .f26-options--terms li { grid-template-columns: 14px minmax(0, 1fr) auto; min-height: 44px; padding: 6px 12px; font-size: 14px; }
.f26 .f26-options--terms .f26-dot { width: 12px; height: 12px; }
.f26 .f26-options--terms small { color: var(--f26-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.f26 .f26-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f26 .f26-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); color: var(--f26-ink-warm);
  font: 600 13px/1.2 var(--f26-ui); cursor: pointer;
  transition: background-color var(--f26-quick) ease, border-color var(--f26-quick) ease, color var(--f26-quick) ease;
}
.f26 .f26-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.f26 .f26-chip__dot { position: relative; display: inline-block; width: 12px; height: 12px; flex: none; }
.f26 .f26-chip:not(.f26-chip--accord) .f26-chip__dot::before,
.f26 .f26-chip:not(.f26-chip--accord) .f26-chip__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--f26-action); transform: translate(-50%, -50%); transition: transform 200ms var(--f26-ease); }
.f26 .f26-chip:not(.f26-chip--accord) .f26-chip__dot::after { transform: translate(-50%, -50%) rotate(90deg); }
.f26 .f26-chip--accord .f26-chip__dot { border-radius: 50%; background: var(--pv-acc, #d9c3ad); box-shadow: inset 0 0 0 1px rgb(44 36 32 / .14); }
.f26 .f26-chip:hover { border-color: var(--f26-action); }
.f26 .f26-chip:has(input:checked) { border-color: var(--f26-ink-warm); background: var(--f26-ink-warm); color: #fdf8f1; }
.f26 .f26-chip:not(.f26-chip--accord):has(input:checked) .f26-chip__dot::before { background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.f26 .f26-chip:not(.f26-chip--accord):has(input:checked) .f26-chip__dot::after { background: currentColor; transform: translate(-50%, -50%) rotate(135deg); }
.f26 .f26-chip--accord:has(input:checked) { border-color: var(--pv-acc); background: var(--pv-acc); color: var(--pv-acc-ink, #2b2320); }
.f26 .f26-chip--accord:has(input:checked) .f26-chip__dot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.f26 .f26-chip:has(input:focus-visible) { outline: 2px solid var(--f26-focus); outline-offset: 2px; }
.f26 .f26-chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.f26 .f26-chip:has(input:disabled) input { cursor: not-allowed; }
.f26 .f26-status--small { font-size: 12px; }

.f26 .f26-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f26 .f26-seg, .f26 .f26-toggle, .f26 .f26-check { position: relative; cursor: pointer; }
.f26 .f26-seg input, .f26 .f26-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.f26 .f26-seg span {
  display: grid; place-items: center; min-height: 42px; margin: -1px 0 0 -1px; padding: 4px 8px; border: 1px solid var(--f26-line-strong);
  background: var(--f26-white); color: var(--f26-ink-warm); font: 600 13px/1.2 var(--f26-ui); text-align: center;
  transition: background-color var(--f26-quick) ease, color var(--f26-quick) ease;
}
.f26 .f26-segment { padding: 1px 0 0 1px; }
.f26 .f26-seg:hover span { background: var(--f26-panel); }
.f26 .f26-seg input:checked + span { position: relative; z-index: 1; border-color: var(--f26-ink-warm); background: var(--f26-ink-warm); color: #fdf8f1; }
.f26 .f26-seg input:focus-visible + span { position: relative; z-index: 2; outline: 2px solid var(--f26-focus); outline-offset: 1px; }
.f26 .f26-unisex { margin-top: 10px; }
.f26 .f26-check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13px; font-weight: 600; color: var(--f26-ink-warm); }
.f26 .f26-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--f26-action); }

.f26 .f26-toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1px 0 0 1px; }
.f26 .f26-toggles--moments { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.f26 .f26-toggle { display: block; }
.f26 .f26-toggle__face {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 58px; margin: -1px 0 0 -1px; padding: 6px 2px;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); color: var(--f26-muted);
  transition: background-color var(--f26-quick) ease, color var(--f26-quick) ease, border-color var(--f26-quick) ease;
}
.f26 .f26-toggle__glyph svg { display: block; width: 20px; height: 20px; }
.f26 .f26-toggle__label { color: var(--f26-ink-warm); font: 600 12px/1.2 var(--f26-ui); text-align: center; overflow-wrap: anywhere; }
.f26 .f26-toggle:hover .f26-toggle__face { background: var(--f26-panel); }
.f26 .f26-toggle input:checked + .f26-toggle__face { position: relative; z-index: 1; border-color: var(--f26-tone, var(--f26-action)); background: var(--f26-tint, #f6efe6); color: var(--f26-tone, var(--f26-action)); box-shadow: inset 0 0 0 1px var(--f26-tone, var(--f26-action)); }
.f26 .f26-toggle input:checked + .f26-toggle__face .f26-toggle__label { color: var(--f26-tone, var(--f26-ink)); }
.f26 .f26-toggle input:focus-visible + .f26-toggle__face { position: relative; z-index: 2; outline: 2px solid var(--f26-focus); outline-offset: 1px; }
/* The perfume page's season colours. */
.f26 .f26-toggle:has(input[value="winter"]) { --f26-tone: #46677f; --f26-tint: #eef3f6; }
.f26 .f26-toggle:has(input[value="spring"]) { --f26-tone: #4d6c3e; --f26-tint: #eff4ec; }
.f26 .f26-toggle:has(input[value="summer"]) { --f26-tone: #835b14; --f26-tint: #faf3e3; }
.f26 .f26-toggle:has(input[value="autumn"]) { --f26-tone: #95512d; --f26-tint: #f8ece5; }
.f26 .f26-toggle:has(input[value="day"]) { --f26-tone: #835b14; --f26-tint: #faf3e3; }
.f26 .f26-toggle:has(input[value="night"]) { --f26-tone: #435679; --f26-tint: #edf0f6; }

.f26 .f26-submit { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.f26 .f26-submit .f26-btn { min-width: 220px; min-height: 52px; }

/* ── Results ─────────────────────────────────────────────────────────── */
.f26 .f26-results { position: relative; margin-top: clamp(32px, 4vw, 48px); scroll-margin-top: calc(var(--f26-top, 96px) + 12px); outline: 0; }
.f26 .f26-results::before {
  content: ""; position: absolute; z-index: 5; top: -14px; left: 0; right: 0; height: 2px; background: var(--f26-action);
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.f26 .f26-results.is-loading::before { opacity: 1; animation: f26-progress 2.4s var(--f26-ease) forwards; }
.f26 .f26-results.is-loading > :not(.f26-results__head) { opacity: .5; transition: opacity 200ms ease; pointer-events: none; }
.f26 .f26-results__head { padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--f26-line); }
.f26 .f26-results__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.f26 .f26-count { color: var(--f26-muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.f26 .f26-tabs { display: flex; gap: 22px; margin-top: 18px; border-bottom: 1px solid var(--f26-line); overflow-x: auto; scrollbar-width: none; }
.f26 .f26-tab {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--f26-muted); font: 600 14px/1 var(--f26-ui); text-decoration: none; white-space: nowrap;
}
.f26 .f26-tab:hover { color: var(--f26-ink); }
.f26 .f26-tab.is-on { border-bottom-color: var(--f26-action); color: var(--f26-ink); }
.f26 .f26-results__note { margin-top: 10px; color: var(--f26-muted); font-size: 13px; }

.f26 .f26-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.f26 .f26-applied__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 0 10px;
  border: 1px solid var(--f26-line-strong); background: var(--f26-white); color: var(--f26-ink-warm);
  font: 600 13px/1.2 var(--f26-ui); text-decoration: none; transition: border-color var(--f26-quick) ease, background-color var(--f26-quick) ease;
}
.f26 .f26-applied__chip:hover { border-color: var(--f26-ink-warm); background: var(--f26-panel); }
.f26 .f26-applied__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-applied__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--pv-acc); box-shadow: inset 0 0 0 1px rgb(44 36 32 / .14); }
.f26 .f26-applied__shot { display: grid; place-items: center; width: 24px; height: 28px; flex: none; margin-left: -6px; overflow: hidden; border-radius: 4px; background: var(--f26-ground, #ece5da); }
.f26 .f26-applied__shot img { width: 80%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.f26 .f26-applied .f26-textbtn { min-height: 36px; margin-left: 6px; }
.f26 .f26-notice { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--f26-line); background: var(--f26-panel); font-size: 14px; }
.f26 .f26-notice.is-error { border-color: #e3c0ba; background: var(--f26-error-tint); color: var(--f26-error); }

/* Grid: the catalogue's fragrance tile, a little more air. */
body.pv-site .f26 .f26-grid.pv-fragrance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 34px clamp(14px, 1.6vw, 22px); margin-top: 28px; }
.f26 .f26-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.f26 .f26-card .pv-fragrance-card { flex: none; }
.f26 .f26-fav { position: absolute; z-index: 3; top: 8px; right: 8px; margin: 0; }
.f26 .f26-fav__btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(44 36 32 / .1);
  background: rgb(253 251 247 / .9); color: var(--f26-ink-warm); cursor: pointer; transition: color var(--f26-quick) ease, background-color var(--f26-quick) ease;
}
.f26 .f26-fav__btn::before { content: ""; position: absolute; inset: -4px; }
.f26 .f26-fav__btn:hover { background: var(--f26-white); color: var(--f26-rust); }
.f26 .f26-fav__btn.is-on { color: var(--f26-rust); }
.f26 .f26-fav__btn.is-on .f26-ic { fill: currentColor; }
.f26 .f26-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; overflow-wrap: anywhere; margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--f26-line-soft); color: var(--f26-muted); font-size: 12px; line-height: 1.45; }
.f26 .f26-why__link { display: flex; gap: 6px; align-items: flex-start; color: var(--f26-rust); font-weight: 600; }
.f26 .f26-why__link .f26-ic { margin-top: 2px; }
.f26 .f26-why__accords { display: block; color: var(--f26-ink-warm); font-weight: 600; line-height: 1.6; }
.f26 .f26-why__accords li { display: inline-block; margin-right: 9px; white-space: nowrap; }
.f26 .f26-why__accords li:last-child { margin-right: 0; }
.f26 .f26-why__accords .f26-dot { margin-right: 5px; vertical-align: 0; }
.f26 .f26-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--pv-acc, #d9c3ad); box-shadow: inset 0 0 0 1px rgb(44 36 32 / .14); }
.f26 .f26-why__notes { color: var(--f26-muted); }
.f26 .f26-why__context { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.f26 .f26-why__context > span { display: inline-flex; align-items: center; gap: 4px; }
.f26 .f26-why__glyph svg { display: block; width: 14px; height: 14px; }
.f26 .f26-why__meta { color: var(--f26-faint); font-size: 12px; }

.f26 .f26-more { display: grid; justify-items: center; gap: 12px; margin-top: 44px; }
.f26 .f26-more__count { color: var(--f26-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.f26 .f26-more__track { display: block; width: 180px; height: 3px; background: var(--f26-line); }
.f26 .f26-more__track i { display: block; height: 100%; background: var(--f26-action); transform: scaleX(var(--f26-p, 0)); transform-origin: left center; transition: transform 400ms var(--f26-ease); }
.f26 .f26-more.is-loading .f26-btn { opacity: .6; pointer-events: none; }

.f26 .f26-empty { max-width: 760px; margin-top: 24px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--f26-line); background: var(--f26-surface); }
body.pv-site .f26 .f26-empty__title { margin: 0 0 8px; color: var(--f26-ink); font-family: var(--f26-display) !important; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem) !important; font-weight: 500 !important; line-height: 1.15; letter-spacing: -.01em; }
.f26 .f26-empty p { max-width: 62ch; color: var(--f26-muted); font-size: 15px; }
.f26 .f26-empty .f26-empty__lead { margin-top: 16px; color: var(--f26-ink); font-weight: 600; }
.f26 .f26-empty[role="alert"] { border-color: #e3c0ba; background: var(--f26-error-tint); }
.f26 .f26-empty[role="alert"] .f26-btn { margin-top: 16px; }
.f26 .f26-routes { margin: 14px 0 8px; border-top: 1px solid var(--f26-line); }
.f26 .f26-route {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 54px; padding: 8px 2px;
  border-bottom: 1px solid var(--f26-line); color: var(--f26-ink); text-decoration: none;
}
.f26 .f26-route span { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-route small { color: var(--f26-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.f26 .f26-route .f26-ic { color: var(--f26-action); transition: transform var(--f26-quick) var(--f26-ease); }
.f26 .f26-route:hover { background: var(--f26-panel); }
.f26 .f26-route:hover .f26-ic { transform: translateX(3px); }

.f26 .f26-start { padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--f26-line); }
.f26 .f26-start__notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: 16px; }
.f26 .f26-note-door { display: grid; gap: 10px; color: var(--f26-ink); text-decoration: none; }
.f26 .f26-note-door__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--f26-r-tile); background: var(--f26-panel); }
.f26 .f26-note-door__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms var(--f26-ease); }
.f26 .f26-note-door:hover .f26-note-door__media img { transform: scale(1.04); }
.f26 .f26-note-door__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 15px/1.3 var(--f26-ui); }
.f26 .f26-note-door__label .f26-ic { color: var(--f26-action); }
.f26 .f26-how { margin-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--f26-line); }
.f26 .f26-how summary { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; color: var(--f26-ink-warm); font: 650 14px/1.3 var(--f26-ui); list-style: none; cursor: pointer; }
.f26 .f26-how summary::-webkit-details-marker { display: none; }
.f26 .f26-how[open] summary .f26-ic { transform: rotate(45deg); }
.f26 .f26-how__body { display: grid; gap: 10px; max-width: 72ch; padding-bottom: 8px; color: var(--f26-muted); font-size: 14px; line-height: 1.6; }

/* ── Dock: the selection stays in view ───────────────────────────────── */
.f26 .f26-dock {
  position: fixed; z-index: 70; left: 0; right: 0; top: var(--f26-top, 0px);
  border-bottom: 1px solid var(--f26-line); background: var(--f26-paper); box-shadow: 0 8px 24px rgb(31 22 16 / .08);
  transform: translateY(calc(-100% - var(--f26-top, 0px) - 8px)); visibility: hidden;
  transition: transform 320ms var(--f26-ease), visibility 0s linear 320ms;
}
.f26 .f26-dock.is-shown { transform: none; visibility: visible; transition: transform 320ms var(--f26-ease), visibility 0s; }
.f26 .f26-dock__inner { display: flex; align-items: center; gap: 16px; min-height: 64px; margin-inline: auto; max-width: var(--pv-shell-measure, 1352px); padding: 8px var(--pv-page-gutter, 16px); }
.f26 .f26-dock__slots { display: flex; gap: 6px; }
.f26 .f26-dock__slots li { display: grid; place-items: center; width: 38px; height: 42px; overflow: hidden; border-radius: 6px; background: var(--f26-ground, transparent); }
.f26 .f26-dock__slots li.is-empty { border: 1px dashed var(--f26-line-strong); }
.f26 .f26-dock__slots img { width: 80%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.f26 .f26-dock__meta { flex: 1; min-width: 0; overflow: hidden; color: var(--f26-muted); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.f26 .f26-dock__go { min-height: 44px; }
.f26 .f26-dock__go.is-up .f26-ic { transform: rotate(180deg); }

/* ── Motion: purposeful only ─────────────────────────────────────────── */
@keyframes f26-spin { to { transform: rotate(360deg); } }
@keyframes f26-progress { 0% { transform: scaleX(0); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }
@keyframes f26-settle { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes f26-ground { from { opacity: .2; } to { opacity: 1; } }
@keyframes f26-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes f26-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes f26-pulse { 0% { box-shadow: 0 0 0 0 rgb(125 87 63 / .35); } 100% { box-shadow: 0 0 0 10px rgb(125 87 63 / 0); } }
.f26 .f26-slot.is-arriving .f26-slot__shot { animation: f26-ground 360ms ease-out both; }
.f26 .f26-slot.is-arriving .f26-slot__shot img { animation: f26-settle 560ms var(--f26-ease) 60ms both; }
.f26 .f26-slot.is-arriving .f26-slot__text { animation: f26-rise 420ms var(--f26-ease) 140ms both; }
.f26 .f26-profile.is-fresh .f26-bar::before { animation: f26-grow 620ms var(--f26-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.f26 .f26-profile.is-fresh .f26-bar__name, .f26 .f26-profile.is-fresh .f26-pips { animation: f26-rise 360ms ease-out both; animation-delay: calc(var(--i, 0) * 45ms + 220ms); }
.f26 .f26-results.is-fresh .f26-card { animation: f26-rise 460ms var(--f26-ease) both; animation-delay: calc(var(--i, 0) * 34ms); }
.f26 .f26-card.is-appended { animation: f26-rise 420ms var(--f26-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.f26 .f26-submit .f26-btn.is-ready { animation: f26-pulse 900ms ease-out 1; }

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .f26 .f26-refine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f26 .f26-refine__grid > .f26-field:nth-child(3) { border-left: 0; }
  .f26 .f26-refine__grid > .f26-field:nth-child(n + 3) { border-top: 1px solid var(--f26-line-soft); }
}
@media (max-width: 900px) {
  .f26 .f26-bench { grid-template-columns: minmax(0, 1fr); }
  .f26 .f26-bench__profile { border-left: 0; border-top: 1px solid var(--f26-line); }
  .f26 .f26-bars { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 20px; }
}

/* ── Phone: 390 must be excellent ────────────────────────────────────── */
@media (max-width: 767px) {
  body.pv-site main.f26 { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .f26 .pv-breadcrumbs { padding: 6px 0 8px; }
  .f26 .f26-lead { margin-top: 10px; }
  .f26 .f26-bench { margin-inline: calc(-1 * var(--pv-page-gutter, 16px)); border-inline: 0; }
  .f26 .f26-bench__pick { padding: 22px 16px 20px; }
  .f26 .f26-bench__profile { padding: 20px 16px 22px; }
  .f26 .f26-search { margin-top: 16px; }
  .f26 .f26-search__box { height: 52px; }
  .f26 .f26-options { position: absolute; max-height: min(360px, 52vh); }
  .f26 .f26-shelf { margin-top: 16px; }
  .f26 .f26-shelf__slots { gap: 6px; }
  .f26 .f26-slot { grid-template-rows: auto minmax(34px, auto); gap: 6px; }
  .f26 .f26-slot__shot { padding: 10% 14%; border-radius: 8px; }
  .f26 .f26-slot.is-empty::before { border-radius: 8px; }
  .f26 .f26-slot__num { top: 4px; left: 4px; width: 18px; height: 18px; font-size: 10px; }
  .f26 .f26-slot__brand { display: none; }
  .f26 .f26-slot__name { font-size: 12px; line-height: 1.25; }
  .f26 .f26-slot__remove { top: 2px; right: 2px; width: 26px; height: 26px; }
  .f26 .f26-slot__remove::before { inset: -9px; }
  .f26 .f26-slot__add { font-size: 0; gap: 0; }
  .f26 .f26-slot__add .f26-ic { width: 20px; height: 20px; }
  .f26 .f26-starters__list { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
  .f26 .f26-profile.is-empty .f26-bars li:nth-child(n + 4) { display: none; }
  .f26 .f26-profile.is-empty .f26-bar { min-height: 22px; }
  .f26 .f26-profile.is-empty .f26-profile__empty { margin-top: 12px; font-size: 13px; }
  .f26 .f26-starters__list::-webkit-scrollbar { display: none; }
  .f26 .f26-starters__list li { flex: none; scroll-snap-align: start; }
  .f26 .f26-bars { grid-template-columns: minmax(0, 1fr); }
  .f26 .f26-refine { margin-inline: calc(-1 * var(--pv-page-gutter, 16px)); border-inline: 0; }
  .f26 .f26-refine__summary { padding: 0 16px; min-height: 56px; }
  .f26 .f26-refine__hint { display: none; }
  .f26 .f26-refine__grid { grid-template-columns: minmax(0, 1fr); }
  .f26 .f26-refine__grid > .f26-field { padding: 18px 16px 20px; }
  .f26 .f26-refine__grid > .f26-field + .f26-field { border-left: 0; border-top: 1px solid var(--f26-line-soft); }
  .f26 .f26-chip { min-height: 40px; }
  .f26 .f26-applied__chip { min-height: 40px; }
  .f26 .f26-segment { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f26 .f26-seg span { min-height: 44px; font-size: 13px; }
  .f26.is-enhanced .f26-submit { display: none; }
  .f26:not(.is-enhanced) .f26-submit .f26-btn { width: 100%; }
  body.pv-site .f26 .f26-grid.pv-fragrance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .f26 .f26-fav { top: 6px; right: 6px; }
  .f26 .f26-start__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f26 .f26-route { grid-template-columns: minmax(0, 1fr) auto; }
  .f26 .f26-route .f26-ic { display: none; }
  /* The dock moves to the thumb. */
  .f26 .f26-dock {
    top: auto; bottom: 0; border-top: 1px solid var(--f26-line); border-bottom: 0; box-shadow: 0 -8px 24px rgb(31 22 16 / .08);
    transform: translateY(calc(100% + 8px));
  }
  .f26 .f26-dock__inner { gap: 10px; min-height: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .f26 .f26-dock__slots { gap: 4px; }
  .f26 .f26-dock__slots li { width: 28px; height: 34px; border-radius: 5px; }
  .f26 .f26-dock__meta { display: none; }
  .f26 .f26-dock__go { flex: 1; min-height: 48px; padding: 0 14px; }
  .f26 .f26-dock__go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 359px) {
  .f26 .f26-slot__name { display: none; }
  .f26 .f26-slot { grid-template-rows: auto; }
  .f26 .f26-segment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: none) {
  .f26 .f26-starter:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f26 *, .f26 *::before, .f26 *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .f26 .f26-results.is-loading::before { transform: scaleX(.92); }
}
@media (forced-colors: active) {
  .f26 .f26-bar, .f26 .f26-dot, .f26 .f26-applied__dot { forced-color-adjust: none; }
  .f26 .f26-chip:has(input:checked), .f26 .f26-seg input:checked + span { outline: 2px solid CanvasText; }
}

/* Live status line above the results (slow network, errors). */
.f26 .f26-live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: clamp(28px, 4vw, 44px) 0 -24px; padding: 10px 14px; border: 1px solid var(--f26-line); background: var(--f26-panel); color: var(--f26-ink-warm); font-size: 13px; font-weight: 600; }
.f26 .f26-live.is-error { border-color: #e3c0ba; background: var(--f26-error-tint); color: var(--f26-error); }
.f26 .f26-live .f26-textbtn { min-height: 32px; }
.f26 button.f26-slot__remove { padding: 0; font: inherit; }