/*
 * Скорпиопласт — дизайн система, версия 0.
 *
 * Цветовете, шрифтът и размерите на едно място. Всичко ново на сайта
 * (хедър, после страниците) взима стойностите оттук, не ги пише наново.
 * Платното с решенията: „Скорпиопласт — дизайн система“ в Claude Design.
 */

/* Onest — отворен лиценз (OFL), от нашия сървър. Един файл носи 400–800. */
@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('onest-kirilica.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Onest';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('onest-latinica.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Основа. Контраст с бяло: мастило 17,8 · графит 10,1 · сиво 5,9 · рамка 3,2. */
	--sp-mastilo: #16181B;
	--sp-grafit: #3D4248;
	--sp-sivo: #5F656D;
	--sp-ramka: #8A9099;
	--sp-linia: #D9DCE0;
	--sp-linia-svetla: #EEF0F2;
	--sp-fon: #F3F4F6;
	--sp-byalo: #FFFFFF;

	/* Марка — синьото е детайл: надписът, връзките, фокусът, лентата. */
	--sp-marka: #003F7A;
	--sp-marka-svetlo: #E6EDF5;
	--sp-marka-tekst2: #D6E0EC;
	--sp-zhilo: #E31E24;

	/* Действие — един основен бутон на екран, броячите, промо цена. */
	--sp-deystvie: #C81B21;
	--sp-deystvie-tamno: #A4161B;

	/* Състояния — винаги с иконка до тях. */
	--sp-nalichnost: #1F7A4D;
	--sp-vnimanie: #8A5A00;
	--sp-vnimanie-fon: #FFF4DB;
	--sp-greshka: #B42318;
	--sp-greshka-fon: #FDECEA;

	/* Звездите на оценките — като на eMAG (той, 21 окт.): пълна #F9BF3B, празна #C4C4C4.
	   Само за тях; бяха #B8860B. Числото до тях носи оценката (звездите са украса). */
	--sp-zvezdi: #F9BF3B;
	--sp-zvezdi-prazna: #C4C4C4;

	--sp-shrift: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--sp-ugal: 4px;
	--sp-ugal-karta: 8px;

	/* Отстъпи — стъпка 4. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;

	/* Ширина на съдържанието на компютър — до 1600 (той, 20 окт.: „почти от край
	   до край“, вариант Б от платното). Беше 1200, колкото Avada. Полето отстрани
	   расте с екрана (--sp-pole): 16 на телефон, 24 → 64 на компютър. */
	--sp-shirina: 1600px;
	--sp-pole: var(--sp-4);
}

/* Касата и количката остават на 1200 — и хедърът, и футърът над/под тях. */
html body.woocommerce-checkout,
html body.woocommerce-cart {
	--sp-shirina: 1200px;
}

@media (min-width: 1024px) {
	:root {
		--sp-pole: clamp(24px, 3vw, 64px);
	}

	/* Старите страници на Avada (продукт, категория, търсене, текстове) — със
	   същата ширина и същото поле като хедъра. Касата и количката остават на 1200. */
	html body:not(.woocommerce-checkout):not(.woocommerce-cart) {
		--site_width: var(--sp-shirina);
	}

	html:not(.avada-has-site-width-percent) body:not(.woocommerce-checkout):not(.woocommerce-cart) #main:not(.width-100) {
		padding-left: var(--sp-pole);
		padding-right: var(--sp-pole);
	}
}

/* Скрито за окото, видимо за четеца на екрана. */
.sp-skrito {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Бутонът „нагоре“ на Avada — махнат (той, 21 окт.): на телефона закриваше
   „Добави в количката“ и плаващата количка. Скриптът му не се зарежда (400). */
html body .to-top-container,
html body #toTop {
	display: none !important;
}

/* Иконките са вградени SVG с цвета на текста. Размерът е в атрибутите. */
.sp-ikona {
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}