@charset "UTF-8";
/* Стилі плагіна syrocarpaty-svitla-tema. Винесено з блоку <style id="syro-st-css"> 11.10.2026 без змін у правилах. */
	/* ПАЛІТРА (редакція 2, 14.08 за зауваженням власника «надто біла, зроби
	   кремову, як сир»).

	   Перша редакція була формально світлою, але холодною: тло майже біле, а
	   картки — чистий #fff. На сторінці з фотографіями сиру це читається як
	   лікарняний бланк, а не як молочна крамниця.

	   Тепер уся гама зсунута в тепле й побудована на трьох рівнях, а не на
	   двох: тло сторінки трохи темніше за картку, картка — вершкова, а не
	   біла, підкладки (футер, смуги) — ще на крок глибші. Три рівні дають
	   глибину без жодної рамки: око бачить, де закінчується блок.

	   Чистого білого в палітрі немає ЖОДНОГО — це свідомо. Найсвітліше тут
	   #fffdf7, тобто вершки, а не папір.

	   Текст теж теплий: #2c2418 замість синюватого #252534 теми. Контраст на
	   картці — близько 13:1, тобто із запасом (перевірено заміром). */
	html[data-syro-theme="light"] {
		--st-bg: #f5ecd9;          /* тло сторінки — топлене молоко */
		--st-surface: #fffdf7;     /* картки — вершки, НЕ білий */
		--st-surface-2: #ecdfc3;   /* футер і смуги — глибша скоринка */
		--st-fg: #2c2418;          /* тепле майже-чорне */
		/* Другорядний текст. Був #7b6a4e — на топленому молоці це 4,46, на
		   0,04 нижче порогу WCAG 4,5, і крихти на КОЖНІЙ сторінці провалювали
		   обхід 26.08. #6a5a41 дає 5,67 на тлі й 5,05 на футері (#ecdfc3). */
		--st-muted: #6a5a41;
		--st-line: rgba(120,92,40,.20);
		--st-accent: #f1a416;
		/* Акцент для ТЕКСТУ на світлому. #96600a на тлі давав рівно 4,50 — на
		   межі, а на футері 4,00. #875608 — 5,31 / 4,73 (обхід 26.08). */
		--st-accent-text: #875608;
		--st-accent-hover: #df950d;
		--st-tin: 0 2px 10px rgba(120,92,40,.10);
		--st-tin-vyshche: 0 6px 20px rgba(120,92,40,.14);
	}

	/* --- основа --- */
	html[data-syro-theme="light"] body {
		background-color: var(--st-bg);
		color: var(--st-fg);
	}
	/* Шапка світліша за сторінку, а не темніша — так вона «лежить зверху».
	   Замість лінії — мʼяка тінь: лінія на кремовому виглядає швом. */
	/* КОШИК У СВІТЛІЙ ТЕМІ (1.0.3, замір 01.09).
	   Обхід контрасту 26.08 рахував лише ТЕКСТ, тому графіку пропустив.
	   Замір 01.09 по елементах шапки: усі нейтральні іконки (трубка, лупа,
	   перемикач, бургер) дають 15,04:1, кнопка «Зворотний звʼязок» — 6,14:1
	   після правки C2, а кошик лишився фірмовим #f1a416 і на топленому
	   молоці дає 2,05:1 при потрібних для графіки 3:1. Кошик — вхід в
	   оформлення замовлення, тобто найважливіша кнопка шапки.

	   #c98209 — найпомаранчевіший відтінок, що проходить поріг (3,09:1).
	   Темніший #875608 (акцентний текст) дав би 6,14:1, але кошик став би
	   коричневим і шапка лишилась би без теплого акценту.

	   ЧОМУ НЕ МАСКОЮ (помилка 1.0.2, помічена власником одразу).
	   `icon-basket.svg` ДВОКОЛІРНА: тіло сумки залите помаранчевим, а
	   ручка — окремий ТЕМНИЙ штрих поверх нього. Маска бачить лише альфу,
	   тобто зливає тіло й ручку в одну пляму — і сумка перестає бути схожою
	   на сумку. Тому кладемо ту саму картинку заново, перефарбувавши рівно
	   одну заливку: тіло #c98209, ручка лишається #252534.

	   Файл теми не чіпаємо — картинка живе тут як data-URI, тому відкат
	   дорівнює вимкненню плагіна. У ТЕМНІЙ темі не діє нічого з цього. */
	html[data-syro-theme="light"] .header__busket {
		border-color: #c98209;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.86012 1.33333C2.84102 1.33333 1.98489 2.0996 1.87235 3.11247L0.999822 10.9652C0.780427 12.9398 2.32606 14.6667 4.31277 14.6667H11.6874C13.6741 14.6667 15.2197 12.9398 15.0003 10.9652L14.1278 3.11247C14.0152 2.0996 13.1591 1.33333 12.14 1.33333H3.86012Z' fill='%23c98209'/%3E%3Cpath d='M5.33337 4.66667V5.33333C5.33337 6.80609 6.52728 8 8.00004 8V8C9.4728 8 10.6667 6.80609 10.6667 5.33333V4.66667' stroke='%23252534' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	html[data-syro-theme="light"] .header,
	html[data-syro-theme="light"] .header_scroll {
		background-color: var(--st-surface);
		box-shadow: 0 1px 12px rgba(120,92,40,.10);
	}
	/* Форми, які тема малює на власному тлі (зворотний звʼязок, відгуки). */
	html[data-syro-theme="light"] .form,
	html[data-syro-theme="light"] .popup__content,
	html[data-syro-theme="light"] .syro-cnt__form {
		background-color: var(--st-surface) !important;
		box-shadow: var(--st-tin);
	}
	html[data-syro-theme="light"] .header__menu a,
	html[data-syro-theme="light"] .header__phone a,
	html[data-syro-theme="light"] .footer__menu a,
	html[data-syro-theme="light"] .footer,
	html[data-syro-theme="light"] .footer a { color: var(--st-fg); }
	html[data-syro-theme="light"] .header__menu a:hover,
	html[data-syro-theme="light"] .footer__menu a:hover { color: var(--st-accent-text); }
	html[data-syro-theme="light"] .footer { background-color: var(--st-surface-2); }

	/* Заголовки: акцент лишається, але темніший — інакше 40px помаранчевого
	   по молочному просто розмивається.

	   ВИНЯТОК — перший екран (.first). Там заголовок лежить не на сторінці, а
	   НА ТЕМНОМУ ФОТО, і темніший відтінок робить рівно навпаки: контраст
	   падає. Це та сама пастка, що з білою кнопкою — інверсія теми не має
	   чіпати те, що стоїть на власному тлі. Перевірено знімком. */
	html[data-syro-theme="light"] .title,
	html[data-syro-theme="light"] .title_l,
	html[data-syro-theme="light"] .title_m { color: var(--st-accent-text); }
	/* ВИНЯТОК ПИШЕТЬСЯ ЧЕРЕЗ `.first.bg`, А НЕ `.first` — і це не педантизм.
	   Перша редакція використала просто `.first`, і виняток накрив половину
	   каталогу: WooCommerce вішає клас `first` на ПЕРШИЙ ТОВАР У РЯДУ
	   (`post-450 status-publish first instock …`), а тема тим самим словом
	   називає банер. Наслідок був видимий: кнопка «Детальніше» лишалась білою
	   на вершковому — контраст 1,02, тобто напис зникав. Знайдено обходом
	   контрасту по всіх сторінках, не на око. */
	html[data-syro-theme="light"] .first.bg .title,
	html[data-syro-theme="light"] .first.bg .title_l,
	html[data-syro-theme="light"] .first.bg .title_m,
	html[data-syro-theme="light"] .first__title { color: #f1a416; }
	html[data-syro-theme="light"] .first.bg .btn_white_border {
		color: #fff;
		border-color: #fff;
	}
	html[data-syro-theme="light"] .first.bg .btn_white_border:hover {
		color: #252534;
		background-color: #fff;
	}

	/* --- ціни --- */
	/* Ціна лежить у <strong> без класу всередині .products__item-price, тому
	   колір батька їй не діставався: заміряно #f1a416 на вершковому = 2,05. */
	html[data-syro-theme="light"] .products__item-price,
	html[data-syro-theme="light"] .products__item-price *,
	html[data-syro-theme="light"] .price,
	html[data-syro-theme="light"] .price *,
	html[data-syro-theme="light"] .woocommerce-Price-amount { color: var(--st-accent-text); }

	/* --- блог --- */
	html[data-syro-theme="light"] .posts__item {
		background-color: var(--st-surface);
		border-radius: 16px;
		box-shadow: var(--st-tin);
	}
	html[data-syro-theme="light"] .posts__item-title,
	html[data-syro-theme="light"] .posts__item-title a,
	html[data-syro-theme="light"] .posts__item-text,
	html[data-syro-theme="light"] .article__content,
	html[data-syro-theme="light"] .article__content p,
	html[data-syro-theme="light"] .article__content li { color: var(--st-fg); }

	/* --- акцент, зашитий у ТЕКСТ сторінок --- */
	/* Заголовки на «Доставка та оплата», «Повернення», «Політика» — це не
	   стилі теми, а інлайнові <span style="color:#f1a400"> у самому вмісті,
	   написані в редакторі. Жоден селектор їх не перебиває, тільки !important.
	   Обмежено зоною вмісту, щоб не зачепити нічого поза статтею. */
	html[data-syro-theme="light"] .article__content span[style*="color"],
	html[data-syro-theme="light"] .article__content span[style*="color"] b,
	html[data-syro-theme="light"] .article__content a { color: var(--st-accent-text) !important; }

	/* --- соцмережі на сторінці контактів --- */
	html[data-syro-theme="light"] .syro-cnt__soc a { color: var(--st-accent-text) !important; }

	/* --- виділення в текстових блоках --- */
	/* Тема фарбує <strong> акцентом. У блоці «Про нас» (і на головній, і на
	   /about/) це половина абзаців, і на вершковому вони давали 2,05. */
	html[data-syro-theme="light"] .about__text strong,
	html[data-syro-theme="light"] .about__text b,
	html[data-syro-theme="light"] .about strong,
	html[data-syro-theme="light"] .about li strong { color: var(--st-accent-text); }

	/* --- кнопка «Детальніше» в блозі --- */
	/* Напис лежить у <span> усередині .posts__item-btn, тому колір кнопки до
	   нього не доходив: білий на вершковому, контраст 1,02. */
	html[data-syro-theme="light"] .posts__item-btn,
	html[data-syro-theme="light"] .posts__item-btn span { color: var(--st-accent-text); }

	/* --- підпис блоку допродажу в каталозі --- */
	html[data-syro-theme="light"] .syro-cross__sub { color: var(--st-muted) !important; }

	/* --- СПЛИВНИЙ КОШИК --- */
	/* Він лишався темним, а текст у ньому наші ж правила перефарбували в
	   темний — вийшло темне по темному (заміряно 1,03 на кнопці «Продовжити
	   покупки» і 2,81 на заголовках). Це третій раз за день, коли половинчаста
	   правка гірша за жодну, тому робимо попап світлим ЦІЛКОМ: панель, картки
	   позицій, кнопки, підказка про мінімальну суму. */
	/* .syro-cart-popup-panel тут свідомо НЕМАЄ (0.3.1, знімок власника 26.08):
	   у плагіні це обгортка на весь екран (inset:0), яка лише центрує вікно.
	   З тлом вона перекривала сторінку суцільним «молоком» замість
	   напівпрозорої підкладки. Вікно — це .syro-cart-popup-content. */
	html[data-syro-theme="light"] .syro-cart-popup-content,
	html[data-syro-theme="light"] .syro-cart-popup-header,
	html[data-syro-theme="light"] .syro-cart-popup-body,
	html[data-syro-theme="light"] .syro-cart-popup-actions,
	html[data-syro-theme="light"] .syro-cart-popup-list,
	html[data-syro-theme="light"] .syro-cart-popup-inner {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
	}
	html[data-syro-theme="light"] .syro-cart-popup-item,
	html[data-syro-theme="light"] .syro-cart-popup-product {
		background: var(--st-bg) !important;
		color: var(--st-fg) !important;
		border-color: var(--st-line) !important;
	}
	html[data-syro-theme="light"] .syro-cart-popup-title,
	html[data-syro-theme="light"] .syro-cart-popup-item-name,
	html[data-syro-theme="light"] .syro-cart-popup-close,
	html[data-syro-theme="light"] .syro-cart-popup-qty,
	html[data-syro-theme="light"] .syro-cart-popup-control,
	html[data-syro-theme="light"] .syro-cart-popup-empty { color: var(--st-fg) !important; }
	html[data-syro-theme="light"] .syro-cart-popup-item-price,
	html[data-syro-theme="light"] .syro-cart-popup-recommend { color: var(--st-accent-text) !important; }
	/* Підказка про мінімальну суму: помаранчевий текст на 10% помаранчевому
	   тлі давав контраст 1,00 — тобто напис не існував. */
	/* Тло робимо світлішим, а напис темнішим: на 16% помаранчевого виходило
	   2,53, тобто все ще нижче норми. Тепер обидві половини працюють у той
	   самий бік. */
	html[data-syro-theme="light"] .syro-cart-popup-min-notice {
		background: #fdf0d6 !important;
		color: #7a4d05 !important;
	}
	html[data-syro-theme="light"] .syro-cart-popup-backdrop { background: rgba(60,45,20,.45) !important; }

	/* --- ЕКРАН ОПЛАТИ (G7) --- */
	/* Сама картка G7 світла в обох темах, її не чіпаємо. А от штатний блок
	   Woo під нею («Номер замовлення / Дата / Всього / Спосіб оплати») тримає
	   темне тло від гармонізації, і наші правила зробили в ньому текст
	   темним — 1,15. Четвертий випадок половинчастої правки за день, тому
	   тло й текст задаємо разом. */
	html[data-syro-theme="light"] .woocommerce-order-pay .order_details,
	html[data-syro-theme="light"] ul.order_details,
	html[data-syro-theme="light"] ul.order_details li {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border-color: var(--st-line) !important;
	}
	html[data-syro-theme="light"] ul.order_details li strong { color: var(--st-fg) !important; }
	html[data-syro-theme="light"] ul.order_details .woocommerce-Price-amount { color: var(--st-accent-text) !important; }

	/* --- КАРТКА ТОВАРУ --- */
	html[data-syro-theme="light"] .product__sku,
	html[data-syro-theme="light"] .product__sku span { color: var(--st-muted); }
	html[data-syro-theme="light"] .woocommerce-Reviews-title,
	html[data-syro-theme="light"] h2.woocommerce-Reviews-title,
	html[data-syro-theme="light"] #reviews h2,
	html[data-syro-theme="light"] #review_form label,
	html[data-syro-theme="light"] .comment-form-rating label,
	html[data-syro-theme="light"] .woocommerce-review__author,
	html[data-syro-theme="light"] .description,
	html[data-syro-theme="light"] .woocommerce-product-details__short-description { color: var(--st-fg) !important; }
	/* Зірки оцінки — акцент на кремовому 1,78. Даємо темніший відтінок, форма
	   не змінюється. */
	html[data-syro-theme="light"] .stars a,
	html[data-syro-theme="light"] .star-rating,
	html[data-syro-theme="light"] .star-rating::before { color: var(--st-accent-text); }
	/* Зірочка «обовʼязкове поле» у формі відгуку — тема фарбує її в чистий
	   акцент, на кремовому це 1,78 (обхід 26.08).
	   Гармонізація форм ставить її через `#respond .required` — id важить
	   більше за будь-які класи, тому й тут потрібен id. */
	html[data-syro-theme="light"] #respond .required,
	html[data-syro-theme="light"] .woocommerce .required { color: var(--st-accent-text); }

	/* Кнопка перемикача, перенесена в праву частину шапки. */
	/* Відступів собі не додаємо: у .header__more власний проміжок 10px, а
	   бюджет шапки на 1200px зійшовся до кількох пікселів — заміряно. */
	.header__more .syro-st__btn { flex: 0 0 auto; }

	/* --- хлібні крихти --- */
	/* Були білим по молочному: заміряно контраст 1,08 — тобто їх просто не
	   існувало на екрані. Це найтиповіша поломка інверсії: елемент, який у
	   темній темі білий «за замовчуванням», у світлій зникає. */
	html[data-syro-theme="light"] .breadcrumbs,
	html[data-syro-theme="light"] .breadcrumbs span,
	html[data-syro-theme="light"] .breadcrumbs a { color: var(--st-muted); }
	html[data-syro-theme="light"] .breadcrumbs a:hover { color: var(--st-accent-text); }

	/* --- чипси фільтрів каталогу --- */
	/* Неактивний чипс у темній темі — помаранчевий текст у помаранчевій рамці.
	   На молочному тлі це вицвітає, тому текст робимо темним, а рамку лишаємо
	   акцентною: форма ряду не змінюється, читабельність — так. */
	html[data-syro-theme="light"] .first__category-menu li a { color: var(--st-fg); }
	html[data-syro-theme="light"] .first__category-menu li.syro-f--on a,
	html[data-syro-theme="light"] .first__category-menu li.current-menu-item a { color: #252534; }
	html[data-syro-theme="light"] .first__category-title { color: var(--st-fg); }

	/* --- кнопки --- */
	/* .btn_white_border — біла рамка з білим текстом: на світлому це
	   невидима кнопка. Найчастіша поломка при інверсії теми, тому окремо. */
	html[data-syro-theme="light"] .btn_white_border {
		color: var(--st-fg);
		border-color: var(--st-fg);
	}
	html[data-syro-theme="light"] .btn_white_border:hover {
		color: var(--st-surface);
		border-color: var(--st-fg);
		background-color: var(--st-fg);
	}
	html[data-syro-theme="light"] .btn_orange_border { color: var(--st-accent-text); border-color: var(--st-accent-text); }

	/* --- картки товару й блоки --- */
	/* Тінь, а не рамка. На кремовому тлі рамка виглядає обведенням, а мʼяка
	   тепла тінь дає те, заради чого світла тема й робиться: відчуття, що
	   картка лежить на столі. Колір тіні теж теплий (коричнюватий), бо сіра
	   тінь на кремовому одразу читається як бруд. */
	html[data-syro-theme="light"] .products__item,
	html[data-syro-theme="light"] .advantages__item,
	html[data-syro-theme="light"] .about__text,
	html[data-syro-theme="light"] .reviews__item {
		background-color: var(--st-surface);
		border-radius: 16px;
		box-shadow: var(--st-tin);
		transition: box-shadow .2s ease, transform .2s ease;
	}
	html[data-syro-theme="light"] .products__item:hover {
		box-shadow: var(--st-tin-vyshche);
		transform: translateY(-2px);
	}
	/* Фото в картці — теплою скоринкою до країв картки, без білої щілини. */
	html[data-syro-theme="light"] .products__item-imgs,
	html[data-syro-theme="light"] .products__item-img { border-radius: 12px; }
	html[data-syro-theme="light"] .products__item-title a,
	html[data-syro-theme="light"] .products__item-title,
	html[data-syro-theme="light"] .products__item-text,
	html[data-syro-theme="light"] .advantages__item-text { color: var(--st-fg); }
	html[data-syro-theme="light"] .products__item-price { color: var(--st-accent-text); }

	/* 26.08, знімки власника зі світлої теми. Картка отримала тло й радіус, але
	   відступів усередині не мала — у темній темі їх не треба (картка прозора),
	   а тут край картки збігався з краєм контенту: заголовок на три рядки
	   вилазив НАД карткою (у теми .products__item-title має фіксовану висоту
	   60px і flex-центрування, зайве переливається в обидва боки), а кнопки
	   «Детальніше/Замовити» сідали рівно на нижній край. Лікується відступом
	   картки й «не менше 60px» замість «рівно 60px» для заголовка. */
	html[data-syro-theme="light"] .products__item { padding: 16px 16px 18px; }
	html[data-syro-theme="light"] .products__item-title { height: auto; min-height: 60px; }
	@media only screen and (max-width: 1199px) {
		html[data-syro-theme="light"] .products__item { padding: 12px 12px 14px; }
		html[data-syro-theme="light"] .products__item-title { min-height: 52px; }
	}

	/* «Сири з серця Карпат»: на прозорому тлі різна висота пʼяти карток не
	   видна, на кремовому з тлом — виглядає як зубці. Тягнемо до однієї висоти. */
	html[data-syro-theme="light"] .advantages__column { display: flex; }
	html[data-syro-theme="light"] .advantages__item { flex: 1 1 auto; width: 100%; }

	/* 26.08 (2), знімок власника: три з пʼяти іконок переваг (вівця, ручка,
	   пакунок) намальовані БІЛИМИ лініями під темне тло — на молочній картці
	   їх просто не видно; дві інші (хата, сир) уже золоті. Файли не чіпаємо
	   (це вивантаження ACF, зʼїде з перезаливкою), а перефарбовуємо CSS-фільтром
	   в один тон: brightness(0) робить будь-який колір чорним, далі
	   invert+sepia+saturate+hue-rotate виводять цей чорний на золото ~#c4860f.
	   Тобто всі пʼять стають однаковими незалежно від того, якими намальовані. */
	html[data-syro-theme="light"] .advantages__item-img img {
		filter: brightness(0) saturate(100%) invert(56%) sepia(62%) saturate(900%) hue-rotate(10deg) brightness(88%) contrast(95%);
	}

	/* «Про нас»: картка отримала тло, а текст сидів упритул до її краю. */
	html[data-syro-theme="light"] .about__text { padding: 28px 32px; box-sizing: border-box; }
	@media only screen and (max-width: 767px) {
		html[data-syro-theme="light"] .about__text { padding: 18px 16px; }
	}

	/* Банер: тема кладе на фото затемнення 75 % — у темній темі це доречно,
	   у світлій сторінка молочна, а банер лишався майже чорним. Лишаємо
	   45 %, щоб фото читалось, а золотий заголовок тримаємо тінню. Лише
	   `.first.bg` — блок FAQ на фото лишається як був. */
	html[data-syro-theme="light"] .first.bg::before { background-color: rgba(0, 0, 0, 0.45); }
	html[data-syro-theme="light"] .first.bg .first__title,
	html[data-syro-theme="light"] .first.bg .first__description { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }

	/* «Доповніть набір» (syrocarpaty-catalog): затемнення країв каруселі
	   зашите кольором темного тла #252534 — на кремовому це виглядає як бруд
	   на крайніх картках. У світлій темі край розчиняється в колір сторінки. */
	html[data-syro-theme="light"] .syro-cross__viewport::before { background: linear-gradient(90deg, var(--st-bg), rgba(245, 236, 217, 0)); }
	html[data-syro-theme="light"] .syro-cross__viewport::after { background: linear-gradient(270deg, var(--st-bg), rgba(245, 236, 217, 0)); }

	/* --- поля вводу (наша гармонізація тримає їх темними) --- */
	html[data-syro-theme="light"] .woocommerce input.input-text,
	html[data-syro-theme="light"] .woocommerce textarea,
	html[data-syro-theme="light"] .woocommerce select,
	html[data-syro-theme="light"] .woocommerce-page input.input-text,
	html[data-syro-theme="light"] .woocommerce-page textarea,
	html[data-syro-theme="light"] .woocommerce-page select,
	html[data-syro-theme="light"] .wpcf7 input[type=text],
	html[data-syro-theme="light"] .wpcf7 input[type=email],
	html[data-syro-theme="light"] .wpcf7 input[type=tel],
	html[data-syro-theme="light"] .wpcf7 textarea,
	html[data-syro-theme="light"] .wpcf7-form-control.wpcf7-text,
	html[data-syro-theme="light"] .wpcf7-form-control.wpcf7-tel,
	html[data-syro-theme="light"] #respond input[type=text],
	/* ДОДАНО 19.08 по обходу. Гармонізація фарбує в темне ТРИ поля відгуку —
	   text, email і url, — а сюди свого часу переписали лише `text`. Наслідок
	   було видно на кожній картці товару: «Ім'я» світле, а «Пошта» лишалась
	   темно-синьою коробкою на молочному. Заміряно rgb(46,46,64) у світлій. */
	html[data-syro-theme="light"] #respond input[type=email],
	html[data-syro-theme="light"] #respond input[type=url],
	html[data-syro-theme="light"] #respond textarea {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border: 1px solid var(--st-line) !important;
	}
	html[data-syro-theme="light"] ::placeholder { color: var(--st-muted) !important; opacity: 1; }
	html[data-syro-theme="light"] .woocommerce-checkout ::placeholder { color: var(--st-muted) !important; }

	/* --- підписи полів на чекауті --- */
	/* Були білими на молочному, тобто чекаут виглядав як набір безіменних
	   рамок: «Імʼя», «Телефон», «Пошта» не читались узагалі. Заміряно
	   rgb(255,255,255) на світлому. Це найдорожча з інверсійних поломок —
	   людина не розуміє, що куди вводити, саме на кроці оплати. */
	html[data-syro-theme="light"] .woocommerce-checkout label,
	html[data-syro-theme="light"] .woocommerce-checkout .form-row label,
	html[data-syro-theme="light"] .woocommerce-checkout h3,
	html[data-syro-theme="light"] .woocommerce-billing-fields label,
	html[data-syro-theme="light"] .woocommerce-shipping-fields label,
	html[data-syro-theme="light"] .woocommerce-additional-fields label,
	html[data-syro-theme="light"] .cart_totals,
	html[data-syro-theme="light"] .shop_table,
	html[data-syro-theme="light"] .shop_table th,
	html[data-syro-theme="light"] .shop_table td { color: var(--st-fg); }
	html[data-syro-theme="light"] .woocommerce-checkout .optional { color: var(--st-muted); }

	/* --- блоки, які наші ж плагіни тримають темними --- */
	/* Плашка термопакета й блок способів оплати мають власне темне тло з
	   !important (ux + гармонізація), тому тут теж !important — інакше
	   посеред світлої сторінки лишаються два темні прямокутники. */
	html[data-syro-theme="light"] .syro-thermo-note,
	/* ДОДАНО 19.08. Плашка термопакета має ДВА написання: `.syro-thermo-note`
	   у кошику й на картці товару — і `.syro-thermo-strip__inner` на головній.
	   Тут був покритий лише перший, тому той самий за змістом блок виходив
	   світлим у кошику й темно-синім на головній. Не поломка (білий напис на
	   темному читається), а саме різнобій — одна роль, два вигляди. */
	html[data-syro-theme="light"] .syro-thermo-strip__inner,
	html[data-syro-theme="light"] .woocommerce-checkout-payment,
	html[data-syro-theme="light"] #payment,
	html[data-syro-theme="light"] #payment div.form-row {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border: 1px solid var(--st-line) !important;
	}
	/* Список способів оплати й розкривний блок під ним мають ВЛАСНЕ темне тло,
	   окреме від #payment. Перша редакція цього файла перефарбувала лише
	   текст — вийшло темне по темному, тобто гірше, ніж було. Записую як
	   урок: при інверсії теми колір тексту й тло треба міняти ПАРОЮ, інакше
	   кожна половинка робить свою половину поломки. */
	html[data-syro-theme="light"] ul.wc_payment_methods,
	html[data-syro-theme="light"] #payment ul.payment_methods,
	html[data-syro-theme="light"] #payment .payment_box {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border-color: var(--st-line) !important;
	}
	html[data-syro-theme="light"] #payment .payment_box::before { border-bottom-color: var(--st-surface) !important; }
	html[data-syro-theme="light"] #payment label,
	html[data-syro-theme="light"] #payment li,
	html[data-syro-theme="light"] .wc_payment_method label { color: var(--st-fg) !important; }

	/* Випадні списки select2 (область, місто) — те саме: гармонізація тримає
	   їх темними, і без цього блоку виходить темне поле з темним текстом. */
	html[data-syro-theme="light"] .select2-container--default .select2-selection--single,
	html[data-syro-theme="light"] .select2-container--default .select2-results,
	html[data-syro-theme="light"] .select2-container--default .select2-results__option,
	html[data-syro-theme="light"] .select2-container--default .select2-search--dropdown,
	html[data-syro-theme="light"] .select2-dropdown {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border-color: var(--st-line) !important;
	}
	html[data-syro-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--st-fg) !important; }
	html[data-syro-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
	}
	html[data-syro-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
		background: var(--st-accent) !important;
		color: #252534 !important;
	}
	html[data-syro-theme="light"] .woocommerce-privacy-policy-text,
	html[data-syro-theme="light"] .woocommerce-privacy-policy-text p { color: var(--st-muted) !important; }

	/* --- футер: соцмережі --- */
	/* Instagram і Facebook у підвалі зникали на світлому. Звичайне правило їх
	   не брало, і причина варта того, щоб її записати: колір стоїть
	   ІНЛАЙНОВИМ `style="color:#fff"` прямо в розмітці футера, а інлайн
	   перебиває будь-який селектор. Тому тут єдиний випадок у цьому файлі,
	   де !important не ліньки, а єдиний спосіб. Поруч у тій самій розмітці
	   висить `onmouseover="this.style.color=..."` — hover ми теж перекриваємо. */
	html[data-syro-theme="light"] .footer a[href*="instagram"],
	html[data-syro-theme="light"] .footer a[href*="facebook"],
	html[data-syro-theme="light"] .footer__link a,
	html[data-syro-theme="light"] .footer__email-link,
	html[data-syro-theme="light"] .footer__main a,
	html[data-syro-theme="light"] .footer__block a { color: var(--st-fg) !important; }
	html[data-syro-theme="light"] .footer a[href*="instagram"]:hover,
	html[data-syro-theme="light"] .footer a[href*="facebook"]:hover { color: var(--st-accent-text) !important; }

	/* --- нотатки WooCommerce --- */
	html[data-syro-theme="light"] .woocommerce-message,
	html[data-syro-theme="light"] .woocommerce-info,
	html[data-syro-theme="light"] .woocommerce-error,
	html[data-syro-theme="light"] .woocommerce-checkout .woocommerce-message,
	html[data-syro-theme="light"] .woocommerce-checkout .woocommerce-info,
	html[data-syro-theme="light"] .woocommerce-checkout .woocommerce-error {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border: 1px solid var(--st-line);
	}

	/* --- наш пошук у шапці --- */
	html[data-syro-theme="light"] .syro-hs__form {
		background: var(--st-surface);
		border-color: var(--st-line);
	}
	html[data-syro-theme="light"] .syro-hs__field { background: var(--st-surface); color: var(--st-fg); }
	html[data-syro-theme="light"] .syro-hs__field::placeholder { color: var(--st-muted); opacity: 1; }
	html[data-syro-theme="light"] .syro-hs__toggle { color: var(--st-fg); }

	/* --- перемикач тем --- */
	.syro-st { display: flex; align-items: center; }
	.syro-st__btn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
		background: transparent; color: inherit; cursor: pointer;
	}
	.syro-st__btn:hover { color: #f1a416; }
	/* Обгортка для лендингу лишається схованою: кнопку з неї забирає JS. Якщо
	   скрипт не відпрацював — кнопки просто немає, і лендинг поводиться як
	   раніше. Це навмисне: недомальована кнопка в кутку гірша за її відсутність. */
	.syro-st--lp { display: none; }
	/* У шапці лендингу кнопка стоїть після телефона й успадковує його колір. */
	.lp-topbar__inner .syro-st__btn { color: inherit; flex: 0 0 auto; margin-left: 14px; }
	html[data-syro-theme="light"] .lp-topbar__inner .syro-st__btn { color: var(--st-fg); }
	.syro-st__sun { display: none; }
	html[data-syro-theme="light"] .syro-st__sun { display: block; }
	html[data-syro-theme="light"] .syro-st__moon { display: none; }
	html[data-syro-theme="light"] .syro-st__btn { color: var(--st-fg); }

	/* --- наші блоки: контакти, фільтри, отримувач, екран оплати --- */
	html[data-syro-theme="light"] .syro-cnt__card,
	html[data-syro-theme="light"] .syro-rcp,
	html[data-syro-theme="light"] .syro-pay__card {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border-color: var(--st-line) !important;
	}
	/* Значення в картках контактів мають `color:#fff !important` у своєму
	   плагіні, тому на білій картці зникали цілком: на знімку /contacts/ було
	   видно лише телефон (він помаранчевий) — пошта, телеграм і адреса
	   виглядали як порожні картки. Той самий рід поломки, що з підписами на
	   чекауті: перефарбували тло, забули текст. */
	html[data-syro-theme="light"] .syro-cnt__val,
	html[data-syro-theme="light"] .syro-cnt__form-t,
	html[data-syro-theme="light"] .syro-cnt__tel { color: var(--st-fg) !important; }
	html[data-syro-theme="light"] .syro-cnt__lbl,
	html[data-syro-theme="light"] .syro-cnt__sub { color: var(--st-muted) !important; }
	html[data-syro-theme="light"] a.syro-cnt__card:hover .syro-cnt__val { color: var(--st-accent-text) !important; }
	html[data-syro-theme="light"] .syro-cnt__soc-lbl { color: var(--st-muted); }

	html[data-syro-theme="light"] .syro-rcp__title,
	html[data-syro-theme="light"] .syro-rcp__opt,
	html[data-syro-theme="light"] .syro-rcp__fields label { color: var(--st-fg); }
	html[data-syro-theme="light"] .syro-rcp__note { color: var(--st-muted); }
	html[data-syro-theme="light"] .syro-search { border-color: var(--st-accent); }
	html[data-syro-theme="light"] .syro-search__field { background: var(--st-surface); color: var(--st-fg); }

	/* --- лендинги: у них власні змінні, тому досить перевизначити їх --- */
	html[data-syro-theme="light"] body.syro-lp {
		--lp-bg: #f5ecd9;
		--lp-surface: #fffdf7;
		--lp-fg: #2c2418;
		--lp-muted: #6a5a41;       /* та сама причина, що й --st-muted */
		--lp-line: rgba(120,92,40,.20);
		/* --lp-on-accent НЕ ЧІПАЄМО. Перша редакція поставила тут білий, і це
		   зіпсувало головну кнопку лендингу: білий напис на помаранчевому дав
		   контраст 2,09 замість 7+. Ця змінна — колір ТЕКСТУ НА АКЦЕНТІ, а
		   акцент лишився тим самим помаранчевим, тобто темний напис на ньому
		   правильний в обох темах. */
	}
	/* Акцент, ужитий у лендингу як ТЕКСТ (заголовки секцій, ціна, телефон у
	   шапці), на кремовому дає 1,78 — тому саме цим трьом місцям даємо
	   темніший відтінок. Кнопки не чіпаємо: там акцент є тлом. */
	html[data-syro-theme="light"] .lp-section__title,
	html[data-syro-theme="light"] .lp-price__now,
	html[data-syro-theme="light"] .lp-topbar__phone,
	html[data-syro-theme="light"] .lp-footer__phone,
	html[data-syro-theme="light"] .lp-upsell__gift,
	html[data-syro-theme="light"] .lp-gift__price-value,
	html[data-syro-theme="light"] .lp-contact__value { color: var(--st-accent-text); }
	/* Конструктор набору пише ТЕКСТ кольором --lp-accent (заголовок промо,
	   ціни карток, «Ваш набір», підсумок). Саму змінну не чіпаємо — вона ж
	   заливка кнопок; перефарбовуємо лише ці написи. На вершках акцент дає
	   2,05, на промо-плашці 1,70 (обхід 26.08). */
	html[data-syro-theme="light"] .lp-build__promo-title,
	html[data-syro-theme="light"] .lp-build__card-price,
	html[data-syro-theme="light"] .lp-build__cart-head,
	html[data-syro-theme="light"] .lp-build__cart-total strong { color: var(--st-accent-text); }
	/* Друга кнопка форми — контурна: акцентний напис у акцентній рамці. На
	   кремовому напис давав 2,05, тому темнішаємо напис і рамку, а заливку
	   лишаємо порожньою — вона й має бути другорядною поруч із «Оплатити». */
	html[data-syro-theme="light"] .lp-btn--ghost {
		color: var(--st-accent-text);
		border-color: var(--st-accent-text);
	}
	html[data-syro-theme="light"] .lp-btn--ghost:hover {
		color: #2c2418;
		background-color: var(--st-accent);
		border-color: var(--st-accent);
	}
	/* --- ЗНАЙДЕНО ОБХОДОМ 19.08: те, що лишилось темним у світлій темі --- */

	/* СЕКЦІЯ НА ФОТОГРАФІЇ (`.faq.bg` — «Доставка та оплата», «Відгуки»,
	   «Питання-Відповіді» на картці товару).

	   Фото не інвертується ніколи: це знімок, а не колір. Тому текст на ньому
	   має лишатись світлим В ОБОХ темах. Світла ж тема перефарбувала його в
	   rgb(44,36,24), і абзаци зникли на темному фото — у темній темі той самий
	   текст білий і читається. Знайдено порівнянням двох знімків того самого
	   місця, а не контрастоміром: той міряв колір ПРЕДКА (кремовий) і давав
	   «усе гаразд», бо фон тут — картинка, а не колірне тло.

	   Виняток для банера вже стояв вище (`.first.bg`), але покривав лише
	   заголовки й кнопку. `.additions.bg` і `.reviews.bg` НЕ чіпаємо свідомо:
	   там текст лежить у власних світлих картках, перевірено знімком.

	   Пишемо через `.faq.bg`, а не `.faq` — з тієї ж причини, що описана вище
	   для `.first`: клас без пари може збігтися з чужим. */
	html[data-syro-theme="light"] .faq.bg,
	html[data-syro-theme="light"] .faq.bg p,
	html[data-syro-theme="light"] .faq.bg li,
	html[data-syro-theme="light"] .faq.bg .faq__text,
	html[data-syro-theme="light"] .faq.bg .faq__item,
	html[data-syro-theme="light"] .faq.bg .container { color: #fff; }

	/* КАРТКА ВІДГУКУ. Гармонізація дає їй темне тло #2e2e40 з білим написом.
	   Світла тема тло не переписала, а колір напису переписала — вийшло
	   темно-коричневе ім'я на темно-синьому: заміряно контраст 1,15, тобто
	   підпис автора зникав. Або тло, або напис — тут світлимо тло, бо картка
	   на молочній сторінці має бути карткою, як усі інші. */
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text,
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li img.avatar {
		background: var(--st-surface) !important;
		box-shadow: var(--st-tin);
	}
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text p,
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta,
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
		color: var(--st-fg) !important;
	}
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta time,
	html[data-syro-theme="light"] .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__published-date {
		color: var(--st-muted) !important;
	}
	html[data-syro-theme="light"] .woocommerce #reviews #comments h2 { color: var(--st-fg); }

	/* ЗАГОЛОВКИ ВСЕРЕДИНІ СТАТТІ Й ОПИСУ. Акцент #f1a416 як ТЕКСТ на кремовому
	   дає 1,78 — той самий випадок, що вже полагоджений для лендингів нижче,
	   але в статтях блогу й описах сторінок його пропустили. Найпомітніше на
	   /syrna-tarilka…/: підзаголовок «Які сири вибрати для сирної тарілки?»
	   на кремовому майже не читався. Даємо той самий темніший відтінок.

	   Область обмежена `.article__content` СВІДОМО: заголовки, що лежать на
	   ФОТО (`.first.bg`, `.faq.bg`), мають лишатись яскраво-помаранчевими —
	   там під ними темний знімок, і темніший відтінок зробив би гірше. */
	html[data-syro-theme="light"] .article__content h2,
	html[data-syro-theme="light"] .article__content h3,
	html[data-syro-theme="light"] .article__content h4,
	html[data-syro-theme="light"] .article__content h2 strong,
	html[data-syro-theme="light"] .article__content h3 strong,
	html[data-syro-theme="light"] .article__content h4 strong { color: var(--st-accent-text); }

	/* ПЛАВАЮЧА ПАНЕЛЬ КУПІВЛІ (`syro-sticky-buy` з плагіна ux) — той самий
	   пропуск, що описаний вище про способи оплати, і рівно з тими ж
	   наслідками. Панель має власне темне тло #2e2e40, світла тема його не
	   переписала, зате перефарбувала напис контурної кнопки в темний акцент:
	   «Швидке замовлення» на панелі давало 2,51. Міняємо тло й текст ПАРОЮ. */
	html[data-syro-theme="light"] .syro-sticky-buy {
		background: var(--st-surface) !important;
		color: var(--st-fg) !important;
		border-bottom: 1px solid var(--st-line) !important;
		box-shadow: var(--st-tin);
	}
	html[data-syro-theme="light"] .syro-sticky-buy__title { color: var(--st-fg); }
	html[data-syro-theme="light"] .syro-sticky-buy__price { color: var(--st-accent-text); }
	html[data-syro-theme="light"] .syro-sticky-buy__price .old-price { color: var(--st-muted); }

	/* --- ГАРМОНІЗАЦІЯ 19.08 --- */

	/* ХРЕСТИК ВИДАЛЕННЯ ПОЗИЦІЇ В КОШИКУ. Іконка теми — БІЛА
	   (`icon-close-white.svg`) і ще й `opacity:.5`. У темній темі це
	   правильно, у світлій виходить біле на молочному, тобто кнопки
	   «прибрати товар» на екрані фактично немає. Інвертуємо саму картинку
	   (вона одноколірна, тому `invert` дає рівно чорний контур) і піднімаємо
	   непрозорість: на світлому 0,5 замало навіть темній іконці. */
	html[data-syro-theme="light"] .cart__item-deleted {
		filter: invert(1);
		opacity: .65;
		border-color: var(--st-line);
	}
	html[data-syro-theme="light"] .cart__item-deleted:hover { opacity: 1; }

	/* СТАРА ЦІНА на світлому. У темі вона тепер #b3b3b3 (виправлено для
	   темної), але на молочному цей самий сірий дає 1,9 — тому тут окремий,
	   темніший відтінок із тієї ж ролі «другорядний текст». */
	html[data-syro-theme="light"] .products__item-price .old-price,
	html[data-syro-theme="light"] .old-price { color: var(--st-muted) !important; }