/* ============================================================================
   Tulsi — «Тёплый дом». Витрина WooCommerce.

   Цвета, шрифты и размеры живут в theme.json — здесь их нет, здесь только
   var(--wp--preset--…). Этот файл занимается тем, до чего theme.json не достаёт:
   разметкой WooCommerce.

   Разметка витрины неоднородна, и это не наш выбор, а факт:
     • каталог и «похожие товары» — блоки (ul.wc-block-product-template);
     • галерея, форма покупки и вкладки — классические шаблоны Woo внутри блоков.
   Поэтому ниже соседствуют .wc-block-* и .woocommerce-*.

   Специфичность: стили WooCommerce приходят из плагина отдельными файлами,
   местами с удвоенным классом (.is-flex-container.is-flex-container = 0,3,0).
   Селекторы здесь намеренно чуть тяжелее, чем «красиво», иначе правило молча
   проигрывает. Файл подключается с приоритетом 20 — после плагина.
   ========================================================================= */

:root {
	--t-bg:          var(--wp--preset--color--base);
	--t-card:        var(--wp--preset--color--white);
	--t-linen:       var(--wp--preset--color--accent-5);
	--t-border:      var(--wp--preset--color--accent-6);
	--t-seam:        var(--wp--preset--color--seam);
	--t-accent:      var(--wp--preset--color--accent-1);
	--t-accent-dark: var(--wp--preset--color--accent-2);
	--t-accent-deep: var(--wp--preset--color--accent-3);
	--t-ink:         var(--wp--preset--color--contrast);
	--t-muted:       var(--wp--preset--color--accent-4);

	--t-r-sm: 8px;
	--t-r-md: 14px;
	--t-r-pill: 999px;
	--t-tap: 44px;
	--t-shadow-md: 0 6px 20px rgba(44, 44, 44, .10);
	--t-tint: rgba(122, 158, 126, .10);

	/* Шеврон для select — один на весь файл. */
	--t-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A7265' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ============================ База ====================================== */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Цены и любые числа в таблицах — моноширинными цифрами, иначе колонка «пляшет». */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.woocommerce-product-attributes td {
	font-variant-numeric: tabular-nums;
}

:focus-visible {
	outline: 2px solid var(--t-accent-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* На 390px горизонтальной прокрутки быть не должно: рвут её обычно
   картинка без max-width и широкая таблица характеристик. */
img,
table {
	max-width: 100%;
}

/* ============================ Шапка ===================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--t-bg);
	border-bottom: 1px dashed var(--t-seam);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0; /* на узких экранах админ-бар не фиксированный */
	}
}

/* Иконки аккаунта и корзины — WooCommerce вставляет их в шапку сам
   (Block Hooks), в разметке parts/header.html их нет. */
.wc-block-mini-cart__button,
.wc-block-customer-account__link {
	min-width: var(--t-tap);
	min-height: var(--t-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--t-r-pill);
	color: var(--t-ink);
	padding: 0 8px;
}

.wc-block-mini-cart__button:hover,
.wc-block-customer-account__link:hover {
	background: rgba(44, 44, 44, .06);
	color: var(--t-ink);
}

/* Сумма рядом с корзиной на телефоне съедает всю строку. */
@media (max-width: 599px) {
	.wc-block-mini-cart__amount,
	.wc-block-customer-account__account-title {
		display: none;
	}
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--t-ink);
	min-width: var(--t-tap);
	min-height: var(--t-tap);
}

/* №19: пункт меню — тап-цель во всю высоту шапки, а не 60×23 текста. */
.wp-site-blocks > header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--t-tap);
	padding: 0 12px;
	border-radius: var(--t-r-sm);
}

/* ============================ Подвал ==================================== */

.wp-site-blocks > footer.wp-block-template-part {
	background: var(--t-linen);
	border-top: 1px dashed var(--t-seam);
	margin-top: 64px;
}

/* №20: приглушённый текст на льне. #7A7265 на #F2EFE6 давал 4.13:1 —
   на волосок ниже AA 4.5. Тон темнее (замер: 4.87 на льне, 5.31 на бумаге).
   Сырой hex, а не палитра: это не новый цвет бренда, а компенсация фона,
   живёт только в подвале. */
.wp-site-blocks > footer.wp-block-template-part a,
.wp-site-blocks > footer.wp-block-template-part h5,
.wp-site-blocks > footer.wp-block-template-part .wp-block-site-tagline {
	color: #6E675B;
}

.wp-site-blocks > footer.wp-block-template-part a:hover {
	color: var(--t-accent-deep);
}

/* Статичный список категорий (№10): порядок — по числу товаров, а не
   алфавит блока Woo; разметка в parts/footer.html. */
.tulsi-footer-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tulsi-footer-cats li {
	margin: 0 0 8px;
	padding: 0;
}

/* Список категорий Woo в подвале — обычный столбец ссылок, без маркеров. */
.wp-site-blocks > footer .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-site-blocks > footer .wc-block-product-categories-list li {
	margin: 0 0 8px;
}

.tulsi-footer__legal {
	border-top: 1px solid var(--t-border);
	padding-top: 16px;
	font-size: .8125rem;
	color: #6E675B; /* №20: см. замер выше */
}

/* ============================ Хлебные крошки ============================ */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--t-muted);
	font-size: .875rem;
}

.woocommerce-breadcrumb a {
	color: var(--t-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--t-accent-dark);
}

/* ============================ Каталог: шапка и сортировка =============== */

.wp-block-query-title {
	margin-bottom: 4px;
}

.woocommerce-result-count {
	color: var(--t-muted);
	font-size: .875rem;
	margin: 0;
}

.woocommerce-ordering select.orderby {
	min-height: 40px;
	max-width: 100%;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background-color: var(--t-card);
	background-image: var(--t-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	color: var(--t-ink);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 500;
	padding: 8px 36px 8px 16px;
	appearance: none;
	-webkit-appearance: none;
}

.woocommerce-ordering select.orderby:hover {
	border-color: var(--t-accent);
}

/* ============================ Каталог: экран-шапка ======================= */

/* Главная — это каталог: страница «Каталог» стоит и front page, и страницей
   «Магазин» Woo. Поэтому первый экран не отдельная страница, а карточка над
   сеткой (inc/home-intro.php). Полотном на всю ширину не делаем намеренно:
   full-bleed внутри constrained-раскладки держится на отрицательных полях
   и root-padding ядра, а карточка «лён с радиусом» — это ровно та же
   мебель, что и в подвале, и спорить с раскладкой ей не нужно. */

.tulsi-hero {
	margin: 0 0 18px;
	padding: 18px;
	background: var(--t-linen);
	border-radius: var(--t-r-md);
}

/* Своя вилка кегля, а не пресетная xx-large: на 390px заголовок пресетом
   встаёт в четыре строки и уводит первый ряд товаров за нижний край
   экрана. Нижняя граница подобрана так, чтобы строк стало три. */
.tulsi-hero__title {
	max-width: 16em;
	margin: 0;
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem);
}

.tulsi-hero__lead {
	max-width: 42em;
	margin: 10px 0 0;
	color: var(--t-muted);
}

/* Те же УТП, что под кнопкой покупки, но в строку: на карточке они колонкой
   в узкой правой половине, здесь ширина есть.

   Селектор с предком обязателен. `.tulsi-trust` объявлен НИЖЕ по файлу
   (продающий слой карточки), вес у него тот же 0,1,0 — и при ничьей
   выигрывает объявленный позже, то есть он. Медиазапрос веса не добавляет.
   Тот же приём, что и с блоками Woo: утяжелить селектор, а не !important.
   Заодно поэтому цвет шва задаётся здесь, а не отдельным свойством:
   `border-top` там записан сокращённо и цвет всё равно бы сбросился. */
.tulsi-hero .tulsi-trust {
	margin-top: 14px;
	padding-top: 12px;
	gap: 6px;
	border-top: 1px solid var(--t-seam);
}

@media (min-width: 600px) {
	.tulsi-hero {
		margin-bottom: 20px;
		padding: 30px 28px;
	}

	.tulsi-hero__lead {
		margin-top: 12px;
	}

	.tulsi-hero .tulsi-trust {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 28px;
		margin-top: 18px;
		padding-top: 14px;
	}
}

/* Плитки категорий. На корне каталога заменяют ряд чипов: то же шесть
   ссылок, но фотографией. На телефоне — лента с горизонтальной прокруткой
   (как чипы), с 600px — сетка без прокрутки. aspect-ratio держит высоту
   до загрузки картинки, иначе ряд подпрыгивает и CLS уезжает. */

.tulsi-cat-tiles {
	display: flex;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tulsi-cat-tiles::-webkit-scrollbar {
	display: none;
}

.tulsi-cat-tile {
	flex: none;
	width: 120px;
	color: var(--t-ink);
	text-decoration: none;
}

.tulsi-cat-tile__frame {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	overflow: hidden;
	background: var(--t-card);
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-sm);
}

.tulsi-cat-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tulsi-cat-tile__name {
	display: block;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.3;
}

.tulsi-cat-tile:hover .tulsi-cat-tile__frame {
	border-color: var(--t-accent);
}

.tulsi-cat-tile:hover .tulsi-cat-tile__name {
	text-decoration: underline;
}

@media (min-width: 600px) {
	.tulsi-cat-tiles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 16px;
		overflow: visible;
	}

	.tulsi-cat-tile {
		width: auto;
	}
}

/* ============================ Каталог: чипы категорий ==================== */

.tulsi-cat-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 4px 0 16px;
	padding-bottom: 2px;
	scrollbar-width: none;
}

.tulsi-cat-chips::-webkit-scrollbar {
	display: none;
}

.tulsi-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--t-tap);
	padding: 8px 16px;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background: var(--t-card);
	color: var(--t-ink);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.tulsi-chip:hover {
	border-color: var(--t-accent);
	color: var(--t-ink);
}

.tulsi-chip.is-active {
	border-color: var(--t-accent-dark);
	background: var(--t-tint);
	font-weight: 600;
}

/* ============================ Каталог: шторка фильтров =================== */

/* Родные блоки Woo 10.9 (woocommerce/product-filters + product-filter-*) —
   тумблер, оверлей, шапка/подвал шторки, счётчик и живая фильтрация уже
   встроены (Interactivity API), свой JS не нужен. Здесь только перекраска
   и один функциональный сдвиг: у Woo с 601px шторка молча превращается
   в постоянно открытую инлайн-колонку — ровно то, чего просит не делать
   TODO («шторкой снизу, а не колонкой слева»).

   Селекторы Woo — `:where(.wc-block-product-filters) .wc-block-product-filters__x`:
   в :where() завёрнут только предок, у самого класса веса 0,1,0 хватает,
   чтобы сравняться с нашим — а стили блока печатаются инлайн рядом с
   разметкой (не в <head>), то есть физически ПОСЛЕ tulsi.css, и при ничьей
   выигрывают именно они. Лечится тем же приёмом, что и сетка карточек
   выше (0,3,0 у Woo): класс дублируется, 0,2,0 у нас бьёт 0,1,0 у Woo
   при любом порядке печати, без !important. */

.tulsi-catalog-toolbar {
	align-items: center;
	flex-wrap: wrap;
	row-gap: 12px;
	margin-bottom: 16px;
}

.tulsi-toolbar-actions {
	align-items: center;
	gap: 10px;
}

.wc-block-product-filters__open-overlay.wc-block-product-filters__open-overlay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--t-tap);
	padding: 8px 16px;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background: var(--t-card);
	color: var(--t-ink);
	font-size: .875rem;
	font-weight: 500;
}

.wc-block-product-filters__open-overlay.wc-block-product-filters__open-overlay:hover {
	border-color: var(--t-accent);
}

.wc-block-product-filters__open-overlay svg {
	width: 18px;
	height: 18px;
}

.wc-block-product-filters__overlay.wc-block-product-filters__overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: transparent;
	pointer-events: none;
	transition: background-color .3s;
}

.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay.wc-block-product-filters__overlay {
	background-color: rgba(44, 44, 44, .45);
	pointer-events: auto;
}

.wc-block-product-filters__overlay-wrapper.wc-block-product-filters__overlay-wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}

.wc-block-product-filters__overlay-dialog.wc-block-product-filters__overlay-dialog {
	position: absolute;
	inset: 0;
	top: auto;
	max-height: 84vh;
	background-color: var(--t-bg);
	color: var(--t-ink);
	border-radius: 18px 18px 0 0;
	box-shadow: var(--t-shadow-md);
	flex-direction: column;
	transform: translateY(102%);
	transition: none;
}

.wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog.wc-block-product-filters__overlay-dialog {
	transform: translateY(0);
	transition: transform .3s ease;
}

.wc-block-product-filters__overlay-header.wc-block-product-filters__overlay-header {
	display: flex;
	flex-flow: row-reverse;
	align-items: center;
	padding: 14px 20px 0;
}

.wc-block-product-filters__close-overlay.wc-block-product-filters__close-overlay {
	color: var(--t-muted);
	min-height: var(--t-tap);
}

.wc-block-product-filters__overlay-content.wc-block-product-filters__overlay-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;
	overflow-y: auto;
	padding: 8px 20px 20px;
}

.wc-block-product-filters__overlay-footer.wc-block-product-filters__overlay-footer {
	display: flex;
	padding: 14px 20px max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--t-border);
	background: var(--t-bg);
	box-shadow: none;
}

.wc-block-product-filters__apply.wc-block-product-filters__apply {
	min-height: var(--t-tap);
	border-radius: var(--t-r-pill);
	background: var(--t-accent-dark);
	color: var(--t-card);
	border: none;
	font-weight: 600;
	cursor: pointer;
}

@media (min-width: 768px) {
	.wc-block-product-filters__overlay-dialog.wc-block-product-filters__overlay-dialog {
		left: 50%;
		right: auto;
		width: 560px;
		margin-left: -280px;
	}
}

/* Заголовки групп «Цвет» / «Комплектность» внутри шторки. */
.wp-block-woocommerce-product-filter-attribute {
	padding-block: 12px;
	border-bottom: 1px dashed var(--t-seam);
}

.wp-block-woocommerce-product-filter-attribute:last-child {
	border-bottom: none;
}

.wp-block-woocommerce-product-filter-attribute h3.wp-block-heading {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	color: var(--t-ink);
}

.wc-block-product-filter-chips__items.wc-block-product-filter-chips__items {
	gap: 8px;
}

.wc-block-product-filter-chips__item.wc-block-product-filter-chips__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--t-tap);
	padding: 8px 16px;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background: var(--t-card);
	color: var(--t-ink);
	font-size: .875rem;
	font-weight: 500;
}

.wc-block-product-filter-chips__item.wc-block-product-filter-chips__item:hover {
	border-color: var(--t-accent);
}

.wc-block-product-filter-chips__item.wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--t-accent-dark);
	background: var(--t-tint);
	font-weight: 600;
}

/* Активные фильтры съёмными чипами + «Сбросить всё» — верх шторки,
   пусто и без места, пока ничего не выбрано (Woo прячет через hidden). */
.wp-block-woocommerce-product-filter-active {
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--t-seam);
	margin-bottom: 4px;
}

.wc-block-product-filter-removable-chips__item.wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--t-accent-dark);
	border-radius: var(--t-r-pill);
	background: var(--t-tint);
	color: var(--t-ink);
	font-size: .8125rem;
}

.wc-block-product-filter-removable-chips__remove.wc-block-product-filter-removable-chips__remove {
	display: inline-flex;
	color: var(--t-muted);
}

.wp-block-woocommerce-product-filter-clear-button {
	margin-top: 8px;
}

.wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	min-height: 36px;
	padding: 4px 0;
	border: none;
	background: none;
	color: var(--t-muted);
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: underline;
}

.wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover {
	color: var(--t-accent-dark);
}

/* Сортировка живёт внутри тулбара, не в шторке: у неё уже готовый вид
   (.woocommerce-ordering select.orderby выше), драйвер тот же ?orderby=. */
.tulsi-toolbar-actions .woocommerce-ordering {
	margin: 0;
}

/* ============================ Каталог: сетка и карточка ================= */

/* Одна сетка на весь магазин: и витрина, и «похожие товары».
   Приёмка 08.08, №2: у «похожих» ul НЕ обёрнут в
   .wp-block-woocommerce-product-collection — селектор с предком туда
   не достаёт вовсе, и работал флекс WooCommerce
   `.wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li`
   (вес 0,4,1): карточки 20% от узкой колонки, щепки по 44 px.
   Вторая ветка селектора — тот же удвоенный is-flex-container. */
.wp-block-woocommerce-product-collection ul.wc-block-product-template,
ul.wc-block-product-template.is-flex-container.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.wp-block-woocommerce-product-collection ul.wc-block-product-template,
	ul.wc-block-product-template.is-flex-container.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1280px) {
	.wp-block-woocommerce-product-collection ul.wc-block-product-template,
	ul.wc-block-product-template.is-flex-container.is-flex-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template > li.wc-block-product,
ul.wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product {
	width: auto;
	margin: 0;
	padding: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative; /* контейнер оверлея клика — см. правило у картинки */
	background: var(--t-card);
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-md);
	overflow: hidden;
	transition: box-shadow .15s, transform .1s;
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template > li.wc-block-product:hover,
ul.wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product:hover {
	box-shadow: var(--t-shadow-md);
	transform: translateY(-2px);
}

/* Внутренние отступы карточки: у картинки их нет, у текста есть. */
li.wc-block-product > .wp-block-post-title,
li.wc-block-product > .wp-block-woocommerce-product-price {
	padding-inline: 12px;
	margin-block: 0;
}

li.wc-block-product .wc-block-components-product-image {
	margin: 0;
	/* Woo ставит relative под сейл-бейдж (в v1 не используется) — из-за этого
	   оверлей клика ниже растягивался только до картинки, а не до карточки. */
	position: static;
}

li.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Карточка кликабельна целиком, как в принятом превью: ссылка картинки
   растягивается оверлеем на всю карточку (containing block — li выше).
   Внутри карточки перекрывать нечего — свотчи метки, а не органы управления. */
li.wc-block-product .wc-block-components-product-image a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Ряд свотчей под фотографией: отвечает на вопрос «а какие есть цвета»,
   ради которого иначе открывают карточку. Здесь он метка, а не орган
   управления — выбор цвета меняет цену и фото, для этого есть карточка. */
li.wc-block-product .tulsi-dots {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-inline: 12px;
	margin-top: 10px;
	min-height: 20px;
}

.tulsi-dot {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: var(--t-r-pill);
	border: 1px solid var(--t-border);
	object-fit: cover;
}

.tulsi-dots__more {
	font-size: .75rem;
	color: var(--t-muted);
}

/* Имя товара — рабочий шрифт, не засечный: в две строки на 390px
   Playfair превращается в кашу. */
li.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: normal;
	text-align: left;
	margin-top: 12px;
	min-height: 2.8em; /* line-height 1.4 приходит инлайн-стилем из шаблона Woo */
}

/* Обрезка в две строки вешается на ссылку, а не на заголовок: WordPress делает
   ссылку inline-block, и для -webkit-box она становится одним неделимым куском —
   обрезка молча перестаёт работать, имя уезжает в три строки. */
/* Со свотчами сверху имени нужен меньший отступ — иначе три отбивки подряд. */
li.wc-block-product .tulsi-dots + .wp-block-post-title {
	margin-top: 6px;
}

li.wc-block-product .wp-block-post-title > a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

li.wc-block-product .wp-block-woocommerce-product-price {
	text-align: left;
}

li.wc-block-product .wc-block-components-product-price {
	color: var(--t-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

@media (min-width: 768px) {
	li.wc-block-product .wc-block-components-product-price {
		font-size: 1.125rem;
	}
}

/* Кнопки «Выберите параметры» в карточке нет — решение владельца 08.08
   (приёмка №25): карточка целиком кликабельна, кнопка лишь дублировала клик
   по фото и имени, съедала ~50px высоты и вдобавок вылезала за правую рамку
   (content-box обёртка + width:100% + padding-inline). Блок остаётся
   в разметке Product Collection — прячем. */
li.wc-block-product .wp-block-woocommerce-product-button {
	display: none;
}

/* ============================ Карточка товара: галерея ================== */

/* Галерею перестраивает flexslider уже в браузере — поэтому здесь только
   вид кадров и точек, но не раскладка обёртки. Иначе карусель ломается.
   Приёмка 08.08, №18 — CLS 0.13–0.2 на 390 давала сама галерея: пока Woo
   собирает карусель, кадры лежат стопкой (галерея спрятана только инлайновым
   opacity:0, из потока не убрана), первый кадр без собранной обёртки
   раздувается шире экрана, и страница рождается на ~5000 px длиннее,
   а при готовности слайдера схлопывается, утаскивая заголовок и цену.
   Лечится жёстким боксом на время сборки: высота = кадр 3:4 + 72 px
   под ряд миниатюр (ровно высота собранной карусели), лишнее отрезает
   overflow. Гейт — тот самый инлайновый opacity: Woo снимает его в момент,
   когда карусель собрана и размеры посчитаны, — бокс отпадает без сдвига.
   content-box обязателен: при border-box height:0 схлопнул бы и паддинг. */
.woocommerce-product-gallery {
	margin: 0;
}

.woocommerce-product-gallery[style*="opacity: 0"] {
	box-sizing: content-box;
	height: 0;
	padding-top: calc(133.333% + 72px);
	overflow: hidden;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--t-r-md);
	background: var(--t-card);
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--t-r-md);
	border: 1px solid var(--t-border);
	background: var(--t-card);
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: none;
	width: 64px;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--t-r-sm);
	border: 2px solid transparent;
	opacity: 1;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--t-accent-dark);
}

/* Кнопка «увеличить» поверх кадра. */
.woocommerce-product-gallery__trigger {
	border-radius: var(--t-r-pill);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--t-border);
	color: var(--t-ink);
}

/* ============================ Карточка товара: правая колонка =========== */

.single-product .wp-block-post-title {
	margin-bottom: 8px;
}

/* Цена родителя (диапазон) и цена выбранной вариации — один размер. */
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price,
.single-product .woocommerce-variation-price .price {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--t-ink);
}

/* Краткое описание на карточке скрыто намеренно. У товаров нет своего
   post_excerpt (импорт его не заполняет), поэтому WordPress режет его из
   описания — и страница дважды подряд говорит одно и то же: сначала «кратким»
   описанием у цены, потом полным во вкладке. Вернуть, когда в выгрузке
   появится настоящее короткое описание — пункт в TODO. */
.single-product .wp-block-post-excerpt {
	display: none;
}

.wp-block-woocommerce-product-meta {
	color: var(--t-muted);
	font-size: .8125rem;
	border-top: 1px solid var(--t-border);
	padding-top: 12px;
	margin-top: 16px;
}

/* ============================ Форма покупки ============================= */

/* Цвет выбирается фотографией ткани, остальные оси — чипами. Кнопки рисует
   PHP рядом со штатным <select> (theme/tulsi/inc/swatches.php), список
   остаётся в форме и остаётся источником правды. Рамка вокруг — эта. */
.variations_form table.variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-collapse: collapse;
}

.variations_form table.variations tbody,
.variations_form table.variations tr,
.variations_form table.variations th,
.variations_form table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	text-align: left;
}

.variations_form table.variations th.label {
	padding: 12px 0 6px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--t-ink);
}

.variations_form table.variations th.label label {
	font-weight: 600;
}

.variations_form select {
	width: 100%;
	min-height: var(--t-tap);
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-md);
	background-color: var(--t-card);
	background-image: var(--t-chevron);
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--t-ink);
	font-family: inherit;
	font-size: 1rem;
	padding: 10px 40px 10px 14px;
	appearance: none;
	-webkit-appearance: none;
}

.variations_form select:hover {
	border-color: var(--t-accent);
}

/* Цвет — глубокий акцент: #5C8060 на белом давал 4.46:1, ниже AA (№20). */
.variations_form .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: .875rem;
	color: var(--t-accent-deep);
}

/* ---- Свотчи и чипы вместо списка --------------------------------------

   Кнопки видимы сразу с сервера, список скрыт сразу (приёмка 08.08, №18):
   прежняя подмена «44-пиксельный select → два-три ряда кнопок» на готовность
   скрипта двигала страницу под пальцем — CLS 0.134 на 390. Страницу без JS
   спасает noscript в inc/swatches.php: он прячет кнопки и возвращает список.
   Выбранный дефолт подсвечен тоже с сервера (aria-pressed из PHP). */

.tulsi-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

/* Селектор тяжёлый не для красоты: список показывает правило WooCommerce
   `.woocommerce div.product form.cart .variations select` весом 0,4,3,
   и всё, что легче, молча проигрывает — список остаётся под свотчами. */
.woocommerce div.product form.cart td.value > select {
	display: none;
}

/* Страховка от упавшего скрипта (не то же, что выключенный JS): если
   tulsi-variations.js не отчитался классом .tulsi-opts-ready за 3 секунды,
   инлайн-вотчдог из inc/swatches.php вешает .tulsi-opts-fallback — селект
   возвращается, мёртвые кнопки прячутся, товар остаётся покупаемым. */
.woocommerce div.product form.cart.tulsi-opts-fallback td.value > select {
	display: block;
}

.variations_form.tulsi-opts-fallback .tulsi-opts {
	display: none;
}

/* «Цвет · Шоколадный» — подпись выбранного значения рядом с названием оси:
   у свотча своего текста нет, а знать, что выбрано, нужно. */
.tulsi-opts__chosen:not(:empty) {
	font-weight: 400;
	color: var(--t-muted);
}

.tulsi-opts__chosen:not(:empty)::before {
	content: " · ";
}

.tulsi-opt {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, background .15s;
}

/* Невозможная комбинация исчезает, а не гаснет. Атрибут hidden сам по себе
   тут не сработает: у кнопок задан display, и он его перебивает. */
.tulsi-opt[hidden] {
	display: none;
}

/* Свотч — фото ткани, а не цветной кружок: ходовые цвета есть и в велюре,
   и в оксфорде, кружок соврал бы. Разбор — docs/REFERENCES.md. */
.tulsi-opt--swatch {
	width: var(--t-tap);
	height: var(--t-tap);
	border: 2px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background: var(--t-linen);
	overflow: hidden;
	line-height: 0;
}

.tulsi-opt--swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.tulsi-opt--swatch:hover {
	border-color: var(--t-accent);
}

/* Выбранный — тёмная рамка плюс волосяной просвет: на тёмных тканях
   одна рамка сливается с самой тканью. */
.tulsi-opt--swatch[aria-pressed="true"] {
	border-color: var(--t-accent-dark);
	box-shadow: 0 0 0 2px var(--t-card) inset;
}

.tulsi-opt--chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--t-tap);
	padding: 8px 16px;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-pill);
	background: var(--t-card);
	color: var(--t-ink);
	font-size: .875rem;
	font-weight: 500;
}

.tulsi-opt--chip:hover {
	border-color: var(--t-accent);
}

.tulsi-opt--chip[aria-pressed="true"] {
	border-color: var(--t-accent-dark);
	background: var(--t-tint);
	font-weight: 600;
}

/* Значение есть, но купить нельзя — нет на складе. */
.tulsi-opt[aria-disabled="true"] {
	opacity: .35;
	cursor: not-allowed;
}

.woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.woocommerce-variation-add-to-cart .quantity {
	flex: none;
}

.quantity input.qty {
	width: 84px;
	min-height: 52px;
	text-align: center;
	border: 1px solid var(--t-border);
	border-radius: var(--t-r-md);
	background: var(--t-card);
	color: var(--t-ink);
	font-family: inherit;
	font-size: 1rem;
}

.single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 52px;
	font-size: 1.0625rem;
}

/* Woo гасит кнопку до выбора всех осей — покажем это честно. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
	opacity: .45;
	cursor: not-allowed;
}

/* №18: цену вариации дорисовывает скрипт — без резерва блок появлялся
   рывком и двигал кнопку. 44 px — строка цены 1.75rem с запасом. */
.woocommerce-variation.single_variation {
	margin-bottom: 8px;
	min-height: 44px;
}

/* №30: у товара, где на каждой оси одно значение, «Очистить» не показываем —
   класс ставит tulsi-variations.js, разбор там же. */
.variations_form.tulsi-forced .reset_variations {
	display: none;
}

/* ============================ Вкладки =================================== */

/* Вкладки — единственное место, где пришлось лезть в вес селекторов.
   WooCommerce красит их дважды: классическим CSS («уголки папок» с тенями)
   и стилем блока is-style-minimal, у которого селекторы вида
   `html body .wp-block-…-product-details.is-style-minimal ul.tabs.wc-tabs li`
   весом 0,4,4. Оттуда же берётся вертикальная полоска слева у активной вкладки
   и приглушение неактивных до opacity .65. Поэтому префикс здесь такой же
   тяжёлый, а свойства выставлены явно, а не «дополняют» чужие. */
html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border: 0;
	border-bottom: 1px solid var(--t-border);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs::before,
html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs::after,
html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::before,
html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::after {
	display: none;
	content: none;
}

html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	flex: none;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
}

html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
	display: block;
	padding: 12px 14px;
	min-height: var(--t-tap);
	color: var(--t-muted);
	font-weight: 600;
	font-size: 1rem;
	border: 0;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}

html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active a,
html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a:hover {
	color: var(--t-accent-deep);
	text-decoration: none;
}

html body .woocommerce .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active a {
	border-bottom-color: var(--t-accent-dark);
}

.woocommerce-Tabs-panel {
	max-width: 70ch;
}

/* Заголовок «Описание» дублирует подпись вкладки. */
.woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.woocommerce-Tabs-panel p {
	margin-bottom: 12px;
}

/* Таблица характеристик. */
table.woocommerce-product-attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: .9375rem;
}

table.woocommerce-product-attributes th,
table.woocommerce-product-attributes td {
	text-align: left;
	padding: 8px 12px 8px 0;
	border: 0;
	border-bottom: 1px solid var(--t-border);
	background: transparent;
}

table.woocommerce-product-attributes th {
	color: var(--t-muted);
	font-weight: 500;
	width: 40%;
}

table.woocommerce-product-attributes p {
	margin: 0;
}

/* ============================ Уведомления =============================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--t-r-md);
	border: 1px solid var(--t-border);
	background: var(--t-linen);
	color: var(--t-ink);
}

.woocommerce-message {
	border-left: 4px solid var(--t-accent-dark);
}

/* ============================ Продающий слой карточки (№13) ============= */

/* «Без наценки маркетплейса» — под ценой, зелёным. */
.tulsi-direct {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: .875rem;
	font-weight: 500;
	color: var(--t-accent-deep);
}

.tulsi-usp__icon {
	flex: none;
	margin-top: 1px;
}

/* УТП-строки под кнопкой покупки. */
.tulsi-trust {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 16px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--t-border);
	font-size: .875rem;
	color: var(--t-ink);
}

.tulsi-trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.tulsi-trust .tulsi-usp__icon {
	color: var(--t-accent-dark);
}

/* Плашка «Не уверены в размере?». */
.tulsi-consult {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--t-linen);
	border-radius: var(--t-r-md);
	font-size: .875rem;
}

.tulsi-consult p {
	flex: 1 1 200px;
	margin: 0;
}

.tulsi-consult .tulsi-usp__icon {
	flex: none;
	color: var(--t-accent-dark);
}

.tulsi-consult__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	border: 1px solid var(--t-accent-dark);
	border-radius: var(--t-r-pill);
	color: var(--t-accent-deep);
	font-weight: 600;
}

.tulsi-consult__btn:hover {
	background: var(--t-tint);
	text-decoration: none;
}

/* ============================ Липкая полоса покупки (№14) =============== */

/* Разметка — inc/product-page.php, показ — tulsi-sticky.js: полоса
   появляется, когда настоящая кнопка ушла за верх экрана. Как в превью,
   на десктопе её нет — форма и так на экране. */
.tulsi-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px clamp(16px, 4vw, 32px);
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--t-bg);
	border-top: 1px solid var(--t-border);
	box-shadow: 0 -6px 20px rgba(44, 44, 44, .08);
}

.tulsi-sticky[hidden] {
	display: none;
}

.tulsi-sticky__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.tulsi-sticky__price {
	font-weight: 600;
	font-size: 1.0625rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tulsi-sticky__variant {
	font-size: .75rem;
	color: var(--t-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tulsi-sticky__btn {
	flex: none;
	min-height: var(--t-tap);
	padding: 10px 22px;
}

.tulsi-sticky__btn.is-disabled {
	opacity: .45;
}

/* Полоса не должна накрывать последние строки страницы. */
body.tulsi-sticky-open {
	padding-bottom: 76px;
}

@media (min-width: 1280px) {
	.tulsi-sticky {
		display: none;
	}

	body.tulsi-sticky-open {
		padding-bottom: 0;
	}
}

/* ============================ Мелочи ==================================== */

/* «Похожие товары» и прочие заголовки секций. */
.wp-block-woocommerce-product-collection > h2.wp-block-heading {
	margin-bottom: 12px;
}

/* №21: Related Products рисует заголовок голым h2 рядом с ul, без обёртки
   коллекции, и пресет Woo давал ему 14 px — мельче имён товаров под ним.
   :has привязывает правило ровно к этому соседству, чужие h2 не трогая. */
h2.wp-block-heading:has(+ ul.wc-block-product-template) {
	font-size: var(--wp--preset--font-size--x-large);
}

/* №19: тап-цели пагинации каталога — не меньше 44 px. */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--t-tap);
	min-height: var(--t-tap);
	padding: 4px 10px;
	border-radius: var(--t-r-sm);
}

/* №30: кольцо фокуса — только с клавиатуры. theme.json умеет лишь :focus,
   и кольцо рисовалось при каждом клике мышью. */
.wp-element-button:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}