/* v4 — RÉTEGEZÉS (progressive disclosure).
   A v3 tartalma változatlan; ez a réteg csak elrejt és felfed.
   Elv: minden szekcióban EGY gesztus, mindig ugyanaz a sáv, mindig helyben nyílik. */

/* 60+ olvashatóság: egységesen nagyobb alap betűméret. */
html{font-size:106.25%}

/* --- Zárt / nyitott állapot ------------------------------------------------ */
/* A sáv utáni testvérek alkotják a "mély réteget". */
section:not(.v4-open) .v4-fold-bar~*{display:none}
/* A GYIK lezáró blokkja mindig látszik — ez a szekció emberi kijárata. */
#kerdesek:not(.v4-open) .v3-faq-foot{display:block}
/* Felfedéskor lassú, leülepedett belépés. */
@keyframes v4Up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
section.v4-open .v4-fold-bar~*{animation:v4Up 900ms cubic-bezier(.16,1,.3,1) both}
section.v4-init .v4-fold-bar~*{animation:none}

/* --- A felfedő sáv -------------------------------------------------------- */
.v4-fold-bar{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;margin:var(--sp-5) 0 0;padding:15px 18px;background:transparent;border:1px solid var(--line-gold);cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);text-align:left;transition:background 280ms var(--ease-out),border-color 280ms var(--ease-out)}
.v4-fold-bar:hover,.v4-fold-bar:focus-visible{background:rgba(198,168,104,.11)}
.v4-fold-bar .v4-fi{flex:none;width:18px;font-size:17px;font-weight:300;line-height:1;text-align:center}
.v4-fold-bar .v4-ft{flex:1;min-width:0;text-wrap:pretty}
.v4-fold-bar .v4-fm{flex:none;font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--fg-3)}
@media (max-width:560px){.v4-fold-bar{gap:12px;padding:14px;font-size:11.5px;letter-spacing:.14em}.v4-fold-bar .v4-fm{display:none}}

/* Lezáró kapcsoló a mély réteg alján — ugyanaz a gesztus, visszafelé. */
.v4-fold-end{display:flex;align-items:center;gap:12px;margin-top:var(--sp-5);padding:13px 16px;min-height:48px;background:transparent;border:1px solid var(--line-strong);cursor:pointer;font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);transition:color 280ms var(--ease-out),border-color 280ms var(--ease-out)}
.v4-fold-end:hover,.v4-fold-end:focus-visible{color:var(--gold-deep);border-color:var(--line-gold)}

/* Tinta hátterű szekciók (pl. #uzlet) — csont/arany a sávon. */
#uzlet .v4-fold-bar{color:var(--gold-bright);border-color:rgba(198,168,104,.45)}
#uzlet .v4-fold-bar:hover,#uzlet .v4-fold-bar:focus-visible{background:rgba(198,168,104,.14)}
#uzlet .v4-fold-bar .v4-fm{color:rgba(233,227,214,.5)}
#uzlet .v4-fold-end{color:rgba(233,227,214,.6);border-color:rgba(233,227,214,.2)}
#uzlet .v4-fold-end:hover,#uzlet .v4-fold-end:focus-visible{color:var(--gold-bright);border-color:rgba(198,168,104,.45)}

/* A sáv szélessége a szövegtörzshöz igazodik, nem a teljes rácshoz. */
#kerdesek .v4-fold-bar{margin-bottom:var(--sp-6)}

/* A termékbontás csak választás után jelenik meg — a szalag a kapu. */
html:not(.v4-picked) #products-stage{display:none}
/* Amíg nincs választás, egyik kártya sem visel kijelölt állapotot. */
html:not(.v4-picked) .ps-strip-item.on{border-color:var(--line);background:transparent}
html:not(.v4-picked) .ps-strip-item.on:hover:not(:disabled){border-color:var(--line-gold)}
html:not(.v4-picked) .ps-strip-item .ps-strip-cta{color:var(--gold-deep)}
html:not(.v4-picked) .ps-strip-item.on .ps-strip-name{color:var(--fg-3)}
/* Az „EZT MUTATJUK ↓" felirat helyére a semleges hívás kerül. */
html:not(.v4-picked) .ps-strip-item.on .ps-strip-cta{position:relative;visibility:hidden}
html:not(.v4-picked) .ps-strip-item.on .ps-strip-cta::after{content:"MEGNÉZEM";visibility:visible;position:absolute;left:0;top:0;right:0;text-align:center;color:var(--gold-deep)}

/* A kártyán a „mire jó" a főszereplő: keretben, nagyobb betűvel. */
#products .ps-strip-cl{display:block;position:relative;width:100%}
#products .ps-strip-claim{margin-top:11px;padding:10px 10px 9px;border:1px solid var(--line-gold);background:rgba(198,168,104,.09);font-size:clamp(12.5px,1.4vw,14.5px);font-weight:500;letter-spacing:.09em;line-height:1.28;text-align:center;text-decoration:none;transition:background 280ms var(--ease-out)}
#products .ps-strip-claim:hover,#products .ps-strip-claim:focus-visible{background:rgba(198,168,104,.18)}
#products .ps-strip-claim b{font-size:.8em;opacity:.7}
#products .ps-strip-sub{-webkit-line-clamp:4;margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--fg-2)}
#products .ps-strip-tech{margin-top:11px;padding:10px;border:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--fg-2)}

/* Lenyitott termékrészletek — elegáns, de olvasható méretek. */
#products .ps-comp.ps-comp .ps-comp-t{font-size:15px;line-height:1.34}
#products .ps-comp.ps-comp .ps-comp-teaser{-webkit-line-clamp:3;font-size:13px;line-height:1.5}
#products .ps-comp-more{font-size:10px;letter-spacing:.16em}
#products .ps-why-k,#products .v3-cs-k{font-size:clamp(12.5px,1.35vw,14.5px)}
#products .ps-why-t{font-size:1.02rem;line-height:1.72}
#products .ps-why-n{font-size:10.5px}
#products .ps-why-oh,#products .v3-cs-oh{font-size:.9rem;line-height:1.66}
#products .v3-cs-h{font-size:.98rem;line-height:1.7}
#products .v3-cs-more{font-size:11px}
.ps-ohm-p p{font-size:.98rem;line-height:1.72}
.ps-ohm-p p:last-child{font-size:.9rem}

/* Egyetlen navigációs kontroll minden méretben: a 9 apró lépcső helyett mindig
   olvasható szakasznév + sorszám, kattintásra a teljes lista nevekkel.
   A haladást a sáv arany kitöltése mutatja, nem egy külön hajszálvonal. */
/* A szakasz-navigáció a v3 szerkezetét kapja vissza: asztali nézetben a lépcsős
   szakaszrajz a haladás-hajszálvonallal, mobilon a tömör sáv arany kitöltéssel.
   A termékváltó fül ehhez csatlakozik, nem helyette áll. */
/* A v3 dupla-osztályos mintáját kell követni, különben a v3.css kiüti ezeket. */
html .ps-botnav-track.ps-botnav-track{height:3px;background:rgba(198,168,104,.2)}
html .ps-botnav-track.ps-botnav-track i{background:var(--gold-deep)}
/* A haladásvonal 5px, hogy tényleg látszódjon. */
html .ps-botnav-track.ps-botnav-track{height:5px}
/* A lépcsős szakaszrajz — a v3 asztali megoldása — már 820px-től megjelenik,
   tömörebb tipográfiával. Alatta (telefon) a vonal + a tömör sáv marad. */
@media (min-width:820px) and (max-width:1099px){
  html .ps-botnav-steps{display:grid;grid-template-columns:1fr auto;align-items:stretch;min-height:72px}
  html .ps-botnav-row-wrap{display:none}
  html .ps-botnav-step{padding:14px 8px 12px}
  html .ps-botnav-step .t{font-size:10.5px;letter-spacing:.03em}
  html .ps-botnav-step .n{font-size:9.5px}
}
/* Telefonon a lépcsősor nem fér ki: csak a vonal jön, saját magassággal, hogy a
   sáv ne festhesse le. */
@media (max-width:819px){
  html .ps-botnav-steps{display:block;min-height:5px;order:-1}
  html .ps-botnav-steprow,html .ps-botnav-steps>.ps-botnav-next{display:none}
  html .ps-botnav-track.ps-botnav-track{position:relative}
}
.ps-botnav-name{font-size:15px;letter-spacing:.13em;font-weight:500}
.ps-botnav-count{font-size:12.5px}
.ps-botnav-hint{font-size:10px}
.ps-botnav-row{min-height:58px}
.ps-botnav-row .t{font-size:14.5px}
.ps-botnav-row .n{font-size:11px}
@media (max-width:640px){.ps-botnav-name{font-size:13.5px;letter-spacing:.1em}}

/* TERMÉKVÁLTÓ + HALADÁSJELZŐ — a kettő soha nem kerül egymás útjába.
   A v3 dokkja felcsúszott a szakasz-navigáció FÖLÉ (z-index 70 vs 34), ezért
   nyitva lefestette a haladásjelzőt, becsukva pedig a doboza fogta a kattintásokat.
   Itt a dokk nem csúszik sehova: a füle a navigáció fölött ül, a panel pedig
   fölötte nyílik — a navigáció és a haladásjelző mindig látszik és kattintható. */
html.v4-dock .ps-dock{opacity:1;transform:none;display:flex;flex-direction:column}
/* A készítmények MAGUKTÓL kint vannak, amint a termékekhez érsz — nincs mit
   megnyitni. A fül szerepe megfordul: becsukni lehet vele, ha útban van.
   (A React "open" jelzője így a becsukott állapotot jelöli — a komponens
   állapotát nem írjuk át, csak a jelentését fordítjuk meg.) */
html.v4-dock .ps-dock{pointer-events:auto}
html.v4-dock .ps-dock .ps-dock-row{visibility:visible;display:flex}
html.v4-dock .ps-dock.open{pointer-events:none}
html.v4-dock .ps-dock.open .ps-dock-row{display:none}
html.v4-dock .ps-dock .ps-dock-tab{pointer-events:auto}
/* A fül feliratát a valódi állapothoz igazítjuk. */
html.v4-dock .ps-dock-tab{font-size:0;letter-spacing:0}
html.v4-dock .ps-dock-tab::after{content:"\2715  BEZÁROM A KÉSZÍTMÉNYEKET";font-size:10.5px;font-weight:500;letter-spacing:.18em}
html.v4-dock .ps-dock.open .ps-dock-tab::after{content:"\FF0B  K\00C9SZ\00CDTM\00C9NYEK MUTAT\00C1SA"}
@media (max-width:560px){html.v4-dock .ps-dock-tab{padding:10px 16px 9px}html.v4-dock .ps-dock-tab::after{font-size:9px;letter-spacing:.14em}}
/* A navigáció nem halványul el a panel alatt — nincs mit elhalványítani. */
html .ps-botnav.ps-nav-dim{opacity:1}

/* A fül a navigáció jobb felső sarkára simul, a panel tömörebb, hogy elférjen. */
html .ps-dock-tab{margin:0 clamp(14px,3vw,44px) 0 auto;padding:9px 18px 8px;font-size:10px;letter-spacing:.16em;border-bottom:none}
html.v4-dock .ps-dock-tab{margin:0 auto;padding:11px 24px 10px;border:1px solid var(--line-gold);border-bottom:none;background:var(--ink-900);color:var(--gold-bright)}
html.v4-dock .ps-dock-tab:hover{background:#17140E}
html .ps-dock.open .ps-dock-tab{background:var(--ink-900);color:var(--gold-bright)}
html .ps-dock-row{box-shadow:0 -18px 40px -26px rgba(0,0,0,.7)}
html .ps-dock-s{width:42px;height:74px}
html .ps-dock-i{padding:12px 16px 13px;gap:8px}
html .ps-dock-n{font-size:12.5px}
html .ps-dock-k{font-size:10px;max-width:170px}
@media (max-width:560px){html .ps-dock-tab{margin-right:14px;padding:8px 14px 7px;font-size:9.5px}html .ps-dock-s{width:34px;height:58px}html .ps-dock-i{padding:10px 12px 11px}}