/* ==========================================================================
   SESSO — базовые стили темы
   Шрифт Commissioner подключён отдельно (mu-sesso-fonts.php), здесь только вёрстка.
   Токены сняты с действующего сайта на Tilda: контейнер 1160, сетка 3×360 с зазором 40,
   меню 20px, заголовки 36px/700, подписи в подвале 16px/700 с разрядкой 1px.
   ========================================================================== */

:root {
	/* цвет */
	/* Был #06020c — почти чёрный, снятый с подвала. Сверка стилей показала,
	   что на действующем сайте текст чисто чёрный, поэтому выравниваем. */
	--c-ink: #000;
	--c-ink-soft: #333;        /* меню, вторичный текст */
	--c-mute: #8b8b8b;         /* подписи, зачёркнутая цена */
	--c-line: #e6e6e6;         /* разделители */
	--c-bg: #fff;
	--c-bg-soft: #f7f6f5;      /* фон карточек и блоков */
	--c-accent: #f16780;       /* акцент сайта (кнопка «Получить бонусы», плашки) */
	--c-accent-ink: #fff;
	--c-sale: #c8102e;

	/* шаг отступов — единая сетка 4px, чтобы не было «на глаз» */
	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
	--s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 80px; --s-10: 120px;

	/* размеры */
	--container: 1160px;
	--gap: 40px;
	--radius: 0px;             /* на сайте скругления не используются */
	--header-h: 96px;

	/* типографика */
	/* Размеры выровнены по действующему сайту: там заголовок страницы 42 px
	   на компьютере и 30 px на телефоне. Было 44 и 28. */
	--fs-h1: clamp(30px, 2.2vw + 12px, 42px);
	--fs-h2: clamp(24px, 1.8vw + 12px, 36px);
	--fs-h3: clamp(19px, 0.8vw + 14px, 24px);
	--fs-body: 16px;
	--fs-small: 14px;
	/* 1,23 — как на действующем сайте: 51,66 px при кегле 42. Было 1,15, строки шли теснее. */
	--lh-tight: 1.23;
	--lh-body: 1.55;

	--ease: cubic-bezier(.2, .6, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-ink-soft); }

/* видимая обводка только для клавиатуры — мышью не мешает, с клавиатуры видно, где ты */
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0 0 var(--s-4); line-height: var(--lh-tight); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 {
	font-size: var(--fs-h2);
	/* На действующем сайте заголовки второго уровня не жирные и без отступа сверху:
	   у нас были 700 и 56 px, отчего разделы выглядели разреженнее. */
	font-weight: 400;
}
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s-4); }

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

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

/* ---------- шапка ---------- */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--c-bg);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--c-line); }

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-5);
	min-height: var(--header-h);
}
/* Колонку логотипа закрепляем: широкое меню умеет ужать её до нуля,
   и логотип пропадает из шапки — так и вышло, когда добавили все разделы. */
@media (min-width: 1024px) {
	.site-header__inner { grid-template-columns: 170px minmax(0, 1fr) auto; }
	.nav-primary { min-width: 0; }
}

.site-logo img { width: 150px; height: auto; }
.site-logo--text { font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }

.nav-primary > ul {
	display: flex; gap: var(--s-6);
	margin: 0; padding: 0; list-style: none;
	justify-content: center;
}
/* В меню одиннадцать разделов каталога — при шрифте 18 px и большом
   промежутке они не помещаются в строку и выталкивают логотип.
   На широких экранах ужимаем промежуток и кегль, на очень широких
   возвращаем прежние. */
@media (min-width: 1024px) {
	.nav-primary > ul { gap: 12px; }
	.nav-primary > ul > li > a { font-size: 15px; white-space: nowrap; }
}
/* Раньше на экранах от 1600 px меню возвращалось к промежутку 24 px и кеглю 17 px.
   С переключателем языка в той же строке это снова выталкивало логотип — проверено
   замером: пункты налезали на него на 17 px. Оставляем компактный вид на всех
   широких экранах, он читается нормально. */
.nav-primary a {
	display: inline-block;
	font-size: 18px; color: var(--c-ink-soft);
	padding: var(--s-2) 0;
	position: relative;
}
/* подчёркивание вырастает из центра — вместо резкой смены цвета */
.nav-primary a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: center;
	transition: transform .25s var(--ease);
}
.nav-primary a:hover::after,
.nav-primary .current-menu-item > a::after { transform: scaleX(1); }

.nav-primary li { position: relative; }
.nav-primary .sub-menu {
	position: absolute; left: 50%; translate: -50% 0; top: 100%;
	min-width: 220px; margin: 0; padding: var(--s-3) 0; list-style: none;
	background: var(--c-bg); border: 1px solid var(--c-line);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-primary .sub-menu a { display: block; padding: var(--s-2) var(--s-5); font-size: 16px; }
.nav-primary .sub-menu a::after { display: none; }
.nav-primary .sub-menu a:hover { background: var(--c-bg-soft); }

.header-tools { display: flex; align-items: center; gap: var(--s-4); }
.header-tools a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; position: relative;
	transition: opacity .15s var(--ease);
}
.header-tools a:hover { opacity: .6; }
.header-tools svg { width: 22px; height: 22px; }
.header-cart__count {
	position: absolute; top: 2px; right: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: grid; place-items: center;
	background: var(--c-ink); color: #fff;
	font-size: 11px; font-weight: 600; border-radius: 999px;
	letter-spacing: 0;
}

.nav-toggle { display: none; background: none; border: 0; padding: var(--s-2); cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- кнопки ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-height: 48px; padding: var(--s-3) var(--s-6);
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	background: var(--c-ink); color: #fff;
	font: inherit; font-weight: 600; text-align: center;
	cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease),
	            border-color .18s var(--ease), transform .06s var(--ease);
}
.btn:hover { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .45; pointer-events: none; }

.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; }

.btn--accent { background: var(--c-accent); border-color: var(--c-accent); }
.btn--accent:hover { background: #e0566f; border-color: #e0566f; }

.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: var(--s-2) var(--s-5); font-size: var(--fs-small); }

/* ---------- каталог ---------- */

.page-head { padding: var(--s-8) 0 var(--s-6); }
/* Под заголовком страницы на действующем сайте ровно 40 px воздуха,
   у нас не было вовсе — текст прилипал к заголовку. */
.page-head h1 { margin: 0 0 40px; }
.page-head__count { color: var(--c-mute); font-size: var(--fs-small); }

.products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-8) var(--gap);
	margin: 0 0 var(--s-9); padding: 0; list-style: none;
}
/* WooCommerce вешает на списки товаров клирфикс ::before/::after — в гриде
   они становятся полноценными ячейками и сдвигают первый товар вправо.
   Селекторы длинные намеренно: перебиваем `.woocommerce .products ul::before`. */
.products-grid::before,
.products-grid::after,
.woocommerce .products ul.products-grid::before,
.woocommerce .products ul.products-grid::after,
.woocommerce ul.products-grid::before,
.woocommerce ul.products-grid::after { content: none; display: none; }

.product-card { position: relative; display: flex; flex-direction: column; }

.product-card__media {
	position: relative; display: block;
	aspect-ratio: 2 / 3;              /* фиксируем пропорцию: строки больше не «пляшут» */
	overflow: hidden; background: var(--c-bg-soft);
	margin-bottom: var(--s-4);
}
.product-card__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
/* второе фото проявляется на наведении, если оно есть в галерее */
.product-card__media img.is-second { opacity: 0; }
.product-card:hover .product-card__media img.is-second { opacity: 1; }

/* бейдж скидки — круглый розовый, как на действующем сайте */
.product-card__badge {
	position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 999px;
	background: var(--c-accent); color: var(--c-accent-ink);
	font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}

/* Размеры сняты с карточки действующего сайта: название 15 px, цена 16 px жирная,
   старая цена 12 px светло-серая. У нас было 17 / 600 / 14, из-за чего карточки
   выглядели крупнее и глуше. */
.product-card__title {
	margin: 0 0 var(--s-2);
	font-size: 15px; font-weight: 500; line-height: 1.34;
	color: #171717;
}
/* порядок цен как на действующем сайте: сначала актуальная, следом зачёркнутая старая */
.product-card__price { display: flex; align-items: baseline; gap: var(--s-2); font-size: 16px; }
.product-card__price del { color: #aaa6a3; text-decoration: line-through; font-size: 12px; order: 2; }
.product-card__price ins { text-decoration: none; font-weight: 700; color: #171717; order: 1; }
.product-card__actions { margin-top: auto; padding-top: var(--s-3); }
.product-card__oos { display: block; font-size: var(--fs-small); color: var(--c-mute); }  /* кнопки в ряду выстраиваются по одной линии, даже если название в две строки */

/* ---------- подвал ---------- */

.site-footer {
	border-top: 1px solid var(--c-line);
	padding: var(--s-9) 0 var(--s-6);
	font-size: var(--fs-body);
}
.site-footer__cols {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: var(--gap);
}
.site-footer__title {
	margin: 0 0 var(--s-4);
	font-size: 16px; font-weight: 700; letter-spacing: 1px;
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: var(--s-3); }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__logo img { width: 170px; }
.site-footer__legal { color: var(--c-mute); font-size: 13px; line-height: 1.5; }
.site-footer__bottom {
	margin-top: var(--s-8); padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
	display: flex; justify-content: space-between; gap: var(--s-4);
	color: var(--c-mute); font-size: 13px;
}
.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a {
	width: 36px; height: 36px; display: grid; place-items: center;
	background: var(--c-accent); color: #fff; border-radius: 999px;
	transition: opacity .15s var(--ease);
}
.socials a:hover { opacity: .8; color: #fff; }
.socials svg { width: 18px; height: 18px; }

/* ---------- адаптив ---------- */

@media (max-width: 1024px) {
	.products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
	.site-footer__cols { grid-template-columns: 1fr 1fr; row-gap: var(--s-7); }
}

@media (max-width: 860px) {
	:root { --header-h: 72px; }
	.nav-toggle { display: inline-flex; }
	.nav-primary {
		position: fixed; inset: var(--header-h) 0 0; z-index: 40;
		background: var(--c-bg); padding: var(--s-5) var(--s-5) var(--s-9);
		overflow-y: auto;
		transform: translateX(-100%); transition: transform .3s var(--ease);
	}
	body.nav-open .nav-primary { transform: none; }
	body.nav-open { overflow: hidden; }
	.nav-primary > ul { flex-direction: column; gap: 0; }
	.nav-primary > ul > li { border-bottom: 1px solid var(--c-line); }
	.nav-primary a { display: block; padding: var(--s-4) 0; font-size: 20px; }
	.nav-primary a::after { display: none; }
	.nav-primary .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		/* На широком экране подменю центрируется через left: 50% и translate: -50%.
		   translate — отдельное свойство, и transform: none его НЕ отменяет:
		   без сброса подпункты уезжали за левый край телефона на пол-ширины. */
		left: auto; translate: none;
		border: 0; padding: 0 0 var(--s-3) var(--s-4);
	}
	.site-header__inner { grid-template-columns: auto 1fr auto; }
	.site-logo img { width: 120px; }
}

@media (max-width: 560px) {
	.products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-3); }
	.product-card__title { font-size: 14px; }
	.product-card__price { font-size: 15px; }
	.site-footer__cols { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; }
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- служебные блоки WooCommerce ---------- */

.breadcrumbs {
	padding: var(--s-5) 0 0;
	color: var(--c-mute); font-size: 13px;
}
.breadcrumbs a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs .sep { opacity: .5; }

.page-head__descr { max-width: 720px; margin-top: var(--s-4); color: var(--c-ink-soft); }

/* цена WooCommerce внутри карточки */
.product-card__price .amount { font-weight: 700; }
.product-card__price del .amount { font-weight: 400; font-size: 12px; }
.product-card__price del + ins { margin-left: var(--s-1); }

/* Уведомления магазина: карточка, а не системная полоса.
   Кнопку WooCommerce печатает первой в разметке — flex с order разводит
   текст влево, кнопку вправо, не трогая порядок в HTML. */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
	display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
	/* место слева под значок: он стоит абсолютом, иначе на узком экране
	   длинный текст уезжает на следующую строку и кружок висит один */
	position: relative;
	margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 30px);
	background: #fff; border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent);
	box-shadow: 0 6px 24px rgba(6, 2, 12, .07);
	list-style: none;
}
.woocommerce-error { border-left-color: var(--c-sale); }
.woocommerce-message::before {
	content: ''; flex: 0 0 20px; width: 20px; height: 20px; order: 0;
	background: var(--c-accent);
	border-radius: 999px;
	/* галочка вырезана маской — отдельная картинка ради значка не нужна */
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
	mask-composite: exclude;
}
/* У «info» и «error» WooCommerce рисует значок своим шрифтом-иконками. Мы его
   не подключаем, и браузер показывал вместо значка пустой квадрат — это и заметил
   клиент на странице поиска. Рисуем значки маской, как у «message». */
.woocommerce-info::before,
.woocommerce-error::before {
	content: ''; flex: 0 0 20px; width: 20px; height: 20px; order: 0;
	background: var(--c-accent);
	border-radius: 999px;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8h.01M11 12h1v5h1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8h.01M11 12h1v5h1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
	mask-composite: exclude;
	font-family: inherit;   /* на случай, если стили WooCommerce загрузятся позже */
	/* WooCommerce ставит свой значок абсолютом — из-за этого кружок наезжал
	   на первое слово. Возвращаем его в поток, значок встаёт слева от текста. */
	position: absolute;
	left: var(--s-5); top: calc(var(--s-4) + 3px);
}

.woocommerce-error::before {
	background: var(--c-sale);
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 16.5h.01' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 16.5h.01' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000, #000);
}

.woocommerce-info, .woocommerce-message, .woocommerce-error { font-size: 15px; }
/* текст сообщения — это голый узел, поэтому растягиваем его через order у кнопки */
.woocommerce .woocommerce-message > a.button,
.woocommerce .woocommerce-info > a.button,
.woocommerce-message > .button, .woocommerce-info > .button {
	order: 3; margin-left: auto;
	min-height: 40px; padding: var(--s-2) var(--s-5);
	background: var(--c-accent); border: 1px solid var(--c-accent); color: #fff;
	font-weight: 600; white-space: nowrap;
}
.woocommerce .woocommerce-message > a.button:hover,
.woocommerce .woocommerce-info > a.button:hover,
.woocommerce-message > .button:hover, .woocommerce-info > .button:hover {
	background: #e0566f; border-color: #e0566f; color: #fff;
}

.entry-content { max-width: 760px; padding-bottom: var(--s-9); }
/* корзина и оформление — блочные, им нужна вся ширина контейнера:
   в 760 px WooCommerce схлопывает их в узкий одноколоночный вид */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content { max-width: none; }
/* На действующем сайте у заголовков второго уровня нет отступа сверху —
   у нас было 56 px, и текст выглядел разреженным. */
.entry-content h2 { margin-top: 0; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* постраничная навигация каталога */
.woocommerce-pagination ul {
	display: flex; gap: var(--s-2); justify-content: center;
	margin: 0 0 var(--s-9); padding: 0; list-style: none;
}
.woocommerce-pagination a, .woocommerce-pagination span {
	display: grid; place-items: center;
	min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
	border: 1px solid var(--c-line);
	transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.woocommerce-pagination a:hover { border-color: var(--c-ink); }
.woocommerce-pagination .current { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

/* ==========================================================================
   Карточка товара
   ========================================================================== */

.single-product .site-main > .container { padding-bottom: var(--s-9); }

.product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
	gap: var(--s-9);
	align-items: start;
	margin-top: var(--s-5);
}

/* --- галерея --- */

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { background: var(--c-bg-soft); }
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; }

/* стрелка «лупа» поверх фото */
.woocommerce-product-gallery__trigger {
	position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: rgba(255,255,255,.9); border: 0; border-radius: 999px;
	font-size: 0; cursor: pointer;
	transition: background-color .15s var(--ease);
}
.woocommerce-product-gallery__trigger::after {
	content: ""; width: 15px; height: 15px;
	border: 1.6px solid var(--c-ink); border-radius: 999px;
	box-shadow: 6px 6px 0 -5px var(--c-ink);
	transform: translate(-2px, -2px);
}
.woocommerce-product-gallery__trigger:hover { background: #fff; }

/* миниатюр в галерее бывает 10-12: держим их мелкими, чтобы лента
   не разрасталась на три ряда и не отжимала карточку вниз */
.flex-control-thumbs {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s-2);
	margin: var(--s-2) 0 0; padding: 0; list-style: none;
}
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img {
	width: 100%; aspect-ratio: 2/3; object-fit: cover;
	cursor: pointer; opacity: .55;
	transition: opacity .2s var(--ease);
}
.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active { opacity: 1; }

/* --- правая колонка --- */

.entry-summary { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.single-product .product_title { font-size: var(--fs-h2); margin-bottom: var(--s-4); }

.single-product .price {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
	margin: 0 0 var(--s-2); font-size: 26px; font-weight: 600;
}
.single-product .price del { font-size: 18px; font-weight: 400; color: var(--c-mute); order: 2; }
.single-product .price ins { text-decoration: none; order: 1; }
.single-product .woocommerce-product-details__short-description {
	color: var(--c-ink-soft); font-size: var(--fs-small); margin-bottom: var(--s-5);
}

/* выбор размера и длины */
.variations { width: 100%; margin: 0 0 var(--s-5); border-collapse: collapse; }
.variations tr { display: block; margin-bottom: var(--s-4); }
.variations th, .variations td { display: block; text-align: left; padding: 0; }
.variations .label {
	margin-bottom: var(--s-2);
	font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em;
}
.variations select {
	width: 100%; min-height: 48px; padding: 0 var(--s-6) 0 var(--s-4);
	font: inherit; color: var(--c-ink);
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 12px;
	cursor: pointer;
	transition: border-color .15s var(--ease);
}
.variations select:hover { border-color: var(--c-ink-soft); }
/* «Очистить» не показываем: размер и длина подставлены заранее, сбрасывать их
   покупателю незачем — ссылка только возвращает состояние «ничего не выбрано» */
.reset_variations { display: none !important; }

/* цена выбранного варианта: у большинства товаров она совпадает с общей,
   но у части размеры стоят по-разному — поэтому оставляем, только прижимаем */
.woocommerce-variation-price:not(:empty) { margin-bottom: var(--s-4); }
.woocommerce-variation-price .price { font-size: 24px; }
.single_variation_wrap { margin-top: 0; }
.single_variation:empty { display: none; }
.woocommerce-variation-availability { margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--c-mute); }

/* количество + в корзину */
form.cart, .woocommerce-variation-add-to-cart {
	display: flex; gap: var(--s-3); align-items: stretch; flex-wrap: wrap;
	margin: 0 0 var(--s-5);
}
/* количество на действующем сайте не спрашивают: одна вещь — один заказ.
   В корзине число менять можно, там поле остаётся. */
.single-product .quantity { display: none; }
.quantity { display: flex; }
.quantity input[type="number"] {
	width: 72px; min-height: 48px; padding: 0 var(--s-2);
	font: inherit; text-align: center;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	appearance: textfield;
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 48px; padding: var(--s-3) var(--s-6);
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	background: var(--c-accent); color: var(--c-accent-ink);
	border-color: var(--c-accent);
	font: inherit; font-weight: 600; letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .18s var(--ease), transform .06s var(--ease);
}
.single_add_to_cart_button:hover { background: #e0566f; border-color: #e0566f; }
.single_add_to_cart_button:active { transform: translateY(1px); }
.single_add_to_cart_button.disabled { opacity: .4; cursor: not-allowed; }

.product_meta {
	padding-top: var(--s-4); border-top: 1px solid var(--c-line);
	font-size: 13px; color: var(--c-mute);
}
.product_meta a { color: var(--c-ink-soft); }
.product_meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product_meta > span { display: block; margin-bottom: var(--s-1); }

/* плашка скидки на фото товара */
.single-product .product-single__badge {
	position: absolute; top: var(--s-4); left: var(--s-4); z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 999px;
	background: var(--c-accent); color: var(--c-accent-ink);
	font-size: 13px; font-weight: 700; line-height: 1;
}

/* --- вкладки описания --- */

.woocommerce-tabs { margin-top: var(--s-9); }
.woocommerce-tabs .wc-tabs {
	display: flex; gap: var(--s-6); margin: 0 0 var(--s-6); padding: 0 0 var(--s-3);
	list-style: none; border-bottom: 1px solid var(--c-line);
}
.woocommerce-tabs .wc-tabs li a {
	display: inline-block; padding-bottom: var(--s-3);
	font-weight: 600; color: var(--c-mute);
	border-bottom: 2px solid transparent;
	transition: color .15s var(--ease), border-color .15s var(--ease);
}
.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs li a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.woocommerce-tabs .panel { max-width: 760px; }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel p { margin: 0 0 var(--s-4); }
.woocommerce-tabs .panel p:last-child { margin-bottom: 0; }

/* «Состав», «Особенности», «Правила ухода» — текст снят со страниц Tilda как есть,
   вместе с их списками; приводим списки к виду темы */
.sesso-tab-content ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.sesso-tab-content ul li { margin-bottom: var(--s-2); }
.sesso-tab-content ul li::marker { color: var(--c-mute); }
.sesso-tab-content br + br { line-height: var(--s-4); }

/* таблица характеристик */
.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.shop_attributes th, .shop_attributes td {
	padding: var(--s-3) 0; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--c-line);
}
.shop_attributes th { width: 40%; font-weight: 600; }
.shop_attributes p { margin: 0; }

/* --- похожие товары --- */

.related.products, .up-sells { margin-top: var(--s-10); }
.related.products > h2, .up-sells > h2 { margin-bottom: var(--s-6); }

@media (max-width: 900px) {
	.product-layout { grid-template-columns: 1fr; gap: var(--s-7); }
	.entry-summary { position: static; }
}

@media (max-width: 560px) {
	.single-product .price { font-size: 22px; }
	form.cart, .woocommerce-variation-add-to-cart { gap: var(--s-2); }
	.single_add_to_cart_button { flex: 1 1 100%; }
}

/* ==========================================================================
   Перебиваем дефолтные стили WooCommerce
   Плагин грузит свой woocommerce.css с высокой специфичностью: галерея уезжает
   во float:48%, кнопки становятся фиолетовыми, вкладки — «таблетками».
   Оставляем его подключённым (он нужен корзине и оформлению заказа),
   но точечно перебиваем то, что уже сделали своим.
   ========================================================================== */

.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-page div.product div.images {
	float: none; width: 100%; margin-bottom: 0;
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary { float: none; width: auto; margin-bottom: 0; }

.woocommerce div.product .woocommerce-product-gallery__image:nth-child(n+2) { width: 100%; }

/* кнопки */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	min-height: 48px; padding: var(--s-3) var(--s-6);
	background: var(--c-ink); color: #fff;
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	font: inherit; font-weight: 600; line-height: 1.2;
	transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }

/* «В корзину» до выбора размера: у плагина это состояние фиолетовое —
   оставляем свой цвет, приглушая его. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover {
	background: var(--c-ink); border-color: var(--c-ink); color: #fff;
	opacity: .35; cursor: not-allowed;
}

/* Кнопка покупки в карточке — розовая, как на действующем сайте.
   Селектор длинный намеренно: общее правило .woocommerce button.button.alt выше
   по весу и иначе перекрашивает её обратно в чёрный. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt {
	background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button.alt:hover {
	background: #e0566f; border-color: #e0566f; color: #fff;
}

.woocommerce a.button.btn--ghost,
.woocommerce button.button.btn--ghost { background: transparent; color: var(--c-ink); }
.woocommerce a.button.btn--ghost:hover,
.woocommerce button.button.btn--ghost:hover { background: var(--c-ink); color: #fff; }

.woocommerce div.product form.cart .button { flex: 1 1 220px; float: none; }

/* количество */
.woocommerce .quantity .qty {
	width: 72px; min-height: 48px; padding: 0 var(--s-2);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	font: inherit; text-align: center;
}

/* цена */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
	color: var(--c-ink); font-size: 26px; font-weight: 600;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del { opacity: 1; color: var(--c-mute); font-size: 18px; font-weight: 400; order: 2; }
.woocommerce div.product p.price ins { background: none; font-weight: 600; order: 1; }

/* вкладки */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 0 var(--s-3); margin-bottom: var(--s-6); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0 0 var(--s-3); font-weight: 600; }

/* плашка «Распродажа» плагина не используется — рисуем свою */
.woocommerce span.onsale { display: none; }

/* ==========================================================================
   Корзина (блочная — WooCommerce Blocks)
   Полный разбор корзины и оформления идёт отдельной порцией; здесь только то,
   что бросается в глаза сразу.
   ========================================================================== */

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-button *,
.wc-block-cart__submit-button * { text-decoration: none !important; }

/* порядок цен как везде: сначала актуальная, старая следом */
.wc-block-components-product-price { display: inline-flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.wc-block-components-product-price del,
.wc-block-components-product-price__regular { order: 2; color: var(--c-mute); }
.wc-block-components-product-price ins,
.wc-block-components-product-price__value { order: 1; text-decoration: none; }

/* картинка товара в корзине: 64px — слишком мелко для верхней одежды */
.wc-block-cart-item__image img { width: 96px; height: auto; }

/* галерея: миниатюры */
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }

/* ==========================================================================
   Оформление заказа (блочный checkout WooCommerce)

   Разбираем то, что видно сразу: сводка заказа схлопывалась в колонку
   шириной в одну букву, поля и кнопки жили по своим правилам плагина.
   ========================================================================== */

/* сводка заказа: название товара должно занимать свободное место,
   а цена — ровно столько, сколько нужно */
.wc-block-components-order-summary-item { align-items: flex-start; gap: var(--s-3); }
.wc-block-components-order-summary-item__description { flex: 1 1 auto; min-width: 0; }
.wc-block-components-order-summary-item__total-price { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.wc-block-components-order-summary-item__image { flex: 0 0 64px; }
.wc-block-components-order-summary-item__image img { width: 64px; height: auto; }
.wc-block-components-order-summary-item__individual-prices { display: block; margin-top: 2px; }

/* поля формы — как в остальной теме */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	min-height: 52px; border-radius: var(--radius);
	border: 1px solid var(--c-line);
	font: inherit; color: var(--c-ink);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus { border-color: var(--c-ink); outline: none; box-shadow: none; }

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	min-height: 56px; border-radius: var(--radius);
	background: var(--c-ink); color: #fff;
	font: inherit; font-weight: 600; letter-spacing: .01em;
	text-decoration: none;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover { background: #2b2b2b; }

.wc-block-components-title,
.wc-block-components-checkout-step__title { font-family: inherit; }

/* итоги и панель справа */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper { border-color: var(--c-line); }
.wc-block-components-totals-item__value { font-weight: 600; }

@media (max-width: 780px) {
	.wc-block-components-order-summary-item__image { flex-basis: 52px; }
	.wc-block-components-order-summary-item__image img { width: 52px; }
}

/* Стоимость доставки на действующем сайте не фиксирована: её считает менеджер
   после заказа («стоимость зависит от тарифа перевозчика, веса и габаритов»).
   Поэтому подпись «Бесплатно» рядом со способом доставки скрываем — она вводит
   в заблуждение. Появятся тарифы — правило снимается одной строкой. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label,
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	display: none;
}

/* ==========================================================================
   Избранное: сердечко в карточке и на товаре, счётчик в шапке,
   боковая панель и страница /favorites/.

   Как на действующем сайте: список живёт в браузере покупателя, панель
   выезжает справа. Палитра и отступы — переменные выше, своих не заводим.
   ========================================================================== */

.header-tools button.header-fav {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; position: relative;
	background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
	transition: opacity .15s var(--ease);
}
.header-tools button.header-fav:hover { opacity: .6; }
.header-fav__count {
	position: absolute; top: 2px; right: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: grid; place-items: center;
	background: var(--c-ink); color: #fff;
	font-size: 11px; font-weight: 600; border-radius: 999px;
}

.fav-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	/* круглая, как на действующем сайте: белый квадрат в углу фото читался как обрезок картинки */
	border-radius: 999px;
	background: rgba(255, 255, 255, .75); border: 0; cursor: pointer;
	color: var(--c-ink); transition: color .15s var(--ease), background .15s var(--ease);
}
.fav-btn svg { width: 20px; height: 20px; }
.fav-btn:hover { color: var(--c-accent); }
.fav-btn.is-active { color: var(--c-accent); }
.fav-btn.is-active svg { fill: currentColor; }

/* поверх фото карточки, справа сверху — скидка слева, сердечко справа */
.product-card { position: relative; }
.fav-btn--card { position: absolute; top: 8px; right: 8px; z-index: 2; }

.fav-single { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.fav-btn--single { background: none; width: 32px; height: 32px; }
.fav-single__label { font-size: 15px; color: var(--c-ink-soft); }

/* --- боковая панель --- */

.fav-panel { position: fixed; inset: 0; z-index: 900; }
.fav-panel[hidden] { display: none; }
.fav-panel__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.fav-panel__body {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(480px, 100%);
	display: flex; flex-direction: column;
	background: var(--c-bg); box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
}
.fav-panel__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--s-5); border-bottom: 1px solid var(--c-line);
}
.fav-panel__title { margin: 0; font-size: var(--fs-h3); }
.fav-panel__close {
	background: none; border: 0; font-size: 30px; line-height: 1;
	cursor: pointer; color: var(--c-ink);
}
.fav-panel__content { flex: 1; overflow-y: auto; padding: var(--s-5); }
.fav-panel__foot { padding: var(--s-5); border-top: 1px solid var(--c-line); }
.fav-panel__empty, .fav-page__empty, .fav-loading { color: var(--c-mute); margin: 0; }

/* в панели — компактный список строками: фото слева, название и цена справа */
.fav-panel__content .products-grid { display: block; margin: 0; }
.fav-panel__content .product-card {
	display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4);
	align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line);
}
.fav-panel__content .product-card__media { grid-row: span 3; }
.fav-panel__content .product-card__media img { width: 96px; height: 144px; object-fit: cover; }
.fav-panel__content .product-card__badge,
.fav-panel__content .product-card__actions { display: none; }
.fav-panel__content .product-card__title { margin: 0; font-size: 15px; line-height: 1.35; }
.fav-panel__content .product-card__price { font-size: 15px; }
.fav-panel__content .fav-btn--card { position: static; width: 28px; height: 28px; background: none; justify-self: start; }

body.fav-open { overflow: hidden; }

/* на странице избранного сетка та же, что в каталоге */
.fav-page .products-grid { margin-bottom: var(--s-8); }

@media (max-width: 700px) {
	.fav-panel__body { width: 100%; }
	.fav-btn--card { width: 34px; height: 34px; }
}

/* страница избранного — обычная страница WordPress, поэтому здесь действуют
   стили текста: ссылки в карточках подчёркиваются. Снимаем, чтобы карточки
   выглядели ровно как в каталоге. */
.fav-page .product-card__title a,
.fav-page .product-card a { text-decoration: none; }
.fav-page .product-card__title { margin: 0 0 var(--s-2); }


/* --- описание и характеристики раскрывающимися строками --- */

.product-details { margin-top: var(--s-9); max-width: 760px; }
.product-details__item { border-bottom: 1px solid var(--c-line); }
.product-details__item:first-child { border-top: 1px solid var(--c-line); }
.product-details__title {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	padding: var(--s-4) 0;
	font-weight: 600; cursor: pointer; list-style: none;
}
.product-details__title::-webkit-details-marker { display: none; }
/* плюс справа: у открытой строки он превращается в минус поворотом вертикальной палочки */
.product-details__title::after {
	content: ''; flex: 0 0 14px; width: 14px; height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center/14px 1px no-repeat,
		linear-gradient(currentColor, currentColor) center/1px 14px no-repeat;
	transition: transform .18s var(--ease);
}
.product-details__item[open] > .product-details__title::after {
	background: linear-gradient(currentColor, currentColor) center/14px 1px no-repeat;
}
.product-details__body { padding: 0 0 var(--s-5); }
.product-details__body > h2:first-child { display: none; }
.product-details__body p { margin: 0 0 var(--s-4); }
.product-details__body p:last-child { margin-bottom: 0; }
.product-details__body table { width: 100%; border-collapse: collapse; }
.product-details__body th, .product-details__body td {
	padding: var(--s-2) 0; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--c-line); font-weight: 400;
}
.product-details__body th { width: 40%; color: var(--c-mute); }

/* --- покупка в один шаг --- */

.quick-order__open {
	flex: 1 1 100%;
	min-height: 48px; margin-top: var(--s-3); padding: var(--s-3) var(--s-6);
	background: transparent; color: var(--c-accent);
	border: 1px solid var(--c-accent); border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}
.quick-order__open:hover { background: var(--c-accent); color: #fff; }

.quick-order { position: fixed; inset: 0; z-index: 1000; display: flex; }
.quick-order[hidden] { display: none; }
.quick-order__overlay { position: absolute; inset: 0; background: rgba(6, 2, 12, .45); }
.quick-order__box {
	position: relative; z-index: 1; margin: auto;
	width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
	padding: var(--s-6); background: #fff;
	box-shadow: 0 24px 64px rgba(6, 2, 12, .25);
}
.quick-order__close {
	position: absolute; top: 8px; right: 12px;
	background: none; border: 0; font-size: 28px; line-height: 1;
	color: var(--c-mute); cursor: pointer;
}
.quick-order__close:hover { color: var(--c-ink); }
.quick-order__title { margin: 0 0 var(--s-5); font-size: 22px; }

.quick-order__field { display: block; margin-bottom: var(--s-4); }
.quick-order__field > span { display: block; margin-bottom: var(--s-2); font-size: var(--fs-small); color: var(--c-ink-soft); }
.quick-order__field input {
	width: 100%; min-height: 46px; padding: 0 var(--s-3);
	font: inherit; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff;
}
.quick-order__field input:focus { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.quick-order__pay { margin: 0 0 var(--s-4); padding: 0; border: 0; }
.quick-order__pay legend { padding: 0; margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--c-ink-soft); }
.quick-order__radio { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); cursor: pointer; }
.quick-order__radio input { margin-top: 4px; accent-color: var(--c-accent); }
.quick-order__radio span { font-size: var(--fs-small); line-height: 1.4; }

.quick-order__total { margin: 0 0 var(--s-4); text-align: right; font-size: var(--fs-small); }
.quick-order__total strong { font-size: 17px; }

.quick-order__submit {
	width: 100%; min-height: 50px;
	background: var(--c-accent); color: #fff; border: 0; border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background-color .18s var(--ease);
}
.quick-order__submit:hover { background: #e0566f; }
.quick-order__submit[disabled] { opacity: .6; cursor: default; }

.quick-order__note { margin: var(--s-3) 0 0; font-size: 12px; color: var(--c-mute); text-align: center; }
.quick-order__note a { text-decoration: underline; text-underline-offset: 2px; }

.quick-order__result { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); }
.quick-order__result.is-ok { background: #e8f5e9; color: #1b5e20; }
.quick-order__result.is-error { background: #fdecef; color: #a01029; }

/* --- формы-заявки: подбор модели, подбор размера, рассрочка --- */

.lead-open {
	display: block; width: 100%; min-height: 46px; margin-top: var(--s-2);
	padding: var(--s-2) var(--s-5);
	background: transparent; color: var(--c-ink-soft);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	font: inherit; cursor: pointer;
	transition: border-color .18s var(--ease), color .18s var(--ease);
}
.lead-open:hover { border-color: var(--c-ink); color: var(--c-ink); }

.lead-form { position: fixed; inset: 0; z-index: 1001; display: flex; }
.lead-form[hidden] { display: none; }
.lead-form__overlay { position: absolute; inset: 0; background: rgba(6, 2, 12, .45); }
.lead-form__box {
	position: relative; z-index: 1; margin: auto;
	width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
	padding: var(--s-6); background: #fff;
	box-shadow: 0 24px 64px rgba(6, 2, 12, .25);
}
.lead-form__close {
	position: absolute; top: 8px; right: 12px;
	background: none; border: 0; font-size: 28px; line-height: 1;
	color: var(--c-mute); cursor: pointer;
}
.lead-form__close:hover { color: var(--c-ink); }
.lead-form__title { margin: 0 0 var(--s-2); font-size: 21px; line-height: 1.25; }
.lead-form__note { margin: 0 0 var(--s-5); font-size: var(--fs-small); color: var(--c-ink-soft); }

.lead-form__field { display: block; margin-bottom: var(--s-4); }
.lead-form__field > span { display: block; margin-bottom: var(--s-2); font-size: var(--fs-small); color: var(--c-ink-soft); }
.lead-form__field input,
.lead-form__field select {
	width: 100%; min-height: 46px; padding: 0 var(--s-3);
	font: inherit; background: #fff;
	border: 1px solid var(--c-line); border-radius: var(--radius);
}
.lead-form__field input:focus,
.lead-form__field select:focus { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.lead-form__calc {
	margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
	background: var(--c-bg-soft); font-size: var(--fs-small);
}
.lead-form__calc strong { font-size: 18px; }

.lead-form__submit {
	width: 100%; min-height: 50px;
	background: var(--c-accent); color: #fff; border: 0; border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background-color .18s var(--ease);
}
.lead-form__submit:hover { background: #e0566f; }
.lead-form__submit[disabled] { opacity: .6; cursor: default; }

.lead-form__policy { margin: var(--s-3) 0 0; font-size: 12px; color: var(--c-mute); text-align: center; }
.lead-form__policy a { text-decoration: underline; text-underline-offset: 2px; }

.lead-form__result { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); }
.lead-form__result.is-ok { background: #e8f5e9; color: #1b5e20; }
.lead-form__result.is-error { background: #fdecef; color: #a01029; }

/* --- поиск в шапке --- */

.header-search__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
}
.header-search__toggle svg { width: 22px; height: 22px; }

.header-search { border-top: 1px solid var(--c-line); background: #fff; }
.header-search[hidden] { display: none; }
.header-search__inner { position: relative; padding: var(--s-4) 0; }
.header-search__form { display: flex; gap: var(--s-3); align-items: center; }
.header-search__input {
	flex: 1 1 auto; min-height: 48px; padding: 0 var(--s-4);
	font: inherit; border: 1px solid var(--c-line); border-radius: var(--radius);
}
.header-search__input:focus { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.header-search__submit {
	min-height: 48px; padding: 0 var(--s-5);
	background: var(--c-ink); color: #fff; border: 0; border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
}
.header-search__submit:hover { background: #2b2b2b; }
.header-search__close {
	background: none; border: 0; font-size: 28px; line-height: 1;
	color: var(--c-mute); cursor: pointer;
}
.header-search__close:hover { color: var(--c-ink); }

.header-search__results { margin-top: var(--s-3); border-top: 1px solid var(--c-line); }
.header-search__results[hidden] { display: none; }
.header-search__item {
	display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-4);
	align-items: center; padding: var(--s-3) 0;
	border-bottom: 1px solid var(--c-line);
}
.header-search__item:hover { background: var(--c-bg-soft); }
.header-search__item img { width: 56px; height: 84px; object-fit: cover; }
.header-search__noimg { width: 56px; height: 84px; background: var(--c-bg-soft); display: block; }
.header-search__item-title { font-size: var(--fs-small); }
.header-search__item-price { font-weight: 600; white-space: nowrap; }
.header-search__all { display: block; padding: var(--s-4) 0; text-align: center; font-weight: 600; }
.header-search__all:hover { color: var(--c-accent); }
.header-search__empty { padding: var(--s-4) 0; color: var(--c-mute); font-size: var(--fs-small); }

/* --- фильтры каталога: выезжающая панель ---------------------------------
   Прежний вариант раскрывался прямо в странице: стена чекбоксов с внутренними
   прокрутками, а на телефоне простыня на несколько экранов. Клиент попросил
   вернуть логику действующего сайта — компактная панель со сворачиваемыми
   разделами (11.09.2026).
   ------------------------------------------------------------------------ */

.cfilter { display: inline-flex; }

.cfilter__open {
	display: inline-flex; align-items: center; gap: var(--s-2);
	min-height: 42px; padding: 0 var(--s-5);
	background: transparent; color: var(--c-ink);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
}
.cfilter__open:hover { border-color: var(--c-ink); }

/* три полоски разной длины — знак фильтра, без картинки */
.cfilter__open-icon { position: relative; width: 14px; height: 10px; }
.cfilter__open-icon::before,
.cfilter__open-icon::after {
	content: ''; position: absolute; left: 0; height: 1.5px; background: currentColor;
}
.cfilter__open-icon::before { top: 0; width: 14px; box-shadow: 0 4px 0 0 currentColor; }
.cfilter__open-icon::after  { bottom: 0; width: 8px; }

.cfilter__badge {
	min-width: 20px; height: 20px; padding: 0 5px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--c-accent); color: #fff; border-radius: 999px;
	font-size: 12px; font-weight: 700;
}

.cfilter__veil {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(24, 23, 22, .35);
	opacity: 0; transition: opacity .2s ease;
}
.cfilter.is-open .cfilter__veil { opacity: 1; }

.cfilter__panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
	width: min(420px, 100%);
	display: flex; flex-direction: column;
	background: #fff;
	box-shadow: -20px 0 60px rgba(0, 0, 0, .12);
	transform: translateX(100%);
	transition: transform .22s ease;
}
.cfilter.is-open .cfilter__panel { transform: translateX(0); }

.cfilter__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--s-5); border-bottom: 1px solid var(--c-line);
}
.cfilter__title { font-size: 18px; font-weight: 600; }
.cfilter__x {
	width: 36px; height: 36px; display: grid; place-items: center;
	background: none; border: 0; font-size: 26px; line-height: 1; color: var(--c-ink-soft); cursor: pointer;
}
.cfilter__x:hover { color: var(--c-ink); }

.cfilter__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cfilter__body { flex: 1; overflow-y: auto; padding: 0 var(--s-5); }

.cfilter__group { border-bottom: 1px solid var(--c-line); }
.cfilter__group[open] { padding-bottom: var(--s-4); }
.cfilter__group-head {
	display: flex; align-items: center; gap: var(--s-2);
	padding: var(--s-4) 0; cursor: pointer; list-style: none;
	font-weight: 600; user-select: none;
}
.cfilter__group-head::-webkit-details-marker { display: none; }
/* галочка-стрелка справа, поворачивается при раскрытии */
.cfilter__group-head::after {
	content: ''; margin-left: auto; width: 8px; height: 8px;
	border-right: 1.5px solid var(--c-ink-soft); border-bottom: 1.5px solid var(--c-ink-soft);
	transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.cfilter__group[open] > .cfilter__group-head::after { transform: rotate(-135deg) translateY(-2px); }

.cfilter__group-picked:not(:empty) {
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--s-2);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--c-ink); color: #fff; border-radius: 999px;
	font-size: 11px; font-weight: 700;
}

.cfilter__values { display: flex; flex-direction: column; gap: 2px; }
.cfilter__value {
	display: flex; align-items: center; gap: var(--s-3);
	padding: 7px 0; font-size: var(--fs-small); cursor: pointer;
}
.cfilter__value input { accent-color: var(--c-accent); width: 17px; height: 17px; flex: none; }
.cfilter__value-name { flex: 1; }
.cfilter__value-count { color: var(--c-mute); font-size: 12px; }

.cfilter__price { display: flex; gap: var(--s-3); padding-bottom: var(--s-2); }
.cfilter__price label { flex: 1; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-mute); }
.cfilter__price input {
	width: 100%; min-height: 42px; padding: 0 var(--s-3);
	font: inherit; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
}

.cfilter__foot {
	display: flex; align-items: center; gap: var(--s-4);
	padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--c-line); background: #fff;
}
.cfilter__apply {
	flex: 1; min-height: 48px; padding: 0 var(--s-5);
	background: var(--c-accent); color: #fff; border: 0; border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
}
.cfilter__apply:hover { background: #e0566f; }
.cfilter__apply:disabled { background: var(--c-line); color: var(--c-mute); cursor: default; }
.cfilter__apply.is-busy { opacity: .6; }
.cfilter__reset { font-size: var(--fs-small); color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.cfilter__reset[hidden] { display: none; }

/* пока панель открыта, страница под ней не прокручивается */
body.cfilter-lock { overflow: hidden; }

@media (max-width: 640px) {
	.cfilter__panel { width: 100%; }
	.cfilter__value { padding: 10px 0; }   /* пальцем попадать легче */
}

/* сортировка встаёт в один ряд с кнопкой «Фильтры», а не сползает на плитку */
.woocommerce-ordering { margin: 0 0 var(--s-5); }
.woocommerce-ordering { float: right; margin: 0 0 var(--s-5); }
@media (max-width: 700px) { .woocommerce-ordering { float: none; } }
.woocommerce-ordering select {
	min-height: 42px; padding: 0 var(--s-3);
	font: inherit; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
}

/* --- блоки страницы «О нас», перенесённые с действующего сайта --- */

/* Контент страниц ограничен 760 px ради читаемости, но эти блоки свёрстаны
   на всю ширину: в узкой колонке цитата рассыпается на два слова в строку. */
/* Страницы с перенесённым оформлением: блок свёрстан на всю ширину экрана,
   а колонка текста в теме ограничена 760 px — из-за неё карточки сжимались
   и заголовки ломались на пять строк. */
.page-id-3396 .entry-content,
.page-id-3373 .entry-content,
.page-id-3383 .entry-content,
.page-id-3374 .entry-content,
.page-id-3375 .entry-content,
.page-id-3372 .entry-content,
.page-id-3376 .entry-content,
.page-id-3391 .entry-content,
/* 3395 — «Контакты». Её забыли в этом списке при сборке, и блок, свёрстанный
   на всю ширину, уезжал влево на 176 px: приём margin-left: calc(50% - 50vw)
   считает от родителя, а родитель был колонкой в 760 px. Найдено 11.09.2026. */
.page-id-3395 .entry-content,
.page-id-3397 .entry-content { max-width: none; }
.page-id-3396 .entry-content > h1,
.page-id-3396 .entry-content > h2,
.page-id-3396 .entry-content > h3,
.page-id-3396 .entry-content > p,
.page-id-3396 .entry-content > ul,
.page-id-3396 .entry-content > ol { max-width: 760px; }

/* две кнопки в начале страницы контактов — как на действующем сайте */
.contacts-hero-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-5); }
.contacts-hero-buttons .lead-open { display: inline-flex; align-items: center; width: auto; margin: 0; }
.lead-open--ask { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.lead-open--ask:hover { background: #2b2b2b; color: #fff; }

/* --- переключатель языка RU | EN --- */

.lang-switch {
	display: inline-flex; align-items: center; gap: 6px;
	margin-right: var(--s-3); padding-right: var(--s-3);
	border-right: 1px solid var(--c-line);
	font-size: 13px; letter-spacing: .04em; white-space: nowrap;
}
/* Меню и так ужато, чтобы влезть в строку (см. правила .nav-primary выше).
   Поэтому до очень широких экранов показываем только «EN» — переход тот же,
   просто без парного «RU |», которое ничего не даёт: русская версия и так открыта. */
/* Пара «RU | EN» не помещается ни на одной ширине: меню из одиннадцати разделов
   уже ужато до предела и начинает наезжать на логотип. Показываем только «EN» —
   переход тот же, а «RU» ничего не сообщает: русская версия и так открыта. */
.lang-switch { margin-right: var(--s-2); padding-right: var(--s-2); }
@media (max-width: 900px) { .lang-switch { display: none; } }
/* Селекторы с .header-tools намеренно: в блоке иконок ссылкам задан inline-flex
   и размер 40×40 — без перебивки переключатель растягивался в иконку и не скрывался. */
.header-tools .lang-switch__item {
	display: inline; width: auto; height: auto;
	color: var(--c-mute); transition: color .15s var(--ease);
}
.header-tools a.lang-switch__item:hover { color: var(--c-accent); opacity: 1; }
/* показываем ссылку на другой язык: на русской версии «EN», на английской «RU» */
.header-tools .lang-switch__ru { display: none; }
.is-en .header-tools .lang-switch__en { display: none; }
.is-en .header-tools .lang-switch__ru { display: inline; }


/* ==========================================================================
   Страница «Магазины»
   Собрана по образцу действующего сайта: заголовок с подзаголовком по центру,
   два блока «текст слева — карта справа», ссылка на 3D-тур между ними
   и карусель фотографий вместо семи снимков во всю ширину подряд.
   ========================================================================== */

.sesso-shops { max-width: var(--container); margin: 0 auto; }

/* На действующем сайте заголовок стоит по центру и вплотную к подзаголовку.
   Свой заголовок страницы тема печатает слева — на этой странице он мешал бы
   вторым таким же, поэтому центрируем его и сажаем на место тильдовского. */
.page-id-3374 .page-head { padding-bottom: 0; text-align: center; }
.page-id-3374 .page-head h1 { margin: 0 0 18px; font-size: clamp(30px, 2.6vw + 12px, 46px); }

.sesso-shops__head { text-align: center; margin-bottom: 56px; }

.sesso-shops__title {
	font-size: clamp(30px, 2.6vw + 12px, 46px);
	font-weight: 700;
	line-height: 1.23;
	margin: 0 0 18px;
}

.sesso-shops__subtitle {
	/* на действующем сайте подзаголовок набран крупно и тонко */
	font-size: clamp(18px, 0.9vw + 14px, 24px);
	font-weight: 300;
	color: var(--c-ink-soft);
	margin: 0;
}

.sesso-shops__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--gap);
	align-items: center;
	margin-bottom: 56px;
}

.sesso-shops__city {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.17;
	margin: 0 0 30px;
}

/* адрес, телефоны и часы: подпись жирная, значение тонкое и на той же строке —
   как в оригинале, где «Адрес:» и сам адрес идут подряд */
.sesso-shops__list { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.55; }
.sesso-shops__list dt { display: inline; font-weight: 700; }
.sesso-shops__list dd { display: inline; margin: 0; }
.sesso-shops__list dd::after { content: ''; display: block; height: 8px; }
.sesso-shops__list a { color: var(--c-accent); text-decoration: none; }
.sesso-shops__list a:hover { text-decoration: underline; }

.sesso-shops__vacancy { margin: 24px 0 0; font-size: 20px; }
.sesso-shops__vacancy a { color: var(--c-accent); font-weight: 700; text-decoration: none; }

.sesso-shops__map,
.sesso-shops__tour-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--c-bg-soft);
}

.sesso-shops__map iframe,
.sesso-shops__tour-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sesso-shops__tour-frame { aspect-ratio: 16 / 9; margin: 0 0 56px; }

/* ссылка на тур: по центру, между двумя тонкими линиями */
.sesso-shops__tour { text-align: center; margin: 0 0 56px; }

.sesso-shops__tour::before,
.sesso-shops__tour::after {
	content: '';
	display: block;
	width: 140px;
	height: 1px;
	margin: 0 auto 34px;
	background: var(--c-ink);
}

.sesso-shops__tour::after { margin: 34px auto 0; }

.sesso-shops__tour-link {
	font-size: clamp(24px, 2.4vw + 10px, 46px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--c-accent);
	text-transform: uppercase;
	text-decoration: none;
}

.sesso-shops__gallery { position: relative; margin: 0 0 64px; }
/* на действующем сайте кадр карусели 1160 на 550 */
.sesso-shops__slides { position: relative; aspect-ratio: 1160 / 550; overflow: hidden; }

.sesso-shops__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.sesso-shops__slide.is-active { opacity: 1; }
.sesso-shops__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sesso-shops__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	background: rgba(255, 255, 255, 0.85);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.sesso-shops__nav--prev { left: 16px; }
.sesso-shops__nav--next { right: 16px; }

.sesso-shops__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.sesso-shops__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-line);
	cursor: pointer;
}

.sesso-shops__dot.is-active { background: var(--c-ink); }

.sesso-shops__legal { font-size: 18px; font-weight: 300; line-height: 1.55; }
.sesso-shops__legal-title { font-size: 28px; font-weight: 700; margin: 0 0 30px; }
.sesso-shops__legal p { margin: 0 0 14px; }

@media (max-width: 900px) {
	.sesso-shops__row { grid-template-columns: 1fr; gap: 24px; }
	.sesso-shops__list,
	.sesso-shops__vacancy { font-size: 17px; }
	.sesso-shops__city { font-size: 24px; margin-bottom: 20px; }
}

/* ==========================================================================
   Страницы с перенесённым первым экраном
   У блоков «О бренде», «Обмен и возврат» и «Уход за изделием» есть свой
   заголовок в оформлении оригинала. Заголовок страницы, который печатает тема,
   вставал над ним вторым — на действующем сайте его там нет. Убираем с глаз,
   но оставляем в разметке: он задаёт странице заголовок первого уровня.
   ========================================================================== */

.page-id-3396 .page-head,
.page-id-3373 .page-head,
.page-id-3383 .page-head,
.page-id-3372 .page-head,
.page-id-3393 .page-head,
.page-id-3391 .page-head,
.page-id-3392 .page-head,
.page-id-3376 .page-head,
.page-id-3397 .page-head {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Вкладки на информационных страницах
   На действующем сайте «Доставка и оплата» устроена вкладками: сначала
   «Доставка / Оплата», внутри доставки ещё «Курьерская / Самовывоз».
   При переносе вкладки стали маркированными списками, а карточки — столбиком.
   ========================================================================== */

.sesso-tabs { max-width: var(--container); margin: 0 auto; }

.sesso-tabs__head {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 0 0 56px;
}

.sesso-tabs__tab {
	padding: 12px 40px;
	border: 0;
	border-bottom: 1px solid var(--c-line);
	background: none;
	font: inherit;
	font-size: 16px;
	line-height: 1.35;
	/* цвета сняты с действующего сайта: неактивная вкладка светло-серая,
	   активная почти чёрная */
	color: #777;
	cursor: pointer;
}

.sesso-tabs__tab.is-active {
	font-weight: 600;
	color: #222;
	border-bottom-color: #222;
}

.sesso-tabs__panel { display: none; }
.sesso-tabs__panel.is-active { display: block; }

.sesso-tabs__lead {
	font-size: clamp(36px, 5vw + 10px, 82px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	margin: 0 0 48px;
}

/* переключатель «Курьерская доставка / Самовывоз» — двумя кнопками в рамке */
.sesso-pills {
	display: flex;
	justify-content: center;
	margin: 0 0 48px;
	border: 1px solid var(--c-ink);
	width: fit-content;
	margin-inline: auto;
}

.sesso-pills__item {
	padding: 12px 26px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.sesso-pills__item.is-active {
	background: var(--c-ink);
	color: #fff;
	font-weight: 600;
}

.sesso-pills__panel { display: none; }
.sesso-pills__panel.is-active { display: block; }

.sesso-infocards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 64px;
}

.sesso-infocard {
	border: 1px solid var(--c-ink);
	padding: 34px 26px;
	text-align: center;
}

/* иконки на действующем сайте мелкие; в переносе они растянулись во всю ширину */
.sesso-infocard__icon { width: 62px; height: 62px; margin: 0 auto 26px; object-fit: contain; }
.sesso-infocard__title { font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0 0 25px; }
.sesso-infocard__text { font-size: 16px; font-weight: 300; line-height: 1.56; margin: 0; }
.sesso-infocard__list { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 300; line-height: 1.75; }

.sesso-longread { max-width: 760px; margin: 0 auto; text-align: center; }

.sesso-longread__title {
	font-size: clamp(36px, 5vw + 10px, 82px);
	font-weight: 700;
	/* на действующем сайте у этого заголовка межстрочный 1,17 */
	line-height: 1.17;
	margin: 0 0 40px;
}

.sesso-longread p { font-size: 26px; font-weight: 300; line-height: 1.45; margin: 0 0 28px; }
.sesso-longread strong { font-weight: 700; }

@media (max-width: 900px) {
	.sesso-infocards { grid-template-columns: 1fr; }
	.sesso-longread p { font-size: 18px; }
	.sesso-tabs__tab { padding: 12px 22px; }
	.sesso-pills { flex-direction: column; width: 100%; }
}

/* Заголовок «Доставка и оплата»: на действующем сайте он по центру, 46 px,
   на светлой полосе во всю ширину экрана. Полосу тянем за пределы колонки
   отрицательными полями — разметку страницы это не трогает. */
.page-id-3375 .page-head {
	margin-inline: calc(50% - 50vw);
	padding: 78px calc(50vw - 50%) 78px;
	background: #f2f2f2;
	text-align: center;
}

.page-id-3375 .page-head h1 {
	margin: 0;
	font-size: clamp(30px, 2.6vw + 12px, 46px);
}

/* ==========================================================================
   Страница «Рассрочка»
   На действующем сайте: первый экран с фото справа, две вкладки и внутри них
   пошаговые карусели «картинка слева — подпись справа». При переносе теги
   картинок попали в текст и печатались строкой «<img src=…>».
   ========================================================================== */

.sesso-credit { max-width: var(--container); margin: 0 auto; }

/* Первый экран на действующем сайте занимает всю ширину и всю высоту окна:
   слева текст, справа фото на половину экрана. У нас он был втиснут в колонку
   на 1160 px, поэтому фото выходило вдвое меньше оригинала. */
.sesso-credit__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 0;
	margin: 0 0 64px;
	margin-inline: calc(50% - 50vw);
	min-height: min(100vh, 1000px);
}

.sesso-credit__hero-text { padding: 0 40px; }

/* на действующем сайте текст первого экрана стоит по центру своей половины,
   заголовок не чёрный, а тёмно-серый */
.sesso-credit__hero-text { text-align: center; }

.sesso-credit__hero-title {
	font-size: clamp(28px, 2.6vw + 12px, 46px);
	font-weight: 400;
	line-height: 1;
	color: #333;
	margin: 0 0 24px;
}

.sesso-credit__hero-lead {
	font-size: clamp(20px, 1.4vw + 12px, 32px);
	font-weight: 300;
	line-height: 1.5;
	color: #404040;
	margin: 0 0 34px;
}

.sesso-credit__hero-button {
	display: inline-block;
	padding: 15px 30px;
	background: var(--c-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

/* фото занимает правую половину первого экрана во всю его высоту */
.sesso-credit__hero-pic { align-self: stretch; }
.sesso-credit__hero-pic img { width: 100%; height: 100%; object-fit: cover; }

.sesso-pills--wide { margin-bottom: 64px; }

.sesso-credit__title {
	font-size: clamp(28px, 2.4vw + 12px, 42px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	margin: 0 0 22px;
}

.sesso-credit__lead,
.sesso-credit__intro {
	max-width: 700px;
	margin: 0 auto 46px;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.45;
	text-align: center;
}

.sesso-credit__intro { font-weight: 700; }
.sesso-credit__cta { text-align: center; margin: 0 0 34px; }
.sesso-credit__note { font-size: 16px; font-weight: 300; line-height: 1.55; margin: 0 0 56px; }

/* шаги листаются по одному, как карусель на действующем сайте:
   там слайд один, а по бокам стрелки. Без JavaScript видно первый шаг. */
.sesso-steps { position: relative; margin: 0 0 64px; padding: 0 56px; }

/* на действующем сайте картинка шага 560 px в ширину; у нас она тянулась
   по половине колонки и выходила 480 */
.sesso-steps__slide {
	display: none;
	grid-template-columns: 560px minmax(0, 1fr);
	align-items: center;
	gap: var(--gap);
}

.sesso-steps__slide.is-active { display: grid; }

.sesso-steps__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sesso-steps__arrow--prev { left: 0; }
.sesso-steps__arrow--next { right: 0; }

.sesso-steps__pic img { width: 100%; height: auto; }

.sesso-steps__caption {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

@media (max-width: 900px) {
	.sesso-credit__hero,
	.sesso-steps__slide.is-active { grid-template-columns: 1fr; }
	.sesso-credit__hero { min-height: 0; }
	.sesso-credit__hero-pic img { height: 420px; }
	.sesso-steps { padding: 0 42px; }
	.sesso-credit__lead,
	.sesso-credit__intro { font-size: 18px; }
	.sesso-steps__caption { font-size: 20px; }
}

/* Подчёркивание в .entry-content задано селектором из двух частей и перебивает
   правила самих блоков — кнопки и ссылки в перенесённых блоках оказывались
   подчёркнутыми, чего на действующем сайте нет. */
.entry-content .sesso-credit__hero-button,
.entry-content .sesso-shops__tour-link,
.entry-content .sesso-shops__list a,
.entry-content .sesso-shops__vacancy a { text-decoration: none; }

.entry-content .sesso-shops__list a:hover,
.entry-content .sesso-shops__vacancy a:hover { text-decoration: underline; }

/* ==========================================================================
   Страница «Таблица измерений»
   В медиатеке две версии таблицы — горизонтальная для компьютера и вертикальная
   для телефона. При переносе на страницу попали обе сразу, и таблица шла дважды
   подряд. Показываем ту, что подходит экрану, как на действующем сайте.
   ========================================================================== */

.page-id-3393 .entry-content { max-width: 900px; margin-inline: auto; }
.page-id-3393 .entry-content h2 { text-align: center; font-size: clamp(28px, 2.4vw + 12px, 42px); font-weight: 700; margin: 0 0 40px; }
.page-id-3393 .entry-content p { font-size: 15px; line-height: 1.55; }

.page-id-3393 .entry-content img[src*="9x16"] { display: none; }

@media (max-width: 700px) {
	.page-id-3393 .entry-content img[src*="16x9"] { display: none; }
	.page-id-3393 .entry-content img[src*="9x16"] { display: block; }
}

/* ==========================================================================
   Страница «Партнёрам»
   На действующем сайте — заголовок по центру и ролик на светлой полосе.
   При переносе видео пропало, осталась пустая страница.
   ========================================================================== */

.sesso-partners__title {
	font-size: clamp(28px, 2.6vw + 12px, 46px);
	font-weight: 700;
	line-height: 1.23;
	text-align: center;
	margin: 0 0 46px;
}

.sesso-partners__band {
	margin-inline: calc(50% - 50vw);
	padding: 45px calc(50vw - 50%) 90px;
	background: #f2f3f4;
}

.sesso-partners__video {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	background: #000;
	overflow: hidden;
}

.sesso-partners__cover { width: 100%; height: 100%; object-fit: cover; }
.sesso-partners__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* кнопка воспроизведения — треугольник в скруглённом прямоугольнике */
.sesso-partners__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 62px;
	border: 0;
	border-radius: 14px;
	background: #f00;
	cursor: pointer;
}

.sesso-partners__play::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

/* ==========================================================================
   Страница «Долями»
   На действующем сайте заголовок и подзаголовок по центру, текст 20 px тонкого
   начертания с межстрочным 31, ссылки розовые, примечание — на светлой подложке.
   ========================================================================== */

.sesso-dolyame { max-width: 900px; margin: 0 auto; }

.sesso-dolyame__title {
	font-size: clamp(28px, 2.4vw + 12px, 42px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	margin: 0 0 26px;
}

.sesso-dolyame__subtitle {
	font-size: clamp(18px, 0.9vw + 14px, 24px);
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
	margin: 0 0 44px;
}

.sesso-dolyame__body { font-size: 20px; font-weight: 300; line-height: 1.55; }
.sesso-dolyame__body p { margin: 0 0 26px; }
.sesso-dolyame__body a { color: var(--c-accent); text-decoration: none; }
.sesso-dolyame__body a:hover { text-decoration: underline; }

/* нумерованный список: на действующем сайте каждый шаг с новой строки */
.sesso-dolyame__steps { margin: 0 0 26px; padding: 0 0 0 22px; }
.sesso-dolyame__steps li { margin: 0 0 4px; }

.sesso-dolyame__note {
	margin: 40px 0 0;
	padding: 22px 26px;
	background: var(--c-bg-soft);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

.sesso-dolyame__note a { color: var(--c-accent); text-decoration: none; }

.entry-content .sesso-dolyame__body a,
.entry-content .sesso-dolyame__note a { text-decoration: none; }

/* Перенесённые блоки свёрстаны под окружение Тильды, где межстрочный интервал
   по умолчанию «normal». У нас тема задаёт 1.55 на всю страницу, и он протекал
   в подписи и кнопки внутри блоков — строки расходились шире оригинала.
   Возвращаем блокам их родное окружение: свои правила у них есть,
   а всё остальное считается как на действующем сайте. */
.sesso-return,
.scf-care,
.scf-important,
.scf-materials,
.sesso-gift { line-height: normal; }

/* заголовкам внутри перенесённых блоков тема задаёт свой межстрочный
   отдельным правилом — оно перебивает наследование, поэтому сбрасываем и их */
.sesso-return :is(h1, h2, h3, h4),
.scf-care :is(h1, h2, h3, h4),
.scf-important :is(h1, h2, h3, h4),
.scf-materials :is(h1, h2, h3, h4),
.sesso-gift :is(h1, h2, h3, h4) { line-height: normal; }

/* ==========================================================================
   Страницы с перенесёнными блоками во всю ширину
   Блоки свёрстаны под окно целиком: сами тянутся на всю ширину, а внутри
   держат свой контейнер 1180 px. Колонка темы шириной 1160 с полями сжимала
   их до 1112, и все фотографии внутри выходили меньше оригинала.
   Отдаём этим страницам полную ширину — свои поля у блоков есть.
   ========================================================================== */

.page-id-3396 .site-main > .container,
.page-id-3383 .site-main > .container,
.page-id-3373 .site-main > .container,
.page-id-3397 .site-main > .container,
.page-id-3374 .site-main > .container,
.page-id-3391 .site-main > .container {
	max-width: none;
	padding-inline: 0;
}

/* «от» перед ценой у товаров с разбросом по номиналу — подарочных сертификатов */
.price-from { color: var(--c-muted); font-weight: 400; }

/* --- подгрузка товаров ---------------------------------------------------
   Нумерация страниц остаётся на виду, а рядом — кнопка «Показать ещё»,
   после первого нажатия товары подгружаются при прокрутке.
   ------------------------------------------------------------------------ */
.catalog-more {
	display: block; margin: var(--s-7) auto 0;
	min-height: 48px; padding: 0 var(--s-8);
	background: transparent; color: var(--c-ink);
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	font: inherit; font-weight: 600; cursor: pointer;
	transition: background .2s, color .2s;
}
.catalog-more:hover { background: var(--c-ink); color: #fff; }
.catalog-more.is-busy { opacity: .6; cursor: default; }

/* Кнопка со страницы «Доставка и оплата» на форму обмена и возврата.
   На действующем сайте оттуда человек уходит писать письмо руками —
   у нас форма сама соберёт заказ, модель и размеры и отправит менеджеру. */
.sesso-longread__cta { margin: var(--s-5) 0 0; }
.sesso-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 var(--s-6);
	background: var(--c-ink); color: #fff;
	border: 1px solid var(--c-ink); border-radius: var(--radius);
	font: inherit; font-weight: 600; text-decoration: none;
	transition: background .18s var(--ease), color .18s var(--ease);
}
.sesso-btn:hover { background: transparent; color: var(--c-ink); }