
/* ============================================================
   ALKOPRO FŐOLDAL PROTOTÍPUS
   Arculat: ALKOPRO Arculati Kézikönyv v2.4
   Elv: mobil-először, a desktop NEM ugyanaz nagyban
   ============================================================ */

/* 2026-08-10 (Csaba): az utvonal eddig 'assets/inter-latin.woff2' volt, de ez a
   fajl MAR az assets/ mappaban van, tehat a bongeszo assets/assets/-et kereste
   es 404-et kapott. Igy a ui.css-re tamaszkodo oldalak (a 74 Tudastar-cikk)
   rendszer-betuvel jelentek meg, mig a fooldal-szintu oldalak sajat, helyes
   @font-face-szel Interrel. Innentol egyseges a betukep. */
@font-face{font-family:'Inter';src:url('inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212}
@font-face{font-family:'Inter';src:url('inter-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB}

:root{
  --amber:#f2b600;      /* brand-mag, max 10% felület */
  --amber-hover:#d9a600;
  --amber-tint:#fff8db;
  --charcoal:#212121;
  --dark:#16181d;       /* signature hideg sötét */
  --red:#e5322e;        /* figyelem */
  --red-error:#cf2e2e;  /* hiba/elfogyott */
  --green:#2e7d32;      /* készlet, alatt */
  --blue:#0056a7;       /* KIZÁRÓLAG link */
  --price:#1a1a1a;
  --surface:#f5f5f4;
  --border:#e4e4e2;
  --muted:#6b7075;
  --disabled:#8a8f96;
  --white:#fff;
  --r:10px;
  --pad:16px;
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}


/* ============ OLDALFEJLÉC ============ */
/* 14 oldal használja. Bőven mért térközök: a cím körüli levegő az, amitől
   egy oldal drágának néz ki, nem a díszítés. */
.cat-head{padding:4px 0 26px}
.cat-head h1{font-size:27px;line-height:1.15;letter-spacing:-.025em}
.cat-head .lead{
  font-size:15.5px;line-height:1.7;color:var(--muted);margin-top:14px;max-width:66ch
}
.cat-head .lead b{color:var(--charcoal)}
.cat-sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}

/* ============ KIEMELT DOBOZ ============ */
.callout{
  background:var(--amber-tint);border-radius:10px;padding:15px 17px;margin:18px 0;
  font-size:13.5px;line-height:1.65;color:#5c4d00
}
.callout b{display:block;margin-bottom:4px;color:#5c4d00}
.callout-red{background:#fff4f4;color:#7a2320}
.callout-red b{color:#7a2320}

/* ============ IGEN / NEM OSZLOPOK ============ */
.fit{display:grid;gap:12px;margin-top:8px}
.fit-col{border-radius:12px;padding:18px}
.fit-yes{background:#f2f8f3;border:1px solid #cfe4d2}
.fit-no{background:var(--surface);border:1px solid var(--border)}
.fit-col h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.fit-col svg{width:17px;height:17px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fit-yes svg{stroke:var(--green)}
.fit-no svg{stroke:var(--muted)}
.fit-col ul{list-style:none;display:grid;gap:9px}
.fit-col li{font-size:13.5px;line-height:1.55;color:#3d4045;padding-left:15px;position:relative}
.fit-col li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#b6bcc4}
.fit-yes li::before{background:var(--green)}

/* ============ TÉMA-CHIPEK ============ */
/* Halkabbak, mint korábban: a chip navigáció, nem hívás. A darabszám sem
   sárga már, mert a szemet elvonta a témanevekről. */
.faq-nav{display:flex;gap:8px;overflow-x:auto;padding:0 0 4px;margin-bottom:34px;scrollbar-width:none}
.faq-nav::-webkit-scrollbar{display:none}
.faq-nav a{
  flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:600;padding:9px 15px;
  border-radius:22px;border:1px solid var(--border);background:var(--white);
  color:#4a4d52;text-decoration:none;transition:border-color .15s,background .15s
}
.faq-nav a:hover{border-color:#b9bdc3;color:var(--charcoal);text-decoration:none}
.faq-nav a b{color:var(--muted);font-weight:600;margin-left:5px}

/* ============ TÉMACSOPORT ============ */
.faq-grp{margin-bottom:44px}
.faq-grp > h2{font-size:20px;margin-bottom:18px;scroll-margin-top:100px;letter-spacing:-.015em}
.faq-grp > h2 .db{
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;
  text-transform:none;margin-left:9px
}
.faq-cta{
  background:var(--dark);color:var(--white);border-radius:12px;padding:26px;
  display:grid;gap:14px
}
.faq-cta h3{color:var(--white);font-size:18px}
.faq-cta p{color:#c4c7cc;font-size:13.5px;line-height:1.6}
.art-min{display:block;font-size:11.5px;color:var(--muted);margin-top:9px;font-weight:600}

@media (min-width:768px){
  .fit{grid-template-columns:1fr 1fr;gap:16px}
  .faq-cta{grid-template-columns:1fr auto;align-items:center;padding:30px}
}
@media (min-width:1024px){
  .cat-head{padding:14px 0 40px}
  .cat-head h1{font-size:40px}
  .cat-head .lead{font-size:17px;margin-top:16px}
  /* 2026-08-10 (Csaba): a chip-sor mobilon vizszintesen huzhato, ott ez helyes.
     Asztali gepen viszont a 9 tema 1670 pixel szeles, es mivel a gordulosav el
     van rejtve, az utolso ket tetel (kalkulator, GYIK) lathatatlan volt es
     semmi nem jelezte, hogy ott van meg valami. 768 pixel felett tordelunk. */
  .faq-nav{margin-bottom:44px;flex-wrap:wrap;overflow-x:visible}
  .faq-grp{margin-bottom:56px}
  .faq-grp > h2{font-size:24px;margin-bottom:22px}
}

/* ============ MORZSAMENÜ ============ */
/* Halk, szürke, szellős: a movtech.hu mintája. A morzsamenü tájékoztat, nem
   hívja fel magára a figyelmet, ezért nem link-kék és nem is félkövér. */
.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);padding:22px 0 22px
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--charcoal);text-decoration:underline}
.crumbs span{color:#c3c7cc}
.crumbs > span:last-child{color:#8a8f96}
@media (min-width:1024px){
  .crumbs{padding:28px 0 26px}
}
/* A grid- és flex-elemek alapértelmezett `min-width:auto`-ja miatt egy elem
   NEM zsugorodik a tartalma alá: ha bent van egy széles sor (pl. görgethető
   miniatűr-sáv vagy tábla), az egész oszlop kitolja a lapot, és vízszintes
   túlcsordulás lesz mobilon. Ez a sor ezt előzi meg globálisan. */
.pdp>*,.split>*,.split-3>*,.pagegrid>*,.calcpage>*,.hb-grid>*,.b2b-grid>*,
.cards>*,.arts>*,.usps>*,.segs>*,.fcols>*,.ftrust>*,.vids>*,.seo-tabs>*{min-width:0}
/* a hosszú, szóköz nélküli szövegrészek (típusnevek, URL-ek) se tolják ki a sort */
.prose li,.fit-col li,.pk li,.fcol li,.card-spec li,.b2b-list li{overflow-wrap:anywhere}
/* biztonsági háló: ha valami mégis kilógna, ne a teljes lap csússzon el */
body{overflow-x:hidden}
/* 2026-08-07: `html{overflow-x:clip}`-et is kipróbáltunk az iOS-es oldalra
   húzás ellen, de a gyökérelem overflow-ja a viewportra propagálódik, és
   ezzel a ragadó fejléc leszakad (mérve: a fejléc -2400px-re csúszott
   görgetéskor). Marad a body-szintű hidden, ami sticky-biztos. Vízszintes
   kicsúszás 390px-en nincs, tehát nincs is mit elhúzni. */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:'tnum' 1,'zero' 1;
  color:var(--charcoal);background:var(--white);
  font-size:16px;line-height:1.55;
  padding-bottom:64px; /* mobil sticky sáv helye */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- tipográfia --- */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;font-weight:800}
h1{font-size:26px}
h2{font-size:21px;margin-bottom:6px}
h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:15px}
.sec{padding:34px 0}
.sec-head{margin-bottom:16px}
.sec-head .kicker{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:6px
}

/* --- mérési szám (signature) --- */
/* A `.measure` monospace betűje MÉRŐSZÁMOKRA való (ezrelék, pontosság,
   méréshatár): ott a fix karakterszélesség segít az összehasonlításban.
   ÁRAKNÁL viszont idegen és technikás hatású, ezért azok az Inter tabuláris
   számait használják, ahogy az extra opciók árai is. */
.measure{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums}
.price,.price-old,.p-old,.p-new,.p-save,.btn .measure,.pdp-bar .p,
.hb-n strong,.pn strong,.sz-ar .measure,.ex-p,.buy-price .measure{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em
}

/* --- gombok --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;padding:13px 20px;border-radius:8px;
  border:2px solid transparent;cursor:pointer;text-align:center;line-height:1.2;
  transition:background .15s,border-color .15s
}
.btn:hover{text-decoration:none}
.btn-pri{background:var(--amber);color:var(--charcoal);border-bottom:3px solid #c99400}
.btn-pri:hover{background:var(--amber-hover)}
.btn-sec{background:var(--white);color:var(--charcoal);border-color:var(--charcoal)}
.btn-sec:hover{background:var(--surface)}
.btn-dark{background:var(--charcoal);color:var(--white)}
.btn-dark:hover{background:var(--dark)}
.btn-full{width:100%}
.btn-sm{padding:9px 14px;font-size:14px}

/* --- skála-motívum (brand) --- */

/* ============ 1. FEJLÉC ============ */
.utility{display:none}
header.hdr{
  position:sticky;top:0;z-index:60;background:var(--dark);color:var(--white);
  border-bottom:3px solid var(--amber)
}
/* --- szállítási sáv: a fejléc első eleme, tehát vele együtt tapad felül.
       Végig látszik, nem görgethető el, mert a szállítási költség a
       pénztár-elhagyás egyik fő oka. (2026-08-07, Csaba) --- */
:root{--shipbar:30px}
.shipbar{background:var(--amber);color:var(--charcoal)}
.shipbar-in{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--shipbar);font-size:12.5px;font-weight:700;line-height:1
}
.shipbar svg{
  width:16px;height:16px;flex:0 0 16px;
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.shipbar b{font-weight:900}
@media (max-width:520px){
  .shipbar-in{gap:6px;font-size:11.5px}
  .shipbar svg{width:14px;height:14px;flex:0 0 14px}
}
.hdr-in{display:flex;align-items:center;gap:12px;height:56px}
.hdr-logo img{height:26px;width:auto}
.hdr-sp{flex:1}
.icobtn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:8px;
  background:transparent;border:0;color:var(--white);cursor:pointer;position:relative
}
.icobtn:hover{background:rgba(255,255,255,.1)}
.icobtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cart-n{
  position:absolute;top:4px;right:3px;background:var(--amber);color:var(--charcoal);
  font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;
  display:grid;place-items:center;padding:0 4px
}
/* --- mobil menü --- */
.mobmenu{
  position:fixed;top:calc(56px + var(--shipbar));left:0;right:0;bottom:0;z-index:65;background:var(--white);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* 2026-08-07: a lenti ragadó CTA-sáv (64px, z-index 70) eddig eltakarta
     a menü utolsó pontjait. A 28px alsó térköz helyett a sáv magassága is
     benne van, így a Kapcsolat és a telefonszám is elgörgethető alóla. */
  padding:14px var(--pad) calc(28px + 64px)
}
.mobmenu[hidden]{display:none}
.mm-sec{margin-bottom:20px}
/* A szekció-címek adják a menü szerkezetét, ezért ezek a hangsúlyosak:
   sötétek, nagyobbak, sárga jelzővel. 2026-08-10: a cikkoldalak eddig a régi,
   halk címstílust kapták, mert ez a közös lap lemaradt a többi oldal mögött. */
.mm-lbl{
  display:flex;align-items:center;gap:9px;font-size:15px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;color:var(--charcoal);margin:0 0 11px;
  padding-bottom:9px;border-bottom:2px solid var(--border)
}
.mm-lbl::before{content:'';width:5px;height:18px;border-radius:2px;background:var(--amber);flex:0 0 5px}
.mobmenu a{
  display:block;padding:11px 12px;border:1px solid var(--border);border-radius:9px;
  margin-bottom:7px;background:var(--white)
}
.mobmenu a:hover{text-decoration:none;border-color:var(--charcoal)}
.mobmenu b{display:block;color:var(--charcoal);font-size:15px;font-weight:700;line-height:1.3}
/* 2026-08-10 (Csaba): a választó-kvíz eddig halvány sárga alapot kapott, ami
   hover-állapotnak látszott, nem kiemelésnek. Mostantól tömör sárga kártya
   fekete kerettel és tömör árnyékkal, ikonnal és "Kezdd itt" jelzővel: a menü
   egyetlen gomb-erejű eleme, hogy ránézésre látszódjon, a választás itt kezdődik. */
.mobmenu a.mm-hero{
  display:flex;align-items:center;gap:11px;
  background:var(--amber);border:2px solid var(--charcoal);border-radius:12px;
  padding:12px;margin-bottom:11px;box-shadow:0 3px 0 var(--charcoal)
}
.mobmenu a.mm-hero:hover{border-color:var(--charcoal)}
.mobmenu .mm-hero>.mm-hero-ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--charcoal);
  display:grid;place-items:center;margin:0;font-size:0
}
.mm-hero-ico svg{
  width:22px;height:22px;stroke:var(--amber);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round
}
.mobmenu .mm-hero>.mm-hero-txt{display:block;flex:1;min-width:0;margin:0;font-size:inherit;color:inherit}
.mm-hero-tag{
  display:block;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:#6b5300;margin-bottom:2px
}
.mobmenu .mm-hero b{color:var(--charcoal);font-size:15.5px;font-weight:800}
.mobmenu .mm-hero .mm-hero-txt>span{display:block;color:#6b5300;font-size:12.5px;margin-top:1px}
.mm-hero-arw{
  width:19px;height:19px;flex:0 0 19px;stroke:var(--charcoal);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round
}
.mobmenu a>span{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.mm-sale b{color:var(--red-error)}
.mm-all b{color:var(--blue)}
.mm-tel{
  display:flex !important;align-items:center;gap:12px;
  background:var(--dark) !important;border-color:var(--dark) !important;padding:14px !important
}
.mm-tel .hdr-tel-ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:9px;background:var(--amber);display:grid;place-items:center
}
.mm-tel .hdr-tel-ico svg{width:19px;height:19px;stroke:var(--charcoal);fill:none;stroke-width:2.3}
.mm-tel b{color:var(--white) !important;font-size:18px}
.mm-tel small{display:block;color:#a8adb5;font-size:12px}
/* 2026-08-10: a másodlagos, kétoszlopos menüblokk megszűnt. A Vásárlói
   információk szakasz ugyanazt a címet és csempét kapja, mint a többi. */

/* bizalmi mikrocsík a fejléc alatt, mobilon */
.trustbar{
  background:var(--charcoal);color:#e8e8e6;font-size:12px;
  padding:7px 0;border-bottom:1px solid #2c2c2c;overflow:hidden
}
.trustbar ul{display:flex;gap:18px;list-style:none;white-space:nowrap;
  overflow-x:auto;scrollbar-width:none}
.trustbar ul::-webkit-scrollbar{display:none}
.trustbar li{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.trustbar svg{width:13px;height:13px;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ============ 2. HERO ============ */
/* Mobil: szöveges LCP, kép NEM a hajtás felett */
.hero{background:var(--white);padding:24px 0 26px}
.hero h1{font-size:27px;margin-bottom:10px}
.hero h1 .hl{
  background:linear-gradient(transparent 62%,var(--amber-tint) 62%);
  box-shadow:inset 0 -3px 0 var(--amber)
}
.hero-sub{font-size:15px;color:#3d4045;margin-bottom:16px;max-width:52ch}
/* kicker a H1 fölött: szakbolt-jelzés */
/* halk kisbetűs, csak a "Magyarország #1" kiemelve */
.hero-kicker{
  display:block;font-size:13.5px;color:var(--muted);letter-spacing:.01em;margin-bottom:10px
}
.hero-kicker b{color:var(--charcoal);font-weight:800}

/* apró ténysor a hero-ban, középpontos elválasztással */
.hero-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:20px;
  font-size:13.5px;color:var(--muted)
}
.hero-facts span{display:inline-flex;align-items:center;white-space:nowrap}
.hero-facts span+span::before{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--amber);
  margin-right:10px;flex:0 0 4px
}
.hero-pts{list-style:none;margin-bottom:18px;display:grid;gap:8px}
.hero-pts li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.hero-pts li strong{color:var(--charcoal)}
.hero-pts li span{color:#4a4d52}
.hero-pts svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-cta{display:grid;gap:9px}

/* halk kereső a hero-ban */
.hero-search{display:flex;align-items:center;gap:10px;margin-top:15px;flex-wrap:wrap}
.hs-lbl{font-size:13px;color:var(--muted);flex:0 0 auto}
.hs-box{
  display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:0 12px;height:44px;flex:1 1 200px;min-width:0
}
.hs-box svg{width:17px;height:17px;flex:0 0 17px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round}
.hs-box input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:14.5px;min-width:0;color:var(--charcoal)}

/* mobil termékfotó-sor */
.hero-thumbs{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.hero-thumbs img{
  width:70px;height:70px;object-fit:contain;background:var(--surface);border-radius:9px;padding:6px;flex:0 0 70px
}
.ht-cap{font-size:12.5px;color:var(--muted);flex:1;min-width:110px;line-height:1.4}
.ht-cap strong{color:var(--charcoal)}
.hero-visual{display:none}
.hero-microtrust{
  margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--border)
}
.stars{display:inline-flex;gap:1.5px;flex:0 0 auto}
.stars svg{width:14px;height:14px;fill:var(--amber)}

/* ============ 2.b PARTNEREK / REFERENCIÁK ============ */
.partners{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:20px 0 20px;margin-top:24px;text-align:center
}
.prow-lbl{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px
}
.pmarks{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center}
/* valódi logók az élő oldalról, egységesítve: azonos magasság, szürkeárnyalat,
   hover-re visszakapja a színét */
.pmark{
  height:30px;width:auto;max-width:108px;object-fit:contain;flex:0 0 auto;
  filter:grayscale(1);opacity:.62;transition:filter .15s,opacity .15s;mix-blend-mode:multiply
}
.pmark:hover{filter:none;opacity:1}
/* a Market logója fekete alapú, ezért invertálva illeszkedik a többihez */
.pmark.is-dark{filter:grayscale(1) invert(1);opacity:.7;mix-blend-mode:multiply}
.pmark.is-dark:hover{filter:grayscale(1) invert(1);opacity:1}
/* a 2020-as logóképek nagy fehér kerettel készültek, ezért nagyobb dobozt kapnak,
   így a tényleges jel optikailag egyforma méretű lesz a szorosan vágottakkal */
/* logónkénti optikai hangolás: a szorosan vágott képek alacsonyabbak,
   a nagy fehér kerettel készültek magasabbak, hogy a jel azonos súlyú legyen */
.pm-tc{height:24px;max-width:96px}
.pm-aj{height:19px;max-width:100px}
.pm-r1{height:44px;max-width:80px}
.pm-bkk{height:24px;max-width:100px}
.pm-mav{height:44px;max-width:80px}
.pm-mk{height:40px;max-width:74px}
.pm-vv{height:44px;max-width:80px}
.pm-sb{height:38px;max-width:70px}
.pm-lp{height:46px;max-width:84px}
.pm-pn{height:42px;max-width:78px}

/* ============ 3. SZEGMENS-VÁLASZTÓ ============ */
.segs{display:grid;gap:10px}
.seg{
  display:flex;gap:13px;align-items:center;padding:14px;
  border:1.5px solid var(--border);border-radius:var(--r);background:var(--white);
  transition:border-color .15s,box-shadow .15s
}
.seg:hover{border-color:var(--charcoal);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.seg-ico{
  width:46px;height:46px;flex:0 0 46px;border-radius:9px;background:var(--surface);
  display:grid;place-items:center
}
.seg-ico svg{width:24px;height:24px;stroke:var(--charcoal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.seg-txt{flex:1;min-width:0}
.seg-txt strong{display:block;color:var(--charcoal);font-size:15.5px;font-weight:700}
.seg-txt span{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.seg-txt em{display:block;color:var(--charcoal);font-size:12.5px;font-style:normal;font-weight:600;margin-top:3px}
/* A régi főoldal külön „Rendőrség által használt alkoholszondák" sávja itt,
   jelvényként. Ott egy kattinthatatlan sötét csík volt sapka-ikonnal; itt
   viszont abban a kártyában áll, ahonnan tovább is lehet menni. */
.seg-txt .seg-badge{
  display:inline-block;margin:3px 0 4px;padding:2px 7px;border-radius:4px;
  background:var(--dark);color:var(--white);
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase
}
.seg-arrow{width:18px;height:18px;flex:0 0 18px;stroke:var(--muted);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ============ 4. VÁLASZTÓ (kvíz-belépő) ============ */
.picker{
  background:var(--dark);color:var(--white);border-radius:12px;padding:22px 18px;
  position:relative;overflow:hidden
}
.picker::after{
  content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:rgba(242,182,0,.09)
}
.picker h2{color:var(--white);font-size:20px;position:relative}
.picker p{color:#c4c7cc;font-size:14px;margin:8px 0 16px;position:relative;max-width:46ch}
.picker .btn{position:relative}
.picker-steps{
  display:flex;gap:6px;margin-top:16px;font-size:11.5px;color:#8f949b;
  position:relative;flex-wrap:wrap
}
.picker-steps span{display:flex;align-items:center;gap:5px}
.picker-steps b{
  width:17px;height:17px;border-radius:50%;background:rgba(242,182,0,.18);color:var(--amber);
  display:grid;place-items:center;font-size:10px;font-weight:800
}

/* ============ 5. TERMÉKKÁRTYÁK ============ */
.prods{display:grid;gap:12px}
.card{
  border:1px solid var(--border);border-radius:var(--r);background:var(--white);
  overflow:hidden;display:flex;flex-direction:column;position:relative
}
.card:hover{box-shadow:0 3px 14px rgba(0,0,0,.07)}
.card-badges{position:absolute;top:9px;left:9px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.bdg{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:4px}
.bdg-top{background:var(--amber);color:var(--charcoal)}
.bdg-sale{background:var(--red-error);color:var(--white)}
.bdg-pro{background:var(--charcoal);color:var(--white)}
.card-img{
  background:var(--surface);display:grid;place-items:center;padding:14px;min-height:150px
}
.card-img img{max-height:130px;width:auto;object-fit:contain}
.card-body{padding:13px;display:flex;flex-direction:column;flex:1;gap:8px}
.card-body h3{font-size:15px;color:var(--charcoal)}
.card-body h3 a{color:inherit}
.card-rate{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.card-spec{list-style:none;display:grid;gap:3px;font-size:12.5px;color:#4a4d52}
.card-spec li{display:flex;gap:6px}
.card-spec li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--amber);flex:0 0 4px;margin-top:7px}
.stock{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--green)}
.stock i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:4px}
.price{font-size:20px;font-weight:800;color:var(--price);letter-spacing:-.02em}
.price-old{font-size:13px;color:var(--disabled);text-decoration:line-through;display:block;font-weight:500}
.price-save{font-size:11.5px;color:var(--red-error);font-weight:700}

/* ============ 6. BIZONYÍTÉK ============ */
.proof{background:var(--surface);border-radius:12px;padding:20px 16px}
.proof-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;margin-bottom:18px}
.pn strong{display:block;font-size:23px;font-weight:800;color:var(--charcoal);letter-spacing:-.03em;line-height:1.1}
.pn span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.reviews{display:grid;gap:10px;margin-top:16px}
.rev{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:13px}
.rev-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.rev-top b{font-size:13.5px}
.rev-verif{font-size:11px;color:var(--green);font-weight:700;display:flex;align-items:center;gap:3px}
.rev-verif svg{width:12px;height:12px;stroke:var(--green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rev p{font-size:13.5px;color:#3d4045;line-height:1.5}
.rev cite{display:block;font-size:11.5px;color:var(--muted);font-style:normal;margin-top:7px}


/* ============ 6.b RÓLUNK BESZÉLNEK (videók) ============ */
/* Facade-minta: kattintásig nincs YouTube-iframe, tehát nulla harmadik felet
   töltünk a kezdeti renderhez. Egy beágyazott YT-lejátszó önmagában
   500 KB fölött van, ez pont az, amit a 17,5 mp-es LCP nem visel el. */
.talk{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.talk-lbl{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px
}
.vids{display:grid;gap:12px}
.vid{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.vid-btn{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;aspect-ratio:16/9;overflow:hidden
}
.vid-btn img{width:100%;height:100%;object-fit:cover;display:block}
.vid-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.45) 100%)
}
.vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .15s
}
.vid-btn:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-play svg{width:22px;height:22px;fill:var(--charcoal);margin-left:3px}
.vid-badge{
  position:absolute;left:9px;top:9px;z-index:2;padding:3px 7px;border-radius:4px;
  background:rgba(0,0,0,.72);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em
}
.vid-body{padding:12px 13px 13px}
.vid-who{font-size:13.5px;font-weight:800;color:var(--charcoal)}
.vid-what{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.vid-cta{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:12.5px;font-weight:700;color:var(--blue);text-decoration:none
}
.vid-cta:hover{text-decoration:underline}
.vid-cta svg{width:13px;height:13px;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* lightbox */
.vmodal{
  position:fixed;inset:0;z-index:900;background:rgba(10,11,13,.9);
  display:flex;align-items:center;justify-content:center;padding:16px
}
.vmodal[hidden]{display:none}
.vmodal-in{width:100%;max-width:900px;aspect-ratio:16/9;position:relative}
.vmodal.is-vert .vmodal-in{max-width:min(420px,90vw);aspect-ratio:9/16}
.vmodal-in>div{width:100%;height:100%}
.vmodal iframe{width:100%;height:100%;border:0;border-radius:var(--r);display:block}
.vmodal-x{
  position:absolute;top:-40px;right:0;width:32px;height:32px;border:0;cursor:pointer;
  background:none;display:flex;align-items:center;justify-content:center
}
.vmodal-x svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}

/* ============ 7. USP ============ */
.usps{display:grid;gap:11px}
.usp{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:var(--r)}
.usp-ico{width:38px;height:38px;flex:0 0 38px;border-radius:8px;background:var(--amber-tint);display:grid;place-items:center}
.usp-ico svg{width:20px;height:20px;stroke:var(--charcoal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.usp strong{display:block;font-size:14.5px;margin-bottom:2px}
.usp span{font-size:13px;color:var(--muted);line-height:1.45}

/* ============ 7.b GYÁRTÓI HÁTTÉR ============ */
.mfg{background:var(--dark);color:var(--white);border-radius:12px;padding:22px 18px}
.mfg h2{color:var(--white);font-size:20px}
.mfg p{color:#c4c7cc;font-size:14.5px;margin:9px 0 16px}
.mfg p strong{color:var(--white)}
.mfg-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:20px;padding-top:18px;border-top:1px solid #2c3038}
.mn strong{display:block;font-size:22px;font-weight:800;color:var(--white);letter-spacing:-.03em;line-height:1.1}
.mn span{display:block;font-size:12px;color:#8f949b;margin-top:2px;line-height:1.35}

/* ============ 8. KALIBRÁLÁS ============ */
.calib{border:2px solid var(--charcoal);border-radius:12px;overflow:hidden}
.calib-head{background:var(--charcoal);color:var(--white);padding:16px}
.calib-head h2{color:var(--white);font-size:19px}
.calib-head p{color:#c4c7cc;font-size:13.5px;margin-top:5px}
/* elcsúszás-diagram a kalibrálás-kártya fejlécében */
.drift{display:block;width:100%;height:auto;margin-bottom:2px}
.drift text{font-family:inherit}
/* véralkohol-skála a kalkulátor-kártyában */
.bacscale{display:block;width:100%;height:auto;margin:16px 0 4px}
.bacscale text{font-family:inherit}
.calib-steps b{font-weight:700;color:var(--charcoal)}
.calib-body{padding:16px}
.calib-steps{list-style:none;display:grid;gap:11px;margin-bottom:16px;counter-reset:c}
.calib-steps li{display:flex;gap:11px;font-size:13.5px;counter-increment:c}
.calib-steps li::before{
  content:counter(c);width:23px;height:23px;flex:0 0 23px;border-radius:50%;
  background:var(--amber);color:var(--charcoal);font-size:12px;font-weight:800;
  display:grid;place-items:center
}
.calib-kicker,.calc-kicker{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:8px
}
.drift{margin-top:16px}
.calib-kicker{color:var(--amber)}
.calc-kicker{color:#8a7318}

/* ============ 9. KALKULÁTOR-HOROG ============ */
.calc{
  border:1px solid var(--border);border-left:4px solid var(--amber);
  border-radius:var(--r);padding:17px;background:var(--white)
}
.calc h2{font-size:18px}
.calc p{font-size:13.5px;color:var(--muted);margin:7px 0 14px}
.calc-close{
  font-size:12.5px;line-height:1.55;color:#5c4d00;background:var(--amber-tint);
  border-radius:8px;padding:11px 13px;margin:0 0 14px !important
}
.calc-vs{display:grid;gap:9px;margin-bottom:14px}
.cvs{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:10px;border-radius:8px;background:var(--surface)}
.cvs svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cvs.est svg{stroke:var(--disabled)}
.cvs.meas svg{stroke:var(--green)}
.cvs b{display:block;margin-bottom:1px}

/* ============ 10. B2B ============ */
.b2b{background:var(--dark);color:var(--white);border-radius:12px;padding:22px 18px}
.b2b h2{color:var(--white);font-size:20px}
.b2b>p{color:#c4c7cc;font-size:14px;margin:8px 0 16px}
.b2b-list{list-style:none;display:grid;gap:9px;margin-bottom:18px}
.b2b-list li{display:flex;gap:9px;font-size:13.5px;color:#e2e4e7}
.b2b-list svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b2b-refs-lbl{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8f949b;margin-top:20px;padding-top:18px;border-top:1px solid #2c3038;margin-bottom:11px
}
/* sötét háttéren a logók fehér kártyán ülnek, különben a sötét szövegű
   logók nem látszanának */
.b2b-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.b2b-refs img{
  width:100%;height:56px;object-fit:contain;background:var(--white);border-radius:7px;
  padding:4px 6px;filter:grayscale(1);opacity:.88;transition:filter .15s,opacity .15s
}
.b2b-refs img:hover{filter:none;opacity:1}

/* ajánlatkérő űrlap (asztali) */
.b2b-form{background:rgba(255,255,255,.05);border:1px solid #2c3038;border-radius:12px;padding:24px}
.b2b-form h3{color:var(--white);margin-bottom:7px;font-size:19px}
.b2b-lead{color:#b6bac0;font-size:13.5px;line-height:1.55;margin-bottom:15px}
.b2b-fields{display:grid;gap:11px}
.b2b-in{
  background:rgba(255,255,255,.06);border:1px solid #343941;border-radius:8px;
  padding:12px;color:#8f949b;font-size:14px
}
.b2b-note{color:#8f949b;font-size:12px;line-height:1.5}
/* GDPR-hozzájárulás: az ajánlatkérés személyes adatot gyűjt, tehát a
   hozzájárulásnak külön, előre be nem jelölt jelölőnégyzetnek kell lennie */
.b2b-consent{display:flex;gap:9px;align-items:flex-start;cursor:pointer;margin-top:2px}
.b2b-consent input{
  width:17px;height:17px;flex:0 0 17px;margin-top:1px;accent-color:var(--amber);cursor:pointer
}
.b2b-consent span{color:#b6bac0;font-size:12.5px;line-height:1.45}
.b2b-consent a{color:#d8dade;text-decoration:underline}
.b2b-consent a:hover{color:var(--amber)}

/* ============ 11. TUDÁSTÁR ============ */
.arts{display:grid;gap:10px}
/* A cikk-kártya egésze <a>, ezért a benne lévő szöveg örökölné a link
   színét. A cím maradjon hangsúlyos, a leírás viszont halk. */
.art-b h3{font-size:15px;color:var(--charcoal);line-height:1.35;margin-bottom:6px}
.art-b p{color:var(--muted);font-size:13px;line-height:1.55}
.art:hover .art-b h3{color:var(--blue)}
.art{display:flex;gap:12px;padding:13px;border:1px solid var(--border);border-radius:var(--r);align-items:center}
.art:hover{border-color:var(--charcoal);text-decoration:none}
.art-n{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--amber);
  border:1px solid var(--border);border-radius:5px;padding:4px 6px;flex:0 0 auto
}
.art strong{display:block;font-size:14px;color:var(--charcoal);line-height:1.35}
.art span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* ============ 12. SEO-SZÖVEG ============ */
.seo{background:var(--surface);border-radius:12px;padding:18px}
.seo h2{font-size:18px}
.seo-p{font-size:14px;color:#3d4045;line-height:1.65}
.seo-p h3{font-size:15px;color:var(--charcoal)}
.seo-p p{margin-bottom:10px}
/* mobil: vízszintesen görgethető chip-sor, alatta egy panel.
   Nem harmonika, mert ott a hét fejléc önmagában újra hosszú blokkot adna. */
.seo-nav{
  display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;margin:14px 0 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.seo-nav::-webkit-scrollbar{display:none}
.seo-t{
  flex:0 0 auto;white-space:nowrap;cursor:pointer;font-family:inherit;
  background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:7px 13px;font-size:13px;font-weight:600;color:#4a4d52
}
.seo-t.is-on{background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
.seo-p{display:none}
.seo-p.is-on{display:block}
.seo-p h3{margin:0 0 6px}

/* ============ 13. FAQ ============ */
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--border);border-radius:var(--r);background:var(--white)}
.faq summary{padding:13px;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--amber);font-size:20px;font-weight:800;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq p{padding:0 13px 13px;font-size:13.5px;color:#3d4045}

/* ============ 14. LÁBLÉC ============ */
footer{background:var(--dark);color:#a8adb5;padding:30px 0 26px;margin-top:32px}
footer .flogo{height:28px;width:auto;margin-bottom:14px}

/* bizalmi sáv: az élő footer négy szövegblokkja állításokká tömörítve */
.ftrust{display:grid;gap:14px;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #2c3038}
.ft{display:flex;gap:11px;align-items:flex-start}
.ft svg{
  width:20px;height:20px;flex:0 0 20px;margin-top:2px;
  stroke:var(--amber);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.ft strong{display:block;color:var(--white);font-size:14px;font-weight:700;margin-bottom:2px}
.ft span{display:block;font-size:12.5px;line-height:1.45}

.fcols{display:grid;gap:26px}
.fcol h4{color:var(--white);font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:11px;font-weight:800}
.fcol ul{list-style:none;display:grid;gap:7px}
.fcol a{color:#a8adb5;font-size:13.5px}
.fcol a:hover{color:var(--amber)}
.fabout{font-size:13.5px;line-height:1.6;margin-bottom:13px}
.fphone{display:inline-block;color:var(--white)!important;font-weight:800;font-size:18px;letter-spacing:.01em}
.fhours{font-size:12.5px;margin-top:5px;line-height:1.55}
.fhours a{color:#a8adb5}
.ft-gls{
  display:block;margin-top:8px;height:26px;width:auto;
  background:var(--white);border-radius:5px;padding:4px 7px
}
.fbadge{display:block;height:76px;width:auto;margin-top:16px}
.fsocial{display:flex;gap:9px;margin-top:15px}
.fsocial a{
  width:34px;height:34px;border:1px solid #2c3038;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s
}
.fsocial a:hover{border-color:var(--amber)}
.fsocial svg{width:17px;height:17px;stroke:#a8adb5;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fsocial a:hover svg{stroke:var(--amber)}
/* kitöltött elem a vonalas ikonon belül (YouTube lejátszó-háromszög) */
.fsocial .ico-fill{fill:#a8adb5;stroke:none}
.fsocial a:hover .ico-fill{fill:var(--amber)}

.fbot{border-top:1px solid #2c3038;margin-top:26px;padding-top:18px;font-size:12px;line-height:1.6;display:grid;gap:7px}
.fcopy{color:#6f757e}
/* prototípus-jelölés: még nem létező, pótlandó hivatkozás */
.f-todo{
  color:#8a6d1f!important;border-bottom:1px dashed #8a6d1f;cursor:help
}

/* ============ MOBIL STICKY AKCIÓSÁV ============ */
.mobbar{
  position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--white);
  border-top:1px solid var(--border);box-shadow:0 -2px 14px rgba(0,0,0,.09);
  display:flex;gap:9px;padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom))
}
.mobbar .btn{flex:1}
.mobbar .btn-tel{flex:0 0 48px;padding:13px 0}
.mobbar svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.desk-only{display:none !important}

/* ==================================================================
   ============  DESKTOP: ÖNÁLLÓ ELRENDEZÉS, NEM NAGYÍTÁS  ==========
   ================================================================== */
@media (min-width:1024px){
  body{padding-bottom:0;font-size:16.5px}
  .mobbar,.mob-only{display:none !important}
  .desk-only{display:block !important}
  /* a flex-elrendezésű desk-only elemeknek vissza kell kapniuk a flexet,
     különben a fenti !important block-ká lapítja őket */
  .hdr-nav.desk-only,.hdr-tel.desk-only{display:flex !important}
  .wrap{padding:0 32px}
  h1{font-size:44px}
  h2{font-size:29px;margin-bottom:8px}
  h3{font-size:17px}
  .sec{padding:56px 0}
  .sec-head{margin-bottom:26px;max-width:70ch}
  .sec-head .lead{font-size:16px;margin-top:4px}

  /* --- fejléc: utility sáv + teljes menü --- */
  .utility{
    display:block;background:var(--charcoal);color:#a8adb5;font-size:12px;padding:6px 0
  }
  .utility-in{display:flex;align-items:center;gap:22px}
  .utility ul{display:flex;gap:18px;list-style:none}
  .utility li{display:flex;align-items:center;gap:6px}
  .utility svg{width:12px;height:12px;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .utility .u-sp{flex:1}
  /* A jobb oldali két link eddig fehér és félkövér volt, ezért kilógott a
     bal oldali halk bizalmi állítások mellől. Most azonos színsúlyú, 500-as
     vastagságú, és egy finom alsó vonal jelzi, hogy kattintható. */
  .utility a{
    color:#c4c7cc;font-weight:500;letter-spacing:.01em;
    border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:1px
  }
  .utility a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6);text-decoration:none}
  header.hdr{position:sticky;top:0}
  .hdr-in{height:62px;gap:12px}
  .hdr-logo img{height:26px}
  .hdr-nav{display:flex;gap:0;list-style:none;flex:0 0 auto}
  /* kisebb betű, nagyobb betűköz: így a menü halkabb, de olvashatóbb marad */
  .hdr-nav a{
    color:#e2e4e7;font-size:13px;font-weight:600;letter-spacing:.02em;
    padding:8px 12px;border-radius:6px;display:block;white-space:nowrap
  }
  .hdr-nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
  .hdr-nav .is-b2b{color:var(--amber)}
  .hdr-nav .cav{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px;margin-left:2px;opacity:.65}
  .hdr-nav .has-drop{position:relative}
  .hdr-nav .has-drop>a{display:flex;align-items:center;gap:3px}
  .drop{
    position:absolute;top:100%;left:0;min-width:290px;background:var(--white);
    border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.22);
    padding:8px;display:none;z-index:80
  }
  .hdr-nav .has-drop:hover .drop{display:block}
  .drop a{display:block;padding:9px 11px;border-radius:7px;white-space:nowrap}
  .drop a:hover{background:var(--surface);text-decoration:none}
  .drop b{display:block;color:var(--charcoal);font-size:14.5px;font-weight:700;line-height:1.3}
  .drop span{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
  .drop-sep{display:block;height:1px;background:var(--border);margin:7px 4px}
  .drop-all b{color:var(--blue)}
  .drop-sale b{color:var(--red-error)}
  /* Telefon-pill a logó mellett. Kiemelt, mert az asztali vevő kosárértéke
     majdnem kétszerese a mobilosénak, és ez a szegmens telefonál. */
  /* A pill a fejléc magasságához igazodik: a 62px-es sávban egy 44px-es
     doboz dominált. Kisebb ikon, szűkebb belső tér, halkabb magyarázó sor. */
  .hdr-tel{
    display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;
    background:rgba(255,255,255,.06);border:1px solid #30353d;border-radius:8px;
    padding:5px 11px 5px 6px;margin-left:4px;transition:background .15s,border-color .15s
  }
  .hdr-tel:hover{background:rgba(242,182,0,.12);border-color:var(--amber);text-decoration:none}
  .hdr-tel-ico{
    width:23px;height:23px;flex:0 0 23px;border-radius:6px;background:var(--amber);
    display:grid;place-items:center
  }
  .hdr-tel-ico svg{width:12.5px;height:12.5px;stroke:var(--charcoal);fill:none;stroke-width:2.2}
  /* 700-as vastagság és 16px: a menüpontok 14,5px-esek, ehhez képest a korábbi
     800/18px külön súlycsoportban volt, és kilógott a fejléc ritmusából */
  .hdr-tel-txt b{
    display:block;color:var(--white);font-weight:700;font-size:14.5px;letter-spacing:-.01em;line-height:1.2
  }
  .hdr-tel-txt small{display:block;font-size:10px;font-weight:500;color:#8a8f96;letter-spacing:.01em}
  /* 2026-08-07 (Csaba): a „Telefonos rendelés" sor minden asztali szélességen
     látszik, nem csak 1340px fölött. A pill többi tömörítése (kisebb belső tér,
     kisebb betű) marad, hogy a menü elférjen mellette. */
  @media (max-width:1340px){
    .hdr-tel{padding:5px 9px 5px 6px}
    .hdr-tel-txt b{font-size:14px}
    .hdr-nav a{padding:8px 9px;font-size:12.5px}
  }
  .trustbar{display:none}

  /* --- hero: kétoszlopos, jobb oldalon a vezértermék --- */
  .hero{padding:52px 0 0;background:linear-gradient(180deg,#fafaf9,#fff)}
  /* `start`, nem `center`: középre igazítva a rövidebb hasáb lecsúszik, és a
     kicker meg a „legtöbben ezt választják" jelvény nem egy vonalban indul.
     Így a két hasáb teteje összeér. */
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
  /* optikai korrekció: a jelvénynek 5px felső belső tere van, a kickernek nincs,
     ezért a két SZÖVEG máskülönben 4-5px-re csúszna egymástól */
  .hero-kicker{margin-top:5px}
  .hero h1{font-size:46px;margin-bottom:16px;max-width:15ch}
  .hero-sub{font-size:18px;margin-bottom:22px;color:#3d4045}
  .hero-pts{gap:11px;margin-bottom:26px}
  .hero-pts li{font-size:16px}
  .hero-cta{display:flex;gap:12px}
  .hero-cta .btn{font-size:16px;padding:15px 26px}
  .hero-microtrust{font-size:14px;gap:14px}
  /* a badge és a fülek a kártya FÖLÖTT ülnek, a kártya csatlakozik hozzájuk */
  .hero-visual{display:block;position:relative}
  /* GALÉRIA-VÁLTOZAT (Csaba választása, 2026-07-28).
     Egyetlen doboz, nem kettő: a fülek chipként ülnek a kártya tetején, nem
     külön keretrendszerként fölötte. A prémium hatás nem díszítésből jön,
     hanem abból, hogy kevesebb a keret és nagyobb a levegő a fotó körül. */
  .hv{
    background:var(--white);border-radius:16px;overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 38px rgba(0,0,0,.08)
  }
  .hv-tabs{display:flex;gap:8px;padding:16px 20px 0}
  .hv-tab{
    cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;
    padding:8px 16px;border-radius:20px;border:1px solid var(--border);
    background:var(--white);color:var(--muted);transition:background .15s,color .15s,border-color .15s
  }
  .hv-tab:hover{color:var(--charcoal)}
  .hv-tab.is-on{background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
  .hv-card[hidden]{display:none}
  /* a fotó saját tónusos háttéren, vetett árnyékkal: a szonda tárgyként
     jelenik meg, nem adatlapként */
  /* flex, nem grid: gridben a kép `max-height:100%`-a a saját tartalmához
     méretezett cellára hivatkozna, ezért a fotó kilógott a keretből és
     ráúszott a szövegre. Flexben a fix magasságú konténerhez viszonyít. */
  .hv-shot{
    background:linear-gradient(160deg,#f7f7f6,#e9e9e7);height:300px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;position:relative;
    padding:58px 24px 22px
  }
  .hv-shot img{
    max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
    filter:drop-shadow(0 14px 26px rgba(0,0,0,.18))
  }
  /* a jelvény a képre költözött, tehát nem foglal külön sort a kártya fölött.
     A shot felső belső tere ezért 54px: enélkül a termék a jelvény alá lógna. */
  .hv-badge{
    position:absolute;top:14px;left:16px;z-index:2;
    background:rgba(33,33,33,.9);color:var(--white);
    font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    padding:5px 10px;border-radius:5px
  }
  .hv-body{padding:22px 24px 24px}
  .hv-link{
    display:block;text-align:center;margin-top:16px;padding-top:15px;
    border-top:1px solid var(--border);font-size:13.5px;font-weight:700
  }
  .hv-body h3{font-size:19px;letter-spacing:-.01em}
  .hv-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
  .hv-row .price{font-size:29px}

  /* --- partnerek: mind a kilenc egy sorban, középre --- */
  .partners{margin-top:44px;padding:30px 0 28px}
  .prow-lbl{margin-bottom:18px}
  /* nowrap + kis alap-gap: a space-between osztja el a maradékot, így nem
     csordul túl a konténeren, de kitölti a teljes szélességet */
  .pmarks{gap:0 14px;flex-wrap:nowrap;justify-content:space-between}
  .pm-tc{height:31px;max-width:124px}
  .pm-aj{height:24px;max-width:124px}
  .pm-r1{height:52px;max-width:93px}
  .pm-bkk{height:29px;max-width:122px}
  .pm-mav{height:52px;max-width:93px}
  .pm-pn{height:48px;max-width:88px}
  .pm-mk{height:46px;max-width:84px}
  .pm-vv{height:52px;max-width:93px}
  .pm-sb{height:40px;max-width:74px}
  .pm-lp{height:50px;max-width:92px}
  .pfoot{grid-column:1 / -1;margin-top:8px;padding-top:16px}

  /* --- szegmensek: 3 oszlop, a hero alatt --- */
  .segs{grid-template-columns:repeat(3,1fr);gap:16px;padding:44px 0 0}
  .seg{flex-direction:column;align-items:flex-start;padding:22px;gap:14px}
  .seg-ico{width:52px;height:52px;flex:0 0 52px}
  .seg-ico svg{width:27px;height:27px}
  .seg-txt strong{font-size:18px;margin-bottom:4px}
  .seg-txt span{font-size:14px}
  .seg-txt em{margin-top:8px;color:var(--blue)}
  .seg-arrow{display:none}

  /* --- termékrács --- */
  .prods{grid-template-columns:repeat(4,1fr);gap:18px}
  .card-img{min-height:200px;padding:20px}
  .card-img img{max-height:180px}
  .card-body{padding:16px;gap:9px}
  .card-body h3{font-size:16.5px}
  .price{font-size:22px}

  /* --- ÖSSZEHASONLÍTÓ TÁBLA: kizárólag desktop --- */
  /* NEM lehet overflow:auto. Az `overflow-x:auto` a böngészőben függőlegesen is
     scrollportot csinál, és onnantól a sticky fejléc nem a viewporthoz, hanem
     ehhez a dobozhoz igazodik: mivel abban nincs mit görgetni, a `top` értéke
     állandó eltolássá válik, és a fejléc rácsúszik az első sorra.
     A tábla min-width-je 860px, a wrap belmérete 1024px-en is 960px, tehát
     vízszintes görgetésre amúgy sincs szükség: ez a blokk csak asztalin él. */
  .cmp-scroll{overflow:visible}
  table.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:860px}
  table.cmp th,table.cmp td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--border)}
  table.cmp th:first-child,table.cmp td:first-child{padding-left:14px}
  table.cmp th:last-child,table.cmp td:last-child{padding-right:14px;text-align:right}
  table.cmp thead th{
    background:var(--charcoal);color:var(--white);font-size:12px;letter-spacing:.07em;
    text-transform:uppercase;font-weight:800;position:sticky;top:calc(73px + var(--shipbar));z-index:5
  }
  table.cmp thead th:first-child{border-radius:8px 0 0 0}
  table.cmp thead th:last-child{border-radius:0 8px 0 0}
  table.cmp tbody tr:hover td{background:#fafaf9}
  table.cmp .tprod{display:flex;align-items:center;gap:10px;min-width:180px}
  table.cmp .tprod img{width:46px;height:46px;flex:0 0 46px;object-fit:contain;background:var(--surface);border-radius:7px;padding:4px}
  table.cmp .tprod b{display:block;font-size:14px;color:var(--charcoal);line-height:1.25}
  table.cmp .tprod small{color:var(--muted);font-size:12px}
  table.cmp .tprice{font-weight:800;color:var(--price);font-size:15.5px;white-space:nowrap}
  table.cmp .tprice s{display:block;font-weight:500;font-size:12.5px;color:var(--disabled)}
  table.cmp .pick{background:var(--amber-tint)}
  table.cmp .pick-tag{
    display:inline-block;background:var(--amber);color:var(--charcoal);font-size:10px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-bottom:4px
  }
  .yes{color:var(--green);font-weight:700}
  .no{color:var(--disabled)}

  /* --- két hasábos szekciók --- */
  /* stretch, nem start: a két kártya azonos magasságú legyen. A rövidebbik
     (kalkulátor) belül flex-oszlop, a gombja margin-top:auto-val az aljára ül,
     így a két blokk alja egy vonalban zár. */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
  .calib,.calc{display:flex;flex-direction:column}
  .calib-body{flex:1;display:flex;flex-direction:column}
  .calib-body .btn{margin-top:auto}
  .calc>.btn{margin-top:auto}
  .split-3{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
  .usps{grid-template-columns:repeat(4,1fr);gap:18px}
  .usp{flex-direction:column;padding:22px}
  .usp strong{font-size:16px;margin-top:4px}
  .proof{padding:32px}
  .proof-nums{grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:26px}
  .pn strong{font-size:34px}
  .pn span{font-size:13.5px}
  .reviews{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
  /* Négy oszlop, nem 2x2. A 2x2-es rács kb. 1100px-et evett, ami ebben a
     blokkban már a harmadik hosszú elem a számok és a vélemények után. Egy
     sorban a magasság kb. 400px, és a borító 290px széles: az arc és a
     helyszín ezen még tisztán felismerhető, márpedig a videó dolga itt az,
     hogy a látogató lássa, valódi emberek beszélnek rólunk. */
  .vids{grid-template-columns:repeat(4,1fr);gap:16px}
  .talk{margin-top:28px;padding-top:24px}
  .vid-who{font-size:14px}
  .vid-what{font-size:12.5px}
  .vid-play{width:44px;height:44px}
  .vid-play svg{width:18px;height:18px}
  .vid-body{padding:11px 12px 12px}
  .vid-cta{font-size:12px;margin-top:8px}
  .picker{padding:38px}
  .picker h2{font-size:28px}
  .picker p{font-size:16px}
  .calib-head{padding:24px}
  .calib-body{padding:24px}
  .calc{padding:28px}
  .calc-vs{grid-template-columns:1fr 1fr}
  .b2b{padding:38px}
  .b2b h2{font-size:28px}
  /* `start`, nem `center`: az űrlap-hasáb magasabb, ezért középre igazítva a bal
     oldal lecsúszott. A bal hasáb felső belső tere megegyezik az űrlapkártya
     paddingjával, így a kicker és az űrlap címe egy vonalban indul. */
  .b2b-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .b2b-grid>div:first-child{padding-top:24px}
  /* szellősebb bal hasáb: ez a blokk a legnagyobb kosárértékű vevőnek szól,
     nála a tömör tördelés nem előny */
  .b2b-grid>div:first-child>p{font-size:16px;line-height:1.65;margin:12px 0 24px}
  .b2b-list{gap:15px;margin-bottom:0}
  .b2b-list li{font-size:15px;line-height:1.5}
  .b2b-list svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
  /* a referenciafal a blokk teljes szélességében: 15 logó egy sorban túl apró
     lenne, ezért 8 oszlop, két sorban */
  .b2b-refs{grid-template-columns:repeat(8,1fr);gap:10px}
  .b2b-refs img{height:58px;padding:6px 8px}
  .b2b-refs-lbl{margin-top:34px;padding-top:26px}
  .mfg{padding:38px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  .mfg h2{font-size:28px}
  .mfg p{font-size:16px}
  .mfg-nums{grid-template-columns:1fr;gap:20px;margin-top:0;padding-top:0;border-top:0;border-left:1px solid #2c3038;padding-left:32px}
  .mn strong{font-size:28px}
  .mn span{font-size:13px}
  .arts{grid-template-columns:repeat(3,1fr)}
  .art{flex-direction:column;align-items:flex-start;padding:20px;min-height:120px}
  .seo{padding:34px}
  /* asztali: bal oldali témalista, jobb oldalon a szöveg. A blokk így egy
     képernyőn elfér, a hét szakasz mégis mind a HTML-ben marad. */
  .seo-tabs{display:grid;grid-template-columns:262px 1fr;gap:34px;margin-top:18px}
  .seo-nav{
    display:block;overflow:visible;padding:0;margin:0;
    border-right:1px solid var(--border);padding-right:14px
  }
  .seo-t{
    display:block;width:100%;text-align:left;white-space:normal;border:0;
    background:none;border-radius:7px;padding:9px 11px;font-size:14px;line-height:1.35;
    border-left:3px solid transparent
  }
  .seo-t:hover{background:rgba(0,0,0,.035)}
  .seo-t.is-on{
    background:var(--white);border-left-color:var(--amber);
    color:var(--charcoal);font-weight:700
  }
  .seo-panels{min-height:170px}
  .seo-p h3{font-size:17px;margin:0 0 8px}
  .seo-p p{font-size:14.5px;line-height:1.7;max-width:64ch}
  .faq{grid-template-columns:1fr 1fr;gap:12px}
  .fcols{grid-template-columns:1.5fr 1fr 1.15fr 1fr;gap:44px}
  .ftrust{grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:32px;margin-bottom:32px}
  .fbot{grid-template-columns:1fr auto;align-items:baseline;column-gap:32px;margin-top:32px;padding-top:20px}
  .fcopy{text-align:right}
  footer{padding:52px 0 34px}
}

@media (min-width:768px) and (max-width:1023px){
  .prods{grid-template-columns:1fr 1fr}
  .segs{grid-template-columns:repeat(3,1fr)}
  .usps{grid-template-columns:1fr 1fr}
  .proof-nums{grid-template-columns:repeat(4,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
}

/* ============ CIKK: BEÁGYAZOTT VIDEÓ ÉS CSUPASZ HIVATKOZÁS ============ */
/* 2026-08-10 (Csaba): a régi WP-cikkekből örökölt YouTube-beágyazások fix,
   1165 pixeles szélességgel jöttek. Ez 390 pixeles mobilon 791 pixelt lógott ki
   vízszintesen, tehát az egész cikk oldalra tolható lett. Mostantól a videó a
   szövegoszlop szélességét veszi fel, 16:9-ben. A csupaszon, teljes hosszban
   kiírt hivatkozások (Wikipédia-URL-ek a forrásjegyzékben) pedig sortörhetők:
   URL-ben nincs szóköz, ezért törés nélkül egyetlen szóként feszítik szét a sort. */
.art-body iframe{
  display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
  border:0;border-radius:12px;margin:0 0 22px
}
.art-body .post-video{margin:0 0 22px}
.art-body a{overflow-wrap:anywhere}
.art-body h1,.art-body h2,.art-body h3,
.art-body h4,.art-body h5,.art-body h6{overflow-wrap:anywhere}

/* Cikk-borító (2026-08-10, Csaba): a főoldali hat kártya közül az öt cikké a
   cikk élén is megjelenik. Ez NEM a 2026-08-07-i, visszavont Openverse-képek
   visszahozása: ezek a saját fotóink. Csak ez az öt cikk kap borítót, a
   maradék 69 kép nélkül marad. */
.art-borito{margin:0 0 20px;border-radius:14px;overflow:hidden;background:var(--surface);line-height:0}
.art-borito img{display:block;width:100%;height:auto}

/* ===== MOBILMENU v2 · 2026-08-10 ===== */
/* Kereső a menü tetején. Az .icobtn alap-stílusa négyzetes ikongomb, ezért
   itt teljes szélességűre és szöveges sávra írjuk felül. */
.mobmenu a.mm-kereso{
  display:flex;align-items:center;gap:10px;width:auto;height:auto;
  padding:12px 13px;margin-bottom:16px;border:1px solid var(--border);
  border-radius:10px;background:var(--paper,#f6f7f8)
}
.mobmenu a.mm-kereso:hover{border-color:var(--charcoal)}
.mobmenu a.mm-kereso svg{
  width:19px;height:19px;flex:0 0 19px;stroke:var(--charcoal);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round
}
.mobmenu a.mm-kereso span{
  font-size:14.5px;font-weight:600;color:#6f757e
}
/* A választó-kvíz kártyája (2026-08-10, 2. kör — Csaba): eddig tömör sárga
   lap volt, 2px fekete kerettel és tömör árnyékkal, közvetlenül a kereső
   alatt. Ez erősebb jel volt, mint maga a kereső, és elvonta róla a
   figyelmet. Most halkabb: fehér kártya, bal oldali sárga jelzősáv és sárga
   ikon-korong. A kártya így a lista tagja marad, csak meg van jelölve.
   Halvány sárga hátteret szándékosan NEM kap: az egy korábbi körben már
   megbukott, mert hover-állapotnak látszott, nem kiemelésnek. */
.mobmenu a.mm-hero{
  background:var(--white);border:1px solid var(--border);
  border-left:4px solid var(--amber);border-radius:10px;
  box-shadow:none;padding:11px 12px;margin-bottom:9px;gap:10px
}
.mobmenu a.mm-hero:hover{border-color:var(--charcoal);border-left-color:var(--amber)}
.mobmenu .mm-hero>.mm-hero-ico{
  width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--amber)
}
.mm-hero-ico svg{width:17px;height:17px;stroke:var(--charcoal);stroke-width:2.1}
.mm-hero-tag{font-size:10px;font-weight:800;letter-spacing:.1em;color:#8a8f97}
.mobmenu .mm-hero b{font-size:14.5px;font-weight:700}
.mobmenu .mm-hero .mm-hero-txt>span{color:var(--muted)}
.mm-hero-arw{width:16px;height:16px;flex:0 0 16px;stroke:#b6bac0;stroke-width:2.2}
/* szakaszcím nélküli, önálló sor (Szakmai útmutató) */
.mm-sec-egy{margin-bottom:18px}
/* Információk-harmonika: halkabb, mint a szakaszok, hogy ne versenyezzen
   a termékekkel, de kattintható rangja legyen. */
.mm-more{
  border:1px solid var(--border);border-radius:10px;background:var(--white);
  margin-bottom:6px
}
.mm-more>summary{
  list-style:none;cursor:pointer;padding:13px 13px;
  font-size:14.5px;font-weight:700;color:var(--charcoal);
  display:flex;align-items:center;justify-content:space-between
}
.mm-more>summary::-webkit-details-marker{display:none}
.mm-more>summary::after{
  content:'';width:9px;height:9px;flex:0 0 9px;margin-left:10px;
  border-right:2px solid #6f757e;border-bottom:2px solid #6f757e;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s
}
.mm-more[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.mm-more[open]>summary{border-bottom:1px solid var(--border)}
.mm-more-in{padding:10px 10px 4px}
.mobmenu .mm-more-in a{margin-bottom:6px}
.mobmenu .mm-more-in b{font-size:14px;font-weight:600}
/* ===== /MOBILMENU v2 ===== */

/* ===== ASZTALI MENU v2 · 2026-08-10 ===== */
.drop a.drop-quiz{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--border);
  border-left:4px solid var(--amber);border-radius:10px;
  padding:10px 11px;margin-bottom:9px;box-shadow:none
}
.drop a.drop-quiz:hover{background:var(--surface);border-color:var(--border);border-left-color:var(--amber)}
.drop .drop-quiz>.dq-ico{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--amber);
  display:grid;place-items:center;margin:0;font-size:0
}
.drop .drop-quiz .dq-ico svg{
  width:16px;height:16px;stroke:var(--charcoal);fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round
}
.drop .drop-quiz>.dq-txt{display:block;flex:1;min-width:0;color:inherit;font-size:inherit;margin:0}
.drop .drop-quiz .dq-tag{
  display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8f97;margin-bottom:1px
}
.drop .drop-quiz b{color:var(--charcoal);font-size:14px;font-weight:700}
.drop .drop-quiz .dq-txt>span{
  display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:1px
}
.drop .drop-quiz .dq-arw{
  width:15px;height:15px;flex:0 0 15px;stroke:#b6bac0;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round
}
/* ===== /ASZTALI MENU v2 ===== */
