/* Auto Finance 123 theme tokens — layered over the Modernist sheet. Direction "1·2·3 Hexagon": precise 6–12px radii, navy ink, green actions, logo blue accents. */
/* No reserved scrollbar gutter: with the full-width frame the header and footer must reach the window edge (the shell also sets stable inline, hence !important) */
html { scrollbar-gutter: auto !important; }
:root, [data-theme] {
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --as-red: #d93a3f; --as-green: #2f9e44;
  --as-red-badge: #c62f2f; /* white badge text on red passes contrast (5.4:1) */
  --as-brand: #2563eb; /* default brand colour — the dealer's own comes from dealers.json → brand.colors (Worker) */
  --as-brand-btn: #1d4ed8; /* one step darker: white button text must pass WCAG AA (4.5:1) */
  --af-wrap: 1320px;
  --af-hex: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  --af-cut: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
:root, [data-theme="light"] {
  --color-bg: #f4f7f5; --color-surface: #ffffff; --as-surface-2: #e8f0eb;
  --color-text: #0e1c2a; --as-muted: #4a5a69;
  --color-divider: rgba(14, 28, 42, .10); --as-line-strong: rgba(14, 28, 42, .20);
  /* Brand colour: buttons, selected filters, checkboxes, active page — the "action" colour. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: transparent;
  --color-accent: var(--as-brand); --color-accent-100: #e8effd; --color-accent-800: #1e3a8a;
  --af-blue: var(--color-accent-800); --af-blue-strong: var(--color-accent-800); --af-green-text: var(--as-brand-btn); --af-navy: #0b2a4a; --af-green-soft: var(--color-accent-100); --af-blue-soft: #e6f1fa;
  --as-stripe: rgba(14, 28, 42, .05);
  --shadow-sm: 0 1px 2px rgba(11, 42, 74, .06), 0 2px 8px rgba(11, 42, 74, .04);
  --shadow-md: 0 10px 30px rgba(11, 42, 74, .10);
  --shadow-lg: 0 24px 60px rgba(11, 42, 74, .18);
}
[data-theme="dark"] {
  --color-bg: #0a1520; --color-surface: #10202f; --as-surface-2: #172a3b;
  --color-text: #edf3f7; --as-muted: #9fb1c2;
  --color-divider: rgba(237, 243, 247, .10); --as-line-strong: rgba(237, 243, 247, .20);
  /* Same brand colour as day mode for buttons / selected items, so both themes match. */
  --as-ink: var(--as-brand-btn); --as-on-ink: #ffffff; --as-logo-plate: transparent;
  --color-accent: var(--as-brand-btn); --color-accent-100: #1a2236; --color-accent-800: #9db8f8;
  --af-blue: #6fb7ea; --af-blue-strong: #0b6aa8; --af-green-text: var(--color-accent-800); --af-navy: #071422; --af-green-soft: var(--color-accent-100); --af-blue-soft: #0f2a40;
  --as-stripe: rgba(237, 243, 247, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
  --shadow-lg: 0 0 0 1px rgba(237, 243, 247, .06), 0 30px 70px rgba(0, 0, 0, .55);
}

html, body { margin: 0; background: var(--color-bg); }

/* Shared building blocks of the "1·2·3 Hexagon" design (used by the page templates) */
[data-af-wrap] { width: 100%; max-width: var(--af-wrap); margin: 0 auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); box-sizing: border-box; }
[data-af-sec] { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
[data-af-kicker] { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--af-green-text); }
[data-af-kicker] { max-width: 100%; white-space: normal; line-height: 1.35; }
[data-af-kicker]::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--as-brand); clip-path: var(--af-hex); }
[data-af-hexnum] { clip-path: var(--af-hex); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
[data-af-card] { position: relative; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
[data-af-card]::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--af-edge, var(--as-brand)); }
[data-af-btn] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); box-sizing: border-box; }
@media (max-width: 600px) { [data-af-btn] { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; max-width: 100%; } }
[data-af-btn="primary"] { background: var(--as-ink); color: var(--as-on-ink); border: 0; }
[data-af-btn="primary"]:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--as-ink) 35%, transparent); transform: translateY(-1px); opacity: 1; }
[data-af-btn="ghost"] { background: transparent; color: var(--color-text); border: 2px solid var(--af-blue); }
[data-af-btn="ghost"]:hover { background: var(--af-blue-soft); opacity: 1; }
[data-af-btn="light"] { background: #ffffff; color: #0b2a4a; border: 0; }
[data-af-rule] { height: 3px; background: linear-gradient(90deg, var(--af-blue-strong) 0%, var(--af-blue-strong) 38%, var(--as-brand) 62%, var(--as-brand) 100%); }
[data-af-tab] { position: relative; }
[data-af-tab]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--as-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
[data-af-tab]:hover::after, [data-af-tab][aria-current="page"]::after { transform: scaleX(1); }
[data-site] a:focus-visible, [data-site] button:focus-visible, [data-site] select:focus-visible, [data-site] input:focus-visible, [data-site] textarea:focus-visible { outline: 3px solid var(--af-blue); outline-offset: 2px; }
[data-theme="dark"] [data-logo-light] { display: none !important; }
[data-theme="light"] [data-logo-dark], :root:not([data-theme]) [data-logo-dark] { display: none !important; }
details[data-af-faq] > summary { list-style: none; cursor: pointer; }
details[data-af-faq] > summary::-webkit-details-marker { display: none; }
details[data-af-faq] > summary [data-af-plus] { transition: transform .25s var(--ease); }
details[data-af-faq][open] > summary [data-af-plus] { transform: rotate(45deg); }

[data-skip-link] { position: fixed; left: 12px; top: 12px; z-index: 4000; transform: translateY(-160%); padding: 12px 16px; border-radius: 10px; background: var(--as-ink); color: var(--as-on-ink); font: 700 14px/1 var(--font-body); text-decoration: none; transition: transform .18s var(--ease); }
[data-skip-link]:focus { transform: translateY(0); outline: 3px solid var(--color-text); outline-offset: 3px; }

/* Smooth page-to-page transitions (cross-document View Transitions — Chrome/Edge/Safari 18+; others navigate normally) */
/* cross-document view transitions disabled — page fade is handled in theme.js + the server shell (prevents multiple flashes) */
::view-transition-old(root) { animation: as-vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: as-vt-in .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes as-vt-out { to { opacity: 0; transform: translateY(-10px) scale(.995); } }
@keyframes as-vt-in { from { opacity: 0; transform: translateY(16px); } }
header, [data-site-header] { view-transition-name: as-header; }
::view-transition-group(as-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } [data-af-btn] { transition: none; } }
html { background: var(--color-bg); }

/* Native selects: themed dropdown lists (dark mode was white-on-white) */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
select option, select optgroup { background-color: var(--color-surface); color: var(--color-text); }

/* Header gets smaller once the page is scrolled (html.as-scrolled is set by motion.js) — desktop bar only */
@media (min-width: 892px) {
  header[data-keep] [data-af-wrap] { transition: padding .25s var(--ease); }
  html.as-scrolled header[data-keep] [data-af-wrap] { padding-top: 4px !important; padding-bottom: 4px !important; }
  html.as-scrolled header[data-keep] [data-af-wrap] > div:first-child { min-height: 50px !important; }
  html.as-scrolled header[data-keep] a[aria-label] > img { height: 30px !important; }
}

/* First-paint shell (engine page-shell.js) always loads logo.webp: in the dark theme show the white-text logo there too */
#as-shell:not(.lt) .in img { content: url(/assets/brand/logo-dark.webp); }

/* ===== Social media: popup player, hero video card, video cards, icon rows ===== */
/* popup player (public/social-player.js) */
.af-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(80% 60% at 50% 40%, rgba(11,42,74,.86), rgba(3,10,18,.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: af-fade .2s ease; }
.af-modal__box { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(420px, 100%); }
.af-modal__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: calc(100vh - 128px); margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; background: #05080b; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px -20px rgba(0,0,0,.8); }
.af-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.af-modal__close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 44px; height: 44px; border-radius: var(--r-md); border: 0; display: flex; align-items: center; justify-content: center; background: #fff; color: #0b2a4a; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.5); transition: background .2s, color .2s, transform .2s; }
.af-modal__close:hover, .af-modal__close:focus-visible { background: var(--as-ink); color: #fff; transform: scale(1.06); outline: 0; }
.af-modal__bar { display: flex; align-items: center; gap: 10px; color: #fff; padding: 0 4px; }
.af-modal__cap { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-modal__link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-md); border: 2px solid rgba(255,255,255,.4); color: #fff; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background .2s, border-color .2s; }
.af-modal__link:hover, .af-modal__link:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; outline: 0; opacity: 1; }
@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) { .af-modal { padding: 12px; } .af-modal__close { top: -10px; right: -4px; } .af-modal__bar { flex-wrap: wrap; } .af-modal__frame { max-height: calc(100vh - 150px); } }
@media (prefers-reduced-motion: reduce) { .af-modal, .af-modal__close { animation: none; transition: none; } }

/* hero: the latest TikTok video as a portrait card over the inventory photo (Home) */
.af-herovis { position: relative; min-width: 0; padding-bottom: 30px; }
.af-hv { position: absolute; z-index: 3; right: 5%; bottom: 0; width: clamp(210px, 42%, 300px); aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--af-navy); border: 3px solid var(--color-surface); box-shadow: var(--shadow-lg); color: #fff; text-decoration: none; display: block; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.af-hv:hover { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(11,42,74,.35); opacity: 1; }
.af-hv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; }
.af-hv__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,42,74,.55) 0%, rgba(11,42,74,0) 28%, rgba(11,42,74,0) 55%, rgba(11,42,74,.88) 100%); }
.af-hv__tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(11,42,74,.82); font-size: 12px; font-weight: 800; letter-spacing: .01em; width: fit-content; max-width: calc(100% - 20px); }
.af-hv__tag svg { flex: none; }
.af-hv__play { position: absolute; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.9); color: #0b2a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s var(--ease), background .3s; }
a.af-hv:hover .af-hv__play { transform: scale(1.1); background: #fff; }
.af-hv__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.af-hv__cap b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.af-hv__cap span { font-size: 12.5px; opacity: .9; font-weight: 600; }
.af-hv--on iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #05080b; }
.af-hv__ext { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); background: rgba(11,42,74,.85); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; }
[data-hero-car] { right: auto !important; left: 14px !important; border-radius: var(--r-sm) !important; }
@media (max-width: 819px) { .af-herovis { padding-bottom: 20px; } .af-hv { width: clamp(132px, 40%, 190px); right: 4%; border-width: 2px; } .af-hv__play { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .af-hv__tag { font-size: 10.5px; padding: 4px 7px; left: 6px; top: 6px; } .af-hv__cap b { font-size: 12.5px; } .af-hv__cap span { display: none; } .af-hv--on { width: clamp(200px, 62%, 280px); } }

/* video cards (Home section, Social page) */
button.af-vcard { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; color: #fff; }
.af-vcard { position: relative; display: block; aspect-ratio: 9 / 14; border-radius: var(--r-md); overflow: hidden; background: var(--af-navy); box-shadow: var(--shadow-sm); isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.af-vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.af-vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; transition: transform .5s var(--ease); }
.af-vcard:hover img { transform: scale(1.05); }
.af-vcard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,42,74,0) 45%, rgba(11,42,74,.88) 100%); }
.af-vcard__play { position: absolute; left: 50%; top: 46%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.9); color: #0b2a4a; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.af-vcard:hover .af-vcard__play { transform: scale(1.1); }
.af-vcard__body { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.af-vcard__title { font-size: 15px; font-weight: 800; line-height: 1.25; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-vcard__watch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; opacity: .92; }
.af-vcard:focus-visible { outline: 3px solid var(--af-blue); outline-offset: 3px; }

/* social icon rows (header, footer, Home section) */
.af-soc { display: inline-flex; align-items: center; gap: 8px; }
.af-soc a { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); text-decoration: none; transition: transform .2s var(--ease), background .2s, box-shadow .2s; flex: none; }
.af-soc a:hover { transform: translateY(-2px); opacity: 1; }
.af-soc__tt { width: 44px; height: 44px; background: var(--as-ink); color: #fff; box-shadow: 0 0 0 2px var(--as-brand); }
.af-soc__tt:hover { box-shadow: 0 0 0 2px var(--as-brand), 0 8px 20px color-mix(in srgb, var(--as-ink) 40%, transparent); }
.af-soc__o { width: 40px; height: 40px; background: var(--as-surface-2); color: var(--color-text); }
.af-soc__o:hover { background: var(--af-green-soft); color: var(--af-green-text); }
.af-soc__tt svg, .af-soc__o svg { display: block; }

.af-soc__pair { display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: var(--r-sm); background: var(--as-surface-2); }
.af-soc__pair a { width: 34px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--color-text); text-decoration: none; transition: background .2s, color .2s; }
.af-soc__pair a:hover { background: var(--af-green-soft); color: var(--af-green-text); opacity: 1; }

/* hero value line: on narrow phones the rotating sentence wraps instead of being cut */
@media (max-width: 560px) {
  [data-hero-rot] > span:last-child { height: 38px !important; width: min(100%, calc(100vw - 80px)) !important; }
  [data-rot-item] { white-space: normal !important; text-overflow: clip !important; line-height: 1.25; display: flex; align-items: center; }
}

/* social icon buttons also work outside the .af-soc row (phone header bar) */
.af-soc__tt, .af-soc__o { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); text-decoration: none; flex: none; }

/* hero: TikTok wall (latest video large, two newest videos, the account) */
.af-tthero { position: relative; width: 100%; max-width: 540px; margin-left: auto; display: flex; flex-direction: column; gap: 14px; isolation: isolate; }
.af-tthero__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; }
.af-tthero .af-hv { position: relative; right: auto; bottom: auto; width: 100%; grid-row: 1 / span 2; border: 0; box-shadow: var(--shadow-lg); }
.af-ttside { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; position: relative; display: block; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--af-navy); color: #fff; box-shadow: var(--shadow-md); isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.af-ttside:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.af-ttside:focus-visible { outline: 3px solid var(--af-blue); outline-offset: 3px; }
.af-ttside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; transition: transform .5s var(--ease); }
.af-ttside:hover img { transform: scale(1.05); }
.af-ttside__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,42,74,0) 40%, rgba(11,42,74,.9) 100%); }
.af-ttside__play { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0b2a4a; display: flex; align-items: center; justify-content: center; }
.af-ttside__title { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 13px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-tthero__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-lg); background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); }
.af-tthero__handle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.af-tthero__ico { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--as-ink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--as-brand); }
.af-tthero__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.af-tthero__who b { font-size: 15px; font-weight: 800; color: var(--color-text); }
.af-tthero__who small { font-size: 12.5px; color: var(--as-muted); font-weight: 600; }
@media (max-width: 1023px) { .af-tthero { max-width: 560px; margin: 0 auto; } }
@media (max-width: 560px) { .af-tthero__grid, .af-tthero { gap: 10px; } .af-ttside__title { font-size: 12px; } .af-ttside__play { width: 28px; height: 28px; top: 8px; right: 8px; } .af-tthero .af-hv__tag { font-size: 11px; } .af-tthero .af-hv__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; } }

/* popup: Instagram's embed page carries its own header and caption, so it gets a slightly taller frame */
.af-modal__frame--instagram { aspect-ratio: 9 / 17.5; background: #fff; }

/* Social page: platform kicker, quick links, chip on video cards */
.af-plat { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--af-green-text); }
.af-plat svg { flex: none; }
.af-plat--fb { color: var(--af-blue); } .af-plat--ig { color: var(--af-blue); }
.af-platnav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--as-line-strong); background: var(--color-surface); color: var(--color-text); font-size: 14.5px; font-weight: 800; text-decoration: none; transition: border-color .2s, color .2s; }
.af-platnav span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--as-surface-2); font-size: 12px; color: var(--as-muted); }
.af-platnav:hover { border-color: var(--af-blue); color: var(--af-blue); opacity: 1; }
.af-platnav--tt { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.af-platnav--tt span { background: rgba(255,255,255,.18); color: #fff; }
.af-platnav--tt:hover { color: #fff; border-color: var(--as-brand); }
.af-vcard__chip { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--r-xs); background: rgba(5,12,20,.62); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Header TikTok button: a short, friendly wiggle and one soft ring every 8 s, 5 times per page view, then it rests.
   Stops on hover / focus, never runs with prefers-reduced-motion. Transform and opacity only: nothing moves around it. */
.af-soc__tt[data-attn] { position: relative; transform-origin: 50% 60%; animation: af-wiggle 8s ease-in-out 2.5s 5; }
.af-soc__tt[data-attn]::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--as-brand); opacity: 0; pointer-events: none; animation: af-ring 8s ease-out 2.5s 5; }
.af-soc__tt[data-attn]:hover, .af-soc__tt[data-attn]:focus-visible, .af-soc__tt[data-attn]:hover::after, .af-soc__tt[data-attn]:focus-visible::after { animation-play-state: paused; }
@keyframes af-wiggle { 0%, 17%, 100% { transform: none; } 2% { transform: rotate(-13deg) scale(1.1); } 5% { transform: rotate(11deg) scale(1.1); } 8% { transform: rotate(-8deg) scale(1.06); } 11% { transform: rotate(5deg) scale(1.03); } 14% { transform: rotate(-2deg); } }
@keyframes af-ring { 0% { opacity: .9; transform: scale(1); } 16% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .af-soc__tt[data-attn], .af-soc__tt[data-attn]::after { animation: none; } }

/* Facebook popup: our Share button over the player's own one (which does nothing in the popup) */
.af-modal__frame .af-fbshare { position: absolute; top: 8px; right: 6px; z-index: 2; width: 76px; height: 78px; padding: 8px 0 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 16px; background: rgba(11,42,74,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 800 12.5px/1.1 var(--font-body, system-ui, sans-serif); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: background .2s, transform .2s; }
.af-modal__frame .af-fbshare:hover, .af-modal__frame .af-fbshare:focus-visible { background: var(--as-ink); outline: 0; transform: scale(1.04); }
.af-modal__frame .af-fbshare:focus-visible { box-shadow: 0 0 0 3px #fff; }
.af-modal__frame .af-fbshare--done { background: var(--as-ink); }
.af-modal__frame .af-fbshare span { display: block; max-width: 70px; text-align: center; white-space: normal; }
@media (max-width: 560px) { .af-modal__frame .af-fbshare { top: 6px; right: 4px; width: 70px; height: 72px; } }

/* Facebook player (JS SDK) inside the video popup: fills the frame like the TikTok one; "sound" button when the browser blocks the sound */
.af-modal__frame .af-fbhost { position: absolute; inset: 0; background: #000; }
.af-modal__frame .fb-video, .af-modal__frame .fb-video > span, .af-modal__frame .fb-video iframe { width: 100% !important; height: 100% !important; display: block; }
.af-modal__frame .af-fbsound { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-md); background: var(--as-ink); color: #fff; font: 800 14px/1 var(--font-body, system-ui, sans-serif); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.af-modal__frame .af-fbsound:hover, .af-modal__frame .af-fbsound:focus-visible { background: #0b2a4a; outline: 0; box-shadow: 0 0 0 3px #fff, 0 8px 24px rgba(0,0,0,.5); }