/*
Theme Name: Sofia Boutique
Theme URI: https://sofiaboutique.bg
Description: Собствена GeneratePress child тема за Sofia Boutique - дамска мода. Дизайн Вариант Б3 "Лукбук".
Author: denvelkoff studio
Template: generatepress
Version: 0.1.17
Text Domain: sofiaboutique
*/

/* ==========================================================================
   Локални шрифтове - Oswald (заглавия) + Mulish (текст)
   Кирилица + латиница, woff2, font-display: swap.
   НУЛА заявки към fonts.googleapis.com - файловете живеят в assets/fonts/.
   ========================================================================== */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/oswald-500-latin.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;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/oswald-500-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/oswald-600-latin.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;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/oswald-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/oswald-700-latin.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;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/oswald-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/mulish-400-latin.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;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/mulish-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/mulish-600-latin.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;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/mulish-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/mulish-800-latin.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;
}

@font-face {
	font-family: 'Mulish';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/mulish-800-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ЕТАП 3: Unbounded (хиро/H2 на "Витрина") + Playfair Display (заглавие на
   Sale промо блока) - self-hosted, латиница + кирилица, същия подход. */
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/unbounded-300-latin.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;
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/unbounded-300-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/unbounded-400-latin.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;
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/unbounded-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-400-latin.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;
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ==========================================================================
   Токени на марката
   ========================================================================== */

:root {
	--sb-cream: #faf5f0;
	--sb-ink: #313149;
	--sb-pink: #eb82a3;
	--sb-sand: #d4c4b5;
  --sb-line-strong: #eb82a3; /* тънки разделителни линии - брандово розово (Поли, 27.09.2026) */
  --sb-line-soft: #f2b3c7;   /* рамки на полета, чипове и кутии - по-меко розово */
	--sb-white: #fff;
	/* Акцент по повърхностите (ленти, бутони, активни състояния, футър):
	   РОЗОВО от 27.09.2026 по искане на Поли („лилавото да стане розово",
	   избран вариант Б от пробните палитри). Текстът и заглавията остават
	   мастилени. Връщане към старото: --sb-accent: var(--sb-ink),
	   --sb-accent-hover: #1f1f33, --sb-footer-bg: var(--sb-ink), --sb-footer-fg: #cfccd8. */
	--sb-accent: var(--sb-pink);
	--sb-accent-hover: #c4557d;
	--sb-footer-bg: var(--sb-pink);
	--sb-footer-fg: #fff7fa;
	--sb-heading: var(--sb-ink);

	--sb-font-heading: 'Oswald', Arial, sans-serif;
	--sb-font-body: 'Mulish', Arial, sans-serif;
	--sb-font-display: 'Unbounded', Arial, sans-serif;
	--sb-font-serif: 'Playfair Display', Georgia, serif;

	/* ЕТАП 6А (Д0): ЕДНА променлива за четимата ширина на съдържание -
	   .entry-content, "Типографски тест", благодарствената страница и
	   т.н. Началната НЕ я ползва - тя си остава edge-to-edge секции по
	   собствен дизайн (Ф2-Ф3), тази променлива не я пипа никъде. */
	--sb-content-width: 760px;
}

/* ==========================================================================
   Базова типография
   ========================================================================== */

body {
	font-family: var(--sb-font-body);
	font-weight: 400;
	color: var(--sb-ink);
	background-color: var(--sb-cream);
	overflow-wrap: break-word;
}

/* ДЕФЕКТ 1.0: Elementor Kit-ът праща `.elementor-kit-9378 h1..h6` със
   специфичност (0,1,1) - клас, докато гол "h1" е само (0,0,1) и губи.
   Никакъв брой type-селектори не може да качи (0,1,1) - класовата
   колона винаги тежи повече от type колоната в CSS специфичността,
   затова "body h1, body h2, ..." НЕ е достатъчно. #page носи ID и
   печели с (1,0,1)/(1,0,2) срещу всеки клас, без !important на
   единични свойства - #page го има на всяка страница (GP wrapper). */
#page :is(h1, h2, h3, h4, h5, h6),
#page .entry-title,
#page .site-title {
	font-family: var(--sb-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--sb-ink);
}

/* ЕТАП 6А (Д0), задача 6.0.1: старият ред тук беше "*, *::before, *::after
   {border-radius:0!important; box-shadow:none!important}" - буквално
   всеки елемент в документа, с !important. Заради това всяка нова
   кутия с истински радиус (.sb-new-week__card, .sb-sale-promo__button
   по-долу) трябваше сама да пише !important, за да пробие обратно.
   Стеснено до елементите, които наистина могат да излязат ъглести/със
   сянка не от нашия код: браузърният "native appearance" на бутони и
   полета (Safari им слага лек радиус/сянка сам) плюс table/fieldset/img.
   `<a>` не е тук нарочно - "Готово" карти с радиус вече не се нуждаят
   от !important, вижте .sb-new-week__card и .sb-sale-promo__button. */
button,
input,
select,
textarea,
img,
table,
fieldset {
	border-radius: 0;
	box-shadow: none;
}

/* ДЕФЕКТ 1.3 / 2.6: `.elementor-kit-9378 a{color:var(--e-global-color-primary)}`
   е (0,1,1) и се зарежда СЛЕД темата. Първият опит биеше кита с #page,
   но #page НЕ обхваща хедъра/футъра в GeneratePress - do_action('generate_header')
   и do_action('generate_footer') се извикват извън <div id="page">
   (проверено срещу header.php/footer.php на самата GeneratePress), затова
   `#page .sb-logo` и т.н. никога не са мачвали нищо на живо. Вместо #page,
   двоен клас (0,2,x): .sb-header/.sb-footer вече винаги обхващат тези
   елементи, без значение от GP-обвивката. */
.sb-header .sb-logo,
.sb-header .sb-primary-menu a {
	color: var(--sb-ink);
}

.sb-header .sb-primary-menu .sb-menu-sale > a {
	color: var(--sb-pink);
}

.sb-header .sb-header__action {
	color: #5d5a70;
}

.sb-footer .sb-footer__column a {
	color: #fff7fa;
}

.sb-footer .sb-footer__column a:hover {
	color: #fff;
}

.sb-footer .sb-footer__credit a {
	color: var(--sb-cream);
}

/* ДЕФЕКТ 4.5: `.elementor-kit-9378 button` (sp101) е клас+таг и бие всеки
   едно-класов бутонен селектор в хедъра (sp100) - същата математика като
   4.5-а по-горе, но за button/line-height вместо a/color. `#page` пак не
   помага (хедърът е извън #page). Вдигнати до .sb-header .xxx (sp10100+),
   и добавени свойствата, които преди изобщо не бяха декларирани никъде
   в темата (font-size/line-height на бургера и Търси бутона) - без тях
   Elementor печели ги независимо от специфичност другаде. */
.sb-header .sb-menu-toggle {
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
}

.sb-header .sb-header__action {
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
}

.sb-header form button {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
}

.sb-header .sb-mobile-nav .sb-mobile-nav__link {
	color: var(--sb-ink);
}

.sb-footer .sb-footer__column h2 {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	color: var(--sb-cream);
}

/* ==========================================================================
   Хедър (Ф1.2)
   ========================================================================== */

.sb-promo-bar {
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	text-align: center;
	padding: 9px 16px;
}

.sb-promo-bar p {
	margin: 0;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.sb-header {
	background-color: var(--sb-white);
}

.sb-header__inside {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 46px;
	border-bottom: 1px solid var(--sb-line-strong);
}

.sb-menu-toggle {
	display: none;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--sb-ink);
}

.sb-mobile-nav {
	display: none;
}

.sb-logo {
	font-family: var(--sb-font-heading);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.sb-primary-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-primary-menu a {
	display: block;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-primary-menu .sb-menu-sale > a {
	color: var(--sb-pink);
	font-weight: 600;
}

.sb-primary-menu .menu-item-has-children {
	position: relative;
}

.sb-primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
}

.sb-primary-menu .menu-item-has-children:hover > .sub-menu,
.sb-primary-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.sb-primary-menu .sub-menu a {
	padding: 8px 20px;
	font-size: 13px;
	letter-spacing: .06em;
}

.sb-header__actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sb-header__action {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5d5a70;
	text-decoration: none;
}

.sb-icon {
	width: 18px;
	height: 18px;
}

.sb-header__cart {
	position: relative;
}

.sb-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background-color: var(--sb-pink);
	color: var(--sb-white);
	font-family: var(--sb-font-body);
	font-size: 10px;
	font-weight: 800;
}

/* Панел за търсене под реда на хедъра (7Д.2, makets/final/tarsene.html).
   Заменя старата форма в реда на хедъра - тя вече я няма в темата.
   Отстъпът е литералните 46px на хедъра, а не `var(--sb-pad)` - виж
   бележката при дефиницията на променливата: хедърът не я ползва. */
.sb-search-panel {
	background-color: var(--sb-cream);
	border-bottom: 1px solid var(--sb-line-strong);
	padding: 28px 46px 26px;
}

.sb-search-panel[hidden] {
	display: none;
}

.sb-search-panel__form {
	display: flex;
	align-items: flex-end;
	gap: 14px;
}

/* Същото поле се ползва и в празното състояние на резултатите
   (`.sb-search-empty`, вътре в #page), затова правилото е глобално,
   а не скоупнато в `.sb-header`. */
.sb-search-panel__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sb-font-display);
	font-weight: 300;
	font-size: 26px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--sb-ink);
}

/* Кутията на полето е ОТДЕЛНО правило със специфичност (0,2,1). На
   (0,1,0) губеше от две чужди правила с (0,1,1) (измерено на живо
   10.09.2026, 1280): GP `main.min.css` - `input[type="search"] { border:
   1px solid ... }`, и динамичния inline CSS на GP - `input[type="text"],
   ... { background-color: var(--base-2) }`. Затова полето излизаше сива
   кутия с рамка от четирите страни. Бие се само със специфичност, без
   форсиране и без промяна на маркъпа: и двете полета са
   `input.sb-search-panel__input` (inc/header.php и inc/woo-archive.php),
   всяко в своята обвивка. */
.sb-search-panel input.sb-search-panel__input,
.sb-search-empty input.sb-search-panel__input {
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--sb-accent);
	border-radius: 0;
	padding: 6px 0;
	outline: none;
}

/* При фокус GP пребоядисва фона и рамката с (0,2,1); тук сме (0,3,1),
   така че прозрачният фон и мастилената долна рамка остават, а синият
   фокус пръстен на браузъра не се появява. */
.sb-search-panel input.sb-search-panel__input:focus,
.sb-search-empty input.sb-search-panel__input:focus {
	background: transparent;
	border-bottom-color: var(--sb-ink);
	outline: none;
}

.sb-search-panel input.sb-search-panel__input::placeholder,
.sb-search-empty input.sb-search-panel__input::placeholder {
	color: var(--sb-muted);
	opacity: 1;
}

.sb-search-panel__input::-webkit-search-cancel-button {
	display: none;
}

.sb-search-panel__form .sb-btn {
	flex: none;
	padding: 16px 34px;
}

.sb-search-panel__close {
	flex: none;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--sb-ink);
}

.sb-search-panel__close .sb-icon {
	width: 20px;
	height: 20px;
}

.sb-search-panel__quick {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.sb-search-panel__quick .sb-label {
	margin: 0;
}

/* Чиповете са същите като `.sb-subcats a` от архива. */
.sb-search-panel__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	border-radius: 999px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-search-panel__link:hover {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-search-panel__link.is-sale {
	color: var(--sb-pink);
}

.sb-search-panel__link.is-sale:hover {
	color: var(--sb-cream);
}

/* ДЕФЕКТ 1.3 отново: китът `.elementor-kit-9378 a{color}` е (0,1,1) и бие
   селектор с един клас. Панелът е в хедъра, тоест извън #page - затова
   прескачаме кита със `.sb-header` като при логото и менюто по-горе. */
.sb-header .sb-search-panel__link {
	color: var(--sb-ink);
}

.sb-header .sb-search-panel__link:hover {
	color: var(--sb-cream);
}

.sb-header .sb-search-panel__link.is-sale {
	color: var(--sb-pink);
}

.sb-header .sb-search-panel__link.is-sale:hover {
	color: var(--sb-cream);
}

/* ДЕФЕКТ 1.4: под 782px петте линка не се събираха на един ред (нямаше
   бургер) и футърът с 4 колони по 279px минаваше вдясно на 390px екран -
   `documentElement.scrollWidth` излизаше 503 при екран 390. По
   design/B3-SPEC.md раздел „Мобилно": бургер вляво, надпис в средата,
   брояч вдясно, падинг 14px 18px. */
@media (max-width: 782px) {
	.sb-header__inside {
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 14px 18px;
	}

	.sb-menu-toggle {
		display: flex;
		order: 1;
	}

	.sb-header__brand {
		order: 2;
		flex: 1 1 auto;
		text-align: center;
	}

	.sb-logo {
		font-size: 19px;
		letter-spacing: .12em;
	}

	.sb-header__nav {
		display: none;
	}

	.sb-header__actions {
		order: 3;
		gap: 12px;
	}

	.sb-header__actions .sb-search-toggle,
	.sb-header__actions .sb-header__account {
		display: none;
	}

	.sb-header__actions .sb-header__action span:not(.sb-cart-count) {
		display: none;
	}

	/* Под 782px търсенето живее в бургер-панела (.sb-mobile-nav__search) -
	   панелът на хедъра няма откъде да се отвори и се скрива. */
	.sb-search-panel {
		display: none;
	}

	.sb-mobile-nav:not([hidden]) {
		display: block;
		padding: 8px 18px 18px;
		border-top: 1px solid var(--sb-line-strong);
	}

	.sb-mobile-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sb-mobile-menu a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--sb-line-strong);
		font-family: var(--sb-font-heading);
		font-weight: 500;
		font-size: 15px;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--sb-ink);
		text-decoration: none;
	}

	.sb-mobile-menu .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0 0 0 14px;
	}

	.sb-mobile-menu .sb-menu-sale > a {
		color: var(--sb-pink);
		font-weight: 600;
	}

	/* Мобилното поле е същото като на панела, само с по-малък кегел -
	   бутонът пада на свой ред, за да се събере в 280px колона. */
	.sb-mobile-nav__search {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 0;
		border-bottom: 1px solid var(--sb-line-strong);
	}

	.sb-mobile-nav__search input[type="search"] {
		width: 100%;
		font-family: var(--sb-font-display);
		font-weight: 300;
		font-size: 18px;
		color: var(--sb-ink);
		background-color: transparent;
		border: 0;
		border-bottom: 1.5px solid var(--sb-accent);
		border-radius: 0;
		padding: 6px 0;
		outline: none;
	}

	.sb-mobile-nav__search input[type="search"]::placeholder {
		color: var(--sb-muted);
		opacity: 1;
	}

	.sb-mobile-nav__search .sb-btn {
		width: 100%;
		padding: 14px 10px;
	}

	.sb-mobile-nav__link {
		display: block;
		padding: 12px 0;
		font-family: var(--sb-font-heading);
		font-weight: 500;
		font-size: 15px;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--sb-ink);
		text-decoration: none;
	}
}

.sb-header .sb-mobile-menu a,
.sb-header .sb-mobile-nav__link {
	color: var(--sb-ink);
}

.sb-header .sb-mobile-menu .sb-menu-sale > a {
	color: var(--sb-pink);
}

/* 14Г.2: между 783 и 1199px десктоп хедърът не се събираше на ред
   (нужни ~1147px) - логото и трите по-дълги линка падаха на 2 реда,
   хедърът ставаше 115px. Същият хедър, само по-сбит: без пренасяне,
   по-малки отстояния, надписите до иконите скрити (както при ≤782). */
@media (min-width: 783px) and (max-width: 1199px) {
	.sb-header .sb-logo,
	.sb-header .sb-primary-menu a {
		white-space: nowrap;
	}

	.sb-header .sb-header__inside {
		padding: 18px 28px;
		gap: 18px;
	}

	.sb-header .sb-primary-menu {
		gap: 18px;
	}

	.sb-header__actions .sb-header__action span:not(.sb-cart-count) {
		display: none;
	}
}

@media (min-width: 783px) and (max-width: 899px) {
	.sb-header .sb-logo {
		font-size: 20px;
		letter-spacing: .12em;
	}

	.sb-header .sb-primary-menu a {
		font-size: 13px;
		letter-spacing: .06em;
	}

	.sb-header .sb-primary-menu {
		gap: 14px;
	}

	.sb-header .sb-header__inside {
		padding: 16px 18px;
	}
}

/* ==========================================================================
   Футър (Ф1.3)
   ========================================================================== */

.sb-footer {
	--sb-line-strong: rgba(255, 247, 250, .55); /* линиите във футъра върху розовото */
	background-color: var(--sb-footer-bg);
	color: var(--sb-footer-fg);
}

.sb-footer__benefits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px;
	border-top: 1px solid var(--sb-line-strong);
	padding: 26px 46px;
}

.sb-footer__benefit {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-cream);
}

.sb-footer__benefit .sb-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.sb-footer__inside {
	padding: 38px 46px;
}

.sb-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.sb-footer__column h2 {
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.sb-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-footer__column li {
	margin: 0 0 10px;
}

.sb-footer__column a {
	color: #fff7fa;
	text-decoration: none;
}

.sb-footer__column a:hover {
	color: #fff;
}

.sb-footer__credit {
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(235, 130, 163, .35);
	text-align: center;
	font-size: 13px;
}

.sb-footer__credit a {
	color: var(--sb-cream);
}

@media (max-width: 782px) {
	.sb-footer__inside {
		padding: 30px 20px;
	}

	.sb-footer__benefits {
		padding: 18px 20px;
		gap: 20px;
	}
}

/* ДЕФЕКТ 1.4: 4 колони по 279px не се събират в 390px екран -
   documentElement.scrollWidth излизаше 503. По design/B3-SPEC.md: 2
   колони на 600px, 1 колона на 390px. */
@media (max-width: 600px) {
	.sb-footer__columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

@media (max-width: 480px) {
	.sb-footer__columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ==========================================================================
   Начална страница Б3 (Ф2.1-2.4)
   ========================================================================== */

.sb-section-heading {
	margin: 0;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 32px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--sb-ink);
}

/* ---- 1. Голям кадър ---- */

.sb-hero {
	position: relative;
	height: 820px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	background-color: var(--sb-accent);
	background-size: cover;
	background-position: 50% 5%;
}

.sb-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(49, 49, 73, .66) 0%, rgba(49, 49, 73, .05) 55%);
}

.sb-hero__content {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding: 0 24px 46px;
	text-align: center;
}

.sb-hero__kicker {
	margin: 0 0 14px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--sb-cream);
}

/* #page - beat #page :is(h1..h6){color:var(--sb-ink)} от 1.0. */
#page .sb-hero__heading {
	margin: 0 0 22px;
	font-size: 80px;
	line-height: .94;
	letter-spacing: .02em;
	color: var(--sb-cream);
}

/* #page - beat .elementor-kit-9378 a{color} от 1.3, текстът е директно в <a>. */
#page .sb-hero__button {
	display: inline-block;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sb-cream);
	background: transparent;
	border: 1.5px solid var(--sb-cream);
	text-decoration: none;
}

/* ---- 2. Лента "Колекцията в пет кадъра" ---- */

.sb-lookbook {
	padding: 64px 46px;
}

.sb-lookbook__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

#page .sb-lookbook__link {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-lookbook__track {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.sb-lookbook__frame {
	margin: 0;
}

.sb-lookbook__frame img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
	object-position: 50% 14%;
}

/* ДЕФЕКТ 2.8: етикетът беше absolute върху долния край на снимката -
   по design/B3-SPEC.md трябва да е ПОД кадъра, в нормалния поток. */
.sb-lookbook__frame figcaption {
	padding-top: 10px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #5d5a70;
}

/* ---- 3. Двата сезона ---- */

.sb-seasons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.sb-seasons__tile {
	position: relative;
	display: block;
	height: 540px;
	overflow: hidden;
	background-color: var(--sb-accent);
	background-size: cover;
	background-position: 50% 8%;
	text-decoration: none;
}

.sb-seasons__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(49, 49, 73, .74) 0%, rgba(49, 49, 73, 0) 48%);
}

.sb-seasons__content {
	position: absolute;
	left: 24px;
	bottom: 20px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sb-seasons__name {
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 40px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sb-cream);
}

.sb-seasons__count {
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sb-cream);
	opacity: .82;
}

/* ---- 4. Продуктов ред "Популярни" + лента предимства ---- */

.sb-popular {
	padding: 64px 46px;
}

.sb-popular__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin-top: 24px;
}

/* Картата тук е `.sb-card` - ЕТАП 7, 7.1 (Д9): ЕДИН partial, споделен с
   категорията/магазина (inc/woo-archive.php,
   sofiaboutique_product_card()) - стиловете ѝ (бяла, радиус 12px,
   снимка 3:4, бадж, име, .sb-price) са в общите примитиви по-долу във
   файла ("ЕТАП 7 - общи примитиви"), не се дублират тук. */

@media (max-width: 900px) {
	.sb-lookbook,
	.sb-popular {
		padding: 48px 20px;
	}

	.sb-popular__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Мобилно (390px), design/B3-SPEC.md раздел "Мобилно". */
@media (max-width: 600px) {
	.sb-hero {
		height: 520px;
		background-position: 50% 6%;
	}

	#page .sb-hero__heading {
		font-size: 38px;
	}

	.sb-lookbook,
	.sb-popular {
		padding: 32px 18px;
	}

	.sb-lookbook__track {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.sb-lookbook__frame {
		flex: 0 0 168px;
		width: 168px;
		scroll-snap-align: start;
	}

	.sb-lookbook__frame img {
		height: 224px;
	}

	.sb-seasons {
		grid-template-columns: 1fr;
	}

	.sb-seasons__tile {
		height: 210px;
	}

	.sb-popular__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* ==========================================================================
   ЕТАП 3 - началната по избора на Поли ("Витрина" + "Ново тази седмица" +
   Sale промо lbd.bg). Заменя визуално Б3 "Лукбук" - секциите по-горе
   (лукбук лента, двата сезона) остават в кода, но не се викат (виж
   inc/front-page.php), затова CSS-ът им остава непроменен и по-горе.
   ========================================================================== */

/* ДЕФЕКТ 1.0/1.3 (пак): `#page :is(h2)` слага Oswald 600 uppercase на
   всяко заглавие (специфичност (1,0,1)). Заглавията на "Ново тази
   седмица" и "Популярни" минават на Unbounded 400 - трябва селектор с
   ID, за да бие собственото ни #page правило, не само кита - буквалното
   предложение в TASKS.md (`.sb-front-page .sb-xxx h2`, без ID) губи от
   #page :is(h2) по същата математика като дефект 1.0. */
#page .sb-front-page .sb-section-heading {
	font-family: var(--sb-font-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--sb-heading);
}

/* ---- Хиро "Витрина" (сплит) - Ф3.2 ---- */

.sb-hero-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 600px;
}

.sb-hero-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 60px;
	background-color: #faf7f4;
}

.sb-hero-split__kicker {
	margin: 0 0 26px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-pink);
}

/* #page - бие #page :is(h1){...} от 1.0 (font-weight/uppercase/размер). */
#page .sb-hero-split__heading {
	margin: 0 0 26px;
	font-family: var(--sb-font-display);
	font-weight: 300;
	font-size: 60px;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--sb-heading);
}

.sb-hero-split__lead {
	margin: 0 0 38px;
	max-width: 400px;
	font-family: var(--sb-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: #5b5b74;
}

/* #page - бие .elementor-kit-9378 a{color} от 1.3, текстът е директно в <a>. */
#page .sb-hero-split__button {
	align-self: flex-start;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--sb-pink);
	padding-bottom: 7px;
}

.sb-hero-split__image {
	position: relative;
	overflow: hidden;
	background-color: var(--sb-sand);
}

.sb-hero-split__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 5%;
}

/* ---- Три категорийни плочки (editorial) - Ф3.3 ---- */

.sb-tiles {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: 660px;
	gap: 2px;
	height: 660px;
}

.sb-tiles__col {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 2px;
}

/* #page - бие .elementor-kit-9378 a{color} от Ф4.3 (паспортът, 08.09). */
#page .sb-tile {
	position: relative;
	display: block;
	overflow: hidden;
	color: var(--sb-cream);
	text-decoration: none;
	background-color: var(--sb-accent);
}

.sb-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.sb-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 20, 35, .55) 0%, transparent 45%);
}

.sb-tile__cap {
	position: absolute;
	left: 34px;
	bottom: 32px;
	z-index: 1;
	display: block;
	color: var(--sb-cream);
	text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
}

.sb-tile__count {
	display: block;
	margin: 0 0 9px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .85;
}

.sb-tile__name {
	display: block;
	font-family: var(--sb-font-display);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: -.01em;
}

.sb-tile--big .sb-tile__name {
	font-size: 34px;
}

/* ---- "Ново тази седмица" (от посока "Бутик") - Ф3.4 ---- */

.sb-new-week {
	padding: 64px 46px;
	background-color: var(--sb-cream);
	text-align: center;
}

.sb-new-week .sb-section-heading {
	margin: 0 0 10px;
}

.sb-new-week__sub {
	margin: 0 0 34px;
	font-family: var(--sb-font-body);
	font-size: 15px;
	color: #8d8a9b;
}

.sb-new-week__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	text-align: left;
}

/* Изрично одобрено изключение от общото "нула border-radius" (CLAUDE.md) -
   картите "Ново тази седмица" носят заоблянето на посока "Бутик" по избор
   на клиентката (TASKS.md Ф3.4, одобрено от Denislav 06.09.2026). ЕТАП 6А:
   резетът вече е стеснен до button/input/select/textarea/img/table/fieldset
   (виж по-горе) - `<a>` никога не е бил в него, затова !important тук вече
   не върши нищо и падна. */
/* #page - бие .elementor-kit-9378 a{color} от Ф4.3 (паспортът, 08.09). */
#page .sb-new-week__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--sb-ink);
	text-decoration: none;
	background-color: var(--sb-white);
	border-radius: 12px;
}

.sb-new-week__image {
	position: relative;
	aspect-ratio: 3 / 4;
}

.sb-new-week__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 16%;
}

.sb-new-week__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 4px 10px;
	background-color: var(--sb-pink);
	color: var(--sb-white);
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-new-week__info {
	padding: 14px 16px 18px;
}

.sb-new-week__name {
	display: block;
	margin: 0 0 4px;
	font-family: var(--sb-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--sb-ink);
}

.sb-new-week__price {
	display: block;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .03em;
	color: var(--sb-ink);
}

/* ---- Sale промо блок, 1:1 по референцията lbd.bg - Ф3.5 ---- */

.sb-sale-promo {
	background-color: var(--sb-white);
	padding: 0 0 72px;
}

.sb-sale-promo__images {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.sb-sale-promo__images img {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	object-position: 50% 10%;
}

.sb-sale-promo__body {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 24px 0;
	text-align: center;
}

/* #page - бие #page :is(h2){...} от 1.0 (font-family/weight/letter-spacing). */
#page .sb-sale-promo__heading {
	margin: 0 0 16px;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.35;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sb-ink);
}

.sb-sale-promo__text {
	margin: 0 0 28px;
	font-family: var(--sb-font-body);
	font-size: 16px;
	color: #5b5b74;
}

/* #page - бие .elementor-kit-9378 a{color} от 1.3. Розовият pill е
   изрично одобрено изключение от "нула border-radius" (виж бележката
   над .sb-new-week__card) - точната референция lbd.bg е pill бутон. */
#page .sb-sale-promo__button {
	display: inline-block;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-ink);
	background-color: #f6c8d6;
	text-decoration: none;
	border-radius: 999px;
}

#page .sb-sale-promo__button:hover {
	background-color: var(--sb-pink);
}

/* ---- Цитат-лента (от посока "Витрина") - Ф3.6 ---- */

.sb-quote {
	background-color: var(--sb-accent);
	padding: 88px 24px;
	text-align: center;
}

.sb-quote__text {
	max-width: 820px;
	margin: 0 auto;
	font-family: var(--sb-font-display);
	font-weight: 300;
	font-size: 26px;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--sb-cream);
}

@media (max-width: 900px) {
	.sb-hero-split {
		grid-template-columns: 1fr;
		height: auto;
	}

	.sb-hero-split__image {
		order: -1;
		aspect-ratio: 4 / 5;
	}

	.sb-hero-split__text {
		padding: 40px 24px;
	}

	#page .sb-hero-split__heading {
		font-size: 40px;
	}

	.sb-tiles {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		height: auto;
	}

	.sb-tile--big {
		aspect-ratio: 4 / 5;
	}

	.sb-tiles__col {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
	}

	.sb-tile--small {
		aspect-ratio: 3 / 4;
	}

	.sb-new-week {
		padding: 48px 20px;
	}

	.sb-new-week__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Мобилно (390px). */
@media (max-width: 600px) {
	#page .sb-front-page .sb-section-heading {
		font-size: 26px;
	}

	.sb-hero-split__text {
		padding: 32px 20px;
	}

	#page .sb-hero-split__heading {
		font-size: 40px;
	}

	.sb-hero-split__lead {
		max-width: none;
	}

	.sb-new-week__sub {
		margin-bottom: 24px;
	}

	.sb-new-week__grid {
		gap: 10px;
	}

	.sb-sale-promo__images img {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	#page .sb-sale-promo__heading {
		font-size: 22px;
	}

	.sb-quote {
		padding: 56px 20px;
	}

	.sb-quote__text {
		font-size: 20px;
	}
}

/* ==========================================================================
   ЕТАП 5.1: Количка / Чекаут / Профил - стил за стандартните WooCommerce
   шаблони (без билдър), сверени срещу makets/ekrani.html екрани 3/4.

   Класовете по-долу са преписани от истинските темплейти на WooCommerce
   11.0.0 (templates/cart/cart.php, checkout/form-checkout.php,
   checkout/review-order.php, checkout/payment.php, myaccount/*.php -
   изтеглени и прочетени в тази сесия, не по памет). И трите Woo листа
   (woocommerce.css/-layout.css/-smallscreen.css) зареждат СЛЕД темата
   (капан, документиран в CLAUDE.md/PLAN.md), а Elementor Kit-ът е още
   активен и глобален - затова всеки селектор тук е с `body.woocommerce-xxx
   #page` префикс: ID специфичност (>10000) бие безусловно и двете, без
   `!important`. Скоупнато само до тези три body класа, за да не пипа
   категория/продукт - друг етап, изрично "НЕ ПИПАЙ" в TASKS.md 5.1.
   ========================================================================== */

/* ---- Заглавна лента (по мокета `.band`) ---- */

body.woocommerce-cart #page .entry-header,
body.woocommerce-checkout #page .entry-header,
body.woocommerce-account #page .entry-header {
	margin: 0 0 34px;
	padding: 44px 46px;
	background-color: var(--sb-accent);
}

body.woocommerce-cart #page .entry-header .entry-title,
body.woocommerce-checkout #page .entry-header .entry-title,
body.woocommerce-account #page .entry-header .entry-title {
	margin: 0;
	color: var(--sb-cream);
}

/* ---- Общи елементи: бутони, полета, таблици ---- */

/* border-radius:0 изрично тук (не само от общия reset по-горе, който не
   пипа `<a>`) - WooCommerce 11 слага `a.button{border-radius:3px}`
   (`woocommerce.css`, проверено в tools/woo-mock/vendor в тази сесия),
   зарежда СЛЕД темата, но нашият селектор има #page/body-клас
   специфичност по-висока от неговия - изрична стойност тук печели без
   !important. */
body.woocommerce-cart #page .button,
body.woocommerce-checkout #page .button,
body.woocommerce-account #page .button {
	display: inline-block;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 1.5px solid var(--sb-accent);
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
}

body.woocommerce-cart #page .button:hover,
body.woocommerce-checkout #page .button:hover,
body.woocommerce-account #page .button:hover {
	color: var(--sb-ink);
	background-color: var(--sb-white);
}

/* Второстепенни бутони (Приложи код, Обнови количката) - контурен вариант,
   както "Приложи" в makets/ekrani.html (`.btn.gh`). */
body.woocommerce-cart #page table.cart .button {
	padding: 14px 26px;
	color: var(--sb-ink);
	background-color: transparent;
}

body.woocommerce-cart #page table.cart .button:hover {
	color: var(--sb-cream);
	background-color: var(--sb-accent);
}

/* border-radius:0 изрично (не само от общия reset - WooCommerce слага
   `.woocommerce form .form-row .input-text,.woocommerce form .form-row
   select{border-radius:var(--wc-form-border-radius)}` - 4px, зарежда
   СЛЕД темата; нашият селектор пак печели по специфичност, не по ред). */
body.woocommerce-cart #page input.input-text:not(.sb-input),
body.woocommerce-checkout #page input.input-text:not(.sb-input),
body.woocommerce-checkout #page textarea:not(.sb-textarea),
body.woocommerce-checkout #page select:not(.sb-select),
body.woocommerce-account #page input.input-text,
body.woocommerce-account #page input[type="password"],
body.woocommerce-account #page input[type="email"],
body.woocommerce-account #page select {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 14.5px;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	border-radius: 0;
}

/* WooCommerce увива country/state <select> с Select2, ако е активен -
   `.select2-container .select2-selection`/`-dropdown` носят собствен
   радиус (`woocommerce.css`, var(--wc-form-border-radius)); квадратни
   както обикновените полета по-горе. */
body.woocommerce-checkout #page .select2-container .select2-selection,
body.woocommerce-account #page .select2-container .select2-selection,
body.woocommerce-checkout #page .select2-container .select2-dropdown,
body.woocommerce-account #page .select2-container .select2-dropdown {
	border-radius: 0;
	border-color: var(--sb-line-soft);
}

body.woocommerce-checkout #page .select2-container .select2-selection__rendered,
body.woocommerce-account #page .select2-container .select2-selection__rendered {
	padding-left: 15px;
	font-family: var(--sb-font-body);
	font-size: 14.5px;
	color: var(--sb-ink);
}

body.woocommerce-checkout #page label:not(.sb-opt),
body.woocommerce-account #page label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5d5a70;
}

/* border-radius:0 изрично - Woo слага `.woocommerce table.shop_table
   {border-radius:5px}`, зарежда СЛЕД темата (пак печели специфичност,
   не ред). border-collapse:collapse прави радиуса безсмислен визуално
   и без това, но затваряме дупката явно, не по late strong мълчание. */
body.woocommerce-cart #page table.shop_table,
body.woocommerce-checkout #page table.shop_table,
body.woocommerce-account #page table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 0;
}

body.woocommerce-cart #page table.shop_table thead th,
body.woocommerce-checkout #page table.shop_table thead th,
body.woocommerce-account #page table.shop_table thead th {
	padding: 0 0 14px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: left;
	color: #8d8a9b;
	border-bottom: 1px solid var(--sb-line-strong);
}

body.woocommerce-cart #page table.shop_table td,
body.woocommerce-cart #page table.shop_table th,
body.woocommerce-checkout #page table.shop_table td,
body.woocommerce-checkout #page table.shop_table th,
body.woocommerce-account #page table.shop_table td {
	padding: 16px 0;
	border-bottom: 1px solid var(--sb-line-soft);
	vertical-align: middle;
}

body.woocommerce-cart #page table.shop_table a,
body.woocommerce-checkout #page table.shop_table a,
body.woocommerce-account #page table.shop_table a {
	color: var(--sb-ink);
	font-weight: 600;
	text-decoration: none;
}

/* ---- Количка ---- */

/* И трите Woo shortcode-а (cart/checkout/my-account) увиват собствения си
   изход в <div class="woocommerce"> - WC_Shortcodes::shortcode_wrapper(),
   проверено в истинския код на WooCommerce 11.0.0 в тази сесия. Флексът е
   на този wrapper, не на .entry-content - той е единственото дете там. */
body.woocommerce-cart #page .entry-content .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 34px;
}

/* Каквото и да добавят Woo/плъгини (известия, купон грешки) сяда на своя
   собствен ред - само формата и обобщението пазят фиксираните колони. */
body.woocommerce-cart #page .entry-content .woocommerce > * {
	flex: 1 1 100%;
	min-width: 0;
}

/* Специфичността тук трябва да бие .entry-content .woocommerce > * (3 класа)
   отгоре - затова .woocommerce присъства и в тези два селектора, не само
   в catch-all-а. */
body.woocommerce-cart #page .entry-content .woocommerce .woocommerce-cart-form {
	flex: 1 1 480px;
}

body.woocommerce-cart #page .entry-content .woocommerce .cart-collaterals {
	flex: 0 0 360px;
}

body.woocommerce-cart #page .product-thumbnail img {
	width: 84px;
	height: 112px;
	object-fit: cover;
	object-position: 50% 14%;
	background-color: var(--sb-white);
}

/* `:not(.sb-qty) > .qty` - количката вече рисува `.sb-qty` компонента
   (7В.4); това правило остава само за евентуално друго Woo поле извън
   него (напр. в известие или в блок на плъгин). */
body.woocommerce-cart #page :not(.sb-qty) > .qty {
	width: 64px;
	padding: 10px 8px;
	text-align: center;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
}

body.woocommerce-cart #page .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 20px;
	line-height: 1;
	color: #a09aa8;
	text-decoration: none;
}

body.woocommerce-cart #page .product-remove a.remove:hover {
	color: var(--sb-pink);
}

body.woocommerce-cart #page td.product-price,
body.woocommerce-cart #page td.product-subtotal {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	letter-spacing: .02em;
}

body.woocommerce-cart #page .coupon {
	display: flex;
	gap: 10px;
	max-width: 420px;
	margin-top: 24px;
}

body.woocommerce-cart #page .coupon .input-text {
	flex: 1;
	width: auto;
}

body.woocommerce-cart #page tr.actions td {
	padding-top: 24px;
	border-bottom: none;
}

body.woocommerce-cart #page .cart_totals {
	padding: 26px;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
}

body.woocommerce-cart #page .cart_totals h2 {
	margin: 0 0 20px;
	font-size: 18px;
	letter-spacing: .1em;
}

body.woocommerce-cart #page .cart_totals table.shop_table tr:last-child td,
body.woocommerce-cart #page .cart_totals table.shop_table tr:last-child th {
	border-bottom: none;
}

body.woocommerce-cart #page .cart_totals .order-total th,
body.woocommerce-cart #page .cart_totals .order-total td {
	padding-top: 18px;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

body.woocommerce-cart #page .wc-proceed-to-checkout {
	margin-top: 20px;
}

body.woocommerce-cart #page .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
}

/* ---- Чекаут ---- */

/* ПАРТИДА 7В, задача 7В.2: целият стар слой за чекаута (form.checkout
   grid 1fr/380px, .col2-set, #order_review, ul#shipping_method li,
   ul.wc_payment_methods li, .payment_box, #place_order) ПАДНА тук.
   Написан е в ЕТАП 5.1 за ГОЛИЯ Woo маркъп, когато темата още нямаше
   собствени темплейти и Elementor Kit-ът беше активен - затова е с
   `#page` (ID) специфичност. От 7.4/7Б.2 темата рисува чекаута със
   собствени темплейти (`woocommerce/checkout/*.php`), а тези правила
   БИЕХА новите класове по специфичност и бяха ПРЯКАТА причина за
   дефектите от живата проверка: `#order_review{grid-row:2/span 2}`
   тикаше `.sb-osum` в долния край на дясната колона (7В.2.4а),
   `ul#shipping_method li`/`ul.wc_payment_methods li{border;padding}`
   рисуваха голите рамки и двойната кутия (7В.2.2/7В.2.3),
   `#page label{display:block;text-transform:uppercase}` разваляше
   `.sb-opt` реда, а `form.checkout{grid-template-columns:1fr 380px}`
   надскачаше и мобилния `.sb-co` breakpoint.
   Стилът на чекаута живее на едно място - секцията "ЕТАП 7, задача 7.4"
   по-долу. */

body.woocommerce-checkout #page .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #page .woocommerce-privacy-policy-text {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: #8d8a9b;
}

/* ---- Профил (Моят акаунт) ---- */

/* Wrapper обяснение - виж бележката над .sb-... количката по-горе:
   my-account шорткодът също увива изхода си в <div class="woocommerce">. */
body.woocommerce-account #page .entry-content .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 34px;
}

body.woocommerce-account #page .entry-content .woocommerce > * {
	flex: 1 1 100%;
	min-width: 0;
}

/* Специфичността тук трябва да бие .entry-content .woocommerce > * (3 класа)
   отгоре - затова .woocommerce присъства и в тези два селектора. */
body.woocommerce-account #page .entry-content .woocommerce .woocommerce-MyAccount-navigation {
	flex: 0 0 220px;
}

body.woocommerce-account #page .entry-content .woocommerce .woocommerce-MyAccount-content {
	flex: 1 1 480px;
}

body.woocommerce-account #page .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sb-line-strong);
}

body.woocommerce-account #page .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--sb-line-strong);
}

body.woocommerce-account #page .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 4px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

body.woocommerce-account #page .woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--sb-pink);
}

/* Вход / Регистрация - когато не е логнат, my-account.php извежда само
   myaccount/form-login.php, без .woocommerce-MyAccount-navigation/-content. */
body.woocommerce-account #page .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
}

body.woocommerce-account #page .u-columns.col2-set h2,
body.woocommerce-account #page .woocommerce-MyAccount-content h2 {
	margin: 0 0 20px;
	font-size: 20px;
	letter-spacing: .04em;
}

body.woocommerce-account #page .woocommerce-form-row {
	margin: 0 0 16px;
}

/* Адреси. */
body.woocommerce-account #page .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 34px;
}

body.woocommerce-account #page .woocommerce-Address {
	padding: 22px;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
}

body.woocommerce-account #page .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 12px;
}

body.woocommerce-account #page .woocommerce-Address-title h2 {
	margin: 0;
	font-size: 15px;
}

body.woocommerce-account #page .woocommerce-Address-title .edit {
	font-family: var(--sb-font-heading);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sb-line-strong);
}

body.woocommerce-account #page .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: #5d5a70;
}

/* Поръчки. */
body.woocommerce-account #page .woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 16px;
	margin: 0 6px 6px 0;
	font-size: 11px;
}

@media (max-width: 900px) {
	/* display:block вместо flex-direction:column нарочно - в колонен flex
	   flex-basis мери ВИСОЧИНА, не ширина (щеше да свие/разтегне
	   .woocommerce-MyAccount-navigation до фиксирани 220px височина).
	   Обикновен блоков поток е по-просто и правилно на 390px. */
	body.woocommerce-cart #page .entry-content .woocommerce,
	body.woocommerce-account #page .entry-content .woocommerce {
		display: block;
	}

	body.woocommerce-account #page .u-columns.col2-set,
	body.woocommerce-account #page .woocommerce-Addresses.col2-set {
		display: block;
	}
}

@media (max-width: 600px) {
	body.woocommerce-cart #page .entry-header,
	body.woocommerce-checkout #page .entry-header,
	body.woocommerce-account #page .entry-header {
		padding: 30px 20px;
	}

	body.woocommerce-cart #page .product-thumbnail img {
		width: 60px;
		height: 80px;
	}
}

/* ==========================================================================
   Ф5.2: Карта в Контакти - iframe без плъгин и без API ключ (inc/pages.php).
   ========================================================================== */

.sb-contact-map {
	margin-top: 32px;
}

.sb-contact-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 1px solid var(--sb-line-soft);
}

@media (max-width: 600px) {
	.sb-contact-map iframe {
		height: 280px;
	}
}

/* ==========================================================================
   ЕТАП 6А, задача 6.0 (елемент Д0) - БАЗОВ СЛОЙ.
   Прилага се на всяка "гола" страница/шаблон, който още не си има собствен
   дизайн (страница от редактора, статия, WooCommerce известия, пагинация,
   FluentForms) - за да не изглежда "непипната" в деня, в който Elementor и
   Jet отпаднат (решение на Denislav, 09.09.2026). Началната (front-page.php)
   не минава оттук - тя си остава Ф2/Ф3 edge-to-edge секции, непроменени.
   ========================================================================== */

/* ---- 6.0.2: типография и вертикален ритъм на .entry-content ---- */

.entry-content {
	max-width: var(--sb-content-width);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	line-height: 1.2;
	margin: 1.6em 0 .6em;
}

.entry-content h1 {
	font-size: 36px;
}

.entry-content h2 {
	font-size: 27px;
}

.entry-content h3 {
	font-size: 21px;
}

.entry-content h4 {
	font-size: 17px;
}

.entry-content p {
	margin: 0 0 1.3em;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sb-ink);
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sb-ink);
}

.entry-content li {
	margin: 0 0 .5em;
}

.entry-content table {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
	font-size: 15px;
}

.entry-content table:not(.shop_table) th,
.entry-content table:not(.shop_table) td {
	padding: 12px 14px;
	text-align: left;
	border: 1px solid var(--sb-line-soft);
}

.entry-content table:not(.shop_table) th {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	border-color: var(--sb-accent);
}

.entry-content blockquote {
	margin: 0 0 1.6em;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--sb-pink);
	font-size: 18px;
	line-height: 1.6;
	color: #5b5b74;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content img {
	height: auto;
	max-width: 100%;
	margin: 0 0 1.6em;
}

.entry-content figure {
	margin: 0 0 1.8em;
}

.entry-content figure img {
	margin-bottom: 0;
}

.entry-content figcaption {
	margin-top: 10px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8d8a9b;
	text-align: center;
}

.entry-content hr {
	height: 1px;
	margin: 2.4em 0;
	background-color: var(--sb-sand);
	border: 0;
}

/* ---- 6.0.3: линкове, focus, селекция (глобално, не само .entry-content) ---- */

.entry-content a {
	color: var(--sb-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--sb-line-strong);
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--sb-pink);
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--sb-pink);
	outline-offset: 2px;
}

::selection {
	background-color: var(--sb-pink);
	color: var(--sb-white);
}

/* ---- 6.0.5: бутони и полета извън WooCommerce/Fluent Forms полетата на
   Етап 5 - Gutenberg бутон-блок в редактора и, специфично, FluentForms на
   /kontakti/. #page тук не гони Elementor Kit-а (той отпада, виж решенията
   на Denislav по-горе) - гони реалния WooCommerce/plugin CSS, който
   продължава да съществува и зарежда СЛЕД темата. */

#page .entry-content .button,
#page .entry-content .wp-block-button__link {
	display: inline-block;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 1.5px solid var(--sb-accent);
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
}

#page .entry-content .button:hover,
#page .entry-content .wp-block-button__link:hover {
	color: var(--sb-ink);
	background-color: var(--sb-white);
}

/* FluentForms маркъп (`.fluentform`, поле `.ff-el-form-control`, бутон
   `.ff-btn.ff-btn-submit`) - проверено срещу документацията на плъгина,
   не срещу живия DOM (тази сесия няма достъп до staging - виж "Не мога да
   проверя на живо" в REPORT.md). Ако Cowork намери други класове на живо,
   само тези два селектора се сменят, не подходът. */
#page .entry-content .fluentform input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
#page .entry-content .fluentform textarea,
#page .entry-content .fluentform select,
#page .entry-content .fluentform .ff-el-form-control {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 14.5px;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	border-radius: 0;
	box-shadow: none;
}

#page .entry-content .fluentform label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5d5a70;
}

#page .entry-content .fluentform button[type="submit"],
#page .entry-content .fluentform .ff-btn-submit {
	display: inline-block;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 1.5px solid var(--sb-accent);
	border-radius: 0;
	cursor: pointer;
}

#page .entry-content .fluentform button[type="submit"]:hover,
#page .entry-content .fluentform .ff-btn-submit:hover {
	color: var(--sb-ink);
	background-color: var(--sb-white);
}

/* ---- 6.0.6: Woo база - известия, таблици (обхватени в 6.0.2 по-горе),
   пагинация. Без body.woocommerce-xxx префикс нарочно - известие/пагинация
   могат да излязат на всяка Woo страница, не само количка/чекаут/профил. */

/* ЕТАП 7, 7.7 (Д9): визията е тази на `.sb-notice` (съобщение/инфо - тъмен
   фон, отметка) / `.sb-alert` (грешка - розова рамка) от финалните
   макети - едно и също правило на ВСЯКА страница, не по отделно копие
   на всеки шаблон (7.2/7.4 преди това дублираха същото тук - махнато). */
#page .woocommerce-message,
#page .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 28px;
	padding: 16px 22px;
	list-style: none;
	font-size: 14.5px;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 0;
}

#page .woocommerce-message::before,
#page .woocommerce-info::before {
	content: "\2713";
	color: var(--sb-pink);
	font-weight: 700;
	margin-right: 4px;
}

#page .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 28px;
	padding: 16px 22px;
	list-style: none;
	font-size: 14.5px;
	color: #c4557d;
	background-color: #fff7fa;
	border: 1px solid var(--sb-pink);
}

#page .woocommerce-message li,
#page .woocommerce-info li,
#page .woocommerce-error li {
	margin: 0;
}

#page .woocommerce-message .button,
#page .woocommerce-info .button {
	flex-shrink: 0;
	padding: 0 0 3px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-cream);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sb-pink);
}

#page .woocommerce-error .button {
	flex-shrink: 0;
	padding: 10px 22px;
}

/* Номера в Oswald 13px, текущата с мастилен фон (PLAN.md, "Пагинация и
   сортиране в магазина"). `.page-numbers` е общият клас и на WordPress
   `paginate_links()` (блог/търсене), и на `woocommerce_pagination()`
   (магазин/категория) - проверено в tools/woo-mock/vendor/woocommerce. */
#page .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 3px 6px 0;
	padding: 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	text-decoration: none;
}

#page a.page-numbers:hover {
	background-color: var(--sb-cream);
	border-color: var(--sb-accent);
}

#page span.page-numbers.current {
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	border-color: var(--sb-accent);
}

#page .page-numbers.dots {
	border-color: transparent;
	background: none;
}

@media (max-width: 600px) {
	.entry-content h1 {
		font-size: 28px;
	}

	.entry-content h2 {
		font-size: 22px;
	}

	.entry-content h3 {
		font-size: 19px;
	}

	#page .woocommerce-message,
	#page .woocommerce-info,
	#page .woocommerce-error {
		padding: 14px 16px;
	}
}


/* ==========================================================================
   ЕТАП 7 - общи примитиви за вътрешните страници (Категория, Продукт,
   Количка, Чекаут, Контакти, За нас). Пренесени 1:1 от
   makets/final/sb-final.css (TASKS.md, Партида 7, правило 1: "копираш
   го, не го преписваш по усет") - въведени еднократно тук (7.1), защото
   се ползват от ВСИЧКИ следващи задачи в партидата без промяна.
   ========================================================================== */

:root {
	--sb-muted: #5b5b74;
	--sb-muted-2: #8d8a9b;
	--sb-line: #f2b3c7;
	--sb-pink-soft: #f6c8d6;

	/* Липсваше досега, макар `.sb-opt__extra` (кутията с офиса на
	   куриера) и `.sb-cart__totals` да я ползват от 7.3/7.4 - без
	   дефиниция `var(--sb-hero)` пада към нищо и фонът им изчезваше.
	   Стойността е от makets/final/sb-final.css. */
	--sb-hero: #faf7f4;

	/* Единен хоризонтален отстъп за новите ЕТАП 7 секции (46px/18px на
	   782px - същият праг, на който GP превключва мобилното меню).
	   Хедърът/футърът (Ф1.2/Ф1.3) не ползват тази променлива - остават
	   с litералните си 46px/20px, за да не се пипа готово. */
	--sb-pad: 46px;
}

@media (max-width: 782px) {
	:root {
		--sb-pad: 18px;
	}
}

/* ---- типография ---- */

.sb-kicker {
	display: block;
	margin: 0 0 14px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-pink);
}

/* #page бие базовата "#page :is(h1..h6){Oswald,uppercase,600}" (виж
   ЕТАП 6А по-горе) - заглавията на вътрешните страници са Unbounded
   300/400, без главни букви (CLAUDE.md: "заглавията на вътрешните
   страници са Unbounded 300/400 ... НЕ мастилени ленти с Oswald"). */
#page .sb-h1,
#page .sb-h2 {
	font-family: var(--sb-font-display);
	text-transform: none;
	color: var(--sb-heading);
}

#page .sb-h1 {
	font-weight: 300;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -.02em;
}

#page .sb-h2 {
	font-weight: 400;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -.01em;
}

#page .sb-h3 {
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-ink);
}

.sb-lead {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sb-muted);
}

.sb-label {
	display: block;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-note {
	font-size: 13px;
	color: var(--sb-muted-2);
}

/* ---- бутони ---- */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 40px;
	border: 1.5px solid var(--sb-accent);
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

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

.sb-btn--ghost {
	background-color: transparent;
	color: var(--sb-ink);
}

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

.sb-btn--pill {
	border: 0;
	border-radius: 999px;
	background-color: var(--sb-pink-soft);
	color: var(--sb-ink);
	letter-spacing: .1em;
}

.sb-btn--pill:hover {
	background-color: var(--sb-pink);
	color: var(--sb-ink);
}

.sb-btn--block {
	display: flex;
	width: 100%;
}

.sb-btn[disabled],
.sb-btn--disabled {
	background-color: #e9e3dc;
	border-color: #e9e3dc;
	color: var(--sb-muted-2);
	cursor: not-allowed;
}

.sb-link {
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--sb-pink);
	padding-bottom: 6px;
}

/* ---- цена (една, каквато я дава get_price_html() - TASKS.md правило 5) ---- */

.sb-price {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .03em;
	color: var(--sb-ink);
	white-space: nowrap;
}

.sb-price ins {
	text-decoration: none;
}

.sb-price del {
	color: var(--sb-muted-2);
	font-weight: 400;
	margin-right: 4px;
}

.sb-price__now--sale {
	color: var(--sb-pink);
}

.sb-price__was {
	color: var(--sb-muted-2);
	font-weight: 400;
	margin-left: 2px;
}

.sb-price__bgn {
	font-family: var(--sb-font-body);
	font-weight: 500;
	font-size: .78em;
	color: var(--sb-muted-2);
}

/* ---- продуктова карта - ЕДНА за целия сайт (Д9) ---- */

.sb-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--sb-white);
	border-radius: 12px;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-card__image {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: #f1ebe4;
}

.sb-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 16%;
	transition: transform .5s;
}

.sb-card:hover .sb-card__image img {
	transform: scale(1.04);
}

.sb-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 4px 10px;
	background-color: var(--sb-pink);
	color: var(--sb-white);
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-card__badge--out {
	background-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-card--out .sb-card__image img {
	opacity: .55;
	filter: grayscale(.4);
}

.sb-card--out .sb-price {
	color: var(--sb-muted-2);
}

/* ДЕФЕКТ, хванат при живото мерене на 390 (7В.6): при НАМАЛЕН продукт
   Woo дава стара + нова цена, всяка с двойното изписване €/лв. на
   Bulgarisation - "30.00€ / 58.67 лв. 20.00€ / 39.12 лв." е 220px в
   172px карта, а `.sb-price{white-space:nowrap}` (от макета, писан за
   единична цена) не ѝ дава да се пренесе: цялата категория тръгваше с
   42px хоризонтален скрол. Темата НЕ пипа валутата и не крие нищо
   (PLAN.md, решение от 09.09) - само разрешава пренасяне в картата. */
.sb-card .sb-price {
	white-space: normal;
}

.sb-card .sb-price del,
.sb-card .sb-price ins {
	display: inline-block;
}

.sb-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--sb-cream);
	color: var(--sb-sand);
}

.sb-card__placeholder svg {
	width: 64px;
	height: 64px;
}

.sb-card__info {
	display: block;
	padding: 14px 16px 18px;
}

.sb-card__name {
	display: block;
	margin: 0 0 4px;
	font-family: var(--sb-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--sb-ink);
}

.sb-card:hover .sb-card__name {
	color: var(--sb-pink);
}

.sb-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

/* ---- полета ---- */

.sb-field__label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-field__label b {
	color: var(--sb-pink);
	font-weight: 500;
}

.sb-input,
.sb-select,
.sb-textarea {
	display: block;
	width: 100%;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 15px;
	color: var(--sb-ink);
	border-radius: 0;
	outline: 0;
}

.sb-input::placeholder,
.sb-textarea::placeholder {
	color: #b7b1bd;
}

.sb-input:focus,
.sb-select:focus,
.sb-textarea:focus {
	border-color: var(--sb-accent);
}

.sb-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313149' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 38px;
}

.sb-textarea {
	min-height: 130px;
	resize: vertical;
}

.sb-field--error .sb-input,
.sb-field--error .sb-select,
.sb-field--error .sb-textarea {
	border-color: var(--sb-pink);
	background-color: #fff7fa;
}

.sb-field__error {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: #c4557d;
}

.sb-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--sb-muted);
	cursor: pointer;
}

.sb-check input {
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	accent-color: var(--sb-ink);
}

/* ---- трохи ---- */

.sb-crumbs {
	display: block;
	padding: 20px var(--sb-pad) 0;
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
}

.sb-crumbs a {
	color: var(--sb-muted-2);
	text-decoration: none;
}

.sb-crumbs a:hover {
	color: var(--sb-ink);
}

.sb-crumbs i {
	font-style: normal;
	margin: 0 8px;
	color: var(--sb-sand);
}

.sb-crumbs b {
	font-weight: 500;
	color: var(--sb-ink);
}

/* ---- секция ---- */

.sb-section {
	padding: 64px var(--sb-pad);
}

.sb-section__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin: 0 0 28px;
}

@media (max-width: 782px) {
	#page .sb-h1 {
		font-size: 34px;
	}

	#page .sb-h2 {
		font-size: 24px;
	}

	.sb-grid-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.sb-card__info {
		padding: 10px 12px 14px;
	}

	.sb-card__name {
		font-size: 13.5px;
	}

	.sb-price {
		font-size: 14px;
	}

	.sb-section {
		padding: 44px var(--sb-pad);
	}

	.sb-crumbs {
		padding-top: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.1 (елемент Д1) - Категория и магазин.
   Макет: makets/final/kategoria.html + <style> оттам. Заменя изцяло
   визуалния слой на ЕТАП 6А/6.1 (логиката за клон/подкатегории/филтър в
   inc/woo-archive.php остава same, само маркъпът/класовете стават тези
   на финалния макет). archive-product.php е без сайдбар (виж
   sofiaboutique_archive_no_sidebar()) - .site-main е на пълна ширина.
   ========================================================================== */

.sb-cat-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
	padding: 28px var(--sb-pad) 30px;
}

.sb-cat-head .sb-lead {
	max-width: 560px;
	margin: 14px 0 0;
}

.sb-cat-head__count {
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
	padding-bottom: 8px;
	white-space: nowrap;
}

.sb-subcats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0 var(--sb-pad) 22px;
	border-bottom: 1px solid var(--sb-line);
}

.sb-subcats a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	border-radius: 999px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-subcats a i {
	font-style: normal;
	font-family: var(--sb-font-body);
	font-weight: 600;
	font-size: 11px;
	color: var(--sb-muted-2);
}

.sb-subcats a:hover {
	border-color: var(--sb-accent);
}

.sb-subcats a.is-active {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-subcats a.is-active i {
	color: var(--sb-cream);
	opacity: .8;
}

.sb-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px var(--sb-pad);
	flex-wrap: wrap;
}

.sb-tools__filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: 0;
}

.sb-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink);
	line-height: 1;
	cursor: pointer;
}

.sb-chip > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}

.sb-chip > summary::-webkit-details-marker {
	display: none;
}

details.sb-chip[open] {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-chip.is-on {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-chip--toggle {
	gap: 8px;
}

.sb-chip--toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sb-chip--toggle::before {
	content: "";
	width: 12px;
	height: 12px;
	border: 1.5px solid var(--sb-line-strong);
	background-color: var(--sb-white);
}

.sb-chip--toggle:has(input:checked)::before {
	background-color: var(--sb-pink);
	border-color: var(--sb-pink);
}

/* Падащото съдържание на чиповете "Размер"/"Цена" - без визия в макета
   (там са показани само затворени), стилизирано в духа на ЕТАП 6А/6.1,
   виж "няма макет за X" в REPORT.md. */
.sb-chip__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	text-transform: none;
	letter-spacing: normal;
	cursor: auto;
}

.sb-chip__panel label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sb-font-body);
	font-size: 14px;
	color: var(--sb-ink);
	cursor: pointer;
}

.sb-chip__panel--price label {
	display: block;
	font-family: var(--sb-font-heading);
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-chip__panel input[type="number"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 9px 10px;
	font-family: var(--sb-font-body);
	font-size: 14px;
	color: var(--sb-ink);
	background-color: var(--sb-cream);
	border: 1px solid var(--sb-line-soft);
}

.sb-chip__panel button {
	padding: 9px 14px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 0;
	cursor: pointer;
}

.sb-chip--clear {
	border-color: transparent;
	background: none;
	color: var(--sb-pink);
	text-decoration: underline;
	text-decoration-color: var(--sb-pink-soft);
}

.sb-tools__mobile {
	display: none;
}

.sb-tools__count {
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
}

.sb-tools__sort {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--sb-font-heading);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-tools__sort .sb-select {
	width: auto;
	padding: 10px 38px 10px 14px;
	font-family: var(--sb-font-heading);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sb-cat-grid {
	padding: 8px var(--sb-pad) 44px;
}

.sb-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 0 var(--sb-pad) 64px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .06em;
}

/* #page - `paginate_links()` дава `.page-numbers`/`.current`/`.dots`
   (същите класове, които ЕТАП 6А, 6.0.6 стилизира общо за блог/търсене
   по-горе с `#page .page-numbers` - ID специфичност). За да не наследи
   категорията онзи по-общ вид, тук всичко е #page + .sb-pagination +
   класа на WordPress - по-специфично от 6.0.6-тото, печели. */
#page .sb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid transparent;
	background: none;
	color: var(--sb-ink);
	text-decoration: none;
}

#page .sb-pagination a.page-numbers:hover {
	border-color: var(--sb-line-soft);
	background-color: var(--sb-white);
}

#page .sb-pagination .page-numbers.current {
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	border-color: var(--sb-accent);
}

#page .sb-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

#page .sb-pagination .page-numbers.next {
	white-space: nowrap;
	gap: 8px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .14em;
	margin-left: 14px;
	width: auto;
}

.sb-pagination__info {
	width: 100%;
	text-align: center;
	font-family: var(--sb-font-body);
	font-size: 13px;
	color: var(--sb-muted-2);
	margin-top: 14px;
	letter-spacing: 0;
}

/* състояние: празен резултат от филтър */
.sb-empty {
	padding: 70px var(--sb-pad);
	text-align: center;
}

.sb-empty .sb-h2 {
	margin-bottom: 10px;
}

.sb-empty p {
	margin: 0 0 24px;
	color: var(--sb-muted);
}

/* състояние: нищо не е намерено при търсене (makets/final/tarsene.html).
   Отделно от `.sb-empty` - тук има и второ поле за търсене, центрирано в
   тясна колона. */
.sb-search-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 56px 0 72px;
	text-align: center;
}

.sb-search-empty p {
	margin: 0;
	font-family: var(--sb-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--sb-muted);
}

.sb-search-empty form {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	margin: 24px 0;
}

.sb-search-empty .sb-search-panel__input {
	font-size: 22px;
}

.sb-search-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* състояние: мобилен панел филтри (bottom sheet), отваря се от
   .sb-tools__mobile > [data-sb-sheet-open] (inc/woo-archive.php +
   assets/js/archive.js). */
.sb-sheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-color: rgba(49, 49, 73, .45);
}

.sb-sheet-overlay[hidden] {
	display: none;
}

.sb-sheet {
	width: 100%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	border-radius: 16px 16px 0 0;
	padding: 18px 18px 20px;
}

.sb-sheet__bar {
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--sb-sand);
	margin: 0 auto 16px;
}

.sb-sheet__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.sb-sheet__head button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--sb-ink);
	cursor: pointer;
}

/* `<fieldset>`, не `<div>` (виж inc/woo-archive.php) - за да може
   `disabled` реално да изключи полетата от GET заявката, когато не са
   активният комплект (assets/js/archive.js). Нулира браузърния
   fieldset border/padding/min-width. */
.sb-sheet__fields {
	display: contents;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sb-sheet__group {
	border-top: 1px solid var(--sb-line);
	padding: 14px 0;
	margin: 0;
}

.sb-sheet__group .sb-label {
	margin-bottom: 10px;
}

.sb-sizes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sb-sizes label {
	display: block;
	min-width: 48px;
	padding: 11px 0;
	text-align: center;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .08em;
	cursor: pointer;
}

.sb-sizes input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sb-sizes label:has(input:checked) {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-range {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sb-font-heading);
	font-size: 14px;
}

.sb-range .sb-input {
	width: 90px;
	padding: 9px 10px;
	text-align: center;
}

.sb-sheet__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.sb-sheet__actions .sb-btn {
	flex: 1;
	padding: 14px 10px;
}

@media (max-width: 782px) {
	.sb-cat-head {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 18px var(--sb-pad) 18px;
	}

	.sb-cat-head .sb-lead {
		font-size: 15px;
		margin-top: 10px;
	}

	.sb-subcats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 14px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.sb-subcats::-webkit-scrollbar {
		display: none;
	}

	.sb-subcats a {
		white-space: nowrap;
		padding: 9px 14px;
		font-size: 12px;
	}

	.sb-tools {
		padding: 12px var(--sb-pad);
	}

	.sb-tools__filters {
		display: none;
	}

	.sb-tools__mobile {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 10px;
	}

	.sb-tools__mobile .sb-chip {
		flex: 1;
		justify-content: center;
		padding: 13px 10px;
	}

	.sb-tools__mobile .sb-tools__count {
		flex: none;
	}

	/* Реалният select#orderby, преместен в мобилната лента и стилизиран
	   като чип - няма макет за отделно мобилно меню "Сортирай" (само
	   бутонът "Подреди" е показан статично в demo-то), избрано най-
	   простото решение: същия <select>, нула дублирани полета/JS. */
	.sb-tools__sort {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	.sb-tools__sort .sb-tools__sort-label {
		display: none;
	}

	.sb-tools__sort .sb-select {
		width: 100%;
		padding: 13px 34px 13px 14px;
		text-align: center;
	}

	.sb-cat-grid {
		padding: 4px var(--sb-pad) 30px;
	}

	.sb-pagination {
		padding-bottom: 44px;
		gap: 2px;
	}

	#page .sb-pagination .page-numbers {
		min-width: 36px;
		height: 38px;
		padding: 0 6px;
	}

	#page .sb-pagination .page-numbers.next {
		margin-left: 6px;
	}

	.sb-chip__panel {
		position: static;
		width: 100%;
		margin-top: 8px;
	}

	/* Полето и бутонът в празния резултат не се събират един до друг в
	   280px колона - падат един под друг на цяла ширина. */
	.sb-search-empty {
		padding: 36px 0 44px;
	}

	.sb-search-empty form {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.sb-search-empty .sb-btn {
		width: 100%;
	}

	.sb-search-empty__actions .sb-btn {
		width: 100%;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.2 (елемент Д2 + Д9 състоянията му) - Продукт.
   Макет: makets/final/produkt.html. single-product.php + inc/woo-single.php.
   Галерията/tabs/related са собствен маркъп; добавянето в количката е
   РЕАЛНАТА Woo форма (`woocommerce_template_single_add_to_cart()`) вътре
   в `.sb-buy` - тук само визуално преобличане на Woo-овите класове
   (`.quantity/.qty/.single_add_to_cart_button/table.variations/...`),
   не преправяне на логиката ѝ.
   ========================================================================== */

.sb-pdp {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	padding: 22px var(--sb-pad) 56px;
	align-items: start;
}

.sb-gallery {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
}

.sb-gallery--single {
	grid-template-columns: 1fr;
}

.sb-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-gallery__thumb {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	padding: 0;
	background-color: var(--sb-white);
	border: 1.5px solid transparent;
	cursor: pointer;
}

.sb-gallery__thumb.is-on {
	border-color: var(--sb-accent);
}

.sb-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 14%;
}

.sb-gallery__main {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--sb-white);
}

.sb-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}

/* Само `.is-active` (сложено от inc/woo-single.php на първата снимка по
   подразбиране, сменяно от assets/js/product.js при клик на миниатюра)
   се вижда на десктоп - виж мобилния override по-долу за хоризонталния
   scroll, където се виждат всички. */
.sb-gallery__main img {
	display: none;
}

.sb-gallery__main img.is-active {
	display: block;
}

.sb-gallery__dots {
	display: none;
}

.sb-pinfo {
	position: sticky;
	top: 24px;
}

.sb-pinfo .sb-kicker {
	margin-bottom: 12px;
}

#page .sb-pinfo .sb-h2 {
	font-size: 34px;
	margin-bottom: 14px;
}

.sb-pinfo__price {
	margin: 0 0 26px;
}

.sb-pinfo__price .sb-price {
	font-size: 26px;
}

.sb-pinfo__price .sb-price__bgn {
	font-size: 15px;
}

.sb-pinfo__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 10px;
}

.sb-pinfo__row .sb-label b {
	color: var(--sb-ink);
	font-weight: 500;
}

/* ---- .sb-sizes - бутони (не `<span>`, за истинска клавиатурна/click
   достъпност) - визуално идентични на макета. ---- */
.sb-sizes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 26px;
}

/* `color` е ЗАДЪЛЖИТЕЛЕН тук, не подразбиращ се (ДЕФЕКТ 7Г.1а): бутоните
   бяха бял текст на бял фон, защото GeneratePress генерира динамично
   `button, html input[type="button"], html input[type="reset"], html
   input[type="submit"] { color:#fff }` (`inc/css-output.php`, цветовете
   на бутоните от Персонализатора) - (0,0,1). Наследяване от `body` няма
   при `<button>`: щом има ПОПАДАЩО правило за `color`, то печели над
   inherit, независимо от специфичността на родителя. `.sb-sizes__opt`
   е (0,1,0) и бие (0,0,1) при изрична стойност - без `!important` и
   без нужда от `.sb-sizes button.sb-sizes__opt`. */
.sb-sizes__opt {
	min-width: 54px;
	padding: 12px 0;
	text-align: center;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	color: var(--sb-ink);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .08em;
	cursor: pointer;
}

.sb-sizes__opt.is-on {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-sizes__opt:disabled,
.sb-sizes__opt.is-off {
	color: #c9c4cf;
	border-color: var(--sb-sand);
	text-decoration: line-through;
	background-color: #f4efe9;
	cursor: not-allowed;
}

/* ---- .sb-buy - обвива РЕАЛНАТА Woo форма (проста или вариативна) -
   стилизира нейните класове, не строи нови бутони/полета. ---- */
.sb-buy {
	display: flex;
	gap: 10px;
	margin: 0 0 14px;
	flex-wrap: wrap;
}

.sb-buy form.cart {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

/* Реалният variation <select> остава в DOM (assets/js/product.js го
   управлява), само скрит визуално - `.sb-sizes__opt` е UI-то, което
   клиентката вижда. */
.sb-buy table.variations,
.sb-buy .woocommerce-variation-description,
.sb-buy .woocommerce-variation-price,
.sb-buy .woocommerce-variation-availability,
.sb-buy .reset_variations {
	display: none;
}

.sb-buy .quantity {
	margin: 0;
}

.sb-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sb-accent);
	background-color: var(--sb-white);
}

.sb-qty button {
	width: 42px;
	height: 50px;
	border: 0;
	background: none;
	font-family: var(--sb-font-heading);
	font-size: 18px;
	cursor: pointer;
	color: var(--sb-ink);
}

.sb-qty input.qty {
	width: 36px;
	border: 0;
	text-align: center;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 15px;
	background: none;
	-moz-appearance: textfield;
}

.sb-buy .single_add_to_cart_button,
.sb-buy .woocommerce-variation-add-to-cart-disabled .button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 16px 20px;
	border: 1.5px solid var(--sb-accent);
	background-color: var(--sb-accent);
	color: var(--sb-cream);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.sb-buy .single_add_to_cart_button:hover {
	background-color: var(--sb-accent-hover);
	border-color: var(--sb-accent-hover);
}

.sb-buy .woocommerce-variation-add-to-cart-disabled .button,
.sb-buy .single_add_to_cart_button.disabled {
	background-color: #e9e3dc;
	border-color: #e9e3dc;
	color: var(--sb-muted-2);
	cursor: not-allowed;
}

/* ДЕФЕКТ 7Г.1в: „Добави в количката" излизаше ЛИЛАВ `rgb(127,84,179)` на
   живо - `woocommerce.css` слага `.woocommerce #respond input#submit.alt,
   .woocommerce a.button.alt, .woocommerce button.button.alt,
   .woocommerce input.button.alt { background-color:<акцентът на Woo> }`
   = (0,3,1), а `.sb-buy .single_add_to_cart_button` по-горе е (0,2,0) и
   губи. `#page` е обвивката на GeneratePress около съдържанието
   (`inc/markup.php` → `<div id="page" class="site grid-container ...">`),
   значи `#page .sb-buy button.single_add_to_cart_button` = (1,2,1) бие
   (0,3,1) в колоната на ID-тата - без нито един `!important`. */
#page .sb-buy button.single_add_to_cart_button {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

#page .sb-buy button.single_add_to_cart_button:hover {
	background-color: var(--sb-accent-hover);
	border-color: var(--sb-accent-hover);
}

#page .sb-buy button.single_add_to_cart_button.disabled,
#page .sb-buy .woocommerce-variation-add-to-cart-disabled .button {
	background-color: #e9e3dc;
	border-color: #e9e3dc;
	color: var(--sb-muted-2);
	cursor: not-allowed;
}

/* Всеки ДРУГ Woo бутон, който темата не е преоблякла в `.sb-btn` -
   „Виж количката" в известието, бутоните на Моят профил / Вход /
   Регистрация / Изгубена парола / Адреси, „Поръчай отново". Woo ги дава
   с клас `button` (често + `alt`) и собствен акцентен фон; `:not(.sb-btn)`
   пази нашите бутони (купонът е ghost, `#place_order` и „Към плащане"
   са `.sb-btn`) непокътнати. */
#page button.button:not(.sb-btn),
#page a.button:not(.sb-btn),
#page input.button:not(.sb-btn) {
	background-color: var(--sb-accent);
	border: 1.5px solid var(--sb-accent);
	color: var(--sb-cream);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
	padding: 14px 24px;
}

#page button.button:not(.sb-btn):hover,
#page a.button:not(.sb-btn):hover,
#page input.button:not(.sb-btn):hover {
	background-color: var(--sb-accent-hover);
	border-color: var(--sb-accent-hover);
	color: var(--sb-cream);
}

.sb-buy .variations_button,
.sb-buy .woocommerce-variation-add-to-cart-disabled {
	display: flex;
	gap: 10px;
	flex: 1;
	flex-wrap: wrap;
}

.sb-pinfo__perks {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-pinfo__perks span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sb-pinfo__perks .sb-icon {
	width: 16px;
	height: 16px;
}

/* ---- .sb-acc - три сгъваеми details/summary ---- */
.sb-acc {
	border-top: 1px solid var(--sb-line-strong);
}

.sb-acc details {
	border-bottom: 1px solid var(--sb-line-strong);
}

.sb-acc summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	cursor: pointer;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sb-acc summary::-webkit-details-marker {
	display: none;
}

.sb-acc summary::after {
	content: "+";
	font-size: 20px;
	font-weight: 400;
	color: var(--sb-muted-2);
}

.sb-acc details[open] summary::after {
	content: "–";
}

.sb-acc p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sb-muted);
}

.sb-acc ul {
	margin: 0 0 16px;
	padding-left: 18px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sb-muted);
}

.sb-related {
	padding: 0 var(--sb-pad) 64px;
}

.sb-related .sb-section__head {
	margin-bottom: 24px;
}

.sb-related + .sb-related {
	padding-top: 0;
}

/* ---- състояния (Д9) ---- */

/* Woo `.woocommerce-message`/`.woocommerce-error` вече изглеждат като
   `.sb-notice`/`.sb-alert` навсякъде (глобалното правило от ЕТАП 6А,
   6.0.6, обновено в 7.7) - тук само маха празната обвивка, ако няма
   известия. */
.sb-pdp-notices:empty {
	display: none;
}

.sb-stickybuy {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 40;
	transform: translateX(-50%);
	width: 100%;
	max-width: 390px;
	display: none;
	align-items: center;
	gap: 12px;
	background-color: var(--sb-white);
	border-top: 1px solid var(--sb-line-strong);
	padding: 10px 14px;
}

.sb-stickybuy[hidden] {
	display: none;
}

.sb-stickybuy .sb-price {
	font-size: 17px;
}

.sb-stickybuy .sb-btn {
	flex: 1;
	padding: 14px 10px;
	white-space: nowrap;
}

/* ---- таблица с размери (7Е.3) - линк в .sb-pinfo__row + модал <dialog>.
   Макет: makets/final/produkt.html, <style> редове 81-99 (мобилното -
   редове 101-102), маркъп ред 164 и редове 207-224. ---- */

/* ДЕФЕКТ 1.3 отново: `.elementor-kit-9378 a{color:#eb82a3}` е (0,1,1) и се
   зарежда СЛЕД темата, тоест бие всеки едно-класов селектор за линк.
   Линкът е вътре в #page (за разлика от хедъра), затова тук минава
   ID-техниката: `#page .sb-pinfo__row a.sb-sizechart-link` е (1,2,1) и
   печели цвета и липсата на подчертаване само по специфичност. */
#page .sb-pinfo__row a.sb-sizechart-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sb-font-heading);
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-ink);
	text-decoration: none;
	border-bottom: 0;
}

#page .sb-pinfo__row a.sb-sizechart-link:hover {
	text-decoration: underline;
}

/* по-малка от глобалната `.sb-icon` (18px) - (0,2,0) бие (0,1,0). */
.sb-sizechart-link .sb-icon {
	width: 14px;
	height: 14px;
}

/* Радиусът от макета минава по нормалния път: общият reset по-горе изброява
   button/input/select/textarea/img/table/fieldset, а `dialog` НЕ е в него.
   `border: 0` и `padding` нулират UA-стила на `<dialog>` (solid рамка + 1em). */
.sb-sizechart {
	max-width: 560px;
	width: calc(100% - 36px);
	padding: 32px;
	border: 0;
	border-radius: 12px;
	background-color: var(--sb-white);
	color: var(--sb-ink);
}

.sb-sizechart::backdrop {
	background-color: rgba(49, 49, 73, .45);
}

.sb-sizechart__head {
	position: relative;
	margin: 0;
}

.sb-sizechart__head .sb-kicker {
	margin-bottom: 8px;
}

/* `.sb-h2` в темата е скоупнат като `#page .sb-h2` (1,1,0) - модалът е
   вътре в #page, затова размерът от макета иска поне толкова специфичен
   селектор; (1,2,0) бие и мобилния `#page .sb-h2{font-size:24px}`. */
#page .sb-sizechart__head .sb-h2 {
	font-size: 26px;
}

.sb-sizechart__close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--sb-ink);
}

.sb-sizechart__close .sb-icon {
	width: 18px;
	height: 18px;
}

.sb-sizechart__note {
	margin: 8px 0 18px;
	font-family: var(--sb-font-body);
	font-size: 14px;
	color: var(--sb-muted);
}

.sb-sizechart__scroll {
	overflow-x: auto;
}

/* `.entry-content table` (0,1,1) слага долен марж 1.6em на всяка таблица в
   съдържанието - модалът рендерира вътре в `.entry-content`, затова маржът
   се нулира тук, а `#page` вдига правилото на (1,1,0) и го бие. */
#page .sb-sizechart__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

/* `.entry-content table:not(.shop_table) th` е (0,2,2): мастилена шапка,
   кремав текст и рамка от всички страни. Същата техника като при
   `table.shop_table` по-горе - `#page` прави правилото (1,1,1) и печели;
   `border: 0` е задължителен, иначе рамката от онова правило остава.
   `#f2e6d9` е стойността от макета - в темата няма променлива за нея и
   задачата изрично забранява да се въвежда нова. */
#page .sb-sizechart__table th {
	background-color: #f2e6d9;
	color: var(--sb-ink);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 12px;
	text-align: left;
	border: 0;
}

#page .sb-sizechart__table td {
	font-family: var(--sb-font-body);
	font-size: 15px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--sb-line-strong);
}

#page .sb-sizechart__table td:first-child {
	font-weight: 700;
}

.sb-sizechart__table tbody tr:nth-child(even) {
	background-color: var(--sb-cream);
}

.sb-sizechart__image img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sb-line-soft);
	margin-top: 18px;
}

@media (max-width: 782px) {
	.sb-pdp {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 14px 0 36px;
	}

	.sb-gallery {
		display: block;
	}

	.sb-gallery__thumbs {
		display: none;
	}

	.sb-gallery__main {
		aspect-ratio: auto;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 4px;
		background: none;
		scrollbar-width: none;
	}

	.sb-gallery__main::-webkit-scrollbar {
		display: none;
	}

	.sb-gallery__main img,
	.sb-gallery__main img.is-active {
		display: block;
		flex: 0 0 86%;
		width: 86%;
		max-width: none;
		aspect-ratio: 3 / 4;
		height: auto;
		object-position: 50% 10%;
		scroll-snap-align: start;
	}

	.sb-buy .single_add_to_cart_button,
	.sb-buy .woocommerce-variation-add-to-cart-disabled .button {
		padding: 16px 12px;
		letter-spacing: .12em;
		min-width: 0;
	}

	.sb-qty button {
		width: 36px;
	}

	.sb-gallery__dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 10px;
		padding: 0 var(--sb-pad);
	}

	.sb-gallery__dots i {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: var(--sb-sand);
	}

	.sb-gallery__dots i.is-on {
		background-color: var(--sb-accent);
	}

	.sb-pinfo {
		position: static;
		padding: 0 var(--sb-pad);
	}

	#page .sb-pinfo .sb-h2 {
		font-size: 26px;
	}

	.sb-pinfo__price .sb-price {
		font-size: 22px;
	}

	.sb-related {
		padding: 0 var(--sb-pad) 40px;
	}

	.sb-stickybuy {
		display: flex;
	}

	/* модалът става лист отдолу (bottom sheet) - макет produkt.html,
	   редове 101-102. */
	.sb-sizechart {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		margin: 0;
		width: 100%;
		max-width: none;
		max-height: 85vh;
		overflow-y: auto;
		border-radius: 16px 16px 0 0;
		padding: 24px 18px 32px;
	}

	.sb-sizechart__close {
		top: -4px;
		right: 0;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.3 (елемент Д3) - Количка.
   Макет: makets/final/kolichka.html. woocommerce/cart/cart.php,
   cart-totals.php, cart-empty.php (override в темата) + inc/woo-cart.php.
   ========================================================================== */

.sb-page-head {
	padding: 28px var(--sb-pad) 26px;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.sb-page-head .sb-note {
	font-family: var(--sb-font-heading);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sb-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 40px;
	padding: 0 var(--sb-pad) 64px;
	align-items: start;
}

.sb-cart__items {
	border-top: 1px solid var(--sb-line-strong);
}

.sb-cart__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 130px 110px;
	gap: 20px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--sb-line);
}

.sb-cart__thumb {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--sb-white);
}

.sb-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 14%;
}

.sb-cart__name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin: 0 0 4px;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-cart__meta {
	display: block;
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
	margin: 0 0 10px;
}

.sb-cart__meta dl,
.sb-cart__meta dt,
.sb-cart__meta dd {
	display: inline;
	margin: 0;
	padding: 0;
	font: inherit;
}

.sb-cart__remove {
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sb-cart__remove:hover {
	color: var(--sb-ink);
	border-color: var(--sb-accent);
}

/* `.sb-qty` тук стилизира реалния Woo `woocommerce_quantity_input()`
   (`div.quantity > input.qty`) - без +/- бутони (мокетът ги показва, но
   без JS зависимост тук input type=number със стрелките на браузъра е
   приемливо за GET/POST количка форма; виж "няма макет за X" в
   REPORT.md за разликата спрямо продуктовата страница, където JS вече
   тече заради variation синхрона). */
.sb-qty,
div.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
}

.sb-qty input.qty,
div.quantity input.qty {
	width: 44px;
	border: 0;
	text-align: center;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 15px;
	background: none;
	padding: 13px 0;
}

/* `.sb-qty` в количката (7В.4) - същият компонент като на продукта, само
   с размерите от kolichka.html (бутони 38x44 вместо 42x50). `#page`
   специфичност: `.woocommerce .quantity .qty{width:3.631em}` в
   woocommerce.css (3 класа) бие `.sb-qty input.qty` и зарежда СЛЕД темата. */
body.woocommerce-cart #page .sb-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	margin: 0;
	padding: 0;
	width: auto;
}

body.woocommerce-cart #page .sb-qty button {
	width: 38px;
	height: 44px;
	border: 0;
	background: none;
	font-family: var(--sb-font-heading);
	font-size: 17px;
	color: var(--sb-ink);
	cursor: pointer;
	padding: 0;
}

body.woocommerce-cart #page .sb-qty input.qty {
	width: 34px;
	height: auto;
	padding: 0;
	border: 0;
	text-align: center;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 15px;
	background: none;
	-moz-appearance: textfield;
}

.sb-cart__total {
	text-align: right;
}

.sb-cart__total .sb-price__bgn {
	display: block;
	margin-top: 2px;
}

.sb-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 440px;
	margin: 24px 0 0;
}

/* Невалиден код (12В.2а). cart.js на WooCommerce слага САМ
   `<p class="coupon-error-notice">` вътре в `.coupon` и `has-error` на
   полето, когато кодът не съществува - визията е тази на
   `.sb-field__error` / `.sb-field--error` от картата „Невалиден код" в
   kolichka.html, само класовете са на Woo. `flex: 0 0 100%` го сваля на
   собствен ред под полето и бутона (родителят е flex).
   `input.sb-input.has-error` е (0,3,0) - GP-то бие полето с
   `input[type="text"]` (0,1,1) и без това щеше да остане сиво. */
.sb-coupon .coupon-error-notice {
	flex: 0 0 100%;
	margin: 0;
	font-size: 12.5px;
	color: #c4557d;
}

.sb-coupon input.sb-input.has-error {
	border-color: var(--sb-pink);
	background-color: #fff7fa;
}

.sb-coupon .sb-input {
	flex: 1;
}

.sb-coupon .sb-btn {
	padding: 14px 24px;
}

.sb-coupon-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sb-line);
	font-size: 14.5px;
}

.sb-coupon-line b {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12px;
	background-color: var(--sb-pink-soft);
	padding: 4px 8px;
}

.sb-summary {
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	padding: 26px;
	position: sticky;
	top: 24px;
}

.sb-summary .sb-h3 {
	margin: 0 0 18px;
}

.sb-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--sb-line);
	font-size: 14.5px;
}

.sb-summary__row--total {
	border: 0;
	padding-top: 18px;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-summary__row--total .sb-price {
	font-size: 20px;
	text-transform: none;
}

.sb-summary .sb-btn {
	margin-top: 18px;
}

.sb-summary__continue {
	display: block;
	text-align: center;
	margin-top: 14px;
	font-family: var(--sb-font-heading);
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-muted);
	text-decoration: none;
}

.sb-ship {
	background-color: var(--sb-hero);
	border: 1px solid var(--sb-line);
	padding: 16px 18px;
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sb-muted);
}

.sb-ship b {
	display: block;
	color: var(--sb-ink);
	margin-bottom: 8px;
}

.sb-ship__bar {
	height: 6px;
	background-color: #eee7df;
	border-radius: 3px;
	overflow: hidden;
}

.sb-ship__bar i {
	display: block;
	height: 100%;
	background-color: var(--sb-pink);
}

.sb-ship--done {
	border-color: var(--sb-pink);
}

.sb-empty .sb-btn + .sb-btn {
	margin-left: 10px;
}

@media (max-width: 782px) {
	.sb-page-head {
		padding: 18px var(--sb-pad) 16px;
	}

	.sb-cart {
		grid-template-columns: 1fr;
		gap: 26px;
		padding-bottom: 40px;
	}

	.sb-cart__row {
		grid-template-columns: 76px minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		gap: 10px 14px;
		padding: 16px 0;
		align-items: start;
	}

	.sb-cart__thumb {
		grid-row: 1 / 3;
	}

	.sb-cart__row > div:nth-child(2) {
		grid-column: 2 / 4;
	}

	.sb-cart__row .sb-cart__qty,
	.sb-cart__row .sb-qty,
	.sb-cart__row div.quantity {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.sb-cart__total {
		grid-column: 3;
		grid-row: 2;
		text-align: right;
		align-self: center;
	}

	.sb-summary {
		position: static;
		padding: 20px;
	}

	.sb-coupon {
		max-width: none;
	}

	.sb-empty {
		padding: 50px var(--sb-pad) 60px;
	}

	.sb-empty .sb-btn {
		display: flex;
		margin: 0 0 10px;
	}

	.sb-empty .sb-btn + .sb-btn {
		margin-left: 0;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.4 (елемент Д4) - Плащане.
   Макет: makets/final/chekaut.html. woocommerce/checkout/form-checkout.php,
   form-billing.php, form-shipping.php, review-order.php, payment.php
   (override в темата). Полетата/методите/nonce-овете са РЕАЛНИТЕ на Woo/
   Bulgarisation/Conditional Payments - тук само визия, виж inc/woo-checkout.php.
   ========================================================================== */

/* На чекаута заглавният ред е H1 вляво / стъпки вдясно
   (chekaut.html: `.sb-page-head{justify-content:space-between}`) -
   количката няма стъпки и остава без разтягане. */
body.woocommerce-checkout .sb-page-head {
	justify-content: space-between;
}

.sb-steps {
	display: flex;
	gap: 18px;
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
}

.sb-steps span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sb-steps i {
	font-style: normal;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--sb-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}

.sb-steps .is-done i {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

.sb-steps .is-on {
	color: var(--sb-ink);
}

.sb-steps .is-on i {
	border-color: var(--sb-pink);
	color: var(--sb-pink);
}

/* `.sb-checkout-coupon` (ПАРТИДА 7Б, 7Б.2) - override на
   woocommerce/checkout/form-coupon.php. Реалният Woo `<form
   class="checkout_coupon">` е нарочно ИЗВЪН `<form name="checkout"
   class="sb-co">` (вложена `<form>` в `<form>` не е валиден HTML), CSS-
   ът само подравнява десния край с колоната на `.sb-osum` (420px, виж
   `.sb-co`) - без макет за точния коупон ред, минимален дискретен вид
   вместо Woo-овата тъмна `wc_print_notice()` кутия (QA дефект). */
.sb-checkout-coupon {
	max-width: 420px;
	margin: 0 0 16px auto;
	padding: 0 var(--sb-pad);
	text-align: right;
}

.sb-checkout-coupon__toggle {
	margin: 0;
	font-family: var(--sb-font-heading);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
}

.sb-checkout-coupon__toggle .showcoupon {
	color: var(--sb-ink);
	border-bottom: 1px solid var(--sb-line-strong);
	text-decoration: none;
}

.checkout_coupon.woocommerce-form-coupon {
	display: flex;
	gap: 8px;
	max-width: 380px;
	margin: 10px 0 0 auto;
}

.checkout_coupon .sb-input {
	flex: 1;
}

.checkout_coupon .sb-btn {
	padding: 14px 20px;
}

.sb-co {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	padding: 0 var(--sb-pad) 64px;
	align-items: start;
}

/* Изрично място на двете колони: Woo/плъгините слагат собствени елементи
   директно в `<form class="sb-co">` и без това всеки от тях заемаше
   клетка и избутваше обобщението надолу (ДЕФЕКТ 7В.2.4а - `.sb-osum`
   стоеше в долния край на дясната колона). */
.sb-co > .sb-co__main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.sb-co > .sb-osum {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
}

.sb-co .sb-h3 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--sb-line-strong);
}

.sb-co__block {
	margin: 0 0 34px;
}

.sb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sb-form-grid .is-wide,
.sb-form-grid .form-row-wide {
	grid-column: span 2;
}

/* Woo-овата истинска маркировка на полето е `<p class="form-row ...">`
   (не `<label>`, за да не се чупи country→state JS каскадата) - визуално
   идентично на `.sb-field` от макета, само друг таг. */
.sb-field,
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row {
	display: block;
	margin: 0;
}

.woocommerce-input-wrapper {
	display: block;
}

.sb-field__label .required,
.woocommerce-billing-fields .form-row label .required,
.woocommerce-shipping-fields .form-row label .required {
	color: var(--sb-pink);
	font-weight: 500;
	text-decoration: none;
	border: 0;
}

.woocommerce-shipping-fields h3 {
	margin: 0 0 16px;
}

.woocommerce-shipping-fields .shipping_address {
	margin-top: 16px;
}

/* Полетата на чекаута с ID специфичност - woocommerce.css зарежда СЛЕД
   темата и `.woocommerce form .form-row .input-text,... select` (3 класа)
   бие голия `.sb-input` (1 клас): връщаше радиус 4px и своя chevron
   отгоре на нашия. Стойностите са същите като `.sb-input`/`.sb-select`
   в общия слой - тук само специфичността. */
body.woocommerce-checkout #page .sb-input,
body.woocommerce-checkout #page .sb-select,
body.woocommerce-checkout #page .sb-textarea {
	display: block;
	width: 100%;
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 15px;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	border-radius: 0;
}

body.woocommerce-checkout #page .sb-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313149' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 38px;
}

body.woocommerce-checkout #page .sb-textarea {
	min-height: 130px;
}

/* Woo инжектира `<wc-order-attribution-inputs>` (скрити полета за
   източника на поръчката) на `woocommerce_checkout_billing` - тоест
   като ПЪРВО дете на `.sb-form-grid` (ДЕФЕКТ 7В.2.1: заемаше първата
   клетка на решетката и "Име" отиваше вдясно, "Фамилия" вляво).
   Елементът НЕ се маха - носи реални hidden полета, които се изпращат
   и от `display:none`. */
.sb-co wc-order-attribution-inputs {
	display: none;
}

/* ---- .sb-opts / .sb-opt - метод на доставка
   (`sofiaboutique_checkout_shipping_html()`, inc/woo-checkout.php) и метод
   на плащане (`woocommerce/checkout/payment.php` + `payment-method.php`,
   override-и на темата). И в двата случая маркъпът е този на макета:
   реалният `<input>` на Woo остава в DOM (checkout.js/Bulgarisation
   слушат точно него), но е визуално скрит, а `.sb-opt__radio` рисува
   кръгчето. Състоянието идва от `:checked` - без JS, значи преживява
   всеки `updated_checkout` фрагмент. ---- */
.sb-opts,
ul.woocommerce-shipping-methods,
ul.wc_payment_methods.sb-opts {
	display: grid;
	gap: 9px;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.woocommerce-shipping-methods > li,
ul.wc_payment_methods > li.wc_payment_method {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.sb-opt {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	padding: 15px 16px;
	cursor: pointer;
	margin: 0;
	font-family: var(--sb-font-body);
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-ink);
}

/* ДЕФЕКТ 7Г.1б: редовете за доставка се препокриваха - `label.sb-opt`
   излизаше `display:inline`, защото `woocommerce.css` носи
   `.woocommerce ul#shipping_method li label { display:inline }` и бие
   `.sb-opt` (0,1,0). При ПЛАЩАНИЯТА такова правило няма, затова там
   `.sb-opt` работеше и дефектът не се виждаше.
   ВНИМАНИЕ (премерено с Playwright срещу истинския woocommerce.css в
   tools/woo-mock, не изчислено на око): Woo-овият селектор е (1,1,3) -
   един ID (`#shipping_method`), един клас (`.woocommerce`), три типа.
   `ul#shipping_method > li > label.sb-opt` е СЪЩОТО (1,1,3) - равенство,
   а Woo се зарежда СЛЕД темата и печели. Затова тук стои и `#page`
   (обвивката на GeneratePress около съдържанието): (2,1,3) бие (1,1,3)
   в колоната на ID-тата, без нито един `!important`.
   Декларациите са същите като на `.sb-opt` по-горе (един и същи ред от
   макета chekaut.html), не „поправка" върху него - Woo презарежда целия
   фрагмент при `updated_checkout`, значи стилът трябва да е чист по
   селектори, без JS. */
#page ul#shipping_method > li > label.sb-opt {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	padding: 15px 16px;
	cursor: pointer;
	margin: 0;
	font-family: var(--sb-font-body);
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-ink);
}

/* Избраният ред - същата 1.5px мастилена рамка като при плащанията.
   Трябва да бие СОБСТВЕНИЯ ни базов ред по-горе (2,1,3), иначе неговият
   `border:1px solid var(--sb-sand)` връща тънката рамка обратно. */
#page ul#shipping_method > li > input:checked + label.sb-opt,
#page ul#shipping_method > li > label.sb-opt.is-on {
	border: 1.5px solid var(--sb-accent);
}

#page ul#shipping_method > li > input:focus-visible + label.sb-opt {
	outline: 2px solid var(--sb-pink);
	outline-offset: 2px;
}

/* Кутията с полетата на Bulgarisation пада ПОД избрания ред. В макета
   `.sb-opts` е грид и кутията е грид дете (`grid-column:1/-1`); на живо
   тя е дете на `li`, значи блок в нормалния поток - явно `display:block`,
   за да не я хване чужд `display` и да не увисне до етикета. */
ul#shipping_method > li > .sb-opt__extra {
	display: block;
	grid-column: auto;
	margin: -4px 0 4px;
	padding: 14px 16px 16px;
	background-color: var(--sb-hero);
	border: 1px solid var(--sb-line);
	border-top: 0;
}

/* Реалният радио бутон - скрит визуално, НЕ `display:none`
   (остава фокусируем и достъпен за клавиатура/екранни четци). */
.sb-opts input.shipping_method,
.sb-opts input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sb-opt.is-on,
.sb-opts input:checked + .sb-opt,
ul.wc_payment_methods > li.is-on {
	border: 1.5px solid var(--sb-accent);
}

.sb-opts input:focus-visible + .sb-opt {
	outline: 2px solid var(--sb-pink);
	outline-offset: 2px;
}

/* Плащането: `li`-то е кутията (`.payment_box` на Woo е СЕСТРА на
   етикета - checkout.js я slideUp/slideDown-ва по клас, не се мести),
   затова рамката е на него, а `.sb-opt` вътре е само редът. */
ul.wc_payment_methods > li.wc_payment_method {
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	padding: 15px 16px;
}

ul.wc_payment_methods > li.wc_payment_method:has(input:checked) {
	border: 1.5px solid var(--sb-accent);
}

ul.wc_payment_methods > li.wc_payment_method .sb-opt {
	border: 0;
	padding: 0;
	background: none;
}

ul.wc_payment_methods > li.wc_payment_method:has(input:checked) .sb-opt {
	border: 0;
}

/* Описанието на метода - обикновен текст под името, без рамка и без фон
   (ДЕФЕКТ 7В.2.3: голяма кутия в двойна рамка). Отместено колкото
   радиото + логото, за да е под името. */
ul.wc_payment_methods li .payment_box {
	margin: 8px 0 0 84px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sb-muted-2);
}

ul.wc_payment_methods li .payment_box p {
	margin: 0 0 6px;
}

ul.wc_payment_methods li .payment_box p:last-child {
	margin-bottom: 0;
}

/* Логата на картите - вдясно, малки (7В.2.3). `$gateway->get_icon()` дава
   `<img>`-и на самия шлюз, темата не измисля свои. */
.sb-opt__icons {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: none;
}

.sb-opt__icons img {
	max-height: 20px;
	width: auto;
	margin: 0;
}

.sb-opt__radio {
	width: 17px;
	height: 17px;
	border: 1.5px solid #b7b1bd;
	border-radius: 50%;
	flex: none;
}

.sb-opt.is-on .sb-opt__radio {
	border-color: var(--sb-accent);
	background: radial-gradient(var(--sb-ink) 42%, transparent 46%);
}

.sb-opt__logo {
	width: 54px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sb-font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	background-color: #f1ebe4;
	color: var(--sb-ink);
	flex: none;
}

/* Средната колона на реда (име + срок) заема остатъка - в макета това е
   `.sb-opt > span:nth-child(3)`, тук е клас, защото логото може да
   липсва (непознат превозвач) и позицията се мести. */
.sb-opt__name {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-opt b {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
}

.sb-opt small {
	display: block;
	color: var(--sb-muted-2);
	font-size: 12.5px;
	margin-top: 2px;
}

.sb-opt em {
	font-style: normal;
	margin-left: auto;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--sb-muted-2);
	font-size: 13px;
	white-space: nowrap;
}

.sb-opt__extra {
	grid-column: 1 / -1;
	margin: -4px 0 4px;
	padding: 14px 16px 16px;
	background-color: var(--sb-hero);
	border: 1px solid var(--sb-line);
	border-top: 0;
}

.sb-opt__extra .sb-field {
	max-width: 420px;
}

/* Bulgarisation слага празна кутия за полетата на ВСЕКИ метод, не само на
   избрания (`<div class="woo-bg-additional-fields" data-type="office"></div>`),
   и я пълни при избор. Кутията ѝ не се маха от DOM (плъгинът пише вътре
   в нея по id), а се СКРИВА, докато е празна - иначе под всеки ред стои
   празно бежово квадратче 31px (мерено на живо, 7В.6). `:has()` е
   динамичен: щом плъгинът сложи съдържание, кутията се появява сама, без
   JS от темата.
   Скоупнатите варианти (1,2,2) са задължителни: `ul#shipping_method > li >
   .sb-opt__extra{display:block}` от 7Г.1б е (1,1,2) и без тях празната
   кутия се връща обратно. */
.sb-opt__extra:empty,
.sb-opt__extra:has(> :only-child:empty),
ul#shipping_method > li > .sb-opt__extra:empty,
ul#shipping_method > li > .sb-opt__extra:has(> :only-child:empty) {
	display: none;
}

.sb-privacy {
	font-size: 13px;
	line-height: 1.6;
	color: var(--sb-muted-2);
	margin: 0 0 18px;
}

.sb-privacy a {
	color: var(--sb-ink);
	text-decoration: underline;
}

.sb-osum {
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	padding: 26px;
	position: sticky;
	top: 24px;
	min-width: 0;
}

.sb-osum .sb-h3 {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
}

.sb-oline {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--sb-line);
}

.sb-oline__thumb {
	width: 56px;
	height: 74px;
	flex: none;
	overflow: hidden;
	background-color: #f1ebe4;
}

.sb-oline__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 14%;
}

.sb-oline > span:nth-child(2) {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-oline b {
	display: block;
	font-weight: 600;
	font-size: 14px;
}

.sb-oline i {
	font-style: normal;
	font-size: 12.5px;
	color: var(--sb-muted-2);
}

.sb-oline .sb-price {
	margin-left: auto;
	font-size: 15px;
	white-space: normal;
	text-align: right;
	flex: none;
	max-width: 130px;
}

.sb-osum__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	font-size: 14.5px;
}

.sb-osum__row--total {
	border-top: 1px solid var(--sb-line-strong);
	margin-top: 8px;
	padding-top: 16px;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-osum__row--total .sb-price {
	font-size: 20px;
	text-transform: none;
}

.sb-osum .sb-btn {
	margin-top: 18px;
}

.sb-osum__secure {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 14px;
	font-family: var(--sb-font-heading);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-muted-2);
}

.sb-alert {
	border: 1px solid var(--sb-pink);
	background-color: #fff7fa;
	padding: 14px 18px;
	margin: 0 0 22px;
	font-size: 14px;
	color: #c4557d;
}

.sb-alert b {
	display: block;
	color: var(--sb-ink);
	margin-bottom: 4px;
}

/* `.woocommerce-error` вече изглежда като `.sb-alert` навсякъде
   (глобалното правило от ЕТАП 6А, 6.0.6, обновено в 7.7) - тук е само
   МЯСТОТО му в решетката на чекаута (12В.4).

   checkout.js на Woo прави `form.checkout`.prepend() с групата съобщения,
   тоест тя е първото дете на `.sb-co`. Но `.sb-co__main` и `.sb-osum` са
   заковани на ред 1 (ДЕФЕКТ 7В.2.4а), затова групата се авто-разполагаше
   в първата СВОБОДНА клетка - ред 2 - и грешката „Име за фактуриране е
   задължително поле." стоеше ПОД блока „Начин на плащане", извън екрана.
   Изрично място: цял ред, над двете колони. Двете колони слизат на ред 2
   само когато групата я ИМА (`:has()`, вече ползван в темата) - иначе
   празният ред 1 би добавил 40px `gap` на всеки чекаут. */
.sb-co > .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 24px;
}

.sb-co:has(> .woocommerce-NoticeGroup) > .sb-co__main,
.sb-co:has(> .woocommerce-NoticeGroup) > .sb-osum {
	grid-row: 2;
}

/* 12В2.1 - иконата на Woo да не застъпва първата буква.
   Мерено в самия лист на плъгина (tools/woo-mock/vendor/woocommerce/
   woocommerce.css): кръгчето с удивителна НЕ е върху `li`-то, а върху
   САМИЯ контейнер -
   `.woocommerce-error::before{font-family:WooCommerce;content:"\e016";
   position:absolute;top:1em;left:1.5em}` - и Woo му прави място с
   `padding:1em 2em 1em 3.5em` на `.woocommerce-error`. Темата смени
   падинга на `16px 22px` (ЕТАП 6А, 6.0.6), а 1.5em при 14.5px = 21.75px,
   тоест иконата ляга точно върху първата буква.
   Мястото се връща тук, на контейнера: 46px оставя ~10px въздух след
   иконата (21.75px + ~14.5px глиф). `position` не се пипа - Woo вече
   държи `position: relative` на контейнера, спрямо който се мери
   иконата.
   `#page` е задължителен: базовото правило е `#page .woocommerce-error`
   (1,1,0) и селектор само с класове губи от него (CLAUDE.md, "GP
   специфичност"). Само специфичност - нула повишаване на приоритета. */
#page .sb-co > .woocommerce-NoticeGroup .woocommerce-error {
	padding-left: 46px;
}

/* Линкът към проблемното поле идваше със синьото на Woo/GP
   (мерено: rgb(30, 115, 190) + underline) - чужд цвят в розовата кутия.
   Макетът (chekaut.html, `.sb-alert`) не рисува линк изобщо, затова
   правилото е по палитрата: мастилен текст, розово подчертаване, розов
   на hover. */
#page .sb-co > .woocommerce-NoticeGroup .woocommerce-error a {
	color: var(--sb-ink);
	text-decoration: underline;
	text-decoration-color: var(--sb-pink);
	text-underline-offset: 2px;
}

#page .sb-co > .woocommerce-NoticeGroup .woocommerce-error a:hover,
#page .sb-co > .woocommerce-NoticeGroup .woocommerce-error a:focus {
	color: var(--sb-pink);
	text-decoration-color: var(--sb-pink);
}

/* Woo слага `.woocommerce-invalid`/`.woocommerce-invalid-required-field`
   на `<p class="form-row">`, когато полето не мине валидация при submit. */
.woocommerce-invalid .sb-input,
.woocommerce-invalid .sb-select,
.woocommerce-invalid .sb-textarea,
.woocommerce-invalid input.sb-input,
.woocommerce-invalid select.sb-select {
	border-color: var(--sb-pink);
	background-color: #fff7fa;
}

/* Processing (assets/js/checkout.js на Woo слага тези класове по подразбиране). */
form.checkout.processing #place_order,
#place_order.disabled {
	background-color: #e9e3dc;
	border-color: #e9e3dc;
	color: var(--sb-muted-2);
	cursor: not-allowed;
}

@media (max-width: 782px) {
	.sb-page-head {
		padding: 18px var(--sb-pad) 14px;
	}

	.sb-steps {
		gap: 12px;
		font-size: 11px;
	}

	.sb-checkout-coupon {
		max-width: none;
		text-align: left;
		margin: 0 0 14px;
	}

	.checkout_coupon.woocommerce-form-coupon {
		max-width: none;
		margin-left: 0;
		flex-wrap: wrap;
	}

	.sb-co {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding-bottom: 40px;
	}

	.sb-co > .sb-co__main,
	.sb-co > .sb-osum,
	.sb-co:has(> .woocommerce-NoticeGroup) > .sb-co__main,
	.sb-co:has(> .woocommerce-NoticeGroup) > .sb-osum {
		grid-column: auto;
		grid-row: auto;
	}

	/* Една колона: мястото се определя от `order`, а не от реда - групата
	   съобщения е пред обобщението (`order: -1` отдолу), тоест най-горе. */
	.sb-co > .woocommerce-NoticeGroup {
		grid-column: auto;
		grid-row: auto;
		order: -2;
		margin: 0;
	}

	.sb-co > .sb-osum {
		position: static;
		order: -1;
		padding: 18px;
	}

	.sb-osum {
		position: static;
		padding: 18px;
	}

	ul.wc_payment_methods li .payment_box {
		margin-left: 0;
	}

	.sb-form-grid {
		grid-template-columns: 1fr;
	}

	.sb-form-grid .is-wide,
	.sb-form-grid .form-row-wide {
		grid-column: auto;
	}

	.sb-opt,
	ul.woocommerce-shipping-methods li,
	ul.wc_payment_methods li {
		padding: 13px 12px;
		gap: 10px;
	}

	/* Огледало на мобилните стойности за скоупнатото правило от 7Г.1б -
	   то е (2,1,3) и иначе би върнало десктоп падинга/gap-а обратно на
	   390px. */
	#page ul#shipping_method > li > label.sb-opt {
		padding: 13px 12px;
		gap: 10px;
	}

	.sb-opt em {
		white-space: normal;
		text-align: right;
		max-width: 96px;
		font-size: 11px;
		line-height: 1.3;
	}

	.sb-opt__logo {
		width: 46px;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.5 - Контакти.
   Макет: makets/final/kontakti.html. page-kontakti.php (по slug).
   ========================================================================== */

/* `--kontakt` модификатор, не бар `.sb-page-head` - без него max-width:760px
   изтичаше към ВСИЧКИ страници, ползващи `.sb-page-head` (Количка/Плащане),
   стеснявайки заглавния ред там (една глобална style.css каскада, за
   разлика от изолираните <style> в отделните makets/final/*.html) - ДЕФЕКТ,
   хванат при 7Б.2/7Б.3 (ПАРТИДА 7Б). */
.sb-page-head--kontakt {
	padding: 28px var(--sb-pad) 34px;
	max-width: 760px;
}

.sb-page-head .sb-lead {
	margin: 14px 0 0;
}

.sb-kontakt {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 0 var(--sb-pad) 44px;
}

.sb-kcard {
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	padding: 24px 26px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none;
	color: var(--sb-ink);
}

.sb-kcard .sb-icon {
	width: 24px;
	height: 24px;
	color: var(--sb-pink);
	margin-top: 2px;
}

.sb-kcard span,
.sb-kcard b,
.sb-kcard small {
	display: block;
}

.sb-kcard > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sb-kcard .sb-label {
	margin-bottom: 6px;
}

.sb-kcard b {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: .03em;
}

.sb-kcard small {
	font-size: 13px;
	color: var(--sb-muted-2);
}

.sb-kform {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	padding: 0 var(--sb-pad) 72px;
	align-items: start;
}

.sb-kform .sb-h2 {
	margin: 0 0 20px;
}

/* `the_content()` (шорткодът на Fluent Forms) е обвит в `.entry-content`
   тук нарочно - за да наследи базовите полета/бутон стилове от ЕТАП 6А
   (6.0.5, `#page .entry-content .fluentform ...`) без да се дублира CSS;
   но 760px max-width-ът на `.entry-content` не важи в тази двуколонна
   решетка. */
.sb-kform__content.entry-content {
	max-width: none;
	margin: 0;
}

.sb-kform__content .fluentform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sb-kform__content .fluentform .is-wide,
.sb-kform__content .fluentform .ff-el-is-wide {
	grid-column: span 2;
}

/* Бутонът "Изпратете" няма нужда от `.sb-btn` клас - вече изглежда така
   през общото `#page .entry-content .fluentform button[type="submit"]`
   правило от ЕТАП 6А (6.0.5); тук само подравняване в решетката. */
.sb-kform__content .fluentform button[type="submit"],
.sb-kform__content .fluentform .ff-btn-submit {
	margin-top: 4px;
	grid-column: span 2;
}

.sb-map {
	position: relative;
	background-color: #e9e3dc;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sb-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(.15);
}

.sb-success {
	border: 1px solid var(--sb-accent);
	background-color: var(--sb-white);
	padding: 22px 24px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.sb-success .sb-icon {
	width: 22px;
	height: 22px;
	color: var(--sb-pink);
	flex: none;
	margin-top: 2px;
}

.sb-success b {
	display: block;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

/* Fluent Forms - грешка на поле / съобщение за успех (ЕТАП 6А, 6.0.5
   вече стилизира input/textarea/select/бутон общо за целия сайт; тук са
   само състоянията, специфични за 7.5). Класовете `.ff-el-is-error`/
   `.ff-message-success` са по документацията на плъгина, НЕ проверени
   срещу жив DOM тази сесия - същата уговорка като в 6.0.5. */
.sb-kform__content .fluentform .ff-el-is-error .ff-el-input--content .sb-input,
.sb-kform__content .fluentform .ff-el-is-error .ff-el-input--content input,
.sb-kform__content .fluentform .ff-el-is-error .ff-el-input--content textarea {
	border-color: var(--sb-pink);
	background-color: #fff7fa;
}

.sb-kform__content .fluentform .error,
.sb-kform__content .fluentform .ff-el-is-error .text-danger {
	display: block;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: #c4557d;
}

.sb-kform__content .fluentform .ff-message-success {
	grid-column: span 2;
	border: 1px solid var(--sb-accent);
	background-color: var(--sb-white);
	padding: 22px 24px;
	font-size: 14px;
	color: var(--sb-ink);
}

@media (max-width: 782px) {
	.sb-page-head--kontakt {
		padding: 18px var(--sb-pad) 22px;
	}

	.sb-kontakt {
		grid-template-columns: 1fr;
		gap: 10px;
		padding-bottom: 30px;
	}

	.sb-kcard {
		padding: 18px;
	}

	.sb-kcard b {
		font-size: 17px;
	}

	.sb-kform {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-bottom: 44px;
	}

	.sb-kform__content .fluentform,
	.sb-kform__content .fluentform .is-wide,
	.sb-kform__content .fluentform .ff-el-is-wide {
		grid-template-columns: 1fr;
		grid-column: auto;
	}

	.sb-kform__content .fluentform button[type="submit"],
	.sb-kform__content .fluentform .ff-btn-submit {
		display: flex;
		width: 100%;
		grid-column: auto;
	}
}

/* ==========================================================================
   ЕТАП 7, задача 7.6 - За нас.
   Макет: makets/final/za-nas.html. page-za-nas.php (по slug).
   ========================================================================== */

.sb-about {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	padding: 28px var(--sb-pad) 64px;
	align-items: start;
}

.sb-about__intro {
	font-family: var(--sb-font-display);
	font-weight: 300;
	font-size: 26px;
	line-height: 1.35;
	letter-spacing: -.01em;
	margin: 22px 0 34px;
	max-width: 640px;
	color: var(--sb-ink);
}

.sb-about__text {
	max-width: 600px;
}

.sb-about__text p {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--sb-muted);
}

.sb-about__text p.sb-about__thanks {
	color: var(--sb-ink);
	font-weight: 600;
}

.sb-about__photo {
	position: sticky;
	top: 24px;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--sb-sand);
}

.sb-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 10%;
}

.sb-about__photo .sb-card__placeholder {
	background-color: var(--sb-cream);
}

.sb-about__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 36px;
}

.sb-values {
	background-color: var(--sb-white);
	padding: 56px var(--sb-pad);
}

.sb-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.sb-value {
	padding: 26px 26px 28px;
	border: 1px solid var(--sb-line);
}

.sb-value .sb-icon {
	width: 26px;
	height: 26px;
	color: var(--sb-pink);
	margin-bottom: 14px;
}

.sb-value b {
	display: block;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.sb-value p {
	margin: 0;
	font-size: 14.5px;
	color: var(--sb-muted);
}

@media (max-width: 782px) {
	.sb-about {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 18px var(--sb-pad) 40px;
	}

	.sb-about__photo {
		position: static;
		order: -1;
		aspect-ratio: 4 / 5;
	}

	.sb-about__intro {
		font-size: 20px;
		margin: 16px 0 22px;
	}

	.sb-about__text p {
		font-size: 15.5px;
	}

	.sb-values {
		padding: 36px var(--sb-pad);
	}

	.sb-values__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sb-about__cta .sb-btn {
		flex: 1;
	}
}

/* ==========================================================================
   ПАРТИДА 7В, задача 7В.5 - Информационни страници.
   Макет: makets/final/stranica.html. `page.php` (общият шаблон за страници
   БЕЗ собствен page-<slug>.php) + `sofiaboutique_page_aside()` в
   inc/pages.php. Съдържанието е реалното `the_content()` от редактора -
   темата не го филтрира, само му дава типографията на макета.
   ========================================================================== */

.sb-page-head--doc {
	display: block;
	max-width: 820px;
	padding: 28px var(--sb-pad) 30px;
}

.sb-page-head--doc .sb-lead {
	margin: 14px 0 0;
}

.sb-doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
	padding: 0 var(--sb-pad) 80px;
	align-items: start;
}

.sb-prose {
	max-width: 720px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--sb-ink);
}

.sb-prose > * + * {
	margin-top: 18px;
}

/* `#page` - бие базовото `#page :is(h1..h6){Oswald, uppercase}` от
   ЕТАП 1.0 (същата причина като при `.sb-h1`/`.sb-h2` по-горе). */
#page .sb-prose h2 {
	font-family: var(--sb-font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	margin-top: 44px;
	color: var(--sb-heading);
}

#page .sb-prose h3 {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-top: 32px;
	color: var(--sb-ink);
}

#page .sb-prose h4 {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-top: 26px;
	color: var(--sb-muted);
}

.sb-prose p {
	margin-top: 16px;
	color: var(--sb-muted);
}

/* Първият абзац на страницата е водещият (макет: `.sb-prose__intro`) -
   класът може да се сложи и ръчно от редактора; тук е автоматично, за
   да не се пипа съдържанието в базата. */
.sb-prose > p:first-child,
.sb-prose p.sb-prose__intro {
	color: var(--sb-ink);
	font-size: 19px;
	line-height: 1.6;
}

.sb-prose ul,
.sb-prose ol {
	padding-left: 0;
	list-style: none;
	color: var(--sb-muted);
}

.sb-prose li {
	position: relative;
	padding-left: 24px;
	margin-top: 8px;
}

.sb-prose ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sb-pink);
}

.sb-prose ol {
	counter-reset: n;
}

.sb-prose ol li {
	padding-left: 34px;
	counter-increment: n;
}

.sb-prose ol li::before {
	content: counter(n);
	position: absolute;
	left: 0;
	top: .1em;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--sb-pink);
	border: 1px solid var(--sb-line-strong);
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sb-prose a {
	color: var(--sb-ink);
	text-decoration: underline;
	text-decoration-color: var(--sb-pink);
	text-underline-offset: 3px;
}

.sb-prose strong,
.sb-prose b {
	color: var(--sb-ink);
	font-weight: 600;
}

.sb-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.sb-prose th {
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--sb-accent);
	color: var(--sb-ink);
}

.sb-prose td {
	padding: 12px;
	border-bottom: 1px solid var(--sb-line-strong);
	color: var(--sb-muted);
}

.sb-prose blockquote {
	margin: 24px 0 0;
	padding: 20px 24px;
	background-color: var(--sb-white);
	border-left: 3px solid var(--sb-pink);
	color: var(--sb-ink);
}

.sb-prose .sb-callout {
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	padding: 18px 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	color: var(--sb-ink);
}

.sb-prose .sb-callout .sb-icon {
	width: 22px;
	height: 22px;
	color: var(--sb-pink);
	flex: none;
	margin-top: 2px;
}

.sb-prose hr {
	border: 0;
	border-top: 1px solid var(--sb-line-strong);
	margin-top: 36px;
}

.sb-prose img {
	max-width: 100%;
	height: auto;
}

/* ---- страничната лента ---- */

.sb-aside {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 18px;
}

.sb-aside__box {
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	padding: 22px 24px;
}

.sb-aside__box .sb-label {
	margin-bottom: 12px;
}

.sb-aside__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-aside__nav li + li {
	border-top: 1px solid var(--sb-cream);
}

.sb-aside__nav a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	font-size: 15px;
	color: var(--sb-muted);
	text-decoration: none;
}

.sb-aside__nav a:hover,
.sb-aside__nav .is-on a {
	color: var(--sb-ink);
}

.sb-aside__nav .is-on a {
	font-weight: 600;
}

.sb-aside__nav .sb-icon {
	width: 14px;
	height: 14px;
	color: var(--sb-sand);
	flex: none;
}

.sb-aside__contact {
	display: grid;
	gap: 10px;
	font-size: 15px;
}

.sb-aside__contact a {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-aside__contact .sb-icon {
	width: 18px;
	height: 18px;
	color: var(--sb-pink);
	flex: none;
}

.sb-aside .sb-btn {
	display: flex;
	justify-content: center;
}

.sb-aside__cta {
	margin-top: 16px;
}

/* ---- `.sb-docform` - формата на Fluent Forms в "Връщане и замяна" ----
   Шорткодът идва от СЪДЪРЖАНИЕТО на страницата (`[fluentform id="5"]`) -
   темата не го пипа, само облича изхода му през селекторите на плъгина
   (`.fluentform`, `.ff-el-group`, `.ff-el-form-control`, `.ff-btn-submit`).
   `#page` е нужен, защото `fluent-forms-public.css` зарежда СЛЕД темата
   и правилата му са с два-три класа. */
#page .sb-prose .fluentform {
	margin-top: 44px;
	padding: 32px;
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
}

#page .sb-prose .ff-el-group {
	margin: 0 0 14px;
}

#page .sb-prose .ff-el-input--label label,
#page .sb-prose .ff-el-input--label > span {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
	line-height: 1.4;
}

#page .sb-prose .ff-el-is-required.asterisk-right label::after,
#page .sb-prose .ff-el-input--label .text-danger {
	color: var(--sb-pink);
}

#page .sb-prose .ff-el-form-control {
	display: block;
	width: 100%;
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--sb-ink);
	background-color: var(--sb-white);
	border: 1px solid var(--sb-line-soft);
	border-radius: 0;
	box-shadow: none;
	height: auto;
}

#page .sb-prose textarea.ff-el-form-control {
	min-height: 130px;
}

#page .sb-prose .ff-el-form-control:focus {
	border-color: var(--sb-accent);
	outline: 0;
}

#page .sb-prose .ff-el-is-error .ff-el-form-control {
	border-color: var(--sb-pink);
	background-color: #fff7fa;
}

#page .sb-prose .error.text-danger,
#page .sb-prose .ff-el-is-error .text-danger {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: #c4557d;
}

#page .sb-prose .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 16px 40px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sb-cream);
	background-color: var(--sb-accent);
	border: 1.5px solid var(--sb-accent);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	width: auto;
}

#page .sb-prose .ff-btn-submit:hover {
	color: var(--sb-ink);
	background-color: var(--sb-white);
}

#page .sb-prose .ff-message-success {
	padding: 16px 18px;
	background-color: var(--sb-hero);
	border: 1px solid var(--sb-line-soft);
	color: var(--sb-ink);
}

@media (max-width: 1024px) {
	.sb-doc {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.sb-aside {
		position: static;
	}
}

@media (max-width: 782px) {
	.sb-page-head--doc {
		padding: 18px var(--sb-pad) 22px;
	}

	.sb-doc {
		padding-bottom: 44px;
		gap: 28px;
	}

	.sb-prose {
		font-size: 16px;
	}

	#page .sb-prose h2 {
		font-size: 22px;
		margin-top: 34px;
	}

	.sb-prose > p:first-child,
	.sb-prose p.sb-prose__intro {
		font-size: 17px;
	}

	.sb-prose table,
	.sb-prose th,
	.sb-prose td {
		font-size: 14px;
	}

	.sb-prose th,
	.sb-prose td {
		padding: 8px;
	}

	#page .sb-prose .fluentform {
		padding: 22px 18px;
		margin-top: 32px;
	}

	#page .sb-prose .ff-btn-submit {
		display: flex;
		width: 100%;
	}

	.sb-aside__box {
		padding: 18px;
	}
}

/* === Категория: SEO текст и блог (K2, 29.09.2026) === */
/* TASKS.md K2.1. Маркъп: inc/woo-archive.php (`section.sb-cat-seo`, последно
   дете на main#main - main е обикновен блок, не grid/flex), single.php и
   home.php (`.sb-post-hero`, `.sb-post-more`, `a.sb-card.sb-card--post`).

   Ширина: `--sb-content-width` е 760px (:root, ЕТАП 6А). GP дава
   box-sizing:border-box, затова секцията е 760px кутия, центрирана с
   margin auto, а `.sb-prose` вътре (max-width 720px, ЕТАП 7В.5) пълни
   точно 760 - 2 x 20px. `--sb-gutter` НЕ съществува в темата - остава
   fallback-ът 20px от задачата (ГОТОВО: 20px отстъп на 390).
   `.sb-cat-head` ползва `var(--sb-pad)` = 46px/18px - не е взет, защото
   на 390 дава 18px, а ГОТОВО мери 20px. */

.sb-cat-seo {
	margin: 56px auto 0;
	max-width: var(--sb-content-width);
	/* Долният отстъп - иначе текстът опира във футъра (секцията е последна
	   в main#main); 64px/44px като `.sb-pagination`/`.sb-cat-grid`. */
	padding: 0 var(--sb-gutter, 20px) 64px;
}

/* #page - `#page .sb-prose h2{margin-top:44px}` (ЕТАП 7В.5) е (1,1,1). */
#page .sb-cat-seo .sb-prose h2 {
	margin-top: 36px;
}

@media (max-width: 767px) {
	.sb-cat-seo {
		margin-top: 40px;
		padding-bottom: 44px;
	}
}

/* Снимката на статията: вертикалните 3:4 кадри се режат отдолу, не
   отгоре - главата остава (object-position 15%). */
.sb-post-hero {
	margin: 0 auto 32px;
	max-width: var(--sb-content-width);
}

.sb-post-hero__img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	object-position: 50% 15%;
}

/* Статията няма `.sb-aside` (single.php), а `.sb-doc` е 2-колонна мрежа
   (`minmax(0,1fr) 300px` до 1024px) - празната 300px колона се маха.
   `single-post` е класът на WP core от get_body_class() за
   is_singular('post') (`single-{post_type}`). Подравняването остава
   вляво като на stranica.html: главата и текстът започват от
   var(--sb-pad), `.sb-prose` НЕ се центрира. */
.single-post .sb-doc {
	grid-template-columns: minmax(0, 1fr);
}

/* До 782px снимката не е от ръб до ръб: същият страничен отстъп
   var(--sb-pad) като главата и текста, през margin (правилото горе
   остава буквално по задачата - центрирано, 760px). */
@media (max-width: 782px) {
	.sb-post-hero {
		margin: 0 var(--sb-pad) 24px;
	}
}

/* „Още от блога". Страничният отстъп е `var(--sb-pad)` като `.sb-cat-grid`
   - без него мрежата опира в ръба на екрана (main е на цяла ширина). */
.sb-post-more {
	margin-top: 64px;
	padding: 0 var(--sb-pad) 64px;
}

/* Заглавието има клас `.sb-h2` (Unbounded 400) - тук само размерът и
   отстъпът на „Ново тази седмица" (`#page .sb-front-page
   .sb-section-heading`: 34px, 26px до 600px). Подравнено вляво, към
   мрежата отдолу. */
#page .sb-post-more .sb-h2 {
	margin: 0 0 28px;
	font-size: 34px;
}

@media (max-width: 782px) {
	.sb-post-more {
		margin-top: 44px;
		padding-bottom: 44px;
	}
}

@media (max-width: 600px) {
	#page .sb-post-more .sb-h2 {
		font-size: 26px;
	}
}

/* Пост карта - `.sb-card` без цена и бадж. `h3.sb-card__name` губи от
   `#page :is(h1..h6){Oswald, uppercase}` (1,0,1) - затова #page тук. */
.sb-card--post .sb-kicker {
	margin: 0 0 6px;
}

#page .sb-card--post .sb-card__title {
	margin: 0;
	font-family: var(--sb-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-ink);
}

#page .sb-card--post:hover .sb-card__title {
	color: var(--sb-pink);
}

/* Стрелка за подменю. Реалните класове (inc/header.php): десктоп
   `ul.sb-primary-menu` в `.sb-header__nav` (скрит до 782px), мобилно
   отделен `ul.sb-mobile-menu` в `.sb-mobile-nav` - същото меню
   (theme_location primary), но друг клас, там подменюто е винаги отворено. */
.sb-primary-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.sb-mobile-menu .menu-item-has-children > a::after {
	content: none;
}

/* ЕТАП 16 - предварителна поръчка */
.sb-card__badge--pre {
	background-color: var(--sb-ink);
	color: var(--sb-cream);
}

.sb-preorder {
	display: block;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--sb-pink);
	background-color: var(--sb-pink-soft);
	color: var(--sb-ink);
	font-family: var(--sb-font-body);
	font-size: 14px;
	line-height: 1.5;
	border-radius: 0;
}

.sb-preorder b {
	display: block;
	margin: 0 0 2px;
	font-family: var(--sb-font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sb-preorder[hidden] {
	display: none;
}

.sb-preorder span {
	display: block;
}

.sb-preorder span span {
	display: inline;
}

/* ЕТАП 16 - denvelkoff-studio-shipping в .sb-opt__extra */
.sb-opt__extra .dvs-method-extra {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.sb-opt__extra .dvs-field {
	margin: 0 0 12px;
	max-width: 420px;
}

.sb-opt__extra .dvs-field:last-child {
	margin-bottom: 0;
}

.sb-opt__extra .dvs-field__label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
}

.sb-opt__extra select.dvs-office-select,
.sb-opt__extra .dvs-addr input {
	display: block;
	width: 100%;
	border: 1px solid var(--sb-line-soft);
	background-color: var(--sb-white);
	padding: 13px 15px;
	font-family: var(--sb-font-body);
	font-size: 15px;
	color: var(--sb-ink);
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}

.sb-opt__extra .dvs-addr input::placeholder {
	color: #b7b1bd;
}

.sb-opt__extra select.dvs-office-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23313149' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 38px;
}

.sb-opt__extra select.dvs-office-select:focus,
.sb-opt__extra .dvs-addr input:focus {
	border-color: var(--sb-accent);
}

.sb-opt__extra .dvs-addr {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	max-width: 420px;
}

.sb-opt__extra .dvs-link {
	color: var(--sb-ink);
	text-decoration: underline;
	font-size: 13px;
}

/* `#page button.button:not(.sb-btn)` (1,2,1) иначе печели - затова с
   `#page` и по-късно във файла. */
#page .sb-opt__extra button.dvs-boxnow-pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 40px;
	border: 1.5px solid var(--sb-accent);
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--sb-ink);
	font-family: var(--sb-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

#page .sb-opt__extra button.dvs-boxnow-pick:hover {
	background-color: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-cream);
}

@media (max-width: 767px) {
	.sb-opt__extra .dvs-addr {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sb-opt__extra .dvs-addr input[name="dvs_addr_num"] {
		grid-column: 1 / -1;
	}
}

/* 16F - selectWoo на града/улицата с височината на `select.dvs-office-select`
   и `.dvs-addr input` (50px); select2 по подразбиране е 28-30px.
   `woocommerce.css` дава на `__rendered` `padding: .5em` - без нулирането
   отгоре/отдолу текстът слиза 7px под центъра. */
body.woocommerce-checkout #page .sb-opt__extra .select2-container .select2-selection--single {
	height: 50px;
}

body.woocommerce-checkout #page .sb-opt__extra .select2-container .select2-selection--single .select2-selection__rendered {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 48px;
	font-size: 15px;
}

body.woocommerce-checkout #page .sb-opt__extra .select2-container .select2-selection--single .select2-selection__arrow {
	height: 48px;
}