/* ЯрСтрой — категория товаров. Стиль «Шикарный ЯрСтрой»: тёмные панели,
   красный акцент, Manrope + JetBrains Mono. Всё под префиксом .ycd- —
   не должно затекать в остальную тему и наоборот. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* Woodmart резервирует колонку CSS-грида под свой сайдбар (даже если тот
   нигде не выводится) — растягиваем контентную колонку на всю ширину
   ТОЛЬКО на наших активных страницах (см. Assets::body_class()). Найдено
   на боевой странице: без этого .ycd-page ужимался до ~886px из 1222px
   с пустой областью справа. */
body.yarop-cd-full-width .wd-content-area.site-content,
body.yarop-cd-full-width .wd-content-area.wd-grid-col {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: none !important;
}

/* Тема резервирует 40px сверху над всем контентом архива (обычно — место
   под её собственный заголовок/крошки, которые мы всё равно не используем,
   см. .ycd-page ниже) — на боевом сайте это давало непропорционально
   большой отступ от шапки до хлебных крошек (64px = эти 40px + ещё 24px
   padding-top у .ycd-page), заметно больше, чем отступ от крошек до
   самого блока категории (16px). Убираем именно на наших активных
   категориях (тот же body-класс) — не трогаем отступ темы на остальных
   страницах сайта. */
body.yarop-cd-full-width main.wd-content-layout { padding-top: 0 !important; }

/* Тема сама выводит описание категории ЕЩЁ РАЗ — своим нативным блоком
   `.wd-term-desc` (судя по всему, тот же самый Woodmart-виджет «Extra
   description», см. yarop_cd_get_term_extra_description() — совпадает и
   текст) — ниже сетки товаров, ПОСЛЕ всего нашего `.ycd-page`. Раз мы уже
   показываем этот же текст сами (yarop_cd_render_description(), с 0.15.0 —
   в блоке под сеткой с усечением/«Читать полностью»), нативный блок темы —
   чистый дубль. Скрываем его только на НАШИХ активных категориях (тот же
   body-класс, что и выше) — на остальных категориях сайта, где наш шаблон
   не используется, блок темы остаётся как есть. */
body.yarop-cd-full-width .wd-term-desc { display: none !important; }

/* Переменные — на :root, а НЕ на .ycd-page: модалка быстрого просмотра и
   тосты рендерятся как СОСЕДИ .ycd-page (после её закрывающего </div> в
   шаблоне), а не как её потомки, — переменные, объявленные только на
   .ycd-page, до них попросту не доходят (CSS custom properties
   наследуются по DOM-дереву). Из-за этого на боевом сайте фото и часть
   текста в модалке быстрого просмотра выходили пустыми/неокрашенными
   (var(--ycd-panel) и т.п. резолвились в ничто). */
:root {
	--ycd-bg: #242424;
	--ycd-panel: #1b1b1b;
	--ycd-border: #343434;
	--ycd-muted: #8f8f8f;
	--ycd-muted-2: #6e6e6e;
	--ycd-text: #f8f8f8;
	--ycd-text-2: #eaeaea;
	--ycd-brand: #d1373b;
	--ycd-brand-hover: #c93841;
	--ycd-brand-light: #ff525c;
	--ycd-clay: #8a5f37;
	/* Базовый размер основного текста для чтения — 16px (по просьбе
	   заказчика). Все остальные font-size в этом файле выражены через
	   calc(var(--ycd-fs-base) * коэффициент), а не голым px — так при
	   изменении базового размера пропорции всего плагина пересчитаются
	   сами, а не разъедутся. Значения коэффициентов подобраны так, чтобы
	   СЕЙЧАС (при базе 16px) визуально ничего не изменилось — это перевод
	   существующих размеров на относительную систему, а не редизайн. */
	--ycd-fs-base: 16px;
}

.ycd-page {
	font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
	color: var(--ycd-text);
	max-width: 1280px;
	margin: 0 auto;
	/* 16px сверху — теперь (после обнуления padding-top темы выше) ровно
	   совпадает с отступом «крошки → блок категории» (margin-bottom
	   крошек, тоже 16px), по просьбе заказчика. 24px снизу — просто
	   аккуратный отступ-заглушка на случай, если .ycd-description ничего
	   не выведет (оба текста для неё пустые) — обычно реальный отступ до
	   подвала обеспечивает margin-bottom самого блока описания, см. ниже
	   в файле (он не всегда является последним потомком именно ЭТОГО
	   контейнера — см. комментарий там про невалидный HTML темы). */
	padding: 16px 16px 24px;
	font-size: calc(var(--ycd-fs-base) * 1);
	line-height: 1.5;
}
.ycd-page * { box-sizing: border-box; }
.ycd-num { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ycd-page a { color: inherit; text-decoration: none; }

/* Модалка живёт вне .ycd-page — задаём ей те же базовые правила отдельно. */
.ycd-modal {
	font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
	color: var(--ycd-text);
	font-size: calc(var(--ycd-fs-base) * 1);
	line-height: 1.5;
}
.ycd-modal * { box-sizing: border-box; }
.ycd-modal a { color: inherit; text-decoration: none; }

/* Тема применяет к заголовкам/тексту сайта общую скролл-анимацию появления
   (opacity:0 → 1 по IntersectionObserver) — сработавшую на боевом сайте на
   наших собственных заголовках И числах/подписях в дашборде (тоже бледные
   навсегда — её JS-триггер, судя по всему, не подхватывает наши элементы).
   Первая попытка (только h1-h4/p/li) не покрыла <span> с цифрами в
   дашборде — расширяем до ВСЕХ потомков статичных секций, где у плагина
   самого нет ни одной намеренной opacity-анимации (герой, подкатегории,
   описание, дашборд). Модалку/подсказку/кнопку «Быстрый просмотр» — где
   opacity-переходы НАШИ и осмысленные — сюда специально не включаем. */
.ycd-page h1, .ycd-page h2, .ycd-page h3, .ycd-page h4, .ycd-page p, .ycd-page li,
.ycd-breadcrumbs, .ycd-breadcrumbs *,
.ycd-hero, .ycd-hero *,
.ycd-subcats, .ycd-subcats *,
.ycd-description, .ycd-description *,
.ycd-modal h1, .ycd-modal h2, .ycd-modal h3, .ycd-modal h4, .ycd-modal p {
	opacity: 1 !important;
	transform: none !important;
}

/* ВТОРАЯ, отдельная от анимации выше, причина «тёмного нечитаемого
   текста»: у Woodmart есть глобальное правило вида
   `h1,h2,h3,h4,h5,h6{color:var(--wd-title-color)}` (тёмный, рассчитан на
   светлые карточки самой темы) — оно побеждает ЛЮБОЕ наследование цвета,
   даже без !important: унаследованное значение specificity не имеет и
   проигрывает первому же явному правилу на элементе. Та же болячка уже
   встречалась и была исправлена на карточке товара этого сайта тем же
   способом — свой явный цвет с бОльшей specificity, чем голый `h1`..`h6`. */
.ycd-page h1, .ycd-page h2, .ycd-page h3, .ycd-page h4, .ycd-page h5, .ycd-page h6,
.ycd-modal h1, .ycd-modal h2, .ycd-modal h3, .ycd-modal h4 {
	color: var(--ycd-text);
}

/* Тема (Woodmart) жёстко стилизует ЛЮБОЙ <button> своим селектором выше
   по specificity/порядку — сбрасываем это принудительно один раз здесь,
   конкретные классы ниже задают нужный вид (тоже с !important, иначе
   тема продолжит выигрывать). Тот же приём уже применялся в карточке
   товара этого проекта (yarstroy-catalog-display) для этой же темы.
   :where() — специально с НУЛЕВОЙ специфичностью (эквивалент голого
   `button`, 0,0,1), иначе этот сброс (будучи 0,1,1) сам перебивал бы
   !important-цвета конкретных кнопок ниже (.ycd-btn--primary и т.п.,
   у них только 0,1,0) — что и происходило на боевом сайте: «В корзину»
   оставалась без фона, просто текст без кнопки. */
:where(.ycd-page, .ycd-modal) button {
	font-family: inherit !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	color: inherit !important;
	box-shadow: none !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0;
	line-height: normal;
}

.ycd-link-btn { padding: 0 !important; color: var(--ycd-brand-light) !important; font-weight: 600; font-size: calc(var(--ycd-fs-base) * 0.875); cursor: pointer; }
.ycd-link-btn:hover { text-decoration: underline; }

/* .ycd-btn--primary дважды в селекторе — намеренный трюк повышения
   specificity (0,2,0 вместо 0,1,0): у темы иногда встречаются конфликтующие
   правила той же специфичности, и при равенстве спецификации с обеих
   сторон !important побеждает более ранний/поздний по порядку подключения
   файл, что на боевом сайте оказывалось не в нашу пользу (кнопки
   оставались пустыми/обрамлёнными вместо залитых). */
.ycd-btn.ycd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px !important; font-weight: 700; font-size: calc(var(--ycd-fs-base) * 0.875); padding: 10px 20px !important; border: 2px solid transparent !important; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.ycd-btn.ycd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.ycd-btn--primary.ycd-btn--primary { background: var(--ycd-brand) !important; color: #fff !important; border-color: var(--ycd-brand) !important; }
.ycd-btn--primary.ycd-btn--primary:hover { background: var(--ycd-brand-hover) !important; border-color: var(--ycd-brand-hover) !important; }
.ycd-btn--ghost.ycd-btn--ghost { background: transparent !important; border-color: var(--ycd-muted-2) !important; color: var(--ycd-text-2) !important; }
.ycd-btn--ghost.ycd-btn--ghost:hover { border-color: var(--ycd-brand-light) !important; color: var(--ycd-brand-light) !important; }

/* ---- Хлебные крошки ---- по просьбе заказчика — полностью те же, что и
   на странице товара: раньше здесь вызывался rank_math_the_breadcrumbs()
   (своя разметка/стиль Rank Math), теперь — штатная woocommerce_breadcrumb()
   (см. yarop_cd_render_breadcrumbs()), которую тема Woodmart стилизует
   сайтшироко классами .wd-breadcrumbs/.woocommerce-breadcrumb/.wd-delimiter/
   .wd-last — та же функция и разметка, что и на странице товара, поэтому
   базовый вид (серые ссылки, "/" разделитель) подхватывается автоматически
   без единой нашей строчки CSS. Единственное, что подхватить неоткуда —
   красный акцент на текущем пункте: на странице товара это ОТДЕЛЬНАЯ
   настройка темы, работающая только при `body.single-product` (проверено
   инспекцией живой страницы: `.single-product .wd-breadcrumbs .wd-last`,
   заданная точечно для этого шаблона в customizer'е темы) — на архиве
   категории этот класс `body` не появляется, поэтому эффект повторён явно
   здесь тем же значением цвета. */
.ycd-breadcrumbs { margin-bottom: 16px; }
/* Наш же общий сброс `.ycd-page a{color:inherit}` (выше в файле) сильнее
   голого `a{color:var(--wd-link-color)}` темы — без явного цвета здесь
   ссылки крошек стали бы обычным белым текстом вместо приглушённо-серого,
   как на странице товара. */
.ycd-breadcrumbs .wd-breadcrumbs a { color: rgb(118, 118, 118); }
.ycd-breadcrumbs .wd-breadcrumbs a:hover,
.ycd-breadcrumbs .wd-breadcrumbs .wd-last { color: rgb(228, 29, 50); font-weight: 400; }

/* ---- Hero ---- */
.ycd-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: var(--ycd-panel); border: 1px solid var(--ycd-border); border-radius: 16px; padding: 28px; }
.ycd-hero__main { flex: 1 1 320px; min-width: 0; }
.ycd-hero__title { font-size: calc(var(--ycd-fs-base) * 1.875); font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ycd-text); }
/* Поле темы Woodmart «Extra description» (см. yarop_cd_get_term_extra_description()). */
/* Реальное описание категории — теперь тут (раньше здесь была Extra
   description темы, а term.description жила внизу под сеткой; поменяли
   местами по просьбе заказчика, см. yarop_cd_render_hero()/
   yarop_cd_render_description()). Размер — базовый читаемый (16px, п.6). */
.ycd-hero__description { color: var(--ycd-text-2); font-size: var(--ycd-fs-base); line-height: 1.6; margin-top: 4px; }
.ycd-hero__description p { margin: 0 0 10px; }
.ycd-hero__description p:last-child { margin-bottom: 0; }
.ycd-hero__description a { color: var(--ycd-brand-light); text-decoration: underline; }
.ycd-hero__image { flex-shrink: 0; width: 180px; }
.ycd-hero__img { width: 100%; height: auto; aspect-ratio: 0.75; object-fit: cover; border-radius: 12px; display: block; }

/* Дашборд «в цифрах» — перенесён внутрь героя (был отдельной секцией
   ниже). Заголовок секции («Аналитика каталога») убран по просьбе
   заказчика — оставлен только «[Категория] в цифрах», выделен красным. */
.ycd-hero__stats { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ycd-border); }
/* !important: без него проигрывает по specificity общему правилу
   `.ycd-page h2 { color: var(--ycd-text) }` выше (0,1,1 против 0,1,0
   у голого класса) — тут, в отличие от .ycd-hero__title, цвета
   различаются (красный акцент, а не обычный белый текст), поэтому
   конфликт был бы виден. */
.ycd-hero__stats-title { font-size: calc(var(--ycd-fs-base) * 0.9375); font-weight: 800; margin: 0 0 12px; color: var(--ycd-brand-light) !important; }

/* ---- Подкатегории ---- */
/* Компактный вид (было — крупная сетка 2×N/4×N с высокими портретными
   фото, занимала много места) — по просьбе заказчика: одна горизонтально
   прокручиваемая строка небольших плиток с более короткими (не портретными)
   фото. Без JS-карусели — нативный скролл + scroll-snap достаточно и легче. */
.ycd-subcats { margin-top: 24px; }
.ycd-subcats__grid {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--ycd-border) transparent;
}
.ycd-subcats__grid::-webkit-scrollbar { height: 6px; }
.ycd-subcats__grid::-webkit-scrollbar-thumb { background: var(--ycd-border); border-radius: 999px; }
/* Hover — тот же паттерн, что и карточки «Галерея объектов»
   (yarstroy-objects-gallery/assets/css/objects-gallery.css, .yog-card):
   подъём + красная рамка + тень на карточке, масштаб фото, красный
   заголовок — по прямой просьбе заказчика, взяты те же тайминги/значения. */
.ycd-subcat-tile {
	flex: 0 0 140px;
	scroll-snap-align: start;
	display: block;
	border: 1px solid var(--ycd-border);
	border-radius: 12px;
	background: var(--ycd-panel);
	overflow: hidden;
	position: relative;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
	will-change: transform;
}
.ycd-subcat-tile:hover { transform: translateY(-4px); border-color: var(--ycd-brand-light); box-shadow: 0 14px 32px rgba(0,0,0,.5); }
.ycd-subcat-tile__img { display: block; aspect-ratio: 1.15; background: var(--ycd-bg); overflow: hidden; }
.ycd-subcat-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ycd-subcat-tile:hover .ycd-subcat-tile__img img { transform: scale(1.06); }
.ycd-subcat-tile__body { display: block; padding: 10px 11px; }
/* Цвет ЯВНО (не унаследован от <a>) — Woodmart форсит на hover ссылок
   свой тёмный `a:hover{color}`, а .ycd-subcat-tile__name/​__count — голые
   <span> без своего цвета, так что при наведении утаскивали тёмный цвет
   родителя по наследованию (нечитаемый текст на тёмном фоне). */
.ycd-subcat-tile__name { display: block; font-weight: 700; font-size: calc(var(--ycd-fs-base) * 0.8125); line-height: 1.3; color: var(--ycd-text); transition: color .16s ease; }
.ycd-subcat-tile:hover .ycd-subcat-tile__name { color: var(--ycd-brand-light); }
.ycd-subcat-tile__count { display: block; font-size: calc(var(--ycd-fs-base) * 0.6875); color: var(--ycd-muted); margin-top: 2px; }

/* ---- Layout: сайдбар + контент ---- */
.ycd-layout { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; align-items: start; }
@media (min-width: 1024px) { .ycd-layout { grid-template-columns: 280px 1fr; } }

/* Раньше на десктопе был position:sticky + max-height + overflow-y:auto —
   своя внутренняя прокрутка внутри сайдбара, отдельная от прокрутки
   страницы (и заодно обрезавшая всплывающие подсказки, выходящие за
   границы блока). На мобильном раньше был отдельный офканвас (position:
   fixed на весь экран + кнопка «Фильтры» + затемнение) — по просьбе
   заказчика убран целиком («блокировал экран»): сайдбар теперь простой
   блок в потоке страницы НА ЛЮБОЙ ширине экрана — на мобильном/планшете
   он просто встаёт над сеткой товаров (т.к. .ycd-layout ниже 1024px —
   одна колонка). */
.ycd-filters { border: 1px solid var(--ycd-border); background: var(--ycd-panel); border-radius: 16px; padding: 20px; }
.ycd-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ycd-filters__head h2 { margin: 0; font-size: calc(var(--ycd-fs-base) * 1); font-weight: 800; }
.ycd-filters__head-actions { display: flex; align-items: center; gap: 12px; }

.ycd-acc-group { border-bottom: 1px solid var(--ycd-border); padding-bottom: 16px; margin-bottom: 16px; }
.ycd-acc-group:last-child { border-bottom: none; }
.ycd-acc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 !important; font-weight: 700; font-size: calc(var(--ycd-fs-base) * 0.875); color: var(--ycd-text-2) !important; cursor: pointer; margin-bottom: 4px; }
.ycd-chev { width: 16px; height: 16px; color: var(--ycd-muted); flex-shrink: 0; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.ycd-acc-toggle[aria-expanded="true"] .ycd-chev { transform: rotate(180deg); }
.ycd-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.ycd-acc-body.is-open { grid-template-rows: 1fr; }
.ycd-acc-body > div { overflow: hidden; padding-top: 4px; }

/* Свотчи фильтра — 3 стиля, скоуп на .ycd-acc-group[data-skin] */
.ycd-filter-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ycd-filter-opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ycd-filter-opt__swatch { width: 28px; height: 28px; border-radius: 999px; background: var(--ycd-muted-2); border: 1px solid rgba(255,255,255,.15); flex-shrink: 0; transition: transform .12s ease, box-shadow .12s ease; }
/* Реальный цвет термина не найден (см. yarop_cd_get_term_swatch()) — нейтральная штриховка вместо случайного цвета, чтобы не выглядело как «неправильный» цвет. */
.ycd-filter-opt--no-color .ycd-filter-opt__swatch { background: repeating-linear-gradient(45deg, var(--ycd-muted-2) 0 4px, var(--ycd-panel) 4px 8px); }
.ycd-filter-opt:hover .ycd-filter-opt__swatch { transform: scale(1.1); }
.ycd-filter-opt.is-active .ycd-filter-opt__swatch { box-shadow: 0 0 0 2px var(--ycd-panel), 0 0 0 4px var(--ycd-brand); }
.ycd-filter-opt.ycd-is-suggested .ycd-filter-opt__swatch { box-shadow: 0 0 0 2px var(--ycd-brand-light); }
.ycd-filter-opt__text { display: none; }
/* Значение не влияет на список товаров при уже применённых остальных
   фильтрах (все показанные товары и так им обладают, либо ни один) —
   по просьбе заказчика делаем некликабельным и визуально приглушённым,
   а не просто скрываем: пользователю полезно видеть, что вариант вообще
   существует. */
.ycd-filter-opt--inactive { cursor: default; opacity: .35; pointer-events: none; }

.ycd-acc-group[data-skin="list"] .ycd-filter-swatches { flex-direction: column; gap: 0; }
.ycd-acc-group[data-skin="list"] .ycd-filter-opt { display: flex; width: 100%; padding: 6px 0; }
.ycd-acc-group[data-skin="list"] .ycd-filter-opt__swatch { width: 18px; height: 18px; }
.ycd-acc-group[data-skin="list"] .ycd-filter-opt__text { display: flex; flex: 1; align-items: center; justify-content: space-between; font-size: calc(var(--ycd-fs-base) * 0.8125); color: var(--ycd-text-2); }
.ycd-acc-group[data-skin="list"] .ycd-filter-opt.is-active .ycd-filter-opt__name { color: var(--ycd-brand-light); font-weight: 700; }
.ycd-acc-group[data-skin="list"] .ycd-filter-opt__count { color: var(--ycd-muted); }

.ycd-acc-group[data-skin="tiles"] .ycd-filter-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt { flex-direction: column; text-align: center; gap: 6px; }
/* height:auto — без него побеждал старый .ycd-filter-opt__swatch{height:28px}
   (базовое правило для «Компакт»-скина, circle-дот) — у него ТА ЖЕ
   специфичность, что мешает aspect-ratio:1 отвечать за высоту: aspect-ratio
   не переопределяет уже явно заданную height, а лишь ВЫЧИСЛЯЕТ недостающее
   измерение. В итоге плитка была не квадратом, а низкой широкой «таблеткой»
   (ширина колонки ×28px) — отсюда и слишком круглые для «квадратной плитки»
   углы при border-radius:14px. */
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt__swatch { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; }
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt__text { display: block; }
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt__name { font-size: calc(var(--ycd-fs-base) * 0.6875); color: var(--ycd-muted); display: block; }
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt__count { display: none; }
.ycd-acc-group[data-skin="tiles"] .ycd-filter-opt.is-active .ycd-filter-opt__name { color: var(--ycd-brand-light); font-weight: 700; }
.ycd-acc-group[data-skin="tiles"] .ycd-acc-body { grid-template-rows: 1fr !important; }
/* overflow:visible — у крайних (первой/последней в ряду) плиток при
   наведении (transform:scale(1.1), см. .ycd-filter-opt:hover выше) левый/
   правый край рос ровно в НУЛЕВОЙ отступ до края родителя `.ycd-acc-body >
   div` (у него overflow:hidden — нужен для анимации сворачивания
   аккордеона в остальных скинах) и обрезался плоско по границе. Плитки
   в этом скине аккордеон никогда не сворачивают (строка выше уже держит
   grid-template-rows:1fr всегда) — clip тут ничего не «доанимировает»,
   можно спокойно вернуть overflow:visible. */
.ycd-acc-group[data-skin="tiles"] .ycd-acc-body > div { overflow: visible; }
.ycd-acc-group[data-skin="tiles"] .ycd-chev { display: none; }

/* Функциональная нагрузка */
.ycd-load-title { display: inline-flex; align-items: center; gap: 8px; }
.ycd-load-badge { display: inline-flex; align-items: center; background: #46232a; color: var(--ycd-brand-light); font-size: calc(var(--ycd-fs-base) * 0.625); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.ycd-load-list { display: flex; flex-direction: column; gap: 8px; }
/* position:relative — сам ряд теперь и есть контейнер подсказки (значок
   «?» убран по просьбе заказчика: подсказка всплывает просто по наведению
   на ряд). */
.ycd-load-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* flex-basis:100% — переносит текст на отдельную строку ПОД иконкой+
   подписью (та же техника, что и у .ycd-card__total-meta), а не сжимает
   его в оставшееся место в той же строке. margin-left — выравнивание по
   левому краю подписи (40px иконка + 10px внутренний gap .ycd-load-opt). */
.ycd-load-no-match { flex-basis: 100%; margin: 0 0 0 50px; font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-brand-light); }
.ycd-load-opt { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 2px; border-radius: 12px; cursor: pointer; min-width: 0; transition: background-color .18s ease; }
.ycd-load-opt:hover { background: var(--ycd-bg); }
.ycd-load-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ycd-load-opt__icon { width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--ycd-bg); border: 2px solid var(--ycd-border); color: var(--ycd-muted); transition: background-color .2s cubic-bezier(.4,0,.2,1), border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.4,0,.2,1); }
.ycd-load-opt:hover .ycd-load-opt__icon { border-color: var(--ycd-muted-2); color: var(--ycd-text-2); }
.ycd-load-opt__icon svg { width: 21px; height: 21px; position: absolute; transition: opacity .18s ease, transform .18s ease; }
.ycd-load-opt__icon .icon-check { opacity: 0; transform: scale(.4) rotate(-20deg); }
.ycd-load-checkbox:checked ~ .ycd-load-opt__icon { background: var(--ycd-brand); border-color: var(--ycd-brand); color: #fff; transform: scale(1.06); }
.ycd-load-checkbox:checked ~ .ycd-load-opt__icon .icon-default { opacity: 0; transform: scale(.6) rotate(20deg); }
.ycd-load-checkbox:checked ~ .ycd-load-opt__icon .icon-check { opacity: 1; transform: none; }
.ycd-load-opt__label { font-size: calc(var(--ycd-fs-base) * 0.875); font-weight: 600; color: var(--ycd-text-2); }

/* position:fixed (а не absolute) + портал в <body> через JS
   (category-display.js, initLoadTooltips()) — у первого варианта нагрузки
   подсказка всплывает вверх и обрезалась родителем `.ycd-acc-body > div`
   (у него overflow:hidden — нужен для анимации сворачивания аккордеона,
   см. комментарий у .ycd-acc-body ниже); для 2-го/3-го вариантов подсказка
   умещалась внутри той же обёртки и не обрезалась, поэтому баг был виден
   только на первом варианте. Позиция (top/left/width) считается в JS по
   getBoundingClientRect() своего ряда — так же надёжно работает для
   любого количества вариантов и при любой прокрутке. */
.ycd-tip__bubble { position: fixed; z-index: 100010; background: #0f0f0f; color: var(--ycd-text-2); font-size: calc(var(--ycd-fs-base) * 0.75); line-height: 1.45; font-weight: 400; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--ycd-border); box-shadow: 0 14px 32px rgba(0,0,0,.55); opacity: 0; transform: translateY(4px) scale(.97); pointer-events: none; transition: opacity .16s ease, transform .16s cubic-bezier(.4,0,.2,1); }
.ycd-tip__bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Обратная связь */
.ycd-feedback { margin-top: 20px; border: 1px solid var(--ycd-border); background: var(--ycd-bg); border-radius: 12px; padding: 16px 12px; }
.ycd-feedback__title { font-weight: 800; font-size: calc(var(--ycd-fs-base) * 1.0625); letter-spacing: -.01em; color: var(--ycd-text); margin: 0; }
.ycd-feedback__text { font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); margin: 6px 0 14px; }
/*
 * Стили полностью повторяют форму «Задать вопрос» на странице товара
 * (yarstroy-catalog-display/assets/css/yarstroy-catalog.css,
 * .yarop-product-view .wpcf7) — по прямой просьбе заказчика («стили...
 * должны полностью соответствовать формам на странице товара»), с теми
 * же цветами, но через переменные ЭТОГО плагина (--ycd-*) вместо
 * --steel-*/--safety-*/--brand-* сиблинга. Оформление строк/подписи CF7
 * (заглавные мелкие подписи над полем) предполагает, что сама форма CF7
 * использует `<label>Текст<br />[поле]</label>`, а не голое поле с одним
 * плейсхолдером — см. пример разметки формы в readme.txt.
 */
.ycd-feedback__form { font-size: calc(var(--ycd-fs-base) * 0.8125); }
.ycd-feedback__form .wpcf7-form { display: flex; flex-direction: column; gap: 12px; }
.ycd-feedback__form .wpcf7-form > p,
.ycd-feedback__form .wpcf7-form > div:not(.wpcf7-response-output) { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ycd-feedback__form br { display: none; }
.ycd-feedback__form label { display: block; font-size: calc(var(--ycd-fs-base) * 0.6875); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ycd-muted); margin: 0 0 4px; }
/*
 * :root перед .ycd-feedback__form — «утяжеляет» specificity (0,1,1 → 0,2,1).
 * Найдено на боевом сайте: у Woodmart есть глобальная динамическая
 * таблица стилей `xts-theme_settings_default-*.css` (настройка темы
 * «цвет рамки полей форм», судя по всему когда-то выставленная в белый) с
 * правилом вида `input[type="text"]{border-color:#fff!important}` — ТА ЖЕ
 * specificity (0,1,1), что и было у нас, и она побеждала по порядку
 * подключения (грузится позже нашего файла). :root ничего не меняет
 * функционально (это тот же корневой <html>), только поднимает вес
 * селектора выше конкурирующего правила темы.
 */
:root .ycd-feedback__form input,
:root .ycd-feedback__form textarea {
	width: 100% !important;
	display: block;
	background-color: var(--ycd-panel) !important;
	border: 1px solid var(--ycd-border) !important;
	border-radius: 10px !important;
	color: var(--ycd-text) !important;
	padding: 11px 14px !important;
	font-size: calc(var(--ycd-fs-base) * 0.875) !important;
	line-height: 1.4;
	font-family: inherit;
	min-height: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease !important;
}
/* :root — та же логика, что и у правила выше: без него specificity ниже,
   чем у `:root .ycd-feedback__form textarea` (там тоже задан
   min-height:0!important для обоих полей сразу) — это правило проигрывало
   ДРУГОМУ НАШЕМУ ЖЕ правилу, а не теме. Из-за этого textarea рендерилась
   всего ~40px высотой (высота обычного однострочного поля, которую
   Woodmart форсит через :root textarea{height:var(--wd-form-height)} без
   !important — без победившего min-height:104px её было нечем перебить),
   и появлялся мини-скроллбар (тот самый «прямоугольник» в углу — scrollHeight
   на 2px больше clientHeight из-за паддингов/рамки). */
:root .ycd-feedback__form textarea { resize: vertical; min-height: 104px !important; }
.ycd-feedback__form input::placeholder,
.ycd-feedback__form textarea::placeholder { color: var(--ycd-muted-2); opacity: 1; }
.ycd-feedback__form input:hover,
.ycd-feedback__form textarea:hover { border-color: var(--ycd-muted-2) !important; }
.ycd-feedback__form input:focus,
.ycd-feedback__form textarea:focus {
	outline: none;
	border-color: var(--ycd-brand) !important;
	box-shadow: 0 0 0 3px rgba(209,55,59,.22) !important;
	background-color: var(--ycd-bg) !important;
}
.ycd-feedback__form input[type="submit"] {
	background-color: var(--ycd-brand) !important;
	border: none !important;
	border-radius: 12px !important;
	color: #fff !important;
	font-weight: 700;
	font-size: calc(var(--ycd-fs-base) * 0.875) !important;
	padding: 13px 20px !important;
	cursor: pointer;
	width: 100% !important;
	transition: background-color .15s ease;
}
.ycd-feedback__form input[type="submit"]:hover { background-color: var(--ycd-brand-hover) !important; }
.ycd-feedback__form input[type="submit"][disabled] { opacity: .6; cursor: default; }
.ycd-feedback__form .wpcf7-not-valid-tip { display: block; color: var(--ycd-brand-light); font-size: calc(var(--ycd-fs-base) * 0.6875); font-weight: 600; margin-top: 4px; text-transform: none; letter-spacing: normal; }
.ycd-feedback__form input.wpcf7-not-valid,
.ycd-feedback__form textarea.wpcf7-not-valid { border-color: var(--ycd-brand-light) !important; }
.ycd-feedback__form .wpcf7-response-output { color: var(--ycd-text-2) !important; background: var(--ycd-panel); border: 1px solid var(--ycd-border) !important; border-left: 3px solid var(--ycd-brand) !important; font-size: calc(var(--ycd-fs-base) * 0.75); border-radius: 8px; padding: 10px 12px !important; margin: 4px 0 0 !important; }
.ycd-feedback__form .wpcf7-spinner { margin: 4px auto 0; }
.ycd-feedback__form input[type="hidden"] { display: none; }
.ycd-feedback__form .wpcf7-form > p:empty,
.ycd-feedback__form .wpcf7-form > p:has(> input[type="hidden"]:only-child) { display: none; }

/* ---- Сортировка (в сайдбаре, перед формой обратной связи) ---- */
/* border-bottom+padding — та же линия-разделитель, что отделяет блок
   сверху (border-top) — по просьбе заказчика отделяет «Сортировку»
   от формы обратной связи так же, а не только сверху. */
.ycd-sort { margin-top: 20px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--ycd-border); border-bottom: 1px solid var(--ycd-border); }
.ycd-sort__label { display: block; font-size: calc(var(--ycd-fs-base) * 0.75); font-weight: 700; color: var(--ycd-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.ycd-sort__form { display: block; }

/* ---- Тулбар (счётчик найденных товаров) + сетка товаров ---- */
.ycd-toolbar { margin-bottom: 16px; }
/* .ycd-toolbar__count — теперь <div>-обёртка (была <p>, см. комментарий в
   yarop_cd_render_toolbar()), сам текст — вложенный <p class="woocommerce-
   result-count"> от штатной woocommerce_result_count(); стилизуем его
   напрямую, обнуляя его собственный (тематический) margin. */
.ycd-toolbar__count { margin: 0; }
.ycd-toolbar__count .woocommerce-result-count { color: var(--ycd-muted); font-size: calc(var(--ycd-fs-base) * 0.875); margin: 0; }
/* :root — тот же приём, что и у .ycd-feedback__form input/textarea выше:
   бьёт с той же specificity Woodmart-правило `:root select{border-color:
   #fff!important}` из динамических настроек темы. */
:root .ycd-select { width: 100%; background-color: var(--ycd-panel) !important; border: 1px solid var(--ycd-border) !important; color: var(--ycd-text) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: calc(var(--ycd-fs-base) * 0.875); font-weight: 600; min-height: 0 !important; }

.ycd-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .ycd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .ycd-grid { grid-template-columns: repeat(3, 1fr); } }

/* «Показать ещё» (штатная кнопка пагинации темы, .wd-load-more — рисуется
   `do_action('woocommerce_after_shop_loop')`, разметку не контролируем,
   только перекрашиваем) — выбивалась из общего стиля кнопок плагина
   (обычный светлый outline темы), а на ховере текст красится в
   `--btn-color-hover: #333` (тёмно-серый, почти чёрный) — на нашей тёмной
   панели это выглядит как «кнопка стала чёрной»/текст пропал. Стилизуем
   под тот же «ghost»-вид, что и .ycd-btn--ghost (см. выше): прозрачный
   фон, приглушённая рамка, на ховере — акцентная красная рамка/текст.
   Специфичность класса `.btn` темы (0,1,0) выше нуля, поэтому те же
   свойства, что и в .ycd-btn--ghost, нужны с !important. Скоуп —
   `.ycd-content` (внутри .ycd-page), чтобы не задеть load-more на других,
   не переведённых на наш шаблон, архивах сайта.
   ВАЖНО: селектор — именно `a.wd-load-more` (тег `a`), НЕ голый
   `.wd-load-more` — та же тема кладёт РЯДОМ, внутри того же
   `.wd-loop-footer`, скрытый `<div class="btn wd-load-more
   wd-load-more-loader">` со своим спиннером/текстом «Загружаем...»
   (штатный, mod-load-more-button.min.css, включается САМОЙ ТЕМОЙ через
   `.wd-load-more.loading + .wd-load-more-loader`, по умолчанию
   `display:none`). Этот div ТОЖЕ несёт класс `wd-load-more` — прежняя
   версия правила (без тега `a`) снимала с него `display:none` через
   `!important`, из-за чего он был виден ВСЕГДА, а не только во время
   реальной загрузки — баг «две кнопки одновременно» (обнаружено
   пользователем вживую). */
.ycd-content a.wd-load-more.wd-load-more { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; background: transparent !important; border: 2px solid var(--ycd-muted-2) !important; color: var(--ycd-text-2) !important; border-radius: 12px !important; font-weight: 700; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.ycd-content a.wd-load-more.wd-load-more:hover { background: transparent !important; border-color: var(--ycd-brand-light) !important; color: var(--ycd-brand-light) !important; }
/* Индикатор загрузки — используем ГОТОВЫЙ штатный (свой спиннер + текст
   «Загружаем...», см. комментарий выше), просто перекрашиваем под тёмную
   тему плагина: у темы он рассчитан на светлый фон (тёмный текст/тёмный
   бордюр спиннера — на нашей тёмной панели был бы почти не виден).
   category-display.js только вешает класс `loading` на саму ссылку —
   остальное (переключение display) уже делает CSS темы. */
.ycd-content .wd-load-more-loader { border-color: var(--ycd-muted-2) !important; color: var(--ycd-text-2) !important; }
.ycd-content .wd-load-more-loader .load-more-loading::before { border-left-color: var(--ycd-brand-light) !important; }

/* Ховер карточки — та же анимация, что и в «Галерее объектов» (yog-card,
   /obekty/): подъём + красная обводка + тень, картинка слегка увеличивается,
   заголовок краснеет. --ycd-brand-light — тот же красный оттенок, что и
   --yog-brand-400 (#ff5663) в той галерее, уже используется в этом файле
   для аналогичных ховеров (.ycd-subcat-tile и т.п.). */
.ycd-card { border: 1px solid var(--ycd-border); background: var(--ycd-panel); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 28px rgba(0,0,0,.45); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; will-change: transform; }
.ycd-card:hover { transform: translateY(-4px); border-color: var(--ycd-brand-light); box-shadow: 0 14px 32px rgba(0,0,0,.5); }
.ycd-card:hover .ycd-card__title { color: var(--ycd-brand-light); }
/* Без этого явного правила при наведении именно на САМ текст ссылки (не
   всю карточку) побеждало более специфичное правило темы Woodmart —
   `:is(h1..h6,.title) a:hover{color:var(--wd-link-color-hover)}` — цвет,
   рассчитанный на светлые карточки темы, тёмно-серый/чёрный на нашем
   тёмном фоне читался плохо. specificity этого правила темы выше нашего
   общего `.ycd-page a{color:inherit}» (за счёт `:is(...)`+`:hover`), плюс
   `!important` на всякий случай — та же тема тёмная-надпись-на-тёмном, что
   уже не раз чинилась в этом плагине для других элементов. */
.ycd-card__title a:hover { color: var(--ycd-brand-light) !important; }
.ycd-card__photo-wrap { position: relative; overflow: hidden; }
/* Реальные фото товаров — изолированный рендер плитки на светлом/белом
   фоне (не бесшовная фактура крупным планом, как в мокапе прототипа) —
   светлый фон контейнера + object-fit:contain, чтобы плитка не обрезалась
   и не было жёсткого стыка белого фото с тёмной карточкой. */
.ycd-card__photo { display: block; aspect-ratio: 1; background: #f2f0ec; }
.ycd-card__photo img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .5s ease; }
.ycd-card:hover .ycd-card__photo img { transform: scale(1.06); }
/* Иконка «Детальный просмотр» — угол фото, по умолчанию просто кружок с
   глазом, при наведении разворачивается в пилюлю с текстом (ширина —
   transition по max-width; текст всегда в DOM, но обрезан overflow:hidden,
   пока кнопка узкая). Раньше было ДВЕ разных кнопки (текстовая плашка по
   центру снизу на фото + отдельная иконка рядом с «В корзину») — по
   просьбе заказчика объединены в одну, здесь.
   position:absolute — без !important проигрывает глобальному button-сбросу
   Woodmart (тот форсит position:relative под свои hover-эффекты кнопок,
   см. комментарий у :where(...) button выше в файле). !important на
   font-size/font-weight — по опыту той же самой прошлой кнопки: без него
   Woodmart подставляет свой размер шрифта (13px/600 вместо 12px/700). */
/* gap:0 по умолчанию (было 6px и в свёрнутом виде тоже) — из-за этого при
   max-width:36px сумме иконка(16)+gap(6)+padding(20)=42px не помещалась в
   36px, overflow:hidden обрезал ЛИШНИЕ 6px справа (в основном — правый
   padding), а не центрировал содержимое — иконка визуально съезжала влево
   от центра круга («выглядит криво»). Теперь в свёрнутом виде ровно
   16(иконка)+10+10(паддинги)=36px — точное совпадение с height, честный
   центрированный круг; gap появляется только при разворачивании вместе с
   текстом. Заодно уменьшена «заметность» в состоянии по умолчанию —
   полупрозрачный тусклый фон вместо сразу яркого, чтобы кнопка не
   перетягивала внимание с самого фото — и становится полностью
   контрастной только при наведении.
   ВАЖНО (найдено уже ПОСЛЕ релиза 0.15.0 — `gap` без !important
   проигрывал общему button-сбросу Woodmart, `gap: 0` из ЭТОГО файла не
   применялся вообще, реально был Woodmart-овский `5px`, отсюда и
   заметное смещение несмотря на «исправление» в прошлой версии).
   ВТОРАЯ, независимая причина того же смещения — тот же сброс Woodmart
   заодно форсит `justify-content: center` (мы его никогда не задавали
   вообще), а не `flex-start`: при центрировании 16px-иконки в чуть более
   узком content-box (border-box 36px минус рамка 2px минус паддинги 20px
   = 14px, иконка чуть шире доступного места) получается заметно
   несимметричный результат. Обе причины подтверждены вживую
   (getComputedStyle показывал gap:5px и justify-content:center вместо
   ожидаемых 0 и flex-start) — это НЕ старый повторившийся баг, а два
   НОВЫХ свойства из того же самого button-сброса, которые в прошлый раз
   просто не были проверены по отдельности. */
.ycd-card__qv-corner {
	position: absolute !important;
	top: 10px;
	right: 10px;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 0 !important;
	height: 36px;
	max-width: 36px;
	padding: 0 10px !important;
	overflow: hidden !important;
	white-space: nowrap;
	background: rgba(36,36,36,.55) !important;
	color: rgba(234,234,234,.75) !important;
	font-size: calc(var(--ycd-fs-base) * 0.75) !important;
	font-weight: 700 !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,255,255,.1) !important;
	cursor: pointer;
	transition: max-width .28s ease, padding .28s ease, gap .28s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ycd-card__qv-corner svg { width: 16px; height: 16px; flex-shrink: 0; }
.ycd-card__qv-corner span { flex-shrink: 1; min-width: 0; overflow: hidden; }
.ycd-card__qv-corner:hover, .ycd-card__qv-corner:focus-visible {
	max-width: 210px;
	padding: 0 14px !important;
	gap: 6px !important;
	background: rgba(36,36,36,.95) !important;
	color: var(--ycd-text-2) !important;
	border-color: var(--ycd-brand-light) !important;
}
.ycd-card__body { padding: 16px; }
.ycd-card__title { font-size: calc(var(--ycd-fs-base) * 0.875); font-weight: 700; line-height: 1.4; margin: 0 0 10px; min-height: 2.6em; }
.ycd-card__height-label { font-size: calc(var(--ycd-fs-base) * 0.6875); color: var(--ycd-muted); margin: 0 0 4px; }
.ycd-card__heights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.ycd-height-btn { padding: 6px 0 !important; border-radius: 8px !important; border: 2px solid var(--ycd-border) !important; background: var(--ycd-bg) !important; color: var(--ycd-text-2) !important; font-weight: 700; font-size: calc(var(--ycd-fs-base) * 0.8125); font-family: 'JetBrains Mono', monospace; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ycd-height-btn.is-active { background: var(--ycd-brand) !important; border-color: var(--ycd-brand) !important; color: #fff !important; }
/* Блок цены — сразу ДВЕ цены (за м² и за поддон), по образцу страницы
   товара («Стоимость»: цена за 1 м² / цена за 1 поддон) — по просьбе
   заказчика, вместо одной крупной цены + мелкой серой подписи. */
.ycd-card__price-box { border: 1px solid var(--ycd-border); background: var(--ycd-bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.ycd-card__price-row { display: flex; align-items: flex-end; gap: 6px; }
.ycd-card__price { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--ycd-fs-base) * 1.25); font-weight: 800; color: #ff3f4a; }
.ycd-card__price-unit { font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); margin-bottom: 2px; }
.ycd-card__pallet-row { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ycd-border); }
.ycd-card__pallet-row[hidden] { display: none !important; }
.ycd-card__pallet-price { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--ycd-fs-base) * 0.9375); font-weight: 800; color: var(--ycd-text); }
.ycd-card__pallet-unit { font-size: calc(var(--ycd-fs-base) * 0.6875); color: var(--ycd-muted); }

/* «Итого» — сумма за выбранное количество (JS: updateCardTotal()). При
   qty=1 дублирует цену за поддон/м² выше — специально не прячем, чтобы
   блок не «прыгал» при первом же изменении количества. */
.ycd-card__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 0 2px; margin-bottom: 12px; }
.ycd-card__total-label { font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); }
.ycd-card__total-price { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--ycd-fs-base) * 1); font-weight: 800; color: var(--ycd-text); }
.ycd-card__total-meta { font-size: calc(var(--ycd-fs-base) * 0.6875); color: var(--ycd-muted); flex-basis: 100%; }

/* !important на display/grid-template-columns: форма товара несёт ОБА
   класса — `cart` (штатный WooCommerce) и `ycd-card__actions` (наш), а у
   Woodmart есть мобильные адаптивные правила именно для `form.cart`,
   переключающие её на `display:flex` на узких экранах — без !important
   наш display:grid проигрывает именно на мобильной ширине (на десктопе
   всё было в порядке, поэтому баг не был виден сразу). */
/* grid-template-columns: 1fr auto — степпер количества и кнопка «В
   корзину» (теперь иконка) в ОДНУ строку, по просьбе заказчика (раньше
   степпер занимал всю ширину своей отдельной строкой сверху). */
.ycd-card__actions { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px; align-items: stretch; }

.ycd-qty-stepper { display: flex; align-items: stretch; border: 1px solid var(--ycd-border); border-radius: 10px; overflow: hidden; background: var(--ycd-bg); }
.ycd-qty-btn.ycd-qty-btn { flex: 0 0 auto; width: 36px; font-size: calc(var(--ycd-fs-base) * 1.125); font-weight: 700; color: var(--ycd-text-2) !important; cursor: pointer; }
.ycd-qty-btn.ycd-qty-btn:hover { color: var(--ycd-brand-light) !important; }
/* :root в начале селектора — та же специфичность-подстраховка, что и у
   .ycd-select/.ycd-feedback__form полей: у темы Woodmart есть динамическая
   таблица стилей настроек (xts-theme_settings_default-*.css), где
   `input[type="number"]{border:1px solid #fff!important}` — ТОЧНО ТАКАЯ ЖЕ
   specificity, что и у голого `.ycd-qty-input`, и грузится ПОЗЖЕ нашего
   файла, поэтому побеждала на всех 4 сторонах (наши border-left/-right
   тоже проигрывали, а border-top/-bottom мы и не трогали вовсе) — отсюда
   заметная толстая белая рамка вместо тонкой тёмной, как у кнопок ±.
   Подтверждено вживую (getComputedStyle показывал border:1px solid white
   на всех сторонах). */
:root .ycd-qty-input {
	flex: 1 1 auto;
	width: 100%;
	background-color: transparent !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: 1px solid var(--ycd-border) !important;
	border-right: 1px solid var(--ycd-border) !important;
	border-radius: 0 !important;
	color: var(--ycd-text) !important;
	padding: 9px !important;
	min-height: 0 !important;
	text-align: center;
	font-family: 'JetBrains Mono', monospace;
	-moz-appearance: textfield !important;
}
.ycd-qty-input::-webkit-outer-spin-button, .ycd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

/* «В корзину» — теперь просто иконка (текст убран по просьбе заказчика,
   чтобы поместиться в одну строку со степпером количества). width/
   flex-basis/padding с !important — то же мобильное правило Woodmart для
   form.cart (см. комментарий у .ycd-card__actions) само по себе задавало
   этой кнопке ширину 100% (flex-basis:100%) и текстовый padding, из-за
   чего она растягивалась на всю строку/не была квадратной. */
.ycd-card__cart-btn.ycd-card__cart-btn { flex-shrink: 0 !important; flex-basis: auto !important; width: 48px !important; padding: 0 !important; }
.ycd-card__cart-btn svg { width: 18px; height: 18px; }

.ycd-empty { text-align: center; padding: 60px 0; color: var(--ycd-muted); border: 1px dashed var(--ycd-muted-2); border-radius: 16px; }

.ycd-price-flash { animation: ycd-flash .6s ease; }
@keyframes ycd-flash { 0% { color: var(--ycd-brand-light); } 100% { color: inherit; } }

/* ---- Описание категории ---- */
/* margin-bottom — НЕ полагаемся на padding-bottom родителя `.ycd-page`
   (см. комментарий там): на боевом сайте `.ycd-description` из-за
   невалидного HTML темы (лишний `</div>` в кнопке «Показать ещё», см.
   память проекта) технически часто оказывается уже СНАРУЖИ `.ycd-page`
   — без этого блок вплотную прижимался к подвалу сайта, отступа не было
   вообще. Отступ задан прямо здесь — работает одинаково, внутри `.ycd-page`
   этот блок технически остался или нет. */
.ycd-description { margin-top: 48px; margin-bottom: 48px; border: 1px solid var(--ycd-border); border-radius: 16px; padding: 28px; }
/* color — явно, НЕ полагаясь на общее `.ycd-page h1..h6{color:var(--ycd-text)}»
   (см. выше в файле): на боевом сайте обнаружено, что `.ycd-description`
   иногда оказывается СНАРУЖИ `.ycd-page` в отрендеренном DOM — сторонний
   HTML в `do_action('woocommerce_after_shop_loop')` (кнопка «Показать
   ещё» темы) содержит на 1 закрывающий `</div>` больше, чем открывающих,
   и этот «лишний» тег закрывает `.ycd-page` раньше времени, выталкивая
   всё, что рендерится после (наш блок описания), уже её соседом — не
   наш баг по происхождению (невалидный HTML самой темы, мы не можем
   поправить чужой шаблон), но раз `.ycd-page`-скоуп ненадёжен для этого
   блока, красим явно здесь же — тот же защитный приём, что и с CSS-
   переменными на :root (см. комментарий в начале файла), а не на .ycd-page. */
.ycd-description h2 { font-size: calc(var(--ycd-fs-base) * 1.25); font-weight: 800; margin: 0 0 16px; color: var(--ycd-text); }
.ycd-description__text { color: var(--ycd-text-2); line-height: 1.7; }
.ycd-description__text.ycd-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ycd-description__text p { margin: 0 0 14px; }
.ycd-description__text a { color: var(--ycd-brand-light); text-decoration: underline; }

/* ---- Дашборд «в цифрах» (внутри .ycd-hero, см. .ycd-hero__stats выше) ---- */
.ycd-dashboard__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .ycd-dashboard__stats { grid-template-columns: repeat(4, 1fr); } }
/* Фон плитки — --ycd-bg, а не --ycd-panel: сама .ycd-hero тоже на --ycd-panel,
   плитки на том же фоне сливались бы с героем без видимой границы. */
.ycd-stat { background: var(--ycd-bg); border: 1px solid var(--ycd-border); border-radius: 12px; padding: 16px; text-align: center; }
.ycd-stat__value { display: block; font-family: 'JetBrains Mono', monospace; font-size: calc(var(--ycd-fs-base) * 1.375); font-weight: 800; color: var(--ycd-text); }
.ycd-stat__value--accent { color: var(--ycd-brand-light); }
.ycd-stat__label { display: block; font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); margin-top: 2px; }

/* ---- Модалка быстрого просмотра ---- */
/* Структура и тайминги анимации — 1-в-1 с модалками карточки товара
   (yarstroy-catalog-display: .modal-root/[data-yarop-modal-box]), по
   просьбе заказчика («стили модального окна... должны совпадать»):
   центрирование через flex-обёртку (а НЕ margin:auto на самой панели —
   на боевом сайте это давало сломанное позиционирование модалки —
   см. память проекта), scale(.86→1), те же длительности/easing. */
.ycd-modal { position: fixed; inset: 0; z-index: 100000; }
.ycd-modal[hidden] { display: none !important; }
.ycd-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .28s ease-out; }
.ycd-modal__center { position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ycd-modal__panel { position: relative; max-width: 920px; width: 100%; max-height: 92vh; overflow-y: auto; background: var(--ycd-panel); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); display: grid; transform: scale(.86); opacity: 0; transition: transform .22s ease-in-out, opacity .22s ease-in-out; will-change: opacity, transform; }
@media (min-width: 640px) { .ycd-modal__panel { grid-template-columns: 1fr 1fr; } }
.ycd-modal.is-open .ycd-modal__backdrop { opacity: 1; }
.ycd-modal.is-open .ycd-modal__panel { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.ycd-modal__backdrop, .ycd-modal__panel { transition: none; }
}
/* Тот же баг, что и у .ycd-card__qv-corner выше: без !important это
   position:absolute проигрывает глобальному Woodmart-сбросу button
   (форсит position:relative), из-за чего крестик оставался обычным
   grid-элементом .ycd-modal__panel — третьим наравне с фото и текстом —
   и раскидывал их по разным ячейкам грида вместо position:absolute
   поверх содержимого. Подтверждено инспекцией живой страницы. */
.ycd-modal__close { position: absolute !important; top: 14px; right: 14px; z-index: 2; color: var(--ycd-muted) !important; font-size: calc(var(--ycd-fs-base) * 1); cursor: pointer; }
/* Фото — не встык с краями модалки: тёмное поле-паддинг + внутри него
   отдельная скруглённая светлая карточка под сам (белый) рендер товара,
   чтобы не выглядело как «белый прямоугольник от края до края». */
.ycd-modal__photo { background: var(--ycd-panel); padding: 24px; display: flex; }
/* Чисто белый (не --ycd-bg/#f2f0ec), а не «почти белый» — сами фото
   товаров тоже на белом, «почти белый» подложки давал заметный шов между
   карточкой-подложкой и самим кадром вместо бесшовного вида. */
.ycd-modal__photo-inner { background: #fff; border-radius: 16px; aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.ycd-modal__photo-inner img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ycd-modal__body { padding: 32px; }
.ycd-modal__title { font-size: calc(var(--ycd-fs-base) * 1.3125); font-weight: 800; margin: 0 0 6px; }
.ycd-modal__sku { font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); font-family: 'JetBrains Mono', monospace; margin: 0 0 16px; }
.ycd-modal__price-box { border: 1px solid var(--ycd-border); background: var(--ycd-bg); border-radius: 12px; padding: 16px; margin-top: 16px; }
.ycd-modal__pallet-badge { display: inline-block; margin-top: 10px; font-size: calc(var(--ycd-fs-base) * 0.625); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ycd-brand-light); background: #2a1518; border: 1px solid var(--ycd-border); border-radius: 999px; padding: 3px 10px; }
.ycd-modal__pallet-badge[hidden] { display: none !important; }
.ycd-modal__qty-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.ycd-modal__qty { display: flex; align-items: center; gap: 10px; }
.ycd-modal__qty button { width: 32px; height: 32px; border-radius: 8px !important; border: 1px solid var(--ycd-border) !important; background: var(--ycd-panel) !important; color: var(--ycd-text) !important; font-weight: 700; cursor: pointer; }
.ycd-modal__qty-label { font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); }
/* Блок «Итого» — цена и площадь ЗА ВЫБРАННОЕ количество поддонов, живой
   пересчёт при +/- (раньше отсутствовал — сумма не менялась вовсе). */
.ycd-modal__total { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--ycd-border); }
.ycd-modal__total-label { display: block; font-size: calc(var(--ycd-fs-base) * 0.6875); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ycd-muted); margin-bottom: 4px; }
.ycd-modal__total-price { font-family: 'JetBrains Mono', monospace; font-size: calc(var(--ycd-fs-base) * 1.5); font-weight: 800; color: var(--ycd-text); }
.ycd-modal__total-meta { display: block; font-size: calc(var(--ycd-fs-base) * 0.75); color: var(--ycd-muted); margin-top: 2px; }
.ycd-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
/* nowrap: у «Страница товара» два слова — на узкой колонке модалки текст
   мог перенестись на вторую строку внутри кнопки, из-за чего кнопки
   выходили разной высоты и «В корзину»/«Страница товара» выглядели
   некрасиво сбитыми. */
.ycd-modal__actions .ycd-btn.ycd-btn { white-space: nowrap; padding: 10px 14px !important; }

/* Визуальная обратная связь во время AJAX-подгрузки фильтров/сортировки/
   пагинации (см. category-display.js, ycdAjaxNavigate()). */
html.ycd-loading .ycd-filters,
html.ycd-loading .ycd-content { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* То же самое, но для кнопки «Показать ещё» (см. ycdLoadMoreProducts() в
   category-display.js) — гасим только сам блок кнопки, а не всю страницу,
   т.к. уже показанные товары никуда не пропадают. */
.wd-loop-footer.ycd-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
	.ycd-page *, .ycd-page *::before, .ycd-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}