/* ============================================================
   Сітка карток продуктів ZINOVII
   Раніше жила у випадній панелі «ПРОДУКТИ»; 2026-09-05 панель
   прибрана — та сама сітка тепер на головній і на /produkty/
   (світлий варіант карток — .products-light у кінці файлу).
   ============================================================ */
.distribution-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 50px;
	align-items: stretch;
}

.distribution-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	color: #fff;
	text-decoration: none;
	background-color: rgba(255,255,255,0.04);
	border: solid 1px rgba(255,255,255,0.12);
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
	transition: all 250ms;
}

.distribution-card:hover {
	text-decoration: none;
	color: #fff;
	border-color: #339425;
	background-color: rgba(51,148,37,0.14);
}

.distribution-card-thumb {
	width: 100%;
	height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.distribution-card-thumb img {
	max-width: 100%;
	max-height: 100%;
}

.distribution-card h3 {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 10px 0;
	color: #fff;
}

.distribution-card p {
	font-size: 16px;
	line-height: 1.5;
	color: #c5c5c5;
	margin: 0 0 10px 0;
	flex: 1 0 auto;
}

.distribution-card-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	color: #6ec13f;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.menu-container .hover_teal:hover,
.mobile-nav-container .hover_teal:hover {
	background-color: #0f7a52;
}

.menu-container .tiktok,
.mobile-nav-container .tiktok {
	color: #25f4ee;
	border: solid 1px #25f4ee;
}
.menu-container .tiktok:hover,
.mobile-nav-container .tiktok:hover {
	color: #fff;
	border: solid 1px #fff;
}

/* ============================================================
   Floating "Отримайте консультацію" button
   ============================================================ */
.consult-fab-container {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.consult-fab-container.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.consult-fab {
	display: flex;
	align-items: center;
	gap: 14px;
	border: none;
	cursor: pointer;
	background-color: #fff;
	border-radius: 44px;
	padding: 0 26px 0 0;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	font-family: inherit;
	transition: all 250ms;
}

.consult-fab:hover {
	box-shadow: 0 8px 26px rgba(0,0,0,0.35);
	transform: translateY(-2px);
}

/* Розмір зеленого кола задаємо з підвищеною специфічністю (.consult-fab .consult-fab-icon):
   власні таблиці стилів підключаються ПІЗНІШЕ за тему, тож будь-яке правило теми з такою ж
   вагою могло б перебити height — і коло сплющувалось би до висоти іконки (овал/смужка).
   min-width/min-height + aspect-ratio страхують від цього остаточно. */
.consult-fab .consult-fab-icon {
	width: 70px;
	height: 70px;
	min-width: 70px;
	min-height: 70px;
	flex: 0 0 70px;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #339425;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 250ms;
}

/* 44px іконки у колі 58px не вміщалися: «хвостик» бульбашки вилазив за межу кола
   і візуально прорізав його край. 34px лишають рівні поля з усіх боків. */
.consult-fab .consult-fab-icon svg {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}

.consult-fab-icon svg path {
	fill: #fff;
}

.consult-fab-label {
	font-size: 16px;
	font-weight: 600;
	color: #232323;
	line-height: 1.2;
	text-align: left;
	max-width: 150px;
}

/* ============================================================
   Consultation modal
   ============================================================ */
.consult-modal-overlay {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100vh !important;
	background-color: rgba(0,0,0,0.6);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.consult-modal-overlay.active {
	display: flex;
}

.consult-modal {
	position: relative;
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	overflow-y: auto;
	background-color: #fff;
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.consult-modal-media {
	flex: 0 0 34%;
	min-height: 260px;
	background-color: #eee;
}

.consult-modal-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.consult-modal-body {
	flex: 1;
	min-width: 280px;
	padding: 40px;
	box-sizing: border-box;
}

.consult-modal-body h2 {
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 20px 0;
	line-height: 1.15;
	color: #0f2a24;
}

.consult-modal-body h2 span {
	color: #0086ba;
}

/* Хрестик закриття: був майже непомітний — сірий символ без підкладки
   на світлому тлі модалки. Тепер це кругла кнопка з рамкою і тінню,
   зона натискання 38px (щоб зручно було й пальцем). */
.consult-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background-color: #fff;
	border: solid 1px #e0e0e0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	font-size: 26px;
	line-height: 1;
	color: #444;
	cursor: pointer;
	transition: background-color 200ms, color 200ms, transform 200ms;
}

.consult-modal-close:hover {
	background-color: #da1c3b;
	border-color: #da1c3b;
	color: #fff;
	transform: rotate(90deg);
}

.consult-modal-required-note {
	font-size: 13px;
	color: #777;
	margin: 0 0 20px 0;
}

.req {
	color: #da1c3b;
}

.consult-form-row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.consult-form-field {
	flex: 1 1 200px;
}

.consult-form-field-full {
	margin-bottom: 18px;
}

.consult-form-field label {
	display: block;
	font-size: 13px;
	color: #444;
	margin-bottom: 6px;
}

.consult-form-field input,
.consult-form-field textarea {
	width: 100%;
	border: none;
	border-bottom: solid 1px #ccc;
	padding: 6px 2px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
	background: transparent;
	resize: vertical;
}

.consult-form-field input:focus,
.consult-form-field textarea:focus {
	outline: none;
	border-bottom-color: #339425;
}

.consult-submit {
	display: block;
	width: 100%;
	border: none;
	border-radius: 30px;
	padding: 14px 20px;
	background-color: #339425;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 200ms;
}

.consult-submit:hover {
	background-color: #297a1e;
}

/* Результат відправки має бути помітним: раніше це був дрібний рядок
   13px під кнопкою, і люди не розуміли, відправилось чи ні. Тепер —
   повноцінна плашка з рамкою, іконкою і великим текстом. */
.consult-form-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	text-align: left;
	color: #1f6b16;
	background-color: #eaf6e7;
	border: solid 1px #a6d79b;
	border-radius: 10px;
}

.consult-form-note::before {
	content: "✓";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #339425;
	color: #fff;
	font-size: 14px;
	line-height: 1;
}

.consult-form-note.error {
	color: #a01228;
	background-color: #fdecef;
	border-color: #f0b3bf;
}

.consult-form-note.error::before {
	content: "!";
	background-color: #da1c3b;
	font-weight: 700;
}

.consult-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

@media only screen and (max-width: 1200px) {
	.mobile-nav-container .menu-item {
		text-align: center;
	}
	.distribution-products {
		grid-template-columns: repeat(2, 1fr);
	}
	.consult-fab-label {
		display: none;
	}
	.consult-fab {
		background: none;
		padding: 0;
		box-shadow: none;
	}
	.consult-fab:hover {
		box-shadow: none;
	}
	.consult-fab-icon {
		box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	}
	.consult-fab:hover .consult-fab-icon {
		box-shadow: 0 8px 26px rgba(0,0,0,0.4);
	}
	/* На вузьких екранах картинка йде смугою зверху. Без явної висоти
	   вона розкривалась на власні пропорції (≈1000px) — модалка
	   відкривалась «пшеницею на весь екран», а поля треба було шукати
	   прокруткою. */
	.consult-modal-media {
		flex: 0 0 100%;
		height: 150px;
		min-height: 0;
	}
	.consult-modal-body {
		padding: 26px;
	}
}

@media only screen and (max-width: 640px) {
	.distribution-products {
		grid-template-columns: 1fr;
	}
	.consult-fab-container {
		right: 14px;
		bottom: 14px;
	}
}

/* ============================================================
   Страници на продуктите (/дистрибуция/<slug>/)
   ============================================================ */
.distribution-detail-image {
	text-align: center;
}

.distribution-detail-image img {
	max-width: 100%;
	max-height: 420px;
}

.distribution-detail-tags {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 24px;
	margin: 20px 0;
}

.distribution-detail-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #232323;
}

.distribution-detail-tag::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background-color: #339425;
}

.distribution-detail-hero-application {
	padding-left: 16px;
}

.distribution-detail-hero-application h2 {
	font-size: 26px;
	font-weight: 700;
	margin: 12px 0 6px 0;
}

.distribution-application-item h3 {
	color: #0086ba;
	font-size: 18px;
	font-weight: 700;
	margin: 16px 0 4px 0;
}

.distribution-application-item p {
	font-size: 16px;
	color: #444;
	margin: 0;
}

.distribution-combo p {
	font-size: 18px;
	line-height: 1.7;
	color: #333;
	margin-bottom: 16px;
}

.distribution-composition-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.distribution-composition-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}

.distribution-detail-hero > div {
	min-width: 0;
}

.distribution-composition-item img {
	width: 64px;
	height: 64px;
}

.distribution-section-heading {
	font-weight: 700 !important;
	font-size: 34px;
}

.distribution-composition-item p {
	margin-top: 8px;
	font-size: 15px;
	color: #333;
	font-weight: 600;
}

/* Позиції складу, для яких немає svg-іконки («Суха речовина», N-NO₃,
   N-NH₄ у продуктів з каталогу). Малюємо той самий шестикутник, що в
   icons/*.svg (вершина зверху, обведення #2FB95D), через clip-path:
   ::before — зелена «рамка», ::after — біла заливка на 3px усередину.
   Обидва з від'ємним z-index, щоб підпис лишався зверху. */
.distribution-composition-badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0 8px;
	box-sizing: border-box;
	font-size: 10px;
	line-height: 1.1;
	font-weight: 700;
	color: #232323;
	text-align: center;
}

.distribution-composition-badge::before,
.distribution-composition-badge::after {
	content: "";
	position: absolute;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.distribution-composition-badge::before {
	inset: 0;
	background-color: #2FB95D;
	z-index: -2;
}

.distribution-composition-badge::after {
	inset: 3px;
	background-color: #fff;
	z-index: -1;
}

.distribution-composition-note {
	margin: -20px 0 40px;
	font-size: 13px;
	color: #7a7f7a;
}

@media only screen and (max-width: 1200px) {
	.distribution-composition-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 640px) {
	.distribution-composition-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.distribution-detail-hero {
		flex-direction: column;
		align-items: stretch !important;
	}
}

/* Ссылку "Изработка на сайтове - Dankanic Creative" убрали из футера —
   остался один <div> с копирайтом внутри .flex-s-b (space-between), и с
   единственным элементом он прижимается влево вместо центра. */
.allrights {
	justify-content: center;
}

/* ===== Переваги (іконки на фоні пшениці) — використовується і на головній
   (index.html), і на сторінках /насіння/<slug>/, тому лежить у спільному
   sitewide-файлі, а не в home-about.css. ===== */

.feature-grid-section {
	overflow: hidden;
	border-radius: 10px;
	padding: 60px 50px;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.feature-grid-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.feature-grid-overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.82);
	z-index: 2;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	z-index: 3;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.feature-item:nth-child(2) .feature-icon {
	background-color: #0086ba;
}

.feature-icon {
	width: 66px;
	height: 66px;
	flex: 0 0 66px;
	border-radius: 50%;
	background-color: #339425;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}

.feature-item h4 {
	font-size: 18px;
	font-weight: 700;
	color: #232323;
	margin: 0;
	line-height: 1.4;
}

@media only screen and (max-width: 1200px) {
	.feature-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.feature-grid-section {
		padding: 40px 30px;
	}
}

/* ============================================================
   Мобільна шапка (≤1200px): оформлення бургер-меню
   ------------------------------------------------------------
   Було: напівпрозора панель (rgba(0,0,0,0.4)) — крізь меню просвічував
   контент сторінки, пункти тулилися до правого краю без роздільників,
   а соцмережі виглядали як три різнокольорові «пігулки».
   Стало: суцільна темна панель на всю висоту екрана, пункти зліва з
   тап-зоною 56px, роздільниками і фірмовою кольоровою рискою, соцмережі —
   однакові круглі іконки, знизу CTA з консультацією і телефоном.
   ============================================================ */
@media only screen and (max-width: 1200px) {

	/* --- сама шапка --- */
	.header-mobile.black-opacity {
		background-color: rgba(0,0,0,0.55);
		backdrop-filter: blur(8px);
	}
	/* .new-black тема вішає під час скролу — своє правило вище має більшу
	   специфічність, тож затемнення при скролі треба повторити явно. */
	.header-mobile.black-opacity.new-black {
		background-color: rgba(0,0,0,0.78);
	}
	/* З відкритим меню верхній рядок має бути тієї ж щільності, що й панель,
	   інакше крізь нього просвічує сторінка і шов видно. */
	html.mobile-menu-open .header-mobile.black-opacity,
	html.mobile-menu-open .header-mobile.black-opacity.new-black {
		background-color: rgba(11, 15, 11, 0.97);
	}
	/* Плаваюча кнопка консультації не має висіти поверх відкритого меню:
	   у меню для цього є власна кнопка внизу. */
	html.mobile-menu-open .consult-fab-container {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.header-mobile .mobile-logo-container {
		flex: 0 0 55%;
	}
	/* На планшетах 60% ширини — це логотип майже на пів екрана; обмежуємо. */
	.header-mobile .mobile-logo-container img {
		max-width: 240px;
	}
	/* Бургер: зона натискання лишається 44×44 (замість голої іконки 30×24),
	   але вже без видимої підкладки — вона зайво «обводила» іконку.
	   justify-content:flex-end, щоб праве поле іконки збігалося з лівим
	   полем логотипа (при центруванні в 44px-боксі іконка стояла на 10px
	   глибше й ряд виглядав нерівним). */
	.header-mobile .mob-navbtn-cont {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding-right: 0;
		margin: 8px 0;
		align-items: center;
		justify-content: flex-end;
		background-color: transparent;
		border-radius: 0;
		cursor: pointer;
	}
	.header-mobile .mob-navbtn-cont:active img,
	.header-mobile .mob-navbtn-cont:active::after {
		opacity: 0.6;
	}
	.header-mobile .mob-navbtn-cont img {
		width: 24px;
		height: 19px;
	}
	/* Відкрите меню — бургер перетворюється на «хрестик». */
	html.mobile-menu-open .header-mobile .mob-navbtn-cont img {
		display: none;
	}
	html.mobile-menu-open .header-mobile .mob-navbtn-cont::after {
		content: "\f00d";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 22px;
		line-height: 1;
		color: #fff;
	}

	/* --- панель меню --- */
	.mobile-nav-container {
		padding: 0;
		/* Пункти займають рядок цілком, тож на justify-content реагує лише
		   ряд соцмереж — так він тримається купкою по центру, а не
		   розтягується краями екрана на планшетах. */
		justify-content: center;
		background-color: rgba(11, 15, 11, 0.97);
		backdrop-filter: blur(14px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* height:auto лишається за темою (.m-active) — ми лише доводимо панель до
	   низу екрана, щоб крізь меню не просвічувала сторінка. --mnav-top ставить
	   distribution-consult.js за реальною висотою рядка з лого. */
	.mobile-nav-container.m-active {
		margin-top: 0;
		min-height: calc(100vh - var(--mnav-top, 68px));
		max-height: calc(100vh - var(--mnav-top, 68px));
		border-top: 1px solid rgba(255,255,255,0.10);
	}

	/* --- пункти --- */
	.mobile-nav-container .menu-item {
		flex: 0 0 100%;
		display: flex;
		align-items: center;
		min-height: 56px;
		padding: 8px 18px;
		text-align: left;
		font-size: 17px;
		letter-spacing: 0.4px;
		border-radius: 0;
		border-bottom: 1px solid rgba(255,255,255,0.08);
		border-left: 3px solid transparent;
		transition: background-color 200ms, border-left-color 200ms;
	}
	/* Фірмові кольори пунктів (ті самі, що в hover-класах теми) — тепер вони
	   видно завжди у вигляді риски зліва, а не тільки під час наведення. */
	.mobile-nav-container .hover_red { border-left-color: #da1c3b; }
	.mobile-nav-container .hover_blue { border-left-color: #35499c; }
	.mobile-nav-container .hover_teal { border-left-color: #0f7a52; }
	.mobile-nav-container .hover_blue2 { border-left-color: #0086ba; }
	.mobile-nav-container .hover_green { border-left-color: #339425; }
	.mobile-nav-container .hover_orange { border-left-color: #dda600; }

	/* На тач-екранах :hover «залипає» після тапу, тому заливка приглушена. */
	.mobile-nav-container .hover_red:hover { background-color: rgba(218,28,59,0.22); }
	.mobile-nav-container .hover_blue:hover { background-color: rgba(53,73,156,0.28); }
	.mobile-nav-container .hover_teal:hover { background-color: rgba(15,122,82,0.26); }
	.mobile-nav-container .hover_blue2:hover { background-color: rgba(0,134,186,0.24); }
	.mobile-nav-container .hover_green:hover { background-color: rgba(51,148,37,0.26); }
	.mobile-nav-container .hover_orange:hover { background-color: rgba(221,166,0,0.24); }

	/* --- CTA внизу меню (додає distribution-consult.js) --- */
	.mobile-nav-container .mnav-cta {
		/* Рядок цілком: інакше на планшеті поруч із CTA залишається місце і
		   іконки соцмереж підтягуються на цей самий рядок. */
		flex: 0 0 100%;
		padding: 22px 18px 4px 18px;
		box-sizing: border-box;
	}
	.mobile-nav-container .mnav-cta-btn {
		display: block;
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
		border: none;
		border-radius: 28px;
		padding: 15px 20px;
		background-color: #339425;
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.3px;
		cursor: pointer;
	}
	.mobile-nav-container .mnav-cta-btn:active {
		background-color: #297a1e;
	}
	.mobile-nav-container .mnav-cta-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 14px;
		color: #fff;
		font-size: 17px;
		font-weight: 600;
	}
	.mobile-nav-container .mnav-cta-phone:hover {
		color: #fff;
		text-decoration: none;
	}
	.mobile-nav-container .mnav-cta-phone i {
		color: #339425;
	}

	/* --- соцмережі: у меню ті самі круглі іконки, що й у десктопній шапці
	   (спільний блок нижче), тут лише більший розмір під палець --- */
	/* Селектор із .header-mobile — щоб перебити спільний блок нижче по файлу
	   (у нього така сама вага, і без цього він виграв би за порядком). */
	.header-mobile .mobile-nav-container .rounded-link {
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
		margin: 22px 14px 26px 14px;
	}
	.header-mobile .mobile-nav-container .rounded-link::before {
		font-size: 20px;
	}
}

/* ============================================================
   Соцмережі в шапці — однакові круглі іконки і на десктопі, і в меню
   ------------------------------------------------------------
   Було: три різнокольорові текстові «пігулки» (Facebook / YouTube / TikTok)
   з різними кольорами тексту й рамки — десктопна шапка й мобільне меню
   виглядали як два різні сайти. Стало: однакові круглі іконки (гліфи
   Font Awesome Brands через ::before). Розмітку сторінок не чіпаємо —
   текст усередині ховається через font-size:0.
   ============================================================ */
.menu-container .rounded-link,
.mobile-nav-container .rounded-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	color: #fff;
	border: solid 1px rgba(255,255,255,0.35);
	transition: background-color 200ms, border-color 200ms;
}
.menu-container .rounded-link {
	margin-left: 8px;
}
.menu-container .rounded-link::before,
.mobile-nav-container .rounded-link::before {
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
}
.menu-container .facebook::before,
.mobile-nav-container .facebook::before { content: "\f39e"; }
.menu-container .instagram::before,
.mobile-nav-container .instagram::before { content: "\f16d"; }
.menu-container .tiktok::before,
.mobile-nav-container .tiktok::before { content: "\e07b"; }

/* Колір бренду лишаємо тільки для наведення — щоб ряд іконок був спокійним. */
.menu-container .facebook:hover,
.mobile-nav-container .facebook:hover { color: #fff; border-color: #fff; background-color: #3b5998; }
.menu-container .instagram:hover,
.mobile-nav-container .instagram:hover { color: #fff; border-color: #fff; background-color: #c13584; }
.menu-container .tiktok:hover,
.mobile-nav-container .tiktok:hover { color: #fff; border-color: #fff; background-color: #000; }

/* Ті самі іконки у футері (там світлий фон, тож колір інверсний), щоб
   Facebook/YouTube/TikTok не лишилися єдиним місцем із текстовими лінками. */
.footer-links .rounded-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0 4px;
	vertical-align: middle;
	border-radius: 50%;
	font-size: 0;
	color: #646464;
	border: solid 1px rgba(0,0,0,0.22);
	transition: background-color 200ms, border-color 200ms, color 200ms;
}
.footer-links .rounded-link::before {
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
}
.footer-links .facebook::before { content: "\f39e"; }
.footer-links .instagram::before { content: "\f16d"; }
.footer-links .tiktok::before { content: "\e07b"; }
.footer-links .facebook:hover { color: #fff; border-color: #3b5998; background-color: #3b5998; text-decoration: none; }
.footer-links .instagram:hover { color: #fff; border-color: #c13584; background-color: #c13584; text-decoration: none; }
.footer-links .tiktok:hover { color: #fff; border-color: #000; background-color: #000; text-decoration: none; }

.product-buttons .seed-tab {
	flex: 0 0 calc((100% - 40px) / 3);
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	padding: 20px 24px;
	margin-bottom: 20px;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.92);
	color: #1c1c1c;
	opacity: 1;
	transition: background-color 200ms, transform 200ms, box-shadow 200ms;
}
.product-buttons .seed-tab:hover {
	background-color: #fff;
	color: #1c1c1c;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.product-buttons .seed-tab-icon {
	flex: 0 0 58px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-buttons .seed-tab-icon img {
	display: block;
	width: 58px;
	height: 58px;
}
.product-buttons .seed-tab-label {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

/* Назва розділу праворуч від «Продукти /» — показується при наведенні
   на вкладку (клас .show вішає distribution-consult.js; сам .show —
   глобальний клас теми: `display: initial`). */
.pm-tab-name {
	display: none;
}
.pm-tab-name.show {
	display: inline;
}

@media only screen and (max-width: 1200px) {
	.product-buttons .seed-tab {
		flex: 0 0 100%;
		padding: 16px 20px;
		margin-bottom: 12px;
		gap: 16px;
	}
	.product-buttons .seed-tab-icon,
	.product-buttons .seed-tab-icon img {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
	}
	.product-buttons .seed-tab-label {
		font-size: 17px;
	}
}

/* ============================================================
   Футер: розділи окремо, соцмережі окремим рядком
   ------------------------------------------------------------
   Було: усі посилання (розділи + 3 соцмережі) — просто інлайнові <a>
   в одному блоці з text-align:center. На вузьких екранах іконки
   «прилипали» до кінця рядка розділів, а третя взагалі переносилася
   сама по собі — рядок виглядав рваним. Обгортку .footer-social
   навколо іконок додає distribution-consult.js (розмітку 57 сторінок
   заради цього не чіпаємо).
   ============================================================ */
.footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 0;
}
.footer-links .menu-item {
	padding: 4px 15px;
}
.footer-links .footer-social {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}
.footer-links .footer-social .rounded-link {
	margin: 0;
}

/* ==========================================================================
   Прелоадер: логотип усередині кола лоадера
   Тема розтягує .logo-shape на всі 154px .preloader-box, а коло лоадера
   (SVG r=120.903 у viewBox 254) має діаметр лише ~146px — краплі логотипа
   вилазили за коло. Вписуємо картинку в коло та центруємо.
   ========================================================================== */
.preloader-box .logo-shape {
	width: 104px;
	height: 104px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: contain;
}

/* ==========================================================================
   Відео-фон замість статичних mainimage1/2/3.jpg
   --------------------------------------------------------------------------
   Головний екран (.home-image) і екран завантаження (.preloader-container)
   показують зациклений ролик wp-content/uploads/video/tractor-spraying-hero.mp4
   (muted+loop+playsinline = поводиться як гіфка; poster-кадр малюється
   миттєво, поки відео вантажиться). Розмір/позиція героя вже задані темою
   через .img-back-home, тут лише знімаємо її ken-burns-зум — разом із рухом
   у самому ролику виходило подвійне ворушіння.
   ========================================================================== */
video.img-back-home {
	animation: none;
}

/* Poster у <video> прибрано — користувач хоче бачити ТІЛЬКИ відео, без
   кадру-заставки перед ним. Щоб замість фото не блимало білим, поки
   ролик вантажиться, під відео лежить темна підкладка — далі просто
   з'являється сам ролик. */
.home-image {
	background-color: #0b0f0b;
}

.preloader-container .preloader-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* Легке затемнення, щоб лого і коло лоадера читались поверх кадру. */
.preloader-container .preloader-shade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 1;
}
.preloader-container .preloader-box {
	z-index: 2;
}

.catalog-viewer {
	max-width: 900px;
	margin: 20px auto 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.catalog-page {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background-color: #f2f4f2; /* поки сторінка вантажиться */
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.catalog-download {
	text-align: center;
	margin: 40px 0 60px;
}

.catalog-download a {
	display: inline-block;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 600;
	color: #339425;
	border: solid 1px #339425;
	border-radius: 24px;
	text-decoration: none;
	transition: background-color 200ms, color 200ms;
}

.catalog-download a:hover {
	color: #fff;
	background-color: #339425;
	text-decoration: none;
}

@media only screen and (max-width: 1200px) {
	.catalog-viewer {
		gap: 12px;
	}
}

.contacts-map-wrap {
	width: 100%;
	margin: 30px 0 50px;
}

.contacts-map-wrap .wpmapblockrender {
	border-radius: 10px;
	overflow: hidden;
}

.contacts-phones {
	margin-bottom: 50px;
}

.consult-inline {
	display: flex;
	align-items: stretch;
	gap: 40px;
	margin-bottom: 60px;
}

.consult-inline-media {
	flex: 0 0 34%;
	border-radius: 12px;
	overflow: hidden;
	background-color: #eee;
}

.consult-inline-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.consult-inline-body {
	flex: 1 1 auto;
	min-width: 280px;
	align-self: center;
}

.consult-inline-title {
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	color: #232323;
	margin-bottom: 14px;
}

.consult-inline-title span {
	color: #0086ba;
}

@media only screen and (max-width: 1200px) {
	.contacts-map-wrap {
		margin: 20px 0 36px;
	}

	.consult-inline {
		flex-direction: column;
		gap: 22px;
	}

	.consult-inline-media {
		flex: 0 0 auto;
		height: 180px;
	}

	.consult-inline-title {
		font-size: 26px;
	}
}

/* ⚠️ Екран завантаження має бути над усім. У темі в нього z-index:200, а
   Leaflet (карта на «Контактах») роздає своїм шарам 400 (панелі), 800
   (контроли), 1000 (кути) і 99999 (псевдо-повноекранний режим) — причому
   .leaflet-container не створює власного контексту накладання, тож ці
   шари живуть у кореневому й лізуть поверх прелоадера: сторінка ще
   вантажиться, а карта вже висить посеред екрана.
   Піднімаємо прелоадер вище за все це. Робимо саме так, а не контекстом
   накладання на обгортці карти: обгортка замкнула б у собі й
   повноекранний режим, і карта «на весь екран» опинилась би під шапкою.
   Модалка консультації (1000) під час завантаження відкритись не може,
   тож із нею конфлікту немає. */
.preloader-container {
	z-index: 100000;
}

/* ==========================================================================
   Три картки розділів: Насіння / ЗЗР / Мікродобрива
   --------------------------------------------------------------------------
   Раніше жили в повноекранній панелі `.products-menu`, яку відкривав пункт
   меню «ДИСТРИБУЦІЯ». 2026-09-07 панель прибрана (як до того — панель
   «ПРОДУКТИ»): пункт меню веде на сторінку /distribution/, ті самі картки
   продубльовані на головній (.dist-home-section). Фото на всю картку,
   затемнення і текст поверх — тож на світлому тлі виглядають так само, як
   виглядали в темній панелі.
   ========================================================================== */
.dist-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.dist-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	min-height: 320px;
	text-decoration: none;
	border: solid 1px rgba(255,255,255,0.12);
	transition: transform 250ms, border-color 250ms;
}

.dist-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: #339425;
}

.dist-card-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms;
}

.dist-card:hover .dist-card-img {
	transform: scale(1.05);
}

.dist-card-shade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.6) 100%);
}

.dist-card-text {
	position: relative;
	display: block;
	padding: 26px 22px;
	text-align: center;
}

.dist-card-title {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 10px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.dist-card-desc {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255,255,255,0.92);
	text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

@media only screen and (max-width: 1200px) {
	.dist-cards {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 24px;
	}

	.dist-card {
		min-height: 170px;
	}

	.dist-card-title {
		font-size: 22px;
	}
}

/* ==========================================================================
   Поля форми «Отримайте консультацію»
   --------------------------------------------------------------------------
   Ім'я — плаваючий підпис «хвилею» (Uiverse by AbanoubMagdy1), телефон —
   поле з вибором країни (Uiverse by Galahhad). Обидва перефарбовані під
   сайт: акцент #339425 замість синього, рамки/тіні м'якші.
   ========================================================================== */

/* ---------- Ім'я: підпис піднімається «хвилею» ---------- */
.consult-form-field.wave-group {
	position: relative;
	padding-top: 14px;
}

.wave-group .input {
	font-size: 15px;
	padding: 10px 4px 8px;
	display: block;
	width: 100%;
	border: none;
	border-bottom: solid 1px #ccc;
	background: transparent;
	font-family: inherit;
	box-sizing: border-box;
}

.wave-group .input:focus {
	outline: none;
}

.consult-form-field.wave-group .label {
	display: flex;
	position: absolute;
	pointer-events: none;
	left: 4px;
	top: 24px;
	margin: 0;
	color: #999;
	font-size: 16px;
	font-weight: normal;
}

.wave-group .label-char {
	transition: 0.2s ease all;
	transition-delay: calc(var(--index) * 0.05s);
}

/* пробіл між «Ім'я» і зірочкою — щоб не злипались */
.wave-group .label-char.req {
	margin-left: 5px;
	color: #da1c3b;
}

.wave-group .input:focus ~ .label .label-char,
.wave-group .input:valid ~ .label .label-char {
	transform: translateY(-22px);
	font-size: 13px;
	color: #339425;
}

.wave-group .bar {
	position: relative;
	display: block;
	width: 100%;
}

.wave-group .bar::before,
.wave-group .bar::after {
	content: "";
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #339425;
	transition: 0.2s ease all;
}

.wave-group .bar::before { left: 50%; }
.wave-group .bar::after { right: 50%; }

.wave-group .input:focus ~ .bar::before,
.wave-group .input:focus ~ .bar::after {
	width: 50%;
}

/* ---------- Телефон: прапор + код + номер ----------
   Поле навмисно в тому ж стилі, що й «Ім'я»: підкреслення знизу, той
   самий відступ зверху і та сама висота рядка — так обидва поля стоять
   рівно на одній лінії (з рамкою-«капсулою» телефон був нижчий).
   Підпис завжди піднятий, бо в полі й так завжди видно код країни. */
.consult-phone-field {
	position: relative;
	padding-top: 14px;
}

.consult-phone-field .consult-phone-label {
	position: absolute;
	top: 0;
	left: 4px;
	margin: 0;
	font-size: 13px;
	color: #999;
	transition: color 200ms;
}

.consult-phone-field:focus-within .consult-phone-label {
	color: #339425;
}

.phone-ui {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 2px 0 0;
	border: none;
	border-bottom: solid 1px #ccc;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: border-color 200ms;
}

.phone-ui:focus-within {
	border-bottom-color: #339425;
	box-shadow: none;
}

/* Кнопка країни: тільки прапор (стрілку прибрано — країна поки одна). */
.phone-ui-country {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%;
	padding: 0 2px;
	border: none;
	border-radius: 0;
	background: none;
	cursor: default;
}

.phone-ui-flag {
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Inline SVG flag renders identically on Windows (no country-flag emoji there). */
.phone-ui-flag-svg,
.phone-ui-list .flag .phone-ui-flag-svg {
	display: block;
	width: 22px;
	height: 15px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

.phone-ui-list .flag .phone-ui-flag-svg {
	width: 20px;
	height: 14px;
}

.phone-ui-arrow {
	display: none;
}

.phone-ui-code {
	font-size: 15px;
	color: #444;
	white-space: nowrap;
}

.consult-form-field .phone-ui-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: none;
	padding: 0;
	font-size: 15px;
	font-family: inherit;
	background: transparent;
	letter-spacing: 0.4px;
}

.consult-form-field .phone-ui-input:focus {
	outline: none;
	border: none;
}

.phone-ui-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 5;
	width: 100%;
	min-width: 220px;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.phone-ui-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	color: #232323;
	cursor: pointer;
}

.phone-ui-list li:hover,
.phone-ui-list li[aria-selected="true"] {
	background-color: #eef5ec;
}

.phone-ui-list li .dial {
	margin-left: auto;
	color: #6b706b;
}

.phone-ui-error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #da1c3b;
}

@media only screen and (max-width: 640px) {
	.phone-ui-list {
		min-width: 100%;
	}
}

/* ============================================================
   Список продуктів ZINOVII на СВІТЛОМУ тлі
   (секція «Продукти ZINOVII» на головній + сторінка /produkty/)

   Розмітка та сітка ті самі, що були у випадній панелі «ПРОДУКТИ»
   (.distribution-products/.distribution-card), але сама панель була
   темною — там картки білим по чорному. 2026-09-05 панель прибрана,
   список переїхав на світлі сторінки, тож клас-обгортка .products-light
   перефарбовує ті самі картки під контент сайту. Специфічність
   навмисно на клас вища за базові правила (в т.ч. за :hover).
   ============================================================ */
.products-light .distribution-card {
	color: #232323;
	background-color: #fff;
	border-color: #e2e6e2;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.products-light .distribution-card:hover {
	color: #232323;
	border-color: #339425;
	background-color: #f4faf2;
	box-shadow: 0 6px 18px rgba(51,148,37,0.18);
}

.products-light .distribution-card h3 {
	color: #232323;
}

.products-light .distribution-card p {
	color: #5a5f5a;
}

.products-light .distribution-card-more {
	color: #339425;
}

/* Секція на головній: заголовок + сітка (замінила блок «Продаж насіння …») */
.products-home-section {
	margin-bottom: 10px;
}

/* Та сама ідея для трьох розділів (Насіння / ЗЗР / Мікродобрива): на
   головній продубльований вміст панелі «ДИСТРИБУЦІЯ». Картки ті самі
   (.dist-cards/.dist-card) — вони фото-плитки з власним затемненням, тож
   на світлому тлі сторінки виглядають так само, як у темній панелі. */
.dist-home-section {
	margin-bottom: 10px;
}

.dist-home-section .dist-cards {
	margin-top: 34px;
}

/* Окрема сторінка /distribution/ (три розділи) — те саме поле знизу,
   що й у /produkty/, щоб картки не прилипали до футера. */
.distribution-page {
	padding-bottom: 40px;
}

.distribution-page .dist-cards {
	margin-top: 34px;
}

.distribution-page-note {
	margin-top: 34px;
	font-size: 16px;
	line-height: 1.5;
	color: #5a5f5a;
}

/* Окрема сторінка /produkty/ */
.products-page {
	padding-bottom: 40px;
}

/* Вступний текст замовника над картками (головна, .products-home-section).
   Типографіка — як в описі картки товару. */
.products-intro {
	margin-top: 26px;
}

.products-intro p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 14px 0;
	color: #5a5f5a;
}

/* Текст під сіткою товарів і вступ над нею — та сама типографіка, що в
   описі картки (.distribution-card p): 16px/1.5, колір #5a5f5a. */
.products-page-note {
	margin-top: 34px;
	font-size: 16px;
	line-height: 1.5;
	color: #5a5f5a;
}