/* rotating deals bar (ax-dealbar.js, owner 2026-10-08): one slim line under the YouTube bar, same panel colours.
   Round E fix (owner 2026-10-10: the bar "on certain window sizes" showed its offers on top of each other): an offer is never squeezed below
   its own width any more. Before, every <li> could shrink to 0 px while its link stayed one unbreakable line, so whenever the bar did not
   rotate (reduced motion, the site's light / low modes, high contrast, a single offer, and the moment before the script runs) all offers were
   painted over each other and the title / labels were cut to a few letters ("OFE..."). Now the bar always shows ONE whole offer on one line:
   rotating = every 5 s (as before); not rotating = the same line without the timer, the dots switch offers by hand; before the script runs =
   the first offer. Inside an offer only the product name may end in an ellipsis (at least 12 characters stay); when the line is still too
   narrow, ax-dealbar.js drops parts in the same order as the narrow-screen rules below (countdown + title, then label, then the name) -
   classes ax-fit-1 / -2 / -3 on the bar.
   Host colours / fonts (ax-settings.css of each site): --ax-deal-bg, --ax-deal-line, --ax-deal-pct, --ax-deal-dot, --ax-deal-focus,
   --ax-title-font; the defaults are speclang.pro's. */
.ax-dealbar { display: flex; align-items: center; justify-content: center; gap: .7rem; min-block-size: 36px; padding: .3rem var(--ax-shell, 1rem);
  background: var(--ax-deal-bg, #0a2230); color: var(--ax-panel-text); font-size: .8rem; line-height: 1.25; border-block-end: 1px solid var(--ax-deal-line, #ffffff1f); }
.ax-dealbar__title { flex: none; color: var(--ax-panel-accent); font-family: var(--ax-title-font, inherit); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ax-dealbar__list { position: relative; display: flex; margin: 0; padding: 0; list-style: none; min-inline-size: 0; overflow: hidden; }
.ax-dealbar__item { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
.ax-dealbar__item ~ .ax-dealbar__item { display: none; }   /* before the script runs: the first offer only (= the first rotation step, no jump) */
.ax-dealbar:is(.is-rotating, .is-static) .ax-dealbar__item { display: none; }
.ax-dealbar:is(.is-rotating, .is-static) .ax-dealbar__item.is-current { display: block; }
.ax-dealbar__item a { display: inline-flex; align-items: baseline; gap: .45rem; max-inline-size: 100%; color: inherit; text-decoration: none; white-space: nowrap; }
.ax-dealbar__item a:is(:hover, :focus-visible) .ax-dealbar__name, .ax-dealbar__item a:is(:hover, :focus-visible) .ax-dealbar__label { text-decoration: underline; }
.ax-dealbar__item a:focus-visible { outline: 2px solid var(--ax-deal-focus, #fff); outline-offset: -2px; }   /* inside the link: the list clips everything outside its box */
.ax-dealbar__item a > * { flex-shrink: 0; }   /* shop, label, percent, countdown and arrow keep their width; only the product name may ellipsize */
.ax-dealbar__item a > .ax-dealbar__name { flex-shrink: 1; }
.ax-dealbar__shop { font-weight: 750; }
.ax-dealbar__label { opacity: .85; }
.ax-dealbar__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.ax-dealbar__name:empty { display: none; }
.ax-dealbar__pct { color: var(--ax-deal-pct, #ffd27a); font-weight: 800; direction: ltr; unicode-bidi: isolate; }   /* "−25%" reads the same in right-to-left editions */
.ax-dealbar time { opacity: .75; font-variant-numeric: tabular-nums; }
.ax-dealbar time:empty { display: none; }
.ax-dealbar__dots { display: inline-flex; flex-shrink: 0; gap: .35rem; }
html[lang="zxx"] .ax-dealbar time { display: none; }
.ax-dealbar__dots[hidden] { display: none; }
.ax-dealbar__dots button { inline-size: 20px; block-size: 20px; min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: 50%;   /* app gives buttons a 44 px minimum: the dots keep a 20 px hit area */
  background: radial-gradient(circle, var(--ax-deal-dot, #ffffff59) 0 4.5px, transparent 5px); cursor: pointer; }
.ax-dealbar__dots button[aria-current="true"] { background: radial-gradient(circle, var(--ax-panel-accent) 0 4.5px, transparent 5px); }
.ax-dealbar__dots button:focus-visible { outline: 2px solid var(--ax-deal-focus, #fff); outline-offset: 0; }
.ax-dealbar.is-rotating .ax-dealbar__item.is-current { animation: ax-dealbar-in .35s ease both; }
@keyframes ax-dealbar-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ax-dealbar__item.is-current { animation: none; } }
@media (max-width: 760px) { .ax-dealbar__title, .ax-dealbar time { display: none; } }
@media (max-width: 480px) { .ax-dealbar { font-size: .74rem; gap: .5rem; } .ax-dealbar__label { display: none; } .ax-dealbar.is-rotating .ax-dealbar__dots { display: none; } }
.ax-dealbar.ax-fit-1 .ax-dealbar__title, .ax-dealbar.ax-fit-1 time { display: none; }
.ax-dealbar.ax-fit-2 .ax-dealbar__label, .ax-dealbar.ax-fit-2.is-rotating .ax-dealbar__dots { display: none; }   /* without rotation the dots stay: they are the way to the other offers */
.ax-dealbar.ax-fit-3 .ax-dealbar__name { display: none; }
.ax-dealbar__item.is-measure { display: block !important; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: max-content; max-inline-size: none; visibility: hidden; animation: none; }