:root {
  /* Primary žije jako RGB složky → umožní alpha bez color-mix (Chrome 65+).
     Hover = rgb(var(--color-primary-rgb) / 0.8) = ekvivalent bg-primary/80. */
  --color-primary-rgb: 27 67 50;
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-light: #2D6A4F;
  --color-accent: #C4953A;
  --color-background: #FDFAF5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F0E8;
  --color-border: #E8E0D4;
  --color-text: #1A1A1A;
  --color-text-secondary: #5C5C5C;
  --color-text-muted: #8A8A8A;
  --color-text-on-primary: #FDFAF5;
  --color-success: #2D6A4F;
  --color-danger: #C0392B;
  --color-open: #27AE60;
  --color-closed: #C0392B;
  --color-order: #9A6700;
  --color-order-bg: rgba(196, 149, 58, 0.18);
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.08);
  /* 5úrovňová ×2 škála. Volba podle kontextové blízkosti, ne velikosti elementu:
     xs label↔input · sm těsné (badge) · md sedí k sobě · lg dál / mezi kartami · xl sekce */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --max-width: 1200px;
  --nav-height: 72px;
  /* horizontální padding stránky — na mobilu se přepne na 16px (viz @media) */
  --page-px: var(--space-lg);
}

[data-theme="dark"] {
  --color-primary-rgb: 82 183 136;
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-light: #74C69D;
  --color-accent: #D4A84B;
  --color-background: #111111;
  --color-surface: #1A1A1A;
  --color-surface-alt: #222222;
  --color-border: #333333;
  --color-text: #F0EDE8;
  --color-text-secondary: #B0AAA0;
  --color-text-muted: #9C9C9C;
  --color-text-on-primary: #111111;
  --color-order: #E0A93B;
  --color-order-bg: rgba(196, 149, 58, 0.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.4);
}

/* Base reset scoped to website layout */
.website-layout {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* :where() → specificita 0. Base styly nadpisů jsou jen výchozí; jakákoli
   .X__title / .X__heading třída (0,1,0) je vždy přebije. Konec specificita bugů. */
.website-layout :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--space-md) 0;
}

.website-layout :where(h1) { font-size: 2.5rem; }
.website-layout :where(h2) { font-size: 1.5rem; }
.website-layout :where(h3) { font-size: 1.5rem; }
.website-layout :where(h4) { font-size: 1.5rem; }

/* :where() → specificita 0, aby barvy odkazů z tříd (.X__btn, .X__link…) vyhrály.
   Holé <a> dál dědí výchozí primární barvu. */
.website-layout :where(a) {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.website-layout :where(a:hover) {
  color: rgb(var(--color-primary-rgb) / 0.8);
}

/* :where() → specificita 0, takže `.X { margin }` třídy na <p> konečně vyhrají.
   Holé <p> (popisy, bannery) dál dědí tento výchozí margin. */
.website-layout :where(p) {
  margin: 0 0 var(--space-md) 0;
}

.website-layout * {
  box-sizing: border-box;
}
/* ========================================
   Navigation
   ======================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

/* max-width 1200 + horizontální padding 32px (stejně jako content stránky) */
.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--page-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative;
}

.nav__brand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.nav__brand:hover {
  color: rgb(var(--color-primary-rgb) / 0.8);
}

.nav__center {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  max-width: 560px;
}

/* Spojený search element: input (béžový) + select lékáren (bílý) jako jeden box.
   Bez gapu a bez borderu mezi nimi — dělí je jen barva pozadí. */
/* wrapper so the autosuggest dropdown isn't clipped by nav__search's overflow:hidden */
.nav__search-wrap {
  flex: 1;
  position: relative;
  /* without this, the mobile search overlay's intrinsic width keeps the
     row from shrinking to fit, overflowing narrow phone screens on every page */
  min-width: 0;
}

.nav__search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.nav__search:focus-within {
  border-color: var(--color-primary);
}

.nav__search-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.nav__search-input:focus,
.nav__select:focus {
  outline: none;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav__select {
  flex-shrink: 0;
  max-width: 11rem;
  text-overflow: ellipsis;
  padding: var(--space-sm) var(--space-md);
  /* místo pro chevron + gap od okraje */
  padding-right: 2.5rem;
  border: none;
  background-color: var(--color-surface);
  /* chevron-down z bootstrap-icons (balík v package.json) jako background SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C5C5C'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  cursor: pointer;
}

.nav__theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav__theme-toggle:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

/* Mobilní vyhledávání — lupa (skrytá na desktopu) + zavírací tlačítko v overlayi */
.nav__search-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.nav__search-icon {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  /* search ikona z bootstrap-icons (mask → dědí currentColor, themeable) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav__search-close {
  display: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
  background: #1a1a1a;
  /* hero je vždy na tmavém (obrázek + overlay) → text vždy světlý, nezávisle na theme */
  color: #fdfaf5;
  /* Responzivní výška: pevné min/max v px, mezi nimi roste s viewportem. */
  min-height: clamp(340px, 52vh, 520px);
  padding: var(--space-lg) var(--page-px);
  /* odstup pod hero (obrázek kryje padding, proto margin) */
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Čistě černý overlay přes obrázek pro čitelnost textu */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* eyebrow a tagline jsou vizuálně IDENTICKÉ (font, velikost, weight, opacity,
   line-height, letter-spacing) — řádek nad i pod nadpisem stejný. */
.hero__eyebrow {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--space-md);
  color: #fdfaf5;
}

.hero__tagline {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* ========================================
   Search Section
   ======================================== */
.search-section {
  padding: var(--space-lg) var(--page-px);
  text-align: center;
}

.search-section__inner {
  max-width: 640px;
  margin: 0 auto;
}

.search-section__label {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
}

/* base `.website-layout h2` margin (0,1,1) přebíjel class margin → cílený override.
   2rem gap mezi nadpisem a inputem. */
.search-section .search-section__label {
  margin-bottom: var(--space-lg);
}

.search-section__subtitle {
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  font-size: 1rem;
}

.search-section__form {
  display: flex;
  gap: var(--space-sm);
  position: relative;
}

/* Autosuggest results dropdown (server-rendered HTML from /leky/autocomplete) */
.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}

.autocomplete-results.d-none,
.autocomplete-results:empty { display: none; }

.autocomplete-results li {
  position: relative;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
}

.autocomplete-results li:hover,
.autocomplete-results li.is-active { background: var(--color-surface-alt); }

.autocomplete-results li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.autocomplete-results li a {
  position: absolute;
  inset: 0;
  text-decoration: none;
}

.autocomplete-results .badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.autocomplete-results .bg-faded-primary { background: rgba(39, 174, 96, 0.1); color: var(--color-open); }
.autocomplete-results .btn-outline-warning { background: var(--color-order-bg); color: var(--color-order); border: none; }
.autocomplete-results .bg-faded-danger { background: rgba(192, 57, 43, 0.1); color: var(--color-danger); }

.search-section__input {
  flex: 1;
  height: 60px;
  padding: 0 var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-section__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(27, 67, 50, 0.08);
}

.search-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.search-section__btn:hover {
  background: rgb(var(--color-primary-rgb) / 0.8);
}

/* ========================================
   Pharmacy Cards Grid
   ======================================== */
.pharmacy-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-px);
}

/* nadpis nad seznamem — stejný styl jako „Najděte svůj lék" */
.pharmacy-grid__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 var(--space-lg);
}

.pharmacy-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* ========================================
   Pharmacy Card
   ======================================== */
.pharmacy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pharmacy-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.pharmacy-card__image {
  width: 100%;
  height: 160px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.pharmacy-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pharmacy-card:hover .pharmacy-card__img {
  transform: scale(1.05);
}

.pharmacy-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pharmacy-card__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

/* Hodiny + stav vedle sebe; badge zarovnaný s prvním řádkem hodin a neshrinkuje se */
.pharmacy-card__hours-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pharmacy-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  white-space: nowrap;
}

.pharmacy-card__badge--open {
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-open);
}

.pharmacy-card__badge--closed {
  background: rgba(192, 57, 43, 0.1);
  color: var(--color-closed);
}

.pharmacy-card__address {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: var(--space-sm);
}

.pharmacy-card__hours {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* Link vždy na spodním okraji karty (margin-top:auto) bez ohledu na výšku obsahu.
   Negativní marginy ho roztáhnou přes padding karty → velká klikací plocha. */
.pharmacy-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: auto calc(-1 * 1.5rem) calc(-1 * 1.5rem);
  padding: var(--space-md) 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.pharmacy-card__link:hover {
  background: var(--color-surface-alt);
  color: rgb(var(--color-primary-rgb) / 0.8);
}

/* ========================================
   About Section
   ======================================== */
.about-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-px);
}

.about-section__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.about-section__content {
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 720px;
}

.about-section__content strong {
  color: var(--color-text);
}

/* ========================================
   Footer
   ======================================== */
.footer {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: var(--space-lg) 0 var(--space-md);
  margin-top: var(--space-lg);
}

/* Stejný vzor jako obsahové sekce: max-width 1200 + horizontální padding 32px uvnitř,
   aby byl obsah footeru zarovnaný s contentem stránky. */
.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-px);
  display: grid;
  /* první sloupec pružný, sloupce s odkazy široké jen jako jejich nejdelší řádek */
  grid-template-columns: minmax(0, 1.5fr) auto auto;
  gap: var(--space-xl);
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text-on-primary);
}

.footer__description {
  color: var(--color-text-on-primary);
  opacity: 0.9;
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}

.footer__social {
  display: flex;
  gap: var(--space-md);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-primary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.2s ease;
}

.footer__social-link:hover {
  background: rgba(255,255,255,0.25);
  color: var(--color-text-on-primary);
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text-on-primary);
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links li {
  margin-bottom: var(--space-sm);
}

.footer__links li:last-child {
  margin-bottom: 0;
}

.footer__links a {
  color: var(--color-text-on-primary);
  opacity: 0.9;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.footer__provozovatel {
  margin-top: var(--space-md);
}

.footer__provozovatel a {
  color: var(--color-text-on-primary);
  text-decoration: underline;
}

.footer__links a:hover {
  opacity: 1;
  color: var(--color-text-on-primary);
}

.footer__bottom {
  max-width: var(--max-width);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.85;
}

.footer__bottom a {
  color: #FDFAF5;
  text-decoration: underline;
}

.footer__bottom a:hover {
  color: #fff;
}

/* dark mode: footer turns a lighter green, so black pops instead of white */
[data-theme="dark"] .footer__bottom a:hover {
  color: #000;
}

/* ========================================
   Detail Hero / Header
   ======================================== */
.detail-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-on-primary);
  padding: var(--space-lg) 0;
}

/* padding na inner (jako u ostatních sekcí) → obsah hero zarovnaný s content níž */
.detail-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.detail-hero__breadcrumb {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-bottom: var(--space-md);
}

.detail-hero__breadcrumb a {
  color: var(--color-text-on-primary);
  opacity: 0.8;
  text-decoration: none;
}

.detail-hero__breadcrumb a:hover {
  opacity: 1;
  color: var(--color-text-on-primary);
}

.detail-hero__breadcrumb span {
  margin: 0 var(--space-sm);
  opacity: 0.6;
}

.detail-hero__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text-on-primary);
}

.detail-hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
}

.detail-hero__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.detail-hero__status-dot--open {
  background: var(--color-open);
}

.detail-hero__status-dot--closed {
  background: var(--color-closed);
}

/* ========================================
   Detail Content Layout
   ======================================== */
.detail-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-px);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
}

.detail-main {
  min-width: 0;
}

/* search na detailu lékárny — vlevo, plná šířka sloupce (ne vycentrovaný blok jako na homepage) */
.detail-main .search-section {
  padding: 0;
  margin-top: var(--space-lg);
  text-align: left;
}

.detail-main .search-section__inner {
  max-width: 100%;
  margin: 0;
}

/* na detailu menší gap (1rem) pod nadpisem search i pod „Služby" — jiné než homepage */
.detail-main .search-section__label,
.detail-main .services-section__title {
  margin-bottom: var(--space-md);
}

/* 40px nadpis search je jen pro homepage; na detailu zůstává 24px */
.detail-main .search-section__label {
  font-size: 1.5rem;
}

/* ========================================
   Hours Table (Sidebar)
   ======================================== */
.hours-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.hours-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.hours-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-text);
}

/* Base `.website-layout h3` margin (specifita 0,1,1) přebíjel margin:0 výše (0,1,0)
   a přes flex align-items posouval badge níž než nadpis. Cílený override. */
.hours-card__header .hours-card__title {
  margin: 0;
}

.hours-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-open);
}

.hours-card__badge--closed {
  background: rgba(192, 57, 43, 0.1);
  color: var(--color-closed);
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table tr {
  border-bottom: 1px solid var(--color-border);
}

.hours-table tr:last-child {
  border-bottom: none;
}

.hours-table td {
  padding: var(--space-sm) 0;
  font-size: 0.875rem;
}

.hours-table td:first-child {
  color: var(--color-text-secondary);
}

.hours-table td:last-child {
  text-align: right;
  font-weight: 500;
  color: var(--color-text);
}

/* ========================================
   Services Grid
   ======================================== */
.services-section {
  margin-bottom: var(--space-lg);
}

.services-section__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.services-grid__tag {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color 0.2s ease;
}

.services-grid__tag:hover {
  border-color: var(--color-primary);
}

/* ========================================
   Location Card (Sidebar)
   ======================================== */
.location-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.location-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.location-card__map {
  width: 100%;
  height: 180px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}

/* The map box is a link out to Mapy.cz (directions) — no embedded map. */
a.location-card__map {
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  transition: background 0.2s ease, border-color 0.2s ease;
}

a.location-card__map:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgb(var(--color-primary-rgb) / 0.06);
}

.location-card__map svg {
  width: 2rem;
  height: 2rem;
}

.location-card__map-cta {
  font-weight: 600;
  font-size: 0.9375rem;
}

.location-card__map-hint {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* poslední prvek v kartě — base `p` margin-bottom (0,1,1) dělal iluzi většího paddingu */
.location-card .location-card__address {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* ========================================
   Team Section (Sidebar)
   ======================================== */
.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.team-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.team-card__member {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.team-card__member:last-child {
  margin-bottom: 0;
}

.team-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  overflow: hidden;
  flex-shrink: 0;
}

.team-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__info {
  min-width: 0;
}

.team-card__name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.team-card__role {
  font-size: 0.875rem;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.team-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* ========================================
   Info Card (Sidebar)
   ======================================== */
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.info-card__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.info-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.info-card__row:last-child {
  border-bottom: none;
}

.info-card__label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.info-card__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.info-card__value a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========================================
   Med Detail Hero
   ======================================== */
.med-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-text-on-primary);
  padding: var(--space-lg) 0;
}

/* padding na inner → obsah hero zarovnaný s contentem (1200 + page-px) */
.med-hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.med-hero__breadcrumb {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-bottom: var(--space-md);
}

.med-hero__breadcrumb a {
  color: var(--color-text-on-primary);
  opacity: 0.8;
  text-decoration: none;
}

.med-hero__breadcrumb a:hover {
  opacity: 1;
  color: var(--color-text-on-primary);
}

.med-hero__breadcrumb span {
  margin: 0 var(--space-sm);
  opacity: 0.6;
}

.med-hero__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: var(--space-sm);
}

.med-hero__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: var(--space-md);
  color: var(--color-text-on-primary);
}

.med-hero__strength {
  font-size: 1.5rem;
  opacity: 0.7;
}

.med-hero__specs {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.med-hero__spec {
  display: flex;
  flex-direction: column;
}

.med-hero__spec-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.med-hero__spec-value {
  font-family: var(--font-body);
  font-size: 1.5rem;
}

/* ========================================
   Med Detail Content
   ======================================== */
.med-detail-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-px);
}

.med-detail-main {
  max-width: 800px;
}

/* ========================================
   Size Picker
   ======================================== */
.size-picker {
  margin-bottom: var(--space-lg);
  position: relative;
}

.size-picker__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.size-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.size-picker__trigger:hover {
  border-color: var(--color-primary);
}

.size-picker__arrow {
  font-size: 0.875rem;
  opacity: 0.6;
}

.size-picker__dropdown {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  padding: var(--space-sm) 0;
}

.size-picker__option {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s ease;
}

.size-picker__option:hover {
  background: var(--color-surface-alt);
}

.size-picker__option--active {
  font-weight: 600;
  color: var(--color-primary);
}

.size-picker__option--muted {
  color: var(--color-text-muted);
}

.size-picker__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xs) 0;
}

.size-picker__group-label {
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ========================================
   Availability Section
   ======================================== */
.avail-section {
  margin-bottom: var(--space-xl);
}

.avail-section__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

/* ========================================
   Availability Row
   ======================================== */
/* flex-wrap: řádek 1 = nadpis + tlačítko, řádek 2 = adresa, řádek 3 = meta.
   Karta je vysoká jen podle obsahu (height auto). */
.avail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-md);
  transition: box-shadow 0.2s ease;
}

.avail-row:hover {
  box-shadow: var(--shadow-sm);
}

.avail-row--muted {
  opacity: 0.55;
}

/* nedostupná lékárna nemá .avail-row__action; bez něj by text (basis 0%) a meta
   (basis 100%) zůstaly na jednom řádku a text by se smrskl na 0 px */
.avail-row--muted .avail-row__text {
  flex-basis: 100%;
}

/* levý blok: nadpis + adresa pod ním (gap 0.5rem), vedle něj vpravo tlačítko */
.avail-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.avail-row__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0;
}

.avail-row__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-md);
}

.avail-row__badge--instock {
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-open);
}

.avail-row__badge--distrib {
  background: var(--color-order-bg);
  color: var(--color-order);
}

.avail-row__badge--none {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.avail-row__address {
  color: var(--color-text);
  font-size: 0.875rem;
  margin: 0;
}

.avail-row__hours {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* spodní řádek: hodiny vlevo, badge + hint odtlačené doprava */
.avail-row__meta {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* hint + badge drží spolu vpravo (hint první, badge druhý) */
.avail-row__status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.avail-row__action {
  flex-shrink: 0;
}

.avail-row__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.avail-row__cta:hover {
  background: rgb(var(--color-primary-rgb) / 0.8);
  color: var(--color-text-on-primary);
}

.avail-row__cta--dropdown {
  padding-right: var(--space-md);
}

.avail-row__cta-arrow {
  font-size: 0.875rem;
  margin-left: var(--space-xs);
}

.avail-row__cta-wrap {
  position: relative;
}

.avail-row__hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* ========================================
   CTA Popover
   ======================================== */
.cta-popover {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  padding: var(--space-sm) 0;
}

.cta-popover__group {
  padding: var(--space-xs) 0;
}

.cta-popover__group + .cta-popover__group {
  border-top: 1px solid var(--color-border);
}

.cta-popover__group-label {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.cta-popover__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s ease;
}

.cta-popover__item:hover {
  background: var(--color-surface-alt);
}

.cta-popover__variant {
  font-weight: 500;
  font-size: 0.875rem;
  flex: 1;
}

.cta-popover__hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.cta-popover__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ========================================
   Filter Banner
   ======================================== */
.filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.filter-banner__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.filter-banner__clear {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  margin-left: var(--space-md);
}

.filter-banner__clear:hover {
  color: rgb(var(--color-primary-rgb) / 0.8);
}

/* ========================================
   Empty State
   ======================================== */
.empty-state {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.empty-state__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* vyšší specificita než base h3 (0,1,1), ať se prosadí sans + velikost */
.empty-state .empty-state__title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.empty-state__body {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.empty-state__actions {
  display: flex;
  gap: var(--space-md);
}

.empty-state__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.empty-state__btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.empty-state__btn--primary:hover {
  background: rgb(var(--color-primary-rgb) / 0.8);
  color: var(--color-text-on-primary);
}

/* ========================================
   Reservation Page
   ======================================== */
.reservation-page {
  padding: var(--space-xl) var(--page-px) var(--space-lg);
}

.reservation-page__inner {
  max-width: 640px;
  margin: 0 auto;
}

/* ========================================
   Reservation Form
   ======================================== */
.reservation-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.reservation-form__context {
  margin-bottom: var(--space-lg);
}

/* med jako serif nadpis (vyšší specificita než base h2) + lékárna pod ním */
.reservation-form .reservation-form__context-med {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.reservation-form__context-pharmacy {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.reservation-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.reservation-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.reservation-form__submit {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.reservation-form__submit:hover {
  background: rgb(var(--color-primary-rgb) / 0.8);
}

.reservation-form__cancel {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.reservation-form__cancel:hover {
  color: var(--color-primary);
}

/* ========================================
   Info Banner
   ======================================== */
.info-banner {
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

.info-banner p {
  margin: var(--space-xs) 0 0;
  font-size: 0.875rem;
}

.info-banner--green {
  background: rgba(39, 174, 96, 0.08);
  border-left: 3px solid var(--color-open);
  color: var(--color-text);
}

.info-banner--amber {
  background: rgba(196, 149, 58, 0.08);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
}

/* ========================================
   Form Fields
   ======================================== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-field--error .form-input {
  border-color: var(--color-closed);
}

.form-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.1);
}

.form-input--mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.form-field__hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}

.form-field__error {
  font-size: 0.875rem;
  color: var(--color-closed);
  margin: 0;
}

.form-field__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.form-field__checkbox input[type="checkbox"] {
  flex-shrink: 0;
}

/* ========================================
   eRecept Scanner Row
   ======================================== */
.erecept-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.erecept-row .form-input {
  flex: 1;
  /* without this, the input's intrinsic size keeps the row from shrinking
     below input + scan button width, overflowing narrow phone screens */
  min-width: 0;
}

.erecept-row__scan-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.erecept-row__scan-btn:hover {
  border-color: var(--color-primary);
}

.erecept-scanner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Stimulus controller toggles this class (not [hidden]) to show/hide the overlay */
.erecept-scanner-overlay.erecept-scanner--visible {
  display: flex;
}

.erecept-scanner-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
}

.erecept-scanner-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.erecept-scanner-viewfinder {
  width: 320px;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.erecept-scanner-viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.erecept-scanner-status {
  color: white;
  font-size: 0.875rem;
  margin-top: var(--space-md);
}

/* ========================================
   Quantity Stepper
   ======================================== */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qty-stepper__btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.qty-stepper__btn:hover {
  background: var(--color-border);
}

.qty-stepper__input {
  width: 56px;
  height: 40px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  -moz-appearance: textfield;
}

.qty-stepper__input::-webkit-inner-spin-button,
.qty-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ========================================
   Thanks Page
   ======================================== */
.thanks {
  text-align: center;
  padding: var(--space-lg) var(--page-px);
  max-width: 600px;
  margin: 0 auto;
}

.thanks__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(39, 174, 96, 0.1);
  color: var(--color-open);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.thanks__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.thanks__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.thanks__subtitle {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.thanks__summary {
  text-align: left;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.thanks__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.thanks__row:first-child {
  padding-top: 0;
}

.thanks__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.thanks__label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.thanks__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.thanks__value--mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

.thanks__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

.thanks__btn {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.thanks__btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.thanks__btn--primary:hover {
  background: rgb(var(--color-primary-rgb) / 0.8);
  color: var(--color-text-on-primary);
}

.thanks__btn--secondary {
  color: var(--color-text-secondary);
}

.thanks__btn--secondary:hover {
  color: var(--color-primary);
}

/* ========================================
   Status Page
   ======================================== */
.status-page-wrap {
  padding: var(--space-lg) var(--page-px);
}

.status-page-wrap__inner {
  max-width: 700px;
  margin: 0 auto;
}

.status-page {
  padding: var(--space-lg) 0;
}

.status-page__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

/* ========================================
   Status Timeline
   ======================================== */
.status-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  position: relative;
}

.status-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  z-index: 1;
}

.status-timeline__node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.status-timeline__step--done .status-timeline__node {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.status-timeline__step--active .status-timeline__node {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.status-timeline__step--pending .status-timeline__node {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
}

.status-timeline__step--terminal_bad .status-timeline__node {
  background: rgba(192, 57, 43, 0.1);
  border: 2px solid var(--color-closed);
  color: var(--color-closed);
}

.status-timeline__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
}

.status-timeline__step--done .status-timeline__label {
  color: var(--color-primary);
}

.status-timeline__step--active .status-timeline__label {
  color: var(--color-text);
  font-weight: 600;
}

.status-timeline__connector {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin-top: 18px;
}

.status-timeline__connector--done {
  background: var(--color-primary);
}

/* ========================================
   Status Alert
   ======================================== */
.status-alert {
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

.status-alert p {
  margin: 0;
}

.status-alert--info {
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-border);
  color: var(--color-text);
}

.status-alert--progress {
  background: rgba(196, 149, 58, 0.08);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
}

.status-alert--ready {
  background: rgba(39, 174, 96, 0.08);
  border-left: 3px solid var(--color-open);
  color: var(--color-text);
}

.status-alert--done {
  background: rgba(39, 174, 96, 0.05);
  border-left: 3px solid var(--color-open);
  color: var(--color-text-secondary);
}

.status-alert--bad {
  background: rgba(192, 57, 43, 0.05);
  border-left: 3px solid var(--color-closed);
  color: var(--color-text);
}

/* ========================================
   Status Details
   ======================================== */
.status-details {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: var(--space-lg);
}

.status-details__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.status-details__row:first-child {
  padding-top: 0;
}

.status-details__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.status-details__label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.status-details__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.status-details__value--mono {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

.status-page__footer-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ========================================
   Tlačítka — dvě jednotné výšky
   Velká CTA = 60px, menší/inline = 40px. Vše s pozadím + zaoblením
   používá jednu z těchto dvou. (Výška je tu jediný zdroj pravdy.)
   ======================================== */
.search-section__btn,
.reservation-form__submit,
.empty-state__btn,
.thanks__btn {
  height: 60px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avail-row__cta,
.erecept-row__scan-btn,
.size-picker__trigger {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  /* horizontální padding stránky 16px místo 32px */
  .website-layout {
    --page-px: var(--space-md);
  }

  /* collapsed navbar: jen brand zkrátit, ať se vejde (select je teď v search overlayi) */
  .nav__brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav__search-toggle {
    display: flex;
  }

  /* select v mobilním search overlayi — pevná úzká šířka, text se utne (ellipsis) */
  .nav__select {
    width: 140px;
    max-width: 140px;
  }

  /* search overlay přes navbar — překryje ostatní prvky, fade-in.
     Žádný off-screen transform → nic nepřetéká, outline se neořezává. */
  .nav__center {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: absolute;
    inset: 0;
    z-index: 20;
    max-width: none;
    padding: 0 var(--page-px);
    background: var(--color-surface);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .nav--search-open .nav__center {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav--search-open .nav__search-close {
    display: flex;
  }

  .pharmacy-grid__list {
    grid-template-columns: 1fr;
  }

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

  .detail-content {
    grid-template-columns: 1fr;
  }

  .search-section__form {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* ve sloupci flex:1 kolabovalo výšku inputu → vypnout, ať platí height 60px */
  .search-section__input {
    flex: none;
  }

  .search-section__input,
  .search-section__btn {
    width: 100%;
    height: 60px;
  }

  .med-hero__specs {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* mobil: jednoduchý sloupec — název, adresa, hodiny, hint+badge, dole tlačítko */
  .avail-row {
    flex-direction: column;
  }

  .avail-row__meta {
    flex-basis: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .avail-row__status {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .avail-row__action {
    flex-basis: auto;
    order: 1;
    margin-top: var(--space-md);
  }

  .filter-banner {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .status-timeline {
    flex-direction: column;
    gap: var(--space-md);
  }

  .status-timeline__connector {
    width: 2px;
    height: 24px;
    margin: 0 auto;
  }

  .thanks__title {
    font-size: 1.5rem;
  }
}

/* jen telefon: tlačítko rezervace přes celou šířku (na tabletu zůstává auto) */
@media (max-width: 640px) {
  .avail-row__action,
  .avail-row__cta-wrap,
  .avail-row__cta,
  .empty-state__actions,
  .empty-state__btn {
    width: 100%;
  }

  .avail-row__cta {
    justify-content: center;
  }

  /* malá tlačítka (desktop h-40) na telefonu zvětšit na h-60 */
  .avail-row__cta,
  .erecept-row__scan-btn,
  .size-picker__trigger {
    height: 60px;
  }
}
/*


 */