@charset "UTF-8";
/*
 * KitOptics 2026 — тема оформления для armashop-child.
 *
 * Источник дизайна: макеты Claude Design
 *   tmp/design_handoff_kitoptics_holding_site/index.html
 *   tmp/design_handoff_kiteye640_pages/KitEye640.dc.html
 *   tmp/design_handoff_kiteye640_pages/KitEye640 Pro.dc.html
 *
 * Файл подключается после armashop-main и armashop-child-style, поэтому
 * при равной специфичности выигрывает он. Палитра родительской темы
 * приходит через wp_add_inline_style(':root{...}') — это обычное правило
 * в таблице стилей, а не inline-атрибут, так что :root ниже её перебивает.
 *
 * Схема светлая: содержимое магазина на белом, как на боевом сайте.
 * Шапка, верхняя полоса, заголовок страницы, подвал и копирайт остаются
 * тёмными — там у них класс .ds. Один и тот же набор имён --ko-* задан
 * дважды: светлые значения в :root и на .ls, тёмные на .ds (раздел 2).
 *
 * Две переменные родителя работают в двух ролях сразу:
 *   --lightColor    — фон светлых секций .ls И цвет текста внутри .ds
 *   --darkGreyColor — фон .ds И цвет заголовков внутри .ls
 * Белый и почти-чёрный годятся обеим ролям сразу, поэтому им возвращены
 * исходные значения боевого сайта.
 */

/* ============================================================
   1. ШРИФТЫ
   ============================================================ */
/* Имена файлов только строчными буквами: в корневом .htaccess стоит правило,
   которое любой URL с заглавной буквой отправляет 301-редиректом на строчный
   вариант. Файл Montserrat-VariableFont_wght.ttf по HTTP недостижим в принципе —
   редирект уводит на несуществующий montserrat-variablefont_wght.ttf и отдаёт 404.
   Шрифты урезаны до латиницы, кириллицы, греческого и нужной пунктуации. */
@font-face {
	font-family: "Montserrat KO";
	src: url("../fonts/montserrat-var.woff2") format("woff2-variations"),
	     url("../fonts/montserrat-var.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Montserrat KO";
	src: url("../fonts/montserrat-italic-var.woff2") format("woff2-variations"),
	     url("../fonts/montserrat-italic-var.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono KO";
	src: url("../fonts/jetbrainsmono-var.woff2") format("woff2-variations"),
	     url("../fonts/jetbrainsmono-var.ttf") format("truetype-variations");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   2. ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ
   ============================================================ */
/* Токены заданы дважды. В :root и на светлых секциях .ls лежат светлые
   значения — белый фон, тёмный текст. На тёмных секциях .ds (шапка, подвал,
   копирайт, верхняя полоса, заголовок страницы) те же самые имена
   переопределяются на тёмные. Правила ниже написаны один раз через var(),
   а какой именно цвет подставится, решает окружение. Из-за этого светлую
   и тёмную часть сайта не надо описывать двумя наборами правил. */
:root,
.ls {
	/* амбер — акцент */
	--ko-signal-amber: #F2A900;
	--ko-bright-amber: #C98A00;
	/* Амбер в роли заливки и амбер в роли текста — разные цвета. На белом
	   #F2A900 читается плохо (контраст 2:1), поэтому для надписей берётся
	   притемнённый. В тёмной секции оба совпадают. */
	--ko-amber-text: #A87400;
	/* тёмная краска, одинаковая в обоих окружениях: текст на амбере и
	   принудительно тёмные плашки .bg-dark */
	--ko-ink: #0B0D10;
	/* подсветка чётных строк таблиц */
	--ko-zebra: rgba(19, 30, 37, .035);
	--ko-amber-dim: #8A6410;
	--ko-amber-glow: rgba(242, 169, 0, .30);
	--ko-amber-wash: rgba(242, 169, 0, .10);
	--ko-amber-line: rgba(242, 169, 0, .55);

	/* поверхности */
	--ko-surface: #FFFFFF;
	--ko-surface-2: #F4F4F1;
	--ko-surface-3: #ECECE7;
	--ko-surface-4: #FFFFFF;

	/* нейтральные */
	--ko-fg-strong: #0B0D10;
	--ko-fg-muted: #7C868C;
	--ko-border: #CFD3D1;
	--ko-border-faint: #E4E4DF;

	/* текст */
	--ko-fg-1: #131E25;
	--ko-fg-2: #4E5A61;
	--ko-fg-3: #7C868C;

	/* статусы */
	--ko-status-live: #2E9E4F;
	--ko-status-warn: #B87F0A;
	--ko-status-alert: #C8353A;

	/* типографика */
	--ko-font-sans: "Montserrat KO", "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--ko-font-mono: "JetBrains Mono KO", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	--ko-track-tight: -0.02em;
	--ko-track-label: 0.18em;
	--ko-track-wide: 0.28em;

	/* геометрия */
	--ko-r-sm: 2px;
	--ko-r-md: 4px;
	--ko-r-lg: 8px;
	--ko-r-pill: 999px;

	/* тени и движение */
	--ko-shadow-1: 0 1px 2px rgba(19, 30, 37, .08);
	--ko-shadow-2: 0 8px 24px rgba(19, 30, 37, .10);
	--ko-shadow-3: 0 24px 64px rgba(19, 30, 37, .14);
	--ko-ease-out: cubic-bezier(.16, 1, .3, 1);
	--ko-dur-fast: .14s;
	--ko-dur-med: .28s;
}

/* Тёмное окружение: шапка, верхняя полоса, заголовок страницы, подвал,
   копирайт и любая секция с классом .ds. */
.ds,
.page_topline,
.page_header,
.page_title,
.page_footer,
.page_copyright {
	--ko-bright-amber: #E8A63A;
	--ko-amber-dim: #C08B18;
	--ko-amber-text: #F2A900;
	--ko-amber-glow: rgba(242, 169, 0, .25);
	--ko-amber-wash: rgba(242, 169, 0, .07);
	--ko-amber-line: rgba(242, 169, 0, .45);

	--ko-surface: #0B0D10;
	--ko-surface-2: #101317;
	--ko-surface-3: #15181D;
	--ko-surface-4: #1B1F25;

	--ko-fg-strong: #E7E7E2;
	--ko-fg-muted: #6E7278;
	--ko-border: #3A3F46;
	--ko-border-faint: #24282E;

	--ko-fg-1: #E7E7E2;
	--ko-fg-2: #A7ABB0;
	--ko-fg-3: #6E7278;

	--ko-status-live: #4ADE80;
	--ko-status-warn: #F2A900;
	--ko-status-alert: #E5484D;

	--ko-zebra: rgba(255, 255, 255, .025);

	--ko-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
	--ko-shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
	--ko-shadow-3: 0 24px 64px rgba(0, 0, 0, .55);
}

/* ============================================================
   3. ПАЛИТРА РОДИТЕЛЬСКОЙ ТЕМЫ, ПЕРЕВЕДЁННАЯ НА KITOPTICS
   ============================================================ */
/* Здесь контекст не нужен: у родителя --lightColor это одновременно фон
   светлой секции и цвет текста на тёмной, а --darkGreyColor — наоборот.
   Белый и почти-чёрный подходят обеим ролям сразу, как и было на боевом
   сайте до переделки. */
:root {
	--colorMain: #F2A900;
	--colorMain2: #4ADE80;
	--colorMain3: #E8A63A;
	--colorMain4: #E5484D;

	--fontColor: #6D7A82;
	--lightColor: #FFFFFF;
	--darkGreyColor: #131E25;
	--greyColor: #F1F1F1;
	--darkColor: #0D161B;

	--colorMainLighten10: #F5BC33;
	--fontColorDarker7: #637077;
	--fontColorDarker10: #5D6970;
	--greyColorDarker6: #E3E3E3;
	--lightColorDarker10: #E6E6E6;
	--darkColorLighten2: #111C22;

	--fontColorRgba04: rgba(109, 122, 130, .4);
	--lightColorRgba07: rgba(255, 255, 255, .7);
	--lightColorRgba05: rgba(255, 255, 255, .5);
	--lightColorRgba04: rgba(255, 255, 255, .4);
	--lightColorRgba02: rgba(255, 255, 255, .2);
	--lightColorRgba09: rgba(255, 255, 255, .9);
	--lightColorRgba099: rgba(255, 255, 255, .99);
	--darkGreyColorRgba07: rgba(19, 30, 37, .7);
	--darkGreyColorRgba06: rgba(19, 30, 37, .6);
	--darkGreyColorRgba01: rgba(19, 30, 37, .1);
	--darkGreyColorRgba006: rgba(19, 30, 37, .06);
	--greyColorRgba07: rgba(241, 241, 241, .7);
	--darkColorRgba07: rgba(13, 22, 27, .7);
	--colorMainRgba1: rgba(242, 169, 0, 1);
	--colorMainRgba07: rgba(242, 169, 0, .7);
	--colorMain2Rgba1: rgba(74, 222, 128, 1);
}

/* ============================================================
   4. БАЗА
   ============================================================ */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--ko-surface);
	color: var(--ko-fg-2);
	font-family: var(--ko-font-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#canvas,
#box_wrapper {
	background-color: var(--ko-surface);
}

::selection {
	background: var(--ko-signal-amber);
	color: var(--ko-ink);
}
::-moz-selection {
	background: var(--ko-signal-amber);
	color: var(--ko-ink);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--ko-surface);
}
::-webkit-scrollbar-thumb {
	background: var(--ko-border);
	border-radius: var(--ko-r-pill);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--ko-fg-muted);
}

a {
	color: var(--ko-fg-1);
	transition: color var(--ko-dur-fast) ease;
}
a:hover,
a:focus {
	color: var(--ko-amber-text);
}

hr {
	border: 0;
	border-top: 1px solid var(--ko-border-faint);
}

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

strong,
b {
	font-weight: 600;
	color: var(--ko-fg-1);
}

blockquote {
	border-left: 2px solid var(--ko-signal-amber);
	padding-left: 18px;
	color: var(--ko-fg-1);
	font-style: normal;
}

code,
kbd,
pre,
samp,
.mono {
	font-family: var(--ko-font-mono);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   5. ТИПОГРАФИКА
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.special-heading,
.counter-heading,
div.counter-div.counter-heading,
div.widget-title-div {
	font-family: var(--ko-font-sans);
	font-variant-numeric: normal;
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal;
	color: var(--ko-fg-1);
	word-break: normal;
	overflow-wrap: break-word;
}

/* Родительская тема прописывает Roboto и Oswald прямо в правилах, а не через
   переменную, поэтому их приходится перечислять поимённо. Специфичность та же,
   что у родителя, а kitoptics.css подключается позже — этого достаточно,
   !important не нужен. Иконочные шрифты (FontAwesome, flaticon, fontello,
   icomoon) не трогаем, там в font-family зашита сама иконка. */
button,
input,
select,
optgroup,
textarea,
label,
.form-control,
.percent,
.chart .chart-meta h4,
.icon-box .special-heading,
.page_slider .flex-control-nav li a,
.nav-tabs.vertical-tabs .nav-link .media .media-body h6,
.woocommerce-result-count,
.products-selection .toggle_view,
.widget_top_rated_products .minicart-product-meta a,
.shop_table th {
	font-family: var(--ko-font-sans);
}

h1, .h1 {
	font-size: clamp(32px, 4.5vw, 60px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: var(--ko-track-tight);
	text-transform: none;
}
h2, .h2 {
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: var(--ko-track-tight);
	text-transform: none;
}
h3, .h3 {
	font-size: 24px;
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
h4, .h4 {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
h5, .h5 {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}
h6, .h6 {
	font-family: var(--ko-font-mono);
	font-size: 12px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: var(--ko-track-label);
	text-transform: uppercase;
	color: var(--ko-amber-text);
}

.ls h1, .ls h2, .ls h3, .ls h4, .ls h5, .ls h6,
.ds h1, .ds h2, .ds h3, .ds h4, .ds h5, .ds h6 {
	color: var(--ko-fg-1);
}
.ls h6, .ds h6 {
	color: var(--ko-amber-text);
}

/* заголовок секции конструктора */
.special-heading {
	font-weight: 600;
	letter-spacing: var(--ko-track-tight);
	text-transform: none;
	color: var(--ko-fg-1);
}
.special-heading mark,
.special-heading em {
	background: transparent;
	font-style: normal;
	color: var(--ko-amber-text);
}

/* цифра-счётчик */
div.counter-div.counter-heading {
	font-family: var(--ko-font-mono);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	letter-spacing: -.01em;
	line-height: 1;
	text-transform: none;
	color: var(--ko-amber-text);
}

/* заголовок виджета — «глазок» HUD */
div.widget-title-div {
	font-family: var(--ko-font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--ko-track-label);
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	margin-bottom: 18px;
}
footer div.widget-title-div {
	color: var(--ko-fg-muted);
}

/* article-заголовки из старого child style.css — новые размеры */
article h2 {
	font-size: clamp(26px, 3vw, 40px) !important;
	line-height: 1.1 !important;
	margin-top: 32px !important;
}
article h3 {
	font-size: 24px !important;
	line-height: 1.25 !important;
	margin-top: 28px !important;
}
article h4 {
	font-size: 19px !important;
	line-height: 1.3 !important;
	margin-top: 24px !important;
}

.color-main,
h1.color-main,
.color-maincolor {
	color: var(--ko-amber-text);
}
.color-darkgrey,
strong.color-darkgrey {
	color: var(--ko-fg-1);
}
.grey,
.color-grey {
	color: var(--ko-fg-muted);
}

/* моно-подпись под «eyebrow» из макета */
.small-title,
.fw-divider-word {
	font-family: var(--ko-font-mono);
	font-size: 12px;
	letter-spacing: var(--ko-track-label);
	text-transform: uppercase;
	color: var(--ko-amber-text);
}

/* ============================================================
   6. СЕКЦИИ: .ls, .ds, .ms, .cs
   ============================================================ */
.ls,
.ls.ms,
.ls.opacity,
.light-bg,
.bg-light {
	background-color: var(--ko-surface);
	color: var(--ko-fg-2);
}
.ls.ms {
	background-color: var(--ko-surface-2);
}
.ls strong,
.ds strong,
.ls b,
.ds b {
	color: var(--ko-fg-1);
}
.ls a:not(.btn),
.ds a:not(.btn) {
	color: var(--ko-fg-1);
}
.ls a:not(.btn):hover,
.ds a:not(.btn):hover {
	color: var(--ko-amber-text);
}

.ds {
	background-color: var(--ko-surface-2);
	color: var(--ko-fg-2);
}
.ds.ms {
	background-color: var(--ko-surface);
}
.ds.ms .ds.ms {
	background-color: var(--ko-surface-2);
}
.ds.bs {
	background-color: var(--ko-surface-3);
}

.cs {
	background-color: var(--ko-signal-amber);
	color: var(--ko-ink);
	--ko-fg-1: var(--ko-ink);
	--ko-fg-2: var(--ko-ink);
}
.cs h1, .cs h2, .cs h3, .cs h4, .cs h5, .cs h6,
.cs strong, .cs b,
.cs a:not(.btn) {
	color: var(--ko-ink);
}

.muted-bg {
	background-color: var(--ko-surface-2);
}
.bg-darkgrey {
	background-color: #131E25;
	color: #E7E7E2;
}
.bg-dark {
	background-color: var(--ko-ink);
	color: #E7E7E2;
}
.bg-maincolor,
.badge.bg-maincolor {
	background-color: var(--ko-signal-amber);
	color: var(--ko-ink);
}

/* полупрозрачные накладки поверх фоновых картинок */
.s-overlay.ls:before,
.s-overlay.ls.ms:before {
	background-color: var(--ko-surface);
	opacity: .82;
}
.s-overlay.ds:before {
	background-color: var(--ko-surface);
	opacity: .78;
}
.s-overlay.ds.ms:before {
	background-color: var(--ko-surface);
	opacity: .88;
}
.s-overlay.cs:before {
	background-color: var(--ko-signal-amber);
	opacity: .9;
}
.s-muted:before {
	background-color: rgba(11, 13, 16, .55);
}

.s-borderbottom {
	border-bottom: 1px solid var(--ko-border-faint);
}
.s-bordertop {
	border-top: 1px solid var(--ko-border-faint);
}

/* ============================================================
   7. ШАПКА
   ============================================================ */
.page_topline.ds {
	background-color: var(--ko-surface-3);
	border-bottom: 1px solid var(--ko-border-faint);
	color: var(--ko-fg-muted);
}
.page_topline .top-includes > li > .dropdown > a,
.page_topline .top-includes a.dropdown-toggle {
	color: var(--ko-fg-muted);
	font-family: var(--ko-font-mono);
	font-size: 13px;
	letter-spacing: .08em;
}
.page_topline .top-includes a.dropdown-toggle:hover {
	color: var(--ko-amber-text);
}
.page_topline .badge.bg-maincolor.cart-count {
	background-color: var(--ko-signal-amber);
	color: var(--ko-ink);
	font-family: var(--ko-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	border-radius: var(--ko-r-pill);
}

.page_header.ds {
	background-color: rgba(11, 13, 16, .86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ko-border-faint);
}
.page_header.affix,
.page_header_wrapper .page_header.affix {
	background-color: rgba(11, 13, 16, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--ko-border-faint);
}
.page_header .container-fluid.additional {
	border-bottom: 1px solid var(--ko-border-faint);
}

a.logo.logo_image_only img {
	width: 100%;
	max-width: 190px;
	height: auto;
}

/* Логотип как на лендингах: жёлтый прицел и белая надпись рядом. Пропорции
   взяты оттуда же — прицел 34, надпись 24 по высоте, зазор 11, — и уменьшены
   на пару пикселей, потому что шапка магазина ниже лендинговой. */
a.logo.ko-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
a.logo.ko-logo .ko-logo-mark {
	width: auto;
	height: 32px;
	flex: 0 0 auto;
}
a.logo.ko-logo .ko-logo-wordmark {
	width: auto;
	height: 22px;
	flex: 0 0 auto;
}

/* главное меню.
   Прозрачный фон нужен только горизонтальному меню в шапке. Ниже 1200 px
   родительская тема превращает .sf-menu в панель, которая выезжает на весь
   экран и имеет собственный фон. Если снять фон и там, пункты повиснут
   прозрачными поверх страницы — это и была поломка мобильного меню. */
@media (min-width: 1200px) {
	.sf-menu {
		background-color: transparent;
	}
}
nav.top-nav ul#menu-main-menu.sf-menu > li > a,
.sf-menu > li > a {
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	transition: color var(--ko-dur-fast) ease;
}
nav.top-nav ul#menu-main-menu.sf-menu > li > a:hover,
.sf-menu > li > a:hover,
.sf-menu > li.active > a,
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current_page_item > a {
	color: var(--ko-amber-text);
}

/* На экранах шире 1500 px родительская тема разгоняет пункты меню до margin 0 35px.
   Раньше это сходилось, потому что шапка шла во всю ширину экрана. Мы посадили её
   в колонку 1200 px по границам магазина, и семь пунктов в строку перестали влезать:
   надо 980 px, а есть 970. Оставляем такой же отступ, как на 1200 px. */
@media (min-width: 1500px) {
	nav.top-nav ul#menu-main-menu.sf-menu > li > a,
	.sf-menu > li > a {
		margin-left: 15px;
		margin-right: 15px;
	}
	nav.top-nav ul#menu-main-menu.sf-menu > li:first-child > a,
	.sf-menu.nav > li:first-child > a {
		margin-left: 0;
	}
	nav.top-nav ul#menu-main-menu.sf-menu > li:last-child > a,
	.sf-menu.nav > li:last-child > a {
		margin-right: 0;
	}
}
.ds .sf-menu > li .mega-menu,
.ds .sf-menu li > ul,
.ls .sf-menu > li .mega-menu,
.ls .sf-menu li > ul {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	box-shadow: var(--ko-shadow-2);
}
.sf-menu ul li > a {
	color: var(--ko-fg-muted);
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sf-menu ul li > a:hover {
	color: var(--ko-amber-text);
	background-color: var(--ko-amber-wash);
}

/* выпадашки поиска и корзины */
.dropdown-menu.ls,
.dropdown-menu {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	box-shadow: var(--ko-shadow-2);
	color: var(--ko-fg-2);
}
.dropdown-menu.ls .widget-title-div,
.dropdown-menu .widget-title-div {
	color: var(--ko-fg-muted);
}
.widget_shopping_cart .total,
.widget_shopping_cart_content .total {
	border-top: 1px solid var(--ko-border-faint);
	color: var(--ko-fg-1);
}
.widget_shopping_cart ul.cart_list li,
.widget_shopping_cart_content ul.cart_list li {
	border-bottom: 1px solid var(--ko-border-faint);
}

/* бургер */
.toggle_menu:before,
.toggle_menu span,
.toggle_menu span:before,
.toggle_menu span:after,
.ls .toggle_menu:before,
.ls .toggle_menu span,
.ls .toggle_menu span:before,
.ls .toggle_menu span:after,
.toggle_menu_side:before,
.toggle_menu_side span,
.toggle_menu_side span:before,
.toggle_menu_side span:after {
	background-color: var(--ko-fg-strong);
}
.toggle_menu:hover span,
.toggle_menu:hover span:before,
.toggle_menu:hover span:after {
	background-color: var(--ko-signal-amber);
}
/* Открытый бургер родитель заливает янтарным (--colorMain), поэтому сам
   крестик должен быть тёмным. Янтарь на янтаре делал его невидимым. */
.toggle_menu.mobile-active:before,
.toggle_menu.mobile-active span {
	background-color: var(--ko-ink);
}

/* ============================================================
   8. КНОПКИ
   ============================================================ */
.btn,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.products .product .product-button a.button {
	font-family: var(--ko-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--ko-r-sm);
	border-width: 1px;
	border-style: solid;
	transition: background var(--ko-dur-fast) ease,
		color var(--ko-dur-fast) ease,
		border-color var(--ko-dur-fast) ease,
		box-shadow var(--ko-dur-fast) ease;
}

.btn-maincolor,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
input[type="submit"],
button[type="submit"] {
	background-color: var(--ko-signal-amber);
	border-color: var(--ko-signal-amber);
	color: var(--ko-ink);
}
.btn-maincolor:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--ko-bright-amber);
	border-color: var(--ko-bright-amber);
	color: var(--ko-ink);
	box-shadow: 0 0 24px var(--ko-amber-glow);
}

.btn-outline-maincolor,
.btn-outline-maincolor2,
.btn-outline-maincolor3,
.btn-outline-darkgrey {
	background-color: transparent;
	color: var(--ko-fg-strong);
	border-color: var(--ko-border);
}
.ls .btn-outline-maincolor:hover,
.ds .btn-outline-maincolor:hover,
.cs .btn-outline-maincolor:hover,
.btn-outline-maincolor:hover,
.btn-outline-darkgrey:hover,
.ls .btn-outline-darkgrey:hover,
.ds .btn-outline-darkgrey:hover {
	background-color: transparent;
	color: var(--ko-amber-text);
	border-color: var(--ko-signal-amber);
}
.btn-outline-maincolor.only-link {
	color: var(--ko-amber-text);
}

.btn-darkgrey,
.ls.ms .btn-darkgrey,
.ds .ls .btn-darkgrey {
	background-color: var(--ko-surface-4);
	border-color: var(--ko-border);
	color: var(--ko-fg-strong);
}
.btn-darkgrey:hover {
	background-color: var(--ko-surface-4);
	border-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--ko-border);
	color: var(--ko-fg-muted);
}
.btn-secondary:hover {
	border-color: var(--ko-fg-muted);
	color: var(--ko-fg-strong);
}

.medium-btn {
	padding: 12px 22px;
}
.small-btn {
	padding: 9px 16px;
	font-size: 11px;
}

/* товарная кнопка «Читати далі / В кошик» */
.products .product .product-button a.button,
.products .product .product-button a.button.product_type_simple {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* родитель режет кнопку до 150 пикселей, из-за чего «Додати в кошик»
	   переносится на две строки; кнопка тут во всю ширину карточки */
	max-width: none;
	white-space: nowrap;
	padding: 12px 18px;
	background-color: transparent;
	border: 1px solid var(--ko-border);
	color: var(--ko-fg-strong);
}
.products .product .product-button a.button:hover {
	background-color: var(--ko-amber-wash);
	border-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}
.products .product .product-button a.added_to_cart {
	color: var(--ko-amber-text);
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ============================================================
   9. КАРТОЧКА ТОВАРА В СПИСКЕ
   ============================================================ */
.products .product .product-inner {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: var(--ko-shadow-1);
	transition: transform .2s var(--ko-ease-out),
		border-color .2s ease,
		background var(--ko-dur-med) ease,
		box-shadow .2s ease;
}
.products .product .product-inner:hover {
	background-color: var(--ko-surface-4);
	border-color: var(--ko-border);
	transform: translateY(-3px);
	box-shadow: var(--ko-shadow-2);
}
.products .product .product-img {
	position: relative;
	background-color: var(--ko-surface);
	overflow: hidden;
	border-bottom: 1px solid var(--ko-border-faint);
}
.products .product .product-img img {
	width: 100%;
	height: auto;
	display: block;
	-webkit-filter: saturate(.85) contrast(1.04);
	filter: saturate(.85) contrast(1.04);
	transition: transform .45s var(--ko-ease-out),
		-webkit-filter var(--ko-dur-med) ease;
	transition: transform .45s var(--ko-ease-out), filter var(--ko-dur-med) ease;
}
.products .product .product-inner:hover .product-img img {
	transform: scale(1.04);
	-webkit-filter: saturate(1) contrast(1.06);
	filter: saturate(1) contrast(1.06);
}
/* Порядок кусков внутри карточки задаёт родительская тема через flex-order:
   заголовок с категорией идёт первым, фото вторым, цена с кнопкой третьей.
   Карточки в ряду тянутся до общей высоты, и лишнюю высоту кто-то должен
   забрать. Раньше её забирал .wrap-header — поэтому у карточек с коротким
   названием фото уезжало вниз. Теперь заголовок и фото занимают ровно свой
   размер, растягивается нижний блок, а кнопка внутри него прижата к нижнему
   краю через margin-top: auto. Селекторы длиной в четыре-пять классов не для
   красоты: у родителя ровно такие же, и с более короткими наши правила просто
   не переспорят его. */
.products .product .product-inner .wrap-header {
	padding: 20px 22px 6px;
	flex: 0 0 auto;
}
.products .product .product-inner .product-img {
	flex: 0 0 auto;
}
.products .product .product-inner .wrap-footer {
	padding: 14px 22px 22px;
	border-top: 1px solid var(--ko-border-faint);
	margin-top: 16px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
}
.products .product .product-inner .wrap-footer .price {
	display: block;
	margin-bottom: 14px;
}
.products .product .product-inner .wrap-footer .product-button {
	margin-top: auto;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}
.products .product h3,
.products .product .woocommerce-loop-product__title {
	font-family: var(--ko-font-sans);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ko-fg-strong);
	margin: 0 0 10px;
	/* Название держит ровно две строки: короткое добивается пустой строкой,
	   длинное обрезается многоточием. Иначе шапка карточки у каждого товара
	   своей высоты, и фотографии в ряду стоят на разных уровнях. Полное
	   название видно на самой странице товара. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.products .product h3 a,
.products .product .woocommerce-loop-product__title a {
	color: var(--ko-fg-strong);
}
.products .product h3 a:hover,
.products .product .woocommerce-loop-product__title a:hover {
	color: var(--ko-amber-text);
}
.products .product .cat-product,
.products .product .cat-product a {
	font-family: var(--ko-font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
}
.products .product .cat-product a:hover {
	color: var(--ko-amber-text);
}

/* «Категорія: Equipment» и артикул под кнопкой на странице товара — та же
   служебная подпись, что и в карточке каталога, просто WooCommerce рисует её
   своими классами. Набираем так же: моно и вразрядку, иначе на одной странице
   одна и та же подпись выглядит двумя разными шрифтами. */
.single-product .posted_in,
.single-product .posted_in a,
.single-product .tagged_as,
.single-product .tagged_as a,
.single-product .sku_wrapper {
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
}

/* Блок «Схожі товари» родительская тема превращает в карусель Owl. Owl кладёт
   слайды в ряд обычными блоками, каждый по своему содержимому, поэтому карточки
   выходили разной высоты. Разворачиваем ленту слайдов во флекс — тогда слайды
   тянутся до высоты самого высокого, а карточка внутри занимает слайд целиком. */
ul.products.owl-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}
ul.products.owl-carousel .owl-item {
	display: flex;
	height: auto;
}
ul.products.owl-carousel .owl-item > li.product,
ul.products.owl-carousel .owl-item > .product {
	display: flex;
	width: 100%;
	margin-bottom: 0;
}
ul.products.owl-carousel .owl-item .product-inner {
	width: 100%;
}

/* цены */
/* .custom-text — это подписи «Ціна з ПДВ» и «Ціна без ПДВ», их дописывает
   functions.php к цене товара со скидкой. Без этой строчки подписи набирались
   гротеском, а сами цифры рядом — моно, и пара выглядела разнобоем. */
.price,
.amount,
.woocommerce-Price-amount,
.price-regular,
.price-sale,
.custom-text {
	font-family: var(--ko-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--ko-amber-text);
}
/* «114630 грн» рвать нельзя, а вот пару «старая-новая цена» переносить можно */
.amount,
.woocommerce-Price-amount {
	white-space: nowrap;
}
.price {
	word-break: normal;
	overflow-wrap: anywhere;
}
.price.with-sale-price .price-regular,
.price del,
del .amount {
	color: var(--ko-fg-muted);
	text-decoration: line-through;
}
.price.with-sale-price .price-sale,
.price ins,
ins .amount {
	color: var(--ko-amber-text);
	text-decoration: none;
	font-weight: 500;
}
.divider-price {
	color: var(--ko-border);
}
.product-price,
.product-subtotal,
.amount {
	white-space: nowrap;
}

/* бейджи */
.onsale,
span.onsale {
	background-color: var(--ko-status-alert);
	color: var(--ko-fg-strong);
	font-family: var(--ko-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--ko-r-sm);
	padding: 4px 9px;
}
.outofstock {
	opacity: .4;
	pointer-events: none;
}

/* сортировка и переключатель вида */
.woocommerce-ordering select,
.toggle_view {
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
}
.toggle_view a {
	color: var(--ko-fg-muted);
}
.toggle_view a.active,
.toggle_view a:hover {
	color: var(--ko-amber-text);
}
.woocommerce-result-count {
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--ko-fg-muted);
}

/* ============================================================
   10. СТРАНИЦА ТОВАРА
   ============================================================ */
.page_title.ds {
	background-color: var(--ko-surface);
	border-bottom: 1px solid var(--ko-border-faint);
}
.page_title h1,
.page_title h2 {
	color: var(--ko-fg-strong);
	text-transform: none;
	letter-spacing: var(--ko-track-tight);
}
.page_title [class*="container"] > .breadcrumb,
.breadcrumb {
	background-color: transparent;
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	padding-left: 0;
}
.breadcrumb-item a,
.woocommerce-breadcrumb a {
	color: var(--ko-fg-muted);
}
.breadcrumb-item a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--ko-amber-text);
}
.breadcrumb-item.active {
	color: var(--ko-amber-text);
}
.breadcrumb-item + .breadcrumb-item::before {
	color: var(--ko-border);
}
.woocommerce-breadcrumb {
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	margin-bottom: 26px;
}

.woocommerce-product-gallery {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	overflow: hidden;
}
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}
/* Превьюшки под большим фото. Родительская тема раскладывает их flex-ом
   с justify-content: space-between и шириной 24 % на штуку. При четырёх
   превью строка сходится, а при двух они разъезжаются к краям, и между
   ними дыра во всю ширину. Переводим на обычную раскладку слева направо:
   ровно четыре в ряд, промежуток 5 px, остальные переносятся на строку
   ниже тем же размером. */
.product .woocommerce-product-gallery .flex-control-nav,
.product .flex-control-nav {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
	margin-left: 0;
	margin-right: 0;
}
.product .woocommerce-product-gallery .flex-control-nav li {
	background-color: transparent;
	width: calc(25% - 3.75px);
	padding: 0;
	margin: 0;
}
.product .woocommerce-product-gallery .flex-control-nav li + li {
	margin-left: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-sm);
	opacity: .6;
	transition: opacity var(--ko-dur-fast) ease,
		border-color var(--ko-dur-fast) ease;
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--ko-signal-amber);
}

.summary.entry-summary .product_meta,
.product_meta {
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ko-border-faint);
	margin-bottom: 18px;
}
.product_meta a {
	color: var(--ko-fg-muted);
}
.product_meta a:hover {
	color: var(--ko-amber-text);
}
.summary.entry-summary p.price,
.summary.entry-summary .price {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 400;
	color: var(--ko-amber-text);
	line-height: 1.1;
}
.woocommerce-product-details__short-description {
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--ko-fg-2);
}

/* наличие */
p.stock {
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 9px 14px;
	border-radius: var(--ko-r-sm);
	border-left-width: 2px;
	border-left-style: solid;
}
p.stock.in-stock {
	background: rgba(74, 222, 128, .07);
	border-left-color: var(--ko-status-live);
	color: var(--ko-status-live);
	margin-bottom: 20px;
}
p.stock.available-on-backorder {
	background: var(--ko-amber-wash);
	border-left-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}
p.stock.out-of-stock {
	background: rgba(229, 72, 77, .08);
	border-left-color: var(--ko-status-alert);
	color: var(--ko-status-alert);
	margin-bottom: 20px;
}

/* вкладки описания */
.woocommerce-tabs ul.tabs.wc-tabs {
	border-bottom: 1px solid var(--ko-border-faint);
	padding: 0;
	margin: 40px 0 0;
}
.woocommerce-tabs ul.tabs.wc-tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 22px 0 0;
}
.woocommerce-tabs ul.tabs.wc-tabs li a,
.woocommerce-tabs ul.tabs.wc-tabs li.active a,
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: transparent;
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--ko-fg-muted);
	padding: 12px 0;
	min-width: 0;
	margin: 0;
	width: auto;
	display: inline-block;
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a,
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: var(--ko-amber-text);
	border-bottom-color: var(--ko-signal-amber);
}
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel {
	background: transparent;
	box-shadow: none;
	padding: 26px 0 0;
	color: var(--ko-fg-2);
}
[role="tablist"] .card-header,
[role="tablist"] .card-body,
.tab-content,
.nav-tabs .nav-link {
	background-color: var(--ko-surface-2);
	border-color: var(--ko-border-faint);
	color: var(--ko-fg-2);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	background-color: var(--ko-surface-4);
	border-color: var(--ko-border-faint);
	color: var(--ko-amber-text);
}
.panel-title > a,
.panel-title > a.collapsed {
	background-color: var(--ko-surface-2);
	color: var(--ko-fg-1);
	border-color: var(--ko-border-faint);
}
.panel-title > a:hover,
.panel-title > a.collapsed:hover {
	background-color: var(--ko-surface-4);
	color: var(--ko-amber-text);
}

/* количество */
.quantity input.qty,
.quantity .input-text {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	color: var(--ko-fg-strong);
	font-family: var(--ko-font-mono);
	border-radius: var(--ko-r-sm);
}

/* ============================================================
   11. САЙДБАР И ВИДЖЕТЫ
   ============================================================ */
.column-sidebar .widget,
.widget-theme-wrapper .widget {
	color: var(--ko-fg-2);
}
.column-sidebar .widget-theme-wrapper:not(.widget_no_background) {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	padding: 24px 24px 26px;
}
.widget + .widget {
	margin-top: 34px;
}

ul.product-categories,
.widget_nav_menu ul.menu,
.widget_categories ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
ul.product-categories li.cat-item,
.widget_nav_menu ul.menu > li,
.widget_categories ul > li {
	border-bottom: 1px solid var(--ko-border-faint);
}
ul.product-categories li.cat-item:last-child,
.widget_nav_menu ul.menu > li:last-child {
	border-bottom: 0;
}
ul.product-categories li.cat-item > a,
.widget_nav_menu ul.menu > li > a,
.widget_categories ul > li > a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
	color: var(--ko-fg-2);
	transition: color var(--ko-dur-fast) ease,
		padding-left var(--ko-dur-fast) ease;
}
ul.product-categories li.cat-item > a:hover,
.widget_nav_menu ul.menu > li > a:hover,
.widget_categories ul > li > a:hover {
	color: var(--ko-amber-text);
	padding-left: 6px;
}
ul.product-categories li.cat-item.current-cat > a {
	color: var(--ko-amber-text);
}

/* виджет контактов */
.icons-list ul.list-bordered > li {
	border-bottom: 1px solid var(--ko-border-faint);
	padding: 12px 0;
}
.icons-list ul.list-bordered.no-top-border > li:first-child {
	padding-top: 0;
}
.icons-list ul.list-bordered.no-bottom-border > li:last-child {
	border-bottom: 0;
}
.icons-list i.color-main,
i.color-main {
	color: var(--ko-amber-text);
}
.icons-list strong.color-darkgrey a {
	color: var(--ko-fg-strong);
	font-weight: 500;
}
.icons-list strong.color-darkgrey a:hover {
	color: var(--ko-amber-text);
}

/* фильтр по цене */
.ui-slider,
.price_slider {
	background-color: var(--ko-border-faint);
}
.ui-slider .ui-slider-range,
.price_slider .ui-slider-range {
	background-color: var(--ko-signal-amber);
}
.ui-slider .ui-slider-handle,
.ds .ui-slider .ui-slider-handle {
	background-color: var(--ko-signal-amber);
	border: 0;
}

/* календарь */
.widget_calendar table thead,
.widget_calendar thead,
[class*="-block-calendar"] thead,
[class*="-block-calendar"] table th,
.ds .widget_calendar table thead {
	background-color: var(--ko-surface-4);
	color: var(--ko-fg-strong);
}
.widget_calendar tbody,
[class*="-block-calendar"] tbody {
	background-color: var(--ko-surface-2);
}

/* ============================================================
   12. ФОРМЫ
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.form-control,
.ls.ms input[type="text"],
.ls.ms input[type="email"],
.ls.ms input[type="url"],
.ls.ms input[type="password"],
.ls.ms textarea,
.ls.ms select,
.ls.ms .form-control,
.ls.ms .tab-content .form-control {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-sm);
	color: var(--ko-fg-strong);
	font-family: var(--ko-font-sans);
	font-size: 15px;
	padding: 11px 13px;
	box-shadow: none;
	transition: border-color var(--ko-dur-fast) ease;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
	background-color: var(--ko-surface-2);
	border-color: var(--ko-signal-amber);
	color: var(--ko-fg-strong);
	outline: none;
	box-shadow: none;
}
::-webkit-input-placeholder { color: var(--ko-fg-muted); }
::-moz-placeholder { color: var(--ko-fg-muted); opacity: 1; }
:-ms-input-placeholder { color: var(--ko-fg-muted); }
::placeholder { color: var(--ko-fg-muted); opacity: 1; }

/* у select родитель рисует стрелку картинкой справа — оставляем ей место */
select {
	padding-right: 34px;
}

select option,
.form-control option {
	background-color: var(--ko-surface-2);
	color: var(--ko-fg-strong);
}

label,
.cf-label {
	font-family: var(--ko-font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ko-fg-muted);
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
	border-color: var(--ko-border);
	background-color: var(--ko-surface-2);
}
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
	background-color: var(--ko-signal-amber);
	border-color: var(--ko-signal-amber);
}

/* поиск товаров */
form.woocommerce-product-search {
	position: relative;
}
form.woocommerce-product-search input.search-field.form-control {
	font-family: var(--ko-font-mono);
	font-size: 13.5px;
	letter-spacing: .04em;
}
/* кнопка поиска — это иконка-лупа: родитель прячет текст (font-size: 0) и рисует глиф
   через :after, так что фон, рамка и отступы обычной кнопки тут только мешают */
.widget_search button,
.widget_product_search button,
.widget_mailchimp button,
.widget_mc4wp_form_widget button,
form.woocommerce-product-search button[type="submit"],
form.search-form button[type="submit"] {
	background: transparent;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	box-shadow: none;
	color: var(--ko-fg-muted);
}
.widget_search button:hover,
.widget_product_search button:hover,
.widget_mailchimp button:hover,
.widget_mc4wp_form_widget button:hover,
form.woocommerce-product-search button[type="submit"]:hover,
form.search-form button[type="submit"]:hover {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	color: var(--ko-amber-text);
}

/* ============================================================
   13. ТАБЛИЦЫ И СПИСКИ
   ============================================================ */
table {
	width: 100%;
	border-collapse: collapse;
	color: var(--ko-fg-2);
}
table th {
	font-family: var(--ko-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: var(--ko-track-label);
	text-transform: uppercase;
	color: var(--ko-fg-muted);
	background-color: var(--ko-surface-3);
	text-align: left;
}
table td,
table th {
	padding: 11px 14px;
	border: 1px solid var(--ko-border-faint);
}
table tr:nth-child(odd) td {
	background-color: var(--ko-zebra);
}
.shop_attributes th,
.woocommerce-product-attributes-item__label {
	color: var(--ko-fg-muted);
	font-weight: 500;
}
.shop_attributes td,
.woocommerce-product-attributes-item__value {
	color: var(--ko-fg-strong);
}

ul, ol {
	color: var(--ko-fg-2);
}

/* пагинация */
.page-item > span,
.page-item > a,
.nav-links > span,
.nav-links > a,
.page-links > span,
.page-links > a {
	background-color: var(--ko-surface-2) !important;
	border: 1px solid var(--ko-border-faint) !important;
	color: var(--ko-fg-2) !important;
	font-family: var(--ko-font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	border-radius: var(--ko-r-sm) !important;
}
.page-item > a:hover,
.nav-links > a:hover,
.page-links > a:hover,
.page-item.active > span,
.page-item.active > a,
.nav-links > span.current,
.page-links > span {
	background-color: var(--ko-signal-amber) !important;
	border-color: var(--ko-signal-amber) !important;
	color: var(--ko-ink) !important;
}

/* ============================================================
   14. КОРЗИНА, ОФОРМЛЕНИЕ, КАБИНЕТ
   ============================================================ */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	overflow: hidden;
}
.woocommerce table.shop_table th {
	background-color: var(--ko-surface-3);
	color: var(--ko-fg-muted);
}
.woocommerce table.shop_table td {
	border-color: var(--ko-border-faint);
	color: var(--ko-fg-2);
}
.woocommerce table.shop_table td.product-name a {
	color: var(--ko-fg-strong);
}
.woocommerce table.shop_table td.product-name a:hover {
	color: var(--ko-amber-text);
}
.cart_totals h2,
.cross-sells h2,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ko-fg-strong);
}
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	background-color: var(--ko-surface-2);
	border: 0;
	border-top: 2px solid var(--ko-signal-amber);
	border-radius: var(--ko-r-sm);
	color: var(--ko-fg-2);
}
.woocommerce-error {
	border-top-color: var(--ko-status-alert);
}
.woocommerce-message {
	border-top-color: var(--ko-status-live);
}
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--ko-amber-text);
}
.woocommerce-MyAccount-navigation ul li a {
	color: var(--ko-fg-2);
	border-bottom: 1px solid var(--ko-border-faint);
	display: block;
	padding: 10px 0;
	font-family: var(--ko-font-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--ko-amber-text);
}

/* ============================================================
   15. ПОДВАЛ
   ============================================================ */
footer.page_footer.ds.ms {
	background-color: var(--ko-surface-3);
	border-top: 1px solid var(--ko-border-faint);
	color: var(--ko-fg-2);
}
footer.page_footer a {
	color: var(--ko-fg-2);
}
footer.page_footer a:hover {
	color: var(--ko-amber-text);
}
.page_footer .widget_bloginfo .icons-list ul li .icon-inline {
	justify-content: flex-start !important;
}
.page_footer ul.product-categories li.cat-item > a,
.page_footer .widget_nav_menu ul.menu > li > a {
	font-size: 14px;
	padding: 7px 0;
}
/* родитель прячет лишние отступы своих списков через overflow:hidden плюс отрицательные
   margin у ul (-15px, -16px, -20px). Отступы у нас теперь свои и меньше, поэтому такая
   обрезка съедала бы текст крайних пунктов — снимаем и обрезку, и отрицательные margin */
.page_footer .widget_bloginfo .icons-list,
.page_footer .widget_nav_menu div,
.page_footer .widget_archive div,
.page_footer .widget_categories div,
.page_footer .widget_meta div,
.page_footer .widget_pages div,
.page_footer .widget_product_categories {
	overflow: visible;
}
.page_footer .widget_bloginfo .icons-list ul,
.page_footer .widget_nav_menu div > ul,
.page_footer .widget_archive div > ul,
.page_footer .widget_categories div > ul,
.page_footer .widget_meta div > ul,
.page_footer .widget_pages div > ul,
.page_footer .widget_product_categories > ul {
	margin-top: 0;
	margin-bottom: 0;
}

section.page_copyright.ds,
.page_copyright.copyright1.ds {
	background-color: var(--ko-surface);
	border-top: 1px solid var(--ko-border-faint);
	font-family: var(--ko-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--ko-fg-muted);
}
.page_copyright a {
	color: var(--ko-fg-muted);
}
.page_copyright a:hover {
	color: var(--ko-amber-text);
}

#toTop,
.toTop {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	color: var(--ko-fg-strong);
	border-radius: var(--ko-r-sm);
}
#toTop:hover,
.toTop:hover {
	border-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}

/* ============================================================
   16. КАРУСЕЛИ, МОДАЛКИ, ПРОЧЕЕ
   ============================================================ */
.owl-carousel .owl-dots .owl-dot span,
.ds .owl-theme .owl-dots .owl-dot span {
	background-color: var(--ko-border);
	border-radius: 0;
	width: 18px;
	height: 3px;
	transition: background var(--ko-dur-med) ease;
}
.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span,
.ds .owl-theme .owl-dots .owl-dot.active span {
	background-color: var(--ko-signal-amber);
}
.owl-carousel .owl-nav > div,
.post-thumbnail .owl-nav > div,
.widget_popular_entries .owl-carousel .owl-nav > div {
	background-color: rgba(11, 13, 16, .6);
	border: 1px solid var(--ko-border);
	color: var(--ko-fg-strong);
	border-radius: 50%;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.owl-carousel .owl-nav > div:hover {
	border-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}

.flex-control-paging li a {
	background-color: var(--ko-border);
}
.flex-control-paging li a:hover,
.flex-control-paging li a.flex-active {
	background-color: var(--ko-signal-amber);
}

.modal-content {
	background-color: var(--ko-surface-2);
	border: 1px solid var(--ko-border-faint);
	border-radius: var(--ko-r-md);
	color: var(--ko-fg-2);
}
.modal-backdrop.show {
	background-color: var(--ko-surface);
}
#search_modal,
#search_modal .widget {
	background-color: var(--ko-surface);
	color: var(--ko-fg-2);
}

.preloader {
	background: var(--ko-surface);
}
.preloader_image {
	border-color: var(--ko-signal-amber);
}

.progress {
	background-color: var(--ko-border-faint);
}
.progress-bar {
	background-color: var(--ko-signal-amber);
}

.divider-line,
.fw-divider-line {
	border-color: var(--ko-border-faint);
}

a.bg-icon,
.ds a.bg-icon,
a.color-bg-icon {
	background-color: var(--ko-surface-4);
	color: var(--ko-fg-strong);
}
a.bg-icon:hover,
a.color-bg-icon:hover {
	background-color: var(--ko-signal-amber);
	color: var(--ko-ink);
}
a.border-icon {
	border-color: var(--ko-border);
	color: var(--ko-fg-muted);
}
a.border-icon:hover {
	border-color: var(--ko-signal-amber);
	color: var(--ko-amber-text);
}

.media-links:before {
	background-color: rgba(11, 13, 16, .5);
}
.embed-responsive-3by2:before,
.embed-responsive-21by9:before {
	background-color: rgba(11, 13, 16, .6);
}

/* карточки конструктора */
.icon-box,
.teaser,
.side-item {
	color: var(--ko-fg-2);
}
.icon-box .fontsize_50,
.icon-box i,
.teaser i {
	color: var(--ko-amber-text);
}

/* поверх старого child-правила */
ul.additional_nav {
	display: none !important;
}

/* ============================================================
   17. АДАПТИВ
   ============================================================ */
@media (max-width: 1199px) {
	.container-fluid.additional {
		display: none;
	}
	ul.additional_nav {
		display: block !important;
	}
	/* Мобильное меню. Родительская тема делает из .sf-menu панель на весь
	   экран: она приклеена к краям (position: fixed), уезжает вправо за
	   границу окна и возвращается по классу .mobile-active. Мы её не
	   переделываем, а только перекрашиваем — иначе панель разваливается.
	   Панель лежит внутри .page_header, а там токены тёмные, поэтому она
	   выходит тёмной со светлым текстом — заодно совпадает с шапкой. */
	.top-nav .sf-menu {
		background-color: var(--ko-surface);
		border-top: 50px solid var(--ko-surface-3);
		padding: 20px 20px 24px;
	}
	nav.top-nav ul#menu-main-menu.sf-menu > li > a,
	.top-nav .sf-menu > li > a {
		color: var(--ko-fg-1);
		font-size: 14px;
		letter-spacing: .1em;
		padding: 15px 4px;
	}
	nav.top-nav ul#menu-main-menu.sf-menu > li > a:hover,
	.top-nav .sf-menu > li > a:hover {
		color: var(--ko-amber-text);
	}
	.top-nav .sf-menu > li + li {
		border-top: 1px solid var(--ko-border-faint);
	}
}

@media (max-width: 991px) {
	.products .product .product-inner .wrap-header {
		padding: 16px 18px 6px;
	}
	.products .product .product-inner .wrap-footer {
		padding: 12px 18px 18px;
	}
	.products .product h3,
	.products .product .woocommerce-loop-product__title {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 15px;
	}
	h1, .h1 {
		font-size: clamp(28px, 8vw, 38px);
	}
	h2, .h2 {
		font-size: clamp(24px, 6.5vw, 30px);
	}
	.summary.entry-summary p.price,
	.summary.entry-summary .price {
		font-size: 26px;
	}
	.woocommerce-tabs ul.tabs.wc-tabs li {
		margin-right: 16px;
	}
	table td,
	table th {
		padding: 9px 10px;
		font-size: 13px;
	}
}

@media (max-width: 575px) {
	a.logo.logo_image_only img {
		max-width: 150px;
	}
	a.logo.ko-logo {
		gap: 8px;
	}
	a.logo.ko-logo .ko-logo-mark {
		height: 26px;
	}
	a.logo.ko-logo .ko-logo-wordmark {
		height: 18px;
	}
	.page_topline .top-includes {
		gap: 14px;
	}
	.products .product .product-button a.button {
		font-size: 11px;
		letter-spacing: .1em;
		padding: 11px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*:before,
	*:after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}