/*
Theme Name:        MFCLIMAT — Климатическая техника
Theme URI:         https://mfclimat.kz/
Description:        Дочерняя тема для MFCLIMAT (ИП MF Service). Современный редизайн интернет-магазина и сервиса кондиционеров: продажа, установка, ремонт, обслуживание. Полностью кастомная вёрстка на коде, WooCommerce, редактируемый контент через Настройщик, SEO-структура без зависимости от конструктора. Родительская тема — Hello Elementor.
Author:            MFCLIMAT Dev Team
Author URI:        https://mfclimat.kz/
Template:          hello-elementor
Version: 3.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mfclimat
Tags:              hvac, air-conditioning, woocommerce, custom-colors, responsive-layout
*/

html { -webkit-text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

:focus { outline: none; }
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* ============================================================ */
/* [adhoc 2026-06-09 v2] Правки клиента                         */
/* ============================================================ */

/* ---------- ПОП-АП "Оставьте заявку — мы перезвоним" ---------- */
/* На сайте реально .mfc-modal__title (не .mfc-popup__title — это была опечатка) */
body.mfc .mfc-modal__title,
body.mfc h2.mfc-modal__title,
.mfc-modal .mfc-modal__title { font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
body.mfc .mfc-modal__text,
.mfc-modal .mfc-modal__text { font-size: 13px !important; line-height: 1.45 !important; }
body.mfc .mfc-modal__head { margin-bottom: 16px !important; padding-right: 28px !important; }
body.mfc .mfc-modal .mfc-eyebrow { font-size: 11px !important; }
body.mfc .mfc-modal .mfc-field__label { font-size: 12px !important; }
body.mfc .mfc-modal input,
body.mfc .mfc-modal textarea,
body.mfc .mfc-modal select { font-size: 14px !important; padding: 9px 12px !important; }
body.mfc .mfc-modal .mfc-btn,
body.mfc .mfc-modal button[type="submit"] { font-size: 14px !important; padding: 10px 16px !important; }
body.mfc .mfc-modal .mfc-form__note { font-size: 11px !important; }

/* ---------- О компании (page-id=19) — H1 "MFCLIMAT — климат..." ---------- */
/* Базовое значение в main.css: clamp(1.55rem, 1.15rem+1.7vw, 2.4rem) ~ до 38px */
/* Каролина: уменьшить ещё на 20-25% от 32px > до ~24-26px */
body.page-id-19 .mfc-about__title,
body.page-id-19 h2.mfc-about__title,
body.mfc.page-id-19 .mfc-about__title { font-size: clamp(18px, 1.6vw, 24px) !important; line-height: 1.2 !important; }
body.page-id-19 .mfc-lead__title { font-size: clamp(24px, 2.8vw, 38px) !important; line-height: 1.2 !important; }

/* О компании: убрать "Обсудить задачу" кнопку в "Почему мы" */
body.page-id-19 .mfc-why .mfc-btn,
body.page-id-19 .mfc-why button[data-mfc-popup-open] { display: none !important; }

/* ---------- ФОТО в "Почему мы" и "О компании" ---------- */
/* Возвращаем главные стили main.css: width 100%, aspect-ratio 4/5, object-fit cover */
/* НЕ object-fit:contain — это давало белые поля */
body.page-id-19 .mfc-why__media,
body.page-id-19 .mfc-about__media {
	position: relative !important;
	align-self: stretch !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}
body.page-id-19 .mfc-why__media .mfc-why__img,
body.page-id-19 .mfc-why__media img,
body.page-id-19 .mfc-about__media .mfc-about__img,
body.page-id-19 .mfc-about__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 22px !important;
	margin: 0 !important;
}
@media (max-width: 1024px) {
	body.page-id-19 .mfc-why__media .mfc-why__img,
	body.page-id-19 .mfc-why__media img,
	body.page-id-19 .mfc-about__media .mfc-about__img,
	body.page-id-19 .mfc-about__media img {
		aspect-ratio: 4 / 5 !important;
		max-height: 480px !important;
	}
}

/* Чтобы grid не растягивал колонки криво */
body.page-id-19 .mfc-why__inner,
body.page-id-19 .mfc-about__inner {
	align-items: center !important;
}

/* ---------- КОРЗИНА /cart/ (page-id=49) и /checkout/ — на полную ширину ---------- */
body.woocommerce-cart .mfc-section.mfc-container,
body.woocommerce-checkout .mfc-section.mfc-container,
body.woocommerce-cart .mfc-container.mfc-section,
body.woocommerce-checkout .mfc-container.mfc-section {
	max-width: 100% !important;
	width: 100% !important;
	padding-inline: clamp(20px, 4vw, 64px) !important;
}
body.woocommerce-cart .mfc-shop,
body.woocommerce-checkout .mfc-shop {
	max-width: 100% !important;
	width: 100% !important;
}
body.woocommerce-cart .mfc-main,
body.woocommerce-checkout .mfc-main {
	width: 100% !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 100% !important;
	width: 100% !important;
	margin-inline: 0 !important;
}
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
	max-width: 100% !important;
	width: 100% !important;
	column-gap: 48px !important;
}
/* Пустая корзина — нормальная ширина и центровка */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
body.woocommerce-cart .cart-empty {
	max-width: 720px !important;
	margin: 0 auto !important;
	text-align: center !important;
	padding-block: clamp(40px, 5vw, 80px) !important;
}
/* Таблица товаров в корзине — полная ширина */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .shop_table {
	width: 100% !important;
	max-width: none !important;
}

/* Подстраховка от ранее заданных правок — убираем contain и фикс высоты */
.mfc-about__media img,
.mfc-why__media img {
	max-height: none;
	object-fit: cover;
}


/* ============================================================ */
/* [2026-06-19] Грид каталога: 4 колонки вместо 3              */
/* ============================================================ */
.mfc-shop ul.products,
.mfc-shop .products {
	grid-template-columns: repeat(4, 1fr) !important;
}

/* Меньший размер карточек при 4 колонках */
.mfc-shop ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
}

/* Адаптив: 3 колонки на планшетах, 2 на мобильных */
@media (max-width: 1024px) {
	.mfc-shop ul.products,
	.mfc-shop .products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 768px) {
	.mfc-shop ul.products,
	.mfc-shop .products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	.mfc-shop ul.products,
	.mfc-shop .products {
		grid-template-columns: 1fr !important;
	}
}


/* ============================================================ */
/* [2026-06-19] Таблетки подкатегорий над сеткой товаров        */
/* ============================================================ */
.mfc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
	padding: 0;
}

.mfc-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--mfc-dark);
	background: var(--mfc-tint-2, #f5f5f5);
	border: 1px solid var(--mfc-line, #e0e0e0);
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.mfc-pill:hover {
	background: var(--mfc-primary, #0066cc);
	color: #fff;
	border-color: var(--mfc-primary, #0066cc);
}

.mfc-pill--active {
	background: var(--mfc-primary, #0066cc);
	color: #fff;
	border-color: var(--mfc-primary, #0066cc);
}

@media (max-width: 768px) {
	.mfc-pills {
		gap: 8px;
	}
	.mfc-pill {
		padding: 6px 12px;
		font-size: 0.85rem;
	}
}