/*
 * Royal — naši globalni override-i (van legacy `style.css`).
 * Namerno se učitava POSLE `style.css`, na KRAJU kaskade: ne dira paritetni
 * redosled dva postojeća stylesheet-a (Vite bundle → style.css), a menja SAMO
 * ono što je ovde eksplicitno navedeno.
 */

/* outline: none na svemu — izričit zahtev: nigde, nikad, fokus-okvir. */
*,
*::before,
*::after,
*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
}

/*
 * Potpis u footer-u (© godina | SEO | naziv): legacy `.mb-2` pregazi `.mb-xl-0`,
 * pa su susedi u redu imali 8px donje margine i naslov (bez margine) je stajao
 * nižu od njih. Na desktopu (red) nema margina; na mobilnom (kolona) ostaju.
 */
@media (min-width: 1200px) {
  .royal-sign > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/*
 * Elementi koji su bili <h1>/<h3>/<h4> a sada su <p> (top bar, naslovi kolona
 * mega menija, „eyebrow" podnaslovi na naslovnoj): zadržavaju težinu i visinu
 * reda koje su imali kao naslovi, da izgled ostane isti.
 */
.royal-h {
  font-weight: 500;
  line-height: 1.2;
}

/* Naslov koji ostaje izgledom običan paragraf (footer kolone: bili <p>). */
.royal-p-look {
  font-weight: inherit;
  line-height: inherit;
}

/* Samo za čitače/pretraživače: vidljiv tekst ne postoji, naslov da. */
.royal-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Polje za pretragu (#keywords) nema MDB „notch" kao selecti pored njega, pa je
 * bilo bez okvira. Isti okvir kao `.select-wrapper .form-notch` (1px #e8e8e8, 4px).
 */
.form-outline > input#keywords.form-control {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

/*
 * Naslovna „Pre i posle" karusel (RoyalHomeGallery). Legacy CSS za strelice i
 * slike karusela vezan je za ID `#multi-carousel-cards` (Dodatne usluge), pa
 * isto važi i za `#multi-carousel-gallery`. Kartica puna širina kolone: bez
 * `width:100%` je `.image-1` (flex dete) skupljen na širinu slike i odseca je.
 */
#multi-carousel-gallery .multi-carousel-item img {
  max-height: unset !important;
}

#multi-carousel-gallery .carousel-control-next,
#multi-carousel-gallery .carousel-control-prev {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
}

#multi-carousel-gallery .carousel-control-prev {
  margin-right: 10px;
}

@media (min-width: 992px) {
  #multi-carousel-gallery {
    margin-left: -12px;
    margin-right: -12px;
  }
}

#multi-carousel-gallery .card-1 .image-1,
#multi-carousel-gallery .card-1 .image-2 {
  width: 100%;
}

#multi-carousel-gallery .card-1 .image-1 > img,
#multi-carousel-gallery .card-1 .image-2 > img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Dugme ispod karusela „Pre i posle": razmak iznad je pola razmaka ispod
 * (padding sekcije: py-5 = 3rem, od lg py-lg-10 = 8rem). `mt-lg-8` iz bundle-a
 * ne daje taj razmak.
 */
.royal-gallery-btn {
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .royal-gallery-btn {
    margin-top: 4rem;
  }
}

/*
 * Bljesak ogromne SVG ikonice: `style-landing.css` se dodaje tek kad se
 * stranica sa bočnim menijem (usluga, grad, pre i posle) mount-uje, pa pri
 * SPA navigaciji ikonice sekcija na trenutak nemaju veličinu. Iste mere kao
 * u style-landing.css — kad on stigne, ništa se ne menja.
 */
.anchor-icon-holder {
  width: 70px;
  height: 70px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.anchor-icon-holder img,
img.anchor-icon {
  max-width: 100%;
  max-height: 100%;
}
.burger-icon {
  width: 45px;
  height: 45px;
}
.burger-icon img {
  max-width: 100%;
  max-height: 100%;
}

/* ---------------------------------------------------------------------------
 * Geo stranica grada (RoyalCityPage): bočni meni sekcija + blokovi.
 * Isti izgled kao meni na stranici usluge, ali bez style-landing.css (koji
 * menja osnovni font cele stranice).
 * ------------------------------------------------------------------------- */
.city-container {
  max-width: 1600px;
}
@media (min-width: 992px) {
  .city-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.city-nav {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
.city-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 12px;
  border-bottom: 1px solid var(--gray, #e6e6e6);
  color: var(--primary) !important;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.2s;
}
.city-nav-link:last-child {
  border-bottom: 0;
}
.city-nav-link:hover {
  background: var(--primary-lighter, #f6f3fb);
}
.city-nav-icon {
  width: 58px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-nav-icon img,
.city-section-icon {
  width: 30px;
  height: 30px;
  filter: url(#royal-filter-primary);
}
.city-nav-link.active {
  background: var(--primary);
  color: var(--white, #fff) !important;
}
.city-nav-link.active .city-nav-icon img {
  filter: brightness(0) invert(1);
}
.city-section {
  scroll-margin-top: 130px;
}
.city-map {
  position: relative;
  padding-top: 56%;
  overflow: hidden;
}
.city-map #city-map {
  position: absolute;
  inset: 0;
}
.city-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2 220px;
  column-gap: 24px;
}
.city-checks li {
  break-inside: avoid;
  padding: 6px 0 6px 26px;
  position: relative;
}
.city-checks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
.city-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray, #e6e6e6);
}
.city-check {
  width: 22px;
  height: 22px;
  filter: url(#royal-filter-slate);
}
.city-why-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.city-team img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.city-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-secondary, inherit);
  text-decoration: none;
}
.city-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* FAQ na gradu: pitanje u boji naslova (MDB ga inače boji u plavo). */
.city-section .accordion-button,
.city-section .accordion-button:not(.collapsed) {
  color: var(--text-secondary) !important;
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Hero „slika levo, tekst desno" (usluga, grad, opština, država, blog članak,
 * dodatna usluga, Naš tim) — SAMO DESKTOP: tekstualni blok je tačno na
 * sredini desne polovine — isti razmak levo i desno, isti gore i dole.
 * Kolona teksta preuzima celu desnu polovinu (prazna kolona-filer se skriva),
 * a legacy pomeraji (ps-xl-12, ms-xxl-5…) unutar nje se poništavaju.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .royal-hero-filler {
    display: none !important;
  }
  .royal-hero-text {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(40px, 6vw, 120px) !important;
  }
  .royal-hero-text > div,
  .royal-hero-text > div > div {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100%;
  }
  .royal-hero-text > div > div {
    align-items: flex-start !important;
  }
}

/*
 * Stranica usluge — sekcije sadržaja (beli/ljubičasti okviri desno od bočnog
 * menija): na DESKTOPU isti unutrašnji razmak na sve četiri strane (70px),
 * da tekst ne stoji uz ivicu okvira. Samo kolona sadržaja (.col-md-9) — hero
 * i traka „Zašto mi" takođe nose `.timeline-section`, pa se ne diraju.
 */
@media (min-width: 992px) {
  .landing .col-md-9 > .timeline-section {
    padding: 70px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Slike u boji svuda. Legacy CSS je slike bojio u sivo (`.grayscale-100`,
 * kartice `.box-gallery-img` u boju tek na hover, YouTube sličica u sivo na
 * hover) — klijent želi originalne boje na svim stranicama.
 * ------------------------------------------------------------------------- */
.grayscale-100,
.box-gallery-img,
.blog-gallery-img,
.box-gallery:hover .box-gallery-img,
.box-gallery:hover .blog-gallery-img,
.video-yt-img,
.video-yt:hover .video-yt-img {
  filter: none !important;
}

/* ---------------------------------------------------------------------------
 * Hero slika (kolona levo od .royal-hero-text) — SAMO DESKTOP: slika uvek
 * popunjava celu visinu i širinu hero sekcije (object-fit: cover), bez obzira
 * na proporcije fajla. Ranije je `.max-h-550` sekao sliku odozdo, a niska
 * slika je ostavljala prazninu. Visina sekcije = max(550px, visina teksta).
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Hero sekcija bez praznine gore/dole — slika ide od header-a do kraja
     sekcije. Naš tim ima `py-6 py-lg-0`, ali legacy `.py-6 !important` iz
     style.css (učitan posle bandla) pregazi `py-lg-0` i ostavi po 56px. */
  section:has(.row > .royal-hero-text) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .row:has(> .royal-hero-text) > .col-lg-6 {
    position: relative;
    align-self: stretch;
    min-height: 550px;
    margin-bottom: 0 !important;
  }
  .row:has(> .royal-hero-text) > .col-lg-6 > div {
    position: absolute;
    inset: 0;
    max-height: none !important;
    overflow: hidden;
  }
  .row:has(> .royal-hero-text) > .col-lg-6 picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .row:has(> .royal-hero-text) > .col-lg-6 img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------------------------------------------------------------------------
 * Početna, MOBILNI hero (≤576px — tu legacy `.carousel-caption` prelazi u
 * statični blok ispod slike): H1 stoji na dnu slike, centriran, beo, preko
 * blagog gradijenta. Slika je kvadrat (visina = 100vw), pa je dno slike
 * tačno na `top: 100vw`. Tekst i dugmad ostaju u bloku ispod slike.
 * ------------------------------------------------------------------------- */
@media (max-width: 576px) {
  #carouselFullScreen .carousel-item > picture img {
    aspect-ratio: 1 / 1;
    height: auto !important;
    object-fit: cover;
  }
  #carouselFullScreen .carousel-caption h1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 100vw;
    transform: translateY(-100%);
    z-index: 2;
    margin: 0 !important;
    padding: 56px 20px 20px;
    text-align: center !important;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* ---------------------------------------------------------------------------
 * Početna, blog — DESKTOP: mreža 2 kolone × 4 reda. Kartica: slika + datum
 * levo, naslov (jedan red, „…") + opis desno; broj redova opisa računa JS
 * (fitBlogExcerpts u index.vue) da opis tačno dođe do dna kartice. Cela
 * kartica je link. Mobilni raspored je poseban blok (d-lg-none) i nije diran.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .home-blog-grid-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px; /* isti razmak između kolona i između redova */
    max-width: 1440px;
    margin: 0 auto;
  }
  /* Zaglavlje sekcije (podnaslov + „Blog") centrirano iznad mreže. */
  .home-blog-head > div {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .home-blog-head p,
  .home-blog-head h2 {
    text-align: center !important;
  }
  .home-blog-card {
    display: grid;
    grid-template-columns: 26% minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    padding: 2rem;
    background: #ffffff1f;
    color: #fff;
    text-decoration: none;
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
  }
  .home-blog-card-media {
    display: flex;
    flex-direction: column;
  }
  .home-blog-card-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .home-blog-card-img picture,
  .home-blog-card-img img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .home-blog-card-img img {
    object-fit: cover;
  }
  /* Datum ispod slike, ista visina reda kao opis; JS ga spušta u ravan sa poslednjim redom opisa. */
  .home-blog-card-date {
    margin-top: 0 !important;
    padding-top: 14px;
    line-height: 26px;
    opacity: .85;
  }
  .home-blog-card-body {
    min-width: 0;
  }
  .home-blog-card-title {
    margin: 0 0 12px !important;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s ease;
  }
  .home-blog-card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font-size: 15px;
    line-height: 26px;
    text-align: justify;
  }
  .home-blog-card-excerpt p,
  .home-blog-card-excerpt h1,
  .home-blog-card-excerpt h2,
  .home-blog-card-excerpt h3,
  .home-blog-card-excerpt h4 {
    display: inline;
    margin: 0;
    font: inherit;
    text-align: justify !important;
  }
  .home-blog-card:hover,
  .home-blog-card:focus-visible {
    background: #ffffff2e;
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(20, 6, 45, .28);
  }
  .home-blog-card:hover .home-blog-card-title,
  .home-blog-card:focus-visible .home-blog-card-title {
    color: #e6d9ff !important;
  }
  .home-blog-card:hover .home-blog-card-date,
  .home-blog-card:focus-visible .home-blog-card-date {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * Početna, „Popularne usluge" — MOBILNI: roze dugmad u dve kolone sa
 * razmakom (ne spojena); neparno poslednje dugme ide na sredinu.
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .home-popular {
    gap: 14px 10px;
    justify-content: center !important;
  }
  .home-popular > li {
    flex: 0 0 calc(50% - 5px);
    width: auto !important;
    margin: 0 !important;
  }
  .home-popular > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-radius: 4px;
    background: var(--pink);
    color: #fff !important;
    text-align: center;
    font-size: 14px !important;
    line-height: 1.25;
  }
  .home-popular > li > a:hover,
  .home-popular > li > a:focus {
    background: #c4365a;
  }
}

/* ---------------------------------------------------------------------------
 * Modal „Postavite pitanje" — leva kolona (desktop). Legacy klase px-lg-9 /
 * ps-lg-7 ne postoje u CSS-u, pa su slika i tekst stajali 16px od ivice.
 * Isti razmak (48px) levo za sliku i tekst, više prostora dole, ujednačen
 * razmak između stavki (telefon, Viber, WhatsApp, adresa, e-mail).
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #postaviPitanjeModal .modal-image-royal {
    padding: 26px 16px 32px 48px !important;
  }
  #postaviPitanjeModal .modal-image-royal img {
    max-width: 390px;
  }
  #postaviPitanjeModal .modal-image-box {
    margin-bottom: 36px !important;
  }
  #postaviPitanjeModal .modal-info-royal {
    padding: 0 24px 48px 48px !important;
  }
  #postaviPitanjeModal .modal-info-royal > * {
    margin-bottom: 18px !important;
  }
  #postaviPitanjeModal .modal-info-royal > p.fs-xl {
    margin-bottom: 22px !important;
  }
  #postaviPitanjeModal .modal-info-royal > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Modal „Postavite pitanje" — forma (desno). Desktop: isti razmak (48px) sa
 * sve četiri strane. Tablet: širi prozor (legacy 500px je bio uzak za dve
 * kolone polja). Telefon: srazmerni razmaci, X uvek vidljiv (fiksiran),
 * polja 16px (iOS inače zumira pri fokusu), dugme pune širine.
 * ------------------------------------------------------------------------- */
/* clip (ne hidden): seče horizontalni višak, a ne kvari „sticky" dugme X. */
#postaviPitanjeModal .modal-content {
  overflow-x: clip;
}
#postaviPitanjeModal .ask-form-royal .form-control,
#postaviPitanjeModal .ask-form-royal textarea {
  scroll-margin-top: 90px;
  scroll-margin-bottom: 140px;
}
#postaviPitanjeModal .iti__country-list {
  max-width: calc(100vw - 48px);
  white-space: normal;
}
@media (min-width: 992px) {
  #postaviPitanjeModal .ask-form-royal {
    padding: 48px !important;
  }
  /* X ostaje u uglu prozora i dok se skroluje (npr. tablet položeno 1024×768). */
  #postaviPitanjeModal .nav-close-button {
    position: sticky !important;
    top: 16px !important;
    right: auto !important;
    display: block;
    margin: 25px 16px -55px auto;
  }
  #postaviPitanjeModal .ask-form-royal > .form-content > .mb-4:first-child {
    padding-right: 48px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  #postaviPitanjeModal .modal-dialog {
    max-width: min(720px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
  }
  #postaviPitanjeModal .ask-form-royal {
    padding: 32px !important;
  }
}
@media (max-width: 991.98px) {
  /* X fiksiran u uglu ekrana — ostaje dostupan dok se forma skroluje. */
  #postaviPitanjeModal .nav-close-button {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  }
  #postaviPitanjeModal .nav-close-button::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  #postaviPitanjeModal .ask-form-royal > .form-content > .mb-4:first-child {
    padding-right: 44px;
  }
  /* 16px — ispod toga iOS zumira stranicu kad se dodirne polje. */
  #postaviPitanjeModal .ask-form-royal .form-control,
  #postaviPitanjeModal .ask-form-royal .select-input,
  #postaviPitanjeModal .ask-form-royal input[type="tel"],
  #postaviPitanjeModal .ask-form-royal textarea {
    font-size: 16px !important;
  }
}
@media (max-width: 575.98px) {
  #postaviPitanjeModal .modal-dialog {
    margin: 10px;
  }
  #postaviPitanjeModal .ask-form-royal {
    padding: 24px 20px 28px !important;
  }
  #postaviPitanjeModal .ask-form-royal .form-group.mt-5 {
    margin-top: 24px !important;
  }
  #postaviPitanjeModal .ask-form-royal button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Početna, blog — MOBILNI karusel (kao „Dodatne usluge"): slika 4:3, ispod
 * dugme na sredini i strelice levo/desno. Na ljubičastoj pozadini strelice
 * su bele sa ljubičastom ikonicom (legacy su ljubičaste i ne bi se videle).
 * ------------------------------------------------------------------------- */
.home-blog-carousel-img {
  aspect-ratio: 4 / 3;
}
.home-blog-carousel-img picture {
  display: block;
  height: 100%;
}
/* MDB: .multi-carousel-item img { max-height: 200px } — slika mora da popuni ceo okvir 4:3 */
.home-blog-carousel .multi-carousel-item .home-blog-carousel-img img {
  max-height: none !important;
  height: 100% !important;
  object-fit: cover;
}
.home-blog-carousel-title {
  text-decoration: none;
}
/* MDB karusel stavkama daje white-space: nowrap — naslov i opis se normalno prelamaju */
.home-blog-carousel .multi-carousel-item .pt-4,
.home-blog-carousel .multi-carousel-item .pt-4 * {
  white-space: normal !important;
}
.home-blog-carousel .multi-buttons .carousel-control-prev,
.home-blog-carousel .multi-buttons .carousel-control-next {
  position: static !important; /* u ravni sa dugmetom, kao kod „Dodatnih usluga" */
  background: #fff !important;
  border-color: #fff !important;
}
.home-blog-carousel .multi-buttons .carousel-control-prev img,
.home-blog-carousel .multi-buttons .carousel-control-next img {
  filter: var(--filter-primary) !important;
}
.home-blog-carousel .multi-buttons .carousel-control-prev:hover,
.home-blog-carousel .multi-buttons .carousel-control-next:hover {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
}
.home-blog-carousel .multi-buttons .carousel-control-prev:hover img,
.home-blog-carousel .multi-buttons .carousel-control-next:hover img {
  filter: var(--filter-white) !important;
}
@media (min-width: 577px) {
  /* tablet: strelice iznad kartica, desno (kao kod „Dodatnih usluga") */
  .home-blog-carousel .multi-buttons {
    margin-bottom: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Početna — DESKTOP (≥1200px, desktop meni): hero preko celog ekrana (100svh),
 * header providan preko slike dok je stranica na vrhu, sa blagim gradijentom
 * odozgo da linkovi budu čitljivi. Na skrol ostaje legacy ponašanje: klasa
 * `.fixed` (posle 30px) → beo, fiksan header, header-top se skuplja. Otvoren
 * mega-meni takođe vraća beo header.
 * ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body.royal-home main.m-top {
    margin-top: 0 !important;
  }
  body.royal-home #carouselFullScreen,
  body.royal-home #carouselFullScreen .carousel-inner,
  body.royal-home #carouselFullScreen .carousel-item {
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
  }
  body.royal-home #carouselFullScreen .carousel-item > picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  body.royal-home #carouselFullScreen .carousel-item > picture img {
    display: block;
    width: 100% !important;
    height: 100svh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
  }
  body.royal-home #carouselFullScreen .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 100%);
  }
  /* naslov + tekst + dugmad: vertikalno po sredini slike */
  body.royal-home #carouselFullScreen .carousel-caption {
    z-index: 2;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* providan header na vrhu stranice */
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) {
    background: transparent !important;
    box-shadow: none !important;
  }
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-top,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom {
    background-color: transparent !important;
  }
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-top .royal-h,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-top .link,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom .nav-link,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom .nav-link span {
    color: #fff !important;
  }
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-top .border-s,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-top .border-e {
    border-color: rgba(255, 255, 255, .45) !important;
  }
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom .nav-link:hover {
    background-color: rgba(255, 255, 255, .12) !important;
  }
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .navbar-brand img,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom img.arrow-down,
  body.royal-home .header:not(.fixed):not(:has(.dropdown-menu.show)) .header-bottom img[src*="search"] {
    filter: var(--filter-white) !important;
  }
}

/* ---------------------------------------------------------------------------
 * Header mega-meni — strelica linka koji je otvorio meni se okreće na gore
 * 3D prevrtanjem oko horizontalne ose (ne rotacija u ravni).
 * ------------------------------------------------------------------------- */
.header-bottom .dropdown-toggle .nav-link {
  perspective: 120px;
}
.header-bottom .dropdown-toggle img.arrow-down {
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.header-bottom .dropdown-toggle.show img.arrow-down,
.header-bottom .dropdown-toggle[aria-expanded="true"] img.arrow-down {
  transform: rotateX(180deg);
}

/* Početna (desktop): header se boji u istom trenutku kad se otvori mega-meni —
 * bez kašnjenja boja/pozadine/bordera/filtera; skupljanje header-top-a na
 * skrol (height) i logo (transform) ostaju animirani. */
@media (min-width: 1200px) {
  body.royal-home .header,
  body.royal-home .header .header-top {
    transition: height .3s ease-out, transform .3s ease-out !important;
  }
  body.royal-home .header .header-bottom,
  body.royal-home .header .navbar,
  body.royal-home .header .header-top .link,
  body.royal-home .header .header-top .royal-h,
  body.royal-home .header .header-top .border-s,
  body.royal-home .header .header-top .border-e,
  body.royal-home .header .header-bottom .nav-link,
  body.royal-home .header .header-bottom .nav-link span {
    transition: none !important;
  }
  body.royal-home .header .navbar-brand img {
    transition: transform .3s ease-out !important;
  }
}

/* ---------------------------------------------------------------------------
 * Lokacije (grad) — lista cena: naziv je običan body tekst (bez linka),
 * stara cena precrtana ali iste veličine kao nova, nova cena roze.
 * FAQ: blagi border između pitanja.
 * ------------------------------------------------------------------------- */
.city-price .city-price-title {
  color: var(--text-primary);
}
.city-price .city-price-old {
  font-size: inherit;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: line-through;
}
.city-price .city-price-new {
  color: var(--pink);
}
/* legacy style.css ima `.accordion-item { border: 0 !important }` */
.city-section .accordion-item {
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Plavi hero (`section-doctor`: pre i posle, cenovnik, pitajte hirurga, blog,
 * usluge, kategorije, plaćanje, upit…) — DESKTOP: H1 43px umesto 50px
 * (style-landing.css) i razmak do teksta ispod (bio je 0 — `mb-0`).
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  section.section-doctor h1.fs-3xl-custom {
    font-size: 43px !important;
    line-height: 1.2 !important;
    margin-bottom: 1.25rem !important;
  }
}

/* ---------------------------------------------------------------------------
 * Plavi hero (`section-doctor`) — MOBILNI (<768px): naslov stoji na dnu slike,
 * centriran, 37px, preko blage crnkaste senke (kao početna);
 * tekst ide ispod slike. Markup se ne menja: kontejneri mobilnog bloka su
 * `display: contents`, pa slika, naslov i tekst postaju ćelije jednog grida —
 * naslov deli red sa slikom (align-self: end), bez obzira na visinu slike.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  section.section-doctor:has(.col-lg-5.d-md-none) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  section.section-doctor:has(.col-lg-5.d-md-none) > .d-md-none:first-child {
    grid-row: 1;
    grid-column: 1;
  }
  section.section-doctor:has(.col-lg-5.d-md-none) > .container-fluid,
  section.section-doctor:has(.col-lg-5.d-md-none) > .container-fluid > .row,
  section.section-doctor .col-lg-5.d-md-none,
  section.section-doctor .col-lg-5.d-md-none > div {
    display: contents !important; /* Bootstrap `.d-flex`/`.d-md-none` imaju !important */
  }
  section.section-doctor .col-lg-5.d-md-none .h1.fs-3xl-custom {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    justify-self: stretch;
    width: auto !important; /* legacy `.text-align-last-center-mobile` daje fit-content */
    position: relative;
    z-index: 101; /* slika hero-a ima legacy `.z-100` */
    margin: 0 !important;
    padding: 64px 20px 18px;
    font-size: 37px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-align-last: center !important;
    color: #fff;
    /* blaga crnkasta senka kao na početnoj — tek da se beli tekst vidi; slika i plava sekcija ostaju čiste */
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
  }
  section.section-doctor .col-lg-5.d-md-none .friday-div {
    grid-row: 2;
    grid-column: 1;
    justify-self: stretch;
    width: auto !important;
    position: relative;
    z-index: 1;
    padding: 28px 24px; /* isti razmak gore i dole u plavoj sekciji */
  }
  section.section-doctor .col-lg-5.d-md-none .friday-div p:last-child {
    margin-bottom: 0;
  }
}

/* Galerije pre/posle (početna, usluge, /pre-i-posle, galerije): slike menjaju
 * pre/posle na hover i otvaraju lightbox — ručica na celoj kartici. */
.card-1:has(.image-1),
.card-1:has(.image-1) * {
  cursor: pointer !important;
}

/* Lista galerija (/pre-i-posle-slike-galerije): cela kartica je link. */
.gallery-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.gallery-card-link:hover .gallery-card-title {
  color: var(--primary) !important;
}

/* ---------------------------------------------------------------------------
 * Pre i posle (lista, galerije, pojedinačna galerija) — MOBILNI: manji razmak
 * iznad i ispod naslova ispod breadcrumb-a. Red breadcrumb-a je legacy 100px
 * (ikonica u sredini → ~38px vazduha do naslova), a select ima `mt-5` (51px).
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .breadcrumb-custom.gallery:has(#filterKategorijaUsluge) .h-gallery {
    height: 70px !important;
  }
  .breadcrumb-custom.gallery:has(#filterKategorijaUsluge) .col-sm-6.mt-5 {
    margin-top: 1.5rem !important;
  }
}
/* Sve slike kartica istog formata (4:3) — nove naslovne su 3:2, stare 4:3. */
.gallery-card-link .box-gallery {
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}
.gallery-card-link .box-gallery img {
  height: 100% !important;
  object-fit: cover;
}

/* Lokacije — lista cena: obe kolone (precrtana i „od X €") poravnate po DESNOJ
 * strani. „od X €" ima fiksnu širinu, pa se i precrtane cene završavaju u istoj
 * liniji u svakom redu, bez obzira na dužinu nove cene. Cifre jednake širine. */
.city-price .city-price-amounts {
  display: inline-flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.city-price .city-price-old {
  text-align: right;
}
.city-price .city-price-from {
  flex: 0 0 6.6em;
  width: 6.6em;
  text-align: right;
}
/* Mobilni: red je uzak (~264px) — manji razmaci da i jednoreči naziv
 * („Rinoplastika") stane, a kolone cena ostanu poravnate. */
@media (max-width: 575.98px) {
  .city-price {
    gap: 10px;
  }
  .city-price .city-price-amounts {
    gap: 8px;
  }
  .city-price .city-price-from {
    flex-basis: 6.2em;
    width: 6.2em;
  }
}
/* Uski ekrani (<375px): naziv u svom redu, cene ispod — desno poravnate. */
@media (max-width: 374.98px) {
  .city-price {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .city-price .city-price-title {
    flex: 1 1 100%;
  }
  .city-price .city-price-amounts {
    margin-left: auto;
  }
}

/* Galerija bez svojih slika — napomena da su prikazani rezultati srodnog zahvata. */
.gallery-related-note {
  padding: 14px 18px;
  background: #fff;
  border-left: 3px solid var(--primary);
  color: var(--text-primary);
}

/* Uređaji na dodir (iPhone…): iOS posle dodira „zaključa" :hover, pa ikonica
 * ostane u hover boji (npr. lupa u header-u roze). Na dodiru hover ne menja
 * boju ikonica — ostaje osnovna (ljubičasta). */
@media (hover: none) {
  .filter-p-to-s:hover,
  .filter-p-to-b:hover,
  .filter-p-to-g:hover,
  .filter-p-to-q:hover,
  .filter-p-to-t:hover,
  .filter-p-to-w:hover {
    filter: var(--filter-primary) !important;
  }
}

/* Ljubičaste ikonice: SVG filter (app.vue, #royal-filter-primary) umesto legacy
 * recepta koji Safari (iPhone) prikazuje ROZE. Isti rezultat u svim browserima. */
/* `html:root` (jače od `:root`): style-landing.css se učitava kasnije i ponovo
 * definiše --filter-* starim receptima. */
html:root {
  --filter-primary: url(#royal-filter-primary);
  --filter-tertiary: url(#royal-filter-primary);
  --filter-secondary: url(#royal-filter-pink);
  --filter-pink: url(#royal-filter-pink);
  --filter-gray: url(#royal-filter-gray);
}

/* FAQ (početna i ostale `.accord` liste): otvoreno pitanje je ljubičasto, ne MDB plavo. */
.accord .accordion-button:not(.collapsed),
#accordionExample .accordion-button:not(.collapsed) {
  color: var(--primary) !important;
}

/* Karusel galerije pre/posle (mobilni): strelice su preko trake „Pre operacije",
 * a slika „posle" (`.image-2`, z-index 10) ih je prekrivala — dodir na strelicu
 * je na iPhone-u menjao fotografiju umesto da lista. Strelice iznad slike. */
@media (max-width: 991.98px) {
  .multi-buttons {
    z-index: 20;
  }
}
@media (hover: none) {
  .multi-buttons .carousel-control-next:hover,
  .multi-buttons .carousel-control-prev:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
}

/* Burger meni (mobilni): strelice ka podmeniju i „Nazad" bile su 8px — premale
 * za prst i oko. 14px, kao ostale male ikonice. */
.mobile-navigation .arrow img.icon-3xsm {
  width: 14px;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Breadcrumb — velika slova rešava komponenta (Safari ne radi ::first-letter
 * na -webkit-box), pa CSS lowercase/first-letter više ne sme da „pomaže".
 * ------------------------------------------------------------------------- */
.breadcrumb-capitalize {
  text-transform: none !important;
}

/* MOBILNI: isti razmak iznad i ispod breadcrumb-a na svim stranicama (28px).
 * Legacy kutija ima fiksnih 100px sa tekstom u sredini + različit padding
 * sekcija — bilo je 35–91px gore i 35–83px dole. Breadcrumb se više ne seče
 * („Estetska plastična…"): koraci su prirodne širine i prelaze u novi red.
 * Stranice „pre i posle" (filteri u breadcrumb redu) imaju svoje pravilo.
 * NAPOMENA: :has() se ne sme ugnezditi u :has() (pravilo bi bilo odbačeno). */
@media (max-width: 767.98px) {
  .breadcrumb-custom:not(:has(#filterKategorijaUsluge)) .h-gallery,
  .breadcrumb-custom:not(:has(#filterKategorijaUsluge)).breadcrumb-background {
    height: auto !important;
  }
  .breadcrumb-custom:not(:has(#filterKategorijaUsluge)) {
    padding: 0 !important;
    margin: 0 0 28px !important;
  }
  section:has(.breadcrumb-custom):not(:has(.breadcrumb-custom #filterKategorijaUsluge)) {
    padding-top: 28px !important;
  }
  /* Usluge: naslov ispod breadcrumb-a je na mobilnom sakriven — bez margine reda. */
  .row.mb-5:has(.breadcrumb-custom + .h1.d-none) {
    margin-bottom: 0 !important;
  }
  .breadcrumb-custom ul {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .breadcrumb-custom ul > li,
  .breadcrumb-custom ul > li > a {
    display: inline-block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * SVI filteri boja → SVG filteri (app.vue). Legacy recepti `invert() sepia()
 * saturate() hue-rotate()` Safari (iPhone) računa drugačije: ljubičasto ispadne
 * roze, roze ispadne crveno. Promenljive (--filter-*) su preusmerene gore u
 * :root; ovde su pravila u kojima je recept upisan direktno (style.css,
 * style-landing.css). Prefiks `html` = malo jači selektor od originala, a
 * hover pravila (koja su specifičnija) i dalje važe. Boje su izmerene u Chrome-u.
 * ------------------------------------------------------------------------- */
html .filter-p,
html .anchor-link .anchor-icon,
html .overlay img,
html .show-btn::after,
html .show-more-btn::after {
  filter: url(#royal-filter-primary);
}
html .filter-s {
  filter: url(#royal-filter-pink) !important; /* original ima !important */
}
html .cta-phone-icon img {
  filter: url(#royal-filter-rose);
}
html .video-yt:hover .icon-yt {
  filter: url(#royal-filter-red);
}
html .icon.anchor-icon.me-3 {
  filter: url(#royal-filter-slate) !important; /* original ima !important */
}

/* ---------------------------------------------------------------------------
 * Stranica USLUGE — MOBILNI hero kao na kategoriji (vidi `section-doctor`):
 * naslov preko dna slike, centriran, 37px, beo, blaga crnkasta senka; tekst i
 * dugmad ispod sa ujednačenim razmakom. Kontejneri su `display: contents`, pa
 * slika i naslov dele isti red grida (naslov uz donju ivicu slike).
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  section.service-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 28px !important;
  }
  section.service-hero > .container-fluid,
  section.service-hero > .container-fluid > .row,
  section.service-hero .royal-hero-text,
  section.service-hero .royal-hero-text > div,
  section.service-hero .royal-hero-text > div > div {
    display: contents !important;
  }
  section.service-hero .royal-hero-filler {
    display: none !important;
  }
  section.service-hero .timeline-section {
    grid-row: 1;
    grid-column: 1;
    margin: 0 !important;
    padding: 0 !important;
  }
  section.service-hero .royal-hero-text h1 {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    justify-self: stretch;
    width: auto !important;
    position: relative;
    z-index: 101;
    margin: 0 !important;
    padding: 64px 20px 18px;
    font-size: 37px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-align-last: center !important;
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%);
  }
  section.service-hero .royal-hero-text .friday-div {
    grid-row: 2;
    grid-column: 1;
    padding: 28px 24px 0;
  }
  section.service-hero .royal-hero-text .friday-div p:last-child {
    margin-bottom: 0;
  }
  section.service-hero .royal-hero-text .friday-div + div {
    grid-row: 3;
    grid-column: 1;
    margin-top: 24px !important;
    padding: 0 24px;
  }
}

/* Filteri: padajući izbor („Izaberite uslugu", MDB Select) izgleda isto kao
 * polje „Pretraži" pored njega — isti font, veličina i boja (na celom sajtu). */
.select-wrapper .select-input,
.select-wrapper .select-input.placeholder-active,
.select-wrapper .select-input::placeholder {
  font-family: sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

/* Pretraga: razmak polje → rezultati = razmak header → naslov (66px; pt-7 je 64
 * + prored naslova). Važi i za desktop i za mobilni. */
.pretraga-rezultati {
  padding-top: 66px !important;
}

/* ---------------------------------------------------------------------------
 * Stranice usluga — mobilni sticky meni sekcija:
 *  - otvoren ide PREKO fiksne trake Upit/Viber/Telefon (z-index 100);
 *  - visina po stvarno vidljivom ekranu (dvh — na iPhone-u 100vh uključuje
 *    trake browsera, pa je lista bila predugačka i kraj nedostižan);
 *  - skrol ostaje u meniju (overscroll-behavior) i stranica je zaključana
 *    dok je meni otvoren (html.royal-nav-open, vidi RoyalServicePage).
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sticky-nav:has(.mobile-navigation-landing.active) {
    z-index: 1050 !important;
  }
  .mobile-navigation-landing.active {
    height: calc(100dvh - 70px) !important;
  }
  .mobile-navigation-landing.active .mobile-nav {
    height: calc(100dvh - 175px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Zaključava se SAMO <html> (njegov overflow ide na viewport), a <body> mora
   * da bude `visible`: legacy style.css mu daje `overflow: auto`, koje se dok je
   * html `visible` prenosi na prozor — ali čim html dobije `hidden`, body sa
   * `auto`/`hidden` postaje SAMOSTALAN scroll kontejner. Sticky traka se tada
   * lepi za body (neskrolovan) umesto za prozor i odleti na svoje mesto u toku
   * stranice, iznad ekrana: meni se „otvori pa nestane". */
  html.royal-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  html.royal-nav-open body {
    overflow: visible !important;
  }
  /* Bez scroll anchoring-a: kad se zalepljena traka razvuče (75px → ceo ekran),
   * browser je pomerao skrol za tu razliku da sadržaj ispod „ostane na mestu" —
   * i time gurao samu traku iznad ekrana, pa je meni posle klika „nestajao". */
  html:has(.mobile-navigation-landing),
  html:has(.mobile-navigation-landing) body {
    overflow-anchor: none;
  }
}

/* Sticky meni usluga — burger isti kao glavni (#menu-button u style.css):
 * linije 25×2px, razmak 8px, prelaz u „X" (rotate ±135°), ista desna ivica.
 * Beo jer je traka ljubičasta. */
.mobile-navigation-landing .burger-icon.royal-burger {
  position: relative;
  flex: 0 0 25px;
  width: 25px !important;
  height: 20px !important;
  padding: 0 !important;
  margin-left: auto;
  filter: none !important;
}
.royal-burger > span,
.royal-burger > span::before,
.royal-burger > span::after {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 25px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  content: "";
  transition: var(--transition-all);
}
.royal-burger > span {
  margin-top: -1px;
}
.royal-burger > span::before {
  top: -8px;
}
.royal-burger > span::after {
  top: 8px;
}
.royal-burger.open > span {
  background-color: transparent !important;
}
.royal-burger.open > span::before,
.royal-burger.open > span::after {
  top: 0;
}
.royal-burger.open > span::before {
  transform: rotate(135deg);
}
.royal-burger.open > span::after {
  transform: rotate(-135deg);
}

/* ---------------------------------------------------------------------------
 * Bočni meni sekcija na stranici usluge (desktop): hover i aktivna sekcija
 * (scroll-spy u RoyalServicePage) koriste legacy `.anchor-link.active` izgled —
 * ljubičasta pozadina, beli tekst i ikonica. Ikonica mora `html …` jer gornje
 * pravilo `html .anchor-link .anchor-icon` (royal-filter-primary) inače pobeđuje.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .timeline-navigation .anchor-link {
    transition: background-color .2s ease-out;
  }
  .timeline-navigation .anchor-link:hover,
  .timeline-navigation .anchor-link.active {
    background: var(--primary);
    border-radius: 3px !important;
  }
  .timeline-navigation .anchor-link:hover span,
  .timeline-navigation .anchor-link.active span {
    color: var(--white) !important;
  }
  html .timeline-navigation .anchor-link:hover .anchor-icon,
  html .timeline-navigation .anchor-link.active .anchor-icon {
    filter: brightness(0) invert(1);
  }
}

/* ---------------------------------------------------------------------------
 * Prva sekcija stranice usluge — tekst je u HTML-u samo jednom (ranije dve
 * kopije: mobilna u „Prikaži više” + desktop). Ispod 992px važi legacy
 * `.text-container` (200px, prelaz, strelica). Od 992px: pun tekst bez omotača —
 * isto kao bivši desktop blok (`text-not-last`: bez donje margine poslednjeg p).
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .text-container.royal-sm,
  .text-container.royal-sm.show {
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
    transition: none;
  }
  .gradient.royal-sm::before {
    display: none;
  }
  .royal-sm-text p:last-child,
  .royal-sm-text p:last-of-type {
    margin-bottom: 0 !important;
  }
}

/* Galerija pre/posle na stranici usluge: uvodni tekst je u HTML-u jednom; na
 * mobilnom stoji ispod strelica sa razmakom kao bivša mobilna kopija (mt-4).
 * (Bootstrap `mt-lg-0` ne poništava legacy `mt-4`, zato posebna klasa.) */
@media (max-width: 991.98px) {
  .royal-gal-intro {
    margin-top: 1.5rem;
  }
}
/* Omotač prve sekcije usluge: relative samo na mobilnom (dugme „Prikaži više");
   na desktopu bi menjao iscrtavanje teksta u odnosu na raniji izgled */
@media (max-width: 991.98px) {
  .royal-sm-wrap {
    position: relative;
  }
}