/* Страница товара 20 (тема Lite, product/item20.php): фото | характеристики и описание | блок покупки. */
/* Переменные темы Lite (свои в каждом компоненте темы — компонент работает с любыми другими) */
:root {--t-ink: #1f2128; --t-text: #4a4d55; --t-muted: #6e717a; --t-line: #ececef; --t-soft: #f6f6f8; --t-photo: #f5f5f7; --t-accent: var(--color-site); --t-accent-dark: #a50f27; --t-green: #17803d; --t-r: 12px; --t-r-sm: 8px}
.product-page--lite .price-economy span,.product-page--lite .price-economy {color: #fff; background: var(--t-accent); padding: 2px 8px; display: inline-block}
.product-page--lite .header-tabs a.active:after {position: unset; left: unset; bottom: unset; width: unset; height: unset; content: unset; background: unset}
.product-page--lite .recommend .price-normal {margin: unset}
.product-page--lite .product-left {width: 40%; position: relative; padding: 0 0 10px} /* 27.10: верх 0 — отступ от заголовка даёт блок крошек (22px, как сверху) */
.product-page--lite .product-right {width: 60%; padding: 0 0 10px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start}
.product-page--lite .product-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--t-muted)}
.product-page--lite .product-meta__rating {color: var(--t-ink); font-weight: 500}
.product-page--lite .product-meta__rating:before {content: "★ "; color: #f5a623}
.product-page--lite .product-meta__reviews {color: var(--t-text); text-decoration: underline; text-decoration-color: var(--t-line); text-underline-offset: 3px}
.product-page--lite .product-right .product-meta .item-art {margin: 0; color: var(--t-muted)}
.product-page--lite .product-short-options {margin-top: 24px}
.product-page--lite .product-short-options__title {display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--t-ink)}
.product-page--lite .product-short-options ul {list-style: none; padding: 0; margin: 0; display: grid; gap: 5px}
.product-page--lite .product-short-options li {font-size: 14px; line-height: 1.45; color: var(--t-ink)}
.product-page--lite .product-short-options li span {color: var(--t-muted)}
.product-page--lite .product-right .product-description {margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--t-text)}
.product-page--lite .product-right .product-description p {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden}
.product-page--lite .product-right .product-description #btn-more {margin-top: 6px; font-size: 13px; color: var(--t-ink); cursor: pointer}
.product-page--lite .product-right .product-brand {margin-top: 24px}
.product-page--lite .product-right .product-brand a {margin-left: 0}
.product-page--lite .product-right .product-brand a img {max-width: 120px; max-height: 48px}
.product-page--lite .product-buy {display: grid; gap: 12px; position: sticky; top: 150px}
.product-page--lite .product-buy__card {padding: 20px; background: #fff; border: 1px solid var(--t-line); border-radius: var(--t-r); box-shadow: 0 4px 16px rgba(31, 33, 40, .04)}
.product-page--lite .product-right .product-buy .product-actions {margin-top: 0}
.product-page--lite .product-right .product-buy .product-price .price-new,.product-page--lite .product-right .product-buy .product-price .price-normal {font-size: 28px}
.product-page--lite .product-right .product-buy .product-price .price-old {font-size: 16px}
.product-page--lite .product-right .product-buy .product-basket {margin-top: 16px; flex-wrap: wrap; gap: 8px}
.product-page--lite .product-buy__info {display: grid; gap: 10px; font-size: 14px}
.product-page--lite .product-buy .product-basket {flex-direction: column; align-items: stretch}
.product-page--lite .product-buy .product__cart-action {order: -1; width: 100%; display: flex; gap: 8px}
.product-page--lite .product-buy .product__cart-action .add-to-cart-btn {flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; line-height: 46px; font-size: 15px; text-align: center}
.product-page--lite .product-buy .product__cart-action .add-to-cart-btn.active {line-height: 46px; padding: 0} /* 25.10: «В корзине» одной строкой */
/* счётчик рядом с «В корзине перейти» — фикс. ширина (2 кнопки 32px + поле 40px = 104px), чтобы flex-grow кнопки
   не сжимал его и «+» не уезжал за край (ревью В2) */
.product-page--lite .product-buy .product__cart-action .catalog-item__counter {flex: 0 0 104px; width: 104px; min-width: 104px}
.product-page--lite .product-buy .product-basket #in-click {width: 100%; padding: 0; line-height: 42px; font-size: 14px; font-weight: 500; text-align: center; color: var(--t-ink); background: var(--es-btn2, #e5e7ec); border: 0} /* 27.10 п.20: серая без рамки, текст как у остальных кнопок (был красный) */
.product-page--lite .product-buy .product-basket #in-click:hover {background: var(--es-btn2-h, #d8dbe2)} /* 27.10-2 п.2: серый ярче */
.product-page--lite .product-right .product-buy__info .product-aviability {margin: 0}
.product-page--lite .product-right .product-buy__info .in-stock {color: var(--t-green)}
.product-page--lite .product-buy__link {display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 14px; color: var(--t-ink); background: none; border: 0; text-align: left; text-decoration: underline; text-decoration-color: var(--t-line); text-underline-offset: 3px}
.product-page--lite .product-buy__link i {font-size: 16px; color: var(--t-muted); text-decoration: none}
.product-page--lite .product-buy__link:hover {color: var(--t-accent)}
.product-page--lite .product-right .product-buy__info .found-cheaper {border-bottom: 0; color: var(--t-ink)}
.product-page--lite .product-right .product-buy__info .found-cheaper:hover {color: var(--t-accent)}
/* S5 (склады и наличие, спека docs/specs/2026-10-13-stage5-s5-warehouses.md): блок «в наличии на складах»/«под
   заказ»/«Сообщить о поступлении» — ещё одна строка сетки .product-buy__info (gap у неё уже задан на 31-й строке) */
.product-page--lite .product-right .product-buy__info .product-warehouses {margin: 0; font-size: 14px; color: var(--t-text)}
.product-page--lite .product-right .product-buy__info .product-warehouses__label {color: var(--t-ink)}
.product-page--lite .product-right .product-buy__info .product-warehouses--preorder {color: var(--t-accent-dark)}
.product-page--lite .product-right .product-buy__info .product-warehouses--notify .product-warehouses__notify-btn {font-size: 13px}
.product-page--lite .product-right .product-price .price-new {color: var(--t-ink); font-weight: 600; margin-right: 12px; font-size: 32px}
.product-page--lite .product-right .product-price .price-old {color: var(--t-muted); font-weight: 400; font-size: 20px; text-decoration: line-through}
.product-page--lite .product-right .product-price .price-normal {color: var(--t-ink); font-size: 32px; font-weight: 600}
.product-page--lite .price-economy {color: #fff; background: var(--t-accent); padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 500; display: inline-block}
.product-page--lite .price-economy span {color: inherit; background: none; padding: 0}
.product-page--lite .product-left .swiper-button-next,.product-page--lite .product-left .swiper-button-prev {width: 40px; opacity: 0; transition: opacity var(--general-transition)}
.product-page--lite .product-left .swiper-button-next:after,.product-page--lite .product-left .swiper-button-prev:after {background: #fff; border-radius: 50%; font-size: 14px; width: 36px; line-height: 36px; text-align: center; color: var(--t-ink); box-shadow: 0 2px 10px rgba(31, 33, 40, .12); padding: 0}
.product-page--lite .product-left:hover .swiper-button-next,.product-page--lite .product-left:hover .swiper-button-prev {opacity: 1}
.product-page--lite .product-left .swiper-button-next:hover:after,.product-page--lite .product-left .swiper-button-prev:hover:after {color: var(--t-accent); background: unset}
.product-page--lite .header-tabs {display: flex; width: 100%; margin-bottom: 10px; border-bottom: 1px solid var(--t-line); overflow-y: hidden; overflow-x: auto}
.product-page--lite .header-tabs a {padding: 14px 0; margin-right: 28px; position: relative; font-weight: 500; font-size: 16px; color: var(--t-muted); white-space: nowrap; transition: color var(--general-transition); border-left: unset; border-top: unset; border-right: unset; background: unset}
.product-page--lite .header-tabs a.active:before {position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; content: ''; background: var(--t-ink); top: unset}
.product-page--lite .header-tabs a.active {color: var(--t-ink); background: unset}
.product-page--lite .header-tabs a:hover {color: var(--t-ink); background: unset}
.product-page--lite .recommend__title {font-size: 24px; font-weight: 500; color: var(--t-ink)}
.product-page--lite .recommend__btns {order: 5; width: 100%; margin-top: auto}
.product-page--lite .recommend .add-to-cart {margin-top: 12px; width: 100%; margin-right: 0px}
@media (min-width: 769px) and (max-width: 992px) {
    .product-page--lite .product-left {width: 45%}
    .product-page--lite .product-right {width: 55%; padding-left: 28px; grid-template-columns: 1fr; gap: 20px}
    .product-page--lite .product-buy {position: static}
}
@media (max-width: 768px) {
    .product-page--lite .product-left {width: 100%}
    .product-page--lite .product-right {padding: 10px 0; width: 100%; grid-template-columns: 1fr; gap: 20px}
    .product-page--lite .product-buy {position: static; order: -1}
}
.product-page--lite .es-char-value {color: inherit}
/* ревью В14 (вкус): бейджи «Новинка/Акция/Хит» (.item-share, left:8px абсолютно в .product-left) перекрывали
   левую колонку миниатюр (.productSwiper_thumbs, 20% + отступ 10px) — только там, где миниатюры слева (desktop/
   планшет, ≥769px); на ≤768px .product-slider уже в столбец, бейдж остаётся над самим фото */
/* 24.10 косяк 16: сдвиг только когда миниатюры слева действительно есть (одна картинка — без колонки миниатюр, плашки
   висели посреди фото); по умолчанию — в углу блока фото, в строку */
.product-page--lite .item-share {left: 8px; top: 8px; z-index: 3; flex-direction: row; flex-wrap: wrap; gap: 4px}
.product-page--lite .item-share span {margin: 0}
@media (min-width: 769px) {
    .product-page--lite .product-left:has(.productSwiper_thumbs, .product-left__images) .item-share {left: calc(20% + 18px)}
}
/* ревью В9: «Выбрать вариант» — без своего стиля (class="button2" ничем не определён) была синей системной
   ссылкой; оформляем как кнопку темы, как остальные действия в карточке покупки */
.product-page--lite .es-vt-choose {display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; line-height: 46px; font-size: 15px; font-weight: 500; text-align: center; color: #fff; background: var(--t-accent); border-radius: var(--t-r-sm); text-decoration: none; transition: background var(--general-transition)}
.product-page--lite .es-vt-choose:hover {background: var(--t-accent-dark); color: #fff}
/* 24.10 косяк 18: заголовки групп характеристик во вкладке (product/components/options.php) */
.es-char-group th {padding: 22px 0 8px; font-size: 16px; font-weight: 600; text-align: left; color: var(--t-ink, #1f2128); border: 0}
.es-char-group:first-child th {padding-top: 4px}

/* 24.10 (правки публички п.4: «снизу много пустого места»): на ПК карточка — сетка «фото | описание | покупка»; колонка
   покупки занимает строки фото и вкладок, поэтому вкладки начинаются сразу под фото, а не под всей правой колонкой (липкой её
   не делаем: в сетке Chrome держит липкий блок до конца всего контейнера, и он наезжал бы на «Рекомендуемые товары») */
@media (min-width: 993px) {
    .product-page--lite .product-item__block .category-right {display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 33fr) 320px; column-gap: 36px; align-items: start}
    .product-page--lite .category-right > * {grid-column: 1 / -1; min-width: 0}
    .product-page--lite .category-right > .product-left {grid-column: 1; grid-row: 1; width: auto}
    .product-page--lite .category-right > .product-right {display: contents}
    .product-page--lite .product-right > .product-info {grid-column: 2; grid-row: 1; padding-top: 10px}
    .product-page--lite .product-right > .product-buy {grid-column: 3; grid-row: 1 / 4; align-self: start; padding-top: 10px; position: static}
    .product-page--lite .category-right > .es-vt-section {grid-column: 1 / 3; grid-row: 2}
    .product-page--lite .category-right > .products-tabs,
    .product-page--lite .category-right > .product__data-type-2 {grid-column: 1 / 3; grid-row: 3}
    .product-page--lite .category-right > .buy-extra-tabs {grid-column: 1 / -1; grid-row: 4}
}

/* 24.10 (правки публички п.35, телефон): варианты — строка с внутренними отступами (выбранная подсвечена не впритык к
   тексту), «В корзину» и счётчик во всю ширину; «Цена для компании» — меткой над ценой, длинная цена не растягивает страницу */
@media (max-width: 600px) {
    .es-vt tr {padding: 12px 12px; border-radius: var(--t-r-sm, 8px)}
    .es-vt tr.is-current td {background: none}
    .es-vt tr.is-current {background: rgba(31, 111, 235, .05)}
    .es-vt td.es-vt-buy {width: 100%; padding-top: 8px; white-space: normal}
    .es-vt-actions {width: 100%; margin-top: 0}
    .es-vt-actions .add-to-cart.active, .es-vt-actions .catalog-item__counter.active {flex: 1 1 100%; width: 100%}
    .es-vt-actions .get-price {width: 100%}
    .es-vt td.es-vt-price {white-space: normal}
    .es-vt .price-b2b-label {margin-right: 6px}
    .product-page--lite .es-vt-summary-price {white-space: normal; font-size: 24px}
    .product-page--lite .es-vt-summary-price .price-b2b-label {display: block; width: fit-content; margin: 0 0 6px}
    .product-page--lite .product-buy, .product-page--lite .product-buy__card {min-width: 0; max-width: 100%}
}
.product-page--lite .product-buy .product__cart-action.catalog-item__actions:has(.catalog-item__counter:not(.active)) > .add-to-cart-btn.add-to {flex: 1 1 100%; margin-right: 0 !important; max-width: none} /* 25.10: «В корзину» шириной с «Купить в 1 клик» */

/* ========== 26.10 шлифовка публичной части ========== */
/* одно фото товара — во всю ширину колонки (было 70% с полями по 15%), слот 4:3 вместо квадрата — меньше пустоты над
   горизонтальным фото и под ним (на телефоне — так же) */
.product-page--lite .product-slider .one-image {width: 100%; margin: 0}
.product-page--lite .product-slider .one-image:after {padding-bottom: 80%}
/* 26.10 Преимущества (product/components/benefits.php) в карточке под ценой: строки во всю ширину карточки, без лишних
   отступов у первой и последней */
.product-page--lite .product-buy__info .pb .pb-item:first-child .pb-row {padding-top: 0; min-height: 52px}
.product-page--lite .product-buy__info .pb .pb-item:last-child .pb-row {padding-bottom: 0; min-height: 52px}
.product-page--lite .product-buy__info .pb + * {padding-top: 12px; border-top: 1px solid var(--t-line)}
/* 27.10: до подвала — 56px от страницы (свои 20 + 10 у колонки и вкладок давали 96) */
.product-page--lite .product-item__block > .category-right {margin-bottom: 0}
.product-page--lite .category-right > .products-tabs:last-child {padding-bottom: 0}
/* 27.10 п.32: «Преимущества» — в средней колонке под описанием (без карточки-рамки), справа — только покупка */
.product-page--lite .product-right .pb--v20 {margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--t-line)}
.product-page--lite .product-buy .es-stock {margin-top: 14px}

/* 27.10-2 п.4: «Рекомендуемые / С этим покупают» — вкладками с линией, как в видах 21/22 */
.product-page--lite .buy-header-tabs {display: flex; flex-wrap: nowrap; gap: 24px; margin-bottom: 20px; padding: 0; border: 0; box-shadow: inset 0 -1px 0 var(--t-line); overflow-x: auto; scrollbar-width: none}
.product-page--lite .buy-header-tabs::-webkit-scrollbar {display: none}
.product-page--lite .buy-header-tabs a {flex: 0 0 auto; margin: 0; padding: 0 0 12px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--t-muted); white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; transition: color .15s, border-color .15s}
.product-page--lite .buy-header-tabs a:hover {color: var(--t-ink); background: none}
.product-page--lite .buy-header-tabs a.active {color: var(--t-ink); background: none; border-bottom-color: var(--t-accent)}
@media (max-width: 660px) {.product-page--lite .buy-header-tabs {gap: 16px} .product-page--lite .buy-header-tabs a {font-size: 15px; padding-bottom: 10px}}
.product-page--lite .buy-extra-tabs .buy-change-tab.border-site {border-color: transparent}
.product-page--lite .buy-extra-tabs .buy-change-tab.active.border-site {border-color: var(--t-accent)}
/* 28.10 (к п.7): «В избранное» / «Сравнение» на фото товара — видны всегда. Правило карточек каталога (components/products/20:
   значки прозрачны, пока нет наведения на карточку) срабатывало и здесь — кнопки были невидимы на ПК и телефоне */
.product-page--lite .product-left .catalog-product-additinal {opacity: 1}