/* Страница товара 21 «Классика» (product/item21.php): большая галерея слева с миниатюрами снизу, справа название,
   рейтинг, крупная цена, кнопки, наличие и доставка списком; ниже вкладки во всю ширину. Классы — с префиксом pp21. */
.pp21 {--pp21-ink: #1f2128; --pp21-text: #4a4d55; --pp21-muted: #6e717a; --pp21-line: #ececef; --pp21-soft: #f6f6f8; --pp21-photo: #fff;
    --pp21-accent: var(--color-site, #c8152f); --pp21-green: #17803d; --pp21-r: 12px; --pp21-r-sm: 8px; color: var(--pp21-ink)}
/* H1 страницы — в шапке с крошками; на этом виде название показано справа от фото, а H1 оставлен для поисковиков */
body:has(.pp21) .block-breadcrumb h1 {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap}

.pp21 .pp21-main {display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 0 0 48px} /* 27.10: верх 0 — от крошек 22px, как от шапки до крошек */
body:has(.pp21) .block-breadcrumb .breadcrumb {margin-bottom: 0} /* h1 в этом виде — в правой колонке, под крошками сразу содержимое */
.pp21 .product-left, .pp21 .product-right {width: auto; padding: 0}

/* галерея */
.pp21 .pp21-gallery {position: relative}
.pp21 .product-slider {display: flex; flex-direction: column; gap: 12px}
.pp21 .product-slider .productSwiper {order: 1; width: 100%; background: var(--pp21-photo); border: 1px solid var(--pp21-line); border-radius: var(--pp21-r); overflow: hidden}
.pp21 .product-left .swiper-slide > *:after {padding-bottom: 100%}
.pp21 .product-left .swiper-slide > * img, .pp21 .one-image img {object-fit: contain; padding: 6%; mix-blend-mode: multiply}
.pp21 .one-image {width: 100%; margin: 0; background: var(--pp21-photo); border: 1px solid var(--pp21-line); border-radius: var(--pp21-r); overflow: hidden}
.pp21 .product-left__images {order: 2; width: 100%; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px}
.pp21 .product-left__images a {width: 76px; margin: 0; flex-shrink: 0; background: var(--pp21-photo); border: 2px solid var(--pp21-line); border-radius: var(--pp21-r-sm); overflow: hidden; cursor: pointer; transition: border-color var(--general-transition, .2s)}
.pp21 .product-left__images a:after {padding-bottom: 100%}
.pp21 .product-left__images a img {padding: 6px; mix-blend-mode: multiply}
.pp21 .product-left__images a.active, .pp21 .product-left__images a:hover {border-color: var(--pp21-accent)}
.pp21 .productSwiper_thumbs {order: 2; width: 100%; max-height: none; margin: 0}
.pp21 .productSwiper_thumbs .swiper-slide {border: 2px solid var(--pp21-line); border-radius: var(--pp21-r-sm); background: var(--pp21-photo); overflow: hidden; cursor: pointer}
.pp21 .productSwiper_thumbs .swiper-slide-thumb-active {border-color: var(--pp21-accent)}
.pp21 .productSwiper_thumbs button {display: block; position: relative; width: 100%; padding: 0; background: none}
.pp21 .productSwiper_thumbs button:after {content: ''; display: block; padding-bottom: 100%}
.pp21 .productSwiper_thumbs button img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply}
.pp21 .product-left .swiper-button-next, .pp21 .product-left .swiper-button-prev {width: 44px; opacity: 0; transition: opacity var(--general-transition, .2s)}
.pp21 .product-left:hover .swiper-button-next, .pp21 .product-left:hover .swiper-button-prev {opacity: 1}
.pp21 .product-left .swiper-button-next:after, .pp21 .product-left .swiper-button-prev:after {width: 40px; line-height: 40px; padding: 0; font-size: 14px; color: var(--pp21-ink); background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(31, 33, 40, .12)}
.pp21 .product-left .swiper-button-next:hover:after, .pp21 .product-left .swiper-button-prev:hover:after {color: #fff; background: var(--pp21-accent)}
.pp21 .product-left .item-share {left: 14px; top: 14px; z-index: 3}
.pp21 .product-left .item-share span {padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 500}

/* справа: бренд, название, рейтинг */
.pp21 .pp21-brand {display: inline-block; margin-bottom: 14px}
.pp21 .pp21-brand img {display: block; max-width: 120px; max-height: 40px}
.pp21 .pp21-title {font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--pp21-ink)}
.pp21 .pp21-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 14px; color: var(--pp21-muted)}
.pp21 .pp21-stars {position: relative; display: inline-block; font-size: 16px; line-height: 1; color: #dcdde2}
.pp21 .pp21-stars:before {content: "★★★★★"}
.pp21 .pp21-stars:after {content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--pp21-rate, 0%); overflow: hidden; color: #f5a623; white-space: nowrap}
.pp21 .pp21-rate {margin-left: -8px; font-weight: 500; color: var(--pp21-ink)}
.pp21 .pp21-reviews-link {color: var(--pp21-text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pp21-line); text-underline-offset: 3px}
.pp21 .pp21-reviews-link:hover {color: var(--pp21-accent)}
.pp21 .product-right .pp21-art {margin: 0; color: var(--pp21-muted)}

/* покупка: цена, варианты, кнопки */
.pp21 .product-right .pp21-buy {margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--pp21-line)}
.pp21 .product-right .product-price {align-items: baseline; gap: 6px 14px}
.pp21 .product-right .product-price .price-new, .pp21 .product-right .product-price .price-normal {margin: 0; font-size: 36px; line-height: 1.1; font-weight: 500; color: var(--pp21-ink)}
.pp21 .product-right .product-price .price-new {color: var(--pp21-accent)}
.pp21 .product-right .product-price .price-old {font-size: 20px; font-weight: 400; color: var(--pp21-muted)}
.pp21 .product-right .price-economy {margin: 0; padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #fff; background: var(--pp21-accent)}
.pp21 .product-right .price-economy span {padding: 0; color: inherit; background: none}
.pp21 .product-right .product-price .no-price {font-size: 18px; color: var(--pp21-muted)}
.pp21 .product__variations-block {margin-top: 20px}
.pp21 .product-right .product-basket {display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 22px}
.pp21 .product-basket .product__cart-action {order: 0; display: flex; gap: 10px; margin: 0}
.pp21 .product-basket #in-click {order: 1}
.pp21 .product-right .product-basket #add-to-cart {display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 200px; min-height: 52px; margin: 0; padding: 0 28px; font-size: 16px; font-weight: 500; line-height: 1.15; color: #fff; background: var(--pp21-accent); border-radius: var(--pp21-r-sm); transition: filter var(--general-transition, .2s)}
.pp21 .product-right .product-basket #add-to-cart:hover {color: #fff; background: var(--pp21-accent); filter: brightness(.9)}
.pp21 .product-right .product-basket #add-to-cart.active {color: #fff; background: var(--es-green, #1a9a4b)} /* 27.10-2 п.5: «В корзине» — зелёная (в п.17 было красной по ошибке) */
.pp21 .product-right .product-basket #add-to-cart small {font-size: 12px; font-weight: 400; color: inherit; opacity: .8}
.pp21 .product-actions .catalog-item__counter {width: 132px; margin: 0; border-radius: var(--pp21-r-sm); overflow: hidden}
.pp21 .product-actions .catalog-item__counter button {width: 40px; line-height: 52px; font-weight: 400; background: var(--pp21-soft); border-radius: 0}
.pp21 .product-actions .catalog-item__counter input {height: 52px; width: 52px; font-size: 16px; background: var(--pp21-soft)}
.pp21 .product-basket #in-click {min-height: 52px; padding: 0 24px; font-size: 15px; font-weight: 500; color: var(--pp21-ink); background: var(--es-btn2, #e5e7ec); border: 0; border-radius: var(--pp21-r-sm); transition: background var(--general-transition, .2s)} /* 27.10 п.20: серая без рамки, как счётчик */
.pp21 .product-basket #in-click:hover {background: var(--es-btn2-h, #d8dbe2)} /* 27.10-2 п.2: серый ярче */

.pp21 .pp21-add {display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px}
.pp21 .pp21-add__btn {display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; color: var(--pp21-text); background: none}
.pp21 .pp21-add__btn i {font-size: 17px; color: var(--pp21-muted)}
.pp21 .pp21-add__btn:hover, .pp21 .pp21-add__btn:hover i {color: var(--pp21-accent)}
.pp21 .pp21-add__btn.active i {color: var(--pp21-accent)}

.pp21 .pp21-facts {list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--pp21-line)}
.pp21 .pp21-facts li {display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 0; font-size: 15px; color: var(--pp21-ink); border-bottom: 1px solid var(--pp21-line)}
.pp21 .pp21-facts li i {width: 20px; flex-shrink: 0; font-size: 18px; text-align: center; color: var(--pp21-muted)}
.pp21 .pp21-facts li.in-stock, .pp21 .pp21-facts li.in-stock i {color: var(--pp21-green)}
.pp21 .pp21-facts li.noin-stock {color: var(--pp21-text)}
.pp21 .pp21-facts a, .pp21 .product-right .pp21-facts .found-cheaper {padding: 0; font-size: 15px; color: var(--pp21-ink); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--pp21-line); text-underline-offset: 3px}
.pp21 .pp21-facts a:hover, .pp21 .product-right .pp21-facts .found-cheaper:hover {color: var(--pp21-accent)}

.pp21 .pp21-share {margin-top: 20px; padding: 14px 16px; font-size: 14px; color: var(--pp21-ink); background: #fff6e0; border-radius: var(--pp21-r-sm)}
.pp21 .pp21-share strong {margin-right: 8px; font-weight: 500; color: var(--pp21-accent)}
.pp21 .pp21-desc {margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--pp21-text)}
.pp21 .pp21-desc p {margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden}
.pp21 .pp21-desc #btn-more {margin-top: 8px; font-size: 14px; color: var(--pp21-ink); cursor: pointer}
.pp21 .pp21-desc #btn-more:hover {color: var(--pp21-accent)}

/* вкладки во всю ширину */
.pp21 .products-tabs {padding: 0; margin-bottom: 40px}
.pp21 .header-tabs {gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--pp21-line)}
.pp21 .header-tabs a {margin: 0; padding: 16px 22px; font-size: 16px; font-weight: 500; color: var(--pp21-muted); background: none; border: 0; cursor: pointer; transition: color var(--general-transition, .2s)}
.pp21 .header-tabs a:hover {color: var(--pp21-ink); background: none}
.pp21 .header-tabs a.active {color: var(--pp21-ink); background: none}
.pp21 .header-tabs a.active:before {top: auto; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pp21-accent)}
.pp21 .header-tabs a.active:after {content: none}
.pp21 .main-tabs {padding: 0; font-size: 15px; line-height: 1.6; color: var(--pp21-text)}
.pp21 .main-tabs .h3 {font-weight: 500}
.pp21 .main-options table {width: 100%; max-width: 860px; min-width: 0}
.pp21 .main-options table td {padding: 12px 16px; font-size: 15px; border: 0}
.pp21 .main-options table tr:nth-child(odd) td {background: var(--pp21-soft)}
.pp21 .main-options table td:first-child {width: 45%; color: var(--pp21-muted); border-radius: 8px 0 0 8px}
.pp21 .main-options table td:last-child {font-weight: 500; color: var(--pp21-ink); border-radius: 0 8px 8px 0}
.pp21 .main-options table tr:not(:last-child) td {border-bottom: 0}
.pp21 .product__data-item {margin-bottom: 32px}
.pp21 .product__data-h2 {display: block; margin-bottom: 14px; font-size: 22px; font-weight: 500; color: var(--pp21-ink)}

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

@media (max-width: 1200px) {
    .pp21 .pp21-main {gap: 36px}
    .pp21 .product-right .product-basket #add-to-cart {min-width: 160px}
}
@media (max-width: 992px) {
    .pp21 .pp21-main {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px}
    .pp21 .pp21-title {font-size: 24px}
    .pp21 .product-right .product-price .price-new, .pp21 .product-right .product-price .price-normal {font-size: 30px}
    .pp21 .product-right .product-basket {flex-direction: row}
}
@media (max-width: 768px) {
    .pp21 .pp21-main {grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 32px}
    .pp21 .product-right {padding: 0}
    .pp21 .product-left__images a {width: 64px}
    .pp21 .product-left .swiper-button-next, .pp21 .product-left .swiper-button-prev {opacity: 1}
}
@media (max-width: 660px) {
    .pp21 .pp21-title {font-size: 22px}
    .pp21 .product-right .product-basket {flex-direction: column; margin-bottom: 0}
    .pp21 .product-right .product-basket > * {margin-bottom: 0}
    .pp21 .product-basket .product__cart-action {width: 100%}
    .pp21 .product-right .product-basket #add-to-cart {flex-grow: 1; min-width: 0}
    .pp21 .product-basket #in-click {width: 100%}
    .pp21 .header-tabs a {padding: 14px 14px; font-size: 15px; white-space: nowrap}
    .pp21 .main-options table td {padding: 10px 12px; font-size: 14px}
}
/* 26.10 Преимущества (product/components/benefits.php) — на месте прежнего списка фактов: линия сверху и снизу */
.pp21 .pb--v21 {margin-top: 24px; border-top: 1px solid var(--pp21-line); border-bottom: 1px solid var(--pp21-line)}
.pp21 .pb--v21 .pb-item + .pb-item {border-top-color: var(--pp21-line)}