/* promerch.cz - opravy vzhledu a mobilniho zobrazeni (20. 10. 2026)
   Nacita se jako posledni styl v common/header.tpl. Po odebrani odkazu z header.tpl je vzhled jako predtim. */

/* Prazdne misto pod hlavickou: zbytek po zrusenych informacnich boxech (.top-info je prazdny) */
.top-info {
	padding-bottom: 20px;
}

/* Hlavicka na mobilu a tabletu jako na farme (sablona grey): kulate tlacitko menu, logo, kosik;
   pod nimi vyhledavani pres celou sirku (driv jen lupa, ktera vedla na stranku hledani) */
@media (max-width: 991px) {
	/* mrizka: tlacitko menu | logo (zmensi se, kdyz neni misto) | kosik; pod tim hledani pres celou sirku */
	#header #header-inner > .container {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px 12px;
		min-height: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#header #header-inner > .container:before,
	#header #header-inner > .container:after {
		display: none;
	}

	/* .header-center obsahuje hledani i tlacitko menu - jeho casti se radi primo do radku hlavicky
	   (!important kvuli pravidlu sablony "#header #header-inner .container > * { display: inline !important }" do 480 px) */
	#header #header-inner > .container > .header-center,
	#header #header-inner .searchform-popup {
		display: contents !important;
	}

	#header #header-inner .mobile-toggle {
		grid-column: 1;
		grid-row: 1;
		display: inline-flex;
		position: static;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		color: #f9b233;
		font-size: 18px;
		line-height: 1;
	}

	#header #header-inner > .container > .header-left {
		grid-column: 2;
		grid-row: 1;
		display: block !important;
		min-width: 0;
		padding: 0;
	}

	#header #header-inner > .container > .header-left img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 44px;
	}

	#header #header-inner > .container > .header-right {
		grid-column: 3;
		grid-row: 1;
		display: flex !important;
		align-items: center;
		margin-left: auto;
		padding: 0;
	}

	#header #header-inner .header-minicart {
		margin-right: 14px;
		padding-right: 0;
	}

	#header #header-inner .searchform-popup .search-toggle {
		display: none;
	}

	#header #header-inner .searchform {
		grid-column: 1 / -1;
		grid-row: 2;
		display: block;
		position: static;
		width: auto;
		margin: 0;
		border: 0;
		border-radius: 999px;
		background-color: #fff;
		box-shadow: none;
		line-height: 44px;
	}

	#header #header-inner .searchform:before {
		display: none;
	}

	#header #header-inner .searchform fieldset {
		margin: 0;
	}

	/* nasepavac (live_search.js) se vklada za pole - pod lisu hledani */
	#header #header-inner .searchform .text {
		display: flex;
		position: relative;
		float: none;
		width: 100%;
	}

	#header #header-inner .searchform input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 44px;
		padding: 0 14px 0 20px;
		border: 0;
		/* !important kvuli ".skin17-2 input { border-radius: 0 !important }" */
		border-radius: 999px 0 0 999px !important;
		background-color: #fff;
		color: #2c2d33;
		font-size: 16px;
		line-height: 44px;
	}

	#header #header-inner .searchform input::-webkit-input-placeholder {
		color: #8a8b93;
	}

	#header #header-inner .searchform input::-moz-placeholder {
		color: #8a8b93;
		opacity: 1;
	}

	#header #header-inner .searchform input::placeholder {
		color: #8a8b93;
		opacity: 1;
	}

	#header #header-inner .searchform button {
		flex: 0 0 56px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0 999px 999px 0 !important;
		background-color: #f9b233;
		color: #2c2d33;
		font-size: 17px;
		line-height: 44px;
		text-align: center;
	}

	/* nasepavac: obrazek, nazev a cena v radku (live_search.js dava polozkam pevnou vysku 60 px,
	   vyska radku 44 px by se dedila z lisy hledani) */
	#header #header-inner .live-search {
		line-height: 1.4;
	}

	#header #header-inner .live-search ul li {
		height: auto !important;
		min-height: 0;
		margin: 0;
		padding: 7px 12px;
	}

	#header #header-inner .live-search ul li a {
		display: flex;
		align-items: center;
	}

	#header #header-inner .live-search ul li .float-left {
		flex: 0 0 44px;
		margin-right: 12px;
	}

	#header #header-inner .live-search ul li .float-left img {
		display: block;
		width: 44px;
		height: 44px;
	}

	#header #header-inner .live-search ul li .product-text {
		flex: 1 1 auto;
		float: none;
		width: auto;
		min-width: 0;
		margin: 0;
	}

	#header #header-inner .live-search ul li .product-name {
		float: none;
		max-width: none;
		margin: 0;
		font-size: 13px;
		line-height: 1.3;
	}

	#header #header-inner .live-search ul li .product-price {
		float: none;
		margin-top: 3px;
		font-size: 14px;
		text-align: left;
	}

	#header #header-inner .live-search ul li .product-price span.price,
	#header #header-inner .live-search ul li .product-price .price-special {
		display: inline;
		margin: 0;
		font-size: 14px;
	}

	#header #header-inner .live-search ul li .product-price .special {
		display: inline;
		margin: 0 6px 0 0;
	}

	/* kosik: zluta "pilulka" s taskou, poctem kusu a cenou (driv tmave cerveny box, cena pretekala) */
	#header #mini-cart {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 999px;
		background-color: #f9b233;
	}

	#header #mini-cart .cart-head {
		display: flex;
		align-items: center;
		height: 42px;
		min-width: 0;
		margin: 0;
		padding: 0 16px 0 14px;
		line-height: 1.2;
	}

	#header #mini-cart .minicart-icon {
		display: block;
		position: relative;
		top: 0;
		margin-right: 8px;
		font-size: 22px;
		color: #2c2d33;
	}

	#header #mini-cart .cart-items {
		position: relative;
		top: 0;
		right: auto;
		bottom: auto;
		left: auto;
		margin: 0;
		font-size: 11px;
		font-weight: 700;
		text-align: left;
		color: #2c2d33;
	}
}

/* Kosik na pocitaci: pocet kusu v tasce, cena bile pod taskou (cena s tisici se do tasky nevesla -
   bylo videt jen "1" a zbytek splyval s tmavou hlavickou). Text je "N ks <br> cena" v jednom prvku. */
@media (min-width: 992px) {
	#header #mini-cart .cart-items {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		color: #fff;
		line-height: 42px;
		white-space: nowrap;
	}

	#header #mini-cart .cart-items::first-line {
		color: #40414b;
	}
}

/* Rozbaleni kosiku: pocet kusu a cena na jednom radku (zalamovaly se na "x / 1" a "1 / 694,00Kc") */
#mini-cart .dropdown-cart-content .table td.text-right {
	white-space: nowrap;
}

/* Rozbaleni kosiku na mobilu (na iPhonu ho otevre prvni tuknuti na kosik): bylo jen 290 px siroke,
   sloupec s obrazkem produktu se smrskl a z obrazku zbyl jen maly krouzek (ramecek) */
@media (max-width: 767px) {
	#header #mini-cart.dropdown .dropdown-menu {
		width: calc(100vw - 30px);
		max-width: 420px;
	}

	#mini-cart .dropdown-cart-content .table td:first-child {
		width: 62px;
	}

	#mini-cart .dropdown-cart-content .table td:first-child img {
		width: 54px;
		max-width: none;
		height: auto;
	}
}

/* nejuzsi telefony: mensi obrazek a okraje, at se vejde i tlacitko pro odebrani */
@media (max-width: 374px) {
	#mini-cart .dropdown-cart-content {
		padding: 10px;
	}

	#mini-cart .dropdown-cart-content .table > tbody > tr > td {
		padding: 6px 3px;
		font-size: 13px;
	}

	#mini-cart .dropdown-cart-content .table td:first-child {
		width: 46px;
	}

	#mini-cart .dropdown-cart-content .table td:first-child img {
		width: 40px;
	}
}

/* Nasepavac hledani (i na pocitaci): lista "Vsechny vysledky" pod seznamem (prekryvala posledni vysledek)
   a v barvach promerch misto zelene */
#search .live-search .result-text {
	position: static;
	border-radius: 0 0 10px 10px;
	background-color: #40414b;
}

#search .live-search .view-all-results:hover,
#search .live-search .view-all-results:focus {
	color: #f9b233;
}

/* Mobilni menu jako na farme: svetly vysouvaci panel, nahore nadpis a krizek, kategorie s rozbalovanim,
   dole odkazy s ikonami a mena. Otevirani a rozbalovani obsluhuje dal common.js (.mobile-toggle, .arrow). */
#mobile-menu {
	left: 0;
	width: 360px;
	max-width: 88vw;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	background-color: #fff;
	color: #2c2d33;
	font-size: 15px;
	overflow-y: auto;
	transition: transform 0.28s ease, visibility 0.28s;
	-webkit-transition: -webkit-transform 0.28s ease, visibility 0.28s;
}

body.opened-menu #mobile-menu {
	-webkit-transform: none;
	transform: none;
}

body.opened-menu {
	overflow: hidden;
}

#mobile-menu-overlay {
	background-color: rgba(15, 18, 22, 0.5);
}

#mobile-menu .mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 18px;
	border-bottom: 1px solid #e3e4e4;
	font-size: 17px;
}

#mobile-menu .mobile-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #e3e4e4;
	border-radius: 50%;
	color: #2c2d33;
	font-size: 16px;
}

#mobile-menu .menu-wrap {
	margin: 0;
	padding: 0;
}

#mobile-menu .accordion-menu,
#mobile-menu .mobile-menu.accordion-menu {
	margin: 0;
	padding: 6px 0;
	font-size: 15px;
	list-style: none;
}

#mobile-menu .accordion-menu li {
	line-height: 1.4;
}

#mobile-menu .accordion-menu li a {
	margin: 0;
	padding: 13px 18px;
	background-color: transparent;
	color: #2c2d33;
	font-weight: 600;
	line-height: 1.4;
}

#mobile-menu .accordion-menu > li > a {
	padding-right: 56px;
}

#mobile-menu .accordion-menu li.open > a,
#mobile-menu .accordion-menu li > a:hover {
	background-color: transparent;
}

/* sipka pro rozbaleni pres celou vysku radku */
#mobile-menu .accordion-menu .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	right: 0;
	width: 52px;
	height: 100%;
	border-radius: 0;
	color: #6b6c75;
	font-size: 18px;
	line-height: 1;
}

#mobile-menu .accordion-menu .arrow:before,
#mobile-menu .accordion-menu .open > a > .arrow:before {
	content: "\f107";
	display: inline-block;
	transition: transform 0.2s;
}

#mobile-menu .accordion-menu .open > a > .arrow:before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

#mobile-menu .accordion-menu ul {
	margin: 0;
	padding: 0 0 8px;
	background-color: #f5f5f7;
	list-style: none;
}

#mobile-menu .accordion-menu ul li a {
	padding: 10px 18px 10px 32px;
	color: #55565e;
	font-weight: 400;
}

#mobile-menu .accordion-menu ul li a.mobile-menu-all {
	color: #8a5d00;
	font-weight: 600;
}

#mobile-menu .mobile-menu-links {
	padding: 6px 0;
	border-top: 1px solid #e3e4e4;
}

#mobile-menu .mobile-menu-links .accordion-menu li a {
	display: flex;
	align-items: center;
	padding: 11px 18px;
	color: #55565e;
	font-weight: 400;
}

#mobile-menu .mobile-menu-links .accordion-menu li a i {
	width: 18px;
	margin-right: 12px;
	text-align: center;
}

#mobile-menu .mobile-menu-currency {
	border-top: 1px solid #e3e4e4;
}

#mobile-menu .mobile-menu-currency .accordion-menu li a {
	font-weight: 400;
}

/* Akce (modul aukce): sloupec mel tridu .product a uvnitr dalsi .product - dvojite odsazeni nad obrazkem */
body.skin17-2 .productdeals .product-grid .product.product-col {
	padding-top: 0;
}

/* Odpocet akce podle pretetovanie.sk: cerveny pruh pod obrazkem, cisla s dvojteckami, pod nimi D H M S */
.productdeals .footer-deals {
	position: static;
	text-align: center;
}

/* cervene je az samotne pocitadlo - prazdny obal (nez skript odpocet vyplni) neni videt */
.productdeals .footer-deals .circle {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

.productdeals .item-countdown ul.list-inline {
	margin: 0;
	padding: 7px 0 6px;
	background-color: #b70505;
	font-size: 0;
	white-space: nowrap;
	text-align: center;
}

.productdeals .item-countdown li {
	display: inline-block;
	position: relative;
	width: 44px;
	padding: 0;
	font-size: 11px;
	vertical-align: top;
}

.productdeals .item-countdown .countdown_num {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.productdeals .item-countdown li + li .countdown_num:before {
	content: ":";
	position: absolute;
	top: 0;
	left: -3px;
	font-weight: 400;
}

.productdeals .item-countdown li .smalll {
	display: block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	opacity: 0.85;
}

/* Skoncena akce: male seda visacka misto velkeho cerveneho bloku */
.productdeals .lof-labelexpired {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 10px;
	border-radius: 3px;
	background-color: #e6e6e6;
	color: #40414b;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Detail produktu: tlacitko "Momentalne vyprodano" sede misto svetle modreho */
.add-to-cart .btn-primary.disabled,
.add-to-cart .btn-primary.disabled:hover,
.add-to-cart .btn-primary.disabled:focus,
.add-to-cart .btn-primary.disabled:active {
	height: 2.7143em;
	padding: 0 2.1429em;
	border: 1px solid #e6e6e6;
	background: #e6e6e6;
	color: #40414b;
	font-size: 14px;
	text-shadow: none;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

/* Mobil a dotykova zarizeni: tlacitka u produktu (kosik, prani, porovnani) videt hned, bez najeti mysi */
@media (max-width: 767px), (hover: none) {
	body.skin17-2 .product-grid > .row > div .product-action {
		position: static;
		opacity: 1;
		margin: 8px 0 0;
	}

	body.skin17-2 .product-grid > .row > div:hover {
		box-shadow: none;
	}

	/* bez posouvani produktu pri dotyku (na pocitaci se produkt posune nahoru a ukaze tlacitka) */
	body.skin17-2 .product-grid .product,
	body.skin17-2 .product-grid > .row > div:hover .product {
		padding-top: 20px;
		padding-bottom: 20px !important;
	}

	body.skin17-2 .productdeals .product-grid .product.product-col {
		padding-top: 0;
		padding-bottom: 0 !important;
	}
}

@media (max-width: 991px) {
	/* uzsi obrazky (mobil, tablet): "Sleva!" dolu doprava, nahore vlevo zustanou stitky (Oficialni licence, Novinka) */
	body.skin17-2 .product-grid .product-image .onsale {
		top: auto;
		bottom: 0.8em;
	}

	/* akce: 2 vedle sebe misto jedne pres celou sirku, jedina akce uprostred */
	.productdeals .products-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.productdeals .products-row:before,
	.productdeals .products-row:after {
		display: none;
	}

	.productdeals .products-row > .product-col {
		float: none;
		width: 50%;
	}
}

@media (max-width: 767px) {
	.top-info {
		padding-bottom: 0;
	}

	/* mezery mezi radky modulu na uvodu (common/content_top.tpl) */
	#content .md-margin.half {
		margin-bottom: 20px;
	}

	#content .xs-margin.half {
		margin-bottom: 0;
	}

	body.skin17-2 .product-grid .product,
	body.skin17-2 .product-grid > .row > div:hover .product {
		padding-top: 15px;
		padding-bottom: 15px !important;
	}

	/* nazev max. na 3 radky, at maji produkty vedle sebe stejnou vysku */
	body.skin17-2 .product-grid .product h3 {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 13px;
		line-height: 1.35;
	}

	body.skin17-2 .product-grid .product .price {
		font-size: 17px;
	}

	.productdeals .item-countdown li {
		width: 32px;
	}

	.productdeals .item-countdown .countdown_num {
		font-size: 16px;
	}

	.productdeals .item-countdown li .smalll {
		font-size: 10px;
	}
}

/* Kategorie a vyhledavani na mobilu: 2 produkty vedle sebe.
   Sablona kategorie sklada produkty do radku po 3 - radky se "rozpusti" a produkty tecou souvisle. */
@supports (display: contents) {
	@media (max-width: 767px) {
		#mfilter-content-container .product-grid.active {
			display: flex;
			flex-wrap: wrap;
			position: relative;
		}

		#mfilter-content-container .product-grid.active > .row {
			display: contents;
		}

		#mfilter-content-container .product-grid.active > .row:before,
		#mfilter-content-container .product-grid.active > .row:after {
			display: none;
		}

		#mfilter-content-container .product-grid.active > .row > div {
			float: none;
			width: 50%;
			border-right: none;
		}

		/* svisla cara mezi sloupci (cary u jednotlivych produktu by pri 3 v radku vychazely nepravidelne) */
		#mfilter-content-container .product-grid.active:before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			border-left: 1px solid #e3e4e4;
		}
	}
}

/* Okno po pridani do kosiku na mobilu (modul tabulkaDoprava ve fancyboxu, otevira ho stranka produktu):
   custom.css mu dava sirku 500 px - na uzsim displeji se okno neveslo do radku a fancybox ho odsunul
   pod spodni okraj, videt bylo jen tmave pozadi */
@media (max-width: 575px) {
	#notification {
		max-width: 100%;
	}

	#notification .alert {
		align-items: center;
		padding: 15px 15px 5px;
	}

	#notification .alert .image {
		flex: 0 0 90px;
		margin-right: 12px;
	}

	#notification .alert .image img {
		display: block;
		width: 90px;
		height: auto;
	}

	/* inline styl sablony: width 50 %, margin auto */
	#notification .alert .notification {
		flex: 1 1 auto;
		width: auto !important;
		margin: 0 !important;
	}

	#notification .btnLine {
		display: flex !important;
		flex-direction: column;
		padding: 5px 15px 15px !important;
	}

	#notification .btnLine .btn {
		float: none !important;
		width: 100%;
		margin: 0 0 8px;
		white-space: normal;
	}

	/* doporucene produkty: mensi nadpis a obrazky, at okno neni zbytecne dlouhe */
	#notification .related-container h2 {
		margin: 0 0 10px;
		font-size: 18px;
		line-height: 1.3;
	}

	#notification .related-container .product-image img {
		width: auto;
		max-width: 100%;
		max-height: 160px;
		margin: 0 auto;
	}
}