/* Mobile and tablet responsive styles */

@media screen and (max-width: 1024px) {

	.site__logo {
		width: 280px;
		height: 62px;
		background-size: contain;
	}

	.category {
		min-width: 240px;
		width: calc(50% - 20px);
		flex: 1 1 calc(50% - 20px);
	}

	.roses__container .rose__pageItem {
		min-width: 280px;
		flex: 1 1 calc(50% - 10px);
	}

	#fixed_bar #ya-site-form1 {
		width: 100%;
		max-width: 600px;
	}
}

@media screen and (max-width: 768px) {

	html,
	body {
		max-width: 100%;
	}

	/* overflow-x нельзя вешать на html/body: тогда скроллится body, а не окно —
	   ломаются window.scrollTo, якоря и $(window).scroll (фикс-бар поиска) */
	.site-container {
		max-width: 100%;
		overflow-x: hidden;
	}

	#header,
	#menu,
	#content,
	#sub-section,
	#footer {
		display: block;
		float: none;
		overflow: visible;
	}

	#header {
		height: auto;
		padding: 10px 15px;
	}

	.site__logo {
		position: static;
		width: 100%;
		max-width: 280px;
		height: 62px;
		background-size: contain;
	}

	#menu {
		position: static;
		width: auto;
		padding-top: 10px;
		font-size: 14px;
	}

	#content {
		width: 100%;
		float: none;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.collapsed-menu #content {
		margin-left: 0;
	}

	#sub-section {
		width: 100%;
		float: none;
		padding-top: 0;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.collapsed-menu #sub-section {
		position: static;
		left: auto;
		width: 100%;
	}

	.breadcrumbs {
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	#left-menu,
	#news-block {
		width: 100%;
		box-sizing: border-box;
	}

	.categories_container {
		flex-direction: column;
	}

	.category {
		width: 100%;
		min-width: 0;
		flex: 1 1 100%;
		margin: 10px 0;
		box-sizing: border-box;
	}

	.category img {
		max-width: 100%;
		height: auto;
	}

	.category .cat_image {
		text-align: center;
	}

	.category .category_name {
		text-align: center;
		display: block;
	}

	.roses__container {
		flex-direction: column;
	}

	.roses__container .rose__pageItem {
		width: 100%;
		min-width: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	.rose {
		width: 100%;
		box-sizing: border-box;
	}

	.rose .picture,
	.rose .info {
		float: none;
		width: 100%;
		box-sizing: border-box;
	}

	.rose .param {
		width: auto;
		float: none;
	}

	.rose .rose_info .param {
		width: auto;
	}

	.info .overflowed_text {
		width: auto;
		white-space: normal;
	}

	.info .rose-info__field-cell {
		white-space: normal;
	}

	.contacts-table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* в шаблоне корзины ширина 500px прописана inline — перекрываем */
	[style*="width:500px"] {
		width: 100% !important;
		box-sizing: border-box;
	}

	.cart_items_block {
		overflow-x: auto;
	}

	#fixed_bar {
		height: auto;
		min-height: 44px;
	}

	#fixed_bar #ya-site-form1 {
		width: 100%;
		max-width: none;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.ya_search_form {
		padding-right: 0;
	}

	.mobile-header,
	.show-menu-button {
		display: none !important;
	}

	.pagination li {
		float: none;
		display: inline-block;
		margin: 0 5px 5px 0;
	}

	input,
	select,
	textarea,
	.order_button {
		min-height: 44px;
		font-size: 16px;
		box-sizing: border-box;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 480px) {

	body {
		font-size: 15px;
	}

	#header {
		padding: 8px 10px;
	}

	.site__logo {
		max-width: 220px;
		height: 50px;
	}

	#menu {
		font-size: 13px;
		line-height: 1.4;
	}

	#content,
	#sub-section {
		padding: 0 8px;
	}

	.category .category_description {
		padding: 10px;
		font-size: 14px;
	}

	.name_header {
		font-size: 18px;
	}

	#footer {
		font-size: 13px;
		height: auto;
		padding: 15px 10px;
	}
}