/* ==========================================================================
   MF Shop Kit — alapréteg

   SZABÁLY: ebben a fájlban NEM lehet beírt színkód, betűméret, térköz,
   sarokkerekítés vagy árnyék. Csak var(--...) tokenek, amiket a brand.json-ból
   a PHP állít elő. Az eszkozok/ellenorzo.py ezt ellenőrzi.

   Kivétel egyedül a szerkezeti geometria (pl. 100%, 1px szegélyvastagság,
   töréspontok), mert az nem arculati kérdés.
   ========================================================================== */

/* --------------------------------------------------------------- betűtípus

   A saját Inter, NEM a Google CDN-jéről és NEM véletlenül a WooCommerce-ből.
   Két indok:
     - a gstatic-ról töltés külső kérés, GDPR-szempontból is kérdéses,
     - a WooCommerce Inter-e `font-display: fallback`, és eltűnne a plugin
       cseréjekor. Arculati elem nem függhet egy plugin melléktermékétől.

   KÉT fájl kell, nem egy. A `-ext` tartalmazza a U+0100-024F tartományt,
   amiben a magyar ő és ű van. Enélkül a két ékezet más betűtípussal
   renderelődne, és a szöveg szemmel láthatóan összevissza állna.
   -------------------------------------------------------------------------- */

@font-face{
	font-family:'Inter';
	src:url('fonts/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('fonts/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;
}

/* --------------------------------------------------------------- alaphelyzet */

/* TELJES nullázás, az ALKOPRO prototípusával azonosan.
   Enélkül a böngésző alapértelmezett `ul { padding-left: 40px }`-ja
   behúzná a lábléc linklistáit, és a bekezdések alá margó kerülne. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
	font-family: var(--font-ui);
	/* Táblázatos számjegyek és áthúzott nulla az EGÉSZ oldalon: az árak,
	   mennyiségek és mért értékek így nem ugrálnak oszlopban. */
	font-feature-settings: 'tnum' 1, 'zero' 1;
	/* Az alapméret 16 px. A 15 px a MINIMUM, nem az alapérték: a törzsszöveg
	   ennél kisebb sehol nem lehet (40-50+ vevőkör). */
	font-size: var(--fs-base);
	line-height: 1.55;
	color: var(--ink);
	background: var(--n-0);
	/* A törzs soha ne csússzon el vízszintesen. Egy kilógó elem mobilon
	   „oldalra húzhatóvá" teszi az egész boltot. */
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* A táblázatok és a kódblokkok SAJÁT magukban görögjenek. */
.mf-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Aláhúzás nélkül, mint a prototípusban. Ahol aláhúzás kell (folyó
   szövegben lévő hivatkozás), azt a .mf-proza adja vissza. */
a { color: var(--link); text-decoration: none; }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Billentyűzetes fókusz mindig látszik. Egérrel nem zavar. */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ------------------------------------------------------------------ tipográfia */

/* A címsorok NEM kapnak globális margót: a nullázás után minden komponens
   maga állítja be a sajátját. Így a lábléc h4-e vagy egy kártya címe nem
   örököl olyan térközt, amit aztán felül kellene írni. */
h1, h2, h3, h4 {
	font-weight: var(--fw-black);
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--ink);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

strong, b { font-weight: var(--fw-bold); }

small { font-size: var(--fs-sm); }

/* Számok, mért értékek, cikkszám. Táblázatos számjegyekkel, hogy az
   árak oszlopban ne ugráljanak. */
.mf-num {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
}

/* SZABÁLYRENDSZER 8: 13 px alatt CSAK nagybetűs, ritkított címke.
   Ezért a mikro-méretek nem szabadon használhatók, hanem ehhez az
   osztályhoz kötöttek. */
.mf-cimke {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.mf-cimke--mikro { font-size: var(--fs-3xs); letter-spacing: .14em; }

/* ------------------------------------------------------------------- elrendezés */

.mf-wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.mf-oldal { min-height: 60vh; padding-block: var(--sp-32); }

/* Csak képernyőolvasónak. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

/* Ugrás a tartalomra: billentyűzetes látogatónak az első elem. */
.mf-skip {
	position: absolute; left: var(--sp-8); top: -100px;
	z-index: 100;
	padding: var(--sp-8) var(--sp-16);
	background: var(--brand); color: var(--brand-ink);
	font-weight: var(--fw-bold);
	border-radius: var(--r-8);
	transition: top .15s;
}
.mf-skip:focus { top: var(--sp-8); }

/* ---------------------------------------------------------------------- gombok */

.mf-gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-8);
	padding: var(--sp-12) var(--sp-20);
	border: 0;
	border-radius: var(--r-8);
	font-size: var(--fs-md);
	font-weight: var(--fw-black);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, transform .05s;
}

/* Az elsődleges gomb a márkaszín. SZABÁLYRENDSZER: a márkaszín a felület
   legfeljebb 10%-a, ezért oldalanként EGY elsődleges gomb a cél. */
.mf-gomb--fo {
	background: var(--brand);
	color: var(--brand-ink);
	/* A tömör alsó él az alkopro egyik karakteres jegye: nem dísz, hanem
	   ettől érződik megnyomhatónak a gomb. */
	box-shadow: var(--sh-hard);
}
.mf-gomb--fo:hover { background: var(--brand-hover); }
.mf-gomb--fo:active { transform: translateY(2px); box-shadow: none; }

.mf-gomb--masodlagos {
	background: var(--n-0);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--n-200);
}
.mf-gomb--masodlagos:hover { background: var(--n-50); }

.mf-gomb--halk {
	background: transparent;
	color: var(--n-600);
	font-weight: var(--fw-medium);
	padding-inline: var(--sp-8);
}
.mf-gomb--halk:hover { color: var(--ink); }

.mf-gomb[disabled], .mf-gomb[aria-disabled="true"] {
	background: var(--n-200);
	color: var(--n-500);
	box-shadow: none;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------- kártya */

.mf-kartya {
	background: var(--n-0);
	border: 1px solid var(--n-150);
	border-radius: var(--r-10);
	box-shadow: var(--sh-2);
}

.mf-kartya__test { padding: var(--sp-16); }

/* --------------------------------------------------------------------- jelzések */

.mf-jelzes {
	display: flex;
	gap: var(--sp-10);
	padding: var(--sp-12) var(--sp-16);
	border-radius: var(--r-8);
	font-size: var(--fs-sm);
}
.mf-jelzes--ok    { background: var(--ok-tint);    color: var(--ok-ink); }
.mf-jelzes--hiba  { background: var(--error-tint); color: var(--warn-ink); }
.mf-jelzes--marka { background: var(--brand-tint); color: var(--brand-ink-soft); }

/* ------------------------------------------------------------------------ ár */

.mf-ar {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	color: var(--price);
	letter-spacing: -.02em;
}

/* ------------------------------------------------------------ láthatóság */

/* A töréspont 900 px: az alkopro menü-váltási pontja. Nem token, mert
   nem arculati kérdés, hanem szerkezeti. */
@media (min-width: 901px) { .mf-mobil-only { display: none !important; } }
@media (max-width: 900px) { .mf-asztali-only { display: none !important; } }

/* ==========================================================================
   FEJLÉC
   ========================================================================== */

.mf-hdr {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink-deep);
	color: var(--n-0);
	/* A tömör márkaszínű alsó él: ez választja el a fejlécet a tartalomtól,
	   és ez adja a fejléc karakterét. Nem árnyék, mert az elmosódna. */
	border-bottom: 3px solid var(--brand);
}

/* --- szállítási küszöb-sáv --- */
.mf-shipbar {
	background: var(--brand);
	color: var(--brand-ink);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}
.mf-shipbar__in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-8);
	min-height: var(--shipbar);
}
.mf-shipbar__ikon { width: 16px; height: 16px; flex: none; }

/* --- fejléc-sor --- */
.mf-hdr__in {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	min-height: 70px;
}
.mf-hdr__kitolto { flex: 1 1 auto; }

.mf-hdr__logo { display: block; flex: none; }
/* SZABÁLYRENDSZER 10.1: ha az új arculat logója szélesebb, ITT korlátozzuk,
   nem a mellette álló telefon-pillt kicsinyítjük. */
.mf-hdr__logo-kep { max-height: 44px; width: auto; }
.mf-hdr__logo-szoveg {
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	letter-spacing: -.02em;
	color: var(--n-0);
	text-decoration: none;
}

.mf-hdr__tel {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	padding: var(--sp-8) var(--sp-12);
	border-radius: var(--r-10);
	background: rgb(255 255 255 / .06);
	color: var(--n-0);
	text-decoration: none;
	flex: none;
}
.mf-hdr__tel:hover { background: rgb(255 255 255 / .1); }
.mf-hdr__tel-ikon { display: block; width: 20px; height: 20px; color: var(--brand); }
.mf-hdr__tel-szoveg { display: block; line-height: 1.25; }
.mf-hdr__tel-szoveg b { display: block; font-size: var(--fs-md); }
.mf-hdr__tel-szoveg small { display: block; font-size: var(--fs-2xs); color: var(--n-400); }

/* --- fő menü --- */
.mf-nav { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.mf-nav > li { position: relative; }
.mf-nav > li > a {
	display: block;
	padding: var(--sp-10) var(--sp-12);
	color: var(--n-0);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-decoration: none;
	border-radius: var(--r-8);
}
.mf-nav > li > a:hover { background: rgb(255 255 255 / .08); }
.mf-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: var(--sp-8);
	list-style: none;
	background: var(--n-0);
	border-radius: var(--r-12);
	box-shadow: var(--sh-3);
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s;
}
.mf-nav > li:hover .sub-menu,
.mf-nav > li:focus-within .sub-menu { opacity: 1; visibility: visible; }
.mf-nav .sub-menu a {
	display: block;
	padding: var(--sp-10) var(--sp-12);
	color: var(--ink);
	font-size: var(--fs-sm);
	text-decoration: none;
	border-radius: var(--r-8);
}
.mf-nav .sub-menu a:hover { background: var(--n-50); }

/* --- műveletek --- */
.mf-hdr__muveletek { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.mf-hdr__ikongomb,
.mf-hdr__menugomb {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;   /* érintési célpont minimuma, nem arculati méret */
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--n-0);
	border-radius: var(--r-8);
	cursor: pointer;
}
.mf-hdr__ikongomb:hover,
.mf-hdr__menugomb:hover { background: rgb(255 255 255 / .08); }
.mf-hdr__ikongomb svg,
.mf-hdr__menugomb svg { width: 22px; height: 22px; }

.mf-hdr__kosar-db {
	position: absolute;
	top: 4px; right: 4px;
	min-width: 18px;
	padding: 0 4px;
	background: var(--brand);
	color: var(--brand-ink);
	font-size: var(--fs-3xs);
	font-weight: var(--fw-black);
	line-height: 18px;
	text-align: center;
	border-radius: var(--r-full);
}

/* --- kereső-panel --- */
.mf-kereso-panel { background: var(--n-0); border-top: 1px solid var(--n-150); padding-block: var(--sp-12); }
.mf-kereso { display: flex; gap: var(--sp-8); }
.mf-kereso__mezo {
	flex: 1 1 auto;
	padding: var(--sp-12) var(--sp-16);
	border: 1px solid var(--n-200);
	border-radius: var(--r-8);
	font-size: var(--fs-md);
}

/* --- mobilmenü --- */
.mf-mobmenu {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	padding: var(--sp-16) var(--pad) var(--sp-32);
	background: var(--ink-deep);
	border-top: 1px solid rgb(255 255 255 / .08);
}
.mf-mobmenu__szakasz { margin-bottom: var(--sp-24); }
/* SZABÁLYRENDSZER 4.5: minden szakasz azonos rangú. A cím márkaszínű
   jelzőt kap, hogy a lista alja se olvasódjon léblécnek. */
.mf-mobmenu__cim {
	margin: 0 0 var(--sp-10);
	padding-left: var(--sp-10);
	border-left: 3px solid var(--brand);
	color: var(--n-400);
}
.mf-mobmenu__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }
.mf-mobmenu__lista a {
	display: block;
	padding: var(--sp-12) var(--sp-16);
	background: rgb(255 255 255 / .05);
	color: var(--n-0);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	text-decoration: none;
	border-radius: var(--r-10);
}
.mf-mobmenu__lista a:hover { background: rgb(255 255 255 / .1); }
.mf-mobmenu__tel { width: 100%; }

/* ==========================================================================
   LÁBLÉC — az ALKOPRO élő láblécének 1:1 átvétele, tokenizálva.

   Forrás: prototípus fooldal.html, az eszkozok/normalizalo.py-jal tokenre
   cserélve, majd `.mf-lablec` alá scope-olva, hogy az olyan általános
   osztálynevek, mint a `.ft` vagy a `.fcol`, ne ütközzenek plugin-CSS-sel.

   A 4 px alatti értékek (ikon margin-top: 2px) SZÁNDÉKOSAN érintetlenek:
   azok optikai igazítások, nem térközök. Felkerekítve az ikon láthatóan
   elcsúszna a mellette álló szövegtől.

   Ez a blokk ÚJRAGENERÁLHATÓ, nem kézzel szerkesztendő.
   ========================================================================== */

.mf-lablec .fcols>*,.mf-lablec .ftrust>*{min-width:0}
.mf-lablec .fcol li{overflow-wrap:anywhere}
.mf-lablec{background:var(--ink-deep);color:var(--n-400);padding:var(--sp-32) 0 var(--sp-24);margin-top:var(--sp-32)}
.mf-lablec .flogo{height:28px;width:auto;margin-bottom:var(--sp-16)}
.mf-lablec .ftrust{display:grid;gap:var(--sp-16);padding-bottom:var(--sp-24);margin-bottom:var(--sp-24);border-bottom:1px solid var(--n-850)}
.mf-lablec .ft{display:flex;gap:var(--sp-12);align-items:flex-start}
.mf-lablec .ft svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;
  stroke:var(--brand);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mf-lablec .ft strong{display:block;color:var(--n-0);font-size:var(--fs-sm);font-weight:700;margin-bottom:2px}
.mf-lablec .ft span{display:block;font-size:var(--fs-xs);line-height:1.45}
.mf-lablec .fcols{display:grid;gap:var(--sp-24)}
.mf-lablec .fcol h4{color:var(--n-0);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-12);font-weight:800}
.mf-lablec .fcol ul{list-style:none;display:grid;gap:var(--sp-8)}
.mf-lablec .fcol li{font-size:var(--fs-sm);color:var(--n-400)}
.mf-lablec .fcol a{color:var(--n-400);font-size:var(--fs-sm)}
.mf-lablec .fcol a:hover{color:var(--brand)}
.mf-lablec .fcol-personal{background:var(--ink);border:1px solid var(--n-850);border-radius:var(--r-12);padding:var(--sp-16)}
.mf-lablec .fpersonal-top{display:flex;align-items:center;gap:var(--sp-10);margin-bottom:var(--sp-8)}
.mf-lablec .fpersonal-photo{width:44px;height:44px;border-radius:var(--r-8);object-fit:cover;flex:0 0 44px}
.mf-lablec .fpersonal-name{display:block;color:var(--n-0);font-size:var(--fs-sm);font-weight:700}
.mf-lablec .fcol-personal p{font-size:var(--fs-xs);color:var(--n-400);line-height:1.5;margin:0 0 var(--sp-12)}
.mf-lablec .fpersonal-link{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-xs);font-weight:700;color:var(--n-0);margin-bottom:var(--sp-8)}
.mf-lablec .fpersonal-link:last-child{margin-bottom:0}
.mf-lablec .fpersonal-link svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf-lablec .fpersonal-link:hover{color:var(--brand)}
.mf-lablec .fpersonal-hours{display:block;font-size:var(--fs-2xs);color:var(--n-600);margin-top:2px}
.mf-lablec .fabout{font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--sp-12)}
.mf-lablec .ft-gls{display:block;margin-top:var(--sp-8);height:26px;width:auto;
  background:var(--n-0);border-radius:var(--r-4);padding:var(--sp-4) var(--sp-8)}
.mf-lablec .fbadge{display:block;height:76px;width:auto;margin-top:var(--sp-16)}
.mf-lablec .fsocial{display:flex;gap:var(--sp-10);margin-top:var(--sp-16)}
.mf-lablec .fsocial a{width:34px;height:34px;border:1px solid var(--n-850);border-radius:var(--r-8);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.mf-lablec .fsocial a:hover{border-color:var(--brand)}
.mf-lablec .fsocial svg{width:17px;height:17px;stroke:var(--n-400);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mf-lablec .fsocial a:hover svg{stroke:var(--brand)}
.mf-lablec .fsocial .ico-fill{fill:var(--n-400);stroke:none}
.mf-lablec .fsocial a:hover .ico-fill{fill:var(--brand)}
.mf-lablec .fbot{border-top:1px solid var(--n-850);margin-top:var(--sp-24);padding-top:var(--sp-20);font-size:var(--fs-2xs);line-height:1.6;display:grid;gap:var(--sp-8)}
.mf-lablec .fcopy{color:var(--n-600)}
@media (min-width:1024px){
  .mf-lablec .fcols{grid-template-columns:1.3fr .85fr 1fr .85fr 1.1fr;gap:var(--sp-32)}
  .mf-lablec .ftrust{grid-template-columns:repeat(4,1fr);gap:var(--sp-32);padding-bottom:var(--sp-32);margin-bottom:var(--sp-32)}
  .mf-lablec .fbot{grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--sp-32);margin-top:var(--sp-32);padding-top:var(--sp-20)}
  .mf-lablec .fcopy{text-align:right}
  .mf-lablec{padding:var(--sp-48) 0 var(--sp-32)}
}

/* ==========================================================================
   TARTALOM
   ========================================================================== */

.mf-oldal__cim { margin-bottom: var(--sp-24); }

/* Folyó szöveg. A globális nullázás után itt kapja vissza a bekezdés-
   térközt, a listajelölőt és a link-aláhúzást: szerkesztett szövegben
   ezek kellenek, a felület többi részén nem. */
.mf-proza { max-width: 72ch; }  /* olvasható sorhossz, nem arculati érték */
.mf-proza p,
.mf-proza ul,
.mf-proza ol { margin-bottom: var(--sp-16); }
.mf-proza ul,
.mf-proza ol { list-style: revert; padding-left: var(--sp-24); }
.mf-proza li { margin-bottom: var(--sp-4); }
.mf-proza h2 { margin: var(--sp-32) 0 var(--sp-12); }
.mf-proza h3 { margin: var(--sp-24) 0 var(--sp-8); }
.mf-proza a { text-decoration: underline; text-underline-offset: 2px; }
.mf-proza img { border-radius: var(--r-10); }