/* Hlavicka a rozlozeni pro mobil/tablet. Nacita se po style.css; desktop (od 992 px) meni jen
   pravidla, ktera byla driv inline v biz_header.xml (menu 40 px) a v inline stylech horni listy. */

/* --- Horni lista (driv inline styly v biz_header.xml) --- */
#topbar { border-bottom: 1px solid #cfcfcf; overflow: auto; padding: 5px 10px; }
#topbar .topbar-contact { width: 60%; float: left; }
#topbar .topbar-account { width: 36%; float: right; text-align: right; }

/* --- Menu: hodnoty driv v <style> bloku z biz_header.xml --- */
.my-template #menu { height: 40px; }
.my-template #menu > ul > li { padding: 7px 5px 5px 0px; }
.my-template #menu ul li a { font-size: 17px; }
/* Polozky menu jsou floaty; flow-root je drzi uvnitr <ul>, takze pripadne zalomeni menu
   (vetsi pismo, nova kategorie) uz neodstrci levy sloupec a drobecky doprava. */
.my-template #menu > ul { display: flow-root; }

/* --- Mobilni prvky jsou na desktopu skryte --- */
.mobile-icons { display: none; }
.my-template #menu .menu-account,
.my-template #menu .menu-mobile-only { display: none; }

/* ===================== Mobil a tablet (do 991 px) ===================== */
@media (max-width: 991px) {
	/* Horni lista: jen kontakt, na stred; ucet je v hamburger menu */
	#topbar .topbar-contact { width: 100%; float: none; text-align: center; }
	#topbar .topbar-account { display: none; }
	#topbar .topbar-contact a { white-space: nowrap; }

	/* Hlavicka: jeden radek logo + ikony, pod nim (po kliknuti na lupu) vyhledavani */
	.my-template #header { display: flex; flex-wrap: wrap; align-items: center; height: auto; margin: 0; padding: 8px 10px; box-sizing: border-box; }
	/* flex-basis 0 + min-width 0: logo se zmensi a ikony zustanou na stejnem radku i na 360 px */
	.my-template #header .logobox { flex: 1 1 0; min-width: 0; width: auto; max-width: 260px; float: none; }
	.my-template #header .logobox img { display: block; width: 100%; height: auto; }
	.my-template #header #logo { margin: 0; }
	.my-template #header .mobile-icons { display: flex; margin-left: auto; }
	.my-template #header .mobile-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: #2d882d; cursor: pointer; text-decoration: none; }
	.my-template #header .mobile-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	#mobile-cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #3bc315; color: #fff; font: bold 11px/18px Arial, sans-serif; text-align: center; }
	#mobile-cart-count.empty { display: none; }
	#mobile-menu-toggle .icon-close { display: none; }
	body.menu-open #mobile-menu-toggle .icon-open { display: none; }
	body.menu-open #mobile-menu-toggle .icon-close { display: block; }
	.my-template #header .cartbox { display: none; }

	/* Vyhledavani: stejny #search, jen na celou sirku pod ikonami */
	.my-template #header .searchbox { display: none; flex: 0 0 100%; width: 100%; float: none; margin-top: 8px; }
	body.search-open .my-template #header .searchbox { display: block; }
	.my-template #header #search { position: relative; top: auto; right: auto; display: flex; width: auto; height: auto; padding: 6px; box-sizing: border-box; }
	.my-template #header #search input#q { flex: 1 1 auto; float: none; width: auto; min-width: 0; height: 23px; font-size: 16px; }
	.my-template #header #search input#submit { flex: 0 0 auto; float: none; width: 90px; margin-left: 6px; }
	#livesearch_search_results { top: 100%; left: 0; width: 100%; box-sizing: border-box; }

	/* Menu: rozbalovaci seznam pod hlavickou, kazda polozka na vlastnim radku */
	.my-template #menu { display: none; width: 100%; box-sizing: border-box; height: auto; margin: 0 0 10px; padding: 0; border-radius: 0; }
	.my-template #menu .menu-mobile-only { display: block; }
	.my-template #menu .menu-desktop-only { display: none; }
	body.menu-open .my-template #menu { display: block; }
	.my-template #menu > ul > li { float: none; display: block; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); }
	.my-template #menu > ul > li > a { display: block; padding: 13px 15px; margin: 0; font-size: 18px; line-height: 22px; border-radius: 0; }
	.my-template #menu > ul > li:hover > a { background: none; color: #fff; border-radius: 0; }
	/* common.js pri nacteni spocita zaporny margin-left podmenu z offsetu; se skrytym menu vyjde nesmysl, proto !important */
	.my-template #menu > ul > li > div, .my-template #menu > ul > li:hover > div { display: block; position: static; margin: 0 !important; padding: 0 0 6px 30px; background: none; border: 0; opacity: 1; }
	.my-template #menu > ul > li > div > ul { display: block; padding: 0; }
	.my-template #menu > ul > li ul > li > a { padding: 8px 0; font-size: 16px; white-space: normal; }
	.my-template #menu .menu-account { display: block; padding: 13px 15px; color: #fff; font-size: 15px; }
	.my-template #menu .menu-account a { display: inline; padding: 0; margin: 0; font-size: inherit; color: #feca31; text-decoration: underline; }
}

@media (max-width: 480px) {
	#topbar .topbar-hours { display: none; }
}

/* ===================== Telo webu do 991 px ===================== */
@media (max-width: 991px) {
	/* Levy sloupec je skryty, kategorie jsou v hamburger menu; obsah na celou sirku */
	#column-left { display: none; }
	#column-left + #column-right + #content, #column-left + #content { margin-left: 0; }
	#column-right + #content { margin-right: 0; }
	/* Oznameni pocita s menu nad sebou (margin-top -15px); bez menu by prekryvalo hlavicku */
	.my-notice { margin-top: 10px; }
	.breadcrumb { line-height: 1.7; }
}

@media (max-width: 991px) {
	/* Homepage box se zalozkami: 7 knih po 110 px v radku s width 100% + padding (content-box)
	   pretece uz na 800 px; knihy se zalamuji a sirka pocita i padding/okraj */
	.my-template .fast .fast-content .item { box-sizing: border-box; flex-wrap: wrap; justify-content: center; }
	.my-template .fast .fast-content .item .book { margin: 0 4px; }
}

@media (max-width: 480px) {
	.my-template .fast .fast-headers .item { padding: 8px 6px; font-size: 1.1em; }
}