/* ==========================================================================
   Zaccord — alaprendszer
   Színek és betűtípus a meglévő arculatból; a szerkezet új.
   ========================================================================== */

/* --- Betűtípus -----------------------------------------------------------
   A régi CSS négy külön családként deklarálta a Gothamet (Gotham, GothamBold,
   GothamNormal, GothamMedium), ezért a súlyváltáshoz családot kellett
   cserélni. Itt egy család három súllyal — a font-weight egyszerűen működik.
   A fájlok a régi projektből érkeznek, /fonts alatt kiszolgálva.            */

@font-face {
  font-family: Gotham;
  src: url(/fonts/gothamNormal.woff2) format('woff2'),
       url(/fonts/gothamNormal.woff) format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Gotham;
  src: url(/fonts/gothamMedium.woff2) format('woff2'),
       url(/fonts/gothamMedium.woff) format('woff');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Gotham;
  src: url(/fonts/gotham.woff2) format('woff2'),
       url(/fonts/gotham.woff) format('woff');
  font-weight: 700;
  font-display: swap;
}

/* --- Jelzőrendszer ------------------------------------------------------- */

:root {
  /* A webhely EGY megjelenést vállal: világosat.
     Ez tudatos döntés, nem hiányosság — a magyar webshopoknál a fehér alap a
     megszokott és bizalmat keltő. A `color-scheme: light` azért kell, hogy a
     böngésző a görgetősávot és az űrlapelemeket is világosan rajzolja akkor
     is, ha a rendszer sötét módban van. Enélkül a fehér lapon sötét
     görgetősáv és sötét beviteli mezők jelennének meg. */
  color-scheme: light;

  /* Arculat — a meglévő rendszerből átvéve, nem újratervezve. */
  --zc-blue: #4285f4;
  --zc-blue-deep: #0f6aff;
  --zc-blue-soft: #eaf1fe;

  --zc-ink: #171a20;
  --zc-slate: #5f6570;
  --zc-line: #e3e5e9;

  /* Fehér lapháttér: Magyarországon ez a megszokott és megbízhatóbbnak ható
     alap. Következmény: a lap és a felületek azonos színűek, ezért a
     kártyákat NEM a kitöltés különbözteti meg, hanem a keret. */
  --zc-paper: #ffffff;
  --zc-surface: #ffffff;

  /* Ritka kiemelésekhez, ahol egy blokknak el kell válnia a lapról. */
  --zc-tint: #f6f8fb;

  --zc-danger: #b3261e;
  --zc-success: #1f7a3d;

  /* Betűk */
  --zc-font: Gotham, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Technikai értékek: mm, %, rétegvastagság. Ezek gépi paraméterek,
     nem folyószöveg — ezért kapnak külön, fix szélességű kezelést. */
  --zc-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Térköz — 4px alapú skála */
  --zc-1: 4px;
  --zc-2: 8px;
  --zc-3: 12px;
  --zc-4: 16px;
  --zc-5: 24px;
  --zc-6: 32px;
  --zc-7: 48px;
  --zc-8: 64px;

  --zc-radius: 8px;
  --zc-radius-lg: 14px;
  --zc-container: 1200px;


  /* --- A fejléc saját készlete -------------------------------------------
     MIÉRT KÜLÖN. A fejléc egységesítésekor a főoldal (és vele a bérnyomtatás
     meg a prototípus lapja) újabb, mélyebb kékje lett a közös minta. A lapok
     TARTALMA viszont ebben a körben nem változik, tehát a --zc-blue nem
     nyúlhat hozzá: ha átírnánk, minden gomb és minden link színe elmozdulna
     az egész webhelyen. Egy későbbi tartalmi újratervezés a két készletet
     összevonhatja — addig a fejléc a saját tokenjein áll.

     A MÉRETEK IS ITT VANNAK. Így egy későbbi fejlécmódosítás (magasság,
     logóméret, betűméret) EGY sor átírása, nem oldalankénti vadászat. */
  --zc-hd-bg: #ffffff;
  --zc-hd-ink: #14181f;
  --zc-hd-line: #e4e6ea;
  --zc-hd-blue: #1f4fd6;
  --zc-hd-blue-deep: #173fae;
  --zc-hd-blue-soft: #edf2ff;

  --zc-hd-h: 80px;
  --zc-hd-max: 1280px;
  --zc-hd-pad: 32px;
  --zc-hd-gap: 28px;
  --zc-hd-util-gap: var(--zc-2);
  --zc-hd-logo: 36px;
  --zc-hd-wordmark: 26px;

  /* A menüpontok és a szöveges gombok mérete. Szándékosan nagyobb a korábbi
     14—15 px-nél: a fejléc a lap egyetlen állandó eleme, és eddig halkabb
     volt a saját tartalmánál. */
  --zc-hd-font: 16px;
  --zc-hd-font-panel: 15.5px;

  --zc-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 6%);
}

/* --- Alapok -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

html {
  /* A RAGADÓS FEJLÉC ALÁ NE CSÚSSZON A HORGONY CÉLJA. Egy helyen áll, mert
     a fejléc magassága is egy helyen áll. Eddig három oldalspecifikus
     szabály végezte ugyanezt (.zh-main [id], .zp-main [id], .zq-main [id]),
     a többi lapon pedig senki. */
  scroll-padding-top: calc(var(--zc-hd-h) + var(--zc-4));
}

body {
  margin: 0;
  background: var(--zc-paper);
  color: var(--zc-ink);
  font-family: var(--zc-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--zc-3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 19px; }

p { margin: 0 0 var(--zc-4); }

a {
  color: var(--zc-blue);
  text-decoration: none;
}

a:hover { color: var(--zc-blue-deep); }

img { max-width: 100%; height: auto; }

/* A [hidden] attribútum a böngésző alapstílusában `display: none`, amit
   viszont BÁRMELYIK saját `display` felülír — a `.zc-btn` inline-flexe is.
   Emiatt egy elrejtettnek szánt gomb látszani maradt. A szabály ezt állítja
   helyre: ha valamin ott a [hidden], az nem látszik, akármit is mond a
   komponens stílusa. */
[hidden] { display: none !important; }

/* Billentyűzetes navigáció mindig látható legyen. */
:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Technikai értékek: 0.20 mm, 30%, 120×80×40 */
.zc-spec {
  font-family: var(--zc-mono);
  font-size: 0.92em;
  letter-spacing: -0.02em;
}

.zc-container {
  width: 100%;
  max-width: var(--zc-container);
  margin: 0 auto;
  padding: 0 var(--zc-5);
}

.zc-main {
  flex: 1 0 auto;
  padding: var(--zc-7) 0 var(--zc-8);
}

/* Csak képernyőolvasónak. */
.zc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ugrás a tartalomra — billentyűzettel az első elem. */
.zc-skip {
  position: absolute;
  left: var(--zc-4);
  top: -60px;
  z-index: 100;
  padding: var(--zc-2) var(--zc-4);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  transition: top 0.15s ease;
}

.zc-skip:focus { top: var(--zc-4); }

/* --- Fejléc -------------------------------------------------------------- */

/* EZ A FEJLÉC EGYETLEN LEÍRÁSA.
 *
 * Korábban három változata élt egymás mellett: a site.css alapértelmezése
 * (72 px magas, 44 px logó, rétegvonalas zárás), és oldalspecifikus
 * felülírások a home.css-ben, a print.css-ben és a prototype.css-ben
 * (80 px magas, 36 px logó, 1 px záróvonal, saját kék — a print.css-é ráadásul
 * áttetsző, elmosott háttérrel). A látogató így lapváltáskor ugráló logót,
 * változó fejlécmagasságot és KÉT KÜLÖNBÖZŐ KÉKET látott.
 *
 * A felülírások törölve lettek; ami itt áll, az minden lapon ugyanaz. A
 * főoldal változata lett a minta, mert az a legújabb. */

header.zc-header {
  /* GÖRGETÉSKOR A HELYÉN MARAD. A főoldalon eddig is így volt, a többi lapon
     nem — a kosárban vagy a pénztárban tehát elveszett a kilépési pont. */
  position: sticky;
  top: 0;
  z-index: 60;
  flex-shrink: 0;
  background: var(--zc-hd-bg);
  border-bottom: 1px solid var(--zc-hd-line);
}

/* A SAJÁT SZÉLESSÉG ÉS BELSŐ MARGÓ SZÁNDÉKOS.
   A fejléc belseje NEM az oldal tartalmi konténeréből (.zc-container) veszi a
   méretét, mert az oldalanként eltér: a főoldalé 1280 px / 32 px, a többié
   1200 px / 24 px volt. Ettől a logó vízszintes helye lapváltáskor ~40 px-et
   ugrott. Az elemválasztós alak (header.zc-header) azért kell, hogy a lapok
   saját .zc-container szabályait is felülírja. */
header.zc-header > .zc-header-inner {
  display: flex;
  align-items: center;
  gap: var(--zc-hd-gap);
  min-height: var(--zc-hd-h);
  width: 100%;
  max-width: var(--zc-hd-max);
  margin-inline: auto;
  padding-inline: var(--zc-hd-pad);
}

.zc-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--zc-hd-ink);
}

/* A láblécé marad, ahogy volt — ez a kör csak a fejlécről szól. */
.zc-logo img {
  width: 44px;
  height: 44px;
  display: block;
}

.zc-header .zc-logo img {
  width: var(--zc-hd-logo);
  height: var(--zc-hd-logo);
}

/* A „zaccord." felirat MINDEN oldalon ott áll a logó mellett. Korábban egy
   currentPath === '/' feltétel mögött volt: a márkanév így a belépéstől a
   pénztárig eltűnt — pont azokon a lapokon, ahol a látogató a legjobban
   szeretné tudni, hol jár. A logó és a felirat egyetlen linket alkot, és a
   főoldalra visz. */
.zc-wordmark {
  font-size: var(--zc-hd-wordmark);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.zc-wordmark > span { color: var(--zc-hd-blue); }

/* Fő navigáció: mit lehet itt csinálni. */
.zc-nav {
  display: flex;
  align-items: center;
  gap: var(--zc-1);
  margin-inline-start: 20px;
}

.zc-nav-link {
  position: relative;
  display: inline-block;
  padding: var(--zc-2) var(--zc-3);
  color: var(--zc-hd-ink);
  font-weight: 500;
  font-size: var(--zc-hd-font);
  border-radius: var(--zc-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.zc-nav-link:hover {
  background: var(--zc-hd-blue-soft);
  color: var(--zc-hd-blue-deep);
}

/* Az aktív lap jelölése oldalanként változik — ez az egyetlen rész, ami
   szándékosan nem egyforma. */
.zc-nav-link[aria-current="page"] {
  color: var(--zc-hd-blue-deep);
}

.zc-nav-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--zc-3);
  right: var(--zc-3);
  bottom: 2px;
  height: 2px;
  background: var(--zc-hd-blue);
  border-radius: 2px;
}

/* Jobb oldal: a látogató saját dolgai. */
.zc-utility {
  display: flex;
  align-items: center;
  gap: var(--zc-hd-util-gap);
  margin-inline-start: auto;
}

/* Ikon + felirat párban. Asztali nézetben a felirat látszik, mobilon az ikon:
   375 px-en három szöveges link már két sorba törné a fejlécet.

   A 44 px-es minimumméret érintésre való: ekkora a megbízhatóan eltalálható
   gomb. Eddig csak három lapon volt meg, most mindegyiken. */
.zc-icon-link,
.zc-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zc-2);
  min-height: 44px;
  min-width: 44px;
}

.zc-icon {
  display: none;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.zc-cart-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-inline-start: var(--zc-1);
  background: var(--zc-hd-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  vertical-align: 1px;
}

/* --- További oldalak panel ----------------------------------------------- */

.zc-more {
  position: relative;
}

.zc-more > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--zc-2) var(--zc-3);
  color: var(--zc-hd-ink);
  font-weight: 500;
  font-size: var(--zc-hd-font);
  border-radius: var(--zc-radius);
  transition: background-color 0.15s ease;
}

.zc-more > summary::-webkit-details-marker { display: none; }

.zc-more > summary:hover {
  background: var(--zc-hd-blue-soft);
  color: var(--zc-hd-blue-deep);
}

.zc-more[open] > summary {
  background: var(--zc-hd-blue-soft);
  color: var(--zc-hd-blue-deep);
}

.zc-more-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--zc-3));
  z-index: 50;
  width: min(560px, calc(100vw - var(--zc-6)));
  padding: var(--zc-5);
  background: var(--zc-hd-bg);
  border: 1px solid var(--zc-hd-line);
  border-radius: var(--zc-radius-lg);
  box-shadow: var(--zc-shadow);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--zc-5);
}

/* A szolgáltatások asztali nézetben már a fejlécben vannak — ott ne
   ismétlődjenek a panelben is. Mobilon viszont ez az egyetlen helyük. */
.zc-more-mobile-only { display: none; }

.zc-more-group h3 {
  margin: 0 0 var(--zc-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zc-slate);
}

.zc-more-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.zc-more-group a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--zc-2) var(--zc-2);
  margin-inline-start: calc(var(--zc-2) * -1);
  color: var(--zc-hd-ink);
  font-size: var(--zc-hd-font-panel);
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.zc-more-group a:hover {
  background: var(--zc-hd-blue-soft);
  color: var(--zc-hd-blue-deep);
}

/* --- Lábléc -------------------------------------------------------------- */

.zc-footer {
  flex-shrink: 0;
  background: var(--zc-surface);
  border-top: 1px solid var(--zc-line);
  padding: var(--zc-7) 0 var(--zc-5);
  font-size: 14.5px;
}

.zc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) 1.1fr;
  gap: var(--zc-6) var(--zc-5);
}

.zc-footer-brand p {
  margin: var(--zc-3) 0 0;
  color: var(--zc-slate);
  max-width: 30ch;
  font-size: 14px;
}

.zc-footer h3 {
  margin: 0 0 var(--zc-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zc-slate);
}

.zc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zc-2);
}

.zc-footer a {
  color: var(--zc-ink);
}

.zc-footer a:hover {
  color: var(--zc-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zc-social {
  display: flex;
  gap: var(--zc-3);
  margin-top: var(--zc-4);
}

.zc-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--zc-3);
  margin-top: var(--zc-6);
  padding-top: var(--zc-4);
  border-top: 1px solid var(--zc-line);
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-footer-bottom p { margin: 0; }

/* --- Gombok -------------------------------------------------------------- */

.zc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zc-2);
  padding: var(--zc-3) var(--zc-5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--zc-radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.08s ease;
}

.zc-btn:active { transform: translateY(1px); }

.zc-btn-primary {
  background: var(--zc-blue);
  color: #fff;
}

.zc-btn-primary:hover {
  background: var(--zc-blue-deep);
  color: #fff;
}

.zc-btn-quiet {
  background: transparent;
  border-color: var(--zc-line);
  color: var(--zc-ink);
}

.zc-btn-quiet:hover {
  border-color: var(--zc-blue);
  color: var(--zc-blue-deep);
}

/* --- Mobil --------------------------------------------------------------- */

.zc-burger { display: none; }


/* A FEJLÉC TÖRÉSPONTJAI. Mindhárom fok a fejléc tokenjeit állítja, tehát a
   lapok nem térhetnek el egymástól: ugyanaz a magasság, ugyanaz a logó és
   ugyanaz a belső margó minden szélességen. */
@media (max-width: 1100px) {
  :root { --zc-hd-pad: 28px; --zc-hd-gap: 16px; }

  .zc-nav { margin-inline-start: 0; }

  .zc-nav-link,
  .zc-more > summary { padding-inline: var(--zc-2); }
}

@media (max-width: 900px) {
  :root { --zc-hd-h: 68px; }

  .zc-container { padding: 0 var(--zc-4); }

  /* A fő navigáció a mobilmenübe költözik. */
  .zc-nav { display: none; }

  /* Ikonokra váltunk: a felirat képernyőolvasónak megmarad. */
  .zc-icon { display: block; }

  .zc-icon-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .zc-icon-link,
  .zc-more > summary {
    padding: var(--zc-2);
  }

  .zc-cart-count {
    position: absolute;
    transform: translate(10px, -10px);
    margin-inline-start: 0;
  }

  .zc-icon-link { position: relative; }

  .zc-more-panel {
    position: fixed;
    inset: auto var(--zc-4) var(--zc-4) var(--zc-4);
    top: calc(var(--zc-hd-h) + var(--zc-2));
    width: auto;
    max-height: calc(100vh - var(--zc-hd-h) - var(--zc-5));
    overflow-y: auto;
    grid-template-columns: 1fr;
  }

  /* Mobilon a fejlec nav rejtve van, tehat a szolgaltatasok ide kerulnek -
     es elsokent, mert ezek a fo cselekvesek. */
  .zc-more-mobile-only {
    display: block;
    order: -1;
    padding-bottom: var(--zc-4);
    border-bottom: 1px solid var(--zc-line);
  }

  .zc-footer-grid { grid-template-columns: 1fr 1fr; }
  .zc-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root {
    --zc-hd-h: 64px;
    --zc-hd-pad: 20px;
    --zc-hd-gap: 10px;
    --zc-hd-util-gap: 2px;
    --zc-hd-logo: 30px;
    --zc-hd-wordmark: 22px;
  }
}

@media (max-width: 560px) {
  .zc-footer-grid { grid-template-columns: 1fr; }
  .zc-main { padding: var(--zc-5) 0 var(--zc-7); }
}

/* --- Mozgáscsökkentés ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Dokumentumoldalak
   ========================================================================== */

.zc-icon-inline {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* --- Dokumentum fejléce --- */

.zc-doc-head {
  max-width: 70ch;
  margin-bottom: var(--zc-6);
  padding-bottom: var(--zc-5);
  border-bottom: 1px solid var(--zc-line);
}

.zc-doc-group {
  margin: 0 0 var(--zc-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zc-blue);
}

.zc-doc-title { margin: 0; }

.zc-doc-desc {
  margin: var(--zc-3) 0 0;
  color: var(--zc-slate);
  font-size: 17px;
}

.zc-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
  margin-top: var(--zc-5);
}

/* --- Elrendezés: tartalomjegyzék + szöveg --- */

.zc-doc-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--zc-7);
  align-items: start;
}

.zc-doc-layout.is-single { grid-template-columns: minmax(0, 1fr); }

.zc-toc {
  position: sticky;
  top: var(--zc-4);
  max-height: calc(100vh - var(--zc-8));
  overflow-y: auto;
  font-size: 14px;
}

.zc-toc-details > summary {
  cursor: pointer;
  padding: var(--zc-2) 0;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  border-bottom: 1px solid var(--zc-line);
}

.zc-toc-details > summary::-webkit-details-marker { display: none; }

.zc-toc-count {
  font-family: var(--zc-mono);
  font-size: 11px;
  color: var(--zc-slate);
  background: var(--zc-tint);
  padding: 1px 6px;
  border-radius: 999px;
}

.zc-toc ol {
  list-style: none;
  margin: var(--zc-3) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  counter-reset: toc;
}

.zc-toc li { counter-increment: toc; }

.zc-toc a {
  display: block;
  padding: 5px var(--zc-2) 5px 26px;
  position: relative;
  color: var(--zc-slate);
  border-radius: 5px;
  line-height: 1.35;
}

.zc-toc a::before {
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  width: 22px;
  text-align: right;
  font-family: var(--zc-mono);
  font-size: 11px;
  color: var(--zc-line);
}

.zc-toc a:hover {
  background: var(--zc-tint);
  color: var(--zc-blue-deep);
}

/* --- A dokumentum szövege --- */

.zc-doc {
  max-width: 70ch;
  font-size: 16.5px;
  line-height: 1.75;
}

.zc-doc h2 {
  margin: var(--zc-7) 0 var(--zc-3);
  padding-top: var(--zc-2);
  font-size: 21px;
}

.zc-doc h2:first-child { margin-top: 0; }

.zc-doc h3 {
  margin: var(--zc-5) 0 var(--zc-2);
  font-size: 17px;
}

.zc-doc p { margin: 0 0 var(--zc-4); }

.zc-doc ul,
.zc-doc ol {
  margin: 0 0 var(--zc-4);
  padding-inline-start: var(--zc-5);
}

.zc-doc li { margin-bottom: var(--zc-2); }

.zc-doc a { text-decoration: underline; text-underline-offset: 2px; }

.zc-doc .blue { color: var(--zc-blue-deep); font-weight: 500; }

.zc-doc hr {
  margin: var(--zc-6) 0;
  border: 0;
  border-top: 1px solid var(--zc-line);
}

.zc-doc img {
  border-radius: var(--zc-radius);
  border: 1px solid var(--zc-line);
}

.zc-doc-cta { margin-top: var(--zc-6); }

/* --- Ábrák és kiemelt dobozok a tartalmi lapokon -------------------------

   A súgólapokon a rajz nem díszítés, hanem a magyarázat része: a rétegvastagság,
   a kitöltés, a támasz és a nyomtatási irány szóban nehezen megfogható. A rajzok
   BEÁGYAZOTT SVG-k, három okból: `currentColor` helyett a lap saját tokenjeit
   használják (tehát egy arculatváltás magától átviszi őket), nem járnak külön
   letöltéssel, és a kinagyított feliratok minden méretben élesek maradnak.

   A MÉRETEZÉS ALAPJA: a rajzok 640 egység szélesek, és a rendelkezésre álló
   helyre skálázódnak. Ezért van a feliratoknak nagy betűmérete (24 és 20
   egység): telefonon a rajz nagyjából a felére kicsinyedik, és így is 11—13 px
   körüli szöveg marad — ez az a határ, ami még kényelmesen olvasható.         */

.zc-doc-fig {
  margin: var(--zc-6) 0;
  padding: var(--zc-5) var(--zc-5) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

.zc-doc-fig > figcaption {
  margin-top: var(--zc-4);
  padding-top: var(--zc-3);
  border-top: 1px solid var(--zc-line);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--zc-slate);
}

.zc-doc-fig > figcaption > strong { color: var(--zc-ink); font-weight: 500; }

.zc-dia {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Osszehasonlito abra, panelekre bontva ---

   MIERT NEM EGY RAJZ. Mert egy 640 egyseg szeles abra telefonon a felere
   kicsinyedik, es a 20 egyseges feliratbol 11 px lesz - kilogni nem log ki,
   de huny ognunk kell hozza. Panelenkent kulon <svg>, azonos szelessegu
   viewBox-ablakkal: asztali gepen egymas mellett allnak (pont ugy, mint
   korabban egyetlen rajzkent), telefonon egymas ala kerulnek, es ott mar a
   teljes szelesseget megkapjak - a felirat 11 px helyett 22 px lesz.

   AZ AZONOS LEPTEK IGY IS MEGMARAD: minden panel viewBox-ablaka ugyanolyan
   szeles, es a racs egyenlo oszlopokat ad, tehat a ket (harom) rajz mindig
   ugyanakkora leptekben all - ez a legtobb abranal maga a mondanivalo. */
.zc-dia-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.zc-dia-split-3 { grid-template-columns: repeat(3, 1fr); }

/* A rajzhoz tartozo jelmagyarazat. NEM a rajzba irjuk: egy SVG-be tett mondat
   a rajzzal egyutt kicsinyedik, telefonon 11 px lesz belole, es tordelni sem
   tud. HTML-kent a lap sajat betumeretevel all, es sortorik. A ket kis mintat
   a CSS rajzolja, ugyanazokkal a szinekkel, mint a rajz. */
.zc-dia-legend {
  display: grid;
  gap: var(--zc-2);
  margin: 0 0 var(--zc-4);
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zc-slate);
}

.zc-dia-legend > li { display: flex; align-items: center; gap: var(--zc-3); }
.zc-dia-legend strong { color: var(--zc-ink); font-weight: 500; }

.zc-dia-key {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--zc-blue-deep);
  border-radius: 5px;
}

.zc-dia-key-wall { background: color-mix(in srgb, var(--zc-blue) 34%, #fff); }

.zc-dia-key-infill {
  background-color: var(--zc-paper);
  background-image:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--zc-blue) 72%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--zc-blue) 72%, transparent) 0 1px,
      transparent 1px 7px
    );
}

/* A nyomtatott anyag. A halvány kitöltés és a saját körvonal együtt adja ki a
   rétegvastagság-ábrán a rétegek határát — ott minden réteg külön alakzat. */
.zc-dia-body {
  fill: var(--zc-blue-soft);
  stroke: color-mix(in srgb, var(--zc-blue) 55%, transparent);
  stroke-width: 0.8;
}

/* A kész darab külső körvonala — ez teszi felismerhetővé az alakot. */
.zc-dia-outline {
  fill: none;
  stroke: var(--zc-blue-deep);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* A kitöltés-ábra tömör héja: sötétebb, mint a test, mert éppen az a kérdés,
   hogy melyik része NEM változik a kitöltéssel. */
.zc-dia-wall { fill: color-mix(in srgb, var(--zc-blue) 34%, #fff); stroke: none; }
.zc-dia-hollow { fill: var(--zc-paper); stroke: none; }
.zc-dia-infill {
  fill: none;
  stroke: color-mix(in srgb, var(--zc-blue) 72%, transparent);
  stroke-width: 1.5;
}

/* A támasz IDEIGLENES: szaggatott keret és halvány rácsozás — szemre is
   elválik a kész daraptól, nem csak felirat mondja meg. */
.zc-dia-support {
  fill: none;
  stroke: var(--zc-slate);
  stroke-width: 1.3;
  stroke-dasharray: 6 4;
}

.zc-dia-support-line {
  fill: none;
  stroke: color-mix(in srgb, var(--zc-slate) 45%, transparent);
  stroke-width: 1.1;
}

/* Ahol a támasz állt, a felület érdesebb marad. */
.zc-dia-rough { fill: none; stroke: var(--zc-slate); stroke-width: 1.6; }

/* A tálca: a rajz „alja", amihez a darab viszonyul. */
.zc-dia-plate { stroke: var(--zc-ink); stroke-width: 3; stroke-linecap: round; }

/* A rétegek iránya a nyomtatási irány ábráján. */
.zc-dia-layerline {
  fill: none;
  stroke: color-mix(in srgb, var(--zc-blue) 48%, transparent);
  stroke-width: 1;
}

/* A gyengébb réteghatár. Az EGYETLEN piros elem a rajzokon — ezért feltűnő. */
.zc-dia-break {
  fill: none;
  stroke: var(--zc-danger);
  stroke-width: 2.4;
  stroke-dasharray: 5 3;
}

.zc-dia-arrow { stroke: var(--zc-ink); stroke-width: 2; }
.zc-dia-arrow-head { fill: var(--zc-ink); stroke: none; }

.zc-dia-lead { stroke: var(--zc-slate); stroke-width: 1; stroke-dasharray: 3 3; }
.zc-dia-scale { fill: none; stroke: var(--zc-ink); stroke-width: 1.6; }

.zc-dia-lupe { fill: none; stroke: var(--zc-ink); stroke-width: 2; }
.zc-dia-lupe-bg { fill: var(--zc-paper); stroke: none; }

.zc-dia-title {
  fill: var(--zc-ink);
  font-family: var(--zc-font);
  font-size: 24px;
  font-weight: 500;
}

.zc-dia-label {
  fill: var(--zc-slate);
  font-family: var(--zc-font);
  font-size: 20px;
}

/* --- Kiemelt doboz a folyószövegben ---
   Arra való, amit könnyű átugrani, pedig pénzbe vagy időbe kerül: egy gyakori
   félreértés, egy korlát, egy figyelmeztetés. Nem „tipp" és nem reklám. */
.zc-doc-callout {
  margin: var(--zc-5) 0;
  padding: var(--zc-4) var(--zc-5);
  border: 1px solid var(--zc-line);
  border-left: 3px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-doc-callout > :last-child { margin-bottom: 0; }

.zc-doc-callout > h3 {
  margin: 0 0 var(--zc-2);
  font-size: 16px;
}

/* Táblázat a tartalmi lapon. A `zc-table-scroll` gondoskodik arról, hogy egy
   széles összehasonlítás telefonon oldalra görgethető legyen, ne csorduljon ki. */
.zc-doc .zc-table-scroll { margin: var(--zc-5) 0; background-color: var(--zc-surface); }
.zc-doc .zc-table th, .zc-doc .zc-table td { line-height: 1.5; }
.zc-doc .zc-table tbody th { width: auto; white-space: normal; color: var(--zc-ink); }

/* AZ ELSO OSZLOP HELYBEN MARAD OLDALRA GORGETVE.

   Egy hat oszlopos osszehasonlitas telefonon nem fer ki: a `zc-table-scroll`
   oldalra gorgetheto. Gorgetes kozben viszont eltunne a SOR NEVE is, es egy
   nev nelkuli "kozepes" cella semmit nem mond. Ezert a sor fejlece a helyen
   marad - a tobbi oszlop alatta csuszik el.

   A hatter NEM dekoracio: nelkule a gorgetett cellak atlatszananak rajta. */
.zc-doc .zc-table thead th:first-child,
.zc-doc .zc-table tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--zc-surface);
  /* Vekony elvalaszto: gorgetes kozben ettol latszik, hol vegzodik a
     helyben maradt oszlop es hol kezdodik a csuszo tartalom. */
  box-shadow: 1px 0 0 var(--zc-line);
}

.zc-doc .zc-table thead th:first-child { background: var(--zc-tint); }

@media (max-width: 560px) {
  /* A RAJZ TELEFONON A LAP SZELEIG ER.

     Nem szepitkezes: a rajz 640 egyseg szeles, es a rendelkezesre allo
     szelessegre skalazodik - vagyis minden megsporolt pixel egyenesen a
     feliratok betumeretebe megy. A konteneren kivulre lepve (a kontener
     sajat belso margojanak megfelelo negativ margoval) es szukebb belso
     margoval a rajz kb. 40 pixellel szelesebb lesz, a feliratok pedig a
     9-10 px-es, hunyorgos savbol a kenyelmesen olvashatoba kerulnek.

     Az oldalso keret ilyenkor elmarad: egy lap szeleig ero doboznak nincs
     oldala, amit keretezni lehetne. */
  .zc-doc-fig {
    margin-inline: calc(var(--zc-4) * -1);
    padding: var(--zc-4) var(--zc-3) var(--zc-3);
    border-inline: 0;
    border-radius: 0;
  }

  .zc-doc .zc-table th, .zc-doc .zc-table td { padding: var(--zc-3) var(--zc-4); }

  /* Telefonon a panelek egymas ala kerulnek - lasd a .zc-dia-split
     megjegyzeset. A harmas osszehasonlitas kettesevel tordel: harom egymas
     alatti panel mar tul hosszu gorgetes lenne, ketto viszont meg mindig
     16 px koruli feliratot ad. */
  .zc-dia-split {
    grid-template-columns: 1fr;
    row-gap: var(--zc-4);
  }

  .zc-dia-split-3 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--zc-3);
  }
}

/* --- Dokumentumjegyzék oldal --- */

.zc-doc-group-section { margin-bottom: var(--zc-7); }

.zc-doc-group-section > h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zc-slate);
  padding-bottom: var(--zc-2);
  border-bottom: 1px solid var(--zc-line);
}

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

.zc-doc-item {
  display: flex;
  align-items: center;
  gap: var(--zc-4);
  padding: var(--zc-4) 0;
  border-bottom: 1px solid var(--zc-line);
}

.zc-doc-item:last-child { border-bottom: 0; }

.zc-doc-item-main { min-width: 0; flex: 1 1 auto; }

.zc-doc-item-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--zc-ink);
}

.zc-doc-item-title:hover { color: var(--zc-blue-deep); }

.zc-doc-item-desc {
  margin: 2px 0 0;
  color: var(--zc-slate);
  font-size: 14px;
}

.zc-doc-item-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--zc-2);
  flex: 0 0 auto;
  padding: var(--zc-2) var(--zc-3);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  color: var(--zc-ink);
}

.zc-doc-item-pdf:hover {
  border-color: var(--zc-blue);
  color: var(--zc-blue-deep);
}

@media (max-width: 900px) {
  .zc-doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--zc-5); }

  .zc-toc {
    position: static;
    max-height: none;
    padding: var(--zc-3) var(--zc-4);
    background: var(--zc-tint);
    border-radius: var(--zc-radius);
  }

  /* Mobilon alapból csukva: hosszú dokumentumnál 69 tétel elnyomná a szöveget. */
  .zc-toc-details:not([open]) > summary { border-bottom: 0; }
}

/* ==========================================================================
   Nyomtatás — ebből lesz a böngésző "PDF mentés"-e
   ========================================================================== */

@media print {
  /* A képernyőre való elemek nem valók papírra. */
  .zc-header,
  .zc-footer,
  .zc-doc-actions,
  .zc-toc,
  .zc-skip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .zc-container { max-width: none; padding: 0; }
  .zc-main { padding: 0; }
  .zc-doc-layout { display: block; }
  .zc-doc { max-width: none; font-size: 11pt; }

  .zc-doc-head {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1pt solid #000;
  }

  .zc-doc-title { font-size: 20pt; }
  .zc-doc-group { color: #000; }
  .zc-doc-desc { color: #333; font-size: 10pt; }

  /* Cím ne maradjon a lap alján, a szövegétől elszakadva. */
  .zc-doc h2,
  .zc-doc h3 {
    break-after: avoid;
    page-break-after: avoid;
    font-size: 13pt;
    margin-top: 1.4em;
  }

  .zc-doc p,
  .zc-doc li {
    orphans: 3;
    widows: 3;
  }

  /* Papíron a link nem kattintható, ezért kiírjuk a címét.
     A belső horgonyoknál (#szakasz) ennek nincs értelme, azokat kihagyjuk. */
  .zc-doc a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }

  .zc-doc a { color: #000; }

  @page {
    margin: 18mm 16mm;
  }
}

/* Állapotjelző címke a címsorokban (pl. "Nincs üres pozíció"). */
.zc-badge {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: var(--zc-2);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 999px;
  white-space: nowrap;
}

.zc-badge-closed {
  background: var(--zc-tint);
  color: var(--zc-slate);
  border: 1px solid var(--zc-line);
}

.zc-badge-open {
  background: color-mix(in srgb, var(--zc-success) 12%, transparent);
  color: var(--zc-success);
  border: 1px solid color-mix(in srgb, var(--zc-success) 30%, transparent);
}

/* ==========================================================================
   Főoldal
   Fehér lapon dolgozunk, ezért a blokkokat NEM kitöltés választja el, hanem
   keret és térköz. Ahol mégis kell háttér (--zc-tint), az ritka és szándékos:
   a szemnek kell egy fogódzó, hogy hol vált a téma.
   ========================================================================== */

/* A főoldal maga adja a szakaszok térközét, ezért a <main> alap paddingja
   itt zavarna: a nyitókép a fejléc alá futna be. */
.zc-main-flush { padding: 0; }

/* --- Ismétlődő elemek ----------------------------------------------------
   Ezek nem csak a főoldaléi: a 4. rétegtől a bérnyomtatás és a prototípus
   oldal is ezekből épül majd, ezért kaptak általános nevet.                */

.zc-eyebrow {
  margin: 0 0 var(--zc-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zc-blue);
}

/* Bevezető mondat: nagyobb a folyószövegnél, de nem címsor. */
.zc-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--zc-slate);
}

.zc-btn-lg {
  padding: var(--zc-4) var(--zc-6);
  font-size: 16px;
}

.zc-section {
  padding: var(--zc-8) 0;
}

/* Váltakozó háttér, hogy a hosszú oldal ne olvadjon egy tömbbe. */
.zc-section-tint {
  background: var(--zc-tint);
  border-block: 1px solid var(--zc-line);
}

.zc-section > .zc-container > h2 {
  margin-bottom: var(--zc-2);
}

.zc-section-lede {
  max-width: 62ch;
  margin-bottom: var(--zc-7);
  color: var(--zc-slate);
}

.zc-section-more {
  margin: var(--zc-6) 0 0;
  font-size: 15px;
}

.zc-section-more a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Nyitókép ------------------------------------------------------------ */

.zc-hero {
  padding: var(--zc-8) 0;
}

.zc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--zc-8);
  align-items: center;
}

.zc-hero-text h1 {
  margin-bottom: var(--zc-4);
  max-width: 16ch;
}

.zc-hero-text .zc-lede {
  max-width: 46ch;
  margin-bottom: var(--zc-6);
}

.zc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
}

.zc-hero-fine {
  margin: var(--zc-5) 0 0;
  font-size: 14px;
  color: var(--zc-slate);
}

.zc-hero-media img {
  display: block;
  width: 100%;
  border-radius: var(--zc-radius-lg);
  border: 1px solid var(--zc-line);
  /* A kép aránya fix, hogy betöltés közben ne ugorjon az elrendezés. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Szolgáltatás-kártyák ------------------------------------------------ */

/* A harom kartya belso sorai egymashoz igazodnak: kep, cim, leiras, kiemelt
   tudnivalo es gombsor mind egy vonalban all - akkor is, ha az egyik kartyan
   nincs sugo-link, vagy ha a szoveg egy sorral hosszabb.
   Ezt a subgrid vegzi, nem kezzel beallitott min-height: azt minden
   szovegvaltozasnal ujra el kellene talalni.
   A kartyanak EGY racsszintje van, ezert nincs korulotte torzs-wrapper - a
   belso vizszintes margot a gyerekek maguk adjak. */
.zc-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: auto auto auto auto auto;
  gap: var(--zc-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-service {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  /* A sorok kozotti terkozt itt allitjuk, kulonben a kulso racs 24px-e
     kerulne a kartyan BELULRE is. A gombsor foloti levegot a .zc-service-note
     also margoja adja. */
  row-gap: var(--zc-2);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zc-service:hover {
  border-color: var(--zc-blue);
  box-shadow: var(--zc-shadow);
}

.zc-service-media { margin-bottom: var(--zc-3); }

.zc-service-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--zc-line);
}

/* A kep a kartya szeleig er, minden mas beljebb kezdodik. */
.zc-service-title,
.zc-service-lede,
.zc-service-note,
.zc-service-actions {
  padding-inline: var(--zc-5);
}

.zc-service-title { margin: 0; }

.zc-service-lede {
  margin: 0;
  color: var(--zc-slate);
}

/* A kiemelt tudnivalo. Fole vonal kerul, hogy elvaljon a leirastol; a sor
   also margoja adja a gombsor foloti levegot.
   A vonalnak a kartya teljes szelesseget kell atfognia, a szoveg viszont
   beljebb all - ezert nem a bekezdes border-topja rajzolja, hanem egy
   pszeudo-elem, ami kilog a vizszintes belso margobol. */
.zc-service-note {
  position: relative;
  margin: 0 0 var(--zc-2);
  padding-top: var(--zc-4);
  font-size: 14px;
  color: var(--zc-slate);
}

.zc-service-note::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--zc-line);
}

.zc-service-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: start;
  gap: var(--zc-3) var(--zc-4);
  padding-bottom: var(--zc-5);
}

.zc-service-help {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Hogyan működik ------------------------------------------------------ */

.zc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--zc-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-step h3 {
  margin-bottom: var(--zc-2);
  font-size: 17px;
}

/* A MEZŐHIBA KIMARAD: a `.zc-field-error` egy osztály, ez a szabály pedig
   osztály + elem, tehát erősebb — enélkül a pénztár minden mezőhibája szürke
   és 15 px-es, nem piros. A hiba így ugyanúgy néz ki, mint bárhol máshol az
   oldalon.

   A `:where()` azért kell, hogy a kivétel NE emelje a szabály súlyát: minden
   más bekezdéssel szemben pontosan annyit ér, mint eddig. */
.zc-step p:where(:not(.zc-field-error)) {
  margin: 0;
  font-size: 15px;
  color: var(--zc-slate);
}

/* A sorszám aria-hidden: a képernyőolvasó a rendezett listából amúgy is
   tudja a sorrendet, kimondva viszont kétszer hangzana el. */
.zc-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--zc-3);
  font-size: 15px;
  font-weight: 500;
  color: var(--zc-blue);
  background: var(--zc-surface);
  border: 1px solid var(--zc-blue);
  border-radius: 999px;
}

/* --- Összehasonlító táblázat --------------------------------------------- */

/* Keskeny kijelzőn a táblázat SAJÁT MAGA gördül, nem az oldal. Enélkül a
   testet tolná szét vízszintesen.

   A jobb szélen árnyék jelzi, ha van még oszlop — enélkül mobilon az SLA
   oszlop egyszerűen eltűnne, és a látogató nem tudná, hogy görgetnie kell.
   A négy réteg együtt működik: a két fehér „takaró" background-attachment:
   local, ezért a tartalommal együtt mozog; a két árnyék scroll, ezért a
   dobozhoz tapad. Ha a táblázat a szélére ért, a takaró eltakarja az adott
   oldali árnyékot — vagyis az árnyék magától csak ott látszik, ahol tényleg
   van még mit megnézni. JavaScript nem kell hozzá. */
.zc-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);

  background:
    linear-gradient(to right, var(--zc-surface) 40%, transparent)
      left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--zc-surface) 40%, transparent)
      right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 14%), transparent)
      left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 14%), transparent)
      right center / 14px 100% no-repeat scroll;
}

.zc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.zc-table th,
.zc-table td {
  padding: var(--zc-4) var(--zc-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--zc-line);
}

.zc-table tbody tr:last-child th,
.zc-table tbody tr:last-child td {
  border-bottom: 0;
}

.zc-table thead th {
  font-weight: 500;
  background: var(--zc-tint);
  white-space: nowrap;
}

/* Az első oszlop a sor neve, nem adat — halványabb és keskenyebb. */
.zc-table tbody th {
  width: 1%;
  white-space: nowrap;
  font-weight: 400;
  color: var(--zc-slate);
}

/* --- Amire számíthatsz --------------------------------------------------- */

.zc-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--zc-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-trust-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--zc-3);
  color: var(--zc-blue);
}

.zc-trust-item h3 {
  margin-bottom: var(--zc-2);
  font-size: 17px;
}

.zc-trust-item p {
  margin: 0;
  font-size: 15px;
  color: var(--zc-slate);
}

/* --- Záró felhívás -------------------------------------------------------- */

.zc-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zc-5);
  padding: var(--zc-7) var(--zc-5);
  background: var(--zc-blue-soft);
  border: 1px solid color-mix(in srgb, var(--zc-blue) 25%, transparent);
  border-radius: var(--zc-radius-lg);
}

.zc-cta-inner h2 { margin-bottom: var(--zc-1); }
.zc-cta-inner .zc-lede { margin: 0; max-width: 48ch; }

/* --- Ami még a régi rendszerre visz ---------------------------------------
   Fejlesztés közben apró pont jelzi. Éles üzemben az isLegacyLink() hamis,
   ezért a data-legacy attribútum meg sem jelenik a kimenetben.             */

[data-legacy]::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: var(--zc-2);
  vertical-align: middle;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.45;
}

/* --- Főoldal mobilon ----------------------------------------------------- */

@media (max-width: 900px) {
  .zc-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-6);
  }

  /* A kép marad alul: a hajtás fölött a cím és a gomb a fontos, nem a fotó. */
  .zc-hero { padding: var(--zc-7) 0; }

  .zc-hero-text h1 { max-width: none; }

  .zc-section { padding: var(--zc-7) 0; }

  .zc-cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .zc-hero-actions .zc-btn { width: 100%; }
  .zc-cta-inner .zc-btn { width: 100%; }
}

/* ==========================================================================
   Bérnyomtatás oldal
   A nyitókép, a szakaszok és a lépéssor a főoldal elemeiből épül; itt csak az
   áll, ami ezen az oldalon jelenik meg először.
   ========================================================================== */

/* --- Feltöltési terület -------------------------------------------------- */

/* A feltöltő doboz kapja a több helyet: az a lap tétje. A jobb oldali oszlop
   csak kísérő — annak elég, amennyi a linkekhez kell. */
.zc-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--zc-6);
  align-items: start;
}

/* A szaggatott keret a bevett jelzés arra, hogy ide ejteni lehet. A doboz
   MAGA a <form>: így JavaScript nélkül is működik a fájlválasztás és a
   beküldés, a húzd-és-ejtsd pedig csak ráépül. */
.zc-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--zc-8) var(--zc-5);
  text-align: center;
  background: var(--zc-surface);
  border: 2px dashed var(--zc-line);
  border-radius: var(--zc-radius-lg);
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Fájl fölé húzva a keret kékre vált. A data-attribútumot a szkript teszi rá;
   e nélkül a doboz semmivel sem néz ki másképp. */
.zc-drop[data-dragging] {
  border-color: var(--zc-blue);
  background: var(--zc-blue-soft);
}

/* A rejtett fájlválasztó fókuszgyűrűje a látható címkére kerül át — enélkül a
   billentyűzetes látogató nem látná, hol jár. */
.zc-drop input[type="file"]:focus-visible + label {
  outline: 2px solid var(--zc-blue);
  outline-offset: 2px;
}

.zc-drop-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--zc-3);
  color: var(--zc-blue);
}

.zc-drop-text {
  margin: 0 0 var(--zc-1);
  font-size: 20px;
  font-weight: 500;
}

.zc-drop-or {
  margin: 0 0 var(--zc-3);
  font-size: 14px;
  color: var(--zc-slate);
}

.zc-drop-fine {
  max-width: 40ch;
  margin: var(--zc-5) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--zc-slate);
}

/* Üresen egyik visszajelző sáv sem foglal helyet — a doboz így nem ugrik meg,
   amikor a szkript kitölti őket. */
.zc-drop-files:empty,
.zc-drop-error:empty {
  display: none;
}

.zc-drop-files {
  width: 100%;
  max-width: 420px;
  margin: var(--zc-5) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.zc-drop-file {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  padding: var(--zc-2) var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
}

.zc-drop-file + .zc-drop-file { margin-top: var(--zc-2); }

.zc-drop-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.zc-drop-file-size {
  flex: 0 0 auto;
  font-family: var(--zc-mono);
  font-size: 12px;
  color: var(--zc-slate);
}

/* A törlőgomb ikon méretű, de a kattintható felülete 32px — ujjal is
   eltalálható. */
.zc-drop-remove {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--zc-slate);
  background: none;
  border: 0;
  border-radius: var(--zc-radius);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
}

.zc-drop-remove:hover {
  color: var(--zc-danger);
  background: var(--zc-tint);
}

.zc-drop-error {
  max-width: 44ch;
  margin: var(--zc-4) 0 0;
  font-size: 14px;
  color: var(--zc-danger);
}

.zc-drop-submit { margin-top: var(--zc-5); }

/* --- A beküldés állapota -------------------------------------------------

   MIÉRT VAN RÁ SZÜKSÉG. A beküldés egy több tíz megabájtos fájlfeltöltés: a
   gomb megnyomása és a következő lap között másodpercek telnek el, és a
   böngésző magától semmit nem mutat belőle. E nélkül a sáv nélkül a látogató
   azt látja, hogy nem történt semmi — és megnyomja a gombot még egyszer.

   A SZÁZALÉK VALÓDI MÉRÉSBŐL JÖN. Az érték az XMLHttpRequest feltöltési
   progress eseményéből származik, tehát a ténylegesen elküldött bájtokat
   mutatja. Időzítővel növelt, kitalált százalék NINCS: ha a böngésző nem tud
   mérni, a sáv egyszerűen nem jelenik meg, és marad a felirat meg a pörgő.

   KÉT SZAKASZ, KÉT FELIRAT. A 100% csak annyit jelent, hogy a bájtok
   megérkeztek — a mérés és az árazás ezután kezdődik. Ezért a sáv ilyenkor
   megtelt állapotban áll, a felirat pedig átvált a feldolgozásra. */
.zc-drop-status {
  width: 100%;
  max-width: 420px;
  margin: var(--zc-5) 0 0;
  text-align: start;
}

.zc-drop-status[hidden] { display: none; }

.zc-drop-status-line {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--zc-ink);
}

.zc-drop-status-text { flex: 1 1 auto; min-width: 0; }

/* A százalék a sávhoz tartozik, nem a mondathoz: fix szélességű betűvel nem
   ugrál a szöveg, ahogy az érték változik. */
.zc-drop-status-percent {
  flex: 0 0 auto;
  font-family: var(--zc-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--zc-slate);
}

.zc-drop-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--zc-blue-soft);
  border-top-color: var(--zc-blue);
  border-radius: 50%;
  animation: zc-spin 0.7s linear infinite;
}

/* A pörgés DÍSZÍTÉS: az állapotot a felirat és a sáv hordozza, ezért itt
   megáll, és nem helyettesítjük másik mozgással. A gyűrű látható marad. */
@media (prefers-reduced-motion: reduce) {
  .zc-drop-spinner { animation: none; }
  .zc-drop-meter-fill { transition: none; }
}

@keyframes zc-spin {
  to { transform: rotate(360deg); }
}

.zc-drop-meter {
  height: 6px;
  margin-top: var(--zc-2);
  background: var(--zc-blue-soft);
  border-radius: 999px;
  overflow: hidden;
}

.zc-drop-meter[hidden] { display: none; }

.zc-drop-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--zc-blue);
  border-radius: inherit;
  transition: width 0.2s ease;
}

/* Beküldés közben a fájlválasztó és a törlőgombok nem fogadnak kattintást: a
   felmenő kérés fájllistája már nem változhat. A gátat a szkript is őrzi —
   ez itt csak annyit tesz hozzá, hogy LÁTSZIK is rajta. */
.zc-drop[data-sending] .zc-drop-remove,
.zc-drop[data-sending] input[type="file"] + label,
.zc-drop[data-sending] .zc-drop-submit {
  pointer-events: none;
  opacity: 0.55;
}

.zc-upload-aside {
  padding: var(--zc-5);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
}

.zc-upload-aside h3 { margin-bottom: var(--zc-2); }

.zc-upload-aside p {
  font-size: 15px;
  color: var(--zc-slate);
}

/* --- Linklista ----------------------------------------------------------- */

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

.zc-link-list li + li { margin-top: var(--zc-2); }

.zc-link-list a {
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Technológia-kártyák ------------------------------------------------- */

/* Két kártya, subgriddel igazítva: a kép, a cím, az összefoglaló és az
   adatlista mind egy vonalban áll, akkor is, ha az egyik leírás egy sorral
   hosszabb. Kézzel beállított magasság minden szövegváltozásnál elcsúszna. */
.zc-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: var(--zc-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-tech {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: var(--zc-3);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  overflow: hidden;
}

.zc-tech-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--zc-line);
}

.zc-tech-title,
.zc-tech-summary,
.zc-tech-specs {
  padding-inline: var(--zc-5);
}

.zc-tech-title { margin: 0; }

.zc-tech-summary {
  margin: 0;
  font-size: 15px;
  color: var(--zc-slate);
}

/* Az adatlista sorai: a megnevezés bal oldalon, az érték jobbra zárva.
   A <div> burkolat a <dl>-en belül szándékos — enélkül a dt/dd párokat nem
   lehetne egy-egy rácssorként kezelni. */
.zc-tech-specs {
  margin: 0;
  padding-bottom: var(--zc-5);
  align-self: start;
}

.zc-tech-specs > div {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--zc-4);
  align-items: baseline;
  padding: var(--zc-3) 0;
  border-top: 1px solid var(--zc-line);
}

.zc-tech-specs dt {
  font-size: 14px;
  color: var(--zc-slate);
}

.zc-tech-specs dd {
  margin: 0;
  font-size: 15px;
  text-align: end;
}

/* --- Jegyzetek pipával --------------------------------------------------- */

.zc-notes-block { margin-top: var(--zc-7); }

.zc-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--zc-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-notes li {
  display: flex;
  align-items: start;
  gap: var(--zc-3);
  font-size: 15px;
  color: var(--zc-slate);
}

.zc-note-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  /* A pipa a szöveg első sorának közepére kerül, nem a doboz tetejére. */
  margin-top: 2px;
  color: var(--zc-blue);
}

/* --- Beállítások --------------------------------------------------------- */

.zc-settings-group + .zc-settings-group { margin-top: var(--zc-7); }

.zc-settings-group > h3 {
  margin-bottom: var(--zc-3);
  padding-bottom: var(--zc-2);
  border-bottom: 1px solid var(--zc-line);
}

.zc-settings { margin: 0; }

/* Bal oldalt mi az és mit jelent, jobb oldalt a választható értékek. Keskeny
   kijelzőn a két oszlop egymás alá kerül — lásd a lap alján. */
.zc-setting {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--zc-4) var(--zc-6);
  padding: var(--zc-4) 0;
}

.zc-setting + .zc-setting { border-top: 1px solid var(--zc-line); }

.zc-setting dt { margin: 0; }

.zc-setting dd { margin: 0; }

.zc-setting-label {
  display: block;
  font-weight: 500;
}

.zc-setting-text {
  display: block;
  margin-top: var(--zc-1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--zc-slate);
}

.zc-setting-range {
  margin: 0;
  font-size: 15px;
}

/* --- Értékcímkék --------------------------------------------------------- */

.zc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-chip {
  padding: var(--zc-1) var(--zc-3);
  font-family: var(--zc-mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--zc-slate);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: 999px;
}

/* Az alapbeállítás kék kerettel válik ki. A színen kívül a bevezető
   bekezdésben ki is mondjuk, mit jelent a kiemelés — a jelentés nem múlhat
   pusztán a színen. */
.zc-chip-default {
  font-weight: 500;
  color: var(--zc-blue-deep);
  background: var(--zc-blue-soft);
  border-color: var(--zc-blue);
}

/* --- Kép és szöveg sávban ------------------------------------------------ */

.zc-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--zc-8);
  align-items: center;
}

.zc-band-text > h2 { margin-bottom: var(--zc-3); }

.zc-band-text .zc-lede {
  max-width: 48ch;
  margin-bottom: var(--zc-4);
}

.zc-band-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
}

/* A képet a rácsban mozgatjuk, nem a jelölésben: a DOM-sorrend marad
   szöveg-majd-kép, ezért mobilon (ahol az oszlopok egymás alá esnek)
   mindkét sávnál a szöveg jön előbb. */
.zc-band-reverse .zc-band-text { grid-column: 2; grid-row: 1; }
.zc-band-reverse .zc-band-media { grid-column: 1; grid-row: 1; }

.zc-price-mins { color: var(--zc-slate); }

/* --- Bérnyomtatás mobilon ------------------------------------------------ */

@media (max-width: 900px) {
  .zc-upload-grid,
  .zc-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-6);
  }

  /* Egyoszlopos rácsban a helycserének nincs értelme: mindkettő az 1. oszlopba
     kerül, és a DOM-sorrend dönt — szöveg, majd kép. */
  .zc-band-reverse .zc-band-text,
  .zc-band-reverse .zc-band-media {
    grid-column: 1;
    grid-row: auto;
  }

  /* Egy kártya egy oszlopban: a subgrid-igazításnak nincs mihez igazodnia. */
  .zc-tech { display: block; }

  .zc-tech-media { margin-bottom: var(--zc-3); }

  .zc-tech-title,
  .zc-tech-summary { margin-bottom: var(--zc-3); }

  .zc-setting {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-3);
  }
}

@media (max-width: 560px) {
  .zc-drop { padding: var(--zc-6) var(--zc-4); }
  .zc-drop-submit { width: 100%; }
}

/* ========================================================================= *
   Feltöltés eredménye (/uploadPrint)

   A mért adatok — befoglaló méret, térfogat, felület — GÉPI értékek, ezért
   fix szélességű betűt kapnak (`.zc-spec`), mint a technológia-kártyákon.
   A méretkapu verdiktje szín MELLETT jellel is megjelenik: a színvakság
   miatt a zöld/piros önmagában nem hordozhatja az információt.
 * ========================================================================= */

.zc-result {
  max-width: 780px;
  margin-inline: auto;
  padding-block: var(--zc-7);
}

.zc-result h1 { margin-bottom: var(--zc-3); }

/* Az elutasítás szövege: keret, nem kitöltés — ahogy a lap többi kártyája. */
.zc-result-problem {
  margin-block: var(--zc-5);
  padding: var(--zc-4) var(--zc-5);
  border: 1px solid var(--zc-danger);
  border-radius: var(--zc-radius);
  color: var(--zc-danger);
  font-weight: 500;
}

.zc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
  margin-top: var(--zc-6);
}

/* A migráció ideiglenes állapotáról szóló figyelmeztetés. A tárolás
   elkészültével ez a szabály is törölhető. */
.zc-result-interim {
  margin-top: var(--zc-6);
  padding: var(--zc-4);
  border: 1px dashed var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-slate);
  font-size: 0.9375rem;
}

/* --- Egy lemért modell --------------------------------------------------- */

.zc-models {
  display: grid;
  gap: var(--zc-5);
  margin-top: var(--zc-6);
  padding: 0;
  list-style: none;
}

.zc-model {
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
}

.zc-model-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zc-2);
  padding-bottom: var(--zc-4);
  border-bottom: 1px solid var(--zc-line);
}

/* A fájlnév a LÁTOGATÓÉ: tetszőleges hosszú lehet, és nem törhet ki a
   kártyából. Az `overflow-wrap` a szóköz nélküli hosszú neveket is tördeli. */
.zc-model-name {
  margin: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.zc-model-size {
  margin: 0;
  color: var(--zc-slate);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.zc-model-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--zc-4);
  margin: var(--zc-4) 0 0;
}

.zc-model-specs dt {
  margin-bottom: var(--zc-1);
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

.zc-model-specs dd { margin: 0; }

/* --- Méretkapu ----------------------------------------------------------- */

.zc-fits {
  display: grid;
  gap: var(--zc-2);
  margin: var(--zc-5) 0 0;
  padding: 0;
  list-style: none;
}

.zc-fit {
  display: flex;
  align-items: baseline;
  gap: var(--zc-2);
  font-size: 0.9375rem;
}

.zc-fit-mark {
  flex: none;
  width: 1.25em;
  font-weight: 700;
}

.zc-fit-yes .zc-fit-mark { color: var(--zc-success); }
.zc-fit-no { color: var(--zc-slate); }
.zc-fit-no .zc-fit-mark { color: var(--zc-danger); }

.zc-model-warn {
  margin: var(--zc-4) 0 0;
  color: var(--zc-slate);
  font-size: 0.9375rem;
}

@media (max-width: 560px) {
  .zc-result { padding-block: var(--zc-6); }
  .zc-result-actions .zc-btn { width: 100%; }
}

/* ========================================================================= *
   Paraméter-oldal (/uploadPrint?file=…)

   Modellenként egy kártya, két sávban:

     FELÜL  a modell — előnézet, mért adatok, darabszám és ár. Ez az, amit a
            látogató először néz meg, és amiért a lapon van.
     ALUL   a hat beállítás, asztali nézetben KÉT SORBAN, SORONKÉNT HÁROM
            kártyával. A rejtett (másik technológiához tartozó) kártyák nem
            foglalnak helyet, tehát a rács mindig hatelemű.

   A megjelenés a főoldal, a prototípusgyártás és a bérnyomtatás lapjaival
   közös jelrendszerre épül: ugyanazok a színek, térközök, sugarak és
   gombstílusok — a kártyákat itt is a keret választja el, nem a kitöltés.
 * ========================================================================= */

.zc-quote-page { padding-block: var(--zc-5) var(--zc-8); }

.zc-quote-head { max-width: 62ch; margin-bottom: var(--zc-6); }
.zc-quote-head h1 { margin-bottom: var(--zc-3); }

/* A PARAMETER-OLDAL BEVEZETOJE PONTOSAN KET SOR: a cimsor es egy mondat.
   A 62ch a folyoszoveg olvashato hossza - egy egysoros bevezetonek viszont
   szuk, ott a mondat harmadik sorra torne. A tartalom itt nem olvasnivalo,
   hanem eligazitas: a lap erdemi resze a modell es a hat kartya. */
.zc-quote-page .zc-quote-head {
  max-width: 60rem;
  margin-bottom: var(--zc-5);
}

.zc-quote-page .zc-quote-head h1 { margin-bottom: var(--zc-2); }

.zc-quotes {
  display: grid;
  gap: var(--zc-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-quote {
  display: grid;
  gap: var(--zc-5);
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
}

/* --- Felső sáv: modell, adatok, rendelés ---------------------------------- */

/* Balra a kep, jobbra MINDEN mas: adatok, ar, darabszam, muveletek. A ket
   muvelet (Kosarba, Masik fajl feltoltese) a kep melletti szabad teruletre
   kerult, az adatok ala - nem a lap aljara.

   A KET OSZLOP ALJA EGY SZINTBEN VAN. Nincs `align-items: start`, tehat
   mindket hasab a sor teljes magassagat kapja: a rovidebbik nyulik a
   hosszabbikhoz. Igy a kep kerete es a rendelesi doboz alsó ele pontosan
   egy vonalban all - korabban a kep hamarabb ert veget, es az elrendezes
   elcsuszottnak latszott. */
.zc-quote-top {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: var(--zc-5);
}

/* Ket sor: felul az adatok a sajat magassagukkal, alatta a rendelesi doboz,
   ami KITOLTI a maradekot. Ettol a jobb hasab alja mindig a sor aljan van,
   akkor is, ha a kep oldala a magasabb. */
.zc-quote-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--zc-4);
  min-width: 0;
}

/* Négyzetes terület: az előnézeti kép is négyzetes, így nem torzul és nem
   ugrál a lap magassága, amíg a kép betölt.

   AZ `aspect-ratio` A LEGKISEBB MERET, nem a végleges: ha a jobb hasáb
   magasabb, a keret vele együtt nyúlik (a rácssor nyújtja), és a kép a
   `object-fit: contain` miatt arányos és teljes egészében látható marad —
   középen, a nagyobb keretben. Vágás és torzítás tehát nincs.

   AZ `align-self: stretch` NEM FELESLEGES. Az alapértelmezett `normal`
   igazítás a saját képaránnyal rendelkező rácselemet NEM nyújtja, hanem a
   sor tetejére teszi (CSS Box Alignment) — pontosan ezért ért véget eddig a
   keret hamarabb, mint a mellette álló oszlop. Kimondva viszont nyúlik, és a
   képarány marad az, ami: a legkisebb magasság.

   A `width: 100%` SEM FELESLEGES, ez tartja a keretet az oszlopában. Ugyanaz
   a szabály vonatkozik az `align-self`-re és a `justify-self`-re: képaránnyal
   rendelkező elemet a `normal` nem nyújt. A szélesség így nem lenne definit,
   a képarány pedig a NYÚJTOTT magasságot vinné át rá — a keret kinőtt volna
   az oszlopából, rá a mellette álló szövegre. Definit szélesség mellett a
   képarány már csak a legkisebb magasságot adja. */
.zc-quote-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  overflow: hidden;
}

.zc-quote-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zc-quote-noimage {
  margin: 0;
  padding: var(--zc-4);
  color: var(--zc-slate);
  font-size: 0.875rem;
  text-align: center;
}

/* A fájlnév a látogatóé: tetszőleges hosszú lehet, és nem törhet ki. */
.zc-quote-name {
  margin: 0 0 var(--zc-4);
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.zc-quote-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--zc-4);
  margin: 0;
}

.zc-quote-specs dt {
  margin-bottom: var(--zc-1);
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

.zc-quote-specs dd { margin: 0; }

/* --- Ár, darabszám, műveletek --------------------------------------------- */

/* Ha a doboz a kepnel alacsonyabb, a MARADEK helyet a ket resze kozott
   osztjuk el: az ar felul marad, a darabszam es a gombok pedig a doboz
   aljara kerulnek - oda, ahol a kep kerete is vegzodik. */
.zc-quote-order {
  display: grid;
  align-content: space-between;
  gap: var(--zc-4);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

/* A darabszám és a „Kosárba" EGY SORBAN: így egyértelmű, hány darabot teszünk
   be. Szűkebb helyen a gombok a szám alá csúsznak — a sorrend ugyanaz marad.
   A magyarázó és a hibaüzenet mindig külön, teljes szélességű sor. */
.zc-quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--zc-3) var(--zc-4);
  padding-top: var(--zc-4);
  border-top: 1px solid var(--zc-line);
}

.zc-quote-actions .zc-qty { flex: 0 0 auto; }

.zc-quote-go {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
  flex: 1 1 18rem;
}

/* A „Kosárba" az elsődleges művelet: ez kapja a nagyobb helyet. A másodlagos
   gomb ugyanabban a sorban áll, de csendes stílussal. */
.zc-quote-go .zc-btn {
  flex: 1 1 10rem;
  min-height: 44px;
}

.zc-quote-actions .zc-qty-text,
.zc-quote-actions .zc-qty-error,
.zc-quote-actions .zc-quote-next { flex: 1 0 100%; }

.zc-qty { display: grid; gap: var(--zc-2); }

.zc-qty-label {
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

/* Mínusz – érték – plusz, egyetlen összefüggő vezérlőként. A mező szélessége
   két számjegyre van szabva: 99 fölé úgysem lehet menni. */
.zc-qty-row {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  overflow: hidden;
}

.zc-qty-btn {
  width: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--zc-ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.zc-qty-btn:hover:not(:disabled) { background: var(--zc-blue-soft); }
.zc-qty-btn:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: -2px; }
.zc-qty-btn:disabled { color: var(--zc-line); cursor: default; }

.zc-qty-input {
  width: 3.5rem;
  padding: var(--zc-2) 0;
  border: 0;
  border-inline: 1px solid var(--zc-line);
  background: transparent;
  color: var(--zc-ink);
  font: inherit;
  font-family: var(--zc-mono);
  font-size: 1.0625rem;
  text-align: center;
  appearance: textfield;
}

/* A böngésző saját nyilai fölöslegesek: ott a két gomb, és azok nagyobbak. */
.zc-qty-input::-webkit-outer-spin-button,
.zc-qty-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.zc-qty-input:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: -2px; }

.zc-qty-text,
.zc-qty-error {
  margin: 0;
  font-size: 0.8125rem;
}

.zc-qty-text { color: var(--zc-slate); }
.zc-qty-error { color: var(--zc-danger); }

/* Az ár a doboz ELSŐ eleme, tehát nincs fölötte elválasztó vonal: a keret
   maga zárja le. Az elválasztás a műveletek fölé került. */
.zc-quote-price { min-width: 0; }

/* A VEGOSSZEG ES A DARABSZAM x EGYSEGAR EGY SORBAN.

   Korabban a szorzo kulon bekezdes volt az osszeg ALATT, es a darabszam
   novelese ettol megnovelte a dobozt: az alatta allo gombok lejjebb csusztak,
   eppen akkor, amikor a latogato rajuk akart kattintani. Egy sorban a
   masodlagos szoveg belefer az osszeg sormagassagaba (kisebb betu, kisebb
   sormagassag), tehat az 1 -> 99 valtas semmit nem mozdit el.

   A min-height maga az osszeg sormagassaga: a doboz akkor is ennyi, ha eppen
   nincs szorzo - vagyis egy darabnal. */
.zc-price-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--zc-2);
  margin: 0;
  min-height: calc(1.75rem * 1.15);
}

.zc-price-total {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
}

.zc-price-unit,
.zc-price-min,
.zc-price-note {
  margin: var(--zc-2) 0 0;
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

/* A soron belul nincs felso terkoz, a valasztojel pedig CSAK akkor latszik,
   ha van mit elvalasztani: egy darabnal a span ures, tehat semmi nem marad a
   helyen. */
.zc-price-sum .zc-price-unit { margin: 0; }

.zc-price-sum .zc-price-unit:not(:empty)::before {
  content: '·';
  margin-inline-end: var(--zc-2);
}

.zc-price-unfit {
  margin: 0;
  color: var(--zc-danger);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Újramérés (ZV2-03): a várakozás mondata és a gomb egy sorban, ha elfér.
   Szkripttel a mondat eltűnik, és a hátralévő idő a gombon látszik. */
.zc-remeasure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zc-2) var(--zc-3);
  margin-top: var(--zc-3);
}

.zc-remeasure .zc-price-note { margin: 0; }

.zc-cart-remeasure-wait {
  margin: 0;
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-remeasure .zc-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* A méret-kérdés a nagyon kicsi modelleknél.

   NEM HIBA, ezért nem a `--zc-danger` piros: a tétel árazott és megrendelhető,
   itt csak rákérdezünk, hogy a méret szándékos-e. A halvány keret annyit ér el,
   hogy a szem megakadjon rajta — a `zc-price-note` szürke sorai között
   egyébként elveszne. */
.zc-price-warn {
  margin: var(--zc-3) 0 0;
  padding: var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font-size: 0.8125rem;
}

/* Amíg fut az árszámítás, az árak elhalványulnak. Nem tűnnek el: a régi ár
   olvasható marad, csak látszik, hogy már nem az érvényes. A „Kosárba" gomb
   ilyenkor le van tiltva — elavult árral nem lehet továbblépni. */
.zc-quote-busy .zc-quote-price,
.zc-quote-busy .zc-quote-total {
  opacity: 0.45;
  transition: opacity 120ms ease-out;
}

/* ========================================================================= *
   A hat beállítás — kártyarács

   Asztali nézetben három oszlop, tehát a hat kártya pontosan két sort tölt
   ki. Szűkebb kijelzőn kettő, majd egy oszlop — vízszintes görgetés nélkül.
 * ========================================================================= */

.zc-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zc-4);
}

/* A kártya <fieldset>, hogy a benne álló választógombok csoportja néven
   nevezhető legyen. A `min-width: 0` nélkül a fieldset nem enged a rácsnak:
   a saját tartalmának belső minimumára feszülne, és kitolná az oszlopot. */
.zc-opt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
}

.zc-opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zc-2);
  width: 100%;
  margin-bottom: var(--zc-3);
}

.zc-opt-name {
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

/* AZ AKTUÁLIS ÉRTÉK. Ez a kártya legfontosabb szava a megnevezés után:
   egy pillantással látszódnia kell, mi van most beállítva. */
.zc-opt-value {
  color: var(--zc-ink);
  font-family: var(--zc-mono);
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.zc-opt-value-off {
  color: var(--zc-slate);
  font-family: var(--zc-font);
  font-weight: 400;
  font-size: 0.8125rem;
}

.zc-opt-help {
  margin: var(--zc-3) 0 0;
  color: var(--zc-slate);
  font-size: 0.75rem;
  line-height: 1.45;
}

.zc-opt-inertnote {
  margin: 0;
  padding: var(--zc-3);
  border: 1px dashed var(--zc-line);
  border-radius: var(--zc-radius);
  color: var(--zc-slate);
  font-size: 0.8125rem;
}

/* A JavaScript nélküli tartalék: a sima legördülő. */
.zc-opt-control select {
  width: 100%;
  padding: var(--zc-2) var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 0.9375rem;
}

.zc-opt-control select:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: 1px; }

/* --- Szemléltetés ---------------------------------------------------------

   Három rajz, mind CSS-ből, egyetlen pixelértékből (`--zc-fig`), amit a
   szerver számol ki. Nem méretarányos ábrázolás — egy 0,12 mm-es réteg
   képernyőn láthatatlan lenne —, hanem összehasonlítás: látsszon, melyik
   vékonyabb vagy sűrűbb a másiknál.                                         */

.zc-fig {
  display: block;
  height: 52px;
  margin-bottom: var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background-color: var(--zc-tint);
  overflow: hidden;
}

/* Rétegvastagság: vízszintes sávok, közöttük állandó rés. */
.zc-fig-layer {
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--zc-blue) 45%, transparent) 0,
    color-mix(in srgb, var(--zc-blue) 45%, transparent) var(--zc-fig),
    transparent var(--zc-fig),
    transparent calc(var(--zc-fig) + 3px)
  );
}

/* Kitöltés: keresztirányú rács. Sűrűbb kitöltés = kisebb vonaltávolság. */
.zc-fig-infill {
  background-image:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--zc-blue) 45%, transparent) 0 2px,
      transparent 2px var(--zc-fig)
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--zc-blue) 45%, transparent) 0 2px,
      transparent 2px var(--zc-fig)
    );
}

/* Falvastagság: keresztmetszet, a héj vastagsága a beállítással nő. */
.zc-fig-wall { position: relative; }

.zc-fig-wall::before {
  content: '';
  position: absolute;
  inset: 8px 22%;
  border: var(--zc-fig) solid color-mix(in srgb, var(--zc-blue) 45%, transparent);
  border-radius: 5px;
}

/* --- Választógombok egymás mellett ---------------------------------------- */

.zc-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--zc-2);
}

.zc-seg-option { display: block; cursor: pointer; }

/* A gomb maga láthatatlan — a keretes felület viszi a kijelölést. A mező
   ettől még valódi választógomb: billentyűvel a nyilak lépnek rajta, és
   JavaScript nélkül is ez megy be a beküldésbe. */
.zc-seg-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.zc-seg-face {
  display: block;
  height: 100%;
  padding: var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  line-height: 1.35;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.zc-seg-option:hover .zc-seg-face { border-color: var(--zc-blue); }

/* A KIJELÖLT ÁLLAPOT: kék keret, halvány kék háttér és vastagabb vonal. Nem
   csak szín — a dupla keret színtévesztéssel élőnek is látszik. */
.zc-seg-option input:checked + .zc-seg-face {
  border-color: var(--zc-blue);
  background: var(--zc-blue-soft);
  box-shadow: inset 0 0 0 1px var(--zc-blue);
}

.zc-seg-option input:focus-visible + .zc-seg-face {
  outline: 2px solid var(--zc-blue);
  outline-offset: 2px;
}

.zc-seg-name {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
}

.zc-seg-note {
  display: block;
  margin-top: 2px;
  color: var(--zc-slate);
  font-size: 0.75rem;
}

/* A be nem férő technológia választható marad — a kártya megmondja, miért nem
   érdemes. Egy letiltott gomb ezt nem tudná elmondani. */
.zc-seg-problem { color: var(--zc-danger); }

.zc-seg-fig {
  display: block;
  width: 48px;
  height: 32px;
  margin-bottom: var(--zc-2);
  color: var(--zc-slate);
}

.zc-seg-option input:checked + .zc-seg-face .zc-seg-fig { color: var(--zc-blue-deep); }

.zc-seg-fig-solid { fill: currentColor; }
.zc-seg-fig-line { fill: currentColor; opacity: 0.55; }
.zc-seg-fig-soft { fill: currentColor; opacity: 0.25; }

/* --- Csúszka -------------------------------------------------------------- */

/* A csúszka a kártya TELJES szélességét megkapja, a tartomány két vége pedig
   alatta áll. A sáv így jóval hosszabb, mint amikor a két felirat mellette
   szorongott — ugyanannyi lépés hosszabb úton, tehát pontosabban célozható.

   ÉRINTÉSI CÉLTERÜLET. A mező maga 44 px magas és teljes szélességű, tehát a
   megfogható terület mindenhol legalább 44 x 44 CSS-pixel. A LÁTHATÓ gomb
   ennél kisebb (26 px): a sáv fölé rajzolódik, de a hozzá tartozó érzékeny
   felület a teljes magasság.

   A minimum, a maximum és a lépésköz VÁLTOZATLAN: a csúszka továbbra is a
   lista indexén lép, tehát csak támogatott értéket tud előállítani. */
.zc-slider {
  display: grid;
  gap: var(--zc-1);
}

.zc-slider-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--zc-2);
}

.zc-slider-end {
  color: var(--zc-slate);
  font-family: var(--zc-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.zc-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--zc-blue);
  cursor: pointer;
  touch-action: pan-y;
}

/* A sáv. A két böngészőcsalád külön ál-elemet ad rá, és ha egy szabályban
   sorolnánk fel őket, az EGÉSZ szabályt eldobná az, amelyik a másikat nem
   ismeri — ezért áll mindegyik külön. */
.zc-slider-input::-webkit-slider-runnable-track {
  height: 12px;
  border: 1px solid var(--zc-line);
  border-radius: 999px;
  background: var(--zc-blue-soft);
}

.zc-slider-input::-moz-range-track {
  height: 12px;
  border: 1px solid var(--zc-line);
  border-radius: 999px;
  background: var(--zc-blue-soft);
}

/* A megtett rész — csak a Firefox tudja ál-elemként. A Chrome sávja egyszínű
   marad; ez megjelenésbeli különbség, nem működésbeli. */
.zc-slider-input::-moz-range-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--zc-blue);
}

.zc-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  /* A sáv (12 px + 2 px keret) és a gomb magasságkülönbségének fele — így ül
     a gomb pontosan a sáv közepére. */
  margin-top: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--zc-blue);
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.28);
}

.zc-slider-input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--zc-blue);
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.28);
}

.zc-slider-input:hover::-webkit-slider-thumb { background: var(--zc-blue-deep); }
.zc-slider-input:hover::-moz-range-thumb { background: var(--zc-blue-deep); }

/* A fókuszkeret a GOMBRA kerül, nem a 44 px-es dobozra: különben egy vastag
   téglalap ugrana ki a kártyából, és nem látszana, hol áll a csúszka. */
.zc-slider-input:focus { outline: none; }

.zc-slider-input:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--zc-blue-deep);
  outline-offset: 2px;
}

.zc-slider-input:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--zc-blue-deep);
  outline-offset: 2px;
}

/* --- A felugró panelt nyitó gomb ------------------------------------------ */

.zc-opt-trigger {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  width: 100%;
  padding: var(--zc-2) var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.zc-opt-trigger:hover { border-color: var(--zc-blue); background: var(--zc-blue-soft); }
.zc-opt-trigger:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: 2px; }

.zc-opt-trigger-body { min-width: 0; flex: 1; }

.zc-opt-trigger-value {
  display: block;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.zc-opt-trigger-extra {
  display: block;
  color: var(--zc-slate);
  font-size: 0.75rem;
}

.zc-opt-trigger-extra:empty { display: none; }

.zc-opt-trigger-more {
  flex: none;
  color: var(--zc-blue);
  font-size: 0.75rem;
}

/* --- A felugró választópanel ---------------------------------------------- */

.zc-picker {
  width: min(640px, calc(100vw - 2 * var(--zc-4)));
  max-height: min(80vh, 640px);
  padding: 0;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
  color: var(--zc-ink);
  box-shadow: var(--zc-shadow);
  overflow: hidden;
}

.zc-picker::backdrop { background: rgb(0 0 0 / 45%); }

.zc-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zc-3);
  padding: var(--zc-4) var(--zc-5);
  border-bottom: 1px solid var(--zc-line);
}

.zc-picker-title { margin: 0; font-size: 1.0625rem; }

.zc-picker-close {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.zc-picker-close:hover { background: var(--zc-blue-soft); }
.zc-picker-close:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: 2px; }

.zc-picker-list {
  display: grid;
  gap: var(--zc-2);
  max-height: calc(min(80vh, 640px) - 5rem);
  margin: 0;
  padding: var(--zc-4) var(--zc-5) var(--zc-5);
  list-style: none;
  overflow-y: auto;
}

/* A színek rövidek: kettő-három fér egymás mellé. Az anyagok egy mondatot is
   visznek, azok maradnak egy oszlopban. */
.zc-picker-colors { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.zc-picker-item {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  width: 100%;
  height: 100%;
  padding: var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.zc-picker-item:hover { border-color: var(--zc-blue); background: var(--zc-blue-soft); }
.zc-picker-item:focus-visible { outline: 2px solid var(--zc-blue); outline-offset: 2px; }

.zc-picker-item[aria-checked='true'] {
  border-color: var(--zc-blue);
  background: var(--zc-blue-soft);
  box-shadow: inset 0 0 0 1px var(--zc-blue);
}

.zc-picker-body { min-width: 0; flex: 1; }

.zc-picker-name { display: block; font-weight: 500; }

.zc-picker-note {
  display: block;
  margin-top: 2px;
  color: var(--zc-slate);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.zc-picker-extra {
  flex: none;
  color: var(--zc-slate);
  font-family: var(--zc-mono);
  font-size: 0.8125rem;
}

/* ========================================================================= *
   Szín- és anyagminta

   A SZÍNNÉL MINDIG A NÉV a felirat, a minta csak mellette áll: színtévesztéssel
   élőnek önmagában semmit nem mondana, a „Fehér" pedig fehér lapon egyáltalán
   nem látszana — ezért van kerete.

   AZ ANYAGNÁL nincs használható fényképünk mind a tizenháromhoz, fél panelnyi
   fotó pedig következetlen lenne. Helyette mindegyik ugyanolyan méretű,
   CSS-ből rajzolt felületmintát kap, és az a lényeget mutatja: sima, matt,
   gumis, töltött, szálerősített vagy gyanta.
 * ========================================================================= */

/* CSAK A PARAMÉTER-OLDAL VÁLASZTÓIBAN ÉRVÉNYES.

   A "zc-swatch" nevet a színskála (/colors) is használja, de OTT MÁST JELENT:
   ott a felsorolás SORA a "zc-swatch" (minta + név + hex egymás mellett), nem
   maga a pötty. Osztálynév nélküli határolással ez a kerek, 1.75rem-es minta
   ráült a színskála soraira: a sorok 28 px-re zsugorodtak, a 40 px-es minta és
   a szövegek kilógtak belőlük, a nevek betűnként törtek és egymásra csúsztak.

   Ezért a szabály a két SAJÁT helyére van kötve: a választó nyitógombjára és a
   felugró panel soraira. Új helyen való használatához a szelektort bővíteni
   kell — ez szándékos fékezés, nem hiányosság. */
.zc-opt-trigger > .zc-swatch,
.zc-picker-item > .zc-swatch {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--zc-line);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
}

.zc-picker-item > .zc-swatch-lg { width: 2.25rem; height: 2.25rem; }

.zc-chip {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--zc-line);
  border-radius: 6px;
  background-color: #e6e9ef;
}

.zc-chip-lg { width: 2.25rem; height: 2.25rem; }

.zc-chip-smooth {
  background-image: linear-gradient(135deg, #ffffff 0%, #e6ecf5 55%, #c9d3e2 100%);
}

.zc-chip-matte { background-image: linear-gradient(135deg, #e4e7ec 0%, #cdd2da 100%); }

.zc-chip-rubber {
  background-image: radial-gradient(circle at 32% 30%, #8c939e 0%, #4b515a 70%, #363b42 100%);
}

/* Töltött anyag: apró szemcsék a matt alapon. */
.zc-chip-filled {
  background-color: #d9cebd;
  background-image: radial-gradient(rgb(90 74 51 / 45%) 1px, transparent 1px);
  background-size: 5px 5px;
}

/* Szálerősített: sűrű, átlós szálak. */
.zc-chip-fiber {
  background-color: #3c4149;
  background-image: repeating-linear-gradient(
    45deg,
    rgb(255 255 255 / 22%) 0 1px,
    transparent 1px 4px
  );
}

.zc-chip-resin { background-image: linear-gradient(135deg, #f4f8ff 0%, #c3d6f5 100%); }

/* A kosár ugyanezt a kis színkört használja a tétel anyagánál. */
.zc-color-pick {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
}

.zc-color-pick select { min-width: 0; }

.zc-color-dot {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--zc-line);
  border-radius: 50%;
}

/* ========================================================================= *
   Összegzés és kosárba tétel
 * ========================================================================= */

.zc-quote-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--zc-4);
  margin-top: var(--zc-5);
  padding-top: var(--zc-5);
  border-top: 1px solid var(--zc-line);
}

.zc-quote-total {
  display: flex;
  align-items: baseline;
  gap: var(--zc-3);
  margin: 0;
  margin-inline-end: auto;
}

.zc-quote-total span { color: var(--zc-slate); }
.zc-quote-total strong { font-size: 1.75rem; font-weight: 500; }

/* A három tájékoztató lap a végösszeg mellett. Visszafogott, kis gombok:
   olvasnivaló, nem művelet — a végösszeg marad a sor hangsúlyos eleme. Szűk
   kijelzőn a csoport a végösszeg ALÁ csúszik, nem szorítja össze. */
.zc-quote-guides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-2);
  margin: 0;
}

/* Csendesek, de KATTINTHATOK. A `zc-btn` teljes meretet kapjak (15 px betu,
   12/24 px belso terkoz), es meg egy also hatart: 44 px, ugyanaz, ami a lap
   tobbi gombjan all - kulonben erintessel nehez eltalalni oket. Szuk
   kijelzon a csoport tobb sorba torik, lasd a mediaszabalyt. */
.zc-quote-guides .zc-btn { min-height: 44px; }

.zc-quote-next {
  flex: 1 0 100%;
  margin: 0;
  padding: var(--zc-4);
  border: 1px dashed var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-slate);
  font-size: 0.9375rem;
}

/* ========================================================================= *
   Szűkebb kijelzők

   A rács három → kettő → egy oszlopra vált, a felső sáv pedig előbb kettő,
   majd egy hasábra. Vízszintes görgetés sehol nem keletkezik: minden rácselem
   `minmax(0, 1fr)`, tehát a tartalom zsugorodik, nem tolja szét a sort.
 * ========================================================================= */

@media (max-width: 1100px) {
  .zc-quote-top { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
  .zc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .zc-quote { padding: var(--zc-4); }

  /* A kép fölé, alá pedig ugyanabban a sorrendben: adatok, ár, darabszám,
     műveletek. A gombok teljes szélességűek — hüvelykujjal is eltalálhatók. */
  .zc-quote-top { grid-template-columns: minmax(0, 1fr); }

  .zc-quote-viewer { max-width: 320px; margin-inline: auto; }
  .zc-quote-actions .zc-qty { flex: 1 0 100%; }
  .zc-quote-go { flex: 1 0 100%; }
  .zc-quote-go .zc-btn { flex: 1 0 100%; }

  .zc-opts { grid-template-columns: minmax(0, 1fr); }
  .zc-quote-footer { justify-content: stretch; }
  .zc-quote-total { flex: 1 0 100%; }
  .zc-quote-guides { flex: 1 0 100%; }
  .zc-quote-guides .zc-btn { flex: 1 1 auto; }
  .zc-quote-footer > .zc-btn { flex: 1; }
  .zc-picker-head { padding: var(--zc-3) var(--zc-4); }
  .zc-picker-list { padding: var(--zc-3) var(--zc-4) var(--zc-4); }
}

/* ==========================================================================
   Kosár

   KÉT HASÁB. Balra a tételek, jobbra egy ragadó összesítő panel. A kártyán az
   dől el, MI készüljön és hány darab; a panelen az, hogy MENNYIBE kerül és
   hogyan megy tovább. Tíz tétel végignézése közben is látszódjon az összeg.

   A LAP EGYBEN GÖRDÜL — a tétellista nem kap saját belső görgetősávot.
   ========================================================================== */

.zc-cart-head { margin-bottom: var(--zc-5); }
.zc-cart-head h1 { margin: 0 0 var(--zc-2); }
.zc-cart-lede { margin: 0; color: var(--zc-slate); }

.zc-cart-warning {
  margin: 0 0 var(--zc-5);
  padding: var(--zc-4);
  border: 1px solid var(--zc-danger);
  border-radius: var(--zc-radius);
  color: var(--zc-danger);
}

/* --- A két hasáb --------------------------------------------------------- */

.zc-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--zc-6);
  /* A `start` nélkül a jobb hasáb végigérne a sor magasságában, és a ragadás
     nem találna helyet, ahol megállhat. */
  align-items: start;
}

/* --- Tétellista ----------------------------------------------------------- */

.zc-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zc-4);
  min-width: 0;
}

.zc-cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(150px, 172px);
  gap: var(--zc-4) var(--zc-5);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
}

/* Amivel tennivaló van: a keret jelzi, de a sor nem tűnik el. A szín MELLETT
   ott a magyarázó mondat is — a keret önmagában nem mondaná meg, mi a baj. */
.zc-cart-item-problem { border-color: var(--zc-danger); }

.zc-cart-thumb {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  overflow: hidden;
}

.zc-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

.zc-cart-info {
  min-width: 0;
  display: grid;
  gap: var(--zc-2);
  align-content: start;
}

/* A fájlnév bármilyen hosszú lehet, és nincs benne feltétlenül szóköz —
   törés nélkül szétfeszítené a kártyát. */
.zc-cart-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.zc-cart-tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zc-2) var(--zc-3);
  margin: 0;
  font-size: 14px;
}

/* A technológia neve címkeként: egy pillantással megkülönbözteti az FDM és az
   SLA tételeket, anélkül hogy egy újabb sort kérne. */
.zc-cart-tag {
  padding: 2px var(--zc-2);
  border-radius: 999px;
  background: var(--zc-blue-soft);
  color: var(--zc-blue-deep);
  font-size: 12px;
  font-weight: 500;
}

.zc-cart-material { display: inline-flex; align-items: center; gap: var(--zc-2); }

/* A beállítások apró jelölőkként, nem táblázatban: a kártyán a gyors átfutás
   számít. A `dl` szerkezete megmarad, tehát a felolvasó továbbra is látja,
   melyik érték melyik címkéhez tartozik. */
.zc-cart-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-1) var(--zc-2);
  margin: 0;
}

.zc-cart-spec {
  display: flex;
  gap: var(--zc-1);
  padding: 1px var(--zc-2);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-slate);
  font-size: 12.5px;
}

.zc-cart-spec dt::after { content: ':'; }
.zc-cart-spec dd { margin: 0; color: var(--zc-ink); }

.zc-cart-problem {
  margin: var(--zc-1) 0 0;
  padding: var(--zc-3);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-danger);
  font-size: 14px;
}

.zc-cart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zc-2) var(--zc-4);
  margin-top: var(--zc-1);
  font-size: 14px;
}

/* A kártya két művelete közül a „Módosítás" az elsődleges: ezért kap nagyobb
   súlyt. A törlés alatta csendes marad. */
.zc-cart-edit { font-weight: 500; }

/* A „Módosítás" HELYÉN álló mondat — a korábban méretezett tételeknél. Nem
   hibaüzenet, ezért nem piros: egyszerűen elmondja, miért nincs ott a
   hivatkozás. A törlés mellette változatlanul működik. */
.zc-cart-locked {
  color: var(--zc-slate);
  font-size: 13px;
}

/* TÖRLÉS: könnyen eltalálható, de MÁSODLAGOS művelet. Nincs kerete és nincs
   saját színe — csak rámutatáskor vált pirosra, akkor viszont egyértelműen.
   Így nem versenyez a „Módosítás"-sal, és végképp nem a pénztár gombjával. */
.zc-cart-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--zc-1);
  padding: var(--zc-1) 0;
  border: 0;
  border-radius: var(--zc-radius);
  background: none;
  color: var(--zc-slate);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.zc-cart-remove:hover { color: var(--zc-danger); }

.zc-cart-remove:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 2px;
}

.zc-cart-remove-icon { flex: 0 0 auto; width: 15px; height: 15px; }

/* --- Ár és darabszám a kártyán ------------------------------------------- */

.zc-cart-money {
  display: grid;
  gap: var(--zc-3);
  align-content: start;
  justify-items: end;
  text-align: right;
}

.zc-cart-unit { margin: 0; color: var(--zc-slate); font-size: 13px; }

/* A vezérlő maga a feltöltési lapról jön (`zc-qty-row`), hogy a két lapon
   ugyanaz a mozdulat működjön. A korlát is ugyanaz: 1–99. */
.zc-cart-qty { display: grid; justify-items: end; gap: var(--zc-1); }

.zc-cart-qty .zc-qty-label { font-size: 12px; }

/* Szkript nélkül EZ a gomb küldi be az űrlapot; a szkript elrejti, mert ott a
   mező elhagyása magától beküld. */
.zc-cart-qty-submit {
  margin-top: var(--zc-1);
  padding: var(--zc-2) var(--zc-3);
  font-size: 14px;
}

.zc-cart-line-total { display: grid; gap: 2px; margin: 0; }

.zc-cart-line-total span { color: var(--zc-slate); font-size: 12px; }

.zc-cart-line-total strong {
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.zc-cart-weight { margin: 0; color: var(--zc-slate); font-size: 12px; }

/* --- Rendelési összesítő -------------------------------------------------
   A panel GÖRGETÉS KÖZBEN A HELYÉN MARAD. A `top` a lap tetejétől méri — a
   fejléc nem ragad, tehát a panel nem kerülhet fölé; a lábléc pedig a rács
   alatt van, azt sem takarhatja el.

   ALACSONY ABLAKNÁL A RAGADÁS KIKAPCSOL. Ott többet ér, ha a panel
   végiggörgethető, mint ha az alja — a gombokkal együtt — levágva maradna.
   Ugyanez a határ, mint a pénztár összesítőjénél.                          */

.zc-cart-aside {
  position: sticky;
  top: var(--zc-5);
  min-width: 0;
}

@media (max-height: 760px) {
  .zc-cart-aside { position: static; }
}

.zc-cart-summary h2 { margin: 0 0 var(--zc-4); font-size: 17px; }

.zc-cart-summary .zc-summary-row { margin: 0 0 var(--zc-2); }

/* Az első sor a címsor alatt áll: ott a keret helyett a térköz választ el. */
.zc-cart-totals > .zc-summary-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.zc-cart-totals .zc-summary-row > span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Az összeg felirata két sorban: a szám mellé kell a megszorítás, de az nem
   nőhet akkorára, mint maga az "Összesen". */
.zc-cart-total-label small {
  display: block;
  color: var(--zc-slate);
  font-size: 12px;
  font-weight: 400;
}

.zc-summary-note {
  margin: var(--zc-3) 0 0;
  color: var(--zc-slate);
  font-size: 13px;
}

/* Hibás tétel esetén a pénztár gombja HELYÉN áll — nem mellette. Egy letiltott
   gomb csak annyit mondana, hogy „nem lehet"; ez megmondja, mit kell tenni. */
.zc-summary-blocked {
  margin: var(--zc-4) 0 0;
  padding: var(--zc-3);
  border: 1px solid var(--zc-danger);
  border-radius: var(--zc-radius);
  color: var(--zc-danger);
  font-size: 14px;
}

/* A másodlagos művelet ugyanolyan széles, de csendes: fehér alapon keret. */
.zc-summary-secondary {
  width: 100%;
  margin-top: var(--zc-2);
  background: var(--zc-surface);
}

.zc-summary-clear {
  margin-top: var(--zc-4);
  text-align: center;
  font-size: 14px;
}

/* AMÍG EGY DARABSZÁM- VAGY TÖRLÉSMŰVELET ÚTON VAN. A számok a helyükön
   maradnak (nincs ugráló elrendezés), de halványan — és a pénztár gombja nem
   járható: elavult összeggel nem szabad továbblépni. A szkript ugyanezt
   `aria-disabled`-del is kimondja, a mutatóval nem dolgozó látogatóknak. */
[data-cart-busy] .zc-cart-totals { opacity: 0.55; }

[data-cart-busy] [data-cart-checkout] {
  pointer-events: none;
  opacity: 0.55;
}

/* --- Közös apróságok ------------------------------------------------------ */

/* Egy gombot tartalmazó űrlap, ami linkként viselkedik. A POST azért kell,
   mert a művelet állapotot változtat — de a látogatónak ez egy link. */
.zc-inline-form { display: inline; margin: 0; }

.zc-link-quiet {
  border: 0;
  padding: 0;
  background: none;
  color: var(--zc-slate);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.zc-link-quiet:hover { color: var(--zc-ink); }

/* --- Üres kosár ----------------------------------------------------------- */

.zc-cart-empty {
  max-width: 34rem;
  margin: var(--zc-7) auto;
  padding: var(--zc-7) var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
  text-align: center;
}

.zc-cart-empty h1 { margin: 0 0 var(--zc-3); font-size: 1.5rem; }

.zc-cart-empty-text {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--zc-slate);
}

.zc-cart-empty-actions { margin: var(--zc-6) 0 0; }

/* --- Keskenyebb ablak ----------------------------------------------------- */

/* EGY HASÁB: az összesítő a lista ALÁ kerül, és nem ragad. Egy hasábban a
   ragadás azt jelentené, hogy a panel végig a képernyőn ül, és elveszi a
   helyet éppen attól, amit nézni kell. */
@media (max-width: 1100px) {
  .zc-cart-layout { grid-template-columns: minmax(0, 1fr); }
  .zc-cart-aside { position: static; }
  .zc-cart-summary { max-width: 34rem; }
}

/* MOBIL: a kép és az adatok egymás mellett maradnak, az ár és a darabszám
   viszont teljes szélességű sávba kerül a kártya alján. A sorrend ott is
   ugyanaz marad: egységár, darabszám, tétel összege. */
@media (max-width: 720px) {
  .zc-cart-item {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--zc-3) var(--zc-4);
    padding: var(--zc-4) var(--zc-3);
  }

  .zc-cart-money {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--zc-2) var(--zc-4);
    text-align: left;
    padding-top: var(--zc-3);
    border-top: 1px solid var(--zc-line);
  }

  .zc-cart-unit { order: 0; flex: 1 0 100%; }
  .zc-cart-qty { order: 1; justify-items: start; }
  .zc-cart-line-total { order: 2; text-align: right; }
  .zc-cart-weight { order: 3; flex: 1 0 100%; }
}

/* A legkeskenyebb ablakban a kép a szöveg FÖLÉ kerül: 76 px mellett már nem
   marad elég hely egy fájlnévnek. */
@media (max-width: 480px) {
  .zc-cart-item { grid-template-columns: minmax(0, 1fr); }
  .zc-cart-thumb { max-width: 132px; }
}

/* ==========================================================================
   Színskála (/colors)
   ========================================================================== */

.zc-palette-head {
  max-width: 68ch;
  margin-bottom: var(--zc-7);
}

.zc-palette-count {
  margin: var(--zc-4) 0 0;
  color: var(--zc-slate);
}

/* A mintak elott allo figyelmeztetes. Keretes, mert NEM folyoszoveg: egy
   fenntartas, amit a mintak nezese KOZBEN kell eszben tartani.            */
.zc-palette-caveat {
  margin: var(--zc-4) 0 0;
  padding: var(--zc-3) var(--zc-4);
  border-left: 3px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  font-size: 0.9375rem;
  color: var(--zc-slate);
}

.zc-palette-empty {
  max-width: 60ch;
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  color: var(--zc-slate);
}

.zc-palette-tech { margin-bottom: var(--zc-8); }

.zc-palette-tech > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zc-3);
  margin: 0 0 var(--zc-2);
  padding-bottom: var(--zc-3);
  border-bottom: 2px solid var(--zc-ink);
}

.zc-palette-tech-full {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--zc-slate);
}

.zc-palette-tech-note {
  margin: 0 0 var(--zc-6);
  max-width: 60ch;
  color: var(--zc-slate);
}

/* A kártyát KERET választja el a laptól, nem kitöltés — fehér alapon a
   kitöltés láthatatlan lenne. */
.zc-palette-material {
  padding: var(--zc-5);
  margin-bottom: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
}

.zc-palette-material > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zc-3);
  margin: 0 0 var(--zc-5);
  font-size: 1.0625rem;
}

.zc-palette-material-count {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--zc-slate);
}

.zc-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: var(--zc-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-swatch {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  min-width: 0;
}

/* A keret NEM dísz: fehér és világos színeknél ez az egyetlen, ami
   megmutatja, hol van a minta széle a fehér lapon. */
.zc-swatch-chip {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 4%);
}

/* A szin NEVE all a minta mellett, hexakod nelkul. Ez az egyetlen szoveg a
   soron, ezert nem kell hozza burkolo: kozvetlenul a `zc-swatch` flex
   elrendezesenek a masodik eleme.                                          */
.zc-swatch-name {
  min-width: 0;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.zc-palette-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--zc-5);
  margin: var(--zc-8) 0 var(--zc-7);
  padding: var(--zc-6);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

.zc-palette-note > h3 {
  margin: 0 0 var(--zc-2);
  font-size: 1rem;
}

.zc-palette-note > p {
  margin: 0;
  color: var(--zc-slate);
}

@media (max-width: 520px) {
  .zc-swatches { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .zc-palette-material { padding: var(--zc-4); }
  .zc-palette-notes { padding: var(--zc-5); }
}

/* --- Fiók és űrlapok -----------------------------------------------------
   A belépés, a regisztráció, a jelszókezelés és a fiók lapja. Ezek az első
   valódi ADATBEVITELI űrlapok a v2-ben: a paraméter-oldal vezérlői (select,
   number) saját, szűkebb stílust kaptak, mert ott gépi értékek állnak. Itt
   szöveget ír az ember, ezért más a mérték és a betű.                      */

/* Egy űrlap nem lehet 1200px széles: a hosszú sor olvashatatlan, és a mezők
   szétesnek a lapon. Az érték nem önkényes — nagyjából 60 karakternyi sor. */
.zc-narrow {
  max-width: 34rem;
}

.zc-auth h1,
.zc-account-head h1 {
  margin: 0 0 var(--zc-2);
}

.zc-auth .zc-lede,
.zc-account-head .zc-lede {
  margin: 0 0 var(--zc-6);
}

/* --- Mezők --- */

.zc-form {
  display: flex;
  flex-direction: column;
  gap: var(--zc-5);
  margin: 0;
}

.zc-field {
  display: flex;
  flex-direction: column;
  gap: var(--zc-2);
  min-width: 0;
}

.zc-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--zc-ink);
}

.zc-field input {
  width: 100%;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 16px;
}

/* A 16px nem esztétika: ennél kisebb betűnél az iOS Safari ránagyít a mezőre,
   amikor belekattintasz, és utána a lap elcsúszva marad.                    */

.zc-field input:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
  border-color: var(--zc-blue);
}

/* A böngésző saját érvényesítése CSAK azután jelezzen, hogy a látogató
   tényleg megpróbálta kitölteni — a `:user-invalid` ebben különbözik az
   `:invalid`-tól, ami már az üres, még meg sem érintett mezőt is pirosra
   festené.                                                                  */
.zc-field input:user-invalid {
  border-color: var(--zc-danger);
}

.zc-field-note {
  margin: 0;
  font-size: 13px;
  color: var(--zc-slate);
}

.zc-field-row {
  display: flex;
  gap: var(--zc-4);
  align-items: flex-start;
}

.zc-field-row > .zc-field {
  flex: 1 1 auto;
}

/* Az irányítószám négy karakter — ne foglaljon fél sort. */
.zc-field-narrow {
  flex: 0 0 8rem;
}

.zc-form-submit {
  align-self: flex-start;
}

.zc-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
  margin: 0;
}

/* --- Visszajelzés --- */

/* Keret és háttér, nem csak színes betű: a színvakok számára a piros betű
   önmagában nem jelzés, és a keret akkor is látszik, ha a lapot kinyomtatják. */
.zc-form-error,
.zc-form-notice {
  margin: 0 0 var(--zc-5);
  padding: var(--zc-3) var(--zc-4);
  border-radius: var(--zc-radius);
  border: 1px solid;
  font-size: 14.5px;
}

.zc-form-error {
  border-color: var(--zc-danger);
  background: #fdf2f1;
  color: var(--zc-danger);
}

.zc-form-notice {
  border-color: var(--zc-success);
  background: #f0f8f2;
  color: var(--zc-success);
}

/* A pénztár megerősítő lépése. Se nem hiba, se nem siker: egy lépés, amiben
   a vásárló a fizetendő összeget nézi meg — ezért az arculati kék, nem a
   piros és nem a zöld.                                                      */
.zc-form-confirm {
  margin: 0 0 var(--zc-3);
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-blue-soft);
  color: var(--zc-ink);
  font-size: 14.5px;
}

.zc-form-confirm:focus { outline: none; }

/* A hibaüzenet fókuszálható (tabindex="-1"), de ne kapjon fókuszkeretet
   attól, hogy rákattintanak — csak a billentyűzetes ugrás jelezzen.        */
.zc-form-error:focus {
  outline: none;
}

.zc-form-error:focus-visible {
  outline: 2px solid var(--zc-danger);
  outline-offset: 2px;
}

/* --- Kiegészítő linkek --- */

.zc-auth-links {
  margin: var(--zc-5) 0 0;
  font-size: 14.5px;
  color: var(--zc-slate);
}

.zc-auth-links a {
  color: var(--zc-blue);
}

.zc-auth-links span {
  margin: 0 var(--zc-2);
  color: var(--zc-line);
}

/* --- A fiók lapja --- */

.zc-account-head {
  padding-bottom: var(--zc-6);
  border-bottom: 1px solid var(--zc-line);
}

/* --- A fiók két gyorsgombja: „A kosarad" és „Kilépés" --------------------

   MIÉRT GOMB, ÉS NEM LINKSOR. Ez a két dolog az, amiért a legtöbben a fiók
   lapjára lépnek. Két apró, ponttal elválasztott hivatkozásként ujjal alig
   lehetett eltalálni őket; itt 44 px magas célterületet és olvasható
   betűméretet kapnak. A HTML-ben `<a>` maradnak — mindkettő navigáció.

   NEM MOZDÍTJÁK EL A SZOMSZÉDJUKAT. A kiemelkedés `transform`, ami nem
   számít bele az elrendezésbe, a keret vastagsága pedig ráfutáskor sem
   változik. Így a gomb mellett álló szöveg és a fülsor a helyén marad.     */

.zc-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
  margin: var(--zc-5) 0 0;
}

.zc-account-action {
  display: inline-flex;
  align-items: center;
  gap: var(--zc-2);

  /* Nagyobb, mint a `.zc-btn` alapmérete (15px / --zc-3 --zc-5): ez a két
     gomb a lap fő kijárata, nem egy űrlap mellékgombja. */
  min-height: 44px;
  padding: var(--zc-3) var(--zc-5);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;

  color: var(--zc-ink);
  background: var(--zc-surface);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  text-decoration: none;

  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.zc-account-action:hover {
  color: var(--zc-blue-deep);
  background: var(--zc-blue-soft);
  border-color: var(--zc-blue);
  box-shadow: 0 2px 10px rgba(66, 133, 244, 0.18);
  transform: translateY(-2px);
}

/* A LENYOMÁS VISSZAVESZI A KIEMELKEDÉST — így a kattintásnak súlya van. */
.zc-account-action:active {
  transform: translateY(0);
  box-shadow: none;
}

/* BILLENTYŰZETTEL UGYANAZ A JELZÉS, PLUSZ EGY KERET. A `:focus-visible`
   csak akkor gyújt, ha tényleg billentyűzettel érkeztünk — egérkattintás
   után nem marad ott a keret. */
.zc-account-action:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 2px;
  color: var(--zc-blue-deep);
  background: var(--zc-blue-soft);
  border-color: var(--zc-blue);
}

.zc-account-action-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform 0.18s ease;
}

/* A kosár ikonja előre gördül, a kilépésé kifelé mutat — a mozgás iránya
   ugyanazt mondja, mint a felirat. */
.zc-account-action:hover .zc-account-action-icon,
.zc-account-action:focus-visible .zc-account-action-icon {
  transform: translateX(2px);
}

/* MOZGÁSCSÖKKENTÉSNÉL CSAK A SZÍN VÁLTOZIK. A visszajelzés megmarad (más
   háttér, más keret, más betűszín), csak nem mozdul semmi — a globális
   szabály a `transition-duration`-t veszi el, a `transform`-ot itt kell. */
@media (prefers-reduced-motion: reduce) {
  .zc-account-action,
  .zc-account-action:hover,
  .zc-account-action:active,
  .zc-account-action:focus-visible {
    transform: none;
  }

  .zc-account-action:hover .zc-account-action-icon,
  .zc-account-action:focus-visible .zc-account-action-icon {
    transform: none;
  }
}

/* Fehér lapon a blokkokat keret választja el, nem kitöltés — ez a projekt
   arculati döntése, ugyanaz, mint a kártyáknál.                             */
.zc-account-block {
  margin-top: var(--zc-6);
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
}

.zc-account-block h2 {
  margin: 0 0 var(--zc-2);
  font-size: 19px;
}

.zc-account-block .zc-field-note:first-of-type {
  margin-bottom: var(--zc-5);
}

.zc-empty-note {
  margin: 0;
  color: var(--zc-slate);
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .zc-field-row {
    flex-direction: column;
    gap: var(--zc-5);
  }

  .zc-field-narrow {
    flex: 1 1 auto;
    width: 100%;
  }

  .zc-form-submit {
    align-self: stretch;
  }
}

/* --- Pénztár -------------------------------------------------------------
   Két hasáb: balra az űrlap, jobbra az összesítés. Az összesítés „ragad", mert
   egy hosszú űrlap közepén is látni kell, mit rendelünk — de csak elég magas
   ablaknál, különben elfedné a mezőket.                                     */

.zc-checkout {
  max-width: 1160px;
}

.zc-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--zc-6);
  align-items: start;
}

.zc-checkout-main {
  min-width: 0;
}

/* A PANEL ALJA AKKOR IS ELÉRHETŐ, HA A TARTALMA MEGNŐTT.

   Az összesítő a választásokat is felsorolja, tehát magasabb lett. Egy ragadó
   panel, ami magasabb az ablaknál, elvágja a saját alját: a „Megrendelem" gomb
   és az ÁSZF-elfogadás a képernyőn kívülre kerül, és nem lehet odagörgetni,
   mert a panel a helyén marad. A saját görgetése ezt oldja meg. */
.zc-checkout-side {
  position: sticky;
  top: var(--zc-5);
  max-height: calc(100vh - var(--zc-5) * 2);
  overflow-y: auto;
}

/* Alacsony ablaknál ne ragadjon: ott többet ér, ha a lappal együtt görög —
   és akkor a magasságkorlát is tárgytalan. */
@media (max-height: 760px) {
  .zc-checkout-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.zc-summary {
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

.zc-summary h2 {
  margin: 0 0 var(--zc-4);
  font-size: 17px;
}

.zc-summary-lines {
  list-style: none;
  margin: 0 0 var(--zc-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--zc-3);
}

.zc-summary-line {
  display: flex;
  align-items: flex-start;
  gap: var(--zc-3);
  font-size: 14px;
}

.zc-summary-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
}

.zc-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A fájlnév bármilyen hosszú lehet, és nincs benne feltétlenül szóköz —
   törés nélkül szétfeszítené a hasábot.                                     */
.zc-summary-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.zc-summary-meta {
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-summary-problem {
  color: var(--zc-danger);
  font-size: 13px;
}

.zc-summary-price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.zc-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--zc-3);
  margin: 0 0 var(--zc-2);
  padding-top: var(--zc-2);
  border-top: 1px solid var(--zc-line);
  font-size: 14px;
}

.zc-summary-muted { color: var(--zc-slate); }

.zc-summary-total {
  margin-top: var(--zc-3);
  font-size: 17px;
  font-weight: 600;
}

/* AMÍG A FRISSÍTETT ÖSSZEG MEGÉRKEZIK. A régi szám marad a helyén (nincs
   ugráló elrendezés), de halványan — és a rejtett mező addigra már üres,
   tehát ezzel az állapottal nem lehet észrevétlenül véglegesíteni.          */
[data-total-loading] { opacity: 0.55; }

.zc-summary-submit {
  width: 100%;
  margin-top: var(--zc-4);
}

/* --- Választólisták (átvétel, fizetés, számlázás) --- */

.zc-pick-list {
  list-style: none;
  margin: 0 0 var(--zc-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--zc-2);
}

.zc-pick-option > label {
  display: flex;
  align-items: flex-start;
  gap: var(--zc-3);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  cursor: pointer;
}

/* A RÁDIÓGOMB MARAD, AMI: natív vezérlő, arculati színnel.

   Egy elrejtett rádió és egy rajzolt pötty szebb lehetne, de cserébe a
   billentyűzetes fókusz, a nagykontrasztos mód és a felolvasók viselkedése
   mind a mi dolgunk lenne. Az `accent-color` ugyanazt a kéket adja, ingyen. */
.zc-pick-option > label > input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--zc-blue);
}

.zc-pick-option > label:hover { border-color: var(--zc-blue); }

/* A KIVÁLASZTOTT KÁRTYA HÁROM JELET KAP: keret, halvány kitöltés és egy
   második, belső keretvonal. Egyik sem a szín magában — a `box-shadow` a
   vastagságot adja hozzá anélkül, hogy a kártya elmozdulna. */
.zc-pick-option > label:has(input:checked) {
  border-color: var(--zc-blue);
  background: var(--zc-blue-soft);
  box-shadow: inset 0 0 0 1px var(--zc-blue);
}

.zc-pick-option > label:has(input:focus-visible) {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
}

.zc-pick-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zc-pick-title {
  display: flex;
  align-items: baseline;
  gap: var(--zc-2);
  flex-wrap: wrap;
  font-weight: 500;
}

.zc-pick-price {
  font-variant-numeric: tabular-nums;
  color: var(--zc-slate);
  font-weight: 400;
  font-size: 14px;
}

.zc-pick-desc {
  color: var(--zc-slate);
  font-size: 13.5px;
  line-height: 1.45;
}

/* --- Átvevőpont és számlázás --- */

/* AZ ÁTVEVŐPONT-VÁLASZTÓ UGYANOLYAN „a választásod nyitotta meg" panel,
   mint a szállítási cím vagy a számlázási cím: `zc-cond` megjelenés.

   A `:not([hidden])` nem óvatoskodás. A választót a szkript a `hidden`
   attribútummal rejti el; egy feltétel nélküli `display: flex` ERŐSEBB, mint
   a böngésző `[hidden] { display: none }` szabálya, tehát a panel rejtve is
   látszana. */
.zc-pickup:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-pickup h3 {
  margin: 0;
  font-size: 15px;
}

/* A VÁLASZTOTT PONT a panel legfontosabb sora: ez a válasz arra, hogy hova
   megy a csomag. Ezért kiemelt, nem egy halvány lábjegyzet. */
.zc-pv-chosen:not([hidden]) {
  display: block;
  margin: 0;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-blue-soft);
  color: var(--zc-ink);
  font-size: 14px;
  font-weight: 500;
}

/* --- Jelölőnégyzet --- */

.zc-check {
  display: flex;
  align-items: flex-start;
  gap: var(--zc-3);
  margin-top: var(--zc-4);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.zc-check input {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 18px;
  height: 18px;
}

.zc-check a { color: var(--zc-blue); }

.zc-optional {
  font-weight: 400;
  color: var(--zc-slate);
}

/* --- Mezőhöz tartozó hiba ---
   A hibaüzenet a MEZŐ MELLETT áll, nem csak a lap tetején: egy húsz mezős
   űrlapnál a „hibás adat" felirat önmagában használhatatlan.                */

.zc-field-error {
  margin: 0;
  font-size: 13px;
  color: var(--zc-danger);
  font-weight: 500;
}

.zc-field textarea {
  width: 100%;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}

.zc-field textarea:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
  border-color: var(--zc-blue);
}

/* --- Próbamód jelzése ---
   Feltűnőnek KELL lennie: aki ezt látja, nem valódi fizetést végez.         */

.zc-test-badge {
  display: inline-block;
  margin: 0 0 var(--zc-4);
  padding: var(--zc-2) var(--zc-4);
  border: 1px solid var(--zc-danger);
  border-radius: 999px;
  color: var(--zc-danger);
  font-size: 13px;
  font-weight: 600;
}

/* --- A fiók lapja: fülek és rendeléstörténet ------------------------------
   HÁROM FÜL, EGY LAP. Korábban a rendelések, a szállítási adatok és a
   jelszócsere egymás alatt állt: a jelszómezőkig három képernyőnyit kellett
   görgetni. A fülek közönséges hivatkozások (lásd `account.ejs`), tehát a
   megjelenés nem vállalhat olyasmit, ami szkript nélkül nem működik.

   A KÁRTYÁKAT ITT IS KERET VÁLASZTJA EL, nem kitöltés — ugyanaz az arculati
   döntés, mint a kosárnál és a pénztárnál. A lenyitott rész az EGYETLEN
   kivétel: ott a halvány háttér mondja meg, meddig tart a rendelés.          */

.zc-account {
  /* Nem a teljes 1200px: a kártyák olvashatók maradnak, a lenyitott rész
     viszont elfér két hasábban. */
  max-width: 1040px;
}

/* --- A visszafordíthatatlan művelet szakasza -----------------------------

   MIÉRT KERETES BLOKK. Mert a lapon minden más szakasz adatot MENT; ez az
   egy megszüntet. A piros keret és a saját cím nem díszítés: azt mondja
   meg, hogy ami itt van, az nem ugyanaz a fajta művelet, mint fölötte.
   A gomb SZÍNE is ezt mondja — de csak a gombé, nem a fél lapé.           */

.zc-danger-zone {
  margin-top: var(--zc-2);
  padding: var(--zc-5);
  border: 1px solid var(--zc-danger);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
}

.zc-danger-title {
  margin: 0 0 var(--zc-2);
  font-size: 19px;
  color: var(--zc-danger);
}

.zc-danger-lede {
  margin: 0 0 var(--zc-5);
  color: var(--zc-ink);
  line-height: 1.6;
}

/* A KÉT LISTA EGYMÁS MELLETT, hogy a „mi tűnik el" és a „mi marad" egyetlen
   pillantással összevethető legyen. Szűk kijelzőn egymás alá kerülnek. */
.zc-danger-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--zc-4);
  margin-bottom: var(--zc-5);
}

.zc-danger-list {
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-danger-list h4 {
  margin: 0 0 var(--zc-2);
  font-size: 15px;
}

.zc-danger-list ul {
  margin: 0;
  padding-left: var(--zc-5);
  color: var(--zc-slate);
  font-size: 14.5px;
  line-height: 1.6;
}

.zc-danger-list li + li { margin-top: var(--zc-1); }

.zc-danger-note {
  margin: 0 0 var(--zc-5);
  padding: var(--zc-4);
  border-left: 3px solid var(--zc-danger);
  background: var(--zc-tint);
  color: var(--zc-ink);
  font-size: 14.5px;
  line-height: 1.6;
}

.zc-danger-form {
  gap: var(--zc-4);
  margin-top: var(--zc-5);
}

/* A MEGSZAKÍTÁS UGYANOLYAN KÖNNYEN ELÉRHETŐ, mint a törlés — egy sorban
   állnak, és a „Mégsem" nem apróbetűs lábjegyzet valahol lejjebb.         */
.zc-danger-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zc-4);
  margin: 0;
}

.zc-btn-danger {
  background: var(--zc-danger);
  color: #fff;
  border-color: var(--zc-danger);
}

.zc-btn-danger:hover {
  background: #8f1e18;
  border-color: #8f1e18;
  color: #fff;
}

.zc-btn-danger:focus-visible {
  outline: 2px solid var(--zc-danger);
  outline-offset: 2px;
}

.zc-toggle-danger:has(input:checked) {
  border-color: var(--zc-danger);
  background: #fdf3f2;
  box-shadow: inset 0 0 0 1px var(--zc-danger);
}

.zc-toggle-danger:hover { border-color: var(--zc-danger); }

.zc-toggle-danger input { accent-color: var(--zc-danger); }

.zc-toggle-danger:has(input:focus-visible) { outline-color: var(--zc-danger); }

/* --- A fülsor --- */

.zc-account-tabs {
  display: flex;
  gap: var(--zc-1);
  margin: var(--zc-6) 0 var(--zc-5);
  border-bottom: 1px solid var(--zc-line);

  /* MOBILON GÖRGETHETŐ, NEM TÖRDELT. Három fül két sorba törve úgy nézne ki,
     mintha kettő fontosabb lenne, mint a harmadik. */
  overflow-x: auto;
  scrollbar-width: none;
}

.zc-account-tabs::-webkit-scrollbar { display: none; }

.zc-account-tab {
  flex: 0 0 auto;
  /* Érintési célterület: a 44 px nem esztétika, hanem az, amit ujjal el lehet
     találni. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--zc-3) var(--zc-4);
  border-bottom: 2px solid transparent;
  color: var(--zc-slate);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.zc-account-tab:hover { color: var(--zc-ink); }

/* A VISSZAFORDÍTHATATLAN MŰVELET FÜLE MÁS SZÍNŰ — de nem harsány: a szín a
   figyelmeztetés, nem a tiltás. A fül ugyanoda visz, mint a többi; csak azt
   mondja meg előre, hogy ott nem adatot módosítani lehet.                  */
.zc-account-tab-danger { color: var(--zc-danger); }
.zc-account-tab-danger:hover { color: var(--zc-danger); }

.zc-account-tab-danger[aria-current="page"] {
  color: var(--zc-danger);
  border-bottom-color: var(--zc-danger);
}

.zc-account-tab-danger:focus-visible { outline-color: var(--zc-danger); }

/* AZ AKTÍV FÜL NEM CSAK SZÍNNEL KÜLÖNBÖZIK: az alávonás akkor is megmutatja,
   melyik rész van nyitva, ha a látogató nem különbözteti meg a két szürkét. */
.zc-account-tab[aria-current="page"] {
  color: var(--zc-hd-blue);
  border-bottom-color: var(--zc-hd-blue);
}

.zc-account-tab:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: -2px;
  border-radius: var(--zc-radius) var(--zc-radius) 0 0;
}

/* A SZAKASZ CIME LATHATATLAN, DE OTT VAN.

   A fulsor mar kiirta a szakasz nevet, es kozvetlenul alatta ugyanaz a szo
   masodszor csak zaj. A dokumentum szerkezeteben viszont NEM felesleges: a
   felolvasok cimsorrol cimsorra is navigalnak, es a szakasznak kell egy
   sajat cime. Ezert marad a helyen, csak nem latszik.                       */
.zc-panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A két űrlapos fül keskenyebb marad: egy 1040 px széles beviteli sor
   olvashatatlan, és a mezők szétesnek a lapon. */
.zc-account-form { max-width: 34rem; }

.zc-account-panel > .zc-field-note:first-of-type {
  margin: 0 0 var(--zc-5);
  max-width: 44rem;
}

/* --- Keresés és szűrés --- */

.zc-hist-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--zc-4);
  margin: var(--zc-4) 0 var(--zc-5);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

.zc-hist-filter .zc-field { flex: 1 1 200px; }
.zc-hist-filter .zc-field-narrow { flex: 0 1 220px; }

.zc-hist-filter select {
  width: 100%;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 16px;
}

.zc-hist-filter select:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
  border-color: var(--zc-blue);
}

.zc-hist-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--zc-4);
  padding-bottom: 1px;
}

/* --- Üres előzmény --- */

.zc-hist-empty {
  margin: var(--zc-5) 0;
  padding: var(--zc-7) var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  text-align: center;
}

.zc-hist-empty-text {
  max-width: 30rem;
  margin: 0 auto var(--zc-5);
  color: var(--zc-slate);
  line-height: 1.55;
}

/* --- A rendeléskártya --- */

.zc-hist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
}

.zc-hist-card {
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  overflow: hidden;
}

/* A NYITOTT KÁRTYA KIEMELKEDIK a listából: így egy hosszú lenyitott rész
   mellett is látszik, hol kezdődött a rendelés. */
.zc-hist-card-open {
  border-color: #c9d6f0;
  box-shadow: var(--zc-shadow);
}

.zc-hist-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--zc-3) var(--zc-5);
  padding: var(--zc-5);
}

.zc-hist-who { min-width: 0; }

.zc-hist-number {
  margin: 0;
  font-family: var(--zc-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.zc-hist-date,
.zc-hist-source {
  margin: var(--zc-1) 0 0;
  color: var(--zc-slate);
  font-size: 13.5px;
}

.zc-hist-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-2);
  margin: 0;
}

.zc-hist-state,
.zc-hist-pay {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* A MŰHELY ÁLLAPOTAI. A gépi érték marad ékezet nélküli (adatbázis és
   osztálynév), a felirat magyar — ugyanaz az elv, mint a workflow.ts-ben. */
.zc-state-uj { background: var(--zc-blue-soft); color: var(--zc-hd-blue-deep); }
.zc-state-gyartasban { background: #fff4e0; color: #8a5a00; }
.zc-state-kesz { background: #e8f5ec; color: var(--zc-success); }
.zc-state-feladva { background: #e6f1ff; color: #1b4fa8; }
.zc-state-lezarva { background: var(--zc-tint); color: var(--zc-slate); }
.zc-state-torolve { background: #fdf2f1; color: var(--zc-danger); }
.zc-state-ismeretlen { background: var(--zc-tint); color: var(--zc-slate); }

/* A FIZETÉS KÜLÖN JELÖLÉS, ÉS HALKABB: a rendelés létrejötte nem fizetés, de
   a fizetési állapot sem nyomhatja el azt, hogy hol tart a gyártás. */
.zc-hist-pay {
  background: var(--zc-surface);
  border-color: var(--zc-line);
  color: var(--zc-slate);
  font-weight: 500;
}

.zc-pay-paid { background: #e8f5ec; border-color: #cfe8d8; color: var(--zc-success); }
.zc-pay-cancelled,
.zc-pay-failed { background: #fdf2f1; border-color: #f3d8d5; color: var(--zc-danger); }

.zc-hist-money { text-align: right; }

.zc-hist-volume {
  margin: 0 0 var(--zc-1);
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-hist-total {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- A nyitó vezérlő --- */

.zc-hist-toggle-row {
  margin: 0;
  border-top: 1px solid var(--zc-line);
}

.zc-hist-toggle {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  min-height: 44px;
  padding: var(--zc-3) var(--zc-5);
  color: var(--zc-blue);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}

.zc-hist-toggle:hover {
  background: var(--zc-tint);
  color: var(--zc-blue-deep);
}

.zc-hist-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.zc-hist-toggle[aria-expanded="true"] .zc-hist-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .zc-hist-chevron { transition: none; }
}

/* --- A lenyitott rész --- */

.zc-hist-detail {
  border-top: 1px solid var(--zc-line);
  background: var(--zc-tint);
}

.zc-hist-detail-inner {
  display: flex;
  flex-direction: column;
  gap: var(--zc-5);
  padding: var(--zc-5);
}

.zc-hist-heading,
.zc-hist-group h5 {
  margin: 0;
  color: var(--zc-slate);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zc-hist-group h5 { margin-bottom: var(--zc-2); }

.zc-hist-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--zc-3);
}

.zc-hist-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--zc-4);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
}

.zc-hist-thumb img,
.zc-hist-noimage {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--zc-radius);
  background: var(--zc-paper);
}

.zc-hist-thumb img {
  object-fit: contain;
  border: 1px solid var(--zc-line);
}

.zc-hist-noimage { border: 1px dashed var(--zc-line); }

.zc-hist-line-main { min-width: 0; }

.zc-hist-line-name {
  margin: 0 0 var(--zc-2);
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* UGYANAZ A JELÖLÉS, MINT A KOSÁRBAN (`zc-cart-spec`): a vásárló ugyanazokat
   a paramétereket látta a megrendeléskor, tehát ne kelljen újratanulnia. */
.zc-hist-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-1) var(--zc-2);
  margin: 0;
}

.zc-hist-spec {
  display: flex;
  gap: var(--zc-1);
  padding: 1px var(--zc-2);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-slate);
  font-size: 12.5px;
}

.zc-hist-spec dt::after { content: ':'; }
.zc-hist-spec dd { margin: 0; color: var(--zc-ink); }

.zc-hist-line-note {
  margin: var(--zc-2) 0 0;
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-hist-line-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zc-hist-unit,
.zc-hist-qty {
  margin: 0;
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-hist-line-total {
  margin: var(--zc-1) 0 0;
  font-weight: 600;
}

/* --- Adatcsoportok és összesítő --- */

.zc-hist-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--zc-4);
  align-items: start;
}

.zc-hist-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--zc-3);
}

.zc-hist-group,
.zc-hist-totals,
.zc-hist-action {
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
}

.zc-hist-group dl { margin: 0; }

/* HA NEM FER EL EGY SORBAN, AKKOR SEM TORIK SZET A SZO.

   A `flex-wrap` nelkul egy hosszu ertek ("FOXPOST csomagautomata") a sajat
   szukos hasabjaban betunkent tordelodne a cimke mellett. Igy viszont eloszor
   az ERTEK kerul sajat sorba - az olvashato marad, es a cimke sem esik szet. */
.zc-hist-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--zc-3);
  padding: 2px 0;
  font-size: 14px;
}

.zc-hist-row dt { color: var(--zc-slate); }

.zc-hist-row dd {
  margin: 0 0 0 auto;
  text-align: right;
  overflow-wrap: anywhere;
}

.zc-hist-comment {
  margin: 0;
  color: var(--zc-ink);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* --- Bizonylatok és csomagkövetés --- */

.zc-hist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-3);
}

.zc-hist-action { flex: 1 1 260px; }

.zc-hist-action-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.zc-hist-action-number {
  display: block;
  margin-top: 2px;
  color: var(--zc-slate);
  font-family: var(--zc-mono);
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.zc-hist-action-note {
  margin: var(--zc-2) 0 var(--zc-3);
  color: var(--zc-slate);
  font-size: 13px;
}

/* --- Lapozás --- */

.zc-hist-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zc-3);
  margin-top: var(--zc-5);
}

.zc-hist-pager-state {
  margin: var(--zc-4) 0 0;
  color: var(--zc-slate);
  font-size: 14px;
}

.zc-hist-pager .zc-hist-pager-state { margin: 0; }

/* --- Mobil ---
   A FEJ EGY HASÁBBA áll össze: a rendelésszám, az állapotok és az összeg
   egymás alá kerül, mert egy 360 px széles kijelzőn a háromhasábos fej az
   összeget kiszorítaná a képernyőről.                                       */

@media (max-width: 760px) {
  .zc-hist-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-3);
  }

  .zc-hist-money {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--zc-3);
    text-align: left;
  }

  .zc-hist-volume { margin: 0; }

  /* SZUKEBB KERET, TOBB HELY A TARTALOMNAK. Egy 375 px szeles kijelzon a
     ket 24 px-es belso margo azt jelentene, hogy a nyomtatasi parameterek
     soronkent egyesevel allnanak. */
  .zc-hist-detail-inner { padding: var(--zc-4); }

  .zc-hist-line {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--zc-3);
    padding: var(--zc-3);
  }

  /* A HARMADIK FUL IGY TOBBET MUTAT MAGABOL - es eppen az a fel szo az,
     ami elarulja, hogy a fulsor oldalra gorgetheto. */
  .zc-account-tabs { gap: 0; }
  .zc-account-tab { padding: var(--zc-3) var(--zc-2); }

  .zc-hist-thumb img,
  .zc-hist-noimage {
    width: 56px;
    height: 56px;
  }

  /* Az ár a kép ALÁ kerül, teljes szélességben — így a tétel neve és a
     paraméterek nem szorulnak két szóra soronként. */
  .zc-hist-line-money {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--zc-3);
    padding-top: var(--zc-2);
    border-top: 1px solid var(--zc-line);
    text-align: left;
  }

  .zc-hist-line-total { margin: 0; }

  .zc-hist-summary { grid-template-columns: minmax(0, 1fr); }

  .zc-hist-filter { gap: var(--zc-3); }

  .zc-hist-filter .zc-field,
  .zc-hist-filter .zc-field-narrow { flex: 1 1 100%; }

  .zc-hist-pager { justify-content: center; }
}

@media (max-width: 900px) {
  .zc-checkout-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* AZ ÖSSZESÍTŐ A SZAKASZOK UTÁN ÁLL, nem előttük.

     Korábban `order: -1` vitte a lap tetejére. Az összesítőben viszont ott a
     „Megrendelem" gomb és az ÁSZF-elfogadás — a lap tetejére emelve a vásárló
     azelőtt találkozott a beküldéssel, hogy egyetlen mezőt kitöltött volna.
     Az űrlap előbb kérdez, aztán jön az összeg és a gomb. */
  .zc-checkout-side {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .zc-step { padding: var(--zc-4); }
}

/* --- A pénztár lépései ---------------------------------------------------
   HÁROM KÁRTYA, SORSZÁMMAL. A pénztár nem egy hosszú űrlap, hanem három döntés
   egymás után: kinek szól a rendelés és a számla, hova megy a csomag, mivel
   fizet. A sorszám nem dísz — megmondja, hol tart a vásárló, és mennyi van
   hátra.                                                                    */

.zc-checkout-head {
  max-width: 62ch;
  margin-bottom: var(--zc-6);
}

.zc-checkout-head h1 { margin: 0 0 var(--zc-2); }
.zc-checkout-head .zc-lede { margin: 0; }

/* Az ajánlatos lap figyelmeztetése: a kosár NEM része ennek a rendelésnek. */
.zc-checkout-note {
  margin: var(--zc-4) 0 0;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-left: 3px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  font-size: 14px;
}

.zc-step {
  margin-top: var(--zc-5);
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
}

.zc-checkout-main > .zc-step:first-child { margin-top: 0; }

.zc-step-head {
  display: flex;
  align-items: flex-start;
  gap: var(--zc-3);
  margin-bottom: var(--zc-4);
}

.zc-step-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--zc-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* A megjegyzés nem lépés a sorban: nem kötelező, és a rendelés nem múlik
   rajta. Ezért kap csendes jelölőt a kék sorszám helyett. */
.zc-step-no-quiet {
  background: var(--zc-tint);
  border: 1px solid var(--zc-line);
  color: var(--zc-slate);
}

.zc-step-title { min-width: 0; }

.zc-step-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}

.zc-step-lede {
  margin: var(--zc-1) 0 0;
  color: var(--zc-slate);
  font-size: 13.5px;
  line-height: 1.5;
}

.zc-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
}

/* --- A feltételes blokkok ------------------------------------------------
   AMI A VÁLASZTÁSBÓL KÖVETKEZIK, AZ LÁTHATÓAN A VÁLASZTÁSHOZ TARTOZIK: halvány
   alapon, kerettel, a kártyák alatt. Aki csomagautomatát választ, annak nem
   egy újabb mezőerdő nyílik ki, hanem egy panel — és látja, mitől.

   A `:not([hidden])` kötelező: a szkript a `hidden` attribútummal rejt, és egy
   feltétel nélküli `display: flex` erősebb lenne a böngésző `[hidden]`
   szabályánál — a rejtett blokk látszana.                                   */

.zc-cond:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-cond-title {
  margin: 0;
  font-size: 15px;
}

.zc-cond-note {
  margin: 0;
  color: var(--zc-slate);
  font-size: 13.5px;
  line-height: 1.55;
}

.zc-cond-note b { color: var(--zc-ink); font-weight: 500; }

/* --- Jelölőnégyzetes választás (céges számla, eltérő cím) ----------------
   UGYANAZ A KÁRTYA, mint az átvételi és fizetési módoknál — mert ugyanaz a
   mozdulat: rákattintok, és ettől megváltozik, mit kérdezünk.               */

.zc-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--zc-3);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  cursor: pointer;
}

.zc-toggle input {
  flex: 0 0 auto;
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--zc-blue);
}

.zc-toggle:hover { border-color: var(--zc-blue); }

.zc-toggle:has(input:checked) {
  border-color: var(--zc-blue);
  background: var(--zc-blue-soft);
  box-shadow: inset 0 0 0 1px var(--zc-blue);
}

.zc-toggle:has(input:focus-visible) {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
}

.zc-toggle-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zc-toggle-title { font-weight: 500; font-size: 15px; }

.zc-toggle-desc {
  color: var(--zc-slate);
  font-size: 13.5px;
  line-height: 1.45;
}

/* --- Az összesítő apróságai --------------------------------------------- */

.zc-summary-amounts .zc-summary-row > span:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zc-summary-back {
  margin: var(--zc-3) 0 0;
  text-align: center;
  font-size: 14px;
}

.zc-summary-back a { color: var(--zc-blue); }

/* ==========================================================================
   Blog (/blogs, /blog?id=)
   A kártyát keret választja el, nem kitöltés — fehér lapon ez az arculati
   döntés. A kép a kártya teteje, alatta a szöveg, legalul a kategóriák.
   ========================================================================== */

.zc-blog-head {
  max-width: 68ch;
  margin-bottom: var(--zc-7);
}

.zc-blog-notice {
  max-width: 68ch;
  margin: 0 0 var(--zc-6);
  padding: var(--zc-4) var(--zc-5);
  border: 1px solid var(--zc-line);
  border-left: 3px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-ink);
}

.zc-blog-empty {
  max-width: 60ch;
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  color: var(--zc-slate);
}

/* --- A kártyarács ------------------------------------------------------- */

.zc-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--zc-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-blog-card {
  /* A cím linkje ezen a dobozon terül szét — lásd a ::after szabályt. */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zc-blog-card:hover {
  border-color: var(--zc-blue);
  box-shadow: var(--zc-shadow);
}

/* A link a kártyát fedi, tehát a fókuszjelzésnek is a kártyán kell látszania.
   Enélkül billentyűzettel nem lenne látható, hol áll a kurzor. */
.zc-blog-card:focus-within {
  outline: 2px solid var(--zc-blue-deep);
  outline-offset: 2px;
}

.zc-blog-card-img {
  display: block;
  width: 100%;
  height: auto;
  /* Rögzített arány: a képek magassága eltérő, enélkül a rács szétesne.
     A width/height attribútum a HTML-ben azért kell, hogy a böngésző a
     betöltés előtt is helyet foglaljon — így a lap nem ugrik meg. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--zc-tint);
  border-bottom: 1px solid var(--zc-line);
}

.zc-blog-card-body {
  flex: 1 1 auto;
  padding: var(--zc-5) var(--zc-5) var(--zc-3);
}

.zc-blog-card-title {
  margin: 0 0 var(--zc-3);
  font-size: 18px;
  line-height: 1.35;
}

.zc-blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.zc-blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.zc-blog-card:hover .zc-blog-card-title a { color: var(--zc-blue-deep); }

.zc-blog-card-summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--zc-slate);
  /* Három sor után elvágjuk: a kivonatok hossza nagyon eltérő, és enélkül
     egyetlen hosszú összefoglaló megnyújtaná az egész sort. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zc-blog-card-foot {
  padding: var(--zc-3) var(--zc-5) var(--zc-5);
}
.zc-blog-card-more {
  font-size: 13px;
  font-weight: 500;
  color: var(--zc-blue-deep);
  white-space: nowrap;
}

/* --- Egy bejegyzés ------------------------------------------------------ */

.zc-blog-back {
  margin: 0 0 var(--zc-5);
  font-size: 14px;
}

.zc-blog-back a {
  color: var(--zc-slate);
  text-decoration: none;
}

.zc-blog-back a:hover { color: var(--zc-blue-deep); }

.zc-blog-article { max-width: 70ch; }

.zc-blog-post-head { margin-bottom: var(--zc-5); }

.zc-blog-post-head h1 {
  margin: 0;
  line-height: 1.2;
}
/* NEM NAGYÍTUNK FEL SEMMIT.
   A régi képek mérete nagyon eltérő: a 129 cikkképből 32 keskenyebb 800
   képpontnál, a legkisebb 224 — ezeket a 70ch-s hasáb szélességére húzva
   elmosódnának. A `width: auto` miatt a kis kép a saját méretében,
   középen áll, a nagy pedig a hasábhoz igazodik. Ettől a képek szélessége
   cikkenként eltér, de egyik sem lesz maszatos. */
.zc-blog-cover {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--zc-6);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

/* A cikk szövege a tartalmi oldalak tipográfiáját használja (.zc-doc).
   Itt csak az kerül hozzá, ami a blogban van és a dokumentumokban nincs:
   a képek feliratos blokkja. */

.zc-blog-body figure {
  margin: var(--zc-6) 0;
}

.zc-blog-body figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.zc-blog-body figcaption {
  margin-top: var(--zc-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zc-slate);
  text-align: center;
}

/* KÉP NÉLKÜLI KÁRTYA (2026-09-21). Az új bejegyzéseknek nem muszáj
   borítóképük legyen; ilyenkor egy üres, ugyanolyan arányú keret marad a
   helyén, tehát a rács nem esik szét, és nem villan fel törött kép. */
.zc-blog-card-noimg {
  display: block;
  background:
    repeating-linear-gradient(
      45deg,
      var(--zc-tint),
      var(--zc-tint) 10px,
      #f2f4f7 10px,
      #f2f4f7 20px
    );
}

/* ELŐNÉZETI SÁV — csak az adminból megnyitott cikken (2026-09-21).
   Szándékosan feltűnő: a tulajdonosnak egy pillanat alatt látnia kell,
   hogy amit néz, azt a látogatók még nem látják. */
.zc-blog-preview {
  margin: 0 0 var(--zc-4);
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid #f0e3c2;
  border-radius: var(--zc-radius);
  background: #fdf9ee;
  font-size: 14.5px;
  line-height: 1.55;
}

.zc-blog-preview a { color: var(--zc-blue-deep); font-weight: 500; }
.zc-blog-cta {
  max-width: 70ch;
  margin-top: var(--zc-7);
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-blog-cta p { margin: 0; }

.zc-blog-cta a {
  color: var(--zc-blue-deep);
  font-weight: 500;
}

.zc-blog-more {
  margin-top: var(--zc-8);
  padding-top: var(--zc-6);
  border-top: 1px solid var(--zc-line);
}

.zc-blog-more > h2 {
  margin: 0 0 var(--zc-5);
  font-size: 20px;
}

@media (max-width: 640px) {
  .zc-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-4);
  }

  .zc-blog-cover { margin-bottom: var(--zc-5); }

  .zc-blog-post-head h1 { font-size: 26px; }
}

/* ==========================================================================
   Referenciák (/references, /refImage?id=)

   A KÉPARÁNY ITT DÖNTÉS, NEM ÍZLÉS. A nyolc fénykép aránya 0,75 és 1,36
   között szór (három álló 3:4, egy fekvő, a többi közel négyzetes), tehát
   nincs olyan rögzített arány, ami mindegyiknek passzolna. Három út volt:

     - nyújtás egységes dobozba  -> torzulna, ez kizárt;
     - saját arány megtartása    -> a rács alja fűrészfogas lenne;
     - egységes doboz, vágással  -> rendezett rács, torzulás nélkül.

   A harmadik van itt: `aspect-ratio: 1 / 1` + `object-fit: cover`. A négyzet a
   szórás közepe (a medián 0,95), tehát mindkét szélsőség nagyjából egyformán
   veszít. A `cover` MÉRETARÁNYT TART — vág, de nem nyújt —, a teljes,
   vágatlan kép pedig egy kattintásra van a részletes lapon.
   ========================================================================== */

.zc-ref-head {
  max-width: 68ch;
  margin-bottom: var(--zc-7);
}

.zc-ref-notice {
  max-width: 68ch;
  margin: 0 0 var(--zc-6);
  padding: var(--zc-4) var(--zc-5);
  border: 1px solid var(--zc-line);
  border-left: 3px solid var(--zc-blue);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
  color: var(--zc-ink);
}

.zc-ref-empty {
  max-width: 60ch;
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  color: var(--zc-slate);
}

/* --- A galéria rácsa ---------------------------------------------------- */

.zc-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--zc-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc-ref-card {
  /* A cím linkje ezen a dobozon terül szét — lásd a ::after szabályt. */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zc-ref-card:hover {
  border-color: var(--zc-blue);
  box-shadow: var(--zc-shadow);
}

/* A link a kártyát fedi, tehát a fókuszjelzésnek is a kártyán kell látszania.
   Enélkül billentyűzettel nem lenne látható, hol áll a kurzor. */
.zc-ref-card:focus-within {
  outline: 2px solid var(--zc-blue-deep);
  outline-offset: 2px;
}

.zc-ref-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--zc-tint);
  border-bottom: 1px solid var(--zc-line);
}

/* Nincs fénykép: a doboz kimondja, nem törött ikonnal sejteti. */
.zc-ref-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zc-tint);
  color: var(--zc-slate);
  font-size: 13.5px;
}

.zc-ref-card-body {
  flex: 1 1 auto;
  padding: var(--zc-5) var(--zc-5) var(--zc-3);
}

.zc-ref-card-title {
  margin: 0 0 var(--zc-3);
  font-size: 17px;
  line-height: 1.35;
}

.zc-ref-card-title a {
  color: inherit;
  text-decoration: none;
}

.zc-ref-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.zc-ref-card:hover .zc-ref-card-title a { color: var(--zc-blue-deep); }

.zc-ref-card-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--zc-slate);
  /* Három sor után elvágjuk: a leírások hossza nagyon eltérő (116-tól 532
     karakterig), és enélkül egyetlen hosszú kártya megnyújtaná az egész sort. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A két legfontosabb beállítás a kártya lábán. Gépi értékek, ezért a
   monospace családot kapják — ugyanaz a döntés, mint a jelzőrendszerben. */
.zc-ref-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-2) var(--zc-4);
  margin: 0;
  padding: var(--zc-3) var(--zc-5) var(--zc-5);
  list-style: none;
  font-family: var(--zc-mono);
  font-size: 12.5px;
  color: var(--zc-slate);
}

.zc-ref-card-specs span {
  color: var(--zc-ink);
  font-weight: 500;
}

/* --- Egy munka ---------------------------------------------------------- */

.zc-ref-back {
  margin: 0 0 var(--zc-5);
  font-size: 14px;
}

.zc-ref-back a {
  color: var(--zc-slate);
  text-decoration: none;
}

.zc-ref-back a:hover { color: var(--zc-blue-deep); }

.zc-ref-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--zc-7);
  align-items: start;
}

/* A kép marad a képernyőn, amíg a jobb hasáb szövegét olvassák. */
.zc-ref-media {
  position: sticky;
  top: var(--zc-5);
}

/* ITT NINCS VÁGÁS ÉS NINCS NYÚJTÁS. A `height: auto` a saját arányán tartja a
   képet, a `max-height` pedig azt akadályozza meg, hogy egy álló fénykép
   magasabb legyen a képernyőnél. A galéria négyzetes vágása után ez az a hely,
   ahol a munka teljes egészében látszik. */
.zc-ref-photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  margin: 0 auto;
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  background: var(--zc-tint);
}

/* A helykitöltőnek nincs saját aránya, ezért kap egyet. A `display` azért áll
   itt is, mert a fenti `.zc-ref-photo` blokkosra állítja, és a forrásrendben
   utána jön — a nagyobb fajsúlyú `div.zc-ref-photo` az, ami visszahozza a
   középre igazítást. */
div.zc-ref-photo {
  display: flex;
  /* A `width` sem hagyható a fenti `auto` értéken: tartalomhoz igazodó
     dobozként ez a felirat néhány képpontjára zsugorodna, az arány pedig
     abból számolna magasságot. Itt a hasáb szélessége a kiindulás. */
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
}

.zc-ref-zoom {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  margin: var(--zc-4) auto 0;
  padding: var(--zc-2) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-slate);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.zc-ref-zoom:hover {
  border-color: var(--zc-blue);
  color: var(--zc-blue-deep);
}

.zc-ref-title {
  margin: 0 0 var(--zc-5);
  line-height: 1.2;
}

.zc-ref-desc { margin-bottom: var(--zc-6); }

/* A beállítások táblája. Két oszlop, keret nélkül: a vonalak csak a sorokat
   választják el — egy négysoros táblához a teljes rács túl hangos lenne. */
.zc-ref-specs {
  width: 100%;
  margin-bottom: var(--zc-6);
  border-collapse: collapse;
  text-align: left;
}

.zc-ref-specs caption {
  margin-bottom: var(--zc-3);
  color: var(--zc-slate);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.zc-ref-specs th,
.zc-ref-specs td {
  padding: var(--zc-3) 0;
  border-bottom: 1px solid var(--zc-line);
  font-weight: 400;
}

.zc-ref-specs th {
  width: 45%;
  color: var(--zc-slate);
}

.zc-ref-specs td {
  font-family: var(--zc-mono);
  font-size: 14.5px;
}

.zc-ref-download {
  margin: 0 0 var(--zc-6);
  font-size: 14px;
}

.zc-ref-download a {
  color: var(--zc-blue-deep);
  font-weight: 500;
}

.zc-ref-cta {
  margin-top: var(--zc-6);
  padding: var(--zc-5);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-tint);
}

.zc-ref-cta p { margin: 0; }

.zc-ref-cta a {
  color: var(--zc-blue-deep);
  font-weight: 500;
}

/* A galéria alján a doboz nagyobb levegőt kap, mint a részletes lap hasábjában. */
.zc-ref-grid + .zc-ref-cta,
.zc-ref-empty + .zc-ref-cta {
  margin-top: var(--zc-8);
}

/* --- Lépkedés a munkák között ------------------------------------------- */

.zc-ref-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zc-4);
  margin-top: var(--zc-8);
  padding-top: var(--zc-6);
  border-top: 1px solid var(--zc-line);
}

.zc-ref-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--zc-1);
  padding: var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  color: inherit;
  text-decoration: none;
}

.zc-ref-nav a:hover {
  border-color: var(--zc-blue);
  color: var(--zc-blue-deep);
}

.zc-ref-nav-next {
  text-align: right;
  /* Ha nincs előző, a következő akkor is a jobb oldalon álljon. */
  grid-column: 2;
}

.zc-ref-nav-dir {
  color: var(--zc-slate);
  font-size: 13px;
}

.zc-ref-nav a:hover .zc-ref-nav-dir { color: inherit; }

.zc-ref-nav-title {
  font-weight: 500;
  font-size: 15px;
}

/* --- A nagyító ---------------------------------------------------------- */

/* A `<dialog>` alapból középre igazított, korlátozott méretű doboz. Itt a
   teljes képernyőt kapja, hogy a kép a lehető legnagyobb lehessen. */
.zc-lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--zc-5);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.zc-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zc-lightbox::backdrop {
  background: rgb(0 0 0 / 82%);
}

/* A `contain` az, ami itt torzulás nélkül tartja a képet: befér, akármilyen
   az aránya, és egyik irányban sem nyúlik meg. */
.zc-lightbox-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--zc-radius);
}

.zc-lightbox-close {
  position: fixed;
  top: var(--zc-4);
  right: var(--zc-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: var(--zc-ink);
  cursor: pointer;
}

.zc-lightbox-close:hover { background: #fff; }

.zc-lightbox-close svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .zc-ref-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-6);
  }

  /* Egy hasábban a ragasztás értelmetlen: a kép a fejléc alá ragadva takarná
     a szöveget, amit épp olvasnak. */
  .zc-ref-media { position: static; }

  .zc-ref-photo { max-height: 60vh; }
}

@media (max-width: 640px) {
  .zc-ref-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-4);
  }

  .zc-ref-title { font-size: 26px; }

  /* Két egymás melletti lépkedő gomb 360 képpontnál összenyomódna. */
  .zc-ref-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-ref-nav-next {
    grid-column: 1;
    text-align: left;
  }

  .zc-lightbox { padding: var(--zc-2); }
}

/* ==========================================================================
   ŰRLAP-VISSZAJELZÉS
   ==========================================================================

   A sikeres beküldés doboza (`.zc-form-notice`) több lapon áll: fiók,
   belépés, jelszó-emlékeztető és az admin.

   A PROTOTÍPUSLAP STÍLUSAI INNEN 2026-09-19-ÉN KIKERÜLTEK. A lap addig három
   csomagkártyát, hosszú szöveges szakaszokat és képsorokat mutatott (a
   `zc-prot`-előtagú szabályok); mindhárom megszűnt, és a lap saját
   stíluslapot kapott (`public/css/prototype.css`). Egy sosem használt
   szabály itt csak azt a látszatot keltené, hogy a lap még ezekből épül.
   ========================================================================== */

/* --- Az ajánlatkérés visszajelzése -------------------------------------- */

.zc-form-notice h3 {
  margin: 0 0 var(--zc-2);
  font-size: 17px;
}

.zc-form-notice p {
  margin: 0 0 var(--zc-2);
}

.zc-form-notice p:last-child {
  margin-bottom: 0;
}

/* A hibás mezőt a keret is jelöli, nem csak az alatta álló mondat: aki
   végigfut a szemével az űrlapon, így egy pillantásból megtalálja. */
.zc-form [aria-invalid="true"] {
  border-color: var(--zc-danger);
}

/* ==========================================================================
   Admin
   --------------------------------------------------------------------------
   Az admin UGYANEBBOL a stíluslapból él, de saját kerettel: nincs bolti
   fejléc, kosárszámláló és jogi lábléc. A színek és a betű viszont
   ugyanazok — egy külön arculat itt csak karbantartási teher lenne.

   A `zc-adm-` előtag azért kell, hogy a két keret ne tudjon összeérni: a
   nyilvános oldal stílusait innen nem írjuk felül.
   ========================================================================== */

.zc-adm-body {
  background: var(--zc-tint);
  color: var(--zc-ink);
  font-family: var(--zc-font);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.zc-adm-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--zc-4);
  width: 100%;
}

.zc-adm-narrow {
  max-width: 640px;
}

/* --- Fejléc --------------------------------------------------------- */

.zc-adm-top {
  background: var(--zc-paper);
  border-bottom: 1px solid var(--zc-line);
}

.zc-adm-top-inner {
  display: flex;
  align-items: center;
  gap: var(--zc-5);
  min-height: 60px;
  flex-wrap: wrap;
  padding-top: var(--zc-2);
  padding-bottom: var(--zc-2);
}

.zc-adm-brand {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  color: var(--zc-ink);
  text-decoration: none;
  font-size: 15px;
}

.zc-adm-brand b {
  color: var(--zc-blue);
  font-weight: 500;
}

.zc-adm-nav {
  display: flex;
  gap: var(--zc-4);
  flex-wrap: wrap;
  flex: 1;
}

.zc-adm-nav-link {
  color: var(--zc-slate);
  text-decoration: none;
  font-size: 14px;
  padding: var(--zc-1) 0;
  border-bottom: 2px solid transparent;
}

.zc-adm-nav-link:hover,
.zc-adm-nav-link[aria-current="page"] {
  color: var(--zc-ink);
  border-bottom-color: var(--zc-blue);
}

/* A még el nem készült területek nem linkek. Halványak, és a kurzor sem
   ígér kattinthatóságot — a jelölés így nem hibának, hanem állapotnak
   látszik. */
.zc-adm-nav-todo,
.zc-adm-nav-todo:hover {
  color: #9aa0aa;
  border-bottom-color: transparent;
  cursor: default;
}

.zc-adm-out {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  margin: 0;
}

.zc-adm-who {
  font-size: 13px;
  color: var(--zc-slate);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Törzs ---------------------------------------------------------- */

.zc-adm-main {
  flex: 1;
  padding: var(--zc-6) 0 var(--zc-8);
}

.zc-adm-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zc-6) var(--zc-4);
}

.zc-adm-main h1 {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 var(--zc-2);
}

.zc-adm-main h2 {
  font-size: 17px;
  font-weight: 500;
  margin: var(--zc-7) 0 var(--zc-3);
}

.zc-adm-lede {
  color: var(--zc-slate);
  margin: 0 0 var(--zc-5);
  max-width: 62ch;
}

.zc-adm-muted {
  color: var(--zc-slate);
}

.zc-adm-card {
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius-lg);
  padding: var(--zc-6);
}

/* --- Belépőlap ------------------------------------------------------ */

.zc-adm-login {
  width: 100%;
  max-width: 380px;
}

.zc-adm-login h1 {
  font-size: 22px;
  font-weight: 500;
  margin: var(--zc-3) 0 var(--zc-2);
}

.zc-adm-login .zc-adm-muted {
  margin: 0 0 var(--zc-5);
  font-size: 14px;
}

.zc-adm-login-logo {
  display: block;
}

/* --- Elutasított beküldés és visszaállítás (2026-09-26) ------------ */

/* A LEJÁRT BELÉPÉS / LEJÁRT ŰRLAP LAPJA (`admin/post-rejected.ejs`). A
   belépőlap kártyája, csak szélesebb: a lenyitható részben a beküldött
   szöveg áll, és annak olvashatónak kell maradnia. */
.zc-adm-rejected {
  width: 100%;
  max-width: 620px;
}

.zc-adm-rejected h1 {
  font-size: 22px;
  font-weight: 500;
  margin: var(--zc-3) 0 var(--zc-2);
}

.zc-adm-rejected-actions { margin: var(--zc-5) 0 0; }

.zc-adm-rejected-copy {
  margin-top: var(--zc-5);
  padding-top: var(--zc-4);
  border-top: 1px solid var(--zc-line);
}

.zc-adm-rejected-copy > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.zc-adm-rejected-copy textarea {
  width: 100%;
  font-size: 13.5px;
  background: var(--zc-paper);
}

/* A VISSZAÁLLÍTÁS AJÁNLATA a szerkesztő fölött (`public/js/admin-forms.js`).
   Keret, nem kitöltés — a fehér lapon a keret különbözteti meg. */
.zc-adm-restore {
  margin: 0 0 var(--zc-4);
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-blue);
  border-radius: 10px;
  background: var(--zc-paper);
  font-size: 14.5px;
  line-height: 1.55;
}

.zc-adm-restore p { margin: 0; }

.zc-adm-restore .zc-adm-restore-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zc-2);
  margin-top: var(--zc-3);
}

.zc-adm-restore-done { border-color: var(--zc-line); }

/* A KARAKTERSZÁMLÁLÓ (`data-max-chars`). A korlát fölött piros: ilyenkor az
   űrlap nem küldhető be, és a szöveg a mezőben marad. */
.zc-adm-counter { margin-top: var(--zc-1); }
.zc-adm-counter-over { color: var(--zc-danger); font-weight: 500; }

/* --- Állapotsáv ----------------------------------------------------- */

.zc-adm-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--zc-4);
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-4);
}

.zc-adm-strip p {
  margin: 0;
}

.zc-adm-strip-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zc-slate);
}

.zc-adm-strip-value {
  font-size: 16px;
  margin-top: var(--zc-1) !important;
}

.zc-adm-strip-note {
  font-size: 12px;
  color: var(--zc-slate);
  margin-top: var(--zc-1) !important;
}

/* --- Területek ------------------------------------------------------ */

.zc-adm-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--zc-4);
}

.zc-adm-area {
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-4);
  display: flex;
  flex-direction: column;
  gap: var(--zc-2);
}

.zc-adm-area h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.zc-adm-area p {
  margin: 0;
  font-size: 14px;
}

.zc-adm-area-source {
  color: var(--zc-slate);
  font-family: var(--zc-mono);
  font-size: 12px;
  margin-top: auto !important;
  padding-top: var(--zc-2);
}

/* A még el nem készült területek halványabbak, de OLVASHATÓK maradnak: a
   lényegük épp az, hogy elmondják, mi jön. */
.zc-adm-area-todo {
  background: transparent;
  border-style: dashed;
}

.zc-adm-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--zc-slate);
  border: 1px solid var(--zc-line);
  border-radius: 999px;
  padding: 2px var(--zc-2);
}

.zc-adm-badge-done {
  color: var(--zc-success);
  border-color: currentColor;
}

/* --- Megjegyzés-doboz és listák ------------------------------------- */

.zc-adm-note {
  margin-top: var(--zc-7);
  border-left: 3px solid var(--zc-line);
  padding-left: var(--zc-4);
  max-width: 62ch;
}

.zc-adm-note p {
  color: var(--zc-slate);
  font-size: 14px;
}

.zc-adm-list {
  padding-left: var(--zc-5);
  line-height: 1.8;
}

/* --- Lábléc --------------------------------------------------------- */

.zc-adm-foot {
  border-top: 1px solid var(--zc-line);
  padding: var(--zc-4) 0;
  font-size: 13px;
  color: var(--zc-slate);
}

.zc-adm-foot p {
  margin: 0;
}

.zc-adm-foot a {
  color: inherit;
}

@media (max-width: 640px) {
  .zc-adm-top-inner {
    gap: var(--zc-3);
  }

  /* A kilépés gomb a fejléc jobb szélén marad, a menü alá törik: mobilon
     így nem a névsor tolja le a képernyőről. */
  .zc-adm-nav {
    order: 3;
    flex-basis: 100%;
  }

  .zc-adm-out {
    margin-left: auto;
  }
}

/* --- Egyedi ajánlati linkek (admin) --------------------------------- */

/* Kis gomb: a sorokba illeszkedő műveletekhez (másolás, megnyitás,
   visszavonás). A .zc-btn alapmérete egy ilyen listában túl hangos lenne. */
.zc-btn-sm {
  padding: 6px var(--zc-3);
  font-size: 13px;
}

.zc-adm-form-card {
  max-width: 720px;
}

.zc-adm-offers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zc-4);
}

.zc-adm-offer {
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-4);
  display: flex;
  flex-direction: column;
  gap: var(--zc-3);
}

/* A most létrehozott ajánlat. Nem szín, hanem KERET: a lista tetején álló
   sor amúgy is a legfrissebb — ez csak megerősíti, hogy ez az, amit épp
   keresel, és nem kell a dátumokat összehasonlítani. */
.zc-adm-offer-new {
  border-color: var(--zc-blue);
  box-shadow: 0 0 0 3px var(--zc-blue-soft);
}

.zc-adm-offer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zc-3);
}

.zc-adm-offer-head h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.zc-adm-offer-desc {
  margin: 0;
  font-size: 14px;
  color: var(--zc-slate);
}

/* Az állapot három lehet, és a szín NEM az egyetlen jelzés: a felirat maga
   is kiírja ("él", "lejárt", "visszavonva"). Színlátás nélkül is olvasható. */
.zc-adm-state-live {
  color: var(--zc-success);
  border-color: currentColor;
}

.zc-adm-state-expired,
.zc-adm-state-revoked {
  color: var(--zc-slate);
}

.zc-adm-offer-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--zc-3);
  margin: 0;
}

.zc-adm-offer-facts dt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zc-slate);
}

.zc-adm-offer-facts dd {
  margin: var(--zc-1) 0 0;
  font-size: 14px;
}

.zc-adm-offer-link {
  display: flex;
  align-items: center;
  gap: var(--zc-2);
  flex-wrap: wrap;
}

/* A cím teljes hosszában látszódjon, és kijelölhető legyen: ez a mező a
   tartalék megoldás arra az esetre, ha a másoló gomb nem működik. */
.zc-adm-url {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--zc-mono);
  font-size: 13px;
  padding: 8px var(--zc-3);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-ink-soft, #f7f8fa);
  color: inherit;
}

.zc-adm-offer-revoke {
  margin: 0;
}

@media (max-width: 640px) {
  .zc-adm-offer-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zc-2);
  }
}

/* --- Rendeléskezelés (admin) ---------------------------------------- */

/* A szűrő egy sorban, ha elfér; mobilon egymás alá törik. A keresőmező kap
   több helyet, mert abba gépelnek, a legördülőkbe csak választanak. */
.zc-adm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--zc-4);
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-4);
  margin-bottom: var(--zc-4);
}

.zc-adm-filter .zc-field {
  margin: 0;
}

.zc-adm-filter-search {
  flex: 1 1 280px;
  min-width: 0;
}

.zc-adm-filter-actions {
  display: flex;
  gap: var(--zc-2);
  align-items: center;
}

.zc-adm-count {
  margin: 0 0 var(--zc-3);
  font-size: 14px;
}

.zc-adm-orders td,
.zc-adm-orders th {
  vertical-align: top;
}

.zc-adm-nowrap {
  white-space: nowrap;
}

/* Másodlagos adat a cellában: ott van, ha kell, de nem versenyez a
   lényeggel. */
.zc-adm-sub {
  display: block;
  font-size: 12px;
  color: var(--zc-slate);
  margin-top: 2px;
}

/* --- Állapotjelölések ------------------------------------------------ */

/* A SZÍN SEHOL NEM AZ EGYETLEN JELZÉS: a felirat maga kiírja az állapotot.
   Színlátás nélkül is olvasható marad. */
.zc-adm-state-uj,
.zc-adm-pay-pending {
  color: var(--zc-blue);
  border-color: currentColor;
}

.zc-adm-state-gyartasban,
.zc-adm-state-kesz,
/* Az ajánlatkérés „folyamatban” állapota — ugyanaz a jelentés, mint a
   rendelésnél a gyártásban: dolgozunk rajta, de még nincs kész. */
.zc-adm-state-folyamatban {
  color: var(--zc-ink, #1c1b19);
  border-color: var(--zc-line);
}

.zc-adm-state-feladva,
.zc-adm-state-lezarva,
.zc-adm-pay-paid {
  color: var(--zc-success);
  border-color: currentColor;
}

.zc-adm-state-torolve,
.zc-adm-pay-cancelled {
  color: var(--zc-slate);
}

.zc-adm-pay-failed {
  color: var(--zc-danger);
  border-color: currentColor;
}

.zc-adm-source-print {
  color: var(--zc-slate);
}

.zc-adm-source-offer {
  color: var(--zc-blue);
  border-color: currentColor;
}

/* A régi rendszer rendelése: szaggatott keret, ahogy a még el nem készült
   területeké. Ugyanaz az üzenet — „ez átmeneti állapot”. */
.zc-adm-source-legacy {
  color: var(--zc-slate);
  border-style: dashed;
}

/* --- Lapozó ---------------------------------------------------------- */

.zc-adm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--zc-4);
  margin-top: var(--zc-5);
}

/* A nem elérhető irány LÁTSZIK, de nem kattintható. Elrejtve ugrálna a
   lapozó, és nem lehetne megszokni, hol vannak a gombok. */
.zc-adm-pager-off {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Adatlap --------------------------------------------------------- */

.zc-adm-back {
  margin: 0 0 var(--zc-3);
  font-size: 14px;
}

.zc-adm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--zc-6);
  align-items: start;
}

.zc-adm-col-main,
.zc-adm-col-side {
  min-width: 0;
}

.zc-adm-col-side h2:first-child {
  margin-top: 0;
}

.zc-adm-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zc-4);
}

.zc-adm-item {
  background: var(--zc-paper);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  padding: var(--zc-4);
  display: flex;
  flex-direction: column;
  gap: var(--zc-3);
}

.zc-adm-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zc-3);
}

.zc-adm-item-head h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  word-break: break-word;
}

.zc-adm-item-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 500;
}

.zc-adm-item-file {
  display: flex;
  align-items: center;
  gap: var(--zc-3);
  flex-wrap: wrap;
}

.zc-adm-item-preview {
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-paper);
}

.zc-adm-address {
  margin: var(--zc-2) 0;
  line-height: 1.6;
}

/* A vevő megjegyzése és az ajánlatkérés leírása: a sortöréseit meg kell
   tartani, mert listát szoktak írni. A szöveg eszkapelve érkezik — vagy a
   sablonmotor kiíró ágán, vagy a `linkifyPlainText()`-en át.

   A `overflow-wrap` a hosszú modell-linkek miatt kell: egy szóköz nélküli,
   száz karakteres cím `pre-wrap` mellett kilógna a kártyából, és vízszintes
   görgetést csinálna az egész lapnak. */
.zc-adm-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Az ajánlatkészítő űrlap fölött álló igény: ugyanaz a kártya, csak jelölve,
   hogy ez NEM az űrlap része, hanem az, amiből az ár készül. A bal szélen
   futó vonal a naplóéval rokon — mindkettő azt mondja, hogy „ez korábban
   történt, csak olvasható". */
.zc-adm-linked {
  border-left: 3px solid var(--zc-blue);
  display: grid;
  gap: var(--zc-3);
}

.zc-adm-mono {
  font-family: var(--zc-mono);
  font-size: 12px;
  word-break: break-all;
}

/* --- Napló ----------------------------------------------------------- */

.zc-adm-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--zc-3);
}

.zc-adm-log li {
  border-left: 2px solid var(--zc-line);
  padding-left: var(--zc-3);
}

.zc-adm-log-when {
  display: block;
  font-size: 12px;
  color: var(--zc-slate);
}

.zc-adm-log-what {
  display: block;
  font-size: 14px;
}

@media (max-width: 900px) {
  /* Egy hasáb: az adatlap oldalsávja a tételek ALÁ kerül, nem mellé. A
     műveletek így is elérhetők, csak görgetni kell értük. */
  .zc-adm-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--zc-5);
  }
}

@media (max-width: 640px) {
  .zc-adm-filter-actions {
    width: 100%;
  }

  .zc-adm-item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zc-1);
  }

  .zc-adm-item-price {
    text-align: left;
  }
}

/* ==================================================================
   Átvevőpont-választó — térkép és lista egymás mellett
   ==================================================================

   MOBILON EGYMÁS ALATT. A lista kerül előre, mert a választás ott történik;
   a térkép tájékozódásra való. Szélesebb képernyőn a kettő egymás mellé
   áll, hogy a kijelölés mindkettőn egyszerre látszódjon.

   A TÉRKÉP ELREJTHETŐ. Ha a térképkönyvtár nem tölthető le, a [hidden]
   attribútum elveszi a helyét, és a lista megkapja a teljes szélességet —
   külön szabály nélkül, mert a rács a meglévő elemekhez igazodik.
   ================================================================== */

.zc-pv {
  margin-top: 0.75rem;
}

/* A SZŰRŐK EGYMÁS ALATT, SAJÁT TÉRKÖZZEL.

   Korábban nem volt közöttük hézag: a keresőmező magyarázó mondata („Ékezet
   nélkül is működik") közvetlenül a következő címkéhez tapadt. Három mezőnél
   ez még elveszett a sorok között; a vármegye kivezetése után viszont a
   kereső és a település közvetlenül egymás mellé került, és a két csoport
   egybefolyt.                                                              */
.zc-pv-filters {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
  margin-bottom: 1rem;
}

/* A PONT LENYÍLÓ MEZŐJE úgy néz ki, mint a fölötte álló szövegmezők. Eddig
   natív maradt (a `.zc-field input` szabály nem érte el): 19 px magas,
   13,3 px-es betűvel — telefonon apró célpont, és a 16 px alatti betű miatt
   az iOS Safari koppintáskor ránagyított a lapra (lásd `.zc-field input`).  */
.zc-pv .zc-field select {
  width: 100%;
  padding: var(--zc-3) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  color: var(--zc-ink);
  font: inherit;
  font-size: 16px;
}

.zc-pv .zc-field select:focus-visible {
  outline: 2px solid var(--zc-blue);
  outline-offset: 1px;
  border-color: var(--zc-blue);
}

.zc-pv-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.zc-pv-map {
  /* A térképnek KELL a magasság: magától nulla lenne, és üres sávnak látszana. */
  height: 320px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
  /* A csempék ne kerüljenek a lap többi eleme fölé görgetéskor. */
  z-index: 0;
}

.zc-pv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #dadce0;
  border-radius: 8px;
}

.zc-pv-item + .zc-pv-item {
  border-top: 1px solid #dadce0;
}

.zc-pv-item-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.zc-pv-item-btn:hover,
.zc-pv-item-btn:focus-visible {
  background: #f1f3f4;
}

/* A KIJELÖLÉS KERETTEL, nem kitöltéssel — a fehér lap arculati döntése. */
.zc-pv-item.is-selected .zc-pv-item-btn {
  box-shadow: inset 3px 0 0 #4285f4;
  background: #f8f9fa;
}

.zc-pv-item-name {
  display: block;
  font-weight: 500;
}

.zc-pv-item-addr,
.zc-pv-item-kind {
  display: block;
  font-size: 0.85em;
  color: #5f6368;
}

.zc-pv-status {
  margin: 0.5rem 0 0;
  font-size: 0.9em;
  color: #5f6368;
}

/* A pontlista kiesése (ZV2-04): a lista újratöltése a választóban, és a pont
   újraellenőrzése a beküldés után. Egyik sem hiba a vásárló részéről, ezért
   csendes gomb, nem piros. */
.zc-pv-retry {
  margin-top: var(--zc-2);
}

.zc-pv-recheck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zc-2);
  margin: var(--zc-2) 0 var(--zc-3);
}

.zc-pv-recheck .zc-field-note {
  margin: 0;
}

.zc-pv-chosen {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #4285f4;
  border-radius: 8px;
  font-size: 0.95em;
}

@media (min-width: 48rem) {
  .zc-pv-body {
    grid-template-columns: 1fr 1fr;
  }

  .zc-pv-map,
  .zc-pv-list {
    height: 420px;
    max-height: 420px;
  }
}

/* --- A választás részlete: KÖZVETLENÜL A KÁRTYA ALATT --------------------
   AMI A VÁLASZTÁSBÓL KÖVETKEZIK, AZ A VÁLASZTÁSHOZ TAPAD. A szállítási cím és
   a pontválasztó nem a szállítási blokk alján nyílik ki, hanem a kiválasztott
   kártya alatt — közös kerettel, rés nélkül, hogy egy testnek látszódjanak. A
   következő lehetőség pedig ezek UTÁN következik.

   A PANELEKET A SZKRIPT MOZGATJA IDE (`site.js`, `koltoztet`): egy példány
   létezik belőlük, tehát nincs kétszer kiírt `id` vagy `name`. JavaScript
   nélkül a lista alatti tárolóban maradnak.                                 */

.zc-pick-option {
  display: flex;
  flex-direction: column;
}

/* Csak az AKTÍV lehetőség részlete van nyitva. A `:has()` JavaScript nélkül is
   működik — ezért látszik így a fizetési módok tájékoztatója is. */
.zc-pick-option:not(:has(input:checked)) > .zc-pick-slot { display: none; }

/* Üres rés nem foglal helyet: a házhozszállítás kártyája alatt csak akkor van
   panel, ha a szkript odatette. */
.zc-pick-slot:empty { display: none; }

.zc-pick-slot {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
  padding: var(--zc-4);
  border: 1px solid var(--zc-blue);
  border-top: 0;
  border-radius: 0 0 var(--zc-radius) var(--zc-radius);
  background: var(--zc-blue-soft);
}

/* A kártya alja nyitott, ha részlet tartozik hozzá. */
.zc-pick-option:has(input:checked):has(> .zc-pick-slot:not(:empty)) > label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* DOBOZ A DOBOZBAN NEM KELL. A résbe költöztetett panelnek már van kerete és
   háttere — a sajátját ilyenkor leveszi. */
.zc-pick-slot > .zc-cond:not([hidden]),
.zc-pick-slot > .zc-pickup:not([hidden]) {
  padding: 0;
  border: 0;
  background: none;
}

.zc-pick-note {
  margin: 0;
  color: var(--zc-slate);
  font-size: 13.5px;
  line-height: 1.55;
}

/* A RÉSZLETEK TÁROLÓJA. JavaScripttel üresen marad (a panelek a kártyák alatt
   állnak); enélkül itt látszanak, a lista alatt — ahogy korábban. */
.zc-detail-pool {
  display: flex;
  flex-direction: column;
  gap: var(--zc-4);
}

/* --- A két számlázási kapcsoló -------------------------------------------
   AZ ADATBLOKK ALJÁN, EGYMÁS ALATT. Mindkettő alatt közvetlenül az áll, amit
   bekapcsolva kérdez — a vonal fölöttük azt mondja meg, hogy innentől nem
   alapadat következik, hanem eltérés tőle.                                  */

.zc-switches {
  display: flex;
  flex-direction: column;
  gap: var(--zc-3);
  margin-top: var(--zc-1);
  padding-top: var(--zc-4);
  border-top: 1px solid var(--zc-line);
}

/* --- Az összesítő választásai --------------------------------------------
   MIT MUTAT, ÉS MIT NEM. A rendelési VÁLASZTÁSOKAT ismétli meg — szállítás,
   átvételi hely, cím, fizetés, számlázás —, hogy egy pillantással
   ellenőrizhetők legyenek. A bal oldali mezők TARTALMÁT nem másoljuk ide: az
   ott áll, szerkeszthető alakban, és kétszer kiírva csak elcsúszni tudna.   */

.zc-summary-choices {
  margin: 0 0 var(--zc-4);
  padding: var(--zc-2) var(--zc-4);
  border: 1px solid var(--zc-line);
  border-radius: var(--zc-radius);
  background: var(--zc-surface);
  font-size: 13.5px;
}

/* CÍMKE FÖLÖTT, ÉRTÉK ALATTA — nem egymás mellett.

   A panel 360 px széles, az értékek egy része pedig teljes cím („Teszt Anna ·
   1114 Budapest, Fő utca 1"). Két hasábra törve az utolsó sorra egyetlen szó
   kerülne, jobbra zárva — olvashatatlan rongyos szél. Egymás alatt a cím
   folyó szövegként törik, és a címke is olvasható marad.                    */
.zc-choice {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--zc-2) 0;
}

/* A `hidden` erősebb kell legyen a `display: flex`-nél: a nem érvényes sor
   (pl. az automata adatai házhozszállításnál) NEM marad ott halványan. */
.zc-choice[hidden] { display: none; }

.zc-choice + .zc-choice { border-top: 1px dashed var(--zc-line); }

.zc-choice dt {
  color: var(--zc-slate);
  font-size: 12.5px;
}

.zc-choice dd {
  margin: 0;
  min-width: 0;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* AMI MÉG HIÁNYZIK, AZ NEM HALVÁNY SZÜRKE. A „Válassz átvevőpontot" nem
   adat, hanem teendő — és ezt látni kell. */
.zc-choice-missing {
  color: var(--zc-danger);
  font-weight: 500;
}