/* ============================================================ СТАРЫЕ КОРЗИНЫ И БРЕНДЫ ============================================================ */ html body .shop-item .shop-item__buttons-cart, html body .shop-item .shop-item__icons-cart, html body .shop-item .msk-loop-cart, html body .shop-item .msk-card-cart, html body .shop-item .msk-bottom-cart, html body .shop-item .msk-loop-brand, html body .shop-item .msk-card-brand, html body .shop-item .msk-bottom-brand, html body .shop-item .pwb-brands-in-loop, html body .shop-item .pwb-loop-brands { display: none !important; } /* * Другие старые Woo-кнопки тоже скрываем. * Нашу .msk-final-cart НЕ трогаем. */ html body .shop-item .add_to_cart_button:not(.msk-final-cart) { display: none !important; } /* * Старый сниппет бренда загружает собственный CSS позже * и может снова показать Ceriotti · Италия отдельной строкой. * Этот более точный селектор убирает сам блок и его размеры. */ html body .shop-grid .shop-item.product .shop-item-inner > .pwb-brands-in-loop, html body .shop-grid .shop-item.product .shop-item-inner > .pwb-loop-brands { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } html body .shop-grid .shop-item.product .shop-item-inner .msk-product-brand:not(.msk-final-brand) { display: none !important; } /* ============================================================ СЕТКА: ОДИНАКОВАЯ ВЫСОТА КАРТОЧЕК В КАЖДОМ РЯДУ ============================================================ */ html body .shop-grid { align-items: stretch !important; } html body .shop-grid > .shop-item { align-self: stretch !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* ============================================================ САМА ЗОЛОТАЯ КАРТОЧКА ============================================================ */ html body .shop-grid > .shop-item > .shop-item-inner { height: 100% !important; min-height: 0 !important; max-height: none !important; align-self: stretch !important; /* * НИКАКОГО резерва под корзину. * Она теперь обычная следующая строка. */ padding-bottom: 8px !important; box-sizing: border-box !important; } /* ============================================================ ЕДИНАЯ ОБЛАСТЬ ИЗОБРАЖЕНИЯ ============================================================ */ html body .shop-item .shop-item__image, html body .shop-item .shop-item__image-inner { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } html body .shop-item .shop-item__image img, html body .shop-item .shop-item__image-inner img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; } /* * Старое правило сайта добавляло карточкам без бренда * невидимый блок высотой 24px. Теперь бренд находится * в общей строке с корзиной, поэтому этот резерв не нужен. */ html body .shop-item--type-standard .shop-item-inner:not(:has(.pwb-brands-in-loop))::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; flex: 0 0 0 !important; } /* ============================================================ НАЗВАНИЕ ============================================================ */ html body .shop-item .shop-item__title, html body .shop-item .woocommerce-loop-product__title { height: auto !important; min-height: 47px !important; max-height: none !important; margin-bottom: 5px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; } /* * В карточке товара названия в блоках «Похожие товары» и * «Недавно просмотренные товары» занимают единое место. * Короткие названия прижаты вниз, поэтому цена, наличие и * корзина остаются на общих горизонтальных линиях. */ html body.single-product .related-products .shop-item .shop-item__title, html body.single-product .related-products .shop-item .woocommerce-loop-product__title { min-height: 68px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } /* * КАТАЛОГ / КАТЕГОРИИ НА ПК * Резервируем единое место под 3 строки названия. * Короткие названия прижимаем вниз, чтобы цена, наличие * и нижняя строка "В корзину + бренд" всегда были на одном уровне. */ @media (min-width: 768px) { html body.archive.woocommerce .shop-item .shop-item__title, html body.archive.woocommerce .shop-item .woocommerce-loop-product__title { min-height: 68px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } } /* * Длинное название слегка уменьшаем. * Оно НЕ обрезается. */ html body .shop-item.msk-title-long .shop-item__title, html body .shop-item.msk-title-long .woocommerce-loop-product__title { font-size: 14px !important; line-height: 1.22 !important; letter-spacing: -0.1px !important; } html body .shop-item.msk-title-very-long .shop-item__title, html body .shop-item.msk-title-very-long .woocommerce-loop-product__title { font-size: 13px !important; line-height: 1.2 !important; letter-spacing: -0.15px !important; } /* ============================================================ ЦЕНА ============================================================ */ html body .shop-item .shop-item__price, html body .shop-item .price { min-height: 20px !important; margin: 0 0 5px !important; padding: 0 !important; line-height: 1.08 !important; white-space: nowrap !important; } /* * В Bono .price находится внутри .shop-item__price. * Внешний блок уже даёт нужные 5px, поэтому у вложенного * элемента второй нижний отступ обязательно обнуляем. */ html body .shop-item .shop-item__price > .price { margin: 0 !important; } html body .shop-item .price ins, html body .shop-item .price del, html body .shop-item .price .amount, html body .shop-item .shop-item__price ins, html body .shop-item .shop-item__price del, html body .shop-item .shop-item__price .amount { white-space: nowrap !important; } /* ============================================================ НАЛИЧИЕ ============================================================ */ html body .shop-item .shop-item__in-stock, html body .shop-item .shop-item__out-of-stock { min-height: 22px !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; } html body .shop-item .product-meta__in-stock, html body .shop-item .stock { min-height: 22px !important; margin: 0 !important; padding: 0 !important; line-height: 1.15 !important; } /* ============================================================ КОРЗИНА + БРЕНД В ОБЫЧНОМ ПОТОКЕ. НИКАКИХ absolute / bottom / transform. ============================================================ */ html body .shop-item .msk-final-card-row { position: relative !important; z-index: 4 !important; isolation: isolate !important; pointer-events: auto !important; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; min-height: 35px !important; margin: auto 0 0 !important; padding: 5px 0 0 !important; box-sizing: border-box !important; } /* ============================================================ В КОРЗИНУ ============================================================ */ html body .shop-item .msk-final-cart { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; flex: 0 0 auto !important; min-width: 103px !important; height: 30px !important; margin: 0 !important; padding: 4px 9px !important; box-sizing: border-box !important; background: #fbf8f3 !important; border: 1px solid rgba(181,149,91,.42) !important; border-radius: 8px !important; color: #8b6839 !important; font-family: Manrope, Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; z-index: 1 !important; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } html body .shop-item .msk-final-cart:hover, html body .shop-item .msk-final-cart:focus-visible, html body .shop-item .msk-final-brand:hover, html body .shop-item .msk-final-brand:focus-visible { color: #704c22 !important; background: #f1e5d4 !important; border-color: #b5955b !important; box-shadow: 0 4px 12px rgba(112,76,34,.14) !important; transform: translateY(-1px) !important; } html body .shop-item .msk-final-cart svg { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; pointer-events: none !important; } /* ============================================================ БРЕНД ============================================================ */ html body .shop-item .msk-final-brand { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: calc(100% - 109px) !important; height: 30px !important; margin: 0 !important; padding: 4px 8px !important; box-sizing: border-box !important; background: #fbf8f3 !important; border: 1px solid rgba(181,149,91,.32) !important; border-radius: 8px !important; color: #8b6839 !important; font-family: Manrope, Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; /* * Старый класс .msk-product-brand задаёт z-index:9999. * Сбрасываем его, чтобы бренд не появлялся поверх корзины. */ z-index: 1 !important; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } /* ============================================================ МОБИЛЬНАЯ ============================================================ */ @media (max-width: 767px) { /* * МОБИЛЬНАЯ: единое место под 3 строки названия. * Короткие названия прижимаем вниз, чтобы цена, наличие * и нижняя строка оставались на одном уровне. */ html body .shop-item .shop-item__title, html body .shop-item .woocommerce-loop-product__title { min-height: 60px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; } /* * Цена снова нормального читаемого размера. */ html body .shop-item .shop-item__price, html body .shop-item .price { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 2px !important; white-space: nowrap !important; line-height: 1.05 !important; } /* новая цена */ html body .shop-item .price ins, html body .shop-item .shop-item__price ins, html body .shop-item .shop-item__price > .amount { font-size: 15px !important; letter-spacing: -0.35px !important; white-space: nowrap !important; } /* старая */ html body .shop-item .price del, html body .shop-item .shop-item__price del { font-size: 12px !important; letter-spacing: -0.4px !important; white-space: nowrap !important; } /* * Длинные названия на мобильном * чуть компактнее, но не режем. */ html body .shop-item.msk-title-long .shop-item__title { font-size: 13.5px !important; line-height: 1.2 !important; } html body .shop-item.msk-title-very-long .shop-item__title { font-size: 12.5px !important; line-height: 1.18 !important; } html body .shop-item .msk-final-card-row { min-height: 33px !important; gap: 4px !important; margin-top: auto !important; padding-top: 5px !important; } html body .shop-item .msk-final-cart { min-width: 82px !important; height: 28px !important; padding: 3px 6px !important; gap: 3px !important; font-size: 10px !important; border-radius: 7px !important; } html body .shop-item .msk-final-cart svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; } html body .shop-item .msk-final-brand { max-width: calc(100% - 86px) !important; height: 28px !important; padding: 3px 5px !important; font-size: 10px !important; border-radius: 7px !important; } html body .shop-grid > .shop-item > .shop-item-inner { padding-bottom: 6px !important; } }