/*------------------------------------*\
  #Webshop hatter szin
\*------------------------------------*/

.bg-ezust, .bg-feher, .bg-grafit, .bg-kek, .bg-narancs, .bg-piros, .bg-sarga, .bg-szurke, .bg-turkiz, .bg-zold {
	background-color: #ffffff !important;
}





/*------------------------------------*\
  #Felso resz
\*------------------------------------*/
/* 
div#webshop_top {
	padding: 5px 15px 5px 15px;
}
#webshop_top img {
	max-width: 250px;
} */




/*------------------------------------*\
  #Oldalelemek
\*------------------------------------*/

.oldalelem .text-evir {
	color: #5886b7 !important;
}
div.oldalframe.sidebar {
	height: auto;
	position: relative;
	transition: all 0.3s;
	z-index: 100;
	overflow-x: hidden;
	overflow-y: auto;
	top: auto;
	background-color: #ffffff;
}
div.kozepframe#middle {
	overflow-y: visible;
	top: auto;
	height: auto;
	transition: all 0.3s;
	position: relative;
}
div.sidebar-togg {
	top: 5px;
	right: 5px;
	z-index: 200;
	padding: 10px;
	background-color: #ffffff;
}
#webshop_left .kosar_item, #webshop_right .kosar_item, #webshop_left .login_item, #webshop_right .login_item {
	margin-bottom: 8px;
}
#webshop_left .nav-container, #webshop_right .nav-container {
	box-shadow: 0px 3px 5px #dee2e6;
	padding-top: 8px;
}
#webshop_left .nav-item, #webshop_right .nav-item {
	width: 100%;
	margin-bottom: 8px;
}
#webshop_left .nav-link, #webshop_right .nav-link {
	padding: 0px;
}
#webshop_right .login_item i {
	height: auto;
	width: auto;
}
.oldalelem th.scroll-th, #webshop_kozep th.scroll-th {
	box-shadow:	none;
}
#webshop_left .oldalelem .form-group, #webshop_right .oldalelem .form-group {
	margin-bottom: 0px;
}
div#webshop_left img{
	max-width: 250px;	
}
div#webshop_top div.keresolabel {
	display: none;
}
div#webshop_top .kosar_item {
	width: min-content;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
}
div#webshop_left div.oldalelem, div#webshop_right div.oldalelem {
	margin: 0px 0px 5px 0px;
}
.sidebar-left.sidebar ul li a:hover, .sidebar-right.sidebar ul li a:hover, .sidebar-left.sidebar [aria-expanded="true"], .sidebar-right.sidebar [aria-expanded="true"] {
	background-color: #ffffff;
	color: #000000;
}
.sidebar-left.sidebar, .sidebar-left.sidebar a, .sidebar-right.sidebar, .sidebar-right.sidebar a {
	font-size: 10pt;
}
.sidebar-left.sidebar a.nav-link, .sidebar-right.sidebar a.nav-link {
	font-size: 12pt;
}
.sidebar-right.sidebar [aria-expanded="true"] {
	content: none !important;
}
.kosar_item a {
	padding-left: 5px;
}
#webshop_kozep h1 {
	font-size: 1.8rem;
}
#webshop_kozep h2 {
	font-size: 1.5rem;
}
div.div_cikk_kategoria_link {
	background-color: #f8f9fa;
	padding: 5px;
	margin-bottom: 10px;
}
div.div_cikk_kategoria_link .form-group {
	margin-bottom: 0px;
}
a.cikk_kategoria_link {
	font-size: 11pt;
	color: #000000;
	margin: 5px 5px 15px 5px;
}
div.oldalelem a {
	color: #343a40;
}




/*------------------------------------*\
  #Cikk kategoriak
\*------------------------------------*/

.oldalelem .vscroll {
	max-height: none;
}
div.oldalframe div.scrolltable, div.oldalframe table {
}
div.oldalframe table thead tr, div.oldalframe table thead th, div.oldalframe table td  {
	border: none !important;
}
div.oldalframe table thead {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}
div.oldalframe table thead th span {
	font-size: 15pt;
	color: #000000 !important;
	text-transform: uppercase;
	margin-left: 10px;
	font-weight: normal;
}
div.oldalframe table thead th {
	background-color: #ffffff;
	color: #343a40;
}
.oldalframe.sidebar i {
	width: auto;
	height: auto;
	margin: auto;
}




/*------------------------------------*\
  #Tablazatok (rendeles, cimek)
\*------------------------------------*/

#webshop_kozep th.scroll-th, #webshop_kozep th.scroll-th span {
	background-color: #ffffff !important;
	color: #000000 !important;
	border: none !important;
}




/*------------------------------------*\
  #Cikk lista table
\*------------------------------------*/

#webshop_kozep div.scrolltable, #webshop_kozep table thead, #webshop_kozep table thead tr  {
	border: none !important;
}
th.cikk_lista_left_extension {
	border: none !important;
}
td.cikk_lista_megnevezes {
	height: 75px;
	overflow-y:hidden;
	margin: auto;
}
.lista2 td.cikk_lista_megnevezes {
	background-color: #ffffff;
}
.lista1 td.cikk_lista_megnevezes {
	background-color: #f2f2f2;
}
.lista1:hover td.cikk_lista_megnevezes, .lista2:hover td.cikk_lista_megnevezes {
	background-color: #dadada;
}
td.cikk_lista_megnevezes a {
	display: block;
	width: 100%;
}
#webshop_kozep table.scroll-table td {
	vertical-align: middle;
}
.cikk_lista_raktaron, .cikk_lista_megys, .cikk_lista_kosarba {
	text-align: center;
}



/*------------------------------------*\
  #Cikk lista div
\*------------------------------------*/

label.webshop_lista_szuro {
	font-size: 11pt;
}
div.div_lista1, div.div_lista2 {
	border: 1px solid #f0f0f0;
	border-radius: 5px;
}
div.div_cikk_lista_kep a img{
	border: none !important;
}
div.div_cikk_lista_kep a img{
	object-fit: contain;
}
.cikk_lista_kosarba i {
	font-size: 20pt;
}
#b_kosarba i {
	font-size: 25pt;
}
.sidebar-right.sidebar a.reg_button {
	font-size: 12pt;
}




/*------------------------------------*\
  #Cikk adatlap 
\*------------------------------------*/

#webshop_kozep h4 {
	margin-top: 15px;
}
a.webshop_webcim {
	padding-top: 14px;
}
.border-bottom-light-grey {
	border-bottom: 1px solid #f0f0f0;
}
input[readonly].webshop_cikkszam, input[readonly].webshop_cikkszam:hover, input[readonly].webshop_cikkszam:focus, input[readonly].webshop_cikkszam:active {
	background-color: transparent;
	border:none;
	font-size: 12pt;
}
input.webshop_arkategoriak, input.webshop_keszlet_info, input.webshop_gyarto {
	border:none;
	background-color: #ffffff !important;
	border-radius: 0;
	font-weight: bold;
}
.div_megnevezes {
	margin-bottom: 10px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
.megnevezes {
	font-weight: bold;
	font-size: 15pt;
}
#webshop_kozep .webshop_num {
	background-color: white;
	border: none;
	font-size: 16px;
	padding-top: 0px;
}
div.cikk_kepek .form-row {
	margin-top: 5px;
	margin-bottom: 5px;
}
div.cikk_nagykep {
	width:100%;
	position: relative;
	padding-top: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}
div.cikk_nagykep a img.img-thumbnail {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: auto;
	padding: 10px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	vertical-align: middle;
	float: left;
}
div.cikk_minikep {
	margin-top: auto;
	margin-bottom: auto;
	height: 100px;
	max-height: 100px;
}
div.cikk_minikep a img.img-thumbnail {
	height: 100%;
	width: 100%;
	max-height: 100px;
	object-fit: contain;
	vertical-align: middle;
	margin-top: auto;
	margin-bottom: auto;
	padding: 5px;
	border: 1px solid #f0f0f0;
}
div.div_tulajdonsag input[readonly], div.div_tulajdonsag .input-group-text {
	background: #ffffff;
	border-color: #f0f0f0;
}
div.div_info {
	border-top: 1px solid #f0f0f0;
	padding: 20px;
}




/*------------------------------------*\
  #Carousel, cikk minikepek 
\*------------------------------------*/

#carouselControls {
	padding-left: 30px;
	padding-right: 30px;
}
.left, .right {
	background-image: none;
	color: #222222;
	height: 40px;
	width : 40px;
	font-size: 20pt;
	padding: 5px;
}
.left:hover, .left:active, .right:hover, .right:active, .left:focus, .right:focus, .left:visited, .right:visited {
	color: #000000;
}
.carousel-item {
	padding: 5px;
}




/*------------------------------------*\
  #Cikk kep nagyitas 
\*------------------------------------*/

.modal-header {
	display: block;
}
#image-gallery-image {
	max-height: 70vh;
	object-fit: contain;
}




/*------------------------------------*\
  #Egyedi szinek 
\*------------------------------------*/

.text-egyedi {
	color: #1f5790 !important;
}
.text-egyedi-2 {
	color: #de9222 !important;
}
.bg-egyedi {
	background-color: #1f5790;
}
.bg-egyedi-2 {
	background-color: #de9222;
}
.bg-egyedi, .bg-egyedi-2 {
	position: relative;
	left: 5px;
	top: -5px;
	margin-right: 5px;
	min-width: 45px;
	text-align: center;
}
.box-shadow {
	box-shadow: 0px 3px 5px #dee2e6;
}
button.cikk_lista_kosarba, button#b_kosarba, button.cikk_lista_kosarba:hover, button.cikk_lista_kosarba:focus, button#b_kosarba:hover, button#b_kosarba:focus, button.btn-nobg, button.btn-nobg:hover,button.btn-nobg:focus {
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: none;
}
button.btn-nobg i {
	font-size: 20pt;
}
.btn-egyedi {
	background-color: #16946b;
	border: none;
}
button.cikk_lista_kosarba, button#b_kosarba {
	color: #f3854c;
}
button.cikk_lista_kosarba:hover, button.cikk_lista_kosarba:focus, button#b_kosarba:hover, button#b_kosarba:focus, button.btn-nobg:hover, button.btn-nobg:focus, button.close, button.close:hover, button.close:focus {
	box-shadow: none;
	margin-top: -2px;
	margin-bottom: 2px;
	transition: all 0.3s;
}
button.btn-egyedi:hover, button.btn-egyedi:focus {
	background-color: #005c3e;
}
button.cikk_lista_kosarba:hover, button.cikk_lista_kosarba:focus, button#b_kosarba:hover, button#b_kosarba:focus {
	color: #de6122;
}
.div_cikk_lista_netto a, .div_cikk_lista_brutto a {
	color: #1f5790;
}




/*------------------------------------*\
  #Media query-k 
\*------------------------------------*/


/* xs */

@media (max-width: 576px) {
	div.cikk_minikep {
		height: 60px;
	}
	div.cikk_minikep a img.img-thumbnail {
		max-height: 60px;
	}
	.left, .right {
		margin-top: 20px;
	}
}


/* sm */

@media (min-width: 576px) and (max-width: 767px) {
	div.cikk_minikep {
		height: 100px;
	}
}


/* <sm */

@media (max-width: 767px) {
	/* div#webshop_top img {
		min-width: 250px;	
		max-width: 50%;
	} */
	div#webshop_top div.login_item, div#webshop_top div.kosar_item {
		margin-bottom: 15px;
	}
	div#webshop_left img {
		min-width: 250px;	
		max-width: 50%;	
	}
	.opacity-50 {
		opacity: 0.5;
	}
	div#webshop_top div.keresolabel {
		display: none;
	}
	.webshop_talalatok_szama {
		margin-top: 15px;
	}
}


/* md */

@media (min-width: 768px) and (max-width: 992px){
	
	div.cikk_minikep {
		height: 60px;
	}
	div.cikk_minikep a img.img-thumbnail {
		max-height: 60px;
	}
	.left, .right {
  		margin-top: 20px;
	}
}


/* xs - xl */

@media (max-width: 992px) {
    div.oldalframe.sidebar-left.sidebar, div.oldalframe.sidebar-right.sidebar {
    	display: none;
		margin-left: 0px;
    }
    div.sidebar-left.sidebar.toggled, div.sidebar-right.sidebar.toggled {
    	display: block;
		margin-left: 0px;
    }
	div#webshop_top span.d-m-none{
		display: none;
	}
}


/* lg */

@media screen and (min-width: 992px) {
    div.sidebar-left.sidebar, div.sidebar-left.sidebar.toggled, div.sidebar-right.sidebar, div.sidebar-right.sidebar.toggled {
	    margin-left: 0px;
    }
	a.cikk_kategoria_link {
		width: auto;
	}
	
	div.oldalframe table thead th span {
		font-size: 15pt;
		margin-left: 10px;
	}
}


/* xl */

@media (min-width: 1200px) {
	div#webshop_left, div#webshop_right {
		max-width: 20vw;
	}
	div.cikk_minikep {
		height: 60px;
	}
	div.cikk_minikep a img.img-thumbnail {
		max-height: 60px;
	}
}


/* alapbs webshop */

/* Szűrő panel collapse chevron */
.filter-toggle::before { content: none !important; }


/* Görgethető szűrő lista - BS-sel nem megoldható max-height */
.filter-scroll-list { max-height: 140px; overflow-y: auto; }

/* Range slider - csak amit BS utility nem tud kezelni */
.range-slider-wrap  { height: 20px; margin: .5rem 0 1.25rem; }
.range-slider-track { height: 4px; pointer-events: none; }
.range-slider-input {
	height: 4px;
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}
.range-slider-input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--bs-info);
	border: 2px solid var(--bs-white);
	box-shadow: 0 0 0 1px var(--bs-info);
	pointer-events: all;
	cursor: pointer;
}
.range-slider-input::-moz-range-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--bs-info);
	border: 2px solid var(--bs-white);
	box-shadow: 0 0 0 1px var(--bs-info);
	pointer-events: all;
	cursor: pointer;
}

/* Szűrő panel collapse chevron */
.filter-toggle::before { content: none !important; }
.filter-toggle .fa-chevron-down { transition: transform .2s; transform: rotate(-90deg); }
.filter-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(0deg); }

/* X gomb csak akkor látható, ha van aktív kijelölés a szekcióban */
.filter-clear { visibility: hidden; }
.filter-section.has-selection .filter-clear { visibility: visible; }


/* Photo gallery */
/* BS-sel nem megoldható: cursor, aspect-ratio */
.gallery-main-wrapper { aspect-ratio: 1 / 1; cursor: pointer; }

/* INNEN UGYANAZ MINT -> kep_nezegeto_thumbnail_list.html */
/* Thumbnail sáv - scrollbar pseudo-elem, pontos padding */
.gallery-thumb-strip {
	padding: 6px 0px;
	scrollbar-width: thin;
	scrollbar-color: var(--bs-secondary-color) transparent;
}
.gallery-thumb-strip::-webkit-scrollbar       { height: 6px; }
.gallery-thumb-strip::-webkit-scrollbar-thumb { background: var(--bs-secondary-color); border-radius: var(--bs-border-radius); }

/* Thumbnail item - pixel méret, cursor, transition */
.gallery-thumb-item        { width: 31%; aspect-ratio: 1 / 1; height: auto; cursor: pointer; transition: opacity .15s, border-color .15s; border-color: transparent; }
.gallery-thumb-item:hover  { opacity: .85; }
.gallery-thumb-item.active { border-color: var(--bs-primary) !important; opacity: 1 !important; }

/* Nav gombok - pixel méret, cursor, oldalsó offset */
.gallery-nav-btn       { width: 36px; height: 36px; cursor: pointer; transition: background-color .15s; }
.gallery-nav-btn:hover { --bs-bg-opacity: 1; }
.gallery-nav-btn.prev  { left: 10px; }
.gallery-nav-btn.next  { right: 10px; }
/* EDDIG UGYANAZ MINT -> kep_nezegeto_thumbnail_list.html */

/* Modal - pixel méretek, cursor, z-index, max méretek */
.gallery-modal-close       { width: 36px; height: 36px; cursor: pointer; z-index: 1060; top: 15px; right: 15px; }
.gallery-modal-close:hover { --bs-bg-opacity: 1; }

.gallery-modal-nav       { width: 44px; height: 44px; cursor: pointer; }
.gallery-modal-nav:hover { --bs-bg-opacity: 1; }
.gallery-modal-nav.prev  { left: 15px; }
.gallery-modal-nav.next  { right: 15px; }

#imageModal .modal-body img { max-width: 90%; max-height: 90vh; transition: transform .15s ease; transform-origin: center center; }

/* Modal Zoom & Pan cursor állapotok */
#imageModal .modal-body.zoomed          { cursor: grab; }
#imageModal .modal-body.dragging        { cursor: grabbing; }
#imageModal .modal-body.dragging img    { transition: none; }
/* --- Webshop banner (felső sávba kihelyezhető, teljes képernyő-szélességű elem) --- */
/* A teljes szélességet (full-bleed) a sablon inline style-ja adja (width:100vw + negatív margó); */
/* itt a benne lévő kép a teljes szélességre feszül. A !important az egyedi elem képére */
/* beégetett inline szélességet (pl. a PNG eredeti mérete, style="width: 1532px") írja felül. */
.webshop-banner p   { margin: 0; }
.webshop-banner img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: var(--bs-border-radius) !important; }
/* Kisebb köz a felső boxok között: a boxot körbevevő konténer-col mt-2 (0.5rem) margóját húzza vissza. */
/* Igény szerint hangolható (pl. -0.25rem félig, 0 az eredeti köz). */
.webshop-banner     { margin-top: -0.5rem; }

/* --- Webshop fejléc (infó sáv + logó + banner/szöveg a felső sávban) --- */
/* .webshop-fejlec img              { max-width: 100%; height: auto; } */
/* .webshop-fejlec .fejlec-logo img { max-height: 70px; width: auto; } */