/*!
 * Facet Nav — styles. Every color, font and size is a --fn-* variable;
 * set them on :root or .fn, or pass `theme` to FacetNav.mount().
 */
.fn {
  --fn-ink: #161616;
  --fn-muted: #6b6b66;
  --fn-bar: transparent;
  --fn-bar-scrolled: rgba(250, 250, 247, .94);
  --fn-bar-rule: rgba(0, 0, 0, .08);
  --fn-tray: #ecebe6;
  --fn-tray-ink: var(--fn-ink);
  --fn-chip: #ffffff;
  --fn-chip-ink: var(--fn-ink);
  --fn-panel: #ffffff;
  --fn-panel-ink: var(--fn-ink);
  --fn-backing: #e4e1d6;
  --fn-backing-offset: 7px;
  --fn-entry-hover: #f1f0ea;
  --fn-feature: #161616;
  --fn-feature-ink: #ffffff;
  --fn-accent: #161616;
  --fn-accent-ink: #ffffff;
  --fn-accent-hover: #000000;
  --fn-ghost: #ffffff;
  --fn-ghost-ink: var(--fn-ink);
  --fn-ghost-rule: var(--fn-ink);
  --fn-soft: #e4e3dc;
  --fn-soft-ink: var(--fn-ink);
  --fn-soft-hover: #d8d7cf;
  --fn-btn-size: 14px;
  --fn-btn-weight: 600;
  --fn-item-gap: 6px;
  --fn-panel-gap: 16px;
  --fn-sheet: #fafaf7;
  --fn-sheet-ink: var(--fn-ink);
  --fn-sheet-rule: rgba(0, 0, 0, .12);
  --fn-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fn-display: var(--fn-font);
  --fn-link-size: 14px;
  --fn-link-weight: 500;
  --fn-link-case: none;
  --fn-link-tracking: 0;
  --fn-bar-h: 76px;
  --fn-gutter: clamp(16px, 3vw, 40px);
  --fn-brand-w: 120px;
  --fn-panel-w: 620px;
  --fn-ease: cubic-bezier(.2, .9, .25, 1);
  --fn-bar-measured: var(--fn-bar-h);

  position: relative;
  z-index: 60;
  /* No overflow clipping here: Safari applies overflow-x: clip to both axes, which
     hid every dropdown once its opening animation finished. Panels are kept on
     screen by placePanel() in facet-nav.js instead. */
  font-family: var(--fn-font);
  color: var(--fn-ink);
  -webkit-font-smoothing: antialiased;
}
.fn *, .fn *::before, .fn *::after { box-sizing: border-box; }
.fn.fn--sticky { position: sticky; top: 0; transition: transform .5s var(--fn-ease); }
.fn.fn--hidden { transform: translateY(calc(-100% - 6px)); }
html.fn-lock, html.fn-lock body { overflow: hidden; }

/* ---- Bar ---------------------------------------------------------------- */
.fn .fn-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 20px;
  min-height: var(--fn-bar-h);
  padding: 10px var(--fn-gutter);
  background: var(--fn-bar);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.fn.fn--align-start .fn-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.fn.fn--align-start .fn-main { justify-self: start; }
.fn.fn--scrolled .fn-bar,
.fn.fn--sheet-open .fn-bar { background: var(--fn-bar-scrolled); box-shadow: inset 0 -1px 0 var(--fn-bar-rule); }
.fn .fn-brand { display: flex; align-items: center; justify-self: start; width: var(--fn-brand-w); max-width: 100%; color: inherit; text-decoration: none; }
.fn .fn-brand svg, .fn .fn-brand img { display: block; width: 100%; height: auto; max-height: calc(var(--fn-bar-h) - 14px); }
.fn .fn-main { justify-self: center; min-width: 0; }
.fn .fn-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* ---- Tray, links and the hover chip -------------------------------------- */
.fn .fn-tray { position: relative; padding: 5px; }
.fn .fn-tray-surface, .fn .fn-chip, .fn .fn-backing, .fn .fn-panel-surface { position: absolute; pointer-events: none; clip-path: var(--fn-shape); }
.fn .fn-tray-surface { inset: 0; background: var(--fn-tray); }
.fn .fn-chip {
  left: 0; top: 5px; bottom: 5px; width: 0;
  background: var(--fn-chip);
  opacity: 0;
  transition: transform .45s var(--fn-ease), width .45s var(--fn-ease), opacity .25s ease;
}
.fn .fn-chip.fn-no-anim { transition: none; }
.fn .fn-list { position: relative; display: flex; gap: var(--fn-item-gap); margin: 0; padding: 0; list-style: none; }
.fn .fn-item { position: relative; }
.fn .fn-link, .fn button.fn-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; margin: 0;
  font: inherit; font-size: var(--fn-link-size); font-weight: var(--fn-link-weight);
  text-transform: var(--fn-link-case); letter-spacing: var(--fn-link-tracking); line-height: 1;
  color: var(--fn-tray-ink); background: none; border: 0; border-radius: 0; box-shadow: none;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color .2s ease;
}
.fn .fn-link:hover, .fn .fn-link[aria-expanded="true"], .fn .fn-link.is-current { color: var(--fn-chip-ink); }
.fn .fn-chev { width: 9px; height: 6px; flex: none; transform: rotate(-90deg); transition: transform .35s var(--fn-ease); }
.fn [aria-expanded="true"] > .fn-chev { transform: rotate(0deg); }

/* ---- Dropdown panels ---------------------------------------------------- */
.fn .fn-panel {
  position: absolute; z-index: 2;
  top: calc(100% + 5px + var(--fn-panel-gap)); left: -5px;
  width: min(var(--fn-panel-w), calc(100vw - 24px));
  color: var(--fn-panel-ink);
  opacity: 0; visibility: hidden;
  transform: translate(var(--fn-shift, 0px), -10px) rotate(-.6deg);
  transform-origin: 20% 0;
  transition: opacity .2s ease, transform .4s var(--fn-ease), visibility 0s linear .4s;
}
.fn .fn-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--fn-panel-gap) + 5px); }
.fn .fn-panel:not([data-open="true"]) { pointer-events: none; }
.fn .fn-panel:not([data-open="true"])::before { display: none; }
.fn .fn-panel[data-open="true"] {
  opacity: 1; visibility: visible;
  transform: translate(var(--fn-shift, 0px), 0) rotate(0);
  transition: opacity .2s ease, transform .45s var(--fn-ease), visibility 0s;
}
.fn .fn-backing { inset: 0; background: var(--fn-backing); transition: transform .5s var(--fn-ease) .04s; }
.fn .fn-panel[data-open="true"] .fn-backing { transform: translate(var(--fn-backing-offset), var(--fn-backing-offset)) rotate(.4deg); }
.fn .fn-panel-surface { inset: 0; background: var(--fn-panel); }
.fn .fn-panel-inner { position: relative; display: grid; gap: 18px; padding: 26px; }
.fn .fn-panel-inner.has-feature { grid-template-columns: minmax(0, 1fr) minmax(190px, 36%); align-items: stretch; }
.fn .fn-panel-intro { grid-column: 1 / -1; margin: 0 0 -4px 12px; font-size: 13px; color: var(--fn-muted); }
.fn .fn-cols { display: grid; grid-template-columns: repeat(var(--fn-cols, 1), minmax(0, 1fr)); gap: 10px 18px; align-content: start; }
.fn .fn-col-title { margin: 0 0 6px 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-muted); }
.fn .fn-entries { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fn .fn-entries li { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .4s var(--fn-ease); }
.fn .fn-panel[data-open="true"] .fn-entries li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 28ms); }
.fn .fn-entry {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  color: inherit; text-decoration: none;
}
.fn .fn-entry::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fn-entry-hover); clip-path: var(--fn-shape);
  opacity: 0; transform: scale(.97);
  transition: opacity .2s ease, transform .35s var(--fn-ease);
}
.fn .fn-entry:hover::before, .fn .fn-entry:focus-visible::before, .fn .fn-entry.is-current::before { opacity: 1; transform: none; }
.fn .fn-entry-num { min-width: 18px; padding-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fn-muted); }
.fn .fn-entry-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.fn .fn-entry-icon svg { width: 100%; height: 100%; }
.fn .fn-swatch { display: block; flex: none; width: 14px; height: 18px; margin-top: 1px; clip-path: var(--fn-shape); }
.fn .fn-entry-text { display: block; min-width: 0; }
.fn .fn-entry-label { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.fn .fn-entry-desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--fn-muted); }
.fn .fn-tag { margin-left: 6px; padding: 2px 6px; font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; color: var(--fn-accent-ink); background: var(--fn-accent); clip-path: var(--fn-tag-shape, polygon(3px 0, 100% 1px, calc(100% - 2px) 100%, 0 calc(100% - 1px))); }

.fn .fn-feature {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 210px; padding: 22px;
  color: var(--fn-feature-ink); text-decoration: none;
}
.fn .fn-feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fn-feature); clip-path: var(--fn-shape);
  transition: transform .45s var(--fn-ease);
}
.fn .fn-feature:hover::before, .fn .fn-feature:focus-visible::before { transform: rotate(-1.2deg) scale(1.02); }
.fn .fn-feature-img { position: absolute; inset: 0; z-index: -1; clip-path: var(--fn-shape); overflow: hidden; }
.fn .fn-feature-img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: multiply; }
.fn .fn-feature-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.fn .fn-feature-title { font-family: var(--fn-display); font-size: 27px; line-height: 1.05; letter-spacing: -.02em; }
.fn .fn-feature-text { font-size: 13px; line-height: 1.45; opacity: .86; }
.fn .fn-feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.fn .fn-arrow { width: 11px; height: 11px; flex: none; transition: transform .3s var(--fn-ease); }
.fn a:hover > .fn-arrow, .fn a:hover .fn-feature-cta .fn-arrow { transform: translate(2px, -2px); }

/* ---- Buttons ------------------------------------------------------------ */
.fn .fn-btn, .fn button.fn-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; margin: 0;
  font: inherit; font-size: var(--fn-btn-size); font-weight: var(--fn-btn-weight); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.fn .fn-btn::before, .fn .fn-btn::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  clip-path: var(--fn-shape);
  transition: background-color .25s ease, transform .4s var(--fn-ease);
}
.fn .fn-btn::before { inset: 0; }
.fn .fn-btn::after { inset: 1.5px; }
.fn .fn-btn--solid { color: var(--fn-accent-ink); }
.fn .fn-btn--solid::before { background: var(--fn-accent); }
.fn .fn-btn--solid::after { display: none; }
.fn .fn-btn--solid:hover::before { background: var(--fn-accent-hover); transform: rotate(-1.5deg) scale(1.03); }
.fn .fn-btn--ghost { color: var(--fn-ghost-ink); }
.fn .fn-btn--ghost::before { background: var(--fn-ghost-rule); }
.fn .fn-btn--ghost::after { background: var(--fn-ghost); }
.fn .fn-btn--ghost:hover::before, .fn .fn-btn--ghost:hover::after { transform: rotate(1.2deg); }
.fn .fn-btn--ghost:hover::after { background: var(--fn-entry-hover); }
.fn .fn-btn--soft { color: var(--fn-soft-ink); }
.fn .fn-btn--soft::before { background: var(--fn-soft); }
.fn .fn-btn--soft::after { display: none; }
.fn .fn-btn--soft:hover::before { background: var(--fn-soft-hover); transform: rotate(1.2deg) scale(1.03); }
.fn .fn-btn-label { position: relative; }

.fn .fn-burger, .fn button.fn-burger { display: none; gap: 10px; padding: 0 16px; }
.fn .fn-burger-lines { display: grid; gap: 4px; width: 16px; }
.fn .fn-burger-lines i { display: block; height: 1.5px; background: currentColor; transition: transform .35s var(--fn-ease); }
.fn .fn-burger[aria-expanded="true"] .fn-burger-lines i:first-child { transform: translateY(2.75px) rotate(40deg); }
.fn .fn-burger[aria-expanded="true"] .fn-burger-lines i:last-child { transform: translateY(-2.75px) rotate(-40deg); }

/* ---- Compact (below the breakpoint) ------------------------------------ */
.fn.fn--compact .fn-bar { grid-template-columns: minmax(0, 1fr) auto; }
.fn.fn--compact .fn-main, .fn.fn--compact .fn-bar > .fn-actions { display: none; }
.fn.fn--compact .fn-burger, .fn.fn--compact button.fn-burger { display: inline-flex; justify-self: end; }

.fn .fn-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--fn-bar-measured);
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--fn-sheet-ink); background: var(--fn-sheet);
  visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path .55s var(--fn-ease), visibility 0s linear .55s;
}
.fn .fn-sheet[data-open="true"] {
  visibility: visible;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path .6s var(--fn-ease), visibility 0s;
}
.fn:not(.fn--compact) .fn-sheet { display: none; }
.fn .fn-sheet-inner { display: flex; flex-direction: column; min-height: 100%; padding: 12px var(--fn-gutter) 32px; }
.fn .fn-sheet-list { margin: 0; padding: 0; list-style: none; }
.fn .fn-sheet-row { border-bottom: 1px solid var(--fn-sheet-rule); opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .5s var(--fn-ease); }
.fn .fn-sheet[data-open="true"] .fn-sheet-row { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 45ms); }
.fn .fn-sheet-link, .fn button.fn-sheet-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 18px 0; margin: 0;
  font-family: var(--fn-display); font-size: clamp(28px, 7.5vw, 42px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; text-align: left;
  color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; cursor: pointer;
}
.fn .fn-sheet-link .fn-chev { width: 16px; height: 10px; }
.fn .fn-sheet-group ul { display: grid; gap: 2px; margin: 0; padding: 0 0 18px; list-style: none; }
.fn .fn-sheet-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 9px 0; font-size: 17px; font-weight: 600; color: inherit; text-decoration: none; }
.fn .fn-sheet-entry small { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--fn-muted); }
.fn .fn-sheet-feature { gap: 8px; }
.fn .fn-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fn .fn-sheet-actions .fn-btn { flex: 1 1 140px; height: 50px; }
.fn .fn-sheet-foot { margin: auto 0 0; padding-top: 32px; font-size: 13px; color: var(--fn-muted); }

/* ---- Shape variants ----------------------------------------------------- */
.fn[data-shape="pill"] .fn-tray-surface, .fn[data-shape="pill"] .fn-chip, .fn[data-shape="pill"] .fn-btn::before,
.fn[data-shape="pill"] .fn-btn::after, .fn[data-shape="pill"] .fn-entry::before, .fn[data-shape="pill"] .fn-swatch { clip-path: none; border-radius: 999px; }
.fn[data-shape="pill"] .fn-panel-surface, .fn[data-shape="pill"] .fn-backing, .fn[data-shape="pill"] .fn-feature::before,
.fn[data-shape="pill"] .fn-feature-img { clip-path: none; border-radius: 22px; }
.fn[data-shape="pill"] .fn-entry::before { border-radius: 12px; }
.fn[data-shape="square"] .fn-tray-surface, .fn[data-shape="square"] .fn-chip, .fn[data-shape="square"] .fn-btn::before,
.fn[data-shape="square"] .fn-btn::after, .fn[data-shape="square"] .fn-entry::before, .fn[data-shape="square"] .fn-swatch,
.fn[data-shape="square"] .fn-panel-surface, .fn[data-shape="square"] .fn-backing, .fn[data-shape="square"] .fn-feature::before,
.fn[data-shape="square"] .fn-feature-img, .fn[data-shape="square"] .fn-tag { clip-path: none; border-radius: 0; }

/* ---- Focus and motion --------------------------------------------------- */
.fn :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.fn .fn-panel :focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .fn, .fn *, .fn *::before, .fn *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .fn .fn-panel { transform: translate(var(--fn-shift, 0px), 0) !important; }
}
.fn .fn-sheet-entry .fn-swatch ~ small { padding-left: 26px; }