/* FEAT-PRODUCT-CARD-REDESIGN этап 2: секции карточки товара — аккордеон вместо вкладок.

   Разметку не переписывали: тема уже печатает у каждой панели заголовок
   .title-tab-heading (он был помечен visible-xs и работал аккордеоном только на мобильных).
   Здесь этот режим включается на всех ширинах, а полоса вкладок .nav-tabs убирается.

   Порядок секций — параметр шаблона LIST_PRODUCT_BLOCKS_TAB_ORDER (админка).
   Какие секции раскрыты при открытии — LIST_PRODUCT_BLOCKS_ACC_OPENED (админка):
   класс active печатается на сервере, поэтому раскрытая секция видна сразу, без скачка.

   Курс редизайна: чистые фоны, воздух, line-SVG-иконки, без градиентов (память
   modern-design-no-gradients). */

.catalog_detail .tabs_section,
.tabs_section.es-model-sections {
	--es-acc-border: #e6e8eb;
	--es-acc-ink: #16181c;
	--es-acc-muted: #6b7280;
	--es-acc-accent: #2f7a52;
}

/* полоса вкладок больше не нужна: её роль играют заголовки секций */
.catalog_detail .tabs_section .tabs.arrow_scroll,
.tabs_section.es-model-sections .tabs.arrow_scroll,
.catalog_detail .tabs_section .nav.nav-tabs,
.tabs_section.es-model-sections .nav.nav-tabs {
	display: none;
}

/* JS темы вешает на страницу товара плавающую копию полосы вкладок (клон живёт вне
   .catalog_detail, поэтому правилом выше не убирается) — при аккордеоне она бессмысленна
   и перекрывала шапку. Файл подключается только шаблоном карточки товара. */
body .product-item-detail-tabs-container-fixed {
	display: none !important;
}

/* stage6 (замечание владельца «бледно»): секции — карточки со скруглением и рамкой,
   стилистика корзины (basket-redesign.css), а не тонкие серые линейки. */

/* пустая правая колонка под аккордеоном больше не выводится (component_epilog.php),
   и оставшаяся одинокая колонка должна занимать всю ширину, а не 9/12 */
.row > .col-md-9:only-child {
	width: 100%;
}

/* каждая панель — секция аккордеона */
.catalog_detail .tabs_section .tab-content > .tab-pane,
.tabs_section.es-model-sections .tab-content > .tab-pane {
	display: block;
	float: none;
	width: auto;
	background: #fff;
	border: 1px solid var(--es-acc-border);
	/* stage8: скругление 16px и отступы 24px — раньше секции читались как «квадратные блоки» */
	border-radius: 16px;
	margin-bottom: 10px;
	padding: 0 24px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.catalog_detail .tabs_section .tab-content > .tab-pane:hover,
.tabs_section.es-model-sections .tab-content > .tab-pane:hover {
	border-color: #d3d6da;
}

/* раскрытая секция выделена мягкой тенью; рамка нейтрально-серая (владелец: акцентная
   зелёная рамка + зелёный заголовок вместе смотрелись слишком «кислотно» - зелёным
   оставлен только заголовок ниже). */
.catalog_detail .tabs_section .tab-content > .tab-pane.active,
.tabs_section.es-model-sections .tab-content > .tab-pane.active {
	border-color: #d3d6da;
	box-shadow: 0 2px 10px rgba(16, 24, 32, .06);
}

.catalog_detail .tabs_section .tab-content > .tab-pane:last-child,
.tabs_section.es-model-sections .tab-content > .tab-pane:last-child {
	margin-bottom: 0;
}

/* stage9, замечание владельца «квадратные блоки»: у самого заголовка секции есть своя
   рамка темы `border: 1px solid #f0f0f0` по ВСЕМ четырём сторонам с нулевым скруглением
   (мобильный аккордеон темы) плюс собственный белый фон. Внутри скруглённой секции она и
   рисовала прямоугольник. Снимаем и рамку, и фон — оформление секции даёт .tab-pane;
   правило действует во всех состояниях: свёрнутом, раскрытом, при наведении. */
.catalog_detail .tabs_section .tab-pane > .title-tab-heading,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading {
	border: 0;
	background: none;
}

/* заголовок секции: тема прятала его через visible-xs — показываем везде */
.catalog_detail .tabs_section .tab-pane > .title-tab-heading,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	/* stage8: заголовок компактнее — 20px сверху/снизу давали полосу в 68px высотой */
	padding: 17px 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--es-acc-ink);
	cursor: pointer;
	user-select: none;
	transition: color .15s ease;
}

.catalog_detail .tabs_section .tab-pane > .title-tab-heading:hover,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading:hover {
	color: var(--es-acc-accent);
}

/* у раскрытой секции заголовок акцентный — видно, где ты находишься */
.catalog_detail .tabs_section .tab-pane.active > .title-tab-heading,
.tabs_section.es-model-sections .tab-pane.active > .title-tab-heading {
	color: var(--es-acc-accent);
}

/* у темы свой шеврон иконочным шрифтом (:before, FontAwesome) — гасим, иначе на заголовке
   две стрелки; курс редизайна — line-SVG вместо иконочных шрифтов */
.catalog_detail .tabs_section .tab-pane > .title-tab-heading::before,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading::before {
	content: none;
}

/* шеврон: line-SVG через маску, чтобы красился currentColor и поворачивался */
/* stage6: шеврон заметнее — крупнее и толще линией (маска красится currentColor,
   поэтому у раскрытой секции он тоже становится акцентно-зелёным) */
.catalog_detail .tabs_section .tab-pane > .title-tab-heading::after,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading::after {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: var(--es-acc-chevron) center / 26px 26px no-repeat;
	mask: var(--es-acc-chevron) center / 26px 26px no-repeat;
	transform: rotate(0deg);
	transition: transform .18s ease;
}

.catalog_detail .tabs_section,
.tabs_section.es-model-sections {
	--es-acc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.catalog_detail .tabs_section .tab-pane.active > .title-tab-heading::after,
.tabs_section.es-model-sections .tab-pane.active > .title-tab-heading::after {
	transform: rotate(180deg);
}

/* Тело секции — следующий за заголовком блок (тот же приём, что у мобильной темы).

   Раскрытие анимируем max-height + прозрачностью, а не display:none/block: у панелей
   разнородная разметка (у отзывов содержимое вообще в соседнем #reviews_content), и
   grid-template-rows:0fr тут не применить — он требует ровно двух дочерних строк.
   max-height задан заведомо больше реальной высоты: для длинных секций раскрытие идёт
   чуть быстрее заданных 240ms, зато приём работает на любой вёрстке секции. */
.catalog_detail .tabs_section .tab-pane > .title-tab-heading + div,
.tabs_section.es-model-sections .tab-pane > .title-tab-heading + div {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-bottom: 0;
	transition: max-height .24s ease, opacity .18s ease, padding-bottom .24s ease;
}

.catalog_detail .tabs_section .tab-pane.active > .title-tab-heading + div,
.tabs_section.es-model-sections .tab-pane.active > .title-tab-heading + div {
	max-height: 6000px;
	opacity: 1;
	padding-bottom: 24px;
}

/* stage8: тонкий разделитель между заголовком и телом раскрытой секции — иначе текст
   «висел» в белом поле без всякой привязки к заголовку. */
.catalog_detail .tabs_section .tab-pane.active > .title-tab-heading,
.tabs_section.es-model-sections .tab-pane.active > .title-tab-heading {
	border-bottom: 1px solid var(--es-acc-border);
}

.catalog_detail .tabs_section .tab-pane.active > .title-tab-heading + div,
.tabs_section.es-model-sections .tab-pane.active > .title-tab-heading + div {
	padding-top: 20px;
}

/* FEAT-CARD-UI-1 (замечание владельца: «внутри блоков нет отступа снизу»): тема перебивала
   наш padding-bottom:24px более специфичным правилом
   `.tabs.arrow_scroll + .tab-content .tab-pane.active .title-tab-heading + div{padding:0}`
   (4 класса против наших тоже 4х, но с большей специфичностью объединённых .tabs.arrow_scroll)
   - контент секции упирался в нижний край без воздуха. Добавляем класс .catalog_detail,
   специфичность становится заведомо выше, без !important. */
.catalog_detail .tabs.arrow_scroll + .tab-content .tab-pane.active > .title-tab-heading + div {
	padding-bottom: 24px;
}

/* stage8: содержимое секции занимает её ширину целиком. Ограничение меры строки пробовали
   и откатили: при 76ch правая половина секции оставалась пустой — ровно то «свободное
   пространство», из-за которого секции выглядели рыхлыми. */

/* stage8: таблица характеристик внутри секции — плотнее (зебра уже своя) и со скруглением,
   чтобы не смотрелась вставленным в секцию прямоугольником */
.catalog_detail .tabs_section .tab-pane table td,
.tabs_section.es-model-sections .tab-pane table td,
.catalog_detail .tabs_section .tab-pane table th,
.tabs_section.es-model-sections .tab-pane table th {
	padding: 9px 16px;
}

.catalog_detail .tabs_section .tab-pane table,
.tabs_section.es-model-sections .tab-pane table {
	border-radius: 10px;
	overflow: hidden;
}

/* тем, кто просил не анимировать, ничего не анимируем */
@media (prefers-reduced-motion: reduce) {
	.catalog_detail .tabs_section .tab-pane > .title-tab-heading + div,
	.tabs_section.es-model-sections .tab-pane > .title-tab-heading + div,
	.catalog_detail .tabs_section .tab-pane > .title-tab-heading::after,
	.tabs_section.es-model-sections .tab-pane > .title-tab-heading::after {
		transition: none;
	}
}

/* Отзывы: их содержимое лежит не соседним div, а в #reviews_content, и тема уже
   управляет им по классу active у панели — здесь только не даём ему торчать
   у свёрнутой секции. */
.catalog_detail .tabs_section .tab-pane:not(.active) #reviews_content,
.tabs_section.es-model-sections .tab-pane:not(.active) #reviews_content {
	display: none !important;
}

.catalog_detail .tabs_section .tab-pane.active #reviews_content,
.tabs_section.es-model-sections .tab-pane.active #reviews_content {
	display: block;
	padding-bottom: 24px;
}

/* FEAT-CARD-UI-1: секция «Отзывы» теперь ВНЕ #tabs_section (см. component_epilog.php) -
   правила выше её больше не касаются, а базовая тема прячет #reviews_content по умолчанию
   (обычно его открывает клик по вкладке-триггеру, которой у отзывов больше нет). Открываем
   явно для новой обёртки. */
.catalog_detail .reviews-block-outside-accordion #reviews_content {
	display: block;
}

/* Секция без обычной обёртки-div (нестандартные панели темы): чтобы свёрнутая секция
   не показывала содержимое, прячем всё, кроме заголовка. Тело секции (блок сразу за
   заголовком) исключено — оно сворачивается анимацией выше, а display:none оборвал бы её. */
.catalog_detail .tabs_section .tab-pane:not(.active) > *:not(.title-tab-heading):not(.title-tab-heading + *),
.tabs_section.es-model-sections .tab-pane:not(.active) > *:not(.title-tab-heading):not(.title-tab-heading + *) {
	display: none;
}

/* region Блок «Наличие в магазинах»

   stage9 (решение владельца, отмена части stage7): виджет FEAT-STORE-AVAILABILITY снова
   ОТДЕЛЬНЫЙ блок над полосой секций, а не секция аккордеона. Правила stage7 переиспользуются
   как есть — у них сняли часть скоупа (.tabs_section), поэтому они одинаково красят и блок,
   и секцию; ниже добавлена только «обложка» карточки .es-sa-block. Разметку виджета не
   трогаем (на ней JS: data-es-sa-*, .es-sa__map-toggle, .es-sa__row), а скоуп .es-sa-pane
   сохранён — тот же виджет в других местах (чекаут, ajax вне карточки) выглядит по-прежнему. */

/* обложка отдельного блока — та же карточка, что у секций аккордеона.
   владелец (уточнение к серой пробе): весь блок «Наличие в магазинах», а не только
   внутренняя группа «Заберите сегодня/позже», должен быть на светло-сером фоне -
   единый серый фон секции, карточки магазинов внутри белые. */
.catalog_detail .es-sa-block {
	background: #f5f5f7;
	border: 1px solid var(--es-acc-border, #e6e8eb);
	border-radius: 16px;
	padding: 20px 24px 24px;
	margin-bottom: 10px;
}

.catalog_detail .es-sa-block__title {
	margin: 0 0 16px;
	padding-bottom: 16px;
	/* stage9b: отбивка под заголовком блока — та же, что у раскрытой секции аккордеона,
	   иначе заголовок и первая группа сливались */
	border-bottom: 1px solid var(--es-acc-border, #e6e8eb);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--es-acc-accent, #2f7a52);
}

/* токены живут на .tabs_section, а блок теперь снаружи неё — задаём их и здесь */
.catalog_detail .es-sa-block {
	--es-acc-border: #e6e8eb;
	--es-acc-ink: #16181c;
	--es-acc-muted: #6b7280;
	--es-acc-accent: #2f7a52;
}

.catalog_detail .es-sa-pane .es-sa {
	margin: 0;
}

/* FEAT-CARD-UI-1 (редизайн по 8 пунктам владельца): точки теперь карточками, а не строками
   таблицы — вся вёрстка групп/строк/срока/кнопки карты переехала в css/store-availability.css
   (классы es-sa__card, es-sa__meta, es-sa__chip, es-sa__term--*, головная es-sa__head с
   кнопкой карты). Здесь раньше жил старый слой .es-sa-pane .es-sa__row/__table/__term и
   т.д. с более высокой специфичностью (3-4 класса), чем у новых правил (1-2 класса) - он
   молча перебивал новые цвета/раскладку (баг: белый текст срока "Сегодня" на зелёном фоне
   рендерился ЗЕЛЁНЫМ, потому что старое правило .es-sa-pane .es-sa__group--today .es-sa__term
   красило текст в тот же зелёный, что и фон). Слой убран целиком, а не переопределён -
   держать два конкурирующих источника истины для одной и той же разметки не стоит.
   Токены (--es-acc-*) и обложка блока (.es-sa-block) ниже остаются без изменений. */

/* endregion */

@media (max-width: 767px) {
	.catalog_detail .tabs_section .tab-pane > .title-tab-heading,
	.tabs_section.es-model-sections .tab-pane > .title-tab-heading {
		padding: 16px 0;
		font-size: 16px;
	}
}

/* region Страница модели (catalog.section/catalog_table_types) */

/* FEAT-CARD-UI-1: колонка «Срок» в таблице размеров модели. Цвета — те же три состояния,
   что у наличия на карточке товара (сегодня / завтра / довоз), без заливок и градиентов. */
.tabs_section.es-model-sections .es-term-cell {
	text-align: center;
	white-space: nowrap;
	font-size: 13px;
	color: var(--es-acc-muted, #6b7280);
}

.tabs_section.es-model-sections .es-term-cell--today,
.tabs_section.es-model-sections .es-term-cell--tomorrow {
	color: var(--es-acc-accent, #2f7a52);
}

/* блок отзывов модели идёт отдельным блоком после ленты секций — тема прячет
   #reviews_content по умолчанию (его открывал клик по вкладке, которой больше нет) */
.reviews-block-outside-accordion#es-model-reviews #reviews_content {
	display: block;
}

#es-model-reviews .reviews-block-outside-accordion__title {
	margin: 24px 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #16181c;
}

/* endregion */