/* ==========================================================================
   THAIREAL — DETAIL NEMOVITOSTI
   Přídavný soubor. Načítej AŽ ZA style.css, nic v něm nepřepisuje globály.
   ========================================================================== */

.pd-main {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-line);
}

/* --------------------------------------------------------------------------
   DROBEČKY & HLAVIČKA
   -------------------------------------------------------------------------- */

.pd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.pd-breadcrumb a { color: var(--text-muted); }
.pd-breadcrumb a:hover { color: var(--color-ink); }

.pd-head { margin-bottom: var(--space-md); }

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pd-dot { color: var(--text-muted); }

.pd-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 10px;
}

/* ID nabídky = inline za poslední slovo nadpisu; velikost i barva jako lokalita
   (sans, tlumené), aby nekřičelo. white-space:nowrap = kód se nezalomí uprostřed. */
.pd-title-id {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-inline-start: 0.85em;
  white-space: nowrap;
}

.pd-location {
  font-size: var(--fs-md);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pd-location-sep { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   GALERIE
   -------------------------------------------------------------------------- */

.pd-gallery {
  position: relative;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-line);
  background: var(--bg-surface);
}

.pd-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* PŮVODNÍ velikost okna — nemění se */
  object-fit: cover;             /* landscape vyplní okno jako dřív */
  position: relative;
  z-index: 1;
}

/* Fotka na VÝŠKU: ukázat celou (contain), okraje vyplní rozmazané pozadí —
   okno zůstává stejně velké (16:9). Třídu nastavuje JS podle orientace fotky. */
.pd-gallery img.is-portrait { object-fit: contain; }

/* Rozmazané pozadí = táž fotka „cover" — vyplní boční okraje u fotek na výšku,
   ať rám nikdy nezeje prázdnotou a nic se neořezává. */
.pd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.12);
  transform: scale(1.2);
  pointer-events: none;
}

.pd-gallery-hero[data-hero-open] { cursor: zoom-in; }
.pd-gallery-hero { user-select: none; -webkit-user-drag: none; position: relative; z-index: 0; will-change: transform; }

/* Vsouvaná fotka při slide přechodu (odjezd staré + příjezd nové z boku).
   Selektor musí být specifičtější než `.pd-gallery img` (0,1,1), jinak by fotce
   vnutil position:relative + height:auto + aspect-ratio a slide by se rozhodil.
   object-fit ZÁMĚRNĚ neřešíme tady — dědí se `cover` z `.pd-gallery img` a
   `.pd-gallery img.is-portrait` ho u fotek na výšku přepne na `contain`. */
.pd-gallery img.pd-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;                /* přebít 16/9 z `.pd-gallery img` */
  z-index: 2;                        /* nad odjíždějící hero fotkou */
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* -------- Hero carousel: šipky + počítadlo -------- */
.pd-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  /* Bílé kolečko + tmavá šipka → čitelné na tmavé i světlé fotce (dřív tmavé
     kolečko splývalo s nočními fotkami). */
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  cursor: pointer;
  z-index: 2;
  opacity: 1;                                   /* trvale viditelné = hned poznat carousel */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
  transition: background var(--trans-fast), transform var(--trans-fast);
}
.pd-hero-nav svg { width: 20px; height: 20px; display: block; }
.pd-hero-nav:hover { background: #fff; }

/* Úvodní „swipe hint": hero jednou jemně cukne doleva a zpět → naznačí listování. */
@keyframes pd-hero-hint {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(-30px); }
  75%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.pd-gallery-hero.pd-hint { animation: pd-hero-hint 0.85s cubic-bezier(.4, 0, .2, 1) 1 both; }
@media (prefers-reduced-motion: reduce) {
  .pd-gallery-hero.pd-hint { animation: none; }
}
.pd-hero-nav:active { transform: translateY(-50%) scale(0.92); }
.pd-hero-prev { left: 14px; }
.pd-hero-next { right: 14px; }
.pd-hero-counter {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(12, 10, 7, 0.55);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
}
/* Dotyková zařízení (mobil/tablet): šipky pryč — listuje se prstem (swipe).
   Zůstává počítadlo + úvodní swipe hint. */
@media (hover: none) {
  .pd-hero-nav { display: none; }
}
/* Užší NE-dotykový displej: šipky o něco menší. */
@media (hover: hover) and (max-width: 700px) {
  .pd-hero-nav { width: 40px; height: 40px; }
}

/* Řada náhledů pod hlavní fotkou. Počet sloupců = kolik se vejde do řady;
   JS na poslední viditelnou dlaždici doplní overlay „+N". */
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--space-lg);
}
@media (min-width: 600px) {
  .pd-thumbs { grid-template-columns: repeat(6, 1fr); }
}

.pd-thumb {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.pd-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Poslední viditelná dlaždice: tmavší overlay s počtem dalších fotek */
.pd-thumb.is-more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 11, 0.62);
  color: var(--color-bone);
  display: grid;
  place-items: center;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* -------- Modal s celou galerií + lightbox jedné fotky -------- */
.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 10, 7, 0.94);
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.pd-modal[hidden] { display: none; }

.pd-modal-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-bone);
  padding: 4px 4px 12px;
}
.pd-modal-count { font-size: var(--fs-sm); letter-spacing: 0.04em; }
.pd-modal-close {
  background: none;
  border: 0;
  color: var(--color-bone);
  /* Zavírací × — vlastní clamp se stropem na původních 32px */
  font-size: clamp(26px, 1.2vw + 22px, 32px);
  line-height: 1;
  cursor: pointer;
}

.pd-modal-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* Vycentrovaný blok, max ~6 sloupců (větší náhledy) */
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  /* Pevná šířka dlaždice + VÝŠKA ŘÁDKU = šířka × 3/4 → vždy přesně 4:3.
     Nezávisí na (lazy) načtení fotek, takže se řádky nikdy nepřekrývají. */
  --pd-tile: clamp(150px, 44vw, 220px);
  grid-template-columns: repeat(auto-fill, var(--pd-tile));
  grid-auto-rows: calc(var(--pd-tile) * 3 / 4);
  justify-content: center;   /* pevné sloupce vycentrované v bloku */
  gap: 10px;
  align-content: start;   /* dlaždice od shora; delší galerie SCROLLUJE (overflow: auto výše) */
  padding-bottom: 8px;
  /* Vlastní zlatá scrollovací lišta místo defaultní systémové */
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: var(--color-gold-base) transparent;     /* palec / dráha */
  scroll-padding-block: 8px;
}
/* WebKit (Chrome/Safari/Edge) — tenká zlatá lišta s prostorem od dlaždic */
.pd-modal-grid::-webkit-scrollbar { width: 10px; }
.pd-modal-grid::-webkit-scrollbar-track {
  background: transparent;
}
.pd-modal-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-gold-hi), var(--color-gold-base));
  border-radius: 999px;
  /* průhledné okraje = odsazení palce od kraje, ať „plave" */
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pd-modal-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--color-gold-hi), var(--color-gold-hi));
  background-clip: padding-box;
}
@media (min-width: 600px) {
  .pd-modal-grid { gap: 12px; }
}
.pd-modal-grid[hidden] { display: none; }
.pd-modal-cell {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-control);
  overflow: hidden;
  display: block;
  position: relative;        /* rám pro absolutně umístěný obrázek */
  aspect-ratio: 4 / 3;       /* VŽDY stejná dlaždice; výšku řádku určuje POMĚR buňky, ne (lazy) obrázek */
}
.pd-modal-cell img {
  position: absolute;        /* mimo tok → nepodílí se na výšce grid řádku (fix překrývání u lazy fotek) */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-lightbox {
  margin: 0;
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-lightbox[hidden] { display: none; }
.pd-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-lb-prev,
.pd-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 16, 11, 0.55);
  color: var(--color-bone);
  /* Šipka lightboxu — vlastní clamp se stropem na původních 28px */
  font-size: clamp(24px, 1vw + 20px, 28px);
  line-height: 1;
  cursor: pointer;
}
.pd-lb-prev { left: 8px; }
.pd-lb-next { right: 8px; }

/* Mobil: fotka využije PLNOU šířku displeje (edge-to-edge), šipky jsou přes fotku
   a menší/decentní; přepínání jde i swipem (JS). */
@media (max-width: 700px) {
  .pd-modal { padding: 0; }
  .pd-modal-bar { padding: 10px 14px; }
  .pd-modal-grid { padding: 0 14px 14px; }
  .pd-lb-img { width: 100%; height: 100%; }   /* object-fit: contain z base → celá fotka, bez ořezu */
  .pd-lb-prev,
  .pd-lb-next {
    width: 40px; height: 40px;
    background: rgba(18, 16, 11, 0.4);
    font-size: 22px;
  }
  .pd-lb-prev { left: 6px; }
  .pd-lb-next { right: 6px; }
}

/* --------------------------------------------------------------------------
   ROZLOŽENÍ
   -------------------------------------------------------------------------- */

.pd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .pd-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }
  .pd-aside { position: sticky; top: 108px; }
}

.pd-block { margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   ZKRATKA „BACK TO RESULTS" — v lepkavém pravém panelu (desktop).
   Skrytá s nulovou výškou; vyjede, jakmile breadcrumb odscrolluje z dohledu
   (třídu .is-visible přepíná IntersectionObserver v detail.php).
   -------------------------------------------------------------------------- */
.pd-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  /* Skrytý stav = NULOVÁ výška (padding i border až ve .is-visible), jinak by
     26px tlačilo cenový panel dolů a rozbilo zarovnání se stat gridem. */
  padding: 0 16px;
  border: 0 solid var(--border-line);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(18, 16, 11, 0.08);
  transition: max-height 0.35s var(--ease-out), margin-bottom 0.35s var(--ease-out),
              padding 0.35s var(--ease-out), border-width 0.35s var(--ease-out),
              opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd-back.is-visible {
  max-height: 52px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pd-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pd-back:hover {
  border-color: var(--teal-accent);
  color: var(--teal-accent);
}

.pd-back:hover svg { transform: translateX(-3px); }

/* Mobil: pravý panel není lepkavý (je nahoře) — zkratku nezobrazujeme,
   breadcrumb a spodní lišta zůstávají. */
@media (max-width: 959px) {
  .pd-back { display: none; }
}

.pd-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin-bottom: var(--space-sm);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-line);
}

/* --------------------------------------------------------------------------
   PARAMETRY (FACT CHIPS)
   -------------------------------------------------------------------------- */

.pd-facts {
  list-style: none;
  display: grid;
  /* auto-fit: dlaždice vyplní šířku a v posledním řádku se ROZTÁHNOU → žádné
     prázdné buňky (a tím žádné „zlaté mezery"), ať je faktů kolik chce.
     ~2 sloupce na mobilu, ~4 na širší obrazovce. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border-line);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pd-fact {
  background: var(--bg-surface);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Ikona sedí v jemném zlatém odznaku — dává buňce strukturu. */
.pd-fact-badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(201, 162, 75, 0.12);
  display: grid;
  place-items: center;
  color: var(--color-gold-shadow);
}

.pd-fact-icon {
  width: 24px;
  height: 24px;
}

.pd-fact-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pd-fact-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pd-fact-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

/* Desktop: holá ikona vedle názvu parametru (1. řádek), hodnota na 2. řádku
   zarovnaná pod název (odsazená za ikonu), ne od levého okraje.
   Na mobilu zůstává vodorovné rozložení s odznakem výše.
   display:contents vytáhne label a value z .pd-fact-text do grid buňky. */
@media (min-width: 600px) {
  .pd-fact {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon  label"
      ".     value";
    align-items: center;
    column-gap: 16px;
    row-gap: 4px;
  }

  /* Jazýček v levém horním rohu buňky se zaobleným vnitřním rohem —
     stejná jemná zlatá jako odznak na mobilu, ikona na něm sedí jako na poli. */
  .pd-fact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    background: rgba(201, 162, 75, 0.12);
    border-bottom-right-radius: 14px;
    z-index: 0;
  }

  /* Odznak na desktopu bez vlastního pozadí — ikona leží na jazýčku. */
  .pd-fact-badge {
    grid-area: icon;
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--color-gold-shadow);
    /* Vycentrovat ikonu na jazýček (padding buňky ji jinak táhne dolů/vpravo).
       Nemění zarovnání názvu ani hodnoty. */
    transform: translate(-7px, -5px);
  }
  .pd-fact-icon { width: 22px; height: 22px; }
  .pd-fact-text  { display: contents; }
  .pd-fact-label { grid-area: label; }
  .pd-fact-value { grid-area: value; }
}

/* --------------------------------------------------------------------------
   PROČ PRÁVĚ TAHLE (generováno z dat)
   -------------------------------------------------------------------------- */

.pd-highlights {
  background: var(--color-ink);
  color: var(--color-bone);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
}

.pd-highlights::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-gold);
  opacity: 0.07;
  pointer-events: none;
}

.pd-highlights .pd-h2 {
  color: var(--color-bone);
  border-bottom-color: rgba(251, 248, 241, 0.16);
  position: relative;
}

.pd-highlight-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}

@media (min-width: 620px) {
  .pd-highlight-list { grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
}

.pd-highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--color-bone);
}

.pd-check {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   TYPOGRAFIE POPISU (výstup parseru)
   -------------------------------------------------------------------------- */

.pd-prose { color: var(--text-main); }

.prose-p {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--text-main);
  margin-bottom: var(--space-sm);
  max-width: 68ch;
}

.prose-lead {
  font-weight: 500;
}

.prose-h {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-main);
  margin: var(--space-md) 0 10px;
}

.prose-h-icon {
  margin-right: 8px;
  font-size: var(--fs-base);
}

.prose-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-sm);
}

.prose-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-main);
}

/* Krátké položky bez popisu = výbava: dva sloupce a fajfka */
/* Výbava jako tabulka (nadpisy = hlavičkové řádky) */
.pd-spec {
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pd-spec-head {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 11px var(--space-sm);
  border-bottom: 1px solid var(--border-line);
}

.pd-spec-head:not(:first-child) { border-top: 1px solid var(--border-line); }

.pd-spec-rows { list-style: none; }

.pd-spec-rows li {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 1.4fr;
  gap: var(--space-sm);
  padding: 11px var(--space-sm);
  font-size: var(--fs-base);
  line-height: 1.45;
  border-bottom: 1px solid var(--border-line);
}

.pd-spec-rows li:last-child { border-bottom: 0; }
.pd-spec-rows li:nth-child(even) { background: rgba(140, 100, 22, 0.025); }

.pd-spec-label { font-weight: 600; color: var(--text-main); }
.pd-spec-value { color: var(--text-main); }

.pd-spec-rows li > .pd-spec-label:only-child { grid-column: 1 / -1; font-weight: 400; }

.pd-spec-note {
  padding: 11px var(--space-sm);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-line);
}

@media (min-width: 620px) {
  .pd-spec-rows { columns: 2; column-gap: 0; }
  .pd-spec-rows li { break-inside: avoid; border-right: 1px solid var(--border-line); }
}

.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold-base);
}

.prose-li-term {
  font-weight: 600;
  color: var(--text-main);
}

.prose-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: var(--space-sm) 0;
  padding: 14px 18px;
  border: 1px solid var(--border-line);
  border-left: 3px solid var(--color-gold-base);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--bg-surface);
}

.prose-note p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-main);
}

.prose-note-icon { font-size: var(--fs-lg); line-height: 1.4; flex: none; }



/* --------------------------------------------------------------------------
   POPTÁVKOVÁ KARTA
   -------------------------------------------------------------------------- */

.pd-inquiry {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: 0 10px 30px rgba(18, 16, 11, 0.06);
}

.pd-price {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.pd-price span {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-muted);
}

.pd-price-note {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: rgba(201, 162, 75, 0.10);
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: var(--radius-card);
}

.pd-price-note-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);   /* bylo --color-gold-shadow → nesplňovalo AA kontrast na světlé */
  margin-bottom: 5px;
}

.pd-price-note p,
.pd-price-note li {
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--text-main);
}

.pd-price-note ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pd-price-note li {
  position: relative;
  padding-left: 16px;
}

.pd-price-note li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold-base);
}

.pd-availability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--teal-accent);
  margin: 14px 0 var(--space-sm);
}

.pd-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-accent);
}

.pd-btn-second { margin-top: 10px; }

/* Oddělovač + tlačítko Share v pravém panelu (nad seznamem důvěry) */
.pd-aside-share {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-line);
}

/* Uložit + Sdílet vedle sebe, zaručeně stejná šířka i výška (grid 1fr 1fr) */
.pd-aside-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.pd-aside-share .share { display: flex; }

.pd-aside-share .fav-btn--detail,
.pd-aside-share .share-toggle {
  width: 100%;
  justify-content: center;
}

/* Share je teď vycentrovaný modal (fixed) — v aside kontextu nepřepisuj pozici. */
.pd-aside-share .share-pop {
  left: 50%;
  right: auto;
}

.pd-trust {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: var(--space-md);
}

.pd-trust li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.pd-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
}

.pd-ref {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ID přesunuté nad CTA — mezera pod cenou i před tlačítkem */
.pd-ref-top {
  margin-top: var(--space-xs, 8px);
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   MOBILNÍ LIŠTA
   -------------------------------------------------------------------------- */

.pd-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 241, 0.96);
  border-top: 1px solid var(--border-line);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 20px rgba(18, 16, 11, 0.08);
}

.pd-sticky-price strong {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.pd-sticky-price span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Mobilní lišta: cena vlevo, pak zpětná ikonka + CTA seskupené vpravo.
   Cena tlačí zbytek doprava (margin-right:auto). Lišta je jen na mobilu (<960px). */
.pd-sticky-bar { justify-content: flex-start; }
.pd-sticky-price { margin-right: auto; }

.pd-sticky-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-line);
  background: #fff;
  color: var(--text-main);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pd-sticky-back svg { width: 18px; height: 18px; }
.pd-sticky-back:hover,
.pd-sticky-back:focus-visible {
  border-color: var(--teal-accent);
  color: var(--teal-accent);
}

@media (min-width: 960px) {
  .pd-sticky-bar { display: none; }
}

@media (max-width: 959px) {
  .pd-main { padding-bottom: 96px; }
  .pd-aside { order: -1; }
}

/* --------------------------------------------------------------------------
   PŘÍSTUPNOST
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pd-clamp-body,
  .pd-clamp-label { transition: none; }
}

/* --------------------------------------------------------------------------
   CO JE V OKOLÍ (vzdálenosti z tabulky, žádné souřadnice)
   -------------------------------------------------------------------------- */

.pd-nearby {
  list-style: none;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  overflow: hidden;
}

.pd-nearby li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 13px var(--space-sm);
  border-bottom: 1px solid var(--border-line);
}

.pd-nearby li:last-child { border-bottom: 0; }

.pd-nearby-name {
  font-size: var(--fs-base);
  color: var(--text-main);
}

.pd-nearby-detail {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-nearby-note {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   ZKRÁCENÍ POPISU — pouze na mobilu, bez JS
   -------------------------------------------------------------------------- */

.pd-clamp { position: relative; }

.pd-clamp-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pd-clamp-body { position: relative; }

.pd-clamp-label { display: none; }

@media (max-width: 959px) {
  .pd-clamp-body {
    max-height: 380px;
    overflow: hidden;
  }

  .pd-clamp-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgba(244, 240, 231, 0), var(--bg-main));
    pointer-events: none;
  }

  .pd-clamp-toggle:checked ~ .pd-clamp-body { max-height: none; }
  .pd-clamp-toggle:checked ~ .pd-clamp-body::after { display: none; }

  .pd-clamp-label {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-sm);
    padding: 11px 20px;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-control);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
    user-select: none;
    transition: background var(--trans-fast);
  }

  .pd-clamp-label:hover { background: rgba(18, 16, 11, 0.06); }

  .pd-clamp-close { display: none; }
  .pd-clamp-toggle:checked ~ .pd-clamp-label .pd-clamp-open { display: none; }
  .pd-clamp-toggle:checked ~ .pd-clamp-label .pd-clamp-close { display: inline; }

  .pd-clamp-toggle:focus-visible ~ .pd-clamp-label {
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.4);
  }
}

/* --------------------------------------------------------------------------
   V OKOLÍ — highlighted lokality (sloupec Nearby highlights)
   Kategorie jako podnadpis, místa jako seznam jméno + popis
   -------------------------------------------------------------------------- */

.pd-hl-cat {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-shadow);
  margin: var(--space-sm) 0 10px;
}

.pd-hl-cat:first-of-type { margin-top: 0; }

.pd-hl-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: var(--space-sm);
}

@media (min-width: 620px) {
  .pd-hl-list { grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
}

.pd-hl-list li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
}

.pd-hl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold-base);
}

.pd-hl-name {
  font-weight: 600;
  color: var(--text-main);
}

.pd-hl-desc {
  color: var(--text-muted);
}

.pd-hl-desc::before { content: " — "; color: var(--border-line); }

/* ==========================================================================
   VARIANTA DETAILU PRO PRODEJ (transaction != rent)
   Světlé pozadí + dvě TMAVÉ karty (galerie / obsah) + ZLATÝ boční panel
   a zlatý blok „Why this one". Aktivuje se třídou .pd-sale na <main>.
   ========================================================================== */

/* --- Tmavá plocha u prodeje = jen full-bleed hero (barvy + přemapování tokenů) --- */
.pd-sale .pd-media-card {
  background: var(--bg-dark-surface);
  color: var(--text-dark-main);
  margin-bottom: var(--space-lg);
  --bg-main: var(--bg-dark-surface);
  --bg-surface: #221D13;
  --text-main: var(--text-dark-main);
  --text-muted: var(--text-dark-muted);
  --border-line: var(--border-dark-line);
}

/* Eyebrow nad nadpisem (HOUSE · FOR SALE) zlatě jako akcent v tmavém hero */
.pd-sale .pd-media-card .pd-tags .eyebrow,
.pd-sale .pd-media-card .pd-tags .pd-dot { color: var(--color-gold-hi); }

/* První karta = full-bleed tmavý hero přes CELOU šířku obrazovky.
   Je přímým potomkem <main> (mimo .container), takže je full width bez 100vw
   triku (žádný horizontální scrollbar). Vnitřní obsah drží .pd-media-inner
   (má třídu .container) v obsahové šířce, ať text nejde až k okraji.
   Horní odsazení pod fixní hlavičku přebírá hero (ne main), takže tmavé
   pozadí vyplní prostor až k hlavičce — žádný světlý proužek nad hero. */
.pd-main.pd-sale { padding-top: 0; }
.pd-sale .pd-media-card {
  padding: clamp(100px, 8vw, 130px) 0 clamp(16px, 2.2vw, 28px);
}

/* Pruh specifikací = SVĚTLÁ karta v obsahové šířce (jako zbytek obsahu).
   Fakt grid uvnitř tak vypadá stejně jako u nájmu. */
.pd-sale .pd-specs-band {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 28px);
  margin-bottom: var(--space-lg);
}

/* Světlá plocha obsahu (Why this one + popis + výbava + okolí) — klidné čtení.
   Tmavá zůstává jen na pruhu specifikací; jediné výrazné pole je zlatá cena. */
.pd-sale .pd-read-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 28px);
}

/* Mezera mezi hlavní fotkou a řadou náhledů; dole karta těsní */
.pd-sale .pd-media-card .pd-gallery { margin-bottom: 12px; }
.pd-sale .pd-media-card .pd-thumbs { margin-bottom: 0; }

/* Hover breadcrumbu na tmavé kartě zlatě */
.pd-sale .pd-media-card .pd-breadcrumb a:hover { color: var(--color-gold-hi); }


/* --- „Why this one" na světlé (jako zbytek popisu); fajfky zlaté jako akcent.
   Dřív to byl zlatý blok soupeřící se zlatou cenovou kartou — teď na stránce
   dominuje jen cena. --- */
.pd-sale .pd-highlights {
  background: transparent;
  color: var(--text-main);
  border: none;
  padding: 0;
}
.pd-sale .pd-highlights::before { display: none; }
.pd-sale .pd-highlights .pd-h2 {
  color: var(--text-main);
  border-bottom-color: var(--border-line);
}
.pd-sale .pd-highlight-list li { color: var(--text-main); }
.pd-sale .pd-highlights .pd-check {
  background: var(--grad-gold);
  color: var(--color-ink);
}


/* --- Zlatý boční panel (poptávka) --- */
.pd-sale .pd-inquiry {
  background: var(--grad-gold);
  color: var(--color-ink);
  border: none;
  box-shadow: 0 14px 34px rgba(201, 162, 75, 0.28);
}
.pd-sale .pd-inquiry .eyebrow { color: rgba(18, 16, 11, 0.62); }
.pd-sale .pd-inquiry .pd-price { color: var(--color-ink); }
.pd-sale .pd-inquiry .pd-price span { color: rgba(18, 16, 11, 0.6); }

/* Cenová poznámka na zlaté → tmavý poloprůhledný box */
.pd-sale .pd-inquiry .pd-price-note {
  background: rgba(18, 16, 11, 0.10);
  border-color: rgba(18, 16, 11, 0.22);
}
.pd-sale .pd-inquiry .pd-price-note-label { color: rgba(18, 16, 11, 0.7); }
.pd-sale .pd-inquiry .pd-price-note p,
.pd-sale .pd-inquiry .pd-price-note li { color: var(--color-ink); }
.pd-sale .pd-inquiry .pd-price-note li::before { background: var(--color-ink); }

/* Důvěryhodnostní seznam + ref na zlaté */
.pd-sale .pd-inquiry .pd-aside-share { border-top-color: rgba(18, 16, 11, 0.2); }

/* Na zlatém panelu prodeje musí být uložené srdce tmavé — zlatá by splynula. */
.pd-sale .pd-inquiry .fav-btn--detail.is-active { color: var(--color-ink); background: transparent; border-color: rgba(18, 16, 11, 0.5); }
.pd-sale .pd-inquiry .fav-btn--detail.is-active .fav-heart { fill: var(--color-ink); stroke: var(--color-ink); }
.pd-sale .pd-inquiry .pd-trust li { color: rgba(18, 16, 11, 0.75); }
.pd-sale .pd-inquiry .pd-trust li::before { background: var(--color-ink); }
.pd-sale .pd-inquiry .pd-ref { color: rgba(18, 16, 11, 0.6); }

/* Tlačítka na zlaté: primární = tmavé plné, sekundární = tmavý obrys */
.pd-sale .pd-inquiry .btn-gold {
  background: var(--color-ink);
  color: var(--color-bone);
}
.pd-sale .pd-inquiry .btn-gold:hover {
  filter: none;
  background: #000;
  box-shadow: 0 8px 22px rgba(18, 16, 11, 0.3);
}
.pd-sale .pd-inquiry .pd-btn-second {
  color: var(--color-ink);
  border-color: rgba(18, 16, 11, 0.42);
}
.pd-sale .pd-inquiry .pd-btn-second::before { display: none; }
.pd-sale .pd-inquiry .pd-btn-second:hover {
  background: var(--color-ink);
  color: var(--color-bone);
  border-color: transparent;
}

/* ==========================================================================
   NOVÉ SEKCE — vybavení a okolí jako icon grid (bez rámečků), cenová pásma,
   deposit box a podobné nemovitosti. Ikony přes tr_icon() → currentColor.
   ========================================================================== */

/* --- Amenities: ikona + text, bez dlaždic --- */
.pd-amenities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 22px;
}
.pd-amenity { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
.pd-amenity-icon { width: 22px; height: 22px; color: var(--color-gold-base); flex: none; }
/* Amenita bez ikony → odrážková tečka v barvě ikony (stejný 22px slot, text zůstává zarovnaný) */
.pd-amenity-dot { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.pd-amenity-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold-base); }
.pd-amen-group {
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--color-gold-shadow); margin: 6px 0 12px;
}
.pd-amen-group + .pd-amenities { margin-bottom: 20px; }

/* --- Nearby: ikona + název + minuty, bez dlaždic --- */
.pd-near {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 22px;
}
.pd-near-item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
.pd-near-icon { width: 22px; height: 22px; color: var(--color-gold-base); flex: none; }
.pd-near-name { flex: 1; }
.pd-near-min {
  font-size: 12px; font-weight: 700; color: var(--teal-accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- Cenová pásma v panelu --- */
.pd-tiers { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 12px 0; }
.pd-tiers th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.55; font-weight: 700; padding: 6px 0;
}
.pd-tiers th:last-child, .pd-tiers td:last-child { text-align: right; }
.pd-tiers td { padding: 7px 0; border-top: 1px solid var(--border-line); font-variant-numeric: tabular-nums; }
.pd-tiers td:last-child { font-weight: 600; }

/* --- Deposit box --- */
.pd-deposit {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg-sunken); border-radius: 6px; padding: 11px 13px;
  margin-top: 14px; margin-bottom: 14px;   /* stejná mezera nad i pod (cena↔note = note↔ID) */
}
.pd-sale .pd-inquiry .pd-deposit { background: rgba(18, 16, 11, 0.06); color: rgba(18, 16, 11, 0.75); }

/* --- Podobné nemovitosti --- */
.pd-similar { margin-top: 48px; }
.pd-similar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px; margin-top: 18px;
}
.pd-similar-card {
  display: block; border: 1px solid var(--border-line); border-radius: var(--radius-card);
  overflow: hidden; background: var(--bg-surface); text-decoration: none; color: inherit;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.pd-similar-card:hover { box-shadow: 0 14px 34px rgba(18, 16, 11, 0.12); transform: translateY(-2px); }
.pd-similar-img { display: block; height: 150px; background: var(--grad-gold); background-size: cover; background-position: center; }
.pd-similar-body { display: block; padding: 13px 15px; }
.pd-similar-title { display: block; font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; margin-bottom: 3px; }
.pd-similar-price { display: block; font-size: var(--fs-base); color: var(--color-espresso); font-weight: 600; }   /* AA kontrast + sladěno s cenami v katalogu */
.pd-similar-loc { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pd-similar-id { display: block; font-size: 11px; color: var(--text-muted); opacity: .75; margin-top: 2px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   KONTAKTNÍ MODAL (Ask about this property / Request a viewing)
   =========================================================================== */
.cmodal[hidden] { display: none; }
.cmodal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
body.cmodal-open { overflow: hidden; }

.cmodal-backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 16, 10, 0.55);
    backdrop-filter: blur(2px);
}

.cmodal-panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-card, 16px);
    box-shadow: 0 24px 60px rgba(20, 16, 10, 0.28);
    padding: 26px 24px 24px;
    animation: cmodal-in 0.18s ease-out;
}
@keyframes cmodal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.cmodal-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    color: var(--text-muted); cursor: pointer;
    transition: background var(--trans-fast), color var(--trans-fast);
}
.cmodal-close:hover { background: rgba(0,0,0,0.06); color: var(--text-main); }
.cmodal-close svg { width: 20px; height: 20px; }

.cmodal-title {
    font-family: var(--font-serif); font-size: var(--fs-lg, 1.35rem);
    font-weight: 600; margin: 0 30px 2px 0; color: var(--text-main);
}
.cmodal-sub { margin: 0 0 18px; font-size: var(--fs-sm); color: var(--text-muted); }

/* Kanály */
.cmodal-channels {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px; margin-bottom: 6px;
}
.cmodal-ch {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 13px 8px; text-decoration: none;
    background: var(--bg-main, #faf8f4);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-control, 12px);
    color: var(--text-main); font-size: var(--fs-xs); font-weight: 600;
    transition: border-color var(--trans-fast), transform var(--trans-fast), box-shadow var(--trans-fast);
}
.cmodal-ch:hover {
    border-color: var(--color-gold-base);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20,16,10,0.10);
}
/* Ikona kanálu = zlatá ikona přímo na dlaždici (bez kolečka), jednotně. */
.cmodal-ch-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* Maskované brand ikony (WhatsApp/Line/Messenger) — stejné soubory jako patička, zlaté. */
.cmodal-ch-mask {
    display: block; width: 30px; height: 30px;
    background-color: var(--color-gold-shadow);
    -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
.cmodal-ch:hover .cmodal-ch-mask { background-color: var(--color-gold-base); }

/* Vektorové ikony (Email/Call) — stejný zlatý tah. */
.cmodal-ch-glyph { width: 30px; height: 30px; color: var(--color-gold-shadow); }
.cmodal-ch:hover .cmodal-ch-glyph { color: var(--color-gold-base); }

/* Oddělovač */
.cmodal-or {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 14px; color: var(--text-muted); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.cmodal-or::before, .cmodal-or::after {
    content: ""; flex: 1 1 0; height: 1px; background: var(--border-line);
}

/* Formulář */
.cmodal-form { display: flex; flex-direction: column; gap: 12px; }
.cmodal-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmodal-field { display: flex; flex-direction: column; gap: 5px; }
.cmodal-field > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.cmodal-field input,
.cmodal-field textarea {
    width: 100%; padding: 10px 12px;
    background: var(--bg-main, #faf8f4);
    border: 1px solid var(--border-line);
    border-radius: var(--radius-control, 10px);
    font: inherit; font-size: var(--fs-sm); color: var(--text-main);
    transition: border-color var(--trans-fast);
}
.cmodal-field input:focus,
.cmodal-field textarea:focus { outline: none; border-color: var(--color-gold-base); }
.cmodal-field textarea { resize: vertical; min-height: 62px; }
.cmodal-field--when[hidden] { display: none; }

.cmodal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cmodal-submit { margin-top: 4px; }

.cmodal-status {
    margin: 4px 0 0; font-size: var(--fs-sm); text-align: center;
}
.cmodal-status.is-ok  { color: #1f8a4c; }
.cmodal-status.is-err { color: #c0492f; }
.cmodal-status[hidden] { display: none; }

@media (max-width: 480px) {
    .cmodal { padding: 0; align-items: flex-end; }
    .cmodal-panel {
        max-width: none; max-height: 92vh;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        border-bottom: none;
    }
    .cmodal-row2 { grid-template-columns: 1fr; }
}