/**
 * Product card — «Дом и Сад» design tokens.
 *
 * Palette, card/button radius, shadow, transition and badge radius are already wired up
 * via the Customizer (Global Colors, Buttons/Forms radius) and the "Дом и Сад: единый
 * стиль" Additional CSS block (--shadow-card, --shadow-card-hover, --transition,
 * --hover-lift, --radius-badge, plus the card's shadow/radius/padding rules themselves).
 * This file only adds the aliases and rules that connect: heading/body font, the ink/
 * accent colour roles, and the card-internal elements those don't reach yet (title, price,
 * old price, sale/stock badge, button rest-state colour).
 *
 * Two rule sets per property because the same card renders through two different markups
 * on this site: the classic WooCommerce loop (shop/category archives) and the Product
 * Collection block (used on the homepage, e.g. "Новые поступления"). Same tokens, same
 * visual result, different class names. Element order and markup are untouched — cosmetic
 * only.
 */

:root {
	--font-heading: 'IBM Plex Serif', Georgia, serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--accent: var( --theme-palette-color-2 );
	--accent-light: var( --theme-palette-color-1 );
	--ink: var( --theme-palette-color-4 );
	--ink-soft: var( --theme-palette-color-3 );
	--paper: var( --theme-palette-color-8 );

	--space-2: 8px;
}

/* Card background — the theme leaves this transparent */
.woocommerce ul.products li.product,
.wc-block-product-template .wc-block-product {
	background: var( --paper );
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template .wc-block-product .wp-block-post-title {
	font-family: var( --font-body );
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	color: var( --ink );
}
/* The block card's title carries WordPress's own "has-medium-font-size" utility class,
   which core CSS sets with !important (20px) -- only !important beats !important, so the
   rule above's font-size is silently ignored there without this. */
.wc-block-product-template .wc-block-product .wp-block-post-title {
	font-size: 16px !important;
}

/* Price — heading font, accent colour; old price is secondary and struck through */
.woocommerce ul.products li.product .price,
.wc-block-product-template .wc-block-product .wc-block-components-product-price {
	font-family: var( --font-heading );
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var( --accent-light );
}
.woocommerce ul.products li.product .price del,
.wc-block-product-template .wc-block-product .wc-block-components-product-price del {
	font-family: var( --font-body );
	font-weight: 400;
	font-size: 15px;
	color: var( --ink-soft );
	margin-right: var( --space-2 );
}

/* Sale / out-of-stock badge — theme defaults it to the hover accent, tokens call for the
   button accent instead so the badge and "В корзину" read as the same colour */
.woocommerce ul.products li.product :is( .onsale, .out-of-stock-badge ),
.wc-block-product-template .wc-block-product .wc-block-components-product-sale-badge {
	background-color: var( --accent );
	color: var( --paper );
}

/* Add-to-cart button rest state — hover to --accent-light already set in Additional CSS */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.wc-block-product-template .wc-block-product .wc-block-components-product-button__button {
	background: var( --accent );
}