/* SVGallery · галерија по booking.com (11.09.2026) — САМО .svgal-* правила.
   Пренесено од /booking/booking-gallery.css. booking.css НЕ смее да се вчита на „/"
   (глобални dialog{}, button{min-height}, *{box-sizing}), затоа секое правило тука е
   под .svgal / .svgal-*, а бојата доаѓа од брендот (--brand-*) со резерва.
   Телефон прво: цел екран (100dvh); од 640 px и 520 px висина — панел со раб. */

html.svgal-lock,
html.svgal-lock body { overflow: hidden !important; }

dialog.svgal {
  position: fixed; inset: 0; z-index: 2147483000;
  box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0;
  width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  overflow: hidden; outline: none; box-shadow: none;
  background: var(--brand-surface, #fff); color: var(--brand-text, #1a1a2e);
  font-family: inherit; font-size: 16px; line-height: 1.4; text-align: left;
}
dialog.svgal:not([open]) { display: none; }
dialog.svgal[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
dialog.svgal::backdrop { background: rgba(9, 13, 24, .88); }
.svgal *, .svgal *::before, .svgal *::after { box-sizing: border-box; }
.svgal [hidden] { display: none !important; }
.svgal button {
  font: inherit; color: inherit; margin: 0; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.svgal button:focus-visible { outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: 2px; }

/* ── Заглавје: име + ×, под нив бројач + „Сите фотографии" ─────────────────── */
.svgal .svgal-head {
  grid-row: 1; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title close" "count toggle";
  align-items: center; gap: 4px 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  background: var(--brand-surface, #fff);
}
.svgal .svgal-title {
  grid-area: title; margin: 0;
  font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--brand-text, #1a1a2e);
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.svgal .svgal-counter {
  grid-area: count; font-size: 14px; font-weight: 600;
  color: var(--brand-text-muted, #4b5563); font-variant-numeric: tabular-nums;
}
.svgal .svgal-close {
  grid-area: close; justify-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; padding: 0 0 2px;
  border: 0; border-radius: 50%; background: #eef1f5; color: var(--brand-text, #1a1a2e);
  font-size: 28px; line-height: 1;
}
.svgal .svgal-close:hover { background: #e2e7ee; }
.svgal .svgal-toggle {
  grid-area: toggle; justify-self: end;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .18)); border-radius: 10px;
  background: var(--brand-surface, #fff); color: var(--brand-accent-dark, #c25700);
  font-size: 14px; font-weight: 700; line-height: 1.2;
}
.svgal .svgal-toggle:hover,
.svgal .svgal-toggle[aria-pressed="true"] {
  border-color: var(--brand-accent, #ff7300);
  background: rgba(var(--brand-accent-rgb, 255, 115, 0), .08);
}

/* ── Голема фотографија ─────────────────────────────────────────────────────── */
.svgal .svgal-stage {
  grid-row: 2; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0e1320;
  touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
}
.svgal.svgal-single .svgal-stage { grid-row: 2 / 4; }
.svgal .svgal-img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .18s ease;
}
.svgal .svgal-stage[aria-busy="true"] .svgal-img { opacity: .45; }
.svgal .svgal-status {
  position: absolute; top: 50%; left: 64px; right: 64px; transform: translateY(-50%);
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center;
  pointer-events: none;
}
.svgal .svgal-status:empty { display: none; }
.svgal .svgal-nav {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 56px; min-width: 44px; padding: 0 0 4px;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(16, 24, 40, .56);
  color: #fff; font-size: 38px; line-height: 1;
  transition: background-color .16s ease, box-shadow .16s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.svgal .svgal-prev { left: 8px; }
.svgal .svgal-next { right: 8px; }
.svgal .svgal-nav:hover { background: rgba(16, 24, 40, .8); }
.svgal .svgal-nav:disabled { opacity: .35; cursor: default; }

/* ── Лента со сличици ───────────────────────────────────────────────────────── */
.svgal .svgal-thumbs {
  grid-row: 3; position: relative;
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 10px 12px; scrollbar-width: thin;
  border-top: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  background: var(--brand-surface, #fff);
}
.svgal .svgal-thumb {
  position: relative; flex: 0 0 80px; width: 80px; height: 60px; padding: 0;
  border: 3px solid transparent; border-radius: 8px; background: #e9edf2; overflow: hidden;
}
.svgal .svgal-thumb[aria-current="true"] { border-color: var(--brand-accent, #ff7300); }
.svgal .svgal-thumb img,
.svgal .svgal-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svgal .svgal-num {
  position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 4px;
  background: rgba(16, 24, 40, .75); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 16px;
}

/* ── „Сите фотографии" ──────────────────────────────────────────────────────── */
/* 12.09.2026 (мерено: Alia Palace 58 / Janelas do Mar 107 фотографии): решетката е во
   контејнер со ОДРЕДЕНА висина (overflow-y: auto), а плочките се `overflow: hidden`, па
   нивниот автоматски минимум е 0 — `auto`-редовите се стискаа на 6–49 px, плочките со
   aspect-ratio се преклопуваа (260–1209 пара), допир на плочка 3 отвораше фотографија 7–9
   и прегледот не можеше да се лизга. `grid-auto-rows: max-content` = редот е висок
   колку плочката; контејнерот лизга. Праг беше ≥12 плочки на 390/320, ≥24 на 1440. */
.svgal .svgal-overview {
  grid-row: 2 / 4; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start;
  gap: 8px; padding: 12px; background: #f4f6f8;
}
.svgal .svgal-tile {
  position: relative; min-width: 0; aspect-ratio: 4 / 3; padding: 0;
  border: 3px solid transparent; border-radius: 10px; background: #e2e7ee; overflow: hidden;
}
.svgal .svgal-tile[aria-current="true"] { border-color: var(--brand-accent, #ff7300); }
.svgal .svgal-tile .svgal-num { right: 6px; bottom: 6px; font-size: 12px; line-height: 18px; }
.svgal .svgal-help {
  grid-row: 4; margin: 0; padding: 6px 12px 8px;
  font-size: 12px; line-height: 1.35; text-align: center;
  color: var(--brand-text-muted, #4b5563); background: var(--brand-surface, #fff);
}

/* Фотографија што не се вчитала: не се крие тивко, се кажува. */
.svgal-unavail { position: relative; }
.svgal-unavail::before {
  content: "Фотографијата не е достапна";
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; padding: 6px;
  background: #e9edf2; color: #4b5563;
  font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center;
}

@media (min-width: 640px) and (min-height: 520px) {
  dialog.svgal {
    inset: 20px; margin: auto; border-radius: 16px;
    width: calc(100% - 40px); max-width: 1440px;
    height: calc(100vh - 40px); height: calc(100dvh - 40px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  }
  .svgal .svgal-head {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-areas: "title toggle close" "count toggle close";
    gap: 2px 16px; padding: 12px 16px 12px 24px;
  }
  .svgal .svgal-title { font-size: 22px; -webkit-line-clamp: 1; }
  .svgal .svgal-nav { width: 52px; height: 64px; }
  .svgal .svgal-prev { left: 16px; }
  .svgal .svgal-next { right: 16px; }
  .svgal .svgal-thumbs { padding: 10px 24px; }
  .svgal .svgal-thumb { flex-basis: 96px; width: 96px; height: 68px; }
  .svgal .svgal-overview { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 20px 24px; }
}
/* Телефон легнат: заглавјето во еден ред, пониски сличици. */
@media (max-height: 519px) and (orientation: landscape) {
  .svgal .svgal-head {
    grid-template-columns: minmax(0, 1fr) auto auto 44px;
    grid-template-areas: "title count toggle close"; padding: 4px 8px 4px 14px;
  }
  .svgal .svgal-title { font-size: 15px; -webkit-line-clamp: 1; }
  .svgal .svgal-thumbs { padding: 6px 10px; }
  .svgal .svgal-thumb { flex-basis: 64px; width: 64px; height: 46px; }
  .svgal .svgal-help { display: none; }
}

/* ═══ Мозаик во деталите (јазол на повикувачот, на пр. svrail) ══════════════
   Телефон: една голема + две мали (3); поширок екран: 1 голема + 4 мали (5).
   Специфичност (0,2,0) — над `.sv-hotel-dialog-box button` (0,1,1) од svrail.css. */
.svgal-mosaic {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 190px; grid-auto-rows: 104px; gap: 6px;
  margin: 0 0 16px; border-radius: 12px; overflow: hidden;
}
.svgal-mosaic .svgal-mtile {
  position: relative; display: block; width: auto; min-width: 0; height: auto; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #e9edf2; overflow: hidden; cursor: zoom-in; font: inherit;
}
.svgal-mosaic .svgal-mtile:first-child { grid-column: 1 / -1; }
.svgal-mosaic .svgal-mtile:nth-child(n+4) { display: none; }
.svgal-mosaic[data-count="2"] .svgal-mtile:nth-child(2) { grid-column: 1 / -1; }
.svgal-mosaic .svgal-mtile img {
  display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .15s ease;
}
.svgal-mosaic .svgal-mtile:hover img { filter: brightness(.9); }
.svgal-mosaic .svgal-mtile:focus-visible { outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: -3px; }
.svgal-mosaic .svgal-unavail::before { font-size: 13px; }
.svgal-mcount {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px);
  padding: 2px 7px; border-radius: 999px; background: rgba(16, 24, 40, .6); color: #fff;
  font-size: 11px; font-weight: 500; line-height: 18px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.svgal-mcount-l { display: none; }
@media (min-width: 640px) {
  .svgal-mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 140px 140px; grid-auto-rows: 0; }
  .svgal-mosaic .svgal-mtile:nth-child(n+4) { display: block; }
  .svgal-mosaic .svgal-mtile:first-child { grid-column: 1; grid-row: 1 / 3; }
  .svgal-mosaic[data-count="1"] .svgal-mtile:first-child { grid-column: 1 / -1; }
  .svgal-mosaic[data-count="2"] .svgal-mtile:nth-child(2) { grid-column: 2 / 4; grid-row: 1 / 3; }
  .svgal-mosaic[data-count="3"] .svgal-mtile:not(:first-child) { grid-column: 2 / 4; }
  .svgal-mosaic[data-count="4"] .svgal-mtile:last-child { grid-column: 2 / 4; }
  .svgal-mcount-s { display: none; }
  .svgal-mcount-l { display: block; }
}

/* ── „Прикажи на мапа" во деталите ─────────────────────────────────────────── */
.svgal-loc { margin: 4px 0 16px; }
.svgal-loc .svgal-mapbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--brand-accent, #ff7300); border-radius: 10px;
  background: var(--brand-surface, #fff); color: var(--brand-accent-dark, #c25700);
  font: inherit; font-weight: 700; cursor: pointer;
}
.svgal-loc .svgal-mapbtn:hover { background: rgba(var(--brand-accent-rgb, 255, 115, 0), .08); }
.svgal-loc .svgal-mapbtn:focus-visible { outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: 2px; }
.svgal-loc .svgal-locnote { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #92400e; }

/* ═══ LAB „/": НИВНИТЕ картички (React) со ≥2 фотографии ═══════════════════
   Атрибутот `data-sv-photos` го става svgallery-native.js — ниту еден наш јазол
   во нивното дрво, само атрибут + ::after (лекцијата од resultsbar, 31.08).
   Значката е `pointer-events: none`, па кликот оди на самата фотографија.
   Во редот (≥560 px на svlist) bookinglook.css ѝ дава на картичката padding
   14px, па значката се поместува за да остане врз фотографијата. */
.sv-hotel-card[data-sv-photos] { position: relative; }
.sv-hotel-card[data-sv-photos] > img:first-child { cursor: zoom-in; }
.sv-hotel-card[data-sv-photos] > img:first-child:focus-visible {
  outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: -3px;
}
/* Бројачот е ::after (атрибут `data-svgal-pos`), значката од 15.09 не се враќа. */
.sv-hotel-card[data-sv-photos]::after { content: none; }
.sv-rail-card .sv-rail-photo-count { display: none !important; }
/* MUI „Детали": главната фотографија отвора галерија (svgallery-native.js). */
.sv-details-dialog .MuiDialog-paper > div > img:first-child { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .svgal .svgal-img, .svgal-mosaic .svgal-mtile img { transition: none; }
}

/* ═══ Фотографии во картичката (17.09.2026) ═══════════════════════════════
   Андреј 17.09 13:33 (дословно):
   „sLIKITE PONEZNI STRLKI SO NE SECKAAT PRI DVIZENJE I ISTO TAKA od telefon ne treba strelku se menuvasliki so scroll levo desno a indikacija e brojka na kjos“
   Компјутер (глувче, >640 px): бел круг со SVG стрелка, се појавува на
   hover/фокус и не мрда при промена. Телефон или допир: нема стрелки — лента со
   scroll-snap под прстот, бројач n/N во аголот. */

/* НАШИТЕ (svrail): лентата е последно дете на картичката, точно над рамката. */
.sv-rail-card[data-svgal-cc] { position: relative; }
.svgal-cc {
  position: absolute; left: 0; top: 0; z-index: 1;
  box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
  pointer-events: none; font-family: inherit;
}
.svgal-cc-strip {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-wrap: nowrap; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;          /* страницата не бега настрана */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  pointer-events: auto; cursor: zoom-in; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.svgal-cc-strip::-webkit-scrollbar { display: none; }
/* Под две употребливи фотографии лентата се тргнува: кликот оди на рамката. */
.svgal-cc[hidden] { display: none !important; }
/* Додека стрелките ја движат лентата (rAF-пружина), snap е исклучен — инаку секое
   поставување на scrollLeft скока на најблиската фотографија. */
.svgal-cc[data-anim] > .svgal-cc-strip { scroll-snap-type: none; }
.svgal-cc-slide {
  position: relative; box-sizing: border-box;
  flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; margin: 0; padding: 0;
  overflow: hidden; background: #e9edf2;
  scroll-snap-align: start; scroll-snap-stop: always;
}
/* Првата е истата фотографија што рамката веќе ја покажува: проѕирна, без сиво. */
.svgal-cc-slide:first-child { background: transparent; }
.svgal-cc-slide > img {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0;
  object-fit: cover; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.svgal-cc[aria-busy="true"] .svgal-arrow { cursor: progress; }
/* Тастатура на рамката (под лентата): прстенот се црта на лентата. */
.sv-rail-card:has(> .sv-rail-img:focus-visible) > .svgal-cc {
  outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: -3px;
}

/* Бројач „n/N" — во аголот, од атрибут (не текст во картичката). */
.svgal-cc::after,
.sv-hotel-card[data-svgal-pos]::after {
  position: absolute; z-index: 2; box-sizing: border-box;
  min-width: 36px; padding: 0 8px; border-radius: 999px;
  background: rgba(16, 24, 40, .62); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 600; line-height: 22px;
  letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums;
  white-space: nowrap; pointer-events: none;
}
.svgal-cc::after { content: attr(data-pos); right: 8px; bottom: 8px; }
.svgal-cc[data-single]::after { content: none; }
.sv-hotel-card[data-svgal-pos]::after {
  content: attr(data-svgal-pos);
  right: calc(var(--svgal-r, 0px) + 8px); bottom: calc(var(--svgal-b, 0px) + 8px);
}
/* НИВНАТА слика: повлекување лево/десно е наше, вертикалното лизгање е на прелистувачот. */
.sv-hotel-card[data-sv-photos] > img:first-child { touch-action: pan-y pinch-zoom; }
.sv-hotel-card:not(.sv-rail-card) > img[data-svgal-broken]:first-child { opacity: 0; }

/* Скршена рамка кај нас: илустрација наместо икона и alt-текст. */
.sv-rail-card > .sv-rail-img[data-svgal-broken] {
  background: #e9edf2 url("sv-noimg.svg") center / cover no-repeat;
}
.sv-rail-card > .sv-rail-img[data-svgal-broken] > img { visibility: hidden; }

/* ── Стрелки: невидливи и некликливи надвор од глувче ─────────────────────── */
.svgal-arrow {
  position: absolute; top: 50%; z-index: 3;
  display: none; align-items: center; justify-content: center;
  box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: -22px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; color: #1f2937;
  font: inherit; line-height: 0; text-transform: none; letter-spacing: normal;
  cursor: pointer; pointer-events: auto; opacity: 0;
  transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.svgal-arrow-prev { left: 4px; }
.svgal-arrow-next { right: 4px; }
.svgal-arrow-disc {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: #1f2937;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .16), 0 2px 10px rgba(16, 24, 40, .18);
  transition: background-color .15s ease, box-shadow .15s ease;
  pointer-events: none;
}
.svgal-arrow svg { display: block; width: 18px; height: 18px; }
.svgal-arrow:hover .svgal-arrow-disc {
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .2), 0 4px 14px rgba(16, 24, 40, .24);
}
.svgal-arrow:focus { outline: none; }
.sv-rail-card .svgal-arrow:focus-visible,
.svgal-card-controls .svgal-arrow:focus-visible { outline: none; }   /* еден прстен: на кругот, не и на копчето */
.svgal-arrow:focus-visible .svgal-arrow-disc {
  outline: 3px solid var(--brand-accent-dark, #c25700); outline-offset: 2px;
}
.svgal-cc[data-single] .svgal-arrow { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .svgal-arrow { display: flex; }
  .sv-rail-card:hover .svgal-arrow,
  .svgal-cc[data-hot] .svgal-arrow,
  .svgal-cc:focus-within .svgal-arrow,
  .svgal-card-controls[data-hot] .svgal-arrow,
  .svgal-card-controls:focus-within .svgal-arrow { opacity: 1; }
  /* Крај на низата. Пред првото листање стрелката ја нема (кликот е на фотографијата).
     По листање останува бледа и КЛИКЛИВА: брзите кликови по последната фотографија
     паѓаа на лентата и ја отвораа големата галерија (мерено 17.09, 16/16 → галерија). */
  .svgal-arrow[data-end] { opacity: 0 !important; pointer-events: none; }
  [data-nav] > .svgal-arrow[data-end] { pointer-events: auto; cursor: default; }
  .sv-rail-card:hover [data-nav] > .svgal-arrow[data-end],
  [data-nav][data-hot] > .svgal-arrow[data-end],
  [data-nav]:focus-within > .svgal-arrow[data-end] { opacity: .4 !important; }
  .svgal-arrow[data-end]:focus-visible { opacity: .45 !important; }
  .svgal-arrow[data-end]:hover .svgal-arrow-disc {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .16), 0 2px 10px rgba(16, 24, 40, .18);
  }
}

/* НИВНИТЕ (React): стрелките живеат во слојот на body (само со глувче).
   17.09: absolute во координати на документот — се лизга со страницата во истиот
   кадар (fixed-слојот доцнеше 60 px на секој чекор од тркалцето). Залепените ленти
   се во понизок stacking context, па JS ја крие групата пред да стигне до нив. */
.svgal-card-layer {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 80;
  pointer-events: none; font-family: inherit;
}
.svgal-card-layer [hidden] { display: none !important; }
.svgal-card-controls { position: absolute; pointer-events: none; overflow: hidden; }
.svgal-live {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .svgal .svgal-nav, .svgal-arrow, .svgal-arrow-disc { transition: none; }
}