/**
 * misc.css — sdílené styly pro šablony mimo homepage a single-vylet.
 * Enqueued podmíněně: is_singular('post'), is_archive(), is_404(),
 * is_search(), is_page() — viz functions.php pq_enqueue_template_assets().
 * BEM, mobile-first, výhradně tokeny [0.4].
 *
 * @since 1.0.0
 */

/* =========================================================================
 * ARTICLE HERO (single.php)
 * ===================================================================== */

.pq-article-hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: flex-end;
  background: var(--color-secondary-dark);
  color: var(--color-text-invert);
  overflow: hidden;
}

.pq-article-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pq-article-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.pq-article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--color-overlay-rgb) / .88) 0%,
    rgb(var(--color-overlay-rgb) / .30) 100%
  );
}

.pq-article-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-12) var(--space-8);
}

.pq-article-hero__cat { color: var(--color-primary); }

.pq-article-hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.pq-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
 /*  color: var(--color-text-invert-muted); */
 color: var(--color-text);
}

/* =========================================================================
 * ARTICLE LAYOUT (single.php)
 * ===================================================================== */

.pq-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-16);
  align-items: start;
}

@media (min-width: 980px) {
  .pq-article-layout { grid-template-columns: 1fr 300px; }
}

.pq-article-content__perex {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-block-end: var(--space-8);
  max-width: 68ch;
}

.pq-article-content__body > * + * { margin-block-start: var(--space-5); }
.pq-article-content__body h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-black); margin-block: var(--space-8) var(--space-4); }
.pq-article-content__body h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-block: var(--space-6) var(--space-3); }
.pq-article-content__body ul, .pq-article-content__body ol { padding-inline-start: var(--space-6); }
.pq-article-content__body li { margin-block-end: var(--space-2); }

.pq-article-content__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}

.pq-article-tag {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-alt);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
}
.pq-article-tag:hover { background: var(--color-secondary); color: var(--color-text-invert); border-color: var(--color-secondary); }

/* Sidebar */
.pq-article-sidebar__card {
  position: sticky;
  top: calc(var(--space-16) + var(--space-4));
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
}

.pq-article-sidebar__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-black);
}

/* Related articles */
.pq-article-related {
  background: var(--color-bg-alt);
  padding-block: var(--space-12);
}

.pq-article-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .pq-article-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pq-article-related__grid { grid-template-columns: repeat(3, 1fr); } }

.pq-article-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pq-article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.pq-article-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pq-article-card__img--placeholder { display: block; background: var(--color-bg-alt); aspect-ratio: 3 / 2; }

.pq-article-card__body { display: block; padding: var(--space-5); }
.pq-article-card__cat { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); margin-block-end: var(--space-1); }
.pq-article-card__title { display: block; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: 1.3; }
.pq-article-card__meta { display: block; margin-block-start: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* =========================================================================
 * ARCHIVE HERO (archive.php)
 * ===================================================================== */

.pq-archive__hero {
  background: linear-gradient(160deg, var(--color-secondary-dark), var(--color-secondary));
  color: var(--color-text-invert);
  padding-block: var(--space-12) var(--space-10);
}

.pq-archive__title {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.pq-archive__desc {
  max-width: 60ch;
  color: var(--color-text-invert-muted);
}

.pq-archive__body { padding-block: var(--space-10) var(--space-16); }
.pq-archive__grid { margin-block-start: 0; }

/* =========================================================================
 * BREADCRUMB — sdílený napříč archive-vylet.php, page.php, single.php
 * (single-vylet.css má vlastní kopii pro světlé pozadí — zde tmavé varianty)
 * ===================================================================== */

.pq-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pq-breadcrumb__list li + li::before {
  content: "›";
  margin-inline-end: var(--space-2);
  opacity: .5;
}

#pq-main > section.pq-page-hero > div > nav > ol > li,
.pq-breadcrumb__link {
  /* color: var(--color-text-muted); */
  color: #fff;
  text-decoration: none;
}

.pq-breadcrumb__link:hover { color: var(--color-secondary); }

/* Na tmavém hero pozadí (.pq-archive-vylet__hero, .pq-archive__hero) */
.pq-archive-vylet__hero .pq-breadcrumb__list,
.pq-archive__hero .pq-breadcrumb__list {
  color: var(--color-text-invert-muted);
}

.pq-archive-vylet__hero .pq-breadcrumb__link,
.pq-archive__hero .pq-breadcrumb__link {
  color: var(--color-text-invert-muted);
}

.pq-archive-vylet__hero .pq-breadcrumb__link:hover,
.pq-archive__hero .pq-breadcrumb__link:hover {
  color: var(--color-primary);
}

/* =========================================================================
 * ARCHIVE VÝLETŮ (archive-vylet.php)
 * ===================================================================== */

.pq-archive-vylet__hero {
  background: linear-gradient(160deg, var(--color-secondary-dark), var(--color-secondary));
  color: var(--color-text-invert);
  padding-block: var(--space-12) var(--space-10);
}

.pq-archive-vylet__title {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.pq-archive-vylet__desc { max-width: 60ch; color: var(--color-text-invert-muted); }
.pq-archive-vylet__body { padding-block: var(--space-8) var(--space-16); }

.pq-vylet-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

.pq-archive-vylet__grid { margin-block-start: 0; }

/* =========================================================================
 * PAGINATION
 * ===================================================================== */

.pq-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-10);
}

.pq-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pq-pagination .page-numbers:hover { background: var(--color-bg-alt); }
.pq-pagination .page-numbers.current { background: var(--color-secondary-dark); color: var(--color-primary); border-color: var(--color-secondary-dark); }
.pq-pagination .page-numbers.dots { border: none; cursor: default; }

.pq-pagination .page-numbers.current{
  color: #fff;
}


/* =========================================================================
 * 404 PAGE
 * ===================================================================== */

.pq-404__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-20);
}

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

.pq-404__code {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-border);
}

.pq-404__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-black);
}

.pq-404__text { color: var(--color-text-muted); margin-block-end: var(--space-6); }

.pq-404__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pq-404__tours-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.pq-404__tour-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}
.pq-404__tour-link:hover { color: var(--color-text); }

/* =========================================================================
 * SEARCH
 * ===================================================================== */

.pq-search { padding-block: var(--space-12) var(--space-16); }

.pq-search__header { margin-block-end: var(--space-8); }

.pq-search__title {
  margin: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: var(--font-weight-black);
}
.pq-search__title em { font-style: normal; color: var(--color-secondary); }

.pq-search__form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
}

.pq-search__input {
  flex: 1 1 280px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition-fast);
}
.pq-search__input:focus { border-color: var(--color-secondary); }

.pq-search__count {
  margin-block-end: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pq-search__results {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pq-search__result {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 560px) { .pq-search__result { grid-template-columns: 120px 1fr; } }

.pq-search__result-img-link { display: block; }
.pq-search__result-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }

.pq-search__result-type { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--color-secondary); margin-block-end: var(--space-1); }
.pq-search__result-title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.pq-search__result-link { color: var(--color-text); text-decoration: none; }
.pq-search__result-link:hover { color: var(--color-secondary); }
.pq-search__result-excerpt { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.pq-search__result-price { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-accent); }
.pq-search__empty { margin-block-start: var(--space-8); }

/* =========================================================================
 * GENERIC PAGE (page.php)
 * ===================================================================== */

.pq-page-generic__wrap {
  padding-block: var(--space-12) var(--space-16);
  max-width: 860px;
}

.pq-page-generic__hero-img {
  margin-block: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pq-page-generic__img { width: 100%; max-height: 400px; object-fit: cover; display: block; }

.pq-page-generic__title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.pq-page-generic__body > * + * { margin-block-start: var(--space-5); }
.pq-page-generic__body h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-black); margin-block: var(--space-8) var(--space-4); }
.pq-page-generic__body h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-block: var(--space-6) var(--space-3); }

/* =========================================================================
 * ASTRA OVERRIDE — [A.4]
 * ===================================================================== */

#pq-main .pq-search__input:focus {
  outline: var(--focus-ring) !important;
  outline-offset: var(--focus-offset) !important;
}

#pq-main .pq-pagination .page-numbers {
  font-family: var(--font-body) !important;
  text-decoration: none !important;
}



/* ── Navigace podkategorií v archivu rubriky ── */
.pq-subcat-nav {
  background: var(--color-bg-alt);
  border-block: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.pq-subcat-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
}
.pq-subcat-nav__link {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pq-subcat-nav__link:hover,
.pq-subcat-nav__link:focus-visible,
.pq-subcat-nav__link--active {
  background: var(--color-primary);
  color: var(--color-text-invert);
}

/* ═══════════════════════════════════════════════════════════════════════
   PLATEBNÍ STRÁNKA (page-platba.php)
   ═══════════════════════════════════════════════════════════════════════ */

.pq-platba {
  background: var(--color-bg-alt);
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.pq-platba-hero {
  background: linear-gradient(150deg, var(--color-primary) 0%, #005e6c 100%);
  color: var(--color-text-invert);
  padding-block: var(--space-16) var(--space-20);
  text-align: center;
}
.pq-platba-hero--error {
  background: linear-gradient(150deg, var(--color-error) 0%, #97202f 100%);
}
.pq-platba-hero__inner {
  max-width: 640px;
}
.pq-platba-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .16);
  color: var(--color-text-invert);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .08);
}
.pq-platba-icon--error {
  font-size: 2.5rem;
  font-weight: var(--font-weight-black);
  line-height: 1;
}
.pq-platba-hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
  line-height: 1.15;
}
.pq-platba-hero__lead {
  margin: 0 auto;
  max-width: 40ch;
  font-size: var(--text-lg);
  color: var(--color-text-invert);
  opacity: .92;
}
.pq-platba-hero__cta {
  margin-block-start: var(--space-6);
}
.pq-platba-hero__cta .pq-btn--ghost,
.pq-platba-hero--error .pq-btn--ghost {
  border-color: var(--color-text-invert);
  color: var(--color-text-invert);
}
.pq-platba-hero__cta .pq-btn--ghost:hover {
  background: var(--color-text-invert);
  color: var(--color-primary);
}

/* ── OBSAH ────────────────────────────────────────────────────────────── */
.pq-platba-obsah {
  padding-block: var(--space-12) var(--space-16);
}
/* Karty vytáhneme nahoru přes spodní hranu hero sekce, ale s viditelnou mezerou */
.pq-platba-obsah > .pq-container {
  margin-block-start: calc(-1 * var(--space-8));
}

.pq-platba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
/* Široký monitor: rekapitulace (1/3) + platební blok (2/3) vedle sebe. */
@media (min-width: 1080px) {
  .pq-platba-grid {
    grid-template-columns: 1fr 2fr;
  }
}

/* Platební blok — dvě měnové karty; na širokém 50/50 vedle sebe.
   Karty se táhnou na stejnou výšku, aby byl blok vyvážený. */
.pq-platba-pay {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
@media (min-width: 620px) {
  .pq-platba-pay {
    grid-template-columns: 1fr 1fr;
  }
}
/* QR sedí hned pod hlavičkou (fixní odsazení, ne auto) — díky stejné struktuře
   nad ním (nadpis + částka + podtitulek) jsou QR v obou kartách v jedné linii.
   Případný přebytek výšky karty zůstane dole u platebních údajů. */
.pq-platba-card--pay .pq-platba-qr {
  margin-block: var(--space-4);
}
.pq-platba-card--pay .pq-platba-dl--pay {
  margin-block-start: auto;
}

/* ── KARTY ────────────────────────────────────────────────────────────── */
.pq-platba-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pq-platba-card--pay {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow: var(--shadow-brand);
}
.pq-platba-card__title {
  margin: 0 0 var(--space-5);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-bg-alt);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* ── DEFINIČNÍ SEZNAM ─────────────────────────────────────────────────── */
.pq-platba-dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.pq-platba-dl__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-bg-alt);
}
.pq-platba-dl__row:last-child {
  border-block-end: none;
}
.pq-platba-dl__row dt {
  flex: 1 1 50%;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.pq-platba-dl__row dd {
  flex: 1 1 50%;
  min-width: 0;
  margin: 0;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow-wrap: break-word;
}
/* Kategorie cestujících se nelámou uvnitř (jen za čárkou mezi nimi). */
.pq-nowrap {
  white-space: nowrap;
}

/* Odznak stavu platby v rekapitulaci. */
.pq-platba-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.pq-platba-badge.is-ok {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
}
.pq-platba-badge.is-partial {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
}
.pq-platba-badge.is-unpaid {
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  color: var(--color-error);
}
/* Rekapitulační seznam vyplní výšku karty, aby šla „Cena celkem" úplně dolů. */
.pq-platba-card .pq-platba-dl:not(.pq-platba-dl--pay) {
  flex: 1;
}
/* Stav platby + cena celkem tvoří spodní blok karty (odsunutý dolů). */
.pq-platba-dl__row--stav {
  margin-block-start: auto;
  align-items: center;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--color-bg-alt);
}
.pq-platba-dl__row--total {
  border-block-end: none;
}
.pq-platba-dl__row--total dd strong {
  font-size: var(--text-lg);
  color: var(--color-primary);
}
/* Kopírovatelné hodnoty (účet, VS, IBAN) — monospace pro čitelnost */
.pq-platba-dl--pay dd {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ── MĚNOVÝ BLOK (CZK / EUR část platební karty) ──────────────────────── */
.pq-platba-mena__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-bg-alt);
}
.pq-platba-mena__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pq-platba-mena__amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.1;
  white-space: nowrap;
}
.pq-platba-mena__sub {
  margin-block: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── QR ───────────────────────────────────────────────────────────────── */
.pq-platba-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: var(--space-4);
}
.pq-platba-qr__code {
  display: inline-flex;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pq-platba-qr__code canvas,
.pq-platba-qr__code img {
  display: block;
  width: 150px !important;
  height: 150px !important;
  max-width: 54vw;
}
.pq-platba-qr__hint {
  margin-block: var(--space-3) 0;
  max-width: 26ch;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Upozornění: banka bez pole pro VS → napsat VS do zprávy pro příjemce. */
.pq-platba-note {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
}
/* Na širokém viewportu (platební blok 50/50) sedí poznámka o VS přes obě
   platební karty (plná šířka platebního bloku). */
@media (min-width: 620px) {
  .pq-platba-pay .pq-platba-note {
    grid-column: 1 / -1;
    margin-block-start: 0;
  }
}

/* ── DALŠÍ KROKY ──────────────────────────────────────────────────────── */
.pq-platba-dalsi {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pq-platba-kroky {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
  display: grid;
  gap: var(--space-4);
}
.pq-platba-kroky li {
  position: relative;
  padding-inline-start: calc(var(--space-8) + var(--space-3));
  min-height: var(--space-8);
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  color: var(--color-text);
}
.pq-platba-kroky li::before {
  counter-increment: krok;
  content: counter(krok);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}
.pq-platba-dalsi__text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text);
}
.pq-platba-zpet {
  margin-block: var(--space-6) 0;
}

@media (max-width: 600px) {
  .pq-platba-hero {
    padding-block: var(--space-12) var(--space-18);
  }
  .pq-platba-card,
  .pq-platba-dalsi {
    padding: var(--space-5);
  }
  .pq-platba-castka__value {
    font-size: var(--text-2xl);
  }
}