/* Мост «krom → дизайн-система bruleur».
   Страницы krom (карточка товара, каталог, корзина, кабинет) написаны на токенах krom (--page, --panel, --line, --chip, --mono, --s*, --r-*).
   Здесь эти имена получают значения дизайн-системы bruleur (макет /design/): Inter вместо моноширинного, серые заливки вместо линий,
   радиусы 6 / 8 / 12. Страница остаётся скелетом krom, а выглядит как bruleur. */
:root {
	--page: var(--surface, #fff); --panel: var(--surface, #fff);
	--dim: var(--muted, #8e93a0); --faint: #b0b4be;
	--line: var(--surface-3, #e7eaee); --chip: var(--surface-2, #f3f4f6);
	--grey-hi: var(--surface-3, #e7eaee); --grey-lo: #d9dde2;
	--dark: var(--ink, #0b0c0f); --dark-ink: #fff;
	--sans: var(--font-sans, "Inter", system-ui, sans-serif);
	--mono: var(--font-sans, "Inter", system-ui, sans-serif);
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;
	--r-sm: var(--radius-sm, 6px); --r-md: var(--radius-md, 8px); --r-lg: var(--radius-lg, 12px); --r-pill: 999px;
	--edge: 0px; --rail: 0px;
	--fold-t: .24s; --fold-ease: cubic-bezier(.4, 0, .2, 1);
	/* Токены, без которых блоки главной (подбор форсунки, доставка) теряли высоту кнопок и шрифты; значения — как в krom-ui.css. */
	--h-sm: 32px; --h-md: 40px; --h-lg: 52px; --t-fast: .15s;
	--focus: 0 0 0 2px var(--page), 0 0 0 4px var(--ink);
	--sh-card: 0 1px 2px rgba(10,12,14,.03), 0 6px 18px rgba(10,12,14,.03);
	--sh-pop: 0 12px 32px rgba(0,0,0,.14);
	--f-block: 500 15px/1.3 var(--mono); --f-desc: 400 13.5px/1.75 var(--sans); --f-name: 500 13px/1.4 var(--sans);
	--f-small: 400 12px/1.5 var(--mono); --f-section: 600 11px/1 var(--mono); --f-button: 600 11px/1 var(--mono);
	--f-label: 500 9.5px/1 var(--mono);
}
/* Высота верхней панели: на телефоне её задаёт bruleur.css (56px, мобильное меню); здесь — только компьютер.
   Раньше --topbar: 0px стоял в общем :root и, будучи подключён позже, обнулял панель на телефоне (она схлопывалась в 1 px). */
@media (min-width: 961px) { :root { --topbar: 0px; } }
/* Общие контейнеры krom: внутри рабочей области отступы уже заданы самой областью */
.wide, .frame { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.rule { border-bottom: 0; }
.sheet { margin: 0; padding: 0; }
.workspace__content > main, .workspace__content > section { min-width: 0; }

/* Полоса покупки на телефоне (страница товара кладёт её блоком mobile_buy) — продолжение нижней панели */
@media (max-width: 960px) {
	body:has(.mbuy) { --mbuy: 60px; }
	.mbuy { position: fixed; left: 0; right: 0; z-index: 41; bottom: calc(var(--vvb, 0px) + var(--mbar, 56px) + env(safe-area-inset-bottom));
		display: flex; align-items: center; gap: var(--s3); min-height: var(--mbuy); padding: var(--s2) var(--s4); background: var(--panel); border-top: 1px solid var(--line); }
	body:has(.mbuy) .mbar { box-shadow: none; border-top: 1px solid var(--line); }
	html[data-vvb-lift] .mbuy { transition: bottom .18s ease; }
	body.mdrawer-open .mbuy, html.sugg-open .mbuy { display: none; }
	body:has(.mbuy) .bpf { padding-bottom: calc(var(--mbar, 56px) + var(--mbuy) + env(safe-area-inset-bottom)); }
}
@media (min-width: 961px) { .mbuy { display: none; } }

/* Бейдж скидки на карточке товара: тёмная плашка дизайн-системы, а не круглый «оливковый» значок WooCommerce */
.woocommerce span.onsale, span.onsale {
	position: absolute; top: 10px; left: 10px; z-index: 3; width: auto; height: auto; min-width: 0; min-height: 0; margin: 0;
	padding: 4px 9px; border-radius: var(--radius-sm, 6px); background: var(--ink, var(--ink)); color: var(--dark-ink);
	font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .005em;
}
@media (max-width: 640px) { :root { --h-md: 44px; } }