/**
 * Site-wide design system: header colours, card shadow/radius, price and stock
 * typography, quantity stepper.
 *
 * Moved here from the Customizer's Additional CSS field (wp_options
 * `theme_mods_blocksy` -> `custom_css_post_id`), which lived only in the database and
 * did not travel with `deploy-code.sh` — every change had to be re-applied by hand on
 * the production database. This file now is that single source of truth; the
 * Additional CSS field itself has been emptied out to a pointer comment.
 *
 * The 8 palette colours themselves (--theme-palette-color-1..8) are intentionally
 * NOT redefined here — they stay in Customizer > Global Colors (theme_mods_blocksy
 * `colorPalette`), which is what every other Customizer colour picker on the site
 * reads from. Hardcoding them here would fight that UI: a future palette change made
 * in the Customizer would appear to do nothing wherever this file's copy takes
 * priority. Current values, for reference only (not enforced by this file):
 *   1 #227f53   2 #760b34   3 #405d4f   4 #103428
 *   5 #bbc4bc   6 #dee5df   7 #f0f5f1   8 #ffffff
 */

/* ---------- Шапка: сплошной тёмный фон, светлый текст и иконки ---------- */
#header [data-row="middle"],
#header > [data-device] {
	background-color: var( --theme-palette-color-4, #17383e ) !important;
}
#header [data-row="middle"] {
	--theme-text-color: #ffffff;
	--theme-icon-color: #ffffff;
	--theme-link-initial-color: #ffffff;
}
#header .site-title a,
#header [data-id="menu"] > ul > li > a,
#header .ct-header-text,
#header .ct-header-text a {
	color: #ffffff !important;
}
#header [data-id="menu"] > ul > li > a:hover,
#header .ct-header-text a:hover {
	color: var( --theme-palette-color-1, #d27c61 ) !important;
}

/* Меню — фирменный шрифт заголовков */
#header .site-title a,
#header [data-id="menu"] > ul > li > a {
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-weight: 700;
	letter-spacing: 0.01em;
}
#header .site-title a { font-size: 26px; }
#header [data-id="menu"] > ul > li > a { font-size: 15px; }

/* Выпадающее меню: тёмная подложка темы + светлые пункты */
#header .sub-menu .ct-menu-link {
	color: #ffffff !important;
	font-size: 14px;
}
#header .sub-menu .ct-menu-link:hover {
	color: var( --theme-palette-color-1, #d27c61 ) !important;
}

/* Иконки корзины и аккаунта — яркие и контрастные */
#header [data-id="cart"],
#header [data-id="account"] {
	--theme-icon-size: 22px;
	--theme-icon-color: #ffffff;
}
#header [data-id="cart"] svg,
#header [data-id="account"] svg {
	fill: #ffffff !important;
	color: #ffffff !important;
	opacity: 1 !important;
}
#header [data-id="cart"]:hover svg,
#header [data-id="account"]:hover svg {
	fill: var( --theme-palette-color-1, #d27c61 ) !important;
}
/* счётчик товаров в корзине */
#header [data-id="cart"] .ct-cart-badge,
#header [data-id="cart"] [class*="badge"] {
	background-color: var( --theme-palette-color-1, #d27c61 ) !important;
	color: #ffffff !important;
}

/* Тёмный баннер заголовка (type-2) — светлый текст */
.hero-section[data-type="type-2"] .page-title,
.hero-section[data-type="type-2"] .ct-breadcrumbs,
.hero-section[data-type="type-2"] .ct-breadcrumbs a,
.hero-section[data-type="type-2"] .ct-breadcrumbs span,
.hero-section[data-type="type-2"] .ct-breadcrumbs .ct-separator {
	color: var( --theme-palette-color-8, #ffffff ) !important;
}
.hero-section[data-type="type-2"] .ct-breadcrumbs a:hover {
	color: var( --theme-palette-color-1, #d27c61 ) !important;
}

/* Встроенные крошки на карточке товара (светлый фон) — тёмный текст */
.hero-section[data-type="type-1"] .ct-breadcrumbs,
.hero-section[data-type="type-1"] .ct-breadcrumbs span,
.hero-section[data-type="type-1"] .ct-breadcrumbs .ct-separator {
	color: var( --theme-palette-color-3, #395155 ) !important;
}
.hero-section[data-type="type-1"] .ct-breadcrumbs a {
	color: var( --theme-palette-color-4, #17383e ) !important;
}
.hero-section[data-type="type-1"] .ct-breadcrumbs a:hover {
	color: var( --theme-palette-color-2, #bc5d40 ) !important;
}

/* Текущая страница в крошках — акцентный цвет, чтобы её было видно среди ссылок.
   Селекторы продублированы под .hero-section[data-type], иначе правила выше
   (0,3,1) перебивают этот блок по специфичности даже с !important. */
.ct-breadcrumbs .last-item,
.ct-breadcrumbs .last-item span,
.hero-section[data-type="type-1"] .ct-breadcrumbs .last-item,
.hero-section[data-type="type-1"] .ct-breadcrumbs .last-item span {
	color: var( --theme-palette-color-2, #bc5d40 ) !important;
	font-weight: 600;
}
/* На тёмном баннере тот же акцент, но светлее — #bc5d40 на #17383e не читается */
.hero-section[data-type="type-2"] .ct-breadcrumbs .last-item,
.hero-section[data-type="type-2"] .ct-breadcrumbs .last-item span {
	color: var( --theme-palette-color-1, #d27c61 ) !important;
}

/* ---------- Токены редизайна: тени, переходы, типографика ---------- */
:root {
	--field-bg: var( --theme-palette-color-6 );
	--shadow-card: 0 1px 2px rgba( 16, 52, 40, .06 ), 0 10px 30px -14px rgba( 16, 52, 40, .22 );
	--shadow-card-hover: 0 6px 14px rgba( 16, 52, 40, .10 ), 0 22px 48px -18px rgba( 16, 52, 40, .32 );
	--transition: 180ms ease;
	--hover-lift: -3px;
	--radius-badge: 6px;

	/* Производные и статусные токены, вне 8 палитровых слотов темы */
	--accent-hover: #8d2647;
	--accent-active: #550c26;
	--border-strong: #778479;
	--error: #0052ab;
	--discount-bg: var( --theme-palette-color-4 );
	--discount-text: #ffffff;
}

/* ошибка валидации формы — синяя, слот 2 занят кнопкой «В корзину» */
.woocommerce-error,
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var( --error ) !important;
}
.woocommerce-error, .woocommerce-message.error {
	color: var( --error );
}

/* «в наличии» / «нет в наличии» — без цвета, начертанием и значком */
.woocommerce .stock.in-stock {
	color: var( --theme-palette-color-4 );
	font-weight: 700;
}
.woocommerce .stock.in-stock::before { content: "✓ "; }
.woocommerce .stock.out-of-stock {
	color: var( --theme-palette-color-3 );
	font-weight: 400;
}
.woocommerce .stock.out-of-stock::before { content: "− "; }

/* карточка товара в каталоге WooCommerce */
.woocommerce ul.products li.product {
	box-shadow: var( --shadow-card );
	transition: box-shadow var( --transition ), transform var( --transition );
	border-radius: 12px;
	overflow: hidden;
	padding: 12px 12px 20px;
}
.woocommerce ul.products li.product figure {
	margin: 0 0 14px;
	border-radius: var( --radius-badge );
	overflow: hidden;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var( --shadow-card-hover );
	transform: translateY( var( --hover-lift ) );
}
.woocommerce ul.products li.product .onsale {
	border-radius: var( --radius-badge );
	background: var( --discount-bg );
	color: var( --discount-text );
}
.woocommerce a.button, .woocommerce button.button { transition: background var( --transition ); }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var( --accent-hover ); }
.woocommerce a.button:active, .woocommerce button.button:active { background: var( --accent-active ); }

/* Цена товара в каталоге: заголовочный шрифт вместо системного, тот же цвет, что у основного текста */
.woocommerce ul.products li.product .price {
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-weight: 700;
	font-size: var( --product-price, 30px );
	line-height: 1.2;
	color: var( --theme-palette-color-4 );
}
.woocommerce ul.products li.product .price del {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var( --theme-palette-color-3 );
	opacity: 1;
	text-decoration: line-through;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
}

/* Outline-кнопки (Gutenberg is-style-outline) с вручную заданным цветом текста через
   редактор: WordPress генерирует .has-*-color с !important, а hover-правило Blocksy
   (.is-style-outline:hover { color: var(--theme-button-text-hover-color) }) идёт без
   !important -- проигрывает и не может перебить цвет текста при наведении. Из-за этого
   фон темнеет (правило Blocksy на фон отрабатывает), а текст остаётся тёмным поверх
   тёмного фона. Пример -- кнопка "О компании" на главной. */
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
	color: var( --theme-button-text-hover-color, #ffffff ) !important;
}

/* Типографика: плотнее межстрочный интервал заголовков, трекинг на h1-h3 */
h1, h2, h3, h4, h5 { line-height: 1.2; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* Та же карточка товара, но для блока "Коллекция товаров" (Гутенберг) --
   у него другая разметка (li.wc-block-product) и нет предка .woocommerce,
   поэтому правила выше его не касаются. Используется на главной в блоке
   "Новые поступления" и в любом другом месте сайта, где стоит этот блок. */
.wc-block-product-template .wc-block-product {
	box-shadow: var( --shadow-card );
	transition: box-shadow var( --transition ), transform var( --transition );
	border-radius: 12px;
	overflow: hidden;
	padding: 12px 12px 20px;
	background: var( --theme-palette-color-8, #ffffff );
}
.wc-block-product-template .wc-block-product:hover {
	box-shadow: var( --shadow-card-hover );
	transform: translateY( var( --hover-lift ) );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-image {
	margin: 0 0 14px;
	border-radius: var( --radius-badge );
	overflow: hidden;
}
.wc-block-product-template .wc-block-product .wc-block-components-product-sale-badge {
	border-radius: var( --radius-badge );
	background: var( --discount-bg );
	color: var( --discount-text );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button {
	transition: background var( --transition );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button:hover {
	background: var( --accent-hover );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button:active {
	background: var( --accent-active );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-price {
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-weight: 700;
	font-size: var( --product-price, 30px );
	line-height: 1.2;
	color: var( --theme-palette-color-4 );
}
.wc-block-product-template .wc-block-product .wc-block-components-product-price del {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var( --theme-palette-color-3 );
	opacity: 1;
	text-decoration: line-through;
}
.wc-block-product-template .wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
	font-weight: 700;
}

/* Классический счётчик количества (страница товара и везде, где Blocksy рисует
   .quantity[data-type="type-2"]) под тот же "пилюльный" вид, что уже сделан для
   степпера в блоке корзины (wp-shop-customizations/assets/cart.css) -- через
   переменные, которые сама тема читает для этого виджета, не трогая её
   абсолютное позиционирование кнопок внутри поля. */
/* --quantity-initial-color also feeds the input's own border colour
   (`--theme-form-field-border-initial-color: var(--quantity-initial-color, var(--theme-button-background-initial-color))`
   in Blocksy's woocommerce.min.css) -- with no value here it fell through to the button
   accent, orange, instead of a neutral border like the cart stepper's. */
.quantity[data-type="type-2"] {
	--quantity-initial-color: var( --theme-palette-color-5, #E4E0DA );
}
.quantity[data-type="type-2"] input[type="number"] {
	border-radius: 999px !important;
	color: var( --theme-palette-color-4, #103428 );
	font-weight: 600;
}
/* Blocksy pins --quantity-initial-color to transparent with a rule targeting
   .ct-increase/.ct-decrease directly ((0,3,0), same as ours) -- setting our colour on the
   .quantity ancestor only reaches the input above, not these; a rule declared directly on
   an element always beats an inherited value regardless of the ancestor rule's specificity.
   Matching Blocksy's own selector here is what makes the button-background override land. */
.quantity[data-type="type-2"] .ct-increase,
.quantity[data-type="type-2"] .ct-decrease {
	--quantity-initial-color: var( --theme-palette-color-6, #F5F2EE );
	/* Same tint on hover as at rest, matching the cart stepper's hover (background stays put,
	   only the icon colour shifts) instead of a heavier solid-fill hover. */
	--quantity-hover-color: var( --theme-palette-color-6, #F5F2EE );
	--quantity-arrows-initial-color: var( --theme-palette-color-3, #34564c );
	--quantity-arrows-hover-color: var( --theme-palette-color-1, #ee6c2b );
	border-radius: 50% !important;
	transition: background var( --transition ), color var( --transition );
}