/* ----------------------------------------------------
   MAKE-UP.RU — LUXURY ULTRA-MODERN LIGHT MINIMAL THEME
------------------------------------------------------- */

:root {
	--bg-main: #fcfcfc;        /* Чистый, ослепительно белый фон, как у YSL */
	--bg-card: #ffffff;        /* Белоснежные карточки */
	--bg-subtle: #f8f8fa;      /* Едва заметный холодный серый для подложек */
	--text-primary: #000000;   /* Бескомпромиссный глубокий черный */
	--text-muted: #76767c;     /* Строгий графитовый серый */
	--accent: #7e7eb4;         /* Ваш фирменный неизменный цвет */
	--accent-transparent: rgba(126, 126, 180, 0.15); /* Прозрачный фирменный для фокусов */
	--border-color: #dddddd;   /* Ультратонкие, чистые границы блоков */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-main);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* ── ОБЩИЕ СТИЛИ ДЛЯ ССЫЛОК ── */
a {
	color: #7e7eb4;
	text-decoration: none;
	transition: color 0.15s;
}
a:hover {
	color: #5c5c8a;
	text-decoration: underline;
}

.container {
	max-width: 900px; /* Ваша новая идеальная журнальная ширина */
	margin: 0 auto;
	padding: 40px 16px 80px; 
}

@media (max-width: 767px) {
	body {
		font-size: 17px; /* Увеличили текст на 1 пиксель для телефонов */
	}
	.container {
		padding-top: 20px;
		padding-bottom: 60px;
	}
}
/* --- ВЕРХНЕЕ МЕНЮ (ЕДИНАЯ МОНОЛИТНАЯ ПЛАШКА 84px — СТИЛЬ YSL) --- */
.top-menu {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 84px; /* Жесткая общая высота всей шапки */
	background: #ffffff; /* Плотный белоснежный щит */
	z-index: 99999 !important; /* Всегда поверх всего контента сайта */
	display: flex;
	flex-direction: column; /* Строчки выстраиваются строго друг под другом */
}

/* Первый этаж шапки (Меню и ссылки) */
.top-menu-container {
	max-width: 900px;
	width: 100%;
	height: 52px; /* Фиксированная высота верхней строки */
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--border-color); /* ЕДИНСТВЕННАЯ ПОЛОСКА СТРОГО ПОД МЕНЮ */
}

.top-logo-img {
	height: 28px;
	width: auto;
	display: block;
	filter: brightness(0);
}

.top-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.top-link {
	color: var(--text-primary);
	text-decoration: none !important;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	flex-shrink: 0;
	border-bottom: 1px solid transparent;
	padding-bottom: 0px !important; /* Обнулили нижнее поле для точности сдвига */
	padding-top: 5px !important;    /* Жестко заставили ОБЕ ссылки уехать на 5px ниже */
}
.top-link:hover {
	color: var(--accent);
	border-color: var(--accent); 
	text-decoration: none !important;
}

.btn-header-review {
	border: none !important;
	border-bottom: 1px solid transparent !important;
	padding: 0;
	border-radius: 0 !important;
}
.btn-header-review:hover {
	border-color: var(--accent) !important;
}

.top-search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 4px;
	filter: brightness(0);
	flex-shrink: 0;
}

/* Второй этаж шапки (ХЛЕБНЫЕ КРОШКИ — ИСПРАВЛЕННЫЙ СДВИГ И ЦЕНТРИРОВАНИЕ) */
.top-breadcrumb-floor {
	background: #ffffff; 
	height: 32px; /* Фиксированная высота нижней строки */
	display: flex;
	align-items: center;
	width: 100%;
	padding-top: 4px; /* ЮВЕЛИРНО ОПУСКАЕМ КРОШКИ ЧУТЬ НИЖЕ ПОД ПОЛОСКУ */
	border: none !important; /* Никаких полосок под крошками */
}

.top-breadcrumb-container {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

/* Компактные крошки через один пробел */
.breadcrumb {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0;
	margin: 0;
}
.breadcrumb a {
	color: var(--text-muted);
	text-decoration: none !important;
	transition: color 0.15s ease;
}
.breadcrumb a:hover {
	color: var(--text-primary);
}

.breadcrumb .sep {
	margin: 0 5px !important; /* Ровно один пробел отступов вокруг слэша */
	opacity: 0.3;
	color: var(--text-muted);
}
.breadcrumb .current {
	color: var(--accent);
	font-weight: 500;
}

/* --- НАДЕЖНЫЙ ЕДИНЫЙ СПЕЙСЕР ПОД МОНОЛИТНУЮ ШАПКУ (84px) --- */
.top-menu-spacer {
	height: 84px; /* Полностью компенсирует всю высоту шапки без дубликатов */
	display: block;
	width: 100%;
}
/* ── СТАБИЛЬНЫЙ КЛАССИЧЕСКИЙ АДАПТИВ НА 768px (БЕЗ ПОДЧЕРКИВАНИЙ) ── */
@media (max-width: 768px) {
	.top-menu-container {
		padding: 0 16px;
		gap: 12px;
	}
	
	.top-logo-img {
		height: 26px;
	}
	
	.top-nav {
		gap: 12px;
	}
	
	.top-link, 
	.top-nav .top-link.btn-header-review {
		font-size: 10.5px !important;
		letter-spacing: 0.06em !important;
		border-bottom: 1px solid transparent !important; 
		padding-bottom: 0px !important;
		

		padding-top: 10px !important; 
	}

	.top-link:hover,
	.top-nav .top-link.btn-header-review:hover {
		border-color: transparent !important;
		text-decoration: none !important;
	}
	
	.top-search-toggle {
		padding: 4px;
	}

	.brand-hero {
		margin-top: 16px;
		margin-bottom: 32px;
	}
}

/* Микро-защита для самых маленьких экранов (меньше 360px) */
@media (max-width: 359px) {
	.top-menu-container {
		padding: 0 10px;
		gap: 6px;
	}
	.top-nav {
		gap: 8px;
	}
	.top-link,
	.top-nav .top-link.btn-header-review {
		font-size: 9px !important;
		letter-spacing: 0.04em !important;
		/* 🔬 МЕСТО ДЛЯ ЭКСПЕРИМЕНТОВ НА СВЕРХМАЛЕНЬКИХ ТЕЛЕФОНАХ: */
		padding-top: 5px !important;
	}
	.top-logo-img {
		height: 24px;
	}
}


/* --- ВСПЛЫВАЮЩИЙ ПОИСК (WHITE SLIDE-DOWN) — ИСПРАВЛЕННАЯ ШИРИНА И СЛОИ --- */
.top-search-wrap {
	position: fixed;
	top: -84px; /* Прячем поиск повыше — на полную глубину нового меню */
	left: 0;
	right: 0;
	height: 84px; /* Делаем высоту плашки поиска равной высоте всей двухэтажной шапки */
	background: var(--bg-card);
	z-index: 100000 !important; /* Ставим слой выше шапки меню (99999), чтобы выезжать ПОВЕРХ нее */
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border-bottom: 1px solid var(--border-color);
}

.top-search-wrap.open {
	transform: translateY(84px); /* Мягко сдвигаем ровно на 84 пикселя вниз */
}

.top-search-container {
	max-width: 900px; /* Выровняли максимальную ширину по границам логотипа и ссылок */
	height: 100%;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.top-search-form {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
}
.top-search-form input {
	width: 100%;
	border: none;
	background: none;
	font-family: var(--font-body);
	font-size: 16px;
	padding: 10px 40px 10px 0;
	color: var(--text-primary);
	outline: none;
}
.top-search-form button {
	position: absolute;
	right: 0;
	background: none;
	border: none;
	cursor: pointer;
	filter: brightness(0);
}

.search-close {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--text-muted);
}

.search-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 105;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.search-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

/* --- ПРЕМИАЛЬНАЯ ТИПОГРАФИКА И ЗАГОЛОВКИ БРЕНДА (ИСПРАВЛЕНО И НАСТРОЕНО) --- */
.brand-hero,
.home-page .brand-hero {
	margin-top: 24px; /* Аккуратный элегантный воздух от края шапки до названия бренда */
	margin-bottom: 48px;
	border-left: 2px solid var(--accent); /* Лаконичный фирменный маркер */
	padding-left: 20px;
}

.brand-hero h1,
.home-page .brand-hero h1 {
	font-family: var(--font-heading); /* Наш фирменный Cormorant Garamond */
	font-size: 56px;
	font-weight: 600; /* Чуть жирнее, но за счет шрифта — максимально изящно */
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.brand-hero .subtitle,
.home-page .brand-hero .subtitle {
	font-family: var(--font-body); /* Строгий геометрический Inter для контраста */
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.15em; /* Дорогая разрядка букв высокой моды */
}

.brand-hero .subtitle .brand-total-count,
.home-page .brand-hero .subtitle .brand-total-count {
	color: var(--accent); /* Подсвечиваем число фирменным фиолетовым #7e7eb4 */
	font-weight: 600;
}

/* ЭТОТ МОБИЛЬНЫЙ БЛОК НАСТРОЕН ТАК, ЧТОБЫ ТЕКСТ НА ТЕЛЕФОНАХ ГАРАНТИРОВАННО ВХОДИЛ В ОДНУ СТРОКУ */
@media (max-width: 767px) {
	.brand-hero h1,
	.home-page .brand-hero h1 {
		font-size: 30px !important; /* Уменьшили размер на телефонах до тридцати пикселей */
		letter-spacing: -0.02em !important; /* Поджали буквы, чтобы фраза «Отзывы о косметике» не ломалась */
	}
	.brand-hero,
	.home-page .brand-hero {
		margin-top: 16px;
		margin-bottom: 32px;
	}
}

/* --- СТРОГАЯ БЕЛАЯ КАРТОЧКА ОТЗЫВА (МАКСИМАЛЬНО БЛИЗКО К КРАЮ) --- */
.review {
	width: 100%;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 24px;
	margin-bottom: 24px; /* Четкое отделение плашек друг от друга */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* На мобильных устройствах прижимаем плашки почти вплотную к краям экрана */
@media (max-width: 767px) {
	.review {
		padding: 18px 14px; /* Чуть поджали внутренние поля карточки на смартфонах */
	}
}

.review:hover {
	border-color: var(--text-primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

/* --- СЕТКА ОТЗЫВОВ --- */

.reviews-grid {
	display: block;
	margin-top: 20px;
	margin-bottom: 60px;
}

@media (min-width: 992px) {
	.reviews-grid {
		display: grid; /* На страницах брендов сетка полностью восстанавливается */
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		margin-top: 24px;
		align-items: start !important; 
	}
	.review {
		margin-bottom: 0px;
	}
	/* Каждый третий отзыв красиво растягивается во всю ширину */
	.review:nth-child(3n+1) {
		grid-column: span 2;
	}
}

/* --- ОДНОКОЛОНОЧНАЯ ЛЕНТА СТРОГО ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (ИЗОЛИРОВАННЫЙ UX) --- */
.home-page .reviews-grid {
	display: block !important; /* На главной странице ВСЕГДА одна строгая колонка */
	width: 100%;
}

@media (min-width: 992px) {
	.home-page .reviews-grid {
		display: block !important; /* Отменяем сетку bento только для главной */
		margin-top: 24px;
	}
	.home-page .review {
		grid-column: auto !important; /* Сбрасываем растяжение ячеек */
		margin-bottom: 24px !important; /* Устанавливаем ровный красивый отступ вниз */
	}
}


/* ── ОБНОВЛЕННАЯ ШАПКА ОТЗЫВА ── */
.review .review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 8px;
}

.review .review-header-left {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

/* Имя автора — Строгий бескомпромиссный черный цвет */
.review .review-header .author {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 26px;
	color: var(--text-primary); /* Чистый черный */
	letter-spacing: 0.01em;
}

.review .review-header-left .review-date-divider {
	font-size: 14px;
	color: var(--border-color);
	font-weight: 300;
}

.review .review-header .date {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* ── СТИЛИЗАЦИЯ НОВЫХ ТЕКСТОВЫХ ВЕРДИКТОВ ВМЕСТО СЕРДЕЧЕК ── */
.review-verdict-tag {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em; /* Дорогая разрядка букв */
	padding: 4px 10px;
}

/* Пастельные, очень приглушенные бьюти-тона для плашек статуса */
.review-verdict-tag.positive {
	background-color: #f5f5f5;
	color: #616161;
}
.review-verdict-tag.neutral {
	background-color: #f5f5f5;
	color: #616161;
}
.review-verdict-tag.negative {
	background-color: #f5f5f5;
	color: #616161;
}

/* Текст отзыва — СЖИМАЕМ НИЖНИЙ ОТСТУП ДЛЯ ПОДЪЕМА СЕРДЦЕЦА */
.review-text {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.75;
	color: #1c1c1f;
	white-space: pre-line;
	
	/* МЕНЯЕМ ЗДЕСЬ: убираем огромную воздушную подушку под текстом */
	margin-bottom: 4px !important; /* Было 24px! Поставьте 4px или 0px, и сердце мгновенно взлетит наверх */
}

.review-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: var(--text-muted);
	border-top: none !important;    
	padding-top: 2px !important;    /* Теперь этот ювелирный подъем наконец-то сработает на полную силу */
}


/* ── СТИЛЬ И АНИМАЦИЯ НОВОЙ КНОПКИ ЛАЙКА (БЕЗ РАМОК) ── */
.vote-up-heart {
	background: transparent !important;
	border: none !important; /* Полностью и бескомпромиссно стираем рамку */
	padding: 6px 0px !important; /* Убрали боковые отступы для идеального выравнивания */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--text-primary);
	transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.vote-up-heart svg {
	filter: brightness(0) !important; /* Иконка остается строго монохромно-черной */
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
}

/* При наведении мышки на компьютерах сердечко изящно вздрагивает */
.vote-up-heart:hover:not(:disabled) svg {
	transform: scale(1.12);
}

/* СОСТОЯНИЕ, КОГДА ПОЛЬЗОВАТЕЛЬ УЖЕ НАЖАЛ НА СЕРДЦЕ */
.vote-up-heart.liked {
	background: transparent !important; /* Никаких тяжелых фонов */
	color: #c2185b !important; /* Благородный винно-розовый цвет для цифр счетчика */
}

.vote-up-heart.liked svg {
	filter: none !important; /* Возвращаем родному SVG его пастельно-розовый бьюти-цвет */
	transform: scale(1.2);
	animation: heartPulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ЖИВАЯ АНИМАЦИЯ ВСПЛЕСКА ЛАЙКА */
@keyframes heartPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.4); /* Элегантный всплеск в момент клика */
	}
	100% {
		transform: scale(1.2);
	}
}

.vote-status {
	font-size: 11px;
	font-style: italic;
}

/* МИНИМАЛИСТИЧНЫЕ КОММЕНТАРИИ */
.comments-block {
	margin-top: 20px;
	background: var(--bg-subtle);
	border-radius: 0px;
	padding: 0;
}
.comments-container:not(:empty) {
	padding: 20px;
	border-bottom: 1px solid var(--border-color);
}
.comments-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 16px;
	font-weight: 600;
}
.comment {
	border-bottom: 1px solid rgba(0,0,0,0.05);
	padding-bottom: 12px;
	margin-bottom: 12px;
}
.comment:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.comment-header {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	margin-bottom: 4px;
}
.comment-author {
	font-weight: 600;
	color: var(--text-primary);
}
.comment-date {
	color: var(--text-muted);
}
.comment-text {
	font-size: 14px;
	color: #2a2a2f;
}
.add-comment-link {
	font-size: 11px;
	color: var(--text-primary);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	border-bottom: 1px solid var(--text-primary);
	transition: all 0.2s ease;
}
.add-comment-link:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.comment-form {
	padding: 20px;
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
}

/* --- ПАГИНАЦИЯ (CONTEMPORARY STRIP) --- */
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40px 0;
	background: var(--bg-card);
	padding: 12px 20px;
	border-radius: 0px;
	border: 1px solid var(--border-color);
}
.pag-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 600;
}
.pag-nav svg {
	filter: brightness(0);
}
.pag-nav.disabled {
	color: #c8c8cd;
	pointer-events: none;
}
.pag-nav.disabled svg {
	opacity: 0.2;
}
.pag-numbers {
	display: flex;
	gap: 4px;
}
.pagination a, .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 4px;
	border-radius: 0%;
	text-decoration: none;
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 500;
}
.pagination a:hover {
	background: var(--bg-subtle);
}
.pagination .active {
	background: var(--accent); /* Фирменный фиолетовый для активной страницы */
	color: #fff;
	font-weight: 600;
}
.pagination .dots {
	color: var(--text-muted);
}
/* --- ФОРМЫ В СТИЛЕ ЛЮКС-МИНИМАЛИЗМ (ПОЛНЫЙ МОНОХРОМ БЕЗ ФИОЛЕТОВЫХ ПОДЛОЖЕК) --- */
.form-container {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 4px !important; /* Ваши скругления 4px */
	padding: 32px;
	margin-top: 60px;
}
@media (max-width: 767px) {
	.form-container {
		padding: 24px 16px;
	}
}
.form-container h2 {
	font-family: var(--font-heading); /* Наш фирменный Cormorant Garamond */
	font-size: 26px;                  /* УМЕНЬШИЛИ: теперь он ровно такого же размера, как имя автора */
	font-weight: 600;                 /* Изящная плотность, как у автора */
	letter-spacing: -0.01em;
	margin-bottom: 24px;
	color: var(--text-primary);       /* Строгий черный цвет */
}


.form-group {
	margin-bottom: 24px;
}

/* СТРОГИЕ МОНОХРОМНЫЕ ПОЛЯ ВВОДА ДЛЯ ОБЕИХ ФОРМ (ОТЗЫВЫ И КОММЕНТАРИИ) */
.form-group input[type="text"],
.form-group textarea,
.comment-form .form-group textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--border-color) !important;
	background-color: #ffffff !important; /* МАТОВЫЙ ЧИСТЫЙ БЕЛЫЙ ФОН ВМЕСТО ФИОЛЕТОВОГО */
	border-radius: 2px !important; /* Ваши скругления 2px */
	color: var(--text-primary);
	outline: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

/* При фокусе (клике внутрь поля) появляется изящная рамка вашего фирменного цвета */
.form-group input[type="text"]:focus,
.form-group textarea:focus,
.comment-form .form-group textarea:focus {
	border-color: var(--accent) !important; 
	background-color: #ffffff !important;
	box-shadow: 0 0 12px rgba(126, 126, 180, 0.1) !important;
}

.comment-form .form-group textarea {
	resize: vertical;
	min-height: 80px;
	max-height: 400px;
	overflow-y: auto;
}
@media (max-width: 768px) {
	.comment-form .form-group textarea {
		min-height: 100px;
	}
}

/* КАРТОЧКИ ОЦЕНОК — СТРОГАЯ ВЕРТИКАЛЬНАЯ КОЛОНКА В ОДИН РЯД */
.mark-label-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	display: block;
	margin-bottom: 12px;
}
.mark-group.mark-group-column {
	display: flex;
	flex-direction: column; /* МЫ ВЫСТРОИЛИ КАРТОЧКИ ОЦЕНОК В ОДНУ СТРОГУЮ КОЛОНКУ */
	align-items: flex-start; /* Прижали к левому краю */
	gap: 10px; /* Идеальный зазор между строками оценок */
	width: 100%;
}
.mark-group.mark-group-column label {
	width: 100%;
	max-width: 240px; /* Чтобы рамка выбора не растягивалась на весь огромный экран */
	cursor: pointer;
	position: relative;
}
.mark-group label input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.mark-card {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 20px;
	background: #ffffff !important; /* Убрали фиолетовый налет отсюда */
	border: 1px solid var(--border-color);
	border-radius: 2px !important; /* Ваши скругления 2px */
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease;
}
.mark-card svg {
	filter: brightness(0); /* В обычном состоянии значки строго монохромные */
}
.mark-group label:hover .mark-card {
	border-color: var(--text-muted);
}
/* В момент выбора карточка инвертируется в дорогой строгий черный цвет */
.mark-group label input:checked + .mark-card {
	background: var(--text-primary) !important; 
	color: #ffffff;
	border-color: var(--text-primary);
}
.mark-group label input:checked + .mark-card svg {
	filter: brightness(0) invert(1); /* Иконка внутри активной карточки белеет */
}

/* ФИРМЕННЫЕ ФИОЛЕТОВЫЕ КНОПКИ ОТПРАВКИ (И ДЛЯ ОТЗЫВОВ, И ДЛЯ КОММЕНТАРИЕВ) */
.btn, .btn-comment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--accent) !important; /* ТЕПЕРЬ КНОПКА ВСЕГДА ВАШЕГО СТИЛЬНОГО ФИОЛЕТОВОГО ЦВЕТА #7e7eb4 */
	color: #ffffff !important;           /* Чистый белый читаемый текст */
	border: none !important;
	padding: 16px 36px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-radius: 4px !important; /* Ваши скругления 2px */
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.btn:hover, .btn-comment:hover {
	background: #5c5c8a !important; /* Благородный более глубокий тон при наведении */
}
.btn:active, .btn-comment:active {
	opacity: 0.9;
}
.btn-comment {
	padding: 10px 24px;
	font-size: 11px;
	letter-spacing: 0.08em;
}

/* КНОПКА ОБНОВЛЕНИЯ КАПЧИ БЕЗ СИСТЕМНЫХ РАМОК */
.captcha-row .reload {
	background: none !important;
	border: none !important;
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}
.captcha-row .reload:hover {
	transform: rotate(45deg); /* Иконка изящно поворачивается при наведении */
}


/* НА МОБИЛЬНЫХ — МИНИМУМ 3 СТРОКИ ДЛЯ ТЕКСТА КОММЕНТАРИЯ */
@media (max-width: 768px) {
	.comment-form .form-group textarea {
		min-height: 100px;
	}
}

/* КАРТОЧКИ ОЦЕНОК (COUTURE TOGGLES) */
.mark-form-group {
	padding: 10px 0;
}
.mark-label-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	display: block;
	margin-bottom: 12px;
}
.mark-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mark-group label {
	cursor: pointer;
	position: relative;
}
.mark-group label input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.mark-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease;
}
.mark-card svg {
	filter: brightness(0); /* В обычном состоянии значки монохромные */
}
.mark-group label:hover .mark-card {
	border-color: var(--text-muted);
}
.mark-group label input:checked + .mark-card {
	background: var(--text-primary); /* При клике карточка становится строгой черной */
	color: #ffffff;
	border-color: var(--text-primary);
}
.mark-group label input:checked + .mark-card svg {
	filter: brightness(0) invert(1); /* Иконка внутри активной карточки белеет */
}

/* КАПЧА */
.captcha-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.captcha-row input {
	max-width: 120px;
}
.captcha-img {
	height: 45px;
	border-radius: 0px;
	display: block;
}
.captcha-row .reload {
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
}
.captcha-hint {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

/* КНОПКА ОТПРАВКИ (CHANEL SIGNATURE BUTTON) */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--text-primary); /* Радикально черная кнопка */
	color: #ffffff;                  /* Белый текст */
	border: none;
	padding: 16px 36px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.btn:hover {
	background: var(--accent);       /* При наведении аккуратно красится в ваш фиолетовый */
}
.btn:active {
	opacity: 0.8;
}
.btn-comment {
	padding: 8px 20px;
	font-size: 11px;
	letter-spacing: 0.08em;
}

/* СИСТЕМНЫЕ ОКНА */
.review-actions {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fffdf5;
	border: 1px solid #f5ebd0;
	padding: 12px 16px;
	border-radius: 0px;
	font-size: 13px;
}
.edit-hint {
	color: #7d6329;
}
.edit-btn {
	background: #7d6329;
	color: #fff;
	text-decoration: none;
	padding: 6px 12px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.edit-btn svg {
	filter: brightness(0) invert(1);
}

.alert {
	padding: 14px 18px;
	border-radius: 0px;
	margin-bottom: 24px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.alert-success {
	background: #f4fbf6;
	border: 1px solid #d1eedb;
	color: #1e5430;
}
.alert-error {
	background: #fdf3f4;
	border: 1px solid #f9d5d8;
	color: #5a242a;
}

/* --- ПОХОЖИЕ БРЕНДЫ (НИЖНЯЯ СЕТКА) --- */
.similar-brands {
	margin-top: 80px;
	text-align: center;
}
.home-new-brands-title {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 28px;
	text-transform: lowercase;
}
.home-new-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	max-width: 800px;
	margin: 0 auto;
}
.home-brand-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 16px;
	border-radius: 0px;
	color: var(--text-primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
}
.home-brand-card:hover {
	border-color: var(--text-primary);
}

/* --- ПОДВАЛ (FOOTER — СТАБИЛЬНЫЙ ВАРИАНТ ДЛЯ СМАРТФОНОВ И IPHONE PRO MAX) --- */
.footer {
	margin-top: auto !important;   /* Автоматически выталкивает подвал вниз на высоких экранах */
	padding-top: 32px;
	padding-bottom: 40px !important; /* Увеличили до 40px: гарантирует воздух внизу на Pro Max */
	border-top: 1px solid var(--border-color);
	text-align: center;
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	width: 100%;
}

/* ── ЕДИНАЯ АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНОЙ ПАГИНАЦИИ (ОЧИЩЕНО ОТ ДУБЛИКАТОВ) ── */
@media (max-width: 768px) {
	.pagination {
		padding: 10px 8px;
	}
	.pag-nav {
		font-size: 10px;
		letter-spacing: 0.05em;
	}
	.pag-numbers a, 
	.pagination span {
		min-width: 24px;
		height: 24px;
		font-size: 12px;
	}
}


/* ── ВАШИ РУЧНЫЕ НАСТРОЙКИ СКРУГЛЕНИЯ УГЛОВ (2px/4px) ── */
.review,
.brand-card,
.home-brand-card,
.form-container,
.comment-form,
.ad-block,
.brands-page .brand-card,
.home-reviews .review-card {
	border-radius: 4px !important;
}

/* Для кнопок и полей ввода */
.btn,
.form-group input,
.form-group textarea,
.comment-form input,
.comment-form textarea,
.top-search-form input {
	border-radius: 2px !important;
}

/* Для пагинации */
.pagination a,
.pagination span {
	border-radius: 2px !important;
}

/* Умное скрытие лишних страниц пагинации на смартфонах */
@media (max-width: 768px) {
	.pag-numbers .pag-hide-mobile {
		display: none !important;
	}
}

/* ── ОБНОВЛЕННЫЙ БАННЕР КУК (ФИРМЕННЫЙ ФИОЛЕТОВЫЙ ВНИЗУ ЭКРАНА) ── */
.cookie-banner {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: 600px;
	background-color: #7e7eb4;
	color: #ffffff;
	padding: 16px 20px;
	z-index: 9999;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 4px !important;
}

@media (min-width: 576px) {
	.cookie-banner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 14px 20px;
	}
}

.cookie-banner p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	font-weight: 400;
}

.btn-cookie {
	align-self: flex-end;
	background-color: #ffffff;
	color: #000000 !important;
	text-decoration: none !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 8px 24px;
	border-radius: 2px !important;
	white-space: nowrap;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-cookie:hover {
	background-color: #f0f0f5;
	color: #000000 !important;
}

.btn-cookie:active {
	opacity: 0.9;
}
/* ── ЭКСПЕРИМЕНТЫ С ЦВЕТОМ ПОДСКАЗОК В ПОЛЯХ (PLACEHOLDER) ── */
.form-group input::placeholder,
.form-group textarea::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder {
	/* СЕЙЧАС СТОИТ ЭТОТ ЦВЕТ (Строгий графитовый, но вы можете менять его): */
	color: #76767c !important; 
	
	/* Дополнительные настройки для экспериментов: */
	opacity: 1 !important;        /* Убирает системное браузерное размытие */
	font-style: italic;           /* Можно сделать текст курсивом, если захотите */
}
/* ── ЭКСПЕРИМЕНТЫ С СЕРДЦЕЦОМ ЛАЙКА ПОД ОТЗЫВОМ ── */


/* 2. Настройки цвета и размера кнопки-сердечка */
.vote-up-heart {
	background: transparent !important;
	border: none !important;
	padding: 6px 0px !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	
	/* ТЕКСТ ЦИФР СЧЁТЧИКА: */
	color: #000000;             /* Сейчас цифры строгие чёрные */
	font-size: 13px;            /* Размер шрифта цифр */
	font-weight: 400;
}

/* 3. НАСТРОЙКА САМОЙ ИКОНКИ СЕРДЦА (ЗДЕСЬ ЭКСПЕРИМЕНТИРУЙТЕ С РАЗМЕРОМ) */
.vote-up-heart svg {
	/* РАЗМЕР СЕРДЦЕЦА: Меняйте эти две цифры одновременно */
	width: 18px !important;     /* Было 16px, увеличили до 18px */
	height: 18px !important;
	
	/* ЦВЕТ СЕРДЦЕЦА ДО НАЖАТИЯ: */
	filter: none !important;    /* Отключаем монохромную черноту */
	fill: #e53935 !important;   /* КРАСНЫЙ КУТЮРНЫЙ ЦВЕТ (fill — это заливка) */
	stroke: #e53935 !important; /* Контур сердечка в тон заливки */
	
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. При наведении мышки на компьютере сердце изящно увеличивается */
.vote-up-heart:hover:not(:disabled) svg {
	transform: scale(1.15);     /* Коэффициент увеличения при наведении */
}

/* 5. ЦВЕТ СЕРДЦЕЦА ПОСЛЕ КЛИКА ПОЛЬЗОВАТЕЛЯ */
.vote-up-heart.liked {
	color: #c62828 !important;   /* Цвет цифр после лайка становится чуть темнее */
}
.vote-up-heart.liked svg {
	fill: #b71c1c !important;   /* Глубокий благородный пунцово-красный после нажатия */
	stroke: #b71c1c !important;
	transform: scale(1.2);      /* Фиксация увеличенного размера после лайка */
}
/* ==========================================================================
   ── КУТЮРНЫЙ БЛОК БОЛЬШОГО ПОИСКА НА ГЛАВНОЙ (HIGH-FASHION SEARCH HERO) ──
   ========================================================================== */

.search-hero {
	max-width: 680px; /* Идеальная центрированная ширина для фокуса внимания */
	margin: 0 auto 54px; /* Оптимальный отступ снизу до ленты недавних отзывов */
	padding: 0 16px;
	text-align: left;
}

/* Форма поиска — строгая парящая линия вместо тяжёлой коробки */
.search-hero .search-form {
	display: flex;
	align-items: center;
	position: relative;
	border-bottom: 1px solid var(--border-color); /* Одна утончённая линия внизу */
	padding-bottom: 8px;
	transition: border-color 0.25s ease;
}

/* Элегантная подсветка линии при клике в поле ввода */
.search-hero .search-form:focus-within {
	border-color: var(--accent); /* Линия плавно окрашивается в ваш фиолетовый */
}

/* Текстовое поле ввода */
.search-hero .search-form input[type="text"] {
	width: 100%;
	font-family: var(--font-body);
	font-size: 20px; /* Крупный, уверенный и отлично читаемый шрифт */
	font-weight: 400;
	color: var(--text-primary);
	background: transparent !important; /* Полностью прозрачный фон без фиолетовых плашек */
	border: none !important; /* Стираем все боковые рамки */
	padding: 10px 48px 10px 0; /* Оставили свободное место справа под лупу */
	outline: none !important;
	box-shadow: none !important; /* Никаких грубых системных теней */
}

/* Стильный графитовый цвет для подсказки "Что найти?" */
.search-hero .search-form input::placeholder {
	color: #a3a3a3 !important;
	opacity: 1 !important;
	font-weight: 300;
}

/* Кнопка-иконка лупы справа */
.search-hero .search-btn-icon {
	position: absolute;
	right: 0;
	background: none !important;
	border: none !important;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.search-hero .search-btn-icon:hover {
	transform: scale(1.12); /* Изящное увеличение лупы при наведении */
}
.search-hero .search-btn-icon:focus {
	outline: none !important;
}

/* ── БЛОК ТЕГОВ «ЧАСТО ИЩУТ»  ── */
.search-hero .search-hint {
	font-family: var(--font-body);
	font-size: 13px; /* Комфортный для чтения аккуратный размер */
	color: var(--text-muted); /* Спокойный графитовый тон */
	margin-top: 14px;
	line-height: 1.6;
	
	/* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: убираем растягивание букв и пробелов */
	text-transform: none !important;   /* Отменяем верхний регистр */
	letter-spacing: normal !important; /* Возвращаем естественную плотность шрифта */
	word-spacing: normal !important;   /* Зажимаем пробелы после запятых в один шаг */
}

/* Ссылки популярных запросов — ваш фирменный фиолетовый */
.search-hero .search-hint a {
	color: #7e7eb4; 
	text-decoration: none !important;
	font-weight: 500;
	transition: color 0.15s ease;
	letter-spacing: normal !important;
}

/* При наведении ссылка становится строго чёрной с изящным подчёркиванием */
.search-hero .search-hint a:hover {
	color: var(--text-primary); 
	text-decoration: underline !important;
}
/* Дополнительная обвязка для кнопки перехода ко всем отзывам на главной */
.home-more-reviews-link-wrap {
	width: 100%;
	text-align: center;
	margin: 12px 0 64px;
}

/* Лаконичный приветственный текст в самом низу главной страницы */
.home-text {
	max-width: 680px;
	margin: 80px auto 20px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-muted);
	text-align: center;
}
.home-text p {
	margin-bottom: 16px;
}
.home-text p:last-child {
	margin-bottom: 0;
}
.home-text a {
	color: var(--text-primary);
	font-weight: 600;
	border-bottom: 1px solid var(--border-color);
	transition: all 0.15s ease;
}
.home-text a:hover {
	color: var(--accent);
	border-color: var(--accent);
	text-decoration: none !important;
}

/* Адаптивность поискового блока для экранов смартфонов */
@media (max-width: 767px) {
	.search-hero {
		margin-bottom: 40px;
	}
	.search-hero .search-form input[type="text"] {
		font-size: 18px; /* Слегка поджали размер на узких экранах телефонов */
		padding: 8px 40px 8px 0;
	}
	.search-hero .search-hint {
		font-size: 10px;
		letter-spacing: 0.05em;
	}
}
/* ── СЖАТИЕ ПРОБЕЛОВ В БЛОКЕ «ЧАСТО ИЩУТ» ── */
.search-hero .search-hint {
	font-family: var(--font-body);
	font-size: 13px; /* Комфортный для чтения размер */
	text-transform: none !important; /* ОТМЕНЯЕМ ВЕРХНИЙ РЕГИСТР: слова больше не будут искусственно растягиваться */
	letter-spacing: normal !important; /* Убираем широкую компьютерную разрядку букв */
	color: var(--text-muted);
	margin-top: 14px;
	line-height: 1.6;
}

/* Ссылки популярных запросов */
.search-hero .search-hint a {
	color: #7e7eb4; /* Делаем ссылки нашего фирменного цвета */
	text-decoration: none !important;
	font-weight: 500;
	transition: color 0.15s ease;
}
.search-hero .search-hint a:hover {
	color: var(--text-primary);
	text-decoration: underline !important; /* Изящное подчёркивание при наведении */
}

/* Наша фирменная точка-разделитель строго через ОДИН ПРОБЕЛ */
.search-hero .search-hint .hint-sep {
	margin: 0 5px !important; /* Жестко сжали боковые отступы разделителя до 5 пикселей */
	color: #dddddd;
	font-weight: normal;
	display: inline-block;
}


/* ── СЕТКА НОВЫХ БРЕНДОВ 2х2 НА МОБИЛЬНЫХ (ИСПРАВЛЕНО) ── */
.home-new-brands {
	display: grid;
	/* На смартфонах принудительно создаем ровно ДВА СТОЛБЦА одинаковой ширины */
	grid-template-columns: repeat(2, 1fr); 
	gap: 12px; /* Аккуратный бьюти-зазор между карточками */
	max-width: 800px;
	margin: 0 auto;
}

/* Карточка нового бренда */
.home-brand-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 14px 10px;
	border-radius: 4px !important; /* Ваши скругления 4px */
	color: var(--text-primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* Если имя бренда длинное, оно изящно сузится */
	transition: all 0.2s ease;
}
.home-brand-card:hover {
	border-color: var(--text-primary);
	background: #ffffff;
}

/* На компьютерах и планшетах разворачиваем бренды в красивую ровную линию (в один ряд) */
@media (min-width: 768px) {
	.home-new-brands {
		grid-template-columns: repeat(4, 1fr); /* 4 столбца на ПК */
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.search-hero .search-hint {
		font-size: 12px; /* Пропорционально на каплю меньше на смартфонах */
	}
}
/* ==========================================================================
   ── ИДЕАЛЬНАЯ ГЕОМЕТРИЯ КАРТОЧЕК НА ГЛАВНОЙ (РАЗВОДИМ ПО УГЛАМ) ──
   ========================================================================== */

/* Настройка подвала карточки на главной */
.home-page .review .review-footer {
	display: flex !important;
	justify-content: space-between !important; /* Сердце железно уходит влево, кнопка — вправо */
	align-items: center !important;
	width: 100% !important;
	padding-top: 14px !important; /* Вернули аккуратный, дорогой отступ сверху */
	border-top: none !important;
}

/* Сбрасываем лишние обертки, чтобы не мешали позиционированию */
.home-page .review .vote-block {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
}

/* Левая независимая иконка сердца */
.home-page .review .home-review-heart-icon {
	display: inline-flex !important;
	align-items: center !important;
}
.home-page .review .home-review-heart-icon svg {
	width: 18px !important;
	height: 18px !important;
	filter: none !important;
	fill: #e53935 !important;   /* Наш кутюрный помадный красный цвет */
	stroke: #e53935 !important;
}

/* Правая независимая ссылка «Подробнее» */
.home-page .review .home-more-link {
	color: #7e7eb4 !important; /* Ваш фирменный изящный фиолетовый */
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	transition: color 0.15s ease;
}

.home-page .review .home-more-link:hover {
	color: #5c5c8a !important;
	text-decoration: underline !important; /* Аккуратное подчёркивание при наведении */
}

/* Сжимаем избыточные отступы в самом тексте отзыва, если они мешают */
.home-page .review .review-text {
	margin-bottom: 12px !important; /* Оптимальный зазор до подвала */
}
/* ── СЖАТИЕ ОГРОМНЫХ ПРОБЕЛОВ В БЛОКЕ «ЧАСТО ИЩУТ» (ЖЕСТКИЙ ФИКС) ── */
.search-hero .search-hint {
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	text-transform: none !important; /* Отменяет ВЕРХНИЙ РЕГИСТР, буквы больше не разлетаются */
	letter-spacing: normal !important; /* Возвращает естественную плотность букв */
	color: var(--text-muted) !important;
	margin-top: 14px !important;
	line-height: 1.6 !important;
}

/* Ссылки популярных запросов */
.search-hero .search-hint a {
	color: #7e7eb4 !important; /* Ваш фирменный изящный фиолетовый */
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: color 0.15s ease !important;
}

.search-hero .search-hint a:hover {
	color: var(--text-primary) !important;
	text-decoration: underline !important; /* Изящное подчеркивание при наведении */
}

/* ── СТИЛЬ ЗАГЛОВКА СТРОГО ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (БЕЗ ВЛИЯНИЯ НА БРЕНДЫ) ── */
.home-title-wrap {
	text-align: center !important; /* Строго по центру */
	margin-top: 32px;
	margin-bottom: 40px;
}

.home-title-wrap h1 {
	font-family: var(--font-heading); /* Наша благородная антиква */
	font-size: 42px;                  /* УМЕНЬШИЛИ ДЛЯ ПК: теперь на компьютерах он аккуратный и не громоздкий */
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

/* На смартфонах размер уменьшается еще на каплю, чтобы гарантированно войти в одну строку */
@media (max-width: 767px) {
	.home-title-wrap h1 {
		font-size: 30px !important; 
		letter-spacing: -0.02em !important;
	}
	.home-title-wrap {
		margin-top: 20px;
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   ── ИЗОЛИРОВАННЫЙ БЛОК ГЛАВНОЙ СТРАНИЦЫ (STYLING FOR INDEX.PHP ONLY) ──
   ========================================================================== */

/* 1. КОМПАКТНЫЙ ИЗЯЩНЫЙ ЗАГЛОВАК ПО ЦЕНТРУ */
.home-title-wrap {
	text-align: center !important;
	margin-top: 32px !important;
	margin-bottom: 40px !important;
}
.home-title-wrap h1 {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 38px !important; /* Утончённый размер для ПК, убрали громоздкость */
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	text-transform: none !important;
}

/* 2. БОЛЬШАЯ БЬЮТИ-СТРОКА ПОИСКА */
.home-search-hero {
	max-width: 680px;
	margin: 0 auto 54px;
	padding: 0 16px;
}
.home-search-form {
	display: flex;
	align-items: center;
	position: relative;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 8px;
}
.home-search-form:focus-within {
	border-color: var(--accent) !important;
}
.home-search-form input[type="text"] {
	width: 100%;
	font-family: var(--font-body);
	font-size: 20px;
	color: var(--text-primary);
	background: transparent !important;
	border: none !important;
	padding: 10px 48px 10px 0;
	outline: none !important;
	box-shadow: none !important;
}
.home-search-form input::placeholder {
	color: #a3a3a3 !important;
	opacity: 1 !important;
}
.home-search-btn-icon {
	position: absolute;
	right: 0;
	background: none !important;
	border: none !important;
	cursor: pointer;
	display: flex;
	align-items: center;
}

/* 3. СЖАТИЕ ПРОБЕЛОВ ПОСЛЕ ЗАПЯТЫХ В «ЧАСТО ИЩУТ» */
.home-search-hint {
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	color: var(--text-muted) !important;
	margin-top: 14px !important;
	line-height: 1.6 !important;
	text-align: center !important; /* Текст строго по центру */
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important; /* Обнуляет раздувание пробелов после запятых */
}
.home-search-hint a {
	color: #7e7eb4 !important; /* Изящный фирменный фиолетовый */
	text-decoration: none !important;
	font-weight: 500 !important;
}
.home-search-hint a:hover {
	color: var(--text-primary) !important;
	text-decoration: underline !important;
}

/* 4. УНИФИЦИРОВАННЫЕ КРУПНЫЕ ЗАГЛОВКИ РАЗДЕЛОВ (КАК АВТОР) */
.home-section-header {
	width: 100%;
	text-align: left;
	margin-bottom: 20px !important;
}
.home-page .author {
	text-decoration: none !important;
	display: inline-block;
}
.home-page a.author:hover {
	color: var(--accent) !important;
}

/* Ссылка «Все отзывы» строго по центру страницы */
.home-more-reviews-wrap {
	text-align: center !important;
	margin: 32px 0 54px !important;
}
.home-more-reviews-wrap .author {
	border-bottom: 1px solid var(--accent);
	padding-bottom: 2px;
}

/* 5. СТРОГАЯ ОДНОКОЛОНОЧНАЯ ЛЕНТА ОТЗЫВОВ */
.home-reviews-list {
	display: block !important;
	width: 100%;
}
.home-review-card {
	width: 100%;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	padding: 24px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 4px !important; /* Ваши скругления 4px */
}
.home-review-card:hover {
	border-color: var(--text-primary);
}
.home-review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px !important; /* Поджали лишний верхний отступ */
}
.home-review-header-left {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.home-review-card .brand-link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.home-review-card .author {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 26px;
	color: var(--text-primary);
}
.home-review-text {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.75;
	color: #1c1c1f;
	margin-bottom: 12px !important; /* Поджали отступ перед ссылкой */
	white-space: pre-line;
}

/* Финал карточки: Ссылка «Подробнее» парит в крайнем правом углу */
.home-review-footer {
	display: flex !important;
	justify-content: flex-end !important; 
	align-items: center !important;
	width: 100% !important;
	padding-top: 14px !important;
}
.home-more-link {
	color: #7e7eb4 !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}
.home-more-link:hover {
	text-decoration: underline !important;
}

/* 6. СЕТКА НОВЫХ БРЕНДОВ 2х2 ДЛЯ ТЕЛЕФОНОВ */
.home-new-brands-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 колонки на смартфонах */
	gap: 12px;
	max-width: 800px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.home-new-brands-grid {
		grid-template-columns: repeat(4, 1fr); /* 4 колонки в одну линию на компьютерах */
		gap: 16px;
	}
}

/* 7. АВТОРСКИЙ ТЕКСТ ВНИЗУ ГЛАВНОЙ */
.home-text {
	max-width: 680px;
	margin: 80px auto 20px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-muted);
	text-align: center;
}

/* ── КЛИЕНТСКИЙ АДАПТИВ ПОД АЙФОНЫ ── */
@media (max-width: 768px) {
	.home-title-wrap h1 {
		font-size: 26px !important; /* На смартфонах заголовок встанет ровно в одну строку */
		letter-spacing: -0.01em !important;
	}
	.home-title-wrap {
		margin-top: 24px !important;
		margin-bottom: 28px !important;
	}
	.home-search-hero {
		margin-bottom: 40px;
	}
	.home-search-form input[type="text"] {
		font-size: 18px;
	}
	.home-search-hint {
		font-size: 12px !important;
	}
	.home-review-card {
		padding: 18px 14px;
	}
}
/* ==========================================================================
   ── ИСПРАВЛЕННЫЙ АКЦЕНТНЫЙ ПОИСК (ШИРИНА ПО ОТЗЫВУ, СКРУГЛЕНИЕ 6px, ПРОЗРАЧНАЯ ЛУПА) ──
   ========================================================================== */

.home-search-hero {
	max-width: 900px !important; /* ЖЕСТКО: ширина поиска теперь точно равна ширине карточек отзывов */
	margin: 0 auto 54px;
	padding: 0 16px;
	width: 100%;
}

/* Форма поиска скруглением 6 пикселей */
.home-search-hero .home-search-form {
	display: flex !important;
	align-items: center !important;
	position: relative !important;
	
	background-color: #ffffff !important;   
	border: 1px solid #7e7eb4 !important;    
	border-radius: 6px !important;           /* УСТАНОВИЛИ: углы формы скруглены ровно на 6px */
	padding: 4px 16px !important;            
	box-shadow: 0 4px 20px rgba(126, 126, 180, 0.03) !important; 
	
	border-bottom: 1px solid #7e7eb4 !important; 
	transition: all 0.25s ease !important;
}

.home-search-hero .home-search-form:focus-within {
	border-color: #5c5c8a !important;        
	box-shadow: 0 6px 25px rgba(126, 126, 180, 0.1) !important; 
}

/* Поле ввода */
.home-search-hero .home-search-form input[type="text"] {
	width: 100% !important;
	font-family: var(--font-body) !important;
	font-size: 16px !important;              
	font-weight: 400 !important;
	color: var(--text-primary) !important;
	background: transparent !important;
	border: none !important;                 
	padding: 12px 40px 12px 0 !important;    
	outline: none !important;
	box-shadow: none !important;
}

.home-search-hero .home-search-form input::placeholder {
	color: #9999a1 !important;
	opacity: 1 !important;
}

/* Кнопка-лупа справа */
.home-search-hero .home-search-btn-icon {
	position: absolute !important;
	right: 14px !important;                  
	top: 50% !important;
	transform: translateY(-50%) !important;  
	background: none !important;
	border: none !important;
	padding: 6px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease !important;
}

/* ВЕРНУЛИ ПРОЗРАЧНОСТЬ ВАШЕЙ РОДНОЙ ЛУПЕ */
.home-search-hero .home-search-btn-icon svg {
	fill: transparent !important;            /* УБРАЛИ ЗАЛИВКУ: кружок лупы снова стал чистым и прозрачным */
	stroke: #7e7eb4 !important;              /* Фирменный фиолетовый контур */
	stroke-width: 2px !important;            /* Оптимальная толщина линий */
	transition: stroke 0.2s ease !important;
}

/* При наведении цвет контура лупы становится глубже */
.home-search-hero .home-search-btn-icon:hover svg {
	stroke: #5c5c8a !important;
}

.home-search-hero .home-search-btn-icon:hover {
	transform: translateY(-50%) scale(1.08) !important;
}

.home-search-hint {
	margin-top: 16px !important;
}

/* Мобильная адаптивность */
@media (max-width: 767px) {
	.home-search-hero .home-search-form {
		padding: 2px 12px !important;        
	}
	.home-search-hero .home-search-form input[type="text"] {
		font-size: 15px !important;          
		padding: 10px 36px 10px 0 !important;
	}
	.home-search-hero .home-search-btn-icon {
		right: 10px !important;
	}
}
/* ЭКСПЕРИМЕНТ: ПРИНУДИТЕЛЬНО ПРИТЯГИВАЕМ ТЕКСТ ОТЗЫВА К ШАПКЕ */
.review-text, 
.home-review-text {
	margin-top: 2px !important;    /* Сжимаем верхний зазор до минимума */
	padding-top: 0px !important;   /* Вычищаем внутренний скрытый воздух */
}

.review-header {
	margin-bottom: 6px !important; /* Поджимаем нижний борт шапки автора */
}
/* ── ПОЛНОЕ УНИЧТОЖЕНИЕ ГИГАНТСКИХ ДЫР В ТЕКСТЕ ОТЗЫВОВ ── */

/* 1. Зажимаем высоту строки, чтобы переносы не раздували километровые щели */
.review-text,
.home-review-text {
	line-height: 1.5 !important; /* Уплотняем строки до журнального стандарта */
	margin-top: 6px !important;  /* Подтягиваем весь блок ближе к шапке автора */
}

/* 2. Наказываем лишние переносы строк, которые наставили пользователи */
.review-text br,
.home-review-text br {
	display: block !important;
	content: "" !important;
	margin-top: 4px !important; /* Жестко: каждый перенос строки дает ВСЕГО 4 пикселя воздуха! */
}

/* 3. Защита от дублирующихся переносов (схлопываем идущие подряд <br>) */
.review-text br + br,
.home-review-text br + br {
	margin-top: 0px !important; /* Если пользователь нажал Enter дважды, второй перенос не займет места */
	display: none !important;   /* Браузер просто проигнорирует лишнюю пустую строку! */
}

/* ── МОБИЛЬНАЯ КАЛИБРОВКА (ДО 768px) ── */
@media (max-width: 768px) {
	.review-text,
	.home-review-text {
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	.review-text br,
	.home-review-text br {
		margin-top: 3px !important; /* На смартфонах зазор между абзацами становится еще изящнее */
	}
}
/* ── ЭКСПЕРИМЕНТЫ С ПОДСВЕТКОЙ СЛОВ В ПОИСКЕ ── */
mark, 
.highlight, 
.search-highlight {
	padding: 1px 3px !important;
	border-radius: 2px !important;
	color: var(--text-primary) !important; /* Текст остаётся глубоким тёмным */

	/* ВАРИАНТ А: Нежный пудрово-фиолетовый (Идеально под стиль Make-up.ru) */
	/* background-color: rgba(126, 126, 180, 0.15) !important; 

	/* ВАРИАНТ Б: Благородное приглушённое золото (Если хочется тепла, но дорого) */
	/* background-color: #f3e5ab !important; */

	/* ВАРИАНТ В: Матовый бьюти-нюд (Очень сдержанный, едва заметный пастельный тон) */
	background-color: #DFDFED !important; */
}