/*
 * Дизайн-токены проекта — версия 2, под прототип index_9.html.
 * Старая версия (Salford Sans, красный #E72112, контейнер 1830) архивна,
 * структура файла та же, значения все новые.
 *
 * Шрифты (Archivo + Inter) подключает site-blocks.php через
 * wp_enqueue_style — не @import: его вырезают плагины оптимизации,
 * и он грузится только после разбора этого файла.
 */

:root {
	/* --- Цвета из прототипа ----------------------------------------- */
	--sb-beige:      #FDF8E8;
	--sb-red:        #E5412E;
	--sb-red-deep:   #9C2E1B;
	--sb-black:      #000000;
	--sb-nut:        #C6B6A5;

	/* --- Семантические алиасы -----------------------------------------
	   В блоках используем их, а не сырые цвета выше: поменяется оттенок
	   бежевого — правим одну строку здесь, а не по всем файлам блоков. */
	--sb-bg:          var(--sb-beige);
	--sb-bg-alt:      #F5EED4;   /* чуть темнее beige — подложки внутри секций */
	--sb-text:        var(--sb-black);
	--sb-text-invert: var(--sb-beige);
	--sb-accent:      var(--sb-red);
	--sb-accent-deep: var(--sb-red-deep);
	--sb-border:      var(--sb-nut);

	/* --- Шрифтовые стеки ------------------------------------------ */
	--sb-font-display: 'Archivo', 'Arial Black', Arial, sans-serif;
	--sb-font-body:    'Inter', Arial, sans-serif;

	--sb-weight-body:  400;
	--sb-weight-price: 500;

	/* --- Размеры ----------------------------------------------------
	   Точные значения прототипа. clamp тянет между 640px и 1280px,
	   поэтому отдельные медиазапросы на каждый заголовок не нужны:
	   h1 34→60, h2 26→36, h3 18→20, текст 16→17.                    */
	--sb-size-xs:   0.75rem;                                        /* 12 eyebrow  */
	--sb-size-sm:   0.9375rem;                                      /* 15 описание */
	--sb-size-base: clamp(1rem,      0.156vw + 0.938rem, 1.0625rem);/* 16→17 текст */
	--sb-size-lg:   clamp(1.125rem,  0.313vw + 1rem,     1.25rem);  /* 18→20 h3    */
	--sb-size-xl:   1.5rem;                                         /* 24 плитки   */
	--sb-size-2xl:  clamp(1.625rem,  1.563vw + 1rem,     2.25rem);  /* 26→36 h2    */
	--sb-size-3xl:  clamp(2.125rem,  4.063vw + 0.5rem,   3.75rem);  /* 34→60 h1    */

	--sb-weight-heading: 500;   /* в прототипе заголовки не жирные */

	--sb-leading-tight: 1.1;    /* h1 66/60 */
	--sb-leading-heading: 1.22; /* h2 44/36 */
	--sb-leading-base:  1.65;   /* 28/17    */

	/* --- Отступы --------------------------------------------------- */
	--sb-space-1:  0.25rem;
	--sb-space-2:  0.5rem;
	--sb-space-3:  0.75rem;
	--sb-space-4:  1rem;
	--sb-space-5:  1.25rem;
	--sb-space-6:  1.5rem;
	--sb-space-8:  2rem;
	--sb-space-10: 2.5rem;
	--sb-space-12: 3rem;
	--sb-space-14: 3.5rem;
	--sb-space-16: 4rem;
	--sb-space-24: clamp(3rem, 6vw, 7.5rem);   /* 120px = --gap прототипа */

	/* --- Сетка -----------------------------------------------------
	   1280 / 80 — ровно значения --max и --pad из прототипа.        */
	--sb-container: 1280px;
	--sb-gutter:    clamp(1.25rem, 4.2vw, 5rem);   /* → 80px */
	--sb-col-gap:   clamp(1.5rem, 3vw, 2.5rem);

	/* --- Прочее ------------------------------------------------------
	   В прототипе радиусов почти нет — плоская, графичная стилистика. */
	--sb-radius:     4px;
	--sb-radius-lg:  8px;
	--sb-transition: 200ms ease;
}

/* ====================================================================
   БАЗА
   ==================================================================== */

/*
 * Выход за пределы колонки темы.
 *
 * Тема заворачивает контент в узкий контейнер (часто ~650px). Без этого
 * блок наследует её ширину, и сетка внутри считается от неё — плитки
 * выходят вдвое мельче макета. Ставим на секцию блока, а ширину контента
 * задаёт .sb-container внутри.
 */
.sb-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 100vw шире экрана на ширину скроллбара — режем возможную прокрутку.
   clip, а не hidden: hidden ломает position:sticky у шапки. */
:where(body):has(.sb-bleed) {
	overflow-x: clip;
}

.sb-container {
	width: 100%;
	max-width: var(--sb-container);
	margin-inline: auto;
	padding-inline: var(--sb-gutter);
}

/*
 * Границы считаем вместе с полями и рамкой.
 *
 * Без этого кнопка с width:100% и padding 26px вылезает за свою колонку
 * на ширину полей — в сетке карточки наезжают друг на друга. Многие темы
 * такой сброс дают, но полагаться на это нельзя.
 */
[class^="sb-"],
[class*=" sb-"],
[class^="sb-"] *,
[class*=" sb-"] * {
	box-sizing: border-box;
}

/* Шрифт темы не должен протекать внутрь блоков */
[class^="sb-"],
[class*=" sb-"] {
	font-family: var(--sb-font-body);
}

/* Заголовок может быть как вложенным, так и самим элементом с классом sb- */
[class^="sb-"] :is(h1, h2, h3, h4),
:is(h1, h2, h3, h4)[class^="sb-"],
:is(h1, h2, h3, h4)[class*=" sb-"] {
	font-family: var(--sb-font-display);
	font-weight: var(--sb-weight-heading);
	line-height: var(--sb-leading-heading);
}

.sb-price {
	font-family: var(--sb-font-body);
	font-weight: var(--sb-weight-price);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

[class^="sb-"] :is(a, button, input, select):focus-visible {
	outline: 2px solid var(--sb-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Кнопка -------------------------------------------------------------
   Таблетка с обводкой цвета --red-deep, капс с трекингом. Общая для
   hero, карточек товара, подписки. */
.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding-inline: 26px;

	border: 1.5px solid var(--sb-accent-deep);
	border-radius: 999px;
	background: rgb(156 46 27 / 0.06);
	color: var(--sb-accent-deep);

	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: 0.8125rem;   /* 13 */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	transition: background var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
}

.sb-btn:hover {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-beige);
}

.sb-btn:active {
	background: #C9351F;
	border-color: #C9351F;
	color: var(--sb-beige);
}

/* Второстепенная: обводка нейтральная */
.sb-btn--ghost {
	border-color: var(--sb-nut);
	color: var(--sb-black);
	background: rgb(198 182 165 / 0.14);
}

.sb-btn--ghost:hover {
	border-color: var(--sb-accent);
	background: var(--sb-accent);
	color: var(--sb-beige);
}

.sb-btn--wide {
	width: 100%;
}

.sb-btn[disabled],
.sb-btn--disabled {
	background: rgb(198 182 165 / 0.12);
	border-color: var(--sb-nut);
	color: var(--sb-nut);
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Надзаголовок -------------------------------------------------------- */
.sb-eyebrow {
	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: var(--sb-size-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sb-accent);
	margin-bottom: 14px;
}

@media (max-width: 640px) {
	.sb-btn {
		height: 44px;
		padding-inline: 20px;
	}
}