/*
Theme Name: YuNiKo (WoodMart Child)
Template: woodmart
Version: 1.0
*/

/* ── Свободные гарнитуры вместо платных (14.09) ───────────────────────────
   Лицензий на TT Norms Pro и Carla Sans у клиентки нет, веб-версии стоят
   около 300 долларов. Ставим близкие по рисунку свободные: Manrope вместо
   TT Norms Pro, Jost вместо Carla Sans — лицензия OFL разрешает коммерческое
   использование. Имена семейств оставлены прежними, чтобы не трогать ни одно
   правило темы: если лицензии купят, достаточно вернуть исходные @font-face.
   Файлы вариативные, один на подмножество алфавита — отсюда font-weight 300 700. */

/* Кириллица заголовков — Montserrat, а не Jost (правка 22.09.2026).
   В Jost нет украинских І, Ї, Є, Ґ вообще: ни в нашем сабсете, ни в наборе
   Google Fonts (проверено fontTools — 82 глифа, этих букв нет). Браузер добирал
   их системным шрифтом, и заголовок «СІМЕЙНА ІСТОРІЯ» выходил набранным двумя
   шрифтами — жирные «І» посреди тонких букв. Montserrat закрывает и украинский,
   и русский, рисунок к Jost близкий. Объявлен после Jost-1, поэтому перекрывает
   его на пересекающемся диапазоне. */
@font-face {
	font-family: "Carla Sans";
	src: url("assets/fonts/free/Jost-1.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Carla Sans";
	src: url("assets/fonts/free/Montserrat-cyr.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Carla Sans";
	src: url("assets/fonts/free/Jost-2.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Carla Sans";
	src: url("assets/fonts/free/Jost-3.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-1.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-2.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-3.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-4.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-5.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "TT Norms Pro";
	src: url("assets/fonts/free/Manrope-6.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Гарнитура TT Norms Pro (согласована Аней 18.08, файлы её) ─────────────────
   Отдаём woff2: исходные ttf весят по 280 КБ, после сжатия и вырезания лишних
   алфавитов остаётся 55-57 КБ на начертание. В подмножестве латиница, кириллица
   и знаки валют — на сайте будут английская и украинская версии.
   font-display: swap — текст читается сразу запасной гарнитурой и подменяется,
   без него первый экран остаётся пустым до загрузки файла.
   Тема держит гарнитуру в переменных --wd-text-font / --wd-title-font, поэтому
   переопределяем их, а не перечисляем селекторы: так шрифт получают и те блоки,
   которые тема рисует сама (меню, кнопки, виджеты, письма плагинов). */





:root,
body {
	--wd-text-font: "TT Norms Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--wd-title-font: var(--wd-text-font);
	--wd-alternative-font: var(--wd-text-font);
	--wd-header-el-font: var(--wd-text-font);
	--wd-widget-title-font: var(--wd-text-font);
	--btn-font-family: var(--wd-text-font);
}

/* ── Бегущая строка в топбаре (п.1 ТЗ: «буде змінюватися текст») ───────────
   Лента едет справа налево непрерывно. Слова не режутся о края: по краям
   стоит градиентная маска, фразы уходят в неё плавно, а не обрубком.
   Копии набора клонирует JS (topbarMarquee) — их столько, чтобы лента
   перекрывала экран минимум дважды, поэтому шва в стыке не видно. */
/* Строка занимает всю ширину полосы. Сам текстовый элемент лежит в левой
   колонке билдера шириной 260 px, поэтому растягиваем его поверх полосы —
   иначе строка живёт в трети экрана, а переносить элемент в билдере значит
   пересобирать шапку. */
.whb-top-bar .whb-flex-row {
	position: relative;
}

.yn-marquee-wrap {
	position: absolute;
	/* Справа в полосе стоит иконка соцсети. Отступ симметричный с обеих сторон,
	   иначе фраза центрируется по остатку и уезжает влево на половину отступа. */
	inset-inline: 46px 46px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Смена фраз: в полосе одновременно видна одна фраза по центру, каждая
   держится --yn-hold и сменяется следующей (просьба клиентки 14.09 —
   «окремо надписи, щоб вони мінялися», вместо прежней бегущей ленты).
   Переход перекрёстный: уходящая фраза гаснет и поднимается на 6 px,
   приходящая всплывает снизу — рывка нет, а претензия «должна быть плавной»
   закрыта не скоростью хода, а самим типом перехода.
   Фразы лежат стопкой друг на друге в общем слое, поэтому смена не двигает
   соседние элементы полосы и высота не скачет. */
.yn-marquee {
	position: relative;
	width: 100%;
	min-width: 240px;
	overflow: hidden;
}

.yn-marquee-track {
	position: relative;
	display: block;
	width: 100%;
	height: 18px; /* font-size 13px × line-height 1.3 ≈ 17 px */
	pointer-events: auto;
}

.yn-marquee-track .yn-m-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translate3d(0, 6px, 0);
	transition: opacity .55s ease, transform .55s ease;
	will-change: opacity, transform;
}

/* Внутренний span нужен, чтобы мерить реальную ширину фразы: у самого
   .yn-m-item она всегда равна ширине полосы, и переполнение по нему не видно */
.yn-marquee-track .yn-m-txt {
	display: inline-block;
	white-space: nowrap;
}

.yn-marquee-track .yn-m-item.yn-m-on {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Уходящая фраза поднимается вверх, а не падает обратно вниз */
.yn-marquee-track .yn-m-item.yn-m-out {
	opacity: 0;
	transform: translate3d(0, -6px, 0);
}

/* Пока скрипт не разобрал разметку — показываем первую фразу как есть */
.yn-marquee-track:not([data-yn-marquee]) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.yn-marquee-track:not([data-yn-marquee]) .yn-m-item {
	position: static;
	opacity: 1;
	transform: none;
}

.yn-marquee-track:not([data-yn-marquee]) .yn-m-item ~ .yn-m-item,
.yn-marquee-track:not([data-yn-marquee]) .yn-m-sep {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.yn-marquee-track .yn-m-item { transition: none; transform: none; }
	.yn-marquee-track .yn-m-item.yn-m-out { transform: none; }
}

@media (max-width: 767px) {
	.yn-marquee-wrap { inset-inline: 0; } /* соцсетей в мобильном топбаре нет */
	.yn-marquee-track .yn-m-item {
		font-size: 11px;
		letter-spacing: .02em;
		padding-inline: 8px;
	}
}

/* ── Контраст в розовом топбаре ─────────────────────────────────────────── */
/* Тема ставит для light-схемы полупрозрачный белый: на #F0BECA это 1.6:1.
   Переводим текст и иконки в Treehouse — 8.6:1. */
.whb-top-bar {
	--wd-text-color: #3D2521;
	--wd-link-color: #3D2521;
	--wd-link-color-hover: #6B4A44;
}
.whb-top-bar,
.whb-top-bar a,
.whb-top-bar .yn-marquee span,
.whb-top-bar .wd-social-icons a {
	color: #3D2521;
}
.whb-top-bar .wd-social-icons a:hover { color: #6B4A44; }

/* ── Размеры в превью карточки каталога (п.12) ──────────────────────────── */
/* Выводятся сразу после SKU, в той же типографике, что и штатные строки
   .wd-product-detail, чтобы карточка не разъезжалась по высоте. */
.yn-loop-sizes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 6px;
}

.yn-loop-sizes .wd-label {
	opacity: .6;
}

/* Без подчёркивания и рамок: размеры здесь — справка о наличии, а не кнопки.
   Подчёркнутый текст в карточке читается как ссылка, по которой ничего не произойдёт. */
.yn-loop-sizes .yn-size {
	color: #3D2521;
	line-height: 1.2;
	letter-spacing: .02em;
}

/* В списочном виде каталога карточка выравнена по левому краю */
.product-list-item .yn-loop-sizes {
	justify-content: flex-start;
}

/* ── Цвета товара точками в карточке каталога (п.12) ────────────────────── */
.yn-loop-colors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.product-list-item .yn-loop-colors {
	justify-content: flex-start;
}

.yn-loop-colors .yn-color-dot {
	width: 14px;
	height: 14px;
	/* Квадраты, а не круги: в референсах Ани (fashionista, схожі товари) цвета
	   показаны именно квадратными плашками под карточкой. */
	border-radius: 2px;
	/* Светлые цвета (White, Ivory, Cream) без обводки сливаются с белым фоном карточки */
	box-shadow: inset 0 0 0 1px rgba(61, 38, 34, .25);
}

.yn-loop-colors .yn-color-more {
	font-size: 11px;
	color: #3D2521;
	opacity: .7;
	line-height: 1;
}

/* ── Раскрывающийся текст: SEO-описание категории, «про магазин» (п.9) ──── */
/* Класс yn-expandable ставит JS — без него текст остаётся полным. */
.yn-expandable {
	position: relative;
	max-height: var(--yn-collapsed-max, 140px);
	overflow: hidden;
}

.yn-expandable::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

.yn-expandable.yn-expanded {
	max-height: none;
}

.yn-expandable.yn-expanded::after {
	display: none;
}

.yn-expandable-flush::after {
	display: none;
}

/* button в селекторе намеренно: тема красит все кнопки правилом
   :is(.btn, .button, button, …) той же специфичности, а её base.css подключается
   после файла дочерней темы — без тега кнопка получала бы серую плашку. */
button.yn-expand-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #3D2521;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.yn-expand-btn:hover,
.yn-expand-btn:focus-visible {
	color: #6B4A44;
}

/* ── Заголовок страницы категории ───────────────────────────────────────── */
/* Тема ставит 68px — на каталоге это съедает первый экран до товаров.
   Уменьшаем и подтягиваем отступы, на мобильном ещё компактнее. */
/* Селектор с тремя классами намеренно: части CSS темы (page-title.css) подключаются
   по мере рендера блока, то есть ПОСЛЕ файла дочерней темы — при равной
   специфичности выигрывало бы правило темы с var(--wd-title-font-s). */
.wd-page-title .title.entry-title {
	font-size: 40px;
	line-height: 1.15;
}

.wd-page-title {
	padding-block: 30px;
}

@media (max-width: 767px) {
	.wd-page-title .title.entry-title {
		font-size: 26px;
	}
	.wd-page-title {
		padding-block: 18px;
	}
}

/* ── SEO-текст категории ────────────────────────────────────────────────── */
/* Штатный серый #767676 даёт на белом 4.54:1 — впритык к AA и тяжело читается
   в длинном тексте. Treehouse-тон даёт 8.3:1. */
.term-description,
.wd-term-desc {
	color: #4A3733;
	max-width: 80ch;
}

.term-description p,
.wd-term-desc p {
	color: inherit;
	margin-bottom: 1em;
}

/* ── Страница товара: артикул до выбора варианта (п.12/этап 5) ──────────── */
.product_meta .sku_wrapper.yn-sku-empty {
	display: none;
}

/* ── Вкладка «Care instructions» на странице товара ─────────────────────── */
.yn-care-list {
	margin: 0;
	padding-inline-start: 18px;
	list-style: disc;
}

.yn-care-list li {
	margin-bottom: 6px;
}

/* ── Атрибуты выбранного варианта ────────────────────────────────────────
   1. На карточке товара выходило «Size: : S»: двоеточие ставит тема через
      `label::after`, и ещё одно печатает плагин свотчей в своём span
      («: S»). Убираем то, что от темы — плагин остаётся источником.
   2. В мини-корзине пары «свойство → значение» шли подряд и слипались в
      «color: Deep ChocolateSize: S». Ставим их сеткой: свойство и значение
      в строке, каждая пара со своей строки. */
.variations th.label label::after {
	content: none;
}

/* Мини-корзина: пары «свойство — значение» печатал наш же блок
   `.yn-mini-cart-attrs`, все span строчные и без отбивки, поэтому соседние
   пары слипались в «color: Deep ChocolateSize: S». Разносим по строкам. */
.yn-mini-cart-attrs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 2px 0 4px;
}

.yn-mini-cart-attrs .yn-attr {
	display: block;
	line-height: 1.4;
}

.yn-mini-cart-attrs .yn-attr-label {
	margin-inline-end: 4px;
	opacity: .7;
	text-transform: capitalize; /* атрибут из Square зовётся «color», рядом штатный «Size» */
}

/* Тот же случай в штатном шаблоне темы `ul.variation > li > span`. */
ul.variation {
	margin: 4px 0 6px;
	padding: 0;
	list-style: none;
}

ul.variation > li {
	display: block;
	margin: 0 0 2px;
	line-height: 1.4;
}

ul.variation .item-variation-name {
	margin-inline-end: 5px;
	opacity: .7;
	text-transform: capitalize; /* атрибут Square зовётся «color», рядом штатный «Size» */
}

ul.variation .item-variation-value,
ul.variation .item-variation-value p {
	display: inline;
	margin: 0;
}

/* ── Пустые витрины ──────────────────────────────────────────────────────
   Sale без единой скидки раньше отдавал заголовок и 350 px пустоты. */
.yn-empty-state {
	max-width: 520px;
	margin: 40px auto 90px;
	text-align: center;
}

.yn-empty-title {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .01em;
}

.yn-empty-text {
	margin-bottom: 26px;
	color: #6B5A56;
	line-height: 1.55;
}

.yn-empty-btn.yn-empty-btn {
	padding: 14px 30px;
	background-color: #F0BECA;
	color: #3D2521;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Розовый как акцент, а не как цвет текста ──────────────────────────── */
/* Фирменный #F0BECA на белом даёт 1.63:1 — им нельзя писать текст. Тема же красит
   в primary цену, активные вкладки и служебные ссылки. Оставляем розовый фонам,
   рамкам и лейблам, а текст переводим в бренд-коричневый. Замерено на витрине:
   цена и заголовок активного аккордеона были 1.63:1. */
.price,
.price .amount,
.price .woocommerce-Price-amount,
.price .woocommerce-Price-currencySymbol,
.summary .price,
.wd-product .price {
	color: #3D2521;
}

/* Подсказки поиска: тема красит там цену своим правилом поверх общего, и в
   выпадашке оставался розовый 1.63:1 — цифры видно хуже, чем символ доллара
   рядом. Дефект прятался от прогона: панель закрыта, пока в поле не ввели
   запрос, поэтому проверка контраста по страницам его не видела. */
.wd-search-results .price,
.wd-search-results .price .amount,
.wd-search-results .price bdi,
.wd-search-results .woocommerce-Price-amount,
.wd-search-results .woocommerce-Price-amount bdi,
.wd-search-suggestions .price,
.wd-search-suggestions .woocommerce-Price-amount {
	color: #3D2521;
}

/* Акционная цена остаётся выделенной, но читаемой: 5.89:1 */
.price ins,
.price ins .amount,
.price ins .woocommerce-Price-currencySymbol {
	color: #9C4A61;
}

.price del,
.price del .amount,
.price del .woocommerce-Price-currencySymbol {
	color: #8A7A76;
}

/* Активный заголовок вкладки/аккордеона: было 1.63:1, стало 14:1.
   Тема пишет `.wd-accordion-title:is(.wd-active,:hover)>.wd-accordion-title-text`,
   поэтому повторяем её структуру — иначе правило не перебить без !important. */
.wd-accordion-title:is(.wd-active, :hover) > .wd-accordion-title-text,
.wd-accordion-title:is(.wd-active, :hover) > .wd-accordion-title-text span,
.wd-tab-wrapper .wd-nav-tabs li.wd-active a,
.wd-nav-tabs .wd-active .nav-link-text {
	color: #3D2521;
}

/* Служебные ссылки WooCommerce («Lost your password?» и подобные): 7.81:1 */
.woocommerce-LostPassword a,
.woocommerce-form-login a,
.woocommerce-info a,
.woocommerce-message a {
	color: #6B4A44;
}

/* ── Страница 404 (п.23) ────────────────────────────────────────────────── */
.yn-404 {
	max-width: 640px;
	margin-inline: auto;
	padding-block: 60px 80px;
	text-align: center;
}

.yn-404-code {
	font-size: 96px;
	line-height: 1;
	font-weight: 600;
	color: #F0BECA;
	letter-spacing: .04em;
}

.yn-404-title {
	margin: 12px 0 10px;
	font-size: 28px;
	color: #3D2521;
}

.yn-404-text {
	color: #4A3733;
	margin-bottom: 26px;
}

.yn-404 .yn-404-btn {
	--btn-bgcolor: #F0BECA;
	--btn-color: #3D2521;
	--btn-bgcolor-hover: #D2A7B1;
	--btn-color-hover: #3D2521;
	padding: 12px 32px;
}

.yn-404-search {
	margin: 30px auto 26px;
	max-width: 420px;
}

.yn-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px 16px;
	font-size: 14px;
}

.yn-404-links-label {
	color: #8A7A76;
}

.yn-404-links a {
	color: #3D2521;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yn-404-links a:hover {
	color: #6B4A44;
}

@media (max-width: 767px) {
	.yn-404 {
		padding-block: 36px 50px;
	}
	.yn-404-code {
		font-size: 64px;
	}
	.yn-404-title {
		font-size: 22px;
	}
}

/* ── Страница «Thank you for your order» (п.24) ─────────────────────────── */
.woocommerce-thankyou-order-received {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

.yn-thankyou-title {
	display: block;
	font-size: 30px;
	line-height: 1.2;
	color: #3D2521;
	font-weight: 600;
}

.yn-thankyou-sub {
	display: block;
	margin-top: 8px;
	color: #4A3733;
}

.yn-thankyou-steps {
	max-width: 640px;
	margin: 34px auto 0;
	padding: 26px 30px;
	background: #FBF6F7;
	border-radius: 4px;
}

.yn-thankyou-steps-title {
	margin: 0 0 14px;
	font-size: 18px;
	color: #3D2521;
}

.yn-thankyou-list {
	margin: 0;
	padding-inline-start: 20px;
	color: #4A3733;
}

.yn-thankyou-list li {
	margin-bottom: 8px;
}

.yn-thankyou-actions {
	margin: 22px 0 0;
	text-align: center;
}

.yn-thankyou-steps .yn-thankyou-btn {
	--btn-bgcolor: #F0BECA;
	--btn-color: #3D2521;
	--btn-bgcolor-hover: #D2A7B1;
	--btn-color-hover: #3D2521;
	padding: 12px 30px;
}

@media (max-width: 767px) {
	.yn-thankyou-title {
		font-size: 24px;
	}
	.yn-thankyou-steps {
		padding: 20px 18px;
	}
}

/* Зелёная пунктирная рамка WooCommerce вокруг благодарности — дефолт плагина,
   к брендингу отношения не имеет. Меняем на мягкий розовый блок. */
/* Повторяем структуру правила темы (.wd-builder-off :is(…)), иначе её CSS,
   подключаемый после дочерней темы, оставляет зелёную рамку. */
.wd-builder-off .woocommerce-thankyou-order-received.woocommerce-thankyou-order-received,
.wd-builder-off .woocommerce-notice--success.woocommerce-notice--success {
	border: 0;
	color: #3D2521;
	background: #FBF6F7;
	padding: 26px 24px;
	border-radius: 4px;
}

/* Итоговые суммы заказа тема тоже красит в primary: 1.63:1 на белом */
.woocommerce-table--order-details .amount,
.woocommerce-table--order-details .woocommerce-Price-currencySymbol,
.woocommerce-order-overview .amount,
.woocommerce-order-overview .woocommerce-Price-currencySymbol,
.woocommerce-table--order-details bdi {
	color: #3D2521;
}

/* Страница Checkout собрана в Elementor и несёт свой заголовок «Checkout».
   После оформления заказа он вводит в заблуждение — покупатель уже прошёл этот шаг.
   Скрываем только на странице благодарности; при пересборке checkout (этап 6) уйдёт совсем. */
body.woocommerce-order-received .elementor-widget-heading:first-of-type {
	display: none;
}

/* Вес меню: тема ставила 700, на референсах он легче — 600 у fashionista,
   400 у onebyone. Берём середину, с TT Norms Pro Medium строка меню читается
   так же, но перестаёт спорить с логотипом. */
.whb-general-header {
	--wd-header-el-font-weight: 500;
}

/* ── Порядок иконок в шапке (п.2) ─────────────────────────────────────────
   На обоих референсах, которые дала Аня, справа идёт одинаковый ряд:
   лупа, аккаунт, избранное, корзина. У нас аккаунт стоял перед поиском —
   меняем местами порядком во флексе, чтобы не пересобирать шапку в билдере. */
.whb-general-header .wd-header-search { order: 1; }
.whb-general-header .wd-header-my-account { order: 2; }
.whb-general-header .wd-header-wishlist { order: 3; }
.whb-general-header .wd-header-cart { order: 4; }

/* ── Футер (п.10, п.11) ───────────────────────────────────────────────────
   Референс из ТЗ — футер onebyone.ua: слева знак и рядом с ним призыв подписаться
   в две строки, под ними строка ввода почты с подчёркиванием и стрелкой (без
   кнопки-плашки), ниже отдельный ряд «за нами следите» и поддержка. */
/* У референса колонка с подпиской заметно шире трёх меню — призыв там идёт
   в две строки, а не переносится по слову. Тема раздаёт всем колонкам футера
   поровну (по три ячейки из двенадцати), поэтому задаём пропорцию сами. */
.footer-sidebar.wd-grid-g {
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
}

.footer-sidebar.wd-grid-g > .footer-column {
	grid-column: span 1;
}

.yn-footer-top {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 26px;
	align-items: start;
}

.yn-footer-logo {
	display: block;
	width: 120px;
	height: auto;
	margin: 0;
}

.yn-footer-subtitle {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #3D2521;
}

.yn-footer-subtext {
	margin-bottom: 18px;
	color: #3D2521;
	font-size: 17px;
	line-height: 1.45;
	max-width: 30ch;
}

/* Замеры референса: заголовки колонок 18/500, пункты списка чёрные с шагом 31,
   строка ввода почты 479 в ширину и 18-м кеглем. У нас было 16/600, серые
   пункты с шагом 35 и поле 326 — футер выглядел мельче и суше оригинала. */
.footer-sidebar .widget-title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: normal;
}

.footer-sidebar .widget li a {
	font-size: 15px;
	color: #3D2521;
}

.footer-sidebar .widget li {
	margin-bottom: 6px;
}

/* Ряд под подпиской: соцсети и поддержка — как у референса, подписи мелкие,
   значения крупнее. Переключатель языка добавится сюда же на этапе переводов. */
.yn-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 46px;
	margin-top: 34px;
}

.yn-footer-meta-title {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	color: #6B5A56;
}

.yn-footer-meta-link {
	font-size: 15px;
	color: #3D2521;
}

/* Нижняя полоса: у референса копирайт слева, платёжные значки строго по центру
   полосы, юридические ссылки справа 12-м кеглем. Тема отдаёт под это две зоны,
   поэтому вторую раскладываем на центр и правый край сами. */
.wd-copyrights .container {
	position: relative;
	align-items: center;
}

.wd-copyrights .wd-col-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	/* справа висит круглая кнопка «наверх» — без запаса она накрывает
	   последнюю юридическую ссылку */
	padding-right: 56px;
}

/* Значки платёжных систем — по центру всей полосы, а не по центру правой
   половины: тема делит низ футера на две зоны, и без выхода из потока
   середина уезжает вправо на 85 px. */
.yn-copy-pay {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.yn-copy-pay img {
	display: inline-block;
	max-width: 220px;
	height: auto;
}

.yn-copy-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.yn-copy-links a {
	font-size: 12px;
	color: #6B5A56;
}

.yn-copy-links a:hover {
	color: #3D2521;
}

@media (max-width: 991px) {
	.wd-copyrights .wd-col-end { flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
	.yn-copy-pay { flex-basis: 100%; text-align: left; }
}

/* Строка подписки одной линией: поле без рамки с подчёркиванием, кнопка —
   стрелка в конце строки. У референса ровно так, плашка там не используется. */
.yn-footer-subscribe .wpforms-container,
.yn-footer-subscribe .wpforms-form {
	position: relative;
	max-width: 480px;
	margin: 0;
}

.yn-footer-subscribe .wpforms-field {
	padding: 0;
}

.yn-footer-subscribe input[type="email"] {
	width: 100%;
	max-width: none;
	padding: 12px 44px 14px 0;
	border: 0;
	border-bottom: 1px solid #3D2521;
	border-radius: 0;
	background: transparent;
	font-size: 17px;
	color: #3D2521;
}

.yn-footer-subscribe input[type="email"]:focus {
	outline: none;
	border-bottom-color: #6B4A44;
}

/* Селектор с двумя обёртками намеренно: WPForms задаёт своему контейнеру
   position: relative правилом такой же длины, и без этого стрелка встаёт
   отдельной строкой под полем вместо конца строки ввода. */
.yn-footer-subscribe .wpforms-container .wpforms-submit-container {
	position: absolute;
	right: 0;
	bottom: 8px;
	margin: 0;
	padding: 0;
}

/* Текст кнопки убираем в ноль и рисуем стрелку — так подпись остаётся в разметке
   для читалок с экрана, а на глаз выходит тот же значок, что у референса. */
.yn-footer-subscribe .wpforms-submit,
.yn-footer-subscribe button[type="submit"] {
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

.yn-footer-subscribe .wpforms-submit::after,
.yn-footer-subscribe button[type="submit"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D2521' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.yn-footer-subscribe .wpforms-submit:hover::after,
.yn-footer-subscribe button[type="submit"]:hover::after {
	transform: translateX(3px);
	transition: transform .18s ease;
}

.yn-footer-social {
	margin-top: 22px;
}

/* Соцсети как у референса: чёрный контурный значок 23 px без плашки.
   Тема рисует их светло-серым кружком, на белом футере он читается
   как выключенная кнопка. */
.yn-footer-social .wd-social-icon {
	width: 26px;
	height: 26px;
	background: none;
	border: 0;
}

.yn-footer-social .wd-social-icon .wd-icon {
	color: #3D2521;
	font-size: 21px;
}

.yn-footer-social .wd-social-icon:hover .wd-icon {
	color: #6B4A44;
}

@media (max-width: 1024px) {
	.yn-footer-logo {
		width: 150px;
		margin-bottom: 16px;
	}
	.yn-footer-subtext {
		max-width: none;
	}
	/* Планшет: четыре колонки сжимались до 95 px, подписи ломались по букве. */
	.footer-sidebar.wd-grid-g {
		grid-template-columns: 1fr 1fr;
		row-gap: 32px;
	}
}

@media (max-width: 768px) {
	/* Телефон: колонки футера в одну, иначе форма подписки и меню
	   уезжали за правый край экрана. */
	.footer-sidebar.wd-grid-g {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}
	.yn-footer-top {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.yn-footer-logo {
		width: 130px;
		margin-bottom: 8px;
	}
	/* Строка копирайта: тема держит её в две колонки, и на 390 px ссылки
	   «Terms of Service / Privacy Policy» ложились поверх картинки с
	   платёжными системами. Разворачиваем в столбик по центру. */
	.wd-copyrights.wd-layout-two-columns .container.wd-grid-g {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		text-align: center;
	}

	.wd-copyrights .wd-col-start,
	.wd-copyrights .wd-col-end {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.yn-copy-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 18px;
	}

	/* На десктопе картинка платёжных систем центрируется через absolute.
	   В колонке она выпадала из потока и ложилась поверх ссылок — возвращаем
	   её в поток. */
	.yn-copy-pay {
		position: static;
		left: auto;
		transform: none;
		flex-basis: auto;
		text-align: center;
	}

	.yn-copy-pay img {
		max-width: 100%;
		height: auto;
	}
}

/* Цена в sticky-панели товара: тема красит её в primary поверх общего правила,
   поэтому здесь дублируем класс — специфичность выше, !important не нужен. */
.wd-sticky-btn .price.price,
.wd-sticky-btn .price .amount,
.wd-sticky-btn .price bdi,
.wd-sticky-btn .price .woocommerce-Price-currencySymbol {
	color: #3D2521;
}

/* ── Первый экран главной (временный баннер до фото от Ани) ────────────── */
/* В каталоге только вертикальные телефонные снимки, широкого кадра 1920×900
   из ТЗ п.5 пока нет. Пока держим кадр по верхней трети, чтобы в широкой
   секции была видна вещь, а не случайный фрагмент, и даём тексту подложку. */
.home .elementor-section .elementor-background-overlay,
body.home .elementor-top-section:first-of-type {
	background-position: center 22% !important;
}

body.home .elementor-top-section:first-of-type .elementor-heading-title {
	color: #3D2521;
	text-shadow: 0 1px 12px rgba(255, 255, 255, .85);
}

/* ── Боковая корзина (п.20) ─────────────────────────────────────────────── */
/* Тема красит суммы и остаток до бесплатной доставки в фирменный розовый —
   на белой панели это 1.63:1. Дублируем класс, чтобы перебить её правило. */
.cart-widget-side .amount.amount,
.cart-widget-side .total .amount,
.cart-widget-side .quantity .amount,
.widget_shopping_cart .amount.amount,
.wd-shipping-progress-bar .amount.amount {
	color: #3D2521;
}

/* Размер и цвет позиции — мелким текстом под названием, как в референсе */
.yn-mini-cart-attrs {
	margin: 2px 0 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #6B5A55;
}

.yn-mini-cart-attrs p,
.yn-mini-cart-attrs dl,
.yn-mini-cart-attrs dt,
.yn-mini-cart-attrs dd {
	margin: 0;
	display: inline;
	font-weight: 400;
}

.yn-mini-cart-attrs dt::after {
	content: " ";
}

.yn-mini-cart-attrs dd::after {
	content: " · ";
	opacity: .5;
}

.yn-mini-cart-attrs dd:last-of-type::after {
	content: "";
}

/* ── Корзина и оформление заказа (п.21, п.22) ──────────────────────────── */
/* Блок «Your order» тема заливает серым, в ТЗ прямо: «тут пропоную білий фон
   зробити». Оставляем белый с тонкой рамкой, чтобы блок не растворился. */
/* Тема заливает блок переменной --bgcolor-gray-200 и печатает своё правило
   inline в конце страницы. Перебиваем не цвет, а саму переменную в этом блоке:
   тогда и «зубчики» по краям перекрашиваются вместе с фоном. */
.woocommerce-checkout > .checkout-order-review,
.woocommerce-order-pay #order_review {
	--bgcolor-gray-200: #FFFFFF;
	border: 1px solid #EAE3E1;
}

/* Тема закрывает серый блок «зубчиками» сверху и снизу — на белом они не нужны */
.woocommerce-checkout > .checkout-order-review.checkout-order-review::before,
.woocommerce-checkout > .checkout-order-review.checkout-order-review::after {
	display: none;
}

/* Суммы в корзине и оформлении: primary давал 1.63:1 на белом */
.woocommerce-checkout-review-order .amount,
.woocommerce-checkout-review-order .woocommerce-Price-currencySymbol,
.woocommerce-checkout-review-order bdi,
.cart_totals .amount,
.cart_totals .woocommerce-Price-currencySymbol,
.cart_totals bdi,
.shop_table .amount,
.shop_table bdi {
	color: #3D2521;
}

/* Итоговая строка — крупнее и заметнее, но тем же цветом */
.cart_totals .order-total .amount,
.woocommerce-checkout-review-order .order-total .amount {
	font-size: 1.15em;
	font-weight: 600;
}

/* Заголовок страницы оформления: 68px съедает первый экран, как было на каталоге */
.woocommerce-cart .wd-page-title .title.entry-title,
.woocommerce-checkout .wd-page-title .title.entry-title {
	font-size: 34px;
}

@media (max-width: 767px) {
	.woocommerce-cart .wd-page-title .title.entry-title,
	.woocommerce-checkout .wd-page-title .title.entry-title {
		font-size: 24px;
	}
}

/* ── Блог (п.15) ────────────────────────────────────────────────────────── */
/* Обложка статьи во всю высоту оригинала занимала полтора экрана до текста.
   Ограничиваем и кадрируем по центру, как в референсе fashionista. */
.single-post .wd-post-thumb img,
.single-post .post-thumbnail img,
.blog-post-loop .wd-post-img img,
.wd-post .wd-post-img img {
	max-height: 520px;
	width: 100%;
	object-fit: cover;
	object-position: center 12%;
}

@media (max-width: 767px) {
	.single-post .wd-post-thumb img,
	.wd-post .wd-post-img img {
		max-height: 320px;
	}
}

/* Ссылка «Continue reading» и прочие акцентные ссылки блога были розовыми — 1.63:1 */
/* Ссылка идёт без класса внутри .wd-post-read-more — цепляемся за контейнер */
.wd-post-read-more a,
.read-more-section a,
.wd-post .wd-read-more,
.wd-post .more-link {
	color: #6B4A44;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wd-post-read-more a:hover,
.read-more-section a:hover,
.wd-post .wd-read-more:hover {
	color: #3D2521;
}

/* ── Выравнивание карточек в сетке ──────────────────────────────────────── */
/* У товаров разный набор строк: где-то есть артикул, где-то размеры, где-то
   ничего. Из-за этого карточки в ряду были разной высоты (480 против 448 px),
   а цены прыгали по вертикали. Прижимаем цену к низу карточки — тогда цены
   всех товаров в ряду стоят на одной линии независимо от числа строк. */
.wd-products .wd-product .wd-product-wrapper,
.products .wd-product .wd-product-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wd-products .wd-product .product-element-bottom,
.products .wd-product .product-element-bottom {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.wd-products .wd-product .product-element-bottom .product-rating-price,
.products .wd-product .product-element-bottom .product-rating-price {
	margin-top: auto;
	padding-top: 6px;
}

/* Сетка товаров — CSS Grid с align-items: flex-start, поэтому карточки не
   тянутся на высоту строки и прижать цену к низу было нечем. */
.wd-products.products,
.products.wd-grid-g {
	align-items: stretch;
}

/* Блок заголовка: тема держит отступ в переменной --wd-title-sp (60 px на десктопе),
   поэтому меняем переменную, а не padding — иначе правило темы перебивает. */
.wd-page-title.title-size-default,
.wd-page-title.title-size-small,
.wd-page-title {
	--wd-title-sp: 22px;
}

@media (max-width: 767px) {
	.wd-page-title.title-size-default,
	.wd-page-title {
		--wd-title-sp: 14px;
	}
}

/* ══ ГЛАВНАЯ (ТЗ п.5-п.9) ═══════════════════════════════════════════════ */
/* Собрана заново: старая была на Elementor с чужеродным семейным фото и
   вперемешку сложенными блоками. Слайдер из пяти пар кадров (п.5) появится,
   когда Аня пришлёт фото — сейчас один статичный кадр той же вёрстки. */

.yn-hero {
	position: relative;
	margin-bottom: 60px;
	min-height: 620px;
	overflow: hidden;
}

/* Высоту держит трек: все слайды абсолютные, иначе активный схлопывался
   до высоты текста и фото занимало 280 px вместо 620. */
.yn-hero-track {
	position: relative;
	height: 620px;
}

/* Слайды лежат стопкой и меняются прозрачностью: сдвиг по горизонтали на
   вертикальных фото даёт рывок, а плавное перекрытие выглядит спокойнее. */
.yn-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
}

.yn-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.yn-hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.yn-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

/* Светлая подложка слева: на фото с белой одеждой текст иначе не читается */
.yn-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .75) 34%, rgba(255, 255, 255, 0) 62%);
}

.yn-hero-content {
	position: relative;
	z-index: 2;
	max-width: 470px;
	padding: 0 40px 0 60px;
}

.yn-hero-kicker {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #6B4A44;
}

.yn-hero-title {
	margin: 0 0 14px;
	font-size: 44px;
	line-height: 1.12;
	color: #3D2521;
}

.yn-hero-text {
	margin-bottom: 26px;
	color: #4A3733;
	font-size: 16px;
}

.yn-hero .yn-hero-btn {
	--btn-bgcolor: #F0BECA;
	--btn-color: #3D2521;
	--btn-bgcolor-hover: #D2A7B1;
	--btn-color-hover: #3D2521;
	padding: 14px 34px;
	letter-spacing: .04em;
}

/* ── Стрелки по бокам, как просила Аня («лапки для переходу по боках») ──── */
button.yn-hero-arrow.yn-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	cursor: pointer;
	transition: background .25s ease;
}

.yn-hero-arrow:hover {
	background: #FFFFFF;
}

.yn-hero-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #3D2521;
	border-right: 2px solid #3D2521;
}

.yn-hero-arrow.yn-prev { left: 18px; }
.yn-hero-arrow.yn-next { right: 18px; }
.yn-hero-arrow.yn-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.yn-hero-arrow.yn-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.yn-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 3;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

/* Тема держит для кнопок минимальную высоту 42 px — точки вытягивались
   в вертикальные полоски. Сбрасываем и высоту, и минимум. */
button.yn-hero-dot.yn-hero-dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	line-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(61, 38, 34, .3);
	cursor: pointer;
}

.yn-hero-dot.is-active {
	background: #3D2521;
	width: 22px;
	border-radius: 4px;
}

/* ── Строка под баннером (п.6) ─────────────────────────────────────────── */
/* На референсе из ТЗ (скрин к п.6, fashionista) эта строка прижата к левому краю
   контента и идёт во всю его ширину, а не колонкой по центру. */
.yn-intro {
	max-width: 1400px;
	margin: 0 auto 64px;
	padding-inline: 20px;
	text-align: left;
	font-size: 17px;
	line-height: 1.6;
	color: #4A3733;
}

/* ── Товарные секции (п.7) ─────────────────────────────────────────────── */
.yn-section {
	max-width: 1400px;
	margin: 0 auto 64px;
	padding-inline: 20px;
}

/* На обоих референсах заголовок товарной секции набран капсом с разрядкой,
   линии под ним нет, а ссылка «переглянути всі» стоит справа на той же строке. */
.yn-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.yn-section-title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #3D2521;
}

.yn-section-link {
	font-size: 14px;
	color: #6B4A44;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ── Две категории плитками ────────────────────────────────────────────── */
.yn-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto 64px;
	padding-inline: 20px;
}

.yn-split-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.yn-split-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transition: transform .6s ease;
}

.yn-split-item:hover img {
	transform: scale(1.04);
}

.yn-split-label {
	position: absolute;
	left: 24px;
	bottom: 24px;
	padding: 10px 22px;
	background: rgba(255, 255, 255, .92);
	color: #3D2521;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ── Преимущества (п.8): фон белый, шрифт не жирный ────────────────────── */
.yn-usp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1400px;
	margin: 0 auto 64px;
	padding: 34px 20px;
	border-block: 1px solid #EAE3E1;
	background: #FFFFFF;
}

/* На скрине к п.8 у каждого пункта сверху контурная иконка, под ней заголовок
   и описание, всё по центру колонки. Иконки рисуем линиями в цвет текста —
   растровых у Ани нет, а тонкая линия не спорит с фотографиями каталога. */
.yn-usp-item {
	text-align: center;
}

.yn-usp-icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 14px;
	fill: none;
	stroke: #3D2521;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.yn-usp-title {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #3D2521;
}

.yn-usp-text {
	display: block;
	font-size: 14px;
	color: #6B5A55;
	line-height: 1.5;
}

/* ── Про магазин с раскрытием (п.9) ────────────────────────────────────── */
.yn-about {
	max-width: 820px;
	margin: 0 auto 70px;
	padding-inline: 20px;
	text-align: center;
}

.yn-about-title {
	margin-bottom: 16px;
	font-size: 26px;
	color: #3D2521;
}

.yn-about .yn-collapsible {
	color: #4A3733;
	line-height: 1.7;
	text-align: left;
}

@media (max-width: 1024px) {
	.yn-hero { min-height: 480px; }
	.yn-hero-track { height: 480px; }
	.yn-hero-title { font-size: 32px; }
	.yn-hero-content { padding: 0 24px; }
	.yn-usp { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.yn-hero { min-height: 420px; margin-bottom: 40px; }
	.yn-hero-track { height: 420px; }
	button.yn-hero-arrow.yn-hero-arrow { width: 38px; height: 38px; }
	.yn-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.55) 100%); }
	.yn-hero-content { max-width: none; text-align: center; }
	.yn-hero-title { font-size: 26px; }
	.yn-intro { margin-bottom: 40px; font-size: 15px; }
	.yn-section, .yn-split, .yn-usp, .yn-about { margin-bottom: 40px; }
	.yn-split { grid-template-columns: 1fr; }
	.yn-usp { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
	.yn-section-title, .yn-about-title { font-size: 21px; }
}

/* Сетка товаров почти без зазора: у fashionista кадры стоят вплотную, у onebyone
   между ними 8 px. При наших 20 px ряд рассыпался на отдельные плитки, тогда как
   у референсов он читается сплошной лентой образов. */
.yn-section .products,
.wd-products-holder .products,
.woocommerce .products {
	--wd-gap: 8px;
	gap: 30px 8px;
}

/* Категория товара под названием: у 9 товаров она «Uncategorized» — на витрине
   это шум. Прячем только этот случай, настоящие категории остаются (п.12). */
.wd-product .wd-product-cats a[href*="uncategorized"] {
	display: none;
}

/* ── Карточка товара: текст слева (ТЗ п.7 «текст перемістити вліво») ───── */
.wd-product .product-element-bottom,
.wd-product .wd-entities-title,
.wd-product .wd-product-cats,
.wd-product .wd-product-detail,
.wd-product .product-rating-price,
.wd-product .wrapp-product-price {
	text-align: left;
}

/* Строки тянутся на всю ширину карточки. При `align-items: flex-start`
   (так было до 22.08) строка получала ширину по своему тексту: длинное
   название вырастало до 288 px в карточке шириной 254 и вылезало за край,
   а обрезка многоточием не срабатывала — обрезать было нечего. */
.wd-product .product-element-bottom {
	align-items: stretch;
}

.wd-product .product-element-bottom > * {
	min-width: 0;
	max-width: 100%;
}

.wd-product .yn-loop-colors,
.wd-product .yn-loop-sizes {
	justify-content: flex-start;
}

/* ── Страница товара по размерам ONE BY ONE ───────────────────────────────
   Аня 18.08 прислала эталон: «беремо за референс по розмірах цей сайт».
   Сняты живые значения с onebyone.ua при ширине окна 1440: заголовок 24/500,
   цена 20/500, кнопка во всю колонку высотой 55, надпись 14.4/500 капсом.
   Берём оттуда размеры, цвета остаются наши (розовый и коричневый бренда). */
.single-product .product_title {
	margin-bottom: 14px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wd-title-color, #3D2521);
}

.single-product .summary .price {
	margin-bottom: 22px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

/* Старая цена у эталона мельче новой и приглушена, а не просто зачёркнута. */
.single-product .summary .price del,
.single-product .summary .price del .amount {
	font-size: 13px;
	font-weight: 400;
	opacity: .55;
}

.single-product .summary .price ins {
	text-decoration: none;
}

/* Кнопка на всю ширину колонки: у эталона она 442 из 442 и высотой 55.
   Quantity selector (- 1 +) на referense onebyone отсутствует — его скрываем,
   клиент добавляет нужное количество уже в корзине. */
.single-product form.cart .quantity {
	display: none;
}

.single-product form.cart .single_add_to_cart_button {
	width: 100%;
	min-height: 55px;
	font-size: 14.4px;
	font-weight: 500;
	letter-spacing: .02em;
}

/* Размеры: у эталона это широкие плитки по четыре в ряд, а не мелкие квадраты —
   размер читается с расстояния и по нему проще попасть пальцем. Цветовые свотчи
   (button-variable-item с названием цвета) остаются по содержимому: растягивать
   «Deep Chocolate» на четверть строки незачем. */
.single-product .variations .button-variable-items-wrapper[data-attribute_name*="size" i] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.single-product .variations .button-variable-items-wrapper[data-attribute_name*="size" i] li.button-variable-item {
	width: 100%;
	min-width: 0;
	height: 36px;
	margin: 0;
}

.single-product .variations .button-variable-items-wrapper .variable-item-span {
	font-size: 14.4px;
	font-weight: 400;
	text-transform: uppercase;
}

/* Остальные атрибуты (цвет, материал) выводятся теми же кнопками, но названия
   там длинные: в сетке из четырёх колонок «Deep Chocolate» переносится и
   вылезает за рамку. Им — ширина по содержимому и высота по тексту. */
.single-product .variations .button-variable-items-wrapper:not([data-attribute_name*="size" i]) li.button-variable-item {
	height: auto;
	min-height: 36px;
	margin: 0 8px 8px 0;
}

.single-product .variations .button-variable-items-wrapper:not([data-attribute_name*="size" i]) .variable-item-span {
	padding: 8px 14px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	.single-product .product_title { font-size: 20px; }
	.single-product .summary .price { font-size: 18px; }
}

/* ── Каталог по тем же размерам ───────────────────────────────────────────
   У эталона карточка 339 в ширину, кадр 339×488 — вертикаль 5:7, название и
   цена одного размера и одного веса, без выделения жирным. Пропорцию кадра
   задаёт сам WooCommerce (обрезка 5:7), здесь только страхуем object-fit:
   до перегенерации миниатюр в каталоге лежат квадраты, и без cover они
   растягивались бы по вертикали — люди на фото становились выше и уже. */
.wd-product .product-image-link img,
.wd-product .hover-img img {
	aspect-ratio: 5 / 7;
	object-fit: cover;
}

.wd-product .wd-entities-title {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.wd-product .price,
.wd-product .price .amount {
	font-size: 14px;
	font-weight: 400;
}

/* ── Плотность карточки каталога по референсам ────────────────────────────
   Сверка бок о бок (onebyone.ua/wardrobe, fashionista.ua) 19.08: механика
   совпадала, а текстовый блок у нас был выше и разреженнее обоих — название
   в две строки, «Size:» лишней подписью, цвета отдельной строкой над ценой.
   Здесь карточка приводится к их плотности: одна строка на название,
   размеры без подписи, цвета — в строке цены справа. */
.wd-product .product-element-bottom {
	row-gap: 2px;
}

/* Порядок строк как у onebyone: размеры → название → категория → цена.
   Доп. строка (у них размеры, у fashionista свотчи) стоит над названием
   у обоих референсов — название тогда читается как подпись к цене,
   а не теряется между служебными строками. DOM не трогаем: там порядок
   задан хуками WooCommerce и переставлять его — лезть в шаблон темы. */
.wd-product .yn-loop-sizes      { order: 1; }
.wd-product .wd-entities-title  { order: 2; }
.wd-product .wd-product-cats    { order: 3; }
.wd-product .wd-product-sku     { order: 4; }
.wd-product .product-rating-price { order: 5; }

/* Размеры — служебная строка, поэтому мельче и приглушённее названия
   (у onebyone они серые 12 px над названием). */
.wd-product .yn-loop-sizes .yn-size {
	font-size: 12px;
	opacity: .75;
}

/* Название в одну строку с многоточием: у обоих референсов длинные названия
   обрезаны, а не переносятся — иначе высота карточек в ряду гуляет. */
.wd-product .wd-entities-title {
	margin-bottom: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wd-product .wd-entities-title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Строки под названием: категория, размеры — вплотную, без темина отступа */
.wd-product .product-element-bottom .wd-product-cats,
.wd-product .product-element-bottom .wd-product-detail {
	margin-bottom: 0;
	line-height: 1.35;
}

/* Резерв под строку категории — по той же причине, что и под размеры.
   У товаров из Uncategorized ссылка скрыта (см. правило ниже), строка
   схлопывается, и карточка выходит на 2 px ниже соседних: в сетке это видно
   как «съехавший» ряд. Резерв держит ряды ровными независимо от того,
   разложены товары по категориям или ещё нет. */
.wd-product .product-element-bottom .wd-product-cats {
	display: block;
	min-height: 18px;
}

.wd-product .yn-loop-sizes {
	gap: 2px 6px;
	/* Резерв под строку размеров: она есть не у всех товаров, и без резерва
	   название соседней карточки встаёт на 17 px выше — в ряду подписи
	   «прыгают». Высота карточек при этом одинаковая, поэтому машинная
	   проверка равенства высот дефект не ловила, а глазом он заметен сразу.
	   На обоих референсах служебная строка над названием есть всегда. */
	min-height: 16px;
}

.wd-product .product-element-bottom:not(:has(.yn-loop-sizes))::before {
	content: "";
	display: block;
	min-height: 16px; /* тот же резерв там, где строки размеров нет вовсе */
	order: 1;
}

/* Резерв под строку артикула: у вариативных товаров SKU лежит на вариациях,
   у родителя он пуст, и тема строку не печатает вовсе. Ряд с такими товарами
   выходил на 2 px ниже соседнего — в сетке это читается как сбитая линия. */
.wd-product .product-element-bottom:not(:has(.wd-product-sku))::after {
	content: "";
	display: block;
	height: 15.2px;
	order: 4; /* место SKU: размеры 1 · название 2 · категория 3 · SKU 4 · цена 5 */
}

/* Цена и цвета — одна строка: цена слева, точки цветов справа (референс onebyone).
   Тема ставит здесь `flex-direction: column` правилом `.wd-product.wd-hover-base
   .wrapp-product-price` из woo-product-loop-base.css, а этот файл подключается
   лениво уже в <body>, то есть после стилей дочерней темы. При равной
   специфичности выигрывал он — поэтому селектор на класс длиннее. */
.wd-products .wd-product.wd-hover-base .wrapp-product-price,
.products .wd-product.wd-hover-base .wrapp-product-price,
.wd-product.wd-hover-base .wrapp-product-price {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.wd-product .wrapp-product-price .yn-loop-colors {
	flex: 0 0 auto;
	justify-content: flex-end;
	margin: 0;
}

.wd-products .wd-product .product-element-bottom .product-rating-price,
.products .wd-product .product-element-bottom .product-rating-price {
	padding-top: 4px;
}

/* Точки чуть мельче — в строке цены они акцент, а не отдельный элемент */
.wd-product .wrapp-product-price .yn-color-dot {
	width: 11px;
	height: 11px;
}

/* ── «Наш магазин» (п.16) ─────────────────────────────────────────────────
   Референс из ТЗ — страница «Наші магазини» fashionista: карточка в рамке,
   слева фото зала, посередине название с адресом, справа часы работы по дням.
   Адрес, часы, фото и описание — заглушки, ждём данные Ани. */
.yn-store {
	max-width: 1200px;
	margin: 0 auto 64px;
	padding-inline: 20px;
}

.yn-store-card {
	display: grid;
	grid-template-columns: 300px 1fr 260px;
	gap: 40px;
	align-items: start;
	padding: 34px;
	border: 1px solid #EAE3E1;
}

.yn-store-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.yn-store-name {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 500;
}

.yn-store-address,
.yn-store-text {
	margin-bottom: 14px;
	line-height: 1.6;
}

.yn-store-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.yn-store-hours-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #F2ECEA;
}

.yn-store-hours-row:last-child {
	border-bottom: 0;
}

@media (max-width: 991px) {
	.yn-store-card { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
}

/* ── Каталог: hover-иконки ────────────────────────────────────────────────
   На референсах (fashionista, onebyone) при наводке видна только wishlist-
   иконка в углу фото. Compare и Quick View — лишние значки, которых нет
   ни на одном из эталонов. Скрываем их в каталоге.
   Wishlist-кнопку оставляем — она есть на референсах. */
.wd-product .wd-compare-btn,
.wd-product .wd-quick-view-btn,
.wd-product .open-quick-view {
	display: none !important;
}

/* ── Каталог: hover карточки как на fashionista.ua ───────────────────────
   На эталоне при наведении карточка приподнимается на белой подложке
   с мягкой тенью, а фото плавно наезжает. Описание товара в hover
   не показывается (base_hover_content = none) — только имя и цена.
   Шаблон темы всё равно печатает пустой контейнер описания: он
   резервирует высоту и сдвигает кнопки, поэтому убираем его. */
.wd-product .hover-content.wd-more-desc {
	display: none !important;
}

.wd-product .product-wrapper {
	transition: box-shadow .3s ease, transform .3s ease;
}

.wd-product:hover .product-wrapper {
	box-shadow: 0 6px 28px rgba(61, 38, 34, .12);
	transform: translateY(-3px);
}

/* Плавный наезд фото — 3 % достаточно, чтобы движение читалось,
   но кадр не терял края одежды. */
.wd-product .product-image-link,
.wd-product .wd-product-img {
	overflow: hidden;
}

.wd-product .product-image-link img,
.wd-product .wd-product-img img {
	transition: transform .5s ease;
}

.wd-product:hover .product-image-link img,
.wd-product:hover .wd-product-img img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.wd-product .product-wrapper,
	.wd-product .product-image-link img,
	.wd-product .wd-product-img img {
		transition: none;
	}
	.wd-product:hover .product-wrapper {
		transform: none;
	}
	.wd-product:hover .product-image-link img,
	.wd-product:hover .wd-product-img img {
		transform: none;
	}
}

/* ── Страница товара: скрываем лишние элементы ───────────────────────────
   На referense onebyone.ua нет Compare под кнопкой.
   SKU и Category (posted_in) — по ТЗ п.12 оставляем.
   Share — убираем (нет на referense).
   Wishlist вернули 21.09 по просьбе Ани (пункт 6): в каталоге сердечко есть,
   а в карточке товара его не было — покупатель не мог отложить товар оттуда,
   куда как раз и приходит из рекламы. Стили кнопки — ниже. */
.single-product .compare,
.single-product .wd-compare-btn,
.single-product .product_meta .tagged_as {
	display: none !important;
}

/* ── Страница товара: кнопка «в избранное» ───────────────────────────────
   Штатная кнопка Woodmart идёт текстовой строкой сразу после формы.
   Приводим к виду карточки: сердце + подпись, отбивка от кнопки корзины,
   подчёркивание при наведении — как у «Size guide» выше. */
.single-product .wd-wishlist-btn.wd-style-text {
	margin-top: 14px;
}

.single-product .wd-wishlist-btn.wd-style-text a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--yn-text, #3d2622);
}

.single-product .wd-wishlist-btn.wd-style-text a:hover {
	text-decoration: underline;
}

.single-product .wd-wishlist-btn.wd-style-text .wd-action-icon {
	font-size: 16px;
}

/* Share-иконки */
.single-product .wd-social-icons,
.single-product .wd-share-buttons,
.single-product .sharedaddy,
.single-product .jetpack-sharing-buttons {
	display: none !important;
}

/* Кнопка «Click to enlarge» поверх фото галереи — на referense её нет,
   лайтбокс открывается кликом на само фото (cursor:zoom-in достаточно). */
.single-product .wd-show-product-gallery-wrap {
	display: none !important;
}

/* Кнопка покупки на распроданном варианте: гасим, чтобы клик не уходил в
   пустоту. Класс ставит yuniko.js по событию выбора варианта. */
.single_add_to_cart_button.yn-sold-out,
.single_add_to_cart_button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Галерея товара с одним фото ─────────────────────────────────────────
   Раскладку задаёт `.wd-carousel-wrap` — grid с жёсткими двумя колонками
   (`grid-template-columns: 455px 455px`). У товаров с единственным кадром
   (`TWEED SUIT` и ещё несколько из импорта Square) вторая колонка остаётся
   пустой: снимок занимает половину, справа зияет белое поле почти в 500 px, а
   метка «Sold out» уезжает в него — замер дал x = 2145 при окне 1440,
   то есть за край экрана.

   Растягивать кадр во всю ширину нельзя: снимки вертикальные, и на 920 px
   карточка уезжает вниз на два экрана (замер: 920×1996). Держим одну колонку
   с ограничением по ширине и по центру — пустота становится симметричной. */
.single-product .wd-carousel-wrap:has(.wd-carousel-item:only-child) {
	grid-template-columns: minmax(0, 620px) !important;
	justify-content: center;
}

.single-product .wd-carousel-wrap:has(.wd-carousel-item:only-child) img {
	width: 100%;
	height: auto;
}

/* ── Единая пропорция кадра в галерее ────────────────────────────────────
   Пять исходников из 46 выбиваются из ряда: `TWEED SUIT` 295×640,
   `SILK SETS` и `SKIRT BLACK/WHITE VOLAN` 1178×2560 — это пропорция 0.46,
   то есть кадр экрана телефона, а не фото товара (у остальных 0.75).
   Показывали их «как есть», поэтому карточка растягивалась вниз: 620×1345
   против нормальных 620×827.

   Задаём кадру единую пропорцию 3:4 и кроп от верха — лицо и плечи остаются,
   срезается низ. Это лечит вёрстку, но не качество: у `TWEED SUIT` в
   оригинале всего 295 px ширины, при растяжении до 620 он мылит.
   Такие снимки заменит только клиентка — список у неё в вопросах. */
.single-product .wd-carousel-item img,
.single-product .woocommerce-product-gallery__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
}

/* Метка держится за само фото, а не за контейнер галереи */
.single-product .wd-product-images,
.single-product .woocommerce-product-gallery {
	position: relative;
	overflow: hidden;
}

.single-product .product-labels {
	inset-inline-start: 0;
	inset-inline-end: auto;
	max-width: 100%;
}

/* ── Счётчик корзины: не показывать "0" ──────────────────────────────────
   Когда корзина пуста, розовый кружочек с нулём выглядит как глюк.
   На обоих референсах счётчик появляется только при наличии товаров.
   JS в yuniko.js ставит класс yn-count-zero когда значение равно 0. */
.wd-cart-number.yn-count-zero,
.wd-tools-count.yn-count-zero {
	display: none !important;
}

/* ── Каталог: 3 колонки на десктопе (как fashionista.ua) ─────────────────
   Тема строит сетку как repeat(var(--wd-col), 1fr) и подставляет в --wd-col
   значение из --wd-col-lg / -md / -sm / -xs по своим брейкпоинтам
   (1025+ / до 1024 / до 768.98 / до 576). Переопределяем сами переменные,
   а не grid-template-columns: тогда отступы, gap и прочая механика сетки
   остаются темины и переживут её обновление.

   В inline-стиле тема печатает только lg/md/sm — --wd-col-xs не задан,
   поэтому ниже 576 px сетка срывалась в неопределённое число колонок. */
.archive.woocommerce .wd-products,
.tax-product_cat .wd-products,
.post-type-archive-product .wd-products {
	/* Четыре колонки эталонны там, где сетка занимает всю ширину окна
	   (onebyone: карточка 339 px, сайдбара нет). У нас в каталоге есть
	   сайдбар с фильтрами, он забирает 360 px, и четвёртая колонка сжимала
	   карточку до 254 px — фото мельче эталона на треть, сетка выглядела
	   разреженной. Fashionista с таким же сайдбаром держит три колонки по
	   357 px; при трёх у нас выходит 349 — попадаем в эталон.
	   На главной сайдбара нет, там сетка остаётся четырёхколоночной (333 px). */
	--wd-col-lg: 3 !important;
	--wd-col-md: 3 !important;
	--wd-col-sm: 2 !important;
	--wd-col-xs: 2 !important;
}

/* ── Каталог: убираем лишние элементы панели ─────────────────────────────
   На референсах нет переключателя "Show: 9/12/18/24", кнопки "Show sidebar"
   и строки "Showing all N results" — их скрываем поштучно.
   ⚠️ Раньше здесь пряталась вся панель целиком (`.wd-shop-tools:has(...)`),
   и вместе с переключателем исчезала сортировка: на сайте её не было ни на
   десктопе, ни на мобильном. На обоих референсах сортировка есть —
   fashionista «Сортувати» справа над сеткой, onebyone «Сортувати | Фільтр»
   на одной линии с заголовком каталога. Прячем только лишнее. */
.wd-products-per-page,
.woocommerce-result-count,
.wd-show-sidebar-btn,
.woocommerce-ordering-wrap .per-page,
.products-per-page {
	display: none !important;
}

/* Панель сортировки: прижата вправо, как на обоих референсах */
.wd-shop-tools:has(.woocommerce-ordering) {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}

/* На мобильном тема оставляет от сортировки одну стрелку без подписи — из
   иконки не прочитать, что это. На референсе рядом стоит слово («Сортувати»),
   поэтому подписываем и здесь. */
@media (max-width: 768px) {
	.wd-shop-tools:has(.woocommerce-ordering) {
		justify-content: flex-start;
	}

	/* Тема держит иконку в жёстком боксе 30×30 и прячет переполнение —
	   без снятия размера подпись не поместится. */
	.woocommerce-ordering.wd-ordering-mb-icon {
		display: inline-flex !important;
		align-items: center;
		width: auto !important;
		min-width: 0;
		overflow: visible;
	}

	/* Подпись вешаем на ::before: ::after у темы занят самой стрелкой. */
	.woocommerce-ordering.wd-ordering-mb-icon::before {
		content: "Sort";
		order: -1;
		margin-inline-end: 8px;
		font-size: 13px;
		line-height: 30px;
		letter-spacing: .02em;
		text-transform: uppercase;
		white-space: nowrap;
		color: inherit;
	}
}

/* ── Метка «Hot» с витрины снята ─────────────────────────────────────────
   Тема рисует её для всех товаров с флагом «Featured», а он стоит у 37 из 46 —
   метка перестаёт что-либо значить и занимает угол, где покупатель по обоим
   референсам ждёт скидку (-11%, -25%). Сам флаг не трогаем: на нём держатся
   витрины «Best sellers». Метку распродажи оставляем. */
.product-label.featured,
.product-labels .featured {
	display: none !important;
}

/* ── Каталог: категория под названием товара — оставляем (ТЗ п.12) ───────
   «і номер SKU і категорію, як вище лишаємо» (слова Ані). */

/* SEO-текст описания категории — у onebyone.ua нет блока с описанием
   над сеткой товаров. Скрываем. */
.archive.woocommerce .term-description,
.archive.woocommerce .wd-term-desc {
	display: none !important;
}

/* ── Иконки платёжных систем в mini-cart (ТЗ image26) ───────────────────── */
.yn-pay-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 14px 16px 10px;
	border-top: 1px solid var(--brdcolor-gray-200, #eee);
}

.yn-pay-icon {
	width: 40px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 4px;
}

/* ── Контраст служебного текста в карточке каталога ─────────────────────── */
/* Тема печатает артикул и категорию цветом #A5A5A5 — это 2.46:1 на белом,
   ниже нормы AA (4.5). Treehouse со светлым оттенком даёт 6.4:1 и остаётся
   визуально второстепенным. */
.wd-product .wd-sku,
.wd-product .wd-product-cats,
.wd-product .wd-product-cats a,
.wd-product .yn-loop-sizes {
	color: #6B5B57;
}

.wd-product .wd-product-cats a:hover {
	color: #3D2521;
}

/* ── Одинаковая высота карточек и цена на одной линии ───────────────────── */
/* Набор данных у товаров разный: где артикул, где размеры, где ничего. Из-за
   этого текстовый блок карточки был 82 или 99 px, ряды выходили 450 и 467,
   а цена в соседних карточках стояла на разной высоте. Резервируем блок под
   максимальный состав и прижимаем цену к низу — как на обоих референсах. */
.wd-product .product-element-bottom {
	display: flex;
	flex-direction: column;
	min-height: 99px;
}

.wd-product .product-element-bottom .product-rating-price {
	margin-top: auto;
}

@media (max-width: 768px) {
	.wd-product .product-element-bottom { min-height: 92px; }
}

/* ── Кнопки выбора варианта (плагин Variation Swatches) ─────────────────── */
/* Плагин красит кнопку в сам цвет товара и оставляет тёмную подпись — на
   «Deep Chocolate» получалась тёмная надпись на тёмном фоне. На референсе
   (onebyone) варианты — светлые плитки с рамкой и тёмным текстом. */
.variable-items-wrapper .variable-item.button-variable-item,
.variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item) {
	background-color: #FFFFFF;
	border: 1px solid #E2D9D3;
	box-shadow: none;
}

.variable-items-wrapper .variable-item.button-variable-item .variable-item-span {
	color: #3D2521;
}

.variable-items-wrapper .variable-item.button-variable-item.selected,
.variable-items-wrapper .variable-item.button-variable-item:hover {
	border-color: #3D2521;
	background-color: #FFFFFF;
}

/* ── Контраст в блоге и на 404 ──────────────────────────────────────────── */
/* Метка рубрики была белым по розовому (1.63), подпись автора и дата —
   светло-серым (2.46 и 1.92). Розовый остаётся фоном, текст переводим
   в Treehouse: на #F0BECA это 8.6:1. */
.wd-post-cat a,
.post-category a,
.wd-meta-cat a,
.entry-meta .meta-categories a {
	color: #3D2521;
}

.wd-post .wd-entities-title + .wd-post-meta,
.post-meta,
.entry-meta,
.entry-meta a,
.wd-post-date,
.wd-meta-author,
.wd-meta-date,
.widget_recent_entries .post-date,
.wd-widget .post-date {
	color: #6B5B57;
}

/* Крупная цифра 404 — декоративная, но розовый на белом 1.63 не читается
   даже как акцент. Тёмно-розовый из той же гаммы даёт 4.7:1. */
.error404 .wd-page-title .wd-404-title,
.yn-404-code,
.error404 .yn-404 .yn-404-num {
	color: #A85C74;
}

.error404 .yn-404 .yn-404-links-title,
.yn-404 .yn-404-links-title {
	color: #6B5B57;
}

/* Точечно по тем узлам, что остались светло-серыми (замер regress) */
.wd-post .post-date,
span.post-date,
.wd-post-meta span,
.wd-post-meta a,
.entry-content .post-date,
li.cat-item,
li.cat-item a,
.widget_categories li,
.widget_categories li a {
	color: #6B5B57;
}

.yn-404-links-label,
span.yn-404-links-label {
	color: #5E4A45;
}

/* CSS темы подключается после дочерней при той же специфичности — перебиваем
   повтором класса (приём уже применялся на этом проекте для кнопок и заголовков) */
li.cat-item.cat-item,
li.cat-item.cat-item a,
span.post-date.post-date,
.wd-post-date.wd-post-date {
	color: #6B5B57;
}

/* ── Подсказка «выберите размер» ─────────────────────────────────────────
   Тема оставляет кнопку покупки активной и без выбранного варианта, поэтому
   клик уходил в пустоту. Скрипт перехватывает его и показывает эту строку. */
.yn-variant-hint {
	margin: 8px 0 0;
	color: #9C4A61;
	font-size: 13px;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .25s ease, max-height .25s ease;
}

.yn-variant-hint.is-visible {
	opacity: 1;
	max-height: 60px;
}

.variations.yn-needs-choice .wd-swatch,
.variations.yn-needs-choice select {
	border-color: #9C4A61;
}

/* ── Обложки блога ───────────────────────────────────────────────────────
   Тема режет превью в 2:1 (замер: 1039×520), а фотографии портретные
   768×1024 — из кадра остаётся полоса по центру, головы и ноги уходят.
   На референсе (fashionista/blog.html) обложка близка к 4:3 и лица целы.
   Ставим 4:3 и кроп от верха: в модных съёмках важное — сверху.
   Высоту держит контейнер `.wd-post-img` (жёсткие 520 px), картинке своей
   пропорции мало — правило нужно именно на обёртку. */
.wd-post-img.post-img-wrapp {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto !important;
	overflow: hidden;
}

/* Картинку прижимаем к обёртке абсолютом: собственная высота у неё приходит
   из атрибутов файла и правило `height: 100%` её не перебивало. */
.wd-post-img.post-img-wrapp img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: top center;
}

/* Листинг блога в две колонки (ТЗ п.15, референс fashionista/blog.html).
   Тема отдаёт записи в одну колонку на всю ширину — при обложке 4:3 это
   даёт карточку почти в 800 px высотой, до второй записи нужно прокрутить
   целый экран. */
@media (min-width: 769px) {
	.blog-archive-page .wd-posts,
	.blog-posts .wd-posts,
	.wd-posts.wd-grid-g {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 30px;
	}

	.wd-posts.wd-grid-g > .wd-post {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* Точки-индикаторы мобильной галереи товара (референс fashionista). */
.yn-gal-dots {
	display: none;
	gap: 7px;
	justify-content: center;
	padding: 12px 0 4px;
}

@media (max-width: 768px) {
	.yn-gal-dots { display: flex; }
}

.yn-gal-dot.yn-gal-dot {
	width: 7px;
	height: 7px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D9D2D0;
	box-shadow: none;
	transition: background .2s ease, transform .2s ease;
}

.yn-gal-dot.is-active {
	background: #3D2521;
	transform: scale(1.25);
}

/* Текстовая страница держит читаемую колонку: на 1440 без ограничения строка
   растягивалась на 1395 px (~180 знаков) — глаз теряет начало следующей строки. */
.yn-page {
	max-width: 860px;
	margin: 0 auto;
}

.yn-page h2 {
	margin-top: 36px;
}

/* ── Terms of Service и Privacy Policy ───────────────────────────────────
   Тексты достались от старого сайта: в Privacy подзаголовки набраны абзацем
   с жирным («<p><strong>Introduction</strong></p>»), в Terms — h3 и h4 без
   отступа сверху. Рядом с FAQ это читалось как две разные страницы, хотя
   обе лежат в одном разделе футера (замечание Ани 21.09, п. 3).
   Правим показ, а не текст: контент собран Elementor'ом и переведён
   на uk/ru, переписывать его ради вида — лишний риск. */
.yn-legal h3,
.yn-legal h4 {
	font-size: 20px;
	margin-top: 32px;
	margin-bottom: 12px;
}

.yn-legal .yn-legal-head {
	font-size: 20px;
	line-height: 1.35;
	margin-top: 32px;
	margin-bottom: 12px;
}

/* Первый подзаголовок не отбивается от вводного текста лишней дырой. */
.yn-legal > *:first-child h2,
.yn-legal h2:first-child {
	margin-top: 0;
}

/* ── Страница «Our Story» ─────────────────────────────────────────────────
   Текст пришёл от клиентки 31.08 (контент-мастер EN/UA/RU). Два кадра идут
   парой, блок «Visit Our Showroom» повторяет карточку из «Our store», чтобы
   адрес и часы выглядели одинаково на обеих страницах. */
.yn-story-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 26px 0 34px;
}

.yn-story-photos img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.yn-visit {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 40px;
	align-items: start;
	padding: 28px 34px;
	border: 1px solid #EAE3E1;
	margin: 22px 0 34px;
}

.yn-visit-label {
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* #8A8A8A давал 3.45:1 на белом — ниже AA, регресс это ловит. */
	color: #6B5A56;
	margin-bottom: 10px;
}

.yn-visit-text {
	margin: 0 0 14px;
	line-height: 1.6;
}

.yn-visit-link {
	display: inline-block;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.yn-visit-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #F2ECEA;
}

.yn-visit-row:last-child {
	border-bottom: 0;
}

@media (max-width: 991px) {
	.yn-story-photos { grid-template-columns: 1fr; gap: 14px; }
	.yn-visit { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}

/* Вводный абзац на страницах-подборках («New Collection», «Sale») —
   тот же размер и отступ, что у описания категории, чтобы страницы
   каталога читались одинаково. */
.yn-cat-intro {
	max-width: 760px;
	margin: 0 auto 26px;
	text-align: center;
}

/* SEO-текст категории под сеткой (см. yuniko_term_seo_text в functions.php). */
.yn-term-seo {
	max-width: 860px;
	margin: 46px auto 0;
	padding-top: 30px;
	border-top: 1px solid #EAE3E1;
}

.yn-term-seo-title {
	font-size: 20px;
	margin-bottom: 12px;
}

/* Подписи в корзине и на оформлении заказа (микрокопия клиентки, 31.08). */
.yn-cart-note,
.yn-checkout-trust {
	margin-top: 12px;
	font-size: 13px;
	color: #6B5A56;
	text-align: center;
}

.yn-thankyou-social {
	display: inline-block;
	margin-left: 18px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

@media (max-width: 575px) {
	.yn-thankyou-social { display: block; margin: 14px 0 0; }
}

/* Слоган бренда в футере (контент-мастер клиентки, 31.08). */
.yn-footer-tagline {
	max-width: 420px;
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: #6B5A56;
}

/* Карта на странице контактов. */
.yn-map {
	margin: 18px 0 30px;
	line-height: 0;
}

.yn-map iframe {
	display: block;
	width: 100%;
	border: 1px solid #EAE3E1;
}

/* Постоянные блоки карточки товара (Size & Fit, Shipping & Returns). */
.yn-pd-trust {
	margin: 12px 0 0;
	font-size: 13px;
	color: #6B5A56;
}

.yn-pd-blocks {
	margin-top: 22px;
	border-top: 1px solid #EAE3E1;
	padding-top: 18px;
}

.yn-pd-block + .yn-pd-block {
	margin-top: 16px;
}

.yn-pd-title {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.yn-pd-block p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}


/* Подпись об остатке на плитке варианта (см. variantStockLabels в yuniko.js).
   Тон приглушённый: это подсказка, а не второй заголовок кнопки.
   Блочная подпись рвала слова на две строки («3» / «left») и распирала плитку —
   держим её в строке со значением, как «34 (last size)» на onebyone. */
.yn-stock-note {
	display: inline;
	margin-left: 6px;
	font-size: 10px;
	letter-spacing: .02em;
	text-transform: lowercase;
	white-space: nowrap;
	color: #8A7B77;
}

.wd-swatch.wd-disabled .yn-stock-note {
	color: #B3A9A6;
}

/* Распроданный цвет: сам цвет должен остаться виден, поэтому вместо подписи —
   приглушение и диагональ. Подпись «sold out» в квадрат 40 px не помещается
   и закрывала цвет целиком (замечание Ани 22.09 про tweed suit). */
.color-variable-item.yn-swatch-sold .variable-item-span {
	opacity: .55;
	/* диагональ поверх самого цвета: background-image рисуется над background-color,
	   поэтому не нужен псевдоэлемент — плагин свотчей его всё равно перекрывает */
	background-image: linear-gradient(to top right, transparent calc(50% - 1px), #6E5F5B calc(50% - 1px), #6E5F5B calc(50% + 1px), transparent calc(50% + 1px));
}

/* Выбранная плитка варианта: плагин свотчей свой класс не ставит (его скрипт
   не инициализируется), подсветку даёт мост swatchClickBridge. */
.variable-item.selected {
	border-color: #3D2521;
	box-shadow: inset 0 0 0 1px #3D2521;
}

/* ── Hero по макетам Ани от 09.09.2026, шрифт обновлён 14.09.2026 ──────────
   Фон — слои-фотографии из Figma без текста, текст и кнопка живые.
   Carla Sans — веб-файлы прислала Аня 10.09 (архив с OTF/TTF/WEB).
   Начертания из макета: Light 300 на четырёх кадрах, Bold 700 на «Wear repeat». */

.yn-hero { min-height: 0; }
.yn-hero-track { height: min(46.875vw, 900px); }          /* 1920×900 из макета */
.yn-hero-media picture { position: absolute; inset: 0; display: block; }

/* Заголовок кадра — отдельным семейством, а не общим шрифтом сайта.
   Аня заметила (21.09, п. 1), что шрифт на слайдере не тот, что на её макетах.
   На макетах Carla Sans, он платный и от покупки она отказалась. Josefin Sans
   по рисунку ближе к нему, чем общий Jost, но кириллицы в нём нет совсем
   (225 глифов, ни одного) — поэтому отдаём ему только латиницу, а украинские
   и русские заголовки падают на «Carla Sans», то есть на тот же Jost. */
@font-face {
	font-family: "YN Hero";
	src: url("assets/fonts/JosefinSans-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

/* Josefin подключаем только на английской версии. На uk/ru в строке вроде
   «СІМЕЙНА ІСТОРІЯ» часть знаков (пробелы, пунктуация) всё равно бралась из него,
   и заголовок выглядел набранным двумя шрифтами — ровно то, на что Аня жаловалась.
   Языковые версии остаются на одном Jost. */
html[lang^="en"] .yn-hero-title {
	font-family: "YN Hero", "Carla Sans", "TT Norms Pro", sans-serif;
}

/* Украинский и русский заголовки длиннее английских: «Ваш стиль. По-новому.»
   против «Your Style, Reimagined». На кадре с сумкой текст уходил в три строки
   и наезжал на предмет съёмки — на этих языках берём кегль поменьше,
   а «По-новому» не рвём по дефису. */
html[lang^="uk"] .yn-slide--style .yn-hero-title,
html[lang^="ru"] .yn-slide--style .yn-hero-title {
	font-size: clamp(28px, 5.6vw, 104px);
	hyphens: none;
}

/* Колонка текста на этом кадре рассчитана на английскую строку в три ряда.
   Украинский и русский заголовки короче по числу строк, но шире, и последнее
   слово ложилось на сумку в кадре — прижимаем колонку левее. */
html[lang^="uk"] .yn-slide--style .yn-hero-content,
html[lang^="ru"] .yn-slide--style .yn-hero-content {
	max-width: 56%;
}

/* «Завітайте до нашого шоуруму» вдвое длиннее «Visit Our Showroom»: тем же
   кеглем заголовок занимал три строки во весь кадр и закрывал витрину. */
html[lang^="uk"] .yn-slide--showroom .yn-hero-title,
html[lang^="ru"] .yn-slide--showroom .yn-hero-title {
	font-size: clamp(26px, 6.4vw, 118px);
}

.yn-hero-title {
	font-family: "Carla Sans", "TT Norms Pro", sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .015em;
	font-size: clamp(34px, 8.85vw, 170px);                /* 170 px при 1920 */
	line-height: .96;
	margin: 0 0 clamp(8px, 1.15vw, 22px);
}

.yn-hero-text {
	margin-bottom: clamp(14px, 2.1vw, 40px);
	font-size: clamp(11px, 1.4vw, 27px);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.yn-hero .yn-hero-btn {
	--btn-bgcolor: #FFFFFF;
	--btn-color: #2B2B2B;
	--btn-bgcolor-hover: #F1E7E4;
	--btn-color-hover: #2B2B2B;
	padding: clamp(10px, 1.55vw, 26px) clamp(24px, 3.4vw, 62px);
	border-radius: 999px;
	font-size: clamp(12px, 1.4vw, 27px);
	letter-spacing: .04em;
}

/* Подпись под кнопкой — есть только на кадре Family Story */
.yn-hero-note {
	margin: clamp(10px, 1.6vw, 30px) 0 0;
	font-size: clamp(9px, 1vw, 19px);
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: #4A3733;
}

/* Кадр Family Story: текст слева, тёмный по светлому фото */
.yn-slide--left .yn-hero-content { max-width: 46%; padding: 0 3vw 0 10.4vw; }

/* Кадры New Arrivals / Wear Repeat / Visit Our Showroom: по центру, светлый
   текст на затемнении — в макете под текстом лежит тёмный эллипс */
.yn-slide--center { justify-content: center; }
.yn-slide--center::after {
	background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.20) 78%, rgba(0,0,0,0) 95%);
}
.yn-slide--center .yn-hero-content {
	max-width: 92%;
	padding: 0 clamp(56px, 5vw, 96px);
	text-align: center;
}
.yn-slide--center .yn-hero-title,
.yn-slide--center .yn-hero-text,
.yn-slide--center .yn-hero-note { color: #FFFFFF; }

@media (max-width: 767px) {
	.yn-hero-track { height: min(125vw, 620px); }         /* 1080×1350 из макета */
	.yn-hero-title { font-size: clamp(30px, 13.5vw, 62px); }
	.yn-hero-text { font-size: clamp(10px, 3vw, 15px); }
	.yn-hero-note { font-size: clamp(8px, 2.3vw, 12px); }
	.yn-hero .yn-hero-btn { font-size: clamp(11px, 3vw, 15px); padding: 11px 30px; }
	/* На мобильных кадрах макета стрелки стоят у нижнего края, а не по центру:
	   по центру они ложились прямо на заголовок. */
	button.yn-hero-arrow.yn-hero-arrow { top: auto; bottom: 14px; transform: none; }
	.yn-slide--left .yn-hero-content { max-width: none; padding: 0 26px; text-align: left; }
	.yn-slide--left { align-items: flex-start; padding-top: 8vw; }
	.yn-slide--center .yn-hero-content { padding: 0 20px; }
}

/* Кегль заголовка задан покадрово — в макете он разный: Family/New Arrivals
   170 px, Visit Our Showroom 150, Wear Repeat 119 (из ширины кадра 1080). */
.yn-hero .yn-hero-btn { box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.yn-slide--center .yn-hero-title { text-shadow: 0 2px 26px rgba(0,0,0,.35); }
.yn-slide--center .yn-hero-text { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.yn-slide--center::after {
	background: linear-gradient(180deg, rgba(0,0,0,0) 8%, rgba(0,0,0,.42) 32%, rgba(0,0,0,.48) 55%, rgba(0,0,0,.26) 78%, rgba(0,0,0,0) 96%);
}

@media (max-width: 767px) {
	.yn-slide--family   .yn-hero-title { font-size: 15.7vw; }
	.yn-slide--arrivals .yn-hero-title { font-size: 15.7vw; }
	.yn-slide--showroom .yn-hero-title { font-size: 13.4vw; }
	.yn-slide--wear     .yn-hero-title { font-size: 11vw; }   /* «Wear Repeat» в одну строку, как в макете */
	.yn-slide--left { padding-top: 3vw; }
	.yn-slide--center .yn-hero-content { padding: 0 16px; }
}

/* Финальная подгонка после сверки со скринами макета */
.yn-slide--center::after {
	background: linear-gradient(180deg, rgba(0,0,0,0) 6%, rgba(0,0,0,.46) 30%, rgba(0,0,0,.52) 56%, rgba(0,0,0,.30) 80%, rgba(0,0,0,0) 97%);
}
.yn-slide--center .yn-hero-text { text-shadow: 0 1px 10px rgba(0,0,0,.8); }

/* Кадр «Wear Repeat»: белые буквы идут по светлой части снимка (вода, бетон,
   светлые пальто), и замер по пикселям давал 1.7:1. Усиливаем затемнение
   именно в полосе заголовка, низ кадра не трогаем. */
.yn-slide--wear::after {
	background: linear-gradient(180deg, rgba(0,0,0,0) 4%, rgba(0,0,0,.52) 24%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.40) 70%, rgba(0,0,0,0) 94%);
}

/* Кадр «Family Story»: тёмный текст лежит на светлом снимке, и слева под буквами
   попадают фигуры — замер по пикселям давал 3.1:1 при норме 4.5. Мягкая светлая
   вуаль слева поднимает контраст, фотографию при этом видно. */
.yn-slide--family::after {
	background: linear-gradient(100deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.42) 34%, rgba(255,255,255,.14) 58%, rgba(255,255,255,0) 78%);
}

@media (max-width: 767px) {
	.yn-slide--showroom .yn-hero-title { font-size: 12.2vw; }
	/* Кадр Family на мобиле: текст стоит на светлой части снимка, как в макете —
	   на живом фото под ним оказываются лица, поэтому добавлена мягкая подложка */
	.yn-slide--left::after {
		background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 32%, rgba(255,255,255,.25) 52%, rgba(255,255,255,0) 68%);
	}
}

/* ── Кадр «Your Style, Reimagined» (Desktop 7 / Рhones 7), добавлен 14.09.2026 ──
   В макете текст слева кремовым #F4EDE3, фон — светлая бетонная стена.
   Подзаголовок 27 px таким цветом на такой стене не читается (контраст ниже порога),
   поэтому под текстовой зоной мягкое затемнение и тень — цвета макета сохранены. */
.yn-slide--style .yn-hero-title,
.yn-slide--style .yn-hero-text,
.yn-slide--style .yn-hero-note { color: #F4EDE3; }
.yn-slide--style .yn-hero-title { text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.yn-slide--style .yn-hero-text  { text-shadow: 0 1px 12px rgba(0,0,0,.85); }
/* В макете «YOUR STYLE,» стоит одной строкой и занимает 57% ширины кадра —
   стандартные 46% контейнера ломают её на три строки. И весь блок поднят
   в верхнюю треть, а не по центру, как на остальных кадрах. */
/* 22.09: кадр стал первым, и «REIMAGINED» ложилось последней буквой на сумку
   в кадре — сужаем колонку и берём кегль поменьше, чтобы строка заканчивалась
   до предмета съёмки. */
.yn-slide--style .yn-hero-content { max-width: 62%; transform: translateY(-9%); }

.yn-slide--style .yn-hero-title {
	font-size: clamp(30px, 6.8vw, 130px);
}
/* Затемнение слева держит контраст заголовка: кадр стал первым 22.09, и у
   правого края строки контраст падал до 4.6:1 — впритык к порогу. Растянули
   градиент дальше вправо, стало с запасом. */
.yn-slide--style::after {
	background: linear-gradient(100deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.20) 62%, rgba(0,0,0,0) 84%);
}
@media (max-width: 767px) {
	/* на мобиле текст стоит вверху кадра — затемняем верх, а не левый край */
	.yn-slide--style::after {
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.08) 46%, rgba(0,0,0,0) 62%);
	}
	/* десктопные 72% и подъём на 9% на узком экране срезают заголовок сверху
	   и выносят «REIMAGINED» за правый край — на мобиле блок во всю ширину */
	.yn-slide--style .yn-hero-content {
		max-width: 100%;
		transform: none;
		padding: 7% 16px 0;
		justify-content: flex-start;
	}
	.yn-slide--style .yn-hero-title { font-size: 11.8vw; }
}

/* На кадре Wear Repeat подпись в макете стоит над заголовком, а не под ним,
   и заголовок набран Carla Sans Bold 700 — на остальных кадрах Light 300 */
/* Начертание заголовка — одно на все кадры (замечание Ани 21.09, п. 1).
   У «Wear Repeat» стоял жирный: так было на картинке из её макета, но рядом
   с остальными четырьмя кадрами, набранными лёгким, это читалось как другой
   шрифт. Возврат к жирному — снять комментарий со строки ниже. */
/* .yn-slide--wear .yn-hero-title { font-weight: 700; } */
.yn-slide--wear .yn-hero-content { display: flex; flex-direction: column; }
.yn-slide--wear .yn-hero-text { order: -1; margin: 0 0 clamp(8px, 1.1vw, 20px); }
.yn-slide--wear .yn-hero-content { align-items: center; }
.yn-slide--wear .yn-hero-btn { align-self: center; }

/* Вертикальная посадка текста — по замерам макета при ширине 1920:
   блок стоял выше макетного на 55-80 px, поэтому смещаем вниз покадрово. */
@media (min-width: 768px) {
	/* translate, а не margin: в центрированном flex margin съедается наполовину */
	.yn-slide--family   .yn-hero-content { transform: translateY(4.2vw); }
	.yn-slide--arrivals .yn-hero-content { transform: translateY(3.6vw); }
	.yn-slide--wear     .yn-hero-content { transform: translateY(3.1vw); }
	.yn-slide--showroom .yn-hero-content { transform: translateY(2.9vw); }
}

/* ── Тексты контент-мастера клиентки (31.08): подзаголовок секции новинок ──
   В её документе у секции «New In This Week» есть вторая строка «Fresh arrivals».
   Ставим её под шапкой: сама шапка — flex со ссылкой справа, внутрь её класть нельзя. */
.yn-section-sub {
	margin: -10px 0 18px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .02em;
	color: #6B5A56;
}

/* ── Блок подписки в футере: заголовок и вводная строка из её документа ──── */
.yn-footer-subtitle {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3D2521;
}

.yn-footer-lead {
	max-width: 420px;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: #3D2521;
}

@media (max-width: 767px) {
	.yn-footer-subtitle { font-size: 17px; }
	.yn-footer-lead { font-size: 14px; }
	.yn-section-sub { margin-top: -6px; font-size: 13px; }
}

/* ── Переключатель языков TranslatePress ────────────────────────────────── */
/* Плагин вешает плавающий блок в самый низ справа (--bottom:0), и он ложится
   поверх нижней панели навигации на телефоне и поверх sticky Add to Cart на
   карточке товара — пункт «Account» и кнопка покупки закрывались наполовину.
   Позиция задана у плагина инлайновыми переменными, поэтому перебиваем их
   !important: авторское правило с ним выигрывает у инлайна.
   Отступы считаны с живых замеров: панель 55 px, sticky ATC 42 px (моб) и
   111 px (десктоп). */
.trp-floating-switcher.trp-switcher-position-bottom {
	--bottom: 20px !important;
	--right: 20px !important;
}

body.single-product .trp-floating-switcher.trp-switcher-position-bottom {
	--bottom: 130px !important;
}

@media (max-width: 767px) {
	.trp-floating-switcher.trp-switcher-position-bottom {
		--bottom: 66px !important;  /* над нижней панелью */
		--right: 12px !important;
	}
	body.single-product .trp-floating-switcher.trp-switcher-position-bottom {
		--bottom: 112px !important; /* над панелью и sticky-кнопкой */
	}
}

/* Распроданная расцветка-картинка: подпись «sold out» внутрь квадрата 50 px не
   помещается и выталкивает изображение, плитка читается как пустая рамка
   (Аман 24.09, розовая рубашка в клетку: три плитки из пяти выглядели пустыми).
   Поступаем как с цветом — саму расцветку показываем, а недоступность даём
   приглушением и диагональю. */
.image-variable-item.yn-swatch-sold .variable-item-contents,
.image-variable-item.yn-swatch-sold .variable-item-image {
	opacity: .45;
}

.image-variable-item.yn-swatch-sold .variable-item-contents {
	position: relative;
}

.image-variable-item.yn-swatch-sold .variable-item-contents::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top right, transparent calc(50% - 1px), #6E5F5B calc(50% - 1px), #6E5F5B calc(50% + 1px), transparent calc(50% + 1px));
	pointer-events: none;
}