/* Fyrværkeri.net – produkter, priser og årets indkøbsliste.
   Bygger oven på fyrværkerikatalogs designsystem (60-menu, 93-bund-b, 96-sider). Ingen guld. */
:root {
  --fn-bg: #140128; --fn-bg2: #1b0738; --fn-card: rgba(255,255,255,.045); --fn-line: rgba(255,255,255,.09);
  --fn-ink: #fff; --fn-muted: #c3bce6; --fn-dim: #8f86b8;
  --fn-acc: #b9a2ff; --fn-violet: #7c4dff; --fn-pink: #ff48a0; --fn-cyan: #4fd8ff;
  --fn-ned: #3fe28a; --fn-op: #ff6b8b;
  --fn-r: 18px; --fn-w: 1240px;
}
.fn-body { background: radial-gradient(1200px 600px at 80% -10%, rgba(124,77,255,.28), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(255,72,160,.10), transparent 60%), var(--fn-bg); color: var(--fn-ink); font-family: Lato, Arial, sans-serif; margin: 0; }
.fn-wrap { max-width: var(--fn-w); margin: 0 auto; padding: 0 20px; }
.fn-sec { padding: 56px 0 8px; }
.fn-h2 { font: italic 900 clamp(24px, 3.2vw, 34px)/1.05 Lato, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 6px; }
.fn-h2 small { display: block; font: 700 11px/1 Lato, Arial, sans-serif; letter-spacing: .18em; color: var(--fn-acc); margin-bottom: 10px; font-style: normal; }
.fn-lead { color: var(--fn-muted); margin: 0 0 22px; max-width: 70ch; line-height: 1.55; }
.fn-sechead { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fn-sechead .fn-lead { margin: 0; }
.fn-more { color: var(--fn-acc); font-weight: 700; text-decoration: none; font-size: 14px; white-space: nowrap; }
.fn-more:hover { color: #fff; }
.fn-crumbs { font-size: 12px; color: var(--fn-dim); padding: 92px 0 0; }
.fn-crumbs a { color: var(--fn-muted); text-decoration: none; }
.fn-crumbs a:hover { color: #fff; }
.fn-crumbs span { margin: 0 6px; opacity: .6; }

/* ---------- knapper ---------- */
.fn-btn, .fnl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 900 12px/1 Lato, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, transform .2s, box-shadow .2s; }
.fn-btn:hover, .fnl-btn:hover { background: rgba(255,255,255,.13); }
.fn-btn--pri, .fnl-btn--pri { background: linear-gradient(135deg, var(--fn-violet), #a259ff 55%, var(--fn-pink)); box-shadow: 0 10px 26px -10px rgba(124,77,255,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.fn-btn--pri:hover, .fnl-btn--pri:hover { transform: translateY(-1px); background: linear-gradient(135deg, #8a5dff, #b06bff 55%, #ff5cae); }
.fnl-btn--ghost { background: none; box-shadow: none; color: var(--fn-dim); }
.fnl-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.06); }

/* tilføj-knap (kort og produktside) */
.fn-add { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 900 11px/1 Lato, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(124,77,255,.22); box-shadow: inset 0 0 0 1px rgba(185,162,255,.45); transition: background .2s, box-shadow .2s, transform .15s; }
.fn-add:hover { background: rgba(124,77,255,.4); }
.fn-add:active { transform: scale(.96); }
.fn-add svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; transition: transform .25s; }
.fn-add.is-on { background: rgba(63,226,138,.16); box-shadow: inset 0 0 0 1px rgba(63,226,138,.55); color: #c6ffe0; }
.fn-add.is-on svg { transform: rotate(45deg); }
.fn-add .fn-add__off { display: none; }
.fn-add.is-on .fn-add__on { display: none; }
.fn-add.is-on .fn-add__off { display: inline; }
.fn-add.is-pop { animation: fnpop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes fnpop { 50% { transform: scale(1.12); } }

/* listetæller i menuen */
.fn-listbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; text-decoration: none; color: #fff;
  font: 900 11px/1 Lato, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; background: rgba(124,77,255,.28); box-shadow: inset 0 0 0 1px rgba(185,162,255,.4); }
.fn-listbtn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; }
.fn-listbtn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--fn-pink); font-size: 11px; letter-spacing: 0; }
.fn-listbtn b:empty, .fn-listbtn b[data-n="0"] { display: none; }
.fn-listbtn.is-bump b { animation: fnpop .4s cubic-bezier(.3,1.6,.5,1); }

/* prisændring-mærke */
.fn-delta { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 99px; font: 900 11px/1 Lato, Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.fn-delta.is-ned { color: #b6ffd6; background: rgba(63,226,138,.16); box-shadow: inset 0 0 0 1px rgba(63,226,138,.4); }
.fn-delta.is-op { color: #ffd0da; background: rgba(255,107,139,.14); box-shadow: inset 0 0 0 1px rgba(255,107,139,.4); }
.fn-delta.is-ny { color: #fff; background: linear-gradient(135deg, var(--fn-violet), var(--fn-pink)); }
.fn-delta.is-ned::before { content: "▼"; font-size: 8px; }
.fn-delta.is-op::before { content: "▲"; font-size: 8px; }

/* ---------- forside: hero ---------- */
.fn-hero { position: relative; padding: 120px 0 34px; overflow: hidden; }
.fn-hero::before { content: ""; position: absolute; inset: 0; background: url(../img/top-billede.webp) center 30%/cover no-repeat; opacity: .35; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); pointer-events: none; }
.fn-hero__in { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; }
.fn-kick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; margin: 0 0 16px;
  font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--fn-acc); background: rgba(185,162,255,.12); box-shadow: inset 0 0 0 1px rgba(185,162,255,.24); }
.fn-kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fn-ned); box-shadow: 0 0 0 3px rgba(63,226,138,.2), 0 0 10px var(--fn-ned); }
.fn-hero h1 { margin: 0; font: italic 900 clamp(40px, 7vw, 86px)/.92 Lato, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.fn-hero h1 span { background: linear-gradient(92deg, #fff 10%, #dccbff 50%, #ff9fd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fn-hero p.fn-lead { margin: 18px 0 24px; font-size: 17px; }
.fn-search { position: relative; display: flex; max-width: 560px; }
.fn-search input { flex: 1; height: 56px; padding: 0 130px 0 52px; border-radius: 999px; border: 0; color: #fff; font: 400 16px Lato, Arial, sans-serif;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 40px -24px rgba(0,0,0,.9); outline: none; }
.fn-search input::placeholder { color: var(--fn-dim); }
.fn-search input:focus { box-shadow: inset 0 0 0 1.5px var(--fn-acc), 0 0 0 5px rgba(124,77,255,.18); }
.fn-search svg { position: absolute; left: 20px; top: 18px; width: 20px; height: 20px; stroke: var(--fn-muted); fill: none; stroke-width: 2; }
.fn-search button { position: absolute; right: 6px; top: 6px; height: 44px; }
.fn-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fn-stat { padding: 16px 18px; border-radius: var(--fn-r); background: var(--fn-card); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-stat b { display: block; font: italic 900 30px/1 Lato, Arial, sans-serif; }
.fn-stat span { display: block; margin-top: 6px; font-size: 12px; color: var(--fn-muted); }
.fn-stat--wide { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, rgba(124,77,255,.25), rgba(255,72,160,.12)); }
.fn-count { display: flex; gap: 8px; }
.fn-count div { text-align: center; min-width: 44px; }
.fn-count b { font-size: 24px; }
.fn-count span { margin-top: 3px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- prisændringer (vandret rulle) ---------- */
.fn-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: thin; scrollbar-color: rgba(185,162,255,.35) transparent; }
.fn-rail > * { scroll-snap-align: start; }
.fn-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-tabs button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--fn-muted); cursor: pointer; font: 900 11px/1 Lato, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.fn-tabs button[aria-selected="true"] { background: var(--fn-violet); color: #fff; box-shadow: 0 6px 16px -8px var(--fn-violet); }

/* ---------- produktkort ---------- */
.fn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.fn-card { position: relative; display: flex; flex-direction: column; border-radius: var(--fn-r); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px var(--fn-line); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.fn-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(185,162,255,.35), 0 22px 40px -26px rgba(124,77,255,.9); }
.fn-card__img { position: relative; display: block; aspect-ratio: 4 / 3; background: radial-gradient(70% 70% at 50% 60%, rgba(124,77,255,.28), transparent 70%), #0e0322; }
.fn-card__img img { position: absolute; inset: 8% 6%; width: 88%; height: 84%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); transition: transform .35s; }
.fn-card:hover .fn-card__img img { transform: scale(1.05); }
.fn-card__badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.fn-card__vid { position: absolute; right: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(10,4,26,.7); backdrop-filter: blur(6px); }
.fn-card__vid::before { content: ""; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.fn-card__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.fn-card__brand { font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fn-acc); }
.fn-card__name { margin: 0; font: italic 900 17px/1.12 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-card__name a { color: #fff; text-decoration: none; }
.fn-card__name a::after { content: ""; position: absolute; inset: 0; } /* hele kortet klikbart */
.fn-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.fn-specs span { padding: 4px 8px; border-radius: 8px; font-size: 11.5px; color: var(--fn-muted); background: rgba(255,255,255,.05); }
.fn-specs b { color: #fff; font-weight: 900; }
.fn-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.fn-price { display: flex; flex-direction: column; gap: 3px; }
.fn-price b { font: 900 19px/1 Lato, Arial, sans-serif; }
.fn-price s { font-size: 12px; color: var(--fn-dim); }
.fn-price--na b { font-size: 13px; color: var(--fn-dim); font-weight: 700; }
.fn-card--rail .fn-card__img { aspect-ratio: 16 / 10; }

/* filtre */
.fn-filters { position: sticky; top: 68px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin: 0 0 18px; border-radius: 20px;
  background: rgba(20,1,40,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--fn-line), 0 18px 40px -30px #000; }
.fn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fn-chip { height: 34px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer; color: var(--fn-muted); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--fn-line);
  font: 900 11px/1 Lato, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.fn-chip small { opacity: .6; font-weight: 700; margin-left: 4px; }
.fn-chip[aria-pressed="true"] { color: #fff; background: var(--fn-violet); box-shadow: 0 6px 16px -8px var(--fn-violet); }
.fn-sel { height: 34px; padding: 0 30px 0 12px; border-radius: 999px; border: 0; color: #fff; background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c3bce6' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center/10px no-repeat;
  box-shadow: inset 0 0 0 1px var(--fn-line); font: 700 13px Lato, Arial, sans-serif; appearance: none; -webkit-appearance: none; }
.fn-sel option { background: #1b0738; }
.fn-filters__q { flex: 1 1 180px; min-width: 150px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--fn-line); font: 400 14px Lato, Arial, sans-serif; outline: none; }
.fn-filters__q:focus { box-shadow: inset 0 0 0 1.5px var(--fn-acc); }
.fn-filters__n { margin-left: auto; font-size: 12px; color: var(--fn-dim); white-space: nowrap; }
.fn-loadmore { display: flex; justify-content: center; padding: 26px 0 0; }
.fn-noresult { padding: 40px; text-align: center; color: var(--fn-muted); border-radius: var(--fn-r); background: var(--fn-card); }

/* mærker */
.fn-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.fn-brand { position: relative; display: flex; flex-direction: column; justify-content: end; gap: 3px; min-height: 108px; padding: 14px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--fn-line); transition: transform .2s, box-shadow .2s; }
.fn-brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .25s, transform .4s; }
.fn-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(14,3,34,.92)); }
.fn-brand b, .fn-brand span { position: relative; z-index: 1; }
.fn-brand b { font: italic 900 15px/1.05 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-brand span { font-size: 11px; color: var(--fn-muted); }
.fn-brand:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(185,162,255,.4); }
.fn-brand:hover img { opacity: .8; transform: scale(1.04); }

/* ---------- Krudt Tycoon ---------- */
.fn-kt { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(100% 80% at 0% 0%, rgba(124,77,255,.35), transparent 60%), radial-gradient(80% 70% at 100% 100%, rgba(255,72,160,.18), transparent 60%), #120530;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -50px rgba(124,77,255,.9); }
.fn-kt__art { position: relative; min-height: 360px; }
.fn-kt__art video, .fn-kt__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-kt__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #120530), linear-gradient(transparent 60%, rgba(18,5,48,.9)); }
.fn-kt__copy { position: absolute; left: 26px; bottom: 24px; right: 26px; z-index: 1; }
.fn-kt__copy h2 { margin: 0 0 6px; font: italic 900 clamp(28px, 3.6vw, 42px)/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-kt__copy p { margin: 0 0 16px; color: var(--fn-muted); max-width: 40ch; }
.fn-kt__board { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.fn-kt__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fn-kt__head h3 { margin: 0; font: italic 900 20px/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: rk; }
.fn-top li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.fn-top li:first-child { background: linear-gradient(90deg, rgba(124,77,255,.35), rgba(255,72,160,.12)); box-shadow: inset 0 0 0 1px rgba(185,162,255,.35); }
.fn-top__rk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 12px/1 Lato, Arial, sans-serif; background: rgba(255,255,255,.08); }
.fn-top li:first-child .fn-top__rk { background: #fff; color: #2a0a5e; }
.fn-top__who b { display: block; font: 900 14px/1.15 Lato, Arial, sans-serif; }
.fn-top__who span { font-size: 11.5px; color: var(--fn-muted); }
.fn-top__val { text-align: right; font: 900 15px/1 Lato, Arial, sans-serif; white-space: nowrap; }
.fn-top__val small { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; color: var(--fn-dim); letter-spacing: .06em; }
.fn-top__live { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 99px; font: 900 9px/1 Lato, Arial, sans-serif; letter-spacing: .1em; color: #b6ffd6; background: rgba(63,226,138,.18); vertical-align: 2px; }
.fn-top__empty { padding: 18px; text-align: center; color: var(--fn-muted); border-radius: 12px; background: rgba(255,255,255,.04); }
.fn-kt__far { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(79,216,255,.08); box-shadow: inset 0 0 0 1px rgba(79,216,255,.25); }
.fn-kt__far i { font-style: normal; font-size: 22px; }
.fn-kt__far small { display: block; font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9ce9ff; margin-bottom: 4px; }
.fn-kt__far b { font: 900 14px/1.2 Lato, Arial, sans-serif; }

/* kataloger (lille strimmel) */
.fn-cats { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.fn-cat { display: block; text-decoration: none; color: var(--fn-muted); font-size: 12px; }
.fn-cat img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 24px -16px #000; margin-bottom: 6px; transition: transform .25s; }
.fn-cat:hover img { transform: translateY(-3px) rotate(-1deg); }
.fn-cat b { color: #fff; display: block; }

/* ---------- produktside ---------- */
.fn-pp { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; padding: 18px 0 10px; align-items: start; }
.fn-pp__stage { position: relative; border-radius: 26px; aspect-ratio: 1 / 1; max-height: 640px; width: 100%; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 58%, rgba(124,77,255,.42), transparent 70%), radial-gradient(40% 30% at 50% 92%, rgba(0,0,0,.6), transparent 70%), linear-gradient(180deg, #1d0942, #0d0320);
  box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-pp__stage img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 30px 34px rgba(0,0,0,.65)); }
.fn-pp__stage .fn-card__badges { left: 18px; top: 18px; }
.fn-pp__info { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.fn-pp__brand { font: 700 11px/1 Lato, Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--fn-acc); text-decoration: none; }
.fn-pp h1 { margin: 0; font: italic 900 clamp(32px, 4.6vw, 54px)/.95 Lato, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.015em; }
.fn-pp__price { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border-radius: 20px; background: var(--fn-card); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-pp__price .now small { display: block; font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-muted); margin-bottom: 6px; }
.fn-pp__price .now b { font: 900 40px/1 Lato, Arial, sans-serif; }
.fn-pp__price .was { padding-bottom: 4px; color: var(--fn-dim); }
.fn-pp__price .was s { color: var(--fn-muted); }
.fn-pp__price .fn-delta { height: 26px; font-size: 13px; padding: 0 10px; margin-bottom: 6px; }
.fn-pp__buy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fn-pp__buy .fn-add { height: 50px; padding: 0 24px; font-size: 13px; flex: 1; min-width: 220px; background: linear-gradient(135deg, var(--fn-violet), #a259ff 55%, var(--fn-pink)); box-shadow: 0 14px 30px -14px rgba(124,77,255,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.fn-pp__buy .fn-add.is-on { background: rgba(63,226,138,.16); box-shadow: inset 0 0 0 1px rgba(63,226,138,.55); }
.fn-qty { display: inline-flex; align-items: center; height: 50px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-qty button { width: 44px; height: 50px; border: 0; background: none; color: #fff; font-size: 20px; cursor: pointer; }
.fn-qty input { width: 34px; border: 0; background: none; color: #fff; text-align: center; font: 900 16px Lato, Arial, sans-serif; -moz-appearance: textfield; }
.fn-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fn-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.fn-spec div { padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-spec dt { font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-dim); margin-bottom: 7px; }
.fn-spec dd { margin: 0; font: 900 18px/1.1 Lato, Arial, sans-serif; }
.fn-spec dd small { font-size: 12px; color: var(--fn-muted); font-weight: 700; }
.fn-spec .is-na dd { color: var(--fn-dim); font-size: 14px; font-weight: 700; }
.fn-pp__note { font-size: 12px; color: var(--fn-dim); margin: 0; }
.fn-pp__note a { color: var(--fn-muted); }

.fn-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--fn-line), 0 40px 70px -40px rgba(124,77,255,.8); }
.fn-video button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: #000; }
.fn-video button img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .3s, transform .5s; }
.fn-video button:hover img { opacity: .95; transform: scale(1.02); }
.fn-video button span { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,1,40,.55); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 40px rgba(124,77,255,.8); }
.fn-video button span::before { content: ""; margin-left: 6px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.fn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fn-video__cap { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--fn-dim); }
.fn-video__cap a { color: var(--fn-muted); }

.fn-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fn-cmp__it { padding: 16px; border-radius: 16px; background: var(--fn-card); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-cmp__it small { display: block; font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-dim); }
.fn-cmp__it b { display: block; margin: 8px 0 10px; font: 900 22px/1 Lato, Arial, sans-serif; }
.fn-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); }
.fn-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--fn-violet), var(--fn-pink)); }
.fn-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; border-radius: 2px; }
.fn-cmp__it p { margin: 8px 0 0; font-size: 12px; color: var(--fn-muted); }
.fn-hist { width: 100%; height: 120px; }
.fn-hist text { fill: var(--fn-muted); font: 700 11px Lato, Arial, sans-serif; }

/* ---------- indkøbsliste ---------- */
.fnl { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; padding: 10px 0 30px; }
.fnl-head { padding: 26px 0 8px; }
.fnl-head h1 { margin: 0; font: italic 900 clamp(26px, 3.4vw, 42px)/1.05 Lato, Arial, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.fnl-head h1.is-edit { display: block; width: fit-content; max-width: 100%; padding: 2px 10px 4px; margin-left: -10px; border-radius: 10px; cursor: text; outline: none; transition: background .15s, box-shadow .15s; }
.fnl-head h1.is-edit:hover { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fnl-head h1.is-edit:focus { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(184,140,255,.6); }
.fnl-head h1.is-edit::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .35em; vertical-align: .12em; opacity: .35; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fnl-head h1.is-edit:hover::after { opacity: .8; }
.fnl-head h1.is-edit:focus::after { display: none; }
.fnl-head h1 span { background: linear-gradient(92deg, #fff 10%, #dccbff 50%, #ff9fd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
#fnl-groups { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fnl-g { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px var(--fn-line); overflow: hidden; }
.fnl-g__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(255,255,255,.035); border-bottom: 1px solid var(--fn-line); }
.fnl-g__title { flex: 1; min-width: 0; }
.fnl-g__title h2 { margin: 0; font: italic 900 19px/1.1 Lato, Arial, sans-serif; text-transform: uppercase; outline: none; border-radius: 6px; padding: 1px 4px; margin-left: -4px; }
.fnl-g__title h2[contenteditable]:hover { background: rgba(255,255,255,.06); }
.fnl-g__title h2[contenteditable]:focus { background: rgba(124,77,255,.25); }
.fnl-g__title p { margin: 3px 0 0; font-size: 12px; color: var(--fn-muted); }
.fnl-g__title em { font-style: normal; color: var(--fn-acc); }
.fnl-g__sum { font: 900 18px/1 Lato, Arial, sans-serif; white-space: nowrap; }
.fnl-g__drop { margin: 0; padding: 22px; text-align: center; color: var(--fn-dim); font-size: 13px; border: 1.5px dashed rgba(185,162,255,.25); border-radius: 14px; margin: 12px; }
.fnl-list { list-style: none; margin: 0; padding: 6px; min-height: 8px; }
.fnl-it { display: grid; grid-template-columns: 22px 72px 1fr auto auto 28px; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 14px; transition: background .2s, opacity .18s, transform .18s; }
.fnl-it:hover { background: rgba(255,255,255,.04); }
.fnl-it.is-out { opacity: 0; transform: translateX(20px); }
.fnl-it.is-gone { grid-template-columns: 1fr 28px; color: var(--fn-dim); font-size: 13px; }
.fnl-grip { width: 22px; height: 34px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; display: grid; place-items: center; opacity: .45; transition: opacity .2s; }
.fnl-grip svg { width: 10px; height: 18px; fill: #fff; }
.fnl-it:hover .fnl-grip, .fnl-g__head:hover .fnl-grip { opacity: 1; }
.fnl-grip:active { cursor: grabbing; }
.fnl-it__img { display: block; width: 72px; height: 54px; border-radius: 10px; background: radial-gradient(70% 70% at 50% 60%, rgba(124,77,255,.3), transparent 70%), #0e0322; }
.fnl-it__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fnl-it__txt { min-width: 0; }
.fnl-it__name { display: block; color: #fff; text-decoration: none; font: italic 900 15px/1.15 Lato, Arial, sans-serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnl-it__name small { display: block; font: 700 9.5px/1.2 Lato, Arial, sans-serif; font-style: normal; letter-spacing: .14em; color: var(--fn-acc); margin-bottom: 2px; }
.fnl-it__name:hover { color: var(--fn-acc); }
.fnl-it__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.fnl-it__chips span { padding: 2px 7px; border-radius: 6px; font-size: 11px; color: var(--fn-muted); background: rgba(255,255,255,.05); }
.fnl-qty { display: inline-flex; align-items: center; height: 34px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fnl-qty button { width: 30px; height: 34px; border: 0; background: none; color: #fff; font-size: 16px; cursor: pointer; }
.fnl-qty input { width: 26px; border: 0; background: none; color: #fff; text-align: center; font: 900 14px Lato, Arial, sans-serif; -moz-appearance: textfield; }
.fnl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fnl-qty--ro { padding: 0 12px; font-weight: 900; font-size: 13px; }
.fnl-it__pris { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 96px; text-align: right; }
.fnl-it__pris b { font: 900 16px/1 Lato, Arial, sans-serif; }
.fnl-it__pris small { font-size: 11px; color: var(--fn-dim); }
.fnl-it__pris--na { font-size: 12px; color: var(--fn-dim); }
.fnl-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--fn-muted); cursor: pointer; font-size: 17px; line-height: 1; }
.fnl-x:hover { background: rgba(255,107,139,.25); color: #fff; }
.fnl-ph { height: 70px; margin: 4px 0; border-radius: 14px; border: 1.5px dashed rgba(185,162,255,.55); background: rgba(124,77,255,.1); list-style: none; }
.fnl-ph--g { border-radius: 22px; }
.fnl-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; transform: scale(1.02) rotate(.6deg); background: #241048 !important; border-radius: 16px; box-shadow: 0 30px 60px -20px #000, inset 0 0 0 1.5px var(--fn-acc); list-style: none; opacity: .96; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

.fnl-side { position: sticky; top: 86px; }
#fnl-sum { padding: 22px; border-radius: 24px; background: radial-gradient(90% 60% at 100% 0%, rgba(124,77,255,.35), transparent 60%), rgba(22,8,52,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -40px rgba(124,77,255,.9); }
.fnl-sum__k { margin: 0; font: 700 10px/1 Lato, Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--fn-acc); }
.fnl-sum__big { margin: 8px 0 4px; font: italic 900 46px/1 Lato, Arial, sans-serif; letter-spacing: -.02em; }
.fnl-sum__big.is-pop { animation: fnpop .4s cubic-bezier(.3,1.6,.5,1); }
.fnl-sum__note { margin: 4px 0 0; font-size: 12px; color: var(--fn-dim); }
.fnl-sum__chg { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.fnl-sum__chg small { display: block; font-weight: 400; opacity: .7; font-size: 11px; margin-top: 2px; }
.fnl-sum__chg.is-ned { color: #c6ffe0; background: rgba(63,226,138,.12); }
.fnl-sum__chg.is-op { color: #ffd0da; background: rgba(255,107,139,.12); }
.fnl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.fnl-stats div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.fnl-stats dt { font: 700 9.5px/1 Lato, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-dim); }
.fnl-stats dd { margin: 7px 0 0; font: 900 19px/1 Lato, Arial, sans-serif; }
.fnl-stats dd small { font-size: 12px; color: var(--fn-muted); }
.fnl-nem { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.05); }
.fnl-nem__top { display: flex; justify-content: space-between; font-size: 12px; color: var(--fn-muted); }
.fnl-nem__top b { color: #fff; }
.fnl-nem__bar { height: 8px; margin: 8px 0; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.fnl-nem__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fn-ned), var(--fn-cyan) 60%, var(--fn-violet)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.fnl-nem p { margin: 0; font-size: 11.5px; color: var(--fn-dim); line-height: 1.45; }
.fnl-nem.is-over .fnl-nem__bar i { background: linear-gradient(90deg, #ff9f6b, var(--fn-op)); }
.fnl-nem.is-over p { color: #ffc2cf; }
.fnl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.fnl-actions .fnl-btn { height: 38px; padding: 0 14px; font-size: 11px; }
.fnl-actions .fnl-btn--pri { flex: 1 1 100%; height: 46px; }
.fnl-acc { display: block; font-size: 12px; color: var(--fn-muted); line-height: 1.45; }
.fnl-acc a { color: var(--fn-acc); }
.fnl-acc.is-ok { color: #b6ffd6; }
.fnl-acc.is-warn { color: #ffd0da; }
.fnl-empty { padding: 50px 30px; text-align: center; border-radius: 24px; background: var(--fn-card); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fnl-empty__ico { font-size: 40px; color: var(--fn-acc); }
.fnl-empty h2 { margin: 8px 0; font: italic 900 26px/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fnl-empty p { margin: 0 auto 20px; max-width: 50ch; color: var(--fn-muted); line-height: 1.55; }
.fnl-shared { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: rgba(79,216,255,.08); box-shadow: inset 0 0 0 1px rgba(79,216,255,.3); color: #c9f3ff; font-size: 14px; }

dialog.fnl-login { width: min(400px, calc(100% - 32px)); padding: 26px; border: 0; border-radius: 24px; color: #fff; background: #1b0738; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px #000; }
dialog.fnl-login::backdrop { background: rgba(5,2,16,.7); backdrop-filter: blur(6px); }
.fnl-login h2 { margin: 0 0 6px; font: italic 900 22px/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fnl-login p { margin: 0 0 16px; font-size: 13px; color: var(--fn-muted); line-height: 1.5; }
.fnl-login input { width: 100%; box-sizing: border-box; height: 46px; margin-bottom: 10px; padding: 0 16px; border-radius: 14px; border: 0; color: #fff; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--fn-line); font: 400 15px Lato, Arial, sans-serif; outline: none; }
.fnl-login input:focus { box-shadow: inset 0 0 0 1.5px var(--fn-acc); }
.fnl-login__row { display: flex; gap: 8px; margin-top: 6px; }
.fnl-login__row .fnl-btn { flex: 1; }
.fnl-login__msg { min-height: 18px; margin: 10px 0 0; font-size: 12px; color: #ffd0da; }
.fnl-login [data-luk] { position: absolute; right: 14px; top: 14px; }

#fn-toast { position: fixed; left: 50%; bottom: 24px; z-index: 10000; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; max-width: calc(100% - 32px);
  padding: 13px 18px; border-radius: 16px; background: rgba(28,10,62,.95); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(185,162,255,.35), 0 20px 40px -16px #000; font-size: 14px; transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .25s; }
#fn-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
#fn-toast a { color: var(--fn-acc); font-weight: 700; margin-left: 8px; }

/* ---------- responsivt ---------- */
@media (max-width: 980px) {
  .fn-hero__in, .fn-pp, .fnl, .fn-kt { grid-template-columns: 1fr; }
  .fn-pp__info, .fnl-side { position: static; }
  .fnl-side { order: -1; }
  .fn-kt__art { min-height: 280px; }
  .fn-kt__art::after { background: linear-gradient(transparent 40%, #120530); }
  .fn-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fn-wrap { padding: 0 16px; }
  .fn-hero { padding-top: 96px; }
  .fn-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fn-card__body { padding: 10px; }
  .fn-card__name { font-size: 14px; }
  .fn-card__foot { flex-direction: column; align-items: stretch; }
  .fn-add { width: 100%; }
  .fn-spec { grid-template-columns: 1fr 1fr; }
  .fn-filters { top: 60px; padding: 10px; gap: 8px; }
  .fn-filters__n { width: 100%; margin: 0; }
  .fnl-it { grid-template-columns: 20px 56px 1fr 28px; grid-template-areas: "grip img txt x" "grip img qty pris"; row-gap: 6px; }
  .fnl-it .fnl-grip { grid-area: grip; } .fnl-it__img { grid-area: img; width: 56px; height: 46px; } .fnl-it__txt { grid-area: txt; }
  .fnl-it .fnl-qty { grid-area: qty; justify-self: start; } .fnl-it__pris { grid-area: pris; grid-column: 3 / 5; } .fnl-it .fnl-x { grid-area: x; }
  .fnl-it__pris { min-width: 0; }
  .fnl-sum__big { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print {
  .fkm, .fkc, .fn-crumbs, .fnl-actions, .fnl-acc, .fnl-grip, .fnl-x, .fnl-qty button, #fn-toast, .fnl-login { display: none !important; }
  .fn-body { background: #fff; color: #000; }
  .fnl { grid-template-columns: 1fr; }
  .fnl-side { order: 0; }
  #fnl-sum, .fnl-g, .fnl-stats div, .fnl-nem { background: #fff !important; box-shadow: 0 0 0 1px #ccc !important; color: #000; }
  .fnl-it__name, .fnl-it__name small, .fnl-g__title p, .fnl-it__chips span, .fnl-stats dt, .fnl-sum__k { color: #000 !important; }
  .fnl-head h1 span { color: #000; background: none; }
  .fnl-head h1.is-edit::after { display: none; }
  .fnl-head h1.is-edit { box-shadow: none; background: none; }
  .fnl-it { break-inside: avoid; }
}

/* ---------- tilføjelser: menu, sidehoveder, bånd ---------- */
.fn-logo span { color: var(--fn-acc); }
.fkc-logo span { color: var(--fn-acc); }
.fn-dim { color: var(--fn-dim); }
.fn-mt { margin-top: 18px; }
.fkm-cats small { opacity: .6; font-weight: 700; margin-left: 3px; }
.fn-tile-txt { display: grid; place-items: center; aspect-ratio: 760 / 360; border-radius: 12px; background: linear-gradient(135deg, rgba(124,77,255,.4), rgba(255,72,160,.2)); font: italic 900 16px/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fkm-vid .fkm-name small { opacity: .6; font-weight: 700; }
.fn-mcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.fn-mcat { text-decoration: none; color: #fff; font-size: 12px; font-weight: 700; }
.fn-mcat img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; margin-bottom: 6px; box-shadow: 0 12px 22px -14px #000; transition: transform .25s; }
.fn-mcat:hover img { transform: translateY(-3px); }
.fn-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-top: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; font: 900 15px/1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-drawer-link b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--fn-pink); font-size: 12px; }
.fn-drawer-link b[data-n="0"] { display: none; }
.fkc-pill { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
@media (max-width: 763px) { .fn-listbtn__t { display: none; } .fn-listbtn { padding: 0 10px; } }

.fn-main { min-height: 60vh; }
ul.fn-rail { list-style: none; margin: 0; padding: 4px 2px 16px; }
.fn-pagehead { padding: 18px 0 6px; }
.fn-pagehead h1 { margin: 0; font: italic 900 clamp(38px, 6vw, 72px)/.95 Lato, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.02em; }
.fn-pagehead .fn-lead { margin-top: 14px; }
.fn-pagehead__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fn-pagehead__stats span, .fn-pagehead__stats a { padding: 9px 14px; border-radius: 99px; font-size: 13px; color: var(--fn-muted); background: var(--fn-card); box-shadow: inset 0 0 0 1px var(--fn-line); text-decoration: none; }
.fn-pagehead__stats b { color: #fff; font-weight: 900; }
.fn-pagehead__stats b.is-ned { color: #8cf5b8; } .fn-pagehead__stats b.is-op { color: #ff9db2; }
.fn-pagehead__stats a { color: var(--fn-acc); font-weight: 700; }

.fn-pa-bars { display: grid; gap: 6px; }
.fn-pa-bar { display: grid; grid-template-columns: 170px 1fr 70px 120px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: #fff; background: rgba(255,255,255,.03); }
.fn-pa-bar:hover { background: rgba(255,255,255,.07); }
.fn-pa-bar__n { font: italic 900 14px/1.1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-pa-bar__t { position: relative; height: 12px; border-radius: 99px; background: rgba(255,255,255,.05); }
.fn-pa-bar__t::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(255,255,255,.3); }
.fn-pa-bar__t i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.fn-pa-bar__t i.is-ned { background: linear-gradient(270deg, rgba(63,226,138,.3), var(--fn-ned)); }
.fn-pa-bar__t i.is-op { background: linear-gradient(90deg, rgba(255,107,139,.3), var(--fn-op)); }
.fn-pa-bar b { text-align: right; font-weight: 900; }
.fn-pa-bar b.is-ned { color: #8cf5b8; } .fn-pa-bar b.is-op { color: #ff9db2; }
.fn-pa-bar small { color: var(--fn-dim); font-size: 11px; }
@media (max-width: 640px) { .fn-pa-bar { grid-template-columns: 1fr 64px; } .fn-pa-bar__t { grid-column: 1 / -1; order: 3; } .fn-pa-bar small { display: none; } }

.fn-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: center; padding: 30px; border-radius: 26px;
  background: radial-gradient(90% 90% at 100% 0%, rgba(255,72,160,.18), transparent 60%), radial-gradient(90% 90% at 0% 100%, rgba(124,77,255,.3), transparent 60%), rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--fn-line); }
.fn-band .fn-lead { margin: 6px 0 20px; }
.fn-band__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: #fff; color: #2a0a5e; font-size: 11px; }
.fn-band__n[data-n="0"] { display: none; }
.fn-band__feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fn-band__feat li { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); }
.fn-band__feat b { display: block; font: italic 900 16px/1.1 Lato, Arial, sans-serif; text-transform: uppercase; }
.fn-band__feat span { font-size: 12px; color: var(--fn-muted); }
@media (max-width: 860px) { .fn-band { grid-template-columns: 1fr; padding: 22px; } }

.fn-pp__stage.is-ikon img { inset: 4%; width: 92%; height: 92%; }
.fn-card__img img[src*="/uploads/products/"] { inset: 0; width: 100%; height: 100%; object-fit: cover; }

[hidden] { display: none !important; }

.fn-kt__art::after { background: linear-gradient(90deg, transparent 55%, #120530), linear-gradient(0deg, rgba(18,5,48,.96) 0%, rgba(18,5,48,.72) 42%, rgba(18,5,48,.15) 75%); }
.fn-kt__copy h2, .fn-kt__copy p { text-shadow: 0 2px 14px rgba(0,0,0,.7); }
@media (max-width: 980px) { .fn-kt__art::after { background: linear-gradient(0deg, #120530 0%, rgba(18,5,48,.75) 45%, rgba(18,5,48,.1) 80%); } }