/* ==========================================================================
   THAIREAL DESIGN SYSTEM — FLUID TOKEN SYSTEM
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. FLUIDNÍ TYPOGRAFICKÁ ŠKÁLA (RESPONZIVNÍ BEZ BREAKPOINTŮ)
     ------------------------------------------------------------------------ */
  --fs-xs:   clamp(10px, 0.2vw + 10px, 11px);    /* Eyebrows, odznaky, kapitálky */
  --fs-sm:   clamp(12px, 0.25vw + 11px, 13px);   /* Chipy, pomocné texty, podtitulky */
  --fs-base: clamp(15px, 16.6px - 0.16vw, 16px);  /* Čtecí text + tlačítka: mobil ~16px (komfort), desktop 15px (původní) */
  --fs-md:   clamp(15px, 0.3vw + 14px, 16px);    /* Perexy, navigace */
  --fs-lg:   clamp(17px, 0.4vw + 16px, 18px);    /* h3, názvy karet, ceny */
  --fs-xl:   clamp(20px, 0.6vw + 18px, 22px);    /* Zvýrazněné podnadpisy, dlaždice lokalit */
  --fs-2xl:  clamp(24px, 1.2vw + 20px, 32px);    /* h2 sekční nadpisy */
  --fs-3xl:  clamp(32px, 2.2vw + 24px, 44px);    /* h1 hero nadpisy */

  /* ------------------------------------------------------------------------
     2. FLUIDNÍ ODSASENÍ (SPACING & PADDING SYSTEM)
     ------------------------------------------------------------------------ */
  --space-xs: clamp(4px, 0.4vw, 8px);
  --space-sm: clamp(8px, 0.8vw, 12px);
  --space-md: clamp(16px, 1.5vw, 24px);
  --space-lg: clamp(24px, 2.5vw, 40px);
  --space-xl: clamp(48px, 4vw, 80px);

  /* ------------------------------------------------------------------------
     3. ZNAČKOVÉ BARVY & GRADIENTY
     ------------------------------------------------------------------------ */
  --color-gold-base: #C9A24B;
  --color-gold-hi: #E7C878;
  --color-gold-shadow: #9C7A34;
  --color-ink: #12100B;
  --color-bone: #F3EEE3;

  --grad-gold: linear-gradient(135deg, #E7C878 0%, #C9A24B 50%, #9C7A34 100%);
  --grad-dark-ink: linear-gradient(180deg, #2C241B 0%, #12100B 100%);

  /* ------------------------------------------------------------------------
     4. POZADÍ, TEXTY & LÍNIE
     ------------------------------------------------------------------------ */
  --bg-main: #F4F0E7;
  --bg-surface: #FBF8F1;
  --bg-sunken: #ECE6D6;   /* teplá zapuštěná plocha — recessed pás pod stránkou,
                             na kterém světlá karta (--bg-surface) vyskočí nahoru */
  --text-main: #211E17;
  --color-espresso: #2C241B;   /* dark brown hlavičky/patičky (vršek --grad-dark-ink) — teplejší než šedo-černá --text-main */
  --text-muted: #6E695C;
  --border-line: #E3DCCC;
  --teal-accent: #1F5E57;

  --bg-dark-main: #12100B;
  --bg-dark-surface: #1B1810;
  --text-dark-main: #F3EEE3;
  --text-dark-muted: #A69C86;
  --border-dark-line: #2A2418;
  --teal-dark-accent: #3E9E8E;

  /* ------------------------------------------------------------------------
     5. TYPOGRAFIE, RADIUS & TRANZICE
     ------------------------------------------------------------------------ */
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  --radius-control: 4px;
  --radius-card: 8px;
  --max-width: 1120px;

  /* Easing křivky jako tokeny — ať se magické bezier hodnoty neopakují po CSS.
     Doba trvání zůstává u konkrétní tranzice (liší se podle prvku), sdílí se
     jen tvar křivky. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* UI mikrointerakce (hover, focus) */
  --ease-slow: cubic-bezier(0.25, 1, 0.5, 1);   /* pomalé reveal/carousel pohyby */

  --trans-fast: 0.25s var(--ease-out);
  --trans-medium: 0.35s var(--ease-out);
}

/* ==========================================================================
   GLOBÁLNÍ RESET & MAPOVÁNÍ TYPOGRAFIE NA TOKENY
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   PŘÍSTUPNOST — globální
   ========================================================================== */

/* SKIP LINK: první focusovatelný prvek stránky. Skrytý, dokud na něj klávesnice
   nenajede — pak přeskočí navigaci rovnou na obsah. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--color-ink);
  color: var(--color-bone);
  border-radius: var(--radius-control);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--trans-fast);
}

.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--color-gold-hi);
  outline-offset: 2px;
}

/* Cíl skip-linku nesmí po zaostření zobrazit rušivý focus prstenec */
[id="main-content"]:focus { outline: none; }

/* REDUCED MOTION: kdo si v systému vyžádá méně pohybu, dostane web bez animací
   a bez plynulého scrollování. Univerzální pojistka nad všemi styly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background-color: var(--bg-main);
  background-image: radial-gradient(120% 80% at 50% 0%, #F8F4EC, #F1ECE1);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* SECTION PADDING & LAYOUT UTILITIES */
.section-padding {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border-line);
}

/* Odsazení obsahu pod fixní hlavičkou pro podstránky bez hero sekce */
.main-with-padding {
  padding-top: clamp(100px, 8vw, 130px);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* UNIVERSAL SECTION HEADERS */
.section-header {
  margin-bottom: var(--space-lg);
}

.section-header.text-center {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  margin-top: var(--space-xs);
}

/* NADPISY — Navázány na fluidní škálu */
h1, h2, h3 {
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-3xl);
  line-height: 1.08;
}

h2 {
  font-size: var(--fs-2xl);
  line-height: 1.15;
}

h3, .card-title {
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   SDÍLENÁ UI ŠIPKA — nahrazuje textové „→" v odkazech a tlačítkách.
   Stejný glyf jako svc_icon('arrow'). Velikost v em → škáluje s textem,
   currentColor → převezme barvu kontextu. Posune se při hoveru nadřazeného
   odkazu/karty (kde už vlastní animaci nemá jako .dropdown-action-arrow).
   ========================================================================== */
.ui-arrow {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  vertical-align: -0.18em;   /* zarovnání s účařím v inline kontextech */
  transition: transform var(--trans-fast);
}

.btn-text:hover .ui-arrow,
.location-card:hover .ui-arrow,
.article-card:hover .ui-arrow { transform: translateX(3px); }

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--teal-accent);
  text-decoration: none;
}

/* ==========================================================================
   GLOBAL BUTTON SYSTEM (VARIANTS, SIZES & STATES)
   ========================================================================== */

.btn {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 22px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all var(--trans-fast);
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.4);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* VELIKOSTNÍ VARIANTY */
.btn-sm {
  font-size: var(--fs-sm);
  padding: 9px 14px;
}

.btn-lg {
  font-size: var(--fs-md);
  padding: 18px 32px;
}

.btn-full {
  width: 100%;
}

/* BAREVNÉ VARIANTY — GOLD */
.btn-gold {
  background: var(--grad-gold);
  color: var(--color-ink);
  border: 1px solid transparent;
}

.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.25);
  transform: translateY(-1px);
}

.btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.btn-gold-outline {
  background: transparent;
  color: var(--color-gold-hi);
  border: 1px solid var(--color-gold-base);
}

.btn-gold-outline:hover {
  background: rgba(201, 162, 75, 0.1);
  border-color: var(--color-gold-hi);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* BAREVNÉ VARIANTY — DARK BROWN */
.btn-black,
.btn-dark,
.btn-primary {
  position: relative;
  background: var(--grad-dark-ink);
  color: var(--color-bone);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.25);
  z-index: 1;
  transition: color var(--trans-medium), 
              box-shadow var(--trans-medium), 
              transform var(--trans-fast);
}

.btn-black::before,
.btn-dark::before,
.btn-primary::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--grad-gold);
  opacity: 0;
  z-index: -1;
  border-radius: var(--radius-control);
  transition: opacity var(--trans-medium);
}

.btn-black:hover::before,
.btn-dark:hover::before,
.btn-primary:hover::before {
  opacity: 1;
}

.btn-black:hover,
.btn-dark:hover,
.btn-primary:hover {
  color: var(--color-ink);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.35);
  transform: translateY(-2px);
}

.btn-black:active,
.btn-dark:active,
.btn-primary:active {
  transform: translateY(0);
}

.btn-black-outline,
.btn-dark-outline {
  position: relative;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  z-index: 1;
  transition: color var(--trans-medium), 
              border-color var(--trans-medium), 
              transform var(--trans-fast), 
              box-shadow var(--trans-fast);
}

.btn-black-outline::before,
.btn-dark-outline::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--grad-gold);
  opacity: 0;
  z-index: -1;
  border-radius: var(--radius-control);
  transition: opacity var(--trans-medium);
}

.btn-black-outline:hover::before,
.btn-dark-outline:hover::before {
  opacity: 1;
}

.btn-black-outline:hover,
.btn-dark-outline:hover {
  color: var(--color-ink);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.25);
  transform: translateY(-2px);
}

.btn-black-outline:active,
.btn-dark-outline:active {
  transform: translateY(0);
}

/* BAREVNÉ VARIANTY — WHITE / LIGHT */
.btn-white,
.btn-light {
  background-color: var(--bg-main);
  color: var(--color-ink);
  border: 1px solid var(--bg-main);
}

.btn-white:hover,
.btn-light:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.btn-white-outline,
.btn-light-outline {
  background: transparent;
  color: var(--bg-main);
  border: 1px solid rgba(244, 240, 231, 0.3);
}

.btn-white-outline:hover,
.btn-light-outline:hover {
  background: rgba(244, 240, 231, 0.08);
  border-color: var(--bg-main);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* TEXTOVÝ ODKAZ S PODTRŽENÍM */
.btn-text {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-bottom: 1.5px solid;
  border-image: var(--grad-gold) 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-text:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

.btn-text-dark {
  color: var(--text-dark-main);
}

.btn svg,
.btn-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform var(--trans-fast);
}

.btn:hover svg,
.btn-arrow:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   HLAVIČKA (HEADER & FLOATING PILL SYSTEM)
   ========================================================================== */

/* 1. VÝCHOZÍ FIXNÍ HEADER (Homepage nahoře — 100% průhledný) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 24px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all var(--trans-medium);
}

/* 2. SOLID HEADER (Detail/Properties nahoře — tmavý gradient přes celou šířku) */
.site-header.header-solid {
  background: var(--grad-dark-ink);
  border-bottom: 1px solid var(--border-dark-line);
  padding: 16px 0;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* Vycentrovaná navigace v gridu 1fr auto 1fr se jinak přimáčkne k pravé
     utilitní skupině (pravý sloupec se smrskne na její šířku, veškerý volný
     prostor spadne doleva) — nav pak doléhá na měnu/CTA s nulovou mezerou.
     column-gap drží zaručený odstup na obou stranách navigace. Desktopová
     hlavička se ukazuje až od 1200px (níž je burger), takže i nejužší desktop
     má prostor: mezera startuje na ~8px a s rostoucí šířkou naroste do ~28px. */
  column-gap: clamp(8px, calc((100vw - 1120px) * 0.1), 28px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  transition: all var(--trans-medium);
}

.header-brand {
  justify-self: start;
}

.brand-logo-img {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: height 0.35s ease;
}

.nav-links {
  justify-self: center;
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav-links > a,
.dropdown-toggle {
  font-size: var(--fs-md);
  font-weight: 500;
  color: #FFFFFF;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-links > a:hover,
.dropdown-toggle:hover {
  color: var(--color-gold-hi);
}

.dropdown-toggle svg {
  transition: transform 0.2s ease;
}

/* DROPDOWN MENU */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;   /* aby se "Expat admin & concierge" vešlo na jeden řádek */
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark-line);
  border-radius: var(--radius-card);
  padding: 10px 0;
  margin-top: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s var(--ease-out);
  z-index: 120;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown.active .dropdown-toggle svg,
.nav-dropdown:hover .dropdown-toggle svg {
  transform: rotate(180deg);
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: var(--fs-md);
  color: var(--text-dark-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dark-main);
}

/* --------------------------------------------------------------------------
   ČLENĚNÍ ROLETKY
   Dvě SYMETRICKÉ skupiny (Property services / Rentals) — obě mají návěští
   stejného typu, takže jediná položka pod Rentals nepůsobí jako osiřelá
   výjimka, ale jako skupina, která zatím má jednu položku. Až přibude
   půjčovna aut nebo kol, zapadne pod stejné návěští bez přestavby.
   Rozcestník je dole jako AKCE, ne nahoře jako nadpis nad seznamem.
   -------------------------------------------------------------------------- */
.dropdown-divider {
  display: block;
  height: 1px;
  margin: 8px 20px;
  background: var(--border-dark-line);
}

.dropdown-group {
  display: block;
  margin: 12px 20px 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border-dark-line);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-hi);   /* 10.9:1 na tmavém panelu */
}

/* První návěští je hned pod horní hranou panelu — nemá co oddělovat */
.dropdown-group:first-child {
  margin-top: 2px;
  padding-top: 0;
  border-top: none;
}

/* Rozcestník jako akce, ne jako položka kategorie */
.dropdown-action {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--text-dark-main) !important;
}

.dropdown-action-arrow { transition: transform var(--trans-fast); }
.dropdown-action:hover .dropdown-action-arrow { transform: translateX(3px); }

.header-actions {
  justify-self: end;
}

.btn-header {
  padding: 14px 26px;
  font-size: var(--fs-base);
}

/* ==========================================================================
   PŘEPÍNAČ MĚN (globální — hlavička + mobilní zásuvka)
   Logika a převod cen: assets/js/currency.js
   ========================================================================== */
.header-actions {
  display: flex;
  align-items: center;
  /* Odstup zlatého CTA od utilitní skupiny — plný „solidní" prvek potřebuje
     víc vzduchu než odkazy, jinak působí namačkaně na srdíčko. */
  gap: 24px;
}

/* Měna + oblíbené = tichá utilitní skupina, oddělená od navigace vlasovou
   linkou; jediný „solidní" prvek v hlavičce zůstává zlaté CTA.
   Rozestupy skupiny jsou vědomě ohraničené (24px kolem) a uvnitř těsnější
   (18px), aby měna+srdíčko držely pohromadě jako jeden celek. */
.header-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 24px;
  border-left: 1px solid rgba(244, 240, 231, 0.18);
}

.currency-switcher {
  position: relative;
}

/* Ghost ovládání — splývá s navigací (žádný rám ani výplň, velikost jako odkazy). */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--trans-fast);
}

.currency-toggle:hover { color: var(--color-gold-hi); }

.currency-globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.9;
}

.currency-caret {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform var(--trans-fast);
}

.currency-switcher.is-open .currency-caret {
  transform: rotate(180deg);
}

.currency-current {
  font-variant-numeric: tabular-nums;
}

.currency-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark-line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--trans-fast), transform var(--trans-fast), visibility var(--trans-fast);
  z-index: 130;
}

.currency-switcher.is-open .currency-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.currency-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--text-dark-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.currency-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dark-main);
}

.currency-option-sym {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--color-gold-hi);
  font-variant-numeric: tabular-nums;
}

.currency-option-code {
  font-weight: 700;
  letter-spacing: 0.03em;
  min-width: 30px;
}

.currency-option-name {
  color: var(--text-dark-muted);
  font-size: var(--fs-xs);
  margin-left: 2px;
}

.currency-option-check {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  color: var(--color-gold-hi);
  transition: opacity var(--trans-fast);
}

.currency-option.is-active {
  color: var(--text-dark-main);
}

.currency-option.is-active .currency-option-check {
  opacity: 1;
}

/* Inline varianta — mobilní zásuvka. „Ghost" řádek jako položky menu
   (bez dlaždice); rozbalený seznam měn lícuje s podmenu Services/Guides. */
.currency-switcher--inline {
  width: 100%;
}

.currency-switcher--inline .currency-toggle {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 2px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-radius: 0;
}

.currency-switcher--inline .currency-toggle:hover { color: var(--color-gold-hi); }

.currency-switcher--inline .currency-globe {
  width: 20px;
  height: 20px;
  opacity: 1;
  color: var(--color-gold-hi);
}

.currency-switcher--inline .currency-current {
  margin-right: auto;
  letter-spacing: 0.01em;
}

.currency-switcher--inline .currency-caret {
  width: 11px;
  height: 7px;
  color: rgba(244, 240, 231, 0.6);
}

.currency-switcher--inline .currency-menu {
  position: static;
  min-width: 0;
  width: 100%;
  margin: 4px 0 0;
  padding: 2px 0 4px 32px;   /* odsazení = zarovnání pod text vedle ikony */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Pojistka proti přetečení mimo obrazovku (velmi nízké displeje). */
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.currency-switcher--inline.is-open .currency-menu {
  display: block;
}

.currency-switcher--inline .currency-option {
  padding: 8px 6px;
  border-radius: 6px;
}
.currency-switcher--inline .currency-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   SDÍLENÍ STRÁNKY (detail nemovitosti + guides/resources)
   Tlačítko se přizpůsobí podkladu přes currentColor; popover je vždy světlá
   karta. Logika: assets/js/share.js
   ========================================================================== */
.share {
  position: relative;
  display: inline-block;
}

.share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

.share-toggle:hover {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.share-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Share = plnohodnotný modal (stejná prezentace jako „Ask about this property"
   cmodal): fixed, vycentrovaný, široký a čitelný na mobilu i PC. Backdrop dimuje
   pozadí. share.js jen přepíná .is-open + [hidden] a stopuje klik dovnitř. */
.share-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1301;
  width: min(440px, 92vw);
  max-width: none;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px 22px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(18, 16, 11, 0.28);
  text-align: left;
  animation: share-pop-in 0.18s ease-out;
}
@keyframes share-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Ztmavené pozadí za modalem (klik zavře přes document handler v share.js). */
.share.is-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.share-open { overflow: hidden; }

/* Flip nahoru už nedává smysl (modal je vždy vycentrovaný) — necháme na místě. */
.share-pop--up { top: 50%; bottom: auto; }

.share-pop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.share-pop-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-main);
}

.share-pop-close {
  display: inline-flex;
  padding: 4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--trans-fast), background var(--trans-fast);
}

.share-pop-close svg { width: 18px; height: 18px; }
.share-pop-close:hover { color: var(--text-main); background: rgba(18, 16, 11, 0.06); }

.share-link-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.share-copy-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}

.share-url {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-control);
}

.share-copy {
  flex-shrink: 0;
  padding: 9px 14px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-bone);
  background: var(--grad-dark-ink);
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: opacity var(--trans-fast);
}

.share-copy:hover { opacity: 0.9; }
.share-copy.is-copied { background: var(--teal-accent); }

.share-net-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.share-net {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}

.share-net:hover {
  background: rgba(18, 16, 11, 0.04);
  border-color: var(--text-muted);
}

.share-net-ico {
  display: inline-flex;
  flex-shrink: 0;
}

.share-net-ico svg { width: 22px; height: 22px; }
.share-net-ico--mail { color: var(--teal-accent); }
.share-net-ico--more { color: var(--text-muted); }

/* Umístění v hlavičce detailu a v hero průvodců/resources */
.pd-head-share {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gd-hero-share { margin-top: 22px; }

/* Web Share API tlačítko „More" ať zabírá celý řádek pod dvojicí sítí */
.share-net.share-native { grid-column: 1 / -1; justify-content: center; }

/* ==========================================================================
   OBLÍBENÉ — srdíčka na kartách/detailu, počítadlo v hlavičce, popover, stránka
   Logika: assets/js/favorites.js
   ========================================================================== */

/* ---- Srdíčko na kartě (overlay přes fotku) ---- */
.fav-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fav-heart { display: block; }

.fav-btn--card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #FFFFFF;
  background: rgba(18, 16, 11, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--trans-fast), transform var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.fav-btn--card .fav-heart { width: 18px; height: 18px; }
.fav-btn--card:hover { background: rgba(18, 16, 11, 0.62); transform: scale(1.08); }

/* Uložený stav — zlaté vyplněné srdce */
.fav-btn.is-active .fav-heart { fill: #E7C878; stroke: #E7C878; }
.fav-btn--card.is-active {
  color: #E7C878;
  border-color: rgba(231, 200, 120, 0.9);
  background: rgba(18, 16, 11, 0.6);
}

/* ---- Srdíčko na detailu (tlačítko s popiskem, ladí s .share-toggle) ---- */
.fav-btn--detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: inherit;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-control);
  transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}
.fav-btn--detail .fav-heart { width: 16px; height: 16px; }
.fav-btn--detail:hover {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* Uloženo = plné (fill) zlaté tlačítko s tmavým textem — na světlém podkladu
   je zlatý outline neviditelný, proto fill. (Zlatý panel „for sale" si to
   přebíjí v property-detail.css, tam zůstává tmavá outline verze.) */
.fav-btn--detail.is-active {
  color: var(--color-ink);
  background: var(--grad-gold);
  border: 1px solid transparent;
}
.fav-btn--detail.is-active:hover {
  background: var(--grad-gold);
  border: 1px solid transparent;
  filter: brightness(0.95);
}
.fav-btn--detail.is-active .fav-heart { fill: var(--color-ink); stroke: var(--color-ink); }

/* ---- Hlavička: srdíčko s počítadlem + popover ---- */
.fav-hub { position: relative; display: inline-block; }

/* Ghost — splývá s navigací; jediný barevný akcent je zlaté počítadlo. */
.fav-hub-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color var(--trans-fast);
}
.fav-hub-toggle:hover { color: var(--color-gold-hi); }
.fav-hub-ico { width: 19px; height: 19px; flex-shrink: 0; }
.fav-hub.has-favs .fav-hub-ico { fill: #E7C878; stroke: #E7C878; }
.fav-hub--header .fav-hub-label { display: none; }   /* desktop: jen ikona + počet */

.fav-hub-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
  background: var(--grad-gold);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* Bez tohohle přebíjí .fav-hub-count { display } atribut [hidden] a „0" svítí pořád. */
.fav-hub-count[hidden] { display: none; }

.fav-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: min(340px, 88vw);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 48px rgba(18, 16, 11, 0.18);
  text-align: left;
}
.fav-pop-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fav-pop-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-main); }
.fav-pop-close { display: inline-flex; padding: 4px; color: var(--text-muted); background: transparent; border: none; border-radius: 4px; cursor: pointer; }
.fav-pop-close svg { width: 18px; height: 18px; }
.fav-pop-close:hover { color: var(--text-main); background: rgba(18, 16, 11, 0.06); }

.fav-pop-list { display: flex; flex-direction: column; gap: 4px; }
.fav-row { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-control); }
.fav-row:hover { background: rgba(18, 16, 11, 0.04); }
.fav-row-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; }
.fav-row-img { flex-shrink: 0; width: 52px; height: 44px; border-radius: 6px; overflow: hidden; background: #EAE4D6; }
.fav-row-img img { width: 100%; height: 100%; object-fit: cover; }
.fav-row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-row-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-row-price { font-size: var(--fs-sm); color: var(--text-muted); }
.fav-row-remove { flex-shrink: 0; display: inline-flex; padding: 6px; margin-right: 4px; color: var(--text-muted); background: transparent; border: none; border-radius: 50%; cursor: pointer; }
.fav-row-remove svg { width: 15px; height: 15px; }
.fav-row-remove:hover { color: var(--text-main); background: rgba(18, 16, 11, 0.08); }

.fav-pop-empty { padding: 14px 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.fav-pop-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-line); font-size: var(--fs-xs); color: var(--text-muted); }
.fav-note-link { font: inherit; color: var(--teal-accent); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }
.fav-pop-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-bone); background: var(--grad-dark-ink); border-radius: var(--radius-control); }
.fav-pop-all .ui-arrow { width: 16px; height: 16px; }

/* ---- Utility prvky v mobilní zásuvce (oblíbené + měna) ----
   „Ghost" řádky ve stejném stylu jako navigační odkazy: bez dlaždice,
   jen ikona se zlatým akcentem + text. Decentně pod navigací. */
.drawer-utils {
  display: flex;
  flex-direction: column;
}

.drawer-util {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 2px;
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 500;
  background: transparent;
  border: none;
}
.drawer-util:hover { color: var(--color-gold-hi); }
.drawer-util-ico {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-gold-hi);
}
.drawer-util-ico svg { width: 20px; height: 20px; }
.drawer-util-label { margin-right: auto; letter-spacing: 0.01em; }
.mobile-fav-link .fav-hub-count { margin-left: auto; }

/* ---- Stránka /favorites ---- */
.fav-page-head { margin-bottom: clamp(24px, 3vw, 36px); }
.fav-page-head h1 { margin-top: 8px; }
.fav-page-sub { margin-top: 8px; color: var(--text-muted); }
.fav-page-empty {
  max-width: 460px;
  margin: clamp(30px, 6vw, 70px) auto;
  text-align: center;
}
.fav-page-empty-ico { display: inline-flex; color: var(--color-gold-shadow); margin-bottom: 12px; }
.fav-page-empty-ico svg { width: 46px; height: 46px; }
.fav-page-empty h2 { font-family: var(--font-serif); }
.fav-page-empty p { margin: 10px 0 22px; color: var(--text-muted); }

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  /* MUSÍ mít position, jinak se z-index ignoruje a otevřená zásuvka (.nav-links,
     z-index 1100) překryje křížek. 1200 > zásuvka → X zůstane navrchu a klikací. */
  position: relative;
  z-index: 1200;
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--text-dark-main);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* MOBILNÍ PRAVÝ CLUSTER — oblíbené + měna + burger (jen < 1200px; desktop má
   .header-actions). Tmavé ikonky jako burger, ať jsou vidět na světlé hlavičce. */
.header-mobile-right {
  display: none;               /* desktop: skryté (ukazuje se .header-actions) */
  align-items: center;
  gap: 4px;
}

.hm-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-dark-main);
  border-radius: 999px;
  transition: color var(--trans-fast), background var(--trans-fast);
}
.hm-fav svg { width: 22px; height: 22px; }
.hm-fav:hover { color: var(--teal-accent); }
.hm-fav .fav-hub-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}

.currency-switcher--mobile .currency-toggle {
  color: var(--text-dark-main);
  gap: 5px;
  padding: 6px 4px;
  font-size: var(--fs-sm);
}
.currency-switcher--mobile .currency-toggle:hover { color: var(--teal-accent); }
.currency-switcher--mobile .currency-globe { width: 18px; height: 18px; opacity: 1; }
/* Explicitní reveal (jistota nad cascade) — menu vyjede pod přepínačem. */
.currency-switcher--mobile.is-open .currency-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 3. SCROLLED STAV (Transformace v plovoucí pilulku na JAKÉKOLIV stránce) */
.site-header.is-scrolled {
  top: 18px;
  padding: 0;
  background: transparent !important;
  border-bottom: none !important;
}

/* TMAVÉ SKLO
   Samotná nižší alfa nefunguje: tmavá průsvitná vrstva nad světlým podkladem
   se vždy smíchá do šedé a panel zbledne. Trik je ztmavit podklad JEŠTĚ PŘED
   smícháním — brightness() uvnitř backdrop-filter. Panel pak zůstane tmavý,
   ale je skutečně průhledný: pod ním jsou vidět rozostřené tvary.
     brightness(0.45) → ztmaví, co je za panelem
     saturate(150%)   → vytáhne barvy, aby sklo nebylo mrtvé
     alfa 0.55        → tón, ne krycí vrstva
   Zrnitost skla řeší ::after níž. */
.site-header.is-scrolled .header-inner {
  position: relative;
  background-color: rgba(18, 16, 11, 0.65);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(201, 162, 75, 0.18), transparent 70%);
  backdrop-filter: blur(24px) saturate(150%) brightness(0.28) contrast(1.1);
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(0.28) contrast(1.1);
  border: 1px solid rgba(244, 240, 231, 0.15);
  border-radius: 12px;
  padding: 14px 36px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 75, 0.12);
}

/* Zrnitost skla — stejná textura, jakou používají hero a CTA pásy.
   overlay blend ji vpije do panelu místo aby ležela navrchu jako špína. */
.site-header.is-scrolled .header-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E") repeat;
  background-size: 160px 160px;
  opacity: 0.25;
  mix-blend-mode: overlay;
}

/* Obsah hlavičky musí zůstat nad zrnem */
.site-header.is-scrolled .header-brand,
.site-header.is-scrolled .header-actions,
.site-header.is-scrolled .header-mobile-right,
.site-header.is-scrolled .mobile-nav-toggle {
  position: relative;
  z-index: 1;
}

/* .nav-links má na mobilu vlastní z-index 1100 — nepřepisovat ho */
@media (min-width: 1200px) {
  .site-header.is-scrolled .nav-links {
    position: relative;
    z-index: 1;
  }
}

.site-header.is-scrolled .brand-logo-img {
  height: 38px;
}

/* MOBILNÍ NAVIGACE (< 1200px) — pod 1200px se desktopová hlavička nevejde
   s dostatečnými rozestupy (logo + navigace + utilitní skupina se tlačí od
   kraje ke kraji), proto přepíná na burger menu. */
@media (max-width: 1199px) {
  .site-header {
    padding: 14px 0;
  }

  .hero-section {
    padding-top: 72px;
  }

  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .header-actions {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: flex;
    z-index: 1200;
  }

  .header-mobile-right {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: clamp(280px, 82vw, 340px);
    height: 100vh;
    height: 100dvh;
    z-index: 1100;

    background-color: rgba(18, 16, 11, 0.98);
    background-image: radial-gradient(130% 60% at 50% 0%, rgba(201, 162, 75, 0.22), transparent 90%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border-left: 1px solid rgba(244, 240, 231, 0.15);
    border-radius: 20px 0 0 20px;

    padding: 84px 24px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.7);

    /* Obsah (např. rozbalená roletka měn) se roluje uvnitř zásuvky,
       nikdy nepřeteče mimo obrazovku. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    transform: translateX(100%);
    transition: transform var(--trans-medium), visibility 0.35s ease;
    display: flex;
    visibility: hidden;
    pointer-events: none;
  }

  .site-header.nav-open .nav-links {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  /* Otevřeno = X nad tmavou zásuvkou → proužky musí být světlé, jinak splynou. */
  .site-header.nav-open .hamburger-bar {
    background-color: #FBF8F1;
  }

  .site-header.nav-open .hamburger-bar:nth-child(1) {
    transform: translateY(3.75px) rotate(45deg);
  }

  .site-header.nav-open .hamburger-bar:nth-child(2) {
    transform: translateY(-3.75px) rotate(-45deg);
  }

  .nav-links > a,
  .dropdown-toggle {
    font-size: var(--fs-md);
    font-weight: 500;
    color: #FFFFFF;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(244, 240, 231, 0.1);
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown .dropdown-menu {
    position: static;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 14px;
    margin-top: 0;
    transform: none;
    transition: all var(--trans-fast);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    /* Dost místa i pro nejvyšší roletku (Services: 2 skupiny + odkazy +
       "View all") — s 200px se spodní položky (Motorbike Rental) ořezávaly. */
    max-height: 640px;
    padding-top: 8px;
  }

  .dropdown-menu a {
    padding: 6px 0;
    font-size: var(--fs-base);
    color: var(--text-dark-muted);
  }

  /* V zásuvce nemá menu vlastní panel, tak oddělovače lícují s textem */
  .dropdown-divider { margin: 6px 0; }

  .dropdown-group {
    margin: 10px 0 2px;
    padding-top: 10px;
  }

  /* Preferences hned pod navigací (dřív margin-top:auto = přišpendlené dolů). */
  .mobile-drawer-cta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(244, 240, 231, 0.1);
  }

  /* Primární CTA zůstává dole v zásuvce (odtlačí ho auto-margin). */
  .mobile-drawer-btn {
    margin-top: auto;
  }

  .drawer-utils-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 240, 231, 0.5);
    padding-left: 2px;
    margin-bottom: 4px;
  }

}

@media (min-width: 1200px) {
  .mobile-drawer-cta,
  /* Zásuvkové CTA je JEN pro mobil (přišpendlené dole v drawer). Na desktopu
     sedí uvnitř <nav>, takže bez skrytí prosákne do řádku navigace jako druhá
     položka „Contact the Team" — CTA je vpravo v .header-actions (btn-header). */
  .mobile-drawer-btn {
    display: none !important;
  }
  .header-actions {
    display: flex;
  }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
  background-color: var(--bg-dark-main);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(201, 162, 75, 0.12), transparent 60%);
  color: var(--text-dark-main);
  padding: 160px 0 64px;
  border-bottom: 1px solid var(--border-dark-line);
}

.hero-header {
  max-width: 680px;
  margin-bottom: 36px;
}

.hero-section .eyebrow {
  color: var(--color-gold-hi);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text-dark-main);
  margin: 12px 0 16px;
  line-height: 1.1;
}

.hero-sub {
  font-size: var(--fs-md);
  color: var(--text-dark-muted);
  line-height: 1.6;
}

/* CONCIERGE CARD */
.concierge-card {
  background-color: rgba(244, 240, 231, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(227, 220, 204, 0.8);
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.concierge-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

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

.concierge-card .eyebrow {
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

/* Nápověda pod polem: informace, že AI hledá v jakémkoliv jazyce. Menší písmo
   = sekundární; barva --color-espresso drží AA kontrast na světlé kartě. */
.concierge-hint {
  margin: 12px 2px 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-espresso);
}

.concierge-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #FFFFFF;
  border: 1px solid rgba(200, 190, 169, 0.8);
  border-radius: var(--radius-control);
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.concierge-input-wrap:focus-within {
  border-color: var(--teal-accent);
  box-shadow: 0 0 0 3px rgba(31, 94, 87, 0.18);
}

.concierge-input-wrap svg {
  stroke: var(--teal-accent);
  flex-shrink: 0;
}

.concierge-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: var(--fs-base);
  outline: none;
  color: var(--color-ink);
  font-weight: 500;
}

.concierge-input::placeholder {
  color: #8C8575;
}

/* AI search — mikrofon + odeslání (sdílená struktura pro VŠECHNY výskyty).
   Barvy zde platí pro světlý kontext (index); tmavý hero na properties si je
   přebíjí v properties.css. Layout (velikost/tvar) je všude stejný. */
.cat-ai-mic,
.cat-ai-go {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.cat-ai-mic svg,
.cat-ai-go svg { width: 20px; height: 20px; stroke: currentColor; }

/* Mikrofon = ghost ikona (zatím připravená pro pozdější použití) */
.cat-ai-mic { background: none; color: var(--text-muted); }
.cat-ai-mic:hover { color: var(--text-main); background: rgba(18, 16, 11, 0.06); }

/* Odeslání = plné teal tlačítko (primární akce na světlé kartě) */
.cat-ai-go { background: var(--teal-accent); color: #FFFFFF; }
.cat-ai-go:hover { background: #17463F; }

/* AI akční tlačítka pod hledacím polem (Delete ✕ / ↺ Last results) — sdílené
   homepage i /properties. Barvy pro tmavé hero přebíjí properties.css. */
.ai-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ai-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}
.ai-act svg { width: 16px; height: 16px; stroke: currentColor; }
.ai-act[hidden] { display: none; }
/* Delete = brandová červená (default; na světlé kartě). */
.ai-act-clear { color: #C74634; border-color: rgba(199, 70, 52, 0.55); }
.ai-act-clear:hover { background: #C74634; color: #fff; border-color: #C74634; }
.ai-act-clear span { font-size: 1.05em; }
/* Last results = na světlé homepage teal (kontrast); na tmavém hero zlatě (properties.css). */
.concierge-card .ai-act-last { color: var(--teal-accent); border-color: rgba(31, 94, 87, 0.5); }
.concierge-card .ai-act-last:hover { background: var(--teal-accent); color: #fff; border-color: var(--teal-accent); }

.concierge-suggestions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.concierge-suggestions a {
  color: var(--teal-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.concierge-suggestions a:hover {
  color: var(--color-ink);
}

.hero-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 32px 0 20px 0;
  color: #8A8372;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-divider::before,
.hero-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(244, 240, 231, 0.12);
}

.hero-divider span {
  padding: 0 18px;
}

/* ==========================================================================
   KATALOG TOOLBAR & TOGGLES
   ========================================================================== */

.catalog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-line);
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  flex-wrap: wrap;
}

.catalog-desktop-link {
  margin-left: auto;
}

.intent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: #E2DBD0;
  border: 1px solid var(--border-line);
  padding: 3px;
  border-radius: var(--radius-control);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.intent-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 9px 18px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--trans-medium), box-shadow var(--trans-medium);
}

.intent-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform var(--trans-medium);
}

.intent-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-dark-ink);
  opacity: 0;
  z-index: -1;
  border-radius: 3px;
  transition: opacity var(--trans-medium);
}

.intent-btn:hover {
  color: var(--text-main);
}

.intent-btn.active::before {
  opacity: 1;
}

.intent-btn.active {
  color: var(--color-bone);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

/* Zlatý akcent na ikoně aktivního přepínače — vizuálně odliší zvolený režim */
.intent-btn.active .intent-icon {
  color: #E7C878;
  transform: scale(1.06);
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border-line);
}

.catalog-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-control);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--trans-fast);
}

.chip-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--trans-fast), transform var(--trans-fast);
}

.filter-chip:hover {
  background: rgba(18, 16, 11, 0.06);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.filter-chip:hover .chip-icon {
  opacity: 1;
}

.filter-chip.active {
  background: var(--grad-dark-ink);
  border-color: var(--color-ink);
  color: var(--color-bone);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(18, 16, 11, 0.25);
}

.filter-chip.active .chip-icon {
  opacity: 1;
  color: #E7C878;
  transform: scale(1.05);
}

/* ==========================================================================
   KATALOG NEMOVITOSTÍ & KARTY
   ========================================================================== */

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.property-card {
  position: relative;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--trans-medium), box-shadow var(--trans-medium),
              border-color var(--trans-medium);
}

/* Zlatý akcentní proužek nahoře — objeví se při najetí, sjednotí karty s brandem */
.property-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans-medium);
  z-index: 4;
}

.property-card:hover {
  transform: translateY(-6px);
  border-color: var(--teal-accent);
  box-shadow: 0 18px 40px -12px rgba(18, 16, 11, 0.28);
}

.property-card:hover::before {
  transform: scaleX(1);
}

.property-card:hover .card-title {
  color: var(--teal-accent);
}

.property-card.dark-mode:hover {
  border-color: #C9A24B;
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
}

.property-card.dark-mode:hover .card-title {
  color: #E7C878;
}

.card-title {
  transition: color var(--trans-medium);
}

.card-img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #EAE4D6;
  overflow: hidden;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.property-card:hover .card-img-wrap img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   VODOZNAK LOGA — vypálený PŘÍMO DO SOUBORŮ fotek (PhotoProcessor / app:rewatermark).
   CSS overlay proto ZRUŠEN (jinak by byl vodoznak dvojitý). Kontejnery fotek si
   nechávají position:relative kvůli status tagům / počítadlu galerie / arrowům.
   -------------------------------------------------------------------------- */
.card-img-wrap,
.location-card,
.buy-lane-media,
.about-media,
.pd-gallery,
.pd-modal-cell { position: relative; }

/* Lightbox: vodoznak je v samotném souboru (fotka se zobrazuje celá), overlay netřeba. */
.pd-lb-wm { display: none; }

/* STATUS TAGS (KARTY + INLINE PODPORA PRO DETAIL) */
.status-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-control);
  color: #FFF;
}

.status-tag.status-tag-inline {
  position: static;
  display: inline-flex;
}

.status-tag.available {
  background: var(--teal-accent);
}

.status-tag.rented {
  background: #EAE4D6;
  color: var(--text-muted);
}

.status-tag.investment {
  background: var(--grad-gold);
  color: var(--color-ink);
  font-weight: 700;
}

.card-content {
  padding: clamp(14px, 1.6vw, 18px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Drobné ID nabídky na kartě (grid / index / lokality) — decentní, pod meta řádkem. */
.card-id {
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .75;
  margin-top: 3px;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.property-card.dark-mode .card-id { color: var(--text-dark-muted); }

.card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.card-price {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-espresso);   /* dark brown (hlavička/patička) místo šedo-černé */
  white-space: nowrap;   /* cena + měna vždy na jednom řádku (฿ prefix je krátký) */
}

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

.card-units {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.card-unit { display: inline-flex; align-items: center; gap: 4px; }
.card-unit-ico { width: 15px; height: 15px; flex: none; }

/* TMAVÁ VARIANTA KARET */
.property-card.dark-mode {
  background-color: var(--bg-dark-surface);
  border-color: var(--border-dark-line);
}

.property-card.dark-mode .card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-dark-main);
}

.property-card.dark-mode .card-meta {
  color: var(--text-dark-muted);
}

.property-card.dark-mode .card-footer {
  border-top-color: var(--border-dark-line);
}

.property-card.dark-mode .card-price {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);   /* dřív --fs-xl; zmenšeno, ať se dlouhé ceny (฿16,150,000) vejdou na řádek */
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.property-card.dark-mode .card-units {
  color: var(--text-dark-muted);
}

.catalog-footer-action {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* Katalogová sekce na indexu: nahoře primární CTA na celý katalog (text vlevo,
   tlačítko vpravo), pod ním ochutnávka nově přidaných. Mobil = sloupec. */
.catalog-lead {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-line);
}

.catalog-lead-copy {
  max-width: 640px;
}

.catalog-lead-copy h2 {
  margin: 6px 0 8px;
}

.catalog-lead-copy p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin: 0;
}

.catalog-lead-btn {
  flex-shrink: 0;
}

.catalog-latest-head {
  margin-bottom: 20px;
}

.catalog-latest-head h3 {
  margin: 4px 0 0;
}

/* Prázdný stav mřížky (žádné pronájmy / žádný prodej v datech) */
.catalog-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.catalog-empty a {
  color: var(--teal-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .catalog-lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .catalog-lead-btn {
    width: 100%;
  }

  .catalog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .catalog-toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .intent-toggle {
    width: 100%;
  }

  .intent-btn {
    flex: 1;
    text-align: center;
  }

  .toolbar-divider {
    display: none;
  }

  .catalog-filters {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .catalog-desktop-link {
    display: none !important;
  }

  .catalog-footer-action .btn {
    width: 100%;
  }
}

/* ==========================================================================
   METRIKY / SOCIAL PROOF BAR
   ========================================================================== */

.metrics-section {
  background: var(--bg-main);
  padding: 32px 0;
  border-bottom: 1px solid var(--border-line);
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-item + .metric-item {
    border-left: 1px solid var(--border-line);
  }
}

.metric-number {
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--text-main);
  display: block;
}

/* ==========================================================================
   ABOUT US
   ========================================================================== */

#about {
  background-color: var(--bg-surface);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.about-img {
  border-radius: var(--radius-card);
  border: 1px solid var(--border-line);
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-content p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}

.about-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.about-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-base);
}

.about-checklist .check-icon {
  /* KONTRAST: --color-gold-base dává na světlém jen 2.3:1 → gold-shadow (3.8:1) */
  color: var(--color-gold-shadow);
  font-weight: bold;
}

/* ==========================================================================
   CHECK BADGE — zlaté kolečko s ✓ (SDÍLENÝ PRVEK, kanonická podoba)
   Jedna definice pro celý web: detail nemovitosti (.pd-check) i stránky služeb.
   Ink na zlatém gradientu = vysoký kontrast, nesmí se nahrazovat SVG ikonou,
   ať zůstane optická váha ✓ všude stejná.
   ========================================================================== */

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

.trust-strip {
  background-color: var(--bg-dark-surface);
  background-image: var(--grad-dark-ink);
  color: var(--color-bone);
  border: 1px solid var(--border-dark-line);
  padding: clamp(18px, 2vw, 24px) clamp(28px, 4.2vw, 52px);
  border-radius: var(--radius-card);
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-base);
  box-shadow: 0 10px 28px rgba(18, 16, 11, 0.12);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-gold);
}

/* ==========================================================================
   DLAŽDICE LOKALIT
   ========================================================================== */

.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .location-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.location-card {
  position: relative;
  height: 380px;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  border: 1px solid var(--border-line);
  box-shadow: 0 4px 16px rgba(18, 16, 11, 0.06);
  transition: transform 0.5s var(--ease-slow),
              box-shadow 0.5s var(--ease-slow),
              border-color 0.5s ease;
}

.location-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(18, 16, 11, 0.22);
  border-color: rgba(201, 162, 75, 0.35);
}

.location-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-slow);
}

.location-card:hover .location-bg {
  transform: scale(1.03);
}

.location-overlay {
  position: absolute;
  inset: 0;
  /* Výchozí gradient: nahoře čistá fotka, dolní polovina (kde je text) výrazně
     tmavší → text je čitelný i bez hoveru. Hover přidá ::after (ještě tmavší). */
  background: linear-gradient(
      180deg,
      rgba(18, 16, 11, 0.05) 0%,
      rgba(18, 16, 11, 0.32) 42%,
      rgba(18, 16, 11, 0.74) 72%,
      rgba(18, 16, 11, 0.92) 100%
    );
  z-index: 1;
}

.location-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg, 
      rgba(18, 16, 11, 0.15) 0%, 
      rgba(18, 16, 11, 0.85) 50%, 
      rgba(18, 16, 11, 0.98) 100%
    );
  opacity: 0;
  transition: opacity 0.5s var(--ease-slow);
}

.location-card:hover .location-overlay::after {
  opacity: 1;
}

.location-content {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 2vw, 24px);
  color: var(--color-bone);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Jistota čitelnosti na světlých místech fotky (nebe, pláž). */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.location-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-hi);
  display: block;
  margin-bottom: 2px;
}

.location-header h3 {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}

.location-details {
  max-height: 0;
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 0.5s var(--ease-slow),
              opacity 0.4s ease-out,
              transform 0.5s var(--ease-slow);
}

.location-details p {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-bone);
  opacity: 0.9;
  margin: 8px 0 12px 0;
}

.location-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gold-hi);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 768px) {
  .location-card:hover .location-details {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .location-card {
    height: 320px;
  }

  .location-overlay::after {
    opacity: 0.8;
  }

  .location-details {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   GOOGLE REVIEWS & CAROUSEL STYLES
   ========================================================================== */

.google-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  font-size: var(--fs-md);
  color: #1c1c1c;
}

.google-score-num {
  font-weight: 700;
  /* Mezi --fs-lg a --fs-xl, vlastní clamp se stropem na původních 20px */
  font-size: clamp(18px, 0.5vw + 15px, 20px);
}

/* KONTRAST: Google žlutá #fbbc05 dává na světlém jen 1.6:1 — hvězdy nesou
   informaci (hodnocení), takže potřebují 3:1. Značková gold-shadow dá 3.8:1
   a Google původ nese logo G vedle. */
.google-score-row .stars-rating {
  color: var(--color-gold-shadow);
  letter-spacing: 2px;
}

.google-count-text {
  color: #666666;
}

.reviews-carousel-wrap {
  position: relative;
  margin-top: 48px;
  display: flex;
  align-items: center;
}

.reviews-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  width: 100%;
  padding: 8px 4px 24px 4px;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

#reviews .review-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  /* Sekce reviews je teď na --bg-surface (odliší se od počítadla nad ní),
     takže karty musí být o stupeň světlejší, jinak by v sekci splynuly. */
  background: #FFFFFF;
  border: 1px solid var(--border-line);
  border-radius: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(18, 16, 11, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#reviews .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(18, 16, 11, 0.1);
}

.review-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.review-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #1c1c1c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-base);
}

.review-user-name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-base);
  color: #1c1c1c;
}

.review-meta {
  display: block;
  font-size: var(--fs-sm);
  color: #666666;
  margin-top: 2px;
}

.google-g-small {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.review-card .stars-rating {
  color: var(--color-gold-shadow);   /* viz kontrastní poznámka výš */
  font-size: var(--fs-base);
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.review-text {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: #333333;
  font-style: italic;
}

/* Karusel na homepage: ořízni text na pár řádků, ať jedna dlouhá recenze
   (klidně 900+ znaků) nenatáhne přes flex-stretch všechny karty do obří
   výšky. Plné znění recenzí je na stránce /reviews. */
#reviews .review-text {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* NAVIGAČNÍ ŠIPKY KARUSELU */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  background: var(--grad-dark-ink);
  color: var(--color-bone);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);

  transition: color var(--trans-medium), 
              box-shadow var(--trans-medium), 
              transform var(--trans-fast);
}

.carousel-nav-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--grad-gold);
  opacity: 0;
  z-index: -1;
  border-radius: 50%;
  transition: opacity var(--trans-medium);
}

.carousel-nav-btn:hover::before {
  opacity: 1;
}

.carousel-nav-btn:hover {
  color: var(--color-ink);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.35);
  transform: translateY(calc(-50% - 2px));
}

.carousel-nav-btn:active {
  transform: translateY(-50%);
}

.carousel-nav-btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--trans-fast);
}

.carousel-nav-btn.prev:hover svg {
  transform: translateX(-2px);
}

.carousel-nav-btn.next:hover svg {
  transform: translateX(2px);
}

.carousel-nav-btn.prev {
  left: -20px;
}

.carousel-nav-btn.next {
  right: -20px;
}

@media (max-width: 768px) {
  .carousel-nav-btn {
    display: none;
  }
  #reviews .review-card {
    flex: 0 0 280px;
    padding: 20px;
  }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .faq-grid {
    grid-template-columns: 320px 1fr;
    gap: 56px;
  }

  .faq-sidebar {
    position: sticky;
    top: 100px;
  }
}

.faq-sidebar .eyebrow {
  display: block;
  margin-bottom: 8px;
}

.faq-sidebar h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  margin-bottom: 12px;
}

.faq-intro {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin-bottom: 24px;
}

.faq-contact-card {
  background: var(--bg-dark-surface);
  background-image: var(--grad-dark-ink);
  color: var(--color-bone);
  border: 1px solid var(--border-dark-line);
  padding: clamp(16px, 1.8vw, 20px);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(18, 16, 11, 0.15);
}

.faq-contact-card h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-dark-main);
}

.faq-contact-card p {
  font-size: var(--fs-sm);
  color: var(--text-dark-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.faq-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}

.faq-item:hover {
  border-color: rgba(201, 162, 75, 0.4);
}

.faq-item[open] {
  border-color: var(--color-gold-base);
  border-left: 4px solid var(--color-gold-base);
  box-shadow: 0 6px 20px rgba(18, 16, 11, 0.05);
  background: #FFFFFF;
}

.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-main);
  padding: clamp(16px, 1.8vw, 20px) clamp(18px, 2vw, 24px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--trans-fast);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] .faq-summary {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.faq-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(18, 16, 11, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 16px;
  transition: background var(--trans-fast), transform var(--trans-fast);
}

.faq-icon {
  width: 16px;
  height: 16px;
  stroke: var(--color-ink);
  transition: transform var(--trans-medium);
}

.faq-item[open] .faq-icon-wrap {
  background: var(--grad-gold);
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  stroke: var(--color-ink);
}

.faq-content {
  padding: 0 24px 20px 24px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  border-top: 1px solid transparent;
}

.faq-item[open] .faq-content {
  border-top-color: rgba(227, 220, 204, 0.5);
  padding-top: 14px;
}

/* ==========================================================================
   JOURNAL / ARTICLES
   ========================================================================== */

.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.article-card {
  /* Sekce Insights je na --bg-surface — karty proto bílé, ať v ní vyniknou
     (stejné řešení jako recenzní karty). */
  background: #FFFFFF;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-card);
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  /* Karta je teď celá klikací odkaz */
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(18, 16, 11, 0.05);
  transition: transform var(--trans-medium), border-color var(--trans-medium), box-shadow var(--trans-medium);
}

.article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 75, 0.45);
  box-shadow: 0 12px 28px rgba(18, 16, 11, 0.09);
}

.article-card .eyebrow {
  color: var(--teal-accent);
}

/* Šipka „Read article“ je uvnitř odkazu span, ne vlastní odkaz — animuje se na hover karty */
.article-card .btn-text {
  color: var(--text-main);
  font-weight: 600;
}

.article-card:hover .btn-text { color: var(--color-gold-shadow); }

.article-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 8px 0;
  color: var(--text-main);
}

.article-desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-bottom: 16px;
  flex-grow: 1;
}

/* ==========================================================================
   FINAL CTA / HYBRID CONCIERGE SECTION
   ========================================================================== */

.cta-section {
  background-color: var(--bg-dark-main);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(201, 162, 75, 0.12), transparent 60%);
  color: var(--text-dark-main);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-dark-line);
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .cta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}

.cta-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-info .eyebrow {
  color: var(--color-gold-hi);
}

.cta-info h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--text-dark-main);
  line-height: 1.15;
}

.cta-info p {
  color: var(--text-dark-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.cta-direct-contact {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dark-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-direct-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-hi);
  font-weight: 600;
}

.cta-actions-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gold-hi);
  font-weight: 600;
  font-size: var(--fs-base);
  transition: color var(--trans-fast);
}

.cta-phone-link:hover {
  color: var(--color-bone);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-custom-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.btn-custom-icon-mask {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url('assets/img/icons/whatsapp_svg.svg') no-repeat center / contain;
  mask: url('assets/img/icons/whatsapp_svg.svg') no-repeat center / contain;
}

.cta-form-card {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark-line);
  border-radius: var(--radius-card);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 162, 75, 0.12);
}

.concierge-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dark-main);
  margin-bottom: 2px;
}

.form-input,
.form-textarea {
  width: 100%;
  background: rgba(18, 16, 11, 0.7);
  border: 1px solid var(--border-dark-line);
  border-radius: var(--radius-control);
  padding: 12px 16px;
  color: var(--text-dark-main);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: #8C8270;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-gold-base);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

.form-legal-note {
  font-size: var(--fs-sm);
  color: var(--text-dark-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 6px;
}

.form-legal-note a {
  color: var(--color-gold-hi);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-legal-note a:hover {
  color: var(--color-bone);
}

/* ==========================================================================
   SVĚTLÁ VARIANTA CTA SEKCE (kontaktní stránka)
   Stejný dvousloupcový layout jako index #contact, jen ve světlém motivu.
   ========================================================================== */
.cta-section--light {
  background-color: var(--bg-surface);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(201, 162, 75, 0.10), transparent 60%);
  color: var(--text-main);
  border-top: 1px solid var(--border-line);
}
.cta-section--light::after { opacity: 0.28; }          /* jemnější zrno na světlém */

.cta-section--light .cta-info h2 { color: var(--text-main); }
.cta-section--light .cta-info p { color: var(--text-muted); }
.cta-section--light .cta-info .eyebrow,
.cta-section--light .cta-direct-label { color: var(--color-gold-shadow); }  /* hlubší zlatá – čitelná na krémové */
.cta-section--light .cta-direct-contact { border-top-color: var(--border-line); }
.cta-section--light .cta-phone-link { color: var(--text-main); }
.cta-section--light .cta-phone-link:hover { color: var(--color-gold-base); }

.cta-section--light .cta-form-card {
  background: #fff;
  border: 1px solid var(--border-line);
  box-shadow: 0 20px 48px rgba(30, 22, 11, 0.10), 0 0 0 1px rgba(201, 162, 75, 0.08);
}
.cta-section--light .form-label { color: var(--text-main); }
.cta-section--light .form-input,
.cta-section--light .form-textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-line);
  color: var(--text-main);
}
.cta-section--light .form-input::placeholder,
.cta-section--light .form-textarea::placeholder { color: #A69E8C; }
.cta-section--light .form-input:focus,
.cta-section--light .form-textarea:focus {
  border-color: var(--color-gold-base);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}
.cta-section--light .form-legal-note { color: var(--text-muted); }
.cta-section--light .form-legal-note a { color: var(--color-gold-base); }

/* ==========================================================================
   GLOBAL FOOTER STYLES
   ========================================================================== */

.site-footer {
  background-color: #0d0c0a;
  border-top: 1px solid var(--border-dark-line);
  padding: var(--space-xl) 0 var(--space-md);
  color: var(--text-dark-muted);
  font-size: var(--fs-base);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Patička má pět sloupců (značka + 4 navigační). Skládá se postupně, ať se
   na tabletu nezúží na nečitelné proužky. */
@media (min-width: 560px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (min-width: 860px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  /* Značka zabere celý řádek nad navigací, jinak by ji nikdo nepřečetl */
  .footer-col.footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  /* Sloupce dle obsahu + rovnoměrné rozdělení volného místa → stejné mezery
     mezi VŠEMI sloupci. Dřív equal-fr sloupce dávaly u kratších textů (Guides)
     opticky nesourodou mezeru vlevo/vpravo, protože text je zarovnaný vlevo. */
  .footer-grid {
    grid-template-columns: 240px max-content max-content max-content 260px;
    justify-content: space-between;
    column-gap: 24px;
  }
  .footer-col.footer-brand { grid-column: auto; }
}

/* Kontaktní údaje sedí pod odkazy ve stejném sloupci — potřebují odsazení */
.footer-col .footer-links + .footer-contact-list {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-dark-line);
}

.footer-col.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 22px;
}

.footer-logo-img {
  height: clamp(68px, 2.5vw + 36px, 96px);
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-desc {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-dark-muted);
  margin-bottom: 20px;
  max-width: 290px;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark-line);
  transition: border-color var(--trans-fast), transform var(--trans-fast);
}

.footer-socials a:hover {
  border-color: var(--color-gold-base);
  transform: translateY(-2px);
}

.footer-socials .icon-mask {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-gold-hi);
  -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;
  transition: background-color var(--trans-fast);
}

.footer-socials a:hover .icon-mask {
  background-color: var(--color-gold-base);
}

.footer-title {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-hi);
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-links,
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a,
.footer-contact-list a,
.contact-item span {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-dark-muted);
  text-decoration: none;
  transition: color var(--trans-fast);
}

.footer-links a:hover,
.footer-contact-list a:hover {
  color: var(--color-bone);
}

.contact-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
}

.contact-icon {
  width: 18px;
  height: 18px;
  color: var(--color-gold-hi);
  flex-shrink: 0;
  margin-top: 2px;
}

.hours-tag {
  color: var(--text-dark-main);
  font-weight: 500;
}

.footer-bottom {
  border-top: 1px solid var(--border-dark-line);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #625B4D;
}

@media (min-width: 600px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.copyright,
.legal-links a {
  font-size: var(--fs-sm);
  color: #625B4D;
  text-decoration: none;
  transition: color var(--trans-fast);
}

.legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

.legal-links a:hover {
  color: var(--color-gold-hi);
}

/* ==========================================================================
   BUY & INVEST LANE
   ========================================================================== */

.bg-surface   { background-color: var(--bg-surface); }
.bg-parchment { background-color: var(--bg-main); }

.buy-lane {
  background-color: var(--bg-dark-main);
  background-image: radial-gradient(130% 70% at 50% 0%, rgba(201, 162, 75, 0.12), transparent 60%);
  color: var(--text-dark-main);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-dark-line);
  border-bottom: 1px solid var(--border-dark-line);
}

.buy-lane .eyebrow { color: var(--color-gold-hi); }

.buy-lane-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }

@media (min-width: 900px) {
  .buy-lane-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

.buy-lane h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-dark-main);
  font-size: var(--fs-2xl);
  margin: 10px 0 14px;
}

.buy-lane p {
  color: var(--text-dark-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-bottom: 8px;
}

.buy-lane-price {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.buy-lane-actions { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.buy-lane-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-dark-line);
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.buy-lane-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   GRAIN TEXTURE OVERLAYS
   ========================================================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E") repeat;
  background-size: 160px 160px;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.hero-section,
.buy-lane,
.cta-section,
.site-footer { position: relative; }

.hero-section > .container,
.buy-lane   > .container,
.cta-section > .container,
.site-footer > .container { position: relative; z-index: 1; }

.hero-section::after,
.buy-lane::after,
.cta-section::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E") repeat;
  background-size: 160px 160px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}