/* =====================================================================
   MisaFoods — доработки магазина. 03.10.2026, SDLab.
   Подключается после style.css дочерней темы (inc/mf-shop.php).
   ===================================================================== */

/* --- 1. Мобильная шапка: кабинет и корзина рядом с кнопкой меню --- */
.mf-mobile-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 8px;
	vertical-align: middle;
}
.mf-mobile-actions .icon-btn {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 44px;
	line-height: 44px;
	border-radius: 50%;
	font-size: 16px;
	text-align: center;
}
@media (min-width: 992px) {
	.mf-mobile-actions { display: none !important; }
}
@media (max-width: 359px) {
	.mf-mobile-actions .mf-m-account { display: none; }
}

/* --- 2. Подсказки в полях: тема делала Каждое Слово С Заглавной --- */
input::placeholder,
textarea::placeholder {
	text-transform: none !important;
}

/* --- 3. Мобильная шапка в одну строку: логотип слева, значки и меню справа --- */
@media (max-width: 991.98px) {
	.header6-inner > .container > .row {
		flex-wrap: nowrap;
	}
	/* средняя колонка (часы работы, телефон) на телефоне пуста — убираем её отступы */
	.header6-inner > .container > .row > .col-auto:nth-child(2) {
		display: none;
	}
	.header6-inner > .container > .row > .col-auto:last-child {
		display: flex;
		align-items: center;
		white-space: nowrap;
	}
	.header6-inner .vs-menu-toggle {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}
}
@media (max-width: 420px) {
	body .header6-inner .header-logo img {
		max-width: 150px !important;
		height: auto !important;
	}
	.mf-mobile-actions { gap: 6px; margin-right: 6px; }
	.mf-mobile-actions .icon-btn { width: 40px; height: 40px; line-height: 40px; font-size: 15px; }
}

/* --- 4. Мобильное меню: без «Каждое Слово С Заглавной» --- */
.vs-mobile-menu ul li a,
.vs-mobile-menu .mf-lang-mobile__title {
	text-transform: none;
}
.vs-mobile-menu .mf-lang-mobile__title {
	text-transform: uppercase;
}

/* --- 5. Каталог: отступ между рядами карточек (ряды стояли вплотную) --- */
.row:has(> [class*="col-"] > .vs-product-box1) {
	row-gap: 24px;
}
.row > [class*="col-"] > .vs-product-box1 {
	margin-bottom: 0 !important;
}

/* --- 6. Страница товара: двойная запятая между категориями --- */
.posted_in a::after,
.product_meta .posted_in a::after {
	content: none !important;
}

/* --- 7. Сайдбар каталога: текущая категория, на телефоне список свёрнут --- */
.sidebar ul.mf-cat-menu li.current-menu-item > a,
.sidebar ul.mf-cat-menu li.current-menu-item > a > strong {
	color: #659833 !important;
}
@media (max-width: 991.98px) {
	.vs-shop-wrapper .sidebar { margin-top: 0 !important; margin-bottom: 24px; }
	.mf-cat-widget .dgwt-wcas-search-wrapp { display: none; }   /* поиск уже есть в шапке */
	.mf-cat-widget .mf-cat-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 12px 16px;
		border: 1px solid #e3e8dc;
		border-radius: 12px;
		background: #f6f8f3;
		cursor: pointer;
	}
	.mf-cat-widget .mf-cat-toggle h4 { margin: 0; font-size: 18px; }
	.mf-cat-widget .mf-cat-toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-right: 4px;
		border-right: 2px solid #659833;
		border-bottom: 2px solid #659833;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.mf-cat-widget.mf-cats-open .mf-cat-toggle::after { transform: rotate(-135deg); }
	.mf-cat-widget .menu-kategooriad-container { display: none; padding-top: 10px; }
	.mf-cat-widget.mf-cats-open .menu-kategooriad-container { display: block; }
}

/* --- 8. Боковая корзина на телефоне (тема показывала её только на компьютере) --- */
@media (max-width: 991.98px) {
	.sidemenu-wrapper.d-none.show { display: block !important; }
	.sidemenu-wrapper .sidemenu-content { width: 100%; max-width: 380px; }
}

/* --- 9. Баннер главной: кнопка для планшета и телефона (отдельные слои слайдера) --- */
@media (max-width: 767.98px) {
	.ls-html-layer.ls-hide-desktop.ls-hide-tablet .hero-btn {
		font-size: 12px !important;
		line-height: 1.2 !important;
		padding: 7px 16px !important;
		border-radius: 20px !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ls-html-layer.ls-hide-desktop.ls-hide-phone .hero-btn {
		font-size: 15px !important;
		line-height: 1.2 !important;
		padding: 12px 26px !important;
	}
}

/* --- 10. Декоративные рисунки и наклейка «naturally grown» налезали на текст на экранах уже 1700 px --- */
@media (max-width: 1699.98px) {
	.elementor-widget-foodelioanimationimage .shape1,
	.elementor-widget-foodelioanimationimage .shape2 {
		display: none !important;
	}
	.elementor-top-section.vs-about-wrapper > .elementor-background-overlay,
	.elementor-top-section[class*="vs-ab"] > .elementor-background-overlay {
		display: none !important;
	}
}

/* --- 11. Заголовки секций и ссылки верхней панели: без «Каждое Слово С Заглавной» --- */
.sec-title1.subtitle-selector,
.header-top-wrapper a,
.header-links a,
.posted_in,
.nav-link,
.tag-cloud-link {
	text-transform: none !important;
}

/* --- 12. Телефон: товары в две колонки (была одна, 12 товаров = 7700 px прокрутки) --- */
@media (max-width: 575.98px) {
	.row:has(> [class*="col-"] > .vs-product-box1) {
		--bs-gutter-x: 12px;
		row-gap: 12px;
	}
	.row > [class*="col-"]:has(> .vs-product-box1) {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}
	.block_tabs_cat_container {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
		padding: 0 12px !important;
	}
	.block_tabs_cat_container > .block_tabs_more { grid-column: 1 / -1; }
	.vs-product-box1 { padding: 8px !important; }
	.vs-product-box1 .product-content { padding: 10px 8px !important; aspect-ratio: auto !important; height: auto !important; }
	.vs-product-box1 .product-title,
	.vs-product-box1 .product-title a { font-size: 14px !important; line-height: 1.25 !important; }
	.vs-product-box1 .bttn_sec1,
	.vs-product-box1 .vs-btn { font-size: 13px !important; padding: 10px 6px !important; width: 100%; white-space: nowrap; }
}

/* --- 13. Телефон: название товара в карточке — не более двух строк, без обрезанной третьей --- */
@media (max-width: 575.98px) {
	.vs-product-box1 .product-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-height: 2.5em;
		margin-bottom: 6px !important;
	}
}

/* --- 14. Главная, плитки категорий: скругление как у остальных карточек сайта (04.10.2026) --- */
.vs-cat-card .cat-img {
	border-radius: 16px;
}
.vs-cat-card .cat-content {
	border-radius: 12px;
}

/* --- 15. Карточка товара: кнопка «в корзину» вылезала за низ карточки в каталоге (04.10.2026) ---
   Причина: inline-стиль в header.php дочерней темы задаёт .product-content { aspect-ratio: 1.2 } — в каталоге
   карточка узкая (245 px), блок получал высоту 204 px при содержимом 236 px. Фиксируем высоту по содержимому.
   Плюс курсор-«рука» на кнопке (это div, не ссылка). */
.vs-product-box1 .product-content {
	aspect-ratio: auto !important;
}
.vs-product-box1 .bttn_sec1,
.vs-product-box1 .qut-btn {
	cursor: pointer;
}

/* --- 16. Каталог: пагинация прилипала к карточкам и была с прямыми углами (04.10.2026) --- */
.pagination-layout1 {
	padding-top: 36px;
}
.pagination-layout1 ul li a,
.pagination-layout1 ul li span {
	border-radius: 10px;
}

/* --- 17. Кнопка WhatsApp (Joinchat) закрывала кнопку «наверх» — поднимаем выше неё (04.10.2026) --- */
/* CSS плагина грузится в подвале и перебивает обычный селектор — нужна специфичность выше. */
.joinchat.joinchat {
	--bottom: 100px;
}

/* --- 18. Кнопка «в корзину»: состояние загрузки и сообщение под кнопкой (04.10.2026) ---
   Раньше сообщение «Toode lisatud!» выводилось position:absolute с margin-top:-99px и налезало на цену, а пока сервер
   отвечал (1,5–3 с), ничего не менялось — непонятно, нажалось ли. */
.vs-product-box1 .bttn_sec1.loading,
.bttn_sec1.loading {
	position: relative;
	pointer-events: none;
	opacity: .75;
	color: transparent !important;
}
/* спиннер — вложенный span (псевдоэлементы .vs-btn заняты эффектом темы) */
.bttn_sec1 .mf-spinner {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 3px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mf-spin .7s linear infinite;
}
@keyframes mf-spin {
	to { transform: rotate(360deg); }
}
.container_add_cart .add-cart-message {
	width: 100%;
	margin: 0;
	padding: 4px 0 0;
	font-size: 13px;
	line-height: 1.3;
	color: #4f8a2a;
	text-align: center;
	order: 10;
}
.container_add_cart .add-cart-message.is-error {
	color: #c0392b;
}

/* =====================================================================
   19. Страница «Itaalia HoReCa kataloog» (ID 8317) — приведение к стилю сайта (04.10.2026)
   Страница собрана в Elementor вне темы: шрифт Roboto из глобальных настроек Elementor, своя палитра
   (#171714 чёрный, #315E43 тёмно-зелёный, бежевые #F3EEE5/#F7F3EC), прямые углы. Сайт: заголовки «Advent Pro»,
   текст Lato #858585, зелёный #659833, оранжевый акцент #fe9505, карточки 16 px с рамкой #ece8e1, кнопки-«пилюли».
   Правила с !important, потому что Elementor пишет стили виджетов с высокой специфичностью (post-8317.css).
   ===================================================================== */
.elementor-8317 .elementor-heading-title,
.elementor-8317 .elementor-icon-box-title,
.elementor-8317 .elementor-icon-box-title span {
	font-family: "Advent Pro", sans-serif !important;
	font-weight: 700 !important;
	color: #000 !important;
	letter-spacing: 0 !important;
}
.elementor-8317 .elementor-widget-text-editor,
.elementor-8317 .elementor-icon-box-description,
.elementor-8317 .elementor-icon-list-text,
.elementor-8317 .elementor-field-group label,
.elementor-8317 .elementor-field {
	font-family: Lato, sans-serif !important;
	color: #858585 !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
}
.elementor-8317 .elementor-icon-list-text { color: #333 !important; }

/* подзаголовки-«ярлыки» над заголовками */
.elementor-8317 .elementor-element-a10f0003,
.elementor-8317 .elementor-element-a30f0003 {
	font-family: "Advent Pro", sans-serif !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	letter-spacing: .08em !important;
	color: #fe9505 !important;
	text-transform: uppercase;
}
.elementor-8317 .elementor-element-a10f0003 .elementor-widget-container,
.elementor-8317 .elementor-element-a30f0003 .elementor-widget-container { color: #fe9505 !important; }

/* первый экран: вместо чёрного фона — светлый, как остальной сайт */
.elementor-8317 .elementor-element-a10f0001 {
	background-color: #f7f6f2 !important;
	background-image: none !important;
}
.elementor-8317 .elementor-element-a10f0001 .elementor-heading-title { color: #000 !important; font-size: 56px !important; line-height: 1.05 !important; }
.elementor-8317 .elementor-element-a10f0001 .elementor-widget-text-editor { color: #585858 !important; }
.elementor-8317 .elementor-element-a10f000a img,
.elementor-8317 .elementor-element-a30f0007 img {
	border-radius: 16px !important;
	border: 1px solid #ece8e1;
	background: #fff;
}

/* кнопки — как кнопки сайта (.vs-btn): «пилюля», Lato 700, зелёная; вторая — оранжевая */
.elementor-8317 .elementor-button,
.elementor-8317 .elementor-button-link,
.elementor-8317 .elementor-field-type-submit .elementor-button {
	font-family: Lato, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.8 !important;
	padding: 12px 37px !important;
	border-radius: 9999px !important;
	border: none !important;
	background-color: #659833 !important;
	color: #fff !important;
	box-shadow: 3px 6px 0 0 rgba(186, 186, 186, .43) !important;
	transition: all .4s ease-in-out;
}
.elementor-8317 .elementor-button:hover { background-color: #fe9505 !important; color: #fff !important; }
.elementor-8317 .elementor-element-a10f0008 .elementor-button { background-color: #fe9505 !important; }
.elementor-8317 .elementor-element-a10f0008 .elementor-button:hover { background-color: #659833 !important; }

/* преимущества: зелёные кружки-иконки, светлый фон */
.elementor-8317 .elementor-element-a20f0001 { background-color: #fff !important; }
.elementor-8317 .elementor-element-a20f0001 .elementor-icon-box-icon .elementor-icon {
	background-color: #659833 !important;
	color: #fff !important;
	fill: #fff !important;
	border-color: #659833 !important;
}
.elementor-8317 .elementor-element-a20f0001 .elementor-icon-box-title { font-size: 24px !important; }

/* сетка категорий: карточки как карточки товаров */
.elementor-8317 .elementor-element-a40f0001 { background-color: #f7f6f2 !important; }
.elementor-8317 .elementor-element-a40f0004 > .e-con,
.elementor-8317 .elementor-element-a40f0004 > .elementor-element {
	background-color: #fff !important;
	border: 1px solid #ece8e1 !important;
	border-radius: 16px !important;
	padding: 14px !important;
	transition: box-shadow .25s ease, transform .25s ease;
}
.elementor-8317 .elementor-element-a40f0004 > .e-con:hover {
	box-shadow: 0 10px 28px rgba(31, 41, 51, .10);
	transform: translateY(-2px);
}
.elementor-8317 .elementor-element-a40f0004 .elementor-widget-image img {
	border-radius: 12px !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}
.elementor-8317 .elementor-element-a40f0004 .elementor-heading-title { font-size: 24px !important; }
.elementor-8317 .elementor-element-a40f0004 .elementor-button { padding: 10px 28px !important; }

/* два блока «Пиццериям / Ресторанам» */
.elementor-8317 .elementor-element-a50f0002,
.elementor-8317 .elementor-element-a50f0006 { border-radius: 16px !important; }
.elementor-8317 .elementor-element-a50f0002 { background-color: #659833 !important; }
.elementor-8317 .elementor-element-a50f0002 .elementor-heading-title,
.elementor-8317 .elementor-element-a50f0002 .elementor-widget-text-editor,
.elementor-8317 .elementor-element-a50f0002 .elementor-icon-list-text,
.elementor-8317 .elementor-element-a50f0002 .elementor-icon-list-icon i,
.elementor-8317 .elementor-element-a50f0002 .elementor-icon-list-icon svg { color: #fff !important; fill: #fff !important; }
.elementor-8317 .elementor-element-a50f0006 { background-color: #f7f6f2 !important; border: 1px solid #ece8e1; }
.elementor-8317 .elementor-element-a50f0006 .elementor-icon-list-icon i,
.elementor-8317 .elementor-element-a50f0006 .elementor-icon-list-icon svg { color: #659833 !important; fill: #659833 !important; }

/* производители, новинки, форма */
.elementor-8317 .elementor-element-a60f0001 { background-color: #fff !important; }
.elementor-8317 .elementor-element-a60f0003 { font-family: "Advent Pro", sans-serif !important; font-size: 22px !important; color: #333 !important; }
.elementor-8317 .elementor-element-a80f0001 { background-color: #659833 !important; }
.elementor-8317 .elementor-element-a80f0001 .elementor-heading-title,
.elementor-8317 .elementor-element-a80f0001 .elementor-widget-text-editor { color: #fff !important; }
.elementor-8317 .elementor-element-a80f0005 { border-radius: 16px !important; }
.elementor-8317 .elementor-field-group .elementor-field,
.elementor-8317 .elementor-field-group textarea {
	border: 1px solid #ece8e1 !important;
	border-radius: 12px !important;
	background: #fff !important;
	padding: 10px 14px !important;
}
.elementor-8317 .elementor-field-group label { color: #333 !important; font-weight: 700 !important; }

/* общие заголовки секций */
.elementor-8317 .elementor-element-a40f0002 .elementor-heading-title,
.elementor-8317 .elementor-element-a60f0002 .elementor-heading-title,
.elementor-8317 .elementor-element-a70f0002 .elementor-heading-title,
.elementor-8317 .elementor-element-a80f0003 .elementor-heading-title,
.elementor-8317 .elementor-element-a30f0004 .elementor-heading-title { font-size: 44px !important; line-height: 1.1 !important; }
.elementor-8317 .elementor-element-a50f0003 .elementor-heading-title,
.elementor-8317 .elementor-element-a50f0007 .elementor-heading-title { font-size: 34px !important; }
@media (max-width: 767px) {
	.elementor-8317 .elementor-element-a10f0001 .elementor-heading-title { font-size: 38px !important; }
	.elementor-8317 .elementor-element-a40f0002 .elementor-heading-title,
	.elementor-8317 .elementor-element-a60f0002 .elementor-heading-title,
	.elementor-8317 .elementor-element-a70f0002 .elementor-heading-title,
	.elementor-8317 .elementor-element-a80f0003 .elementor-heading-title,
	.elementor-8317 .elementor-element-a30f0004 .elementor-heading-title { font-size: 32px !important; }
}

/* 19а. Тема задаёт цвет самим <p> — цвета виджетов на них не наследуются; и товары из шорткода [products]
   выводятся прямо в .row без колонок (каждая карточка во всю ширину). */
.elementor-8317 .elementor-widget-text-editor p,
.elementor-8317 .elementor-icon-box-description p { color: inherit !important; }
.elementor-8317 .elementor-element-a10f0003 p,
.elementor-8317 .elementor-element-a30f0003 p { color: #fe9505 !important; }
.elementor-8317 .elementor-element-a50f0002 p,
.elementor-8317 .elementor-element-a80f0001 p { color: #fff !important; }
.elementor-8317 .elementor-element-a10f0001 p { color: #585858 !important; }
.elementor-8317 .elementor-shortcode .woocommerce > .row {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}
.elementor-8317 .elementor-shortcode .woocommerce > .row > .vs-product-box1 {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
@media (max-width: 991px) {
	.elementor-8317 .elementor-shortcode .woocommerce > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.elementor-8317 .elementor-element-a10f0001 .elementor-element-a10f0003 p { color: #fe9505 !important; }
/* 19б. Карточки категорий: квадрат задаём контейнеру картинки, а не самой картинке — у вертикальных фото (паста 241×700)
   высота контейнера считалась по исходнику и фото налезало на заголовок (видно на телефоне). */
.elementor-8317 .elementor-element-a40f0004 .elementor-widget-image .elementor-widget-container {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}
.elementor-8317 .elementor-element-a40f0004 .elementor-widget-image img {
	width: 100% !important;
	height: 100% !important;
	max-height: 100%;
	aspect-ratio: auto !important;
	object-fit: contain;
	display: block;
}