/* ============================================================ ТОЛЬКО ПК ============================================================ */ @media (min-width: 992px) { /* ======================================================== 1. СЕТКА КАТАЛОГА ======================================================== */ html body.woocommerce.archive .site-main .shop-grid, html body.post-type-archive-product.woocommerce .site-main .shop-grid { display: grid !important; grid-template-columns: repeat( var(--msk-catalog-columns, 4), minmax(0, 1fr) ) !important; /* * ТОЧНО КАК В V11. */ 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. ОДНА КАРТОЧКА Сбрасываем старые ширины Bono. Размер теперь определяет сама сетка. ======================================================== */ html body.woocommerce.archive .site-main .shop-grid > .shop-item, html body.post-type-archive-product.woocommerce .site-main .shop-grid > .shop-item { float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; flex-basis: auto !important; margin: 0 !important; /* * Как в V11. */ padding-left: 0 !important; padding-right: 0 !important; align-self: stretch !important; box-sizing: border-box !important; } /* ======================================================== 3. ВНУТРЕННЯЯ ЗОЛОТАЯ КАРТОЧКА ======================================================== */ html body.woocommerce.archive .site-main .shop-grid > .shop-item > .shop-item-inner, html body.post-type-archive-product.woocommerce .site-main .shop-grid > .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.woocommerce.archive .site-main .shop-grid .shop-item .shop-item__title, html body.woocommerce.archive .site-main .shop-grid .shop-item .woocommerce-loop-product__title, html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .shop-item__title, html body.post-type-archive-product.woocommerce .site-main .shop-grid .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-bottom: 5px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* ======================================================== 5. ЦЕНА ======================================================== */ html body.woocommerce.archive .site-main .shop-grid .shop-item .shop-item__price, html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .shop-item__price { min-height: 20px !important; margin: 0 0 5px !important; padding: 0 !important; flex: 0 0 auto !important; } html body.woocommerce.archive .site-main .shop-grid .shop-item .shop-item__price > .price, html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .shop-item__price > .price { margin: 0 !important; } /* ======================================================== 6. НАЛИЧИЕ ======================================================== */ html body.woocommerce.archive .site-main .shop-grid .shop-item .shop-item__in-stock, html body.woocommerce.archive .site-main .shop-grid .shop-item .shop-item__out-of-stock, html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .shop-item__in-stock, html body.post-type-archive-product.woocommerce .site-main .shop-grid .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.woocommerce.archive .site-main .shop-grid .shop-item .msk-final-card-row, html body.post-type-archive-product.woocommerce .site-main .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.woocommerce.archive .site-main .shop-grid .shop-item .msk-final-card-row > .msk-final-cart, html body.woocommerce.archive .site-main .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand, html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .msk-final-card-row > .msk-final-cart, html body.post-type-archive-product.woocommerce .site-main .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. GAMMA&BROSS Текст не уменьшаем и не режем. При 110% ей уже будет достаточно места, потому что ряд станет трёхколоночным. ======================================================== */ html body.woocommerce.archive .site-main .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand[href*="gamma-bross"], html body.post-type-archive-product.woocommerce .site-main .shop-grid .shop-item .msk-final-card-row > a.msk-final-brand[href*="gamma-bross"] { width: max-content !important; min-width: max-content !important; max-width: none !important; flex: 0 0 auto !important; flex-shrink: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; transform: none !important; } /* ======================================================== 10. VISITED — ЦВЕТ НЕ МЕНЯЕТСЯ ======================================================== */ html body.woocommerce.archive .site-main .shop-grid .msk-final-brand:link, html body.woocommerce.archive .site-main .shop-grid .msk-final-brand:visited, html body.woocommerce.archive .site-main .shop-grid .msk-final-brand:active, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-brand:link, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-brand:visited, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-brand:active { color: #8b6839 !important; -webkit-text-fill-color: #8b6839 !important; } /* ======================================================== 11. HOVER НЕ ДВИГАЕТ КНОПКИ ======================================================== */ html body.woocommerce.archive .site-main .shop-grid .msk-final-cart:hover, html body.woocommerce.archive .site-main .shop-grid .msk-final-brand:hover, html body.woocommerce.archive .site-main .shop-grid .msk-final-cart:focus-visible, html body.woocommerce.archive .site-main .shop-grid .msk-final-brand:focus-visible, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-cart:hover, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-brand:hover, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-cart:focus-visible, html body.post-type-archive-product.woocommerce .site-main .shop-grid .msk-final-brand:focus-visible { transform: none !important; top: 0 !important; } }