/*
Theme Name: NIWELL 2026
Theme URI: https://niwell.hu
Description: A niwell.hu 2026-os arculata — Flatsome gyermeksablon. A terméklap-sablon, a design-rendszer és a tartalom-szinkron ebben a témában él. A régi flatsome-child érintetlen marad, egy témaváltással bármikor visszaállítható.
Author: Niagara System
Template: flatsome
Version: 0.98.6
Text Domain: niwell-2026
*/

/* A design-rendszer az assets/css/niwell.css-ben van (a jóváhagyott prototípusból).
   Ide csak az kerül, ami a Flatsome-mal való együttéléshez kell. */

/* ============================================================
   Szekciók — nw- előtaggal, mert a Flatsome-nak is van .section
   és .dark osztálya. A szabályok az assets/css/niwell.css
   .section / .dark szabályainak párjai.
   ============================================================ */

.nw-section { padding-block: var(--gap-xl); }
.nw-section--tight { padding-block: var(--gap-l); }

.nw-section--dark { background: var(--ink); color: var(--on-dark); }
.nw-section--dark .h2 { color: var(--on-dark); }
.nw-section--dark p,
.nw-section--dark li { color: var(--on-dark-muted); }
.nw-section--dark a { color: var(--on-dark); text-underline-offset: 4px; }
.nw-section--dark .spec th { color: var(--on-dark-muted); }

/* „Melyik tálca melyik mérethez?" — a beépítés-szekció végén álló táblázat.
   A cím h3, hogy a szekció h2-je alatt maradjon; a jegyzetsorok halkabbak. */
.nw-talcak__cim { margin-block: var(--gap-l) var(--gap-s); font-size: var(--step-1); font-weight: 500; }
.nw-talcak__jegyzet { margin-block-start: var(--gap-s); font-size: var(--step--1); max-width: var(--measure); }
.nw-section--dark .nw-talcak__jegyzet { color: var(--on-dark-muted); }
.nw-section--dark .spec th,
.nw-section--dark .spec td { border-block-end-color: var(--ink-line); }

/* Címsor + törzs kétoszlopos rácson, mint a prototípusban */
.nw-split {
  display: grid;
  gap: var(--gap-l);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  align-items: start;
}

.nw-prose > :first-child { margin-block-start: 0; }
.nw-prose ul { padding-inline-start: 1.1rem; display: grid; gap: 0.6rem; }
.nw-prose li { max-width: var(--measure); }

/* A szöveges lap felvezető mondata: nagyobb, levegősebb, mint a törzs. */
.nw-szoveg-prose .nw-szoveg-lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--on-light);
  max-width: var(--measure);
}

/* Szakértő-blokk: balra az arckép, mellette a név és a bemutatkozás. */
.nw-szoveg-prose .nw-szakerto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-m);
  align-items: start;
  margin-block: var(--gap-m);
}
.nw-szoveg-prose .nw-szakerto .nw-arc { margin-block: 0; }
.nw-szoveg-prose .nw-szakerto > div > :first-child { margin-block-start: 0; }
@media (max-width: 560px) {
  .nw-szoveg-prose .nw-szakerto { grid-template-columns: 1fr; gap: var(--gap-s); }
}

/* Arckép a szövegben: ugyanaz a kör, mint a Kapcsolat csapatkártyáin. */
.nw-szoveg-prose .nw-arc {
  margin-block: var(--gap-m) var(--gap-s);
  inline-size: min(170px, 100%);
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: 50%;
  overflow: clip;
}
.nw-szoveg-prose .nw-arc img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Magyarázó ábra a szövegben (nw-abra): vonalas rajz, világos alapon.
   A width/height a markupban van, hogy betöltés közben ne ugorjon az elrendezés. */
.nw-abra { margin-block: var(--gap-l) 0; max-width: var(--measure); }
.nw-abra img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: var(--gap-s);
}
.nw-abra figcaption {
  margin-block-start: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--on-light-muted);
}
.nw-section--dark .nw-abra img { background: var(--on-dark); border-color: var(--ink-line); }
.nw-section--dark .nw-abra figcaption { color: var(--on-dark-muted); }

/* Összevető ábra: két fénykép egymás mellett, saját felirattal. A keret és a
   világos alap itt a sorra kerül, nem a képekre — különben a két kép között
   kettős szegély futna. 560 képpont alatt egymás alá: a körre vágott fotó
   alig 120 képpont széles lenne két hasábban. */
.nw-abra--ketto .nw-abra__sor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
  align-items: start;
  /* Tiszta fehér, nem --paper: a termékfotók háttere #fff, és a papírszín
     egy hajszállal sötétebb — ott a fotók fehér négyszöge kirajzolódna a
     dobozon belül. */
  background: #fff;
  border: 1px solid var(--line);
  padding: var(--gap-s);
}
.nw-abra--ketto img { border: 0; padding: 0; background: none; }
.nw-abra__cimke {
  display: block;
  margin-block-start: 0.6rem;
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--on-light-muted);
}
/* Sötét szekcióban is fehér marad a doboz, csak a kerete sötétül. */
.nw-section--dark .nw-abra--ketto .nw-abra__sor { border-color: var(--ink-line); }
@media (max-width: 560px) {
  .nw-abra--ketto .nw-abra__sor { grid-template-columns: 1fr; gap: var(--gap-m); }
}

/* ============================================================
   Terméklap-fej
   ============================================================ */

.nw-fej { padding-block-end: var(--gap-xl); }
.nw-kicker { color: var(--on-light-muted); }
.nw-sku { font-size: var(--step--1); color: var(--on-light-muted); margin-block: 0.75rem 0; }
.nw-cta { display: flex; gap: var(--gap-s); flex-wrap: wrap; margin-block-start: var(--gap-m); }
.nw-badges { margin-block-start: var(--gap-l); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nw-forras { font-size: var(--step--1); color: var(--on-light-muted); margin-block-start: var(--gap-s); }
.nw-forras a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }
.nw-forras a:hover, .nw-forras a:focus-visible { color: var(--on-light); }

.nw-kep-helye {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: var(--surface);
  border: 1px dashed var(--line);
}
.nw-kep-helye p { color: var(--on-light-muted); font-size: var(--step--1); margin: 0; }

/* A Flatsome termékoldal-kereteinek kiiktatása a saját lapunkon */
.nw-termeklap { margin: 0; }
.single-product .nw-termeklap .product-main,
.single-product .nw-termeklap .product-footer { display: none; }

/* ============================================================
   Alias-szabályok. A .badge, .gallery, .thumb és .links osztálynevet
   a Flatsome (és a WooSwipe) is használja, ezért a terméklapon
   nw- előtaggal futnak. A forrás az assets/css/niwell.css megfelelő
   szabálya — ott azért marad a régi név, mert a prototípus azt használja.
   ============================================================ */

.nw-badge {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0.5em 0.9em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
}

.nw-gallery { display: grid; gap: 0.75rem; position: sticky; top: 96px; margin: 0; }
/* `relative`, nem `static`: a görgető rögzítés elmarad, de a 3D-jelzés
   továbbra is a galéria sarkához igazodik. A `top` viszont nullázandó:
   `sticky` alatt csak a tapadás határa, `relative` alatt viszont valódi
   eltolás — e nélkül a galéria 96 képponttal lejjebb rajzolódott, mint a
   helye, és a bélyegsor rácsúszott a cím alatti szövegre. */
@media (max-width: 940px) { .nw-gallery { position: relative; top: auto; } }
.nw-gallery__main { background: var(--surface); aspect-ratio: 4 / 3; overflow: clip; }
.nw-gallery__main img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nw-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(72px, 100%), 1fr)); gap: 0.5rem; }

.nw-thumb { border: 1px solid var(--line); background: var(--surface); padding: 0; aspect-ratio: 1; cursor: pointer; overflow: clip; transition: border-color 0.35s var(--ease); }
.nw-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nw-thumb[aria-current='true'] { border-color: var(--ink); }
.nw-thumb:hover { border-color: var(--on-light-muted); }

/* ============================================================
   Kepnagyito — a termekkepre kattintva teljes meretben
   A kosar-pluginok lightboxai (wooswipe/photoswipe) a sajat lapon
   le vannak tiltva, ezert sajat, konnyu reteget hasznalunk.
   ============================================================ */

.nw-gallery__nyit {
  display: block;
  inline-size: 100%;
  border: 0;
  padding: 0;
  position: relative;
  cursor: zoom-in;
  color: var(--on-dark);
}
.nw-gallery__ikon {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--ink) 72%, transparent);
  color: var(--on-dark);
  backdrop-filter: blur(6px);
  transition: background 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
}
.nw-gallery__ikon svg { inline-size: 1.15rem; block-size: 1.15rem; display: block; }
.nw-gallery__nyit:hover .nw-gallery__ikon,
.nw-gallery__nyit:focus-visible .nw-gallery__ikon {
  background: var(--ink);
  transform: scale(1.06);
}

.nw-nagyito {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in oklch, var(--ink-deep) 94%, transparent);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s var(--ease-soft);
}
.nw-nagyito.nyitva { opacity: 1; }
.nw-nagyito[hidden] { display: none; }

.nw-nagyito__kep {
  cursor: default;
  grid-column: 2;
  justify-self: center;
  max-inline-size: 100%;
  max-block-size: 85vh;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.25s var(--ease-soft);
}
.nw-nagyito.nyitva .nw-nagyito__kep { transform: scale(1); }

.nw-nagyito__zar,
.nw-nagyito__nyil {
  border: 1px solid color-mix(in oklch, var(--on-dark) 28%, transparent);
  background: color-mix(in oklch, var(--on-dark) 8%, transparent);
  color: var(--on-dark);
  inline-size: 2.9rem;
  block-size: 2.9rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft);
}
.nw-nagyito__zar:hover,
.nw-nagyito__nyil:hover,
.nw-nagyito__zar:focus-visible,
.nw-nagyito__nyil:focus-visible {
  background: color-mix(in oklch, var(--on-dark) 18%, transparent);
  border-color: var(--on-dark);
}
.nw-nagyito__zar svg,
.nw-nagyito__nyil svg { inline-size: 1.2rem; block-size: 1.2rem; display: block; }
.nw-nagyito__zar {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
}
.nw-nagyito__nyil--elozo { grid-column: 1; }
.nw-nagyito__nyil--kovetkezo { grid-column: 3; }
.nw-nagyito__nyil[hidden] { display: none; }

/* A `body.nw-oldal p` alapszabály (0-1-1) a `--measure`-re szűkíti a
   bekezdéseket, ezért a számlálót is onnan kell kiengedni, különben nem
   a kép alatt, középen áll. */
body.nw-oldal .nw-nagyito__szam {
  position: absolute;
  inset-block-end: clamp(0.75rem, 2vw, 1.5rem);
  inset-inline: 0;
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
}

/* Bejelentkezve a WordPress admin sávja a lap tetején ül — a bezáró gomb
   kerüljön alá. */
body.admin-bar .nw-nagyito__zar {
  inset-block-start: calc(clamp(0.75rem, 2vw, 1.5rem) + 32px);
}

body.nw-nagyito-nyitva { overflow: hidden; }

/* Telefonon a nyilak a kep ala kerulnek, hogy ne szukitsek a kepet. */
@media (max-width: 640px) {
  .nw-nagyito {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    justify-items: center;
  }
  .nw-nagyito__kep { grid-column: 1; grid-row: 1; max-block-size: 72vh; }
  .nw-nagyito__nyil--elozo,
  .nw-nagyito__nyil--kovetkezo { grid-column: 1; grid-row: 2; }
  .nw-nagyito__nyil--elozo { justify-self: start; }
  .nw-nagyito__nyil--kovetkezo { justify-self: end; }
  .nw-nagyito__szam { inset-block-end: auto; inset-block-start: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nw-nagyito,
  .nw-nagyito__kep,
  .nw-gallery__ikon { transition: none; }
  .nw-nagyito__kep { transform: none; }
}

.nw-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nw-links a {
  display: inline-block; border: 1px solid var(--line); padding: 0.5em 0.95em;
  text-decoration: none; font-size: var(--step--1);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.nw-links a:hover { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.nw-links > li > a::before { content: none; }

/* A Flatsome fejléce ragadós, ezért a horgony-ugrás a fejléc alá vinné a címsort. */
.nw-section[id], #muszaki, #beepites, #letoltesek { scroll-margin-block-start: 2rem; }

/* Képernyőolvasónak szánt szöveg — a WooCommerce ezzel mondja ki az akciós
   árat („Eredeti ár: 78 000 Ft. Aktuális ár: 59 990 Ft."), miközben a látható
   ár `aria-hidden`. A szabály a szülő témából nem jött át, ezért az akciós
   lapokon az ár kétszer, egymás után jelent meg. */
.screen-reader-text {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ============================================================
   A teljes oldalvaz (single-product.php): a fejlec fix, ezert a
   tartalom tetejen helyet hagyunk neki.
   ============================================================ */

.nw-main { padding-block-start: var(--gap-m); }

/* meret-ar csempek: a prototipus .sizes/.size eleme, listaelemen */
.nw-sizes { list-style: none; margin: 0; padding: 0; }
.nw-sizes .size { cursor: default; }
/* Ahol a boltban méretenként önálló termék (és cikkszám) van, ott a csempe
   választható: a kiválasztott méret cikkszáma kerül a lapra. */
.nw-sizes .size--valaszthato { cursor: pointer; }
.nw-sizes .size--valaszthato:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nw-meret-cim { margin-block: var(--gap-m) 0.6rem; }

/* A fejlec nem ragados: elgordul, es helyette a felfele gomb jon be.
   KIVÉVE a kezdőlapot: ott a hero fölött fix, áttetsző fejléc fut, és a
   kyra.js állítja a `data-solid` értékét a görgetés szerint — így lett
   jóváhagyva a prototípusban. */
body.nw-oldal:not(.nw-oldal--kezdolap) .site-header {
  /* `relative`, nem `static`: a fejléc továbbra is elgördül, de így lesz
     pozicionálási alapja a lenyíló keresősávnak, ami az aljához igazodik. */
  position: relative;
  background: var(--paper);
  backdrop-filter: none;
  border-block-end-color: var(--line);
}

/* ============================================================
   Alapstilusok a sajat lapra, body.nw-oldal specifikussaggal.
   A Flatsome a wp_head vegen egy inline <style id="custom-css">
   blokkot ir ki, ami a sima `body` szabalyt felulirna; a
   `body.nw-oldal` viszont eros eleg hozza, !important nelkul.
   ============================================================ */

body.nw-oldal {
  margin: 0;
  background: var(--paper);
  color: var(--on-light);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.nw-oldal h1, body.nw-oldal h2, body.nw-oldal h3,
body.nw-oldal h4, body.nw-oldal h5, body.nw-oldal h6 { font-family: var(--font); }
body.nw-oldal a { color: inherit; }

/* A szövegben álló linkek látszódjanak is linknek. Két dolog nyomta el őket:
   a WordPress globális stílusa (`a:where(:not(.wp-element-button))`) leveszi az
   aláhúzást — és ez a stílus beágyazva jön, a dequeue nem fogja —, a fenti
   `body.nw-oldal a` (0-1-2) pedig elvitte a színt is, mert specifikusabb, mint a
   `.nw-section--dark a` (0-1-1). Mindkettőt itt adjuk vissza, a prózára szűkítve:
   a gombok, a kártyák, a morzsamenü és a letöltés-csipek kimaradnak. */
body.nw-oldal .nw-prose a:not(.btn),
body.nw-oldal .point a:not(.btn),
body.nw-oldal .faq a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition: text-decoration-color 0.3s var(--ease);
}
body.nw-oldal .nw-prose a:not(.btn):hover,
body.nw-oldal .nw-prose a:not(.btn):focus-visible,
body.nw-oldal .point a:not(.btn):hover,
body.nw-oldal .point a:not(.btn):focus-visible,
body.nw-oldal .faq a:not(.btn):hover,
body.nw-oldal .faq a:not(.btn):focus-visible { text-decoration-color: currentColor; }

/* Sötét szekcióban a link világosabb a törzsszövegnél, így kiemelkedik. */
body.nw-oldal .nw-section--dark .nw-prose a:not(.btn),
body.nw-oldal .nw-section--dark .point a:not(.btn),
body.nw-oldal .nw-section--dark .faq a:not(.btn) { color: var(--on-dark); }

/* A fenti `body.nw-oldal a` szabály (0-1-2) specifikusabb, mint a komponensek
   egyosztályos szabályai (0-1-0), ezért a tele gomb betűszínét itt kell
   visszaadni. FONTOS: a hovernek ugyanerre a szintre kell jönnie, különben
   egy `body.nw-oldal .btn…` szabály kiütné a `.btn:hover`-t, és a felirat
   eltűnne a besötétülő kitöltésen. */
body.nw-oldal .btn--solid { color: var(--on-dark); }
body.nw-oldal .btn:hover,
body.nw-oldal .btn:focus-visible { color: var(--btn-hover-text); }

/* A fejlécben a `.site-header[data-solid] .nav a` szabály specifikusabb, mint a
   `.btn:hover`, ezért ott a hover betűszín nem érvényesült: a kitöltés besötétült,
   a felirat viszont sötét maradt. Itt adjuk vissza, elég specifikusan. */
body.nw-oldal:not(.nw-oldal--kezdolap) .site-header .nav a.btn,
body.nw-oldal:not(.nw-oldal--kezdolap) .site-header[data-solid='true'] .nav a.btn { color: var(--on-light); }
body.nw-oldal .site-header .nav a.btn:hover,
body.nw-oldal .site-header .nav a.btn:focus-visible,
body.nw-oldal .site-header[data-solid='true'] .nav a.btn:hover,
body.nw-oldal .site-header[data-solid='true'] .nav a.btn:focus-visible { color: var(--btn-hover-text); }
body.nw-oldal img { max-width: 100%; display: block; }
body.nw-oldal p { max-width: var(--measure); }

/* A Flatsome a wp_footerbe beloveti a mobil off-canvas menujet. A hozzá tartozó
   CSS-t levettuk, ezert lathatova valt — a sajat lapunkon elrejtjuk. */
body.nw-oldal .mobile-sidebar,
body.nw-oldal .off-canvas,
body.nw-oldal .mfp-hide,
body.nw-oldal #main-menu,
body.nw-oldal .sidebar-menu { display: none !important; }

/* az ar ne legyen nagybetus a meret-csempen */
.nw-sizes .size span { text-transform: none; letter-spacing: 0.02em; }

/* ============================================================
   Logo. A width/height attributumok miatt a bongeszo a magassagot
   53px-en tartotta, mikozben a CSS csak a szelesseget allitotta —
   ettol felszelesre nyomodott. A `height: auto` oldja meg.
   A szint nem szuroval allitjuk: a mediatarbol a megfelelo
   szinvaltozat jon (sotet betu a vilagos fejlecre, feher a lablecre).
   ============================================================ */

/* A width/height attribútum miatt a logó félszélesre nyomódna — a méret
   minden lapon kell. A `filter: none` viszont csak ott, ahol a sötét betűs
   PNG a forrás; a kezdőlapon a fehér fut, azt a design-rendszer váltja. */
body.nw-oldal .site-logo,
body.nw-oldal .site-header[data-solid='true'] .site-logo {
  width: clamp(118px, 10vw, 164px);
  height: auto;
}
body.nw-oldal:not(.nw-oldal--kezdolap) .site-logo,
body.nw-oldal:not(.nw-oldal--kezdolap) .site-header[data-solid='true'] .site-logo {
  filter: none;
}

/* Kezdőlap: a fejléc a fekete hero fölött átlátszó, a kyra.js váltja a
   `data-solid` értékét. A `body.nw-oldal a { color: inherit }` alapszabály
   itt sötét betűt adna a fekete háttéren, ezért vissza kell adni a
   design-rendszer viselkedését. */
body.nw-oldal--kezdolap .site-header .nav a,
body.nw-oldal--kezdolap .site-header .nav a.btn,
body.nw-oldal--kezdolap .site-header .nw-hamb { color: var(--on-dark); }
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nav a,
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nav a.btn,
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nw-hamb { color: var(--on-light); }
body.nw-oldal--kezdolap .site-header .nav a.btn:hover,
body.nw-oldal--kezdolap .site-header .nav a.btn:focus-visible,
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nav a.btn:hover,
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nav a.btn:focus-visible { color: var(--btn-hover-text); }
body.nw-oldal .site-logo--lablec { margin-block-end: var(--gap-s); }

/* ============================================================
   Felfele gomb. Akkor jelenik meg, amikor a fejlec kigordul a
   kepbol — az IntersectionObserver a fejlecet figyeli.
   Belepo elem, ezert ease-out es rovid ido; csak transform es
   opacity mozog, hogy a GPU-n fusson.
   ============================================================ */

/* A két lebegő gomb (menü, felfelé) közös, fix helyű oszlopban ül.
   A konténer nem fog el kattintást, csak a gombok. */
.nw-lebego {
  position: fixed;
  inset-block-end: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  inset-inline-end: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  z-index: 180;
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  pointer-events: none;
}
.nw-lebego .nw-fel { pointer-events: auto; }

/* 1120 fölött a fejléc menüje elérhető, ott nem kell lebegő menügomb.
   Két osztállyal, mert a `.nw-fel` `display: grid`-je ugyanilyen erős. */
@media (min-width: 1121px) {
  .nw-lebego .nw-lebego__menu { display: none; }
}

.nw-fel {
  position: static;

  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--on-light);
  cursor: pointer;
  padding: 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
              visibility 0.2s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), color 0.3s var(--ease);
}
.nw-fel.latszik {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nw-fel:hover, .nw-fel:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-dark);
}
.nw-fel svg { inline-size: 1.1rem; block-size: 1.1rem; display: block; }

@media (prefers-reduced-motion: reduce) {
  .nw-fel { transition: none; }
}

/* ============================================================
   Letoltesek. A listat a Product Documents plugin rajzolja ki a
   sajat markupjaval; a plugin CSS-et levettuk, ezert itt oltjuk
   a design-rendszer formajaba: csoportcimek apro nagybetuvel,
   a fajlok kontuos csempeken.
   ============================================================ */

.nw-dokumentumok .woocommerce-product-documents-title { display: none; }

/* A plugin akkordionja inline `display:none`-t tesz a listakra. A szkriptjet
   levettuk, de ha barmi megis lefutna, itt is nyitva tartjuk — az inline
   stilust csak !important veri. */
.nw-dokumentumok .ui-accordion-content,
.nw-dokumentumok h3 + div { display: block !important; height: auto !important; }
.nw-dokumentumok h3 { cursor: default; }
.nw-dokumentumok .ui-accordion-header-icon { display: none; }

.nw-dokumentumok h3 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-muted);
  margin: var(--gap-m) 0 0.8rem;
}
.nw-dokumentumok > div > h3:first-child { margin-block-start: 0; }

.nw-dokumentumok ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.nw-dokumentumok li { margin: 0; }
.nw-dokumentumok a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  border: 1px solid var(--line);
  padding: 0.6em 1em;
  text-decoration: none;
  font-size: var(--step--1);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.nw-dokumentumok a:hover,
.nw-dokumentumok a:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-dark);
}
.nw-dokumentumok .kiterjesztes,
.nw-dokumentumok .file-size { color: var(--on-light-muted); font-size: 0.78em; }
.nw-dokumentumok a:hover .kiterjesztes,
.nw-dokumentumok a:hover .file-size { color: var(--on-dark-muted); }

/* ============================================================
   „Ha megsem ez az" — alternativak a Szempontok hivatkozasaibol
   ============================================================ */

.nw-alt {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.nw-alt__link {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--gap-s);
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--ink-line);
  padding: 0.75rem;
  block-size: 100%;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.nw-alt__link:hover,
.nw-alt__link:focus-visible { border-color: var(--on-dark-muted); background: var(--ink-soft); }
.nw-alt__kep {
  inline-size: 84px;
  block-size: 84px;
  object-fit: cover;
  background: var(--ink-soft);
}
.nw-alt__szoveg { display: grid; gap: 0.3rem; }
.nw-alt__nev {
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--on-dark);
  text-transform: lowercase;
}
.nw-alt__igeret {
  font-size: var(--step--1);
  color: var(--on-dark-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A felfele gomb a lablec aljara lobeg, ezert ott helyet hagyunk neki. */
body.nw-oldal .site-footer { padding-block-end: calc(var(--gap-l) + 3.5rem); }

/* ============================================================
   Kezdőlap
   A szerkezet és a látvány a jóváhagyott prototípusból jön
   (prototipus/index.html); itt csak az ott inline-ban álló
   néhány érték kap osztályt.
   ============================================================ */

/* A hero a lap tetejéről indul, a fix fejléc alatt. */
body.nw-oldal--kezdolap .nw-main { padding-block-start: 0; }

/* A hero nyitó alsora a korábbi felsorolás helyén. */
.hero__sub {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 44ch;
  margin-block: var(--gap-m) var(--gap-m);
}

.nw-kezdo-fej {
  display: grid;
  gap: var(--gap-s);
  margin-block-end: var(--gap-l);
  max-inline-size: 44ch;
}
.nw-kezdo-cim { margin-block-end: var(--gap-l); max-inline-size: 24ch; }
body.nw-oldal .nw-kezdo-lede { color: var(--on-dark); }

.nw-kezdo-ketto {
  display: grid;
  gap: var(--gap-l);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  align-items: start;
}
.nw-kezdo-ketto--kozep { align-items: center; }
.nw-kezdo-ketto .h2 { margin-block-end: var(--gap-m); }
.nw-kezdo-alcim { color: var(--on-light-muted); margin-block-start: var(--gap-s); }
.dark .nw-kezdo-alcim { color: var(--on-dark-muted); }
.nw-kezdo-kicker { color: var(--accent); margin-block-end: var(--gap-s); }
.nw-kezdo-gomb { justify-self: start; }
.nw-kezdo-tovabb { margin-block-start: var(--gap-m); }

/* ============================================================
   Kategórialap
   Modellenként egy kártya, nem termékenként.
   ============================================================ */

.nw-kat-fej { padding-block: 0 var(--gap-l); }
.nw-kat-cimke { color: var(--on-light-muted); margin-block: var(--gap-m) 0.6rem; }

.nw-kat-cim {
  font-size: var(--step-3);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-transform: lowercase;
}

.nw-kat-bev { margin-block-start: var(--gap-m); max-width: 62ch; }

.nw-kat-alkat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--gap-m);
}
body.nw-oldal .nw-kat-alkat a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--line);
  padding: 0.5em 0.95em;
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
body.nw-oldal .nw-kat-alkat a:hover,
body.nw-oldal .nw-kat-alkat a:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-dark);
}
.nw-kat-alkat a span { color: var(--on-light-muted); font-variant-numeric: tabular-nums; }
body.nw-oldal .nw-kat-alkat a:hover span { color: var(--on-dark-muted); }

/* Méretszűrő a kategórialapon — a csipeszek az alkategória-gombok nyelvén.
   A kategóriafejléc világos, ezért a kiválasztott csipesz sötét alapon fehér. */
.nw-szuro { margin-block-start: var(--gap-m); display: grid; gap: 0.6rem; }
.nw-szuro__cim { margin: 0; color: var(--on-light-muted); }
.nw-szuro__csipeszek { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* A márkalapon a méretek termékfajta szerint, csoportonként külön sorban: a
   „80" a zuhanyajtó szélessége, a „80×80" a kabin alapterülete — egy sorban
   nem derülne ki, melyik mire vonatkozik. */
/* ===== N-smart megjelenés =====
   A NIWELL arculata sötét és filmes; az N-smart saját katalógusa végig
   világos, fehér és levegős, a modellnév kisbetűs félkövér, alatta szürkén a
   termékfajta, a logó pedig a név fölött áll. A terméklap ezt követi, hogy a
   két márka első pillantásra elváljon. */
body.nw-oldal--nsmart { background: #fff; }
body.nw-oldal--nsmart .nw-bolti-rola { background: #fff; }

/* A logó fehér rajz átlátszó háttéren, ezért világos felületen feketére
   váltjuk — ugyanúgy, ahogy a NIWELL-logó is dolgozik a fejlécben. */
.nw-nsmart-logo {
  display: inline-block;
  inline-size: clamp(116px, 11vw, 150px);
  margin-block-end: var(--gap-s);
}
.nw-nsmart-logo img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  filter: brightness(0);
}

/* A modellnév a katalógus szerint kisbetűs, de testes — nem a NIWELL vékony,
   tág címsora. */
.nw-termeklap--nsmart .product-name {
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: -0.012em;
  line-height: 1.05;
}
/* A bolti leírás képei kivágás nélküli, tiszta fehér hátterű termékfotók és
   méretrajzok, a lap háttere viszont enyhén meleg törtfehér (`--paper`) — így a
   képek világosabb téglalapként ütnek el. A szekció ezért tiszta fehér felületet
   kap, hogy a képek pereme ne látszódjon. */
.nw-bolti-rola { background: #fff; }

/* A bolti leírás Gutenberg-tartalom: saját oszlopai és képei vannak, a
   blokk-könyvtár CSS-ét viszont a saját lapjainkon nem töltjük be, ezért az
   oszlopok egymás alá esnének össze. Csak azt a néhány osztályt adjuk meg,
   ami ezekben a leírásokban tényleg előfordul. */
.nw-bolti-prose .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
  align-items: flex-start;
  margin-block: var(--gap-m);
}
.nw-bolti-prose .wp-block-column { flex: 1 1 18rem; min-inline-size: 0; }
.nw-bolti-prose .wp-block-column.is-vertically-aligned-center { align-self: center; }
.nw-bolti-prose .wp-block-column.is-vertically-aligned-top { align-self: flex-start; }
.nw-bolti-prose .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }
.nw-bolti-prose img { max-inline-size: 100%; block-size: auto; display: block; }
.nw-bolti-prose figure { margin: 0; }
/* A szöveg olvasható szélességű marad, az oszlopba tett szöveg viszont a
   saját hasábját tölti ki. */
.nw-bolti-prose > p { max-inline-size: var(--measure); }

/* A bolti lap fejében a rövid leírás alapadata — soronként tördelve. */
.nw-bolti-spec { white-space: normal; }

/* „Együtt olcsóbb": a tény és a link, ár nélkül. */
.nw-bolti-egyutt {
  margin-block: var(--gap-s) 0;
  font-size: var(--step--1);
  color: var(--on-light-muted);
  max-inline-size: 46ch;
}

/* Alapadatok a fej alján, ahogy a régi lapon is álltak: felirat és érték
   párban, vékony elválasztókkal. */
.nw-bolti-meta {
  margin-block: var(--gap-m) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 1.2rem;
  font-size: var(--step--1);
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--gap-s);
}
.nw-bolti-meta dt { color: var(--on-light-muted); }
.nw-bolti-meta dd { margin: 0; }

/* A bolti adatból épülő terméklap ára. A rekordos lapon az ár a műszaki
   táblában áll, itt viszont a bolt az egyetlen forrás. */
.nw-bolti-ar {
  margin-block: var(--gap-s) 0;
  font-size: var(--step-1);
  font-weight: 300;
}
.nw-bolti-ar del { opacity: 0.5; font-size: var(--step-0); margin-inline-end: 0.5rem; }
.nw-bolti-ar ins { text-decoration: none; }

/* A vásárlási út gombja a bolti lapon (a rekordos lapon a `.nw-cta` sorban áll). */
.nw-bolti-cta { margin-block: var(--gap-m) 0; max-inline-size: none; }

.nw-szuro--csoportos { gap: 0.9rem; }
.nw-szuro__csoport { display: grid; gap: 0.45rem; }
.nw-szuro__csoportnev {
  margin: 0;
  font-size: var(--step--1);
  color: var(--on-light-muted);
}
body.nw-oldal .nw-szuro__btn {
  font: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 0.5em 0.95em;
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
body.nw-oldal .nw-szuro__btn span { color: var(--on-light-muted); font-variant-numeric: tabular-nums; }
body.nw-oldal .nw-szuro__btn:hover { border-color: var(--on-light-muted); }
body.nw-oldal .nw-szuro__btn[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
body.nw-oldal .nw-szuro__btn[aria-pressed='true'] span { color: var(--on-dark-muted); }

.nw-szuro__ures { color: var(--on-light-muted); margin-block: 0 var(--gap-m); }

/* Üres kategória: a rács helyett egy soros eligazítás. */
.nw-kat-ures { color: var(--on-light-muted); margin-block: 0 var(--gap-l); }
.nw-kat-ures a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }
.nw-kat-ures a:hover { color: var(--ink); }
.nw-kat-elem[hidden] { display: none; }

.nw-kat-racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-l) var(--gap-m);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

.nw-kat-kartya {
  display: grid;
  gap: var(--gap-s);
  align-content: start;
  block-size: 100%;
  text-decoration: none;
}
.nw-kat-kartya__kep {
  display: block;
  /* A bolti termékfotók 510×600-as álló képek (a szabadonálló kádaknál montázs:
     fent az enteriőr, alatta a stúdiófelvétel). A korábbi 3:2-es kivágás a kép
     alsó 43%-át levágta — vele a kád nagyobbik felét. A doboz ezért a forrás
     arányát veszi fel: így semmi nem vágódik le. */
  aspect-ratio: 17 / 20;
  background: var(--surface);
  overflow: clip;
}
.nw-kat-kartya__kep img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}
.nw-kat-kartya:hover .nw-kat-kartya__kep img,
.nw-kat-kartya:focus-visible .nw-kat-kartya__kep img { transform: scale(1.04); }

.nw-kat-kartya__nev {
  font-size: var(--step-0);
  font-weight: 500;
  text-transform: lowercase;
  line-height: 1.25;
}
.nw-kat-tudastar .h3 { color: var(--on-dark); }

/* ============================================================
   Viszonteladói szalag a menüsor fölött
   A kezdőlapon a fejléc fix, ezért ott a szalag is fix, és a
   fejléc annyival lejjebb kezdődik, amennyi a szalag magassága.
   A kyra.js a fejléc alsó élét méri, az magától követi.
   ============================================================ */

:root { --nw-szalag-h: 2.4rem; }

.nw-szalag {
  display: flex;
  align-items: center;
  /* Asztalon jobbra, a fejléc gombjaival egy oszlopban; telefonon középen. */
  justify-content: flex-end;
  gap: var(--gap-s) var(--gap-m);
  flex-wrap: wrap;
  block-size: var(--nw-szalag-h);
  padding-inline: var(--pad);
  background: var(--ink-deep);
  color: var(--on-dark-muted);
  border-block-end: 1px solid var(--ink-line);
  font-size: var(--step--1);
}
body.nw-oldal .nw-szalag__link {
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-block-end: 1px solid color-mix(in oklch, var(--on-dark) 35%, transparent);
  padding-block-end: 0.1em;
  transition: border-color 0.3s var(--ease);
}
body.nw-oldal .nw-szalag__link:hover,
body.nw-oldal .nw-szalag__link:focus-visible { border-block-end-color: var(--on-dark); }

/* Kezdőlap: fix fejléc, tehát a szalag is fix, a fejléc pedig alatta kezdődik. */
body.nw-oldal--kezdolap .nw-szalag {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-header) + 1);
}
body.nw-oldal--kezdolap .site-header { inset-block-start: var(--nw-szalag-h); }

/* Bejelentkezve a WordPress admin sávja is a lap tetején ül. */
body.admin-bar.nw-oldal--kezdolap .nw-szalag { inset-block-start: 32px; }
body.admin-bar.nw-oldal--kezdolap .site-header { inset-block-start: calc(var(--nw-szalag-h) + 32px); }
@media (max-width: 782px) {
  body.admin-bar.nw-oldal--kezdolap .nw-szalag { inset-block-start: 46px; }
  body.admin-bar.nw-oldal--kezdolap .site-header { inset-block-start: calc(var(--nw-szalag-h) + 46px); }
}

/* A Kapcsolat a szalagba került, mert a menüsorba öt kategória jött. Gomb
   maradt, a megszokott szögletes kerettel: sima linkként elveszett a
   partner-felhívás mellett (Alexandra, 2026-11-03). A belső margó szűkebb a
   megszokottnál, mert a szalag magassága kötött: a kezdőlap fix fejléce pont
   `--nw-szalag-h` értékkel kerül lejjebb, tehát a sáv nem nőhet meg. */
body.nw-oldal .nw-szalag__gomb {
  padding: 0.5em 1.2em;
  line-height: 1.1;
  color: var(--on-dark);
  --btn-fill: var(--paper);
  --btn-hover-text: var(--ink);
}

/* 700 px alatt a szalag középre zár egyetlen sorban, és ott a teljes képernyős
   menü alján áll a Kapcsolat gomb — ezért itt elmarad. */
@media (max-width: 700px) {
  .nw-szalag { justify-content: center; }
  .nw-szalag__gomb { display: none; }
}

@media print { .nw-szalag { display: none !important; } }

/* ============================================================
   Mobil menü — hamburger és teljes képernyős lap
   A fejléc 1120 px alatt csak a logót és a hamburger-gombot mutatja;
   a menüpontok ide kerülnek, a főmenü alpontjaival együtt.
   ============================================================ */

.nw-hamb {
  display: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
@media (max-width: 1120px) { .nw-hamb { display: flex; } }

.nw-hamb__vonal {
  inline-size: 1.35rem;
  block-size: 1px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nw-hamb:hover .nw-hamb__vonal:first-child { transform: translateX(-2px); }
.nw-hamb:hover .nw-hamb__vonal:last-child { transform: translateX(2px); }

body.nw-oldal:not(.nw-oldal--kezdolap) .site-header .nw-hamb { color: var(--on-light); }

.nw-menu {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.2s var(--ease-soft);
}
.nw-menu.nyitva { opacity: 1; }
.nw-menu[hidden] { display: none; }

.nw-menu__fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: clamp(0.9rem, 0.5rem + 1.2vw, 1.6rem) var(--pad);
  border-block-end: 1px solid var(--ink-line);
}
body.nw-oldal .site-logo--menu { filter: none; inline-size: clamp(104px, 9vw, 148px); }

.nw-menu__zar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-line);
  background: none;
  color: var(--on-dark);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nw-menu__zar:hover, .nw-menu__zar:focus-visible {
  border-color: var(--on-dark);
  background: var(--ink-soft);
}
.nw-menu__zar svg { inline-size: 1.2rem; block-size: 1.2rem; display: block; }

.nw-menu__tartalom {
  flex: 1;
  padding: var(--gap-l) var(--pad) var(--gap-xl);
  transform: translateY(8px);
  transition: transform 0.25s var(--ease-soft);
}
.nw-menu.nyitva .nw-menu__tartalom { transform: none; }

.nw-menu__lista { list-style: none; margin: 0; padding: 0; }
.nw-menu__lista > li { border-block-end: 1px solid var(--ink-line); padding-block: var(--gap-s); }
.nw-menu__lista > li:first-child { padding-block-start: 0; }

body.nw-oldal .nw-menu__fo {
  display: block;
  color: var(--on-dark);
  text-decoration: none;
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nw-menu__al {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}
body.nw-oldal .nw-menu__al a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--step--1);
}
body.nw-oldal .nw-menu__al a:hover,
body.nw-oldal .nw-menu__al a:focus-visible {
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nw-menu__kapcsolat { margin-block-start: var(--gap-l); }

body.nw-menu-nyitva { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nw-menu, .nw-menu__tartalom, .nw-hamb__vonal { transition: none; }
  .nw-menu__tartalom { transform: none; }
}

/* A menü nyomtatásban soha nem kell. */
@media print { .nw-menu, .nw-lebego { display: none !important; } }

/* ============================================================
   Tudásbázis (útmutató) lapok
   Szándékosan más, mint a terméklap: sötét fejléc, tartalomjegyzék,
   folyó olvasószöveg — a vevő érezze, hogy ez másik hely.
   ============================================================ */

/* A sötét fejléc rögtön a fejlécsáv alatt kezdődjön, ne maradjon fehér csík. */
body.nw-oldal--utmutato .nw-main { padding-block-start: 0; }

.nw-utm-fej { padding-block: var(--gap-l) var(--gap-xl); }
.nw-utm-fej .crumb { color: var(--on-dark-muted); padding-block-start: 0; }
.nw-utm-fej .crumb a,
.nw-utm-fej .crumb span { color: var(--on-dark-muted); }
.nw-utm-fej .crumb a:hover { color: var(--on-dark); }

.nw-utm-cimke { color: var(--on-dark-muted); margin-block: var(--gap-m) 0.6rem; }

.nw-utm-cim {
  font-size: var(--step-3);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
}

.nw-utm-cim--gyujto { margin-block-start: var(--gap-m); }
.nw-utm-bev { margin-block-start: var(--gap-m); }
.nw-utm-bev p {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-dark-muted);
  max-width: 58ch;
}
.nw-utm-bev p:last-child { margin-block-end: 0; }
body.nw-oldal .nw-utm-bev a:not(.btn) { color: var(--on-dark); }

/* Tartalomjegyzék */
.nw-tj {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  padding-block: var(--gap-m);
}
.nw-tj .label { color: var(--on-light-muted); margin-block-end: 0.8rem; }
.nw-tj__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tj;
  display: grid;
  gap: 0.45rem var(--gap-m);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.nw-tj__lista li { counter-increment: tj; }
.nw-tj__lista a {
  display: inline-flex;
  gap: 0.6rem;
  text-decoration: none;
  font-size: var(--step-0);
  color: var(--on-light);
}
.nw-tj__lista a::before {
  content: counter(tj, decimal-leading-zero);
  color: var(--on-light-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.nw-tj__lista a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Szekciók: hajszálvonallal elválasztva, nem váltakozó sötét sávokkal —
   hosszú olvasószöveghez ez nyugodtabb. */
.nw-utm-szek {
  padding-block: var(--gap-l);
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: 1.5rem;
}
.nw-utm-szek:first-of-type { border-block-start: 0; }
.nw-utm-szek .h3 { font-weight: 300; }

/* Kombinációs méretválasztó: két csempesor + az eredmény.
   A kabin két üvegből áll, ezért nem egy kész méretet választunk, hanem a
   két elemet — az eredménysor mutatja, mi jön ki belőle. */
.nw-komb__sor { margin-block-end: var(--gap-m); }
.nw-komb__eredmeny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin-block: var(--gap-m) 0;
  padding-block-start: var(--gap-s);
  border-block-start: 1px solid var(--line);
}
.nw-komb__eredmeny .label { flex-basis: 100%; color: var(--on-light-muted); }
.nw-komb__eredmeny b { font-size: var(--step-1); font-weight: 400; }
.nw-komb__eredmeny span:not(.label) { color: var(--on-light-muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   Üzlet lap (woocommerce/archive-product.php)
   ============================================================ */

/* Kategóriánként egy blokk, hajszálvonallal elválasztva — ugyanaz a nyugodt
   tagolás, mint az útmutatóknál, nem váltakozó sötét sávok. */
.nw-uzlet-blokk { border-block-start: 1px solid var(--line); scroll-margin-block-start: 1.5rem; }
.nw-uzlet-blokk:first-of-type { border-block-start: 0; }

/* A kategória neve és a modellszám egy sorban, töréskor egymás alatt. */
.nw-uzlet-fej {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem var(--gap-m);
  margin-block-end: var(--gap-m);
}
.nw-uzlet-fej .h3 { font-weight: 300; }
body.nw-oldal .nw-uzlet-fej .h3 a { color: inherit; text-decoration: none; }
body.nw-oldal .nw-uzlet-fej .h3 a:hover,
body.nw-oldal .nw-uzlet-fej .h3 a:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.nw-uzlet-db { color: var(--on-light-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; margin: 0; }

/* Az alkategória-csipeszek a kategórialapról jönnek; itt csak a térköz más. */
.nw-uzlet-blokk .nw-kat-alkat { margin-block-end: var(--gap-m); }

/* A hat kategória a lap tetején, ikonos csempén.
   Csipeszekkel kezdtük, de közvetlenül alattuk a Kád blokk saját
   alkategória-csipeszei állnak: azonos súly, azonos forma, a kettő
   összemosódott. A csempe más regiszter, ezért elválik, és egy sorban
   megmutatja, hogy a lapon hat kategória van, nem csak kádak.
   Fotó nincs rajta — a kezdőlapi csempék nyelvén, csak tömörebben. */
.nw-uzlet-attekinto {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-start: var(--gap-l);
}
@media (max-width: 1040px) { .nw-uzlet-attekinto { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .nw-uzlet-attekinto { grid-template-columns: repeat(2, 1fr); } }

body.nw-oldal .nw-uzlet-csempe {
  background: var(--paper);
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.15rem 1rem 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.nw-uzlet-csempe__ikon { color: var(--on-light-muted); transition: color 0.4s var(--ease); }
.nw-uzlet-csempe__ikon svg { display: block; inline-size: 38px; block-size: auto; }
.nw-uzlet-csempe__nev { font-size: var(--step-0); line-height: 1.15; overflow-wrap: anywhere; }
.nw-uzlet-csempe__db {
  font-size: var(--step--1);
  color: var(--on-light-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
body.nw-oldal .nw-uzlet-csempe:hover,
body.nw-oldal .nw-uzlet-csempe:focus-visible { background: var(--ink); color: var(--on-dark); }
body.nw-oldal .nw-uzlet-csempe:hover .nw-uzlet-csempe__ikon,
body.nw-oldal .nw-uzlet-csempe:focus-visible .nw-uzlet-csempe__ikon,
body.nw-oldal .nw-uzlet-csempe:hover .nw-uzlet-csempe__db,
body.nw-oldal .nw-uzlet-csempe:focus-visible .nw-uzlet-csempe__db { color: var(--on-dark-muted); }

.nw-uzlet-tovabb { margin-block: var(--gap-m) 0; }

/* Telefonon a kártyák egymás alá kerülnek, nyolc darab kategóriánként túl
   hosszú lapot adna — ott négy az ízelítő, a többit a kategórialap mutatja. */
@media (max-width: 700px) {
  .nw-uzlet-blokk .nw-kat-elem:nth-child(n + 5) { display: none; }
}
body.nw-oldal .nw-uzlet-tovabb a {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.3rem;
}
body.nw-oldal .nw-uzlet-tovabb a:hover,
body.nw-oldal .nw-uzlet-tovabb a:focus-visible { border-block-end-color: currentColor; }

/* „Minden termék” a kezdőlapi kínálat-csempék alatt: ugyanaz a diszkrét
   tovább-link, mint az Üzlet lap kategória-blokkjaiban. */
.nw-kezdo-mind { margin-block-start: var(--gap-m); }
body.nw-oldal .nw-kezdo-mind a {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.3rem;
}
body.nw-oldal .nw-kezdo-mind a:hover,
body.nw-oldal .nw-kezdo-mind a:focus-visible { border-block-end-color: currentColor; }

/* ============================================================
   Kereső, találati lap, 404
   ============================================================ */

/* A keresett kifejezés a látogató saját szövege — azt nem írjuk át kisbetűsre,
   ahogy a kategórianeveket igen. */
.nw-kereses .nw-kat-cim { text-transform: none; }

/* A márkalap címe márkanév, nem kategórianév: a kisbetűsítés „N-smart"-ból
   „n-smart"-ot, a NIWELL-ből „niwell"-t csinálna. */
.nw-oldal--marka .nw-kat-cim { text-transform: none; }

.nw-kereso { margin-block-start: var(--gap-m); max-inline-size: 36rem; }
.nw-kereso__cimke { display: block; color: var(--on-light-muted); margin-block-end: 0.6rem; }
.nw-kereso__sor { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
.nw-kereso__mezo {
  flex: 1 1 14rem;
  min-inline-size: 0;
  font: inherit;
  font-size: var(--step-0);
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.nw-kereso__mezo::placeholder { color: var(--on-light-muted); }
.nw-kereso__mezo:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nw-kereso__gomb { flex: 0 0 auto; }

/* Csak képernyőolvasónak: a fejléc sávjában a helykitöltő mondja el, mit
   lehet beírni, a címke viszont nem maradhat el. */
.nw-csak-olvaso {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Kereső a fejlécben
   A menüsorba nagyító kerül; a sáv a fejléc alatt nyílik le, teljes
   szélességben. A sáv a fejléc gyereke, az aljához igazítva, így a
   rögzített fejléccel együtt mozog, és a szalag magasságát sem kell
   ismerni. 1120 px alatt a hamburger menüben van a kereső.
   ============================================================ */

.nw-kereso-gomb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}
.nw-kereso-gomb svg { inline-size: 1.25rem; block-size: 1.25rem; display: block; }
.nw-kereso-gomb:hover { opacity: 0.6; }
@media (max-width: 1120px) { .nw-kereso-gomb { display: none; } }

/* A nagyító ugyanúgy váltson színt, mint a hamburger: a kezdőlap hősképén
   fehér, letapadt fejlécen és a többi lapon sötét. */
.nw-kereso-gomb { color: var(--on-dark); }
body.nw-oldal--kezdolap .site-header[data-solid='true'] .nw-kereso-gomb,
body.nw-oldal:not(.nw-oldal--kezdolap) .site-header .nw-kereso-gomb { color: var(--on-light); }

.nw-fejkereso {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  padding: var(--gap-m) var(--pad);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.nw-fejkereso.nyitva { opacity: 1; transform: none; }

.nw-fejkereso__belso {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  max-inline-size: var(--shell, 1440px);
  margin-inline: auto;
}
.nw-fejkereso .nw-kereso { margin-block: 0; max-inline-size: none; flex: 1 1 auto; }
.nw-fejkereso__zar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-light-muted);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.nw-fejkereso__zar svg { inline-size: 1.15rem; block-size: 1.15rem; display: block; }
.nw-fejkereso__zar:hover { color: var(--on-light); }

@media (prefers-reduced-motion: reduce) {
  .nw-fejkereso { transition: none; }
}

/* A mobil menü sötét, ott a mező is sötéten áll. */
.nw-menu .nw-kereso { margin-block: 0 var(--gap-m); max-inline-size: none; }
.nw-menu .nw-kereso__cimke { color: var(--on-dark-muted); }
.nw-menu .nw-kereso__mezo { border-color: var(--ink-line); color: var(--on-dark); }
.nw-menu .nw-kereso__mezo::placeholder { color: var(--on-dark-muted); }

/* A találati lap szöveges kártyái világos háttéren állnak — az alapszínek
   a sötét szekciókra készültek, ezért itt visszavesszük őket. */
.nw-kereses .nw-alt__link { border-color: var(--line); }
.nw-kereses .nw-alt__link:hover,
.nw-kereses .nw-alt__link:focus-visible { border-color: currentColor; background: var(--surface); }
.nw-kereses .nw-alt__nev { color: inherit; }
.nw-kereses .nw-alt__igeret { color: var(--on-light-muted); }
.nw-talalat-cimke { color: var(--on-light-muted); }

.nw-talalat-magyarazat { color: var(--on-light-muted); font-size: var(--step--1); margin-block: 0 var(--gap-s); }
.nw-talalat-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.nw-talalat-lista a { font-size: var(--step--1); }

/* „Hova tovább” — a keresés és a 404 közös kijárata. */
.nw-utak-cim { margin-block-end: var(--gap-m); }
.nw-utak {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.nw-utak__link {
  display: grid;
  gap: 0.35rem;
  text-decoration: none;
  border: 1px solid var(--ink-line);
  padding: var(--gap-s);
  block-size: 100%;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.nw-utak__link:hover,
.nw-utak__link:focus-visible { border-color: var(--on-dark-muted); background: var(--ink-soft); }
.nw-utak__nev { font-weight: 500; font-size: var(--step-0); color: var(--on-dark); }
.nw-utak__alcim { font-size: var(--step--1); color: var(--on-dark-muted); line-height: 1.5; }
.nw-utak__nyil { color: var(--on-dark-muted); }

/* A lábléc jogi sora: a linkek pontokkal elválasztva, töréskor is olvashatón. */
.foot-jogi { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.foot-jogi span { color: var(--on-dark-muted); }

/* ============================================================
   Szöveges lap (page-szoveg.php) — bizalmi és jogi lapok
   ============================================================ */

/* A jogi lapokon a módosítás dátuma a cím alatt áll, halkan. */
.nw-szoveg-datum {
  color: var(--on-dark-muted);
  font-size: var(--step--1);
  margin-block: var(--gap-m) 0;
}

/* A törzs egyetlen hasáb: a hosszú szöveget a `--measure` tartja olvashatón,
   a szakaszcímek pedig hajszálvonallal tagolják, mint az útmutatóknál. */
/* A szakaszok közt levegő választ, nem vonal: a választóvonal a szöveg
   mérete helyett a teljes oszlopot érte el, és üresen lógott a sorok mellett. */
.nw-szoveg-prose > h2 {
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.25;
  max-width: var(--measure);
  margin-block: var(--gap-xl) var(--gap-s);
  scroll-margin-block-start: 1.5rem;
  text-wrap: balance;
}
.nw-szoveg-prose > h2:first-child { margin-block-start: 0; }
.nw-szoveg-prose > h3 {
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.3;
  max-width: var(--measure);
  margin-block: var(--gap-m) 0.6rem;
}
.nw-szoveg-prose > ol { padding-inline-start: 1.3rem; display: grid; gap: 0.6rem; }
.nw-szoveg-prose > ol li { max-width: var(--measure); }

/* A hosszú jogi szövegben a táblázat is előfordul (pl. adatkezelési célok). */
.nw-szoveg-prose table { inline-size: 100%; border-collapse: collapse; margin-block: var(--gap-m); }
.nw-szoveg-prose th,
.nw-szoveg-prose td {
  text-align: start;
  vertical-align: top;
  padding: 0.65rem 0.9rem 0.65rem 0;
  border-block-end: 1px solid var(--line);
  font-size: var(--step--1);
}

/* Kapcsolódó útmutatók: ugyanaz a kártya, mint az alternatíváknál, kép nélkül */
.nw-alt__link--szoveg { grid-template-columns: 1fr; padding: var(--gap-s); }
.nw-alt__link--szoveg .nw-alt__nev { text-transform: none; }

/* Léptető: előző útmutató · teljes tudástár · következő útmutató */
.nw-utm-lepteto { padding-block: var(--gap-l); }
.nw-lepteto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap-m);
  align-items: center;
}
.nw-lepteto__elem {
  display: grid;
  gap: 0.25rem;
  text-decoration: none;
  max-width: 28ch;
}
.nw-lepteto__elem .label { color: var(--on-light-muted); }
.nw-lepteto__elem b {
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.35;
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.15rem;
  transition: border-color 0.3s var(--ease);
}
.nw-lepteto__elem:hover b,
.nw-lepteto__elem:focus-visible b { border-block-end-color: var(--ink); }
.nw-lepteto__elem--kovetkezo { justify-self: end; text-align: end; }
.nw-lepteto__gomb { white-space: nowrap; }

@media (max-width: 760px) {
  .nw-lepteto {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--gap-s);
  }
  .nw-lepteto__elem--kovetkezo { justify-self: start; text-align: start; }
  .nw-lepteto__gomb { order: 3; margin-block-start: var(--gap-xs); }
}

/* Tudástár kezdőlap: kártyarács témánként */
.nw-utm-racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.nw-utm-kartya {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  block-size: 100%;
  padding: var(--gap-s);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.nw-utm-kartya:hover,
.nw-utm-kartya:focus-visible { border-color: var(--ink); background: var(--surface); }
.nw-utm-kartya__nev { font-weight: 500; font-size: var(--step-0); }
.nw-utm-kartya__sug {
  font-size: var(--step--1);
  color: var(--on-light-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Kapcsolat lap
   Három elérhetőség-kártya, a csapat, a térkép és a céges adatok.
   A sötét fejléc és a partner-szekció a Tudástár, illetve a
   kezdőlap meglévő szabályait használja.
   ============================================================ */

.nw-kapcs-cim { margin-block: 0 var(--gap-m); }

.nw-kapcs-racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-m);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.nw-kapcs-kartya {
  background: var(--surface);
  padding: var(--gap-m);
  display: grid;
  gap: 0.45rem;
  align-content: start;
}
.nw-kapcs-kartya .label { color: var(--on-light-muted); margin: 0; }

.nw-kapcs-fo {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.3;
  /* A terméklap `body.nw-oldal p` szabálya 68ch-ra szorítja a bekezdést —
     a kártyán ez fölösleges, és középre tolná a rövid sorokat. */
  max-inline-size: none;
}
.nw-kapcs-fo a { color: inherit; text-decoration: none; }
.nw-kapcs-fo a:hover,
.nw-kapcs-fo a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.nw-kapcs-fo--cim { font-size: var(--step-0); }

.nw-kapcs-mit {
  display: block;
  font-size: var(--step--1);
  color: var(--on-light-muted);
}

.nw-kapcs-alatt {
  margin: 0;
  font-size: var(--step--1);
  color: var(--on-light-muted);
  max-inline-size: none;
}

/* Munkatársak */
.nw-csapat-racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-l) var(--gap-m);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.nw-csapat-elem { display: grid; gap: 0.3rem; align-content: start; }

.nw-csapat-kep {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border-radius: 50%;
  overflow: clip;
  inline-size: min(170px, 100%);
  margin-block-end: var(--gap-s);
}
.nw-csapat-kep img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Fénykép nélküli munkatárs: monogram ugyanabban a körben, halkan. */
.nw-csapat-kep--monogram {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--on-light-muted);
  font-size: var(--step-2);
  font-weight: 200;
  letter-spacing: 0.02em;
}

.nw-csapat-nev {
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.3;
  /* Két sor helyét minden névnek fenntartjuk, különben a hosszabb nevek
     („Pivnyik-Kupás Alexandra") elcsúsztatják alattuk a beosztást. */
  min-block-size: 2.6em;
}
.nw-csapat-mit { font-size: var(--step--1); color: var(--on-light-muted); }

/* Térkép */
.nw-terkep {
  aspect-ratio: 16 / 7;
  background: var(--surface);
  overflow: clip;
}
.nw-terkep iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .nw-terkep { aspect-ratio: 4 / 3; }
}

/* Telephelyek: térkép + adatok párban, kettő egymás mellett. */
.nw-telephely-racs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-l) var(--gap-m);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.nw-telephely { display: grid; gap: var(--gap-s); align-content: start; }
.nw-telephely .nw-terkep { aspect-ratio: 4 / 3; }
.nw-telephely__adat { display: grid; gap: 0.35rem; }
.nw-telephely__adat .label { color: var(--on-light-muted); margin: 0; }
.nw-telephely__nev { margin: 0; }

/* Kivitelválasztó a terméklap fejében (balos/jobbos). */
.nw-kivitel { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 0.2rem 0.5rem; }
.nw-kivitel__btn {
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  background: transparent;
  color: inherit;
  border: 1px solid var(--ink-line, currentColor);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nw-kivitel__btn:hover { border-color: currentColor; }
.nw-kivitel__btn[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
.nw-kivitel__sug {
  margin: 0;
  font-size: var(--step--1);
  color: var(--on-light-muted);
  max-inline-size: 46ch;
}
.nw-kivitel__sug a { color: inherit; }

/* Kivitel-ábra: a balos állás a rajz alapállapota, a jobbos a tükörképe.
   A feliratot nem tükrözzük, azt a szkript írja át. */
.nw-kivitel-abra { margin: 0 0 var(--gap-s); max-inline-size: 22rem; }
.nw-kivitel-abra img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: var(--gap-s);
  transition: transform 0.35s var(--ease);
}
.nw-kivitel-abra[data-oldal='jobb'] img { transform: scaleX(-1); }
.nw-kivitel-abra figcaption {
  margin-block-start: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--on-light-muted);
  max-inline-size: 42ch;
}
.nw-kivitel-abra figcaption b { font-weight: 600; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .nw-kivitel-abra img { transition: none; }
}

/* Katalóguslap: borító + letöltés. */
.nw-kiadvany-racs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-l); }
.nw-kiadvany {
  display: grid;
  gap: var(--gap-m);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 760px) {
  .nw-kiadvany { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--gap-l); }
}
.nw-kiadvany__kep { display: block; background: var(--surface); overflow: clip; }
.nw-kiadvany__kep img { display: block; inline-size: 100%; block-size: auto; }
.nw-kiadvany__adat { display: grid; gap: 0.6rem; align-content: start; }
.nw-kiadvany__nev { margin: 0; }
.nw-kiadvany__mit { margin: 0; }

.nw-kapcs-ceg { max-inline-size: 520px; }

/* A szalag és a kezdőlap gombja a #partner horgonyra visz. */
.nw-kapcsolat #partner,
.nw-kapcsolat #csapat { scroll-margin-block-start: var(--gap-m); }

@media print {
  .nw-terkep { display: none !important; }
}


/* ============================================================
   Kapcsolati űrlap (inc/urlap.php)
   Balra a rövid bevezető és a telefonszám, jobbra a doboz az
   űrlappal. A mezők négyzetes sarokkal, világos lapon — a Flatsome
   saját input-stílusát attribútum-választóval írjuk felül, hogy a
   lap többi része érintetlen maradjon.
   ============================================================ */

.nw-urlap-keret {
  display: grid;
  gap: var(--gap-l);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 900px) {
  .nw-urlap-keret { grid-template-columns: 1fr; }
}

.nw-urlap-bev { display: grid; gap: var(--gap-s); }
.nw-urlap-bev p { margin: 0; }

/* A felütés a szekció első mondata: egy fokkal nagyobb, könnyű vágású. */
.nw-urlap-felutes {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.45;
  max-inline-size: 30ch;
}

.nw-urlap-doboz { background: var(--surface); padding: var(--gap-m); }

.nw-urlap { display: grid; gap: var(--gap-s); }

.nw-urlap-sor {
  display: grid;
  gap: var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.nw-urlap-mezo {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  max-inline-size: none;
}
.nw-urlap-mezo > label {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-light);
}
.nw-urlap-opcio { font-weight: 300; color: var(--on-light-muted); }

.nw-urlap input[type="text"],
.nw-urlap input[type="email"],
.nw-urlap input[type="tel"],
.nw-urlap select,
.nw-urlap textarea {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0.75em 0.9em;
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-light);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.3s var(--ease);
}
.nw-urlap textarea { resize: vertical; min-block-size: 9em; }

.nw-urlap input[type="text"]:hover,
.nw-urlap input[type="email"]:hover,
.nw-urlap input[type="tel"]:hover,
.nw-urlap textarea:hover { border-color: var(--on-light-muted); }

.nw-urlap input:focus-visible,
.nw-urlap select:focus-visible,
.nw-urlap textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nw-urlap-sugo {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--on-light-muted);
}

/* Adatkezelési jelölőnégyzet */
.nw-urlap-elfogad { margin: 0.2rem 0 0; max-inline-size: none; }
.nw-urlap-elfogad > label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--on-light-muted);
  cursor: pointer;
}
.nw-urlap-elfogad input[type="checkbox"] {
  inline-size: 1.15em;
  block-size: 1.15em;
  margin: 0.2em 0 0;
  accent-color: var(--ink);
  flex: none;
}
.nw-urlap-elfogad a { color: var(--on-light); text-underline-offset: 3px; }

.nw-urlap-kuld { margin: 0.4rem 0 0; max-inline-size: none; }

/* Hibajelzés: a mező alatt egy sor, az űrlap fölött egy összefoglaló */
.nw-urlap-hiba {
  font-size: var(--step--1);
  line-height: 1.45;
  color: oklch(0.52 0.19 25);
}
.nw-urlap-hiba--fo {
  margin-block-end: var(--gap-s);
  padding: 0.9em 1.1em;
  border: 1px solid oklch(0.52 0.19 25 / 0.35);
  background: oklch(0.52 0.19 25 / 0.06);
}
.nw-urlap-hiba--fo p { margin: 0; max-inline-size: none; }

/* Visszajelzés sikeres beküldés után */
.nw-urlap-kesz { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--gap-s); }
.nw-urlap-kesz p { margin: 0; max-inline-size: none; }
.nw-urlap-kesz p + p { margin-block-start: 0.4rem; color: var(--on-light-muted); font-size: var(--step--1); }
.nw-urlap-kesz__cim { font-size: var(--step-1); font-weight: 300; line-height: 1.3; }

/* Csapdamező gépeknek: a képernyőről eltűnik, de a DOM-ban ott van. */
.nw-urlap-csapda {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nw-kapcsolat #urlap { scroll-margin-block-start: var(--gap-m); }

@media print {
  .nw-urlap-szekcio,
  .nw-bolti-cta { display: none !important; }
}

/* ============================================================
   Fürdőszobatervező
   A lap fejléce a Tudástár-lapokéval azonos, alatta az alkalmazás
   teljes szélességben kapja a maradék képernyőt. Amíg a kód nincs
   fent, a „hamarosan" sáv áll a helyén.
   ============================================================ */

.nw-tervezo-fej { padding-block: var(--gap-l) var(--gap-l); }
.nw-tervezo-fej .crumb { color: var(--on-dark-muted); padding-block-start: 0; }
.nw-tervezo-fej .crumb a,
.nw-tervezo-fej .crumb span { color: var(--on-dark-muted); }
.nw-tervezo-fej .crumb a:hover { color: var(--on-dark); }
.nw-tervezo-bev { margin-block-start: var(--gap-m); }

/* Az alkalmazás kerete. Magasságot itt nem adunk: a tervező sávja a
   vezérlők hasábjától nő — több termék több helyet kap —, a 3D jelenet és az
   összegző hasáb pedig ki van pányvázva, hogy végig a képen maradjon.
   A kereten belüli felület stílusa az assets/tervezo/tervezo.css-ben áll. */
.nw-tervezo-app {
  inline-size: 100%;
  background: var(--ink-deep);
  position: relative;
}

.nw-tervezo-varo .shell > p { margin-block-start: var(--gap-s); }
.nw-tervezo-gombok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-block-start: var(--gap-m);
}

/* A kezdőlapi sáv a partner-sáv világos párja. */
.nw-kezdo-tervezo { background: var(--surface); }

/* A sáv látványképe a tervezőből kirenderelt szoba, átlátszó háttérrel —
   ezért nem kell neki keret és háttér, a sáv alapján áll meg magától. */
.nw-tervezo-kep { justify-self: center; }
/* A `body.nw-oldal img` szabály `max-width: 100%`-ot ad minden képnek, és az
   erősebb egy sima `.nw-tervezo-kep img`-nél — ezért kell ide is a `body`. */
body.nw-oldal .nw-tervezo-kep img {
  display: block;
  inline-size: 100%;
  /* a szövegblokk ~300 px magas; ennél a képnél marad arányos a sáv */
  max-inline-size: 480px;
  block-size: auto;
}

@media print {
  .nw-tervezo-app { display: none !important; }
}

/* ============================================================
   Nyomtatás — a terméklapból átadható adatlap
   A partner kinyomtatja a lapot, és odaadja a vevőnek: ezért a
   képernyő kellékei (menü, gombok, sötét sávok) kimaradnak, és
   a papír tetejére saját fejléc, aljára a lap URL-je kerül.
   ============================================================ */

.nw-print-fej,
.nw-print-lab { display: none; }

.nw-nyomtat { margin-block-start: var(--gap-m); }
.nw-nyomtat__sug {
  margin-block: 0.7rem 0;
  font-size: var(--step--1);
  color: var(--on-light-muted);
  max-width: 54ch;
}

@media print {
  @page { margin: 14mm 12mm; }

  html,
  body.nw-oldal {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }

  /* Ami a papírra nem kell */
  body.nw-oldal .site-header,
  body.nw-oldal .site-footer,
  body.nw-oldal .nw-fel,
  body.nw-oldal .crumb,
  body.nw-oldal .nw-cta,
  body.nw-oldal .nw-gallery__thumbs,
  body.nw-oldal .nw-gallery__ikon,
  body.nw-oldal .nw-nagyito,
  body.nw-oldal #letoltesek,
  body.nw-oldal #wpadminbar { display: none !important; }

  /* A görgetésre feltáruló blokkok nyomtatáskor mindig látszanak */
  body.nw-oldal .rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Saját nyomtatási fejléc és lábléc */
  .nw-print-fej {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8mm;
    border-block-end: 0.8pt solid #000;
    padding-block-end: 3mm;
    margin-block-end: 7mm;
  }
  .nw-print-fej__logo { inline-size: 34mm; block-size: auto; }
  .nw-print-fej__adat {
    text-align: end;
    font-size: 8pt;
    line-height: 1.55;
  }
  .nw-print-fej__adat b,
  .nw-print-fej__adat span { display: block; }

  .nw-print-lab {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    border-block-start: 0.5pt solid #999;
    margin-block-start: 7mm;
    padding-block-start: 2mm;
    font-size: 8pt;
    color: #444;
  }

  /* Szekciók: a papíron nincs sötét sáv és nincs nagy légzés */
  body.nw-oldal .nw-section,
  body.nw-oldal .nw-section--tight,
  body.nw-oldal .nw-utm-szek,
  body.nw-oldal .nw-utm-fej { padding-block: 0 7mm !important; }
  body.nw-oldal .nw-utm-fej { background: #fff !important; color: #000 !important; }
  body.nw-oldal .nw-utm-fej * { color: #000 !important; }
  body.nw-oldal .nw-tj,
  body.nw-oldal .nw-utm-lepteto { display: none !important; }
  body.nw-oldal .nw-section--dark { background: #fff !important; color: #000 !important; }
  body.nw-oldal .nw-section--dark *,
  body.nw-oldal .nw-section--dark a { color: #000 !important; }
  body.nw-oldal .shell { max-width: none; padding-inline: 0; }

  /* A papíron a címsor a szöveg fölé kerül, így a törzs teljes szélességű
     — két hasáb helyett kevesebb lap fogy. */
  body.nw-oldal .nw-split { grid-template-columns: 1fr; gap: 3mm; }

  /* Termékfej: kisebb kép, mellette az adatok */
  body.nw-oldal .pd {
    grid-template-columns: 64mm 1fr;
    gap: 8mm;
  }
  body.nw-oldal .nw-fej { padding-block-end: 7mm; }
  body.nw-oldal .nw-gallery { position: static !important; }
  body.nw-oldal .nw-gallery__main { aspect-ratio: auto; background: none; }
  body.nw-oldal .nw-gallery__main img {
    max-block-size: 64mm;
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  body.nw-oldal h1.product-name { font-size: 19pt; }
  body.nw-oldal .pd__promise { font-size: 11pt; }
  body.nw-oldal .h2 { font-size: 13pt !important; break-after: avoid; }
  body.nw-oldal .point h4 { break-after: avoid; }

  body.nw-oldal .nw-badge {
    border: 0.5pt solid #000 !important;
    background: none !important;
    color: #000 !important;
  }
  body.nw-oldal .size { border-color: #999 !important; }

  /* Két hasábban kevesebb papír fogy */
  body.nw-oldal .points { grid-template-columns: 1fr 1fr; gap: 6mm; }
  body.nw-oldal .point {
    break-inside: avoid;
    padding-block-end: 4mm;
    border-block-end-color: #ddd;
  }

  body.nw-oldal .spec th,
  body.nw-oldal .spec td { padding: 2.5pt 0; border-block-end-color: #ccc; }
  body.nw-oldal .spec th { color: #555 !important; }

  /* A GY.I.K. a papíron nyitva, jelölő nélkül */
  body.nw-oldal .faq { border-block-start-color: #ccc; }
  body.nw-oldal .faq details { break-inside: avoid; border-block-end-color: #ddd; }
  body.nw-oldal .faq summary { cursor: default; padding-block: 3mm 1mm; }
  body.nw-oldal .faq summary::after { display: none; }
  body.nw-oldal .faq details p { color: #000 !important; margin-block-end: 3mm; }

  /* Alternatívák: név és ígéret, kép nélkül */
  body.nw-oldal .nw-alt { grid-template-columns: 1fr 1fr; gap: 4mm; }
  body.nw-oldal .nw-alt__kep { display: none !important; }
  body.nw-oldal .nw-alt__elem { break-inside: avoid; }
  body.nw-oldal .nw-alt__link {
    grid-template-columns: 1fr;
    border-color: #ccc !important;
    padding: 3mm;
  }
  body.nw-oldal .nw-alt__igeret { -webkit-line-clamp: none; overflow: visible; }

  /* A `:not(.btn)` a képernyős szabályban egy osztállyal emeli a
     specifikusságot (0-3-2), ezért itt is ki kell írni, különben az
     aláhúzás a papíron is megmarad. */
  body.nw-oldal a,
  body.nw-oldal .nw-prose a:not(.btn),
  body.nw-oldal .point a:not(.btn),
  body.nw-oldal .faq a:not(.btn) { text-decoration: none; }
  body.nw-oldal img { max-inline-size: 100%; }
}

/* „Ajánljuk hozzá" a bolti leírásban: a négy ajánlott tálca saját képe,
   mindegyik a saját terméklapjára linkelve (a korábbi egybeszerkesztett
   csíkkép helyett, ami mindenhonnan a kategórialapra vitt). */
.nw-ajanlo {
  list-style: none;
  margin: var(--gap-s) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap-s);
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.nw-ajanlo__link {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
}
.nw-ajanlo__link img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border: 1px solid var(--line);
  transition: border-color 0.35s var(--ease);
}
.nw-ajanlo__link:hover img,
.nw-ajanlo__link:focus-visible img { border-color: var(--ink); }
.nw-ajanlo__nev {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--on-light-muted);
  /* A terméknevek a lapon mindenhol kisbetűsek (`.nw-kat-kartya__nev`,
     `.nw-kat-cim`, `.nw-alt__nev`) — ez a kártya sem lehet kivétel. */
  text-transform: lowercase;
}
.nw-ajanlo__link:hover .nw-ajanlo__nev { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .nw-ajanlo__link img { transition: none; }
}

/* ============================================================
   Termékoldali 3D nézet és AR
   A model-viewer a bal oldalon, mellette a telefonos AR-gomb
   (vagy asztalon a QR-kód). A `--ar` / `--qr` osztályt a
   termek-3d.js teszi rá aszerint, hogy a készülék tud-e AR-t —
   nem a képernyő mérete dönt, hanem a képesség.
   ============================================================ */

.nw-3d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.nw-3d__stage {
  position: relative;
  aspect-ratio: 4 / 3.4;
  min-block-size: 360px;
  border-inline-end: 1px solid var(--line);
}
.nw-3d model-viewer {
  inline-size: 100%;
  block-size: 100%;
  background: radial-gradient(ellipse at 50% 40%, oklch(0.93 0.002 60), oklch(0.80 0.003 60));
  --poster-color: transparent;
}
/* a model-viewer saját AR-gombját a mienk helyettesíti */
.nw-3d model-viewer::part(default-ar-button) { display: none; }

.nw-3d__sug {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 14px;
  transform: translateX(-50%);
  font-size: var(--tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.30 0.004 60);
  background: oklch(0.98 0.001 60 / 0.75);
  padding: 0.4em 0.9em;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.6s var(--ease);
}
.nw-3d__sug--rejt { opacity: 0; }

.nw-3d__oldal {
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
body.nw-oldal .nw-3d__oldal p { margin: 0; font-size: var(--step--1); color: var(--muted); }

/* A gomb és a QR-kód közül mindig csak az egyik látszik. Amíg a
   model-viewer nem válaszolt, egyik sem — így nem villan fel a rossz. */
.nw-3d__mobil, .nw-3d__asztal { display: none; }
.nw-3d--ar .nw-3d__mobil { display: block; }
.nw-3d--ar ul.nw-3d__mobil, .nw-3d--ar .nw-3d__gomb { display: flex; }
.nw-3d--qr .nw-3d__asztal { display: block; }

body.nw-oldal .nw-3d__gomb { inline-size: 100%; justify-content: center; }
.nw-3d__gomb svg { inline-size: 1.3em; block-size: 1.3em; }

.nw-3d__qr {
  background: #fff;
  padding: 12px;
  inline-size: 100%;
  max-inline-size: 200px;
  aspect-ratio: 1;
}
.nw-3d__qr svg { display: block; inline-size: 100%; block-size: 100%; }

.nw-3d__tipp {
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
  gap: 0.5em;
  font-size: var(--step--1);
  color: var(--muted);
}
.nw-3d__tipp li { padding-inline-start: 1.1em; position: relative; }
.nw-3d__tipp li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 0.45em;
  block-size: 1px;
  background: var(--accent);
}

body.nw-oldal .nw-3d__naplo { font-size: var(--tiny); color: var(--muted); }

@media (max-width: 820px) {
  .nw-3d { grid-template-columns: 1fr; }
  .nw-3d__stage {
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
    aspect-ratio: 1 / 1.05;
    min-block-size: 0;
  }
}

/* Nyomtatásban nincs értelme: a lap fekete-fehér adatlapként jön ki. */
@media print { .nw-3d { display: none !important; } }

/* ============================================================
   „3D és AR elérhető” jelzés a termékkép sarkában
   A kártyákon néma jelzés (az egész kártya egy link), a
   terméklap galériáján link, ami a 3D szakaszra ugrik.
   ============================================================ */

.nw-3d-jel {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.7em;
  font-size: var(--tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--on-light);
  background: oklch(0.98 0.001 60 / 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid oklch(0.30 0.004 60 / 0.14);
  pointer-events: none;
}
.nw-3d-jel svg { inline-size: 1.1em; block-size: 1.1em; }

/* A kártyák képdoboza eddig nem volt pozicionált — a jelzés ehhez igazodik. */
.nw-kat-kartya__kep { position: relative; }

/* A terméklapon link: oda kell tudni kattintani. */
body.nw-oldal a.nw-3d-jel--link {
  pointer-events: auto;
  text-decoration: none;
  color: var(--on-light);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
body.nw-oldal a.nw-3d-jel--link:hover,
body.nw-oldal a.nw-3d-jel--link:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

@media print { .nw-3d-jel { display: none !important; } }