/* ============================================================
   AKSAL CROWN — dizajnový systém
   Farby sú prevzaté priamo z loga: petrolejová #14393b
   a zlatá #c9a45c. Rozloženie je symetrické a zarovnané —
   všetko sedí na jednu os, nadpisy sekcií sú na stred.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- značka: presne farby z loga --- */
  --petrol:      #14393b;
  --petrol-deep: #0d2627;
  --petrol-mid:  #2a5c5e;
  --petrol-soft: #e7eeee;
  --petrol-tint: #f2f6f6;

  --gold:      #c9a45c;
  --gold-deep: #a37b2a;
  --gold-soft: #f6efe1;
  --gold-tint: #fbf7ef;

  /* --- podklad a text --- */
  --paper:  #ffffff;
  --cream:  #faf7f1;
  --cream-2:#f3ede2;
  --line:   #e8e1d3;
  --line-2: #f0ece3;

  --ink:    #1a2422;
  --ink-2:  #3d4b48;
  --muted:  #6a7a76;
  --muted-2:#9aa8a4;

  /* --- stavy --- */
  --ok: #2c6b4f;    --ok-soft: #e8f2ed;
  --warn: #97701f;  --warn-soft: #f8f1e1;
  --bad: #98453c;   --bad-soft: #f6eae8;

  --r:    22px;   /* karty, polia, panely */
  --r-sm: 16px;   /* drobné prvky */
  --r-lg: 34px;   /* veľké plochy */
  --r-xl: 46px;   /* celé pásy sekcií */
  --r-pill: 999px;
  /* tiene o niečo mäkšie a rozptýlenejšie */
  --sh-1: 0 2px 8px rgba(86,64,33,.07);
  --sh-2: 0 16px 44px -16px rgba(86,64,33,.20);
  --sh-3: 0 32px 74px -24px rgba(66,48,25,.28);

  --f-d: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-b: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --nav-h: 84px;
  --bar-h: 42px;
  --wrap: 1240px;
  --read: 760px;               /* max šírka súvislého textu */
  --e: cubic-bezier(.2,.7,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-b);
  /* jemné teplé svetlo v pozadí — plocha nie je mŕtvo rovná */
  background:
    radial-gradient(1200px 760px at 10% -6%, rgba(201,164,92,.13), transparent 58%),
    radial-gradient(1000px 640px at 94% 14%, rgba(201,164,92,.09), transparent 60%),
    var(--cream);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--petrol-deep); }

h1, h2, h3, h4 {
  font-family: var(--f-d);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--petrol);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.034em; }
h2 { font-size: clamp(28px, 3.7vw, 50px); line-height: 1.06; letter-spacing: -.032em; }
h3 { font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.022em; }
h4 { font-size: 17px; }
p { text-wrap: pretty; }

/* ============ mriežka a rytmus ============ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.section { padding: clamp(44px, 5.4vw, 72px) 0; }
.section.tight { padding: clamp(28px, 3.4vw, 46px) 0; }
.section.paper { background: linear-gradient(180deg, var(--paper), var(--gold-tint) 190%); }
.section.tight.warm, .section.warm { background: linear-gradient(180deg, transparent, var(--gold-tint) 130%); }
.section.tintd { background: var(--petrol-tint); }
.section.dark  { background: var(--petrol); color: rgba(255,255,255,.8); }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }

/* text v čitateľnej šírke, vždy na jednej osi */
.read { max-width: var(--read); margin-inline: auto; }

/* ============ hlavička sekcie — vždy na stred ============ */
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head .label { margin-bottom: 12px; }
.sec-head h2 { margin: 0 auto; }
.sec-head .lead { color: var(--muted); font-size: clamp(16px, 1.35vw, 19px); margin: 20px auto 0; max-width: 42ch; line-height: 1.6; }
.section.dark .sec-head .lead { color: rgba(255,255,255,.7); }
.sec-head.left { text-align: left; margin-left: 0; margin-right: 0; }
.sec-head.left h2, .sec-head.left .lead { margin-left: 0; }

/* zlatá linka pod nadpisom — podpisový prvok */
.sec-head h2::after {
  content: ''; display: block; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-deep));
  margin: 22px auto 0; border-radius: var(--r-pill);
}
.sec-head.left h2::after { margin-left: 0; }
.sec-head.bare h2::after { display: none; }

/* ============ mikro-popisok ============ */
.label {
  display: inline-block;
  font-family: var(--f-d);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.section.dark .label { color: var(--gold); }

/* ============ tlačidlá ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--f-d); font-size: 13.5px; font-weight: 600; letter-spacing: .05em;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .25s var(--e), color .25s var(--e), border-color .25s var(--e);
}
.btn svg { flex: none; transition: transform .25s var(--e); }
.btn:hover svg.arr { transform: translateX(4px); }
.btn-primary { background: var(--petrol); color: #fff; }
.btn-primary:hover { background: var(--petrol-deep); color: var(--gold); }
/* zlaté tlačidlo s jemným leskom a žiarou — hlavná výzva na stránke */
.btn-gold {
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 72%, #fff) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  color: var(--petrol-deep);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--gold) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover {
  background: var(--gold-deep); color: #fff;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--gold) 95%, transparent);
}
.btn-outline { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.btn-outline:hover { background: var(--petrol); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-light:hover { background: #fff; color: var(--petrol); border-color: #fff; }
.btn-sm { padding: 11px 19px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-d); font-size: 13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--petrol);
  padding-bottom: 5px; border-bottom: 1px solid var(--gold);
  transition: color .22s, gap .22s var(--e); background: none; cursor: pointer;
}
.link:hover { color: var(--gold-deep); gap: 14px; }
.link.on-dark { color: #fff; }
.link.on-dark:hover { color: var(--gold); }

/* ============ hlavička ============ */
.topbar {
  background: var(--cream); color: var(--muted); border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; height: var(--bar-h); display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; gap: 26px; width: 100%; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar a:hover { color: var(--gold-deep); }
.topbar .sep { margin-left: auto; }
@media (max-width: 860px) { .topbar { display: none; } }

header.site {
  position: sticky; top: 0; z-index: 500;
  background: var(--petrol); border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background .3s, box-shadow .3s;
}
header.site.scrolled { background: rgba(20,57,59,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sh-2); }
.nav { display: flex; align-items: center; height: var(--nav-h); gap: 14px; }
.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.brand img { height: 52px; width: auto; }
.brand-fallback { width: 42px; height: 42px; background: var(--gold); color: var(--petrol-deep); display: grid; place-items: center; font-family: var(--f-d); font-size: 19px; font-weight: 700; }
.brand-text b { display: block; font-family: var(--f-d); font-size: 16px; font-weight: 700; letter-spacing: .08em; color: #fff; line-height: 1.15; }
.brand-text span { display: block; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); margin-top: 3px; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links > li > a {
  display: block; padding: 10px 13px;
  font-family: var(--f-d); font-size: 14.5px; font-weight: 500; letter-spacing: .03em;
  color: rgba(255,255,255,.76); position: relative; white-space: nowrap;
  transition: color .22s;
}
.nav-links > li > a:hover { color: #fff; }
.nav-links > li > a.active { color: #fff; font-weight: 600; }
.nav-links > li > a.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.nav-cta { margin-left: 14px; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin-right: -10px; }
.burger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.92); margin: 5px 0; transition: transform .3s var(--e), opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1140px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--petrol);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 32px 28px;
    border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: var(--sh-2);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: .28s var(--e); max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links > li > a { padding: 15px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-links > li > a.active::after { left: 0; right: auto; width: 22px; bottom: 9px; }
  .nav-cta { margin: 20px 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ============ pätička ============ */
footer.site { background: var(--petrol); color: rgba(255,255,255,.66); padding: 56px 0 24px; }
footer.site a { transition: color .22s; }
footer.site a:hover { color: var(--gold); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.16); }
.foot-brand img { height: 48px; margin-bottom: 24px; }
.foot-brand p { font-size: 15px; line-height: 1.75; max-width: 38ch; color: rgba(255,255,255,.7); }
/* nadpisy stĺpcov nesú zlatú — rovnako ako štítky sekcií na stránke */
.foot-col h4 { color: var(--gold); font-family: var(--f-d); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px; }
.foot-col h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,164,92,.45), transparent); }
.foot-meta b { color: var(--gold-soft, #e2c98f); }
.foot-list { list-style: none; display: grid; gap: 12px; font-size: 14.5px; }
.foot-meta { font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,.66); }
.foot-meta b { color: #fff; font-weight: 600; }
.foot-social { display: flex; gap: 10px; margin-top: 26px; }
.foot-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.24); display: grid; place-items: center; transition: .22s var(--e); }
.foot-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--petrol-deep); }
.foot-bottom { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.45); }
@media (max-width: 980px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 580px) { .foot-top { grid-template-columns: 1fr; } }

/* ============ odhalenie pri scrolle ============ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e), transform .6s var(--e); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s } .reveal.d2 { transition-delay: .12s } .reveal.d3 { transition-delay: .18s }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ============ štítky ============ */
.tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: var(--r);
  font-family: var(--f-d); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; line-height: 1.5;
}
.tag-sale  { background: var(--petrol); color: #fff; }
.tag-rent  { background: var(--petrol-mid); color: #fff; }
.tag-cat   { background: rgba(255,255,255,.94); color: var(--petrol); }
.tag-gold  { background: var(--gold); color: var(--petrol-deep); }
.tag-ok    { background: var(--ok-soft);   color: var(--ok); }
.tag-warn  { background: var(--warn-soft); color: var(--warn); }
.tag-bad   { background: var(--bad-soft);  color: var(--bad); }
.tag-soft  { background: var(--cream-2); color: var(--muted); }

/* ============ karta nehnuteľnosti ============ */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; align-items: stretch; }
/* Bez rámu a bez tieňa — fotografia je dlaždica, text stojí na podklade
   stránky. Na hover sa hýbe len obrázok, karta ostáva na mieste. */
.prop-card {
  background: transparent; border: 0;
  display: flex; flex-direction: column; height: 100%;
}
.prop-media {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  background: var(--cream-2); border-radius: 22px;
  transition: box-shadow .4s var(--e);
}
.prop-card:hover .prop-media { box-shadow: var(--sh-2); }
.prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e); }
.prop-card:hover .prop-media img { transform: scale(1.05); filter: saturate(1.07) contrast(1.02); }
.prop-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.prop-count {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(13,38,39,.82); color: #fff; padding: 5px 10px; border-radius: var(--r);
  font-family: var(--f-d); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
/* inžinierske siete — pri pozemkoch rozhodujú, preto sú vidieť už na fotke */
.prop-utils {
  position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px;
}
.prop-utils i {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: rgba(13,38,39,.82); color: var(--gold); border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.prop-utils svg { display: block; }

/* telo karty: pevné poradie, aby riadky lícovali */
.prop-body { padding: 20px 4px 4px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.prop-loc { font-family: var(--f-d); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.prop-title {
  font-family: var(--f-d); font-size: 18.5px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.32; color: var(--petrol); margin: 10px 0 14px;
  min-height: calc(1.32em * 2); display: flex; align-items: center; justify-content: center;
}
.prop-card:hover .prop-title { color: var(--gold-deep); }
.prop-specs {
  display: flex; justify-content: center; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 4px;
}
.prop-specs span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--line-2); }
.prop-specs span:last-child { border-right: 0; }
.prop-specs svg { opacity: .5; flex: none; }
.prop-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; justify-items: center; }
.prop-price { font-family: var(--f-d); font-size: 23px; font-weight: 700; letter-spacing: -.03em; color: var(--petrol); font-variant-numeric: tabular-nums; }
.prop-price small { font-family: var(--f-b); font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.prop-price.ask { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.prop-go { font-family: var(--f-d); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 8px; transition: gap .25s var(--e); }
.prop-card:hover .prop-go { gap: 12px; }
.prop-card.sold .prop-media img { filter: grayscale(1); }
.prop-card.sold:hover .prop-media img { filter: grayscale(.5); }

/* ============ formuláre ============ */
/* minmax(0,1fr) je nutné — inak sa stĺpec nafúkne na šírku textu vo vnútri
   (dlhá voľba v rozbaľovacom poli) a pole prelezie cez okraj karty na mobile */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; text-align: left; }
.field label { font-family: var(--f-d); font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); width: 100%; transition: border-color .22s, box-shadow .22s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-soft); }
.field textarea { resize: vertical; min-height: 122px; line-height: 1.6; }
.field select {
  cursor: pointer; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%236a7a76' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field .hint { font-size: 12.5px; color: var(--muted); }
.form-card { background: var(--paper); border: 1px solid var(--line); padding: 34px; text-align: left; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.form-msg { padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; margin-top: 16px; display: none; }
.form-msg.ok  { display: block; background: var(--ok-soft);  color: var(--ok); }
.form-msg.err { display: block; background: var(--bad-soft); color: var(--bad); }

/* ============ mapa ============ */
.map-shell { border: 1px solid var(--line); background: var(--paper); }
.map-canvas { width: 100%; height: 560px; }
.map-canvas.short { height: 420px; }
.leaflet-container {
  font-family: var(--f-b); background: #eceee9;
  /* vlastný stacking kontext — inak ovládanie zoomu (z-index 1000 od Leafletu)
     prekryje lepiacu sa hlavičku, keď mapa podíde pod ňu */
  position: relative; z-index: 0;
}
.map-legend { border-top: 1px solid var(--line); padding: 16px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.map-legend h5 { font-family: var(--f-d); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.map-legend ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.map-legend button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 12px 6px 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: .2s var(--e);
}
.map-legend button:hover { border-color: var(--petrol); }
.map-legend button.off { opacity: .35; }
.map-legend .swatch { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; flex: none; }
.map-legend .swatch svg { width: 12px; height: 12px; }
.map-legend .cnt { font-family: var(--f-d); font-weight: 700; color: var(--muted-2); font-size: 11.5px; }

.pin { position: relative; width: 34px; height: 42px; transition: transform .18s var(--e); filter: drop-shadow(0 3px 5px rgba(13,38,39,.32)); }
.pin:hover { transform: translateY(-4px) scale(1.07); z-index: 999; }
.pin-body { width: 34px; height: 34px; border: 2px solid #fff; display: grid; place-items: center; }
.pin-body svg { width: 17px; height: 17px; color: #fff; }
.pin-tail { position: absolute; left: 50%; top: 29px; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }

/* občianska vybavenosť v okolí — menšia a tlmenejšia než pin nehnuteľnosti,
   aby ju nepreválcovala, ale dala sa prečítať */
.poi-pin {
  display: grid; place-items: center; width: 26px; height: 26px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(13,38,39,.20);
  font-size: 14px; line-height: 1; transition: transform .18s var(--e);
}
.poi-pin:hover { transform: scale(1.2); z-index: 900; }
.pin-price {
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  background: var(--petrol); color: #fff; padding: 2px 7px;
  font-family: var(--f-d); font-size: 10px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pin.is-sold { filter: grayscale(1) drop-shadow(0 2px 4px rgba(13,38,39,.22)); opacity: .68; }
.leaflet-popup-content-wrapper { border-radius: var(--r) !important; padding: 0 !important; overflow: hidden; box-shadow: var(--sh-3) !important; }
.leaflet-popup-content { margin: 0 !important; width: 264px !important; }
.map-pop img { width: 100%; height: 150px; object-fit: cover; background: var(--cream-2); }
.map-pop-b { padding: 16px; display: grid; gap: 8px; text-align: center; }
.map-pop-t { font-family: var(--f-d); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--petrol); }
.map-pop-l { font-family: var(--f-d); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.map-pop-p { font-family: var(--f-d); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--petrol); }
.map-pop-s { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ============ galéria ============ */
.gallery { columns: 3; column-gap: 14px; }
.gallery figure { break-inside: avoid; margin-bottom: 14px; overflow: hidden; cursor: zoom-in; background: var(--cream-2); }
.gallery img { width: 100%; transition: transform .8s var(--e); }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }

.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(13,38,39,.97); display: none; place-items: center; }
.lightbox.on { display: grid; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lb-btn { position: absolute; background: transparent; border: 1px solid rgba(255,255,255,.32); color: #fff; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; transition: .22s var(--e); }
.lb-btn:hover { background: var(--gold); color: var(--petrol-deep); border-color: var(--gold); }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 24px; top: 24px; }
.lb-count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-family: var(--f-d); font-size: 12.5px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .lb-prev { left: 8px } .lb-next { right: 8px } .lb-btn { width: 40px; height: 40px } }

/* ============ slider ============ */
.slider-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; align-items: stretch; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; flex: 0 0 clamp(290px, 30%, 380px); }
.slider-nav { display: flex; gap: 10px; justify-content: center; }
.slider-nav button { width: 48px; height: 48px; border: 1px solid var(--line); background: var(--paper); color: var(--petrol); cursor: pointer; display: grid; place-items: center; transition: .22s var(--e); }
.slider-nav button:hover:not([disabled]) { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.slider-nav button[disabled] { opacity: .3; pointer-events: none; }

/* ============ text z editora ============ */
.rtf { color: var(--ink-2); font-size: 16.5px; line-height: 1.8; }
.rtf > * + * { margin-top: 18px; }
.rtf h2 { font-size: clamp(23px,2.6vw,31px); margin-top: 46px; }
.rtf h3 { font-size: clamp(18px,2vw,23px); margin-top: 36px; color: var(--petrol); }
.rtf h4 { margin-top: 28px; }
.rtf ul, .rtf ol { padding-left: 22px; display: grid; gap: 10px; }
.rtf li { line-height: 1.72; }
.rtf li::marker { color: var(--gold-deep); }
.rtf b, .rtf strong { color: var(--petrol); font-weight: 700; }
.rtf a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.rtf img { margin: 30px auto; }
.rtf blockquote { border-left: 2px solid var(--gold); padding-left: 24px; font-size: 19px; color: var(--petrol); }
.rtf hr { border: 0; border-top: 1px solid var(--line); margin: 38px 0; }
.rtf table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rtf th, .rtf td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.rtf th { font-family: var(--f-d); font-weight: 700; color: var(--petrol); }

/* ============ pomocné ============ */
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row.center { justify-content: center; }
.stack { display: grid; gap: 22px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty { text-align: center; padding: 60px 24px; color: var(--muted); max-width: 520px; margin: 0 auto; }
.empty h3 { margin-bottom: 12px; }
.skeleton { background: linear-gradient(100deg, var(--cream-2) 30%, var(--line-2) 50%, var(--cream-2) 70%); background-size: 220% 100%; animation: sk 1.3s infinite linear; }
@keyframes sk { to { background-position: -220% 0; } }

.toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 950; display: grid; gap: 10px; }
.toast { background: var(--petrol); color: #fff; padding: 14px 20px; box-shadow: var(--sh-3); font-size: 14.5px; display: flex; align-items: center; gap: 10px; max-width: 380px; animation: tIn .3s var(--e); }
.toast.err { background: var(--bad); }
.toast.ok  { background: var(--ok); }
@keyframes tIn { from { opacity: 0; transform: translateY(12px); } }

/* ============ mobil ============ */
@media (max-width: 640px) {
  :root { --nav-h: 70px; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .section { padding: 40px 0; }
  .section.tight { padding: 28px 0; }
  .sec-head { margin-bottom: 28px; }
  .brand img { height: 40px; }
  .brand-text b { font-size: 14px; }
  .brand-text span { display: none; }
  .prop-grid { grid-template-columns: 1fr; gap: 20px; }
  .map-canvas { height: 420px; }
  .form-card { padding: 24px; }
  .btn { padding: 13px 22px; }
}

/* ============================================================
   VLASTNÝ KURZOR
   Zlatý bod sleduje myš presne, petrolejový prstenec dobieha.
   Nad odkazmi sa prstenec zväčší, nad fotkou ukáže „Zväčšiť“.
   Beží len na myši a keď používateľ nemá vypnuté animácie.
   ============================================================ */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; }
body.cur-on .cur-dot, body.cur-on .cur-ring { opacity: 1; }
/* kľúčik namiesto bodky — drobný odkaz na to, čo predávame */
.cur-dot {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  display: grid; place-items: center; color: var(--gold);
  transition: transform .3s var(--e), color .25s;
}
.cur-dot svg { display: block; filter: drop-shadow(0 1px 2px rgba(13,38,39,.35)); }
.cur-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(20,57,59,.45);
  display: grid; place-items: center;
  transition: width .28s var(--e), height .28s var(--e),
              margin .28s var(--e), border-color .28s, background .28s;
}
body.cur-hot .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--gold); background: rgba(201,164,92,.1); }
body.cur-hot .cur-dot  { transform: rotate(-32deg) scale(1.12); }   /* kľúč sa pootočí, akoby odomykal */
body.cur-press .cur-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
body.cur-press .cur-dot  { transform: rotate(-58deg) scale(.94); }
body.cur-zoom .cur-dot   { opacity: 0; }
body.cur-light .cur-dot  { color: var(--gold); }
body.cur-zoom .cur-ring { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: rgba(20,57,59,.82); border-color: transparent; }
.cur-label { font-family: var(--f-d); font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
body.cur-zoom .cur-label { opacity: 1; }
/* na tmavom podklade prepneme prstenec do svetlej podoby */
body.cur-light .cur-ring { border-color: rgba(255,255,255,.55); }
body.cur-light.cur-hot .cur-ring { border-color: var(--gold); background: rgba(201,164,92,.16); }
body.cur-light.cur-zoom .cur-ring { background: rgba(255,255,255,.9); border-color: transparent; }
body.cur-light.cur-zoom .cur-label { color: var(--petrol); }
/* skryjeme natívny kurzor len tam, kde ho nahrádzame */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary,
html.has-cursor label, html.has-cursor .prop-card, html.has-cursor .gallery figure,
html.has-cursor .p-shots figure { cursor: none; }
/* polia na písanie si natívny kurzor nechajú — inak sa zle píše */
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
html.has-cursor select { cursor: pointer; }
@media (pointer: coarse) { .cur-dot, .cur-ring { display: none; } }

/* ukazovateľ scrollu */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 700;
  background: var(--gold); transition: width .1s linear; }

/* magnetické tlačidlá */
.btn-gold, .slider-nav button { transition: background .25s var(--e), color .25s var(--e), box-shadow .25s var(--e),
  border-color .25s var(--e), transform .2s var(--e); }

/* pin zvýraznený z prepojeného zoznamu */
.pin-hot .pin { transform: translateY(-6px) scale(1.18); z-index: 900; }
.pin-hot .pin-body { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.45); }

/* ============================================================
   VLASTNÉ ROZBAĽOVACIE MENU
   Nahrádza natívny <select>, aby ladil so zvyškom stránky.
   ============================================================ */
.ac-sel { position: relative; min-width: 0; max-width: 100%; }
/* natívny <select> ostáva kvôli formulárom a JS, ale nesmie ovplyvniť rozloženie */
.ac-sel-native {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  opacity: 0; pointer-events: none; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); appearance: none;
}

.ac-sel-btn {
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 40px 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color .22s, box-shadow .22s;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-sel-btn::after {
  content: ''; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
  border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--e), border-color .22s;
}
.ac-sel.open .ac-sel-btn::after { transform: translateY(-25%) rotate(-135deg); border-color: var(--petrol); }
.ac-sel-btn:hover { border-color: var(--muted-2); }
.ac-sel-btn:focus-visible, .ac-sel.open .ac-sel-btn {
  outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-soft);
}
.ac-sel-btn.is-placeholder { color: var(--muted); }

.ac-sel-list {
  position: fixed; z-index: 720;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 6px; max-height: 264px; overflow-y: auto;
  animation: selIn .18s var(--e);
}

@keyframes selIn { from { opacity: 0; transform: translateY(-6px); } }

.ac-sel-item {
  padding: 10px 14px; border-radius: 12px; cursor: pointer;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
  transition: background .16s, color .16s;
}
.ac-sel-item > span { flex: 1; min-width: 0; }
.ac-sel-item:hover { background: var(--gold-tint); color: var(--gold-deep); }
.ac-sel-item.on { background: var(--petrol); color: #fff; font-weight: 600; }

/* rozbaľovačka lokalít: kraj → okres → mesto v jednom okienku */
.ac-sel-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ac-sel-item:hover .ac-sel-n { color: var(--gold-deep); }
.ac-sel-item.on .ac-sel-n { color: rgba(255,255,255,.75); }
.ac-sel-more::after {                       /* šípka „je kam ísť ďalej“ */
  content: ''; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); opacity: .55;
}
.ac-sel-back { color: var(--muted); font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid var(--line-2); border-radius: 12px 12px 0 0; margin-bottom: 4px; }
.ac-sel-all { font-weight: 600; color: var(--petrol); }

/* panel je pripojený k <body>, takže tmavý variant riešime triedou */
.ac-sel-list.on-dark { border-color: var(--line); }

/* na tmavom podklade (hero, vyhľadávací pás) */
.hero-find .ac-sel-btn, .cine-find .ac-sel-btn, .searchbar .ac-sel-btn {
  background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.2);
}
.hero-find .ac-sel-btn::after, .cine-find .ac-sel-btn::after, .searchbar .ac-sel-btn::after { border-color: rgba(255,255,255,.6); }
.hero-find .ac-sel-btn.is-placeholder, .cine-find .ac-sel-btn.is-placeholder, .searchbar .ac-sel-btn.is-placeholder { color: rgba(255,255,255,.62); }
.hero-find .ac-sel-btn:hover, .cine-find .ac-sel-btn:hover, .searchbar .ac-sel-btn:hover { border-color: rgba(255,255,255,.42); }
.hero-find .ac-sel.open .ac-sel-btn, .cine-find .ac-sel.open .ac-sel-btn, .searchbar .ac-sel.open .ac-sel-btn {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.2);
}
.hero-find .ac-sel.open .ac-sel-btn::after, .cine-find .ac-sel.open .ac-sel-btn::after, .searchbar .ac-sel.open .ac-sel-btn::after { border-color: var(--gold); }

/* zoznam necháme svetlý aj na tmavom — lepšie sa číta */
.ac-sel-list::-webkit-scrollbar { width: 8px; }
.ac-sel-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* ============================================================
   JEMNÉ MIHOTAVÉ POZADIE
   Tri veľké svetelné škvrny v farbách značky, ktoré sa pomaly
   presúvajú. Veľmi nízka sýtosť — má len rozbiť plochu.
   ============================================================ */
.aura { position: relative; isolation: isolate; overflow: hidden; }
.aura::before, .aura::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none; will-change: transform;
}
.aura::before {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  top: -14%; left: -10%;
  background: radial-gradient(circle, rgba(20,57,59,.13), transparent 68%);
  animation: aura1 34s ease-in-out infinite alternate;
}
.aura::after {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  bottom: -16%; right: -8%;
  background: radial-gradient(circle, rgba(201,164,92,.16), transparent 68%);
  animation: aura2 42s ease-in-out infinite alternate;
}
@keyframes aura1 { to { transform: translate3d(16vw, 10vh, 0) scale(1.18); } }
@keyframes aura2 { to { transform: translate3d(-14vw, -8vh, 0) scale(1.12); } }

/* tretia škvrna pre dlhšie stránky */
.aura > .aura-spot {
  position: absolute; z-index: -1; width: 34vw; height: 34vw;
  min-width: 280px; min-height: 280px; left: 42%; top: 38%;
  border-radius: 50%; filter: blur(80px); pointer-events: none;
  background: radial-gradient(circle, rgba(42,92,94,.11), transparent 66%);
  animation: aura3 50s ease-in-out infinite alternate;
}
@keyframes aura3 { to { transform: translate3d(-10vw, 14vh, 0) scale(1.22); } }

@media (prefers-reduced-motion: reduce) {
  .aura::before, .aura::after, .aura > .aura-spot { animation: none; }
}

/* ============================================================
   MAPA — zhluky, ovládanie, celá obrazovka
   ============================================================ */
.cl { background: transparent; }
.cl .cl-in {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--petrol); color: #fff;
  border: 3px solid rgba(255,255,255,.9);
  font-family: var(--f-d); font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 14px rgba(13,38,39,.34);
  transition: transform .2s var(--e), background .2s;
}
.cl:hover .cl-in { transform: scale(1.08); background: var(--gold); color: var(--petrol-deep); }
.marker-cluster, .marker-cluster div { background: transparent !important; }

.map-tools { position: absolute; z-index: 430; right: 14px; top: 14px; display: grid; gap: 6px; }
.map-tools button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--petrol); font-size: 16px; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--sh-1);
  transition: background .2s, color .2s, transform .2s var(--e);
}
.map-tools button:hover { background: var(--petrol); color: #fff; transform: scale(1.06); }

.map-shell { position: relative; }
.map-shell.is-full {
  position: fixed; inset: 12px; z-index: 880; margin: 0; border-radius: var(--r-lg);
  box-shadow: var(--sh-3); background: var(--paper);
}
.map-shell.is-full .map-canvas { height: 100% !important; min-height: 0 !important; }

/* položka zoznamu zvýraznená z mapy */
.map-item.hot { background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold); }

/* Poistka: načítaná dlaždica musí byť viditeľná aj keby prelínanie uviazlo. */
.leaflet-tile-loaded { opacity: 1 !important; }

/* Rozmery v <img> slúžia len na rezerváciu miesta — zobrazenie riadi CSS. */
.prop-media img, .gallery img, .p-shots img, .mini-img img,
.member-photo img, .post-media img, .step-img img, .sup-img img,
.map-item img, .zig-img img, .svc-hero img { width: 100%; height: 100%; }
.gallery img { height: auto; }

/* ---------- prepínač jazyka v hornom paneli ---------- */
.topbar .lang { display: flex; gap: 2px; margin-left: 18px; }
.topbar .lang button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 3px 10px 3px 4px; color: var(--muted);
  font-family: var(--f-d); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  transition: color .2s, background .2s, border-color .2s;
}
.topbar .lang button svg { border-radius: 2px; display: block; opacity: .75; transition: opacity .2s; }
.topbar .lang button:hover { color: var(--petrol); background: rgba(20,57,59,.06); }
.topbar .lang button:hover svg { opacity: 1; }
.topbar .lang button.on { color: var(--petrol-deep); background: var(--gold); border-color: var(--gold); }
.topbar .lang button.on svg { opacity: 1; }

/* nápoveda k priblíženiu mapy — objaví sa, keď sa nad mapou roluje bez Ctrl/Cmd */
.map-hint {
  position: absolute; inset: 0; z-index: 420; display: grid; place-items: center;
  background: rgba(13,38,39,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: #fff; font-family: var(--f-d); font-size: 16px; font-weight: 600; letter-spacing: .01em;
  text-align: center; padding: 20px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .22s var(--e), visibility .22s;
}
.map-hint.on { opacity: 1; visibility: visible; }
@media (hover: none) { .map-hint { display: none; } }

@media (max-width: 640px) {
  /* legenda mapy na mobile — menej riadkov, nech nezaberá pol obrazovky */
  .map-legend { padding: 12px 12px 14px; gap: 10px; }
  .map-legend h5 { font-size: 9.5px; letter-spacing: .14em; }
  .map-legend ul { gap: 5px; }
  .map-legend button { padding: 5px 9px 5px 5px; font-size: 11.5px; gap: 6px; }
  .map-legend .swatch { width: 17px; height: 17px; }
  .map-legend .swatch svg { width: 10px; height: 10px; }
}

/* ============ vodorovná lišta (predané ponuky, pás služieb) ============
   Okraje sa strácajú do stratena len na tej strane, kam sa dá posunúť,
   pod lištou je ukazovateľ posunu. Žiadne šípky. */
.rail-nav { position: relative; min-width: 0; }
.rail {
  display: flex; gap: 20px; overflow-x: auto; padding: 6px 2px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 306px; scroll-snap-align: start; }

.rail-nav.scrollable::before, .rail-nav.scrollable::after {
  content: ''; position: absolute; top: 0; bottom: 10px; width: 72px;
  pointer-events: none; z-index: 2; transition: opacity .25s var(--e);
}
.rail-nav.scrollable::before {
  left: 0; opacity: var(--fade-l, 0);
  background: linear-gradient(to right, var(--cream) 18%, rgba(250,248,244,0));
}
.rail-nav.scrollable::after {
  right: 0; opacity: var(--fade-r, 1);
  background: linear-gradient(to left, var(--cream) 18%, rgba(250,248,244,0));
}
.section.paper .rail-nav.scrollable::before { background: linear-gradient(to right, var(--paper) 18%, rgba(255,255,255,0)); }
.section.paper .rail-nav.scrollable::after  { background: linear-gradient(to left,  var(--paper) 18%, rgba(255,255,255,0)); }

.rail-more { display: none; }
.rail-nav.scrollable .rail-more {
  display: block; position: relative; width: 84px; height: 3px; margin: 16px auto 0;
  background: var(--line); border-radius: var(--r-pill);
}
.rail-nav.scrollable .rail-more i {
  position: absolute; top: 0; left: 0; height: 100%; width: 30%;
  background: var(--gold); border-radius: var(--r-pill);
  transition: left .18s var(--e), width .18s var(--e);
}
@media (max-width: 520px) { .rail > * { flex: 0 0 268px; } }