@charset "utf-8";
/*
	responsive.css - a régi fix szélességű (940px) elrendezés reszponzív kiegészítése
	A base.css / content.css UTÁN töltődik, csak felülír.
	Töréspont: 979px alatt egyoszlopos, hamburger menüs elrendezés.
*/

/* mobil gombok asztalin nem látszanak */
#mobile_buttons { display: none; }

/* a tartalom dobozainak árnyéka ne kerüljön az oldalsáv bal szélén lévő dekoráció
   (sbar_bg.png, sbar_bg_bottom.png) alá - régi hiba, az adatlap jobb alján fehér csíkot adott */
div#content_holder { position: relative; z-index: 1; }

/* az e-mail és megjegyzés mező ugyanúgy nézzen ki, mint a szöveges mezők (a content.css csak a type="text"-et formázza) */
div.dmp_regform div.form_element input[type="email"],
div.dmp_regform div.form_element textarea {
	border: 1px solid #DBDBDB;
	border-radius: 5px;
	color: #999;
}
div.dmp_regform div.form_element input[type="email"] {
	float: left;
	width: 200px;
	padding: 3px;
	font-size: 14px;
}

/* Different logó a láblécben (korábban a 6-os cikkből jött, 7 üres bekezdéssel letolva) */
#different_credit {
	position: absolute;
	right: 0;
	bottom: 10px;
	display: block;
	line-height: 0;
	opacity: .9;
}
#different_credit:hover { opacity: 1; }

/* süti beállítások ikon (consent.css): kicsi és halvány, hogy ne takarja a tartalmat;
   a megjelenítést (display) továbbra is a consent.js kapcsolja */
#cookie-image {
	left: 8px;
	bottom: 8px;
	margin: 0;
	transform: none;
	opacity: .45;
	line-height: 0;
	transition: opacity .2s;
}
#cookie-image:hover,
#cookie-image:focus-within { opacity: 1; }
#cookie-image img { width: 30px; height: 30px; }

/* teljes szélességű sablon (template_fullwidth): nincs jobb oldali sáv */
body.body_fullwidth div#content_holder { width: 940px; }



/* =========================================================
	TABLET + MOBIL
   ========================================================= */
@media (max-width: 979px) {

	html, body { height: auto; }
	body:before { display: none; }	/* régi Opera fix, mobilon csak zavar */

	/* sticky footer kikapcsolása (fix 190px magasság helyett természetes folyás) */
	div#container { padding-bottom: 0; }
	div#footer { height: auto; margin-top: 0; }

	/* ---------- felső sáv (cím, telefon) ---------- */
	div#upper_line { height: auto; }
	div#upper_line_inner { width: auto; padding: 0 12px; }
	div#upper_line_inner div.sidebar { padding: 6px 0; }
	div#upper_line_inner div.sidebar p { margin: 0; line-height: 1.5; }
	div#upper_line_inner div#logintoservice { display: none; }	/* mobilon a naptár gomb van helyette */

	/* ---------- fejléc ---------- */
	div#header_holder,
	div#header_holder_in { height: auto; }

	div#header {
		width: auto;
		height: auto;
		padding: 12px;
		overflow: visible;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	div#header > a > img { margin: 0; float: none; display: block; max-width: 100%; height: auto; }
	div#header > a { flex: 1 1 0; min-width: 0; margin-right: 12px; }
	div.headertitle { float: none; width: auto; height: auto; margin: 0; flex: 1 1 0; }
	div.headertitle h1 { font-size: 22px !important; }

	#mobile_buttons { display: flex; gap: 6px; }
	#mobile_buttons .mbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #3E3D40;
		border-radius: 4px;
		background: #1b1b1b;
		color: #fff;
		cursor: pointer;
	}
	#mobile_buttons .mbtn[aria-expanded="true"] { background: var(--main-p-color); border-color: var(--main-p-color); }
	#mobile_buttons .mbtn img { display: block; }

	/* belépő doboz: alapból rejtve, a gombbal nyílik, teljes szélességben */
	div#header #portal_main_login,
	div#header .loggedin,
	div#header > .loginwindow { display: none; }
	div#header.login_open #portal_main_login,
	div#header.login_open .loggedin,
	div#header.login_open > .loginwindow {
		display: block;
		float: none;
		width: 100%;
		padding: 12px 0 0 0;
		text-align: left;
	}
	div#header.login_open #portal_main_login input[type="text"],
	div#header.login_open #portal_main_login input[type="password"] {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 6px;
		padding: 8px;
		font-size: 16px;	/* 16px alatt az iOS ráközelít a mezőre */
	}
	div#header.login_open #portal_main_login p.float_right { float: none; margin: 4px 0 8px 0; }
	div#header.login_open #portal_main_login input[type="submit"] {
		width: 100%;
		padding: 10px;
		border: none;
		border-radius: 4px;
		background: var(--main-p-color) !important;	/* content.css none !important-tal üríti */
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
	}
	div#header.login_open #portal_main_login .login_function { top: 0 !important; color: #fff; }

	/* ---------- oldal törzs ---------- */
	div#page_holder {
		width: auto;
		display: flex;
		flex-direction: column;
	}
	#mainmenu_wrapper { order: 0; }
	div#content_holder { order: 1; }
	div#sidebar_holder { order: 2; }
	div#content_clearer { order: 3; }

	/* kezdőlapon a keresők legyenek elöl */
	body.page_home div#sidebar_holder { order: 1; }
	body.page_home div#content_holder { order: 2; }

	div#content_holder,
	body.body_fullwidth div#content_holder {
		float: none;
		width: auto;
		min-height: 0;
		padding: 0 12px 20px 12px;
	}

	div#sidebar_holder {
		float: none;
		width: auto;
		min-height: 0;
		background: none;
	}
	div#sidebar_holder .top_bg,
	div#sidebar_holder .bottom_bg { display: none; }
	div#sidebars {
		float: none;
		width: auto;
		padding: 0 12px;
	}
	div#sidebars div.sidebar { margin: 16px 0 0 0; }
	#ws-widget-50ac97 { max-width: 100%; }
	#ws-widget-50ac97 iframe { max-width: 100%; }

	/* ---------- főmenü (hamburger) ---------- */
	#mainmenu_wrapper {
		display: none;
		float: none;
		height: auto;
	}
	#mainmenu_wrapper.open { display: block; }

	#mainmenu_wrapper .sf-menu { float: none; }
	#mainmenu_wrapper .sf-menu li {
		float: none;
		width: auto;
		border-left: none;
		border-right: none;
	}
	#mainmenu_wrapper .sf-menu a { padding: 13px 16px; }

	/* almenük mindig nyitva, behúzva (érintőképernyőn nincs hover) */
	#mainmenu_wrapper .sf-menu ul,
	#mainmenu_wrapper .sf-menu li:hover ul,
	#mainmenu_wrapper .sf-menu li.sfHover ul {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	#mainmenu_wrapper .sf-menu ul a { padding-left: 34px; font-size: 15px; }

	/* ---------- lábléc ---------- */
	div#footer div#footer_content {
		width: auto;
		height: auto;
		padding: 16px 12px;
		background-image: none;
	}
	#different_credit { top: 16px; right: 12px; bottom: auto; }
	/* az oldal alján a süti ikon ne takarja a copyright sort */
	div#footer div#footer_content { padding-bottom: 48px; }
	div.fmenu.footer { width: auto; height: auto; }
	div.fmenu.footer ul li { width: 50%; }

	/* képek ne lógjanak ki a tartalomból
	   (:where = nulla specificitás, a content.css konkrétabb képszabályai mindig erősebbek) */
	:where(#content) img { max-width: 100%; height: auto; }

	/* ---------- szerkesztőből jövő cikktartalom ---------- */
	/* széles táblázatok: a táblázat görgethető vízszintesen, nem az egész oldal */
	#content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* beágyazott videók (YouTube, Vimeo): képernyőszélesség, 16:9 */
	#content iframe[src*="youtube"],
	#content iframe[src*="vimeo"] {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	#content iframe { max-width: 100%; }

	/* ---------- termék adatlap ---------- */
	.productdetail_head { height: auto; }
	.productdetail_head .image {
		float: none;
		border-right: none;
		border-bottom: 1px solid #CFCFCF;
		text-align: center;
		background: #fff;
	}
	.productdetail_head .image img { max-width: 100%; height: auto; max-height: 220px; }
	.productdetail_head .head_data {
		float: none;
		width: auto;
		padding: 12px;
	}
	.productdetail_head h1 { height: auto; margin-bottom: 8px; }
	.productdetail_head .price { margin-bottom: 8px; }
	.productdetail_head .pcs { float: none; margin: 0 0 12px 0; padding: 4px 6px; }
	.productdetail_head .form { position: static; }
	.productdetail_head .form form { display: flex; align-items: center; gap: 10px; }
	.productdetail_head .form .tocart,
	.productdetail_head .form .ordernum { float: none; margin: 0 !important; }
	.productdetail_head .form .tocart { flex: 1 1 auto; }
	.productdetail_head .form .cart_button { width: 100%; padding-top: 10px; padding-bottom: 10px; }
	.productdetail_head .form select { padding: 8px; font-size: 16px; }

	.additional_product .price { float: none; display: block; }
	.productdetail .datas .tiree { margin-right: 12px; }

	/* ---------- űrlapok: kosár/rendelés, regisztráció, kapcsolat (dmp_regform, loginwindow) ---------- */
	div.dmp_regform { width: auto; padding-top: 10px; }
	div.dmp_regform h2 { margin-left: 0; }
	div.dmp_regform div.form_element,
	.loginwindow div.form_element { padding: 6px 0; }
	/* címke a mező fölött, balra igazítva */
	div.dmp_regform div.form_element label.label,
	.loginwindow .form_element label.label {
		float: none;
		display: block;
		width: auto;
		margin: 0 0 4px 0;
		padding-top: 0;
		text-align: left;
	}
	/* szöveges mezők teljes szélességben, 16px-es betűvel (iOS nem nagyít rá) */
	div.dmp_regform div.form_element input[type="text"],
	div.dmp_regform div.form_element input[type="email"],
	div.dmp_regform div.form_element input[type="tel"],
	div.dmp_regform div.form_element input[type="password"],
	div.dmp_regform div.form_element textarea,
	div.dmp_regform div.form_element select,
	.loginwindow .form_element input[type="text"],
	.loginwindow .form_element input[type="email"],
	.loginwindow .form_element input[type="password"],
	.loginwindow .form_element textarea,
	.loginwindow.contact select {
		float: none;
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 8px;
		font-size: 16px;
	}
	div.dmp_regform div.form_element p { margin-left: 0; }
	div.form_element.area label.error,
	div.dmp_regform div.form_element label.error { float: none; width: auto; margin: 4px 0 0 0; }
	/* belépés oldal (login.html) */
	.loginwindow p.login_text label { display: block; float: none; width: auto; margin-bottom: 4px; }
	.loginwindow p.login_text input[type="text"],
	.loginwindow p.login_text input[type="password"] {
		float: none;
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 8px;
		font-size: 16px;
	}
	.loginwindow p.center .basebutton { width: 100%; padding: 12px; font-size: 16px; }

	/* rendelés leadása gomb: teljes szélesség */
	#orderForm .order_button { width: 100%; padding: 12px; font-size: 16px; }

	/* ---------- lapozó ---------- */
	div#paging_holder {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 10px;
	}
	div#paging_holder .paging { float: none; width: auto; margin: 0; flex: 0 0 auto; }
	div#paging_holder .paging.center { flex: 1 1 auto; min-width: 0; }	/* Első | oldalszámok | Utolsó egy sorban, ha kifér */
	div#paging_holder .clearer { display: none; }
	#content > h1 + div#paging_holder { display: none; }	/* mobilon csak a lista alatti lapozó kell */
	div.paging span.page { display: inline-block; padding: 6px 11px; margin: 2px 1px; }	/* ujjal is eltalálható */

	/* ---------- terméklisták: rácsos kártyák (prod box_shadow_small) ---------- */
	div.product_list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}
	div.product_list > .clearer { display: none; }

	div.product_list div.prod {
		float: none;
		width: auto;
		margin: 0;
	}
	div.prod div.b2b_pic { width: auto; text-align: center; background: #fff; }

	div.prod .foot {
		width: auto;
		display: flex;
		align-items: stretch;
	}
	div.prod .foot .datasheet { float: none; flex: 0 0 auto; padding: 5px 4px; }
	div.prod .foot form { display: flex; flex: 1 1 auto; }
	div.prod .foot .orderNum { width: auto; flex: 1 1 auto; padding: 5px 6px; white-space: nowrap; }
	div.prod .foot p.tocart { float: none; flex: 0 0 34px; width: auto; }
	div.prod .foot > .clearer { display: none; }

	/* ---------- terméklisták: outlet sorok (prod outlet) ---------- */
	div.product_list div.prod.outlet {
		grid-column: 1 / -1;	/* a rácsban mindig teljes sor */
		display: grid;
		grid-template-columns: 144px 1fr;
		height: auto;
		overflow: hidden;
	}
	div.prod.outlet .image { float: none; grid-row: 1; grid-column: 1; }
	div.prod.outlet .title_holder,
	div.prod.outlet.used .title_holder {
		float: none;
		width: auto;
		min-width: 0;
		padding: 10px;
		grid-row: 1;
		grid-column: 2;
	}
	div.prod.outlet .desc { height: auto; }
	div.prod.outlet .button_holder,
	div.prod.outlet.used .button_holder {
		float: none;
		width: auto;
		padding: 10px;
		grid-column: 1 / -1;
		border-top: 1px solid #E5E5E5;
	}
	div.prod.outlet .button_holder .pcs {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: auto;
		padding: 0;
		margin-bottom: 8px;
	}
	div.prod.outlet .button_holder .pcs > span { float: none; padding: 0; }
	div.prod.outlet .button_holder .pcs .clearer { display: none; }
	div.prod.outlet .button_holder form {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	div.prod.outlet p.orderNum,
	div.prod.outlet.used .orderNum { float: none; padding: 0; margin: 0; }
	div.prod.outlet p.tocart { float: none; margin: 0; }
	div.prod.outlet.used .price,
	div.prod.outlet.used .pcs { float: none; width: auto; padding-top: 0; }
	div.prod.outlet.tire.used .season { left: auto; right: 0; }
}


/* =========================================================
	KIS TELEFON
   ========================================================= */
@media (max-width: 480px) {
	div#upper_line_inner div.sidebar p { font-size: 11px; }
	#mobile_buttons .mbtn { width: 40px; height: 40px; }
}