/* ============================================================ ПК ============================================================ */ @media (min-width: 992px) { /* ======================================================== 1. НИЖНИЕ ТОВАРНЫЕ СЕТКИ В КАТАЛОГЕ: GAP = 6px Здесь теперь ТОЧНО ТАК ЖЕ. ======================================================== */ html body.single-product section.up-sells.upsells.products > .shop-grid, html body.single-product .related-products > .shop-grid, html body.single-product .related-products .shop-grid, html body.single-product .related.products > .shop-grid { display: grid !important; grid-template-columns: repeat( var(--msk-bottom-columns, 4), minmax(0, 1fr) ) !important; /* * ТОЧНО КАК В КАТАЛОГЕ */ column-gap: 6px !important; row-gap: 14px !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* ======================================================== 2. КАРТОЧКА В каталоге карточкам принудительно ставится: padding-left: 0; padding-right: 0; Здесь теперь ТОЧНО ТАК ЖЕ. ======================================================== */ html body.single-product section.up-sells.upsells.products > .shop-grid > .shop-item, html body.single-product .related-products .shop-grid > .shop-item, html body.single-product .related.products > .shop-grid > .shop-item { float: none !important; clear: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; /* * ТОЧНО КАК В КАТАЛОГЕ */ padding-left: 0 !important; padding-right: 0 !important; flex: none !important; align-self: stretch !important; box-sizing: border-box !important; } /* ======================================================== 3. ЗОЛОТАЯ КАРТОЧКА ======================================================== */ html body.single-product section.up-sells.upsells.products .shop-item > .shop-item-inner, html body.single-product .related-products .shop-item > .shop-item-inner, html body.single-product .related.products .shop-item > .shop-item-inner { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; box-sizing: border-box !important; } /* ======================================================== 4. НАЗВАНИЕ Единая зона во всех нижних блоках. ======================================================== */ html body.single-product section.up-sells.upsells.products .shop-item .shop-item__title, html body.single-product section.up-sells.upsells.products .shop-item .woocommerce-loop-product__title, html body.single-product .related-products .shop-item .shop-item__title, html body.single-product .related-products .shop-item .woocommerce-loop-product__title, html body.single-product .related.products .shop-item .shop-item__title, html body.single-product .related.products .shop-item .woocommerce-loop-product__title { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; min-height: 68px !important; height: auto !important; max-height: none !important; margin-top: 0 !important; margin-bottom: 5px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* ======================================================== 5. ЦЕНА ======================================================== */ html body.single-product section.up-sells.upsells.products .shop-item .shop-item__price, html body.single-product .related-products .shop-item .shop-item__price, html body.single-product .related.products .shop-item .shop-item__price { min-height: 20px !important; margin: 0 0 5px !important; padding: 0 !important; flex: 0 0 auto !important; } html body.single-product section.up-sells.upsells.products .shop-item .shop-item__price > .price, html body.single-product .related-products .shop-item .shop-item__price > .price, html body.single-product .related.products .shop-item .shop-item__price > .price { margin: 0 !important; } /* ======================================================== 6. НАЛИЧИЕ ======================================================== */ html body.single-product section.up-sells.upsells.products .shop-item .shop-item__in-stock, html body.single-product section.up-sells.upsells.products .shop-item .shop-item__out-of-stock, html body.single-product .related-products .shop-item .shop-item__in-stock, html body.single-product .related-products .shop-item .shop-item__out-of-stock, html body.single-product .related.products .shop-item .shop-item__in-stock, html body.single-product .related.products .shop-item .shop-item__out-of-stock { min-height: 22px !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; flex: 0 0 auto !important; } /* ======================================================== 7. КОРЗИНА + БРЕНД ======================================================== */ html body.single-product .shop-grid .shop-item .msk-final-card-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 35px !important; margin: auto 0 0 !important; padding: 5px 0 0 !important; box-sizing: border-box !important; } /* ======================================================== 8. БРЕНД + КОРЗИНА РОВНАЯ ВЕРТИКАЛЬ ШИРИНУ ЗДЕСЬ НЕ ТРОГАЕМ. ======================================================== */ html body.single-product .shop-grid .shop-item .msk-final-card-row > .msk-final-cart, html body.single-product .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand { position: relative !important; top: 0 !important; bottom: auto !important; transform: none !important; align-self: center !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin-top: 0 !important; margin-bottom: 0 !important; color: #8b6839 !important; -webkit-text-fill-color: #8b6839 !important; box-sizing: border-box !important; } /* ======================================================== 9. БРЕНД — VISITED ======================================================== */ html body.single-product .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand:link, html body.single-product .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand:visited, html body.single-product .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand:active { color: #8b6839 !important; -webkit-text-fill-color: #8b6839 !important; } /* ======================================================== 10. HOVER НЕ ПОДНИМАЕТ КНОПКИ ======================================================== */ html body.single-product .shop-grid .shop-item .msk-final-cart:hover, html body.single-product .shop-grid .shop-item .msk-final-brand:hover, html body.single-product .shop-grid .shop-item .msk-final-cart:focus-visible, html body.single-product .shop-grid .shop-item .msk-final-brand:focus-visible { transform: none !important; top: 0 !important; } } /* ============================================================ МОБИЛЬНАЯ СЕТКУ НЕ ТРОГАЕМ. Только сохраняем одинаковый цвет бренда. ============================================================ */ @media (max-width: 767px) { html body .shop-item .msk-final-card-row > a.msk-final-brand, html body .shop-item .msk-final-card-row > a.msk-final-brand:link, html body .shop-item .msk-final-card-row > a.msk-final-brand:visited, html body .shop-item .msk-final-card-row > a.msk-final-brand:active { color: #8b6839 !important; -webkit-text-fill-color: #8b6839 !important; transform: none !important; } }