/*
Theme Name: Tapicer
Author: Мебели Краси
Description: Класическа WordPress тема за тапицерски услуги и дивани по поръчка. Мобилно ориентирана, без билд стъпка и без зависимост от платени плъгини.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tapicer
Tags: custom-logo, custom-menu, featured-images, translation-ready, two-columns
*/

/*
 * Съдържание:
 *  1. Custom properties (design tokens)
 *  2. Reset и базова типография
 *  3. Достъпност (skip link, focus)
 *  4. Layout помощници
 *  5. Бутони
 *  6. Шапка и навигация
 *  7. Футър
 *  8. Полета на форми (основа — CF7 се стилизира на стъпка 8)
 *  9. Съдържание по подразбиране и пагинация
 * 10. Начална страница
 * 11. Архиви и single шаблони
 * 12. Форма за заявка (Contact Form 7)
 *
 * @font-face декларациите са в assets/css/fonts.css (зарежда се преди този файл).
 *
 * Мобилно първо: базовите правила са за телефон, разширенията са в
 * min-width media заявки.
 */

/* ---------------------------------------------------------------------------
   1. Custom properties

   Палитра: топла неутрална основа, въглен за текста, злато за акцента.
   Без чисто бяло и без чисто черно — заданието го изисква изрично, а и
   екранът с топла основа изглежда по-близо до плат, отколкото до софтуер.

   Всички двойки текст/фон покриват WCAG AA (4.5:1). Затова акцентът за
   линкове и бутони е по-тъмен от декоративния: светлото злато дава
   само 2.23:1 върху кремавото и не става за текст.
   --------------------------------------------------------------------------- */

:root {
	--tapicer-color-bg: #f5f0e8;
	--tapicer-color-surface: #fbf8f2;
	--tapicer-color-text: #1f1d1b;
	--tapicer-color-muted: #57504a;

	/* Интерактивен акцент — линкове, текст. Златистото #c89b5e дава 2.23:1
	   върху крема и не може да носи текст; тъмният му вариант дава 4.71:1. */
	--tapicer-color-accent: #8a6428;
	--tapicer-color-accent-hover: #6e4f20;
	/* Декоративен акцент — фонове, рамки, икони върху тъмно. Под него върви
	   само тъмен текст (#1f1d1b дава 6.65:1), никога крем. */
	--tapicer-color-accent-soft: #c89b5e;
	--tapicer-color-accent-soft-hover: #a87f42;

	/* Състояния на формата. По-тъмни от готовите на CF7: неговото червено
	   (#dc3232) дава 4.18:1 върху кремавото и пада под AA. */
	--tapicer-color-error: #b3261e;
	--tapicer-color-success: #2f6b3a;

	--tapicer-color-border: #e2d9c9;

	/* Тъмната лента от мокапа — шапка, hero панел, плочки, преди/след. */
	--tapicer-color-panel: #1f1d1b;
	--tapicer-color-on-panel: #efe9df;
	--tapicer-color-on-panel-muted: #b3a897;
	--tapicer-color-panel-border: #413a33;

	/* Футърът е същата лента. Имената остават, за да не се пипа секция 7. */
	--tapicer-color-footer-bg: var(--tapicer-color-panel);
	--tapicer-color-footer-text: var(--tapicer-color-on-panel-muted);
	--tapicer-color-footer-heading: var(--tapicer-color-on-panel);
	--tapicer-color-footer-border: var(--tapicer-color-panel-border);

	/* Резервните шрифтове също имат кирилица — ако webfont-ът не се зареди,
	   текстът остава четим, а не пада на нещо без глифи. */
	--tapicer-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--tapicer-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--tapicer-space-xs: 0.5rem;
	--tapicer-space-sm: 1rem;
	--tapicer-space-md: 2rem;
	--tapicer-space-lg: 4rem;

	--tapicer-content-width: 1320px;
	/*
	 * По-широк коридор само за сравнението преди/след. Снимката е причината
	 * посетителят да е на страницата — тя има право на повече от заглавието.
	 * Не важи за текст: --tapicer-text-width го държи тесен независимо от него.
	 */
	--tapicer-media-width: 1600px;
	--tapicer-text-width: 68ch;
	--tapicer-radius: 3px;

	/* Целта е пръст, не курсор — 44px е минимумът, който се уцелва надеждно. */
	--tapicer-tap-target: 44px;
}

/* ---------------------------------------------------------------------------
   2. Reset и базова типография
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	/* Футърът стои долу и когато страницата е къса (404, благодарствена). */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--tapicer-color-bg);
	color: var(--tapicer-color-text);
	font-family: var(--tapicer-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--tapicer-font-heading);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--tapicer-space-sm);
	/* Кирилицата на Playfair е с висок контраст — малко по-плътната разредка
	   пречи на главните букви да се слепят. */
	letter-spacing: 0.01em;
}

/* Заглавията растат с екрана без брейкпойнти. */
h1 {
	font-size: clamp(2rem, 1.35rem + 3.2vw, 3.5rem);
}

h2 {
	font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.5rem);
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
}

h4 {
	font-size: 1.125rem;
}

p,
ul,
ol {
	margin: 0 0 var(--tapicer-space-sm);
}

a {
	color: var(--tapicer-color-accent);
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--tapicer-color-accent-hover);
}

strong {
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
	/* Снимките са героят — да не се разтягат в grid клетки. */
	display: block;
}

figure {
	margin: 0 0 var(--tapicer-space-sm);
}

/* Браузърът рисува <address> в курсив; адрес в курсив се чете по-трудно. */
address {
	font-style: normal;
}

hr {
	border: 0;
	border-top: 1px solid var(--tapicer-color-border);
	margin-block: var(--tapicer-space-md);
}

/* ---------------------------------------------------------------------------
   3. Достъпност
   --------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link:focus {
	background-color: var(--tapicer-color-surface);
	clip-path: none;
	color: var(--tapicer-color-text);
	display: block;
	height: auto;
	left: var(--tapicer-space-sm);
	padding: var(--tapicer-space-xs) var(--tapicer-space-sm);
	position: absolute;
	top: var(--tapicer-space-xs);
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--tapicer-color-accent);
	outline-offset: 2px;
}

/* Върху тъмния футър оранжевият контур не се вижда. */
.site-footer :focus-visible {
	outline-color: var(--tapicer-color-footer-heading);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
   4. Layout помощници
   --------------------------------------------------------------------------- */

.tapicer-container {
	margin-inline: auto;
	max-width: var(--tapicer-content-width);
	padding-inline: var(--tapicer-space-sm);
	width: 100%;
}

/*
 * На телефона 1rem е правилното поле — тесният екран не бива да се хаби. В
 * кутия от 1320px обаче същият 1rem изглежда като недовършено притискане към
 * ръба.
 *
 * 87em (1392px) = 1320 + 2×32, тоест първата ширина, на която контейнерът е
 * стигнал максимума си и отстрани наистина остава празно поле. По-рано
 * контейнерът още расте с екрана и всеки пиксел е зает: измерено, по-широкото
 * поле на 60em изяждаше 32px точно в лентата 1170–1220px и буташе менюто в
 * шапката на втори ред, където преди се събираше на един.
 *
 * Внимание: .front-hero__content преповтаря тази сметка на ръка (виж
 * секция 10) и има огледално правило на същия breakpoint. Двете се менят
 * заедно, иначе hero заглавието застава на друга линия от заглавията под него.
 */
@media (min-width: 87em) {
	.tapicer-container {
		padding-inline: var(--tapicer-space-md);
	}
}

.site-main {
	flex: 1 0 auto;
	padding-block: var(--tapicer-space-md);
}

/* Дългият текст се чете по-лесно в тясна колона, независимо от контейнера. */
.entry-content {
	max-width: var(--tapicer-text-width);
}

.entry-content > * + * {
	margin-top: var(--tapicer-space-sm);
}

/* ---------------------------------------------------------------------------
   5. Бутони

   Големи и ясни — целевата аудитория не е млада, а половината посетители
   ще са с телефон в едната ръка.
   --------------------------------------------------------------------------- */

.tapicer-button {
	background-color: var(--tapicer-color-accent-soft);
	border: 2px solid var(--tapicer-color-accent-soft);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tapicer-space-xs);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	min-height: var(--tapicer-tap-target);
	padding: 0.75rem 1.75rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tapicer-button:hover,
.tapicer-button:focus {
	background-color: var(--tapicer-color-accent-soft-hover);
	border-color: var(--tapicer-color-accent-soft-hover);
	color: var(--tapicer-color-text);
}

.tapicer-button--large {
	font-size: 1.1875rem;
	padding: 1rem 2.25rem;
}

/*
 * Телефонният бутон носи два реда: подканата и самият номер. На телефон
 * линкът набира сам, но на компютър номерът е единственото полезно нещо в
 * бутона, затова се изписва, а не стои само в tel: адреса.
 *
 * Модификаторът се слага от PHP, а не с :has() — бутонът трябва да изглежда
 * еднакво и в по-стар браузър, какъвто тази аудитория спокойно може да ползва.
 */
.tapicer-button--stacked {
	flex-direction: column;
	gap: 0.125rem;
}

.tapicer-button__detail {
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/*
 * Двата начина за връзка стоят един до друг и се пренасят на тесен екран.
 *
 * align-items: stretch, а не center: телефонният бутон е двуреден и без
 * изравняване вторият остава с една глава по-нисък — двойката изглежда
 * недовършена точно на най-важното място на страницата.
 */
.tapicer-actions {
	align-items: stretch;
	display: flex;
	/*
	 * На телефона двата бутона са един под друг и на цяла ширина: подредени в
	 * ред те се пренасят с различна дължина и стъпалото изглежда като грешка,
	 * а и по-широката цел се уцелва по-лесно с палец.
	 */
	flex-direction: column;
	gap: var(--tapicer-space-sm);
	margin-block: 0;
}

/* 36em, а не 30em: под тази ширина двата надписа не се побират в един ред. */
@media (min-width: 36em) {
	.tapicer-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Втори по важност бутон — контур, без запълване. */
.tapicer-button--outline {
	background-color: transparent;
	border-color: var(--tapicer-color-accent-soft);
	color: var(--tapicer-color-accent);
}

/* Рамката следва запълването — иначе тъмнозлатният бутон остава със
   светлозлатен кант, който изглежда като недовършено състояние. */
.tapicer-button--outline:hover,
.tapicer-button--outline:focus {
	background-color: var(--tapicer-color-accent);
	border-color: var(--tapicer-color-accent);
	color: var(--tapicer-color-surface);
}

/* ---------------------------------------------------------------------------
   6. Шапка и навигация
   --------------------------------------------------------------------------- */

.site-header {
	background-color: var(--tapicer-color-panel);
	border-bottom: 1px solid var(--tapicer-color-panel-border);
	color: var(--tapicer-color-on-panel);
}

/* Оранжевият фокус-контур пропада върху тъмния панел, точно както е
   отбелязано за футъра — тук вместо кремавото се ползва акцентът. */
.site-header :focus-visible {
	outline-color: var(--tapicer-color-accent-soft);
}

.site-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
	justify-content: space-between;
	padding-block: var(--tapicer-space-sm);
}

.site-branding {
	margin-inline-end: auto;
}

.site-title {
	font-family: var(--tapicer-font-heading);
	font-size: 1.375rem;
	line-height: 1.2;
	margin: 0;
}

/* Името на сайта е и връзката към началната страница — най-често търсената
   в шапката, значи и тя с височина на пръст. */
.site-title a {
	align-items: center;
	color: var(--tapicer-color-on-panel);
	display: inline-flex;
	gap: var(--tapicer-space-xs);
	min-height: var(--tapicer-tap-target);
	text-decoration: none;
}

.site-title__mark {
	flex-shrink: 0;
}

/* Слоганът е допълнителен ред под марката — не мести търсеното действие. */
.site-tagline {
	color: var(--tapicer-color-on-panel-muted);
	font-size: 0.875rem;
	margin: 0;
}

/*
 * Логото е хоризонтално заключване (знак + „МЕБЕЛИ КРАСИ") със съотношение
 * 7.53:1, затова се мери по ШИРОЧИНА, а не по височина: при max-height
 * широчината скача заедно с нея и изяжда мястото на телефона.
 *
 * Връзката пази височина колкото пръст — самото лого е по-ниско от това на
 * телефон, а то е и връзката към началната страница.
 */
.custom-logo-link {
	align-items: center;
	display: inline-flex;
	min-height: var(--tapicer-tap-target);
}

.custom-logo {
	display: block;
	height: auto;
	width: 168px;
}

/* Тук се показва и номерът на телефона — логото отстъпва малко. */
@media (min-width: 48em) {
	.custom-logo {
		width: 200px;
	}
}

/* От 60em насам менюто е на един ред с логото — не бива да го избутва. */
@media (min-width: 60em) {
	.custom-logo {
		width: 240px;
	}
}

/*
 * 87em по същата причина като gap-а на .site-header__inner по-долу: чак там
 * контейнерът е по-тесен от екрана и има запас за пълния размер на логото.
 */
@media (min-width: 87em) {
	.custom-logo {
		width: 320px;
	}
}

/*
 * 16px, а не 8px (Task 13, Вариант А). Телефонът и „Велико Търново и региона"
 * стояха на 8px, докато съседните отстояния са 32px — двете се четяха като
 * едно петно вместо като две неща. Ритъмът вече е 16 → 32 → 32: свързани, но
 * не залепени, а стъпката към менюто остава по-голяма от стъпката вътре в
 * групата.
 *
 * Осемте пиксела бяха тук и преди Task 13; тогава съседният gap беше 16px и
 * разликата не биеше на очи. На 32px вече се вижда.
 *
 * Плаща се с 8px ширина: шапката минава на два реда под ~1169px вместо под
 * ~1161px. Изискването на плана — един ред от 1200px нагоре — остава изпълнено
 * с 32px запас. Мери се срещу `clientWidth` минус полетата, не срещу
 * getBoundingClientRect() — той връща border-box и лъже с 64px.
 */
.site-header__actions {
	align-items: center;
	display: flex;
	gap: var(--tapicer-space-sm);
}

/* Телефонът в шапката — най-търсеното действие на този сайт. */
.site-header__phone {
	align-items: center;
	color: var(--tapicer-color-on-panel);
	display: inline-flex;
	font-weight: 600;
	gap: var(--tapicer-space-xs);
	min-height: var(--tapicer-tap-target);
	padding-inline: var(--tapicer-space-xs);
	text-decoration: none;
	white-space: nowrap;
}

.site-header__phone:hover,
.site-header__phone:focus {
	color: var(--tapicer-color-accent-soft);
	text-decoration: underline;
}

.site-header__phone svg {
	flex-shrink: 0;
}

/* На тесен екран номерът се крие и остава само иконата — иначе избутва
   логото на втори ред. */
.site-header__phone-number {
	display: none;
}

/* Районът е допълнителна информация — на тесен екран отстъпва мястото на
   телефона и бургера (display: none в базата) и се връща от 48em нагоре,
   щом екранът стане достатъчно широк, за да ги побере и трите. */
.site-header__area {
	align-items: center;
	color: var(--tapicer-color-on-panel-muted);
	display: none;
	font-size: 0.875rem;
	gap: 0.35rem;
	white-space: nowrap;
}

.site-header__area svg {
	flex-shrink: 0;
}

.nav-toggle {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--tapicer-color-panel-border);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-on-panel);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	gap: var(--tapicer-space-xs);
	min-height: var(--tapicer-tap-target);
	padding: 0 var(--tapicer-space-sm);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	background-color: currentColor;
	content: "";
	display: block;
	height: 2px;
	width: 20px;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before {
	position: absolute;
	top: -6px;
}

.nav-toggle__bars::after {
	position: absolute;
	top: 6px;
}

/* Без JavaScript менюто просто стои отворено — по-добре е дълга страница,
   отколкото недостъпна навигация. */
.no-js .nav-toggle {
	display: none;
}

.site-nav {
	flex-basis: 100%;
}

.js .site-nav {
	display: none;
}

.js .site-nav.is-open {
	display: block;
}

.site-nav__list,
.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	border-top: 1px solid var(--tapicer-color-panel-border);
	color: var(--tapicer-color-on-panel);
	display: flex;
	align-items: center;
	min-height: var(--tapicer-tap-target);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list a:focus,
.site-nav__list .current-menu-item > a {
	color: var(--tapicer-color-accent-soft);
}

/* Подменютата на телефон са просто отместен списък — падащо меню с пръст
   е неудобно. */
.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-inline-start: var(--tapicer-space-sm);
}

@media (min-width: 48em) {
	.site-header__phone-number {
		display: inline;
	}

	.site-header__area {
		display: inline-flex;
	}
}

@media (min-width: 60em) {
	.nav-toggle {
		display: none;
	}

	.site-nav,
	.js .site-nav {
		display: block;
		flex-basis: auto;
	}

	.site-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tapicer-space-md);
	}

	.site-nav__list a {
		border-top: 0;
		min-height: 0;
	}

	/* Подменю: показва се при hover и при клавиатурен фокус вътре в него. */
	.site-nav__list li {
		position: relative;
	}

	.site-nav__list .sub-menu {
		background-color: var(--tapicer-color-panel);
		border: 1px solid var(--tapicer-color-panel-border);
		display: none;
		inset-inline-start: 0;
		min-width: 12rem;
		padding: var(--tapicer-space-xs) var(--tapicer-space-sm);
		position: absolute;
		top: 100%;
		z-index: 10;
	}

	.site-nav__list li:hover > .sub-menu,
	.site-nav__list li:focus-within > .sub-menu {
		display: block;
	}

	/*
	 * От 60em нагоре децата на реда са три — лого, контакти, меню — и
	 * justify-content: space-between сам дели свободното място на две равни
	 * междини. Дотук margin-inline-end: auto на .site-branding го изяждаше
	 * цялото и оставяше 252px вляво срещу 32px вдясно (мерено на 1920px):
	 * лявата зееше, а дясната беше точно колкото разстоянието между две
	 * връзки в менюто, тъй че телефонът, районът и трите менюта се четяха
	 * като един списък от пет неща.
	 *
	 * Под 60em правилото не важи и полето остава: там менюто е на собствен
	 * ред и на първия стоят само две групи.
	 */
	.site-branding {
		margin-inline-end: 0;
	}

	/*
	 * Формата е на .nav-toggle, който точно тук се скрива и я освобождава:
	 * рамка 1px, --tapicer-radius, поле space-sm. Цветът е
	 * --tapicer-color-accent-soft — злато за тъмен фон, 6.65:1 върху панела
	 * (същата сметка като при .front-hero .tapicer-button--outline).
	 * Кремавото остава на менюто, тъй че двете вече не са един и същ цвят.
	 *
	 * Само от 60em: под този праг номерът дели реда с бургера и всяка
	 * добавена ширина го изхвърля на втори ред.
	 */
	.site-header__phone {
		border: 1px solid var(--tapicer-color-accent-soft);
		border-radius: var(--tapicer-radius);
		color: var(--tapicer-color-accent-soft);
		padding-inline: var(--tapicer-space-sm);
	}

	/*
	 * Базовият :hover оцветява в accent-soft, което от 60em нагоре вече е
	 * стойността в покой — тоест нищо не се случва при посочване. Затова тук
	 * се запълва, както прави .tapicer-button--outline: крем върху #8a6428,
	 * 5.04:1. Подчертаването пада — рамката вече носи състоянието.
	 */
	.site-header__phone:hover,
	.site-header__phone:focus {
		background-color: var(--tapicer-color-accent);
		border-color: var(--tapicer-color-accent);
		color: var(--tapicer-color-surface);
		text-decoration: none;
	}
}

/*
 * Този gap е само подът на междините — от 60em нагоре реалното разстояние го
 * определя space-between (виж .site-branding по-горе) и то е далеч по-голямо:
 * 133px при 1920px екран срещу 32px под. Подът върши работа единствено в
 * изроденото положение, когато свободно място няма, тоест точно преди
 * пренасянето.
 *
 * 87em, а не 60em — на същото основание като полето на .tapicer-container в
 * секция 4: под 1392px шапката е точно толкова широка, колкото стига екранът,
 * и допълнителните 16px избутват менюто на втори ред.
 */
@media (min-width: 87em) {
	.site-header__inner {
		gap: var(--tapicer-space-md);
		/*
		 * 84px → 116px. От 87em логото е на пълните си 320px и лентата под
		 * него оставаше по-ниска от всичко, което носи, при hero от 642px
		 * веднага отдолу. Хоризонталният праг на пренасяне не се влияе —
		 * полето е вертикално.
		 */
		padding-block: var(--tapicer-space-md);
	}
}

/* ---------------------------------------------------------------------------
   7. Футър
   --------------------------------------------------------------------------- */

.site-footer {
	background-color: var(--tapicer-color-footer-bg);
	color: var(--tapicer-color-footer-text);
	margin-top: var(--tapicer-space-lg);
	padding-block: var(--tapicer-space-lg) var(--tapicer-space-md);
}

.site-footer a {
	color: var(--tapicer-color-footer-heading);
}

.site-footer__columns {
	display: grid;
	gap: var(--tapicer-space-md);
	grid-template-columns: 1fr;
}

.site-footer__heading {
	color: var(--tapicer-color-footer-heading);
	margin-top: 0;
	font-size: 1.0625rem;
	letter-spacing: 0.08em;
	margin-bottom: var(--tapicer-space-xs);
	text-transform: uppercase;
}

/* Колона с две групи (меню + социални) — второто заглавие има нужда от въздух. */
.site-footer__column > * + .site-footer__heading {
	margin-top: var(--tapicer-space-md);
}

.contact-list {
	display: grid;
	gap: var(--tapicer-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-list__item {
	display: grid;
	gap: 0.15rem;
}

/* Всеки ред от адреса и работното време е отделен span. */
.contact-list__line {
	display: block;
}

/*
 * Списъкът се използва два пъти — във футъра на тъмно и в секция „Контакти“
 * на светло. Основното правило е за светлия фон; тъмният вариант е отдолу.
 * Без разделянето светлият етикет остава кремав върху кремаво.
 */
.contact-list__label {
	color: var(--tapicer-color-muted);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-footer .contact-list__label {
	color: var(--tapicer-color-footer-text);
	opacity: 0.75;
}

/* Телефонът във футъра е голям колкото заглавие — това е действието,
   заради което сайтът съществува. */
.contact-list__phone {
	font-size: 1.25rem;
	font-weight: 600;
	text-decoration: none;
}

.contact-list__phone:hover,
.contact-list__phone:focus {
	text-decoration: underline;
}

/*
 * Всички връзки в списъка с контакти са с височина на пръст.
 * Текстът им е с нормален размер, тоест сам по себе си дава около 30px —
 * достатъчно за мишка, малко за палец. А точно телефонът е връзката, заради
 * която съществува сайтът: „тези клиенти звънят, не пишат имейли“.
 *
 * inline-flex, а не блок: подчертаването трябва да следва думите, не реда.
 */
.contact-list a {
	align-items: center;
	display: inline-flex;
	min-height: var(--tapicer-tap-target);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links a {
	align-items: center;
	display: inline-flex;
	gap: var(--tapicer-space-xs);
	min-height: var(--tapicer-tap-target);
	text-decoration: none;
}

.social-links a:hover,
.social-links a:focus {
	text-decoration: underline;
}

.footer-nav__list a {
	display: flex;
	align-items: center;
	min-height: 2rem;
	text-decoration: none;
}

.footer-nav__list a:hover,
.footer-nav__list a:focus {
	text-decoration: underline;
}

.company-details {
	font-size: 0.9375rem;
	margin: 0;
}

.site-footer__bottom {
	border-top: 1px solid var(--tapicer-color-footer-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-xs) var(--tapicer-space-md);
	justify-content: space-between;
	margin-top: var(--tapicer-space-md);
	padding-top: var(--tapicer-space-sm);
}

.site-footer__copyright {
	font-size: 0.9375rem;
	margin: 0;
}

/*
 * Връзката към Политиката за поверителност е задължителна по GDPR, значи
 * трябва да се уцелва. Отстъпът се компенсира с отрицателен margin, за да
 * не се раздува долният ред на футъра.
 */
.site-footer__bottom a {
	display: inline-block;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
}

@media (min-width: 40em) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Коловозите идват от footer.php — броят им зависи от това какво е попълнено. */
@media (min-width: 60em) {
	.site-footer__columns {
		/*
		 * Две секции получават 4rem вместо 2rem: коловозите им са по размера
		 * на съдържанието и при тясна междина двете групи се сливат в една.
		 */
		column-gap: var(--tapicer-footer-gap, var(--tapicer-space-md));
		grid-template-columns: var(--tapicer-footer-tracks, 1.4fr 1fr 1fr);
	}
}

/* ---------------------------------------------------------------------------
   8. Полета на форми (основа)

   CF7 добавя собствена обвивка на стъпка 8; тук са само базовите правила,
   за да не изглеждат полетата като системни.
   --------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
	background-color: var(--tapicer-color-surface);
	border: 1px solid var(--tapicer-color-border);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-text);
	font-family: inherit;
	/* Под 16px мобилният Safari увеличава страницата при фокус в полето. */
	font-size: 1rem;
	max-width: 100%;
	min-height: var(--tapicer-tap-target);
	padding: 0.6rem 0.75rem;
	width: 100%;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

label {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/*
 * Формата за търсене идва от get_search_form() и се показва на 404 и в
 * резултатите. Без тези правила бутонът ѝ е системният сив правоъгълник —
 * единственото място в сайта, което изглежда като чужда страница.
 *
 * Полето и бутонът се редят един до друг и се събират под 26em, където
 * двете заедно вече не се побират, без да смачкат полето.
 */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-xs);
	margin-block: var(--tapicer-space-sm);
	max-width: 32rem;
}

.search-form label {
	flex: 1 1 14rem;
	margin-bottom: 0;
}

.search-form .search-field {
	width: 100%;
}

.search-form .search-submit {
	background-color: var(--tapicer-color-accent);
	border: 2px solid var(--tapicer-color-accent);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-surface);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	min-height: var(--tapicer-tap-target);
	padding: 0.6rem 1.5rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	background-color: var(--tapicer-color-accent-hover);
	border-color: var(--tapicer-color-accent-hover);
}

/* ---------------------------------------------------------------------------
   9. Съдържание по подразбиране и пагинация
   --------------------------------------------------------------------------- */

.page-title,
.entry-title {
	margin-bottom: var(--tapicer-space-sm);
}

/* Заглавията в резултатите от търсене и в резервния шаблон са връзки.
   Редът им е около 36px — добавените отстъпи ги вдигат до пръст. */
.entry-title a {
	color: var(--tapicer-color-text);
	display: inline-block;
	padding-block: 0.5rem;
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--tapicer-color-accent);
}

.pagination {
	margin-top: var(--tapicer-space-md);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tapicer-tap-target);
	min-width: var(--tapicer-tap-target);
	padding-inline: var(--tapicer-space-xs);
	text-decoration: none;
}

.pagination .current {
	background-color: var(--tapicer-color-accent);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-surface);
}

.wp-caption-text,
.entry-caption {
	color: var(--tapicer-color-muted);
	font-size: 0.9375rem;
}


/* ---------------------------------------------------------------------------
   10. Начална страница

   Всяка секция сама носи отстоянията и фона си, за да може да се пропусне,
   без съседните да се слепят. Фоновете се редуват крем / почти бяло —
   достатъчно, за да се четат като отделни блокове, без линии между тях.
   --------------------------------------------------------------------------- */

.front-page {
	/* Отстоянията са на секциите, не на main-а — иначе се удвояват. */
	padding-block: 0;
}

/* Последната секция вече има долно отстояние; двойното преди футъра зее. */
.front-page + .site-footer {
	margin-top: 0;
}

.front-section {
	padding-block: var(--tapicer-space-lg);
}

.front-section--surface {
	background-color: var(--tapicer-color-surface);
}

.front-section__header {
	margin-bottom: var(--tapicer-space-md);
	max-width: var(--tapicer-text-width);
}

.front-section__title {
	margin-bottom: var(--tapicer-space-xs);
}

.front-section__text {
	color: var(--tapicer-color-muted);
	margin-bottom: 0;
}

.front-section__action {
	margin-bottom: 0;
	margin-top: var(--tapicer-space-md);
}

/* --- Hero ---------------------------------------------------------------- */

.front-hero {
	background-color: var(--tapicer-color-panel);
	color: var(--tapicer-color-on-panel);
	padding: 0;
}

.front-hero__inner {
	display: grid;
	gap: 0;
	/* Hero-ът е на цяла ширина — .tapicer-container губи ограничението си тук. */
	max-width: none;
	padding: 0;
}

.front-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--tapicer-space-lg);
	/*
	 * .front-hero__inner вече не носи padding-inline от .tapicer-container,
	 * затова лявото поле се смята наново тук — с 100vw вместо с процент от
	 * елемента, защото той е само 45% от ширината, а не цялата. Целта е
	 * заглавието да опре в същата линия, в която опира всяко друго заглавие
	 * долу по страницата (виж .tapicer-container по-горе: центриран блок
	 * с max-width плюс собствен padding-inline).
	 *
	 * Затова подът на max() е --tapicer-space-sm (1rem) — точно колкото е
	 * padding-inline на .tapicer-container. Над 1200px calc()-ът поема и
	 * повтаря сметката на контейнера ((100vw − max-width) / 2 + собствения му
	 * padding); под 1200px контейнерът е по-тесен от max-width и стои на голи
	 * 1rem, тоест на пода. Така двете линии съвпадат на всяка ширина.
	 *
	 * С предишния под от --tapicer-space-md (2rem) calc()-ът надвишаваше пода
	 * едва при 100vw > 1232px и при пет от седемте мерени ширини (320, 375,
	 * 414, 768, 1024) hero заглавието стоеше на 32px, докато всяко заглавие
	 * под него — на 16px. Точно обратното на обещаното в абзаца по-горе.
	 *
	 * Дясното поле остава --tapicer-space-md: от него вдясно няма колона, с
	 * която да се подравнява, а по-широката глътка държи текста далеч от
	 * снимката.
	 */
	padding-inline: max(var(--tapicer-space-sm), calc((100vw - var(--tapicer-content-width)) / 2 + var(--tapicer-space-sm))) var(--tapicer-space-md);
}

.front-hero__eyebrow {
	color: var(--tapicer-color-accent-soft);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 var(--tapicer-space-sm);
}

.front-hero__title {
	color: var(--tapicer-color-on-panel);
}

.front-hero__subtitle {
	color: var(--tapicer-color-accent-soft);
	font-size: 1.25rem;
}

.front-hero__text {
	color: var(--tapicer-color-on-panel-muted);
	max-width: 46ch;
}

.front-hero__action {
	margin-bottom: 0;
}

/*
 * Вторият тъмен панел на сайта — същият случай като при .front-projects
 * по-долу. `.tapicer-button--outline` носи `color: var(--tapicer-color-accent)`
 * (#8a6428), сметнат за крем фон; върху `--tapicer-color-panel` (#1f1d1b) той
 * дава 3.15:1 и пада под летвата 4.5:1. Декоративното злато (#c89b5e) върху
 * същия панел дава 6.65:1 — това е лицето на златото за тъмен фон.
 */
.front-hero .tapicer-button--outline {
	color: var(--tapicer-color-accent-soft);
}

/*
 * :hover/:focus на базовия модификатор е също специфичност 0,2,0 — без този
 * override печели по ред във файла, а не по замисъл, и оставя тъмен
 * accent-soft текст върху accent фон (2.11:1). Специфичността тук е 0,3,0.
 * Крем върху #8a6428 дава 5.04:1.
 */
.front-hero .tapicer-button--outline:hover,
.front-hero .tapicer-button--outline:focus {
	color: var(--tapicer-color-surface);
}

.front-hero__media {
	min-height: 280px;
}

.front-hero__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * Двуколонният split важи само когато има снимка. Библиотеката е празна
 * днес — без тази врата 55% от ширината до панела би зейнало празно.
 */
@media (min-width: 60em) {
	.front-hero--has-image .front-hero__inner {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	}

	/*
	 * Таван на височината на снимката. Без него колоната е 55vw без горна
	 * граница, а снимката няма собствена височина — редът на грида просто
	 * следва естественото ѝ съотношение (4:3) и расте заедно с екрана:
	 * мерено 594px на 1440, 792px на 1920 и 1056px на 2560. Текстът отсреща
	 * е центриран (justify-content: center) и остава висок около 400px,
	 * тоест празната ивица над и под него растеше със същия ход — 136px,
	 * 235px, 330px. Оттам идва усещането за „празно“ на широк екран.
	 *
	 * С тавана object-fit: cover най-после реже, както обещава коментарът в
	 * hero.php и както е сметнато в go-live-plan.md. 70vh пази hero-а под
	 * сгъвката на нисък лаптоп, 640px държи тавана на висок монитор; до
	 * 1440px нито едното не се задейства и оформлението там не се променя.
	 *
	 * Само от 60em нагоре: под този праг hero-ът е на една колона и цялата
	 * снимка се вижда нерязана. Това е обещано на собственика в
	 * go-live-plan.md (Task 5, Стъпка 1) и не се пипа.
	 */
	.front-hero--has-image .front-hero__media {
		max-height: min(70vh, 640px);
	}

	/*
	 * От 60em нагоре текстът се центрира в собствената си колона, вместо да
	 * стъпва на лявата линия на страницата.
	 *
	 * Дотук лявото поле повтаряше сметката на .tapicer-container, за да стои
	 * hero заглавието на една линия с всяко заглавие под него. Линията обаче
	 * е половината поле на страницата — 332px при 1905px екран — и понеже
	 * панелът тук е тъмен и опира в левия ръб, това поле се чете като зейнала
	 * дупка, а не като поле. Собственикът го посочи два пъти.
	 *
	 * Затова от 60em нагоре hero-ът се държи като това, което е: самостоятелен
	 * панел на цяла ширина. Полето е симетрично и се смята от колоната, не от
	 * страницата — 34rem е приблизително ширината на реда с двата бутона, тоест
	 * най-широкото нещо в текста, и разликата до колоната се дели на две.
	 * Подът --tapicer-space-md пази тесните колони (под ~1200px) от нулево поле.
	 *
	 * Цената, платена съзнателно: hero заглавието вече НЕ е на една вертикална
	 * линия със заглавията под него и с логото в шапката. Това отменя частта
	 * от Task 13, която ги подравняваше — виж дългия коментар при
	 * .front-hero__content по-горе, който важи вече само под 60em, където
	 * hero-ът е на една колона и подравняването се вижда.
	 *
	 * Понеже сметката е в проценти от колоната, тя не мери 100vw и затова не
	 * хваща лентата за скролиране — старото правило се разминаваше със
	 * страницата с половин лента (7-8px) на всеки браузър с класически скрол.
	 */
	.front-hero__content {
		padding-inline: max(var(--tapicer-space-md), calc((100% - 34rem) / 2));
	}
}

/*
 * Тук стоеше огледалото на стъпката в .tapicer-container (секция 4): от 87em
 * нагоре контейнерът минава на space-md, значи и лявото поле на hero-а минаваше
 * на space-md, за да не се разминат двете линии.
 *
 * Махнато е заедно с подравняването: от 60em нагоре hero текстът вече е
 * центриран в колоната си (виж коментара в блока на 60em) и лявото му поле не
 * зависи нито от контейнера, нито от 87em. Правилото щеше да бие новото, защото
 * е по-надолу във файла и със същата специфичност.
 *
 * Заедно с него отпадна и стъпката 50/50 на решетката, слагана временно, за да
 * не се свива текстовата колона от растящото поле. Причината я няма — при
 * симетрично поле полезната ширина вече не зависи от ширината на екрана — а
 * 45/55 връща на снимката 5-те процента, които ѝ бяха взети. `sizes` в hero.php
 * е върнат на 55vw заедно с това.
 */

/* --- Преди / След -------------------------------------------------------- */

/*
 * Секцията минава на тъмния панел (Task 8) — същият тъмен фон като hero-а и
 * футъра, за визуален ритъм по цялата начална страница. Етикетът „Преди“
 * няма собствен фон извън плочката, затова следва панела; „След“ пази
 * собствения си плътен фон (--tapicer-color-accent), защото стои върху
 * снимка, а не върху панела — оставен е с изходния си светъл текст, иначе
 * контрастът му спрямо accent пада под прага.
 */
.front-projects {
	background-color: var(--tapicer-color-panel);
	color: var(--tapicer-color-on-panel);
}

.front-projects .front-section__title {
	color: var(--tapicer-color-on-panel);
}

.front-projects .front-section__text {
	color: var(--tapicer-color-on-panel-muted);
}

.front-projects .project-pair__label {
	color: var(--tapicer-color-on-panel);
}

/*
 * „След“ (projects.php:104) носи и двата класа на един и същ елемент —
 * `project-pair__label project-pair__label--after` — затова правилото по-горе
 * го мачва въпреки че не го изброява поименно (0,2,0 печели по специфичност,
 * не защото елементът е „изключен“). Тук връщаме собствения му цвят изрично,
 * със селектор без интервал между двата класа (0,3,0), за да печели по
 * специфичност независимо от реда във файла.
 */
.front-projects .project-pair__label.project-pair__label--after {
	color: var(--tapicer-color-surface);
}

.front-projects .tapicer-button--outline {
	color: var(--tapicer-color-accent-soft);
}

/*
 * :hover/:focus по-долу в style.css (реда с .tapicer-button--outline:hover)
 * е също специфичност 0,2,0 — без този override печели по ред на файла, а не
 * по замисъл, и оставя тъмен accent-soft текст върху accent фон (2.11:1).
 * Специфичността тук е 0,3,0, за да печели независимо от реда.
 */
.front-projects .tapicer-button--outline:hover,
.front-projects .tapicer-button--outline:focus {
	color: var(--tapicer-color-surface);
}

.project-pairs {
	display: grid;
	gap: var(--tapicer-space-md);
}

.project-pair {
	margin: 0;
}

/* Цялата карта е една цел за докосване — по-лесно се улучва с пръст. */
.project-pair__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

/* На телефон двете снимки са една под друга, на широк екран — рамо до рамо. */
.project-pair__images {
	display: grid;
	gap: var(--tapicer-space-xs);
	grid-template-columns: 1fr;
}

.project-pair__figure {
	margin: 0;
	position: relative;
}

/*
 * Рамката се налага тук, а не при генерирането на файла.
 *
 * В решетка пропорцията принадлежи на решетката, не на снимката. Докато всяка
 * двойка носеше собствената си --tapicer-pair-ratio, четирите карти в архива
 * се мереха 227, 403, 302 и 178px високи: редът се теглеше по най-високата,
 * под ниските зееше поле, а заглавията стояха на различна височина. Едно 4:3
 * за всички — окото сравнява мебели, а не рамки.
 *
 * 4:3, защото три от четирите двойки вече са 4:3 и не губят нищо. Портретните
 * кадри се режат отгоре и отдолу от object-fit: cover по-долу.
 *
 * Голямото сравнение на страницата на един проект пази своята пропорция по
 * двойката — там няма съсед, с когото да се подравнява. Виж
 * .project-compare__image.
 */
.project-pair__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--tapicer-radius);
	display: block;
	object-fit: cover;
	width: 100%;
}

/*
 * Етикетът стои върху снимката, а какво има под него зависи от кадъра.
 * Затова има собствен плътен фон — само цвят на текста не гарантира нищо.
 */
.project-pair__label {
	background-color: var(--tapicer-color-text);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-bg);
	/* Не по-малко от 14px: заданието иска „ясни етикети“, а тези две думи
	   са единственото, което обяснява коя снимка е коя. */
	font-size: 0.875rem;
	font-weight: 600;
	left: var(--tapicer-space-xs);
	letter-spacing: 0.08em;
	padding: 0.25rem 0.625rem;
	position: absolute;
	text-transform: uppercase;
	top: var(--tapicer-space-xs);
}

.project-pair__label--after {
	background-color: var(--tapicer-color-accent);
	color: var(--tapicer-color-surface);
}

.project-pair__title {
	font-size: 1.25rem;
	margin: var(--tapicer-space-sm) 0 0;
}

.project-pair__link:hover .project-pair__title,
.project-pair__link:focus .project-pair__title {
	color: var(--tapicer-color-accent);
}

@media (min-width: 48em) {
	.project-pairs {
		grid-template-columns: repeat(2, 1fr);
	}

	.project-pair__images {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Предимствата ---------------------------------------------------------- */

/*
 * Мобилно първо: една колона под 36em, две от 36em до 60em, а от 60em нагоре
 * auto-fit с минимум 15rem — при четири предимства и контейнер ~1200px това
 * дава точно четири колони, без да се брои ръчно.
 */
.advantage-grid {
	display: grid;
	gap: var(--tapicer-space-md);
	grid-template-columns: 1fr;
}

.advantage {
	display: flex;
	flex-direction: column;
	/*
	 * sm (16px), не xs (8px) — докато иконата беше гол SVG без кръгче, 8px
	 * следваше мокапа (variant-a.html). От 2026-09-07 иконата е в кръгче
	 * (.advantage__icon-badge), както в „Как работим“, а там разстоянието
	 * кръгче → заглавие е 16px (margin-bottom на .process-step__icon).
	 * 8px под кръгче изглеждаше стеснено, затова разстоянията са изравнени.
	 */
	gap: var(--tapicer-space-sm);
}

/*
 * `.advantage__body` (advantages.php) нарочно няма правило и не бива да се
 * маха от маркъпа: обвивката е нужна на флекса по-горе. Без нея заглавието и
 * абзацът стават преки деца на .advantage и разстоянието между тях става
 * gap (16px) + margin-bottom на h3 (8px) = 24px, докато разстоянието
 * икона → заглавие е 16px. С обвивката заглавие → текст остава 8px
 * (margin-bottom на .advantage__title), а кръгче → заглавие е 16px.
 * Записано тук, за да не търси следващият липсващо правило.
 */

/*
 * Кръгче зад иконата, като .process-step__icon по-долу в „Как работим“ —
 * собственикът поиска същия контраст спрямо белия фон на секцията
 * (front-section--surface) на 2026-09-07. 5rem, не 4.5rem както при
 * process-стъпките: диванът е 60px широк и на 4.5rem (72px) кръгче остава
 * само 6px отстъп отстрани, а на 5rem (80px) — комфортните 10px.
 */
.advantage__icon-badge {
	align-items: center;
	background-color: var(--tapicer-color-bg);
	border: 1px solid var(--tapicer-color-border);
	border-radius: 50%;
	display: inline-flex;
	height: 5rem;
	justify-content: center;
	width: 5rem;
}

.advantage__icon {
	color: var(--tapicer-color-accent);
}

/*
 * Тагът тук е ту h3, ту h2 — advantages.php вдига предимствата на второ ниво,
 * когато секцията няма собствен надслов, за да не се прескача ниво след <h1>
 * на hero-а. Размерът не бива да следва тага: и в двата случая се рисува като
 * h3 (същият clamp като в правилото за h3 по-горе), иначе мокапът се променя
 * според това дали собственикът е попълнил едно поле.
 */
.advantage__title {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
	margin-bottom: var(--tapicer-space-xs);
}

/*
 * Ляво подравняване, не justify. Решетката е четириколонна и колоната е
 * 260–340px дори на 1920px — около 35 знака. Подравняването по двата ръба
 * започва да изглежда добре от 45–55 знака нагоре; под прага разредките се
 * разтягат видимо и в абзаца се отварят реки от бяло. Дизайн ревюто от
 * 2026-09-15 ги е видяло на всяка мерена ширина, не само на телефон.
 */
.advantage__text {
	color: var(--tapicer-color-muted);
}

@media (min-width: 36em) {
	.advantage-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60em) {
	.advantage-grid {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

/* --- Категории ------------------------------------------------------------
   Мобилно първо: две колони под 36em, три от 36em до 60em, пет от 60em
   нагоре — плочките остават четими на телефон, вместо да се смачкат в един ред.
   --------------------------------------------------------------------------- */

.category-grid {
	display: grid;
	gap: var(--tapicer-space-sm);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 36em) {
	.category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.category-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/*
 * Плочката е плътен тъмен блок, не снимка с наложен текст: надписът стои
 * под изображението на същия панелен фон, затова четимостта му не зависи
 * от кадъра отгоре. Без снимка блокът остава сам — точно затова има
 * собствен фон и отстояние, а не разчита на изображението да го запълни.
 */
.category-card {
	background-color: var(--tapicer-color-panel);
	border-radius: var(--tapicer-radius);
	display: flex;
	flex-direction: column;
	min-height: var(--tapicer-tap-target);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.category-card:hover,
.category-card:focus-visible {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.category-card:hover,
	.category-card:focus-visible {
		transform: none;
	}
}

/*
 * 4:3, не 1.85:1. Предишното 278/150 не беше избор на дизайна: това са
 * пикселните размери на първата картинка-заместител в макета
 * (dev/designs/dist/variant-a.html:127 — папката е изтрита на 2026-09-01,
 * прави се наново с `python dev/designs/build.py`). Другите четири там са 267x150,
 * 272x150, 246x150 и 253x150 — контактна лента с обща височина 150px, а не
 * единна пропорция. Пренесено е като съотношение по погрешка при порта на
 * вариант А, затова не го „поправяй“ обратно към числа от макета.
 *
 * Снимките на плочките са 4:3. При 1.85:1 и object-fit: cover се режеха по
 * 13.9% отгоре и отдолу — тоест облегалката и краката, точно това, по което
 * мебелта се разпознава. При 4:3 четири от петте не губят нито един пиксел.
 *
 * Всяка бъдеща промяна на пропорцията се проверява на 390px: там плочката е
 * най-ниска и първа става нечетима.
 */
.category-image {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

.category-caption {
	color: var(--tapicer-color-on-panel);
	display: block;
	flex-grow: 1;
	/* Не по-малко от 14px — надписът носи и линка на цялата плочка. */
	font-size: 0.875rem;
	font-weight: 600;
	padding: var(--tapicer-space-sm);
	transition: color 0.2s ease;
}

.category-card:hover .category-caption,
.category-card:focus-visible .category-caption {
	color: var(--tapicer-color-accent-soft);
}

/* --- Как работим --------------------------------------------------------- */

.process-list {
	display: grid;
	gap: var(--tapicer-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.process-step {
	margin: 0;
}

.process-step__icon {
	align-items: center;
	background-color: var(--tapicer-color-bg);
	border: 1px solid var(--tapicer-color-border);
	border-radius: 50%;
	color: var(--tapicer-color-accent);
	display: inline-flex;
	/* 4.5rem, не 3.5rem — собственикът поиска по-едри, по-видими икони на
	   2026-09-07; process.php вдига SVG-то вътре успоредно на 36x36. */
	height: 4.5rem;
	justify-content: center;
	margin-bottom: var(--tapicer-space-sm);
	width: 4.5rem;
}

.process-step__title {
	font-size: 1.25rem;
	margin-bottom: var(--tapicer-space-xs);
}

/* Номерът е текст в HTML-а, а не CSS брояч: списък без точки губи
   семантиката си в част от екранните четци и тогава редът се чете само
   от него. */
.process-step__number {
	color: var(--tapicer-color-accent);
}

/* Същата четириколонна ширина и същата причина като .advantage__text. */
.process-step__text {
	color: var(--tapicer-color-muted);
	margin-bottom: 0;
}

/* auto-fit, а не фиксирани четири колони — стъпките може да са и три. */
@media (min-width: 40em) {
	.process-list {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}
}

/* --- За нас -------------------------------------------------------------- */

.front-about__inner {
	display: grid;
	gap: var(--tapicer-space-md);
}

.front-about__content {
	max-width: var(--tapicer-text-width);
}

.front-about__content p:last-child {
	margin-bottom: 0;
}

.front-about__image {
	border-radius: var(--tapicer-radius);
	width: 100%;
}

@media (min-width: 60em) {
	.front-about__inner {
		align-items: center;
		gap: var(--tapicer-space-lg);
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * Без снимка втората колона остава празна и текстът увисва в лявата
	 * половина на екрана. Един ред е по-честен; редът пак не става нечетимо
	 * дълъг, защото .front-about__content е с max-width от --tapicer-text-width.
	 */
	.front-about__inner--text-only {
		grid-template-columns: 1fr;
	}
}

/* --- Форма за заявка ----------------------------------------------------- */

/* Тънката линия горе спира окото: това е секцията, заради която е сайтът. */
.front-form {
	border-top: 3px solid var(--tapicer-color-accent);
}

.front-form__inner {
	max-width: 46rem;
}

.front-form__body,
.front-form__fallback {
	margin-top: var(--tapicer-space-md);
}

.front-form__fallback-text {
	font-size: 1.125rem;
}

/* Бележка, която вижда само влезлият собственик. */
.front-form__notice {
	background-color: var(--tapicer-color-bg);
	border-left: 3px solid var(--tapicer-color-accent-soft);
	color: var(--tapicer-color-muted);
	font-size: 0.9375rem;
	margin-bottom: 0;
	margin-top: var(--tapicer-space-md);
	padding: var(--tapicer-space-sm);
}

/* --- Контакти ------------------------------------------------------------ */

.front-contacts__inner {
	display: grid;
	gap: var(--tapicer-space-md);
}

.contact-list--large {
	font-size: 1.125rem;
	gap: var(--tapicer-space-sm);
}

.contact-list--large .contact-list__phone {
	font-size: 1.5rem;
}

/*
 * Съотношението пази мястото на картата отпреди тя да се зареди — иначе
 * съдържанието под нея подскача точно когато посетителят чете адреса.
 */
.front-contacts__map {
	aspect-ratio: 4 / 3;
	background-color: var(--tapicer-color-border);
	border-radius: var(--tapicer-radius);
	overflow: hidden;
}

.front-contacts__map iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

@media (min-width: 60em) {
	.front-contacts__inner {
		align-items: start;
		gap: var(--tapicer-space-lg);
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * Огледало на .front-about__inner--text-only и по същата причина: втората
	 * колона чака карта, която Customizer още няма. Редовете тук са къси
	 * (етикет + стойност), тъй че таван на ширината не им трябва — за разлика
	 * от прозата в „За нас“.
	 */
	.front-contacts__inner--text-only {
		grid-template-columns: 1fr;
	}

	.front-contacts__map {
		aspect-ratio: 1 / 1;
	}
}


/* ---------------------------------------------------------------------------
   11. Архиви и single шаблони

   Решетките са с еднакъв ритъм като началната страница — картата на проект е
   буквално същата двойка снимки. Разликата е в броя колони: каталогът с
   модели е по-ситен, защото картата му е една снимка и цена.
   --------------------------------------------------------------------------- */

.archive-header {
	margin-bottom: var(--tapicer-space-md);
}

.archive-header__text {
	color: var(--tapicer-color-muted);
	max-width: var(--tapicer-text-width);
}

.archive-header__text p {
	margin: 0;
}

/* --- Филтри -------------------------------------------------------------- */

.archive-filters {
	align-items: flex-end;
	background-color: var(--tapicer-color-surface);
	border: 1px solid var(--tapicer-color-border);
	border-radius: var(--tapicer-radius);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
	margin-bottom: var(--tapicer-space-md);
	padding: var(--tapicer-space-sm);
}

.archive-filters__fields {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
}

.archive-filters__field {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	margin: 0;
}

.archive-filters__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
	margin: 0;
}

/* Линкът стои до бутон — трябва му същата височина, за да се уцелва с пръст. */
.archive-filters__reset {
	align-items: center;
	display: inline-flex;
	min-height: var(--tapicer-tap-target);
}

.archive-count {
	color: var(--tapicer-color-muted);
	margin-bottom: var(--tapicer-space-sm);
}

.archive-empty {
	font-size: 1.125rem;
}

/*
 * Изходите стоят под съобщението, а не долепени за него: .tapicer-actions
 * носи margin-block: 0, защото в hero-а отстоянието идва отвън.
 *
 * 2rem, не 1rem колкото по подразбиране взима <p>: две копчета едно до друго
 * искат повече въздух над тях, отколкото едно копче в archive-project.php и
 * archive-model.php — нарочна разлика, не пропуск за изравняване.
 */
.archive-empty__actions {
	margin-top: var(--tapicer-space-md);
}

/* Бележка, която вижда само влезлият собственик. */
.archive-notice {
	background-color: var(--tapicer-color-bg);
	border-left: 3px solid var(--tapicer-color-accent-soft);
	color: var(--tapicer-color-muted);
	font-size: 0.9375rem;
	max-width: var(--tapicer-text-width);
	padding: var(--tapicer-space-sm);
}

/* --- Решетки с карти ----------------------------------------------------- */

.card-grid {
	display: grid;
	gap: var(--tapicer-space-md);
	grid-template-columns: 1fr;
}

/*
 * Картата на модел е една снимка — на телефона се събират две в ред.
 * 9rem, а не повече: при 375px екран с лента за превъртане остават 343px,
 * а две колони по 10.5rem с междина вече не се побират и каталогът пада
 * на една колона.
 */
.card-grid--models {
	gap: var(--tapicer-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.card__terms {
	color: var(--tapicer-color-muted);
	font-size: 0.9375rem;
	margin: var(--tapicer-space-xs) 0 0;
}

.model-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.model-card__image {
	aspect-ratio: 1 / 1;
	border-radius: var(--tapicer-radius);
	display: block;
	object-fit: cover;
	width: 100%;
}

.model-card__body {
	padding-top: var(--tapicer-space-xs);
}

.model-card__title {
	font-size: 1.125rem;
	margin: 0;
}

.model-card__link:hover .model-card__title,
.model-card__link:focus .model-card__title {
	color: var(--tapicer-color-accent);
}

.model-card__price {
	color: var(--tapicer-color-muted);
	margin: 0.25rem 0 0;
}

/*
 * Без снимка картата няма за какво да закачи фото-плочката — панелен вид,
 * какъвто .category-card вече ползва за плочка без снимка, вместо гол линк.
 */
.model-card--text-only {
	background-color: var(--tapicer-color-panel);
	border-radius: var(--tapicer-radius);
}

.model-card--text-only .model-card__body {
	padding: var(--tapicer-space-sm);
}

.model-card--text-only .model-card__title {
	color: var(--tapicer-color-on-panel);
}

/* --- Един проект --------------------------------------------------------- */

.entry-header {
	margin-bottom: var(--tapicer-space-md);
}

/*
 * Трошиците заемат мястото на предишния ред „← Всички проекти“ и ползват
 * неговите отстояния: визуално това е същият ред, само че показва целия път.
 * `.entry-back` вече няма кой да го ползва — двата шаблона, които го викаха,
 * минаха на трошици.
 */
.breadcrumbs {
	margin-bottom: var(--tapicer-space-sm);
}

.breadcrumbs__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item {
	align-items: center;
	display: inline-flex;
	gap: var(--tapicer-space-xs);
}

.breadcrumbs__item a {
	align-items: center;
	display: inline-flex;
	min-height: var(--tapicer-tap-target);
	text-decoration: none;
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus {
	text-decoration: underline;
}

.breadcrumbs__sep,
.breadcrumbs__current {
	color: var(--tapicer-color-muted);
}

/*
 * Голямото сравнение. Двете снимки стоят в еднаква рамка — иначе окото
 * сравнява рамки, а не мебели. Пропорцията ѝ не е фиксирана: шаблонът я
 * смята от самите снимки и я подава като --tapicer-pair-ratio, така че
 * двойка от две портретни снимки не губи нищо.
 */
.project-compare {
	display: grid;
	gap: var(--tapicer-space-sm);
	margin-bottom: var(--tapicer-space-md);
}

/*
 * Сравнението излиза от контейнера и се разширява до --tapicer-media-width.
 * Разликата между двата токена е постоянна, затова изтеглянето е фиксирано
 * число, а не сметка със 100vw: vw включва лентата за превъртане и щеше да
 * бута страницата в хоризонтален скрол.
 *
 * 104em (1664px) е първата ширина, на която мъртвото поле отстрани стига
 * тези 140px. По-рано отрицателният margin би излязъл извън екрана — затова
 * breakpoint-ът не е 60em като останалите, а се смята от самите токени:
 * 1320 + 2×32 (полето на контейнера) + 2×140 = 1664.
 *
 * Заглавието нарочно остава в тесния контейнер: h1 е клампнат на 3.5rem и в
 * кутия от 1536px изглежда изгубен в лявата третина.
 */
@media (min-width: 104em) {
	.project-compare {
		margin-inline: calc(-1 * (var(--tapicer-media-width) - var(--tapicer-content-width)) / 2);
	}
}

.project-compare__figure {
	margin: 0;
	position: relative;
}

.project-compare__image {
	aspect-ratio: var(--tapicer-pair-ratio, 1);
	border-radius: var(--tapicer-radius);
	display: block;
	object-fit: cover;
	width: 100%;
}

.project-compare .project-pair__label {
	font-size: 0.875rem;
	left: var(--tapicer-space-sm);
	top: var(--tapicer-space-sm);
}

/*
 * Характеристиките на проекта („Тип мебел“, „Дамаска“) и на модела. Всяка
 * двойка е колонка — дребен разреден етикет над стойността — а двойките се
 * редят една до друга, докато има място. Така блокът е една лента, а не два
 * недовършени реда текст.
 */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm) var(--tapicer-space-md);
	margin: 0 0 var(--tapicer-space-md);
}

.entry-meta__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

/*
 * Главните букви идват от CSS, а не от текста в шаблона — екранните четци
 * получават „Тип мебел“, а не разбуквено съкращение. Двоеточие няма: етикетът
 * вече е надпис над стойността, а не начало на изречение.
 */
.entry-meta__label {
	color: var(--tapicer-color-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.entry-meta__value {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-xs);
	margin: 0;
}

/*
 * Дамаската и типът мебел водят към филтрирания архив. Като редови връзки бяха
 * високи колкото буквите — около 20px, което на телефон се уцелва трудно.
 * Чипът носи височината в себе си: min-height 2.75rem е 44px и при промяна на
 * шрифта, така че вече няма нужда от застъпващ се padding.
 *
 * .entry-meta__chip е същата форма без връзка — размерите на модела не са
 * кликаеми и не бива да изглеждат така.
 *
 * Рамката е accent-soft, а не разделителният --tapicer-color-border: върху
 * surface сивкавият кант е 1.32:1 и кутията се губи. Същата стъпка вече е
 * направена при .tapicer-button--outline, чието hover превръщане чипът копира.
 */
.entry-meta__value a,
.entry-meta__chip {
	align-items: center;
	background-color: var(--tapicer-color-surface);
	border: 1px solid var(--tapicer-color-accent-soft);
	border-radius: var(--tapicer-radius);
	display: inline-flex;
	min-height: 2.75rem;
	padding-inline: var(--tapicer-space-sm);
}

.entry-meta__chip {
	color: var(--tapicer-color-text);
}

.entry-meta__value a {
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.entry-meta__value a:hover,
.entry-meta__value a:focus-visible {
	background-color: var(--tapicer-color-accent);
	border-color: var(--tapicer-color-accent);
	color: var(--tapicer-color-surface);
}

/*
 * Заглавие на секция. На 1320px h1 е 56px — фиксираните 22px изглеждаха като
 * подзаглавие и разделът не започваше видимо. Скалата дава 24px на телефон
 * (срещу h1 от 33.6px) и 32px на 1320px.
 */
.entry-section-title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	margin-bottom: var(--tapicer-space-sm);
}

.entry-gallery {
	margin-top: var(--tapicer-space-lg);
}

.gallery-grid {
	display: grid;
	gap: var(--tapicer-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-grid__link {
	display: block;
}

.gallery-grid__image {
	aspect-ratio: 1 / 1;
	border-radius: var(--tapicer-radius);
	display: block;
	object-fit: cover;
	transition: opacity 0.15s ease;
	width: 100%;
}

.gallery-grid__link:hover .gallery-grid__image,
.gallery-grid__link:focus .gallery-grid__image {
	opacity: 0.85;
}

/*
 * Решетката с процеса. Коловозите са двойно повече от колоните, а всяка
 * плочка заема по два — това не променя широчината ѝ (при гап g и широчина W
 * плочката излиза (W − 2g)/3 и в двата случая), но дава половин коловоз, с
 * който непълният последен ред се центрира вместо да виси вляво.
 *
 * Броят снимки не се дели нито на 3, нито на 2 при 5, 7, 11… — затова
 * отместването се смята в шаблона и идва оттам. Плочката, която започва
 * последния ред, е различна на двата breakpoint-а, значи има два класа и
 * media query-то избира кой действа.
 *
 * Под 48em винаги са две колони — на телефон три правят плочки, в които не
 * се вижда нищо.
 */
.project-process {
	display: grid;
	gap: var(--tapicer-space-sm);
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-process__item {
	grid-column: span 2;
}

.project-process__item--narrow-start {
	/* Пълен shorthand, не само -start: иначе -end пада на auto и плочката се
	 * свива до един коловоз вместо да пази span 2 от базовото правило. */
	grid-column: var(--tapicer-process-narrow-start, auto) / span 2;
}

@media (min-width: 48em) {
	.project-process {
		grid-template-columns: repeat(var(--tapicer-process-tracks, 6), 1fr);
	}

	.project-process__item--narrow-start {
		grid-column: auto / span 2;
	}

	.project-process__item--wide-start {
		grid-column: var(--tapicer-process-wide-start, auto) / span 2;
	}
}

.project-process__link {
	display: block;
}

/*
 * Обща рамка за целия ред — същото решение като при .project-pair__image
 * (02.09.2026). Без нея редът се тегли по най-високата снимка и под ниските
 * зее празно поле. Реже CSS, не генераторът: файлът пази пълния кадър и
 * голямата снимка на готовата мебел го показва цял.
 */
.project-process__image {
	aspect-ratio: 4 / 3;
	border-radius: var(--tapicer-radius);
	display: block;
	object-fit: cover;
	transition: opacity 0.15s ease;
	width: 100%;
}

.project-process__link:hover .project-process__image,
.project-process__link:focus .project-process__image {
	opacity: 0.85;
}

/*
 * Готовата мебел на процесен проект. Портретна снимка в контейнер от 1288px
 * иначе става 1717px висока — два екрана скрол през едно изображение, при
 * което мебелта никога не се вижда цяла. Таванът е същият идиом като при
 * .photo-page__image и .front-hero__media.
 *
 * contain, а не cover: рязането на портретен кадър до широка лента
 * обезглавява мебелта. Широчината следва височината, затова width: auto.
 */
.project-final__image {
	border-radius: var(--tapicer-radius);
	display: block;
	margin: 0 auto var(--tapicer-space-md);
	/* 640 се подава и на tapicer_capped_sizes() в single-project.php — сменяш ли го тук, смени го и там. */
	max-height: min(70vh, 640px);
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/*
 * Страницата на една снимка. Снимката е причината посетителят да е тук,
 * затова е сама и е широка колкото контейнера; прелистването стои под нея,
 * където окото отива, след като е разгледало.
 */
.photo-page__figure {
	margin: 0 0 var(--tapicer-space-md);
}

.photo-page__image {
	border-radius: var(--tapicer-radius);
	display: block;
	margin: 0 auto;
	max-height: 80vh;
	object-fit: contain;
	width: auto;
	max-width: 100%;
}

.photo-page__nav {
	align-items: center;
	display: flex;
	gap: var(--tapicer-space-sm);
	justify-content: space-between;
}

.photo-page__link {
	border-radius: var(--tapicer-radius);
	display: inline-block;
	padding: 0.5rem 0.75rem;
}

/*
 * Краят на реда остава на мястото си, вместо да изчезне: иначе броячът
 * подскача наляво-надясно между първата и втората снимка.
 */
.photo-page__link--off {
	opacity: 0.35;
}

.photo-page__count {
	margin: 0;
}

.photo-page__back {
	margin-top: var(--tapicer-space-md);
}

/*
 * Обвивката около голяма снимка. `display: block` държи рамката плътно около
 * снимката — иначе редовият елемент добавя няколко пиксела отдолу и
 * подравняването на двойката ПРЕДИ/СЛЕД се разваля.
 */
.project-photo-link {
	display: block;
}

.project-photo-link:hover img,
.project-photo-link:focus img {
	opacity: 0.85;
}

/* --- Един модел ---------------------------------------------------------- */

.model-single__layout {
	display: grid;
	gap: var(--tapicer-space-md);
}

.model-single__image {
	border-radius: var(--tapicer-radius);
	display: block;
	width: 100%;
}

/* Цената е първият въпрос на всеки посетител — стои като заглавие. */
.model-single__price {
	color: var(--tapicer-color-accent);
	font-family: var(--tapicer-font-heading);
	font-size: 1.5rem;
	margin: 0 0 var(--tapicer-space-md);
}

.model-single__details .entry-content {
	margin-bottom: var(--tapicer-space-md);
}

.model-single__action {
	margin: 0;
}

/* --- Предишен / следващ -------------------------------------------------- */

.post-navigation {
	border-top: 1px solid var(--tapicer-color-border);
	display: grid;
	gap: var(--tapicer-space-sm);
	margin-top: var(--tapicer-space-lg);
	padding-top: var(--tapicer-space-md);
}

.post-navigation__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.post-navigation__label {
	color: var(--tapicer-color-muted);
	display: block;
	font-size: 0.9375rem;
}

.post-navigation__title {
	display: block;
	font-family: var(--tapicer-font-heading);
	font-size: 1.125rem;
}

.post-navigation__link:hover .post-navigation__title,
.post-navigation__link:focus .post-navigation__title {
	color: var(--tapicer-color-accent);
}

/* --- Призив за действие -------------------------------------------------- */

.tapicer-cta {
	background-color: var(--tapicer-color-surface);
	border-top: 1px solid var(--tapicer-color-border);
	margin-top: var(--tapicer-space-lg);
	padding-block: var(--tapicer-space-lg);
	text-align: center;
}

/* Секцията носи собствено отстояние; това на main-а го удвоява. */
.site-main > .tapicer-cta:last-child {
	margin-bottom: calc(var(--tapicer-space-md) * -1);
}

/*
 * Цветната лента на призива опира във футъра. Стар браузър без :has()
 * показва процепа отпреди — по-широко разстояние, не счупен изглед.
 */
.site-main:has( > .tapicer-cta:last-child ) + .site-footer {
	margin-top: 0;
}

.tapicer-cta__title {
	margin-bottom: var(--tapicer-space-xs);
}

.tapicer-cta__text {
	color: var(--tapicer-color-muted);
	margin-inline: auto;
	max-width: var(--tapicer-text-width);
}

.tapicer-cta__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-sm);
	justify-content: center;
	margin-top: var(--tapicer-space-md);
}


@media (min-width: 48em) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.card-grid--models {
		gap: var(--tapicer-space-md);
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	}

	.post-navigation {
		grid-template-columns: 1fr 1fr;
	}

	/* Без предишен запис следващият пак стои вдясно, а не в лявата колона. */
	.post-navigation__link--next {
		grid-column: 2;
		text-align: right;
	}
}

@media (min-width: 60em) {
	.project-compare {
		gap: var(--tapicer-space-md);
		grid-template-columns: 1fr 1fr;
	}

	.model-single__layout {
		align-items: start;
		gap: var(--tapicer-space-lg);
		grid-template-columns: 1.1fr 1fr;
	}
}


/* ---------------------------------------------------------------------------
   12. Форма за заявка (Contact Form 7)

   Стиловете на самия плъгин не се зареждат (виж inc/contact-form.php) —
   всичко, което CF7 носи, е тук, преведено на палитрата на темата. Затова
   разделът започва с функционалните правила: без тях скритите полета се
   показват, отговорът за екранни четци се вижда, а въртележката не се върти.

   CF7 минава съдържанието на формата през wpautop, така че всяко поле идва
   опаковано в <p>. Не си струва да се бори с това — просто му се маха
   отстоянието.
   --------------------------------------------------------------------------- */

/* --- Пренесено от includes/css/styles.css на плъгина --------------------- */

.wpcf7 .screen-reader-response {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

/* Телефон и имейл се четат отляво надясно дори в дясно-ляв контекст. */
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

/* CF7 заключва полетата, докато изпраща. */
.wpcf7 [inert] {
	opacity: 0.5;
}

/* --- Скелет на формата --------------------------------------------------- */

.wpcf7-form .tapicer-form__row p,
.wpcf7-form .tapicer-form__file p,
.wpcf7-form .tapicer-form__actions p {
	margin: 0;
}

.tapicer-form__note {
	color: var(--tapicer-color-muted);
	font-size: 0.9375rem;
	margin-block: 0 var(--tapicer-space-sm);
}

.tapicer-form__grid {
	display: grid;
	gap: var(--tapicer-space-sm);
}

/* Fieldset-ът е групиращ елемент, не рамка — рамката би нарязала формата. */
.tapicer-form__grid fieldset {
	border: 0;
	margin: 0;
	/* Без това fieldset отказва да се свие под ширината на съдържанието си. */
	min-width: 0;
	padding: 0;
}

.tapicer-form__grid legend {
	font-weight: 600;
	margin-bottom: 0.25rem;
	padding: 0;
}

.tapicer-form__hint {
	color: var(--tapicer-color-muted);
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Звездичката е акцент, а не съкращение — подчертаването само отвлича. */
.tapicer-form__req {
	color: var(--tapicer-color-accent);
	cursor: help;
	text-decoration: none;
}

/* --- Отметки и радиобутони ----------------------------------------------- */

/*
 * CF7 реди елементите един до друг. Тук всеки е на свой ред: двата избора
 * са дълги изречения, а не „да / не“, и на телефон така или иначе се пренасят.
 */
.wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-list-item + .wpcf7-list-item {
	margin-top: 0.25rem;
}

.wpcf7-list-item label {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 0.625rem;
	/* Цялото изречение е цел за докосване, не само квадратчето. */
	min-height: var(--tapicer-tap-target);
	padding-block: 0.5rem;
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
	accent-color: var(--tapicer-color-accent);
	flex: none;
	height: 1.375rem;
	margin: 0;
	width: 1.375rem;
}

/* Плъгинът слепва по един интервал от двете страни на етикета. */
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: "";
}

/* --- Снимки -------------------------------------------------------------- */

.tapicer-form__files .tapicer-form__hint {
	margin-bottom: var(--tapicer-space-xs);
}

.tapicer-form__file + .tapicer-form__file {
	margin-top: var(--tapicer-space-xs);
}

.tapicer-form__file label {
	font-weight: 400;
}

/*
 * Полето за файл не се поддава на стилизиране отвътре, затова се стилизира
 * само рамката около него. Височината е нарочно голяма: на телефон това е
 * бутонът, който отваря галерията.
 */
.wpcf7 input[type="file"] {
	background-color: var(--tapicer-color-surface);
	border: 1px dashed var(--tapicer-color-border);
	border-radius: var(--tapicer-radius);
	display: block;
	font-family: inherit;
	font-size: 1rem;
	min-height: var(--tapicer-tap-target);
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.wpcf7 input[type="file"]:hover {
	border-color: var(--tapicer-color-accent-soft);
}

/*
 * Бутонът вътре в полето е на браузъра — надписът му е на езика на
 * браузъра, не на страницата, и не може да се смени от тук. Може обаче да
 * спре да прилича на системен диалог от деветдесетте.
 */
.wpcf7 input[type="file"]::file-selector-button {
	background-color: transparent;
	border: 2px solid var(--tapicer-color-accent);
	border-radius: var(--tapicer-radius);
	color: var(--tapicer-color-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-right: var(--tapicer-space-xs);
	padding: 0.375rem 1rem;
}

.wpcf7 input[type="file"]::file-selector-button:hover {
	background-color: var(--tapicer-color-accent);
	color: var(--tapicer-color-surface);
}

/*
 * CF7 задава rows="10" — над 300px празно поле, което изглежда като
 * задължение, а не като покана. Височината в CSS бие атрибута.
 */
.wpcf7 textarea {
	height: 9rem;
}

/* --- Съгласие ------------------------------------------------------------ */

.tapicer-form__consent {
	background-color: var(--tapicer-color-bg);
	border-radius: var(--tapicer-radius);
	padding: var(--tapicer-space-xs) var(--tapicer-space-sm);
}

.tapicer-form__consent .wpcf7-list-item label {
	font-size: 0.9375rem;
}

/* --- Изпращане ----------------------------------------------------------- */

.tapicer-form__actions p {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tapicer-space-xs);
}

.tapicer-form__actions .wpcf7-submit {
	width: 100%;
}

.wpcf7-spinner {
	background-color: var(--tapicer-color-accent);
	border-radius: 100%;
	display: inline-block;
	height: 24px;
	opacity: 0.75;
	padding: 0;
	position: relative;
	visibility: hidden;
	width: 24px;
}

.wpcf7-form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	animation: tapicer-spin 1000ms linear infinite;
	background-color: var(--tapicer-color-surface);
	border-radius: 100%;
	content: "";
	height: 6px;
	left: 4px;
	position: absolute;
	top: 4px;
	transform-origin: 8px 8px;
	width: 6px;
}

@keyframes tapicer-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Въртящото се петно е точно това, което вестибуларните смущения не понасят.
   Общото правило в раздел 3 спира анимациите, затова тук е само мигането. */
@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: tapicer-blink;
	}
}

@keyframes tapicer-blink {
	from,
	to {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

/* --- Грешки и отговор ---------------------------------------------------- */

.wpcf7-not-valid-tip {
	color: var(--tapicer-color-error);
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 0.25rem;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: var(--tapicer-color-error);
	/* Цветът сам по себе си не е съобщение — рамката е и двойно по-дебела. */
	border-width: 2px;
}

.wpcf7 form .wpcf7-response-output {
	border: 2px solid var(--tapicer-color-accent-soft);
	border-radius: var(--tapicer-radius);
	font-size: 1.0625rem;
	margin: var(--tapicer-space-md) 0 0;
	padding: var(--tapicer-space-sm);
}

/* Преди изпращане кутията е празна — празна рамка обърква. */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--tapicer-color-success);
	color: var(--tapicer-color-success);
	font-weight: 600;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--tapicer-color-error);
	color: var(--tapicer-color-error);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--tapicer-color-accent-soft);
}

/* --- Капан за ботове ------------------------------------------------------ */

/*
 * Изнесено извън екрана, а не display:none: най-простите ботове пропускат
 * скритите полета, но не и изнесените. Няма как да се улучи с мишка, с
 * клавиатура или от екранен четец — виж tapicer_cf7_honeypot_html().
 */
.tapicer-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

@media (min-width: 48em) {
	.tapicer-form__grid {
		gap: var(--tapicer-space-sm) var(--tapicer-space-md);
		grid-template-columns: 1fr 1fr;
	}

	/* Дългите полета минават през цялата ширина. */
	.tapicer-form__row--wide {
		grid-column: 1 / -1;
	}

	/*
	 * Трите полета за снимки нарочно НЕ се редят в колони: в трета от
	 * ширината от името на избрания файл се вижда „No f...sen“, а точно
	 * то е потвърждението, че снимката е закачена.
	 */

	/* Бутонът е достатъчно голям и без да заема целия ред. */
	.tapicer-form__actions .wpcf7-submit {
		width: auto;
	}
}