/* ============================================================
   Fürdőszobatervező — a felület stílusa
   ============================================================
   A prototípus (prototipus/tervezo/index.html) beágyazott
   stíluslapjából származik, de minden szabály a `.nw-tervezo-app`
   alá van szorítva, és minden saját osztály `nwt-` előtagot kapott.
   Csupasz `header`, `main`, `aside` szelektor nincs benne: azok a
   weboldal fejlécét és törzsét is átszabnák.

   A design-tokeneket (szín, tipográfia, ritmus) a téma adja
   (assets/css/niwell.css `:root`-ja) — itt csak az a néhány
   változó áll, ami csak a tervezőnek kell.
   ============================================================ */

.nw-tervezo-app {
  /* a tervező saját, jelentést hordozó színei */
  --ok: oklch(0.78 0.12 150);
  --bad: oklch(0.72 0.16 30);
  --tiny: 0.7rem;
  /* kiemelés: a kiválasztott állapot és a fő gomb színe — arany,
     mert az vezeti a szemet a sötét felületen */
  --hl: var(--accent);
  --on-hl: var(--ink-deep);

  /* A hasábszélességek változóban állnak, mert a két szélső hasáb hátterét a
     rács ál-elemei festik (lásd lentebb), és azoknak ugyanezt kell tudniuk. */
  --hasab-bal: 320px;
  --hasab-jobb: 340px;
  /* A kipányvázott jelenet és összegző magassága. */
  --panel-magas: min(90svh, 960px);

  display: grid;
  grid-template-columns: var(--hasab-bal) minmax(0, 1fr) var(--hasab-jobb);
  /* Nincs fix magasság: a sáv addig nő, ameddig a vezérlők hasábja tart —
     így több termék egyszerűen több helyet kap, nem szorul görgetősávba. */
  block-size: auto;
  min-block-size: 0;
  overflow: visible;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--step--1);
  line-height: 1.6;
  background: var(--ink-deep);
  color: var(--on-dark);
  -webkit-font-smoothing: antialiased;
}

.nw-tervezo-app *,
.nw-tervezo-app *::before,
.nw-tervezo-app *::after { box-sizing: border-box; }

.nw-tervezo-app button,
.nw-tervezo-app input { font-family: inherit; }

/* világos keret, hogy az arany kiemelésen is látsszon */
.nw-tervezo-app button:focus-visible,
.nw-tervezo-app a:focus-visible,
.nw-tervezo-app input:focus-visible,
.nw-tervezo-app summary:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

.nw-tervezo-app [hidden] { display: none !important; }
.nwt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- oldalsó panelek ---------- */

/* A jobb panel és a jelenet ki van pányvázva, ezért nem ér le a sáv aljáig.
   A két szélső hasáb hátterét és elválasztó vonalát a rács két ál-eleme
   festi, teljes magasságban — így a kipányvázott panel alatt nem nyílik
   világosabb-sötétebb rés. */
.nw-tervezo-app::before,
.nw-tervezo-app::after {
  content: "";
  grid-row: 1;
  background: var(--ink);
  z-index: 0;
}
.nw-tervezo-app::before { grid-column: 1; border-inline-end: 1px solid var(--ink-line); }
.nw-tervezo-app::after { grid-column: 3; border-inline-start: 1px solid var(--ink-line); }

.nwt-panel {
  background: var(--ink);
  padding: 0 var(--gap-m);
  min-height: 0;
  z-index: 1;
}

/* A panelekben több tartalom van, mint amennyi egyszerre elfér, ezért a
   görgetősávnak látszania KELL — a macOS alapból csak görgetés közben mutatja,
   a halvány `--ink-line` pedig a sötét panelen gyakorlatilag láthatatlan. */
.nwt-panel--jobb,
.nw-tervezo-app #nwt-picker {
  scrollbar-width: thin;
  scrollbar-color: var(--on-dark-muted) var(--ink-soft);
}
.nwt-panel--jobb::-webkit-scrollbar,
.nw-tervezo-app #nwt-picker::-webkit-scrollbar { inline-size: 10px; }
.nwt-panel--jobb::-webkit-scrollbar-track,
.nw-tervezo-app #nwt-picker::-webkit-scrollbar-track { background: var(--ink-soft); }
.nwt-panel--jobb::-webkit-scrollbar-thumb,
.nw-tervezo-app #nwt-picker::-webkit-scrollbar-thumb { background: var(--on-dark-muted); }

/* A vezérlők hasábja: nincs saját görgetősávja, a lappal együtt gördül.
   Ez adja a sáv magasságát is. */
.nwt-panel--bal {
  grid-area: 1 / 1;
  position: relative;
  padding-block-end: var(--gap-m);
}

/* Az összegző hasáb a képen marad: amíg a tervezőn dolgozol, az „Elfér?",
   az összeg és a letöltés gomb mindig látszik. */
.nwt-panel--jobb {
  grid-area: 1 / 3;
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  block-size: var(--panel-magas);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nwt-blokk { padding: var(--gap-m) 0; border-bottom: 1px solid var(--ink-line); }

/* A vezérlők blokkjai `<details>`-ek, a címük a nyitogató. A jelölő a weboldal
   GY.I.K.-jának mintája: „+", ami nyitáskor „×"-re fordul. */
.nw-tervezo-app .nwt-fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  cursor: pointer;
  list-style: none;
}
.nw-tervezo-app .nwt-fej::-webkit-details-marker { display: none; }
.nw-tervezo-app .nwt-fej .nwt-cim { margin: 0; }
.nw-tervezo-app .nwt-fej::after {
  content: "+";
  color: var(--on-dark-muted);
  font-weight: 200;
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.nw-tervezo-app .nwt-fej:hover::after { color: var(--on-dark); }
.nw-tervezo-app .nwt-blokk[open] .nwt-fej::after { transform: rotate(45deg); }
/* nyitott állapotban ugyanaz a térköz marad a cím alatt, mint eddig */
.nw-tervezo-app .nwt-blokk[open] .nwt-fej { margin-block-end: var(--gap-s); }
/* a panel utolsó blokkja — a jobb panelben a letöltés-sáv áll utána,
   ezért a határt osztály jelöli, nem `:last-of-type` */
.nwt-blokk--veg { border-bottom: 0; }

.nw-tervezo-app .nwt-cim {
  font-size: var(--tiny); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4; color: var(--on-dark-muted); margin: 0 0 var(--gap-s);
}
.nwt-sub {
  display: block; font-size: var(--tiny); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-muted); margin: var(--gap-s) 0 var(--gap-xs);
}
.nw-tervezo-app .nwt-note,
.nw-tervezo-app .nwt-links { color: var(--on-dark-muted); margin: var(--gap-xs) 0 0; }
.nw-tervezo-app .nwt-links { margin-bottom: var(--gap-xs); }
.nw-tervezo-app #nwt-catNote { margin: 0 0 var(--gap-s); }

/* ---------- csúszkák ---------- */
.nwt-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.nwt-row output { font-weight: 500; font-variant-numeric: tabular-nums; }
.nw-tervezo-app input[type=range] { width: 100%; accent-color: var(--hl); margin: 0 0 var(--gap-s); }

/* ---------- választógombok: hajszálvonalas rács, a kiválasztott inverzben ---------- */
.nwt-seg, .nwt-sarkok, .nwt-chips {
  display: grid; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
}
.nwt-seg.nwt-c2, .nwt-sarkok, .nwt-chips { grid-template-columns: 1fr 1fr; }
.nwt-seg.nwt-c3 { grid-template-columns: repeat(3, 1fr); }
.nwt-seg.nwt-c4 { grid-template-columns: repeat(4, 1fr); }
.nw-tervezo-app .nwt-seg button,
.nw-tervezo-app .nwt-sarkok .nwt-opt,
.nw-tervezo-app .nwt-chips button {
  font-size: var(--step--1); color: var(--on-dark); background: var(--ink); border: 0;
  padding: 0.7rem 0.3rem; cursor: pointer; text-align: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nw-tervezo-app .nwt-chips button {
  font-size: var(--tiny); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.6rem 0.2rem; line-height: 1.3;
}
.nw-tervezo-app .nwt-seg button:hover,
.nw-tervezo-app .nwt-sarkok .nwt-opt:hover,
.nw-tervezo-app .nwt-chips button:hover { background: var(--ink-soft); }
.nw-tervezo-app .nwt-seg button[aria-pressed=true],
.nw-tervezo-app .nwt-sarkok .nwt-opt[aria-pressed=true],
.nw-tervezo-app .nwt-chips button[aria-pressed=true] { background: var(--hl); color: var(--on-hl); font-weight: 500; }
.nwt-seg button:focus-visible,
.nwt-sarkok .nwt-opt:focus-visible,
.nwt-chips button:focus-visible { outline-offset: -2px; }
.nwt-chips { margin-bottom: var(--gap-s); }

/* ---------- egyoszlopos választó (tálca, megfordítás) ---------- */
.nw-tervezo-app .nwt-opt {
  display: block; width: 100%; font-size: var(--step--1); color: var(--on-dark); background: transparent;
  border: 1px solid var(--ink-line); padding: 0.75rem 0.9rem; margin: 0 0 -1px; cursor: pointer; text-align: start;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); position: relative;
}
.nwt-opt:hover { border-color: var(--on-dark-muted); z-index: 1; }
.nwt-opt b { font-weight: 400; display: block; text-transform: lowercase; font-size: var(--step-0); line-height: 1.3; }
.nwt-opt span { font-size: var(--tiny); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.nwt-opt[aria-pressed=true] { background: var(--hl); border-color: var(--hl); color: var(--on-hl); z-index: 1; }
.nwt-opt[aria-pressed=true] span { color: color-mix(in oklch, var(--on-hl) 75%, var(--hl)); }
.nw-tervezo-app .nwt-sarkok .nwt-opt { margin: 0; }
.nw-tervezo-app .nwt-opt--swap { margin-top: 8px; text-align: center; }

/* ---------- termékválasztó: hajszálvonalas lista, kisbetűs terméknévvel ---------- */
.nw-tervezo-app #nwt-picker {
  max-height: 440px; overflow-y: auto; border-block: 1px solid var(--ink-line);
  overscroll-behavior: contain;
}
.nwt-card {
  display: grid; grid-template-columns: 60px 1fr 34px; gap: var(--gap-s); align-items: center;
  padding: 0.75rem 2px; border-bottom: 1px solid var(--ink-line); cursor: pointer;
  transition: background 0.3s var(--ease);
}
.nwt-card:last-child { border-bottom: 0; }
.nwt-card:hover { background: var(--ink-soft); }
.nw-tervezo-app .nwt-card img { width: 60px; height: 60px; background: var(--surface-2); object-fit: contain; display: block; }
.nwt-card b { font-weight: 300; font-size: var(--step-0); text-transform: lowercase; display: block; line-height: 1.25; }
.nwt-card > span > span {
  font-size: var(--tiny); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-muted); display: block; margin-top: 3px;
}
.nw-tervezo-app .nwt-add {
  width: 34px; height: 34px; padding: 0; background: transparent; color: var(--on-dark);
  border: 1px solid var(--on-dark-muted); cursor: pointer; font-size: 1.1rem; font-weight: 200;
  line-height: 1; display: grid; place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nwt-card:hover .nwt-add { background: var(--paper); color: var(--on-light); border-color: var(--paper); }
.nwt-card .nwt-add[aria-pressed=true] { background: var(--hl); color: var(--on-hl); border-color: var(--hl); }
.nw-tervezo-app a.nwt-more {
  display: inline-block; margin-top: 4px; color: var(--on-dark); text-decoration: underline;
  text-decoration-color: var(--ink-line); text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--ease);
}
.nw-tervezo-app a.nwt-more:hover { text-decoration-color: currentColor; }

/* ---------- elhelyezett elemek kártyái ---------- */
.nw-tervezo-app #nwt-obst,
.nw-tervezo-app #nwt-prods { margin-top: var(--gap-s); }
.nw-tervezo-app #nwt-obst:empty::after { content: "Még nincs elem a falakon."; color: var(--on-dark-muted); }
.nw-tervezo-app #nwt-prods:empty::after { content: "Még nincs hozzáadott termék."; color: var(--on-dark-muted); }
.nwt-it { border: 1px solid var(--ink-line); margin-bottom: -1px; position: relative; transition: border-color 0.3s var(--ease); }
.nwt-it[data-sel=true] { border-color: var(--hl); z-index: 1; }
.nwt-it-head { display: flex; align-items: stretch; }
.nw-tervezo-app .nwt-it-head button {
  font-size: inherit; color: var(--on-dark); background: none; border: 0; cursor: pointer; padding: 0.7rem 0.9rem;
}
.nwt-it-head button:focus-visible { outline-offset: -2px; }
.nw-tervezo-app .nwt-it-head .nwt-it-name { flex: 1; text-align: start; padding: 0.7rem 0.9rem; }
.nwt-it-name b { font-weight: 400; display: block; font-size: var(--step-0); line-height: 1.3; }
.nw-tervezo-app #nwt-prods .nwt-it-name b,
.nw-tervezo-app #nwt-cabinName { text-transform: lowercase; }
.nwt-it-name span { font-size: var(--tiny); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted); }
.nwt-it-name b span { font-size: inherit; letter-spacing: 0; color: inherit; }
.nw-tervezo-app .nwt-it-head .nwt-it-del {
  color: var(--on-dark-muted); font-size: 1.2rem; font-weight: 200; line-height: 1;
  transition: color 0.3s var(--ease);
}
.nw-tervezo-app .nwt-it-head .nwt-it-del:hover { color: var(--on-dark); }
.nwt-it-body { padding: 0 0.9rem 0.4rem; }
.nwt-it-body .nwt-seg { margin-bottom: var(--gap-xs); }

/* ---------- a jelenet ---------- */
.nwt-stage {
  /* A jelenet a DOM-ban elöl áll (telefonon fölülre kell), ezért a helyét
     az asztali rácsban kiírjuk — különben a panelek a második sorba esnek.
     Ki van pányvázva: a vezérlők hasábja mellette gördül, a fürdőszoba pedig
     végig a képen marad, hogy minden állításnak lássuk a hatását. */
  grid-area: 1 / 2;
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  block-size: var(--panel-magas);
  min-block-size: 420px;
  min-width: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 20%, oklch(0.24 0.006 60), var(--ink-deep));
}
.nw-tervezo-app #nwt-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.nwt-views {
  position: absolute; top: var(--gap-s); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
}
.nw-tervezo-app .nwt-views button {
  font-size: var(--tiny); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark); background: color-mix(in oklch, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px); border: 0; padding: 0.7rem 1.2rem; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nwt-views button[aria-pressed=true] { background: var(--hl); color: var(--on-hl); }
.nw-tervezo-app .nwt-hint {
  position: absolute; bottom: var(--gap-s); left: var(--gap-m); right: var(--gap-m);
  margin: 0; color: var(--on-dark-muted);
}
.nw-tervezo-app #nwt-loading {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-dark-muted);
  font-size: var(--tiny); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- ellenőrzés ---------- */
.nw-tervezo-app .nwt-checks { list-style: none; padding: 0; margin: 0; }
.nw-tervezo-app .nwt-checks li {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--gap-xs);
  padding: 0.6rem 0; border-bottom: 1px solid var(--ink-line); margin: 0;
}
.nwt-checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.nwt-checks li:first-child { padding-top: 0; }
.nwt-checks li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; background: var(--ok); }
.nwt-checks li.nwt-bad::before { background: var(--bad); }
.nwt-checks li.nwt-warn::before { background: var(--accent); }
.nwt-checks li.nwt-info::before { background: var(--ink-line); }
.nwt-checks li.nwt-bad { color: var(--bad); }
.nwt-checks li.nwt-info { color: var(--on-dark-muted); }

/* ---------- összeállítás: az oldal adat-táblázatának mintája ---------- */
.nw-tervezo-app .nwt-items { margin: 0; }
.nwt-items div { display: flex; justify-content: space-between; gap: var(--gap-s); padding: 0.6rem 0; border-bottom: 1px solid var(--ink-line); }
.nwt-items div:first-child { padding-top: 0; }
.nwt-items dt { color: var(--on-dark-muted); }
.nw-tervezo-app .nwt-items dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a kedvezmény az akcentus egyik kevés helye */
.nwt-items .nwt-disc dt, .nwt-items .nwt-disc dd { color: var(--accent); }
.nwt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--gap-s); }
.nwt-total span { font-size: var(--tiny); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-muted); }
.nwt-total strong { font-size: var(--step-2); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- összegző sáv a jobb panel alján ---------- */
/* Kipányvázva: az összeg és a letöltés gomb akkor is látszik, ha a tételek
   listája görgetésbe fut. Enélkül a gomb a panel aljára szorult, és csak
   azután bukkant elő, hogy a látogató végiggörgette a jobb panelt. */
.nwt-cta {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--ink);
  border-block-start: 1px solid var(--ink-line);
  padding: var(--gap-s) 0;
}
.nw-tervezo-app .nwt-cta .nwt-total { padding-top: 0; margin-block-end: var(--gap-s); }
.nw-tervezo-app .nwt-cta p { margin-block-start: var(--gap-xs); }
.nw-tervezo-app .nwt-cta button {
  width: 100%; display: flex; justify-content: center; padding: 1.05em 1.2em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--hl); background: var(--hl); color: var(--on-hl); cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate; transition: color 0.45s var(--ease);
}
.nwt-cta button::before {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); z-index: -1;
}
.nwt-cta button:hover:not(:disabled)::before,
.nwt-cta button:focus-visible:not(:disabled)::before { transform: scaleX(1); transform-origin: left; }
.nw-tervezo-app .nwt-cta button:hover:not(:disabled),
.nw-tervezo-app .nwt-cta button:focus-visible:not(:disabled) { color: var(--on-light); border-color: var(--paper); }
.nw-tervezo-app .nwt-cta button:disabled { background: transparent; color: var(--on-dark-muted); border-color: var(--ink-line); cursor: not-allowed; }
.nw-tervezo-app .nwt-cta p { color: var(--on-dark-muted); margin: var(--gap-s) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .nw-tervezo-app *,
  .nw-tervezo-app *::before { transition-duration: 0.01ms !important; }
}

/* A weboldal lebegő gombja („lap tetejére") a jobb alsó sarokban ül, ott
   viszont a kipányvázott összegző sávra, azon belül a letöltés gombra esne.
   A jelenet jobb alsó sarka üres, oda tesszük. A hasábszélességet itt ki kell
   írni: a `.nw-lebego` a `body` gyermeke, nem látja a tervező változóit. */
@media (min-width: 981px) {
  body.nw-oldal--tervezo .nw-lebego { inset-inline-end: calc(340px + var(--gap-s)); }
}

/* ---------- keskeny laptop: a paneleket szűkítjük, hogy a jelenet kapjon helyet ---------- */
@media (min-width: 981px) and (max-width: 1200px) {
  .nw-tervezo-app { --hasab-bal: 270px; --hasab-jobb: 290px; }
  body.nw-oldal--tervezo .nw-lebego { inset-inline-end: calc(290px + var(--gap-s)); }
}

/* ---------- telefon és tablet: a jelenet fölülre, a panelek alá ---------- */
@media (max-width: 980px) {
  .nw-tervezo-app {
    /* A jelenet magassága külön változó, mert a rács első sorának pontosan
       ennyinek kell lennie — lásd a kipányvázást alább. */
    --jelenet-magas: max(260px, 40svh);
    grid-template-columns: 1fr;
    grid-template-rows: var(--jelenet-magas) auto auto;
  }
  /* Egy hasáb van, a háttérfestő ál-elemek feleslegesek. */
  .nw-tervezo-app::before,
  .nw-tervezo-app::after { display: none; }

  /* A jelenet a képernyő tetejére pányvázva, a panelek alatta gördülnek el.
     Ehhez a jelenetnek mind a három sort át kell fognia (különben csak a saját
     során belül ragadna meg, vagyis sehol), de `align-self: start` és a sor
     magasságával megegyező méret miatt csak az első sort tölti ki.
     Így minden csúszkamozdulat hatása rögtön látszik, nem kell visszagörgetni. */
  .nwt-stage {
    grid-area: 1 / 1 / 4 / 2;
    block-size: var(--jelenet-magas);
    min-block-size: 0;
    z-index: 2;
    /* a vezérlők alatta gördülnek el, ezért kell egy tiszta alsó él */
    border-block-end: 1px solid var(--ink-line);
  }
  .nwt-panel {
    grid-column: 1;
    overflow: visible;
    block-size: auto;
    position: relative;
    z-index: 1;
    padding: 0 var(--pad) var(--gap-m);
  }
  .nwt-panel--bal { grid-area: 2 / 1; border-block-start: 1px solid var(--ink-line); }
  /* nyitáskor a blokk tetejére görgetünk — a kipányvázott jelenet alá */
  .nwt-blokk { scroll-margin-block-start: var(--jelenet-magas); }
  .nwt-panel--jobb { grid-area: 3 / 1; border-block-start: 1px solid var(--ink-line); }

  /* Az összegző sáv a képernyő aljára pányvázva: a letöltés gomb telefonon is
     egy mozdulatra van, nem a lap legaljára rejtve. */
  /* A weboldal lebegő gombjai (menü, lap tetejére) a jobb alsó sarokban
     ülnek, és ott is maradnak: feljebb tolva a termékválasztó gombjaira
     takarnának. Helyette a sáv tartalma húzódik be mellőlük, így a sötét sáv
     fölött állnak, de semmit nem takarnak. */
  .nwt-cta {
    position: sticky;
    inset-block-end: 0;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad) calc(var(--pad) + 4.25rem);
    z-index: 2;
  }
}

/* ============================================================
   A letölthető, nyomtatható összeállítás
   ============================================================
   A lapot a tervező a `body` végére teszi, és nyomtatás előtt
   `nw-tervezo-nyomtat` osztályt ad a `body`-nak. Így a sima
   Ctrl+P a megszokott lapot nyomtatja, a „Letöltés" gomb pedig
   csak ezt az egy lapot.
   ============================================================ */

.nwt-lap { display: none; }

@media print {
  /* a tervező lap az egyetlen hely, ahol ez a stíluslap betöltődik,
     ezért a lapméret itt bátran felülírhatja a téma beállítását */
  @page { size: A4; margin: 16mm; }

  body.nw-tervezo-nyomtat > *:not(.nwt-lap) { display: none !important; }
  body.nw-tervezo-nyomtat { background: #fff; color: #1c1a18; font-size: 10.5pt; }
  body.nw-tervezo-nyomtat .nwt-lap { display: block; font-family: var(--font); font-weight: 300; line-height: 1.6; }

  .nwt-lap-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #1c1a18; padding-bottom: 5mm; }
  /* ugyanaz a méret, mint a kinyomtatott terméklap fejlécében */
  .nwt-lap-logo { inline-size: 34mm; block-size: auto; display: block; }
  .nwt-lap-title { font-size: 7.5pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6b655e; margin-top: 2mm; }
  .nwt-lap-meta { text-align: right; font-size: 9pt; color: #6b655e; line-height: 1.6; }
  .nwt-lap-meta b { color: #1c1a18; font-weight: 500; }

  .nwt-lap-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin: 7mm 0; }
  .nwt-lap-imgs figure { margin: 0; background: #f1efeb; padding: 2mm; }
  .nwt-lap-imgs img { width: 100%; height: 62mm; object-fit: contain; display: block; }
  .nwt-lap-imgs figcaption { font-size: 7pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6b655e; text-align: center; padding: 1mm 0; }

  .nwt-lap h3 { font-size: 7.5pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6b655e; margin: 7mm 0 2.5mm; }
  .nwt-lap table { width: 100%; border-collapse: collapse; }
  .nwt-lap td { padding: 2.2mm 0; border-bottom: 0.3pt solid #d6d2cb; vertical-align: top; }
  .nwt-lap td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .nwt-lap td:first-child { color: #6b655e; width: 42%; }
  .nwt-lap .nwt-lap-items td:first-child { color: #1c1a18; width: auto; }
  .nwt-lap .nwt-lap-disc td { color: oklch(0.52 0.095 62) !important; }
  .nwt-lap .nwt-lap-total td { border-bottom: 0; border-top: 1pt solid #1c1a18; font-weight: 300; font-size: 15pt; padding-top: 3.5mm; }
  .nwt-lap-foot { margin-top: 9mm; font-size: 9pt; color: #6b655e; }
}