/* Страница товара 22 «Без вкладок» (product/item22.php): галерея слева, справа липкая колонка с ценой и кнопками;
   ниже разделы друг под другом с навигацией-пилюлями. Классы — с префиксом pp22. */
.pp22 {--pp22-ink: #1f2128; --pp22-text: #4a4d55; --pp22-muted: #6e717a; --pp22-line: #ececef; --pp22-soft: #f6f6f8;
    --pp22-accent: var(--color-site, #c8152f); --pp22-green: #17803d; --pp22-r: 12px; --pp22-r-sm: 8px; color: var(--pp22-ink)}

.pp22 .pp22-main {display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; padding: 0 0 40px} /* 27.10: верх 0 — от заголовка 22px, как от шапки до крошек */
.pp22 .product-left, .pp22 .product-right {width: auto; padding: 0}

/* галерея: миниатюры слева столбиком */
.pp22 .pp22-gallery {position: relative}
.pp22 .product-slider {display: flex; gap: 14px; align-items: flex-start}
.pp22 .product-slider .productSwiper {order: 2; flex: 1 1 auto; min-width: 0; background: #fff; border-radius: var(--pp22-r); overflow: hidden}
.pp22 .product-left .swiper-slide > *:after {padding-bottom: 100%}
.pp22 .product-left .swiper-slide > * img, .pp22 .one-image img {object-fit: contain; padding: 4%}
.pp22 .one-image {width: 100%; margin: 0; border-radius: var(--pp22-r); overflow: hidden}
.pp22 .product-left__images {order: 1; width: 84px; flex-shrink: 0; margin: 0; display: flex; flex-direction: column; gap: 10px}
.pp22 .product-left__images a {width: 100%; margin: 0; border: 1px solid var(--pp22-line); border-radius: var(--pp22-r-sm); overflow: hidden; cursor: pointer; transition: border-color var(--general-transition, .2s)}
.pp22 .product-left__images a:after {padding-bottom: 100%}
.pp22 .product-left__images a img {padding: 6px}
.pp22 .product-left__images a.active, .pp22 .product-left__images a:hover {border-color: var(--pp22-ink)}
.pp22 .productSwiper_thumbs {order: 1; width: 84px; flex-shrink: 0; margin: 0; max-height: none}
.pp22 .productSwiper_thumbs .swiper-slide {border: 1px solid var(--pp22-line); border-radius: var(--pp22-r-sm); overflow: hidden; cursor: pointer}
.pp22 .productSwiper_thumbs .swiper-slide-thumb-active {border-color: var(--pp22-ink)}
.pp22 .productSwiper_thumbs button {display: block; position: relative; width: 100%; padding: 0; background: none}
.pp22 .productSwiper_thumbs button:after {content: ''; display: block; padding-bottom: 100%}
.pp22 .productSwiper_thumbs button img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px}
.pp22 .product-left .swiper-button-next, .pp22 .product-left .swiper-button-prev {width: 44px}
.pp22 .product-left .swiper-button-next:after, .pp22 .product-left .swiper-button-prev:after {width: 40px; line-height: 40px; padding: 0; font-size: 14px; color: var(--pp22-ink); background: var(--pp22-soft); border-radius: 50%}
.pp22 .product-left .swiper-button-next:hover:after, .pp22 .product-left .swiper-button-prev:hover:after {color: #fff; background: var(--pp22-ink)}
.pp22 .product-left .item-share {left: 98px; top: 12px; z-index: 3}
.pp22 .product-left .one-image ~ .item-share, .pp22 .product-slider:not(:has(.product-left__images, .productSwiper_thumbs)) ~ .item-share {left: 12px}
.pp22 .product-left .item-share span {padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 500}

/* липкая колонка покупки */
.pp22 .pp22-sticky {position: sticky; top: 110px}
.pp22 .pp22-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 14px; font-size: 14px; color: var(--pp22-muted)}
.pp22 .pp22-rating {color: var(--pp22-text)}
.pp22 .pp22-rating span {color: var(--pp22-ink); font-weight: 500}
.pp22 .pp22-rating:hover {color: var(--pp22-accent)}
.pp22 .product-right .pp22-art {margin: 0; color: var(--pp22-muted)}
.pp22 .pp22-brand {margin-left: auto}
.pp22 .pp22-brand img {display: block; max-width: 96px; max-height: 32px}

.pp22 .product-right .pp22-card {margin: 0; padding: 24px; background: var(--pp22-soft); border-radius: var(--pp22-r)}
.pp22 .pp22-card__top {display: flex; align-items: flex-start; gap: 12px}
.pp22 .pp22-card__top .product-price {flex: 1 1 auto; min-width: 0}
.pp22 .product-right .product-price {align-items: baseline; gap: 4px 12px}
.pp22 .product-right .product-price .price-new, .pp22 .product-right .product-price .price-normal {margin: 0; font-size: 32px; line-height: 1.1; font-weight: 500; color: var(--pp22-ink)}
.pp22 .product-right .product-price .price-old {font-size: 18px; font-weight: 400; color: var(--pp22-muted)}
.pp22 .product-right .price-economy {margin: 4px 0 0; padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #fff; background: var(--pp22-green)}
.pp22 .product-right .price-economy span {padding: 0; color: inherit; background: none}
.pp22 .product-right .product-price .no-price {font-size: 18px; color: var(--pp22-muted)}
.pp22 .pp22-icons {display: flex; gap: 6px; flex-shrink: 0}
.pp22 .pp22-icons button {width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #fff; color: var(--pp22-muted); font-size: 17px; transition: color var(--general-transition, .2s)}
.pp22 .pp22-icons button i {display: block; line-height: 40px; text-align: center}
.pp22 .pp22-icons button:hover {color: var(--pp22-ink)}
.pp22 .pp22-icons button.active {color: #fff; background: var(--pp22-accent)}
.pp22 .product__variations-block {margin-top: 18px}
.pp22 .product-right .product-basket {display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px}
.pp22 .product-basket .product__cart-action {order: 0; display: flex; gap: 8px; width: 100%; margin: 0}
.pp22 .product-right .product-basket #add-to-cart {display: flex; flex-direction: column; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 0 20px; font-size: 16px; font-weight: 500; line-height: 1.15; color: #fff; background: var(--pp22-accent); border-radius: var(--pp22-r-sm); transition: filter var(--general-transition, .2s)}
.pp22 .product-right .product-basket #add-to-cart:hover {color: #fff; background: var(--pp22-accent); filter: brightness(.9)}
.pp22 .product-right .product-basket #add-to-cart.active {color: #fff; background: var(--es-green, #1a9a4b)} /* 27.10-2 п.5: «В корзине» — зелёная (в п.17 было красной по ошибке) */
.pp22 .product-right .product-basket #add-to-cart small {font-size: 12px; font-weight: 400; color: inherit; opacity: .8}
.pp22 .product-actions .catalog-item__counter {width: 132px; flex-shrink: 0; margin: 0; border-radius: var(--pp22-r-sm); overflow: hidden}
.pp22 .product-actions .catalog-item__counter button {width: 40px; line-height: 52px; font-weight: 400; background: #fff; border-radius: 0}
.pp22 .product-actions .catalog-item__counter input {height: 52px; width: 52px; font-size: 16px; background: #fff}
.pp22 .product-basket #in-click {order: 1; width: 100%; min-height: 48px; padding: 0 20px; font-size: 15px; font-weight: 500; color: var(--pp22-ink); background: var(--es-btn2, #e5e7ec); border: 0; border-radius: var(--pp22-r-sm); transition: background var(--general-transition, .2s)} /* 27.10 п.20: серая без рамки (на серой карточке — на тон темнее) */
.pp22 .product-basket #in-click:hover {color: var(--pp22-ink); background: var(--es-btn2-h, #d8dbe2)} /* 27.10-2 п.2: серый ярче */
.pp22 .pp22-card__info {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 18px; font-size: 14px}
.pp22 .pp22-card__info .product-aviability {margin: 0; font-weight: 500}
.pp22 .pp22-card__info .in-stock {color: var(--pp22-green)}
.pp22 .pp22-card__info .in-stock:before {content: "● "; font-size: 10px; vertical-align: 2px}
.pp22 .pp22-card__info .noin-stock {color: var(--pp22-text)}
.pp22 .pp22-card__info a, .pp22 .product-right .pp22-card__info .found-cheaper {padding: 0; font-size: 14px; color: var(--pp22-text); background: none; border: 0; text-decoration: underline; text-decoration-color: #d8d9de; text-underline-offset: 3px}
.pp22 .pp22-card__info a:hover, .pp22 .product-right .pp22-card__info .found-cheaper:hover {color: var(--pp22-accent)}

.pp22 .pp22-share {margin-top: 12px; padding: 12px 16px; font-size: 14px; color: var(--pp22-ink); background: #fff6e0; border-radius: var(--pp22-r-sm)}
.pp22 .pp22-share strong {margin-right: 8px; font-weight: 500; color: var(--pp22-accent)}
.pp22 .pp22-short {list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px}
.pp22 .pp22-short li {display: flex; align-items: baseline; gap: 8px; font-size: 14px}
.pp22 .pp22-short li span {flex-shrink: 0; max-width: 55%; color: var(--pp22-muted)}
.pp22 .pp22-short li span:after {content: ''}
.pp22 .pp22-short li b {font-weight: 400; color: var(--pp22-ink); margin-left: auto; text-align: right}
.pp22 .pp22-short li:before {content: none}
.pp22 .pp22-anchor, .pp22 .pp22-desc #btn-more {display: inline-block; margin-top: 10px; font-size: 14px; color: var(--pp22-accent); text-decoration: none; cursor: pointer}
.pp22 .pp22-anchor:hover, .pp22 .pp22-desc #btn-more:hover {text-decoration: underline}
.pp22 .pp22-desc {margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--pp22-text)}
.pp22 .pp22-desc p {margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden}

/* пилюли-якоря и разделы */
.pp22 .pp22-nav {display: flex; gap: 8px; margin: 8px 0 8px; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none}
.pp22 .pp22-nav::-webkit-scrollbar {display: none}
.pp22 .pp22-nav__pill {flex-shrink: 0; padding: 10px 20px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--pp22-ink); background: var(--pp22-soft); border-radius: var(--pp22-r-sm); white-space: nowrap; transition: background var(--general-transition, .2s), color var(--general-transition, .2s)}
.pp22 .pp22-nav__pill:hover {background: var(--pp22-line); color: var(--pp22-ink)}
.pp22 .pp22-nav__pill.active {color: #fff; background: var(--pp22-ink)}
.pp22 .pp22-sections {max-width: 1000px}
.pp22 .pp22-section {padding: 36px 0; border-bottom: 1px solid var(--pp22-line); scroll-margin-top: 110px}
.pp22 .pp22-section:last-child {border-bottom: 0}
.pp22 .pp22-section__title {margin: 0 0 20px; font-size: 26px; line-height: 1.2; font-weight: 500; color: var(--pp22-ink)}
.pp22 .pp22-section__body {font-size: 15px; line-height: 1.65; color: var(--pp22-text)}
.pp22 .pp22-section__body .h3 {font-weight: 500}
.pp22 .main-options table {width: 100%; min-width: 0; max-width: none; border-collapse: collapse}
.pp22 .main-options table td {padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--pp22-line)}
.pp22 .main-options table tr:not(:last-child) td {border-bottom: 1px solid var(--pp22-line)}
.pp22 .main-options table td:first-child {width: 50%; padding-right: 20px; color: var(--pp22-muted)}
.pp22 .main-options table td:last-child {font-weight: 400; color: var(--pp22-ink)}

/* рекомендуемые / с этим покупают */
.pp22 .pp22-extra {margin: 12px 0 48px}
/* 27.10 п.35: «Рекомендуемые / С этим покупают» — вкладками-ссылками с линией под выбранной (общий вид темы), не «таблетками»,
   как меню разделов выше: было неотличимо от него и с обрывком красной линии снизу */
.pp22 .buy-header-tabs {display: flex; flex-wrap: nowrap; gap: 24px; margin-bottom: 20px; padding: 0; border: 0; box-shadow: inset 0 -1px 0 var(--pp22-line); overflow-x: auto; scrollbar-width: none}
.pp22 .buy-header-tabs::-webkit-scrollbar {display: none}
.pp22 .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(--pp22-muted); white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; transition: color .15s, border-color .15s}
.pp22 .buy-header-tabs a:hover {color: var(--pp22-ink); background: none}
.pp22 .buy-header-tabs a.active {color: var(--pp22-ink); background: none; border-bottom-color: var(--pp22-accent)}
@media (max-width: 660px) {.pp22 .buy-header-tabs {gap: 16px} .pp22 .buy-header-tabs a {font-size: 15px; padding-bottom: 10px}}

@media (max-width: 1200px) {
    .pp22 .pp22-main {grid-template-columns: minmax(0, 1fr) 360px; gap: 32px}
}
@media (max-width: 992px) {
    .pp22 .pp22-main {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px}
    .pp22 .product-left__images, .pp22 .productSwiper_thumbs {width: 64px}
    .pp22 .product-left .item-share {left: 76px}
}
@media (max-width: 768px) {
    .pp22 .pp22-main {grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 24px}
    .pp22 .pp22-sticky {position: static}
    .pp22 .product-right {padding: 0}
}
@media (max-width: 660px) {
    .pp22 .product-slider {flex-direction: column}
    .pp22 .product-slider .productSwiper {order: 1; width: 100%}
    .pp22 .product-left__images {order: 2; width: 100%; flex-direction: row}
    .pp22 .product-left__images a {width: 64px}
    .pp22 .productSwiper_thumbs {order: 2; width: 100%}
    .pp22 .product-left .item-share {left: 12px}
    .pp22 .product-right .pp22-card {padding: 18px}
    .pp22 .product-right .product-price .price-new, .pp22 .product-right .product-price .price-normal {font-size: 26px}
    .pp22 .product-right .product-basket {margin-bottom: 0}
    .pp22 .product-right .product-basket > * {margin-bottom: 0}
    .pp22 .pp22-section {padding: 28px 0}
    .pp22 .pp22-section__title {font-size: 22px}
    .pp22 .main-options table td {font-size: 14px}
}

/* 26.10: блок цены — цена целой строкой, «Сообщить о снижении цены» под ней, значки избранного/сравнения справа вверху; галерея — по высоте фото (была пустота под ним) */
.pp22-card__top {flex-wrap: wrap; align-items: flex-start; position: relative; padding-right: 92px}
.pp22-card__top .product-price {flex: 1 1 100%; width: 100%}
.pp22-card__top .product-price .price-normal, .pp22-card__top .product-price .price-new {white-space: nowrap; font-size: 30px}
.pp22-card__top .es-price-watch {flex: 1 1 100%; width: 100%; margin-top: 6px; text-align: left}
.pp22-card__top .es-price-watch__btn {display: inline-flex; align-items: center; gap: 6px; padding: 0; text-align: left}
.pp22-card__top .pp22-icons {position: absolute; right: 0; top: 4px}
.pp22-gallery {align-self: start}
.pp22-gallery .one-image {width: 100%; margin: 0}
.pp22-gallery .one-image:after {padding-bottom: 80%}
/* 26.10 Преимущества (product/components/benefits.php) — под серой карточкой цены */
.pp22 .pb--v22 {margin-top: 12px}
/* 27.10: последний раздел без нижнего отступа и линии — до подвала 56px от страницы (было 92) */
.pp22 .pp22-section:last-child {padding-bottom: 0; border-bottom: 0}
/* 27.10 п.15: меню разделов едет за прокруткой — под шапкой (верх ставит скрипт item22.php по высоте липкой шапки, здесь — запас) */
.pp22 .pp22-nav {position: sticky; top: 81px; z-index: 30; margin: 8px 0; padding: 10px 0; background: #fff; box-shadow: 0 1px 0 var(--pp22-line)}
@media (max-width: 768px) {.pp22 .pp22-nav {top: 62px; padding: 8px 0}}
/* 27.10 п.14: «В избранное» и «В сравнение» — в правом верхнем углу фото (в карточке цены наезжали на цену) */
.pp22 .pp22-gallery {position: relative}
.pp22 .pp22-icons--photo {position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px}
.pp22 .pp22-icons--photo button {box-shadow: 0 2px 10px rgba(31, 33, 40, .12)}
.pp22 .pp22-icons--photo button.active {color: #fff; background: var(--pp22-accent)}
.pp22 .pp22-card__top {padding-right: 0}